chore: bump to v1.27.2 — bugfix release

- fix: Radio from context menu passed artist name as ID to getSimilarSongs2 (closes #29) - fix: CI Windows NSIS upload — tauri-action no longer searches missing bundle/msi/ - fix: Linux/AUR ring linker error — use cc instead of rust-lld via .cargo/config.toml Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
fix: guard against empty NSIS bundle in Windows signing step
2026-07-23 07:45:45 +00:00 · 2026-04-02 10:38:26 +02:00 · 2026-04-02 03:23:17 +02:00 · 2026-04-02 03:08:52 +02:00 · 2026-04-02 03:07:19 +02:00 · 2026-04-02 02:54:58 +02:00
61 changed files with 6834 additions and 900 deletions
@@ -0,0 +1,6 @@
+# Use the system GCC linker for Linux targets instead of rust-lld.
+# ring (pulled in by tauri-plugin-updater) contains C/assembly objects that
+# lld cannot resolve on Arch/CachyOS — switching to cc avoids the
+# "undefined symbol: ring_core_*" linker errors.
+[target.x86_64-unknown-linux-gnu]
+linker = "cc"
@@ -19,6 +19,12 @@ jobs:
        uses: actions/setup-node@v5
        with:
          node-version: lts/*
+      - name: cache npm
+        uses: actions/cache@v4
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-npm-${{ hashFiles('package-lock.json') }}
+          restore-keys: ${{ runner.os }}-npm-
      - name: get version
        id: get-version
        run: echo "version=$(node -p "require('./package.json').version")" >> $GITHUB_OUTPUT
@@ -74,6 +80,9 @@ jobs:
    needs: create-release
    permissions:
      contents: write
+    env:
+      TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_SIGNING_PRIVATE_KEY }}
+      TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_SIGNING_PRIVATE_KEY_PASSWORD }}
    strategy:
      fail-fast: false
      matrix:
@@ -91,10 +100,20 @@ jobs:
        uses: actions/setup-node@v5
        with:
          node-version: lts/*
+      - name: cache npm
+        uses: actions/cache@v4
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-npm-${{ hashFiles('package-lock.json') }}
+          restore-keys: ${{ runner.os }}-npm-
      - name: install Rust stable
        uses: dtolnay/rust-toolchain@stable
        with:
          targets: ${{ matrix.settings.platform == 'macos-latest' && 'aarch64-apple-darwin,x86_64-apple-darwin' || '' }}
+      - name: cache cargo
+        uses: Swatinem/rust-cache@v2
+        with:
+          workspaces: src-tauri
      - name: install npm dependencies
        run: npm install
      - uses: tauri-apps/tauri-action@v0
@@ -103,9 +122,46 @@ jobs:
          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 }}
+          # Windows: no releaseId — tauri-action would search bundle/msi/ which doesn't exist.
+          # We upload NSIS artifacts manually in the next step.
+          releaseId: ${{ matrix.settings.platform != 'windows-latest' && needs.create-release.outputs.release_id || '' }}
          args: ${{ matrix.settings.args }}

+      - name: upload Windows NSIS artifacts
+        if: matrix.settings.platform == 'windows-latest'
+        shell: bash
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          VERSION: ${{ needs.create-release.outputs.package_version }}
+        run: |
+          NSIS_DIR="src-tauri/target/release/bundle/nsis"
+          # Upload installer (.exe) and updater bundle (.nsis.zip + .nsis.zip.sig)
+          FILES=$(find "$NSIS_DIR" -name "*.exe" -o -name "*.nsis.zip" -o -name "*.nsis.zip.sig" 2>/dev/null)
+          if [[ -z "$FILES" ]]; then
+            echo "No NSIS artifacts found in $NSIS_DIR" >&2
+            ls -la "$NSIS_DIR" || true
+            exit 1
+          fi
+          echo "$FILES" | xargs gh release upload "app-v${VERSION}" --clobber
+
+      - name: sign and upload macOS bundle signature
+        if: matrix.settings.platform == 'macos-latest'
+        shell: bash
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          VERSION: ${{ needs.create-release.outputs.package_version }}
+        run: |
+          if [[ "${{ matrix.settings.args }}" == *"aarch64"* ]]; then
+            BUNDLE="src-tauri/target/aarch64-apple-darwin/release/bundle/macos/Psysonic.app.tar.gz"
+            SIG_NAME="Psysonic_aarch64.app.tar.gz.sig"
+          else
+            BUNDLE="src-tauri/target/x86_64-apple-darwin/release/bundle/macos/Psysonic.app.tar.gz"
+            SIG_NAME="Psysonic_x64.app.tar.gz.sig"
+          fi
+          npx tauri signer sign --private-key "$TAURI_SIGNING_PRIVATE_KEY" --password "$TAURI_SIGNING_PRIVATE_KEY_PASSWORD" "$BUNDLE"
+          cp "${BUNDLE}.sig" "$SIG_NAME"
+          gh release upload "app-v${VERSION}" "$SIG_NAME" --clobber
+
  build-linux:
    needs: create-release
    permissions:
@@ -126,9 +182,21 @@ jobs:
        with:
          node-version: lts/*

+      - name: cache npm
+        uses: actions/cache@v4
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-npm-${{ hashFiles('package-lock.json') }}
+          restore-keys: ${{ runner.os }}-npm-
+
      - name: install Rust stable
        uses: dtolnay/rust-toolchain@stable

+      - name: cache cargo
+        uses: Swatinem/rust-cache@v2
+        with:
+          workspaces: src-tauri
+
      - name: install npm dependencies
        run: npm install

@@ -146,3 +214,32 @@ jobs:
          find src-tauri/target/release/bundle \
            \( -name "*.deb" -o -name "*.rpm" \) \
            | xargs gh release upload "app-v${VERSION}" --clobber
+
+  generate-manifest:
+    needs: [create-release, build-macos-windows]
+    permissions:
+      contents: write
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v5
+      - name: setup node
+        uses: actions/setup-node@v5
+        with:
+          node-version: lts/*
+      - name: cache npm
+        uses: actions/cache@v4
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-npm-${{ hashFiles('package-lock.json') }}
+          restore-keys: ${{ runner.os }}-npm-
+      - name: generate latest.json
+        env:
+          VERSION: ${{ needs.create-release.outputs.package_version }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: node scripts/generate-update-manifest.js
+      - name: upload latest.json
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          VERSION=${{ needs.create-release.outputs.package_version }}
+          gh release upload "app-v${VERSION}" latest.json --clobber
@@ -5,6 +5,198 @@ 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.27.2] - 2026-04-02
+
+### Fixed
+
+- **Radio broken from context menu** *(reported by [@netherguy4](https://github.com/netherguy4))*: "Start Radio" in the track and queue-item context menus had no effect. The handler was passing the artist name as the artist ID to `getSimilarSongs2`, which returned an empty result — so no tracks were queued and no error was shown. Now correctly passes `song.artistId`.
+- **CI: Windows NSIS upload**: `tauri-action` was searching `bundle/msi/` (which doesn't exist in NSIS-only builds), causing the GitHub Release upload to fail with 404. Windows artifacts are now uploaded via an explicit step using `bundle/nsis/*.exe` + `*.nsis.zip` + `*.nsis.zip.sig`.
+- **Linux/AUR build: ring linker error**: Builds on Arch/CachyOS failed with `rust-lld: undefined symbol: ring_core_*` after the Tauri updater was added. Added `.cargo/config.toml` to use the GCC linker (`cc`) for `x86_64-unknown-linux-gnu` targets, and added `clang` to the AUR `makedepends` (required by ring's bindgen step).
+
+---
+
+## [1.27.1] - 2026-04-02
+
+### Fixed
+
+- **CI: auto-update signing pipeline**: Signing keys were not being picked up by the bundler during the tauri-action build. Replaced with an explicit post-build signing step using `tauri signer sign`. Fixed `.sig` upload names to match platform conventions (`Psysonic_aarch64.app.tar.gz.sig`, `Psysonic_x64.app.tar.gz.sig`) so the manifest generator finds them correctly. First release where the in-app updater is fully functional on macOS and Windows.
+- **CI: npm + Cargo caching** *(requested by [@netherguy4](https://github.com/netherguy4))*: Added `actions/cache` for npm and `Swatinem/rust-cache` for Cargo across all build jobs. Warm-cache builds will be significantly faster on subsequent releases.
+
+---
+
+## [1.27.0] - 2026-04-02
+
+### Added
+
+- **In-App Auto-Update** *(requested by [@netherguy4](https://github.com/netherguy4))*: Psysonic now checks for new releases automatically on startup (3 s delay). On macOS and Windows a native install-and-relaunch flow is available directly in the app — no browser needed. On Linux, a download link to the GitHub release page is shown instead (AppImage is not built due to WebKitGTK incompatibility with Arch/Fedora). The updater uses Tauri's signed updater plugin with minisign signatures verified against a bundled public key. **Note: this release is the preparation — auto-update will be fully active for all subsequent releases once signed bundles are in place.**
+- **Configurable Home Page**: Users can now choose which sections appear on the home page. A new "Home Page" block in Settings → Library lets you toggle each section individually (Featured, Recently Added, Discover, Discover Artists, Recently Played, Personal Favorites, Most Played) with a reset-to-default button. Hidden sections are skipped entirely.
+- **Consistent icon language** *(requested by [@netherguy4](https://github.com/netherguy4))*: Favorites (local star/heart) now use a filled Heart icon everywhere — Player Bar, Album Detail, Artist Detail, Tracklist, Context Menu. Last.fm love always uses the Last.fm logo. Previously the two were mixed up in several places.
+
+### Fixed
+
+- **Album Detail hero background not loading**: The blurred album art background in Album Detail only appeared after a track change, never on first visit. Root cause: `buildCoverArtUrl` was called without `useMemo`, generating a new salt on every re-render — causing `useCachedUrl` to cancel and restart its fetch endlessly. Fixed by memoising both the URL and cache key on `album.coverArt`. Same fix applied to Hero and Playlist Detail backgrounds.
+
+---
+
+## [1.26.1] - 2026-04-01
+
+### Fixed
+
+- **Background flickering in Hero, Album Detail and Playlist Detail**: Blurred hero backgrounds were flickering for up to 20 seconds on first visit. Root cause: `useCachedUrl` with the default `fallbackToFetch = true` immediately returned the raw server URL, causing the background to render twice — once with the HTTP URL (triggering a server fetch) and again when the IndexedDB blob was ready. Fixed by passing `fallbackToFetch = false` in all three locations so the background only renders once the blob is cached.
+
+---
+
+## [1.26.0] - 2026-04-01
+
+### Added
+
+- **Favorite button in Player Bar** *(requested by [@halfkey](https://github.com/halfkey))*: A star icon button now sits next to the Last.fm heart in the player bar. Clicking it toggles the favorite/unfavorite state for the currently playing track with an optimistic UI update — no page reload needed. Uses the same `starredOverrides` mechanism as the album tracklist for instant feedback.
+- **Bulk Select for song lists**: Multi-select support in Album tracklist and Playlist detail. A checkbox fades in to the left of the track number on hover. Selecting one or more tracks activates the bulk action bar at the top with two actions: **Add to Playlist** (opens the playlist picker submenu) and **Remove from Playlist** (Playlist detail only). Shift-click selects a range; the header checkbox selects / deselects all. CSS uses `color-mix` for the selection highlight, compatible with all 60 themes.
+- **Song Info modal**: Right-clicking any song and choosing "Song Info" opens a metadata panel fetched live via `getSong`. Displays: title, artist, album, album artist, year, genre, duration, track number; format, bitrate, sample rate, bit depth, channels (Mono / Stereo), file size; file path; and Replay Gain values (track / album gain + peak) when present. Closes with Escape or a click on the backdrop.
+- **Recently Played section on Home page**: A new "Recently Played" album row appears on the Home page between the hero carousel and the Discover section, powered by the `getAlbumList('recent')` endpoint.
+- **"Now Playing" visibility toggle in Settings**: New opt-in toggle in Settings → Behavior ("Show activity in Now Playing"). When disabled (default), `reportNowPlaying` is not called, so no activity is reported to the Navidrome "Now Playing" feed. Useful for users who share a server.
+
+### Fixed
+
+- **Queue cover art not updating**: After a track change the queue panel cover art often stayed on the previous album or took a long time to update. Root cause: `useCachedUrl` and `CachedImage` were not resetting their resolved URL when the `cacheKey` changed. Fixed by resetting `resolved` to `''` before each async cache fetch and basing `CachedImage`'s `loaded` state on `useEffect([cacheKey])` instead of a render-time comparison.
+- **Fullscreen Player background flickering**: The blurred background briefly showed a blank frame when switching tracks because the new image div was added to the DOM before the blob URL was ready. Fixed in `FsBg` by preloading the image via `new Image()` before inserting the layer, and using `useCachedUrl(..., false)` for the crossfade background so the raw URL is never used as a fallback during transitions.
+- **Playlist card delete confirmation not visible**: The confirm state only changed the icon colour, which was barely noticeable over the red button. Replaced with a size expansion (24 px → 30 px), an inset white ring, and a pulsing `delete-confirm-pulse` animation that alternates between two shades of red.
+- **Gruvbox Light Soft — back button and badge**: The album detail back-arrow and album badge were invisible against the warm light background. Added explicit colour overrides for `.album-detail-back` and `.album-detail-badge` in the gruvbox-light-soft theme.
+
+### Changed
+
+- **`buildStreamUrl` signature**: Removed the unused `suffix` parameter. Opus transcoding (`format=flac`) is now handled in `playerStore.playTrack` via `track.suffix` check, keeping the URL builder stateless.
+
+---
+
+## [1.25.1] - 2026-04-01
+
+### Fixed
+
+- **Single-instance enforcement** *(reported by [@netherguy4](https://github.com/netherguy4))*: Re-launching the app while it was already running (including minimized to tray) would spawn a new independent process, leading to playback conflicts and state divergence. Integrated `tauri-plugin-single-instance` — subsequent launches are intercepted, the existing window is shown, unminimized, and focused instead.
+
+---
+
+## [1.25.0] - 2026-04-01
+
+### Added
+
+- **System Tray** *(requested by [@jackbot](https://github.com/jackbot) and [@thecyanide](https://github.com/thecyanide))*: Functional tray icon with context menu — Play / Pause, Previous Track, Next Track, Show / Hide, and Exit Psysonic. Left-clicking the tray icon toggles window visibility. The tray icon is built via `TrayIconBuilder` in Rust so menu events are properly wired.
+- **Minimize to Tray** *(requested by [@jackbot](https://github.com/jackbot) and [@thecyanide](https://github.com/thecyanide))*: New toggle in Settings → Behavior. When enabled, closing the window hides it to the tray instead of exiting. The close button behaviour is intercepted in Rust (`prevent_close` + `window:close-requested` event) and the JS side decides hide vs. exit based on the user setting.
+- **Sidebar Customization** *(requested by [@lighthous3d](https://github.com/lighthous3d))*: New section in Settings → Appearance. All library and system nav items can be shown/hidden via a toggle switch and reordered by dragging the grip handle. Order and visibility are persisted across sessions (`psysonic_sidebar` in localStorage). Fixed items (Now Playing, Settings) are listed as non-configurable below the list.
+- **Playlist cover art**: Playlist cards on the Playlists overview page now display the server-generated cover image (Navidrome's `coverArt` field on the playlist object) via the IndexedDB image cache. Falls back to the ListMusic icon when no cover is available.
+
+### Fixed
+
+- **Cover image flickering**: `buildCoverArtUrl()` generates a new random auth salt on every call, causing `useCachedUrl` to re-trigger on every render and produce a rapid re-fetch loop. Fixed by wrapping all `buildCoverArtUrl` / `coverArtCacheKey` calls in `useMemo` with the cover ID as dependency in `ArtistCardLocal`, `QueuePanel`, `FullscreenPlayer`, `Hero`, and `PlaylistDetail`.
+- **DnD text selection**: Dragging a grip handle in the Sidebar Customizer (and any future `useDragSource` consumer) would select all text on the page during the threshold detection phase. Fixed by calling `e.preventDefault()` in `useDragSource`'s `onMouseDown` handler before the drag threshold is reached.
+- **Sidebar Customization DnD on Linux**: The initial implementation used the HTML5 Drag & Drop API, which always shows a forbidden cursor on WebKitGTK and does not fire drop events reliably. Rewritten to use the existing psy-drag mouse-event system (`useDragSource` / `psy-drop` custom event), consistent with the Queue panel.
+
+---
+
+## [1.24.0] - 2026-03-31
+
+### Added
+
+- **Playlist Management** *(requested by [@adirav02](https://github.com/adirav02))*: Full playlist management feature:
+  - **Playlists overview page** (`/playlists`): card grid showing all server playlists with cover collage, song count and duration. Inline "New Playlist" creation (Enter to confirm, Escape to cancel). Two-click delete confirmation directly on the card.
+  - **Playlist detail page** (`/playlists/:id`): hero area with 2×2 album cover collage and blurred background (matching Album Detail style), full tracklist with drag-and-drop reordering, star ratings, codec labels, per-row delete button, and context menu.
+  - **Song search**: "Add Songs" button opens an inline search panel with debounced server search, thumbnail, artist · album info, and a round add button (accent on hover). Duplicate songs already in the playlist are filtered from results.
+  - **Suggestions**: "Suggested Songs" section below the tracklist loads similar songs via `getSimilarSongs2` based on the first artist in the playlist. Refresh button to load a new batch. Same tracklist layout as search results.
+  - **Context menu — Add to Playlist**: "Add to Playlist" submenu available on all song/album/queue-item context menus. Playlists sorted by most recently used. "New Playlist" inline create at the top of the submenu. Submenu flips left when near the right viewport edge.
+  - **Sidebar**: Playlists navigation entry added between Favorites and Statistics.
+  - **Recently used playlist tracking**: `playlistStore` (persisted) tracks the last 50 used playlist IDs for the context menu sort order.
+
+### Fixed
+
+- **Resampling — first track played at native sample rate** *(reported by [@sorensiimSalling](https://github.com/sorensiimSalling))*: `current_sample_rate` was initialized to `44100`, causing every track to be resampled down to 44.1 kHz on playback start. Initializing to `0` disables resampling until the actual track rate is known.
+- **Resampling — no application-level resampling for any track**: `target_rate` in `audio_play` and `audio_chain_next` is now always `0`. Previously, tracks after the first were resampled to match the first track's sample rate. Rodio handles conversion to the output device rate internally; every track now plays at its native sample rate.
+- **Playlist hero background flickering**: The blurred hero background in Playlist Detail flickered on every render because `buildCoverArtUrl()` generates a new random salt on every call, causing `useCachedUrl` to re-trigger in a loop. The fetch URL and cache key are now `useMemo`-stabilised.
+- **Input focus double border**: The playlist name and song search inputs used a `search-input` class that had no CSS definition, falling back to browser defaults. The global `:focus-visible` rule then added a second outline on top of the browser's own focus ring. Switched to the `.input` class which sets `outline: none` and uses `border-color` + glow on focus.
+
+### Changed
+
+- **Playlist search panel**: Redesigned with `surface-2` background, `radius-lg`, slide-down open animation, 36 px thumbnails, artist · album subtitle line, and a round icon add-button (accent colour on hover) replacing the generic `btn-surface` button.
+
+---
+
+## [1.23.0] - 2026-03-30
+
+### Added
+
+- **Advanced Search**: New dedicated page (`/search/advanced`) reachable via the filter icon in the search bar. Supports free-text search combined with genre filter (dropdown from server), year range (from/to), and result-type toggle (All / Artists / Albums / Songs). Search logic: text query uses `search3` with client-side genre/year filtering; genre-only uses `getAlbumsByGenre` + random songs from that genre; year-only uses `getAlbumList(byYear)`. Results show in the standard ArtistRow / AlbumRow / tracklist layout with drag-to-queue and context menu support.
+- **Genre Mix — Server-native genres**: The Genre Mix panel in Random Mix now shows the top 20 genres from the server sorted by song count, instead of hardcoded keyword-based "Super Genre" groups. Only genres with at least one song and no audiobook keywords are shown. Clicking a badge fetches up to 50 random songs from exactly that genre.
+- **Genre Mix — Shuffle button**: A ↺ button appears when the server has more than 20 genres. Clicking it picks a fresh random selection of 20 from all available genres, replacing the current badges without triggering a search.
+- **Favorites — Play All**: "Play All" button (primary style) added next to "Add all to queue" in the Favorites → Songs section. Starts playback immediately from the first favorited song.
+- **Playlist Load — Append mode**: The playlist load modal now has two action buttons per playlist: ▶ replaces the queue and starts playback (previous behavior), ≡+ appends all tracks to the existing queue without interrupting playback.
+
+### Fixed
+
+- **Replay Gain** *(contributed by [@trbn1](https://github.com/trbn1))*: Replay Gain metadata (track gain, album gain, peaks) is now correctly propagated to the audio engine across all track-construction sites via the new `songToTrack()` helper. Previously tracks built inline missed the `replayGain` field, causing the engine to apply 0 dB gain regardless of tags.
+
+### Changed
+
+- **Genre Mix description**: Panel subtitle updated to explain that badges represent the top 20 genres by song count and that clicking loads a random mix from that genre.
+- **Random Mix — Filter panel**: Added a short descriptive hint below the "Filters" heading explaining that genre tags and artist names in the tracklist are clickable to add them to the blacklist.
+- **Playlist Load modal**: Width increased from 400 px to 560 px (90 vw cap) so long playlist names are readable without truncation.
+- **Settings — Contributors**: Contributors section is now a collapsible table. Each entry shows the contributor's GitHub avatar, `@username` (linked to their profile), a version badge, and a bullet list of their specific contributions. [@trbn1](https://github.com/trbn1) added for Replay Gain fix (PR #9).
+
+### Theme Fixes
+
+- **Powerslave**: Album card play button no longer flickers between gradient and flat accent color on hover — explicit `:hover` gradient override added. Sidebar stripe pattern replaced with soft radial-gradient cloud wisps.
+
+---
+
+## [1.22.0] - 2026-03-30
+
+### Added
+
+- **Queue — Active Playlist Tracking** *(Beta)* ⚠️: The queue now remembers which playlist was last loaded or saved. The playlist name appears as a subtitle below the queue title. The save button smart-saves: if an active playlist is set, it updates that playlist directly without opening a modal. If no playlist is active, the save modal opens as before.
+- **Queue — Themed Delete Confirmation** *(Beta)* ⚠️: Deleting a playlist now shows a styled in-app confirmation dialog matching the current theme, replacing the unstyled native browser `confirm()` dialog.
+- **Queue — Load Modal Live Filter** *(Beta)* ⚠️: The playlist load modal now has a live filter input at the top — typing narrows the playlist list in real time.
+- **Drag & Drop — Precise Insertion** *(Beta)* ⚠️: Songs and albums dragged into the queue can now be dropped at any position between existing items. A blue insertion line shows exactly where the track will land. Previously all drops appended to the end of the queue.
+- **Drag & Drop — Slim Ghost** *(Beta)* ⚠️: The drag ghost is now a compact single-line chip (cover thumbnail + title) instead of the full album card or track row. Consistent for both song and album drags.
+
+### Fixed
+
+- **Seek flash after debounce** *(contributed by [@nullobject](https://github.com/nullobject))*: After a seek the waveform briefly flashed back to the pre-seek position when the Rust `audio:progress` event arrived before the seek completed. A `seekTarget` guard now blocks stale progress ticks until the engine catches up.
+- **Waveform seekbar jitter** *(contributed by [@nullobject](https://github.com/nullobject))*: The seekbar width changed on every progress tick because player time updates caused the waveform canvas container to reflow. The canvas now has an explicit stable width so time label changes no longer affect its layout.
+- **Drag & Drop — text selection and grid auto-scroll during drag**: Dragging album cards or track rows caused the browser to begin a text selection and auto-scroll grid rows horizontally. All drag `onMouseDown` handlers now call `preventDefault()` and the DragDropContext uses `{ passive: false }` to suppress selection during mouse moves.
+- **Drag & Drop — forbidden cursor on KDE Plasma**: Replaced the HTML5 `dragstart`/`dragend` system with a pure mouse-event DnD pipeline (`DragDropContext`). The WebKitGTK forbidden-cursor artefact on KDE Plasma no longer appears during drags.
+
+### Changed
+
+- **Settings — Contributors**: [@nullobject](https://github.com/nullobject) added for seek & waveform fixes.
+
+### Theme Fixes
+
+- **Powerslave**: Connection indicators (Last.fm / Server name) dimmed to match sidebar tone. Back button in album details now white on dark overlay. Tech strip (codec/bitrate) in queue uses dark Nile-blue background instead of sandstone. Artist name in album hero changed to Nile-blue `#050E19`.
+- **North Park**: Back button in album details now visible (was dark brown on dark overlay).
+- **Dark Side of the Moon**: Album detail year/genre/info brightened from `#555555` to `#888888`. Connection indicators brightened for legibility on near-black sidebar.
+
+---
+
+## [1.21.0] - 2026-03-29
+
+### Added
+
+- **What's New modal**: On first launch after an update, a changelog popup appears showing the current version's release notes. Can be permanently dismissed via checkbox, or re-enabled in Settings → About.
+- **New theme category — Famous Albums**: A dedicated group for album-art-inspired themes.
+- **Theme — Dark Side of the Moon (inspired)** *(Famous Albums)* ⚠️ **Beta**: Void-black everywhere, the iconic prism spectrum rainbow as a 2 px top border on the player bar, spectrum-violet accent `#9B30FF`, white track name (the input light beam).
+- **Theme — Powerslave (inspired)** *(Famous Albums)* ⚠️ **Beta**: Sun-bleached sandstone main area, deep Nile-sky blue sidebar and player bar, pharaoh gold accent `#C8960C`. Blue–gold duality mirrors the album artwork's vivid azure sky against the Egyptian temple gold.
+- **Theme — North Park** *(Series)* ⚠️ **Beta**: South Park-inspired. Construction-paper cream main area, Colorado mountain-blue `#1B3D6E` sidebar, Kenny orange `#FF8C00` accent, flat no-gradient buttons.
+
+### Changed
+
+- **AlbumTrackList — artist column always visible**: The artist column is now shown on all albums, not only Various Artists compilations. Useful for albums with guest artists or featuring credits where track-level artist differs from the album artist.
+- **Tracklist column widths — more flexible**: Title and artist columns now use `minmax` fr units (`1.5fr` / `1fr`) instead of fixed sizes, so the artist column moves naturally closer to the title on wide viewports and never clips on narrow ones.
+
+### Fixed
+
+- **Settings — changelog toggle alignment**: The "Show What's New on update" toggle was rendering below its label instead of beside it.
+
+---
+
 ## [1.20.0] - 2026-03-29

 ### Added
@@ -55,7 +55,8 @@ Designed specifically for users hosting their own music via Navidrome or other S
 - [x] Synchronized lyrics via LRCLIB (in-sidebar, auto-scroll)
 - [x] Multi-server support
 - [x] IndexedDB image caching
- [x] Random Mix with keyword filter & Super Genre mix
+- [x] Random Mix with server-native Genre Mix (top genres by song count, shuffleable)
+- [x] Advanced Search (text + genre + year + result-type filters)
 - [x] Large theme library across 8 groups: Open Source Classics, Operating Systems, Games, Movies, Series, Social Media, Psysonic originals, Mediaplayer
 - [x] Internationalization (English, German, French, Dutch, Chinese)
 - [x] AUR package (Arch / CachyOS)
@@ -63,7 +64,7 @@ Designed specifically for users hosting their own music via Navidrome or other S
 - [x] Font picker (10 UI fonts)

 ### 📋 Planned
- [ ] General UI polish & visual refinement
+- [ ] Theme contrast & legibility audit — systematic review of text/background contrast ratios across all 60+ themes
 - [ ] Accessibility (a11y) — keyboard navigation, screen reader support, ARIA labels
 - [ ] More languages

@@ -71,7 +72,8 @@ Designed specifically for users hosting their own music via Navidrome or other S

 ## ● 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.
+Some known bugs actively working on fixes
+

 ## 📥 Installation

@@ -1,20 +1,21 @@
 {
  "name": "psysonic",
-  "version": "1.18.0",
+  "version": "1.26.1",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "psysonic",
-      "version": "1.18.0",
+      "version": "1.26.1",
      "dependencies": {
        "@tauri-apps/api": "^2",
        "@tauri-apps/plugin-dialog": "^2.6.0",
        "@tauri-apps/plugin-fs": "^2.4.5",
        "@tauri-apps/plugin-global-shortcut": "^2",
-        "@tauri-apps/plugin-notification": "^2",
+        "@tauri-apps/plugin-process": "^2.3.1",
        "@tauri-apps/plugin-shell": "^2",
        "@tauri-apps/plugin-store": "^2",
+        "@tauri-apps/plugin-updater": "^2.10.0",
        "@tauri-apps/plugin-window-state": "^2.4.1",
        "axios": "^1.7.7",
        "i18next": "^25.8.16",
@@ -1494,10 +1495,10 @@
        "@tauri-apps/api": "^2.8.0"
      }
    },
-    "node_modules/@tauri-apps/plugin-notification": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/@tauri-apps/plugin-notification/-/plugin-notification-2.3.3.tgz",
-      "integrity": "sha512-Zw+ZH18RJb41G4NrfHgIuofJiymusqN+q8fGUIIV7vyCH+5sSn5coqRv/MWB9qETsUs97vmU045q7OyseCV3Qg==",
+    "node_modules/@tauri-apps/plugin-process": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/plugin-process/-/plugin-process-2.3.1.tgz",
+      "integrity": "sha512-nCa4fGVaDL/B9ai03VyPOjfAHRHSBz5v6F/ObsB73r/dA3MHHhZtldaDMIc0V/pnUw9ehzr2iEG+XkSEyC0JJA==",
      "license": "MIT OR Apache-2.0",
      "dependencies": {
        "@tauri-apps/api": "^2.8.0"
@@ -1521,6 +1522,15 @@
        "@tauri-apps/api": "^2.8.0"
      }
    },
+    "node_modules/@tauri-apps/plugin-updater": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/plugin-updater/-/plugin-updater-2.10.0.tgz",
+      "integrity": "sha512-ljN8jPlnT0aSn8ecYhuBib84alxfMx6Hc8vJSKMJyzGbTPFZAC44T2I1QNFZssgWKrAlofvJqCC6Rr472JWfkQ==",
+      "license": "MIT OR Apache-2.0",
+      "dependencies": {
+        "@tauri-apps/api": "^2.10.1"
+      }
+    },
    "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",
@@ -1,6 +1,6 @@
 {
  "name": "psysonic",
-  "version": "1.20.0",
+  "version": "1.27.2",
  "private": true,
  "scripts": {
    "dev": "vite",
@@ -15,8 +15,10 @@
    "@tauri-apps/plugin-dialog": "^2.6.0",
    "@tauri-apps/plugin-fs": "^2.4.5",
    "@tauri-apps/plugin-global-shortcut": "^2",
+    "@tauri-apps/plugin-process": "^2.3.1",
    "@tauri-apps/plugin-shell": "^2",
    "@tauri-apps/plugin-store": "^2",
+    "@tauri-apps/plugin-updater": "^2.10.0",
    "@tauri-apps/plugin-window-state": "^2.4.1",
    "axios": "^1.7.7",
    "i18next": "^25.8.16",
@@ -1,6 +1,6 @@
 # Maintainer: Psychotoxic <psychotoxic@gmx.de>
 pkgname=psysonic
-pkgver=1.19.0
+pkgver=1.27.2
 pkgrel=1
 pkgdesc="Desktop music player for Subsonic API-compatible servers (Navidrome, Gonic, etc.)"
 arch=('x86_64')
@@ -9,7 +9,6 @@ license=('GPL-3.0-only')
 depends=(
  'webkit2gtk-4.1'
  'gtk3'
-  'libayatana-appindicator'
  'openssl'
  'alsa-lib'
 )
@@ -17,6 +16,7 @@ makedepends=(
  'npm'
  'rust'
  'cargo'
+  'clang'
 )
 source=("$pkgname-$pkgver.tar.gz::https://github.com/Psychotoxical/psysonic/archive/refs/tags/v$pkgver.tar.gz")
 sha256sums=('SKIP')
@@ -0,0 +1,70 @@
+#!/usr/bin/env node
+// Generates latest.json for the Tauri updater from a GitHub release.
+// Reads .sig files uploaded by tauri-action, assembles the manifest, writes latest.json.
+//
+// Required env vars: VERSION, GITHUB_TOKEN
+// Usage: node scripts/generate-update-manifest.js
+
+const { execSync } = require('child_process');
+const fs = require('fs');
+
+const VERSION = process.env.VERSION;
+const REPO = 'Psychotoxical/psysonic';
+const TAG = `app-v${VERSION}`;
+
+if (!VERSION) {
+  console.error('VERSION env var required');
+  process.exit(1);
+}
+
+// Platform → update bundle filename (produced by tauri-action with updater plugin)
+const PLATFORM_FILES = {
+  'darwin-aarch64': `Psysonic_aarch64.app.tar.gz`,
+  'darwin-x86_64':  `Psysonic_x64.app.tar.gz`,
+  'windows-x86_64': `Psysonic_${VERSION}_x64-setup.nsis.zip`,
+};
+
+const platforms = {};
+
+for (const [platform, filename] of Object.entries(PLATFORM_FILES)) {
+  const sigFile = `${filename}.sig`;
+  try {
+    execSync(
+      `gh release download "${TAG}" --repo "${REPO}" -p "${sigFile}" --clobber`,
+      { stdio: 'pipe' }
+    );
+    const signature = fs.readFileSync(sigFile, 'utf8').trim();
+    const url = `https://github.com/${REPO}/releases/download/${TAG}/${filename}`;
+    platforms[platform] = { signature, url };
+    console.log(`✓ ${platform}`);
+  } catch (e) {
+    console.warn(`⚠ Skipping ${platform}: asset not found (${sigFile})`);
+  }
+}
+
+if (Object.keys(platforms).length === 0) {
+  console.error('No platforms found — aborting manifest generation');
+  process.exit(1);
+}
+
+// Pull release notes from GitHub
+let notes = '';
+try {
+  const raw = execSync(
+    `gh release view "${TAG}" --repo "${REPO}" --json body`,
+    { stdio: 'pipe' }
+  ).toString();
+  notes = JSON.parse(raw).body ?? '';
+} catch {
+  console.warn('Could not fetch release notes');
+}
+
+const manifest = {
+  version: VERSION,
+  notes,
+  pub_date: new Date().toISOString(),
+  platforms,
+};
+
+fs.writeFileSync('latest.json', JSON.stringify(manifest, null, 2));
+console.log(`\nWrote latest.json for v${VERSION} with platforms: ${Object.keys(platforms).join(', ')}`);
@@ -69,6 +69,15 @@ version = "1.0.102"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "7f202df86484c868dbad7eaa557ef785d5c66295e41b460ef922eca0723b842c"

+[[package]]
+name = "arbitrary"
+version = "1.4.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c3d036a3c4ab069c7b410a2ce876bd74808d2d0888a82667669f8e783a898bf1"
+dependencies = [
+ "derive_arbitrary",
+]
+
 [[package]]
 name = "arrayvec"
 version = "0.7.6"
@@ -85,6 +94,18 @@ dependencies = [
 "futures-core",
 ]

+[[package]]
+name = "async-broadcast"
+version = "0.7.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "435a87a52755b8f27fcf321ac4f04b2802e337c8c4872923137471ec39c37532"
+dependencies = [
+ "event-listener 5.4.1",
+ "event-listener-strategy",
+ "futures-core",
+ "pin-project-lite",
+]
+
 [[package]]
 name = "async-channel"
 version = "2.5.0"
@@ -198,6 +219,24 @@ dependencies = [
 "windows-sys 0.48.0",
 ]

+[[package]]
+name = "async-process"
+version = "2.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fc50921ec0055cdd8a16de48773bfeec5c972598674347252c0399676be7da75"
+dependencies = [
+ "async-channel",
+ "async-io 2.6.0",
+ "async-lock 3.4.2",
+ "async-signal",
+ "async-task",
+ "blocking",
+ "cfg-if",
+ "event-listener 5.4.1",
+ "futures-lite 2.6.1",
+ "rustix 1.1.4",
+]
+
 [[package]]
 name = "async-recursion"
 version = "1.1.1"
@@ -892,6 +931,17 @@ dependencies = [
 "syn 1.0.109",
 ]

+[[package]]
+name = "derive_arbitrary"
+version = "1.4.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1e567bd82dcff979e4b03460c307b3cdc9e96fde3d73bed1496d2bc75d9dd62a"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.117",
+]
+
 [[package]]
 name = "derive_more"
 version = "0.99.20"
@@ -1059,6 +1109,12 @@ dependencies = [
 "cfg-if",
 ]

+[[package]]
+name = "endi"
+version = "1.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "66b7e2430c6dff6a955451e2cfc438f09cea1965a9d6f87f7e3b90decc014099"
+
 [[package]]
 name = "enumflags2"
 version = "0.7.12"
@@ -1185,6 +1241,17 @@ dependencies = [
 "rustc_version",
 ]

+[[package]]
+name = "filetime"
+version = "0.2.27"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f98844151eee8917efc50bd9e8318cb963ae8b297431495d3f758616ea5c57db"
+dependencies = [
+ "cfg-if",
+ "libc",
+ "libredox",
+]
+
 [[package]]
 name = "find-msvc-tools"
 version = "0.1.9"
@@ -2361,7 +2428,10 @@ version = "0.1.14"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "1744e39d1d6a9948f4f388969627434e31128196de472883b39f148769bfe30a"
 dependencies = [
+ "bitflags 2.11.0",
 "libc",
+ "plain",
+ "redox_syscall 0.7.3",
 ]

 [[package]]
@@ -2500,6 +2570,12 @@ version = "0.2.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "68354c5c6bd36d73ff3feceb05efa59b6acb7626617f4962be322a825e61f79a"

+[[package]]
+name = "minisign-verify"
+version = "0.2.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "22f9645cb765ea72b8111f36c522475d2daa0d22c957a9826437e97534bc4e9e"
+
 [[package]]
 name = "miniz_oxide"
 version = "0.8.9"
@@ -2783,6 +2859,7 @@ checksum = "e3e0adef53c21f888deb4fa59fc59f7eb17404926ee8a6f59f5df0fd7f9f3272"
 dependencies = [
 "bitflags 2.11.0",
 "block2",
+ "libc",
 "objc2",
 "objc2-core-foundation",
 ]
@@ -2798,6 +2875,18 @@ dependencies = [
 "objc2-core-foundation",
 ]

+[[package]]
+name = "objc2-osa-kit"
+version = "0.3.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f112d1746737b0da274ef79a23aac283376f335f4095a083a267a082f21db0c0"
+dependencies = [
+ "bitflags 2.11.0",
+ "objc2",
+ "objc2-app-kit",
+ "objc2-foundation",
+]
+
 [[package]]
 name = "objc2-quartz-core"
 version = "0.3.2"
@@ -2947,6 +3036,20 @@ dependencies = [
 "windows-sys 0.61.2",
 ]

+[[package]]
+name = "osakit"
+version = "0.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "732c71caeaa72c065bb69d7ea08717bd3f4863a4f451402fc9513e29dbd5261b"
+dependencies = [
+ "objc2",
+ "objc2-foundation",
+ "objc2-osa-kit",
+ "serde",
+ "serde_json",
+ "thiserror 2.0.18",
+]
+
 [[package]]
 name = "pango"
 version = "0.18.3"
@@ -2996,7 +3099,7 @@ checksum = "2621685985a2ebf1c516881c026032ac7deafcda1a2c9b7850dc81e3dfcb64c1"
 dependencies = [
 "cfg-if",
 "libc",
- "redox_syscall",
+ "redox_syscall 0.5.18",
 "smallvec",
 "windows-link 0.2.1",
 ]
@@ -3176,6 +3279,12 @@ version = "0.3.32"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "7edddbd0b52d732b21ad9a5fab5c704c14cd949e5e9a1ec5929a24fded1b904c"

+[[package]]
+name = "plain"
+version = "0.2.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b4596b6d070b27117e987119b4dac604f3c58cfb0b191112e24771b2faeac1a6"
+
 [[package]]
 name = "plist"
 version = "1.8.0"
@@ -3361,7 +3470,7 @@ dependencies = [

 [[package]]
 name = "psysonic"
-version = "1.19.0"
+version = "1.27.2"
 dependencies = [
 "biquad",
 "md5",
@@ -3376,8 +3485,11 @@ dependencies = [
 "tauri-plugin-dialog",
 "tauri-plugin-fs",
 "tauri-plugin-global-shortcut",
+ "tauri-plugin-process",
 "tauri-plugin-shell",
+ "tauri-plugin-single-instance",
 "tauri-plugin-store",
+ "tauri-plugin-updater",
 "tauri-plugin-window-state",
 "tokio",
 ]
@@ -3514,6 +3626,15 @@ dependencies = [
 "bitflags 2.11.0",
 ]

+[[package]]
+name = "redox_syscall"
+version = "0.7.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6ce70a74e890531977d37e532c34d45e9055d2409ed08ddba14529471ed0be16"
+dependencies = [
+ "bitflags 2.11.0",
+]
+
 [[package]]
 name = "redox_users"
 version = "0.5.2"
@@ -3631,15 +3752,20 @@ dependencies = [
 "http-body",
 "http-body-util",
 "hyper",
+ "hyper-rustls",
 "hyper-util",
 "js-sys",
 "log",
 "percent-encoding",
 "pin-project-lite",
+ "rustls",
+ "rustls-pki-types",
+ "rustls-platform-verifier",
 "serde",
 "serde_json",
 "sync_wrapper",
 "tokio",
+ "tokio-rustls",
 "tokio-util",
 "tower",
 "tower-http",
@@ -3762,12 +3888,25 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "758025cb5fccfd3bc2fd74708fd4682be41d99e5dff73c377c0646c6012c73a4"
 dependencies = [
 "once_cell",
+ "ring",
 "rustls-pki-types",
 "rustls-webpki",
 "subtle",
 "zeroize",
 ]

+[[package]]
+name = "rustls-native-certs"
+version = "0.8.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "612460d5f7bea540c490b2b6395d8e34a953e52b491accd6c86c8164c5932a63"
+dependencies = [
+ "openssl-probe",
+ "rustls-pki-types",
+ "schannel",
+ "security-framework",
+]
+
 [[package]]
 name = "rustls-pki-types"
 version = "1.14.0"
@@ -3777,6 +3916,33 @@ dependencies = [
 "zeroize",
 ]

+[[package]]
+name = "rustls-platform-verifier"
+version = "0.6.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1d99feebc72bae7ab76ba994bb5e121b8d83d910ca40b36e0921f53becc41784"
+dependencies = [
+ "core-foundation 0.10.1",
+ "core-foundation-sys",
+ "jni",
+ "log",
+ "once_cell",
+ "rustls",
+ "rustls-native-certs",
+ "rustls-platform-verifier-android",
+ "rustls-webpki",
+ "security-framework",
+ "security-framework-sys",
+ "webpki-root-certs",
+ "windows-sys 0.61.2",
+]
+
+[[package]]
+name = "rustls-platform-verifier-android"
+version = "0.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f87165f0995f63a9fbeea62b64d10b4d9d8e78ec6d7d51fb2125fda7bb36788f"
+
 [[package]]
 name = "rustls-webpki"
 version = "0.103.9"
@@ -4231,7 +4397,7 @@ dependencies = [
 "objc2-foundation",
 "objc2-quartz-core",
 "raw-window-handle",
- "redox_syscall",
+ "redox_syscall 0.5.18",
 "tracing",
 "wasm-bindgen",
 "web-sys",
@@ -4279,8 +4445,8 @@ dependencies = [
 "pollster",
 "thiserror 1.0.69",
 "windows 0.44.0",
- "zbus",
- "zvariant",
+ "zbus 3.15.2",
+ "zvariant 3.15.2",
 ]

 [[package]]
@@ -4613,6 +4779,17 @@ dependencies = [
 "syn 2.0.117",
 ]

+[[package]]
+name = "tar"
+version = "0.4.45"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "22692a6476a21fa75fdfc11d452fda482af402c008cdbaf3476414e122040973"
+dependencies = [
+ "filetime",
+ "libc",
+ "xattr",
+]
+
 [[package]]
 name = "target-lexicon"
 version = "0.12.16"
@@ -4806,6 +4983,16 @@ dependencies = [
 "thiserror 2.0.18",
 ]

+[[package]]
+name = "tauri-plugin-process"
+version = "2.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d55511a7bf6cd70c8767b02c97bf8134fa434daf3926cfc1be0a0f94132d165a"
+dependencies = [
+ "tauri",
+ "tauri-plugin",
+]
+
 [[package]]
 name = "tauri-plugin-shell"
 version = "2.3.5"
@@ -4827,6 +5014,21 @@ dependencies = [
 "tokio",
 ]

+[[package]]
+name = "tauri-plugin-single-instance"
+version = "2.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "dc61e4822b8f74d68278e09161d3e3fdd1b14b9eb781e24edccaabf10c420e8c"
+dependencies = [
+ "serde",
+ "serde_json",
+ "tauri",
+ "thiserror 2.0.18",
+ "tracing",
+ "windows-sys 0.60.2",
+ "zbus 5.14.0",
+]
+
 [[package]]
 name = "tauri-plugin-store"
 version = "2.4.2"
@@ -4843,6 +5045,39 @@ dependencies = [
 "tracing",
 ]

+[[package]]
+name = "tauri-plugin-updater"
+version = "2.10.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3fe8e9bebd88fc222938ffdfbdcfa0307081423bd01e3252fc337d8bde81fc61"
+dependencies = [
+ "base64 0.22.1",
+ "dirs",
+ "flate2",
+ "futures-util",
+ "http",
+ "infer",
+ "log",
+ "minisign-verify",
+ "osakit",
+ "percent-encoding",
+ "reqwest 0.13.2",
+ "rustls",
+ "semver",
+ "serde",
+ "serde_json",
+ "tar",
+ "tauri",
+ "tauri-plugin",
+ "tempfile",
+ "thiserror 2.0.18",
+ "time",
+ "tokio",
+ "url",
+ "windows-sys 0.60.2",
+ "zip",
+]
+
 [[package]]
 name = "tauri-plugin-window-state"
 version = "2.4.1"
@@ -5734,6 +5969,15 @@ dependencies = [
 "system-deps",
 ]

+[[package]]
+name = "webpki-root-certs"
+version = "1.0.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "804f18a4ac2676ffb4e8b5b5fa9ae38af06df08162314f96a68d2a363e21a8ca"
+dependencies = [
+ "rustls-pki-types",
+]
+
 [[package]]
 name = "webview2-com"
 version = "0.38.2"
@@ -6524,6 +6768,16 @@ version = "0.13.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "ea6fc2961e4ef194dcbfe56bb845534d0dc8098940c7e5c012a258bfec6701bd"

+[[package]]
+name = "xattr"
+version = "1.6.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "32e45ad4206f6d2479085147f02bc2ef834ac85886624a23575ae137c8aa8156"
+dependencies = [
+ "libc",
+ "rustix 1.1.4",
+]
+
 [[package]]
 name = "xdg-home"
 version = "1.3.0"
@@ -6569,12 +6823,12 @@ version = "3.15.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "675d170b632a6ad49804c8cf2105d7c31eddd3312555cffd4b740e08e97c25e6"
 dependencies = [
- "async-broadcast",
+ "async-broadcast 0.5.1",
 "async-executor",
 "async-fs",
 "async-io 1.13.0",
 "async-lock 2.8.0",
- "async-process",
+ "async-process 1.8.1",
 "async-recursion",
 "async-task",
 "async-trait",
@@ -6599,9 +6853,44 @@ dependencies = [
 "uds_windows",
 "winapi",
 "xdg-home",
- "zbus_macros",
- "zbus_names",
- "zvariant",
+ "zbus_macros 3.15.2",
+ "zbus_names 2.6.1",
+ "zvariant 3.15.2",
+]
+
+[[package]]
+name = "zbus"
+version = "5.14.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ca82f95dbd3943a40a53cfded6c2d0a2ca26192011846a1810c4256ef92c60bc"
+dependencies = [
+ "async-broadcast 0.7.2",
+ "async-executor",
+ "async-io 2.6.0",
+ "async-lock 3.4.2",
+ "async-process 2.5.0",
+ "async-recursion",
+ "async-task",
+ "async-trait",
+ "blocking",
+ "enumflags2",
+ "event-listener 5.4.1",
+ "futures-core",
+ "futures-lite 2.6.1",
+ "hex",
+ "libc",
+ "ordered-stream",
+ "rustix 1.1.4",
+ "serde",
+ "serde_repr",
+ "tracing",
+ "uds_windows",
+ "uuid",
+ "windows-sys 0.61.2",
+ "winnow 0.7.15",
+ "zbus_macros 5.14.0",
+ "zbus_names 4.3.1",
+ "zvariant 5.10.0",
 ]

 [[package]]
@@ -6615,7 +6904,22 @@ dependencies = [
 "quote",
 "regex",
 "syn 1.0.109",
- "zvariant_utils",
+ "zvariant_utils 1.0.1",
+]
+
+[[package]]
+name = "zbus_macros"
+version = "5.14.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "897e79616e84aac4b2c46e9132a4f63b93105d54fe8c0e8f6bffc21fa8d49222"
+dependencies = [
+ "proc-macro-crate 3.5.0",
+ "proc-macro2",
+ "quote",
+ "syn 2.0.117",
+ "zbus_names 4.3.1",
+ "zvariant 5.10.0",
+ "zvariant_utils 3.3.0",
 ]

 [[package]]
@@ -6626,7 +6930,18 @@ checksum = "437d738d3750bed6ca9b8d423ccc7a8eb284f6b1d6d4e225a0e4e6258d864c8d"
 dependencies = [
 "serde",
 "static_assertions",
- "zvariant",
+ "zvariant 3.15.2",
+]
+
+[[package]]
+name = "zbus_names"
+version = "4.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ffd8af6d5b78619bab301ff3c560a5bd22426150253db278f164d6cf3b72c50f"
+dependencies = [
+ "serde",
+ "winnow 0.7.15",
+ "zvariant 5.10.0",
 ]

 [[package]]
@@ -6709,6 +7024,18 @@ dependencies = [
 "syn 2.0.117",
 ]

+[[package]]
+name = "zip"
+version = "4.6.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "caa8cd6af31c3b31c6631b8f483848b91589021b28fffe50adada48d4f4d2ed1"
+dependencies = [
+ "arbitrary",
+ "crc32fast",
+ "indexmap 2.13.0",
+ "memchr",
+]
+
 [[package]]
 name = "zmij"
 version = "1.0.21"
@@ -6726,7 +7053,21 @@ dependencies = [
 "libc",
 "serde",
 "static_assertions",
- "zvariant_derive",
+ "zvariant_derive 3.15.2",
+]
+
+[[package]]
+name = "zvariant"
+version = "5.10.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5708299b21903bbe348e94729f22c49c55d04720a004aa350f1f9c122fd2540b"
+dependencies = [
+ "endi",
+ "enumflags2",
+ "serde",
+ "winnow 0.7.15",
+ "zvariant_derive 5.10.0",
+ "zvariant_utils 3.3.0",
 ]

 [[package]]
@@ -6739,7 +7080,20 @@ dependencies = [
 "proc-macro2",
 "quote",
 "syn 1.0.109",
- "zvariant_utils",
+ "zvariant_utils 1.0.1",
+]
+
+[[package]]
+name = "zvariant_derive"
+version = "5.10.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5b59b012ebe9c46656f9cc08d8da8b4c726510aef12559da3e5f1bf72780752c"
+dependencies = [
+ "proc-macro-crate 3.5.0",
+ "proc-macro2",
+ "quote",
+ "syn 2.0.117",
+ "zvariant_utils 3.3.0",
 ]

 [[package]]
@@ -6752,3 +7106,16 @@ dependencies = [
 "quote",
 "syn 1.0.109",
 ]
+
+[[package]]
+name = "zvariant_utils"
+version = "3.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f75c23a64ef8f40f13a6989991e643554d9bef1d682a281160cf0c1bc389c5e9"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "serde",
+ "syn 2.0.117",
+ "winnow 0.7.15",
+]
@@ -1,6 +1,6 @@
 [package]
 name = "psysonic"
-version = "1.19.0"
+version = "1.27.2"
 description = "Psysonic Desktop Music Player"
 authors = []
 license = ""
@@ -22,6 +22,7 @@ tauri-build = { version = "2", features = [] }

 [dependencies]
 tauri = { version = "2", features = ["tray-icon", "image-png"] }
+tauri-plugin-single-instance = "2"
 tauri-plugin-shell = "2"
 tauri-plugin-global-shortcut = "2"
 tauri-plugin-store = "2"
@@ -36,4 +37,6 @@ md5 = "0.7"
 tokio = { version = "1", features = ["rt", "time"] }
 biquad = "0.4"
 tauri-plugin-window-state = "2.4.1"
+tauri-plugin-updater = "2"
+tauri-plugin-process = "2"
 souvlaki = { version = "0.8", default-features = false, features = ["use_zbus"] }
@@ -30,6 +30,8 @@
    "core:window:allow-set-fullscreen",
    "core:window:allow-is-fullscreen",
    "core:window:allow-create",
-    "core:webview:allow-create-webview-window"
+    "core:webview:allow-create-webview-window",
+    "updater:default",
+    "process:allow-restart"
  ]
 }
@@ -1 +1 @@
-{"default":{"identifier":"default","description":"Default capabilities for Psysonic","local":true,"windows":["main"],"permissions":["core:default","shell:default",{"identifier":"shell:allow-open","allow":[{"url":"https://**"}]},"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"]}}
+{"default":{"identifier":"default","description":"Default capabilities for Psysonic","local":true,"windows":["main"],"permissions":["core:default","shell:default",{"identifier":"shell:allow-open","allow":[{"url":"https://**"}]},"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","updater:default","process:allow-restart"],"platforms":["linux","macOS","windows"]}}
@@ -6014,6 +6014,36 @@
          "const": "global-shortcut:deny-unregister-all",
          "markdownDescription": "Denies the unregister_all command without any pre-configured scope."
        },
+        {
+          "description": "This permission set configures which\nprocess features are by default exposed.\n\n#### Granted Permissions\n\nThis enables to quit via `allow-exit` and restart via `allow-restart`\nthe application.\n\n#### This default permission set includes:\n\n- `allow-exit`\n- `allow-restart`",
+          "type": "string",
+          "const": "process:default",
+          "markdownDescription": "This permission set configures which\nprocess features are by default exposed.\n\n#### Granted Permissions\n\nThis enables to quit via `allow-exit` and restart via `allow-restart`\nthe application.\n\n#### This default permission set includes:\n\n- `allow-exit`\n- `allow-restart`"
+        },
+        {
+          "description": "Enables the exit command without any pre-configured scope.",
+          "type": "string",
+          "const": "process:allow-exit",
+          "markdownDescription": "Enables the exit command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the restart command without any pre-configured scope.",
+          "type": "string",
+          "const": "process:allow-restart",
+          "markdownDescription": "Enables the restart command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the exit command without any pre-configured scope.",
+          "type": "string",
+          "const": "process:deny-exit",
+          "markdownDescription": "Denies the exit command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the restart command without any pre-configured scope.",
+          "type": "string",
+          "const": "process:deny-restart",
+          "markdownDescription": "Denies the restart command without any pre-configured scope."
+        },
        {
          "description": "This permission set configures which\nshell functionality is exposed by default.\n\n#### Granted Permissions\n\nIt allows to use the `open` functionality with a reasonable\nscope pre-configured. It will allow opening `http(s)://`,\n`tel:` and `mailto:` links.\n\n#### This default permission set includes:\n\n- `allow-open`",
          "type": "string",
@@ -6254,6 +6284,60 @@
          "const": "store:deny-values",
          "markdownDescription": "Denies the values command without any pre-configured scope."
        },
+        {
+          "description": "This permission set configures which kind of\nupdater functions are exposed to the frontend.\n\n#### Granted Permissions\n\nThe full workflow from checking for updates to installing them\nis enabled.\n\n\n#### This default permission set includes:\n\n- `allow-check`\n- `allow-download`\n- `allow-install`\n- `allow-download-and-install`",
+          "type": "string",
+          "const": "updater:default",
+          "markdownDescription": "This permission set configures which kind of\nupdater functions are exposed to the frontend.\n\n#### Granted Permissions\n\nThe full workflow from checking for updates to installing them\nis enabled.\n\n\n#### This default permission set includes:\n\n- `allow-check`\n- `allow-download`\n- `allow-install`\n- `allow-download-and-install`"
+        },
+        {
+          "description": "Enables the check command without any pre-configured scope.",
+          "type": "string",
+          "const": "updater:allow-check",
+          "markdownDescription": "Enables the check command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the download command without any pre-configured scope.",
+          "type": "string",
+          "const": "updater:allow-download",
+          "markdownDescription": "Enables the download command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the download_and_install command without any pre-configured scope.",
+          "type": "string",
+          "const": "updater:allow-download-and-install",
+          "markdownDescription": "Enables the download_and_install command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the install command without any pre-configured scope.",
+          "type": "string",
+          "const": "updater:allow-install",
+          "markdownDescription": "Enables the install command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the check command without any pre-configured scope.",
+          "type": "string",
+          "const": "updater:deny-check",
+          "markdownDescription": "Denies the check command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the download command without any pre-configured scope.",
+          "type": "string",
+          "const": "updater:deny-download",
+          "markdownDescription": "Denies the download command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the download_and_install command without any pre-configured scope.",
+          "type": "string",
+          "const": "updater:deny-download-and-install",
+          "markdownDescription": "Denies the download_and_install command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the install command without any pre-configured scope.",
+          "type": "string",
+          "const": "updater:deny-install",
+          "markdownDescription": "Denies the install 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",
@@ -6014,6 +6014,36 @@
          "const": "global-shortcut:deny-unregister-all",
          "markdownDescription": "Denies the unregister_all command without any pre-configured scope."
        },
+        {
+          "description": "This permission set configures which\nprocess features are by default exposed.\n\n#### Granted Permissions\n\nThis enables to quit via `allow-exit` and restart via `allow-restart`\nthe application.\n\n#### This default permission set includes:\n\n- `allow-exit`\n- `allow-restart`",
+          "type": "string",
+          "const": "process:default",
+          "markdownDescription": "This permission set configures which\nprocess features are by default exposed.\n\n#### Granted Permissions\n\nThis enables to quit via `allow-exit` and restart via `allow-restart`\nthe application.\n\n#### This default permission set includes:\n\n- `allow-exit`\n- `allow-restart`"
+        },
+        {
+          "description": "Enables the exit command without any pre-configured scope.",
+          "type": "string",
+          "const": "process:allow-exit",
+          "markdownDescription": "Enables the exit command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the restart command without any pre-configured scope.",
+          "type": "string",
+          "const": "process:allow-restart",
+          "markdownDescription": "Enables the restart command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the exit command without any pre-configured scope.",
+          "type": "string",
+          "const": "process:deny-exit",
+          "markdownDescription": "Denies the exit command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the restart command without any pre-configured scope.",
+          "type": "string",
+          "const": "process:deny-restart",
+          "markdownDescription": "Denies the restart command without any pre-configured scope."
+        },
        {
          "description": "This permission set configures which\nshell functionality is exposed by default.\n\n#### Granted Permissions\n\nIt allows to use the `open` functionality with a reasonable\nscope pre-configured. It will allow opening `http(s)://`,\n`tel:` and `mailto:` links.\n\n#### This default permission set includes:\n\n- `allow-open`",
          "type": "string",
@@ -6254,6 +6284,60 @@
          "const": "store:deny-values",
          "markdownDescription": "Denies the values command without any pre-configured scope."
        },
+        {
+          "description": "This permission set configures which kind of\nupdater functions are exposed to the frontend.\n\n#### Granted Permissions\n\nThe full workflow from checking for updates to installing them\nis enabled.\n\n\n#### This default permission set includes:\n\n- `allow-check`\n- `allow-download`\n- `allow-install`\n- `allow-download-and-install`",
+          "type": "string",
+          "const": "updater:default",
+          "markdownDescription": "This permission set configures which kind of\nupdater functions are exposed to the frontend.\n\n#### Granted Permissions\n\nThe full workflow from checking for updates to installing them\nis enabled.\n\n\n#### This default permission set includes:\n\n- `allow-check`\n- `allow-download`\n- `allow-install`\n- `allow-download-and-install`"
+        },
+        {
+          "description": "Enables the check command without any pre-configured scope.",
+          "type": "string",
+          "const": "updater:allow-check",
+          "markdownDescription": "Enables the check command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the download command without any pre-configured scope.",
+          "type": "string",
+          "const": "updater:allow-download",
+          "markdownDescription": "Enables the download command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the download_and_install command without any pre-configured scope.",
+          "type": "string",
+          "const": "updater:allow-download-and-install",
+          "markdownDescription": "Enables the download_and_install command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the install command without any pre-configured scope.",
+          "type": "string",
+          "const": "updater:allow-install",
+          "markdownDescription": "Enables the install command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the check command without any pre-configured scope.",
+          "type": "string",
+          "const": "updater:deny-check",
+          "markdownDescription": "Denies the check command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the download command without any pre-configured scope.",
+          "type": "string",
+          "const": "updater:deny-download",
+          "markdownDescription": "Denies the download command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the download_and_install command without any pre-configured scope.",
+          "type": "string",
+          "const": "updater:deny-download-and-install",
+          "markdownDescription": "Denies the download_and_install command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the install command without any pre-configured scope.",
+          "type": "string",
+          "const": "updater:deny-install",
+          "markdownDescription": "Denies the install 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",
@@ -967,7 +967,7 @@ pub fn create_engine() -> (AudioEngine, std::thread::JoinHandle<()>) {
        gapless_enabled: Arc::new(AtomicBool::new(false)),
        chained_info: Arc::new(Mutex::new(None)),
        samples_played: Arc::new(AtomicU64::new(0)),
-        current_sample_rate: Arc::new(AtomicU32::new(44100)),
+        current_sample_rate: Arc::new(AtomicU32::new(0)),
        current_channels: Arc::new(AtomicU32::new(2)),
        gapless_switch_at: Arc::new(AtomicU64::new(0)),
    };
@@ -1148,7 +1148,9 @@ pub async fn audio_play(
    let done_flag = Arc::new(AtomicBool::new(false));
    // Reset sample counter for the new track.
    state.samples_played.store(0, Ordering::Relaxed);
-    let target_rate = state.current_sample_rate.load(Ordering::Relaxed);
+    // Always 0 — no application-level resampling. Rodio handles conversion to
+    // the output device rate internally; we let every track play at its native rate.
+    let target_rate: u32 = 0;
    // Extract format hint from URL for better symphonia probing.
    let format_hint = url.rsplit('.').next()
        .and_then(|ext| ext.split('?').next())
@@ -1343,7 +1345,8 @@ pub async fn audio_chain_preload(
    // Use a dedicated counter for the chained source — it will be swapped into
    // samples_played when the chained track becomes active.
    let chain_counter = Arc::new(AtomicU64::new(0));
-    let target_rate = state.current_sample_rate.load(Ordering::Relaxed);
+    // Always 0 — no application-level resampling (same as audio_play).
+    let target_rate: u32 = 0;
    let format_hint = url.rsplit('.').next()
        .and_then(|ext| ext.split('?').next())
        .map(|s| s.to_lowercase());
@@ -1623,6 +1626,22 @@ pub fn audio_set_volume(volume: f32, state: State<'_, AudioEngine>) {
    }
 }

+#[tauri::command]
+pub fn audio_update_replay_gain(
+    volume: f32,
+    replay_gain_db: Option<f32>,
+    replay_gain_peak: Option<f32>,
+    state: State<'_, AudioEngine>,
+) {
+    let (gain_linear, effective) = compute_gain(replay_gain_db, replay_gain_peak, volume);
+    let mut cur = state.current.lock().unwrap();
+    cur.replay_gain_linear = gain_linear;
+    cur.base_volume = volume.clamp(0.0, 1.0);
+    if let Some(sink) = &cur.sink {
+        sink.set_volume(effective);
+    }
+}
+
 #[tauri::command]
 pub fn audio_set_eq(gains: [f32; 10], enabled: bool, state: State<'_, AudioEngine>) {
    state.eq_enabled.store(enabled, Ordering::Relaxed);
@@ -6,7 +6,11 @@ mod audio;
 use std::collections::HashMap;
 use std::sync::Mutex;

-use tauri::{Emitter, Manager};
+use tauri::{
+    menu::{MenuBuilder, MenuItemBuilder, PredefinedMenuItem},
+    tray::{MouseButton, MouseButtonState, TrayIconBuilder, TrayIconEvent},
+    Emitter, Manager,
+};

 /// Tracks which user-configured shortcuts are currently registered (shortcut_str → action).
 /// Prevents on_shortcut() accumulating duplicate handlers across JS reloads (HMR / StrictMode).
@@ -292,14 +296,84 @@ pub fn run() {
    tauri::Builder::default()
        .manage(audio_engine)
        .manage(ShortcutMap::default())
+        .plugin(tauri_plugin_updater::Builder::new().build())
+        .plugin(tauri_plugin_process::init())
        .plugin(tauri_plugin_window_state::Builder::default().build())
        .plugin(tauri_plugin_shell::init())
        .plugin(tauri_plugin_global_shortcut::Builder::new().build())
        .plugin(tauri_plugin_store::Builder::default().build())
        .plugin(tauri_plugin_dialog::init())
        .plugin(tauri_plugin_fs::init())
+        .plugin(tauri_plugin_single_instance::init(|app, _args, _cwd| {
+            let window = app.get_webview_window("main").expect("no main window");
+            let _ = window.show();
+            let _ = window.unminimize();
+            let _ = window.set_focus();
+        }))

        .setup(|app| {
+            // ── System tray ───────────────────────────────────────────────
+            {
+                let play_pause = MenuItemBuilder::with_id("play_pause", "Play / Pause").build(app)?;
+                let next       = MenuItemBuilder::with_id("next",       "Next Track").build(app)?;
+                let previous   = MenuItemBuilder::with_id("previous",   "Previous Track").build(app)?;
+                let sep1       = PredefinedMenuItem::separator(app)?;
+                let show_hide  = MenuItemBuilder::with_id("show_hide",  "Show / Hide").build(app)?;
+                let sep2       = PredefinedMenuItem::separator(app)?;
+                let quit       = MenuItemBuilder::with_id("quit",       "Exit Psysonic").build(app)?;
+
+                let menu = MenuBuilder::new(app)
+                    .item(&play_pause)
+                    .item(&previous)
+                    .item(&next)
+                    .item(&sep1)
+                    .item(&show_hide)
+                    .item(&sep2)
+                    .item(&quit)
+                    .build()?;
+
+                TrayIconBuilder::new()
+                    .icon(app.default_window_icon().unwrap().clone())
+                    .menu(&menu)
+                    .tooltip("Psysonic")
+                    .on_menu_event(|app, event| match event.id.as_ref() {
+                        "play_pause" => { let _ = app.emit("tray:play-pause", ()); }
+                        "next"       => { let _ = app.emit("tray:next", ()); }
+                        "previous"   => { let _ = app.emit("tray:previous", ()); }
+                        "show_hide"  => {
+                            if let Some(win) = app.get_webview_window("main") {
+                                if win.is_visible().unwrap_or(false) {
+                                    let _ = win.hide();
+                                } else {
+                                    let _ = win.show();
+                                    let _ = win.set_focus();
+                                }
+                            }
+                        }
+                        "quit" => { std::process::exit(0); }
+                        _ => {}
+                    })
+                    .on_tray_icon_event(|tray, event| {
+                        // Left-click: toggle window visibility
+                        if let TrayIconEvent::Click {
+                            button: MouseButton::Left,
+                            button_state: MouseButtonState::Up,
+                            ..
+                        } = event {
+                            let app = tray.app_handle();
+                            if let Some(win) = app.get_webview_window("main") {
+                                if win.is_visible().unwrap_or(false) {
+                                    let _ = win.hide();
+                                } else {
+                                    let _ = win.show();
+                                    let _ = win.set_focus();
+                                }
+                            }
+                        }
+                    })
+                    .build(app)?;
+            }
+
            // ── MPRIS2 / OS media controls via souvlaki ──────────────────
            {
                use souvlaki::{MediaControlEvent, MediaControls, PlatformConfig};
@@ -392,6 +466,15 @@ pub fn run() {

            Ok(())
        })
+        .on_window_event(|window, event| {
+            if let tauri::WindowEvent::CloseRequested { api, .. } = event {
+                if window.label() == "main" {
+                    // Let JS decide: minimize to tray or exit, based on user setting.
+                    api.prevent_close();
+                    let _ = window.emit("window:close-requested", ());
+                }
+            }
+        })
        .invoke_handler(tauri::generate_handler![
            greet,
            exit_app,
@@ -405,6 +488,7 @@ pub fn run() {
            audio::audio_stop,
            audio::audio_seek,
            audio::audio_set_volume,
+            audio::audio_update_replay_gain,
            audio::audio_set_eq,
            audio::audio_preload,
            audio::audio_set_crossfade,
@@ -1,7 +1,7 @@
 {
  "$schema": "https://schema.tauri.app/config/2",
  "productName": "Psysonic",
-  "version": "1.20.0",
+  "version": "1.27.2",
  "identifier": "dev.psysonic.player",
  "build": {
    "beforeDevCommand": "npm run dev",
@@ -29,12 +29,14 @@
    ],
    "security": {
      "csp": null
-    },
-    "trayIcon": {
-      "iconPath": "icons/icon.png",
-      "iconAsTemplate": false,
-      "title": "Psysonic",
-      "tooltip": "Psysonic"
+    }
+  },
+  "plugins": {
+    "updater": {
+      "pubkey": "RWTgsDNd9LqppH6DMq7ypolI0bsLCNsjOvif4mrHyr4UDidkUT69IY1K",
+      "endpoints": [
+        "https://github.com/Psychotoxical/psysonic/releases/latest/download/latest.json"
+      ]
    }
  },
  "bundle": {
@@ -25,10 +25,15 @@ import Statistics from './pages/Statistics';
 import Help from './pages/Help';
 import RandomAlbums from './pages/RandomAlbums';
 import SearchResults from './pages/SearchResults';
+import AdvancedSearch from './pages/AdvancedSearch';
+import Playlists from './pages/Playlists';
+import PlaylistDetail from './pages/PlaylistDetail';
 import NowPlayingPage from './pages/NowPlaying';
 import FullscreenPlayer from './components/FullscreenPlayer';
 import ContextMenu from './components/ContextMenu';
+import SongInfoModal from './components/SongInfoModal';
 import DownloadFolderModal from './components/DownloadFolderModal';
+import { DragDropProvider } from './contexts/DragDropContext';
 import TooltipPortal from './components/TooltipPortal';
 import ConnectionIndicator from './components/ConnectionIndicator';
 import LastfmIndicator from './components/LastfmIndicator';
@@ -38,6 +43,9 @@ import OfflineLibrary from './pages/OfflineLibrary';
 import Genres from './pages/Genres';
 import GenreDetail from './pages/GenreDetail';
 import ExportPickerModal from './components/ExportPickerModal';
+import ChangelogModal from './components/ChangelogModal';
+import AppUpdater from './components/AppUpdater';
+import { version } from '../package.json';
 import { useConnectionStatus } from './hooks/useConnectionStatus';
 import { useAuthStore } from './store/authStore';
 import { useOfflineStore } from './store/offlineStore';
@@ -111,6 +119,15 @@ function AppShell() {
    fn();
  }, [currentTrack, isPlaying]);

+  const [changelogModalOpen, setChangelogModalOpen] = useState(false);
+
+  useEffect(() => {
+    const { showChangelogOnUpdate, lastSeenChangelogVersion } = useAuthStore.getState();
+    if (showChangelogOnUpdate && lastSeenChangelogVersion !== version) {
+      setChangelogModalOpen(true);
+    }
+  }, []);
+
  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(() => {
    return localStorage.getItem('psysonic_sidebar_collapsed') === 'true';
  });
@@ -151,6 +168,33 @@ function AppShell() {
    };
  }, [isDraggingQueue, handleMouseMove, handleMouseUp]);

+  // ── Global DnD fix for Linux/WebKitGTK ──────────────────────────
+  // WebKitGTK (used by Tauri on Linux) requires the document itself to
+  // accept drags via preventDefault() on dragover/dragenter.  Without
+  // this, the webview shows a "forbidden" cursor for all in-app HTML5
+  // drag-and-drop because it never sees a valid drop target at the
+  // document level.  This is harmless on Windows/macOS where DnD already
+  // works correctly.
+  useEffect(() => {
+    const allow = (e: DragEvent) => {
+      e.preventDefault();
+      if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy';
+    };
+    // Prevent the webview from navigating when something (e.g. a file
+    // from the OS file manager) is dropped on the document body.
+    const blockDrop = (e: DragEvent) => { e.preventDefault(); };
+
+    document.addEventListener('dragover', allow);
+    document.addEventListener('dragenter', allow);
+    document.addEventListener('drop', blockDrop);
+
+    return () => {
+      document.removeEventListener('dragover', allow);
+      document.removeEventListener('dragenter', allow);
+      document.removeEventListener('drop', blockDrop);
+    };
+  }, []);
+
  return (
    <div 
      className="app-shell"
@@ -203,6 +247,7 @@ function AppShell() {
            <Route path="/random-mix" element={<RandomMix />} />
            <Route path="/label/:name" element={<LabelAlbums />} />
            <Route path="/search" element={<SearchResults />} />
+            <Route path="/search/advanced" element={<AdvancedSearch />} />
            <Route path="/statistics" element={<Statistics />} />
            <Route path="/now-playing" element={<NowPlayingPage />} />
            <Route path="/settings" element={<Settings />} />
@@ -210,6 +255,8 @@ function AppShell() {
            <Route path="/offline" element={<OfflineLibrary />} />
            <Route path="/genres" element={<Genres />} />
            <Route path="/genres/:name" element={<GenreDetail />} />
+            <Route path="/playlists" element={<Playlists />} />
+            <Route path="/playlists/:id" element={<PlaylistDetail />} />
          </Routes>
        </div>
      </main>
@@ -227,13 +274,16 @@ function AppShell() {
        <FullscreenPlayer onClose={toggleFullscreen} />
      )}
      <ContextMenu />
+      <SongInfoModal />
      <DownloadFolderModal />
      <TooltipPortal />
+      <AppUpdater />
+      {changelogModalOpen && <ChangelogModal onClose={() => setChangelogModalOpen(false)} />}
    </div>
  );
 }

-// Media key event handler
+// Media key + tray event handler
 function TauriEventBridge() {
  const togglePlay = usePlayerStore(s => s.togglePlay);
  const next = usePlayerStore(s => s.next);
@@ -292,9 +342,12 @@ function TauriEventBridge() {

    const setup = async () => {
      const handlers: Array<[string, () => void]> = [
-        ['media:play-pause', () => togglePlay()],
-        ['media:next',       () => next()],
-        ['media:prev',       () => previous()],
+        ['media:play-pause',  () => togglePlay()],
+        ['media:next',        () => next()],
+        ['media:prev',        () => previous()],
+        ['tray:play-pause',   () => togglePlay()],
+        ['tray:next',         () => next()],
+        ['tray:previous',     () => previous()],
        ['media:volume-up',   () => { const s = usePlayerStore.getState(); s.setVolume(Math.min(1, s.volume + 0.05)); }],
        ['media:volume-down', () => { const s = usePlayerStore.getState(); s.setVolume(Math.max(0, s.volume - 0.05)); }],
      ];
@@ -326,10 +379,14 @@ function TauriEventBridge() {
        unlisten.push(u);
      }

-      // Close → exit app
-      const win = getCurrentWindow();
-      const u = await win.onCloseRequested(async () => {
-        await invoke('exit_app');
+      // window:close-requested is emitted by Rust (prevent_close + emit).
+      // JS decides: minimize to tray or exit, based on user setting.
+      const u = await listen('window:close-requested', async () => {
+        if (useAuthStore.getState().minimizeToTray) {
+          await getCurrentWindow().hide();
+        } else {
+          await invoke('exit_app');
+        }
      });
      if (cancelled) { u(); return; }
      unlisten.push(u);
@@ -433,7 +490,9 @@ export default function App() {
          path="/*"
          element={
            <RequireAuth>
-              <AppShell />
+              <DragDropProvider>
+                <AppShell />
+              </DragDropProvider>
            </RequireAuth>
          }
        />
@@ -74,6 +74,7 @@ export interface SubsonicSong {
  contentType?: string;
  size?: number;
  samplingRate?: number;
+  bitDepth?: number;
  channelCount?: number;
  starred?: string;
  genre?: string;
@@ -96,6 +97,7 @@ export interface SubsonicPlaylist {
  changed: string;
  owner?: string;
  public?: boolean;
+  coverArt?: string;
 }

 export interface SubsonicNowPlaying extends SubsonicSong {
@@ -335,6 +337,7 @@ export function buildStreamUrl(id: string): string {
    u: server?.username ?? '',
    t: token, s: salt, v: '1.16.1', c: 'psysonic', f: 'json',
  });
+  
  return `${baseUrl}/rest/stream.view?${p.toString()}`;
 }

@@ -384,12 +387,18 @@ export async function getPlaylist(id: string): Promise<{ playlist: SubsonicPlayl
  return { playlist, songs: entry ?? [] };
 }

-export async function createPlaylist(name: string, songIds?: string[]): Promise<void> {
+export async function createPlaylist(name: string, songIds?: string[]): Promise<SubsonicPlaylist> {
  const params: Record<string, unknown> = { name };
  if (songIds && songIds.length > 0) {
    params.songId = songIds;
  }
-  await api('createPlaylist.view', params);
+  const data = await api<{ playlist: SubsonicPlaylist }>('createPlaylist.view', params);
+  return data.playlist;
+}
+
+export async function updatePlaylist(id: string, songIds: string[]): Promise<void> {
+  // createPlaylist with playlistId replaces the existing playlist's songs (Subsonic API 1.14+)
+  await api('createPlaylist.view', { playlistId: id, songId: songIds });
 }

 export async function deletePlaylist(id: string): Promise<void> {
@@ -7,6 +7,7 @@ import { useOfflineStore } from '../store/offlineStore';
 import { useAuthStore } from '../store/authStore';
 import CachedImage from './CachedImage';
 import { playAlbum } from '../utils/playAlbum';
+import { useDragDrop } from '../contexts/DragDropContext';

 interface AlbumCardProps {
  album: SubsonicAlbum;
@@ -22,6 +23,7 @@ function AlbumCard({ album }: AlbumCardProps) {
    return meta.trackIds.every(tid => !!s.tracks[`${serverId}:${tid}`]);
  });
  const coverUrl = album.coverArt ? buildCoverArtUrl(album.coverArt, 300) : '';
+  const psyDrag = useDragDrop();

  return (
    <div
@@ -35,14 +37,20 @@ function AlbumCard({ album }: AlbumCardProps) {
        e.preventDefault();
        openContextMenu(e.clientX, e.clientY, album, 'album');
      }}
-      draggable
-      onDragStart={e => {
-        e.dataTransfer.effectAllowed = 'copy';
-        e.dataTransfer.setData('text/plain', JSON.stringify({
-          type: 'album',
-          id: album.id,
-          name: album.name,
-        }));
+      onMouseDown={e => {
+        if (e.button !== 0) return;
+        e.preventDefault();
+        const sx = e.clientX, sy = e.clientY;
+        const onMove = (me: MouseEvent) => {
+          if (Math.abs(me.clientX - sx) > 5 || Math.abs(me.clientY - sy) > 5) {
+            document.removeEventListener('mousemove', onMove);
+            document.removeEventListener('mouseup', onUp);
+            psyDrag.startDrag({ data: JSON.stringify({ type: 'album', id: album.id, name: album.name }), label: album.name, coverUrl: coverUrl || undefined }, me.clientX, me.clientY);
+          }
+        };
+        const onUp = () => { document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseup', onUp); };
+        document.addEventListener('mousemove', onMove);
+        document.addEventListener('mouseup', onUp);
      }}
    >
      <div className="album-card-cover">
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Play, Star, ExternalLink, X, ChevronLeft, Download, ListPlus, HardDriveDownload, Loader2 } from 'lucide-react';
+import { Play, Heart, ExternalLink, X, ChevronLeft, Download, ListPlus, HardDriveDownload, Loader2 } from 'lucide-react';
 import { SubsonicSong, buildCoverArtUrl } from '../api/subsonic';
 import CachedImage from './CachedImage';
 import CoverLightbox from './CoverLightbox';
@@ -203,7 +203,7 @@ export default function AlbumHeader({
                  data-tooltip={isStarred ? t('albumDetail.favoriteRemove') : t('albumDetail.favoriteAdd')}
                  style={{ color: isStarred ? 'var(--color-star-active, var(--accent))' : 'inherit', border: isStarred ? '1px solid var(--color-star-active, var(--accent))' : undefined }}
                >
-                  <Star size={16} fill={isStarred ? 'currentColor' : 'none'} />
+                  <Heart size={16} fill={isStarred ? 'currentColor' : 'none'} />
                  {t('albumDetail.favorite')}
                </button>

@@ -1,8 +1,10 @@
-import React, { useState, useEffect } from 'react';
-import { Play, Star } from 'lucide-react';
+import React, { useState, useEffect, useMemo } from 'react';
+import { Play, Heart, ListPlus, X } from 'lucide-react';
 import { SubsonicSong } from '../api/subsonic';
-import { Track, usePlayerStore } from '../store/playerStore';
+import { Track, usePlayerStore, songToTrack } from '../store/playerStore';
 import { useTranslation } from 'react-i18next';
+import { useDragDrop } from '../contexts/DragDropContext';
+import { AddToPlaylistSubmenu } from './ContextMenu';

 function formatDuration(seconds: number): string {
  const m = Math.floor(seconds / 60);
@@ -69,9 +71,46 @@ export default function AlbumTrackList({
  const [hoveredSongId, setHoveredSongId] = useState<string | null>(null);
  const [contextMenuSongId, setContextMenuSongId] = useState<string | null>(null);
  const contextMenuOpen = usePlayerStore(s => s.contextMenu.isOpen);
+  const psyDrag = useDragDrop();
+
+  // ── Bulk select ───────────────────────────────────────────────────
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+  const [lastSelectedIdx, setLastSelectedIdx] = useState<number | null>(null);
+  const [showPlPicker, setShowPlPicker] = useState(false);
+
+  const toggleSelect = (id: string, globalIdx: number, shift: boolean) => {
+    setSelectedIds(prev => {
+      const next = new Set(prev);
+      if (shift && lastSelectedIdx !== null) {
+        const from = Math.min(lastSelectedIdx, globalIdx);
+        const to = Math.max(lastSelectedIdx, globalIdx);
+        songs.slice(from, to + 1).forEach(s => next.add(s.id));
+      } else {
+        next.has(id) ? next.delete(id) : next.add(id);
+      }
+      return next;
+    });
+    setLastSelectedIdx(globalIdx);
+  };
+
+  const allSelected = selectedIds.size === songs.length && songs.length > 0;
+  const toggleAll = () => setSelectedIds(allSelected ? new Set() : new Set(songs.map(s => s.id)));
+
  useEffect(() => {
    if (!contextMenuOpen) setContextMenuSongId(null);
  }, [contextMenuOpen]);
+
+  // Close playlist picker on outside click
+  useEffect(() => {
+    if (!showPlPicker) return;
+    const handler = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      if (!target.closest('.bulk-pl-picker-wrap')) setShowPlPicker(false);
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [showPlPicker]);
+
  const totalDuration = songs.reduce((acc, s) => acc + s.duration, 0);

  const discs = new Map<number, SubsonicSong[]>();
@@ -83,20 +122,51 @@ export default function AlbumTrackList({
  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,
-    starred: song.starred, genre: song.genre,
-  });
+  const inSelectMode = selectedIds.size > 0;

  return (
    <div className="tracklist">
-      <div className={`tracklist-header${hasVariousArtists ? ' tracklist-va' : ''}`}>
-        <div className="col-center">#</div>
+
+      {/* ── Bulk action bar ── */}
+      {inSelectMode && (
+        <div className="bulk-action-bar">
+          <span className="bulk-action-count">
+            {t('common.bulkSelected', { count: selectedIds.size })}
+          </span>
+          <div className="bulk-pl-picker-wrap">
+            <button
+              className="btn btn-surface btn-sm"
+              onClick={() => setShowPlPicker(v => !v)}
+            >
+              <ListPlus size={14} />
+              {t('common.bulkAddToPlaylist')}
+            </button>
+            {showPlPicker && (
+              <AddToPlaylistSubmenu
+                songIds={[...selectedIds]}
+                onDone={() => { setShowPlPicker(false); setSelectedIds(new Set()); }}
+                dropDown
+              />
+            )}
+          </div>
+          <button
+            className="btn btn-ghost btn-sm"
+            onClick={() => setSelectedIds(new Set())}
+          >
+            <X size={13} />
+            {t('common.bulkClear')}
+          </button>
+        </div>
+      )}
+
+      <div className={`tracklist-header${' tracklist-va'}`}>
+        <div className="col-center">
+          {inSelectMode
+            ? <span className={`bulk-check${allSelected ? ' checked' : ''}`} onClick={toggleAll} style={{ cursor: 'pointer' }} />
+            : '#'}
+        </div>
        <div>{t('albumDetail.trackTitle')}</div>
-        {hasVariousArtists && <div>{t('albumDetail.trackArtist')}</div>}
+        <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>
@@ -111,77 +181,103 @@ export default function AlbumTrackList({
              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' : ''}${contextMenuSongId === song.id ? ' context-active' : ''}`}
-              onMouseEnter={() => setHoveredSongId(song.id)}
-              onMouseLeave={() => setHoveredSongId(null)}
-              onDoubleClick={() => onPlaySong(song)}
-              onContextMenu={e => {
-                e.preventDefault();
-                setContextMenuSongId(song.id);
-                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) }));
-              }}
-            >
+          {discs.get(discNum)!.map((song) => {
+            const globalIdx = songs.indexOf(song);
+            return (
              <div
-                className="track-num"
-                style={{
-                  cursor: hoveredSongId === song.id ? 'pointer' : 'default',
-                  color: (hoveredSongId === song.id || currentTrack?.id === song.id) ? 'var(--accent)' : undefined,
+                key={song.id}
+                className={`track-row track-row-va${currentTrack?.id === song.id ? ' active' : ''}${contextMenuSongId === song.id ? ' context-active' : ''}${selectedIds.has(song.id) ? ' bulk-selected' : ''}`}
+                onMouseEnter={() => setHoveredSongId(song.id)}
+                onMouseLeave={() => setHoveredSongId(null)}
+                onDoubleClick={() => onPlaySong(song)}
+                onClick={e => {
+                  if (inSelectMode && !(e.target as HTMLElement).closest('button, input')) {
+                    toggleSelect(song.id, globalIdx, e.shiftKey);
+                  }
+                }}
+                onContextMenu={e => {
+                  e.preventDefault();
+                  setContextMenuSongId(song.id);
+                  onContextMenu(e.clientX, e.clientY, songToTrack(song), 'album-song');
+                }}
+                role="row"
+                onMouseDown={e => {
+                  if (e.button !== 0) return;
+                  e.preventDefault();
+                  const sx = e.clientX, sy = e.clientY;
+                  const onMove = (me: MouseEvent) => {
+                    if (Math.abs(me.clientX - sx) > 5 || Math.abs(me.clientY - sy) > 5) {
+                      document.removeEventListener('mousemove', onMove);
+                      document.removeEventListener('mouseup', onUp);
+                      psyDrag.startDrag({ data: JSON.stringify({ type: 'song', track: songToTrack(song) }), label: song.title }, me.clientX, me.clientY);
+                    }
+                  };
+                  const onUp = () => { document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseup', onUp); };
+                  document.addEventListener('mousemove', onMove);
+                  document.addEventListener('mouseup', onUp);
                }}
-                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
+                <div
+                  className="track-num"
+                  style={{ cursor: 'pointer' }}
+                  onClick={e => {
+                    e.stopPropagation();
+                    if (inSelectMode || hoveredSongId === song.id) {
+                      toggleSelect(song.id, globalIdx, e.shiftKey);
+                    } else {
+                      onPlaySong(song);
+                    }
+                  }}
+                >
+                  <span
+                    className={`bulk-check${selectedIds.has(song.id) ? ' checked' : ''}${(inSelectMode || hoveredSongId === song.id) ? ' bulk-check-visible' : ''}`}
+                    onClick={e => { e.stopPropagation(); toggleSelect(song.id, globalIdx, e.shiftKey); }}
+                  />
+                  <span style={{ color: (hoveredSongId === song.id || currentTrack?.id === song.id) ? 'var(--accent)' : 'var(--text-muted)' }}>
+                    {hoveredSongId === song.id && currentTrack?.id !== song.id && !inSelectMode
                      ? <Play size={13} fill="currentColor" />
-                      : (song.track ?? i + 1)}
-              </div>
-              <div className="track-info">
-                <span className="track-title">{song.title}</span>
-              </div>
-              {hasVariousArtists && (
+                      : 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 ?? globalIdx + 1)}
+                  </span>
+                </div>
+                <div className="track-info">
+                  <span className="track-title">{song.title}</span>
+                </div>
                <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(--color-star-active, var(--accent))' : 'var(--color-star-inactive, var(--text-muted))' }}
-                >
-                  <Star size={14} fill={starredSongs.has(song.id) ? 'currentColor' : 'none'} />
-                </button>
+                <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(--color-star-active, var(--accent))' : 'var(--color-star-inactive, var(--text-muted))' }}
+                  >
+                    <Heart 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>
-              <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' : ''}`}>
+      <div className={`tracklist-total${' tracklist-va'}`}>
        <span className="tracklist-total-label">{t('albumDetail.trackTotal')}</span>
        <span className="tracklist-total-value">{formatDuration(totalDuration)}</span>
      </div>
@@ -0,0 +1,140 @@
+import React, { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { check, Update, DownloadEvent } from '@tauri-apps/plugin-updater';
+import { relaunch } from '@tauri-apps/plugin-process';
+import { open } from '@tauri-apps/plugin-shell';
+import { RefreshCw, Download, X } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { version as currentVersion } from '../../package.json';
+
+// Semver comparison: returns true if `a` is newer than `b`
+function isNewer(a: string, b: string): boolean {
+  const pa = a.replace(/^[^0-9]*/, '').split('.').map(Number);
+  const pb = b.replace(/^[^0-9]*/, '').split('.').map(Number);
+  for (let i = 0; i < 3; i++) {
+    if ((pa[i] ?? 0) > (pb[i] ?? 0)) return true;
+    if ((pa[i] ?? 0) < (pb[i] ?? 0)) return false;
+  }
+  return false;
+}
+
+type State =
+  | { phase: 'idle' }
+  | { phase: 'available'; version: string; update: Update | null }
+  | { phase: 'downloading'; pct: number }
+  | { phase: 'installing' }
+  | { phase: 'done' };
+
+export default function AppUpdater() {
+  const { t } = useTranslation();
+  const [state, setState] = useState<State>({ phase: 'idle' });
+  const [dismissed, setDismissed] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    const timer = setTimeout(async () => {
+      if (cancelled) return;
+      try {
+        // Try Tauri native updater first (macOS + Windows)
+        const update = await check();
+        if (cancelled) return;
+        if (update) {
+          setState({ phase: 'available', version: update.version, update });
+          return;
+        }
+      } catch {
+        // Tauri updater unavailable or network error — fall through to GitHub check
+      }
+      // Fallback: GitHub API check (Linux / offline Tauri updater)
+      try {
+        const res = await fetch('https://api.github.com/repos/Psychotoxical/psysonic/releases/latest');
+        if (!res.ok || cancelled) return;
+        const data = await res.json();
+        const tag: string = data.tag_name ?? '';
+        if (!cancelled && tag && isNewer(tag, currentVersion)) {
+          setState({ phase: 'available', version: tag.replace(/^[^0-9]*/, ''), update: null });
+        }
+      } catch {
+        // No update check possible — stay idle
+      }
+    }, 3000);
+    return () => { cancelled = true; clearTimeout(timer); };
+  }, []);
+
+  if (dismissed || state.phase === 'idle' || state.phase === 'done') return null;
+
+  const handleInstall = async () => {
+    if (state.phase !== 'available' || !state.update) return;
+    const update = state.update;
+    const savedVersion = state.version;
+    let total = 0;
+    let downloaded = 0;
+    setState({ phase: 'downloading', pct: 0 });
+    try {
+      await update.downloadAndInstall((event: DownloadEvent) => {
+        if (event.event === 'Started') {
+          total = event.data.contentLength ?? 0;
+        } else if (event.event === 'Progress') {
+          downloaded += event.data.chunkLength;
+          setState({ phase: 'downloading', pct: total ? Math.round((downloaded / total) * 100) : 0 });
+        } else if (event.event === 'Finished') {
+          setState({ phase: 'installing' });
+        }
+      });
+      await relaunch();
+    } catch (e) {
+      console.error('Update failed', e);
+      setState({ phase: 'available', version: savedVersion, update });
+    }
+  };
+
+  const handleDownload = () => {
+    open('https://github.com/Psychotoxical/psysonic/releases/latest');
+  };
+
+  const version = state.phase === 'available' ? state.version : '';
+  const canInstall = state.phase === 'available' && state.update !== null;
+  const isLinuxFallback = state.phase === 'available' && state.update === null;
+
+  return createPortal(
+    <div className="app-updater-toast">
+      <div className="app-updater-header">
+        <RefreshCw size={13} />
+        <span className="app-updater-label">{t('common.updaterAvailable')}</span>
+        <button className="app-updater-dismiss" onClick={() => setDismissed(true)} aria-label="Dismiss">
+          <X size={12} />
+        </button>
+      </div>
+      <div className="app-updater-version">{t('common.updaterVersion', { version })}</div>
+
+      {state.phase === 'downloading' && (
+        <div className="app-updater-progress-wrap">
+          <div className="app-updater-progress-bar">
+            <div className="app-updater-progress-fill" style={{ width: `${state.pct}%` }} />
+          </div>
+          <span className="app-updater-pct">{state.pct}%</span>
+        </div>
+      )}
+
+      {state.phase === 'installing' && (
+        <div className="app-updater-status">{t('common.updaterInstalling')}</div>
+      )}
+
+      {state.phase === 'available' && (
+        <div className="app-updater-actions">
+          {canInstall && (
+            <button className="app-updater-btn-primary" onClick={handleInstall}>
+              <Download size={12} /> {t('common.updaterInstall')}
+            </button>
+          )}
+          {isLinuxFallback && (
+            <button className="app-updater-btn-primary" onClick={handleDownload}>
+              <Download size={12} /> {t('common.updaterDownload')}
+            </button>
+          )}
+        </div>
+      )}
+    </div>,
+    document.body
+  );
+}
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { SubsonicArtist, buildCoverArtUrl, coverArtCacheKey } from '../api/subsonic';
 import { useNavigate } from 'react-router-dom';
 import { Users } from 'lucide-react';
@@ -11,14 +11,18 @@ interface Props {
 export default function ArtistCardLocal({ artist }: Props) {
  const navigate = useNavigate();
  const coverId = artist.coverArt || artist.id;
+  // buildCoverArtUrl generates a new crypto salt on every call — must be
+  // memoized to prevent a new URL on every parent re-render causing refetch loops.
+  const coverSrc = useMemo(() => buildCoverArtUrl(coverId, 300), [coverId]);
+  const coverCacheKey = useMemo(() => coverArtCacheKey(coverId, 300), [coverId]);

  return (
    <div className="artist-card" onClick={() => navigate(`/artist/${artist.id}`)}>
      <div className="artist-card-avatar">
        {coverId ? (
          <CachedImage
-            src={buildCoverArtUrl(coverId, 300)}
-            cacheKey={coverArtCacheKey(coverId, 300)}
+            src={coverSrc}
+            cacheKey={coverCacheKey}
            alt={artist.name}
            loading="lazy"
            onError={(e) => {
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { getCachedUrl } from '../utils/imageCache';

 interface CachedImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
@@ -6,31 +6,38 @@ interface CachedImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
  cacheKey: string;
 }

-export function useCachedUrl(fetchUrl: string, cacheKey: string): string {
+/**
+ * @param fallbackToFetch  If true (default), returns the raw fetchUrl while the
+ *   blob is still resolving — useful for <img> tags so the browser starts
+ *   loading immediately.  Pass false for CSS background-image consumers that
+ *   should only see a stable blob URL (prevents a double crossfade).
+ */
+export function useCachedUrl(fetchUrl: string, cacheKey: string, fallbackToFetch = true): string {
  const [resolved, setResolved] = useState('');
  useEffect(() => {
    if (!fetchUrl) { setResolved(''); return; }
    let cancelled = false;
+    setResolved('');
    getCachedUrl(fetchUrl, cacheKey).then(url => { if (!cancelled) setResolved(url); });
    return () => { cancelled = true; };
  }, [fetchUrl, cacheKey]);
-  return resolved || fetchUrl;
+  return fallbackToFetch ? (resolved || fetchUrl) : resolved;
 }

 export default function CachedImage({ src, cacheKey, style, onLoad, ...props }: CachedImageProps) {
  const resolvedSrc = useCachedUrl(src, cacheKey);
  const [loaded, setLoaded] = useState(false);
-  const prevSrc = useRef('');

-  if (resolvedSrc !== prevSrc.current) {
-    prevSrc.current = resolvedSrc;
+  // Reset only when the logical image changes (cacheKey), not on fetchUrl→blobUrl
+  // URL upgrades within the same image — avoids the end-of-load flash.
+  useEffect(() => {
    setLoaded(false);
-  }
+  }, [cacheKey]);

  return (
    <img
      src={resolvedSrc}
-      style={{ ...style, opacity: loaded ? 1 : 0, transition: loaded ? 'opacity 0.15s ease' : 'none' }}
+      style={{ ...style, opacity: loaded ? 1 : 0, transition: 'opacity 0.15s ease' }}
      onLoad={e => { setLoaded(true); onLoad?.(e); }}
      {...props}
    />
@@ -0,0 +1,105 @@
+import React, { useMemo, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { useTranslation } from 'react-i18next';
+import { Sparkles } from 'lucide-react';
+import { version } from '../../package.json';
+import changelogRaw from '../../CHANGELOG.md?raw';
+import { useAuthStore } from '../store/authStore';
+
+function renderInline(text: string): React.ReactNode[] {
+  const parts = text.split(/(\*\*[^*]+\*\*|\*[^*]+\*|`[^`]+`)/g);
+  return parts.map((part, i) => {
+    if (part.startsWith('**') && part.endsWith('**'))
+      return <strong key={i}>{part.slice(2, -2)}</strong>;
+    if (part.startsWith('*') && part.endsWith('*'))
+      return <em key={i}>{part.slice(1, -1)}</em>;
+    if (part.startsWith('`') && part.endsWith('`'))
+      return <code key={i} className="changelog-code">{part.slice(1, -1)}</code>;
+    return part;
+  });
+}
+
+interface Props {
+  onClose: () => void;
+}
+
+export default function ChangelogModal({ onClose }: Props) {
+  const { t } = useTranslation();
+  const [dontShow, setDontShow] = useState(false);
+  const setShowChangelogOnUpdate = useAuthStore(s => s.setShowChangelogOnUpdate);
+  const setLastSeenChangelogVersion = useAuthStore(s => s.setLastSeenChangelogVersion);
+
+  const currentVersionData = useMemo(() => {
+    const blocks = changelogRaw.split(/\n(?=## \[)/).filter((b: string) => b.startsWith('## ['));
+    const block = blocks.find((b: string) => b.startsWith(`## [${version}]`));
+    if (!block) return null;
+    const lines = block.split('\n');
+    const match = lines[0].match(/## \[([^\]]+)\](?:\s*-\s*(.+))?/);
+    const body = lines.slice(1).join('\n').trim();
+    return { version: match?.[1] ?? version, date: match?.[2] ?? '', body };
+  }, []);
+
+  const handleClose = () => {
+    if (dontShow) setShowChangelogOnUpdate(false);
+    setLastSeenChangelogVersion(version);
+    onClose();
+  };
+
+  if (!currentVersionData) return null;
+
+  return createPortal(
+    <>
+      <div className="eq-popup-backdrop" onClick={handleClose} style={{ zIndex: 300 }} />
+      <div
+        className="eq-popup"
+        style={{ zIndex: 301, width: 'min(580px, 92vw)', gap: 0, maxHeight: '85vh', display: 'flex', flexDirection: 'column' }}
+      >
+        <div className="eq-popup-header" style={{ flexShrink: 0 }}>
+          <span className="eq-popup-title" style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+            <Sparkles size={16} style={{ color: 'var(--accent)' }} />
+            {t('changelog.modalTitle')} — v{version}
+          </span>
+          {currentVersionData.date && (
+            <span style={{ fontSize: 12, color: 'var(--text-muted)', marginLeft: 'auto' }}>
+              {currentVersionData.date}
+            </span>
+          )}
+        </div>
+
+        <div style={{ overflowY: 'auto', padding: '12px 20px', flex: 1 }}>
+          {currentVersionData.body.split('\n').map((line, i) => {
+            if (line.startsWith('### '))
+              return <div key={i} className="changelog-h3">{renderInline(line.slice(4))}</div>;
+            if (line.startsWith('#### '))
+              return <div key={i} className="changelog-h4">{renderInline(line.slice(5))}</div>;
+            if (line.startsWith('- '))
+              return <div key={i} className="changelog-item">{renderInline(line.slice(2))}</div>;
+            if (line.trim() === '') return null;
+            return <div key={i} className="changelog-text">{renderInline(line)}</div>;
+          })}
+        </div>
+
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            padding: '12px 20px',
+            borderTop: '1px solid var(--border-subtle)',
+            flexShrink: 0,
+            gap: '1rem',
+          }}
+        >
+          <label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: 13, color: 'var(--text-secondary)', cursor: 'pointer', userSelect: 'none' }}>
+            <input type="checkbox" checked={dontShow} onChange={e => setDontShow(e.target.checked)} />
+            {t('changelog.dontShowAgain')}
+          </label>
+          <button className="btn btn-primary" onClick={handleClose}>
+            {t('changelog.close')}
+          </button>
+        </div>
+      </div>
+    </>,
+    document.body
+  );
+}
@@ -1,11 +1,13 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { Play, ListPlus, Radio, Star, Download, ChevronRight, User, Disc3, Heart } from 'lucide-react';
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { Play, ListPlus, Radio, Heart, Download, ChevronRight, User, Disc3, ListMusic, Plus, Info } from 'lucide-react';
+import LastfmIcon from './LastfmIcon';
 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 { usePlayerStore, Track, songToTrack } from '../store/playerStore';
+import { SubsonicAlbum, SubsonicArtist, star, unstar, getSimilarSongs2, getTopSongs, buildDownloadUrl, getAlbum, getPlaylists, getPlaylist, createPlaylist, updatePlaylist, SubsonicPlaylist } from '../api/subsonic';
 import { useNavigate } from 'react-router-dom';
 import { useAuthStore } from '../store/authStore';
 import { useDownloadModalStore } from '../store/downloadModalStore';
+import { usePlaylistStore } from '../store/playlistStore';
 import { open } from '@tauri-apps/plugin-shell';
 import { writeFile } from '@tauri-apps/plugin-fs';
 import { join } from '@tauri-apps/api/path';
@@ -19,9 +21,149 @@ function sanitizeFilename(name: string): string {
    .substring(0, 200) || 'download';
 }

+// ── Add-to-Playlist submenu ───────────────────────────────────────
+export function AddToPlaylistSubmenu({ songIds, onDone, dropDown }: { songIds: string[]; onDone: () => void; dropDown?: boolean }) {
+  const { t } = useTranslation();
+  const subRef = useRef<HTMLDivElement>(null);
+  const newNameRef = useRef<HTMLInputElement>(null);
+  const [playlists, setPlaylists] = useState<SubsonicPlaylist[]>([]);
+  const [adding, setAdding] = useState<string | null>(null);
+  const [creating, setCreating] = useState(false);
+  const [newName, setNewName] = useState('');
+  const [flipLeft, setFlipLeft] = useState(false);
+  const touchPlaylist = usePlaylistStore((s) => s.touchPlaylist);
+  const recentIds = usePlaylistStore((s) => s.recentIds);
+
+  useEffect(() => {
+    getPlaylists().then((all) => {
+      const sorted = [...all].sort((a, b) => {
+        const ai = recentIds.indexOf(a.id);
+        const bi = recentIds.indexOf(b.id);
+        if (ai === -1 && bi === -1) return a.name.localeCompare(b.name);
+        if (ai === -1) return 1;
+        if (bi === -1) return -1;
+        return ai - bi;
+      });
+      setPlaylists(sorted);
+    }).catch(() => {});
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Flip submenu left if it would overflow the right edge of the viewport
+  useLayoutEffect(() => {
+    if (subRef.current) {
+      const rect = subRef.current.getBoundingClientRect();
+      if (rect.right > window.innerWidth - 8) setFlipLeft(true);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (creating) newNameRef.current?.focus();
+  }, [creating]);
+
+  const handleAdd = async (pl: SubsonicPlaylist) => {
+    setAdding(pl.id);
+    try {
+      const { songs } = await getPlaylist(pl.id);
+      const existingIds = new Set(songs.map((s) => s.id));
+      const newIds = songIds.filter((id) => !existingIds.has(id));
+      if (newIds.length > 0) {
+        await updatePlaylist(pl.id, [...songs.map((s) => s.id), ...newIds]);
+      }
+      touchPlaylist(pl.id);
+    } catch {}
+    setAdding(null);
+    onDone();
+  };
+
+  const handleCreate = async () => {
+    const name = newName.trim() || t('playlists.unnamed');
+    try {
+      const pl = await createPlaylist(name, songIds);
+      if (pl?.id) touchPlaylist(pl.id);
+    } catch {}
+    onDone();
+  };
+
+  const subStyle: React.CSSProperties = dropDown
+    ? { top: 'calc(100% + 4px)', left: 0, right: 'auto' }
+    : flipLeft
+      ? { right: 'calc(100% + 4px)', left: 'auto' }
+      : { left: 'calc(100% + 4px)', right: 'auto' };
+
+  return (
+    <div className="context-submenu" ref={subRef} style={subStyle}>
+      {/* New Playlist row */}
+      {!creating ? (
+        <div
+          className="context-menu-item context-submenu-new"
+          onClick={e => { e.stopPropagation(); setCreating(true); }}
+        >
+          <Plus size={13} /> {t('playlists.newPlaylist')}
+        </div>
+      ) : (
+        <div className="context-submenu-create" onClick={e => e.stopPropagation()}>
+          <input
+            ref={newNameRef}
+            className="context-submenu-input"
+            placeholder={t('playlists.createName')}
+            value={newName}
+            onChange={e => setNewName(e.target.value)}
+            onKeyDown={e => {
+              if (e.key === 'Enter') handleCreate();
+              if (e.key === 'Escape') { setCreating(false); setNewName(''); }
+            }}
+          />
+          <button className="context-submenu-create-btn" onClick={handleCreate}>
+            <Plus size={13} />
+          </button>
+        </div>
+      )}
+
+      <div className="context-menu-divider" />
+
+      {playlists.length === 0 && (
+        <div className="context-submenu-empty">{t('playlists.empty')}</div>
+      )}
+      {playlists.map((pl) => (
+        <div
+          key={pl.id}
+          className="context-menu-item"
+          onClick={() => handleAdd(pl)}
+          style={{ opacity: adding === pl.id ? 0.5 : 1, pointerEvents: adding ? 'none' : undefined }}
+        >
+          <ListMusic size={13} />
+          <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{pl.name}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// Same as AddToPlaylistSubmenu but resolves album songs first
+function AlbumToPlaylistSubmenu({ albumId, onDone }: { albumId: string; onDone: () => void }) {
+  const [resolvedIds, setResolvedIds] = useState<string[] | null>(null);
+
+  useEffect(() => {
+    getAlbum(albumId).then((data) => {
+      setResolvedIds(data.songs.map((s) => s.id));
+    }).catch(() => setResolvedIds([]));
+  }, [albumId]);
+
+  if (resolvedIds === null) {
+    return (
+      <div className="context-submenu" style={{ display: 'flex', justifyContent: 'center', padding: '0.75rem' }}>
+        <div className="spinner" style={{ width: 16, height: 16 }} />
+      </div>
+    );
+  }
+  if (resolvedIds.length === 0) return null;
+  return <AddToPlaylistSubmenu songIds={resolvedIds} onDone={onDone} />;
+}
+
 export default function ContextMenu() {
  const { t } = useTranslation();
-  const { contextMenu, closeContextMenu, playTrack, enqueue, queue, currentTrack, removeTrack, lastfmLovedCache, setLastfmLovedForSong, starredOverrides, setStarredOverride } = usePlayerStore();
+  const { contextMenu, closeContextMenu, playTrack, enqueue, queue, currentTrack, removeTrack, lastfmLovedCache, setLastfmLovedForSong, starredOverrides, setStarredOverride, openSongInfo } = usePlayerStore();
  const auth = useAuthStore();
  const requestDownloadFolder = useDownloadModalStore(s => s.requestFolder);
  const navigate = useNavigate();
@@ -29,10 +171,14 @@ export default function ContextMenu() {

  // Adjusted coordinates to keep menu on screen
  const [coords, setCoords] = useState({ x: 0, y: 0 });
+  const [playlistSubmenuOpen, setPlaylistSubmenuOpen] = useState(false);
+  const [playlistSongIds, setPlaylistSongIds] = useState<string[]>([]);

  useEffect(() => {
    if (contextMenu.isOpen) {
      setCoords({ x: contextMenu.x, y: contextMenu.y });
+      setPlaylistSubmenuOpen(false);
+      setPlaylistSongIds([]);
    }
  }, [contextMenu.isOpen, contextMenu.x, contextMenu.y]);

@@ -64,15 +210,11 @@ export default function ContextMenu() {
  const startRadio = async (artistId: string, artistName: string) => {
    try {
      const similar = await getSimilarSongs2(artistId);
-      if (similar.length > 0) {
-        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, artistId: s.artistId, duration: s.duration, coverArt: s.coverArt, track: s.track,
-          year: s.year, bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating, genre: s.genre,
-        }));
-        playTrack(radioTracks[0], radioTracks);
-      }
+       if (similar.length > 0) {
+         const top = await getTopSongs(artistName);
+         const radioTracks = [...top, ...similar].map(songToTrack);
+         playTrack(radioTracks[0], radioTracks);
+       }
    } catch (e) {
      console.error('Failed to start radio', e);
    }
@@ -129,16 +271,23 @@ export default function ContextMenu() {
              <div className="context-menu-item" onClick={() => handleAction(() => enqueue([song]))}>
                <ListPlus size={14} /> {t('contextMenu.addToQueue')}
              </div>
-              {type === 'album-song' && (
-                <div className="context-menu-item" onClick={() => handleAction(async () => {
-                  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, artistId: s.artistId, duration: s.duration, coverArt: s.coverArt, track: s.track,
-                    year: s.year, bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating, genre: s.genre,
-                  }));
-                  enqueue(tracks);
-                })}>
+              <div
+                className={`context-menu-item context-menu-item--submenu ${playlistSubmenuOpen && playlistSongIds[0] === song.id ? 'active' : ''}`}
+                onMouseEnter={() => { setPlaylistSongIds([song.id]); setPlaylistSubmenuOpen(true); }}
+                onMouseLeave={() => setPlaylistSubmenuOpen(false)}
+              >
+                <ListMusic size={14} /> {t('contextMenu.addToPlaylist')}
+                <ChevronRight size={13} style={{ marginLeft: 'auto' }} />
+                {playlistSubmenuOpen && playlistSongIds[0] === song.id && (
+                  <AddToPlaylistSubmenu songIds={[song.id]} onDone={() => { setPlaylistSubmenuOpen(false); closeContextMenu(); }} />
+                )}
+              </div>
+             {type === 'album-song' && (
+                 <div className="context-menu-item" onClick={() => handleAction(async () => {
+                   const albumData = await getAlbum(song.albumId);
+                   const tracks = albumData.songs.map(songToTrack);
+                   enqueue(tracks);
+                 })}>
                  <ListPlus size={14} /> {t('contextMenu.enqueueAlbum')}
                </div>
              )}
@@ -148,7 +297,7 @@ export default function ContextMenu() {
                  <Disc3 size={14} /> {t('contextMenu.openAlbum')}
                </div>
              )}
-              <div className="context-menu-item" onClick={() => handleAction(() => startRadio(song.artist, song.artist))}>
+              <div className="context-menu-item" onClick={() => handleAction(() => startRadio(song.artistId ?? song.artist, song.artist))}>
                <Radio size={14} /> {t('contextMenu.startRadio')}
              </div>
              <div className="context-menu-item" onClick={() => handleAction(() => {
@@ -156,7 +305,7 @@ export default function ContextMenu() {
                setStarredOverride(song.id, !starred);
                return starred ? unstar(song.id, 'song') : star(song.id, 'song');
              })}>
-                <Star size={14} fill={isStarred(song.id, song.starred) ? 'currentColor' : 'none'} />
+                <Heart size={14} fill={isStarred(song.id, song.starred) ? 'currentColor' : 'none'} />
                {isStarred(song.id, song.starred) ? t('contextMenu.unfavorite') : t('contextMenu.favorite')}
              </div>
              {auth.lastfmSessionKey && (() => {
@@ -169,11 +318,15 @@ export default function ContextMenu() {
                    if (newLoved) lastfmLoveTrack(song, auth.lastfmSessionKey);
                    else lastfmUnloveTrack(song, auth.lastfmSessionKey);
                  })}>
-                    <Heart size={14} fill={loved ? 'currentColor' : 'none'} style={{ color: loved ? '#e31c23' : undefined }} />
+                    <LastfmIcon size={14} />
                    {loved ? t('contextMenu.lfmUnlove') : t('contextMenu.lfmLove')}
                  </div>
                );
              })()}
+              <div className="context-menu-divider" />
+              <div className="context-menu-item" onClick={() => handleAction(() => openSongInfo(song.id))}>
+                <Info size={14} /> {t('contextMenu.songInfo')}
+              </div>
            </>
          );
        })()}
@@ -194,12 +347,23 @@ export default function ContextMenu() {
                setStarredOverride(album.id, !starred);
                return starred ? unstar(album.id, 'album') : star(album.id, 'album');
              })}>
-                <Star size={14} fill={isStarred(album.id, album.starred) ? 'currentColor' : 'none'} />
+                <Heart size={14} fill={isStarred(album.id, album.starred) ? 'currentColor' : 'none'} />
                {isStarred(album.id, album.starred) ? t('contextMenu.unfavoriteAlbum') : t('contextMenu.favoriteAlbum')}
              </div>
              <div className="context-menu-item" onClick={() => handleAction(() => downloadAlbum(album.name, album.id))}>
                <Download size={14} /> {t('contextMenu.download')}
              </div>
+              <div
+                className={`context-menu-item context-menu-item--submenu ${playlistSubmenuOpen && playlistSongIds[0] === `album:${album.id}` ? 'active' : ''}`}
+                onMouseEnter={() => { setPlaylistSongIds([`album:${album.id}`]); setPlaylistSubmenuOpen(true); }}
+                onMouseLeave={() => setPlaylistSubmenuOpen(false)}
+              >
+                <ListMusic size={14} /> {t('contextMenu.addToPlaylist')}
+                <ChevronRight size={13} style={{ marginLeft: 'auto' }} />
+                {playlistSubmenuOpen && playlistSongIds[0] === `album:${album.id}` && (
+                  <AlbumToPlaylistSubmenu albumId={album.id} onDone={() => { setPlaylistSubmenuOpen(false); closeContextMenu(); }} />
+                )}
+              </div>
            </>
          );
        })()}
@@ -217,7 +381,7 @@ export default function ContextMenu() {
                setStarredOverride(artist.id, !starred);
                return starred ? unstar(artist.id, 'artist') : star(artist.id, 'artist');
              })}>
-                <Star size={14} fill={isStarred(artist.id, artist.starred) ? 'currentColor' : 'none'} />
+                <Heart size={14} fill={isStarred(artist.id, artist.starred) ? 'currentColor' : 'none'} />
                {isStarred(artist.id, artist.starred) ? t('contextMenu.unfavoriteArtist') : t('contextMenu.favoriteArtist')}
              </div>
            </>
@@ -236,6 +400,17 @@ export default function ContextMenu() {
              })}>
                {t('contextMenu.removeFromQueue')}
              </div>
+              <div
+                className={`context-menu-item context-menu-item--submenu ${playlistSubmenuOpen && playlistSongIds[0] === song.id ? 'active' : ''}`}
+                onMouseEnter={() => { setPlaylistSongIds([song.id]); setPlaylistSubmenuOpen(true); }}
+                onMouseLeave={() => setPlaylistSubmenuOpen(false)}
+              >
+                <ListMusic size={14} /> {t('contextMenu.addToPlaylist')}
+                <ChevronRight size={13} style={{ marginLeft: 'auto' }} />
+                {playlistSubmenuOpen && playlistSongIds[0] === song.id && (
+                  <AddToPlaylistSubmenu songIds={[song.id]} onDone={() => { setPlaylistSubmenuOpen(false); closeContextMenu(); }} />
+                )}
+              </div>
              <div className="context-menu-divider" />
              {song.albumId && (
                <div className="context-menu-item" onClick={() => handleAction(() => navigate(`/album/${song.albumId}`))}>
@@ -247,7 +422,7 @@ export default function ContextMenu() {
                setStarredOverride(song.id, !starred);
                return starred ? unstar(song.id, 'song') : star(song.id, 'song');
              })}>
-                <Star size={14} fill={isStarred(song.id, song.starred) ? 'currentColor' : 'none'} />
+                <Heart size={14} fill={isStarred(song.id, song.starred) ? 'currentColor' : 'none'} />
                {isStarred(song.id, song.starred) ? t('contextMenu.unfavorite') : t('contextMenu.favorite')}
              </div>
              {auth.lastfmSessionKey && (() => {
@@ -260,14 +435,18 @@ export default function ContextMenu() {
                    if (newLoved) lastfmLoveTrack(song, auth.lastfmSessionKey);
                    else lastfmUnloveTrack(song, auth.lastfmSessionKey);
                  })}>
-                    <Heart size={14} fill={loved ? 'currentColor' : 'none'} style={{ color: loved ? '#e31c23' : undefined }} />
+                    <LastfmIcon size={14} />
                    {loved ? t('contextMenu.lfmUnlove') : t('contextMenu.lfmLove')}
                  </div>
                );
              })()}
-              <div className="context-menu-item" onClick={() => handleAction(() => startRadio(song.artist, song.artist))}>
+              <div className="context-menu-item" onClick={() => handleAction(() => startRadio(song.artistId ?? song.artist, song.artist))}>
                <Radio size={14} /> {t('contextMenu.startRadio')}
              </div>
+              <div className="context-menu-divider" />
+              <div className="context-menu-item" onClick={() => handleAction(() => openSongInfo(song.id))}>
+                <Info size={14} /> {t('contextMenu.songInfo')}
+              </div>
            </>
          );
        })()}
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState, useRef, memo } from 'react';
+import React, { useCallback, useEffect, useState, useRef, memo, useMemo } from 'react';
 import {
  Play, Pause, SkipBack, SkipForward,
  ChevronDown, Repeat, Repeat1, Square, Music, MicVocal
@@ -62,16 +62,25 @@ const FsBg = memo(function FsBg({ url }: { url: string }) {

  useEffect(() => {
    if (!url) return;
+    let cancelled = false;
    const id = counterRef.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));
-    }, 800);
-    return () => { clearTimeout(t1); clearTimeout(t2); };
-  }, [url]); // eslint-disable-line react-hooks/exhaustive-deps
+    // Preload the image before starting the crossfade — prevents a blank flash
+    // between the old and new layer while the browser decodes the image.
+    const img = new Image();
+    img.onload = img.onerror = () => {
+      if (cancelled) return;
+      setLayers(prev => [...prev, { url, id, visible: false }]);
+      requestAnimationFrame(() => {
+        if (cancelled) return;
+        setLayers(prev => prev.map(l => ({ ...l, visible: l.id === id })));
+        setTimeout(() => {
+          if (!cancelled) setLayers(prev => prev.filter(l => l.id === id));
+        }, 800);
+      });
+    };
+    img.src = url;
+    return () => { cancelled = true; };
+  }, [url]);

  return (
    <>
@@ -154,10 +163,13 @@ export default function FullscreenPlayer({ onClose }: FullscreenPlayerProps) {
  const toggleQueue     = usePlayerStore(s => s.toggleQueue);

  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);
+  // buildCoverArtUrl generates a new salt on every call — must be memoized
+  // to prevent useCachedUrl from re-fetching on every progress re-render (100 ms).
+  const coverUrl = useMemo(() => currentTrack?.coverArt ? buildCoverArtUrl(currentTrack.coverArt, 800) : '', [currentTrack?.coverArt]);
+  const coverKey = useMemo(() => currentTrack?.coverArt ? coverArtCacheKey(currentTrack.coverArt, 800) : '', [currentTrack?.coverArt]);
+  // No fetchUrl fallback for the background — we only want stable blob URLs
+  // to avoid a double crossfade (fetchUrl → blobUrl for the same image).
+  const resolvedCoverUrl = useCachedUrl(coverUrl, coverKey, false);

  // Fetch artist image for background — fall back to cover art if unavailable
  const [artistBgUrl, setArtistBgUrl] = useState<string>('');
@@ -119,7 +119,7 @@ export default function GenreFilterBar({ selected, onSelectionChange }: GenreFil
        />

        {dropdownOpen && filteredOptions.length > 0 && (
-          <div className="genre-filter-dropdown">
+          <div className="genre-filter-dropdown" onWheel={e => e.stopPropagation()}>
            {filteredOptions.slice(0, 60).map(g => (
              <div key={g} className="genre-filter-option" onMouseDown={() => add(g)}>
                {g}
@@ -129,7 +129,7 @@ export default function GenreFilterBar({ selected, onSelectionChange }: GenreFil
        )}

        {dropdownOpen && filteredOptions.length === 0 && search.length > 0 && (
-          <div className="genre-filter-dropdown">
+          <div className="genre-filter-dropdown" onWheel={e => e.stopPropagation()}>
            <div className="genre-filter-empty">{t('common.filterNoGenres')}</div>
          </div>
        )}
@@ -1,9 +1,9 @@
-import React, { useEffect, useState, useRef, useCallback } from 'react';
+import React, { useEffect, useState, useRef, useCallback, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Play, ListPlus } from 'lucide-react';
 import { getRandomAlbums, SubsonicAlbum, buildCoverArtUrl, coverArtCacheKey, getAlbum } from '../api/subsonic';
 import CachedImage, { useCachedUrl } from './CachedImage';
-import { usePlayerStore } from '../store/playerStore';
+import { usePlayerStore, songToTrack } from '../store/playerStore';
 import { useTranslation } from 'react-i18next';
 import { playAlbum } from '../utils/playAlbum';

@@ -92,9 +92,9 @@ export default function Hero({ albums: albumsProp }: HeroProps = {}) {
    });
  }, [album?.id]);

-  // Resolve background URL via cache
-  const bgRawUrl = album?.coverArt ? buildCoverArtUrl(album.coverArt, 800) : '';
-  const bgCacheKey = album?.coverArt ? coverArtCacheKey(album.coverArt, 800) : '';
+  // buildCoverArtUrl generates a new salt on every call — must be memoized.
+  const bgRawUrl    = useMemo(() => album?.coverArt ? buildCoverArtUrl(album.coverArt, 800) : '', [album?.coverArt]);
+  const bgCacheKey  = useMemo(() => album?.coverArt ? coverArtCacheKey(album.coverArt, 800) : '', [album?.coverArt]);
  const resolvedBgUrl = useCachedUrl(bgRawUrl, bgCacheKey);

  // Keep the last known good URL so HeroBg never receives '' during a cache-miss
@@ -102,9 +102,8 @@ export default function Hero({ albums: albumsProp }: HeroProps = {}) {
  const stableBgUrl = useRef('');
  if (resolvedBgUrl) stableBgUrl.current = resolvedBgUrl;

-  // Resolve cover thumbnail via cache
-  const coverRawUrl = album?.coverArt ? buildCoverArtUrl(album.coverArt, 300) : '';
-  const coverCacheKey = album?.coverArt ? coverArtCacheKey(album.coverArt, 300) : '';
+  const coverRawUrl  = useMemo(() => album?.coverArt ? buildCoverArtUrl(album.coverArt, 300) : '', [album?.coverArt]);
+  const coverCacheKey = useMemo(() => album?.coverArt ? coverArtCacheKey(album.coverArt, 300) : '', [album?.coverArt]);

  if (!album) return <div className="hero-placeholder" />;

@@ -151,18 +150,14 @@ export default function Hero({ albums: albumsProp }: HeroProps = {}) {
            </button>
            <button
              className="btn btn-surface"
-              onClick={async (e) => {
-                e.stopPropagation();
-                try {
-                  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, artistId: s.artistId, duration: s.duration, coverArt: s.coverArt, track: s.track,
-                    year: s.year, bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating, genre: s.genre,
-                  }));
-                  usePlayerStore.getState().enqueue(tracks);
-                } catch (_) { }
-              }}
+            onClick={async (e) => {
+                 e.stopPropagation();
+                 try {
+                   const albumData = await getAlbum(album.id);
+                   const tracks = albumData.songs.map(songToTrack);
+                   usePlayerStore.getState().enqueue(tracks);
+                 } catch (_) { }
+               }}
              style={{ padding: '0 1.5rem', fontWeight: 600, fontSize: '0.95rem' }}
              data-tooltip={t('hero.enqueueTooltip')}
            >
@@ -1,8 +1,8 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Search, Disc3, Users, Music } from 'lucide-react';
+import { Search, Disc3, Users, Music, SlidersHorizontal } from 'lucide-react';
 import { search, SearchResults, buildCoverArtUrl } from '../api/subsonic';
-import { usePlayerStore } from '../store/playerStore';
+import { usePlayerStore, songToTrack } from '../store/playerStore';
 import { useTranslation } from 'react-i18next';

 function debounce(fn: (q: string) => void, ms: number): (q: string) => void {
@@ -57,10 +57,10 @@ export default function LiveSearch() {
  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, genre: s.genre });
-      setOpen(false); setQuery('');
-    }}))),
+   ...(results.songs.map(s => ({ id: s.id, action: () => {
+       playTrack(songToTrack(s));
+       setOpen(false); setQuery('');
+     }}))),
  ] : [];

  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -116,6 +116,16 @@ export default function LiveSearch() {
            ×
          </button>
        )}
+        <button
+          className="live-search-adv-btn"
+          type="button"
+          onClick={() => navigate(query.trim() ? `/search/advanced?q=${encodeURIComponent(query.trim())}` : '/search/advanced')}
+          data-tooltip={t('search.advanced')}
+          data-tooltip-pos="bottom"
+          aria-label={t('search.advanced')}
+        >
+          <SlidersHorizontal size={14} />
+        </button>
      </div>

      {open && (
@@ -175,10 +185,10 @@ export default function LiveSearch() {
                    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, genre: s.genre });
-                          setOpen(false); setQuery('');
-                        }}
+                     onClick={() => {
+                           playTrack(songToTrack(s));
+                           setOpen(false); setQuery('');
+                         }}
                        role="option" aria-selected={activeIndex === i}>
                        <div className="search-result-icon"><Music size={14} /></div>
                        <div>
@@ -6,7 +6,7 @@ import {
 } from 'lucide-react';
 import { usePlayerStore } from '../store/playerStore';
 import { useAuthStore } from '../store/authStore';
-import { buildCoverArtUrl, coverArtCacheKey } from '../api/subsonic';
+import { buildCoverArtUrl, coverArtCacheKey, star, unstar } from '../api/subsonic';
 import CachedImage from './CachedImage';
 import WaveformSeek from './WaveformSeek';
 import Equalizer from './Equalizer';
@@ -14,6 +14,7 @@ import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { useLyricsStore } from '../store/lyricsStore';
 import MarqueeText from './MarqueeText';
+import LastfmIcon from './LastfmIcon';

 function formatTime(seconds: number): string {
  if (!seconds || isNaN(seconds)) return '0:00';
@@ -35,9 +36,26 @@ export default function PlayerBar() {
    stop, toggleRepeat, repeatMode, toggleFullscreen,
    lastfmLoved, toggleLastfmLove,
    isQueueVisible, toggleQueue,
+    starredOverrides, setStarredOverride,
  } = usePlayerStore();
  const { lastfmSessionKey } = useAuthStore();

+  const isStarred = currentTrack
+    ? (currentTrack.id in starredOverrides ? starredOverrides[currentTrack.id] : !!currentTrack.starred)
+    : false;
+
+  const toggleStar = useCallback(async () => {
+    if (!currentTrack) return;
+    const next = !isStarred;
+    setStarredOverride(currentTrack.id, next);
+    try {
+      if (next) await star(currentTrack.id, 'song');
+      else await unstar(currentTrack.id, 'song');
+    } catch {
+      setStarredOverride(currentTrack.id, !next);
+    }
+  }, [currentTrack, isStarred, setStarredOverride]);
+
  const duration = currentTrack?.duration ?? 0;
  const coverSrc = useMemo(() => currentTrack?.coverArt ? buildCoverArtUrl(currentTrack.coverArt, 128) : '', [currentTrack?.coverArt]);
  const coverKey = currentTrack?.coverArt ? coverArtCacheKey(currentTrack.coverArt, 128) : '';
@@ -92,6 +110,17 @@ export default function PlayerBar() {
            onClick={() => currentTrack?.artistId && navigate(`/artist/${currentTrack.artistId}`)}
          />
        </div>
+        {currentTrack && (
+          <button
+            className="player-btn player-btn-sm player-star-btn"
+            onClick={toggleStar}
+            aria-label={isStarred ? t('contextMenu.unfavorite') : t('contextMenu.favorite')}
+            data-tooltip={isStarred ? t('contextMenu.unfavorite') : t('contextMenu.favorite')}
+            style={{ color: isStarred ? 'var(--accent)' : 'var(--text-muted)', flexShrink: 0 }}
+          >
+            <Heart size={15} fill={isStarred ? 'currentColor' : 'none'} />
+          </button>
+        )}
        {currentTrack && lastfmSessionKey && (
          <button
            className="player-btn player-btn-sm player-love-btn"
@@ -100,7 +129,7 @@ export default function PlayerBar() {
            data-tooltip={lastfmLoved ? t('contextMenu.lfmUnlove') : t('contextMenu.lfmLove')}
            style={{ color: lastfmLoved ? '#e31c23' : 'var(--text-muted)', flexShrink: 0 }}
          >
-            <Heart size={15} fill={lastfmLoved ? '#e31c23' : 'none'} />
+            <LastfmIcon size={15} />
          </button>
        )}
      </div>
@@ -1,12 +1,14 @@
-import React, { useState, useRef } from 'react';
-import { Track, usePlayerStore } from '../store/playerStore';
-import { Play, Music, Star, X, Trash2, Save, FolderOpen, Shuffle, Infinity, Waves, MicVocal, ListMusic } from 'lucide-react';
-import { buildCoverArtUrl, getAlbum, getPlaylists, getPlaylist, createPlaylist, deletePlaylist, SubsonicPlaylist } from '../api/subsonic';
+import React, { useState, useRef, useMemo } from 'react';
+import { Track, usePlayerStore, songToTrack } from '../store/playerStore';
+import { Play, Music, Star, X, Trash2, Save, FolderOpen, Shuffle, Infinity, Waves, MicVocal, ListMusic, Check, ListPlus } from 'lucide-react';
+import { buildCoverArtUrl, coverArtCacheKey, getAlbum, getPlaylists, getPlaylist, createPlaylist, updatePlaylist, deletePlaylist, SubsonicPlaylist } from '../api/subsonic';
+import { useCachedUrl } from './CachedImage';
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { useAuthStore } from '../store/authStore';
 import { useLyricsStore } from '../store/lyricsStore';
+import { useDragDrop } from '../contexts/DragDropContext';
 import LyricsPane from './LyricsPane';

 function formatTime(seconds: number): string {
@@ -59,10 +61,12 @@ function SavePlaylistModal({ onClose, onSave }: { onClose: () => void, onSave: (
  );
 }

-function LoadPlaylistModal({ onClose, onLoad }: { onClose: () => void, onLoad: (id: string) => void }) {
+function LoadPlaylistModal({ onClose, onLoad }: { onClose: () => void, onLoad: (id: string, name: string, mode: 'replace' | 'append') => void }) {
  const { t } = useTranslation();
  const [playlists, setPlaylists] = useState<SubsonicPlaylist[]>([]);
  const [loading, setLoading] = useState(true);
+  const [filter, setFilter] = useState('');
+  const [confirmDelete, setConfirmDelete] = useState<{ id: string; name: string } | null>(null);

  const fetchPlaylists = () => {
    setLoading(true);
@@ -80,28 +84,45 @@ function LoadPlaylistModal({ onClose, onLoad }: { onClose: () => void, onLoad: (
  }, []);

  const handleDelete = async (id: string, name: string) => {
-    if (confirm(t('queue.deleteConfirm', { name }))) {
-      await deletePlaylist(id);
-      fetchPlaylists();
-    }
+    setConfirmDelete({ id, name });
+  };
+
+  const confirmDeletePlaylist = async () => {
+    if (!confirmDelete) return;
+    await deletePlaylist(confirmDelete.id);
+    setConfirmDelete(null);
+    fetchPlaylists();
  };

  return (
+    <>
    <div className="modal-overlay" onClick={onClose} role="dialog" aria-modal="true">
-      <div className="modal-content" onClick={e => e.stopPropagation()} style={{ maxWidth: '400px' }}>
+      <div className="modal-content" onClick={e => e.stopPropagation()} style={{ maxWidth: '560px', width: '90vw' }}>
        <button className="modal-close" onClick={onClose}><X size={18} /></button>
        <h3 style={{ marginBottom: '1rem', fontFamily: 'var(--font-display)' }}>{t('queue.loadPlaylist')}</h3>
+        {!loading && playlists.length > 0 && (
+          <input
+            type="text"
+            className="live-search-field"
+            placeholder={t('queue.filterPlaylists')}
+            value={filter}
+            onChange={e => setFilter(e.target.value)}
+            autoFocus
+            style={{ width: '100%', marginBottom: '0.75rem', padding: '8px 14px' }}
+          />
+        )}
        {loading ? (
          <p style={{ color: 'var(--text-muted)' }}>{t('queue.loading')}</p>
        ) : playlists.length === 0 ? (
          <p style={{ color: 'var(--text-muted)' }}>{t('queue.noPlaylists')}</p>
        ) : (
          <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', maxHeight: '300px', overflowY: 'auto' }}>
-            {playlists.map(p => (
+            {playlists.filter(p => p.name.toLowerCase().includes(filter.toLowerCase())).map(p => (
              <div key={p.id} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '8px 12px', background: 'var(--ctp-surface1)', borderRadius: 'var(--radius-md)' }}>
                <span style={{ fontWeight: 500 }} className="truncate" data-tooltip={p.name}>{p.name}</span>
                <div style={{ display: 'flex', gap: '4px', flexShrink: 0 }}>
-                  <button className="nav-btn" onClick={() => onLoad(p.id)} data-tooltip={t('queue.load')} style={{ width: '28px', height: '28px', background: 'transparent' }}><Play size={14} /></button>
+                  <button className="nav-btn" onClick={() => onLoad(p.id, p.name, 'replace')} data-tooltip={t('queue.load')} style={{ width: '28px', height: '28px', background: 'transparent' }}><Play size={14} /></button>
+                  <button className="nav-btn" onClick={() => onLoad(p.id, p.name, 'append')} data-tooltip={t('queue.appendToQueue')} style={{ width: '28px', height: '28px', background: 'transparent' }}><ListPlus size={14} /></button>
                  <button className="nav-btn" onClick={() => handleDelete(p.id, p.name)} data-tooltip={t('queue.delete')} style={{ width: '28px', height: '28px', background: 'transparent', color: 'var(--ctp-red)' }}><Trash2 size={14} /></button>
                </div>
              </div>
@@ -110,13 +131,28 @@ function LoadPlaylistModal({ onClose, onLoad }: { onClose: () => void, onLoad: (
        )}
      </div>
    </div>
+
+    {confirmDelete && (
+      <div className="modal-overlay" onClick={() => setConfirmDelete(null)} role="dialog" aria-modal="true">
+        <div className="modal-content" onClick={e => e.stopPropagation()} style={{ maxWidth: '360px' }}>
+          <button className="modal-close" onClick={() => setConfirmDelete(null)}><X size={18} /></button>
+          <h3 style={{ marginBottom: '0.5rem', fontFamily: 'var(--font-display)' }}>{t('queue.delete')}</h3>
+          <p style={{ color: 'var(--text-secondary)', marginBottom: '1.25rem', lineHeight: 1.5 }}>
+            {t('queue.deleteConfirm', { name: confirmDelete.name })}
+          </p>
+          <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '8px' }}>
+            <button className="btn btn-ghost" onClick={() => setConfirmDelete(null)}>{t('queue.cancel')}</button>
+            <button className="btn btn-primary" style={{ background: 'var(--danger)', borderColor: 'var(--danger)' }} onClick={confirmDeletePlaylist}>
+              {t('queue.delete')}
+            </button>
+          </div>
+        </div>
+      </div>
+    )}
+    </>
  );
 }

-// 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();
@@ -124,6 +160,15 @@ export default function QueuePanel() {
  const queueIndex = usePlayerStore(s => s.queueIndex);
  const currentTrack = usePlayerStore(s => s.currentTrack);
  const currentTime = usePlayerStore(s => s.currentTime);
+  const currentCoverFetchUrl = useMemo(
+    () => currentTrack?.coverArt ? buildCoverArtUrl(currentTrack.coverArt, 128) : '',
+    [currentTrack?.coverArt]
+  );
+  const currentCoverCacheKey = useMemo(
+    () => currentTrack?.coverArt ? coverArtCacheKey(currentTrack.coverArt, 128) : '',
+    [currentTrack?.coverArt]
+  );
+  const currentCoverSrc = useCachedUrl(currentCoverFetchUrl, currentCoverCacheKey);
  const isQueueVisible = usePlayerStore(s => s.isQueueVisible);
  const playTrack = usePlayerStore(s => s.playTrack);
  const toggleQueue = usePlayerStore(s => s.toggleQueue);
@@ -132,6 +177,7 @@ export default function QueuePanel() {
  const reorderQueue = usePlayerStore(s => s.reorderQueue);
  const shuffleQueue = usePlayerStore(s => s.shuffleQueue);
  const enqueue = usePlayerStore(s => s.enqueue);
+  const enqueueAt = usePlayerStore(s => s.enqueueAt);
  const contextMenu = usePlayerStore(s => s.contextMenu);

  const crossfadeEnabled = useAuthStore(s => s.crossfadeEnabled);
@@ -162,22 +208,85 @@ export default function QueuePanel() {
    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);
+  // Tracks which queue index is being psy-dragged for opacity visual feedback
+  const psyDragFromIdxRef = useRef<number | null>(null);

  const queueListRef = useRef<HTMLDivElement>(null);
+  const asideRef = useRef<HTMLElement>(null);

+  const { isDragging: isPsyDragging, startDrag } = useDragDrop();
+
+  useEffect(() => {
+    if (!isPsyDragging) {
+      externalDropTargetRef.current = null;
+      setExternalDropTarget(null);
+    }
+  }, [isPsyDragging]);
+
+  const [externalDropTarget, setExternalDropTarget] = useState<{ idx: number; before: boolean } | null>(null);
+  const externalDropTargetRef = useRef<{ idx: number; before: boolean } | null>(null);
+
+  // ── Mouse-event DnD: listen for psy-drop custom events ─────────
+  useEffect(() => {
+    const aside = asideRef.current;
+    if (!aside) return;
+
+    const onPsyDrop = async (e: Event) => {
+      const detail = (e as CustomEvent).detail;
+      if (!detail?.data) return;
+
+      let parsedData: any = null;
+      try { parsedData = JSON.parse(detail.data); } catch { return; }
+
+      const dropTarget = externalDropTargetRef.current;
+      externalDropTargetRef.current = null;
+      setExternalDropTarget(null);
+
+      const insertIdx = dropTarget
+        ? (dropTarget.before ? dropTarget.idx : dropTarget.idx + 1)
+        : usePlayerStore.getState().queue.length;
+
+      if (parsedData.type === 'queue_reorder') {
+        const fromIdx: number = parsedData.index;
+        psyDragFromIdxRef.current = null;
+        if (fromIdx !== insertIdx) reorderQueue(fromIdx, insertIdx);
+      } else if (parsedData.type === 'song') {
+        enqueueAt([parsedData.track], insertIdx);
+      } else if (parsedData.type === 'album') {
+        const albumData = await getAlbum(parsedData.id);
+        const tracks: Track[] = albumData.songs.map((s: any) => ({
+          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, genre: s.genre,
+        }));
+        enqueueAt(tracks, insertIdx);
+      }
+    };
+
+    aside.addEventListener('psy-drop', onPsyDrop);
+    return () => aside.removeEventListener('psy-drop', onPsyDrop);
+  }, [enqueueAt]);
+
+  const [activePlaylist, setActivePlaylist] = useState<{ id: string; name: string } | null>(null);
+  const [saveState, setSaveState] = useState<'idle' | 'saving' | 'saved'>('idle');
  const [saveModalOpen, setSaveModalOpen] = useState(false);
  const [loadModalOpen, setLoadModalOpen] = useState(false);

-  const handleSave = () => {
+  const handleSave = async () => {
    if (queue.length === 0) return;
-    setSaveModalOpen(true);
+    if (activePlaylist) {
+      setSaveState('saving');
+      try {
+        await updatePlaylist(activePlaylist.id, queue.map(t => t.id));
+        setSaveState('saved');
+        setTimeout(() => setSaveState('idle'), 1500);
+      } catch (e) {
+        console.error('Failed to update playlist', e);
+        setSaveState('idle');
+      }
+    } else {
+      setSaveModalOpen(true);
+    }
  };

  const handleLoad = () => {
@@ -186,107 +295,41 @@ export default function QueuePanel() {

  const handleClear = () => {
    clearQueue();
+    setActivePlaylist(null);
  };

-  const onDragStart = (e: React.DragEvent, index: number) => {
-    isDraggingInternalRef.current = true;
-    draggedIdxRef.current = index;
-    _dragFromIdx = index;
-    setDraggedIdx(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) => {
-    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 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;
-          }
-        }
-      }
-
-      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, genre: s.genre,
-      }));
-      enqueue(tracks);
-    }
-  };

  return (
    <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={{ 
+      ref={asideRef}
+      className={`queue-panel${isPsyDragging ? ' queue-drop-active' : ''}`}
+      onMouseMove={e => {
+        if (!isPsyDragging || !queueListRef.current) return;
+        const items = queueListRef.current.querySelectorAll<HTMLElement>('[data-queue-idx]');
+        let found = false;
+        for (let i = 0; i < items.length; i++) {
+          const rect = items[i].getBoundingClientRect();
+          if (e.clientY >= rect.top && e.clientY <= rect.bottom) {
+            const before = e.clientY < rect.top + rect.height / 2;
+            const idx = parseInt(items[i].dataset.queueIdx!);
+            const target = { idx, before };
+            externalDropTargetRef.current = target;
+            setExternalDropTarget(target);
+            found = true;
+            break;
+          }
+        }
+        if (!found) {
+          externalDropTargetRef.current = null;
+          setExternalDropTarget(null);
+        }
+      }}
+      style={{
        borderLeftWidth: isQueueVisible ? 1 : 0
      }}
    >
      <div className="queue-header">
+        <div style={{ display: 'flex', flexDirection: 'column', minWidth: 0, flex: 1 }}>
        <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 && (() => {
@@ -315,23 +358,38 @@ export default function QueuePanel() {
            );
          })()}
        </div>
+        {activePlaylist && (
+          <div className="truncate" style={{ fontSize: '11px', color: 'var(--text-muted)', marginTop: '2px', display: 'flex', alignItems: 'center', gap: '4px' }}>
+            <ListMusic size={10} style={{ flexShrink: 0 }} />
+            <span className="truncate">{activePlaylist.name}</span>
+          </div>
+        )}
+        </div>
      </div>

      {currentTrack && (
        <div className="queue-current-track">
-          {(currentTrack.genre || currentTrack.suffix || currentTrack.bitRate) && (
+          {(currentTrack.genre || currentTrack.suffix || currentTrack.bitRate || currentTrack.samplingRate || currentTrack.bitDepth) && (
            <div className="queue-current-tech">
              {[
                currentTrack.genre,
                currentTrack.suffix?.toUpperCase(),
                currentTrack.bitRate ? `${currentTrack.bitRate} kbps` : undefined,
+                (() => {
+                  const bd = currentTrack.bitDepth;
+                  const sr = currentTrack.samplingRate ? `${currentTrack.samplingRate / 1000} kHz` : '';
+                  if (bd && sr) return `${bd}/${sr}`;
+                  if (bd) return `${bd}-bit`;
+                  if (sr) return sr;
+                  return undefined;
+                })(),
              ].filter(Boolean).join(' · ')}
            </div>
          )}
          <div className="queue-current-track-body">
            <div className="queue-current-cover">
              {currentTrack.coverArt ? (
-                <img src={buildCoverArtUrl(currentTrack.coverArt, 128)} alt="" loading="eager" />
+                <img src={currentCoverSrc} alt="" loading="eager" />
              ) : (
                <div className="fallback"><Music size={32} /></div>
              )}
@@ -362,8 +420,14 @@ export default function QueuePanel() {
        <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
+          className={`queue-round-btn${saveState === 'saved' ? ' active' : ''}`}
+          onClick={handleSave}
+          disabled={saveState === 'saving'}
+          data-tooltip={activePlaylist ? `${t('queue.updatePlaylist')}: ${activePlaylist.name}` : t('queue.savePlaylist')}
+          aria-label={t('queue.savePlaylist')}
+        >
+          {saveState === 'saved' ? <Check size={13} /> : <Save size={13} />}
        </button>
        <button className="queue-round-btn" onClick={handleLoad} data-tooltip={t('queue.loadPlaylist')} aria-label={t('queue.loadPlaylist')}>
          <FolderOpen size={13} />
@@ -436,15 +500,12 @@ export default function QueuePanel() {
        ) : (
          queue.map((track, idx) => {
            const isPlaying = idx === queueIndex;
-            const isDragging = draggedIdx === idx;
-            const isDragOver = dragOverIdx === idx;
-            
-            // Highlight above or below depending on index direction
+
            let dragStyle: React.CSSProperties = {};
-            if (isDragging) {
+            if (isPsyDragging && psyDragFromIdxRef.current === idx) {
              dragStyle = { opacity: 0.4, background: 'var(--bg-hover)' };
-            } else if (isDragOver && draggedIdx !== null) {
-              if (draggedIdx > idx) {
+            } else if (isPsyDragging && externalDropTarget?.idx === idx) {
+              if (externalDropTarget.before) {
                dragStyle = { borderTop: '2px solid var(--accent)', paddingTop: '6px', marginTop: '-2px' };
              } else {
                dragStyle = { borderBottom: '2px solid var(--accent)', paddingBottom: '6px', marginBottom: '-2px' };
@@ -461,11 +522,26 @@ export default function QueuePanel() {
                  e.preventDefault();
                  usePlayerStore.getState().openContextMenu(e.clientX, e.clientY, track, 'queue-item', idx);
                }}
-                draggable
-                onDragStart={(e) => onDragStart(e, idx)}
-                onDragEnter={(e) => onDragEnterItem(e)}
-                onDragOver={(e) => onDragOverItem(e, idx)}
-                onDragEnd={onDragEnd}
+                onMouseDown={(e) => {
+                  if (e.button !== 0) return;
+                  e.preventDefault();
+                  const startX = e.clientX;
+                  const startY = e.clientY;
+                  const onMove = (me: MouseEvent) => {
+                    if (Math.abs(me.clientX - startX) > 5 || Math.abs(me.clientY - startY) > 5) {
+                      document.removeEventListener('mousemove', onMove);
+                      document.removeEventListener('mouseup', onUp);
+                      psyDragFromIdxRef.current = idx;
+                      startDrag({ data: JSON.stringify({ type: 'queue_reorder', index: idx }), label: track.title }, me.clientX, me.clientY);
+                    }
+                  };
+                  const onUp = () => {
+                    document.removeEventListener('mousemove', onMove);
+                    document.removeEventListener('mouseup', onUp);
+                  };
+                  document.addEventListener('mousemove', onMove);
+                  document.addEventListener('mouseup', onUp);
+                }}
                style={dragStyle}
              >
                <div className="queue-item-info">
@@ -507,39 +583,43 @@ export default function QueuePanel() {
      </div>

      {saveModalOpen && (
-        <SavePlaylistModal 
-          onClose={() => setSaveModalOpen(false)} 
-          onSave={async (name) => { 
+        <SavePlaylistModal
+          onClose={() => setSaveModalOpen(false)}
+          onSave={async (name) => {
            try {
              await createPlaylist(name, queue.map(t => t.id));
-              setSaveModalOpen(false); 
+              const playlists = await getPlaylists();
+              const created = playlists.find(p => p.name === name);
+              if (created) setActivePlaylist({ id: created.id, name: created.name });
+              setSaveModalOpen(false);
            } catch (e) {
              console.error('Failed to save playlist', e);
            }
-          }} 
+          }}
        />
      )}

      {loadModalOpen && (
-        <LoadPlaylistModal 
-          onClose={() => setLoadModalOpen(false)} 
-          onLoad={async (id) => { 
+        <LoadPlaylistModal
+          onClose={() => setLoadModalOpen(false)}
+          onLoad={async (id, name, mode) => {
            try {
              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, artistId: s.artistId, duration: s.duration, coverArt: s.coverArt, track: s.track,
-                year: s.year, bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating, genre: s.genre,
-              }));
+              const tracks: Track[] = data.songs.map(songToTrack);
              if (tracks.length > 0) {
-                clearQueue();
-                playTrack(tracks[0], tracks);
+                if (mode === 'append') {
+                  enqueue(tracks);
+                } else {
+                  clearQueue();
+                  playTrack(tracks[0], tracks);
+                }
              }
-              setLoadModalOpen(false); 
+              setActivePlaylist({ id, name });
+              setLoadModalOpen(false);
            } catch (e) {
              console.error('Failed to load playlist', e);
            }
-          }} 
+          }}
        />
      )}
    </aside>
@@ -1,65 +1,33 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { usePlayerStore } from '../store/playerStore';
 import { useOfflineStore } from '../store/offlineStore';
 import { useAuthStore } from '../store/authStore';
-import { open } from '@tauri-apps/plugin-shell';
-import { version as appVersion } from '../../package.json';
+import { useSidebarStore } from '../store/sidebarStore';
 import { NavLink } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import {
  Disc3, Users, Music4, Radio, Settings, Heart, BarChart3, Shuffle,
-  PanelLeftClose, PanelLeft, HelpCircle, Dices, ArrowUpCircle, AudioLines, HardDriveDownload, Tags
+  PanelLeftClose, PanelLeft, HelpCircle, Dices, AudioLines, HardDriveDownload, Tags, ListMusic
 } from 'lucide-react';
 import PsysonicLogo from './PsysonicLogo';
 import PSmallLogo from './PSmallLogo';

-const navItems = [
-  { icon: Disc3, labelKey: 'sidebar.mainstage', to: '/' },
-  { icon: Radio, labelKey: 'sidebar.newReleases', to: '/new-releases' },
-  { icon: Music4,  labelKey: 'sidebar.allAlbums',    to: '/albums' },
-  { icon: Dices,   labelKey: 'sidebar.randomAlbums', to: '/random-albums' },
-  { icon: Users, labelKey: 'sidebar.artists', to: '/artists' },
-  { icon: Tags, labelKey: 'sidebar.genres', to: '/genres' },
-  { icon: Shuffle, labelKey: 'sidebar.randomMix', to: '/random-mix' },
-  { icon: Heart, labelKey: 'sidebar.favorites', to: '/favorites' },
-];
+// All configurable nav items — order and visibility controlled by sidebarStore.
+// Exported so Settings can render the same item metadata.
+export const ALL_NAV_ITEMS: Record<string, { icon: React.ElementType; labelKey: string; to: string; section: 'library' | 'system' }> = {
+  mainstage:    { icon: Disc3,      labelKey: 'sidebar.mainstage',    to: '/',              section: 'library' },
+  newReleases:  { icon: Radio,      labelKey: 'sidebar.newReleases',  to: '/new-releases',  section: 'library' },
+  allAlbums:    { icon: Music4,     labelKey: 'sidebar.allAlbums',    to: '/albums',        section: 'library' },
+  randomAlbums: { icon: Dices,      labelKey: 'sidebar.randomAlbums', to: '/random-albums', section: 'library' },
+  artists:      { icon: Users,      labelKey: 'sidebar.artists',      to: '/artists',       section: 'library' },
+  genres:       { icon: Tags,       labelKey: 'sidebar.genres',       to: '/genres',        section: 'library' },
+  randomMix:    { icon: Shuffle,    labelKey: 'sidebar.randomMix',    to: '/random-mix',    section: 'library' },
+  favorites:    { icon: Heart,      labelKey: 'sidebar.favorites',    to: '/favorites',     section: 'library' },
+  playlists:    { icon: ListMusic,  labelKey: 'sidebar.playlists',    to: '/playlists',     section: 'library' },
+  statistics:   { icon: BarChart3,  labelKey: 'sidebar.statistics',   to: '/statistics',    section: 'system'  },
+  help:         { icon: HelpCircle, labelKey: 'sidebar.help',         to: '/help',          section: 'system'  },
+};

-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,
@@ -76,30 +44,15 @@ export default function Sidebar({
  const offlineAlbums = useOfflineStore(s => s.albums);
  const serverId = useAuthStore(s => s.activeServerId ?? '');
  const hasOfflineContent = Object.values(offlineAlbums).some(a => a.serverId === serverId);
-  const [latestVersion, setLatestVersion] = useState<string | null>(null);
+  const sidebarItems = useSidebarStore(s => s.items);
+  // Resolve ordered, visible items per section from store config
+  const visibleLibrary = sidebarItems
+    .filter(cfg => cfg.visible && ALL_NAV_ITEMS[cfg.id]?.section === 'library')
+    .map(cfg => ALL_NAV_ITEMS[cfg.id]);
+  const visibleSystem = sidebarItems
+    .filter(cfg => cfg.visible && ALL_NAV_ITEMS[cfg.id]?.section === 'system')
+    .map(cfg => ALL_NAV_ITEMS[cfg.id]);

-  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' : ''}`}>
@@ -121,7 +74,7 @@ export default function Sidebar({

      <nav className="sidebar-nav" aria-label="Hauptnavigation">
        {!isCollapsed && <span className="nav-section-label">{t('sidebar.library')}</span>}
-        {navItems.map(item => (
+        {visibleLibrary.map(item => (
          <NavLink
            key={item.to}
            to={item.to}
@@ -135,7 +88,7 @@ export default function Sidebar({
          </NavLink>
        ))}

-        {/* Now Playing — special styled */}
+        {/* Now Playing — fixed, always visible */}
        <NavLink
          to="/now-playing"
          className={({ isActive }) => `nav-link nav-link-nowplaying ${isActive ? 'active' : ''}`}
@@ -162,26 +115,19 @@ export default function Sidebar({
          </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' : ''}`}
-          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>
+        {visibleSystem.length > 0 && !isCollapsed && <span className="nav-section-label">{t('sidebar.system')}</span>}
+{visibleSystem.map(item => (
+          <NavLink
+            key={item.to}
+            to={item.to}
+            className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}
+            data-tooltip={isCollapsed ? t(item.labelKey) : undefined}
+            data-tooltip-pos="bottom"
+          >
+            <item.icon size={isCollapsed ? 22 : 18} />
+            {!isCollapsed && <span>{t(item.labelKey)}</span>}
+          </NavLink>
+        ))}
        <NavLink
          to="/settings"
          className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}
@@ -0,0 +1,145 @@
+import React, { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { X } from 'lucide-react';
+import { usePlayerStore } from '../store/playerStore';
+import { getSong, SubsonicSong } from '../api/subsonic';
+import { useTranslation } from 'react-i18next';
+
+function formatDuration(s: number): string {
+  const m = Math.floor(s / 60);
+  const sec = s % 60;
+  return `${m}:${sec.toString().padStart(2, '0')}`;
+}
+
+function formatSize(bytes?: number): string | null {
+  if (!bytes) return null;
+  if (bytes >= 1_000_000) return `${(bytes / 1_000_000).toFixed(2)} MB`;
+  return `${(bytes / 1_000).toFixed(0)} KB`;
+}
+
+function Row({ label, value }: { label: string; value: React.ReactNode }) {
+  if (value === null || value === undefined || value === '' || value === '—') return null;
+  return (
+    <tr>
+      <td className="song-info-label">{label}</td>
+      <td className="song-info-value">{value}</td>
+    </tr>
+  );
+}
+
+function Divider() {
+  return <tr><td colSpan={2} className="song-info-divider" /></tr>;
+}
+
+export default function SongInfoModal() {
+  const { t } = useTranslation();
+  const { songInfoModal, closeSongInfo } = usePlayerStore();
+  const [song, setSong] = useState<SubsonicSong | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (!songInfoModal.isOpen || !songInfoModal.songId) {
+      setSong(null);
+      return;
+    }
+    let cancelled = false;
+    setLoading(true);
+    getSong(songInfoModal.songId).then(s => {
+      if (!cancelled) { setSong(s); setLoading(false); }
+    });
+    return () => { cancelled = true; };
+  }, [songInfoModal.isOpen, songInfoModal.songId]);
+
+  useEffect(() => {
+    if (!songInfoModal.isOpen) return;
+    const handler = (e: KeyboardEvent) => { if (e.key === 'Escape') closeSongInfo(); };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, [songInfoModal.isOpen, closeSongInfo]);
+
+  if (!songInfoModal.isOpen) return null;
+
+  const channels = song?.channelCount === 1
+    ? t('songInfo.mono')
+    : song?.channelCount === 2
+      ? t('songInfo.stereo')
+      : song?.channelCount
+        ? `${song.channelCount} ch`
+        : null;
+
+  const trackLabel = song?.discNumber && song.discNumber > 1
+    ? `${song.discNumber} – ${song.track}`
+    : song?.track != null
+      ? String(song.track)
+      : null;
+
+  const hasReplayGain = song?.replayGain &&
+    (song.replayGain.trackGain !== undefined || song.replayGain.albumGain !== undefined);
+
+  return createPortal(
+    <>
+      <div className="song-info-backdrop" onClick={closeSongInfo} />
+      <div className="song-info-modal" role="dialog" aria-modal="true" aria-label={t('songInfo.title')}>
+        <div className="song-info-header">
+          <span className="song-info-title">{t('songInfo.title')}</span>
+          <button className="btn btn-ghost song-info-close" onClick={closeSongInfo} aria-label="Close">
+            <X size={16} />
+          </button>
+        </div>
+
+        <div className="song-info-body">
+          {loading && <div className="song-info-loading">{t('common.loading')}</div>}
+
+          {!loading && song && (
+            <table className="song-info-table">
+              <tbody>
+                <Row label={t('songInfo.songTitle')} value={song.title} />
+                <Row label={t('songInfo.artist')} value={song.artist} />
+                <Row label={t('songInfo.album')} value={song.album} />
+                {song.albumArtist && song.albumArtist !== song.artist && (
+                  <Row label={t('songInfo.albumArtist')} value={song.albumArtist} />
+                )}
+                <Row label={t('songInfo.year')} value={song.year} />
+                <Row label={t('songInfo.genre')} value={song.genre} />
+                <Row label={t('songInfo.duration')} value={formatDuration(song.duration)} />
+                <Row label={t('songInfo.track')} value={trackLabel} />
+
+                <Divider />
+
+                <Row label={t('songInfo.format')} value={[song.suffix?.toUpperCase(), song.contentType].filter(Boolean).join(' · ') || null} />
+                <Row label={t('songInfo.bitrate')} value={song.bitRate ? `${song.bitRate} kbps` : null} />
+                <Row label={t('songInfo.sampleRate')} value={song.samplingRate ? `${(song.samplingRate / 1000).toFixed(1)} kHz` : null} />
+                <Row label={t('songInfo.bitDepth')} value={song.bitDepth ? `${song.bitDepth} bit` : null} />
+                <Row label={t('songInfo.channels')} value={channels} />
+                <Row label={t('songInfo.fileSize')} value={formatSize(song.size)} />
+
+                {song.path && (
+                  <>
+                    <Divider />
+                    <Row label={t('songInfo.path')} value={<span className="song-info-path">{song.path}</span>} />
+                  </>
+                )}
+
+                {hasReplayGain && (
+                  <>
+                    <Divider />
+                    {song.replayGain!.trackGain !== undefined && (
+                      <Row label={t('songInfo.replayGainTrack')} value={`${song.replayGain!.trackGain >= 0 ? '+' : ''}${song.replayGain!.trackGain.toFixed(2)} dB`} />
+                    )}
+                    {song.replayGain!.albumGain !== undefined && (
+                      <Row label={t('songInfo.replayGainAlbum')} value={`${song.replayGain!.albumGain >= 0 ? '+' : ''}${song.replayGain!.albumGain.toFixed(2)} dB`} />
+                    )}
+                    {song.replayGain!.trackPeak !== undefined && (
+                      <Row label={t('songInfo.replayGainPeak')} value={song.replayGain!.trackPeak.toFixed(6)} />
+                    )}
+                  </>
+                )}
+              </tbody>
+            </table>
+          )}
+        </div>
+      </div>
+    </>,
+    document.body
+  );
+}
@@ -105,6 +105,14 @@ const THEME_GROUPS: { group: string; themes: ThemeDef[] }[] = [
      { id: 'doh-matic',    label: "D'oh-matic",              bg: '#FFFDF0', card: '#FFD90F', accent: '#1F75FE' },
      { id: 'heisenberg',   label: 'Heisenberg',              bg: '#0b0e12', card: '#141a22', accent: '#35d4f8' },
      { id: 'turtle-power', label: 'Turtle Power',            bg: '#1a1a1a', card: '#0a0a0a', accent: '#33cc33' },
+      { id: 'north-park',   label: 'North Park',              bg: '#F5F1E8', card: '#FFFFFF',  accent: '#FF8C00' },
+    ],
+  },
+  {
+    group: 'Famous Albums',
+    themes: [
+      { id: 'dark-side-of-the-moon', label: 'Dark Side of the Moon (inspired)', bg: '#050505', card: '#0D0D0D', accent: '#9B30FF' },
+      { id: 'powerslave',            label: 'Powerslave (inspired)',            bg: '#F0DFB0', card: '#2A1808', accent: '#C8960C' },
    ],
  },
  {
@@ -0,0 +1,236 @@
+/**
+ * Mouse-event-based Drag & Drop system.
+ *
+ * Replaces the HTML5 Drag & Drop API for cross-component drags (song → queue,
+ * album → queue) because WebKitGTK on Linux always shows a "forbidden" cursor
+ * during native HTML5 DnD and there is no way to fix it at the GTK level
+ * without breaking DnD entirely.
+ *
+ * This system uses mousedown / mousemove / mouseup which keeps cursor control
+ * in CSS and avoids the native DnD subsystem completely.
+ */
+
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { createPortal } from 'react-dom';
+
+// ── Types ─────────────────────────────────────────────────────────
+export interface DragPayload {
+  /** Serialised JSON identical to what was previously in dataTransfer */
+  data: string;
+  /** Label shown on the ghost element */
+  label: string;
+  /** Optional cover URL for the ghost */
+  coverUrl?: string;
+}
+
+interface DragState {
+  payload: DragPayload | null;
+  position: { x: number; y: number };
+}
+
+interface DragDropContextValue {
+  /** Begin a drag.  Called from mousedown (after threshold). */
+  startDrag: (payload: DragPayload, x: number, y: number) => void;
+  /** Current drag payload (null when idle). */
+  payload: DragPayload | null;
+  /** Whether a drag is in progress. */
+  isDragging: boolean;
+}
+
+const Ctx = createContext<DragDropContextValue>({
+  startDrag: () => {},
+  payload: null,
+  isDragging: false,
+});
+
+export const useDragDrop = () => useContext(Ctx);
+
+// ── Ghost overlay ─────────────────────────────────────────────────
+function DragGhost({ state }: { state: DragState }) {
+  if (!state.payload) return null;
+  const { label, coverUrl } = state.payload;
+  return createPortal(
+    <div
+      style={{
+        position: 'fixed',
+        left: state.position.x + 12,
+        top: state.position.y - 20,
+        pointerEvents: 'none',
+        zIndex: 99999,
+        display: 'flex',
+        alignItems: 'center',
+        gap: 8,
+        background: 'var(--bg-card, #1e1e2e)',
+        border: '1px solid var(--border, rgba(255,255,255,0.1))',
+        borderRadius: 8,
+        padding: '6px 12px',
+        boxShadow: '0 8px 32px rgba(0,0,0,0.5)',
+        color: 'var(--text-primary, #fff)',
+        fontSize: 13,
+        fontWeight: 500,
+        maxWidth: 280,
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        opacity: 0.95,
+        userSelect: 'none',
+      }}
+    >
+      {coverUrl && (
+        <img
+          src={coverUrl}
+          alt=""
+          style={{
+            width: 28,
+            height: 28,
+            borderRadius: 4,
+            objectFit: 'cover',
+            flexShrink: 0,
+          }}
+        />
+      )}
+      <span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>
+        {label}
+      </span>
+    </div>,
+    document.body,
+  );
+}
+
+// ── Provider ──────────────────────────────────────────────────────
+export function DragDropProvider({ children }: { children: React.ReactNode }) {
+  const [state, setState] = useState<DragState>({
+    payload: null,
+    position: { x: 0, y: 0 },
+  });
+
+  const stateRef = useRef(state);
+  stateRef.current = state;
+
+  const startDrag = useCallback(
+    (payload: DragPayload, x: number, y: number) => {
+      // Clear any text selection the browser may have started during the
+      // threshold detection phase (mousedown → mousemove before startDrag).
+      window.getSelection()?.removeAllRanges();
+      setState({ payload, position: { x, y } });
+    },
+    [],
+  );
+
+  // Global mousemove + mouseup listeners (only while dragging)
+  useEffect(() => {
+    if (!state.payload) return;
+
+    const onMove = (e: MouseEvent) => {
+      // preventDefault stops the browser from treating the mouse movement as
+      // a text-selection drag, which causes element highlighting and
+      // horizontal auto-scroll in grid containers.
+      e.preventDefault();
+      setState((prev) => ({ ...prev, position: { x: e.clientX, y: e.clientY } }));
+    };
+
+    const onUp = () => {
+      // Clear any residual selection (from the pre-threshold phase).
+      window.getSelection()?.removeAllRanges();
+
+      // Dispatch a custom event so drop targets can react.
+      // The payload is in `detail`.
+      const evt = new CustomEvent('psy-drop', {
+        bubbles: true,
+        detail: stateRef.current.payload,
+      });
+      // Find element under cursor
+      const el = document.elementFromPoint(
+        stateRef.current.position.x,
+        stateRef.current.position.y,
+      );
+      if (el) el.dispatchEvent(evt);
+
+      setState({ payload: null, position: { x: 0, y: 0 } });
+    };
+
+    document.addEventListener('mousemove', onMove, { passive: false });
+    document.addEventListener('mouseup', onUp);
+
+    // Add a class so CSS can show grab cursor and suppress selection
+    document.body.classList.add('psy-dragging');
+
+    return () => {
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup', onUp);
+      document.body.classList.remove('psy-dragging');
+    };
+  }, [state.payload !== null]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const ctxValue: DragDropContextValue = {
+    startDrag,
+    payload: state.payload,
+    isDragging: state.payload !== null,
+  };
+
+  return (
+    <Ctx.Provider value={ctxValue}>
+      {children}
+      <DragGhost state={state} />
+    </Ctx.Provider>
+  );
+}
+
+// ── useDragSource hook ────────────────────────────────────────────
+const DRAG_THRESHOLD = 5; // px before drag starts
+
+/**
+ * Returns an onMouseDown handler for a draggable element.
+ * Usage:  <div {...useDragSource(payload)} />
+ */
+export function useDragSource(getPayload: () => DragPayload) {
+  const { startDrag } = useDragDrop();
+  const startPosRef = useRef<{ x: number; y: number } | null>(null);
+  const payloadRef = useRef(getPayload);
+  payloadRef.current = getPayload;
+
+  const onMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      // Only left-click
+      if (e.button !== 0) return;
+      // Prevent the browser from starting a text-selection drag during the
+      // threshold detection phase (mousedown → mousemove before startDrag).
+      e.preventDefault();
+
+      const startX = e.clientX;
+      const startY = e.clientY;
+      startPosRef.current = { x: startX, y: startY };
+
+      const onMove = (me: MouseEvent) => {
+        if (!startPosRef.current) return;
+        const dx = me.clientX - startX;
+        const dy = me.clientY - startY;
+        if (Math.abs(dx) > DRAG_THRESHOLD || Math.abs(dy) > DRAG_THRESHOLD) {
+          startPosRef.current = null;
+          document.removeEventListener('mousemove', onMove);
+          document.removeEventListener('mouseup', onUp);
+          startDrag(payloadRef.current(), me.clientX, me.clientY);
+        }
+      };
+
+      const onUp = () => {
+        startPosRef.current = null;
+        document.removeEventListener('mousemove', onMove);
+        document.removeEventListener('mouseup', onUp);
+      };
+
+      document.addEventListener('mousemove', onMove);
+      document.addEventListener('mouseup', onUp);
+    },
+    [startDrag],
+  );
+
+  return { onMouseDown };
+}
@@ -0,0 +1,354 @@
+import React, { useEffect, useState } from 'react';
+import { useSearchParams, useNavigate } from 'react-router-dom';
+import { Play, SlidersHorizontal } from 'lucide-react';
+import {
+  search, getGenres, getAlbumsByGenre, getAlbumList, getRandomSongs,
+  SubsonicGenre, SubsonicArtist, SubsonicAlbum, SubsonicSong,
+} from '../api/subsonic';
+import { usePlayerStore, songToTrack } from '../store/playerStore';
+import { useTranslation } from 'react-i18next';
+import AlbumRow from '../components/AlbumRow';
+import ArtistRow from '../components/ArtistRow';
+import CustomSelect from '../components/CustomSelect';
+import { useDragDrop } from '../contexts/DragDropContext';
+
+type ResultType = 'all' | 'artists' | 'albums' | 'songs';
+
+interface SearchOpts {
+  query: string;
+  genre: string;
+  yearFrom: string;
+  yearTo: string;
+  resultType: ResultType;
+}
+
+interface Results {
+  artists: SubsonicArtist[];
+  albums: SubsonicAlbum[];
+  songs: SubsonicSong[];
+}
+
+export default function AdvancedSearch() {
+  const { t } = useTranslation();
+  const [params] = useSearchParams();
+  const navigate = useNavigate();
+  const psyDrag = useDragDrop();
+  const playTrack = usePlayerStore(s => s.playTrack);
+  const openContextMenu = usePlayerStore(s => s.openContextMenu);
+
+  const [query, setQuery] = useState(params.get('q') ?? '');
+  const [genre, setGenre] = useState('');
+  const [yearFrom, setYearFrom] = useState('');
+  const [yearTo, setYearTo] = useState('');
+  const [resultType, setResultType] = useState<ResultType>('all');
+  const [genres, setGenres] = useState<SubsonicGenre[]>([]);
+  const [results, setResults] = useState<Results | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [hasSearched, setHasSearched] = useState(false);
+  const [genreNote, setGenreNote] = useState(false);
+
+  const runSearch = async (opts: SearchOpts) => {
+    setLoading(true);
+    setHasSearched(true);
+    setGenreNote(false);
+    const { query: q, genre: g, yearFrom: yf, yearTo: yt, resultType: rt } = opts;
+    const from = yf ? parseInt(yf) : null;
+    const to = yt ? parseInt(yt) : null;
+
+    let artists: SubsonicArtist[] = [];
+    let albums: SubsonicAlbum[] = [];
+    let songs: SubsonicSong[] = [];
+
+    try {
+      if (q.trim()) {
+        const r = await search(q.trim(), { artistCount: 30, albumCount: 50, songCount: 100 });
+        artists = r.artists;
+        albums = r.albums;
+        songs = r.songs;
+
+        if (g) {
+          albums = albums.filter(a => a.genre?.toLowerCase() === g.toLowerCase());
+          songs = songs.filter(s => s.genre?.toLowerCase() === g.toLowerCase());
+        }
+        if (from !== null) {
+          albums = albums.filter(a => !a.year || a.year >= from);
+          songs = songs.filter(s => !s.year || s.year >= from);
+        }
+        if (to !== null) {
+          albums = albums.filter(a => !a.year || a.year <= to);
+          songs = songs.filter(s => !s.year || s.year <= to);
+        }
+      } else if (g) {
+        const [albumRes, songRes] = await Promise.all([
+          rt === 'songs' || rt === 'artists' ? Promise.resolve([]) : getAlbumsByGenre(g, 50),
+          rt === 'albums' || rt === 'artists' ? Promise.resolve([]) : getRandomSongs(100, g),
+        ]);
+        albums = albumRes as SubsonicAlbum[];
+        songs = songRes as SubsonicSong[];
+        if (from !== null) albums = albums.filter(a => !a.year || a.year >= from);
+        if (to !== null) albums = albums.filter(a => !a.year || a.year <= to);
+        if (songs.length > 0) setGenreNote(true);
+      } else if (from !== null || to !== null) {
+        const fromYear = from ?? 1900;
+        const toYear = to ?? new Date().getFullYear();
+        albums = await getAlbumList('byYear', 100, 0, { fromYear, toYear });
+      }
+
+      setResults({
+        artists: rt === 'albums' || rt === 'songs' ? [] : artists,
+        albums: rt === 'artists' || rt === 'songs' ? [] : albums,
+        songs: rt === 'artists' || rt === 'albums' ? [] : songs,
+      });
+    } catch {
+      setResults({ artists: [], albums: [], songs: [] });
+    }
+    setLoading(false);
+  };
+
+  useEffect(() => {
+    getGenres().then(data =>
+      setGenres(data.sort((a, b) => a.value.localeCompare(b.value)))
+    ).catch(() => {});
+    const q = params.get('q') ?? '';
+    if (q) runSearch({ query: q, genre: '', yearFrom: '', yearTo: '', resultType: 'all' });
+  }, []);
+
+  const handleSubmit = (e?: React.FormEvent) => {
+    e?.preventDefault();
+    runSearch({ query, genre, yearFrom, yearTo, resultType });
+  };
+
+  const total = results
+    ? results.artists.length + results.albums.length + results.songs.length
+    : 0;
+
+  const typeOptions: { id: ResultType; label: string }[] = [
+    { id: 'all',     label: t('search.advancedAll') },
+    { id: 'artists', label: t('search.artists') },
+    { id: 'albums',  label: t('search.albums') },
+    { id: 'songs',   label: t('search.songs') },
+  ];
+
+  const genreSelectOptions = [
+    { value: '', label: t('search.advancedAllGenres') },
+    ...genres.map(g => ({ value: g.value, label: g.value })),
+  ];
+
+  return (
+    <div className="content-body animate-fade-in">
+      <div style={{ marginBottom: '1.5rem' }}>
+        <h1 className="page-title" style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+          <SlidersHorizontal size={22} style={{ color: 'var(--accent)', flexShrink: 0 }} />
+          {t('search.advanced')}
+        </h1>
+      </div>
+
+      {/* ── Filter panel ──────────────────────────────────────── */}
+      <form onSubmit={handleSubmit}>
+        <div className="settings-card" style={{ padding: '1.25rem', marginBottom: '2rem' }}>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.9rem' }}>
+
+            {/* Row 1: Search term */}
+            <div style={{ display: 'flex', gap: '0.75rem', alignItems: 'center' }}>
+              <span style={{ fontSize: 13, color: 'var(--text-muted)', minWidth: 90, flexShrink: 0 }}>
+                {t('search.advancedSearchTerm')}
+              </span>
+              <input
+                className="input"
+                type="text"
+                value={query}
+                onChange={e => setQuery(e.target.value)}
+                placeholder={t('search.advancedSearchPlaceholder')}
+                style={{ flex: 1 }}
+                autoFocus
+              />
+            </div>
+
+            {/* Row 2: Genre + Year */}
+            <div style={{ display: 'flex', gap: '0.75rem', alignItems: 'center', flexWrap: 'wrap' }}>
+              <span style={{ fontSize: 13, color: 'var(--text-muted)', minWidth: 90, flexShrink: 0 }}>
+                {t('search.advancedGenre')}
+              </span>
+              <div style={{ minWidth: 180 }}>
+                <CustomSelect
+                  value={genre}
+                  options={genreSelectOptions}
+                  onChange={setGenre}
+                />
+              </div>
+
+              <span style={{ fontSize: 13, color: 'var(--text-muted)', marginLeft: '0.75rem', flexShrink: 0 }}>
+                {t('search.advancedYear')}
+              </span>
+              <input
+                className="input"
+                type="number"
+                min={1900}
+                max={new Date().getFullYear()}
+                value={yearFrom}
+                onChange={e => setYearFrom(e.target.value)}
+                placeholder={t('search.advancedYearFrom')}
+                style={{ width: 76 }}
+              />
+              <span style={{ color: 'var(--text-muted)', fontSize: 14 }}>–</span>
+              <input
+                className="input"
+                type="number"
+                min={1900}
+                max={new Date().getFullYear()}
+                value={yearTo}
+                onChange={e => setYearTo(e.target.value)}
+                placeholder={t('search.advancedYearTo')}
+                style={{ width: 76 }}
+              />
+            </div>
+
+            {/* Row 3: Result type + Search button */}
+            <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap' }}>
+              <div style={{ display: 'flex', gap: '0.3rem', flexWrap: 'wrap' }}>
+                {typeOptions.map(opt => (
+                  <button
+                    key={opt.id}
+                    type="button"
+                    className={`btn ${resultType === opt.id ? 'btn-primary' : 'btn-surface'}`}
+                    style={{ fontSize: 12, padding: '4px 14px' }}
+                    onClick={() => setResultType(opt.id)}
+                  >
+                    {opt.label}
+                  </button>
+                ))}
+              </div>
+              <button
+                className="btn btn-primary"
+                type="submit"
+                disabled={loading}
+                style={{ minWidth: 100 }}
+              >
+                {loading
+                  ? <div className="spinner" style={{ width: 14, height: 14, borderWidth: 2 }} />
+                  : t('search.advancedSearch')
+                }
+              </button>
+            </div>
+          </div>
+        </div>
+      </form>
+
+      {/* ── Results ───────────────────────────────────────────── */}
+      {!hasSearched ? (
+        <div className="empty-state" style={{ opacity: 0.6 }}>
+          {t('search.advancedEmpty')}
+        </div>
+      ) : loading ? (
+        <div style={{ display: 'flex', justifyContent: 'center', padding: '4rem' }}>
+          <div className="spinner" />
+        </div>
+      ) : total === 0 ? (
+        <div className="empty-state">{t('search.advancedNoResults')}</div>
+      ) : (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '3rem' }}>
+
+          {results && results.artists.length > 0 && (
+            <ArtistRow
+              title={`${t('search.artists')} (${results.artists.length})`}
+              artists={results.artists}
+            />
+          )}
+
+          {results && results.albums.length > 0 && (
+            <AlbumRow
+              title={`${t('search.albums')} (${results.albums.length})`}
+              albums={results.albums}
+            />
+          )}
+
+          {results && results.songs.length > 0 && (
+            <section>
+              <h2 className="section-title" style={{ marginBottom: '0.75rem' }}>
+                {t('search.songs')} ({results.songs.length})
+                {genreNote && (
+                  <span style={{ fontSize: 12, fontWeight: 400, color: 'var(--text-muted)', marginLeft: '0.75rem' }}>
+                    — {t('search.advancedGenreNote')}
+                  </span>
+                )}
+              </h2>
+              <div className="tracklist">
+                <div className="tracklist-header" style={{ gridTemplateColumns: '32px 1fr 1fr 1fr 90px 70px' }}>
+                  <span />
+                  <span>{t('randomMix.trackTitle')}</span>
+                  <span>{t('randomMix.trackArtist')}</span>
+                  <span>{t('randomMix.trackAlbum')}</span>
+                  <span>{t('randomMix.trackGenre')}</span>
+                  <span style={{ textAlign: 'right' }}>{t('randomMix.trackDuration')}</span>
+                </div>
+                {results.songs.map(song => {
+                  const track = songToTrack(song);
+                  return (
+                    <div
+                      key={song.id}
+                      className="track-row"
+                      style={{ gridTemplateColumns: '32px 1fr 1fr 1fr 90px 70px' }}
+                      onDoubleClick={() => playTrack(track, results.songs.map(songToTrack))}
+                      role="row"
+                      onContextMenu={e => { e.preventDefault(); openContextMenu(e.clientX, e.clientY, track, 'song'); }}
+                      onMouseDown={e => {
+                        if (e.button !== 0) return;
+                        e.preventDefault();
+                        const sx = e.clientX, sy = e.clientY;
+                        const onMove = (me: MouseEvent) => {
+                          if (Math.abs(me.clientX - sx) > 5 || Math.abs(me.clientY - sy) > 5) {
+                            document.removeEventListener('mousemove', onMove);
+                            document.removeEventListener('mouseup', onUp);
+                            psyDrag.startDrag({ data: JSON.stringify({ type: 'song', track }), label: song.title }, me.clientX, me.clientY);
+                          }
+                        };
+                        const onUp = () => { document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseup', onUp); };
+                        document.addEventListener('mousemove', onMove);
+                        document.addEventListener('mouseup', onUp);
+                      }}
+                    >
+                      <button
+                        className="btn btn-ghost"
+                        style={{ padding: 4 }}
+                        onClick={e => { e.stopPropagation(); playTrack(track, results.songs.map(songToTrack)); }}
+                      >
+                        <Play size={13} fill="currentColor" />
+                      </button>
+                      <div className="track-info">
+                        <span className="track-title">{song.title}</span>
+                      </div>
+                      <div className="track-artist-cell">
+                        <span
+                          className="track-artist"
+                          style={{ cursor: song.artistId ? 'pointer' : 'default' }}
+                          onClick={() => song.artistId && navigate(`/artist/${song.artistId}`)}
+                        >
+                          {song.artist}
+                        </span>
+                      </div>
+                      <div className="track-info">
+                        <span
+                          className="track-title"
+                          style={{ fontSize: '0.85rem', color: 'var(--subtext0)', cursor: 'pointer' }}
+                          onClick={() => navigate(`/album/${song.albumId}`)}
+                        >
+                          {song.album}
+                        </span>
+                      </div>
+                      <div style={{ fontSize: 11, color: 'var(--text-muted)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                        {song.genre ?? '—'}
+                      </div>
+                      <span className="track-duration" style={{ textAlign: 'right' }}>
+                        {Math.floor(song.duration / 60)}:{(song.duration % 60).toString().padStart(2, '0')}
+                      </span>
+                    </div>
+                  );
+                })}
+              </div>
+            </section>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
@@ -1,8 +1,8 @@
-import React, { useEffect, useState, useCallback } from 'react';
+import React, { useEffect, useState, useCallback, useMemo } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { invoke } from '@tauri-apps/api/core';
 import { getAlbum, getArtist, getArtistInfo, setRating, buildCoverArtUrl, coverArtCacheKey, buildDownloadUrl, star, unstar, SubsonicSong, SubsonicAlbum } from '../api/subsonic';
-import { usePlayerStore } from '../store/playerStore';
+import { usePlayerStore, songToTrack } from '../store/playerStore';
 import { useAuthStore } from '../store/authStore';
 import { useDownloadModalStore } from '../store/downloadModalStore';
 import { useOfflineStore } from '../store/offlineStore';
@@ -89,40 +89,39 @@ export default function AlbumDetail() {
    }).catch(() => setLoading(false));
  }, [id]);

-  const handlePlayAll = () => {
-    if (!album) return;
-    const albumGenre = album.album.genre;
-    const tracks = album.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,
-      starred: s.starred, genre: s.genre ?? albumGenre,
-    }));
-    if (tracks[0]) playTrack(tracks[0], tracks);
-  };
+const handlePlayAll = () => {
+     if (!album) return;
+     const albumGenre = album.album.genre;
+     const tracks = album.songs.map(s => {
+       const t = songToTrack(s);
+       if (!t.genre && albumGenre) t.genre = albumGenre;
+       return t;
+     });
+     if (tracks[0]) playTrack(tracks[0], tracks);
+   };

-  const handleEnqueueAll = () => {
-    if (!album) return;
-    const albumGenre = album.album.genre;
-    const tracks = album.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,
-      starred: s.starred, genre: s.genre ?? albumGenre,
-    }));
-    enqueue(tracks);
-  };
+const handleEnqueueAll = () => {
+     if (!album) return;
+     const albumGenre = album.album.genre;
+     const tracks = album.songs.map(s => {
+       const t = songToTrack(s);
+       if (!t.genre && albumGenre) t.genre = albumGenre;
+       return t;
+     });
+     enqueue(tracks);
+   };

-  const handlePlaySong = (song: SubsonicSong) => {
-    const albumGenre = album?.album.genre;
-    const track = {
-      id: song.id, title: song.title, artist: song.artist, album: song.album,
-      albumId: song.albumId, artistId: song.artistId, duration: song.duration, coverArt: song.coverArt,
-      track: song.track, year: song.year, bitRate: song.bitRate, suffix: song.suffix, userRating: song.userRating,
-      starred: song.starred, genre: song.genre ?? albumGenre,
-    };
-    playTrack(track, [track]);
-  };
+   const handlePlaySong = (song: SubsonicSong) => {
+     if (!album) return;
+     const albumGenre = album.album.genre;
+     const tracks = album.songs.map(s => {
+       const t = songToTrack(s);
+       if (!t.genre && albumGenre) t.genre = albumGenre;
+       return t;
+     });
+     const track = tracks.find(t => t.id === song.id) || songToTrack(song);
+     playTrack(track, tracks);
+   };

  const handleRate = async (songId: string, rating: number) => {
    setRatings(r => ({ ...r, [songId]: rating }));
@@ -232,9 +231,12 @@ export default function AlbumDetail() {
    deleteAlbum(album.album.id, serverId);
  };

-  // Hooks must be called unconditionally — derive from nullable album state
-  const coverUrl = album?.album.coverArt ? buildCoverArtUrl(album.album.coverArt, 400) : '';
-  const coverKey = album?.album.coverArt ? coverArtCacheKey(album.album.coverArt, 400) : '';
+  // Hooks must be called unconditionally — derive from nullable album state.
+  // useMemo is required: buildCoverArtUrl generates a new salt on every call, so without
+  // memoization every re-render (e.g. currentTrack change) produces a new fetchUrl,
+  // which cancels and restarts the useCachedUrl effect → background never resolves.
+  const coverUrl = useMemo(() => album?.album.coverArt ? buildCoverArtUrl(album.album.coverArt, 400) : '', [album?.album.coverArt]);
+  const coverKey = useMemo(() => album?.album.coverArt ? coverArtCacheKey(album.album.coverArt, 400) : '', [album?.album.coverArt]);
  const resolvedCoverUrl = useCachedUrl(coverUrl, coverKey);

  if (loading) return <div className="loading-center"><div className="spinner" /></div>;
@@ -4,9 +4,9 @@ import { getArtist, getArtistInfo, getTopSongs, getSimilarSongs2, search, Subson
 import AlbumCard from '../components/AlbumCard';
 import CachedImage from '../components/CachedImage';
 import CoverLightbox from '../components/CoverLightbox';
-import { ArrowLeft, Users, ExternalLink, Star, Play, Shuffle, Radio } from 'lucide-react';
+import { ArrowLeft, Users, ExternalLink, Heart, Play, Shuffle, Radio } from 'lucide-react';
 import { open } from '@tauri-apps/plugin-shell';
-import { usePlayerStore } from '../store/playerStore';
+import { usePlayerStore, songToTrack } from '../store/playerStore';
 import { useTranslation } from 'react-i18next';
 import { lastfmGetSimilarArtists, lastfmIsConfigured } from '../api/lastfm';
 import LastfmIcon from '../components/LastfmIcon';
@@ -283,7 +283,7 @@ export default function ArtistDetail() {
              data-tooltip={isStarred ? t('artistDetail.favoriteRemove') : t('artistDetail.favoriteAdd')}
              style={{ color: isStarred ? 'var(--accent)' : 'inherit', border: isStarred ? '1px solid var(--accent)' : undefined }}
            >
-              <Star size={14} fill={isStarred ? "currentColor" : "none"} />
+              <Heart size={14} fill={isStarred ? "currentColor" : "none"} />
              {t('artistDetail.favorite')}
            </button>
          </div>
@@ -330,22 +330,19 @@ export default function ArtistDetail() {
              <div>{t('artistDetail.trackAlbum')}</div>
              <div style={{ textAlign: 'right' }}>{t('artistDetail.trackDuration')}</div>
            </div>
-            {topSongs.map((song, idx) => (
-              <div
-                key={song.id}
-                className="track-row"
-                style={{ gridTemplateColumns: '36px minmax(150px, 2fr) minmax(100px, 1fr) 60px' }}
-                onDoubleClick={() => playTrack(song, topSongs)}
-                onContextMenu={(e) => {
-                  e.preventDefault();
-                  const track = {
-                    id: song.id, title: song.title, artist: song.artist, album: song.album,
-                    albumId: song.albumId, artistId: song.artistId, duration: song.duration, coverArt: song.coverArt, track: song.track,
-                    year: song.year, bitRate: song.bitRate, suffix: song.suffix, userRating: song.userRating, starred: song.starred,
-                  };
-                  openContextMenu(e.clientX, e.clientY, track, 'song');
-                }}
-              >
+             {topSongs.map((song, idx) => {
+                   const track = songToTrack(song);
+                   return (
+                     <div
+                       key={song.id}
+                       className="track-row"
+                       style={{ gridTemplateColumns: '36px minmax(150px, 2fr) minmax(100px, 1fr) 60px' }}
+                       onDoubleClick={() => playTrack(track, topSongs.map(songToTrack))}
+                       onContextMenu={(e) => {
+                         e.preventDefault();
+                         openContextMenu(e.clientX, e.clientY, track, 'song');
+                       }}
+                     >
                <div className="track-num" style={{ textAlign: 'center' }}>{idx + 1}</div>
                <div className="track-info" style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
                  {song.coverArt && (
@@ -365,13 +362,14 @@ export default function ArtistDetail() {
                  {song.album}
                </div>
                <div className="track-duration" style={{ textAlign: 'right' }}>
-                  {formatDuration(song.duration)}
-                </div>
-              </div>
-            ))}
-          </div>
-        </>
-      )}
+                {formatDuration(song.duration)}
+                 </div>
+               </div>
+               );
+             })}
+           </div>
+         </>
+       )}

      {/* Similar Artists (Last.fm) */}
      {lastfmIsConfigured() && (similarLoading || similarArtists.length > 0) && (
@@ -2,11 +2,12 @@ import React, { useEffect, useState } from 'react';
 import AlbumRow from '../components/AlbumRow';
 import ArtistRow from '../components/ArtistRow';
 import { getStarred, SubsonicAlbum, SubsonicArtist, SubsonicSong } from '../api/subsonic';
-import { usePlayerStore } from '../store/playerStore';
-import { ListPlus, X } from 'lucide-react';
+import { usePlayerStore, songToTrack } from '../store/playerStore';
+import { ListPlus, Play, X } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { unstar } from '../api/subsonic';
+import { useDragDrop } from '../contexts/DragDropContext';

 export default function Favorites() {
  const { t } = useTranslation();
@@ -16,6 +17,7 @@ export default function Favorites() {
  const [loading, setLoading] = useState(true);

  const { playTrack, enqueue } = usePlayerStore();
+  const psyDrag = useDragDrop();

  function removeSong(id: string) {
    unstar(id, 'song').catch(() => {});
@@ -67,14 +69,20 @@ export default function Favorites() {
            <section className="album-row-section">
              <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '0.75rem' }}>
                <h2 className="section-title" style={{ margin: 0 }}>{t('favorites.songs')}</h2>
+                <button
+                  className="btn btn-primary"
+                  onClick={() => {
+                    const tracks = songs.map(songToTrack);
+                    playTrack(tracks[0], tracks);
+                  }}
+                >
+                  <Play size={15} />
+                  {t('favorites.playAll')}
+                </button>
                <button
                  className="btn btn-surface"
                  onClick={() => {
-                    const tracks = 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, genre: s.genre,
-                    }));
+                    const tracks = songs.map(songToTrack);
                    enqueue(tracks);
                  }}
                >
@@ -91,26 +99,32 @@ export default function Favorites() {
                  <div />
                </div>
                {songs.map((song, i) => {
-                  const track = {
-                    id: song.id, title: song.title, artist: song.artist, album: song.album,
-                    albumId: song.albumId, artistId: song.artistId, duration: song.duration, coverArt: song.coverArt,
-                    track: song.track, year: song.year, bitRate: song.bitRate, suffix: song.suffix, userRating: song.userRating, starred: song.starred, genre: song.genre,
-                  };
+                  const track = songToTrack(song);
                  return (
                    <div
                      key={song.id}
                      className="track-row track-row-va"
                      style={{ gridTemplateColumns: '40px 1fr 1fr 60px 32px' }}
-                      onDoubleClick={() => playTrack(song, songs)}
+                      onDoubleClick={() => playTrack(track, songs.map(songToTrack))}
                      onContextMenu={e => { e.preventDefault(); openContextMenu(e.clientX, e.clientY, track, 'song'); }}
                      role="row"
-                      draggable
-                      onDragStart={e => {
-                        e.dataTransfer.effectAllowed = 'copy';
-                        e.dataTransfer.setData('text/plain', JSON.stringify({ type: 'song', track }));
+                      onMouseDown={e => {
+                        if (e.button !== 0) return;
+                        e.preventDefault();
+                        const sx = e.clientX, sy = e.clientY;
+                        const onMove = (me: MouseEvent) => {
+                          if (Math.abs(me.clientX - sx) > 5 || Math.abs(me.clientY - sy) > 5) {
+                            document.removeEventListener('mousemove', onMove);
+                            document.removeEventListener('mouseup', onUp);
+                            psyDrag.startDrag({ data: JSON.stringify({ type: 'song', track }), label: song.title }, me.clientX, me.clientY);
+                          }
+                        };
+                        const onUp = () => { document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseup', onUp); };
+                        document.addEventListener('mousemove', onMove);
+                        document.addEventListener('mouseup', onUp);
                      }}
                    >
-                      <div className="track-num col-center" onClick={() => playTrack(song, songs)} style={{ cursor: 'pointer' }}>
+                      <div className="track-num col-center" onClick={() => playTrack(track, songs.map(songToTrack))} style={{ cursor: 'pointer' }}>
                        {i + 1}
                      </div>
                      <div className="track-info">
@@ -46,7 +46,6 @@ export default function Help() {
        { q: t('help.q24'), a: t('help.a24') },
        { q: t('help.q29'), a: t('help.a29') },
        { q: t('help.q30'), a: t('help.a30') },
-        { q: t('help.q33'), a: t('help.a33') },
      ],
    },
    {
@@ -4,13 +4,18 @@ import AlbumRow from '../components/AlbumRow';
 import { getAlbumList, getArtists, SubsonicAlbum, SubsonicArtist } from '../api/subsonic';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
+import { useHomeStore } from '../store/homeStore';

 export default function Home() {
+  const homeSections = useHomeStore(s => s.sections);
+  const isVisible = (id: string) => homeSections.find(s => s.id === id)?.visible ?? true;
+
  const [starred, setStarred] = useState<SubsonicAlbum[]>([]);
  const [recent, setRecent] = useState<SubsonicAlbum[]>([]);
  const [random, setRandom] = useState<SubsonicAlbum[]>([]);
  const [heroAlbums, setHeroAlbums] = useState<SubsonicAlbum[]>([]);
  const [mostPlayed, setMostPlayed] = useState<SubsonicAlbum[]>([]);
+  const [recentlyPlayed, setRecentlyPlayed] = useState<SubsonicAlbum[]>([]);
  const [randomArtists, setRandomArtists] = useState<SubsonicArtist[]>([]);
  const [loading, setLoading] = useState(true);

@@ -20,13 +25,15 @@ export default function Home() {
      getAlbumList('newest', 12).catch(() => []),
      getAlbumList('random', 20).catch(() => []),
      getAlbumList('frequent', 12).catch(() => []),
-      getArtists().catch(() => []),
-    ]).then(([s, n, r, f, artists]) => {
+      getAlbumList('recent', 12).catch(() => []),
+      isVisible('discoverArtists') ? getArtists().catch(() => []) : Promise.resolve<SubsonicArtist[]>([]),
+    ]).then(([s, n, r, f, rp, artists]) => {
      setStarred(s);
      setRecent(n);
      setHeroAlbums(r.slice(0, 8));
      setRandom(r.slice(8));
      setMostPlayed(f);
+      setRecentlyPlayed(rp);
      // Pick 16 random artists via Fisher-Yates shuffle
      const shuffled = [...artists];
      for (let i = shuffled.length - 1; i > 0; i--) {
@@ -39,7 +46,7 @@ export default function Home() {
  }, []);

  const loadMore = async (
-    type: 'starred' | 'newest' | 'random' | 'frequent',
+    type: 'starred' | 'newest' | 'random' | 'frequent' | 'recent',
    currentList: SubsonicAlbum[],
    setter: React.Dispatch<React.SetStateAction<SubsonicAlbum[]>>
  ) => {
@@ -57,7 +64,7 @@ export default function Home() {

  return (
    <div className="animate-fade-in">
-      <Hero albums={heroAlbums} />
+      {isVisible('hero') && <Hero albums={heroAlbums} />}

      <div className="content-body" style={{ display: 'flex', flexDirection: 'column', gap: '3rem' }}>
        {loading ? (
@@ -66,19 +73,23 @@ export default function Home() {
          </div>
        ) : (
          <>
-            <AlbumRow
-              title={t('home.recent')}
-              albums={recent}
-              onLoadMore={() => loadMore('newest', recent, setRecent)}
-              moreText={t('home.loadMore')}
-            />
-            <AlbumRow
-              title={t('home.discover')}
-              albums={random}
-              onLoadMore={() => loadMore('random', random, setRandom)}
-              moreText={t('home.discoverMore')}
-            />
-            {randomArtists.length > 0 && (
+            {isVisible('recent') && (
+              <AlbumRow
+                title={t('home.recent')}
+                albums={recent}
+                onLoadMore={() => loadMore('newest', recent, setRecent)}
+                moreText={t('home.loadMore')}
+              />
+            )}
+            {isVisible('discover') && (
+              <AlbumRow
+                title={t('home.discover')}
+                albums={random}
+                onLoadMore={() => loadMore('random', random, setRandom)}
+                moreText={t('home.discoverMore')}
+              />
+            )}
+            {isVisible('discoverArtists') && randomArtists.length > 0 && (
              <section className="album-row-section">
                <div className="album-row-header">
                  <h2 className="section-title" style={{ marginBottom: 0 }}>{t('home.discoverArtists')}</h2>
@@ -96,7 +107,15 @@ export default function Home() {
                </div>
              </section>
            )}
-            {starred.length > 0 && (
+            {isVisible('recentlyPlayed') && recentlyPlayed.length > 0 && (
+              <AlbumRow
+                title={t('home.recentlyPlayed')}
+                albums={recentlyPlayed}
+                onLoadMore={() => loadMore('recent', recentlyPlayed, setRecentlyPlayed)}
+                moreText={t('home.loadMore')}
+              />
+            )}
+            {isVisible('starred') && starred.length > 0 && (
              <AlbumRow
                title={t('home.starred')}
                albums={starred}
@@ -104,12 +123,14 @@ export default function Home() {
                moreText={t('home.loadMore')}
              />
            )}
-            <AlbumRow
-              title={t('home.mostPlayed')}
-              albums={mostPlayed}
-              onLoadMore={() => loadMore('frequent', mostPlayed, setMostPlayed)}
-              moreText={t('home.loadMore')}
-            />
+            {isVisible('mostPlayed') && (
+              <AlbumRow
+                title={t('home.mostPlayed')}
+                albums={mostPlayed}
+                onLoadMore={() => loadMore('frequent', mostPlayed, setMostPlayed)}
+                moreText={t('home.loadMore')}
+              />
+            )}
          </>
        )}
      </div>
@@ -18,20 +18,23 @@ export default function OfflineLibrary() {

  const albums = Object.values(offlineAlbums).filter(a => a.serverId === serverId);

-  const buildTracks = (albumId: string) => {
-    const meta = offlineAlbums[`${serverId}:${albumId}`];
-    if (!meta) return [];
-    return meta.trackIds.flatMap(tid => {
-      const t = offlineTracks[`${serverId}:${tid}`];
-      if (!t) return [];
-      return [{
-        id: t.id, title: t.title, artist: t.artist, album: t.album,
-        albumId: t.albumId, artistId: t.artistId, duration: t.duration,
-        coverArt: t.coverArt, track: undefined, year: t.year,
-        bitRate: t.bitRate, suffix: t.suffix, genre: t.genre,
-      }];
-    });
-  };
+const buildTracks = (albumId: string) => {
+     const meta = offlineAlbums[`${serverId}:${albumId}`];
+     if (!meta) return [];
+     return meta.trackIds.flatMap(tid => {
+       const t = offlineTracks[`${serverId}:${tid}`];
+       if (!t) return [];
+       return [{
+         id: t.id, title: t.title, artist: t.artist, album: t.album,
+         albumId: t.albumId, artistId: t.artistId, duration: t.duration,
+         coverArt: t.coverArt, track: undefined, year: t.year,
+         bitRate: t.bitRate, suffix: t.suffix, genre: t.genre,
+         replayGainTrackDb: t.replayGainTrackDb,
+         replayGainAlbumDb: t.replayGainAlbumDb,
+         replayGainPeak: t.replayGainPeak,
+       }];
+     });
+   };

  const handlePlay = (albumId: string) => {
    const tracks = buildTracks(albumId);
@@ -0,0 +1,740 @@
+import React, { useEffect, useState, useRef, useCallback, useMemo } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { ChevronLeft, Play, ListPlus, Trash2, Search, X, Loader2, Plus, GripVertical, Star, RefreshCw, Shuffle } from 'lucide-react';
+import { AddToPlaylistSubmenu } from '../components/ContextMenu';
+import {
+  getPlaylist, updatePlaylist, search, setRating, star, unstar,
+  getRandomSongs, SubsonicPlaylist, SubsonicSong,
+} from '../api/subsonic';
+import { usePlayerStore, songToTrack } from '../store/playerStore';
+import { usePlaylistStore } from '../store/playlistStore';
+import { useDragDrop } from '../contexts/DragDropContext';
+import CachedImage, { useCachedUrl } from '../components/CachedImage';
+import { coverArtCacheKey, buildCoverArtUrl } from '../api/subsonic';
+import { useTranslation } from 'react-i18next';
+
+function formatDuration(seconds: number): string {
+  const m = Math.floor(seconds / 60);
+  const s = seconds % 60;
+  return `${m}:${String(s).padStart(2, '0')}`;
+}
+
+function totalDurationLabel(songs: SubsonicSong[]): string {
+  const total = songs.reduce((acc, s) => acc + (s.duration ?? 0), 0);
+  const h = Math.floor(total / 3600);
+  const m = Math.floor((total % 3600) / 60);
+  return h > 0 ? `${h}h ${m}m` : `${m}m`;
+}
+
+function codecLabel(song: SubsonicSong): 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 [hover, setHover] = React.useState(0);
+  return (
+    <div className="star-rating">
+      {[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)}
+        >★</button>
+      ))}
+    </div>
+  );
+}
+
+export default function PlaylistDetail() {
+  const { id } = useParams<{ id: string }>();
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { playTrack, enqueue, openContextMenu, currentTrack, isPlaying } = usePlayerStore();
+  const touchPlaylist = usePlaylistStore((s) => s.touchPlaylist);
+  const { startDrag, isDragging } = useDragDrop();
+
+  const [playlist, setPlaylist] = useState<SubsonicPlaylist | null>(null);
+  const [songs, setSongs] = useState<SubsonicSong[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [ratings, setRatings] = useState<Record<string, number>>({});
+  const [starredSongs, setStarredSongs] = useState<Set<string>>(new Set());
+  const [hoveredSongId, setHoveredSongId] = useState<string | null>(null);
+  const [hoveredSuggestionId, setHoveredSuggestionId] = useState<string | null>(null);
+  const [contextMenuSongId, setContextMenuSongId] = useState<string | null>(null);
+  const contextMenuOpen = usePlayerStore(s => s.contextMenu.isOpen);
+
+  // ── Bulk select ───────────────────────────────────────────────────
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+  const [lastSelectedIdx, setLastSelectedIdx] = useState<number | null>(null);
+  const [showBulkPlPicker, setShowBulkPlPicker] = useState(false);
+
+  const toggleSelect = (id: string, idx: number, shift: boolean) => {
+    setSelectedIds(prev => {
+      const next = new Set(prev);
+      if (shift && lastSelectedIdx !== null) {
+        const from = Math.min(lastSelectedIdx, idx);
+        const to = Math.max(lastSelectedIdx, idx);
+        songs.slice(from, to + 1).forEach(s => next.add(s.id));
+      } else {
+        next.has(id) ? next.delete(id) : next.add(id);
+      }
+      return next;
+    });
+    setLastSelectedIdx(idx);
+  };
+
+  const allSelected = selectedIds.size === songs.length && songs.length > 0;
+  const toggleAll = () => setSelectedIds(allSelected ? new Set() : new Set(songs.map(s => s.id)));
+
+  const bulkRemove = () => {
+    const next = songs.filter(s => !selectedIds.has(s.id));
+    setSongs(next);
+    savePlaylist(next);
+    setSelectedIds(new Set());
+  };
+
+  useEffect(() => {
+    if (!showBulkPlPicker) return;
+    const handler = (e: MouseEvent) => {
+      if (!(e.target as HTMLElement).closest('.bulk-pl-picker-wrap')) setShowBulkPlPicker(false);
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [showBulkPlPicker]);
+
+  // ── 2×2 cover quad (first 4 unique album covers) ─────────────
+  const coverQuad = useMemo(() => {
+    const seen = new Set<string>();
+    const result: string[] = [];
+    for (const s of songs) {
+      if (s.coverArt && !seen.has(s.coverArt)) {
+        seen.add(s.coverArt);
+        result.push(s.coverArt);
+        if (result.length === 4) break;
+      }
+    }
+    return result;
+  }, [songs]);
+
+  // Stable fetch URLs + cache keys for the 2×2 grid and blurred background.
+  // buildCoverArtUrl generates a new crypto salt on every call, so these MUST
+  // be memoized — otherwise every render produces new URLs, useCachedUrl
+  // re-triggers, state updates, another render → infinite flicker loop.
+  const coverQuadUrls = useMemo(() =>
+    Array.from({ length: 4 }, (_, i) => {
+      const coverId = coverQuad[i % Math.max(1, coverQuad.length)];
+      if (!coverId) return null;
+      return { src: buildCoverArtUrl(coverId, 200), cacheKey: coverArtCacheKey(coverId, 200) };
+    }),
+  [coverQuad]);
+
+  const bgFetchUrl = useMemo(() => buildCoverArtUrl(coverQuad[0] ?? '', 300), [coverQuad]);
+  const bgCacheKey = useMemo(() => coverArtCacheKey(coverQuad[0] ?? '', 300), [coverQuad]);
+  const resolvedBgUrl = useCachedUrl(bgFetchUrl, bgCacheKey);
+
+  // Song search
+  const [searchOpen, setSearchOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [searchResults, setSearchResults] = useState<SubsonicSong[]>([]);
+  const [searching, setSearching] = useState(false);
+  const searchDebounce = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // Suggestions
+  const [suggestions, setSuggestions] = useState<SubsonicSong[]>([]);
+  const [loadingSuggestions, setLoadingSuggestions] = useState(false);
+
+  // DnD
+  const tracklistRef = useRef<HTMLDivElement>(null);
+  const [dropTargetIdx, setDropTargetIdx] = useState<{ idx: number; before: boolean } | null>(null);
+
+  useEffect(() => {
+    if (!contextMenuOpen) setContextMenuSongId(null);
+  }, [contextMenuOpen]);
+
+  // ── Load ─────────────────────────────────────────────────────
+  useEffect(() => {
+    if (!id) return;
+    setLoading(true);
+    getPlaylist(id)
+      .then(({ playlist, songs }) => {
+        setPlaylist(playlist);
+        setSongs(songs);
+        const init: Record<string, number> = {};
+        const starred = new Set<string>();
+        songs.forEach(s => {
+          if (s.userRating) init[s.id] = s.userRating;
+          if (s.starred) starred.add(s.id);
+        });
+        setRatings(init);
+        setStarredSongs(starred);
+      })
+      .catch(() => {})
+      .finally(() => setLoading(false));
+  }, [id]);
+
+  // ── Suggestions ───────────────────────────────────────────────
+  const loadSuggestions = useCallback(async (currentSongs: SubsonicSong[]) => {
+    if (!currentSongs.length) return;
+    // Count genres across playlist songs, pick the most common one
+    const genreCounts: Record<string, number> = {};
+    for (const s of currentSongs) {
+      if (s.genre) genreCounts[s.genre] = (genreCounts[s.genre] ?? 0) + 1;
+    }
+    const genres = Object.entries(genreCounts).sort((a, b) => b[1] - a[1]);
+    // Fall back to no genre filter if none of the songs have genre tags
+    const genre = genres.length > 0 ? genres[Math.floor(Math.random() * Math.min(3, genres.length))][0] : undefined;
+    const existingIds = new Set(currentSongs.map(s => s.id));
+    setLoadingSuggestions(true);
+    setSuggestions([]);
+    try {
+      const random = await getRandomSongs(25, genre);
+      setSuggestions(random.filter(s => !existingIds.has(s.id)).slice(0, 10));
+    } catch {}
+    setLoadingSuggestions(false);
+  }, []);
+
+  useEffect(() => {
+    if (songs.length > 0) loadSuggestions(songs);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [playlist?.id]);
+
+  // ── Save ──────────────────────────────────────────────────────
+  const savePlaylist = useCallback(async (updatedSongs: SubsonicSong[]) => {
+    if (!id) return;
+    setSaving(true);
+    try {
+      await updatePlaylist(id, updatedSongs.map(s => s.id));
+      if (id) touchPlaylist(id);
+    } catch {}
+    setSaving(false);
+  }, [id, touchPlaylist]);
+
+  // ── Remove ────────────────────────────────────────────────────
+  const removeSong = (idx: number) => {
+    const next = songs.filter((_, i) => i !== idx);
+    setSongs(next);
+    savePlaylist(next);
+  };
+
+  // ── Add ───────────────────────────────────────────────────────
+  const addSong = (song: SubsonicSong) => {
+    if (songs.some(s => s.id === song.id)) return;
+    const next = [...songs, song];
+    setSongs(next);
+    savePlaylist(next);
+    setSuggestions(prev => prev.filter(s => s.id !== song.id));
+    setSearchResults(prev => prev.filter(s => s.id !== song.id));
+  };
+
+  // ── Rating / Star ─────────────────────────────────────────────
+  const handleRate = (songId: string, rating: number) => {
+    setRatings(prev => ({ ...prev, [songId]: rating }));
+    setRating(songId, rating).catch(() => {});
+  };
+
+  const handleToggleStar = (song: SubsonicSong, e: React.MouseEvent) => {
+    e.stopPropagation();
+    const isStarred = starredSongs.has(song.id);
+    setStarredSongs(prev => {
+      const next = new Set(prev);
+      isStarred ? next.delete(song.id) : next.add(song.id);
+      return next;
+    });
+    (isStarred ? unstar(song.id, 'song') : star(song.id, 'song')).catch(() => {});
+  };
+
+  // ── Search ────────────────────────────────────────────────────
+  useEffect(() => {
+    if (!searchOpen || !searchQuery.trim()) { setSearchResults([]); return; }
+    if (searchDebounce.current) clearTimeout(searchDebounce.current);
+    searchDebounce.current = setTimeout(async () => {
+      setSearching(true);
+      try {
+        const res = await search(searchQuery, { songCount: 20, artistCount: 0, albumCount: 0 });
+        const existingIds = new Set(songs.map(s => s.id));
+        setSearchResults(res.songs.filter(s => !existingIds.has(s.id)));
+      } catch {}
+      setSearching(false);
+    }, 350);
+    return () => { if (searchDebounce.current) clearTimeout(searchDebounce.current); };
+  }, [searchQuery, searchOpen, songs]);
+
+  // ── psy-drop DnD reordering ───────────────────────────────────
+  useEffect(() => {
+    const container = tracklistRef.current;
+    if (!container) return;
+
+    const onPsyDrop = (e: Event) => {
+      const detail = (e as CustomEvent).detail;
+      if (!detail?.data) return;
+      let parsed: any;
+      try { parsed = JSON.parse(detail.data); } catch { return; }
+      if (parsed.type !== 'playlist_reorder') return;
+
+      setDropTargetIdx(null);
+
+      const fromIdx: number = parsed.index;
+
+      // Determine drop index from the event target row
+      const target = (e.target as HTMLElement).closest('[data-track-idx]');
+      let toIdx = songs.length;
+      if (target) {
+        const targetIdx = parseInt(target.getAttribute('data-track-idx') ?? '', 10);
+        const rect = target.getBoundingClientRect();
+        const cursorY = (e as CustomEvent & { clientY?: number }).clientY ?? (rect.top + rect.height / 2);
+        const before = cursorY < rect.top + rect.height / 2;
+        toIdx = before ? targetIdx : targetIdx + 1;
+      }
+
+      if (fromIdx === toIdx || fromIdx === toIdx - 1) return;
+
+      setSongs(prev => {
+        const next = [...prev];
+        const [moved] = next.splice(fromIdx, 1);
+        const insertAt = toIdx > fromIdx ? toIdx - 1 : toIdx;
+        next.splice(insertAt, 0, moved);
+        savePlaylist(next);
+        return next;
+      });
+    };
+
+    container.addEventListener('psy-drop', onPsyDrop);
+    return () => container.removeEventListener('psy-drop', onPsyDrop);
+  }, [songs, savePlaylist]);
+
+  // ── Row mousedown: threshold drag for reorder (from anywhere on the row) ──
+  const handleRowMouseDown = (e: React.MouseEvent, idx: number) => {
+    if (e.button !== 0) return;
+    if ((e.target as HTMLElement).closest('button, input')) return;
+    e.preventDefault();
+    const sx = e.clientX, sy = e.clientY;
+    const onMove = (me: MouseEvent) => {
+      if (Math.abs(me.clientX - sx) > 5 || Math.abs(me.clientY - sy) > 5) {
+        document.removeEventListener('mousemove', onMove);
+        document.removeEventListener('mouseup', onUp);
+        startDrag(
+          { data: JSON.stringify({ type: 'playlist_reorder', index: idx }), label: songs[idx]?.title ?? '' },
+          me.clientX, me.clientY
+        );
+      }
+    };
+    const onUp = () => {
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup', onUp);
+    };
+    document.addEventListener('mousemove', onMove);
+    document.addEventListener('mouseup', onUp);
+  };
+
+  // ── Drag-over visual feedback ─────────────────────────────────
+  const handleRowMouseEnter = (idx: number, e: React.MouseEvent) => {
+    if (!isDragging) return;
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    const before = e.clientY < rect.top + rect.height / 2;
+    setDropTargetIdx({ idx, before });
+  };
+
+  // ── Render ────────────────────────────────────────────────────
+  if (loading) {
+    return (
+      <div className="content-body" style={{ display: 'flex', justifyContent: 'center', padding: '4rem' }}>
+        <div className="spinner" />
+      </div>
+    );
+  }
+
+  if (!playlist) {
+    return <div className="content-body"><div className="empty-state">{t('playlists.notFound')}</div></div>;
+  }
+
+  const existingIds = new Set(songs.map(s => s.id));
+
+  return (
+    <div className="content-body animate-fade-in">
+
+      {/* ── Hero ── */}
+      <div className="album-detail-header">
+        {resolvedBgUrl && (
+          <div className="album-detail-bg" style={{ backgroundImage: `url(${resolvedBgUrl})` }} 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('/playlists')}>
+            <ChevronLeft size={16} /> {t('playlists.title')}
+          </button>
+
+          <div className="album-detail-hero">
+            {/* 2×2 cover grid */}
+            <div className="playlist-cover-grid">
+              {coverQuadUrls.map((entry, i) =>
+                entry
+                  ? <CachedImage key={i} className="playlist-cover-cell" src={entry.src} cacheKey={entry.cacheKey} alt="" />
+                  : <div key={i} className="playlist-cover-cell playlist-cover-cell--empty" />
+              )}
+            </div>
+
+            <div className="album-detail-meta">
+              <span className="badge album-detail-badge">{t('playlists.titleBadge')}</span>
+              <h1 className="album-detail-title">{playlist.name}</h1>
+              <div className="album-detail-info">
+                <span>{t('playlists.songs', { n: songs.length })}</span>
+                {songs.length > 0 && <span>· {totalDurationLabel(songs)}</span>}
+                {saving && <Loader2 size={12} className="spin-slow" style={{ display: 'inline', marginLeft: 4 }} />}
+              </div>
+              <div className="album-detail-actions">
+                <div className="album-detail-actions-primary">
+                  <button className="btn btn-primary" disabled={songs.length === 0} onClick={() => {
+                    if (!songs.length) return;
+                    touchPlaylist(id!);
+                    const tracks = songs.map(songToTrack);
+                    playTrack(tracks[0], tracks);
+                  }}>
+                    <Play size={16} fill="currentColor" /> {t('playlists.playAll')}
+                  </button>
+                  <button className="btn btn-surface" disabled={songs.length === 0} onClick={() => {
+                    if (!songs.length) return;
+                    touchPlaylist(id!);
+                    const tracks = songs.map(songToTrack);
+                    const shuffled = [...tracks];
+                    for (let i = shuffled.length - 1; i > 0; i--) {
+                      const j = Math.floor(Math.random() * (i + 1));
+                      [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
+                    }
+                    playTrack(shuffled[0], shuffled);
+                  }}>
+                    <Shuffle size={16} /> {t('playlists.shuffle', 'Shuffle')}
+                  </button>
+                  <button className="btn btn-surface" disabled={songs.length === 0} onClick={() => {
+                    if (!songs.length) return;
+                    touchPlaylist(id!);
+                    enqueue(songs.map(songToTrack));
+                  }}>
+                    <ListPlus size={16} /> {t('playlists.addToQueue')}
+                  </button>
+                </div>
+                <button
+                  className={`btn btn-ghost ${searchOpen ? 'active' : ''}`}
+                  onClick={() => { setSearchOpen(v => !v); setSearchQuery(''); setSearchResults([]); }}
+                >
+                  <Search size={16} /> {t('playlists.addSongs')}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* ── Song search panel ── */}
+      {searchOpen && (
+        <div className="playlist-search-panel">
+          <div className="playlist-search-input-wrap">
+            <input
+              className="input"
+              placeholder={t('playlists.searchPlaceholder')}
+              value={searchQuery}
+              onChange={e => setSearchQuery(e.target.value)}
+              autoFocus
+            />
+            {searchQuery && (
+              <button className="live-search-clear" onClick={() => { setSearchQuery(''); setSearchResults([]); }}>
+                <X size={14} />
+              </button>
+            )}
+          </div>
+          {searching && <div style={{ textAlign: 'center', padding: '0.75rem' }}><div className="spinner" /></div>}
+          {!searching && searchQuery && searchResults.length === 0 && (
+            <div className="empty-state" style={{ padding: '0.5rem 0' }}>{t('playlists.noResults')}</div>
+          )}
+          {searchResults.map(song => (
+            <div key={song.id} className="playlist-search-row">
+              <CachedImage src={buildCoverArtUrl(song.coverArt ?? '', 40)} cacheKey={coverArtCacheKey(song.coverArt ?? '', 40)} alt="" className="playlist-search-thumb" />
+              <div className="playlist-search-info">
+                <span className="playlist-search-title">{song.title}</span>
+                <span className="playlist-search-artist">{song.artist} · <span className="playlist-search-album">{song.album}</span></span>
+              </div>
+              <span className="playlist-search-duration">{formatDuration(song.duration ?? 0)}</span>
+              <button
+                className="playlist-search-add-btn"
+                data-tooltip={t('playlists.addSong')}
+                onClick={() => addSong(song)}
+              >
+                <Plus size={14} />
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* ── Tracklist ── */}
+      <div className="tracklist" ref={tracklistRef}>
+
+        {/* Bulk action bar */}
+        {selectedIds.size > 0 && (
+          <div className="bulk-action-bar">
+            <span className="bulk-action-count">
+              {t('common.bulkSelected', { count: selectedIds.size })}
+            </span>
+            <div className="bulk-pl-picker-wrap">
+              <button
+                className="btn btn-surface btn-sm"
+                onClick={() => setShowBulkPlPicker(v => !v)}
+              >
+                <ListPlus size={14} />
+                {t('common.bulkAddToPlaylist')}
+              </button>
+              {showBulkPlPicker && (
+                <AddToPlaylistSubmenu
+                  songIds={[...selectedIds]}
+                  onDone={() => { setShowBulkPlPicker(false); setSelectedIds(new Set()); }}
+                  dropDown
+                />
+              )}
+            </div>
+            <button
+              className="btn btn-surface btn-sm"
+              style={{ color: 'var(--danger)' }}
+              onClick={bulkRemove}
+            >
+              <Trash2 size={14} />
+              {t('common.bulkRemoveFromPlaylist')}
+            </button>
+            <button
+              className="btn btn-ghost btn-sm"
+              onClick={() => setSelectedIds(new Set())}
+            >
+              <X size={13} />
+              {t('common.bulkClear')}
+            </button>
+          </div>
+        )}
+
+        {/* Header */}
+        <div className="tracklist-header tracklist-va tracklist-playlist">
+          <div className="col-center" style={{ cursor: songs.length > 0 ? 'pointer' : undefined }} onClick={songs.length > 0 ? toggleAll : undefined}>
+            {selectedIds.size > 0
+              ? <span className={`bulk-check${allSelected ? ' checked' : ''}`} />
+              : '#'}
+          </div>
+          <div>{t('albumDetail.trackTitle')}</div>
+          <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 />
+        </div>
+
+        {songs.length === 0 && (
+          <div className="empty-state" style={{ padding: '2rem 0' }}>{t('playlists.emptyPlaylist')}</div>
+        )}
+
+        {songs.map((song, idx) => (
+          <React.Fragment key={song.id + idx}>
+            {/* Drop indicator above row */}
+            {isDragging && dropTargetIdx?.idx === idx && dropTargetIdx.before && (
+              <div className="playlist-drop-indicator" />
+            )}
+
+            <div
+              data-track-idx={idx}
+              className={`track-row track-row-va tracklist-playlist${currentTrack?.id === song.id ? ' active' : ''}${contextMenuSongId === song.id ? ' context-active' : ''}${selectedIds.has(song.id) ? ' bulk-selected' : ''}`}
+              onMouseEnter={e => { setHoveredSongId(song.id); handleRowMouseEnter(idx, e); }}
+              onMouseLeave={() => setHoveredSongId(null)}
+              onMouseDown={e => handleRowMouseDown(e, idx)}
+              onDoubleClick={() => {
+                const tracks = songs.map(songToTrack);
+                playTrack(tracks[idx], tracks);
+              }}
+              onClick={e => {
+                if (selectedIds.size > 0 && !(e.target as HTMLElement).closest('button, input')) {
+                  toggleSelect(song.id, idx, e.shiftKey);
+                }
+              }}
+              onContextMenu={e => {
+                e.preventDefault();
+                setContextMenuSongId(song.id);
+                openContextMenu(e.clientX, e.clientY, songToTrack(song), 'album-song');
+              }}
+            >
+              {/* # — checkbox in select mode, grip/play on hover otherwise */}
+              {(() => {
+                const inSelectMode = selectedIds.size > 0;
+                return (
+                  <div
+                    className="track-num"
+                    style={{ cursor: 'pointer' }}
+                    onClick={e => {
+                      e.stopPropagation();
+                      if (inSelectMode || hoveredSongId === song.id) {
+                        toggleSelect(song.id, idx, e.shiftKey);
+                      } else {
+                        const tracks = songs.map(songToTrack);
+                        playTrack(tracks[idx], tracks);
+                      }
+                    }}
+                  >
+                    <span
+                      className={`bulk-check${selectedIds.has(song.id) ? ' checked' : ''}${(inSelectMode || hoveredSongId === song.id) ? ' bulk-check-visible' : ''}`}
+                      onClick={e => { e.stopPropagation(); toggleSelect(song.id, idx, e.shiftKey); }}
+                    />
+                    <span style={{ color: (hoveredSongId === song.id || currentTrack?.id === song.id) ? 'var(--accent)' : 'var(--text-muted)' }}>
+                      {hoveredSongId === song.id && currentTrack?.id !== song.id && !inSelectMode
+                        ? <GripVertical size={13} />
+                        : 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" />
+                            : idx + 1}
+                    </span>
+                  </div>
+                );
+              })()}
+
+              {/* Title */}
+              <div className="track-info">
+                <span className="track-title">{song.title}</span>
+              </div>
+
+              {/* Artist */}
+              <div className="track-artist-cell">
+                <span className="track-artist">{song.artist}</span>
+              </div>
+
+              {/* Favorite */}
+              <div className="track-star-cell">
+                <button
+                  className="btn btn-ghost track-star-btn"
+                  onClick={e => handleToggleStar(song, e)}
+                  style={{ color: starredSongs.has(song.id) ? 'var(--color-star-active, var(--accent))' : 'var(--color-star-inactive, var(--text-muted))' }}
+                >
+                  <Star size={14} fill={starredSongs.has(song.id) ? 'currentColor' : 'none'} />
+                </button>
+              </div>
+
+              {/* Rating */}
+              <StarRating value={ratings[song.id] ?? song.userRating ?? 0} onChange={r => handleRate(song.id, r)} />
+
+              {/* Duration */}
+              <div className="track-duration">{formatDuration(song.duration ?? 0)}</div>
+
+              {/* Format */}
+              <div className="track-meta">
+                {(song.suffix || song.bitRate) && <span className="track-codec">{codecLabel(song)}</span>}
+              </div>
+
+              {/* Delete */}
+              <div className="playlist-row-delete-cell">
+                <button
+                  className="playlist-row-delete-btn"
+                  onClick={e => { e.stopPropagation(); removeSong(idx); }}
+                  data-tooltip={t('playlists.removeSong')}
+                  data-tooltip-pos="left"
+                >
+                  <Trash2 size={13} />
+                </button>
+              </div>
+            </div>
+
+            {/* Drop indicator below last row or between rows */}
+            {isDragging && dropTargetIdx?.idx === idx && !dropTargetIdx.before && (
+              <div className="playlist-drop-indicator" />
+            )}
+          </React.Fragment>
+        ))}
+
+        {/* Total row */}
+        {songs.length > 0 && (
+          <div className="tracklist-total tracklist-va tracklist-playlist">
+            <span className="tracklist-total-label">{t('albumDetail.trackTotal')}</span>
+            <span className="tracklist-total-value">{formatDuration(songs.reduce((a, s) => a + (s.duration ?? 0), 0))}</span>
+          </div>
+        )}
+      </div>
+
+      {/* ── Suggestions ── */}
+      <div className="playlist-suggestions tracklist">
+        <div className="playlist-suggestions-header">
+          <h2 className="section-title" style={{ marginBottom: 0 }}>{t('playlists.suggestions')}</h2>
+          <button
+            className="btn btn-surface"
+            onClick={() => loadSuggestions(songs)}
+            disabled={loadingSuggestions || songs.length === 0}
+            data-tooltip={t('playlists.refreshSuggestions')}
+          >
+            <RefreshCw size={14} className={loadingSuggestions ? 'spin-slow' : ''} />
+            {t('playlists.refreshSuggestions')}
+          </button>
+        </div>
+
+        {!loadingSuggestions && suggestions.filter(s => !existingIds.has(s.id)).length === 0 && (
+          <div className="empty-state" style={{ padding: '1.5rem 0', fontSize: '0.85rem' }}>{t('playlists.noSuggestions')}</div>
+        )}
+
+        {suggestions.filter(s => !existingIds.has(s.id)).length > 0 && (
+          <>
+            <div className="tracklist-header tracklist-va tracklist-playlist" style={{ marginTop: 'var(--space-3)' }}>
+              <div className="col-center">#</div>
+              <div>{t('albumDetail.trackTitle')}</div>
+              <div>{t('albumDetail.trackArtist')}</div>
+              <div />
+              <div />
+              <div className="col-center">{t('albumDetail.trackDuration')}</div>
+              <div>{t('albumDetail.trackFormat')}</div>
+              <div />
+            </div>
+
+            {suggestions.filter(s => !existingIds.has(s.id)).map((song, idx) => (
+              <div
+                key={song.id}
+                className={`track-row track-row-va tracklist-playlist${contextMenuSongId === song.id ? ' context-active' : ''}`}
+                onMouseEnter={() => setHoveredSuggestionId(song.id)}
+                onMouseLeave={() => setHoveredSuggestionId(null)}
+                onDoubleClick={() => addSong(song)}
+                onContextMenu={e => {
+                  e.preventDefault();
+                  setContextMenuSongId(song.id);
+                  openContextMenu(e.clientX, e.clientY, songToTrack(song), 'album-song');
+                }}
+              >
+                <div className="track-num" style={{ color: 'var(--text-muted)' }}>
+                  {idx + 1}
+                </div>
+                <div className="track-info">
+                  <span className="track-title">{song.title}</span>
+                </div>
+                <div className="track-artist-cell">
+                  <span className="track-artist">{song.artist}</span>
+                </div>
+                {/* no star/rating for suggestions */}
+                <div />
+                <div />
+                <div className="track-duration">{formatDuration(song.duration ?? 0)}</div>
+                <div className="track-meta">
+                  {(song.suffix || song.bitRate) && <span className="track-codec">{codecLabel(song)}</span>}
+                </div>
+                <div className="playlist-row-delete-cell">
+                  <button
+                    className="playlist-row-delete-btn"
+                    style={{ color: hoveredSuggestionId === song.id ? 'var(--accent)' : undefined }}
+                    onClick={e => { e.stopPropagation(); addSong(song); }}
+                    data-tooltip={t('playlists.addSong')}
+                    data-tooltip-pos="left"
+                  >
+                    <Plus size={13} />
+                  </button>
+                </div>
+              </div>
+            ))}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,192 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { ListMusic, Play, Plus, Trash2, X } from 'lucide-react';
+import { getPlaylists, createPlaylist, deletePlaylist, SubsonicPlaylist, getPlaylist, buildCoverArtUrl, coverArtCacheKey } from '../api/subsonic';
+import { usePlayerStore, songToTrack } from '../store/playerStore';
+import { usePlaylistStore } from '../store/playlistStore';
+import CachedImage from '../components/CachedImage';
+import { useTranslation } from 'react-i18next';
+
+function formatDuration(seconds: number): string {
+  const h = Math.floor(seconds / 3600);
+  const m = Math.floor((seconds % 3600) / 60);
+  if (h > 0) return `${h}h ${m}m`;
+  return `${m}m`;
+}
+
+export default function Playlists() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { playTrack } = usePlayerStore();
+  const touchPlaylist = usePlaylistStore((s) => s.touchPlaylist);
+  const removeId = usePlaylistStore((s) => s.removeId);
+
+  const [playlists, setPlaylists] = useState<SubsonicPlaylist[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [creating, setCreating] = useState(false);
+  const [newName, setNewName] = useState('');
+  const [playingId, setPlayingId] = useState<string | null>(null);
+  const [deleteConfirmId, setDeleteConfirmId] = useState<string | null>(null);
+  const nameInputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    getPlaylists()
+      .then(setPlaylists)
+      .catch(() => {})
+      .finally(() => setLoading(false));
+  }, []);
+
+  useEffect(() => {
+    if (creating) nameInputRef.current?.focus();
+  }, [creating]);
+
+  const handleCreate = async () => {
+    const name = newName.trim() || t('playlists.unnamed');
+    try {
+      await createPlaylist(name);
+      const updated = await getPlaylists();
+      setPlaylists(updated);
+    } catch {}
+    setCreating(false);
+    setNewName('');
+  };
+
+  const handlePlay = async (e: React.MouseEvent, pl: SubsonicPlaylist) => {
+    e.stopPropagation();
+    if (playingId === pl.id) return;
+    setPlayingId(pl.id);
+    try {
+      const data = await getPlaylist(pl.id);
+      const tracks = data.songs.map(songToTrack);
+      if (tracks.length > 0) {
+        touchPlaylist(pl.id);
+        playTrack(tracks[0], tracks);
+      }
+    } catch {}
+    setPlayingId(null);
+  };
+
+  const handleDelete = async (e: React.MouseEvent, pl: SubsonicPlaylist) => {
+    e.stopPropagation();
+    if (deleteConfirmId !== pl.id) {
+      setDeleteConfirmId(pl.id);
+      return;
+    }
+    try {
+      await deletePlaylist(pl.id);
+      removeId(pl.id);
+      setPlaylists((prev) => prev.filter((p) => p.id !== pl.id));
+    } catch {}
+    setDeleteConfirmId(null);
+  };
+
+  if (loading) {
+    return (
+      <div className="content-body" style={{ display: 'flex', justifyContent: 'center', padding: '4rem' }}>
+        <div className="spinner" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="content-body animate-fade-in">
+
+      {/* ── Header row ── */}
+      <div className="playlists-header">
+        <h1 className="page-title" style={{ marginBottom: 0 }}>{t('playlists.title')}</h1>
+        <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
+          {creating ? (
+            <>
+              <input
+                ref={nameInputRef}
+                className="input"
+                style={{ width: 220 }}
+                placeholder={t('playlists.createName')}
+                value={newName}
+                onChange={(e) => setNewName(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') handleCreate();
+                  if (e.key === 'Escape') { setCreating(false); setNewName(''); }
+                }}
+              />
+              <button className="btn btn-primary" onClick={handleCreate}>
+                {t('playlists.create')}
+              </button>
+              <button className="btn btn-surface" onClick={() => { setCreating(false); setNewName(''); }}>
+                {t('playlists.cancel')}
+              </button>
+            </>
+          ) : (
+            <button className="btn btn-primary" onClick={() => setCreating(true)}>
+              <Plus size={15} /> {t('playlists.newPlaylist')}
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* ── Grid ── */}
+      {playlists.length === 0 ? (
+        <div className="empty-state">{t('playlists.empty')}</div>
+      ) : (
+        <div className="album-grid-wrap">
+          {playlists.map((pl) => (
+            <div
+              key={pl.id}
+              className="album-card"
+              onClick={() => navigate(`/playlists/${pl.id}`)}
+              onMouseLeave={() => { if (deleteConfirmId === pl.id) setDeleteConfirmId(null); }}
+            >
+              {/* Cover area — server collage or fallback icon */}
+              <div className="album-card-cover">
+                {pl.coverArt ? (
+                  <CachedImage
+                    src={buildCoverArtUrl(pl.coverArt, 256)}
+                    cacheKey={coverArtCacheKey(pl.coverArt, 256)}
+                    alt={pl.name}
+                    className="album-card-cover-img"
+                  />
+                ) : (
+                  <div className="album-card-cover-placeholder playlist-card-icon">
+                    <ListMusic size={48} strokeWidth={1.2} />
+                  </div>
+                )}
+
+                {/* Play overlay — same pattern as AlbumCard */}
+                <div className="album-card-play-overlay">
+                  <button
+                    className="album-card-details-btn"
+                    onClick={(e) => handlePlay(e, pl)}
+                    disabled={playingId === pl.id}
+                  >
+                    {playingId === pl.id
+                      ? <span className="spinner" style={{ width: 14, height: 14 }} />
+                      : <Play size={15} fill="currentColor" />
+                    }
+                  </button>
+                </div>
+
+                {/* Delete button — top-right corner */}
+                <button
+                  className={`playlist-card-delete ${deleteConfirmId === pl.id ? 'playlist-card-delete--confirm' : ''}`}
+                  onClick={(e) => handleDelete(e, pl)}
+                  data-tooltip={deleteConfirmId === pl.id ? t('playlists.confirmDelete') : t('playlists.deletePlaylist')}
+                  data-tooltip-pos="bottom"
+                >
+                  {deleteConfirmId === pl.id ? <Trash2 size={12} /> : <X size={12} />}
+                </button>
+              </div>
+
+              <div className="album-card-info">
+                <div className="album-card-title">{pl.name}</div>
+                <div className="album-card-artist">
+                  {t('playlists.songs', { n: pl.songCount })}
+                  {pl.duration > 0 && <> · {formatDuration(pl.duration)}</>}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
@@ -1,9 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import { getRandomSongs, getGenres, SubsonicSong, SubsonicGenre, star, unstar } from '../api/subsonic';
-import { usePlayerStore } from '../store/playerStore';
+import { usePlayerStore, songToTrack } from '../store/playerStore';
 import { useAuthStore } from '../store/authStore';
 import { Play, Star, RefreshCw, ChevronDown, ChevronUp } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
+import { useDragDrop } from '../contexts/DragDropContext';

 const AUDIOBOOK_GENRES = [
  'hörbuch', 'hoerbuch', 'hörspiel', 'hoerspiel',
@@ -12,23 +13,6 @@ const AUDIOBOOK_GENRES = [
  'fantasy', 'comedy', 'literature',
 ];

-interface SuperGenre {
-  id: string;
-  label: string;
-  keywords: string[];
-}
-
-const SUPER_GENRES: SuperGenre[] = [
-  { id: 'metal', label: 'Metal', keywords: ['metal', 'thrash', 'doom', 'sludge', 'hardcore', 'grindcore', 'deathcore', 'metalcore', 'stoner', 'crust', 'black', 'death'] },
-  { id: 'rock', label: 'Rock', keywords: ['rock', 'punk', 'grunge', 'alternative', 'indie', 'post-rock', 'prog', 'garage', 'psychedelic', 'shoegaze'] },
-  { id: 'pop', label: 'Pop', keywords: ['pop', 'synth-pop', 'dream pop', 'electropop', 'indie pop', 'dance pop'] },
-  { id: 'electronic', label: 'Electronic', keywords: ['electronic', 'techno', 'trance', 'ambient', 'edm', 'house', 'dubstep', 'drum and bass', 'dnb', 'electro', 'idm', 'synthwave', 'darkwave', 'industrial'] },
-  { id: 'jazz', label: 'Jazz', keywords: ['jazz', 'blues', 'soul', 'funk', 'swing', 'bebop', 'fusion'] },
-  { id: 'classical', label: 'Classical', keywords: ['classical', 'orchestra', 'symphony', 'baroque', 'opera', 'chamber', 'romantic'] },
-  { id: 'hiphop', label: 'Hip-Hop', keywords: ['hip-hop', 'hip hop', 'rap', 'r&b', 'rnb', 'trap', 'grime'] },
-  { id: 'country', label: 'Country', keywords: ['country', 'folk', 'bluegrass', 'americana', 'western'] },
-  { id: 'world', label: 'World', keywords: ['world', 'latin', 'reggae', 'ska', 'afro', 'celtic', 'flamenco', 'bossa nova'] },
-];

 function formatDuration(seconds: number): string {
  if (!seconds || isNaN(seconds)) return '0:00';
@@ -45,6 +29,7 @@ export default function RandomMix() {
  const openContextMenu = usePlayerStore(s => s.openContextMenu);
  const contextMenuOpen = usePlayerStore(s => s.contextMenu.isOpen);
  const [contextMenuSongId, setContextMenuSongId] = useState<string | null>(null);
+  const psyDrag = useDragDrop();
  const [starredSongs, setStarredSongs] = useState<Set<string>>(new Set());
  const { excludeAudiobooks, setExcludeAudiobooks, customGenreBlacklist, setCustomGenreBlacklist } = useAuthStore();
  const [addedGenre, setAddedGenre] = useState<string | null>(null);
@@ -56,7 +41,9 @@ export default function RandomMix() {

  // Genre Mix state
  const [serverGenres, setServerGenres] = useState<SubsonicGenre[]>([]);
-  const [selectedSuperGenre, setSelectedSuperGenre] = useState<string | null>(null);
+  const [allAvailableGenres, setAllAvailableGenres] = useState<string[]>([]);
+  const [displayedGenres, setDisplayedGenres] = useState<string[]>([]);
+  const [selectedGenre, setSelectedGenre] = useState<string | null>(null);
  const [genreMixSongs, setGenreMixSongs] = useState<SubsonicSong[]>([]);
  const [genreMixLoading, setGenreMixLoading] = useState(false);
  const [genreMixComplete, setGenreMixComplete] = useState(false);
@@ -81,7 +68,16 @@ export default function RandomMix() {

  useEffect(() => {
    fetchSongs();
-    getGenres().then(setServerGenres).catch(() => {});
+    getGenres().then(data => {
+      setServerGenres(data);
+      const audiobookLower = AUDIOBOOK_GENRES.map(g => g.toLowerCase());
+      const available = data
+        .filter(g => g.songCount > 0 && !audiobookLower.some(ab => g.value.toLowerCase().includes(ab)))
+        .sort((a, b) => b.songCount - a.songCount)
+        .map(g => g.value);
+      setAllAvailableGenres(available);
+      setDisplayedGenres(available.slice(0, 20));
+    }).catch(() => {});
  }, []);

  const filteredSongs = songs.filter(song => {
@@ -100,10 +96,10 @@ export default function RandomMix() {
  });

  const handlePlayAll = () => {
-    if (selectedSuperGenre && genreMixSongs.length > 0) {
-      playTrack(genreMixSongs[0], genreMixSongs);
+    if (selectedGenre && genreMixSongs.length > 0) {
+      playTrack(songToTrack(genreMixSongs[0]), genreMixSongs.map(songToTrack));
    } else if (filteredSongs.length > 0) {
-      playTrack(filteredSongs[0], filteredSongs);
+      playTrack(songToTrack(filteredSongs[0]), filteredSongs.map(songToTrack));
    }
  };

@@ -124,52 +120,26 @@ export default function RandomMix() {
    }
  };

-  // Compute which super-genres have matching server genres
-  const availableSuperGenres = SUPER_GENRES.filter(sg =>
-    serverGenres.some(sg2 =>
-      sg.keywords.some(kw => sg2.value.toLowerCase().includes(kw))
-    )
-  );
-
-  const loadGenreMix = async (superGenreId: string) => {
-    const sg = SUPER_GENRES.find(s => s.id === superGenreId);
-    if (!sg) return;
-    const allMatched = serverGenres
-      .filter(sg2 => sg.keywords.some(kw => sg2.value.toLowerCase().includes(kw)))
-      .map(sg2 => sg2.value)
-      .sort(() => Math.random() - 0.5);
-    const matched = allMatched.slice(0, 50);
+  const loadGenreMix = async (genre: string) => {
    setGenreMixLoading(true);
    setGenreMixComplete(false);
    setGenreMixSongs([]);
-
-    const perGenre = Math.max(1, Math.ceil(50 / matched.length));
-    const accumulated: SubsonicSong[] = [];
-    let resolved = 0;
-
-    await Promise.allSettled(matched.map(g =>
-      getRandomSongs(perGenre, g, 45000).then(songs => {
-        accumulated.push(...songs);
-        resolved++;
-        // Show first batch immediately; update on every subsequent resolve
-        setGenreMixSongs([...accumulated]);
-        if (resolved === 1) setGenreMixLoading(false);
-      }).catch(() => { resolved++; })
-    ));
-
-    // Final shuffle once all requests are done
-    setGenreMixSongs(prev => {
-      const s = [...prev];
-      for (let i = s.length - 1; i > 0; i--) {
-        const j = Math.floor(Math.random() * (i + 1));
-        [s[i], s[j]] = [s[j], s[i]];
-      }
-      return s.slice(0, 50);
-    });
+    try {
+      const fetched = await getRandomSongs(50, genre, 45000);
+      setGenreMixSongs(fetched);
+    } catch {}
    setGenreMixLoading(false);
    setGenreMixComplete(true);
  };

+  const shuffleDisplayedGenres = () => {
+    const shuffled = [...allAvailableGenres].sort(() => Math.random() - 0.5);
+    setDisplayedGenres(shuffled.slice(0, 20));
+    setSelectedGenre(null);
+    setGenreMixSongs([]);
+    setGenreMixComplete(false);
+  };
+

  return (
    <div className="content-body animate-fade-in">
@@ -181,8 +151,8 @@ export default function RandomMix() {
            <RefreshCw size={18} className={loading ? 'spin' : ''} /> {t('randomMix.remix')}
          </button>
          {(() => {
-            const isGenreLoading = selectedSuperGenre && !genreMixComplete;
-            const isDisabled = loading || (selectedSuperGenre ? !genreMixComplete || genreMixSongs.length === 0 : filteredSongs.length === 0);
+            const isGenreLoading = selectedGenre && !genreMixComplete;
+            const isDisabled = loading || (selectedGenre ? !genreMixComplete || genreMixSongs.length === 0 : filteredSongs.length === 0);
            return (
              <button
                className={`btn ${isGenreLoading ? 'btn-surface' : 'btn-primary'}`}
@@ -213,9 +183,12 @@ export default function RandomMix() {
      }}>
        {/* Left: Blacklist */}
        <div style={{ background: 'var(--bg-card)', padding: '1rem 1.25rem' }}>
-          <div style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--text-muted)', marginBottom: '0.75rem' }}>
+          <div style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--text-muted)', marginBottom: '0.5rem' }}>
            {t('randomMix.filterPanelTitle')}
          </div>
+          <p style={{ fontSize: 12, color: 'var(--text-muted)', marginBottom: '0.75rem', lineHeight: 1.5 }}>
+            {t('randomMix.filterPanelDesc')}
+          </p>

          <label style={{ display: 'flex', alignItems: 'flex-start', gap: '0.5rem', cursor: 'pointer', fontSize: 13, marginBottom: '0.75rem' }}>
            <input
@@ -298,34 +271,47 @@ export default function RandomMix() {
            {t('randomMix.genreMixTitle')}
          </div>
          <p style={{ fontSize: 12, color: 'var(--text-muted)', marginBottom: '0.75rem' }}>{t('randomMix.genreMixDesc')}</p>
-          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.4rem' }}>
+          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.4rem', alignItems: 'center' }}>
            {serverGenres.length === 0 ? (
              <div className="spinner" style={{ width: 14, height: 14 }} />
-            ) : availableSuperGenres.length === 0 ? (
+            ) : displayedGenres.length === 0 ? (
              <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>{t('randomMix.genreMixNoGenres')}</span>
            ) : (
-              availableSuperGenres.map(sg => (
-                <button
-                  key={sg.id}
-                  className={`btn ${selectedSuperGenre === sg.id ? 'btn-primary' : 'btn-surface'}`}
-                  style={{ fontSize: 12, padding: '4px 12px' }}
-                  onClick={() => { setSelectedSuperGenre(sg.id); loadGenreMix(sg.id); }}
-                  disabled={genreMixLoading}
-                >
-                  {sg.label}
-                </button>
-              ))
+              <>
+                {displayedGenres.map(genre => (
+                  <button
+                    key={genre}
+                    className={`btn ${selectedGenre === genre ? 'btn-primary' : 'btn-surface'}`}
+                    style={{ fontSize: 12, padding: '4px 12px' }}
+                    onClick={() => { setSelectedGenre(genre); loadGenreMix(genre); }}
+                    disabled={genreMixLoading}
+                  >
+                    {genre}
+                  </button>
+                ))}
+                {allAvailableGenres.length > 20 && (
+                  <button
+                    className="btn btn-ghost"
+                    style={{ fontSize: 12, padding: '4px 10px', flexShrink: 0 }}
+                    onClick={shuffleDisplayedGenres}
+                    disabled={genreMixLoading}
+                    data-tooltip={t('randomMix.shuffleGenres')}
+                  >
+                    <RefreshCw size={12} />
+                  </button>
+                )}
+              </>
            )}
          </div>
        </div>
      </div>

-      {/* Genre Mix tracklist (shown when a super-genre is selected) */}
+      {/* Genre Mix tracklist (shown when a genre is selected) */}
      {(genreMixLoading || genreMixSongs.length > 0) && (
        <div style={{ marginBottom: '2rem' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
            <span style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: 13, fontWeight: 600, color: 'var(--text-primary)' }}>
-              {SUPER_GENRES.find(s => s.id === selectedSuperGenre)?.label} Mix
+              {selectedGenre} Mix
              {genreMixLoading && <div className="spinner" style={{ width: 12, height: 12, borderWidth: 2 }} />}
            </span>
          </div>
@@ -341,31 +327,45 @@ export default function RandomMix() {
                <span>{t('randomMix.trackGenre')}</span>
                <span style={{ textAlign: 'right' }}>{t('randomMix.trackDuration')}</span>
              </div>
-              {genreMixSongs.map(song => (
-                <div key={song.id} className={`track-row${contextMenuSongId === song.id ? ' context-active' : ''}`} style={{ gridTemplateColumns: '36px 1fr 1fr 1fr 120px 80px' }}
-                  onDoubleClick={() => playTrack(song, genreMixSongs)} role="row" draggable
-                  onContextMenu={e => { e.preventDefault(); setContextMenuSongId(song.id); openContextMenu(e.clientX, e.clientY, { 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, starred: song.starred, genre: song.genre }, 'song'); }}
-                  onDragStart={e => {
-                    e.dataTransfer.effectAllowed = 'copy';
-                    e.dataTransfer.setData('text/plain', JSON.stringify({ type: 'song', 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, genre: song.genre } }));
-                  }}
-                >
-                  <button className="btn btn-ghost" style={{ padding: 4 }} onClick={e => { e.stopPropagation(); playTrack(song, genreMixSongs); }}>
+              {genreMixSongs.map(song => {
+                const track = songToTrack(song);
+                return (
+                  <div key={song.id} className={`track-row${contextMenuSongId === song.id ? ' context-active' : ''}`} style={{ gridTemplateColumns: '36px 1fr 1fr 1fr 120px 80px' }}
+                    onDoubleClick={() => playTrack(track, genreMixSongs.map(songToTrack))} role="row"
+                    onContextMenu={e => { e.preventDefault(); setContextMenuSongId(song.id); openContextMenu(e.clientX, e.clientY, track, 'song'); }}
+                    onMouseDown={e => {
+                      if (e.button !== 0) return;
+                      e.preventDefault();
+                      const sx = e.clientX, sy = e.clientY;
+                      const onMove = (me: MouseEvent) => {
+                        if (Math.abs(me.clientX - sx) > 5 || Math.abs(me.clientY - sy) > 5) {
+                          document.removeEventListener('mousemove', onMove);
+                          document.removeEventListener('mouseup', onUp);
+                          psyDrag.startDrag({ data: JSON.stringify({ type: 'song', track }), label: song.title }, me.clientX, me.clientY);
+                        }
+                      };
+                      const onUp = () => { document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseup', onUp); };
+                      document.addEventListener('mousemove', onMove);
+                      document.addEventListener('mouseup', onUp);
+                    }}
+                  >
+                  <button className="btn btn-ghost" style={{ padding: 4 }} onClick={e => { e.stopPropagation(); playTrack(track, genreMixSongs.map(songToTrack)); }}>
                    <Play size={14} fill="currentColor" />
                  </button>
                  <div className="track-info"><span className="track-title">{song.title}</span></div>
                  <div className="track-artist-cell"><span className="track-artist">{song.artist}</span></div>
                  <div className="track-info"><span className="track-title" style={{ fontSize: '0.85rem', color: 'var(--subtext0)' }}>{song.album}</span></div>
                  <div style={{ fontSize: 12, color: 'var(--text-muted)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{song.genre ?? '—'}</div>
-                  <span className="track-duration" style={{ textAlign: 'right' }}>{formatDuration(song.duration)}</span>
-                </div>
-              ))}
-            </div>
-          )}
-        </div>
-      )}
+                 <span className="track-duration" style={{ textAlign: 'right' }}>{formatDuration(song.duration)}</span>
+                 </div>
+                 );
+               })}
+             </div>
+           )}
+         </div>
+       )}

-      {!selectedSuperGenre && (loading && songs.length === 0 ? (
+      {!selectedGenre && (loading && songs.length === 0 ? (
        <div style={{ display: 'flex', justifyContent: 'center', padding: '4rem' }}>
          <div className="spinner" />
        </div>
@@ -383,34 +383,40 @@ export default function RandomMix() {
            <span style={{ textAlign: 'right' }}>{t('randomMix.trackDuration')}</span>
          </div>

-          {filteredSongs.map((song) => (
-            <div
-              key={song.id}
-              className={`track-row${contextMenuSongId === song.id ? ' context-active' : ''}`}
-              style={{ gridTemplateColumns: '36px 1fr 1fr 1fr 120px 60px 80px' }}
-              onDoubleClick={() => playTrack(song, filteredSongs)}
-              role="row"
-              draggable
-              onContextMenu={e => {
-                e.preventDefault();
-                const track = { id: song.id, title: song.title, artist: song.artist, album: song.album, albumId: song.albumId, artistId: song.artistId, duration: song.duration, coverArt: song.coverArt, track: song.track, year: song.year, bitRate: song.bitRate, suffix: song.suffix, userRating: song.userRating, starred: song.starred, genre: song.genre };
-                setContextMenuSongId(song.id);
-                openContextMenu(e.clientX, e.clientY, track, 'song');
-              }}
-              onDragStart={e => {
-                e.dataTransfer.effectAllowed = 'copy';
-                const track = {
-                  id: song.id, title: song.title, artist: song.artist, album: song.album,
-                  albumId: song.albumId, artistId: song.artistId, duration: song.duration, coverArt: song.coverArt, track: song.track,
-                  year: song.year, bitRate: song.bitRate, suffix: song.suffix, userRating: song.userRating, genre: song.genre,
-                };
-                e.dataTransfer.setData('text/plain', JSON.stringify({ type: 'song', track }));
-              }}
-            >
+          {filteredSongs.map((song) => {
+            const track = songToTrack(song);
+            return (
+              <div
+                key={song.id}
+                className={`track-row${contextMenuSongId === song.id ? ' context-active' : ''}`}
+                style={{ gridTemplateColumns: '36px 1fr 1fr 1fr 120px 60px 80px' }}
+                onDoubleClick={() => playTrack(track, filteredSongs.map(songToTrack))}
+                role="row"
+                onContextMenu={e => {
+                  e.preventDefault();
+                  setContextMenuSongId(song.id);
+                  openContextMenu(e.clientX, e.clientY, track, 'song');
+                }}
+                onMouseDown={e => {
+                  if (e.button !== 0) return;
+                  e.preventDefault();
+                  const sx = e.clientX, sy = e.clientY;
+                  const onMove = (me: MouseEvent) => {
+                    if (Math.abs(me.clientX - sx) > 5 || Math.abs(me.clientY - sy) > 5) {
+                      document.removeEventListener('mousemove', onMove);
+                      document.removeEventListener('mouseup', onUp);
+                      psyDrag.startDrag({ data: JSON.stringify({ type: 'song', track }), label: song.title }, me.clientX, me.clientY);
+                    }
+                  };
+                  const onUp = () => { document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseup', onUp); };
+                  document.addEventListener('mousemove', onMove);
+                  document.addEventListener('mouseup', onUp);
+                }}
+              >
              <button
                className="btn btn-ghost"
                style={{ padding: 4 }}
-                onClick={(e) => { e.stopPropagation(); playTrack(song, filteredSongs); }}
+                onClick={(e) => { e.stopPropagation(); playTrack(songToTrack(song), filteredSongs.map(songToTrack)); }}
                data-tooltip={t('randomMix.play')}
              >
                <Play size={14} fill="currentColor" />
@@ -518,12 +524,13 @@ export default function RandomMix() {
              </div>

              <span className="track-duration" style={{ textAlign: 'right' }}>
-                {formatDuration(song.duration)}
-              </span>
-            </div>
-          ))}
-        </div>
-      ))}
+               {formatDuration(song.duration)}
+               </span>
+             </div>
+             );
+           })}
+         </div>
+       ))}

    </div>
  );
@@ -2,10 +2,11 @@ import React, { useEffect, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { Play, Search } from 'lucide-react';
 import { search, SearchResults as ISearchResults, SubsonicSong } from '../api/subsonic';
-import { usePlayerStore } from '../store/playerStore';
+import { usePlayerStore, songToTrack } from '../store/playerStore';
 import AlbumRow from '../components/AlbumRow';
 import ArtistRow from '../components/ArtistRow';
 import { useTranslation } from 'react-i18next';
+import { useDragDrop } from '../contexts/DragDropContext';

 function formatDuration(s: number) {
  return `${Math.floor(s / 60)}:${(s % 60).toString().padStart(2, '0')}`;
@@ -19,6 +20,7 @@ export default function SearchResults() {
  const [loading, setLoading] = useState(false);
  const playTrack = usePlayerStore(s => s.playTrack);
  const currentTrack = usePlayerStore(s => s.currentTrack);
+  const psyDrag = useDragDrop();

  useEffect(() => {
    if (!query.trim()) { setResults(null); return; }
@@ -31,17 +33,7 @@ export default function SearchResults() {
  const hasResults = results && (results.artists.length || results.albums.length || results.songs.length);

  const playSong = (song: SubsonicSong, list: SubsonicSong[]) => {
-    playTrack({
-      id: song.id, title: song.title, artist: song.artist, album: song.album,
-      albumId: song.albumId, artistId: song.artistId, duration: song.duration,
-      coverArt: song.coverArt, year: song.year, bitRate: song.bitRate,
-      suffix: song.suffix, userRating: song.userRating, genre: song.genre,
-    }, list.map(s => ({
-      id: s.id, title: s.title, artist: s.artist, album: s.album,
-      albumId: s.albumId, artistId: s.artistId, duration: s.duration,
-      coverArt: s.coverArt, year: s.year, bitRate: s.bitRate,
-      suffix: s.suffix, userRating: s.userRating, genre: s.genre,
-    })));
+    playTrack(songToTrack(song), list.map(songToTrack));
  };

  return (
@@ -92,16 +84,21 @@ export default function SearchResults() {
                    style={{ gridTemplateColumns: '36px minmax(100px, 2fr) minmax(80px, 1.2fr) minmax(80px, 1.2fr) 100px 60px' }}
                    onDoubleClick={() => playSong(song, results.songs)}
                    role="row"
-                    draggable
-                    onDragStart={e => {
-                      e.dataTransfer.effectAllowed = 'copy';
-                      const track = {
-                        id: song.id, title: song.title, artist: song.artist, album: song.album,
-                        albumId: song.albumId, artistId: song.artistId, duration: song.duration,
-                        coverArt: song.coverArt, year: song.year, bitRate: song.bitRate,
-                        suffix: song.suffix, userRating: song.userRating, genre: song.genre,
+                    onMouseDown={e => {
+                      if (e.button !== 0) return;
+                      e.preventDefault();
+                      const sx = e.clientX, sy = e.clientY;
+                      const track = songToTrack(song);
+                      const onMove = (me: MouseEvent) => {
+                        if (Math.abs(me.clientX - sx) > 5 || Math.abs(me.clientY - sy) > 5) {
+                          document.removeEventListener('mousemove', onMove);
+                          document.removeEventListener('mouseup', onUp);
+                          psyDrag.startDrag({ data: JSON.stringify({ type: 'song', track }), label: song.title }, me.clientX, me.clientY);
+                        }
                      };
-                      e.dataTransfer.setData('text/plain', JSON.stringify({ type: 'song', track }));
+                      const onUp = () => { document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseup', onUp); };
+                      document.addEventListener('mousemove', onMove);
+                      document.addEventListener('mouseup', onUp);
                    }}
                  >
                    <button
@@ -1,10 +1,11 @@
-import React, { useState, useMemo, useCallback, useEffect } from 'react';
+import React, { useState, useMemo, useCallback, useEffect, useRef } from 'react';
 import { version as appVersion } from '../../package.json';
 import changelogRaw from '../../CHANGELOG.md?raw';
 import { useNavigate, useLocation } from 'react-router-dom';
 import {
  Wifi, WifiOff, Globe, Music2, Sliders, LogOut, CheckCircle2, FolderOpen,
-  Palette, Server, Plus, Trash2, Eye, EyeOff, Info, ExternalLink, Shuffle, X, Play, Type, Keyboard
+  Palette, Server, Plus, Trash2, Eye, EyeOff, Info, ExternalLink, Shuffle, X, Play, Type, Keyboard, ChevronDown,
+  GripVertical, PanelLeft, RotateCcw, LayoutGrid
 } from 'lucide-react';
 import { invoke } from '@tauri-apps/api/core';
 import { open as openUrl } from '@tauri-apps/plugin-shell';
@@ -19,6 +20,10 @@ import { useThemeStore } from '../store/themeStore';
 import { useFontStore, FontId } from '../store/fontStore';
 import { useKeybindingsStore, KeyAction, formatKeyCode, DEFAULT_BINDINGS } from '../store/keybindingsStore';
 import { useGlobalShortcutsStore, GlobalAction, buildGlobalShortcut, formatGlobalShortcut } from '../store/globalShortcutsStore';
+import { useSidebarStore, DEFAULT_SIDEBAR_ITEMS, SidebarItemConfig } from '../store/sidebarStore';
+import { useHomeStore, HomeSectionId } from '../store/homeStore';
+import { useDragDrop, useDragSource } from '../contexts/DragDropContext';
+import { ALL_NAV_ITEMS } from '../components/Sidebar';
 import { pingWithCredentials } from '../api/subsonic';
 import { open as openDialog } from '@tauri-apps/plugin-dialog';
 import { useTranslation } from 'react-i18next';
@@ -26,6 +31,32 @@ import Equalizer from '../components/Equalizer';

 const AUDIOBOOK_GENRES_DISPLAY = ['Hörbuch', 'Hoerbuch', 'Hörspiel', 'Hoerspiel', 'Audiobook', 'Audio Book', 'Spoken Word', 'Spokenword', 'Podcast', 'Kapitel', 'Thriller', 'Krimi', 'Speech', 'Fantasy', 'Comedy', 'Literature'];

+const CONTRIBUTORS = [
+  {
+    github: 'jiezhuo',
+    since: '1.21',
+    contributions: [
+      'Chinese (Simplified) translation',
+    ],
+  },
+  {
+    github: 'nullobject',
+    since: '1.22.0',
+    contributions: [
+      'Seek debounce & race condition fix (PR #7)',
+      'Waveform seekbar stability on position update (PR #8)',
+    ],
+  },
+  {
+    github: 'trbn1',
+    since: '1.22.0',
+    contributions: [
+      'Replay Gain metadata propagation (PR #9)',
+      'songToTrack() — unified track construction across all sources',
+    ],
+  },
+] as const;
+
 type Tab = 'playback' | 'library' | 'appearance' | 'shortcuts' | 'server' | 'about';

 function AddServerForm({ onSave, onCancel }: { onSave: (data: Omit<ServerProfile, 'id'>) => void; onCancel: () => void }) {
@@ -118,6 +149,7 @@ export default function Settings() {
  const [offlineCacheBytes, setOfflineCacheBytes] = useState<number | null>(null);
  const [showClearConfirm, setShowClearConfirm] = useState(false);
  const [clearing, setClearing] = useState(false);
+  const [contributorsOpen, setContributorsOpen] = useState(false);

  useEffect(() => {
    if (!auth.lastfmSessionKey || !auth.lastfmUsername) { setLfmUserInfo(null); return; }
@@ -531,6 +563,8 @@ export default function Settings() {
              </div>
            </div>
          </section>
+
+          <HomeCustomizer />
        </>
      )}

@@ -576,43 +610,34 @@ export default function Settings() {
            </div>
            <div className="settings-card">
              <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
-                {([
-                  { id: 'inter',   label: 'Inter',            sample: 'The quick brown fox' },
-                  { id: 'outfit',  label: 'Outfit',           sample: 'The quick brown fox' },
-                  { id: 'dm-sans', label: 'DM Sans',          sample: 'The quick brown fox' },
-                  { id: 'nunito',  label: 'Nunito',           sample: 'The quick brown fox' },
-                  { id: 'rubik',             label: 'Rubik',             sample: 'The quick brown fox' },
-                  { id: 'space-grotesk',     label: 'Space Grotesk',     sample: 'The quick brown fox' },
-                  { id: 'figtree',           label: 'Figtree',           sample: 'The quick brown fox' },
-                  { id: 'manrope',           label: 'Manrope',           sample: 'The quick brown fox' },
-                  { id: 'plus-jakarta-sans', label: 'Plus Jakarta Sans',  sample: 'The quick brown fox' },
-                  { id: 'lexend',            label: 'Lexend',            sample: 'The quick brown fox' },
-                ] as { id: FontId; label: string; sample: string }[]).map(f => (
+                {(
+                  [
+                    { id: 'inter',             label: 'Inter',             stack: "'Inter', sans-serif" },
+                    { id: 'outfit',            label: 'Outfit',            stack: "'Outfit', sans-serif" },
+                    { id: 'dm-sans',           label: 'DM Sans',           stack: "'DM Sans', sans-serif" },
+                    { id: 'nunito',            label: 'Nunito',            stack: "'Nunito', sans-serif" },
+                    { id: 'rubik',             label: 'Rubik',             stack: "'Rubik', sans-serif" },
+                    { id: 'space-grotesk',     label: 'Space Grotesk',     stack: "'Space Grotesk', sans-serif" },
+                    { id: 'figtree',           label: 'Figtree',           stack: "'Figtree', sans-serif" },
+                    { id: 'manrope',           label: 'Manrope',           stack: "'Manrope', sans-serif" },
+                    { id: 'plus-jakarta-sans', label: 'Plus Jakarta Sans', stack: "'Plus Jakarta Sans', sans-serif" },
+                    { id: 'lexend',            label: 'Lexend',            stack: "'Lexend', sans-serif" },
+                  ] as { id: FontId; label: string; stack: string }[]
+                ).map(f => (
                  <button
                    key={f.id}
+                    className={`btn ${fontStore.font === f.id ? 'btn-primary' : 'btn-ghost'}`}
+                    style={{ justifyContent: 'flex-start', fontFamily: f.stack }}
                    onClick={() => fontStore.setFont(f.id)}
-                    style={{
-                      display: 'flex', alignItems: 'center', gap: '12px',
-                      background: fontStore.font === f.id ? 'var(--accent-dim)' : 'transparent',
-                      border: `1px solid ${fontStore.font === f.id ? 'var(--accent)' : 'var(--border-subtle)'}`,
-                      borderRadius: 'var(--radius-md)', padding: '10px 14px',
-                      cursor: 'pointer', textAlign: 'left', width: '100%',
-                    }}
                  >
-                    <div style={{
-                      width: 14, height: 14, borderRadius: '50%', flexShrink: 0,
-                      border: `2px solid ${fontStore.font === f.id ? 'var(--accent)' : 'var(--border)'}`,
-                      background: fontStore.font === f.id ? 'var(--accent)' : 'transparent',
-                    }} />
-                    <div>
-                      <div style={{ fontFamily: `'${f.label}', sans-serif`, fontWeight: 600, fontSize: 14, color: 'var(--text-primary)' }}>{f.label}</div>
-                      <div style={{ fontFamily: `'${f.label}', sans-serif`, fontSize: 12, color: 'var(--text-muted)', marginTop: 2 }}>{f.sample}</div>
-                    </div>
+                    {f.label}
                  </button>
                ))}
              </div>
            </div>
          </section>
+
+          <SidebarCustomizer />
        </>
      )}

@@ -945,6 +970,28 @@ export default function Settings() {
              <h2>{t('settings.behavior')}</h2>
            </div>
            <div className="settings-card">
+              <div className="settings-toggle-row">
+                <div>
+                  <div style={{ fontWeight: 500 }}>{t('settings.minimizeToTray')}</div>
+                  <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>{t('settings.minimizeToTrayDesc')}</div>
+                </div>
+                <label className="toggle-switch" aria-label={t('settings.minimizeToTray')}>
+                  <input type="checkbox" checked={auth.minimizeToTray} onChange={e => auth.setMinimizeToTray(e.target.checked)} />
+                  <span className="toggle-track" />
+                </label>
+              </div>
+              <div className="settings-section-divider" />
+              <div className="settings-toggle-row">
+                <div>
+                  <div style={{ fontWeight: 500 }}>{t('settings.nowPlayingEnabled')}</div>
+                  <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>{t('settings.nowPlayingEnabledDesc')}</div>
+                </div>
+                <label className="toggle-switch" aria-label={t('settings.nowPlayingEnabled')}>
+                  <input type="checkbox" checked={auth.nowPlayingEnabled} onChange={e => auth.setNowPlayingEnabled(e.target.checked)} />
+                  <span className="toggle-track" />
+                </label>
+              </div>
+              <div className="settings-section-divider" />
              <div className="settings-toggle-row">
                <div>
                  <div style={{ fontWeight: 500 }}>{t('settings.downloadsTitle')}</div>
@@ -1017,9 +1064,51 @@ export default function Settings() {
                  <span style={{ color: 'var(--text-muted)', minWidth: 56 }}>AI</span>
                  <span style={{ color: 'var(--text-secondary)' }}>{t('settings.aboutAiCredit')}</span>
                </div>
-                <div style={{ display: 'flex', gap: '0.5rem' }}>
-                  <span style={{ color: 'var(--text-muted)', minWidth: 56 }}>{t('settings.aboutContributorsLabel')}</span>
-                  <span style={{ color: 'var(--text-secondary)' }}>{t('settings.aboutContributors')}</span>
+                <div>
+                  <button
+                    style={{ display: 'flex', width: '100%', alignItems: 'center', gap: '0.5rem', background: 'none', border: 'none', cursor: 'pointer', padding: 0, textAlign: 'left' }}
+                    onClick={() => setContributorsOpen(o => !o)}
+                  >
+                    <span style={{ color: 'var(--text-muted)', minWidth: 56, flexShrink: 0 }}>{t('settings.aboutContributorsLabel')}</span>
+                    <span style={{ color: 'var(--text-secondary)', flex: 1 }}>{CONTRIBUTORS.length}</span>
+                    <ChevronDown size={13} style={{ color: 'var(--text-muted)', transform: contributorsOpen ? 'rotate(180deg)' : 'none', transition: 'transform 0.2s' }} />
+                  </button>
+
+                  {contributorsOpen && (
+                    <div style={{ marginTop: '0.75rem', display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+                      {CONTRIBUTORS.map(c => (
+                        <div key={c.github} style={{
+                          display: 'flex', gap: '0.75rem', alignItems: 'flex-start',
+                          background: 'var(--bg-elevated)', borderRadius: 'var(--radius-md)',
+                          padding: '0.65rem 0.75rem',
+                          boxShadow: 'inset 0 0 0 1px var(--border-subtle)',
+                        }}>
+                          <img
+                            src={`https://github.com/${c.github}.png?size=48`}
+                            width={36} height={36}
+                            style={{ borderRadius: '50%', flexShrink: 0, marginTop: 2 }}
+                            alt={c.github}
+                          />
+                          <div style={{ flex: 1, minWidth: 0 }}>
+                            <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '0.3rem' }}>
+                              <button
+                                style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0, color: 'var(--accent)', fontWeight: 600, fontSize: 13 }}
+                                onClick={() => openUrl(`https://github.com/${c.github}`)}
+                              >
+                                @{c.github}
+                              </button>
+                              <span style={{ fontSize: 10, background: 'var(--accent-dim)', color: 'var(--accent)', padding: '1px 6px', borderRadius: 99, fontWeight: 600 }}>
+                                v{c.since}
+                              </span>
+                            </div>
+                            <ul style={{ margin: 0, padding: '0 0 0 1rem', fontSize: 12, color: 'var(--text-secondary)', lineHeight: 1.8 }}>
+                              {c.contributions.map(item => <li key={item}>{item}</li>)}
+                            </ul>
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  )}
                </div>
              </div>

@@ -1063,8 +1152,201 @@ function renderInline(text: string): React.ReactNode[] {
  });
 }

+function HomeCustomizer() {
+  const { t } = useTranslation();
+  const { sections, toggleSection, reset } = useHomeStore();
+
+  const SECTION_LABELS: Record<HomeSectionId, string> = {
+    hero:            t('home.hero'),
+    recent:          t('home.recent'),
+    discover:        t('home.discover'),
+    discoverArtists: t('home.discoverArtists'),
+    recentlyPlayed:  t('home.recentlyPlayed'),
+    starred:         t('home.starred'),
+    mostPlayed:      t('home.mostPlayed'),
+  };
+
+  return (
+    <section className="settings-section">
+      <div className="settings-section-header">
+        <LayoutGrid size={18} />
+        <h2>{t('settings.homeCustomizerTitle')}</h2>
+        <button
+          className="btn btn-ghost"
+          style={{ marginLeft: 'auto', fontSize: 12, color: 'var(--text-muted)' }}
+          onClick={reset}
+          data-tooltip={t('settings.sidebarReset')}
+        >
+          <RotateCcw size={14} />
+        </button>
+      </div>
+      <div className="settings-card" style={{ padding: '4px 0' }}>
+        {sections.map(sec => (
+          <div key={sec.id} className="settings-toggle-row" style={{ padding: '8px 16px' }}>
+            <span style={{ fontSize: 14 }}>{SECTION_LABELS[sec.id]}</span>
+            <label className="toggle-switch" aria-label={SECTION_LABELS[sec.id]}>
+              <input type="checkbox" checked={sec.visible} onChange={() => toggleSection(sec.id)} />
+              <span className="toggle-track" />
+            </label>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+function SidebarGripHandle({ idx, section, label }: { idx: number; section: 'library' | 'system'; label: string }) {
+  const { t } = useTranslation();
+  const { onMouseDown } = useDragSource(() => ({
+    data: JSON.stringify({ type: 'sidebar_reorder', index: idx, section }),
+    label,
+  }));
+  return (
+    <span
+      className="sidebar-customizer-grip"
+      data-tooltip={t('settings.sidebarDrag')}
+      data-tooltip-pos="right"
+      onMouseDown={onMouseDown}
+    >
+      <GripVertical size={16} />
+    </span>
+  );
+}
+
+type DropTarget = { idx: number; before: boolean; section: 'library' | 'system' } | null;
+
+function SidebarCustomizer() {
+  const { t } = useTranslation();
+  const { items, setItems, toggleItem, reset } = useSidebarStore();
+  const { isDragging: isPsyDragging } = useDragDrop();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [dropTarget, setDropTarget] = useState<DropTarget>(null);
+  const dropTargetRef = useRef<DropTarget>(null);
+  const itemsRef = useRef(items);
+  itemsRef.current = items;
+
+  const libraryItems = items.filter(cfg => ALL_NAV_ITEMS[cfg.id]?.section === 'library');
+  const systemItems  = items.filter(cfg => ALL_NAV_ITEMS[cfg.id]?.section === 'system');
+
+  useEffect(() => {
+    if (!isPsyDragging) { dropTargetRef.current = null; setDropTarget(null); }
+  }, [isPsyDragging]);
+
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const onPsyDrop = (e: Event) => {
+      const detail = (e as CustomEvent).detail;
+      if (!detail?.data) return;
+      let parsed: { type?: string; index?: number; section?: string };
+      try { parsed = JSON.parse(detail.data); } catch { return; }
+      if (parsed.type !== 'sidebar_reorder' || parsed.index == null || !parsed.section) return;
+
+      const fromIdx = parsed.index;
+      const fromSection = parsed.section as 'library' | 'system';
+      const target = dropTargetRef.current;
+      dropTargetRef.current = null; setDropTarget(null);
+      if (!target || target.section !== fromSection) return;
+
+      const sectionItems = fromSection === 'library' ? [...libraryItems] : [...systemItems];
+      const insertBefore = target.before ? target.idx : target.idx + 1;
+      if (insertBefore === fromIdx || insertBefore === fromIdx + 1) return;
+
+      const [moved] = sectionItems.splice(fromIdx, 1);
+      sectionItems.splice(insertBefore > fromIdx ? insertBefore - 1 : insertBefore, 0, moved);
+
+      // Merge reordered section back into flat items array
+      const all = [...itemsRef.current];
+      const positions = all.map((cfg, i) => ({ cfg, i }))
+        .filter(({ cfg }) => ALL_NAV_ITEMS[cfg.id]?.section === fromSection)
+        .map(({ i }) => i);
+      positions.forEach((pos, i) => { all[pos] = sectionItems[i]; });
+      setItems(all);
+    };
+    el.addEventListener('psy-drop', onPsyDrop);
+    return () => el.removeEventListener('psy-drop', onPsyDrop);
+  }, [libraryItems, systemItems, setItems]);
+
+  const handleMouseMove = (e: React.MouseEvent) => {
+    if (!isPsyDragging || !containerRef.current) return;
+    const rows = containerRef.current.querySelectorAll<HTMLElement>('[data-sidebar-idx]');
+    let target: DropTarget = null;
+    for (const row of rows) {
+      const rect = row.getBoundingClientRect();
+      const idx = Number(row.dataset.sidebarIdx);
+      const section = row.dataset.sidebarSection as 'library' | 'system';
+      if (e.clientY < rect.top + rect.height / 2) { target = { idx, before: true, section }; break; }
+      target = { idx, before: false, section };
+    }
+    dropTargetRef.current = target;
+    setDropTarget(target);
+  };
+
+  const renderRow = (cfg: SidebarItemConfig, localIdx: number, section: 'library' | 'system') => {
+    const meta = ALL_NAV_ITEMS[cfg.id];
+    if (!meta) return null;
+    const Icon = meta.icon;
+    const isBefore = isPsyDragging && dropTarget?.section === section && dropTarget.idx === localIdx && dropTarget.before;
+    const isAfter  = isPsyDragging && dropTarget?.section === section && dropTarget.idx === localIdx && !dropTarget.before;
+    return (
+      <div
+        key={cfg.id}
+        data-sidebar-idx={localIdx}
+        data-sidebar-section={section}
+        className="sidebar-customizer-row"
+        style={{
+          borderTop:    isBefore ? '2px solid var(--accent)' : undefined,
+          borderBottom: isAfter  ? '2px solid var(--accent)' : undefined,
+        }}
+      >
+        <SidebarGripHandle idx={localIdx} section={section} label={t(meta.labelKey)} />
+        <Icon size={16} style={{ color: 'var(--text-muted)', flexShrink: 0 }} />
+        <span style={{ flex: 1, fontSize: 14 }}>{t(meta.labelKey)}</span>
+        <label className="toggle-switch" aria-label={t(meta.labelKey)}>
+          <input type="checkbox" checked={cfg.visible} onChange={() => toggleItem(cfg.id)} />
+          <span className="toggle-track" />
+        </label>
+      </div>
+    );
+  };
+
+  return (
+    <section className="settings-section">
+      <div className="settings-section-header">
+        <PanelLeft size={18} />
+        <h2>{t('settings.sidebarTitle')}</h2>
+        <button
+          className="btn btn-ghost"
+          style={{ marginLeft: 'auto', fontSize: 12, color: 'var(--text-muted)' }}
+          onClick={reset}
+          data-tooltip={t('settings.sidebarReset')}
+        >
+          <RotateCcw size={14} />
+        </button>
+      </div>
+      <div ref={containerRef} onMouseMove={handleMouseMove} style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+        {/* Library block */}
+        <div className="settings-card" style={{ padding: '4px 0' }}>
+          <div className="sidebar-customizer-block-label">{t('sidebar.library')}</div>
+          {libraryItems.map((cfg, i) => renderRow(cfg, i, 'library'))}
+        </div>
+        {/* System block */}
+        <div className="settings-card" style={{ padding: '4px 0' }}>
+          <div className="sidebar-customizer-block-label">{t('sidebar.system')}</div>
+          {systemItems.map((cfg, i) => renderRow(cfg, i, 'system'))}
+          <div className="sidebar-customizer-fixed-hint">
+            <span>{t('settings.sidebarFixed')}: {t('sidebar.nowPlaying')}, {t('sidebar.settings')}</span>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
 function ChangelogSection() {
  const { t } = useTranslation();
+  const showChangelogOnUpdate = useAuthStore(s => s.showChangelogOnUpdate);
+  const setShowChangelogOnUpdate = useAuthStore(s => s.setShowChangelogOnUpdate);

  const versions = useMemo(() => {
    const blocks = changelogRaw.split(/\n(?=## \[)/).filter(b => b.startsWith('## ['));
@@ -1088,6 +1370,16 @@ function ChangelogSection() {
        <Info size={18} />
        <h2>{t('settings.changelog')}</h2>
      </div>
+      <div className="settings-toggle-row" style={{ marginBottom: '1rem' }}>
+        <div>
+          <div style={{ fontWeight: 500 }}>{t('settings.showChangelogOnUpdate')}</div>
+          <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>{t('settings.showChangelogOnUpdateDesc')}</div>
+        </div>
+        <label className="toggle-switch" aria-label={t('settings.showChangelogOnUpdate')}>
+          <input type="checkbox" checked={showChangelogOnUpdate} onChange={e => setShowChangelogOnUpdate(e.target.checked)} />
+          <span className="toggle-track" />
+        </label>
+      </div>
      <div className="changelog-list">
        {versions.map(({ version, date, body }) => (
          <details key={version} className="changelog-entry" open={version === appVersion}>
@@ -1,5 +1,7 @@
 import { create } from 'zustand';
 import { persist, createJSONStorage } from 'zustand/middleware';
+import { invoke } from '@tauri-apps/api/core';
+import { usePlayerStore } from './playerStore';

 export interface ServerProfile {
  id: string;
@@ -31,6 +33,10 @@ interface AuthState {
  crossfadeEnabled: boolean;
  crossfadeSecs: number;
  gaplessEnabled: boolean;
+  minimizeToTray: boolean;
+  nowPlayingEnabled: boolean;
+  showChangelogOnUpdate: boolean;
+  lastSeenChangelogVersion: string;

  // Status
  isLoggedIn: boolean;
@@ -60,6 +66,10 @@ interface AuthState {
  setCrossfadeEnabled: (v: boolean) => void;
  setCrossfadeSecs: (v: number) => void;
  setGaplessEnabled: (v: boolean) => void;
+  setMinimizeToTray: (v: boolean) => void;
+  setNowPlayingEnabled: (v: boolean) => void;
+  setShowChangelogOnUpdate: (v: boolean) => void;
+  setLastSeenChangelogVersion: (v: string) => void;
  logout: () => void;

  // Derived
@@ -90,6 +100,10 @@ export const useAuthStore = create<AuthState>()(
      crossfadeEnabled: false,
      crossfadeSecs: 3,
      gaplessEnabled: false,
+      minimizeToTray: false,
+      nowPlayingEnabled: false,
+      showChangelogOnUpdate: true,
+      lastSeenChangelogVersion: '',
      isLoggedIn: false,
      isConnecting: false,
      connectionError: null,
@@ -141,11 +155,21 @@ export const useAuthStore = create<AuthState>()(
      setDownloadFolder: (v) => set({ downloadFolder: v }),
      setExcludeAudiobooks: (v) => set({ excludeAudiobooks: v }),
      setCustomGenreBlacklist: (v) => set({ customGenreBlacklist: v }),
-      setReplayGainEnabled: (v) => set({ replayGainEnabled: v }),
-      setReplayGainMode: (v) => set({ replayGainMode: v }),
+      setReplayGainEnabled: (v) => {
+        set({ replayGainEnabled: v });
+        usePlayerStore.getState().updateReplayGainForCurrentTrack();
+      },
+      setReplayGainMode: (v) => {
+        set({ replayGainMode: v });
+        usePlayerStore.getState().updateReplayGainForCurrentTrack();
+      },
      setCrossfadeEnabled: (v) => set({ crossfadeEnabled: v }),
      setCrossfadeSecs: (v) => set({ crossfadeSecs: v }),
      setGaplessEnabled: (v) => set({ gaplessEnabled: v }),
+      setMinimizeToTray: (v) => set({ minimizeToTray: v }),
+      setNowPlayingEnabled: (v) => set({ nowPlayingEnabled: v }),
+      setShowChangelogOnUpdate: (v) => set({ showChangelogOnUpdate: v }),
+      setLastSeenChangelogVersion: (v) => set({ lastSeenChangelogVersion: v }),

      logout: () => set({ isLoggedIn: false }),

@@ -0,0 +1,38 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+export type HomeSectionId = 'hero' | 'recent' | 'discover' | 'discoverArtists' | 'recentlyPlayed' | 'starred' | 'mostPlayed';
+
+export interface HomeSectionConfig {
+  id: HomeSectionId;
+  visible: boolean;
+}
+
+export const DEFAULT_HOME_SECTIONS: HomeSectionConfig[] = [
+  { id: 'hero',            visible: true },
+  { id: 'recent',          visible: true },
+  { id: 'discover',        visible: true },
+  { id: 'discoverArtists', visible: true },
+  { id: 'recentlyPlayed',  visible: true },
+  { id: 'starred',         visible: true },
+  { id: 'mostPlayed',      visible: true },
+];
+
+interface HomeStore {
+  sections: HomeSectionConfig[];
+  toggleSection: (id: HomeSectionId) => void;
+  reset: () => void;
+}
+
+export const useHomeStore = create<HomeStore>()(
+  persist(
+    (set) => ({
+      sections: DEFAULT_HOME_SECTIONS,
+      toggleSection: (id) => set((s) => ({
+        sections: s.sections.map(sec => sec.id === id ? { ...sec, visible: !sec.visible } : sec),
+      })),
+      reset: () => set({ sections: DEFAULT_HOME_SECTIONS }),
+    }),
+    { name: 'psysonic_home' }
+  )
+);
@@ -2,7 +2,7 @@ import { create } from 'zustand';
 import { persist, createJSONStorage } from 'zustand/middleware';
 import { invoke } from '@tauri-apps/api/core';
 import { listen } from '@tauri-apps/api/event';
-import { buildStreamUrl, buildCoverArtUrl, getPlayQueue, savePlayQueue, reportNowPlaying, scrobbleSong, SubsonicSong } from '../api/subsonic';
+import { buildStreamUrl, buildCoverArtUrl, getPlayQueue, savePlayQueue, reportNowPlaying, scrobbleSong, SubsonicSong, getSong } from '../api/subsonic';
 import { lastfmScrobble, lastfmUpdateNowPlaying, lastfmLoveTrack, lastfmUnloveTrack, lastfmGetTrackLoved, lastfmGetAllLovedTracks } from '../api/lastfm';
 import { useAuthStore } from './authStore';
 import { useOfflineStore } from './offlineStore';
@@ -26,6 +26,8 @@ export interface Track {
  replayGainPeak?: number;
  starred?: string;
  genre?: string;
+  samplingRate?: number;
+  bitDepth?: number;
 }

 export function songToTrack(song: SubsonicSong): Track {
@@ -48,6 +50,8 @@ export function songToTrack(song: SubsonicSong): Track {
    replayGainPeak: song.replayGain?.trackPeak,
    starred: song.starred,
    genre: song.genre,
+    samplingRate: song.samplingRate,
+    bitDepth: song.bitDepth,
  };
 }

@@ -75,8 +79,10 @@ interface PlayerState {
  previous: () => void;
  seek: (progress: number) => void;
  setVolume: (v: number) => void;
-  setProgress: (t: number, duration: number) => void;
+   updateReplayGainForCurrentTrack: () => void;
+   setProgress: (t: number, duration: number) => void;
  enqueue: (tracks: Track[]) => void;
+  enqueueAt: (tracks: Track[], insertIndex: number) => void;
  clearQueue: () => void;

  isQueueVisible: boolean;
@@ -110,6 +116,10 @@ interface PlayerState {
  };
  openContextMenu: (x: number, y: number, item: any, type: 'song' | 'album' | 'artist' | 'queue-item' | 'album-song', queueIndex?: number) => void;
  closeContextMenu: () => void;
+
+  songInfoModal: { isOpen: boolean; songId: string | null };
+  openSongInfo: (songId: string) => void;
+  closeSongInfo: () => void;
 }

 // ─── Module-level playback primitives ─────────────────────────────────────────
@@ -125,6 +135,9 @@ let playGeneration = 0;

 // Debounce timer for seek slider drags.
 let seekDebounce: ReturnType<typeof setTimeout> | null = null;
+// Target time of the last seek — blocks stale Rust progress ticks until the
+// engine has actually caught up to the new position.
+let seekTarget: number | null = null;

 // Guard against rapid double-click play/pause sending two state transitions
 // to the Rust backend before it has finished the previous one.
@@ -159,6 +172,18 @@ function handleAudioPlaying(_duration: number) {
 }

 function handleAudioProgress(current_time: number, duration: number) {
+  // While a seek is pending, the store already holds the optimistic target
+  // position.  Accepting stale progress from the Rust engine would briefly
+  // snap the waveform back to the old position before the seek completes.
+  if (seekDebounce) return;
+  // After the debounce fires, Rust may still emit 1–2 ticks with the old
+  // position before the seek takes effect.  Block until current_time is
+  // within 2 s of the requested target, then clear the guard.
+  if (seekTarget !== null) {
+    if (Math.abs(current_time - seekTarget) > 2.0) return;
+    seekTarget = null;
+  }
+
  const store = usePlayerStore.getState();
  const track = store.currentTrack;
  if (!track) return;
@@ -277,8 +302,8 @@ function handleAudioTrackSwitched(duration: number) {
  });

  // Report Now Playing to Navidrome + Last.fm
-  reportNowPlaying(nextTrack.id);
-  const { scrobblingEnabled, lastfmSessionKey } = useAuthStore.getState();
+  const { nowPlayingEnabled, scrobblingEnabled, lastfmSessionKey } = useAuthStore.getState();
+  if (nowPlayingEnabled) reportNowPlaying(nextTrack.id);
  if (lastfmSessionKey) {
    if (scrobblingEnabled) lastfmUpdateNowPlaying(nextTrack, lastfmSessionKey);
    lastfmGetTrackLoved(nextTrack.title, nextTrack.artist, lastfmSessionKey).then(loved => {
@@ -422,6 +447,10 @@ export const usePlayerStore = create<PlayerState>()(
        contextMenu: { ...state.contextMenu, isOpen: false },
      })),

+      songInfoModal: { isOpen: false, songId: null },
+      openSongInfo: (songId) => set({ songInfoModal: { isOpen: true, songId } }),
+      closeSongInfo: () => set({ songInfoModal: { isOpen: false, songId: null } }),
+
      toggleQueue: () => set(state => ({ isQueueVisible: !state.isQueueVisible })),
      setQueueVisible: (v: boolean) => set({ isQueueVisible: v }),
      toggleFullscreen: () => set(state => ({ isFullscreenOpen: !state.isFullscreenOpen })),
@@ -484,7 +513,7 @@ export const usePlayerStore = create<PlayerState>()(
      stop: () => {
        invoke('audio_stop').catch(console.error);
        isAudioPaused = false;
-        if (seekDebounce) { clearTimeout(seekDebounce); seekDebounce = null; }
+        if (seekDebounce) { clearTimeout(seekDebounce); seekDebounce = null; } seekTarget = null;
        set({ isPlaying: false, progress: 0, buffered: 0, currentTime: 0 });
      },

@@ -499,7 +528,7 @@ export const usePlayerStore = create<PlayerState>()(
        const gen = ++playGeneration;
        isAudioPaused = false;
        gaplessPreloadingId = null; // new track — allow fresh preload for next
-        if (seekDebounce) { clearTimeout(seekDebounce); seekDebounce = null; }
+        if (seekDebounce) { clearTimeout(seekDebounce); seekDebounce = null; } seekTarget = null;

        const state = get();
        const newQueue = queue ?? state.queue;
@@ -541,8 +570,8 @@ export const usePlayerStore = create<PlayerState>()(
        });

        // Report Now Playing to Navidrome (for Live/getNowPlaying) + Last.fm
-        reportNowPlaying(track.id);
-        const { scrobblingEnabled: lfmEnabled, lastfmSessionKey: lfmKey } = useAuthStore.getState();
+        const { nowPlayingEnabled: npEnabled, scrobblingEnabled: lfmEnabled, lastfmSessionKey: lfmKey } = useAuthStore.getState();
+        if (npEnabled) reportNowPlaying(track.id);
        if (lfmKey) {
          if (lfmEnabled) lastfmUpdateNowPlaying(track, lfmKey);
          lastfmGetTrackLoved(track.title, track.artist, lfmKey).then(loved => {
@@ -573,33 +602,62 @@ export const usePlayerStore = create<PlayerState>()(
          isAudioPaused = false;
          set({ isPlaying: true });
        } else {
-          // Cold start (app relaunch) — audio is not loaded in Rust; re-download.
+          // Cold start (app relaunch) — fetch fresh track data for replay gain, then play.
          const gen = ++playGeneration;
          const vol = get().volume;
          set({ isPlaying: true });
-          const authStateCold = useAuthStore.getState();
-          const replayGainDbCold = authStateCold.replayGainEnabled
-            ? (authStateCold.replayGainMode === 'album' ? currentTrack.replayGainAlbumDb : currentTrack.replayGainTrackDb) ?? null
-            : null;
-          const replayGainPeakCold = authStateCold.replayGainEnabled ? (currentTrack.replayGainPeak ?? null) : null;
-          const coldServerId = useAuthStore.getState().activeServerId ?? '';
-          const coldUrl = useOfflineStore.getState().getLocalUrl(currentTrack.id, coldServerId) ?? buildStreamUrl(currentTrack.id);
-          invoke('audio_play', {
-            url: coldUrl,
-            volume: vol,
-            durationHint: currentTrack.duration,
-            replayGainDb: replayGainDbCold,
-            replayGainPeak: replayGainPeakCold,
-          }).then(() => {
-            if (playGeneration === gen && currentTime > 1) {
-              invoke('audio_seek', { seconds: currentTime }).catch(console.error);
-            }
-          }).catch((err: unknown) => {
-            if (playGeneration !== gen) return;
-            console.error('[psysonic] audio_play (cold resume) failed:', err);
-            set({ isPlaying: false });
-          });
-          syncQueueToServer(queue, currentTrack, currentTime);
+          
+          // Fetch fresh track data from server to get replay gain metadata
+          getSong(currentTrack.id).then(freshSong => {
+            const trackToPlay = freshSong ? songToTrack(freshSong) : currentTrack;
+            // Update store with fresh track data if available
+            if (freshSong) set({ currentTrack: trackToPlay });
+            const authStateCold = useAuthStore.getState();
+            const replayGainDbCold = authStateCold.replayGainEnabled
+              ? (authStateCold.replayGainMode === 'album' ? trackToPlay.replayGainAlbumDb : trackToPlay.replayGainTrackDb) ?? null
+              : null;
+            const replayGainPeakCold = authStateCold.replayGainEnabled ? (trackToPlay.replayGainPeak ?? null) : null;
+            const coldServerId = useAuthStore.getState().activeServerId ?? '';
+            const coldUrl = useOfflineStore.getState().getLocalUrl(trackToPlay.id, coldServerId) ?? buildStreamUrl(trackToPlay.id);
+            invoke('audio_play', {
+              url: coldUrl,
+              volume: vol,
+              durationHint: trackToPlay.duration,
+              replayGainDb: replayGainDbCold,
+              replayGainPeak: replayGainPeakCold,
+            }).then(() => {
+              if (playGeneration === gen && currentTime > 1) {
+                invoke('audio_seek', { seconds: currentTime }).catch(console.error);
+              }
+            }).catch((err: unknown) => {
+              if (playGeneration !== gen) return;
+              console.error('[psysonic] audio_play (cold resume) failed:', err);
+              set({ isPlaying: false });
+            });
+            syncQueueToServer(queue, trackToPlay, currentTime);
+          }).catch(() => {
+             if (playGeneration !== gen) return;
+             // Fallback to currentTrack if fetch fails
+             const authStateCold = useAuthStore.getState();
+             const replayGainDbCold = authStateCold.replayGainEnabled
+               ? (authStateCold.replayGainMode === 'album' ? currentTrack.replayGainAlbumDb : currentTrack.replayGainTrackDb) ?? null
+               : null;
+             const replayGainPeakCold = authStateCold.replayGainEnabled ? (currentTrack.replayGainPeak ?? null) : null;
+             const coldServerId = useAuthStore.getState().activeServerId ?? '';
+             const coldUrl = useOfflineStore.getState().getLocalUrl(currentTrack.id, coldServerId) ?? buildStreamUrl(currentTrack.id);
+             invoke('audio_play', {
+               url: coldUrl,
+               volume: vol,
+               durationHint: currentTrack.duration,
+               replayGainDb: replayGainDbCold,
+               replayGainPeak: replayGainPeakCold,
+             }).catch((err: unknown) => {
+               if (playGeneration !== gen) return;
+               console.error('[psysonic] audio_play (cold resume) failed:', err);
+               set({ isPlaying: false });
+             });
+             syncQueueToServer(queue, currentTrack, currentTime);
+           });
        }
      },

@@ -650,6 +708,7 @@ export const usePlayerStore = create<PlayerState>()(
        if (seekDebounce) clearTimeout(seekDebounce);
        seekDebounce = setTimeout(() => {
          seekDebounce = null;
+          seekTarget = time;
          invoke('audio_seek', { seconds: time }).catch(console.error);
        }, 100);
      },
@@ -674,10 +733,26 @@ export const usePlayerStore = create<PlayerState>()(
        });
      },

+      enqueueAt: (tracks, insertIndex) => {
+        set(state => {
+          const idx = Math.max(0, Math.min(insertIndex, state.queue.length));
+          const newQueue = [
+            ...state.queue.slice(0, idx),
+            ...tracks,
+            ...state.queue.slice(idx),
+          ];
+          const newQueueIndex = idx <= state.queueIndex
+            ? state.queueIndex + tracks.length
+            : state.queueIndex;
+          syncQueueToServer(newQueue, state.currentTrack, state.currentTime);
+          return { queue: newQueue, queueIndex: newQueueIndex };
+        });
+      },
+
      clearQueue: () => {
        invoke('audio_stop').catch(console.error);
        isAudioPaused = false;
-        if (seekDebounce) { clearTimeout(seekDebounce); seekDebounce = null; }
+        if (seekDebounce) { clearTimeout(seekDebounce); seekDebounce = null; } seekTarget = null;
        set({ queue: [], queueIndex: 0, currentTrack: null, isPlaying: false, progress: 0, buffered: 0, currentTime: 0 });
        syncQueueToServer([], null, 0);
      },
@@ -720,40 +795,55 @@ export const usePlayerStore = create<PlayerState>()(

      // ── server queue restore ─────────────────────────────────────────────────
      initializeFromServerQueue: async () => {
-        try {
-          const q = await getPlayQueue();
-          if (q.songs.length > 0) {
-            const mappedTracks: Track[] = q.songs.map((s: SubsonicSong) => ({
-              id: s.id, title: s.title, artist: s.artist, album: s.album,
-              albumId: s.albumId, artistId: s.artistId, duration: s.duration,
-              coverArt: s.coverArt, track: s.track, year: s.year,
-              bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating,
-            }));
+          try {
+            const q = await getPlayQueue();
+            if (q.songs.length > 0) {
+              const mappedTracks: Track[] = q.songs.map(songToTrack);

-            let currentTrack = mappedTracks[0];
-            let queueIndex = 0;
+              let currentTrack = mappedTracks[0];
+             let queueIndex = 0;

-            if (q.current) {
-              const idx = mappedTracks.findIndex(t => t.id === q.current);
-              if (idx >= 0) { currentTrack = mappedTracks[idx]; queueIndex = idx; }
-            }
+             if (q.current) {
+               const idx = mappedTracks.findIndex(t => t.id === q.current);
+               if (idx >= 0) { currentTrack = mappedTracks[idx]; queueIndex = idx; }
+             }

-            // Prefer the server position if available; otherwise keep the
-            // localStorage-persisted currentTime (more reliable than server
-            // queue position, which may not flush before app close).
-            const serverTime = q.position ? q.position / 1000 : 0;
-            const localTime = get().currentTime;
-            set({
-              queue: mappedTracks,
-              queueIndex,
-              currentTrack,
-              currentTime: serverTime > 0 ? serverTime : localTime,
-            });
-          }
-        } catch (e) {
-          console.error('Failed to initialize queue from server', e);
-        }
-      },
+             // Prefer the server position if available; otherwise keep the
+             // localStorage-persisted currentTime (more reliable than server
+             // queue position, which may not flush before app close).
+             const serverTime = q.position ? q.position / 1000 : 0;
+             const localTime = get().currentTime;
+             set({
+               queue: mappedTracks,
+               queueIndex,
+               currentTrack,
+               currentTime: serverTime > 0 ? serverTime : localTime,
+             });
+           }
+         } catch (e) {
+           console.error('Failed to initialize queue from server', e);
+         }
+       },
+
+       updateReplayGainForCurrentTrack: () => {
+         const { currentTrack, volume } = get();
+         if (!currentTrack || !currentTrack.id) return;
+         const authState = useAuthStore.getState();
+         const replayGainDb = authState.replayGainEnabled
+           ? (authState.replayGainMode === 'album' 
+               ? currentTrack.replayGainAlbumDb 
+               : currentTrack.replayGainTrackDb) ?? null
+           : null;
+         const replayGainPeak = authState.replayGainEnabled 
+           ? (currentTrack.replayGainPeak ?? null) 
+           : null;
+         
+         invoke('audio_update_replay_gain', { 
+           volume, 
+           replayGainDb, 
+           replayGainPeak 
+         }).catch(console.error);
+       },
    }),
    {
      name: 'psysonic-player',
@@ -766,7 +856,7 @@ export const usePlayerStore = create<PlayerState>()(
        queueIndex: state.queueIndex,
        currentTime: state.currentTime,
        lastfmLovedCache: state.lastfmLovedCache,
-      } as Partial<PlayerState>),
+      }),
    }
  )
 );
@@ -0,0 +1,23 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+interface PlaylistStore {
+  recentIds: string[];
+  touchPlaylist: (id: string) => void;
+  removeId: (id: string) => void;
+}
+
+export const usePlaylistStore = create<PlaylistStore>()(
+  persist(
+    (set) => ({
+      recentIds: [],
+      touchPlaylist: (id) =>
+        set((s) => ({
+          recentIds: [id, ...s.recentIds.filter((x) => x !== id)].slice(0, 50),
+        })),
+      removeId: (id) =>
+        set((s) => ({ recentIds: s.recentIds.filter((x) => x !== id) })),
+    }),
+    { name: 'psysonic_playlists_recent' }
+  )
+);
@@ -0,0 +1,47 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+export interface SidebarItemConfig {
+  id: string;
+  visible: boolean;
+}
+
+// All configurable nav items in their default order.
+// Fixed items (nowPlaying, settings, offline) are not listed here.
+export const DEFAULT_SIDEBAR_ITEMS: SidebarItemConfig[] = [
+  { id: 'mainstage',     visible: true },
+  { id: 'newReleases',   visible: true },
+  { id: 'allAlbums',     visible: true },
+  { id: 'randomAlbums',  visible: true },
+  { id: 'artists',       visible: true },
+  { id: 'genres',        visible: true },
+  { id: 'randomMix',     visible: true },
+  { id: 'favorites',     visible: true },
+  { id: 'playlists',     visible: true },
+  { id: 'statistics',    visible: true },
+  { id: 'help',          visible: true },
+];
+
+interface SidebarStore {
+  items: SidebarItemConfig[];
+  setItems: (items: SidebarItemConfig[]) => void;
+  toggleItem: (id: string) => void;
+  reset: () => void;
+}
+
+export const useSidebarStore = create<SidebarStore>()(
+  persist(
+    (set) => ({
+      items: DEFAULT_SIDEBAR_ITEMS,
+
+      setItems: (items) => set({ items }),
+
+      toggleItem: (id) => set((s) => ({
+        items: s.items.map(item => item.id === id ? { ...item, visible: !item.visible } : item),
+      })),
+
+      reset: () => set({ items: DEFAULT_SIDEBAR_ITEMS }),
+    }),
+    { name: 'psysonic_sidebar' }
+  )
+);
@@ -1,7 +1,7 @@
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';

-type Theme = 'mocha' | 'macchiato' | 'frappe' | 'latte' | 'nord' | 'nord-snowstorm' | 'nord-frost' | 'nord-aurora' | 'psychowave' | 'wnamp' | 'poison' | 'nucleo' | 'muma-jukebox' | 'winmedplayer' | 'p-dvd' | 'vintage-tube-radio' | 'neon-drift' | 'aero-glass' | 'luna-teal' | 'w98' | 'cupertino-light' | 'cupertino-dark' | 'gruvbox-dark-hard' | 'gruvbox-dark-medium' | 'gruvbox-dark-soft' | 'gruvbox-light-hard' | 'gruvbox-light-medium' | 'gruvbox-light-soft' | 'spotless' | 'dzr0' | 'cupertino-beats' | 'lambda-17' | 'gw1' | 'grand-theft-audio' | 'v-tactical' | 'nightcity-2077' | 'middle-earth' | 'morpheus' | 'stark-hud' | 'blade' | 'heisenberg' | 'ice-and-fire' | 'doh-matic' | 't-800' | 'dune' | 'tetrastack' | 'the-book' | 'readit' | 'insta' | 'hill-valley-85' | 'turtle-power' | 'w3-1' | 'aqua-quartz' | 'spider-tech' | 'dos' | 'unix' | 'jayfin' | 'horde' | 'alliance' | 'w11' | 'w10';
+type Theme = 'mocha' | 'macchiato' | 'frappe' | 'latte' | 'nord' | 'nord-snowstorm' | 'nord-frost' | 'nord-aurora' | 'psychowave' | 'wnamp' | 'poison' | 'nucleo' | 'muma-jukebox' | 'winmedplayer' | 'p-dvd' | 'vintage-tube-radio' | 'neon-drift' | 'aero-glass' | 'luna-teal' | 'w98' | 'cupertino-light' | 'cupertino-dark' | 'gruvbox-dark-hard' | 'gruvbox-dark-medium' | 'gruvbox-dark-soft' | 'gruvbox-light-hard' | 'gruvbox-light-medium' | 'gruvbox-light-soft' | 'spotless' | 'dzr0' | 'cupertino-beats' | 'lambda-17' | 'gw1' | 'grand-theft-audio' | 'v-tactical' | 'nightcity-2077' | 'middle-earth' | 'morpheus' | 'stark-hud' | 'blade' | 'heisenberg' | 'ice-and-fire' | 'doh-matic' | 't-800' | 'dune' | 'tetrastack' | 'the-book' | 'readit' | 'insta' | 'hill-valley-85' | 'turtle-power' | 'w3-1' | 'aqua-quartz' | 'spider-tech' | 'dos' | 'unix' | 'jayfin' | 'horde' | 'alliance' | 'w11' | 'w10' | 'north-park' | 'dark-side-of-the-moon' | 'powerslave';

 interface ThemeState {
  theme: Theme;
@@ -154,6 +154,20 @@
  box-shadow: var(--shadow-glow);
 }

+/* ─ Page header row (title + actions) ─ */
+.page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  flex-wrap: wrap;
+  margin-bottom: var(--space-6);
+}
+
+.page-header .page-title {
+  margin-bottom: 0;
+}
+
 /* ─ Section titles ─ */
 .section-title,
 .page-title {
@@ -169,15 +183,14 @@
  cursor: pointer;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
-  border: 1px solid var(--border-subtle);
  overflow: hidden;
-  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
+  box-shadow: inset 0 0 0 1px var(--border-subtle);
+  transition: transform var(--transition-base), box-shadow var(--transition-base);
 }

 .album-card:hover {
  transform: translateY(-3px);
-  box-shadow: var(--shadow-md);
-  border-color: var(--border);
+  box-shadow: inset 0 0 0 1px var(--border), var(--shadow-md);
 }

 .album-card-cover {
@@ -363,6 +376,11 @@
  gap: var(--space-4);
 }

+.album-grid-wrap .album-card {
+  content-visibility: auto;
+  contain-intrinsic-size: 0 220px;
+}
+

@media (min-width: 1024px) {
  .album-grid-wrap {
@@ -498,13 +516,13 @@

 .live-search-field {
  padding-left: 36px !important;
-  padding-right: 32px !important;
+  padding-right: 58px !important;
  border-radius: var(--radius-full) !important;
 }

 .live-search-clear {
  position: absolute;
-  right: 12px;
+  right: 8px;
  font-size: 18px;
  color: var(--text-muted);
  line-height: 1;
@@ -515,6 +533,29 @@
  color: var(--text-primary);
 }

+.live-search-adv-btn {
+  position: absolute;
+  right: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--text-muted);
+  opacity: 0.55;
+  transition: opacity var(--transition-fast), color var(--transition-fast);
+  border-radius: var(--radius-sm);
+  padding: 0;
+}
+
+.live-search-adv-btn:hover {
+  opacity: 1;
+  color: var(--accent);
+}
+
 .live-search-dropdown {
  position: absolute;
  top: calc(100% + 8px);
@@ -803,6 +844,30 @@
  color: var(--text-muted);
 }

+/* ── Playlist 2×2 cover grid ── */
+.playlist-cover-grid {
+  flex-shrink: 0;
+  width: clamp(120px, 15vw, 200px);
+  height: clamp(120px, 15vw, 200px);
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  box-shadow: var(--shadow-lg);
+}
+
+.playlist-cover-cell {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.playlist-cover-cell--empty {
+  background: var(--bg-hover);
+}
+
 .album-detail-meta {
  min-width: 0;
  flex: 1;
@@ -1011,6 +1076,87 @@
  margin-top: 4px;
 }

+/* ─ Song Info Modal ─ */
+.song-info-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 9990;
+}
+.song-info-modal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 9991;
+  width: 460px;
+  max-width: calc(100vw - 32px);
+  max-height: 80vh;
+  background: var(--bg-card, var(--bg-secondary));
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.song-info-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 16px 12px;
+  border-bottom: 1px solid var(--border-subtle);
+  flex-shrink: 0;
+}
+.song-info-title {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--text-primary);
+  letter-spacing: 0.02em;
+}
+.song-info-close {
+  padding: 4px;
+  color: var(--text-muted);
+}
+.song-info-body {
+  overflow-y: auto;
+  padding: 12px 4px 16px;
+}
+.song-info-loading {
+  text-align: center;
+  color: var(--text-muted);
+  font-size: 13px;
+  padding: 24px;
+}
+.song-info-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+.song-info-label {
+  color: var(--text-muted);
+  padding: 4px 16px 4px 16px;
+  white-space: nowrap;
+  vertical-align: top;
+  width: 140px;
+  font-size: 12px;
+}
+.song-info-value {
+  color: var(--text-primary);
+  padding: 4px 16px 4px 8px;
+  word-break: break-all;
+}
+.song-info-divider {
+  padding: 6px 0;
+  border-bottom: 1px solid var(--border-subtle);
+}
+.song-info-path {
+  font-family: var(--font-mono, monospace);
+  font-size: 11px;
+  color: var(--text-secondary);
+  word-break: break-all;
+}
+
 /* ─ Tracklist ─ */
 .tracklist {
  padding: 0 var(--space-6) var(--space-6);
@@ -1022,7 +1168,7 @@

 .tracklist-header {
  display: grid;
-  grid-template-columns: 36px minmax(100px, 3fr) 70px 80px 60px 120px;
+  grid-template-columns: 60px minmax(100px, 3fr) 70px 80px 60px 120px;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2) var(--space-3);
@@ -1036,12 +1182,12 @@
 }

 .tracklist-header.tracklist-va {
-  grid-template-columns: 36px minmax(100px, 2fr) minmax(80px, 1.2fr) 70px 80px 60px 120px;
+  grid-template-columns: 60px minmax(80px, 1.5fr) minmax(60px, 1fr) 70px 80px 60px 120px;
 }

 .track-row {
  display: grid;
-  grid-template-columns: 36px minmax(100px, 3fr) 70px 80px 60px 120px;
+  grid-template-columns: 60px minmax(100px, 3fr) 70px 80px 60px 120px;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2) var(--space-3);
@@ -1052,12 +1198,12 @@
 }

 .track-row.track-row-va {
-  grid-template-columns: 36px minmax(100px, 2fr) minmax(80px, 1.2fr) 70px 80px 60px 120px;
+  grid-template-columns: 60px minmax(80px, 1.5fr) minmax(60px, 1fr) 70px 80px 60px 120px;
 }

 .tracklist-total {
  display: grid;
-  grid-template-columns: 36px minmax(100px, 3fr) 70px 80px 60px 120px;
+  grid-template-columns: 60px minmax(100px, 3fr) 70px 80px 60px 120px;
  gap: var(--space-3);
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-2) var(--space-3);
@@ -1065,7 +1211,7 @@
 }

 .tracklist-total.tracklist-va {
-  grid-template-columns: 36px minmax(100px, 2fr) minmax(80px, 1.2fr) 70px 80px 60px 120px;
+  grid-template-columns: 60px minmax(80px, 1.5fr) minmax(60px, 1fr) 70px 80px 60px 120px;
 }

 .tracklist-total-label {
@@ -1095,6 +1241,60 @@
  grid-column: 6 / 7;
 }

+/* ── Playlist tracklist variant — adds delete column ── */
+.tracklist-header.tracklist-playlist,
+.track-row.tracklist-playlist,
+.tracklist-total.tracklist-playlist {
+  grid-template-columns: 60px minmax(80px, 1.5fr) minmax(60px, 1fr) 70px 80px 60px 120px 36px;
+}
+
+.tracklist-total.tracklist-playlist .tracklist-total-label {
+  grid-column: 1 / 6;
+}
+
+.tracklist-total.tracklist-playlist .tracklist-total-value {
+  grid-column: 6 / 7;
+}
+
+/* Delete button in playlist row */
+.playlist-row-delete-cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.playlist-row-delete-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--text-muted);
+  padding: 4px;
+  border-radius: var(--radius-sm);
+  display: flex;
+  align-items: center;
+  opacity: 0;
+  transition: opacity var(--transition-fast), color var(--transition-fast);
+}
+
+.track-row:hover .playlist-row-delete-btn,
+.track-row.context-active .playlist-row-delete-btn {
+  opacity: 1;
+}
+
+.playlist-row-delete-btn:hover {
+  color: var(--danger);
+}
+
+/* In suggestion rows the + btn is always visible at muted opacity */
+.playlist-suggestions .playlist-row-delete-btn {
+  opacity: 0.45;
+}
+
+.playlist-suggestions .track-row:hover .playlist-row-delete-btn {
+  opacity: 1;
+  color: var(--accent);
+}
+
 .track-row:hover,
 .track-row.context-active {
  background: var(--bg-hover);
@@ -1128,10 +1328,22 @@
 }

 .track-num {
+  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
 }
+.track-num .bulk-check {
+  position: absolute;
+  left: 6px;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.1s;
+}
+.track-num .bulk-check.bulk-check-visible {
+  opacity: 1;
+  pointer-events: auto;
+}

 /* Equalizer bars — shown for the currently playing track */
 .eq-bars {
@@ -1828,6 +2040,66 @@
  gap: var(--space-4);
 }

+.settings-section-divider {
+  border: none;
+  border-top: 1px solid var(--border);
+  margin: var(--space-3) 0;
+}
+
+/* ─ Sidebar Customizer ─ */
+.sidebar-customizer-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: 8px var(--space-4);
+  border-radius: var(--radius-sm);
+  transition: background var(--transition-fast), opacity var(--transition-fast);
+  cursor: default;
+}
+
+.sidebar-customizer-row:hover {
+  background: var(--bg-hover);
+}
+
+.sidebar-customizer-row.drag-over {
+  background: var(--accent-dim);
+  outline: 1px solid var(--accent);
+  outline-offset: -1px;
+}
+
+.sidebar-customizer-row.dragging {
+  opacity: 0.4;
+}
+
+.sidebar-customizer-grip {
+  cursor: grab;
+  color: var(--text-muted);
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.sidebar-customizer-grip:active {
+  cursor: grabbing;
+}
+
+.sidebar-customizer-block-label {
+  padding: 6px var(--space-4) 4px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-muted);
+}
+
+.sidebar-customizer-fixed-hint {
+  padding: 8px var(--space-4) 6px;
+  font-size: 11px;
+  color: var(--text-muted);
+  border-top: 1px solid var(--border);
+  margin-top: 4px;
+}
+
 .settings-about {
  display: flex;
  flex-direction: column;
@@ -4127,6 +4399,7 @@
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  max-height: 220px;
  overflow-y: auto;
+  overscroll-behavior: contain;
  z-index: 500;
 }

@@ -4199,3 +4472,328 @@
  color: rgba(255, 255, 255, 0.85);
  margin: 0.2rem 0 0;
 }
+
+/* ─ Playlists overview header ─ */
+.playlists-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  flex-wrap: wrap;
+  margin-bottom: var(--space-6);
+}
+
+/* ─ Playlist Card (Grid Overview) ─ */
+.playlist-card-icon {
+  color: var(--accent);
+  opacity: 0.6;
+}
+
+/* Delete button — top-right corner of card cover, hidden until hover */
+.playlist-card-delete {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  border: none;
+  background: rgba(0, 0, 0, 0.55);
+  color: rgba(255, 255, 255, 0.75);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
+  z-index: 2;
+}
+
+.album-card:hover .playlist-card-delete {
+  opacity: 1;
+}
+
+.playlist-card-delete:hover {
+  background: rgba(220, 60, 60, 0.85);
+  color: #fff;
+}
+
+.playlist-card-delete--confirm {
+  background: #dc3c3c !important;
+  color: #fff !important;
+  opacity: 1 !important;
+  width: 30px !important;
+  height: 30px !important;
+  top: 3px !important;
+  right: 3px !important;
+  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.45);
+  animation: delete-confirm-pulse 0.7s ease-in-out infinite alternate;
+}
+
+@keyframes delete-confirm-pulse {
+  from { background: #dc3c3c; }
+  to   { background: #ff2222; }
+}
+
+/* ─ Bulk Select ─ */
+.bulk-action-bar {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-3);
+  background: var(--accent-dim, color-mix(in srgb, var(--accent) 15%, transparent));
+  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
+  border-radius: var(--radius);
+  margin-bottom: var(--space-2);
+}
+.bulk-action-count {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--accent);
+  margin-right: auto;
+}
+.bulk-pl-picker-wrap {
+  position: relative;
+}
+
+.bulk-check {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  border: 1.5px solid var(--text-muted);
+  border-radius: 3px;
+  background: transparent;
+  vertical-align: middle;
+  flex-shrink: 0;
+  transition: border-color 0.1s, background 0.1s;
+}
+.bulk-check.checked {
+  background: var(--accent);
+  border-color: var(--accent);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%23fff' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-size: 10px 10px;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+.track-row.bulk-selected {
+  background: color-mix(in srgb, var(--accent) 10%, transparent) !important;
+}
+.track-row.bulk-selected:hover {
+  background: color-mix(in srgb, var(--accent) 16%, transparent) !important;
+}
+
+/* Drop indicator line */
+.playlist-drop-indicator {
+  height: 2px;
+  background: var(--accent);
+  border-radius: 1px;
+  margin: 1px 0;
+  pointer-events: all;
+}
+
+/* ─ Playlist Search Panel ─ */
+.playlist-search-panel {
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: var(--space-3) var(--space-3) var(--space-2);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  margin-bottom: var(--space-4);
+  animation: fade-in-down 0.15s ease;
+}
+
+@keyframes fade-in-down {
+  from { opacity: 0; transform: translateY(-6px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.playlist-search-input-wrap {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.playlist-search-input-wrap .input {
+  width: 100%;
+  padding-right: 36px;
+}
+
+.playlist-search-input-wrap .live-search-clear {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+}
+
+.playlist-search-row {
+  display: grid;
+  grid-template-columns: 36px 1fr auto 52px 28px;
+  align-items: center;
+  gap: var(--space-2);
+  padding: 3px var(--space-1);
+  border-radius: var(--radius-sm);
+  transition: background var(--transition-fast);
+}
+
+.playlist-search-row:hover {
+  background: var(--bg-hover);
+}
+
+.playlist-search-thumb {
+  width: 36px;
+  height: 36px;
+  object-fit: cover;
+  border-radius: var(--radius-xs);
+  background: var(--bg-hover);
+  flex-shrink: 0;
+}
+
+.playlist-search-info {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.playlist-search-title {
+  font-size: 13px;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--text-primary);
+}
+
+.playlist-search-artist {
+  font-size: 11px;
+  color: var(--text-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.playlist-search-album {
+  font-size: 11px;
+  color: var(--text-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.playlist-search-duration {
+  font-size: 12px;
+  color: var(--text-muted);
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+.playlist-search-add-btn {
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-muted);
+  transition: background var(--transition-fast), color var(--transition-fast);
+  flex-shrink: 0;
+}
+
+.playlist-search-add-btn:hover {
+  background: var(--accent);
+  color: var(--ctp-base);
+}
+
+.playlist-suggestions {
+  margin-top: var(--space-6);
+}
+
+.playlist-suggestions-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  padding: 0 var(--space-3);
+  margin-bottom: var(--space-1);
+}
+
+/* ─ Context Menu Submenu ─ */
+.context-menu-item--submenu {
+  position: relative;
+}
+
+.context-menu-item--submenu.active,
+.context-menu-item--submenu:hover {
+  background: var(--surface-2);
+  color: var(--accent);
+}
+
+.context-submenu {
+  position: absolute;
+  top: -4px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: var(--space-1) 0;
+  min-width: 190px;
+  max-width: 250px;
+  max-height: 280px;
+  overflow-y: auto;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
+  z-index: 10001;
+}
+
+.context-submenu-empty {
+  padding: var(--space-2) var(--space-4);
+  color: var(--text-muted);
+  font-size: 12px;
+}
+
+.context-submenu-new {
+  color: var(--accent);
+  font-weight: 500;
+}
+
+.context-submenu-create {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: var(--space-1) var(--space-2);
+}
+
+.context-submenu-input {
+  flex: 1;
+  min-width: 0;
+  background: var(--bg-surface);
+  border: 1px solid var(--accent);
+  border-radius: var(--radius-sm);
+  color: var(--text-primary);
+  font-size: 12px;
+  padding: 3px 7px;
+  outline: none;
+}
+
+.context-submenu-input::placeholder {
+  color: var(--text-muted);
+}
+
+.context-submenu-create-btn {
+  flex-shrink: 0;
+  background: var(--accent);
+  border: none;
+  border-radius: var(--radius-sm);
+  color: var(--ctp-crust);
+  padding: 4px 6px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  transition: opacity var(--transition-fast);
+}
+
+.context-submenu-create-btn:hover {
+  opacity: 0.85;
+}
+
@@ -243,6 +243,105 @@
  to   { opacity: 1; transform: translateY(0); }
 }

+/* ── AppUpdater floating toast ── */
+.app-updater-toast {
+  position: fixed;
+  bottom: calc(var(--player-height, 80px) + 12px);
+  left: 12px;
+  width: 210px;
+  padding: var(--space-3);
+  border-radius: var(--radius-md);
+  background: var(--bg-sidebar);
+  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
+  box-shadow: 0 4px 20px rgba(0,0,0,0.35);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  z-index: 9000;
+  animation: update-toast-in 0.35s ease both;
+}
+.app-updater-header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  color: var(--accent);
+}
+.app-updater-label {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  flex: 1;
+}
+.app-updater-dismiss {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--text-muted);
+  padding: 0;
+  display: flex;
+  align-items: center;
+  opacity: 0.6;
+  transition: opacity var(--transition-fast);
+}
+.app-updater-dismiss:hover { opacity: 1; }
+.app-updater-version {
+  font-size: 12px;
+  color: var(--text-secondary);
+  padding-left: 19px;
+}
+.app-updater-actions {
+  padding-left: 19px;
+  margin-top: 2px;
+}
+.app-updater-btn-primary {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--accent);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  opacity: 0.85;
+  transition: opacity var(--transition-fast);
+}
+.app-updater-btn-primary:hover { opacity: 1; }
+.app-updater-progress-wrap {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding-left: 19px;
+  margin-top: 2px;
+}
+.app-updater-progress-bar {
+  flex: 1;
+  height: 3px;
+  background: var(--bg-glass);
+  border-radius: 2px;
+  overflow: hidden;
+}
+.app-updater-progress-fill {
+  height: 100%;
+  background: var(--accent);
+  border-radius: 2px;
+  transition: width 0.15s ease;
+}
+.app-updater-pct {
+  font-size: 10px;
+  color: var(--text-muted);
+  min-width: 26px;
+  text-align: right;
+}
+.app-updater-status {
+  font-size: 11px;
+  color: var(--text-secondary);
+  padding-left: 19px;
+  font-style: italic;
+}
+
 .update-toast {
  margin: 0 var(--space-1) var(--space-2);
  padding: var(--space-3) var(--space-3);
@@ -592,6 +691,11 @@
  height: 28px;
 }

+/* Star + Last.fm heart — visually separated from track title */
+.player-star-btn {
+  margin-left: var(--space-3);
+}
+
 .player-btn-primary {
  width: 46px;
  height: 46px;
@@ -617,8 +721,8 @@
  display: flex;
  align-items: center;
  gap: var(--space-2);
-  margin-left: 32px;
-  margin-right: 32px;
+  margin-left: 24px;
+  margin-right: 24px;
 }

 .player-waveform-wrap {
@@ -632,6 +736,15 @@
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
+  min-width: 2.5rem;
+}
+
+.player-time:first-child {
+  text-align: right;
+}
+
+.player-time:last-child {
+  text-align: left;
 }

 /* Volume section */
@@ -750,6 +863,11 @@
  min-height: 0; /* allow 1fr row to shrink freely */
 }

+.queue-panel.queue-drop-active {
+  box-shadow: inset 0 0 0 2px var(--accent);
+  background: linear-gradient(var(--accent-dim), var(--accent-dim)), var(--bg-sidebar);
+}
+
 .queue-header {
  height: 64px;
  box-sizing: border-box;
@@ -1053,6 +1053,20 @@
  --danger:        #9d0006;
 }

+/* ── Gruvbox Light Soft overrides ── */
+[data-theme='gruvbox-light-soft'] .album-detail-back {
+  color: #fbf1c7;
+}
+[data-theme='gruvbox-light-soft'] .album-detail-back:hover {
+  background: rgba(255, 255, 255, 0.15);
+  color: #ffffff;
+}
+
+[data-theme='gruvbox-light-soft'] .album-detail-badge {
+  background: var(--accent);
+  color: #fbf1c7;
+}
+
 /* ─── Lambda 17 — Half-Life / City 17 ─── */
 /* HEV orange + Combine Overwatch teal + City 17 concrete       */
 [data-theme='lambda-17'] {
@@ -3196,6 +3210,16 @@ body.is-dragging * {
  cursor: col-resize !important;
 }

+/* ─── Mouse-event DnD cursor (psy-dragging) ──────────────────────
+   Applied by DragDropProvider while a mouse-based drag is active.
+   Overrides cursor globally to "grabbing" and prevents text-
+   selection / stray pointer events on child elements. ─────────── */
+body.psy-dragging,
+body.psy-dragging * {
+  cursor: grabbing !important;
+  user-select: none !important;
+}
+
 /* ─── Utility Classes ─── */
 .glass {
  background: var(--bg-glass, rgba(30, 30, 46, 0.75));
@@ -3296,13 +3320,13 @@ select.input.input:focus {
 .card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
-  border: 1px solid var(--border-subtle);
  overflow: hidden;
+  box-shadow: inset 0 0 0 1px var(--border-subtle);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
 }
 .card:hover {
  transform: translateY(-2px);
-  box-shadow: var(--shadow-md);
+  box-shadow: inset 0 0 0 1px var(--border), var(--shadow-md);
 }

 /* ─── Album Grid ─── */
@@ -10987,3 +11011,703 @@ input[type="range"]:hover::-webkit-slider-thumb {
 /* Connection indicators */
 [data-theme='toy-tale'] .connection-type,
 [data-theme='toy-tale'] .connection-server { color: #6a5030; }
+
+/* ─── North Park — South Park ─── */
+/* Construction paper flat aesthetic — paper-cream main, Colorado mountain-blue sidebar,
+   Kenny orange accent, South Park sky blue player accents. Light, no dark mode. */
+[data-theme='north-park'] {
+  color-scheme: light;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23FF8C00%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  /* ── Palette — Kenny orange, South Park sky, Colorado Rockies ── */
+  --ctp-crust:    #0D2040;
+  --ctp-mantle:   #142D50;
+  --ctp-base:     #F5F1E8;   /* construction paper cream */
+  --ctp-surface0: #EDE9DE;
+  --ctp-surface1: #E5E0D2;
+  --ctp-surface2: #D8D2C0;
+  --ctp-overlay0: #8090A8;
+  --ctp-overlay1: #5A6A80;
+  --ctp-overlay2: #4A526A;
+  --ctp-text:     #1A1A2E;
+  --ctp-subtext1: #3A3A5A;
+  --ctp-subtext0: #4A526A;
+  --ctp-mauve:    #FF8C00;   /* Kenny orange */
+  --ctp-lavender: #FFB030;
+  --ctp-pink:     #FF6A00;
+  --ctp-flamingo: #FF5500;
+  --ctp-rosewater:#FFD080;
+  --ctp-green:    #3D9A2A;   /* Kyle's green hat */
+  --ctp-teal:     #2080A0;
+  --ctp-sky:      #87CEEB;   /* South Park sky */
+  --ctp-blue:     #1E4080;
+  --ctp-sapphire: #1B3D6E;
+  --ctp-yellow:   #FFD700;
+  --ctp-peach:    #FF8C00;
+  --ctp-maroon:   #CC4400;
+  --ctp-red:      #CC2200;   /* Cartman red */
+
+  --bg-app:        #F5F1E8;   /* construction paper cream */
+  --bg-sidebar:    #1B3D6E;   /* Colorado Rockies night blue */
+  --bg-card:       #FFFFFF;
+  --bg-hover:      #EDE9DE;
+  --bg-player:     #102A50;   /* deeper mountain blue */
+  --bg-glass:      rgba(245, 241, 232, 0.94);
+  --accent:        #FF8C00;   /* Kenny orange */
+  --accent-dim:    rgba(255, 140, 0, 0.13);
+  --accent-glow:   rgba(255, 140, 0, 0.30);
+  --text-primary:  #1A1A2E;
+  --text-secondary:#4A526A;
+  --text-muted:    #8090A8;
+  --border:        rgba(27, 61, 110, 0.14);
+  --border-subtle: rgba(27, 61, 110, 0.08);
+  --border-dropdown: rgba(255, 140, 0, 0.28);
+  --shadow-dropdown: rgba(0, 20, 60, 0.18);
+  --positive:      #3D9A2A;
+  --warning:       #E8A000;
+  --danger:        #CC2200;
+  --radius-sm: 3px;
+  --radius-md: 6px;
+  --radius-lg: 10px;
+
+  /* Logo: Kenny orange → South Park yellow */
+  --logo-color-start: #FF8C00;
+  --logo-color-end:   #FFD700;
+}
+
+/* Sidebar — Colorado mountain blue, orange nav accents */
+[data-theme='north-park'] .sidebar {
+  background: #1B3D6E;
+  border-right: none;
+}
+
+/* Nav links: default text light on dark sidebar */
+[data-theme='north-park'] .nav-link { color: rgba(255, 255, 255, 0.72); }
+
+[data-theme='north-park'] .nav-link.active {
+  background: rgba(255, 140, 0, 0.18);
+  border-left: 3px solid #FF8C00;
+  color: #FF8C00;
+}
+
+[data-theme='north-park'] .nav-link:hover:not(.active) {
+  background: rgba(255, 255, 255, 0.09);
+  border-left: 3px solid rgba(255, 140, 0, 0.45);
+  color: rgba(255, 255, 255, 0.95);
+}
+
+/* Player bar — deep mountain blue, Kenny orange top stripe */
+[data-theme='north-park'] .player-bar {
+  background: #102A50;
+  border-top: 3px solid #FF8C00;
+  box-shadow: 0 -2px 20px rgba(0, 20, 60, 0.30);
+}
+
+/* Track name — Kenny orange */
+[data-theme='north-park'] .player-track-name { color: #FF8C00; }
+
+/* Artist name — South Park sky blue */
+[data-theme='north-park'] .player-artist-name { color: #87CEEB; }
+
+/* Content header — warm paper border */
+[data-theme='north-park'] .content-header {
+  border-bottom: 1px solid rgba(27, 61, 110, 0.12);
+}
+
+/* Cards — clean white cutouts with paper shadow */
+[data-theme='north-park'] .album-card,
+[data-theme='north-park'] .artist-card {
+  background: #FFFFFF;
+  box-shadow: 0 1px 4px rgba(0, 20, 60, 0.08);
+}
+
+[data-theme='north-park'] .album-card:hover,
+[data-theme='north-park'] .artist-card:hover {
+  box-shadow: 0 0 0 2px #FF8C00, 0 4px 16px rgba(0, 20, 60, 0.12);
+}
+
+/* Track rows (light main area) */
+[data-theme='north-park'] .track-row:hover {
+  background: #EDE9DE;
+  box-shadow: inset 2px 0 0 #FF8C00;
+}
+
+/* Queue items (dark blue sidebar — keep bg dark, text stays white) */
+[data-theme='north-park'] .queue-item:hover {
+  background: rgba(255, 255, 255, 0.09);
+  box-shadow: inset 2px 0 0 #FF8C00;
+}
+
+/* Flat primary button — orange, no gradient */
+[data-theme='north-park'] .player-btn-primary {
+  background: #FF8C00;
+  color: #FFFFFF;
+  box-shadow: none;
+  border: none;
+}
+
+[data-theme='north-park'] .player-btn-primary:hover {
+  background: #E07800;
+  box-shadow: 0 0 14px rgba(255, 140, 0, 0.40);
+}
+
+[data-theme='north-park'] .btn-primary {
+  background: #FF8C00;
+  color: #FFFFFF;
+  border: none;
+}
+
+[data-theme='north-park'] .btn-primary:hover { background: #E07800; }
+
+[data-theme='north-park'] .hero-play-btn {
+  background: #FF8C00;
+  color: #FFFFFF;
+  border: none;
+  box-shadow: 0 2px 14px rgba(255, 140, 0, 0.35);
+}
+
+[data-theme='north-park'] .hero-play-btn:hover {
+  background: #E07800;
+  box-shadow: 0 4px 22px rgba(255, 140, 0, 0.55);
+  transform: scale(1.02);
+}
+
+[data-theme='north-park'] .album-card-details-btn {
+  background: #FF8C00;
+  color: #FFFFFF;
+  border: none;
+  box-shadow: 0 2px 10px rgba(255, 140, 0, 0.30);
+}
+
+/* Badge — orange pill */
+[data-theme='north-park'] .badge,
+[data-theme='north-park'] .album-detail-badge {
+  background: #FF8C00;
+  color: #FFFFFF;
+}
+
+/* Settings tabs */
+[data-theme='north-park'] .settings-tab:hover  { background: rgba(255, 140, 0, 0.08); color: #FF8C00; }
+[data-theme='north-park'] .settings-tab.active { background: rgba(255, 140, 0, 0.13); color: #FF8C00; border-color: #FF8C00; }
+[data-theme='north-park'] .queue-tab-btn:hover { background: rgba(255, 255, 255, 0.10); color: rgba(255, 255, 255, 0.90); }
+
+/* Misc interactive */
+[data-theme='north-park'] .custom-select-trigger:hover { background: #EDE9DE; }
+[data-theme='north-park'] .custom-select-option:hover  { background: rgba(255, 140, 0, 0.10); }
+[data-theme='north-park'] .artist-row:hover   { background: rgba(255, 140, 0, 0.07); box-shadow: inset 3px 0 0 #FF8C00; }
+[data-theme='north-park'] .playlist-row:hover { background: rgba(255, 140, 0, 0.07); box-shadow: inset 3px 0 0 #FF8C00; }
+
+/* Connection indicators — muted on light bg */
+[data-theme='north-park'] .connection-type,
+[data-theme='north-park'] .connection-server { color: #7A8A9A; }
+
+/* Queue panel — dark sidebar, light text overrides */
+[data-theme='north-park'] .queue-panel { background: #1B3D6E; }
+
+[data-theme='north-park'] .queue-item-title   { color: rgba(255, 255, 255, 0.90); }
+[data-theme='north-park'] .queue-item-artist,
+[data-theme='north-park'] .queue-item-duration { color: rgba(255, 255, 255, 0.52); }
+
+[data-theme='north-park'] .queue-item.active .queue-item-artist,
+[data-theme='north-park'] .queue-item.active .queue-item-duration { color: rgba(255, 255, 255, 0.72); }
+
+[data-theme='north-park'] .queue-divider span { color: rgba(255, 255, 255, 0.38) !important; }
+
+[data-theme='north-park'] .queue-current-info h3   { color: rgba(255, 255, 255, 0.92); }
+[data-theme='north-park'] .queue-current-sub        { color: rgba(255, 255, 255, 0.55); }
+[data-theme='north-park'] .queue-current-cover .fallback { color: rgba(255, 255, 255, 0.32); }
+
+[data-theme='north-park'] .queue-tab-btn            { color: rgba(255, 255, 255, 0.58); }
+[data-theme='north-park'] .queue-tab-btn.active     { color: #FF8C00; }
+[data-theme='north-park'] .queue-round-btn.active   { color: #FFFFFF; }
+
+[data-theme='north-park'] .queue-action-btn         { color: rgba(255, 255, 255, 0.60); }
+[data-theme='north-park'] .queue-action-btn:hover:not(:disabled) { color: rgba(255, 255, 255, 0.92); }
+
+/* Back button + hero text — needs high contrast on dark overlay at top of album header */
+[data-theme='north-park'] .album-detail-back { color: rgba(255, 255, 255, 0.85); }
+[data-theme='north-park'] .album-detail-back:hover { background: rgba(255, 255, 255, 0.12); color: #ffffff; }
+[data-theme='north-park'] .album-detail-info { color: rgba(255, 255, 255, 0.80); }
+
+/* Artist name in hero — soften the orange to a warm amber, less glaring */
+[data-theme='north-park'] .album-detail-artist,
+[data-theme='north-park'] .album-detail-artist-link { color: #FFAB40; }
+[data-theme='north-park'] .album-detail-artist-link:hover { color: #FFD080; }
+
+/* np-album-track (Now Playing page) */
+[data-theme='north-park'] .np-album-track.active .np-album-track-title,
+[data-theme='north-park'] .np-album-track.active .np-album-track-num { color: #FF8C00; }
+
+/* Scrollbar — thin, orange thumb */
+[data-theme='north-park'] ::-webkit-scrollbar { width: 5px; height: 5px; }
+[data-theme='north-park'] ::-webkit-scrollbar-track { background: #EDE9DE; }
+[data-theme='north-park'] ::-webkit-scrollbar-thumb { background: rgba(255, 140, 0, 0.35); border-radius: 3px; }
+[data-theme='north-park'] ::-webkit-scrollbar-thumb:hover { background: #FF8C00; }
+
+/* ─── Dark Side of the Moon (inspired) — Pink Floyd ─── */
+/* Pure void-black + prism spectrum. No colour except the rainbow.
+   Accent: spectrum cyan. Spectrum gradient as player-bar top border.
+   Track name: white (the input light beam). Performance: no patterns, no animations. */
+[data-theme='dark-side-of-the-moon'] {
+  color-scheme: dark;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%239B30FF%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  /* ── Palette — void black + prism spectrum ── */
+  --ctp-crust:    #000000;
+  --ctp-mantle:   #010101;
+  --ctp-base:     #050505;
+  --ctp-surface0: #0A0A0A;
+  --ctp-surface1: #111111;
+  --ctp-surface2: #1A1A1A;
+  --ctp-overlay0: #333333;
+  --ctp-overlay1: #4A4A4A;
+  --ctp-overlay2: #686868;
+  --ctp-text:     #F0F0F0;
+  --ctp-subtext1: #C8C8C8;
+  --ctp-subtext0: #A0A0A0;
+  --ctp-mauve:    #9B30FF;   /* spectrum violet — primary accent */
+  --ctp-lavender: #7B00FF;   /* spectrum violet */
+  --ctp-pink:     #FF2400;   /* spectrum red */
+  --ctp-flamingo: #FF7700;   /* spectrum orange */
+  --ctp-rosewater:#FFFFFF;   /* the input light beam */
+  --ctp-green:    #72FF00;   /* spectrum green */
+  --ctp-teal:     #00C8FF;
+  --ctp-sky:      #9B30FF;
+  --ctp-blue:     #0040FF;   /* spectrum blue */
+  --ctp-sapphire: #0060DD;
+  --ctp-yellow:   #FFE600;   /* spectrum yellow */
+  --ctp-peach:    #FF7700;
+  --ctp-maroon:   #CC1800;
+  --ctp-red:      #FF2400;
+
+  --bg-app:        #050505;
+  --bg-sidebar:    #020202;
+  --bg-card:       #0D0D0D;
+  --bg-hover:      #141414;
+  --bg-player:     #010101;
+  --bg-glass:      rgba(5, 5, 5, 0.96);
+  --accent:        #9B30FF;   /* spectrum violet */
+  --accent-dim:    rgba(155, 48, 255, 0.10);
+  --accent-glow:   rgba(155, 48, 255, 0.28);
+  --text-primary:  #F0F0F0;
+  --text-secondary:#A0A0A0;
+  --text-muted:    #555555;
+  --border:        rgba(255, 255, 255, 0.07);
+  --border-subtle: rgba(255, 255, 255, 0.04);
+  --border-dropdown: rgba(155, 48, 255, 0.22);
+  --shadow-dropdown: rgba(0, 0, 0, 0.99);
+  --positive:      #72FF00;
+  --warning:       #FFE600;
+  --danger:        #FF2400;
+  --radius-sm: 2px;
+  --radius-md: 4px;
+  --radius-lg: 6px;
+
+  /* Waveform — cyan played, dark unplayed */
+  --waveform-played:   #9B30FF;
+  --waveform-buffered: rgba(255, 255, 255, 0.07);
+  --waveform-unplayed: rgba(255, 255, 255, 0.04);
+
+  /* Logo — orange → cyan (the spectrum itself) */
+  --logo-color-start: #FF7700;
+  --logo-color-end:   #9B30FF;
+}
+
+/* Player bar — void black, spectrum rainbow top border via ::before */
+[data-theme='dark-side-of-the-moon'] .player-bar {
+  background: #010101;
+  border-top: none;
+  position: relative;
+  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.04);
+}
+
+[data-theme='dark-side-of-the-moon'] .player-bar::before {
+  content: '';
+  position: absolute;
+  top: 0; left: 0; right: 0;
+  height: 2px;
+  background: linear-gradient(90deg,
+    #FF2400 0%,
+    #FF7700 17%,
+    #FFE600 33%,
+    #72FF00 50%,
+    #00C8FF 67%,
+    #0040FF 83%,
+    #7B00FF 100%
+  );
+}
+
+/* Track name — the white input light beam */
+[data-theme='dark-side-of-the-moon'] .player-track-name {
+  color: #FFFFFF;
+}
+
+/* Artist name — neutral dim */
+[data-theme='dark-side-of-the-moon'] .player-artist-name {
+  color: #888888;
+}
+
+/* Sidebar — pure void */
+[data-theme='dark-side-of-the-moon'] .sidebar {
+  background: #020202;
+  border-right: 1px solid rgba(255, 255, 255, 0.04);
+}
+
+[data-theme='dark-side-of-the-moon'] .nav-link.active {
+  background: rgba(0, 229, 255, 0.08);
+  border-left: 3px solid #00E5FF;
+  color: #00E5FF;
+}
+
+[data-theme='dark-side-of-the-moon'] .nav-link:hover:not(.active) {
+  background: rgba(255, 255, 255, 0.04);
+  border-left: 3px solid rgba(0, 229, 255, 0.30);
+  color: #F0F0F0;
+}
+
+/* Cards */
+[data-theme='dark-side-of-the-moon'] .album-card,
+[data-theme='dark-side-of-the-moon'] .artist-card {
+  background: #0D0D0D;
+}
+
+[data-theme='dark-side-of-the-moon'] .album-card:hover,
+[data-theme='dark-side-of-the-moon'] .artist-card:hover {
+  box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.40), 0 4px 20px rgba(0, 229, 255, 0.08);
+}
+
+/* Track / queue rows */
+[data-theme='dark-side-of-the-moon'] .track-row:hover,
+[data-theme='dark-side-of-the-moon'] .queue-item:hover {
+  background: #141414;
+  box-shadow: inset 2px 0 0 #00E5FF;
+}
+
+/* Buttons — flat cyan, no gradient */
+[data-theme='dark-side-of-the-moon'] .player-btn-primary {
+  background: #00E5FF;
+  color: #010101;
+  box-shadow: none;
+  border: none;
+}
+
+[data-theme='dark-side-of-the-moon'] .player-btn-primary:hover {
+  background: #33EEFF;
+  box-shadow: 0 0 16px rgba(0, 229, 255, 0.40);
+}
+
+[data-theme='dark-side-of-the-moon'] .btn-primary {
+  background: #00E5FF;
+  color: #010101;
+  border: none;
+}
+
+[data-theme='dark-side-of-the-moon'] .btn-primary:hover { background: #33EEFF; }
+
+[data-theme='dark-side-of-the-moon'] .hero-play-btn {
+  background: #00E5FF;
+  color: #010101;
+  border: none;
+  box-shadow: 0 2px 16px rgba(0, 229, 255, 0.30);
+}
+
+[data-theme='dark-side-of-the-moon'] .hero-play-btn:hover {
+  background: #33EEFF;
+  box-shadow: 0 4px 26px rgba(0, 229, 255, 0.50);
+  transform: scale(1.02);
+}
+
+[data-theme='dark-side-of-the-moon'] .album-card-details-btn {
+  background: #00E5FF;
+  color: #010101;
+  border: none;
+  box-shadow: 0 2px 10px rgba(0, 229, 255, 0.25);
+}
+
+/* Badge */
+[data-theme='dark-side-of-the-moon'] .badge,
+[data-theme='dark-side-of-the-moon'] .album-detail-badge {
+  background: #00E5FF;
+  color: #010101;
+}
+
+/* Settings + queue tabs */
+[data-theme='dark-side-of-the-moon'] .settings-tab:hover  { background: rgba(155, 48, 255, 0.07); color: #9B30FF; }
+[data-theme='dark-side-of-the-moon'] .settings-tab.active { background: rgba(155, 48, 255, 0.12); color: #9B30FF; border-color: #9B30FF; }
+[data-theme='dark-side-of-the-moon'] .queue-tab-btn:hover { background: rgba(255, 255, 255, 0.05); }
+[data-theme='dark-side-of-the-moon'] .queue-tab-btn.active { color: #9B30FF; }
+[data-theme='dark-side-of-the-moon'] .queue-round-btn.active { color: #010101; }
+
+/* Misc interactive */
+[data-theme='dark-side-of-the-moon'] .custom-select-trigger:hover { background: #141414; }
+[data-theme='dark-side-of-the-moon'] .custom-select-option:hover  { background: rgba(155, 48, 255, 0.08); }
+[data-theme='dark-side-of-the-moon'] .artist-row:hover   { background: rgba(155, 48, 255, 0.05); box-shadow: inset 3px 0 0 #9B30FF; }
+[data-theme='dark-side-of-the-moon'] .playlist-row:hover { background: rgba(155, 48, 255, 0.05); box-shadow: inset 3px 0 0 #9B30FF; }
+[data-theme='dark-side-of-the-moon'] .artist-ext-link:hover { background: rgba(155, 48, 255, 0.07); border-color: #9B30FF; }
+
+/* Album detail header — year/genre/info too dark on near-black bg, brighten */
+[data-theme='dark-side-of-the-moon'] .album-detail-info { color: #888888; }
+
+/* np-album-track */
+[data-theme='dark-side-of-the-moon'] .np-album-track.active .np-album-track-title,
+[data-theme='dark-side-of-the-moon'] .np-album-track.active .np-album-track-num { color: #9B30FF; }
+
+/* Scrollbar — minimal, cyan thumb */
+[data-theme='dark-side-of-the-moon'] ::-webkit-scrollbar { width: 4px; height: 4px; }
+[data-theme='dark-side-of-the-moon'] ::-webkit-scrollbar-track { background: #020202; }
+[data-theme='dark-side-of-the-moon'] ::-webkit-scrollbar-thumb { background: rgba(155, 48, 255, 0.25); border-radius: 2px; }
+[data-theme='dark-side-of-the-moon'] ::-webkit-scrollbar-thumb:hover { background: #9B30FF; }
+
+/* Connection indicators */
+[data-theme='dark-side-of-the-moon'] .connection-type  { color: #999999; }
+[data-theme='dark-side-of-the-moon'] .connection-server { color: #777777; }
+
+/* ─── Powerslave (inspired) — Iron Maiden ─── */
+/* Blazing Egyptian sun — warm sandstone main, Nile-sky deep-blue sidebar,
+   pharaoh gold accent, gold+blue duality. Light, no dark mode.
+   Sidebar: deep Nile blue with subtle hieroglyph grid. Player bar: navy + gold cornice. */
+[data-theme='powerslave'] {
+  color-scheme: light;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23C8800A%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  /* ── Palette — sandstone, pharaoh gold, temple shadows ── */
+  --ctp-crust:    #180E04;
+  --ctp-mantle:   #2A1808;
+  --ctp-base:     #F0DFB0;   /* warm sandstone */
+  --ctp-surface0: #E8D49A;
+  --ctp-surface1: #DEC880;
+  --ctp-surface2: #D0B860;
+  --ctp-overlay0: #A07830;
+  --ctp-overlay1: #806020;
+  --ctp-overlay2: #604810;
+  --ctp-text:     #2A1808;   /* warm dark brown */
+  --ctp-subtext1: #4A2C10;
+  --ctp-subtext0: #6A4018;
+  --ctp-mauve:    #C8800A;   /* pharaoh gold */
+  --ctp-lavender: #D49020;
+  --ctp-pink:     #B04000;
+  --ctp-flamingo: #CC4800;
+  --ctp-rosewater:#F8EDD0;
+  --ctp-green:    #507820;
+  --ctp-teal:     #207870;   /* Egyptian turquoise */
+  --ctp-sky:      #3080A0;
+  --ctp-blue:     #1A5080;
+  --ctp-sapphire: #204870;
+  --ctp-yellow:   #C8800A;
+  --ctp-peach:    #C05010;
+  --ctp-maroon:   #801808;
+  --ctp-red:      #A82000;
+
+  --bg-app:        #F0DFB0;   /* sun-bleached sandstone */
+  --bg-sidebar:    #0A2035;   /* Nile sky — deep lapis blue */
+  --bg-card:       #F8EDD0;
+  --bg-hover:      #E8D49A;
+  --bg-player:     #06101C;   /* deep night Nile */
+  --bg-glass:      rgba(240, 223, 176, 0.94);
+  --accent:        #C8960C;   /* pharaoh gold */
+  --accent-dim:    rgba(200, 150, 12, 0.13);
+  --accent-glow:   rgba(200, 150, 12, 0.30);
+  --text-primary:  #2A1808;
+  --text-secondary:#6A4018;
+  --text-muted:    #A07830;
+  --border:        rgba(42, 24, 8, 0.14);
+  --border-subtle: rgba(42, 24, 8, 0.08);
+  --border-dropdown: rgba(200, 128, 10, 0.28);
+  --shadow-dropdown: rgba(24, 14, 4, 0.22);
+  --positive:      #507820;
+  --warning:       #C05010;
+  --danger:        #A82000;
+  --radius-sm: 2px;
+  --radius-md: 4px;
+  --radius-lg: 6px;
+
+  --waveform-played:   #2E7BB8;   /* Nile azure — the sky */
+  --waveform-buffered: rgba(46, 123, 184, 0.20);
+  --waveform-unplayed: rgba(42, 24, 8, 0.10);
+
+  /* Logo — Nile blue → pharaoh gold */
+  --logo-color-start: #2E7BB8;
+  --logo-color-end:   #C8960C;
+}
+
+/* Sidebar — Nile-sky deep blue, drifting cloud wisps */
+[data-theme='powerslave'] .sidebar {
+  background: #0A2035;
+  border-right: none;
+  background-image:
+    radial-gradient(ellipse 130% 30% at 50%  6%, rgba(140, 190, 235, 0.07) 0%, transparent 65%),
+    radial-gradient(ellipse  90% 25% at 18% 22%, rgba(100, 155, 205, 0.05) 0%, transparent 60%),
+    radial-gradient(ellipse 115% 28% at 78% 38%, rgba(120, 170, 225, 0.05) 0%, transparent 65%),
+    radial-gradient(ellipse 100% 26% at 38% 58%, rgba( 90, 145, 195, 0.04) 0%, transparent 60%),
+    radial-gradient(ellipse 120% 30% at 68% 75%, rgba(110, 165, 218, 0.05) 0%, transparent 65%),
+    radial-gradient(ellipse  85% 24% at 22% 92%, rgba(130, 180, 232, 0.04) 0%, transparent 60%);
+}
+
+[data-theme='powerslave'] .nav-link { color: rgba(200, 224, 248, 0.65); }
+
+[data-theme='powerslave'] .nav-link.active {
+  background: linear-gradient(90deg, rgba(200, 150, 12, 0.22) 0%, transparent 100%);
+  border-left: 3px solid #C8960C;
+  color: #D49828;
+}
+
+[data-theme='powerslave'] .nav-link:hover:not(.active) {
+  background: rgba(46, 123, 184, 0.12);
+  border-left: 3px solid rgba(46, 123, 184, 0.50);
+  color: rgba(200, 224, 248, 0.92);
+}
+
+/* Player bar — deep Nile night, gold cornice */
+[data-theme='powerslave'] .player-bar {
+  background: #06101C;
+  border-top: 2px solid #C8960C;
+  box-shadow: 0 -4px 24px rgba(46, 123, 184, 0.10), 0 -1px 0 rgba(200, 150, 12, 0.20);
+}
+
+/* Track name — warm gold glow */
+[data-theme='powerslave'] .player-track-name {
+  color: #D49828;
+  text-shadow: 0 0 12px rgba(200, 150, 12, 0.40);
+}
+
+/* Artist name — Nile azure */
+[data-theme='powerslave'] .player-artist-name { color: #6AAED8; }
+
+/* Content header */
+[data-theme='powerslave'] .content-header {
+  border-bottom: 1px solid rgba(42, 24, 8, 0.12);
+}
+
+/* Cards — parchment on sandstone */
+[data-theme='powerslave'] .album-card,
+[data-theme='powerslave'] .artist-card {
+  background: #F8EDD0;
+  box-shadow: 0 1px 4px rgba(42, 24, 8, 0.10);
+}
+
+[data-theme='powerslave'] .album-card:hover,
+[data-theme='powerslave'] .artist-card:hover {
+  box-shadow: 0 0 0 2px #C8800A, 0 4px 16px rgba(42, 24, 8, 0.12);
+}
+
+/* Track / queue rows */
+[data-theme='powerslave'] .track-row:hover {
+  background: #E8D49A;
+  box-shadow: inset 2px 0 0 #C8800A;
+}
+
+[data-theme='powerslave'] .queue-item:hover {
+  background: rgba(46, 123, 184, 0.12);
+  box-shadow: inset 2px 0 0 #2E7BB8;
+}
+
+/* Buttons — gold gradient */
+[data-theme='powerslave'] .player-btn-primary {
+  background: linear-gradient(180deg, #D49020 0%, #C8800A 50%, #A06008 100%);
+  color: #180E04;
+  border: 1px solid #806006;
+  box-shadow: 0 0 12px rgba(200, 128, 10, 0.28);
+}
+
+[data-theme='powerslave'] .player-btn-primary:hover {
+  background: linear-gradient(180deg, #E0A028 0%, #D48818 50%, #B07010 100%);
+  box-shadow: 0 0 22px rgba(200, 128, 10, 0.48);
+}
+
+[data-theme='powerslave'] .btn-primary {
+  background: linear-gradient(180deg, #D49020 0%, #C8800A 50%, #A06008 100%);
+  color: #180E04;
+  border: 1px solid #806006;
+}
+
+[data-theme='powerslave'] .btn-primary:hover {
+  background: linear-gradient(180deg, #E0A028 0%, #D48818 50%, #B07010 100%);
+}
+
+[data-theme='powerslave'] .hero-play-btn {
+  background: linear-gradient(180deg, #D49020 0%, #C8800A 50%, #A06008 100%);
+  color: #180E04;
+  border: 1px solid #806006;
+  box-shadow: 0 2px 16px rgba(200, 128, 10, 0.28);
+}
+
+[data-theme='powerslave'] .hero-play-btn:hover {
+  background: linear-gradient(180deg, #E0A028 0%, #D48818 50%, #B07010 100%);
+  box-shadow: 0 4px 26px rgba(200, 128, 10, 0.48);
+  transform: scale(1.02);
+}
+
+[data-theme='powerslave'] .album-card-details-btn {
+  background: linear-gradient(180deg, #D49020 0%, #C8800A 50%, #A06008 100%);
+  color: #180E04;
+  border: 1px solid #806006;
+}
+
+[data-theme='powerslave'] .album-card-details-btn:hover {
+  background: linear-gradient(180deg, #E0A028 0%, #D48818 50%, #B07010 100%);
+}
+
+/* Badge — gold pill */
+[data-theme='powerslave'] .badge,
+[data-theme='powerslave'] .album-detail-badge {
+  background: #C8800A;
+  color: #F8EDD0;
+}
+
+/* Settings + queue */
+[data-theme='powerslave'] .settings-tab:hover  { background: rgba(200, 150, 12, 0.08); color: #C8960C; }
+[data-theme='powerslave'] .settings-tab.active { background: rgba(200, 150, 12, 0.14); color: #C8960C; border-color: #C8960C; }
+[data-theme='powerslave'] .queue-tab-btn:hover { background: rgba(46, 123, 184, 0.12); color: rgba(200, 224, 248, 0.92); }
+[data-theme='powerslave'] .queue-tab-btn.active { color: #C8960C; }
+[data-theme='powerslave'] .queue-round-btn.active { color: #06101C; }
+
+/* Queue panel text — Nile-blue sidebar */
+[data-theme='powerslave'] .queue-panel { background: #0A2035; }
+[data-theme='powerslave'] .queue-item-title   { color: rgba(220, 235, 248, 0.90); }
+[data-theme='powerslave'] .queue-item-artist,
+[data-theme='powerslave'] .queue-item-duration { color: rgba(140, 190, 230, 0.55); }
+[data-theme='powerslave'] .queue-item.active .queue-item-artist,
+[data-theme='powerslave'] .queue-item.active .queue-item-duration { color: rgba(140, 190, 230, 0.75); }
+[data-theme='powerslave'] .queue-divider span { color: rgba(140, 190, 230, 0.38) !important; }
+[data-theme='powerslave'] .queue-current-info h3   { color: rgba(220, 235, 248, 0.92); }
+[data-theme='powerslave'] .queue-current-sub        { color: rgba(140, 190, 230, 0.58); }
+[data-theme='powerslave'] .queue-current-cover .fallback { color: rgba(140, 190, 230, 0.30); }
+[data-theme='powerslave'] .queue-action-btn         { color: rgba(140, 190, 230, 0.65); }
+[data-theme='powerslave'] .queue-action-btn:hover:not(:disabled) { color: rgba(220, 235, 248, 0.95); }
+
+/* Misc interactive */
+[data-theme='powerslave'] .custom-select-trigger:hover { background: #E8D49A; }
+[data-theme='powerslave'] .custom-select-option:hover  { background: rgba(200, 128, 10, 0.10); }
+[data-theme='powerslave'] .artist-row:hover   { background: rgba(200, 128, 10, 0.07); box-shadow: inset 3px 0 0 #C8800A; }
+[data-theme='powerslave'] .playlist-row:hover { background: rgba(200, 128, 10, 0.07); box-shadow: inset 3px 0 0 #C8800A; }
+[data-theme='powerslave'] .artist-ext-link:hover { background: rgba(200, 128, 10, 0.08); border-color: #C8800A; }
+
+/* Connection indicators */
+[data-theme='powerslave'] .connection-type  { color: #050E19; }
+[data-theme='powerslave'] .connection-server { color: #050E19; }
+
+/* Back button needs light color — sits on dark overlay above sandstone content */
+[data-theme='powerslave'] .album-detail-back { color: rgba(255, 255, 255, 0.85); }
+[data-theme='powerslave'] .album-detail-back:hover { background: rgba(255, 255, 255, 0.12); color: #ffffff; }
+
+/* Tech strip — default ctp-surface1 (#DEC880) is too bright on dark blue queue panel */
+[data-theme='powerslave'] .queue-current-tech {
+  background: rgba(6, 16, 28, 0.88);
+  color: rgba(140, 190, 230, 0.72);
+}
+
+/* Album detail hero meta */
+[data-theme='powerslave'] .album-detail-info { color: rgba(255, 255, 255, 0.80); }
+[data-theme='powerslave'] .album-detail-artist,
+[data-theme='powerslave'] .album-detail-artist-link { color: #050E19; }
+[data-theme='powerslave'] .album-detail-artist-link:hover { color: #0A2035; }
+
+/* np-album-track */
+[data-theme='powerslave'] .np-album-track.active .np-album-track-title,
+[data-theme='powerslave'] .np-album-track.active .np-album-track-num { color: #C8960C; }
+
+/* Scrollbar — warm, gold thumb */
+[data-theme='powerslave'] ::-webkit-scrollbar { width: 5px; height: 5px; }
+[data-theme='powerslave'] ::-webkit-scrollbar-track { background: #E8D49A; }
+[data-theme='powerslave'] ::-webkit-scrollbar-thumb { background: rgba(200, 128, 10, 0.35); border-radius: 3px; }
+[data-theme='powerslave'] ::-webkit-scrollbar-thumb:hover { background: #C8800A; }
@@ -0,0 +1,76 @@
+/**
+ * Creates a slim, themed drag ghost and registers it via setDragImage.
+ * The element is cleaned up when the drag completes (dragend).
+ *
+ * On Linux (WebKitGTK), the GTK drag subsystem captures the drag image
+ * asynchronously — removing the element in the same tick or via
+ * setTimeout(…, 0) causes the image to be gone before GTK reads it,
+ * which makes GTK treat the entire drag as invalid (forbidden cursor).
+ * Using a dragend listener ensures the element persists for the full
+ * duration of the drag operation on all platforms.
+ *
+ * @param dataTransfer - the event's dataTransfer object
+ * @param label        - primary text (track/album title)
+ * @param opts.coverUrl - optional thumbnail URL (shown as 24×24 image)
+ */
+export function setDragGhost(
+  dataTransfer: DataTransfer,
+  label: string,
+  opts: { coverUrl?: string } = {},
+): void {
+  const el = document.createElement('div');
+
+  el.style.cssText = [
+    'position:fixed',
+    'left:-9999px',
+    'top:-9999px',
+    'display:flex',
+    'align-items:center',
+    'gap:8px',
+    `padding:0 14px 0 ${opts.coverUrl ? '6px' : '10px'}`,
+    'height:34px',
+    'max-width:240px',
+    'border-radius:17px',
+    'background:var(--bg-card,#fff)',
+    'border:1px solid var(--border,rgba(0,0,0,.12))',
+    'border-left:3px solid var(--accent,#888)',
+    'box-shadow:0 4px 20px rgba(0,0,0,.22)',
+    'font-family:var(--font-ui,sans-serif)',
+    'font-size:13px',
+    'font-weight:500',
+    'color:var(--text-primary,#222)',
+    'pointer-events:none',
+    'white-space:nowrap',
+    'overflow:hidden',
+    'z-index:99999',
+  ].join(';');
+
+  if (opts.coverUrl) {
+    const img = document.createElement('img');
+    img.src = opts.coverUrl;
+    img.style.cssText = 'width:24px;height:24px;border-radius:4px;object-fit:cover;flex-shrink:0;';
+    el.appendChild(img);
+  } else {
+    const dot = document.createElement('span');
+    dot.style.cssText = 'width:6px;height:6px;border-radius:50%;background:var(--accent,#888);flex-shrink:0;';
+    el.appendChild(dot);
+  }
+
+  const text = document.createElement('span');
+  text.textContent = label;
+  text.style.cssText = 'overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0;';
+  el.appendChild(text);
+
+  document.body.appendChild(el);
+  dataTransfer.setDragImage(el, 20, 17);
+
+  // Clean up the ghost element when the drag ends, not immediately.
+  // This is critical for Linux/WebKitGTK where the drag image is
+  // captured asynchronously by GTK — removing it sooner causes
+  // the "forbidden" cursor and blocks the entire drop operation.
+  const cleanup = () => {
+    el.remove();
+    document.removeEventListener('dragend', cleanup);
+  };
+  document.addEventListener('dragend', cleanup, { once: true });
+}
Author	SHA1	Message	Date
Psychotoxical	0b5db172bd	chore: bump to v1.27.2 — bugfix release - fix: Radio from context menu passed artist name as ID to getSimilarSongs2 (closes #29) - fix: CI Windows NSIS upload — tauri-action no longer searches missing bundle/msi/ - fix: Linux/AUR ring linker error — use cc instead of rust-lld via .cargo/config.toml Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-02 10:38:26 +02:00
Psychotoxical	bf99a64baf	fix: guard against empty NSIS bundle in Windows signing step tauri-action already signs and uploads the .nsis.zip.sig when TAURI_SIGNING_PRIVATE_KEY is set, so the manual find returns empty and crashed with "a value is required for <FILE>". Exit 0 cleanly. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-02 03:23:17 +02:00
Psychotoxical	523596e414	chore: bump AUR pkgver to 1.27.1	2026-04-02 03:08:52 +02:00
Psychotoxical	2fe35e3f9b	fix: v1.27.1 — CI signing pipeline, sig naming, npm+cargo caching	2026-04-02 03:07:19 +02:00
Psychotoxical	e9fa541933	chore: add npm + cargo caching to all CI jobs (netherguy4 #28 )	2026-04-02 02:54:58 +02:00
Psychotoxical	746aa69405	fix: explicit bundle signing step after tauri-action	2026-04-02 02:53:08 +02:00
Psychotoxical	205b2c1914	fix: signing env at job level, fix macOS bundle filenames in manifest	2026-04-02 02:38:53 +02:00
Psychotoxical	0086b3e310	chore: bump AUR pkgver to 1.27.0	2026-04-02 02:15:26 +02:00
Psychotoxical	55e7cb835b	feat: v1.27.0 — In-App Auto-Update, Configurable Home, Icon Consistency Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-02 02:14:57 +02:00
Psychotoxical	d8da511a8f	fix: v1.26.1 — hero/album/playlist background flickering Background of Hero carousel, Album Detail and Playlist Detail was flickering for up to 20 seconds on first visit. useCachedUrl with fallbackToFetch=true returned the raw server URL immediately, causing a double render — once with the HTTP URL and again when the blob was ready. Fixed by passing fallbackToFetch=false in all three locations. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-01 21:20:15 +02:00
Psychotoxical	434ee0ecf1	feat: v1.26.0 — Bulk Select, Song Info, Favorite Button, Recently Played ### Added - Favorite/Star button in player bar (requested by @halfkey) - Bulk multi-select for album tracklist and playlist detail (add to playlist, remove from playlist) - Song Info modal via right-click context menu (metadata: format, bitrate, sample rate, bit depth, channels, file size, path, replay gain) - Recently Played section on Home page - "Show activity in Now Playing" opt-in toggle in Settings → Behavior ### Fixed - Queue cover art not updating on track change (useCachedUrl/CachedImage reset on cacheKey change) - FullscreenPlayer background flickering (FsBg preloads image before layer transition) - Playlist card delete confirmation visual (size expansion + pulse animation) - Gruvbox Light Soft: back button and badge invisible against light background ### Changed - buildStreamUrl: removed unused suffix parameter Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-01 20:57:57 +02:00
Psychotoxical	7d1c66071e	Update CHANGELOG.md	2026-04-01 17:28:50 +02:00
Psychotoxical	1adfda1daa	fix: remove invalid single-instance capability + dead static tray icon Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-01 13:51:50 +02:00
Psychotoxical	e65c476a76	fix: v1.25.1 — Opus playback, single-instance enforcement Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-01 13:45:37 +02:00
Psychotoxical	560349819f	feat: v1.25.0 — Tray Icon, Minimize to Tray, Sidebar Customization Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-01 09:46:41 +02:00
Psychotoxical	ada5327493	chore: bump AUR pkgver to 1.24.0	2026-03-31 23:14:45 +02:00
Psychotoxical	c67d606f89	feat: v1.24.0 — Playlist Management, native sample rate playback - Full playlist feature: overview grid, detail page with hero collage, tracklist DnD, song search, suggestions, context menu submenu - Audio: disable all app-level resampling — every track plays at its native sample rate (target_rate always 0 in audio_play + chain_next) - Fix: playlist hero bg flicker (memoize buildCoverArtUrl calls) - Fix: input focus double-border (search-input → .input class) - Polish: redesigned playlist search panel Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-03-31 23:14:15 +02:00
Psychotoxical	662cc94ca8	fix: disable forced resampling to 44100 Hz on first track current_sample_rate was initialized to 44100, causing every track to be resampled down to 44.1 kHz. Setting it to 0 disables resampling until the actual track rate is known, so songs play at their native sample rate. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-03-31 09:01:58 +02:00
Psychotoxical	1eacaf678c	Update README.md	2026-03-30 23:16:47 +02:00
Psychotoxical	4a8fb64c66	Update README.md	2026-03-30 23:16:04 +02:00
Psychotoxical	43c656dfc3	feat: v1.23.0 — Advanced Search, Genre Mix overhaul, Playlist append, Contributors table Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-03-30 22:56:59 +02:00
Psychotoxical	74b519f9f5	feat: Replay Gain support — songToTrack() + audio_update_replay_gain Integrates PR #9 by @trbn1: replay gain was not applying because track objects were built manually without replayGainTrackDb/replayGainAlbumDb/ replayGainPeak fields. All track construction sites now use songToTrack(). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-03-30 22:07:46 +02:00
Psychotoxical	3d03b8d5a1	merge: PR #9 — Replay Gain fix (trbn1) + conflict resolution Merges songToTrack() helper and audio_update_replay_gain Tauri command from @trbn1 without losing v1.22.0 DnD/queue-management work: - All track construction sites use songToTrack() for correct replay gain - psy-drag system (mouse-event DnD) preserved across all components - enqueueAt() position-aware insertion preserved in QueuePanel - updatePlaylist / smart-save / active-playlist tracking preserved Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-03-30 22:07:29 +02:00
Psychotoxical	d6f6e6466c	feat: v1.22.0 — Queue Management, DnD Overhaul, Seek & Waveform Fixes Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-03-30 19:14:59 +02:00
trbn	95cdbc7fc7	fix: replay gain not applying to tracks Replay gain was not working because track objects were created manually without including replay gain metadata from the Subsonic API response. Changes: - Add songToTrack() helper function to properly map SubsonicSong to Track with replayGainTrackDb, replayGainAlbumDb, and replayGainPeak fields - Add audio_update_replay_gain Tauri command for dynamic volume recalculation when replay gain settings change mid-playback - Add updateReplayGainForCurrentTrack() to recalculate volume when toggling replay gain setting - Fetch fresh track data on cold resume (app relaunch) to ensure replay gain values are current from server - Update all files that create track objects to use songToTrack() Fixes issue where toggling replay gain ON/OFF or changing between track/album mode had no effect on currently playing or newly played tracks.	2026-03-30 19:11:33 +02:00
Psychotoxical	42863877f6	fix: close seek-flash race window after debounce expires PR #7 blocked stale Rust progress ticks during the 100 ms debounce window but lifted the guard exactly when invoke('audio_seek') went out. The engine can still emit 1–2 ticks with the old position before the seek takes effect. Add seekTarget: once the debounce fires, record the requested time and keep ignoring progress until current_time is within 2 s of that target, then clear it. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-03-30 17:28:48 +02:00
Psychotoxical	7ed0fa4914	Merge branch 'pr-8' into test/pr-7-8	2026-03-30 17:24:18 +02:00
Joshua Bassett	4f8e7d7bc7	fix: stabilize waveform seekbar width when player time changes Add min-width to .player-time elements so they don't resize when the displayed time string changes length (e.g. "9:59" → "10:00"). Not all fonts support the tabular-nums font-variant, so without a min-width the time elements can change size and cause the waveform seekbar to continuously resize as playback progresses. Also align the elapsed time to the right and duration to the left so they sit flush against the waveform edges. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-03-30 21:17:50 +11:00
Joshua Bassett	bb56269cd1	fix: prevent waveform seekbar flashing back to old position on seek When clicking/dragging the waveform seekbar, the playback position would briefly flash back to the previous position before snapping to the new one. The seek function optimistically updates the store with the target position immediately but debounces the actual audio_seek IPC call by 100ms. During that window, audio:progress events from the Rust backend continue to arrive carrying the old playback position, overwriting the optimistic update and causing the visual flash. The fix skips incoming audio:progress events while a seek debounce is pending, since the store already holds the correct target position. Once the debounce fires and audio_seek is sent to the backend, progress events resume normally. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-03-30 19:59:55 +11:00
Psychotoxical	29a4363dca	feat: v1.21.0 — What's New Modal, 3 New Themes (Beta), Artist Column, Powerslave Blue Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-03-29 21:48:40 +02:00