feat: v1.8.0 — new themes, queue toolbar, lightbox, i18n (fr/nl)

Themes:
- Add Poison (phosphor green on charcoal), Nucleo (warm brass light), Classic Winamp (LCD glow, Winamp yellow/orange) themes
- Overhaul Psychowave — refined deep violet, no longer WIP
- Reorganise ThemePicker into groups: Catppuccin, Nord, Retro, Tokyo Night, Psysonic Themes
- Add --volume-accent CSS var for per-theme volume slider colour override

Queue:
- Full toolbar redesign with centred round buttons (Shuffle/Save/Load/Clear/Gapless/Crossfade)
- Crossfade popover with 1–10 s range slider, right-aligned to avoid viewport overflow
- Queue header: title + count + duration inline in accent colour, close button removed
- Tech info (codec/bitrate) as frosted-glass overlay badge on cover art

UI:
- CoverLightbox shared component for album cover (AlbumHeader) and artist avatar (ArtistDetail)
- NowPlayingDropdown: separate spinning/loading state — button always clickable, icon spins 600 ms min
- Settings: "Experimental" badge on Crossfade and Gapless toggles
- Help page: 2-column grid layout, new Crossfade & Gapless Q&A entry, updated theme/language entries

i18n:
- Full French (fr) and Dutch (nl) translations across all namespaces
- Language selector sorted alphabetically (nl, en, fr, de)

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

.github/workflows/release.yml

@@ -6,7 +6,72 @@ 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: extract changelog
+        id: changelog
+        run: |
+          VERSION="${{ steps.get-version.outputs.version }}"
+          # Extract the block between ## [VERSION] and the next ## heading
+          BODY=$(awk "/^## \[$VERSION\]/{found=1; next} found && /^## \[/{exit} found{print}" CHANGELOG.md)
+          # Store multiline output
+          EOF=$(dd if=/dev/urandom bs=15 count=1 status=none | base64)
+          echo "body<<$EOF" >> $GITHUB_OUTPUT
+          echo "$BODY" >> $GITHUB_OUTPUT
+          echo "$EOF" >> $GITHUB_OUTPUT
+      - name: create release
+        id: create-release
+        uses: actions/github-script@v7
+        env:
+          PACKAGE_VERSION: ${{ steps.get-version.outputs.version }}
+          CHANGELOG_BODY: ${{ steps.changelog.outputs.body }}
+        with:
+          script: |
+            const tag = `app-v${process.env.PACKAGE_VERSION}`;
+            const body = process.env.CHANGELOG_BODY || 'See the assets to download this version and install.';
+            try {
+              const { data } = await github.rest.repos.getReleaseByTag({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                tag,
+              });
+              await github.rest.repos.updateRelease({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                release_id: data.id,
+                body,
+              });
+              return data.id;
+            } catch (e) {
+              if (e.status !== 404) throw e;
+            }
+            const { data } = await github.rest.repos.createRelease({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              tag_name: tag,
+              name: `Psysonic v${process.env.PACKAGE_VERSION}`,
+              body,
+              draft: false,
+              prerelease: false
+            });
+            return data.id;
+
+  build-macos-windows:
+    needs: create-release
     permissions:
       contents: write
     strategy:
@@ -17,54 +82,67 @@ 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 }}
+          VITE_LASTFM_API_KEY: ${{ secrets.VITE_LASTFM_API_KEY }}
+          VITE_LASTFM_API_SECRET: ${{ secrets.VITE_LASTFM_API_SECRET }}
+        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-24.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 \
-            libunwind-dev \
-            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'
-        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
+            libasound2-dev
 
       - 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
+        env:
+          VITE_LASTFM_API_KEY: ${{ secrets.VITE_LASTFM_API_KEY }}
+          VITE_LASTFM_API_SECRET: ${{ secrets.VITE_LASTFM_API_SECRET }}
+        run: npm run tauri:build -- --bundles deb,rpm
+
+      - 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 "*.deb" -o -name "*.rpm" \) \
+            | xargs gh release upload "app-v${VERSION}" --clobber

.gitignore

@@ -7,6 +7,11 @@ yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 
+# Environment variables (API keys)
+.env
+.env.local
+.env.*.local
+
 # Node
 node_modules
 dist

CHANGELOG.md

@@ -5,10 +5,564 @@ 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.3] - 2026-03-11
+## [1.8.0] - 2026-03-21
+
+### Added
+
+#### Three New Themes
+- **Poison**: Dark charcoal background (`#1a1a1a`) with phosphor green (`#1bd655`) accent — high-contrast, industrial aesthetic. LCD glow text-shadow on the now-playing track name.
+- **Nucleo**: Warm brass/cream light theme inspired by vintage hi-fi equipment. Warm white cards, gold/amber accents, brushed-metal bevel buttons, and a warm LCD glow on the player track name. `color-scheme: light`.
+- **Classic Winamp**: Cool gray-blue dark theme (`#2b2b3a`) channelling the classic Winamp 2.x skin. Yellow primary accent (`#d4cc46`), orange volume slider override (`--volume-accent: #de9b35`), Courier New monospace font with bright-green LCD glow for the track name.
+
+#### Psychowave Theme — Major Overhaul
+- Psychowave recoloured from loud neon pink/purple to a refined deep violet palette: background `#161428`, accent `#a06ae0`. All neon colours replaced with muted, tasteful variants. No longer marked as WIP.
+
+#### ThemePicker Redesign
+- Themes reorganised into semantic groups: **Catppuccin**, **Nord**, **Retro** (formerly Gruvbox), **Tokyo Night**, and a new **Psysonic Themes** section (Classic Winamp, Poison, Nucleo, Psychowave). The separate *Experimental* group is removed.
+- "Gruvbox" renamed to **Retro**.
+
+#### Image Lightbox
+- Clicking the **album cover** on an Album Detail page or the **artist avatar** on an Artist Detail page opens a full-screen lightbox showing the high-resolution image (up to 2000 px). Click outside or press Escape to close.
+- Both use a shared `CoverLightbox` component — consistent behaviour across the app.
+
+#### Queue Toolbar — Complete Redesign
+- The queue panel now has a **centred icon toolbar** with round buttons (border-radius 50%, solid accent fill when active):
+  - **Shuffle** — Fisher-Yates shuffle, keeps current track at position 0
+  - **Save** — save queue as playlist
+  - **Load** — load a playlist into the queue
+  - **Clear** — remove all tracks from the queue
+  - **Gapless** (∞ icon) — toggle gapless playback on/off
+  - **Crossfade** (≋ icon) — toggle crossfade on/off; when inactive, clicking enables crossfade *and* opens a popover slider
+- **Crossfade popover**: a small overlay below the Crossfade button with a range slider (1–10 s) to configure the fade duration. Clicking the active Crossfade button disables crossfade and closes the popover. Closes on outside click.
+- **Queue header**: title enlarged to 16 px/700, track count and total duration shown inline next to the title in accent colour. Close (×) button removed.
+- **Tech info overlay**: codec and bitrate displayed as a frosted glass badge (`backdrop-filter: blur(4px)`) overlaid on the bottom edge of the cover art image.
+
+#### French & Dutch Translations
+- Full UI translation added for **French** (`fr`) and **Dutch** (`nl`) — all namespaces covered.
+- Language selector in Settings now lists all four languages sorted alphabetically (Dutch, English, French, German).
+
+#### Help Page — Layout & Content Update
+- **2-column grid layout** for the accordion — makes better use of horizontal space on widescreen displays.
+- New Q&A entry: **Crossfade & Gapless** (Playback section) — explains what each feature does, how to enable them, and their experimental status.
+- Updated entries: Themes (reflects all 21 themes), Languages (4 languages), Scrobbling (direct Last.fm), System browser links, Linux distribution (no AppImage).
+
+#### Settings — Experimental Labels
+- Crossfade and Gapless toggles in Settings → Playback now show an **"Experimental"** badge next to their label.
 
 ### Fixed
-- **CI/CD Build**: Added `libunwind-dev` to the release workflow to solve build issues.
+
+- **Now Playing dropdown — refresh button**: The refresh icon spin was applied to the entire button, blocking clicks during the animation. Spin state is now separate from the background poll loading state — the button is always clickable, and the icon spins for a minimum of 600 ms for clear visual feedback.
+- **Crossfade popover positioning**: Popover was overflowing the right edge of the viewport. Now right-aligned relative to the Crossfade button and positioned below it.
+
+---
+
+## [1.7.2] - 2026-03-20
+
+### Fixed
+
+- **Last.fm**: Stability improvements for the authentication flow and session handling.
+- **Settings**: Minor display fixes in the Last.fm profile badge.
+
+---
+
+## [1.7.1] - 2026-03-20
+
+### Fixed
+
+- **Build**: TypeScript errors in Settings.tsx and Statistics.tsx that broke the release build.
+
+---
+
+## [1.7.0] - 2026-03-20
+
+### Added
+
+#### Last.fm Integration *(Beta)*
+- **Direct Last.fm scrobbling**: Tracks are scrobbled directly via the Last.fm API at 50% playback — no longer routed through Navidrome. Configure in Settings → Server with your Last.fm username and password.
+- **Now Playing updates**: Last.fm receives the currently playing track in real time.
+- **Love / Unlove**: Heart button in the Now Playing page and player bar syncs the loved state with Last.fm instantly.
+- **Last.fm profile badge** in Settings → Server: shows your scrobble count and member since year once connected.
+- ⚠️ **This feature is in beta.** Session management and edge cases are still being refined.
+
+#### Similar Artists
+- Artist detail pages now show a **Similar Artists** section below Top Tracks, sourced from Last.fm and filtered to artists actually present in your library. Shown as chip buttons — click to navigate directly to that artist's page.
+- Requires Last.fm to be configured. Hidden when Last.fm is not connected or no library matches are found.
+
+#### Statistics — Last.fm Stats
+- New **Last.fm Stats** section on the Statistics page (requires Last.fm): top artists, albums, and tracks with proportional play-count bars.
+- **Period filter**: switch between Last 7 Days, 1 Month, 3 Months, 6 Months, 12 Months, and Overall.
+- **Recent Scrobbles**: last 20 scrobbled tracks with relative timestamps and a "Now Playing" badge for the currently active entry.
+- **Genre Distribution removed**: replaced by the Last.fm stats sections.
+
+#### Psychowave Theme *(Work in Progress)*
+- New **Psychowave** theme: a deep purple/violet dark theme inspired by synthwave and retrowave aesthetics.
+- ⚠️ **Still in active development** — colors and details will continue to be refined in upcoming releases.
+
+#### Tooltip System — TooltipPortal
+- All tooltips now use a **React portal** rendered into `document.body` at `z-index: 99999`. Replaces the previous CSS `::after` pseudo-element system.
+- Fixes tooltip clipping inside `overflow: hidden` containers (player bar, queue panel, EQ).
+- Fixes black OS-native tooltip boxes that appeared on native `title=` attributes — all converted to `data-tooltip`.
+- Smart edge detection: tooltip flips position automatically when it would overflow the viewport.
+
+#### Custom Select Dropdowns
+- **Theme**, **Language**, and **EQ preset** selectors are now rendered as styled portal dropdowns — no more unstyled native `<select>` boxes.
+- Supports option groups (EQ: Built-in Presets / Custom Presets), keyboard navigation, and click-outside-to-close.
+
+### Changed
+
+#### Fullscreen Player / Now Playing — Background
+- **Ken Burns animation improved**: background image now has significantly more movement (±8% translate, `inset: -30%`) with a 90-second cycle — more cinematic without being distracting.
+- **Color orbs removed** from both the Fullscreen Player and the Now Playing page. They caused noticeable GPU load especially on integrated graphics.
+
+### Fixed
+
+- **Live dropdown (Now Playing)**: Own playback was no longer reported to Navidrome after the Last.fm implementation removed the `reportNowPlaying` call. Both are now called independently on track start.
+- **Sidebar: Now Playing button position when collapsed**: The button was appearing in the middle of the nav instead of just above the System section. Caused by a leftover `margin-top: auto` on the Statistics link that split the remaining flex space.
+
+---
+
+## [1.6.0] - 2026-03-19
+
+> ⚠️ **Wichtiger Hinweis / Important Notice**
+>
+> **DE:** Der Bundle-Identifier der App wurde von `dev.psysonic.app` auf `dev.psysonic.player` geändert. **Alle gespeicherten Einstellungen (Server-Profile, Theme, EQ, Sprache usw.) gehen beim Update auf diese Version einmalig verloren** und müssen neu eingetragen werden. Zukünftige Updates sind davon nicht betroffen.
+>
+> **EN:** The app's bundle identifier has changed from `dev.psysonic.app` to `dev.psysonic.player`. **All saved settings (server profiles, theme, EQ, language, etc.) will be reset once when updating to this version** and need to be re-entered. Future updates are not affected.
+
+### Added
+
+#### Replay Gain
+- **Replay Gain support** in the Rust audio engine. Gain and peak values from the Subsonic API are applied per-track at playback time, keeping loudness consistent across your library.
+- Two modes selectable in Settings → Playback: **Track** (default) and **Album** gain.
+- Peak limiting applied to prevent clipping: effective gain is capped at `1 / peak`.
+- Volume slider preserves the gain ratio — `audio_set_volume` multiplies `base_volume × replay_gain_linear`.
+
+#### Crossfade
+- **Crossfade between tracks** (0.5 – 12 s, configurable in Settings → Playback).
+- Old sink is volume-ramped to zero in 30 steps while the new track starts playing; old sink stored in `fading_out_sink` so a subsequent skip cancels the fade-out immediately.
+- `audio_set_crossfade` Tauri command; synced to Rust on startup and on toggle.
+
+#### Gapless Preloading *(Experimental — Alpha)*
+- **Gapless playback**: when ≤ 30 s remain in the current track, the next track's audio is preloaded via `audio_preload` in the background.
+- `audio_play` checks the preload cache first — if there is a URL match the download is skipped entirely, eliminating the gap between tracks.
+- The old Sink is kept alive during the new track's download and decode phase; the Sink swap happens atomically after decoding is complete, fixing a subtle **start-of-track audio cut** that occurred regardless of gapless state.
+- ⚠️ **This feature is experimental and still in active development.** It may not work correctly in all scenarios. Enable it in Settings → Playback at your own discretion.
+
+#### Settings — Tab Navigation
+- Settings reorganised into **5 horizontal tabs**: Playback, Library, Appearance, Server, About.
+- Each tab groups related settings with a matching icon.
+
+#### Artist Pages — "Also Featured On"
+- Artist detail pages now show an **"Also Featured On"** section listing albums where the artist appears as a guest or featured performer (but is not the primary album artist).
+- Implemented via `search3` filtered by `song.artistId`, excluding the artist's own albums.
+
+#### Download Folder Modal
+- When no download folder is configured and the user initiates a download (album or track), a **folder picker modal** now appears asking where to save.
+- Includes a "Remember this folder" checkbox that writes the choice to Settings.
+- Clear button added in Settings → Server to reset the saved download folder.
+
+#### Changelog in Settings
+- The full **Changelog** is now readable inside the app under Settings → About.
+- Rendered as collapsible version entries; the current version is expanded by default.
+- Inline Markdown (`**bold**`, `*italic*`, `` `code` ``) is rendered natively.
+
+#### EQ as Player Bar Popup
+- The Equalizer is now accessible directly from the **player bar** via a small EQ button, opening as a centred popup overlay — no need to navigate to Settings.
+
+### Fixed
+
+- **Bundle identifier warning**: changed `identifier` from `dev.psysonic.app` to `dev.psysonic.player` to avoid the macOS `.app` extension conflict warned by Tauri.
+- **Version mismatch in releases**: `tauri.conf.json` version was out of sync with `package.json` and `Cargo.toml`, causing GitHub Actions to build release artefacts with the wrong version number. All four version sources (`package.json`, `Cargo.toml`, `tauri.conf.json`, `packages/aur/PKGBUILD`) are now kept in sync.
+
+### Known Issues
+
+- **FLAC seeking**: jumping to a position in a FLAC file via the waveform seekbar currently does not work. Seeking in MP3, OGG, and other formats is unaffected.
+
+---
+
+## [1.5.0] - 2026-03-18
+
+### Added
+
+#### 10-Band Graphic Equalizer
+- Full **10-band graphic EQ** implemented entirely in the Rust audio engine using biquad peak filters (31 Hz – 16 kHz). Gains adjustable ±12 dB per band.
+- EQ is processed in the audio pipeline via `EqSource<S>` — a custom `rodio::Source` wrapper that applies cascaded biquad filters in real-time.
+- Filter coefficients update smoothly on every 1024-sample block without audio interruption.
+- **Seek support**: `EqSource::try_seek()` implemented — filter state is reset on seek to prevent clicks/artefacts. This also **fixes waveform seek**, which had silently broken when the EQ was introduced (rodio returned `SeekError::NotSupported` without the impl).
+- **10 built-in presets**: Flat, Bass Boost, Treble Boost, Rock, Pop, Jazz, Classical, Electronic, Vocal, Acoustic.
+- Custom presets: save, name, and delete your own presets.
+- EQ state persisted via `psysonic-eq` localStorage key (gains, enabled, active preset, custom presets).
+- New `audio_set_eq` Tauri command; settings synced to Rust on startup via `eqStore.syncToRust()`.
+
+#### Connection Indicator
+- **LED indicator** in the header bar (green = connected, red = disconnected, pulsing = checking). Sits between the search bar and the Now Playing dropdown.
+- Shows server name and LAN/WAN status next to the LED.
+- **Offline overlay**: when the server is unreachable, a full-content-area overlay appears with a retry button.
+- `useConnectionStatus` hook pings the active server periodically and exposes `status`, `isRetrying`, `retry`, `isLan`, and `serverName`.
+
+#### Now Playing Page
+- New `/now-playing` route and `NowPlayingPage` component — accessible from the sidebar.
+
+### Fixed
+
+#### Waveform Seek (Player Bar)
+- **Drag out of canvas no longer breaks seeking**: `mousemove` and `mouseup` events are now registered on `window` (not the canvas element), so dragging fast across other elements still updates playback position correctly.
+- **Stale closure fix**: `trackId` and `seek` function are kept in refs so the window-level handlers always see the current values.
+
+### Changed
+
+#### App Icon
+- New app icon (`public/logo-psysonic.png`) across all platforms — Login page, Sidebar, Settings About section, README header, and all generated Tauri platform icons (Windows ICO, macOS ICNS, Linux PNGs, Android, iOS).
+
+## [1.4.5] - 2026-03-17
+
+### Changed
+
+#### Artist Pages — External Links
+- Last.fm and Wikipedia buttons now open in the **system browser** instead of an in-app window. The button label temporarily changes to "Opened in browser" / "Im Browser geöffnet" for 2.5 seconds as visual confirmation.
+
+#### Queue Panel
+- **Release year** added to the now-playing meta box, shown below the album name (when available).
+- **Cover art enlarged** from 72 × 72 px to 90 × 90 px, aligned to the top of the meta block so it lines up with the song title.
+- **Default width increased** from 300 px to 340 px.
+
+## [1.4.4] - 2026-03-17
+
+### Added
+
+#### AUR Package
+- Psysonic is now available on the **Arch User Repository** — Arch and CachyOS users can install via `yay -S psysonic` or `paru -S psysonic`. Builds from source using the system's own WebKitGTK, avoiding the EGL/Mesa compatibility issues that affected the AppImage on modern distros.
+
+### Changed
+
+#### App Icon
+- New app icon across all platforms (Windows, macOS, Linux, Android, iOS).
+
+#### Linux Distribution
+- **AppImage removed**: The AppImage was fundamentally incompatible with non-Ubuntu distros (Arch, Fedora) due to bundled WebKitGTK conflicting with the system's Mesa/EGL. Linux users should use the `.deb` (Ubuntu/Debian), `.rpm` (Fedora/RHEL), or the new AUR package (Arch/CachyOS).
+
+## [1.4.3] - 2026-03-16
+
+### Fixed
+
+#### Random Mix — Genre Mix
+- **Second "Play All" button removed**: The genre mix section had a redundant play button below the super-genre selector. The top-right button is now context-aware — it plays the genre mix when one is active, otherwise the regular mix.
+- **"Play All" disabled during genre mix loading**: The button now stays grayed out with a live progress counter (`n / 50`) until all songs are fully loaded. Clicking while the list was still building sent only the songs loaded so far.
+- **Over-fetching fixed**: Genre mix previously fetched up to 100+ songs and sliced to 50 at the end. Now the matched genre list is capped at 50 (randomly sampled when more match) so the total fetch stays close to 50 with no wasted server I/O.
+- **Regular mix cache-busting**: `getRandomSongs` requests now include a timestamp parameter, preventing browser/axios from returning a cached response and showing the same list on every remix.
+- **Display/state mismatch on remix**: Clicking "Mischen" now clears the current list immediately, ensuring the spinner is shown and the displayed songs always match what "Play All" would send.
+
+#### Queue Panel
+- **Hover highlight lost on right-click**: Queue items now retain their hover highlight while a context menu is open for them (`.context-active` CSS class).
+- **Song count and total duration**: The queue header now shows the number of tracks and total runtime below the title (e.g. `12 tracks · 47:32`).
+
+#### Context Menu
+- **"Favorite" option added for queue items**: Right-clicking a queue item now includes a "Favorite" option, consistent with the song context menu.
+
+## [1.4.2] - 2026-03-16
+
+### Fixed
+
+#### Linux AppImage — Modern Distro Compatibility
+- **Build upgraded to Ubuntu 24.04**: The AppImage was previously built on Ubuntu 22.04 with WebKitGTK 2.36. On modern distros (CachyOS, Arch, etc.) with Mesa 25.x, `eglGetDisplay(EGL_DEFAULT_DISPLAY)` returns `EGL_BAD_PARAMETER` and aborts immediately because newer Mesa no longer accepts implicit platform detection. Building on Ubuntu 24.04 bundles WebKitGTK 2.44 which uses the correct `eglGetPlatformDisplay` API.
+- **`EGL_PLATFORM=x11` added to AppRun**: Additional safeguard that explicitly tells Mesa's EGL loader to use the X11 platform when the app is running under XWayland.
+
+#### Shell — Update Link
+- `shell:allow-open` capability now includes a URL scope (`https://**`), fixing the update toast link that silently did nothing in Tauri v2 without an explicit allow-list.
+
+## [1.4.1] - 2026-03-16
+
+### Fixed
+
+#### Random Albums — Performance & Memory
+- **Auto-refresh removed**: The 30-second auto-cycle timer caused 10 React state updates/second (progress bar interval) and a burst of 30 concurrent image fetches on every tick, eventually making the whole app unresponsive. The page now loads once on mount; use the manual refresh button to get a new selection.
+- **Concurrent fetch limit**: Image fetches are now capped at 5 simultaneous network requests (was unlimited — 30 at once on every refresh).
+- **Object URL memory leak**: The in-memory image cache now caps at 150 entries and revokes old object URLs via `URL.revokeObjectURL()` when evicting. Previously, object URLs accumulated without bound across the entire session.
+- **Dangling state updates**: `useCachedUrl` now uses a cancellation flag — if a component unmounts while a fetch is in flight (e.g. during a grid refresh), the resolved URL is discarded instead of calling `setState` on an unmounted component.
+
+#### i18n
+- Page title "Neueste" on the New Releases page was hardcoded German. Now uses `t('sidebar.newReleases')`.
+
+## [1.4.0] - 2026-03-16
+
+### Added
+
+#### Statistics Page — Upgraded
+- **Library overview**: Four stat cards at the top showing total Artists, Albums, Songs, and Genres — counts derived from the library in parallel.
+- **Recently Played**: Horizontal scroll row showing the last played albums with cover art.
+- **Most Played**: Ranked list of the most frequently played tracks.
+- **Highest Rated**: List of top-rated tracks by user star rating.
+- **Genre Chart**: Visual bar chart of the top genres by song and album count.
+
+#### Playlists Page — Redesigned
+- Replaced the card grid with a clean list layout.
+- **Sort buttons**: Sort by Name, Tracks, or Duration — click again to toggle ascending/descending.
+- **Filter input**: Live search across playlist names.
+- Play and delete buttons appear on row hover.
+
+#### Favorites — Songs Section Upgraded
+- Tracks now display in a full tracklist layout matching Album Detail: separate `#`, Title, Artist, and Duration columns with a header row.
+- Artist name is clickable and navigates to the artist page.
+- Right-click context menu on any track (Go to Album, Add to Queue, etc.).
+- **"Add all to queue"** button (`btn btn-surface`) next to the section title.
+
+#### Context Menu — Go to Album
+- New **Go to Album** option (`Disc3` icon) added for `song` and `queue-item` context menu types.
+- Only shown when the song has a known `albumId`.
+
+#### Queue Panel — Meta Box
+- Now shows: **Title** (no link) → **Artist** (linked to artist page) → **Album** (linked to album page).
+- Removed year display and the old title→album link.
+
+#### Random Mix — Hover Persistence
+- Track row stays highlighted while its context menu is open via `.context-active` CSS class.
+- Highlight is cleared automatically when the context menu closes.
+
+#### Artist Cards — Redesigned
+- `ArtistCardLocal` now matches `AlbumCard` exactly: no padding, full-width square cover via `aspect-ratio: 1`, name and meta below.
+- Uses `CachedImage` with `coverArtCacheKey` for proper IndexedDB caching.
+- Same `flex: 0 0 clamp(140px, 15vw, 180px)` sizing as album cards — artist cards are no longer oversized.
+
+### Fixed
+
+#### Random Albums — Cover Loading & Manual Refresh
+- **Removed `renderKey`**: The album grid was fully remounted on every refresh, restarting all 30 IndexedDB image lookups from scratch. Grid is now stable — only data changes, images stay cached.
+- **`loadingRef` guard**: Prevents concurrent fetch calls if the auto-cycle timer fires during a manual refresh.
+- **Timer race condition**: Manual refresh now calls `clearTimers()` before `load()`, eliminating the race where the auto-cycle timer fired mid-load.
+
+#### Favorites — Artist Navigation
+- Arrow nav buttons in the Artists section now use the same CSS classes as the Albums section (`album-row-section`, `album-row-header`, `album-row-nav`) — consistent styling across both rows.
+
+### Changed
+- **AlbumDetail** refactored into a thin orchestrator. Logic extracted into `AlbumHeader` (`src/components/AlbumHeader.tsx`) and `AlbumTrackList` (`src/components/AlbumTrackList.tsx`).
+- **German i18n**: "Queue" consistently translated as "Warteschlange" throughout — `queue.shuffle`, `favorites.enqueueAll`.
+
+## [1.3.0] - 2026-03-15
+
+### Added
+
+#### Player Bar — Complete Redesign
+- **Waveform seekbar**: Replaces the classic thin slider. A canvas-based waveform with 500 deterministic bars (seeded by `trackId`) fills the full available width. Played portion renders as a blue → mauve gradient with a soft glow; buffered range is slightly brighter; unplayed bars are dimmed to 28% opacity. Click or drag anywhere to seek.
+- **New layout**: Single flex row — `[Cover + Track Info] [Transport Controls] [Waveform + Times] [Volume]`. More breathing room for the waveform; controls feel lighter and better proportioned.
+- **Queue toggle relocated**: Moved from the bottom player bar to the top-right of the content header — consistent with the sidebar collapse button pattern. Uses `PanelRightClose` / `PanelRight` icons (same family as `PanelLeftClose` / `PanelLeft` in the sidebar).
+
+#### Ambient Stage — MilkDrop Visualizer
+- **Butterchurn integration**: Clicking the waveform icon (top-right of the fullscreen player) activates the MilkDrop visualizer powered by [butterchurn](https://github.com/jberg/butterchurn) + `butterchurn-presets`.
+- A hidden `<audio>` element is routed through the Web Audio API `AnalyserNode` (not connected to `AudioDestinationNode` — completely silent). The Rust/rodio engine continues to handle actual audio output.
+- Starts with a random preset; the shuffle button cycles through all available presets with a 2-second blend transition. Current preset name is shown in the top bar.
+- When the visualizer is active, the blurred background, orbs, and overlay are replaced by the canvas.
+
+#### Tracklist — Animated Equalizer Indicator
+- The currently **playing** track shows three animated equalizer bars (CSS `scaleY` keyframe animation, staggered timing) instead of a static play icon.
+- When **paused**, the static play icon is shown.
+- Hovering any other track still shows a play icon.
+- Track row alignment fixed: `align-items: center` on the grid row + `.track-num` as flex center — icons and track numbers are now perfectly vertically aligned with the song title.
+
+#### Artist Pages — In-App Browser
+- Last.fm and Wikipedia buttons now open a native **Tauri `WebviewWindow`** (1100 × 780, centered) instead of the system browser. Both sites load fully within the app and can be closed independently.
+- Required new capabilities: `core:window:allow-create`, `core:webview:allow-create-webview-window`.
+
+#### Update Checker
+- Update check now runs **every 10 minutes** during runtime in addition to the initial check 1.5 s after launch.
+- Version label in the update toast no longer includes a `v` prefix (shows `1.3.0` instead of `v1.3.0`).
+
+#### Help Page
+- New **Random Mix** section: explains the random mix, keyword filter, and super genre mix.
+- Updated **Playback** section: waveform seekbar, MilkDrop visualizer, queue shuffle.
+- Updated **Library** section: in-app browser for artist links.
+- Updated queue entry to reflect the new toggle location.
+- **Accordion styling**: open question and answer share a continuous 3 px accent stripe on the left; answer background uses `--bg-app` for clear contrast against the question's `--bg-card`.
+
+### Fixed
+- **Version in Settings** was hardcoded to `1.0.12`. Now imported from `package.json` at build time — same source as the sidebar update checker.
+- **Hero / Discover duplicate albums**: Both sections previously fetched `random` independently, often showing the same albums. Now a single request fetches 20; `slice(0, 8)` goes to the Hero carousel and `slice(8)` to the Discover row.
+- **Active track pulse too aggressive**: Changed from a `background: transparent` flash to a gentle `opacity: 0.6` fade over 3 s — significantly less distracting.
+
+### Changed
+- **Blacklist → Keyword Filter**: Renamed throughout UI and i18n (EN + DE) to better reflect that the filter matches genre, title, and album fields — not just genre tags.
+
+## [1.2.0] - 2026-03-15
+
+### Added
+
+#### Rust Audio Engine (replaces Howler.js)
+- **New native audio backend** built in Rust using [rodio](https://github.com/RustAudio/rodio). Audio is now decoded and played entirely in the Tauri backend — no more reliance on the WebView's `<audio>` element or GStreamer pipeline quirks.
+- Tauri commands: `audio_play`, `audio_pause`, `audio_resume`, `audio_stop`, `audio_seek`, `audio_set_volume`.
+- Frontend events: `audio:playing` (with duration), `audio:progress` (every 500 ms), `audio:ended`, `audio:error`.
+- Generation counter (`AtomicU64`) ensures stale downloads from skipped tracks are cancelled immediately and do not emit events.
+- Wall-clock position tracking (`seek_offset + elapsed`) instead of `sink.empty()` (unreliable in rodio 0.19 for VBR MP3). `audio:ended` fires after two consecutive ticks within 1 second of the track end — avoids false positives near the end without adding latency.
+- Seek via `sink.try_seek()` — no pause/play cycle, no spurious `ended` events.
+- Volume clamped to `[0.0, 1.0]` on every call.
+
+#### Playback Persistence & Cold-Start Resume
+- `currentTrack`, `queue`, `queueIndex`, and `currentTime` are now persisted to `localStorage` via Zustand `partialize`.
+- On app restart with a previously loaded track, clicking Play resumes from the saved position without losing the queue.
+- Position priority: server play queue position (if > 0) takes precedence over the locally saved value, so cross-device resume works correctly.
+
+#### Random Mix — Genre Filter & Blacklist
+- **Exclude audiobooks & radio plays** toggle: filters out songs whose genre, title, or album match a hardcoded list (`Hörbuch`, `Hörspiel`, `Audiobook`, `Spoken Word`, `Podcast`, `Krimi`, `Thriller`, `Speech`, `Fantasy`, `Comedy`, `Literature`, and more).
+- **Custom genre blacklist**: add any genre keyword via the collapsible chip panel on the Random Mix page or in Settings → Random Mix. Persisted across sessions.
+- **Clickable genre chips** in the tracklist: clicking an unblocked genre tag adds it to the blacklist instantly with 1.5 s visual feedback. Blocked genres are shown in red.
+- Blacklist filter checks `song.genre`, `song.title`, and `song.album` to catch mislabelled tracks.
+
+#### Random Mix — Super Genre Mix
+- Nine pre-defined **Super Genres** (Metal, Rock, Pop, Electronic, Jazz, Classical, Hip-Hop, Country, World) appear as buttons, auto-generated from the server's genre list — only genres with at least one matching keyword are shown.
+- Selecting a Super Genre fetches up to 50 songs distributed across all matched sub-genres in parallel, then shuffles the result.
+- **Progressive rendering**: the tracklist appears as soon as the first genre request returns — users with large Metal/Rock libraries no longer stare at a spinner for the entire fetch. A small inline spinner next to the title indicates that more genres are still loading.
+- **"Load 10 more"** button: fetches 10 additional songs from the same matched genres and appends them to the play queue.
+- Random playlist is automatically hidden while a Genre Mix is active.
+- Fetch timeout raised to **45 seconds** per genre request (was 15 s) and `Promise.allSettled` used so a single slow/failing genre does not abort the entire mix.
+
+#### Queue Panel
+- **Shuffle button** in the queue header: Fisher-Yates shuffles all queued tracks while keeping the currently playing track at position 0. Button is disabled when the queue has fewer than 2 entries.
+
+#### UI / UX
+- **LiveSearch keyboard navigation**: arrow keys navigate the dropdown, Enter selects the highlighted item or navigates to the full search results page, Escape closes the dropdown.
+- **Multi-line tooltip support**: add `data-tooltip-wrap` attribute to any element with `data-tooltip` to enable line-wrapping (uses `white-space: pre-line` + `\n` in the string). Respects a 220 px max-width.
+- **Genre column info icon** in Random Mix tracklist header: hover tooltip explains the clickable-genre-to-blacklist feature.
+- **Update link** in the sidebar now uses Tauri Shell plugin `open()` to launch the system browser correctly — `<a target="_blank">` has no effect inside a Tauri WebView.
+
+### Fixed
+- **Songs skipping immediately** (root cause: Tauri v2 IPC maps Rust `snake_case` parameters to **camelCase** on the JS side — `duration_hint` must be `durationHint`). All `invoke()` calls updated.
+- **Play button doing nothing after restart**: `currentTrack` was `null` after restart (not persisted). Fixed by adding it to `partialize`.
+- **Position not restored after restart**: `initializeFromServerQueue` overwrote the local saved position with the server value even when the server reported 0. Now falls back to the localStorage value when the server position is 0.
+- **Genre Mix blank on Metal/Rock**: a single timed-out genre request caused `Promise.all` to reject the entire mix. Replaced with `Promise.allSettled` + 45 s timeout; partial results are shown immediately.
+- **Tooltip z-index**: tooltips in the main content area were rendered behind the queue panel. Fixed by giving `.main-content` `z-index: 1`, establishing a stacking context above the queue (which sits later in DOM order).
+- **Sidebar title clipping**: "Psysonic" brand text was truncated at narrow viewport widths. Minimum sidebar width raised from 180 px to 200 px.
+
+### Changed
+- **Audio architecture**: Howler.js removed. All audio state (`isPlaying`, `isAudioPaused`, `currentTime`, `duration`) is now driven by Tauri events from the Rust engine rather than Howler callbacks.
+- **Random Mix layout**: Filter/blacklist panel and Genre Mix buttons are now combined in a two-column card at the top of the page instead of being scattered across the page.
+- **Hardcoded genre blacklist** extended with: `Fantasy`, `Comedy`, `Literature`.
+- **`getRandomSongs`** now accepts an optional `timeout` parameter (default 15 s) so callers can pass a longer value for large-library scenarios.
+
+## [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
 

CLAUDE.md

@@ -0,0 +1,213 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## What is Psysonic
+
+A desktop music player (Tauri v2 + React 18 + TypeScript) for Subsonic API-compatible servers (Navidrome, Gonic, etc.). UI is styled after the Catppuccin aesthetic with glassmorphism effects.
+
+## Commands
+
+```bash
+# Dev mode (Linux — uses X11 backend to avoid WebKit compositing issues)
+npm run tauri:dev
+# Equivalent to: GDK_BACKEND=x11 WEBKIT_DISABLE_COMPOSITING_MODE=1 tauri dev
+
+# Production build
+npm run tauri:build
+
+# Frontend-only dev server (no Tauri shell)
+npm run dev
+
+# Type-check + bundle frontend
+npm run build
+```
+
+There are no test scripts. TypeScript compilation (`tsc`) is part of the build.
+
+## Architecture
+
+### Stack
+- **Frontend**: React 18 + TypeScript + Vite, served inside a Tauri WebView
+- **Backend**: Rust (Tauri v2) — handles tray icon, media key shortcuts, `exit_app` command, and the full audio engine
+- **State**: Zustand stores (no Redux)
+- **Audio**: Rust/rodio engine (`src-tauri/src/audio.rs`) — downloads track bytes via reqwest, decodes with symphonia, plays via rodio. Replaces Howler.js. See detailed notes in the Notes section.
+- **API**: All server communication goes through `src/api/subsonic.ts` — a thin wrapper around axios using Subsonic token auth (MD5 hash of password + salt)
+- **Last.fm**: `src/api/lastfm.ts` — direct Last.fm API integration (scrobbling, Now Playing, love/unlove, similar artists, top stats, recent tracks). API key + secret from `VITE_LASTFM_API_KEY` / `VITE_LASTFM_API_SECRET` env vars (bundled at build time).
+- **i18n**: react-i18next, all translations inline in `src/i18n.ts` (English, German, French, Dutch)
+
+### Key files
+
+| File | Role |
+|---|---|
+| `src/api/subsonic.ts` | All Subsonic REST calls + `buildStreamUrl` / `buildCoverArtUrl` / `buildDownloadUrl` helpers. Also exports `pingWithCredentials()`, `coverArtCacheKey()`, `reportNowPlaying()`. `getRandomSongs` includes a `_t` timestamp param to prevent browser/axios caching. |
+| `src/api/lastfm.ts` | Last.fm API: scrobble, updateNowPlaying, love/unlove, getTrackLoved, getSimilarArtists, getTopArtists/Albums/Tracks, getRecentTracks, getUserInfo. Auth via session key stored in `authStore`. |
+| `src/utils/imageCache.ts` | IndexedDB image cache (30-day TTL) + in-memory object URL Map. `getCachedUrl(fetchUrl, cacheKey)` is the main entry point. Capped at 150 entries with LRU eviction + `URL.revokeObjectURL`. Max 5 concurrent fetches. |
+| `src/components/CachedImage.tsx` | Drop-in `<img>` replacement that resolves via the image cache. Also exports `useCachedUrl(fetchUrl, cacheKey)` hook for CSS background-image use cases. Uses cancellation flag to prevent setState on unmounted components. |
+| `src/components/TooltipPortal.tsx` | Global tooltip system. Listens for `mouseover`/`mouseout` on `document`, reads `data-tooltip` / `data-tooltip-pos` / `data-tooltip-wrap` attributes, renders via `createPortal` to `document.body` at `z-index: 99999`. Mounted once in `App.tsx`. Use `data-tooltip` instead of native `title=` everywhere — `title=` produces unstyled OS tooltips. |
+| `src/components/CustomSelect.tsx` | Styled portal-based dropdown replacing native `<select>`. Accepts `SelectOption[]` with optional `group` and `disabled`. Positioned via `useLayoutEffect`, flips above trigger if near viewport bottom. Use for all select inputs. |
+| `src/components/LastfmIcon.tsx` | Shared Last.fm SVG logo component. `<LastfmIcon size={16} />`. |
+| `src/store/authStore.ts` | Multi-server support via `ServerProfile[]` + `activeServerId`. `getBaseUrl()` / `getActiveServer()` used by subsonic.ts. Also stores Last.fm session key, username, scrobbling toggle. Persisted via **`localStorage`** (synchronous — do not change to async storage). |
+| `src/store/playerStore.ts` | Playback state, queue, scrobbling at 50% via Last.fm, server queue sync (debounced 1.5s). On `playTrack`: calls `reportNowPlaying` (Navidrome) + `lastfmUpdateNowPlaying` (Last.fm) independently. Persists `currentTrack`, `queue`, `queueIndex`, `currentTime` for cold-start resume. |
+| `src-tauri/src/audio.rs` | Rust audio engine: `audio_play`, `audio_pause`, `audio_resume`, `audio_stop`, `audio_seek`, `audio_set_volume` commands. Emits `audio:playing`, `audio:progress` (500ms), `audio:ended`, `audio:error` events. |
+| `src/store/themeStore.ts` | Theme selection (21 themes), applied as `data-theme` on `<html>` |
+| `src-tauri/src/lib.rs` | Tray menu, media key global shortcuts (disabled on Linux), `exit_app` command |
+| `src/App.tsx` | Root routing, `RequireAuth` guard, `TauriEventBridge` (media keys → store actions), `<TooltipPortal />` mount |
+| `src/i18n.ts` | All translations (en + de + fr + nl) inline. Language persisted in `localStorage('psysonic_language')`. |
+| `src/components/Sidebar.tsx` | Sidebar nav + `UpdateToast` component. On mount (1.5s delay) fetches `https://api.github.com/repos/Psychotoxical/psysonic/releases/latest`, compares `tag_name` against `version` imported directly from `package.json` (build-time constant — more reliable than `getVersion()` from Tauri API), and shows a toast above Statistics only when a newer version exists. Silently no-ops if offline. |
+| `src/components/AlbumHeader.tsx` | Extracted from AlbumDetail — cover art, album info, play/enqueue buttons, bio modal, download. |
+| `src/components/AlbumTrackList.tsx` | Extracted from AlbumDetail — tracklist with star ratings, codec labels, VA artist column, context menu. |
+| `src/components/QueuePanel.tsx` | Queue sidebar. Toolbar with round buttons (Shuffle, Save, Load, Clear, Gapless ∞, Crossfade ≋). Header shows title + count + duration inline. Crossfade popover (range slider 1–10 s) anchored below the ≋ button. Tech info (codec/bitrate) as frosted-glass overlay on cover art. Items get `.context-active` class while their context menu is open. |
+| `src/components/CoverLightbox.tsx` | Full-screen image lightbox. Props: `{ src, alt, onClose }`. ESC key + overlay click to close. Used in `AlbumHeader` and `ArtistDetail`. |
+| `packages/aur/PKGBUILD` | AUR package definition for Arch/CachyOS. Installs a wrapper script at `/usr/bin/psysonic` that sets `GDK_BACKEND=x11`, `WEBKIT_DISABLE_COMPOSITING_MODE=1`, `WEBKIT_DISABLE_DMABUF_RENDERER=1` before launching the binary. |
+
+### Multi-server support
+`authStore` holds a `ServerProfile[]` array and an `activeServerId`. The `ServerProfile` shape is:
+```typescript
+interface ServerProfile {
+  id: string;
+  name: string;
+  url: string;
+  username: string;
+  password: string;
+}
+```
+Use `getActiveServer()` to get the current server, `getBaseUrl()` to get its URL.
+
+### Login / connection flow
+- Connection is tested with `pingWithCredentials(url, username, password)` from `src/api/subsonic.ts` **before** writing anything to the store.
+- Only after a successful ping: `addServer()` + `setActiveServer()` + `setLoggedIn(true)`.
+- `RequireAuth` in `App.tsx` redirects to `/login` if `!isLoggedIn || !activeServerId || servers.length === 0`.
+- **Do not** call `addServer()` before verifying the connection — this avoids a rehydration race condition with Zustand's async storage.
+
+### Auth salt security
+`secureRandomSalt()` in `subsonic.ts` uses `crypto.getRandomValues()` (not `Math.random()`) for all token auth salts.
+
+### Image caching
+`buildCoverArtUrl()` generates a new ephemeral URL on every call (new salt) — the browser cache is useless. All cover art and artist images are cached via:
+- `coverArtCacheKey(id, size)` — stable key: `${serverId}:cover:${id}:${size}`
+- `CachedImage` component or `useCachedUrl` hook — resolve via IndexedDB, fall back to direct URL
+- Use `useCachedUrl` (not `CachedImage`) for CSS `background-image` properties
+- **Gotcha**: `useCachedUrl` / hooks from `CachedImage.tsx` must be called unconditionally, before any early `return` in the component. Derive inputs from nullable state (e.g. `album?.album.coverArt`) rather than placing the hook after guard returns.
+
+### Data flow
+1. `authStore.getBaseUrl()` returns the active server's URL
+2. `subsonic.ts` calls `useAuthStore.getState()` directly (not hooks) to build each request
+3. `playerStore.playTrack()` calls `invoke('audio_play', { url, volume, durationHint })`, calls `reportNowPlaying` (Navidrome) + `lastfmUpdateNowPlaying` (Last.fm), listens for `audio:progress` / `audio:ended` events, triggers scrobble at 50% directly via Last.fm API, and debounces server queue sync
+4. Tauri events (`media:play-pause`, `tray:play-pause`, etc.) are bridged to store actions in `TauriEventBridge` inside `App.tsx`
+5. On cold start (app restart): if `currentTrack` is in localStorage, `resume()` calls `audio_play` + seeks to saved `currentTime`
+
+### Adding a new page
+1. Create `src/pages/MyPage.tsx`
+2. Add a `<Route>` in `AppShell` in `src/App.tsx`
+3. Add a sidebar link in `src/components/Sidebar.tsx`
+4. Add i18n keys to both `enTranslation` and `deTranslation` in `src/i18n.ts`
+
+### Adding a new Subsonic API call
+Add a function to `src/api/subsonic.ts` using the `api<T>()` helper. The helper automatically injects auth params and unwraps `subsonic-response`.
+
+### Themes
+21 themes are available, selectable in Settings via `ThemePicker` (grouped). `themeStore` persists the choice and sets `data-theme` on `<html>`. All component CSS uses semantic tokens (`--accent`, `--text-primary`, etc.) — only the player button gradient and a few decorative elements reference `--ctp-*` palette vars directly, so every theme must define the full `--ctp-*` set.
+
+`--volume-accent` overrides the volume slider colour independently of `--accent` (used by Classic Winamp for orange volume, yellow accent elsewhere).
+
+| Theme | Group | Style | Accent |
+|---|---|---|---|
+| `mocha` | Catppuccin | dark | Mauve |
+| `macchiato` | Catppuccin | medium-dark | Mauve |
+| `frappe` | Catppuccin | medium | Mauve |
+| `latte` | Catppuccin | light | Mauve |
+| `nord` | Nord | Polar Night dark | Frost `#88c0d0` |
+| `nord-snowstorm` | Nord | Snow Storm light | Deep-Blue `#5e81ac` |
+| `nord-frost` | Nord | deep ocean blue | Frost `#88c0d0` |
+| `nord-aurora` | Nord | Polar Night + aurora | Purple `#b48ead` |
+| `gruvbox-dark-hard` | Retro | Gruvbox dark hard | Orange `#fe8019` |
+| `gruvbox-dark-medium` | Retro | Gruvbox dark medium | Orange `#fe8019` |
+| `gruvbox-dark-soft` | Retro | Gruvbox dark soft | Orange `#fe8019` |
+| `gruvbox-light-hard` | Retro | Gruvbox light hard | Orange `#af3a03` |
+| `gruvbox-light-medium` | Retro | Gruvbox light medium | Orange `#af3a03` |
+| `gruvbox-light-soft` | Retro | Gruvbox light soft | Orange `#af3a03` |
+| `tokyo-night` | Tokyo Night | dark blue | Purple `#7aa2f7` |
+| `tokyo-night-storm` | Tokyo Night | stormy blue-gray | Purple `#7aa2f7` |
+| `tokyo-night-light` | Tokyo Night | light | Purple `#7aa2f7` |
+| `classic-winamp` | Psysonic | cool gray-blue dark, LCD glow, Courier New | Yellow `#d4cc46`, volume `#de9b35` |
+| `poison` | Psysonic | dark charcoal, phosphor green LCD glow | Green `#1bd655` |
+| `nucleo` | Psysonic | warm brass/cream light | Gold `#c8a860` |
+| `psychowave` | Psysonic | deep violet synthwave | Purple `#a06ae0` |
+
+**Light-theme gotcha**: The Hero and Fullscreen Player sit on top of album-art backgrounds with dark overlays. Their text colors are hardcoded white (not `var(--text-primary)`) so they stay readable in light themes (Latte, Nord Snowstorm).
+
+### Artists page — initial avatars
+Artist images are intentionally **not loaded** on the Artists overview page (grid + list view) to avoid slow server disk I/O on large libraries. Instead, each artist gets a colour-coded initial avatar: first letter of the name (skipping leading punctuation/numbers), colour deterministically hashed from the name using Catppuccin palette variables. Artist images are still loaded on the individual ArtistDetail page (cached via IndexedDB). In the grid view, the initial avatar is a **circle** (`border-radius: 50%`, `border: 2px solid` with the accent colour) centred inside the card. Name and album count below are centre-aligned.
+
+### Artist cards
+`ArtistCardLocal` uses the same structure as `AlbumCard`: no padding, full-width square cover via `aspect-ratio: 1`, info below. Both use `flex: 0 0 clamp(140px, 15vw, 180px)` inside `.album-grid` so they stay the same size as album cards.
+
+### NowPlayingDropdown — Live button
+`src/components/NowPlayingDropdown.tsx` polls `getNowPlaying` every 10 seconds in the background. Navidrome keeps stale "now playing" entries for several minutes after playback stops. To fix this: entries belonging to the current user (`ownUsername`) are filtered by the **local `isPlaying` state** from `playerStore` — so the badge disappears instantly when the user pauses or stops, without waiting for the server to clear the entry. Clicking an entry navigates to the album page (`/album/:albumId`) if `stream.albumId` is available.
+
+### i18n
+All non-English strings live exclusively in `src/i18n.ts` — never hardcode translated text in `.tsx` files. Four languages: `en`, `de`, `fr`, `nl`. Translation namespaces: `sidebar`, `home`, `hero`, `search`, `nowPlaying`, `contextMenu`, `albumDetail`, `artistDetail`, `favorites`, `randomMix`, `randomAlbums`, `playlists`, `albums`, `artists`, `statistics`, `login`, `common`, `settings`, `help`, `queue`, `player`.
+
+**German terminology**: "Queue" is always "Warteschlange" in German — never leave "Queue" untranslated in DE strings.
+
+### Tauri capabilities
+Tauri v2 capability configs live in `src-tauri/capabilities/`. Schema is auto-generated into `src-tauri/gen/schemas/`. Modify capabilities there when adding new Tauri plugins or IPC commands.
+
+## Release / CI
+
+Releases are triggered by pushing a `v*` tag. The GitHub Actions workflow (`.github/workflows/release.yml`) builds for macOS (arm64 + x86_64), Linux (Ubuntu 24.04 → deb + rpm), and Windows.
+
+The workflow is split into three jobs: `create-release` (creates the GitHub Release with changelog body from CHANGELOG.md), `build-macos-windows` (macOS + Windows via tauri-action), and `build-linux` (Ubuntu 24.04, manual, builds only deb + rpm via `--bundles deb,rpm`).
+
+**AppImage is no longer built.** The AppImage was fundamentally incompatible with non-Ubuntu distros (Arch, Fedora) due to the bundled WebKitGTK conflicting with the system's Mesa/EGL stack.
+
+**Never force-push or move a tag after publishing.** GitHub caches release tarballs — moving a tag causes the AUR and other package managers to build stale code. Bump the patch version instead.
+
+### Linux distribution channels
+| Distro family | Package |
+|---|---|
+| Ubuntu / Debian | `.deb` from GitHub Releases |
+| Fedora / RHEL | `.rpm` from GitHub Releases |
+| Arch / CachyOS | AUR: `yay -S psysonic` or `paru -S psysonic` |
+
+### AUR package (`packages/aur/PKGBUILD`)
+- Maintained at `aur.archlinux.org/packages/psysonic` (account: Psychotoxical)
+- Builds from source using the system's own WebKitGTK — no bundled libs, no EGL issues
+- Installs a wrapper script at `/usr/bin/psysonic` setting `GDK_BACKEND=x11`, `WEBKIT_DISABLE_COMPOSITING_MODE=1`, `WEBKIT_DISABLE_DMABUF_RENDERER=1`
+- **When releasing**: bump `pkgver` in `packages/aur/PKGBUILD`, copy to `~/aur-psysonic/`, run `makepkg --printsrcinfo > .SRCINFO`, commit and push to AUR remote
+
+## Notes
+- Media key shortcuts (`MediaPlayPause`, etc.) are **not registered on Linux** (see `#[cfg(not(target_os = "linux"))]` in `lib.rs`). Spacebar is the keyboard shortcut for play/pause instead.
+- `playerStore` persists `volume`, `repeatMode`, `currentTrack`, `queue`, `queueIndex`, and `currentTime` to `localStorage` via Zustand `partialize`. The audio engine state is runtime-only (Rust side).
+- Auth data is persisted via **`localStorage`** (synchronous Zustand storage). Do **not** switch to `@tauri-apps/plugin-store` for `authStore` — async storage causes a rehydration race condition where `getActiveServer()` returns `undefined` before state is restored.
+- `tauri.conf.json` CSP is set to `null` — a stricter CSP breaks HTTP requests in WebKitGTK on Linux.
+- App logo: `public/logo.png` (used in login page and elsewhere). All platform icons generated from this via `npx tauri icon public/logo.png`.
+- **Audio engine (Rust/rodio)**: `audio_play` downloads the full track via reqwest, decodes with symphonia/rodio `Decoder`, appends to a `Sink`. A generation counter (`AtomicU64`) cancels in-flight downloads when the user skips. Progress is tracked via wall-clock (`seek_offset + elapsed`) clamped to `duration_secs` — **not** `sink.empty()` (unreliable in rodio 0.19). `audio:ended` fires after 2 consecutive ticks where `pos >= dur - 1.0s`. Tauri IPC parameter names are **camelCase** (`durationHint`, not `duration_hint`) — this is a hard-learned gotcha, do not revert.
+- **Seek**: `playerStore.seek()` debounces by 100 ms, then calls `invoke('audio_seek', { seconds })`. The Rust side calls `sink.try_seek()` and updates `seek_offset` + `play_started`.
+- **Cold-start resume**: `resume()` checks `isAudioPaused` flag. If true (warm resume), calls `audio_resume`. If false (cold start after restart), calls `audio_play` with saved URL then `audio_seek` to saved `currentTime`. Position preference: server queue position > 0 → use server; otherwise use localStorage value.
+- **Drag-and-drop**: All drag sources use `dataTransfer.setData('text/plain', ...)` — WebView2 (Windows) does not support custom MIME types like `application/json`. Queue reordering calculates the **drop target index from `e.clientY`** at drop time (iterates `[data-queue-idx]` elements, picks the first whose midpoint is below the cursor). `fromIdx` comes from `dataTransfer` (set in `dragstart`, always reliable). `onDragEnd` clears refs synchronously. All drops are handled by the `<aside>` container — no `onDrop` on individual queue items.
+- **Drag-and-drop cursor (Linux)**: WebKitGTK does not honour `dropEffect` for cursor display — the cursor may show as forbidden or no indicator depending on the compositor (KDE Plasma vs GNOME). DnD works correctly regardless. This is a known WebKitGTK limitation, not fixable from web content.
+- **Fullscreen Player ("Ambient Stage")**: Single centered column — no tracklist. Background uses the artist's `largeImageUrl` from `getArtistInfo()` (falls back to cover art). Ken Burns animation: `inset: -30%`, ±8% translate, 90s cycle. No color orbs (removed — too GPU-intensive). Cover has a slow breathing animation (`cover-breathe` keyframe). Long song titles scroll as a marquee (`MarqueeTitle` component — measures overflow via `getBoundingClientRect` + `ResizeObserver`, animates via CSS custom property `--scroll-amount`). `Track.artistId` is populated from `SubsonicSong.artistId` (Navidrome returns this field) across all 18 track-construction sites.
+- **Sidebar**: Fixed width via CSS `clamp(200px, 15vw, 220px)` — no drag-to-resize. Collapsed state (72px) persisted in `localStorage`. Update notification uses Tauri Shell plugin `open()` to launch the system browser — `<a target="_blank">` does not work inside a Tauri WebView.
+- **Artist page — external links**: Last.fm and Wikipedia buttons open in the system browser via `open()` from `@tauri-apps/plugin-shell`. Button label temporarily changes to "Opened in browser" / "Im Browser geöffnet" for 2.5 s as visual confirmation.
+- **Tracklist columns**: Order is `# | Title | [Artist (VA only)] | Favorite | Rating | Duration | Format`. Format column uses `120px` (NOT `auto` or `1fr`) — `auto` caused misalignment because header and track-row are independent grid containers: "FORMAT" header text is narrower than "MP3 · 320 kbps", so the `fr` title column calculated differently in header vs rows, shifting all subsequent columns. `1fr` fixed alignment but made the format column too wide. Fixed `120px` fits all codec strings (MP3/FLAC/OGG · kbps) and aligns perfectly. Total row uses explicit `grid-column` numbers (not negative indices).
+- **AlbumDetail**: Thin orchestrator (`src/pages/AlbumDetail.tsx`) — state, handlers, `useCachedUrl` hook, renders `AlbumHeader` + `AlbumTrackList` + related albums section. Logic is split into the two extracted components.
+- **Playlists page**: List layout (not card grid) with sort buttons (Name / Tracks / Duration, toggle asc/desc) and a filter input. Play icon and delete button appear on row hover.
+- **Statistics page**: Library stat cards (Artists / Albums / Songs), Recently Played, Most Played, Highest Rated. Last.fm section (when configured): top artists/albums/tracks with period filter + recent scrobbles. No genre chart (removed). Data loaded in parallel via `Promise.allSettled`.
+- **Context menu**: `song` and `queue-item` types both have "Go to Album" (`Disc3` icon, shown only when `song.albumId` exists) and "Favorite" options. Context menu type union: `'song' | 'album' | 'artist' | 'queue-item' | 'album-song'`.
+- **QueuePanel meta box**: Shows title (no link) → artist (linked to `/artist/:id`) → album (linked to `/album/:id`) → year (if available). Cover art is 90×90 px, top-aligned with codec/bitrate frosted-glass overlay at bottom. Default panel width 340 px. Header: title 16px/700, song count + total duration inline in `--accent` colour.
+- **Queue toolbar**: 6 round buttons (`queue-round-btn`, `border-radius: 50%`) centred in a row. Active state: `background: var(--accent); color: var(--ctp-base)`. Crossfade (≋) button: inactive click → enable + open popover; active click → disable + close. Popover: `position: absolute; top: calc(100% + 10px); right: 0; width: 170px` — right-aligned to prevent viewport overflow.
+- **Queue hover**: Queue items use `.context-active` CSS class when their context menu is open, keeping the hover highlight visible.
+- **Random Mix hover**: Row uses `.context-active` CSS class when a context menu is open for that song. `contextMenuSongId` state cleared via `useEffect` when `contextMenu.isOpen` becomes false.
+- **Favorites songs**: Full tracklist layout matching AlbumDetail — `track-row-va` grid with `#`, Title, Artist, Duration columns and a header row. Artist name clickable → artist page. "Add all to queue" button (`btn btn-surface`) next to the section title sends all favorited songs to the queue.
+- **Random Mix — Genre Filter**: `excludeAudiobooks` + `customGenreBlacklist` in `authStore` (persisted). Hardcoded `AUDIOBOOK_GENRES` list in `RandomMix.tsx` and `AUDIOBOOK_GENRES_DISPLAY` in `Settings.tsx` must be kept in sync. Filter checks `song.genre`, `song.title`, and `song.album`. Clickable genre chips in the tracklist let users add genres to the blacklist on the fly.
+- **Random Mix — Super Genre Mix**: 9 super-genres defined in `SUPER_GENRES` constant. Server genres fetched via `getGenres()` on mount; `availableSuperGenres` filters to those with ≥1 keyword match. `loadGenreMix` uses progressive rendering — `setGenreMixSongs` updated after each genre request resolves. Genre list capped at 50 (randomly sampled) so total fetch stays near 50 songs — no over-fetching. `genreMixComplete` state gates the "Play All" button: button stays `btn-surface` with live `n / 50` counter while loading, switches to `btn-primary` only when all songs are ready.
+- **RandomAlbums**: No auto-refresh timer — loads once on mount, manual refresh button only. `loadingRef` guards against concurrent fetches.
+- **Queue shuffle**: `shuffleQueue()` in playerStore keeps current track at index 0, Fisher-Yates shuffles the rest.
+- **Tooltips**: Use `data-tooltip="text"` on any element — never native `title=`. `data-tooltip-pos="top|bottom|left|right"` (default: top). `data-tooltip-wrap` for multi-line. Rendered by `TooltipPortal` in `App.tsx` via `document.body` portal.
+- **Scrobbling**: At 50% playback, `playerStore` calls `lastfmScrobble()` directly. Navidrome is NOT used for scrobbling. Both `reportNowPlaying` (Navidrome) and `lastfmUpdateNowPlaying` (Last.fm) are called on every `playTrack()` — independently, fire-and-forget.
+- **Last.fm API key**: Stored in `.env` as `VITE_LASTFM_API_KEY` / `VITE_LASTFM_API_SECRET`. Bundled into the JS at build time (Vite). Not in git. For desktop apps this is acceptable — Last.fm's own docs acknowledge client-side keys can't be truly hidden.
+- **NowPlayingDropdown refresh**: `spinning` state is separate from `loading` — button is always clickable. Spin lasts min 600 ms via `setTimeout`. Background poll (`loading`) does not block the button.
+- **CoverLightbox**: Shared component (`src/components/CoverLightbox.tsx`). Props: `{ src, alt, onClose }`. ESC + overlay click to close. Used in `AlbumHeader` (album cover) and `ArtistDetail` (artist avatar, wrapped in `.artist-detail-avatar-btn`).
+- **Version**: 1.8.0

LICENSE

@@ -1,21 +1,20 @@
-MIT License
+                    GNU GENERAL PUBLIC LICENSE
+                       Version 3, 29 June 2007
 
-Copyright (c) 2026 Psychotoxical
+ Copyright (C) 2026 Psychotoxical
 
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
 
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+ You should have received a copy of the GNU General Public License
+ along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+ The full license text is available at:
+ https://www.gnu.org/licenses/gpl-3.0.txt

README.md

@@ -1,41 +1,78 @@
 <div align="center">
-  <img src="public/logo.png" alt="Psysonic Logo" width="200"/>
+  <img src="public/logo-psysonic.png" alt="Psysonic Logo" width="200"/>
   <h1>Psysonic</h1>
   <p><strong>A modern, gorgeous, and blazing fast desktop client for Subsonic API compatible music servers (Navidrome, Gonic, etc.).</strong></p>
   
   <p>
     <a href="https://github.com/Psychotoxical/psysonic/releases/latest"><img alt="Latest Release" src="https://img.shields.io/github/v/release/Psychotoxical/psysonic?style=flat-square&color=8839ef"></a>
-    <a href="https://github.com/Psychotoxical/psysonic/blob/main/LICENSE"><img alt="License" src="https://img.shields.io/github/license/Psychotoxical/psysonic?style=flat-square&color=cba6f7"></a>
+    <a href="https://github.com/Psychotoxical/psysonic/blob/main/LICENSE"><img alt="License: GPL v3" src="https://img.shields.io/badge/License-GPLv3-cba6f7?style=flat-square"></a>
     <a href="https://tauri.app/"><img alt="Built with Tauri" src="https://img.shields.io/badge/Built%20with-Tauri-242938?style=flat-square&logo=tauri"></a>
+    <a href="https://aur.archlinux.org/packages/psysonic"><img alt="AUR" src="https://img.shields.io/aur/version/psysonic?style=flat-square&color=1793d1"></a>
   </p>
 </div>
 
 ---
 
-Psysonic is a beautiful desktop music player built completely from the ground up for the modern era. Utilizing **Tauri v2** and **React**, it offers a native-feeling, lightweight, and incredibly fast experience with a stunning UI inspired by the [Catppuccin](https://github.com/catppuccin/catppuccin) aesthetic. 
+Psysonic is a beautiful desktop music player built completely from the ground up for the modern era. Utilizing **Tauri v2** and **React**, it offers a native-feeling, lightweight, and incredibly fast experience with a stunning UI inspired by the [Catppuccin](https://github.com/catppuccin/catppuccin) and [Nord](https://www.nordtheme.com/) aesthetics.
 
 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.
-- ⚡ **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).
+- 🎨 **Gorgeous UI**: 21 deeply integrated themes — Catppuccin, Nord, Retro (Gruvbox), Tokyo Night, and Psysonic originals (Classic Winamp, Poison, Nucleo, Psychowave) — with smooth glassmorphism effects and micro-animations.
+- ⚡ **Blazing Fast**: Built with Rust & Tauri — native audio engine (rodio), minimal RAM usage compared to typical Electron apps.
+- 🌍 **Internationalization (i18n)**: Fully translated into English, German, French, and Dutch.
 - 📻 **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.
-- 🎛️ **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.
+- 🎵 **Last.fm Integration** *(Beta)*: Direct scrobbling, Now Playing updates, love/unlove, Similar Artists, and top stats — no Navidrome configuration required.
+- 💾 **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.
+- 〰️ **Waveform Seekbar**: Canvas-based waveform with a blue-to-mauve gradient and glow effect — click or drag anywhere to seek.
+- 🌊 **MilkDrop Visualizer**: Full-screen Butterchurn/MilkDrop visualizer in the Ambient Stage with hundreds of presets and smooth transitions.
+- 🎛️ **Queue Management**: Drag & drop reordering, shuffle, playlist saving/loading, and server-side queue synchronization.
+- 🎼 **Random Mix**: Generate a random playlist from your entire library. Filter by keyword or pick a Super Genre (Metal, Rock, Electronic, Jazz…) for a focused mix with progressive loading.
+- 🔄 **Update Notifications**: Built-in update checker (on startup + every 10 minutes) that notifies you when a new version is available on GitHub.
+- 🖥️ **Cross-Platform**: Available natively for Windows, macOS, and Linux (including Wayland support).
 
-## 🛡️ Security
+## 🗺️ Roadmap
 
-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.
+### ✅ Completed
+- [x] Native Rust/rodio audio engine (replaces Howler.js)
+- [x] 10-band graphic EQ with built-in and custom presets
+- [x] Crossfade between tracks
+- [x] Replay Gain (track + album mode)
+- [x] Gapless playback *(experimental)*
+- [x] MilkDrop/Butterchurn visualizer
+- [x] Waveform seekbar
+- [x] Last.fm scrobbling, Now Playing & love/unlove *(beta)*
+- [x] Similar Artists via Last.fm, filtered to library
+- [x] Statistics — Last.fm top charts & recent scrobbles
+- [x] Multi-server support
+- [x] IndexedDB image caching
+- [x] Random Mix with keyword filter & Super Genre mix
+- [x] 21 themes: Catppuccin, Nord, Retro (Gruvbox), Tokyo Night, Psysonic originals (Classic Winamp, Poison, Nucleo, Psychowave)
+- [x] Internationalization (English, German, French, Dutch)
+- [x] AUR package (Arch / CachyOS)
+
+### 🚧 In Progress
+- [ ] **Last.fm integration** — stabilising, moving out of beta
+- [ ] **Gapless playback** — edge case stabilisation
+- [ ] **Crossfade** — stability improvements
+
+### 📋 Planned
+- [ ] FLAC seeking fix
+- [ ] General UI polish & visual refinement
+- [ ] More languages
+
+---
+
+## ● Known Limitations
+
+- **Linux (drag & drop cursor feedback)**: Due to a WebKitGTK limitation, the drag cursor does not reflect the drop operation type — it may appear as a "forbidden" symbol or show no indicator at all, depending on the desktop environment. Drag and drop itself works correctly.
+- **FLAC seeking**: Jumping to a position in a FLAC file via the waveform seekbar currently does not work. Seeking in MP3, OGG, and other formats is unaffected. This is a known issue and will be investigated.
 
 ## 📥 Installation
 
@@ -43,7 +80,11 @@ Navigate to the [Releases](https://github.com/Psychotoxical/psysonic/releases) p
 
 - **Windows**: `.exe` or `.msi`
 - **macOS**: `.dmg` (Universal or Apple Silicon)
-- **Linux**: `.AppImage` or `.deb`
+- **Linux (Ubuntu/Debian)**: `.deb` from GitHub Releases
+- **Linux (Fedora/RHEL)**: `.rpm` from GitHub Releases
+- **Linux (Arch/CachyOS)**: AUR — `yay -S psysonic` or `paru -S psysonic`
+
+> The AUR package builds from source using your system's own WebKitGTK — no bundled libs, no EGL/Mesa compatibility issues.
 
 ## 🚀 Getting Started
 
@@ -90,11 +131,6 @@ Contributions are completely welcome! Whether it is translating the app into a n
 
 ## 📄 License
 
-Distributed under the MIT License. See `LICENSE` for more information.
+Distributed under the **GNU General Public License v3.0**. 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>
+This means: you are free to use, study, and modify Psysonic. If you distribute a modified version, you must release it under the same GPL v3 license and keep the original copyright notice intact. You may **not** incorporate this code into proprietary software.

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "psysonic",
-  "version": "0.1.0",
+  "version": "1.4.5",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "psysonic",
-      "version": "0.1.0",
+      "version": "1.4.5",
       "dependencies": {
         "@tauri-apps/api": "^2",
         "@tauri-apps/plugin-dialog": "^2.6.0",
@@ -15,8 +15,10 @@
         "@tauri-apps/plugin-notification": "^2",
         "@tauri-apps/plugin-shell": "^2",
         "@tauri-apps/plugin-store": "^2",
+        "@tauri-apps/plugin-window-state": "^2.4.1",
         "axios": "^1.7.7",
-        "howler": "^2.2.4",
+        "butterchurn": "^2.6.7",
+        "butterchurn-presets": "^2.4.7",
         "i18next": "^25.8.16",
         "lucide-react": "^0.462.0",
         "md5": "^2.3.0",
@@ -28,7 +30,6 @@
       },
       "devDependencies": {
         "@tauri-apps/cli": "^2",
-        "@types/howler": "^2.2.12",
         "@types/md5": "^2.3.5",
         "@types/node": "^25.3.5",
         "@types/react": "^18.3.11",
@@ -1522,6 +1523,15 @@
         "@tauri-apps/api": "^2.8.0"
       }
     },
+    "node_modules/@tauri-apps/plugin-window-state": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/plugin-window-state/-/plugin-window-state-2.4.1.tgz",
+      "integrity": "sha512-OuvdrzyY8Q5Dbzpj+GcrnV1iCeoZbcFdzMjanZMMcAEUNy/6PH5pxZPXpaZLOR7whlzXiuzx0L9EKZbH7zpdRw==",
+      "license": "MIT OR Apache-2.0",
+      "dependencies": {
+        "@tauri-apps/api": "^2.8.0"
+      }
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -1574,13 +1584,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@types/howler": {
-      "version": "2.2.12",
-      "resolved": "https://registry.npmjs.org/@types/howler/-/howler-2.2.12.tgz",
-      "integrity": "sha512-hy769UICzOSdK0Kn1FBk4gN+lswcj1EKRkmiDtMkUGvFfYJzgaDXmVXkSShS2m89ERAatGIPnTUlp2HhfkVo5g==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/@types/md5": {
       "version": "2.3.6",
       "resolved": "https://registry.npmjs.org/@types/md5/-/md5-2.3.6.tgz",
@@ -1664,6 +1667,16 @@
         "proxy-from-env": "^1.1.0"
       }
     },
+    "node_modules/babel-runtime": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
+      "integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==",
+      "license": "MIT",
+      "dependencies": {
+        "core-js": "^2.4.0",
+        "regenerator-runtime": "^0.11.0"
+      }
+    },
     "node_modules/baseline-browser-mapping": {
       "version": "2.10.0",
       "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.0.tgz",
@@ -1711,6 +1724,27 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/butterchurn": {
+      "version": "2.6.7",
+      "resolved": "https://registry.npmjs.org/butterchurn/-/butterchurn-2.6.7.tgz",
+      "integrity": "sha512-BJiRA8L0L2+84uoG2SSfkp0kclBuN+vQKf217pK7pMlwEO2ZEg3MtO2/o+l8Qpr8Nbejg8tmL1ZHD1jmhiaaqg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.0.0",
+        "ecma-proposal-math-extensions": "0.0.2"
+      }
+    },
+    "node_modules/butterchurn-presets": {
+      "version": "2.4.7",
+      "resolved": "https://registry.npmjs.org/butterchurn-presets/-/butterchurn-presets-2.4.7.tgz",
+      "integrity": "sha512-4MdM8ripz/VfH1BCldrIKdAc/1ryJFBDvqlyow6Ivo1frwj0H3duzvSMFC7/wIjAjxb1QpwVHVqGqS9uAFKhpg==",
+      "license": "MIT",
+      "dependencies": {
+        "babel-runtime": "^6.26.0",
+        "ecma-proposal-math-extensions": "0.0.2",
+        "lodash": "^4.17.4"
+      }
+    },
     "node_modules/call-bind-apply-helpers": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
@@ -1773,6 +1807,14 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/core-js": {
+      "version": "2.6.12",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+      "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
+      "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.",
+      "hasInstallScript": true,
+      "license": "MIT"
+    },
     "node_modules/crypt": {
       "version": "0.0.2",
       "resolved": "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz",
@@ -1830,6 +1872,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/ecma-proposal-math-extensions": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/ecma-proposal-math-extensions/-/ecma-proposal-math-extensions-0.0.2.tgz",
+      "integrity": "sha512-80BnDp2Fn7RxXlEr5HHZblniY4aQ97MOAicdWWpSo0vkQiISSE9wLR4SqxKsu4gCtXFBIPPzy8JMhay4NWRg/Q==",
+      "license": "MIT"
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.307",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.307.tgz",
@@ -2110,12 +2158,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/howler": {
-      "version": "2.2.4",
-      "resolved": "https://registry.npmjs.org/howler/-/howler-2.2.4.tgz",
-      "integrity": "sha512-iARIBPgcQrwtEr+tALF+rapJ8qSc+Set2GJQl7xT1MQzWaVkFebdJhR3alVlSiUf5U7nAANKuj3aWpwerocD5w==",
-      "license": "MIT"
-    },
     "node_modules/html-parse-stringify": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
@@ -2194,6 +2236,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.17.23",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.23.tgz",
+      "integrity": "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==",
+      "license": "MIT"
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -2448,6 +2496,12 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/regenerator-runtime": {
+      "version": "0.11.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
+      "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==",
+      "license": "MIT"
+    },
     "node_modules/rollup": {
       "version": "4.59.0",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.59.0.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "psysonic",
-  "version": "1.0.3",
+  "version": "1.8.0",
   "private": true,
   "scripts": {
     "dev": "vite",
@@ -18,8 +18,10 @@
     "@tauri-apps/plugin-notification": "^2",
     "@tauri-apps/plugin-shell": "^2",
     "@tauri-apps/plugin-store": "^2",
+    "@tauri-apps/plugin-window-state": "^2.4.1",
     "axios": "^1.7.7",
-    "howler": "^2.2.4",
+    "butterchurn": "^2.6.7",
+    "butterchurn-presets": "^2.4.7",
     "i18next": "^25.8.16",
     "lucide-react": "^0.462.0",
     "md5": "^2.3.0",
@@ -31,7 +33,6 @@
   },
   "devDependencies": {
     "@tauri-apps/cli": "^2",
-    "@types/howler": "^2.2.12",
     "@types/md5": "^2.3.5",
     "@types/node": "^25.3.5",
     "@types/react": "^18.3.11",

packages/aur/.gitignore

@@ -0,0 +1,4 @@
+src/
+pkg/
+*.tar.zst
+*.tar.gz

packages/aur/PKGBUILD

@@ -0,0 +1,65 @@
+# Maintainer: stelle <stelle@psychotoxical.dev>
+pkgname=psysonic
+pkgver=1.8.0
+pkgrel=1
+pkgdesc="Desktop music player for Subsonic API-compatible servers (Navidrome, Gonic, etc.)"
+arch=('x86_64')
+url="https://github.com/Psychotoxical/psysonic"
+license=('GPL-3.0-only')
+depends=(
+  'webkit2gtk-4.1'
+  'gtk3'
+  'libayatana-appindicator'
+  'openssl'
+  'alsa-lib'
+)
+makedepends=(
+  'npm'
+  'rust'
+  'cargo'
+)
+source=("$pkgname-$pkgver.tar.gz::https://github.com/Psychotoxical/psysonic/archive/refs/tags/v$pkgver.tar.gz")
+sha256sums=('SKIP')
+
+build() {
+  cd "psysonic-$pkgver"
+
+  export CARGO_HOME="$srcdir/cargo-home"
+  export npm_config_cache="$srcdir/npm-cache"
+
+  npm install
+  npm run tauri:build -- --no-bundle
+}
+
+package() {
+  cd "psysonic-$pkgver"
+
+  # Binary (in /usr/lib to make room for the wrapper)
+  install -Dm755 "src-tauri/target/release/psysonic" "$pkgdir/usr/lib/psysonic/psysonic"
+
+  # Wrapper script that sets necessary env vars for WebKitGTK on Wayland
+  install -Dm755 /dev/stdin "$pkgdir/usr/bin/psysonic" <<EOF
+#!/bin/sh
+export GDK_BACKEND=x11
+export WEBKIT_DISABLE_COMPOSITING_MODE=1
+export WEBKIT_DISABLE_DMABUF_RENDERER=1
+exec /usr/lib/psysonic/psysonic "\$@"
+EOF
+
+  # Desktop entry
+  install -Dm644 /dev/stdin "$pkgdir/usr/share/applications/psysonic.desktop" <<EOF
+[Desktop Entry]
+Name=Psysonic
+Comment=Desktop music player for Subsonic API-compatible servers
+Exec=psysonic
+Icon=psysonic
+Terminal=false
+Type=Application
+Categories=AudioVideo;Audio;Music;Player;
+EOF
+
+  # Icons
+  install -Dm644 "src-tauri/icons/32x32.png"      "$pkgdir/usr/share/icons/hicolor/32x32/apps/psysonic.png"
+  install -Dm644 "src-tauri/icons/128x128.png"    "$pkgdir/usr/share/icons/hicolor/128x128/apps/psysonic.png"
+  install -Dm644 "src-tauri/icons/128x128@2x.png" "$pkgdir/usr/share/icons/hicolor/256x256/apps/psysonic.png"
+}

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "psysonic"
-version = "1.0.3"
+version = "1.8.0"
 description = "Psysonic Desktop Music Player"
 authors = []
 license = ""
@@ -30,3 +30,9 @@ tauri-plugin-dialog = "2"
 tauri-plugin-fs = "2"
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"
+rodio = { version = "0.19", default-features = false, features = ["symphonia-all"] }
+reqwest = { version = "0.12", features = ["stream", "json"] }
+md5 = "0.7"
+tokio = { version = "1", features = ["rt", "time"] }
+biquad = "0.4"
+tauri-plugin-window-state = "2.4.1"

src-tauri/capabilities/default.json

@@ -7,7 +7,7 @@
   "permissions": [
     "core:default",
     "shell:default",
-    "shell:allow-open",
+    { "identifier": "shell:allow-open", "allow": [{ "url": "https://**" }] },
     "notification:default",
     "global-shortcut:allow-register",
     "global-shortcut:allow-unregister",
@@ -22,9 +22,15 @@
     "fs:allow-write-file",
     "fs:allow-mkdir",
     "fs:scope-download-recursive",
+    "window-state:allow-save-window-state",
+    "window-state:allow-restore-state",
     "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",
+    "core:window:allow-create",
+    "core:webview:allow-create-webview-window"
   ]
 }

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",{"identifier":"shell:allow-open","allow":[{"url":"https://**"}]},"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","window-state:allow-save-window-state","window-state:allow-restore-state","core:window:allow-set-title","core:window:allow-close","core:window:allow-hide","core:window:allow-show","core:window:allow-set-fullscreen","core:window:allow-is-fullscreen","core:window:allow-create","core:webview:allow-create-webview-window"],"platforms":["linux","macOS","windows"]}}

src-tauri/gen/schemas/desktop-schema.json

@@ -6451,6 +6451,48 @@
           "type": "string",
           "const": "store:deny-values",
           "markdownDescription": "Denies the values command without any pre-configured scope."
+        },
+        {
+          "description": "This permission set configures what kind of\noperations are available from the window state plugin.\n\n#### Granted Permissions\n\nAll operations are enabled by default.\n\n\n#### This default permission set includes:\n\n- `allow-filename`\n- `allow-restore-state`\n- `allow-save-window-state`",
+          "type": "string",
+          "const": "window-state:default",
+          "markdownDescription": "This permission set configures what kind of\noperations are available from the window state plugin.\n\n#### Granted Permissions\n\nAll operations are enabled by default.\n\n\n#### This default permission set includes:\n\n- `allow-filename`\n- `allow-restore-state`\n- `allow-save-window-state`"
+        },
+        {
+          "description": "Enables the filename command without any pre-configured scope.",
+          "type": "string",
+          "const": "window-state:allow-filename",
+          "markdownDescription": "Enables the filename command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the restore_state command without any pre-configured scope.",
+          "type": "string",
+          "const": "window-state:allow-restore-state",
+          "markdownDescription": "Enables the restore_state command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the save_window_state command without any pre-configured scope.",
+          "type": "string",
+          "const": "window-state:allow-save-window-state",
+          "markdownDescription": "Enables the save_window_state command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the filename command without any pre-configured scope.",
+          "type": "string",
+          "const": "window-state:deny-filename",
+          "markdownDescription": "Denies the filename command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the restore_state command without any pre-configured scope.",
+          "type": "string",
+          "const": "window-state:deny-restore-state",
+          "markdownDescription": "Denies the restore_state command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the save_window_state command without any pre-configured scope.",
+          "type": "string",
+          "const": "window-state:deny-save-window-state",
+          "markdownDescription": "Denies the save_window_state command without any pre-configured scope."
         }
       ]
     },

src-tauri/gen/schemas/linux-schema.json

@@ -6451,6 +6451,48 @@
           "type": "string",
           "const": "store:deny-values",
           "markdownDescription": "Denies the values command without any pre-configured scope."
+        },
+        {
+          "description": "This permission set configures what kind of\noperations are available from the window state plugin.\n\n#### Granted Permissions\n\nAll operations are enabled by default.\n\n\n#### This default permission set includes:\n\n- `allow-filename`\n- `allow-restore-state`\n- `allow-save-window-state`",
+          "type": "string",
+          "const": "window-state:default",
+          "markdownDescription": "This permission set configures what kind of\noperations are available from the window state plugin.\n\n#### Granted Permissions\n\nAll operations are enabled by default.\n\n\n#### This default permission set includes:\n\n- `allow-filename`\n- `allow-restore-state`\n- `allow-save-window-state`"
+        },
+        {
+          "description": "Enables the filename command without any pre-configured scope.",
+          "type": "string",
+          "const": "window-state:allow-filename",
+          "markdownDescription": "Enables the filename command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the restore_state command without any pre-configured scope.",
+          "type": "string",
+          "const": "window-state:allow-restore-state",
+          "markdownDescription": "Enables the restore_state command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the save_window_state command without any pre-configured scope.",
+          "type": "string",
+          "const": "window-state:allow-save-window-state",
+          "markdownDescription": "Enables the save_window_state command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the filename command without any pre-configured scope.",
+          "type": "string",
+          "const": "window-state:deny-filename",
+          "markdownDescription": "Denies the filename command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the restore_state command without any pre-configured scope.",
+          "type": "string",
+          "const": "window-state:deny-restore-state",
+          "markdownDescription": "Denies the restore_state command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the save_window_state command without any pre-configured scope.",
+          "type": "string",
+          "const": "window-state:deny-save-window-state",
+          "markdownDescription": "Denies the save_window_state command without any pre-configured scope."
         }
       ]
     },

src-tauri/src/lib.rs

@@ -1,6 +1,8 @@
 // Prevents additional console window on Windows in release, DO NOT REMOVE!!
 #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
 
+mod audio;
+
 use tauri::{
     menu::{MenuBuilder, MenuItemBuilder},
     tray::{MouseButton, MouseButtonState, TrayIconBuilder, TrayIconEvent},
@@ -17,8 +19,69 @@ fn exit_app(app_handle: tauri::AppHandle) {
     app_handle.exit(0);
 }
 
+/// Proxy Last.fm API calls through Rust/reqwest to avoid WebView networking restrictions.
+/// `params` is a list of [key, value] pairs (method must be included).
+/// If `sign` is true an api_sig is computed. If `get` is true, a GET request is made.
+#[tauri::command]
+async fn lastfm_request(
+    params: Vec<[String; 2]>,
+    sign: bool,
+    get: bool,
+    api_key: String,
+    api_secret: String,
+) -> Result<serde_json::Value, String> {
+    use std::collections::HashMap;
+
+    let mut map: HashMap<String, String> = params.into_iter().map(|[k, v]| (k, v)).collect();
+    map.insert("api_key".into(), api_key.clone());
+
+    if sign {
+        let mut keys: Vec<String> = map.keys().cloned().collect();
+        keys.sort();
+        let sig_str: String = keys.iter()
+            .filter(|k| k.as_str() != "format" && k.as_str() != "callback")
+            .map(|k| format!("{}{}", k, map[k]))
+            .collect::<String>();
+        let sig_input = format!("{}{}", sig_str, api_secret);
+        let digest = md5::compute(sig_input.as_bytes());
+        map.insert("api_sig".into(), format!("{:x}", digest));
+    }
+
+    map.insert("format".into(), "json".into());
+
+    let client = reqwest::Client::new();
+    let resp = if get {
+        client
+            .get("https://ws.audioscrobbler.com/2.0/")
+            .query(&map)
+            .header("User-Agent", "psysonic/1.6.0")
+            .send()
+            .await
+    } else {
+        client
+            .post("https://ws.audioscrobbler.com/2.0/")
+            .form(&map)
+            .header("User-Agent", "psysonic/1.6.0")
+            .send()
+            .await
+    }.map_err(|e| e.to_string())?;
+
+    let json: serde_json::Value = resp.json().await.map_err(|e| e.to_string())?;
+
+    if let Some(err) = json.get("error") {
+        return Err(format!("Last.fm {} {}", err, json.get("message").and_then(|m| m.as_str()).unwrap_or("")));
+    }
+
+    Ok(json)
+}
+
+
 pub fn run() {
+    let (audio_engine, _audio_thread) = audio::create_engine();
+
     tauri::Builder::default()
+        .manage(audio_engine)
+        .plugin(tauri_plugin_window_state::Builder::default().build())
         .plugin(tauri_plugin_shell::init())
         .plugin(tauri_plugin_notification::init())
         .plugin(tauri_plugin_global_shortcut::Builder::new().build())
@@ -102,12 +165,29 @@ pub fn run() {
         })
         .on_window_event(|window, event| {
             if let tauri::WindowEvent::CloseRequested { .. } = event {
-                // Emit event so JS can decide: hide to tray or allow close.
-                // JS handles prevent_close via onCloseRequested() in App.tsx.
-                let _ = window.emit("window:close-requested", ());
+                // Only intercept close for the main window (hide to tray).
+                // Browser popup windows (browser_*) close normally.
+                if window.label() == "main" {
+                    let _ = window.emit("window:close-requested", ());
+                }
             }
         })
-        .invoke_handler(tauri::generate_handler![greet, exit_app])
+        .invoke_handler(tauri::generate_handler![
+            greet,
+            exit_app,
+            audio::audio_play,
+            audio::audio_pause,
+            audio::audio_resume,
+            audio::audio_stop,
+            audio::audio_seek,
+            audio::audio_set_volume,
+            audio::audio_set_eq,
+            audio::audio_preload,
+            audio::audio_set_crossfade,
+            audio::audio_set_gapless,
+            audio::audio_chain_preload,
+            lastfm_request,
+        ])
         .run(tauri::generate_context!())
         .expect("error while running Psysonic");
 }

src-tauri/tauri.conf.json

@@ -1,8 +1,8 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "Psysonic",
-  "version": "1.0.3",
-  "identifier": "dev.psysonic.app",
+  "version": "1.8.0",
+  "identifier": "dev.psysonic.player",
   "build": {
     "beforeDevCommand": "npm run dev",
     "devUrl": "http://localhost:1420",
@@ -16,13 +16,14 @@
         "title": "Psysonic",
         "width": 1280,
         "height": 800,
-        "minWidth": 900,
-        "minHeight": 600,
+        "minWidth": 1280,
+        "minHeight": 720,
         "resizable": true,
         "fullscreen": false,
         "decorations": true,
         "transparent": false,
-        "visible": true
+        "visible": true,
+        "dragDropEnabled": false
       }
     ],
     "security": {
@@ -44,6 +45,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

@@ -3,6 +3,8 @@ import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
 import { listen } from '@tauri-apps/api/event';
 import { invoke } from '@tauri-apps/api/core';
 import { getCurrentWindow } from '@tauri-apps/api/window';
+import { PanelRight, PanelRightClose } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
 import Sidebar from './components/Sidebar';
 import PlayerBar from './components/PlayerBar';
 import LiveSearch from './components/LiveSearch';
@@ -21,11 +23,22 @@ 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 NowPlayingPage from './pages/NowPlaying';
 import FullscreenPlayer from './components/FullscreenPlayer';
 import ContextMenu from './components/ContextMenu';
+import DownloadFolderModal from './components/DownloadFolderModal';
+import TooltipPortal from './components/TooltipPortal';
+import ConnectionIndicator from './components/ConnectionIndicator';
+import LastfmIndicator from './components/LastfmIndicator';
+import OfflineOverlay from './components/OfflineOverlay';
+import { useConnectionStatus } from './hooks/useConnectionStatus';
 import { useAuthStore } from './store/authStore';
-import { usePlayerStore } from './store/playerStore';
+import { usePlayerStore, initAudioListeners } from './store/playerStore';
 import { useThemeStore } from './store/themeStore';
+import { useEqStore } from './store/eqStore';
 
 function RequireAuth({ children }: { children: React.ReactNode }) {
   const { isLoggedIn, servers, activeServerId } = useAuthStore();
@@ -34,17 +47,24 @@ function RequireAuth({ children }: { children: React.ReactNode }) {
 }
 
 function AppShell() {
+  const { t } = useTranslation();
   const isFullscreenOpen = usePlayerStore(s => s.isFullscreenOpen);
   const toggleFullscreen = usePlayerStore(s => s.toggleFullscreen);
   const isQueueVisible = usePlayerStore(s => s.isQueueVisible);
+  const toggleQueue = usePlayerStore(s => s.toggleQueue);
   const initializeFromServerQueue = usePlayerStore(s => s.initializeFromServerQueue);
   const currentTrack = usePlayerStore(s => s.currentTrack);
   const isPlaying = usePlayerStore(s => s.isPlaying);
+  const { status: connStatus, isRetrying: connRetrying, retry: connRetry, isLan, serverName } = useConnectionStatus();
 
   useEffect(() => {
     initializeFromServerQueue();
   }, [initializeFromServerQueue]);
 
+  useEffect(() => {
+    useEqStore.getState().syncToRust();
+  }, []);
+
   useEffect(() => {
     const fn = async () => {
       try {
@@ -63,12 +83,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 [queueWidth, setQueueWidth] = useState(340);
   const [isDraggingQueue, setIsDraggingQueue] = useState(false);
 
   useEffect(() => {
@@ -76,24 +94,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 +121,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(200px, 15vw, 220px)',
         '--queue-width': isQueueVisible ? `${queueWidth}px` : '0px'
       } as React.CSSProperties}
       onContextMenu={e => e.preventDefault()}
@@ -124,24 +136,34 @@ 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 />
           <div className="spacer" />
+          <ConnectionIndicator status={connStatus} isLan={isLan} serverName={serverName} />
+          <LastfmIndicator />
           <NowPlayingDropdown />
+          <button
+            className="collapse-btn"
+            onClick={toggleQueue}
+            data-tooltip={t('player.toggleQueue')}
+            data-tooltip-pos="bottom"
+          >
+            {isQueueVisible ? <PanelRightClose size={24} /> : <PanelRight size={24} />}
+          </button>
         </header>
-        <div className="content-body" style={{ padding: 0 }}>
+        <div className="content-body" style={{ padding: 0, position: 'relative' }}>
+          {connStatus === 'disconnected' && (
+            <OfflineOverlay
+              serverName={serverName}
+              onRetry={connRetry}
+              isChecking={connRetrying}
+            />
+          )}
           <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 +172,11 @@ 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="/now-playing" element={<NowPlayingPage />} />
             <Route path="/settings" element={<Settings />} />
+            <Route path="/help" element={<Help />} />
           </Routes>
         </div>
       </main>
@@ -169,6 +194,8 @@ function AppShell() {
         <FullscreenPlayer onClose={toggleFullscreen} />
       )}
       <ContextMenu />
+      <DownloadFolderModal />
+      <TooltipPortal />
     </div>
   );
 }
@@ -180,9 +207,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;
@@ -227,6 +260,10 @@ export default function App() {
     document.documentElement.setAttribute('data-theme', theme);
   }, [theme]);
 
+  useEffect(() => {
+    return initAudioListeners();
+  }, []);
+
   return (
     <BrowserRouter>
       <TauriEventBridge />

src/api/lastfm.ts

@@ -0,0 +1,302 @@
+import { invoke } from '@tauri-apps/api/core';
+import { useAuthStore } from '../store/authStore';
+
+const API_KEY = '9917fb39049225a13bec225ad6d49054';
+const API_SECRET = '03817dda02bee87a178aab7581abae3b';
+
+export function lastfmIsConfigured(): boolean {
+  return Boolean(API_KEY && API_SECRET);
+}
+
+function errMsg(e: unknown): string {
+  if (typeof e === 'string') return e;
+  if (e instanceof Error) return e.message;
+  return String(e);
+}
+
+async function call(params: Record<string, string>, sign = false, get = false): Promise<any> {
+  const entries = Object.entries(params) as [string, string][];
+  try {
+    const result = await invoke('lastfm_request', {
+      params: entries,
+      sign,
+      get,
+      apiKey: API_KEY,
+      apiSecret: API_SECRET,
+    });
+    // Clear session error on any successful authenticated call
+    if (sign) useAuthStore.getState().setLastfmSessionError(false);
+    return result;
+  } catch (e) {
+    // Last.fm error codes 4, 9, 14 = auth/session invalid
+    if (sign && /^Last\.fm (4|9|14)\b/.test(errMsg(e))) {
+      useAuthStore.getState().setLastfmSessionError(true);
+    }
+    throw e;
+  }
+}
+
+export async function lastfmGetToken(): Promise<string> {
+  try {
+    const data = await call({ method: 'auth.getToken' }, false, true);
+    return data.token as string;
+  } catch (e) {
+    throw new Error(errMsg(e));
+  }
+}
+
+export function lastfmAuthUrl(token: string): string {
+  return `https://www.last.fm/api/auth/?api_key=${API_KEY}&token=${token}`;
+}
+
+export async function lastfmGetSession(token: string): Promise<{ key: string; name: string }> {
+  try {
+    const data = await call({ method: 'auth.getSession', token }, true, false);
+    return { key: data.session.key as string, name: data.session.name as string };
+  } catch (e) {
+    throw new Error(errMsg(e));
+  }
+}
+
+export async function lastfmGetSimilarArtists(artistName: string): Promise<string[]> {
+  try {
+    const data = await call({ method: 'artist.getSimilar', artist: artistName, limit: '50' }, false, true);
+    const artists = data?.similarartists?.artist;
+    if (!artists) return [];
+    const arr = Array.isArray(artists) ? artists : [artists];
+    return arr.map((a: any) => a.name as string);
+  } catch {
+    return [];
+  }
+}
+
+export async function lastfmGetAllLovedTracks(
+  username: string,
+  sessionKey: string,
+): Promise<Array<{ title: string; artist: string }>> {
+  const results: Array<{ title: string; artist: string }> = [];
+  let page = 1;
+  const limit = 200;
+
+  while (true) {
+    try {
+      const data = await call({
+        method: 'user.getLovedTracks',
+        user: username,
+        sk: sessionKey,
+        limit: String(limit),
+        page: String(page),
+      }, false, true);
+
+      const tracks = data?.lovedtracks?.track;
+      if (!tracks) break;
+      const arr = Array.isArray(tracks) ? tracks : [tracks];
+      for (const t of arr) {
+        results.push({ title: t.name, artist: t.artist?.name ?? '' });
+      }
+
+      const totalPages = Number(data?.lovedtracks?.['@attr']?.totalPages ?? 1);
+      if (page >= totalPages || page >= 10) break; // max 10 pages = 2000 tracks
+      page++;
+    } catch {
+      break;
+    }
+  }
+
+  return results;
+}
+
+export async function lastfmGetTrackLoved(
+  title: string,
+  artist: string,
+  sessionKey: string,
+): Promise<boolean> {
+  try {
+    const data = await call({ method: 'track.getInfo', track: title, artist, sk: sessionKey }, false, true);
+    return data?.track?.userloved === '1' || data?.track?.userloved === 1;
+  } catch {
+    return false;
+  }
+}
+
+export async function lastfmUpdateNowPlaying(
+  track: { title: string; artist: string; album: string; duration: number },
+  sessionKey: string,
+): Promise<void> {
+  try {
+    await call({
+      method: 'track.updateNowPlaying',
+      track: track.title,
+      artist: track.artist,
+      album: track.album,
+      duration: String(Math.round(track.duration)),
+      sk: sessionKey,
+    }, true, false);
+  } catch {
+    // best effort
+  }
+}
+
+export async function lastfmLoveTrack(
+  track: { title: string; artist: string },
+  sessionKey: string,
+): Promise<void> {
+  try {
+    await call({ method: 'track.love', track: track.title, artist: track.artist, sk: sessionKey }, true, false);
+  } catch {
+    // best effort
+  }
+}
+
+export async function lastfmUnloveTrack(
+  track: { title: string; artist: string },
+  sessionKey: string,
+): Promise<void> {
+  try {
+    await call({ method: 'track.unlove', track: track.title, artist: track.artist, sk: sessionKey }, true, false);
+  } catch {
+    // best effort
+  }
+}
+
+export interface LastfmUserInfo {
+  playcount: number;
+  registeredAt: number; // unix timestamp
+}
+
+export async function lastfmGetUserInfo(
+  username: string,
+  sessionKey: string,
+): Promise<LastfmUserInfo | null> {
+  try {
+    const data = await call({ method: 'user.getInfo', user: username, sk: sessionKey }, false, true);
+    const u = data?.user;
+    if (!u) return null;
+    return {
+      playcount: Number(u.playcount),
+      registeredAt: Number(u.registered?.unixtime ?? 0),
+    };
+  } catch {
+    return null;
+  }
+}
+
+export interface LastfmRecentTrack {
+  name: string;
+  artist: string;
+  album: string;
+  timestamp: number | null; // null = currently playing
+  nowPlaying: boolean;
+}
+
+export async function lastfmGetRecentTracks(
+  username: string,
+  sessionKey: string,
+  limit = 20,
+): Promise<LastfmRecentTrack[]> {
+  try {
+    const data = await call({ method: 'user.getRecentTracks', user: username, sk: sessionKey, limit: String(limit) }, false, true);
+    const items = data?.recenttracks?.track;
+    if (!items) return [];
+    const arr = Array.isArray(items) ? items : [items];
+    return arr.map((t: any) => ({
+      name: t.name,
+      artist: t.artist?.['#text'] ?? t.artist?.name ?? '',
+      album: t.album?.['#text'] ?? '',
+      timestamp: t.date?.uts ? Number(t.date.uts) : null,
+      nowPlaying: t['@attr']?.nowplaying === 'true',
+    }));
+  } catch {
+    return [];
+  }
+}
+
+export type LastfmPeriod = 'overall' | '7day' | '1month' | '3month' | '6month' | '12month';
+
+export interface LastfmTopArtist {
+  name: string;
+  playcount: string;
+}
+
+export interface LastfmTopAlbum {
+  name: string;
+  playcount: string;
+  artist: string;
+}
+
+export interface LastfmTopTrack {
+  name: string;
+  playcount: string;
+  artist: string;
+}
+
+export async function lastfmGetTopArtists(
+  username: string,
+  sessionKey: string,
+  period: LastfmPeriod,
+  limit = 10,
+): Promise<LastfmTopArtist[]> {
+  try {
+    const data = await call({ method: 'user.getTopArtists', user: username, sk: sessionKey, period, limit: String(limit) }, false, true);
+    const items = data?.topartists?.artist;
+    if (!items) return [];
+    const arr = Array.isArray(items) ? items : [items];
+    return arr.map((a: any) => ({ name: a.name, playcount: a.playcount }));
+  } catch {
+    return [];
+  }
+}
+
+export async function lastfmGetTopAlbums(
+  username: string,
+  sessionKey: string,
+  period: LastfmPeriod,
+  limit = 10,
+): Promise<LastfmTopAlbum[]> {
+  try {
+    const data = await call({ method: 'user.getTopAlbums', user: username, sk: sessionKey, period, limit: String(limit) }, false, true);
+    const items = data?.topalbums?.album;
+    if (!items) return [];
+    const arr = Array.isArray(items) ? items : [items];
+    return arr.map((a: any) => ({ name: a.name, playcount: a.playcount, artist: a.artist?.name ?? '' }));
+  } catch {
+    return [];
+  }
+}
+
+export async function lastfmGetTopTracks(
+  username: string,
+  sessionKey: string,
+  period: LastfmPeriod,
+  limit = 10,
+): Promise<LastfmTopTrack[]> {
+  try {
+    const data = await call({ method: 'user.getTopTracks', user: username, sk: sessionKey, period, limit: String(limit) }, false, true);
+    const items = data?.toptracks?.track;
+    if (!items) return [];
+    const arr = Array.isArray(items) ? items : [items];
+    return arr.map((t: any) => ({ name: t.name, playcount: t.playcount, artist: t.artist?.name ?? '' }));
+  } catch {
+    return [];
+  }
+}
+
+export async function lastfmScrobble(
+  track: { title: string; artist: string; album: string; duration: number },
+  timestamp: number,
+  sessionKey: string,
+): Promise<void> {
+  try {
+    await call({
+      method: 'track.scrobble',
+      track: track.title,
+      artist: track.artist,
+      album: track.album,
+      duration: String(Math.round(track.duration)),
+      timestamp: String(Math.floor(timestamp / 1000)),
+      sk: sessionKey,
+    }, true, false);
+  } catch {
+    // best effort
+  }
+}

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;
@@ -73,6 +74,15 @@ export interface SubsonicSong {
   samplingRate?: number;
   channelCount?: number;
   starred?: string;
+  genre?: string;
+  path?: string;
+  albumArtist?: string;
+  replayGain?: {
+    trackGain?: number;
+    albumGain?: number;
+    trackPeak?: number;
+    albumPeak?: number;
+  };
 }
 
 export interface SubsonicPlaylist {
@@ -159,11 +169,22 @@ export async function getAlbumList(
   return data.albumList2?.album ?? [];
 }
 
-export async function getRandomSongs(size = 50): Promise<SubsonicSong[]> {
-  const data = await api<{ randomSongs: { song: SubsonicSong[] } }>('getRandomSongs.view', { size });
+export async function getRandomSongs(size = 50, genre?: string, timeout = 15000): Promise<SubsonicSong[]> {
+  const params: Record<string, string | number> = { size, _t: Date.now() };
+  if (genre) params.genre = genre;
+  const data = await api<{ randomSongs: { song: SubsonicSong[] } }>('getRandomSongs.view', params, timeout);
   return data.randomSongs?.song ?? [];
 }
 
+export async function getSong(id: string): Promise<SubsonicSong | null> {
+  try {
+    const data = await api<{ song: SubsonicSong }>('getSong.view', { id });
+    return data.song ?? null;
+  } catch {
+    return null;
+  }
+}
+
 export async function getAlbum(id: string): Promise<{ album: SubsonicAlbum; songs: SubsonicSong[] }> {
   const data = await api<{ album: SubsonicAlbum & { song: SubsonicSong[] } }>('getAlbum.view', { id });
   const { song, ...album } = data.album;
@@ -303,6 +324,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/AlbumHeader.tsx

@@ -0,0 +1,228 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Play, Star, ExternalLink, X, ChevronLeft, Download, ListPlus, Info } from 'lucide-react';
+import { SubsonicSong, buildCoverArtUrl } from '../api/subsonic';
+import CachedImage from './CachedImage';
+import CoverLightbox from './CoverLightbox';
+import { useTranslation } from 'react-i18next';
+
+function formatDuration(seconds: number): string {
+  const m = Math.floor(seconds / 60);
+  const s = seconds % 60;
+  return `${m}:${s.toString().padStart(2, '0')}`;
+}
+
+function formatSize(bytes?: number): string {
+  if (!bytes) return '';
+  return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+}
+
+function sanitizeHtml(html: string): string {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(html, 'text/html');
+  doc.querySelectorAll('script, style, iframe, object, embed, form, input, button, select, base, meta, link').forEach(el => el.remove());
+  doc.querySelectorAll('*').forEach(el => {
+    Array.from(el.attributes).forEach(attr => {
+      const name = attr.name.toLowerCase();
+      const val = attr.value.toLowerCase().trim();
+      if (
+        name.startsWith('on') ||
+        (name === 'href' && (val.startsWith('javascript:') || val.startsWith('data:'))) ||
+        (name === 'src' && (val.startsWith('javascript:') || val.startsWith('data:')))
+      ) {
+        el.removeAttribute(attr.name);
+      }
+    });
+  });
+  return doc.body.innerHTML;
+}
+
+function BioModal({ bio, onClose }: { bio: string; onClose: () => void }) {
+  const { t } = useTranslation();
+  return (
+    <div className="modal-overlay" onClick={onClose} role="dialog" aria-modal="true" aria-label={t('albumDetail.bioModal')}>
+      <div className="modal-content" onClick={e => e.stopPropagation()}>
+        <button className="modal-close" onClick={onClose} aria-label={t('albumDetail.bioClose')}><X size={18} /></button>
+        <h3 className="modal-title">{t('albumDetail.bioModal')}</h3>
+        <div className="artist-bio" dangerouslySetInnerHTML={{ __html: sanitizeHtml(bio) }} data-selectable />
+      </div>
+    </div>
+  );
+}
+
+
+interface AlbumInfo {
+  id: string;
+  name: string;
+  artist: string;
+  artistId: string;
+  year?: number;
+  genre?: string;
+  coverArt?: string;
+  recordLabel?: string;
+}
+
+interface AlbumHeaderProps {
+  info: AlbumInfo;
+  songs: SubsonicSong[];
+  coverUrl: string;
+  coverKey: string;
+  resolvedCoverUrl: string | null;
+  isStarred: boolean;
+  downloadProgress: number | null;
+  bio: string | null;
+  bioOpen: boolean;
+  onToggleStar: () => void;
+  onDownload: () => void;
+  onPlayAll: () => void;
+  onEnqueueAll: () => void;
+  onBio: () => void;
+  onCloseBio: () => void;
+}
+
+export default function AlbumHeader({
+  info,
+  songs,
+  coverUrl,
+  coverKey,
+  resolvedCoverUrl,
+  isStarred,
+  downloadProgress,
+  bio,
+  bioOpen,
+  onToggleStar,
+  onDownload,
+  onPlayAll,
+  onEnqueueAll,
+  onBio,
+  onCloseBio,
+}: AlbumHeaderProps) {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const [lightboxOpen, setLightboxOpen] = useState(false);
+
+  const totalDuration = songs.reduce((acc, s) => acc + s.duration, 0);
+  const totalSize = songs.reduce((acc, s) => acc + (s.size ?? 0), 0);
+
+  return (
+    <>
+      {bioOpen && bio && <BioModal bio={bio} onClose={onCloseBio} />}
+      {lightboxOpen && info.coverArt && (
+        <CoverLightbox
+          src={buildCoverArtUrl(info.coverArt, 2000)}
+          alt={`${info.name} Cover`}
+          onClose={() => setLightboxOpen(false)}
+        />
+      )}
+
+      <div className="album-detail-header">
+        {resolvedCoverUrl && (
+          <div
+            className="album-detail-bg"
+            style={{ backgroundImage: `url(${resolvedCoverUrl})` }}
+            aria-hidden="true"
+          />
+        )}
+        <div className="album-detail-overlay" aria-hidden="true" />
+
+        <div className="album-detail-content">
+          <button className="btn btn-ghost album-detail-back" onClick={() => navigate(-1)}>
+            <ChevronLeft size={16} /> {t('albumDetail.back')}
+          </button>
+          <div className="album-detail-hero">
+            {coverUrl ? (
+              <button
+                className="album-detail-cover-btn"
+                onClick={() => setLightboxOpen(true)}
+                data-tooltip="Vergrößern"
+                aria-label={`${info.name} Cover vergrößern`}
+              >
+                <CachedImage className="album-detail-cover" src={coverUrl} cacheKey={coverKey} alt={`${info.name} Cover`} />
+              </button>
+            ) : (
+              <div className="album-detail-cover album-cover-placeholder">♪</div>
+            )}
+            <div className="album-detail-meta">
+              <span className="badge album-detail-badge">{t('common.album')}</span>
+              <h1 className="album-detail-title">{info.name}</h1>
+              <p className="album-detail-artist">
+                <button
+                  className="album-detail-artist-link"
+                  data-tooltip={t('albumDetail.goToArtist', { artist: info.artist })}
+                  onClick={() => navigate(`/artist/${info.artistId}`)}
+                >
+                  {info.artist}
+                </button>
+              </p>
+              <div className="album-detail-info">
+                {info.year && <span>{info.year}</span>}
+                {info.genre && <span>· {info.genre}</span>}
+                <span>· {songs.length} Tracks</span>
+                <span>· {formatDuration(totalDuration)}</span>
+                {info.recordLabel && (
+                  <>
+                    <span className="album-info-dot">·</span>
+                    <button
+                      className="album-detail-artist-link"
+                      data-tooltip={t('albumDetail.moreLabelAlbums', { label: info.recordLabel })}
+                      onClick={() => navigate(`/label/${encodeURIComponent(info.recordLabel!)}`)}
+                    >
+                      {info.recordLabel}
+                    </button>
+                  </>
+                )}
+              </div>
+              <div className="album-detail-actions">
+                <div className="album-detail-actions-primary">
+                  <button className="btn btn-primary" id="album-play-all-btn" onClick={onPlayAll}>
+                    <Play size={16} fill="currentColor" /> {t('albumDetail.playAll')}
+                  </button>
+                  <button
+                    className="btn btn-surface"
+                    onClick={onEnqueueAll}
+                    data-tooltip={t('albumDetail.enqueueTooltip')}
+                  >
+                    <ListPlus size={16} /> {t('albumDetail.enqueue')}
+                  </button>
+                </div>
+
+                <button
+                  className="btn btn-ghost"
+                  id="album-star-btn"
+                  onClick={onToggleStar}
+                  data-tooltip={isStarred ? t('albumDetail.favoriteRemove') : t('albumDetail.favoriteAdd')}
+                  style={{ color: isStarred ? 'var(--accent)' : 'inherit', border: isStarred ? '1px solid var(--accent)' : undefined }}
+                >
+                  <Star size={16} fill={isStarred ? 'currentColor' : 'none'} />
+                  {t('albumDetail.favorite')}
+                </button>
+
+                <button className="btn btn-ghost" id="album-bio-btn" onClick={onBio}>
+                  <ExternalLink size={16} /> {t('albumDetail.artistBio')}
+                </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={onDownload}>
+                    <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>
+        </div>
+      </div>
+    </>
+  );
+}

src/components/AlbumTrackList.tsx

@@ -0,0 +1,186 @@
+import React from 'react';
+import { Play, Star } from 'lucide-react';
+import { SubsonicSong } from '../api/subsonic';
+import { Track } from '../store/playerStore';
+import { useTranslation } from 'react-i18next';
+
+function formatDuration(seconds: number): string {
+  const m = Math.floor(seconds / 60);
+  const s = seconds % 60;
+  return `${m}:${s.toString().padStart(2, '0')}`;
+}
+
+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`);
+  return parts.join(' · ');
+}
+
+function StarRating({ value, onChange }: { value: number; onChange: (r: number) => void }) {
+  const { t } = useTranslation();
+  const [hover, setHover] = React.useState(0);
+  return (
+    <div className="star-rating" role="radiogroup" aria-label={t('albumDetail.ratingLabel')}>
+      {[1, 2, 3, 4, 5].map(n => (
+        <button
+          key={n}
+          className={`star ${(hover || value) >= n ? 'filled' : ''}`}
+          onMouseEnter={() => setHover(n)}
+          onMouseLeave={() => setHover(0)}
+          onClick={() => onChange(n)}
+          aria-label={`${n}`}
+          role="radio"
+          aria-checked={(hover || value) >= n}
+        >
+          ★
+        </button>
+      ))}
+    </div>
+  );
+}
+
+interface AlbumTrackListProps {
+  songs: SubsonicSong[];
+  hasVariousArtists: boolean;
+  currentTrack: Track | null;
+  isPlaying: boolean;
+  hoveredSongId: string | null;
+  setHoveredSongId: (id: string | null) => void;
+  ratings: Record<string, number>;
+  starredSongs: Set<string>;
+  onPlaySong: (song: SubsonicSong) => void;
+  onRate: (songId: string, rating: number) => void;
+  onToggleSongStar: (song: SubsonicSong, e: React.MouseEvent) => void;
+  onContextMenu: (x: number, y: number, track: Track, type: 'song' | 'album' | 'artist' | 'queue-item' | 'album-song') => void;
+}
+
+export default function AlbumTrackList({
+  songs,
+  hasVariousArtists,
+  currentTrack,
+  isPlaying,
+  hoveredSongId,
+  setHoveredSongId,
+  ratings,
+  starredSongs,
+  onPlaySong,
+  onRate,
+  onToggleSongStar,
+  onContextMenu,
+}: AlbumTrackListProps) {
+  const { t } = useTranslation();
+  const totalDuration = songs.reduce((acc, s) => acc + s.duration, 0);
+
+  const discs = new Map<number, SubsonicSong[]>();
+  songs.forEach(song => {
+    const disc = song.discNumber ?? 1;
+    if (!discs.has(disc)) discs.set(disc, []);
+    discs.get(disc)!.push(song);
+  });
+  const discNums = Array.from(discs.keys()).sort((a, b) => a - b);
+  const isMultiDisc = discNums.length > 1;
+
+  const makeTrack = (song: SubsonicSong): 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, track: song.track, year: song.year,
+    bitRate: song.bitRate, suffix: song.suffix, userRating: song.userRating,
+  });
+
+  return (
+    <div className="tracklist">
+      <div className={`tracklist-header${hasVariousArtists ? ' tracklist-va' : ''}`}>
+        <div className="col-center">#</div>
+        <div>{t('albumDetail.trackTitle')}</div>
+        {hasVariousArtists && <div>{t('albumDetail.trackArtist')}</div>}
+        <div className="col-center">{t('albumDetail.trackFavorite')}</div>
+        <div className="col-center">{t('albumDetail.trackRating')}</div>
+        <div className="col-center">{t('albumDetail.trackDuration')}</div>
+        <div>{t('albumDetail.trackFormat')}</div>
+      </div>
+
+      {discNums.map(discNum => (
+        <div key={discNum}>
+          {isMultiDisc && (
+            <div className="disc-header">
+              <span className="disc-icon">💿</span>
+              CD {discNum}
+            </div>
+          )}
+          {discs.get(discNum)!.map((song, i) => (
+            <div
+              key={song.id}
+              className={`track-row${hasVariousArtists ? ' track-row-va' : ''}${currentTrack?.id === song.id ? ' active' : ''}`}
+              onMouseEnter={() => setHoveredSongId(song.id)}
+              onMouseLeave={() => setHoveredSongId(null)}
+              onDoubleClick={() => onPlaySong(song)}
+              onContextMenu={e => {
+                e.preventDefault();
+                onContextMenu(e.clientX, e.clientY, makeTrack(song), 'album-song');
+              }}
+              role="row"
+              draggable
+              onDragStart={e => {
+                e.dataTransfer.effectAllowed = 'copy';
+                e.dataTransfer.setData('text/plain', JSON.stringify({ type: 'song', track: makeTrack(song) }));
+              }}
+            >
+              <div
+                className="track-num"
+                style={{
+                  cursor: hoveredSongId === song.id ? 'pointer' : 'default',
+                  color: (hoveredSongId === song.id || currentTrack?.id === song.id) ? 'var(--accent)' : undefined,
+                }}
+                onClick={() => onPlaySong(song)}
+              >
+                {hoveredSongId === song.id && currentTrack?.id !== song.id
+                  ? <Play size={13} fill="currentColor" />
+                  : currentTrack?.id === song.id && isPlaying
+                    ? <div className="eq-bars"><span className="eq-bar" /><span className="eq-bar" /><span className="eq-bar" /></div>
+                    : 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>
+              </div>
+              {hasVariousArtists && (
+                <div className="track-artist-cell">
+                  <span className="track-artist">{song.artist}</span>
+                </div>
+              )}
+              <div className="track-star-cell">
+                <button
+                  className="btn btn-ghost track-star-btn"
+                  onClick={e => onToggleSongStar(song, e)}
+                  data-tooltip={starredSongs.has(song.id) ? t('albumDetail.favoriteRemove') : t('albumDetail.favoriteAdd')}
+                  style={{ color: starredSongs.has(song.id) ? 'var(--accent)' : 'var(--text-muted)' }}
+                >
+                  <Star size={14} fill={starredSongs.has(song.id) ? 'currentColor' : 'none'} />
+                </button>
+              </div>
+              <StarRating
+                value={ratings[song.id] ?? song.userRating ?? 0}
+                onChange={r => onRate(song.id, r)}
+              />
+              <div className="track-duration">
+                {formatDuration(song.duration)}
+              </div>
+              <div className="track-meta">
+                {(song.suffix || song.bitRate) && (
+                  <span className="track-codec">{codecLabel(song)}</span>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      ))}
+
+      <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>
+  );
+}

src/components/ArtistCardLocal.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import { SubsonicArtist, buildCoverArtUrl } from '../api/subsonic';
+import { SubsonicArtist, buildCoverArtUrl, coverArtCacheKey } from '../api/subsonic';
 import { useNavigate } from 'react-router-dom';
 import { Users } from 'lucide-react';
+import CachedImage from './CachedImage';
 
 interface Props {
   artist: SubsonicArtist;
@@ -12,16 +13,14 @@ export default function ArtistCardLocal({ artist }: Props) {
   const coverId = artist.coverArt || artist.id;
 
   return (
-    <div 
-      className="artist-card"
-      onClick={() => navigate(`/artist/${artist.id}`)}
-    >
-      <div className="artist-card-avatar" style={{ position: 'relative', overflow: 'hidden' }}>
+    <div className="artist-card" onClick={() => navigate(`/artist/${artist.id}`)}>
+      <div className="artist-card-avatar">
         {coverId ? (
-          <img 
-            src={buildCoverArtUrl(coverId, 200)} 
+          <CachedImage
+            src={buildCoverArtUrl(coverId, 300)}
+            cacheKey={coverArtCacheKey(coverId, 300)}
             alt={artist.name}
-            style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+            loading="lazy"
             onError={(e) => {
               e.currentTarget.style.display = 'none';
               e.currentTarget.parentElement?.classList.add('fallback-visible');
@@ -31,14 +30,14 @@ export default function ArtistCardLocal({ artist }: Props) {
           <Users size={32} color="var(--text-muted)" />
         )}
       </div>
-      <div className="artist-card-name" data-tooltip={artist.name}>
-        {artist.name}
+      <div className="artist-card-info">
+        <span className="artist-card-name" data-tooltip={artist.name}>{artist.name}</span>
+        {typeof artist.albumCount === 'number' && (
+          <span className="artist-card-meta">
+            {artist.albumCount} {artist.albumCount === 1 ? 'Album' : 'Alben'}
+          </span>
+        )}
       </div>
-      {typeof artist.albumCount === 'number' && (
-        <div className="artist-card-meta">
-          {artist.albumCount} {artist.albumCount === 1 ? 'Album' : 'Alben'}
-        </div>
-      )}
     </div>
   );
 }

src/components/ArtistRow.tsx

@@ -59,10 +59,10 @@ export default function ArtistRow({ title, artists, moreLink, moreText, onLoadMo
   if (artists.length === 0) return null;
 
   return (
-    <section className="artist-row-section">
-      <div className="artist-row-header">
+    <section className="album-row-section">
+      <div className="album-row-header">
         <h2 className="section-title" style={{ marginBottom: 0 }}>{title}</h2>
-        <div className="artist-row-nav">
+        <div className="album-row-nav">
           <button 
             className={`nav-btn ${!showLeft ? 'disabled' : ''}`} 
             onClick={() => scroll('left')}

src/components/CachedImage.tsx

@@ -0,0 +1,23 @@
+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; }
+    let cancelled = false;
+    getCachedUrl(fetchUrl, cacheKey).then(url => { if (!cancelled) setResolved(url); });
+    return () => { cancelled = true; };
+  }, [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/ConnectionIndicator.tsx

@@ -0,0 +1,38 @@
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { ConnectionStatus } from '../hooks/useConnectionStatus';
+
+interface Props {
+  status: ConnectionStatus;
+  isLan: boolean;
+  serverName: string;
+}
+
+export default function ConnectionIndicator({ status, isLan, serverName }: Props) {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+
+  const label = isLan ? 'LAN' : t('connection.extern');
+  const tooltip =
+    status === 'connected'
+      ? t('connection.connectedTo', { server: serverName })
+      : status === 'disconnected'
+      ? t('connection.disconnectedFrom', { server: serverName })
+      : t('connection.checking');
+
+  return (
+    <div
+      className="connection-indicator"
+      style={{ cursor: 'pointer' }}
+      onClick={() => navigate('/settings', { state: { tab: 'server' } })}
+      data-tooltip={tooltip}
+      data-tooltip-pos="bottom"
+    >
+      <div className={`connection-led connection-led--${status}`} />
+      <div className="connection-meta">
+        <span className="connection-type">{label}</span>
+        <span className="connection-server">{serverName}</span>
+      </div>
+    </div>
+  );
+}

src/components/ContextMenu.tsx

@@ -1,9 +1,11 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Play, ListPlus, Radio, Star, Download, ChevronRight, User } from 'lucide-react';
+import { Play, ListPlus, Radio, Star, Download, ChevronRight, User, Disc3, Heart } from 'lucide-react';
+import { lastfmLoveTrack, lastfmUnloveTrack } from '../api/lastfm';
 import { usePlayerStore, Track } from '../store/playerStore';
 import { SubsonicAlbum, SubsonicArtist, star, unstar, getSimilarSongs2, getTopSongs, buildDownloadUrl, getAlbum } from '../api/subsonic';
 import { useNavigate } from 'react-router-dom';
 import { useAuthStore } from '../store/authStore';
+import { useDownloadModalStore } from '../store/downloadModalStore';
 import { open } from '@tauri-apps/plugin-shell';
 import { writeFile } from '@tauri-apps/plugin-fs';
 import { join } from '@tauri-apps/api/path';
@@ -19,8 +21,9 @@ function sanitizeFilename(name: string): string {
 
 export default function ContextMenu() {
   const { t } = useTranslation();
-  const { contextMenu, closeContextMenu, playTrack, enqueue, queue, currentTrack, removeTrack } = usePlayerStore();
+  const { contextMenu, closeContextMenu, playTrack, enqueue, queue, currentTrack, removeTrack, lastfmLovedCache, setLastfmLovedForSong } = usePlayerStore();
   const auth = useAuthStore();
+  const requestDownloadFolder = useDownloadModalStore(s => s.requestFolder);
   const navigate = useNavigate();
   const menuRef = useRef<HTMLDivElement>(null);
 
@@ -62,7 +65,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);
@@ -74,25 +77,16 @@ export default function ContextMenu() {
 
   const downloadAlbum = async (albumName: string, albumId: string) => {
     try {
+      const folder = auth.downloadFolder || await requestDownloadFolder();
+      if (!folder) return;
+
       const url = buildDownloadUrl(albumId);
       const response = await fetch(url);
       if (!response.ok) throw new Error(`HTTP ${response.status}`);
       const blob = await response.blob();
-
-      if (auth.downloadFolder) {
-        const buffer = await blob.arrayBuffer();
-        const path = await join(auth.downloadFolder, `${sanitizeFilename(albumName)}.zip`);
-        await writeFile(path, new Uint8Array(buffer));
-      } else {
-        const blobUrl = URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.href = blobUrl;
-        a.download = `${sanitizeFilename(albumName)}.zip`;
-        document.body.appendChild(a);
-        a.click();
-        document.body.removeChild(a);
-        setTimeout(() => URL.revokeObjectURL(blobUrl), 2000);
-      }
+      const buffer = await blob.arrayBuffer();
+      const path = await join(folder, `${sanitizeFilename(albumName)}.zip`);
+      await writeFile(path, new Uint8Array(buffer));
     } catch (e) {
       console.error('Download failed:', e);
     }
@@ -137,7 +131,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);
@@ -146,12 +140,32 @@ export default function ContextMenu() {
                 </div>
               )}
               <div className="context-menu-divider" />
+              {song.albumId && (
+                <div className="context-menu-item" onClick={() => handleAction(() => navigate(`/album/${song.albumId}`))}>
+                  <Disc3 size={14} /> {t('contextMenu.openAlbum')}
+                </div>
+              )}
               <div className="context-menu-item" onClick={() => handleAction(() => startRadio(song.artist, song.artist))}>
                 <Radio size={14} /> {t('contextMenu.startRadio')}
               </div>
               <div className="context-menu-item" onClick={() => handleAction(() => star(song.id, 'song'))}>
                 <Star size={14} /> {t('contextMenu.favorite')}
               </div>
+              {auth.lastfmSessionKey && (() => {
+                const loveKey = `${song.title}::${song.artist}`;
+                const loved = lastfmLovedCache[loveKey] ?? false;
+                return (
+                  <div className="context-menu-item" onClick={() => handleAction(() => {
+                    const newLoved = !loved;
+                    setLastfmLovedForSong(song.title, song.artist, newLoved);
+                    if (newLoved) lastfmLoveTrack(song, auth.lastfmSessionKey);
+                    else lastfmUnloveTrack(song, auth.lastfmSessionKey);
+                  })}>
+                    <Heart size={14} fill={loved ? 'currentColor' : 'none'} style={{ color: loved ? '#e31c23' : undefined }} />
+                    {loved ? t('contextMenu.lfmUnlove') : t('contextMenu.lfmLove')}
+                  </div>
+                );
+              })()}
             </>
           );
         })()}
@@ -205,6 +219,29 @@ export default function ContextMenu() {
                 {t('contextMenu.removeFromQueue')}
               </div>
               <div className="context-menu-divider" />
+              {song.albumId && (
+                <div className="context-menu-item" onClick={() => handleAction(() => navigate(`/album/${song.albumId}`))}>
+                  <Disc3 size={14} /> {t('contextMenu.openAlbum')}
+                </div>
+              )}
+              <div className="context-menu-item" onClick={() => handleAction(() => star(song.id, 'song'))}>
+                <Star size={14} /> {t('contextMenu.favorite')}
+              </div>
+              {auth.lastfmSessionKey && (() => {
+                const loveKey = `${song.title}::${song.artist}`;
+                const loved = lastfmLovedCache[loveKey] ?? false;
+                return (
+                  <div className="context-menu-item" onClick={() => handleAction(() => {
+                    const newLoved = !loved;
+                    setLastfmLovedForSong(song.title, song.artist, newLoved);
+                    if (newLoved) lastfmLoveTrack(song, auth.lastfmSessionKey);
+                    else lastfmUnloveTrack(song, auth.lastfmSessionKey);
+                  })}>
+                    <Heart size={14} fill={loved ? 'currentColor' : 'none'} style={{ color: loved ? '#e31c23' : undefined }} />
+                    {loved ? t('contextMenu.lfmUnlove') : t('contextMenu.lfmLove')}
+                  </div>
+                );
+              })()}
               <div className="context-menu-item" onClick={() => handleAction(() => startRadio(song.artist, song.artist))}>
                 <Radio size={14} /> {t('contextMenu.startRadio')}
               </div>

src/components/CoverLightbox.tsx

@@ -0,0 +1,28 @@
+import React, { useEffect } from 'react';
+import { X } from 'lucide-react';
+
+interface Props {
+  src: string;
+  alt: string;
+  onClose: () => void;
+}
+
+export default function CoverLightbox({ src, alt, onClose }: Props) {
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [onClose]);
+
+  return (
+    <div className="cover-lightbox-overlay" onClick={onClose} role="dialog" aria-modal="true" aria-label={alt}>
+      <button className="cover-lightbox-close" onClick={onClose} aria-label="Close"><X size={20} /></button>
+      <img
+        className="cover-lightbox-img"
+        src={src}
+        alt={alt}
+        onClick={e => e.stopPropagation()}
+      />
+    </div>
+  );
+}

src/components/CustomSelect.tsx

@@ -0,0 +1,115 @@
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { ChevronDown } from 'lucide-react';
+
+export interface SelectOption {
+  value: string;
+  label: string;
+  group?: string; // group label — shown as non-selectable header when it changes
+  disabled?: boolean;
+}
+
+interface Props {
+  value: string;
+  options: SelectOption[];
+  onChange: (value: string) => void;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export default function CustomSelect({ value, options, onChange, className = '', style }: Props) {
+  const [open, setOpen] = useState(false);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+  const [dropStyle, setDropStyle] = useState<React.CSSProperties>({});
+
+  const selected = options.find(o => o.value === value);
+
+  useLayoutEffect(() => {
+    if (!open || !triggerRef.current) return;
+    const rect = triggerRef.current.getBoundingClientRect();
+    const MARGIN = 6;
+    const maxH = 240;
+    const spaceBelow = window.innerHeight - rect.bottom - MARGIN;
+    const spaceAbove = rect.top - MARGIN;
+    const useAbove = spaceBelow < 80 && spaceAbove > spaceBelow;
+
+    setDropStyle({
+      position: 'fixed',
+      left: rect.left,
+      width: rect.width,
+      ...(useAbove
+        ? { bottom: window.innerHeight - rect.top + MARGIN }
+        : { top: rect.bottom + MARGIN }),
+      maxHeight: Math.min(maxH, useAbove ? spaceAbove : spaceBelow),
+      zIndex: 99998,
+    });
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onDown = (e: MouseEvent) => {
+      if (
+        !triggerRef.current?.contains(e.target as Node) &&
+        !listRef.current?.contains(e.target as Node)
+      ) setOpen(false);
+    };
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') setOpen(false); };
+    document.addEventListener('mousedown', onDown);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('mousedown', onDown);
+      document.removeEventListener('keydown', onKey);
+    };
+  }, [open]);
+
+  return (
+    <>
+      <button
+        ref={triggerRef}
+        type="button"
+        className={`custom-select-trigger ${className}`}
+        style={style}
+        onClick={() => setOpen(v => !v)}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+      >
+        <span className="custom-select-label">{selected?.label ?? value}</span>
+        <ChevronDown size={14} className={`custom-select-chevron ${open ? 'open' : ''}`} />
+      </button>
+
+      {open && createPortal(
+        <div
+          ref={listRef}
+          className="custom-select-dropdown"
+          style={dropStyle}
+          role="listbox"
+        >
+          {options.reduce<React.ReactNode[]>((acc, opt, i) => {
+            const prevGroup = i > 0 ? options[i - 1].group : undefined;
+            if (opt.group && opt.group !== prevGroup) {
+              acc.push(
+                <div key={`group-${opt.group}`} className="custom-select-group-label">
+                  {opt.group}
+                </div>
+              );
+            }
+            acc.push(
+              <div
+                key={opt.value}
+                className={`custom-select-option ${opt.value === value ? 'selected' : ''} ${opt.disabled ? 'disabled' : ''}`}
+                role="option"
+                aria-selected={opt.value === value}
+                onMouseDown={() => { if (!opt.disabled) { onChange(opt.value); setOpen(false); } }}
+              >
+                {opt.label}
+              </div>
+            );
+            return acc;
+          }, [])}
+        </div>,
+        document.body
+      )}
+    </>
+  );
+}

src/components/DownloadFolderModal.tsx

@@ -0,0 +1,56 @@
+import { FolderOpen } from 'lucide-react';
+import { open as openDialog } from '@tauri-apps/plugin-dialog';
+import { useTranslation } from 'react-i18next';
+import { useDownloadModalStore } from '../store/downloadModalStore';
+import { useAuthStore } from '../store/authStore';
+
+export default function DownloadFolderModal() {
+  const { isOpen, folder, remember, setFolder, setRemember, confirm, cancel } = useDownloadModalStore();
+  const setDownloadFolder = useAuthStore(s => s.setDownloadFolder);
+  const { t } = useTranslation();
+
+  const handleBrowse = async () => {
+    const selected = await openDialog({ directory: true, multiple: false, title: t('common.chooseDownloadFolder') });
+    if (selected && typeof selected === 'string') setFolder(selected);
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <>
+      <div className="eq-popup-backdrop" onClick={cancel} style={{ zIndex: 210 }} />
+      <div className="eq-popup" style={{ zIndex: 211, width: 'min(480px, 92vw)', gap: 0 }}>
+        <div className="eq-popup-header">
+          <span className="eq-popup-title">{t('common.chooseDownloadFolder')}</span>
+        </div>
+
+        <div style={{ padding: '16px 0 12px' }}>
+          <div className="download-folder-pick-row">
+            <span className="download-folder-path">
+              {folder || t('common.noFolderSelected')}
+            </span>
+            <button className="btn btn-ghost" onClick={handleBrowse} style={{ flexShrink: 0 }}>
+              <FolderOpen size={15} /> {t('settings.pickFolder')}
+            </button>
+          </div>
+
+          <label className="download-remember-row">
+            <input type="checkbox" checked={remember} onChange={e => setRemember(e.target.checked)} />
+            <span>{t('common.rememberDownloadFolder')}</span>
+          </label>
+        </div>
+
+        <div className="download-modal-actions">
+          <button className="btn btn-ghost" onClick={cancel}>{t('common.cancel')}</button>
+          <button
+            className="btn btn-primary"
+            onClick={() => confirm(setDownloadFolder)}
+            disabled={!folder}
+          >
+            {t('common.download')}
+          </button>
+        </div>
+      </div>
+    </>
+  );
+}

src/components/Equalizer.tsx

@@ -0,0 +1,319 @@
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Save, Trash2, RotateCcw } from 'lucide-react';
+import CustomSelect from './CustomSelect';
+import { useEqStore, EQ_BANDS, BUILTIN_PRESETS } from '../store/eqStore';
+import { useThemeStore } from '../store/themeStore';
+
+// ─── Frequency response canvas ────────────────────────────────────────────────
+
+const SAMPLE_RATE = 44100;
+const EQ_Q = 1.41;
+
+function biquadPeakResponse(freq: number, centerHz: number, gainDb: number, sampleRate: number): number {
+  if (Math.abs(gainDb) < 0.01) return 0;
+  const w0 = (2 * Math.PI * centerHz) / sampleRate;
+  const A = Math.pow(10, gainDb / 40);
+  const alpha = Math.sin(w0) / (2 * EQ_Q);
+  const b0 = 1 + alpha * A;
+  const b1 = -2 * Math.cos(w0);
+  const b2 = 1 - alpha * A;
+  const a0 = 1 + alpha / A;
+  const a1 = -2 * Math.cos(w0);
+  const a2 = 1 - alpha / A;
+  const w = (2 * Math.PI * freq) / sampleRate;
+  const cosW = Math.cos(w), sinW = Math.sin(w);
+  const cos2W = Math.cos(2 * w), sin2W = Math.sin(2 * w);
+  const numRe = b0 + b1 * cosW + b2 * cos2W;
+  const numIm = - b1 * sinW - b2 * sin2W;
+  const denRe = a0 + a1 * cosW + a2 * cos2W;
+  const denIm = - a1 * sinW - a2 * sin2W;
+  const numMag2 = numRe * numRe + numIm * numIm;
+  const denMag2 = denRe * denRe + denIm * denIm;
+  return 10 * Math.log10(numMag2 / denMag2);
+}
+
+function drawCurve(canvas: HTMLCanvasElement, gains: number[], accentColor: string, bgColor: string, textColor: string) {
+  const dpr = window.devicePixelRatio || 1;
+  const W = canvas.offsetWidth;
+  const H = canvas.offsetHeight;
+  canvas.width = W * dpr;
+  canvas.height = H * dpr;
+  const ctx = canvas.getContext('2d')!;
+  ctx.scale(dpr, dpr);
+
+  const fMin = 20, fMax = 20000;
+  const dbMin = -13, dbMax = 13;
+  const padL = 36, padR = 8, padT = 8, padB = 1;
+  const innerW = W - padL - padR;
+  const innerH = H - padT - padB;
+
+  const freqToX = (f: number) =>
+    padL + (Math.log10(f / fMin) / Math.log10(fMax / fMin)) * innerW;
+  const dbToY = (db: number) =>
+    padT + ((dbMax - db) / (dbMax - dbMin)) * innerH;
+
+  // Background
+  ctx.fillStyle = bgColor;
+  ctx.fillRect(0, 0, W, H);
+
+  // Grid: dB lines
+  ctx.strokeStyle = 'rgba(255,255,255,0.06)';
+  ctx.lineWidth = 1;
+  [-12, -6, 0, 6, 12].forEach(db => {
+    const y = dbToY(db);
+    ctx.beginPath();
+    ctx.moveTo(padL, y);
+    ctx.lineTo(W - padR, y);
+    ctx.stroke();
+    ctx.fillStyle = textColor;
+    ctx.font = '9px monospace';
+    ctx.textAlign = 'right';
+    ctx.fillText(db === 0 ? '0' : (db > 0 ? `+${db}` : `${db}`), padL - 4, y + 3);
+  });
+
+  // Grid: frequency lines
+  [31, 62, 125, 250, 500, 1000, 2000, 4000, 8000, 16000].forEach(f => {
+    const x = freqToX(f);
+    ctx.strokeStyle = 'rgba(255,255,255,0.05)';
+    ctx.beginPath();
+    ctx.moveTo(x, padT);
+    ctx.lineTo(x, H - padB);
+    ctx.stroke();
+  });
+
+  // Zero line (brighter)
+  ctx.strokeStyle = 'rgba(255,255,255,0.18)';
+  ctx.lineWidth = 1;
+  ctx.beginPath();
+  ctx.moveTo(padL, dbToY(0));
+  ctx.lineTo(W - padR, dbToY(0));
+  ctx.stroke();
+
+  // Frequency response curve
+  const points: [number, number][] = [];
+  const steps = innerW * 2;
+  for (let i = 0; i <= steps; i++) {
+    const f = fMin * Math.pow(fMax / fMin, i / steps);
+    let totalDb = 0;
+    for (let band = 0; band < 10; band++) {
+      totalDb += biquadPeakResponse(f, EQ_BANDS[band].freq, gains[band], SAMPLE_RATE);
+    }
+    totalDb = Math.max(dbMin, Math.min(dbMax, totalDb));
+    points.push([freqToX(f), dbToY(totalDb)]);
+  }
+
+  // Fill under curve
+  const grad = ctx.createLinearGradient(0, padT, 0, H);
+  grad.addColorStop(0, accentColor.replace(')', ', 0.25)').replace('rgb', 'rgba'));
+  grad.addColorStop(1, accentColor.replace(')', ', 0.0)').replace('rgb', 'rgba'));
+
+  ctx.beginPath();
+  ctx.moveTo(points[0][0], dbToY(0));
+  points.forEach(([x, y]) => ctx.lineTo(x, y));
+  ctx.lineTo(points[points.length - 1][0], dbToY(0));
+  ctx.closePath();
+  ctx.fillStyle = grad;
+  ctx.fill();
+
+  // Curve line
+  ctx.beginPath();
+  ctx.moveTo(points[0][0], points[0][1]);
+  points.forEach(([x, y]) => ctx.lineTo(x, y));
+  ctx.strokeStyle = accentColor;
+  ctx.lineWidth = 1.8;
+  ctx.stroke();
+}
+
+// ─── Custom vertical fader (no native range input) ────────────────────────────
+
+const GAIN_MIN = -12, GAIN_MAX = 12;
+
+interface FaderProps {
+  value: number;
+  disabled: boolean;
+  onChange: (v: number) => void;
+}
+
+function VerticalFader({ value, disabled, onChange }: FaderProps) {
+  const trackRef = useRef<HTMLDivElement>(null);
+  const dragging = useRef(false);
+
+  const gainToPct = (g: number) => (GAIN_MAX - g) / (GAIN_MAX - GAIN_MIN); // 0=top, 1=bottom
+  const pctToGain = (p: number) => GAIN_MAX - p * (GAIN_MAX - GAIN_MIN);
+
+  const updateFromY = useCallback((clientY: number) => {
+    const el = trackRef.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    const pct = Math.max(0, Math.min(1, (clientY - rect.top) / rect.height));
+    const gain = Math.round(pctToGain(pct) / 0.5) * 0.5; // snap to 0.5 dB
+    onChange(Math.max(GAIN_MIN, Math.min(GAIN_MAX, gain)));
+  }, [onChange]);
+
+  const onPointerDown = (e: React.PointerEvent) => {
+    if (disabled) return;
+    dragging.current = true;
+    (e.currentTarget as HTMLDivElement).setPointerCapture(e.pointerId);
+    updateFromY(e.clientY);
+  };
+
+  const onPointerMove = (e: React.PointerEvent) => {
+    if (!dragging.current || disabled) return;
+    updateFromY(e.clientY);
+  };
+
+  const onPointerUp = () => { dragging.current = false; };
+
+  const thumbPct = gainToPct(value) * 100;
+
+  return (
+    <div
+      ref={trackRef}
+      className="eq-fader-custom"
+      onPointerDown={onPointerDown}
+      onPointerMove={onPointerMove}
+      onPointerUp={onPointerUp}
+      style={{ cursor: disabled ? 'default' : 'pointer' }}
+    >
+      <div className="eq-track-line" />
+      <div className="eq-thumb" style={{ top: `${thumbPct}%`, opacity: disabled ? 0.3 : 1 }} />
+    </div>
+  );
+}
+
+// ─── Main component ───────────────────────────────────────────────────────────
+
+export default function Equalizer() {
+  const { t } = useTranslation();
+  const gains = useEqStore(s => s.gains);
+  const enabled = useEqStore(s => s.enabled);
+  const activePreset = useEqStore(s => s.activePreset);
+  const customPresets = useEqStore(s => s.customPresets);
+  const { setBandGain, setEnabled, applyPreset, saveCustomPreset, deleteCustomPreset } = useEqStore();
+
+  const [saveName, setSaveName] = useState('');
+  const [showSave, setShowSave] = useState(false);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  const theme = useThemeStore(s => s.theme);
+
+  const redraw = useCallback(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const style = getComputedStyle(document.documentElement);
+    const accent = style.getPropertyValue('--accent').trim() || 'rgb(203, 166, 247)';
+    const bg = style.getPropertyValue('--bg-app').trim() || '#1e1e2e';
+    const text = style.getPropertyValue('--text-muted').trim() || 'rgba(255,255,255,0.4)';
+    drawCurve(canvas, gains, accent, bg, text);
+  }, [gains, theme]);
+
+  useEffect(() => { redraw(); }, [redraw]);
+
+  useEffect(() => {
+    const ro = new ResizeObserver(redraw);
+    if (canvasRef.current) ro.observe(canvasRef.current);
+    return () => ro.disconnect();
+  }, [redraw]);
+
+  const allPresets = [...BUILTIN_PRESETS, ...customPresets];
+  const selectValue = activePreset ?? '__custom__';
+  const isCustomSaved = activePreset && !BUILTIN_PRESETS.some(p => p.name === activePreset);
+
+  const handleSave = () => {
+    const name = saveName.trim();
+    if (!name) return;
+    saveCustomPreset(name);
+    setSaveName('');
+    setShowSave(false);
+  };
+
+  return (
+    <div className="eq-wrap">
+      {/* Controls bar */}
+      <div className="eq-controls-bar">
+        <label className="eq-toggle-label">
+          <span>{t('settings.eqEnabled')}</span>
+          <label className="toggle-switch" style={{ marginLeft: 8 }}>
+            <input type="checkbox" checked={enabled} onChange={e => setEnabled(e.target.checked)} />
+            <span className="toggle-track" />
+          </label>
+        </label>
+
+        <div className="eq-preset-row">
+          <CustomSelect
+            className="eq-preset-select"
+            value={selectValue}
+            onChange={v => applyPreset(v)}
+            options={[
+              ...(activePreset === null ? [{ value: '__custom__', label: t('settings.eqPresetCustom'), disabled: true }] : []),
+              ...BUILTIN_PRESETS.map(p => ({ value: p.name, label: p.name, group: t('settings.eqPresetBuiltin') })),
+              ...customPresets.map(p => ({ value: p.name, label: p.name, group: t('settings.eqPresetCustomGroup') })),
+            ]}
+          />
+
+          {isCustomSaved && (
+            <button className="eq-ctrl-btn" onClick={() => deleteCustomPreset(activePreset!)} data-tooltip={t('settings.eqDeletePreset')}>
+              <Trash2 size={13} />
+            </button>
+          )}
+          <button className="eq-ctrl-btn" onClick={() => applyPreset('Flat')} data-tooltip={t('settings.eqResetBands')}>
+            <RotateCcw size={13} />
+          </button>
+          <button className="eq-ctrl-btn" onClick={() => setShowSave(v => !v)} data-tooltip={t('settings.eqSavePreset')}>
+            <Save size={13} />
+          </button>
+        </div>
+      </div>
+
+      {showSave && (
+        <div className="eq-save-row">
+          <input
+            type="text" className="input" placeholder={t('settings.eqPresetName')}
+            value={saveName} onChange={e => setSaveName(e.target.value)}
+            onKeyDown={e => e.key === 'Enter' && handleSave()}
+            autoFocus style={{ flex: 1, padding: '6px 12px', fontSize: 13 }}
+          />
+          <button className="btn btn-primary" onClick={handleSave} disabled={!saveName.trim()}>{t('common.save')}</button>
+          <button className="btn btn-ghost" onClick={() => { setShowSave(false); setSaveName(''); }}>{t('common.cancel')}</button>
+        </div>
+      )}
+
+      {/* EQ panel */}
+      <div className={`eq-panel ${!enabled ? 'eq-panel--off' : ''}`}>
+        {/* Frequency response */}
+        <canvas ref={canvasRef} className="eq-canvas" />
+
+        {/* Fader area */}
+        <div className="eq-faders">
+          {/* dB scale */}
+          <div className="eq-db-scale">
+            {[12, 6, 0, -6, -12].map(db => (
+              <span key={db} className="eq-db-tick">
+                {db > 0 ? `+${db}` : db}
+              </span>
+            ))}
+          </div>
+
+          {/* Bands */}
+          {EQ_BANDS.map((band, i) => (
+            <div key={band.freq} className="eq-band">
+              <span className="eq-gain-val">
+                {gains[i] > 0 ? '+' : ''}{gains[i].toFixed(1)}
+              </span>
+              <div className="eq-fader-track">
+                <div className="eq-zero-mark" />
+                <VerticalFader
+                  value={gains[i]}
+                  disabled={!enabled}
+                  onChange={v => setBandGain(i, v)}
+                />
+              </div>
+              <span className="eq-freq-label">{band.label}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/FullscreenPlayer.tsx

@@ -1,11 +1,13 @@
 import React, { useCallback, useEffect, useState, useRef, memo } from 'react';
 import {
-  Play, Pause, SkipBack, SkipForward, Volume2, VolumeX,
-  ChevronDown, Repeat, Repeat1, Square, Music
+  Play, Pause, SkipBack, SkipForward,
+  ChevronDown, Repeat, Repeat1, Square, Music, AudioWaveform, Shuffle
 } 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';
+import VisualizerCanvas from './VisualizerCanvas';
 
 function formatTime(seconds: number): string {
   if (!seconds || isNaN(seconds)) return '0:00';
@@ -14,9 +16,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 +63,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 +87,92 @@ 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 [vizActive, setVizActive] = useState(false);
+  const [nextPresetTrigger, setNextPresetTrigger] = useState(0);
+  const [presetName, setPresetName] = useState('');
+
+  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 +181,113 @@ 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} />
-      <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 1 — blurred artist image OR visualizer */}
+      {vizActive && currentTrack ? (
+        <VisualizerCanvas
+          trackId={currentTrack.id}
+          nextPresetTrigger={nextPresetTrigger}
+          onPresetName={setPresetName}
+        />
+      ) : (
+        <>
+          <FsBg url={bgUrl} />
+          <div className="fs-bg-overlay" 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">
-
-        {/* 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>
-        </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(' · ')}
+      {/* Visualizer toggle + preset controls */}
+      <div style={{ position: 'absolute', top: '1.25rem', right: '4rem', display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+        {vizActive && (
+          <>
+            {presetName && (
+              <span style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)', maxWidth: 200, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                {presetName}
               </span>
             )}
-          </div>
+            <button
+              className="fs-btn fs-btn-sm"
+              onClick={() => setNextPresetTrigger(n => n + 1)}
+              aria-label={t('player.nextPreset')}
+              data-tooltip={t('player.nextPreset')}
+              style={{ color: 'rgba(255,255,255,0.7)' }}
+            >
+              <Shuffle size={14} />
+            </button>
+          </>
+        )}
+        <button
+          className={`fs-btn fs-btn-sm ${vizActive ? 'active' : ''}`}
+          onClick={() => setVizActive(v => !v)}
+          aria-label={t('player.visualizer')}
+          data-tooltip={t('player.visualizer')}
+          style={{ color: vizActive ? 'white' : 'rgba(255,255,255,0.5)' }}
+        >
+          <AudioWaveform size={16} />
+        </button>
+      </div>
 
-          {/* Progress bar — isolated sub-component */}
-          <FsProgress duration={duration} />
+      {/* Center stage — everything vertically + horizontally centered */}
+      <div className="fs-stage">
+
+        <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>
 
-        {/* Transport controls */}
+        <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>
+
+        <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,94 @@
-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"
+        />
+      ))}
+    </>
+  );
+}
+
+interface HeroProps {
+  albums?: SubsonicAlbum[];
+}
+
+export default function Hero({ albums: albumsProp }: HeroProps = {}) {
+  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(() => {
+    if (albumsProp?.length) { setAlbums(albumsProp); return; }
+    getRandomAlbums(8).then(a => { if (a.length) setAlbums(a); }).catch(() => {});
+  }, [albumsProp]);
+
+  // 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);
   }, []);
 
-  if (!album) return <div className="hero-placeholder" />;
+  useEffect(() => {
+    startTimer(albums.length);
+    return () => { if (timerRef.current) clearInterval(timerRef.current); };
+  }, [albums.length, startTimer]);
 
-  const coverUrl = album.coverArt ? buildCoverArtUrl(album.coverArt, 800) : '';
+  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 +98,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 +138,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 +153,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/LastfmIcon.tsx

@@ -0,0 +1,7 @@
+export default function LastfmIcon({ size = 16 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+      <path d="M11.344 16.143l-.917-2.494s-1.485 1.662-3.716 1.662c-1.97 0-3.373-1.714-3.373-4.46 0-3.514 1.773-4.777 3.52-4.777 2.508 0 3.306 1.625 3.997 3.714l.918 2.88c.918 2.8 2.642 5.047 7.615 5.047 3.563 0 5.98-1.094 5.98-3.972 0-2.326-1.327-3.53-3.797-4.11l-1.836-.41c-1.27-.29-1.645-.82-1.645-1.693 0-.987.778-1.56 2.047-1.56 1.384 0 2.132.52 2.245 1.756l2.878-.347C24.883 5.116 23.3 4 20.5 4c-3.26 0-4.945 1.537-4.945 3.824 0 1.843.91 3.008 3.2 3.562l1.947.46c1.404.327 1.97.874 1.97 1.894 0 1.13-.988 1.593-2.948 1.593-2.858 0-4.052-1.497-4.742-3.634l-.943-2.887C13.22 6.162 11.73 4 7.897 4 3.847 4 1 6.61 1 11.022c0 4.235 2.617 6.638 6.19 6.638 2.566 0 4.154-1.517 4.154-1.517z"/>
+    </svg>
+  );
+}

src/components/LastfmIndicator.tsx

@@ -0,0 +1,39 @@
+import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { useAuthStore } from '../store/authStore';
+import LastfmIcon from './LastfmIcon';
+
+export default function LastfmIndicator() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { lastfmSessionKey, lastfmUsername, lastfmSessionError } = useAuthStore();
+
+  if (!lastfmSessionKey) return null;
+
+  const tooltip = lastfmSessionError
+    ? t('connection.lastfmSessionInvalid')
+    : t('connection.lastfmConnected', { user: lastfmUsername });
+
+  return (
+    <div
+      className="connection-indicator"
+      style={{ cursor: 'pointer' }}
+      onClick={() => navigate('/settings', { state: { tab: 'server' } })}
+      data-tooltip={tooltip}
+      data-tooltip-pos="bottom"
+    >
+      <div
+        className={`connection-led connection-led--${lastfmSessionError ? 'disconnected' : 'connected'}`}
+      />
+      <div className="connection-meta">
+        <span className="connection-type" style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+          <LastfmIcon size={11} />
+          Last.fm
+        </span>
+        <span className="connection-server">
+          {lastfmSessionError ? t('connection.lastfmSessionInvalid').split(' —')[0] : `@${lastfmUsername}`}
+        </span>
+      </div>
+    </div>
+  );
+}

src/components/LiveSearch.tsx

@@ -19,9 +19,11 @@ export default function LiveSearch() {
   const [results, setResults] = useState<SearchResults | null>(null);
   const [open, setOpen] = useState(false);
   const [loading, setLoading] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(-1);
   const navigate = useNavigate();
   const playTrack = usePlayerStore(state => state.playTrack);
   const ref = useRef<HTMLDivElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
 
   const doSearch = useCallback(
     debounce(async (q: string) => {
@@ -38,7 +40,7 @@ export default function LiveSearch() {
     []
   );
 
-  useEffect(() => { doSearch(query); }, [query, doSearch]);
+  useEffect(() => { doSearch(query); setActiveIndex(-1); }, [query, doSearch]);
 
   // Close on click outside
   useEffect(() => {
@@ -51,6 +53,40 @@ export default function LiveSearch() {
 
   const hasResults = results && (results.artists.length || results.albums.length || results.songs.length);
 
+  // Flat list of all navigable items for keyboard nav
+  const flatItems = results ? [
+    ...(results.artists.map(a => ({ id: a.id, action: () => { navigate(`/artist/${a.id}`); setOpen(false); setQuery(''); } }))),
+    ...(results.albums.map(a => ({ id: a.id, action: () => { navigate(`/album/${a.id}`); setOpen(false); setQuery(''); } }))),
+    ...(results.songs.map(s => ({ id: s.id, action: () => {
+      playTrack({ 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 });
+      setOpen(false); setQuery('');
+    }}))),
+  ] : [];
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (!open || !flatItems.length) {
+      if (e.key === 'Enter' && query.trim()) { setOpen(false); navigate(`/search?q=${encodeURIComponent(query.trim())}`); }
+      return;
+    }
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      const next = Math.min(activeIndex + 1, flatItems.length - 1);
+      setActiveIndex(next);
+      dropdownRef.current?.querySelectorAll<HTMLElement>('.search-result-item')[next]?.scrollIntoView({ block: 'nearest' });
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      const next = Math.max(activeIndex - 1, -1);
+      setActiveIndex(next);
+      if (next >= 0) dropdownRef.current?.querySelectorAll<HTMLElement>('.search-result-item')[next]?.scrollIntoView({ block: 'nearest' });
+    } else if (e.key === 'Enter') {
+      e.preventDefault();
+      if (activeIndex >= 0) { flatItems[activeIndex].action(); setActiveIndex(-1); }
+      else if (query.trim()) { setOpen(false); navigate(`/search?q=${encodeURIComponent(query.trim())}`); }
+    } else if (e.key === 'Escape') {
+      setOpen(false); setActiveIndex(-1);
+    }
+  };
+
   return (
     <div className="live-search" ref={ref} role="search">
       <div className="live-search-input-wrap">
@@ -69,6 +105,7 @@ export default function LiveSearch() {
           value={query}
           onChange={e => setQuery(e.target.value)}
           onFocus={() => results && setOpen(true)}
+          onKeyDown={handleKeyDown}
           aria-autocomplete="list"
           aria-controls="search-results"
           aria-expanded={open}
@@ -82,78 +119,79 @@ export default function LiveSearch() {
       </div>
 
       {open && (
-        <div className="live-search-dropdown" id="search-results" role="listbox">
+        <div className="live-search-dropdown" id="search-results" role="listbox" ref={dropdownRef}>
           {!hasResults && !loading && (
             <div className="search-empty">{t('search.noResults', { query })}</div>
           )}
 
-          {results?.artists.length ? (
-            <div className="search-section">
-              <div className="search-section-label"><Users size={12} /> {t('search.artists')}</div>
-              {results.artists.map(a => (
-                <button
-                  key={a.id}
-                  className="search-result-item"
-                  onClick={() => { navigate(`/artist/${a.id}`); setOpen(false); setQuery(''); }}
-                  role="option"
-                >
-                  <div className="search-result-icon"><Users size={14} /></div>
-                  <span>{a.name}</span>
-                </button>
-              ))}
-            </div>
-          ) : null}
+          {(() => {
+            let idx = 0;
+            return <>
+              {results?.artists.length ? (
+                <div className="search-section">
+                  <div className="search-section-label"><Users size={12} /> {t('search.artists')}</div>
+                  {results.artists.map(a => {
+                    const i = idx++;
+                    return (
+                      <button key={a.id} className={`search-result-item${activeIndex === i ? ' active' : ''}`}
+                        onClick={() => { navigate(`/artist/${a.id}`); setOpen(false); setQuery(''); }}
+                        role="option" aria-selected={activeIndex === i}>
+                        <div className="search-result-icon"><Users size={14} /></div>
+                        <span>{a.name}</span>
+                      </button>
+                    );
+                  })}
+                </div>
+              ) : null}
 
-          {results?.albums.length ? (
-            <div className="search-section">
-              <div className="search-section-label"><Disc3 size={12} /> {t('search.albums')}</div>
-              {results.albums.map(a => (
-                <button
-                  key={a.id}
-                  className="search-result-item"
-                  onClick={() => { navigate(`/album/${a.id}`); setOpen(false); setQuery(''); }}
-                  role="option"
-                >
-                  {a.coverArt ? (
-                    <img className="search-result-thumb" src={buildCoverArtUrl(a.coverArt, 40)} alt="" loading="lazy" />
-                  ) : (
-                    <div className="search-result-icon"><Disc3 size={14} /></div>
-                  )}
-                  <div>
-                    <div className="search-result-name">{a.name}</div>
-                    <div className="search-result-sub">{a.artist}</div>
-                  </div>
-                </button>
-              ))}
-            </div>
-          ) : null}
+              {results?.albums.length ? (
+                <div className="search-section">
+                  <div className="search-section-label"><Disc3 size={12} /> {t('search.albums')}</div>
+                  {results.albums.map(a => {
+                    const i = idx++;
+                    return (
+                      <button key={a.id} className={`search-result-item${activeIndex === i ? ' active' : ''}`}
+                        onClick={() => { navigate(`/album/${a.id}`); setOpen(false); setQuery(''); }}
+                        role="option" aria-selected={activeIndex === i}>
+                        {a.coverArt ? (
+                          <img className="search-result-thumb" src={buildCoverArtUrl(a.coverArt, 40)} alt="" loading="lazy" />
+                        ) : (
+                          <div className="search-result-icon"><Disc3 size={14} /></div>
+                        )}
+                        <div>
+                          <div className="search-result-name">{a.name}</div>
+                          <div className="search-result-sub">{a.artist}</div>
+                        </div>
+                      </button>
+                    );
+                  })}
+                </div>
+              ) : null}
 
-          {results?.songs.length ? (
-            <div className="search-section">
-              <div className="search-section-label"><Music size={12} /> {t('search.songs')}</div>
-              {results.songs.map(s => (
-                <button
-                  key={s.id}
-                  className="search-result-item"
-                  onClick={() => {
-                    playTrack({
-                      id: s.id, title: s.title, artist: s.artist, album: s.album,
-                      albumId: s.albumId, duration: s.duration, coverArt: s.coverArt,
-                      year: s.year, bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating
-                    });
-                    setOpen(false); setQuery('');
-                  }}
-                  role="option"
-                >
-                  <div className="search-result-icon"><Music size={14} /></div>
-                  <div>
-                    <div className="search-result-name">{s.title}</div>
-                    <div className="search-result-sub">{s.artist} · {s.album}</div>
-                  </div>
-                </button>
-              ))}
-            </div>
-          ) : null}
+              {results?.songs.length ? (
+                <div className="search-section">
+                  <div className="search-section-label"><Music size={12} /> {t('search.songs')}</div>
+                  {results.songs.map(s => {
+                    const i = idx++;
+                    return (
+                      <button key={s.id} className={`search-result-item${activeIndex === i ? ' active' : ''}`}
+                        onClick={() => {
+                          playTrack({ 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 });
+                          setOpen(false); setQuery('');
+                        }}
+                        role="option" aria-selected={activeIndex === i}>
+                        <div className="search-result-icon"><Music size={14} /></div>
+                        <div>
+                          <div className="search-result-name">{s.title}</div>
+                          <div className="search-result-sub">{s.artist} · {s.album}</div>
+                        </div>
+                      </button>
+                    );
+                  })}
+                </div>
+              ) : null}
+            </>;
+          })()}
         </div>
       )}
     </div>

src/components/NowPlayingDropdown.tsx

@@ -1,13 +1,20 @@
 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 [spinning, setSpinning] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
 
   const fetchNowPlaying = async () => {
@@ -22,10 +29,23 @@ export default function NowPlayingDropdown() {
     }
   };
 
+  const handleRefresh = () => {
+    setSpinning(true);
+    fetchNowPlaying().finally(() => {
+      setTimeout(() => setSpinning(false), 600);
+    });
+  };
+
+  // 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 +59,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 +74,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 +85,7 @@ export default function NowPlayingDropdown() {
             padding: '2px 6px',
             borderRadius: '10px'
           }}>
-            {nowPlaying.length}
+            {visible.length}
           </span>
         )}
       </button>
@@ -86,26 +112,30 @@ export default function NowPlayingDropdown() {
           <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: '1px solid var(--border-subtle)', paddingBottom: '0.5rem' }}>
             <h3 style={{ margin: 0, fontSize: '14px', fontWeight: 600 }}>{t('nowPlaying.title')}</h3>
             <button
-              onClick={fetchNowPlaying}
-              className={`btn btn-ghost ${loading ? 'animate-spin' : ''}`}
-              style={{ width: '28px', height: '28px', padding: 0 }}
+              onClick={handleRefresh}
+              className="btn btn-ghost"
+              style={{ width: '28px', height: '28px', padding: 0, justifyContent: 'center' }}
             >
-              <RefreshCw size={14} />
+              <RefreshCw size={14} className={spinning ? 'animate-spin' : ''} />
             </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/OfflineOverlay.tsx

@@ -0,0 +1,32 @@
+import { useTranslation } from 'react-i18next';
+import { WifiOff, RefreshCw } from 'lucide-react';
+
+interface Props {
+  serverName: string;
+  onRetry: () => void;
+  isChecking: boolean;
+}
+
+export default function OfflineOverlay({ serverName, onRetry, isChecking }: Props) {
+  const { t } = useTranslation();
+
+  return (
+    <div className="offline-overlay">
+      <div className="offline-overlay-card">
+        <WifiOff size={48} className="offline-icon" />
+        <h2 className="offline-title">{t('connection.offlineTitle')}</h2>
+        <p className="offline-subtitle">
+          {t('connection.offlineSubtitle', { server: serverName })}
+        </p>
+        <button
+          className="btn btn-primary offline-retry"
+          onClick={onRetry}
+          disabled={isChecking}
+        >
+          <RefreshCw size={16} className={isChecking ? 'spin' : ''} />
+          {isChecking ? t('connection.checking') : t('connection.retry')}
+        </button>
+      </div>
+    </div>
+  );
+}

src/components/PlayerBar.tsx

@@ -1,10 +1,16 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import {
-  Play, Pause, SkipBack, SkipForward, Volume2, VolumeX, Music, List, Square, Repeat, Repeat1, Maximize2
+  Play, Pause, SkipBack, SkipForward, Volume2, VolumeX, Music,
+  Square, Repeat, Repeat1, Maximize2, SlidersHorizontal, X, Heart
 } from 'lucide-react';
 import { usePlayerStore } from '../store/playerStore';
-import { buildCoverArtUrl } from '../api/subsonic';
+import { useAuthStore } from '../store/authStore';
+import { buildCoverArtUrl, coverArtCacheKey } from '../api/subsonic';
+import CachedImage from './CachedImage';
+import WaveformSeek from './WaveformSeek';
+import Equalizer from './Equalizer';
 import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
 
 function formatTime(seconds: number): string {
   if (!seconds || isNaN(seconds)) return '0:00';
@@ -15,28 +21,31 @@ 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 [eqOpen, setEqOpen] = useState(false);
+  const {
+    currentTrack, isPlaying, currentTime, volume,
+    togglePlay, next, previous, setVolume,
+    stop, toggleRepeat, repeatMode, toggleFullscreen,
+    lastfmLoved, toggleLastfmLove,
+  } = usePlayerStore();
+  const { lastfmSessionKey } = useAuthStore();
 
   const duration = currentTrack?.duration ?? 0;
-
-  const handleSeek = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    seek(parseFloat(e.target.value));
-  }, [seek]);
+  const coverSrc = useMemo(() => currentTrack?.coverArt ? buildCoverArtUrl(currentTrack.coverArt, 128) : '', [currentTrack?.coverArt]);
+  const coverKey = currentTrack?.coverArt ? coverArtCacheKey(currentTrack.coverArt, 128) : '';
 
   const handleVolume = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
     setVolume(parseFloat(e.target.value));
   }, [setVolume]);
 
-  const progressStyle = {
-    background: `linear-gradient(to right, var(--ctp-mauve) ${progress * 100}%, var(--ctp-surface2) ${progress * 100}%)`,
-  };
-
   const volumeStyle = {
-    background: `linear-gradient(to right, var(--ctp-mauve) ${volume * 100}%, var(--ctp-surface2) ${volume * 100}%)`,
+    background: `linear-gradient(to right, var(--volume-accent, var(--accent)) ${volume * 100}%, var(--ctp-surface2) ${volume * 100}%)`,
   };
 
   return (
     <footer className="player-bar" role="region" aria-label={t('player.regionLabel')}>
+
       {/* Track Info */}
       <div className="player-track-info">
         <div
@@ -45,11 +54,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,97 +72,125 @@ 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>
-      </div>
-
-      {/* Controls + Progress */}
-      <div className="player-controls">
-        <div className="player-buttons">
-          <button className="player-btn" onClick={stop} aria-label={t('player.stop')} data-tooltip={t('player.stop')}>
-            <Square size={16} fill="currentColor" />
-          </button>
-          
-          <button className="player-btn" onClick={previous} aria-label={t('player.prev')} data-tooltip={t('player.prev')}>
-            <SkipBack size={18} />
-          </button>
-
+        {currentTrack && lastfmSessionKey && (
           <button
-            className="player-btn player-btn-primary"
-            onClick={togglePlay}
-            aria-label={isPlaying ? t('player.pause') : t('player.play')}
-            data-tooltip={isPlaying ? t('player.pause') : t('player.play')}
+            className="player-btn player-btn-sm player-love-btn"
+            onClick={toggleLastfmLove}
+            aria-label={lastfmLoved ? t('contextMenu.lfmUnlove') : t('contextMenu.lfmLove')}
+            data-tooltip={lastfmLoved ? t('contextMenu.lfmUnlove') : t('contextMenu.lfmLove')}
+            style={{ color: lastfmLoved ? '#e31c23' : 'var(--text-muted)', flexShrink: 0 }}
           >
-            {isPlaying ? <Pause size={20} /> : <Play size={20} fill="currentColor" />}
+            <Heart size={15} fill={lastfmLoved ? '#e31c23' : 'none'} />
           </button>
-
-          <button className="player-btn" onClick={next} aria-label={t('player.next')} data-tooltip={t('player.next')}>
-            <SkipForward size={18} />
-          </button>
-
-          <button 
-            className="player-btn" 
-            onClick={toggleRepeat} 
-            aria-label={t('player.repeat')} 
-            data-tooltip={`${t('player.repeat')}: ${repeatMode === 'off' ? t('player.repeatOff') : repeatMode === 'all' ? t('player.repeatAll') : t('player.repeatOne')}`}
-            style={{ color: repeatMode !== 'off' ? 'var(--accent)' : 'inherit' }}
-          >
-            {repeatMode === 'one' ? <Repeat1 size={18} /> : <Repeat size={18} />}
-          </button>
-        </div>
-
-        <div className="player-progress">
-          <span className="player-time">{formatTime(currentTime)}</span>
-          <div className="player-progress-bar">
-            <input
-              type="range"
-              id="player-seek"
-              min={0}
-              max={1}
-              step={0.001}
-              value={progress}
-              onChange={handleSeek}
-              style={progressStyle}
-              aria-label={t('player.progress')}
-            />
-          </div>
-          <span className="player-time">{formatTime(duration)}</span>
-        </div>
+        )}
       </div>
 
-      {/* Volume + Connection */}
-      <div className="player-right">
-        <div className="volume-control" aria-label={t('player.volume')}>
-          {volume === 0 ? <VolumeX size={16} /> : <Volume2 size={16} />}
-          <input
-            type="range"
-            id="player-volume"
-            min={0}
-            max={1}
-            step={0.01}
-            value={volume}
-            onChange={handleVolume}
-            style={volumeStyle}
-            aria-label={t('player.volume')}
-          />
-        </div>
-
-
-        <button 
-          className="player-btn" 
-          onClick={toggleQueue} 
-          aria-label={t('player.toggleQueue')} 
-          data-tooltip={t('player.toggleQueue')}
-          style={{ marginLeft: 'var(--space-3)', color: isQueueVisible ? 'var(--accent)' : 'var(--text-secondary)' }}
+      {/* Transport Controls */}
+      <div className="player-buttons">
+        <button className="player-btn player-btn-sm" onClick={stop} aria-label={t('player.stop')} data-tooltip={t('player.stop')}>
+          <Square size={14} fill="currentColor" />
+        </button>
+        <button className="player-btn" onClick={previous} aria-label={t('player.prev')} data-tooltip={t('player.prev')}>
+          <SkipBack size={19} />
+        </button>
+        <button
+          className="player-btn player-btn-primary"
+          onClick={togglePlay}
+          aria-label={isPlaying ? t('player.pause') : t('player.play')}
+          data-tooltip={isPlaying ? t('player.pause') : t('player.play')}
         >
-          <List size={18} />
+          {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={19} />
+        </button>
+        <button
+          className="player-btn player-btn-sm"
+          onClick={toggleRepeat}
+          aria-label={t('player.repeat')}
+          data-tooltip={`${t('player.repeat')}: ${repeatMode === 'off' ? t('player.repeatOff') : repeatMode === 'all' ? t('player.repeatAll') : t('player.repeatOne')}`}
+          style={{ color: repeatMode !== 'off' ? 'var(--accent)' : undefined }}
+        >
+          {repeatMode === 'one' ? <Repeat1 size={14} /> : <Repeat size={14} />}
         </button>
       </div>
+
+      {/* Waveform Seekbar */}
+      <div className="player-waveform-section">
+        <span className="player-time">{formatTime(currentTime)}</span>
+        <div className="player-waveform-wrap">
+          <WaveformSeek trackId={currentTrack?.id} />
+        </div>
+        <span className="player-time">{formatTime(duration)}</span>
+      </div>
+
+      {/* EQ Button */}
+      <button
+        className={`player-btn player-btn-sm player-eq-btn ${eqOpen ? 'active' : ''}`}
+        onClick={() => setEqOpen(v => !v)}
+        aria-label="Equalizer"
+        data-tooltip="Equalizer"
+      >
+        <SlidersHorizontal size={15} />
+      </button>
+
+      {/* Volume */}
+      <div className="player-volume-section">
+        <button
+          className="player-btn player-btn-sm"
+          onClick={() => setVolume(volume === 0 ? 0.7 : 0)}
+          aria-label={t('player.volume')}
+          style={{ color: 'var(--text-muted)', flexShrink: 0 }}
+        >
+          {volume === 0 ? <VolumeX size={16} /> : <Volume2 size={16} />}
+        </button>
+        <input
+          type="range"
+          id="player-volume"
+          min={0}
+          max={1}
+          step={0.01}
+          value={volume}
+          onChange={handleVolume}
+          style={volumeStyle}
+          aria-label={t('player.volume')}
+          className="player-volume-slider"
+        />
+      </div>
+
+      {/* EQ Popup */}
+      {eqOpen && (
+        <>
+          <div className="eq-popup-backdrop" onClick={() => setEqOpen(false)} />
+          <div className="eq-popup">
+            <div className="eq-popup-header">
+              <span className="eq-popup-title">Equalizer</span>
+              <button className="eq-popup-close" onClick={() => setEqOpen(false)} aria-label="Close">
+                <X size={16} />
+              </button>
+            </div>
+            <Equalizer />
+          </div>
+        </>
+      )}
+
     </footer>
   );
 }

src/components/QueuePanel.tsx

@@ -1,9 +1,11 @@
-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 { Play, Music, Star, X, Trash2, Save, FolderOpen, Shuffle, Infinity, Waves } 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';
+import { useAuthStore } from '../store/authStore';
 
 function formatTime(seconds: number): string {
   if (!seconds || isNaN(seconds)) return '0:00';
@@ -109,8 +111,13 @@ function LoadPlaylistModal({ onClose, onLoad }: { onClose: () => void, onLoad: (
   );
 }
 
+// Module-level fallback for fromIdx — survives the dragend-before-drop race on
+// macOS WKWebView AND the dataTransfer.getData('') bug on Windows WebView2.
+let _dragFromIdx: number | null = null;
+
 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);
@@ -120,10 +127,43 @@ export default function QueuePanel() {
   const clearQueue = usePlayerStore(s => s.clearQueue);
 
   const reorderQueue = usePlayerStore(s => s.reorderQueue);
+  const shuffleQueue = usePlayerStore(s => s.shuffleQueue);
   const enqueue = usePlayerStore(s => s.enqueue);
+  const contextMenu = usePlayerStore(s => s.contextMenu);
+
+  const crossfadeEnabled = useAuthStore(s => s.crossfadeEnabled);
+  const crossfadeSecs = useAuthStore(s => s.crossfadeSecs);
+  const gaplessEnabled = useAuthStore(s => s.gaplessEnabled);
+  const setCrossfadeEnabled = useAuthStore(s => s.setCrossfadeEnabled);
+  const setCrossfadeSecs = useAuthStore(s => s.setCrossfadeSecs);
+  const setGaplessEnabled = useAuthStore(s => s.setGaplessEnabled);
+
+  const [showCrossfadePopover, setShowCrossfadePopover] = useState(false);
+  const crossfadeBtnRef = useRef<HTMLButtonElement>(null);
+  const crossfadePopoverRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!showCrossfadePopover) return;
+    const handle = (e: MouseEvent) => {
+      if (
+        crossfadeBtnRef.current?.contains(e.target as Node) ||
+        crossfadePopoverRef.current?.contains(e.target as Node)
+      ) return;
+      setShowCrossfadePopover(false);
+    };
+    document.addEventListener('mousedown', handle);
+    return () => document.removeEventListener('mousedown', handle);
+  }, [showCrossfadePopover]);
 
   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,90 +182,120 @@ export default function QueuePanel() {
   };
 
   const onDragStart = (e: React.DragEvent, index: number) => {
+    isDraggingInternalRef.current = true;
+    draggedIdxRef.current = index;
+    _dragFromIdx = index;
     setDraggedIdx(index);
-    e.dataTransfer.effectAllowed = 'copyMove';
-    e.dataTransfer.setData('application/json', JSON.stringify({
-      type: 'queue_reorder',
-      index
-    }));
+    e.dataTransfer.effectAllowed = 'move';
+    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;
+    // _dragFromIdx intentionally NOT cleared here — drop fires after dragend on
+    // macOS WKWebView, so we need the value to survive into onDropQueue.
+    // It is cleared in onDropQueue after use instead.
   };
 
-  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' || _dragFromIdx !== null) {
+      // fromIdx: prefer dataTransfer value; fall back to module-level var for
+      // Windows WebView2 where getData() can return '' in the drop handler.
+      const fromIdx: number = parsedData?.index ?? _dragFromIdx!;
+      _dragFromIdx = null;
+
+      // 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)
+    _dragFromIdx = null;
+    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
       }}
     >
       <div className="queue-header">
-        <h2 style={{ fontSize: '14px', fontWeight: 600, margin: 0 }}>{t('queue.title')}</h2>
-        
-        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-          <button onClick={handleSave} style={{ color: 'var(--text-muted)', cursor: 'pointer', display: 'flex' }} aria-label={t('queue.savePlaylist')} data-tooltip={t('queue.save')}>
-            <Save size={14} />
-          </button>
-          <button onClick={handleLoad} style={{ color: 'var(--text-muted)', cursor: 'pointer', display: 'flex' }} aria-label={t('queue.loadPlaylist')} data-tooltip={t('queue.load')}>
-            <FolderOpen size={14} />
-          </button>
-          <button onClick={handleClear} style={{ color: 'var(--text-muted)', cursor: 'pointer', display: 'flex' }} aria-label={t('queue.clear')} data-tooltip={t('queue.clear')}>
-            <Trash2 size={14} />
-          </button>
-          <div style={{ width: '1px', height: '14px', background: 'var(--border)', margin: '0 4px' }} />
-          <button onClick={toggleQueue} style={{ color: 'var(--text-muted)', cursor: 'pointer', display: 'flex' }} aria-label={t('queue.close')} data-tooltip={t('queue.hide')}>
-            <X size={16} />
-          </button>
+        <div style={{ display: 'flex', alignItems: 'baseline', gap: '8px', minWidth: 0 }}>
+          <h2 style={{ fontSize: '16px', fontWeight: 700, margin: 0, flexShrink: 0 }}>{t('queue.title')}</h2>
+          {queue.length > 0 && (() => {
+            const totalSecs = queue.reduce((acc, t) => acc + (t.duration || 0), 0);
+            const h = Math.floor(totalSecs / 3600);
+            const m = Math.floor((totalSecs % 3600) / 60);
+            const s = totalSecs % 60;
+            const dur = h > 0
+              ? `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`
+              : `${m}:${s.toString().padStart(2, '0')}`;
+            return (
+              <span style={{ fontSize: '13px', color: 'var(--accent)', whiteSpace: 'nowrap' }}>
+                {queue.length} {queue.length === 1 ? t('queue.trackSingular') : t('queue.trackPlural')} · {dur}
+              </span>
+            );
+          })()}
         </div>
       </div>
 
@@ -233,33 +303,110 @@ 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>
             )}
+            {(currentTrack.bitRate || currentTrack.suffix) && (
+              <div className="queue-current-tech">
+                {currentTrack.bitRate && currentTrack.suffix
+                  ? `${currentTrack.bitRate} · ${currentTrack.suffix.toUpperCase()}`
+                  : currentTrack.suffix?.toUpperCase() ?? ''}
+              </div>
+            )}
           </div>
           <div className="queue-current-info">
             <h3 className="truncate" data-tooltip={currentTrack.title}>{currentTrack.title}</h3>
-            {currentTrack.year && <div className="queue-current-sub">{currentTrack.year}</div>}
-            <div className="queue-current-sub truncate" data-tooltip={currentTrack.album}>{currentTrack.album}</div>
-            
-            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: '6px' }}>
-              <div className="queue-current-tech">
-                {currentTrack.bitRate && currentTrack.suffix ? (
-                  `${currentTrack.bitRate} kbps · ${currentTrack.suffix.toUpperCase()}`
-                ) : (
-                  currentTrack.suffix?.toUpperCase() ?? ''
-                )}
-              </div>
-              {renderStars(currentTrack.userRating)}
-            </div>
+            <div
+              className="queue-current-sub truncate"
+              data-tooltip={currentTrack.artist}
+              style={{ cursor: currentTrack.artistId ? 'pointer' : 'default' }}
+              onClick={() => currentTrack.artistId && navigate(`/artist/${currentTrack.artistId}`)}
+            >{currentTrack.artist}</div>
+            <div
+              className="queue-current-sub truncate"
+              data-tooltip={currentTrack.album}
+              style={{ cursor: currentTrack.albumId ? 'pointer' : 'default' }}
+              onClick={() => currentTrack.albumId && navigate(`/album/${currentTrack.albumId}`)}
+            >{currentTrack.album}</div>
+            {currentTrack.year && (
+              <div className="queue-current-sub">{currentTrack.year}</div>
+            )}
+            {renderStars(currentTrack.userRating)}
           </div>
         </div>
       )}
 
+      <div className="queue-toolbar">
+        <button className="queue-round-btn" onClick={() => shuffleQueue()} disabled={queue.length < 2} data-tooltip={t('queue.shuffle')} aria-label={t('queue.shuffle')}>
+          <Shuffle size={13} />
+        </button>
+        <button className="queue-round-btn" onClick={handleSave} data-tooltip={t('queue.savePlaylist')} aria-label={t('queue.savePlaylist')}>
+          <Save size={13} />
+        </button>
+        <button className="queue-round-btn" onClick={handleLoad} data-tooltip={t('queue.loadPlaylist')} aria-label={t('queue.loadPlaylist')}>
+          <FolderOpen size={13} />
+        </button>
+        <button className="queue-round-btn" onClick={handleClear} data-tooltip={t('queue.clear')} aria-label={t('queue.clear')}>
+          <Trash2 size={13} />
+        </button>
+        <div className="queue-toolbar-sep" />
+        <button
+          className={`queue-round-btn${gaplessEnabled ? ' active' : ''}`}
+          onClick={() => setGaplessEnabled(!gaplessEnabled)}
+          data-tooltip={t('queue.gapless')}
+          aria-label={t('queue.gapless')}
+        >
+          <Infinity size={13} />
+        </button>
+        <div style={{ position: 'relative' }}>
+          <button
+            ref={crossfadeBtnRef}
+            className={`queue-round-btn${crossfadeEnabled || showCrossfadePopover ? ' active' : ''}`}
+            onClick={() => {
+              if (crossfadeEnabled) {
+                setCrossfadeEnabled(false);
+                setShowCrossfadePopover(false);
+              } else {
+                setCrossfadeEnabled(true);
+                setShowCrossfadePopover(true);
+              }
+            }}
+            data-tooltip={showCrossfadePopover ? undefined : t('queue.crossfade')}
+            aria-label={t('queue.crossfade')}
+          >
+            <Waves size={13} />
+          </button>
+          {showCrossfadePopover && (
+            <div className="crossfade-popover" ref={crossfadePopoverRef}>
+              <div className="crossfade-popover-label">
+                <Waves size={11} />
+                {t('queue.crossfade')}
+                <span className="crossfade-popover-value">{crossfadeSecs}s</span>
+              </div>
+              <input
+                type="range"
+                min={1}
+                max={10}
+                step={0.5}
+                value={crossfadeSecs}
+                onChange={e => {
+                  setCrossfadeSecs(Number(e.target.value));
+                  setCrossfadeEnabled(true);
+                }}
+                className="crossfade-popover-slider"
+              />
+              <div className="crossfade-popover-range">
+                <span>1s</span><span>10s</span>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
       {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,9 +430,10 @@ export default function QueuePanel() {
             }
 
             return (
-              <div 
-                key={`${track.id}-${idx}`} 
-                className={`queue-item ${isPlaying ? 'active' : ''}`}
+              <div
+                key={`${track.id}-${idx}`}
+                data-queue-idx={idx}
+                className={`queue-item ${isPlaying ? 'active' : ''} ${contextMenu.isOpen && contextMenu.type === 'queue-item' && contextMenu.queueIndex === idx ? 'context-active' : ''}`}
                 onClick={() => playTrack(track, queue)}
                 onContextMenu={(e) => {
                   e.preventDefault();
@@ -293,12 +441,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 +484,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,41 +1,109 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+import { usePlayerStore } from '../store/playerStore';
+import { open } from '@tauri-apps/plugin-shell';
+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, AudioLines
 } from 'lucide-react';
 
 const PsysonicLogo = () => (
-  <img src="/logo.png" alt="Psysonic Logo" width="36" height="36" style={{ borderRadius: '8px' }} />
+  <img src="/logo-psysonic.png" alt="Psysonic Logo" width="36" height="36" />
 );
 
 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' }} data-tooltip={`${t('sidebar.updateAvailable')}: ${latestVersion}`} data-tooltip-pos="bottom">
+        <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>
+      <button
+        className="update-toast-link"
+        onClick={() => open('https://github.com/Psychotoxical/psysonic/releases')}
+      >
+        {t('sidebar.updateLink')}
+      </button>
+    </div>
+  );
+}
+
+export default function Sidebar({
+  isCollapsed = false,
+  toggleCollapse
+}: {
   isCollapsed?: boolean;
   toggleCollapse?: () => void;
 }) {
   const { t } = useTranslation();
+  const isPlaying   = usePlayerStore(s => s.isPlaying);
+  const currentTrack = usePlayerStore(s => s.currentTrack);
+  const [latestVersion, setLatestVersion] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const check = 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.replace(/^v/i, ''));
+        }
+      } catch {
+        // network unavailable — silently skip
+      }
+    };
+
+    const initial = setTimeout(check, 1500);
+    const interval = setInterval(check, 10 * 60 * 1000); // every 10 minutes
+
+    return () => { cancelled = true; clearTimeout(initial); clearInterval(interval); };
+  }, []);
 
   return (
     <aside className={`sidebar animate-slide-in ${isCollapsed ? 'collapsed' : ''}`}>
       <div className="sidebar-brand">
         <button 
-          className="collapse-btn" 
-          onClick={toggleCollapse} 
-          title={isCollapsed ? t('sidebar.expand') : t('sidebar.collapse')}
+          className="collapse-btn"
+          onClick={toggleCollapse}
+          data-tooltip={isCollapsed ? t('sidebar.expand') : t('sidebar.collapse')}
+          data-tooltip-pos="bottom"
           style={{ padding: 0 }}
         >
           {isCollapsed ? <PanelLeft size={24} /> : <PanelLeftClose size={24} />}
@@ -52,27 +120,54 @@ export default function Sidebar({
             to={item.to}
             end={item.to === '/'}
             className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}
-            title={isCollapsed ? t(item.labelKey) : undefined}
+            data-tooltip={isCollapsed ? t(item.labelKey) : undefined}
+            data-tooltip-pos="bottom"
           >
             <item.icon size={isCollapsed ? 22 : 18} />
             {!isCollapsed && <span>{t(item.labelKey)}</span>}
           </NavLink>
         ))}
 
-        {!isCollapsed && <span className="nav-section-label" style={{ marginTop: 'auto' }}>{t('sidebar.system')}</span>}
+        {/* Now Playing — special styled */}
+        <NavLink
+          to="/now-playing"
+          className={({ isActive }) => `nav-link nav-link-nowplaying ${isActive ? 'active' : ''}`}
+          data-tooltip={isCollapsed ? t('sidebar.nowPlaying') : undefined}
+          data-tooltip-pos="bottom"
+          style={{ marginTop: 'auto' }}
+        >
+          <span className="nav-np-icon-wrap">
+            <AudioLines size={isCollapsed ? 22 : 18} />
+            {isPlaying && currentTrack && <span className="nav-np-dot" />}
+          </span>
+          {!isCollapsed && <span>{t('sidebar.nowPlaying')}</span>}
+        </NavLink>
+
+        {!isCollapsed && <span className="nav-section-label">{t('sidebar.system')}</span>}
+        {latestVersion && <UpdateToast isCollapsed={isCollapsed} latestVersion={latestVersion} />}
         <NavLink
           to="/statistics"
           className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}
-          style={isCollapsed ? { marginTop: 'auto' } : undefined}
-          title={isCollapsed ? t('sidebar.statistics') : undefined}
+          data-tooltip={isCollapsed ? t('sidebar.statistics') : undefined}
+          data-tooltip-pos="bottom"
         >
           <BarChart3 size={isCollapsed ? 22 : 18} />
           {!isCollapsed && <span>{t('sidebar.statistics')}</span>}
         </NavLink>
+        <NavLink
+          to="/help"
+          className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}
+          data-tooltip={isCollapsed ? t('sidebar.help') : undefined}
+          data-tooltip-pos="bottom"
+        >
+          <HelpCircle size={isCollapsed ? 22 : 18} />
+          {!isCollapsed && <span>{t('sidebar.help')}</span>}
+        </NavLink>
         <NavLink
           to="/settings"
           className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}
-          title={isCollapsed ? t('sidebar.settings') : undefined}
+          data-tooltip={isCollapsed ? t('sidebar.settings') : undefined}
+          data-tooltip-pos="bottom"
         >
           <Settings size={isCollapsed ? 22 : 18} />
           {!isCollapsed && <span>{t('sidebar.settings')}</span>}

src/components/ThemePicker.tsx

@@ -0,0 +1,155 @@
+import { Check } from 'lucide-react';
+
+interface ThemeDef {
+  id: string;
+  label: string;
+  bg: string;
+  card: string;
+  accent: string;
+}
+
+const THEME_GROUPS: { group: string; themes: ThemeDef[] }[] = [
+  {
+    group: 'Catppuccin',
+    themes: [
+      { id: 'mocha',     label: 'Mocha',     bg: '#1e1e2e', card: '#313244', accent: '#cba6f7' },
+      { id: 'macchiato', label: 'Macchiato', bg: '#24273a', card: '#363a4f', accent: '#c6a0f6' },
+      { id: 'frappe',    label: 'Frappé',    bg: '#303446', card: '#414559', accent: '#ca9ee6' },
+      { id: 'latte',     label: 'Latte',     bg: '#eff1f5', card: '#ccd0da', accent: '#8839ef' },
+    ],
+  },
+  {
+    group: 'Nord',
+    themes: [
+      { id: 'nord',           label: 'Polar Night', bg: '#3b4252', card: '#434c5e', accent: '#88c0d0' },
+      { id: 'nord-snowstorm', label: 'Snowstorm',   bg: '#e5e9f0', card: '#eceff4', accent: '#5e81ac' },
+      { id: 'nord-frost',     label: 'Frost',       bg: '#1e2d3d', card: '#243447', accent: '#88c0d0' },
+      { id: 'nord-aurora',    label: 'Aurora',      bg: '#3b4252', card: '#434c5e', accent: '#b48ead' },
+    ],
+  },
+  {
+    group: 'Retro',
+    themes: [
+      { id: 'gruvbox-dark-hard',    label: 'Dark Hard',    bg: '#1d2021', card: '#3c3836', accent: '#fabd2f' },
+      { id: 'gruvbox-dark-medium',  label: 'Dark Medium',  bg: '#282828', card: '#3c3836', accent: '#fabd2f' },
+      { id: 'gruvbox-dark-soft',    label: 'Dark Soft',    bg: '#32302f', card: '#45403d', accent: '#fabd2f' },
+      { id: 'gruvbox-light-hard',   label: 'Light Hard',   bg: '#f9f5d7', card: '#f2e5bc', accent: '#b57614' },
+      { id: 'gruvbox-light-medium', label: 'Light Medium', bg: '#fbf1c7', card: '#f2e5bc', accent: '#b57614' },
+      { id: 'gruvbox-light-soft',   label: 'Light Soft',   bg: '#f2e5bc', card: '#ebdbb2', accent: '#b57614' },
+    ],
+  },
+  {
+    group: 'Tokyo Night',
+    themes: [
+      { id: 'tokyo-night',       label: 'Standard', bg: '#1a1b26', card: '#24283b', accent: '#7aa2f7' },
+      { id: 'tokyo-night-storm', label: 'Storm',    bg: '#24283b', card: '#2f334d', accent: '#7aa2f7' },
+      { id: 'tokyo-night-light', label: 'Light',    bg: '#d5d6db', card: '#e9e9ec', accent: '#34548a' },
+    ],
+  },
+  {
+    group: 'Psysonic Themes',
+    themes: [
+      { id: 'classic-winamp', label: 'Classic Winamp', bg: '#2b2b3a', card: '#000000', accent: '#00ff00' },
+      { id: 'poison',         label: 'Poison',         bg: '#1f1f1f', card: '#282828', accent: '#1bd655' },
+      { id: 'nucleo',         label: 'Nucleo',         bg: '#f5e4c3', card: '#dfc08f', accent: '#9e9a92' },
+      { id: 'psychowave',     label: 'Psychowave',     bg: '#161428', card: '#1f1c38', accent: '#a06ae0' },
+    ],
+  },
+];
+
+interface Props {
+  value: string;
+  onChange: (id: string) => void;
+}
+
+export default function ThemePicker({ value, onChange }: Props) {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
+      {THEME_GROUPS.map(({ group, themes }) => (
+        <div key={group}>
+          <div style={{
+            fontSize: '11px',
+            fontWeight: 600,
+            textTransform: 'uppercase',
+            letterSpacing: '0.08em',
+            color: 'var(--text-muted)',
+            marginBottom: '10px',
+          }}>
+            {group}
+          </div>
+          <div style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fill, minmax(72px, 1fr))',
+            gap: '10px',
+          }}>
+            {themes.map((t) => {
+              const isActive = value === t.id;
+              return (
+                <button
+                  key={t.id}
+                  onClick={() => onChange(t.id)}
+                  style={{
+                    background: 'none',
+                    border: 'none',
+                    padding: 0,
+                    cursor: 'pointer',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    gap: '6px',
+                  }}
+                >
+                  <div style={{
+                    width: '100%',
+                    height: '46px',
+                    borderRadius: '8px',
+                    overflow: 'hidden',
+                    outline: isActive ? '2px solid var(--accent)' : '2px solid transparent',
+                    outlineOffset: '2px',
+                    position: 'relative',
+                    boxShadow: isActive ? '0 0 8px var(--accent-glow, rgba(0,0,0,0.2))' : '0 1px 3px rgba(0,0,0,0.3)',
+                    transition: 'outline-color 0.15s, box-shadow 0.15s',
+                  }}>
+                    {/* main bg */}
+                    <div style={{ background: t.bg, height: '55%' }} />
+                    {/* card tone */}
+                    <div style={{ background: t.card, height: '20%' }} />
+                    {/* accent bar */}
+                    <div style={{ background: t.accent, height: '25%' }} />
+                    {isActive && (
+                      <div style={{
+                        position: 'absolute',
+                        top: '4px',
+                        right: '4px',
+                        width: '14px',
+                        height: '14px',
+                        borderRadius: '50%',
+                        background: t.accent,
+                        border: '1.5px solid rgba(255,255,255,0.7)',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                      }}>
+                        <Check size={8} strokeWidth={3} color="white" />
+                      </div>
+                    )}
+                  </div>
+                  <span style={{
+                    fontSize: '11px',
+                    color: isActive ? 'var(--text-primary)' : 'var(--text-secondary)',
+                    fontWeight: isActive ? 600 : 400,
+                    textAlign: 'center',
+                    lineHeight: 1.2,
+                    wordBreak: 'break-word',
+                  }}>
+                    {t.label}
+                  </span>
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

src/components/TooltipPortal.tsx

@@ -0,0 +1,94 @@
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+interface TooltipState {
+  text: string;
+  anchorRect: DOMRect;
+  preferBottom: boolean;
+  wrap: boolean;
+}
+
+export default function TooltipPortal() {
+  const [tooltip, setTooltip] = useState<TooltipState | null>(null);
+  const boxRef = useRef<HTMLDivElement>(null);
+  const [style, setStyle] = useState<React.CSSProperties>({ opacity: 0 });
+
+  useEffect(() => {
+    const onOver = (e: MouseEvent) => {
+      const target = (e.target as HTMLElement).closest('[data-tooltip]') as HTMLElement | null;
+      if (!target) return;
+      const text = target.getAttribute('data-tooltip');
+      if (!text) return;
+      setTooltip({
+        text,
+        anchorRect: target.getBoundingClientRect(),
+        preferBottom: target.getAttribute('data-tooltip-pos') === 'bottom',
+        wrap: target.hasAttribute('data-tooltip-wrap'),
+      });
+    };
+    const onOut = (e: MouseEvent) => {
+      const target = (e.target as HTMLElement).closest('[data-tooltip]');
+      if (target) setTooltip(null);
+    };
+    document.addEventListener('mouseover', onOver);
+    document.addEventListener('mouseout', onOut);
+    return () => {
+      document.removeEventListener('mouseover', onOver);
+      document.removeEventListener('mouseout', onOut);
+    };
+  }, []);
+
+  useLayoutEffect(() => {
+    if (!tooltip || !boxRef.current) { setStyle({ opacity: 0 }); return; }
+
+    const box = boxRef.current.getBoundingClientRect();
+    const { anchorRect, preferBottom } = tooltip;
+    const GAP = 7;
+    const MARGIN = 8;
+
+    // Decide top or bottom
+    const spaceAbove = anchorRect.top - GAP - box.height;
+    const useBottom = preferBottom || spaceAbove < MARGIN;
+
+    let top = useBottom
+      ? anchorRect.bottom + GAP
+      : anchorRect.top - GAP - box.height;
+
+    // Clamp vertically
+    top = Math.max(MARGIN, Math.min(top, window.innerHeight - box.height - MARGIN));
+
+    // Centre horizontally, clamp to viewport
+    let left = anchorRect.left + anchorRect.width / 2 - box.width / 2;
+    left = Math.max(MARGIN, Math.min(left, window.innerWidth - box.width - MARGIN));
+
+    setStyle({ opacity: 1, top, left });
+  }, [tooltip]);
+
+  if (!tooltip) return null;
+
+  return createPortal(
+    <div
+      ref={boxRef}
+      style={{
+        position: 'fixed',
+        zIndex: 99999,
+        background: 'var(--bg-card)',
+        color: 'var(--text-primary)',
+        border: '1px solid var(--border-subtle)',
+        borderRadius: 'var(--radius-sm)',
+        padding: '4px 8px',
+        fontSize: '12px',
+        fontWeight: 500,
+        boxShadow: '0 4px 12px rgba(0,0,0,0.6)',
+        pointerEvents: 'none',
+        whiteSpace: tooltip.wrap ? 'pre-line' : 'nowrap',
+        maxWidth: tooltip.wrap ? '220px' : undefined,
+        transition: 'opacity 0.15s ease',
+        ...style,
+      }}
+    >
+      {tooltip.text}
+    </div>,
+    document.body
+  );
+}