refactor(np): now playing controls and icons

src/lib/components/NowPlayingPanel.svelte

@@ -48,7 +48,7 @@
       disabled={!hasTrack}
       title="Previous"
     >
-      <img src="/icons/prev.svg" alt="Previous" />
+      <img src="/icons/player-skip-back.svg" alt="Previous" />
     </button>
 
     <button
@@ -58,19 +58,28 @@
       title={$playback.isPlaying ? 'Pause' : 'Play'}
     >
       {#if $playback.isPlaying}
-        <img src="/icons/pause.svg" alt="Pause" />
+        <img src="/icons/player-pause.svg" alt="Pause" />
       {:else}
-        <img src="/icons/play.svg" alt="Play" />
+        <img src="/icons/player-play.svg" alt="Play" />
       {/if}
     </button>
 
+    <button
+      class="control-button"
+      onclick={() => playback.stop()}
+      disabled={!hasTrack}
+      title="Stop"
+    >
+      <img src="/icons/player-stop.svg" alt="Stop" />
+    </button>
+
     <button
       class="control-button"
       onclick={handleNext}
       disabled={!hasTrack}
       title="Next"
     >
-      <img src="/icons/next.svg" alt="Next" />
+      <img src="/icons/player-skip-forward.svg" alt="Next" />
     </button>
   </div>
 
@@ -123,32 +132,37 @@
 
   .controls {
     display: flex;
-    gap: 4px;
     flex-shrink: 0;
   }
 
   .control-button {
-    padding: 4px;
+    padding: 6px 20px;
     min-width: auto;
     min-height: auto;
     display: flex;
     align-items: center;
     justify-content: center;
+    border-radius: 0;
+    margin: 0 -1px 0 0;
+  }
+
+  .control-button:first-child {
+    margin-left: 0;
   }
 
   .control-button img {
-    width: 24px;
+    width: 12px;
-    height: 24px;
+    height: 12px;
     filter: light-dark(none, invert(1));
   }
 
   .play-pause {
-    padding: 6px;
+    padding: 6px 20px;
   }
 
   .play-pause img {
-    width: 28px;
+    width: 12px;
-    height: 28px;
+    height: 12px;
   }
 
   .track-info {

static/icons/player-pause.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="512" height="512" version="1.1" viewBox="0 0 512 512">
+  <!-- Generator: Adobe Illustrator 29.6.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 9)  -->
+  <path d="M224,432h-80V80h80v352ZM368,432h-80V80h80v352Z" fill="#fff"/>
+</svg>

static/icons/player-play.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="512" height="512" version="1.1" viewBox="0 0 512 512">
+  <!-- Generator: Adobe Illustrator 29.6.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 9)  -->
+  <path d="M96,448l320-192L96,64v384Z" fill="#fff"/>
+</svg>

static/icons/player-skip-back.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="512" height="512" version="1.1" viewBox="0 0 512 512">
+  <!-- Generator: Adobe Illustrator 29.6.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 9)  -->
+  <path d="M143.47,64v163.52L416,64v384l-272.53-163.51999v163.51999h-47.47V64h47.47Z" fill="#fff"/>
+</svg>

static/icons/player-skip-forward.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="512" height="512" version="1.1" viewBox="0 0 512 512">
+  <!-- Generator: Adobe Illustrator 29.6.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 9)  -->
+  <path d="M368.53,64v163.52L96,64v384l272.53-163.52002v163.52002h47.47V64h-47.47Z" fill="#fff"/>
+</svg>

static/icons/player-stop.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="512" height="512" version="1.1" viewBox="0 0 512 512">
+  <!-- Generator: Adobe Illustrator 29.6.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 9)  -->
+  <path d="M80,80h352v352H80V80Z" fill="#fff"/>
+</svg>