From 9099f9490405cf17122daf5821ec52f8663697a9 Mon Sep 17 00:00:00 2001
From: vicrodh <103399283+vicrodh@users.noreply.github.com>
Date: Sun, 1 Feb 2026 08:18:17 -0600
Subject: [PATCH] feat(immersive): add real coverflow with queue navigation

- Rename old CoverflowPanel to StaticPanel (single artwork view)
- Create new CoverflowPanel with actual coverflow effect:
  - Shows 5 album covers (2 prev, current, 2 next)
  - 3D perspective rotation on side covers
  - Click on side covers to navigate queue
  - Smooth animation on track change
- Add 'static' tab to focus mode (4 tabs total)
- Update keyboard shortcuts: 1-4 for focus tabs
---
 .../immersive/ImmersiveHeader.svelte          |   5 +-
 .../immersive/ImmersivePlayer.svelte          |  23 +-
 .../immersive/panels/CoverflowPanel.svelte    | 297 ++++++++++++++++--
 .../immersive/panels/StaticPanel.svelte       | 199 ++++++++++++
 4 files changed, 489 insertions(+), 35 deletions(-)
 create mode 100644 src/lib/components/immersive/panels/StaticPanel.svelte

diff --git a/src/lib/components/immersive/ImmersiveHeader.svelte b/src/lib/components/immersive/ImmersiveHeader.svelte
index 4ff780a1c..bcfc9e729 100644
--- a/src/lib/components/immersive/ImmersiveHeader.svelte
+++ b/src/lib/components/immersive/ImmersiveHeader.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-  import { Disc3, Mic2, ListMusic, Music2, Info, Radio, Maximize, Minimize, ChevronDown, X, Square, Copy, Minus } from 'lucide-svelte';
+  import { Disc3, Mic2, ListMusic, Music2, Info, Radio, Maximize, Minimize, ChevronDown, X, Square, Copy, Minus, Image } from 'lucide-svelte';
   import { t } from '$lib/i18n';
   import { getCurrentWindow } from '@tauri-apps/api/window';
 
   export type ImmersiveTab = 'lyrics' | 'trackInfo' | 'suggestions' | 'queue';
-  export type FocusTab = 'coverflow' | 'lyrics-focus' | 'queue-focus';
+  export type FocusTab = 'coverflow' | 'static' | 'lyrics-focus' | 'queue-focus';
   export type ViewMode = 'focus' | 'split';
 
   interface Props {
@@ -85,6 +85,7 @@
   // Focus mode tabs
   const focusTabs: { id: FocusTab; label: string; icon: typeof Disc3 }[] = [
     { id: 'coverflow', label: 'Coverflow', icon: Disc3 },
+    { id: 'static', label: 'Static', icon: Image },
     { id: 'lyrics-focus', label: 'Lyrics', icon: Mic2 },
     { id: 'queue-focus', label: 'Queue', icon: ListMusic },
   ];
diff --git a/src/lib/components/immersive/ImmersivePlayer.svelte b/src/lib/components/immersive/ImmersivePlayer.svelte
index cbf786045..77b32a135 100644
--- a/src/lib/components/immersive/ImmersivePlayer.svelte
+++ b/src/lib/components/immersive/ImmersivePlayer.svelte
@@ -10,6 +10,7 @@
   import SuggestionsPanel from './panels/SuggestionsPanel.svelte';
   import QueuePanel from './panels/QueuePanel.svelte';
   import CoverflowPanel from './panels/CoverflowPanel.svelte';
+  import StaticPanel from './panels/StaticPanel.svelte';
   import LyricsFocusPanel from './panels/LyricsFocusPanel.svelte';
   import QualityBadge from '$lib/components/QualityBadge.svelte';
 
@@ -239,9 +240,12 @@
         if (viewMode === 'focus') activeFocusTab = 'coverflow';
         break;
       case '2':
-        if (viewMode === 'focus') activeFocusTab = 'lyrics-focus';
+        if (viewMode === 'focus') activeFocusTab = 'static';
         break;
       case '3':
+        if (viewMode === 'focus') activeFocusTab = 'lyrics-focus';
+        break;
+      case '4':
         if (viewMode === 'focus') activeFocusTab = 'queue-focus';
         break;
     }
@@ -306,7 +310,7 @@
     {#if viewMode === 'focus'}
       <!-- Focus Mode Views -->
       {#if activeFocusTab === 'coverflow'}
-        <!-- Coverflow: Centered artwork -->
+        <!-- Coverflow: Animated carousel of album covers -->
         <CoverflowPanel
           {artwork}
           {trackTitle}
@@ -316,6 +320,21 @@
           {quality}
           {bitDepth}
           {samplingRate}
+          {queueTracks}
+          {queueCurrentIndex}
+          onNavigate={(index) => onQueuePlayTrack?.(index)}
+        />
+      {:else if activeFocusTab === 'static'}
+        <!-- Static: Single centered artwork -->
+        <StaticPanel
+          {artwork}
+          {trackTitle}
+          {artist}
+          {album}
+          {isPlaying}
+          {quality}
+          {bitDepth}
+          {samplingRate}
         />
       {:else if activeFocusTab === 'lyrics-focus'}
         <!-- Lyrics Focus: Single line, large, centered -->
diff --git a/src/lib/components/immersive/panels/CoverflowPanel.svelte b/src/lib/components/immersive/panels/CoverflowPanel.svelte
index 4c3559238..c53306424 100644
--- a/src/lib/components/immersive/panels/CoverflowPanel.svelte
+++ b/src/lib/components/immersive/panels/CoverflowPanel.svelte
@@ -1,6 +1,13 @@
 <script lang="ts">
   import QualityBadge from '$lib/components/QualityBadge.svelte';
 
+  interface QueueTrack {
+    id: string | number;
+    title: string;
+    artist: string;
+    artwork: string;
+  }
+
   interface Props {
     artwork: string;
     trackTitle: string;
@@ -10,6 +17,10 @@
     quality?: string;
     bitDepth?: number;
     samplingRate?: number;
+    // Queue for coverflow
+    queueTracks?: QueueTrack[];
+    queueCurrentIndex?: number;
+    onNavigate?: (index: number) => void;
   }
 
   let {
@@ -20,15 +31,87 @@
     isPlaying = false,
     quality,
     bitDepth,
-    samplingRate
+    samplingRate,
+    queueTracks = [],
+    queueCurrentIndex = 0,
+    onNavigate
   }: Props = $props();
+
+  // Build coverflow items: 2 prev + current + 2 next
+  const coverflowItems = $derived.by(() => {
+    const items: { index: number; artwork: string; title: string; artist: string; position: number }[] = [];
+
+    // Position: -2, -1, 0 (center), 1, 2
+    for (let offset = -2; offset <= 2; offset++) {
+      const queueIndex = queueCurrentIndex + offset;
+
+      if (queueIndex >= 0 && queueIndex < queueTracks.length) {
+        const track = queueTracks[queueIndex];
+        items.push({
+          index: queueIndex,
+          artwork: track.artwork,
+          title: track.title,
+          artist: track.artist,
+          position: offset
+        });
+      } else if (offset === 0) {
+        // Always show current even if queue is empty
+        items.push({
+          index: queueCurrentIndex,
+          artwork,
+          title: trackTitle,
+          artist,
+          position: 0
+        });
+      }
+    }
+
+    return items;
+  });
+
+  // Track previous index for animation direction
+  let previousIndex = $state(queueCurrentIndex);
+  let animationDirection = $state<'left' | 'right' | null>(null);
+
+  $effect(() => {
+    if (queueCurrentIndex !== previousIndex) {
+      animationDirection = queueCurrentIndex > previousIndex ? 'left' : 'right';
+      previousIndex = queueCurrentIndex;
+
+      // Reset animation direction after animation completes
+      setTimeout(() => {
+        animationDirection = null;
+      }, 500);
+    }
+  });
+
+  function handleCoverClick(index: number) {
+    if (index !== queueCurrentIndex && onNavigate) {
+      onNavigate(index);
+    }
+  }
 </script>
 
 <div class="coverflow-panel">
-  <div class="artwork-wrapper">
-    <div class="artwork-container" class:playing={isPlaying}>
-      <img src={artwork} alt={trackTitle} class="artwork" />
-    </div>
+  <div class="coverflow-container" class:animate-left={animationDirection === 'left'} class:animate-right={animationDirection === 'right'}>
+    {#each coverflowItems as item (item.index)}
+      <button
+        class="coverflow-item"
+        class:center={item.position === 0}
+        class:left-1={item.position === -1}
+        class:left-2={item.position === -2}
+        class:right-1={item.position === 1}
+        class:right-2={item.position === 2}
+        onclick={() => handleCoverClick(item.index)}
+        disabled={item.position === 0}
+        title={item.position === 0 ? undefined : `${item.title} - ${item.artist}`}
+      >
+        <div class="cover-wrapper">
+          <img src={item.artwork} alt={item.title} class="cover-image" />
+          <div class="cover-reflection"></div>
+        </div>
+      </button>
+    {/each}
   </div>
 
   <div class="track-info">
@@ -62,46 +145,150 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    gap: 20px;
-    /* Offset for header (70px) and controls (120px) to achieve true visual center */
+    gap: 24px;
     padding-top: 70px;
     padding-bottom: 120px;
     padding-left: 40px;
     padding-right: 40px;
     z-index: 5;
+    perspective: 1000px;
   }
 
-  .artwork-wrapper {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-
-  .artwork-container {
+  .coverflow-container {
     position: relative;
-    width: min(45vh, 360px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    max-width: 900px;
     height: min(45vh, 360px);
+    perspective: 1200px;
+    transform-style: preserve-3d;
+  }
+
+  .coverflow-item {
+    position: absolute;
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    transition: all 500ms cubic-bezier(0.4, 0, 0.2, 1);
+    transform-style: preserve-3d;
+  }
+
+  .coverflow-item:disabled {
+    cursor: default;
+  }
+
+  .coverflow-item:not(:disabled):hover {
+    transform: translateX(var(--hover-x, 0)) rotateY(var(--hover-rotate, 0)) scale(1.05);
+  }
+
+  .cover-wrapper {
+    position: relative;
+    width: min(38vh, 300px);
+    height: min(38vh, 300px);
     border-radius: 8px;
-    overflow: hidden;
-    box-shadow:
-      0 8px 32px rgba(0, 0, 0, 0.5),
-      0 20px 60px rgba(0, 0, 0, 0.3);
-    transition: transform 300ms ease, box-shadow 300ms ease;
+    overflow: visible;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+    transition: box-shadow 300ms ease;
   }
 
-  .artwork-container:hover {
-    transform: scale(1.02) translateY(-4px);
-    box-shadow:
-      0 12px 40px rgba(0, 0, 0, 0.5),
-      0 28px 80px rgba(0, 0, 0, 0.3);
+  .coverflow-item:not(:disabled):hover .cover-wrapper {
+    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
   }
 
-  .artwork {
+  .cover-image {
     width: 100%;
     height: 100%;
     object-fit: cover;
+    border-radius: 8px;
   }
 
+  .cover-reflection {
+    position: absolute;
+    bottom: -60%;
+    left: 0;
+    right: 0;
+    height: 60%;
+    background: linear-gradient(
+      to bottom,
+      rgba(255, 255, 255, 0.1) 0%,
+      transparent 100%
+    );
+    transform: scaleY(-1);
+    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, transparent 50%);
+    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, transparent 50%);
+    pointer-events: none;
+    border-radius: 8px;
+  }
+
+  /* Center item */
+  .coverflow-item.center {
+    z-index: 5;
+    transform: translateX(0) rotateY(0deg) scale(1);
+  }
+
+  .coverflow-item.center .cover-wrapper {
+    width: min(45vh, 360px);
+    height: min(45vh, 360px);
+    box-shadow:
+      0 8px 32px rgba(0, 0, 0, 0.5),
+      0 20px 60px rgba(0, 0, 0, 0.3);
+  }
+
+  /* Left items */
+  .coverflow-item.left-1 {
+    z-index: 4;
+    transform: translateX(-180px) rotateY(45deg) scale(0.85);
+    --hover-x: -170px;
+    --hover-rotate: 40deg;
+    opacity: 0.9;
+  }
+
+  .coverflow-item.left-2 {
+    z-index: 3;
+    transform: translateX(-300px) rotateY(55deg) scale(0.7);
+    --hover-x: -290px;
+    --hover-rotate: 50deg;
+    opacity: 0.6;
+  }
+
+  /* Right items */
+  .coverflow-item.right-1 {
+    z-index: 4;
+    transform: translateX(180px) rotateY(-45deg) scale(0.85);
+    --hover-x: 170px;
+    --hover-rotate: -40deg;
+    opacity: 0.9;
+  }
+
+  .coverflow-item.right-2 {
+    z-index: 3;
+    transform: translateX(300px) rotateY(-55deg) scale(0.7);
+    --hover-x: 290px;
+    --hover-rotate: -50deg;
+    opacity: 0.6;
+  }
+
+  /* Animation classes */
+  .coverflow-container.animate-left .coverflow-item {
+    animation: slideLeft 500ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .coverflow-container.animate-right .coverflow-item {
+    animation: slideRight 500ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  @keyframes slideLeft {
+    0% { transform: translateX(calc(var(--translate-x, 0px) + 100px)); }
+  }
+
+  @keyframes slideRight {
+    0% { transform: translateX(calc(var(--translate-x, 0px) - 100px)); }
+  }
+
+  /* Track info */
   .track-info {
     display: flex;
     flex-direction: column;
@@ -174,20 +361,68 @@
   }
 
   /* Responsive */
+  @media (max-width: 900px) {
+    .coverflow-item.left-1 {
+      transform: translateX(-140px) rotateY(45deg) scale(0.8);
+      --hover-x: -130px;
+    }
+
+    .coverflow-item.left-2 {
+      transform: translateX(-230px) rotateY(55deg) scale(0.65);
+      --hover-x: -220px;
+    }
+
+    .coverflow-item.right-1 {
+      transform: translateX(140px) rotateY(-45deg) scale(0.8);
+      --hover-x: 130px;
+    }
+
+    .coverflow-item.right-2 {
+      transform: translateX(230px) rotateY(-55deg) scale(0.65);
+      --hover-x: 220px;
+    }
+  }
+
   @media (max-width: 768px) {
     .coverflow-panel {
-      padding: 70px 24px 130px;
+      padding: 70px 16px 130px;
       gap: 16px;
     }
 
-    .artwork-container {
-      width: min(55vw, 280px);
-      height: min(55vw, 280px);
+    .cover-wrapper {
+      width: min(30vh, 200px);
+      height: min(30vh, 200px);
+    }
+
+    .coverflow-item.center .cover-wrapper {
+      width: min(38vh, 260px);
+      height: min(38vh, 260px);
+    }
+
+    .coverflow-item.left-1 {
+      transform: translateX(-100px) rotateY(45deg) scale(0.75);
+    }
+
+    .coverflow-item.left-2 {
+      display: none;
+    }
+
+    .coverflow-item.right-1 {
+      transform: translateX(100px) rotateY(-45deg) scale(0.75);
+    }
+
+    .coverflow-item.right-2 {
+      display: none;
     }
   }
 
   @media (max-height: 600px) {
-    .artwork-container {
+    .cover-wrapper {
+      width: min(28vh, 180px);
+      height: min(28vh, 180px);
+    }
+
+    .coverflow-item.center .cover-wrapper {
       width: min(32vh, 220px);
       height: min(32vh, 220px);
     }
diff --git a/src/lib/components/immersive/panels/StaticPanel.svelte b/src/lib/components/immersive/panels/StaticPanel.svelte
new file mode 100644
index 000000000..780bda029
--- /dev/null
+++ b/src/lib/components/immersive/panels/StaticPanel.svelte
@@ -0,0 +1,199 @@
+<script lang="ts">
+  import QualityBadge from '$lib/components/QualityBadge.svelte';
+
+  interface Props {
+    artwork: string;
+    trackTitle: string;
+    artist: string;
+    album?: string;
+    isPlaying?: boolean;
+    quality?: string;
+    bitDepth?: number;
+    samplingRate?: number;
+  }
+
+  let {
+    artwork,
+    trackTitle,
+    artist,
+    album,
+    isPlaying = false,
+    quality,
+    bitDepth,
+    samplingRate
+  }: Props = $props();
+</script>
+
+<div class="static-panel">
+  <div class="artwork-wrapper">
+    <div class="artwork-container" class:playing={isPlaying}>
+      <img src={artwork} alt={trackTitle} class="artwork" />
+    </div>
+  </div>
+
+  <div class="track-info">
+    {#if isPlaying}
+      <div class="now-playing-indicator">
+        <div class="equalizer">
+          <span class="bar"></span>
+          <span class="bar"></span>
+          <span class="bar"></span>
+          <span class="bar"></span>
+        </div>
+        <span>Now Playing</span>
+      </div>
+    {/if}
+    <h1 class="track-title">{trackTitle}</h1>
+    <p class="track-artist">{artist}</p>
+    {#if album}
+      <p class="track-album">{album}</p>
+    {/if}
+    <div class="quality-badge-wrapper">
+      <QualityBadge {quality} {bitDepth} {samplingRate} />
+    </div>
+  </div>
+</div>
+
+<style>
+  .static-panel {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 20px;
+    /* Offset for header (70px) and controls (120px) to achieve true visual center */
+    padding-top: 70px;
+    padding-bottom: 120px;
+    padding-left: 40px;
+    padding-right: 40px;
+    z-index: 5;
+  }
+
+  .artwork-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .artwork-container {
+    position: relative;
+    width: min(45vh, 360px);
+    height: min(45vh, 360px);
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow:
+      0 8px 32px rgba(0, 0, 0, 0.5),
+      0 20px 60px rgba(0, 0, 0, 0.3);
+    transition: transform 300ms ease, box-shadow 300ms ease;
+  }
+
+  .artwork-container:hover {
+    transform: scale(1.02) translateY(-4px);
+    box-shadow:
+      0 12px 40px rgba(0, 0, 0, 0.5),
+      0 28px 80px rgba(0, 0, 0, 0.3);
+  }
+
+  .artwork {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .track-info {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    gap: 6px;
+    max-width: 600px;
+    margin-top: 8px;
+  }
+
+  .now-playing-indicator {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: var(--accent-primary, #7c3aed);
+    font-size: 12px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    margin-bottom: 8px;
+  }
+
+  .equalizer {
+    display: flex;
+    align-items: flex-end;
+    gap: 2px;
+    height: 14px;
+  }
+
+  .equalizer .bar {
+    width: 3px;
+    background: var(--accent-primary, #7c3aed);
+    border-radius: 1px;
+    animation: equalize 0.8s ease-in-out infinite;
+  }
+
+  .equalizer .bar:nth-child(1) { animation-delay: 0s; height: 60%; }
+  .equalizer .bar:nth-child(2) { animation-delay: 0.2s; height: 100%; }
+  .equalizer .bar:nth-child(3) { animation-delay: 0.1s; height: 40%; }
+  .equalizer .bar:nth-child(4) { animation-delay: 0.3s; height: 80%; }
+
+  @keyframes equalize {
+    0%, 100% { transform: scaleY(0.3); }
+    50% { transform: scaleY(1); }
+  }
+
+  .track-title {
+    font-size: clamp(20px, 3vw, 28px);
+    font-weight: 700;
+    color: var(--text-primary, white);
+    margin: 0;
+    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+  }
+
+  .track-artist {
+    font-size: clamp(14px, 2vw, 18px);
+    color: var(--alpha-70, rgba(255, 255, 255, 0.7));
+    margin: 0;
+  }
+
+  .track-album {
+    font-size: clamp(12px, 1.5vw, 14px);
+    color: var(--alpha-50, rgba(255, 255, 255, 0.5));
+    margin: 0;
+    font-style: italic;
+  }
+
+  .quality-badge-wrapper {
+    margin-top: 12px;
+  }
+
+  /* Responsive */
+  @media (max-width: 768px) {
+    .static-panel {
+      padding: 70px 24px 130px;
+      gap: 16px;
+    }
+
+    .artwork-container {
+      width: min(55vw, 280px);
+      height: min(55vw, 280px);
+    }
+  }
+
+  @media (max-height: 600px) {
+    .artwork-container {
+      width: min(32vh, 220px);
+      height: min(32vh, 220px);
+    }
+
+    .track-info {
+      gap: 4px;
+    }
+  }
+</style>