feat: social graph features

components/notification-bell.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+/**
+ * NotificationBell — header affordance for signed-in users. Links to the
+ * /notifications page and shows a dot when there are unread items. The
+ * unread count is fetched once on mount (good enough until websocket/push
+ * delivery lands); visiting the page marks everything read.
+ */
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { Bell } from "lucide-react";
+import { notifications } from "@/lib/social";
+
+export function NotificationBell() {
+  const [unread, setUnread] = useState(0);
+
+  useEffect(() => {
+    let cancelled = false;
+    notifications
+      .unreadCount()
+      .then((r) => {
+        if (!cancelled) setUnread(r?.count ?? 0);
+      })
+      .catch(() => {
+        /* badge is non-critical — ignore */
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  return (
+    <Link
+      href="/notifications"
+      aria-label={
+        unread > 0 ? `Notifications (${unread} unread)` : "Notifications"
+      }
+      className="relative size-9 inline-flex items-center justify-center rounded-lg text-foreground hover:bg-muted transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring"
+    >
+      <Bell className="size-5" />
+      {unread > 0 ? (
+        <span className="absolute top-1.5 right-1.5 size-2 rounded-full bg-primary ring-2 ring-background" />
+      ) : null}
+    </Link>
+  );
+}