Feat/390 activity feed

app/[username]/watch/layout.tsx

@@ -0,0 +1,66 @@
+import type { Metadata } from "next";
+import { sql } from "@vercel/postgres";
+import React from "react";
+
+const BASE = process.env.NEXT_PUBLIC_APP_URL || "https://streamfi.com";
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ username: string }>;
+}): Promise<Metadata> {
+  const { username } = await params;
+
+  let streamTitle = `${username} is live`;
+  let playbackId: string | null = null;
+
+  try {
+    const { rows } = await sql`
+      SELECT mux_playback_id, stream_title
+      FROM users
+      WHERE username = ${username}
+      LIMIT 1
+    `;
+    if (rows[0]) {
+      streamTitle = rows[0].stream_title || streamTitle;
+      playbackId = rows[0].mux_playback_id;
+    }
+  } catch {
+    // fallback to defaults
+  }
+
+  const title = `${streamTitle} — ${username} is live on StreamFi`;
+  const canonical = `${BASE}/${username}/watch`;
+  const ogImage = playbackId
+    ? `https://image.mux.com/${playbackId}/thumbnail.jpg`
+    : `${BASE}/Images/streamFi.png`;
+
+  return {
+    title,
+    description: `Watch ${username} stream live on StreamFi`,
+    alternates: {
+      canonical,
+    },
+    openGraph: {
+      title,
+      description: `Watch ${username} stream live on StreamFi`,
+      url: canonical,
+      images: [{ url: ogImage, width: 1280, height: 720, alt: title }],
+      type: "website",
+    },
+    twitter: {
+      card: "summary_large_image",
+      title,
+      description: `Watch ${username} stream live on StreamFi`,
+      images: [ogImage],
+    },
+  };
+}
+
+export default function WatchLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <>{children}</>;
+}

app/[username]/watch/opengraph-image.tsx

@@ -0,0 +1,158 @@
+import { ImageResponse } from "next/og";
+import { sql } from "@vercel/postgres";
+
+export const runtime = "edge";
+export const alt = "Live stream on StreamFi";
+export const size = { width: 1200, height: 630 };
+export const contentType = "image/png";
+
+export default async function Image({
+  params,
+}: {
+  params: Promise<{ username: string }>;
+}) {
+  const { username } = await params;
+
+  let playbackId: string | null = null;
+  let avatar: string | null = null;
+  let streamTitle = `${username} is live`;
+
+  try {
+    const { rows } = await sql`
+      SELECT avatar, mux_playback_id, stream_title
+      FROM users
+      WHERE username = ${username}
+      LIMIT 1
+    `;
+    if (rows[0]) {
+      avatar = rows[0].avatar;
+      playbackId = rows[0].mux_playback_id;
+      streamTitle = rows[0].stream_title || streamTitle;
+    }
+  } catch {
+    // use defaults
+  }
+
+  const bgImage = playbackId
+    ? `https://image.mux.com/${playbackId}/thumbnail.jpg`
+    : null;
+
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          position: "relative",
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          backgroundColor: "#0f0f0f",
+        }}
+      >
+        {bgImage && (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={bgImage}
+            alt=""
+            style={{
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              height: "100%",
+              objectFit: "cover",
+              opacity: 0.6,
+            }}
+          />
+        )}
+
+        {/* LIVE badge — top-left */}
+        <div
+          style={{
+            position: "absolute",
+            top: 32,
+            left: 32,
+            backgroundColor: "#e53e3e",
+            color: "white",
+            fontSize: 28,
+            fontWeight: 700,
+            padding: "8px 20px",
+            borderRadius: 8,
+            display: "flex",
+          }}
+        >
+          LIVE
+        </div>
+
+        {/* StreamFi wordmark — top-right */}
+        <div
+          style={{
+            position: "absolute",
+            top: 32,
+            right: 32,
+            color: "white",
+            fontSize: 28,
+            fontWeight: 700,
+            display: "flex",
+          }}
+        >
+          StreamFi
+        </div>
+
+        {/* Bottom gradient overlay with streamer info */}
+        <div
+          style={{
+            position: "absolute",
+            bottom: 0,
+            left: 0,
+            right: 0,
+            padding: "60px 32px 44px",
+            background:
+              "linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%)",
+            display: "flex",
+            flexDirection: "column",
+            gap: 10,
+          }}
+        >
+          {/* Avatar + username row */}
+          <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
+            {avatar && (
+              // eslint-disable-next-line @next/next/no-img-element
+              <img
+                src={avatar}
+                alt=""
+                style={{
+                  width: 56,
+                  height: 56,
+                  borderRadius: "50%",
+                  objectFit: "cover",
+                }}
+              />
+            )}
+            <span style={{ color: "white", fontSize: 32, fontWeight: 600 }}>
+              {username}
+            </span>
+          </div>
+
+          {/* Stream title */}
+          <span style={{ color: "#e2e8f0", fontSize: 24, fontWeight: 400 }}>
+            {streamTitle}
+          </span>
+        </div>
+
+        {/* Purple bottom accent line */}
+        <div
+          style={{
+            position: "absolute",
+            bottom: 0,
+            left: 0,
+            right: 0,
+            height: 6,
+            backgroundColor: "#7c3aed",
+            display: "flex",
+          }}
+        />
+      </div>
+    ),
+    { ...size }
+  );
+}

app/[username]/watch/page.tsx

@@ -1,9 +1,10 @@
 "use client";
 
-import { use, useEffect, useState, useRef } from "react";
+import { use, useEffect, useState, useRef, useCallback } from "react";
 import { notFound } from "next/navigation";
 import ViewStream from "@/components/stream/view-stream";
 import { ViewStreamSkeleton } from "@/components/skeletons/ViewStreamSkeleton";
+import { AccessGate } from "@/components/stream/AccessGate";
 import { toast } from "sonner";
 
 interface PageProps {
@@ -23,6 +24,12 @@ interface UserData {
   follower_count: number;
   is_following: boolean;
   stellar_address: string | null;
+  stream_access_type?: string;
+  stream_access_config?: {
+    asset_code: string;
+    asset_issuer: string;
+    min_balance: string;
+  } | null;
 }
 
 const WatchPage = ({ params }: PageProps) => {
@@ -34,6 +41,10 @@ const WatchPage = ({ params }: PageProps) => {
   const [followLoading, setFollowLoading] = useState(false);
   const [loggedInUsername, setLoggedInUsername] = useState<string | null>(null);
 
+  // Access control state
+  const [accessAllowed, setAccessAllowed] = useState<boolean | null>(null);
+  const [accessChecking, setAccessChecking] = useState(false);
+
   // Viewer tracking: one unique ID per page visit
   const viewerSessionId = useRef<string | null>(null);
   const viewerPlaybackId = useRef<string | null>(null);
@@ -43,6 +54,35 @@ const WatchPage = ({ params }: PageProps) => {
     setLoggedInUsername(sessionStorage.getItem("username"));
   }, []);
 
+  const checkAccess = useCallback(async () => {
+    if (!userData) return;
+    // Public streams are always allowed — skip the network call
+    if (!userData.stream_access_type || userData.stream_access_type === "public") {
+      setAccessAllowed(true);
+      return;
+    }
+    setAccessChecking(true);
+    try {
+      const res = await fetch("/api/streams/access/check", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        credentials: "include",
+        body: JSON.stringify({ streamerUsername: username }),
+      });
+      const data = await res.json();
+      setAccessAllowed(data.allowed === true);
+    } catch {
+      // On network failure, fail open rather than lock everyone out
+      setAccessAllowed(true);
+    } finally {
+      setAccessChecking(false);
+    }
+  }, [userData, username]);
+
+  useEffect(() => {
+    checkAccess();
+  }, [checkAccess]);
+
   // Poll user/stream data every 5s
   useEffect(() => {
     let isInitialLoad = true;
@@ -201,6 +241,26 @@ const WatchPage = ({ params }: PageProps) => {
     return notFound();
   }
 
+  // Still waiting for access check result
+  if (accessAllowed === null || (accessChecking && accessAllowed === null)) {
+    return <ViewStreamSkeleton />;
+  }
+
+  // Access denied — show gate
+  if (!accessAllowed && userData.stream_access_config) {
+    return (
+      <div className="flex items-center justify-center min-h-screen p-6 bg-secondary">
+        <div className="w-full max-w-md">
+          <AccessGate
+            isLoading={accessChecking}
+            allowed={accessAllowed ?? false}
+            onRetry={checkAccess}
+          />
+        </div>
+      </div>
+    );
+  }
+
   const isOwner = loggedInUsername?.toLowerCase() === username.toLowerCase();
 
   const transformedUserData = {

app/api/debug/migrate-access-control/route.ts

@@ -0,0 +1,59 @@
+import { NextResponse } from "next/server";
+import { sql } from "@vercel/postgres";
+
+export async function GET() {
+  try {
+    const actions: string[] = [];
+
+    // --- stream_access_config (1 row per streamer) ---
+    await sql`
+      CREATE TABLE IF NOT EXISTS stream_access_config (
+        streamer_id UUID PRIMARY KEY REFERENCES users(id) ON DELETE CASCADE,
+        access_type VARCHAR(32) NOT NULL DEFAULT 'public',
+        config JSONB NOT NULL DEFAULT '{}'::jsonb,
+        updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
+      )
+    `;
+    actions.push("✅ Ensured table: stream_access_config");
+
+    // --- stream_access_grants (viewer grants, includes replay protection) ---
+    await sql`
+      CREATE TABLE IF NOT EXISTS stream_access_grants (
+        id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+        streamer_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+        viewer_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+        access_type VARCHAR(32) NOT NULL,
+        tx_hash VARCHAR(128),
+        amount_usdc VARCHAR(32),
+        created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+        UNIQUE (streamer_id, viewer_id, access_type),
+        UNIQUE (tx_hash)
+      )
+    `;
+    actions.push("✅ Ensured table: stream_access_grants");
+
+    await sql`ALTER TABLE stream_access_grants ADD COLUMN IF NOT EXISTS amount_usdc VARCHAR(32)`;
+    actions.push("✅ Ensured column: stream_access_grants.amount_usdc");
+
+    // Indexes for fast access checks + dashboards
+    await sql`CREATE INDEX IF NOT EXISTS idx_stream_access_grants_streamer ON stream_access_grants(streamer_id)`;
+    actions.push("✅ Ensured index: idx_stream_access_grants_streamer");
+
+    await sql`CREATE INDEX IF NOT EXISTS idx_stream_access_grants_viewer ON stream_access_grants(viewer_id)`;
+    actions.push("✅ Ensured index: idx_stream_access_grants_viewer");
+
+    await sql`CREATE INDEX IF NOT EXISTS idx_stream_access_grants_type ON stream_access_grants(access_type)`;
+    actions.push("✅ Ensured index: idx_stream_access_grants_type");
+
+    await sql`CREATE INDEX IF NOT EXISTS idx_stream_access_config_type ON stream_access_config(access_type)`;
+    actions.push("✅ Ensured index: idx_stream_access_config_type");
+
+    return NextResponse.json({ ok: true, actions });
+  } catch (e) {
+    return NextResponse.json(
+      { ok: false, error: e instanceof Error ? e.message : String(e) },
+      { status: 500 }
+    );
+  }
+}
+

app/api/fetch-username/route.ts

@@ -16,7 +16,13 @@ export async function GET(req: Request) {
   try {
     const result = wallet
       ? await sql`SELECT username FROM users WHERE wallet = ${wallet}`
-      : await sql`SELECT username FROM users WHERE email = ${email}`;
+      : await sql`
+          SELECT u.username 
+          FROM users u
+          LEFT JOIN user_privacy p ON u.id = p.user_id
+          WHERE u.email = ${email} 
+          AND (p.searchable_by_email IS TRUE OR p.searchable_by_email IS NULL)
+        `;
 
     if (result.rows.length === 0) {
       return withCorsResponse({ error: "User not found" }, 404);