chore: Bump version to 1.0.12, update changelog

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

.github/workflows/release.yml

@@ -14,9 +14,9 @@ jobs:
       release_id: ${{ steps.create-release.outputs.result }}
       package_version: ${{ steps.get-version.outputs.version }}
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
       - name: setup node
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v5
         with:
           node-version: lts/*
       - name: get version
@@ -56,9 +56,9 @@ jobs:
             args: ''
     runs-on: ${{ matrix.settings.platform }}
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
       - name: setup node
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v5
         with:
           node-version: lts/*
       - name: install Rust stable
@@ -80,7 +80,7 @@ jobs:
       contents: write
     runs-on: ubuntu-22.04
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
 
       - name: install dependencies
         run: |
@@ -97,7 +97,7 @@ jobs:
           chmod +x /usr/local/bin/linuxdeploy-plugin-gstreamer.sh
 
       - name: setup node
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v5
         with:
           node-version: lts/*
 

CHANGELOG.md

@@ -5,6 +5,35 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.0.12] - 2026-03-14
+
+### Fixed
+- **Seek Stop Bug**: Clicking the progress bar a second time no longer stops playback. Root cause: WebKit and GStreamer fire spurious `ended` events immediately after a direct `audioNode.currentTime` seek. A guard now checks `lastSeekAt` + playhead position to silently discard these false alarms.
+- **Play/Pause Hang**: Rapidly double-clicking the play/pause button no longer freezes the audio pipeline. A 300 ms lock prevents a second toggle from issuing `pause→play` before GStreamer has finished the previous state transition.
+- **Queue DnD (macOS / Windows)**: Drop target index is now calculated from the mouse `clientY` position at drop time instead of refs, eliminating the `dragend`-before-`drop` timing race on macOS WKWebView and Windows WebView2.
+
+### Added
+- **Live Now Playing navigation**: Clicking an entry in the Live dropdown now navigates to the corresponding album page.
+
+### Changed
+- **Hero blur**: Increased background blur in the Hero section for a more immersive look.
+
+## [1.0.11] - 2026-03-14
+
+### Added
+- **Search Results Page**: Pressing Enter in the search bar now navigates to a dedicated full search results page showing artists, albums, and songs with proper column layout and headers.
+
+### Fixed
+- **Search Results Column Alignment**: Artist and album columns in the search results song list are now correctly aligned with their column headers.
+- **Search Results Header Alignment**: Fixed column header labels not aligning with song row content (root cause: `auto`-width Format column was sized independently per grid row).
+
+### Changed
+- **Gapless Playback removed**: Removed the experimental gapless playback feature. It caused intermittent song skipping and beginning cutoffs and was not reliable enough to ship. Standard sequential playback is used instead.
+
+### Known Issues
+- ~~**Seeking**: Seeking may occasionally be unreliable, particularly on Linux/GStreamer.~~ Fixed in 1.0.12.
+- ~~**Queue drag & drop (macOS / Windows)**: Queue reordering via drag & drop may not always work correctly on macOS and Windows.~~ Fixed in 1.0.12.
+
 ## [1.0.10] - 2026-03-14
 
 ### Added

README.md

@@ -35,6 +35,8 @@ Designed specifically for users hosting their own music via Navidrome or other S
 
 ## ● Known Limitations
 
+- **Seeking (all platforms)**: Seeking may occasionally be unreliable — especially on Linux/GStreamer. This is a known issue currently being worked on.
+- **Queue drag & drop (macOS / Windows)**: Queue reordering via drag & drop is being actively worked on and may not always behave correctly on macOS and Windows.
 - **Linux (drag & drop cursor feedback)**: Due to a WebKitGTK limitation, the drag cursor does not reflect the drop operation type — it may appear as a "forbidden" symbol or show no indicator at all, depending on the desktop environment. Drag and drop itself works correctly.
 
 ## 📥 Installation

package.json

@@ -1,6 +1,6 @@
 {
   "name": "psysonic",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "private": true,
   "scripts": {
     "dev": "vite",

src-tauri/Cargo.lock

@@ -2732,7 +2732,7 @@ dependencies = [
 
 [[package]]
 name = "psysonic"
-version = "1.0.10"
+version = "1.0.11"
 dependencies = [
  "serde",
  "serde_json",

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "psysonic"
-version = "1.0.10"
+version = "1.0.12"
 description = "Psysonic Desktop Music Player"
 authors = []
 license = ""

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "Psysonic",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "identifier": "dev.psysonic.app",
   "build": {
     "beforeDevCommand": "npm run dev",

src/App.tsx

@@ -23,6 +23,7 @@ import Statistics from './pages/Statistics';
 import Playlists from './pages/Playlists';
 import Help from './pages/Help';
 import RandomAlbums from './pages/RandomAlbums';
+import SearchResults from './pages/SearchResults';
 import FullscreenPlayer from './components/FullscreenPlayer';
 import ContextMenu from './components/ContextMenu';
 import { useAuthStore } from './store/authStore';
@@ -137,6 +138,7 @@ function AppShell() {
             <Route path="/random-mix" element={<RandomMix />} />
             <Route path="/playlists" element={<Playlists />} />
             <Route path="/label/:name" element={<LabelAlbums />} />
+            <Route path="/search" element={<SearchResults />} />
             <Route path="/statistics" element={<Statistics />} />
             <Route path="/settings" element={<Settings />} />
             <Route path="/help" element={<Help />} />

src/components/LiveSearch.tsx

@@ -69,6 +69,12 @@ export default function LiveSearch() {
           value={query}
           onChange={e => setQuery(e.target.value)}
           onFocus={() => results && setOpen(true)}
+          onKeyDown={e => {
+            if (e.key === 'Enter' && query.trim()) {
+              setOpen(false);
+              navigate(`/search?q=${encodeURIComponent(query.trim())}`);
+            }
+          }}
           aria-autocomplete="list"
           aria-controls="search-results"
           aria-expanded={open}

src/components/NowPlayingDropdown.tsx

@@ -4,9 +4,11 @@ import { getNowPlaying, SubsonicNowPlaying, buildCoverArtUrl } from '../api/subs
 import { useAuthStore } from '../store/authStore';
 import { usePlayerStore } from '../store/playerStore';
 import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
 
 export default function NowPlayingDropdown() {
   const { t } = useTranslation();
+  const navigate = useNavigate();
   const [isOpen, setIsOpen] = useState(false);
   const [nowPlaying, setNowPlaying] = useState<SubsonicNowPlaying[]>([]);
   const isPlaying = usePlayerStore(s => s.isPlaying);
@@ -121,7 +123,11 @@ export default function NowPlayingDropdown() {
           ) : (
             <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
               {visible.map((stream, idx) => (
-                <div key={`${stream.id}-${idx}`} style={{ display: 'flex', gap: '0.75rem', alignItems: 'center', background: 'var(--bg-hover)', padding: '0.5rem', borderRadius: '8px' }}>
+                <div
+                  key={`${stream.id}-${idx}`}
+                  onClick={() => { if (stream.albumId) { setIsOpen(false); navigate(`/album/${stream.albumId}`); } }}
+                  style={{ display: 'flex', gap: '0.75rem', alignItems: 'center', background: 'var(--bg-hover)', padding: '0.5rem', borderRadius: '8px', cursor: stream.albumId ? 'pointer' : 'default' }}
+                >
                   <div style={{ width: '48px', height: '48px', flexShrink: 0, borderRadius: '6px', overflow: 'hidden', background: 'var(--bg-surface)' }}>
                     {stream.coverArt ? (
                       <img src={buildCoverArtUrl(stream.coverArt, 100)} alt="Cover" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />

src/components/QueuePanel.tsx

@@ -132,6 +132,8 @@ export default function QueuePanel() {
   const draggedIdxRef = useRef<number | null>(null);
   const dragOverIdxRef = useRef<number | null>(null);
 
+  const queueListRef = useRef<HTMLDivElement>(null);
+
   const [saveModalOpen, setSaveModalOpen] = useState(false);
   const [loadModalOpen, setLoadModalOpen] = useState(false);
 
@@ -171,47 +173,48 @@ export default function QueuePanel() {
   };
 
   const onDragEnd = () => {
-    // Reset visual state immediately.
     setDraggedIdx(null);
     setDragOverIdx(null);
-    // Delay clearing refs so onDropQueue can read them first.
-    // On macOS WKWebView and Windows WebView2, dragend fires before drop
-    // (spec violation), so synchronously clearing refs here loses the
-    // drag source/destination indices before onDropQueue runs.
-    setTimeout(() => {
-      isDraggingInternalRef.current = false;
-      draggedIdxRef.current = null;
-      dragOverIdxRef.current = null;
-    }, 200);
+    isDraggingInternalRef.current = false;
+    draggedIdxRef.current = null;
+    dragOverIdxRef.current = null;
   };
 
   const onDropQueue = async (e: React.DragEvent) => {
     e.preventDefault();
 
-    // Refs are still valid here — onDragEnd delays clearing them so they survive
-    // the macOS/WebView2 dragend-before-drop race condition.
-    const fromIdx = draggedIdxRef.current;
-    const toIdx = dragOverIdxRef.current ?? queue.length;
-
-    // Cancel the pending timeout cleanup and clear refs immediately.
+    // Clear visual state immediately
     isDraggingInternalRef.current = false;
     draggedIdxRef.current = null;
     dragOverIdxRef.current = null;
     setDraggedIdx(null);
     setDragOverIdx(null);
 
-    // Read dataTransfer — set during dragstart, survives dragend on all platforms.
-    // Used as fallback for fromIdx in case refs somehow weren't set.
     let parsedData: any = null;
     try {
       const raw = e.dataTransfer.getData('text/plain');
       if (raw) parsedData = JSON.parse(raw);
     } catch { /* ignore */ }
 
-    // Internal reorder: refs are the primary source; dataTransfer is the fallback.
-    const reorderFrom = fromIdx ?? (parsedData?.type === 'queue_reorder' ? parsedData.index : null);
-    if (reorderFrom !== null) {
-      if (reorderFrom !== toIdx) reorderQueue(reorderFrom, toIdx);
+    if (parsedData?.type === 'queue_reorder') {
+      // fromIdx: always reliable from dataTransfer (set during dragstart)
+      const fromIdx: number = parsedData.index;
+
+      // toIdx: calculate from drop coordinates — avoids all ref timing issues.
+      // Works even when dragend fires before drop (macOS WKWebView / Windows WebView2).
+      let toIdx = queue.length;
+      if (queueListRef.current) {
+        const items = queueListRef.current.querySelectorAll<HTMLElement>('[data-queue-idx]');
+        for (let i = 0; i < items.length; i++) {
+          const rect = items[i].getBoundingClientRect();
+          if (e.clientY < rect.top + rect.height / 2) {
+            toIdx = parseInt(items[i].dataset.queueIdx!);
+            break;
+          }
+        }
+      }
+
+      if (fromIdx !== toIdx) reorderQueue(fromIdx, toIdx);
       return;
     }
 
@@ -300,7 +303,7 @@ export default function QueuePanel() {
 
       {currentTrack && queue.length > 0 && <div className="queue-divider"><span style={{ fontSize: '12px', fontWeight: 600, color: 'var(--text-muted)' }}>{t('queue.nextTracks')}</span></div>}
       
-      <div className="queue-list">
+      <div className="queue-list" ref={queueListRef}>
         {queue.length === 0 ? (
           <div className="queue-empty">
             {t('queue.emptyQueue')}
@@ -324,8 +327,9 @@ export default function QueuePanel() {
             }
 
             return (
-              <div 
-                key={`${track.id}-${idx}`} 
+              <div
+                key={`${track.id}-${idx}`}
+                data-queue-idx={idx}
                 className={`queue-item ${isPlaying ? 'active' : ''}`}
                 onClick={() => playTrack(track, queue)}
                 onContextMenu={(e) => {

src/components/Sidebar.tsx

@@ -23,7 +23,7 @@ const navItems = [
 ];
 
 function isNewer(latest: string, current: string): boolean {
-  const parse = (v: string) => v.replace(/^v/, '').split('.').map(Number);
+  const parse = (v: string) => v.replace(/^[^0-9]*/, '').split('.').map(Number);
   const [lMaj, lMin, lPat] = parse(latest);
   const [cMaj, cMin, cPat] = parse(current);
   if (lMaj !== cMaj) return lMaj > cMaj;

src/i18n.ts

@@ -44,6 +44,9 @@ const enTranslation = {
     albums: 'Albums',
     songs: 'Songs',
     clearLabel: 'Clear search',
+    title: 'Search',
+    resultsFor: 'Results for "{{query}}"',
+    album: 'Album',
   },
   nowPlaying: {
     tooltip: 'Who is listening?',
@@ -402,6 +405,9 @@ const deTranslation = {
     albums: 'Alben',
     songs: 'Songs',
     clearLabel: 'Suche leeren',
+    title: 'Suche',
+    resultsFor: 'Ergebnisse für „{{query}}"',
+    album: 'Album',
   },
   nowPlaying: {
     tooltip: 'Wer hört was?',

src/pages/SearchResults.tsx

@@ -0,0 +1,134 @@
+import React, { useEffect, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { Play, Search } from 'lucide-react';
+import { search, SearchResults as ISearchResults, SubsonicSong } from '../api/subsonic';
+import { usePlayerStore } from '../store/playerStore';
+import AlbumRow from '../components/AlbumRow';
+import ArtistRow from '../components/ArtistRow';
+import { useTranslation } from 'react-i18next';
+
+function formatDuration(s: number) {
+  return `${Math.floor(s / 60)}:${(s % 60).toString().padStart(2, '0')}`;
+}
+
+export default function SearchResults() {
+  const { t } = useTranslation();
+  const [params] = useSearchParams();
+  const query = params.get('q') ?? '';
+  const [results, setResults] = useState<ISearchResults | null>(null);
+  const [loading, setLoading] = useState(false);
+  const playTrack = usePlayerStore(s => s.playTrack);
+  const currentTrack = usePlayerStore(s => s.currentTrack);
+
+  useEffect(() => {
+    if (!query.trim()) { setResults(null); return; }
+    setLoading(true);
+    search(query, { artistCount: 20, albumCount: 20, songCount: 50 })
+      .then(r => setResults(r))
+      .finally(() => setLoading(false));
+  }, [query]);
+
+  const hasResults = results && (results.artists.length || results.albums.length || results.songs.length);
+
+  const playSong = (song: SubsonicSong, list: SubsonicSong[]) => {
+    playTrack({
+      id: song.id, title: song.title, artist: song.artist, album: song.album,
+      albumId: song.albumId, artistId: song.artistId, duration: song.duration,
+      coverArt: song.coverArt, year: song.year, bitRate: song.bitRate,
+      suffix: song.suffix, userRating: song.userRating,
+    }, list.map(s => ({
+      id: s.id, title: s.title, artist: s.artist, album: s.album,
+      albumId: s.albumId, artistId: s.artistId, duration: s.duration,
+      coverArt: s.coverArt, year: s.year, bitRate: s.bitRate,
+      suffix: s.suffix, userRating: s.userRating,
+    })));
+  };
+
+  return (
+    <div className="content-body animate-fade-in" style={{ display: 'flex', flexDirection: 'column', gap: '3rem' }}>
+      <div style={{ marginBottom: '-1.5rem' }}>
+        <h1 className="page-title" style={{ display: 'flex', alignItems: 'center', gap: '0.6rem' }}>
+          <Search size={22} />
+          {query ? t('search.resultsFor', { query }) : t('search.title')}
+        </h1>
+      </div>
+
+      {loading && (
+        <div className="loading-center"><div className="spinner" /></div>
+      )}
+
+      {!loading && query && !hasResults && (
+        <div className="empty-state">{t('search.noResults', { query })}</div>
+      )}
+
+      {!loading && results && (
+        <>
+          {results.artists.length > 0 && (
+            <ArtistRow title={t('search.artists')} artists={results.artists} />
+          )}
+
+          {results.albums.length > 0 && (
+            <AlbumRow title={t('search.albums')} albums={results.albums} />
+          )}
+
+          {results.songs.length > 0 && (
+            <section className="album-row-section">
+              <div className="album-row-header" style={{ marginBottom: '1rem' }}>
+                <h2 className="section-title" style={{ marginBottom: 0 }}>{t('search.songs')}</h2>
+              </div>
+              <div className="tracklist" style={{ padding: 0 }}>
+                <div className="tracklist-header" style={{ gridTemplateColumns: '36px minmax(100px, 2fr) minmax(80px, 1.2fr) minmax(80px, 1.2fr) 100px 60px' }}>
+                  <div />
+                  <div>{t('albumDetail.trackTitle')}</div>
+                  <div>{t('albumDetail.trackArtist')}</div>
+                  <div>{t('search.album')}</div>
+                  <div>{t('albumDetail.trackFormat')}</div>
+                  <div style={{ textAlign: 'right' }}>{t('albumDetail.trackDuration')}</div>
+                </div>
+                {results.songs.map(song => (
+                  <div
+                    key={song.id}
+                    className={`track-row${currentTrack?.id === song.id ? ' active' : ''}`}
+                    style={{ gridTemplateColumns: '36px minmax(100px, 2fr) minmax(80px, 1.2fr) minmax(80px, 1.2fr) 100px 60px' }}
+                    onDoubleClick={() => playSong(song, results.songs)}
+                    role="row"
+                    draggable
+                    onDragStart={e => {
+                      e.dataTransfer.effectAllowed = 'copy';
+                      const track = {
+                        id: song.id, title: song.title, artist: song.artist, album: song.album,
+                        albumId: song.albumId, artistId: song.artistId, duration: song.duration,
+                        coverArt: song.coverArt, year: song.year, bitRate: song.bitRate,
+                        suffix: song.suffix, userRating: song.userRating,
+                      };
+                      e.dataTransfer.setData('text/plain', JSON.stringify({ type: 'song', track }));
+                    }}
+                  >
+                    <button
+                      className="btn btn-ghost"
+                      style={{ padding: 4 }}
+                      onClick={e => { e.stopPropagation(); playSong(song, results.songs); }}
+                    >
+                      <Play size={14} fill="currentColor" />
+                    </button>
+                    <div className="track-info">
+                      <span className="track-title" title={song.title}>{song.title}</span>
+                    </div>
+                    <div className="track-artist-cell"><span className="track-artist" title={song.artist}>{song.artist}</span></div>
+                    <div className="track-artist-cell"><span className="track-artist" title={song.album}>{song.album}</span></div>
+                    <span className="track-codec" style={{ alignSelf: 'center' }}>
+                      {[song.suffix?.toUpperCase(), song.bitRate ? `${song.bitRate} kbps` : ''].filter(Boolean).join(' · ')}
+                    </span>
+                    <span className="track-duration" style={{ textAlign: 'right' }}>
+                      {formatDuration(song.duration)}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </section>
+          )}
+        </>
+      )}
+    </div>
+  );
+}

src/pages/Settings.tsx

@@ -374,7 +374,7 @@ export default function Settings() {
                 Psysonic
               </div>
               <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 2 }}>
-                {t('settings.aboutVersion')} 1.0.10
+                {t('settings.aboutVersion')} 1.0.12
               </div>
             </div>
           </div>

src/store/playerStore.ts

@@ -30,10 +30,8 @@ interface PlayerState {
   currentTime: number;
   volume: number;
   howl: Howl | null;
-  prefetched: Map<string, Howl>;
   scrobbled: boolean;
 
-  // Actions
   playTrack: (track: Track, queue?: Track[]) => void;
   pause: () => void;
   resume: () => void;
@@ -46,44 +44,50 @@ interface PlayerState {
   setProgress: (t: number, duration: number) => void;
   enqueue: (tracks: Track[]) => void;
   clearQueue: () => void;
-  prefetchUpcoming: (fromIndex: number, queue: Track[]) => void;
-  
+
   isQueueVisible: boolean;
   toggleQueue: () => void;
 
   isFullscreenOpen: boolean;
   toggleFullscreen: () => void;
-  
+
   repeatMode: 'off' | 'all' | 'one';
   toggleRepeat: () => void;
 
   reorderQueue: (startIndex: number, endIndex: number) => void;
   removeTrack: (index: number) => void;
-  
+
   initializeFromServerQueue: () => Promise<void>;
 
-  // Context Menu Global State
   contextMenu: {
     isOpen: boolean;
     x: number;
     y: number;
     item: any;
     type: 'song' | 'album' | 'artist' | 'queue-item' | 'album-song' | null;
-    queueIndex?: number; // Only for 'queue-item'
+    queueIndex?: number;
   };
   openContextMenu: (x: number, y: number, item: any, type: 'song' | 'album' | 'artist' | 'queue-item' | 'album-song', queueIndex?: number) => void;
   closeContextMenu: () => void;
 }
 
+// ─── Module-level playback primitives ─────────────────────────────────────────
+//
+// Kept outside Zustand to avoid stale-closure / React re-render races.
+//
+// activeHowl  – the one and only live Howl; all event handlers reference this.
+// playGeneration – monotonically incremented on every playTrack() call.
+//   Every Howl event callback captures its own `gen` value at creation time
+//   and bails out immediately if playGeneration has moved on. This prevents
+//   stale onend / onplay callbacks from a superseded Howl from affecting state.
+
+let activeHowl: Howl | null = null;
+let playGeneration = 0;
 let progressInterval: ReturnType<typeof setInterval> | null = null;
 let seekDebounce: ReturnType<typeof setTimeout> | null = null;
-let gstSeeking = false;           // true while GStreamer is processing a seek
-let pendingSeekTime: number | null = null; // queue at most one seek
-let gstSeekWatchdog: ReturnType<typeof setTimeout> | null = null; // safety release if onseek never fires
-let hangRecoveryPos: number | null = null; // set before a recovery playTrack call so onplay seeks here
-let gaplessPrewarmedId: string | null = null; // track id whose prefetched Howl has been silently pre-started
-let hangLastTime = -1;            // last observed currentTime for hang detection
-let hangStallTime = 0;            // Date.now() when currentTime last moved
+let resumeFromTime: number | null = null; // cold-start resume position (app relaunch)
+let lastSeekAt = 0; // timestamp (ms) of the most recent seek — used to ignore spurious 'ended' events
+let togglePlayLock = false; // prevents rapid double-click from sending pause→play before GStreamer settles
 
 function clearProgress() {
   if (progressInterval) {
@@ -92,31 +96,27 @@ function clearProgress() {
   }
 }
 
-function armGstWatchdog(cb: () => void) {
-  if (gstSeekWatchdog) clearTimeout(gstSeekWatchdog);
-  gstSeekWatchdog = setTimeout(() => {
-    gstSeekWatchdog = null;
-    cb();
-  }, 2000);
+// Remove all Howler-level listeners BEFORE stopping/unloading.
+// This is the critical step that prevents stale `onend` callbacks from firing
+// on a superseded Howl and triggering an unwanted next() / skip.
+function destroyHowl(howl: Howl | null) {
+  if (!howl) return;
+  howl.off();     // remove all Howler event listeners
+  howl.stop();    // stop any playing sound
+  howl.unload();  // release the <audio> element and all resources
 }
 
-function disarmGstWatchdog() {
-  if (gstSeekWatchdog) { clearTimeout(gstSeekWatchdog); gstSeekWatchdog = null; }
-}
-
-// Helper to debounce or fire queue syncs
+// ─── Server queue sync ─────────────────────────────────────────────────────────
 let syncTimeout: ReturnType<typeof setTimeout> | null = null;
 function syncQueueToServer(queue: Track[], currentTrack: Track | null, currentTime: number) {
   if (syncTimeout) clearTimeout(syncTimeout);
   syncTimeout = setTimeout(() => {
-    // Collect up to 1000 track IDs just in case it's huge
     const ids = queue.slice(0, 1000).map(t => t.id);
-    // Convert currentTime (seconds) to expected format (milliseconds)
     const pos = Math.floor(currentTime * 1000);
     savePlayQueue(ids, currentTrack?.id, pos).catch(err => {
       console.error('Failed to sync play queue to server', err);
     });
-  }, 1500); // 1.5s debounce
+  }, 1500);
 }
 
 export const usePlayerStore = create<PlayerState>()(
@@ -131,7 +131,6 @@ export const usePlayerStore = create<PlayerState>()(
       currentTime: 0,
       volume: 0.8,
       howl: null,
-      prefetched: new Map(),
       scrobbled: false,
       isQueueVisible: true,
       isFullscreenOpen: false,
@@ -139,357 +138,320 @@ export const usePlayerStore = create<PlayerState>()(
       contextMenu: { isOpen: false, x: 0, y: 0, item: null, type: null },
 
       openContextMenu: (x, y, item, type, queueIndex) => set({
-        contextMenu: { isOpen: true, x, y, item, type, queueIndex }
+        contextMenu: { isOpen: true, x, y, item, type, queueIndex },
       }),
       closeContextMenu: () => set(state => ({
-        contextMenu: { ...state.contextMenu, isOpen: false }
+        contextMenu: { ...state.contextMenu, isOpen: false },
       })),
 
-      toggleQueue: () => set((state) => ({ isQueueVisible: !state.isQueueVisible })),
-      toggleFullscreen: () => set((state) => ({ isFullscreenOpen: !state.isFullscreenOpen })),
+      toggleQueue: () => set(state => ({ isQueueVisible: !state.isQueueVisible })),
+      toggleFullscreen: () => set(state => ({ isFullscreenOpen: !state.isFullscreenOpen })),
 
-  toggleRepeat: () => set((state) => {
-    const modes = ['off', 'all', 'one'] as const;
-    const nextIdx = (modes.indexOf(state.repeatMode) + 1) % modes.length;
-    return { repeatMode: modes[nextIdx] };
-  }),
+      toggleRepeat: () => set(state => {
+        const modes = ['off', 'all', 'one'] as const;
+        return { repeatMode: modes[(modes.indexOf(state.repeatMode) + 1) % modes.length] };
+      }),
 
-  stop: () => {
-    get().howl?.stop();
-    get().howl?.seek(0);
-    clearProgress();
-    set({ isPlaying: false, progress: 0, buffered: 0, currentTime: 0 });
-  },
+      // ── stop ────────────────────────────────────────────────────────────────
+      stop: () => {
+        destroyHowl(activeHowl);
+        activeHowl = null;
+        clearProgress();
+        if (seekDebounce) { clearTimeout(seekDebounce); seekDebounce = null; }
+        set({ isPlaying: false, progress: 0, buffered: 0, currentTime: 0, howl: null });
+      },
 
-  playTrack: (track, queue) => {
-    const state = get();
-    // Stop current
-    state.howl?.unload();
-    clearProgress();
-    if (seekDebounce) { clearTimeout(seekDebounce); seekDebounce = null; }
-    disarmGstWatchdog();
-    gstSeeking = false;
-    pendingSeekTime = null;
-    hangLastTime = -1;
-    hangStallTime = 0;
-    gaplessPrewarmedId = null;
+      // ── playTrack ────────────────────────────────────────────────────────────
+      playTrack: (track, queue) => {
+        // Claim a new generation. Every callback created below captures `gen`.
+        // If playTrack() is called again before these callbacks fire, gen will
+        // no longer match playGeneration and the callbacks silently return.
+        const gen = ++playGeneration;
 
-    const newQueue = queue ?? state.queue;
-    const idx = newQueue.findIndex(t => t.id === track.id);
+        // Fully destroy the previous Howl — listeners first, then audio resources.
+        destroyHowl(activeHowl);
+        activeHowl = null;
+        clearProgress();
+        if (seekDebounce) { clearTimeout(seekDebounce); seekDebounce = null; }
 
-    // Reuse a prefetched Howl if available — it's already connected and buffering
-    const prefetchMap = state.prefetched;
-    let howl: Howl;
-    let gaplessHandoff = false;
-    if (prefetchMap.has(track.id)) {
-      howl = prefetchMap.get(track.id)!;
-      prefetchMap.delete(track.id);
-      set({ prefetched: new Map(prefetchMap) });
-      if (howl.playing()) {
-        // Gapless: pipeline already running — pause, seek to 0, then play
-        gaplessHandoff = true;
-        howl.pause();
-        hangRecoveryPos = 0; // onplay will seek to position 0
-      }
-      howl.volume(state.volume);
-    } else {
-      howl = new Howl({ src: [buildStreamUrl(track.id)], html5: true, volume: state.volume });
-    }
+        const state = get();
+        const newQueue = queue ?? state.queue;
+        const idx = newQueue.findIndex(t => t.id === track.id);
 
-    howl.on('play', () => {
-      set({ isPlaying: true });
-      reportNowPlaying(track.id);
+        const howl = new Howl({
+          src: [buildStreamUrl(track.id)],
+          html5: true,
+          volume: state.volume,
+        });
+        activeHowl = howl;
 
-      // If recovering from a pipeline hang, seek to the saved position
-      if (hangRecoveryPos !== null) {
-        const pos = hangRecoveryPos;
-        hangRecoveryPos = null;
-        gstSeeking = true;
-        armGstWatchdog(() => { gstSeeking = false; pendingSeekTime = null; });
-        setTimeout(() => { howl.seek(pos); }, 50);
-      }
+        // Commit state BEFORE howl.play() so queueIndex / currentTrack are
+        // already correct when the onplay / onend callbacks fire.
+        set({
+          currentTrack: track,
+          queue: newQueue,
+          queueIndex: idx >= 0 ? idx : 0,
+          howl,
+          progress: 0,
+          buffered: 0,
+          currentTime: 0,
+          scrobbled: false,
+        });
 
-      set({ scrobbled: false });
-      hangStallTime = Date.now();
-      hangLastTime = -1;
+        howl.on('play', () => {
+          if (playGeneration !== gen) return;
+          set({ isPlaying: true });
+          reportNowPlaying(track.id);
 
-      progressInterval = setInterval(() => {
-        const h = get().howl;
-        if (!h) return;
-        const s = h.seek();
-        const cur = typeof s === 'number' ? s : 0;
-        const dur = h.duration() || 1;
-        const prog = cur / dur;
-
-        // Read buffered ranges from the underlying <audio> element
-        const audioNode = (h as any)._sounds?.[0]?._node as HTMLAudioElement | undefined;
-        if (audioNode?.buffered && audioNode.duration > 0) {
-          let totalBuf = 0;
-          for (let i = 0; i < audioNode.buffered.length; i++) {
-            totalBuf += audioNode.buffered.end(i) - audioNode.buffered.start(i);
+          // Cold-start resume: seek to the position that was saved before the
+          // app was closed. A short delay lets the audio pipeline stabilise.
+          if (resumeFromTime !== null) {
+            const t = resumeFromTime;
+            resumeFromTime = null;
+            setTimeout(() => {
+              if (playGeneration === gen) activeHowl?.seek(t);
+            }, 80);
           }
-          set({ currentTime: cur, progress: prog, buffered: Math.min(1, totalBuf / audioNode.duration) });
-        } else {
-          set({ currentTime: cur, progress: prog });
-        }
 
-        // Hang detection: if playing but currentTime hasn't moved in 5s, recover
-        if (Math.abs(cur - hangLastTime) > 0.05) {
-          hangLastTime = cur;
-          hangStallTime = Date.now();
-        } else if (get().isPlaying && Date.now() - hangStallTime > 5000) {
-          const { currentTrack: ct, queue: q } = get();
-          if (ct) {
-            hangRecoveryPos = cur;
-            hangStallTime = Date.now(); // prevent re-trigger while recovering
-            get().playTrack(ct, q);
+          clearProgress(); // guard against duplicate onplay
+          progressInterval = setInterval(() => {
+            // Bail out if this interval belongs to a superseded generation
+            if (playGeneration !== gen) { clearProgress(); return; }
+            const h = activeHowl;
+            if (!h) return;
+
+            const raw = h.seek();
+            const cur = typeof raw === 'number' ? raw : 0;
+            const dur = h.duration() || 1;
+
+            // Buffered indicator via underlying <audio> element
+            const audioNode = (h as any)._sounds?.[0]?._node as HTMLAudioElement | undefined;
+            if (audioNode?.buffered && audioNode.duration > 0) {
+              let totalBuf = 0;
+              for (let i = 0; i < audioNode.buffered.length; i++) {
+                totalBuf += audioNode.buffered.end(i) - audioNode.buffered.start(i);
+              }
+              set({ currentTime: cur, progress: cur / dur, buffered: Math.min(1, totalBuf / audioNode.duration) });
+            } else {
+              set({ currentTime: cur, progress: cur / dur });
+            }
+
+            // Scrobble at 50%
+            if (cur / dur >= 0.5 && !get().scrobbled) {
+              set({ scrobbled: true });
+              const { scrobblingEnabled } = useAuthStore.getState();
+              if (scrobblingEnabled) scrobbleSong(track.id, Date.now());
+            }
+          }, 500);
+        });
+
+        howl.on('end', () => {
+          if (playGeneration !== gen) return;
+          // WebKit (and GStreamer on Linux) can fire spurious 'ended' events
+          // immediately after a direct audioNode.currentTime seek. Guard: if we
+          // are within 1 s of the last seek AND the playhead is not actually near
+          // the track end, treat this as a false alarm and ignore it.
+          if (Date.now() - lastSeekAt < 1000) {
+            const audioNode = (activeHowl as any)?._sounds?.[0]?._node as HTMLAudioElement | undefined;
+            const pos = audioNode ? audioNode.currentTime : (typeof activeHowl?.seek() === 'number' ? activeHowl.seek() as number : 0);
+            const dur = activeHowl?.duration() ?? 0;
+            if (dur > 0 && pos < dur - 1) return;
           }
+          clearProgress();
+          set({ isPlaying: false, progress: 0, buffered: 0, currentTime: 0 });
+          const { repeatMode, currentTrack, queue: q } = get();
+          if (repeatMode === 'one' && currentTrack) {
+            get().playTrack(currentTrack, q);
+          } else {
+            get().next();
+          }
+        });
+
+        howl.on('playerror', (_, err) => {
+          if (playGeneration !== gen) return;
+          console.error('Howl play error:', err);
+          clearProgress();
+          set({ isPlaying: false });
+        });
+
+        howl.play();
+        syncQueueToServer(newQueue, track, 0);
+      },
+
+      // ── pause / resume / togglePlay ──────────────────────────────────────────
+      pause: () => {
+        activeHowl?.pause();
+        clearProgress();
+        set({ isPlaying: false });
+      },
+
+      resume: () => {
+        const { currentTrack, queue, currentTime } = get();
+        if (!currentTrack) return;
+        if (activeHowl) {
+          activeHowl.play();
+          set({ isPlaying: true });
           return;
         }
-
-          // Gapless pre-warm: start next track's Howl silently ~1s before end
-          if (!gaplessPrewarmedId && dur > 2 && dur - cur < 1.0) {
-            const { queue: q, queueIndex: qi, repeatMode: rm, prefetched: pf } = get();
-            const nextIdx = qi + 1;
-            const nextTrack = nextIdx < q.length ? q[nextIdx]
-              : (rm === 'all' && q.length > 0 ? q[0] : null);
-            if (nextTrack && pf.has(nextTrack.id)) {
-              const nh = pf.get(nextTrack.id)!;
-              if (!nh.playing()) { nh.volume(0); nh.play(); gaplessPrewarmedId = nextTrack.id; }
-            }
-          }
-
-        // Scrobble at 50%
-        if (prog >= 0.5 && !get().scrobbled) {
-          set({ scrobbled: true });
-          const { scrobblingEnabled } = useAuthStore.getState();
-          if (scrobblingEnabled) scrobbleSong(track.id, Date.now());
-        }
-      }, 500);
-
-      // Prefetch next 3
-      get().prefetchUpcoming(idx + 1, newQueue);
-    });
-
-    howl.on('end', () => {
-      clearProgress();
-      set({ isPlaying: false, progress: 0, buffered: 0, currentTime: 0 });
-      const { repeatMode, currentTrack, queue } = get();
-      if (repeatMode === 'one' && currentTrack) {
+        // Cold start after app relaunch — Howl was not persisted.
+        resumeFromTime = currentTime > 0 ? currentTime : null;
         get().playTrack(currentTrack, queue);
-      } else {
-        get().next();
-      }
-    });
+      },
 
-    howl.on('stop', () => {
-      clearProgress();
-      set({ isPlaying: false });
-    });
+      togglePlay: () => {
+        // Guard: rapid double-clicks send pause→play (or play→pause) before
+        // GStreamer/WebKit has finished the previous state transition, causing
+        // the audio pipeline to hang for several seconds. Ignore the second
+        // click if it arrives within 300 ms of the first.
+        if (togglePlayLock) return;
+        togglePlayLock = true;
+        setTimeout(() => { togglePlayLock = false; }, 300);
+        const { isPlaying } = get();
+        isPlaying ? get().pause() : get().resume();
+      },
 
-    howl.on('seek', () => {
-      disarmGstWatchdog();
-      gstSeeking = false;
-      hangLastTime = -1;
-      hangStallTime = Date.now();
-      if (pendingSeekTime !== null) {
-        const t = pendingSeekTime;
-        pendingSeekTime = null;
-        gstSeeking = true;
-        armGstWatchdog(() => {
-          gstSeeking = false;
-          pendingSeekTime = null;
-          const { currentTrack: ct, queue: q } = get();
-          if (ct) { hangRecoveryPos = t; get().playTrack(ct, q); }
-        });
-        get().howl?.seek(t);
-      }
-    });
-
-    howl.play(); // for gapless: resumes from paused state, onplay fires and seeks to 0 via hangRecoveryPos
-    set({ currentTrack: track, queue: newQueue, queueIndex: idx >= 0 ? idx : 0, howl, progress: 0, buffered: 0, currentTime: 0 });
-    syncQueueToServer(newQueue, track, 0);
-  },
-
-  pause: () => {
-    get().howl?.pause();
-    clearProgress();
-    set({ isPlaying: false });
-  },
-
-  resume: () => {
-    const { howl, currentTrack, queue, currentTime } = get();
-    if (!currentTrack) return;
-    if (!howl) {
-      // Cold start from restored state (e.g. app relaunch) — resume from saved position
-      if (currentTime > 0) hangRecoveryPos = currentTime;
-      get().playTrack(currentTrack, queue);
-      return;
-    }
-    howl.play();
-    set({ isPlaying: true });
-  },
-
-  togglePlay: () => {
-    const { isPlaying } = get();
-    isPlaying ? get().pause() : get().resume();
-  },
-
-  next: () => {
-    const { queue, queueIndex, repeatMode } = get();
-    const nextIdx = queueIndex + 1;
-    if (nextIdx < queue.length) {
-      get().playTrack(queue[nextIdx], queue);
-    } else if (repeatMode === 'all' && queue.length > 0) {
-      get().playTrack(queue[0], queue);
-    }
-  },
-
-  previous: () => {
-    const { howl, queue, queueIndex, currentTime } = get();
-    if (currentTime > 3) {
-      howl?.seek(0);
-      set({ progress: 0, currentTime: 0 });
-      return;
-    }
-    const prevIdx = queueIndex - 1;
-    if (prevIdx >= 0) get().playTrack(queue[prevIdx], queue);
-  },
-
-  seek: (progress) => {
-    const { howl, currentTrack } = get();
-    if (!howl || !currentTrack) return;
-    const time = progress * (howl.duration() || currentTrack.duration);
-    set({ progress, currentTime: time });
-    if (seekDebounce) clearTimeout(seekDebounce);
-    seekDebounce = setTimeout(() => {
-      seekDebounce = null;
-      if (gstSeeking) {
-        // GStreamer busy — queue this position; onseek will send it when ready
-        pendingSeekTime = time;
-        return;
-      }
-      gstSeeking = true;
-      const seekTarget = time;
-      armGstWatchdog(() => {
-        gstSeeking = false;
-        pendingSeekTime = null;
-        const { currentTrack: ct, queue: q } = get();
-        if (ct) { hangRecoveryPos = seekTarget; get().playTrack(ct, q); }
-      });
-      get().howl?.seek(time);
-    }, 100);
-  },
-
-  setVolume: (v) => {
-    const clamped = Math.max(0, Math.min(1, v));
-    get().howl?.volume(clamped);
-    set({ volume: clamped });
-  },
-
-  setProgress: (t, duration) => {
-    set({ currentTime: t, progress: duration > 0 ? t / duration : 0 });
-  },
-
-  enqueue: (tracks) => {
-    set(state => {
-      const newQueue = [...state.queue, ...tracks];
-      syncQueueToServer(newQueue, state.currentTrack, state.currentTime);
-      return { queue: newQueue };
-    });
-  },
-
-  clearQueue: () => {
-    get().howl?.unload();
-    clearProgress();
-    set({ queue: [], queueIndex: 0, currentTrack: null, isPlaying: false, progress: 0, buffered: 0, currentTime: 0, howl: null });
-    syncQueueToServer([], null, 0);
-  },
-
-  // Internal: prefetch next N tracks
-  prefetchUpcoming: (fromIndex: number, queue: Track[]) => {
-    const { prefetched } = get();
-    // Unload and clear old prefetches to prevent memory leaks
-    prefetched.forEach((h, id) => {
-      h.unload();
-    });
-    prefetched.clear();
-
-    const toFetch = queue.slice(fromIndex, fromIndex + 3);
-    toFetch.forEach(track => {
-      const url = buildStreamUrl(track.id);
-      const h = new Howl({ src: [url], html5: true, preload: true, autoplay: false });
-      prefetched.set(track.id, h);
-    });
-    set({ prefetched: new Map(prefetched) });
-  },
-  // Playlist management
-  reorderQueue: (startIndex: number, endIndex: number) => {
-    const { queue, queueIndex, currentTrack } = get();
-    const result = Array.from(queue);
-    const [removed] = result.splice(startIndex, 1);
-    result.splice(endIndex, 0, removed);
-    
-    // Update queueIndex if the currently playing track moved
-    let newIndex = queueIndex;
-    if (currentTrack) {
-      newIndex = result.findIndex(t => t.id === currentTrack.id);
-    }
-    set({ queue: result, queueIndex: Math.max(0, newIndex) });
-    syncQueueToServer(result, currentTrack, get().currentTime);
-  },
-  
-  removeTrack: (index: number) => {
-    const { queue, queueIndex } = get();
-    const newQueue = [...queue];
-    newQueue.splice(index, 1);
-    // If we removed the currently playing track, stop playback? 
-    // Usually wait until it finishes or user skips. We'll just update state.
-    set({ queue: newQueue, queueIndex: Math.min(queueIndex, newQueue.length - 1) });
-    syncQueueToServer(newQueue, get().currentTrack, get().currentTime);
-  },
-  
-  initializeFromServerQueue: async () => {
-    try {
-      const q = await getPlayQueue();
-      if (q.songs.length > 0) {
-        const mappedTracks: Track[] = q.songs.map((s: SubsonicSong) => ({
-          id: s.id, title: s.title, artist: s.artist, album: s.album,
-          albumId: s.albumId, artistId: s.artistId, duration: s.duration, coverArt: s.coverArt, track: s.track,
-          year: s.year, bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating,
-        }));
-        
-        let currentTrack = mappedTracks[0];
-        let queueIndex = 0;
-        
-        if (q.current) {
-          const idx = mappedTracks.findIndex(t => t.id === q.current);
-          if (idx >= 0) {
-            currentTrack = mappedTracks[idx];
-            queueIndex = idx;
-          }
+      // ── next / previous ──────────────────────────────────────────────────────
+      next: () => {
+        const { queue, queueIndex, repeatMode } = get();
+        const nextIdx = queueIndex + 1;
+        if (nextIdx < queue.length) {
+          get().playTrack(queue[nextIdx], queue);
+        } else if (repeatMode === 'all' && queue.length > 0) {
+          get().playTrack(queue[0], queue);
+        } else {
+          // End of queue — clean stop without destroying currentTrack metadata
+          destroyHowl(activeHowl);
+          activeHowl = null;
+          clearProgress();
+          set({ isPlaying: false, progress: 0, buffered: 0, currentTime: 0, howl: null });
         }
-        
-        set({ 
-          queue: mappedTracks, 
-          queueIndex,
-          currentTrack,
-          // Convert position from ms to s
-          currentTime: q.position ? q.position / 1000 : 0
+      },
+
+      previous: () => {
+        const { queue, queueIndex, currentTime } = get();
+        if (currentTime > 3) {
+          activeHowl?.seek(0);
+          set({ progress: 0, currentTime: 0 });
+          return;
+        }
+        const prevIdx = queueIndex - 1;
+        if (prevIdx >= 0) get().playTrack(queue[prevIdx], queue);
+      },
+
+      // ── seek ─────────────────────────────────────────────────────────────────
+      // Debounced 100 ms to collapse rapid slider drags into one actual seek.
+      // We bypass Howler's seek() entirely and set currentTime directly on the
+      // underlying <audio> element. Howler's seek() internally calls pause() +
+      // play() which can fire spurious ended/stop events on some WebKit versions,
+      // especially on the second consecutive seek.
+      seek: (progress) => {
+        const { currentTrack } = get();
+        if (!activeHowl || !currentTrack) return;
+        const dur = activeHowl.duration() || currentTrack.duration;
+        if (!dur || !isFinite(dur)) return;
+        // Clamp slightly before end to prevent accidentally triggering 'ended'
+        const time = Math.max(0, Math.min(progress * dur, dur - 0.25));
+        set({ progress: time / dur, currentTime: time });
+        lastSeekAt = Date.now();
+        if (seekDebounce) clearTimeout(seekDebounce);
+        seekDebounce = setTimeout(() => {
+          seekDebounce = null;
+          const audioNode = (activeHowl as any)?._sounds?.[0]?._node as HTMLAudioElement | undefined;
+          if (audioNode && isFinite(time)) {
+            audioNode.currentTime = time;
+          } else {
+            activeHowl?.seek(time);
+          }
+        }, 100);
+      },
+
+      // ── volume ───────────────────────────────────────────────────────────────
+      setVolume: (v) => {
+        const clamped = Math.max(0, Math.min(1, v));
+        activeHowl?.volume(clamped);
+        set({ volume: clamped });
+      },
+
+      setProgress: (t, duration) => {
+        set({ currentTime: t, progress: duration > 0 ? t / duration : 0 });
+      },
+
+      // ── queue management ─────────────────────────────────────────────────────
+      enqueue: (tracks) => {
+        set(state => {
+          const newQueue = [...state.queue, ...tracks];
+          syncQueueToServer(newQueue, state.currentTrack, state.currentTime);
+          return { queue: newQueue };
         });
-      }
-    } catch (e) {
-      console.error('Failed to initialize queue from server', e);
+      },
+
+      clearQueue: () => {
+        destroyHowl(activeHowl);
+        activeHowl = null;
+        clearProgress();
+        if (seekDebounce) { clearTimeout(seekDebounce); seekDebounce = null; }
+        set({ queue: [], queueIndex: 0, currentTrack: null, isPlaying: false, progress: 0, buffered: 0, currentTime: 0, howl: null });
+        syncQueueToServer([], null, 0);
+      },
+
+      reorderQueue: (startIndex, endIndex) => {
+        const { queue, queueIndex, currentTrack } = get();
+        const result = Array.from(queue);
+        const [removed] = result.splice(startIndex, 1);
+        result.splice(endIndex, 0, removed);
+        let newIndex = queueIndex;
+        if (currentTrack) newIndex = result.findIndex(t => t.id === currentTrack.id);
+        set({ queue: result, queueIndex: Math.max(0, newIndex) });
+        syncQueueToServer(result, currentTrack, get().currentTime);
+      },
+
+      removeTrack: (index) => {
+        const { queue, queueIndex } = get();
+        const newQueue = [...queue];
+        newQueue.splice(index, 1);
+        set({ queue: newQueue, queueIndex: Math.min(queueIndex, newQueue.length - 1) });
+        syncQueueToServer(newQueue, get().currentTrack, get().currentTime);
+      },
+
+      // ── server queue restore ─────────────────────────────────────────────────
+      initializeFromServerQueue: async () => {
+        try {
+          const q = await getPlayQueue();
+          if (q.songs.length > 0) {
+            const mappedTracks: Track[] = q.songs.map((s: SubsonicSong) => ({
+              id: s.id, title: s.title, artist: s.artist, album: s.album,
+              albumId: s.albumId, artistId: s.artistId, duration: s.duration,
+              coverArt: s.coverArt, track: s.track, year: s.year,
+              bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating,
+            }));
+
+            let currentTrack = mappedTracks[0];
+            let queueIndex = 0;
+
+            if (q.current) {
+              const idx = mappedTracks.findIndex(t => t.id === q.current);
+              if (idx >= 0) { currentTrack = mappedTracks[idx]; queueIndex = idx; }
+            }
+
+            set({
+              queue: mappedTracks,
+              queueIndex,
+              currentTrack,
+              currentTime: q.position ? q.position / 1000 : 0,
+            });
+          }
+        } catch (e) {
+          console.error('Failed to initialize queue from server', e);
+        }
+      },
+    }),
+    {
+      name: 'psysonic-player',
+      storage: createJSONStorage(() => localStorage),
+      partialize: (state) => ({
+        volume: state.volume,
+        repeatMode: state.repeatMode,
+      } as Partial<PlayerState>),
     }
-  },
-  
-
-
-}), {
-  name: 'psysonic-player',
-  storage: createJSONStorage(() => localStorage),
-  partialize: (state) => ({
-    volume: state.volume,
-    repeatMode: state.repeatMode,
-  } as Partial<PlayerState>),
-}));
+  )
+);

src/styles/components.css

@@ -23,7 +23,9 @@
   background-position: center;
   transition: transform 8s ease, opacity 0.8s ease, filter 0.8s ease;
   transform: scale(1.05);
+  filter: blur(12px);
 }
+.hero:hover .hero-bg { filter: blur(8px); }
 .hero:hover .hero-bg { transform: scale(1); }
 
 .hero-dots {
@@ -569,6 +571,7 @@
   display: grid;
   grid-template-columns: 36px minmax(100px, 3fr) 70px 80px 60px auto;
   gap: var(--space-3);
+  align-items: center;
   padding: var(--space-2) var(--space-3);
   font-size: 11px;
   font-weight: 600;