From 537b1b80e52adb20612afa02bde98a3abd5e202a Mon Sep 17 00:00:00 2001
From: "Khoa.vo" <khoa.vo@MBP-C02GM4RQQ05N.local>
Date: Tue, 6 Jan 2026 14:58:14 +0700
Subject: [PATCH] refactor: simplify gallery thumbnail UI

- 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
---
 components/Gallery.tsx | 68 ++----------------------------------------
 1 file changed, 2 insertions(+), 66 deletions(-)

diff --git a/components/Gallery.tsx b/components/Gallery.tsx
index 5a96189..22e07b2 100644
--- a/components/Gallery.tsx
+++ b/components/Gallery.tsx
@@ -339,73 +339,9 @@ export function Gallery() {
                                 <X className="h-4 w-4" />
                             </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">
-                                <p className="text-white text-xs line-clamp-2 mb-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>
+                                <p className="text-white text-xs line-clamp-2">{img.prompt}</p>
                             </div>
                         </motion.div>
                     ))}