diff --git a/src/pages/NotificationBell.tsx b/src/pages/NotificationBell.tsx
index 52668e1..d8c2d15 100644
--- a/src/pages/NotificationBell.tsx
+++ b/src/pages/NotificationBell.tsx
@@ -2,9 +2,10 @@
import React from "react"
import { motion } from "framer-motion"
-import { Bell } from "lucide-react"
+import { AlertCircle, Bell, RefreshCw } from "lucide-react"
import { cn } from "@/lib/utils"
import { useReducedMotion } from "@/hooks/useReducedMotion"
+import { ErrorBoundary } from "@/components/error-boundary"
// ---------------------------------------------------------------------------
// Types
@@ -45,6 +46,43 @@ function formatBadgeCount(count: number, max: number): string {
return count > max ? `${max}+` : String(count)
}
+// ---------------------------------------------------------------------------
+// Error fallback (compact, keeps the header/bell slot intact)
+// ---------------------------------------------------------------------------
+
+/**
+ * Compact error fallback shown by the ErrorBoundary when the NotificationBell
+ * throws during render. Keeps the button slot so the header layout doesn't
+ * shift, and offers a Retry action (WCAG 2.1 AA) to reset the boundary.
+ */
+function NotificationBellErrorFallback({
+ onRetry,
+ testId = DEFAULT_TEST_ID,
+}: {
+ onRetry: () => void
+ testId?: string
+}) {
+ return (
+
+ Notification bell error
+
+
+
+ )
+}
+
// ---------------------------------------------------------------------------
// Component
// ---------------------------------------------------------------------------
@@ -64,6 +102,7 @@ function formatBadgeCount(count: number, max: number): string {
* - WCAG 2.1 AA: accessible button, announced count, focus-visible rings
* - Light + dark mode via semantic Tailwind tokens
* - Responsive hit area (min 44×44px at all breakpoints)
+ * - Error-boundary fallback with Retry action if the bell ever throws
*
* ## Accessibility
* - Semantic `