Public/kithara-studio
2
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Move album art upload button out of ribbon thumbnail

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/Gallery.tsx
+26 -25
View File
@@ -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>