feat(ui): add now playing panel and context menu for tracks

src/lib/ToolBar.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import { beforeNavigate } from '$app/navigation';
 
+  let { onToggleNowPlaying }: { onToggleNowPlaying?: () => void } = $props();
+
   const icons = {
     back: '/icons/leftarrow.png',
     forward: '/icons/rightarrow.png',
@@ -36,6 +38,12 @@
     }
   }
 
+  function handleNowPlayingClick() {
+    if (onToggleNowPlaying) {
+      onToggleNowPlaying();
+    }
+  }
+
   $effect(() => {
     if (history.length === 0 && typeof window !== 'undefined') {
       history = [window.location.pathname];
@@ -64,7 +72,7 @@
 
   <div class="toolbar-separator"></div>
 
-  <button class="toolbar-button" disabled title="Now Playing">
+  <button class="toolbar-button" onclick={handleNowPlayingClick} title="Now Playing">
     <img src={icons.play} alt="Play" />
     <span>Now Playing</span>
   </button>

src/lib/components/CollectionView.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import type { Track } from '$lib/types/track';
   import { convertFileSrc } from '@tauri-apps/api/core';
+  import { playback } from '$lib/stores/playback';
+  import ContextMenu, { type MenuItem } from '$lib/components/ContextMenu.svelte';
 
   interface Props {
     title: string;
@@ -11,6 +13,7 @@
     selectedTrackIndex?: number | null;
     onTrackClick?: (index: number) => void;
     showAlbumColumn?: boolean;
+    useSequentialNumbers?: boolean;
   }
 
   let {
@@ -21,9 +24,12 @@
     tracks,
     selectedTrackIndex = null,
     onTrackClick,
-    showAlbumColumn = false
+    showAlbumColumn = false,
+    useSequentialNumbers = false
   }: Props = $props();
 
+  let contextMenu = $state<{ x: number; y: number; trackIndex: number } | null>(null);
+
   function getThumbnailUrl(coverPath?: string): string {
     if (!coverPath) {
       return '';
@@ -36,6 +42,37 @@
       onTrackClick(index);
     }
   }
+
+  function handleTrackDoubleClick(index: number) {
+    // Play track immediately (replace queue)
+    playback.playQueue(tracks, index);
+  }
+
+  function handleContextMenu(e: MouseEvent, index: number) {
+    e.preventDefault();
+    contextMenu = {
+      x: e.clientX,
+      y: e.clientY,
+      trackIndex: index
+    };
+  }
+
+  function getContextMenuItems(trackIndex: number): MenuItem[] {
+    return [
+      {
+        label: 'Play Now',
+        action: () => playback.playQueue(tracks, trackIndex)
+      },
+      {
+        label: 'Add to Queue',
+        action: () => playback.addToQueue([tracks[trackIndex]])
+      },
+      {
+        label: 'Play Next',
+        action: () => playback.playNext([tracks[trackIndex]])
+      }
+    ];
+  }
 </script>
 
 <!-- Header -->
@@ -98,9 +135,11 @@
               <tr
                 class:highlighted={selectedTrackIndex === i}
                 onclick={() => handleTrackClick(i)}
+                ondblclick={() => handleTrackDoubleClick(i)}
+                oncontextmenu={(e) => handleContextMenu(e, i)}
               >
                 <td class="track-number">
-                  {track.metadata.trackNumber ?? i + 1}
+                  {useSequentialNumbers ? i + 1 : (track.metadata.trackNumber ?? i + 1)}
                 </td>
                 <td>{track.metadata.title ?? '—'}</td>
                 {#if showAlbumColumn}
@@ -124,6 +163,15 @@
   </div>
 </section>
 
+{#if contextMenu}
+  <ContextMenu
+    x={contextMenu.x}
+    y={contextMenu.y}
+    items={getContextMenuItems(contextMenu.trackIndex)}
+    onClose={() => contextMenu = null}
+  />
+{/if}
+
 <style>
   .collection-header {
     display: flex;
@@ -206,6 +254,13 @@
     width: 100%;
   }
 
+  thead {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    background: #121212;
+  }
+
   th {
     text-align: left;
   }

src/lib/components/ContextMenu.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+
+  export interface MenuItem {
+    label: string;
+    action: () => void;
+    disabled?: boolean;
+  }
+
+  interface Props {
+    x: number;
+    y: number;
+    items: MenuItem[];
+    onClose: () => void;
+  }
+
+  let { x, y, items, onClose }: Props = $props();
+
+  let menuElement = $state<HTMLDivElement | null>(null);
+
+  onMount(() => {
+    // Close on click outside
+    function handleClickOutside(e: MouseEvent) {
+      if (menuElement && !menuElement.contains(e.target as Node)) {
+        onClose();
+      }
+    }
+
+    // Close on escape
+    function handleEscape(e: KeyboardEvent) {
+      if (e.key === 'Escape') {
+        onClose();
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener('keydown', handleEscape);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('keydown', handleEscape);
+    };
+  });
+
+  function handleItemClick(item: MenuItem) {
+    if (!item.disabled) {
+      item.action();
+      onClose();
+    }
+  }
+</script>
+
+<div
+  bind:this={menuElement}
+  class="context-menu"
+  style="left: {x}px; top: {y}px;"
+>
+  <ul role="menu">
+    {#each items as item}
+      <li
+        role="menuitem"
+        class:disabled={item.disabled}
+        onclick={() => handleItemClick(item)}
+      >
+        {item.label}
+      </li>
+    {/each}
+  </ul>
+</div>
+
+<style>
+  .context-menu {
+    position: fixed;
+    z-index: 1000;
+    background: light-dark(#c0c0c0, #121212);
+    border: 1px solid light-dark(#0a0a0a, #000);
+    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);
+    padding: 2px;
+    font-family: "Pixelated MS Sans Serif", Arial;
+    font-size: 11px;
+  }
+
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  li {
+    padding: 4px 24px 4px 8px;
+    cursor: pointer;
+    color: light-dark(#222, #ddd);
+    white-space: nowrap;
+  }
+
+  li:hover:not(.disabled) {
+    background: light-dark(#000080, #1084d0);
+    color: light-dark(#fff, #fff);
+  }
+
+  li.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+</style>

src/lib/components/LyricsDisplay.svelte

@@ -0,0 +1,165 @@
+<script lang="ts">
+  import { readTextFile, exists } from '@tauri-apps/plugin-fs';
+
+  interface LyricLine {
+    timestamp: number; // in seconds
+    text: string;
+  }
+
+  let { lrcPath, currentTime }: { lrcPath: string | null; currentTime: number } = $props();
+
+  let lyrics = $state<LyricLine[]>([]);
+  let isSynced = $state(false);
+  let loading = $state(false);
+
+  // Load LRC file when path changes
+  $effect(() => {
+    if (lrcPath) {
+      loadLyrics(lrcPath);
+    } else {
+      lyrics = [];
+      isSynced = false;
+    }
+  });
+
+  let scrollContainer = $state<HTMLDivElement | null>(null);
+
+  // Find current active lyric line for synced lyrics
+  const activeLyricIndex = $derived(() => {
+    if (!isSynced || lyrics.length === 0) return -1;
+
+    // Find the last lyric whose timestamp has passed
+    for (let i = lyrics.length - 1; i >= 0; i--) {
+      if (currentTime >= lyrics[i].timestamp) {
+        return i;
+      }
+    }
+    return -1;
+  });
+
+  // Auto-scroll to active line for synced lyrics
+  $effect(() => {
+    const activeIndex = activeLyricIndex();
+    if (isSynced && activeIndex >= 0 && scrollContainer) {
+      const activeElement = scrollContainer.children[activeIndex] as HTMLElement;
+      if (activeElement) {
+        activeElement.scrollIntoView({
+          behavior: 'smooth',
+          block: 'center'
+        });
+      }
+    }
+  });
+
+  async function loadLyrics(path: string) {
+    loading = true;
+    try {
+      const fileExists = await exists(path);
+      if (!fileExists) {
+        lyrics = [];
+        isSynced = false;
+        loading = false;
+        return;
+      }
+
+      const content = await readTextFile(path);
+      const lines = content.split('\n');
+      const parsedLyrics: LyricLine[] = [];
+      let hasSyncedLines = false;
+
+      for (const line of lines) {
+        // Try to match synced format: [00:00.00]text
+        const syncedMatch = line.match(/\[(\d{2}):(\d{2})\.(\d{2})\](.+)/);
+        if (syncedMatch) {
+          const minutes = parseInt(syncedMatch[1], 10);
+          const seconds = parseInt(syncedMatch[2], 10);
+          const centiseconds = parseInt(syncedMatch[3], 10);
+          const text = syncedMatch[4].trim();
+
+          if (text) {
+            const timestamp = minutes * 60 + seconds + centiseconds / 100;
+            parsedLyrics.push({ timestamp, text });
+            hasSyncedLines = true;
+          }
+        } else {
+          // Plain text line (unsynced)
+          const trimmed = line.trim();
+          if (trimmed && !trimmed.startsWith('[')) {
+            parsedLyrics.push({ timestamp: 0, text: trimmed });
+          }
+        }
+      }
+
+      lyrics = parsedLyrics;
+      isSynced = hasSyncedLines;
+    } catch (error) {
+      console.error('[Lyrics] Error loading LRC file:', error);
+      lyrics = [];
+      isSynced = false;
+    } finally {
+      loading = false;
+    }
+  }
+</script>
+
+{#if lyrics.length > 0}
+  <div class="lyrics-display">
+    <div class="lyrics-scroll" bind:this={scrollContainer}>
+      {#each lyrics as line, i}
+        <p class="lyric-line" class:active={isSynced && activeLyricIndex() === i}>
+          {line.text}
+        </p>
+      {/each}
+    </div>
+  </div>
+{:else if loading}
+  <div class="lyrics-display">
+    <p class="no-lyrics">Loading lyrics...</p>
+  </div>
+{:else}
+  <div class="lyrics-display">
+    <p class="no-lyrics">No lyrics available</p>
+  </div>
+{/if}
+
+<style>
+  .lyrics-display {
+    flex: 1;
+    min-width: 200px;
+    max-width: 400px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    padding: 0 8px;
+  }
+
+  .lyrics-scroll {
+    flex: 1;
+    overflow-y: auto;
+    padding: 4px;
+    font-family: "Pixelated MS Sans Serif", Arial;
+    font-size: 10px;
+    line-height: 1.6;
+    scroll-behavior: smooth;
+  }
+
+  .lyric-line {
+    margin: 0 0 6px 0;
+    opacity: 0.5;
+    text-align: center;
+  }
+
+  .lyric-line.active {
+    opacity: 1;
+    font-weight: bold;
+    color: light-dark(#000080, #1084d0);
+  }
+
+  .no-lyrics {
+    margin: auto;
+    opacity: 0.5;
+    font-size: 10px;
+    text-align: center;
+  }
+</style>

src/lib/components/NowPlayingPanel.svelte

@@ -0,0 +1,293 @@
+<script lang="ts">
+  import { playback } from '$lib/stores/playback';
+  import { audioPlayer } from '$lib/services/audioPlayer';
+  import LyricsDisplay from '$lib/components/LyricsDisplay.svelte';
+
+  function handlePlayPause() {
+    playback.togglePlayPause();
+  }
+
+  function handlePrevious() {
+    playback.previous();
+  }
+
+  function handleNext() {
+    playback.next();
+  }
+
+  function handleProgressChange(e: Event) {
+    const target = e.target as HTMLInputElement;
+    const time = parseFloat(target.value);
+    audioPlayer.seek(time);
+    playback.setCurrentTime(time);
+  }
+
+  function handleVolumeChange(e: Event) {
+    const target = e.target as HTMLInputElement;
+    const volume = parseFloat(target.value);
+    playback.setVolume(volume);
+    audioPlayer.setVolume(volume);
+  }
+
+  function formatTime(seconds: number): string {
+    if (!isFinite(seconds)) return '0:00';
+    const mins = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60);
+    return `${mins}:${secs.toString().padStart(2, '0')}`;
+  }
+
+  const hasTrack = $derived($playback.currentTrack !== null);
+  const progressPercent = $derived(
+    $playback.duration > 0 ? ($playback.currentTime / $playback.duration) * 100 : 0
+  );
+</script>
+
+<div class="now-playing">
+  <div class="controls">
+    <button
+      class="control-button"
+      onclick={handlePrevious}
+      disabled={!hasTrack}
+      title="Previous"
+    >
+      <img src="/icons/prev.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/pause.svg" alt="Pause" />
+      {:else}
+        <img src="/icons/play.svg" alt="Play" />
+      {/if}
+    </button>
+
+    <button
+      class="control-button"
+      onclick={handleNext}
+      disabled={!hasTrack}
+      title="Next"
+    >
+      <img src="/icons/next.svg" alt="Next" />
+    </button>
+  </div>
+
+  <div class="track-info">
+    {#if hasTrack && $playback.currentTrack}
+      <div class="track-title">{$playback.currentTrack.metadata.title || $playback.currentTrack.filename}</div>
+      <div class="track-artist">{$playback.currentTrack.metadata.artist || 'Unknown Artist'}</div>
+    {: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>
+      <input
+        type="range"
+        min="0"
+        max={$playback.duration || 0}
+        step="0.1"
+        value={$playback.currentTime}
+        oninput={handleProgressChange}
+        disabled={!hasTrack}
+        class="progress-slider"
+      />
+    </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>
+  </div>
+
+  <LyricsDisplay lrcPath={$playback.lrcPath} currentTime={$playback.currentTime} />
+</div>
+
+<style>
+  .now-playing {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 8px;
+    height: 100%;
+    font-family: "Pixelated MS Sans Serif", Arial;
+    font-size: 11px;
+  }
+
+  .controls {
+    display: flex;
+    gap: 4px;
+    flex-shrink: 0;
+  }
+
+  .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;
+    filter: light-dark(none, invert(1));
+  }
+
+  .play-pause {
+    padding: 6px;
+  }
+
+  .track-info {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .track-title {
+    font-weight: bold;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .track-artist {
+    opacity: 0.7;
+    font-size: 10px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .progress-section {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex: 2;
+    min-width: 200px;
+  }
+
+  .time-display {
+    font-family: monospace;
+    font-size: 10px;
+    min-width: 40px;
+    text-align: center;
+  }
+
+  .progress-bar-container {
+    position: relative;
+    flex: 1;
+    height: 20px;
+    display: flex;
+    align-items: center;
+  }
+
+  .progress-indicator {
+    position: absolute;
+    width: 100%;
+    height: 12px;
+    pointer-events: none;
+  }
+
+  .progress-slider {
+    position: absolute;
+    width: 100%;
+    opacity: 0;
+    cursor: pointer;
+    height: 100%;
+  }
+
+  .progress-slider:disabled {
+    cursor: not-allowed;
+  }
+
+  .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) {
+      display: none;
+    }
+  }
+
+  /* Responsive: hide volume on small widths */
+  @media (max-width: 800px) {
+    .volume-section {
+      display: none;
+    }
+  }
+
+  /* Responsive: simplify track info on very small widths */
+  @media (max-width: 600px) {
+    .track-artist {
+      display: none;
+    }
+  }
+</style>

src/lib/services/audioPlayer.ts

@@ -0,0 +1,164 @@
+import { convertFileSrc } from '@tauri-apps/api/core';
+import { playback } from '$lib/stores/playback';
+import type { Track } from '$lib/types/track';
+
+class AudioPlayer {
+  private audio: HTMLAudioElement | null = null;
+  private currentTrackPath: string | null = null;
+  private isSeeking = false;
+
+  constructor() {
+    if (typeof window !== 'undefined') {
+      this.audio = new Audio();
+      this.setupEventListeners();
+    }
+  }
+
+  private setupEventListeners() {
+    if (!this.audio) return;
+
+    // Time updates
+    this.audio.addEventListener('timeupdate', () => {
+      if (this.audio && !this.isSeeking) {
+        playback.setCurrentTime(this.audio.currentTime);
+      }
+    });
+
+    // Seeking events
+    this.audio.addEventListener('seeking', () => {
+      this.isSeeking = true;
+    });
+
+    this.audio.addEventListener('seeked', () => {
+      this.isSeeking = false;
+      if (this.audio) {
+        playback.setCurrentTime(this.audio.currentTime);
+      }
+    });
+
+    // Duration loaded
+    this.audio.addEventListener('loadedmetadata', () => {
+      if (this.audio) {
+        playback.setDuration(this.audio.duration);
+      }
+    });
+
+    // Track ended - auto-advance
+    this.audio.addEventListener('ended', () => {
+      console.log('[AudioPlayer] Track ended, advancing to next');
+      playback.next();
+    });
+
+    // Error handling
+    this.audio.addEventListener('error', (e) => {
+      console.error('[AudioPlayer] Playback error:', e);
+      const error = this.audio?.error;
+
+      if (error) {
+        console.error(`[AudioPlayer] Error code: ${error.code}, message: ${error.message}`);
+      }
+
+      // Skip to next track on error
+      console.log('[AudioPlayer] Skipping to next track due to error');
+      playback.next();
+    });
+  }
+
+  async loadTrack(track: Track) {
+    if (!this.audio) {
+      console.error('[AudioPlayer] Audio element not initialized');
+      return;
+    }
+
+    try {
+      // Convert file path to Tauri asset URL
+      const audioUrl = convertFileSrc(track.path);
+
+      console.log('[AudioPlayer] Loading track:', track.metadata.title || track.filename);
+      console.log('[AudioPlayer] File path:', track.path);
+      console.log('[AudioPlayer] Asset URL:', audioUrl);
+
+      // Only reload if different track
+      if (this.currentTrackPath !== track.path) {
+        this.audio.src = audioUrl;
+        this.currentTrackPath = track.path;
+
+        // Check for LRC file (same path but .lrc extension)
+        const lrcPath = track.path.replace(/\.(flac|mp3|opus|ogg|m4a|wav)$/i, '.lrc');
+        playback.setLrcPath(lrcPath);
+
+        await this.audio.load();
+      }
+    } catch (error) {
+      console.error('[AudioPlayer] Error loading track:', error);
+      // Skip to next on load error
+      playback.next();
+    }
+  }
+
+  async play() {
+    if (!this.audio) return;
+
+    try {
+      await this.audio.play();
+    } catch (error) {
+      console.error('[AudioPlayer] Error playing:', error);
+    }
+  }
+
+  pause() {
+    if (!this.audio) return;
+    this.audio.pause();
+  }
+
+  seek(time: number) {
+    if (!this.audio) return;
+    this.audio.currentTime = time;
+  }
+
+  setVolume(volume: number) {
+    if (!this.audio) return;
+    this.audio.volume = Math.max(0, Math.min(1, volume));
+  }
+
+  getCurrentTime(): number {
+    return this.audio?.currentTime || 0;
+  }
+
+  getDuration(): number {
+    return this.audio?.duration || 0;
+  }
+}
+
+// Singleton instance
+export const audioPlayer = new AudioPlayer();
+
+// Watch playback state and control audio
+if (typeof window !== 'undefined') {
+  let prevTrack: Track | null = null;
+  let prevIsPlaying = false;
+
+  playback.subscribe(state => {
+    const { currentTrack, isPlaying } = state;
+
+    // Track changed
+    if (currentTrack && currentTrack !== prevTrack) {
+      audioPlayer.loadTrack(currentTrack).then(() => {
+        if (isPlaying) {
+          audioPlayer.play();
+        }
+      });
+      prevTrack = currentTrack;
+    }
+
+    // Play/pause state changed
+    if (isPlaying !== prevIsPlaying) {
+      if (isPlaying && currentTrack) {
+        audioPlayer.play();
+      } else {
+        audioPlayer.pause();
+      }
+      prevIsPlaying = isPlaying;
+    }
+  });
+}

src/lib/stores/playback.ts

@@ -0,0 +1,221 @@
+import { writable, get, type Writable } from 'svelte/store';
+import type { Track } from '$lib/types/track';
+
+export interface PlaybackState {
+  currentTrack: Track | null;
+  queue: Track[];
+  queueIndex: number;
+  isPlaying: boolean;
+  volume: number; // 0-1
+  currentTime: number;
+  duration: number;
+  lrcPath: string | null; // Path to LRC file if available
+}
+
+const initialState: PlaybackState = {
+  currentTrack: null,
+  queue: [],
+  queueIndex: -1,
+  isPlaying: false,
+  volume: 1,
+  currentTime: 0,
+  duration: 0,
+  lrcPath: null
+};
+
+interface PlaybackStore extends Writable<PlaybackState> {
+  playTrack(track: Track): void;
+  playQueue(tracks: Track[], startIndex?: number): void;
+  addToQueue(tracks: Track[]): void;
+  playNext(tracks: Track[]): void;
+  removeFromQueue(index: number): void;
+  play(): void;
+  pause(): void;
+  togglePlayPause(): void;
+  stop(): void;
+  next(): void;
+  previous(): void;
+  setCurrentTime(time: number): void;
+  setDuration(duration: number): void;
+  setVolume(volume: number): void;
+  setLrcPath(path: string | null): void;
+}
+
+function createPlaybackStore(): PlaybackStore {
+  const { subscribe, set, update } = writable<PlaybackState>(initialState);
+
+  return {
+    subscribe,
+
+    // Queue management
+    playTrack(track: Track) {
+      update(state => ({
+        ...state,
+        currentTrack: track,
+        queue: [track],
+        queueIndex: 0,
+        isPlaying: true
+      }));
+    },
+
+    playQueue(tracks: Track[], startIndex = 0) {
+      if (tracks.length === 0) return;
+      update(state => ({
+        ...state,
+        queue: tracks,
+        queueIndex: startIndex,
+        currentTrack: tracks[startIndex],
+        isPlaying: true
+      }));
+    },
+
+    addToQueue(tracks: Track[]) {
+      update(state => ({
+        ...state,
+        queue: [...state.queue, ...tracks]
+      }));
+    },
+
+    playNext(tracks: Track[]) {
+      update(state => {
+        // Insert after current track
+        if (state.queueIndex >= 0) {
+          const newQueue = [...state.queue];
+          newQueue.splice(state.queueIndex + 1, 0, ...tracks);
+          return {
+            ...state,
+            queue: newQueue
+          };
+        } else {
+          return {
+            ...state,
+            queue: [...tracks],
+            queueIndex: 0,
+            currentTrack: tracks[0],
+            isPlaying: true
+          };
+        }
+      });
+    },
+
+    removeFromQueue(index: number) {
+      update(state => {
+        const newQueue = [...state.queue];
+        newQueue.splice(index, 1);
+
+        let newQueueIndex = state.queueIndex;
+        if (index < state.queueIndex) {
+          newQueueIndex--;
+        } else if (index === state.queueIndex) {
+          // Removed current track
+          if (newQueue.length === 0) {
+            return {
+              ...state,
+              isPlaying: false,
+              currentTrack: null,
+              queue: [],
+              queueIndex: -1,
+              currentTime: 0,
+              duration: 0
+            };
+          }
+        }
+
+        return {
+          ...state,
+          queue: newQueue,
+          queueIndex: newQueueIndex
+        };
+      });
+    },
+
+    // Playback control
+    play() {
+      update(state => {
+        if (state.currentTrack) {
+          return { ...state, isPlaying: true };
+        }
+        return state;
+      });
+    },
+
+    pause() {
+      update(state => ({ ...state, isPlaying: false }));
+    },
+
+    togglePlayPause() {
+      update(state => ({ ...state, isPlaying: !state.isPlaying }));
+    },
+
+    stop() {
+      set({
+        ...initialState,
+        volume: get({ subscribe }).volume // Preserve volume
+      });
+    },
+
+    next() {
+      update(state => {
+        if (state.queueIndex < state.queue.length - 1) {
+          return {
+            ...state,
+            queueIndex: state.queueIndex + 1,
+            currentTrack: state.queue[state.queueIndex + 1],
+            isPlaying: true,
+            currentTime: 0
+          };
+        } else {
+          // End of queue - stop
+          return {
+            ...initialState,
+            volume: state.volume // Preserve volume
+          };
+        }
+      });
+    },
+
+    previous() {
+      update(state => {
+        // If more than 3 seconds into track, restart current track
+        if (state.currentTime > 3) {
+          return { ...state, currentTime: 0 };
+        } else if (state.queueIndex > 0) {
+          // Go to previous track
+          return {
+            ...state,
+            queueIndex: state.queueIndex - 1,
+            currentTrack: state.queue[state.queueIndex - 1],
+            isPlaying: true,
+            currentTime: 0
+          };
+        } else {
+          // At beginning of queue, restart current track
+          return { ...state, currentTime: 0 };
+        }
+      });
+    },
+
+    // Time and volume
+    setCurrentTime(time: number) {
+      update(state => ({ ...state, currentTime: time }));
+    },
+
+    setDuration(duration: number) {
+      update(state => ({ ...state, duration }));
+    },
+
+    setVolume(volume: number) {
+      update(state => ({
+        ...state,
+        volume: Math.max(0, Math.min(1, volume))
+      }));
+    },
+
+    // Lyrics
+    setLrcPath(path: string | null) {
+      update(state => ({ ...state, lrcPath: path }));
+    }
+  };
+}
+
+export const playback = createPlaybackStore();

src/routes/+layout.svelte

@@ -3,15 +3,38 @@
   import TitleBar from "$lib/TitleBar.svelte";
   import MenuBar from "$lib/MenuBar.svelte";
   import ToolBar from "$lib/ToolBar.svelte";
+  import NowPlayingPanel from "$lib/components/NowPlayingPanel.svelte";
   import { settings, loadSettings } from '$lib/stores/settings';
   import { scanPlaylists, type Playlist } from '$lib/library/scanner';
   import { downloadQueue } from '$lib/stores/downloadQueue';
   import { deezerQueueManager } from '$lib/services/deezer/queueManager';
+  import { playback } from '$lib/stores/playback';
 
   let { children } = $props();
 
   let playlists = $state<Playlist[]>([]);
   let playlistsLoadTimestamp = $state<number>(0);
+  let showNowPlaying = $state(false);
+  let userHasClosedPanel = $state(false);
+
+  // Auto-show now playing panel when track starts (but only if user hasn't manually closed it)
+  $effect(() => {
+    if ($playback.currentTrack && !showNowPlaying && !userHasClosedPanel) {
+      showNowPlaying = true;
+    }
+    // Reset the closed flag when there's no track
+    if (!$playback.currentTrack) {
+      userHasClosedPanel = false;
+    }
+  });
+
+  export function toggleNowPlaying() {
+    showNowPlaying = !showNowPlaying;
+    // Track when user manually closes the panel
+    if (!showNowPlaying) {
+      userHasClosedPanel = true;
+    }
+  }
 
   // Count active downloads (queued or downloading)
   let activeDownloads = $derived(
@@ -85,7 +108,7 @@
 <div class="app-container">
   <TitleBar />
   <MenuBar />
-  <ToolBar />
+  <ToolBar onToggleNowPlaying={toggleNowPlaying} />
 
   <div class="main-layout">
   <aside class="sidebar sunken-panel">
@@ -149,9 +172,17 @@
     </nav>
   </aside>
 
+    <div class="right-column">
       <main class="content-area sunken-panel">
         {@render children?.()}
       </main>
+
+      {#if showNowPlaying}
+        <div class="banner-panel sunken-panel">
+          <NowPlayingPanel />
+        </div>
+      {/if}
+    </div>
   </div>
 
   <div class="status-text">Ready</div>
@@ -230,15 +261,32 @@
     padding-left: 8px;
   }
 
-  .content-area {
+  .right-column {
     flex: 1;
     min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .content-area {
+    flex: 1;
+    min-height: 0;
     overflow-y: auto;
     padding: 0;
     font-family: "Pixelated MS Sans Serif", Arial;
     background: #121212;
   }
 
+  .banner-panel {
+    flex-shrink: 0;
+    height: 120px;
+    padding: 8px;
+    font-family: "Pixelated MS Sans Serif", Arial;
+    background: #121212;
+    overflow: hidden;
+  }
+
   .status-text {
     padding: 6px 8px 10px 10px;
     font-family: "Pixelated MS Sans Serif", Arial;

src/routes/playlists/[name]/+page.svelte

@@ -94,6 +94,7 @@
       {selectedTrackIndex}
       onTrackClick={handleTrackClick}
       showAlbumColumn={true}
+      useSequentialNumbers={true}
     />
   {/if}
 </div>

static/icons/pause.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6 4H10V20H6V4ZM14 4H18V20H14V4Z" fill="black"/>
+</svg>