feat: add notification bell with activity feed and notification preferences

- New NotificationBell component in topbar showing recent activity - Popover with last 10 activity items from /api/domains/[id]/activity - Notification preferences section in Settings > Shortcuts tab - Preferences persisted to localStorage (pe_notification_prefs) - Toggle switches for task_created, task_completed, habit_logged, comment_added
2026-07-29 19:27:24 +00:00
parent 7ced6f2bf2
commit 9bc571eb69
4 changed files with 207 additions and 3 deletions
@@ -0,0 +1,64 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Switch } from '@/components/ui/switch';
+import { Label } from '@/components/ui/label';
+
+const STORAGE_KEY = 'pe_notification_prefs';
+
+const defaultPrefs: Record<string, boolean> = {
+  task_created: true,
+  task_completed: true,
+  habit_logged: true,
+  comment_added: true,
+};
+
+const prefLabels: Record<string, string> = {
+  task_created: 'Task created',
+  task_completed: 'Task completed',
+  habit_logged: 'Habit logged',
+  comment_added: 'Comment added',
+};
+
+export function NotificationPrefs() {
+  const [prefs, setPrefs] = useState<Record<string, boolean>>(defaultPrefs);
+
+  useEffect(() => {
+    try {
+      const stored = localStorage.getItem(STORAGE_KEY);
+      if (stored) {
+        setPrefs({ ...defaultPrefs, ...JSON.parse(stored) });
+      }
+    } catch {
+      // Ignore parse errors
+    }
+  }, []);
+
+  function toggle(key: string) {
+    const updated = { ...prefs, [key]: !prefs[key] };
+    setPrefs(updated);
+    try {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(updated));
+    } catch {
+      // Storage may be full
+    }
+  }
+
+  return (
+    <div className="space-y-3">
+      {Object.entries(prefLabels).map(([key, label]) => (
+        <div key={key} className="flex items-center justify-between">
+          <Label htmlFor={`notif-${key}`} className="text-sm font-normal">
+            {label}
+          </Label>
+          <Switch
+            id={`notif-${key}`}
+            checked={prefs[key]}
+            onCheckedChange={() => toggle(key)}
+            aria-label={`Toggle ${label}`}
+          />
+        </div>
+      ))}
+    </div>
+  );
+}