feat(stls): enlarge candidate images in preview picker

Each loaded candidate gets an enlarge button that opens the ImageLightbox
without changing selection, so the right preview is easier to choose.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/app/(app)/stls/_components/archive-preview-picker.tsx

@@ -7,6 +7,7 @@ import {
   Check,
   AlertCircle,
   ImageOff,
+  Maximize2,
 } from "lucide-react";
 import {
   Dialog,
@@ -20,6 +21,7 @@ import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import { toast } from "sonner";
 import { setPreviewFromExtract } from "../actions";
+import { ImageLightbox } from "./image-lightbox";
 
 interface ArchiveImage {
   id: string;
@@ -65,6 +67,7 @@ export function ArchivePreviewPicker({
   const [thumbnails, setThumbnails] = useState<Map<string, ThumbnailState>>(new Map());
   const [selectedPath, setSelectedPath] = useState<string | null>(null);
   const [isPending, startTransition] = useTransition();
+  const [lightboxSrc, setLightboxSrc] = useState<string | null>(null);
   const pollTimers = useRef<Map<string, ReturnType<typeof setInterval>>>(new Map());
   // Track which paths have already been requested to avoid re-requesting
   const requestedPaths = useRef<Set<string>>(new Set());
@@ -290,12 +293,25 @@ export function ArchivePreviewPicker({
                   const isFailed = thumbState?.status === "failed";
 
                   return (
+                    <div key={img.id} className="group relative">
+                      {isLoaded && thumbState?.imageUrl && (
+                        <button
+                          type="button"
+                          className="absolute top-1.5 left-1.5 z-10 flex h-6 w-6 items-center justify-center rounded-md bg-black/60 text-white opacity-0 transition-opacity hover:bg-black/80 group-hover:opacity-100"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            setLightboxSrc(thumbState.imageUrl!);
+                          }}
+                          title="Enlarge"
+                        >
+                          <Maximize2 className="h-3.5 w-3.5" />
+                        </button>
+                      )}
                       <button
-                      key={img.id}
                         type="button"
                         className={cn(
-                        "relative aspect-square rounded-lg overflow-hidden border-2 transition-all",
-                        "hover:border-primary/50 cursor-pointer group",
+                          "relative aspect-square w-full rounded-lg overflow-hidden border-2 transition-all",
+                          "hover:border-primary/50 cursor-pointer",
                           isSelected
                             ? "border-primary ring-2 ring-primary/30"
                             : "border-border",
@@ -355,6 +371,7 @@ export function ArchivePreviewPicker({
                           </p>
                         </div>
                       </button>
+                    </div>
                   );
                 })}
               </div>
@@ -394,6 +411,13 @@ export function ArchivePreviewPicker({
           </div>
         )}
       </DialogContent>
+      <ImageLightbox
+        src={lightboxSrc}
+        open={!!lightboxSrc}
+        onOpenChange={(open) => {
+          if (!open) setLightboxSrc(null);
+        }}
+      />
     </Dialog>
   );
 }