Skip to content

Commit 6fe10d9

Browse files
dohsimpsondohsimpson
authored
support archiving habit and wishlist + wishlist redeem count (#49)
1 parent d3502e2 commit 6fe10d9

13 files changed

+374
-83
lines changed

‎CHANGELOG.md

+11
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,16 @@
11
# Changelog
22

3+
## Version 0.1.26
4+
5+
### Added
6+
7+
- archiving habits and wishlists (#44)
8+
- wishlist item now supports redeem count (#36)
9+
10+
### Fixed
11+
12+
- pomodoro skip should update label
13+
314
## Version 0.1.25
415

516
### Added

‎components/AddEditHabitModal.tsx

-2
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,6 @@ import { Button } from '@/components/ui/button'
99
import { Input } from '@/components/ui/input'
1010
import { Label } from '@/components/ui/label'
1111
import { Textarea } from '@/components/ui/textarea'
12-
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
13-
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
1412
import { Info, SmilePlus } from 'lucide-react'
1513
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
1614
import data from '@emoji-mart/data'

‎components/AddEditWishlistItemModal.tsx

+116-17
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ import { Input } from '@/components/ui/input'
55
import { Label } from '@/components/ui/label'
66
import { Textarea } from '@/components/ui/textarea'
77
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
8-
import { SmilePlus } from 'lucide-react'
8+
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
9+
import { SmilePlus, Info } from 'lucide-react'
910
import data from '@emoji-mart/data'
1011
import Picker from '@emoji-mart/react'
1112
import { WishlistItemType } from '@/lib/types'
@@ -18,25 +19,51 @@ interface AddEditWishlistItemModalProps {
1819
}
1920

2021
export default function AddEditWishlistItemModal({ isOpen, onClose, onSave, item }: AddEditWishlistItemModalProps) {
21-
const [name, setName] = useState('')
22-
const [description, setDescription] = useState('')
23-
const [coinCost, setCoinCost] = useState(1)
22+
const [name, setName] = useState(item?.name || '')
23+
const [description, setDescription] = useState(item?.description || '')
24+
const [coinCost, setCoinCost] = useState(item?.coinCost || 1)
25+
const [targetCompletions, setTargetCompletions] = useState<number | undefined>(item?.targetCompletions)
26+
const [errors, setErrors] = useState<{ [key: string]: string }>({})
2427

2528
useEffect(() => {
2629
if (item) {
2730
setName(item.name)
2831
setDescription(item.description)
2932
setCoinCost(item.coinCost)
33+
setTargetCompletions(item.targetCompletions)
3034
} else {
3135
setName('')
3236
setDescription('')
3337
setCoinCost(1)
38+
setTargetCompletions(undefined)
3439
}
40+
setErrors({})
3541
}, [item])
3642

43+
const validate = () => {
44+
const newErrors: { [key: string]: string } = {}
45+
if (!name.trim()) {
46+
newErrors.name = 'Name is required'
47+
}
48+
if (coinCost < 1) {
49+
newErrors.coinCost = 'Coin cost must be at least 1'
50+
}
51+
if (targetCompletions !== undefined && targetCompletions < 1) {
52+
newErrors.targetCompletions = 'Target completions must be at least 1'
53+
}
54+
setErrors(newErrors)
55+
return Object.keys(newErrors).length === 0
56+
}
57+
3758
const handleSubmit = (e: React.FormEvent) => {
3859
e.preventDefault()
39-
onSave({ name, description, coinCost })
60+
if (!validate()) return
61+
onSave({
62+
name,
63+
description,
64+
coinCost,
65+
targetCompletions: targetCompletions || undefined
66+
})
4067
}
4168

4269
return (
@@ -96,18 +123,90 @@ export default function AddEditWishlistItemModal({ isOpen, onClose, onSave, item
96123
/>
97124
</div>
98125
<div className="grid grid-cols-4 items-center gap-4">
99-
<Label htmlFor="coinCost" className="text-right">
100-
Coin Cost
101-
</Label>
102-
<Input
103-
id="coinCost"
104-
type="number"
105-
value={coinCost}
106-
onChange={(e) => setCoinCost(parseInt(e.target.value === "" ? "0" : e.target.value))}
107-
className="col-span-3"
108-
min={1}
109-
required
110-
/>
126+
<div className="flex items-center gap-2 justify-end">
127+
<Label htmlFor="coinReward">
128+
Cost
129+
</Label>
130+
</div>
131+
<div className="col-span-3">
132+
<div className="flex items-center gap-4">
133+
<div className="flex items-center border rounded-lg overflow-hidden">
134+
<button
135+
type="button"
136+
onClick={() => setCoinCost(prev => Math.max(0, prev - 1))}
137+
className="px-3 py-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors"
138+
>
139+
-
140+
</button>
141+
<Input
142+
id="coinReward"
143+
type="number"
144+
value={coinCost}
145+
onChange={(e) => setCoinCost(parseInt(e.target.value === "" ? "0" : e.target.value))}
146+
min={0}
147+
required
148+
className="w-20 text-center border-0 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
149+
/>
150+
<button
151+
type="button"
152+
onClick={() => setCoinCost(prev => prev + 1)}
153+
className="px-3 py-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors"
154+
>
155+
+
156+
</button>
157+
</div>
158+
<span className="text-sm text-muted-foreground">
159+
coins
160+
</span>
161+
</div>
162+
</div>
163+
</div>
164+
<div className="grid grid-cols-4 items-center gap-4">
165+
<div className="flex items-center gap-2 justify-end">
166+
<Label htmlFor="targetCompletions">
167+
Redeemable
168+
</Label>
169+
</div>
170+
<div className="col-span-3">
171+
<div className="flex items-center gap-4">
172+
<div className="flex items-center border rounded-lg overflow-hidden">
173+
<button
174+
type="button"
175+
onClick={() => setTargetCompletions(prev => prev !== undefined && prev > 1 ? prev - 1 : undefined)}
176+
className="px-3 py-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors"
177+
>
178+
-
179+
</button>
180+
<Input
181+
id="targetCompletions"
182+
type="number"
183+
value={targetCompletions || ''}
184+
onChange={(e) => {
185+
const value = e.target.value
186+
setTargetCompletions(value && value !== "0" ? parseInt(value) : undefined)
187+
}}
188+
min={0}
189+
placeholder="∞"
190+
className="w-20 text-center border-0 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
191+
/>
192+
<button
193+
type="button"
194+
onClick={() => setTargetCompletions(prev => Math.min(10, (prev || 0) + 1))}
195+
className="px-3 py-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors"
196+
>
197+
+
198+
</button>
199+
</div>
200+
<span className="text-sm text-muted-foreground">
201+
times
202+
</span>
203+
</div>
204+
{errors.targetCompletions && (
205+
<div className="text-sm text-red-500">
206+
{errors.targetCompletions}
207+
</div>
208+
)}
209+
</div>
111210
</div>
112211
</div>
113212
<DialogFooter>

‎components/HabitItem.tsx

+51-31
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { settingsAtom, pomodoroAtom, browserSettingsAtom } from '@/lib/atoms'
44
import { getTodayInTimezone, isSameDate, t2d, d2t, getNow, parseNaturalLanguageRRule, parseRRule, d2s } from '@/lib/utils'
55
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
66
import { Button } from '@/components/ui/button'
7-
import { Coins, Edit, Trash2, Check, Undo2, MoreVertical, Timer } from 'lucide-react'
7+
import { Coins, Edit, Trash2, Check, Undo2, MoreVertical, Timer, Archive, ArchiveRestore } from 'lucide-react'
88
import {
99
DropdownMenu,
1010
DropdownMenuContent,
@@ -24,7 +24,7 @@ interface HabitItemProps {
2424
}
2525

2626
export default function HabitItem({ habit, onEdit, onDelete }: HabitItemProps) {
27-
const { completeHabit, undoComplete } = useHabits()
27+
const { completeHabit, undoComplete, archiveHabit, unarchiveHabit } = useHabits()
2828
const [settings] = useAtom(settingsAtom)
2929
const [_, setPomo] = useAtom(pomodoroAtom)
3030
const completionsToday = habit.completions?.filter(completion =>
@@ -59,21 +59,21 @@ export default function HabitItem({ habit, onEdit, onDelete }: HabitItemProps) {
5959
return (
6060
<Card
6161
id={`habit-${habit.id}`}
62-
className={`h-full flex flex-col transition-all duration-500 ${isHighlighted ? 'bg-yellow-100 dark:bg-yellow-900' : ''}`}
62+
className={`h-full flex flex-col transition-all duration-500 ${isHighlighted ? 'bg-yellow-100 dark:bg-yellow-900' : ''} ${habit.archived ? 'opacity-75' : ''}`}
6363
>
6464
<CardHeader className="flex-none">
65-
<CardTitle className="line-clamp-1">{habit.name}</CardTitle>
65+
<CardTitle className={`line-clamp-1 ${habit.archived ? 'text-gray-400 dark:text-gray-500' : ''}`}>{habit.name}</CardTitle>
6666
{habit.description && (
67-
<CardDescription className="whitespace-pre-line">
67+
<CardDescription className={`whitespace-pre-line ${habit.archived ? 'text-gray-400 dark:text-gray-500' : ''}`}>
6868
{habit.description}
6969
</CardDescription>
7070
)}
7171
</CardHeader>
7272
<CardContent className="flex-1">
73-
<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>
73+
<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>
7474
<div className="flex items-center mt-2">
75-
<Coins className="h-4 w-4 text-yellow-400 mr-1" />
76-
<span className="text-sm font-medium">{habit.coinReward} coins per completion</span>
75+
<Coins className={`h-4 w-4 mr-1 ${habit.archived ? 'text-gray-400 dark:text-gray-500' : 'text-yellow-400'}`} />
76+
<span className={`text-sm font-medium ${habit.archived ? 'text-gray-400 dark:text-gray-500' : ''}`}>{habit.coinReward} coins per completion</span>
7777
</div>
7878
</CardContent>
7979
<CardFooter className="flex justify-between gap-2">
@@ -83,8 +83,8 @@ export default function HabitItem({ habit, onEdit, onDelete }: HabitItemProps) {
8383
variant={isCompletedToday ? "secondary" : "default"}
8484
size="sm"
8585
onClick={async () => await completeHabit(habit)}
86-
disabled={isCompletedToday && completionsToday >= target}
87-
className="overflow-hidden w-24 sm:w-auto"
86+
disabled={habit.archived || (isCompletedToday && completionsToday >= target)}
87+
className={`overflow-hidden w-24 sm:w-auto ${habit.archived ? 'cursor-not-allowed' : ''}`}
8888
>
8989
<Check className="h-4 w-4 sm:mr-2" />
9090
<span>
@@ -116,7 +116,7 @@ export default function HabitItem({ habit, onEdit, onDelete }: HabitItemProps) {
116116
)}
117117
</Button>
118118
</div>
119-
{completionsToday > 0 && (
119+
{completionsToday > 0 && !habit.archived && (
120120
<Button
121121
variant="outline"
122122
size="sm"
@@ -129,33 +129,53 @@ export default function HabitItem({ habit, onEdit, onDelete }: HabitItemProps) {
129129
)}
130130
</div>
131131
<div className="flex gap-2">
132-
<Button
133-
variant="edit"
134-
size="sm"
135-
onClick={onEdit}
136-
className="hidden sm:flex"
137-
>
138-
<Edit className="h-4 w-4" />
139-
<span className="ml-2">Edit</span>
140-
</Button>
132+
{!habit.archived && (
133+
<Button
134+
variant="edit"
135+
size="sm"
136+
onClick={onEdit}
137+
className="hidden sm:flex"
138+
>
139+
<Edit className="h-4 w-4" />
140+
<span className="ml-2">Edit</span>
141+
</Button>
142+
)}
141143
<DropdownMenu>
142144
<DropdownMenuTrigger asChild>
143145
<Button variant="ghost" size="sm" className="h-8 w-8 p-0">
144146
<MoreVertical className="h-4 w-4" />
145147
</Button>
146148
</DropdownMenuTrigger>
147149
<DropdownMenuContent align="end">
148-
<DropdownMenuItem onClick={() => {
149-
setPomo((prev) => ({
150-
...prev,
151-
show: true,
152-
selectedHabitId: habit.id
153-
}))
154-
}}>
155-
<Timer className="mr-2 h-4 w-4" />
156-
<span>Start Pomodoro</span>
157-
</DropdownMenuItem>
158-
<DropdownMenuItem onClick={onEdit} className="sm:hidden">
150+
{!habit.archived && (
151+
<DropdownMenuItem onClick={() => {
152+
setPomo((prev) => ({
153+
...prev,
154+
show: true,
155+
selectedHabitId: habit.id
156+
}))
157+
}}>
158+
<Timer className="mr-2 h-4 w-4" />
159+
<span>Start Pomodoro</span>
160+
</DropdownMenuItem>
161+
)}
162+
{!habit.archived && (
163+
<DropdownMenuItem onClick={() => archiveHabit(habit.id)}>
164+
<Archive className="mr-2 h-4 w-4" />
165+
<span>Archive</span>
166+
</DropdownMenuItem>
167+
)}
168+
{habit.archived && (
169+
<DropdownMenuItem onClick={() => unarchiveHabit(habit.id)}>
170+
<ArchiveRestore className="mr-2 h-4 w-4" />
171+
<span>Unarchive</span>
172+
</DropdownMenuItem>
173+
)}
174+
<DropdownMenuItem
175+
onClick={onEdit}
176+
className="sm:hidden"
177+
disabled={habit.archived}
178+
>
159179
<Edit className="mr-2 h-4 w-4" />
160180
Edit
161181
</DropdownMenuItem>

‎components/HabitList.tsx

+26-3
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,11 @@ export default function HabitList() {
1818
const [habitsData, setHabitsData] = useAtom(habitsAtom)
1919
const [browserSettings] = useAtom(browserSettingsAtom)
2020
const isTasksView = browserSettings.viewType === 'tasks'
21-
const habits = habitsData.habits.filter(habit =>
21+
const habits = habitsData.habits.filter(habit =>
2222
isTasksView ? habit.isTask : !habit.isTask
2323
)
24+
const activeHabits = habits.filter(h => !h.archived)
25+
const archivedHabits = habits.filter(h => h.archived)
2426
const [settings] = useAtom(settingsAtom)
2527
const [isModalOpen, setIsModalOpen] = useState(false)
2628
const [editingHabit, setEditingHabit] = useState<Habit | null>(null)
@@ -41,7 +43,7 @@ export default function HabitList() {
4143
</Button>
4244
</div>
4345
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 items-stretch">
44-
{habits.length === 0 ? (
46+
{activeHabits.length === 0 ? (
4547
<div className="col-span-2">
4648
<EmptyState
4749
icon={isTasksView ? TaskIcon : HabitIcon}
@@ -50,7 +52,7 @@ export default function HabitList() {
5052
/>
5153
</div>
5254
) : (
53-
habits.map((habit) => (
55+
activeHabits.map((habit: Habit) => (
5456
<HabitItem
5557
key={habit.id}
5658
habit={habit}
@@ -62,6 +64,27 @@ export default function HabitList() {
6264
/>
6365
))
6466
)}
67+
68+
{archivedHabits.length > 0 && (
69+
<>
70+
<div className="col-span-2 relative flex items-center my-6">
71+
<div className="flex-grow border-t border-gray-300 dark:border-gray-600" />
72+
<span className="mx-4 text-sm text-gray-500 dark:text-gray-400">Archived</span>
73+
<div className="flex-grow border-t border-gray-300 dark:border-gray-600" />
74+
</div>
75+
{archivedHabits.map((habit: Habit) => (
76+
<HabitItem
77+
key={habit.id}
78+
habit={habit}
79+
onEdit={() => {
80+
setEditingHabit(habit)
81+
setIsModalOpen(true)
82+
}}
83+
onDelete={() => setDeleteConfirmation({ isOpen: true, habitId: habit.id })}
84+
/>
85+
))}
86+
</>
87+
)}
6588
</div>
6689
{isModalOpen &&
6790
<AddEditHabitModal

0 commit comments

Comments
 (0)