vndangkhoa/apix
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: simplify gallery thumbnail UI
Some checks failed
CI / build (18.x) (push) Has been cancelled
Details
CI / build (20.x) (push) Has been cancelled
Details

Browse source 
- Remove all action buttons from thumbnail overlay
- Keep only provider tag and delete button (X)
- Keep prompt text visible on hover
- All actions (download, video, remix, etc.) now in lightbox
This commit is contained in:
Khoa.vo 2026-01-06 14:58:14 +07:00
parent c2ee01b7b7
commit 537b1b80e5
1 changed files with 2 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
components/Gallery.tsx
View file

@ -339,73 +339,9 @@ export function Gallery() {
<X className="h-4 w-4" /> <X className="h-4 w-4" />
</button> </button>
{/* Overlay */} {/* Hover Overlay - Simplified: just show prompt */}
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex flex-col justify-end p-3 pointer-events-none"> <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex flex-col justify-end p-3 pointer-events-none">
<p className="text-white text-xs line-clamp-2 mb-2">{img.prompt}</p> <p className="text-white text-xs line-clamp-2">{img.prompt}</p>
<div className="flex gap-2 justify-end pointer-events-auto">
<button
onClick={(e) => {
e.stopPropagation();
setPrompt(img.prompt);
navigator.clipboard.writeText(img.prompt);
// Optional: Toast feedback could go here
}}
className="p-1.5 bg-white/10 hover:bg-white/20 rounded-full text-white backdrop-blur-md transition-colors"
title="Use Prompt"
>
<Copy className="h-4 w-4" />
</button>
<a
href={getImageSrc(img.data)}
download={"generated-" + i + "-" + Date.now() + ".png"}
className="p-1.5 bg-white/10 hover:bg-white/20 rounded-full text-white backdrop-blur-md transition-colors"
title="Download"
onClick={(e) => e.stopPropagation()}
>
<Download className="h-4 w-4" />
</a>
{/* Remix button - only for Whisk (base64) images for now */}
{(!img.provider || img.provider === 'whisk') && (
<button
onClick={(e) => {
e.stopPropagation();
openEditModal(img);
}}
className="p-2 bg-gradient-to-br from-amber-500/80 to-purple-600/80 hover:from-amber-500 hover:to-purple-600 rounded-full text-white shadow-lg shadow-purple-900/20 backdrop-blur-md transition-all hover:scale-105 border border-white/10"
title="Remix this image"
>
<Wand2 className="h-4 w-4" />
</button>
)}
{/* Video button - only for 16:9 images AND Whisk provider (base64) */}
{img.aspectRatio === '16:9' && (!img.provider || img.provider === 'whisk') ? (
<button
onClick={(e) => {
e.stopPropagation();
openVideoModal(img);
}}
className="p-2 bg-gradient-to-br from-blue-500/80 to-purple-600/80 hover:from-blue-500 hover:to-purple-600 rounded-full text-white shadow-lg shadow-blue-900/20 backdrop-blur-md transition-all hover:scale-105 border border-white/10"
title="Generate Video"
>
<Film className="h-4 w-4" />
</button>
) : (
<button
disabled
className="p-2 bg-gray-500/30 rounded-full text-white/30 cursor-not-allowed border border-white/5"
title="Video generation requires 16:9 images and Whisk provider"
>
<Film className="h-4 w-4" />
</button>
)}
<button
onClick={(e) => { e.stopPropagation(); setSelectedIndex(i); }}
className="p-1.5 bg-white/10 hover:bg-white/20 rounded-full text-white backdrop-blur-md transition-colors"
title="Maximize"
>
<Maximize2 className="h-4 w-4" />
</button>
</div>
</div> </div>
</motion.div> </motion.div>
))} ))}