chore: Bump version to 1.0.12, update changelog

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

.github/workflows/release.yml

@@ -6,7 +6,42 @@ on:
   workflow_dispatch:
 
 jobs:
-  release:
+  create-release:
+    permissions:
+      contents: write
+    runs-on: ubuntu-latest
+    outputs:
+      release_id: ${{ steps.create-release.outputs.result }}
+      package_version: ${{ steps.get-version.outputs.version }}
+    steps:
+      - uses: actions/checkout@v5
+      - name: setup node
+        uses: actions/setup-node@v5
+        with:
+          node-version: lts/*
+      - name: get version
+        id: get-version
+        run: echo "version=$(node -p "require('./package.json').version")" >> $GITHUB_OUTPUT
+      - name: create release
+        id: create-release
+        uses: actions/github-script@v7
+        env:
+          PACKAGE_VERSION: ${{ steps.get-version.outputs.version }}
+        with:
+          script: |
+            const { data } = await github.rest.repos.createRelease({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              tag_name: `app-v${process.env.PACKAGE_VERSION}`,
+              name: `Psysonic v${process.env.PACKAGE_VERSION}`,
+              body: 'See the assets to download this version and install.',
+              draft: false,
+              prerelease: false
+            })
+            return data.id
+
+  build-macos-windows:
+    needs: create-release
     permissions:
       contents: write
     strategy:
@@ -17,53 +52,83 @@ jobs:
             args: '--target aarch64-apple-darwin'
           - platform: 'macos-latest'
             args: '--target x86_64-apple-darwin'
-          - platform: 'ubuntu-22.04'
-            args: ''
           - platform: 'windows-latest'
             args: ''
-
     runs-on: ${{ matrix.settings.platform }}
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
+      - name: setup node
+        uses: actions/setup-node@v5
+        with:
+          node-version: lts/*
+      - name: install Rust stable
+        uses: dtolnay/rust-toolchain@stable
+        with:
+          targets: ${{ matrix.settings.platform == 'macos-latest' && 'aarch64-apple-darwin,x86_64-apple-darwin' || '' }}
+      - name: install npm dependencies
+        run: npm install
+      - uses: tauri-apps/tauri-action@v0
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          releaseId: ${{ needs.create-release.outputs.release_id }}
+          args: ${{ matrix.settings.args }}
 
-      - name: install dependencies (ubuntu only)
-        if: matrix.settings.platform == 'ubuntu-22.04'
+  build-linux:
+    needs: create-release
+    permissions:
+      contents: write
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v5
+
+      - name: install dependencies
         run: |
           sudo apt-get update
           sudo apt-get install -y \
             libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev patchelf \
-            libgstreamer1.0-dev libgstreamer-plugins-base1.0-dev \
             gstreamer1.0-plugins-base gstreamer1.0-plugins-good \
             gstreamer1.0-plugins-bad gstreamer1.0-libav
 
-      - name: install linuxdeploy gstreamer plugin (ubuntu only)
-        if: matrix.settings.platform == 'ubuntu-22.04'
+      - name: install linuxdeploy gstreamer plugin
         run: |
           wget -q "https://raw.githubusercontent.com/linuxdeploy/linuxdeploy-plugin-gstreamer/master/linuxdeploy-plugin-gstreamer.sh" \
             -O /usr/local/bin/linuxdeploy-plugin-gstreamer.sh
           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/*
 
       - name: install Rust stable
         uses: dtolnay/rust-toolchain@stable
-        with:
-          targets: ${{ matrix.settings.platform == 'macos-latest' && 'aarch64-apple-darwin,x86_64-apple-darwin' || '' }}
 
       - name: install npm dependencies
         run: npm install
 
-      - uses: tauri-apps/tauri-action@v0
+      - name: build
+        run: npm run tauri:build
+        env:
+          APPIMAGE_EXTRACT_AND_RUN: 1
+
+      - name: patch AppImage AppRun
+        run: |
+          APPIMAGE=$(find src-tauri/target/release/bundle/appimage -name "*.AppImage" -not -name "*.tar.gz" | head -1)
+          echo "Patching: $APPIMAGE"
+          APPIMAGE_EXTRACT_AND_RUN=1 ./"$APPIMAGE" --appimage-extract
+          sed -i '/^exec /i export WEBKIT_DISABLE_COMPOSITING_MODE=1\nexport WEBKIT_DISABLE_DMABUF_RENDERER=1\nexport GDK_BACKEND=x11' squashfs-root/AppRun
+          wget -q "https://github.com/AppImage/AppImageKit/releases/download/continuous/appimagetool-x86_64.AppImage" \
+            -O appimagetool
+          chmod +x appimagetool
+          APPIMAGE_EXTRACT_AND_RUN=1 ./appimagetool squashfs-root "$APPIMAGE"
+          rm -rf squashfs-root appimagetool
+
+      - name: upload Linux artifacts
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          APPIMAGE_EXTRACT_AND_RUN: 1
-        with:
-          tagName: app-v__VERSION__
-          releaseName: 'Psysonic v__VERSION__'
-          releaseBody: 'See the assets to download this version and install.'
-          releaseDraft: false
-          prerelease: false
-          args: ${{ matrix.settings.args }}
+        run: |
+          VERSION=${{ needs.create-release.outputs.package_version }}
+          find src-tauri/target/release/bundle \
+            \( -name "*.AppImage" -not -name "*.tar.gz" -o -name "*.deb" -o -name "*.rpm" \) \
+            | xargs gh release upload "app-v${VERSION}" --clobber

CHANGELOG.md

@@ -5,11 +5,139 @@ 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
+- **Ambient Stage**: Completely redesigned Fullscreen Player. Experience an immersive atmosphere with drifting color orbs, a "breathing" cover animation, and high-resolution artist backgrounds.
+- **Improved Drag & Drop**: Rewritten Play Queue reordering for rock-solid reliability on macOS (WKWebView) and Windows (WebView2).
+
+### Fixed
+- **Linux Audio Stability**: Resolved playback stuttering when seeking under GStreamer by implementing a robust pause-seek-play sequence.
+- **Data Integration**: Standardized `artistId` propagation across all track sources for better metadata consistency.
+
+## [1.0.7] - 2026-03-13
+
+### Added
+- **Update Notifications**: Integrated a native update check system in the sidebar that notifies you when a new version is available on GitHub.
+- **Improved Settings**: Refined layout and styling for a cleaner settings experience.
+
+### Fixed
+- **UI/UX Refinements**: Polished sidebar animations and layout for better visual consistency.
+- **i18n**: Added missing translations for update notifications and system status.
+
+## [1.0.6] - 2026-03-13
+
+### Added
+- **Extended Themes**: Selection expanded to 8 themes, including the complete Nord series (Nord, Snowstorm, Frost, Aurora).
+- **Light Theme Support**: Enhanced readability for Hero and Fullscreen Player components when using light themes (Latte, Snowstorm).
+
+### Fixed
+- **Linux/Wayland Compatibility**: Fixed immediate crash on Wayland environments by forcing X11 backend for the AppImage.
+- **Playback Stability**: Introduced seek debouncing to prevent audio stalls on Linux/GStreamer.
+- **Windows Integration**: Improved drag-and-drop compatibility for systems using WebView2.
+
+## [1.0.5] - 2026-03-12
+
+### Added
+- **Image Caching**: Integrated IndexedDB-based image caching for cover art and artist images, providing significantly faster loading times for frequently accessed items.
+- **Improved Artist Discovery**: Faster scrolling in the Artists list using color-coded initial-based avatars for quick visual identification.
+- **Random Albums**: New discovery page for exploring your library with random album selections.
+- **Help & Documentation**: Added a dedicated help page for better user onboarding.
+
+### Changed
+- **Optimized UI**: Instant "Now Playing" status updates via local state filtering for a more responsive experience.
+- **Enhanced Data Flow**: General performance improvements in server communication and state management.
+
+## [1.0.4] - 2026-03-12
+
+### Added
+- **Album Downloads**: Support for downloading entire albums with real-time progress tracking.
+
+### Fixed
+- **Linux GPU Compatibility**: Patched AppImage to disable DMABUF renderer, fixing EGL/GPU crashes on older hardware.
+- **CI/CD Reliability**: Optimized release workflow with split jobs for better stability across platforms.
+
+## [1.0.3] - 2026-03-12
+
+### Fixed
+- **CI/CD Build**: Resolved build conflicts on Ubuntu 22.04 by removing redundant dev packages (`libunwind-dev`, gstreamer dev).
+- **Linux AppImage**: Configured GStreamer bundling and verified runtime environment settings.
+
 ## [1.0.2] - 2026-03-11
 
 ### Fixed
-- **Linux AppImage**: Integrated GStreamer bundling fix in CI/CD workflow to ensure audio playback works on systems without pre-installed GStreamer plugins (e.g., Arch, CachyOS).
-- **CI/CD Reliability**: Set `APPIMAGE_EXTRACT_AND_RUN=1` to prevent FUSE-related issues during the AppImage build process.
+- **Linux AppImage**: Integrated GStreamer bundling fix in CI/CD workflow.
+- **CI/CD Reliability**: Set `APPIMAGE_EXTRACT_AND_RUN=1` to prevent FUSE-related issues.
 
 ## [1.0.1] - 2026-03-11
 

README.md

@@ -16,26 +16,28 @@ 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.
 
+
 ![Psysonic Screenshot](public/screenshot.png)
 
 ## ✨ Features
 
-- 🎨 **Gorgeous UI**: Deeply integrated Catppuccin themes (Mocha & Latte) with smooth glassmorphism effects and micro-animations.
+- 🎨 **Gorgeous UI**: 8 deeply integrated themes (Catppuccin series + Nord series) with smooth glassmorphism effects and micro-animations.
 - ⚡ **Blazing Fast**: Built with Rust & Tauri, resulting in minimal RAM usage compared to typical Electron apps.
-- 🌍 **Internationalization (i18n)**: Fully translated into English and German (v1.0.0).
+- 🌍 **Internationalization (i18n)**: Fully translated into English and German.
 - 📻 **Live "Now Playing"**: See what other users on your server are currently listening to in real-time.
 - 🎵 **Last.fm Scrobbling**: Full integration for scrobbling your tracks via the Navidrome server.
-- 💾 **Local Caching**: Fast loading times with customizable image caching thresholds.
-- 💿 **Album & Artist Views**: Beautiful grid displays and detailed artist pages with related albums.
+- 💾 **IndexedDB Caching**: Ultra-fast loading times with persistent IndexedDB image caching for cover art and artist images.
+- 📀 **Album Downloads**: Support for downloading entire albums directly to your local machine.
+- 💿 **Album & Artist Views**: Beautiful grid displays and detailed artist pages with related albums and color-coded initial avatars for fast browsing.
 - 🎛️ **Queue Management**: Drag & drop support, playlist saving, and loading directly built into the queue. Server-side queue synchronization is fully supported.
-- 🖥️ **Cross-Platform**: Available natively for Windows, macOS, and Linux.
+- 🔄 **Update Notifications**: Built-in update checker that notifies you when a new version is available on GitHub.
+- 🖥️ **Cross-Platform**: Available natively for Windows, macOS, and Linux (including Wayland support).
 
-## 🛡️ Security
+## ● Known Limitations
 
-With the **v1.0.0 Release**, Psysonic has been hardened for public use:
-- **Secured Credentials**: Industry-standard security using Tauri's native encrypted store.
-- **Hardened Sandbox**: Restricted filesystem permissions to only necessary directories.
-- **Native Security**: Disabled global Tauri objects to significantly reduce XSS attack vectors.
+- **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
 
@@ -91,10 +93,3 @@ Contributions are completely welcome! Whether it is translating the app into a n
 ## 📄 License
 
 Distributed under the MIT License. See `LICENSE` for more information.
-
----
-
-<p align="center">
-  <i>Core Components developed with <b>Claude Code</b></i><br/>
-  <i>UI/UX developed with <b>Gemini 2.0 Flash</b> using <b>Antigravity</b></i>
-</p>

package.json

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

src-tauri/Cargo.lock

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

src-tauri/Cargo.toml

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

src-tauri/capabilities/default.json

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

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"],"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","core:window:allow-set-fullscreen","core:window:allow-is-fullscreen"],"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.2",
+  "version": "1.0.12",
   "identifier": "dev.psysonic.app",
   "build": {
     "beforeDevCommand": "npm run dev",
@@ -44,6 +44,19 @@
       "icons/128x128@2x.png",
       "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

@@ -21,6 +21,9 @@ import AlbumDetail from './pages/AlbumDetail';
 import LabelAlbums from './pages/LabelAlbums';
 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';
@@ -63,12 +66,10 @@ 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(() => {
@@ -76,24 +77,18 @@ function AppShell() {
   }, [isSidebarCollapsed]);
 
   const handleMouseMove = useCallback((e: MouseEvent) => {
-    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.
+    if (isDraggingQueue) {
       const newWidth = Math.max(250, Math.min(window.innerWidth - e.clientX, 500));
       setQueueWidth(newWidth);
     }
-  }, [isDraggingSidebar, isDraggingQueue]);
+  }, [isDraggingQueue]);
 
   const handleMouseUp = useCallback(() => {
-    setIsDraggingSidebar(false);
     setIsDraggingQueue(false);
   }, []);
 
   useEffect(() => {
-    if (isDraggingSidebar || isDraggingQueue) {
+    if (isDraggingQueue) {
       window.addEventListener('mousemove', handleMouseMove);
       window.addEventListener('mouseup', handleMouseUp);
       document.body.style.cursor = 'col-resize';
@@ -109,13 +104,13 @@ function AppShell() {
       window.removeEventListener('mouseup', handleMouseUp);
       document.body.classList.remove('is-dragging');
     };
-  }, [isDraggingSidebar, isDraggingQueue, handleMouseMove, handleMouseUp]);
+  }, [isDraggingQueue, handleMouseMove, handleMouseUp]);
 
   return (
     <div 
       className="app-shell"
-      style={{ 
-        '--sidebar-width': isSidebarCollapsed ? '72px' : `${sidebarWidth}px`,
+      style={{
+        '--sidebar-width': isSidebarCollapsed ? '72px' : 'clamp(180px, 15vw, 220px)',
         '--queue-width': isQueueVisible ? `${queueWidth}px` : '0px'
       } as React.CSSProperties}
       onContextMenu={e => e.preventDefault()}
@@ -124,14 +119,6 @@ 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 />
@@ -142,6 +129,7 @@ function AppShell() {
           <Routes>
             <Route path="/" element={<Home />} />
             <Route path="/albums" element={<Albums />} />
+            <Route path="/random-albums" element={<RandomAlbums />} />
             <Route path="/album/:id" element={<AlbumDetail />} />
             <Route path="/artists" element={<Artists />} />
             <Route path="/artist/:id" element={<ArtistDetail />} />
@@ -150,8 +138,10 @@ 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 />} />
           </Routes>
         </div>
       </main>
@@ -180,9 +170,15 @@ function TauriEventBridge() {
   const previous = usePlayerStore(s => s.previous);
   const { minimizeToTray } = useAuthStore();
 
-  // Spacebar → play/pause (ignore when focus is in an input)
+  // Spacebar → play/pause, F11 → window fullscreen
   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/api/subsonic.ts

@@ -59,6 +59,7 @@ export interface SubsonicSong {
   artist: string;
   album: string;
   albumId: string;
+  artistId?: string;
   duration: number;
   track?: number;
   discNumber?: number;
@@ -303,6 +304,12 @@ export function buildStreamUrl(id: string): string {
   return `${baseUrl}/rest/stream.view?${p.toString()}`;
 }
 
+/** Stable cache key for cover art — does not include ephemeral auth params. */
+export function coverArtCacheKey(id: string, size = 256): string {
+  const server = useAuthStore.getState().getActiveServer();
+  return `${server?.id ?? '_'}:cover:${id}:${size}`;
+}
+
 export function buildCoverArtUrl(id: string, size = 256): string {
   const { getBaseUrl, getActiveServer } = useAuthStore.getState();
   const server = getActiveServer();

src/components/AlbumCard.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Play } from 'lucide-react';
-import { SubsonicAlbum, buildCoverArtUrl } from '../api/subsonic';
+import { SubsonicAlbum, buildCoverArtUrl, coverArtCacheKey } from '../api/subsonic';
 import { usePlayerStore } from '../store/playerStore';
+import CachedImage from './CachedImage';
 
 interface AlbumCardProps {
   album: SubsonicAlbum;
@@ -28,7 +29,7 @@ export default function AlbumCard({ album }: AlbumCardProps) {
       draggable
       onDragStart={e => {
         e.dataTransfer.effectAllowed = 'copy';
-        e.dataTransfer.setData('application/json', JSON.stringify({
+        e.dataTransfer.setData('text/plain', JSON.stringify({
           type: 'album',
           id: album.id,
           name: album.name,
@@ -37,7 +38,7 @@ export default function AlbumCard({ album }: AlbumCardProps) {
     >
       <div className="album-card-cover">
         {coverUrl ? (
-          <img src={coverUrl} alt={`${album.name} Cover`} loading="lazy" />
+          <CachedImage src={coverUrl} cacheKey={coverArtCacheKey(album.coverArt!, 300)} alt={`${album.name} Cover`} loading="lazy" />
         ) : (
           <div className="album-card-cover-placeholder">
             <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">

src/components/CachedImage.tsx

@@ -0,0 +1,21 @@
+import React, { useEffect, useState } from 'react';
+import { getCachedUrl } from '../utils/imageCache';
+
+interface CachedImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+  src: string;
+  cacheKey: string;
+}
+
+export function useCachedUrl(fetchUrl: string, cacheKey: string): string {
+  const [resolved, setResolved] = useState('');
+  useEffect(() => {
+    if (!fetchUrl) { setResolved(''); return; }
+    getCachedUrl(fetchUrl, cacheKey).then(setResolved);
+  }, [fetchUrl, cacheKey]);
+  return resolved || fetchUrl;
+}
+
+export default function CachedImage({ src, cacheKey, ...props }: CachedImageProps) {
+  const resolvedSrc = useCachedUrl(src, cacheKey);
+  return <img src={resolvedSrc} {...props} />;
+}

src/components/ContextMenu.tsx

@@ -62,7 +62,7 @@ export default function ContextMenu() {
         const top = await getTopSongs(artistName);
         const radioTracks = [...top, ...similar].map(s => ({
           id: s.id, title: s.title, artist: s.artist, album: s.album,
-          albumId: s.albumId, duration: s.duration, coverArt: s.coverArt, track: s.track,
+          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,
         }));
         playTrack(radioTracks[0], radioTracks);
@@ -137,7 +137,7 @@ export default function ContextMenu() {
                   const albumData = await getAlbum(song.albumId);
                   const tracks = albumData.songs.map(s => ({
                     id: s.id, title: s.title, artist: s.artist, album: s.album,
-                    albumId: s.albumId, duration: s.duration, coverArt: s.coverArt, track: s.track,
+                    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,
                   }));
                   enqueue(tracks);

src/components/FullscreenPlayer.tsx

@@ -1,10 +1,11 @@
 import React, { useCallback, useEffect, useState, useRef, memo } from 'react';
 import {
-  Play, Pause, SkipBack, SkipForward, Volume2, VolumeX,
+  Play, Pause, SkipBack, SkipForward,
   ChevronDown, Repeat, Repeat1, Square, Music
 } from 'lucide-react';
 import { usePlayerStore } from '../store/playerStore';
-import { buildCoverArtUrl } from '../api/subsonic';
+import { buildCoverArtUrl, coverArtCacheKey, getArtistInfo } from '../api/subsonic';
+import CachedImage, { useCachedUrl } from './CachedImage';
 import { useTranslation } from 'react-i18next';
 
 function formatTime(seconds: number): string {
@@ -14,9 +15,45 @@ function formatTime(seconds: number): string {
   return `${m}:${s.toString().padStart(2, '0')}`;
 }
 
-// ─── Crossfading blurred background — two stacked divs for true crossfade ───
+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 }) {
-  // Each layer: {url, id, visible}
   const [layers, setLayers] = useState<Array<{ url: string; id: number; visible: boolean }>>(() =>
     url ? [{ url, id: 0, visible: true }] : []
   );
@@ -25,15 +62,10 @@ const FsBg = memo(function FsBg({ url }: { url: string }) {
   useEffect(() => {
     if (!url) return;
     const id = counterRef.current++;
-    // Add the new layer (opacity 0)
     setLayers(prev => [...prev, { url, id, visible: false }]);
-    // One frame later: make new layer visible (0→1) and old ones invisible (1→0)
     const t1 = setTimeout(() => {
-      setLayers(prev =>
-        prev.map(l => ({ ...l, visible: l.id === id }))
-      );
+      setLayers(prev => prev.map(l => ({ ...l, visible: l.id === id })));
     }, 20);
-    // After transition: clean up old layers
     const t2 = setTimeout(() => {
       setLayers(prev => prev.filter(l => l.id === id));
     }, 800);
@@ -54,69 +86,88 @@ const FsBg = memo(function FsBg({ url }: { url: string }) {
   );
 });
 
-// ─── Isolated progress sub-component (re-renders every tick, nothing else does) ───
+// ─── 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);
 
-  const handleSeek = useCallback((e: React.ChangeEvent<HTMLInputElement>) => seek(parseFloat(e.target.value)), [seek]);
+  const handleSeek = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => seek(parseFloat(e.target.value)),
+    [seek]
+  );
+
+  const pct = progress * 100;
+  const buf = Math.max(pct, buffered * 100);
 
   return (
-    <div className="fs-bottom">
-      <div className="fs-progress-wrap">
-        <span className="fs-time">{formatTime(currentTime)}</span>
-        <div className="fs-progress-bar">
-          <input
-            type="range" min={0} max={1} step={0.001}
-            value={progress}
-            onChange={handleSeek}
-            style={{ '--pct': `${progress * 100}%` } as React.CSSProperties}
-            aria-label="progress"
-          />
-        </div>
-        <span className="fs-time">{formatTime(duration)}</span>
+    <div className="fs-progress-wrap">
+      <span className="fs-time">{formatTime(currentTime)}</span>
+      <div className="fs-progress-bar">
+        <input
+          type="range" min={0} max={1} step={0.001}
+          value={progress}
+          onChange={handleSeek}
+          style={{
+            '--pct': `${pct}%`,
+            '--buf': `${buf}%`,
+          } as React.CSSProperties}
+          aria-label="progress"
+        />
       </div>
+      <span className="fs-time">{formatTime(duration)}</span>
     </div>
   );
 });
 
-
-
-// ─── Isolated play/pause button (subscribes to isPlaying only) ───
+// ─── Play/Pause button (isolated — subscribes to isPlaying only) ──────────────
 const FsPlayBtn = memo(function FsPlayBtn() {
   const { t } = useTranslation();
   const isPlaying  = usePlayerStore(s => s.isPlaying);
   const togglePlay = usePlayerStore(s => s.togglePlay);
   return (
     <button className="fs-btn fs-btn-play" onClick={togglePlay} aria-label={isPlaying ? t('player.pause') : t('player.play')}>
-      {isPlaying ? <Pause size={36} /> : <Play size={36} fill="currentColor" />}
+      {isPlaying ? <Pause size={25} /> : <Play size={25} fill="currentColor" />}
     </button>
   );
 });
 
+// ─── Main component ────────────────────────────────────────────────────────────
 interface FullscreenPlayerProps {
   onClose: () => void;
 }
 
 export default function FullscreenPlayer({ onClose }: FullscreenPlayerProps) {
   const { t } = useTranslation();
-  // Static/slow-changing state only — does NOT subscribe to progress or currentTime
   const currentTrack = usePlayerStore(s => s.currentTrack);
   const repeatMode   = usePlayerStore(s => s.repeatMode);
-  const queue        = usePlayerStore(s => s.queue);
-  const queueIndex   = usePlayerStore(s => s.queueIndex);
   const next         = usePlayerStore(s => s.next);
   const previous     = usePlayerStore(s => s.previous);
   const stop         = usePlayerStore(s => s.stop);
   const toggleRepeat = usePlayerStore(s => s.toggleRepeat);
-  const playTrack    = usePlayerStore(s => s.playTrack);
 
-  const duration  = currentTrack?.duration ?? 0;
-  const coverUrl  = currentTrack?.coverArt ? buildCoverArtUrl(currentTrack.coverArt, 800) : '';
-  const upcoming  = queue.slice(queueIndex + 1, queueIndex + 15);
+  const duration = currentTrack?.duration ?? 0;
+  const coverUrl = currentTrack?.coverArt ? buildCoverArtUrl(currentTrack.coverArt, 800) : '';
+  const coverKey = currentTrack?.coverArt ? coverArtCacheKey(currentTrack.coverArt, 800) : '';
+  // useCachedUrl must be called unconditionally (hook rules)
+  const resolvedCoverUrl = useCachedUrl(coverUrl, coverKey);
+
+  // Fetch artist image for background — fall back to cover art if unavailable
+  const [artistBgUrl, setArtistBgUrl] = useState<string>('');
+  useEffect(() => {
+    setArtistBgUrl('');
+    const artistId = currentTrack?.artistId;
+    if (!artistId) return;
+    let cancelled = false;
+    getArtistInfo(artistId).then(info => {
+      if (!cancelled && info.largeImageUrl) setArtistBgUrl(info.largeImageUrl);
+    }).catch(() => {});
+    return () => { cancelled = true; };
+  }, [currentTrack?.artistId]);
+
+  const bgUrl = artistBgUrl || resolvedCoverUrl;
 
-  // Close on Escape
   useEffect(() => {
     const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
     window.addEventListener('keydown', onKey);
@@ -125,95 +176,77 @@ export default function FullscreenPlayer({ onClose }: FullscreenPlayerProps) {
 
   return (
     <div className="fs-player" role="dialog" aria-modal="true" aria-label={t('player.fullscreen')}>
-      {/* Crossfading blurred background */}
-      <FsBg url={coverUrl} />
+
+      {/* Layer 1 — blurred artist image (falls back to cover art) */}
+      <FsBg url={bgUrl} />
       <div className="fs-bg-overlay" aria-hidden="true" />
 
-      {/* Close button */}
-      <button className="fs-close" onClick={onClose} aria-label={t('player.closeFullscreen')} data-tooltip={t('player.closeTooltip')}>
+      {/* Layer 2 — drifting color orbs */}
+      <div className="fs-orb fs-orb-1" aria-hidden="true" />
+      <div className="fs-orb fs-orb-2" aria-hidden="true" />
+      <div className="fs-orb fs-orb-3" aria-hidden="true" />
+
+      {/* Close */}
+      <button className="fs-close" onClick={onClose} aria-label={t('player.closeFullscreen')}>
         <ChevronDown size={28} />
       </button>
 
-      {/* Main layout: cover left, upcoming right */}
-      <div className="fs-layout">
+      {/* Center stage — everything vertically + horizontally centered */}
+      <div className="fs-stage">
 
-        {/* Left column: cover only */}
-        <div className="fs-left">
-          <div className="fs-cover-wrap">
-            {coverUrl ? (
-              <img src={coverUrl} alt={`${currentTrack?.album} Cover`} className="fs-cover" />
-            ) : (
-              <div className="fs-cover fs-cover-placeholder"><Music size={72} /></div>
-            )}
-          </div>
+        <p className="fs-artist">{currentTrack?.artist ?? '—'}</p>
+
+        <div className="fs-cover-wrap">
+          {coverUrl ? (
+            <CachedImage
+              src={coverUrl}
+              cacheKey={coverKey}
+              alt={`${currentTrack?.album} Cover`}
+              className="fs-cover"
+            />
+          ) : (
+            <div className="fs-cover fs-cover-placeholder"><Music size={72} /></div>
+          )}
         </div>
 
-        {/* Right column: upcoming tracks */}
-        {upcoming.length > 0 && (
-          <div className="fs-right">
-            <h2 className="fs-upcoming-title">{t('queue.nextTracks')}</h2>
-            <div className="fs-upcoming-list">
-              {upcoming.map((track, i) => (
-                <button
-                  key={`${track.id}-${queueIndex + 1 + i}`}
-                  className="fs-upcoming-item"
-                  onClick={() => playTrack(track, queue)}
-                >
-                  {track.coverArt ? (
-                    <img src={buildCoverArtUrl(track.coverArt, 80)} alt="" className="fs-upcoming-art" />
-                  ) : (
-                    <div className="fs-upcoming-art fs-upcoming-placeholder"><Music size={14} /></div>
-                  )}
-                  <div className="fs-upcoming-info">
-                    <span className="fs-upcoming-name">{track.title}</span>
-                    <span className="fs-upcoming-artist">{track.artist}</span>
-                  </div>
-                  <span className="fs-upcoming-dur">{formatTime(track.duration)}</span>
-                </button>
-              ))}
-            </div>
-          </div>
-        )}
-      </div>
-
-      {/* Bottom: meta + progress + controls — centered across full width */}
-      <div className="fs-footer">
-        <div className="fs-footer-main">
-          <div className="fs-track-info">
-            <h1 className="fs-title">{currentTrack?.title ?? '—'}</h1>
-            <p className="fs-artist">{currentTrack?.artist ?? '—'}</p>
-            <p className="fs-album">{currentTrack?.album ?? '—'}{currentTrack?.year ? ` · ${currentTrack.year}` : ''}</p>
-            {(currentTrack?.bitRate || currentTrack?.suffix) && (
-              <span className="fs-codec">
-                {[currentTrack.suffix?.toUpperCase(), currentTrack.bitRate ? `${currentTrack.bitRate} kbps` : ''].filter(Boolean).join(' · ')}
-              </span>
-            )}
-          </div>
-
-          {/* Progress bar — isolated sub-component */}
-          <FsProgress duration={duration} />
+        <div className="fs-track-info">
+          <MarqueeTitle title={currentTrack?.title ?? '—'} />
+          <p className="fs-album">
+            {currentTrack?.album ?? ''}
+            {currentTrack?.year ? ` · ${currentTrack.year}` : ''}
+          </p>
+          {(currentTrack?.bitRate || currentTrack?.suffix) && (
+            <span className="fs-codec">
+              {[
+                currentTrack.suffix?.toUpperCase(),
+                currentTrack.bitRate ? `${currentTrack.bitRate} kbps` : ''
+              ].filter(Boolean).join(' · ')}
+            </span>
+          )}
         </div>
 
-        {/* Transport controls */}
+        <FsProgress duration={duration} />
+
         <div className="fs-controls">
-          <button className="fs-btn fs-btn-sm" onClick={stop} data-tooltip="Stop">
-            <Square size={20} fill="currentColor" />
+          <button className="fs-btn fs-btn-sm" onClick={stop} aria-label="Stop">
+            <Square size={14} fill="currentColor" />
           </button>
           <button className="fs-btn" onClick={previous} aria-label={t('player.prev')}>
-            <SkipBack size={28} />
+            <SkipBack size={20} />
           </button>
           <FsPlayBtn />
           <button className="fs-btn" onClick={next} aria-label={t('player.next')}>
-            <SkipForward size={28} />
+            <SkipForward size={20} />
           </button>
           <button
             className={`fs-btn fs-btn-sm ${repeatMode !== 'off' ? 'active' : ''}`}
             onClick={toggleRepeat}
-            data-tooltip={`${t('player.repeat')}: ${repeatMode === 'off' ? t('player.repeatOff') : repeatMode === 'all' ? t('player.repeatAll') : t('player.repeatOne')}`}
+            aria-label={t('player.repeat')}
           >
-            {repeatMode === 'one' ? <Repeat1 size={20} /> : <Repeat size={20} />}
+            {repeatMode === 'one' ? <Repeat1 size={14} /> : <Repeat size={14} />}
           </button>
         </div>
+
       </div>
     </div>
   );

src/components/Hero.tsx

@@ -1,26 +1,89 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Play, ListPlus } from 'lucide-react';
-import { getRandomAlbums, SubsonicAlbum, buildCoverArtUrl, getAlbum } from '../api/subsonic';
+import { getRandomAlbums, SubsonicAlbum, buildCoverArtUrl, coverArtCacheKey, getAlbum } from '../api/subsonic';
+import CachedImage, { useCachedUrl } from './CachedImage';
 import { usePlayerStore } from '../store/playerStore';
 import { useTranslation } from 'react-i18next';
 
-export default function Hero() {
-  const { t } = useTranslation();
-  const [album, setAlbum] = useState<SubsonicAlbum | null>(null);
-  const navigate = useNavigate();
+const INTERVAL_MS = 10000;
+
+// Crossfading background — same layer pattern as FullscreenPlayer
+function HeroBg({ url }: { url: string }) {
+  const [layers, setLayers] = useState<Array<{ url: string; id: number; visible: boolean }>>(() =>
+    url ? [{ url, id: 0, visible: true }] : []
+  );
+  const counter = useRef(1);
 
   useEffect(() => {
-    let cancelled = false;
-    getRandomAlbums(1).then(albums => {
-      if (!cancelled && albums[0]) setAlbum(albums[0]);
-    }).catch(() => {});
-    return () => { cancelled = true; };
+    if (!url) return;
+    const id = counter.current++;
+    setLayers(prev => [...prev, { url, id, visible: false }]);
+    const t1 = setTimeout(() => setLayers(prev => prev.map(l => ({ ...l, visible: l.id === id }))), 20);
+    const t2 = setTimeout(() => setLayers(prev => prev.filter(l => l.id === id)), 900);
+    return () => { clearTimeout(t1); clearTimeout(t2); };
+  }, [url]);
+
+  return (
+    <>
+      {layers.map(layer => (
+        <div
+          key={layer.id}
+          className="hero-bg"
+          style={{
+            backgroundImage: `url(${layer.url})`,
+            opacity: layer.visible ? 1 : 0,
+            filter: layer.visible ? 'blur(0px)' : 'blur(18px)',
+          }}
+          aria-hidden="true"
+        />
+      ))}
+    </>
+  );
+}
+
+export default function Hero() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const [albums, setAlbums] = useState<SubsonicAlbum[]>([]);
+  const [activeIdx, setActiveIdx] = useState(0);
+  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  useEffect(() => {
+    getRandomAlbums(8).then(a => { if (a.length) setAlbums(a); }).catch(() => {});
   }, []);
 
-  if (!album) return <div className="hero-placeholder" />;
+  // Start / restart auto-advance timer
+  const startTimer = useCallback((len: number) => {
+    if (timerRef.current) clearInterval(timerRef.current);
+    if (len <= 1) return;
+    timerRef.current = setInterval(() => {
+      setActiveIdx(prev => (prev + 1) % len);
+    }, INTERVAL_MS);
+  }, []);
 
-  const coverUrl = album.coverArt ? buildCoverArtUrl(album.coverArt, 800) : '';
+  useEffect(() => {
+    startTimer(albums.length);
+    return () => { if (timerRef.current) clearInterval(timerRef.current); };
+  }, [albums.length, startTimer]);
+
+  const goTo = useCallback((idx: number) => {
+    setActiveIdx(idx);
+    startTimer(albums.length);
+  }, [albums.length, startTimer]);
+
+  const album = albums[activeIdx] ?? null;
+
+  // Resolve background URL via cache
+  const bgRawUrl = album?.coverArt ? buildCoverArtUrl(album.coverArt, 800) : '';
+  const bgCacheKey = album?.coverArt ? coverArtCacheKey(album.coverArt, 800) : '';
+  const resolvedBgUrl = useCachedUrl(bgRawUrl, bgCacheKey);
+
+  // Resolve cover thumbnail via cache
+  const coverRawUrl = album?.coverArt ? buildCoverArtUrl(album.coverArt, 300) : '';
+  const coverCacheKey = album?.coverArt ? coverArtCacheKey(album.coverArt, 300) : '';
+
+  if (!album) return <div className="hero-placeholder" />;
 
   return (
     <div
@@ -30,17 +93,18 @@ export default function Hero() {
       onClick={() => navigate(`/album/${album.id}`)}
       style={{ cursor: 'pointer' }}
     >
-      {coverUrl && (
-        <div
-          className="hero-bg"
-          style={{ backgroundImage: `url(${coverUrl})` }}
-          aria-hidden="true"
-        />
-      )}
+      <HeroBg url={resolvedBgUrl} />
       <div className="hero-overlay" aria-hidden="true" />
-      <div className="hero-content animate-fade-in">
-        {coverUrl && (
-          <img className="hero-cover" src={coverUrl} alt={`${album.name} Cover`} />
+
+      {/* key causes re-mount → animate-fade-in triggers on each album change */}
+      <div className="hero-content animate-fade-in" key={album.id}>
+        {coverRawUrl && (
+          <CachedImage
+            className="hero-cover"
+            src={coverRawUrl}
+            cacheKey={coverCacheKey}
+            alt={`${album.name} Cover`}
+          />
         )}
         <div className="hero-text">
           <span className="hero-eyebrow">{t('hero.eyebrow')}</span>
@@ -69,11 +133,11 @@ export default function Hero() {
                   const albumData = await getAlbum(album.id);
                   const tracks = albumData.songs.map(s => ({
                     id: s.id, title: s.title, artist: s.artist, album: s.album,
-                    albumId: s.albumId, duration: s.duration, coverArt: s.coverArt, track: s.track,
+                    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,
                   }));
                   usePlayerStore.getState().enqueue(tracks);
-                } catch (err) { }
+                } catch (_) { }
               }}
               style={{ padding: '0 1.5rem', fontWeight: 600, fontSize: '0.95rem' }}
               data-tooltip={t('hero.enqueueTooltip')}
@@ -84,6 +148,20 @@ export default function Hero() {
           </div>
         </div>
       </div>
+
+      {/* Carousel dot indicators */}
+      {albums.length > 1 && (
+        <div className="hero-dots" onClick={e => e.stopPropagation()}>
+          {albums.map((_, i) => (
+            <button
+              key={i}
+              className={`hero-dot${i === activeIdx ? ' hero-dot-active' : ''}`}
+              onClick={() => goTo(i)}
+              aria-label={`Album ${i + 1}`}
+            />
+          ))}
+        </div>
+      )}
     </div>
   );
 }

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}
@@ -138,7 +144,7 @@ export default function LiveSearch() {
                   onClick={() => {
                     playTrack({
                       id: s.id, title: s.title, artist: s.artist, album: s.album,
-                      albumId: s.albumId, duration: s.duration, coverArt: s.coverArt,
+                      albumId: s.albumId, artistId: s.artistId, duration: s.duration, coverArt: s.coverArt,
                       year: s.year, bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating
                     });
                     setOpen(false); setQuery('');

src/components/NowPlayingDropdown.tsx

@@ -1,12 +1,18 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { PlayCircle, User, Radio, RefreshCw } from 'lucide-react';
 import { getNowPlaying, SubsonicNowPlaying, buildCoverArtUrl } from '../api/subsonic';
+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);
+  const ownUsername = useAuthStore(s => s.getActiveServer()?.username ?? '');
   const [loading, setLoading] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
 
@@ -22,10 +28,16 @@ export default function NowPlayingDropdown() {
     }
   };
 
+  // Poll in background so the badge stays current without opening the dropdown
   useEffect(() => {
-    if (isOpen) {
-      fetchNowPlaying();
-    }
+    fetchNowPlaying();
+    const id = setInterval(fetchNowPlaying, 10000);
+    return () => clearInterval(id);
+  }, []);
+
+  // Refresh immediately when dropdown is opened
+  useEffect(() => {
+    if (isOpen) fetchNowPlaying();
   }, [isOpen]);
 
   // Click outside to close
@@ -39,6 +51,12 @@ export default function NowPlayingDropdown() {
     return () => document.removeEventListener('mousedown', handleClickOutside);
   }, []);
 
+  // For the current user, trust the local player state — the server keeps stale
+  // "now playing" entries for minutes after playback stops.
+  const visible = nowPlaying.filter(entry =>
+    entry.username === ownUsername ? isPlaying : true
+  );
+
   return (
     <div className="now-playing-dropdown" ref={dropdownRef} style={{ position: 'relative' }}>
       <button
@@ -48,9 +66,9 @@ export default function NowPlayingDropdown() {
         data-tooltip-pos="bottom"
         style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: '0.5rem', padding: '0.5rem 1rem' }}
       >
-        <Radio size={18} className={nowPlaying.length > 0 ? 'animate-pulse' : ''} style={{ color: nowPlaying.length > 0 ? 'var(--accent)' : 'inherit' }} />
+        <Radio size={18} className={visible.length > 0 ? 'animate-pulse' : ''} style={{ color: visible.length > 0 ? 'var(--accent)' : 'inherit' }} />
         <span>Live</span>
-        {nowPlaying.length > 0 && (
+        {visible.length > 0 && (
           <span style={{
             background: 'var(--accent)',
             color: 'var(--ctp-crust)',
@@ -59,7 +77,7 @@ export default function NowPlayingDropdown() {
             padding: '2px 6px',
             borderRadius: '10px'
           }}>
-            {nowPlaying.length}
+            {visible.length}
           </span>
         )}
       </button>
@@ -94,18 +112,22 @@ export default function NowPlayingDropdown() {
             </button>
           </div>
 
-          {loading && nowPlaying.length === 0 ? (
+          {loading && visible.length === 0 ? (
             <div style={{ padding: '1rem', textAlign: 'center', color: 'var(--text-muted)', fontSize: '13px' }}>
               {t('nowPlaying.loading')}
             </div>
-          ) : nowPlaying.length === 0 ? (
+          ) : visible.length === 0 ? (
             <div style={{ padding: '1rem', textAlign: 'center', color: 'var(--text-muted)', fontSize: '13px' }}>
               {t('nowPlaying.nobody')}
             </div>
           ) : (
             <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
-              {nowPlaying.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' }}>
+              {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 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

@@ -1,10 +1,12 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import {
   Play, Pause, SkipBack, SkipForward, Volume2, VolumeX, Music, List, Square, Repeat, Repeat1, Maximize2
 } from 'lucide-react';
 import { usePlayerStore } from '../store/playerStore';
-import { buildCoverArtUrl } from '../api/subsonic';
+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';
@@ -15,9 +17,12 @@ function formatTime(seconds: number): string {
 
 export default function PlayerBar() {
   const { t } = useTranslation();
-  const { currentTrack, isPlaying, progress, currentTime, volume, togglePlay, next, previous, seek, setVolume, isQueueVisible, toggleQueue, stop, toggleRepeat, repeatMode, toggleFullscreen } = usePlayerStore();
+  const navigate = useNavigate();
+  const { currentTrack, isPlaying, progress, buffered, 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]);
+  const coverKey = currentTrack?.coverArt ? coverArtCacheKey(currentTrack.coverArt, 128) : '';
 
   const handleSeek = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
     seek(parseFloat(e.target.value));
@@ -27,8 +32,10 @@ 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) ${progress * 100}%, var(--ctp-surface2) ${progress * 100}%)`,
+    background: `linear-gradient(to right, var(--ctp-mauve) ${pct}%, var(--ctp-overlay0) ${pct}%, var(--ctp-overlay0) ${buf}%, var(--ctp-surface2) ${buf}%)`,
   };
 
   const volumeStyle = {
@@ -45,11 +52,11 @@ export default function PlayerBar() {
           data-tooltip={currentTrack ? t('player.openFullscreen') : undefined}
         >
           {currentTrack?.coverArt ? (
-            <img
+            <CachedImage
               className="player-album-art"
-              src={buildCoverArtUrl(currentTrack.coverArt, 128)}
+              src={coverSrc}
+              cacheKey={coverKey}
               alt={`${currentTrack.album} Cover`}
-              loading="lazy"
             />
           ) : (
             <div className="player-album-art-placeholder">
@@ -63,10 +70,20 @@ export default function PlayerBar() {
           )}
         </div>
         <div className="player-track-meta">
-          <div className="player-track-name" data-tooltip={currentTrack?.title ?? ''}>
+          <div
+            className="player-track-name"
+            data-tooltip={currentTrack?.title ?? ''}
+            style={{ cursor: currentTrack?.albumId ? 'pointer' : 'default' }}
+            onClick={() => currentTrack?.albumId && navigate(`/album/${currentTrack.albumId}`)}
+          >
             {currentTrack?.title ?? t('player.noTitle')}
           </div>
-          <div className="player-track-artist" data-tooltip={currentTrack?.artist ?? ''}>
+          <div
+            className="player-track-artist"
+            data-tooltip={currentTrack?.artist ?? ''}
+            style={{ cursor: currentTrack?.artistId ? 'pointer' : 'default' }}
+            onClick={() => currentTrack?.artistId && navigate(`/artist/${currentTrack.artistId}`)}
+          >
             {currentTrack?.artist ?? '—'}
           </div>
         </div>
@@ -80,7 +97,7 @@ export default function PlayerBar() {
           </button>
           
           <button className="player-btn" onClick={previous} aria-label={t('player.prev')} data-tooltip={t('player.prev')}>
-            <SkipBack size={18} />
+            <SkipBack size={20} />
           </button>
 
           <button
@@ -89,11 +106,11 @@ export default function PlayerBar() {
             aria-label={isPlaying ? t('player.pause') : t('player.play')}
             data-tooltip={isPlaying ? t('player.pause') : t('player.play')}
           >
-            {isPlaying ? <Pause size={20} /> : <Play size={20} fill="currentColor" />}
+            {isPlaying ? <Pause size={22} /> : <Play size={22} fill="currentColor" />}
           </button>
 
           <button className="player-btn" onClick={next} aria-label={t('player.next')} data-tooltip={t('player.next')}>
-            <SkipForward size={18} />
+            <SkipForward size={20} />
           </button>
 
           <button 

src/components/QueuePanel.tsx

@@ -1,9 +1,10 @@
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import { Track, usePlayerStore } from '../store/playerStore';
 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';
@@ -111,6 +112,7 @@ 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);
@@ -124,6 +126,13 @@ export default function QueuePanel() {
 
   const [draggedIdx, setDraggedIdx] = useState<number | null>(null);
   const [dragOverIdx, setDragOverIdx] = useState<number | null>(null);
+  const isDraggingInternalRef = useRef(false);
+  // Refs mirror state so drop handler always reads fresh values even when
+  // macOS WKWebView fires dragend before drop (spec violation).
+  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);
@@ -142,69 +151,94 @@ export default function QueuePanel() {
   };
 
   const onDragStart = (e: React.DragEvent, index: number) => {
+    isDraggingInternalRef.current = true;
+    draggedIdxRef.current = index;
     setDraggedIdx(index);
-    e.dataTransfer.effectAllowed = 'copyMove';
-    e.dataTransfer.setData('application/json', JSON.stringify({
-      type: 'queue_reorder',
-      index
-    }));
+    e.dataTransfer.effectAllowed = 'move';
+    // Store index in dataTransfer too — on macOS WKWebView dragend fires before
+    // drop, so the ref will already be null; dataTransfer survives that race.
+    e.dataTransfer.setData('text/plain', JSON.stringify({ type: 'queue_reorder', index }));
+  };
+
+  const onDragEnterItem = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = isDraggingInternalRef.current ? 'move' : 'copy';
   };
 
   const onDragOverItem = (e: React.DragEvent, index: number) => {
     e.preventDefault();
+    e.dataTransfer.dropEffect = isDraggingInternalRef.current ? 'move' : 'copy';
+    dragOverIdxRef.current = index;
     setDragOverIdx(index);
   };
 
   const onDragEnd = () => {
     setDraggedIdx(null);
     setDragOverIdx(null);
+    isDraggingInternalRef.current = false;
+    draggedIdxRef.current = null;
+    dragOverIdxRef.current = null;
   };
 
-  const onDropQueue = async (e: React.DragEvent, dropIndex?: number) => {
+  const onDropQueue = async (e: React.DragEvent) => {
     e.preventDefault();
+
+    // Clear visual state immediately
+    isDraggingInternalRef.current = false;
+    draggedIdxRef.current = null;
+    dragOverIdxRef.current = null;
     setDraggedIdx(null);
     setDragOverIdx(null);
-    
+
+    let parsedData: any = null;
     try {
-      const dataStr = e.dataTransfer.getData('application/json');
-      if (!dataStr) return;
-      const data = JSON.parse(dataStr);
-      
-      if (data.type === 'queue_reorder') {
-        const fromIdx = data.index;
-        const targetIdx = dropIndex !== undefined ? dropIndex : queue.length;
-        if (fromIdx !== undefined && fromIdx !== targetIdx) {
-          reorderQueue(fromIdx, targetIdx);
+      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;
+          }
         }
-      } else if (data.type === 'song') {
-        const track = data.track;
-        if (dropIndex !== undefined) {
-          // If dropped on a specific item, we might want to insert it there.
-          // For now we just enqueue it at the end to keep it simple, or insert it.
-          // Since we don't have an insert method, we use enqueue (appends to end).
-          enqueue([track]);  
-        } else {
-          enqueue([track]);
-        }
-      } else if (data.type === 'album') {
-        const albumData = await getAlbum(data.id);
-        const tracks: Track[] = albumData.songs.map(s => ({
-          id: s.id, title: s.title, artist: s.artist, album: s.album,
-          albumId: s.albumId, duration: s.duration, coverArt: s.coverArt, track: s.track,
-          year: s.year, bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating,
-        }));
-        enqueue(tracks);
       }
-    } catch (err) {
-      console.error('Drop error', err);
+
+      if (fromIdx !== toIdx) reorderQueue(fromIdx, toIdx);
+      return;
+    }
+
+    // External drop (song / album dragged from elsewhere in the app)
+    if (!parsedData) return;
+    if (parsedData.type === 'song') {
+      enqueue([parsedData.track]);
+    } else if (parsedData.type === 'album') {
+      const albumData = await getAlbum(parsedData.id);
+      const tracks: Track[] = albumData.songs.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, track: s.track,
+        year: s.year, bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating,
+      }));
+      enqueue(tracks);
     }
   };
 
   return (
-    <aside 
-      className="queue-panel" 
-      onDragOver={e => e.preventDefault()}
-      onDrop={e => onDropQueue(e)}
+    <aside
+      className="queue-panel"
+      onDragEnter={e => { e.preventDefault(); e.dataTransfer.dropEffect = isDraggingInternalRef.current ? 'move' : 'copy'; }}
+      onDragOver={e => { e.preventDefault(); e.dataTransfer.dropEffect = isDraggingInternalRef.current ? 'move' : 'copy'; }}
+      onDrop={onDropQueue}
       style={{ 
         borderLeftWidth: isQueueVisible ? 1 : 0
       }}
@@ -233,15 +267,25 @@ export default function QueuePanel() {
         <div className="queue-current-track">
           <div className="queue-current-cover">
             {currentTrack.coverArt ? (
-              <img src={buildCoverArtUrl(currentTrack.coverArt, 400)} alt="" loading="eager" />
+              <img src={buildCoverArtUrl(currentTrack.coverArt, 128)} alt="" loading="eager" />
             ) : (
               <div className="fallback"><Music size={32} /></div>
             )}
           </div>
           <div className="queue-current-info">
-            <h3 className="truncate" data-tooltip={currentTrack.title}>{currentTrack.title}</h3>
+            <h3
+              className="truncate"
+              data-tooltip={currentTrack.title}
+              style={{ cursor: currentTrack.albumId ? 'pointer' : 'default' }}
+              onClick={() => currentTrack.albumId && navigate(`/album/${currentTrack.albumId}`)}
+            >{currentTrack.title}</h3>
             {currentTrack.year && <div className="queue-current-sub">{currentTrack.year}</div>}
-            <div className="queue-current-sub truncate" data-tooltip={currentTrack.album}>{currentTrack.album}</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 style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: '6px' }}>
               <div className="queue-current-tech">
@@ -259,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')}
@@ -283,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) => {
@@ -293,12 +338,9 @@ export default function QueuePanel() {
                 }}
                 draggable
                 onDragStart={(e) => onDragStart(e, idx)}
+                onDragEnter={(e) => onDragEnterItem(e)}
                 onDragOver={(e) => onDragOverItem(e, idx)}
                 onDragEnd={onDragEnd}
-                onDrop={(e) => {
-                  e.stopPropagation();
-                  onDropQueue(e, idx);
-                }}
                 style={dragStyle}
               >
                 <div className="queue-item-info">
@@ -339,7 +381,7 @@ export default function QueuePanel() {
               const data = await getPlaylist(id);
               const tracks: Track[] = data.songs.map(s => ({
                 id: s.id, title: s.title, artist: s.artist, album: s.album,
-                albumId: s.albumId, duration: s.duration, coverArt: s.coverArt, track: s.track,
+                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,
               }));
               if (tracks.length > 0) {

src/components/Sidebar.tsx

@@ -1,9 +1,10 @@
-import React from 'react';
+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 {
   Disc3, Users, Music4, Radio, Settings, Heart, BarChart3, Shuffle, ListMusic,
-  PanelLeftClose, PanelLeft
+  PanelLeftClose, PanelLeft, HelpCircle, Dices, ArrowUpCircle
 } from 'lucide-react';
 
 const PsysonicLogo = () => (
@@ -13,21 +14,80 @@ const PsysonicLogo = () => (
 const navItems = [
   { icon: Disc3, labelKey: 'sidebar.mainstage', to: '/' },
   { icon: Radio, labelKey: 'sidebar.newReleases', to: '/new-releases' },
-  { icon: Music4, labelKey: 'sidebar.allAlbums', to: '/albums' },
+  { icon: Music4,  labelKey: 'sidebar.allAlbums',    to: '/albums' },
+  { icon: Dices,   labelKey: 'sidebar.randomAlbums', to: '/random-albums' },
   { icon: Users, labelKey: 'sidebar.artists', to: '/artists' },
   { icon: ListMusic, labelKey: 'sidebar.playlists', to: '/playlists' },
   { icon: Shuffle, labelKey: 'sidebar.randomMix', to: '/random-mix' },
   { icon: Heart, labelKey: 'sidebar.favorites', to: '/favorites' },
 ];
 
-export default function Sidebar({ 
-  isCollapsed = false, 
-  toggleCollapse 
-}: { 
+function isNewer(latest: string, current: string): boolean {
+  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;
+  if (lMin !== cMin) return lMin > cMin;
+  return lPat > cPat;
+}
+
+function UpdateToast({ isCollapsed, latestVersion }: { isCollapsed: boolean; latestVersion: string }) {
+  const { t } = useTranslation();
+
+  if (isCollapsed) {
+    return (
+      <div className="update-toast-icon" style={{ marginTop: 'auto' }} title={`${t('sidebar.updateAvailable')}: ${latestVersion}`}>
+        <ArrowUpCircle size={20} />
+      </div>
+    );
+  }
+
+  return (
+    <div className="update-toast">
+      <div className="update-toast-header">
+        <ArrowUpCircle size={14} />
+        <span className="update-toast-label">{t('sidebar.updateAvailable')}</span>
+      </div>
+      <div className="update-toast-version">{t('sidebar.updateReady', { version: latestVersion })}</div>
+      <a
+        className="update-toast-link"
+        href="https://github.com/Psychotoxical/psysonic/releases"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        {t('sidebar.updateLink')}
+      </a>
+    </div>
+  );
+}
+
+export default function Sidebar({
+  isCollapsed = false,
+  toggleCollapse
+}: {
   isCollapsed?: boolean;
   toggleCollapse?: () => void;
 }) {
   const { t } = useTranslation();
+  const [latestVersion, setLatestVersion] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    const timer = setTimeout(async () => {
+      try {
+        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)) {
+          setLatestVersion(tag.startsWith('v') ? tag : `v${tag}`);
+        }
+      } catch {
+        // network unavailable — silently skip
+      }
+    }, 1500);
+    return () => { cancelled = true; clearTimeout(timer); };
+  }, []);
 
   return (
     <aside className={`sidebar animate-slide-in ${isCollapsed ? 'collapsed' : ''}`}>
@@ -60,15 +120,24 @@ export default function Sidebar({
         ))}
 
         {!isCollapsed && <span className="nav-section-label" style={{ marginTop: 'auto' }}>{t('sidebar.system')}</span>}
+        {latestVersion && <UpdateToast isCollapsed={isCollapsed} latestVersion={latestVersion} />}
         <NavLink
           to="/statistics"
           className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}
-          style={isCollapsed ? { marginTop: 'auto' } : undefined}
+          style={isCollapsed && !latestVersion ? { marginTop: 'auto' } : undefined}
           title={isCollapsed ? t('sidebar.statistics') : undefined}
         >
           <BarChart3 size={isCollapsed ? 22 : 18} />
           {!isCollapsed && <span>{t('sidebar.statistics')}</span>}
         </NavLink>
+        <NavLink
+          to="/help"
+          className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}
+          title={isCollapsed ? t('sidebar.help') : undefined}
+        >
+          <HelpCircle size={isCollapsed ? 22 : 18} />
+          {!isCollapsed && <span>{t('sidebar.help')}</span>}
+        </NavLink>
         <NavLink
           to="/settings"
           className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}

src/i18n.ts

@@ -8,6 +8,7 @@ const enTranslation = {
     mainstage: 'Mainstage',
     newReleases: 'New Releases',
     allAlbums: 'All Albums',
+    randomAlbums: 'Random Albums',
     artists: 'Artists',
     playlists: 'Playlists',
     randomMix: 'Random Mix',
@@ -15,8 +16,12 @@ const enTranslation = {
     system: 'System',
     statistics: 'Statistics',
     settings: 'Settings',
+    help: 'Help',
     expand: 'Expand Sidebar',
-    collapse: 'Collapse Sidebar'
+    collapse: 'Collapse Sidebar',
+    updateAvailable: 'Update available',
+    updateReady: '{{version}} is ready',
+    updateLink: 'Go to release →'
   },
   home: {
     starred: 'Personal Favorites',
@@ -39,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?',
@@ -69,6 +77,8 @@ const enTranslation = {
     artistBio: 'Artist Bio',
     download: 'Download (ZIP)',
     downloading: 'Loading…',
+    downloadHint: 'FLAC/WAV albums are zipped server-side first — large albums may take a moment before the download starts.',
+    downloadHintShort: 'Server zips first — may take a moment depending on file size',
     favoriteAdd: 'Add to Favorites',
     favoriteRemove: 'Remove from Favorites',
     favorite: 'Favorite',
@@ -78,10 +88,12 @@ const enTranslation = {
     goToArtist: 'Go to {{artist}}',
     moreLabelAlbums: 'More albums on {{label}}',
     trackTitle: 'Title',
+    trackArtist: 'Artist',
     trackFormat: 'Format',
     trackFavorite: 'Favorite',
     trackRating: 'Rating',
     trackDuration: 'Duration',
+    trackTotal: 'Total',
     notFound: 'Album not found.',
     bioModal: 'Artist Biography',
     bioClose: 'Close',
@@ -116,12 +128,17 @@ const enTranslation = {
     albums: 'Albums',
     songs: 'Songs',
   },
+  randomAlbums: {
+    title: 'Random Albums',
+    refresh: 'Refresh',
+  },
   randomMix: {
     title: 'Random Mix',
     remix: 'Remix',
     remixTooltip: 'Load new random songs',
     playAll: 'Play All',
     trackTitle: 'Title',
+    trackArtist: 'Artist',
     trackAlbum: 'Album',
     trackFavorite: 'Favorite',
     trackDuration: 'Duration',
@@ -236,7 +253,67 @@ const enTranslation = {
     downloadsDefault: 'Default Downloads Folder',
     pickFolder: 'Select',
     pickFolderTitle: 'Select Download Folder',
-    logout: 'Logout'
+    logout: 'Logout',
+    aboutTitle: 'About Psysonic',
+    aboutDesc: 'A desktop music player for Subsonic-compatible servers (Navidrome, Gonic, and others). Streams your self-hosted music library with a clean, modern interface styled after the Catppuccin colour palette.',
+    aboutFeatures: 'Multi-server support · Scrobbling · Fullscreen player · Album downloads · Image caching · Catppuccin themes',
+    aboutLicense: 'License',
+    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'
+  },
+  help: {
+    title: 'Help',
+    s1: 'Getting Started',
+    q1: 'Which servers are compatible?',
+    a1: 'Psysonic works with any Subsonic-compatible server: Navidrome, Gonic, Subsonic, Airsonic, and others. Navidrome is the recommended choice.',
+    q2: 'How do I connect to my server?',
+    a2: 'Open Settings and click "Add Server". Enter the server URL (e.g. 192.168.1.100:4533), your username, and password. Psysonic tests the connection before saving — nothing is stored if the connection fails.',
+    q3: 'Can I use multiple servers?',
+    a3: 'Yes. You can add as many servers as you like in Settings and switch between them at any time. Only one server is active at a time.',
+    s2: 'Playback',
+    q4: 'How do I play music?',
+    a4: 'Double-click any track to play it. On album and artist pages, use "Play All" to start the whole album. You can also drag tracks into the queue panel.',
+    q5: 'What keyboard shortcuts are available?',
+    a5: 'Space = Play / Pause · Escape = Close fullscreen player. Media keys (Play/Pause, Next, Previous) work on macOS and Windows. On Linux, use the player bar buttons.',
+    q6: 'What is the queue?',
+    a6: 'The queue shows all upcoming tracks. Open it with the list icon in the player bar. You can reorder tracks by dragging and save the current queue as a playlist.',
+    q7: 'How do I open the fullscreen player?',
+    a7: 'Click the album art thumbnail in the player bar at the bottom, or the expand icon next to it. Press Escape to close it again.',
+    q8: 'How does repeat work?',
+    a8: 'Click the repeat button in the player bar to cycle through: Off → Repeat All → Repeat One.',
+    s3: 'Library',
+    q9: 'How do I download an album?',
+    a9: 'Open an album\'s detail page and click "Download (ZIP)". The server zips the album first — this may take a moment for large albums or lossless files (FLAC / WAV). A progress bar shows the download status.',
+    q10: 'How do I star / favorite tracks and albums?',
+    a10: 'Click the star icon on any track row or on the album header. Starred items appear in the Favorites section in the sidebar.',
+    q11: 'What is the hero carousel on the home page?',
+    a11: 'The banner at the top of the home page randomly picks albums from your library and rotates through them every 10 seconds. Click the dots to jump to a specific one, or click the banner to open the album.',
+    s4: 'Settings',
+    q12: 'How do I change the theme?',
+    a12: 'Settings → Theme. Choose between Catppuccin Mocha (dark) and Catppuccin Latte (light).',
+    q13: 'How do I change the language?',
+    a13: 'Settings → Language. English and German are currently supported.',
+    q14: 'What does "Minimize to Tray" do?',
+    a14: 'When enabled, clicking the × button hides Psysonic to the system tray instead of closing it. Music keeps playing. Right-click the tray icon for controls or to quit.',
+    q15: 'How do I set a download folder?',
+    a15: 'Settings → App Behavior → Download Folder. Pick any folder — downloaded albums are saved there as ZIP files. Without a custom folder, your browser\'s default downloads location is used.',
+    s5: 'Scrobbling',
+    q16: 'How does scrobbling work?',
+    a16: 'Psysonic uses your Navidrome server\'s built-in Last.fm integration. First, connect your Last.fm account in Navidrome\'s web interface. Then enable scrobbling in Psysonic\'s Settings.',
+    q17: 'When is a scrobble sent?',
+    a17: 'A scrobble is submitted after you\'ve listened to 50% of a track.',
+    s6: 'Troubleshooting',
+    q18: 'Cover art and artist images load slowly.',
+    a18: 'Images are fetched from your server\'s disk on first load and then cached locally for 30 days. If your server\'s storage is slow, the first visit to a page may take a moment. Subsequent visits will be instant.',
+    q19: 'The connection test fails.',
+    a19: 'Check the URL including the port (e.g. http://192.168.1.100:4533). Make sure no firewall blocks the connection. Try http:// instead of https:// on a local network. Also verify that your username and password are correct.',
+    q20: 'No audio on Linux (AppImage).',
+    a20: 'The AppImage bundles GStreamer. If audio still doesn\'t work, try installing system GStreamer packages: gstreamer1.0-plugins-good, gstreamer1.0-plugins-bad, gstreamer1.0-libav.',
+    q21: 'The app crashes or shows a black screen on old Linux hardware.',
+    a21: 'This is usually caused by GPU / EGL driver issues in WebKitGTK. The official AppImage already patches the launcher to disable GPU compositing. If you build from source, launch with: WEBKIT_DISABLE_COMPOSITING_MODE=1 WEBKIT_DISABLE_DMABUF_RENDERER=1 ./psysonic',
   },
   queue: {
     title: 'Queue',
@@ -292,6 +369,7 @@ const deTranslation = {
     mainstage: 'Mainstage',
     newReleases: 'Neueste',
     allAlbums: 'Alle Alben',
+    randomAlbums: 'Zufallsalben',
     artists: 'Künstler',
     playlists: 'Playlists',
     randomMix: 'Zufallsmix',
@@ -299,8 +377,12 @@ const deTranslation = {
     system: 'System',
     statistics: 'Statistiken',
     settings: 'Einstellungen',
+    help: 'Hilfe',
     expand: 'Sidebar einblenden',
-    collapse: 'Sidebar ausblenden'
+    collapse: 'Sidebar ausblenden',
+    updateAvailable: 'Update verfügbar',
+    updateReady: '{{version}} ist bereit',
+    updateLink: 'Zum Release →'
   },
   home: {
     starred: 'Persönliche Favoriten',
@@ -323,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?',
@@ -353,6 +438,8 @@ const deTranslation = {
     artistBio: 'Künstler-Bio',
     download: 'Download (ZIP)',
     downloading: 'Lade…',
+    downloadHint: 'FLAC/WAV-Alben werden serverseitig zuerst gezippt — bei großen Alben kann es einen Moment dauern, bevor der Download startet.',
+    downloadHintShort: 'Server zippt zuerst — je nach Dateigröße kann es etwas dauern bevor der Download startet',
     favoriteAdd: 'Zu Favoriten hinzufügen',
     favoriteRemove: 'Aus Favoriten entfernen',
     favorite: 'Als Favorit',
@@ -362,10 +449,12 @@ const deTranslation = {
     goToArtist: 'Zu {{artist}} wechseln',
     moreLabelAlbums: 'Weitere Alben von {{label}} anzeigen',
     trackTitle: 'Titel',
+    trackArtist: 'Interpret',
     trackFormat: 'Format',
     trackFavorite: 'Favorit',
     trackRating: 'Bewertung',
     trackDuration: 'Dauer',
+    trackTotal: 'Gesamt',
     notFound: 'Album nicht gefunden.',
     bioModal: 'Künstler-Biografie',
     bioClose: 'Schließen',
@@ -400,12 +489,17 @@ const deTranslation = {
     albums: 'Alben',
     songs: 'Songs',
   },
+  randomAlbums: {
+    title: 'Zufallsalben',
+    refresh: 'Neu laden',
+  },
   randomMix: {
     title: 'Zufallsmix',
     remix: 'Neu mixen',
     remixTooltip: 'Neue Songs laden',
     playAll: 'Alle abspielen',
     trackTitle: 'Titel',
+    trackArtist: 'Künstler',
     trackAlbum: 'Album',
     trackFavorite: 'Favorit',
     trackDuration: 'Dauer',
@@ -520,7 +614,67 @@ const deTranslation = {
     downloadsDefault: 'Standard-Downloads-Ordner',
     pickFolder: 'Auswählen',
     pickFolderTitle: 'Download-Ordner auswählen',
-    logout: 'Abmelden'
+    logout: 'Abmelden',
+    aboutTitle: 'Über Psysonic',
+    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.',
+    aboutRepo: 'Quellcode auf GitHub',
+    aboutVersion: 'Version',
+    aboutBuiltWith: 'Gebaut mit Tauri · React · TypeScript · Howler.js',
+    aboutAiCredit: 'Mit freundlicher Unterstützung von Claude Code by Anthropic'
+  },
+  help: {
+    title: 'Hilfe',
+    s1: 'Erste Schritte',
+    q1: 'Welche Server sind kompatibel?',
+    a1: 'Psysonic funktioniert mit jedem Subsonic-kompatiblen Server: Navidrome, Gonic, Subsonic, Airsonic und anderen. Navidrome ist die empfohlene Wahl.',
+    q2: 'Wie verbinde ich mich mit meinem Server?',
+    a2: 'Öffne die Einstellungen und klicke auf "Server hinzufügen". Gib die Server-URL (z. B. 192.168.1.100:4533), Benutzername und Passwort ein. Psysonic testet die Verbindung vor dem Speichern — bei Fehler wird nichts gespeichert.',
+    q3: 'Kann ich mehrere Server verwenden?',
+    a3: 'Ja. Du kannst beliebig viele Server in den Einstellungen hinzufügen und jederzeit zwischen ihnen wechseln. Immer ist nur ein Server aktiv.',
+    s2: 'Wiedergabe',
+    q4: 'Wie spiele ich Musik ab?',
+    a4: 'Doppelklick auf einen Track startet die Wiedergabe. Auf Album- und Künstlerseiten gibt es "Alle abspielen". Tracks lassen sich auch per Drag & Drop in die Warteschlange ziehen.',
+    q5: 'Welche Tastenkürzel gibt es?',
+    a5: 'Leertaste = Play / Pause · Escape = Vollbild schließen. Medientasten (Play/Pause, Weiter, Zurück) funktionieren unter macOS und Windows. Unter Linux bitte die Buttons in der Playerleiste nutzen.',
+    q6: 'Was ist die Warteschlange?',
+    a6: 'Die Warteschlange zeigt alle kommenden Tracks. Öffnen mit dem Listen-Icon in der Playerleiste. Tracks können per Drag & Drop umsortiert und als Playlist gespeichert werden.',
+    q7: 'Wie öffne ich den Vollbild-Player?',
+    a7: 'Klick auf das Album-Cover unten in der Playerleiste oder auf das Expand-Icon daneben. Mit Escape wieder schließen.',
+    q8: 'Wie funktioniert die Wiederholfunktion?',
+    a8: 'Klick auf den Wiederhol-Button in der Playerleiste, um zwischen den Modi zu wechseln: Aus → Alles wiederholen → Einen wiederholen.',
+    s3: 'Bibliothek',
+    q9: 'Wie lade ich ein Album herunter?',
+    a9: 'Auf der Album-Detailseite auf "Download (ZIP)" klicken. Der Server zieht das Album zuerst zusammen — bei großen Alben oder verlustfreien Dateien (FLAC / WAV) kann das einen Moment dauern. Ein Fortschrittsbalken zeigt den Status.',
+    q10: 'Wie markiere ich Tracks und Alben als Favoriten?',
+    a10: 'Das Stern-Icon auf einem Track oder im Album-Header anklicken. Markierte Einträge erscheinen im Bereich "Favoriten" in der Seitenleiste.',
+    q11: 'Was ist das Karussell auf der Startseite?',
+    a11: 'Das Banner oben auf der Startseite wählt zufällige Alben aus der Bibliothek und rotiert alle 10 Sekunden weiter. Mit den Punkten kann man manuell springen, Klick auf das Banner öffnet das Album.',
+    s4: 'Einstellungen',
+    q12: 'Wie ändere ich das Theme?',
+    a12: 'Einstellungen → Theme. Wahl zwischen Catppuccin Mocha (dunkel) und Catppuccin Latte (hell).',
+    q13: 'Wie ändere ich die Sprache?',
+    a13: 'Einstellungen → Sprache. Aktuell verfügbar: Englisch und Deutsch.',
+    q14: 'Was bewirkt "In Tray minimieren"?',
+    a14: 'Wenn aktiviert, versteckt sich Psysonic beim Klick auf × im System-Tray statt sich zu schließen. Die Musik läuft weiter. Rechtsklick auf das Tray-Icon zeigt Steueroptionen und "Beenden".',
+    q15: 'Wie lege ich einen Download-Ordner fest?',
+    a15: 'Einstellungen → App-Verhalten → Download-Ordner. Beliebigen Ordner wählen — heruntergeladene Alben werden dort als ZIP gespeichert. Ohne eigenen Ordner landet alles im Standard-Downloads-Ordner.',
+    s5: 'Scrobbling',
+    q16: 'Wie funktioniert Scrobbling?',
+    a16: 'Psysonic nutzt die eingebaute Last.fm-Integration von Navidrome. Zuerst das Last.fm-Konto im Navidrome-Webinterface verbinden, dann Scrobbling in den Psysonic-Einstellungen aktivieren.',
+    q17: 'Wann wird ein Scrobble gesendet?',
+    a17: 'Ein Scrobble wird übermittelt, wenn 50 % eines Tracks gehört wurden.',
+    s6: 'Problemlösung',
+    q18: 'Cover und Künstlerbilder laden langsam.',
+    a18: 'Bilder werden beim ersten Aufruf vom Server geholt und dann 30 Tage lokal gecacht. Bei langsamen Server-Festplatten kann der erste Seitenaufruf einen Moment dauern. Danach geht alles sofort.',
+    q19: 'Der Verbindungstest schlägt fehl.',
+    a19: 'URL inklusive Port prüfen (z. B. http://192.168.1.100:4533). Sicherstellen, dass keine Firewall die Verbindung blockiert. Im lokalen Netzwerk http:// statt https:// versuchen. Benutzername und Passwort kontrollieren.',
+    q20: 'Kein Ton unter Linux (AppImage).',
+    a20: 'Das AppImage bündelt GStreamer. Falls trotzdem kein Ton kommt, diese System-Pakete installieren: gstreamer1.0-plugins-good, gstreamer1.0-plugins-bad, gstreamer1.0-libav.',
+    q21: 'Die App stürzt ab oder zeigt einen schwarzen Bildschirm auf alter Linux-Hardware.',
+    a21: 'Das liegt meist an GPU/EGL-Treiberproblemen in WebKitGTK. Das offizielle AppImage deaktiviert GPU-Compositing bereits automatisch. Beim Selbst-Kompilieren: WEBKIT_DISABLE_COMPOSITING_MODE=1 WEBKIT_DISABLE_DMABUF_RENDERER=1 ./psysonic',
   },
   queue: {
     title: 'Warteschlange',

src/pages/AlbumDetail.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
-import { Play, Star, ExternalLink, X, ChevronLeft, Download, ListPlus } from 'lucide-react';
-import { getAlbum, getArtist, getArtistInfo, setRating, buildCoverArtUrl, buildDownloadUrl, star, unstar, SubsonicSong, SubsonicAlbum } from '../api/subsonic';
+import { Play, Star, ExternalLink, X, ChevronLeft, Download, ListPlus, Info } from 'lucide-react';
+import { getAlbum, getArtist, getArtistInfo, setRating, buildCoverArtUrl, coverArtCacheKey, buildDownloadUrl, star, unstar, SubsonicSong, SubsonicAlbum } from '../api/subsonic';
 import { usePlayerStore } from '../store/playerStore';
 import { useAuthStore } from '../store/authStore';
 import { useNavigate } from 'react-router-dom';
@@ -9,6 +9,7 @@ import { open } from '@tauri-apps/plugin-shell';
 import { writeFile } from '@tauri-apps/plugin-fs';
 import { join } from '@tauri-apps/api/path';
 import AlbumCard from '../components/AlbumCard';
+import CachedImage, { useCachedUrl } from '../components/CachedImage';
 import { useTranslation } from 'react-i18next';
 
 function sanitizeFilename(name: string): string {
@@ -30,11 +31,10 @@ function formatSize(bytes?: number): string {
   return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
 }
 
-function codecLabel(song: { suffix?: string; bitRate?: number; samplingRate?: number }): string {
+function codecLabel(song: { suffix?: string; bitRate?: 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,15 +100,17 @@ 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>>({});
   const [bio, setBio] = useState<string | null>(null);
   const [bioOpen, setBioOpen] = useState(false);
   const [loading, setLoading] = useState(true);
-  const [downloading, setDownloading] = useState(false);
+  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;
@@ -134,7 +136,7 @@ export default function AlbumDetail() {
     if (!album) return;
     const tracks = album.songs.map(s => ({
       id: s.id, title: s.title, artist: s.artist, album: s.album,
-      albumId: s.albumId, duration: s.duration, coverArt: s.coverArt, track: s.track,
+      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,
     }));
     if (tracks[0]) playTrack(tracks[0], tracks);
@@ -144,7 +146,7 @@ export default function AlbumDetail() {
     if (!album) return;
     const tracks = album.songs.map(s => ({
       id: s.id, title: s.title, artist: s.artist, album: s.album,
-      albumId: s.albumId, duration: s.duration, coverArt: s.coverArt, track: s.track,
+      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,
     }));
     enqueue(tracks);
@@ -153,7 +155,7 @@ export default function AlbumDetail() {
   const handlePlaySong = (song: SubsonicSong) => {
     const track = {
       id: song.id, title: song.title, artist: song.artist, album: song.album,
-      albumId: song.albumId, duration: song.duration, coverArt: song.coverArt,
+      albumId: song.albumId, artistId: song.artistId, duration: song.duration, coverArt: song.coverArt,
       track: song.track, year: song.year, bitRate: song.bitRate,
       suffix: song.suffix, userRating: song.userRating
     };
@@ -174,13 +176,33 @@ export default function AlbumDetail() {
   };
 
   const handleDownload = async (albumName: string, albumId: string) => {
-    setDownloading(true);
+    setDownloadProgress(0);
     try {
       const url = buildDownloadUrl(albumId);
       const response = await fetch(url);
       if (!response.ok) throw new Error(`HTTP ${response.status}`);
-      const blob = await response.blob();
 
+      const contentLength = response.headers.get('Content-Length');
+      const total = contentLength ? parseInt(contentLength, 10) : 0;
+      const chunks: Uint8Array<ArrayBuffer>[] = [];
+
+      if (total && response.body) {
+        const reader = response.body.getReader();
+        let received = 0;
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          chunks.push(value);
+          received += value.length;
+          setDownloadProgress(Math.round((received / total) * 100));
+        }
+      } else {
+        const buffer = await response.arrayBuffer() as ArrayBuffer;
+        chunks.push(new Uint8Array(buffer));
+        setDownloadProgress(100);
+      }
+
+      const blob = new Blob(chunks);
       if (auth.downloadFolder) {
         const buffer = await blob.arrayBuffer();
         const path = await join(auth.downloadFolder, `${sanitizeFilename(albumName)}.zip`);
@@ -197,8 +219,10 @@ export default function AlbumDetail() {
       }
     } catch (e) {
       console.error('Download failed:', e);
+      setDownloadProgress(null);
     } finally {
-      setDownloading(false);
+      // keep bar visible at 100% for 3 seconds so user sees completion
+      setTimeout(() => setDownloadProgress(null), 60000);
     }
   };
 
@@ -231,22 +255,28 @@ export default function AlbumDetail() {
     }
   };
 
+  // Hooks must be called unconditionally — derive from nullable album state
+  const coverUrl = album?.album.coverArt ? buildCoverArtUrl(album.album.coverArt, 400) : '';
+  const coverKey = album?.album.coverArt ? coverArtCacheKey(album.album.coverArt, 400) : '';
+  const resolvedCoverUrl = useCachedUrl(coverUrl, coverKey);
+
   if (loading) return <div className="loading-center"><div className="spinner" /></div>;
   if (!album) return <div className="empty-state">{t('albumDetail.notFound')}</div>;
 
   const { album: info, songs } = album;
-  const coverUrl = info.coverArt ? buildCoverArtUrl(info.coverArt, 400) : '';
   const totalDuration = songs.reduce((acc, s) => acc + s.duration, 0);
+  const hasVariousArtists = songs.some(s => s.artist !== info.artist);
+  const totalSize = songs.reduce((acc, s) => acc + (s.size ?? 0), 0);
 
   return (
     <div className="album-detail animate-fade-in">
       {bioOpen && bio && <BioModal bio={bio} onClose={() => setBioOpen(false)} />}
 
       <div className="album-detail-header">
-        {coverUrl && (
+        {resolvedCoverUrl && (
           <div
             className="album-detail-bg"
-            style={{ backgroundImage: `url(${coverUrl})` }}
+            style={{ backgroundImage: `url(${resolvedCoverUrl})` }}
             aria-hidden="true"
           />
         )}
@@ -258,7 +288,7 @@ export default function AlbumDetail() {
           </button>
           <div className="album-detail-hero">
             {coverUrl ? (
-              <img className="album-detail-cover" src={coverUrl} alt={`${info.name} Cover`} />
+              <CachedImage className="album-detail-cover" src={coverUrl} cacheKey={coverKey} alt={`${info.name} Cover`} />
             ) : (
               <div className="album-detail-cover album-cover-placeholder">♪</div>
             )}
@@ -320,9 +350,23 @@ export default function AlbumDetail() {
                 <button className="btn btn-ghost" id="album-bio-btn" onClick={handleBio}>
                   <ExternalLink size={16} /> {t('albumDetail.artistBio')}
                 </button>
-                <button className="btn btn-ghost" id="album-download-btn" onClick={() => handleDownload(info.name, info.id)} disabled={downloading}>
-                  <Download size={16} /> {downloading ? t('albumDetail.downloading') : t('albumDetail.download')}
-                </button>
+                {downloadProgress !== null ? (
+                  <div className="download-progress-wrap">
+                    <Download size={14} />
+                    <div className="download-progress-bar">
+                      <div className="download-progress-fill" style={{ width: `${downloadProgress}%` }} />
+                    </div>
+                    <span className="download-progress-pct">{downloadProgress}%</span>
+                  </div>
+                ) : (
+                  <button className="btn btn-ghost" id="album-download-btn" onClick={() => handleDownload(info.name, info.id)}>
+                    <Download size={16} /> {t('albumDetail.download')}{totalSize > 0 ? ` · ${formatSize(totalSize)}` : ''}
+                  </button>
+                )}
+                <span className="download-hint">
+                  <Info size={12} />
+                  {t('albumDetail.downloadHintShort')}
+                </span>
               </div>
             </div>
           </div>
@@ -330,13 +374,14 @@ export default function AlbumDetail() {
       </div>
 
       <div className="tracklist">
-        <div className="tracklist-header">
+        <div className={`tracklist-header${hasVariousArtists ? ' tracklist-va' : ''}`}>
           <div style={{ textAlign: 'center' }}>#</div>
           <div>{t('albumDetail.trackTitle')}</div>
-          <div>{t('albumDetail.trackFormat')}</div>
+          {hasVariousArtists && <div>{t('albumDetail.trackArtist')}</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>
 
         {(() => {
@@ -360,13 +405,15 @@ export default function AlbumDetail() {
               {discs.get(discNum)!.map((song, i) => (
                 <div
                   key={song.id}
-                  className="track-row"
+                  className={`track-row${hasVariousArtists ? ' track-row-va' : ''}${currentTrack?.id === song.id ? ' active' : ''}`}
+                  onMouseEnter={() => setHoveredSongId(song.id)}
+                  onMouseLeave={() => setHoveredSongId(null)}
                   onDoubleClick={() => handlePlaySong(song)}
                   onContextMenu={(e) => {
                     e.preventDefault();
                     const track = {
                       id: song.id, title: song.title, artist: song.artist, album: song.album,
-                      albumId: song.albumId, duration: song.duration, coverArt: song.coverArt, track: song.track,
+                      albumId: song.albumId, artistId: song.artistId, duration: song.duration, coverArt: song.coverArt, track: song.track,
                       year: song.year, bitRate: song.bitRate, suffix: song.suffix, userRating: song.userRating,
                     };
                     openContextMenu(e.clientX, e.clientY, track, 'album-song');
@@ -377,27 +424,31 @@ export default function AlbumDetail() {
                     e.dataTransfer.effectAllowed = 'copy';
                     const track = {
                       id: song.id, title: song.title, artist: song.artist, album: song.album,
-                      albumId: song.albumId, duration: song.duration, coverArt: song.coverArt, track: song.track,
+                      albumId: song.albumId, artistId: song.artistId, duration: song.duration, coverArt: song.coverArt, track: song.track,
                       year: song.year, bitRate: song.bitRate, suffix: song.suffix, userRating: song.userRating,
                     };
-                    e.dataTransfer.setData('application/json', JSON.stringify({ type: 'song', track }));
+                    e.dataTransfer.setData('text/plain', JSON.stringify({ type: 'song', track }));
                   }}
                 >
-                  <div className="track-num" style={{ textAlign: 'center' }}>{song.track ?? i + 1}</div>
+                  <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-info">
                     <span className="track-title" data-tooltip={song.title}>{song.title}</span>
-                    {song.artist !== info.artist && (
+                  </div>
+                  {hasVariousArtists && (
+                    <div className="track-artist-cell">
                       <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>
+                  )}
                   <div style={{ display: 'flex', justifyContent: 'center' }}>
                     <button
                       className="btn btn-ghost"
@@ -415,15 +466,29 @@ 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>
           ));
         })()}
+
+        {/* Total row */}
+        <div className={`tracklist-total${hasVariousArtists ? ' tracklist-va' : ''}`}>
+          <span className="tracklist-total-label">{t('albumDetail.trackTotal')}</span>
+          <span className="tracklist-total-value">{formatDuration(totalDuration)}</span>
+        </div>
       </div>
 
       {relatedAlbums.length > 0 && (
         <div style={{ padding: '0 var(--space-6) var(--space-8)' }}>
+          <div style={{ borderTop: '1px solid var(--border-subtle)', marginBottom: '2rem' }} />
           <h2 className="section-title" style={{ marginBottom: '1rem' }}>{t('albumDetail.moreByArtist', { artist: info.artist })}</h2>
           <div className="album-grid-wrap">
             {relatedAlbums.map(a => <AlbumCard key={a.id} album={a} />)}

src/pages/Albums.tsx

@@ -3,7 +3,7 @@ import AlbumCard from '../components/AlbumCard';
 import { getAlbumList, SubsonicAlbum } from '../api/subsonic';
 import { useTranslation } from 'react-i18next';
 
-type SortType = 'alphabeticalByName' | 'alphabeticalByArtist' | 'newest' | 'random';
+type SortType = 'alphabeticalByName' | 'alphabeticalByArtist';
 
 export default function Albums() {
   const { t } = useTranslation();
@@ -55,8 +55,6 @@ export default function Albums() {
   const sortOptions: { value: SortType; label: string }[] = [
     { value: 'alphabeticalByName', label: t('albums.sortByName') },
     { value: 'alphabeticalByArtist', label: t('albums.sortByArtist') },
-    { value: 'newest', label: t('albums.sortNewest') },
-    { value: 'random', label: t('albums.sortRandom') },
   ];
 
   return (

src/pages/ArtistDetail.tsx

@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
-import { getArtist, getArtistInfo, getTopSongs, getSimilarSongs2, SubsonicArtist, SubsonicAlbum, SubsonicSong, SubsonicArtistInfo, buildCoverArtUrl, star, unstar } from '../api/subsonic';
+import { getArtist, getArtistInfo, getTopSongs, getSimilarSongs2, SubsonicArtist, SubsonicAlbum, SubsonicSong, SubsonicArtistInfo, buildCoverArtUrl, coverArtCacheKey, star, unstar } from '../api/subsonic';
 import AlbumCard from '../components/AlbumCard';
+import CachedImage from '../components/CachedImage';
 import { ArrowLeft, Users, ExternalLink, Star, Play, Shuffle, Radio } from 'lucide-react';
 import { open } from '@tauri-apps/plugin-shell';
 import { usePlayerStore } from '../store/playerStore';
@@ -158,11 +159,12 @@ export default function ArtistDetail() {
       <div className="artist-detail-header">
         <div className="artist-detail-avatar">
           {coverId ? (
-            <img
+            <CachedImage
               src={buildCoverArtUrl(coverId, 300)}
+              cacheKey={coverArtCacheKey(coverId, 300)}
               alt={artist.name}
               style={{ width: '100%', height: '100%', objectFit: 'cover' }}
-              onError={e => { e.currentTarget.style.display = 'none'; }}
+              onError={e => { (e.currentTarget as HTMLImageElement).style.display = 'none'; }}
             />
           ) : (
             <Users size={64} color="var(--text-muted)" />
@@ -256,7 +258,7 @@ export default function ArtistDetail() {
                   e.preventDefault();
                   const track = {
                     id: song.id, title: song.title, artist: song.artist, album: song.album,
-                    albumId: song.albumId, duration: song.duration, coverArt: song.coverArt, track: song.track,
+                    albumId: song.albumId, artistId: song.artistId, duration: song.duration, coverArt: song.coverArt, track: song.track,
                     year: song.year, bitRate: song.bitRate, suffix: song.suffix, userRating: song.userRating,
                   };
                   openContextMenu(e.clientX, e.clientY, track, 'song');
@@ -265,11 +267,12 @@ export default function ArtistDetail() {
                 <div className="track-num" style={{ textAlign: 'center' }}>{idx + 1}</div>
                 <div className="track-info" style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
                   {song.coverArt && (
-                    <img
+                    <CachedImage
                       src={buildCoverArtUrl(song.coverArt, 64)}
+                      cacheKey={coverArtCacheKey(song.coverArt, 64)}
                       alt={song.album}
                       style={{ width: '32px', height: '32px', borderRadius: '4px', objectFit: 'cover', flexShrink: 0 }}
-                      onError={(e) => { e.currentTarget.style.display = 'none'; }}
+                      onError={(e) => { (e.currentTarget as HTMLImageElement).style.display = 'none'; }}
                     />
                   )}
                   <div style={{ display: 'flex', flexDirection: 'column', minWidth: 0 }}>

src/pages/Artists.tsx

@@ -1,13 +1,36 @@
 import React, { useEffect, useState, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { getArtists, SubsonicArtist, buildCoverArtUrl } from '../api/subsonic';
-import { Users, LayoutGrid, List } from 'lucide-react';
+import { getArtists, SubsonicArtist } from '../api/subsonic';
+import { LayoutGrid, List } from 'lucide-react';
 import { usePlayerStore } from '../store/playerStore';
 import { useTranslation } from 'react-i18next';
 
 const ALL_SENTINEL = 'ALL';
 const ALPHABET = [ALL_SENTINEL, '#', ...'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('')];
 
+// Catppuccin accent colors — one is picked deterministically from the artist name
+const CTP_COLORS = [
+  'var(--ctp-rosewater)', 'var(--ctp-flamingo)', 'var(--ctp-pink)',    'var(--ctp-mauve)',
+  'var(--ctp-red)',       'var(--ctp-maroon)',    'var(--ctp-peach)',   'var(--ctp-yellow)',
+  'var(--ctp-green)',     'var(--ctp-teal)',      'var(--ctp-sky)',     'var(--ctp-sapphire)',
+  'var(--ctp-blue)',      'var(--ctp-lavender)',
+];
+
+function nameColor(name: string): string {
+  let h = 0;
+  for (let i = 0; i < name.length; i++) h = (h * 31 + name.charCodeAt(i)) >>> 0;
+  return CTP_COLORS[h % CTP_COLORS.length];
+}
+
+function nameInitial(name: string): string {
+  // Skip leading non-letter chars (punctuation, numbers, brackets, …)
+  const letter = name.match(/[a-zA-ZÀ-ÖØ-öø-ÿ]/)?.[0];
+  if (letter) return letter.toUpperCase();
+  // Fallback: first alphanumeric (e.g. "1349")
+  const alnum = name.match(/[a-zA-Z0-9]/)?.[0];
+  return alnum?.toUpperCase() ?? '?';
+}
+
 export default function Artists() {
   const { t } = useTranslation();
   const [artists, setArtists] = useState<SubsonicArtist[]>([]);
@@ -124,7 +147,7 @@ export default function Artists() {
       {!loading && viewMode === 'grid' && (
         <div className="album-grid-wrap">
           {visible.map(artist => {
-            const coverId = artist.coverArt || artist.id;
+            const color = nameColor(artist.name);
             return (
               <div
                 key={artist.id}
@@ -135,21 +158,8 @@ export default function Artists() {
                   openContextMenu(e.clientX, e.clientY, artist, 'artist');
                 }}
               >
-                <div className="artist-card-avatar" style={{ position: 'relative', overflow: 'hidden' }}>
-                  {coverId ? (
-                    <img
-                      src={buildCoverArtUrl(coverId, 200)}
-                      alt=""
-                      style={{ width: '100%', height: '100%', objectFit: 'cover' }}
-                      onError={(e) => {
-                        e.currentTarget.style.display = 'none';
-                        e.currentTarget.parentElement?.classList.add('fallback-visible');
-                      }}
-                    />
-                  ) : (
-                    <Users size={32} />
-                  )}
-                  <Users size={32} className="fallback-icon" style={{ display: coverId ? 'none' : 'block', position: 'absolute' }} />
+                <div className="artist-card-avatar artist-card-avatar-initial" style={{ borderColor: color }}>
+                  <span style={{ color }}>{nameInitial(artist.name)}</span>
                 </div>
                 <div>
                   <div className="artist-card-name">{artist.name}</div>
@@ -170,7 +180,7 @@ export default function Artists() {
               <h3 className="letter-heading">{letter}</h3>
               <div className="artist-list">
                 {groups[letter].map(artist => {
-                  const coverId = artist.coverArt || artist.id;
+                  const color = nameColor(artist.name);
                   return (
                     <button
                       key={artist.id}
@@ -182,21 +192,8 @@ export default function Artists() {
                       }}
                       id={`artist-${artist.id}`}
                     >
-                      <div className="artist-avatar" style={{ position: 'relative', overflow: 'hidden' }}>
-                        {coverId ? (
-                          <img
-                            src={buildCoverArtUrl(coverId, 100)}
-                            alt=""
-                            style={{ width: '100%', height: '100%', objectFit: 'cover' }}
-                            onError={(e) => {
-                              e.currentTarget.style.display = 'none';
-                              e.currentTarget.parentElement?.classList.add('fallback-visible');
-                            }}
-                          />
-                        ) : (
-                          <Users size={18} />
-                        )}
-                        <Users size={18} className="fallback-icon" style={{ display: coverId ? 'none' : 'block', position: 'absolute' }} />
+                      <div className="artist-avatar artist-avatar-initial" style={{ borderColor: color }}>
+                        <span style={{ color }}>{nameInitial(artist.name)}</span>
                       </div>
                       <div style={{ textAlign: 'left' }}>
                         <div className="artist-name">{artist.name}</div>

src/pages/Favorites.tsx

@@ -72,10 +72,10 @@ export default function Favorites() {
                       e.dataTransfer.effectAllowed = 'copy';
                       const track = {
                         id: song.id, title: song.title, artist: song.artist, album: song.album,
-                        albumId: song.albumId, duration: song.duration, coverArt: song.coverArt, track: song.track,
+                        albumId: song.albumId, artistId: song.artistId, duration: song.duration, coverArt: song.coverArt, track: song.track,
                         year: song.year, bitRate: song.bitRate, suffix: song.suffix, userRating: song.userRating,
                       };
-                      e.dataTransfer.setData('application/json', JSON.stringify({ type: 'song', track }));
+                      e.dataTransfer.setData('text/plain', JSON.stringify({ type: 'song', track }));
                     }}
                   >
                     <button

src/pages/Help.tsx

@@ -0,0 +1,108 @@
+import React, { useState } from 'react';
+import { ChevronDown, Rocket, Play, LibraryBig, Settings2, Radio, Wrench } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+interface FaqItem { q: string; a: string; }
+interface FaqSection { icon: React.ReactNode; title: string; items: FaqItem[]; }
+
+function AccordionItem({ q, a, open, onToggle }: FaqItem & { open: boolean; onToggle: () => void }) {
+  return (
+    <div className={`help-item${open ? ' help-item-open' : ''}`}>
+      <button className="help-question" onClick={onToggle} aria-expanded={open}>
+        <span>{q}</span>
+        <ChevronDown size={16} className="help-chevron" />
+      </button>
+      {open && <div className="help-answer">{a}</div>}
+    </div>
+  );
+}
+
+export default function Help() {
+  const { t } = useTranslation();
+  const [openKey, setOpenKey] = useState<string | null>(null);
+
+  const toggle = (key: string) => setOpenKey(prev => prev === key ? null : key);
+
+  const sections: FaqSection[] = [
+    {
+      icon: <Rocket size={18} />,
+      title: t('help.s1'),
+      items: [
+        { q: t('help.q1'), a: t('help.a1') },
+        { q: t('help.q2'), a: t('help.a2') },
+        { q: t('help.q3'), a: t('help.a3') },
+      ],
+    },
+    {
+      icon: <Play size={18} />,
+      title: t('help.s2'),
+      items: [
+        { q: t('help.q4'), a: t('help.a4') },
+        { q: t('help.q5'), a: t('help.a5') },
+        { q: t('help.q6'), a: t('help.a6') },
+        { q: t('help.q7'), a: t('help.a7') },
+        { q: t('help.q8'), a: t('help.a8') },
+      ],
+    },
+    {
+      icon: <LibraryBig size={18} />,
+      title: t('help.s3'),
+      items: [
+        { q: t('help.q9'),  a: t('help.a9') },
+        { q: t('help.q10'), a: t('help.a10') },
+        { q: t('help.q11'), a: t('help.a11') },
+      ],
+    },
+    {
+      icon: <Settings2 size={18} />,
+      title: t('help.s4'),
+      items: [
+        { q: t('help.q12'), a: t('help.a12') },
+        { q: t('help.q13'), a: t('help.a13') },
+        { q: t('help.q14'), a: t('help.a14') },
+        { q: t('help.q15'), a: t('help.a15') },
+      ],
+    },
+    {
+      icon: <Radio size={18} />,
+      title: t('help.s5'),
+      items: [
+        { q: t('help.q16'), a: t('help.a16') },
+        { q: t('help.q17'), a: t('help.a17') },
+      ],
+    },
+    {
+      icon: <Wrench size={18} />,
+      title: t('help.s6'),
+      items: [
+        { q: t('help.q18'), a: t('help.a18') },
+        { q: t('help.q19'), a: t('help.a19') },
+        { q: t('help.q20'), a: t('help.a20') },
+        { q: t('help.q21'), a: t('help.a21') },
+      ],
+    },
+  ];
+
+  return (
+    <div className="content-body animate-fade-in">
+      <h1 className="page-title" style={{ marginBottom: '2rem' }}>{t('help.title')}</h1>
+
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
+        {sections.map((section, si) => (
+          <section key={si} className="settings-section">
+            <div className="settings-section-header">
+              {section.icon}
+              <h2>{section.title}</h2>
+            </div>
+            <div className="help-list">
+              {section.items.map((item, ii) => {
+                const key = `${si}-${ii}`;
+                return <AccordionItem key={key} q={item.q} a={item.a} open={openKey === key} onToggle={() => toggle(key)} />;
+              })}
+            </div>
+          </section>
+        ))}
+      </div>
+    </div>
+  );
+}

src/pages/Playlists.tsx

@@ -34,7 +34,7 @@ export default function Playlists() {
       const data = await getPlaylist(id);
       const tracks = data.songs.map((s: any) => ({
         id: s.id, title: s.title, artist: s.artist, album: s.album,
-        albumId: s.albumId, duration: s.duration, coverArt: s.coverArt, track: s.track,
+        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,
       }));
       if (tracks.length > 0) {

src/pages/RandomAlbums.tsx

@@ -0,0 +1,94 @@
+import React, { useEffect, useState, useCallback, useRef } from 'react';
+import { RefreshCw } from 'lucide-react';
+import { getAlbumList, SubsonicAlbum } from '../api/subsonic';
+import AlbumCard from '../components/AlbumCard';
+import { useTranslation } from 'react-i18next';
+
+const INTERVAL_MS = 30000;
+const ALBUM_COUNT = 30;
+
+export default function RandomAlbums() {
+  const { t } = useTranslation();
+  const [albums, setAlbums] = useState<SubsonicAlbum[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [renderKey, setRenderKey] = useState(0);
+  const [progress, setProgress] = useState(0);
+  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const progressRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    try {
+      const data = await getAlbumList('random', ALBUM_COUNT);
+      setAlbums(data);
+      setRenderKey(k => k + 1);
+    } catch (e) {
+      console.error(e);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const startCycle = useCallback(() => {
+    // Clear existing timers
+    if (timerRef.current) clearInterval(timerRef.current);
+    if (progressRef.current) clearInterval(progressRef.current);
+
+    // Reset progress bar
+    setProgress(0);
+    const startTime = Date.now();
+    progressRef.current = setInterval(() => {
+      const elapsed = Date.now() - startTime;
+      setProgress(Math.min((elapsed / INTERVAL_MS) * 100, 100));
+    }, 100);
+
+    // Auto-refresh
+    timerRef.current = setInterval(() => {
+      load().then(() => startCycle());
+    }, INTERVAL_MS);
+  }, [load]);
+
+  useEffect(() => {
+    load().then(() => startCycle());
+    return () => {
+      if (timerRef.current) clearInterval(timerRef.current);
+      if (progressRef.current) clearInterval(progressRef.current);
+    };
+  }, [load, startCycle]);
+
+  const handleManualRefresh = () => {
+    load().then(() => startCycle());
+  };
+
+  return (
+    <div className="content-body animate-fade-in">
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '1.5rem' }}>
+        <h1 className="page-title" style={{ marginBottom: 0 }}>{t('randomAlbums.title')}</h1>
+        <button
+          className="btn btn-ghost"
+          onClick={handleManualRefresh}
+          disabled={loading}
+          data-tooltip={t('randomAlbums.refresh')}
+        >
+          <RefreshCw size={16} className={loading ? 'animate-spin' : ''} />
+          {t('randomAlbums.refresh')}
+        </button>
+      </div>
+
+      {/* Countdown progress bar */}
+      <div className="random-albums-progress">
+        <div className="random-albums-progress-fill" style={{ width: `${progress}%` }} />
+      </div>
+
+      {loading && albums.length === 0 ? (
+        <div style={{ display: 'flex', justifyContent: 'center', padding: '4rem' }}>
+          <div className="spinner" />
+        </div>
+      ) : (
+        <div className="album-grid-wrap animate-fade-in" key={renderKey}>
+          {albums.map(a => <AlbumCard key={a.id} album={a} />)}
+        </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, HandMetal, RefreshCw } from 'lucide-react';
+import { Play, Star, RefreshCw } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 
 function formatDuration(seconds: number): string {
@@ -78,9 +78,10 @@ export default function RandomMix() {
         </div>
       ) : (
         <div className="tracklist">
-          <div className="tracklist-header" style={{ gridTemplateColumns: '36px 1fr 1fr 60px 80px' }}>
+          <div className="tracklist-header" style={{ gridTemplateColumns: '36px 1fr 1fr 1fr 60px 80px' }}>
             <span></span>
             <span>{t('randomMix.trackTitle')}</span>
+            <span>{t('randomMix.trackArtist')}</span>
             <span>{t('randomMix.trackAlbum')}</span>
             <span style={{ textAlign: 'center' }}>{t('randomMix.trackFavorite')}</span>
             <span style={{ textAlign: 'right' }}>{t('randomMix.trackDuration')}</span>
@@ -90,7 +91,7 @@ export default function RandomMix() {
             <div
               key={song.id}
               className="track-row"
-              style={{ gridTemplateColumns: '36px 1fr 1fr 60px 80px' }}
+              style={{ gridTemplateColumns: '36px 1fr 1fr 1fr 60px 80px' }}
               onDoubleClick={() => playTrack(song, songs)}
               role="row"
               draggable
@@ -98,10 +99,10 @@ export default function RandomMix() {
                 e.dataTransfer.effectAllowed = 'copy';
                 const track = {
                   id: song.id, title: song.title, artist: song.artist, album: song.album,
-                  albumId: song.albumId, duration: song.duration, coverArt: song.coverArt, track: song.track,
+                  albumId: song.albumId, artistId: song.artistId, duration: song.duration, coverArt: song.coverArt, track: song.track,
                   year: song.year, bitRate: song.bitRate, suffix: song.suffix, userRating: song.userRating,
                 };
-                e.dataTransfer.setData('application/json', JSON.stringify({ type: 'song', track }));
+                e.dataTransfer.setData('text/plain', JSON.stringify({ type: 'song', track }));
               }}
             >
               <button
@@ -115,7 +116,10 @@ export default function RandomMix() {
 
               <div className="track-info">
                 <span className="track-title" data-tooltip={song.title}>{song.title}</span>
-                <span className="track-artist">{song.artist}</span>
+              </div>
+
+              <div className="track-artist-cell">
+                <span className="track-artist" data-tooltip={song.artist}>{song.artist}</span>
               </div>
 
               <div className="track-info">
@@ -129,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)' }}
                 >
-                  <HandMetal size={14} fill={starredSongs.has(song.id) ? "currentColor" : "none"} />
+                  <Star size={14} fill={starredSongs.has(song.id) ? "currentColor" : "none"} />
                 </button>
               </div>
 

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

@@ -1,8 +1,9 @@
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import {
-  Wifi, WifiOff, Globe, Music2, Sliders, LogOut, CheckCircle2, FolderOpen, Palette, Server, Plus, Trash2, Eye, EyeOff
+  Wifi, WifiOff, Globe, Music2, Sliders, LogOut, CheckCircle2, FolderOpen, Palette, Server, Plus, Trash2, Eye, EyeOff, Info, ExternalLink
 } from 'lucide-react';
+import { open as openUrl } from '@tauri-apps/plugin-shell';
 import { useAuthStore, ServerProfile } from '../store/authStore';
 import { useThemeStore } from '../store/themeStore';
 import { pingWithCredentials } from '../api/subsonic';
@@ -178,8 +179,14 @@ export default function Settings() {
               onChange={(e) => theme.setTheme(e.target.value as any)}
               aria-label={t('settings.theme')}
             >
-              <option value="mocha">Catppuccin Mocha (Dark)</option>
-              <option value="latte">Catppuccin Latte (Light)</option>
+              <option value="mocha">Catppuccin Mocha</option>
+              <option value="macchiato">Catppuccin Macchiato</option>
+              <option value="frappe">Catppuccin Frappé</option>
+              <option value="latte">Catppuccin Latte</option>
+              <option value="nord">Nord · Polar Night</option>
+              <option value="nord-snowstorm">Nord · Snowstorm</option>
+              <option value="nord-frost">Nord · Frost</option>
+              <option value="nord-aurora">Nord · Aurora</option>
             </select>
           </div>
         </div>
@@ -352,6 +359,60 @@ export default function Settings() {
           <LogOut size={16} /> {t('settings.logout')}
         </button>
       </section>
+
+      {/* About */}
+      <section className="settings-section">
+        <div className="settings-section-header">
+          <Info size={18} />
+          <h2>{t('settings.aboutTitle')}</h2>
+        </div>
+        <div className="settings-card settings-about">
+          <div className="settings-about-header">
+            <img src="/logo.png" width={52} height={52} alt="Psysonic" style={{ borderRadius: 14 }} />
+            <div>
+              <div style={{ fontFamily: 'var(--font-display)', fontSize: '1.25rem', fontWeight: 700, color: 'var(--text-primary)' }}>
+                Psysonic
+              </div>
+              <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 2 }}>
+                {t('settings.aboutVersion')} 1.0.12
+              </div>
+            </div>
+          </div>
+
+          <p style={{ fontSize: 13, color: 'var(--text-secondary)', lineHeight: 1.6, margin: '1rem 0 0.5rem' }}>
+            {t('settings.aboutDesc')}
+          </p>
+          <p style={{ fontSize: 12, color: 'var(--text-muted)', lineHeight: 1.6, margin: '0.5rem 0' }}>
+            {t('settings.aboutFeatures')}
+          </p>
+
+          <div className="divider" style={{ margin: '1rem 0' }} />
+
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem', fontSize: 13 }}>
+            <div style={{ display: 'flex', gap: '0.5rem' }}>
+              <span style={{ color: 'var(--text-muted)', minWidth: 56 }}>{t('settings.aboutLicense')}</span>
+              <span style={{ color: 'var(--text-secondary)' }}>{t('settings.aboutLicenseText')}</span>
+            </div>
+            <div style={{ display: 'flex', gap: '0.5rem' }}>
+              <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
+            className="btn btn-ghost"
+            style={{ marginTop: '1.25rem', alignSelf: 'flex-start' }}
+            onClick={() => openUrl('https://github.com/Psychotoxical/psysonic')}
+          >
+            <ExternalLink size={14} />
+            {t('settings.aboutRepo')}
+          </button>
+        </div>
+      </section>
     </div>
   );
 }

src/store/playerStore.ts

@@ -10,6 +10,7 @@ export interface Track {
   artist: string;
   album: string;
   albumId: string;
+  artistId?: string;
   duration: number;
   coverArt?: string;
   track?: number;
@@ -25,13 +26,12 @@ 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,36 +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 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) {
@@ -82,19 +96,27 @@ function clearProgress() {
   }
 }
 
-// Helper to debounce or fire queue syncs
+// 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 ─────────────────────────────────────────────────────────
 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>()(
@@ -105,10 +127,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,
@@ -116,246 +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, currentTime: 0 });
-  },
-
-  playTrack: (track, queue) => {
-    const state = get();
-    // Stop current
-    state.howl?.unload();
-    clearProgress();
-
-    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);
-
-        set({ scrobbled: false });
-        progressInterval = setInterval(() => {
-          const h = get().howl;
-          if (!h) 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 });
-
-          // 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);
-      },
-      onend: () => {
+      // ── stop ────────────────────────────────────────────────────────────────
+      stop: () => {
+        destroyHowl(activeHowl);
+        activeHowl = null;
         clearProgress();
-        set({ isPlaying: false, progress: 0, currentTime: 0 });
-        const { repeatMode, currentTrack, queue } = get();
-        if (repeatMode === 'one' && currentTrack) {
-          get().playTrack(currentTrack, queue);
-        } else {
-          get().next();
-        }
+        if (seekDebounce) { clearTimeout(seekDebounce); seekDebounce = null; }
+        set({ isPlaying: false, progress: 0, buffered: 0, currentTime: 0, howl: null });
       },
-      onstop: () => {
+
+      // ── 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;
+
+        // Fully destroy the previous Howl — listeners first, then audio resources.
+        destroyHowl(activeHowl);
+        activeHowl = null;
+        clearProgress();
+        if (seekDebounce) { clearTimeout(seekDebounce); seekDebounce = null; }
+
+        const state = get();
+        const newQueue = queue ?? state.queue;
+        const idx = newQueue.findIndex(t => t.id === track.id);
+
+        const howl = new Howl({
+          src: [buildStreamUrl(track.id)],
+          html5: true,
+          volume: state.volume,
+        });
+        activeHowl = howl;
+
+        // 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 (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 });
       },
-    });
 
-    howl.play();
-    set({ currentTrack: track, queue: newQueue, queueIndex: idx >= 0 ? idx : 0, howl, progress: 0, currentTime: 0 });
-    syncQueueToServer(newQueue, track, 0);
-  },
-
-  pause: () => {
-    get().howl?.pause();
-    clearProgress();
-    set({ isPlaying: false });
-  },
-
-  resume: () => {
-    const { howl, currentTrack } = get();
-    if (!howl || !currentTrack) 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);
-    howl.seek(time);
-    set({ progress, currentTime: time });
-  },
-
-  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, 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;
-          }
+      resume: () => {
+        const { currentTrack, queue, currentTime } = get();
+        if (!currentTrack) return;
+        if (activeHowl) {
+          activeHowl.play();
+          set({ isPlaying: true });
+          return;
         }
-        
-        set({ 
-          queue: mappedTracks, 
-          queueIndex,
-          currentTrack,
-          // Convert position from ms to s
-          currentTime: q.position ? q.position / 1000 : 0
+        // Cold start after app relaunch — Howl was not persisted.
+        resumeFromTime = currentTime > 0 ? currentTime : null;
+        get().playTrack(currentTrack, queue);
+      },
+
+      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();
+      },
+
+      // ── 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 });
+        }
+      },
+
+      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/store/themeStore.ts

@@ -1,7 +1,7 @@
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 
-type Theme = 'mocha' | 'latte';
+type Theme = 'mocha' | 'macchiato' | 'frappe' | 'latte' | 'nord' | 'nord-snowstorm' | 'nord-frost' | 'nord-aurora';
 
 interface ThemeState {
   theme: Theme;

src/styles/components.css

@@ -4,14 +4,14 @@
 .hero {
   position: relative;
   width: 100%;
-  height: 300px;
+  height: 360px;
   overflow: hidden;
   flex-shrink: 0;
 }
 
 .hero-placeholder {
   width: 100%;
-  height: 300px;
+  height: 360px;
   background: linear-gradient(135deg, var(--ctp-surface0), var(--ctp-mantle));
   flex-shrink: 0;
 }
@@ -21,23 +21,47 @@
   inset: 0;
   background-size: cover;
   background-position: center;
-  transition: transform 8s ease;
+  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 {
+  position: absolute;
+  bottom: var(--space-4);
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 6px;
+  z-index: 10;
+}
+.hero-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-full);
+  background: rgba(255, 255, 255, 0.35);
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+.hero-dot:hover:not(.hero-dot-active) { background: rgba(255, 255, 255, 0.6); }
+.hero-dot-active { width: 24px; background: rgba(255, 255, 255, 0.9); }
+
 .hero-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(
     to right,
-    rgba(30, 30, 46, 0.92) 0%,
-    rgba(30, 30, 46, 0.6) 50%,
-    rgba(30, 30, 46, 0.3) 100%
+    rgba(0, 0, 0, 0.78) 0%,
+    rgba(0, 0, 0, 0.45) 50%,
+    rgba(0, 0, 0, 0.18) 100%
   ),
   linear-gradient(
     to top,
-    rgba(30, 30, 46, 0.95) 0%,
+    rgba(0, 0, 0, 0.88) 0%,
     transparent 60%
   );
 }
@@ -52,8 +76,8 @@
 }
 
 .hero-cover {
-  width: 180px;
-  height: 180px;
+  width: 220px;
+  height: 220px;
   border-radius: var(--radius-md);
   box-shadow: 0 4px 20px rgba(0,0,0,0.6);
   object-fit: cover;
@@ -72,7 +96,7 @@
   font-weight: 600;
   letter-spacing: 0.12em;
   text-transform: uppercase;
-  color: var(--accent);
+  color: var(--ctp-lavender);
   margin-bottom: var(--space-2);
 }
 
@@ -80,16 +104,16 @@
   font-family: var(--font-display);
   font-size: clamp(24px, 3vw, 36px);
   font-weight: 700;
-  color: var(--text-primary);
+  color: #ffffff;
   margin-bottom: var(--space-1);
   line-height: 1.2;
-  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
+  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
   max-width: 500px;
 }
 
 .hero-artist {
   font-size: 16px;
-  color: var(--text-secondary);
+  color: rgba(255, 255, 255, 0.72);
   margin-bottom: var(--space-3);
 }
 
@@ -189,6 +213,19 @@
   color: var(--text-muted);
   box-shadow: var(--shadow-sm);
 }
+.artist-card-avatar-initial {
+  background: var(--bg-card);
+  border: 2px solid;
+  box-shadow: none;
+  overflow: hidden;
+}
+.artist-card-avatar-initial span {
+  font-size: 2.5rem;
+  font-weight: 800;
+  font-family: var(--font-display);
+  line-height: 1;
+  user-select: none;
+}
 .artist-card-name {
   font-weight: 600;
   font-size: 14px;
@@ -269,6 +306,20 @@
   grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
   gap: var(--space-4);
 }
+
+.random-albums-progress {
+  height: 2px;
+  background: var(--border-subtle);
+  border-radius: var(--radius-full);
+  margin-bottom: 1.5rem;
+  overflow: hidden;
+}
+.random-albums-progress-fill {
+  height: 100%;
+  background: var(--accent);
+  border-radius: var(--radius-full);
+  transition: width 0.1s linear;
+}
 @media (min-width: 1024px) {
   .album-grid-wrap { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
 }
@@ -428,12 +479,12 @@
 .album-detail-hero {
   display: flex;
   gap: var(--space-6);
-  align-items: flex-end;
+  align-items: flex-start;
   padding: var(--space-4) 0 var(--space-6);
 }
 .album-detail-cover {
-  width: 180px;
-  height: 180px;
+  width: clamp(120px, 15vw, 200px);
+  height: clamp(120px, 15vw, 200px);
   border-radius: var(--radius-lg);
   object-fit: cover;
   box-shadow: var(--shadow-lg);
@@ -447,8 +498,9 @@
   font-size: 48px;
   color: var(--text-muted);
 }
-.album-detail-title { font-family: var(--font-display); font-size: 32px; font-weight: 800; color: var(--text-primary); line-height: 1.1; margin: var(--space-2) 0 var(--space-1); }
-.album-detail-artist { font-size: 16px; color: var(--accent); font-weight: 600; }
+.album-detail-meta { min-width: 0; flex: 1; }
+.album-detail-title { font-family: var(--font-display); font-size: clamp(20px, 3vw, 32px); font-weight: 800; color: var(--text-primary); line-height: 1.1; margin: var(--space-2) 0 var(--space-1); overflow-wrap: break-word; }
+.album-detail-artist { font-size: clamp(13px, 1.5vw, 16px); color: var(--accent); font-weight: 600; }
 .album-detail-artist-link {
   background: none;
   border: none;
@@ -464,15 +516,62 @@
   color: var(--text-primary);
   text-decoration: underline;
 }
-.album-detail-info { display: flex; gap: var(--space-3); color: var(--text-muted); font-size: 13px; margin: var(--space-2) 0 var(--space-4); }
-.album-detail-actions { display: flex; gap: var(--space-3); }
+.album-detail-info { display: flex; flex-wrap: wrap; gap: var(--space-2); color: var(--text-muted); font-size: 13px; margin: var(--space-2) 0 var(--space-4); }
+.album-detail-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; row-gap: var(--space-2); }
+
+.download-hint {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 11px;
+  color: var(--text-secondary);
+  background: rgba(203, 166, 247, 0.08);
+  border: 1px solid rgba(203, 166, 247, 0.2);
+  border-radius: var(--radius-full);
+  padding: 3px 10px 3px 8px;
+  cursor: default;
+  white-space: nowrap;
+}
+
+.download-progress-wrap {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: 0 var(--space-3);
+  height: 36px;
+  border-radius: var(--radius-md);
+  background: var(--surface-1);
+  border: 1px solid var(--border);
+  min-width: 180px;
+  color: var(--text-secondary);
+  font-size: 12px;
+}
+.download-progress-bar {
+  flex: 1;
+  height: 4px;
+  background: var(--surface-2);
+  border-radius: 2px;
+  overflow: hidden;
+}
+.download-progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, var(--ctp-mauve), var(--ctp-blue));
+  border-radius: 2px;
+  transition: width 0.2s ease;
+}
+.download-progress-pct {
+  min-width: 28px;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
 
 /* ─ Tracklist ─ */
 .tracklist { padding: 0 var(--space-6) var(--space-6); }
 .tracklist-header {
   display: grid;
-  grid-template-columns: 36px minmax(120px, 3fr) minmax(100px, 2fr) 70px 80px 60px;
+  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;
@@ -482,18 +581,62 @@
   border-bottom: 1px solid var(--border-subtle);
   margin-bottom: var(--space-2);
 }
+.tracklist-header.tracklist-va {
+  grid-template-columns: 36px minmax(100px, 2fr) minmax(80px, 1.2fr) 70px 80px 60px auto;
+}
 
 .track-row {
   display: grid;
-  grid-template-columns: 36px minmax(120px, 3fr) minmax(100px, 2fr) 70px 80px 60px;
+  grid-template-columns: 36px minmax(100px, 3fr) 70px 80px 60px auto;
   gap: var(--space-3);
-  align-items: center;
+  align-items: start;
   padding: var(--space-2) var(--space-3);
   border-radius: var(--radius-md);
   cursor: pointer;
   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;
+}
+
+.tracklist-total {
+  display: grid;
+  grid-template-columns: 36px minmax(100px, 3fr) 70px 80px 60px auto;
+  gap: var(--space-3);
+  border-top: 1px solid var(--border-subtle);
+  padding: var(--space-2) var(--space-3);
+  margin-top: var(--space-1);
+}
+.tracklist-total.tracklist-va {
+  grid-template-columns: 36px minmax(100px, 2fr) minmax(80px, 1.2fr) 70px 80px 60px auto;
+}
+.tracklist-total-label {
+  grid-column: 1 / 5;
+  text-align: right;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+.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 */
 .disc-header {
@@ -515,7 +658,8 @@
 
 .track-num { font-size: 13px; color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; }
 .track-info { min-width: 0; }
-.track-title { font-size: 13px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.track-title { font-size: 13px; font-weight: 500; color: var(--text-primary); overflow-wrap: break-word; word-break: break-word; }
+.track-artist-cell { min-width: 0; display: flex; align-items: flex-start; }
 .track-artist { font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .track-codec {
   display: block;
@@ -632,6 +776,8 @@
 .artist-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); transition: background var(--transition-fast); width: 100%; text-align: left; }
 .artist-row:hover { background: var(--bg-hover); }
 .artist-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--accent-dim); display: flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0; }
+.artist-avatar-initial { background: var(--bg-card); border: 2px solid; }
+.artist-avatar-initial span { font-size: 1rem; font-weight: 700; font-family: var(--font-display); line-height: 1; user-select: none; }
 .artist-name { font-size: 14px; font-weight: 500; color: var(--text-primary); }
 .artist-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
 
@@ -647,7 +793,20 @@
 .settings-section-header { display: flex; align-items: center; gap: var(--space-2); color: var(--accent); margin-bottom: var(--space-3); }
 .settings-section-header h2 { font-size: 16px; font-weight: 600; color: var(--text-primary); }
 .settings-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-5); }
+
+/* ─ Help Page ─ */
+.help-list { display: flex; flex-direction: column; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; }
+.help-item { border-bottom: 1px solid var(--border-subtle); }
+.help-item:last-child { border-bottom: none; }
+.help-question { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); width: 100%; padding: var(--space-4) var(--space-5); text-align: left; font-size: 14px; font-weight: 500; color: var(--text-primary); background: var(--bg-card); transition: background var(--transition-fast); }
+.help-question:hover { background: var(--bg-hover); }
+.help-item-open .help-question { color: var(--accent); background: var(--bg-hover); }
+.help-chevron { flex-shrink: 0; color: var(--text-muted); transition: transform 0.2s ease; }
+.help-item-open .help-chevron { transform: rotate(180deg); color: var(--accent); }
+.help-answer { padding: var(--space-3) var(--space-5) var(--space-5); font-size: 13px; color: var(--text-secondary); line-height: 1.65; background: var(--bg-hover); border-top: 1px solid var(--border-subtle); }
 .settings-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
+.settings-about { display: flex; flex-direction: column; }
+.settings-about-header { display: flex; align-items: center; gap: var(--space-4); }
 
 /* Toggle switch */
 .toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; cursor: pointer; }
@@ -737,19 +896,19 @@
 .empty-state { text-align: center; padding: var(--space-10); color: var(--text-muted); }
 
 /* ─────────────────────────────────────────
-   Fullscreen Player
+   Fullscreen Player — Ambient Stage
 ──────────────────────────────────────────── */
 .fs-player {
   position: fixed;
   inset: 0;
   z-index: 9000;
   display: flex;
-  flex-direction: column;
+  align-items: center;
+  justify-content: center;
   overflow: hidden;
   will-change: transform;
   contain: layout style paint;
   animation: fsIn 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
-  /* Solid base — guarantees nothing shines through, even at edges */
   background: #0e0e1a;
 }
 
@@ -758,16 +917,50 @@
   to   { transform: translateY(0);    opacity: 1; }
 }
 
-/* Blurred background — GPU layer, will not repaint with React re-renders */
+/* ── Drifting color orbs ── */
+@keyframes orb-a {
+  0%   { transform: translate(0px,   0px)   scale(1);    }
+  33%  { transform: translate(90px, -50px)  scale(1.12); }
+  66%  { transform: translate(-40px, 70px)  scale(0.94); }
+  100% { transform: translate(0px,   0px)   scale(1);    }
+}
+@keyframes orb-b {
+  0%   { transform: translate(0px,  0px)   scale(1);    }
+  33%  { transform: translate(-70px, 40px) scale(1.08); }
+  66%  { transform: translate(50px, -60px) scale(1.14); }
+  100% { transform: translate(0px,  0px)   scale(1);    }
+}
+@keyframes orb-c {
+  0%   { transform: translate(0px, 0px)   scale(1);   }
+  50%  { transform: translate(60px, 50px) scale(0.9); }
+  100% { transform: translate(0px, 0px)   scale(1);   }
+}
+
+/* ── Cover breathing ── */
+@keyframes cover-breathe {
+  0%, 100% { transform: scale(1); }
+  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: -10%;
+  inset: -15%;
   background-size: cover;
   background-position: center;
-  filter: blur(50px) brightness(0.28) saturate(1.6);
-  transform: scale(1.2) translateZ(0);
+  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: auto;
+  will-change: opacity;
   pointer-events: none;
   transition: opacity 700ms ease;
 }
@@ -775,17 +968,42 @@
 .fs-bg-overlay {
   position: absolute;
   inset: 0;
-  background: linear-gradient(
-    180deg,
-    rgba(17, 17, 27, 0.45) 0%,
-    rgba(17, 17, 27, 0.75) 65%,
-    rgba(17, 17, 27, 0.96) 100%
-  );
+  background: rgba(0, 0, 0, 0.45);
   z-index: 0;
   pointer-events: none;
 }
 
-/* Close button */
+/* ── Drifting color orbs ── */
+.fs-orb {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(110px);
+  opacity: 0.22;
+  pointer-events: none;
+  z-index: 0;
+}
+.fs-orb-1 {
+  background: var(--ctp-mauve);
+  width: 700px; height: 700px;
+  top: -220px; left: -180px;
+  animation: orb-a 20s ease-in-out infinite;
+}
+.fs-orb-2 {
+  background: var(--ctp-blue);
+  width: 600px; height: 600px;
+  bottom: -180px; right: -120px;
+  animation: orb-b 26s ease-in-out infinite;
+  animation-delay: -9s;
+}
+.fs-orb-3 {
+  background: var(--ctp-lavender);
+  width: 480px; height: 480px;
+  top: 35%; right: 5%;
+  animation: orb-c 17s ease-in-out infinite;
+  animation-delay: -14s;
+}
+
+/* ── Close button ── */
 .fs-close {
   position: absolute;
   top: 20px;
@@ -796,7 +1014,7 @@
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.08);
   backdrop-filter: blur(8px);
-  color: var(--text-secondary);
+  color: rgba(255,255,255,0.7);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -805,46 +1023,43 @@
 }
 .fs-close:hover {
   background: rgba(255, 255, 255, 0.16);
-  color: var(--text-primary);
+  color: #ffffff;
   transform: translateY(-1px);
 }
 
-/* ── Main layout: cover left, upcoming right ── */
-.fs-layout {
+/* ── Center stage ── */
+.fs-stage {
   position: relative;
   z-index: 1;
-  display: flex;
-  flex: 1;
-  align-items: flex-start;
-  justify-content: center;
-  gap: clamp(24px, 4vw, 60px);
-  padding: clamp(52px, 8vh, 90px) clamp(32px, 5vw, 80px) 12px;
-  min-height: 0;
-  overflow: visible;
-}
-
-/* Left column */
-.fs-left {
   display: flex;
   flex-direction: column;
   align-items: center;
-  flex-shrink: 0;
+  gap: 18px;
+  width: min(440px, 88vw);
+  padding: 16px 0;
 }
 
-/* Cover: explicit size, same formula as .fs-right */
+/* Artist name — above cover */
+.fs-artist {
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--ctp-lavender);
+  margin: 0;
+  opacity: 0.9;
+}
+
+/* Cover — breathes slowly */
 .fs-cover-wrap {
-  position: relative;
-  width: clamp(240px, min(38vw, 50vh), 500px);
+  width: clamp(300px, 30vw, 480px);
+  max-height: calc(100vh - 300px);
   aspect-ratio: 1 / 1;
   border-radius: var(--radius-xl);
   overflow: hidden;
-  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255,255,255,0.06);
+  box-shadow: none;
   flex-shrink: 0;
-  transition: transform var(--transition-slow), box-shadow var(--transition-slow);
-}
-.fs-cover-wrap:hover {
-  transform: scale(1.015);
-  box-shadow: 0 32px 100px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.1);
+  animation: cover-breathe 9s ease-in-out infinite;
 }
 .fs-cover {
   width: 100%;
@@ -853,6 +1068,8 @@
   display: block;
 }
 .fs-cover-placeholder {
+  width: 100%;
+  height: 100%;
   background: var(--ctp-surface0);
   display: flex;
   align-items: center;
@@ -860,142 +1077,37 @@
   color: var(--text-muted);
 }
 
-/* Right column: same explicit width+height as cover */
-.fs-right {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  flex-shrink: 0;
-  width: clamp(240px, min(38vw, 50vh), 500px);
-  height: clamp(240px, min(38vw, 50vh), 500px);
-  overflow: hidden;
-}
-.fs-upcoming-title {
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  color: var(--text-muted);
-  margin: 0;
-  flex-shrink: 0;
-}
-.fs-upcoming-list {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  overflow-y: auto;
-  flex: 1;
-  min-height: 0;
-}
-.fs-upcoming-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 10px 14px;
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  width: 100%;
-  text-align: left;
-  transition: background var(--transition-fast);
-  background: transparent;
-  flex-shrink: 0;
-}
-.fs-upcoming-item:hover {
-  background: rgba(255,255,255,0.07);
-}
-.fs-upcoming-art {
-  width: 44px;
-  height: 44px;
-  border-radius: var(--radius-sm);
-  object-fit: cover;
-  flex-shrink: 0;
-}
-.fs-upcoming-placeholder {
-  background: var(--ctp-surface1);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--text-muted);
-}
-.fs-upcoming-info {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-}
-.fs-upcoming-name {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--text-primary);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.fs-upcoming-artist {
-  font-size: 12px;
-  color: var(--text-muted);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.fs-upcoming-dur {
-  font-size: 12px;
-  color: var(--text-muted);
-  font-variant-numeric: tabular-nums;
-  flex-shrink: 0;
-}
-
-/* ── Footer: track info + progress + controls (centered, full width) ── */
-.fs-footer {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  flex: 1;
-  width: 100%;
-  padding: 0 clamp(40px, 8vw, 120px) 48px;
-}
-
-.fs-footer-main {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-start;
-  width: 100%;
-  gap: 16px;
-  margin-top: clamp(20px, 4vh, 80px);
-  margin-bottom: auto; /* Pushes controls down to bottom */
-}
-
-/* Track metadata */
+/* Track info — below cover */
 .fs-track-info {
   text-align: center;
   width: 100%;
 }
-.fs-title {
+.fs-title-wrap {
   font-family: var(--font-display);
-  font-size: clamp(18px, 2.2vw, 28px);
+  font-size: clamp(20px, 3vw, 32px);
   font-weight: 800;
-  color: var(--text-primary);
-  margin: 0 0 4px;
-  line-height: 1.2;
+  color: #ffffff;
+  margin: 0 0 6px;
+  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)); }
+}
+.fs-album {
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.5);
+  margin: 0;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.fs-artist {
-  font-size: clamp(13px, 1.2vw, 16px);
-  font-weight: 600;
-  color: var(--accent);
-  margin: 0;
-}
-.fs-album {
-  font-size: 13px;
-  color: var(--text-secondary);
-  margin: 3px 0 0;
-}
 .fs-codec {
   display: inline-block;
   font-size: 10px;
@@ -1005,21 +1117,11 @@
   border: 1px solid rgba(255,255,255,0.1);
   padding: 2px 8px;
   border-radius: var(--radius-full);
-  color: var(--text-muted);
-  margin-top: 6px;
+  color: rgba(255, 255, 255, 0.35);
+  margin-top: 8px;
 }
 
-/* Progress + volume container */
-.fs-bottom {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  width: 100%;
-  max-width: 700px;
-  align-items: center;
-}
-
-/* Progress */
+/* Progress bar */
 .fs-progress-wrap {
   display: flex;
   align-items: center;
@@ -1027,8 +1129,8 @@
   width: 100%;
 }
 .fs-time {
-  font-size: 12px;
-  color: var(--text-muted);
+  font-size: 11px;
+  color: rgba(255,255,255,0.4);
   font-variant-numeric: tabular-nums;
   min-width: 36px;
   text-align: center;
@@ -1039,8 +1141,14 @@
 }
 .fs-progress-bar input[type="range"] {
   width: 100%;
-  height: 4px;
-  background: linear-gradient(to right, var(--ctp-mauve) var(--pct), rgba(255,255,255,0.12) var(--pct));
+  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%)
+  );
   border-radius: 2px;
   cursor: pointer;
   appearance: none;
@@ -1049,105 +1157,50 @@
 .fs-progress-bar input[type="range"]::-webkit-slider-thumb {
   appearance: none;
   -webkit-appearance: none;
-  width: 14px;
-  height: 14px;
+  width: 13px;
+  height: 13px;
   border-radius: 50%;
-  background: white;
+  background: #ffffff;
   cursor: pointer;
-  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
+  box-shadow: 0 1px 6px rgba(0,0,0,0.6);
   transition: transform var(--transition-fast);
 }
-.fs-progress-bar input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.25); }
+.fs-progress-bar input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.3); }
 
-
-/* Controls: flat centered flex row */
+/* Transport controls */
 .fs-controls {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 16px;
+  gap: 14px;
 }
-
 .fs-btn {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 48px;
-  height: 48px;
+  width: 36px;
+  height: 36px;
   border-radius: 50%;
-  color: var(--text-secondary);
+  color: rgba(255,255,255,0.6);
   cursor: pointer;
   transition: all var(--transition-fast);
   background: transparent;
 }
-.fs-btn:hover { color: var(--text-primary); background: rgba(255,255,255,0.08); }
-.fs-btn.active { color: var(--accent); }
-.fs-btn-sm { width: 36px; height: 36px; }
+.fs-btn:hover { color: #ffffff; background: rgba(255,255,255,0.1); }
+.fs-btn.active { color: var(--ctp-lavender); }
+.fs-btn-sm { width: 28px; height: 28px; }
 .fs-btn-play {
-  width: 68px;
-  height: 68px;
-  background: white;
-  color: #1e1e2e;
-  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
+  width: 54px;
+  height: 54px;
+  background: linear-gradient(135deg, var(--ctp-mauve), var(--ctp-lavender));
+  color: var(--ctp-crust);
+  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
 }
 .fs-btn-play:hover {
-  background: var(--ctp-lavender);
-  color: #1e1e2e;
-  transform: scale(1.06);
-  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
-}
-
-
-@keyframes fsIn {
-  from { transform: translateY(100%); opacity: 0; }
-  to   { transform: translateY(0);    opacity: 1; }
-}
-
-/* Blurred cover background */
-.fs-bg {
-  position: absolute;
-  inset: -10%;
-  background-size: cover;
-  background-position: center;
-  filter: blur(40px) brightness(0.35) saturate(1.4);
-  transform: scale(1.15);
-  z-index: 0;
-}
-
-.fs-bg-overlay {
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(
-    160deg,
-    rgba(17, 17, 27, 0.55) 0%,
-    rgba(17, 17, 27, 0.85) 60%,
-    rgba(17, 17, 27, 0.97) 100%
-  );
-  z-index: 0;
-}
-
-/* Close button */
-.fs-close {
-  position: absolute;
-  top: 20px;
-  left: 24px;
-  z-index: 10;
-  width: 44px;
-  height: 44px;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.08);
-  backdrop-filter: blur(8px);
-  color: var(--text-secondary);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all var(--transition-fast);
-  cursor: pointer;
-}
-.fs-close:hover {
-  background: rgba(255, 255, 255, 0.16);
-  color: var(--text-primary);
-  transform: translateY(-1px);
+  background: linear-gradient(135deg, var(--ctp-lavender), var(--ctp-mauve));
+  color: var(--ctp-crust);
+  transform: scale(1.07);
+  box-shadow: 0 10px 34px rgba(0,0,0,0.6);
 }
 
 /* Chat */

src/styles/layout.css

@@ -29,7 +29,6 @@
   background: var(--accent);
 }
 
-.resizer-sidebar { left: calc(var(--sidebar-width) - 3px); }
 .resizer-queue { right: calc(var(--queue-width) - 3px); }
 
 /* ─── Sidebar ─── */
@@ -164,6 +163,70 @@
   color: var(--text-primary);
 }
 
+/* ─── Update Toast ─── */
+@keyframes update-toast-in {
+  from { opacity: 0; transform: translateY(6px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.update-toast {
+  margin: 0 var(--space-1) var(--space-2);
+  padding: var(--space-3) var(--space-3);
+  border-radius: var(--radius-md);
+  background: var(--accent-dim);
+  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  animation: update-toast-in 0.35s ease both;
+}
+
+.update-toast-header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  color: var(--accent);
+}
+
+.update-toast-label {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--accent);
+}
+
+.update-toast-version {
+  font-size: 12px;
+  color: var(--text-secondary);
+  padding-left: 22px;
+}
+
+.update-toast-link {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--accent);
+  text-decoration: none;
+  padding-left: 22px;
+  opacity: 0.8;
+  transition: opacity var(--transition-fast);
+}
+
+.update-toast-link:hover {
+  opacity: 1;
+  text-decoration: underline;
+}
+
+.update-toast-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-2) 0;
+  color: var(--accent);
+  animation: update-toast-in 0.35s ease both;
+  cursor: default;
+}
+
 /* ─── Main Content ─── */
 .main-content {
   grid-area: main;
@@ -306,13 +369,14 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: var(--space-2);
+  gap: 2px;
+  padding: 12px 0;
 }
 
 .player-buttons {
   display: flex;
   align-items: center;
-  gap: var(--space-2);
+  gap: var(--space-3);
 }
 
 .player-btn {
@@ -322,29 +386,31 @@
   width: 36px;
   height: 36px;
   border-radius: 50%;
-  color: var(--text-secondary);
+  color: var(--text-muted);
   transition: all var(--transition-fast);
 }
 
 .player-btn:hover {
   background: var(--bg-hover);
   color: var(--text-primary);
+  transform: scale(1.12);
 }
 
 .player-btn-primary {
-  width: 42px;
-  height: 42px;
-  background: var(--text-primary);
-  color: var(--bg-app);
+  width: 48px;
+  height: 48px;
+  background: linear-gradient(135deg, var(--ctp-mauve), var(--ctp-lavender));
+  color: var(--ctp-crust);
   border-radius: 50%;
-  box-shadow: var(--shadow-sm);
+  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
+  flex-shrink: 0;
 }
 
 .player-btn-primary:hover {
-  background: var(--accent);
+  background: linear-gradient(135deg, var(--ctp-lavender), var(--ctp-mauve));
   color: var(--ctp-crust);
-  transform: scale(1.05);
-  box-shadow: var(--shadow-glow);
+  transform: scale(1.07);
+  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4), var(--shadow-glow);
 }
 
 .player-progress {
@@ -441,23 +507,26 @@
 }
 
 .queue-current-track {
-  padding: var(--space-4);
+  padding: var(--space-3) var(--space-4);
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  align-items: center;
   gap: var(--space-3);
   flex-shrink: 0;
+  border-bottom: 1px solid var(--border-subtle);
 }
 
 .queue-current-cover {
-  width: 100%;
-  aspect-ratio: 1 / 1;
+  width: 72px;
+  height: 72px;
+  flex-shrink: 0;
   border-radius: var(--radius-md);
   overflow: hidden;
   background: var(--bg-surface);
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
 }
 
 .queue-current-cover img {
@@ -474,10 +543,12 @@
   display: flex;
   flex-direction: column;
   gap: 2px;
+  min-width: 0;
+  flex: 1;
 }
 
 .queue-current-info h3 {
-  font-size: 16px;
+  font-size: 13px;
   font-weight: 700;
   margin: 0;
   color: var(--text-primary);
@@ -501,7 +572,7 @@
 }
 
 .queue-divider {
-  padding: var(--space-4) var(--space-5) 0;
+  padding: var(--space-3) var(--space-4) 0;
   flex-shrink: 0;
 }
 
@@ -528,6 +599,8 @@
   transition: background var(--transition-fast);
   color: var(--text-secondary);
 }
+/* Prevent child elements from stealing dragenter/dragleave events */
+.queue-item > * { pointer-events: none; }
 
 .queue-item:hover {
   background: var(--bg-hover);

src/styles/theme.css

@@ -56,6 +56,106 @@
   --danger:        var(--ctp-red);
 }
 
+/* ─── Catppuccin Macchiato Variables ─── */
+[data-theme='macchiato'] {
+  color-scheme: dark;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23b8c0e0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+  --ctp-rosewater: #f4dbd6;
+  --ctp-flamingo:  #f0c6c6;
+  --ctp-pink:      #f5bde6;
+  --ctp-mauve:     #c6a0f6;
+  --ctp-red:       #ed8796;
+  --ctp-maroon:    #ee99a0;
+  --ctp-peach:     #f5a97f;
+  --ctp-yellow:    #eed49f;
+  --ctp-green:     #a6da95;
+  --ctp-teal:      #8bd5ca;
+  --ctp-sky:       #91d7e3;
+  --ctp-sapphire:  #7dc4e4;
+  --ctp-blue:      #8aadf4;
+  --ctp-lavender:  #b7bdf8;
+  --ctp-text:      #cad3f5;
+  --ctp-subtext1:  #b8c0e0;
+  --ctp-subtext0:  #a5adcb;
+  --ctp-overlay2:  #939ab7;
+  --ctp-overlay1:  #8087a2;
+  --ctp-overlay0:  #6e738d;
+  --ctp-surface2:  #5b6078;
+  --ctp-surface1:  #494d64;
+  --ctp-surface0:  #363a4f;
+  --ctp-base:      #24273a;
+  --ctp-mantle:    #1e2030;
+  --ctp-crust:     #181926;
+
+  --bg-app:        var(--ctp-base);
+  --bg-sidebar:    var(--ctp-mantle);
+  --bg-card:       var(--ctp-surface0);
+  --bg-hover:      var(--ctp-surface1);
+  --bg-player:     var(--ctp-crust);
+  --bg-glass:      rgba(36, 39, 58, 0.75);
+  --accent:        var(--ctp-mauve);
+  --accent-dim:    rgba(198, 160, 246, 0.15);
+  --accent-glow:   rgba(198, 160, 246, 0.3);
+  --text-primary:  var(--ctp-text);
+  --text-secondary:var(--ctp-subtext1);
+  --text-muted:    var(--ctp-overlay1);
+  --border:        var(--ctp-surface1);
+  --border-subtle: var(--ctp-surface0);
+  --positive:      var(--ctp-green);
+  --warning:       var(--ctp-yellow);
+  --danger:        var(--ctp-red);
+}
+
+/* ─── Catppuccin Frappé Variables ─── */
+[data-theme='frappe'] {
+  color-scheme: dark;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23b5bfe2%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+  --ctp-rosewater: #f2d5cf;
+  --ctp-flamingo:  #eebebe;
+  --ctp-pink:      #f4b8e4;
+  --ctp-mauve:     #ca9ee6;
+  --ctp-red:       #e78284;
+  --ctp-maroon:    #ea999c;
+  --ctp-peach:     #ef9f76;
+  --ctp-yellow:    #e5c890;
+  --ctp-green:     #a6d189;
+  --ctp-teal:      #81c8be;
+  --ctp-sky:       #99d1db;
+  --ctp-sapphire:  #85c1dc;
+  --ctp-blue:      #8caaee;
+  --ctp-lavender:  #babbf1;
+  --ctp-text:      #c6d0f5;
+  --ctp-subtext1:  #b5bfe2;
+  --ctp-subtext0:  #a5adce;
+  --ctp-overlay2:  #949cbb;
+  --ctp-overlay1:  #838ba7;
+  --ctp-overlay0:  #737994;
+  --ctp-surface2:  #626880;
+  --ctp-surface1:  #51576d;
+  --ctp-surface0:  #414559;
+  --ctp-base:      #303446;
+  --ctp-mantle:    #292c3c;
+  --ctp-crust:     #232634;
+
+  --bg-app:        var(--ctp-base);
+  --bg-sidebar:    var(--ctp-mantle);
+  --bg-card:       var(--ctp-surface0);
+  --bg-hover:      var(--ctp-surface1);
+  --bg-player:     var(--ctp-crust);
+  --bg-glass:      rgba(48, 52, 70, 0.75);
+  --accent:        var(--ctp-mauve);
+  --accent-dim:    rgba(202, 158, 230, 0.15);
+  --accent-glow:   rgba(202, 158, 230, 0.3);
+  --text-primary:  var(--ctp-text);
+  --text-secondary:var(--ctp-subtext1);
+  --text-muted:    var(--ctp-overlay1);
+  --border:        var(--ctp-surface1);
+  --border-subtle: var(--ctp-surface0);
+  --positive:      var(--ctp-green);
+  --warning:       var(--ctp-yellow);
+  --danger:        var(--ctp-red);
+}
+
 /* ─── Catppuccin Latte Variables (Light Theme) ─── */
 [data-theme='latte'] {
   color-scheme: light;
@@ -107,6 +207,221 @@
   --danger:        var(--ctp-red);
 }
 
+/* ─── Nord – Polar Night (Dark) ─── */
+[data-theme='nord'] {
+  color-scheme: dark;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23e5e9f0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+  /* Polar Night */
+  --ctp-crust:     #2e3440;
+  --ctp-mantle:    #2e3440;
+  --ctp-base:      #3b4252;
+  --ctp-surface0:  #434c5e;
+  --ctp-surface1:  #4c566a;
+  --ctp-surface2:  #576070;
+  --ctp-overlay0:  #7a8898;
+  --ctp-overlay1:  #8894a4;
+  --ctp-overlay2:  #96a2b0;
+  /* Snow Storm as text */
+  --ctp-text:      #eceff4;
+  --ctp-subtext1:  #e5e9f0;
+  --ctp-subtext0:  #d8dee9;
+  /* Frost */
+  --ctp-teal:      #8fbcbb;
+  --ctp-sky:       #88c0d0;
+  --ctp-sapphire:  #81a1c1;
+  --ctp-blue:      #5e81ac;
+  --ctp-lavender:  #81a1c1;
+  --ctp-mauve:     #88c0d0;
+  /* Aurora */
+  --ctp-red:       #bf616a;
+  --ctp-maroon:    #d08770;
+  --ctp-peach:     #d08770;
+  --ctp-yellow:    #ebcb8b;
+  --ctp-green:     #a3be8c;
+  --ctp-pink:      #b48ead;
+  --ctp-flamingo:  #bf616a;
+  --ctp-rosewater: #d08770;
+
+  --bg-app:        #3b4252;
+  --bg-sidebar:    #2e3440;
+  --bg-card:       #434c5e;
+  --bg-hover:      #4c566a;
+  --bg-player:     #2e3440;
+  --bg-glass:      rgba(59, 66, 82, 0.75);
+  --accent:        #88c0d0;
+  --accent-dim:    rgba(136, 192, 208, 0.15);
+  --accent-glow:   rgba(136, 192, 208, 0.3);
+  --text-primary:  #eceff4;
+  --text-secondary:#e5e9f0;
+  --text-muted:    #8894a4;
+  --border:        #434c5e;
+  --border-subtle: #3b4252;
+  --positive:      #a3be8c;
+  --warning:       #ebcb8b;
+  --danger:        #bf616a;
+}
+
+/* ─── Nord – Snow Storm (Light) ─── */
+[data-theme='nord-snowstorm'] {
+  color-scheme: light;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%233b4252%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+  /* Snow Storm as backgrounds */
+  --ctp-crust:     #d8dee9;
+  --ctp-mantle:    #e5e9f0;
+  --ctp-base:      #eceff4;
+  --ctp-surface0:  #d8dee9;
+  --ctp-surface1:  #c8d0de;
+  --ctp-surface2:  #b8c2d0;
+  --ctp-overlay0:  #7a8898;
+  --ctp-overlay1:  #636e7e;
+  --ctp-overlay2:  #4c566a;
+  /* Polar Night as text */
+  --ctp-text:      #2e3440;
+  --ctp-subtext1:  #3b4252;
+  --ctp-subtext0:  #434c5e;
+  /* Frost */
+  --ctp-teal:      #8fbcbb;
+  --ctp-sky:       #88c0d0;
+  --ctp-sapphire:  #81a1c1;
+  --ctp-blue:      #5e81ac;
+  --ctp-lavender:  #81a1c1;
+  --ctp-mauve:     #5e81ac;
+  /* Aurora */
+  --ctp-red:       #bf616a;
+  --ctp-maroon:    #d08770;
+  --ctp-peach:     #d08770;
+  --ctp-yellow:    #9a7200;
+  --ctp-green:     #4e7c3f;
+  --ctp-pink:      #7e5d8c;
+  --ctp-flamingo:  #bf616a;
+  --ctp-rosewater: #d08770;
+
+  --bg-app:        #eceff4;
+  --bg-sidebar:    #e5e9f0;
+  --bg-card:       #d8dee9;
+  --bg-hover:      #c8d0de;
+  --bg-player:     #e5e9f0;
+  --bg-glass:      rgba(236, 239, 244, 0.80);
+  --accent:        #5e81ac;
+  --accent-dim:    rgba(94, 129, 172, 0.15);
+  --accent-glow:   rgba(94, 129, 172, 0.3);
+  --text-primary:  #2e3440;
+  --text-secondary:#3b4252;
+  --text-muted:    #636e7e;
+  --border:        #c8d0de;
+  --border-subtle: #d8dee9;
+  --positive:      #4e7c3f;
+  --warning:       #9a7200;
+  --danger:        #bf616a;
+}
+
+/* ─── Nord – Frost (Deep Ocean Blue) ─── */
+[data-theme='nord-frost'] {
+  color-scheme: dark;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23e5e9f0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+  /* Deep ocean blue – Frost-inspired dark backgrounds */
+  --ctp-crust:     #1a2535;
+  --ctp-mantle:    #1d2b3a;
+  --ctp-base:      #253545;
+  --ctp-surface0:  #2d3f52;
+  --ctp-surface1:  #354a60;
+  --ctp-surface2:  #3d546e;
+  --ctp-overlay0:  #6888a4;
+  --ctp-overlay1:  #7898b4;
+  --ctp-overlay2:  #88a8c4;
+  /* Snow Storm as text */
+  --ctp-text:      #eceff4;
+  --ctp-subtext1:  #e5e9f0;
+  --ctp-subtext0:  #d8dee9;
+  /* Frost accent */
+  --ctp-teal:      #8fbcbb;
+  --ctp-sky:       #88c0d0;
+  --ctp-sapphire:  #81a1c1;
+  --ctp-blue:      #5e81ac;
+  --ctp-lavender:  #8fbcbb;
+  --ctp-mauve:     #88c0d0;
+  /* Aurora */
+  --ctp-red:       #bf616a;
+  --ctp-maroon:    #d08770;
+  --ctp-peach:     #d08770;
+  --ctp-yellow:    #ebcb8b;
+  --ctp-green:     #a3be8c;
+  --ctp-pink:      #b48ead;
+  --ctp-flamingo:  #bf616a;
+  --ctp-rosewater: #d08770;
+
+  --bg-app:        #253545;
+  --bg-sidebar:    #1d2b3a;
+  --bg-card:       #2d3f52;
+  --bg-hover:      #354a60;
+  --bg-player:     #1a2535;
+  --bg-glass:      rgba(37, 53, 69, 0.75);
+  --accent:        #88c0d0;
+  --accent-dim:    rgba(136, 192, 208, 0.15);
+  --accent-glow:   rgba(136, 192, 208, 0.35);
+  --text-primary:  #eceff4;
+  --text-secondary:#e5e9f0;
+  --text-muted:    #7898b4;
+  --border:        #2d3f52;
+  --border-subtle: #253545;
+  --positive:      #a3be8c;
+  --warning:       #ebcb8b;
+  --danger:        #bf616a;
+}
+
+/* ─── Nord – Aurora (Dark + Aurora Purple) ─── */
+[data-theme='nord-aurora'] {
+  color-scheme: dark;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23e5e9f0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+  /* Polar Night base */
+  --ctp-crust:     #2e3440;
+  --ctp-mantle:    #2e3440;
+  --ctp-base:      #3b4252;
+  --ctp-surface0:  #434c5e;
+  --ctp-surface1:  #4c566a;
+  --ctp-surface2:  #576070;
+  --ctp-overlay0:  #7a8898;
+  --ctp-overlay1:  #8894a4;
+  --ctp-overlay2:  #96a2b0;
+  /* Snow Storm as text */
+  --ctp-text:      #eceff4;
+  --ctp-subtext1:  #e5e9f0;
+  --ctp-subtext0:  #d8dee9;
+  /* Aurora accents — purple as mauve/lavender for button gradients */
+  --ctp-mauve:     #b48ead;
+  --ctp-lavender:  #a3be8c;
+  --ctp-pink:      #b48ead;
+  --ctp-teal:      #8fbcbb;
+  --ctp-sky:       #88c0d0;
+  --ctp-sapphire:  #81a1c1;
+  --ctp-blue:      #5e81ac;
+  --ctp-red:       #bf616a;
+  --ctp-maroon:    #d08770;
+  --ctp-peach:     #d08770;
+  --ctp-yellow:    #ebcb8b;
+  --ctp-green:     #a3be8c;
+  --ctp-flamingo:  #bf616a;
+  --ctp-rosewater: #d08770;
+
+  --bg-app:        #3b4252;
+  --bg-sidebar:    #2e3440;
+  --bg-card:       #434c5e;
+  --bg-hover:      #4c566a;
+  --bg-player:     #2e3440;
+  --bg-glass:      rgba(59, 66, 82, 0.75);
+  --accent:        #b48ead;
+  --accent-dim:    rgba(180, 142, 173, 0.15);
+  --accent-glow:   rgba(180, 142, 173, 0.3);
+  --text-primary:  #eceff4;
+  --text-secondary:#e5e9f0;
+  --text-muted:    #8894a4;
+  --border:        #434c5e;
+  --border-subtle: #3b4252;
+  --positive:      #a3be8c;
+  --warning:       #ebcb8b;
+  --danger:        #bf616a;
+}
+
 /* ─── Global Base Settings ─── */
 :root {
   /* Typography */
@@ -265,8 +580,8 @@ body.is-dragging * {
 .input {
   width: 100%;
   padding: var(--space-3) var(--space-4);
-  background: var(--ctp-surface0);
-  border: 1px solid var(--border);
+  background: var(--ctp-base);
+  border: 1px solid var(--ctp-overlay0);
   border-radius: var(--radius-md);
   color: var(--text-primary);
   font-family: var(--font-sans);

src/utils/imageCache.ts

@@ -0,0 +1,93 @@
+const DB_NAME = 'psysonic-img-cache';
+const STORE_NAME = 'images';
+const MAX_AGE_MS = 30 * 24 * 60 * 60 * 1000; // 30 days
+
+// In-memory map: cacheKey → object URL (avoids creating multiple object URLs per session)
+const objectUrlCache = new Map<string, string>();
+
+let db: IDBDatabase | null = null;
+let dbPromise: Promise<IDBDatabase> | null = null;
+
+function openDB(): Promise<IDBDatabase> {
+  if (db) return Promise.resolve(db);
+  if (dbPromise) return dbPromise;
+  dbPromise = new Promise((resolve, reject) => {
+    const req = indexedDB.open(DB_NAME, 1);
+    req.onupgradeneeded = e => {
+      const database = (e.target as IDBOpenDBRequest).result;
+      if (!database.objectStoreNames.contains(STORE_NAME)) {
+        database.createObjectStore(STORE_NAME, { keyPath: 'key' });
+      }
+    };
+    req.onsuccess = e => {
+      db = (e.target as IDBOpenDBRequest).result;
+      resolve(db!);
+    };
+    req.onerror = () => reject(req.error);
+  });
+  return dbPromise;
+}
+
+async function getBlob(key: string): Promise<Blob | null> {
+  try {
+    const database = await openDB();
+    return new Promise(resolve => {
+      const req = database.transaction(STORE_NAME, 'readonly').objectStore(STORE_NAME).get(key);
+      req.onsuccess = () => {
+        const entry = req.result;
+        resolve(entry && Date.now() - entry.timestamp < MAX_AGE_MS ? entry.blob : null);
+      };
+      req.onerror = () => resolve(null);
+    });
+  } catch {
+    return null;
+  }
+}
+
+async function putBlob(key: string, blob: Blob): Promise<void> {
+  try {
+    const database = await openDB();
+    await new Promise<void>(resolve => {
+      const tx = database.transaction(STORE_NAME, 'readwrite');
+      tx.objectStore(STORE_NAME).put({ key, blob, timestamp: Date.now() });
+      tx.oncomplete = () => resolve();
+      tx.onerror = () => resolve();
+    });
+  } catch {
+    // Ignore write errors
+  }
+}
+
+/**
+ * Returns a cached object URL for an image.
+ * @param fetchUrl  The actual URL to fetch from (may contain ephemeral auth params).
+ * @param cacheKey  A stable key that identifies the image across sessions.
+ */
+export async function getCachedUrl(fetchUrl: string, cacheKey: string): Promise<string> {
+  if (!fetchUrl) return '';
+
+  // 1. In-memory hit (same session)
+  const existing = objectUrlCache.get(cacheKey);
+  if (existing) return existing;
+
+  // 2. IndexedDB hit (persisted from previous session)
+  const blob = await getBlob(cacheKey);
+  if (blob) {
+    const objUrl = URL.createObjectURL(blob);
+    objectUrlCache.set(cacheKey, objUrl);
+    return objUrl;
+  }
+
+  // 3. Network fetch → store in IDB → return object URL
+  try {
+    const resp = await fetch(fetchUrl);
+    if (!resp.ok) return fetchUrl;
+    const newBlob = await resp.blob();
+    putBlob(cacheKey, newBlob); // fire-and-forget
+    const objUrl = URL.createObjectURL(newBlob);
+    objectUrlCache.set(cacheKey, objUrl);
+    return objUrl;
+  } catch {
+    return fetchUrl; // fallback: direct URL
+  }
+}