diff --git a/src/app/(app)/stls/_components/archive-preview-picker.tsx b/src/app/(app)/stls/_components/archive-preview-picker.tsx index 3babe7c..7cdacdf 100644 --- a/src/app/(app)/stls/_components/archive-preview-picker.tsx +++ b/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>(new Map()); const [selectedPath, setSelectedPath] = useState(null); const [isPending, startTransition] = useTransition(); + const [lightboxSrc, setLightboxSrc] = useState(null); const pollTimers = useRef>>(new Map()); // Track which paths have already been requested to avoid re-requesting const requestedPaths = useRef>(new Set()); @@ -290,71 +293,85 @@ export function ArchivePreviewPicker({ const isFailed = thumbState?.status === "failed"; return ( - )} + + {/* File info overlay */} +
+

+ {img.fileName} +

+

+ {formatBytes(img.size)} +

+
+ + ); })} @@ -394,6 +411,13 @@ export function ArchivePreviewPicker({ )} + { + if (!open) setLightboxSrc(null); + }} + /> ); }