feat(phase-18): add in-app notification system (T-128, T-129)

frontend/src/components/NotificationBell.tsx

@@ -0,0 +1,53 @@
+import { useState, useRef, useEffect } from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { Bell } from "lucide-react";
+import { getUnreadCount } from "../api/notifications";
+import NotificationDropdown from "./NotificationDropdown";
+
+export default function NotificationBell() {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+  const queryClient = useQueryClient();
+
+  const { data } = useQuery({
+    queryKey: ["notifications", "unread-count"],
+    queryFn: getUnreadCount,
+    refetchInterval: 30000, // Poll every 30 seconds
+  });
+
+  const count = data?.unread_count ?? 0;
+
+  // Close dropdown on outside click
+  useEffect(() => {
+    function handleClick(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, []);
+
+  return (
+    <div ref={ref} className="relative">
+      <button
+        onClick={() => {
+          setOpen(!open);
+          if (!open) {
+            queryClient.invalidateQueries({ queryKey: ["notifications"] });
+          }
+        }}
+        className="relative rounded-lg p-2 text-gray-400 transition-colors hover:bg-gray-800 hover:text-white"
+      >
+        <Bell className="h-5 w-5" />
+        {count > 0 && (
+          <span className="absolute -right-0.5 -top-0.5 flex h-4 min-w-[16px] items-center justify-center rounded-full bg-red-500 px-1 text-[10px] font-bold text-white">
+            {count > 99 ? "99+" : count}
+          </span>
+        )}
+      </button>
+
+      {open && <NotificationDropdown onClose={() => setOpen(false)} />}
+    </div>
+  );
+}