feat: chat ux, recording share, and clip og metadata

- fix window.location.replace for live redirect (avoid RSC fetch failure)
- add mobile chat clearance for bottom nav
- extract shared emoji data to lib/emoji-categories.ts (DRY)
- add emoji picker to dashboard stream-manager chat
- increase chat icon spacing
- add fullscreen chat overlay outside-click-to-close on mobile
- move fullscreen collapsed chat button to bottom on mobile
- fix StreamInfo empty src when thumbnail is null
- add share button to clip player page and clips grid cards
- add OG metadata layout and branded opengraph-image for clip detail pages

Author: davedumto

app/[username]/UsernameLayoutClient.tsx

@@ -51,9 +51,11 @@ export default function UsernameLayoutClient({
   const isOwner = loggedInUsername?.toLowerCase() === username.toLowerCase();
 
   // When the user visits /{username} and they're live, redirect to the canonical watch URL.
+  // Use window.location to avoid the RSC fetch that router.replace() triggers, which can
+  // fail with "Failed to fetch" when Turbopack hasn't compiled the route yet.
   useEffect(() => {
     if (isDefaultRoute && isLive === true) {
-      router.replace(`/${username}/watch`);
+      window.location.replace(`/${username}/watch`);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isDefaultRoute, isLive, username]);

app/[username]/clips/[id]/layout.tsx

@@ -0,0 +1,65 @@
+import type { Metadata } from "next";
+import type { ReactNode } from "react";
+import { sql } from "@vercel/postgres";
+
+const BASE = "https://www.streamfi.media";
+
+interface Props {
+  children: ReactNode;
+  params: Promise<{ username: string; id: string }>;
+}
+
+export async function generateMetadata({
+  params,
+}: Props): Promise<Metadata> {
+  const { username, id } = await params;
+
+  try {
+    const { rows } = await sql`
+      SELECT r.playback_id, r.title, u.avatar, u.bio
+      FROM stream_recordings r
+      JOIN users u ON u.id = r.user_id
+      WHERE r.id = ${id} AND r.status = 'ready'
+      LIMIT 1
+    `;
+    const rec = rows[0];
+    if (!rec) {
+      return { title: `${username} – StreamFi` };
+    }
+
+    const recTitle: string = rec.title ?? `${username}'s Past Stream`;
+    const description: string =
+      rec.bio?.trim() || `Watch ${username}'s past stream on StreamFi.`;
+    const pageUrl = `${BASE}/${username}/clips/${id}`;
+
+    // Use Mux thumbnail as the OG image — real video frame, best for sharing
+    const thumbUrl = `https://image.mux.com/${rec.playback_id}/thumbnail.jpg?width=1280&height=720&fit_mode=smartcrop`;
+
+    const images = [{ url: thumbUrl, width: 1280, height: 720, alt: recTitle }];
+
+    return {
+      title: `${recTitle} – ${username} | StreamFi`,
+      description,
+      alternates: { canonical: pageUrl },
+      openGraph: {
+        title: `${recTitle} – ${username}`,
+        description,
+        url: pageUrl,
+        type: "video.other",
+        images,
+      },
+      twitter: {
+        card: "summary_large_image",
+        title: `${recTitle} – ${username}`,
+        description,
+        images: [thumbUrl],
+      },
+    };
+  } catch {
+    return { title: `${username} – StreamFi` };
+  }
+}
+
+export default function ClipLayout({ children }: Props) {
+  return <>{children}</>;
+}

app/[username]/clips/[id]/opengraph-image.tsx

@@ -0,0 +1,208 @@
+import { ImageResponse } from "next/og";
+import { sql } from "@vercel/postgres";
+
+export const runtime = "nodejs";
+export const contentType = "image/png";
+export const size = { width: 1200, height: 630 };
+
+interface Props {
+  params: Promise<{ username: string; id: string }>;
+}
+
+export default async function Image({ params }: Props) {
+  const { username, id } = await params;
+
+  let playbackId: string | null = null;
+  let recTitle: string | null = null;
+  let avatarUrl: string | null = null;
+  let displayName = username;
+
+  try {
+    const { rows } = await sql`
+      SELECT r.playback_id, r.title, u.username, u.avatar
+      FROM stream_recordings r
+      JOIN users u ON u.id = r.user_id
+      WHERE r.id = ${id} AND r.status = 'ready'
+      LIMIT 1
+    `;
+    const rec = rows[0];
+    if (rec) {
+      playbackId = rec.playback_id ?? null;
+      recTitle = rec.title ?? null;
+      avatarUrl = rec.avatar ?? null;
+      displayName = rec.username ?? username;
+    }
+  } catch {
+    // Fall through to defaults
+  }
+
+  const thumbUrl = playbackId
+    ? `https://image.mux.com/${playbackId}/thumbnail.jpg?width=1200&height=630&fit_mode=smartcrop`
+    : null;
+
+  const title = recTitle ?? `${displayName}'s Past Stream`;
+
+  return new ImageResponse(
+    <div
+      style={{
+        width: "1200px",
+        height: "630px",
+        display: "flex",
+        position: "relative",
+        fontFamily: "sans-serif",
+        overflow: "hidden",
+        background: "#07060f",
+      }}
+    >
+      {/* Mux video thumbnail as full background */}
+      {thumbUrl && (
+        // eslint-disable-next-line @next/next/no-img-element
+        <img
+          src={thumbUrl}
+          alt=""
+          width={1200}
+          height={630}
+          style={{
+            position: "absolute",
+            inset: 0,
+            width: "100%",
+            height: "100%",
+            objectFit: "cover",
+          }}
+        />
+      )}
+
+      {/* Dark gradient overlay — bottom-heavy so text stays readable */}
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          background:
+            "linear-gradient(to top, rgba(7,6,15,0.95) 0%, rgba(7,6,15,0.5) 50%, rgba(7,6,15,0.15) 100%)",
+          display: "flex",
+        }}
+      />
+
+      {/* Purple glow accent */}
+      <div
+        style={{
+          position: "absolute",
+          bottom: 0,
+          left: 0,
+          width: "100%",
+          height: "60%",
+          background:
+            "radial-gradient(ellipse at 20% 100%, rgba(172,57,242,0.2) 0%, transparent 60%)",
+          display: "flex",
+        }}
+      />
+
+      {/* Content anchored to bottom-left */}
+      <div
+        style={{
+          position: "absolute",
+          bottom: "50px",
+          left: "60px",
+          right: "60px",
+          display: "flex",
+          flexDirection: "column",
+          gap: "0px",
+        }}
+      >
+        {/* Streamer row */}
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: "16px",
+            marginBottom: "16px",
+          }}
+        >
+          {avatarUrl ? (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img
+              src={avatarUrl}
+              alt={displayName}
+              width={56}
+              height={56}
+              style={{
+                borderRadius: "50%",
+                border: "2.5px solid #ac39f2",
+                objectFit: "cover",
+              }}
+            />
+          ) : (
+            <div
+              style={{
+                width: "56px",
+                height: "56px",
+                borderRadius: "50%",
+                background: "#ac39f2",
+                border: "2.5px solid #ac39f2",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                fontSize: "24px",
+                fontWeight: "700",
+                color: "white",
+              }}
+            >
+              {displayName.charAt(0).toUpperCase()}
+            </div>
+          )}
+          <span
+            style={{
+              fontSize: "28px",
+              fontWeight: "600",
+              color: "rgba(255,255,255,0.85)",
+            }}
+          >
+            {displayName}
+          </span>
+        </div>
+
+        {/* Recording title */}
+        <div
+          style={{
+            fontSize: "46px",
+            fontWeight: "800",
+            color: "white",
+            lineHeight: "1.15",
+            display: "flex",
+          }}
+        >
+          {title.length > 60 ? title.slice(0, 57) + "…" : title}
+        </div>
+      </div>
+
+      {/* StreamFi wordmark */}
+      <div
+        style={{
+          position: "absolute",
+          top: "44px",
+          right: "56px",
+          fontSize: "22px",
+          fontWeight: "700",
+          color: "#ac39f2",
+          display: "flex",
+        }}
+      >
+        StreamFi
+      </div>
+
+      {/* Bottom purple line */}
+      <div
+        style={{
+          position: "absolute",
+          bottom: 0,
+          left: 0,
+          width: "100%",
+          height: "4px",
+          background: "linear-gradient(90deg, #ac39f2 0%, #7c3aed 100%)",
+          display: "flex",
+        }}
+      />
+    </div>,
+    { ...size }
+  );
+}

app/[username]/clips/[id]/page.tsx

@@ -4,7 +4,7 @@ import { use, useState, useEffect } from "react";
 import { notFound } from "next/navigation";
 import Link from "next/link";
 import Image from "next/image";
-import { ArrowLeft, Clock, Calendar, Users } from "lucide-react";
+import { ArrowLeft, Clock, Calendar, Users, Share2 } from "lucide-react";
 import MuxPlayer from "@/components/MuxPlayerLazy";
 import { Button } from "@/components/ui/button";
 import { toast } from "sonner";
@@ -144,6 +144,15 @@ const ClipPlayerPage = ({ params }: PageProps) => {
     }
   };
 
+  const handleShare = async () => {
+    try {
+      await navigator.clipboard.writeText(window.location.href);
+      toast.success("Link copied to clipboard");
+    } catch {
+      toast.error("Could not copy link");
+    }
+  };
+
   const handleUnfollow = async () => {
     if (!loggedInUsername) {
       toast.error("You must be logged in to unfollow.");
@@ -268,19 +277,31 @@ const ClipPlayerPage = ({ params }: PageProps) => {
                   </div>
                 </div>
 
-                {!isOwner && (
+                <div className="flex items-center gap-2 flex-shrink-0">
+                  {!isOwner && (
+                    <Button
+                      className={
+                        isFollowing
+                          ? "bg-muted hover:bg-accent text-foreground border-none"
+                          : "bg-highlight hover:bg-highlight/90 text-white border-none"
+                      }
+                      onClick={isFollowing ? handleUnfollow : handleFollow}
+                      disabled={followLoading}
+                    >
+                      {followLoading ? "…" : isFollowing ? "Unfollow" : "Follow"}
+                    </Button>
+                  )}
                   <Button
-                    className={
-                      isFollowing
-                        ? "bg-muted hover:bg-accent text-foreground border-none flex-shrink-0"
-                        : "bg-highlight hover:bg-highlight/90 text-white border-none flex-shrink-0"
-                    }
-                    onClick={isFollowing ? handleUnfollow : handleFollow}
-                    disabled={followLoading}
+                    variant="outline"
+                    size="icon"
+                    onClick={handleShare}
+                    aria-label="Share recording"
+                    title="Copy link"
+                    className="bg-transparent border border-border hover:bg-accent text-foreground"
                   >
-                    {followLoading ? "…" : isFollowing ? "Unfollow" : "Follow"}
+                    <Share2 className="w-4 h-4" />
                   </Button>
-                )}
+                </div>
               </div>
             </div>