From 2430be9661855060b1b793cb3e6e7d4ee75bb636 Mon Sep 17 00:00:00 2001
From: hypercross <helios.tnak@gmail.com>
Date: Fri, 14 Aug 2026 10:46:27 +0800
Subject: [PATCH] feat(web): rework mod page header layout

Show the game name and thumbnail in the header, float the action buttons and object GUID to the right, and keep the viewer icon, label, and GUID on one line.
---
 apps/web/src/pages/ModPage.tsx | 38 +++++++++++++++++++++++-----------
 1 file changed, 26 insertions(+), 12 deletions(-)

diff --git a/apps/web/src/pages/ModPage.tsx b/apps/web/src/pages/ModPage.tsx
index a6b2e9b..31efc2e 100644
--- a/apps/web/src/pages/ModPage.tsx
+++ b/apps/web/src/pages/ModPage.tsx
@@ -41,13 +41,24 @@ export default function ModPage() {
 
   return (
     <div className="space-y-6">
-      <div>
-        <h1 className="text-2xl font-semibold">Mod {id}</h1>
-        <p className="mt-1 text-sm text-zinc-400">
-          {mod.GameMode} · {mod.Date} · {tree.length} objects · {refs.length}{' '}
-          asset refs
-        </p>
-        <div className="mt-3 flex gap-2">
+      <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"
@@ -75,20 +86,23 @@ export default function ModPage() {
         <section className="rounded-lg border border-zinc-800 bg-zinc-900 p-4">
           {selected ? (
             <>
-              <header className="mb-4">
+              <header className="mb-4 flex items-center gap-2">
                 <span
                   title={selected.object.Name}
-                  className="inline-flex items-center gap-1 text-zinc-400"
+                  className="inline-flex shrink-0 items-center gap-1 text-zinc-400"
                 >
                   {iconsForObject(selected.object.Name).map((icon) => (
                     <Icon key={icon} icon={icon} className="h-5 w-5" />
                   ))}
                 </span>
-                <h2 className="mt-1 text-lg font-semibold">{selected.label}</h2>
-                <p className="font-mono text-xs text-zinc-500">
+                <h2 className="min-w-0 flex-1 truncate text-lg font-semibold">
+                  {selected.label}
+                </h2>
+                <span className="shrink-0 font-mono text-xs text-zinc-500">
                   {selected.object.GUID}
-                </p>
+                </span>
               </header>
+
               {Viewer && (
                 <ErrorBoundary>
                   <Suspense