refactor(np): layout

src/lib/components/NowPlayingPanel.svelte

@@ -84,12 +84,23 @@
   </div>
 
   <div class="track-info">
+    <div class="track-title-row">
+      <img src="/icons/play.svg" alt="" class="track-icon" />
+      <div class="track-text-content">
+        <div class="track-title">
           {#if hasTrack && $playback.currentTrack}
-      <div class="track-title">{$playback.currentTrack.metadata.title || $playback.currentTrack.filename}</div>
+            {$playback.currentTrack.metadata.title || $playback.currentTrack.filename}
-      <div class="track-artist">{$playback.currentTrack.metadata.artist || 'Unknown Artist'}</div>
           {:else}
-      <div class="track-title">No track playing</div>
+            No track playing
           {/if}
+        </div>
+        <div class="track-artist">
+          {#if hasTrack && $playback.currentTrack}
+            {$playback.currentTrack.metadata.artist || 'Unknown Artist'}
+          {/if}
+        </div>
+      </div>
+    </div>
 
     <div class="progress-section">
       <span class="time-display">{formatTime($playback.currentTime)}</span>
@@ -174,11 +185,35 @@
     gap: 4px;
   }
 
+  .track-title-row {
+    display: flex;
+    gap: 6px;
+    min-width: 0;
+  }
+
+  .track-icon {
+    width: 16px;
+    height: 16px;
+    filter: light-dark(none, invert(1));
+    flex-shrink: 0;
+  }
+
+  .track-text-content {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
   .track-title {
     font-weight: bold;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    display: flex;
+    align-items: center;
+    min-height: 16px;
   }
 
   .track-artist {

static/icons/play.svg

@@ -1,3 +1,5 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<?xml version="1.0" encoding="UTF-8"?>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10 20H8V4H10V6H12V9H14V11H16V13H14V15H12V18H10V20Z" fill="black"/>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" version="1.1" viewBox="0 0 24 24">
+  <!-- Generator: Adobe Illustrator 29.6.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 9)  -->
+  <path d="M10,20h-2V4h2v2h2v3h2v2h2v2h-2v2h-2v3h-2v2Z" fill="#fff" fill-rule="evenodd"/>
 </svg>