feat: add websocket and analytics

app/(app)/notifications/page.tsx

@@ -19,11 +19,13 @@ import Link from "next/link";
 import { Bell } from "lucide-react";
 import { useAuth } from "@/components/auth/auth-provider";
 import { useAuthGate } from "@/components/auth/auth-gate";
+import { useNotifications } from "@/components/notifications/notifications-provider";
 import { notifications, type AppNotification } from "@/lib/social";
 
 export default function NotificationsPage() {
   const { user, loading } = useAuth();
   const { requireAuth } = useAuthGate();
+  const { lastEventAt, clearUnread } = useNotifications();
   const router = useRouter();
 
   const [items, setItems] = useState<AppNotification[]>([]);
@@ -42,7 +44,9 @@ export default function NotificationsPage() {
     };
   }, [loading, user, requireAuth, router]);
 
-  // Load the feed + mark everything read once we have a user.
+  // Load the feed + mark everything read once we have a user, and again
+  // whenever a realtime notification arrives while the page is open
+  // (lastEventAt bumps). Marking read here also clears the header badge.
   useEffect(() => {
     if (!user) return;
     let cancelled = false;
@@ -57,13 +61,16 @@ export default function NotificationsPage() {
       .catch(() => {
         if (!cancelled) setState("error");
       });
-    notifications.markAllRead().catch(() => {
-      /* non-critical */
-    });
+    notifications
+      .markAllRead()
+      .then(() => clearUnread())
+      .catch(() => {
+        /* non-critical */
+      });
     return () => {
       cancelled = true;
     };
-  }, [user]);
+  }, [user, lastEventAt, clearUnread]);
 
   if (loading || !user) {
     return (

app/layout.tsx

@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import Script from "next/script";
 import { Geist, Geist_Mono, Lora, Bricolage_Grotesque } from "next/font/google";
 import { ogDefault } from "@/lib/og";
 import { ThemeProvider } from "@/components/theme-provider";
@@ -6,6 +7,7 @@ import { TooltipProvider } from "@/components/ui/tooltip";
 import { AudioPlayerProvider, FloatingPlayer } from "@/components/audio-player";
 import { AuthProvider } from "@/components/auth/auth-provider";
 import { AuthGateProvider } from "@/components/auth/auth-gate";
+import { NotificationsProvider } from "@/components/notifications/notifications-provider";
 import { SharePostProvider } from "@/components/social/share-post-provider";
 import { Toaster } from "@/components/ui/toaster";
 import "./globals.css";
@@ -73,7 +75,8 @@ export default function RootLayout({
           disableTransitionOnChange
         >
           <AuthProvider>
-            <AuthGateProvider>
+            <NotificationsProvider>
+              <AuthGateProvider>
               <AudioPlayerProvider>
                 <TooltipProvider>
                   <SharePostProvider>
@@ -86,9 +89,18 @@ export default function RootLayout({
                   </SharePostProvider>
                 </TooltipProvider>
               </AudioPlayerProvider>
-            </AuthGateProvider>
+              </AuthGateProvider>
+            </NotificationsProvider>
           </AuthProvider>
         </ThemeProvider>
+        {/* Rybbit analytics — loads after hydration (afterInteractive is
+            next/script's defer-equivalent). Site-wide via the root layout,
+            loaded once across navigations. */}
+        <Script
+          src="https://analytics.krispire.cloud/api/script.js"
+          data-site-id="1"
+          strategy="afterInteractive"
+        />
       </body>
     </html>
   );