feat: real-time notifications with GraphQL subscriptions

components/global-navbar.tsx

@@ -5,6 +5,7 @@ import { usePathname } from "next/navigation";
 
 import { SearchCommand } from "@/components/search-command";
 import { NavRankBadge } from "@/components/leaderboard/nav-rank-badge";
+import { NotificationCenter } from "@/components/notifications/notification-center";
 import { WalletSheet } from "@/components/wallet/wallet-sheet";
 import { mockWalletInfo } from "@/lib/mock-wallet";
 import { Button } from "@/components/ui/button";
@@ -61,8 +62,8 @@ export function GlobalNavbar() {
               href="/transparency"
               className={`transition-colors hover:text-foreground/80 ${
                 pathname.startsWith("/transparency")
-                ? "text-foreground"
-                : "text-foreground/60"
+                  ? "text-foreground"
+                  : "text-foreground/60"
               }`}
             >
               Transparency
@@ -94,6 +95,8 @@ export function GlobalNavbar() {
           <NavRankBadge userId="user-1" className="hidden sm:flex" />
           {/* TODO: Replace with actual auth user ID */}
 
+          <NotificationCenter />
+
           <WalletSheet
             walletInfo={mockWalletInfo}
             trigger={

components/notifications/notification-center.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import { formatDistanceToNow } from "date-fns";
+import { Bell, CheckCheck } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+
+import { useNotifications } from "@/hooks/use-notifications";
+
+export function NotificationCenter() {
+  const { notifications, isLoading, unreadCount, markAllAsRead, markAsRead } =
+    useNotifications();
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          size="icon"
+          className="relative"
+          aria-label={`Notifications${unreadCount ? ` (${unreadCount} unread)` : ""}`}
+        >
+          <Bell className="h-4 w-4" />
+          {unreadCount > 0 ? (
+            <span className="absolute -right-1 -top-1 inline-flex min-h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1 text-[10px] font-semibold text-primary-foreground">
+              {unreadCount > 9 ? "9+" : unreadCount}
+            </span>
+          ) : null}
+        </Button>
+      </PopoverTrigger>
+
+      <PopoverContent align="end" className="w-96 p-0">
+        <div className="flex items-center justify-between border-b px-4 py-3">
+          <div>
+            <div className="text-sm font-semibold">Notifications</div>
+            <div className="text-xs text-muted-foreground">
+              Real-time bounty and application activity.
+            </div>
+          </div>
+
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            className="h-8 gap-1 px-2 text-xs"
+            onClick={markAllAsRead}
+            disabled={unreadCount === 0}
+          >
+            <CheckCheck className="h-3.5 w-3.5" />
+            Mark all read
+          </Button>
+        </div>
+
+        <div className="max-h-96 overflow-y-auto">
+          {isLoading ? (
+            <div className="space-y-2 px-4 py-4">
+              <div className="h-4 w-3/4 animate-pulse rounded bg-muted" />
+              <div className="h-4 w-1/2 animate-pulse rounded bg-muted" />
+              <div className="h-4 w-2/3 animate-pulse rounded bg-muted" />
+            </div>
+          ) : notifications.length === 0 ? (
+            <div className="px-4 py-10 text-center text-sm text-muted-foreground">
+              No notifications yet. New activity will appear here instantly.
+            </div>
+          ) : (
+            <div className="divide-y">
+              {notifications.map((notification) => (
+                <button
+                  key={`${notification.type}:${notification.id}`}
+                  type="button"
+                  onClick={() => markAsRead(notification.id, notification.type)}
+                  className={cn(
+                    "block w-full px-4 py-3 text-left transition-colors hover:bg-muted/50",
+                    !notification.read && "bg-primary/5",
+                  )}
+                >
+                  <div className="flex items-start gap-3">
+                    <span
+                      className={cn(
+                        "mt-1 inline-block h-2.5 w-2.5 shrink-0 rounded-full",
+                        notification.read
+                          ? "bg-muted-foreground/40"
+                          : "bg-primary",
+                      )}
+                    />
+
+                    <div className="min-w-0 flex-1">
+                      <div className="text-sm text-foreground">
+                        {notification.message}
+                      </div>
+                      <div className="mt-1 text-xs text-muted-foreground">
+                        {formatDistanceToNow(new Date(notification.timestamp), {
+                          addSuffix: true,
+                        })}
+                      </div>
+                    </div>
+                  </div>
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}