Phase 7

src/features/notifications/components/notification-bell.tsx

@@ -0,0 +1,27 @@
+import Link from "next/link";
+import { Bell } from "lucide-react";
+
+/**
+ * Fixed top-right on every screen inside the shell that renders it (see
+ * StaffShell and (customer)/layout.tsx) — unread count is fetched
+ * server-side by the layout and passed in, not polled client-side, so it
+ * only ever reflects "as of this page load/navigation". Real-time badge
+ * updates without a reload would need a persistent connection this phase
+ * doesn't build (see docs/phase-7-summary.md, "Known limitations").
+ */
+export function NotificationBell({ href, unreadCount }: { href: string; unreadCount: number }) {
+  return (
+    <Link
+      href={href}
+      aria-label={unreadCount > 0 ? `Notifications, ${unreadCount} unread` : "Notifications"}
+      className="fixed top-4 right-4 z-40 flex h-10 w-10 items-center justify-center rounded-full border border-line bg-white shadow-sm"
+    >
+      <Bell className="h-4 w-4" aria-hidden="true" />
+      {unreadCount > 0 && (
+        <span className="bg-danger absolute -top-1 -right-1 flex h-5 min-w-5 items-center justify-center rounded-full px-1 text-[10px] font-bold text-white">
+          {unreadCount > 9 ? "9+" : unreadCount}
+        </span>
+      )}
+    </Link>
+  );
+}