fix: removed viewType from browser Settings Atom, converted to using path to identify pages

fix: refactored habit / task page
fix: remove empty file
2026-01-21 06:34:30 +01:00 · 2025-05-18 02:03:54 +02:00 · 2025-05-18 01:34:28 +02:00 · 2025-05-18 01:16:39 +02:00 · 2025-05-18 01:16:17 +02:00 · 2025-05-17 17:27:26 +02:00
48 changed files with 840 additions and 737 deletions
--- a/.github/workflows/docker-publish.yml
+++ b/.github/workflows/docker-publish.yml
@@ -1,94 +0,0 @@
-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"
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -0,0 +1,40 @@
+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 }}
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -1,28 +0,0 @@
-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
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,25 @@
 # Changelog

+## Version 0.2.11
+
+### Added
+
+* support searching and sorting in habit list
+
+### Improved
+
+* Show overdue tasks in daily overview
+* Context menu option for tasks changed from "Move to Today" to "Move to Tomorrow"
+* More context menu items in daily overview
+* code refactor for context menu and daily overview item section
+
+
+## Version 0.2.10
+
+### Improved
+
+* performance optimization: faster load time for large data set
+
 ## Version 0.2.9

 ### Added
--- a/README.md
+++ b/README.md
@@ -6,7 +6,7 @@ HabitTrove is a gamified habit tracking application that helps you build and mai

 ## Try the Demo

-Want to try HabitTrove before installing? Visit the public [demo instance](https://habittrove.app.enting.org) to experience all features without any setup required. (do not store personal info. Data on the demo instance is reset daily)
+Want to try HabitTrove before installing? Visit the public [demo instance](https://demo.habittrove.com) to experience all features without any setup required. (do not store personal info. Data on the demo instance is reset daily)

 ## Features

@@ -22,11 +22,8 @@ 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
@@ -63,7 +60,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 \
-  dohsimpson/habittrove
+  ghcr.io/manindark/habittrove
 ```

 Available image tags:
@@ -110,7 +107,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/dohsimpson/habittrove.git
+git clone https://github.com/ManInDark/HabitTrove.git
 cd habittrove
 ```

@@ -163,7 +160,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/dohsimpson/habittrove/issues/new). We do not accept pull request at the moment.
+We welcome feature requests and bug reports! Please [open an issue](https://github.com/ManInDark/habittrove/issues/new).

 ## License

--- a/app/actions/data.ts
+++ b/app/actions/data.ts
@@ -1,36 +1,32 @@
 'use server'

-import fs from 'fs/promises'
-import path from 'path'
+import { getCurrentUser, saltAndHashPassword, verifyPassword } from "@/lib/server-helpers";
 import {
-  HabitsData,
  CoinsData,
  CoinTransaction,
-  TransactionType,
-  WishlistItemType,
-  WishlistData,
-  Settings,
-  DataType,
  DATA_DEFAULTS,
-  getDefaultSettings,
-  UserData,
-  getDefaultUsersData,
-  User,
-  getDefaultWishlistData,
-  getDefaultHabitsData,
+  DataType,
  getDefaultCoinsData,
+  getDefaultHabitsData,
+  getDefaultSettings,
+  getDefaultUsersData,
+  getDefaultWishlistData,
+  HabitsData,
  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";
+  ServerSettings,
+  Settings,
+  TransactionType,
+  User,
+  UserData,
+  WishlistData,
+  WishlistItemType
+} from '@/lib/types';
+import { d2t, getNow, uuid } from '@/lib/utils';
 import { signInSchema } from '@/lib/zod';
-import { auth } from '@/auth';
+import fs from 'fs/promises';
 import _ from 'lodash';
-import { getCurrentUser, getCurrentUserId } from '@/lib/server-helpers'
+import path from 'path';

-import { PermissionError } from '@/lib/exceptions'

 type ResourceType = 'habit' | 'wishlist' | 'coins'
 type ActionType = 'write' | 'interact'
--- a/app/calendar/page.tsx
+++ b/app/calendar/page.tsx
@@ -1,14 +1,8 @@
-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 (
-    <div className="flex flex-col gap-4">
-      <div className="flex justify-end">
-        {/* <ViewToggle /> */}
-      </div>
+    <div className="flex flex-col">
      <HabitCalendar />
    </div>
  )
--- a/app/coins/page.tsx
+++ b/app/coins/page.tsx
@@ -1,4 +1,3 @@
-import Layout from '@/components/Layout'
 import CoinsManager from '@/components/CoinsManager'

 export default function CoinsPage() {
--- a/app/debug/habits/page.tsx
+++ b/app/debug/habits/page.tsx
@@ -1,6 +1,5 @@
 'use client'

-import { useHabits } from "@/hooks/useHabits";
 import { habitsAtom, settingsAtom } from "@/lib/atoms";
 import { Habit } from "@/lib/types";
 import { useAtom } from "jotai";
--- a/app/habits/page.tsx
+++ b/app/habits/page.tsx
@@ -1,14 +1,9 @@
-import Layout from '@/components/Layout'
 import HabitList from '@/components/HabitList'
-import { ViewToggle } from '@/components/ViewToggle'

 export default function HabitsPage() {
  return (
-    <div className="flex flex-col gap-4">
-      <div className="flex justify-end">
-        {/* <ViewToggle /> */}
-      </div>
-      <HabitList />
+    <div className="flex flex-col">
+      <HabitList isTasksView={false} />
    </div>
  )
 }
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,14 +1,13 @@
-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 { JotaiProvider } from '@/components/jotai-providers'
 import Layout from '@/components/Layout'
-import { Toaster } from '@/components/ui/toaster'
 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'


 // Inter (clean, modern, excellent readability)
--- a/app/settings/page.tsx
+++ b/app/settings/page.tsx
@@ -1,22 +1,20 @@
 'use client'

-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import { Switch } from '@/components/ui/switch';
+import { DynamicTimeNoSSR } from '@/components/DynamicTimeNoSSR';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
 import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { DynamicTimeNoSSR } from '@/components/DynamicTimeNoSSR';
-import { useAtom } from 'jotai';
 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
+import { Settings, WeekDay } from '@/lib/types';
+import { useAtom } from 'jotai';
+import { Info } from 'lucide-react'; // Import Info icon
+import { saveSettings } from '../actions/data';

 export default function SettingsPage() {
  const [settings, setSettings] = useAtom(settingsAtom);
--- a/app/tasks/page.tsx
+++ b/app/tasks/page.tsx
@@ -0,0 +1,10 @@
+import HabitList from '@/components/HabitList'
+
+export default function TasksPage() {
+  return (
+    <div className="flex flex-col">
+      <HabitList isTasksView={true} />
+    </div>
+  )
+}
+
--- a/app/wishlist/page.tsx
+++ b/app/wishlist/page.tsx
@@ -1,4 +1,3 @@
-import Layout from '@/components/Layout'
 import WishlistManager from '@/components/WishlistManager'

 export default function WishlistPage() {
--- a/components/AboutModal.tsx
+++ b/components/AboutModal.tsx
@@ -56,11 +56,13 @@ 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/dohsimpson/habittrove"
+                href="https://github.com/ManInDark/HabitTrove"
                target="_blank"
                rel="noopener noreferrer"
              >
--- a/components/AddEditHabitModal.tsx
+++ b/components/AddEditHabitModal.tsx
@@ -1,33 +1,24 @@
 'use client'

-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 { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { Button } from '@/components/ui/button'
-import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'
-import { Switch } from '@/components/ui/switch'
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
-import { Textarea } from '@/components/ui/textarea'
-import { Info, SmilePlus, Zap } from 'lucide-react'
 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 data from '@emoji-mart/data'
 import Picker from '@emoji-mart/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 { useAtom } from 'jotai'
+import { SmilePlus, Zap } from 'lucide-react'
 import { DateTime } from 'luxon'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select"
-import { useHelpers } from '@/lib/client-helpers'
+import { useState } from 'react'
+import { RRule } from 'rrule'

 interface AddEditHabitModalProps {
  onClose: () => void
@@ -52,7 +43,6 @@ 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
@@ -94,6 +84,8 @@ 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>
@@ -203,24 +195,9 @@ export default function AddEditHabitModal({ onClose, onSave, habit, isTask }: Ad
              </div>
              {/* rrule input (habit) */}
              <div className="col-start-2 col-span-3 text-sm">
-                {(() => {
-                  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>
-                      )}
-                    </>
-                  );
-                })()}
+                <span className={errorMessage ? 'text-destructive' : 'text-muted-foreground'}>
+                  {errorMessage ? errorMessage : convertMachineReadableFrequencyToHumanReadable({ frequency: result, isRecurRule, timezone: settings.system.timezone })}
+                </span>
              </div>
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
@@ -338,7 +315,7 @@ export default function AddEditHabitModal({ onClose, onSave, habit, isTask }: Ad
            )}
          </div>
          <DialogFooter>
-            <Button type="submit">{habit ? 'Save Changes' : `Add ${isTask ? 'Task' : 'Habit'}`}</Button>
+            <Button type="submit" disabled={errorMessage !== null}>{habit ? 'Save Changes' : `Add ${isTask ? 'Task' : 'Habit'}`}</Button>
          </DialogFooter>
        </form>
      </DialogContent>
--- a/components/AddEditWishlistItemModal.tsx
+++ b/components/AddEditWishlistItemModal.tsx
@@ -1,19 +1,18 @@
-import { useState, useEffect } from 'react'
-import { useAtom } from 'jotai'
-import { usersAtom } from '@/lib/atoms'
-import { useHelpers } from '@/lib/client-helpers'
-import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar'
-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 { 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 { Textarea } from '@/components/ui/textarea'
+import { usersAtom } from '@/lib/atoms'
+import { useHelpers } from '@/lib/client-helpers'
+import { WishlistItemType } from '@/lib/types'
 import data from '@emoji-mart/data'
 import Picker from '@emoji-mart/react'
-import { WishlistItemType } from '@/lib/types'
+import { useAtom } from 'jotai'
+import { SmilePlus } from 'lucide-react'
+import { useEffect, useState } from 'react'
+import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar'

 interface AddEditWishlistItemModalProps {
  isOpen: boolean
--- a/components/ClientWrapper.tsx
+++ b/components/ClientWrapper.tsx
@@ -18,7 +18,7 @@ export default function ClientWrapper({ children }: { children: ReactNode }) {
    if (!currentUserId && !userSelect) {
      setUserSelect(true)
    }
-  }, [currentUserId, status, userSelect])
+  }, [currentUserId, status, userSelect, setUserSelect])

  return (
    <>
--- a/components/CoinBalance.test.tsx
+++ b/components/CoinBalance.test.tsx
--- a/components/CoinsManager.tsx
+++ b/components/CoinsManager.tsx
@@ -1,21 +1,21 @@
 'use client'

-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 { 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 { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { Button } from '@/components/ui/button'
 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 { Input } from '@/components/ui/input'
 import { useCoins } from '@/hooks/useCoins'
-import { TransactionNoteEditor } from './TransactionNoteEditor'
+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 EmptyState from './EmptyState'
+import { TransactionNoteEditor } from './TransactionNoteEditor'

 export default function CoinsManager() {
  const { currentUser } = useHelpers()
@@ -43,6 +43,7 @@ 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(() => {
@@ -53,7 +54,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]);
+  }, [userIdFromQuery, currentUser, usersData.users, selectedUser]);

  // Effect to scroll to highlighted transaction
  useEffect(() => {
@@ -237,9 +238,7 @@ export default function CoinsManager() {
                      setCurrentPage(1) // Reset to first page when changing page size
                    }}
                  >
-                    <option value={50}>50</option>
-                    <option value={100}>100</option>
-                    <option value={500}>500</option>
+                    {PAGE_ENTRY_COUNTS.map(n => <option key={n} value={n}>{n}</option>)}
                  </select>
                  <span className="text-sm text-muted-foreground">entries</span>
                </div>
@@ -275,6 +274,7 @@ 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={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}
+                                    src={transactionUser?.avatarPath ?
+                                      `/api/avatars/${transactionUser?.avatarPath?.split('/').pop()}` : undefined}
+                                    alt={transactionUser?.username}
                                  />
                                  <AvatarFallback>
-                                    {usersData.users.find(u => u.id === transaction.userId)?.username?.[0] || '?'}
+                                    {transactionUser?.username?.[0] || '?'}
                                  </AvatarFallback>
                                </Avatar>
                              )}
--- a/components/CompletionCountBadge.tsx
+++ b/components/CompletionCountBadge.tsx
@@ -1,9 +1,7 @@
 import { Badge } from "@/components/ui/badge"
-import { useAtom } from 'jotai'
-import { completedHabitsMapAtom, habitsAtom, habitsByDateFamily } from '@/lib/atoms'
+import { completedHabitsMapAtom, habitsByDateFamily, settingsAtom } from '@/lib/atoms'
 import { getTodayInTimezone } from '@/lib/utils'
-import { useHabits } from '@/hooks/useHabits'
-import { settingsAtom } from '@/lib/atoms'
+import { useAtom } from 'jotai'

 interface CompletionCountBadgeProps {
  type: 'habits' | 'tasks'
--- a/components/DailyOverview.tsx
+++ b/components/DailyOverview.tsx
@@ -1,25 +1,30 @@
-import { Circle, Coins, ArrowRight, CircleCheck, ChevronDown, ChevronUp, Timer, Plus, Pin, Calendar } from 'lucide-react'
-import CompletionCountBadge from './CompletionCountBadge'
+import { Badge } from '@/components/ui/badge'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import {
  ContextMenu,
  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuTrigger,
+  ContextMenuTrigger
 } from "@/components/ui/context-menu"
-import { cn, getHabitFreq } from '@/lib/utils'
+import { Progress } from '@/components/ui/progress'
+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 { useAtom } from 'jotai'
-import { pomodoroAtom, settingsAtom, completedHabitsMapAtom, browserSettingsAtom, BrowserSettings, hasTasksAtom, dailyHabitsAtom } from '@/lib/atoms'
-import { getTodayInTimezone, isSameDate, t2d, d2t, getNow } from '@/lib/utils'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import { Badge } from '@/components/ui/badge'
-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 CompletionCountBadge from './CompletionCountBadge'
+import ConfirmDialog from './ConfirmDialog'
+import { HabitContextMenuItems } from './HabitContextMenuItems'
+import Linkify from './linkify'
 import { Button } from './ui/button'

 interface UpcomingItemsProps {
@@ -34,13 +39,7 @@ interface ItemSectionProps {
  emptyMessage: string;
  isTask: boolean;
  viewLink: string;
-  expanded: boolean;
-  setExpanded: (value: boolean) => void;
  addNewItem: () => void;
-  badgeType: "tasks" | "habits";
-  todayCompletions: Habit[];
-  settings: Settings;
-  setBrowserSettings: (value: React.SetStateAction<BrowserSettings>) => void;
 }

 const ItemSection = ({
@@ -49,16 +48,46 @@ const ItemSection = ({
  emptyMessage,
  isTask,
  viewLink,
-  expanded,
-  setExpanded,
  addNewItem,
-  badgeType,
-  todayCompletions,
-  settings,
-  setBrowserSettings,
 }: ItemSectionProps) => {
-  const { completeHabit, undoComplete, saveHabit } = useHabits();
+  const { completeHabit, undoComplete, saveHabit, deleteHabit, archiveHabit, habitFreqMap } = useHabits();
  const [_, setPomo] = useAtom(pomodoroAtom);
+  const [browserSettings, setBrowserSettings] = useAtom(browserSettingsAtom);
+  const [settings] = useAtom(settingsAtom);
+  const [completedHabitsMap] = useAtom(completedHabitsMapAtom);
+
+  const today = getTodayInTimezone(settings.system.timezone);
+  const currentTodayCompletions = completedHabitsMap.get(today) || [];
+  const currentBadgeType = isTask ? 'tasks' : 'habits';
+
+  const currentExpanded = isTask ? browserSettings.expandedTasks : browserSettings.expandedHabits;
+  const setCurrentExpanded = (value: boolean) => {
+    setBrowserSettings(prev => ({
+      ...prev,
+      [isTask ? 'expandedTasks' : 'expandedHabits']: value
+    }));
+  };
+
+  const [isConfirmDeleteDialogOpen, setIsConfirmDeleteDialogOpen] = useState(false);
+  const [habitToDelete, setHabitToDelete] = useState<Habit | null>(null);
+  const [habitToEdit, setHabitToEdit] = useState<Habit | null>(null);
+
+  const handleDeleteClick = (habit: Habit) => {
+    setHabitToDelete(habit);
+    setIsConfirmDeleteDialogOpen(true);
+  };
+
+  const confirmDelete = async () => {
+    if (habitToDelete) {
+      await deleteHabit(habitToDelete.id);
+      setHabitToDelete(null);
+      setIsConfirmDeleteDialogOpen(false);
+    }
+  };
+
+  const handleEditClick = (habit: Habit) => {
+    setHabitToEdit(habit);
+  };

  if (items.length === 0) {
    return (
@@ -89,7 +118,7 @@ const ItemSection = ({
          <h3 className="font-semibold">{title}</h3>
        </div>
        <div className="flex items-center gap-2">
-          <CompletionCountBadge type={badgeType} />
+          <CompletionCountBadge type={currentBadgeType} />
          <Button
            variant="ghost"
            size="sm"
@@ -101,7 +130,7 @@ const ItemSection = ({
          </Button>
        </div>
      </div>
-      <ul className={`grid gap-2 transition-all duration-300 ease-in-out ${expanded ? 'max-h-none' : 'max-h-[200px]'} overflow-hidden`}>
+      <ul className={`grid gap-2 transition-all duration-300 ease-in-out ${currentExpanded ? 'max-h-none' : 'max-h-[200px]'} overflow-hidden`}>
        {items
          .sort((a, b) => {
            // First by pinned status
@@ -110,15 +139,15 @@ const ItemSection = ({
            }

            // Then by completion status
-            const aCompleted = todayCompletions.includes(a);
-            const bCompleted = todayCompletions.includes(b);
+            const aCompleted = currentTodayCompletions.includes(a);
+            const bCompleted = currentTodayCompletions.includes(b);
            if (aCompleted !== bCompleted) {
              return aCompleted ? 1 : -1;
            }

            // Then by frequency (daily first)
-            const aFreq = getHabitFreq(a);
-            const bFreq = getHabitFreq(b);
+            const aFreq = habitFreqMap.get(a.id) || 'daily';
+            const bFreq = habitFreqMap.get(b.id) || 'daily';
            const freqOrder = ['daily', 'weekly', 'monthly', 'yearly'];
            if (freqOrder.indexOf(aFreq) !== freqOrder.indexOf(bFreq)) {
              return freqOrder.indexOf(aFreq) - freqOrder.indexOf(bFreq);
@@ -134,7 +163,7 @@ const ItemSection = ({
            const bTarget = b.targetCompletions || 1;
            return bTarget - aTarget;
          })
-          .slice(0, expanded ? undefined : 5)
+          .slice(0, currentExpanded ? undefined : 5)
          .map((habit) => {
            const completionsToday = habit.completions.filter(completion =>
              isSameDate(t2d({ timestamp: completion, timezone: settings.system.timezone }), t2d({ timestamp: d2t({ dateTime: getNow({ timezone: settings.system.timezone }) }), timezone: settings.system.timezone }))
@@ -190,50 +219,40 @@ const ItemSection = ({
                          )}
                          <Link
                            href={`/habits?highlight=${habit.id}`}
-                            className={cn(
-                              isCompleted ? 'line-through' : '',
-                              'break-all hover:text-primary transition-colors'
-                            )}
+                            className="flex items-center gap-1 hover:text-primary transition-colors"
                          >
-                            {habit.name}
+                            {isTask && isTaskOverdue(habit, settings.system.timezone) && !isCompleted && (
+                              <TooltipProvider>
+                                <Tooltip delayDuration={0}>
+                                  <TooltipTrigger asChild>
+                                    {/* The AlertTriangle itself doesn't need hover styles if the parent Link handles it */}
+                                    <AlertTriangle className="h-4 w-4 flex-shrink-0 text-red-600 dark:text-red-500" />
+                                  </TooltipTrigger>
+                                  <TooltipContent>
+                                    <p>Overdue</p>
+                                  </TooltipContent>
+                                </Tooltip>
+                              </TooltipProvider>
+                            )}
+                            <span
+                              className={cn(
+                                isCompleted ? 'line-through' : '',
+                                'break-all' // Text specific styles
+                              )}
+                            >
+                              {habit.name}
+                            </span>
                          </Link>
                        </span>
                      </div>
                    </ContextMenuTrigger>
                    <ContextMenuContent className="w-64">
-                      <ContextMenuItem onClick={() => {
-                        setPomo((prev) => ({
-                          ...prev,
-                          show: true,
-                          selectedHabitId: habit.id
-                        }))
-                      }}>
-                        <Timer className="mr-2 h-4 w-4" />
-                        <span>Start Pomodoro</span>
-                      </ContextMenuItem>
-                      {habit.isTask && (
-                        <ContextMenuItem onClick={() => {
-                          saveHabit({...habit, frequency: d2t({ dateTime: getNow({ timezone: settings.system.timezone })})})
-                        }}>
-                          <Calendar className="mr-2 h-4 w-4" />
-                          <span>Move to Today</span>
-                        </ContextMenuItem>
-                      )}
-                      <ContextMenuItem onClick={() => {
-                        saveHabit({ ...habit, pinned: !habit.pinned })
-                      }}>
-                        {habit.pinned ? (
-                          <>
-                            <Pin className="mr-2 h-4 w-4" />
-                            <span>Unpin</span>
-                          </>
-                        ) : (
-                          <>
-                            <Pin className="mr-2 h-4 w-4" />
-                            <span>Pin</span>
-                          </>
-                        )}
-                      </ContextMenuItem>
+                      <HabitContextMenuItems
+                        habit={habit}
+                        onEditRequest={() => handleEditClick(habit)}
+                        onDeleteRequest={() => handleDeleteClick(habit)}
+                        context="daily-overview"
+                      />
                    </ContextMenuContent>
                  </ContextMenu>
                </span>
@@ -243,9 +262,9 @@ const ItemSection = ({
                      {completionsToday}/{target}
                    </span>
                  )}
-                  {getHabitFreq(habit) !== 'daily' && (
+                  {habitFreqMap.get(habit.id) !== 'daily' && (
                    <Badge variant="outline" className="text-xs">
-                      {getHabitFreq(habit)}
+                      {habitFreqMap.get(habit.id)}
                    </Badge>
                  )}
                  <span className="flex items-center">
@@ -271,10 +290,10 @@ const ItemSection = ({
      </ul>
      <div className="flex items-center justify-between">
        <button
-          onClick={() => setExpanded(!expanded)}
+          onClick={() => setCurrentExpanded(!currentExpanded)}
          className="text-sm text-muted-foreground hover:text-primary flex items-center gap-1"
        >
-          {expanded ? (
+          {currentExpanded ? (
            <>
              Show less
              <ChevronUp className="h-3 w-3" />
@@ -289,18 +308,32 @@ const ItemSection = ({
        <Link
          href={viewLink}
          className="text-sm text-muted-foreground hover:text-primary flex items-center gap-1"
-          onClick={() => {
-            if (isTask) {
-              setBrowserSettings(prev => ({ ...prev, viewType: 'tasks' }));
-            } else {
-              setBrowserSettings(prev => ({ ...prev, viewType: 'habits' }));
-            }
-          }}
        >
          View
          <ArrowRight className="h-3 w-3" />
        </Link>
      </div>
+      {habitToDelete && (
+        <ConfirmDialog
+          isOpen={isConfirmDeleteDialogOpen}
+          onClose={() => setIsConfirmDeleteDialogOpen(false)}
+          onConfirm={confirmDelete}
+          title={`Delete ${isTask ? 'Task' : 'Habit'}`}
+          message={`Are you sure you want to delete "${habitToDelete.name}"? This action cannot be undone.`}
+          confirmText="Delete"
+        />
+      )}
+      {habitToEdit && (
+        <AddEditHabitModal
+          onClose={() => setHabitToEdit(null)}
+          onSave={async (updatedHabit) => {
+            await saveHabit({ ...habitToEdit, ...updatedHabit });
+            setHabitToEdit(null);
+          }}
+          habit={habitToEdit}
+          isTask={habitToEdit.isTask || false}
+        />
+      )}
    </div>
  );
 };
@@ -313,14 +346,25 @@ export default function DailyOverview({
  const { completeHabit, undoComplete } = useHabits()
  const [settings] = useAtom(settingsAtom)
  const [completedHabitsMap] = useAtom(completedHabitsMapAtom)
-  const [dailyItems] = useAtom(dailyHabitsAtom)
  const [browserSettings, setBrowserSettings] = useAtom(browserSettingsAtom)
-  const dailyTasks = dailyItems.filter(habit => habit.isTask)
-  const dailyHabits = dailyItems.filter(habit => !habit.isTask)
  const today = getTodayInTimezone(settings.system.timezone)
  const todayCompletions = completedHabitsMap.get(today) || []
  const { saveHabit } = useHabits()

+  const timezone = settings.system.timezone
+  const todayDateObj = getNow({ timezone })
+
+  const dailyTasks = habits.filter(habit =>
+    habit.isTask &&
+    !habit.archived &&
+    (isHabitDue({ habit, timezone, date: todayDateObj }) || isTaskOverdue(habit, timezone))
+  )
+  const dailyHabits = habits.filter(habit =>
+    !habit.isTask &&
+    !habit.archived &&
+    isHabitDue({ habit, timezone, date: todayDateObj })
+  )
+
  // Get all wishlist items sorted by redeemable status (non-redeemable first) then by coin cost
  // Filter out archived wishlist items
  const sortedWishlistItems = wishlistItems
@@ -364,13 +408,7 @@ export default function DailyOverview({
                emptyMessage="No tasks due today. Add some tasks to get started!"
                isTask={true}
                viewLink="/habits?view=tasks"
-                expanded={browserSettings.expandedTasks}
-                setExpanded={(value) => setBrowserSettings(prev => ({ ...prev, expandedTasks: value }))}
                addNewItem={() => setModalConfig({ isOpen: true, isTask: true })}
-                badgeType="tasks"
-                todayCompletions={todayCompletions}
-                settings={settings}
-                setBrowserSettings={setBrowserSettings}
              />
            )}

@@ -381,13 +419,7 @@ export default function DailyOverview({
              emptyMessage="No habits due today. Add some habits to get started!"
              isTask={false}
              viewLink="/habits"
-              expanded={browserSettings.expandedHabits}
-              setExpanded={(value) => setBrowserSettings(prev => ({ ...prev, expandedHabits: value }))}
              addNewItem={() => setModalConfig({ isOpen: true, isTask: false })}
-              badgeType="habits"
-              todayCompletions={todayCompletions}
-              settings={settings}
-              setBrowserSettings={setBrowserSettings}
            />

            <div className="space-y-2">
--- a/components/Dashboard.tsx
+++ b/components/Dashboard.tsx
@@ -1,17 +1,15 @@
 'use client'

+import { useCoins } from '@/hooks/useCoins'
+import { habitsAtom, wishlistAtom } from '@/lib/atoms'
 import { useAtom } from 'jotai'
-import { wishlistAtom, habitsAtom, settingsAtom } from '@/lib/atoms'
+import CoinBalance from './CoinBalance'
 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
--- a/components/HabitCalendar.tsx
+++ b/components/HabitCalendar.tsx
@@ -1,18 +1,17 @@
 'use client'

-import { useState, useMemo, useCallback } from 'react'
+import CompletionCountBadge from '@/components/CompletionCountBadge'
 import { Calendar } from '@/components/ui/calendar'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-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 { useHabits } from '@/hooks/useHabits'
-import { habitsAtom, settingsAtom, completedHabitsMapAtom, hasTasksAtom } from '@/lib/atoms'
-import { DateTime } from 'luxon'
-import Linkify from './linkify'
+import { completedHabitsMapAtom, habitsAtom, hasTasksAtom, settingsAtom } from '@/lib/atoms'
 import { Habit } from '@/lib/types'
+import { d2s, getCompletionsForDate, getISODate, getNow, isHabitDue } from '@/lib/utils'
+import { useAtom } from 'jotai'
+import { Circle, CircleCheck } from 'lucide-react'
+import { DateTime } from 'luxon'
+import { useCallback, useMemo, useState } from 'react'
+import Linkify from './linkify'

 export default function HabitCalendar() {
  const { completePastHabit } = useHabits()
@@ -41,8 +40,8 @@ export default function HabitCalendar() {
  }, [completedHabitsMap, settings.system.timezone])

  return (
-    <div className="container mx-auto px-4 py-6">
-      <h1 className="text-2xl font-semibold mb-6">Habit Calendar</h1>
+    <div className="container mx-auto px-4 py-8">
+      <h1 className="text-3xl font-bold mb-6">Habit Calendar</h1>
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <Card>
          <CardHeader>
--- a/components/HabitContextMenuItems.tsx
+++ b/components/HabitContextMenuItems.tsx
@@ -0,0 +1,157 @@
+import { Habit } from '@/lib/types';
+import { useHabits } from '@/hooks/useHabits';
+import { useAtom } from 'jotai';
+import { pomodoroAtom, settingsAtom } from '@/lib/atoms';
+import { d2t, getNow, isHabitDueToday } from '@/lib/utils';
+import { DropdownMenuItem, DropdownMenuSeparator } from '@/components/ui/dropdown-menu';
+import { ContextMenuItem, ContextMenuSeparator } from '@/components/ui/context-menu';
+import { Timer, Calendar, Pin, Edit, Archive, ArchiveRestore, Trash2 } from 'lucide-react';
+import { useHelpers } from '@/lib/client-helpers'; // For permission checks if needed, though useHabits handles most
+
+interface HabitContextMenuItemsProps {
+  habit: Habit;
+  onEditRequest: () => void;
+  onDeleteRequest: () => void;
+  context?: 'daily-overview' | 'habit-item';
+  onClose?: () => void; // Optional: To close the dropdown if an action is taken
+}
+
+export function HabitContextMenuItems({
+  habit,
+  onEditRequest,
+  onDeleteRequest,
+  context = 'habit-item',
+  onClose,
+}: HabitContextMenuItemsProps) {
+  const { saveHabit, archiveHabit, unarchiveHabit } = useHabits();
+  const [settings] = useAtom(settingsAtom);
+  const [, setPomo] = useAtom(pomodoroAtom);
+  const { hasPermission } = useHelpers(); // Assuming useHabits handles permissions for its actions
+
+  const canWrite = hasPermission('habit', 'write'); // For UI disabling if not handled by useHabits' actions
+  const canInteract = hasPermission('habit', 'interact');
+
+  const MenuItemComponent = context === 'daily-overview' ? ContextMenuItem : DropdownMenuItem;
+  const MenuSeparatorComponent = context === 'daily-overview' ? ContextMenuSeparator : DropdownMenuSeparator;
+
+  const taskIsDueToday = habit.isTask ? isHabitDueToday({ habit, timezone: settings.system.timezone }) : false;
+
+  const handleAction = (action: () => void) => {
+    action();
+    onClose?.();
+  };
+
+  return (
+    <>
+      {!habit.archived && (
+        <MenuItemComponent
+          disabled={!canInteract}
+          onClick={() => handleAction(() => {
+            setPomo((prev) => ({
+              ...prev,
+              show: true,
+              selectedHabitId: habit.id,
+            }));
+          })}
+        >
+          <Timer className="mr-2 h-4 w-4" />
+          <span>Start Pomodoro</span>
+        </MenuItemComponent>
+      )}
+
+      {/* "Move to Today" option: Show if task is not due today */}
+      {habit.isTask && !habit.archived && !taskIsDueToday && (
+        <MenuItemComponent
+          disabled={!canWrite}
+          onClick={() => handleAction(() => {
+            const today = getNow({ timezone: settings.system.timezone });
+            saveHabit({ ...habit, frequency: d2t({ dateTime: today }) });
+          })}
+        >
+          <Calendar className="mr-2 h-4 w-4" />
+          <span>Move to Today</span>
+        </MenuItemComponent>
+      )}
+
+      {/* "Move to Tomorrow" option: Show if task is due today OR not due today */}
+      {habit.isTask && !habit.archived && (
+        <MenuItemComponent
+          disabled={!canWrite}
+          onClick={() => handleAction(() => {
+            const tomorrow = getNow({ timezone: settings.system.timezone }).plus({ days: 1 });
+            saveHabit({ ...habit, frequency: d2t({ dateTime: tomorrow }) });
+          })}
+        >
+          <Calendar className="mr-2 h-4 w-4" />
+          <span>Move to Tomorrow</span>
+        </MenuItemComponent>
+      )}
+
+      {!habit.archived && (
+        <MenuItemComponent
+          disabled={!canWrite}
+          onClick={() => handleAction(() => saveHabit({ ...habit, pinned: !habit.pinned }))}
+        >
+          <Pin className="mr-2 h-4 w-4" />
+          <span>{habit.pinned ? 'Unpin' : 'Pin'}</span>
+        </MenuItemComponent>
+      )}
+
+      {context === 'habit-item' && !habit.archived && ( // Edit button visible in dropdown only for habit-item context on small screens
+        <MenuItemComponent
+          onClick={() => handleAction(onEditRequest)}
+          className="sm:hidden" // Kept the sm:hidden for HabitItem specific responsive behavior
+          disabled={!canWrite}
+        >
+          <Edit className="mr-2 h-4 w-4" />
+          <span>Edit</span>
+        </MenuItemComponent>
+      )}
+
+      {context === 'daily-overview' && !habit.archived && ( // Edit button always visible in dropdown for daily-overview context
+         <MenuItemComponent
+          onClick={() => handleAction(onEditRequest)}
+          disabled={!canWrite}
+        >
+          <Edit className="mr-2 h-4 w-4" />
+          <span>Edit</span>
+        </MenuItemComponent>
+      )}
+
+
+      {!habit.archived && (
+        <MenuItemComponent
+          disabled={!canWrite}
+          onClick={() => handleAction(() => archiveHabit(habit.id))}
+        >
+          <Archive className="mr-2 h-4 w-4" />
+          <span>Archive</span>
+        </MenuItemComponent>
+      )}
+
+      {habit.archived && (
+        <MenuItemComponent
+          disabled={!canWrite}
+          onClick={() => handleAction(() => unarchiveHabit(habit.id))}
+        >
+          <ArchiveRestore className="mr-2 h-4 w-4" />
+          <span>Unarchive</span>
+        </MenuItemComponent>
+      )}
+      
+      {context === 'habit-item' && !habit.archived && <MenuSeparatorComponent className="sm:hidden" />}
+
+      {(context === 'daily-overview' || habit.archived) && <MenuSeparatorComponent />}
+
+
+      <MenuItemComponent
+        onClick={() => handleAction(onDeleteRequest)}
+        className="text-red-600 focus:text-red-600 dark:text-red-400 dark:focus:text-red-400"
+        disabled={!canWrite} // Assuming delete is a write operation
+      >
+        <Trash2 className="mr-2 h-4 w-4" />
+        <span>Delete</span>
+      </MenuItemComponent>
+    </>
+  );
+}
--- a/components/HabitItem.tsx
+++ b/components/HabitItem.tsx
@@ -1,23 +1,21 @@
-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, Trash2, Check, Undo2, MoreVertical, Timer, Archive, ArchiveRestore, Calendar, Pin } from 'lucide-react'
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
 import {
  DropdownMenu,
  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
+  DropdownMenuTrigger
 } from '@/components/ui/dropdown-menu'
-import { useEffect, useState } from 'react'
 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 { 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 { Avatar, AvatarFallback, AvatarImage } from './ui/avatar'
+import { usePathname } from 'next/navigation'

 interface HabitItemProps {
  habit: Habit
@@ -48,7 +46,6 @@ 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
@@ -57,9 +54,7 @@ export default function HabitItem({ habit, onEdit, onDelete }: HabitItemProps) {
  const { currentUser, hasPermission } = useHelpers()
  const canWrite = hasPermission('habit', 'write')
  const canInteract = hasPermission('habit', 'interact')
-  const [browserSettings] = useAtom(browserSettingsAtom)
-  const isTasksView = browserSettings.viewType === 'tasks'
-  const isRecurRule = !isTasksView
+  const pathname = usePathname();

  useEffect(() => {
    const params = new URLSearchParams(window.location.search)
@@ -87,7 +82,7 @@ export default function HabitItem({ habit, onEdit, onDelete }: HabitItemProps) {
    >
      <CardHeader className="flex-none">
        <div className="flex justify-between items-start">
-          <CardTitle className={`line-clamp-1 ${habit.archived ? 'text-gray-400 dark:text-gray-500' : ''} flex items-center ${isTasksView ? 'w-full' : ''} justify-between`}>
+          <CardTitle className={`line-clamp-1 ${habit.archived ? 'text-gray-400 dark:text-gray-500' : ''} flex items-center ${pathname.includes("tasks") ? 'w-full' : ''} justify-between`}>
            <div className="flex items-center gap-1">
              {habit.pinned && (
                <Pin className="h-4 w-4 text-yellow-500" />
@@ -112,7 +107,7 @@ export default function HabitItem({ habit, onEdit, onDelete }: HabitItemProps) {
        <p className={`text-sm ${habit.archived ? 'text-gray-400 dark:text-gray-500' : 'text-gray-500'}`}>
          When: {convertMachineReadableFrequencyToHumanReadable({
            frequency: habit.frequency,
-            isRecurRule,
+            isRecurRule: pathname.includes("habits"),
            timezone: settings.system.timezone
          })}
        </p>
@@ -194,70 +189,12 @@ export default function HabitItem({ habit, onEdit, onDelete }: HabitItemProps) {
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
-              {!habit.archived && (
-                <DropdownMenuItem onClick={() => {
-                  if (!canInteract) return
-                  setPomo((prev) => ({
-                    ...prev,
-                    show: true,
-                    selectedHabitId: habit.id
-                  }))
-                }}>
-                  <Timer className="mr-2 h-4 w-4" />
-                  <span>Start Pomodoro</span>
-                </DropdownMenuItem>
-              )}
-              {!habit.archived && (
-                <>
-                  {habit.isTask && (
-                    <DropdownMenuItem disabled={!canWrite} onClick={() => {
-                      saveHabit({...habit, frequency: d2t({ dateTime: getNow({ timezone: settings.system.timezone })})})
-                    }}>
-                      <Calendar className="mr-2 h-4 w-4" />
-                      <span>Move to Today</span>
-                    </DropdownMenuItem>
-                  )}
-                  <DropdownMenuItem disabled={!canWrite} onClick={() => saveHabit({...habit, pinned: !habit.pinned})}>
-                    {habit.pinned ? (
-                      <>
-                        <Archive className="mr-2 h-4 w-4" />
-                        <span>Unpin</span>
-                      </>
-                    ) : (
-                      <>
-                        <Archive className="mr-2 h-4 w-4" />
-                        <span>Pin</span>
-                      </>
-                    )}
-                  </DropdownMenuItem>
-                  <DropdownMenuItem disabled={!canWrite} onClick={() => archiveHabit(habit.id)}>
-                    <Archive className="mr-2 h-4 w-4" />
-                    <span>Archive</span>
-                  </DropdownMenuItem>
-                </>
-              )}
-              {habit.archived && (
-                <DropdownMenuItem disabled={!canWrite} onClick={() => unarchiveHabit(habit.id)}>
-                  <ArchiveRestore className="mr-2 h-4 w-4" />
-                  <span>Unarchive</span>
-                </DropdownMenuItem>
-              )}
-              <DropdownMenuItem
-                onClick={onEdit}
-                className="sm:hidden"
-                disabled={habit.archived}
-              >
-                <Edit className="mr-2 h-4 w-4" />
-                Edit
-              </DropdownMenuItem>
-              <DropdownMenuSeparator className="sm:hidden" />
-              <DropdownMenuItem
-                className="text-red-600 focus:text-red-600 dark:text-red-400 dark:focus:text-red-400 cursor-pointer"
-                onClick={onDelete}
-              >
-                <Trash2 className="mr-2 h-4 w-4" />
-                Delete
-              </DropdownMenuItem>
+              <HabitContextMenuItems
+                habit={habit}
+                onEditRequest={onEdit}
+                onDeleteRequest={onDelete}
+                context="habit-item"
+              />
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
--- a/components/HabitList.tsx
+++ b/components/HabitList.tsx
@@ -1,32 +1,109 @@
 'use client'

-import { useState } from 'react'
-import { Plus, ListTodo } from 'lucide-react'
-import { useAtom } from 'jotai'
-import { habitsAtom, settingsAtom, browserSettingsAtom } from '@/lib/atoms'
-import EmptyState from './EmptyState'
 import { Button } from '@/components/ui/button'
-import HabitItem from './HabitItem'
+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 { habitsAtom } from '@/lib/atoms'
+import { HabitIcon, TaskIcon } from '@/lib/constants'
+import { Habit } from '@/lib/types'
+import { getHabitFreq } from '@/lib/utils'; // Added
+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 AddEditHabitModal from './AddEditHabitModal'
 import ConfirmDialog from './ConfirmDialog'
-import { Habit } from '@/lib/types'
-import { useHabits } from '@/hooks/useHabits'
-import { HabitIcon, TaskIcon } from '@/lib/constants'
+import EmptyState from './EmptyState'
+import HabitItem from './HabitItem'
 import { ViewToggle } from './ViewToggle'

-export default function HabitList() {
+export default function HabitList({ isTasksView }: { isTasksView: boolean}) {
  const { saveHabit, deleteHabit } = useHabits()
-  const [habitsData, setHabitsData] = useAtom(habitsAtom)
-  const [browserSettings] = useAtom(browserSettingsAtom)
-  const isTasksView = browserSettings.viewType === 'tasks'
-  const habits = habitsData.habits.filter(habit => 
-    isTasksView ? habit.isTask : !habit.isTask
-  )
-  const activeHabits = habits
-    .filter(h => !h.archived)
-    .sort((a, b) => (b.pinned ? 1 : 0) - (a.pinned ? 1 : 0))
-  const archivedHabits = habits.filter(h => h.archived)
-  const [settings] = useAtom(settingsAtom)
+  const [habitsData] = useAtom(habitsAtom) // setHabitsData removed as it's not used
+
+  type SortableField = 'name' | 'coinReward' | 'dueDate' | 'frequency';
+  type SortOrder = 'asc' | 'desc';
+
+  const [searchTerm, setSearchTerm] = useState('');
+  const [sortBy, setSortBy] = useState<SortableField>('name');
+  const [sortOrder, setSortOrder] = useState<SortOrder>('asc');
+
+  useEffect(() => {
+    if (isTasksView && sortBy === 'frequency') {
+      setSortBy('name');
+    } else if (!isTasksView && sortBy === 'dueDate') {
+      setSortBy('name');
+    }
+  }, [isTasksView, sortBy]);
+
+  const compareHabits = useMemo(() => {
+    return (a: Habit, b: Habit, currentSortBy: SortableField, currentSortOrder: SortOrder, tasksView: boolean): number => {
+      let comparison = 0;
+      switch (currentSortBy) {
+        case 'name':
+          comparison = a.name.localeCompare(b.name);
+          break;
+        case 'coinReward':
+          comparison = a.coinReward - b.coinReward;
+          break;
+        case 'dueDate':
+          if (tasksView && a.isTask && b.isTask) {
+            const dateA = DateTime.fromISO(a.frequency);
+            const dateB = DateTime.fromISO(b.frequency);
+            if (dateA.isValid && dateB.isValid) comparison = dateA.toMillis() - dateB.toMillis();
+            else if (dateA.isValid) comparison = -1; // Valid dates first
+            else if (dateB.isValid) comparison = 1;
+            // If both invalid, comparison remains 0
+          }
+          break;
+        case 'frequency':
+          if (!tasksView && !a.isTask && !b.isTask) {
+            const freqOrder = ['daily', 'weekly', 'monthly', 'yearly'];
+            const freqAVal = getHabitFreq(a);
+            const freqBVal = getHabitFreq(b);
+            comparison = freqOrder.indexOf(freqAVal) - freqOrder.indexOf(freqBVal);
+          }
+          break;
+      }
+      return currentSortOrder === 'asc' ? comparison : -comparison;
+    };
+  }, []);
+
+  const allHabitsInView = useMemo(() => {
+    return habitsData.habits.filter(habit =>
+      isTasksView ? habit.isTask : !habit.isTask
+    );
+  }, [habitsData.habits, isTasksView]);
+
+  const searchedHabits = useMemo(() => {
+    if (!searchTerm.trim()) {
+      return allHabitsInView;
+    }
+    const lowercasedSearchTerm = searchTerm.toLowerCase();
+    return allHabitsInView.filter(habit =>
+      habit.name.toLowerCase().includes(lowercasedSearchTerm) ||
+      (habit.description && habit.description.toLowerCase().includes(lowercasedSearchTerm))
+    );
+  }, [allHabitsInView, searchTerm]);
+
+  const activeHabits = useMemo(() => {
+    return searchedHabits
+      .filter(h => !h.archived)
+      .sort((a, b) => {
+        if (a.pinned && !b.pinned) return -1;
+        if (!a.pinned && b.pinned) return 1;
+        // For items in the same pinned group (both pinned or both not pinned), apply general sort
+        return compareHabits(a, b, sortBy, sortOrder, isTasksView);
+      });
+  }, [searchedHabits, sortBy, sortOrder, isTasksView, compareHabits]);
+
+  const archivedHabits = useMemo(() => {
+    return searchedHabits
+      .filter(h => h.archived)
+      .sort((a, b) => compareHabits(a, b, sortBy, sortOrder, isTasksView));
+  }, [searchedHabits, sortBy, sortOrder, isTasksView, compareHabits]);
  const [modalConfig, setModalConfig] = useState<{
    isOpen: boolean,
    isTask: boolean
@@ -44,23 +121,54 @@ export default function HabitList() {
  return (
    <div className="container mx-auto px-4 py-8">
      <div className="flex justify-between items-center mb-6">
-        <h1 className="text-3xl font-bold">
-          {isTasksView ? 'My Tasks' : 'My Habits'}
-        </h1>
+        <h1 className="text-3xl font-bold">{`My ${isTasksView ? "Tasks" : "Habits"}`}</h1>
        <span>
-          <Button className="mr-2" onClick={() => setModalConfig({ isOpen: true, isTask: true })}>
-            <Plus className="mr-2 h-4 w-4" /> {'Add Task'}
-          </Button>
-          <Button onClick={() => setModalConfig({ isOpen: true, isTask: false })}>
-            <Plus className="mr-2 h-4 w-4" /> {'Add Habit'}
+          <Button onClick={() => setModalConfig({ isOpen: true, isTask: isTasksView })}>
+            <Plus className='mr-2 h-4 w-4' />{`Add ${isTasksView ? "Task" : "Habit"}`}
          </Button>
        </span>
      </div>
-      <div className='py-4'>
-        <ViewToggle />
+
+      {/* Search and Sort Controls */}
+      <div className="flex flex-col sm:flex-row items-center gap-4 my-4">
+        <div className="relative flex-grow w-full sm:w-auto">
+          <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+            <Search className="h-5 w-5 text-muted-foreground" />
+          </div>
+          <Input
+            type="search"
+            placeholder={`Search ${isTasksView ? 'tasks' : 'habits'}...`}
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className="pl-10 w-full"
+          />
+        </div>
+        <div className="flex items-center gap-2 self-start sm:self-center w-full sm:w-auto">
+          <Label htmlFor="sort-by" className="text-sm font-medium whitespace-nowrap sr-only sm:not-sr-only">Sort by:</Label>
+          <Select value={sortBy} onValueChange={(value) => setSortBy(value as SortableField)}>
+            <SelectTrigger id="sort-by" className="w-full sm:w-[180px]">
+              <SelectValue placeholder="Sort by" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="name">Name</SelectItem>
+              <SelectItem value="coinReward">Coin Reward</SelectItem>
+              {isTasksView && <SelectItem value="dueDate">Due Date</SelectItem>}
+              {!isTasksView && <SelectItem value="frequency">Frequency</SelectItem>}
+            </SelectContent>
+          </Select>
+          <Button variant="outline" size="icon" onClick={() => setSortOrder(prev => prev === 'asc' ? 'desc' : 'asc')}>
+            {sortOrder === 'asc' ? <ArrowUpNarrowWide className="h-4 w-4" /> : <ArrowDownWideNarrow className="h-4 w-4" />}
+            <span className="sr-only">Toggle sort order</span>
+          </Button>
+        </div>
      </div>
+
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 items-stretch">
-        {activeHabits.length === 0 ? (
+        {activeHabits.length === 0 && searchTerm.trim() ? (
+          <div className="col-span-2 text-center text-muted-foreground py-8">
+            No {isTasksView ? 'tasks' : 'habits'} found matching your search.
+          </div>
+        ) : activeHabits.length === 0 ? (
          <div className="col-span-2">
            <EmptyState
              icon={isTasksView ? TaskIcon : HabitIcon}
--- a/components/HabitStreak.tsx
+++ b/components/HabitStreak.tsx
@@ -1,11 +1,11 @@
 'use client'

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

 interface HabitStreakProps {
  habits: Habit[]
@@ -14,6 +14,8 @@ interface HabitStreakProps {
 export default function HabitStreak({ habits }: HabitStreakProps) {
  const [settings] = useAtom(settingsAtom)
  const [hasTasks] = useAtom(hasTasksAtom)
+  const [completedHabitsMap] = useAtom(completedHabitsMapAtom) // Use the atom
+
  // Get the last 7 days of data
  const dates = Array.from({ length: 7 }, (_, i) => {
    const d = getNow({ timezone: settings.system.timezone });
@@ -21,20 +23,17 @@ export default function HabitStreak({ habits }: HabitStreakProps) {
  }).reverse()

  const completions = dates.map(date => {
-    const completedHabits = getCompletedHabitsForDate({
-      habits: habits.filter(h => !h.isTask),
-      date: t2d({ timestamp: date, timezone: settings.system.timezone }),
-      timezone: settings.system.timezone
-    });
-    const completedTasks = getCompletedHabitsForDate({
-      habits: habits.filter(h => h.isTask),
-      date: t2d({ timestamp: date, timezone: settings.system.timezone }),
-      timezone: settings.system.timezone
-    });
+    // Get completed habits for the date from the map
+    const completedOnDate = completedHabitsMap.get(date) || [];
+
+    // Filter the completed list to count habits and tasks
+    const completedHabitsCount = completedOnDate.filter(h => !h.isTask).length;
+    const completedTasksCount = completedOnDate.filter(h => h.isTask).length;
+
    return {
      date,
-      habits: completedHabits.length,
-      tasks: completedTasks.length
+      habits: completedHabitsCount,
+      tasks: completedTasksCount
    };
  });

--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -1,26 +1,15 @@
 'use client'

-import { useEffect, useState } from 'react'
-import { useAtom } from 'jotai'
-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 { useCoins } from '@/hooks/useCoins'
+import { settingsAtom } from '@/lib/atoms'
+import { useAtom } from 'jotai'
+import { Coins } from 'lucide-react'
 import dynamic from 'next/dynamic'
+import Link from 'next/link'
+import NotificationBell from './NotificationBell'
 import { Profile } from './Profile'
-import { useHelpers } from '@/lib/client-helpers'

 interface HeaderProps {
  className?: string
@@ -30,7 +19,6 @@ 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 (
    <>
--- a/components/Logo.tsx
+++ b/components/Logo.tsx
@@ -1,4 +1,3 @@
-import { Sparkles } from "lucide-react"

 export function Logo() {
  return (
--- a/components/Navigation.tsx
+++ b/components/Navigation.tsx
@@ -1,40 +1,33 @@
 'use client'

+import { useHelpers } from '@/lib/client-helpers'
+import { HabitIcon, TaskIcon } from '@/lib/constants'
+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 { HabitIcon, TaskIcon } from '@/lib/constants'
-import { useHelpers } from '@/lib/client-helpers'
+import { usePathname } from 'next/navigation'

 type ViewPort = 'main' | 'mobile'

-const navItems = (isTasksView: boolean) => [
+const navItems = () => [
  { icon: Home, label: 'Dashboard', href: '/', position: 'main' },
-  {
-    icon: isTasksView ? TaskIcon : HabitIcon,
-    label: isTasksView ? 'Tasks' : 'Habits',
-    href: '/habits',
-    position: 'main'
-  },
+  { icon: HabitIcon, label: 'Habits', href: '/habits', position: 'main' },
+  { icon: TaskIcon, label: 'Tasks', href: '/tasks', 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' },
 ]

 interface NavigationProps {
-  className?: string
  viewPort: ViewPort
 }

-export default function Navigation({ className, viewPort }: NavigationProps) {
+export default function Navigation({ viewPort }: NavigationProps) {
  const [showAbout, setShowAbout] = useState(false)
  const [isMobileView, setIsMobileView] = useState(false)
-  const [browserSettings] = useAtom(browserSettingsAtom)
-  const isTasksView = browserSettings.viewType === 'tasks'
  const { isIOS } = useHelpers()
+  const pathname = usePathname();

  useEffect(() => {
    const handleResize = () => {
@@ -56,12 +49,16 @@ export default function Navigation({ className, viewPort }: NavigationProps) {
      <>
        <div className={isIOS ? "pb-20" : "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 ${isIOS ? "pb-4" : ""}`}>
-          <div className="grid grid-cols-5 w-full">
-            {[...navItems(isTasksView).filter(item => item.position === 'main'), ...navItems(isTasksView).filter(item => item.position === 'bottom')].map((item) => (
+          <div className="grid grid-cols-6 w-full">
+            {...navItems().map((item) => (
              <Link
                key={item.label}
                href={item.href}
-                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"
+                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")
+                }
              >
                <item.icon className="h-6 w-6" />
                <span className="text-xs mt-1">{item.label}</span>
@@ -81,13 +78,16 @@ export default function Navigation({ className, viewPort }: NavigationProps) {
          <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(isTasksView).filter(item => item.position === 'main').map((item) => (
+                {navItems().filter(item => item.position === 'main').map((item) => (
                  <Link
                    key={item.label}
                    href={item.href}
-                    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"
+                    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")}
                  >
-                    <item.icon className="mr-4 flex-shrink-0 h-6 w-6 text-gray-400" aria-hidden="true" />
+                    <item.icon className="mr-4 flex-shrink-0 h-6 w-6" aria-hidden="true" />
                    {item.label}
                  </Link>
                ))}
--- a/components/NotificationDropdown.tsx
+++ b/components/NotificationDropdown.tsx
@@ -1,18 +1,17 @@
-import React from 'react';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { DropdownMenuItem } from '@/components/ui/dropdown-menu';
 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;
--- a/components/PasswordEntryForm.tsx
+++ b/components/PasswordEntryForm.tsx
@@ -1,13 +1,13 @@
 'use client';

-import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar';
-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 { 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 { Label } from './ui/label';

 interface PasswordEntryFormProps {
  user: User;
--- a/components/PomodoroTimer.tsx
+++ b/components/PomodoroTimer.tsx
@@ -1,14 +1,13 @@
 'use client'

-import { useState, useEffect, useRef, useCallback } from 'react'
 import { Button } from '@/components/ui/button'
 import { Progress } from '@/components/ui/progress'
-import { Play, Pause, RotateCw, Minus, X, Clock, SkipForward } from 'lucide-react'
-import { cn, getCompletionsForToday } from '@/lib/utils'
-import { useAtom } from 'jotai'
-import { settingsAtom, pomodoroAtom, habitsAtom, pomodoroTodayCompletionsAtom } from '@/lib/atoms'
-import { getCompletionsForDate, getTodayInTimezone } from '@/lib/utils'
 import { useHabits } from '@/hooks/useHabits'
+import { habitsAtom, pomodoroAtom, pomodoroTodayCompletionsAtom, settingsAtom } from '@/lib/atoms'
+import { cn } from '@/lib/utils'
+import { useAtom } from 'jotai'
+import { Clock, Minus, Pause, Play, RotateCw, SkipForward, X } from 'lucide-react'
+import { useEffect, useRef, useState } from 'react'

 interface PomoConfig {
  labels: string[]
@@ -135,7 +134,19 @@ export default function PomodoroTimer() {
        const remaining = Math.floor((targetEndTime - Date.now()) / 1000)

        if (remaining <= 0) {
-          handleTimerEnd()
+          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
+          }
        } else {
          setTimeLeft(remaining)
        }
@@ -146,23 +157,7 @@ export default function PomodoroTimer() {
    return () => {
      if (interval) clearInterval(interval)
    }
-  }, [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
-    }
-  }
+  }, [state, timeLeft, completeHabit, selectedHabit])

  const toggleTimer = () => {
    setState(prev => prev === 'started' ? 'paused' : 'started')
--- a/components/Profile.tsx
+++ b/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 { Settings, Info, User, Moon, Sun, Palette, ArrowRightLeft, LogOut, Crown } from "lucide-react"
+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 { 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)
--- a/components/UserForm.tsx
+++ b/components/UserForm.tsx
@@ -1,22 +1,21 @@
 'use client';

-import { useState } from 'react';
+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 { Input } from './ui/input';
+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 { Input } from './ui/input';
 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
--- a/components/UserSelectModal.tsx
+++ b/components/UserSelectModal.tsx
@@ -1,22 +1,19 @@
 '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 { 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';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from './ui/dialog';

 function UserCard({ 
  user, 
--- a/components/ViewToggle.tsx
+++ b/components/ViewToggle.tsx
@@ -1,33 +1,27 @@
 'use client'

-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 { cn, isHabitDueToday } from '@/lib/utils'
+import { useAtom } from 'jotai'
 import { NotificationBadge } from './ui/notification-badge'
+import { usePathname, useRouter } from 'next/navigation'

 interface ViewToggleProps {
-  defaultView?: ViewType
  className?: string
 }

 export function ViewToggle({
-  defaultView = 'habits',
  className
 }: ViewToggleProps) {
  const [browserSettings, setBrowserSettings] = useAtom(browserSettingsAtom)
  const [habits] = useAtom(habitsAtom)
  const [settings] = useAtom(settingsAtom)
+  const pathname = usePathname();
+  const router = useRouter();

-  const handleViewChange = (checked: boolean) => {
-    const newView = checked ? 'tasks' : 'habits'
-    setBrowserSettings({
-      ...browserSettings,
-      viewType: newView,
-    })
+  const handleViewChange = () => {
+    router.push(pathname.includes("habits") ? "/tasks" : "/habits");
  }

  // Calculate due tasks count
@@ -39,10 +33,10 @@ export function ViewToggle({
    <div className={cn('inline-flex rounded-full bg-muted/50 h-8', className)}>
      <div className="relative flex gap-0.5 rounded-full bg-background p-0.5 h-full">
        <button
-          onClick={() => handleViewChange(false)}
+          onClick={handleViewChange}
          className={cn(
            'relative z-10 rounded-full px-4 py-2 text-sm font-medium transition-colors flex items-center gap-2',
-            browserSettings.viewType === 'habits' ? 'text-primary-foreground' : 'text-muted-foreground hover:text-foreground'
+            pathname.includes('habits') ? 'text-primary-foreground' : 'text-muted-foreground hover:text-foreground'
          )}
        >
          <HabitIcon className="h-4 w-4" />
@@ -51,14 +45,14 @@ export function ViewToggle({
        <NotificationBadge 
          label={dueTasksCount}
          show={dueTasksCount > 0}
-          variant={browserSettings.viewType === 'tasks' ? 'secondary' : 'default'}
+          variant={pathname.includes('tasks') ? 'secondary' : 'default'}
          className="shadow-md"
        >
          <button
-            onClick={() => handleViewChange(true)}
+            onClick={handleViewChange}
            className={cn(
              'relative z-10 rounded-full px-4 py-2 text-sm font-medium transition-colors flex items-center gap-2',
-              browserSettings.viewType === 'tasks' ? 'text-primary-foreground' : 'text-muted-foreground hover:text-foreground'
+              pathname.includes('tasks') ? 'text-primary-foreground' : 'text-muted-foreground hover:text-foreground'
            )}
          >
            <TaskIcon className="h-4 w-4" />
@@ -68,7 +62,7 @@ export function ViewToggle({
        <div
          className={cn(
            'absolute left-0.5 top-0.5 h-[calc(100%-0.25rem)] rounded-full bg-primary transition-transform',
-            browserSettings.viewType === 'habits' ? 'w-[calc(50%-0.125rem)]' : 'w-[calc(50%-0.125rem)] translate-x-[calc(100%+0.125rem)]'
+            pathname.includes('habits') ? 'w-[calc(50%-0.125rem)]' : 'w-[calc(50%-0.125rem)] translate-x-[calc(100%+0.125rem)]'
          )}
        />
      </div>
--- a/components/WishlistItem.tsx
+++ b/components/WishlistItem.tsx
@@ -1,12 +1,5 @@
-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 { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
 import {
  DropdownMenu,
  DropdownMenuContent,
@@ -14,6 +7,12 @@ 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
--- a/components/WishlistManager.tsx
+++ b/components/WishlistManager.tsx
@@ -88,9 +88,9 @@ export default function WishlistManager() {
          <Plus className="mr-2 h-4 w-4" /> Add Reward
        </Button>
      </div>
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 items-stretch">
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 items-stretch">
        {activeItems.length === 0 ? (
-          <div className="col-span-2">
+          <div className="col-span-1 lg:col-span-2">
            <EmptyState
              icon={Gift}
              title="Your wishlist is empty"
@@ -127,7 +127,7 @@ export default function WishlistManager() {
        
        {archivedItems.length > 0 && (
          <>
-            <div className="col-span-2 relative flex items-center my-6">
+            <div className="col-span-1 lg:col-span-2 relative flex items-center my-6">
              <div className="flex-grow border-t border-gray-300 dark:border-gray-600" />
              <span className="mx-4 text-sm text-gray-500 dark:text-gray-400">Archived</span>
              <div className="flex-grow border-t border-gray-300 dark:border-gray-600" />
--- a/components/theme-toggle.tsx
+++ b/components/theme-toggle.tsx
@@ -1,7 +1,6 @@
 "use client"

-import * as React from "react"
-import { Moon, MoonIcon, Sun } from "lucide-react"
+import { Moon, Sun } from "lucide-react"
 import { useTheme } from "next-themes"

 import { Button } from "@/components/ui/button"
--- a/docker-compose.yaml
+++ b/docker-compose.yaml
@@ -1,10 +1,11 @@
 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
--- a/hooks/useCoins.tsx
+++ b/hooks/useCoins.tsx
@@ -2,14 +2,14 @@ import { useAtom } from 'jotai'
 import { calculateCoinsEarnedToday, calculateCoinsSpentToday, calculateTotalEarned, calculateTotalSpent, calculateTransactionsToday, checkPermission } from '@/lib/utils'
 import {
  coinsAtom,
-  // coinsEarnedTodayAtom,
-  // totalEarnedAtom,
-  // totalSpentAtom,
-  // coinsSpentTodayAtom,
-  // transactionsTodayAtom,
-  // coinsBalanceAtom,
+  coinsEarnedTodayAtom,
+  totalEarnedAtom,
+  totalSpentAtom,
+  coinsSpentTodayAtom,
+  transactionsTodayAtom,
+  coinsBalanceAtom,
  settingsAtom,
-  usersAtom
+  usersAtom,
 } from '@/lib/atoms'
 import { addCoins, removeCoins, saveCoinsData } from '@/app/actions/data'
 import { CoinsData, User } from '@/lib/types'
@@ -29,7 +29,7 @@ function handlePermissionCheck(
    })
    return false
  }
-  
+
  if (!user.isAdmin && !checkPermission(user.permissions, resource, action)) {
    toast({
      title: "Permission Denied",
@@ -38,7 +38,7 @@ function handlePermissionCheck(
    })
    return false
  }
-  
+
  return true
 }

@@ -57,12 +57,12 @@ export function useCoins(options?: { selectedUser?: string }) {
  // Filter transactions for the selectd user
  const transactions = coins.transactions.filter(t => t.userId === user?.id)

-  const balance = transactions.reduce((sum, t) => sum + t.amount, 0)
-  const coinsEarnedToday = calculateCoinsEarnedToday(transactions, settings.system.timezone)
-  const totalEarned = calculateTotalEarned(transactions)
-  const totalSpent = calculateTotalSpent(transactions)
-  const coinsSpentToday = calculateCoinsSpentToday(transactions, settings.system.timezone)
-  const transactionsToday = calculateTransactionsToday(transactions, settings.system.timezone)
+  const [balance] = useAtom(coinsBalanceAtom)
+  const [coinsEarnedToday] = useAtom(coinsEarnedTodayAtom)
+  const [totalEarned] = useAtom(totalEarnedAtom)
+  const [totalSpent] = useAtom(totalSpentAtom)
+  const [coinsSpentToday] = useAtom(coinsSpentTodayAtom)
+  const [transactionsToday] = useAtom(transactionsTodayAtom)

  const add = async (amount: number, description: string, note?: string) => {
    if (!handlePermissionCheck(currentUser, 'coins', 'write')) return null
--- a/hooks/useHabits.tsx
+++ b/hooks/useHabits.tsx
@@ -1,5 +1,5 @@
-import { useAtom } from 'jotai'
-import { habitsAtom, coinsAtom, settingsAtom, usersAtom } from '@/lib/atoms'
+import { useAtom, atom } from 'jotai'
+import { habitsAtom, coinsAtom, settingsAtom, usersAtom, habitFreqMapAtom } from '@/lib/atoms'
 import { addCoins, removeCoins, saveHabitsData } from '@/app/actions/data'
 import { Habit, Permission, SafeUser, User } from '@/lib/types'
 import { toast } from '@/hooks/use-toast'
@@ -34,7 +34,7 @@ function handlePermissionCheck(
    })
    return false
  }
-  
+
  if (!user.isAdmin && !checkPermission(user.permissions, resource, action)) {
    toast({
      title: "Permission Denied",
@@ -43,7 +43,7 @@ function handlePermissionCheck(
    })
    return false
  }
-  
+
  return true
 }

@@ -54,6 +54,7 @@ export function useHabits() {
  const [habitsData, setHabitsData] = useAtom(habitsAtom)
  const [coins, setCoins] = useAtom(coinsAtom)
  const [settings] = useAtom(settingsAtom)
+  const [habitFreqMap] = useAtom(habitFreqMapAtom)

  const completeHabit = async (habit: Habit) => {
    if (!handlePermissionCheck(currentUser, 'habit', 'interact')) return
@@ -313,6 +314,7 @@ export function useHabits() {
    deleteHabit,
    completePastHabit,
    archiveHabit,
-    unarchiveHabit
+    unarchiveHabit,
+    habitFreqMap,
  }
 }
--- a/lib/atoms.ts
+++ b/lib/atoms.ts
@@ -1,43 +1,37 @@
-import { atom } from "jotai";
 import {
-  getDefaultSettings,
-  getDefaultHabitsData,
-  getDefaultCoinsData,
-  getDefaultWishlistData,
-  Habit,
-  ViewType,
-  getDefaultUsersData,
-  CompletionCache,
-  getDefaultServerSettings,
-  User,
-} from "./types";
-import {
-  getTodayInTimezone,
-  isSameDate,
-  t2d,
  calculateCoinsEarnedToday,
+  calculateCoinsSpentToday,
  calculateTotalEarned,
  calculateTotalSpent,
-  calculateCoinsSpentToday,
  calculateTransactionsToday,
  getCompletionsForToday,
-  getISODate,
-  isHabitDueToday,
-  getNow,
-  isHabitDue
+  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,
+  getDefaultWishlistData,
+  Habit
+} from "./types";

 export interface BrowserSettings {
-  viewType: ViewType
  expandedHabits: boolean
  expandedTasks: boolean
  expandedWishlist: boolean
 }

 export const browserSettingsAtom = atomWithStorage('browserSettings', {
-  viewType: 'habits',
  expandedHabits: false,
  expandedTasks: false,
  expandedWishlist: false
@@ -50,44 +44,44 @@ export const coinsAtom = atom(getDefaultCoinsData());
 export const wishlistAtom = atom(getDefaultWishlistData());
 export const serverSettingsAtom = atom(getDefaultServerSettings());

-// // Derived atom for coins earned today
-// export const coinsEarnedTodayAtom = atom((get) => {
-//   const coins = get(coinsAtom);
-//   const settings = get(settingsAtom);
-//   return calculateCoinsEarnedToday(coins.transactions, settings.system.timezone);
-// });
+// Derived atom for coins earned today
+export const coinsEarnedTodayAtom = atom((get) => {
+  const coins = get(coinsAtom);
+  const settings = get(settingsAtom);
+  return calculateCoinsEarnedToday(coins.transactions, settings.system.timezone);
+});

-// // Derived atom for total earned
-// export const totalEarnedAtom = atom((get) => {
-//   const coins = get(coinsAtom);
-//   return calculateTotalEarned(coins.transactions);
-// });
+// Derived atom for total earned
+export const totalEarnedAtom = atom((get) => {
+  const coins = get(coinsAtom);
+  return calculateTotalEarned(coins.transactions);
+});

-// // Derived atom for total spent
-// export const totalSpentAtom = atom((get) => {
-//   const coins = get(coinsAtom);
-//   return calculateTotalSpent(coins.transactions);
-// });
+// Derived atom for total spent
+export const totalSpentAtom = atom((get) => {
+  const coins = get(coinsAtom);
+  return calculateTotalSpent(coins.transactions);
+});

-// // Derived atom for coins spent today
-// export const coinsSpentTodayAtom = atom((get) => {
-//   const coins = get(coinsAtom);
-//   const settings = get(settingsAtom);
-//   return calculateCoinsSpentToday(coins.transactions, settings.system.timezone);
-// });
+// Derived atom for coins spent today
+export const coinsSpentTodayAtom = atom((get) => {
+  const coins = get(coinsAtom);
+  const settings = get(settingsAtom);
+  return calculateCoinsSpentToday(coins.transactions, settings.system.timezone);
+});

-// // Derived atom for transactions today
-// export const transactionsTodayAtom = atom((get) => {
-//   const coins = get(coinsAtom);
-//   const settings = get(settingsAtom);
-//   return calculateTransactionsToday(coins.transactions, settings.system.timezone);
-// });
+// Derived atom for transactions today
+export const transactionsTodayAtom = atom((get) => {
+  const coins = get(coinsAtom);
+  const settings = get(settingsAtom);
+  return calculateTransactionsToday(coins.transactions, settings.system.timezone);
+});

-// // Derived atom for current balance from all transactions
-// export const coinsBalanceAtom = atom((get) => {
-//   const coins = get(coinsAtom);
-//   return coins.transactions.reduce((sum, transaction) => sum + transaction.amount, 0);
-// });
+// Derived atom for current balance from all transactions
+export const coinsBalanceAtom = atom((get) => {
+  const coins = get(coinsAtom);
+  return coins.transactions.reduce((sum, transaction) => sum + transaction.amount, 0);
+});

 /* transient atoms */
 interface PomodoroAtom {
@@ -150,6 +144,15 @@ export const completedHabitsMapAtom = atom((get) => {
  return map;
 });

+// Derived atom for habit frequency map
+export const habitFreqMapAtom = atom((get) => {
+  const habits = get(habitsAtom).habits;
+  const map = new Map<string, Freq>();
+  habits.forEach(habit => {
+    map.set(habit.id, getHabitFreq(habit));
+  });
+  return map;
+});

 export const pomodoroTodayCompletionsAtom = atom((get) => {
  const pomo = get(pomodoroAtom)
--- a/lib/client-helpers.ts
+++ b/lib/client-helpers.ts
@@ -1,9 +1,8 @@
 // client helpers
 'use-client'

-import { useSession } from "next-auth/react"
-import { User, UserId } from './types'
 import { useAtom } from 'jotai'
+import { useSession } from "next-auth/react"
 import { usersAtom } from './atoms'
 import { checkPermission } from './utils'

@@ -14,7 +13,7 @@ export function useHelpers() {
  const currentUser = usersData.users.find((u) => u.id === currentUserId)
  // detect iOS: https://stackoverflow.com/a/9039885
  function iOS() {
-    return [
+    return typeof navigator !== "undefined" && ([
      'iPad Simulator',
      'iPhone Simulator',
      'iPod Simulator',
@@ -23,7 +22,7 @@ export function useHelpers() {
      'iPod',
    ].includes(navigator.platform)
    // iPad on iOS 13 detection
-    || (navigator.userAgent.includes("Mac") && "ontouchend" in document)
+    || (navigator.userAgent.includes("Mac") && "ontouchend" in document))
  }  

  return {
--- a/lib/types.ts
+++ b/lib/types.ts
@@ -181,8 +181,6 @@ export type CompletionCache = {
  }
 }

-export type ViewType = 'habits' | 'tasks'
-
 export interface JotaiHydrateInitialValues {
  settings: Settings;
  coins: CoinsData;
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "habittrove",
-  "version": "0.2.9",
+  "version": "0.2.11",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack",
@@ -44,6 +44,7 @@
    "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",
Author	SHA1	Message	Date
ManInDark	d9fa0426ce	fix: removed viewType from browser Settings Atom, converted to using path to identify pages	2025-05-18 02:03:54 +02:00
ManInDark	49a0ea8804	fix: refactored habit / task page	2025-05-18 01:34:28 +02:00
ManInDark	9bf24db477	fix: remove empty file	2025-05-18 01:16:39 +02:00
ManInDark	8530f703d9	fix: unified display of header	2025-05-18 01:16:17 +02:00
ManInDark	1a447e00bf	fix: adapted notes to reflect fork	2025-05-17 17:27:26 +02:00
ManInDark	ac116e8322	feat: highlight selected navigation item	2025-05-17 17:16:09 +02:00
ManInDark	8c7a7a63d0	fix: refactored code on wishlist page	2025-05-17 16:46:54 +02:00
ManInDark	7c7d0e2f32	fix: switched docker-compose.yaml image remote	2025-05-17 16:29:54 +02:00
ManInDark	e908f1edec	fix: resolved linting problems	2025-05-14 11:01:05 +02:00
ManInDark	8e6ddf0b9f	fix: removed other build workflows	2025-05-14 10:38:06 +02:00
ManInDark	c5a8f403ef	feat: added ghcr release workflow	2025-05-14 10:35:28 +02:00
ManInDark	33d36d0600	fix: refactored error display in add habit modal & disables button if invalid	2025-05-12 18:11:25 +02:00
ManInDark	942356eaed	fix: resolved navigator undefined error	2025-05-12 18:11:03 +02:00
ManInDark	e4a52657af	fix: refactored error display in add habit modal & disables button if invalid	2025-05-12 18:00:04 +02:00
ManInDark	dbd0d0c7b7	fix: added missing dependency lodash	2025-05-12 17:05:16 +02:00
Doh	95197e216c	Update README.md	2025-05-10 19:55:03 -04:00
Doh	660005d857	Show overdue tasks and improved context menu (#110 )	2025-05-10 15:51:39 -04:00
Doh	2408ed84bd	performance optimization via atoms (#108 )	2025-04-20 12:14:51 -04:00