Add real-time viewer count component and integrate it into stream page; update presence tracking logic with Jazz.

packages/web/src/routes/$username.tsx

@@ -4,6 +4,8 @@ import { getStreamByUsername, type StreamPageData } from "@/lib/stream/db"
 import { VideoPlayer } from "@/components/VideoPlayer"
 import { CloudflareStreamPlayer } from "@/components/CloudflareStreamPlayer"
 import { resolveStreamPlayback } from "@/lib/stream/playback"
+import { JazzProvider } from "@/lib/jazz/provider"
+import { ViewerCount } from "@/components/ViewerCount"
 
 export const Route = createFileRoute("/$username")({
   ssr: false,
@@ -26,7 +28,7 @@ const NIKIV_DATA: StreamPageData = {
     id: "nikiv-stream",
     title: "Live Coding",
     description: "Building in public",
-    is_live: true,
+    is_live: false, // Set to true when actually streaming
     viewer_count: 0,
     hls_url: HLS_URL,
     playback: NIKIV_PLAYBACK,
@@ -149,54 +151,61 @@ function StreamPage() {
     playback?.type === "cloudflare" || (playback?.type === "hls" && streamReady)
 
   return (
-    <div className="h-screen w-screen bg-black">
-      {stream?.is_live && playback && showPlayer ? (
-        playback.type === "cloudflare" ? (
-          <div className="relative h-full w-full">
-            <CloudflareStreamPlayer
-              uid={playback.uid}
-              customerCode={playback.customerCode}
-              muted={false}
-              onReady={() => setStreamReady(true)}
-            />
-            {!streamReady && (
-              <div className="absolute inset-0 flex items-center justify-center text-white">
-                <div className="text-center">
-                  <div className="animate-pulse text-4xl">🔴</div>
-                  <p className="mt-4 text-xl text-neutral-400">
-                    Connecting to stream...
-                  </p>
+    <JazzProvider>
+      <div className="h-screen w-screen bg-black">
+        {/* Viewer count overlay */}
+        <div className="absolute top-4 right-4 z-10 rounded-lg bg-black/50 px-3 py-2 backdrop-blur-sm">
+          <ViewerCount username={username} />
+        </div>
+
+        {stream?.is_live && playback && showPlayer ? (
+          playback.type === "cloudflare" ? (
+            <div className="relative h-full w-full">
+              <CloudflareStreamPlayer
+                uid={playback.uid}
+                customerCode={playback.customerCode}
+                muted={false}
+                onReady={() => setStreamReady(true)}
+              />
+              {!streamReady && (
+                <div className="absolute inset-0 flex items-center justify-center text-white">
+                  <div className="text-center">
+                    <div className="animate-pulse text-4xl">🔴</div>
+                    <p className="mt-4 text-xl text-neutral-400">
+                      Connecting to stream...
+                    </p>
+                  </div>
                 </div>
-              </div>
-            )}
+              )}
+            </div>
+          ) : (
+            <VideoPlayer src={playback.url} muted={false} />
+          )
+        ) : stream?.is_live && playback ? (
+          <div className="flex h-full w-full items-center justify-center text-white">
+            <div className="text-center">
+              <div className="animate-pulse text-4xl">🔴</div>
+              <p className="mt-4 text-xl text-neutral-400">
+                Connecting to stream...
+              </p>
+            </div>
           </div>
         ) : (
-          <VideoPlayer src={playback.url} muted={false} />
-        )
-      ) : stream?.is_live && playback ? (
-        <div className="flex h-full w-full items-center justify-center text-white">
-          <div className="text-center">
-            <div className="animate-pulse text-4xl">🔴</div>
-            <p className="mt-4 text-xl text-neutral-400">
-              Connecting to stream...
-            </p>
+          <div className="flex h-full w-full items-center justify-center text-white">
+            <div className="text-center">
+              <p className="text-2xl font-medium">Streaming soon</p>
+              <a
+                href="https://nikiv.dev"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="mt-4 inline-block text-lg text-neutral-400 underline hover:text-white transition-colors"
+              >
+                nikiv.dev
+              </a>
+            </div>
           </div>
-        </div>
-      ) : (
-        <div className="flex h-full w-full items-center justify-center text-white">
-          <div className="text-center">
-            <p className="text-2xl font-medium">Streaming soon</p>
-            <a
-              href="https://nikiv.dev"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="mt-4 inline-block text-lg text-neutral-400 underline hover:text-white transition-colors"
-            >
-              nikiv.dev
-            </a>
-          </div>
-        </div>
-      )}
-    </div>
+        )}
+      </div>
+    </JazzProvider>
   )
 }

packages/web/src/routes/index.tsx

@@ -1,18 +1,30 @@
 import { createFileRoute } from "@tanstack/react-router"
 import { ShaderBackground } from "@/components/ShaderBackground"
 
+const galleryItems = [
+  { id: 1, image: "https://picsum.photos/seed/linsa1/400/600", title: "Nature" },
+  { id: 2, image: "https://picsum.photos/seed/linsa2/400/600", title: "Urban" },
+  { id: 3, image: "https://picsum.photos/seed/linsa3/400/600", title: "Abstract" },
+  { id: 4, image: "https://picsum.photos/seed/linsa4/400/600", title: "Portrait" },
+  { id: 5, image: "https://picsum.photos/seed/linsa5/400/600", title: "Landscape" },
+  { id: 6, image: "https://picsum.photos/seed/linsa6/400/600", title: "Art" },
+  { id: 7, image: "https://picsum.photos/seed/linsa7/400/600", title: "Design" },
+  { id: 8, image: "https://picsum.photos/seed/linsa8/400/600", title: "Photo" },
+]
+
 function LandingPage() {
   return (
-    <div className="relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-black text-white">
+    <div className="relative min-h-screen overflow-hidden bg-black text-white">
       <ShaderBackground />
-      <div className="relative z-10 flex flex-col items-center">
+
+      {/* Hero Section */}
+      <div className="relative z-10 flex min-h-[60vh] flex-col items-center justify-center">
         <h1 className="text-6xl font-bold tracking-tight drop-shadow-2xl">
           Linsa
         </h1>
         <p className="mt-4 text-xl text-white/80 drop-shadow-lg">
           Save anything privately. Share it.
         </p>
-        <p className="mt-8 text-sm text-white/50">Coming Soon</p>
         <a
           href="https://x.com/linsa_io"
           target="_blank"
@@ -22,6 +34,33 @@ function LandingPage() {
           @linsa_io
         </a>
       </div>
+
+      {/* Gallery Section */}
+      <div className="relative z-10 px-6 pb-12">
+        <div className="mx-auto max-w-7xl">
+          <h2 className="mb-6 text-center text-2xl font-semibold text-white/90">
+            Gallery
+          </h2>
+          <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4">
+            {galleryItems.map((item) => (
+              <div
+                key={item.id}
+                className="group relative aspect-[2/3] overflow-hidden rounded-2xl bg-white/5 transition-all hover:bg-white/10"
+              >
+                <img
+                  src={item.image}
+                  alt={item.title}
+                  className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
+                />
+                <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 transition-opacity group-hover:opacity-100" />
+                <div className="absolute bottom-0 left-0 right-0 p-4 opacity-0 transition-opacity group-hover:opacity-100">
+                  <p className="text-sm font-medium text-white">{item.title}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
     </div>
   )
 }