From 5868be5f931d88e6afb138cd5ab8a9080f569bf8 Mon Sep 17 00:00:00 2001
From: Kagamine Rin <rin.kagamine@captcouch.xyz>
Date: Fri, 29 May 2026 19:55:06 -0400
Subject: [PATCH] fix: Move album art upload button out of ribbon thumbnail
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Ribbon view artwork hover now shows only play button (larger, cleaner).
Upload art button moved to action row alongside rename/delete.
Order: rename → upload art → delete. All buttons 4x4, consistent spacing.
---
 frontend/src/components/Gallery.tsx | 51 +++++++++++++++--------------
 1 file changed, 26 insertions(+), 25 deletions(-)

diff --git a/frontend/src/components/Gallery.tsx b/frontend/src/components/Gallery.tsx
index 3d6ac21..daa7dfb 100644
--- a/frontend/src/components/Gallery.tsx
+++ b/frontend/src/components/Gallery.tsx
@@ -191,30 +191,18 @@ export default function Gallery({ clips, onPlay, onDelete, onRename, onSelect, o
                     </svg>
                   </div>
                 )}
-                {/* Hover overlay: play + upload art */}
-                <div className="absolute inset-0 rounded bg-black/60 flex items-center justify-center gap-1 opacity-0 group-hover/art:opacity-100 transition-opacity">
+                {/* Hover overlay: play */}
+                <div className="absolute inset-0 rounded bg-black/60 flex items-center justify-center opacity-0 group-hover/art:opacity-100 transition-opacity"
+                >
                   <button
                     onClick={(e) => { e.stopPropagation(); onPlay(clip) }}
                     className="text-white hover:text-lyria-accent transition-colors"
                     title="Play"
                   >
-                    <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+                    <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                       <path d="M8 5v14l11-7z" />
                     </svg>
                   </button>
-                  <button
-                    onClick={(e) => {
-                      e.stopPropagation()
-                      setUploadingId(clip.id)
-                      setTimeout(() => artworkInputRef.current?.click(), 0)
-                    }}
-                    className="text-white hover:text-lyria-accent transition-colors"
-                    title="Upload album art"
-                  >
-                    <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
-                    </svg>
-                  </button>
                 </div>
               </div>
 
@@ -263,15 +251,6 @@ export default function Gallery({ clips, onPlay, onDelete, onRename, onSelect, o
                 )}
               </div>
 
-              <button
-                onClick={(e) => { e.stopPropagation(); onDelete(clip.id) }}
-                className="text-lyria-muted hover:text-red-400 transition-colors shrink-0"
-                title="Delete clip"
-              >
-                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-                </svg>
-              </button>
               <button
                 onClick={(e) => { e.stopPropagation(); startRename(clip) }}
                 className="text-lyria-muted/40 hover:text-lyria-accent transition-colors shrink-0"
@@ -281,6 +260,28 @@ export default function Gallery({ clips, onPlay, onDelete, onRename, onSelect, o
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                 </svg>
               </button>
+              <button
+                onClick={(e) => {
+                  e.stopPropagation()
+                  setUploadingId(clip.id)
+                  setTimeout(() => artworkInputRef.current?.click(), 0)
+                }}
+                className="text-lyria-muted/40 hover:text-lyria-accent transition-colors shrink-0"
+                title="Upload album art"
+              >
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                </svg>
+              </button>
+              <button
+                onClick={(e) => { e.stopPropagation(); onDelete(clip.id) }}
+                className="text-lyria-muted hover:text-red-400 transition-colors shrink-0"
+                title="Delete clip"
+              >
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                </svg>
+              </button>
             </div>
           ))}
         </div>