fix: resolved navigator undefined error

.github/workflows/docker-publish.yml

@@ -0,0 +1,94 @@
+name: Docker Build and Publish
+
+on:
+  push:
+    branches:
+      - main
+      - github-actions
+
+jobs:
+  build-and-push:
+    runs-on: ubuntu-latest
+    outputs:
+      EXISTS: ${{ steps.check-version.outputs.EXISTS }}
+      VERSION: ${{ steps.package-version.outputs.VERSION }}
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+
+      - name: Get version from package.json
+        id: package-version
+        run: echo "VERSION=$(node -p "require('./package.json').version")" >> $GITHUB_OUTPUT
+
+      - name: Login to DockerHub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Check if version exists
+        id: check-version
+        run: |
+          if docker pull dohsimpson/habittrove:v${{ steps.package-version.outputs.VERSION }} 2>/dev/null; then
+            echo "EXISTS=true" >> $GITHUB_OUTPUT
+          else
+            echo "EXISTS=false" >> $GITHUB_OUTPUT
+          fi
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Build and push Docker images
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          platforms: linux/amd64,linux/arm64
+          push: true
+          tags: |
+            ${{ steps.check-version.outputs.EXISTS == 'false' && format('dohsimpson/habittrove:v{0}', steps.package-version.outputs.VERSION) || '' }}
+            dohsimpson/habittrove:demo
+
+  deploy-demo:
+    runs-on: ubuntu-latest
+    needs: build-and-push
+    # demo tracks the demo tag
+    if: needs.build-and-push.outputs.EXISTS == 'false'
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions-hub/kubectl@master
+        env:
+          KUBE_CONFIG: ${{ secrets.KUBE_CONFIG }}
+        with:
+          args: rollout restart -n ${{ secrets.KUBE_NAMESPACE }} deploy/${{ secrets.KUBE_DEPLOYMENT }}
+
+  create-release:
+    runs-on: ubuntu-latest
+    needs: build-and-push
+    if: needs.build-and-push.outputs.EXISTS == 'false'
+    permissions:
+      contents: write
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Create GitHub release
+        env:
+          GH_TOKEN: ${{ secrets.GH_TOKEN }}
+          VERSION: ${{ needs.build-and-push.outputs.VERSION }}
+        run: |
+          # Extract release notes from CHANGELOG.md
+          notes=$(awk -v version="$VERSION" '
+            $0 ~ "## Version " version {flag=1;next}
+            $0 ~ "## Version " && flag {exit}
+            flag' CHANGELOG.md)
+
+          gh release create "v$VERSION" \
+              --repo="$GITHUB_REPOSITORY" \
+              --title="v$VERSION" \
+              --notes="$notes"

.github/workflows/release.yml

@@ -1,40 +0,0 @@
-name: Create and publish a Docker image to Github Container Registry
-
-on:
-  push:
-    tags:
-      - v*
-
-env:
-  REGISTRY: ghcr.io
-  IMAGE_NAME: ${{ github.repository }}
-
-jobs:
-  create-and-publish:
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      packages: write
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-      - name: Log in to the Container registry
-        uses: docker/login-action@v3
-        with:
-          registry: ${{ env.REGISTRY }}
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-      - name: Extract metadata (tags, labels) for Docker
-        id: meta
-        uses: docker/metadata-action@v5
-        with:
-          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-      - name: Build and push Docker image
-        uses: docker/build-push-action@v5
-        with:
-          context: .
-          push: true
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}

.github/workflows/test.yml

@@ -0,0 +1,28 @@
+name: Unit Tests
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Bun
+        uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: latest
+
+      - name: Install dependencies
+        run: bun install
+
+      - name: Run lint
+        run: bun run lint
+
+      - name: Run unit tests
+        run: bun test

README.md

@@ -22,8 +22,11 @@ Want to try HabitTrove before installing? Visit the public [demo instance](https
 ## Usage
 
 1. **Creating Habits**: Click the "Add Habit" button to create a new habit. Set a name, description, and coin reward.
+
 2. **Tracking Habits**: Mark habits as complete on your dashboard. Each completion earns you the specified coins.
+
 3. **Wishlist**: Add rewards to your wishlist that you can redeem with earned coins.
+
 4. **Statistics**: View your progress through the heatmap and streak counters.
 
 ## Docker Deployment
@@ -60,7 +63,7 @@ docker run -d \
   -v ./data:/app/data \
   -v ./backups:/app/backups \ # Add this line to map the backups directory
   -e AUTH_SECRET=$AUTH_SECRET \
-  ghcr.io/manindark/habittrove
+  dohsimpson/habittrove
 ```
 
 Available image tags:
@@ -107,7 +110,7 @@ To contribute to HabitTrove, you'll need to set up a development environment. He
 1. Clone the repository and navigate to the project directory:
 
 ```bash
-git clone https://github.com/ManInDark/HabitTrove.git
+git clone https://github.com/dohsimpson/habittrove.git
 cd habittrove
 ```
 
@@ -160,7 +163,7 @@ Run these commands regularly during development to catch issues early.
 
 ## Contributing
 
-We welcome feature requests and bug reports! Please [open an issue](https://github.com/ManInDark/habittrove/issues/new).
+We welcome feature requests and bug reports! Please [open an issue](https://github.com/dohsimpson/habittrove/issues/new). We do not accept pull request at the moment.
 
 ## License
 

app/actions/data.ts

@@ -1,32 +1,36 @@
 'use server'
 
-import { getCurrentUser, saltAndHashPassword, verifyPassword } from "@/lib/server-helpers";
+import fs from 'fs/promises'
+import path from 'path'
 import {
+  HabitsData,
   CoinsData,
   CoinTransaction,
-  DATA_DEFAULTS,
-  DataType,
-  getDefaultCoinsData,
-  getDefaultHabitsData,
-  getDefaultSettings,
-  getDefaultUsersData,
-  getDefaultWishlistData,
-  HabitsData,
-  Permission,
-  ServerSettings,
-  Settings,
   TransactionType,
-  User,
-  UserData,
+  WishlistItemType,
   WishlistData,
-  WishlistItemType
-} from '@/lib/types';
-import { d2t, getNow, uuid } from '@/lib/utils';
+  Settings,
+  DataType,
+  DATA_DEFAULTS,
+  getDefaultSettings,
+  UserData,
+  getDefaultUsersData,
+  User,
+  getDefaultWishlistData,
+  getDefaultHabitsData,
+  getDefaultCoinsData,
+  Permission,
+  ServerSettings
+} from '@/lib/types'
+import { d2t, deepMerge, getNow, checkPermission, uuid } from '@/lib/utils';
+import { verifyPassword } from "@/lib/server-helpers";
+import { saltAndHashPassword } from "@/lib/server-helpers";
 import { signInSchema } from '@/lib/zod';
-import fs from 'fs/promises';
+import { auth } from '@/auth';
 import _ from 'lodash';
-import path from 'path';
+import { getCurrentUser, getCurrentUserId } from '@/lib/server-helpers'
 
+import { PermissionError } from '@/lib/exceptions'
 
 type ResourceType = 'habit' | 'wishlist' | 'coins'
 type ActionType = 'write' | 'interact'

app/calendar/page.tsx

@@ -1,4 +1,7 @@
+import Layout from '@/components/Layout'
 import HabitCalendar from '@/components/HabitCalendar'
+import { ViewToggle } from '@/components/ViewToggle'
+import CompletionCountBadge from '@/components/CompletionCountBadge'
 
 export default function CalendarPage() {
   return (

app/coins/page.tsx

@@ -1,3 +1,4 @@
+import Layout from '@/components/Layout'
 import CoinsManager from '@/components/CoinsManager'
 
 export default function CoinsPage() {

app/debug/habits/page.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { useHabits } from "@/hooks/useHabits";
 import { habitsAtom, settingsAtom } from "@/lib/atoms";
 import { Habit } from "@/lib/types";
 import { useAtom } from "jotai";

app/habits/page.tsx

@@ -1,4 +1,6 @@
+import Layout from '@/components/Layout'
 import HabitList from '@/components/HabitList'
+import { ViewToggle } from '@/components/ViewToggle'
 
 export default function HabitsPage() {
   return (

app/layout.tsx

@@ -1,13 +1,14 @@
-import { JotaiHydrate } from '@/components/jotai-hydrate'
-import { JotaiProvider } from '@/components/jotai-providers'
-import Layout from '@/components/Layout'
-import { ThemeProvider } from "@/components/theme-provider"
-import { Toaster } from '@/components/ui/toaster'
-import { SessionProvider } from 'next-auth/react'
-import { DM_Sans } from 'next/font/google'
-import { Suspense } from 'react'
-import { loadCoinsData, loadHabitsData, loadServerSettings, loadSettings, loadUsersData, loadWishlistData } from './actions/data'
 import './globals.css'
+import { Inter } from 'next/font/google'
+import { DM_Sans } from 'next/font/google'
+import { JotaiProvider } from '@/components/jotai-providers'
+import { Suspense } from 'react'
+import { JotaiHydrate } from '@/components/jotai-hydrate'
+import { loadSettings, loadHabitsData, loadCoinsData, loadWishlistData, loadUsersData, loadServerSettings } from './actions/data'
+import Layout from '@/components/Layout'
+import { Toaster } from '@/components/ui/toaster'
+import { ThemeProvider } from "@/components/theme-provider"
+import { SessionProvider } from 'next-auth/react'
 
 
 // Inter (clean, modern, excellent readability)

app/settings/page.tsx

@@ -1,20 +1,22 @@
 'use client'
 
-import { DynamicTimeNoSSR } from '@/components/DynamicTimeNoSSR';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Label } from '@/components/ui/label';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Switch } from '@/components/ui/switch';
+import { Label } from '@/components/ui/label';
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { settingsAtom } from '@/lib/atoms';
-import { Settings, WeekDay } from '@/lib/types';
+import { DynamicTimeNoSSR } from '@/components/DynamicTimeNoSSR';
 import { useAtom } from 'jotai';
-import { Info } from 'lucide-react'; // Import Info icon
-import { saveSettings } from '../actions/data';
+import { settingsAtom } from '@/lib/atoms';
+import { Settings, WeekDay } from '@/lib/types'
+import { saveSettings, uploadAvatar } from '../actions/data'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { Button } from '@/components/ui/button';
+import { User, Info } from 'lucide-react'; // Import Info icon
 
 export default function SettingsPage() {
   const [settings, setSettings] = useAtom(settingsAtom);

app/wishlist/page.tsx

@@ -1,3 +1,4 @@
+import Layout from '@/components/Layout'
 import WishlistManager from '@/components/WishlistManager'
 
 export default function WishlistPage() {

components/AboutModal.tsx

@@ -56,13 +56,11 @@ export default function AboutModal({ isOpen, onClose }: AboutModalProps) {
               >
                 @dohsimpson
               </a>
-              <br/>
-              Fork by <a href="https://github.com/ManInDark" target="_blank" rel="noopener noreferrer" className="font-medium hover:underline">@ManInDark</a>
             </div>
 
             <div className="flex justify-center">
               <a
-                href="https://github.com/ManInDark/HabitTrove"
+                href="https://github.com/dohsimpson/habittrove"
                 target="_blank"
                 rel="noopener noreferrer"
               >

components/AddEditHabitModal.tsx

@@ -1,24 +1,33 @@
 'use client'
 
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { useState } from 'react'
+import { RRule, RRuleSet, rrulestr } from 'rrule'
+import { useAtom } from 'jotai'
+import { settingsAtom, browserSettingsAtom, usersAtom } from '@/lib/atoms'
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'
 import { Button } from '@/components/ui/button'
-import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'
+import { Switch } from '@/components/ui/switch'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
 import { Textarea } from '@/components/ui/textarea'
-import { settingsAtom, usersAtom } from '@/lib/atoms'
-import { useHelpers } from '@/lib/client-helpers'
-import { INITIAL_DUE, INITIAL_RECURRENCE_RULE, QUICK_DATES } from '@/lib/constants'
-import { Habit } from '@/lib/types'
-import { convertHumanReadableFrequencyToMachineReadable, convertMachineReadableFrequencyToHumanReadable, d2t, serializeRRule } from '@/lib/utils'
+import { Info, SmilePlus, Zap } from 'lucide-react'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
 import data from '@emoji-mart/data'
 import Picker from '@emoji-mart/react'
-import { useAtom } from 'jotai'
-import { SmilePlus, Zap } from 'lucide-react'
+import { Habit, SafeUser } from '@/lib/types'
+import { convertHumanReadableFrequencyToMachineReadable, convertMachineReadableFrequencyToHumanReadable, d2s, d2t, serializeRRule } from '@/lib/utils'
+import { INITIAL_DUE, INITIAL_RECURRENCE_RULE, QUICK_DATES, RECURRENCE_RULE_MAP } from '@/lib/constants'
+import * as chrono from 'chrono-node';
 import { DateTime } from 'luxon'
-import { useState } from 'react'
-import { RRule } from 'rrule'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { useHelpers } from '@/lib/client-helpers'
 
 interface AddEditHabitModalProps {
   onClose: () => void
@@ -43,6 +52,7 @@ export default function AddEditHabitModal({ onClose, onSave, habit, isTask }: Ad
   const [ruleText, setRuleText] = useState<string>(initialRuleText)
   const { currentUser } = useHelpers()
   const [isQuickDatesOpen, setIsQuickDatesOpen] = useState(false)
+  const [ruleError, setRuleError] = useState<string | null>(null); // State for validation message
   const [selectedUserIds, setSelectedUserIds] = useState<string[]>((habit?.userIds || []).filter(id => id !== currentUser?.id))
   const [usersData] = useAtom(usersAtom)
   const users = usersData.users
@@ -84,8 +94,6 @@ export default function AddEditHabitModal({ onClose, onSave, habit, isTask }: Ad
     })
   }
 
-  const { result, message: errorMessage } = convertHumanReadableFrequencyToMachineReadable({ text: ruleText, timezone: settings.system.timezone, isRecurring: isRecurRule });
-
   return (
     <Dialog open={true} onOpenChange={onClose}>
       <DialogContent>
@@ -195,9 +203,24 @@ export default function AddEditHabitModal({ onClose, onSave, habit, isTask }: Ad
               </div>
               {/* rrule input (habit) */}
               <div className="col-start-2 col-span-3 text-sm">
-                <span className={errorMessage ? 'text-destructive' : 'text-muted-foreground'}>
-                  {errorMessage ? errorMessage : convertMachineReadableFrequencyToHumanReadable({ frequency: result, isRecurRule, timezone: settings.system.timezone })}
-                </span>
+                {(() => {
+                  let displayText = '';
+                  let errorMessage: string | null = null;
+                  const { result, message } = convertHumanReadableFrequencyToMachineReadable({ text: ruleText, timezone: settings.system.timezone, isRecurring: isRecurRule });
+                  errorMessage = message;
+                  displayText = convertMachineReadableFrequencyToHumanReadable({ frequency: result, isRecurRule, timezone: settings.system.timezone })
+
+                  return (
+                    <>
+                      <span className={errorMessage ? 'text-destructive' : 'text-muted-foreground'}>
+                        {displayText}
+                      </span>
+                      {errorMessage && (
+                        <p className="text-destructive text-xs mt-1">{errorMessage}</p>
+                      )}
+                    </>
+                  );
+                })()}
               </div>
             </div>
             <div className="grid grid-cols-4 items-center gap-4">
@@ -315,7 +338,7 @@ export default function AddEditHabitModal({ onClose, onSave, habit, isTask }: Ad
             )}
           </div>
           <DialogFooter>
-            <Button type="submit" disabled={errorMessage !== null}>{habit ? 'Save Changes' : `Add ${isTask ? 'Task' : 'Habit'}`}</Button>
+            <Button type="submit">{habit ? 'Save Changes' : `Add ${isTask ? 'Task' : 'Habit'}`}</Button>
           </DialogFooter>
         </form>
       </DialogContent>

components/AddEditWishlistItemModal.tsx

@@ -1,18 +1,19 @@
-import { Button } from '@/components/ui/button'
-import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
-import { Textarea } from '@/components/ui/textarea'
+import { useState, useEffect } from 'react'
+import { useAtom } from 'jotai'
 import { usersAtom } from '@/lib/atoms'
 import { useHelpers } from '@/lib/client-helpers'
-import { WishlistItemType } from '@/lib/types'
+import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar'
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Textarea } from '@/components/ui/textarea'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
+import { SmilePlus, Info } from 'lucide-react'
 import data from '@emoji-mart/data'
 import Picker from '@emoji-mart/react'
-import { useAtom } from 'jotai'
-import { SmilePlus } from 'lucide-react'
-import { useEffect, useState } from 'react'
-import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar'
+import { WishlistItemType } from '@/lib/types'
 
 interface AddEditWishlistItemModalProps {
   isOpen: boolean

components/ClientWrapper.tsx

@@ -18,7 +18,7 @@ export default function ClientWrapper({ children }: { children: ReactNode }) {
     if (!currentUserId && !userSelect) {
       setUserSelect(true)
     }
-  }, [currentUserId, status, userSelect, setUserSelect])
+  }, [currentUserId, status, userSelect])
 
   return (
     <>

components/CoinsManager.tsx

@@ -1,21 +1,21 @@
 'use client'
 
-import { FormattedNumber } from '@/components/FormattedNumber'
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { useState, useEffect, useRef } from 'react' // Import useEffect, useRef
+import { useSearchParams } from 'next/navigation' // Import useSearchParams
+import { t2d, d2s, getNow, isSameDate } from '@/lib/utils'
 import { Button } from '@/components/ui/button'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import { Input } from '@/components/ui/input'
-import { useCoins } from '@/hooks/useCoins'
-import { settingsAtom, usersAtom } from '@/lib/atoms'
-import { useHelpers } from '@/lib/client-helpers'
-import { d2s, t2d } from '@/lib/utils'
-import { useAtom } from 'jotai'
-import { History } from 'lucide-react'
-import Link from 'next/link'
-import { useSearchParams } from 'next/navigation'; // Import useSearchParams
-import { useEffect, useRef, useState } from 'react'; // Import useEffect, useRef
+import { FormattedNumber } from '@/components/FormattedNumber'
+import { History, Pencil } from 'lucide-react'
+import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'
 import EmptyState from './EmptyState'
+import { Input } from '@/components/ui/input'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { settingsAtom, usersAtom } from '@/lib/atoms'
+import Link from 'next/link'
+import { useAtom } from 'jotai'
+import { useCoins } from '@/hooks/useCoins'
 import { TransactionNoteEditor } from './TransactionNoteEditor'
+import { useHelpers } from '@/lib/client-helpers'
 
 export default function CoinsManager() {
   const { currentUser } = useHelpers()
@@ -43,7 +43,6 @@ export default function CoinsManager() {
   const highlightId = searchParams.get('highlight')
   const userIdFromQuery = searchParams.get('user') // Get user ID from query
   const transactionRefs = useRef<Record<string, HTMLDivElement | null>>({});
-  const PAGE_ENTRY_COUNTS = [10, 50, 100, 500];
 
   // Effect to set selected user from query param if admin
   useEffect(() => {
@@ -54,7 +53,7 @@ export default function CoinsManager() {
       }
     }
     // Only run when userIdFromQuery or currentUser changes, avoid re-running on selectedUser change within this effect
-  }, [userIdFromQuery, currentUser, usersData.users, selectedUser]);
+  }, [userIdFromQuery, currentUser, usersData.users]);
 
   // Effect to scroll to highlighted transaction
   useEffect(() => {
@@ -238,7 +237,9 @@ export default function CoinsManager() {
                       setCurrentPage(1) // Reset to first page when changing page size
                     }}
                   >
-                    {PAGE_ENTRY_COUNTS.map(n => <option key={n} value={n}>{n}</option>)}
+                    <option value={50}>50</option>
+                    <option value={100}>100</option>
+                    <option value={500}>500</option>
                   </select>
                   <span className="text-sm text-muted-foreground">entries</span>
                 </div>
@@ -274,7 +275,6 @@ export default function CoinsManager() {
                       }
 
                       const isHighlighted = transaction.id === highlightId;
-                      const transactionUser = usersData.users.find(u => u.id === transaction.userId);
                       return (
                         <div
                           key={transaction.id}
@@ -304,12 +304,12 @@ export default function CoinsManager() {
                               {transaction.userId && currentUser?.isAdmin && (
                                 <Avatar className="h-6 w-6">
                                   <AvatarImage
-                                    src={transactionUser?.avatarPath ?
-                                      `/api/avatars/${transactionUser?.avatarPath?.split('/').pop()}` : undefined}
-                                    alt={transactionUser?.username}
+                                    src={usersData.users.find(u => u.id === transaction.userId)?.avatarPath ?
+                                      `/api/avatars/${usersData.users.find(u => u.id === transaction.userId)?.avatarPath?.split('/').pop()}` : undefined}
+                                    alt={usersData.users.find(u => u.id === transaction.userId)?.username}
                                   />
                                   <AvatarFallback>
-                                    {transactionUser?.username?.[0] || '?'}
+                                    {usersData.users.find(u => u.id === transaction.userId)?.username?.[0] || '?'}
                                   </AvatarFallback>
                                 </Avatar>
                               )}

components/CompletionCountBadge.tsx

@@ -1,7 +1,9 @@
 import { Badge } from "@/components/ui/badge"
-import { completedHabitsMapAtom, habitsByDateFamily, settingsAtom } from '@/lib/atoms'
-import { getTodayInTimezone } from '@/lib/utils'
 import { useAtom } from 'jotai'
+import { completedHabitsMapAtom, habitsAtom, habitsByDateFamily } from '@/lib/atoms'
+import { getTodayInTimezone } from '@/lib/utils'
+import { useHabits } from '@/hooks/useHabits'
+import { settingsAtom } from '@/lib/atoms'
 
 interface CompletionCountBadgeProps {
   type: 'habits' | 'tasks'

components/DailyOverview.tsx

@@ -1,31 +1,35 @@
-import { Badge } from '@/components/ui/badge'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Circle, Coins, ArrowRight, CircleCheck, ChevronDown, ChevronUp, Plus, Pin, AlertTriangle } from 'lucide-react' // Removed unused icons
+import CompletionCountBadge from './CompletionCountBadge'
 import {
   ContextMenu,
   ContextMenuContent,
-  ContextMenuTrigger
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
 } from "@/components/ui/context-menu"
-import { Progress } from '@/components/ui/progress'
+import { cn } from '@/lib/utils'
+import Link from 'next/link'
+import { useState } from 'react'
+import { useAtom } from 'jotai'
+import { pomodoroAtom, settingsAtom, completedHabitsMapAtom, browserSettingsAtom, BrowserSettings, hasTasksAtom } from '@/lib/atoms'
+import { getTodayInTimezone, isSameDate, t2d, d2t, getNow, isHabitDue, isTaskOverdue } from '@/lib/utils'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip"
-import { useHabits } from '@/hooks/useHabits'
-import { browserSettingsAtom, completedHabitsMapAtom, hasTasksAtom, pomodoroAtom, settingsAtom } from '@/lib/atoms'
-import { Habit, WishlistItemType } from '@/lib/types'
-import { cn, d2t, getNow, getTodayInTimezone, isHabitDue, isSameDate, isTaskOverdue, t2d } from '@/lib/utils'
-import { useAtom } from 'jotai'
-import { AlertTriangle, ArrowRight, ChevronDown, ChevronUp, Circle, CircleCheck, Coins, Pin, Plus } from 'lucide-react'; // Removed unused icons
-import Link from 'next/link'
-import { useState } from 'react'
-import AddEditHabitModal from './AddEditHabitModal'
-import CompletionCountBadge from './CompletionCountBadge'
-import ConfirmDialog from './ConfirmDialog'
-import { HabitContextMenuItems } from './HabitContextMenuItems'
+import { Progress } from '@/components/ui/progress'
+import { Settings, WishlistItemType } from '@/lib/types'
+import { Habit } from '@/lib/types'
 import Linkify from './linkify'
+import { useHabits } from '@/hooks/useHabits'
+import AddEditHabitModal from './AddEditHabitModal'
+import ConfirmDialog from './ConfirmDialog'
 import { Button } from './ui/button'
+import { HabitContextMenuItems } from './HabitContextMenuItems'
 
 interface UpcomingItemsProps {
   habits: Habit[]

components/Dashboard.tsx

@@ -1,15 +1,17 @@
 'use client'
 
-import { useCoins } from '@/hooks/useCoins'
-import { habitsAtom, wishlistAtom } from '@/lib/atoms'
 import { useAtom } from 'jotai'
-import CoinBalance from './CoinBalance'
+import { wishlistAtom, habitsAtom, settingsAtom } from '@/lib/atoms'
 import DailyOverview from './DailyOverview'
 import HabitStreak from './HabitStreak'
+import CoinBalance from './CoinBalance'
+import { useHabits } from '@/hooks/useHabits'
+import { useCoins } from '@/hooks/useCoins'
 
 export default function Dashboard() {
   const [habitsData] = useAtom(habitsAtom)
   const habits = habitsData.habits
+  const [settings] = useAtom(settingsAtom)
   const { balance } = useCoins()
   const [wishlist] = useAtom(wishlistAtom)
   const wishlistItems = wishlist.items

components/HabitCalendar.tsx

@@ -1,17 +1,18 @@
 'use client'
 
-import CompletionCountBadge from '@/components/CompletionCountBadge'
+import { useState, useMemo, useCallback } from 'react'
 import { Calendar } from '@/components/ui/calendar'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import { useHabits } from '@/hooks/useHabits'
-import { completedHabitsMapAtom, habitsAtom, hasTasksAtom, settingsAtom } from '@/lib/atoms'
-import { Habit } from '@/lib/types'
-import { d2s, getCompletionsForDate, getISODate, getNow, isHabitDue } from '@/lib/utils'
+import CompletionCountBadge from '@/components/CompletionCountBadge'
+import { Button } from '@/components/ui/button'
+import { Check, Circle, CircleCheck } from 'lucide-react'
+import { d2s, getNow, t2d, getCompletedHabitsForDate, isHabitDue, getISODate, getCompletionsForToday, getCompletionsForDate } from '@/lib/utils'
 import { useAtom } from 'jotai'
-import { Circle, CircleCheck } from 'lucide-react'
+import { useHabits } from '@/hooks/useHabits'
+import { habitsAtom, settingsAtom, completedHabitsMapAtom, hasTasksAtom } from '@/lib/atoms'
 import { DateTime } from 'luxon'
-import { useCallback, useMemo, useState } from 'react'
 import Linkify from './linkify'
+import { Habit } from '@/lib/types'
 
 export default function HabitCalendar() {
   const { completePastHabit } = useHabits()

components/HabitItem.tsx

@@ -1,20 +1,24 @@
-import { Button } from '@/components/ui/button'
+import { Habit, SafeUser, User, Permission } from '@/lib/types'
+import { useAtom } from 'jotai'
+import { settingsAtom, pomodoroAtom, browserSettingsAtom, usersAtom } from '@/lib/atoms'
+import { getTodayInTimezone, isSameDate, t2d, d2t, getNow, d2s, getCompletionsForToday, isTaskOverdue, convertMachineReadableFrequencyToHumanReadable } from '@/lib/utils'
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Coins, Edit, Check, Undo2, MoreVertical, Pin } from 'lucide-react' // Removed unused icons
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuTrigger
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
-import { useHabits } from '@/hooks/useHabits'
-import { browserSettingsAtom, settingsAtom, usersAtom } from '@/lib/atoms'
-import { useHelpers } from '@/lib/client-helpers'
-import { Habit, User } from '@/lib/types'
-import { convertMachineReadableFrequencyToHumanReadable, getCompletionsForToday, isTaskOverdue } from '@/lib/utils'
-import { useAtom } from 'jotai'
-import { Check, Coins, Edit, MoreVertical, Pin, Undo2 } from 'lucide-react'; // Removed unused icons
 import { useEffect, useState } from 'react'
-import { HabitContextMenuItems } from './HabitContextMenuItems'
+import { useHabits } from '@/hooks/useHabits'
+import { INITIAL_RECURRENCE_RULE, RECURRENCE_RULE_MAP } from '@/lib/constants'
+import { DateTime } from 'luxon'
 import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar'
+import { useHelpers } from '@/lib/client-helpers'
+import { HabitContextMenuItems } from './HabitContextMenuItems'
 
 interface HabitItemProps {
   habit: Habit
@@ -45,6 +49,7 @@ const renderUserAvatars = (habit: Habit, currentUser: User | null, usersData: {
 export default function HabitItem({ habit, onEdit, onDelete }: HabitItemProps) {
   const { completeHabit, undoComplete, archiveHabit, unarchiveHabit, saveHabit } = useHabits()
   const [settings] = useAtom(settingsAtom)
+  const [_, setPomo] = useAtom(pomodoroAtom)
   const completionsToday = getCompletionsForToday({ habit, timezone: settings.system.timezone })
   const target = habit.targetCompletions || 1
   const isCompletedToday = completionsToday >= target

components/HabitList.tsx

@@ -1,23 +1,23 @@
 'use client'
 
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'; // Added
-import { Label } from '@/components/ui/label'; // Added
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; // Added
-import { useHabits } from '@/hooks/useHabits'
-import { browserSettingsAtom, habitsAtom } from '@/lib/atoms'
-import { HabitIcon, TaskIcon } from '@/lib/constants'
-import { Habit } from '@/lib/types'
-import { getHabitFreq } from '@/lib/utils'; // Added
+import { useState, useMemo, useEffect } from 'react' // Added useMemo, useEffect
+import { Plus, ArrowUpNarrowWide, ArrowDownWideNarrow, Search } from 'lucide-react' // Added sort icons, Search icon
 import { useAtom } from 'jotai'
-import { ArrowDownWideNarrow, ArrowUpNarrowWide, Plus, Search } from 'lucide-react'; // Added sort icons, Search icon
-import { DateTime } from 'luxon'; // Added
-import { useEffect, useMemo, useState } from 'react'; // Added useMemo, useEffect
+import { habitsAtom, settingsAtom, browserSettingsAtom } from '@/lib/atoms'
+import EmptyState from './EmptyState'
+import { Button } from '@/components/ui/button'
+import HabitItem from './HabitItem'
 import AddEditHabitModal from './AddEditHabitModal'
 import ConfirmDialog from './ConfirmDialog'
-import EmptyState from './EmptyState'
-import HabitItem from './HabitItem'
+import { Habit } from '@/lib/types'
+import { useHabits } from '@/hooks/useHabits'
+import { HabitIcon, TaskIcon } from '@/lib/constants'
 import { ViewToggle } from './ViewToggle'
+import { Input } from '@/components/ui/input' // Added
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select' // Added
+import { Label } from '@/components/ui/label' // Added
+import { DateTime } from 'luxon' // Added
+import { getHabitFreq } from '@/lib/utils' // Added
 
 export default function HabitList() {
   const { saveHabit, deleteHabit } = useHabits()

components/HabitStreak.tsx

@@ -1,11 +1,11 @@
 'use client'
 
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
-import { completedHabitsMapAtom, hasTasksAtom, settingsAtom } from '@/lib/atoms'; // Added completedHabitsMapAtom
 import { Habit } from '@/lib/types'
-import { d2s, getNow } from '@/lib/utils'; // Removed getCompletedHabitsForDate
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { d2s, getNow, t2d } from '@/lib/utils' // Removed getCompletedHabitsForDate
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts'
 import { useAtom } from 'jotai'
-import { CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts'
+import { settingsAtom, hasTasksAtom, completedHabitsMapAtom } from '@/lib/atoms' // Added completedHabitsMapAtom
 
 interface HabitStreakProps {
   habits: Habit[]

components/Header.tsx

@@ -1,15 +1,26 @@
 'use client'
 
-import { FormattedNumber } from '@/components/FormattedNumber'
-import { Logo } from '@/components/Logo'
-import { useCoins } from '@/hooks/useCoins'
-import { settingsAtom } from '@/lib/atoms'
+import { useEffect, useState } from 'react'
 import { useAtom } from 'jotai'
-import { Coins } from 'lucide-react'
-import dynamic from 'next/dynamic'
-import Link from 'next/link'
+import { coinsAtom, settingsAtom, browserSettingsAtom } from '@/lib/atoms'
+import { useCoins } from '@/hooks/useCoins'
+import { FormattedNumber } from '@/components/FormattedNumber'
+import { Menu, Settings, User, Info, Coins } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Logo } from '@/components/Logo'
 import NotificationBell from './NotificationBell'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import AboutModal from './AboutModal'
+import Link from 'next/link'
+import dynamic from 'next/dynamic'
 import { Profile } from './Profile'
+import { useHelpers } from '@/lib/client-helpers'
 
 interface HeaderProps {
   className?: string
@@ -19,6 +30,7 @@ const TodayEarnedCoins = dynamic(() => import('./TodayEarnedCoins'), { ssr: fals
 
 export default function Header({ className }: HeaderProps) {
   const [settings] = useAtom(settingsAtom)
+  const [browserSettings] = useAtom(browserSettingsAtom)
   const { balance } = useCoins()
   return (
     <>

components/Logo.tsx

@@ -1,3 +1,4 @@
+import { Sparkles } from "lucide-react"
 
 export function Logo() {
   return (

components/Navigation.tsx

@@ -1,14 +1,13 @@
 'use client'
 
-import { browserSettingsAtom } from '@/lib/atoms'
-import { useHelpers } from '@/lib/client-helpers'
-import { HabitIcon, TaskIcon } from '@/lib/constants'
-import { useAtom } from 'jotai'
-import { Calendar, Coins, Gift, Home } from 'lucide-react'
 import Link from 'next/link'
+import { Home, Calendar, List, Gift, Coins, Settings, Info, CheckSquare } from 'lucide-react'
+import { useAtom } from 'jotai'
+import { browserSettingsAtom } from '@/lib/atoms'
 import { useEffect, useState } from 'react'
 import AboutModal from './AboutModal'
-import { usePathname } from 'next/navigation'
+import { HabitIcon, TaskIcon } from '@/lib/constants'
+import { useHelpers } from '@/lib/client-helpers'
 
 type ViewPort = 'main' | 'mobile'
 
@@ -36,8 +35,6 @@ export default function Navigation({ className, viewPort }: NavigationProps) {
   const [browserSettings] = useAtom(browserSettingsAtom)
   const isTasksView = browserSettings.viewType === 'tasks'
   const { isIOS } = useHelpers()
-  const pathname = usePathname();
-  console.log(pathname, pathname === navItems(false)[1].href)
 
   useEffect(() => {
     const handleResize = () => {
@@ -64,11 +61,7 @@ export default function Navigation({ className, viewPort }: NavigationProps) {
               <Link
                 key={item.label}
                 href={item.href}
-                className={"flex flex-col items-center py-2 hover:text-blue-600 dark:hover:text-blue-300 " +
-                  (pathname === (item.href) ?
-                    "text-blue-500 dark:text-blue-500" :
-                    "text-gray-300 dark:text-gray-300")
-                }
+                className="flex flex-col items-center justify-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>
@@ -92,12 +85,9 @@ export default function Navigation({ className, viewPort }: NavigationProps) {
                   <Link
                     key={item.label}
                     href={item.href}
-                    className={"flex items-center px-2 py-2 font-medium rounded-md " +
-                      (pathname === (item.href) ?
-                        "text-blue-500 hover:text-blue-600 hover:bg-gray-700" :
-                        "text-gray-300 hover:text-white hover:bg-gray-700")}
+                    className="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"
                   >
-                    <item.icon className="mr-4 flex-shrink-0 h-6 w-6" aria-hidden="true" />
+                    <item.icon className="mr-4 flex-shrink-0 h-6 w-6 text-gray-400" aria-hidden="true" />
                     {item.label}
                   </Link>
                 ))}

components/NotificationDropdown.tsx

@@ -1,17 +1,18 @@
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import { DropdownMenuItem } from '@/components/ui/dropdown-menu';
+import React from 'react';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { Separator } from '@/components/ui/separator';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { CoinsData, HabitsData, WishlistData, UserData, User, CoinTransaction } from '@/lib/types';
+import { t2d } from '@/lib/utils';
+import Link from 'next/link';
+import { DropdownMenuItem } from '@/components/ui/dropdown-menu';
+import { Info } from 'lucide-react';
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
 } from '@/components/ui/tooltip';
-import { CoinTransaction, HabitsData, User, UserData, WishlistData } from '@/lib/types';
-import { t2d } from '@/lib/utils';
-import { Info } from 'lucide-react';
-import Link from 'next/link';
 
 interface NotificationDropdownProps {
   currentUser: User | null;

components/PasswordEntryForm.tsx

@@ -1,13 +1,13 @@
 'use client';
 
-import { toast } from '@/hooks/use-toast';
-import { User } from '@/lib/types';
-import { User as UserIcon } from 'lucide-react';
-import { useState } from 'react';
 import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar';
-import { Button } from './ui/button';
 import { Input } from './ui/input';
+import { Button } from './ui/button';
 import { Label } from './ui/label';
+import { User as UserIcon } from 'lucide-react';
+import { Permission, User } from '@/lib/types';
+import { toast } from '@/hooks/use-toast';
+import { useState } from 'react';
 
 interface PasswordEntryFormProps {
   user: User;

components/PomodoroTimer.tsx

@@ -1,13 +1,14 @@
 'use client'
 
+import { useState, useEffect, useRef, useCallback } from 'react'
 import { Button } from '@/components/ui/button'
 import { Progress } from '@/components/ui/progress'
-import { useHabits } from '@/hooks/useHabits'
-import { habitsAtom, pomodoroAtom, pomodoroTodayCompletionsAtom, settingsAtom } from '@/lib/atoms'
-import { cn } from '@/lib/utils'
+import { Play, Pause, RotateCw, Minus, X, Clock, SkipForward } from 'lucide-react'
+import { cn, getCompletionsForToday } from '@/lib/utils'
 import { useAtom } from 'jotai'
-import { Clock, Minus, Pause, Play, RotateCw, SkipForward, X } from 'lucide-react'
-import { useEffect, useRef, useState } from 'react'
+import { settingsAtom, pomodoroAtom, habitsAtom, pomodoroTodayCompletionsAtom } from '@/lib/atoms'
+import { getCompletionsForDate, getTodayInTimezone } from '@/lib/utils'
+import { useHabits } from '@/hooks/useHabits'
 
 interface PomoConfig {
   labels: string[]
@@ -134,19 +135,7 @@ export default function PomodoroTimer() {
         const remaining = Math.floor((targetEndTime - Date.now()) / 1000)
 
         if (remaining <= 0) {
-          setState("stopped")
-          const currentTimerType = currentTimer.current.type
-          currentTimer.current = currentTimerType === 'focus' ? PomoConfigs.break : PomoConfigs.focus
-          setTimeLeft(currentTimer.current.duration)
-          setCurrentLabel(
-            currentTimer.current.labels[Math.floor(Math.random() * currentTimer.current.labels.length)]
-          )
-
-          // update habits only after focus sessions
-          if (selectedHabit && currentTimerType === 'focus') {
-            completeHabit(selectedHabit)
-            // The atom will automatically update with the new completions
-          }
+          handleTimerEnd()
         } else {
           setTimeLeft(remaining)
         }
@@ -157,7 +146,23 @@ export default function PomodoroTimer() {
     return () => {
       if (interval) clearInterval(interval)
     }
-  }, [state, timeLeft, completeHabit, selectedHabit])
+  }, [state])
+
+  const handleTimerEnd = async () => {
+    setState("stopped")
+    const currentTimerType = currentTimer.current.type
+    currentTimer.current = currentTimerType === 'focus' ? PomoConfigs.break : PomoConfigs.focus
+    setTimeLeft(currentTimer.current.duration)
+    setCurrentLabel(
+      currentTimer.current.labels[Math.floor(Math.random() * currentTimer.current.labels.length)]
+    )
+
+    // update habits only after focus sessions
+    if (selectedHabit && currentTimerType === 'focus') {
+      await completeHabit(selectedHabit)
+      // The atom will automatically update with the new completions
+    }
+  }
 
   const toggleTimer = () => {
     setState(prev => prev === 'started' ? 'paused' : 'started')

components/Profile.tsx

@@ -1,20 +1,20 @@
 'use client'
 
-import { signOut } from "@/app/actions/user"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { Button } from "@/components/ui/button"
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
-import { toast } from "@/hooks/use-toast"
-import { settingsAtom, userSelectAtom } from "@/lib/atoms"
-import { useHelpers } from "@/lib/client-helpers"
-import { useAtom } from "jotai"
-import { ArrowRightLeft, Crown, Info, LogOut, Moon, Palette, Settings, Sun, User } from "lucide-react"
-import { useTheme } from "next-themes"
-import Link from "next/link"
-import { useState } from "react"
-import AboutModal from "./AboutModal"
+import { Settings, Info, User, Moon, Sun, Palette, ArrowRightLeft, LogOut, Crown } from "lucide-react"
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from './ui/dialog'
 import UserForm from './UserForm'
+import Link from "next/link"
+import { useAtom } from "jotai"
+import { settingsAtom, userSelectAtom } from "@/lib/atoms"
+import AboutModal from "./AboutModal"
+import { useEffect, useState } from "react"
+import { useTheme } from "next-themes"
+import { signOut } from "@/app/actions/user"
+import { toast } from "@/hooks/use-toast"
+import { useHelpers } from "@/lib/client-helpers"
 
 export function Profile() {
   const [settings] = useAtom(settingsAtom)

components/UserForm.tsx

@@ -1,21 +1,22 @@
 'use client';
 
-import { createUser, updateUser, updateUserPassword, uploadAvatar } from '@/app/actions/data';
-import { toast } from '@/hooks/use-toast';
-import { serverSettingsAtom, usersAtom } from '@/lib/atoms';
-import { useHelpers } from '@/lib/client-helpers';
-import { Permission } from '@/lib/types';
-import { passwordSchema, usernameSchema } from '@/lib/zod';
-import { useAtom, useAtomValue } from 'jotai';
-import _ from 'lodash';
-import { User as UserIcon } from 'lucide-react';
 import { useState } from 'react';
-import { PermissionSelector } from './PermissionSelector';
-import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar';
-import { Button } from './ui/button';
+import { passwordSchema, usernameSchema } from '@/lib/zod';
 import { Input } from './ui/input';
+import { Button } from './ui/button';
 import { Label } from './ui/label';
 import { Switch } from './ui/switch';
+import { Permission } from '@/lib/types';
+import { toast } from '@/hooks/use-toast';
+import { useAtom, useAtomValue } from 'jotai';
+import { serverSettingsAtom, usersAtom } from '@/lib/atoms';
+import { createUser, updateUser, updateUserPassword, uploadAvatar } from '@/app/actions/data';
+import { SafeUser, User } from '@/lib/types';
+import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar';
+import { User as UserIcon } from 'lucide-react';
+import _ from 'lodash';
+import { PermissionSelector } from './PermissionSelector';
+import { useHelpers } from '@/lib/client-helpers';
 
 interface UserFormProps {
   userId?: string;  // if provided, we're editing; if not, we're creating

components/UserSelectModal.tsx

@@ -1,19 +1,22 @@
 'use client';
 
-import { signIn } from '@/app/actions/user';
-import { toast } from '@/hooks/use-toast';
-import { usersAtom } from '@/lib/atoms';
-import { useHelpers } from '@/lib/client-helpers';
-import { SafeUser, User } from '@/lib/types';
-import { cn } from '@/lib/utils';
-import { Description } from '@radix-ui/react-dialog';
-import { useAtom } from 'jotai';
-import { Crown, Plus, User as UserIcon, UserRoundPen } from 'lucide-react';
 import { useState } from 'react';
 import PasswordEntryForm from './PasswordEntryForm';
 import UserForm from './UserForm';
-import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from './ui/dialog';
+import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar';
+import { Crown, Pencil, Plus, User as UserIcon, UserRoundPen } from 'lucide-react';
+import { Input } from './ui/input';
+import { Button } from './ui/button';
+import { useAtom } from 'jotai';
+import { usersAtom } from '@/lib/atoms';
+import { signIn } from '@/app/actions/user';
+import { createUser } from '@/app/actions/data';
+import { toast } from '@/hooks/use-toast';
+import { Description } from '@radix-ui/react-dialog';
+import { SafeUser, User } from '@/lib/types';
+import { cn } from '@/lib/utils';
+import { useHelpers } from '@/lib/client-helpers';
 
 function UserCard({ 
   user, 

components/ViewToggle.tsx

@@ -1,10 +1,12 @@
 'use client'
 
-import { browserSettingsAtom, habitsAtom, settingsAtom } from '@/lib/atoms'
-import { HabitIcon, TaskIcon } from '@/lib/constants'
-import type { ViewType } from '@/lib/types'
-import { cn, isHabitDueToday } from '@/lib/utils'
+import { cn } from '@/lib/utils'
 import { useAtom } from 'jotai'
+import { CheckSquare, ListChecks } from 'lucide-react'
+import { browserSettingsAtom, habitsAtom, settingsAtom } from '@/lib/atoms'
+import type { ViewType } from '@/lib/types'
+import { HabitIcon, TaskIcon } from '@/lib/constants'
+import { isHabitDueToday } from '@/lib/utils'
 import { NotificationBadge } from './ui/notification-badge'
 
 interface ViewToggleProps {

components/WishlistItem.tsx

@@ -1,5 +1,12 @@
-import { Button } from '@/components/ui/button'
+import { WishlistItemType, User, Permission } from '@/lib/types'
+import { useAtom } from 'jotai'
+import { usersAtom } from '@/lib/atoms'
+import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar'
+import { useHelpers } from '@/lib/client-helpers'
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
+import ReactMarkdown from 'react-markdown'
+import { Button } from '@/components/ui/button'
+import { Coins, Edit, Trash2, Gift, MoreVertical, Archive, ArchiveRestore } from 'lucide-react'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -7,12 +14,6 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
-import { usersAtom } from '@/lib/atoms'
-import { useHelpers } from '@/lib/client-helpers'
-import { User, WishlistItemType } from '@/lib/types'
-import { useAtom } from 'jotai'
-import { Archive, ArchiveRestore, Coins, Edit, Gift, MoreVertical, Trash2 } from 'lucide-react'
-import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar'
 
 interface WishlistItemProps {
   item: WishlistItemType

components/theme-toggle.tsx

@@ -1,6 +1,7 @@
 "use client"
 
-import { Moon, Sun } from "lucide-react"
+import * as React from "react"
+import { Moon, MoonIcon, Sun } from "lucide-react"
 import { useTheme } from "next-themes"
 
 import { Button } from "@/components/ui/button"

docker-compose.yaml

@@ -1,11 +1,10 @@
 services:
   habittrove:
-    image: ghcr.io/manindark/habittrove
-    container_name: habittrove
     ports:
       - "3000:3000"
     volumes:
       - "./data:/app/data"
       - "./backups:/app/backups"
+    image: dohsimpson/habittrove
     environment:
       - AUTH_SECRET=your-secret-key-here # Replace with your actual secret

lib/atoms.ts

@@ -1,30 +1,35 @@
-import {
-  calculateCoinsEarnedToday,
-  calculateCoinsSpentToday,
-  calculateTotalEarned,
-  calculateTotalSpent,
-  calculateTransactionsToday,
-  getCompletionsForToday,
-  getHabitFreq,
-  getTodayInTimezone,
-  isHabitDue,
-  t2d
-} from "@/lib/utils";
 import { atom } from "jotai";
-import { atomFamily, atomWithStorage } from "jotai/utils";
-import { DateTime } from "luxon";
 import {
-  CompletionCache,
-  Freq,
-  getDefaultCoinsData,
-  getDefaultHabitsData,
-  getDefaultServerSettings,
   getDefaultSettings,
-  getDefaultUsersData,
+  getDefaultHabitsData,
+  getDefaultCoinsData,
   getDefaultWishlistData,
   Habit,
-  ViewType
+  ViewType,
+  getDefaultUsersData,
+  CompletionCache,
+  getDefaultServerSettings,
+  User,
 } from "./types";
+import {
+  getTodayInTimezone,
+  isSameDate,
+  t2d,
+  calculateCoinsEarnedToday,
+  calculateTotalEarned,
+  calculateTotalSpent,
+  calculateCoinsSpentToday,
+  calculateTransactionsToday,
+  getCompletionsForToday,
+  getISODate,
+  isHabitDueToday,
+  getNow,
+  isHabitDue,
+  getHabitFreq
+} from "@/lib/utils";
+import { atomFamily, atomWithStorage } from "jotai/utils";
+import { DateTime } from "luxon";
+import { Freq } from "./types";
 
 export interface BrowserSettings {
   viewType: ViewType

package.json

@@ -44,7 +44,6 @@
     "js-confetti": "^0.12.0",
     "linkify": "^0.2.1",
     "linkify-react": "^4.2.0",
-    "lodash": "^4.17.21",
     "lucide-react": "^0.469.0",
     "luxon": "^3.5.0",
     "next": "15.2.3",