From c609e374e77e42d09499d2c801b9a89f60ce8093 Mon Sep 17 00:00:00 2001
From: Kyle Pope <kyle.a.pope@outlook.com>
Date: Tue, 24 Feb 2026 03:16:32 +0800
Subject: [PATCH] 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>
---
 .../src/components/reminders/ReminderItem.tsx | 37 +++++++++++--------
 frontend/src/components/todos/TodoItem.tsx    | 37 +++++++++++--------
 2 files changed, 44 insertions(+), 30 deletions(-)

diff --git a/frontend/src/components/reminders/ReminderItem.tsx b/frontend/src/components/reminders/ReminderItem.tsx
index 93b5473..dac840f 100644
--- a/frontend/src/components/reminders/ReminderItem.tsx
+++ b/frontend/src/components/reminders/ReminderItem.tsx
@@ -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>
   );
 }
diff --git a/frontend/src/components/todos/TodoItem.tsx b/frontend/src/components/todos/TodoItem.tsx
index e31946a..bccdcf8 100644
--- a/frontend/src/components/todos/TodoItem.tsx
+++ b/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>
-      <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>
   );
 }