refactor(np): add triangle volume slider to now playing panel

src/lib/components/NowPlayingPanel.svelte

@@ -2,6 +2,7 @@
   import { playback } from '$lib/stores/playback';
   import { audioPlayer } from '$lib/services/audioPlayer';
   import LyricsDisplay from '$lib/components/LyricsDisplay.svelte';
+  import TriangleVolumeSlider from '$lib/components/TriangleVolumeSlider.svelte';
 
   function handlePlayPause() {
     playback.togglePlayPause();
@@ -22,9 +23,7 @@
     playback.setCurrentTime(time);
   }
 
-  function handleVolumeChange(e: Event) {
-    const target = e.target as HTMLInputElement;
-    const volume = parseFloat(target.value);
+  function handleVolumeChange(volume: number) {
     playback.setVolume(volume);
     audioPlayer.setVolume(volume);
   }
@@ -83,42 +82,30 @@
     {:else}
       <div class="track-title">No track playing</div>
     {/if}
-  </div>
 
-  <div class="progress-section">
-    <span class="time-display">{formatTime($playback.currentTime)}</span>
-    <div class="progress-bar-container">
-      <div class="progress-indicator">
-        <span class="progress-indicator-bar" style="width: {progressPercent}%;"></span>
+    <div class="progress-section">
+      <span class="time-display">{formatTime($playback.currentTime)}</span>
+      <div class="progress-bar-container">
+        <div class="progress-indicator">
+          <span class="progress-indicator-bar" style="width: {progressPercent}%;"></span>
+        </div>
+        <input
+          type="range"
+          min="0"
+          max={$playback.duration || 0}
+          step="0.1"
+          value={$playback.currentTime}
+          oninput={handleProgressChange}
+          disabled={!hasTrack}
+          class="progress-slider"
+        />
       </div>
-      <input
-        type="range"
-        min="0"
-        max={$playback.duration || 0}
-        step="0.1"
-        value={$playback.currentTime}
-        oninput={handleProgressChange}
-        disabled={!hasTrack}
-        class="progress-slider"
-      />
+      <span class="time-display">{formatTime($playback.duration)}</span>
     </div>
-    <span class="time-display">{formatTime($playback.duration)}</span>
   </div>
 
   <div class="volume-section">
-    <img src="/icons/volume.svg" alt="Volume" class="volume-icon" />
-    <div class="is-vertical volume-slider-container">
-      <input
-        type="range"
-        min="0"
-        max="1"
-        step="0.01"
-        value={$playback.volume}
-        oninput={handleVolumeChange}
-        class="has-box-indicator"
-      />
-    </div>
-    <span class="volume-percent">{Math.round($playback.volume * 100)}%</span>
+    <TriangleVolumeSlider bind:value={$playback.volume} onchange={handleVolumeChange} />
   </div>
 
   <LyricsDisplay lrcPath={$playback.lrcPath} currentTime={$playback.currentTime} />
@@ -142,38 +129,14 @@
   }
 
   .control-button {
-    background: transparent;
-    border: none;
-    box-shadow: none;
     padding: 4px;
     min-width: auto;
     min-height: auto;
-    cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
   }
 
-  .control-button:hover:not(:disabled) {
-    background: light-dark(silver, #2b2b2b);
-    box-shadow: inset -1px -1px light-dark(#0a0a0a, #000),
-      inset 1px 1px light-dark(#fff, #525252),
-      inset -2px -2px light-dark(grey, #232323),
-      inset 2px 2px light-dark(#dfdfdf, #363636);
-  }
-
-  .control-button:active:not(:disabled) {
-    box-shadow: inset -1px -1px light-dark(#fff, #525252),
-      inset 1px 1px light-dark(#0a0a0a, #000),
-      inset -2px -2px light-dark(#dfdfdf, #363636),
-      inset 2px 2px light-dark(grey, #232323);
-  }
-
-  .control-button:disabled {
-    opacity: 0.4;
-    cursor: not-allowed;
-  }
-
   .control-button img {
     width: 24px;
     height: 24px;
@@ -184,10 +147,18 @@
     padding: 6px;
   }
 
+  .play-pause img {
+    width: 28px;
+    height: 28px;
+  }
+
   .track-info {
     flex: 1;
     min-width: 0;
     overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
   }
 
   .track-title {
@@ -209,8 +180,7 @@
     display: flex;
     align-items: center;
     gap: 8px;
-    flex: 2;
-    min-width: 200px;
+    min-width: 0;
   }
 
   .time-display {
@@ -248,28 +218,9 @@
   }
 
   .volume-section {
-    display: flex;
-    align-items: center;
-    gap: 6px;
     flex-shrink: 0;
   }
 
-  .volume-icon {
-    width: 20px;
-    height: 20px;
-    filter: light-dark(none, invert(1));
-  }
-
-  .volume-slider-container {
-    width: 80px;
-  }
-
-  .volume-percent {
-    font-family: monospace;
-    font-size: 10px;
-    min-width: 35px;
-  }
-
   /* Responsive: hide lyrics on medium widths */
   @media (max-width: 1000px) {
     .now-playing :global(.lyrics-display) {