v3: follows, notifications, invite-only registration, unread markers

src/components/NotificationBell.tsx

@@ -0,0 +1,50 @@
+import { useEffect, useRef, useState } from "react";
+import { useNavigate } from "react-router";
+import { useWS } from "../hooks/useWS.ts";
+
+export function NotificationBell() {
+  const { unreadNotificationCount, lastNotification } = useWS();
+  const navigate = useNavigate();
+  const [ringing, setRinging] = useState(false);
+  const animatingRef = useRef(false);
+  // Initialised to the ID already in context — so the first effect run never
+  // animates, regardless of whether lastNotification is null or stale.
+  const lastSeenIdRef = useRef<string | null>(lastNotification?.id ?? null);
+
+  useEffect(() => {
+    if (!lastNotification) return;
+    if (lastNotification.id === lastSeenIdRef.current) return;
+    lastSeenIdRef.current = lastNotification.id;
+
+    if (animatingRef.current) return;
+    animatingRef.current = true;
+    setRinging(true);
+    const t = setTimeout(() => {
+      setRinging(false);
+      animatingRef.current = false;
+    }, 700);
+    return () => clearTimeout(t);
+  }, [lastNotification]);
+
+  return (
+    <button
+      type="button"
+      className={`notification-bell${
+        ringing ? " notification-bell--ringing" : ""
+      }`}
+      onClick={() => navigate("/notifications")}
+      aria-label={`Notifications${
+        unreadNotificationCount > 0
+          ? ` (${unreadNotificationCount} unread)`
+          : ""
+      }`}
+    >
+      <span className="notification-bell-icon">🔔</span>
+      {unreadNotificationCount > 0 && (
+        <span className="notification-badge">
+          {unreadNotificationCount > 99 ? "99+" : unreadNotificationCount}
+        </span>
+      )}
+    </button>
+  );
+}