Added about page

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: List, label: 'Habits', href: '/habits' },
-  { icon: Calendar, label: 'Calendar', href: '/calendar' },
-  { icon: Gift, label: 'Wishlist', href: '/wishlist' },
-  { icon: Coins, label: 'Coins', href: '/coins' },
+  { icon: Home, label: 'Dashboard', href: '/', position: 'main' },
+  { icon: List, label: 'Habits', href: '/habits', position: 'main' },
+  { icon: Calendar, label: 'Calendar', href: '/calendar', position: 'main' },
+  { icon: Gift, label: 'Wishlist', href: '/wishlist', position: 'main' },
+  { 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">
-          {navItems.map((item) => (
-            <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>
+      <>
+        <div className="pb-16" /> {/* Add padding at the bottom to prevent content from being hidden */}
+        <nav className="lg:hidden fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-800 shadow-lg">
+          <div className="flex justify-around">
+            {[...navItems.filter(item => item.position === 'main'), ...navItems.filter(item => item.position === 'bottom')].map((item) => 
+              item.onClick ? (
+                <button
+                  key={item.label}
+                  onClick={() => item.onClick?.(setShowAbout)}
+                  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>
+                </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>
   )
 }