From 069170398fc39c7bb24ecaff4add094db0525963 Mon Sep 17 00:00:00 2001
From: Kagamine Rin <rin.kagamine@captcouch.xyz>
Date: Fri, 29 May 2026 19:41:49 -0400
Subject: [PATCH] =?UTF-8?q?fix:=20Use=20proper=20Unicode=20treble=20clef?=
 =?UTF-8?q?=20(=F0=9D=84=9E)=20for=20album=20art=20placeholders?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaces broken SVG path with Unicode U+1D11E treble clef symbol
rendered via SVG text element. Applied to all three locations:
- Gallery ribbon: small treble clef (5x5)
- Gallery tile: medium treble clef (10x10)
- DetailPanel: large treble clef (14x14)
---
 frontend/src/components/DetailPanel.tsx | 4 ++--
 frontend/src/components/Gallery.tsx     | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/DetailPanel.tsx b/frontend/src/components/DetailPanel.tsx
index 494f544..bc27acd 100644
--- a/frontend/src/components/DetailPanel.tsx
+++ b/frontend/src/components/DetailPanel.tsx
@@ -120,8 +120,8 @@ export default function DetailPanel({ clip, onClose, onRename, onDelete, onUploa
               />
             ) : (
               <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 className="w-14 h-14" viewBox="0 0 24 24">
+                  <text x="12" y="19" textAnchor="middle" fontSize="20" fill="currentColor">𝄞</text>
                 </svg>
                 <span className="text-xs mt-1 text-lyria-muted/40">No album art</span>
               </div>
diff --git a/frontend/src/components/Gallery.tsx b/frontend/src/components/Gallery.tsx
index 02f8b47..3d6ac21 100644
--- a/frontend/src/components/Gallery.tsx
+++ b/frontend/src/components/Gallery.tsx
@@ -186,8 +186,8 @@ export default function Gallery({ clips, onPlay, onDelete, onRename, onSelect, o
                   />
                 ) : (
                   <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 className="w-5 h-5" viewBox="0 0 24 24">
+                      <text x="12" y="19" textAnchor="middle" fontSize="20" fill="currentColor">𝄞</text>
                     </svg>
                   </div>
                 )}
@@ -305,8 +305,8 @@ export default function Gallery({ clips, onPlay, onDelete, onRename, onSelect, o
                   />
                 ) : (
                   <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 className="w-10 h-10" viewBox="0 0 24 24">
+                      <text x="12" y="19" textAnchor="middle" fontSize="20" fill="currentColor">𝄞</text>
                     </svg>
                   </div>
                 )}