feat(immersive): add Queue tab to stay in immersive mode

- Create QueuePanel component for immersive mode
- Add queue tab to ImmersiveHeader with ListMusic icon
- Update ImmersivePlayer to render QueuePanel and pass queue data
- Add Q keyboard shortcut to switch to queue tab
- Pass queue tracks from +page.svelte to ImmersivePlayer

Users can now manage their queue without leaving immersive mode.

src/lib/components/immersive/ImmersiveHeader.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import { X, Maximize2, Minimize2, Music2, Info, Radio, BarChart3 } from 'lucide-svelte';
+  import { X, Maximize2, Minimize2, Music2, Info, Radio, BarChart3, ListMusic } from 'lucide-svelte';
   import { t } from '$lib/i18n';
 
-  export type ImmersiveTab = 'lyrics' | 'credits' | 'suggestions' | 'visualizer';
+  export type ImmersiveTab = 'lyrics' | 'credits' | 'suggestions' | 'visualizer' | 'queue';
 
   interface Props {
     activeTab: ImmersiveTab;
@@ -31,6 +31,7 @@
     { id: 'credits' as const, label: $t('player.credits') || 'Credits', icon: Info, enabled: hasCredits },
     { id: 'suggestions' as const, label: $t('player.suggestions') || 'Suggestions', icon: Radio, enabled: hasSuggestions },
     { id: 'visualizer' as const, label: $t('player.visualizer') || 'Visualizer', icon: BarChart3, enabled: hasVisualizer },
+    { id: 'queue' as const, label: $t('player.queue') || 'Queue', icon: ListMusic, enabled: true },
   ].filter(tab => tab.enabled));
 </script>
 

src/lib/components/immersive/ImmersivePlayer.svelte

@@ -8,11 +8,20 @@
   import CreditsPanel from './panels/CreditsPanel.svelte';
   import SuggestionsPanel from './panels/SuggestionsPanel.svelte';
   import VisualizerPanel from './panels/VisualizerPanel.svelte';
+  import QueuePanel from './panels/QueuePanel.svelte';
 
   interface LyricsLine {
     text: string;
   }
 
+  interface QueueTrack {
+    id: string | number;
+    title: string;
+    artist: string;
+    artwork: string;
+    duration?: string | number;
+  }
+
   interface Props {
     isOpen: boolean;
     onClose: () => void;
@@ -56,6 +65,11 @@
     enableCredits?: boolean;
     enableSuggestions?: boolean;
     enableVisualizer?: boolean;
+    // Queue
+    queueTracks?: QueueTrack[];
+    queueCurrentIndex?: number;
+    onQueuePlayTrack?: (index: number) => void;
+    onQueueClear?: () => void;
   }
 
   let {
@@ -94,7 +108,11 @@
     lyricsError = null,
     enableCredits = true,
     enableSuggestions = true,
-    enableVisualizer = false
+    enableVisualizer = false,
+    queueTracks = [],
+    queueCurrentIndex = 0,
+    onQueuePlayTrack,
+    onQueueClear
   }: Props = $props();
 
   // UI State
@@ -159,6 +177,10 @@
       case 'V':
         if (enableVisualizer) activeTab = 'visualizer';
         break;
+      case 'q':
+      case 'Q':
+        activeTab = 'queue';
+        break;
     }
     resetHideTimer();
   }
@@ -232,6 +254,13 @@
           <SuggestionsPanel {trackId} {artistId} />
         {:else if activeTab === 'visualizer'}
           <VisualizerPanel {isPlaying} />
+        {:else if activeTab === 'queue'}
+          <QueuePanel
+            tracks={queueTracks}
+            currentIndex={queueCurrentIndex}
+            onPlayTrack={(index) => onQueuePlayTrack?.(index)}
+            onClear={onQueueClear}
+          />
         {/if}
       </div>
     </div>

src/lib/components/immersive/panels/QueuePanel.svelte

@@ -0,0 +1,297 @@
+<script lang="ts">
+  import { List, Play } from 'lucide-svelte';
+  import { t } from '$lib/i18n';
+
+  interface QueueTrack {
+    id: string | number;
+    title: string;
+    artist: string;
+    artwork: string;
+    duration?: string | number;
+  }
+
+  interface Props {
+    tracks: QueueTrack[];
+    currentIndex: number;
+    onPlayTrack: (index: number) => void;
+    onClear?: () => void;
+  }
+
+  let {
+    tracks = [],
+    currentIndex = 0,
+    onPlayTrack,
+    onClear
+  }: Props = $props();
+
+  const upcomingTracks = $derived(tracks.slice(currentIndex + 1));
+  const currentTrack = $derived(tracks[currentIndex]);
+  const hasUpcoming = $derived(upcomingTracks.length > 0);
+
+  function formatDuration(duration?: string | number): string {
+    if (!duration) return '';
+    // If already a string (e.g., "3:45"), return as-is
+    if (typeof duration === 'string') return duration;
+    // If number (seconds), format it
+    const mins = Math.floor(duration / 60);
+    const secs = Math.floor(duration % 60);
+    return `${mins}:${secs.toString().padStart(2, '0')}`;
+  }
+</script>
+
+<div class="queue-panel">
+  <!-- Header -->
+  <div class="panel-header">
+    <div class="header-title">
+      <List size={18} />
+      <span>{$t('player.queue') || 'Queue'}</span>
+    </div>
+    {#if hasUpcoming && onClear}
+      <button class="clear-btn" onclick={onClear}>
+        {$t('actions.clearQueue') || 'Clear'}
+      </button>
+    {/if}
+  </div>
+
+  <!-- Now Playing -->
+  {#if currentTrack}
+    <div class="section">
+      <div class="section-label">{$t('player.nowPlaying') || 'Now Playing'}</div>
+      <div class="track-item current">
+        <img src={currentTrack.artwork} alt="" class="track-artwork" />
+        <div class="track-info">
+          <div class="track-title">{currentTrack.title}</div>
+          <div class="track-artist">{currentTrack.artist}</div>
+        </div>
+        <div class="track-duration">{formatDuration(currentTrack.duration)}</div>
+      </div>
+    </div>
+  {/if}
+
+  <!-- Up Next -->
+  <div class="section upcoming-section">
+    <div class="section-label">
+      {$t('player.upNext') || 'Up Next'}
+      {#if hasUpcoming}
+        <span class="track-count">({upcomingTracks.length})</span>
+      {/if}
+    </div>
+
+    {#if hasUpcoming}
+      <div class="tracks-list">
+        {#each upcomingTracks as track, i (track.id + '-' + i)}
+          {@const actualIndex = currentIndex + 1 + i}
+          <div class="track-item">
+            <button
+              class="play-btn"
+              onclick={() => onPlayTrack(actualIndex)}
+              title={$t('actions.playNow') || 'Play now'}
+            >
+              <Play size={14} />
+            </button>
+            <img src={track.artwork} alt="" class="track-artwork" />
+            <div class="track-info">
+              <div class="track-title">{track.title}</div>
+              <div class="track-artist">{track.artist}</div>
+            </div>
+            <div class="track-duration">{formatDuration(track.duration)}</div>
+          </div>
+        {/each}
+      </div>
+    {:else}
+      <div class="empty-state">
+        <span>{$t('player.queueEmpty') || 'Queue is empty'}</span>
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .queue-panel {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .panel-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 4px 16px;
+    border-bottom: 1px solid var(--alpha-10, rgba(255, 255, 255, 0.1));
+    margin-bottom: 16px;
+    flex-shrink: 0;
+  }
+
+  .header-title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--text-primary, white);
+  }
+
+  .clear-btn {
+    padding: 6px 12px;
+    background: var(--alpha-10, rgba(255, 255, 255, 0.1));
+    border: none;
+    border-radius: 6px;
+    color: var(--alpha-70, rgba(255, 255, 255, 0.7));
+    font-size: 12px;
+    cursor: pointer;
+    transition: all 150ms ease;
+  }
+
+  .clear-btn:hover {
+    background: var(--alpha-15, rgba(255, 255, 255, 0.15));
+    color: var(--text-primary, white);
+  }
+
+  .section {
+    margin-bottom: 20px;
+    flex-shrink: 0;
+  }
+
+  .upcoming-section {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .section-label {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--alpha-50, rgba(255, 255, 255, 0.5));
+    margin-bottom: 12px;
+    padding: 0 4px;
+  }
+
+  .track-count {
+    font-weight: 400;
+    color: var(--alpha-40, rgba(255, 255, 255, 0.4));
+  }
+
+  .tracks-list {
+    flex: 1;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding-right: 8px;
+  }
+
+  .tracks-list::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  .tracks-list::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .tracks-list::-webkit-scrollbar-thumb {
+    background: var(--alpha-20, rgba(255, 255, 255, 0.2));
+    border-radius: 2px;
+  }
+
+  .track-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px;
+    border-radius: 8px;
+    transition: background 150ms ease;
+  }
+
+  .track-item:hover {
+    background: var(--alpha-10, rgba(255, 255, 255, 0.1));
+  }
+
+  .track-item.current {
+    background: var(--alpha-10, rgba(255, 255, 255, 0.1));
+    border: 1px solid var(--alpha-15, rgba(255, 255, 255, 0.15));
+  }
+
+  .play-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    background: var(--alpha-15, rgba(255, 255, 255, 0.15));
+    border: none;
+    border-radius: 50%;
+    color: var(--alpha-70, rgba(255, 255, 255, 0.7));
+    cursor: pointer;
+    opacity: 0;
+    transition: all 150ms ease;
+    flex-shrink: 0;
+  }
+
+  .track-item:hover .play-btn {
+    opacity: 1;
+  }
+
+  .play-btn:hover {
+    background: var(--alpha-25, rgba(255, 255, 255, 0.25));
+    color: var(--text-primary, white);
+    transform: scale(1.1);
+  }
+
+  .track-artwork {
+    width: 40px;
+    height: 40px;
+    border-radius: 4px;
+    object-fit: cover;
+    flex-shrink: 0;
+  }
+
+  .track-info {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .track-title {
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--text-primary, white);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .track-artist {
+    font-size: 12px;
+    color: var(--alpha-60, rgba(255, 255, 255, 0.6));
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-top: 2px;
+  }
+
+  .track-duration {
+    font-size: 12px;
+    font-family: var(--font-mono);
+    color: var(--alpha-50, rgba(255, 255, 255, 0.5));
+    flex-shrink: 0;
+  }
+
+  .empty-state {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 120px;
+    color: var(--alpha-40, rgba(255, 255, 255, 0.4));
+    font-size: 14px;
+    font-style: italic;
+  }
+</style>

src/routes/+page.svelte

@@ -3109,6 +3109,18 @@
         enableCredits={true}
         enableSuggestions={true}
         enableVisualizer={false}
+        queueTracks={[
+          ...(currentQueueTrack ? [currentQueueTrack] : []),
+          ...queue
+        ]}
+        queueCurrentIndex={0}
+        onQueuePlayTrack={(index) => {
+          // Index 0 is current track, 1+ is upcoming (index - 1 in queue array)
+          if (index > 0) {
+            handleQueueTrackPlay(queue[index - 1]?.id?.toString() ?? '');
+          }
+        }}
+        onQueueClear={handleClearQueue}
       />
     {/if}