admin/dragonsstash
1
0
Fork 0
mirror of https://github.com/xCyanGrizzly/DragonsStash.git synced 2026-07-22 23:12:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(stls): click-to-enlarge preview in package files drawer

Browse Source 
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>
This commit is contained in:
xCyanGrizzly
2026-06-22 04:48:13 +02:00
parent b90317c007
commit f0a9d3b4da
1 changed files with 11 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/app/(app)/stls/_components/package-files-drawer.tsx
View File

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