Added about page

Budfile

@@ -1,5 +1,14 @@
 #!/bin/bash
 
+_warn() {
+  echo -e -n "\033[1;33mWarning:\033[0m "
+  echo "${1}"
+  shift
+  for arg in "$@"; do
+    echo "         ${arg}"
+  done
+}
+
 bump_version() {
   echo "Which version part would you like to bump? ([M]ajor/[m]inor/[p]atch)"
   read -r version_part
@@ -26,26 +35,50 @@ bump_version() {
 }
 
 commit() {
-  # Check if package.json is staged
+  # First check if versions match between package.json and CHANGELOG.md
-  if git diff --cached --name-only | grep -q "package.json"; then
+  if ! check_versions; then
+    _warn "Version mismatch between package.json and CHANGELOG.md" "Please update the changelog or package.json before committing"
+    return 1
+  fi
+
+  # Check if package.json version has changed in staged changes
+  if git diff --cached package.json | grep -q '"version":'; then
     # Get the new version from package.json
     new_version=$(node -p "require('./package.json').version")
 
-    echo "package.json has been modified. Would you like to tag this release as v$new_version? (y/n)"
+    echo "Version has been changed. Would you like to tag this release as v$new_version? (y/n)"
     read -r response
 
     if [[ "$response" =~ ^[Yy]$ ]]; then
       git commit
       git tag -a "v$new_version" -m "Release version $new_version"
       echo "Created tag v$new_version"
-    else
+    elif [[ "$response" =~ ^[Nn]$ ]]; then
       git commit
+    else
+      _warn "Unrecognized reply: $response"
+      return 1
     fi
   else
     git commit
   fi
 }
 
+check_versions() {
+  # Get version from package.json
+  pkg_version=$(node -p "require('./package.json').version")
+
+  # Get latest version from CHANGELOG.md (first version entry)
+  changelog_version=$(grep -m 1 "^## Version" CHANGELOG.md | sed 's/^## Version //')
+
+  # Compare versions
+  if [ "$pkg_version" = "$changelog_version" ]; then
+    return 0
+  else
+    return 1
+  fi
+}
+
 docker_push() {
   local version=$(node -p "require('./package.json').version")
   docker tag habittrove dohsimpson/habittrove:latest

CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## Version 0.1.2
+
+### Added
+
+- About modal
+  - display changelog and version info
+
+### Changed
+
+- show number of redeemable wishlist items on dashboard
+
 ## Version 0.1.1
 
 ### Added

app/actions/data.ts

@@ -163,3 +163,13 @@ export async function removeCoins(
   await saveCoinsData(newData)
   return newData
 }
+
+export async function getChangelog(): Promise<string> {
+  try {
+    const changelogPath = path.join(process.cwd(), 'CHANGELOG.md')
+    return await fs.readFile(changelogPath, 'utf8')
+  } catch (error) {
+    console.error('Error loading changelog:', error)
+    return '# Changelog\n\nNo changelog available.'
+  }
+}

components/AboutModal.tsx

@@ -0,0 +1,82 @@
+'use client'
+
+import { Dialog, DialogContent, DialogHeader } from "./ui/dialog"
+import { Button } from "./ui/button"
+import { Star, History } from "lucide-react"
+import packageJson from '../package.json'
+import { DialogTitle } from "@radix-ui/react-dialog"
+import { Logo } from "./Logo"
+import ChangelogModal from "./ChangelogModal"
+import { useState } from "react"
+
+interface AboutModalProps {
+  isOpen: boolean
+  onClose: () => void
+}
+
+export default function AboutModal({ isOpen, onClose }: AboutModalProps) {
+  const version = packageJson.version
+  const [changelogOpen, setChangelogOpen] = useState(false)
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="max-w-sm">
+        <DialogHeader>
+          <DialogTitle aria-label="about"></DialogTitle>
+        </DialogHeader>
+        <div className="space-y-6 text-center py-4">
+          <div>
+            <div className="flex justify-center mb-1">
+              <Logo />
+            </div>
+            <div className="flex items-center justify-center gap-2">
+              <p className="text-sm text-muted-foreground">v{version}</p>
+            </div>
+            <div className="py-2">
+              <Button
+                variant="outline"
+                size="sm"
+                className="h-6 px-2"
+                onClick={() => setChangelogOpen(true)}
+              >
+                <History className="w-3 h-3 mr-1" />
+                Changelog
+              </Button>
+            </div>
+          </div>
+
+          <div className="space-y-4">
+            <div className="text-sm">
+              Created with ❤️ by{' '}
+              <a
+                href="https://github.com/dohsimpson"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="font-medium hover:underline"
+              >
+                @dohsimpson
+              </a>
+            </div>
+
+            <div className="flex justify-center">
+              <a
+                href="https://github.com/dohsimpson/habittrove"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <Button variant="outline" size="sm">
+                  <Star className="w-4 h-4 mr-2" />
+                  Star on GitHub
+                </Button>
+              </a>
+            </div>
+          </div>
+        </div>
+      </DialogContent>
+      <ChangelogModal
+        isOpen={changelogOpen}
+        onClose={() => setChangelogOpen(false)}
+      />
+    </Dialog>
+  )
+}

components/ChangelogModal.tsx

@@ -0,0 +1,39 @@
+'use client'
+
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "./ui/dialog"
+import ReactMarkdown from 'react-markdown'
+import { useEffect, useState } from "react"
+import { getChangelog } from "@/app/actions/data"
+
+interface ChangelogModalProps {
+  isOpen: boolean
+  onClose: () => void
+}
+
+export default function ChangelogModal({ isOpen, onClose }: ChangelogModalProps) {
+  const [changelog, setChangelog] = useState<string>('')
+
+  useEffect(() => {
+    if (isOpen) {
+      const loadChangelog = async () => {
+        const content = await getChangelog()
+        console.log(content)
+        setChangelog(content)
+      }
+      loadChangelog()
+    }
+  }, [isOpen])
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>Changelog</DialogTitle>
+        </DialogHeader>
+        <div className="prose dark:prose-invert prose-sm max-w-none">
+          <ReactMarkdown>{changelog}</ReactMarkdown>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}

components/DailyOverview.tsx

@@ -126,9 +126,14 @@ export default function DailyOverview({
           </div>
 
           <div className="space-y-2">
+            <div className="flex items-center justify-between mb-2">
+              <h3 className="font-semibold">Wishlist Goals</h3>
+              <Badge variant="secondary">
+                {wishlistItems.filter(item => item.coinCost <= coinBalance).length}/{wishlistItems.length} Redeemable
+              </Badge>
+            </div>
             {achievableWishlistItems.length > 0 && (
               <div>
-                <h3 className="font-semibold mb-2">Wishlist Goals</h3>
                 <div className={`space-y-3 transition-all duration-300 ease-in-out ${expandedWishlist ? 'max-h-[500px]' : 'max-h-[200px]'} overflow-hidden`}>
                   {achievableWishlistItems
                     .slice(0, expandedWishlist ? undefined : 1)

components/Navigation.tsx

@@ -1,12 +1,17 @@
+'use client'
+
 import Link from 'next/link'
-import { Home, Calendar, List, Gift, Coins, Settings } from 'lucide-react'
+import { Home, Calendar, List, Gift, Coins, Settings, Info } from 'lucide-react'
+import { useState } from 'react'
+import AboutModal from './AboutModal'
 
 const navItems = [
-  { icon: Home, label: 'Dashboard', href: '/' },
+  { icon: Home, label: 'Dashboard', href: '/', position: 'main' },
-  { icon: List, label: 'Habits', href: '/habits' },
+  { icon: List, label: 'Habits', href: '/habits', position: 'main' },
-  { icon: Calendar, label: 'Calendar', href: '/calendar' },
+  { icon: Calendar, label: 'Calendar', href: '/calendar', position: 'main' },
-  { icon: Gift, label: 'Wishlist', href: '/wishlist' },
+  { icon: Gift, label: 'Wishlist', href: '/wishlist', position: 'main' },
-  { icon: Coins, label: 'Coins', href: '/coins' },
+  { icon: Coins, label: 'Coins', href: '/coins', position: 'main' },
+  { icon: Info, label: 'About', href: '#', position: 'bottom', onClick: (setShow: (show: boolean) => void) => setShow(true) },
 ]
 
 interface NavigationProps {
@@ -15,22 +20,38 @@ interface NavigationProps {
 }
 
 export default function Navigation({ className, isMobile = false }: NavigationProps) {
+  const [showAbout, setShowAbout] = useState(false)
   if (isMobile) {
     return (
-      <nav className="lg:hidden fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-800 shadow-lg">
+      <>
-        <div className="flex justify-around">
+        <div className="pb-16" /> {/* Add padding at the bottom to prevent content from being hidden */}
-          {navItems.map((item) => (
+        <nav className="lg:hidden fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-800 shadow-lg">
-            <Link
+          <div className="flex justify-around">
-              key={item.label}
+            {[...navItems.filter(item => item.position === 'main'), ...navItems.filter(item => item.position === 'bottom')].map((item) => 
-              href={item.href}
+              item.onClick ? (
-              className="flex flex-col items-center py-2 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400"
+                <button
-            >
+                  key={item.label}
-              <item.icon className="h-6 w-6" />
+                  onClick={() => item.onClick?.(setShowAbout)}
-              <span className="text-xs mt-1">{item.label}</span>
+                  className="flex flex-col items-center py-2 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400"
-            </Link>
+                >
-          ))}
+                  <item.icon className="h-6 w-6" />
-        </div>
+                  <span className="text-xs mt-1">{item.label}</span>
-      </nav>
+                </button>
+              ) : (
+                <Link
+                  key={item.label}
+                  href={item.href}
+                  className="flex flex-col items-center py-2 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400"
+                >
+                  <item.icon className="h-6 w-6" />
+                  <span className="text-xs mt-1">{item.label}</span>
+                </Link>
+              )
+            )}
+          </div>
+        </nav>
+        <AboutModal isOpen={showAbout} onClose={() => setShowAbout(false)} />
+      </>
     )
   }
 
@@ -40,7 +61,7 @@ export default function Navigation({ className, isMobile = false }: NavigationPr
         <div className="flex flex-col h-0 flex-1 bg-gray-800">
           <div className="flex-1 flex flex-col pt-5 pb-4 overflow-y-auto">
             <nav className="mt-5 flex-1 px-2 space-y-1">
-              {navItems.map((item) => (
+              {navItems.filter(item => item.position === 'main').map((item) => (
                 <Link
                   key={item.label}
                   href={item.href}
@@ -51,9 +72,19 @@ export default function Navigation({ className, isMobile = false }: NavigationPr
                 </Link>
               ))}
             </nav>
+            <div className="px-2 pb-2">
+              <button
+                onClick={() => setShowAbout(true)}
+                className="w-full group flex items-center px-2 py-2 text-sm leading-6 font-medium rounded-md text-gray-300 hover:text-white hover:bg-gray-700"
+              >
+                <Info className="mr-4 flex-shrink-0 h-6 w-6 text-gray-400" aria-hidden="true" />
+                About
+              </button>
+            </div>
           </div>
         </div>
       </div>
+      <AboutModal isOpen={showAbout} onClose={() => setShowAbout(false)} />
     </div>
   )
 }

next.config.ts

@@ -3,6 +3,13 @@ import type { NextConfig } from "next";
 const nextConfig: NextConfig = {
   /* config options here */
   output: 'standalone',
+  webpack: (config) => {
+    config.module.rules.push({
+      test: /\.md$/,
+      use: 'raw-loader'
+    })
+    return config
+  }
 };
 
 export default nextConfig;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "habittrove",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "private": true,
   "scripts": {
     "dev": "next dev --turbopack",
@@ -31,12 +31,14 @@
     "react-confetti": "^6.2.2",
     "react-day-picker": "^8.10.1",
     "react-dom": "^19.0.0",
+    "react-markdown": "^9.0.1",
     "recharts": "^2.15.0",
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
+    "@tailwindcss/typography": "^0.5.15",
     "@types/node": "^20.17.10",
     "@types/react": "^19",
     "@types/react-dom": "^19",
@@ -44,6 +46,7 @@
     "eslint-config-next": "15.1.3",
     "eslint-plugin-unused-imports": "^4.1.4",
     "postcss": "^8",
+    "raw-loader": "^4.0.2",
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
   }

tailwind.config.ts

@@ -1,8 +1,8 @@
 import type { Config } from "tailwindcss";
 
 export default {
-    darkMode: ["class"],
+  darkMode: ["class"],
-    content: [
+  content: [
     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./components/**/*.{js,ts,jsx,tsx,mdx}",
     "./app/**/*.{js,ts,jsx,tsx,mdx}",
@@ -20,54 +20,57 @@ export default {
       animation: {
         celebrate: 'celebrate 1s ease-in-out'
       },
-  		colors: {
+      colors: {
-  			background: 'hsl(var(--background))',
+        background: 'hsl(var(--background))',
-  			foreground: 'hsl(var(--foreground))',
+        foreground: 'hsl(var(--foreground))',
-  			card: {
+        card: {
-  				DEFAULT: 'hsl(var(--card))',
+          DEFAULT: 'hsl(var(--card))',
-  				foreground: 'hsl(var(--card-foreground))'
+          foreground: 'hsl(var(--card-foreground))'
-  			},
+        },
-  			popover: {
+        popover: {
-  				DEFAULT: 'hsl(var(--popover))',
+          DEFAULT: 'hsl(var(--popover))',
-  				foreground: 'hsl(var(--popover-foreground))'
+          foreground: 'hsl(var(--popover-foreground))'
-  			},
+        },
-  			primary: {
+        primary: {
-  				DEFAULT: 'hsl(var(--primary))',
+          DEFAULT: 'hsl(var(--primary))',
-  				foreground: 'hsl(var(--primary-foreground))'
+          foreground: 'hsl(var(--primary-foreground))'
-  			},
+        },
-  			secondary: {
+        secondary: {
-  				DEFAULT: 'hsl(var(--secondary))',
+          DEFAULT: 'hsl(var(--secondary))',
-  				foreground: 'hsl(var(--secondary-foreground))'
+          foreground: 'hsl(var(--secondary-foreground))'
-  			},
+        },
-  			muted: {
+        muted: {
-  				DEFAULT: 'hsl(var(--muted))',
+          DEFAULT: 'hsl(var(--muted))',
-  				foreground: 'hsl(var(--muted-foreground))'
+          foreground: 'hsl(var(--muted-foreground))'
-  			},
+        },
-  			accent: {
+        accent: {
-  				DEFAULT: 'hsl(var(--accent))',
+          DEFAULT: 'hsl(var(--accent))',
-  				foreground: 'hsl(var(--accent-foreground))'
+          foreground: 'hsl(var(--accent-foreground))'
-  			},
+        },
-  			destructive: {
+        destructive: {
-  				DEFAULT: 'hsl(var(--destructive))',
+          DEFAULT: 'hsl(var(--destructive))',
-  				foreground: 'hsl(var(--destructive-foreground))'
+          foreground: 'hsl(var(--destructive-foreground))'
-  			},
+        },
-  			border: 'hsl(var(--border))',
+        border: 'hsl(var(--border))',
-  			input: 'hsl(var(--input))',
+        input: 'hsl(var(--input))',
-  			ring: 'hsl(var(--ring))',
+        ring: 'hsl(var(--ring))',
-  			chart: {
+        chart: {
-  				'1': 'hsl(var(--chart-1))',
+          '1': 'hsl(var(--chart-1))',
-  				'2': 'hsl(var(--chart-2))',
+          '2': 'hsl(var(--chart-2))',
-  				'3': 'hsl(var(--chart-3))',
+          '3': 'hsl(var(--chart-3))',
-  				'4': 'hsl(var(--chart-4))',
+          '4': 'hsl(var(--chart-4))',
-  				'5': 'hsl(var(--chart-5))'
+          '5': 'hsl(var(--chart-5))'
-  			}
+        }
-  		},
+      },
-  		borderRadius: {
+      borderRadius: {
-  			lg: 'var(--radius)',
+        lg: 'var(--radius)',
-  			md: 'calc(var(--radius) - 2px)',
+        md: 'calc(var(--radius) - 2px)',
-  			sm: 'calc(var(--radius) - 4px)'
+        sm: 'calc(var(--radius) - 4px)'
-  		}
+      }
-  	}
+    }
   },
-  plugins: [require("tailwindcss-animate")],
+  plugins: [
+    require("tailwindcss-animate"),
+    require('@tailwindcss/typography'),
+  ],
 } satisfies Config;