fix: Move album art upload button out of ribbon thumbnail

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.
This commit is contained in:
rin.kagamine committed 2026-05-29 19:55:06 -04:00
1 parent 069170398f
commit 5868be5f93
1 file changed
+26 -25
+26 -25
View File
@@ -191,30 +191,18 @@ export default function Gallery({ clips, onPlay, onDelete, onRename, onSelect, o
</svg> </svg>
</div> </div>
)} )}
{/* Hover overlay: play + upload art */} {/* Hover overlay: play */}
<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"> <div className="absolute inset-0 rounded bg-black/60 flex items-center justify-center opacity-0 group-hover/art:opacity-100 transition-opacity"
>
<button <button
onClick={(e) => { e.stopPropagation(); onPlay(clip) }} onClick={(e) => { e.stopPropagation(); onPlay(clip) }}
className="text-white hover:text-lyria-accent transition-colors" className="text-white hover:text-lyria-accent transition-colors"
title="Play" 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" /> <path d="M8 5v14l11-7z" />
</svg> </svg>
</button> </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>
</div> </div>
@@ -263,15 +251,6 @@ export default function Gallery({ clips, onPlay, onDelete, onRename, onSelect, o
)} )}
</div> </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 <button
onClick={(e) => { e.stopPropagation(); startRename(clip) }} onClick={(e) => { e.stopPropagation(); startRename(clip) }}
className="text-lyria-muted/40 hover:text-lyria-accent transition-colors shrink-0" 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" /> <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> </svg>
</button> </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>
))} ))}
</div> </div>