From 38bce21ac34ff1f8c0d343061b034536aaf1662c Mon Sep 17 00:00:00 2001
From: Kyle Pope <kyle.a.pope@outlook.com>
Date: Tue, 24 Feb 2026 03:24:40 +0800
Subject: [PATCH] Polish toast actions and extend delete confirm timeout

- Toast: snooze/dismiss buttons side-by-side on the right, dismiss
  uses X icon, snooze shows clock icon + 'Snooze' label
- SnoozeDropdown trigger now shows text label alongside icon
- Delete confirm 'Sure?' lingers 4 seconds instead of 2

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../src/components/reminders/ReminderItem.tsx |  2 +-
 .../components/reminders/SnoozeDropdown.tsx   |  3 +-
 frontend/src/components/todos/TodoItem.tsx    |  2 +-
 frontend/src/hooks/useAlerts.tsx              | 32 +++++++++----------
 4 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/reminders/ReminderItem.tsx b/frontend/src/components/reminders/ReminderItem.tsx
index dac840f..960bd06 100644
--- a/frontend/src/components/reminders/ReminderItem.tsx
+++ b/frontend/src/components/reminders/ReminderItem.tsx
@@ -70,7 +70,7 @@ export default function ReminderItem({ reminder, onEdit }: ReminderItemProps) {
   const handleDelete = () => {
     if (!confirmingDelete) {
       setConfirmingDelete(true);
-      setTimeout(() => setConfirmingDelete(false), 2000);
+      setTimeout(() => setConfirmingDelete(false), 4000);
       return;
     }
     deleteMutation.mutate();
diff --git a/frontend/src/components/reminders/SnoozeDropdown.tsx b/frontend/src/components/reminders/SnoozeDropdown.tsx
index 7817a56..abe470d 100644
--- a/frontend/src/components/reminders/SnoozeDropdown.tsx
+++ b/frontend/src/components/reminders/SnoozeDropdown.tsx
@@ -32,9 +32,10 @@ export default function SnoozeDropdown({ onSnooze, label }: SnoozeDropdownProps)
       <button
         onClick={() => setOpen(!open)}
         aria-label={`Snooze "${label}"`}
-        className="p-1 rounded hover:bg-accent/10 hover:text-accent text-muted-foreground transition-colors"
+        className="flex items-center gap-1 px-1.5 py-1 rounded hover:bg-accent/10 hover:text-accent text-muted-foreground transition-colors"
       >
         <Clock className="h-3.5 w-3.5" />
+        <span className="text-[11px] font-medium">Snooze</span>
       </button>
       {open && (
         <div className="absolute right-0 bottom-full mb-1 w-32 rounded-md border bg-popover shadow-lg z-50 py-1 animate-fade-in">
diff --git a/frontend/src/components/todos/TodoItem.tsx b/frontend/src/components/todos/TodoItem.tsx
index bccdcf8..ff5a635 100644
--- a/frontend/src/components/todos/TodoItem.tsx
+++ b/frontend/src/components/todos/TodoItem.tsx
@@ -77,7 +77,7 @@ export default function TodoItem({ todo, onEdit }: TodoItemProps) {
     if (!confirmingDelete) {
       setConfirmingDelete(true);
       // Auto-reset after 2 seconds if not confirmed
-      setTimeout(() => setConfirmingDelete(false), 2000);
+      setTimeout(() => setConfirmingDelete(false), 4000);
       return;
     }
     deleteMutation.mutate();
diff --git a/frontend/src/hooks/useAlerts.tsx b/frontend/src/hooks/useAlerts.tsx
index a2d0b40..b98262e 100644
--- a/frontend/src/hooks/useAlerts.tsx
+++ b/frontend/src/hooks/useAlerts.tsx
@@ -2,7 +2,7 @@ import { createContext, useContext, useRef, useEffect, useCallback, type ReactNo
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useLocation } from 'react-router-dom';
 import { toast } from 'sonner';
-import { Bell } from 'lucide-react';
+import { Bell, X } from 'lucide-react';
 import api from '@/lib/api';
 import { getRelativeTime, toLocalDatetime } from '@/lib/date-utils';
 import SnoozeDropdown from '@/components/reminders/SnoozeDropdown';
@@ -98,26 +98,26 @@ export function AlertsProvider({ children }: { children: ReactNode }) {
   function renderToast(_t: string | number, reminder: Reminder) {
     const timeAgo = reminder.remind_at ? getRelativeTime(reminder.remind_at) : '';
     return (
-      <div className="flex items-start gap-3 bg-card border border-border rounded-lg p-3 shadow-lg w-[356px]">
-        <div className="p-1.5 rounded-md bg-orange-500/10 shrink-0 mt-0.5">
+      <div className="flex items-center gap-3 bg-card border border-border rounded-lg p-3 shadow-lg w-[356px]">
+        <div className="p-1.5 rounded-md bg-orange-500/10 shrink-0">
           <Bell className="h-4 w-4 text-orange-400" />
         </div>
         <div className="flex-1 min-w-0">
           <p className="text-sm font-medium text-foreground truncate">{reminder.title}</p>
           <p className="text-xs text-muted-foreground mt-0.5">{timeAgo}</p>
-          <div className="flex items-center gap-1 mt-2">
-            <SnoozeDropdown
-              onSnooze={(m) => snoozeRef.current(reminder.id, m)}
-              label={reminder.title}
-            />
-            <button
-              onClick={() => dismissRef.current(reminder.id)}
-              aria-label={`Dismiss "${reminder.title}"`}
-              className="ml-auto px-2 py-0.5 rounded text-[11px] bg-secondary hover:bg-card-elevated text-muted-foreground hover:text-foreground transition-colors"
-            >
-              Dismiss
-            </button>
-          </div>
+        </div>
+        <div className="flex items-center gap-1 shrink-0">
+          <SnoozeDropdown
+            onSnooze={(m) => snoozeRef.current(reminder.id, m)}
+            label={reminder.title}
+          />
+          <button
+            onClick={() => dismissRef.current(reminder.id)}
+            aria-label={`Dismiss "${reminder.title}"`}
+            className="p-1 rounded hover:bg-accent/10 hover:text-accent text-muted-foreground transition-colors"
+          >
+            <X className="h-3.5 w-3.5" />
+          </button>
         </div>
       </div>
     );