feat: Replace placeholder icons with treble clef SVG

Album art placeholders now show a treble clef (Rin's signature)
instead of generic icons. Applied to all three locations:
- Gallery ribbon: small treble clef (5x5)
- Gallery tile: medium treble clef (10x10)
- DetailPanel: large treble clef (14x14) with 'No album art' label
This commit is contained in:
rin.kagamine committed 2026-05-29 18:58:34 -04:00
1 parent 8ba7133269
commit c21a5f50e0
2 files changed
+10 -10

No files matched your search

+4 -4
View File
@@ -119,11 +119,11 @@ export default function DetailPanel({ clip, onClose, onRename, onDelete, onUploa
className="w-full aspect-square rounded-lg object-cover"
/>
) : (
<div className="w-full aspect-square bg-white/5 rounded-lg flex flex-col items-center justify-center text-lyria-muted/40">
<svg className="w-12 h-12" fill="currentColor" viewBox="0 0 24 24">
<path 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" />
<div className="w-full aspect-square bg-white/5 rounded-lg flex flex-col items-center justify-center text-lyria-accent/20">
<svg className="w-14 h-14" viewBox="0 0 24 24" fill="currentColor">
<path d="M11.5 2c-.28 0-.5.22-.5.5v8.17c-.94-.42-2.08-.37-3.06.2C7.06 11.39 6.3 12.7 6.5 14.1c.2 1.4 1.3 2.48 2.7 2.72.67.12 1.37.04 2.01-.21.35-.14.65-.34.9-.6.14-.14.26-.3.37-.47l.02.02V21.5c0 .28.22.5.5.5s.5-.22.5-.5V5.3c.67.4 1.5.7 2.5.7 2.21 0 4-1.79 4-4h-1c0 1.66-1.34 3-3 3-.94 0-1.78-.44-2.5-1.2V2.5c0-.28-.22-.5-.5-.5zM9.5 11.5c.53 0 1.03.2 1.5.54v4.92c-.47.34-.97.54-1.5.54-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5z"/>
</svg>
<span className="text-xs mt-1">No album art</span>
<span className="text-xs mt-1 text-lyria-muted/40">No album art</span>
</div>
)}
<input
+6 -6
View File
@@ -185,9 +185,9 @@ export default function Gallery({ clips, onPlay, onDelete, onRename, onSelect, o
className="w-10 h-10 rounded object-cover"
/>
) : (
<div className="w-10 h-10 rounded bg-white/5 flex items-center justify-center">
<svg className="w-4 h-4 text-lyria-muted/60" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 3v9.28a2 2 0 102 0V3h2a1 1 0 001-1V1a1 1 0 00-1-1H9a1 1 0 00-1 1v1a1 1 0 001 1h2zm-1 17a3 3 0 116 0 3 3 0 01-6 0z" />
<div className="w-10 h-10 rounded bg-white/5 flex items-center justify-center text-lyria-accent/30">
<svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
<path d="M11.5 2c-.28 0-.5.22-.5.5v8.17c-.94-.42-2.08-.37-3.06.2C7.06 11.39 6.3 12.7 6.5 14.1c.2 1.4 1.3 2.48 2.7 2.72.67.12 1.37.04 2.01-.21.35-.14.65-.34.9-.6.14-.14.26-.3.37-.47l.02.02V21.5c0 .28.22.5.5.5s.5-.22.5-.5V5.3c.67.4 1.5.7 2.5.7 2.21 0 4-1.79 4-4h-1c0 1.66-1.34 3-3 3-.94 0-1.78-.44-2.5-1.2V2.5c0-.28-.22-.5-.5-.5zM9.5 11.5c.53 0 1.03.2 1.5.54v4.92c-.47.34-.97.54-1.5.54-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5z"/>
</svg>
</div>
)}
@@ -304,9 +304,9 @@ export default function Gallery({ clips, onPlay, onDelete, onRename, onSelect, o
className="w-full aspect-square rounded-md object-cover"
/>
) : (
<div className="w-full aspect-square bg-white/5 rounded-md flex items-center justify-center text-lyria-accent/40">
<svg className="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 3v9.28a2 2 0 102 0V3h2a1 1 0 001-1V1a1 1 0 00-1-1H9a1 1 0 00-1 1v1a1 1 0 001 1h2zm-1 17a3 3 0 116 0 3 3 0 01-6 0z" />
<div className="w-full aspect-square bg-white/5 rounded-md flex items-center justify-center text-lyria-accent/30">
<svg className="w-10 h-10" viewBox="0 0 24 24" fill="currentColor">
<path d="M11.5 2c-.28 0-.5.22-.5.5v8.17c-.94-.42-2.08-.37-3.06.2C7.06 11.39 6.3 12.7 6.5 14.1c.2 1.4 1.3 2.48 2.7 2.72.67.12 1.37.04 2.01-.21.35-.14.65-.34.9-.6.14-.14.26-.3.37-.47l.02.02V21.5c0 .28.22.5.5.5s.5-.22.5-.5V5.3c.67.4 1.5.7 2.5.7 2.21 0 4-1.79 4-4h-1c0 1.66-1.34 3-3 3-.94 0-1.78-.44-2.5-1.2V2.5c0-.28-.22-.5-.5-.5zM9.5 11.5c.53 0 1.03.2 1.5.54v4.92c-.47.34-.97.54-1.5.54-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5z"/>
</svg>
</div>
)}