fix infinite render

fix coin balance
fix modal and invalid frequency
2026-01-21 06:34:30 +01:00 · 2025-05-28 17:43:28 -04:00 · 2025-05-28 17:17:13 -04:00 · 2025-05-27 02:42:13 -04:00 · 2025-05-26 08:42:00 -04:00 · 2025-05-25 20:33:08 -04:00
68 changed files with 2297 additions and 742 deletions
--- a/.github/workflows/docker-publish.yml
+++ b/.github/workflows/docker-publish.yml
@@ -0,0 +1,95 @@
+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
+            dohsimpson/habittrove:latest
+
+  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
@@ -1,40 +0,0 @@
-name: Create and publish a Docker image to Github Container Registry
-
-on:
-  push:
-    tags:
-      - v*
-
-env:
-  REGISTRY: ghcr.io
-  IMAGE_NAME: ${{ github.repository }}
-
-jobs:
-  create-and-publish:
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      packages: write
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-      - name: Log in to the Container registry
-        uses: docker/login-action@v3
-        with:
-          registry: ${{ env.REGISTRY }}
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-      - name: Extract metadata (tags, labels) for Docker
-        id: meta
-        uses: docker/metadata-action@v5
-        with:
-          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-      - name: Build and push Docker image
-        uses: docker/build-push-action@v5
-        with:
-          context: .
-          push: true
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -0,0 +1,28 @@
+name: Unit Tests
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Bun
+        uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: latest
+
+      - name: Install dependencies
+        run: bun install
+
+      - name: Run lint
+        run: bun run lint
+
+      - name: Run unit tests
+        run: bun test
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,6 +0,0 @@
-{
-    "i18n-ally.localesPaths": [
-        "i18n",
-        "messages"
-    ]
-}
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,56 @@
 # Changelog

+## Version 0.2.20
+
+### Fixed
+
+* coin balance shows correct value for selected user in coin management view (#151)
+
+### Improved
+
+* refactor code to remove client-helpers hook
+
+## Version 0.2.19
+
+### Fixed
+
+* settings button not working
+* fixed delete dialog modal blocks page interaction (#149)
+* disable submit button when frequency is invaid
+
+## Version 0.2.18
+
+### Improved
+
+* nicer loading UI (#147)
+* header and navigation code refactor
+
+## Version 0.2.17
+
+### Fixed
+
+* fix emoji selector (#142)
+* fix about modal (#145)
+
+## Version 0.2.16
+
+### Improved
+
+* move delete user button to user form
+* disable deleting user on demo instance
+
+## Version 0.2.15
+
+### Improved
+
+* max coins set to 9999, to prevent js large number precision issue (#137)
+
+## Version 0.2.14
+
+### Added
+
+* support deleting user (#93)
+
 ## Version 0.2.13

 ### Fixed
--- a/README.md
+++ b/README.md
@@ -1,5 +1,7 @@
 # HabitTrove

+![cover](https://github.com/user-attachments/assets/b63e98b4-64ae-49c7-ae7e-21ef76c04a5a)
+
 HabitTrove is a gamified habit tracking application that helps you build and maintain positive habits by rewarding you with coins, which you can use to exchange for rewards.

 > **⚠️ Important:** HabitTrove is currently in beta. Please regularly backup your `data/` directory to prevent any potential data loss.
@@ -23,8 +25,11 @@ Want to try HabitTrove before installing? Visit the public [demo instance](https
 ## Usage

 1. **Creating Habits**: Click the "Add Habit" button to create a new habit. Set a name, description, and coin reward.
+
 2. **Tracking Habits**: Mark habits as complete on your dashboard. Each completion earns you the specified coins.
+
 3. **Wishlist**: Add rewards to your wishlist that you can redeem with earned coins.
+
 4. **Statistics**: View your progress through the heatmap and streak counters.

 ## Docker Deployment
@@ -61,7 +66,7 @@ docker run -d \
  -v ./data:/app/data \
  -v ./backups:/app/backups \ # Add this line to map the backups directory
  -e AUTH_SECRET=$AUTH_SECRET \
-  ghcr.io/manindark/habittrove
+  dohsimpson/habittrove
 ```

 Available image tags:
@@ -108,7 +113,7 @@ To contribute to HabitTrove, you'll need to set up a development environment. He
 1. Clone the repository and navigate to the project directory:

 ```bash
-git clone https://github.com/ManInDark/HabitTrove.git
+git clone https://github.com/dohsimpson/habittrove.git
 cd habittrove
 ```

@@ -161,7 +166,7 @@ Run these commands regularly during development to catch issues early.

 ## Contributing

-We welcome feature requests and bug reports! Please [open an issue](https://github.com/ManInDark/habittrove/issues/new).
+We welcome feature requests and bug reports! Please [open an issue](https://github.com/dohsimpson/habittrove/issues/new). We do not accept pull request at the moment.

 ## License

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

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

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

 type ResourceType = 'habit' | 'wishlist' | 'coins'
 type ActionType = 'write' | 'interact'
@@ -485,21 +489,80 @@ export async function updateUserPassword(userId: string, newPassword?: string):
 }

 export async function deleteUser(userId: string): Promise<void> {
-  const data = await loadUsersData()
-  const userIndex = data.users.findIndex(user => user.id === userId)
+  // Load all necessary data
+  const wishlistData = await loadData<WishlistData>('wishlist')
+  const habitsData = await loadData<HabitsData>('habits')
+  const coinsData = await loadData<CoinsData>('coins')
+  const authData = await loadUsersData()
+
+  // Process Wishlist Data
+  const updatedWishlistItems = wishlistData.items.reduce((acc, item) => {
+    if (item.userIds?.includes(userId)) {
+      if (item.userIds.length === 1) {
+        // Remove item if this is the only user
+        return acc
+      } else {
+        // Remove userId from item's userIds
+        acc.push({
+          ...item,
+          userIds: item.userIds.filter(id => id !== userId)
+        })
+      }
+    } else {
+      // Keep item as is
+      acc.push(item)
+    }
+    return acc
+  }, [] as WishlistItemType[])
+  wishlistData.items = updatedWishlistItems
+  await saveData('wishlist', wishlistData)
+
+  // Process Habits Data
+  const updatedHabits = habitsData.habits.reduce((acc, habit) => {
+    if (habit.userIds?.includes(userId)) {
+      if (habit.userIds.length === 1) {
+        // Remove habit if this is the only user
+        return acc
+      } else {
+        // Remove userId from habit's userIds
+        acc.push({
+          ...habit,
+          userIds: habit.userIds.filter(id => id !== userId)
+        })
+      }
+    } else {
+      // Keep habit as is
+      acc.push(habit)
+    }
+    return acc
+  }, [] as HabitsData['habits'])
+  habitsData.habits = updatedHabits
+  await saveData('habits', habitsData)
+
+  // Process Coins Data
+  coinsData.transactions = coinsData.transactions.filter(
+    transaction => transaction.userId !== userId
+  )
+  // Recalculate balance
+  coinsData.balance = coinsData.transactions.reduce(
+    (sum, transaction) => sum + transaction.amount,
+    0
+  )
+  await saveData('coins', coinsData)
+
+  // Delete User from Auth Data
+  const userIndex = authData.users.findIndex(user => user.id === userId)

  if (userIndex === -1) {
    throw new Error('User not found')
  }

-  const newData: UserData = {
-    users: [
-      ...data.users.slice(0, userIndex),
-      ...data.users.slice(userIndex + 1)
-    ]
-  }
+  authData.users = [
+    ...authData.users.slice(0, userIndex),
+    ...authData.users.slice(userIndex + 1)
+  ]

-  await saveUsersData(newData)
+  await saveUsersData(authData)
 }

 export async function updateLastNotificationReadTimestamp(userId: string, timestamp: string): Promise<void> {
--- a/app/api/user/delete/route.ts
+++ b/app/api/user/delete/route.ts
@@ -0,0 +1,50 @@
+import { NextResponse } from 'next/server'
+import { auth } from '@/auth'
+import { deleteUser } from '@/app/actions/data'
+import { getCurrentUser } from '@/lib/server-helpers'
+
+export async function POST(req: Request) {
+  try {
+    const session = await auth()
+    if (!session?.user?.id) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+
+    const currentUserId = session.user.id
+    const currentUser = await getCurrentUser()
+
+    if (!currentUser) {
+      // This case should ideally not happen if session.user.id exists,
+      // but as a safeguard:
+      return NextResponse.json({ error: 'Unauthorized: User not found in system' }, { status: 401 })
+    }
+
+    let userIdToDelete: string
+    try {
+      const body = await req.json()
+      userIdToDelete = body.userId
+    } catch (error) {
+      return NextResponse.json({ error: 'Invalid request body: Could not parse JSON.' }, { status: 400 })
+    }
+    
+
+    if (!userIdToDelete) {
+      return NextResponse.json({ error: 'Bad Request: userId is required' }, { status: 400 })
+    }
+
+    // Security Check: Users can only delete their own account unless they are an admin.
+    if (!currentUser.isAdmin && userIdToDelete !== currentUserId) {
+      return NextResponse.json({ error: 'Forbidden: You do not have permission to delete this user.' }, { status: 403 })
+    }
+
+    await deleteUser(userIdToDelete)
+
+    return NextResponse.json({ message: 'User deleted successfully' }, { status: 200 })
+  } catch (error) {
+    console.error('Error deleting user:', error)
+    if (error instanceof Error && error.message === 'User not found') {
+      return NextResponse.json({ error: 'User not found' }, { status: 404 })
+    }
+    return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 })
+  }
+}
--- a/app/calendar/page.tsx
+++ b/app/calendar/page.tsx
@@ -1,8 +1,14 @@
+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">
+    <div className="flex flex-col gap-4">
+      <div className="flex justify-end">
+        {/* <ViewToggle /> */}
+      </div>
      <HabitCalendar />
    </div>
  )
--- a/app/coins/page.tsx
+++ b/app/coins/page.tsx
@@ -1,3 +1,4 @@
+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,5 +1,6 @@
 'use client'

+import { useHabits } from "@/hooks/useHabits";
 import { habitsAtom, settingsAtom } from "@/lib/atoms";
 import { Habit } from "@/lib/types";
 import { useAtom } from "jotai";
--- a/app/habits/page.tsx
+++ b/app/habits/page.tsx
@@ -1,9 +1,14 @@
+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">
-      <HabitList isTasksView={false} />
+    <div className="flex flex-col gap-4">
+      <div className="flex justify-end">
+        {/* <ViewToggle /> */}
+      </div>
+      <HabitList />
    </div>
  )
 }
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,15 +1,18 @@
-import { JotaiHydrate } from '@/components/jotai-hydrate'
-import { JotaiProvider } from '@/components/jotai-providers'
-import Layout from '@/components/Layout'
-import { ThemeProvider } from "@/components/theme-provider"
-import { Toaster } from '@/components/ui/toaster'
-import { SessionProvider } from 'next-auth/react'
-import { DM_Sans } from 'next/font/google'
-import { Suspense } from 'react'
-import { loadCoinsData, loadHabitsData, loadServerSettings, loadSettings, loadUsersData, loadWishlistData } from './actions/data'
 import './globals.css'
+import { Inter } from 'next/font/google'
+import { DM_Sans } from 'next/font/google'
+import { JotaiProvider } from '@/components/jotai-providers'
+import { JotaiHydrate } from '@/components/jotai-hydrate'
+import { loadSettings, loadHabitsData, loadCoinsData, loadWishlistData, loadUsersData, loadServerSettings } from './actions/data'
+import Layout from '@/components/Layout'
+import { Toaster } from '@/components/ui/toaster'
+import { ThemeProvider } from "@/components/theme-provider"
+import { SessionProvider } from 'next-auth/react'
 import { NextIntlClientProvider } from 'next-intl';
 import { getLocale, getMessages } from 'next-intl/server';
+import { Suspense } from 'react'
+import LoadingSpinner from '@/components/LoadingSpinner'
+

 // Inter (clean, modern, excellent readability)
 // const inter = Inter({
@@ -73,7 +76,7 @@ export default async function RootLayout({
          }}
        />
        <JotaiProvider>
-          <Suspense fallback="loading">
+          <Suspense fallback={<LoadingSpinner />}>
            <JotaiHydrate
              initialValues={{
                settings: initialSettings,
--- a/app/settings/page.tsx
+++ b/app/settings/page.tsx
@@ -1,33 +1,44 @@
 'use client'

-import { DynamicTimeNoSSR } from '@/components/DynamicTimeNoSSR';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Label } from '@/components/ui/label';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Switch } from '@/components/ui/switch';
+import { Label } from '@/components/ui/label';
 import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { toast } from '@/hooks/use-toast';
-import { serverSettingsAtom, settingsAtom } from '@/lib/atoms';
-import { Settings, WeekDay } from '@/lib/types';
+import { DynamicTimeNoSSR } from '@/components/DynamicTimeNoSSR';
 import { useAtom } from 'jotai';
-import { Info } from 'lucide-react'; // Import Info icon
 import { useTranslations } from 'next-intl';
-import { saveSettings } from '../actions/data';
+import { settingsAtom, serverSettingsAtom } 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 { toast } from '@/hooks/use-toast'
+import { useSession } from 'next-auth/react'; // signOut removed
+import { useRouter } from 'next/navigation';
+// AlertDialog components and useState removed
+// Trash2 icon removed

 export default function SettingsPage() {
  const t = useTranslations('SettingsPage');
+  // tWarning removed
  const [settings, setSettings] = useAtom(settingsAtom);
  const [serverSettings] = useAtom(serverSettingsAtom);
+  const { data: session } = useSession();
+  const router = useRouter();
+  // showConfirmDialog and isDeleting states removed

  const updateSettings = async (newSettings: Settings) => {
    await saveSettings(newSettings)
    setSettings(newSettings)
  }

+  // handleDeleteAccount function removed

  if (!settings) return null

@@ -228,6 +239,8 @@ export default function SettingsPage() {

          </CardContent>
        </Card>
+
+        {/* Danger Zone Card Removed */}
      </div >
    </>
  )
--- a/app/tasks/page.tsx
+++ b/app/tasks/page.tsx
@@ -1,10 +0,0 @@
-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,3 +1,4 @@
+import Layout from '@/components/Layout'
 import WishlistManager from '@/components/WishlistManager'

 export default function WishlistPage() {
--- a/components/AboutModal.tsx
+++ b/components/AboutModal.tsx
@@ -11,17 +11,16 @@ import ChangelogModal from "./ChangelogModal"
 import { useState } from "react"

 interface AboutModalProps {
-  isOpen: boolean
  onClose: () => void
 }

-export default function AboutModal({ isOpen, onClose }: AboutModalProps) {
+export default function AboutModal({ onClose }: AboutModalProps) {
  const t = useTranslations('AboutModal')
  const version = packageJson.version
  const [changelogOpen, setChangelogOpen] = useState(false)

  return (
-    <Dialog open={isOpen} onOpenChange={onClose}>
+    <Dialog open={true} onOpenChange={onClose}>
      <DialogContent className="max-w-sm">
        <DialogHeader>
          <DialogTitle aria-label={t('dialogArisLabel')}></DialogTitle>
@@ -58,13 +57,11 @@ export default function AboutModal({ isOpen, onClose }: AboutModalProps) {
              >
                @dohsimpson
              </a>
-              <br/>
-              Fork by <a href="https://github.com/ManInDark" target="_blank" rel="noopener noreferrer" className="font-medium hover:underline">@ManInDark</a>
            </div>

            <div className="flex justify-center">
              <a
-                href="https://github.com/ManInDark/HabitTrove"
+                href="https://github.com/dohsimpson/habittrove"
                target="_blank"
                rel="noopener noreferrer"
              >
--- a/components/AddEditHabitModal.tsx
+++ b/components/AddEditHabitModal.tsx
@@ -1,25 +1,24 @@
 'use client'

-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { useState } from 'react'
+import { RRule, RRuleSet, rrulestr } from 'rrule'
+import { useAtom } from 'jotai'
+import { useTranslations } from 'next-intl'
+import { settingsAtom, browserSettingsAtom, usersAtom, currentUserAtom } from '@/lib/atoms'
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'
 import { Button } from '@/components/ui/button'
-import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
 import { Textarea } from '@/components/ui/textarea'
-import { settingsAtom, usersAtom } from '@/lib/atoms'
-import { useHelpers } from '@/lib/client-helpers'
-import { INITIAL_DUE, INITIAL_RECURRENCE_RULE, QUICK_DATES } from '@/lib/constants'
-import { Habit } from '@/lib/types'
-import { convertHumanReadableFrequencyToMachineReadable, convertMachineReadableFrequencyToHumanReadable, d2t, serializeRRule } from '@/lib/utils'
-import data from '@emoji-mart/data'
-import Picker from '@emoji-mart/react'
-import { useAtom } from 'jotai'
-import { SmilePlus, Zap } from 'lucide-react'
+import { Zap } from 'lucide-react'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { Habit, SafeUser } from '@/lib/types'
+import EmojiPickerButton from './EmojiPickerButton'
+import { convertHumanReadableFrequencyToMachineReadable, convertMachineReadableFrequencyToHumanReadable, d2s, d2t, serializeRRule } from '@/lib/utils'
+import { INITIAL_DUE, INITIAL_RECURRENCE_RULE, QUICK_DATES, RECURRENCE_RULE_MAP, MAX_COIN_LIMIT } from '@/lib/constants'
 import { DateTime } from 'luxon'
-import { useTranslations } from 'next-intl'
-import { useState } from 'react'
-import { RRule } from 'rrule'
+

 interface AddEditHabitModalProps {
  onClose: () => void
@@ -37,14 +36,15 @@ export default function AddEditHabitModal({ onClose, onSave, habit, isTask }: Ad
  const [targetCompletions, setTargetCompletions] = useState(habit?.targetCompletions || 1)
  const isRecurRule = !isTask
  // Initialize ruleText with the actual frequency string or default, not the display text
-  const initialRuleText = habit?.frequency ? convertMachineReadableFrequencyToHumanReadable({ 
+  const initialRuleText = habit?.frequency ? convertMachineReadableFrequencyToHumanReadable({
    frequency: habit.frequency,
-    isRecurRule, 
+    isRecurRule,
    timezone: settings.system.timezone
  }) : (isRecurRule ? INITIAL_RECURRENCE_RULE : INITIAL_DUE);
  const [ruleText, setRuleText] = useState<string>(initialRuleText)
-  const { currentUser } = useHelpers()
+  const [currentUser] = useAtom(currentUserAtom)
  const [isQuickDatesOpen, setIsQuickDatesOpen] = useState(false)
+  const [errorMessage, setErrorMessage] = 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
@@ -86,8 +86,6 @@ export default function AddEditHabitModal({ onClose, onSave, habit, isTask }: Ad
    })
  }

-  const { result, message: errorMessage } = convertHumanReadableFrequencyToMachineReadable({ text: ruleText, timezone: settings.system.timezone, isRecurring: isRecurRule });
-
  return (
    <Dialog open={true} onOpenChange={onClose}>
      <DialogContent>
@@ -111,33 +109,15 @@ export default function AddEditHabitModal({ onClose, onSave, habit, isTask }: Ad
                  onChange={(e) => setName(e.target.value)}
                  required
                />
-                <Popover>
-                  <PopoverTrigger asChild>
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      size="icon"
-                      className="h-8 w-8"
-                    >
-                      <SmilePlus className="h-8 w-8" />
-                    </Button>
-                  </PopoverTrigger>
-                  <PopoverContent className="w-[300px] p-0">
-                    <Picker
-                      data={data}
-                      onEmojiSelect={(emoji: { native: string }) => {
-                        setName(prev => {
-                          // Add space before emoji if there isn't one already
-                          const space = prev.length > 0 && !prev.endsWith(' ') ? ' ' : '';
-                          return `${prev}${space}${emoji.native}`;
-                        })
-                        // Focus back on input after selection
-                        const input = document.getElementById('name') as HTMLInputElement
-                        input?.focus()
-                      }}
-                    />
-                  </PopoverContent>
-                </Popover>
+                <EmojiPickerButton
+                  inputIdToFocus="name"
+                  onEmojiSelect={(emoji) => {
+                    setName(prev => {
+                      const space = prev.length > 0 && !prev.endsWith(' ') ? ' ' : '';
+                      return `${prev}${space}${emoji}`;
+                    })
+                  }}
+                />
              </div>
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
@@ -201,9 +181,25 @@ export default function AddEditHabitModal({ onClose, onSave, habit, isTask }: Ad
              </div>
              {/* rrule input (habit) */}
              <div className="col-start-2 col-span-3 text-sm">
-                <span className={errorMessage ? 'text-destructive' : 'text-muted-foreground'}>
-                  {errorMessage ? errorMessage : convertMachineReadableFrequencyToHumanReadable({ frequency: result, isRecurRule, timezone: settings.system.timezone })}
-                </span>
+                {(() => {
+                  let displayText = '';
+                  const { result, message } = convertHumanReadableFrequencyToMachineReadable({ text: ruleText, timezone: settings.system.timezone, isRecurring: isRecurRule });
+                  if (message !== errorMessage) { // Only update if it changed to avoid re-renders
+                    setErrorMessage(message);
+                  }
+                  displayText = convertMachineReadableFrequencyToHumanReadable({ frequency: result, isRecurRule, timezone: settings.system.timezone })
+
+                  return (
+                    <>
+                      <span className={errorMessage ? 'text-destructive' : 'text-muted-foreground'}>
+                        {displayText}
+                      </span>
+                      {errorMessage && (
+                        <p className="text-destructive text-xs mt-1">{errorMessage}</p>
+                      )}
+                    </>
+                  );
+                })()}
              </div>
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
@@ -268,14 +264,18 @@ export default function AddEditHabitModal({ onClose, onSave, habit, isTask }: Ad
                      id="coinReward"
                      type="number"
                      value={coinReward}
-                      onChange={(e) => setCoinReward(parseInt(e.target.value === "" ? "0" : e.target.value))}
+                      onChange={(e) => {
+                        const value = parseInt(e.target.value === "" ? "0" : e.target.value)
+                        setCoinReward(Math.min(value, MAX_COIN_LIMIT))
+                      }}
                      min={0}
+                      max={MAX_COIN_LIMIT}
                      required
                      className="w-20 text-center border-0 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
                    />
                    <button
                      type="button"
-                      onClick={() => setCoinReward(prev => prev + 1)}
+                      onClick={() => setCoinReward(prev => Math.min(prev + 1, MAX_COIN_LIMIT))}
                      className="px-3 py-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors"
                    >
                      +
@@ -321,7 +321,7 @@ export default function AddEditHabitModal({ onClose, onSave, habit, isTask }: Ad
            )}
          </div>
          <DialogFooter>
-            <Button type="submit">
+            <Button type="submit" disabled={!!errorMessage}>
              {habit
                ? t('saveChangesButton')
                : t(isTask ? 'addTaskButton' : 'addHabitButton')}
--- a/components/AddEditWishlistItemModal.tsx
+++ b/components/AddEditWishlistItemModal.tsx
@@ -1,20 +1,16 @@
-
+import { useState, useEffect } from 'react'
+import { useAtom } from 'jotai'
+import { useTranslations } from 'next-intl'
+import { usersAtom, currentUserAtom } from '@/lib/atoms'
+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 { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
 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 { useAtom } from 'jotai'
-import { SmilePlus } from 'lucide-react'
-import { useTranslations } from 'next-intl'
-import { useEffect, useState } from 'react'
-import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar'
+import EmojiPickerButton from './EmojiPickerButton'
+import { MAX_COIN_LIMIT } from '@/lib/constants'

 interface AddEditWishlistItemModalProps {
  isOpen: boolean
@@ -39,7 +35,7 @@ export default function AddEditWishlistItemModal({
  const [coinCost, setCoinCost] = useState(editingItem?.coinCost || 1)
  const [targetCompletions, setTargetCompletions] = useState<number | undefined>(editingItem?.targetCompletions)
  const [link, setLink] = useState(editingItem?.link || '')
-  const { currentUser } = useHelpers()
+  const [currentUser] = useAtom(currentUserAtom)
  const [selectedUserIds, setSelectedUserIds] = useState<string[]>((editingItem?.userIds || []).filter(id => id !== currentUser?.id))
  const [errors, setErrors] = useState<{ [key: string]: string }>({})
  const [usersData] = useAtom(usersAtom)
@@ -68,6 +64,8 @@ export default function AddEditWishlistItemModal({
    }
    if (coinCost < 1) {
      newErrors.coinCost = t('errorCoinCostMin')
+    } else if (coinCost > MAX_COIN_LIMIT) {
+      newErrors.coinCost = t('errorCoinCostMax', { max: MAX_COIN_LIMIT })
    }
    if (targetCompletions !== undefined && targetCompletions < 1) {
      newErrors.targetCompletions = t('errorTargetCompletionsMin')
@@ -111,7 +109,7 @@ export default function AddEditWishlistItemModal({
    } else {
      addWishlistItem(itemData)
    }
-    
+
    setIsOpen(false)
    setEditingItem(null)
  }
@@ -136,29 +134,15 @@ export default function AddEditWishlistItemModal({
                  className="flex-1"
                  required
                />
-                <Popover>
-                  <PopoverTrigger asChild>
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      size="icon"
-                      className="h-8 w-8"
-                    >
-                      <SmilePlus className="h-4 w-4" />
-                    </Button>
-                  </PopoverTrigger>
-                  <PopoverContent className="w-[300px] p-0">
-                    <Picker
-                      data={data}
-                      onEmojiSelect={(emoji: { native: string }) => {
-                        setName(prev => `${prev}${emoji.native}`)
-                        // Focus back on input after selection
-                        const input = document.getElementById('name') as HTMLInputElement
-                        input?.focus()
-                      }}
-                    />
-                  </PopoverContent>
-                </Popover>
+                <EmojiPickerButton
+                  inputIdToFocus="name"
+                  onEmojiSelect={(emoji) => {
+                    setName(prev => {
+                      const space = prev.length > 0 && !prev.endsWith(' ') ? ' ' : '';
+                      return `${prev}${space}${emoji}`;
+                    })
+                  }}
+                />
              </div>
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
@@ -192,14 +176,18 @@ export default function AddEditWishlistItemModal({
                      id="coinReward"
                      type="number"
                      value={coinCost}
-                      onChange={(e) => setCoinCost(parseInt(e.target.value === "" ? "0" : e.target.value))}
+                      onChange={(e) => {
+                        const value = parseInt(e.target.value === "" ? "0" : e.target.value)
+                        setCoinCost(Math.min(value, MAX_COIN_LIMIT))
+                      }}
                      min={0}
+                      max={MAX_COIN_LIMIT}
                      required
                      className="w-20 text-center border-0 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
                    />
                    <button
                      type="button"
-                      onClick={() => setCoinCost(prev => prev + 1)}
+                      onClick={() => setCoinCost(prev => Math.min(prev + 1, MAX_COIN_LIMIT))}
                      className="px-3 py-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors"
                    >
                      +
@@ -289,13 +277,13 @@ export default function AddEditWishlistItemModal({
                      <Avatar
                        key={user.id}
                        className={`h-8 w-8 border-2 cursor-pointer
-                          ${selectedUserIds.includes(user.id) 
-                            ? 'border-primary' 
+                          ${selectedUserIds.includes(user.id)
+                            ? 'border-primary'
                            : 'border-muted'
                          }`}
                        title={user.username}
                        onClick={() => {
-                          setSelectedUserIds(prev => 
+                          setSelectedUserIds(prev =>
                            prev.includes(user.id)
                              ? prev.filter(id => id !== user.id)
                              : [...prev, user.id]
--- a/components/ClientWrapper.tsx
+++ b/components/ClientWrapper.tsx
@@ -1,17 +1,27 @@
 'use client'

-import { ReactNode, useEffect } from 'react'
-import { useAtom } from 'jotai'
-import { pomodoroAtom, userSelectAtom } from '@/lib/atoms'
+import { ReactNode, Suspense, useEffect, useState } from 'react'
+import { useAtom, useSetAtom } from 'jotai' // Import useSetAtom
+import { aboutOpenAtom, pomodoroAtom, userSelectAtom, currentUserIdAtom } from '@/lib/atoms' // Import currentUserIdAtom
 import PomodoroTimer from './PomodoroTimer'
 import UserSelectModal from './UserSelectModal'
 import { useSession } from 'next-auth/react'
+import AboutModal from './AboutModal'
+import LoadingSpinner from './LoadingSpinner'

 export default function ClientWrapper({ children }: { children: ReactNode }) {
  const [pomo] = useAtom(pomodoroAtom)
  const [userSelect, setUserSelect] = useAtom(userSelectAtom)
+  const [aboutOpen, setAboutOpen] = useAtom(aboutOpenAtom)
+  const setCurrentUserIdAtom = useSetAtom(currentUserIdAtom)
  const { data: session, status } = useSession()
  const currentUserId = session?.user.id
+  const [isMounted, setIsMounted] = useState(false);
+
+  // block client-side hydration until mounted (this is crucial to wait for all jotai atoms to load), to prevent SSR hydration errors in the children components
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);

  useEffect(() => {
    if (status === 'loading') return
@@ -20,6 +30,13 @@ export default function ClientWrapper({ children }: { children: ReactNode }) {
    }
  }, [currentUserId, status, userSelect, setUserSelect])

+  useEffect(() => {
+    setCurrentUserIdAtom(currentUserId)
+  }, [currentUserId, setCurrentUserIdAtom])
+
+  if (!isMounted) {
+    return <LoadingSpinner />
+  }
  return (
    <>
      {children}
@@ -27,7 +44,10 @@ export default function ClientWrapper({ children }: { children: ReactNode }) {
        <PomodoroTimer />
      )}
      {userSelect && (
-        <UserSelectModal onClose={() => setUserSelect(false)}/>
+        <UserSelectModal onClose={() => setUserSelect(false)} />
+      )}
+      {aboutOpen && (
+        <AboutModal onClose={() => setAboutOpen(false)} />
      )}
    </>
  )
--- a/components/CoinBalance.test.tsx
+++ b/components/CoinBalance.test.tsx
--- a/components/CoinsManager.tsx
+++ b/components/CoinsManager.tsx
@@ -1,27 +1,27 @@
 'use client'

-import { FormattedNumber } from '@/components/FormattedNumber'
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { useState, useEffect, useRef } from 'react' // Import useEffect, useRef
+import { useSearchParams } from 'next/navigation' // Import useSearchParams
+import { t2d, d2s, getNow, isSameDate } from '@/lib/utils'
 import { Button } from '@/components/ui/button'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import { Input } from '@/components/ui/input'
-import { useCoins } from '@/hooks/useCoins'
-import { settingsAtom, usersAtom } from '@/lib/atoms'
-import { useHelpers } from '@/lib/client-helpers'
-import { TransactionType } from '@/lib/types'
-import { d2s, t2d } from '@/lib/utils'
-import { useAtom } from 'jotai'
-import { History } from 'lucide-react'
-import { useTranslations } from 'next-intl'
-import Link from 'next/link'
-import { useSearchParams } from 'next/navigation'; // Import useSearchParams
-import { useEffect, useRef, useState } from 'react'; // Import useEffect, useRef
+import { FormattedNumber } from '@/components/FormattedNumber'
+import { History, Pencil } from 'lucide-react'
+import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'
 import EmptyState from './EmptyState'
+import { Input } from '@/components/ui/input'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { settingsAtom, usersAtom, currentUserAtom } from '@/lib/atoms'
+import Link from 'next/link'
+import { useAtom } from 'jotai'
+import { useTranslations } from 'next-intl'
+import { useCoins } from '@/hooks/useCoins'
+import { MAX_COIN_LIMIT } from '@/lib/constants'
 import { TransactionNoteEditor } from './TransactionNoteEditor'
+import { TransactionType } from '@/lib/types'

 export default function CoinsManager() {
  const t = useTranslations('CoinsManager')
-  const { currentUser } = useHelpers()
+  const [currentUser] = useAtom(currentUserAtom)
  const [selectedUser, setSelectedUser] = useState<string>()
  const {
    add,
@@ -46,7 +46,6 @@ export default function CoinsManager() {
  const highlightId = searchParams.get('highlight')
  const userIdFromQuery = searchParams.get('user') // Get user ID from query
  const transactionRefs = useRef<Record<string, HTMLDivElement | null>>({});
-  const PAGE_ENTRY_COUNTS = [10, 50, 100, 500];

  // Effect to set selected user from query param if admin
  useEffect(() => {
@@ -57,7 +56,7 @@ export default function CoinsManager() {
      }
    }
    // Only run when userIdFromQuery or currentUser changes, avoid re-running on selectedUser change within this effect
-  }, [userIdFromQuery, currentUser, usersData.users, selectedUser]);
+  }, [userIdFromQuery, currentUser, usersData.users]);

  // Effect to scroll to highlighted transaction
  useEffect(() => {
@@ -107,7 +106,7 @@ export default function CoinsManager() {
        <h1 className="text-xl xs:text-3xl font-bold mr-6">{t('title')}</h1>
        {currentUser?.isAdmin && (
          <select
-            className="border rounded p-2"
+            className="w-[110px] xs:w-[200px] rounded-md border border-input bg-background px-3 py-2"
            value={selectedUser}
            onChange={(e) => setSelectedUser(e.target.value)}
          >
@@ -139,7 +138,11 @@ export default function CoinsManager() {
                    variant="outline"
                    size="icon"
                    className="h-10 w-10 text-lg"
-                    onClick={() => setAmount(prev => (Number(prev) - 1).toString())}
+                    onClick={() => setAmount(prev => {
+                      const current = Number(prev);
+                      const next = current - 1;
+                      return (Math.abs(next) > MAX_COIN_LIMIT ? (next < 0 ? -MAX_COIN_LIMIT : MAX_COIN_LIMIT) : next).toString();
+                    })}
                  >
                    -
                  </Button>
@@ -147,7 +150,22 @@ export default function CoinsManager() {
                    <Input
                      type="number"
                      value={amount}
-                      onChange={(e) => setAmount(e.target.value)}
+                      onChange={(e) => {
+                        const rawValue = e.target.value;
+                        if (rawValue === '' || rawValue === '-') {
+                          setAmount(rawValue);
+                          return;
+                        }
+                        let numericValue = Number(rawValue); // Changed const to let
+                        if (isNaN(numericValue)) return; // Or handle error
+
+                        if (Math.abs(numericValue) > MAX_COIN_LIMIT) {
+                          numericValue = numericValue < 0 ? -MAX_COIN_LIMIT : MAX_COIN_LIMIT;
+                        }
+                        setAmount(numericValue.toString());
+                      }}
+                      min={-MAX_COIN_LIMIT}
+                      max={MAX_COIN_LIMIT}
                      className="text-center text-xl font-medium h-12"
                    />
                    <div className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground">
@@ -158,7 +176,11 @@ export default function CoinsManager() {
                    variant="outline"
                    size="icon"
                    className="h-10 w-10 text-lg"
-                    onClick={() => setAmount(prev => (Number(prev) + 1).toString())}
+                    onClick={() => setAmount(prev => {
+                      const current = Number(prev);
+                      const next = current + 1;
+                      return (Math.abs(next) > MAX_COIN_LIMIT ? (next < 0 ? -MAX_COIN_LIMIT : MAX_COIN_LIMIT) : next).toString();
+                    })}
                  >
                    +
                  </Button>
@@ -252,7 +274,9 @@ export default function CoinsManager() {
                      setCurrentPage(1) // Reset to first page when changing page size
                    }}
                  >
-                    {PAGE_ENTRY_COUNTS.map(n => <option key={n} value={n}>{n}</option>)}
+                    <option value={50}>50</option>
+                    <option value={100}>100</option>
+                    <option value={500}>500</option>
                  </select>
                  <span className="text-sm text-muted-foreground">{t('entriesSuffix')}</span>
                </div>
@@ -288,7 +312,6 @@ export default function CoinsManager() {
                      }

                      const isHighlighted = transaction.id === highlightId;
-                      const transactionUser = usersData.users.find(u => u.id === transaction.userId);
                      return (
                        <div
                          key={transaction.id}
@@ -317,12 +340,12 @@ export default function CoinsManager() {
                              {transaction.userId && currentUser?.isAdmin && (
                                <Avatar className="h-6 w-6">
                                  <AvatarImage
-                                    src={transactionUser?.avatarPath ?
-                                      `/api/avatars/${transactionUser?.avatarPath?.split('/').pop()}` : undefined}
-                                    alt={transactionUser?.username}
+                                    src={usersData.users.find(u => u.id === transaction.userId)?.avatarPath ?
+                                      `/api/avatars/${usersData.users.find(u => u.id === transaction.userId)?.avatarPath?.split('/').pop()}` : undefined}
+                                    alt={usersData.users.find(u => u.id === transaction.userId)?.username}
                                  />
                                  <AvatarFallback>
-                                    {transactionUser?.username?.[0] || '?'}
+                                    {usersData.users.find(u => u.id === transaction.userId)?.username?.[0] || '?'}
                                  </AvatarFallback>
                                </Avatar>
                              )}
--- a/components/CompletionCountBadge.tsx
+++ b/components/CompletionCountBadge.tsx
@@ -1,7 +1,9 @@
 import { Badge } from "@/components/ui/badge"
-import { completedHabitsMapAtom, habitsByDateFamily, settingsAtom } from '@/lib/atoms'
-import { getTodayInTimezone } from '@/lib/utils'
 import { useAtom } from 'jotai'
+import { completedHabitsMapAtom, habitsAtom, habitsByDateFamily } from '@/lib/atoms'
+import { getTodayInTimezone } from '@/lib/utils'
+// import { useHabits } from '@/hooks/useHabits' // Not used
+import { settingsAtom } from '@/lib/atoms'
 import { useTranslations } from 'next-intl'

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

 interface UpcomingItemsProps {
  habits: Habit[]
@@ -222,6 +226,12 @@ const ItemSection = ({
                          <Link
                            href={`/habits?highlight=${habit.id}`}
                            className="flex items-center gap-1 hover:text-primary transition-colors"
+                            onClick={() => {
+                              const newViewType = isTask ? 'tasks' : 'habits';
+                              if (browserSettings.viewType !== newViewType) {
+                                setBrowserSettings(prev => ({ ...prev, viewType: newViewType }));
+                              }
+                            }}
                          >
                            {isTask && isTaskOverdue(habit, settings.system.timezone) && !isCompleted && (
                              <TooltipProvider>
@@ -310,6 +320,12 @@ const ItemSection = ({
        <Link
          href={viewLink}
          className="text-sm text-muted-foreground hover:text-primary flex items-center gap-1"
+          onClick={() => {
+            const newViewType = isTask ? 'tasks' : 'habits';
+            if (browserSettings.viewType !== newViewType) {
+              setBrowserSettings(prev => ({ ...prev, viewType: newViewType }));
+            }
+          }}
        >
          View
          <ArrowRight className="h-3 w-3" />
--- a/components/Dashboard.tsx
+++ b/components/Dashboard.tsx
@@ -1,17 +1,19 @@
 'use client'

-import { useCoins } from '@/hooks/useCoins'
-import { habitsAtom, wishlistAtom } from '@/lib/atoms'
 import { useAtom } from 'jotai'
-import { useTranslations } from 'next-intl'
-import CoinBalance from './CoinBalance'
+import { wishlistAtom, habitsAtom, settingsAtom } from '@/lib/atoms'
 import DailyOverview from './DailyOverview'
 import HabitStreak from './HabitStreak'
+import CoinBalance from './CoinBalance'
+// import { useHabits } from '@/hooks/useHabits' // useHabits is not used
+import { useCoins } from '@/hooks/useCoins'
+import { useTranslations } from 'next-intl';

 export default function Dashboard() {
  const t = useTranslations('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/DesktopNavDisplay.tsx
+++ b/components/DesktopNavDisplay.tsx
@@ -0,0 +1,42 @@
+import Link from 'next/link'
+import type { ElementType } from 'react'
+
+export interface NavItemType {
+  icon: ElementType;
+  label: string;
+  href: string;
+  position: 'main' | 'bottom';
+}
+
+interface DesktopNavDisplayProps {
+  navItems: NavItemType[];
+  className?: string;
+}
+
+export default function DesktopNavDisplay({ navItems, className }: DesktopNavDisplayProps) {
+  // Filter for items relevant to desktop view, typically 'main' position
+  const desktopNavItems = navItems.filter(item => item.position === 'main');
+
+  return (
+    <div className={`hidden lg:flex lg:flex-shrink-0 ${className || ''}`}>
+      <div className="flex flex-col w-64">
+        <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">
+              {desktopNavItems.map((item) => (
+                <Link
+                  key={item.label} // Assuming labels are unique
+                  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"
+                >
+                  <item.icon className="mr-4 flex-shrink-0 h-6 w-6 text-gray-400" aria-hidden="true" />
+                  {item.label}
+                </Link>
+              ))}
+            </nav>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/components/EmojiPickerButton.tsx
+++ b/components/EmojiPickerButton.tsx
@@ -0,0 +1,51 @@
+'use client'
+
+import { useState } from 'react'
+import { Button } from '@/components/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { SmilePlus } from 'lucide-react'
+import data from '@emoji-mart/data'
+import Picker from '@emoji-mart/react'
+
+interface EmojiPickerButtonProps {
+  onEmojiSelect: (emoji: string) => void
+  inputIdToFocus?: string // Optional: ID of the input to focus after selection
+}
+
+export default function EmojiPickerButton({ onEmojiSelect, inputIdToFocus }: EmojiPickerButtonProps) {
+  const [isEmojiPickerOpen, setIsEmojiPickerOpen] = useState(false)
+
+  return (
+    <Popover modal={true} open={isEmojiPickerOpen} onOpenChange={setIsEmojiPickerOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="h-8 w-8" // Consistent sizing
+        >
+          <SmilePlus className="h-4 w-4" /> {/* Consistent icon size */}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        className="w-[300px] p-0"
+        onCloseAutoFocus={(event) => {
+          if (inputIdToFocus) {
+            event.preventDefault();
+            const input = document.getElementById(inputIdToFocus) as HTMLInputElement;
+            input?.focus();
+          }
+        }}
+      >
+        <Picker
+          data={data}
+          onEmojiSelect={(emoji: { native: string }) => {
+            onEmojiSelect(emoji.native);
+            setIsEmojiPickerOpen(false);
+            // Focus is handled by onCloseAutoFocus
+          }}
+        />
+      </PopoverContent>
+    </Popover>
+  )
+}
--- a/components/HabitCalendar.tsx
+++ b/components/HabitCalendar.tsx
@@ -1,18 +1,19 @@
 'use client'

-import CompletionCountBadge from '@/components/CompletionCountBadge'
+import { useState, useMemo, useCallback } from 'react'
 import { Calendar } from '@/components/ui/calendar'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import { useHabits } from '@/hooks/useHabits'
-import { completedHabitsMapAtom, habitsAtom, hasTasksAtom, settingsAtom } from '@/lib/atoms'
-import { Habit } from '@/lib/types'
-import { d2s, getCompletionsForDate, getISODate, getNow, isHabitDue } from '@/lib/utils'
+import CompletionCountBadge from '@/components/CompletionCountBadge'
+import { Button } from '@/components/ui/button'
+import { Check, Circle, CircleCheck } from 'lucide-react'
+import { d2s, getNow, t2d, isHabitDue, getISODate, getCompletionsForDate } from '@/lib/utils'
 import { useAtom } from 'jotai'
-import { Circle, CircleCheck } from 'lucide-react'
-import { DateTime } from 'luxon'
 import { useTranslations } from 'next-intl'
-import { useCallback, useMemo, useState } from 'react'
+import { useHabits } from '@/hooks/useHabits'
+import { habitsAtom, settingsAtom, completedHabitsMapAtom, hasTasksAtom } from '@/lib/atoms'
+import { DateTime } from 'luxon'
 import Linkify from './linkify'
+import { Habit } from '@/lib/types'

 export default function HabitCalendar() {
  const t = useTranslations('HabitCalendar')
@@ -43,7 +44,7 @@ export default function HabitCalendar() {

  return (
    <div>
-      <h1 className="text-xl xs:text-3xl font-bold mb-6">{t('title')}</h1>
+      <h1 className="text-xl xs:text-3xl font-semibold mb-6">{t('title')}</h1>
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <Card>
          <CardHeader>
--- a/components/HabitContextMenuItems.tsx
+++ b/components/HabitContextMenuItems.tsx
@@ -1,12 +1,11 @@
-import { Habit } from '@/lib/types';
+import { Habit, User } 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 { pomodoroAtom, settingsAtom, currentUserAtom } from '@/lib/atoms';
+import { d2t, getNow, isHabitDueToday, hasPermission } 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
 import { useTranslations } from 'next-intl';

 interface HabitContextMenuItemsProps {
@@ -28,10 +27,10 @@ export function HabitContextMenuItems({
  const { saveHabit, archiveHabit, unarchiveHabit } = useHabits();
  const [settings] = useAtom(settingsAtom);
  const [, setPomo] = useAtom(pomodoroAtom);
-  const { hasPermission } = useHelpers(); // Assuming useHabits handles permissions for its actions
+  const [currentUser] = useAtom(currentUserAtom);

-  const canWrite = hasPermission('habit', 'write'); // For UI disabling if not handled by useHabits' actions
-  const canInteract = hasPermission('habit', 'interact');
+  const canWrite = hasPermission(currentUser, 'habit', 'write'); // For UI disabling if not handled by useHabits' actions
+  const canInteract = hasPermission(currentUser, 'habit', 'interact');

  const MenuItemComponent = context === 'daily-overview' ? ContextMenuItem : DropdownMenuItem;
  const MenuSeparatorComponent = context === 'daily-overview' ? ContextMenuSeparator : DropdownMenuSeparator;
--- a/components/HabitItem.tsx
+++ b/components/HabitItem.tsx
@@ -1,22 +1,25 @@
-import { Button } from '@/components/ui/button'
+import { Habit, SafeUser, User, Permission } from '@/lib/types'
+import { useAtom } from 'jotai'
+import { settingsAtom, pomodoroAtom, browserSettingsAtom, usersAtom, currentUserAtom } from '@/lib/atoms'
+import { getTodayInTimezone, isSameDate, t2d, d2t, getNow, d2s, getCompletionsForToday, isTaskOverdue, convertMachineReadableFrequencyToHumanReadable } from '@/lib/utils'
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Coins, Edit, Check, Undo2, MoreVertical, Pin } from 'lucide-react'
 import {
  DropdownMenu,
  DropdownMenuContent,
-  DropdownMenuTrigger
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
-import { useHabits } from '@/hooks/useHabits'
-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 { useTranslations } from 'next-intl'
-import { usePathname } from 'next/navigation'
 import { useEffect, useState } from 'react'
-import { HabitContextMenuItems } from './HabitContextMenuItems'
+import { useHabits } from '@/hooks/useHabits'
+import { useTranslations } from 'next-intl'
+import { INITIAL_RECURRENCE_RULE, RECURRENCE_RULE_MAP } from '@/lib/constants'
+import { DateTime } from 'luxon'
 import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar'
+import { hasPermission } from '@/lib/utils'
+import { HabitContextMenuItems } from './HabitContextMenuItems'

 interface HabitItemProps {
  habit: Habit
@@ -26,7 +29,7 @@ interface HabitItemProps {

 const renderUserAvatars = (habit: Habit, currentUser: User | null, usersData: { users: User[] }) => {
  if (!habit.userIds || habit.userIds.length <= 1) return null;
-  
+
  return (
    <div className="flex -space-x-2 ml-2 flex-shrink-0">
      {habit.userIds?.filter((u) => u !== currentUser?.id).map(userId => {
@@ -47,16 +50,19 @@ 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
  const [isHighlighted, setIsHighlighted] = useState(false)
  const t = useTranslations('HabitItem');
  const [usersData] = useAtom(usersAtom)
-  const { currentUser, hasPermission } = useHelpers()
-  const canWrite = hasPermission('habit', 'write')
-  const canInteract = hasPermission('habit', 'interact')
-  const pathname = usePathname();
+  const [currentUser] = useAtom(currentUserAtom)
+  const canWrite = hasPermission(currentUser, 'habit', 'write')
+  const canInteract = hasPermission(currentUser, 'habit', 'interact')
+  const [browserSettings] = useAtom(browserSettingsAtom)
+  const isTasksView = browserSettings.viewType === 'tasks'
+  const isRecurRule = !isTasksView

  useEffect(() => {
    const params = new URLSearchParams(window.location.search)
@@ -84,7 +90,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 ${pathname.includes("tasks") ? 'w-full' : ''} justify-between`}>
+          <CardTitle className={`line-clamp-1 ${habit.archived ? 'text-gray-400 dark:text-gray-500' : ''} flex items-center ${isTasksView ? 'w-full' : ''} justify-between`}>
            <div className="flex items-center gap-1">
              {habit.pinned && (
                <Pin className="h-4 w-4 text-yellow-500" />
@@ -107,11 +113,13 @@ export default function HabitItem({ habit, onEdit, onDelete }: HabitItemProps) {
      </CardHeader>
      <CardContent className="flex-1">
        <p className={`text-sm ${habit.archived ? 'text-gray-400 dark:text-gray-500' : 'text-gray-500'}`}>
-          {t('whenLabel', { frequency: convertMachineReadableFrequencyToHumanReadable({
-            frequency: habit.frequency,
-            isRecurRule: pathname.includes("habits"),
-            timezone: settings.system.timezone
-          })})}
+          {t('whenLabel', {
+            frequency: convertMachineReadableFrequencyToHumanReadable({
+              frequency: habit.frequency,
+              isRecurRule,
+              timezone: settings.system.timezone
+            })
+          })}
        </p>
        <div className="flex items-center mt-2">
          <Coins className={`h-4 w-4 mr-1 ${habit.archived ? 'text-gray-400 dark:text-gray-500' : 'text-yellow-400'}`} />
@@ -184,7 +192,7 @@ export default function HabitItem({ habit, onEdit, onDelete }: HabitItemProps) {
              <span className="ml-2">{t('editButton')}</span>
            </Button>
          )}
-          <DropdownMenu>
+          <DropdownMenu modal={false}>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                <MoreVertical className="h-4 w-4" />
--- a/components/HabitList.tsx
+++ b/components/HabitList.tsx
@@ -1,28 +1,32 @@
 'use client'

-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'; // Added
-import { Label } from '@/components/ui/label'; // Added
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; // Added
-import { useHabits } from '@/hooks/useHabits'
-import { habitsAtom } from '@/lib/atoms'
-import { HabitIcon, TaskIcon } from '@/lib/constants'
-import { Habit } from '@/lib/types'
-import { getHabitFreq } from '@/lib/utils'; // Added
+import { useState, useMemo, useEffect } from 'react' // Added useMemo, useEffect
+import { Plus, ArrowUpNarrowWide, ArrowDownWideNarrow, Search } from 'lucide-react' // Added sort icons, Search icon
 import { useAtom } from 'jotai'
-import { ArrowDownWideNarrow, ArrowUpNarrowWide, Plus, Search } from 'lucide-react'; // Added sort icons, Search icon
-import { DateTime } from 'luxon'; // Added
 import { useTranslations } from 'next-intl'
-import { useEffect, useMemo, useState } from 'react'; // Added useMemo, useEffect
+import { habitsAtom, settingsAtom, browserSettingsAtom } from '@/lib/atoms'
+import EmptyState from './EmptyState'
+import { Button } from '@/components/ui/button'
+import HabitItem from './HabitItem'
 import AddEditHabitModal from './AddEditHabitModal'
 import ConfirmDialog from './ConfirmDialog'
-import EmptyState from './EmptyState'
-import HabitItem from './HabitItem'
+import { Habit } from '@/lib/types'
+import { useHabits } from '@/hooks/useHabits'
+import { HabitIcon, TaskIcon } from '@/lib/constants'
+import { ViewToggle } from './ViewToggle'
+import { Input } from '@/components/ui/input' // Added
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select' // Added
+import { Label } from '@/components/ui/label' // Added
+import { DateTime } from 'luxon' // Added
+import { getHabitFreq } from '@/lib/utils' // Added

-export default function HabitList({ isTasksView }: { isTasksView: boolean}) {
+export default function HabitList() {
  const t = useTranslations('HabitList');
  const { saveHabit, deleteHabit } = useHabits()
  const [habitsData] = useAtom(habitsAtom) // setHabitsData removed as it's not used
+  const [browserSettings] = useAtom(browserSettingsAtom)
+  const isTasksView = browserSettings.viewType === 'tasks'
+  // const [settings] = useAtom(settingsAtom); // settingsAtom is not directly used in HabitList itself.

  type SortableField = 'name' | 'coinReward' | 'dueDate' | 'frequency';
  type SortOrder = 'asc' | 'desc';
@@ -126,11 +130,17 @@ export default function HabitList({ isTasksView }: { isTasksView: boolean}) {
          {t(isTasksView ? 'myTasks' : 'myHabits')}
        </h1>
        <span>
-          <Button onClick={() => setModalConfig({ isOpen: true, isTask: isTasksView })}>
-            <Plus className='mr-2 h-4 w-4' />{isTasksView ? t("addTaskButton") : t("addHabitButton")}
+          <Button className="mr-2" onClick={() => setModalConfig({ isOpen: true, isTask: true })}>
+            <Plus className="mr-2 h-4 w-4" /> {t('addTaskButton')}
+          </Button>
+          <Button onClick={() => setModalConfig({ isOpen: true, isTask: false })}>
+            <Plus className="mr-2 h-4 w-4" /> {t('addHabitButton')}
          </Button>
        </span>
      </div>
+      <div className='py-4'>
+        <ViewToggle />
+      </div>

      {/* Search and Sort Controls */}
      <div className="flex flex-col sm:flex-row items-center gap-4 my-4">
--- a/components/HabitStreak.tsx
+++ b/components/HabitStreak.tsx
@@ -1,12 +1,12 @@
 'use client'

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

 interface HabitStreakProps {
  habits: Habit[]
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -1,25 +1,13 @@
-'use client'
-
-import { FormattedNumber } from '@/components/FormattedNumber'
 import { Logo } from '@/components/Logo'
-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 HeaderActions from './HeaderActions'

 interface HeaderProps {
  className?: string
 }

-const TodayEarnedCoins = dynamic(() => import('./TodayEarnedCoins'), { ssr: false })

 export default function Header({ className }: HeaderProps) {
-  const [settings] = useAtom(settingsAtom)
-  const { balance } = useCoins()
  return (
    <>
      <header className={`border-b bg-white dark:bg-gray-800 shadow-sm ${className || ''}`}>
@@ -28,23 +16,7 @@ export default function Header({ className }: HeaderProps) {
            <Link href="/" className="mr-3 sm:mr-4">
              <Logo />
            </Link>
-            <div className="flex items-center gap-1 sm:gap-2">
-              <Link href="/coins" className="flex items-center gap-1 sm:gap-2 px-3 py-1.5 bg-white hover:bg-gray-50 dark:bg-gray-700 dark:hover:bg-gray-600 rounded-full transition-colors border border-gray-200 dark:border-gray-600">
-                <Coins className="h-5 w-5 text-yellow-500 dark:text-yellow-400" />
-                <div className="flex items-baseline gap-1 sm:gap-2">
-                  <FormattedNumber
-                    amount={balance}
-                    settings={settings}
-                    className="text-gray-800 dark:text-gray-100 font-medium text-lg"
-                  />
-                  <div className="hidden sm:block">
-                    <TodayEarnedCoins />
-                  </div>
-                </div>
-              </Link>
-              <NotificationBell />
-              <Profile />
-            </div>
+            <HeaderActions />
          </div>
        </div>
      </header>
--- a/components/HeaderActions.tsx
+++ b/components/HeaderActions.tsx
@@ -0,0 +1,38 @@
+'use client'
+
+import Link from 'next/link'
+import { useAtom } from 'jotai'
+import { settingsAtom } from '@/lib/atoms'
+import { useCoins } from '@/hooks/useCoins'
+import { FormattedNumber } from '@/components/FormattedNumber'
+import { Coins } from 'lucide-react'
+import NotificationBell from './NotificationBell'
+import dynamic from 'next/dynamic'
+import { Profile } from './Profile'
+
+const TodayEarnedCoins = dynamic(() => import('./TodayEarnedCoins'), { ssr: false })
+
+export default function HeaderActions() {
+  const [settings] = useAtom(settingsAtom)
+  const { balance } = useCoins()
+
+  return (
+    <div className="flex items-center gap-1 sm:gap-2">
+      <Link href="/coins" className="flex items-center gap-1 sm:gap-2 px-3 py-1.5 bg-white hover:bg-gray-50 dark:bg-gray-700 dark:hover:bg-gray-600 rounded-full transition-colors border border-gray-200 dark:border-gray-600">
+        <Coins className="h-5 w-5 text-yellow-500 dark:text-yellow-400" />
+        <div className="flex items-baseline gap-1 sm:gap-2">
+          <FormattedNumber
+            amount={balance}
+            settings={settings}
+            className="text-gray-800 dark:text-gray-100 font-medium text-lg"
+          />
+          <div className="hidden sm:block">
+            <TodayEarnedCoins />
+          </div>
+        </div>
+      </Link>
+      <NotificationBell />
+      <Profile />
+    </div>
+  )
+}
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@@ -6,21 +6,21 @@ import Navigation from './Navigation'
 export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex flex-col h-screen bg-gray-100 dark:bg-gray-900 overflow-hidden">
-      <Header className="sticky top-0 z-50" />
-      <div className="flex flex-1 overflow-hidden">
-        <Navigation viewPort='main' />
-        <div className="flex-1 flex flex-col">
-          <main className="flex-1 overflow-x-hidden overflow-y-auto bg-gray-100 dark:bg-gray-900 relative">
-            {/* responsive container (optimized for mobile) */}
-            <div className="mx-auto px-2 xs:px-4 py-8 max-w-sm xs:max-w-full">
-              <ClientWrapper>
+      <ClientWrapper>
+        <Header className="sticky top-0 z-50" />
+        <div className="flex flex-1 overflow-hidden">
+          <Navigation viewPort='main' />
+          <div className="flex-1 flex flex-col">
+            <main className="flex-1 overflow-x-hidden overflow-y-auto bg-gray-100 dark:bg-gray-900 relative">
+              {/* responsive container (optimized for mobile) */}
+              <div className="mx-auto px-2 xs:px-4 py-8 max-w-sm xs:max-w-full">
                {children}
-              </ClientWrapper>
-            </div>
-          </main>
-          <Navigation viewPort='mobile' />
+              </div>
+            </main>
+            <Navigation viewPort='mobile' />
+          </div>
        </div>
-      </div>
+      </ClientWrapper>
    </div>
  )
 }
--- a/components/LoadingSpinner.tsx
+++ b/components/LoadingSpinner.tsx
@@ -0,0 +1,61 @@
+'use client'
+
+import React, { useEffect, useState } from 'react';
+import { Coins } from 'lucide-react';
+import { Logo } from '@/components/Logo';
+
+const subtexts = [
+  "Unearthing your treasures",
+  "Polishing your gems",
+  "Mining for good habits",
+  "Stumbling upon brilliance",
+  "Discovering your potential",
+  "Crafting your success story",
+  "Forging new paths",
+  "Summoning success",
+  "Brewing brilliance",
+  "Charging up your awesome",
+  "Assembling achievements",
+  "Leveling up your day",
+  "Questing for quality",
+  "Unlocking awesomeness",
+  "Plotting your progress",
+];
+
+const LoadingSpinner: React.FC = () => {
+  const [currentSubtext, setCurrentSubtext] = useState<string>('Loading your data');
+  const [animatedDots, setAnimatedDots] = useState<string>('');
+
+  useEffect(() => {
+    const randomIndex = Math.floor(Math.random() * subtexts.length);
+    setCurrentSubtext(subtexts[randomIndex]);
+
+    const dotAnimationInterval = setInterval(() => {
+      setAnimatedDots(prevDots => {
+        if (prevDots.length >= 3) {
+          return '';
+        }
+        return prevDots + '.';
+      });
+    }, 200); // Adjust timing as needed
+
+    return () => clearInterval(dotAnimationInterval);
+  }, []);
+
+
+  return (
+    <div className="flex flex-col items-center justify-center h-screen">
+      <div className="flex flex-col items-center space-y-4">
+        <Coins className="h-12 w-12 animate-bounce text-yellow-500" />
+        <Logo />
+        {currentSubtext && (
+          <p className="text-lg text-gray-600 dark:text-gray-400">
+            {currentSubtext}{animatedDots}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default LoadingSpinner;
--- a/components/Logo.tsx
+++ b/components/Logo.tsx
@@ -1,3 +1,4 @@
+import { Sparkles } from "lucide-react"

 export function Logo() {
  return (
--- a/components/MobileNavDisplay.tsx
+++ b/components/MobileNavDisplay.tsx
@@ -0,0 +1,60 @@
+import Link from 'next/link'
+import type { ElementType } from 'react'
+
+export interface NavItemType {
+  icon: ElementType;
+  label: string;
+  href: string;
+  position: 'main' | 'bottom';
+}
+
+interface MobileNavDisplayProps {
+  navItems: NavItemType[];
+}
+
+// detect iOS: https://stackoverflow.com/a/9039885
+function iOS() {
+  return [
+    'iPad Simulator',
+    'iPhone Simulator',
+    'iPod Simulator',
+    'iPad',
+    'iPhone',
+    'iPod',
+  ].includes(navigator.platform)
+    // iPad on iOS 13 detection
+    || (navigator.userAgent.includes("Mac") && "ontouchend" in document)
+}
+
+
+export default function MobileNavDisplay({ navItems }: MobileNavDisplayProps) {
+  // Filter for items relevant to mobile view, typically 'main' and 'bottom' positions
+  const mobileNavItems = navItems.filter(item => item.position === 'main' || item.position === 'bottom');
+  // The original code spread main and bottom items separately, effectively concatenating them.
+  // If specific ordering or duplication was intended, that logic would be here.
+  // For now, a simple filter and map should suffice if all items are distinct.
+  // The original code: [...navItems(isTasksView).filter(item => item.position === 'main'), ...navItems(isTasksView).filter(item => item.position === 'bottom')]
+  // This implies that items could be in 'main' or 'bottom'. The current navItems only have 'main'.
+  // A simple combined list is fine.
+  const isIOS = iOS()
+
+  return (
+    <>
+      <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">
+          {mobileNavItems.map((item) => (
+            <Link
+              key={item.label} // Assuming labels are unique
+              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"
+            >
+              <item.icon className="h-6 w-6" />
+              <span className="text-xs mt-1">{item.label}</span>
+            </Link>
+          ))}
+        </div>
+      </nav>
+    </>
+  );
+}
--- a/components/Navigation.tsx
+++ b/components/Navigation.tsx
@@ -1,31 +1,43 @@
 'use client'

-import { useHelpers } from '@/lib/client-helpers'
-import { HabitIcon, TaskIcon } from '@/lib/constants'
-import { Calendar, Coins, Gift, Home } from 'lucide-react'
+import { Home, Calendar, Gift, Coins } from 'lucide-react'
+import { useAtom } from 'jotai'
+import { browserSettingsAtom } from '@/lib/atoms'
+import { useEffect, useState, ElementType } from 'react'
 import { useTranslations } from 'next-intl'
-import Link from 'next/link'
-import { usePathname } from 'next/navigation'
-import { useEffect, useState } from 'react'
-import AboutModal from './AboutModal'
+import { HabitIcon, TaskIcon } from '@/lib/constants'
+import MobileNavDisplay from './MobileNavDisplay'
+import DesktopNavDisplay from './DesktopNavDisplay'

 type ViewPort = 'main' | 'mobile'

+export interface NavItemType {
+  icon: ElementType;
+  label: string;
+  href: string;
+  position: 'main' | 'bottom';
+}
+
 interface NavigationProps {
+  className?: string
  viewPort: ViewPort
 }

-export default function Navigation({ viewPort }: NavigationProps) {
-  const t = useTranslations('Navigation')
-  const [showAbout, setShowAbout] = useState(false)
-  const [isMobileView, setIsMobileView] = useState(false)
-  const { isIOS } = useHelpers()
-  const pathname = usePathname();

-  const navItems = () => [
+export default function Navigation({ className, viewPort }: NavigationProps) {
+  const t = useTranslations('Navigation')
+  const [isMobileView, setIsMobileView] = useState(false)
+  const [browserSettings] = useAtom(browserSettingsAtom)
+  const isTasksView = browserSettings.viewType === 'tasks'
+
+  const currentNavItems: NavItemType[] = [
    { icon: Home, label: t('dashboard'), href: '/', position: 'main' },
-    { icon: HabitIcon, label: t('habits'), href: '/habits', position: 'main' },
-    { icon: TaskIcon, label: t('tasks'), href: '/tasks', position: 'main' },
+    {
+      icon: isTasksView ? TaskIcon : HabitIcon,
+      label: isTasksView ? t('tasks') : t('habits'),
+      href: '/habits',
+      position: 'main'
+    },
    { icon: Calendar, label: t('calendar'), href: '/calendar', position: 'main' },
    { icon: Gift, label: t('wishlist'), href: '/wishlist', position: 'main' },
    { icon: Coins, label: t('coins'), href: '/coins', position: 'main' },
@@ -47,58 +59,12 @@ export default function Navigation({ viewPort }: NavigationProps) {
  }, [])

  if (viewPort === 'mobile' && isMobileView) {
-    return (
-      <>
-        <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-6 w-full">
-            {...navItems().map((item) => (
-              <Link
-                key={item.label}
-                href={item.href}
-                className={"flex flex-col items-center py-2 hover:text-blue-600 dark:hover:text-blue-300 " +
-                  (pathname === (item.href) ?
-                    "text-blue-500 dark:text-blue-500" :
-                    "text-gray-300 dark:text-gray-300")
-                }
-              >
-                <item.icon className="h-6 w-6" />
-                <span className="text-xs mt-1">{item.label}</span>
-              </Link>
-            ))}
-          </div>
-        </nav>
-        <AboutModal isOpen={showAbout} onClose={() => setShowAbout(false)} />
-      </>
-    )
+    return <MobileNavDisplay navItems={currentNavItems} />
  }

  if (viewPort === 'main' && !isMobileView) {
-    return (
-      <div className="hidden lg:flex lg:flex-shrink-0">
-        <div className="flex flex-col w-64">
-          <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().filter(item => item.position === 'main').map((item) => (
-                  <Link
-                    key={item.label}
-                    href={item.href}
-                    className={"flex items-center px-2 py-2 font-medium rounded-md " +
-                      (pathname === (item.href) ?
-                        "text-blue-500 hover:text-blue-600 hover:bg-gray-700" :
-                        "text-gray-300 hover:text-white hover:bg-gray-700")}
-                  >
-                    <item.icon className="mr-4 flex-shrink-0 h-6 w-6" aria-hidden="true" />
-                    {item.label}
-                  </Link>
-                ))}
-              </nav>
-            </div>
-          </div>
-        </div>
-        <AboutModal isOpen={showAbout} onClose={() => setShowAbout(false)} />
-      </div>
-    )
+    return <DesktopNavDisplay navItems={currentNavItems} className={className} />
  }
+
+  return null // Explicitly return null if no view matches
 }
--- a/components/NotificationBell.tsx
+++ b/components/NotificationBell.tsx
@@ -2,7 +2,7 @@

 import { useMemo } from 'react'
 import { useAtom } from 'jotai'
-import { coinsAtom, habitsAtom, wishlistAtom, usersAtom } from '@/lib/atoms'
+import { coinsAtom, habitsAtom, wishlistAtom, usersAtom, currentUserAtom } from '@/lib/atoms'
 import { Bell } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { useTranslations } from 'next-intl';
@@ -14,12 +14,11 @@ import {
 } from '@/components/ui/dropdown-menu'
 import { updateLastNotificationReadTimestamp } from '@/app/actions/data';
 import { d2t, getNow, t2d } from '@/lib/utils';
-import { useHelpers } from '@/lib/client-helpers';
 import { User, CoinTransaction } from '@/lib/types';

 export default function NotificationBell() {
  const t = useTranslations('NotificationBell');
-  const { currentUser } = useHelpers();
+  const [currentUser] = useAtom(currentUserAtom);
  const [coinsData] = useAtom(coinsAtom)
  const [habitsData] = useAtom(habitsAtom)
  const [wishlistData] = useAtom(wishlistAtom)
@@ -122,7 +121,7 @@ export default function NotificationBell() {
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="p-0 w-80 md:w-96">
        <NotificationDropdown
-          currentUser={currentUser as User | null} // Cast needed as useHelpers can return undefined initially
+          currentUser={currentUser as User | null} // Cast needed as as currentUser can be undefined
          unreadNotifications={unreadNotifications}
          displayedReadNotifications={displayedReadNotifications}
          habitsData={habitsData} // Pass necessary data down
--- a/components/NotificationDropdown.tsx
+++ b/components/NotificationDropdown.tsx
@@ -1,18 +1,19 @@
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import { DropdownMenuItem } from '@/components/ui/dropdown-menu';
+import React from 'react';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { Separator } from '@/components/ui/separator';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { CoinsData, HabitsData, WishlistData, UserData, User, CoinTransaction } from '@/lib/types';
+import { t2d } from '@/lib/utils';
+import Link from 'next/link';
+import { DropdownMenuItem } from '@/components/ui/dropdown-menu';
+import { Info } from 'lucide-react';
+import { useTranslations } from 'next-intl';
 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 { useTranslations } from 'next-intl';
-import Link from 'next/link';

 interface NotificationDropdownProps {
  currentUser: User | null;
--- a/components/PasswordEntryForm.tsx
+++ b/components/PasswordEntryForm.tsx
@@ -1,14 +1,14 @@
 'use client';

-import { toast } from '@/hooks/use-toast';
-import { User } from '@/lib/types';
-import { User as UserIcon } from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import { useState } from 'react';
 import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar';
-import { Button } from './ui/button';
 import { Input } from './ui/input';
+import { Button } from './ui/button';
 import { Label } from './ui/label';
+import { User as UserIcon } from 'lucide-react';
+import { Permission, User } from '@/lib/types';
+import { toast } from '@/hooks/use-toast';
+import { useState } from 'react';
+import { useTranslations } from 'next-intl';

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

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

 interface PomoConfig {
  getLabels: () => string[]
@@ -38,6 +39,7 @@ export default function PomodoroTimer() {
    },
  }

+  const [settings] = useAtom(settingsAtom)
  const [pomo, setPomo] = useAtom(pomodoroAtom)
  const { show, selectedHabitId, autoStart, minimized } = pomo
  const [habitsData] = useAtom(habitsAtom)
@@ -112,28 +114,28 @@ export default function PomodoroTimer() {

  // Timer logic
  useEffect(() => {
-    let interval: ReturnType<typeof setInterval> | null = null;
+    let interval: ReturnType<typeof setInterval> | null = null

-    if (state === "started") {
+    if (state === 'started') {
      // Calculate the target end time based on current timeLeft
-      const targetEndTime = Date.now() + timeLeft * 1000;
+      const targetEndTime = Date.now() + timeLeft * 1000

      interval = setInterval(() => {
-        const remaining = Math.floor((targetEndTime - Date.now()) / 1000);
+        const remaining = Math.floor((targetEndTime - Date.now()) / 1000)

        if (remaining <= 0) {
-          handleTimerEnd();
+          handleTimerEnd()
        } else {
-          setTimeLeft(remaining);
+          setTimeLeft(remaining)
        }
-      }, 1000);
+      }, 1000)
    }

    // return handles any other states
    return () => {
-      if (interval) clearInterval(interval);
-    };
-  }, [state]);
+      if (interval) clearInterval(interval)
+    }
+  }, [state])

  const handleTimerEnd = async () => {
    setState("stopped")
--- a/components/Profile.tsx
+++ b/components/Profile.tsx
@@ -1,30 +1,28 @@
 'use client'

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

 export function Profile() {
  const t = useTranslations('Profile');
  const [settings] = useAtom(settingsAtom)
  const [userSelect, setUserSelect] = useAtom(userSelectAtom)
  const [isEditing, setIsEditing] = useState(false)
-  const [showAbout, setShowAbout] = useState(false)
+  const [aboutOpen, setAboutOpen] = useAtom(aboutOpenAtom)
  const { theme, setTheme } = useTheme()
-  const { currentUser: user } = useHelpers()
+  const [user] = useAtom(currentUserAtom)
  const [open, setOpen] = useState(false)

  const handleSignOut = async () => {
@@ -111,27 +109,33 @@ export function Profile() {
            </div>
          </DropdownMenuItem>
          <DropdownMenuItem className="cursor-pointer px-2 py-1.5" asChild>
+            {/* need the Link element to be the direct child of the DropdownMenuItem, since we are using asChild here */}
            <Link
              href="/settings"
              aria-label={t('settingsLink')}
-              className="flex items-center w-full gap-3"
+              className="flex items-center justify-between w-full"
+              onClick={() => setOpen(false)} // Ensure dropdown closes on click
            >
-              <Settings className="h-4 w-4" />
-              <span>{t('settingsLink')}</span>
+              <div className="flex items-center gap-2">
+                <Settings className="h-4 w-4" />
+                <span>{t('settingsLink')}</span>
+              </div>
            </Link>
          </DropdownMenuItem>
-          <DropdownMenuItem className="cursor-pointer px-2 py-1.5" asChild>
-            <button
-              onClick={() => setShowAbout(true)}
-              className="flex items-center w-full gap-3"
-            >
-              <Info className="h-4 w-4" />
-              <span>{t('aboutButton')}</span>
-            </button>
+          <DropdownMenuItem className="cursor-pointer px-2 py-1.5" onClick={() => {
+            setOpen(false);  // Close the dropdown
+            setAboutOpen(true);  // Open the about modal
+          }}>
+            <div className="flex items-center justify-between w-full">
+              <div className="flex items-center gap-2">
+                <Info className="h-4 w-4" />
+                <span>{t('aboutButton')}</span>
+              </div>
+            </div>
          </DropdownMenuItem>
          <DropdownMenuItem className="cursor-pointer px-2 py-1.5">
-            <div className="flex items-center justify-between w-full gap-3">
-              <div className="flex items-center gap-3">
+            <div className="flex items-center justify-between w-full">
+              <div className="flex items-center gap-2">
                <Palette className="h-4 w-4" />
                <span>{t('themeLabel')}</span>
              </div>
@@ -169,8 +173,6 @@ export function Profile() {
        </DropdownMenuContent>
      </DropdownMenu>

-      <AboutModal isOpen={showAbout} onClose={() => setShowAbout(false)} />
-
      {/* Add the UserForm dialog */}
      {isEditing && user && (
        <Dialog open={isEditing} onOpenChange={() => setIsEditing(false)}>
--- a/components/UserForm.tsx
+++ b/components/UserForm.tsx
@@ -1,22 +1,34 @@
 'use client';

-import { createUser, updateUser, updateUserPassword, uploadAvatar } from '@/app/actions/data';
-import { toast } from '@/hooks/use-toast';
-import { serverSettingsAtom, usersAtom } from '@/lib/atoms';
-import { useHelpers } from '@/lib/client-helpers';
-import { Permission } from '@/lib/types';
-import { passwordSchema, usernameSchema } from '@/lib/zod';
-import { useAtom, useAtomValue } from 'jotai';
-import _ from 'lodash';
-import { User as UserIcon } from 'lucide-react';
-import { useTranslations } from 'next-intl';
 import { useState } from 'react';
-import { PermissionSelector } from './PermissionSelector';
-import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar';
-import { Button } from './ui/button';
+import { passwordSchema, usernameSchema } from '@/lib/zod';
+import { useTranslations } from 'next-intl';
 import { Input } from './ui/input';
+import { Button } from './ui/button';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog"
 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, currentUserAtom } 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';
+

 interface UserFormProps {
  userId?: string;  // if provided, we're editing; if not, we're creating
@@ -29,7 +41,7 @@ export default function UserForm({ userId, onCancel, onSuccess }: UserFormProps)
  const [users, setUsersData] = useAtom(usersAtom);
  const serverSettings = useAtomValue(serverSettingsAtom)
  const user = userId ? users.users.find(u => u.id === userId) : undefined;
-  const { currentUser } = useHelpers()
+  const [currentUser] = useAtom(currentUserAtom)
  const getDefaultPermissions = (): Permission[] => [{
    habit: {
      write: true,
@@ -57,6 +69,69 @@ export default function UserForm({ userId, onCancel, onSuccess }: UserFormProps)
  );
  const isEditing = !!user;

+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  const handleDeleteUser = async () => {
+    if (!user) return;
+
+    if (serverSettings.isDemo) {
+      toast({
+        title: t('errorTitle'),
+        description: t('toastDemoDeleteDisabled'),
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    if (currentUser && currentUser.id === user.id) {
+      toast({
+        title: t('errorTitle'),
+        description: t('toastCannotDeleteSelf'),
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    setIsDeleting(true);
+    try {
+      const response = await fetch('/api/user/delete', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ userId: user.id }),
+      });
+
+      if (response.ok) {
+        setUsersData(prev => ({
+          ...prev,
+          users: prev.users.filter(u => u.id !== user.id),
+        }));
+        toast({
+          title: t('toastUserDeletedTitle'),
+          description: t('toastUserDeletedDescription', { username: user.username }),
+          variant: 'default'
+        });
+        onSuccess();
+      } else {
+        const errorData = await response.json();
+        toast({
+          title: t('errorTitle'),
+          description: errorData.error || t('genericError'),
+          variant: 'destructive',
+        });
+      }
+    } catch (error) {
+      toast({
+        title: t('errorTitle'),
+        description: t('networkError'),
+        variant: 'destructive',
+      });
+    } finally {
+      setIsDeleting(false);
+      setShowDeleteConfirm(false);
+    }
+  };
+
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

@@ -93,11 +168,11 @@ export default function UserForm({ userId, onCancel, onSuccess }: UserFormProps)
        setUsersData(prev => ({
          ...prev,
          users: prev.users.map(u =>
-            u.id === user.id ? { 
-              ...u, 
-              username, 
-              avatarPath, 
-              permissions, 
+            u.id === user.id ? {
+              ...u,
+              username,
+              avatarPath,
+              permissions,
              isAdmin,
              password: disablePassword ? '' : (password || u.password) // use the correct password to update atom
            } : u
@@ -247,7 +322,7 @@ export default function UserForm({ userId, onCancel, onSuccess }: UserFormProps)
              <p className="text-sm text-red-500">{t('demoPasswordDisabledMessage')}</p>
            )}
          </div>
-          
+
          <div className="flex items-center space-x-2">
            <Switch
              id="disable-password"
@@ -263,7 +338,7 @@ export default function UserForm({ userId, onCancel, onSuccess }: UserFormProps)
          <p className="text-sm text-red-500 bg-red-50 dark:bg-red-950/50 p-2 rounded">{error}</p>
        )}

-        
+
        {currentUser && currentUser.isAdmin && <PermissionSelector
          permissions={permissions}
          isAdmin={isAdmin}
@@ -274,6 +349,38 @@ export default function UserForm({ userId, onCancel, onSuccess }: UserFormProps)
      </div>

      <div className="flex justify-end gap-2 pt-2">
+        {isEditing && (
+          <AlertDialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
+            <AlertDialogTrigger asChild>
+              <Button
+                type="button"
+                variant="destructive"
+                className="mr-auto"
+                disabled={serverSettings.isDemo || isDeleting}
+              >
+                {isDeleting ? t('deletingButtonText') : t('deleteAccountButton')}
+              </Button>
+            </AlertDialogTrigger>
+            <AlertDialogContent>
+              <AlertDialogHeader>
+                <AlertDialogTitle>{t('areYouSure')}</AlertDialogTitle>
+                <AlertDialogDescription>
+                  {t('deleteUserConfirmation', { username: user.username })}
+                </AlertDialogDescription>
+              </AlertDialogHeader>
+              <AlertDialogFooter>
+                <AlertDialogCancel disabled={isDeleting}>{t('cancel')}</AlertDialogCancel>
+                <AlertDialogAction
+                  onClick={handleDeleteUser}
+                  disabled={isDeleting}
+                  className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                >
+                  {isDeleting ? t('deletingButtonText') : t('confirmDeleteButtonText')}
+                </AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
+        )}
        <Button
          type="button"
          variant="outline"
--- a/components/UserSelectModal.tsx
+++ b/components/UserSelectModal.tsx
@@ -1,34 +1,50 @@
 '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 { useTranslations } from 'next-intl';
 import { useState } from 'react';
 import PasswordEntryForm from './PasswordEntryForm';
 import UserForm from './UserForm';
-import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from './ui/dialog';
+import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar';
+import { Crown, Pencil, Plus, User as UserIcon, UserRoundPen, Trash2 } from 'lucide-react';
+import { Input } from './ui/input';
+import { Button } from './ui/button';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog"
+import { useAtom } from 'jotai';
+import { usersAtom, currentUserAtom } from '@/lib/atoms';
+import { signIn } from '@/app/actions/user';
+import { createUser } from '@/app/actions/data';
+import { useTranslations } from 'next-intl';
+import { toast } from '@/hooks/use-toast';
+import { Description } from '@radix-ui/react-dialog';
+import { SafeUser, User } from '@/lib/types';
+import { cn } from '@/lib/utils';
+

 function UserCard({
  user,
  onSelect,
  onEdit,
  showEdit,
-  isCurrentUser
+  isCurrentUser,
 }: {
  user: User,
  onSelect: () => void,
  onEdit: () => void,
  showEdit: boolean,
-  isCurrentUser: boolean
+  isCurrentUser: boolean,
 }) {
+  const t = useTranslations('UserSelectModal');
+
  return (
    <div key={user.id} className="relative group">
      <button
@@ -53,15 +69,20 @@ function UserCard({
        </span>
      </button>
      {showEdit && (
-        <button
-          onClick={(e) => {
-            e.stopPropagation();
-            onEdit();
-          }}
-          className="absolute top-0 right-0 p-1 rounded-full bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 transition-colors"
-        >
-          <UserRoundPen className="h-4 w-4" />
-        </button>
+        <div className="absolute top-0 right-0 flex space-x-1">
+          {showEdit && (
+            <button
+              onClick={(e) => {
+                e.stopPropagation(); // Prevent card selection
+                onEdit();
+              }}
+              className="p-1 rounded-full bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 transition-colors"
+              title={t('editUserTooltip')}
+            >
+              <UserRoundPen className="h-4 w-4" />
+            </button>
+          )}
+        </div>
      )}
    </div>
  );
@@ -86,13 +107,13 @@ function AddUserButton({ onClick }: { onClick: () => void }) {

 function UserSelectionView({
  users,
-  currentUser,
+  currentUserFromHook, // Renamed to avoid confusion with map variable
  onUserSelect,
  onEditUser,
  onCreateUser,
 }: {
  users: User[],
-  currentUser?: SafeUser,
+  currentUserFromHook?: SafeUser,
  onUserSelect: (userId: string) => void,
  onEditUser: (userId: string) => void,
  onCreateUser: () => void,
@@ -100,18 +121,18 @@ function UserSelectionView({
  return (
    <div className="grid grid-cols-3 gap-4 p-2 max-h-80 overflow-y-auto">
      {users
-        .filter(user => user.id !== currentUser?.id)
+        .filter(user => user.id !== currentUserFromHook?.id) // Show other users
        .map((user) => (
          <UserCard
            key={user.id}
            user={user}
            onSelect={() => onUserSelect(user.id)}
            onEdit={() => onEditUser(user.id)}
-            showEdit={!!currentUser?.isAdmin}
-            isCurrentUser={false}
+            showEdit={!!currentUserFromHook?.isAdmin}
+            isCurrentUser={false} // This card isn't the currently logged-in user for switching TO
          />
        ))}
-      {currentUser?.isAdmin && <AddUserButton onClick={onCreateUser} />}
+      {currentUserFromHook?.isAdmin && <AddUserButton onClick={onCreateUser} />}
    </div>
  );
 }
@@ -122,9 +143,10 @@ export default function UserSelectModal({ onClose }: { onClose: () => void }) {
  const [isCreating, setIsCreating] = useState(false);
  const [isEditing, setIsEditing] = useState(false);
  const [error, setError] = useState('');
-  const [usersData] = useAtom(usersAtom);
+  const [usersData, setUsersData] = useAtom(usersAtom);
  const users = usersData.users;
-  const { currentUser } = useHelpers();
+  const [currentUser] = useAtom(currentUserAtom);
+

  const handleUserSelect = (userId: string) => {
    setSelectedUser(userId);
@@ -166,7 +188,7 @@ export default function UserSelectModal({ onClose }: { onClose: () => void }) {
          {!selectedUser && !isCreating && !isEditing ? (
            <UserSelectionView
              users={users}
-              currentUser={currentUser}
+              currentUserFromHook={currentUser}
              onUserSelect={handleUserSelect}
              onEditUser={handleEditUser}
              onCreateUser={handleCreateUser}
--- a/components/ViewToggle.tsx
+++ b/components/ViewToggle.tsx
@@ -1,29 +1,34 @@
 'use client'

-import { browserSettingsAtom, habitsAtom, settingsAtom } from '@/lib/atoms'
-import { HabitIcon, TaskIcon } from '@/lib/constants'
-import { cn, isHabitDueToday } from '@/lib/utils'
+import { cn } from '@/lib/utils'
 import { useAtom } from 'jotai'
 import { useTranslations } from 'next-intl'
-import { usePathname, useRouter } from 'next/navigation'
+import { browserSettingsAtom, habitsAtom, settingsAtom } from '@/lib/atoms'
+import type { ViewType } from '@/lib/types'
+import { HabitIcon, TaskIcon } from '@/lib/constants'
+import { isHabitDueToday } from '@/lib/utils'
 import { NotificationBadge } from './ui/notification-badge'

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

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

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

  // Calculate due tasks count
@@ -35,10 +40,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}
+          onClick={() => handleViewChange(false)}
          className={cn(
            'relative z-10 rounded-full px-4 py-2 text-sm font-medium transition-colors flex items-center gap-2',
-            pathname.includes('habits') ? 'text-primary-foreground' : 'text-muted-foreground hover:text-foreground'
+            browserSettings.viewType === 'habits' ? 'text-primary-foreground' : 'text-muted-foreground hover:text-foreground'
          )}
        >
          <HabitIcon className="h-4 w-4" />
@@ -47,14 +52,14 @@ export function ViewToggle({
        <NotificationBadge
          label={dueTasksCount}
          show={dueTasksCount > 0}
-          variant={pathname.includes('tasks') ? 'secondary' : 'default'}
+          variant={browserSettings.viewType === 'tasks' ? 'secondary' : 'default'}
          className="shadow-md"
        >
          <button
-            onClick={handleViewChange}
+            onClick={() => handleViewChange(true)}
            className={cn(
              'relative z-10 rounded-full px-4 py-2 text-sm font-medium transition-colors flex items-center gap-2',
-              pathname.includes('tasks') ? 'text-primary-foreground' : 'text-muted-foreground hover:text-foreground'
+              browserSettings.viewType === 'tasks' ? 'text-primary-foreground' : 'text-muted-foreground hover:text-foreground'
            )}
          >
            <TaskIcon className="h-4 w-4" />
@@ -64,7 +69,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',
-            pathname.includes('habits') ? 'w-[calc(50%-0.125rem)]' : 'w-[calc(50%-0.125rem)] translate-x-[calc(100%+0.125rem)]'
+            browserSettings.viewType === '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,5 +1,13 @@
-import { Button } from '@/components/ui/button'
+import { WishlistItemType, User } from '@/lib/types'
+import { useAtom } from 'jotai'
+import { useTranslations } from 'next-intl'
+import { usersAtom, currentUserAtom } from '@/lib/atoms'
+import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar'
+import { hasPermission } from '@/lib/utils'
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
+import ReactMarkdown from 'react-markdown'
+import { Button } from '@/components/ui/button'
+import { Coins, Edit, Trash2, Gift, MoreVertical, Archive, ArchiveRestore } from 'lucide-react'
 import {
  DropdownMenu,
  DropdownMenuContent,
@@ -7,13 +15,6 @@ import {
  DropdownMenuSeparator,
  DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
-import { usersAtom } from '@/lib/atoms'
-import { useHelpers } from '@/lib/client-helpers'
-import { User, WishlistItemType } from '@/lib/types'
-import { useAtom } from 'jotai'
-import { Archive, ArchiveRestore, Coins, Edit, Gift, MoreVertical, Trash2 } from 'lucide-react'
-import { useTranslations } from 'next-intl'
-import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar'

 interface WishlistItemProps {
  item: WishlistItemType
@@ -59,9 +60,9 @@ export default function WishlistItem({
  isRecentlyRedeemed
 }: WishlistItemProps) {
  const t = useTranslations('WishlistItem')
-  const { currentUser, hasPermission } = useHelpers()
-  const canWrite = hasPermission('wishlist', 'write')
-  const canInteract = hasPermission('wishlist', 'interact')
+  const [currentUser] = useAtom(currentUserAtom)
+  const canWrite = hasPermission(currentUser, 'wishlist', 'write')
+  const canInteract = hasPermission(currentUser, 'wishlist', 'interact')
  const [usersData] = useAtom(usersAtom)


@@ -140,7 +141,7 @@ export default function WishlistItem({
              <span className="ml-2">{t('editButton')}</span>
            </Button>
          )}
-          <DropdownMenu>
+          <DropdownMenu modal={false}>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                <MoreVertical className="h-4 w-4" />
@@ -165,7 +166,7 @@ export default function WishlistItem({
              </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"
+                className="text-red-600 focus:text-red-600 dark:text-red-400 dark:focus:text-red-400"
                onClick={onDelete}
                disabled={!canWrite}
              >
--- a/components/theme-toggle.tsx
+++ b/components/theme-toggle.tsx
@@ -1,6 +1,7 @@
 "use client"

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

 import { Button } from "@/components/ui/button"
--- a/components/ui/alert-dialog.tsx
+++ b/components/ui/alert-dialog.tsx
@@ -0,0 +1,141 @@
+"use client"
+
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+const AlertDialog = AlertDialogPrimitive.Root
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+))
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogHeader.displayName = "AlertDialogHeader"
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogFooter.displayName = "AlertDialogFooter"
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold", className)}
+    {...props}
+  />
+))
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants(), className)}
+    {...props}
+  />
+))
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant: "outline" }),
+      "mt-2 sm:mt-0",
+      className
+    )}
+    {...props}
+  />
+))
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}
--- a/docker-compose.yaml
+++ b/docker-compose.yaml
@@ -1,11 +1,10 @@
 services:
  habittrove:
-    image: ghcr.io/manindark/habittrove
-    container_name: habittrove
    ports:
      - "3000:3000"
    volumes:
      - "./data:/app/data"
      - "./backups:/app/backups"
+    image: dohsimpson/habittrove
    environment:
      - AUTH_SECRET=your-secret-key-here # Replace with your actual secret
--- a/hooks/useCoins.tsx
+++ b/hooks/useCoins.tsx
@@ -1,5 +1,6 @@
-import { useAtom } from 'jotai'
-import { useTranslations } from 'next-intl'
+import { useAtom } from 'jotai';
+import { useState, useEffect, useMemo } from 'react';
+import { useTranslations } from 'next-intl';
 import { calculateCoinsEarnedToday, calculateCoinsSpentToday, calculateTotalEarned, calculateTotalSpent, calculateTransactionsToday, checkPermission } from '@/lib/utils'
 import {
  coinsAtom,
@@ -11,11 +12,12 @@ import {
  coinsBalanceAtom,
  settingsAtom,
  usersAtom,
+  currentUserAtom,
 } from '@/lib/atoms'
 import { addCoins, removeCoins, saveCoinsData } from '@/app/actions/data'
 import { CoinsData, User } from '@/lib/types'
 import { toast } from '@/hooks/use-toast'
-import { useHelpers } from '@/lib/client-helpers'
+import { MAX_COIN_LIMIT } from '@/lib/constants'

 function handlePermissionCheck(
  user: User | undefined,
@@ -50,23 +52,59 @@ export function useCoins(options?: { selectedUser?: string }) {
  const [coins, setCoins] = useAtom(coinsAtom)
  const [settings] = useAtom(settingsAtom)
  const [users] = useAtom(usersAtom)
-  const { currentUser } = useHelpers()
-  let user: User | undefined;
-  if (!options?.selectedUser) {
-    user = currentUser;
-  } else {
-    user = users.users.find(u => u.id === options.selectedUser)
-  }
+  const [currentUser] = useAtom(currentUserAtom)
+  const [allCoinsData] = useAtom(coinsAtom) // All coin transactions
+  const [loggedInUserBalance] = useAtom(coinsBalanceAtom) // Balance of the *currently logged-in* user
+  const [atomCoinsEarnedToday] = useAtom(coinsEarnedTodayAtom);
+  const [atomTotalEarned] = useAtom(totalEarnedAtom)
+  const [atomTotalSpent] = useAtom(totalSpentAtom)
+  const [atomCoinsSpentToday] = useAtom(coinsSpentTodayAtom);
+  const [atomTransactionsToday] = useAtom(transactionsTodayAtom);
+  const targetUser = options?.selectedUser ? users.users.find(u => u.id === options.selectedUser) : currentUser
+  
+  const transactions = useMemo(() => {
+    return allCoinsData.transactions.filter(t => t.userId === targetUser?.id);
+  }, [allCoinsData, targetUser?.id]);

-  // Filter transactions for the selectd user
-  const transactions = coins.transactions.filter(t => t.userId === user?.id)
+  const timezone = settings.system.timezone;
+  const [coinsEarnedToday, setCoinsEarnedToday] = useState(0);
+  const [totalEarned, setTotalEarned] = useState(0);
+  const [totalSpent, setTotalSpent] = useState(0);
+  const [coinsSpentToday, setCoinsSpentToday] = useState(0);
+  const [transactionsToday, setTransactionsToday] = useState<number>(0);
+  const [balance, setBalance] = useState(0);

-  const [balance] = useAtom(coinsBalanceAtom)
-  const [coinsEarnedToday] = useAtom(coinsEarnedTodayAtom)
-  const [totalEarned] = useAtom(totalEarnedAtom)
-  const [totalSpent] = useAtom(totalSpentAtom)
-  const [coinsSpentToday] = useAtom(coinsSpentTodayAtom)
-  const [transactionsToday] = useAtom(transactionsTodayAtom)
+  useEffect(() => {
+    // Calculate other metrics
+    if (targetUser?.id && targetUser.id === currentUser?.id) {
+      // If the target user is the currently logged-in user, use the derived atom's value
+      setCoinsEarnedToday(atomCoinsEarnedToday);
+      setTotalEarned(atomTotalEarned);
+      setTotalSpent(atomTotalSpent);
+      setCoinsSpentToday(atomCoinsSpentToday);
+      setTransactionsToday(atomTransactionsToday);
+      setBalance(loggedInUserBalance);
+    } else if (targetUser?.id) {
+      // If an admin is viewing another user, calculate their metrics manually
+      setCoinsEarnedToday(calculateCoinsEarnedToday(transactions, timezone));
+      setTotalEarned(calculateTotalEarned(transactions));
+      setTotalSpent(calculateTotalSpent(transactions));
+      setCoinsSpentToday(calculateCoinsSpentToday(transactions, timezone));
+      setTransactionsToday(calculateTransactionsToday(transactions, timezone));
+      setBalance(transactions.reduce((acc, t) => acc + t.amount, 0));
+    }
+  }, [
+    targetUser?.id,
+    currentUser?.id,
+    transactions, // Memoized: depends on allCoinsData and targetUser?.id
+    timezone,
+    loggedInUserBalance,
+    atomCoinsEarnedToday,
+    atomTotalEarned,
+    atomTotalSpent,
+    atomCoinsSpentToday,
+    atomTransactionsToday,
+  ]);

  const add = async (amount: number, description: string, note?: string) => {
    if (!handlePermissionCheck(currentUser, 'coins', 'write', tCommon)) return null
@@ -77,13 +115,20 @@ export function useCoins(options?: { selectedUser?: string }) {
      })
      return null
    }
+    if (amount > MAX_COIN_LIMIT) {
+      toast({
+        title: t("invalidAmountTitle"),
+        description: t("maxAmountExceededDescription", { max: MAX_COIN_LIMIT })
+      })
+      return null
+    }

    const data = await addCoins({
      amount,
      description,
      type: 'MANUAL_ADJUSTMENT',
      note,
-      userId: user?.id
+      userId: targetUser?.id
    })
    setCoins(data)
    toast({ title: t("successTitle"), description: t("addedCoinsDescription", { amount }) })
@@ -100,13 +145,20 @@ export function useCoins(options?: { selectedUser?: string }) {
      })
      return null
    }
+    if (numAmount > MAX_COIN_LIMIT) {
+      toast({
+        title: t("invalidAmountTitle"),
+        description: t("maxAmountExceededDescription", { max: MAX_COIN_LIMIT })
+      })
+      return null
+    }

    const data = await removeCoins({
      amount: numAmount,
      description,
      type: 'MANUAL_ADJUSTMENT',
      note,
-      userId: user?.id
+      userId: targetUser?.id
    })
    setCoins(data)
    toast({ title: t("successTitle"), description: t("removedCoinsDescription", { amount: numAmount }) })
--- a/hooks/useHabits.tsx
+++ b/hooks/useHabits.tsx
@@ -1,6 +1,6 @@
 import { useAtom, atom } from 'jotai'
 import { useTranslations } from 'next-intl'
-import { habitsAtom, coinsAtom, settingsAtom, usersAtom, habitFreqMapAtom } from '@/lib/atoms'
+import { habitsAtom, coinsAtom, settingsAtom, usersAtom, habitFreqMapAtom, currentUserAtom } 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'
@@ -20,10 +20,10 @@ import {
 } from '@/lib/utils'
 import { ToastAction } from '@/components/ui/toast'
 import { Undo2 } from 'lucide-react'
-import { useHelpers } from '@/lib/client-helpers'
+

 function handlePermissionCheck(
-  user: SafeUser | undefined,
+  user: SafeUser | User | undefined,
  resource: 'habit' | 'wishlist' | 'coins',
  action: 'write' | 'interact',
  tCommon: (key: string, values?: Record<string, any>) => string
@@ -54,7 +54,7 @@ export function useHabits() {
  const t = useTranslations('useHabits');
  const tCommon = useTranslations('Common');
  const [usersData] = useAtom(usersAtom)
-  const { currentUser } = useHelpers()
+  const [currentUser] = useAtom(currentUserAtom)
  const [habitsData, setHabitsData] = useAtom(habitsAtom)
  const [coins, setCoins] = useAtom(coinsAtom)
  const [settings] = useAtom(settingsAtom)
--- a/hooks/useWishlist.tsx
+++ b/hooks/useWishlist.tsx
@@ -1,16 +1,15 @@
 import { useAtom } from 'jotai'
 import { useTranslations } from 'next-intl'
-import { wishlistAtom, coinsAtom } from '@/lib/atoms'
+import { wishlistAtom, coinsAtom, currentUserAtom } from '@/lib/atoms'
 import { saveWishlistItems, removeCoins } from '@/app/actions/data'
 import { toast } from '@/hooks/use-toast'
-import { WishlistItemType } from '@/lib/types'
+import { WishlistItemType, User, SafeUser } from '@/lib/types'
 import { celebrations } from '@/utils/celebrations'
 import { checkPermission } from '@/lib/utils'
-import { useHelpers } from '@/lib/client-helpers'
 import { useCoins } from './useCoins'

 function handlePermissionCheck(
-  user: any, // Consider using a more specific type like SafeUser | User | undefined
+  user: User | SafeUser | undefined,
  resource: 'habit' | 'wishlist' | 'coins',
  action: 'write' | 'interact',
  tCommon: (key: string, values?: Record<string, any>) => string
@@ -39,7 +38,7 @@ function handlePermissionCheck(
 export function useWishlist() {
  const t = useTranslations('useWishlist');
  const tCommon = useTranslations('Common');
-  const { currentUser: user } = useHelpers()
+  const [user] = useAtom(currentUserAtom)
  const [wishlist, setWishlist] = useAtom(wishlistAtom)
  const [coins, setCoins] = useAtom(coinsAtom)
  const { balance } = useCoins()
--- a/lib/atoms.ts
+++ b/lib/atoms.ts
@@ -1,37 +1,46 @@
+import { atom } from "jotai";
 import {
+  getDefaultSettings,
+  getDefaultHabitsData,
+  getDefaultCoinsData,
+  getDefaultWishlistData,
+  Habit,
+  ViewType,
+  getDefaultUsersData,
+  CompletionCache,
+  getDefaultServerSettings,
+  User,
+  UserId,
+} from "./types";
+import {
+  getTodayInTimezone,
+  isSameDate,
+  t2d,
  calculateCoinsEarnedToday,
-  calculateCoinsSpentToday,
  calculateTotalEarned,
  calculateTotalSpent,
+  calculateCoinsSpentToday,
  calculateTransactionsToday,
  getCompletionsForToday,
-  getHabitFreq,
-  getTodayInTimezone,
+  getISODate,
+  isHabitDueToday,
+  getNow,
  isHabitDue,
-  t2d
+  getHabitFreq
 } 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";
+import { Freq } 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
@@ -77,10 +86,26 @@ export const transactionsTodayAtom = atom((get) => {
  return calculateTransactionsToday(coins.transactions, settings.system.timezone);
 });

-// Derived atom for current balance from all transactions
+// Atom to store the current logged-in user's ID.
+// This should be set by your application when the user session is available.
+export const currentUserIdAtom = atom<UserId | undefined>(undefined);
+
+export const currentUserAtom = atom((get) => {
+  const currentUserId = get(currentUserIdAtom);
+  const users = get(usersAtom);
+  return users.users.find(user => user.id === currentUserId);
+})
+
+// Derived atom for current balance for the logged-in user
 export const coinsBalanceAtom = atom((get) => {
+  const loggedInUserId = get(currentUserIdAtom);
+  if (!loggedInUserId) {
+    return 0; // No user logged in or ID not set, so balance is 0
+  }
  const coins = get(coinsAtom);
-  return coins.transactions.reduce((sum, transaction) => sum + transaction.amount, 0);
+  return coins.transactions
+    .filter(transaction => transaction.userId === loggedInUserId)
+    .reduce((sum, transaction) => sum + transaction.amount, 0);
 });

 /* transient atoms */
@@ -99,6 +124,7 @@ export const pomodoroAtom = atom<PomodoroAtom>({
 })

 export const userSelectAtom = atom<boolean>(false)
+export const aboutOpenAtom = atom<boolean>(false)

 // Derived atom for completion cache
 export const completionCacheAtom = atom((get) => {
--- a/lib/client-helpers.ts
+++ b/lib/client-helpers.ts
@@ -1,37 +0,0 @@
-// client helpers
-'use-client'
-
-import { useAtom } from 'jotai'
-import { useSession } from "next-auth/react"
-import { usersAtom } from './atoms'
-import { checkPermission } from './utils'
-
-export function useHelpers() {
-  const { data: session, status } = useSession()
-  const currentUserId = session?.user.id
-  const [usersData] = useAtom(usersAtom)
-  const currentUser = usersData.users.find((u) => u.id === currentUserId)
-  // detect iOS: https://stackoverflow.com/a/9039885
-  function iOS() {
-    return typeof navigator !== "undefined" && ([
-      'iPad Simulator',
-      'iPhone Simulator',
-      'iPod Simulator',
-      'iPad',
-      'iPhone',
-      'iPod',
-    ].includes(navigator.platform)
-    // iPad on iOS 13 detection
-    || (navigator.userAgent.includes("Mac") && "ontouchend" in document))
-  }  
-
-  return {
-    currentUserId,
-    currentUser,
-    usersData,
-    status,
-    hasPermission: (resource: 'habit' | 'wishlist' | 'coins', action: 'write' | 'interact') => currentUser?.isAdmin ||
-      checkPermission(currentUser?.permissions, resource, action),
-    isIOS: iOS(),
-  }
-}
--- a/lib/constants.ts
+++ b/lib/constants.ts
@@ -29,4 +29,6 @@ export const QUICK_DATES = [
  { label: 'Friday', value: 'this friday' },
  { label: 'Saturday', value: 'this saturday' },
  { label: 'Sunday', value: 'this sunday' },
-] as const
+] as const
+
+export const MAX_COIN_LIMIT = 9999
--- a/lib/types.ts
+++ b/lib/types.ts
@@ -183,6 +183,8 @@ export type CompletionCache = {
  }
 }

+export type ViewType = 'habits' | 'tasks'
+
 export interface JotaiHydrateInitialValues {
  settings: Settings;
  coins: CoinsData;
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -2,7 +2,7 @@ import { clsx, type ClassValue } from "clsx"
 import { twMerge } from "tailwind-merge"
 import { DateTime, DateTimeFormatOptions } from "luxon"
 import { datetime, RRule } from 'rrule'
-import { Freq, Habit, CoinTransaction, Permission, ParsedFrequencyResult, ParsedResultType } from '@/lib/types'
+import { Freq, Habit, CoinTransaction, Permission, ParsedFrequencyResult, ParsedResultType, User } from '@/lib/types'
 import { DUE_MAP, INITIAL_DUE, RECURRENCE_RULE_MAP } from "./constants"
 import * as chrono from 'chrono-node'
 import _ from "lodash"
@@ -464,3 +464,20 @@ export function checkPermission(
 export function uuid() {
  return uuidv4()
 }
+
+export function hasPermission(
+  currentUser: User | undefined,
+  resource: 'habit' | 'wishlist' | 'coins',
+  action: 'write' | 'interact'
+): boolean {
+  // If no current user, no permissions.
+  if (!currentUser) {
+    return false;
+  }
+  // If user is admin, they have all permissions.
+  if (currentUser.isAdmin) {
+    return true;
+  }
+  // Otherwise, check specific permissions.
+  return checkPermission(currentUser.permissions, resource, action);
+}
--- a/messages/de.json
+++ b/messages/de.json
@@ -150,7 +150,17 @@
    "selectUserTitle": "Benutzer auswählen",
    "signInSuccessTitle": "Erfolgreich angemeldet",
    "signInSuccessDescription": "Willkommen zurück, {username}!",
-    "errorInvalidPassword": "Ungültiges Passwort"
+    "errorInvalidPassword": "Ungültiges Passwort",
+    "deleteUserConfirmation": "Sind Sie sicher, dass Sie Benutzer {username} löschen möchten? Diese Aktion kann nicht rückgängig gemacht werden.",
+    "confirmDeleteButtonText": "Löschen",
+    "deletingButtonText": "Wird gelöscht...",
+    "deleteUserSuccessTitle": "Benutzer gelöscht",
+    "deleteUserSuccessDescription": "Benutzer {username} wurde erfolgreich gelöscht.",
+    "deleteUserErrorTitle": "Löschen fehlgeschlagen",
+    "genericError": "Ein unerwarteter Fehler ist aufgetreten.",
+    "networkError": "Ein Netzwerkfehler ist aufgetreten. Bitte versuchen Sie es erneut.",
+    "editUserTooltip": "Benutzer bearbeiten",
+    "deleteUserTooltip": "Benutzer löschen"
  },
  "CoinsManager": {
    "title": "Münzverwaltung",
@@ -260,6 +270,12 @@
    "actionUpdate": "aktualisieren",
    "actionCreate": "erstellen",
    "errorFailedUserAction": "Fehler beim {action} des Benutzers",
+    "toastDemoDeleteDisabled": "Löschen ist in der Demo-Instanz deaktiviert",
+    "toastCannotDeleteSelf": "Sie können Ihr eigenes Konto nicht löschen",
+    "confirmDeleteUser": "Sind Sie sicher, dass Sie den Benutzer {username} löschen möchten?",
+    "toastUserDeletedTitle": "Benutzer gelöscht",
+    "toastUserDeletedDescription": "Benutzer {username} wurde erfolgreich gelöscht",
+    "toastDeleteUserFailed": "Fehler beim Löschen des Benutzers: {error}",
    "errorTitle": "Fehler",
    "errorFileSizeLimit": "Die Dateigröße muss kleiner als 5MB sein",
    "toastAvatarUploadedTitle": "Avatar hochgeladen",
@@ -277,7 +293,13 @@
    "disablePasswordLabel": "Passwort deaktivieren",
    "cancelButton": "Abbrechen",
    "saveChangesButton": "Änderungen speichern",
-    "createUserButton": "Benutzer erstellen"
+    "createUserButton": "Benutzer erstellen",
+    "deleteAccountButton": "Konto löschen",
+    "deletingButtonText": "Wird gelöscht...",
+    "areYouSure": "Sind Sie sicher?",
+    "deleteUserConfirmation": "Sind Sie sicher, dass Sie den Benutzer {username} löschen möchten?",
+    "cancel": "Abbrechen",
+    "confirmDeleteButtonText": "Löschen"
  },
  "ViewToggle": {
    "habitsLabel": "Gewohnheiten",
@@ -396,12 +418,18 @@
    "notEnoughCoinsTitle": "Nicht genug Münzen",
    "notEnoughCoinsDescription": "Sie benötigen {coinsNeeded} Münzen mehr, um diese Belohnung einzulösen."
  },
+  "Warning": {
+    "areYouSure": "Sind Sie sicher?",
+    "cancel": "Abbrechen"
+  },
  "useCoins": {
+    "addedCoinsDescription": "{amount} Münzen hinzugefügt",
    "invalidAmountTitle": "Ungültiger Betrag",
    "invalidAmountDescription": "Bitte geben Sie eine gültige positive Zahl ein",
    "successTitle": "Erfolg",
-    "addedCoinsDescription": "{amount} Münzen hinzugefügt",
-    "removedCoinsDescription": "{amount} Münzen entfernt",
-    "transactionNotFoundDescription": "Transaktion nicht gefunden"
+    "transactionNotFoundDescription": "Transaktion nicht gefunden",
+    "maxAmountExceededDescription": "Der Betrag darf {max} nicht überschreiten.",
+    "transactionNotFoundDescription": "Transaktion nicht gefunden",
+    "maxAmountExceededDescription": "Der Betrag darf {max} nicht überschreiten."
  }
 }
--- a/messages/en.json
+++ b/messages/en.json
@@ -150,7 +150,17 @@
    "selectUserTitle": "Select User",
    "signInSuccessTitle": "Signed in successfully",
    "signInSuccessDescription": "Welcome back, {username}!",
-    "errorInvalidPassword": "invalid password"
+    "errorInvalidPassword": "invalid password",
+    "deleteUserConfirmation": "Are you sure you want to delete user {username}? This action cannot be undone.",
+    "confirmDeleteButtonText": "Delete",
+    "deletingButtonText": "Deleting...",
+    "deleteUserSuccessTitle": "User Deleted",
+    "deleteUserSuccessDescription": "User {username} has been successfully deleted.",
+    "deleteUserErrorTitle": "Deletion Failed",
+    "genericError": "An unexpected error occurred.",
+    "networkError": "A network error occurred. Please try again.",
+    "deleteUserTooltip": "Delete user",
+    "editUserTooltip": "Edit user"
  },
  "CoinsManager": {
    "title": "Coins Management",
@@ -277,7 +287,8 @@
    "disablePasswordLabel": "Disable password",
    "cancelButton": "Cancel",
    "saveChangesButton": "Save Changes",
-    "createUserButton": "Create User"
+    "createUserButton": "Create User",
+    "deleteAccountButton": "Delete Account"
  },
  "ViewToggle": {
    "habitsLabel": "Habits",
@@ -397,11 +408,17 @@
    "notEnoughCoinsDescription": "You need {coinsNeeded} more coins to redeem this reward."
  },
  "useCoins": {
+    "addedCoinsDescription": "Added {amount} coins",
    "invalidAmountTitle": "Invalid amount",
    "invalidAmountDescription": "Please enter a valid positive number",
    "successTitle": "Success",
-    "addedCoinsDescription": "Added {amount} coins",
-    "removedCoinsDescription": "Removed {amount} coins",
-    "transactionNotFoundDescription": "Transaction not found"
+    "transactionNotFoundDescription": "Transaction not found",
+    "maxAmountExceededDescription": "The amount cannot exceed {max}.",
+    "transactionNotFoundDescription": "Transaction not found",
+    "maxAmountExceededDescription": "The amount cannot exceed {max}."
+  },
+  "Warning": {
+    "areYouSure": "Are you sure?",
+    "cancel": "Cancel"
  }
 }
--- a/messages/es.json
+++ b/messages/es.json
@@ -4,7 +4,7 @@
  },
  "HabitList": {
    "myTasks": "Mis tareas",
-    "myHabits": "Mis hábitos", 
+    "myHabits": "Mis hábitos",
    "addTaskButton": "Añadir tarea",
    "addHabitButton": "Añadir hábito",
    "searchTasksPlaceholder": "Buscar tareas...",
@@ -150,7 +150,17 @@
    "selectUserTitle": "Seleccionar usuario",
    "signInSuccessTitle": "Inicio de sesión exitoso",
    "signInSuccessDescription": "¡Bienvenido de nuevo, {username}!",
-    "errorInvalidPassword": "contraseña inválida"
+    "errorInvalidPassword": "contraseña inválida",
+    "deleteUserConfirmation": "¿Estás seguro de que quieres eliminar al usuario {username}? Esta acción no se puede deshacer.",
+    "confirmDeleteButtonText": "Eliminar",
+    "deletingButtonText": "Eliminando...",
+    "deleteUserSuccessTitle": "Usuario eliminado",
+    "deleteUserSuccessDescription": "El usuario {username} ha sido eliminado correctamente.",
+    "deleteUserErrorTitle": "Error al eliminar",
+    "genericError": "Ocurrió un error inesperado.",
+    "networkError": "Ocurrió un error de red. Por favor, inténtalo de nuevo.",
+    "editUserTooltip": "Editar usuario",
+    "deleteUserTooltip": "Eliminar usuario"
  },
  "CoinsManager": {
    "title": "Gestión de monedas",
@@ -190,7 +200,7 @@
    "focusLabel2": "Tú puedes",
    "focusLabel3": "Sigue adelante",
    "focusLabel4": "Hazlo",
-    "focusLabel5": "Haz que suceda", 
+    "focusLabel5": "Haz que suceda",
    "focusLabel6": "Mantente fuerte",
    "focusLabel7": "Esfuérzate",
    "focusLabel8": "Un paso a la vez",
@@ -260,6 +270,12 @@
    "actionUpdate": "actualizar",
    "actionCreate": "crear",
    "errorFailedUserAction": "Error al {action} usuario",
+    "toastDemoDeleteDisabled": "La eliminación está deshabilitada en la instancia demo",
+    "toastCannotDeleteSelf": "No puedes eliminar tu propia cuenta",
+    "confirmDeleteUser": "¿Estás seguro de que deseas eliminar al usuario {username}?",
+    "toastUserDeletedTitle": "Usuario eliminado",
+    "toastUserDeletedDescription": "El usuario {username} ha sido eliminado correctamente",
+    "toastDeleteUserFailed": "Error al eliminar el usuario: {error}",
    "errorTitle": "Error",
    "errorFileSizeLimit": "El tamaño del archivo debe ser menor a 5MB",
    "toastAvatarUploadedTitle": "Avatar subido",
@@ -277,7 +293,13 @@
    "disablePasswordLabel": "Desactivar contraseña",
    "cancelButton": "Cancelar",
    "saveChangesButton": "Guardar cambios",
-    "createUserButton": "Crear usuario"
+    "createUserButton": "Crear usuario",
+    "deleteAccountButton": "Eliminar cuenta",
+    "deletingButtonText": "Eliminando...",
+    "areYouSure": "¿Estás seguro?",
+    "deleteUserConfirmation": "¿Estás seguro de que deseas eliminar al usuario {username}?",
+    "cancel": "Cancelar",
+    "confirmDeleteButtonText": "Eliminar"
  },
  "ViewToggle": {
    "habitsLabel": "Hábitos",
@@ -396,12 +418,18 @@
    "notEnoughCoinsTitle": "No hay suficientes monedas",
    "notEnoughCoinsDescription": "Necesitas {coinsNeeded} monedas más para canjear esta recompensa."
  },
+  "Warning": {
+    "areYouSure": "¿Estás seguro?",
+    "cancel": "Cancelar"
+  },
  "useCoins": {
+    "addedCoinsDescription": "Se añadieron {amount} monedas",
    "invalidAmountTitle": "Cantidad inválida",
    "invalidAmountDescription": "Por favor ingresa un número positivo válido",
    "successTitle": "Éxito",
-    "addedCoinsDescription": "Añadidas {amount} monedas",
-    "removedCoinsDescription": "Quitadas {amount} monedas",
-    "transactionNotFoundDescription": "Transacción no encontrada"
+    "transactionNotFoundDescription": "Transacción no encontrada",
+    "maxAmountExceededDescription": "La cantidad no puede exceder {max}.",
+    "transactionNotFoundDescription": "Transacción no encontrada",
+    "maxAmountExceededDescription": "La cantidad no puede exceder {max}."
  }
 }
--- a/messages/fr.json
+++ b/messages/fr.json
@@ -150,7 +150,17 @@
    "selectUserTitle": "Sélectionner un utilisateur",
    "signInSuccessTitle": "Connecté avec succès",
    "signInSuccessDescription": "Bienvenue, {username} !",
-    "errorInvalidPassword": "mot de passe invalide"
+    "errorInvalidPassword": "mot de passe invalide",
+    "deleteUserConfirmation": "Êtes-vous sûr de vouloir supprimer l'utilisateur {username} ? Cette action est irréversible.",
+    "confirmDeleteButtonText": "Supprimer",
+    "deletingButtonText": "Suppression en cours...",
+    "deleteUserSuccessTitle": "Utilisateur supprimé",
+    "deleteUserSuccessDescription": "L'utilisateur {username} a été supprimé avec succès.",
+    "deleteUserErrorTitle": "Échec de la suppression",
+    "genericError": "Une erreur inattendue s'est produite.",
+    "networkError": "Une erreur réseau s'est produite. Veuillez réessayer.",
+    "editUserTooltip": "Modifier l'utilisateur",
+    "deleteUserTooltip": "Supprimer l'utilisateur"
  },
  "CoinsManager": {
    "title": "Gestion des pièces",
@@ -260,6 +270,12 @@
    "actionUpdate": "mise à jour",
    "actionCreate": "création",
    "errorFailedUserAction": "Échec de la {action} de l'utilisateur",
+    "toastDemoDeleteDisabled": "La suppression est désactivée dans la version de démonstration",
+    "toastCannotDeleteSelf": "Vous ne pouvez pas supprimer votre propre compte",
+    "confirmDeleteUser": "Êtes-vous sûr de vouloir supprimer l'utilisateur {username}?",
+    "toastUserDeletedTitle": "Utilisateur supprimé",
+    "toastUserDeletedDescription": "L'utilisateur {username} a été supprimé avec succès",
+    "toastDeleteUserFailed": "Échec de la suppression de l'utilisateur : {error}",
    "errorTitle": "Erreur",
    "errorFileSizeLimit": "La taille du fichier doit être inférieure à 5MB",
    "toastAvatarUploadedTitle": "Avatar téléchargé",
@@ -277,7 +293,13 @@
    "disablePasswordLabel": "Désactiver le mot de passe",
    "cancelButton": "Annuler",
    "saveChangesButton": "Sauvegarder les modifications",
-    "createUserButton": "Créer un utilisateur"
+    "createUserButton": "Créer un utilisateur",
+    "deleteAccountButton": "Supprimer le compte",
+    "deletingButtonText": "Suppression en cours...",
+    "areYouSure": "Êtes-vous sûr ?",
+    "deleteUserConfirmation": "Êtes-vous sûr de vouloir supprimer l'utilisateur {username} ?",
+    "cancel": "Annuler",
+    "confirmDeleteButtonText": "Supprimer"
  },
  "ViewToggle": {
    "habitsLabel": "Habitudes",
@@ -396,12 +418,18 @@
    "notEnoughCoinsTitle": "Pas assez de pièces",
    "notEnoughCoinsDescription": "Il vous manque {coinsNeeded} pièces pour échanger cette récompense."
  },
+  "Warning": {
+    "areYouSure": "Êtes-vous sûr ?",
+    "cancel": "Annuler"
+  },
  "useCoins": {
+    "addedCoinsDescription": "{amount} pièces ajoutées",
    "invalidAmountTitle": "Montant invalide",
    "invalidAmountDescription": "Veuillez entrer un nombre positif valide",
    "successTitle": "Succès",
-    "addedCoinsDescription": "Ajouté {amount} pièces",
-    "removedCoinsDescription": "Retiré {amount} pièces",
-    "transactionNotFoundDescription": "Transaction non trouvée"
+    "transactionNotFoundDescription": "Transaction non trouvée",
+    "maxAmountExceededDescription": "Le montant ne peut pas dépasser {max}.",
+    "transactionNotFoundDescription": "Transaction non trouvée",
+    "maxAmountExceededDescription": "Le montant ne peut pas dépasser {max}."
  }
 }
--- a/messages/ja.json
+++ b/messages/ja.json
@@ -53,7 +53,7 @@
  "HabitContextMenuItems": {
    "startPomodoro": "ポモドーロを開始",
    "moveToToday": "今日に移動",
-    "moveToTomorrow": "明日に移動", 
+    "moveToTomorrow": "明日に移動",
    "unpin": "ピン留めを解除",
    "pin": "ピン留めする",
    "edit": "編集",
@@ -81,7 +81,7 @@
    "completeLabel": "完了",
    "timesSuffix": "回",
    "rewardLabel": "報酬",
-    "coinsSuffix": "コイン", 
+    "coinsSuffix": "コイン",
    "shareLabel": "共有",
    "saveChangesButton": "変更を保存",
    "addTaskButton": "タスクを追加",
@@ -110,11 +110,11 @@
    "addButton": "報酬を追加"
  },
  "Navigation": {
-    "dashboard": "ダッシュボード", 
+    "dashboard": "ダッシュボード",
    "tasks": "タスク",
    "habits": "習慣",
    "calendar": "カレンダー",
-    "wishlist": "ウィッシュリスト", 
+    "wishlist": "ウィッシュリスト",
    "coins": "コイン"
  },
  "TodayEarnedCoins": {
@@ -150,7 +150,17 @@
    "selectUserTitle": "ユーザーを選択",
    "signInSuccessTitle": "サインインに成功しました",
    "signInSuccessDescription": "おかえりなさい、{username}さん！",
-    "errorInvalidPassword": "パスワードが無効です"
+    "errorInvalidPassword": "パスワードが無効です",
+    "deleteUserConfirmation": "ユーザー {username} を削除してもよろしいですか？この操作は元に戻せません。",
+    "confirmDeleteButtonText": "削除",
+    "deletingButtonText": "削除中...",
+    "deleteUserSuccessTitle": "ユーザーが削除されました",
+    "deleteUserSuccessDescription": "ユーザー {username} は正常に削除されました。",
+    "deleteUserErrorTitle": "削除に失敗しました",
+    "genericError": "予期しないエラーが発生しました。",
+    "networkError": "ネットワークエラーが発生しました。もう一度お試しください。",
+    "editUserTooltip": "ユーザーを編集",
+    "deleteUserTooltip": "ユーザーを削除"
  },
  "CoinsManager": {
    "title": "コイン管理",
@@ -167,7 +177,7 @@
    "todaysTransactionsLabel": "今日の取引数",
    "transactionHistoryTitle": "取引履歴",
    "showLabel": "表示:",
-    "entriesSuffix": "件", 
+    "entriesSuffix": "件",
    "showingEntries": "{from} から {to} 件（全 {total} 件）",
    "noTransactionsTitle": "取引履歴がありません",
    "noTransactionsDescription": "コインを獲得または使用すると、ここに取引履歴が表示されます",
@@ -215,7 +225,7 @@
    "wakeLockNotSupported": "ブラウザがWake Lockをサポートしていません",
    "wakeLockInUse": "Wake Lockは既に使用中です",
    "wakeLockRequestError": "Wake Lockのリクエストエラー:",
-    "wakeLockReleaseError": "Wake Lockの解放エラー:" 
+    "wakeLockReleaseError": "Wake Lockの解放エラー:"
  },
  "HabitCalendar": {
    "title": "習慣カレンダー",
@@ -260,6 +270,12 @@
    "actionUpdate": "更新",
    "actionCreate": "作成",
    "errorFailedUserAction": "ユーザーの{action}に失敗しました",
+    "toastDemoDeleteDisabled": "デモインスタンスでは削除が無効になっています",
+    "toastCannotDeleteSelf": "自分のアカウントは削除できません",
+    "confirmDeleteUser": "ユーザー {username} を削除してもよろしいですか？",
+    "toastUserDeletedTitle": "ユーザーが削除されました",
+    "toastUserDeletedDescription": "ユーザー {username} は正常に削除されました",
+    "toastDeleteUserFailed": "ユーザーの削除に失敗しました: {error}",
    "errorTitle": "エラー",
    "errorFileSizeLimit": "ファイルサイズは5MB以下である必要があります",
    "toastAvatarUploadedTitle": "アバターをアップロードしました",
@@ -277,7 +293,13 @@
    "disablePasswordLabel": "パスワードを無効化",
    "cancelButton": "キャンセル",
    "saveChangesButton": "変更を保存",
-    "createUserButton": "ユーザーを作成"
+    "createUserButton": "ユーザーを作成",
+    "deleteAccountButton": "アカウントを削除",
+    "deletingButtonText": "削除中...",
+    "areYouSure": "本当によろしいですか？",
+    "deleteUserConfirmation": "ユーザー {username} を削除してもよろしいですか？",
+    "cancel": "キャンセル",
+    "confirmDeleteButtonText": "削除"
  },
  "ViewToggle": {
    "habitsLabel": "習慣",
@@ -304,7 +326,7 @@
    "pleaseTryAgainDescription": "再度お試しください",
    "addNotePlaceholder": "メモを追加...",
    "saveNoteTitle": "メモを保存",
-    "cancelButtonTitle": "キャンセル", 
+    "cancelButtonTitle": "キャンセル",
    "deleteNoteTitle": "メモを削除",
    "editNoteAriaLabel": "メモを編集"
  },
@@ -323,12 +345,12 @@
  },
  "PasswordEntryForm": {
    "notYouButton": "違うユーザー？",
-    "passwordLabel": "パスワード", 
+    "passwordLabel": "パスワード",
    "passwordPlaceholder": "パスワードを入力",
    "loginErrorToastTitle": "エラー",
    "loginFailedErrorToastDescription": "ログインに失敗しました",
    "cancelButton": "キャンセル",
-    "loginButton": "ログイン" 
+    "loginButton": "ログイン"
  },
  "CompletionCountBadge": {
    "countCompleted": "完了 {completedCount}/{totalCount}"
@@ -396,12 +418,18 @@
    "notEnoughCoinsTitle": "コインが不足しています",
    "notEnoughCoinsDescription": "この報酬を使用するにはあと{coinsNeeded}コイン必要です。"
  },
+  "Warning": {
+    "areYouSure": "本当によろしいですか？",
+    "cancel": "キャンセル"
+  },
  "useCoins": {
+    "addedCoinsDescription": "{amount}コインを追加しました",
    "invalidAmountTitle": "無効な値です",
    "invalidAmountDescription": "有効な正の数を入力してください",
    "successTitle": "成功しました",
-    "addedCoinsDescription": "{amount}コインを追加しました",
-    "removedCoinsDescription": "{amount}コインを削除しました",
-    "transactionNotFoundDescription": "取引が見つかりません"
+    "transactionNotFoundDescription": "取引が見つかりません",
+    "maxAmountExceededDescription": "金額は{max}を超えることはできません。",
+    "transactionNotFoundDescription": "取引が見つかりません",
+    "maxAmountExceededDescription": "金額は{max}を超えることはできません。"
  }
 }
--- a/messages/ru.json
+++ b/messages/ru.json
@@ -150,7 +150,17 @@
    "selectUserTitle": "Выбрать пользователя",
    "signInSuccessTitle": "Успешный вход",
    "signInSuccessDescription": "Добро пожаловать, {username}!",
-    "errorInvalidPassword": "Неверный пароль"
+    "errorInvalidPassword": "Неверный пароль",
+    "deleteUserConfirmation": "Вы уверены, что хотите удалить пользователя {username}? Это действие нельзя отменить.",
+    "confirmDeleteButtonText": "Удалить",
+    "deletingButtonText": "Удаление...",
+    "deleteUserSuccessTitle": "Пользователь удален",
+    "deleteUserSuccessDescription": "Пользователь {username} успешно удален.",
+    "deleteUserErrorTitle": "Ошибка удаления",
+    "genericError": "Произошла непредвиденная ошибка.",
+    "networkError": "Произошла сетевая ошибка. Пожалуйста, попробуйте еще раз.",
+    "editUserTooltip": "Редактировать пользователя",
+    "deleteUserTooltip": "Удалить пользователя"
  },
  "CoinsManager": {
    "title": "Управление монетами",
@@ -260,6 +270,12 @@
    "actionUpdate": "обновить",
    "actionCreate": "создать",
    "errorFailedUserAction": "Не удалось {action} пользователя",
+    "toastDemoDeleteDisabled": "Удаление отключено в демо-версии",
+    "toastCannotDeleteSelf": "Вы не можете удалить свою учетную запись",
+    "confirmDeleteUser": "Вы уверены, что хотите удалить пользователя {username}?",
+    "toastUserDeletedTitle": "Пользователь удален",
+    "toastUserDeletedDescription": "Пользователь {username} успешно удален",
+    "toastDeleteUserFailed": "Не удалось удалить пользователя: {error}",
    "errorTitle": "Ошибка",
    "errorFileSizeLimit": "Размер файла должен быть менее 5 МБ",
    "toastAvatarUploadedTitle": "Аватар загружен",
@@ -277,7 +293,13 @@
    "disablePasswordLabel": "Отключить пароль",
    "cancelButton": "Отмена",
    "saveChangesButton": "Сохранить изменения",
-    "createUserButton": "Создать пользователя"
+    "createUserButton": "Создать пользователя",
+    "deleteAccountButton": "Удалить аккаунт",
+    "deletingButtonText": "Удаление...",
+    "areYouSure": "Вы уверены?",
+    "deleteUserConfirmation": "Вы уверены, что хотите удалить пользователя {username}?",
+    "cancel": "Отмена",
+    "confirmDeleteButtonText": "Удалить"
  },
  "ViewToggle": {
    "habitsLabel": "Привычки",
@@ -396,12 +418,18 @@
    "notEnoughCoinsTitle": "Недостаточно монет",
    "notEnoughCoinsDescription": "Вам нужно еще {coinsNeeded} монет, чтобы получить эту награду."
  },
+  "Warning": {
+    "areYouSure": "Вы уверены?",
+    "cancel": "Отмена"
+  },
  "useCoins": {
+    "addedCoinsDescription": "Добавлено {amount} монет",
    "invalidAmountTitle": "Неверная сумма",
    "invalidAmountDescription": "Пожалуйста, введите положительное число",
    "successTitle": "Успех",
-    "addedCoinsDescription": "Добавлено {amount} монет",
-    "removedCoinsDescription": "Удалено {amount} монет",
-    "transactionNotFoundDescription": "Транзакция не найдена"
+    "transactionNotFoundDescription": "Транзакция не найдена",
+    "maxAmountExceededDescription": "Сумма не может превышать {max}.",
+    "transactionNotFoundDescription": "Транзакция не найдена",
+    "maxAmountExceededDescription": "Сумма не может превышать {max}."
  }
 }
--- a/messages/zh.json
+++ b/messages/zh.json
@@ -150,7 +150,17 @@
    "selectUserTitle": "选择用户",
    "signInSuccessTitle": "登录成功",
    "signInSuccessDescription": "欢迎回来，{username}！",
-    "errorInvalidPassword": "密码错误"
+    "errorInvalidPassword": "密码错误",
+    "deleteUserConfirmation": "您确定要删除用户 {username} 吗？此操作无法撤销。",
+    "confirmDeleteButtonText": "删除",
+    "deletingButtonText": "正在删除...",
+    "deleteUserSuccessTitle": "用户已删除",
+    "deleteUserSuccessDescription": "用户 {username} 已成功删除。",
+    "deleteUserErrorTitle": "删除失败",
+    "genericError": "发生意外错误。",
+    "networkError": "发生网络错误。请再试一次。",
+    "editUserTooltip": "编辑用户",
+    "deleteUserTooltip": "删除用户"
  },
  "CoinsManager": {
    "title": "金币管理",
@@ -260,6 +270,12 @@
    "actionUpdate": "更新",
    "actionCreate": "创建",
    "errorFailedUserAction": "用户 {action} 失败",
+    "toastDemoDeleteDisabled": "在演示实例中删除已禁用",
+    "toastCannotDeleteSelf": "您不能删除自己的帐户",
+    "confirmDeleteUser": "您确定要删除用户 {username} 吗？",
+    "toastUserDeletedTitle": "用户已删除",
+    "toastUserDeletedDescription": "用户 {username} 已成功删除",
+    "toastDeleteUserFailed": "删除用户失败: {error}",
    "errorTitle": "错误",
    "errorFileSizeLimit": "文件大小必须小于 5MB",
    "toastAvatarUploadedTitle": "头像已上传",
@@ -277,7 +293,13 @@
    "disablePasswordLabel": "禁用密码",
    "cancelButton": "取消",
    "saveChangesButton": "保存更改",
-    "createUserButton": "创建用户"
+    "createUserButton": "创建用户",
+    "deleteAccountButton": "删除账户",
+    "deletingButtonText": "正在删除...",
+    "areYouSure": "您确定吗？",
+    "deleteUserConfirmation": "您确定要删除用户 {username} 吗？",
+    "cancel": "取消",
+    "confirmDeleteButtonText": "删除"
  },
  "ViewToggle": {
    "habitsLabel": "习惯",
@@ -396,12 +418,18 @@
    "notEnoughCoinsTitle": "金币不足",
    "notEnoughCoinsDescription": "您还需要{coinsNeeded}金币才能兑换此奖励。"
  },
+  "Warning": {
+    "areYouSure": "您确定吗？",
+    "cancel": "取消"
+  },
  "useCoins": {
+    "addedCoinsDescription": "已添加 {amount} 个金币",
    "invalidAmountTitle": "无效金额",
    "invalidAmountDescription": "请输入有效的正数",
    "successTitle": "成功",
-    "addedCoinsDescription": "添加了{amount}金币",
-    "removedCoinsDescription": "移除了{amount}金币",
-    "transactionNotFoundDescription": "未找到交易记录"
+    "transactionNotFoundDescription": "未找到交易记录",
+    "maxAmountExceededDescription": "金额不能超过 {max}。",
+    "transactionNotFoundDescription": "未找到交易记录",
+    "maxAmountExceededDescription": "金额不能超过 {max}。"
  }
 }
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,16 +1,17 @@
 {
  "name": "habittrove",
-  "version": "0.2.11",
+  "version": "0.2.13",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "habittrove",
-      "version": "0.2.11",
+      "version": "0.2.13",
      "dependencies": {
        "@emoji-mart/data": "^1.2.1",
        "@emoji-mart/react": "^1.1.1",
        "@next/font": "^14.2.15",
+        "@radix-ui/react-alert-dialog": "^1.1.14",
        "@radix-ui/react-avatar": "^1.1.2",
        "@radix-ui/react-context-menu": "^2.2.4",
        "@radix-ui/react-dialog": "^1.1.4",
@@ -21,7 +22,7 @@
        "@radix-ui/react-scroll-area": "^1.2.4",
        "@radix-ui/react-select": "^2.1.4",
        "@radix-ui/react-separator": "^1.1.3",
-        "@radix-ui/react-slot": "^1.1.1",
+        "@radix-ui/react-slot": "^1.2.3",
        "@radix-ui/react-switch": "^1.1.2",
        "@radix-ui/react-toast": "^1.2.4",
        "@radix-ui/react-tooltip": "^1.1.6",
@@ -1060,6 +1061,93 @@
      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.1.tgz",
      "integrity": "sha512-SJ31y+Q/zAyShtXJc8x83i9TYdbAfHZ++tUZnvjJJqFjzsdUnKsxPL6IEtBlxKkU7yzer//GQtZSV4GbldL3YA=="
    },
+    "node_modules/@radix-ui/react-alert-dialog": {
+      "version": "1.1.14",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-alert-dialog/-/react-alert-dialog-1.1.14.tgz",
+      "integrity": "sha512-IOZfZ3nPvN6lXpJTBCunFQPRSvK8MDgSc1FB85xnIpUKOw9en0dJj8JmCAxV7BiZdtYlUpmrQjoTFkVYtdoWzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dialog": "1.1.14",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-alert-dialog/node_modules/@radix-ui/primitive": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.2.tgz",
+      "integrity": "sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-alert-dialog/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
+      "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-alert-dialog/node_modules/@radix-ui/react-context": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-alert-dialog/node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@radix-ui/react-arrow": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.1.tgz",
@@ -1132,6 +1220,24 @@
        }
      }
    },
+    "node_modules/@radix-ui/react-collection/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.1.tgz",
+      "integrity": "sha512-RApLLOcINYJA+dMVbOju7MYv1Mb2EBp2nH4HdDzXTSyaR5optlm6Otrz1euW3HbdOR8UmmFK06TD+A9frYWv+g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@radix-ui/react-compose-refs": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.1.tgz",
@@ -1188,24 +1294,25 @@
      }
    },
    "node_modules/@radix-ui/react-dialog": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.4.tgz",
-      "integrity": "sha512-Ur7EV1IwQGCyaAuyDRiOLA5JIUZxELJljF+MbM/2NC0BYwfuRrbpS30BiQBJrVruscgUkieKkqXYDOoByaxIoA==",
+      "version": "1.1.14",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.14.tgz",
+      "integrity": "sha512-+CpweKjqpzTmwRwcYECQcNYbI8V9VSQt0SNFKeEBLgfucbsLssU6Ppq7wUdNXEGb573bMjFhVjKVll8rmV6zMw==",
+      "license": "MIT",
      "dependencies": {
-        "@radix-ui/primitive": "1.1.1",
-        "@radix-ui/react-compose-refs": "1.1.1",
-        "@radix-ui/react-context": "1.1.1",
-        "@radix-ui/react-dismissable-layer": "1.1.3",
-        "@radix-ui/react-focus-guards": "1.1.1",
-        "@radix-ui/react-focus-scope": "1.1.1",
-        "@radix-ui/react-id": "1.1.0",
-        "@radix-ui/react-portal": "1.1.3",
-        "@radix-ui/react-presence": "1.1.2",
-        "@radix-ui/react-primitive": "2.0.1",
-        "@radix-ui/react-slot": "1.1.1",
-        "@radix-ui/react-use-controllable-state": "1.1.0",
-        "aria-hidden": "^1.1.1",
-        "react-remove-scroll": "^2.6.1"
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.10",
+        "@radix-ui/react-focus-guards": "1.1.2",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
      },
      "peerDependencies": {
        "@types/react": "*",
@@ -1222,6 +1329,265 @@
        }
      }
    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/primitive": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.2.tgz",
+      "integrity": "sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
+      "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-context": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.10",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.10.tgz",
+      "integrity": "sha512-IM1zzRV4W3HtVgftdQiiOmA0AdJlCtMLe00FXaHwgt3rAnNsIyDqshvkIW3hj/iu5hu8ERP7KIYki6NkqDxAwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-escape-keydown": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.2.tgz",
+      "integrity": "sha512-fyjAACV62oPV925xFCrH8DR5xWhg9KYtJT4s3u54jxp+L/hbpTY2kIeEFFbFe+a/HCE94zGQMZLIpVTPVZDhaA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.7.tgz",
+      "integrity": "sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-id": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz",
+      "integrity": "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-portal": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.9.tgz",
+      "integrity": "sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-presence": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.4.tgz",
+      "integrity": "sha512-ueDqRbdc4/bkaQT3GIpLQssRlFgWaL/U2z/S31qRwwLWoxHLgry3SIfCwhxeQNbirEUXFa+lq3RL3oBYXtcmIA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
+      "integrity": "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz",
+      "integrity": "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-effect-event": "0.0.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.1.tgz",
+      "integrity": "sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
+      "integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@radix-ui/react-direction": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.0.tgz",
@@ -1406,6 +1772,24 @@
        }
      }
    },
+    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.1.tgz",
+      "integrity": "sha512-RApLLOcINYJA+dMVbOju7MYv1Mb2EBp2nH4HdDzXTSyaR5optlm6Otrz1euW3HbdOR8UmmFK06TD+A9frYWv+g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@radix-ui/react-popover": {
      "version": "1.1.4",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.4.tgz",
@@ -1442,6 +1826,24 @@
        }
      }
    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.1.tgz",
+      "integrity": "sha512-RApLLOcINYJA+dMVbOju7MYv1Mb2EBp2nH4HdDzXTSyaR5optlm6Otrz1euW3HbdOR8UmmFK06TD+A9frYWv+g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@radix-ui/react-popper": {
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.1.tgz",
@@ -1541,6 +1943,24 @@
        }
      }
    },
+    "node_modules/@radix-ui/react-primitive/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.1.tgz",
+      "integrity": "sha512-RApLLOcINYJA+dMVbOju7MYv1Mb2EBp2nH4HdDzXTSyaR5optlm6Otrz1euW3HbdOR8UmmFK06TD+A9frYWv+g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@radix-ui/react-progress": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-progress/-/react-progress-1.1.1.tgz",
@@ -1819,6 +2239,24 @@
        }
      }
    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.1.tgz",
+      "integrity": "sha512-RApLLOcINYJA+dMVbOju7MYv1Mb2EBp2nH4HdDzXTSyaR5optlm6Otrz1euW3HbdOR8UmmFK06TD+A9frYWv+g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@radix-ui/react-separator": {
      "version": "1.1.3",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.3.tgz",
@@ -1899,11 +2337,12 @@
      }
    },
    "node_modules/@radix-ui/react-slot": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.1.tgz",
-      "integrity": "sha512-RApLLOcINYJA+dMVbOju7MYv1Mb2EBp2nH4HdDzXTSyaR5optlm6Otrz1euW3HbdOR8UmmFK06TD+A9frYWv+g==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
      "dependencies": {
-        "@radix-ui/react-compose-refs": "1.1.1"
+        "@radix-ui/react-compose-refs": "1.1.2"
      },
      "peerDependencies": {
        "@types/react": "*",
@@ -1915,6 +2354,21 @@
        }
      }
    },
+    "node_modules/@radix-ui/react-slot/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
+      "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@radix-ui/react-switch": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.1.2.tgz",
@@ -2009,6 +2463,24 @@
        }
      }
    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.1.tgz",
+      "integrity": "sha512-RApLLOcINYJA+dMVbOju7MYv1Mb2EBp2nH4HdDzXTSyaR5optlm6Otrz1euW3HbdOR8UmmFK06TD+A9frYWv+g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@radix-ui/react-use-callback-ref": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz",
@@ -2040,6 +2512,39 @@
        }
      }
    },
+    "node_modules/@radix-ui/react-use-effect-event": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.2.tgz",
+      "integrity": "sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-effect-event/node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
+      "integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@radix-ui/react-use-escape-keydown": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.0.tgz",
@@ -7987,15 +8492,16 @@
      }
    },
    "node_modules/react-remove-scroll": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.6.2.tgz",
-      "integrity": "sha512-KmONPx5fnlXYJQqC62Q+lwIeAk64ws/cUw6omIumRzMRPqgnYqhSSti99nbj0Ry13bv7dF+BKn7NB+OqkdZGTw==",
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.7.0.tgz",
+      "integrity": "sha512-sGsQtcjMqdQyijAHytfGEELB8FufGbfXIsvUTe+NLx1GDRJCXtCFLBLUI1eyZCKXXvbEU2C6gai0PZKoIE9Vbg==",
+      "license": "MIT",
      "dependencies": {
        "react-remove-scroll-bar": "^2.3.7",
-        "react-style-singleton": "^2.2.1",
+        "react-style-singleton": "^2.2.3",
        "tslib": "^2.1.0",
        "use-callback-ref": "^1.3.3",
-        "use-sidecar": "^1.1.2"
+        "use-sidecar": "^1.1.3"
      },
      "engines": {
        "node": ">=10"
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "habittrove",
-  "version": "0.2.13",
+  "version": "0.2.20",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack",
@@ -18,6 +18,7 @@
    "@emoji-mart/data": "^1.2.1",
    "@emoji-mart/react": "^1.1.1",
    "@next/font": "^14.2.15",
+    "@radix-ui/react-alert-dialog": "^1.1.14",
    "@radix-ui/react-avatar": "^1.1.2",
    "@radix-ui/react-context-menu": "^2.2.4",
    "@radix-ui/react-dialog": "^1.1.4",
@@ -28,7 +29,7 @@
    "@radix-ui/react-scroll-area": "^1.2.4",
    "@radix-ui/react-select": "^2.1.4",
    "@radix-ui/react-separator": "^1.1.3",
-    "@radix-ui/react-slot": "^1.1.1",
+    "@radix-ui/react-slot": "^1.2.3",
    "@radix-ui/react-switch": "^1.1.2",
    "@radix-ui/react-toast": "^1.2.4",
    "@radix-ui/react-tooltip": "^1.1.6",
@@ -44,7 +45,6 @@
    "js-confetti": "^0.12.0",
    "linkify": "^0.2.1",
    "linkify-react": "^4.2.0",
-    "lodash": "^4.17.21",
    "lucide-react": "^0.469.0",
    "luxon": "^3.5.0",
    "next": "15.2.3",
Author	SHA1	Message	Date
dohsimpson	5ae659469b	fix infinite render	2025-05-28 17:43:28 -04:00
dohsimpson	6ef4aacfb8	fix coin balance	2025-05-28 17:17:13 -04:00
dohsimpson	95203426a3	fix modal and invalid frequency	2025-05-27 02:42:13 -04:00
Doh	b673d54ede	Added improved loading screen (#148 )	2025-05-26 08:42:00 -04:00
Doh	42c8d14d6d	fix emoji picker and about modal (#146 )	2025-05-25 20:33:08 -04:00
Doh	3ac311c3fd	add cover image in README	2025-05-25 20:27:46 -04:00
Doh	1a286a99f4	feat: Move delete account button to user edit modal (#144 ) Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>	2025-05-25 17:30:41 -04:00
Doh	82f45343ae	max coin limit (#140 ) Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>	2025-05-22 22:05:49 -04:00
Doh	a3d2b1ef96	support delete user (#139 ) Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>	2025-05-22 21:24:30 -04:00