Added notification for admin user (#106)

* admin user can see per-user coins data

* fixes

* fix

.github/workflows/docker-publish.yml

@@ -52,13 +52,12 @@ jobs:
           push: true
           tags: |
             ${{ steps.check-version.outputs.EXISTS == 'false' && format('dohsimpson/habittrove:v{0}', steps.package-version.outputs.VERSION) || '' }}
-            ${{ steps.check-version.outputs.EXISTS == 'false' && 'dohsimpson/habittrove:latest' || '' }}
-            dohsimpson/habittrove:dev
+            dohsimpson/habittrove:demo
 
   deploy-demo:
     runs-on: ubuntu-latest
     needs: build-and-push
-    # demo tracks the latest tag
+    # demo tracks the demo tag
     if: needs.build-and-push.outputs.EXISTS == 'false'
     steps:
       - uses: actions/checkout@v4

.github/workflows/test.yml

@@ -21,5 +21,8 @@ jobs:
       - name: Install dependencies
         run: bun install
 
+      - name: Run lint
+        run: bun run lint
+
       - name: Run unit tests
         run: bun test

.gitignore

@@ -41,6 +41,7 @@ yarn-error.log*
 next-env.d.ts
 
 # customize
-data/*
+/data/*
+/data.*/*
 Budfile
 certificates

.husky/pre-commit

@@ -1,7 +1 @@
-if git diff --cached --name-only --diff-filter=d | xargs grep -n '🪚'; then
-  echo "Error: Found debug marker 🪚 in these files:"
-  git diff --cached --name-only --diff-filter=d | xargs grep -n '🪚' | awk -F: '{print "  " $1 ":" $2}'
-  exit 1
-fi
-
-npm run typecheck && npm run test
+npm run typecheck && npm run lint && npm run test

CHANGELOG.md

@@ -1,5 +1,55 @@
 # Changelog
 
+## Version 0.2.8
+
+### Added
+
+* notification for admin users on shared habit / wishlist completion (#92)
+
+## Version 0.2.7
+
+### Added
+
+* visual pin indicators for pinned habits/tasks
+* pin/unpin options in context menus
+* support click and right-click context menu in dailyoverview
+
+## Version 0.2.6
+
+### Added
+
+* support weekly / monthly intervals for recurring frequency (#99)
+* show error when frequency is unsupported (#56)
+* add task / habit button in habit view
+
+### Fixed
+
+* make user select modal scrollable
+
+## Version 0.2.5
+
+### Changed
+
+* bumped Nextjs version (cve-2025-29927)
+
+## Version 0.2.4
+
+### Added
+
+* admin can select user to view coins for that user
+
+### Fixed
+
+* fix disable password in demo instance (#74)
+
+## Version 0.2.3
+
+### Fixed
+
+* gracefully handle invalid rrule (#76)
+* fix long habit name overflow in daily (#75)
+* disable password in demo instance (#74)
+
 ## Version 0.2.2
 
 ### Changed

Dockerfile

@@ -1,9 +1,9 @@
 # syntax=docker.io/docker/dockerfile:1
 
-FROM --platform=$BUILDPLATFORM node:18-alpine AS base
+FROM node:18-alpine AS base
 
 # Install dependencies only when needed
-FROM --platform=$BUILDPLATFORM base AS deps
+FROM base AS deps
 # Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
 RUN apk add --no-cache libc6-compat
 WORKDIR /app
@@ -19,7 +19,7 @@ RUN \
   fi
 
 # Rebuild the source code only when needed
-FROM --platform=$BUILDPLATFORM base AS builder
+FROM base AS builder
 WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .

app/actions/data.ts

@@ -19,7 +19,8 @@ import {
   getDefaultWishlistData,
   getDefaultHabitsData,
   getDefaultCoinsData,
-  Permission
+  Permission,
+  ServerSettings
 } from '@/lib/types'
 import { d2t, deepMerge, getNow, checkPermission, uuid } from '@/lib/utils';
 import { verifyPassword } from "@/lib/server-helpers";
@@ -43,7 +44,7 @@ async function verifyPermission(
 
   // 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}`)
   // }
@@ -105,7 +106,7 @@ async function saveData<T>(type: DataType, data: T): Promise<void> {
 export async function loadWishlistData(): Promise<WishlistData> {
   const user = await getCurrentUser()
   if (!user) return getDefaultWishlistData()
-  
+
   const data = await loadData<WishlistData>('wishlist')
   return {
     ...data,
@@ -152,7 +153,7 @@ export async function loadHabitsData(): Promise<HabitsData> {
 
 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)
@@ -184,7 +185,7 @@ export async function loadCoinsData(): Promise<CoinsData> {
     const data = await loadData<CoinsData>('coins')
     return {
       ...data,
-      transactions: data.transactions.filter(x => x.userId === user.id)
+      transactions: user.isAdmin ? data.transactions : data.transactions.filter(x => x.userId === user.id)
     }
   } catch {
     return getDefaultCoinsData()
@@ -193,7 +194,7 @@ export async function loadCoinsData(): Promise<CoinsData> {
 
 export async function saveCoinsData(data: CoinsData): Promise<void> {
   const user = await getCurrentUser()
-  
+
   // Create clones of the data
   const newData = _.cloneDeep(data)
   newData.transactions = newData.transactions.map(transaction => ({
@@ -218,14 +219,17 @@ export async function addCoins({
   type = 'MANUAL_ADJUSTMENT',
   relatedItemId,
   note,
+  userId,
 }: {
   amount: number
   description: string
   type?: TransactionType
   relatedItemId?: string
   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(),
@@ -234,7 +238,8 @@ export async function addCoins({
     description,
     timestamp: d2t({ dateTime: getNow({}) }),
     ...(relatedItemId && { relatedItemId }),
-    ...(note && note.trim() !== '' && { note })
+    ...(note && note.trim() !== '' && { note }),
+    userId: userId || currentUser?.id
   }
 
   const newData: CoinsData = {
@@ -269,14 +274,17 @@ export async function removeCoins({
   type = 'MANUAL_ADJUSTMENT',
   relatedItemId,
   note,
+  userId,
 }: {
   amount: number
   description: string
   type?: TransactionType
   relatedItemId?: string
   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(),
@@ -285,7 +293,8 @@ export async function removeCoins({
     description,
     timestamp: d2t({ dateTime: getNow({}) }),
     ...(relatedItemId && { relatedItemId }),
-    ...(note && note.trim() !== '' && { note })
+    ...(note && note.trim() !== '' && { note }),
+    userId: userId || currentUser?.id
   }
 
   const newData: CoinsData = {
@@ -361,8 +370,8 @@ export async function createUser(formData: FormData): Promise<User> {
   const username = formData.get('username') as string;
   let password = formData.get('password') as string | undefined;
   const avatarPath = formData.get('avatarPath') as string;
-  const permissions = formData.get('permissions') ? 
-    JSON.parse(formData.get('permissions') as string) as Permission[] : 
+  const permissions = formData.get('permissions') ?
+    JSON.parse(formData.get('permissions') as string) as Permission[] :
     undefined;
 
   if (password === null) password = undefined
@@ -376,7 +385,7 @@ export async function createUser(formData: FormData): Promise<User> {
     throw new Error('Username already exists');
   }
 
-  const hashedPassword = password ? saltAndHashPassword(password) : '';
+  const hashedPassword = password ? saltAndHashPassword(password) : undefined;
 
 
   const newUser: User = {
@@ -385,6 +394,7 @@ export async function createUser(formData: FormData): Promise<User> {
     password: hashedPassword,
     permissions,
     isAdmin: false,
+    lastNotificationReadTimestamp: undefined,
     ...(avatarPath && { avatarPath })
   };
 
@@ -474,3 +484,34 @@ export async function deleteUser(userId: string): Promise<void> {
 
   await saveUsersData(newData)
 }
+
+export async function updateLastNotificationReadTimestamp(userId: string, timestamp: string): Promise<void> {
+  const data = await loadUsersData()
+  const userIndex = data.users.findIndex(user => user.id === userId)
+
+  if (userIndex === -1) {
+    throw new Error('User not found for updating notification timestamp')
+  }
+
+  const updatedUser = {
+    ...data.users[userIndex],
+    lastNotificationReadTimestamp: timestamp
+  }
+
+  const newData: UserData = {
+    users: [
+      ...data.users.slice(0, userIndex),
+      updatedUser,
+      ...data.users.slice(userIndex + 1)
+    ]
+  }
+
+  await saveUsersData(newData)
+}
+
+
+export async function loadServerSettings(): Promise<ServerSettings> {
+  return {
+    isDemo: !!process.env.DEMO,
+  }
+}

app/layout.tsx

@@ -4,7 +4,7 @@ import { DM_Sans } from 'next/font/google'
 import { JotaiProvider } from '@/components/jotai-providers'
 import { Suspense } from 'react'
 import { JotaiHydrate } from '@/components/jotai-hydrate'
-import { loadSettings, loadHabitsData, loadCoinsData, loadWishlistData, loadUsersData } from './actions/data'
+import { loadSettings, loadHabitsData, loadCoinsData, loadWishlistData, loadUsersData, loadServerSettings } from './actions/data'
 import Layout from '@/components/Layout'
 import { Toaster } from '@/components/ui/toaster'
 import { ThemeProvider } from "@/components/theme-provider"
@@ -37,12 +37,13 @@ export default async function RootLayout({
 }: {
   children: React.ReactNode
 }) {
-  const [initialSettings, initialHabits, initialCoins, initialWishlist, initialUsers] = await Promise.all([
+  const [initialSettings, initialHabits, initialCoins, initialWishlist, initialUsers, initialServerSettings] = await Promise.all([
     loadSettings(),
     loadHabitsData(),
     loadCoinsData(),
     loadWishlistData(),
     loadUsersData(),
+    loadServerSettings(),
   ])
 
   return (
@@ -74,7 +75,8 @@ export default async function RootLayout({
                 habits: initialHabits,
                 coins: initialCoins,
                 wishlist: initialWishlist,
-                users: initialUsers
+                users: initialUsers,
+                serverSettings: initialServerSettings,
               }}
             >
               <ThemeProvider

components/AddEditHabitModal.tsx

@@ -16,8 +16,8 @@ import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover
 import data from '@emoji-mart/data'
 import Picker from '@emoji-mart/react'
 import { Habit, SafeUser } from '@/lib/types'
-import { d2s, d2t, getISODate, getNow, parseNaturalLanguageDate, parseNaturalLanguageRRule, parseRRule, serializeRRule } from '@/lib/utils'
-import { INITIAL_DUE, INITIAL_RECURRENCE_RULE, QUICK_DATES } from '@/lib/constants'
+import { convertHumanReadableFrequencyToMachineReadable, convertMachineReadableFrequencyToHumanReadable, d2s, d2t, serializeRRule } from '@/lib/utils'
+import { INITIAL_DUE, INITIAL_RECURRENCE_RULE, QUICK_DATES, RECURRENCE_RULE_MAP } from '@/lib/constants'
 import * as chrono from 'chrono-node';
 import { DateTime } from 'luxon'
 import {
@@ -43,15 +43,44 @@ export default function AddEditHabitModal({ onClose, onSave, habit, isTask }: Ad
   const [coinReward, setCoinReward] = useState(habit?.coinReward || 1)
   const [targetCompletions, setTargetCompletions] = useState(habit?.targetCompletions || 1)
   const isRecurRule = !isTask
-  const origRuleText = isRecurRule ? parseRRule(habit?.frequency || INITIAL_RECURRENCE_RULE).toText() : habit?.frequency || INITIAL_DUE
-  const [ruleText, setRuleText] = useState<string>(origRuleText)
-  const now = getNow({ timezone: settings.system.timezone })
+  // Initialize ruleText with the actual frequency string or default, not the display text
+  const initialRuleText = habit?.frequency ? convertMachineReadableFrequencyToHumanReadable({ 
+    frequency: habit.frequency,
+    isRecurRule, 
+    timezone: settings.system.timezone
+  }) : (isRecurRule ? INITIAL_RECURRENCE_RULE : INITIAL_DUE);
+  const [ruleText, setRuleText] = useState<string>(initialRuleText)
   const { currentUser } = useHelpers()
   const [isQuickDatesOpen, setIsQuickDatesOpen] = useState(false)
+  const [ruleError, setRuleError] = useState<string | null>(null); // State for validation message
   const [selectedUserIds, setSelectedUserIds] = useState<string[]>((habit?.userIds || []).filter(id => id !== currentUser?.id))
   const [usersData] = useAtom(usersAtom)
   const users = usersData.users
 
+  function getFrequencyUpdate() {
+    if (ruleText === initialRuleText && habit?.frequency) {
+      // If text hasn't changed and original frequency exists, return it
+      return habit.frequency;
+    }
+
+    const parsedResult = convertHumanReadableFrequencyToMachineReadable({
+      text: ruleText,
+      timezone: settings.system.timezone,
+      isRecurring: isRecurRule
+    });
+
+    if (parsedResult.result) {
+      return isRecurRule
+        ? serializeRRule(parsedResult.result as RRule)
+        : d2t({
+          dateTime: parsedResult.result as DateTime,
+          timezone: settings.system.timezone
+        });
+    } else {
+      return 'invalid';
+    }
+  }
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
     await onSave({
@@ -60,8 +89,7 @@ export default function AddEditHabitModal({ onClose, onSave, habit, isTask }: Ad
       coinReward,
       targetCompletions: targetCompletions > 1 ? targetCompletions : undefined,
       completions: habit?.completions || [],
-      frequency: isRecurRule ? serializeRRule(parseNaturalLanguageRRule(ruleText)) : d2t({ dateTime: parseNaturalLanguageDate({ text: ruleText, timezone: settings.system.timezone }) }),
-      isTask: isTask || undefined,
+      frequency: getFrequencyUpdate(),
       userIds: selectedUserIds.length > 0 ? selectedUserIds.concat(currentUser?.id || []) : (currentUser && [currentUser.id])
     })
   }
@@ -129,6 +157,7 @@ export default function AddEditHabitModal({ onClose, onSave, habit, isTask }: Ad
               <Label htmlFor="recurrence" className="text-right">
                 When *
               </Label>
+              {/* date input (task) */}
               <div className="col-span-3 space-y-2">
                 <div className="flex gap-2">
                   <Input
@@ -172,16 +201,26 @@ export default function AddEditHabitModal({ onClose, onSave, habit, isTask }: Ad
                   )}
                 </div>
               </div>
-              <div className="col-start-2 col-span-3 text-sm text-muted-foreground">
-                <span>
-                  {(() => {
-                    try {
-                      return isRecurRule ? parseNaturalLanguageRRule(ruleText).toText() : d2s({ dateTime: parseNaturalLanguageDate({ text: ruleText, timezone: settings.system.timezone }), timezone: settings.system.timezone, format: DateTime.DATE_MED_WITH_WEEKDAY })
-                    } catch (e: unknown) {
-                      return `Invalid rule: ${e instanceof Error ? e.message : 'Invalid recurrence rule'}`
-                    }
-                  })()}
-                </span>
+              {/* rrule input (habit) */}
+              <div className="col-start-2 col-span-3 text-sm">
+                {(() => {
+                  let displayText = '';
+                  let errorMessage: string | null = null;
+                  const { result, message } = convertHumanReadableFrequencyToMachineReadable({ text: ruleText, timezone: settings.system.timezone, isRecurring: isRecurRule });
+                  errorMessage = message;
+                  displayText = convertMachineReadableFrequencyToHumanReadable({ frequency: result, isRecurRule, timezone: settings.system.timezone })
+
+                  return (
+                    <>
+                      <span className={errorMessage ? 'text-destructive' : 'text-muted-foreground'}>
+                        {displayText}
+                      </span>
+                      {errorMessage && (
+                        <p className="text-destructive text-xs mt-1">{errorMessage}</p>
+                      )}
+                    </>
+                  );
+                })()}
               </div>
             </div>
             <div className="grid grid-cols-4 items-center gap-4">
@@ -276,13 +315,13 @@ export default function AddEditHabitModal({ onClose, onSave, habit, isTask }: Ad
                       <Avatar
                         key={user.id}
                         className={`h-8 w-8 border-2 cursor-pointer
-                          ${selectedUserIds.includes(user.id) 
-                            ? 'border-primary' 
+                          ${selectedUserIds.includes(user.id)
+                            ? 'border-primary'
                             : 'border-muted'
                           }`}
                         title={user.username}
                         onClick={() => {
-                          setSelectedUserIds(prev => 
+                          setSelectedUserIds(prev =>
                             prev.includes(user.id)
                               ? prev.filter(id => id !== user.id)
                               : [...prev, user.id]

components/CoinsManager.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, useEffect, useRef } from 'react' // Import useEffect, useRef
+import { useSearchParams } from 'next/navigation' // Import useSearchParams
 import { t2d, d2s, getNow, isSameDate } from '@/lib/utils'
 import { Button } from '@/components/ui/button'
 import { FormattedNumber } from '@/components/FormattedNumber'
@@ -17,6 +18,8 @@ import { TransactionNoteEditor } from './TransactionNoteEditor'
 import { useHelpers } from '@/lib/client-helpers'
 
 export default function CoinsManager() {
+  const { currentUser } = useHelpers()
+  const [selectedUser, setSelectedUser] = useState<string>()
   const {
     add,
     remove,
@@ -28,16 +31,39 @@ export default function CoinsManager() {
     totalSpent,
     coinsSpentToday,
     transactionsToday
-  } = useCoins()
+  } = useCoins({selectedUser})
   const [settings] = useAtom(settingsAtom)
   const [usersData] = useAtom(usersAtom)
   const DEFAULT_AMOUNT = '0'
   const [amount, setAmount] = useState(DEFAULT_AMOUNT)
   const [pageSize, setPageSize] = useState(50)
   const [currentPage, setCurrentPage] = useState(1)
-  const { currentUser } = useHelpers()
-
   const [note, setNote] = useState('')
+  const searchParams = useSearchParams()
+  const highlightId = searchParams.get('highlight')
+  const userIdFromQuery = searchParams.get('user') // Get user ID from query
+  const transactionRefs = useRef<Record<string, HTMLDivElement | null>>({});
+
+  // Effect to set selected user from query param if admin
+  useEffect(() => {
+    if (currentUser?.isAdmin && userIdFromQuery && userIdFromQuery !== selectedUser) {
+      // Check if the user ID from query exists in usersData
+      if (usersData.users.some(u => u.id === userIdFromQuery)) {
+        setSelectedUser(userIdFromQuery);
+      }
+    }
+    // Only run when userIdFromQuery or currentUser changes, avoid re-running on selectedUser change within this effect
+  }, [userIdFromQuery, currentUser, usersData.users]);
+
+  // Effect to scroll to highlighted transaction
+  useEffect(() => {
+    if (highlightId && transactionRefs.current[highlightId]) {
+      transactionRefs.current[highlightId]?.scrollIntoView({
+        behavior: 'smooth',
+        block: 'center',
+      });
+    }
+  }, [highlightId, transactions]); // Re-run if highlightId or transactions change
 
   const handleSaveNote = async (transactionId: string, note: string) => {
     await updateNote(transactionId, note)
@@ -62,7 +88,22 @@ export default function CoinsManager() {
 
   return (
     <div className="container mx-auto px-4 py-8">
-      <h1 className="text-3xl font-bold mb-6">Coins Management</h1>
+      <div className="flex items-center justify-between mb-6">
+        <h1 className="text-3xl font-bold mr-6">Coins Management</h1>
+        {currentUser?.isAdmin && (
+          <select
+            className="border rounded p-2"
+            value={selectedUser}
+            onChange={(e) => setSelectedUser(e.target.value)}
+          >
+            {usersData.users.map(user => (
+              <option key={user.id} value={user.id}>
+                {user.username}
+              </option>
+            ))}
+          </select>
+        )}
+      </div>
 
       <div className="grid gap-6 md:grid-cols-2">
         <Card>
@@ -233,13 +274,17 @@ export default function CoinsManager() {
                         }
                       }
 
+                      const isHighlighted = transaction.id === highlightId;
                       return (
                         <div
                           key={transaction.id}
-                          className="flex justify-between items-center p-3 border rounded hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+                          ref={(el) => { transactionRefs.current[transaction.id] = el; }} // Assign ref correctly
+                          className={`flex justify-between items-center p-3 border rounded hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors ${
+                            isHighlighted ? 'ring-2 ring-blue-500 bg-blue-50 dark:bg-blue-900/30' : '' // Apply highlight styles
+                          }`}
                         >
-                          <div className="space-y-1">
-                            <div className="flex items-center gap-2">
+                          <div className="space-y-1 flex-grow mr-4"> {/* Added flex-grow and margin */}
+                            <div className="flex items-center gap-2 flex-wrap"> {/* Added flex-wrap */}
                               {transaction.relatedItemId ? (
                                 <Link
                                   href={`${transaction.type === 'WISH_REDEMPTION' ? '/wishlist' : '/habits'}?highlight=${transaction.relatedItemId}`}
@@ -258,12 +303,13 @@ export default function CoinsManager() {
                               </span>
                               {transaction.userId && currentUser?.isAdmin && (
                                 <Avatar className="h-6 w-6">
-                                  <AvatarImage 
-                                    src={usersData.users.find(u => u.id === transaction.userId)?.avatarPath && 
-                                      `/api/avatars/${usersData.users.find(u => u.id === transaction.userId)?.avatarPath?.split('/').pop()}` || ""} 
+                                  <AvatarImage
+                                    src={usersData.users.find(u => u.id === transaction.userId)?.avatarPath ?
+                                      `/api/avatars/${usersData.users.find(u => u.id === transaction.userId)?.avatarPath?.split('/').pop()}` : undefined}
+                                    alt={usersData.users.find(u => u.id === transaction.userId)?.username}
                                   />
                                   <AvatarFallback>
-                                    {usersData.users.find(u => u.id === transaction.userId)?.username[0]}
+                                    {usersData.users.find(u => u.id === transaction.userId)?.username?.[0] || '?'}
                                   </AvatarFallback>
                                 </Avatar>
                               )}
@@ -278,14 +324,16 @@ export default function CoinsManager() {
                               onDelete={handleDeleteNote}
                             />
                           </div>
-                          <span
-                            className={`font-mono ${transaction.amount >= 0
-                              ? 'text-green-600 dark:text-green-400'
-                              : 'text-red-600 dark:text-red-400'
-                              }`}
-                          >
-                            {transaction.amount >= 0 ? '+' : ''}{transaction.amount}
-                          </span>
+                          <div className="flex-shrink-0 text-right"> {/* Ensure amount stays on the right */}
+                            <span
+                              className={`font-mono ${transaction.amount >= 0
+                                ? 'text-green-600 dark:text-green-400'
+                                : 'text-red-600 dark:text-red-400'
+                                }`}
+                            >
+                              {transaction.amount >= 0 ? '+' : ''}{transaction.amount}
+                            </span>
+                          </div>
                         </div>
                       )
                     })}

components/DailyOverview.tsx

@@ -1,4 +1,4 @@
-import { Circle, Coins, ArrowRight, CircleCheck, ChevronDown, ChevronUp, Timer, Plus } from 'lucide-react'
+import { Circle, Coins, ArrowRight, CircleCheck, ChevronDown, ChevronUp, Timer, Plus, Pin, Calendar } from 'lucide-react'
 import CompletionCountBadge from './CompletionCountBadge'
 import {
   ContextMenu,
@@ -6,16 +6,16 @@ import {
   ContextMenuItem,
   ContextMenuTrigger,
 } from "@/components/ui/context-menu"
-import { cn, isHabitDueToday, getHabitFreq } from '@/lib/utils'
+import { cn, getHabitFreq } from '@/lib/utils'
 import Link from 'next/link'
-import { useState, useEffect } from 'react'
+import { useState } from 'react'
 import { useAtom } from 'jotai'
 import { pomodoroAtom, settingsAtom, completedHabitsMapAtom, browserSettingsAtom, BrowserSettings, hasTasksAtom, dailyHabitsAtom } from '@/lib/atoms'
 import { getTodayInTimezone, isSameDate, t2d, d2t, getNow } from '@/lib/utils'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Badge } from '@/components/ui/badge'
 import { Progress } from '@/components/ui/progress'
-import { WishlistItemType } from '@/lib/types'
+import { Settings, WishlistItemType } from '@/lib/types'
 import { Habit } from '@/lib/types'
 import Linkify from './linkify'
 import { useHabits } from '@/hooks/useHabits'
@@ -28,6 +28,283 @@ interface UpcomingItemsProps {
   coinBalance: number
 }
 
+interface ItemSectionProps {
+  title: string;
+  items: Habit[];
+  emptyMessage: string;
+  isTask: boolean;
+  viewLink: string;
+  expanded: boolean;
+  setExpanded: (value: boolean) => void;
+  addNewItem: () => void;
+  badgeType: "tasks" | "habits";
+  todayCompletions: Habit[];
+  settings: Settings;
+  setBrowserSettings: (value: React.SetStateAction<BrowserSettings>) => void;
+}
+
+const ItemSection = ({
+  title,
+  items,
+  emptyMessage,
+  isTask,
+  viewLink,
+  expanded,
+  setExpanded,
+  addNewItem,
+  badgeType,
+  todayCompletions,
+  settings,
+  setBrowserSettings,
+}: ItemSectionProps) => {
+  const { completeHabit, undoComplete, saveHabit } = useHabits();
+  const [_, setPomo] = useAtom(pomodoroAtom);
+
+  if (items.length === 0) {
+    return (
+      <div>
+        <div className="flex items-center justify-between mb-2">
+          <h3 className="font-semibold">{title}</h3>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-7 w-7 rounded-full hover:bg-primary/10 hover:text-primary"
+            onClick={addNewItem}
+          >
+            <Plus className="h-4 w-4" />
+            <span className="sr-only">Add {isTask ? "Task" : "Habit"}</span>
+          </Button>
+        </div>
+        <div className="text-center text-muted-foreground text-sm py-4">
+          {emptyMessage}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div className="flex items-center justify-between mb-2">
+        <div className="flex items-center gap-2">
+          <h3 className="font-semibold">{title}</h3>
+        </div>
+        <div className="flex items-center gap-2">
+          <CompletionCountBadge type={badgeType} />
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-7 w-7 rounded-full hover:bg-primary/10 hover:text-primary"
+            onClick={addNewItem}
+          >
+            <Plus className="h-4 w-4" />
+            <span className="sr-only">Add {isTask ? "Task" : "Habit"}</span>
+          </Button>
+        </div>
+      </div>
+      <ul className={`grid gap-2 transition-all duration-300 ease-in-out ${expanded ? 'max-h-none' : 'max-h-[200px]'} overflow-hidden`}>
+        {items
+          .sort((a, b) => {
+            // First by pinned status
+            if (a.pinned !== b.pinned) {
+              return a.pinned ? -1 : 1;
+            }
+
+            // Then by completion status
+            const aCompleted = todayCompletions.includes(a);
+            const bCompleted = todayCompletions.includes(b);
+            if (aCompleted !== bCompleted) {
+              return aCompleted ? 1 : -1;
+            }
+
+            // Then by frequency (daily first)
+            const aFreq = getHabitFreq(a);
+            const bFreq = getHabitFreq(b);
+            const freqOrder = ['daily', 'weekly', 'monthly', 'yearly'];
+            if (freqOrder.indexOf(aFreq) !== freqOrder.indexOf(bFreq)) {
+              return freqOrder.indexOf(aFreq) - freqOrder.indexOf(bFreq);
+            }
+
+            // Then by coin reward (higher first)
+            if (a.coinReward !== b.coinReward) {
+              return b.coinReward - a.coinReward;
+            }
+
+            // Finally by target completions (higher first)
+            const aTarget = a.targetCompletions || 1;
+            const bTarget = b.targetCompletions || 1;
+            return bTarget - aTarget;
+          })
+          .slice(0, expanded ? undefined : 5)
+          .map((habit) => {
+            const completionsToday = habit.completions.filter(completion =>
+              isSameDate(t2d({ timestamp: completion, timezone: settings.system.timezone }), t2d({ timestamp: d2t({ dateTime: getNow({ timezone: settings.system.timezone }) }), timezone: settings.system.timezone }))
+            ).length
+            const target = habit.targetCompletions || 1
+            const isCompleted = completionsToday >= target || (isTask && habit.archived)
+            return (
+              <li
+                className={`flex items-center justify-between text-sm p-2 rounded-md
+                ${isCompleted ? 'bg-secondary/50' : 'bg-secondary/20'}`}
+                key={habit.id}
+              >
+                <span className="flex items-center gap-2 flex-1 min-w-0">
+                  <ContextMenu>
+                    <ContextMenuTrigger asChild>
+                      <div className="flex items-center gap-2 cursor-pointer flex-1 min-w-0">
+                        <div className="flex-shrink-0">
+                          <button
+                            onClick={(e) => {
+                              e.preventDefault();
+                              e.stopPropagation();
+                              if (isCompleted) {
+                                undoComplete(habit);
+                              } else {
+                                completeHabit(habit);
+                              }
+                            }}
+                            className="relative hover:opacity-70 transition-opacity w-4 h-4"
+                          >
+                            {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 ${(completionsToday / target) * 360}deg,
+                                  transparent ${(completionsToday / target) * 360}deg 360deg
+                                )`,
+                                    mask: 'radial-gradient(transparent 50%, black 51%)',
+                                    WebkitMask: 'radial-gradient(transparent 50%, black 51%)'
+                                  }}
+                                />
+                              </div>
+                            )}
+                          </button>
+                        </div>
+                        <span className="flex items-center gap-1">
+                          {habit.pinned && (
+                            <Pin className="h-4 w-4 text-yellow-500" />
+                          )}
+                          <Link
+                            href={`/habits?highlight=${habit.id}`}
+                            className={cn(
+                              isCompleted ? 'line-through' : '',
+                              'break-all hover:text-primary transition-colors'
+                            )}
+                          >
+                            {habit.name}
+                          </Link>
+                        </span>
+                      </div>
+                    </ContextMenuTrigger>
+                    <ContextMenuContent className="w-64">
+                      <ContextMenuItem onClick={() => {
+                        setPomo((prev) => ({
+                          ...prev,
+                          show: true,
+                          selectedHabitId: habit.id
+                        }))
+                      }}>
+                        <Timer className="mr-2 h-4 w-4" />
+                        <span>Start Pomodoro</span>
+                      </ContextMenuItem>
+                      {habit.isTask && (
+                        <ContextMenuItem onClick={() => {
+                          saveHabit({...habit, frequency: d2t({ dateTime: getNow({ timezone: settings.system.timezone })})})
+                        }}>
+                          <Calendar className="mr-2 h-4 w-4" />
+                          <span>Move to Today</span>
+                        </ContextMenuItem>
+                      )}
+                      <ContextMenuItem onClick={() => {
+                        saveHabit({ ...habit, pinned: !habit.pinned })
+                      }}>
+                        {habit.pinned ? (
+                          <>
+                            <Pin className="mr-2 h-4 w-4" />
+                            <span>Unpin</span>
+                          </>
+                        ) : (
+                          <>
+                            <Pin className="mr-2 h-4 w-4" />
+                            <span>Pin</span>
+                          </>
+                        )}
+                      </ContextMenuItem>
+                    </ContextMenuContent>
+                  </ContextMenu>
+                </span>
+                <span className="flex items-center gap-2 text-xs text-muted-foreground flex-shrink-0">
+                  {habit.targetCompletions && (
+                    <span className="bg-secondary px-1.5 py-0.5 rounded-full">
+                      {completionsToday}/{target}
+                    </span>
+                  )}
+                  {getHabitFreq(habit) !== 'daily' && (
+                    <Badge variant="outline" className="text-xs">
+                      {getHabitFreq(habit)}
+                    </Badge>
+                  )}
+                  <span className="flex items-center">
+                    <Coins className={cn(
+                      "h-3 w-3 mr-1 transition-all",
+                      isCompleted
+                        ? "text-yellow-500 drop-shadow-[0_0_2px_rgba(234,179,8,0.3)]"
+                        : "text-gray-400"
+                    )} />
+                    <span className={cn(
+                      "transition-all",
+                      isCompleted
+                        ? "text-yellow-500 font-medium"
+                        : "text-gray-400"
+                    )}>
+                      {habit.coinReward}
+                    </span>
+                  </span>
+                </span>
+              </li>
+            )
+          })}
+      </ul>
+      <div className="flex items-center justify-between">
+        <button
+          onClick={() => setExpanded(!expanded)}
+          className="text-sm text-muted-foreground hover:text-primary flex items-center gap-1"
+        >
+          {expanded ? (
+            <>
+              Show less
+              <ChevronUp className="h-3 w-3" />
+            </>
+          ) : (
+            <>
+              Show all
+              <ChevronDown className="h-3 w-3" />
+            </>
+          )}
+        </button>
+        <Link
+          href={viewLink}
+          className="text-sm text-muted-foreground hover:text-primary flex items-center gap-1"
+          onClick={() => {
+            if (isTask) {
+              setBrowserSettings(prev => ({ ...prev, viewType: 'tasks' }));
+            } else {
+              setBrowserSettings(prev => ({ ...prev, viewType: 'habits' }));
+            }
+          }}
+        >
+          View
+          <ArrowRight className="h-3 w-3" />
+        </Link>
+      </div>
+    </div>
+  );
+};
+
 export default function DailyOverview({
   habits,
   wishlistItems,
@@ -37,12 +314,12 @@ export default function DailyOverview({
   const [settings] = useAtom(settingsAtom)
   const [completedHabitsMap] = useAtom(completedHabitsMapAtom)
   const [dailyItems] = useAtom(dailyHabitsAtom)
+  const [browserSettings, setBrowserSettings] = useAtom(browserSettingsAtom)
   const dailyTasks = dailyItems.filter(habit => habit.isTask)
   const dailyHabits = dailyItems.filter(habit => !habit.isTask)
   const today = getTodayInTimezone(settings.system.timezone)
   const todayCompletions = completedHabitsMap.get(today) || []
   const { saveHabit } = useHabits()
-  const [browserSettings, setBrowserSettings] = useAtom(browserSettingsAtom)
 
   // Get all wishlist items sorted by redeemable status (non-redeemable first) then by coin cost
   // Filter out archived wishlist items
@@ -62,7 +339,7 @@ export default function DailyOverview({
     })
 
   const [hasTasks] = useAtom(hasTasksAtom)
-  const [_, setPomo] = useAtom(pomodoroAtom)
+  const [, setPomo] = useAtom(pomodoroAtom)
   const [modalConfig, setModalConfig] = useState<{
     isOpen: boolean,
     isTask: boolean
@@ -80,414 +357,38 @@ export default function DailyOverview({
         <CardContent>
           <div className="space-y-6">
             {/* Tasks Section */}
-            {hasTasks && dailyTasks.length === 0 ? (
-              <div>
-                <div className="flex items-center justify-between mb-2">
-                  <h3 className="font-semibold">Daily Tasks</h3>
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    className="h-7 w-7 rounded-full hover:bg-primary/10 hover:text-primary"
-                    onClick={() => {
-                      setModalConfig({
-                        isOpen: true,
-                        isTask: true
-                      });
-                    }}
-                  >
-                    <Plus className="h-4 w-4" />
-                    <span className="sr-only">Add Task</span>
-                  </Button>
-                </div>
-                <div className="text-center text-muted-foreground text-sm py-4">
-                  No tasks due today. Add some tasks to get started!
-                </div>
-              </div>
-            ) : hasTasks && (
-              <div>
-                <div className="flex items-center justify-between mb-2">
-                  <div className="flex items-center gap-2">
-                    <h3 className="font-semibold">Daily Tasks</h3>
-                  </div>
-                <div className="flex items-center gap-2">
-                  <CompletionCountBadge type="tasks" />
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    className="h-7 w-7 rounded-full hover:bg-primary/10 hover:text-primary"
-                    onClick={() => {
-                      setModalConfig({
-                        isOpen: true,
-                        isTask: true
-                      });
-                    }}
-                  >
-                    <Plus className="h-4 w-4" />
-                    <span className="sr-only">Add Task</span>
-                  </Button>
-                </div>
-              </div>
-              <ul className={`grid gap-2 transition-all duration-300 ease-in-out ${browserSettings.expandedTasks ? 'max-h-none' : 'max-h-[200px]'} overflow-hidden`}>
-                {dailyTasks
-                  .sort((a, b) => {
-                    // First by completion status
-                    const aCompleted = todayCompletions.includes(a);
-                    const bCompleted = todayCompletions.includes(b);
-                    if (aCompleted !== bCompleted) {
-                      return aCompleted ? 1 : -1;
-                    }
-
-                    // Then by frequency (daily first)
-                    const aFreq = getHabitFreq(a);
-                    const bFreq = getHabitFreq(b);
-                    const freqOrder = ['daily', 'weekly', 'monthly', 'yearly'];
-                    if (freqOrder.indexOf(aFreq) !== freqOrder.indexOf(bFreq)) {
-                      return freqOrder.indexOf(aFreq) - freqOrder.indexOf(bFreq);
-                    }
-
-                    // Then by coin reward (higher first)
-                    if (a.coinReward !== b.coinReward) {
-                      return b.coinReward - a.coinReward;
-                    }
-
-                    // Finally by target completions (higher first)
-                    const aTarget = a.targetCompletions || 1;
-                    const bTarget = b.targetCompletions || 1;
-                    return bTarget - aTarget;
-                  })
-                  .slice(0, browserSettings.expandedTasks ? undefined : 5)
-                  .map((habit) => {
-                    const completionsToday = habit.completions.filter(completion =>
-                      isSameDate(t2d({ timestamp: completion, timezone: settings.system.timezone }), t2d({ timestamp: d2t({ dateTime: getNow({ timezone: settings.system.timezone }) }), timezone: settings.system.timezone }))
-                    ).length
-                    const target = habit.targetCompletions || 1
-                    const isCompleted = completionsToday >= target || (habit.isTask && habit.archived)
-                    return (
-                      <li
-                        className={`flex items-center justify-between text-sm p-2 rounded-md
-                        ${isCompleted ? 'bg-secondary/50' : 'bg-secondary/20'}`}
-                        key={habit.id}
-                      >
-                        <span className="flex items-center gap-2">
-                          <ContextMenu>
-                            <ContextMenuTrigger asChild>
-                              <div className="flex-none">
-                                <button
-                                  onClick={(e) => {
-                                    e.preventDefault();
-                                    if (isCompleted) {
-                                      undoComplete(habit);
-                                    } else {
-                                      completeHabit(habit);
-                                    }
-                                  }}
-                                  className="relative hover:opacity-70 transition-opacity w-4 h-4"
-                                >
-                                  {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 ${(completionsToday / target) * 360}deg,
-                                        transparent ${(completionsToday / target) * 360}deg 360deg
-                                      )`,
-                                          mask: 'radial-gradient(transparent 50%, black 51%)',
-                                          WebkitMask: 'radial-gradient(transparent 50%, black 51%)'
-                                        }}
-                                      />
-                                    </div>
-                                  )}
-                                </button>
-                              </div>
-                            </ContextMenuTrigger>
-                            <span className={isCompleted ? 'line-through' : ''}>
-                              <Linkify>
-                                {habit.name}
-                              </Linkify>
-                            </span>
-                            <ContextMenuContent className="w-64">
-                              <ContextMenuItem onClick={() => {
-                                setPomo((prev) => ({
-                                  ...prev,
-                                  show: true,
-                                  selectedHabitId: habit.id
-                                }))
-                              }}>
-                                <Timer className="mr-2 h-4 w-4" />
-                                <span>Start Pomodoro</span>
-                              </ContextMenuItem>
-                            </ContextMenuContent>
-                          </ContextMenu>
-                        </span>
-                        <span className="flex items-center gap-2 text-xs text-muted-foreground">
-                          {habit.targetCompletions && (
-                            <span className="bg-secondary px-1.5 py-0.5 rounded-full">
-                              {completionsToday}/{target}
-                            </span>
-                          )}
-                          {getHabitFreq(habit) !== 'daily' && (
-                            <Badge variant="outline" className="text-xs">
-                              {getHabitFreq(habit)}
-                            </Badge>
-                          )}
-                          <span className="flex items-center">
-                            <Coins className={cn(
-                              "h-3 w-3 mr-1 transition-all",
-                              isCompleted
-                                ? "text-yellow-500 drop-shadow-[0_0_2px_rgba(234,179,8,0.3)]"
-                                : "text-gray-400"
-                            )} />
-                            <span className={cn(
-                              "transition-all",
-                              isCompleted
-                                ? "text-yellow-500 font-medium"
-                                : "text-gray-400"
-                            )}>
-                              {habit.coinReward}
-                            </span>
-                          </span>
-                        </span>
-                      </li>
-                    )
-                  })}
-              </ul>
-              <div className="flex items-center justify-between">
-                <button
-                  onClick={() => setBrowserSettings(prev => ({ ...prev, expandedTasks: !prev.expandedTasks }))}
-                  className="text-sm text-muted-foreground hover:text-primary flex items-center gap-1"
-                >
-                  {browserSettings.expandedTasks ? (
-                    <>
-                      Show less
-                      <ChevronUp className="h-3 w-3" />
-                    </>
-                  ) : (
-                    <>
-                      Show all
-                      <ChevronDown className="h-3 w-3" />
-                    </>
-                  )}
-                </button>
-                <Link
-                  href="/habits?view=tasks"
-                  className="text-sm text-muted-foreground hover:text-primary flex items-center gap-1"
-                  onClick={() => setBrowserSettings(prev => ({ ...prev, viewType: 'tasks' }))}
-                >
-                  View
-                  <ArrowRight className="h-3 w-3" />
-                </Link>
-              </div>
-            </div>
+            {hasTasks && (
+              <ItemSection
+                title="Daily Tasks"
+                items={dailyTasks}
+                emptyMessage="No tasks due today. Add some tasks to get started!"
+                isTask={true}
+                viewLink="/habits?view=tasks"
+                expanded={browserSettings.expandedTasks}
+                setExpanded={(value) => setBrowserSettings(prev => ({ ...prev, expandedTasks: value }))}
+                addNewItem={() => setModalConfig({ isOpen: true, isTask: true })}
+                badgeType="tasks"
+                todayCompletions={todayCompletions}
+                settings={settings}
+                setBrowserSettings={setBrowserSettings}
+              />
             )}
 
             {/* Habits Section */}
-            {dailyHabits.length === 0 ? (
-              <div>
-                <div className="flex items-center justify-between mb-2">
-                  <h3 className="font-semibold">Daily Habits</h3>
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    className="h-7 w-7 rounded-full hover:bg-primary/10 hover:text-primary"
-                    onClick={() => {
-                      setModalConfig({
-                        isOpen: true,
-                        isTask: false
-                      });
-                    }}
-                  >
-                    <Plus className="h-4 w-4" />
-                    <span className="sr-only">Add Habit</span>
-                  </Button>
-                </div>
-                <div className="text-center text-muted-foreground text-sm py-4">
-                  No habits due today. Add some habits to get started!
-                </div>
-              </div>
-            ) : (
-              <div>
-                <div className="flex items-center justify-between mb-2">
-                  <div className="flex items-center gap-2">
-                    <h3 className="font-semibold">Daily Habits</h3>
-                  </div>
-                <div className="flex items-center gap-2">
-                  <CompletionCountBadge type="habits" />
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    className="h-7 w-7 rounded-full hover:bg-primary/10 hover:text-primary"
-                    onClick={() => {
-                      setModalConfig({
-                        isOpen: true,
-                        isTask: false
-                      });
-                    }}
-                  >
-                    <Plus className="h-4 w-4" />
-                    <span className="sr-only">Add Habit</span>
-                  </Button>
-                </div>
-              </div>
-              <ul className={`grid gap-2 transition-all duration-300 ease-in-out ${browserSettings.expandedHabits ? 'max-h-none' : 'max-h-[200px]'} overflow-hidden`}>
-                {dailyHabits
-                  .sort((a, b) => {
-                    // First by completion status
-                    const aCompleted = todayCompletions.includes(a);
-                    const bCompleted = todayCompletions.includes(b);
-                    if (aCompleted !== bCompleted) {
-                      return aCompleted ? 1 : -1;
-                    }
-
-                    // Then by frequency (daily first)
-                    const aFreq = getHabitFreq(a);
-                    const bFreq = getHabitFreq(b);
-                    const freqOrder = ['daily', 'weekly', 'monthly', 'yearly'];
-                    if (freqOrder.indexOf(aFreq) !== freqOrder.indexOf(bFreq)) {
-                      return freqOrder.indexOf(aFreq) - freqOrder.indexOf(bFreq);
-                    }
-
-                    // Then by coin reward (higher first)
-                    if (a.coinReward !== b.coinReward) {
-                      return b.coinReward - a.coinReward;
-                    }
-
-                    // Finally by target completions (higher first)
-                    const aTarget = a.targetCompletions || 1;
-                    const bTarget = b.targetCompletions || 1;
-                    return bTarget - aTarget;
-                  })
-                  .slice(0, browserSettings.expandedHabits ? undefined : 5)
-                  .map((habit) => {
-                    const completionsToday = habit.completions.filter(completion =>
-                      isSameDate(t2d({ timestamp: completion, timezone: settings.system.timezone }), t2d({ timestamp: d2t({ dateTime: getNow({ timezone: settings.system.timezone }) }), timezone: settings.system.timezone }))
-                    ).length
-                    const target = habit.targetCompletions || 1
-                    const isCompleted = completionsToday >= target
-                    return (
-                      <li
-                        className={`flex items-center justify-between text-sm p-2 rounded-md
-                        ${isCompleted ? 'bg-secondary/50' : 'bg-secondary/20'}`}
-                        key={habit.id}
-                      >
-                        <span className="flex items-center gap-2">
-                          <ContextMenu>
-                            <ContextMenuTrigger asChild>
-                              <div className="flex-none">
-                                <button
-                                  onClick={(e) => {
-                                    e.preventDefault();
-                                    if (isCompleted) {
-                                      undoComplete(habit);
-                                    } else {
-                                      completeHabit(habit);
-                                    }
-                                  }}
-                                  className="relative hover:opacity-70 transition-opacity w-4 h-4"
-                                >
-                                  {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 ${(completionsToday / target) * 360}deg,
-                                        transparent ${(completionsToday / target) * 360}deg 360deg
-                                      )`,
-                                          mask: 'radial-gradient(transparent 50%, black 51%)',
-                                          WebkitMask: 'radial-gradient(transparent 50%, black 51%)'
-                                        }}
-                                      />
-                                    </div>
-                                  )}
-                                </button>
-                              </div>
-                            </ContextMenuTrigger>
-                            <span className={isCompleted ? 'line-through' : ''}>
-                              <Linkify>
-                                {habit.name}
-                              </Linkify>
-                            </span>
-                            <ContextMenuContent className="w-64">
-                              <ContextMenuItem onClick={() => {
-                                setPomo((prev) => ({
-                                  ...prev,
-                                  show: true,
-                                  selectedHabitId: habit.id
-                                }))
-                              }}>
-                                <Timer className="mr-2 h-4 w-4" />
-                                <span>Start Pomodoro</span>
-                              </ContextMenuItem>
-                            </ContextMenuContent>
-                          </ContextMenu>
-                        </span>
-                        <span className="flex items-center gap-2 text-xs text-muted-foreground">
-                          {habit.targetCompletions && (
-                            <span className="bg-secondary px-1.5 py-0.5 rounded-full">
-                              {completionsToday}/{target}
-                            </span>
-                          )}
-                          {getHabitFreq(habit) !== 'daily' && (
-                            <Badge variant="outline" className="text-xs">
-                              {getHabitFreq(habit)}
-                            </Badge>
-                          )}
-                          <span className="flex items-center">
-                            <Coins className={cn(
-                              "h-3 w-3 mr-1 transition-all",
-                              isCompleted
-                                ? "text-yellow-500 drop-shadow-[0_0_2px_rgba(234,179,8,0.3)]"
-                                : "text-gray-400"
-                            )} />
-                            <span className={cn(
-                              "transition-all",
-                              isCompleted
-                                ? "text-yellow-500 font-medium"
-                                : "text-gray-400"
-                            )}>
-                              {habit.coinReward}
-                            </span>
-                          </span>
-                        </span>
-                      </li>
-                    )
-                  })}
-              </ul>
-              <div className="flex items-center justify-between">
-                <button
-                  onClick={() => setBrowserSettings(prev => ({ ...prev, expandedHabits: !prev.expandedHabits }))}
-                  className="text-sm text-muted-foreground hover:text-primary flex items-center gap-1"
-                >
-                  {browserSettings.expandedHabits ? (
-                    <>
-                      Show less
-                      <ChevronUp className="h-3 w-3" />
-                    </>
-                  ) : (
-                    <>
-                      Show all
-                      <ChevronDown className="h-3 w-3" />
-                    </>
-                  )}
-                </button>
-                <Link
-                  href="/habits"
-                  className="text-sm text-muted-foreground hover:text-primary flex items-center gap-1"
-                  onClick={() => setBrowserSettings(prev => ({ ...prev, viewType: 'habits' }))}
-                >
-                  View
-                  <ArrowRight className="h-3 w-3" />
-                </Link>
-              </div>
-            </div>
-            )}
+            <ItemSection
+              title="Daily Habits"
+              items={dailyHabits}
+              emptyMessage="No habits due today. Add some habits to get started!"
+              isTask={false}
+              viewLink="/habits"
+              expanded={browserSettings.expandedHabits}
+              setExpanded={(value) => setBrowserSettings(prev => ({ ...prev, expandedHabits: value }))}
+              addNewItem={() => setModalConfig({ isOpen: true, isTask: false })}
+              badgeType="habits"
+              todayCompletions={todayCompletions}
+              settings={settings}
+              setBrowserSettings={setBrowserSettings}
+            />
 
             <div className="space-y-2">
               <div className="flex items-center justify-between mb-2">

components/HabitItem.tsx

@@ -1,10 +1,10 @@
 import { Habit, SafeUser, User, Permission } from '@/lib/types'
 import { useAtom } from 'jotai'
 import { settingsAtom, pomodoroAtom, browserSettingsAtom, usersAtom } from '@/lib/atoms'
-import { getTodayInTimezone, isSameDate, t2d, d2t, getNow, parseNaturalLanguageRRule, parseRRule, d2s, getCompletionsForToday, isTaskOverdue } from '@/lib/utils'
+import { getTodayInTimezone, isSameDate, t2d, d2t, getNow, d2s, getCompletionsForToday, isTaskOverdue, convertMachineReadableFrequencyToHumanReadable } from '@/lib/utils'
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
-import { Coins, Edit, Trash2, Check, Undo2, MoreVertical, Timer, Archive, ArchiveRestore, Calendar } from 'lucide-react'
+import { Coins, Edit, Trash2, Check, Undo2, MoreVertical, Timer, Archive, ArchiveRestore, Calendar, Pin } from 'lucide-react'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -14,7 +14,7 @@ import {
 } from '@/components/ui/dropdown-menu'
 import { useEffect, useState } from 'react'
 import { useHabits } from '@/hooks/useHabits'
-import { INITIAL_RECURRENCE_RULE } from '@/lib/constants'
+import { INITIAL_RECURRENCE_RULE, RECURRENCE_RULE_MAP } from '@/lib/constants'
 import { DateTime } from 'luxon'
 import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar'
 import { useHelpers } from '@/lib/client-helpers'
@@ -88,7 +88,12 @@ export default function HabitItem({ habit, onEdit, onDelete }: HabitItemProps) {
       <CardHeader className="flex-none">
         <div className="flex justify-between items-start">
           <CardTitle className={`line-clamp-1 ${habit.archived ? 'text-gray-400 dark:text-gray-500' : ''} flex items-center ${isTasksView ? 'w-full' : ''} justify-between`}>
-            <span>{habit.name}</span>
+            <div className="flex items-center gap-1">
+              {habit.pinned && (
+                <Pin className="h-4 w-4 text-yellow-500" />
+              )}
+              <span>{habit.name}</span>
+            </div>
             {isTaskOverdue(habit, settings.system.timezone) && (
               <span className="ml-2 inline-flex items-center rounded-md bg-red-50 dark:bg-red-900/30 px-2 py-1 text-xs font-medium text-red-700 dark:text-red-400 ring-1 ring-inset ring-red-600/10 dark:ring-red-500/20">
                 Overdue
@@ -104,7 +109,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'}`}>When: {isRecurRule ? parseRRule(habit.frequency || INITIAL_RECURRENCE_RULE).toText() : d2s({ dateTime: t2d({ timestamp: habit.frequency, timezone: settings.system.timezone }), timezone: settings.system.timezone, format: DateTime.DATE_MED_WITH_WEEKDAY })}</p>
+        <p className={`text-sm ${habit.archived ? 'text-gray-400 dark:text-gray-500' : 'text-gray-500'}`}>
+          When: {convertMachineReadableFrequencyToHumanReadable({
+            frequency: habit.frequency,
+            isRecurRule,
+            timezone: settings.system.timezone
+          })}
+        </p>
         <div className="flex items-center mt-2">
           <Coins className={`h-4 w-4 mr-1 ${habit.archived ? 'text-gray-400 dark:text-gray-500' : 'text-yellow-400'}`} />
           <span className={`text-sm font-medium ${habit.archived ? 'text-gray-400 dark:text-gray-500' : ''}`}>{habit.coinReward} coins per completion</span>
@@ -206,6 +217,19 @@ export default function HabitItem({ habit, onEdit, onDelete }: HabitItemProps) {
                       <span>Move to Today</span>
                     </DropdownMenuItem>
                   )}
+                  <DropdownMenuItem disabled={!canWrite} onClick={() => saveHabit({...habit, pinned: !habit.pinned})}>
+                    {habit.pinned ? (
+                      <>
+                        <Archive className="mr-2 h-4 w-4" />
+                        <span>Unpin</span>
+                      </>
+                    ) : (
+                      <>
+                        <Archive className="mr-2 h-4 w-4" />
+                        <span>Pin</span>
+                      </>
+                    )}
+                  </DropdownMenuItem>
                   <DropdownMenuItem disabled={!canWrite} onClick={() => archiveHabit(habit.id)}>
                     <Archive className="mr-2 h-4 w-4" />
                     <span>Archive</span>

components/HabitList.tsx

@@ -22,7 +22,9 @@ export default function HabitList() {
   const habits = habitsData.habits.filter(habit => 
     isTasksView ? habit.isTask : !habit.isTask
   )
-  const activeHabits = habits.filter(h => !h.archived)
+  const activeHabits = habits
+    .filter(h => !h.archived)
+    .sort((a, b) => (b.pinned ? 1 : 0) - (a.pinned ? 1 : 0))
   const archivedHabits = habits.filter(h => h.archived)
   const [settings] = useAtom(settingsAtom)
   const [modalConfig, setModalConfig] = useState<{
@@ -41,17 +43,22 @@ export default function HabitList() {
 
   return (
     <div className="container mx-auto px-4 py-8">
-             <div className="flex justify-between items-center mb-6">
-         <h1 className="text-3xl font-bold">
-           {isTasksView ? 'My Tasks' : 'My Habits'}
-         </h1>
-         <Button onClick={() => setModalConfig({ isOpen: true, isTask: isTasksView })}>
-           <Plus className="mr-2 h-4 w-4" /> {isTasksView ? 'Add Task' : 'Add Habit'}
-         </Button>
-       </div>
-       <div className='py-4'>
-         <ViewToggle />
-       </div>
+      <div className="flex justify-between items-center mb-6">
+        <h1 className="text-3xl font-bold">
+          {isTasksView ? 'My Tasks' : 'My Habits'}
+        </h1>
+        <span>
+          <Button className="mr-2" onClick={() => setModalConfig({ isOpen: true, isTask: true })}>
+            <Plus className="mr-2 h-4 w-4" /> {'Add Task'}
+          </Button>
+          <Button onClick={() => setModalConfig({ isOpen: true, isTask: false })}>
+            <Plus className="mr-2 h-4 w-4" /> {'Add Habit'}
+          </Button>
+        </span>
+      </div>
+      <div className='py-4'>
+        <ViewToggle />
+      </div>
       <div className="grid grid-cols-1 md:grid-cols-2 gap-4 items-stretch">
         {activeHabits.length === 0 ? (
           <div className="col-span-2">
@@ -62,19 +69,19 @@ export default function HabitList() {
             />
           </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 && (
           <>
             <div className="col-span-1 sm:col-span-2 relative flex items-center my-6">

components/Header.tsx

@@ -1,13 +1,14 @@
 'use client'
 
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useAtom } from 'jotai'
 import { coinsAtom, settingsAtom, browserSettingsAtom } from '@/lib/atoms'
 import { useCoins } from '@/hooks/useCoins'
 import { FormattedNumber } from '@/components/FormattedNumber'
-import { Bell, Menu, Settings, User, Info, Coins } from 'lucide-react'
+import { Menu, Settings, User, Info, Coins } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { Logo } from '@/components/Logo'
+import NotificationBell from './NotificationBell'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -19,6 +20,7 @@ import AboutModal from './AboutModal'
 import Link from 'next/link'
 import dynamic from 'next/dynamic'
 import { Profile } from './Profile'
+import { useHelpers } from '@/lib/client-helpers'
 
 interface HeaderProps {
   className?: string
@@ -52,9 +54,7 @@ export default function Header({ className }: HeaderProps) {
                   </div>
                 </div>
               </Link>
-              <Button variant="ghost" size="icon" aria-label="Notifications">
-                <Bell className="h-5 w-5" />
-              </Button>
+              <NotificationBell />
               <Profile />
             </div>
           </div>

components/NotificationBell.tsx

@@ -0,0 +1,133 @@
+'use client'
+
+import { useMemo } from 'react'
+import { useAtom } from 'jotai'
+import { coinsAtom, habitsAtom, wishlistAtom, usersAtom } from '@/lib/atoms'
+import { Bell } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import NotificationDropdown from './NotificationDropdown';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} 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 { currentUser } = useHelpers();
+  const [coinsData] = useAtom(coinsAtom)
+  const [habitsData] = useAtom(habitsAtom)
+  const [wishlistData] = useAtom(wishlistAtom)
+  const [usersData] = useAtom(usersAtom);
+
+  // --- Calculate Unread and Read Notifications ---
+  const { unreadNotifications, displayedReadNotifications } = useMemo(() => {
+    const unread: CoinTransaction[] = [];
+    const read: CoinTransaction[] = [];
+    const MAX_READ_NOTIFICATIONS = 10; // Limit the number of past notifications shown
+
+    if (!currentUser || !currentUser.id) {
+      return { unreadNotifications: [], displayedReadNotifications: [] };
+    }
+
+    const lastReadTimestamp = currentUser.lastNotificationReadTimestamp
+      ? t2d({ timestamp: currentUser.lastNotificationReadTimestamp, timezone: 'UTC' })
+      : null;
+
+    // Iterate through transactions (assuming they are sorted newest first)
+    for (const tx of coinsData.transactions) {
+      // Stop processing if we have enough read notifications
+      if (read.length >= MAX_READ_NOTIFICATIONS && (!lastReadTimestamp || t2d({ timestamp: tx.timestamp, timezone: 'UTC' }) <= lastReadTimestamp)) {
+        break; // Optimization: stop early if we have enough read and are past the unread ones
+      }
+
+      // Basic checks: must have a related item and be triggered by someone else
+      if (!tx.relatedItemId || tx.userId === currentUser.id) {
+        continue;
+      }
+
+      // Check if the transaction type indicates a notification-worthy event
+      const isRelevantType = tx.type === 'HABIT_COMPLETION' || tx.type === 'TASK_COMPLETION' || tx.type === 'WISH_REDEMPTION';
+      if (!isRelevantType) {
+        continue;
+      }
+
+      // Check if the related item is shared with the current user
+      let isShared = false;
+      const isHabitCompletion = tx.type === 'HABIT_COMPLETION' || tx.type === 'TASK_COMPLETION';
+      const isWishRedemption = tx.type === 'WISH_REDEMPTION';
+
+      if (isHabitCompletion) {
+        const habit = habitsData.habits.find(h => h.id === tx.relatedItemId);
+        if (habit?.userIds?.includes(currentUser.id) && tx.userId && habit.userIds.includes(tx.userId)) {
+          isShared = true;
+        }
+      } else if (isWishRedemption) {
+        const wish = wishlistData.items.find(w => w.id === tx.relatedItemId);
+        if (wish?.userIds?.includes(currentUser.id) && tx.userId && wish.userIds.includes(tx.userId)) {
+          isShared = true;
+        }
+      }
+
+      if (!isShared) {
+        continue; // Skip if not shared
+      }
+
+      // Transaction is relevant, determine if read or unread
+      const txTimestamp = t2d({ timestamp: tx.timestamp, timezone: 'UTC' });
+      if (!lastReadTimestamp || txTimestamp > lastReadTimestamp) {
+        unread.push(tx);
+      } else if (read.length < MAX_READ_NOTIFICATIONS) {
+        // Only add to read if we haven't hit the limit
+        read.push(tx);
+      }
+    }
+
+    // Transactions are assumed to be sorted newest first from the source
+    return { unreadNotifications: unread, displayedReadNotifications: read };
+  }, [coinsData.transactions, habitsData.habits, wishlistData.items, currentUser]);
+  // --- End Calculate Notifications ---
+
+  const unreadCount = unreadNotifications.length;
+
+  const handleNotificationClick = async () => {
+    if (!currentUser || !currentUser.id || unreadCount === 0) return; // Only update if there are unread notifications
+    try {
+      const nowTimestamp = d2t({ dateTime: getNow({}) });
+      await updateLastNotificationReadTimestamp(currentUser.id, nowTimestamp);
+    } catch (error) {
+      console.error("Failed to update notification read timestamp:", error);
+    }
+  };
+
+  return (
+    <DropdownMenu onOpenChange={(open) => {
+      // Update timestamp only when opening the dropdown and there are unread notifications
+      if (open && unreadCount > 0) {
+        handleNotificationClick();
+      }
+    }}>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="icon" aria-label="Notifications" className="relative">
+          <Bell className="h-5 w-5" />
+          {unreadCount > 0 && (
+            <span className="absolute top-1 right-1 block h-2 w-2 rounded-full bg-red-500 ring-1 ring-white dark:ring-gray-800" />
+          )}
+        </Button>
+      </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
+          unreadNotifications={unreadNotifications}
+          displayedReadNotifications={displayedReadNotifications}
+          habitsData={habitsData} // Pass necessary data down
+          wishlistData={wishlistData}
+          usersData={usersData}
+        />
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

components/NotificationDropdown.tsx

@@ -0,0 +1,135 @@
+import React from 'react';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Separator } from '@/components/ui/separator';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { CoinsData, HabitsData, WishlistData, UserData, User, CoinTransaction } from '@/lib/types';
+import { t2d } from '@/lib/utils';
+import Link from 'next/link';
+import { DropdownMenuItem } from '@/components/ui/dropdown-menu';
+import { Info } from 'lucide-react';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+
+interface NotificationDropdownProps {
+  currentUser: User | null;
+  unreadNotifications: CoinTransaction[];
+  displayedReadNotifications: CoinTransaction[];
+  habitsData: HabitsData; // Keep needed props
+  wishlistData: WishlistData;
+  usersData: UserData;
+}
+
+// Helper function to generate notification message
+const getNotificationMessage = (tx: CoinTransaction, triggeringUser?: User, relatedItemName?: string): string => {
+  const username = triggeringUser?.username || 'Someone';
+  const itemName = relatedItemName || 'a shared item';
+  switch (tx.type) {
+    case 'HABIT_COMPLETION':
+    case 'TASK_COMPLETION':
+      return `${username} completed ${itemName}.`;
+    case 'WISH_REDEMPTION':
+      return `${username} redeemed ${itemName}.`;
+    // Add other relevant transaction types if needed
+    default:
+      return `Activity related to ${itemName} by ${username}.`; // Fallback message
+  }
+};
+
+// Helper function to get the name of the related item
+const getRelatedItemName = (tx: CoinTransaction, habitsData: HabitsData, wishlistData: WishlistData): string | undefined => {
+  if (!tx.relatedItemId) return undefined;
+  if (tx.type === 'HABIT_COMPLETION' || tx.type === 'TASK_COMPLETION') {
+    return habitsData.habits.find(h => h.id === tx.relatedItemId)?.name;
+  }
+  if (tx.type === 'WISH_REDEMPTION') {
+    return wishlistData.items.find(w => w.id === tx.relatedItemId)?.name;
+  }
+  return undefined;
+};
+
+
+export default function NotificationDropdown({
+  currentUser,
+  unreadNotifications, // Use props directly
+  displayedReadNotifications, // Use props directly
+  habitsData,
+  wishlistData,
+  usersData,
+}: NotificationDropdownProps) {
+  if (!currentUser) {
+    return <div className="p-4 text-sm text-gray-500">Not logged in.</div>;
+  }
+
+  // Removed the useMemo block for calculating notifications
+
+  const renderNotification = (tx: CoinTransaction, isUnread: boolean) => {
+    const triggeringUser = usersData.users.find(u => u.id === tx.userId);
+    const relatedItemName = getRelatedItemName(tx, habitsData, wishlistData);
+    const message = getNotificationMessage(tx, triggeringUser, relatedItemName);
+    const txTimestamp = t2d({ timestamp: tx.timestamp, timezone: 'UTC' });
+    const timeAgo = txTimestamp.toRelative(); // e.g., "2 hours ago"
+    // Add the triggering user's ID to the query params if it exists
+    const linkHref = `/coins?highlight=${tx.id}${tx.userId ? `&user=${tx.userId}` : ''}`;
+
+    return (
+      // Wrap the Link with DropdownMenuItem and use asChild to pass props
+      <DropdownMenuItem key={tx.id} asChild className={`p-0 focus:bg-inherit dark:focus:bg-inherit cursor-pointer`}>
+        <Link href={linkHref} className={`block hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors ${isUnread ? 'bg-blue-50 dark:bg-blue-900/20' : ''}`} scroll={true}>
+          <div className="p-3 flex items-start gap-3">
+            <Avatar className="h-8 w-8 mt-1">
+              <AvatarImage src={triggeringUser?.avatarPath ? `/api/avatars/${triggeringUser.avatarPath.split('/').pop()}` : undefined} alt={triggeringUser?.username} />
+              <AvatarFallback>{triggeringUser?.username?.charAt(0).toUpperCase() || '?'}</AvatarFallback>
+            </Avatar>
+            <div className="flex-1">
+              <p className={`text-sm ${isUnread ? 'font-semibold' : ''}`}>{message}</p>
+              <p className="text-xs text-gray-500 dark:text-gray-400">{timeAgo}</p>
+            </div>
+          </div>
+        </Link>
+      </DropdownMenuItem>
+    );
+  };
+
+  return (
+    <TooltipProvider>
+      {/* Removed the outer div as width is now set on DropdownMenuContent in NotificationBell */}
+      <>
+        <div className="p-3 border-b border-gray-200 dark:border-gray-700 flex items-center gap-2">
+          <h4 className="text-sm font-medium">Notifications</h4>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Info className="h-4 w-4 text-muted-foreground cursor-help" />
+            </TooltipTrigger>
+            <TooltipContent side="left" className="max-w-xs">
+              <p className="text-xs">
+                Shows completions or redemptions by other users for habits or wishlist that you shared with them (you must be admin)
+              </p>
+            </TooltipContent>
+          </Tooltip>
+        </div>
+        <ScrollArea className="h-[400px]">
+          {unreadNotifications.length === 0 && displayedReadNotifications.length === 0 && (
+            <div className="p-4 text-center text-sm text-gray-500">No notifications yet.</div>
+          )}
+
+          {unreadNotifications.length > 0 && (
+            <>
+              {unreadNotifications.map(tx => renderNotification(tx, true))}
+              {displayedReadNotifications.length > 0 && <Separator className="my-2" />}
+            </>
+          )}
+
+          {displayedReadNotifications.length > 0 && (
+            <>
+              {displayedReadNotifications.map(tx => renderNotification(tx, false))}
+            </>
+          )}
+        </ScrollArea>
+      </> {/* Close the fragment */}
+    </TooltipProvider>
+  );
+}

components/UserForm.tsx

@@ -8,8 +8,8 @@ import { Label } from './ui/label';
 import { Switch } from './ui/switch';
 import { Permission } from '@/lib/types';
 import { toast } from '@/hooks/use-toast';
-import { useAtom } from 'jotai';
-import { usersAtom } from '@/lib/atoms';
+import { useAtom, useAtomValue } from 'jotai';
+import { serverSettingsAtom, usersAtom } from '@/lib/atoms';
 import { createUser, updateUser, updateUserPassword, uploadAvatar } from '@/app/actions/data';
 import { SafeUser, User } from '@/lib/types';
 import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar';
@@ -26,6 +26,7 @@ interface UserFormProps {
 
 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 getDefaultPermissions = (): Permission[] => [{
@@ -46,7 +47,7 @@ export default function UserForm({ userId, onCancel, onSuccess }: UserFormProps)
   const [avatarPath, setAvatarPath] = useState(user?.avatarPath)
   const [username, setUsername] = useState(user?.username || '');
   const [password, setPassword] = useState<string | undefined>('');
-  const [disablePassword, setDisablePassword] = useState(user?.password === '' || process.env.NEXT_PUBLIC_DEMO === 'true');
+  const [disablePassword, setDisablePassword] = useState(user?.password === '' || serverSettings.isDemo);
   const [error, setError] = useState('');
   const [avatarFile, setAvatarFile] = useState<File | null>(null);
   const [isAdmin, setIsAdmin] = useState(user?.isAdmin || false);
@@ -240,7 +241,7 @@ export default function UserForm({ userId, onCancel, onSuccess }: UserFormProps)
               className={error ? 'border-red-500' : ''}
               disabled={disablePassword}
             />
-            {process.env.NEXT_PUBLIC_DEMO === 'true' && (
+            {serverSettings.isDemo && (
               <p className="text-sm text-red-500">Password is automatically disabled in demo instance</p>
             )}
           </div>
@@ -250,6 +251,7 @@ export default function UserForm({ userId, onCancel, onSuccess }: UserFormProps)
               id="disable-password"
               checked={disablePassword}
               onCheckedChange={setDisablePassword}
+              disabled={serverSettings.isDemo}
             />
             <Label htmlFor="disable-password">Disable password</Label>
           </div>

components/UserSelectModal.tsx

@@ -99,7 +99,7 @@ function UserSelectionView({
   onCreateUser: () => void
 }) {
   return (
-    <div className="grid grid-cols-3 gap-4 p-2">
+    <div className="grid grid-cols-3 gap-4 p-2 max-h-80 overflow-y-auto">
       {users
         .filter(user => user.id !== currentUser?.id)
         .map((user) => (

components/jotai-hydrate.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { settingsAtom, habitsAtom, coinsAtom, wishlistAtom, usersAtom } from "@/lib/atoms"
+import { settingsAtom, habitsAtom, coinsAtom, wishlistAtom, usersAtom, serverSettingsAtom } from "@/lib/atoms"
 import { useHydrateAtoms } from "jotai/utils"
 import { JotaiHydrateInitialValues } from "@/lib/types"
 
@@ -13,7 +13,8 @@ export function JotaiHydrate({
     [habitsAtom, initialValues.habits],
     [coinsAtom, initialValues.coins],
     [wishlistAtom, initialValues.wishlist],
-    [usersAtom, initialValues.users]
+    [usersAtom, initialValues.users],
+    [serverSettingsAtom, initialValues.serverSettings]
   ])
   return children
 }

components/ui/scroll-area.tsx

@@ -0,0 +1,48 @@
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }

components/ui/separator.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }

hooks/useCoins.tsx

@@ -1,21 +1,23 @@
 import { useAtom } from 'jotai'
-import { checkPermission } from '@/lib/utils'
+import { calculateCoinsEarnedToday, calculateCoinsSpentToday, calculateTotalEarned, calculateTotalSpent, calculateTransactionsToday, checkPermission } from '@/lib/utils'
 import {
   coinsAtom,
-  coinsEarnedTodayAtom,
-  totalEarnedAtom,
-  totalSpentAtom,
-  coinsSpentTodayAtom,
-  transactionsTodayAtom,
-  coinsBalanceAtom
+  // coinsEarnedTodayAtom,
+  // totalEarnedAtom,
+  // totalSpentAtom,
+  // coinsSpentTodayAtom,
+  // transactionsTodayAtom,
+  // coinsBalanceAtom,
+  settingsAtom,
+  usersAtom
 } from '@/lib/atoms'
 import { addCoins, removeCoins, saveCoinsData } from '@/app/actions/data'
-import { CoinsData } from '@/lib/types'
+import { CoinsData, User } from '@/lib/types'
 import { toast } from '@/hooks/use-toast'
 import { useHelpers } from '@/lib/client-helpers'
 
 function handlePermissionCheck(
-  user: any,
+  user: User | undefined,
   resource: 'habit' | 'wishlist' | 'coins',
   action: 'write' | 'interact'
 ): boolean {
@@ -40,18 +42,30 @@ function handlePermissionCheck(
   return true
 }
 
-export function useCoins() {
-  const { currentUser: user } = useHelpers()
+export function useCoins(options?: { selectedUser?: string }) {
   const [coins, setCoins] = useAtom(coinsAtom)
-  const [coinsEarnedToday] = useAtom(coinsEarnedTodayAtom)
-  const [totalEarned] = useAtom(totalEarnedAtom)
-  const [totalSpent] = useAtom(totalSpentAtom)
-  const [coinsSpentToday] = useAtom(coinsSpentTodayAtom)
-  const [transactionsToday] = useAtom(transactionsTodayAtom)
-  const [balance] = useAtom(coinsBalanceAtom)
+  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)
+  }
+
+  // Filter transactions for the selectd user
+  const transactions = coins.transactions.filter(t => t.userId === user?.id)
+
+  const balance = transactions.reduce((sum, t) => sum + t.amount, 0)
+  const coinsEarnedToday = calculateCoinsEarnedToday(transactions, settings.system.timezone)
+  const totalEarned = calculateTotalEarned(transactions)
+  const totalSpent = calculateTotalSpent(transactions)
+  const coinsSpentToday = calculateCoinsSpentToday(transactions, settings.system.timezone)
+  const transactionsToday = calculateTransactionsToday(transactions, settings.system.timezone)
 
   const add = async (amount: number, description: string, note?: string) => {
-    if (!handlePermissionCheck(user, 'coins', 'write')) return null
+    if (!handlePermissionCheck(currentUser, 'coins', 'write')) return null
     if (isNaN(amount) || amount <= 0) {
       toast({
         title: "Invalid amount",
@@ -64,7 +78,8 @@ export function useCoins() {
       amount,
       description,
       type: 'MANUAL_ADJUSTMENT',
-      note
+      note,
+      userId: user?.id
     })
     setCoins(data)
     toast({ title: "Success", description: `Added ${amount} coins` })
@@ -72,7 +87,7 @@ export function useCoins() {
   }
 
   const remove = async (amount: number, description: string, note?: string) => {
-    if (!handlePermissionCheck(user, 'coins', 'write')) return null
+    if (!handlePermissionCheck(currentUser, 'coins', 'write')) return null
     const numAmount = Math.abs(amount)
     if (isNaN(numAmount) || numAmount <= 0) {
       toast({
@@ -86,7 +101,8 @@ export function useCoins() {
       amount: numAmount,
       description,
       type: 'MANUAL_ADJUSTMENT',
-      note
+      note,
+      userId: user?.id
     })
     setCoins(data)
     toast({ title: "Success", description: `Removed ${numAmount} coins` })
@@ -94,7 +110,7 @@ export function useCoins() {
   }
 
   const updateNote = async (transactionId: string, note: string) => {
-    if (!handlePermissionCheck(user, 'coins', 'write')) return null
+    if (!handlePermissionCheck(currentUser, 'coins', 'write')) return null
     const transaction = coins.transactions.find(t => t.id === transactionId)
     if (!transaction) {
       toast({
@@ -128,7 +144,7 @@ export function useCoins() {
     remove,
     updateNote,
     balance,
-    transactions: coins.transactions,
+    transactions: transactions,
     coinsEarnedToday,
     totalEarned,
     totalSpent,

hooks/useWishlist.tsx

@@ -1,11 +1,12 @@
 import { useAtom } from 'jotai'
-import { wishlistAtom, coinsAtom, coinsBalanceAtom } from '@/lib/atoms'
+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,
@@ -37,7 +38,7 @@ export function useWishlist() {
   const { currentUser: user } = useHelpers()
   const [wishlist, setWishlist] = useAtom(wishlistAtom)
   const [coins, setCoins] = useAtom(coinsAtom)
-  const [balance] = useAtom(coinsBalanceAtom)
+  const { balance } = useCoins()
 
   const addWishlistItem = async (item: Omit<WishlistItemType, 'id'>) => {
     if (!handlePermissionCheck(user, 'wishlist', 'write')) return

lib/atoms.ts

@@ -8,6 +8,8 @@ import {
   ViewType,
   getDefaultUsersData,
   CompletionCache,
+  getDefaultServerSettings,
+  User,
 } from "./types";
 import {
   getTodayInTimezone,
@@ -46,45 +48,46 @@ 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());
 
-// Derived atom for coins earned today
-export const coinsEarnedTodayAtom = atom((get) => {
-  const coins = get(coinsAtom);
-  const settings = get(settingsAtom);
-  return calculateCoinsEarnedToday(coins.transactions, settings.system.timezone);
-});
+// // Derived atom for coins earned today
+// export const coinsEarnedTodayAtom = atom((get) => {
+//   const coins = get(coinsAtom);
+//   const settings = get(settingsAtom);
+//   return calculateCoinsEarnedToday(coins.transactions, settings.system.timezone);
+// });
 
-// Derived atom for total earned
-export const totalEarnedAtom = atom((get) => {
-  const coins = get(coinsAtom);
-  return calculateTotalEarned(coins.transactions);
-});
+// // Derived atom for total earned
+// export const totalEarnedAtom = atom((get) => {
+//   const coins = get(coinsAtom);
+//   return calculateTotalEarned(coins.transactions);
+// });
 
-// Derived atom for total spent
-export const totalSpentAtom = atom((get) => {
-  const coins = get(coinsAtom);
-  return calculateTotalSpent(coins.transactions);
-});
+// // Derived atom for total spent
+// export const totalSpentAtom = atom((get) => {
+//   const coins = get(coinsAtom);
+//   return calculateTotalSpent(coins.transactions);
+// });
 
-// Derived atom for coins spent today
-export const coinsSpentTodayAtom = atom((get) => {
-  const coins = get(coinsAtom);
-  const settings = get(settingsAtom);
-  return calculateCoinsSpentToday(coins.transactions, settings.system.timezone);
-});
+// // Derived atom for coins spent today
+// export const coinsSpentTodayAtom = atom((get) => {
+//   const coins = get(coinsAtom);
+//   const settings = get(settingsAtom);
+//   return calculateCoinsSpentToday(coins.transactions, settings.system.timezone);
+// });
 
-// Derived atom for transactions today
-export const transactionsTodayAtom = atom((get) => {
-  const coins = get(coinsAtom);
-  const settings = get(settingsAtom);
-  return calculateTransactionsToday(coins.transactions, settings.system.timezone);
-});
+// // Derived atom for transactions today
+// export const transactionsTodayAtom = atom((get) => {
+//   const coins = get(coinsAtom);
+//   const settings = get(settingsAtom);
+//   return calculateTransactionsToday(coins.transactions, settings.system.timezone);
+// });
 
-// Derived atom for current balance from all transactions
-export const coinsBalanceAtom = atom((get) => {
-  const coins = get(coinsAtom);
-  return coins.transactions.reduce((sum, transaction) => sum + transaction.amount, 0);
-});
+// // Derived atom for current balance from all transactions
+// export const coinsBalanceAtom = atom((get) => {
+//   const coins = get(coinsAtom);
+//   return coins.transactions.reduce((sum, transaction) => sum + transaction.amount, 0);
+// });
 
 /* transient atoms */
 interface PomodoroAtom {
@@ -108,16 +111,16 @@ export const completionCacheAtom = atom((get) => {
   const habits = get(habitsAtom).habits;
   const timezone = get(settingsAtom).system.timezone;
   const cache: CompletionCache = {};
-  
+
   habits.forEach(habit => {
     habit.completions.forEach(utcTimestamp => {
       const localDate = t2d({ timestamp: utcTimestamp, timezone })
         .toFormat('yyyy-MM-dd');
-      
+
       if (!cache[localDate]) {
         cache[localDate] = {};
       }
-      
+
       cache[localDate][habit.id] = (cache[localDate][habit.id] || 0) + 1;
     });
   });
@@ -171,12 +174,12 @@ export const hasTasksAtom = atom((get) => {
 })
 
 // Atom family for habits by specific date
-export const habitsByDateFamily = atomFamily((dateString: string) => 
+export const habitsByDateFamily = atomFamily((dateString: string) =>
   atom((get) => {
     const habits = get(habitsAtom).habits;
     const settings = get(settingsAtom);
     const timezone = settings.system.timezone;
-    
+
     const date = DateTime.fromISO(dateString).setZone(timezone);
     return habits.filter(habit => isHabitDue({ habit, timezone, date }));
   })

lib/constants.ts

@@ -1,6 +1,6 @@
 import { CheckSquare, Target } from "lucide-react"
 
-export const INITIAL_RECURRENCE_RULE = 'daily'
+export const INITIAL_RECURRENCE_RULE = 'every day'
 export const INITIAL_DUE = 'today'
 
 export const RECURRENCE_RULE_MAP: { [key: string]: string } = {

lib/env.server.ts

@@ -2,13 +2,13 @@ import { z } from "zod"
 
 const zodEnv = z.object({
   AUTH_SECRET: z.string(),
-  NEXT_PUBLIC_DEMO: z.string().optional(),
+  DEMO: z.string().optional(),
 })
 
 declare global {
   interface ProcessEnv extends z.TypeOf<typeof zodEnv> {
     AUTH_SECRET: string;
-    NEXT_PUBLIC_DEMO?: string;
+    DEMO?: string;
   }
 }
 
@@ -24,10 +24,9 @@ export function init() {
         )
         .join("\n ")
 
-      console.error(
+      throw new Error(
         `Missing environment variables:\n ${errorMessage}`,
       )
-      process.exit(1)
     }
   }
 }

lib/types.ts

@@ -1,4 +1,6 @@
+import { RRule } from "rrule"
 import { uuid } from "./utils"
+import { DateTime } from "luxon"
 
 export type UserId = string
 
@@ -29,7 +31,8 @@ export type SafeUser = SessionUser & {
 }
 
 export type User = SafeUser & {
-  password: string
+  password?: string // Optional: Allow users without passwords (e.g., initial setup)
+  lastNotificationReadTimestamp?: string // UTC ISO date string
 }
 
 export type Habit = {
@@ -42,6 +45,7 @@ export type Habit = {
   completions: string[] // Array of UTC ISO date strings
   isTask?: boolean // mark the habit as a task
   archived?: boolean // mark the habit as archived
+  pinned?: boolean // mark the habit as pinned
   userIds?: UserId[]
 }
 
@@ -98,8 +102,9 @@ export const getDefaultUsersData = (): UserData => ({
     {
       id: uuid(),
       username: 'admin',
-      password: '',
+      // password: '', // No default password for admin initially? Or set a secure default?
       isAdmin: true,
+      lastNotificationReadTimestamp: undefined, // Initialize as undefined
     }
   ]
 });
@@ -130,6 +135,10 @@ export const getDefaultSettings = (): Settings => ({
   profile: {}
 });
 
+export const getDefaultServerSettings = (): ServerSettings => ({
+  isDemo: false
+})
+
 // Map of data types to their default values
 export const DATA_DEFAULTS = {
   wishlist: getDefaultWishlistData,
@@ -178,4 +187,17 @@ export interface JotaiHydrateInitialValues {
   habits: HabitsData;
   wishlist: WishlistData;
   users: UserData;
+  serverSettings: ServerSettings;
+}
+
+export interface ServerSettings {
+  isDemo: boolean
+}
+
+export type ParsedResultType = DateTime<true> | RRule | string | null // null if invalid
+
+// return rrule / datetime (machine-readable frequency), string (human-readable frequency), or null (invalid)
+export interface ParsedFrequencyResult {
+  message: string | null
+  result: ParsedResultType
 }

lib/utils.test.ts

@@ -1,4 +1,4 @@
-import { expect, test, describe, beforeAll, beforeEach, afterAll, spyOn } from "bun:test";
+import { expect, test, describe, beforeEach, spyOn } from "bun:test";
 import {
   cn,
   getTodayInTimezone,
@@ -17,12 +17,18 @@ import {
   isHabitDueToday,
   isHabitDue,
   uuid,
-  isTaskOverdue
+  isTaskOverdue,
+  deserializeRRule,
+  serializeRRule,
+  convertHumanReadableFrequencyToMachineReadable,
+  convertMachineReadableFrequencyToHumanReadable,
+  getUnsupportedRRuleReason
 } from './utils'
-import { CoinTransaction } from './types'
+import { CoinTransaction, ParsedResultType } from './types'
 import { DateTime } from "luxon";
-import { RRule } from 'rrule';
+import { RRule, Weekday } from 'rrule';
 import { Habit } from '@/lib/types';
+import { INITIAL_DUE } from './constants';
 
 describe('cn utility', () => {
   test('should merge class names correctly', () => {
@@ -33,6 +39,59 @@ describe('cn utility', () => {
   })
 })
 
+describe('getUnsupportedRRuleReason', () => {
+  test('should return message for HOURLY frequency', () => {
+    const rrule = new RRule({ freq: RRule.HOURLY });
+    expect(getUnsupportedRRuleReason(rrule)).toBe('Hourly frequency is not supported.');
+  });
+
+  test('should return message for MINUTELY frequency', () => {
+    const rrule = new RRule({ freq: RRule.MINUTELY });
+    expect(getUnsupportedRRuleReason(rrule)).toBe('Minutely frequency is not supported.');
+  });
+
+  test('should return message for SECONDLY frequency', () => {
+    const rrule = new RRule({ freq: RRule.SECONDLY });
+    expect(getUnsupportedRRuleReason(rrule)).toBe('Secondly frequency is not supported.');
+  });
+
+  test('should return message for DAILY frequency with interval > 1', () => {
+    const rrule = new RRule({ freq: RRule.DAILY, interval: 2 });
+    expect(getUnsupportedRRuleReason(rrule)).toBe('Daily frequency with intervals greater than 1 is not supported.');
+  });
+
+  test('should return null for DAILY frequency without interval', () => {
+    const rrule = new RRule({ freq: RRule.DAILY });
+    expect(getUnsupportedRRuleReason(rrule)).toBeNull();
+  });
+
+  test('should return null for DAILY frequency with interval = 1', () => {
+    const rrule = new RRule({ freq: RRule.DAILY, interval: 1 });
+    expect(getUnsupportedRRuleReason(rrule)).toBeNull();
+  });
+
+  test('should return null for WEEKLY frequency', () => {
+    const rrule = new RRule({ freq: RRule.WEEKLY, byweekday: [RRule.MO] }); // Added byweekday for validity
+    expect(getUnsupportedRRuleReason(rrule)).toBeNull();
+  });
+
+  test('should return null for MONTHLY frequency', () => {
+    const rrule = new RRule({ freq: RRule.MONTHLY, bymonthday: [1] }); // Added bymonthday for validity
+    expect(getUnsupportedRRuleReason(rrule)).toBeNull();
+  });
+
+  test('should return null for YEARLY frequency', () => {
+    const rrule = new RRule({ freq: RRule.YEARLY, bymonth: [1], bymonthday: [1] }); // Added bymonth/bymonthday for validity
+    expect(getUnsupportedRRuleReason(rrule)).toBeNull();
+  });
+
+  test('should return null for WEEKLY frequency with interval', () => {
+    // Weekly with interval is supported
+    const rrule = new RRule({ freq: RRule.WEEKLY, interval: 2, byweekday: [RRule.TU] }); // Added byweekday for validity
+    expect(getUnsupportedRRuleReason(rrule)).toBeNull();
+  });
+});
+
 describe('isTaskOverdue', () => {
   const createTestHabit = (frequency: string, isTask = true, archived = false): Habit => ({
     id: 'test-habit',
@@ -535,13 +594,8 @@ describe('isHabitDueToday', () => {
 
   test('should return false for invalid recurrence rule', () => {
     const habit = testHabit('INVALID_RRULE')
-    // Mock console.error to prevent test output pollution
-    const consoleSpy = spyOn(console, 'error').mockImplementation(() => { })
-
-    // Expect the function to throw an error
-    expect(() => isHabitDueToday({ habit, timezone: 'UTC' })).toThrow()
-
-    consoleSpy.mockRestore()
+    const consoleSpy = spyOn(console, 'error').mockImplementation(() => {})
+    expect(isHabitDueToday({ habit, timezone: 'UTC' })).toBe(false)
   })
 })
 
@@ -653,8 +707,252 @@ 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(() => { })
-    expect(() => isHabitDue({ habit, timezone: 'UTC', date })).toThrow()
-    consoleSpy.mockRestore()
+    const consoleSpy = spyOn(console, 'error').mockImplementation(() => {})
+    expect(isHabitDue({ habit, timezone: 'UTC', date })).toBe(false)
+  })
+})
+
+describe('deserializeRRule', () => {
+  test('should deserialize valid RRule string', () => {
+    const rruleStr = 'FREQ=DAILY;INTERVAL=1'
+    const rrule = deserializeRRule(rruleStr)
+    expect(rrule).toBeInstanceOf(RRule)
+    expect(rrule?.origOptions.freq).toBe(RRule.DAILY)
+    expect(rrule?.origOptions.interval).toBe(1)
+  })
+
+  test('should return null for invalid RRule string', () => {
+    const rruleStr = 'INVALID_RRULE_STRING'
+    const rrule = deserializeRRule(rruleStr)
+    expect(rrule).toBeNull()
+  })
+
+  test('should handle complex RRule strings', () => {
+    const rruleStr = 'FREQ=WEEKLY;BYDAY=MO,WE,FR;INTERVAL=2;COUNT=10'
+    const rrule = deserializeRRule(rruleStr)
+    expect(rrule).toBeInstanceOf(RRule)
+    expect(rrule?.origOptions.freq).toBe(RRule.WEEKLY)
+    expect(rrule?.origOptions.byweekday).toEqual([RRule.MO, RRule.WE, RRule.FR])
+    expect(rrule?.origOptions.interval).toBe(2)
+    expect(rrule?.origOptions.count).toBe(10)
+  })
+})
+
+describe('serializeRRule', () => {
+  test('should serialize RRule object to string', () => {
+    const rrule = new RRule({
+      freq: RRule.DAILY,
+      interval: 1
+    })
+    const rruleStr = serializeRRule(rrule)
+    // RRule adds DTSTART automatically if not provided, so we check the core parts
+    expect(rruleStr).toContain('FREQ=DAILY')
+    expect(rruleStr).toContain('INTERVAL=1')
+  })
+
+  test('should return "invalid" for null input', () => {
+    const rruleStr = serializeRRule(null)
+    expect(rruleStr).toBe('invalid')
+  })
+
+  test('should serialize complex RRule objects', () => {
+    const rrule = new RRule({
+      freq: RRule.WEEKLY,
+      byweekday: [RRule.MO, RRule.WE, RRule.FR],
+      interval: 2,
+      count: 10
+    })
+    const rruleStr = serializeRRule(rrule)
+    expect(rruleStr).toContain('FREQ=WEEKLY')
+    expect(rruleStr).toContain('BYDAY=MO,WE,FR')
+    expect(rruleStr).toContain('INTERVAL=2')
+    expect(rruleStr).toContain('COUNT=10')
+  })
+})
+
+describe('convertHumanReadableFrequencyToMachineReadable', () => {
+  const timezone = 'America/New_York'
+
+  beforeEach(() => {
+    // Set a fixed date for consistent relative date parsing
+    const mockDate = DateTime.fromISO('2024-07-15T10:00:00', { zone: timezone }) as DateTime<true>
+    DateTime.now = () => mockDate
+  })
+
+  // Non-recurring tests
+  test('should parse specific date (non-recurring)', () => {
+    const { result, message } = convertHumanReadableFrequencyToMachineReadable({ text: 'July 16, 2024', timezone, isRecurring: false })
+    expect(message).toBeNull()
+    expect(result).toBeInstanceOf(DateTime)
+    expect((result as DateTime).toISODate()).toBe('2024-07-16')
+  })
+
+  test('should parse relative date "tomorrow" (non-recurring)', () => {
+    const { result, message } = convertHumanReadableFrequencyToMachineReadable({ text: 'tomorrow', timezone, isRecurring: false })
+    expect(message).toBeNull()
+    expect(result).toBeInstanceOf(DateTime)
+    expect((result as DateTime).toISODate()).toBe('2024-07-16') // Based on mock date 2024-07-15
+  })
+
+  test('should parse relative date "next friday" (non-recurring)', () => {
+    const { result, message } = convertHumanReadableFrequencyToMachineReadable({ text: 'next friday', timezone, isRecurring: false })
+    expect(message).toBeNull()
+    expect(result).toBeInstanceOf(DateTime)
+    // chrono-node interprets "next friday" from Mon July 15 as Fri July 26
+    expect((result as DateTime).toISODate()).toBe('2024-07-26')
+  })
+
+  test('should return null for invalid date string (non-recurring)', () => {
+    const { result, message } = convertHumanReadableFrequencyToMachineReadable({ text: 'invalid date', timezone, isRecurring: false })
+    expect(result).toBeNull()
+    expect(message).toBe('Invalid due date.')
+  })
+
+  // Recurring tests
+  test('should parse "daily" (recurring)', () => {
+    const { result, message } = convertHumanReadableFrequencyToMachineReadable({ text: 'daily', timezone, isRecurring: true })
+    expect(message).toBeNull()
+    expect(result).toBeInstanceOf(RRule)
+    expect((result as RRule).origOptions.freq).toBe(RRule.DAILY)
+  })
+
+  test('should parse "every week on Monday" (recurring)', () => {
+    const { result, message } = convertHumanReadableFrequencyToMachineReadable({ text: 'every week on Monday', timezone, isRecurring: true })
+    expect(message).toBeNull()
+    expect(result).toBeInstanceOf(RRule)
+    expect((result as RRule).origOptions.freq).toBe(RRule.WEEKLY)
+    // RRule.fromText returns Weekday objects, check the weekday property
+    const byweekday = (result as RRule).origOptions.byweekday;
+    const weekdayValues = byweekday
+      ? (Array.isArray(byweekday)
+        ? byweekday.map(d => typeof d === 'number' ? d : (d as Weekday).weekday)
+        : [typeof byweekday === 'number' ? byweekday : (byweekday as Weekday).weekday])
+      : [];
+    expect(weekdayValues).toEqual([RRule.MO.weekday])
+  })
+
+  test('should parse "every month on the 15th" (recurring)', () => {
+    const { result, message } = convertHumanReadableFrequencyToMachineReadable({ text: 'every month on the 15th', timezone, isRecurring: true })
+    expect(message).toBeNull()
+    expect(result).toBeInstanceOf(RRule)
+    expect((result as RRule).origOptions.freq).toBe(RRule.MONTHLY)
+    expect((result as RRule).origOptions.bymonthday).toEqual([15])
+  })
+
+  test('should parse "every year on Jan 1" (recurring)', () => {
+    const { result, message } = convertHumanReadableFrequencyToMachineReadable({ text: 'every year on Jan 1', timezone, isRecurring: true })
+    expect(message).toBeNull()
+    expect(result).toBeInstanceOf(RRule)
+    expect((result as RRule).origOptions.freq).toBe(RRule.YEARLY)
+    // Note: RRule.fromText parses 'Jan 1' into bymonth/bymonthday
+    expect((result as RRule).origOptions.bymonth).toEqual([1])
+    // RRule.fromText might not reliably set bymonthday in origOptions for this text
+    // expect((result as RRule).origOptions.bymonthday).toEqual([1])
+  })
+
+  test('should return validation error for "every week" without day (recurring)', () => {
+    const { result, message } = convertHumanReadableFrequencyToMachineReadable({ text: 'every week', timezone, isRecurring: true })
+    expect(result).toBeNull() // RRule.fromText might parse it, but our validation catches it
+    expect(message).toBe('Please specify day(s) of the week (e.g., "every week on Mon, Wed").')
+  })
+
+  test('should return validation error for "every month" without day/position (recurring)', () => {
+    const { result, message } = convertHumanReadableFrequencyToMachineReadable({ text: 'every month', timezone, isRecurring: true })
+    expect(result).toBeNull() // RRule.fromText might parse it, but our validation catches it
+    expect(message).toBe('Please specify day of the month (e.g., "every month on the 15th") or position (e.g., "every month on the last Friday").')
+  })
+
+  test('should return null for invalid recurrence string (recurring)', () => {
+    const { result, message } = convertHumanReadableFrequencyToMachineReadable({ text: 'invalid recurrence', timezone, isRecurring: true })
+    expect(result).toBeNull()
+    expect(message).toBe('Invalid recurrence rule.')
+  })
+
+  test('should return specific error for unsupported hourly frequency', () => {
+    const { result, message } = convertHumanReadableFrequencyToMachineReadable({ text: 'every hour', timezone, isRecurring: true })
+    expect(result).toBeInstanceOf(RRule) // RRule parses it, but our validation catches it
+    expect(message).toBe('Hourly frequency is not supported.')
+  })
+
+  test('should return specific error for unsupported daily interval', () => {
+    const { result, message } = convertHumanReadableFrequencyToMachineReadable({ text: 'every 2 days', timezone, isRecurring: true })
+    expect(result).toBeInstanceOf(RRule) // RRule parses it, but our validation catches it
+    expect(message).toBe('Daily frequency with intervals greater than 1 is not supported.')
+  })
+
+  test('should handle predefined constants like "weekdays"', () => {
+    const { result, message } = convertHumanReadableFrequencyToMachineReadable({ text: 'weekdays', timezone, isRecurring: true })
+    expect(message).toBeNull()
+    expect(result).toBeInstanceOf(RRule)
+    expect((result as RRule).origOptions.freq).toBe(RRule.WEEKLY)
+    // Check the weekday property of the Weekday objects
+    const weekdays = (result as RRule).origOptions.byweekday;
+    const weekdayNumbers = weekdays
+      ? (Array.isArray(weekdays)
+        ? weekdays.map(d => typeof d === 'number' ? d : (d as Weekday).weekday)
+        : [typeof weekdays === 'number' ? weekdays : (weekdays as Weekday).weekday])
+      : [];
+    expect(weekdayNumbers).toEqual([RRule.MO.weekday, RRule.TU.weekday, RRule.WE.weekday, RRule.TH.weekday, RRule.FR.weekday])
+  })
+})
+
+describe('convertMachineReadableFrequencyToHumanReadable', () => {
+  const timezone = 'America/New_York'
+
+  // Non-recurring tests
+  test('should format DateTime object (non-recurring)', () => {
+    const dateTime = DateTime.fromISO('2024-07-16T00:00:00', { zone: timezone }) as DateTime<true>
+    const humanReadable = convertMachineReadableFrequencyToHumanReadable({ frequency: dateTime, isRecurRule: false, timezone })
+    // Expected format depends on locale, check for key parts
+    expect(humanReadable).toContain('Jul 16, 2024')
+    expect(humanReadable).toContain('Tue') // Tuesday
+  })
+
+  test('should format ISO string (non-recurring)', () => {
+    const isoString = '2024-07-16T00:00:00.000-04:00' // Example ISO string with offset
+    const humanReadable = convertMachineReadableFrequencyToHumanReadable({ frequency: isoString, isRecurRule: false, timezone })
+    expect(humanReadable).toContain('Jul 16, 2024')
+    expect(humanReadable).toContain('Tue')
+  })
+
+  test('should return "Initial Due" for null frequency (non-recurring)', () => {
+    const humanReadable = convertMachineReadableFrequencyToHumanReadable({ frequency: null, isRecurRule: false, timezone })
+    // Check against the imported constant value
+    expect(humanReadable).toBe(INITIAL_DUE)
+  })
+
+  // Recurring tests
+  test('should format RRule object (recurring)', () => {
+    const rrule = new RRule({ freq: RRule.DAILY })
+    const humanReadable = convertMachineReadableFrequencyToHumanReadable({ frequency: rrule, isRecurRule: true, timezone })
+    // rrule.toText() returns "every day" for daily rules
+    expect(humanReadable).toBe('every day')
+  })
+
+  test('should format RRule string (recurring)', () => {
+    const rruleStr = 'FREQ=WEEKLY;BYDAY=MO,WE,FR'
+    const humanReadable = convertMachineReadableFrequencyToHumanReadable({ frequency: rruleStr, isRecurRule: true, timezone })
+    expect(humanReadable).toBe('every week on Monday, Wednesday, Friday')
+  })
+
+  test('should return "invalid" for invalid RRule string (recurring)', () => {
+    const rruleStr = 'INVALID_RRULE'
+    const humanReadable = convertMachineReadableFrequencyToHumanReadable({ frequency: rruleStr, isRecurRule: true, timezone })
+    expect(humanReadable).toBe('invalid')
+  })
+
+  test('should return "invalid" for null frequency (recurring)', () => {
+    const humanReadable = convertMachineReadableFrequencyToHumanReadable({ frequency: null, isRecurRule: true, timezone })
+    expect(humanReadable).toBe('invalid')
+  })
+
+  test('should return "invalid" for unexpected type (recurring)', () => {
+    const humanReadable = convertMachineReadableFrequencyToHumanReadable({ frequency: 123 as unknown as ParsedResultType, isRecurRule: true, timezone })
+    expect(humanReadable).toBe('invalid')
+  })
+
+  test('should return "invalid" for unexpected type (non-recurring)', () => {
+    const humanReadable = convertMachineReadableFrequencyToHumanReadable({ frequency: new RRule({ freq: RRule.DAILY }) as unknown as ParsedResultType, isRecurRule: false, timezone })
+    expect(humanReadable).toBe('invalid')
   })
 })

lib/utils.ts

@@ -2,8 +2,8 @@ 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 } from '@/lib/types'
-import { DUE_MAP, RECURRENCE_RULE_MAP } from "./constants"
+import { Freq, Habit, CoinTransaction, Permission, ParsedFrequencyResult, ParsedResultType } from '@/lib/types'
+import { DUE_MAP, INITIAL_DUE, RECURRENCE_RULE_MAP } from "./constants"
 import * as chrono from 'chrono-node'
 import _ from "lodash"
 import { v4 as uuidv4 } from 'uuid'
@@ -185,41 +185,126 @@ export function calculateTransactionsToday(transactions: CoinTransaction[], time
   ).length;
 }
 
-export function getRRuleUTC(recurrenceRule: string) {
-  return RRule.fromString(recurrenceRule); // this returns UTC
-}
-
-export function parseNaturalLanguageRRule(ruleText: string) {
-  ruleText = ruleText.trim()
-  if (RECURRENCE_RULE_MAP[ruleText]) {
-    return RRule.fromString(RECURRENCE_RULE_MAP[ruleText])
+// Enhanced validation for weekly/monthly rules
+function validateRecurrenceRule(rrule: RRule | null): ParsedFrequencyResult {
+  if (!rrule) {
+    return { result: null, message: 'Invalid recurrence rule.' };
   }
 
-  return RRule.fromText(ruleText)
-}
-
-export function parseRRule(ruleText: string) {
-  ruleText = ruleText.trim()
-  if (RECURRENCE_RULE_MAP[ruleText]) {
-    return RRule.fromString(RECURRENCE_RULE_MAP[ruleText])
+  const unsupportedReason = getUnsupportedRRuleReason(rrule);
+  if (unsupportedReason) {
+    return { result: rrule, message: unsupportedReason };
   }
 
-  return RRule.fromString(ruleText)
+  const options = rrule.origOptions;
+
+  if (options.freq === RRule.WEEKLY && (!options.byweekday || !Array.isArray(options.byweekday) || options.byweekday.length === 0)) {
+    return { result: null, message: 'Please specify day(s) of the week (e.g., "every week on Mon, Wed").' };
+  }
+
+  if (options.freq === RRule.MONTHLY &&
+    (!options.bymonthday || !Array.isArray(options.bymonthday) || options.bymonthday.length === 0) &&
+    (!options.bysetpos || !Array.isArray(options.bysetpos) || options.bysetpos.length === 0) && // Need to check bysetpos for rules like "last Friday"
+    (!options.byweekday || !Array.isArray(options.byweekday) || options.byweekday.length === 0)) { // Need byweekday with bysetpos
+    return { result: null, message: 'Please specify day of the month (e.g., "every month on the 15th") or position (e.g., "every month on the last Friday").' };
+  }
+
+  return { result: rrule, message: null };
 }
 
-export function serializeRRule(rrule: RRule) {
+// Convert a human-readable frequency (recurring or non-recurring) into a machine-readable one
+export function convertHumanReadableFrequencyToMachineReadable({ text, timezone, isRecurring = false }: { text: string, timezone: string, isRecurring?: boolean }): ParsedFrequencyResult {
+  text = text.trim()
+
+  if (!isRecurring) {
+    if (DUE_MAP[text]) {
+      text = DUE_MAP[text]
+    }
+    const now = getNow({ timezone })
+    const due = chrono.parseDate(text, { instant: now.toJSDate(), timezone })
+    if (!due) return { result: null, message: 'Invalid due date.' }
+    const result = due ? DateTime.fromJSDate(due).setZone(timezone) : null
+    return { message: null, result: result ? (result.isValid ? result : null) : null }
+  }
+
+  let rrule: RRule | null
+  if (RECURRENCE_RULE_MAP[text]) {
+    rrule = deserializeRRule(RECURRENCE_RULE_MAP[text])
+  } else if (text.toLowerCase() === 'weekdays') {
+    // Handle 'weekdays' specifically if not in the map
+    rrule = new RRule({
+      freq: RRule.WEEKLY,
+      byweekday: [RRule.MO, RRule.TU, RRule.WE, RRule.TH, RRule.FR]
+    });
+  } else {
+    try {
+      rrule = RRule.fromText(text)
+    } catch (error) {
+      rrule = null
+    }
+  }
+  return validateRecurrenceRule(rrule);
+}
+
+// convert a machine-readable rrule **string** to an rrule object
+export function deserializeRRule(rruleStr: string): RRule | null {
+  try {
+    return RRule.fromString(rruleStr);
+  } catch (error) {
+    return null;
+  }
+}
+
+// convert a machine-readable rrule **object** to an rrule string
+export function serializeRRule(rrule: RRule | null): string {
+  if (!rrule) return 'invalid'; // Handle null case explicitly
   return rrule.toString()
 }
 
-export function parseNaturalLanguageDate({ text, timezone }: { text: string, timezone: string }) {
-  if (DUE_MAP[text]) {
-    text = DUE_MAP[text]
+// Convert a machine-readable frequency (recurring or non-recurring) into a human-readable one
+export function convertMachineReadableFrequencyToHumanReadable({
+  frequency,
+  isRecurRule,
+  timezone
+}: {
+  frequency: ParsedResultType,
+  isRecurRule: boolean,
+  timezone: string
+}): string {
+  if (isRecurRule) {
+    if (!frequency) {
+      return 'invalid'; // Handle null/undefined for recurring rules
+    }
+    if (frequency instanceof RRule) {
+      return frequency.toText();
+    } else if (typeof frequency === "string") {
+      const parsedResult = deserializeRRule(frequency);
+      return parsedResult?.toText() || 'invalid';
+    } else {
+      return 'invalid';
+    }
+  } else {
+    // Handle non-recurring frequency
+    if (!frequency) {
+      // Use the imported constant for initial due date text
+      return INITIAL_DUE;
+    }
+    if (typeof frequency === 'string') {
+      return d2s({
+        dateTime: t2d({ timestamp: frequency, timezone: timezone }),
+        timezone: timezone,
+        format: DateTime.DATE_MED_WITH_WEEKDAY
+      });
+    } else if (frequency instanceof DateTime) {
+      return d2s({
+        dateTime: frequency,
+        timezone: timezone,
+        format: DateTime.DATE_MED_WITH_WEEKDAY
+      });
+    } else {
+      return 'invalid';
+    }
   }
-  const now = getNow({ timezone })
-  const due = chrono.parseDate(text, { instant: now.toJSDate(), timezone })
-  if (!due) throw Error('invalid rule')
-  // return d2s({ dateTime: DateTime.fromJSDate(due), timezone, format: DateTime.DATE_MED_WITH_WEEKDAY })
-  return DateTime.fromJSDate(due).setZone(timezone)
 }
 
 export function isHabitDue({
@@ -247,8 +332,8 @@ export function isHabitDue({
   const endOfDay = date.setZone(timezone).endOf('day')
 
   const ruleText = habit.frequency
-  const rrule = parseRRule(ruleText)
-
+  const rrule = deserializeRRule(ruleText)
+  if (!rrule) return false
   rrule.origOptions.tzid = timezone
   rrule.options.tzid = rrule.origOptions.tzid
   rrule.origOptions.dtstart = datetime(startOfDay.year, startOfDay.month, startOfDay.day, startOfDay.hour, startOfDay.minute, startOfDay.second)
@@ -289,17 +374,46 @@ export function getHabitFreq(habit: Habit): Freq {
     // don't support recurring task yet
     return 'daily'
   }
-  const rrule = parseRRule(habit.frequency)
+  const rrule = RRule.fromString(habit.frequency)
   const freq = rrule.origOptions.freq
   switch (freq) {
     case RRule.DAILY: return 'daily'
     case RRule.WEEKLY: return 'weekly'
     case RRule.MONTHLY: return 'monthly'
     case RRule.YEARLY: return 'yearly'
-    default: throw new Error(`Invalid frequency: ${freq}`)
+
+    default:
+      console.error(`Invalid frequency: ${freq} (habit: ${habit.id} ${habit.name}) (rrule: ${rrule.toString()}). Defaulting to daily`)
+      return 'daily'
   }
 }
 
+/**
+ * Checks if an RRule is unsupported and returns the reason.
+ * @param rrule The RRule object to check.
+ * @returns A string message explaining why the rule is unsupported, or null if it's supported.
+ */
+export function getUnsupportedRRuleReason(rrule: RRule): string | null {
+  const freq = rrule.origOptions.freq;
+  const interval = rrule.origOptions.interval || 1; // RRule defaults interval to 1
+
+  if (freq === RRule.HOURLY) {
+    return 'Hourly frequency is not supported.';
+  }
+  if (freq === RRule.MINUTELY) {
+    return 'Minutely frequency is not supported.';
+  }
+  if (freq === RRule.SECONDLY) {
+    return 'Secondly frequency is not supported.';
+  }
+  if (freq === RRule.DAILY && interval > 1) {
+    return 'Daily frequency with intervals greater than 1 is not supported.';
+  }
+
+  return null; // Rule is supported
+}
+
+
 // play sound (client side only, must be run in browser)
 export const playSound = (soundPath: string = '/sounds/timer-end.wav') => {
   const audio = new Audio(soundPath)
@@ -320,10 +434,10 @@ export const openWindow = (url: string): boolean => {
 
 export function deepMerge<T>(a: T, b: T) {
   return _.merge(a, b, (x: unknown, y: unknown) => {
-      if (_.isArray(a)) {
-        return a.concat(b)
-      }
-    })
+    if (_.isArray(a)) {
+      return a.concat(b)
+    }
+  })
 }
 
 export function checkPermission(
@@ -332,7 +446,7 @@ export function checkPermission(
   action: 'write' | 'interact'
 ): boolean {
   if (!permissions) return false
-  
+
   return permissions.some(permission => {
     switch (resource) {
       case 'habit':

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "habittrove",
-  "version": "0.2.0",
+  "version": "0.2.7",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "habittrove",
-      "version": "0.2.0",
+      "version": "0.2.7",
       "dependencies": {
         "@emoji-mart/data": "^1.2.1",
         "@emoji-mart/react": "^1.1.1",
@@ -18,7 +18,9 @@
         "@radix-ui/react-label": "^2.1.1",
         "@radix-ui/react-popover": "^1.1.4",
         "@radix-ui/react-progress": "^1.1.1",
+        "@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-switch": "^1.1.2",
         "@radix-ui/react-toast": "^1.2.4",
@@ -36,7 +38,7 @@
         "linkify-react": "^4.2.0",
         "lucide-react": "^0.469.0",
         "luxon": "^3.5.0",
-        "next": "15.1.3",
+        "next": "15.2.3",
         "next-auth": "^5.0.0-beta.25",
         "next-themes": "^0.4.4",
         "react": "^19.0.0",
@@ -774,9 +776,10 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "15.1.3",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-15.1.3.tgz",
-      "integrity": "sha512-Q1tXwQCGWyA3ehMph3VO+E6xFPHDKdHFYosadt0F78EObYxPio0S09H9UGYznDe6Wc8eLKLG89GqcFJJDiK5xw=="
+      "version": "15.2.3",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-15.2.3.tgz",
+      "integrity": "sha512-a26KnbW9DFEUsSxAxKBORR/uD9THoYoKbkpFywMN/AFvboTt94b8+g/07T8J6ACsdLag8/PDU60ov4rPxRAixw==",
+      "license": "MIT"
     },
     "node_modules/@next/eslint-plugin-next": {
       "version": "15.1.3",
@@ -796,12 +799,13 @@
       }
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "15.1.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.1.3.tgz",
-      "integrity": "sha512-aZtmIh8jU89DZahXQt1La0f2EMPt/i7W+rG1sLtYJERsP7GRnNFghsciFpQcKHcGh4dUiyTB5C1X3Dde/Gw8gg==",
+      "version": "15.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.2.3.tgz",
+      "integrity": "sha512-uaBhA8aLbXLqwjnsHSkxs353WrRgQgiFjduDpc7YXEU0B54IKx3vU+cxQlYwPCyC8uYEEX7THhtQQsfHnvv8dw==",
       "cpu": [
         "arm64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
@@ -811,12 +815,13 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "15.1.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.1.3.tgz",
-      "integrity": "sha512-aw8901rjkVBK5mbq5oV32IqkJg+CQa6aULNlN8zyCWSsePzEG3kpDkAFkkTOh3eJ0p95KbkLyWBzslQKamXsLA==",
+      "version": "15.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.2.3.tgz",
+      "integrity": "sha512-pVwKvJ4Zk7h+4hwhqOUuMx7Ib02u3gDX3HXPKIShBi9JlYllI0nU6TWLbPT94dt7FSi6mSBhfc2JrHViwqbOdw==",
       "cpu": [
         "x64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
@@ -826,12 +831,13 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "15.1.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.1.3.tgz",
-      "integrity": "sha512-YbdaYjyHa4fPK4GR4k2XgXV0p8vbU1SZh7vv6El4bl9N+ZSiMfbmqCuCuNU1Z4ebJMumafaz6UCC2zaJCsdzjw==",
+      "version": "15.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.2.3.tgz",
+      "integrity": "sha512-50ibWdn2RuFFkOEUmo9NCcQbbV9ViQOrUfG48zHBCONciHjaUKtHcYFiCwBVuzD08fzvzkWuuZkd4AqbvKO7UQ==",
       "cpu": [
         "arm64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -841,12 +847,13 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "15.1.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.1.3.tgz",
-      "integrity": "sha512-qgH/aRj2xcr4BouwKG3XdqNu33SDadqbkqB6KaZZkozar857upxKakbRllpqZgWl/NDeSCBYPmUAZPBHZpbA0w==",
+      "version": "15.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.2.3.tgz",
+      "integrity": "sha512-2gAPA7P652D3HzR4cLyAuVYwYqjG0mt/3pHSWTCyKZq/N/dJcUAEoNQMyUmwTZWCJRKofB+JPuDVP2aD8w2J6Q==",
       "cpu": [
         "arm64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -856,12 +863,13 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "15.1.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.1.3.tgz",
-      "integrity": "sha512-uzafnTFwZCPN499fNVnS2xFME8WLC9y7PLRs/yqz5lz1X/ySoxfaK2Hbz74zYUdEg+iDZPd8KlsWaw9HKkLEVw==",
+      "version": "15.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.2.3.tgz",
+      "integrity": "sha512-ODSKvrdMgAJOVU4qElflYy1KSZRM3M45JVbeZu42TINCMG3anp7YCBn80RkISV6bhzKwcUqLBAmOiWkaGtBA9w==",
       "cpu": [
         "x64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -871,12 +879,13 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "15.1.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.1.3.tgz",
-      "integrity": "sha512-el6GUFi4SiDYnMTTlJJFMU+GHvw0UIFnffP1qhurrN1qJV3BqaSRUjkDUgVV44T6zpw1Lc6u+yn0puDKHs+Sbw==",
+      "version": "15.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.2.3.tgz",
+      "integrity": "sha512-ZR9kLwCWrlYxwEoytqPi1jhPd1TlsSJWAc+H/CJHmHkf2nD92MQpSRIURR1iNgA/kuFSdxB8xIPt4p/T78kwsg==",
       "cpu": [
         "x64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -886,12 +895,13 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "15.1.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.1.3.tgz",
-      "integrity": "sha512-6RxKjvnvVMM89giYGI1qye9ODsBQpHSHVo8vqA8xGhmRPZHDQUE4jcDbhBwK0GnFMqBnu+XMg3nYukNkmLOLWw==",
+      "version": "15.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.2.3.tgz",
+      "integrity": "sha512-+G2FrDcfm2YDbhDiObDU/qPriWeiz/9cRR0yMWJeTLGGX6/x8oryO3tt7HhodA1vZ8r2ddJPCjtLcpaVl7TE2Q==",
       "cpu": [
         "arm64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
@@ -901,12 +911,13 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "15.1.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.1.3.tgz",
-      "integrity": "sha512-VId/f5blObG7IodwC5Grf+aYP0O8Saz1/aeU3YcWqNdIUAmFQY3VEPKPaIzfv32F/clvanOb2K2BR5DtDs6XyQ==",
+      "version": "15.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.2.3.tgz",
+      "integrity": "sha512-gHYS9tc+G2W0ZC8rBL+H6RdtXIyk40uLiaos0yj5US85FNhbFEndMA2nW3z47nzOWiSvXTZ5kBClc3rD0zJg0w==",
       "cpu": [
         "x64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
@@ -1518,6 +1529,189 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-scroll-area": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.2.4.tgz",
+      "integrity": "sha512-G9rdWTQjOR4sk76HwSdROhPU0jZWpfozn9skU1v4N0/g9k7TmswrJn8W8WMU+aYktnLLpk5LX6fofj2bGe5NFQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.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-direction": "1.1.1",
+        "@radix-ui/react-presence": "1.1.3",
+        "@radix-ui/react-primitive": "2.0.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@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-scroll-area/node_modules/@radix-ui/number": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.1.tgz",
+      "integrity": "sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-scroll-area/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-scroll-area/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-scroll-area/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-scroll-area/node_modules/@radix-ui/react-direction": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.1.tgz",
+      "integrity": "sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==",
+      "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-scroll-area/node_modules/@radix-ui/react-presence": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.3.tgz",
+      "integrity": "sha512-IrVLIhskYhH3nLvtcBLQFZr61tBG7wx7O3kEmdzcYwRGAEBmBicGGL7ATzNgruYJ3xBTbuzEEq9OXJM3PAX3tA==",
+      "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-scroll-area/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.3.tgz",
+      "integrity": "sha512-Pf/t/GkndH7CQ8wE2hbkXA+WyZ83fhQQn5DDmwDiDo6AwN/fhaH8oqZ0jRjMrO2iaMhDi6P1HRx6AZwyMinY1g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.0"
+      },
+      "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-scroll-area/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.0.tgz",
+      "integrity": "sha512-ujc+V6r0HNDviYqIK3rW4ffgYiZ8g5DEHrGJVk4x7kTlLXRDILnKX9vAUYeIsLOoDpDJ0ujpqMkjH4w2ofuo6w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "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-scroll-area/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-scroll-area/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-select": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.1.4.tgz",
@@ -1560,6 +1754,85 @@
         }
       }
     },
+    "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",
+      "integrity": "sha512-2omrWKJvxR0U/tkIXezcc1nFMwtLU0+b/rDK40gnzJqTLWQ/TD/D5IYVefp9sC3QWfeQbpSbEA6op9MQKyaALQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.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-separator/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-separator/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.3.tgz",
+      "integrity": "sha512-Pf/t/GkndH7CQ8wE2hbkXA+WyZ83fhQQn5DDmwDiDo6AwN/fhaH8oqZ0jRjMrO2iaMhDi6P1HRx6AZwyMinY1g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.0"
+      },
+      "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-separator/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.0.tgz",
+      "integrity": "sha512-ujc+V6r0HNDviYqIK3rW4ffgYiZ8g5DEHrGJVk4x7kTlLXRDILnKX9vAUYeIsLOoDpDJ0ujpqMkjH4w2ofuo6w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "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-slot": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.1.tgz",
@@ -6513,11 +6786,12 @@
       "peer": true
     },
     "node_modules/next": {
-      "version": "15.1.3",
-      "resolved": "https://registry.npmjs.org/next/-/next-15.1.3.tgz",
-      "integrity": "sha512-5igmb8N8AEhWDYzogcJvtcRDU6n4cMGtBklxKD4biYv4LXN8+awc/bbQ2IM2NQHdVPgJ6XumYXfo3hBtErg1DA==",
+      "version": "15.2.3",
+      "resolved": "https://registry.npmjs.org/next/-/next-15.2.3.tgz",
+      "integrity": "sha512-x6eDkZxk2rPpu46E1ZVUWIBhYCLszmUY6fvHBFcbzJ9dD+qRX6vcHusaqqDlnY+VngKzKbAiG2iRCkPbmi8f7w==",
+      "license": "MIT",
       "dependencies": {
-        "@next/env": "15.1.3",
+        "@next/env": "15.2.3",
         "@swc/counter": "0.1.3",
         "@swc/helpers": "0.5.15",
         "busboy": "1.6.0",
@@ -6532,14 +6806,14 @@
         "node": "^18.18.0 || ^19.8.0 || >= 20.0.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "15.1.3",
-        "@next/swc-darwin-x64": "15.1.3",
-        "@next/swc-linux-arm64-gnu": "15.1.3",
-        "@next/swc-linux-arm64-musl": "15.1.3",
-        "@next/swc-linux-x64-gnu": "15.1.3",
-        "@next/swc-linux-x64-musl": "15.1.3",
-        "@next/swc-win32-arm64-msvc": "15.1.3",
-        "@next/swc-win32-x64-msvc": "15.1.3",
+        "@next/swc-darwin-arm64": "15.2.3",
+        "@next/swc-darwin-x64": "15.2.3",
+        "@next/swc-linux-arm64-gnu": "15.2.3",
+        "@next/swc-linux-arm64-musl": "15.2.3",
+        "@next/swc-linux-x64-gnu": "15.2.3",
+        "@next/swc-linux-x64-musl": "15.2.3",
+        "@next/swc-win32-arm64-msvc": "15.2.3",
+        "@next/swc-win32-x64-msvc": "15.2.3",
         "sharp": "^0.33.5"
       },
       "peerDependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "habittrove",
-  "version": "0.2.2",
+  "version": "0.2.8",
   "private": true,
   "scripts": {
     "dev": "next dev --turbopack",
@@ -25,7 +25,9 @@
     "@radix-ui/react-label": "^2.1.1",
     "@radix-ui/react-popover": "^1.1.4",
     "@radix-ui/react-progress": "^1.1.1",
+    "@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-switch": "^1.1.2",
     "@radix-ui/react-toast": "^1.2.4",
@@ -43,7 +45,7 @@
     "linkify-react": "^4.2.0",
     "lucide-react": "^0.469.0",
     "luxon": "^3.5.0",
-    "next": "15.1.3",
+    "next": "15.2.3",
     "next-auth": "^5.0.0-beta.25",
     "next-themes": "^0.4.4",
     "react": "^19.0.0",