From d77d9100fbbda87e8df57e06dd803a59a97ffedf Mon Sep 17 00:00:00 2001
From: Kagamine Rin <rin.kagamine@captcouch.xyz>
Date: Fri, 29 May 2026 20:36:57 -0400
Subject: [PATCH] feat: Add album art thumbnail to player bar

Player.tsx track info section now shows a 32x32 album art thumbnail
left of the track name. Uses the clip's artwork endpoint with an
onError fallback to the treble clef placeholder (same SVG text
approach as gallery placeholders). Hidden on mobile (sm breakpoint).
Layout: flex row with 10px gap between thumbnail and title text.
---
 frontend/src/components/Player.tsx | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Player.tsx b/frontend/src/components/Player.tsx
index 07f20e2..98e6596 100644
--- a/frontend/src/components/Player.tsx
+++ b/frontend/src/components/Player.tsx
@@ -250,8 +250,24 @@ export default function Player({ clip, isPlaying, onTogglePlay, onStop, onClose
           </span>
         </div>
 
-        {/* Track info */}
-        <div className="hidden sm:block min-w-0 max-w-[200px]">
+        {/* Track info with artwork */}
+        <div className="hidden sm:flex items-center gap-2.5 min-w-0 max-w-[220px] shrink-0">
+          <div className="w-8 h-8 rounded bg-white/5 flex items-center justify-center shrink-0 overflow-hidden">
+            <img
+              src={`/api/clips/${clip.id}/artwork`}
+              alt=""
+              className="w-full h-full object-cover"
+              onError={(e) => {
+                // Fallback to treble clef on error
+                const target = e.target as HTMLImageElement
+                target.style.display = 'none'
+                const parent = target.parentElement
+                if (parent) {
+                  parent.innerHTML = `<svg class='w-4 h-4 text-lyria-accent/40' viewBox='0 0 24 24'><text x='12' y='19' text-anchor='middle' font-size='16' fill='currentColor'>𝄞</text></svg>`
+                }
+              }}
+            />
+          </div>
           <p className="text-xs text-white truncate">{displayTitle}</p>
         </div>