From 520aaf818584fe7d25487ec70edf5ef33e42640b Mon Sep 17 00:00:00 2001
From: vicrodh <103399283+vicrodh@users.noreply.github.com>
Date: Sun, 1 Feb 2026 08:37:16 -0600
Subject: [PATCH] feat(immersive): add History tab to split and focus modes

- Create HistoryPanel component for viewing playback history
- Add 'history' tab to split mode tabs
- Add 'history-focus' tab to focus mode tabs
- Sync history when immersive mode opens (fix coverflow prev tracks)
- Keyboard shortcuts: H for history, 5 for history-focus
---
 .../immersive/ImmersiveHeader.svelte          |   8 +-
 .../immersive/ImmersivePlayer.svelte          |  31 ++-
 .../immersive/panels/HistoryPanel.svelte      | 225 ++++++++++++++++++
 src/routes/+page.svelte                       |   3 +
 4 files changed, 263 insertions(+), 4 deletions(-)
 create mode 100644 src/lib/components/immersive/panels/HistoryPanel.svelte

diff --git a/src/lib/components/immersive/ImmersiveHeader.svelte b/src/lib/components/immersive/ImmersiveHeader.svelte
index bcfc9e729..14ca14520 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, Image } from 'lucide-svelte';
+  import { Disc3, Mic2, ListMusic, Music2, Info, Radio, Maximize, Minimize, ChevronDown, X, Square, Copy, Minus, Image, History } 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' | 'static' | 'lyrics-focus' | 'queue-focus';
+  export type ImmersiveTab = 'lyrics' | 'trackInfo' | 'suggestions' | 'queue' | 'history';
+  export type FocusTab = 'coverflow' | 'static' | 'lyrics-focus' | 'queue-focus' | 'history-focus';
   export type ViewMode = 'focus' | 'split';
 
   interface Props {
@@ -80,6 +80,7 @@
     { id: 'trackInfo' as const, label: $t('player.trackInfo') || 'Track Info', icon: Info, enabled: hasTrackInfo },
     { id: 'suggestions' as const, label: $t('player.suggestions') || 'Suggestions', icon: Radio, enabled: hasSuggestions },
     { id: 'queue' as const, label: $t('player.queue') || 'Queue', icon: ListMusic, enabled: true },
+    { id: 'history' as const, label: $t('player.history') || 'History', icon: History, enabled: true },
   ].filter(tab => tab.enabled));
 
   // Focus mode tabs
@@ -88,6 +89,7 @@
     { id: 'static', label: 'Static', icon: Image },
     { id: 'lyrics-focus', label: 'Lyrics', icon: Mic2 },
     { id: 'queue-focus', label: 'Queue', icon: ListMusic },
+    { id: 'history-focus', label: 'History', icon: History },
   ];
 
   const isFocusMode = $derived(viewMode === 'focus');
diff --git a/src/lib/components/immersive/ImmersivePlayer.svelte b/src/lib/components/immersive/ImmersivePlayer.svelte
index 77b32a135..635d87d86 100644
--- a/src/lib/components/immersive/ImmersivePlayer.svelte
+++ b/src/lib/components/immersive/ImmersivePlayer.svelte
@@ -12,6 +12,7 @@
   import CoverflowPanel from './panels/CoverflowPanel.svelte';
   import StaticPanel from './panels/StaticPanel.svelte';
   import LyricsFocusPanel from './panels/LyricsFocusPanel.svelte';
+  import HistoryPanel from './panels/HistoryPanel.svelte';
   import QualityBadge from '$lib/components/QualityBadge.svelte';
 
   interface LyricsLine {
@@ -72,6 +73,9 @@
     queueCurrentIndex?: number;
     onQueuePlayTrack?: (index: number) => void;
     onQueueClear?: () => void;
+    // History
+    historyTracks?: QueueTrack[];
+    onPlayHistoryTrack?: (trackId: string) => void;
   }
 
   let {
@@ -112,7 +116,9 @@
     queueTracks = [],
     queueCurrentIndex = 0,
     onQueuePlayTrack,
-    onQueueClear
+    onQueueClear,
+    historyTracks = [],
+    onPlayHistoryTrack
   }: Props = $props();
 
   // UI State
@@ -235,6 +241,11 @@
         if (viewMode === 'split') activeTab = 'queue';
         else if (viewMode === 'focus') activeFocusTab = 'queue-focus';
         break;
+      case 'h':
+      case 'H':
+        if (viewMode === 'split') activeTab = 'history';
+        else if (viewMode === 'focus') activeFocusTab = 'history-focus';
+        break;
       // Focus mode tabs
       case '1':
         if (viewMode === 'focus') activeFocusTab = 'coverflow';
@@ -248,6 +259,9 @@
       case '4':
         if (viewMode === 'focus') activeFocusTab = 'queue-focus';
         break;
+      case '5':
+        if (viewMode === 'focus') activeFocusTab = 'history-focus';
+        break;
     }
     resetHideTimer();
   }
@@ -356,6 +370,16 @@
             />
           </div>
         </div>
+      {:else if activeFocusTab === 'history-focus'}
+        <!-- History Focus: Full screen history -->
+        <div class="focus-panel">
+          <div class="focus-panel-content queue-content">
+            <HistoryPanel
+              tracks={historyTracks}
+              onPlayTrack={(trackId) => onPlayHistoryTrack?.(trackId)}
+            />
+          </div>
+        </div>
       {/if}
     {:else}
       <!-- Split: Artwork + Panel side by side -->
@@ -403,6 +427,11 @@
               onPlayTrack={(index) => onQueuePlayTrack?.(index)}
               onClear={onQueueClear}
             />
+          {:else if activeTab === 'history'}
+            <HistoryPanel
+              tracks={historyTracks}
+              onPlayTrack={(trackId) => onPlayHistoryTrack?.(trackId)}
+            />
           {/if}
         </div>
       </div>
diff --git a/src/lib/components/immersive/panels/HistoryPanel.svelte b/src/lib/components/immersive/panels/HistoryPanel.svelte
new file mode 100644
index 000000000..6b412f2ca
--- /dev/null
+++ b/src/lib/components/immersive/panels/HistoryPanel.svelte
@@ -0,0 +1,225 @@
+<script lang="ts">
+  import { History, 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[];
+    onPlayTrack: (trackId: string) => void;
+  }
+
+  let {
+    tracks = [],
+    onPlayTrack
+  }: Props = $props();
+
+  const hasHistory = $derived(tracks.length > 0);
+
+  function formatDuration(duration?: string | number): string {
+    if (!duration) return '';
+    if (typeof duration === 'string') return duration;
+    const mins = Math.floor(duration / 60);
+    const secs = Math.floor(duration % 60);
+    return `${mins}:${secs.toString().padStart(2, '0')}`;
+  }
+</script>
+
+<div class="history-panel">
+  <!-- Header -->
+  <div class="panel-header">
+    <div class="header-title">
+      <History size={18} />
+      <span>{$t('player.history') || 'History'}</span>
+    </div>
+    {#if hasHistory}
+      <span class="track-count">{tracks.length} {$t('player.tracks') || 'tracks'}</span>
+    {/if}
+  </div>
+
+  <!-- History List -->
+  <div class="history-section">
+    {#if hasHistory}
+      <div class="tracks-list">
+        {#each tracks as track, i (track.id + '-' + i)}
+          <div class="track-item">
+            <button
+              class="play-btn"
+              onclick={() => onPlayTrack(String(track.id))}
+              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.historyEmpty') || 'No history yet'}</span>
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .history-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);
+  }
+
+  .track-count {
+    font-size: 12px;
+    color: var(--alpha-50, rgba(255, 255, 255, 0.5));
+  }
+
+  .history-section {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .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));
+  }
+
+  .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>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 5b1759d1a..0fa3dc60d 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -2594,6 +2594,7 @@
     const immersiveOpen = isFullScreenOpen || isFocusModeOpen;
     if (immersiveOpen && trackId !== undefined) {
       syncQueueState();
+      updateQueueCounts(); // Also sync history for coverflow
     }
   });
 
@@ -3146,6 +3147,8 @@
           // index === historyLen is current track, do nothing
         }}
         onQueueClear={handleClearQueue}
+        {historyTracks}
+        onPlayHistoryTrack={handlePlayHistoryTrack}
       />
     {/if}