fix: add TS types

Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>

.gitignore

@@ -46,3 +46,5 @@ next-env.d.ts
 Budfile
 certificates
 /backups/*
+
+CHANGELOG.md.tmp

CHANGELOG.md

@@ -1,5 +1,89 @@
 # Changelog
 
+## Version 0.2.23
+
+### Fixed
+
+* floating number coin balance (#155)
+* disable freshness check if browser does not support web crypto (#161)
+
+### Improved
+
+* use transparent background PWA icon with correct text (#103)
+* display icon in logo
+
+## Version 0.2.22
+
+### Added
+
+* auto check data freshness on interval (#138)
+* warn about out-of-sync data
+
+## Version 0.2.21
+
+### Fixed
+
+* emoji picker overlay issue (#150)
+
+## 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
+
+* fix responsive design on mobile (#134)
+* fix translation (#132)
+* fix latest docker tag auto build (#131)
+
 ## Version 0.2.12
 
 ### Added

README.md

@@ -1,12 +1,24 @@
-# HabitTrove
+# <img align="left" width="50" height="50" src="https://github.com/user-attachments/assets/99dcf223-3680-4b3a-8050-d9788f051682" /> HabitTrove
 
 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.
+**⚠️ Important:** HabitTrove is currently in beta. Please regularly backup your `data/` directory to prevent any potential data loss.
 
-## Try the Demo
+## Differences to Upstream
 
-Want to try HabitTrove before installing? Visit the public [demo instance](https://demo.habittrove.com) to experience all features without any setup required. (do not store personal info. Data on the demo instance is reset daily)
+I generally try to keep the `main` branch up to date with upstream features, merging tagged versions and mapping them to `<upstream-version>.0`.
+
+In this version I've taken steps to ensure a smoother experience and decreased the chance of the program bricking itself. This doesn't mean that it's completely stable, but I've fixed the most glaring bugs I encountered.
+
+Differences (as of writing) are:
+- resolved linting problems so you can actually commit things
+- added missing dependency
+- refactored adding habit modal to cause less errors
+- resolved undefined error
+- replaced dockerhub release flow with github
+- miscellaneous refactorings
+- split habits & tasks page into two different pages
+- only display "show all" if there are more than 4 entries
 
 ## Features
 

app/actions/data.ts

@@ -21,32 +21,18 @@ import {
   WishlistData,
   WishlistItemType
 } from '@/lib/types';
-import { d2t, getNow, uuid } from '@/lib/utils';
+import { d2t, generateCryptoHash, getNow, prepareDataForHashing } from '@/lib/utils';
 import { signInSchema } from '@/lib/zod';
 import fs from 'fs/promises';
 import _ from 'lodash';
 import path from 'path';
 
 
+
 type ResourceType = 'habit' | 'wishlist' | 'coins'
 type ActionType = 'write' | 'interact'
 
 
-async function verifyPermission(
-  resource: ResourceType,
-  action: ActionType
-): Promise<void> {
-  // const user = await getCurrentUser()
-
-  // if (!user) throw new PermissionError('User not authenticated')
-  // if (user.isAdmin) return // Admins bypass permission checks
-
-  // if (!checkPermission(user.permissions, resource, action)) {
-  //   throw new PermissionError(`User does not have ${action} permission for ${resource}`)
-  // }
-  return
-}
-
 function getDefaultData<T>(type: DataType): T {
   return DATA_DEFAULTS[type]() as T;
 }
@@ -90,7 +76,7 @@ async function loadData<T>(type: DataType): Promise<T> {
       await fs.access(filePath)
     } catch {
       // File doesn't exist, create it with default data
-      const initialData = getDefaultData(type)
+      const initialData = getDefaultData<T>(type)
       await fs.writeFile(filePath, JSON.stringify(initialData, null, 2))
       return initialData as T
     }
@@ -119,10 +105,38 @@ async function saveData<T>(type: DataType, data: T): Promise<void> {
   }
 }
 
+/**
+ * Calculates the server's global freshness token based on all core data files.
+ * This is an expensive operation as it reads all data files.
+ */
+async function calculateServerFreshnessToken(): Promise<string | null> {
+  try {
+    const [settings, habits, coins, wishlist, users] = await Promise.all([
+      loadSettings(),
+      loadHabitsData(),
+      loadCoinsData(),
+      loadWishlistData(),
+      loadUsersData()
+    ]);
+
+    const dataString = prepareDataForHashing(
+      settings,
+      habits,
+      coins,
+      wishlist,
+      users
+    );
+    return generateCryptoHash(dataString);
+  } catch (error) {
+    console.error("Error calculating server freshness token:", error);
+    throw error;
+  }
+}
+
 // Wishlist specific functions
 export async function loadWishlistData(): Promise<WishlistData> {
   const user = await getCurrentUser()
-  if (!user) return getDefaultWishlistData()
+  if (!user) return getDefaultWishlistData<WishlistData>()
 
   const data = await loadData<WishlistData>('wishlist')
   return {
@@ -137,7 +151,6 @@ export async function loadWishlistItems(): Promise<WishlistItemType[]> {
 }
 
 export async function saveWishlistItems(data: WishlistData): Promise<void> {
-  await verifyPermission('wishlist', 'write')
   const user = await getCurrentUser()
 
   data.items = data.items.map(wishlist => ({
@@ -160,17 +173,14 @@ export async function saveWishlistItems(data: WishlistData): Promise<void> {
 // Habits specific functions
 export async function loadHabitsData(): Promise<HabitsData> {
   const user = await getCurrentUser()
-  if (!user) return getDefaultHabitsData()
+  if (!user) return getDefaultHabitsData<HabitsData>()
   const data = await loadData<HabitsData>('habits')
   return {
-    ...data,
     habits: data.habits.filter(x => user.isAdmin || x.userIds?.includes(user.id))
   }
 }
 
 export async function saveHabitsData(data: HabitsData): Promise<void> {
-  await verifyPermission('habit', 'write')
-
   const user = await getCurrentUser()
   // Create clone of input data
   const newData = _.cloneDeep(data)
@@ -182,7 +192,7 @@ export async function saveHabitsData(data: HabitsData): Promise<void> {
   }))
 
   if (!user?.isAdmin) {
-    const existingData = await loadData<HabitsData>('habits')
+    const existingData = await loadHabitsData();
     const existingHabits = existingData.habits.filter(x => user?.id && !x.userIds?.includes(user?.id))
     newData.habits = [
       ...existingHabits,
@@ -198,14 +208,14 @@ export async function saveHabitsData(data: HabitsData): Promise<void> {
 export async function loadCoinsData(): Promise<CoinsData> {
   try {
     const user = await getCurrentUser()
-    if (!user) return getDefaultCoinsData()
+    if (!user) return getDefaultCoinsData<CoinsData>()
     const data = await loadData<CoinsData>('coins')
     return {
       ...data,
       transactions: user.isAdmin ? data.transactions : data.transactions.filter(x => x.userId === user.id)
     }
   } catch {
-    return getDefaultCoinsData()
+    return getDefaultCoinsData<CoinsData>()
   }
 }
 
@@ -245,11 +255,10 @@ export async function addCoins({
   note?: string
   userId?: string
 }): Promise<CoinsData> {
-  await verifyPermission('coins', type === 'MANUAL_ADJUSTMENT' ? 'write' : 'interact')
   const currentUser = await getCurrentUser()
   const data = await loadCoinsData()
   const newTransaction: CoinTransaction = {
-    id: uuid(),
+    id: crypto.randomUUID(),
     amount,
     type,
     description,
@@ -269,7 +278,7 @@ export async function addCoins({
 }
 
 export async function loadSettings(): Promise<Settings> {
-  const defaultSettings = getDefaultSettings()
+  const defaultSettings = getDefaultSettings<Settings>()
 
   try {
     const user = await getCurrentUser()
@@ -300,11 +309,10 @@ export async function removeCoins({
   note?: string
   userId?: string
 }): Promise<CoinsData> {
-  await verifyPermission('coins', type === 'MANUAL_ADJUSTMENT' ? 'write' : 'interact')
   const currentUser = await getCurrentUser()
   const data = await loadCoinsData()
   const newTransaction: CoinTransaction = {
-    id: uuid(),
+    id: crypto.randomUUID(),
     amount: -amount,
     type,
     description,
@@ -362,7 +370,7 @@ export async function loadUsersData(): Promise<UserData> {
   try {
     return await loadData<UserData>('auth')
   } catch {
-    return getDefaultUsersData()
+    return getDefaultUsersData<UserData>()
   }
 }
 
@@ -406,7 +414,7 @@ export async function createUser(formData: FormData): Promise<User> {
 
 
   const newUser: User = {
-    id: uuid(),
+    id: crypto.randomUUID(),
     username,
     password: hashedPassword,
     permissions,
@@ -485,21 +493,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> {
@@ -532,3 +599,24 @@ export async function loadServerSettings(): Promise<ServerSettings> {
     isDemo: !!process.env.DEMO,
   }
 }
+
+/**
+ * Checks if the client's data is fresh by comparing its token with the server's token.
+ * @param clientToken The freshness token calculated by the client.
+ * @returns A promise that resolves to an object { isFresh: boolean }.
+ */
+export async function checkDataFreshness(clientToken: string): Promise<{ isFresh: boolean }> {
+  try {
+    const serverToken = await calculateServerFreshnessToken();
+    const isFresh = clientToken === serverToken;
+    if (!isFresh) {
+      console.log(`Data freshness check: Stale. Client token: ${clientToken}, Server token: ${serverToken}`);
+    }
+    return { isFresh };
+  } catch (error) {
+    console.error("Error in checkDataFreshness:", error);
+    // If server fails to determine its token, assume client might be stale to be safe,
+    // or handle error reporting differently.
+    return { isFresh: false };
+  }
+}

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 })
+  }
+}

app/layout.tsx

@@ -1,30 +1,23 @@
 import { JotaiHydrate } from '@/components/jotai-hydrate'
 import { JotaiProvider } from '@/components/jotai-providers'
 import Layout from '@/components/Layout'
+import LoadingSpinner from '@/components/LoadingSpinner'
 import { ThemeProvider } from "@/components/theme-provider"
 import { Toaster } from '@/components/ui/toaster'
 import { SessionProvider } from 'next-auth/react'
+import { NextIntlClientProvider } from 'next-intl'
+import { getLocale, getMessages } from 'next-intl/server'
 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 { NextIntlClientProvider } from 'next-intl';
-import { getLocale, getMessages } from 'next-intl/server';
-
-// Inter (clean, modern, excellent readability)
-// const inter = Inter({
-//   subsets: ['latin'],
-//   weight: ['400', '500', '600', '700']
-// })
 
 // Clean and contemporary
-const dmSans = DM_Sans({
+const activeFont = DM_Sans({
   subsets: ['latin'],
   weight: ['400', '500', '600', '700']
 })
 
-const activeFont = dmSans
-
 export const metadata = {
   title: 'HabitTrove',
   description: 'Track your habits and get rewarded',
@@ -73,7 +66,7 @@ export default async function RootLayout({
           }}
         />
         <JotaiProvider>
-          <Suspense fallback="loading">
+          <Suspense fallback={<LoadingSpinner />}>
             <JotaiHydrate
               initialValues={{
                 settings: initialSettings,

app/settings/page.tsx

@@ -15,25 +15,34 @@ import { serverSettingsAtom, settingsAtom } from '@/lib/atoms';
 import { Settings, WeekDay } from '@/lib/types';
 import { useAtom } from 'jotai';
 import { Info } from 'lucide-react'; // Import Info icon
+import { useSession } from 'next-auth/react'; // signOut removed
 import { useTranslations } from 'next-intl';
+import { useRouter } from 'next/navigation';
 import { saveSettings } from '../actions/data';
+// 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
 
   return (
     <>
-      <div className="container mx-auto px-4 py-8">
+      <div>
         <h1 className="text-3xl font-bold mb-6">{t('title')}</h1>
         <Card className="mb-6">
           <CardHeader>
@@ -102,7 +111,7 @@ export default function SettingsPage() {
                       system: { ...settings.system, timezone: e.target.value }
                     })
                   }
-                  className="w-[200px] rounded-md border border-input bg-background px-3 py-2 mb-4"
+                  className="w-[110px] xs:w-[200px] rounded-md border border-input bg-background px-3 py-2 mb-4"
                 >
                   {Intl.supportedValuesOf('timeZone').map((tz) => (
                     <option key={tz} value={tz}>
@@ -130,7 +139,7 @@ export default function SettingsPage() {
                       system: { ...settings.system, weekStartDay: Number(e.target.value) as WeekDay }
                     })
                   }
-                  className="w-[200px] rounded-md border border-input bg-background px-3 py-2"
+                  className="w-[110px] xs:w-[200px] rounded-md border border-input bg-background px-3 py-2"
                 >
                   {([
                     ['sunday', 0],
@@ -213,7 +222,7 @@ export default function SettingsPage() {
                     variant: 'default',
                   });
                 }}
-                className={`w-[200px] rounded-md border border-input bg-background px-3 py-2 ${serverSettings.isDemo ? 'cursor-not-allowed opacity-50' : ''}`}
+                className={`w-[110px] xs:w-[200px] rounded-md border border-input bg-background px-3 py-2 ${serverSettings.isDemo ? 'cursor-not-allowed opacity-50' : ''}`}
               >
                 {/* Add more languages as needed */}
                 <option value="en">English</option>
@@ -228,6 +237,8 @@ export default function SettingsPage() {
 
           </CardContent>
         </Card>
+
+        {/* Danger Zone Card Removed */}
       </div >
     </>
   )

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>

components/AddEditHabitModal.tsx

@@ -7,19 +7,19 @@ 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 { currentUserAtom, settingsAtom, usersAtom } from '@/lib/atoms'
+import { INITIAL_DUE, INITIAL_RECURRENCE_RULE, MAX_COIN_LIMIT, 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 { DateTime } from 'luxon'
 import { useTranslations } from 'next-intl'
 import { useState } from 'react'
 import { RRule } from 'rrule'
+import EmojiPickerButton from './EmojiPickerButton'
+import ModalOverlay from './ModalOverlay'; // Import the new component
+
 
 interface AddEditHabitModalProps {
   onClose: () => void
@@ -37,13 +37,13 @@ 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 [selectedUserIds, setSelectedUserIds] = useState<string[]>((habit?.userIds || []).filter(id => id !== currentUser?.id))
   const [usersData] = useAtom(usersAtom)
@@ -89,247 +89,235 @@ 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>
-        <DialogHeader>
-          <DialogTitle>
-            {habit
-              ? t(isTask ? 'editTaskTitle' : 'editHabitTitle')
-              : t(isTask ? 'addNewTaskTitle' : 'addNewHabitTitle')}
-          </DialogTitle>
-        </DialogHeader>
-        <form onSubmit={handleSubmit}>
-          <div className="grid gap-4 py-4">
-            <div className="grid grid-cols-4 items-center gap-4">
-              <Label htmlFor="name" className="text-right">
-                {t('nameLabel')}
-              </Label>
-              <div className='flex col-span-3 gap-2'>
-                <Input
-                  id="name"
-                  value={name}
-                  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>
-              </div>
-            </div>
-            <div className="grid grid-cols-4 items-center gap-4">
-              <Label htmlFor="description" className="text-right">
-                {t('descriptionLabel')}
-              </Label>
-              <Textarea
-                id="description"
-                value={description}
-                onChange={(e) => setDescription(e.target.value)}
-                className="col-span-3"
-              />
-            </div>
-            <div className="grid grid-cols-4 items-center gap-4">
-              <Label htmlFor="recurrence" className="text-right">
-                {t('whenLabel')}
-              </Label>
-              {/* date input (task) */}
-              <div className="col-span-3 space-y-2">
-                <div className="flex gap-2">
+    <>
+      <ModalOverlay />
+      <Dialog open={true} onOpenChange={onClose} modal={false}>
+        <DialogContent> {/* DialogContent from shadcn/ui is typically z-50, ModalOverlay is z-40 */}
+          <DialogHeader>
+            <DialogTitle>
+              {habit
+                ? t(isTask ? 'editTaskTitle' : 'editHabitTitle')
+                : t(isTask ? 'addNewTaskTitle' : 'addNewHabitTitle')}
+            </DialogTitle>
+          </DialogHeader>
+          <form onSubmit={handleSubmit}>
+            <div className="grid gap-4 py-4">
+              <div className="grid grid-cols-4 items-center gap-4">
+                <Label htmlFor="name" className="text-right">
+                  {t('nameLabel')}
+                </Label>
+                <div className='flex col-span-3 gap-2'>
                   <Input
-                    id="recurrence"
-                    value={ruleText}
-                    onChange={(e) => setRuleText(e.target.value)}
+                    id="name"
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
                     required
                   />
-                  {isTask && (
-                    <Popover open={isQuickDatesOpen} onOpenChange={setIsQuickDatesOpen}>
-                      <PopoverTrigger asChild>
-                        <Button
-                          type="button"
-                          variant="ghost"
-                          size="icon"
-                          className="h-8 w-8"
-                        >
-                          <Zap className="h-4 w-4" />
-                        </Button>
-                      </PopoverTrigger>
-                      <PopoverContent className="p-3 w-[280px] max-h-[40vh] overflow-y-auto" align="start">
-                        <div className="space-y-1">
-                          <div className="grid grid-cols-2 gap-2">
-                            {QUICK_DATES.map((date) => (
-                              <Button
-                                key={date.value}
-                                variant="outline"
-                                className="justify-start h-9 px-3 hover:bg-primary hover:text-primary-foreground transition-colors"
-                                onClick={() => {
-                                  setRuleText(date.value);
-                                  setIsQuickDatesOpen(false);
-                                }}
-                              >
-                                {date.label}
-                              </Button>
-                            ))}
-                          </div>
-                        </div>
-                      </PopoverContent>
-                    </Popover>
-                  )}
+                  <EmojiPickerButton
+                    inputIdToFocus="name"
+                    onEmojiSelect={(emoji) => {
+                      setName(prev => {
+                        const space = prev.length > 0 && !prev.endsWith(' ') ? ' ' : '';
+                        return `${prev}${space}${emoji}`;
+                      })
+                    }}
+                  />
                 </div>
               </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>
-              </div>
-            </div>
-            <div className="grid grid-cols-4 items-center gap-4">
-              <div className="flex items-center gap-2 justify-end">
-                <Label htmlFor="targetCompletions">
-                  {t('completeLabel')}
-                </Label>
-              </div>
-              <div className="col-span-3">
-                <div className="flex items-center gap-4">
-                  <div className="flex items-center border rounded-lg overflow-hidden">
-                    <button
-                      type="button"
-                      onClick={() => setTargetCompletions(prev => Math.max(1, prev - 1))}
-                      className="px-3 py-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors"
-                    >
-                      -
-                    </button>
-                    <Input
-                      id="targetCompletions"
-                      type="number"
-                      value={targetCompletions}
-                      onChange={(e) => {
-                        const value = parseInt(e.target.value)
-                        setTargetCompletions(isNaN(value) ? 1 : Math.max(1, value))
-                      }}
-                      min={1}
-                      max={10}
-                      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={() => setTargetCompletions(prev => Math.min(10, prev + 1))}
-                      className="px-3 py-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors"
-                    >
-                      +
-                    </button>
-                  </div>
-                  <span className="text-sm text-muted-foreground">
-                    {t('timesSuffix')}
-                  </span>
-                </div>
-              </div>
-            </div>
-            <div className="grid grid-cols-4 items-center gap-4">
-              <div className="flex items-center gap-2 justify-end">
-                <Label htmlFor="coinReward">
-                  {t('rewardLabel')}
-                </Label>
-              </div>
-              <div className="col-span-3">
-                <div className="flex items-center gap-4">
-                  <div className="flex items-center border rounded-lg overflow-hidden">
-                    <button
-                      type="button"
-                      onClick={() => setCoinReward(prev => Math.max(0, prev - 1))}
-                      className="px-3 py-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors"
-                    >
-                      -
-                    </button>
-                    <Input
-                      id="coinReward"
-                      type="number"
-                      value={coinReward}
-                      onChange={(e) => setCoinReward(parseInt(e.target.value === "" ? "0" : e.target.value))}
-                      min={0}
-                      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)}
-                      className="px-3 py-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors"
-                    >
-                      +
-                    </button>
-                  </div>
-                  <span className="text-sm text-muted-foreground">
-                    {t('coinsSuffix')}
-                  </span>
-                </div>
-              </div>
-            </div>
-            {users && users.length > 1 && (
               <div className="grid grid-cols-4 items-center gap-4">
-                <div className="flex items-center justify-end gap-2">
-                  <Label htmlFor="sharing-toggle">{t('shareLabel')}</Label>
+                <Label htmlFor="description" className="text-right">
+                  {t('descriptionLabel')}
+                </Label>
+                <Textarea
+                  id="description"
+                  value={description}
+                  onChange={(e) => setDescription(e.target.value)}
+                  className="col-span-3"
+                />
+              </div>
+              <div className="grid grid-cols-4 items-center gap-4">
+                <Label htmlFor="recurrence" className="text-right">
+                  {t('whenLabel')}
+                </Label>
+                {/* date input (task) */}
+                <div className="col-span-3 space-y-2">
+                  <div className="flex gap-2">
+                    <Input
+                      id="recurrence"
+                      value={ruleText}
+                      onChange={(e) => setRuleText(e.target.value)}
+                      required
+                    />
+                    {isTask && (
+                      <Popover open={isQuickDatesOpen} onOpenChange={setIsQuickDatesOpen}>
+                        <PopoverTrigger asChild>
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="icon"
+                            className="h-8 w-8"
+                          >
+                            <Zap className="h-4 w-4" />
+                          </Button>
+                        </PopoverTrigger>
+                        <PopoverContent className="p-3 w-[280px] max-h-[40vh] overflow-y-auto" align="start">
+                          <div className="space-y-1">
+                            <div className="grid grid-cols-2 gap-2">
+                              {QUICK_DATES.map((date) => (
+                                <Button
+                                  key={date.value}
+                                  variant="outline"
+                                  className="justify-start h-9 px-3 hover:bg-primary hover:text-primary-foreground transition-colors"
+                                  onClick={() => {
+                                    setRuleText(date.value);
+                                    setIsQuickDatesOpen(false);
+                                  }}
+                                >
+                                  {date.label}
+                                </Button>
+                              ))}
+                            </div>
+                          </div>
+                        </PopoverContent>
+                      </Popover>
+                    )}
+                  </div>
+                </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>
+                </div>
+              </div>
+              <div className="grid grid-cols-4 items-center gap-4">
+                <div className="flex items-center gap-2 justify-end">
+                  <Label htmlFor="targetCompletions">
+                    {t('completeLabel')}
+                  </Label>
                 </div>
                 <div className="col-span-3">
-                  <div className="flex flex-wrap gap-2">
-                    {users.filter((u) => u.id !== currentUser?.id).map(user => (
-                      <Avatar
-                        key={user.id}
-                        className={`h-8 w-8 border-2 cursor-pointer
-                          ${selectedUserIds.includes(user.id)
-                            ? 'border-primary'
-                            : 'border-muted'
-                          }`}
-                        title={user.username}
-                        onClick={() => {
-                          setSelectedUserIds(prev =>
-                            prev.includes(user.id)
-                              ? prev.filter(id => id !== user.id)
-                              : [...prev, user.id]
-                          )
-                        }}
+                  <div className="flex items-center gap-4">
+                    <div className="flex items-center border rounded-lg overflow-hidden">
+                      <button
+                        type="button"
+                        onClick={() => setTargetCompletions(prev => Math.max(1, prev - 1))}
+                        className="px-3 py-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors"
                       >
-                        <AvatarImage src={user?.avatarPath && `/api/avatars/${user.avatarPath.split('/').pop()}` || ""} />
-                        <AvatarFallback>{user.username[0]}</AvatarFallback>
-                      </Avatar>
-                    ))}
+                        -
+                      </button>
+                      <Input
+                        id="targetCompletions"
+                        type="number"
+                        value={targetCompletions}
+                        onChange={(e) => {
+                          const value = parseInt(e.target.value)
+                          setTargetCompletions(isNaN(value) ? 1 : Math.max(1, value))
+                        }}
+                        min={1}
+                        max={10}
+                        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={() => setTargetCompletions(prev => Math.min(10, prev + 1))}
+                        className="px-3 py-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors"
+                      >
+                        +
+                      </button>
+                    </div>
+                    <span className="text-sm text-muted-foreground">
+                      {t('timesSuffix')}
+                    </span>
                   </div>
                 </div>
               </div>
-            )}
-          </div>
-          <DialogFooter>
-            <Button type="submit">
-              {habit
-                ? t('saveChangesButton')
-                : t(isTask ? 'addTaskButton' : 'addHabitButton')}
-            </Button>
-          </DialogFooter>
-        </form>
-      </DialogContent>
-    </Dialog>
+              <div className="grid grid-cols-4 items-center gap-4">
+                <div className="flex items-center gap-2 justify-end">
+                  <Label htmlFor="coinReward">
+                    {t('rewardLabel')}
+                  </Label>
+                </div>
+                <div className="col-span-3">
+                  <div className="flex items-center gap-4">
+                    <div className="flex items-center border rounded-lg overflow-hidden">
+                      <button
+                        type="button"
+                        onClick={() => setCoinReward(prev => Math.max(0, prev - 1))}
+                        className="px-3 py-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors"
+                      >
+                        -
+                      </button>
+                      <Input
+                        id="coinReward"
+                        type="number"
+                        value={coinReward}
+                        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 => 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"
+                      >
+                        +
+                      </button>
+                    </div>
+                    <span className="text-sm text-muted-foreground">
+                      {t('coinsSuffix')}
+                    </span>
+                  </div>
+                </div>
+              </div>
+              {users && users.length > 1 && (
+                <div className="grid grid-cols-4 items-center gap-4">
+                  <div className="flex items-center justify-end gap-2">
+                    <Label htmlFor="sharing-toggle">{t('shareLabel')}</Label>
+                  </div>
+                  <div className="col-span-3">
+                    <div className="flex flex-wrap gap-2">
+                      {users.filter((u) => u.id !== currentUser?.id).map(user => (
+                        <Avatar
+                          key={user.id}
+                          className={`h-8 w-8 border-2 cursor-pointer
+                          ${selectedUserIds.includes(user.id)
+                              ? 'border-primary'
+                              : 'border-muted'
+                            }`}
+                          title={user.username}
+                          onClick={() => {
+                            setSelectedUserIds(prev =>
+                              prev.includes(user.id)
+                                ? prev.filter(id => id !== user.id)
+                                : [...prev, user.id]
+                            )
+                          }}
+                        >
+                          <AvatarImage src={user?.avatarPath && `/api/avatars/${user.avatarPath.split('/').pop()}` || ""} />
+                          <AvatarFallback>{user.username[0]}</AvatarFallback>
+                        </Avatar>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+            <DialogFooter>
+              <Button type="submit" disabled={!!errorMessage}>
+                {habit
+                  ? t('saveChangesButton')
+                  : t(isTask ? 'addTaskButton' : 'addHabitButton')}
+              </Button>
+            </DialogFooter>
+          </form>
+        </DialogContent>
+      </Dialog>
+    </>
   )
 }
-

components/AddEditWishlistItemModal.tsx

@@ -1,23 +1,19 @@
-
 import { Button } from '@/components/ui/button'
 import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
 import { Textarea } from '@/components/ui/textarea'
-import { usersAtom } from '@/lib/atoms'
-import { useHelpers } from '@/lib/client-helpers'
+import { currentUserAtom, usersAtom } from '@/lib/atoms'
+import { MAX_COIN_LIMIT } from '@/lib/constants'
 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 EmojiPickerButton from './EmojiPickerButton'
+import ModalOverlay from './ModalOverlay'
 import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar'
 
 interface AddEditWishlistItemModalProps {
-  isOpen: boolean
   setIsOpen: (isOpen: boolean) => void
   editingItem: WishlistItemType | null
   setEditingItem: (item: WishlistItemType | null) => void
@@ -26,7 +22,6 @@ interface AddEditWishlistItemModalProps {
 }
 
 export default function AddEditWishlistItemModal({
-  isOpen,
   setIsOpen,
   editingItem,
   setEditingItem,
@@ -39,7 +34,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 +63,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,212 +108,205 @@ export default function AddEditWishlistItemModal({
     } else {
       addWishlistItem(itemData)
     }
-    
+
     setIsOpen(false)
     setEditingItem(null)
   }
 
   return (
-    <Dialog open={isOpen} onOpenChange={handleClose}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>{editingItem ? t('editTitle') : t('addTitle')}</DialogTitle>
-        </DialogHeader>
-        <form onSubmit={handleSave}>
-          <div className="grid gap-4 py-4">
-            <div className="grid grid-cols-4 items-center gap-4">
-              <Label htmlFor="name" className="text-right">
-                {t('nameLabel')}
-              </Label>
-              <div className="col-span-3 flex gap-2">
-                <Input
-                  id="name"
-                  value={name}
-                  onChange={(e) => setName(e.target.value)}
-                  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>
-              </div>
-            </div>
-            <div className="grid grid-cols-4 items-center gap-4">
-              <Label htmlFor="description" className="text-right">
-                {t('descriptionLabel')}
-              </Label>
-              <Textarea
-                id="description"
-                value={description}
-                onChange={(e) => setDescription(e.target.value)}
-                className="col-span-3"
-              />
-            </div>
-            <div className="grid grid-cols-4 items-center gap-4">
-              <div className="flex items-center gap-2 justify-end">
-                <Label htmlFor="coinReward">
-                  {t('costLabel')}
+    <>
+      <ModalOverlay />
+      <Dialog open={true} onOpenChange={handleClose} modal={false}>
+        <DialogContent> {/* DialogContent from shadcn/ui is typically z-50, ModalOverlay is z-40 */}
+          <DialogHeader>
+            <DialogTitle>{editingItem ? t('editTitle') : t('addTitle')}</DialogTitle>
+          </DialogHeader>
+          <form onSubmit={handleSave}>
+            <div className="grid gap-4 py-4">
+              <div className="grid grid-cols-4 items-center gap-4">
+                <Label htmlFor="name" className="text-right">
+                  {t('nameLabel')}
                 </Label>
-              </div>
-              <div className="col-span-3">
-                <div className="flex items-center gap-4">
-                  <div className="flex items-center border rounded-lg overflow-hidden">
-                    <button
-                      type="button"
-                      onClick={() => setCoinCost(prev => Math.max(0, prev - 1))}
-                      className="px-3 py-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors"
-                    >
-                      -
-                    </button>
-                    <Input
-                      id="coinReward"
-                      type="number"
-                      value={coinCost}
-                      onChange={(e) => setCoinCost(parseInt(e.target.value === "" ? "0" : e.target.value))}
-                      min={0}
-                      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)}
-                      className="px-3 py-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors"
-                    >
-                      +
-                    </button>
-                  </div>
-                  <span className="text-sm text-muted-foreground">
-                    {t('coinsSuffix')}
-                  </span>
+                <div className="col-span-3 flex gap-2">
+                  <Input
+                    id="name"
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
+                    className="flex-1"
+                    required
+                  />
+                  <EmojiPickerButton
+                    inputIdToFocus="name"
+                    onEmojiSelect={(emoji) => {
+                      setName(prev => {
+                        const space = prev.length > 0 && !prev.endsWith(' ') ? ' ' : '';
+                        return `${prev}${space}${emoji}`;
+                      })
+                    }}
+                  />
                 </div>
               </div>
-            </div>
-            <div className="grid grid-cols-4 items-center gap-4">
-              <div className="flex items-center gap-2 justify-end">
-                <Label htmlFor="targetCompletions">
-                  {t('redeemableLabel')}
+              <div className="grid grid-cols-4 items-center gap-4">
+                <Label htmlFor="description" className="text-right">
+                  {t('descriptionLabel')}
                 </Label>
-              </div>
-              <div className="col-span-3">
-                <div className="flex items-center gap-4">
-                  <div className="flex items-center border rounded-lg overflow-hidden">
-                    <button
-                      type="button"
-                      onClick={() => setTargetCompletions(prev => prev !== undefined && prev > 1 ? prev - 1 : undefined)}
-                      className="px-3 py-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors"
-                    >
-                      -
-                    </button>
-                    <Input
-                      id="targetCompletions"
-                      type="number"
-                      value={targetCompletions || ''}
-                      onChange={(e) => {
-                        const value = e.target.value
-                        setTargetCompletions(value && value !== "0" ? parseInt(value) : undefined)
-                      }}
-                      min={0}
-                      placeholder="∞"
-                      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={() => setTargetCompletions(prev => Math.min(10, (prev || 0) + 1))}
-                      className="px-3 py-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors"
-                    >
-                      +
-                    </button>
-                  </div>
-                  <span className="text-sm text-muted-foreground">
-                    {t('timesSuffix')}
-                  </span>
-                </div>
-                {errors.targetCompletions && (
-                  <div className="text-sm text-red-500">
-                    {errors.targetCompletions}
-                  </div>
-                )}
-              </div>
-            </div>
-            <div className="grid grid-cols-4 items-center gap-4">
-              <Label htmlFor="link" className="text-right">
-                {t('linkLabel')}
-              </Label>
-              <div className="col-span-3">
-                <Input
-                  id="link"
-                  type="url"
-                  placeholder="https://..."
-                  value={link}
-                  onChange={(e) => setLink(e.target.value)}
+                <Textarea
+                  id="description"
+                  value={description}
+                  onChange={(e) => setDescription(e.target.value)}
                   className="col-span-3"
                 />
-                {errors.link && (
-                  <div className="text-sm text-red-500">
-                    {errors.link}
-                  </div>
-                )}
               </div>
-            </div>
-            {usersData.users && usersData.users.length > 1 && (
               <div className="grid grid-cols-4 items-center gap-4">
-                <div className="flex items-center justify-end gap-2">
-                  <Label htmlFor="sharing-toggle">{t('shareLabel')}</Label>
+                <div className="flex items-center gap-2 justify-end">
+                  <Label htmlFor="coinReward">
+                    {t('costLabel')}
+                  </Label>
                 </div>
                 <div className="col-span-3">
-                  <div className="flex flex-wrap gap-2">
-                    {usersData.users.filter((u) => u.id !== currentUser?.id).map(user => (
-                      <Avatar
-                        key={user.id}
-                        className={`h-8 w-8 border-2 cursor-pointer
-                          ${selectedUserIds.includes(user.id) 
-                            ? 'border-primary' 
-                            : 'border-muted'
-                          }`}
-                        title={user.username}
-                        onClick={() => {
-                          setSelectedUserIds(prev => 
-                            prev.includes(user.id)
-                              ? prev.filter(id => id !== user.id)
-                              : [...prev, user.id]
-                          )
-                        }}
+                  <div className="flex items-center gap-4">
+                    <div className="flex items-center border rounded-lg overflow-hidden">
+                      <button
+                        type="button"
+                        onClick={() => setCoinCost(prev => Math.max(0, prev - 1))}
+                        className="px-3 py-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors"
                       >
-                        <AvatarImage src={user?.avatarPath && `/api/avatars/${user.avatarPath.split('/').pop()}` || ""} />
-                        <AvatarFallback>{user.username[0]}</AvatarFallback>
-                      </Avatar>
-                    ))}
+                        -
+                      </button>
+                      <Input
+                        id="coinReward"
+                        type="number"
+                        value={coinCost}
+                        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 => 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"
+                      >
+                        +
+                      </button>
+                    </div>
+                    <span className="text-sm text-muted-foreground">
+                      {t('coinsSuffix')}
+                    </span>
                   </div>
                 </div>
               </div>
-            )}
-          </div>
-          <DialogFooter>
-            <Button type="submit">{editingItem ? t('saveButton') : t('addButton')}</Button>
-          </DialogFooter>
-        </form>
-      </DialogContent>
-    </Dialog>
+              <div className="grid grid-cols-4 items-center gap-4">
+                <div className="flex items-center gap-2 justify-end">
+                  <Label htmlFor="targetCompletions">
+                    {t('redeemableLabel')}
+                  </Label>
+                </div>
+                <div className="col-span-3">
+                  <div className="flex items-center gap-4">
+                    <div className="flex items-center border rounded-lg overflow-hidden">
+                      <button
+                        type="button"
+                        onClick={() => setTargetCompletions(prev => prev !== undefined && prev > 1 ? prev - 1 : undefined)}
+                        className="px-3 py-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors"
+                      >
+                        -
+                      </button>
+                      <Input
+                        id="targetCompletions"
+                        type="number"
+                        value={targetCompletions || ''}
+                        onChange={(e) => {
+                          const value = e.target.value
+                          setTargetCompletions(value && value !== "0" ? parseInt(value) : undefined)
+                        }}
+                        min={0}
+                        placeholder="∞"
+                        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={() => setTargetCompletions(prev => Math.min(10, (prev || 0) + 1))}
+                        className="px-3 py-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors"
+                      >
+                        +
+                      </button>
+                    </div>
+                    <span className="text-sm text-muted-foreground">
+                      {t('timesSuffix')}
+                    </span>
+                  </div>
+                  {errors.targetCompletions && (
+                    <div className="text-sm text-red-500">
+                      {errors.targetCompletions}
+                    </div>
+                  )}
+                </div>
+              </div>
+              <div className="grid grid-cols-4 items-center gap-4">
+                <Label htmlFor="link" className="text-right">
+                  {t('linkLabel')}
+                </Label>
+                <div className="col-span-3">
+                  <Input
+                    id="link"
+                    type="url"
+                    placeholder="https://..."
+                    value={link}
+                    onChange={(e) => setLink(e.target.value)}
+                    className="col-span-3"
+                  />
+                  {errors.link && (
+                    <div className="text-sm text-red-500">
+                      {errors.link}
+                    </div>
+                  )}
+                </div>
+              </div>
+              {usersData.users && usersData.users.length > 1 && (
+                <div className="grid grid-cols-4 items-center gap-4">
+                  <div className="flex items-center justify-end gap-2">
+                    <Label htmlFor="sharing-toggle">{t('shareLabel')}</Label>
+                  </div>
+                  <div className="col-span-3">
+                    <div className="flex flex-wrap gap-2">
+                      {usersData.users.filter((u) => u.id !== currentUser?.id).map(user => (
+                        <Avatar
+                          key={user.id}
+                          className={`h-8 w-8 border-2 cursor-pointer
+                          ${selectedUserIds.includes(user.id)
+                              ? 'border-primary'
+                              : 'border-muted'
+                            }`}
+                          title={user.username}
+                          onClick={() => {
+                            setSelectedUserIds(prev =>
+                              prev.includes(user.id)
+                                ? prev.filter(id => id !== user.id)
+                                : [...prev, user.id]
+                            )
+                          }}
+                        >
+                          <AvatarImage src={user?.avatarPath && `/api/avatars/${user.avatarPath.split('/').pop()}` || ""} />
+                          <AvatarFallback>{user.username[0]}</AvatarFallback>
+                        </Avatar>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+            <DialogFooter>
+              <Button type="submit">{editingItem ? t('saveButton') : t('addButton')}</Button>
+            </DialogFooter>
+          </form>
+        </DialogContent>
+      </Dialog>
+    </>
   )
 }
 

components/ClientWrapper.tsx

@@ -1,17 +1,29 @@
 'use client'
 
-import { ReactNode, useEffect } from 'react'
-import { useAtom } from 'jotai'
-import { pomodoroAtom, userSelectAtom } from '@/lib/atoms'
-import PomodoroTimer from './PomodoroTimer'
-import UserSelectModal from './UserSelectModal'
-import { useSession } from 'next-auth/react'
+import { checkDataFreshness as checkServerDataFreshness } from '@/app/actions/data';
+import { aboutOpenAtom, clientFreshnessTokenAtom, currentUserIdAtom, pomodoroAtom, userSelectAtom } from '@/lib/atoms';
+import { useAtom, useAtomValue, useSetAtom } from 'jotai';
+import { useSession } from 'next-auth/react';
+import { ReactNode, Suspense, useCallback, useEffect, useState } from 'react';
+import AboutModal from './AboutModal';
+import LoadingSpinner from './LoadingSpinner';
+import PomodoroTimer from './PomodoroTimer';
+import RefreshBanner from './RefreshBanner';
+import UserSelectModal from './UserSelectModal';
 
-export default function ClientWrapper({ children }: { children: ReactNode }) {
+function ClientWrapperContent({ 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 [showRefreshBanner, setShowRefreshBanner] = useState(false);
+
+  // clientFreshnessTokenAtom is async, useAtomValue will suspend until it's resolved.
+  // Suspense boundary is in app/layout.tsx or could be added here if needed more locally.
+  const clientToken = useAtomValue(clientFreshnessTokenAtom);
+
 
   useEffect(() => {
     if (status === 'loading') return
@@ -20,15 +32,66 @@ export default function ClientWrapper({ children }: { children: ReactNode }) {
     }
   }, [currentUserId, status, userSelect, setUserSelect])
 
+  useEffect(() => {
+    setCurrentUserIdAtom(currentUserId)
+  }, [currentUserId, setCurrentUserIdAtom])
+
+  const performFreshnessCheck = useCallback(async () => {
+    if (!clientToken || status !== 'authenticated') return;
+
+    try {
+      const result = await checkServerDataFreshness(clientToken);
+      if (!result.isFresh) {
+        setShowRefreshBanner(true);
+      }
+    } catch (error) {
+      console.error("Failed to check data freshness with server:", error);
+    }
+  }, [clientToken, status]);
+
+  useEffect(() => {
+    // Interval for polling data freshness
+    if (clientToken && !showRefreshBanner && status === 'authenticated') {
+      const intervalId = setInterval(() => {
+        performFreshnessCheck();
+      }, 30000); // Check every 30 seconds
+
+      return () => clearInterval(intervalId);
+    }
+  }, [clientToken, performFreshnessCheck, showRefreshBanner, status]);
+
+  const handleRefresh = () => {
+    setShowRefreshBanner(false);
+    window.location.reload();
+  };
+
   return (
     <>
       {children}
-      {pomo.show && (
-        <PomodoroTimer />
-      )}
-      {userSelect && (
-        <UserSelectModal onClose={() => setUserSelect(false)}/>
-      )}
+      {pomo.show && <PomodoroTimer />}
+      {userSelect && <UserSelectModal onClose={() => setUserSelect(false)} />}
+      {aboutOpen && <AboutModal onClose={() => setAboutOpen(false)} />}
+      {showRefreshBanner && <RefreshBanner onRefresh={handleRefresh} />}
     </>
-  )
+  );
+}
+
+export default function ClientWrapper({ children }: { children: ReactNode }) {
+  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);
+  }, []);
+
+  if (!isMounted) {
+    return <LoadingSpinner />;
+  }
+
+  return (
+    <Suspense fallback={<LoadingSpinner />}>
+      <ClientWrapperContent>{children}</ClientWrapperContent>
+    </Suspense>
+  );
 }

components/CoinsManager.tsx

@@ -6,8 +6,8 @@ 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 { currentUserAtom, settingsAtom, usersAtom } from '@/lib/atoms'
+import { MAX_COIN_LIMIT } from '@/lib/constants'
 import { TransactionType } from '@/lib/types'
 import { d2s, t2d } from '@/lib/utils'
 import { useAtom } from 'jotai'
@@ -21,7 +21,7 @@ import { TransactionNoteEditor } from './TransactionNoteEditor'
 
 export default function CoinsManager() {
   const t = useTranslations('CoinsManager')
-  const { currentUser } = useHelpers()
+  const [currentUser] = useAtom(currentUserAtom)
   const [selectedUser, setSelectedUser] = useState<string>()
   const {
     add,
@@ -102,9 +102,9 @@ export default function CoinsManager() {
   }
 
   return (
-    <div className="container mx-auto px-4 py-8">
+    <div>
       <div className="flex items-center justify-between mb-6">
-        <h1 className="text-3xl font-bold mr-6">{t('title')}</h1>
+        <h1 className="text-xl xs:text-3xl font-bold mr-6">{t('title')}</h1>
         {currentUser?.isAdmin && (
           <select
             className="border rounded p-2"
@@ -139,7 +139,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 +151,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 +177,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>

components/DailyOverview.tsx

@@ -27,6 +27,7 @@ import ConfirmDialog from './ConfirmDialog'
 import { HabitContextMenuItems } from './HabitContextMenuItems'
 import Linkify from './linkify'
 import { Button } from './ui/button'
+import { DESKTOP_DISPLAY_ITEM_COUNT } from '@/lib/constants'
 
 interface UpcomingItemsProps {
   habits: Habit[]
@@ -165,7 +166,7 @@ const ItemSection = ({
             const bTarget = b.targetCompletions || 1;
             return bTarget - aTarget;
           })
-          .slice(0, currentExpanded ? undefined : 5)
+          .slice(0, currentExpanded ? undefined : DESKTOP_DISPLAY_ITEM_COUNT)
           .map((habit) => {
             const completionsToday = habit.completions.filter(completion =>
               isSameDate(t2d({ timestamp: completion, timezone: settings.system.timezone }), t2d({ timestamp: d2t({ dateTime: getNow({ timezone: settings.system.timezone }) }), timezone: settings.system.timezone }))
@@ -295,7 +296,7 @@ const ItemSection = ({
           onClick={() => setCurrentExpanded(!currentExpanded)}
           className="text-sm text-muted-foreground hover:text-primary flex items-center gap-1"
         >
-          {currentExpanded ? (
+          {items.length > DESKTOP_DISPLAY_ITEM_COUNT && (currentExpanded ? (
             <>
               {t('showLessButton')}
               <ChevronUp className="h-3 w-3" />
@@ -305,7 +306,7 @@ const ItemSection = ({
               {t('showAllButton')}
               <ChevronDown className="h-3 w-3" />
             </>
-          )}
+          ))}
         </button>
         <Link
           href={viewLink}
@@ -444,7 +445,7 @@ export default function DailyOverview({
                   ) : (
                     <>
                       {sortedWishlistItems
-                        .slice(0, browserSettings.expandedWishlist ? undefined : 5)
+                        .slice(0, browserSettings.expandedWishlist ? undefined : DESKTOP_DISPLAY_ITEM_COUNT)
                         .map((item) => {
                           const isRedeemable = item.coinCost <= coinBalance
                           return (
@@ -501,7 +502,7 @@ export default function DailyOverview({
                     onClick={() => setBrowserSettings(prev => ({ ...prev, expandedWishlist: !prev.expandedWishlist }))}
                     className="text-sm text-muted-foreground hover:text-primary flex items-center gap-1"
                   >
-                    {browserSettings.expandedWishlist ? (
+                    {wishlistItems.length > DESKTOP_DISPLAY_ITEM_COUNT && (browserSettings.expandedWishlist ? (
                       <>
                         {t('showLessButton')}
                         <ChevronUp className="h-3 w-3" />
@@ -511,7 +512,7 @@ export default function DailyOverview({
                         {t('showAllButton')}
                         <ChevronDown className="h-3 w-3" />
                       </>
-                    )}
+                    ))}
                   </button>
                   <Link
                     href="/wishlist"

components/Dashboard.tsx

@@ -17,9 +17,9 @@ export default function Dashboard() {
   const wishlistItems = wishlist.items
 
   return (
-    <div className="container mx-auto px-4 py-8">
+    <div>
       <div className="flex justify-between items-center mb-6">
-        <h1 className="text-3xl font-bold">{t('title')}</h1>
+        <h1 className="text-xl xs:text-3xl font-bold">{t('title')}</h1>
       </div>
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
         <CoinBalance coinBalance={balance} />

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={false} 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>
+  )
+}

components/HabitCalendar.tsx

@@ -42,8 +42,8 @@ export default function HabitCalendar() {
   }, [completedHabitsMap, settings.system.timezone])
 
   return (
-    <div className="container mx-auto px-4 py-8">
-      <h1 className="text-3xl font-bold mb-6">{t('title')}</h1>
+    <div>
+      <h1 className="text-xl xs:text-3xl font-bold mb-6">{t('title')}</h1>
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
         <Card>
           <CardHeader>
@@ -156,49 +156,49 @@ export default function HabitCalendar() {
                         date: selectedDateTime
                       }))
                       .map((habit) => {
-                    const completions = getCompletionsForDate({ habit, date: selectedDateTime, timezone: settings.system.timezone })
-                    const isCompleted = completions >= (habit.targetCompletions || 1)
-                    return (
-                      <li key={habit.id} className="flex items-center justify-between gap-2 px-3 py-2 rounded-lg hover:bg-muted/50 transition-colors">
-                        <span className="flex items-center gap-2">
-                          <Linkify>{habit.name}</Linkify>
-                        </span>
-                        <div className="flex items-center gap-2">
-                          <div className="flex items-center gap-2">
-                            {habit.targetCompletions && (
-                              <span className="text-sm text-muted-foreground">
-                                {completions}/{habit.targetCompletions}
-                              </span>
-                            )}
-                            <button
-                              onClick={() => handleCompletePastHabit(habit, selectedDateTime)}
-                              disabled={isCompleted}
-                              className="relative h-4 w-4 hover:opacity-70 transition-opacity disabled:opacity-100"
-                            >
-                              {isCompleted ? (
-                                <CircleCheck className="h-4 w-4 text-green-500" />
-                              ) : (
-                                <div className="relative h-4 w-4">
-                                  <Circle className="absolute h-4 w-4 text-muted-foreground" />
-                                  <div
-                                    className="absolute h-4 w-4 rounded-full overflow-hidden"
-                                    style={{
-                                      background: `conic-gradient(
+                        const completions = getCompletionsForDate({ habit, date: selectedDateTime, timezone: settings.system.timezone })
+                        const isCompleted = completions >= (habit.targetCompletions || 1)
+                        return (
+                          <li key={habit.id} className="flex items-center justify-between gap-2 px-3 py-2 rounded-lg hover:bg-muted/50 transition-colors">
+                            <span className="flex items-center gap-2">
+                              <Linkify>{habit.name}</Linkify>
+                            </span>
+                            <div className="flex items-center gap-2">
+                              <div className="flex items-center gap-2">
+                                {habit.targetCompletions && (
+                                  <span className="text-sm text-muted-foreground">
+                                    {completions}/{habit.targetCompletions}
+                                  </span>
+                                )}
+                                <button
+                                  onClick={() => handleCompletePastHabit(habit, selectedDateTime)}
+                                  disabled={isCompleted}
+                                  className="relative h-4 w-4 hover:opacity-70 transition-opacity disabled:opacity-100"
+                                >
+                                  {isCompleted ? (
+                                    <CircleCheck className="h-4 w-4 text-green-500" />
+                                  ) : (
+                                    <div className="relative h-4 w-4">
+                                      <Circle className="absolute h-4 w-4 text-muted-foreground" />
+                                      <div
+                                        className="absolute h-4 w-4 rounded-full overflow-hidden"
+                                        style={{
+                                          background: `conic-gradient(
                                         currentColor ${(completions / (habit.targetCompletions ?? 1)) * 360}deg,
                                         transparent ${(completions / (habit.targetCompletions ?? 1)) * 360}deg 360deg
                                       )`,
-                                      mask: 'radial-gradient(transparent 50%, black 51%)',
-                                      WebkitMask: 'radial-gradient(transparent 50%, black 51%)'
-                                    }}
-                                  />
-                                </div>
-                              )}
-                            </button>
-                          </div>
-                        </div>
-                      </li>
-                    )
-                    })}
+                                          mask: 'radial-gradient(transparent 50%, black 51%)',
+                                          WebkitMask: 'radial-gradient(transparent 50%, black 51%)'
+                                        }}
+                                      />
+                                    </div>
+                                  )}
+                                </button>
+                              </div>
+                            </div>
+                          </li>
+                        )
+                      })}
                   </ul>
                 </div>
               </div>

components/HabitContextMenuItems.tsx

@@ -1,12 +1,11 @@
 import { Habit } from '@/lib/types';
 import { useHabits } from '@/hooks/useHabits';
 import { useAtom } from 'jotai';
-import { pomodoroAtom, settingsAtom } from '@/lib/atoms';
-import { d2t, getNow, isHabitDueToday } from '@/lib/utils';
+import { 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;

components/HabitItem.tsx

@@ -6,12 +6,11 @@ import {
   DropdownMenuTrigger
 } from '@/components/ui/dropdown-menu'
 import { useHabits } from '@/hooks/useHabits'
-import { settingsAtom, usersAtom } from '@/lib/atoms'
-import { useHelpers } from '@/lib/client-helpers'
+import { currentUserAtom, settingsAtom, usersAtom } from '@/lib/atoms'
 import { Habit, User } from '@/lib/types'
-import { convertMachineReadableFrequencyToHumanReadable, getCompletionsForToday, isTaskOverdue } from '@/lib/utils'
+import { convertMachineReadableFrequencyToHumanReadable, getCompletionsForToday, hasPermission, isTaskOverdue } from '@/lib/utils'
 import { useAtom } from 'jotai'
-import { Check, Coins, Edit, MoreVertical, Pin, Undo2 } from 'lucide-react'; // Removed unused icons
+import { Check, Coins, Edit, MoreVertical, Pin, Undo2 } from 'lucide-react'
 import { useTranslations } from 'next-intl'
 import { usePathname } from 'next/navigation'
 import { useEffect, useState } from 'react'
@@ -26,7 +25,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 => {
@@ -45,7 +44,7 @@ const renderUserAvatars = (habit: Habit, currentUser: User | null, usersData: {
 
 
 export default function HabitItem({ habit, onEdit, onDelete }: HabitItemProps) {
-  const { completeHabit, undoComplete, archiveHabit, unarchiveHabit, saveHabit } = useHabits()
+  const { completeHabit, undoComplete } = useHabits()
   const [settings] = useAtom(settingsAtom)
   const completionsToday = getCompletionsForToday({ habit, timezone: settings.system.timezone })
   const target = habit.targetCompletions || 1
@@ -53,10 +52,10 @@ export default function HabitItem({ habit, onEdit, onDelete }: HabitItemProps) {
   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')
 
   useEffect(() => {
     const params = new URLSearchParams(window.location.search)
@@ -107,11 +106,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: pathname.includes("habits"),
+              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 +185,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" />

components/HabitList.tsx

@@ -120,9 +120,11 @@ export default function HabitList({ isTasksView }: { isTasksView: boolean}) {
 
 
   return (
-    <div className="container mx-auto px-4 py-8">
+    <div>
       <div className="flex justify-between items-center mb-6">
-        <h1 className="text-3xl font-bold">{t(isTasksView ? "myTasks" : "myHabits")}</h1>
+        <h1 className="text-xl xs:text-3xl font-bold">
+          {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")}
@@ -178,18 +180,18 @@ export default function HabitList({ isTasksView }: { isTasksView: boolean}) {
             />
           </div>
         ) : (
-            activeHabits.map((habit: Habit) => (
-              <HabitItem
-                key={habit.id}
-                habit={habit}
-                onEdit={() => {
-                  setEditingHabit(habit)
-                  setModalConfig({ isOpen: true, isTask: isTasksView })
-                }}
-                onDelete={() => setDeleteConfirmation({ isOpen: true, habitId: habit.id })}
-              />
-            ))
-          )}
+          activeHabits.map((habit: Habit) => (
+            <HabitItem
+              key={habit.id}
+              habit={habit}
+              onEdit={() => {
+                setEditingHabit(habit)
+                setModalConfig({ isOpen: true, isTask: isTasksView })
+              }}
+              onDelete={() => setDeleteConfirmation({ isOpen: true, habitId: habit.id })}
+            />
+          ))
+        )}
 
         {archivedHabits.length > 0 && (
           <>

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>

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>
+  )
+}

components/Layout.tsx

@@ -7,14 +7,17 @@ export default function Layout({ children }: { children: React.ReactNode }) {
     <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' />
+        <Navigation position='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">
-            <ClientWrapper>
-              {children}
-            </ClientWrapper>
+            {/* responsive container (optimized for mobile) */}
+            <div className="mx-auto px-2 xs:px-4 py-8 max-w-sm xs:max-w-full">
+              <ClientWrapper>
+                {children}
+              </ClientWrapper>
+            </div>
           </main>
-          <Navigation viewPort='mobile' />
+          <Navigation position='mobile' />
         </div>
       </div>
     </div>

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;

components/Logo.tsx

@@ -1,8 +1,9 @@
+import Image from "next/image"
 
 export function Logo() {
   return (
     <div className="flex items-center gap-2">
-      {/* <Sparkles className="h-6 w-6 text-primary" /> */}
+      <Image src="/icons/icon.png" alt="HabitTrove Logo" width={96} height={96} className="h-12 w-12 hidden xs:inline" />
       <span className="font-bold text-xl">HabitTrove</span>
     </div>
   )

components/ModalOverlay.tsx

@@ -0,0 +1,9 @@
+/**
+ * ModalOverlay provides a dimming effect for non-modal dialogs or popovers
+ * that need to appear modal (e.g., to prevent interaction with background elements).
+ * It should be rendered alongside the dialog/popover it's intended to overlay for.
+ * Ensure the dialog/popover has a z-index higher than this overlay (default z-40).
+ */
+export default function ModalOverlay() {
+  return <div className="fixed inset-0 z-50 bg-black/80" />
+}

components/NavDisplay.tsx

@@ -0,0 +1,61 @@
+import { useHelpers } from '@/lib/client-helpers';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { NavItemType } from './Navigation';
+
+export default function NavDisplay({ navItems, isMobile }: { navItems: NavItemType[], isMobile: boolean }) {
+  const pathname = usePathname();
+  const { isIOS } = useHelpers()
+
+  if (isMobile) {
+    return (
+        <>
+        {isMobile && (<div className={isIOS ? "pb-20" : "pb-16"} />)}
+        <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>
+        </>
+    );
+  } else {
+    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.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>
+        </div>
+    );
+  }
+}

components/Navigation.tsx

@@ -1,104 +1,40 @@
 'use client'
 
-import { useHelpers } from '@/lib/client-helpers'
 import { HabitIcon, TaskIcon } from '@/lib/constants'
 import { Calendar, Coins, Gift, Home } from 'lucide-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 { ElementType, useEffect, useState } from 'react'
+import NavDisplay from './NavDisplay'
 
-type ViewPort = 'main' | 'mobile'
-
-interface NavigationProps {
-  viewPort: ViewPort
+export interface NavItemType {
+  icon: ElementType;
+  label: string;
+  href: string;
 }
 
-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 = () => [
-    { 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: 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' },
-  ]
+export default function Navigation({ position }: { position: 'main' | 'mobile' }) {
+  const t = useTranslations('Navigation');
+  const [isMobile, setIsMobile] = useState(window.innerWidth < 1024);
 
   useEffect(() => {
-    const handleResize = () => {
-      setIsMobileView(window.innerWidth < 1024)
-    }
+    const handleResize = () => {setIsMobile(window.innerWidth < 1024); };
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [setIsMobile]);
 
-    // Set initial value
-    handleResize()
+  const currentNavItems: NavItemType[] = [
+    { icon: Home, label: t('dashboard'), href: '/' },
+    { icon: HabitIcon, label: t('habits'), href: '/habits' },
+    { icon: TaskIcon, label: t('tasks'), href: '/tasks' },
+    { icon: Calendar, label: t('calendar'), href: '/calendar' },
+    { icon: Gift, label: t('wishlist'), href: '/wishlist' },
+    { icon: Coins, label: t('coins'), href: '/coins' },
+  ]
 
-    // Add event listener
-    window.addEventListener('resize', handleResize)
-
-    // Cleanup
-    return () => window.removeEventListener('resize', handleResize)
-  }, [])
-
-  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)} />
-      </>
-    )
+  if ((position === 'mobile' && isMobile) || (position === 'main' && !isMobile)) {
+    return <NavDisplay navItems={currentNavItems} isMobile={isMobile} />
   }
-
-  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>
-    )
+  else {
+    return <></>
   }
 }

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

components/PomodoroTimer.tsx

@@ -108,10 +108,26 @@ export default function PomodoroTimer() {
       document.removeEventListener('visibilitychange', handleVisibilityChange);
       releaseWakeLock()
     }
-  }, [state])
+  }, [state, t])
 
   // Timer logic
   useEffect(() => {
+    const handleTimerEnd = async () => {
+      setState("stopped");
+      const currentTimerType = currentTimerRef.current.type;
+      currentTimerRef.current =
+        currentTimerType === "focus" ? PomoConfigs.break : PomoConfigs.focus;
+      setTimeLeft(currentTimerRef.current.duration);
+      const newLabels = currentTimerRef.current.getLabels();
+      setCurrentLabel(newLabels[Math.floor(Math.random() * newLabels.length)]);
+
+      // update habits only after focus sessions
+      if (selectedHabit && currentTimerType === "focus") {
+        await completeHabit(selectedHabit);
+        // The atom will automatically update with the new completions
+      }
+    };
+
     let interval: ReturnType<typeof setInterval> | null = null;
 
     if (state === "started") {
@@ -133,22 +149,7 @@ export default function PomodoroTimer() {
     return () => {
       if (interval) clearInterval(interval);
     };
-  }, [state]);
-
-  const handleTimerEnd = async () => {
-    setState("stopped")
-    const currentTimerType = currentTimerRef.current.type
-    currentTimerRef.current = currentTimerType === 'focus' ? PomoConfigs.break : PomoConfigs.focus
-    setTimeLeft(currentTimerRef.current.duration)
-    const newLabels = currentTimerRef.current.getLabels();
-    setCurrentLabel(newLabels[Math.floor(Math.random() * newLabels.length)])
-
-    // update habits only after focus sessions
-    if (selectedHabit && currentTimerType === 'focus') {
-      await completeHabit(selectedHabit)
-      // The atom will automatically update with the new completions
-    }
-  }
+  }, [state, timeLeft, PomoConfigs.break, PomoConfigs.focus, completeHabit, selectedHabit]);
 
   const toggleTimer = () => {
     setState(prev => prev === 'started' ? 'paused' : 'started')

components/Profile.tsx

@@ -5,15 +5,13 @@ 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 { aboutOpenAtom, currentUserAtom, settingsAtom, userSelectAtom } from "@/lib/atoms"
 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 { Dialog, DialogContent, DialogHeader, DialogTitle } from './ui/dialog'
 import UserForm from './UserForm'
 
@@ -22,9 +20,9 @@ export function 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 () => {
@@ -67,7 +65,7 @@ export function Profile() {
                 </AvatarFallback>
               </Avatar>
               <div className="flex flex-col mr-4">
-                <span className="text-sm font-semibold flex items-center gap-1">
+                <span className="text-sm font-semibold flex items-center gap-1 break-all">
                   {user?.username || t('guestUsername')}
                   {user?.isAdmin && <Crown className="h-3 w-3 text-yellow-500" />}
                 </span>
@@ -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)}>

components/RefreshBanner.tsx

@@ -0,0 +1,27 @@
+'use client'
+
+import { Button } from "@/components/ui/button"
+import { AlertTriangle } from "lucide-react"
+
+interface RefreshBannerProps {
+  onRefresh: () => void;
+}
+
+export default function RefreshBanner({ onRefresh }: RefreshBannerProps) {
+  return (
+    <div className="fixed bottom-4 right-4 z-[100] bg-yellow-400 dark:bg-yellow-500 text-black dark:text-gray-900 p-4 rounded-lg shadow-lg flex items-center gap-3">
+      <AlertTriangle className="h-6 w-6 text-yellow-800 dark:text-yellow-900" />
+      <div>
+        <p className="font-semibold">Data out of sync</p>
+        <p className="text-sm">New data is available. Please refresh to see the latest updates.</p>
+      </div>
+      <Button
+        onClick={onRefresh}
+        variant="outline"
+        className="ml-auto bg-yellow-500 hover:bg-yellow-600 dark:bg-yellow-600 dark:hover:bg-yellow-700 border-yellow-600 dark:border-yellow-700 text-white dark:text-gray-900"
+      >
+        Refresh
+      </Button>
+    </div>
+  )
+}

components/UserForm.tsx

@@ -1,9 +1,19 @@
 'use client';
 
 import { createUser, updateUser, updateUserPassword, uploadAvatar } from '@/app/actions/data';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
 import { toast } from '@/hooks/use-toast';
-import { serverSettingsAtom, usersAtom } from '@/lib/atoms';
-import { useHelpers } from '@/lib/client-helpers';
+import { currentUserAtom, serverSettingsAtom, usersAtom } from '@/lib/atoms';
 import { Permission } from '@/lib/types';
 import { passwordSchema, usernameSchema } from '@/lib/zod';
 import { useAtom, useAtomValue } from 'jotai';
@@ -18,6 +28,7 @@ import { Input } from './ui/input';
 import { Label } from './ui/label';
 import { Switch } from './ui/switch';
 
+
 interface UserFormProps {
   userId?: string;  // if provided, we're editing; if not, we're creating
   onCancel: () => void;
@@ -29,7 +40,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 +68,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 +167,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 +321,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 +337,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 +348,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"

components/UserSelectModal.tsx

@@ -2,8 +2,7 @@
 
 import { signIn } from '@/app/actions/user';
 import { toast } from '@/hooks/use-toast';
-import { usersAtom } from '@/lib/atoms';
-import { useHelpers } from '@/lib/client-helpers';
+import { currentUserAtom, usersAtom } from '@/lib/atoms';
 import { SafeUser, User } from '@/lib/types';
 import { cn } from '@/lib/utils';
 import { Description } from '@radix-ui/react-dialog';
@@ -21,14 +20,16 @@ function UserCard({
   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 +54,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 +92,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 +106,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 +128,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 +173,7 @@ export default function UserSelectModal({ onClose }: { onClose: () => void }) {
           {!selectedUser && !isCreating && !isEditing ? (
             <UserSelectionView
               users={users}
-              currentUser={currentUser}
+              currentUserFromHook={currentUser}
               onUserSelect={handleUserSelect}
               onEditUser={handleEditUser}
               onCreateUser={handleCreateUser}

components/WishlistItem.tsx

@@ -7,9 +7,9 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
-import { usersAtom } from '@/lib/atoms'
-import { useHelpers } from '@/lib/client-helpers'
+import { currentUserAtom, usersAtom } from '@/lib/atoms'
 import { User, WishlistItemType } from '@/lib/types'
+import { hasPermission } from '@/lib/utils'
 import { useAtom } from 'jotai'
 import { Archive, ArchiveRestore, Coins, Edit, Gift, MoreVertical, Trash2 } from 'lucide-react'
 import { useTranslations } from 'next-intl'
@@ -59,9 +59,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 +140,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 +165,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}
               >

components/WishlistManager.tsx

@@ -66,7 +66,7 @@ export default function WishlistManager() {
       setTimeout(() => {
         setRecentlyRedeemedId(null)
       }, 3000)
-      
+
       if (item.link) {
         setTimeout(() => {
           const opened = openWindow(item.link!)
@@ -83,9 +83,9 @@ export default function WishlistManager() {
   }
 
   return (
-    <div className="container mx-auto px-4 py-8">
+    <div>
       <div className="flex justify-between items-center mb-6">
-        <h1 className="text-3xl font-bold">{t('title')}</h1>
+        <h1 className="text-xl xs:text-3xl font-bold">{t('title')}</h1>
         <Button onClick={() => setIsModalOpen(true)}>
           <Plus className="mr-2 h-4 w-4" /> {t('addRewardButton')}
         </Button>
@@ -126,7 +126,7 @@ export default function WishlistManager() {
             </div>
           ))
         )}
-        
+
         {archivedItems.length > 0 && (
           <>
             <div className="col-span-1 lg:col-span-2 relative flex items-center my-6">
@@ -152,14 +152,15 @@ export default function WishlistManager() {
           </>
         )}
       </div>
-      <AddEditWishlistItemModal
-        isOpen={isModalOpen}
-        setIsOpen={setIsModalOpen}
-        editingItem={editingItem}
-        setEditingItem={setEditingItem}
-        addWishlistItem={addWishlistItem}
-        editWishlistItem={editWishlistItem}
-      />
+      {isModalOpen &&
+        <AddEditWishlistItemModal
+          setIsOpen={setIsModalOpen}
+          editingItem={editingItem}
+          setEditingItem={setEditingItem}
+          addWishlistItem={addWishlistItem}
+          editWishlistItem={editWishlistItem}
+        />
+      }
       <ConfirmDialog
         isOpen={deleteConfirmation.isOpen}
         onClose={() => setDeleteConfirmation({ isOpen: false, itemId: null })}

components/jotai-hydrate.tsx

@@ -14,7 +14,7 @@ export function JotaiHydrate({
     [coinsAtom, initialValues.coins],
     [wishlistAtom, initialValues.wishlist],
     [usersAtom, initialValues.users],
-    [serverSettingsAtom, initialValues.serverSettings]
+    [serverSettingsAtom, initialValues.serverSettings],
   ])
   return children
 }

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,
+}

hooks/useCoins.tsx

@@ -1,48 +1,23 @@
-import { useAtom } from 'jotai'
-import { useTranslations } from 'next-intl'
-import { calculateCoinsEarnedToday, calculateCoinsSpentToday, calculateTotalEarned, calculateTotalSpent, calculateTransactionsToday, checkPermission } from '@/lib/utils'
+import { addCoins, removeCoins, saveCoinsData } from '@/app/actions/data';
+import { toast } from '@/hooks/use-toast';
 import {
   coinsAtom,
+  coinsBalanceAtom,
   coinsEarnedTodayAtom,
+  coinsSpentTodayAtom,
+  currentUserAtom,
+  settingsAtom,
   totalEarnedAtom,
   totalSpentAtom,
-  coinsSpentTodayAtom,
   transactionsTodayAtom,
-  coinsBalanceAtom,
-  settingsAtom,
   usersAtom,
-} 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'
-
-function handlePermissionCheck(
-  user: User | undefined,
-  resource: 'habit' | 'wishlist' | 'coins',
-  action: 'write' | 'interact',
-  tCommon: (key: string, values?: Record<string, any>) => string
-): boolean {
-  if (!user) {
-    toast({
-      title: tCommon("authenticationRequiredTitle"),
-      description: tCommon("authenticationRequiredDescription"),
-      variant: "destructive",
-    })
-    return false
-  }
-
-  if (!user.isAdmin && !checkPermission(user.permissions, resource, action)) {
-    toast({
-      title: tCommon("permissionDeniedTitle"),
-      description: tCommon("permissionDeniedDescription", { action, resource }),
-      variant: "destructive",
-    })
-    return false
-  }
-
-  return true
-}
+} from '@/lib/atoms';
+import { MAX_COIN_LIMIT } from '@/lib/constants';
+import { CoinsData } from '@/lib/types';
+import { calculateCoinsEarnedToday, calculateCoinsSpentToday, calculateTotalEarned, calculateTotalSpent, calculateTransactionsToday, handlePermissionCheck, roundToInteger } from '@/lib/utils';
+import { useAtom } from 'jotai';
+import { useTranslations } from 'next-intl';
+import { useEffect, useMemo, useState } from 'react';
 
 export function useCoins(options?: { selectedUser?: string }) {
   const t = useTranslations('useCoins');
@@ -50,23 +25,69 @@ 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
+      const earnedToday = calculateCoinsEarnedToday(transactions, timezone);
+      setCoinsEarnedToday(roundToInteger(earnedToday));
+
+      const totalEarnedVal = calculateTotalEarned(transactions);
+      setTotalEarned(roundToInteger(totalEarnedVal));
+
+      const totalSpentVal = calculateTotalSpent(transactions);
+      setTotalSpent(roundToInteger(totalSpentVal));
+
+      const spentToday = calculateCoinsSpentToday(transactions, timezone);
+      setCoinsSpentToday(roundToInteger(spentToday));
+
+      setTransactionsToday(calculateTransactionsToday(transactions, timezone)); // This is a count
+
+      const calculatedBalance = transactions.reduce((acc, t) => acc + t.amount, 0);
+      setBalance(roundToInteger(calculatedBalance));
+    }
+  }, [
+    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 +98,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 +128,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 }) })

hooks/useHabits.tsx

@@ -1,60 +1,30 @@
-import { useAtom, atom } from 'jotai'
-import { useTranslations } from 'next-intl'
-import { habitsAtom, coinsAtom, settingsAtom, usersAtom, habitFreqMapAtom } from '@/lib/atoms'
 import { addCoins, removeCoins, saveHabitsData } from '@/app/actions/data'
-import { Habit, Permission, SafeUser, User } from '@/lib/types'
+import { ToastAction } from '@/components/ui/toast'
 import { toast } from '@/hooks/use-toast'
-import { DateTime } from 'luxon'
+import { coinsAtom, currentUserAtom, habitFreqMapAtom, habitsAtom, settingsAtom, usersAtom } from '@/lib/atoms'
+import { Habit } from '@/lib/types'
 import {
-  getNowInMilliseconds,
-  getTodayInTimezone,
-  isSameDate,
-  t2d,
+  d2s,
   d2t,
-  getNow,
   getCompletionsForDate,
   getISODate,
-  d2s,
+  getNow,
+  getTodayInTimezone,
+  handlePermissionCheck,
+  isSameDate,
   playSound,
-  checkPermission
+  t2d
 } from '@/lib/utils'
-import { ToastAction } from '@/components/ui/toast'
+import { useAtom } from 'jotai'
 import { Undo2 } from 'lucide-react'
-import { useHelpers } from '@/lib/client-helpers'
-
-function handlePermissionCheck(
-  user: SafeUser | undefined,
-  resource: 'habit' | 'wishlist' | 'coins',
-  action: 'write' | 'interact',
-  tCommon: (key: string, values?: Record<string, any>) => string
-): boolean {
-  if (!user) {
-    toast({
-      title: tCommon("authenticationRequiredTitle"),
-      description: tCommon("authenticationRequiredDescription"),
-      variant: "destructive",
-    })
-    return false
-  }
-
-  if (!user.isAdmin && !checkPermission(user.permissions, resource, action)) {
-    toast({
-      title: tCommon("permissionDeniedTitle"),
-      description: tCommon("permissionDeniedDescription", { action, resource }),
-      variant: "destructive",
-    })
-    return false
-  }
-
-  return true
-}
-
+import { DateTime } from 'luxon'
+import { useTranslations } from 'next-intl'
 
 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)
@@ -106,7 +76,7 @@ export function useHabits() {
         type: habit.isTask ? 'TASK_COMPLETION' : 'HABIT_COMPLETION',
         relatedItemId: habit.id,
       })
-      isTargetReached && playSound()
+      playSound()
       toast({
         title: t("completedTitle"),
         description: t("earnedCoinsDescription", { coinReward: habit.coinReward }),
@@ -207,7 +177,7 @@ export function useHabits() {
     if (!handlePermissionCheck(currentUser, 'habit', 'write', tCommon)) return
     const newHabit = {
       ...habit,
-      id: habit.id || getNowInMilliseconds().toString()
+      id: habit.id || crypto.randomUUID()
     }
     const updatedHabits = habit.id
       ? habitsData.habits.map(h => h.id === habit.id ? newHabit : h)

hooks/useWishlist.tsx

@@ -1,45 +1,17 @@
+import { removeCoins, saveWishlistItems } from '@/app/actions/data'
+import { toast } from '@/hooks/use-toast'
+import { coinsAtom, currentUserAtom, wishlistAtom } from '@/lib/atoms'
+import { WishlistItemType } from '@/lib/types'
+import { handlePermissionCheck } from '@/lib/utils'
+import { celebrations } from '@/utils/celebrations'
 import { useAtom } from 'jotai'
 import { useTranslations } from 'next-intl'
-import { wishlistAtom, coinsAtom } from '@/lib/atoms'
-import { saveWishlistItems, removeCoins } from '@/app/actions/data'
-import { toast } from '@/hooks/use-toast'
-import { WishlistItemType } 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
-  resource: 'habit' | 'wishlist' | 'coins',
-  action: 'write' | 'interact',
-  tCommon: (key: string, values?: Record<string, any>) => string
-): boolean {
-  if (!user) {
-    toast({
-      title: tCommon("authenticationRequiredTitle"),
-      description: tCommon("authenticationRequiredDescription"),
-      variant: "destructive",
-    })
-    return false
-  }
-  
-  if (!user.isAdmin && !checkPermission(user.permissions, resource, action)) {
-    toast({
-      title: tCommon("permissionDeniedTitle"),
-      description: tCommon("permissionDeniedDescription", { action, resource }),
-      variant: "destructive",
-    })
-    return false
-  }
-  
-  return true
-}
-
 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()

lib/atoms.ts

@@ -4,16 +4,19 @@ import {
   calculateTotalEarned,
   calculateTotalSpent,
   calculateTransactionsToday,
+  generateCryptoHash,
   getCompletionsForToday,
   getHabitFreq,
-  getTodayInTimezone,
   isHabitDue,
+  prepareDataForHashing,
+  roundToInteger,
   t2d
 } from "@/lib/utils";
 import { atom } from "jotai";
 import { atomFamily, atomWithStorage } from "jotai/utils";
 import { DateTime } from "luxon";
 import {
+  CoinsData,
   CompletionCache,
   Freq,
   getDefaultCoinsData,
@@ -22,7 +25,13 @@ import {
   getDefaultSettings,
   getDefaultUsersData,
   getDefaultWishlistData,
-  Habit
+  Habit,
+  HabitsData,
+  ServerSettings,
+  Settings,
+  UserData,
+  UserId,
+  WishlistData
 } from "./types";
 
 export interface BrowserSettings {
@@ -37,37 +46,41 @@ export const browserSettingsAtom = atomWithStorage('browserSettings', {
   expandedWishlist: false
 } as BrowserSettings)
 
-export const usersAtom = atom(getDefaultUsersData())
-export const settingsAtom = atom(getDefaultSettings());
-export const habitsAtom = atom(getDefaultHabitsData());
-export const coinsAtom = atom(getDefaultCoinsData());
-export const wishlistAtom = atom(getDefaultWishlistData());
-export const serverSettingsAtom = atom(getDefaultServerSettings());
+export const usersAtom = atom(getDefaultUsersData<UserData>())
+export const settingsAtom = atom(getDefaultSettings<Settings>());
+export const habitsAtom = atom(getDefaultHabitsData<HabitsData>());
+export const coinsAtom = atom(getDefaultCoinsData<CoinsData>());
+export const wishlistAtom = atom(getDefaultWishlistData<WishlistData>());
+export const serverSettingsAtom = atom(getDefaultServerSettings<ServerSettings>());
 
 // Derived atom for coins earned today
 export const coinsEarnedTodayAtom = atom((get) => {
   const coins = get(coinsAtom);
   const settings = get(settingsAtom);
-  return calculateCoinsEarnedToday(coins.transactions, settings.system.timezone);
+  const value = calculateCoinsEarnedToday(coins.transactions, settings.system.timezone);
+  return roundToInteger(value);
 });
 
 // Derived atom for total earned
 export const totalEarnedAtom = atom((get) => {
   const coins = get(coinsAtom);
-  return calculateTotalEarned(coins.transactions);
+  const value = calculateTotalEarned(coins.transactions);
+  return roundToInteger(value);
 });
 
 // Derived atom for total spent
 export const totalSpentAtom = atom((get) => {
   const coins = get(coinsAtom);
-  return calculateTotalSpent(coins.transactions);
+  const value = calculateTotalSpent(coins.transactions);
+  return roundToInteger(value);
 });
 
 // Derived atom for coins spent today
 export const coinsSpentTodayAtom = atom((get) => {
   const coins = get(coinsAtom);
   const settings = get(settingsAtom);
-  return calculateCoinsSpentToday(coins.transactions, settings.system.timezone);
+  const value = calculateCoinsSpentToday(coins.transactions, settings.system.timezone);
+  return roundToInteger(value);
 });
 
 // Derived atom for transactions today
@@ -77,10 +90,27 @@ 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);
+  const balance = coins.transactions
+    .filter(transaction => transaction.userId === loggedInUserId)
+    .reduce((sum, transaction) => sum + transaction.amount, 0);
+  return roundToInteger(balance);
 });
 
 /* transient atoms */
@@ -99,6 +129,23 @@ export const pomodoroAtom = atom<PomodoroAtom>({
 })
 
 export const userSelectAtom = atom<boolean>(false)
+export const aboutOpenAtom = atom<boolean>(false)
+
+/**
+ * Asynchronous atom that calculates a freshness token (hash) based on the current client-side data.
+ * This token can be compared with a server-generated token to detect data discrepancies.
+ */
+export const clientFreshnessTokenAtom = atom(async (get) => {
+  const settings = get(settingsAtom);
+  const habits = get(habitsAtom);
+  const coins = get(coinsAtom);
+  const wishlist = get(wishlistAtom);
+  const users = get(usersAtom);
+
+  const dataString = prepareDataForHashing(settings, habits, coins, wishlist, users);
+  const hash = await generateCryptoHash(dataString);
+  return hash;
+});
 
 // Derived atom for completion cache
 export const completionCacheAtom = atom((get) => {
@@ -187,10 +234,3 @@ export const habitsByDateFamily = atomFamily((dateString: string) =>
     return habits.filter(habit => isHabitDue({ habit, timezone, date }));
   })
 );
-
-// Derived atom for daily habits
-export const dailyHabitsAtom = atom((get) => {
-  const settings = get(settingsAtom);
-  const today = getTodayInTimezone(settings.system.timezone);
-  return get(habitsByDateFamily(today));
-});

lib/client-helpers.ts

@@ -4,7 +4,7 @@
 import { useAtom } from 'jotai'
 import { useSession } from "next-auth/react"
 import { usersAtom } from './atoms'
-import { checkPermission } from './utils'
+import { hasPermission } from './utils'
 
 export function useHelpers() {
   const { data: session, status } = useSession()
@@ -30,8 +30,7 @@ export function useHelpers() {
     currentUser,
     usersData,
     status,
-    hasPermission: (resource: 'habit' | 'wishlist' | 'coins', action: 'write' | 'interact') => currentUser?.isAdmin ||
-      checkPermission(currentUser?.permissions, resource, action),
+    hasPermission,
     isIOS: iOS(),
   }
 }

lib/constants.ts

@@ -29,4 +29,8 @@ 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
+
+export const DESKTOP_DISPLAY_ITEM_COUNT = 4

lib/server-helpers.ts

@@ -37,4 +37,4 @@ export function verifyPassword(password?: string, storedHash?: string): boolean
   const newHash = saltAndHashPassword(password, salt).split(':')[1]
   // Compare the new hash with the stored hash
   return newHash === hash
-}
+}

lib/types.ts

@@ -1,5 +1,4 @@
 import { RRule } from "rrule"
-import { uuid } from "./utils"
 import { DateTime } from "luxon"
 
 export type UserId = string
@@ -97,52 +96,58 @@ export interface WishlistData {
 }
 
 // Default value functions
-export const getDefaultUsersData = (): UserData => ({
-  users: [
-    {
-      id: uuid(),
-      username: 'admin',
-      // password: '', // No default password for admin initially? Or set a secure default?
-      isAdmin: true,
-      lastNotificationReadTimestamp: undefined, // Initialize as undefined
-    }
-  ]
-});
+export function getDefaultUsersData<UserData>(): UserData {
+  return {
+    users: [
+      {
+        id: crypto.randomUUID(),
+        username: 'admin',
+        // password: '', // No default password for admin initially? Or set a secure default?
+        isAdmin: true,
+        lastNotificationReadTimestamp: undefined, // Initialize as undefined
+      }
+    ]
+  } as UserData;
+};
 
-export const getDefaultHabitsData = (): HabitsData => ({
-  habits: []
-});
+export function getDefaultHabitsData<HabitsData>(): HabitsData {
+  return { habits: [] } as HabitsData;
+}
 
+export function getDefaultTasksData<TasksData>(): TasksData {
+  return { tasks: [] } as TasksData;
+};
 
-export const getDefaultCoinsData = (): CoinsData => ({
-  balance: 0,
-  transactions: []
-});
+export function getDefaultCoinsData<CoinsData>(): CoinsData {
+  return { balance: 0, transactions: [] } as CoinsData;
+};
 
-export const getDefaultWishlistData = (): WishlistData => ({
-  items: []
-});
+export function getDefaultWishlistData<WishlistData>(): WishlistData {
+  return { items: [] } as WishlistData;
+}
 
-export const getDefaultSettings = (): Settings => ({
-  ui: {
-    useNumberFormatting: true,
-    useGrouping: true,
-  },
-  system: {
-    timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-    weekStartDay: 1, // Monday
-    autoBackupEnabled: true, // Add this line (default to true)
-    language: 'en', // Default language
-  },
-  profile: {}
-});
+export function getDefaultSettings<Settings>(): Settings {
+  return {
+    ui: {
+      useNumberFormatting: true,
+      useGrouping: true,
+    },
+    system: {
+      timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+      weekStartDay: 1, // Monday
+      autoBackupEnabled: true, // Add this line (default to true)
+      language: 'en', // Default language
+    },
+    profile: {}
+  } as Settings;
+};
 
-export const getDefaultServerSettings = (): ServerSettings => ({
-  isDemo: false
-})
+export function getDefaultServerSettings<ServerSettings>(): ServerSettings {
+  return { isDemo: false } as ServerSettings;
+}
 
 // Map of data types to their default values
-export const DATA_DEFAULTS = {
+export const DATA_DEFAULTS: { [key: string]: <T>() => T } = {
   wishlist: getDefaultWishlistData,
   habits: getDefaultHabitsData,
   coins: getDefaultCoinsData,

lib/utils.test.ts

@@ -3,12 +3,9 @@ import {
   cn,
   getTodayInTimezone,
   getNow,
-  getNowInMilliseconds,
   t2d,
   d2t,
   d2s,
-  d2sDate,
-  d2n,
   isSameDate,
   calculateCoinsEarnedToday,
   calculateTotalEarned,
@@ -16,16 +13,19 @@ import {
   calculateCoinsSpentToday,
   isHabitDueToday,
   isHabitDue,
-  uuid,
   isTaskOverdue,
   deserializeRRule,
   serializeRRule,
   convertHumanReadableFrequencyToMachineReadable,
   convertMachineReadableFrequencyToHumanReadable,
-  getUnsupportedRRuleReason
+  prepareDataForHashing,
+  getUnsupportedRRuleReason,
+  roundToInteger,
+  generateCryptoHash
 } from './utils'
-import { CoinTransaction, ParsedResultType } from './types'
+import { CoinTransaction, ParsedResultType, Settings, HabitsData, CoinsData, WishlistData, UserData } from './types'
 import { DateTime } from "luxon";
+import { getDefaultSettings, getDefaultHabitsData, getDefaultCoinsData, getDefaultWishlistData, getDefaultUsersData } from './types';
 import { RRule, Weekday } from 'rrule';
 import { Habit } from '@/lib/types';
 import { INITIAL_DUE } from './constants';
@@ -39,6 +39,33 @@ describe('cn utility', () => {
   })
 })
 
+describe('roundToInteger', () => {
+  test('should round positive numbers correctly', () => {
+    expect(roundToInteger(10.123)).toBe(10);
+    expect(roundToInteger(10.5)).toBe(11);
+    expect(roundToInteger(10.75)).toBe(11);
+    expect(roundToInteger(10.49)).toBe(10);
+  });
+
+  test('should round negative numbers correctly', () => {
+    expect(roundToInteger(-10.123)).toBe(-10);
+    expect(roundToInteger(-10.5)).toBe(-10); // Math.round rounds -x.5 to -(x-1) e.g. -10.5 to -10
+    expect(roundToInteger(-10.75)).toBe(-11);
+    expect(roundToInteger(-10.49)).toBe(-10);
+  });
+
+  test('should handle zero correctly', () => {
+    expect(roundToInteger(0)).toBe(0);
+    expect(roundToInteger(0.0)).toBe(0);
+    expect(roundToInteger(-0.0)).toBe(-0);
+  });
+
+  test('should handle integers correctly', () => {
+    expect(roundToInteger(15)).toBe(15);
+    expect(roundToInteger(-15)).toBe(-15);
+  });
+});
+
 describe('getUnsupportedRRuleReason', () => {
   test('should return message for HOURLY frequency', () => {
     const rrule = new RRule({ freq: RRule.HOURLY });
@@ -139,7 +166,7 @@ describe('isTaskOverdue', () => {
     // Create a task due "tomorrow" in UTC
     const tomorrow = DateTime.now().plus({ days: 1 }).toUTC().toISO()
     const habit = createTestHabit(tomorrow)
-    
+
     // Test in various timezones
     expect(isTaskOverdue(habit, 'UTC')).toBe(false)
     expect(isTaskOverdue(habit, 'America/New_York')).toBe(false)
@@ -147,32 +174,6 @@ describe('isTaskOverdue', () => {
   })
 })
 
-describe('uuid', () => {
-  test('should generate valid UUIDs', () => {
-    const id = uuid()
-    // UUID v4 format: 8-4-4-4-12 hex digits
-    expect(id).toMatch(/^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/)
-  })
-
-  test('should generate unique UUIDs', () => {
-    const ids = new Set()
-    for (let i = 0; i < 1000; i++) {
-      ids.add(uuid())
-    }
-    // All 1000 UUIDs should be unique
-    expect(ids.size).toBe(1000)
-  })
-
-  test('should generate v4 UUIDs', () => {
-    const id = uuid()
-    // Version 4 UUID has specific bits set:
-    // - 13th character is '4'
-    // - 17th character is '8', '9', 'a', or 'b'
-    expect(id.charAt(14)).toBe('4')
-    expect('89ab').toContain(id.charAt(19))
-  })
-})
-
 describe('datetime utilities', () => {
   let fixedNow: DateTime;
   let currentDateIndex = 0;
@@ -290,13 +291,6 @@ describe('getNow', () => {
   })
 })
 
-describe('getNowInMilliseconds', () => {
-  test('should return current time in milliseconds', () => {
-    const now = DateTime.now().setZone('UTC')
-    expect(getNowInMilliseconds()).toBe(now.toMillis().toString())
-  })
-})
-
 describe('timestamp conversion utilities', () => {
   const testTimestamp = '2024-01-01T00:00:00.000Z';
   const testDateTime = DateTime.fromISO(testTimestamp);
@@ -320,16 +314,6 @@ describe('timestamp conversion utilities', () => {
     const customFormat = d2s({ dateTime: testDateTime, format: 'yyyy-MM-dd', timezone: 'utc' });
     expect(customFormat).toBe('2024-01-01')
   })
-
-  test('d2sDate should format DateTime as date string', () => {
-    const result = d2sDate({ dateTime: testDateTime });
-    expect(result).toBeString()
-  })
-
-  test('d2n should convert DateTime to milliseconds string', () => {
-    const result = d2n({ dateTime: testDateTime });
-    expect(result).toBe('1704067200000')
-  })
 })
 
 describe('isSameDate', () => {
@@ -594,7 +578,7 @@ describe('isHabitDueToday', () => {
 
   test('should return false for invalid recurrence rule', () => {
     const habit = testHabit('INVALID_RRULE')
-    const consoleSpy = spyOn(console, 'error').mockImplementation(() => {})
+    const consoleSpy = spyOn(console, 'error').mockImplementation(() => { })
     expect(isHabitDueToday({ habit, timezone: 'UTC' })).toBe(false)
   })
 })
@@ -707,7 +691,7 @@ describe('isHabitDue', () => {
   test('should return false for invalid recurrence rule', () => {
     const habit = testHabit('INVALID_RRULE')
     const date = DateTime.fromISO('2024-01-01T00:00:00Z')
-    const consoleSpy = spyOn(console, 'error').mockImplementation(() => {})
+    const consoleSpy = spyOn(console, 'error').mockImplementation(() => { })
     expect(isHabitDue({ habit, timezone: 'UTC', date })).toBe(false)
   })
 })
@@ -956,3 +940,96 @@ describe('convertMachineReadableFrequencyToHumanReadable', () => {
     expect(humanReadable).toBe('invalid')
   })
 })
+
+describe('freshness utilities', () => {
+  const mockSettings: Settings = getDefaultSettings<Settings>();
+  const mockHabits: HabitsData = getDefaultHabitsData<HabitsData>();
+  const mockCoins: CoinsData = getDefaultCoinsData<CoinsData>();
+  const mockWishlist: WishlistData = getDefaultWishlistData<WishlistData>();
+  const mockUsers: UserData = getDefaultUsersData<UserData>();
+
+  // Add a user to mockUsers for more realistic testing
+  mockUsers.users.push({
+    id: 'user-123',
+    username: 'testuser',
+    isAdmin: false,
+  });
+  mockHabits.habits.push({
+    id: 'habit-123',
+    name: 'Test Habit',
+    description: 'A habit for testing',
+    frequency: 'FREQ=DAILY',
+    coinReward: 10,
+    completions: [],
+    userIds: ['user-123']
+  });
+
+
+  describe('prepareDataForHashing', () => {
+    test('should produce a consistent string for the same data', () => {
+      const data1 = { settings: mockSettings, habits: mockHabits, coins: mockCoins, wishlist: mockWishlist, users: mockUsers };
+      const data2 = { settings: mockSettings, habits: mockHabits, coins: mockCoins, wishlist: mockWishlist, users: mockUsers }; // Identical data
+
+      const string1 = prepareDataForHashing(data1.settings, data1.habits, data1.coins, data1.wishlist, data1.users);
+      const string2 = prepareDataForHashing(data2.settings, data2.habits, data2.coins, data2.wishlist, data2.users);
+
+      expect(string1).toBe(string2);
+    });
+
+    test('should produce a different string if settings data changes', () => {
+      const string1 = prepareDataForHashing(mockSettings, mockHabits, mockCoins, mockWishlist, mockUsers);
+      const modifiedSettings = { ...mockSettings, system: { ...mockSettings.system, timezone: 'America/Chicago' } };
+      const string2 = prepareDataForHashing(modifiedSettings, mockHabits, mockCoins, mockWishlist, mockUsers);
+      expect(string1).not.toBe(string2);
+    });
+
+    test('should produce a different string if habits data changes', () => {
+      const string1 = prepareDataForHashing(mockSettings, mockHabits, mockCoins, mockWishlist, mockUsers);
+      const modifiedHabits = { ...mockHabits, habits: [...mockHabits.habits, { id: 'new-habit', name: 'New', description: '', frequency: 'FREQ=DAILY', coinReward: 5, completions: [] }] };
+      const string2 = prepareDataForHashing(mockSettings, modifiedHabits, mockCoins, mockWishlist, mockUsers);
+      expect(string1).not.toBe(string2);
+    });
+
+    test('should handle empty data consistently', () => {
+      const emptySettings = getDefaultSettings<Settings>();
+      const emptyHabits = getDefaultHabitsData<HabitsData>();
+      const emptyCoins = getDefaultCoinsData<CoinsData>();
+      const emptyWishlist = getDefaultWishlistData<WishlistData>();
+      const emptyUsers = getDefaultUsersData<UserData>();
+
+      const string1 = prepareDataForHashing(emptySettings, emptyHabits, emptyCoins, emptyWishlist, emptyUsers);
+      const string2 = prepareDataForHashing(emptySettings, emptyHabits, emptyCoins, emptyWishlist, emptyUsers);
+      expect(string1).toBe(string2);
+      expect(string1).toBeDefined();
+    });
+  });
+
+  describe('generateCryptoHash', () => {
+    test('should generate a SHA-256 hex string', async () => {
+      const dataString = 'test string';
+      const hash = await generateCryptoHash(dataString);
+      expect(hash).toMatch(/^[a-f0-9]{64}$/); // SHA-256 hex is 64 chars
+    });
+
+    test('should generate different hashes for different strings', async () => {
+      const hash1 = await generateCryptoHash('test string 1');
+      const hash2 = await generateCryptoHash('test string 2');
+      expect(hash1).not.toBe(hash2);
+    });
+
+    test('should generate the same hash for the same string', async () => {
+      const hash1 = await generateCryptoHash('consistent string');
+      const hash2 = await generateCryptoHash('consistent string');
+      expect(hash1).toBe(hash2);
+    });
+
+    // Test with a known SHA-256 value if possible, or ensure crypto.subtle.digest is available
+    // For "hello world", SHA-256 is "b94d27b9934d3e08a52e52d7da7dabfac484efe37a5380ee9088f7ace2efcde9"
+    test('should generate correct hash for a known string', async () => {
+      const knownString = "hello world";
+      const expectedHash = "b94d27b9934d3e08a52e52d7da7dabfac484efe37a5380ee9088f7ace2efcde9";
+      const actualHash = await generateCryptoHash(knownString);
+      expect(actualHash).toBe(expectedHash);
+    });
+  });
+})

lib/utils.ts

@@ -1,12 +1,12 @@
-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 { DUE_MAP, INITIAL_DUE, RECURRENCE_RULE_MAP } from "./constants"
+import { toast } from "@/hooks/use-toast"
+import { CoinsData, CoinTransaction, Freq, Habit, HabitsData, ParsedFrequencyResult, ParsedResultType, SafeUser, Settings, User, UserData, WishlistData } from '@/lib/types'
 import * as chrono from 'chrono-node'
-import _ from "lodash"
-import { v4 as uuidv4 } from 'uuid'
+import { clsx, type ClassValue } from "clsx"
+import { DateTime, DateTimeFormatOptions } from "luxon"
+import { Formats } from "next-intl"
+import { datetime, RRule } from 'rrule'
+import { twMerge } from "tailwind-merge"
+import { DUE_MAP, INITIAL_DUE, RECURRENCE_RULE_MAP } from "./constants"
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
@@ -18,6 +18,11 @@ export function getTodayInTimezone(timezone: string): string {
   return getISODate({ dateTime: now, timezone });
 }
 
+// round a number to the nearest integer
+export function roundToInteger(value: number): number {
+  return Math.round(value);
+}
+
 export function getISODate({ dateTime, timezone }: { dateTime: DateTime, timezone: string }): string {
   return dateTime.setZone(timezone).toISODate()!;
 }
@@ -27,12 +32,6 @@ export function getNow({ timezone = 'utc', keepLocalTime }: { timezone?: string,
   return DateTime.now().setZone(timezone, { keepLocalTime });
 }
 
-// get current time in epoch milliseconds
-export function getNowInMilliseconds() {
-  const now = getNow({});
-  return d2n({ dateTime: now });
-}
-
 // iso timestamp to datetime object, most for storage read
 export function t2d({ timestamp, timezone }: { timestamp: string; timezone: string }) {
   return DateTime.fromISO(timestamp).setZone(timezone);
@@ -55,30 +54,11 @@ export function d2s({ dateTime, format, timezone }: { dateTime: DateTime, format
   return dateTime.setZone(timezone).toLocaleString(DateTime.DATETIME_MED);
 }
 
-// convert datetime object to date string, mostly for display
-export function d2sDate({ dateTime }: { dateTime: DateTime }) {
-  return dateTime.toLocaleString(DateTime.DATE_MED);
-}
-
-// convert datetime object to epoch milliseconds string, mostly for storage write
-export function d2n({ dateTime }: { dateTime: DateTime }) {
-  return dateTime.toMillis().toString();
-}
-
 // compare the date portion of two datetime objects (i.e. same year, month, day)
 export function isSameDate(a: DateTime, b: DateTime) {
   return a.hasSame(b, 'day');
 }
 
-export function normalizeCompletionDate(date: string, timezone: string): string {
-  // If already in ISO format, return as is
-  if (date.includes('T')) {
-    return date;
-  }
-  // Convert from yyyy-MM-dd to ISO format
-  return DateTime.fromFormat(date, 'yyyy-MM-dd', { zone: timezone }).toUTC().toISO()!;
-}
-
 export function getCompletionsForDate({
   habit,
   date,
@@ -432,22 +412,20 @@ export const openWindow = (url: string): boolean => {
   return true
 }
 
-export function deepMerge<T>(a: T, b: T) {
-  return _.merge(a, b, (x: unknown, y: unknown) => {
-    if (_.isArray(a)) {
-      return a.concat(b)
-    }
-  })
-}
-
-export function checkPermission(
-  permissions: Permission[] | undefined,
+export function hasPermission(
+  user: User | undefined,
   resource: 'habit' | 'wishlist' | 'coins',
   action: 'write' | 'interact'
 ): boolean {
-  if (!permissions) return false
-
-  return permissions.some(permission => {
+  if (!user || !user.permissions) {
+    return false;
+  }
+  // If user is admin, they have all permissions.
+  if (user.isAdmin) {
+    return true;
+  }
+  // Otherwise, check specific permissions.
+  return user.permissions.some(permission => {
     switch (resource) {
       case 'habit':
         return permission.habit[action]
@@ -461,6 +439,73 @@ export function checkPermission(
   })
 }
 
-export function uuid() {
-  return uuidv4()
+/**
+ * Prepares a consistent string representation of the data for hashing.
+ * It combines all relevant data pieces into a single object and then stringifies it stably.
+ */
+export function prepareDataForHashing(
+  settings: Settings,
+  habits: HabitsData,
+  coins: CoinsData,
+  wishlist: WishlistData,
+  users: UserData
+): string {
+  return JSON.stringify({
+    settings,
+    habits,
+    coins,
+    wishlist,
+    users,
+  });
 }
+
+/**
+ * Generates a SHA-256 hash for a given string using the Web Crypto API.
+ * This function is suitable for both client-side and server-side (Node.js 19+) environments.
+ * @param dataString The string to hash.
+ * @returns A promise that resolves to the hex string of the hash.
+ */
+export async function generateCryptoHash(dataString: string): Promise<string | null> {
+  try {
+    const encoder = new TextEncoder();
+    const data = encoder.encode(dataString);
+    // globalThis.crypto should be available in modern browsers and Node.js (v19+)
+    // For Node.js v15-v18, you might need: const { subtle } = require('node:crypto').webcrypto;
+    const hashBuffer = await globalThis.crypto.subtle.digest('SHA-256', data);
+    const hashArray = Array.from(new Uint8Array(hashBuffer));
+    // Convert buffer to hex string
+    const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
+    return hashHex;
+  } catch (error) {
+    console.error(`Failed to generate hash: ${error}`);
+    return null;
+  }
+}
+
+export function handlePermissionCheck(
+  user: User | SafeUser | undefined,
+  resource: 'habit' | 'wishlist' | 'coins',
+  action: 'write' | 'interact',
+  tCommon: (key: string, values?: Record<string, string | number | Date> | undefined, formats?: Formats | undefined) => string
+): boolean {
+
+  if (!user) {
+    toast({
+      title: tCommon("authenticationRequiredTitle"),
+      description: tCommon("authenticationRequiredDescription"),
+      variant: "destructive",
+    })
+    return false
+  }
+
+  if (!hasPermission(user, resource, action)) {
+    toast({
+      title: tCommon("permissionDeniedTitle"),
+      description: tCommon("permissionDeniedDescription", { action, resource }),
+      variant: "destructive",
+    })
+    return false
+  }
+
+  return true
+}

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."
   }
 }

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"
   }
 }

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}."
   }
 }

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}."
   }
 }

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}を超えることはできません。"
   }
 }

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}."
   }
 }

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}。"
   }
 }

package-lock.json

@@ -1,16 +1,17 @@
 {
   "name": "habittrove",
-  "version": "0.2.11",
+  "version": "0.2.20",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "habittrove",
-      "version": "0.2.11",
+      "version": "0.2.20",
       "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",
@@ -35,6 +36,7 @@
         "date-fns": "^3.6.0",
         "jotai": "^2.8.0",
         "js-confetti": "^0.12.0",
+        "json-stable-stringify": "^1.3.0",
         "linkify": "^0.2.1",
         "linkify-react": "^4.2.0",
         "lucide-react": "^0.469.0",
@@ -62,6 +64,7 @@
         "@tailwindcss/typography": "^0.5.15",
         "@types/archiver": "^6.0.3",
         "@types/bun": "^1.1.14",
+        "@types/json-stable-stringify": "^1.1.0",
         "@types/lodash": "^4.17.15",
         "@types/luxon": "^3.4.2",
         "@types/node": "^20.17.10",
@@ -1060,6 +1063,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 +1222,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 +1296,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 +1331,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 +1774,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 +1828,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 +1945,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 +2241,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 +2339,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 +2356,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 +2465,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 +2514,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",
@@ -2346,6 +2853,13 @@
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
       "dev": true
     },
+    "node_modules/@types/json-stable-stringify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@types/json-stable-stringify/-/json-stable-stringify-1.1.0.tgz",
+      "integrity": "sha512-ESTsHWB72QQq+pjUFIbEz9uSCZppD31YrVkbt2rnUciTYEvcwN6uZIhX5JZeBHqRlFJ41x/7MewCs7E2Qux6Cg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
@@ -3494,7 +4008,6 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
       "integrity": "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==",
-      "dev": true,
       "dependencies": {
         "call-bind-apply-helpers": "^1.0.0",
         "es-define-property": "^1.0.0",
@@ -3509,10 +4022,10 @@
       }
     },
     "node_modules/call-bind-apply-helpers": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.1.tgz",
-      "integrity": "sha512-BhYE+WDaywFg2TBWYNXAE+8B1ATnThNBqXHP5nQu0jWJdVvY2hvkpyB3qOmtmDePiS5/BDQ8wASEWGMWRG148g==",
-      "dev": true,
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0",
         "function-bind": "^1.1.2"
@@ -3522,13 +4035,13 @@
       }
     },
     "node_modules/call-bound": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.3.tgz",
-      "integrity": "sha512-YTd+6wGlNlPxSuri7Y6X8tY2dmm12UMH66RpKMhiX6rsk5wXXnYgbUcOt8kiS31/AjfoTOvCsE+w8nZQLQnzHA==",
-      "dev": true,
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+      "license": "MIT",
       "dependencies": {
-        "call-bind-apply-helpers": "^1.0.1",
-        "get-intrinsic": "^1.2.6"
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
       },
       "engines": {
         "node": ">= 0.4"
@@ -4099,7 +4612,6 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
       "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
-      "dev": true,
       "dependencies": {
         "es-define-property": "^1.0.0",
         "es-errors": "^1.3.0",
@@ -4198,7 +4710,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
       "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
-      "dev": true,
       "dependencies": {
         "call-bind-apply-helpers": "^1.0.1",
         "es-errors": "^1.3.0",
@@ -4326,7 +4837,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
       "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       }
@@ -4335,7 +4845,6 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
       "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       }
@@ -4375,10 +4884,10 @@
       "peer": true
     },
     "node_modules/es-object-atoms": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.0.0.tgz",
-      "integrity": "sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==",
-      "dev": true,
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0"
       },
@@ -5139,21 +5648,21 @@
       }
     },
     "node_modules/get-intrinsic": {
-      "version": "1.2.6",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.6.tgz",
-      "integrity": "sha512-qxsEs+9A+u85HhllWJJFicJfPDhRmjzoYdl64aMWW9yRIJmSyxdn8IEkuIM530/7T+lv0TIHd8L6Q/ra0tEoeA==",
-      "dev": true,
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "license": "MIT",
       "dependencies": {
-        "call-bind-apply-helpers": "^1.0.1",
-        "dunder-proto": "^1.0.0",
+        "call-bind-apply-helpers": "^1.0.2",
         "es-define-property": "^1.0.1",
         "es-errors": "^1.3.0",
-        "es-object-atoms": "^1.0.0",
+        "es-object-atoms": "^1.1.1",
         "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
         "gopd": "^1.2.0",
         "has-symbols": "^1.1.0",
         "hasown": "^2.0.2",
-        "math-intrinsics": "^1.0.0"
+        "math-intrinsics": "^1.1.0"
       },
       "engines": {
         "node": ">= 0.4"
@@ -5170,6 +5679,19 @@
         "node": ">=6"
       }
     },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/get-symbol-description": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.1.0.tgz",
@@ -5290,7 +5812,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
       "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -5334,7 +5855,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
       "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
-      "dev": true,
       "dependencies": {
         "es-define-property": "^1.0.0"
       },
@@ -5361,7 +5881,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
       "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -6018,8 +6537,7 @@
     "node_modules/isarray": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
-      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
-      "dev": true
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw=="
     },
     "node_modules/isexe": {
       "version": "2.0.0",
@@ -6166,6 +6684,25 @@
       "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
       "dev": true
     },
+    "node_modules/json-stable-stringify": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify/-/json-stable-stringify-1.3.0.tgz",
+      "integrity": "sha512-qtYiSSFlwot9XHtF9bD9c7rwKjr+RecWT//ZnPvSmEjpV5mmPOCN4j8UjY5hbjNkOwZ/jQv3J6R1/pL7RwgMsg==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "isarray": "^2.0.5",
+        "jsonify": "^0.0.1",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
@@ -6184,6 +6721,15 @@
         "json5": "lib/cli.js"
       }
     },
+    "node_modules/jsonify": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.1.tgz",
+      "integrity": "sha512-2/Ki0GcmuqSrgFyelQq9M05y7PS0mEwuIzrf3f1fPqkVDVRvZrPZtVSMHxdgo8Aq0sxAOb/cr2aqqA3LeWHVPg==",
+      "license": "Public Domain",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/jsx-ast-utils": {
       "version": "3.3.5",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
@@ -6461,7 +7007,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
       "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       }
@@ -7391,7 +7936,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
       "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       }
@@ -7987,15 +8531,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"
@@ -8452,7 +8997,6 @@
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
       "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
-      "dev": true,
       "dependencies": {
         "define-data-property": "^1.1.4",
         "es-errors": "^1.3.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "habittrove",
-  "version": "0.2.12",
+  "version": "0.2.23",
   "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",
@@ -61,7 +62,6 @@
     "rrule": "^2.8.1",
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7",
-    "uuid": "^11.0.5",
     "web-push": "^3.6.7",
     "zod": "^3.24.1"
   },

tailwind.config.ts

@@ -8,6 +8,17 @@ export default {
     "./app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
+    screens: {
+      '3xs': '320px',
+      '2xs': '375px',
+      'xs': '480px',
+      'sm': '640px',
+      'md': '768px',
+      'lg': '1024px',
+      'xl': '1280px',
+      '2xl': '1536px',
+      '3xl': '1920px'
+    },
     extend: {
       keyframes: {
         celebrate: {