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

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;
@@ -26,6 +28,8 @@
     useSequentialNumbers = false
   }: Props = $props();
 
+  let contextMenu = $state<{ x: number; y: number; trackIndex: number } | null>(null);
+
   function getThumbnailUrl(coverPath?: string): string {
     if (!coverPath) {
       return '';
@@ -38,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 -->
@@ -100,6 +135,8 @@
               <tr
                 class:highlighted={selectedTrackIndex === i}
                 onclick={() => handleTrackClick(i)}
+                ondblclick={() => handleTrackDoubleClick(i)}
+                oncontextmenu={(e) => handleContextMenu(e, i)}
               >
                 <td class="track-number">
                   {useSequentialNumbers ? i + 1 : (track.metadata.trackNumber ?? i + 1)}
@@ -126,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;

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>