feat(web): add notification center (task-31)

- Create NotificationContext with centralized state management
- Add NotificationCenter component with bell icon and dropdown
- Integrate Mantine notifications for toast alerts
- Support notification categories (success, error, info, warning)
- Add mark as read, dismiss, and clear all functionality
- 3-second auto-close per user decision
- Max 50 notifications retained
- Display unread count badge on bell icon

Author: Mearman

apps/web/src/components/layout/MainLayout.tsx

@@ -46,6 +46,7 @@ import { ColorSchemeSelector } from "./ColorSchemeSelector";
 import { HeaderSearchInput } from "./HeaderSearchInput";
 import { HistorySidebar } from "./HistorySidebar";
 import { LeftRibbon } from "./LeftRibbon";
+import { NotificationCenter } from "@/components/notifications/NotificationCenter";
 import { RightRibbon } from "./RightRibbon";
 import { RightSidebarContent } from "./RightSidebarContent";
 // import { ThemeDropdown } from "./ThemeDropdown";
@@ -308,6 +309,7 @@ export const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
 
             {/* Sidebar controls - simplified on mobile */}
             <Group gap="xs" visibleFrom="sm">
+              <NotificationCenter />
               <ActionIcon
                 onClick={toggleLeftSidebar}
                 variant="subtle"

apps/web/src/components/notifications/NotificationCenter.tsx

@@ -0,0 +1,253 @@
+/**
+ * Notification Center Component
+ *
+ * Displays persistent notification center with notification history.
+ * Shows toast-style notifications with mark as read and dismiss functionality.
+ */
+
+import { useNotifications } from '@/contexts/NotificationContext';
+
+import {
+  ActionIcon,
+  Box,
+  Button,
+  Center,
+  Container,
+  Group,
+  Menu,
+  Stack,
+  Text,
+  Title,
+  UnstyledButton,
+  useMantineTheme,
+} from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+import {
+  IconBell,
+  IconBellRinging,
+  IconCheck,
+  IconBellOff,
+  IconX,
+} from '@tabler/icons-react';
+import { memo } from 'react';
+
+import { ICON_SIZE } from '@/config/style-constants';
+
+interface NotificationBellProps {
+  onClick: () => void;
+  unreadCount: number;
+}
+
+const NotificationBell = memo(({ onClick, unreadCount }: NotificationBellProps) => {
+  const theme = useMantineTheme();
+
+  return (
+    <UnstyledButton onClick={onClick} aria-label={`Open notifications (${unreadCount} unread)`}>
+      <Box pos="relative">
+        <ActionIcon
+          variant="subtle"
+          color="gray"
+          size="lg"
+        >
+          {unreadCount > 0 ? <IconBellRinging size={ICON_SIZE.MD} /> : <IconBell size={ICON_SIZE.MD} />}
+        </ActionIcon>
+        {unreadCount > 0 && (
+          <Box
+            pos="absolute"
+            top={-4}
+            right={-4}
+            bg="red"
+            c="white"
+            style={{
+              borderRadius: '9999px',
+              minWidth: 18,
+              height: 18,
+              fontSize: 11,
+              fontWeight: 700,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              border: `2px solid ${theme.colors.gray[0]}`,
+            }}
+          >
+            {unreadCount > 9 ? '9+' : unreadCount}
+          </Box>
+        )}
+      </Box>
+    </UnstyledButton>
+  );
+});
+
+NotificationBell.displayName = 'NotificationBell';
+
+interface NotificationItemProps {
+  notification: {
+    id: string;
+    title: string;
+    message: string;
+    category: string;
+    timestamp: Date;
+    read: boolean;
+  };
+  onMarkAsRead: (id: string) => void;
+  onDismiss: (id: string) => void;
+}
+
+const NotificationItem = memo(({ notification, onMarkAsRead, onDismiss }: NotificationItemProps) => {
+  const formatTime = (date: Date): string => {
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffMins = Math.floor(diffMs / 60000);
+
+    if (diffMins < 1) return 'Just now';
+    if (diffMins < 60) return `${diffMins}m ago`;
+    const diffHours = Math.floor(diffMins / 60);
+    if (diffHours < 24) return `${diffHours}h ago`;
+    const diffDays = Math.floor(diffHours / 24);
+    if (diffDays < 7) return `${diffDays}d ago`;
+    return date.toLocaleDateString();
+  };
+
+  const categoryColors: Record<string, string> = {
+    success: 'teal',
+    error: 'red',
+    warning: 'orange',
+    info: 'blue',
+  };
+
+  return (
+    <UnstyledButton
+      p="sm"
+      style={{
+        borderBottom: '1px solid var(--mantine-color-gray-2)',
+        display: 'block',
+        width: '100%',
+        textAlign: 'left',
+        backgroundColor: notification.read ? 'transparent' : 'var(--mantine-color-blue-0)',
+      }}
+      onClick={() => onMarkAsRead(notification.id)}
+    >
+      <Group gap="sm" wrap="nowrap">
+        <Box
+          style={{
+            width: 8,
+            height: 8,
+            borderRadius: '50%',
+            backgroundColor: `var(--mantine-color-${categoryColors[notification.category]}-6)`,
+            flexShrink: 0,
+            marginTop: 4,
+          }}
+        />
+        <Box style={{ flex: 1, minWidth: 0 }}>
+          <Text size="sm" fw={500} lineClamp={1}>
+            {notification.title}
+          </Text>
+          <Text size="xs" c="dimmed" lineClamp={2}>
+            {notification.message}
+          </Text>
+          <Text size="xs" c="dimmed" mt={4}>
+            {formatTime(notification.timestamp)}
+          </Text>
+        </Box>
+        <ActionIcon
+          size="sm"
+          variant="subtle"
+          color="gray"
+          onClick={(e) => {
+            e.stopPropagation();
+            onDismiss(notification.id);
+          }}
+          aria-label={`Dismiss notification: ${notification.title}`}
+        >
+          <IconX size={ICON_SIZE.XS} />
+        </ActionIcon>
+      </Group>
+    </UnstyledButton>
+  );
+});
+
+NotificationItem.displayName = 'NotificationItem';
+
+export const NotificationCenter = memo(() => {
+  const { notifications: allNotifications, unreadCount, markAsRead, markAllAsRead, dismissNotification, clearAll } = useNotifications();
+  const [opened, { toggle, close }] = useDisclosure(false);
+
+  return (
+    <Menu
+      opened={opened}
+      onChange={toggle}
+      position="bottom-end"
+      offset={12}
+      width={350}
+      shadow="md"
+    >
+      <Menu.Target>
+        <NotificationBell onClick={toggle} unreadCount={unreadCount} />
+      </Menu.Target>
+
+      <Menu.Dropdown p={0}>
+        <Container py="xs" px="sm">
+          <Group justify="space-between" align="center">
+            <Group gap="xs">
+              <Title order={6}>Notifications</Title>
+              {unreadCount > 0 && (
+                <Text size="xs" c="blue" fw={500}>
+                  {unreadCount} new
+                </Text>
+              )}
+            </Group>
+            {allNotifications.length > 0 && (
+              <Group gap="xs">
+                {unreadCount > 0 && (
+                  <Button
+                    size="xs"
+                    variant="subtle"
+                    leftSection={<IconCheck size={ICON_SIZE.XS} />}
+                    onClick={markAllAsRead}
+                  >
+                    Mark all read
+                  </Button>
+                )}
+                <Button
+                  size="xs"
+                  variant="subtle"
+                  color="red"
+                  leftSection={<IconBellOff size={ICON_SIZE.XS} />}
+                  onClick={clearAll}
+                >
+                  Clear all
+                </Button>
+              </Group>
+            )}
+          </Group>
+        </Container>
+
+        {allNotifications.length === 0 ? (
+          <Center p="xl">
+            <Stack align="center" gap="sm">
+              <Box c="dimmed">
+                <IconBell size={ICON_SIZE.EMPTY_STATE_SM} />
+              </Box>
+              <Text size="sm" c="dimmed">
+                No notifications yet
+              </Text>
+            </Stack>
+          </Center>
+        ) : (
+          <Box style={{ maxHeight: 400, overflowY: 'auto' }}>
+            {allNotifications.map((notification) => (
+              <NotificationItem
+                key={notification.id}
+                notification={notification}
+                onMarkAsRead={markAsRead}
+                onDismiss={dismissNotification}
+              />
+            ))}
+          </Box>
+        )}
+      </Menu.Dropdown>
+    </Menu>
+  );
+});
+
+NotificationCenter.displayName = 'NotificationCenter';

apps/web/src/contexts/NotificationContext.tsx

@@ -0,0 +1,121 @@
+/**
+ * Notification Context
+ *
+ * Provides centralized notification state management for the entire application.
+ * Supports toast notifications and persistent notification center.
+ */
+
+import { type NotificationData, notifications } from '@mantine/notifications';
+import React, { createContext, useCallback, useContext, useState } from 'react';
+
+export type NotificationCategory = 'success' | 'error' | 'info' | 'warning';
+
+export interface AppNotification {
+  id: string;
+  title: string;
+  message: string;
+  category: NotificationCategory;
+  timestamp: Date;
+  read: boolean;
+}
+
+interface NotificationContextValue {
+  notifications: AppNotification[];
+  unreadCount: number;
+  showNotification: (notification: {
+    title: string;
+    message: string;
+    category: NotificationCategory;
+  }) => void;
+  markAsRead: (id: string) => void;
+  markAllAsRead: () => void;
+  dismissNotification: (id: string) => void;
+  clearAll: () => void;
+}
+
+const NotificationContext = createContext<NotificationContextValue | null>(null);
+
+const NOTIFICATION_AUTO_CLOSE_MS = 3000; // User decision: 3 seconds
+const MAX_NOTIFICATIONS = 50; // Keep last 50 notifications
+
+export const NotificationProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [appNotifications, setAppNotifications] = useState<AppNotification[]>([]);
+
+  const showNotification = useCallback(
+    ({ title, message, category }: { title: string; message: string; category: NotificationCategory }) => {
+      const id = crypto.randomUUID();
+
+      // Add to persistent list
+      const notification: AppNotification = {
+        id,
+        title,
+        message,
+        category,
+        timestamp: new Date(),
+        read: false,
+      };
+
+      setAppNotifications((prev) => {
+        const updated = [notification, ...prev];
+        // Keep only last MAX_NOTIFICATIONS
+        return updated.slice(0, MAX_NOTIFICATIONS);
+      });
+
+      // Show toast notification
+      const mantelNotification: NotificationData = {
+        id,
+        title,
+        message,
+        color: category === 'error' ? 'red' : category === 'warning' ? 'orange' : category === 'success' ? 'green' : 'blue',
+        autoClose: NOTIFICATION_AUTO_CLOSE_MS,
+      };
+
+      notifications.show(mantelNotification);
+    },
+    []
+  );
+
+  const markAsRead = useCallback((id: string) => {
+    setAppNotifications((prev) =>
+      prev.map((n) => (n.id === id ? { ...n, read: true } : n))
+    );
+  }, []);
+
+  const markAllAsRead = useCallback(() => {
+    setAppNotifications((prev) => prev.map((n) => ({ ...n, read: true })));
+  }, []);
+
+  const dismissNotification = useCallback((id: string) => {
+    setAppNotifications((prev) => prev.filter((n) => n.id !== id));
+  }, []);
+
+  const clearAll = useCallback(() => {
+    setAppNotifications([]);
+  }, []);
+
+  const unreadCount = appNotifications.filter((n) => !n.read).length;
+
+  const value: NotificationContextValue = {
+    notifications: appNotifications,
+    unreadCount,
+    showNotification,
+    markAsRead,
+    markAllAsRead,
+    dismissNotification,
+    clearAll,
+  };
+
+  return (
+    <NotificationContext.Provider value={value}>
+      {children}
+    </NotificationContext.Provider>
+  );
+};
+
+export const useNotifications = (): NotificationContextValue => {
+  const context = useContext(NotificationContext);
+  if (!context) {
+    throw new Error('useNotifications must be used within NotificationProvider');
+  }
+  return context;
+};