From 4ca89577d73cbce8f3a19304d986d668d2983528 Mon Sep 17 00:00:00 2001
From: Kagamine Rin <rin.kagamine@captcouch.xyz>
Date: Fri, 29 May 2026 21:42:29 -0400
Subject: [PATCH] feat: Add download button to player bar

Player.tsx: Download button added to the left of the album art thumbnail
in the track info section (hidden on mobile). Uses window.open() to trigger
browser download. Styled as text-lyria-muted/60 base, hover to lyria-accent.
Consistent with secondary action tier styling.
---
 frontend/src/components/Player.tsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/frontend/src/components/Player.tsx b/frontend/src/components/Player.tsx
index caa26dd..349b444 100644
--- a/frontend/src/components/Player.tsx
+++ b/frontend/src/components/Player.tsx
@@ -254,6 +254,15 @@ export default function Player({ clip, isPlaying, onTogglePlay, onStop, onClose
 
           {/* Track info with artwork */}
           <div className="hidden sm:flex items-center gap-2.5 min-w-0 max-w-[220px] shrink-0">
+            <button
+              onClick={() => window.open(`/api/clips/${clip.id}/download`, '_blank')}
+              className="text-lyria-muted/60 hover:text-lyria-accent transition-colors shrink-0"
+              title="Download MP3"
+            >
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+              </svg>
+            </button>
             <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`}