From f0a9d3b4da540872295bdb409cbf672bdc092036 Mon Sep 17 00:00:00 2001
From: xCyanGrizzly <sam.agsteribbe@hotmail.com>
Date: Mon, 22 Jun 2026 04:48:13 +0200
Subject: [PATCH] feat(stls): click-to-enlarge preview in package files drawer

The drawer preview image opens the ImageLightbox; replacing the image
stays available via the existing Upload/Pick Preview buttons. No-preview
upload affordance unchanged.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../stls/_components/package-files-drawer.tsx | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/app/(app)/stls/_components/package-files-drawer.tsx b/src/app/(app)/stls/_components/package-files-drawer.tsx
index cf434a9..71230b2 100644
--- a/src/app/(app)/stls/_components/package-files-drawer.tsx
+++ b/src/app/(app)/stls/_components/package-files-drawer.tsx
@@ -13,6 +13,7 @@ import {
   Upload,
   ImagePlus,
   Images,
+  Maximize2,
 } from "lucide-react";
 import {
   Dialog,
@@ -30,6 +31,7 @@ import type { PackageRow } from "./package-columns";
 import { SendToTelegramButton } from "./send-to-telegram-button";
 import { uploadPackagePreview } from "../actions";
 import { ArchivePreviewPicker } from "./archive-preview-picker";
+import { ImageLightbox } from "./image-lightbox";
 
 interface FileItem {
   id: string;
@@ -264,6 +266,7 @@ export function PackageFilesDrawer({ pkg, open, onOpenChange, highlightTerm }: P
   const [uploading, setUploading] = useState(false);
   const [localPreviewUrl, setLocalPreviewUrl] = useState<string | null>(null);
   const [showPreviewPicker, setShowPreviewPicker] = useState(false);
+  const [previewLightboxOpen, setPreviewLightboxOpen] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
   const handlePreviewUpload = useCallback(
@@ -384,9 +387,8 @@ export function PackageFilesDrawer({ pkg, open, onOpenChange, highlightTerm }: P
               <button
                 type="button"
                 className="relative group h-20 w-20 shrink-0 rounded-lg overflow-hidden bg-muted"
-                onClick={() => fileInputRef.current?.click()}
-                disabled={uploading}
-                title="Click to replace preview image"
+                onClick={() => setPreviewLightboxOpen(true)}
+                title="Click to enlarge"
               >
                 <img
                   src={localPreviewUrl ?? `/api/zips/${pkg!.id}/preview`}
@@ -394,11 +396,7 @@ export function PackageFilesDrawer({ pkg, open, onOpenChange, highlightTerm }: P
                   className="h-full w-full object-cover"
                 />
                 <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
-                  {uploading ? (
-                    <Loader2 className="h-5 w-5 text-white animate-spin" />
-                  ) : (
-                    <Upload className="h-5 w-5 text-white" />
-                  )}
+                  <Maximize2 className="h-5 w-5 text-white" />
                 </div>
               </button>
             ) : (
@@ -582,6 +580,11 @@ export function PackageFilesDrawer({ pkg, open, onOpenChange, highlightTerm }: P
         }}
       />
     )}
+    <ImageLightbox
+      src={pkg ? (localPreviewUrl ?? `/api/zips/${pkg.id}/preview`) : null}
+      open={previewLightboxOpen}
+      onOpenChange={setPreviewLightboxOpen}
+    />
     </>
   );
 }