Rework the metadata modal: fullscreen, inline sections, bigger previews

- near-fullscreen panel (up to 1400px / 92vh) with two independently
  scrolling columns; the left preview uses self-start so its border hugs the
  image instead of stretching to the modal height
- J-ID matches render as a larger tile grid (was 48px rows) and IQDB
  candidates get bigger tiles too
- Link to e621 post and Custom metadata are shown inline instead of behind
  tabs, each with its own heading
- new ThumbImage component: spinner while loading and a broken-image icon on
  error, with alt text removed so a pending tile never reads as 'J-7786'

frontend/src/features/upload/UploadPage.tsx

@@ -1,6 +1,7 @@
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import {
   CheckCircle2,
+  ImageOff,
   ListChecks,
   Trash2,
   UploadCloud,
@@ -310,6 +311,54 @@ function TempCard({
   );
 }
 
+/** Image with a spinner/broken-image placeholder instead of alt-text fallback. */
+function ThumbImage({
+  src,
+  className,
+}: {
+  src: string;
+  className?: string;
+}) {
+  const [loadedSrc, setLoadedSrc] = useState<string | null>(null);
+  const [failedSrc, setFailedSrc] = useState<string | null>(null);
+  // Derived from the current src: no effect needed when it changes.
+  const ready = Boolean(src) && loadedSrc === src;
+  const failed = !src || failedSrc === src;
+
+  return (
+    <span
+      className={cn(
+        "relative block overflow-hidden bg-ctp-surface0/60",
+        className,
+      )}
+    >
+      {src ? (
+        <img
+          src={src}
+          alt=""
+          loading="lazy"
+          onLoad={() => setLoadedSrc(src)}
+          onError={() => setFailedSrc(src)}
+          className={cn(
+            "h-full w-full object-cover transition-opacity duration-200",
+            ready ? "opacity-100" : "opacity-0",
+          )}
+        />
+      ) : null}
+      {!ready && !failed ? (
+        <span className="absolute inset-0 flex items-center justify-center">
+          <Spinner className="h-3.5 w-3.5 text-ctp-overlay0" />
+        </span>
+      ) : null}
+      {failed ? (
+        <span className="absolute inset-0 flex items-center justify-center text-ctp-overlay0">
+          <ImageOff className="h-4 w-4" />
+        </span>
+      ) : null}
+    </span>
+  );
+}
+
 /**
  * A "J-x uploaded" notification.
  *
@@ -378,7 +427,6 @@ function MetadataForm({
 }) {
   const queryClient = useQueryClient();
   const credentials = useE621((state) => state.credentials);
-  const [tab, setTab] = useState<"link" | "custom">("link");
   const [postId, setPostId] = useState("");
   const [selected, setSelected] = useState<E621IqdbCandidate | null>(null);
   const [rating, setRating] = useState<Rating>(temp.custom_rating);
@@ -485,8 +533,8 @@ function MetadataForm({
   }
 
   return (
-    <>
+    <div className="flex min-h-0 flex-1 flex-col">
-      <div className="flex items-start justify-between gap-3">
+      <div className="flex items-start justify-between gap-3 border-b border-ctp-surface0 px-5 py-3">
         <div className="min-w-0">
           <h2 className="text-sm font-semibold text-ctp-subtext1">
             Set metadata
@@ -495,6 +543,12 @@ function MetadataForm({
             {temp.original_filename}
           </p>
         </div>
+        <div className="flex items-center gap-2">
+          {temp.processing ? (
+            <span className="flex items-center gap-1.5 font-mono text-[10px] text-ctp-overlay0">
+              <Spinner className="h-3 w-3" /> working
+            </span>
+          ) : null}
           <button
             type="button"
             onClick={onClose}
@@ -504,22 +558,24 @@ function MetadataForm({
             <X className="h-4 w-4" />
           </button>
         </div>
+      </div>
 
-      <div className="mt-4 grid gap-4 sm:grid-cols-[minmax(0,320px)_minmax(0,1fr)]">
+      <div className="grid min-h-0 flex-1 overflow-y-auto lg:grid-cols-[minmax(0,1fr)_minmax(0,34rem)] lg:overflow-hidden">
-        <div className="w-fit max-w-full overflow-hidden rounded-md border border-ctp-surface0 bg-ctp-mantle">
+        <div className="flex min-w-0 flex-col gap-5 p-5 lg:overflow-y-auto">
+          <div className="w-fit max-w-full self-start overflow-hidden rounded-md border border-ctp-surface0 bg-ctp-mantle">
             {mediaUrl ? (
               isVideo ? (
                 <video
                   src={mediaUrl}
                   controls
                   muted
-                className="block h-auto max-h-[55vh] w-auto max-w-full"
+                  className="block h-auto max-h-[70vh] w-auto max-w-full"
                 />
               ) : (
                 <img
                   src={mediaUrl}
                   alt={temp.original_filename}
-                className="block h-auto max-h-[55vh] w-auto max-w-full"
+                  className="block h-auto max-h-[70vh] w-auto max-w-full"
                 />
               )
             ) : (
@@ -529,57 +585,32 @@ function MetadataForm({
             )}
           </div>
 
-        <div className="flex min-w-0 flex-col gap-3">
-          <div className="flex gap-1.5">
-            <button
-              type="button"
-              onClick={() => setTab("link")}
-              className={cn(
-                "rounded-md px-3 py-1.5 text-sm font-medium transition",
-                tab === "link"
-                  ? "bg-ctp-surface0 text-ctp-text"
-                  : "text-ctp-subtext0 hover:bg-ctp-surface0/60 hover:text-ctp-text",
-              )}
-            >
-              Link to e621 post
-            </button>
-            <button
-              type="button"
-              onClick={() => setTab("custom")}
-              className={cn(
-                "rounded-md px-3 py-1.5 text-sm font-medium transition",
-                tab === "custom"
-                  ? "bg-ctp-surface0 text-ctp-text"
-                  : "text-ctp-subtext0 hover:bg-ctp-surface0/60 hover:text-ctp-text",
-              )}
-            >
-              Custom metadata
-            </button>
-          </div>
-
-          {tab === "link" ? (
-            <div className="flex flex-col gap-3">
           {visualMatches.length > 0 ? (
             <div>
               <p className="text-xs font-medium uppercase tracking-wide text-ctp-overlay1">
                 Already in your library
               </p>
-                  <div className="mt-2 flex flex-col gap-2">
+              <div className="mt-2 grid grid-cols-2 gap-3 sm:grid-cols-3 2xl:grid-cols-4">
                 {visualMatches.map((match) => (
                   <div
                     key={match.j_id}
-                        className="flex items-center gap-3 rounded-md border border-ctp-surface0 bg-ctp-surface0/40 p-2"
+                    className="overflow-hidden rounded-lg border border-ctp-surface0 bg-ctp-surface0/30"
                   >
-                        <img
+                    <Link
+                      to={`/detail/${match.j_id}`}
+                      className="block"
+                      title={match.filename}
+                    >
+                      <ThumbImage
                         src={apiUrl(
                           match.thumbnail_url ??
                             `/api/files/${match.j_id}/thumbnail/`,
                         )}
-                          alt={match.j_id}
+                        className="aspect-square w-full"
-                          loading="lazy"
-                          className="h-12 w-12 shrink-0 rounded object-cover"
                       />
-                        <span className="min-w-0 flex-1">
+                    </Link>
+                    <div className="flex items-center justify-between gap-2 px-2 py-1.5">
+                      <span className="min-w-0">
                         <Link
                           to={`/detail/${match.j_id}`}
                           className="font-mono text-[11px] text-ctp-blue hover:underline"
@@ -587,7 +618,7 @@ function MetadataForm({
                           {match.j_id}
                         </Link>
                         <span
-                            className="block truncate font-mono text-[11px] text-ctp-subtext0"
+                          className="block truncate font-mono text-[10px] text-ctp-overlay0"
                           title={match.filename}
                         >
                           {match.filename}
@@ -597,11 +628,12 @@ function MetadataForm({
                         {match.similarity}%
                       </span>
                     </div>
+                  </div>
                 ))}
               </div>
               <p className="mt-2 text-[11px] text-ctp-overlay0">
-                    This upload looks like it is already in the library — you
+                This upload looks like it is already in the library — you can
-                    can discard it below.
+                discard it below.
               </p>
               <button
                 type="button"
@@ -612,11 +644,13 @@ function MetadataForm({
               </button>
             </div>
           ) : null}
+        </div>
 
+        <div className="flex min-w-0 flex-col gap-5 border-t border-ctp-surface0 p-5 lg:overflow-y-auto lg:border-l lg:border-t-0">
           <div>
             <div className="flex items-center justify-between gap-2">
               <p className="text-xs font-medium uppercase tracking-wide text-ctp-overlay1">
-                    IQDB candidates
+                e621 IQDB candidates
               </p>
               {isVideo ? null : (
                 <button
@@ -645,7 +679,7 @@ function MetadataForm({
               </p>
             ) : iqdbData && iqdbData.length > 0 ? (
               <>
-                    <div className="mt-2 grid grid-cols-3 gap-2">
+                <div className="mt-2 grid grid-cols-2 gap-2 sm:grid-cols-3">
                   {iqdbData.map((candidate) => (
                     <button
                       key={`${candidate.post_id}-${candidate.md5}`}
@@ -661,11 +695,9 @@ function MetadataForm({
                     >
                       <span className="relative block aspect-square overflow-hidden">
                         {candidate.preview_url ? (
-                              <img
+                          <ThumbImage
                             src={candidate.preview_url}
-                                alt={`Post #${candidate.post_id}`}
+                            className="h-full w-full"
-                                loading="lazy"
-                                className="h-full w-full object-cover"
                           />
                         ) : (
                           <span className="flex h-full w-full items-center justify-center text-[10px] text-ctp-overlay0">
@@ -695,14 +727,13 @@ function MetadataForm({
                 </div>
 
                 {selected ? (
-                      <div className="mt-2 rounded-md border border-ctp-surface0 bg-ctp-surface0/40 p-3">
+                  <div className="mt-3 rounded-md border border-ctp-surface0 bg-ctp-surface0/40 p-3">
                     <p className="font-mono text-xs text-ctp-subtext1">
                       Post #{selected.post_id}
                     </p>
                     <p className="mt-1 text-xs text-ctp-overlay0">
                       {selected.rating
-                            ? (RATING_LABELS[selected.rating] ??
+                        ? (RATING_LABELS[selected.rating] ?? selected.rating)
-                              selected.rating)
                         : "Unknown rating"}
                       {selected.score_total !== null &&
                       selected.score_total !== undefined
@@ -744,10 +775,6 @@ function MetadataForm({
                         View post
                       </Link>
                     </div>
-                        <p className="mt-2 text-[11px] text-ctp-overlay0">
-                          Linking downloads the post's file into the library
-                          and drops this staged upload.
-                        </p>
                   </div>
                 ) : null}
               </>
@@ -763,7 +790,11 @@ function MetadataForm({
             )}
           </div>
 
-              <div className="flex gap-2">
+          <div>
+            <p className="text-xs font-medium uppercase tracking-wide text-ctp-overlay1">
+              Link to an e621 post
+            </p>
+            <div className="mt-2 flex gap-2">
               <input
                 className={cn(inputClass, "font-mono")}
                 placeholder="e621 post ID"
@@ -774,9 +805,17 @@ function MetadataForm({
                 Link
               </Button>
             </div>
+            <p className="mt-2 text-[11px] text-ctp-overlay0">
+              Linking downloads the post's file into the library and drops this
+              staged upload.
+            </p>
           </div>
-          ) : (
+
-            <div className="flex flex-col gap-3">
+          <div>
+            <p className="text-xs font-medium uppercase tracking-wide text-ctp-overlay1">
+              Custom metadata
+            </p>
+            <div className="mt-2 flex flex-col gap-3">
               <div className="flex flex-wrap gap-1.5">
                 {ratingChoices.map((choice) => (
                   <button
@@ -810,7 +849,7 @@ function MetadataForm({
                 Save custom metadata
               </Button>
             </div>
-          )}
+          </div>
 
           {error ? <p className="text-xs text-ctp-red">{error}</p> : null}
           {temp.pipeline_error ? (
@@ -825,7 +864,7 @@ function MetadataForm({
           ) : null}
         </div>
       </div>
-    </>
+    </div>
   );
 }
 
@@ -845,11 +884,11 @@ function MetadataModal({
 
   return (
     <div
-      className="fixed inset-0 z-[70] flex items-start justify-center overflow-y-auto bg-ctp-crust/70 px-4 py-10 backdrop-blur-sm"
+      className="fixed inset-0 z-[70] flex items-start justify-center overflow-y-auto bg-ctp-crust/70 px-3 py-6 backdrop-blur-sm"
       onClick={onClose}
     >
       <div
-        className="w-full max-w-2xl rounded-lg border border-ctp-surface1 bg-ctp-base p-5"
+        className="flex max-h-[92vh] w-full max-w-[min(1400px,96vw)] flex-col overflow-hidden rounded-xl border border-ctp-surface1 bg-ctp-base"
         onClick={(event) => event.stopPropagation()}
       >
         {detailQuery.data ? (
@@ -859,11 +898,11 @@ function MetadataModal({
             onClose={onClose}
           />
         ) : detailQuery.isError ? (
-          <p className="text-sm text-ctp-red">
+          <p className="p-5 text-sm text-ctp-red">
             Could not load this upload's details.
           </p>
         ) : (
-          <p className="flex items-center gap-2 text-sm text-ctp-overlay0">
+          <p className="flex items-center gap-2 p-5 text-sm text-ctp-overlay0">
             <Spinner className="h-4 w-4" /> Loading…
           </p>
         )}