Added settings, enabled calendar

components/CoinBalance.tsx

@@ -1,7 +1,10 @@
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Coins } from 'lucide-react'
+import { formatNumber } from '@/lib/utils/formatNumber'
+import { useSettings } from '@/hooks/useSettings'
 
 export default function CoinBalance({ coinBalance }: { coinBalance: number }) {
+  const { settings } = useSettings()
   return (
     <Card>
       <CardHeader>
@@ -10,7 +13,9 @@ export default function CoinBalance({ coinBalance }: { coinBalance: number }) {
       <CardContent>
         <div className="flex items-center justify-center">
           <Coins className="h-12 w-12 text-yellow-400 mr-4" />
-          <span className="text-4xl font-bold">{coinBalance}</span>
+          <span className="text-4xl font-bold">
+            {formatNumber({ amount: coinBalance, settings })}
+          </span>
         </div>
       </CardContent>
     </Card>

components/CoinsManager.tsx

@@ -1,7 +1,9 @@
 'use client'
 
 import { useState } from 'react'
+import { useSettings } from '@/hooks/useSettings'
 import { Button } from '@/components/ui/button'
+import { formatNumber } from '@/lib/utils/formatNumber'
 import { History } from 'lucide-react'
 import EmptyState from './EmptyState'
 import { Input } from '@/components/ui/input'
@@ -13,6 +15,7 @@ import Link from 'next/link'
 
 export default function CoinsManager() {
   const { balance, transactions, addAmount, removeAmount } = useCoins()
+  const { settings } = useSettings()
   const DEFAULT_AMOUNT = '0'
   const [amount, setAmount] = useState(DEFAULT_AMOUNT)
 
@@ -43,7 +46,7 @@ export default function CoinsManager() {
               <span className="text-2xl animate-bounce hover:animate-none cursor-default">🪙</span>
               <div>
                 <div className="text-sm font-normal text-muted-foreground">Current Balance</div>
-                <div className="text-3xl font-bold">{balance} coins</div>
+                <div className="text-3xl font-bold">{formatNumber({ amount: balance, settings })} coins</div>
               </div>
             </CardTitle>
           </CardHeader>
@@ -108,29 +111,33 @@ export default function CoinsManager() {
               <div className="p-4 rounded-lg bg-green-100 dark:bg-green-900">
                 <div className="text-sm text-green-800 dark:text-green-100 mb-1">Total Earned</div>
                 <div className="text-2xl font-bold text-green-900 dark:text-green-50">
-                  {transactions
-                    .filter(t => {
-                      if (t.type === 'HABIT_COMPLETION' && t.relatedItemId) {
-                        return !transactions.some(undoT =>
-                          undoT.type === 'HABIT_UNDO' &&
-                          undoT.relatedItemId === t.relatedItemId
-                        )
-                      }
-                      return t.amount > 0 && t.type !== 'HABIT_UNDO'
-                    })
-                    .reduce((sum, t) => sum + t.amount, 0)
-                  } 🪙
+                  {formatNumber({
+                    amount: transactions
+                      .filter(t => {
+                        if (t.type === 'HABIT_COMPLETION' && t.relatedItemId) {
+                          return !transactions.some(undoT =>
+                            undoT.type === 'HABIT_UNDO' &&
+                            undoT.relatedItemId === t.relatedItemId
+                          )
+                        }
+                        return t.amount > 0 && t.type !== 'HABIT_UNDO'
+                      })
+                      .reduce((sum, t) => sum + t.amount, 0)
+                    , settings
+                  })} 🪙
                 </div>
               </div>
 
               <div className="p-4 rounded-lg bg-red-100 dark:bg-red-900">
                 <div className="text-sm text-red-800 dark:text-red-100 mb-1">Total Spent</div>
                 <div className="text-2xl font-bold text-red-900 dark:text-red-50">
-                  {Math.abs(
-                    transactions
-                      .filter(t => t.type === 'WISH_REDEMPTION' || t.type === 'MANUAL_ADJUSTMENT')
-                      .reduce((sum, t) => sum + (t.amount < 0 ? t.amount : 0), 0)
-                  )} 🪙
+                  {formatNumber({
+                    amount: Math.abs(
+                      transactions
+                        .filter(t => t.type === 'WISH_REDEMPTION' || t.type === 'MANUAL_ADJUSTMENT')
+                        .reduce((sum, t) => sum + (t.amount < 0 ? t.amount : 0), 0)
+                    ), settings
+                  })} 🪙
                 </div>
               </div>
 
@@ -165,59 +172,59 @@ export default function CoinsManager() {
                 />
               ) : (
                 transactions.map((transaction) => {
-                const getBadgeStyles = () => {
-                  switch (transaction.type) {
-                    case 'HABIT_COMPLETION':
-                      return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-100'
-                    case 'HABIT_UNDO':
-                      return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-100'
-                    case 'WISH_REDEMPTION':
-                      return 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-100'
-                    case 'MANUAL_ADJUSTMENT':
-                      return 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-100'
-                    default:
-                      return 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-100'
+                  const getBadgeStyles = () => {
+                    switch (transaction.type) {
+                      case 'HABIT_COMPLETION':
+                        return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-100'
+                      case 'HABIT_UNDO':
+                        return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-100'
+                      case 'WISH_REDEMPTION':
+                        return 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-100'
+                      case 'MANUAL_ADJUSTMENT':
+                        return 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-100'
+                      default:
+                        return 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-100'
+                    }
                   }
-                }
 
-                return (
-                  <div
-                    key={transaction.id}
-                    className="flex justify-between items-center p-3 border rounded hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
-                  >
-                    <div className="space-y-1">
-                      <div className="flex items-center gap-2">
-                        {transaction.relatedItemId ? (
-                          <Link
-                            href={`${transaction.type === 'WISH_REDEMPTION' ? '/wishlist' : '/habits'}?highlight=${transaction.relatedItemId}`}
-                            className="font-medium hover:underline"
-                            scroll={true}
-                          >
-                            {transaction.description}
-                          </Link>
-                        ) : (
-                          <p className="font-medium">{transaction.description}</p>
-                        )}
-                        <span
-                          className={`text-xs px-2 py-1 rounded-full ${getBadgeStyles()}`}
-                        >
-                          {transaction.type.split('_').join(' ')}
-                        </span>
-                      </div>
-                      <p className="text-sm text-gray-500">
-                        {format(new Date(transaction.timestamp), 'PPpp')}
-                      </p>
-                    </div>
-                    <span
-                      className={`font-mono ${transaction.amount >= 0
-                        ? 'text-green-600 dark:text-green-400'
-                        : 'text-red-600 dark:text-red-400'
-                        }`}
+                  return (
+                    <div
+                      key={transaction.id}
+                      className="flex justify-between items-center p-3 border rounded hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
                     >
-                      {transaction.amount >= 0 ? '+' : ''}{transaction.amount}
-                    </span>
-                  </div>
-                )
+                      <div className="space-y-1">
+                        <div className="flex items-center gap-2">
+                          {transaction.relatedItemId ? (
+                            <Link
+                              href={`${transaction.type === 'WISH_REDEMPTION' ? '/wishlist' : '/habits'}?highlight=${transaction.relatedItemId}`}
+                              className="font-medium hover:underline"
+                              scroll={true}
+                            >
+                              {transaction.description}
+                            </Link>
+                          ) : (
+                            <p className="font-medium">{transaction.description}</p>
+                          )}
+                          <span
+                            className={`text-xs px-2 py-1 rounded-full ${getBadgeStyles()}`}
+                          >
+                            {transaction.type.split('_').join(' ')}
+                          </span>
+                        </div>
+                        <p className="text-sm text-gray-500">
+                          {format(new Date(transaction.timestamp), 'PPpp')}
+                        </p>
+                      </div>
+                      <span
+                        className={`font-mono ${transaction.amount >= 0
+                          ? 'text-green-600 dark:text-green-400'
+                          : 'text-red-600 dark:text-red-400'
+                          }`}
+                      >
+                        {transaction.amount >= 0 ? '+' : ''}{transaction.amount}
+                      </span>
+                    </div>
+                  )
                 })
               )}
             </div>

components/HabitList.tsx

@@ -61,7 +61,7 @@ export default function HabitList() {
         }}
         onSave={async (habit) => {
           if (editingHabit) {
-            await editHabit(editingHabit)
+            await editHabit({ ...habit, id: editingHabit.id })
           } else {
             await addHabit(habit)
           }

components/Header.tsx

@@ -1,6 +1,7 @@
 import { Bell, Settings } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { Logo } from '@/components/Logo'
+import Link from 'next/link'
 
 interface HeaderProps {
   className?: string
@@ -12,17 +13,22 @@ export default function Header({ className }: HeaderProps) {
       <div className="mx-auto py-4 px-4 sm:px-6 lg:px-8">
         <div className="flex items-center justify-between">
           <Logo />
-          {/* <div className="flex items-center"> */}
-          {/*   <Button variant="ghost" size="icon" className="mr-2"> */}
-          {/*     <Bell className="h-5 w-5" /> */}
-          {/*   </Button> */}
-          {/*   <Button variant="ghost" size="icon"> */}
-          {/*     <Settings className="h-5 w-5" /> */}
-          {/*   </Button> */}
-          {/* </div> */}
+          <div className="flex items-center">
+            {/*   <Button variant="ghost" size="icon" className="mr-2"> */}
+            {/*     <Bell className="h-5 w-5" /> */}
+            {/*   </Button> */}
+            <Link
+              href="/settings"
+              aria-label='settings'
+            >
+              <Button variant="ghost" size="icon">
+                <Settings className="h-5 w-5" />
+              </Button>
+            </Link>
+          </div>
         </div>
       </div>
-    </header>
+    </header >
   )
 }
 

components/Layout.tsx

@@ -1,18 +1,17 @@
 import Header from './Header'
-import Sidebar from './Sidebar'
-import MobileNavigation from './MobileNavigation'
+import Navigation from './Navigation'
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <div className="flex flex-col h-screen bg-gray-100 dark:bg-gray-900">
       <Header className="sticky top-0 z-50" />
       <div className="flex flex-1 overflow-hidden">
-        <Sidebar />
+        <Navigation />
         <div className="flex-1 flex flex-col">
           <main className="flex-1 overflow-x-hidden overflow-y-auto bg-gray-100 dark:bg-gray-900">
             {children}
           </main>
-          <MobileNavigation />
+          <Navigation isMobile />
         </div>
       </div>
     </div>

components/MobileNavigation.tsx

@@ -1,30 +0,0 @@
-import Link from 'next/link'
-import { Home, Calendar, List, Gift, Coins } from 'lucide-react'
-
-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' },
-]
-
-export default function MobileNavigation() {
-  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>
-  )
-}
-

components/Navigation.tsx

@@ -1,15 +1,39 @@
 import Link from 'next/link'
-import { Home, Calendar, List, Gift, Coins } from 'lucide-react'
+import { Home, Calendar, List, Gift, Coins, Settings } from 'lucide-react'
 
 const navItems = [
   { icon: Home, label: 'Dashboard', href: '/' },
   { icon: List, label: 'Habits', href: '/habits' },
-  // { icon: Calendar, label: 'Calendar', href: '/calendar' },
+  { icon: Calendar, label: 'Calendar', href: '/calendar' },
   { icon: Gift, label: 'Wishlist', href: '/wishlist' },
   { icon: Coins, label: 'Coins', href: '/coins' },
 ]
 
-export default function Sidebar() {
+interface NavigationProps {
+  className?: string
+  isMobile?: boolean
+}
+
+export default function Navigation({ className, isMobile = false }: NavigationProps) {
+  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>
+    )
+  }
+
   return (
     <div className="hidden lg:flex lg:flex-shrink-0">
       <div className="flex flex-col w-64">
@@ -33,4 +57,3 @@ export default function Sidebar() {
     </div>
   )
 }
-

components/ui/switch.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }