feat: Ambient Stage, Queue DnD overhaul, and GStreamer fixes (v1.0.8)

.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@v5
+      - uses: actions/checkout@v4
       - name: setup node
-        uses: actions/setup-node@v5
+        uses: actions/setup-node@v4
         with:
           node-version: lts/*
       - name: get version
@@ -56,9 +56,9 @@ jobs:
             args: ''
     runs-on: ${{ matrix.settings.platform }}
     steps:
-      - uses: actions/checkout@v5
+      - uses: actions/checkout@v4
       - name: setup node
-        uses: actions/setup-node@v5
+        uses: actions/setup-node@v4
         with:
           node-version: lts/*
       - name: install Rust stable
@@ -80,7 +80,7 @@ jobs:
       contents: write
     runs-on: ubuntu-22.04
     steps:
-      - uses: actions/checkout@v5
+      - uses: actions/checkout@v4
 
       - 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@v5
+        uses: actions/setup-node@v4
         with:
           node-version: lts/*
 

CHANGELOG.md

@@ -5,76 +5,6 @@ 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
-- **Active Track Highlighting**: The currently playing song is highlighted in album tracklists with a subtle pulsing accent background and a play icon — persists when navigating away and returning.
-- **Marquee Title in Fullscreen Player**: Long song titles now scroll smoothly as a marquee instead of being cut off.
-- **Clickable Artist / Album in Player Bar**: Clicking the artist name navigates to the artist page; clicking the song title navigates to the album page. Same behaviour in the Queue panel's now-playing strip.
-- **Linux App Menu Category**: Application now appears under **Multimedia** in desktop application menus (GNOME, KDE, etc.) instead of "Other".
-- **Windows MSI Upgrade Support**: Added stable `upgradeCode` GUID so the MSI installer recognises previous versions and upgrades in-place without requiring manual uninstallation first.
-
-### Fixed
-- **Drag & Drop (macOS / Windows)**: Queue reordering now works correctly on macOS WKWebView and Windows WebView2. The previous fix cleared index refs synchronously in `onDragEnd`, which fires before `drop` on both platforms — refs are now cleared with a short delay so `onDropQueue` can read the correct source and destination indices.
-- **Settings Dropdowns**: Language and theme selects now have a clearly visible border (was invisible against the card background).
-- **Tracklist Format Column**: Removed file size and kHz from the format column — codec and bitrate only. Column moved to the far right, after duration. Width is now dynamic (`auto`).
-- **`tauri.conf.json`**: Fixed invalid placement of `shortDescription`/`longDescription` (were incorrectly nested under `bundle.linux`, now at `bundle` level). Removed invalid `nsis.allowDowngrades` field.
-
-### Changed
-- **Favorites Icon**: Replaced the incorrect fork icon with a star icon in the Random Mix page, consistent with all other pages.
-- **Sidebar**: Removed drag-to-resize handle. Width now adapts dynamically to the viewport via `clamp(180px, 15vw, 220px)`.
-- **About Section**: Added "Developed with the support of Claude Code by Anthropic" credit. Fixed "weiterzugeben" wording in German MIT licence text.
-- **Minimize to Tray**: Now disabled by default.
-
-## [1.0.9] - 2026-03-13
-
-### Added
-- **Gapless Playback**: The next track's audio pipeline is silently pre-warmed before the current track ends, eliminating the gap between songs — especially noticeable on live albums and concept records.
-- **Pre-caching**: Prefetched Howl instances are now actually reused for playback, giving near-instant track transitions instead of a new HTTP connection each time.
-- **Buffered Progress Indicator**: The seek bar now shows a secondary fill indicating how much of the current track has been buffered by the browser — visible in both the Player Bar and Fullscreen Player.
-- **Resume on Startup**: Pressing Play after launching the app now resumes the last track at the saved playback position instead of doing nothing.
-- **Album Track Hover Play Button**: Hovering over a track number in Album Detail reveals a play button for quick single-click playback.
-- **Ken Burns Background**: The Fullscreen Player background now slowly drifts and zooms (Ken Burns effect) for a more cinematic feel.
-- **F11 Fullscreen**: Toggle native borderless fullscreen with F11.
-- **Compact Queue Now-Playing**: The current track block in the Queue Panel is now a slim horizontal strip (72 px thumbnail) instead of a full-width cover, freeing up significantly more space for the queue list on smaller screens.
-
-### Fixed
-- **GStreamer Seek Stability**: Implemented a three-layer recovery system for Linux/GStreamer seek hangs: (1) seek queuing to prevent overlapping GStreamer seeks, (2) a 2-second watchdog that triggers automatic recovery if a seek never completes, (3) an 8-second hang detector that silently recreates the audio pipeline and resumes from the last known position if playback freezes entirely.
-- **Fullscreen Player**: Removed drop shadow from cover art — looks cleaner on lighter artist backgrounds.
-
-### Changed
-- **Hero Section**: Increased height (300 → 360 px) and cover art size (180 → 220 px) to prevent long album titles from clipping.
-- **Player Bar**: Controls and progress bar moved closer together for a more balanced layout.
-
 ## [1.0.8] - 2026-03-13
 
 ### Added

README.md

@@ -16,6 +16,9 @@ Psysonic is a beautiful desktop music player built completely from the ground up
 
 Designed specifically for users hosting their own music via Navidrome or other Subsonic API servers, Psysonic aims to be the best way to interact with your personal library.
 
+Known Limitations
+
+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.
 
 ![Psysonic Screenshot](public/screenshot.png)
 
@@ -35,8 +38,6 @@ 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.12",
+  "version": "1.0.8",
   "private": true,
   "scripts": {
     "dev": "vite",

src-tauri/Cargo.lock

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

src-tauri/Cargo.toml

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

src-tauri/capabilities/default.json

@@ -25,8 +25,6 @@
     "core:window:allow-set-title",
     "core:window:allow-close",
     "core:window:allow-hide",
-    "core:window:allow-show",
-    "core:window:allow-set-fullscreen",
-    "core:window:allow-is-fullscreen"
+    "core:window:allow-show"
   ]
 }

src-tauri/gen/schemas/capabilities.json

@@ -1 +1 @@
-{"default":{"identifier":"default","description":"Default capabilities for Psysonic","local":true,"windows":["main"],"permissions":["core:default","shell:default","shell:allow-open","notification:default","global-shortcut:allow-register","global-shortcut:allow-unregister","store:default","store:allow-load","store:allow-set","store:allow-get","store:allow-save","dialog:default","dialog:allow-open","fs:default","fs:allow-write-file","fs:allow-mkdir","fs:scope-download-recursive","core:window:allow-set-title","core:window:allow-close","core:window:allow-hide","core:window:allow-show","core:window:allow-set-fullscreen","core:window:allow-is-fullscreen"],"platforms":["linux","macOS","windows"]}}
+{"default":{"identifier":"default","description":"Default capabilities for Psysonic","local":true,"windows":["main"],"permissions":["core:default","shell:default","shell:allow-open","notification:default","global-shortcut:allow-register","global-shortcut:allow-unregister","store:default","store:allow-load","store:allow-set","store:allow-get","store:allow-save","dialog:default","dialog:allow-open","fs:default","fs:allow-write-file","fs:allow-mkdir","fs:scope-download-recursive","core:window:allow-set-title","core:window:allow-close","core:window:allow-hide","core:window:allow-show"],"platforms":["linux","macOS","windows"]}}

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "Psysonic",
-  "version": "1.0.12",
+  "version": "1.0.8",
   "identifier": "dev.psysonic.app",
   "build": {
     "beforeDevCommand": "npm run dev",
@@ -45,18 +45,10 @@
       "icons/icon.icns",
       "icons/icon.ico"
     ],
-    "category": "Music",
-    "shortDescription": "A sleek music player for Subsonic-compatible servers",
-    "longDescription": "Psysonic is a desktop music player for Subsonic-compatible servers such as Navidrome and Gonic. It features a modern Catppuccin-themed UI with glassmorphism effects, gapless playback, a fullscreen ambient player, play queue management with drag-and-drop, scrobbling support, and multi-server profiles.",
     "linux": {
       "appimage": {
         "bundleMediaFramework": true
       }
-    },
-    "windows": {
-      "wix": {
-        "upgradeCode": "e3b4c2a1-7f6d-4e8b-9c5a-2d1f0e3b8a7c"
-      }
     }
   }
 }

src/App.tsx

@@ -23,7 +23,6 @@ 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';
@@ -66,10 +65,12 @@ function AppShell() {
     fn();
   }, [currentTrack, isPlaying]);
 
+  const [sidebarWidth, setSidebarWidth] = useState(220);
   const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(() => {
     return localStorage.getItem('psysonic_sidebar_collapsed') === 'true';
   });
   const [queueWidth, setQueueWidth] = useState(300);
+  const [isDraggingSidebar, setIsDraggingSidebar] = useState(false);
   const [isDraggingQueue, setIsDraggingQueue] = useState(false);
 
   useEffect(() => {
@@ -77,18 +78,24 @@ function AppShell() {
   }, [isSidebarCollapsed]);
 
   const handleMouseMove = useCallback((e: MouseEvent) => {
-    if (isDraggingQueue) {
+    if (isDraggingSidebar) {
+      // Limit sidebar width between 180px and 400px
+      const newWidth = Math.max(180, Math.min(e.clientX, 400));
+      setSidebarWidth(newWidth);
+    } else if (isDraggingQueue) {
+      // Limit queue width between 250px and 500px. Queue is on the right.
       const newWidth = Math.max(250, Math.min(window.innerWidth - e.clientX, 500));
       setQueueWidth(newWidth);
     }
-  }, [isDraggingQueue]);
+  }, [isDraggingSidebar, isDraggingQueue]);
 
   const handleMouseUp = useCallback(() => {
+    setIsDraggingSidebar(false);
     setIsDraggingQueue(false);
   }, []);
 
   useEffect(() => {
-    if (isDraggingQueue) {
+    if (isDraggingSidebar || isDraggingQueue) {
       window.addEventListener('mousemove', handleMouseMove);
       window.addEventListener('mouseup', handleMouseUp);
       document.body.style.cursor = 'col-resize';
@@ -104,13 +111,13 @@ function AppShell() {
       window.removeEventListener('mouseup', handleMouseUp);
       document.body.classList.remove('is-dragging');
     };
-  }, [isDraggingQueue, handleMouseMove, handleMouseUp]);
+  }, [isDraggingSidebar, isDraggingQueue, handleMouseMove, handleMouseUp]);
 
   return (
     <div 
       className="app-shell"
-      style={{
-        '--sidebar-width': isSidebarCollapsed ? '72px' : 'clamp(180px, 15vw, 220px)',
+      style={{ 
+        '--sidebar-width': isSidebarCollapsed ? '72px' : `${sidebarWidth}px`,
         '--queue-width': isQueueVisible ? `${queueWidth}px` : '0px'
       } as React.CSSProperties}
       onContextMenu={e => e.preventDefault()}
@@ -119,6 +126,14 @@ function AppShell() {
         isCollapsed={isSidebarCollapsed} 
         toggleCollapse={() => setIsSidebarCollapsed(!isSidebarCollapsed)} 
       />
+      <div 
+        className="resizer resizer-sidebar" 
+        onMouseDown={(e) => {
+          e.preventDefault();
+          setIsDraggingSidebar(true);
+        }}
+        style={{ display: isSidebarCollapsed ? 'none' : 'block' }}
+      />
       <main className="main-content">
         <header className="content-header">
           <LiveSearch />
@@ -138,7 +153,6 @@ 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 />} />
@@ -170,15 +184,9 @@ function TauriEventBridge() {
   const previous = usePlayerStore(s => s.previous);
   const { minimizeToTray } = useAuthStore();
 
-  // Spacebar → play/pause, F11 → window fullscreen
+  // Spacebar → play/pause (ignore when focus is in an input)
   useEffect(() => {
     const onKey = (e: KeyboardEvent) => {
-      if (e.code === 'F11') {
-        e.preventDefault();
-        const win = getCurrentWindow();
-        win.isFullscreen().then(fs => win.setFullscreen(!fs));
-        return;
-      }
       if (e.code !== 'Space') return;
       const tag = (e.target as HTMLElement)?.tagName;
       if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return;

src/components/FullscreenPlayer.tsx

@@ -15,43 +15,6 @@ function formatTime(seconds: number): string {
   return `${m}:${s.toString().padStart(2, '0')}`;
 }
 
-function MarqueeTitle({ title }: { title: string }) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const textRef = useRef<HTMLSpanElement>(null);
-  const [scrollAmount, setScrollAmount] = useState(0);
-
-  const measure = useCallback(() => {
-    const container = containerRef.current;
-    const text = textRef.current;
-    if (!container || !text) return;
-    // Temporarily make span inline-block to get its natural width
-    text.style.display = 'inline-block';
-    const textWidth = text.getBoundingClientRect().width;
-    text.style.display = '';
-    const overflow = textWidth - container.clientWidth;
-    setScrollAmount(overflow > 4 ? Math.ceil(overflow) : 0);
-  }, []);
-
-  useEffect(() => {
-    measure();
-    const ro = new ResizeObserver(measure);
-    if (containerRef.current) ro.observe(containerRef.current);
-    return () => ro.disconnect();
-  }, [title, measure]);
-
-  return (
-    <div ref={containerRef} className="fs-title-wrap">
-      <span
-        ref={textRef}
-        className={scrollAmount > 0 ? 'fs-title-marquee' : ''}
-        style={scrollAmount > 0 ? { '--scroll-amount': `-${scrollAmount}px` } as React.CSSProperties : {}}
-      >
-        {title}
-      </span>
-    </div>
-  );
-}
-
 // ─── Crossfading blurred background ───────────────────────────────────────────
 const FsBg = memo(function FsBg({ url }: { url: string }) {
   const [layers, setLayers] = useState<Array<{ url: string; id: number; visible: boolean }>>(() =>
@@ -89,7 +52,6 @@ const FsBg = memo(function FsBg({ url }: { url: string }) {
 // ─── Progress bar (isolated — re-renders every tick) ──────────────────────────
 const FsProgress = memo(function FsProgress({ duration }: { duration: number }) {
   const progress    = usePlayerStore(s => s.progress);
-  const buffered    = usePlayerStore(s => s.buffered);
   const currentTime = usePlayerStore(s => s.currentTime);
   const seek        = usePlayerStore(s => s.seek);
 
@@ -98,9 +60,6 @@ const FsProgress = memo(function FsProgress({ duration }: { duration: number })
     [seek]
   );
 
-  const pct = progress * 100;
-  const buf = Math.max(pct, buffered * 100);
-
   return (
     <div className="fs-progress-wrap">
       <span className="fs-time">{formatTime(currentTime)}</span>
@@ -109,10 +68,7 @@ const FsProgress = memo(function FsProgress({ duration }: { duration: number })
           type="range" min={0} max={1} step={0.001}
           value={progress}
           onChange={handleSeek}
-          style={{
-            '--pct': `${pct}%`,
-            '--buf': `${buf}%`,
-          } as React.CSSProperties}
+          style={{ '--pct': `${progress * 100}%` } as React.CSSProperties}
           aria-label="progress"
         />
       </div>
@@ -210,7 +166,7 @@ export default function FullscreenPlayer({ onClose }: FullscreenPlayerProps) {
         </div>
 
         <div className="fs-track-info">
-          <MarqueeTitle title={currentTrack?.title ?? '—'} />
+          <h1 className="fs-title">{currentTrack?.title ?? '—'}</h1>
           <p className="fs-album">
             {currentTrack?.album ?? ''}
             {currentTrack?.year ? ` · ${currentTrack.year}` : ''}

src/components/LiveSearch.tsx

@@ -69,12 +69,6 @@ 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,11 +4,9 @@ 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);
@@ -123,11 +121,7 @@ export default function NowPlayingDropdown() {
           ) : (
             <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
               {visible.map((stream, idx) => (
-                <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 key={`${stream.id}-${idx}`} style={{ display: 'flex', gap: '0.75rem', alignItems: 'center', background: 'var(--bg-hover)', padding: '0.5rem', borderRadius: '8px' }}>
                   <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/PlayerBar.tsx

@@ -6,7 +6,6 @@ import { usePlayerStore } from '../store/playerStore';
 import { buildCoverArtUrl, coverArtCacheKey } from '../api/subsonic';
 import CachedImage from './CachedImage';
 import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
 
 function formatTime(seconds: number): string {
   if (!seconds || isNaN(seconds)) return '0:00';
@@ -17,8 +16,7 @@ function formatTime(seconds: number): string {
 
 export default function PlayerBar() {
   const { t } = useTranslation();
-  const navigate = useNavigate();
-  const { currentTrack, isPlaying, progress, buffered, currentTime, volume, togglePlay, next, previous, seek, setVolume, isQueueVisible, toggleQueue, stop, toggleRepeat, repeatMode, toggleFullscreen } = usePlayerStore();
+  const { currentTrack, isPlaying, progress, currentTime, volume, togglePlay, next, previous, seek, setVolume, isQueueVisible, toggleQueue, stop, toggleRepeat, repeatMode, toggleFullscreen } = usePlayerStore();
 
   const duration = currentTrack?.duration ?? 0;
   const coverSrc = useMemo(() => currentTrack?.coverArt ? buildCoverArtUrl(currentTrack.coverArt, 128) : '', [currentTrack?.coverArt]);
@@ -32,10 +30,8 @@ export default function PlayerBar() {
     setVolume(parseFloat(e.target.value));
   }, [setVolume]);
 
-  const pct = progress * 100;
-  const buf = Math.max(pct, buffered * 100);
   const progressStyle = {
-    background: `linear-gradient(to right, var(--ctp-mauve) ${pct}%, var(--ctp-overlay0) ${pct}%, var(--ctp-overlay0) ${buf}%, var(--ctp-surface2) ${buf}%)`,
+    background: `linear-gradient(to right, var(--ctp-mauve) ${progress * 100}%, var(--ctp-surface2) ${progress * 100}%)`,
   };
 
   const volumeStyle = {
@@ -70,20 +66,10 @@ export default function PlayerBar() {
           )}
         </div>
         <div className="player-track-meta">
-          <div
-            className="player-track-name"
-            data-tooltip={currentTrack?.title ?? ''}
-            style={{ cursor: currentTrack?.albumId ? 'pointer' : 'default' }}
-            onClick={() => currentTrack?.albumId && navigate(`/album/${currentTrack.albumId}`)}
-          >
+          <div className="player-track-name" data-tooltip={currentTrack?.title ?? ''}>
             {currentTrack?.title ?? t('player.noTitle')}
           </div>
-          <div
-            className="player-track-artist"
-            data-tooltip={currentTrack?.artist ?? ''}
-            style={{ cursor: currentTrack?.artistId ? 'pointer' : 'default' }}
-            onClick={() => currentTrack?.artistId && navigate(`/artist/${currentTrack.artistId}`)}
-          >
+          <div className="player-track-artist" data-tooltip={currentTrack?.artist ?? ''}>
             {currentTrack?.artist ?? '—'}
           </div>
         </div>

src/components/QueuePanel.tsx

@@ -4,7 +4,6 @@ import { Play, Music, Star, X, Trash2, Save, FolderOpen } from 'lucide-react';
 import { buildCoverArtUrl, getAlbum, getPlaylists, getPlaylist, createPlaylist, deletePlaylist, SubsonicPlaylist } from '../api/subsonic';
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
 
 function formatTime(seconds: number): string {
   if (!seconds || isNaN(seconds)) return '0:00';
@@ -112,7 +111,6 @@ function LoadPlaylistModal({ onClose, onLoad }: { onClose: () => void, onLoad: (
 
 export default function QueuePanel() {
   const { t } = useTranslation();
-  const navigate = useNavigate();
   const queue = usePlayerStore(s => s.queue);
   const queueIndex = usePlayerStore(s => s.queueIndex);
   const currentTrack = usePlayerStore(s => s.currentTrack);
@@ -132,8 +130,6 @@ 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);
 
@@ -173,48 +169,38 @@ export default function QueuePanel() {
   };
 
   const onDragEnd = () => {
-    setDraggedIdx(null);
-    setDragOverIdx(null);
     isDraggingInternalRef.current = false;
     draggedIdxRef.current = null;
     dragOverIdxRef.current = null;
+    setDraggedIdx(null);
+    setDragOverIdx(null);
   };
 
   const onDropQueue = async (e: React.DragEvent) => {
     e.preventDefault();
 
-    // Clear visual state immediately
+    // Capture refs before resetting — dragend may have already cleared them on Mac.
+    const fromIdx = draggedIdxRef.current;
+    const toIdx = dragOverIdxRef.current ?? queue.length;
+
     isDraggingInternalRef.current = false;
     draggedIdxRef.current = null;
     dragOverIdxRef.current = null;
     setDraggedIdx(null);
     setDragOverIdx(null);
 
+    // Read dataTransfer — set during dragstart, outlives dragend on all platforms.
     let parsedData: any = null;
     try {
       const raw = e.dataTransfer.getData('text/plain');
       if (raw) parsedData = JSON.parse(raw);
     } catch { /* ignore */ }
 
-    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);
+    // Internal reorder: prefer ref value (fast path), fall back to dataTransfer
+    // for the Mac dragend-before-drop race condition.
+    const reorderFrom = fromIdx ?? (parsedData?.type === 'queue_reorder' ? parsedData.index : null);
+    if (reorderFrom !== null) {
+      if (reorderFrom !== toIdx) reorderQueue(reorderFrom, toIdx);
       return;
     }
 
@@ -267,25 +253,15 @@ export default function QueuePanel() {
         <div className="queue-current-track">
           <div className="queue-current-cover">
             {currentTrack.coverArt ? (
-              <img src={buildCoverArtUrl(currentTrack.coverArt, 128)} alt="" loading="eager" />
+              <img src={buildCoverArtUrl(currentTrack.coverArt, 400)} alt="" loading="eager" />
             ) : (
               <div className="fallback"><Music size={32} /></div>
             )}
           </div>
           <div className="queue-current-info">
-            <h3
-              className="truncate"
-              data-tooltip={currentTrack.title}
-              style={{ cursor: currentTrack.albumId ? 'pointer' : 'default' }}
-              onClick={() => currentTrack.albumId && navigate(`/album/${currentTrack.albumId}`)}
-            >{currentTrack.title}</h3>
+            <h3 className="truncate" data-tooltip={currentTrack.title}>{currentTrack.title}</h3>
             {currentTrack.year && <div className="queue-current-sub">{currentTrack.year}</div>}
-            <div
-              className="queue-current-sub truncate"
-              data-tooltip={currentTrack.album}
-              style={{ cursor: currentTrack.artistId ? 'pointer' : 'default' }}
-              onClick={() => currentTrack.artistId && navigate(`/artist/${currentTrack.artistId}`)}
-            >{currentTrack.album}</div>
+            <div className="queue-current-sub truncate" data-tooltip={currentTrack.album}>{currentTrack.album}</div>
             
             <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: '6px' }}>
               <div className="queue-current-tech">
@@ -303,7 +279,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" ref={queueListRef}>
+      <div className="queue-list">
         {queue.length === 0 ? (
           <div className="queue-empty">
             {t('queue.emptyQueue')}
@@ -327,9 +303,8 @@ export default function QueuePanel() {
             }
 
             return (
-              <div
-                key={`${track.id}-${idx}`}
-                data-queue-idx={idx}
+              <div 
+                key={`${track.id}-${idx}`} 
                 className={`queue-item ${isPlaying ? 'active' : ''}`}
                 onClick={() => playTrack(track, queue)}
                 onContextMenu={(e) => {

src/components/Sidebar.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react';
-import { version as appVersion } from '../../package.json';
 import { NavLink } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import {
@@ -23,7 +22,7 @@ const navItems = [
 ];
 
 function isNewer(latest: string, current: string): boolean {
-  const parse = (v: string) => v.replace(/^[^0-9]*/, '').split('.').map(Number);
+  const parse = (v: string) => v.replace(/^v/, '').split('.').map(Number);
   const [lMaj, lMin, lPat] = parse(latest);
   const [cMaj, cMin, cPat] = parse(current);
   if (lMaj !== cMaj) return lMaj > cMaj;
@@ -75,15 +74,17 @@ export default function Sidebar({
     let cancelled = false;
     const timer = setTimeout(async () => {
       try {
+        const { getVersion } = await import('@tauri-apps/api/app');
+        const current = await getVersion();
         const res = await fetch('https://api.github.com/repos/Psychotoxical/psysonic/releases/latest');
         if (!res.ok) return;
         const data = await res.json();
         const tag: string = data.tag_name ?? '';
-        if (!cancelled && tag && isNewer(tag, appVersion)) {
+        if (!cancelled && tag && isNewer(tag, current)) {
           setLatestVersion(tag.startsWith('v') ? tag : `v${tag}`);
         }
       } catch {
-        // network unavailable — silently skip
+        // network unavailable or not running in Tauri — silently skip
       }
     }, 1500);
     return () => { cancelled = true; clearTimeout(timer); };

src/i18n.ts

@@ -44,9 +44,6 @@ const enTranslation = {
     albums: 'Albums',
     songs: 'Songs',
     clearLabel: 'Clear search',
-    title: 'Search',
-    resultsFor: 'Results for "{{query}}"',
-    album: 'Album',
   },
   nowPlaying: {
     tooltip: 'Who is listening?',
@@ -261,8 +258,7 @@ const enTranslation = {
     aboutLicenseText: 'MIT — free to use, modify, and distribute.',
     aboutRepo: 'Source Code on GitHub',
     aboutVersion: 'Version',
-    aboutBuiltWith: 'Built with Tauri · React · TypeScript · Howler.js',
-    aboutAiCredit: 'Developed with the support of Claude Code by Anthropic'
+    aboutBuiltWith: 'Built with Tauri · React · TypeScript · Howler.js'
   },
   help: {
     title: 'Help',
@@ -405,9 +401,6 @@ const deTranslation = {
     albums: 'Alben',
     songs: 'Songs',
     clearLabel: 'Suche leeren',
-    title: 'Suche',
-    resultsFor: 'Ergebnisse für „{{query}}"',
-    album: 'Album',
   },
   nowPlaying: {
     tooltip: 'Wer hört was?',
@@ -619,11 +612,10 @@ const deTranslation = {
     aboutDesc: 'Ein Desktop-Musikplayer für Subsonic-kompatible Server (Navidrome, Gonic u. a.). Streame deine selbst gehostete Musikbibliothek mit einer modernen Oberfläche im Catppuccin-Design.',
     aboutFeatures: 'Multi-Server · Scrobbling · Vollbild-Player · Album-Downloads · Bild-Cache · Catppuccin-Themes',
     aboutLicense: 'Lizenz',
-    aboutLicenseText: 'MIT — kostenlos nutzbar, veränderbar und weiterzugeben.',
+    aboutLicenseText: 'MIT — kostenlos nutzbar, veränderbar und weitergabbar.',
     aboutRepo: 'Quellcode auf GitHub',
     aboutVersion: 'Version',
-    aboutBuiltWith: 'Gebaut mit Tauri · React · TypeScript · Howler.js',
-    aboutAiCredit: 'Mit freundlicher Unterstützung von Claude Code by Anthropic'
+    aboutBuiltWith: 'Gebaut mit Tauri · React · TypeScript · Howler.js'
   },
   help: {
     title: 'Hilfe',

src/pages/AlbumDetail.tsx

@@ -31,10 +31,11 @@ function formatSize(bytes?: number): string {
   return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
 }
 
-function codecLabel(song: { suffix?: string; bitRate?: number }): string {
+function codecLabel(song: { suffix?: string; bitRate?: number; samplingRate?: number }): string {
   const parts: string[] = [];
   if (song.suffix) parts.push(song.suffix.toUpperCase());
   if (song.bitRate) parts.push(`${song.bitRate} kbps`);
+  if (song.samplingRate) parts.push(`${(song.samplingRate / 1000).toFixed(1)} kHz`);
   return parts.join(' · ');
 }
 
@@ -100,7 +101,6 @@ export default function AlbumDetail() {
   const playTrack = usePlayerStore(s => s.playTrack);
   const enqueue = usePlayerStore(s => s.enqueue);
   const openContextMenu = usePlayerStore(s => s.openContextMenu);
-  const currentTrack = usePlayerStore(s => s.currentTrack);
   const [album, setAlbum] = useState<Awaited<ReturnType<typeof getAlbum>> | null>(null);
   const [relatedAlbums, setRelatedAlbums] = useState<SubsonicAlbum[]>([]);
   const [ratings, setRatings] = useState<Record<string, number>>({});
@@ -110,7 +110,6 @@ export default function AlbumDetail() {
   const [downloadProgress, setDownloadProgress] = useState<number | null>(null);
   const [isStarred, setIsStarred] = useState(false);
   const [starredSongs, setStarredSongs] = useState<Set<string>>(new Set());
-  const [hoveredSongId, setHoveredSongId] = useState<string | null>(null);
 
   useEffect(() => {
     if (!id) return;
@@ -378,10 +377,10 @@ export default function AlbumDetail() {
           <div style={{ textAlign: 'center' }}>#</div>
           <div>{t('albumDetail.trackTitle')}</div>
           {hasVariousArtists && <div>{t('albumDetail.trackArtist')}</div>}
+          <div>{t('albumDetail.trackFormat')}</div>
           <div style={{ textAlign: 'center' }}>{t('albumDetail.trackFavorite')}</div>
           <div>{t('albumDetail.trackRating')}</div>
           <div style={{ textAlign: 'right' }}>{t('albumDetail.trackDuration')}</div>
-          <div>{t('albumDetail.trackFormat')}</div>
         </div>
 
         {(() => {
@@ -405,9 +404,7 @@ export default function AlbumDetail() {
               {discs.get(discNum)!.map((song, i) => (
                 <div
                   key={song.id}
-                  className={`track-row${hasVariousArtists ? ' track-row-va' : ''}${currentTrack?.id === song.id ? ' active' : ''}`}
-                  onMouseEnter={() => setHoveredSongId(song.id)}
-                  onMouseLeave={() => setHoveredSongId(null)}
+                  className={`track-row${hasVariousArtists ? ' track-row-va' : ''}`}
                   onDoubleClick={() => handlePlaySong(song)}
                   onContextMenu={(e) => {
                     e.preventDefault();
@@ -430,17 +427,7 @@ export default function AlbumDetail() {
                     e.dataTransfer.setData('text/plain', JSON.stringify({ type: 'song', track }));
                   }}
                 >
-                  <div
-                    className="track-num"
-                    style={{ textAlign: 'center', cursor: hoveredSongId === song.id ? 'pointer' : 'default', color: (hoveredSongId === song.id || currentTrack?.id === song.id) ? 'var(--accent)' : undefined }}
-                    onClick={() => handlePlaySong(song)}
-                  >
-                    {hoveredSongId === song.id
-                      ? <Play size={13} fill="currentColor" />
-                      : currentTrack?.id === song.id
-                        ? <Play size={13} fill="currentColor" />
-                        : (song.track ?? i + 1)}
-                  </div>
+                  <div className="track-num" style={{ textAlign: 'center' }}>{song.track ?? i + 1}</div>
                   <div className="track-info">
                     <span className="track-title" data-tooltip={song.title}>{song.title}</span>
                   </div>
@@ -449,6 +436,14 @@ export default function AlbumDetail() {
                       <span className="track-artist">{song.artist}</span>
                     </div>
                   )}
+                  <div className="track-meta" style={{ display: 'flex', alignItems: 'center' }}>
+                    {(song.suffix || song.bitRate) && (
+                      <span className="track-codec" style={{ marginTop: 0 }}>
+                        {codecLabel(song)}
+                        {song.size ? <span className="track-size"> · {formatSize(song.size)}</span> : null}
+                      </span>
+                    )}
+                  </div>
                   <div style={{ display: 'flex', justifyContent: 'center' }}>
                     <button
                       className="btn btn-ghost"
@@ -466,13 +461,6 @@ export default function AlbumDetail() {
                   <div className="track-duration" style={{ textAlign: 'right' }}>
                     {formatDuration(song.duration)}
                   </div>
-                  <div className="track-meta" style={{ display: 'flex', alignItems: 'center' }}>
-                    {(song.suffix || song.bitRate) && (
-                      <span className="track-codec" style={{ marginTop: 0 }}>
-                        {codecLabel(song)}
-                      </span>
-                    )}
-                  </div>
                 </div>
               ))}
             </div>

src/pages/RandomMix.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { getRandomSongs, SubsonicSong, star, unstar } from '../api/subsonic';
 import { usePlayerStore } from '../store/playerStore';
-import { Play, Star, RefreshCw } from 'lucide-react';
+import { Play, HandMetal, RefreshCw } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 
 function formatDuration(seconds: number): string {
@@ -133,7 +133,7 @@ export default function RandomMix() {
                   data-tooltip={starredSongs.has(song.id) ? t('randomMix.favoriteRemove') : t('randomMix.favoriteAdd')}
                   style={{ padding: '4px', height: 'auto', minHeight: 'unset', color: starredSongs.has(song.id) ? 'var(--accent)' : 'var(--text-muted)' }}
                 >
-                  <Star size={14} fill={starredSongs.has(song.id) ? "currentColor" : "none"} />
+                  <HandMetal size={14} fill={starredSongs.has(song.id) ? "currentColor" : "none"} />
                 </button>
               </div>
 

src/pages/SearchResults.tsx

@@ -1,134 +0,0 @@
-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.12
+                {t('settings.aboutVersion')} 1.0.8
               </div>
             </div>
           </div>
@@ -397,10 +397,6 @@ export default function Settings() {
               <span style={{ color: 'var(--text-muted)', minWidth: 56 }}>Stack</span>
               <span style={{ color: 'var(--text-secondary)' }}>{t('settings.aboutBuiltWith')}</span>
             </div>
-            <div style={{ display: 'flex', gap: '0.5rem' }}>
-              <span style={{ color: 'var(--text-muted)', minWidth: 56 }}>AI</span>
-              <span style={{ color: 'var(--text-secondary)' }}>{t('settings.aboutAiCredit')}</span>
-            </div>
           </div>
 
           <button

src/store/playerStore.ts

@@ -26,12 +26,13 @@ interface PlayerState {
   queueIndex: number;
   isPlaying: boolean;
   progress: number; // 0–1
-  buffered: number; // 0–1
   currentTime: number;
   volume: number;
   howl: Howl | null;
+  prefetched: Map<string, Howl>;
   scrobbled: boolean;
 
+  // Actions
   playTrack: (track: Track, queue?: Track[]) => void;
   pause: () => void;
   resume: () => void;
@@ -44,50 +45,40 @@ 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;
+    queueIndex?: number; // Only for 'queue-item'
   };
   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 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
+// Blocks progress interval from overwriting the UI position while GStreamer
+// processes a seek on the HTTP pipeline (can take several hundred ms on Linux).
+let isSeeking = false;
 
 function clearProgress() {
   if (progressInterval) {
@@ -96,27 +87,19 @@ function clearProgress() {
   }
 }
 
-// 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
-}
-
-// ─── Server queue sync ─────────────────────────────────────────────────────────
+// Helper to debounce or fire queue syncs
 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);
+  }, 1500); // 1.5s debounce
 }
 
 export const usePlayerStore = create<PlayerState>()(
@@ -127,10 +110,10 @@ export const usePlayerStore = create<PlayerState>()(
       queueIndex: 0,
       isPlaying: false,
       progress: 0,
-      buffered: 0,
       currentTime: 0,
       volume: 0.8,
       howl: null,
+      prefetched: new Map(),
       scrobbled: false,
       isQueueVisible: true,
       isFullscreenOpen: false,
@@ -138,320 +121,272 @@ 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;
-        return { repeatMode: modes[(modes.indexOf(state.repeatMode) + 1) % modes.length] };
-      }),
+  toggleRepeat: () => set((state) => {
+    const modes = ['off', 'all', 'one'] as const;
+    const nextIdx = (modes.indexOf(state.repeatMode) + 1) % modes.length;
+    return { repeatMode: modes[nextIdx] };
+  }),
 
-      // ── stop ────────────────────────────────────────────────────────────────
-      stop: () => {
-        destroyHowl(activeHowl);
-        activeHowl = null;
-        clearProgress();
-        if (seekDebounce) { clearTimeout(seekDebounce); seekDebounce = null; }
-        set({ isPlaying: false, progress: 0, buffered: 0, currentTime: 0, howl: null });
-      },
+  stop: () => {
+    get().howl?.stop();
+    get().howl?.seek(0);
+    clearProgress();
+    set({ isPlaying: false, progress: 0, currentTime: 0 });
+  },
 
-      // ── 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;
+  playTrack: (track, queue) => {
+    const state = get();
+    // Stop current
+    state.howl?.unload();
+    clearProgress();
+    if (seekDebounce) { clearTimeout(seekDebounce); seekDebounce = null; }
+    isSeeking = false;
 
-        // Fully destroy the previous Howl — listeners first, then audio resources.
-        destroyHowl(activeHowl);
-        activeHowl = null;
-        clearProgress();
-        if (seekDebounce) { clearTimeout(seekDebounce); seekDebounce = null; }
+    const newQueue = queue ?? state.queue;
+    const idx = newQueue.findIndex(t => t.id === track.id);
 
-        const state = get();
-        const newQueue = queue ?? state.queue;
-        const idx = newQueue.findIndex(t => t.id === track.id);
+    const url = buildStreamUrl(track.id);
+    const howl = new Howl({
+      src: [url],
+      html5: true,
+      volume: state.volume,
+      onplay: () => {
+        set({ isPlaying: true });
+        // Subsonic / Navidrome Now Playing
+        reportNowPlaying(track.id);
 
-        const howl = new Howl({
-          src: [buildStreamUrl(track.id)],
-          html5: true,
-          volume: state.volume,
-        });
-        activeHowl = howl;
+        set({ scrobbled: false });
+        progressInterval = setInterval(() => {
+          const h = get().howl;
+          if (!h) return;
+          // Skip position updates while a seek is in flight — GStreamer may
+          // still report the old position and would overwrite the UI value.
+          if (isSeeking) return;
+          const cur = typeof h.seek() === 'number' ? h.seek() as number : 0;
+          const dur = h.duration() || 1;
+          const prog = cur / dur;
+          set({ currentTime: cur, progress: prog });
 
-        // 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,
-        });
-
-        howl.on('play', () => {
-          if (playGeneration !== gen) return;
-          set({ isPlaying: true });
-          reportNowPlaying(track.id);
-
-          // 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);
-          }
-
-          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 (prog >= 0.5 && !get().scrobbled) {
+            set({ scrobbled: true });
+            const { scrobblingEnabled } = useAuthStore.getState();
+            if (scrobblingEnabled) {
+              scrobbleSong(track.id, Date.now());
             }
-
-            // 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();
-          }
-        });
+        }, 500);
 
-        howl.on('playerror', (_, err) => {
-          if (playGeneration !== gen) return;
-          console.error('Howl play error:', err);
-          clearProgress();
-          set({ isPlaying: false });
-        });
-
-        howl.play();
-        syncQueueToServer(newQueue, track, 0);
+        // Prefetch next 3
+        get().prefetchUpcoming(idx + 1, newQueue);
       },
-
-      // ── pause / resume / togglePlay ──────────────────────────────────────────
-      pause: () => {
-        activeHowl?.pause();
+      onend: () => {
+        clearProgress();
+        set({ isPlaying: false, progress: 0, currentTime: 0 });
+        const { repeatMode, currentTrack, queue } = get();
+        if (repeatMode === 'one' && currentTrack) {
+          get().playTrack(currentTrack, queue);
+        } else {
+          get().next();
+        }
+      },
+      onstop: () => {
         clearProgress();
         set({ isPlaying: false });
       },
+    });
 
-      resume: () => {
-        const { currentTrack, queue, currentTime } = get();
-        if (!currentTrack) return;
-        if (activeHowl) {
-          activeHowl.play();
-          set({ isPlaying: true });
-          return;
-        }
-        // Cold start after app relaunch — Howl was not persisted.
-        resumeFromTime = currentTime > 0 ? currentTime : null;
-        get().playTrack(currentTrack, queue);
-      },
+    howl.play();
+    set({ currentTrack: track, queue: newQueue, queueIndex: idx >= 0 ? idx : 0, howl, progress: 0, currentTime: 0 });
+    syncQueueToServer(newQueue, track, 0);
+  },
 
-      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();
-      },
+  pause: () => {
+    get().howl?.pause();
+    clearProgress();
+    set({ isPlaying: false });
+  },
 
-      // ── 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 });
-        }
-      },
+  resume: () => {
+    const { howl, currentTrack } = get();
+    if (!howl || !currentTrack) return;
+    howl.play();
+    set({ isPlaying: true });
+  },
 
-      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);
-      },
+  togglePlay: () => {
+    const { isPlaying } = get();
+    isPlaying ? get().pause() : get().resume();
+  },
 
-      // ── 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 };
-        });
-      },
-
-      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>),
+  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);
+    // Update UI immediately and block interval from overwriting it.
+    set({ progress, currentTime: time });
+    isSeeking = true;
+    // Debounce so rapid slider drags collapse into one seek.
+    if (seekDebounce) clearTimeout(seekDebounce);
+    seekDebounce = setTimeout(() => {
+      const h = get().howl;
+      if (!h) { isSeeking = false; seekDebounce = null; return; }
+      // GStreamer HTTP pipelines require the element to be paused before a
+      // seek is accepted reliably. Seek while playing can silently fail on
+      // Linux (tested on Mint + CachyOS), leaving the pipeline at the old
+      // position on the next seek.
+      const wasPlaying = h.playing();
+      if (wasPlaying) h.pause();
+      h.seek(time);
+      // Resume after GStreamer has had time to flush and re-buffer.
+      seekDebounce = setTimeout(() => {
+        const h2 = get().howl;
+        if (h2 && wasPlaying) h2.play();
+        isSeeking = false;
+        seekDebounce = null;
+      }, 300);
+    }, 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, 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;
+          }
+        }
+        
+        set({ 
+          queue: mappedTracks, 
+          queueIndex,
+          currentTrack,
+          // Convert position from ms to s
+          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>),
+}));

src/styles/components.css

@@ -4,14 +4,14 @@
 .hero {
   position: relative;
   width: 100%;
-  height: 360px;
+  height: 300px;
   overflow: hidden;
   flex-shrink: 0;
 }
 
 .hero-placeholder {
   width: 100%;
-  height: 360px;
+  height: 300px;
   background: linear-gradient(135deg, var(--ctp-surface0), var(--ctp-mantle));
   flex-shrink: 0;
 }
@@ -23,9 +23,7 @@
   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 {
@@ -76,8 +74,8 @@
 }
 
 .hero-cover {
-  width: 220px;
-  height: 220px;
+  width: 180px;
+  height: 180px;
   border-radius: var(--radius-md);
   box-shadow: 0 4px 20px rgba(0,0,0,0.6);
   object-fit: cover;
@@ -569,9 +567,8 @@
 .tracklist { padding: 0 var(--space-6) var(--space-6); }
 .tracklist-header {
   display: grid;
-  grid-template-columns: 36px minmax(100px, 3fr) 70px 80px 60px auto;
+  grid-template-columns: 36px minmax(100px, 3fr) minmax(90px, 1.5fr) 70px 80px 60px;
   gap: var(--space-3);
-  align-items: center;
   padding: var(--space-2) var(--space-3);
   font-size: 11px;
   font-weight: 600;
@@ -582,12 +579,12 @@
   margin-bottom: var(--space-2);
 }
 .tracklist-header.tracklist-va {
-  grid-template-columns: 36px minmax(100px, 2fr) minmax(80px, 1.2fr) 70px 80px 60px auto;
+  grid-template-columns: 36px minmax(100px, 2fr) minmax(80px, 1.2fr) minmax(90px, 1.5fr) 70px 80px 60px;
 }
 
 .track-row {
   display: grid;
-  grid-template-columns: 36px minmax(100px, 3fr) 70px 80px 60px auto;
+  grid-template-columns: 36px minmax(100px, 3fr) minmax(90px, 1.5fr) 70px 80px 60px;
   gap: var(--space-3);
   align-items: start;
   padding: var(--space-2) var(--space-3);
@@ -596,46 +593,37 @@
   transition: background var(--transition-fast);
 }
 .track-row.track-row-va {
-  grid-template-columns: 36px minmax(100px, 2fr) minmax(80px, 1.2fr) 70px 80px 60px auto;
+  grid-template-columns: 36px minmax(100px, 2fr) minmax(80px, 1.2fr) minmax(90px, 1.5fr) 70px 80px 60px;
 }
 
 .tracklist-total {
   display: grid;
-  grid-template-columns: 36px minmax(100px, 3fr) 70px 80px 60px auto;
-  gap: var(--space-3);
+  grid-template-columns: 36px minmax(100px, 3fr) minmax(90px, 1.5fr) 70px 80px 60px;
   border-top: 1px solid var(--border-subtle);
-  padding: var(--space-2) var(--space-3);
+  padding: var(--space-3) var(--space-4);
   margin-top: var(--space-1);
 }
 .tracklist-total.tracklist-va {
-  grid-template-columns: 36px minmax(100px, 2fr) minmax(80px, 1.2fr) 70px 80px 60px auto;
+  grid-template-columns: 36px minmax(100px, 2fr) minmax(80px, 1.2fr) minmax(90px, 1.5fr) 70px 80px 60px;
 }
 .tracklist-total-label {
-  grid-column: 1 / 5;
+  grid-column: 1 / -2;
   text-align: right;
   font-size: 12px;
   font-weight: 600;
   color: var(--text-muted);
   text-transform: uppercase;
   letter-spacing: 0.06em;
+  padding-right: var(--space-3);
 }
 .tracklist-total-value {
-  grid-column: 5 / 6;
   text-align: right;
   font-size: 13px;
   font-weight: 600;
   color: var(--text-secondary);
   font-variant-numeric: tabular-nums;
 }
-.tracklist-total.tracklist-va .tracklist-total-label { grid-column: 1 / 6; }
-.tracklist-total.tracklist-va .tracklist-total-value { grid-column: 6 / 7; }
 .track-row:hover { background: var(--bg-hover); }
-.track-row.active { background: var(--accent-dim); animation: track-pulse 2.5s ease-in-out infinite; }
-.track-row.active:hover { background: var(--accent-dim); animation: none; }
-@keyframes track-pulse {
-  0%, 100% { background: var(--accent-dim); }
-  50% { background: transparent; }
-}
 .track-row > * { padding-top: 6px; padding-bottom: 6px; }
 
 /* CD / Disc separator */
@@ -942,22 +930,13 @@
   50%       { transform: scale(1.018); }
 }
 
-@keyframes ken-burns {
-  0%   { transform: scale(1.08) translate(0%, 0%); }
-  25%  { transform: scale(1.12) translate(-1.5%, 1%); }
-  50%  { transform: scale(1.10) translate(1%, -1.5%); }
-  75%  { transform: scale(1.13) translate(1.5%, 0.5%); }
-  100% { transform: scale(1.08) translate(0%, 0%); }
-}
-
 /* ── Blurred background ── */
 .fs-bg {
   position: absolute;
-  inset: -15%;
+  inset: -10%;
   background-size: cover;
   background-position: center;
   filter: blur(6px) brightness(0.25) saturate(1.6);
-  animation: ken-burns 40s ease-in-out infinite;
   transform: scale(1.2);
   z-index: 0;
   will-change: opacity;
@@ -1057,7 +1036,10 @@
   aspect-ratio: 1 / 1;
   border-radius: var(--radius-xl);
   overflow: hidden;
-  box-shadow: none;
+  box-shadow:
+    0 30px 90px rgba(0, 0, 0, 0.75),
+    0 0 0 1px rgba(255, 255, 255, 0.07),
+    0 0 80px rgba(0, 0, 0, 0.4);
   flex-shrink: 0;
   animation: cover-breathe 9s ease-in-out infinite;
 }
@@ -1082,7 +1064,7 @@
   text-align: center;
   width: 100%;
 }
-.fs-title-wrap {
+.fs-title {
   font-family: var(--font-display);
   font-size: clamp(20px, 3vw, 32px);
   font-weight: 800;
@@ -1091,14 +1073,7 @@
   line-height: 1.15;
   white-space: nowrap;
   overflow: hidden;
-}
-.fs-title-marquee {
-  display: inline-block;
-  animation: marquee-scroll 14s linear infinite alternate;
-}
-@keyframes marquee-scroll {
-  0%, 15%  { transform: translateX(0); }
-  85%, 100% { transform: translateX(var(--scroll-amount, 0px)); }
+  text-overflow: ellipsis;
 }
 .fs-album {
   font-size: 14px;
@@ -1144,10 +1119,8 @@
   height: 3px;
   background: linear-gradient(
     to right,
-    rgba(255,255,255,0.85) var(--pct, 0%),
-    rgba(255,255,255,0.32) var(--pct, 0%),
-    rgba(255,255,255,0.32) var(--buf, 0%),
-    rgba(255,255,255,0.15) var(--buf, 0%)
+    rgba(255,255,255,0.85) var(--pct),
+    rgba(255,255,255,0.15) var(--pct)
   );
   border-radius: 2px;
   cursor: pointer;

src/styles/layout.css

@@ -29,6 +29,7 @@
   background: var(--accent);
 }
 
+.resizer-sidebar { left: calc(var(--sidebar-width) - 3px); }
 .resizer-queue { right: calc(var(--queue-width) - 3px); }
 
 /* ─── Sidebar ─── */
@@ -369,8 +370,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 2px;
-  padding: 12px 0;
+  gap: var(--space-2);
 }
 
 .player-buttons {
@@ -507,26 +507,23 @@
 }
 
 .queue-current-track {
-  padding: var(--space-3) var(--space-4);
+  padding: var(--space-4);
   display: flex;
-  flex-direction: row;
-  align-items: center;
+  flex-direction: column;
   gap: var(--space-3);
   flex-shrink: 0;
-  border-bottom: 1px solid var(--border-subtle);
 }
 
 .queue-current-cover {
-  width: 72px;
-  height: 72px;
-  flex-shrink: 0;
+  width: 100%;
+  aspect-ratio: 1 / 1;
   border-radius: var(--radius-md);
   overflow: hidden;
   background: var(--bg-surface);
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
 }
 
 .queue-current-cover img {
@@ -543,12 +540,10 @@
   display: flex;
   flex-direction: column;
   gap: 2px;
-  min-width: 0;
-  flex: 1;
 }
 
 .queue-current-info h3 {
-  font-size: 13px;
+  font-size: 16px;
   font-weight: 700;
   margin: 0;
   color: var(--text-primary);
@@ -572,7 +567,7 @@
 }
 
 .queue-divider {
-  padding: var(--space-3) var(--space-4) 0;
+  padding: var(--space-4) var(--space-5) 0;
   flex-shrink: 0;
 }
 

src/styles/theme.css

@@ -580,8 +580,8 @@ body.is-dragging * {
 .input {
   width: 100%;
   padding: var(--space-3) var(--space-4);
-  background: var(--ctp-base);
-  border: 1px solid var(--ctp-overlay0);
+  background: var(--ctp-surface0);
+  border: 1px solid var(--border);
   border-radius: var(--radius-md);
   color: var(--text-primary);
   font-family: var(--font-sans);