From a3095ead3803196279c061adbecd0fd552ca49de Mon Sep 17 00:00:00 2001
From: hypercross <helios.tnak@gmail.com>
Date: Fri, 14 Aug 2026 10:59:20 +0800
Subject: [PATCH] feat(web): move mod header into site header

Replace the global TTS Workshop header on mod routes with a ModHeader showing the thumbnail, game name, and download/setup links styled like the Search/BGM nav.
---
 apps/web/src/App.tsx                  | 34 +++++++++------
 apps/web/src/components/ModHeader.tsx | 59 +++++++++++++++++++++++++++
 apps/web/src/pages/ModPage.tsx        | 34 ---------------
 3 files changed, 80 insertions(+), 47 deletions(-)
 create mode 100644 apps/web/src/components/ModHeader.tsx

diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx
index 92936cc..0b53aaa 100644
--- a/apps/web/src/App.tsx
+++ b/apps/web/src/App.tsx
@@ -1,7 +1,8 @@
 import { lazy, Suspense } from 'react';
-import { Link, Route, Routes } from 'react-router-dom';
+import { Link, Route, Routes, useLocation } from 'react-router-dom';
 import SearchPage from './pages/SearchPage';
 import ModPage from './pages/ModPage';
+import ModHeader from './components/ModHeader';
 
 // The full-setup view and the bgm/tabletop pages pull in the whole three.js
 // stack (Scene + all mesh viewers + @tts/tabletop). Lazy-load them so that
@@ -18,22 +19,29 @@ const SetupsPage = lazy(() => import('./pages/SetupsPage'));
 const SetupPage = lazy(() => import('./pages/SetupPage'));
 
 export default function App() {
+  const { pathname } = useLocation();
+  const isModRoute = pathname.startsWith('/mod/');
+
   return (
     <div className="min-h-screen bg-zinc-950 text-zinc-100">
       <header className="border-b border-zinc-800">
-        <div className="mx-auto flex max-w-5xl items-center justify-between px-4 py-4">
-          <Link to="/" className="text-lg font-semibold tracking-tight">
-            TTS Workshop
-          </Link>
-          <nav className="flex gap-4 text-sm text-zinc-400">
-            <Link to="/" className="hover:text-zinc-100">
-              Search
+        {isModRoute ? (
+          <ModHeader />
+        ) : (
+          <div className="mx-auto flex max-w-5xl items-center justify-between px-4 py-4">
+            <Link to="/" className="text-lg font-semibold tracking-tight">
+              TTS Workshop
             </Link>
-            <Link to="/bgm" className="hover:text-zinc-100">
-              BGM
-            </Link>
-          </nav>
-        </div>
+            <nav className="flex gap-4 text-sm text-zinc-400">
+              <Link to="/" className="hover:text-zinc-100">
+                Search
+              </Link>
+              <Link to="/bgm" className="hover:text-zinc-100">
+                BGM
+              </Link>
+            </nav>
+          </div>
+        )}
       </header>
       <main className="mx-auto max-w-5xl px-4 py-8">
         <Routes>
diff --git a/apps/web/src/components/ModHeader.tsx b/apps/web/src/components/ModHeader.tsx
new file mode 100644
index 0000000..913c43b
--- /dev/null
+++ b/apps/web/src/components/ModHeader.tsx
@@ -0,0 +1,59 @@
+import { useMemo } from 'react';
+import { Link, useParams } from 'react-router-dom';
+import { buildTree, collectRefs } from '@tts/extract';
+import { useModStore } from '../stores/modStore';
+import { useSearchStore } from '../stores/searchStore';
+import { modFileUrl } from '../api';
+
+/**
+ * Replaces the global site header on the mod page: thumbnail, game name, and
+ * a subheader with the mod id and stats, plus download/setup links styled like
+ * the Search/BGM nav.
+ */
+export default function ModHeader() {
+  const { id } = useParams<{ id: string }>();
+  const { mod } = useModStore();
+  const item = useSearchStore((s) => s.items.find((i) => i.id === id));
+  const tree = useMemo(() => (mod ? buildTree(mod.mod) : []), [mod]);
+  const refs = useMemo(() => (mod ? collectRefs(mod.mod) : []), [mod]);
+  // Prefer the metadata fetched with the save (survives a refresh); fall back
+  // to the search result for the brief moment before the save loads.
+  const title = mod?.title ?? item?.title;
+  const previewImageUrl = mod?.previewImageUrl ?? item?.previewImageUrl;
+
+  return (
+    <div className="mx-auto flex max-w-5xl items-center justify-between gap-4 px-4 py-4">
+      <div className="flex min-w-0 items-center gap-3">
+        {previewImageUrl && (
+          <img
+            src={previewImageUrl}
+            alt={title}
+            className="h-12 w-12 shrink-0 rounded-lg border border-zinc-800 object-cover"
+          />
+        )}
+        <div className="min-w-0">
+          <h1 className="truncate text-lg font-semibold tracking-tight">
+            {title ?? `Mod ${id}`}
+          </h1>
+          {mod && (
+            <p className="truncate text-sm text-zinc-400">
+              <span className="font-mono">{id}</span> · {mod.mod.GameMode} ·{' '}
+              {mod.mod.Date} · {tree.length} objects · {refs.length} asset refs
+            </p>
+          )}
+        </div>
+      </div>
+      <nav className="flex shrink-0 gap-4 text-sm text-zinc-400">
+        <a
+          href={modFileUrl(id!, item?.fileUrl)}
+          className="hover:text-zinc-100"
+        >
+          Download
+        </a>
+        <Link to={`/mod/${id}/setup`} className="hover:text-zinc-100">
+          Setup
+        </Link>
+      </nav>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/pages/ModPage.tsx b/apps/web/src/pages/ModPage.tsx
index 0ac0653..e80a442 100644
--- a/apps/web/src/pages/ModPage.tsx
+++ b/apps/web/src/pages/ModPage.tsx
@@ -4,7 +4,6 @@ import { Link, useParams } from 'react-router-dom';
 import { buildTree, collectRefs } from '@tts/extract';
 import { useModStore } from '../stores/modStore';
 import { useSearchStore } from '../stores/searchStore';
-import { modFileUrl } from '../api';
 import ObjectTree from '../components/ObjectTree';
 import { ErrorBoundary } from '@tts/tabletop';
 import { resolveViewer } from '../components/viewers';
@@ -41,39 +40,6 @@ export default function ModPage() {
 
   return (
     <div className="space-y-6">
-      <div className="flex items-start gap-4">
-        {item?.previewImageUrl && (
-          <img
-            src={item.previewImageUrl}
-            alt={item.title}
-            className="h-20 w-20 shrink-0 rounded-lg border border-zinc-800 object-cover"
-          />
-        )}
-        <div className="min-w-0 flex-1">
-          <h1 className="truncate text-2xl font-semibold">
-            {item?.title ?? `Mod ${id}`}
-          </h1>
-          <p className="mt-1 text-sm text-zinc-400">
-            <span className="font-mono">{id}</span> · {mod.GameMode} ·{' '}
-            {mod.Date} · {tree.length} objects · {refs.length} asset refs
-          </p>
-        </div>
-        <div className="flex shrink-0 gap-2">
-          <a
-            href={modFileUrl(id!, item?.fileUrl)}
-            className="inline-block rounded-lg bg-zinc-100 px-4 py-2 text-sm font-medium text-zinc-900 hover:bg-zinc-300"
-          >
-            Download save file
-          </a>
-          <Link
-            to={`/mod/${id}/setup`}
-            className="inline-block rounded-lg border border-zinc-700 px-4 py-2 text-sm font-medium text-zinc-200 hover:bg-zinc-800"
-          >
-            Full setup
-          </Link>
-        </div>
-      </div>
-
       <div className="grid grid-cols-1 gap-6 lg:grid-cols-[280px_1fr]">
         <aside className="rounded-lg border border-zinc-800 bg-zinc-900 p-2">
           <ObjectTree