support archiving habit and wishlist + wishlist redeem count (#49)

CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## Version 0.1.26
+
+### Added
+
+- archiving habits and wishlists (#44)
+- wishlist item now supports redeem count (#36)
+
+### Fixed
+
+- pomodoro skip should update label
+
 ## Version 0.1.25
 
 ### Added

components/AddEditHabitModal.tsx

@@ -9,8 +9,6 @@ import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Textarea } from '@/components/ui/textarea'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import { Info, SmilePlus } from 'lucide-react'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
 import data from '@emoji-mart/data'

components/AddEditWishlistItemModal.tsx

@@ -5,7 +5,8 @@ import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Textarea } from '@/components/ui/textarea'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
-import { SmilePlus } from 'lucide-react'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
+import { SmilePlus, Info } from 'lucide-react'
 import data from '@emoji-mart/data'
 import Picker from '@emoji-mart/react'
 import { WishlistItemType } from '@/lib/types'
@@ -18,25 +19,51 @@ interface AddEditWishlistItemModalProps {
 }
 
 export default function AddEditWishlistItemModal({ isOpen, onClose, onSave, item }: AddEditWishlistItemModalProps) {
-  const [name, setName] = useState('')
-  const [description, setDescription] = useState('')
-  const [coinCost, setCoinCost] = useState(1)
+  const [name, setName] = useState(item?.name || '')
+  const [description, setDescription] = useState(item?.description || '')
+  const [coinCost, setCoinCost] = useState(item?.coinCost || 1)
+  const [targetCompletions, setTargetCompletions] = useState<number | undefined>(item?.targetCompletions)
+  const [errors, setErrors] = useState<{ [key: string]: string }>({})
 
   useEffect(() => {
     if (item) {
       setName(item.name)
       setDescription(item.description)
       setCoinCost(item.coinCost)
+      setTargetCompletions(item.targetCompletions)
     } else {
       setName('')
       setDescription('')
       setCoinCost(1)
+      setTargetCompletions(undefined)
     }
+    setErrors({})
   }, [item])
 
+  const validate = () => {
+    const newErrors: { [key: string]: string } = {}
+    if (!name.trim()) {
+      newErrors.name = 'Name is required'
+    }
+    if (coinCost < 1) {
+      newErrors.coinCost = 'Coin cost must be at least 1'
+    }
+    if (targetCompletions !== undefined && targetCompletions < 1) {
+      newErrors.targetCompletions = 'Target completions must be at least 1'
+    }
+    setErrors(newErrors)
+    return Object.keys(newErrors).length === 0
+  }
+
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault()
-    onSave({ name, description, coinCost })
+    if (!validate()) return
+    onSave({
+      name,
+      description,
+      coinCost,
+      targetCompletions: targetCompletions || undefined
+    })
   }
 
   return (
@@ -96,18 +123,90 @@ export default function AddEditWishlistItemModal({ isOpen, onClose, onSave, item
               />
             </div>
             <div className="grid grid-cols-4 items-center gap-4">
-              <Label htmlFor="coinCost" className="text-right">
-                Coin Cost
-              </Label>
-              <Input
-                id="coinCost"
-                type="number"
-                value={coinCost}
-                onChange={(e) => setCoinCost(parseInt(e.target.value === "" ? "0" : e.target.value))}
-                className="col-span-3"
-                min={1}
-                required
-              />
+              <div className="flex items-center gap-2 justify-end">
+                <Label htmlFor="coinReward">
+                  Cost
+                </Label>
+              </div>
+              <div className="col-span-3">
+                <div className="flex items-center gap-4">
+                  <div className="flex items-center border rounded-lg overflow-hidden">
+                    <button
+                      type="button"
+                      onClick={() => setCoinCost(prev => Math.max(0, prev - 1))}
+                      className="px-3 py-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors"
+                    >
+                      -
+                    </button>
+                    <Input
+                      id="coinReward"
+                      type="number"
+                      value={coinCost}
+                      onChange={(e) => setCoinCost(parseInt(e.target.value === "" ? "0" : e.target.value))}
+                      min={0}
+                      required
+                      className="w-20 text-center border-0 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                    />
+                    <button
+                      type="button"
+                      onClick={() => setCoinCost(prev => prev + 1)}
+                      className="px-3 py-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors"
+                    >
+                      +
+                    </button>
+                  </div>
+                  <span className="text-sm text-muted-foreground">
+                    coins
+                  </span>
+                </div>
+              </div>
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+              <div className="flex items-center gap-2 justify-end">
+                <Label htmlFor="targetCompletions">
+                  Redeemable
+                </Label>
+              </div>
+              <div className="col-span-3">
+                <div className="flex items-center gap-4">
+                  <div className="flex items-center border rounded-lg overflow-hidden">
+                    <button
+                      type="button"
+                      onClick={() => setTargetCompletions(prev => prev !== undefined && prev > 1 ? prev - 1 : undefined)}
+                      className="px-3 py-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors"
+                    >
+                      -
+                    </button>
+                    <Input
+                      id="targetCompletions"
+                      type="number"
+                      value={targetCompletions || ''}
+                      onChange={(e) => {
+                        const value = e.target.value
+                        setTargetCompletions(value && value !== "0" ? parseInt(value) : undefined)
+                      }}
+                      min={0}
+                      placeholder="∞"
+                      className="w-20 text-center border-0 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                    />
+                    <button
+                      type="button"
+                      onClick={() => setTargetCompletions(prev => Math.min(10, (prev || 0) + 1))}
+                      className="px-3 py-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors"
+                    >
+                      +
+                    </button>
+                  </div>
+                  <span className="text-sm text-muted-foreground">
+                    times
+                  </span>
+                </div>
+                {errors.targetCompletions && (
+                  <div className="text-sm text-red-500">
+                    {errors.targetCompletions}
+                  </div>
+                )}
+              </div>
             </div>
           </div>
           <DialogFooter>

components/HabitItem.tsx

@@ -4,7 +4,7 @@ import { settingsAtom, pomodoroAtom, browserSettingsAtom } from '@/lib/atoms'
 import { getTodayInTimezone, isSameDate, t2d, d2t, getNow, parseNaturalLanguageRRule, parseRRule, d2s } 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 } from 'lucide-react'
+import { Coins, Edit, Trash2, Check, Undo2, MoreVertical, Timer, Archive, ArchiveRestore } from 'lucide-react'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -24,7 +24,7 @@ interface HabitItemProps {
 }
 
 export default function HabitItem({ habit, onEdit, onDelete }: HabitItemProps) {
-  const { completeHabit, undoComplete } = useHabits()
+  const { completeHabit, undoComplete, archiveHabit, unarchiveHabit } = useHabits()
   const [settings] = useAtom(settingsAtom)
   const [_, setPomo] = useAtom(pomodoroAtom)
   const completionsToday = habit.completions?.filter(completion =>
@@ -59,21 +59,21 @@ export default function HabitItem({ habit, onEdit, onDelete }: HabitItemProps) {
   return (
     <Card
       id={`habit-${habit.id}`}
-      className={`h-full flex flex-col transition-all duration-500 ${isHighlighted ? 'bg-yellow-100 dark:bg-yellow-900' : ''}`}
+      className={`h-full flex flex-col transition-all duration-500 ${isHighlighted ? 'bg-yellow-100 dark:bg-yellow-900' : ''} ${habit.archived ? 'opacity-75' : ''}`}
     >
       <CardHeader className="flex-none">
-        <CardTitle className="line-clamp-1">{habit.name}</CardTitle>
+        <CardTitle className={`line-clamp-1 ${habit.archived ? 'text-gray-400 dark:text-gray-500' : ''}`}>{habit.name}</CardTitle>
         {habit.description && (
-          <CardDescription className="whitespace-pre-line">
+          <CardDescription className={`whitespace-pre-line ${habit.archived ? 'text-gray-400 dark:text-gray-500' : ''}`}>
             {habit.description}
           </CardDescription>
         )}
       </CardHeader>
       <CardContent className="flex-1">
-        <p className="text-sm 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: {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>
         <div className="flex items-center mt-2">
-          <Coins className="h-4 w-4 text-yellow-400 mr-1" />
-          <span className="text-sm font-medium">{habit.coinReward} coins per completion</span>
+          <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>
         </div>
       </CardContent>
       <CardFooter className="flex justify-between gap-2">
@@ -83,8 +83,8 @@ export default function HabitItem({ habit, onEdit, onDelete }: HabitItemProps) {
               variant={isCompletedToday ? "secondary" : "default"}
               size="sm"
               onClick={async () => await completeHabit(habit)}
-              disabled={isCompletedToday && completionsToday >= target}
-              className="overflow-hidden w-24 sm:w-auto"
+              disabled={habit.archived || (isCompletedToday && completionsToday >= target)}
+              className={`overflow-hidden w-24 sm:w-auto ${habit.archived ? 'cursor-not-allowed' : ''}`}
             >
               <Check className="h-4 w-4 sm:mr-2" />
               <span>
@@ -116,7 +116,7 @@ export default function HabitItem({ habit, onEdit, onDelete }: HabitItemProps) {
               )}
             </Button>
           </div>
-          {completionsToday > 0 && (
+          {completionsToday > 0 && !habit.archived && (
             <Button
               variant="outline"
               size="sm"
@@ -129,33 +129,53 @@ export default function HabitItem({ habit, onEdit, onDelete }: HabitItemProps) {
           )}
         </div>
         <div className="flex gap-2">
-          <Button
-            variant="edit"
-            size="sm"
-            onClick={onEdit}
-            className="hidden sm:flex"
-          >
-            <Edit className="h-4 w-4" />
-            <span className="ml-2">Edit</span>
-          </Button>
+          {!habit.archived && (
+            <Button
+              variant="edit"
+              size="sm"
+              onClick={onEdit}
+              className="hidden sm:flex"
+            >
+              <Edit className="h-4 w-4" />
+              <span className="ml-2">Edit</span>
+            </Button>
+          )}
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                 <MoreVertical className="h-4 w-4" />
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
-              <DropdownMenuItem onClick={() => {
-                setPomo((prev) => ({
-                  ...prev,
-                  show: true,
-                  selectedHabitId: habit.id
-                }))
-              }}>
-                <Timer className="mr-2 h-4 w-4" />
-                <span>Start Pomodoro</span>
-              </DropdownMenuItem>
-              <DropdownMenuItem onClick={onEdit} className="sm:hidden">
+              {!habit.archived && (
+                <DropdownMenuItem onClick={() => {
+                  setPomo((prev) => ({
+                    ...prev,
+                    show: true,
+                    selectedHabitId: habit.id
+                  }))
+                }}>
+                  <Timer className="mr-2 h-4 w-4" />
+                  <span>Start Pomodoro</span>
+                </DropdownMenuItem>
+              )}
+              {!habit.archived && (
+                <DropdownMenuItem onClick={() => archiveHabit(habit.id)}>
+                  <Archive className="mr-2 h-4 w-4" />
+                  <span>Archive</span>
+                </DropdownMenuItem>
+              )}
+              {habit.archived && (
+                <DropdownMenuItem 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>

components/HabitList.tsx

@@ -18,9 +18,11 @@ export default function HabitList() {
   const [habitsData, setHabitsData] = useAtom(habitsAtom)
   const [browserSettings] = useAtom(browserSettingsAtom)
   const isTasksView = browserSettings.viewType === 'tasks'
-  const habits = habitsData.habits.filter(habit =>
+  const habits = habitsData.habits.filter(habit => 
     isTasksView ? habit.isTask : !habit.isTask
   )
+  const activeHabits = habits.filter(h => !h.archived)
+  const archivedHabits = habits.filter(h => h.archived)
   const [settings] = useAtom(settingsAtom)
   const [isModalOpen, setIsModalOpen] = useState(false)
   const [editingHabit, setEditingHabit] = useState<Habit | null>(null)
@@ -41,7 +43,7 @@ export default function HabitList() {
         </Button>
       </div>
       <div className="grid grid-cols-1 md:grid-cols-2 gap-4 items-stretch">
-        {habits.length === 0 ? (
+        {activeHabits.length === 0 ? (
           <div className="col-span-2">
             <EmptyState
               icon={isTasksView ? TaskIcon : HabitIcon}
@@ -50,7 +52,7 @@ export default function HabitList() {
             />
           </div>
         ) : (
-          habits.map((habit) => (
+          activeHabits.map((habit: Habit) => (
             <HabitItem
               key={habit.id}
               habit={habit}
@@ -62,6 +64,27 @@ export default function HabitList() {
             />
           ))
         )}
+
+        {archivedHabits.length > 0 && (
+          <>
+            <div className="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" />
+            </div>
+            {archivedHabits.map((habit: Habit) => (
+              <HabitItem
+                key={habit.id}
+                habit={habit}
+                onEdit={() => {
+                  setEditingHabit(habit)
+                  setIsModalOpen(true)
+                }}
+                onDelete={() => setDeleteConfirmation({ isOpen: true, habitId: habit.id })}
+              />
+            ))}
+          </>
+        )}
       </div>
       {isModalOpen &&
         <AddEditHabitModal