- {/* Mobile header */}
-
-
-
UMBRA
+
+
+
setCollapsed(!collapsed)}
+ mobileOpen={mobileOpen}
+ onMobileClose={() => setMobileOpen(false)}
+ />
+
+ {/* Mobile header */}
+
+
+
UMBRA
+
+
+
+
+
);
}
diff --git a/frontend/src/hooks/useAlerts.tsx b/frontend/src/hooks/useAlerts.tsx
index b824b5f..62f6881 100644
--- a/frontend/src/hooks/useAlerts.tsx
+++ b/frontend/src/hooks/useAlerts.tsx
@@ -1,13 +1,31 @@
-import { useRef, useEffect, useCallback } from 'react';
+import { createContext, useContext, useRef, useEffect, useCallback, type ReactNode } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { useLocation } from 'react-router-dom';
import { toast } from 'sonner';
+import { Bell } from 'lucide-react';
import api from '@/lib/api';
+import { getRelativeTime } from '@/lib/date-utils';
import type { Reminder } from '@/types';
const MAX_TOASTS = 3;
+interface AlertsContextValue {
+ alerts: Reminder[];
+ dismiss: (id: number) => void;
+ snooze: (id: number, minutes: 5 | 10 | 15) => void;
+}
+
+const AlertsContext = createContext
({
+ alerts: [],
+ dismiss: () => {},
+ snooze: () => {},
+});
+
export function useAlerts() {
+ return useContext(AlertsContext);
+}
+
+export function AlertsProvider({ children }: { children: ReactNode }) {
const queryClient = useQueryClient();
const location = useLocation();
const firedRef = useRef>(new Set());
@@ -37,29 +55,89 @@ export function useAlerts() {
});
}, [alerts]);
- // Handle route changes
- useEffect(() => {
- const wasOnDashboard = prevPathnameRef.current === '/' || prevPathnameRef.current === '/dashboard';
- const nowOnDashboard = isDashboard;
- prevPathnameRef.current = location.pathname;
+ const dismissMutation = useMutation({
+ mutationFn: (id: number) => api.patch(`/reminders/${id}/dismiss`),
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: ['reminders'] });
+ queryClient.invalidateQueries({ queryKey: ['dashboard'] });
+ },
+ });
- if (nowOnDashboard) {
- // Moving TO dashboard — dismiss all toasts, banner takes over
- alerts.forEach((a) => toast.dismiss(`reminder-${a.id}`));
- toast.dismiss('reminder-summary');
- firedRef.current.clear();
- } else if (wasOnDashboard && !nowOnDashboard) {
- // Moving AWAY from dashboard — fire toasts for current alerts
- firedRef.current.clear();
- fireToasts(alerts);
- }
- }, [location.pathname]); // eslint-disable-line react-hooks/exhaustive-deps
+ const snoozeMutation = useMutation({
+ mutationFn: ({ id, minutes }: { id: number; minutes: 5 | 10 | 15 }) =>
+ api.patch(`/reminders/${id}/snooze`, { minutes }),
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: ['reminders'] });
+ queryClient.invalidateQueries({ queryKey: ['dashboard'] });
+ },
+ });
- // Fire toasts for new alerts on non-dashboard pages
- useEffect(() => {
- if (isDashboard) return;
- fireToasts(alerts);
- }, [alerts, isDashboard]); // eslint-disable-line react-hooks/exhaustive-deps
+ const handleDismiss = useCallback((id: number) => {
+ toast.dismiss(`reminder-${id}`);
+ toast.dismiss('reminder-summary');
+ firedRef.current.delete(id);
+ dismissMutation.mutate(id);
+ }, [dismissMutation]);
+
+ const handleSnooze = useCallback((id: number, minutes: 5 | 10 | 15) => {
+ toast.dismiss(`reminder-${id}`);
+ toast.dismiss('reminder-summary');
+ firedRef.current.delete(id);
+ snoozeMutation.mutate({ id, minutes });
+ }, [snoozeMutation]);
+
+ // Store latest callbacks in refs so toast closures always call current versions
+ const dismissRef = useRef(handleDismiss);
+ const snoozeRef = useRef(handleSnooze);
+ useEffect(() => { dismissRef.current = handleDismiss; }, [handleDismiss]);
+ useEffect(() => { snoozeRef.current = handleSnooze; }, [handleSnooze]);
+
+ function renderToast(_t: string | number, reminder: Reminder) {
+ const timeAgo = reminder.remind_at ? getRelativeTime(reminder.remind_at) : '';
+ return (
+
+
+
+
+
+
{reminder.title}
+
{timeAgo}
+
+
+ {[5, 10, 15].map((m) => (
+
+ ))}
+
+
+
+
+
+
+
+
+
+ +{count} more reminder{count > 1 ? 's' : ''} due
+
+
-
-
-
{reminder.title}
-
{timeAgo}
-
-
- {[5, 10, 15].map((m) => (
-
- ))}
-
-
-
-
-
-
-
- +{count} more reminder{count > 1 ? 's' : ''} due
-
-