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

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>

frontend/src/components/reminders/ReminderItem.tsx

@@ -146,21 +146,28 @@ export default function ReminderItem({ reminder, onEdit }: ReminderItemProps) {
         <Pencil 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={confirmingDelete ? 'Confirm delete' : 'Delete reminder'}
+          aria-label="Delete reminder"
           onClick={handleDelete}
           disabled={deleteMutation.isPending}
-        className={cn(
+          className="h-7 w-7 shrink-0 hover:bg-destructive/10 hover:text-destructive"
-          '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>
+      )}
     </div>
   );
 }

frontend/src/components/todos/TodoItem.tsx

@@ -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>
+      {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={confirmingDelete ? 'Confirm delete' : 'Delete todo'}
+          aria-label="Delete todo"
           onClick={handleDelete}
           disabled={deleteMutation.isPending}
-        className={cn(
+          className="h-7 w-7 shrink-0 hover:bg-destructive/10 hover:text-destructive"
-          '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>
+      )}
     </div>
   );
 }