# apps/web/src/components/features/notification
dir: apps/web/src/components/features/notification

index: apps/web/src/components/features/notification/.pi-map.index.md

## role
Provides the complete notification UI system including toast notifications, notification center dropdown, and individual notification items with user preference filtering.
## files
- event-toast-bridge.test.tsx | Tests the EventToastBridge component's notification preference filtering logic, including toast level settings, category muting, and deduplication behavior. | dep: vitest, @testing-library/react, ./event-toast-bridge, ../../../state/events, ../../../api/settings, ../../toast-rules, ../../../types/events, event-toast-bridge component, useEventContext hook, getUserConfig API, handleEventToast utility
- event-toast-bridge.tsx | Bridges events from an event context to toast notifications with user-configurable filtering by severity and category | exp: func:EventToastBridge() → JSX.Element | null, call:useEventContext, call:useRef, call:useState, call:useEffect, call:getUserConfig() .then((c) => { setConfig({ notification_toast_level: c.notification_toast_level ?? "all", notification_mute_categories: c.notification_mute_categories ?? [], }); }) .catch, call:setConfig, call:window.addEventListener, call:window.removeEventListener, call:processedRef.current.has, call:processedRef.current.add, call:mapEventToCategory, call:mapEventToSeverity, call:config.notification_mute_categories.includes, call:handleEventToast | dep: react, ../../../state/events, ../../toast-rules, ../../../api/settings, useEventContext, toast-rules, settings/api
- notification-center.test.tsx | Tests the NotificationCenter React component's rendering, interactions, and API integration using Vitest and React Testing Library. | dep: vitest, @testing-library/react, ./notification-center, ../../../state/notifications, ../../../api/notifications, notification-center, notification-provider, notifications-api
- notification-center.tsx | Renders a notification bell icon with a dropdown panel for viewing, managing, and dismissing notifications, supporting both desktop and mobile responsive layouts. | exp: func:NotificationCenter({ isMobileTerminal = false, }: NotificationCenterProps), call:useNotifications, call:useMobileViewport, call:useRef, call:useState, call:useCallback, call:bellRef.current.getBoundingClientRect, call:setDropdownStyle, call:useEffect, call:updatePosition, call:dropdownRef.current.contains, call:bellRef.current?.contains, call:setIsDropdownOpen, call:document.addEventListener, call:window.addEventListener, call:document.removeEventListener, call:window.removeEventListener, call:refreshList, call:String, call:createPortal, call:notifications.map, call:markAllRead, call:clearAll | dep: react, react-dom, ../../../hooks/use-notifications, ../../../hooks/use-mobile-viewport, ./notification-item, ../../icon, use-notifications, use-mobile-viewport, notification-item, icon
- notification-item.test.tsx | Tests the NotificationItem React component for rendering, styling, and user interaction behavior. | dep: vitest, @testing-library/react, ./notification-item
- notification-item.tsx | Renders a single notification item with expandable metadata, severity-based icons, read/dismiss actions, and relative time formatting. | exp: NotificationItemProps, func:NotificationItem({ notification, onMarkRead, onDismiss, }: NotificationItemProps), call:useState, call:Object.keys, call:formatRelativeTime, call:Object.entries(notification.metadata).map, call:key.replace, call:formatMetadataValue, call:setExpanded, call:onMarkRead, call:onDismiss | dep: react, ../../icon, ../../../utils/time, ../../../api/notifications, ../../../utils/icons, icon, time utils, notifications API, icons utils
## arch
Component-based React architecture with clear separation of concerns: bridge pattern for event-to-toast translation, compound component pattern for notification center UI, and granular single-responsibility components with comprehensive test coverage.
## tags
event, notification, call:use, toast, listener, react, notifications, item
## symbols
- EventToastBridge
- NotificationCenter
- NotificationItem
- call:useEventContext
- call:useRef
- call:useState
- call:useEffect
- call:getUserConfig() .then((c) => { setConfig({ notification_toast_level: c.notification_toast_level ?? "all", notification_mute_categories: c.notification_mute_categories ?? [], }); }) .catch
## workflows
- change notification behavior
  read: event-toast-bridge.tsx, notification-center.tsx, notification-item.tsx
- update notification tests
  read: event-toast-bridge.test.tsx, notification-center.test.tsx, notification-item.test.tsx
## dirty
-
