From 84c2261829ec1fc05d2f512ecce13021da63d004 Mon Sep 17 00:00:00 2001
From: vicrodh <103399283+vicrodh@users.noreply.github.com>
Date: Fri, 23 Jan 2026 10:28:16 -0600
Subject: [PATCH] feat(queue): redesign QueuePanel with tabs, history, and
 infinite play

- Add Queue/History tabs with new layout
- Implement Now Playing card with spectrum animation
- Add History tab showing recently played tracks from backend
- Add Infinite Play toggle (persisted to localStorage)
- Relocate search to footer (expands left)
- Add Up Next counter (X/Y format)
- Implement 20-track pagination with load more
- Add proper i18n keys for new features
- Add new SVG icons (add-to-list, trash-list)
---
 src/lib/components/QueuePanel.svelte | 1024 +++++++++++++++++---------
 src/lib/i18n/locales/en.json         |    8 +-
 src/lib/i18n/locales/es.json         |    8 +-
 src/routes/+page.svelte              |   83 ++-
 static/add-to-list.svg               |    7 +
 static/trash-list.svg                |    4 +
 6 files changed, 785 insertions(+), 349 deletions(-)
 create mode 100644 static/add-to-list.svg
 create mode 100644 static/trash-list.svg

diff --git a/src/lib/components/QueuePanel.svelte b/src/lib/components/QueuePanel.svelte
index 0097277ec..74b36fb80 100644
--- a/src/lib/components/QueuePanel.svelte
+++ b/src/lib/components/QueuePanel.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
-  import { X, GripVertical, Play, Search, WifiOff } from 'lucide-svelte';
+  import { X, Search, Heart, MoreVertical, Trash2 } from 'lucide-svelte';
   import { t } from '$lib/i18n';
+  import { invoke } from '@tauri-apps/api/core';
 
   interface QueueTrack {
     id: string;
@@ -8,7 +9,8 @@
     title: string;
     artist: string;
     duration: string;
-    available?: boolean; // Whether track is available (false when offline without local copy)
+    available?: boolean;
+    trackId?: number; // For favorite checking
   }
 
   interface Props {
@@ -16,10 +18,15 @@
     onClose: () => void;
     currentTrack?: QueueTrack;
     upcomingTracks: QueueTrack[];
+    historyTracks?: QueueTrack[];
     onPlayTrack?: (trackId: string) => void;
+    onPlayHistoryTrack?: (trackId: string) => void;
     onClearQueue?: () => void;
     onSaveAsPlaylist?: () => void;
     onReorderTrack?: (fromIndex: number, toIndex: number) => void;
+    onToggleInfinitePlay?: () => void;
+    infinitePlayEnabled?: boolean;
+    isPlaying?: boolean;
   }
 
   let {
@@ -27,39 +34,109 @@
     onClose,
     currentTrack,
     upcomingTracks,
+    historyTracks = [],
     onPlayTrack,
+    onPlayHistoryTrack,
     onClearQueue,
     onSaveAsPlaylist,
-    onReorderTrack
+    onReorderTrack,
+    onToggleInfinitePlay,
+    infinitePlayEnabled = false,
+    isPlaying = false
   }: Props = $props();
 
-  let hoveredTrack = $state<string | null>(null);
+  // Tab state
+  let activeTab = $state<'queue' | 'history'>('queue');
+
+  // Search state
+  let searchOpen = $state(false);
   let searchQuery = $state('');
 
-  // Drag state
+  // Favorite state for current track
+  let currentTrackFavorite = $state(false);
+
+  // Hover state for history tracks
+  let hoveredHistoryTrack = $state<string | null>(null);
+
+  // Drag state for queue
   let draggedIndex = $state<number | null>(null);
   let dragOverIndex = $state<number | null>(null);
 
-  // Filter tracks based on search query (searches entire queue)
-  const filteredTracks = $derived.by(() => {
-    if (!searchQuery.trim()) return upcomingTracks;
-    const query = searchQuery.toLowerCase();
-    return upcomingTracks.filter(track =>
-      track.title.toLowerCase().includes(query) ||
-      track.artist.toLowerCase().includes(query)
-    );
+  // Display limit
+  const DISPLAY_LIMIT = 20;
+  let displayCount = $state(DISPLAY_LIMIT);
+
+  // Reset state when panel closes
+  $effect(() => {
+    if (!isOpen) {
+      activeTab = 'queue';
+      searchOpen = false;
+      searchQuery = '';
+      displayCount = DISPLAY_LIMIT;
+    }
   });
 
-  // Disable drag when search is active (can't reorder filtered list)
+  // Check favorite status when current track changes
+  $effect(() => {
+    if (currentTrack?.trackId) {
+      checkFavoriteStatus(currentTrack.trackId);
+    } else {
+      currentTrackFavorite = false;
+    }
+  });
+
+  async function checkFavoriteStatus(trackId: number) {
+    try {
+      const result = await invoke<boolean>('is_track_favorite', { trackId });
+      currentTrackFavorite = result;
+    } catch {
+      currentTrackFavorite = false;
+    }
+  }
+
+  async function toggleCurrentTrackFavorite() {
+    if (!currentTrack?.trackId) return;
+    try {
+      if (currentTrackFavorite) {
+        await invoke('remove_track_from_favorites', { trackId: currentTrack.trackId });
+        currentTrackFavorite = false;
+      } else {
+        await invoke('add_track_to_favorites', { trackId: currentTrack.trackId });
+        currentTrackFavorite = true;
+      }
+    } catch (err) {
+      console.error('Failed to toggle favorite:', err);
+    }
+  }
+
+  // Filter tracks based on search
+  const filteredTracks = $derived.by(() => {
+    if (!searchQuery.trim()) return upcomingTracks.slice(0, displayCount);
+    const query = searchQuery.toLowerCase();
+    return upcomingTracks
+      .filter(track =>
+        track.title.toLowerCase().includes(query) ||
+        track.artist.toLowerCase().includes(query)
+      )
+      .slice(0, displayCount);
+  });
+
+  const totalTracks = $derived(upcomingTracks.length);
+  const displayedTracks = $derived(filteredTracks.length);
+  const hasMoreTracks = $derived(!searchQuery && upcomingTracks.length > displayCount);
   const canDrag = $derived(!searchQuery.trim());
 
+  function loadMore() {
+    displayCount += DISPLAY_LIMIT;
+  }
+
+  // Drag handlers
   function handleDragStart(e: DragEvent, index: number) {
     if (!canDrag) {
       e.preventDefault();
       return;
     }
     draggedIndex = index;
-    // Set drag image and data
     if (e.dataTransfer) {
       e.dataTransfer.effectAllowed = 'move';
       e.dataTransfer.setData('text/plain', String(index));
@@ -96,157 +173,231 @@
     dragOverIndex = null;
   }
 
-  // Handle click only on non-drag-handle area
-  function handleTrackClick(e: MouseEvent, track: QueueTrack) {
-    const target = e.target as HTMLElement;
-    // Don't trigger play if clicking on drag handle
-    if (target.closest('.drag-handle')) {
-      return;
-    }
-    // Don't trigger play if track is unavailable
-    if (track.available === false) {
-      return;
-    }
+  function handleTrackClick(track: QueueTrack) {
+    if (track.available === false) return;
     onPlayTrack?.(track.id);
   }
+
+  function handleHistoryTrackClick(track: QueueTrack) {
+    onPlayHistoryTrack?.(track.id);
+  }
+
+  function handleClose() {
+    onClose();
+  }
 </script>
 
 {#if isOpen}
   <!-- Backdrop -->
-  <div class="backdrop" onclick={onClose} role="presentation"></div>
+  <div class="backdrop" onclick={handleClose} role="presentation"></div>
 
   <!-- Queue Panel -->
-  <div class="queue-panel-container">
-    <!-- Header -->
+  <div class="queue-panel">
+    <!-- Header with Tabs -->
     <div class="header">
-      <h2>{$t('player.queue')}</h2>
-      <button class="close-btn" onclick={onClose}>
-        <X size={20} />
-      </button>
+      <div class="tabs">
+        <button
+          class="tab"
+          class:active={activeTab === 'queue'}
+          onclick={() => activeTab = 'queue'}
+        >
+          {$t('player.queue')}
+        </button>
+        <span class="tab-separator">|</span>
+        <button
+          class="tab"
+          class:active={activeTab === 'history'}
+          onclick={() => activeTab = 'history'}
+        >
+          {$t('player.history')}
+        </button>
+      </div>
+      <div class="header-actions">
+        {#if activeTab === 'queue'}
+          <button
+            class="header-btn"
+            class:active={infinitePlayEnabled}
+            onclick={onToggleInfinitePlay}
+            title={$t('player.infinitePlay')}
+          >
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M18.178 8c5.096 0 5.096 8 0 8-5.095 0-7.133-8-12.739-8-4.781 0-4.781 8 0 8 5.606 0 7.644-8 12.739-8z"/>
+            </svg>
+          </button>
+        {/if}
+        <button class="close-btn" onclick={handleClose}>
+          <X size={20} />
+        </button>
+      </div>
     </div>
 
-    <!-- Content with isolated scroll -->
-    <div
-      class="content"
-      onwheel={(e) => {
-        // Stop wheel events from propagating to main content
-        e.stopPropagation();
-      }}
-    >
-      <!-- Now Playing -->
-      {#if currentTrack}
-        <div class="section now-playing-section">
-          <div class="section-header">{$t('player.nowPlaying')}</div>
-          <div class="now-playing-card">
-            <img src={currentTrack.artwork} alt={currentTrack.title} />
-            <div class="track-info">
-              <div class="track-title">{currentTrack.title}</div>
-              <div class="track-artist">{currentTrack.artist}</div>
+    <!-- Content -->
+    <div class="content">
+      {#if activeTab === 'queue'}
+        <!-- Now Playing Card -->
+        {#if currentTrack}
+          <div class="section">
+            <div class="section-label">{$t('player.nowPlaying').toUpperCase()}</div>
+            <div class="now-playing-card">
+              <div class="np-artwork">
+                <img src={currentTrack.artwork} alt={currentTrack.title} />
+                {#if isPlaying}
+                  <div class="spectrum-bars">
+                    <div class="bar"></div>
+                    <div class="bar"></div>
+                    <div class="bar"></div>
+                    <div class="bar"></div>
+                  </div>
+                {/if}
+              </div>
+              <div class="np-info">
+                <div class="np-title">{currentTrack.title}</div>
+                <div class="np-artist">{currentTrack.artist}</div>
+              </div>
+              <button
+                class="np-favorite"
+                class:active={currentTrackFavorite}
+                onclick={toggleCurrentTrackFavorite}
+                title={currentTrackFavorite ? $t('actions.removeFromFavorites') : $t('actions.addToFavorites')}
+              >
+                <Heart size={18} fill={currentTrackFavorite ? 'currentColor' : 'none'} />
+              </button>
             </div>
           </div>
-        </div>
-      {/if}
+        {/if}
 
-      <!-- Search Bar (below Now Playing) -->
-      {#if upcomingTracks.length > 0}
-        <div class="search-container">
-          <Search size={14} class="search-icon" />
-          <input
-            type="text"
-            placeholder={$t('player.searchQueue')}
-            bind:value={searchQuery}
-            class="search-input"
-          />
-          {#if searchQuery}
-            <button class="search-clear" onclick={() => searchQuery = ''}>
-              <X size={12} />
-            </button>
+        <!-- Up Next Section -->
+        {#if upcomingTracks.length > 0}
+          <div class="section up-next-section">
+            <div class="section-label">
+              {$t('player.upNext').toUpperCase()} ({displayedTracks}/{totalTracks})
+            </div>
+            <div class="tracks-list">
+              {#each filteredTracks as track, index}
+                {@const originalIndex = upcomingTracks.findIndex(t => t.id === track.id)}
+                {@const isUnavailable = track.available === false}
+                <div
+                  class="queue-track"
+                  class:dragging={draggedIndex === originalIndex}
+                  class:drag-over={dragOverIndex === originalIndex && draggedIndex !== originalIndex}
+                  class:unavailable={isUnavailable}
+                  draggable={canDrag && !isUnavailable}
+                  onclick={() => handleTrackClick(track)}
+                  ondragstart={(e) => handleDragStart(e, originalIndex)}
+                  ondragover={(e) => handleDragOver(e, originalIndex)}
+                  ondragleave={handleDragLeave}
+                  ondrop={(e) => handleDrop(e, originalIndex)}
+                  ondragend={handleDragEnd}
+                  role="button"
+                  tabindex={isUnavailable ? -1 : 0}
+                >
+                  <span class="track-number">{originalIndex + 1}</span>
+                  <div class="track-info">
+                    <div class="track-title">{track.title}</div>
+                    <div class="track-artist">{track.artist}</div>
+                  </div>
+                  <span class="track-duration">{track.duration}</span>
+                </div>
+              {/each}
+              {#if hasMoreTracks}
+                <button class="load-more" onclick={loadMore}>
+                  {$t('actions.loadMore')} ({upcomingTracks.length - displayCount} more)
+                </button>
+              {/if}
+              {#if searchQuery && filteredTracks.length === 0}
+                <div class="no-results">{$t('player.noTracksMatch', { values: { query: searchQuery } })}</div>
+              {/if}
+            </div>
+          </div>
+        {:else if !currentTrack}
+          <div class="empty-state">
+            <div class="emoji">🎵</div>
+            <div class="empty-title">{$t('player.queueEmpty')}</div>
+            <div class="empty-text">{$t('player.queueEmptyDescription')}</div>
+          </div>
+        {/if}
+
+      {:else}
+        <!-- History Tab -->
+        <div class="section">
+          <div class="section-label">{$t('player.recentlyPlayed').toUpperCase()}</div>
+          {#if historyTracks.length > 0}
+            <div class="history-list">
+              {#each historyTracks.slice(0, DISPLAY_LIMIT) as track}
+                <div
+                  class="history-track"
+                  onclick={() => handleHistoryTrackClick(track)}
+                  onmouseenter={() => hoveredHistoryTrack = track.id}
+                  onmouseleave={() => hoveredHistoryTrack = null}
+                  role="button"
+                  tabindex="0"
+                >
+                  <img src={track.artwork} alt={track.title} class="history-artwork" />
+                  <div class="track-info">
+                    <div class="track-title">{track.title}</div>
+                    <div class="track-artist">{track.artist}</div>
+                  </div>
+                  <span class="track-duration">{track.duration}</span>
+                  {#if hoveredHistoryTrack === track.id}
+                    <button class="track-menu" onclick={(e) => e.stopPropagation()}>
+                      <MoreVertical size={16} />
+                    </button>
+                  {/if}
+                </div>
+              {/each}
+            </div>
+          {:else}
+            <div class="empty-state">
+              <div class="empty-title">{$t('player.noHistoryYet')}</div>
+            </div>
           {/if}
         </div>
       {/if}
-
-      <!-- Next Up -->
-      {#if upcomingTracks.length > 0}
-        <div class="section next-up-section">
-          <div class="section-header">
-            {$t('player.upNext')} ({filteredTracks.length}{searchQuery ? ` / ${upcomingTracks.length}` : ''})
-          </div>
-          <div class="tracks">
-            {#each filteredTracks as track, index}
-              {@const originalIndex = upcomingTracks.findIndex(t => t.id === track.id)}
-              {@const isUnavailable = track.available === false}
-              <div
-                class="queue-track"
-                class:hovered={hoveredTrack === track.id && !isUnavailable}
-                class:dragging={draggedIndex === originalIndex}
-                class:drag-over={dragOverIndex === originalIndex && draggedIndex !== originalIndex}
-                class:unavailable={isUnavailable}
-                draggable={canDrag && !isUnavailable}
-                onmouseenter={() => (hoveredTrack = track.id)}
-                onmouseleave={() => (hoveredTrack = null)}
-                onclick={(e) => handleTrackClick(e, track)}
-                ondragstart={(e) => handleDragStart(e, originalIndex)}
-                ondragover={(e) => handleDragOver(e, originalIndex)}
-                ondragleave={handleDragLeave}
-                ondrop={(e) => handleDrop(e, originalIndex)}
-                ondragend={handleDragEnd}
-                role="button"
-                tabindex={isUnavailable ? -1 : 0}
-                title={isUnavailable ? $t('offline.trackNotAvailable') : undefined}
-                onkeydown={(e) => e.key === 'Enter' && !isUnavailable && onPlayTrack?.(track.id)}
-              >
-                <!-- Unavailable Indicator or Drag Handle -->
-                {#if isUnavailable}
-                  <div class="unavailable-indicator">
-                    <WifiOff size={14} />
-                  </div>
-                {:else}
-                  <div class="drag-handle" class:visible={hoveredTrack === track.id && canDrag}>
-                    <GripVertical size={14} />
-                  </div>
-                {/if}
-
-                <!-- Track Number / Play Icon -->
-                <div class="track-number">
-                  {#if hoveredTrack === track.id && !isUnavailable}
-                    <Play size={12} fill="white" color="white" />
-                  {:else}
-                    <span>{originalIndex + 1}</span>
-                  {/if}
-                </div>
-
-                <!-- Track Info -->
-                <div class="track-info">
-                  <div class="track-title">{track.title}</div>
-                  <div class="track-artist">{track.artist}</div>
-                </div>
-
-                <!-- Duration -->
-                <div class="track-duration">{track.duration}</div>
-              </div>
-            {/each}
-            {#if searchQuery && filteredTracks.length === 0}
-              <div class="no-results">{$t('player.noTracksMatch', { values: { query: searchQuery } })}</div>
-            {/if}
-          </div>
-        </div>
-      {/if}
-
-      <!-- Empty State -->
-      {#if upcomingTracks.length === 0 && !currentTrack}
-        <div class="empty-state">
-          <div class="emoji">🎵</div>
-          <div class="empty-title">{$t('player.queueEmpty')}</div>
-          <div class="empty-text">{$t('player.queueEmptyDescription')}</div>
-        </div>
-      {/if}
     </div>
 
-    <!-- Footer Actions -->
-    {#if upcomingTracks.length > 0 || currentTrack}
+    <!-- Footer (Queue tab only) -->
+    {#if activeTab === 'queue' && (upcomingTracks.length > 0 || currentTrack)}
       <div class="footer">
-        <button class="clear-btn" onclick={onClearQueue}>{$t('player.clearQueue')}</button>
-        <button class="save-btn" onclick={onSaveAsPlaylist}>{$t('player.saveQueue')}</button>
+        <div class="footer-left">
+          <button
+            class="footer-icon-btn"
+            onclick={onClearQueue}
+            title={$t('player.clearQueue')}
+          >
+            <img src="/trash-list.svg" alt="" class="footer-icon" />
+          </button>
+          <button
+            class="footer-icon-btn"
+            onclick={onSaveAsPlaylist}
+            title={$t('player.saveQueue')}
+          >
+            <img src="/add-to-list.svg" alt="" class="footer-icon" />
+          </button>
+        </div>
+        <div class="footer-right">
+          {#if searchOpen}
+            <div class="search-bar">
+              <Search size={14} />
+              <input
+                type="text"
+                placeholder={$t('player.searchQueue')}
+                bind:value={searchQuery}
+                class="search-input"
+              />
+              <button class="search-close" onclick={() => { searchOpen = false; searchQuery = ''; }}>
+                <X size={14} />
+              </button>
+            </div>
+          {:else}
+            <button
+              class="footer-icon-btn"
+              onclick={() => searchOpen = true}
+              title={$t('player.searchQueue')}
+            >
+              <Search size={18} />
+            </button>
+          {/if}
+        </div>
       </div>
     {/if}
   </div>
@@ -260,34 +411,29 @@
     z-index: 40;
   }
 
-  :global(.queue-panel-container) {
+  .queue-panel {
     position: fixed;
-    top: 32px; /* Below TitleBar */
+    top: 32px;
     right: 0;
-    bottom: 104px; /* Above NowPlayingBar */
+    bottom: 104px;
     width: 340px;
     z-index: 50;
     display: flex;
     flex-direction: column;
-    animation: slideInRight 200ms ease-out;
+    animation: slideIn 200ms ease-out;
     background-color: var(--bg-secondary);
     border-left: 1px solid var(--bg-tertiary);
     box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3);
   }
 
-  /* Remove old glass panel override */
-
-  @keyframes slideInRight {
-    from {
-      transform: translateX(100%);
-    }
-    to {
-      transform: translateX(0);
-    }
+  @keyframes slideIn {
+    from { transform: translateX(100%); }
+    to { transform: translateX(0); }
   }
 
+  /* Header */
   .header {
-    padding: 16px;
+    padding: 12px 16px;
     border-bottom: 1px solid var(--bg-tertiary);
     display: flex;
     align-items: center;
@@ -295,12 +441,65 @@
     flex-shrink: 0;
   }
 
-  .header h2 {
-    font-size: 16px;
+  .tabs {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .tab {
+    background: none;
+    border: none;
+    font-size: 14px;
     font-weight: 600;
+    color: var(--text-muted);
+    cursor: pointer;
+    padding: 0;
+    transition: color 150ms ease;
+  }
+
+  .tab:hover {
+    color: var(--text-secondary);
+  }
+
+  .tab.active {
     color: var(--text-primary);
   }
 
+  .tab-separator {
+    color: var(--text-disabled);
+    font-size: 14px;
+  }
+
+  .header-actions {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .header-btn {
+    width: 28px;
+    height: 28px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    color: var(--text-muted);
+    cursor: pointer;
+    border-radius: 6px;
+    transition: all 150ms ease;
+  }
+
+  .header-btn:hover {
+    color: var(--text-primary);
+    background: var(--bg-hover);
+  }
+
+  .header-btn.active {
+    color: var(--accent-primary);
+  }
+
   .close-btn {
     width: 28px;
     height: 28px;
@@ -318,62 +517,16 @@
     color: var(--text-primary);
   }
 
-  .search-container {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin-bottom: 12px;
-    padding: 8px 10px;
-    background-color: var(--bg-tertiary);
-    border-radius: 6px;
-    flex-shrink: 0;
-    flex-grow: 0;
-  }
-
-  .search-container :global(.search-icon) {
-    color: var(--text-muted);
-    flex-shrink: 0;
-  }
-
-  .search-input {
-    flex: 1;
-    background: none;
-    border: none;
-    color: var(--text-primary);
-    font-size: 12px;
-    outline: none;
-  }
-
-  .search-input::placeholder {
-    color: var(--text-muted);
-  }
-
-  .search-clear {
-    background: none;
-    border: none;
-    color: var(--text-muted);
-    cursor: pointer;
-    padding: 2px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .search-clear:hover {
-    color: var(--text-primary);
-  }
-
+  /* Content */
   .content {
     flex: 1;
     overflow-y: auto;
     overflow-x: hidden;
     padding: 12px 16px;
-    padding-right: 12px; /* Less padding on right for scrollbar */
     min-height: 0;
     overscroll-behavior: contain;
   }
 
-  /* Thin fancy scrollbar */
   .content::-webkit-scrollbar {
     width: 4px;
   }
@@ -391,50 +544,181 @@
     background: rgba(255, 255, 255, 0.25);
   }
 
-  .content::-webkit-scrollbar-thumb:hover {
-    background: rgba(255, 255, 255, 0.4);
-  }
-
+  /* Sections */
   .section {
     margin-bottom: 16px;
   }
 
-  .now-playing-section {
-    flex-shrink: 0;
-  }
-
-  .next-up-section {
-    display: flex;
-    flex-direction: column;
-    min-height: 0;
-  }
-
-  .section-header {
+  .section-label {
     font-size: 11px;
-    text-transform: uppercase;
-    color: #666666;
     font-weight: 600;
+    color: var(--text-muted);
     letter-spacing: 0.05em;
     margin-bottom: 10px;
-    flex-shrink: 0;
   }
 
+  /* Now Playing Card */
   .now-playing-card {
-    background-color: var(--bg-tertiary);
-    border-radius: 6px;
+    background: var(--bg-tertiary);
+    border-radius: 8px;
     padding: 10px;
     display: flex;
     align-items: center;
-    gap: 10px;
+    gap: 12px;
   }
 
-  .now-playing-card img {
+  .np-artwork {
+    position: relative;
     width: 48px;
     height: 48px;
+    flex-shrink: 0;
+  }
+
+  .np-artwork img {
+    width: 100%;
+    height: 100%;
     border-radius: 4px;
     object-fit: cover;
   }
 
+  .spectrum-bars {
+    position: absolute;
+    bottom: 4px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    align-items: flex-end;
+    gap: 2px;
+    height: 16px;
+  }
+
+  .spectrum-bars .bar {
+    width: 3px;
+    background-color: #4285F4;
+    border-radius: 1px;
+    animation: spectrum 1s ease-in-out infinite;
+  }
+
+  .spectrum-bars .bar:nth-child(1) {
+    height: 8px;
+    animation-delay: 0s;
+  }
+
+  .spectrum-bars .bar:nth-child(2) {
+    height: 12px;
+    animation-delay: 0.15s;
+  }
+
+  .spectrum-bars .bar:nth-child(3) {
+    height: 6px;
+    animation-delay: 0.3s;
+  }
+
+  .spectrum-bars .bar:nth-child(4) {
+    height: 10px;
+    animation-delay: 0.45s;
+  }
+
+  @keyframes spectrum {
+    0%, 100% {
+      transform: scaleY(0.5);
+      opacity: 0.7;
+    }
+    50% {
+      transform: scaleY(1);
+      opacity: 1;
+    }
+  }
+
+  .np-info {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .np-title {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--text-primary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .np-artist {
+    font-size: 12px;
+    color: var(--text-muted);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .np-favorite {
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    color: var(--text-muted);
+    cursor: pointer;
+    border-radius: 6px;
+    transition: all 150ms ease;
+    flex-shrink: 0;
+  }
+
+  .np-favorite:hover {
+    color: var(--text-primary);
+    background: var(--bg-hover);
+  }
+
+  .np-favorite.active {
+    color: #ef4444;
+  }
+
+  /* Queue Tracks */
+  .tracks-list {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .queue-track {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 6px;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: background-color 150ms ease;
+  }
+
+  .queue-track:hover {
+    background: var(--bg-tertiary);
+  }
+
+  .queue-track.dragging {
+    opacity: 0.5;
+  }
+
+  .queue-track.drag-over {
+    border-top: 2px solid var(--accent-primary);
+    margin-top: -2px;
+  }
+
+  .queue-track.unavailable {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .track-number {
+    width: 24px;
+    font-size: 13px;
+    color: var(--text-muted);
+    text-align: center;
+    flex-shrink: 0;
+  }
+
   .track-info {
     flex: 1;
     min-width: 0;
@@ -457,95 +741,106 @@
     white-space: nowrap;
   }
 
-  .tracks {
+  .track-duration {
+    font-size: 12px;
+    color: var(--text-muted);
+    font-family: var(--font-mono);
+    font-variant-numeric: tabular-nums;
+    flex-shrink: 0;
+  }
+
+  .load-more {
+    padding: 12px;
+    text-align: center;
+    background: none;
+    border: none;
+    color: var(--accent-primary);
+    font-size: 12px;
+    cursor: pointer;
+    width: 100%;
+    border-radius: 6px;
+    transition: background 150ms ease;
+  }
+
+  .load-more:hover {
+    background: var(--bg-tertiary);
+  }
+
+  /* History */
+  .history-list {
     display: flex;
     flex-direction: column;
     gap: 2px;
   }
 
-  .queue-track {
-    height: 40px;
+  .history-track {
     display: flex;
     align-items: center;
-    gap: 8px;
-    padding: 0 6px;
+    gap: 10px;
+    padding: 6px;
     border-radius: 6px;
     cursor: pointer;
     transition: background-color 150ms ease;
+    position: relative;
   }
 
-  .queue-track.hovered {
-    background-color: var(--bg-tertiary);
+  .history-track:hover {
+    background: var(--bg-tertiary);
   }
 
-  .queue-track.dragging {
-    opacity: 0.5;
-    background-color: var(--bg-tertiary);
+  .history-artwork {
+    width: 40px;
+    height: 40px;
+    border-radius: 4px;
+    object-fit: cover;
+    flex-shrink: 0;
   }
 
-  .queue-track.drag-over {
-    border-top: 2px solid var(--accent-primary);
-    margin-top: -2px;
-  }
-
-  .queue-track[draggable="true"] {
-    user-select: none;
-    -webkit-user-select: none;
-  }
-
-  .drag-handle {
-    color: #666666;
-    opacity: 0;
-    transition: opacity 150ms ease;
-    cursor: grab;
-  }
-
-  .drag-handle:active {
-    cursor: grabbing;
-  }
-
-  .drag-handle.visible {
-    opacity: 1;
-  }
-
-  /* Unavailable track styles (offline mode) */
-  .queue-track.unavailable {
-    opacity: 0.4;
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-
-  .queue-track.unavailable .track-info,
-  .queue-track.unavailable .track-number,
-  .queue-track.unavailable .track-duration {
-    filter: grayscale(100%);
-  }
-
-  .unavailable-indicator {
-    color: var(--text-muted);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 14px;
-  }
-
-  .track-number {
+  .track-menu {
+    position: absolute;
+    right: 6px;
     width: 28px;
+    height: 28px;
     display: flex;
     align-items: center;
     justify-content: center;
+    background: var(--bg-secondary);
+    border: none;
+    color: var(--text-muted);
+    cursor: pointer;
+    border-radius: 4px;
   }
 
-  .track-number span {
+  .track-menu:hover {
+    color: var(--text-primary);
+  }
+
+  /* Empty State */
+  .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 48px 0;
+    text-align: center;
+  }
+
+  .emoji {
+    font-size: 32px;
+    margin-bottom: 12px;
+  }
+
+  .empty-title {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--text-primary);
+    margin-bottom: 4px;
+  }
+
+  .empty-text {
     font-size: 13px;
-    color: #666666;
-  }
-
-  .track-duration {
-    font-size: 12px;
-    color: #666666;
-    font-family: var(--font-mono);
-    font-variant-numeric: tabular-nums;
+    color: var(--text-muted);
+    max-width: 200px;
   }
 
   .no-results {
@@ -555,33 +850,7 @@
     font-size: 12px;
   }
 
-  .empty-state {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 64px 0;
-    text-align: center;
-  }
-
-  .emoji {
-    font-size: 24px;
-    margin-bottom: 16px;
-  }
-
-  .empty-title {
-    font-size: 16px;
-    font-weight: 500;
-    color: var(--text-primary);
-    margin-bottom: 8px;
-  }
-
-  .empty-text {
-    font-size: 14px;
-    color: var(--text-muted);
-    max-width: 240px;
-  }
-
+  /* Footer */
   .footer {
     padding: 12px 16px;
     border-top: 1px solid var(--bg-tertiary);
@@ -591,32 +860,97 @@
     flex-shrink: 0;
   }
 
-  .clear-btn {
-    font-size: 12px;
-    color: var(--text-muted);
+  .footer-left,
+  .footer-right {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .footer-icon-btn {
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     background: none;
     border: none;
+    color: var(--text-muted);
     cursor: pointer;
-    transition: color 150ms ease;
+    border-radius: 6px;
+    transition: all 150ms ease;
   }
 
-  .clear-btn:hover {
+  .footer-icon-btn:hover {
+    color: var(--text-primary);
+    background: var(--bg-hover);
+  }
+
+  .footer-icon {
+    width: 18px;
+    height: 18px;
+    filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
+    transition: filter 150ms ease;
+  }
+
+  .footer-icon-btn:hover .footer-icon {
+    filter: brightness(0) saturate(100%) invert(100%);
+  }
+
+  /* Search Bar */
+  .search-bar {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 10px;
+    background: var(--bg-tertiary);
+    border-radius: 6px;
+    width: 180px;
+    animation: expandSearch 150ms ease-out;
+  }
+
+  @keyframes expandSearch {
+    from {
+      width: 32px;
+      opacity: 0;
+    }
+    to {
+      width: 180px;
+      opacity: 1;
+    }
+  }
+
+  .search-bar :global(svg) {
+    color: var(--text-muted);
+    flex-shrink: 0;
+  }
+
+  .search-input {
+    flex: 1;
+    background: none;
+    border: none;
+    color: var(--text-primary);
+    font-size: 12px;
+    outline: none;
+    min-width: 0;
+  }
+
+  .search-input::placeholder {
+    color: var(--text-muted);
+  }
+
+  .search-close {
+    background: none;
+    border: none;
+    color: var(--text-muted);
+    cursor: pointer;
+    padding: 2px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .search-close:hover {
     color: var(--text-primary);
   }
-
-  .save-btn {
-    padding: 6px 14px;
-    border-radius: 6px;
-    background-color: var(--accent-primary);
-    color: white;
-    font-size: 12px;
-    font-weight: 500;
-    border: none;
-    cursor: pointer;
-    transition: background-color 150ms ease;
-  }
-
-  .save-btn:hover {
-    background-color: var(--accent-hover);
-  }
 </style>
diff --git a/src/lib/i18n/locales/en.json b/src/lib/i18n/locales/en.json
index 8e857ac6c..7efcf45d1 100644
--- a/src/lib/i18n/locales/en.json
+++ b/src/lib/i18n/locales/en.json
@@ -221,6 +221,11 @@
     "queue": "Queue",
     "upNext": "Up Next",
     "history": "History",
+    "recentlyPlayed": "Recently Played",
+    "noHistoryYet": "No tracks played yet",
+    "infinitePlay": "Infinite Play",
+    "infinitePlayEnabled": "Infinite play enabled",
+    "infinitePlayDisabled": "Infinite play disabled",
     "lyrics": "Lyrics",
     "noLyrics": "No lyrics available",
     "fetchingLyrics": "Fetching lyrics...",
@@ -299,7 +304,8 @@
     "yes": "Yes",
     "no": "No",
     "ok": "OK",
-    "loading": "Loading..."
+    "loading": "Loading...",
+    "loadMore": "Load More"
   },
   "settings": {
     "title": "Settings",
diff --git a/src/lib/i18n/locales/es.json b/src/lib/i18n/locales/es.json
index d0730ae10..dd2028fcb 100644
--- a/src/lib/i18n/locales/es.json
+++ b/src/lib/i18n/locales/es.json
@@ -221,6 +221,11 @@
     "queue": "Cola",
     "upNext": "Siguiente",
     "history": "Historial",
+    "recentlyPlayed": "Reproducido Recientemente",
+    "noHistoryYet": "Sin pistas reproducidas aún",
+    "infinitePlay": "Reproducción Infinita",
+    "infinitePlayEnabled": "Reproducción infinita activada",
+    "infinitePlayDisabled": "Reproducción infinita desactivada",
     "lyrics": "Letras",
     "noLyrics": "No hay letras disponibles",
     "fetchingLyrics": "Buscando letras...",
@@ -299,7 +304,8 @@
     "yes": "Sí",
     "no": "No",
     "ok": "OK",
-    "loading": "Cargando..."
+    "loading": "Cargando...",
+    "loadMore": "Cargar Más"
   },
   "settings": {
     "title": "Ajustes",
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 47a6f3e6a..05928c17a 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -331,6 +331,8 @@
   let repeatMode = $state<RepeatMode>('off');
   let queue = $state<QueueTrack[]>([]);
   let queueTotalTracks = $state(0);
+  let historyTracks = $state<QueueTrack[]>([]);
+  let infinitePlayEnabled = $state(false);
 
   // Toast State (from store subscription)
   let toast = $state<ToastData | null>(null);
@@ -1040,6 +1042,54 @@
     closeQueue();
   }
 
+  // Toggle infinite play mode (auto-refill queue with similar tracks)
+  function handleToggleInfinitePlay() {
+    infinitePlayEnabled = !infinitePlayEnabled;
+    // Persist to localStorage
+    try {
+      localStorage.setItem('qbz-infinite-play', JSON.stringify(infinitePlayEnabled));
+    } catch {
+      // Ignore storage errors
+    }
+    showToast(infinitePlayEnabled ? 'Infinite play enabled' : 'Infinite play disabled', 'info');
+  }
+
+  // Play a track from history
+  async function handlePlayHistoryTrack(trackId: string) {
+    try {
+      // Get the full queue state to find the track in history
+      const queueState = await getBackendQueueState();
+      if (!queueState) {
+        showToast('Failed to play track', 'error');
+        return;
+      }
+
+      // Find the track in history
+      const numericId = parseInt(trackId, 10);
+      const historyTrack = queueState.history.find(t => t.id === numericId);
+      if (!historyTrack) {
+        showToast('Track not found in history', 'error');
+        return;
+      }
+
+      // Play the track directly
+      await handleTrackPlay({
+        id: historyTrack.id,
+        title: historyTrack.title,
+        artist: historyTrack.artist,
+        album: historyTrack.album,
+        duration: historyTrack.duration_secs,
+        artwork: historyTrack.artwork_url || '',
+        quality: historyTrack.hires ? 'Hi-Res' : 'CD',
+        bitDepth: historyTrack.bit_depth || 16,
+        samplingRate: historyTrack.sample_rate || 44100
+      });
+    } catch (err) {
+      console.error('Failed to play history track:', err);
+      showToast('Failed to play track', 'error');
+    }
+  }
+
   // Play all tracks from album (starting from first track)
   async function handlePlayAllAlbum() {
     if (!selectedAlbum?.tracks?.length) return;
@@ -1827,6 +1877,16 @@
     initPlaybackContextStore();
     initPlaybackPreferences();
 
+    // Load infinite play preference
+    try {
+      const stored = localStorage.getItem('qbz-infinite-play');
+      if (stored !== null) {
+        infinitePlayEnabled = JSON.parse(stored);
+      }
+    } catch {
+      // Ignore storage errors
+    }
+
     // Note: loadFavorites() is called in handleLoginSuccess after login is confirmed
     // This prevents API calls before authentication is complete
 
@@ -2066,10 +2126,23 @@
     };
   });
 
-  // Sync queue state when opening queue panel
+  // Sync queue state when opening queue panel (including history)
   $effect(() => {
     if (isQueueOpen) {
       syncQueueState();
+      // Also fetch history from backend
+      getBackendQueueState().then((state) => {
+        if (state?.history) {
+          historyTracks = state.history.map(t => ({
+            id: String(t.id),
+            artwork: t.artwork_url || '',
+            title: t.title,
+            artist: t.artist,
+            duration: formatDuration(t.duration_secs),
+            trackId: t.id
+          }));
+        }
+      });
     }
   });
 
@@ -2093,7 +2166,8 @@
     artwork: currentTrack.artwork,
     title: currentTrack.title,
     artist: currentTrack.artist,
-    duration: formatDuration(currentTrack.duration)
+    duration: formatDuration(currentTrack.duration),
+    trackId: currentTrack.id // For favorite checking in QueuePanel
   } : null);
 </script>
 
@@ -2448,10 +2522,15 @@
       onClose={closeQueue}
       currentTrack={currentQueueTrack ?? undefined}
       upcomingTracks={queue}
+      {historyTracks}
       onPlayTrack={handleQueueTrackPlay}
+      onPlayHistoryTrack={handlePlayHistoryTrack}
       onClearQueue={handleClearQueue}
       onSaveAsPlaylist={handleSaveQueueAsPlaylist}
       onReorderTrack={handleQueueReorder}
+      onToggleInfinitePlay={handleToggleInfinitePlay}
+      {infinitePlayEnabled}
+      {isPlaying}
     />
 
     <!-- Expanded Player -->
diff --git a/static/add-to-list.svg b/static/add-to-list.svg
new file mode 100644
index 000000000..a8a5fcf5d
--- /dev/null
+++ b/static/add-to-list.svg
@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg fill="#000000" width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" stroke="#000000" stroke-width="0.4800000000000001">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC" stroke-width="0.048"/>
+
<g id="SVGRepo_iconCarrier"> <path d="M18,7 L20.5,7 C20.7761424,7 21,7.22385763 21,7.5 C21,7.77614237 20.7761424,8 20.5,8 L18,8 L18,10.5 C18,10.7761424 17.7761424,11 17.5,11 C17.2238576,11 17,10.7761424 17,10.5 L17,8 L14.5,8 C14.2238576,8 14,7.77614237 14,7.5 C14,7.22385763 14.2238576,7 14.5,7 L17,7 L17,4.5 C17,4.22385763 17.2238576,4 17.5,4 C17.7761424,4 18,4.22385763 18,4.5 L18,7 Z M11.5,7 C11.7761424,7 12,7.22385763 12,7.5 C12,7.77614237 11.7761424,8 11.5,8 L3.5,8 C3.22385763,8 3,7.77614237 3,7.5 C3,7.22385763 3.22385763,7 3.5,7 L11.5,7 Z M14.5,12 C14.7761424,12 15,12.2238576 15,12.5 C15,12.7761424 14.7761424,13 14.5,13 L3.5,13 C3.22385763,13 3,12.7761424 3,12.5 C3,12.2238576 3.22385763,12 3.5,12 L14.5,12 Z M20.5,17 C20.7761424,17 21,17.2238576 21,17.5 C21,17.7761424 20.7761424,18 20.5,18 L3.5,18 C3.22385763,18 3,17.7761424 3,17.5 C3,17.2238576 3.22385763,17 3.5,17 L20.5,17 Z"/> </g>
+
</svg>
\ No newline at end of file
diff --git a/static/trash-list.svg b/static/trash-list.svg
new file mode 100644
index 000000000..2c599711a
--- /dev/null
+++ b/static/trash-list.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 10V17M8 10V17M19 9H22M19 14H22M19 19H21M16 6V16.2C16 17.8802 16 18.7202 15.673 19.362C15.3854 19.9265 14.9265 20.3854 14.362 20.673C13.7202 21 12.8802 21 11.2 21H8.8C7.11984 21 6.27976 21 5.63803 20.673C5.07354 20.3854 4.6146 19.9265 4.32698 19.362C4 18.7202 4 17.8802 4 16.2V6M2 6H18M14 6L13.7294 5.18807C13.4671 4.40125 13.3359 4.00784 13.0927 3.71698C12.8779 3.46013 12.6021 3.26132 12.2905 3.13878C11.9376 3 11.523 3 10.6936 3H9.30643C8.47705 3 8.06236 3 7.70951 3.13878C7.39792 3.26132 7.12208 3.46013 6.90729 3.71698C6.66405 4.00784 6.53292 4.40125 6.27064 5.18807L6 6" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file