fix: added missing dependency lodash

CHANGELOG.md

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

README.md

@@ -6,7 +6,7 @@ HabitTrove is a gamified habit tracking application that helps you build and mai
 
 ## Try the Demo
 
-Want to try HabitTrove before installing? Visit the public [demo instance](https://habittrove.app.enting.org) to experience all features without any setup required. (do not store personal info. Data on the demo instance is reset daily)
+Want to try HabitTrove before installing? Visit the public [demo instance](https://demo.habittrove.com) to experience all features without any setup required. (do not store personal info. Data on the demo instance is reset daily)
 
 ## Features
 

components/DailyOverview.tsx

@@ -1,26 +1,35 @@
-import { Circle, Coins, ArrowRight, CircleCheck, ChevronDown, ChevronUp, Timer, Plus, Pin, Calendar } from 'lucide-react'
+import { Circle, Coins, ArrowRight, CircleCheck, ChevronDown, ChevronUp, Plus, Pin, AlertTriangle } from 'lucide-react' // Removed unused icons
 import CompletionCountBadge from './CompletionCountBadge'
 import {
   ContextMenu,
   ContextMenuContent,
   ContextMenuItem,
+  ContextMenuSeparator,
   ContextMenuTrigger,
 } from "@/components/ui/context-menu"
-import { cn, getHabitFreq } from '@/lib/utils'
+import { cn } from '@/lib/utils'
 import Link from 'next/link'
 import { useState } from 'react'
 import { useAtom } from 'jotai'
-import { pomodoroAtom, settingsAtom, completedHabitsMapAtom, browserSettingsAtom, BrowserSettings, hasTasksAtom, dailyHabitsAtom } from '@/lib/atoms'
-import { getTodayInTimezone, isSameDate, t2d, d2t, getNow } from '@/lib/utils'
+import { pomodoroAtom, settingsAtom, completedHabitsMapAtom, browserSettingsAtom, BrowserSettings, hasTasksAtom } from '@/lib/atoms'
+import { getTodayInTimezone, isSameDate, t2d, d2t, getNow, isHabitDue, isTaskOverdue } from '@/lib/utils'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Badge } from '@/components/ui/badge'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
 import { Progress } from '@/components/ui/progress'
 import { Settings, WishlistItemType } from '@/lib/types'
 import { Habit } from '@/lib/types'
 import Linkify from './linkify'
 import { useHabits } from '@/hooks/useHabits'
 import AddEditHabitModal from './AddEditHabitModal'
+import ConfirmDialog from './ConfirmDialog'
 import { Button } from './ui/button'
+import { HabitContextMenuItems } from './HabitContextMenuItems'
 
 interface UpcomingItemsProps {
   habits: Habit[]
@@ -34,13 +43,7 @@ interface ItemSectionProps {
   emptyMessage: string;
   isTask: boolean;
   viewLink: string;
-  expanded: boolean;
-  setExpanded: (value: boolean) => void;
   addNewItem: () => void;
-  badgeType: "tasks" | "habits";
-  todayCompletions: Habit[];
-  settings: Settings;
-  setBrowserSettings: (value: React.SetStateAction<BrowserSettings>) => void;
 }
 
 const ItemSection = ({
@@ -49,16 +52,46 @@ const ItemSection = ({
   emptyMessage,
   isTask,
   viewLink,
-  expanded,
-  setExpanded,
   addNewItem,
-  badgeType,
-  todayCompletions,
-  settings,
-  setBrowserSettings,
 }: ItemSectionProps) => {
-  const { completeHabit, undoComplete, saveHabit } = useHabits();
+  const { completeHabit, undoComplete, saveHabit, deleteHabit, archiveHabit, habitFreqMap } = useHabits();
   const [_, setPomo] = useAtom(pomodoroAtom);
+  const [browserSettings, setBrowserSettings] = useAtom(browserSettingsAtom);
+  const [settings] = useAtom(settingsAtom);
+  const [completedHabitsMap] = useAtom(completedHabitsMapAtom);
+
+  const today = getTodayInTimezone(settings.system.timezone);
+  const currentTodayCompletions = completedHabitsMap.get(today) || [];
+  const currentBadgeType = isTask ? 'tasks' : 'habits';
+
+  const currentExpanded = isTask ? browserSettings.expandedTasks : browserSettings.expandedHabits;
+  const setCurrentExpanded = (value: boolean) => {
+    setBrowserSettings(prev => ({
+      ...prev,
+      [isTask ? 'expandedTasks' : 'expandedHabits']: value
+    }));
+  };
+
+  const [isConfirmDeleteDialogOpen, setIsConfirmDeleteDialogOpen] = useState(false);
+  const [habitToDelete, setHabitToDelete] = useState<Habit | null>(null);
+  const [habitToEdit, setHabitToEdit] = useState<Habit | null>(null);
+
+  const handleDeleteClick = (habit: Habit) => {
+    setHabitToDelete(habit);
+    setIsConfirmDeleteDialogOpen(true);
+  };
+
+  const confirmDelete = async () => {
+    if (habitToDelete) {
+      await deleteHabit(habitToDelete.id);
+      setHabitToDelete(null);
+      setIsConfirmDeleteDialogOpen(false);
+    }
+  };
+
+  const handleEditClick = (habit: Habit) => {
+    setHabitToEdit(habit);
+  };
 
   if (items.length === 0) {
     return (
@@ -89,7 +122,7 @@ const ItemSection = ({
           <h3 className="font-semibold">{title}</h3>
         </div>
         <div className="flex items-center gap-2">
-          <CompletionCountBadge type={badgeType} />
+          <CompletionCountBadge type={currentBadgeType} />
           <Button
             variant="ghost"
             size="sm"
@@ -101,7 +134,7 @@ const ItemSection = ({
           </Button>
         </div>
       </div>
-      <ul className={`grid gap-2 transition-all duration-300 ease-in-out ${expanded ? 'max-h-none' : 'max-h-[200px]'} overflow-hidden`}>
+      <ul className={`grid gap-2 transition-all duration-300 ease-in-out ${currentExpanded ? 'max-h-none' : 'max-h-[200px]'} overflow-hidden`}>
         {items
           .sort((a, b) => {
             // First by pinned status
@@ -110,15 +143,15 @@ const ItemSection = ({
             }
 
             // Then by completion status
-            const aCompleted = todayCompletions.includes(a);
-            const bCompleted = todayCompletions.includes(b);
+            const aCompleted = currentTodayCompletions.includes(a);
+            const bCompleted = currentTodayCompletions.includes(b);
             if (aCompleted !== bCompleted) {
               return aCompleted ? 1 : -1;
             }
 
             // Then by frequency (daily first)
-            const aFreq = getHabitFreq(a);
-            const bFreq = getHabitFreq(b);
+            const aFreq = habitFreqMap.get(a.id) || 'daily';
+            const bFreq = habitFreqMap.get(b.id) || 'daily';
             const freqOrder = ['daily', 'weekly', 'monthly', 'yearly'];
             if (freqOrder.indexOf(aFreq) !== freqOrder.indexOf(bFreq)) {
               return freqOrder.indexOf(aFreq) - freqOrder.indexOf(bFreq);
@@ -134,7 +167,7 @@ const ItemSection = ({
             const bTarget = b.targetCompletions || 1;
             return bTarget - aTarget;
           })
-          .slice(0, expanded ? undefined : 5)
+          .slice(0, currentExpanded ? undefined : 5)
           .map((habit) => {
             const completionsToday = habit.completions.filter(completion =>
               isSameDate(t2d({ timestamp: completion, timezone: settings.system.timezone }), t2d({ timestamp: d2t({ dateTime: getNow({ timezone: settings.system.timezone }) }), timezone: settings.system.timezone }))
@@ -190,50 +223,46 @@ const ItemSection = ({
                           )}
                           <Link
                             href={`/habits?highlight=${habit.id}`}
-                            className={cn(
-                              isCompleted ? 'line-through' : '',
-                              'break-all hover:text-primary transition-colors'
-                            )}
+                            className="flex items-center gap-1 hover:text-primary transition-colors"
+                            onClick={() => {
+                              const newViewType = isTask ? 'tasks' : 'habits';
+                              if (browserSettings.viewType !== newViewType) {
+                                setBrowserSettings(prev => ({ ...prev, viewType: newViewType }));
+                              }
+                            }}
                           >
-                            {habit.name}
+                            {isTask && isTaskOverdue(habit, settings.system.timezone) && !isCompleted && (
+                              <TooltipProvider>
+                                <Tooltip delayDuration={0}>
+                                  <TooltipTrigger asChild>
+                                    {/* The AlertTriangle itself doesn't need hover styles if the parent Link handles it */}
+                                    <AlertTriangle className="h-4 w-4 flex-shrink-0 text-red-600 dark:text-red-500" />
+                                  </TooltipTrigger>
+                                  <TooltipContent>
+                                    <p>Overdue</p>
+                                  </TooltipContent>
+                                </Tooltip>
+                              </TooltipProvider>
+                            )}
+                            <span
+                              className={cn(
+                                isCompleted ? 'line-through' : '',
+                                'break-all' // Text specific styles
+                              )}
+                            >
+                              {habit.name}
+                            </span>
                           </Link>
                         </span>
                       </div>
                     </ContextMenuTrigger>
                     <ContextMenuContent className="w-64">
-                      <ContextMenuItem onClick={() => {
-                        setPomo((prev) => ({
-                          ...prev,
-                          show: true,
-                          selectedHabitId: habit.id
-                        }))
-                      }}>
-                        <Timer className="mr-2 h-4 w-4" />
-                        <span>Start Pomodoro</span>
-                      </ContextMenuItem>
-                      {habit.isTask && (
-                        <ContextMenuItem onClick={() => {
-                          saveHabit({...habit, frequency: d2t({ dateTime: getNow({ timezone: settings.system.timezone })})})
-                        }}>
-                          <Calendar className="mr-2 h-4 w-4" />
-                          <span>Move to Today</span>
-                        </ContextMenuItem>
-                      )}
-                      <ContextMenuItem onClick={() => {
-                        saveHabit({ ...habit, pinned: !habit.pinned })
-                      }}>
-                        {habit.pinned ? (
-                          <>
-                            <Pin className="mr-2 h-4 w-4" />
-                            <span>Unpin</span>
-                          </>
-                        ) : (
-                          <>
-                            <Pin className="mr-2 h-4 w-4" />
-                            <span>Pin</span>
-                          </>
-                        )}
-                      </ContextMenuItem>
+                      <HabitContextMenuItems
+                        habit={habit}
+                        onEditRequest={() => handleEditClick(habit)}
+                        onDeleteRequest={() => handleDeleteClick(habit)}
+                        context="daily-overview"
+                      />
                     </ContextMenuContent>
                   </ContextMenu>
                 </span>
@@ -243,9 +272,9 @@ const ItemSection = ({
                       {completionsToday}/{target}
                     </span>
                   )}
-                  {getHabitFreq(habit) !== 'daily' && (
+                  {habitFreqMap.get(habit.id) !== 'daily' && (
                     <Badge variant="outline" className="text-xs">
-                      {getHabitFreq(habit)}
+                      {habitFreqMap.get(habit.id)}
                     </Badge>
                   )}
                   <span className="flex items-center">
@@ -271,10 +300,10 @@ const ItemSection = ({
       </ul>
       <div className="flex items-center justify-between">
         <button
-          onClick={() => setExpanded(!expanded)}
+          onClick={() => setCurrentExpanded(!currentExpanded)}
           className="text-sm text-muted-foreground hover:text-primary flex items-center gap-1"
         >
-          {expanded ? (
+          {currentExpanded ? (
             <>
               Show less
               <ChevronUp className="h-3 w-3" />
@@ -290,10 +319,9 @@ const ItemSection = ({
           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' }));
+            const newViewType = isTask ? 'tasks' : 'habits';
+            if (browserSettings.viewType !== newViewType) {
+              setBrowserSettings(prev => ({ ...prev, viewType: newViewType }));
             }
           }}
         >
@@ -301,6 +329,27 @@ const ItemSection = ({
           <ArrowRight className="h-3 w-3" />
         </Link>
       </div>
+      {habitToDelete && (
+        <ConfirmDialog
+          isOpen={isConfirmDeleteDialogOpen}
+          onClose={() => setIsConfirmDeleteDialogOpen(false)}
+          onConfirm={confirmDelete}
+          title={`Delete ${isTask ? 'Task' : 'Habit'}`}
+          message={`Are you sure you want to delete "${habitToDelete.name}"? This action cannot be undone.`}
+          confirmText="Delete"
+        />
+      )}
+      {habitToEdit && (
+        <AddEditHabitModal
+          onClose={() => setHabitToEdit(null)}
+          onSave={async (updatedHabit) => {
+            await saveHabit({ ...habitToEdit, ...updatedHabit });
+            setHabitToEdit(null);
+          }}
+          habit={habitToEdit}
+          isTask={habitToEdit.isTask || false}
+        />
+      )}
     </div>
   );
 };
@@ -313,14 +362,25 @@ export default function DailyOverview({
   const { completeHabit, undoComplete } = useHabits()
   const [settings] = useAtom(settingsAtom)
   const [completedHabitsMap] = useAtom(completedHabitsMapAtom)
-  const [dailyItems] = useAtom(dailyHabitsAtom)
   const [browserSettings, setBrowserSettings] = useAtom(browserSettingsAtom)
-  const dailyTasks = dailyItems.filter(habit => habit.isTask)
-  const dailyHabits = dailyItems.filter(habit => !habit.isTask)
   const today = getTodayInTimezone(settings.system.timezone)
   const todayCompletions = completedHabitsMap.get(today) || []
   const { saveHabit } = useHabits()
 
+  const timezone = settings.system.timezone
+  const todayDateObj = getNow({ timezone })
+
+  const dailyTasks = habits.filter(habit =>
+    habit.isTask &&
+    !habit.archived &&
+    (isHabitDue({ habit, timezone, date: todayDateObj }) || isTaskOverdue(habit, timezone))
+  )
+  const dailyHabits = habits.filter(habit =>
+    !habit.isTask &&
+    !habit.archived &&
+    isHabitDue({ habit, timezone, date: todayDateObj })
+  )
+
   // Get all wishlist items sorted by redeemable status (non-redeemable first) then by coin cost
   // Filter out archived wishlist items
   const sortedWishlistItems = wishlistItems
@@ -364,13 +424,7 @@ export default function DailyOverview({
                 emptyMessage="No tasks due today. Add some tasks to get started!"
                 isTask={true}
                 viewLink="/habits?view=tasks"
-                expanded={browserSettings.expandedTasks}
-                setExpanded={(value) => setBrowserSettings(prev => ({ ...prev, expandedTasks: value }))}
                 addNewItem={() => setModalConfig({ isOpen: true, isTask: true })}
-                badgeType="tasks"
-                todayCompletions={todayCompletions}
-                settings={settings}
-                setBrowserSettings={setBrowserSettings}
               />
             )}
 
@@ -381,13 +435,7 @@ export default function DailyOverview({
               emptyMessage="No habits due today. Add some habits to get started!"
               isTask={false}
               viewLink="/habits"
-              expanded={browserSettings.expandedHabits}
-              setExpanded={(value) => setBrowserSettings(prev => ({ ...prev, expandedHabits: value }))}
               addNewItem={() => setModalConfig({ isOpen: true, isTask: false })}
-              badgeType="habits"
-              todayCompletions={todayCompletions}
-              settings={settings}
-              setBrowserSettings={setBrowserSettings}
             />
 
             <div className="space-y-2">

components/HabitContextMenuItems.tsx

@@ -0,0 +1,157 @@
+import { Habit } from '@/lib/types';
+import { useHabits } from '@/hooks/useHabits';
+import { useAtom } from 'jotai';
+import { pomodoroAtom, settingsAtom } from '@/lib/atoms';
+import { d2t, getNow, isHabitDueToday } from '@/lib/utils';
+import { DropdownMenuItem, DropdownMenuSeparator } from '@/components/ui/dropdown-menu';
+import { ContextMenuItem, ContextMenuSeparator } from '@/components/ui/context-menu';
+import { Timer, Calendar, Pin, Edit, Archive, ArchiveRestore, Trash2 } from 'lucide-react';
+import { useHelpers } from '@/lib/client-helpers'; // For permission checks if needed, though useHabits handles most
+
+interface HabitContextMenuItemsProps {
+  habit: Habit;
+  onEditRequest: () => void;
+  onDeleteRequest: () => void;
+  context?: 'daily-overview' | 'habit-item';
+  onClose?: () => void; // Optional: To close the dropdown if an action is taken
+}
+
+export function HabitContextMenuItems({
+  habit,
+  onEditRequest,
+  onDeleteRequest,
+  context = 'habit-item',
+  onClose,
+}: HabitContextMenuItemsProps) {
+  const { saveHabit, archiveHabit, unarchiveHabit } = useHabits();
+  const [settings] = useAtom(settingsAtom);
+  const [, setPomo] = useAtom(pomodoroAtom);
+  const { hasPermission } = useHelpers(); // Assuming useHabits handles permissions for its actions
+
+  const canWrite = hasPermission('habit', 'write'); // For UI disabling if not handled by useHabits' actions
+  const canInteract = hasPermission('habit', 'interact');
+
+  const MenuItemComponent = context === 'daily-overview' ? ContextMenuItem : DropdownMenuItem;
+  const MenuSeparatorComponent = context === 'daily-overview' ? ContextMenuSeparator : DropdownMenuSeparator;
+
+  const taskIsDueToday = habit.isTask ? isHabitDueToday({ habit, timezone: settings.system.timezone }) : false;
+
+  const handleAction = (action: () => void) => {
+    action();
+    onClose?.();
+  };
+
+  return (
+    <>
+      {!habit.archived && (
+        <MenuItemComponent
+          disabled={!canInteract}
+          onClick={() => handleAction(() => {
+            setPomo((prev) => ({
+              ...prev,
+              show: true,
+              selectedHabitId: habit.id,
+            }));
+          })}
+        >
+          <Timer className="mr-2 h-4 w-4" />
+          <span>Start Pomodoro</span>
+        </MenuItemComponent>
+      )}
+
+      {/* "Move to Today" option: Show if task is not due today */}
+      {habit.isTask && !habit.archived && !taskIsDueToday && (
+        <MenuItemComponent
+          disabled={!canWrite}
+          onClick={() => handleAction(() => {
+            const today = getNow({ timezone: settings.system.timezone });
+            saveHabit({ ...habit, frequency: d2t({ dateTime: today }) });
+          })}
+        >
+          <Calendar className="mr-2 h-4 w-4" />
+          <span>Move to Today</span>
+        </MenuItemComponent>
+      )}
+
+      {/* "Move to Tomorrow" option: Show if task is due today OR not due today */}
+      {habit.isTask && !habit.archived && (
+        <MenuItemComponent
+          disabled={!canWrite}
+          onClick={() => handleAction(() => {
+            const tomorrow = getNow({ timezone: settings.system.timezone }).plus({ days: 1 });
+            saveHabit({ ...habit, frequency: d2t({ dateTime: tomorrow }) });
+          })}
+        >
+          <Calendar className="mr-2 h-4 w-4" />
+          <span>Move to Tomorrow</span>
+        </MenuItemComponent>
+      )}
+
+      {!habit.archived && (
+        <MenuItemComponent
+          disabled={!canWrite}
+          onClick={() => handleAction(() => saveHabit({ ...habit, pinned: !habit.pinned }))}
+        >
+          <Pin className="mr-2 h-4 w-4" />
+          <span>{habit.pinned ? 'Unpin' : 'Pin'}</span>
+        </MenuItemComponent>
+      )}
+
+      {context === 'habit-item' && !habit.archived && ( // Edit button visible in dropdown only for habit-item context on small screens
+        <MenuItemComponent
+          onClick={() => handleAction(onEditRequest)}
+          className="sm:hidden" // Kept the sm:hidden for HabitItem specific responsive behavior
+          disabled={!canWrite}
+        >
+          <Edit className="mr-2 h-4 w-4" />
+          <span>Edit</span>
+        </MenuItemComponent>
+      )}
+
+      {context === 'daily-overview' && !habit.archived && ( // Edit button always visible in dropdown for daily-overview context
+         <MenuItemComponent
+          onClick={() => handleAction(onEditRequest)}
+          disabled={!canWrite}
+        >
+          <Edit className="mr-2 h-4 w-4" />
+          <span>Edit</span>
+        </MenuItemComponent>
+      )}
+
+
+      {!habit.archived && (
+        <MenuItemComponent
+          disabled={!canWrite}
+          onClick={() => handleAction(() => archiveHabit(habit.id))}
+        >
+          <Archive className="mr-2 h-4 w-4" />
+          <span>Archive</span>
+        </MenuItemComponent>
+      )}
+
+      {habit.archived && (
+        <MenuItemComponent
+          disabled={!canWrite}
+          onClick={() => handleAction(() => unarchiveHabit(habit.id))}
+        >
+          <ArchiveRestore className="mr-2 h-4 w-4" />
+          <span>Unarchive</span>
+        </MenuItemComponent>
+      )}
+      
+      {context === 'habit-item' && !habit.archived && <MenuSeparatorComponent className="sm:hidden" />}
+
+      {(context === 'daily-overview' || habit.archived) && <MenuSeparatorComponent />}
+
+
+      <MenuItemComponent
+        onClick={() => handleAction(onDeleteRequest)}
+        className="text-red-600 focus:text-red-600 dark:text-red-400 dark:focus:text-red-400"
+        disabled={!canWrite} // Assuming delete is a write operation
+      >
+        <Trash2 className="mr-2 h-4 w-4" />
+        <span>Delete</span>
+      </MenuItemComponent>
+    </>
+  );
+}

components/HabitItem.tsx

@@ -4,7 +4,7 @@ import { settingsAtom, pomodoroAtom, browserSettingsAtom, usersAtom } from '@/li
 import { getTodayInTimezone, isSameDate, t2d, d2t, getNow, d2s, getCompletionsForToday, isTaskOverdue, convertMachineReadableFrequencyToHumanReadable } from '@/lib/utils'
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
-import { Coins, Edit, Trash2, Check, Undo2, MoreVertical, Timer, Archive, ArchiveRestore, Calendar, Pin } from 'lucide-react'
+import { Coins, Edit, Check, Undo2, MoreVertical, Pin } from 'lucide-react' // Removed unused icons
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -18,6 +18,7 @@ import { INITIAL_RECURRENCE_RULE, RECURRENCE_RULE_MAP } from '@/lib/constants'
 import { DateTime } from 'luxon'
 import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar'
 import { useHelpers } from '@/lib/client-helpers'
+import { HabitContextMenuItems } from './HabitContextMenuItems'
 
 interface HabitItemProps {
   habit: Habit
@@ -194,70 +195,12 @@ export default function HabitItem({ habit, onEdit, onDelete }: HabitItemProps) {
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
-              {!habit.archived && (
-                <DropdownMenuItem onClick={() => {
-                  if (!canInteract) return
-                  setPomo((prev) => ({
-                    ...prev,
-                    show: true,
-                    selectedHabitId: habit.id
-                  }))
-                }}>
-                  <Timer className="mr-2 h-4 w-4" />
-                  <span>Start Pomodoro</span>
-                </DropdownMenuItem>
-              )}
-              {!habit.archived && (
-                <>
-                  {habit.isTask && (
-                    <DropdownMenuItem disabled={!canWrite} onClick={() => {
-                      saveHabit({...habit, frequency: d2t({ dateTime: getNow({ timezone: settings.system.timezone })})})
-                    }}>
-                      <Calendar className="mr-2 h-4 w-4" />
-                      <span>Move to Today</span>
-                    </DropdownMenuItem>
-                  )}
-                  <DropdownMenuItem disabled={!canWrite} onClick={() => saveHabit({...habit, pinned: !habit.pinned})}>
-                    {habit.pinned ? (
-                      <>
-                        <Archive className="mr-2 h-4 w-4" />
-                        <span>Unpin</span>
-                      </>
-                    ) : (
-                      <>
-                        <Archive className="mr-2 h-4 w-4" />
-                        <span>Pin</span>
-                      </>
-                    )}
-                  </DropdownMenuItem>
-                  <DropdownMenuItem disabled={!canWrite} onClick={() => archiveHabit(habit.id)}>
-                    <Archive className="mr-2 h-4 w-4" />
-                    <span>Archive</span>
-                  </DropdownMenuItem>
-                </>
-              )}
-              {habit.archived && (
-                <DropdownMenuItem disabled={!canWrite} onClick={() => unarchiveHabit(habit.id)}>
-                  <ArchiveRestore className="mr-2 h-4 w-4" />
-                  <span>Unarchive</span>
-                </DropdownMenuItem>
-              )}
-              <DropdownMenuItem
-                onClick={onEdit}
-                className="sm:hidden"
-                disabled={habit.archived}
-              >
-                <Edit className="mr-2 h-4 w-4" />
-                Edit
-              </DropdownMenuItem>
-              <DropdownMenuSeparator className="sm:hidden" />
-              <DropdownMenuItem
-                className="text-red-600 focus:text-red-600 dark:text-red-400 dark:focus:text-red-400 cursor-pointer"
-                onClick={onDelete}
-              >
-                <Trash2 className="mr-2 h-4 w-4" />
-                Delete
-              </DropdownMenuItem>
+              <HabitContextMenuItems
+                habit={habit}
+                onEditRequest={onEdit}
+                onDeleteRequest={onDelete}
+                context="habit-item"
+              />
             </DropdownMenuContent>
           </DropdownMenu>
         </div>

components/HabitList.tsx

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

components/HabitStreak.tsx

@@ -2,10 +2,10 @@
 
 import { Habit } from '@/lib/types'
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
-import { d2s, getNow, t2d, getCompletedHabitsForDate } from '@/lib/utils'
+import { d2s, getNow, t2d } from '@/lib/utils' // Removed getCompletedHabitsForDate
 import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts'
 import { useAtom } from 'jotai'
-import { settingsAtom, hasTasksAtom } from '@/lib/atoms'
+import { settingsAtom, hasTasksAtom, completedHabitsMapAtom } from '@/lib/atoms' // Added completedHabitsMapAtom
 
 interface HabitStreakProps {
   habits: Habit[]
@@ -14,6 +14,8 @@ interface HabitStreakProps {
 export default function HabitStreak({ habits }: HabitStreakProps) {
   const [settings] = useAtom(settingsAtom)
   const [hasTasks] = useAtom(hasTasksAtom)
+  const [completedHabitsMap] = useAtom(completedHabitsMapAtom) // Use the atom
+
   // Get the last 7 days of data
   const dates = Array.from({ length: 7 }, (_, i) => {
     const d = getNow({ timezone: settings.system.timezone });
@@ -21,20 +23,17 @@ export default function HabitStreak({ habits }: HabitStreakProps) {
   }).reverse()
 
   const completions = dates.map(date => {
-    const completedHabits = getCompletedHabitsForDate({
-      habits: habits.filter(h => !h.isTask),
-      date: t2d({ timestamp: date, timezone: settings.system.timezone }),
-      timezone: settings.system.timezone
-    });
-    const completedTasks = getCompletedHabitsForDate({
-      habits: habits.filter(h => h.isTask),
-      date: t2d({ timestamp: date, timezone: settings.system.timezone }),
-      timezone: settings.system.timezone
-    });
+    // Get completed habits for the date from the map
+    const completedOnDate = completedHabitsMap.get(date) || [];
+
+    // Filter the completed list to count habits and tasks
+    const completedHabitsCount = completedOnDate.filter(h => !h.isTask).length;
+    const completedTasksCount = completedOnDate.filter(h => h.isTask).length;
+
     return {
       date,
-      habits: completedHabits.length,
-      tasks: completedTasks.length
+      habits: completedHabitsCount,
+      tasks: completedTasksCount
     };
   });
 

components/WishlistManager.tsx

@@ -88,9 +88,9 @@ export default function WishlistManager() {
           <Plus className="mr-2 h-4 w-4" /> Add Reward
         </Button>
       </div>
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 items-stretch">
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 items-stretch">
         {activeItems.length === 0 ? (
-          <div className="col-span-2">
+          <div className="col-span-1 lg:col-span-2">
             <EmptyState
               icon={Gift}
               title="Your wishlist is empty"
@@ -127,7 +127,7 @@ export default function WishlistManager() {
         
         {archivedItems.length > 0 && (
           <>
-            <div className="col-span-2 relative flex items-center my-6">
+            <div className="col-span-1 lg:col-span-2 relative flex items-center my-6">
               <div className="flex-grow border-t border-gray-300 dark:border-gray-600" />
               <span className="mx-4 text-sm text-gray-500 dark:text-gray-400">Archived</span>
               <div className="flex-grow border-t border-gray-300 dark:border-gray-600" />

hooks/useCoins.tsx

@@ -2,14 +2,14 @@ import { useAtom } from 'jotai'
 import { calculateCoinsEarnedToday, calculateCoinsSpentToday, calculateTotalEarned, calculateTotalSpent, calculateTransactionsToday, checkPermission } from '@/lib/utils'
 import {
   coinsAtom,
-  // coinsEarnedTodayAtom,
-  // totalEarnedAtom,
-  // totalSpentAtom,
-  // coinsSpentTodayAtom,
-  // transactionsTodayAtom,
-  // coinsBalanceAtom,
+  coinsEarnedTodayAtom,
+  totalEarnedAtom,
+  totalSpentAtom,
+  coinsSpentTodayAtom,
+  transactionsTodayAtom,
+  coinsBalanceAtom,
   settingsAtom,
-  usersAtom
+  usersAtom,
 } from '@/lib/atoms'
 import { addCoins, removeCoins, saveCoinsData } from '@/app/actions/data'
 import { CoinsData, User } from '@/lib/types'
@@ -29,7 +29,7 @@ function handlePermissionCheck(
     })
     return false
   }
-  
+
   if (!user.isAdmin && !checkPermission(user.permissions, resource, action)) {
     toast({
       title: "Permission Denied",
@@ -38,7 +38,7 @@ function handlePermissionCheck(
     })
     return false
   }
-  
+
   return true
 }
 
@@ -57,12 +57,12 @@ export function useCoins(options?: { selectedUser?: string }) {
   // Filter transactions for the selectd user
   const transactions = coins.transactions.filter(t => t.userId === user?.id)
 
-  const balance = transactions.reduce((sum, t) => sum + t.amount, 0)
-  const coinsEarnedToday = calculateCoinsEarnedToday(transactions, settings.system.timezone)
-  const totalEarned = calculateTotalEarned(transactions)
-  const totalSpent = calculateTotalSpent(transactions)
-  const coinsSpentToday = calculateCoinsSpentToday(transactions, settings.system.timezone)
-  const transactionsToday = calculateTransactionsToday(transactions, settings.system.timezone)
+  const [balance] = useAtom(coinsBalanceAtom)
+  const [coinsEarnedToday] = useAtom(coinsEarnedTodayAtom)
+  const [totalEarned] = useAtom(totalEarnedAtom)
+  const [totalSpent] = useAtom(totalSpentAtom)
+  const [coinsSpentToday] = useAtom(coinsSpentTodayAtom)
+  const [transactionsToday] = useAtom(transactionsTodayAtom)
 
   const add = async (amount: number, description: string, note?: string) => {
     if (!handlePermissionCheck(currentUser, 'coins', 'write')) return null

hooks/useHabits.tsx

@@ -1,5 +1,5 @@
-import { useAtom } from 'jotai'
-import { habitsAtom, coinsAtom, settingsAtom, usersAtom } from '@/lib/atoms'
+import { useAtom, atom } from 'jotai'
+import { habitsAtom, coinsAtom, settingsAtom, usersAtom, habitFreqMapAtom } from '@/lib/atoms'
 import { addCoins, removeCoins, saveHabitsData } from '@/app/actions/data'
 import { Habit, Permission, SafeUser, User } from '@/lib/types'
 import { toast } from '@/hooks/use-toast'
@@ -34,7 +34,7 @@ function handlePermissionCheck(
     })
     return false
   }
-  
+
   if (!user.isAdmin && !checkPermission(user.permissions, resource, action)) {
     toast({
       title: "Permission Denied",
@@ -43,7 +43,7 @@ function handlePermissionCheck(
     })
     return false
   }
-  
+
   return true
 }
 
@@ -54,6 +54,7 @@ export function useHabits() {
   const [habitsData, setHabitsData] = useAtom(habitsAtom)
   const [coins, setCoins] = useAtom(coinsAtom)
   const [settings] = useAtom(settingsAtom)
+  const [habitFreqMap] = useAtom(habitFreqMapAtom)
 
   const completeHabit = async (habit: Habit) => {
     if (!handlePermissionCheck(currentUser, 'habit', 'interact')) return
@@ -313,6 +314,7 @@ export function useHabits() {
     deleteHabit,
     completePastHabit,
     archiveHabit,
-    unarchiveHabit
+    unarchiveHabit,
+    habitFreqMap,
   }
 }

lib/atoms.ts

@@ -24,10 +24,12 @@ import {
   getISODate,
   isHabitDueToday,
   getNow,
-  isHabitDue
+  isHabitDue,
+  getHabitFreq
 } from "@/lib/utils";
 import { atomFamily, atomWithStorage } from "jotai/utils";
 import { DateTime } from "luxon";
+import { Freq } from "./types";
 
 export interface BrowserSettings {
   viewType: ViewType
@@ -50,44 +52,44 @@ export const coinsAtom = atom(getDefaultCoinsData());
 export const wishlistAtom = atom(getDefaultWishlistData());
 export const serverSettingsAtom = atom(getDefaultServerSettings());
 
-// // Derived atom for coins earned today
-// export const coinsEarnedTodayAtom = atom((get) => {
-//   const coins = get(coinsAtom);
-//   const settings = get(settingsAtom);
-//   return calculateCoinsEarnedToday(coins.transactions, settings.system.timezone);
-// });
+// Derived atom for coins earned today
+export const coinsEarnedTodayAtom = atom((get) => {
+  const coins = get(coinsAtom);
+  const settings = get(settingsAtom);
+  return calculateCoinsEarnedToday(coins.transactions, settings.system.timezone);
+});
 
-// // Derived atom for total earned
-// export const totalEarnedAtom = atom((get) => {
-//   const coins = get(coinsAtom);
-//   return calculateTotalEarned(coins.transactions);
-// });
+// Derived atom for total earned
+export const totalEarnedAtom = atom((get) => {
+  const coins = get(coinsAtom);
+  return calculateTotalEarned(coins.transactions);
+});
 
-// // Derived atom for total spent
-// export const totalSpentAtom = atom((get) => {
-//   const coins = get(coinsAtom);
-//   return calculateTotalSpent(coins.transactions);
-// });
+// Derived atom for total spent
+export const totalSpentAtom = atom((get) => {
+  const coins = get(coinsAtom);
+  return calculateTotalSpent(coins.transactions);
+});
 
-// // Derived atom for coins spent today
-// export const coinsSpentTodayAtom = atom((get) => {
-//   const coins = get(coinsAtom);
-//   const settings = get(settingsAtom);
-//   return calculateCoinsSpentToday(coins.transactions, settings.system.timezone);
-// });
+// Derived atom for coins spent today
+export const coinsSpentTodayAtom = atom((get) => {
+  const coins = get(coinsAtom);
+  const settings = get(settingsAtom);
+  return calculateCoinsSpentToday(coins.transactions, settings.system.timezone);
+});
 
-// // Derived atom for transactions today
-// export const transactionsTodayAtom = atom((get) => {
-//   const coins = get(coinsAtom);
-//   const settings = get(settingsAtom);
-//   return calculateTransactionsToday(coins.transactions, settings.system.timezone);
-// });
+// Derived atom for transactions today
+export const transactionsTodayAtom = atom((get) => {
+  const coins = get(coinsAtom);
+  const settings = get(settingsAtom);
+  return calculateTransactionsToday(coins.transactions, settings.system.timezone);
+});
 
-// // Derived atom for current balance from all transactions
-// export const coinsBalanceAtom = atom((get) => {
-//   const coins = get(coinsAtom);
-//   return coins.transactions.reduce((sum, transaction) => sum + transaction.amount, 0);
-// });
+// Derived atom for current balance from all transactions
+export const coinsBalanceAtom = atom((get) => {
+  const coins = get(coinsAtom);
+  return coins.transactions.reduce((sum, transaction) => sum + transaction.amount, 0);
+});
 
 /* transient atoms */
 interface PomodoroAtom {
@@ -150,6 +152,15 @@ export const completedHabitsMapAtom = atom((get) => {
   return map;
 });
 
+// Derived atom for habit frequency map
+export const habitFreqMapAtom = atom((get) => {
+  const habits = get(habitsAtom).habits;
+  const map = new Map<string, Freq>();
+  habits.forEach(habit => {
+    map.set(habit.id, getHabitFreq(habit));
+  });
+  return map;
+});
 
 export const pomodoroTodayCompletionsAtom = atom((get) => {
   const pomo = get(pomodoroAtom)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "habittrove",
-  "version": "0.2.9",
+  "version": "0.2.11",
   "private": true,
   "scripts": {
     "dev": "next dev --turbopack",
@@ -44,6 +44,7 @@
     "js-confetti": "^0.12.0",
     "linkify": "^0.2.1",
     "linkify-react": "^4.2.0",
+    "lodash": "^4.17.21",
     "lucide-react": "^0.469.0",
     "luxon": "^3.5.0",
     "next": "15.2.3",