refactor(np): refactor layout

src/lib/components/NowPlayingPanel.svelte

@@ -41,90 +41,96 @@
 </script>
 
 <div class="now-playing">
-  <div class="controls">
-    <button
-      class="control-button"
-      onclick={handlePrevious}
-      disabled={!hasTrack}
-      title="Previous"
-    >
-      <img src="/icons/player-skip-back.svg" alt="Previous" />
-    </button>
-
-    <button
-      class="control-button play-pause"
-      onclick={handlePlayPause}
-      disabled={!hasTrack}
-      title={$playback.isPlaying ? 'Pause' : 'Play'}
-    >
-      {#if $playback.isPlaying}
-        <img src="/icons/player-pause.svg" alt="Pause" />
-      {:else}
-        <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/player-skip-forward.svg" alt="Next" />
-    </button>
-  </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}
-            {$playback.currentTrack.metadata.title || $playback.currentTrack.filename}
-          {:else}
-            No track playing
-          {/if}
-        </div>
-        <div class="track-artist">
-          {#if hasTrack && $playback.currentTrack}
-            {$playback.currentTrack.metadata.artist || 'Unknown Artist'}
-          {/if}
+  <div class="player-main">
+    <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}
+              {$playback.currentTrack.metadata.title || $playback.currentTrack.filename}
+            {:else}
+              No track playing
+            {/if}
+          </div>
+          <div class="track-artist">
+            {#if hasTrack && $playback.currentTrack}
+              {$playback.currentTrack.metadata.artist || 'Unknown Artist'}
+            {/if}
+          </div>
         </div>
       </div>
     </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="player-controls-container">
+      <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>
 
-  <div class="volume-section">
-    <TriangleVolumeSlider bind:value={$playback.volume} onchange={handleVolumeChange} />
+      <div class="controls-row">
+        <div class="controls">
+          <button
+            class="control-button"
+            onclick={handlePrevious}
+            disabled={!hasTrack}
+            title="Previous"
+          >
+            <img src="/icons/player-skip-back.svg" alt="Previous" />
+          </button>
+
+          <button
+            class="control-button play-pause"
+            onclick={handlePlayPause}
+            disabled={!hasTrack}
+            title={$playback.isPlaying ? 'Pause' : 'Play'}
+          >
+            {#if $playback.isPlaying}
+              <img src="/icons/player-pause.svg" alt="Pause" />
+            {:else}
+              <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/player-skip-forward.svg" alt="Next" />
+          </button>
+        </div>
+
+        <div class="volume-section">
+          <TriangleVolumeSlider bind:value={$playback.volume} onchange={handleVolumeChange} />
+        </div>
+      </div>
+    </div>
   </div>
 
   <LyricsDisplay lrcPath={$playback.lrcPath} currentTime={$playback.currentTime} />
@@ -133,7 +139,8 @@
 <style>
   .now-playing {
     display: flex;
-    align-items: center;
+    flex-direction: row;
+    justify-content: center;
     gap: 12px;
     padding: 8px;
     height: 100%;
@@ -141,6 +148,19 @@
     font-size: 11px;
   }
 
+  .player-main {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .controls-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+  }
+
   .controls {
     display: flex;
     flex-shrink: 0;
@@ -177,12 +197,8 @@
   }
 
   .track-info {
-    flex: 1;
     min-width: 0;
     overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
   }
 
   .track-title-row {
@@ -224,6 +240,14 @@
     text-overflow: ellipsis;
   }
 
+  .player-controls-container {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    max-width: 400px;
+    width: 100%;
+  }
+
   .progress-section {
     display: flex;
     align-items: center;
@@ -269,17 +293,19 @@
     flex-shrink: 0;
   }
 
-  /* Responsive: hide lyrics on medium widths */
-  @media (max-width: 1000px) {
+  /* Responsive: hide lyrics panel when not enough space */
+  @media (max-width: 800px) {
     .now-playing :global(.lyrics-display) {
       display: none;
     }
-  }
 
-  /* Responsive: hide volume on small widths */
-  @media (max-width: 800px) {
-    .volume-section {
-      display: none;
+    .player-main {
+      width: 100%;
+      max-width: 600px;
+    }
+
+    .player-controls-container {
+      max-width: none;
     }
   }