- {data.active_reminders.map((reminder) => (
-
-
-
{reminder.title}
-
- {format(new Date(reminder.remind_at), 'MMM d, h:mm a')}
-
+ {/* Active Reminders — exclude those already shown in alert banner */}
+ {(() => {
+ const alertIds = new Set(alerts.map((a) => a.id));
+ const futureReminders = data.active_reminders.filter((r) => !alertIds.has(r.id));
+ if (futureReminders.length === 0) return null;
+ return (
+
+
+
+
+
- ))}
-
-
-
- )}
+ Active Reminders
+
+
+
+
+ {futureReminders.map((reminder) => (
+
+
+
{reminder.title}
+
+ {format(new Date(reminder.remind_at), 'MMM d, h:mm a')}
+
+
+ ))}
+
+
+ );
+ })()}
{/* Tracked Projects */}
diff --git a/frontend/src/components/layout/AppLayout.tsx b/frontend/src/components/layout/AppLayout.tsx
index bd00f90..2c9f924 100644
--- a/frontend/src/components/layout/AppLayout.tsx
+++ b/frontend/src/components/layout/AppLayout.tsx
@@ -2,11 +2,13 @@ import { useState } from 'react';
import { Outlet } from 'react-router-dom';
import { Menu } from 'lucide-react';
import { useTheme } from '@/hooks/useTheme';
+import { useAlerts } from '@/hooks/useAlerts';
import { Button } from '@/components/ui/button';
import Sidebar from './Sidebar';
export default function AppLayout() {
useTheme();
+ useAlerts();
const [collapsed, setCollapsed] = useState(false);
const [mobileOpen, setMobileOpen] = useState(false);
diff --git a/frontend/src/hooks/useAlerts.tsx b/frontend/src/hooks/useAlerts.tsx
new file mode 100644
index 0000000..b824b5f
--- /dev/null
+++ b/frontend/src/hooks/useAlerts.tsx
@@ -0,0 +1,188 @@
+import { useRef, useEffect, useCallback } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useLocation } from 'react-router-dom';
+import { toast } from 'sonner';
+import api from '@/lib/api';
+import type { Reminder } from '@/types';
+
+const MAX_TOASTS = 3;
+
+export function useAlerts() {
+ const queryClient = useQueryClient();
+ const location = useLocation();
+ const firedRef = useRef
>(new Set());
+ const prevPathnameRef = useRef(location.pathname);
+ const isDashboard = location.pathname === '/' || location.pathname === '/dashboard';
+
+ const { data: alerts = [] } = useQuery({
+ queryKey: ['reminders', 'due'],
+ queryFn: async () => {
+ const { data } = await api.get('/reminders/due');
+ return data;
+ },
+ refetchInterval: 30_000,
+ staleTime: 0,
+ refetchIntervalInBackground: false,
+ refetchOnWindowFocus: true,
+ });
+
+ // Prune firedRef — remove IDs no longer in the response
+ useEffect(() => {
+ const currentIds = new Set(alerts.map((a) => a.id));
+ firedRef.current.forEach((id) => {
+ if (!currentIds.has(id)) {
+ firedRef.current.delete(id);
+ toast.dismiss(`reminder-${id}`);
+ }
+ });
+ }, [alerts]);
+
+ // Handle route changes
+ useEffect(() => {
+ const wasOnDashboard = prevPathnameRef.current === '/' || prevPathnameRef.current === '/dashboard';
+ const nowOnDashboard = isDashboard;
+ prevPathnameRef.current = location.pathname;
+
+ 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
+
+ // Fire toasts for new alerts on non-dashboard pages
+ useEffect(() => {
+ if (isDashboard) return;
+ fireToasts(alerts);
+ }, [alerts, isDashboard]); // eslint-disable-line react-hooks/exhaustive-deps
+
+ function fireToasts(reminders: Reminder[]) {
+ const newAlerts = reminders.filter((a) => !firedRef.current.has(a.id));
+ if (newAlerts.length === 0) return;
+
+ const toShow = newAlerts.slice(0, MAX_TOASTS);
+ const overflow = newAlerts.length - MAX_TOASTS;
+
+ toShow.forEach((reminder) => {
+ firedRef.current.add(reminder.id);
+ toast.custom(
+ (t) => renderToast(t, reminder),
+ { id: `reminder-${reminder.id}`, duration: Infinity }
+ );
+ });
+
+ // Mark remaining as fired to prevent re-firing
+ newAlerts.slice(MAX_TOASTS).forEach((a) => firedRef.current.add(a.id));
+
+ if (overflow > 0) {
+ toast.custom(
+ (t) => renderSummaryToast(t, overflow),
+ { id: 'reminder-summary', duration: Infinity }
+ );
+ }
+ }
+
+ 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
+
+