From 89b4bd487055ba1eac34c2bb4b56958c5ad6f0c0 Mon Sep 17 00:00:00 2001
From: Kyle Pope <kyle.a.pope@outlook.com>
Date: Tue, 24 Feb 2026 01:09:17 +0800
Subject: [PATCH] Replace snooze button group with clock icon dropdown

Single clock icon opens a dropdown with 5/10/15 min options instead
of three inline buttons. Shared SnoozeDropdown component used in
both AlertBanner and toast notifications.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../src/components/dashboard/AlertBanner.tsx  | 14 +----
 .../components/reminders/SnoozeDropdown.tsx   | 54 +++++++++++++++++++
 frontend/src/hooks/useAlerts.tsx              | 19 +++----
 3 files changed, 62 insertions(+), 25 deletions(-)
 create mode 100644 frontend/src/components/reminders/SnoozeDropdown.tsx

diff --git a/frontend/src/components/dashboard/AlertBanner.tsx b/frontend/src/components/dashboard/AlertBanner.tsx
index bd86cc1..a511259 100644
--- a/frontend/src/components/dashboard/AlertBanner.tsx
+++ b/frontend/src/components/dashboard/AlertBanner.tsx
@@ -1,5 +1,6 @@
 import { Bell, X } from 'lucide-react';
 import { getRelativeTime } from '@/lib/date-utils';
+import SnoozeDropdown from '@/components/reminders/SnoozeDropdown';
 import type { Reminder } from '@/types';
 
 interface AlertBannerProps {
@@ -33,18 +34,7 @@ export default function AlertBanner({ alerts, onDismiss, onSnooze }: AlertBanner
             <span className="text-[11px] text-muted-foreground shrink-0 whitespace-nowrap">
               {alert.remind_at ? getRelativeTime(alert.remind_at) : ''}
             </span>
-            <div className="flex items-center gap-0.5 text-[11px] shrink-0">
-              {([5, 10, 15] as const).map((m) => (
-                <button
-                  key={m}
-                  onClick={() => onSnooze(alert.id, m)}
-                  aria-label={`Snooze "${alert.title}" for ${m} minutes`}
-                  className="px-1.5 py-0.5 rounded bg-secondary hover:bg-accent/10 hover:text-accent text-muted-foreground transition-colors"
-                >
-                  {m}m
-                </button>
-              ))}
-            </div>
+            <SnoozeDropdown onSnooze={(m) => onSnooze(alert.id, m)} label={alert.title} />
             <button
               onClick={() => onDismiss(alert.id)}
               aria-label={`Dismiss "${alert.title}"`}
diff --git a/frontend/src/components/reminders/SnoozeDropdown.tsx b/frontend/src/components/reminders/SnoozeDropdown.tsx
new file mode 100644
index 0000000..7817a56
--- /dev/null
+++ b/frontend/src/components/reminders/SnoozeDropdown.tsx
@@ -0,0 +1,54 @@
+import { useState, useRef, useEffect } from 'react';
+import { Clock } from 'lucide-react';
+
+interface SnoozeDropdownProps {
+  onSnooze: (minutes: 5 | 10 | 15) => void;
+  label: string;
+}
+
+const OPTIONS: { value: 5 | 10 | 15; label: string }[] = [
+  { value: 5, label: '5 minutes' },
+  { value: 10, label: '10 minutes' },
+  { value: 15, label: '15 minutes' },
+];
+
+export default function SnoozeDropdown({ onSnooze, label }: SnoozeDropdownProps) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    function handleClick(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClick);
+    return () => document.removeEventListener('mousedown', handleClick);
+  }, [open]);
+
+  return (
+    <div className="relative" ref={ref}>
+      <button
+        onClick={() => setOpen(!open)}
+        aria-label={`Snooze "${label}"`}
+        className="p-1 rounded hover:bg-accent/10 hover:text-accent text-muted-foreground transition-colors"
+      >
+        <Clock className="h-3.5 w-3.5" />
+      </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">
+          {OPTIONS.map((opt) => (
+            <button
+              key={opt.value}
+              onClick={() => { onSnooze(opt.value); setOpen(false); }}
+              className="flex items-center w-full px-3 py-1.5 text-xs hover:bg-card-elevated transition-colors text-muted-foreground hover:text-foreground"
+            >
+              {opt.label}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/hooks/useAlerts.tsx b/frontend/src/hooks/useAlerts.tsx
index c66d920..5705b0e 100644
--- a/frontend/src/hooks/useAlerts.tsx
+++ b/frontend/src/hooks/useAlerts.tsx
@@ -5,6 +5,7 @@ import { toast } from 'sonner';
 import { Bell } from 'lucide-react';
 import api from '@/lib/api';
 import { getRelativeTime } from '@/lib/date-utils';
+import SnoozeDropdown from '@/components/reminders/SnoozeDropdown';
 import type { Reminder } from '@/types';
 
 const MAX_TOASTS = 3;
@@ -102,19 +103,11 @@ export function AlertsProvider({ children }: { children: ReactNode }) {
         <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.5 mt-2">
-            <div className="flex items-center gap-0.5 text-[11px]">
-              {[5, 10, 15].map((m) => (
-                <button
-                  key={m}
-                  onClick={() => snoozeRef.current(reminder.id, m as 5 | 10 | 15)}
-                  aria-label={`Snooze "${reminder.title}" for ${m} minutes`}
-                  className="px-1.5 py-0.5 rounded bg-secondary hover:bg-card-elevated text-muted-foreground hover:text-foreground transition-colors"
-                >
-                  {m}m
-                </button>
-              ))}
-            </div>
+          <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}"`}