rohskiddo/UMBRA
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Show 'Sure?' text on delete confirmation instead of silent icon change

Browse Source 
Trash icon swaps to a red 'Sure?' label on first click, making the
two-click delete pattern discoverable. Applied to both TodoItem and
ReminderItem. Resets after 2 seconds if not confirmed.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Kyle 2026-02-24 03:16:32 +08:00
parent daf2a4d5f1
commit c609e374e7
2 changed files with 44 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
frontend/src/components/reminders/ReminderItem.tsx
View File

@ -146,21 +146,28 @@ export default function ReminderItem({ reminder, onEdit }: ReminderItemProps) {
<Pencil className="h-3 w-3" />
</Button>
<Button
variant="ghost"
size="icon"
aria-label={confirmingDelete ? 'Confirm delete' : 'Delete reminder'}
onClick={handleDelete}
disabled={deleteMutation.isPending}
className={cn(
'h-7 w-7 shrink-0',
confirmingDelete
? 'bg-destructive/20 text-destructive'
: 'hover:bg-destructive/10 hover:text-destructive'
)}
>
<Trash2 className="h-3 w-3" />
</Button>
{confirmingDelete ? (
<Button
variant="ghost"
aria-label="Confirm delete"
onClick={handleDelete}
disabled={deleteMutation.isPending}
className="h-7 shrink-0 px-2 bg-destructive/20 text-destructive text-[11px] font-medium"
>
Sure?
</Button>
) : (
<Button
variant="ghost"
size="icon"
aria-label="Delete reminder"
onClick={handleDelete}
disabled={deleteMutation.isPending}
className="h-7 w-7 shrink-0 hover:bg-destructive/10 hover:text-destructive"
>
<Trash2 className="h-3 w-3" />
</Button>
)}
</div>
);
}

37
frontend/src/components/todos/TodoItem.tsx
View File

@ -176,21 +176,28 @@ export default function TodoItem({ todo, onEdit }: TodoItemProps) {
<Button variant="ghost" size="icon" onClick={() => onEdit(todo)} className="h-7 w-7 shrink-0" aria-label="Edit todo">
<Pencil className="h-3 w-3" />
</Button>
<Button
variant="ghost"
size="icon"
aria-label={confirmingDelete ? 'Confirm delete' : 'Delete todo'}
onClick={handleDelete}
disabled={deleteMutation.isPending}
className={cn(
'h-7 w-7 shrink-0',
confirmingDelete
? 'bg-destructive/20 text-destructive'
: 'hover:bg-destructive/10 hover:text-destructive'
)}
>
<Trash2 className="h-3 w-3" />
</Button>
{confirmingDelete ? (
<Button
variant="ghost"
aria-label="Confirm delete"
onClick={handleDelete}
disabled={deleteMutation.isPending}
className="h-7 shrink-0 px-2 bg-destructive/20 text-destructive text-[11px] font-medium"
>
Sure?
</Button>
) : (
<Button
variant="ghost"
size="icon"
aria-label="Delete todo"
onClick={handleDelete}
disabled={deleteMutation.isPending}
className="h-7 w-7 shrink-0 hover:bg-destructive/10 hover:text-destructive"
>
<Trash2 className="h-3 w-3" />
</Button>
)}
</div>
);
}