feat: v1.32.0 — The Big Easter Update

Internet Radio full release (HTML5 engine, card UI, RadioDirectoryModal,
cover upload), Backup/Restore, Albums year filter, Statistics Library
Insights (playtime/genres/formats), Playlist cover upload, resizable
tracklist columns for Playlists & Favorites, crossfade fine control,
Settings Storage tab redesign, various fixes and UI polish.

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

.cargo/config.toml

@@ -0,0 +1,12 @@
+# Arch Linux's rust package bakes -fuse-ld=lld into the default rustflags.
+# ring (pulled in by tauri-plugin-updater) ships C/asm objects that lld cannot
+# resolve (ring_core_* symbols). Fix: force cc as linker driver and append
+# -fuse-ld=bfd so it overrides the hardcoded -fuse-ld=lld (last flag wins).
+# bfd is always available via binutils (part of base-devel on Arch).
+#
+# NOTE: When building via makepkg (AUR), RUSTFLAGS from /etc/makepkg.conf
+# overrides target-specific rustflags here. The PKGBUILD's build() applies
+# the same fix by patching the RUSTFLAGS env var directly.
+[target.x86_64-unknown-linux-gnu]
+linker = "cc"
+rustflags = ["-C", "link-arg=-fuse-ld=bfd"]

.github/workflows/release.yml

@@ -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
@@ -65,7 +71,7 @@ jobs:
               tag_name: tag,
               name: `Psysonic v${process.env.PACKAGE_VERSION}`,
               body,
-              draft: false,
+              draft: true,
               prerelease: false
             });
             return data.id;
@@ -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:
@@ -83,7 +92,7 @@ jobs:
           - platform: 'macos-latest'
             args: '--target x86_64-apple-darwin'
           - platform: 'windows-latest'
-            args: ''
+            args: '--bundles nsis'
     runs-on: ${{ matrix.settings.platform }}
     steps:
       - uses: actions/checkout@v5
@@ -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
@@ -104,8 +123,43 @@ jobs:
           VITE_LASTFM_API_SECRET: ${{ secrets.VITE_LASTFM_API_SECRET }}
         with:
           releaseId: ${{ needs.create-release.outputs.release_id }}
+          tagName: app-v${{ needs.create-release.outputs.package_version }}
+          releaseName: Psysonic v${{ needs.create-release.outputs.package_version }}
+          releaseDraft: true
           args: ${{ matrix.settings.args }}
 
+      - name: sign and upload Windows NSIS updater bundle
+        if: matrix.settings.platform == 'windows-latest'
+        shell: pwsh
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          VERSION: ${{ needs.create-release.outputs.package_version }}
+        run: |
+          $dir = "src-tauri/target/release/bundle/nsis"
+          $exe = (Get-ChildItem $dir -Filter "*.exe")[0].FullName
+          $zip = $exe -replace '\.exe$', '.nsis.zip'
+          Compress-Archive -Path $exe -DestinationPath $zip -Force
+          npx tauri signer sign --private-key "$env:TAURI_SIGNING_PRIVATE_KEY" --password "$env:TAURI_SIGNING_PRIVATE_KEY_PASSWORD" $zip
+          gh release upload "app-v$env:VERSION" $zip "$zip.sig" --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 +180,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 +212,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

CHANGELOG.md

@@ -5,6 +5,555 @@ 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.32.0] - 2026-04-05 — *The Big Easter Update* 🐣
+
+### Added
+
+- **Internet Radio — full release**: The Radio page is now accessible from the sidebar. Complete UI rewrite to a card-based layout (cover art, name, edit/homepage buttons) consistent with the Playlists look. Covers can be uploaded or removed via a hover menu directly on the card.
+- **Internet Radio — Edit Modal**: A dedicated modal lets you change station name, stream URL, and homepage URL, and upload or remove cover art.
+- **Internet Radio — Radio Browser directory** *(via [radio-browser.info](https://www.radio-browser.info))*: Discover new stations directly inside Psysonic. Top stations by vote are shown as suggestions; a debounced search finds stations by name. Favicon images can be imported as cover art in one click.
+- **Settings — Backup & Restore**: Export all your settings (servers, theme, font, keybindings, EQ preset, sidebar order) to a single JSON file and import them on another machine or after a reinstall. Available in Settings → Storage.
+- **Albums — Year Range Filter**: A From/To year input now appears in the Albums toolbar alongside the existing genre filter. Filtering by year and by genre can be combined; clearing both inputs returns to the default view.
+- **Statistics — Library Insights** *(requested via [#88](https://github.com/Psychotoxical/psysonic/issues/88))*:
+  - **Total Playtime** card: computed in the background by paginating your full album list (up to 5 000 albums). Shows `≥ Xh Ym` if the library is larger.
+  - **Genre Insights**: Top 10 genres ranked by song count with proportional progress bars.
+  - **Format Distribution**: Codec breakdown from a random 500-track sample — shows format name and percentage.
+- **Playlist Detail — Cover Upload**: Change or remove a playlist's cover image via the hover menu that appears on the hero artwork — no external tool needed.
+- **Tracklist columns — Playlists & Favorites** *(work in progress)*: PlaylistDetail and Favorites now support the same resizable, configurable column system introduced in v1.31.0 for Album tracklists. Column widths and visibility are persisted independently per page. The feature is still being refined.
+
+### Changed
+
+- **Crossfade — fine-grained control**: The crossfade duration slider now ranges from 0.1 s to 10 s in 0.1 s steps (previously 1 s minimum, 0.5 s steps). The current value is shown with one decimal place.
+- **Settings — Storage tab redesign**: The "Offline Library" section now has a short description and includes Cache settings. The "Downloads" section is now labelled "ZIP Export & Archiving". Both sections have been visually consolidated.
+- **Artists page — Load More button** *(reported via [#90](https://github.com/Psychotoxical/psysonic/issues/90))*: The button is now styled as `btn-primary` with a `ChevronDown` icon and proper spacing. Previously it was an unstyled ghost button with no visual affordance.
+- **Tracklist layout consistency**: The Play-button column is now uniformly 60 px and the title column uses `minmax(150px, 1fr)` across all list views — Search Results, Artist Detail, Random Mix, and Advanced Search now match the Album tracklist layout.
+- **Internet Radio — HTML5 playback**: Radio now streams via the browser's native `<audio>` element instead of a custom Rust pipeline. This improves compatibility with AAC/MP3/HLS streams.
+- **AppUpdater — error visibility** *(experimental, still in progress)*: Update failures are now shown inside the update card rather than silently logged. Auto-update remains experimental — a direct GitHub Releases link is always shown as a fallback.
+- **Queue panel — radio drag**: Dragging a radio station card onto the queue is now silently rejected instead of causing an error.
+
+### Fixed
+
+- **PlayerBar stuck on Radio info**: Switching from an Internet Radio station to a regular track no longer leaves the station name and cover in the player bar. `playTrack` now clears `currentRadio` state and stops the audio element immediately.
+- **Radio favourite icon**: The heart icon is now correctly used for favourite radio stations on both the Internet Radio page and the Favourites page. It was incorrectly showing a star.
+- **Offline track deletion — orphaned directories**: Deleting a cached track now removes empty parent directories up to the configured base directory. Uses `std::fs::remove_dir` (safe — only removes empty directories) to avoid accidental data loss.
+
+---
+
+## [1.31.0] - 2026-04-04
+
+> **Note:** This is likely the last update for the coming week — taking a short break. See you on the other side. ☀️
+
+### Added
+
+- **AutoEQ — 10-Band Parametric Equalizer**: Full parametric EQ with 10 adjustable bands, bypass toggle, and pre-gain control. AutoEQ presets are loaded directly from the AutoEQ GitHub repository — search for your headphone model and apply a community-measured correction curve with one click.
+- **Internet Radio — infrastructure** *(work in progress, not yet released)*: The full backend for Internet Radio playback is in place — a dedicated Rust `RadioBuffer` streaming pipeline in the audio engine, Subsonic API integration (`getInternetRadioStations`, create/update/delete), and a `playRadio` action in the player store. The UI page exists but the feature is **not yet accessible** from the sidebar — it will be enabled once the experience is polished.
+- **Tracklist columns — resizable & configurable** *(experimental)*: Album tracklist columns can now be resized by dragging the dividers between header cells, similar to a spreadsheet. A column visibility picker (chevron button at the top right) lets you show or hide individual columns. The `#` column is fixed-width. Column widths and visibility are persisted in localStorage. The feature works but is still being refined.
+- **Genre column in album tracklist**: Albums that have genre tags per track now show a Genre column in the tracklist.
+- **Sidebar auto-migration**: New sidebar items (e.g. Internet Radio) are automatically appended to existing persisted sidebar configurations on first launch — no more missing entries after updates.
+
+### Changed
+
+- **Discord Rich Presence**: Activity type is now `Listening` instead of the default `Playing`. The artist field no longer has the "by " prefix — Discord's layout makes the context clear without it. Album name is shown as a tooltip on the cover icon.
+- **Clickable artist names everywhere**: Artist names in Album Cards, Favorites, Random Mix, Playlist Detail, and Artist Detail tracklists are now clickable links that navigate to the artist page.
+- **Duration format supports hours**: Tracks and albums longer than 60 minutes are now displayed as `H:MM:SS` instead of overflowing minutes (e.g. `75:03` → `1:15:03`).
+- **Format column**: Codec label no longer includes the "kbps" suffix or the `·` separator — cleaner and fits the narrower column better (e.g. `FLAC 1411` instead of `FLAC · 1411 kbps`).
+- **Now Playing sidebar link**: No longer permanently styled as an active menu item. It now only shows the accent background when you are actually on the Now Playing page; at all other times it is distinguished only by its accent text colour.
+- **Paused-state indicator in tracklist**: When the currently active track is paused, a dimmed play icon is shown in the `#` column instead of a blank space — making it clear which track is loaded even when playback is stopped.
+- **Text selection disabled**: Text can no longer be accidentally selected anywhere in the player by click-dragging or pressing Ctrl+A. Standard input fields are unaffected.
+- **Settings — button styles**: "Test connection", "Add server", and "Pick download folder" buttons are now `btn-surface` (with a subtle border) instead of the borderless `btn-ghost` — clearer affordance.
+- **Settings — Behavior section icon**: Replaced the generic `Sliders` icon with `AppWindow` for the Behavior section header.
+- **`btn-surface` border**: The surface button variant now has a 1 px border that brightens on hover — consistent with the card and input visual language.
+- **Queue panel minimum width**: Increased from 250 px to 310 px to prevent layout overflow when the codec/bitrate overlay is visible.
+- **Server compatibility hint**: A short note below the Servers section header in Settings clarifies which Subsonic-compatible servers are supported.
+
+### Fixed
+
+- **Tracklist `#` column header alignment**: The "Select all" checkbox and the `#` symbol in the header now use the same internal layout as the row cells — ensuring alignment with individual checkboxes and track numbers at all window sizes.
+- **Column resize dividers**: The visible 2 px divider line is now placed in the gap between columns rather than inside the cell, so header labels appear visually centred between their dividers.
+- **Internet Radio sidebar link hidden**: The navigation entry is temporarily removed until the feature is ready for release. The underlying code remains in place and will be re-enabled without any migration required.
+
+---
+
+## [1.30.0] - 2026-04-03
+
+### Added
+
+- **Bulk offline download — Playlists & Artist discographies** *(requested by [@Apollosport](https://github.com/Apollosport), [#54](https://github.com/Psychotoxical/psysonic/issues/54))*: Download an entire playlist or a full artist discography for offline use in one click. Progress is tracked per album on the Artist page ("Caching… 2/5 albums").
+- **Offline Library filter tabs**: The Offline Library now has four filter tabs — All, Albums, Playlists, and Discographies. The Discographies tab groups albums under their respective artist with section headings.
+- **Discord Rich Presence** *(requested by [@Bewenben](https://github.com/Bewenben), [#49](https://github.com/Psychotoxical/psysonic/issues/49))* (opt-in): Psysonic can now update your Discord status with the currently playing track, artist, and a live elapsed timer. Toggle in Settings → General → "Discord Rich Presence".
+- **Artist images on Artists page** *(reported by [@Apollosport](https://github.com/Apollosport), [#53](https://github.com/Psychotoxical/psysonic/issues/53))* (opt-in): Artist avatars on the Artists overview can now show the actual artist image from the server instead of the coloured initial. Toggle in Settings → General → "Show artist images". Off by default to preserve performance on large libraries.
+- **Image lazy loading**: Cover art and artist images across all pages now load lazily via `IntersectionObserver` (300 px pre-fetch margin), significantly reducing initial page render time on large libraries.
+
+### Fixed
+
+- **Crossfade triggers on manual track skip** *(reported by [@netherguy4](https://github.com/netherguy4), [#35](https://github.com/Psychotoxical/psysonic/issues/35))*: Manually clicking Next/Prev or selecting a track from the queue no longer triggers the crossfade transition. Crossfade now only fires on natural track end.
+- **Playlist offline cache showing individual album cards**: Caching a playlist offline previously created one card per album group in the Offline Library. The playlist is now stored as a single cohesive entry.
+- **Image cache abort handling**: Aborted image fetches no longer prevented the cached result from being written to IndexedDB, causing covers to reload on every page visit.
+
+### Changed
+
+- **Queue tech strip**: Removed genre from the codec/bitrate overlay strip in the Queue panel — genre strings frequently caused layout overflow.
+- **"Save discography offline" label**: The Artist page offline button now reads "Save discography offline" instead of "Download discography" to avoid confusion with a ZIP export.
+- **Update toast (Win/Mac)**: The update notification now includes a disclaimer that auto-update is still in development, and always shows a direct GitHub Releases download link alongside the install button as a fallback.
+- **Facebook theme overhaul**: Improved grey text contrast, opaque album chip and back button, readable Queue/Lyrics tab labels.
+
+---
+
+## [1.29.0] - 2026-04-02
+
+### Added
+
+- **Radio: instant start + background enrichment** *(requested by [@netherguy4](https://github.com/netherguy4))*: Artist Radio now starts immediately from fast local `getTopSongs` results. `getSimilarSongs2` (Last.fm-dependent, slow) continues in the background and silently enriches the queue once it resolves — no waiting before the first song.
+- **OGG/Vorbis playback** *(contributed by [@JulianNymark](https://github.com/JulianNymark), [PR #42](https://github.com/Psychotoxical/psysonic/pull/42))*: Added `symphonia-format-ogg` — `.ogg` files now play natively without server-side transcoding.
+- **Click-to-seek in synced lyrics** *(contributed by [@nisarg-78](https://github.com/nisarg-78), [PR #38](https://github.com/Psychotoxical/psysonic/pull/38))*: Clicking any line in the synced lyrics pane seeks directly to that timestamp.
+- **Volume scroll wheel** *(contributed by [@nisarg-78](https://github.com/nisarg-78), [PR #38](https://github.com/Psychotoxical/psysonic/pull/38))*: Scrolling the mouse wheel over the volume slider adjusts volume in ±5 % steps.
+- **Lyrics visual states** *(contributed by [@nisarg-78](https://github.com/nisarg-78), [PR #38](https://github.com/Psychotoxical/psysonic/pull/38))*: Synced lyrics lines now show three distinct visual states — active (highlighted), completed (muted), upcoming (neutral).
+- **Themed audio error toasts** *(contributed by [@JulianNymark](https://github.com/JulianNymark), [PR #43](https://github.com/Psychotoxical/psysonic/pull/43) / [PR #44](https://github.com/Psychotoxical/psysonic/pull/44))*: Unsupported formats and decode failures are now surfaced as themed in-app toast notifications with human-readable messages instead of silent failures.
+
+### Fixed
+
+- **Auto-updater endless loop on macOS / Windows**: The single-instance plugin was killing the relaunching process before it could start. Hopefully fixed by exiting the old process first (releasing the lock) and spawning the new process via a shell-based delayed restart.
+- **Radio queue stacking**: Clicking "Start Radio" multiple times no longer appends unlimited duplicate batches — each click replaces the pending Radio section cleanly.
+- **Start Radio keeps current song playing**: Triggering Radio while a song is playing no longer stops and restarts the current track.
+- **Radio proactive loading with songs missing `artistId`**: `getSimilarSongs2` results frequently lack `artistId`. A `currentRadioArtistId` module variable now persists the original artist ID as fallback, so proactive loading always fires correctly.
+- **Seek audio glitch after lyrics click**: Any seek ≥ 100 ms into a track no longer causes a brief fade-from-zero. `EqualPowerFadeIn` now only resets to zero-gain for seeks to the track start.
+
+### Changed
+
+- **Infinite Queue: 5 tracks at a time** (was 25): Proactive loading fetches 5 tracks when ≤ 2 remain, keeping the queue lean without interruption.
+- **Queue section order is now explicit**: Manual tracks → Radio (with `— Radio —` separator) → Infinite Queue auto-added tracks (with `— Auto —` separator). Manually enqueued songs always appear before auto-managed sections.
+
+### Contributors
+
+Thanks to [@nisarg-78](https://github.com/nisarg-78) and [@JulianNymark](https://github.com/JulianNymark) for their first contributions in this release.
+Special thanks to [@netherguy4](https://github.com/netherguy4) for continued feature ideas and feedback.
+
+---
+
+## [1.28.0] - 2026-04-02
+
+### Added
+
+- **Infinite Queue** *(requested by [@netherguy4](https://github.com/netherguy4))*: When the queue runs out with Repeat off, Psysonic automatically appends 25 random tracks (optionally filtered by the last-played track's genre) so playback never stops. Toggle in Settings → Audio → "Infinite Queue". Auto-added tracks appear below a divider in the Queue panel.
+- **Start Radio plays immediately** *(requested by [@netherguy4](https://github.com/netherguy4))*: "Start Radio" from the song/queue context menu now starts the seed track instantly while similar and top tracks load in the background — no waiting for the fetch to complete before music plays.
+
+### Fixed
+
+- **Single-click to play everywhere** *(reported by [@netherguy4](https://github.com/netherguy4))*: Song rows in Album Detail, Playlist Detail, Artist Detail (Top Tracks), Favorites, and Random Mix previously required a double-click. All rows now play on a single click. The track-number cell and the full row are both click targets; buttons and links inside the row still work independently.
+- **Artist page Play All / Shuffle used Top Tracks only** *(reported by [@smirnoffjr](https://github.com/smirnoffjr))*: "Play All" and "Shuffle" on the Artist detail page only sent the loaded top songs to the queue, not the full discography. Now fetches all albums in parallel and plays songs in chronological album order with correct track-number ordering within each album. Buttons show a spinner while albums are loading.
+- **Last.fm icon clipped in player bar**: The Last.fm logo button in the player bar was cut off on the right side. Fixed by correcting the SVG `viewBox` from `0 0 24 24` to `0 0 26 22` to match the actual path extents.
+- **Playlist empty state UX** *(reported by [@netherguy4](https://github.com/netherguy4))*: Empty playlists (on creation, or after deleting all tracks) now show an "Add your first song" CTA button that opens the search panel directly, rather than a plain text message with no action.
+- **Playlist search rows required "+" button click** *(reported by [@netherguy4](https://github.com/netherguy4))*: Search result rows in the song search panel now add the song on a full-row click — the separate "+" button was redundant and easy to miss.
+- **Large playlist performance**: Playlists with hundreds of songs would freeze during mouse movement. Root cause: `hoveredSongId` state triggered a full React re-render of every row on every `mouseenter`/`mouseleave` event. Fixed by removing the JS hover state and replacing it with a CSS `.track-row:hover .bulk-check` rule. Also memoized `songs.map(songToTrack)` and the `existingIds` set to avoid recomputation per render. Same fix applied to `AlbumTrackList`.
+
+---
+
+## [1.27.4] - 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.
+- **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
+
+- **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`.
+- **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.
+- **CI: auto-update signing pipeline**: Signing keys were not being passed correctly during the build, and macOS `.sig` files were uploaded with a generic name the manifest generator couldn't match. Fixed the post-build signing step to upload arch-specific names (`Psysonic_aarch64.app.tar.gz.sig`, `Psysonic_x64.app.tar.gz.sig`). First release where the in-app updater is fully functional on macOS and Windows.
+- **CI: Windows NSIS upload**: The release workflow was not correctly uploading Windows artifacts. Resolved by letting `tauri-action` handle NSIS bundle detection and upload directly — it only searches for what was actually built, so there is no MSI conflict with `--bundles nsis` builds.
+- **CI: npm + Cargo caching** *(contributed 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.
+- **Linux/AUR build: ring linker error**: Builds on Arch/CachyOS failed with `rust-lld: undefined symbol: ring_core_*` after the Tauri updater was added. Arch's `rust` package bakes `-fuse-ld=lld` into the default rustflags; ring's C/asm objects are incompatible with lld. Fixed via `.cargo/config.toml` — forces `cc` as linker driver with `-fuse-ld=bfd` to override the hardcoded lld flag. Added `clang` to the AUR `makedepends` (required by ring's bindgen step).
+
+---
+
+## [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
+
+- **Chinese language (zh)**: Full UI translation contributed by [@jiezhuo](https://github.com/jiezhuo). Language can be selected in Settings → General.
+- **Genres page** *(requested by [@grillonbleu](https://github.com/grillonbleu))*: New page (sidebar: Tags icon) showing all server genres as coloured cards — icon watermark, genre name, album count. Cards are sorted by album count descending and deterministically colour-coded from the Catppuccin palette. Clicking a card opens the album list for that genre. Navigating back restores the previous scroll position.
+- **Genre filter on Albums, New Releases, Random Albums** *(requested by [@grillonbleu](https://github.com/grillonbleu))*: A multi-select genre combobox in the page header lets you filter any of these views to one or more genres. Chips show selected genres; backspace removes the last one; clicking outside collapses the filter automatically when nothing is selected. In filter mode, results are fetched in parallel across all selected genres and deduped client-side.
+- **Settings — Contributors**: A new "Contributors" row in the About section credits community translators.
+
+### Changed
+
+- **Theme — W10** *(Operating Systems)*: New Windows 10 Fluent Design light theme. Clean white content area, flat light-grey `#F3F3F3` navigation pane, near-black `#1C1C1C` taskbar player bar with a Windows-blue `#0078D4` accent stripe, flat buttons without gradients (4 px radius). Sharp, unmistakably W10 — distinct from the glass-era W7/Vista and the rounded-corner W11.
+- **ThemePicker — Windows themes sorted by release year**: W3.1 → W98 → WXP → Wista → W7 → W10 → W11.
+- **Playlists page — removed**: The dedicated Playlists page has been removed. Playlists remain fully accessible via the Queue panel (Save / Load buttons in the toolbar).
+
+### Fixed
+
+- **FLAC seeking** *(Rust audio engine)*: `rodio`'s internal `ReadSeekSource` hardcodes `byte_len() → None`, which caused the symphonia FLAC demuxer to reject all seek attempts (it validates seek byte offsets against the total stream length). Replaced `rodio::Decoder` with a direct symphonia pipeline (`SizedDecoder`) that wraps the audio bytes in a `SizedCursorSource` providing the correct `byte_len()`. FLAC seeking now works regardless of whether the file has an embedded SEEKTABLE.
+- **Genre missing in Queue meta box when playing from album card**: `playAlbum()` (used by the play button on all album cards) mapped song-level genre only — which Navidrome does not always return per song. Now falls back to the album-level genre from `getAlbum`. Same fallback applied to all three play/enqueue handlers in `AlbumDetail`.
+- **Logo gradient CSS variables**: Sidebar logo gradient now uses `--logo-color-start` / `--logo-color-end` with fallbacks, allowing themes with dark sidebars to override the gradient colours.
+
+---
+
+## [1.19.0] - 2026-03-27
+
+### Added
+
+- **Offline storage full warning**: When caching an album would exceed the configured storage limit, a dismissible warning banner appears directly on the album page with quick links to the Offline Library and Settings.
+- **Offline Mode — Help section**: New section in the Help page covering cache setup, playback, and troubleshooting for offline use.
+
+### Changed
+
+- **Windows installer — NSIS**: Switched from WiX/MSI to NSIS (`currentUser` install mode). Upgrades install in-place without requiring an uninstall first.
+- **Tray icon — removed**: The system tray icon and its menu have been removed. Media keys and OS media controls (added in v1.17.0) make the tray redundant. The "Minimize to tray" setting has been removed accordingly. The app now always exits cleanly on window close.
+- **Settings — cache label**: "Max. Image Cache Size" renamed to "Max. Storage Size" to reflect that the limit now covers both image cache and offline tracks.
+- **Cover art — fade-in on load**: `CachedImage` now fades album art in (150 ms) instead of popping in abruptly. The image starts transparent and becomes visible once fully loaded, preventing layout flicker on slow connections.
+- **Scrollbar auto-hide**: Scrollbar thumbs are hidden when content is not being scrolled and fade in on hover or while actively scrolling. System-style themes (W98, Muma Jukebox, Luna Teal, W3.1, DOS) retain always-visible scrollbars.
+- **Help page — two-column layout**: Sections now flow in CSS columns (masonry layout) instead of a rigid two-column grid, making better use of available space.
+- **Theme picker — preview corrections**: Updated colour swatches for T-800 (red accent, was cyan), WnAmp (yellow accent, was green), TetraStack (darker navy background), NightCity 2077 (darker blue-tinted background).
+- **Theme overhaul — Grand Theft Audio, NightCity 2077**: Detailed per-element styling added — active queue item, hover states, track rows, artist/playlist rows, settings tabs, connection indicators, and more. Both themes are now fully consistent across all UI sections.
+- **Theme refinements — Lambda 17, T-800, TetraStack, Muma Jukebox**: Targeted fixes for connection indicators, hover colours, active states, and contrast throughout.
+
+### Fixed
+
+- **AlbumDetail — hero background flicker on hover**: Moving the mouse over songs in the track list caused the blurred hero background to reload on every hover. Moving `hoveredSongId` state into `AlbumTrackList` prevents the parent from re-rendering.
+- **AlbumDetail — context menu loses row highlight**: Right-clicking a song caused the hover highlight to disappear. The row now stays highlighted while its context menu is open (`.context-active` pattern — consistent with Queue and Random Mix).
+- **Muma Jukebox — hero readability**: The "Album" chip and meta info text below the artist name had insufficient contrast. Both are now legible.
+- **Muma Jukebox — waveform colours**: Waveform now uses orange (played) and cyan (buffered) to match the theme's colour scheme.
+
+---
+
+## [1.18.0] - 2026-03-27
+
+### Added
+
+- **Offline Mode *(Beta — tested on CachyOS only)***: Albums can now be cached for offline playback via the new "Cache Offline" button in the album header. Cached albums are accessible in the new **Offline Library** page. On launch without internet, the app automatically navigates there if cached content is available — no blocking overlay. A slim non-blocking banner shows while in offline mode. Offline tracks are removed when clearing the cache.
+- **Settings — Cache section improvements**: Live usage display (image cache + offline tracks). Adjustable limit now goes up to 5 GB. When the limit is reached, the oldest image cache entries are evicted automatically (offline albums are not auto-removed). "Clear Cache" button with confirmation removes both image cache and all offline albums.
+- **MPRIS — Seek support**: The Plasma (and other MPRIS2-compatible) seekbar now works correctly. Seek and SetPosition events from the OS are forwarded to the audio engine. Position is synced every 500 ms while playing so the OS overlay stays accurate.
+- **Lyrics caching**: Fetched lyrics are cached in memory for the session. Switching between Queue and Lyrics tabs no longer re-fetches from lrclib.net.
+- **2 New Themes** *(Movies)*:
+  - **Barb & Ken** — Barbie dreamhouse universe. Deep magenta dark, polka-dot sidebar, glitter shimmer animation on track name, Ken powder blue for artist name and volume slider.
+  - **Toy Tale** — Toy Story. Dark warm toy-chest brown main, Andy's iconic cloud-wallpaper sky-blue sidebar, Woody sheriff-star gold track name, Buzz Lightyear purple for active queue item and volume slider.
+
+### Changed
+
+- **Hero carousel — background crossfade**: The blurred background no longer flickers when switching albums. The last resolved URL is held until the new one is ready, so the old background stays visible until the new one loads.
+- **AlbumDetail — Download hint**: Removed the inline hint text from the album header. The explanation (server zips first — may take a moment) is now in the Help FAQ.
+
+### Fixed
+
+- **Performance — Home page scroll**: `AlbumCard` subscribed to two large Zustand record objects (`tracks`, `albums`) per card — 96+ selector calls across a typical home page. Replaced with a single boolean selector per card. Added `React.memo` to prevent re-renders when parent rows reload.
+- **Middle Earth theme — active queue item contrast**: Track title was invisible (dark text on dark background). Fixed to bright gold. Tech info bar text also corrected.
+
+---
+
+## [1.17.2] - 2026-03-26
+
+### Fixed
+
+- **Player bar disappears when window is resized small**: On Linux (and some Windows configurations), the window manager ignores the `minHeight` constraint, allowing the window to be dragged smaller than intended. The CSS grid's `1fr` row has an implicit `min-height: auto`, meaning it refuses to shrink below the min-content height of the sidebar/main/queue children — this pushed the total grid height beyond `100vh` and scrolled the player bar out of view. Fixed by adding `min-height: 0` to `.sidebar`, `.main-content`, and `.queue-panel`, and `overflow: hidden` to `.app-shell` as a safety net.
+- **Media keys on Windows (SMTC)**: souvlaki's Windows backend requires a valid Win32 HWND to hook into the existing message loop rather than spinning up its own. Passing `hwnd: None` caused a crash on startup (v1.17.0). Now retrieves the main window's HWND via `app.get_webview_window("main").hwnd()` and passes it to `PlatformConfig`. Falls back to disabled gracefully if the HWND cannot be obtained.
+
+---
+
+## [1.17.1] - 2026-03-25
+
+### Fixed
+
+- **Windows crash on startup**: souvlaki SMTC init in `setup()` requires a valid HWND and a running COM message loop, neither of which exists at that point. Media controls are disabled on Windows until init can be properly deferred post-window. All other functionality unaffected.
+
+---
+
+## [1.17.0] - 2026-03-25
+
+### Added
+
+- **Media Keys & OS Media Controls** *(experimental)*: Initial integration via [souvlaki](https://github.com/Sinono3/souvlaki) — MPRIS2 on Linux, Now Playing on macOS, SMTC on Windows. Track metadata (title, artist, album, cover art) and playback state are pushed to the OS media overlay in real time. On Linux, init is skipped gracefully if no D-Bus session is present. This feature is still under active development and observation — behaviour may vary across desktop environments and OS versions.
+- **Random Mix — Artist Blacklist**: Artist names are now included in the keyword blacklist filter. Clickable artist chips in the tracklist let you add an artist to the blacklist with one click — same UX as the existing genre chips.
+- **Favorites — Remove Song**: Each song row in Favorites now has an inline X button to remove the track from favorites instantly (optimistic UI, server unstar happens in the background).
+- **3 New Themes**:
+  - *Games*: **Horde** — Durotar blood-red earth, iron-plate sidebar, forge-fire gold glow on track name.
+  - *Games*: **Alliance** — Stormwind deep navy, cathedral stone columns, paladin holy-light glow, gold sidebar trim and nav accent.
+  - *Operating Systems*: **W11** — Windows 11 Fluent Design dark mode. Mica-style sidebar, clean neutral palette, taskbar-inspired player bar. No gradients — faithful to the minimal Fluent aesthetic.
+
+### Changed
+
+- **Theme renames**: Cobalt Media → **WinMedPlayer**, Onyx Cinema → **P-DVD**, Navy Jukebox → **MuMa Jukebox**.
+- **NowPlayingDropdown**: Username / player name row now uses `--text-secondary` for improved readability across all themes.
+
+### Fixed
+
+- **Performance — App-wide interaction lag**: Removed `[data-theme='X'] * { font-family: ... !important }` universal selectors from several themes (DOS, Unix, and others). The browser places universal selectors in the "universal bucket" and checks them against every DOM node on every style recalculation — measurably sluggish with 500–1000+ elements even when the affected theme is not active. `font-family` is now set on the theme root block (inherits to children) with a targeted `button, input, textarea, select` override for elements that don't inherit font.
+- **Performance — Scroll jank**: Removed `repeating-linear-gradient` / `repeating-radial-gradient` from `.app-shell` in DOS, Unix, GW1, Morpheus, Aqua Quartz, and others. WebKitGTK with `WEBKIT_DISABLE_COMPOSITING_MODE=1` (always set by the AUR wrapper) has no GPU compositing — fine-pitch repeating patterns on the full-viewport background re-rasterize every scroll frame. Patterns are now applied only to `.sidebar` and `.player-bar`, which never scroll.
+- **Contrast — 29 themes**: Audited all themes against WCAG AA. Fixed `--text-muted` and `--text-secondary` values in 29 themes that had insufficient contrast ratios (< 3.5:1). Affects Catppuccin (all four variants), Gruvbox (all six), Nord variants, GW1, Heisenberg, Ice and Fire, Spider-Tech, Morpheus, Hill Valley 85, Dune, and others.
+
+### Removed
+
+- **Theme**: Azerothian Gold removed from the Games group.
+
+---
+
+## [1.16.0] - 2026-03-24
+
+### Added
+
+- **15 New Themes** across multiple categories:
+  - *Operating Systems*: **Aqua Quartz** — Mac OS X Aqua (skeuomorphic jelly buttons, brushed aluminium player bar, pinstripe background, blue Source List sidebar, authentic `#3876f7` accent)
+  - *Movies*: **Spider-Tech** (Spider-Man navy/red), **T-800** (Terminator Skynet blue), **B-Runner** (Blade Runner 2049 amber), **Hill Valley 85** (Back to the Future)
+  - *Games*: **TetraStack** (Tetris 8-bit, cyan, grid background, 0px radii)
+  - *Series*: **Turtle Power** (TMNT turtle green, brick tile sidebar)
+  - *Social Media* (new group): **Insta** (Instagram dark pink), **ReadIt** (Reddit dark orange-red), **The Book** (Facebook light, blue sidebar)
+  - *Operating Systems*: **W3.1** (Windows 3.1, light silver/teal, 0px radii, inset bevels)
+  - *Mediaplayer*: **Jayfin** (Jellyfin-inspired — deep black, purple `#AA5CC3` primary, cyan `#00A4DC` secondary, brand gradient on player bar and progress fill)
+- **Aqua Quartz — Full Skeuomorphic Polish**: All button variants (`.btn-surface`, `.btn-ghost`, `.hero-play-btn`, `.album-card-details-btn`, `.queue-round-btn`) now have the authentic Aqua jelly gradient. Sidebar sports the iconic blue Source List gradient with white icons and a white pill for the active nav link.
+
+### Changed
+
+- **W98 Theme — Complete Overhaul**: Rebuilt from scratch with authentic Windows 98 design language: correct `#d4d0c8` warm-gray button face (not flat `#c0c0c0`), full 4-layer 3D bevel on all panels and buttons (raised default, sunken on press), song title displays in the iconic navy→light-blue title bar gradient, progress bar is a sunken white trough with navy fill, 16px styled scrollbar, all hover/active states consistently navy `#000080` + white text.
+- **Theme Picker — Alphabetical Order**: All theme groups and themes within groups are now sorted alphabetically.
+- **Theme Picker — Group Rename**: "Psysonic Themes — Mediaplayer" renamed to "Mediaplayer".
+- **Sidebar + Queue Toggle Buttons**: Queue toggle button now uses the theme accent color (icon + hover).
+
+### Fixed
+
+- **AlbumDetail — Genre not propagating**: Playing via the album detail Play All / Enqueue All buttons now correctly includes the track genre in the constructed Track objects, making it show up in the Queue strip.
+- **W98 — Theme Accordion active state**: Open category headers are now navy with white text instead of black-on-navy.
+- **Aqua Quartz — Sidebar section labels**: "Library" / "System" labels now render in white on the blue sidebar.
+- **W98 — Connection indicators**: Server name and Last.fm username in the header are now black (`#000000`) on the warm-gray background for full readability.
+
+### Removed
+
+- **Themes**: Removed **Pandora**, **Order of the Phoenix**, and **Imperial Sith** — too similar to other better-executed themes in their respective groups.
+
+---
+
+## [1.15.0] - 2026-03-23
+
+### Added
+
+- **Queue — Genre · Format · Bitrate Strip**: The meta box above the queue now shows a full-width frosted strip with Genre, audio format, and bitrate (e.g. `Electronic · FLAC · 1411 kbps`). Genre is sourced directly from track metadata and is now propagated through all 11 track construction sites across the codebase.
+- **Lyrics — Accent Color Highlight**: The active synced lyrics line is now highlighted in the theme accent color instead of bold+larger text. Eliminates layout jumps caused by the font-weight change pushing lines to wrap.
+
+### Fixed
+
+- **Sidebar — Collapse Button**: The collapse button now correctly sits on the right border of the sidebar, straddling the dividing line between sidebar and main content, and is always visible.
+
+### Changed
+
+- **Queue — Tech Info**: Codec/bitrate badge replaced by the new full-width Genre · Format · Bitrate strip at the top of the meta box.
+
+---
+
+## [1.14.0] - 2026-03-22
+
+### Critical Fixes
+
+- **Prebuffer Flood — 300 simultaneous downloads eliminated**: The audio engine was spawning up to 300 concurrent HTTP download requests during prebuffering, causing network saturation of ~200 Mbit/s and significant CPU load. The root cause was unbounded parallel preload logic in the Rust engine. Fixed: the engine now buffers intelligently with a single controlled preload per track. Network usage dropped to under 100 kbit/s during normal playback.
+- **Gapless Playback — fully stable**: Gapless transitions now work correctly end-to-end. Previously, edge cases in the sample-accurate handoff between tracks caused audio glitches or silence between songs.
+- **Crossfade — fully stable**: The equal-power crossfade (sin/cos envelope) is now reliable across all track transitions. Previous instability was caused by race conditions in the fade-out trigger and Sink lifecycle management.
+- **Now Playing Page — performance**: The Now Playing page no longer causes sustained CPU spikes. Heavy re-renders triggered by frequent `audio:progress` events (previously every 500 ms with wall-clock drift) are resolved — progress is now driven by an atomic sample counter at 100 ms intervals with no layout thrashing.
+
+### Fixed
+
+- **Volume — Clipping at 100%**: Audible distortion at maximum volume eliminated. A `MASTER_HEADROOM` constant of −1 dB (`0.891`) is now applied to all volume calculations, preventing inter-sample peaks from 0 dBFS masters and EQ biquad ripple from clipping.
+- **Seek — Display Desync**: Seeking while paused could cause the time display to jump to the new position while audio continued from the old one. `CountingSource::try_seek` now only resets the sample counter after confirming the seek succeeded.
+- **Gapless + Crossfade — Mutual Exclusion**: Both modes can no longer be active simultaneously. Enabling one auto-disables the other (Queue toolbar + Settings). Running both simultaneously caused a glitch where Song 2, gapless-chained inside the Sink, would play at full volume after Song 1's crossfade completed.
+- **Now Playing — About the Artist**: The "About the Artist" card is now hidden when no biography is available. Artist images that fail to load are silently hidden instead of showing a broken image placeholder.
+
+### Added
+
+- **Waveform — Hover Tooltip**: Hovering over the waveform seekbar shows a floating time label above the cursor. Hidden when no track is loaded or the cursor leaves.
+- **Hero & Album Detail — Format Badge**: Audio format (FLAC, MP3, OGG, …) now shown alongside Year, Genre, and Track Count in the hero meta row on the Home page and in the Album Detail header.
+- **Help — FLAC Seeking**: New FAQ entry explaining that FLAC files without an embedded SEEKTABLE cannot be seeked, with instructions for adding one via `flac` or `metaflac`.
+
+### Changed
+
+- **Queue — Tech Info**: Codec/bitrate badge moved from the frosted-glass cover overlay into the top-right corner of the meta box. Album artwork is no longer obscured.
+
+---
+
+## [1.13.0] - 2026-03-22
+
+### Added
+
+- **SVG Logo**: The Psysonic wordmark is now an inline SVG with a theme-adaptive gradient (`--accent` → `--ctp-blue`), matching the app's visual identity across all 47 themes. The collapsed sidebar shows a standalone P-icon with the same gradient.
+- **Player Bar — Marquee**: Song title and artist name scroll smoothly when the text overflows the fixed-width track info area, pause briefly, then jump back and repeat.
+- **Player Bar — Volume Tooltip**: A floating percentage label appears above the volume slider on hover and updates live while dragging.
+
+### Changed
+
+- **Sidebar — Collapse button**: Moved from the brand header to a small circular hover-tab on the right edge of the sidebar. Hidden until you hover over the sidebar, keeping the logo area uncluttered.
+- **Player Bar — Layout**: Track info area is now a fixed 320 px width. Waveform section has increased margins on both sides for better visual separation between controls, waveform, and volume.
+- **Settings**: Server tab is now the default when opening Settings.
+- **Crossfade**: Experimental badge removed — considered stable.
+- **Help page**: Added entries for Lyrics, Configurable Keybindings, and Font Picker. Theme count corrected to 47 themes across 7 groups.
+
+### Fixed
+
+- **Global shortcuts — double-fire**: Pressing a global shortcut (e.g. `Ctrl+Alt+→`) was triggering the action twice. Root cause: `on_shortcut()` in `tauri_plugin_global_shortcut` accumulates handlers per shortcut across JS HMR reloads. Fixed with a Rust-side `ShortcutMap` state that makes `register_global_shortcut` idempotent.
+- **W98 theme**: Comprehensive contrast fixes across all interactive elements — hover states, buttons, queue items, settings panels, and toggles now use silver-grey (`#e0e0e0`) text on navy (`#000080`) backgrounds.
+- **Help page**: Removed orphaned translation key that was rendering as raw text under the Playback section.
+
+### Beta
+
+- **Global Shortcuts** (Settings → Global Shortcuts): System-wide keyboard shortcuts that trigger playback actions while Psysonic is in the background. Functional on all platforms, but edge cases with certain key combinations or OS-level conflicts may still occur.
+
+---
+
 ## [1.12.0] - 2026-03-22
 
 ### Added

CLAUDE.md

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

README.md

@@ -22,12 +22,14 @@ Designed specifically for users hosting their own music via Navidrome or other S
 
 ## ✨ Features
 
-- 🎨 **Gorgeous UI**: 47 deeply integrated themes across 7 groups — Open Source Classics (Catppuccin, Nord, Gruvbox), Operating Systems, Games, Movies, Series, Psysonic originals, and Psysonic Mediaplayer — with smooth glassmorphism effects and micro-animations.
+- 🎨 **Gorgeous UI**: A large selection of beautiful, lean themes for every taste — Open Source Classics (Catppuccin, Nord, Gruvbox), Operating Systems, Games, Movies, Series, Psysonic originals, and Mediaplayer — with smooth glassmorphism effects and micro-animations.
 - ⚡ **Blazing Fast**: Built with Rust & Tauri — native audio engine (rodio), minimal RAM usage compared to typical Electron apps.
-- 🌍 **Internationalization (i18n)**: Fully translated into English, German, French, and Dutch.
+- 🌍 **Internationalization (i18n)**: Fully translated into English, German, French, Dutch, and Chinese.
 - 📻 **Live "Now Playing"**: See what other users on your server are currently listening to in real-time.
 - 🎵 **Last.fm Integration**: Direct scrobbling, Now Playing updates, love/unlove, Similar Artists, and top stats — no Navidrome configuration required.
-- 🎤 **Synchronized Lyrics**: In-sidebar lyrics pane powered by LRCLIB — synced with auto-scroll and line highlighting, plain-text fallback.
+- 🎤 **Synchronized Lyrics**: In-sidebar lyrics pane powered by LRCLIB — synced with auto-scroll, line highlighting, click-to-seek, and plain-text fallback.
+- 📻 **Smart Radio**: Start a Radio session from any song or artist. Playback begins instantly from top local tracks while similar artist tracks (via Last.fm) load in the background. Radio queues reload proactively so sessions never run dry.
+- ♾️ **Infinite Queue**: When the queue runs out with Repeat off, Psysonic silently appends more random tracks (optionally filtered by genre) so playback never stops. Auto-added tracks appear below a clear `— Auto —` divider.
 - 💾 **IndexedDB Caching**: Ultra-fast loading times with persistent IndexedDB image caching for cover art and artist images.
 - 📀 **Album Downloads**: Support for downloading entire albums directly to your local machine.
 - 💿 **Album & Artist Views**: Beautiful grid displays and detailed artist pages with related albums and color-coded initial avatars for fast browsing.
@@ -36,8 +38,9 @@ Designed specifically for users hosting their own music via Navidrome or other S
 - ⌨️ **Configurable Keybindings**: Rebind any playback action (play/pause, next, seek, volume…) directly in Settings.
 - 🔤 **Font Picker**: 10 UI fonts to choose from in Settings → Appearance.
 - 🎼 **Random Mix**: Generate a random playlist from your entire library. Filter by keyword or pick a Super Genre (Metal, Rock, Electronic, Jazz…) for a focused mix with progressive loading.
-- 🔄 **Update Notifications**: Built-in update checker (on startup + every 10 minutes) that notifies you when a new version is available on GitHub.
-- 🖥️ **Cross-Platform**: Available natively for Windows, macOS, and Linux (including Wayland support).
+- 🏷️ **Genres**: Browse your entire library by genre — coloured cards sorted by album count with a dedicated album view per genre. Multi-select genre filter available on Albums, New Releases, and Random Albums pages.
+- 🔄 **In-App Auto-Update**: Checks for new releases on startup. macOS and Windows can install and relaunch directly in-app; Linux users get a link to the GitHub release page.
+- 🖥️ **Cross-Platform**: Available natively for Windows, macOS, and Linux (Arch AUR, .deb, .rpm).
 
 ## 🗺️ Roadmap
 
@@ -51,39 +54,48 @@ Designed specifically for users hosting their own music via Navidrome or other S
 - [x] Last.fm scrobbling, Now Playing & love/unlove
 - [x] Similar Artists via Last.fm, filtered to library
 - [x] Statistics — Last.fm top charts & recent scrobbles
-- [x] Synchronized lyrics via LRCLIB (in-sidebar, auto-scroll)
+- [x] Synchronized lyrics via LRCLIB (in-sidebar, auto-scroll, click-to-seek)
+- [x] Smart Radio with proactive queue loading
+- [x] Infinite Queue (random auto-fill when queue runs out)
+- [x] OGG/Vorbis native playback
+- [x] In-app auto-updater (macOS + Windows)
 - [x] Multi-server support
 - [x] IndexedDB image caching
-- [x] Random Mix with keyword filter & Super Genre mix
-- [x] 47 themes across 7 groups: Open Source Classics, Operating Systems, Games, Movies, Series, Psysonic originals, Psysonic Mediaplayer
-- [x] Internationalization (English, German, French, Dutch)
+- [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)
 - [x] Configurable keybindings
 - [x] Font picker (10 UI fonts)
 
 ### 📋 Planned
-- [ ] FLAC seeking fix
-- [ ] 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
 
 ---
 
-## ● Known Limitations
-
-- **Linux (drag & drop cursor feedback)**: Due to a WebKitGTK limitation, the drag cursor does not reflect the drop operation type — it may appear as a "forbidden" symbol or show no indicator at all, depending on the desktop environment. Drag and drop itself works correctly.
-- **FLAC seeking**: Jumping to a position in a FLAC file via the waveform seekbar currently does not work. Seeking in MP3, OGG, and other formats is unaffected. This is a known issue and will be investigated.
-
 ## 📥 Installation
 
 Navigate to the [Releases](https://github.com/Psychotoxical/psysonic/releases) page and download the installer for your operating system.
 
-- **Windows**: `.exe` or `.msi`
+- **Windows**: `.exe` (NSIS installer)
 - **macOS**: `.dmg` (Universal or Apple Silicon)
 - **Linux (Ubuntu/Debian)**: `.deb` from GitHub Releases
 - **Linux (Fedora/RHEL)**: `.rpm` from GitHub Releases
-- **Linux (Arch/CachyOS)**: AUR — `yay -S psysonic` or `paru -S psysonic`
 
-> The AUR package builds from source using your system's own WebKitGTK — no bundled libs, no EGL/Mesa compatibility issues.
+## 📦 Installation (Arch Linux / AUR)
+
+Psysonic is available in the **AUR** in two versions. Choose the one that best fits your needs:
+
+| Package | Type | Description |
+| :--- | :--- | :--- |
+| [**psysonic**](https://aur.archlinux.org/packages/psysonic) | **Source** | Builds from source using your system's native **WebKitGTK** (no bundled libs, no EGL/Mesa compatibility issues). |
+| [**psysonic-bin**](https://aur.archlinux.org/packages/psysonic-bin) | **Binary** | Pre-compiled version for faster installation. |
+
+> [!TIP]
+> The AUR binary package is kindly provided and maintained by [**kilyabin**](https://github.com/kilyabin).
 
 ## 🚀 Getting Started
 

package-lock.json

@@ -1,20 +1,22 @@
 {
   "name": "psysonic",
-  "version": "1.8.0",
+  "version": "1.30.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "psysonic",
-      "version": "1.8.0",
+      "version": "1.30.0",
       "dependencies": {
+        "@tanstack/react-virtual": "^3.13.23",
         "@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",
@@ -1225,6 +1227,33 @@
         "win32"
       ]
     },
+    "node_modules/@tanstack/react-virtual": {
+      "version": "3.13.23",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.13.23.tgz",
+      "integrity": "sha512-XnMRnHQ23piOVj2bzJqHrRrLg4r+F86fuBcwteKfbIjJrtGxb4z7tIvPVAe4B+4UVwo9G4Giuz5fmapcrnZ0OQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/virtual-core": "3.13.23"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@tanstack/virtual-core": {
+      "version": "3.13.23",
+      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.13.23.tgz",
+      "integrity": "sha512-zSz2Z2HNyLjCplANTDyl3BcdQJc2k1+yyFoKhNRmCr7V7dY8o8q5m8uFTI1/Pg1kL+Hgrz6u3Xo6eFUB7l66cg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@tauri-apps/api": {
       "version": "2.10.1",
       "resolved": "https://registry.npmjs.org/@tauri-apps/api/-/api-2.10.1.tgz",
@@ -1494,10 +1523,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 +1550,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",
@@ -2302,9 +2340,9 @@
       "license": "ISC"
     },
     "node_modules/picomatch": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
-      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "dev": true,
       "license": "MIT",
       "engines": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "psysonic",
-  "version": "1.12.0",
+  "version": "1.32.0",
   "private": true,
   "scripts": {
     "dev": "vite",
@@ -11,13 +11,15 @@
     "tauri:build": "tauri build"
   },
   "dependencies": {
+    "@tanstack/react-virtual": "^3.13.23",
     "@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",

packages/aur/PKGBUILD

@@ -1,6 +1,6 @@
 # Maintainer: Psychotoxic <psychotoxic@gmx.de>
 pkgname=psysonic
-pkgver=1.12.0
+pkgver=1.31.0
 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,8 @@ makedepends=(
   'npm'
   'rust'
   'cargo'
+  'clang'
+  'nasm'
 )
 source=("$pkgname-$pkgver.tar.gz::https://github.com/Psychotoxical/psysonic/archive/refs/tags/v$pkgver.tar.gz")
 sha256sums=('SKIP')
@@ -27,6 +28,20 @@ build() {
   export CARGO_HOME="$srcdir/cargo-home"
   export npm_config_cache="$srcdir/npm-cache"
 
+  # ring (used by tauri-plugin-updater → rustls) ships C/asm objects whose
+  # symbols (ring_core_*) lld cannot resolve.  On Arch/CachyOS, -fuse-ld=lld
+  # is hardcoded into rustc itself (not just makepkg.conf RUSTFLAGS), so a
+  # string substitution is a no-op.  Appending -C link-arg=-fuse-ld=bfd works
+  # because the last -fuse-ld=* flag passed to cc wins.
+  export RUSTFLAGS="${RUSTFLAGS} -C link-arg=-fuse-ld=bfd"
+
+  # CachyOS sets -flto=auto in CFLAGS.  ring compiles its C/asm objects via the
+  # cc crate and picks up CFLAGS, producing fat-LTO objects.  bfd cannot resolve
+  # symbols from fat-LTO objects when linking against non-LTO Rust rlibs, causing
+  # "undefined reference to ring_core_*" even though the symbols exist in the .a.
+  # Strip CFLAGS/CXXFLAGS entirely so ring builds plain ELF objects.
+  unset CFLAGS CXXFLAGS
+
   npm install
   npm run tauri:build -- --no-bundle
 }

public/p-small.svg

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="115.549mm"
+   height="130.30972mm"
+   viewBox="0 0 115.549 130.30972"
+   version="1.1"
+   id="svg1"
+   xml:space="preserve"
+   inkscape:export-filename="p-small.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"><inkscape:page
+       x="0"
+       y="0"
+       width="115.549"
+       height="130.30972"
+       id="page2"
+       margin="0"
+       bleed="0" /></sodipodi:namedview><defs
+     id="defs1" /><g
+     inkscape:label="Ebene 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(220.53237,27.789086)"><path
+       style="fill:#ffffff"
+       d="m -191.83501,87.581279 v -14.93937 l 1.01946,-0.029 c 1.8496,-0.0526 5.09881,-2.007 6.98453,-4.20123 2.13731,-2.48697 3.28384,-4.43657 4.52545,-7.69521 0.51751,-1.35819 1.078,-2.78694 1.24554,-3.175 0.16755,-0.38805 0.88173,-2.7693 1.58707,-5.29166 0.70533,-2.52236 1.41605,-4.90361 1.57937,-5.29167 0.16441,-0.39067 0.30759,11.85061 0.32081,27.42847 l 0.0239,28.134031 h -8.64306 -8.64305 z m -3.42317,-19.65031 c -0.81559,-0.16111 -1.84746,-0.48272 -2.29306,-0.71468 -1.09242,-0.5687 -2.72853,-2.16884 -2.74064,-2.68038 -0.005,-0.22765 -0.38465,-0.86265 -0.84281,-1.41111 -0.8626,-1.03264 -2.38323,-4.66133 -4.63113,-11.05137 -1.72997,-4.91772 -1.63358,-4.68451 -3.35352,-8.11389 -0.82714,-1.64924 -1.91998,-3.45186 -2.42853,-4.00582 -1.28805,-1.40307 -4.41406,-2.7715 -6.89485,-3.01827 l -2.08965,-0.20785 1.43221,-0.99035 c 1.5468,-1.06957 5.31147,-2.35399 6.9124,-2.35835 1.72563,-0.005 4.25283,0.7809 5.71247,1.77575 1.63175,1.11217 3.92377,3.83335 3.77488,4.48172 -0.0559,0.24344 0.11427,0.44261 0.37817,0.44261 0.53171,0 3.78445,6.24176 3.78445,7.26208 0,0.15195 0.30609,0.92171 0.6802,1.71057 0.37412,0.78887 1.08633,2.44854 1.5827,3.68817 1.00279,2.50434 2.57055,5.33152 2.95544,5.32962 0.85183,-0.004 3.83204,-7.97894 5.40479,-14.46266 1.9193,-7.91232 5.01161,-18.44694 6.10967,-20.81389 2.30114,-4.96024 4.60601,-7.03734 8.12223,-7.31959 1.95377,-0.15683 2.44243,-0.0601 4.01261,0.79453 2.49546,1.35819 3.31044,2.35029 5.40102,6.57479 0.93741,1.89425 3.29625,9.1126 4.36446,13.35583 0.51289,2.03729 1.21262,4.57729 1.55498,5.64444 0.34236,1.06716 0.83543,2.65466 1.09573,3.52778 0.96371,3.23267 3.75139,8.2344 5.51689,9.89856 2.09506,1.9748 4.10606,3.2977 5.85136,3.84922 0.72761,0.22993 1.32292,0.49404 1.32292,0.58692 0,0.0929 -0.71641,0.48577 -1.59202,0.87309 -2.29705,1.01609 -6.48839,1.02714 -8.75823,0.0231 -3.42674,-1.51581 -6.17101,-4.45149 -8.36088,-8.94406 -0.59782,-1.22642 -1.23412,-2.50231 -1.41401,-2.8353 -0.17988,-0.333 -0.47718,-1.20612 -0.66066,-1.94028 -0.74987,-3.00045 -6.42415,-19.25706 -6.99617,-20.04376 -0.79895,-1.09881 -0.87818,-1.08476 -1.55823,0.27628 -1.1693,2.3402 -2.07427,5.18987 -3.61302,11.37709 -3.03871,12.21839 -6.36478,22.38234 -8.0081,24.47148 -0.36655,0.466 -0.66646,0.99153 -0.66646,1.16785 0,0.86017 -2.61454,3.05174 -4.28395,3.59089 -1.94625,0.62857 -2.53141,0.65417 -4.78366,0.20926 z m 49.82815,-13.29265 c -2.77991,-0.70614 -6.29714,-6.05076 -8.15323,-12.38927 -0.30389,-1.03778 -0.47868,-1.96073 -0.38841,-2.051 0.0903,-0.0903 1.5695,-0.22877 3.28719,-0.30779 8.47079,-0.38969 9.78292,-0.63406 14.05919,-2.61837 3.78653,-1.75706 9.09259,-6.79386 10.56941,-10.03304 3.78708,-8.30644 4.33485,-14.20262 2.08448,-22.4376404 -1.15336,-4.22063002 -3.6401,-8.21361 -6.73205,-10.80969 -1.12271,-0.94265 -2.12066,-1.8146 -2.21767,-1.93765 -0.3794,-0.48123 -4.30858,-2.4333296 -6.41876,-3.1889796 -2.16778,-0.77628 -2.64336,-0.79956 -18.71666,-0.91597 l -16.49236,-0.11945 V -0.68605142 10.798429 h -0.8256 c -1.53109,0 -5.09758,2.09614 -6.79456,3.99338 -1.65639,1.85186 -4.54446,7.43871 -5.41264,10.47051 -0.25002,0.87312 -0.58222,1.98437 -0.73823,2.46944 -0.39136,1.2169 -2.0765,7.30176 -3.12634,11.28889 -0.2052,0.7793 -0.33685,-11.27627 -0.35693,-32.6846104 l -0.0318,-33.9193396 1.55319,-0.12371 c 0.85426,-0.068 12.32395,-0.10028 25.4882,-0.0716 20.69377,0.045 24.2694,0.12953 26.40444,0.62402 3.9887,0.92382 7.58472,2.04932 7.58472,2.3739 0,0.16576 0.52886,0.30139 1.17524,0.30139 2.09331,0 10.76432,4.87704 10.22435,5.75072 -0.12186,0.19718 -0.0447,0.24734 0.17328,0.11263 0.60692,-0.3751 4.21691,3.0333 6.9953,6.60467 2.06429,2.6534496 4.63504,8.4775396 5.94174,13.4611396 1.7681,6.7433 1.74625,15.8657704 -0.0549,22.9305504 -2.11084,8.27937 -4.97852,13.41407 -10.75456,19.25647 -2.59968,2.62955 -8.78375,7.02548 -9.88326,7.02548 -0.27557,0 -0.68644,0.1854 -0.91304,0.412 -0.39593,0.39593 -0.78905,0.56749 -4.31522,1.88319 -3.68968,1.37672 -10.83412,2.28545 -13.21446,1.68081 z m 7.57002,-15.26489 c 0,-0.19403 -0.07,-0.35278 -0.15557,-0.35278 -0.0856,0 -0.25368,0.15875 -0.3736,0.35278 -0.11992,0.19403 -0.0499,0.35278 0.15557,0.35278 0.20548,0 0.3736,-0.15875 0.3736,-0.35278 z"
+       id="path1" /></g></svg>

scripts/generate-update-manifest.js

@@ -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(', ')}`);

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "psysonic"
-version = "1.12.0"
+version = "1.32.0"
 description = "Psysonic Desktop Music Player"
 authors = []
 license = ""
@@ -22,8 +22,8 @@ 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-notification = "2"
 tauri-plugin-global-shortcut = "2"
 tauri-plugin-store = "2"
 tauri-plugin-dialog = "2"
@@ -31,8 +31,15 @@ tauri-plugin-fs = "2"
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"
 rodio = { version = "0.19", default-features = false, features = ["symphonia-all"] }
-reqwest = { version = "0.12", features = ["stream", "json"] }
+symphonia = { version = "0.5", default-features = false, features = ["flac", "mp3", "pcm", "aac", "isomp4", "vorbis", "ogg", "wav", "adpcm"] }
+reqwest = { version = "0.12", features = ["stream", "json", "multipart"] }
+futures-util = "0.3"
 md5 = "0.7"
 tokio = { version = "1", features = ["rt", "time"] }
 biquad = "0.4"
+ringbuf = "0.3"
 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"] }
+discord-rich-presence = "0.2"

src-tauri/Entitlements.plist

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+    <!-- Psysonic is a music PLAYER only — no microphone access needed.
+         This suppresses the macOS microphone permission prompt triggered
+         by cpal/CoreAudio enumerating input devices during audio init. -->
+    <key>com.apple.security.device.audio-input</key>
+    <false/>
+</dict>
+</plist>

src-tauri/Info.plist

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+    <!-- Psysonic is a music player only — it does not record audio.
+         This description is shown if macOS prompts for microphone access
+         (triggered by CoreAudio enumerating input devices during init). -->
+    <key>NSMicrophoneUsageDescription</key>
+    <string>Psysonic does not use the microphone. This prompt is triggered by the audio subsystem initializing output devices.</string>
+</dict>
+</plist>

src-tauri/capabilities/default.json

@@ -8,7 +8,6 @@
     "core:default",
     "shell:default",
     { "identifier": "shell:allow-open", "allow": [{ "url": "https://**" }] },
-    "notification:default",
     "global-shortcut:allow-register",
     "global-shortcut:allow-unregister",
     "store:default",
@@ -18,10 +17,13 @@
     "store:allow-save",
     "dialog:default",
     "dialog:allow-open",
+    "dialog:allow-save",
     "fs:default",
     "fs:allow-write-file",
+    "fs:allow-read-file",
     "fs:allow-mkdir",
     "fs:scope-download-recursive",
+    "fs:scope-home-recursive",
     "window-state:allow-save-window-state",
     "window-state:allow-restore-state",
     "core:window:allow-set-title",
@@ -31,6 +33,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"
   ]
 }

src-tauri/gen/schemas/capabilities.json

@@ -1 +1 @@
-{"default":{"identifier":"default","description":"Default capabilities for Psysonic","local":true,"windows":["main"],"permissions":["core:default","shell:default",{"identifier":"shell:allow-open","allow":[{"url":"https://**"}]},"notification:default","global-shortcut:allow-register","global-shortcut:allow-unregister","store:default","store:allow-load","store:allow-set","store:allow-get","store:allow-save","dialog:default","dialog:allow-open","fs:default","fs:allow-write-file","fs:allow-mkdir","fs:scope-download-recursive","window-state:allow-save-window-state","window-state:allow-restore-state","core:window:allow-set-title","core:window:allow-close","core:window:allow-hide","core:window:allow-show","core:window:allow-set-fullscreen","core:window:allow-is-fullscreen","core:window:allow-create","core:webview:allow-create-webview-window"],"platforms":["linux","macOS","windows"]}}
+{"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","dialog:allow-save","fs:default","fs:allow-write-file","fs:allow-read-file","fs:allow-mkdir","fs:scope-download-recursive","fs:scope-home-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"]}}

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

@@ -6015,202 +6015,34 @@
           "markdownDescription": "Denies the unregister_all command without any pre-configured scope."
         },
         {
-          "description": "This permission set configures which\nnotification features are by default exposed.\n\n#### Granted Permissions\n\nIt allows all notification related features.\n\n\n#### This default permission set includes:\n\n- `allow-is-permission-granted`\n- `allow-request-permission`\n- `allow-notify`\n- `allow-register-action-types`\n- `allow-register-listener`\n- `allow-cancel`\n- `allow-get-pending`\n- `allow-remove-active`\n- `allow-get-active`\n- `allow-check-permissions`\n- `allow-show`\n- `allow-batch`\n- `allow-list-channels`\n- `allow-delete-channel`\n- `allow-create-channel`\n- `allow-permission-state`",
+          "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": "notification:default",
-          "markdownDescription": "This permission set configures which\nnotification features are by default exposed.\n\n#### Granted Permissions\n\nIt allows all notification related features.\n\n\n#### This default permission set includes:\n\n- `allow-is-permission-granted`\n- `allow-request-permission`\n- `allow-notify`\n- `allow-register-action-types`\n- `allow-register-listener`\n- `allow-cancel`\n- `allow-get-pending`\n- `allow-remove-active`\n- `allow-get-active`\n- `allow-check-permissions`\n- `allow-show`\n- `allow-batch`\n- `allow-list-channels`\n- `allow-delete-channel`\n- `allow-create-channel`\n- `allow-permission-state`"
+          "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 batch command without any pre-configured scope.",
+          "description": "Enables the exit command without any pre-configured scope.",
           "type": "string",
-          "const": "notification:allow-batch",
-          "markdownDescription": "Enables the batch command without any pre-configured scope."
+          "const": "process:allow-exit",
+          "markdownDescription": "Enables the exit command without any pre-configured scope."
         },
         {
-          "description": "Enables the cancel command without any pre-configured scope.",
+          "description": "Enables the restart command without any pre-configured scope.",
           "type": "string",
-          "const": "notification:allow-cancel",
-          "markdownDescription": "Enables the cancel command without any pre-configured scope."
+          "const": "process:allow-restart",
+          "markdownDescription": "Enables the restart command without any pre-configured scope."
         },
         {
-          "description": "Enables the check_permissions command without any pre-configured scope.",
+          "description": "Denies the exit command without any pre-configured scope.",
           "type": "string",
-          "const": "notification:allow-check-permissions",
-          "markdownDescription": "Enables the check_permissions command without any pre-configured scope."
+          "const": "process:deny-exit",
+          "markdownDescription": "Denies the exit command without any pre-configured scope."
         },
         {
-          "description": "Enables the create_channel command without any pre-configured scope.",
+          "description": "Denies the restart command without any pre-configured scope.",
           "type": "string",
-          "const": "notification:allow-create-channel",
-          "markdownDescription": "Enables the create_channel command without any pre-configured scope."
-        },
-        {
-          "description": "Enables the delete_channel command without any pre-configured scope.",
-          "type": "string",
-          "const": "notification:allow-delete-channel",
-          "markdownDescription": "Enables the delete_channel command without any pre-configured scope."
-        },
-        {
-          "description": "Enables the get_active command without any pre-configured scope.",
-          "type": "string",
-          "const": "notification:allow-get-active",
-          "markdownDescription": "Enables the get_active command without any pre-configured scope."
-        },
-        {
-          "description": "Enables the get_pending command without any pre-configured scope.",
-          "type": "string",
-          "const": "notification:allow-get-pending",
-          "markdownDescription": "Enables the get_pending command without any pre-configured scope."
-        },
-        {
-          "description": "Enables the is_permission_granted command without any pre-configured scope.",
-          "type": "string",
-          "const": "notification:allow-is-permission-granted",
-          "markdownDescription": "Enables the is_permission_granted command without any pre-configured scope."
-        },
-        {
-          "description": "Enables the list_channels command without any pre-configured scope.",
-          "type": "string",
-          "const": "notification:allow-list-channels",
-          "markdownDescription": "Enables the list_channels command without any pre-configured scope."
-        },
-        {
-          "description": "Enables the notify command without any pre-configured scope.",
-          "type": "string",
-          "const": "notification:allow-notify",
-          "markdownDescription": "Enables the notify command without any pre-configured scope."
-        },
-        {
-          "description": "Enables the permission_state command without any pre-configured scope.",
-          "type": "string",
-          "const": "notification:allow-permission-state",
-          "markdownDescription": "Enables the permission_state command without any pre-configured scope."
-        },
-        {
-          "description": "Enables the register_action_types command without any pre-configured scope.",
-          "type": "string",
-          "const": "notification:allow-register-action-types",
-          "markdownDescription": "Enables the register_action_types command without any pre-configured scope."
-        },
-        {
-          "description": "Enables the register_listener command without any pre-configured scope.",
-          "type": "string",
-          "const": "notification:allow-register-listener",
-          "markdownDescription": "Enables the register_listener command without any pre-configured scope."
-        },
-        {
-          "description": "Enables the remove_active command without any pre-configured scope.",
-          "type": "string",
-          "const": "notification:allow-remove-active",
-          "markdownDescription": "Enables the remove_active command without any pre-configured scope."
-        },
-        {
-          "description": "Enables the request_permission command without any pre-configured scope.",
-          "type": "string",
-          "const": "notification:allow-request-permission",
-          "markdownDescription": "Enables the request_permission command without any pre-configured scope."
-        },
-        {
-          "description": "Enables the show command without any pre-configured scope.",
-          "type": "string",
-          "const": "notification:allow-show",
-          "markdownDescription": "Enables the show command without any pre-configured scope."
-        },
-        {
-          "description": "Denies the batch command without any pre-configured scope.",
-          "type": "string",
-          "const": "notification:deny-batch",
-          "markdownDescription": "Denies the batch command without any pre-configured scope."
-        },
-        {
-          "description": "Denies the cancel command without any pre-configured scope.",
-          "type": "string",
-          "const": "notification:deny-cancel",
-          "markdownDescription": "Denies the cancel command without any pre-configured scope."
-        },
-        {
-          "description": "Denies the check_permissions command without any pre-configured scope.",
-          "type": "string",
-          "const": "notification:deny-check-permissions",
-          "markdownDescription": "Denies the check_permissions command without any pre-configured scope."
-        },
-        {
-          "description": "Denies the create_channel command without any pre-configured scope.",
-          "type": "string",
-          "const": "notification:deny-create-channel",
-          "markdownDescription": "Denies the create_channel command without any pre-configured scope."
-        },
-        {
-          "description": "Denies the delete_channel command without any pre-configured scope.",
-          "type": "string",
-          "const": "notification:deny-delete-channel",
-          "markdownDescription": "Denies the delete_channel command without any pre-configured scope."
-        },
-        {
-          "description": "Denies the get_active command without any pre-configured scope.",
-          "type": "string",
-          "const": "notification:deny-get-active",
-          "markdownDescription": "Denies the get_active command without any pre-configured scope."
-        },
-        {
-          "description": "Denies the get_pending command without any pre-configured scope.",
-          "type": "string",
-          "const": "notification:deny-get-pending",
-          "markdownDescription": "Denies the get_pending command without any pre-configured scope."
-        },
-        {
-          "description": "Denies the is_permission_granted command without any pre-configured scope.",
-          "type": "string",
-          "const": "notification:deny-is-permission-granted",
-          "markdownDescription": "Denies the is_permission_granted command without any pre-configured scope."
-        },
-        {
-          "description": "Denies the list_channels command without any pre-configured scope.",
-          "type": "string",
-          "const": "notification:deny-list-channels",
-          "markdownDescription": "Denies the list_channels command without any pre-configured scope."
-        },
-        {
-          "description": "Denies the notify command without any pre-configured scope.",
-          "type": "string",
-          "const": "notification:deny-notify",
-          "markdownDescription": "Denies the notify command without any pre-configured scope."
-        },
-        {
-          "description": "Denies the permission_state command without any pre-configured scope.",
-          "type": "string",
-          "const": "notification:deny-permission-state",
-          "markdownDescription": "Denies the permission_state command without any pre-configured scope."
-        },
-        {
-          "description": "Denies the register_action_types command without any pre-configured scope.",
-          "type": "string",
-          "const": "notification:deny-register-action-types",
-          "markdownDescription": "Denies the register_action_types command without any pre-configured scope."
-        },
-        {
-          "description": "Denies the register_listener command without any pre-configured scope.",
-          "type": "string",
-          "const": "notification:deny-register-listener",
-          "markdownDescription": "Denies the register_listener command without any pre-configured scope."
-        },
-        {
-          "description": "Denies the remove_active command without any pre-configured scope.",
-          "type": "string",
-          "const": "notification:deny-remove-active",
-          "markdownDescription": "Denies the remove_active command without any pre-configured scope."
-        },
-        {
-          "description": "Denies the request_permission command without any pre-configured scope.",
-          "type": "string",
-          "const": "notification:deny-request-permission",
-          "markdownDescription": "Denies the request_permission command without any pre-configured scope."
-        },
-        {
-          "description": "Denies the show command without any pre-configured scope.",
-          "type": "string",
-          "const": "notification:deny-show",
-          "markdownDescription": "Denies the show command without any pre-configured scope."
+          "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`",
@@ -6452,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",

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

@@ -6015,202 +6015,34 @@
           "markdownDescription": "Denies the unregister_all command without any pre-configured scope."
         },
         {
-          "description": "This permission set configures which\nnotification features are by default exposed.\n\n#### Granted Permissions\n\nIt allows all notification related features.\n\n\n#### This default permission set includes:\n\n- `allow-is-permission-granted`\n- `allow-request-permission`\n- `allow-notify`\n- `allow-register-action-types`\n- `allow-register-listener`\n- `allow-cancel`\n- `allow-get-pending`\n- `allow-remove-active`\n- `allow-get-active`\n- `allow-check-permissions`\n- `allow-show`\n- `allow-batch`\n- `allow-list-channels`\n- `allow-delete-channel`\n- `allow-create-channel`\n- `allow-permission-state`",
+          "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": "notification:default",
-          "markdownDescription": "This permission set configures which\nnotification features are by default exposed.\n\n#### Granted Permissions\n\nIt allows all notification related features.\n\n\n#### This default permission set includes:\n\n- `allow-is-permission-granted`\n- `allow-request-permission`\n- `allow-notify`\n- `allow-register-action-types`\n- `allow-register-listener`\n- `allow-cancel`\n- `allow-get-pending`\n- `allow-remove-active`\n- `allow-get-active`\n- `allow-check-permissions`\n- `allow-show`\n- `allow-batch`\n- `allow-list-channels`\n- `allow-delete-channel`\n- `allow-create-channel`\n- `allow-permission-state`"
+          "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 batch command without any pre-configured scope.",
+          "description": "Enables the exit command without any pre-configured scope.",
           "type": "string",
-          "const": "notification:allow-batch",
-          "markdownDescription": "Enables the batch command without any pre-configured scope."
+          "const": "process:allow-exit",
+          "markdownDescription": "Enables the exit command without any pre-configured scope."
         },
         {
-          "description": "Enables the cancel command without any pre-configured scope.",
+          "description": "Enables the restart command without any pre-configured scope.",
           "type": "string",
-          "const": "notification:allow-cancel",
-          "markdownDescription": "Enables the cancel command without any pre-configured scope."
+          "const": "process:allow-restart",
+          "markdownDescription": "Enables the restart command without any pre-configured scope."
         },
         {
-          "description": "Enables the check_permissions command without any pre-configured scope.",
+          "description": "Denies the exit command without any pre-configured scope.",
           "type": "string",
-          "const": "notification:allow-check-permissions",
-          "markdownDescription": "Enables the check_permissions command without any pre-configured scope."
+          "const": "process:deny-exit",
+          "markdownDescription": "Denies the exit command without any pre-configured scope."
         },
         {
-          "description": "Enables the create_channel command without any pre-configured scope.",
+          "description": "Denies the restart command without any pre-configured scope.",
           "type": "string",
-          "const": "notification:allow-create-channel",
-          "markdownDescription": "Enables the create_channel command without any pre-configured scope."
-        },
-        {
-          "description": "Enables the delete_channel command without any pre-configured scope.",
-          "type": "string",
-          "const": "notification:allow-delete-channel",
-          "markdownDescription": "Enables the delete_channel command without any pre-configured scope."
-        },
-        {
-          "description": "Enables the get_active command without any pre-configured scope.",
-          "type": "string",
-          "const": "notification:allow-get-active",
-          "markdownDescription": "Enables the get_active command without any pre-configured scope."
-        },
-        {
-          "description": "Enables the get_pending command without any pre-configured scope.",
-          "type": "string",
-          "const": "notification:allow-get-pending",
-          "markdownDescription": "Enables the get_pending command without any pre-configured scope."
-        },
-        {
-          "description": "Enables the is_permission_granted command without any pre-configured scope.",
-          "type": "string",
-          "const": "notification:allow-is-permission-granted",
-          "markdownDescription": "Enables the is_permission_granted command without any pre-configured scope."
-        },
-        {
-          "description": "Enables the list_channels command without any pre-configured scope.",
-          "type": "string",
-          "const": "notification:allow-list-channels",
-          "markdownDescription": "Enables the list_channels command without any pre-configured scope."
-        },
-        {
-          "description": "Enables the notify command without any pre-configured scope.",
-          "type": "string",
-          "const": "notification:allow-notify",
-          "markdownDescription": "Enables the notify command without any pre-configured scope."
-        },
-        {
-          "description": "Enables the permission_state command without any pre-configured scope.",
-          "type": "string",
-          "const": "notification:allow-permission-state",
-          "markdownDescription": "Enables the permission_state command without any pre-configured scope."
-        },
-        {
-          "description": "Enables the register_action_types command without any pre-configured scope.",
-          "type": "string",
-          "const": "notification:allow-register-action-types",
-          "markdownDescription": "Enables the register_action_types command without any pre-configured scope."
-        },
-        {
-          "description": "Enables the register_listener command without any pre-configured scope.",
-          "type": "string",
-          "const": "notification:allow-register-listener",
-          "markdownDescription": "Enables the register_listener command without any pre-configured scope."
-        },
-        {
-          "description": "Enables the remove_active command without any pre-configured scope.",
-          "type": "string",
-          "const": "notification:allow-remove-active",
-          "markdownDescription": "Enables the remove_active command without any pre-configured scope."
-        },
-        {
-          "description": "Enables the request_permission command without any pre-configured scope.",
-          "type": "string",
-          "const": "notification:allow-request-permission",
-          "markdownDescription": "Enables the request_permission command without any pre-configured scope."
-        },
-        {
-          "description": "Enables the show command without any pre-configured scope.",
-          "type": "string",
-          "const": "notification:allow-show",
-          "markdownDescription": "Enables the show command without any pre-configured scope."
-        },
-        {
-          "description": "Denies the batch command without any pre-configured scope.",
-          "type": "string",
-          "const": "notification:deny-batch",
-          "markdownDescription": "Denies the batch command without any pre-configured scope."
-        },
-        {
-          "description": "Denies the cancel command without any pre-configured scope.",
-          "type": "string",
-          "const": "notification:deny-cancel",
-          "markdownDescription": "Denies the cancel command without any pre-configured scope."
-        },
-        {
-          "description": "Denies the check_permissions command without any pre-configured scope.",
-          "type": "string",
-          "const": "notification:deny-check-permissions",
-          "markdownDescription": "Denies the check_permissions command without any pre-configured scope."
-        },
-        {
-          "description": "Denies the create_channel command without any pre-configured scope.",
-          "type": "string",
-          "const": "notification:deny-create-channel",
-          "markdownDescription": "Denies the create_channel command without any pre-configured scope."
-        },
-        {
-          "description": "Denies the delete_channel command without any pre-configured scope.",
-          "type": "string",
-          "const": "notification:deny-delete-channel",
-          "markdownDescription": "Denies the delete_channel command without any pre-configured scope."
-        },
-        {
-          "description": "Denies the get_active command without any pre-configured scope.",
-          "type": "string",
-          "const": "notification:deny-get-active",
-          "markdownDescription": "Denies the get_active command without any pre-configured scope."
-        },
-        {
-          "description": "Denies the get_pending command without any pre-configured scope.",
-          "type": "string",
-          "const": "notification:deny-get-pending",
-          "markdownDescription": "Denies the get_pending command without any pre-configured scope."
-        },
-        {
-          "description": "Denies the is_permission_granted command without any pre-configured scope.",
-          "type": "string",
-          "const": "notification:deny-is-permission-granted",
-          "markdownDescription": "Denies the is_permission_granted command without any pre-configured scope."
-        },
-        {
-          "description": "Denies the list_channels command without any pre-configured scope.",
-          "type": "string",
-          "const": "notification:deny-list-channels",
-          "markdownDescription": "Denies the list_channels command without any pre-configured scope."
-        },
-        {
-          "description": "Denies the notify command without any pre-configured scope.",
-          "type": "string",
-          "const": "notification:deny-notify",
-          "markdownDescription": "Denies the notify command without any pre-configured scope."
-        },
-        {
-          "description": "Denies the permission_state command without any pre-configured scope.",
-          "type": "string",
-          "const": "notification:deny-permission-state",
-          "markdownDescription": "Denies the permission_state command without any pre-configured scope."
-        },
-        {
-          "description": "Denies the register_action_types command without any pre-configured scope.",
-          "type": "string",
-          "const": "notification:deny-register-action-types",
-          "markdownDescription": "Denies the register_action_types command without any pre-configured scope."
-        },
-        {
-          "description": "Denies the register_listener command without any pre-configured scope.",
-          "type": "string",
-          "const": "notification:deny-register-listener",
-          "markdownDescription": "Denies the register_listener command without any pre-configured scope."
-        },
-        {
-          "description": "Denies the remove_active command without any pre-configured scope.",
-          "type": "string",
-          "const": "notification:deny-remove-active",
-          "markdownDescription": "Denies the remove_active command without any pre-configured scope."
-        },
-        {
-          "description": "Denies the request_permission command without any pre-configured scope.",
-          "type": "string",
-          "const": "notification:deny-request-permission",
-          "markdownDescription": "Denies the request_permission command without any pre-configured scope."
-        },
-        {
-          "description": "Denies the show command without any pre-configured scope.",
-          "type": "string",
-          "const": "notification:deny-show",
-          "markdownDescription": "Denies the show command without any pre-configured scope."
+          "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`",
@@ -6452,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",

src-tauri/src/discord.rs

@@ -0,0 +1,105 @@
+/// Discord Rich Presence integration.
+///
+/// To enable this feature:
+///   1. Go to https://discord.com/developers/applications and create an application.
+///   2. Copy the Application ID and replace DISCORD_APP_ID below.
+///   3. In the "Rich Presence → Art Assets" tab, upload a PNG named "psysonic"
+///      (use the app icon from public/logo.png).
+///
+/// The commands silently no-op when Discord is not running or the App ID is wrong,
+/// so the app always starts cleanly regardless of Discord availability.
+
+use discord_rich_presence::{
+    activity::{Activity, ActivityType, Assets, Timestamps},
+    DiscordIpc, DiscordIpcClient,
+};
+use std::sync::Mutex;
+
+const DISCORD_APP_ID: &str = "1489544859718258779";
+
+pub struct DiscordState(pub Mutex<Option<DiscordIpcClient>>);
+
+impl DiscordState {
+    pub fn new() -> Self {
+        DiscordState(Mutex::new(None))
+    }
+}
+
+/// Try to create and connect a fresh IPC client. Returns None silently on failure.
+fn try_connect() -> Option<DiscordIpcClient> {
+    let mut client = DiscordIpcClient::new(DISCORD_APP_ID).ok()?;
+    client.connect().ok()?;
+    Some(client)
+}
+
+/// Update the Discord Rich Presence activity.
+///
+/// - `elapsed_secs`: seconds already played. `None` when paused — Discord shows
+///   the song/artist without a running timer.
+#[tauri::command]
+pub fn discord_update_presence(
+    state: tauri::State<DiscordState>,
+    title: String,
+    artist: String,
+    album: Option<String>,
+    elapsed_secs: Option<f64>,
+) -> Result<(), String> {
+    let mut guard = state.0.lock().unwrap();
+
+    // (Re)connect lazily — handles the case where Discord starts after the app.
+    if guard.is_none() {
+        match try_connect() {
+            Some(client) => *guard = Some(client),
+            None => return Ok(()), // Discord not running — silently skip
+        }
+    }
+
+    let client = guard.as_mut().unwrap();
+
+    // Discord RPC only exposes two visible text rows (details + state).
+    // The application name "Psysonic" is shown automatically by Discord as the
+    // header line. Album goes into large_text — visible as a hover tooltip on
+    // the cover art icon.
+    let large_text = album.as_deref().unwrap_or("Psysonic");
+
+    let assets = Assets::new()
+        .large_image("psysonic")
+        .large_text(large_text);
+
+    let mut activity = Activity::new()
+        .activity_type(ActivityType::Listening)
+        .details(&title)
+        .state(&artist)
+        .assets(assets);
+
+    // Start timestamp: Discord auto-counts up from this point. We back-calculate
+    // it so the displayed elapsed time matches the actual playback position.
+    if let Some(elapsed) = elapsed_secs {
+        let now = std::time::SystemTime::now()
+            .duration_since(std::time::UNIX_EPOCH)
+            .unwrap_or_default()
+            .as_secs() as i64;
+        let start = now - elapsed.floor() as i64;
+        activity = activity.timestamps(Timestamps::new().start(start));
+    }
+
+    if client.set_activity(activity).is_err() {
+        // IPC pipe broke (Discord restarted etc.) — drop the client so the next
+        // call re-connects.
+        *guard = None;
+    }
+
+    Ok(())
+}
+
+/// Clear the Discord Rich Presence activity (e.g. playback stopped).
+#[tauri::command]
+pub fn discord_clear_presence(state: tauri::State<DiscordState>) -> Result<(), String> {
+    let mut guard = state.0.lock().unwrap();
+    if let Some(client) = guard.as_mut() {
+        if client.clear_activity().is_err() {
+            *guard = None;
+        }
+    }
+    Ok(())
+}

src-tauri/src/lib.rs

@@ -2,13 +2,25 @@
 #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
 
 mod audio;
+mod discord;
+
+use std::collections::HashMap;
+use std::sync::Mutex;
 
 use tauri::{
-    menu::{MenuBuilder, MenuItemBuilder},
+    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).
+type ShortcutMap = Mutex<HashMap<String, String>>;
+
+/// Shared handle to OS media controls (MPRIS2 on Linux, Now Playing on macOS, SMTC on Windows).
+/// `None` if souvlaki failed to initialize (e.g. no D-Bus session on Linux).
+type MprisControls = Mutex<Option<souvlaki::MediaControls>>;
+
 #[tauri::command]
 fn greet(name: &str) -> String {
     format!("Hello, {}!", name)
@@ -19,6 +31,214 @@ fn exit_app(app_handle: tauri::AppHandle) {
     app_handle.exit(0);
 }
 
+/// Restart after an in-app update.
+///
+/// `relaunch()` from tauri-plugin-process spawns the new process while the old one
+/// is still alive, so the single-instance plugin in the new process sees the old
+/// socket and kills itself immediately (endless loop).
+///
+/// This command instead:
+///   1. Spawns a shell snippet that waits ~1.5 s and then opens the app again —
+///      by then the old process and its single-instance socket are fully gone.
+///   2. Calls `app.exit(0)` directly, which bypasses `on_window_event`
+///      prevent_close() and releases the single-instance lock immediately.
+#[tauri::command]
+fn relaunch_after_update(app: tauri::AppHandle) {
+    #[cfg(target_os = "windows")]
+    {
+        let exe = std::env::current_exe().unwrap_or_default();
+        let exe_str = exe.to_string_lossy().to_string().replace('\'', "''");
+        let script = format!(
+            "Start-Sleep -Milliseconds 1500; Start-Process '{exe_str}'"
+        );
+        let _ = std::process::Command::new("powershell")
+            .args(["-WindowStyle", "Hidden", "-NonInteractive", "-Command", &script])
+            .spawn();
+    }
+
+    #[cfg(target_os = "macos")]
+    {
+        let exe = std::env::current_exe().unwrap_or_default();
+        // exe lives at Psysonic.app/Contents/MacOS/psysonic — walk up to the bundle.
+        let bundle = exe
+            .parent()                  // MacOS/
+            .and_then(|p| p.parent())  // Contents/
+            .and_then(|p| p.parent()); // Psysonic.app
+        if let Some(bundle_path) = bundle {
+            let escaped = bundle_path.to_string_lossy().replace('"', "\\\"");
+            let _ = std::process::Command::new("sh")
+                .args(["-c", &format!("sleep 1.5 && open \"{escaped}\"")])
+                .spawn();
+        }
+    }
+
+    app.exit(0);
+}
+
+/// Authenticate with Navidrome's own REST API and return a Bearer token.
+async fn navidrome_token(server_url: &str, username: &str, password: &str) -> Result<String, String> {
+    let client = reqwest::Client::new();
+    let resp = client
+        .post(format!("{}/auth/login", server_url))
+        .json(&serde_json::json!({ "username": username, "password": password }))
+        .send()
+        .await
+        .map_err(|e| e.to_string())?;
+    let data: serde_json::Value = resp.json().await.map_err(|e| e.to_string())?;
+    data["token"]
+        .as_str()
+        .map(|s| s.to_string())
+        .ok_or_else(|| "Navidrome auth: no token in response".to_string())
+}
+
+#[tauri::command]
+async fn upload_playlist_cover(
+    server_url: String,
+    playlist_id: String,
+    username: String,
+    password: String,
+    file_bytes: Vec<u8>,
+    mime_type: String,
+) -> Result<(), String> {
+    let token = navidrome_token(&server_url, &username, &password).await?;
+    let part = reqwest::multipart::Part::bytes(file_bytes)
+        .file_name("cover.jpg")
+        .mime_str(&mime_type)
+        .map_err(|e| e.to_string())?;
+    let form = reqwest::multipart::Form::new().part("image", part);
+    reqwest::Client::new()
+        .post(format!("{}/api/playlist/{}/image", server_url, playlist_id))
+        .header("X-ND-Authorization", format!("Bearer {}", token))
+        .multipart(form)
+        .send()
+        .await
+        .map_err(|e| e.to_string())?
+        .error_for_status()
+        .map_err(|e| e.to_string())?;
+    Ok(())
+}
+
+#[tauri::command]
+async fn upload_radio_cover(
+    server_url: String,
+    radio_id: String,
+    username: String,
+    password: String,
+    file_bytes: Vec<u8>,
+    mime_type: String,
+) -> Result<(), String> {
+    let token = navidrome_token(&server_url, &username, &password).await?;
+    let part = reqwest::multipart::Part::bytes(file_bytes)
+        .file_name("cover.jpg")
+        .mime_str(&mime_type)
+        .map_err(|e| e.to_string())?;
+    let form = reqwest::multipart::Form::new().part("image", part);
+    reqwest::Client::new()
+        .post(format!("{}/api/radio/{}/image", server_url, radio_id))
+        .header("X-ND-Authorization", format!("Bearer {}", token))
+        .multipart(form)
+        .send()
+        .await
+        .map_err(|e| e.to_string())?
+        .error_for_status()
+        .map_err(|e| e.to_string())?;
+    Ok(())
+}
+
+#[tauri::command]
+async fn delete_radio_cover(
+    server_url: String,
+    radio_id: String,
+    username: String,
+    password: String,
+) -> Result<(), String> {
+    let token = navidrome_token(&server_url, &username, &password).await?;
+    let resp = reqwest::Client::new()
+        .delete(format!("{}/api/radio/{}/image", server_url, radio_id))
+        .header("X-ND-Authorization", format!("Bearer {}", token))
+        .send()
+        .await
+        .map_err(|e| e.to_string())?;
+    // 404/503 = no image existed — treat as success
+    if !resp.status().is_success() && resp.status() != reqwest::StatusCode::NOT_FOUND && resp.status() != reqwest::StatusCode::SERVICE_UNAVAILABLE {
+        resp.error_for_status().map_err(|e| e.to_string())?;
+    }
+    Ok(())
+}
+
+const RADIO_PAGE_SIZE: u32 = 25;
+
+/// Search the radio-browser.info directory (needs User-Agent header — CORS would block WebView).
+#[tauri::command]
+async fn search_radio_browser(query: String, offset: u32) -> Result<Vec<serde_json::Value>, String> {
+    let client = reqwest::Client::new();
+    let limit_s = RADIO_PAGE_SIZE.to_string();
+    let offset_s = offset.to_string();
+    let resp = client
+        .get("https://de1.api.radio-browser.info/json/stations/search")
+        .header("User-Agent", "psysonic/1.0")
+        .query(&[
+            ("name", query.as_str()),
+            ("hidebroken", "true"),
+            ("limit", limit_s.as_str()),
+            ("offset", offset_s.as_str()),
+        ])
+        .send()
+        .await
+        .map_err(|e| e.to_string())?
+        .error_for_status()
+        .map_err(|e| e.to_string())?;
+    resp.json::<Vec<serde_json::Value>>().await.map_err(|e| e.to_string())
+}
+
+/// Fetch top-voted stations from radio-browser.info for initial suggestions.
+#[tauri::command]
+async fn get_top_radio_stations(offset: u32) -> Result<Vec<serde_json::Value>, String> {
+    let client = reqwest::Client::new();
+    let limit_s = RADIO_PAGE_SIZE.to_string();
+    let offset_s = offset.to_string();
+    let resp = client
+        .get("https://de1.api.radio-browser.info/json/stations/topvote")
+        .header("User-Agent", "psysonic/1.0")
+        .query(&[("limit", limit_s.as_str()), ("offset", offset_s.as_str())])
+        .send()
+        .await
+        .map_err(|e| e.to_string())?
+        .error_for_status()
+        .map_err(|e| e.to_string())?;
+    resp.json::<Vec<serde_json::Value>>().await.map_err(|e| e.to_string())
+}
+
+/// Fetch arbitrary URL bytes (e.g. radio station favicon) through Rust to bypass CORS.
+/// Returns (bytes, content_type).
+#[tauri::command]
+async fn fetch_url_bytes(url: String) -> Result<(Vec<u8>, String), String> {
+    let client = reqwest::Client::builder()
+        .timeout(std::time::Duration::from_secs(10))
+        .build()
+        .map_err(|e| e.to_string())?;
+    let resp = client
+        .get(&url)
+        .header("User-Agent", "psysonic/1.0")
+        .send()
+        .await
+        .map_err(|e| e.to_string())?
+        .error_for_status()
+        .map_err(|e| e.to_string())?;
+    let content_type = resp
+        .headers()
+        .get(reqwest::header::CONTENT_TYPE)
+        .and_then(|v| v.to_str().ok())
+        .unwrap_or("image/jpeg")
+        .split(';')
+        .next()
+        .unwrap_or("image/jpeg")
+        .trim()
+        .to_string();
+    let bytes = resp.bytes().await.map_err(|e| e.to_string())?;
+    Ok((bytes.to_vec(), content_type))
+}
+
 /// Proxy Last.fm API calls through Rust/reqwest to avoid WebView networking restrictions.
 /// `params` is a list of [key, value] pairs (method must be included).
 /// If `sign` is true an api_sig is computed. If `get` is true, a GET request is made.
@@ -54,14 +274,14 @@ async fn lastfm_request(
         client
             .get("https://ws.audioscrobbler.com/2.0/")
             .query(&map)
-            .header("User-Agent", "psysonic/1.6.0")
+            .header("User-Agent", "psysonic/1.13.0")
             .send()
             .await
     } else {
         client
             .post("https://ws.audioscrobbler.com/2.0/")
             .form(&map)
-            .header("User-Agent", "psysonic/1.6.0")
+            .header("User-Agent", "psysonic/1.13.0")
             .send()
             .await
     }.map_err(|e| e.to_string())?;
@@ -76,98 +296,438 @@ async fn lastfm_request(
 }
 
 
+#[tauri::command]
+fn register_global_shortcut(
+    app: tauri::AppHandle,
+    shortcut_map: tauri::State<ShortcutMap>,
+    shortcut: String,
+    action: String,
+) -> Result<(), String> {
+    use tauri_plugin_global_shortcut::{GlobalShortcutExt, Shortcut, ShortcutState};
+
+    let mut map = shortcut_map.lock().unwrap();
+
+    // Idempotent: if this exact shortcut+action is already registered, skip.
+    // This prevents on_shortcut() from accumulating duplicate handlers when
+    // registerAll() is called again after a JS HMR reload or StrictMode double-effect.
+    if map.get(&shortcut).map(|a| a == &action).unwrap_or(false) {
+        return Ok(());
+    }
+
+    // Unregister any existing OS grab for this shortcut before re-registering.
+    if let Ok(s) = shortcut.parse::<Shortcut>() {
+        let _ = app.global_shortcut().unregister(s);
+    }
+    map.insert(shortcut.clone(), action.clone());
+    drop(map); // release lock before the blocking OS call
+
+    let parsed: Shortcut = shortcut.parse().map_err(|_| format!("Invalid shortcut: {shortcut}"))?;
+    app.global_shortcut()
+        .on_shortcut(parsed, move |app, _shortcut, event| {
+            if event.state == ShortcutState::Pressed {
+                let event_name = match action.as_str() {
+                    "play-pause"  => "media:play-pause",
+                    "next"        => "media:next",
+                    "prev"        => "media:prev",
+                    "volume-up"   => "media:volume-up",
+                    "volume-down" => "media:volume-down",
+                    _             => return,
+                };
+                let _ = app.emit(event_name, ());
+            }
+        })
+        .map_err(|e| e.to_string())
+}
+
+#[tauri::command]
+fn unregister_global_shortcut(
+    app: tauri::AppHandle,
+    shortcut_map: tauri::State<ShortcutMap>,
+    shortcut: String,
+) -> Result<(), String> {
+    use tauri_plugin_global_shortcut::{GlobalShortcutExt, Shortcut};
+    shortcut_map.lock().unwrap().remove(&shortcut);
+    let parsed: Shortcut = shortcut.parse().map_err(|_| format!("Invalid shortcut: {shortcut}"))?;
+    app.global_shortcut().unregister(parsed).map_err(|e| e.to_string())
+}
+
+#[tauri::command]
+fn mpris_set_metadata(
+    controls: tauri::State<MprisControls>,
+    title: Option<String>,
+    artist: Option<String>,
+    album: Option<String>,
+    cover_url: Option<String>,
+    duration_secs: Option<f64>,
+) -> Result<(), String> {
+    use souvlaki::MediaMetadata;
+    use std::time::Duration;
+
+    let duration = duration_secs.map(|s| Duration::from_secs_f64(s));
+    let mut guard = controls.lock().unwrap();
+    let Some(ctrl) = guard.as_mut() else { return Ok(()); };
+    ctrl.set_metadata(MediaMetadata {
+        title: title.as_deref(),
+        artist: artist.as_deref(),
+        album: album.as_deref(),
+        cover_url: cover_url.as_deref(),
+        duration,
+    })
+    .map_err(|e| format!("MPRIS set_metadata failed: {e:?}"))
+}
+
+#[tauri::command]
+fn mpris_set_playback(
+    controls: tauri::State<MprisControls>,
+    playing: bool,
+    position_secs: Option<f64>,
+) -> Result<(), String> {
+    use souvlaki::{MediaPlayback, MediaPosition};
+    use std::time::Duration;
+
+    let progress = position_secs.map(|s| MediaPosition(Duration::from_secs_f64(s)));
+    let playback = if playing {
+        MediaPlayback::Playing { progress }
+    } else {
+        MediaPlayback::Paused { progress }
+    };
+    let mut guard = controls.lock().unwrap();
+    let Some(ctrl) = guard.as_mut() else { return Ok(()); };
+    ctrl.set_playback(playback)
+        .map_err(|e| format!("MPRIS set_playback failed: {e:?}"))
+}
+
+// ─── Offline Track Cache ──────────────────────────────────────────────────────
+
+/// Downloads a single track to the app's offline cache directory.
+/// Returns the absolute file path so TypeScript can store it and later
+/// construct a `psysonic-local://<path>` URL for the audio engine.
+#[tauri::command]
+async fn download_track_offline(
+    track_id: String,
+    server_id: String,
+    url: String,
+    suffix: String,
+    custom_dir: Option<String>,
+    app: tauri::AppHandle,
+) -> Result<String, String> {
+    // Determine base cache directory.
+    let cache_dir = if let Some(ref cd) = custom_dir {
+        let base = std::path::PathBuf::from(cd);
+        // Check that the volume/directory is still accessible.
+        if !base.exists() {
+            return Err("VOLUME_NOT_FOUND".to_string());
+        }
+        base.join(&server_id)
+    } else {
+        app.path()
+            .app_data_dir()
+            .map_err(|e| e.to_string())?
+            .join("psysonic-offline")
+            .join(&server_id)
+    };
+
+    tokio::fs::create_dir_all(&cache_dir)
+        .await
+        .map_err(|e| e.to_string())?;
+
+    let file_path = cache_dir.join(format!("{}.{}", track_id, suffix));
+    let path_str = file_path.to_string_lossy().to_string();
+
+    // Already cached — skip re-download.
+    if file_path.exists() {
+        return Ok(path_str);
+    }
+
+    let client = reqwest::Client::builder()
+        .timeout(std::time::Duration::from_secs(120))
+        .build()
+        .map_err(|e| e.to_string())?;
+
+    let response = client.get(&url).send().await.map_err(|e| e.to_string())?;
+    if !response.status().is_success() {
+        return Err(format!("HTTP {}", response.status().as_u16()));
+    }
+    let bytes = response.bytes().await.map_err(|e| e.to_string())?;
+    tokio::fs::write(&file_path, &bytes)
+        .await
+        .map_err(|e| e.to_string())?;
+
+    Ok(path_str)
+}
+
+/// Returns the total size in bytes of all files in the offline cache directory (and optional custom dir).
+#[tauri::command]
+async fn get_offline_cache_size(custom_dir: Option<String>, app: tauri::AppHandle) -> u64 {
+    fn dir_size(root: std::path::PathBuf) -> u64 {
+        if !root.exists() { return 0; }
+        let mut total: u64 = 0;
+        let mut stack = vec![root];
+        while let Some(dir) = stack.pop() {
+            let rd = match std::fs::read_dir(&dir) {
+                Ok(r) => r,
+                Err(_) => continue,
+            };
+            for entry in rd.flatten() {
+                let path = entry.path();
+                if path.is_dir() {
+                    stack.push(path);
+                } else if let Ok(meta) = std::fs::metadata(&path) {
+                    total += meta.len();
+                }
+            }
+        }
+        total
+    }
+
+    let default_dir = match app.path().app_data_dir() {
+        Ok(d) => d.join("psysonic-offline"),
+        Err(_) => return 0,
+    };
+    let mut total = dir_size(default_dir);
+
+    if let Some(cd) = custom_dir {
+        let custom = std::path::PathBuf::from(cd);
+        if custom != std::path::PathBuf::from("") {
+            total += dir_size(custom);
+        }
+    }
+    total
+}
+
+/// Removes a cached track from the offline cache. Accepts the full local path
+/// (stored in OfflineTrackMeta) so it works regardless of which directory was used.
+/// After deleting the file, empty parent directories up to (but not including)
+/// `base_dir` are pruned using `remove_dir` (never `remove_dir_all`).
+#[tauri::command]
+async fn delete_offline_track(
+    local_path: String,
+    base_dir: Option<String>,
+    app: tauri::AppHandle,
+) -> Result<(), String> {
+    let file_path = std::path::PathBuf::from(&local_path);
+    if file_path.exists() {
+        tokio::fs::remove_file(&file_path)
+            .await
+            .map_err(|e| e.to_string())?;
+    }
+
+    // Determine the safe boundary — never delete at or above this directory.
+    let boundary = if let Some(bd) = base_dir.filter(|s| !s.is_empty()) {
+        std::path::PathBuf::from(bd)
+    } else {
+        app.path()
+            .app_data_dir()
+            .map_err(|e| e.to_string())?
+            .join("psysonic-offline")
+    };
+
+    // Walk upward, pruning directories that have become empty.
+    // Stops as soon as a non-empty directory or the boundary is reached.
+    let mut current = file_path.parent().map(|p| p.to_path_buf());
+    while let Some(dir) = current {
+        if dir == boundary || !dir.starts_with(&boundary) {
+            break;
+        }
+        match std::fs::read_dir(&dir) {
+            Ok(mut entries) => {
+                if entries.next().is_some() {
+                    break; // Directory still has contents — stop pruning.
+                }
+                if std::fs::remove_dir(&dir).is_err() {
+                    break; // Could not remove (e.g. permissions) — stop.
+                }
+                current = dir.parent().map(|p| p.to_path_buf());
+            }
+            Err(_) => break,
+        }
+    }
+
+    Ok(())
+}
+
 pub fn run() {
     let (audio_engine, _audio_thread) = audio::create_engine();
 
     tauri::Builder::default()
         .manage(audio_engine)
+        .manage(ShortcutMap::default())
+        .manage(discord::DiscordState::new())
+        .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_notification::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| {
-            // Build tray menu
-            let play_pause = MenuItemBuilder::with_id("play_pause", "Play / Pause").build(app)?;
-            let next = MenuItemBuilder::with_id("next", "Next Track").build(app)?;
-            let separator = tauri::menu::PredefinedMenuItem::separator(app)?;
-            let show = MenuItemBuilder::with_id("show", "Show Psysonic").build(app)?;
-            let quit = MenuItemBuilder::with_id("quit", "Exit").build(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(&next)
-                .item(&separator)
-                .item(&show)
-                .item(&quit)
-                .build()?;
+                let menu = MenuBuilder::new(app)
+                    .item(&play_pause)
+                    .item(&previous)
+                    .item(&next)
+                    .item(&sep1)
+                    .item(&show_hide)
+                    .item(&sep2)
+                    .item(&quit)
+                    .build()?;
 
-            let _tray = 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", ());
-                    }
-                    "show" => {
-                        if let Some(window) = app.get_webview_window("main") {
-                            let _ = window.show();
-                            let _ = window.set_focus();
+                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};
+
+                // Collect pre-conditions and the platform-specific HWND.
+                // Returns None early (with a log) on any unrecoverable condition
+                // so app.manage() always executes exactly once at the bottom.
+                let maybe_controls: Option<MediaControls> = (|| {
+                    // Linux: requires a live D-Bus session.
+                    #[cfg(target_os = "linux")]
+                    {
+                        let dbus_ok = std::env::var("DBUS_SESSION_BUS_ADDRESS")
+                            .map(|v| !v.is_empty())
+                            .unwrap_or(false);
+                        if !dbus_ok {
+                            eprintln!("[Psysonic] No D-Bus session — MPRIS media controls disabled");
+                            return None;
                         }
                     }
-                    "quit" => {
-                        std::process::exit(0);
-                    }
-                    _ => {}
-                })
-                .on_tray_icon_event(|_tray, event| {
-                    if let TrayIconEvent::Click {
-                        button: MouseButton::Left,
-                        button_state: MouseButtonState::Up,
-                        ..
-                    } = event
-                    {
-                        // Left click shows app (handled in JS side via tray event)
-                    }
-                })
-                .build(app)?;
 
-            // Register media key global shortcuts
-            #[cfg(not(target_os = "linux"))]
-            {
-                use tauri_plugin_global_shortcut::{GlobalShortcutExt, Shortcut, ShortcutState};
-                let shortcuts = ["MediaPlayPause", "MediaNextTrack", "MediaPreviousTrack"];
-                for shortcut_str in &shortcuts {
-                    if let Ok(shortcut) = shortcut_str.parse::<Shortcut>() {
-                        let shortcut_clone = shortcut_str.to_string();
-                        let _ = app.global_shortcut().on_shortcut(shortcut, move |app, _shortcut, event| {
-                            if event.state == ShortcutState::Pressed {
-                                let event_name = match shortcut_clone.as_str() {
-                                    "MediaPlayPause" => "media:play-pause",
-                                    "MediaNextTrack" => "media:next",
-                                    "MediaPreviousTrack" => "media:prev",
-                                    _ => return,
-                                };
-                                let _ = app.emit(event_name, ());
+                    // Windows: souvlaki SMTC must hook into the existing Win32
+                    // message loop rather than spinning up its own. Pass the
+                    // main window's HWND so it can do so. If we can't get one,
+                    // skip init (no crash, just no media overlay).
+                    #[cfg(target_os = "windows")]
+                    let hwnd = {
+                        use tauri::Manager;
+                        let h = app.get_webview_window("main")
+                            .and_then(|w| w.hwnd().ok())
+                            .map(|h| h.0 as *mut std::ffi::c_void);
+                        if h.is_none() {
+                            eprintln!("[Psysonic] Could not get HWND — Windows media controls disabled");
+                            return None;
+                        }
+                        h
+                    };
+                    #[cfg(not(target_os = "windows"))]
+                    let hwnd: Option<*mut std::ffi::c_void> = None;
+
+                    let config = PlatformConfig {
+                        dbus_name: "psysonic",
+                        display_name: "Psysonic",
+                        hwnd,
+                    };
+
+                    match MediaControls::new(config) {
+                        Ok(mut controls) => {
+                            let app_handle = app.handle().clone();
+                            if let Err(e) = controls.attach(move |event: MediaControlEvent| {
+                                match event {
+                                    MediaControlEvent::Toggle
+                                    | MediaControlEvent::Play
+                                    | MediaControlEvent::Pause => {
+                                        let _ = app_handle.emit("media:play-pause", ());
+                                    }
+                                    MediaControlEvent::Next => {
+                                        let _ = app_handle.emit("media:next", ());
+                                    }
+                                    MediaControlEvent::Previous => {
+                                        let _ = app_handle.emit("media:prev", ());
+                                    }
+                                    MediaControlEvent::Seek(direction) => {
+                                        use souvlaki::SeekDirection;
+                                        let delta: f64 = match direction {
+                                            SeekDirection::Forward  =>  5.0,
+                                            SeekDirection::Backward => -5.0,
+                                        };
+                                        let _ = app_handle.emit("media:seek-relative", delta);
+                                    }
+                                    MediaControlEvent::SetPosition(pos) => {
+                                        let secs = pos.0.as_secs_f64();
+                                        let _ = app_handle.emit("media:seek-absolute", secs);
+                                    }
+                                    _ => {}
+                                }
+                            }) {
+                                eprintln!("[Psysonic] Failed to attach media controls: {e:?}");
                             }
-                        });
+                            Some(controls)
+                        }
+                        Err(e) => {
+                            eprintln!("[Psysonic] Could not create media controls: {e:?}");
+                            None
+                        }
                     }
-                }
+                })();
+
+                app.manage(MprisControls::new(maybe_controls));
             }
 
             Ok(())
         })
         .on_window_event(|window, event| {
-            if let tauri::WindowEvent::CloseRequested { .. } = event {
-                // Only intercept close for the main window (hide to tray).
-                // Browser popup windows (browser_*) close normally.
+            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", ());
                 }
             }
@@ -175,18 +735,38 @@ pub fn run() {
         .invoke_handler(tauri::generate_handler![
             greet,
             exit_app,
+            register_global_shortcut,
+            unregister_global_shortcut,
+            mpris_set_metadata,
+            mpris_set_playback,
             audio::audio_play,
             audio::audio_pause,
             audio::audio_resume,
             audio::audio_stop,
             audio::audio_seek,
             audio::audio_set_volume,
+            audio::audio_update_replay_gain,
             audio::audio_set_eq,
+            audio::autoeq_entries,
+            audio::autoeq_fetch_profile,
             audio::audio_preload,
+            audio::audio_play_radio,
             audio::audio_set_crossfade,
             audio::audio_set_gapless,
             audio::audio_chain_preload,
+            discord::discord_update_presence,
+            discord::discord_clear_presence,
             lastfm_request,
+            upload_playlist_cover,
+            upload_radio_cover,
+            delete_radio_cover,
+            search_radio_browser,
+            get_top_radio_stations,
+            fetch_url_bytes,
+            download_track_offline,
+            delete_offline_track,
+            get_offline_cache_size,
+            relaunch_after_update,
         ])
         .run(tauri::generate_context!())
         .expect("error while running Psysonic");

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "Psysonic",
-  "version": "1.12.0",
+  "version": "1.32.0",
   "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": {
@@ -55,9 +57,13 @@
         "bundleMediaFramework": true
       }
     },
+    "macOS": {
+      "entitlements": "Entitlements.plist",
+      "minimumSystemVersion": "10.15"
+    },
     "windows": {
-      "wix": {
-        "upgradeCode": "e3b4c2a1-7f6d-4e8b-9c5a-2d1f0e3b8a7c"
+      "nsis": {
+        "installMode": "currentUser"
       }
     }
   }

src/App.tsx

@@ -1,5 +1,6 @@
-import React, { useEffect, useState, useCallback } from 'react';
-import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import React, { useEffect, useState, useCallback, useRef } from 'react';
+import { showToast } from './utils/toast';
+import { BrowserRouter, Routes, Route, Navigate, useNavigate, useLocation } from 'react-router-dom';
 import { listen } from '@tauri-apps/api/event';
 import { invoke } from '@tauri-apps/api/core';
 import { getCurrentWindow } from '@tauri-apps/api/window';
@@ -22,25 +23,40 @@ import Login from './pages/Login';
 import AlbumDetail from './pages/AlbumDetail';
 import LabelAlbums from './pages/LabelAlbums';
 import Statistics from './pages/Statistics';
-import Playlists from './pages/Playlists';
 import Help from './pages/Help';
 import RandomAlbums from './pages/RandomAlbums';
 import SearchResults from './pages/SearchResults';
+import AdvancedSearch from './pages/AdvancedSearch';
+import Playlists from './pages/Playlists';
+import PlaylistDetail from './pages/PlaylistDetail';
+import InternetRadio from './pages/InternetRadio';
 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';
 import OfflineOverlay from './components/OfflineOverlay';
+import OfflineBanner from './components/OfflineBanner';
+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';
 import { usePlayerStore, initAudioListeners } from './store/playerStore';
 import { useThemeStore } from './store/themeStore';
 import { useFontStore } from './store/fontStore';
 import { useEqStore } from './store/eqStore';
 import { useKeybindingsStore } from './store/keybindingsStore';
+import { useGlobalShortcutsStore } from './store/globalShortcutsStore';
 
 function RequireAuth({ children }: { children: React.ReactNode }) {
   const { isLoggedIn, servers, activeServerId } = useAuthStore();
@@ -58,6 +74,26 @@ function AppShell() {
   const currentTrack = usePlayerStore(s => s.currentTrack);
   const isPlaying = usePlayerStore(s => s.isPlaying);
   const { status: connStatus, isRetrying: connRetrying, retry: connRetry, isLan, serverName } = useConnectionStatus();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const serverId = useAuthStore(s => s.activeServerId ?? '');
+  const offlineAlbums = useOfflineStore(s => s.albums);
+  const hasOfflineContent = Object.values(offlineAlbums).some(a => a.serverId === serverId);
+
+  // Auto-navigate to offline library when no connection but cached content exists
+  const prevConnStatus = useRef(connStatus);
+  useEffect(() => {
+    const prev = prevConnStatus.current;
+    prevConnStatus.current = connStatus;
+
+    if (connStatus === 'disconnected' && hasOfflineContent && prev !== 'disconnected') {
+      navigate('/offline', { replace: true });
+    }
+    // Return from offline page only when reconnecting (not when user navigates there manually while online)
+    if (connStatus === 'connected' && prev === 'disconnected' && location.pathname === '/offline') {
+      navigate('/', { replace: true });
+    }
+  }, [connStatus, hasOfflineContent, location.pathname, navigate]);
 
   useEffect(() => {
     initializeFromServerQueue();
@@ -85,6 +121,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';
   });
@@ -97,7 +142,7 @@ function AppShell() {
 
   const handleMouseMove = useCallback((e: MouseEvent) => {
     if (isDraggingQueue) {
-      const newWidth = Math.max(250, Math.min(window.innerWidth - e.clientX, 500));
+      const newWidth = Math.max(310, Math.min(window.innerWidth - e.clientX, 500));
       setQueueWidth(newWidth);
     }
   }, [isDraggingQueue]);
@@ -125,6 +170,55 @@ 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(); };
+
+    // Block Ctrl+A / Cmd+A "select all" — WebKit ignores user-select:none for keyboard shortcuts
+    const blockSelectAll = (e: KeyboardEvent) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === 'a') {
+        const target = e.target as HTMLElement;
+        // Allow Ctrl+A inside actual text inputs and textareas
+        if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) return;
+        e.preventDefault();
+      }
+    };
+
+    // Block mouse drag selection — WebKitGTK ignores user-select:none on * for drag selection
+    const blockSelectStart = (e: Event) => {
+      const target = e.target as HTMLElement;
+      if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) return;
+      if ((target as HTMLElement).closest('[data-selectable]')) return;
+      e.preventDefault();
+    };
+
+    document.addEventListener('dragover', allow);
+    document.addEventListener('dragenter', allow);
+    document.addEventListener('drop', blockDrop);
+    document.addEventListener('keydown', blockSelectAll, true);
+    document.addEventListener('selectstart', blockSelectStart);
+
+    return () => {
+      document.removeEventListener('dragover', allow);
+      document.removeEventListener('dragenter', allow);
+      document.removeEventListener('drop', blockDrop);
+      document.removeEventListener('keydown', blockSelectAll, true);
+      document.removeEventListener('selectstart', blockSelectStart);
+    };
+  }, []);
+
   return (
     <div 
       className="app-shell"
@@ -134,9 +228,9 @@ function AppShell() {
       } as React.CSSProperties}
       onContextMenu={e => e.preventDefault()}
     >
-      <Sidebar 
-        isCollapsed={isSidebarCollapsed} 
-        toggleCollapse={() => setIsSidebarCollapsed(!isSidebarCollapsed)} 
+      <Sidebar
+        isCollapsed={isSidebarCollapsed}
+        toggleCollapse={() => setIsSidebarCollapsed(!isSidebarCollapsed)}
       />
       <main className="main-content">
         <header className="content-header">
@@ -146,16 +240,19 @@ function AppShell() {
           <LastfmIndicator />
           <NowPlayingDropdown />
           <button
-            className="collapse-btn"
+            className="queue-toggle-btn"
             onClick={toggleQueue}
             data-tooltip={t('player.toggleQueue')}
             data-tooltip-pos="bottom"
           >
-            {isQueueVisible ? <PanelRightClose size={24} /> : <PanelRight size={24} />}
+            {isQueueVisible ? <PanelRightClose size={18} /> : <PanelRight size={18} />}
           </button>
         </header>
+        {connStatus === 'disconnected' && hasOfflineContent && (
+          <OfflineBanner onRetry={connRetry} isChecking={connRetrying} />
+        )}
         <div className="content-body" style={{ padding: 0, position: 'relative' }}>
-          {connStatus === 'disconnected' && (
+          {connStatus === 'disconnected' && !hasOfflineContent && (
             <OfflineOverlay
               serverName={serverName}
               onRetry={connRetry}
@@ -172,13 +269,19 @@ function AppShell() {
             <Route path="/new-releases" element={<NewReleases />} />
             <Route path="/favorites" element={<Favorites />} />
             <Route path="/random-mix" element={<RandomMix />} />
-            <Route path="/playlists" element={<Playlists />} />
             <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 />} />
             <Route path="/help" element={<Help />} />
+            <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 />} />
+            <Route path="/radio" element={<InternetRadio />} />
           </Routes>
         </div>
       </main>
@@ -196,24 +299,29 @@ function AppShell() {
         <FullscreenPlayer onClose={toggleFullscreen} />
       )}
       <ContextMenu />
+      <SongInfoModal />
       <DownloadFolderModal />
       <TooltipPortal />
+      <AppUpdater />
+      {changelogModalOpen && <ChangelogModal onClose={() => setChangelogModalOpen(false)} />}
     </div>
   );
 }
 
-// Tray / media key event handler
+// Media key + tray event handler
 function TauriEventBridge() {
   const togglePlay = usePlayerStore(s => s.togglePlay);
   const next = usePlayerStore(s => s.next);
   const previous = usePlayerStore(s => s.previous);
-  const { minimizeToTray } = useAuthStore();
 
   // Configurable keybindings
   useEffect(() => {
     const onKey = (e: KeyboardEvent) => {
       const tag = (e.target as HTMLElement)?.tagName;
       if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return;
+      // Global shortcuts use modifier combos — skip in-app bindings for those
+      // (X11 GrabModeAsync delivers the key to both the grabber and the focused WebView)
+      if (e.ctrlKey || e.altKey || e.metaKey) return;
 
       const { bindings } = useKeybindingsStore.getState();
       const { togglePlay, next, previous, setVolume, seek, toggleQueue, toggleFullscreen } = usePlayerStore.getState();
@@ -254,28 +362,64 @@ function TauriEventBridge() {
   }, []);
 
   useEffect(() => {
+    let cancelled = false;
     const unlisten: Array<() => void> = [];
 
-    listen('media:play-pause', () => togglePlay()).then(u => unlisten.push(u));
-    listen('media:next', () => next()).then(u => unlisten.push(u));
-    listen('media:prev', () => previous()).then(u => unlisten.push(u));
-    listen('tray:play-pause', () => togglePlay()).then(u => unlisten.push(u));
-    listen('tray:next', () => next()).then(u => unlisten.push(u));
-
-    // Handle close → minimize to tray if enabled (Tauri 2 approach)
-    const win = getCurrentWindow();
-    win.onCloseRequested(async (event) => {
-      if (minimizeToTray) {
-        event.preventDefault();
-        await win.hide();
-      } else {
-        // If not minimizing to tray, we want to exit the app completely
-        await invoke('exit_app');
+    const setup = async () => {
+      const handlers: Array<[string, () => void]> = [
+        ['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)); }],
+      ];
+      for (const [event, handler] of handlers) {
+        const u = await listen(event, handler);
+        if (cancelled) { u(); return; }
+        unlisten.push(u);
       }
-    }).then(u => unlisten.push(u));
 
-    return () => unlisten.forEach(u => u());
-  }, [togglePlay, next, previous, minimizeToTray]);
+      // Seek events carry a numeric payload (seconds) — seek() expects 0-1 progress
+      {
+        const u = await listen<number>('media:seek-relative', e => {
+          const s = usePlayerStore.getState();
+          const dur = s.currentTrack?.duration;
+          if (!dur) return;
+          s.seek(Math.max(0, s.currentTime + e.payload) / dur);
+        });
+        if (cancelled) { u(); return; }
+        unlisten.push(u);
+      }
+      {
+        const u = await listen<number>('media:seek-absolute', e => {
+          const s = usePlayerStore.getState();
+          const dur = s.currentTrack?.duration;
+          if (!dur) return;
+          s.seek(e.payload / dur);
+        });
+        if (cancelled) { u(); return; }
+        unlisten.push(u);
+      }
+
+      // 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);
+    };
+
+    setup();
+    return () => { cancelled = true; unlisten.forEach(u => u()); };
+  }, [togglePlay, next, previous]);
 
   return null;
 }
@@ -283,6 +427,7 @@ function TauriEventBridge() {
 export default function App() {
   const theme = useThemeStore(s => s.theme);
   const font = useFontStore(s => s.font);
+  const [exportPickerOpen, setExportPickerOpen] = useState(false);
 
   useEffect(() => {
     document.documentElement.setAttribute('data-theme', theme);
@@ -296,6 +441,57 @@ export default function App() {
     return initAudioListeners();
   }, []);
 
+  useEffect(() => {
+    useGlobalShortcutsStore.getState().registerAll();
+  }, []);
+
+  // ── Easter egg: Ctrl+Shift+Alt+N → export new albums image ──
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (!e.ctrlKey || !e.shiftKey || !e.altKey || e.code !== 'KeyN') return;
+      e.preventDefault();
+      setExportPickerOpen(true);
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, []);
+
+  const handleExport = async (since: number) => {
+    setExportPickerOpen(false);
+    try {
+      const { exportNewAlbumsImage } = await import('./utils/exportNewAlbums');
+      const result = await exportNewAlbumsImage(since);
+      if (result) {
+        const files = result.paths.length > 1 ? ` (${result.paths.length} Dateien)` : '';
+        showToast(`📸 ${result.count} Alben exportiert${files}`);
+      } else {
+        showToast('📭 Keine Alben in diesem Zeitraum gefunden');
+      }
+    } catch (err) {
+      showToast(`❌ Export fehlgeschlagen: ${String(err).slice(0, 80)}`);
+      console.error('[easter egg] export failed:', err);
+    }
+  };
+
+  useEffect(() => {
+    const timers = new Map<HTMLElement, ReturnType<typeof setTimeout>>();
+    const onScroll = (e: Event) => {
+      const el = e.target as HTMLElement;
+      el.classList.add('is-scrolling');
+      const existing = timers.get(el);
+      if (existing !== undefined) clearTimeout(existing);
+      timers.set(el, setTimeout(() => {
+        el.classList.remove('is-scrolling');
+        timers.delete(el);
+      }, 800));
+    };
+    document.addEventListener('scroll', onScroll, true);
+    return () => {
+      document.removeEventListener('scroll', onScroll, true);
+      timers.forEach(t => clearTimeout(t));
+    };
+  }, []);
+
   return (
     <BrowserRouter>
       <TauriEventBridge />
@@ -305,11 +501,14 @@ export default function App() {
           path="/*"
           element={
             <RequireAuth>
-              <AppShell />
+              <DragDropProvider>
+                <AppShell />
+              </DragDropProvider>
             </RequireAuth>
           }
         />
       </Routes>
+      {exportPickerOpen && <ExportPickerModal onConfirm={handleExport} onClose={() => setExportPickerOpen(false)} />}
     </BrowserRouter>
   );
 }

src/api/subsonic.ts

@@ -52,6 +52,7 @@ export interface SubsonicAlbum {
   genre?: string;
   starred?: string;
   recordLabel?: string;
+  created?: string;
 }
 
 export interface SubsonicSong {
@@ -73,6 +74,7 @@ export interface SubsonicSong {
   contentType?: string;
   size?: number;
   samplingRate?: number;
+  bitDepth?: number;
   channelCount?: number;
   starred?: string;
   genre?: string;
@@ -86,6 +88,22 @@ export interface SubsonicSong {
   };
 }
 
+export interface InternetRadioStation {
+  id: string;
+  name: string;
+  streamUrl: string;
+  homepageUrl?: string;
+  coverArt?: string; // Navidrome v0.61.0+
+}
+
+export interface RadioBrowserStation {
+  stationuuid: string;
+  name: string;
+  url: string;
+  favicon: string;
+  tags: string;
+}
+
 export interface SubsonicPlaylist {
   id: string;
   name: string;
@@ -95,6 +113,8 @@ export interface SubsonicPlaylist {
   changed: string;
   owner?: string;
   public?: boolean;
+  comment?: string;
+  coverArt?: string;
 }
 
 export interface SubsonicNowPlaying extends SubsonicSong {
@@ -229,8 +249,19 @@ export async function getSimilarSongs2(id: string, count = 50): Promise<Subsonic
 }
 
 export async function getGenres(): Promise<SubsonicGenre[]> {
-  const data = await api<{ genres: { genre: SubsonicGenre[] } }>('getGenres.view');
-  return data.genres?.genre ?? [];
+  const data = await api<{ genres: { genre: SubsonicGenre | SubsonicGenre[] } }>('getGenres.view');
+  const raw = data.genres?.genre;
+  if (!raw) return [];
+  return Array.isArray(raw) ? raw : [raw];
+}
+
+export async function getAlbumsByGenre(genre: string, size = 50, offset = 0): Promise<SubsonicAlbum[]> {
+  const data = await api<{ albumList2: { album: SubsonicAlbum | SubsonicAlbum[] } }>('getAlbumList2.view', {
+    type: 'byGenre', genre, size, offset, _t: Date.now(),
+  });
+  const raw = data.albumList2?.album;
+  if (!raw) return [];
+  return Array.isArray(raw) ? raw : [raw];
 }
 
 export interface SearchResults {
@@ -372,12 +403,54 @@ 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[], prevCount = 0): Promise<void> {
+  if (songIds.length > 0) {
+    // createPlaylist with playlistId replaces the existing playlist's songs (Subsonic API 1.14+)
+    await api('createPlaylist.view', { playlistId: id, songId: songIds });
+  } else if (prevCount > 0) {
+    // Axios serialises empty arrays as no params — createPlaylist.view would leave songs unchanged.
+    // Use updatePlaylist.view with explicit index removal to clear the list instead.
+    await api('updatePlaylist.view', {
+      playlistId: id,
+      songIndexToRemove: Array.from({ length: prevCount }, (_, i) => i),
+    });
+  }
+}
+
+export async function updatePlaylistMeta(
+  id: string,
+  name: string,
+  comment: string,
+  isPublic: boolean,
+): Promise<void> {
+  await api('updatePlaylist.view', { playlistId: id, name, comment, public: isPublic });
+}
+
+export async function uploadPlaylistCoverArt(id: string, file: File): Promise<void> {
+  // Navidrome-specific endpoint — handled in Rust to bypass browser CORS restrictions.
+  const { getBaseUrl, getActiveServer } = useAuthStore.getState();
+  const server = getActiveServer();
+  const baseUrl = getBaseUrl();
+  const buffer = await file.arrayBuffer();
+  const fileBytes = Array.from(new Uint8Array(buffer));
+  const { invoke } = await import('@tauri-apps/api/core');
+  await invoke('upload_playlist_cover', {
+    serverUrl: baseUrl,
+    playlistId: id,
+    username: server?.username ?? '',
+    password: server?.password ?? '',
+    fileBytes,
+    mimeType: file.type || 'image/jpeg',
+  });
 }
 
 export async function deletePlaylist(id: string): Promise<void> {
@@ -413,3 +486,112 @@ export async function getNowPlaying(): Promise<SubsonicNowPlaying[]> {
     return [];
   }
 }
+
+
+// ─── Internet Radio ───────────────────────────────────────────
+export async function getInternetRadioStations(): Promise<InternetRadioStation[]> {
+  try {
+    const data = await api<{ internetRadioStations?: { internetRadioStation?: InternetRadioStation[] } }>(
+      'getInternetRadioStations.view'
+    );
+    return data.internetRadioStations?.internetRadioStation ?? [];
+  } catch {
+    return [];
+  }
+}
+
+export async function createInternetRadioStation(
+  name: string, streamUrl: string, homepageUrl?: string
+): Promise<void> {
+  const params: Record<string, unknown> = { name, streamUrl };
+  if (homepageUrl) params.homepageUrl = homepageUrl;
+  await api('createInternetRadioStation.view', params);
+}
+
+export async function updateInternetRadioStation(
+  id: string, name: string, streamUrl: string, homepageUrl?: string
+): Promise<void> {
+  const params: Record<string, unknown> = { id, name, streamUrl };
+  if (homepageUrl) params.homepageUrl = homepageUrl;
+  await api('updateInternetRadioStation.view', params);
+}
+
+export async function deleteInternetRadioStation(id: string): Promise<void> {
+  await api('deleteInternetRadioStation.view', { id });
+}
+
+export async function uploadRadioCoverArt(id: string, file: File): Promise<void> {
+  // Navidrome-specific endpoint — handled in Rust to bypass browser CORS restrictions.
+  const { getBaseUrl, getActiveServer } = useAuthStore.getState();
+  const server = getActiveServer();
+  const baseUrl = getBaseUrl();
+  const buffer = await file.arrayBuffer();
+  const fileBytes = Array.from(new Uint8Array(buffer));
+  const { invoke } = await import('@tauri-apps/api/core');
+  await invoke('upload_radio_cover', {
+    serverUrl: baseUrl,
+    radioId: id,
+    username: server?.username ?? '',
+    password: server?.password ?? '',
+    fileBytes,
+    mimeType: file.type || 'image/jpeg',
+  });
+}
+
+export async function deleteRadioCoverArt(id: string): Promise<void> {
+  // Navidrome-specific endpoint — handled in Rust to bypass browser CORS restrictions.
+  const { getBaseUrl, getActiveServer } = useAuthStore.getState();
+  const server = getActiveServer();
+  const baseUrl = getBaseUrl();
+  const { invoke } = await import('@tauri-apps/api/core');
+  await invoke('delete_radio_cover', {
+    serverUrl: baseUrl,
+    radioId: id,
+    username: server?.username ?? '',
+    password: server?.password ?? '',
+  });
+}
+
+export async function uploadRadioCoverArtBytes(id: string, fileBytes: number[], mimeType: string): Promise<void> {
+  const { getBaseUrl, getActiveServer } = useAuthStore.getState();
+  const server = getActiveServer();
+  const baseUrl = getBaseUrl();
+  const { invoke } = await import('@tauri-apps/api/core');
+  await invoke('upload_radio_cover', {
+    serverUrl: baseUrl,
+    radioId: id,
+    username: server?.username ?? '',
+    password: server?.password ?? '',
+    fileBytes,
+    mimeType,
+  });
+}
+
+function parseRadioBrowserStations(raw: Array<Record<string, string>>): RadioBrowserStation[] {
+  return raw.map(s => ({
+    stationuuid: s.stationuuid ?? '',
+    name: s.name ?? '',
+    url: s.url ?? '',
+    favicon: s.favicon ?? '',
+    tags: s.tags ?? '',
+  }));
+}
+
+export const RADIO_PAGE_SIZE = 25;
+
+export async function searchRadioBrowser(query: string, offset = 0): Promise<RadioBrowserStation[]> {
+  const { invoke } = await import('@tauri-apps/api/core');
+  const raw = await invoke<Array<Record<string, string>>>('search_radio_browser', { query, offset });
+  return parseRadioBrowserStations(raw);
+}
+
+export async function getTopRadioStations(offset = 0): Promise<RadioBrowserStation[]> {
+  const { invoke } = await import('@tauri-apps/api/core');
+  const raw = await invoke<Array<Record<string, string>>>('get_top_radio_stations', { offset });
+  return parseRadioBrowserStations(raw);
+}
+
+export async function fetchUrlBytes(url: string): Promise<[number[], string]> {
+  const { invoke } = await import('@tauri-apps/api/core');
+  return invoke<[number[], string]>('fetch_url_bytes', { url });
+}

src/components/AlbumCard.tsx

@@ -1,19 +1,29 @@
-import React from 'react';
+import React, { memo } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Play } from 'lucide-react';
+import { Play, HardDriveDownload } from 'lucide-react';
 import { SubsonicAlbum, buildCoverArtUrl, coverArtCacheKey } from '../api/subsonic';
 import { usePlayerStore } from '../store/playerStore';
+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;
 }
 
-export default function AlbumCard({ album }: AlbumCardProps) {
+function AlbumCard({ album }: AlbumCardProps) {
   const navigate = useNavigate();
   const openContextMenu = usePlayerStore(s => s.openContextMenu);
+  const serverId = useAuthStore(s => s.activeServerId ?? '');
+  const isOffline = useOfflineStore(s => {
+    const meta = s.albums[`${serverId}:${album.id}`];
+    if (!meta || meta.trackIds.length === 0) return false;
+    return meta.trackIds.every(tid => !!s.tracks[`${serverId}:${tid}`]);
+  });
   const coverUrl = album.coverArt ? buildCoverArtUrl(album.coverArt, 300) : '';
+  const psyDrag = useDragDrop();
 
   return (
     <div
@@ -27,14 +37,20 @@ export default 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">
@@ -48,6 +64,11 @@ export default function AlbumCard({ album }: AlbumCardProps) {
             </svg>
           </div>
         )}
+        {isOffline && (
+          <div className="album-card-offline-badge" aria-label="Offline available">
+            <HardDriveDownload size={12} />
+          </div>
+        )}
         <div className="album-card-play-overlay">
           <button
             className="album-card-details-btn"
@@ -60,9 +81,15 @@ export default function AlbumCard({ album }: AlbumCardProps) {
       </div>
       <div className="album-card-info">
         <p className="album-card-title truncate">{album.name}</p>
-        <p className="album-card-artist truncate">{album.artist}</p>
+        <p
+          className={`album-card-artist truncate${album.artistId ? ' track-artist-link' : ''}`}
+          style={{ cursor: album.artistId ? 'pointer' : 'default' }}
+          onClick={e => { if (album.artistId) { e.stopPropagation(); navigate(`/artist/${album.artistId}`); } }}
+        >{album.artist}</p>
         {album.year && <p className="album-card-year">{album.year}</p>}
       </div>
     </div>
   );
 }
+
+export default memo(AlbumCard);

src/components/AlbumHeader.tsx

@@ -1,14 +1,16 @@
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Play, Star, ExternalLink, X, ChevronLeft, Download, ListPlus, Info } 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';
 import { useTranslation } from 'react-i18next';
 
 function formatDuration(seconds: number): string {
-  const m = Math.floor(seconds / 60);
-  const s = seconds % 60;
+  const h = Math.floor(seconds / 3600);
+  const m = Math.floor((seconds % 3600) / 60);
+  const s = Math.floor(seconds % 60);
+  if (h > 0) return `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
   return `${m}:${s.toString().padStart(2, '0')}`;
 }
 
@@ -70,10 +72,14 @@ interface AlbumHeaderProps {
   resolvedCoverUrl: string | null;
   isStarred: boolean;
   downloadProgress: number | null;
+  offlineStatus: 'none' | 'downloading' | 'cached';
+  offlineProgress: { done: number; total: number } | null;
   bio: string | null;
   bioOpen: boolean;
   onToggleStar: () => void;
   onDownload: () => void;
+  onCacheOffline: () => void;
+  onRemoveOffline: () => void;
   onPlayAll: () => void;
   onEnqueueAll: () => void;
   onBio: () => void;
@@ -88,10 +94,14 @@ export default function AlbumHeader({
   resolvedCoverUrl,
   isStarred,
   downloadProgress,
+  offlineStatus,
+  offlineProgress,
   bio,
   bioOpen,
   onToggleStar,
   onDownload,
+  onCacheOffline,
+  onRemoveOffline,
   onPlayAll,
   onEnqueueAll,
   onBio,
@@ -103,6 +113,7 @@ export default function AlbumHeader({
 
   const totalDuration = songs.reduce((acc, s) => acc + s.duration, 0);
   const totalSize = songs.reduce((acc, s) => acc + (s.size ?? 0), 0);
+  const formatLabel = [...new Set(songs.map(s => s.suffix).filter((f): f is string => !!f))].map(f => f.toUpperCase()).join(' / ');
 
   return (
     <>
@@ -134,8 +145,8 @@ export default function AlbumHeader({
               <button
                 className="album-detail-cover-btn"
                 onClick={() => setLightboxOpen(true)}
-                data-tooltip="Vergrößern"
-                aria-label={`${info.name} Cover vergrößern`}
+                data-tooltip={t('albumDetail.enlargeCover')}
+                aria-label={`${info.name} ${t('albumDetail.enlargeCover')}`}
               >
                 <CachedImage className="album-detail-cover" src={coverUrl} cacheKey={coverKey} alt={`${info.name} Cover`} />
               </button>
@@ -159,6 +170,7 @@ export default function AlbumHeader({
                 {info.genre && <span>· {info.genre}</span>}
                 <span>· {songs.length} Tracks</span>
                 <span>· {formatDuration(totalDuration)}</span>
+                {formatLabel && <span>· {formatLabel}</span>}
                 {info.recordLabel && (
                   <>
                     <span className="album-info-dot">·</span>
@@ -193,7 +205,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>
 
@@ -214,10 +226,30 @@ export default function AlbumHeader({
                     <Download size={16} /> {t('albumDetail.download')}{totalSize > 0 ? ` · ${formatSize(totalSize)}` : ''}
                   </button>
                 )}
-                <span className="download-hint">
-                  <Info size={12} />
-                  {t('albumDetail.downloadHintShort')}
-                </span>
+                {offlineStatus === 'downloading' && offlineProgress ? (
+                  <div className="offline-cache-btn offline-cache-btn--progress">
+                    <Loader2 size={14} className="spin" />
+                    {t('albumDetail.offlineDownloading', { n: offlineProgress.done, total: offlineProgress.total })}
+                  </div>
+                ) : offlineStatus === 'cached' ? (
+                  <button
+                    className="btn btn-ghost offline-cache-btn offline-cache-btn--cached"
+                    onClick={onRemoveOffline}
+                    data-tooltip={t('albumDetail.removeOffline')}
+                  >
+                    <HardDriveDownload size={16} />
+                    {t('albumDetail.offlineCached')}
+                  </button>
+                ) : (
+                  <button
+                    className="btn btn-ghost offline-cache-btn"
+                    onClick={onCacheOffline}
+                    data-tooltip={t('albumDetail.cacheOffline')}
+                  >
+                    <HardDriveDownload size={16} />
+                    {t('albumDetail.cacheOffline')}
+                  </button>
+                )}
               </div>
             </div>
           </div>

src/components/AlbumTrackList.tsx

@@ -1,20 +1,26 @@
-import React from 'react';
-import { Play, Star } from 'lucide-react';
+import React, { useState, useEffect } from 'react';
+import { Play, Heart, ListPlus, X, ChevronDown, Check } from 'lucide-react';
+import { useTracklistColumns, type ColDef } from '../utils/useTracklistColumns';
 import { SubsonicSong } from '../api/subsonic';
-import { Track } from '../store/playerStore';
+import { Track, usePlayerStore, songToTrack } from '../store/playerStore';
 import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { useDragDrop } from '../contexts/DragDropContext';
+import { AddToPlaylistSubmenu } from './ContextMenu';
 
 function formatDuration(seconds: number): string {
-  const m = Math.floor(seconds / 60);
-  const s = seconds % 60;
+  const h = Math.floor(seconds / 3600);
+  const m = Math.floor((seconds % 3600) / 60);
+  const s = Math.floor(seconds % 60);
+  if (h > 0) return `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
   return `${m}:${s.toString().padStart(2, '0')}`;
 }
 
 function codecLabel(song: { suffix?: string; bitRate?: number }): string {
   const parts: string[] = [];
   if (song.suffix) parts.push(song.suffix.toUpperCase());
-  if (song.bitRate) parts.push(`${song.bitRate} kbps`);
-  return parts.join(' · ');
+  if (song.bitRate) parts.push(`${song.bitRate}`);
+  return parts.join(' ');
 }
 
 function StarRating({ value, onChange }: { value: number; onChange: (r: number) => void }) {
@@ -40,13 +46,34 @@ function StarRating({ value, onChange }: { value: number; onChange: (r: number)
   );
 }
 
+// ── Column configuration ──────────────────────────────────────────────────────
+// 'num'   → always 60 px fixed, no resize handle
+// 'title' → minmax(150px, 1fr) via flex:true, absorbs window-resize changes
+// rest    → persistent px values from useTracklistColumns hook
+
+const COLUMNS: readonly ColDef[] = [
+  { key: 'num',      i18nKey: null,            minWidth: 60,  defaultWidth: 60,  required: true  },
+  { key: 'title',    i18nKey: 'trackTitle',    minWidth: 150, defaultWidth: 0,   required: true,  flex: true },
+  { key: 'artist',   i18nKey: 'trackArtist',   minWidth: 80,  defaultWidth: 180, required: false },
+  { key: 'favorite', i18nKey: 'trackFavorite', minWidth: 50,  defaultWidth: 70,  required: false },
+  { key: 'rating',   i18nKey: 'trackRating',   minWidth: 80,  defaultWidth: 120, required: false },
+  { key: 'duration', i18nKey: 'trackDuration', minWidth: 50,  defaultWidth: 65,  required: false },
+  { key: 'format',   i18nKey: 'trackFormat',   minWidth: 60,  defaultWidth: 90,  required: false },
+  { key: 'genre',    i18nKey: 'trackGenre',    minWidth: 60,  defaultWidth: 90,  required: false },
+];
+
+type ColKey = 'num' | 'title' | 'artist' | 'favorite' | 'rating' | 'duration' | 'format' | 'genre';
+
+// Columns where cell content should be centred (both header and rows)
+const CENTERED_COLS = new Set<ColKey>(['favorite', 'rating', 'duration']);
+
+// ── Props ─────────────────────────────────────────────────────────────────────
+
 interface AlbumTrackListProps {
   songs: SubsonicSong[];
   hasVariousArtists: boolean;
   currentTrack: Track | null;
   isPlaying: boolean;
-  hoveredSongId: string | null;
-  setHoveredSongId: (id: string | null) => void;
   ratings: Record<string, number>;
   starredSongs: Set<string>;
   onPlaySong: (song: SubsonicSong) => void;
@@ -60,8 +87,6 @@ export default function AlbumTrackList({
   hasVariousArtists,
   currentTrack,
   isPlaying,
-  hoveredSongId,
-  setHoveredSongId,
   ratings,
   starredSongs,
   onPlaySong,
@@ -70,7 +95,54 @@ export default function AlbumTrackList({
   onContextMenu,
 }: AlbumTrackListProps) {
   const { t } = useTranslation();
-  const totalDuration = songs.reduce((acc, s) => acc + s.duration, 0);
+  const navigate = useNavigate();
+  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);
+
+  // ── Column state (resize, visibility, picker) via shared hook ────────────
+  const {
+    colWidths, colVisible, visibleCols, gridStyle,
+    startResize, toggleColumn,
+    pickerOpen, setPickerOpen, pickerRef, tracklistRef,
+  } = useTracklistColumns(COLUMNS, 'psysonic_tracklist_columns');
+
+  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]);
+
+  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 discs = new Map<number, SubsonicSong[]>();
   songs.forEach(song => {
@@ -81,26 +153,222 @@ 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,
-  });
+  const inSelectMode = selectedIds.size > 0;
+
+  // ── Header cell renderer ──────────────────────────────────────────────────
+  const renderHeaderCell = (colDef: ColDef, colIndex: number) => {
+    const key = colDef.key as ColKey;
+    const isLastCol = colIndex === visibleCols.length - 1;
+    const isCentered = CENTERED_COLS.has(key);
+    const label = colDef.i18nKey ? t(`albumDetail.${colDef.i18nKey as string}`) : '';
+
+    // num header: checkbox + # label, mirrors row-cell layout exactly
+    if (key === 'num') {
+      return (
+        <div key={key} className="track-num">
+          <span
+            className={`bulk-check${allSelected ? ' checked' : ''}${inSelectMode ? ' bulk-check-visible' : ''}`}
+            onClick={e => { e.stopPropagation(); toggleAll(); }}
+            style={{ cursor: 'pointer' }}
+          />
+          <span className="track-num-number">#</span>
+        </div>
+      );
+    }
+
+    // title (1fr): label + divider on RIGHT edge that controls the NEXT px column (drag→shrinks it)
+    if (key === 'title') {
+      const hasNextCol = colIndex + 1 < visibleCols.length;
+      return (
+        <div key={key} style={{ position: 'relative', padding: 0, margin: 0, minWidth: 0, overflow: 'hidden' }}>
+          <div style={{ display: 'flex', width: '100%', height: '100%', alignItems: 'center', justifyContent: 'flex-start', paddingLeft: 12 }}>
+            <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{label}</span>
+          </div>
+          {hasNextCol && (
+            <div className="col-resize-handle" onMouseDown={e => startResize(e, colIndex + 1, -1)} />
+          )}
+        </div>
+      );
+    }
+
+    // px-width columns: centred or left-aligned label + right-edge divider (except last col)
+    // direction=1: drag right → this column grows, title (1fr) shrinks
+    const isResizable = !isLastCol;
+    return (
+      <div key={key} data-align={isCentered ? 'center' : 'start'} style={{ position: 'relative', padding: 0, margin: 0, minWidth: 0, overflow: 'hidden' }}>
+        <div style={{ display: 'flex', width: '100%', height: '100%', alignItems: 'center', justifyContent: isCentered ? 'center' : 'flex-start', paddingLeft: isCentered ? 0 : 12 }}>
+          <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{label}</span>
+        </div>
+        {isResizable && (
+          <div className="col-resize-handle" onMouseDown={e => startResize(e, colIndex, 1)} />
+        )}
+      </div>
+    );
+  };
+
+  // ── Row cell renderer ─────────────────────────────────────────────────────
+  const renderRowCell = (key: ColKey, song: SubsonicSong, globalIdx: number) => {
+    switch (key) {
+      case 'num':
+        return (
+          <div
+            key="num"
+            className={`track-num${currentTrack?.id === song.id ? ' track-num-active' : ''}${currentTrack?.id === song.id && !isPlaying ? ' track-num-paused' : ''}`}
+            style={{ cursor: 'pointer' }}
+            onClick={e => { e.stopPropagation(); onPlaySong(song); }}
+          >
+            <span
+              className={`bulk-check${selectedIds.has(song.id) ? ' checked' : ''}${inSelectMode ? ' bulk-check-visible' : ''}`}
+              onClick={e => { e.stopPropagation(); toggleSelect(song.id, globalIdx, e.shiftKey); }}
+            />
+            {currentTrack?.id === song.id && isPlaying && (
+              <span className="track-num-eq">
+                <div className="eq-bars"><span className="eq-bar" /><span className="eq-bar" /><span className="eq-bar" /></div>
+              </span>
+            )}
+            <span className="track-num-play"><Play size={13} fill="currentColor" /></span>
+            <span className="track-num-number">{song.track ?? '—'}</span>
+          </div>
+        );
+      case 'title':
+        return (
+          <div key="title" className="track-info">
+            <span className="track-title">{song.title}</span>
+          </div>
+        );
+      case 'artist':
+        return (
+          <div key="artist" className="track-artist-cell">
+            <span
+              className={`track-artist${song.artistId ? ' track-artist-link' : ''}`}
+              style={{ cursor: song.artistId ? 'pointer' : 'default' }}
+              onClick={e => { if (song.artistId) { e.stopPropagation(); navigate(`/artist/${song.artistId}`); } }}
+            >
+              {song.artist}
+            </span>
+          </div>
+        );
+      case 'favorite':
+        return (
+          <div key="favorite" 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>
+        );
+      case 'rating':
+        return (
+          <StarRating
+            key="rating"
+            value={ratings[song.id] ?? song.userRating ?? 0}
+            onChange={r => onRate(song.id, r)}
+          />
+        );
+      case 'duration':
+        return (
+          <div key="duration" className="track-duration">
+            {formatDuration(song.duration)}
+          </div>
+        );
+      case 'format':
+        return (
+          <div key="format" className="track-meta">
+            {(song.suffix || song.bitRate) && (
+              <span className="track-codec">{codecLabel(song)}</span>
+            )}
+          </div>
+        );
+      case 'genre':
+        return (
+          <div key="genre" className="track-genre">
+            {song.genre ?? '—'}
+          </div>
+        );
+      default:
+        return null;
+    }
+  };
 
   return (
-    <div className="tracklist">
-      <div className={`tracklist-header${hasVariousArtists ? ' tracklist-va' : ''}`}>
-        <div className="col-center">#</div>
-        <div>{t('albumDetail.trackTitle')}</div>
-        {hasVariousArtists && <div>{t('albumDetail.trackArtist')}</div>}
-        <div className="col-center">{t('albumDetail.trackFavorite')}</div>
-        <div className="col-center">{t('albumDetail.trackRating')}</div>
-        <div className="col-center">{t('albumDetail.trackDuration')}</div>
-        <div>{t('albumDetail.trackFormat')}</div>
+    <div className="tracklist" ref={tracklistRef}>
+
+      {/* ── 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>
+      )}
+
+      {/* ── Header ── */}
+      <div style={{ position: 'relative' }}>
+        <div className="tracklist-header" style={gridStyle}>
+          {visibleCols.map((colDef, colIndex) => renderHeaderCell(colDef, colIndex))}
+        </div>
+
+        {/* Column visibility picker */}
+        <div className="tracklist-col-picker" ref={pickerRef}>
+          <button
+            className="tracklist-col-picker-btn"
+            onClick={e => { e.stopPropagation(); setPickerOpen(v => !v); }}
+            data-tooltip={t('albumDetail.columns')}
+          >
+            <ChevronDown size={14} />
+          </button>
+          {pickerOpen && (
+            <div className="tracklist-col-picker-menu">
+              <div className="tracklist-col-picker-label">{t('albumDetail.columns')}</div>
+              {COLUMNS.filter(c => !c.required).map(c => {
+                const label = c.i18nKey ? t(`albumDetail.${c.i18nKey as string}`) : c.key;
+                const isOn = colVisible.has(c.key);
+                return (
+                  <button
+                    key={c.key}
+                    className={`tracklist-col-picker-item${isOn ? ' active' : ''}`}
+                    onClick={() => toggleColumn(c.key)}
+                  >
+                    <span className="tracklist-col-picker-check">
+                      {isOn && <Check size={13} />}
+                    </span>
+                    {label}
+                  </button>
+                );
+              })}
+            </div>
+          )}
+        </div>
       </div>
 
+      {/* ── Tracks ── */}
       {discNums.map(discNum => (
         <div key={discNum}>
           {isMultiDisc && (
@@ -109,79 +377,50 @@ 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' : ''}`}
-              onMouseEnter={() => setHoveredSongId(song.id)}
-              onMouseLeave={() => setHoveredSongId(null)}
-              onDoubleClick={() => onPlaySong(song)}
-              onContextMenu={e => {
-                e.preventDefault();
-                onContextMenu(e.clientX, e.clientY, makeTrack(song), 'album-song');
-              }}
-              role="row"
-              draggable
-              onDragStart={e => {
-                e.dataTransfer.effectAllowed = 'copy';
-                e.dataTransfer.setData('text/plain', JSON.stringify({ type: 'song', track: makeTrack(song) }));
-              }}
-            >
+          {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' : ''}`}
+                style={gridStyle}
+                onClick={e => {
+                  if ((e.target as HTMLElement).closest('button, a, input')) return;
+                  if (inSelectMode) {
+                    toggleSelect(song.id, globalIdx, e.shiftKey);
+                  } else {
+                    onPlaySong(song);
+                  }
+                }}
+                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
-                      ? <Play size={13} fill="currentColor" />
-                      : (song.track ?? i + 1)}
+                {visibleCols.map(colDef => renderRowCell(colDef.key as ColKey, song, globalIdx))}
               </div>
-              <div className="track-info">
-                <span className="track-title">{song.title}</span>
-              </div>
-              {hasVariousArtists && (
-                <div className="track-artist-cell">
-                  <span className="track-artist">{song.artist}</span>
-                </div>
-              )}
-              <div className="track-star-cell">
-                <button
-                  className="btn btn-ghost track-star-btn"
-                  onClick={e => onToggleSongStar(song, e)}
-                  data-tooltip={starredSongs.has(song.id) ? t('albumDetail.favoriteRemove') : t('albumDetail.favoriteAdd')}
-                  style={{ color: starredSongs.has(song.id) ? 'var(--color-star-active, var(--accent))' : 'var(--color-star-inactive, var(--text-muted))' }}
-                >
-                  <Star size={14} fill={starredSongs.has(song.id) ? 'currentColor' : 'none'} />
-                </button>
-              </div>
-              <StarRating
-                value={ratings[song.id] ?? song.userRating ?? 0}
-                onChange={r => onRate(song.id, r)}
-              />
-              <div className="track-duration">
-                {formatDuration(song.duration)}
-              </div>
-              <div className="track-meta">
-                {(song.suffix || song.bitRate) && (
-                  <span className="track-codec">{codecLabel(song)}</span>
-                )}
-              </div>
-            </div>
-          ))}
+            );
+          })}
         </div>
       ))}
 
-      <div className={`tracklist-total${hasVariousArtists ? ' tracklist-va' : ''}`}>
-        <span className="tracklist-total-label">{t('albumDetail.trackTotal')}</span>
-        <span className="tracklist-total-value">{formatDuration(totalDuration)}</span>
-      </div>
     </div>
   );
 }

src/components/AppUpdater.tsx

@@ -0,0 +1,151 @@
+import React, { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { check, Update, DownloadEvent } from '@tauri-apps/plugin-updater';
+import { invoke } from '@tauri-apps/api/core';
+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; error?: string }
+  | { 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 invoke('relaunch_after_update');
+    } catch (e: unknown) {
+      const msg = e instanceof Error ? e.message : String(e);
+      console.error('Update failed:', msg);
+      // Surface the error so the user (and developer) can see what went wrong
+      setState({ phase: 'available', version: savedVersion, update, error: msg });
+    }
+  };
+
+  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">
+          {state.error && (
+            <div className="app-updater-error">{state.error}</div>
+          )}
+          {canInstall && (
+            <>
+              <p className="app-updater-hint">{t('common.updaterExperimentalHint')}</p>
+              <button className="app-updater-btn-primary" onClick={handleInstall}>
+                <Download size={12} /> {t('common.updaterInstall')}
+              </button>
+              <button className="app-updater-btn-secondary" onClick={handleDownload}>
+                <Download size={12} /> {t('common.updaterDownload')}
+              </button>
+            </>
+          )}
+          {isLinuxFallback && (
+            <button className="app-updater-btn-primary" onClick={handleDownload}>
+              <Download size={12} /> {t('common.updaterDownload')}
+            </button>
+          )}
+        </div>
+      )}
+    </div>,
+    document.body
+  );
+}

src/components/ArtistCardLocal.tsx

@@ -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) => {

src/components/CachedImage.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { getCachedUrl } from '../utils/imageCache';
 
 interface CachedImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
@@ -6,18 +6,58 @@ 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;
-    getCachedUrl(fetchUrl, cacheKey).then(url => { if (!cancelled) setResolved(url); });
-    return () => { cancelled = true; };
+    const controller = new AbortController();
+    setResolved('');
+    getCachedUrl(fetchUrl, cacheKey, controller.signal).then(url => {
+      if (!controller.signal.aborted) setResolved(url);
+    });
+    return () => { controller.abort(); };
   }, [fetchUrl, cacheKey]);
-  return resolved || fetchUrl;
+  return fallbackToFetch ? (resolved || fetchUrl) : resolved;
 }
 
-export default function CachedImage({ src, cacheKey, ...props }: CachedImageProps) {
-  const resolvedSrc = useCachedUrl(src, cacheKey);
-  return <img src={resolvedSrc} {...props} />;
+export default function CachedImage({ src, cacheKey, style, onLoad, ...props }: CachedImageProps) {
+  const [inView, setInView] = useState(false);
+  const imgRef = useRef<HTMLImageElement>(null);
+
+  useEffect(() => {
+    const el = imgRef.current;
+    if (!el) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => { if (entry.isIntersecting) { setInView(true); observer.disconnect(); } },
+      { rootMargin: '300px' }, // start fetching 300px before entering viewport
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
+  // Pass empty string when not yet in view so useCachedUrl skips the fetch entirely.
+  const resolvedSrc = useCachedUrl(inView ? src : '', cacheKey);
+  const [loaded, setLoaded] = useState(false);
+
+  // 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
+      ref={imgRef}
+      src={resolvedSrc || undefined}
+      style={{ ...style, opacity: loaded ? 1 : 0, transition: 'opacity 0.15s ease' }}
+      onLoad={e => { setLoaded(true); onLoad?.(e); }}
+      {...props}
+    />
+  );
 }

src/components/ChangelogModal.tsx

@@ -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
+  );
+}

src/components/ContextMenu.tsx

@@ -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]);
 
@@ -61,20 +207,73 @@ export default function ContextMenu() {
     await action();
   };
 
-  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,
-        }));
-        playTrack(radioTracks[0], radioTracks);
+  const startRadio = async (artistId: string, artistName: string, seedTrack?: Track) => {
+    if (seedTrack) {
+      // Start playback immediately based on current state
+      const state = usePlayerStore.getState();
+      if (state.currentTrack?.id === seedTrack.id) {
+        if (!state.isPlaying) state.resume();
+        // Already playing this track — don't restart
+      } else {
+        playTrack(seedTrack, [seedTrack]);
+      }
+      // Load radio queue in background — enqueueRadio replaces any pending radio
+      // tracks so clicking "Start Radio" again never stacks duplicate batches.
+      try {
+        const [similar, top] = await Promise.all([getSimilarSongs2(artistId), getTopSongs(artistName)]);
+        const radioTracks = [...top, ...similar]
+          .map(songToTrack)
+          .filter(t => t.id !== seedTrack.id)
+          .map(t => ({ ...t, radioAdded: true as const }));
+        if (radioTracks.length > 0) usePlayerStore.getState().enqueueRadio(radioTracks, artistId);
+      } catch (e) {
+        console.error('Failed to load radio queue', e);
+      }
+    } else {
+      // Artist radio: fire both calls immediately but don't wait for the slow one.
+      // getTopSongs is fast (local library) — start playback as soon as it resolves.
+      // getSimilarSongs2 is slow (Last.fm) — enrich the queue in the background.
+      const similarPromise = getSimilarSongs2(artistId).catch(() => [] as Awaited<ReturnType<typeof getSimilarSongs2>>);
+      try {
+        const top = await getTopSongs(artistName);
+        const topTracks = top.map(t => ({ ...songToTrack(t), radioAdded: true as const }));
+        if (topTracks.length === 0) {
+          // No local top songs — fall back to waiting for similar tracks
+          const similar = await similarPromise;
+          const fallback = similar.map(t => ({ ...songToTrack(t), radioAdded: true as const }));
+          if (fallback.length === 0) return;
+          const state = usePlayerStore.getState();
+          if (state.currentTrack) {
+            state.enqueueRadio(fallback, artistId);
+          } else {
+            state.setRadioArtistId(artistId);
+            playTrack(fallback[0], fallback);
+          }
+          return;
+        }
+        // Start playback immediately from top songs
+        const state = usePlayerStore.getState();
+        if (state.currentTrack) {
+          state.enqueueRadio(topTracks, artistId);
+        } else {
+          state.setRadioArtistId(artistId);
+          playTrack(topTracks[0], topTracks);
+        }
+        // Enrich with similar tracks in the background
+        similarPromise.then(similar => {
+          const similarTracks = similar
+            .map(t => ({ ...songToTrack(t), radioAdded: true as const }))
+            .filter(t => !topTracks.some(top => top.id === t.id));
+          if (similarTracks.length === 0) return;
+          // Collect pending (upcoming) radio tracks so enqueueRadio re-inserts them
+          // together with the new similar tracks rather than losing them.
+          const { queue, queueIndex } = usePlayerStore.getState();
+          const pendingRadio = queue.slice(queueIndex + 1).filter(t => t.radioAdded);
+          usePlayerStore.getState().enqueueRadio([...pendingRadio, ...similarTracks], artistId);
+        });
+      } catch (e) {
+        console.error('Failed to start radio', e);
       }
-    } catch (e) {
-      console.error('Failed to start radio', e);
     }
   };
 
@@ -129,16 +328,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,
-                  }));
-                  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 +354,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, song))}>
                 <Radio size={14} /> {t('contextMenu.startRadio')}
               </div>
               <div className="context-menu-item" onClick={() => handleAction(() => {
@@ -156,7 +362,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 +375,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 +404,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 +438,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 +457,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 +479,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 +492,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, song))}>
                 <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>
             </>
           );
         })()}

src/components/Equalizer.tsx

@@ -1,6 +1,7 @@
 import { useState, useRef, useEffect, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Save, Trash2, RotateCcw } from 'lucide-react';
+import { Save, Trash2, RotateCcw, Search, X, ChevronDown, ChevronUp } from 'lucide-react';
+import { invoke } from '@tauri-apps/api/core';
 import CustomSelect from './CustomSelect';
 import { useEqStore, EQ_BANDS, BUILTIN_PRESETS } from '../store/eqStore';
 import { useThemeStore } from '../store/themeStore';
@@ -147,7 +148,7 @@ function VerticalFader({ value, disabled, onChange }: FaderProps) {
     if (!el) return;
     const rect = el.getBoundingClientRect();
     const pct = Math.max(0, Math.min(1, (clientY - rect.top) / rect.height));
-    const gain = Math.round(pctToGain(pct) / 0.5) * 0.5; // snap to 0.5 dB
+    const gain = parseFloat((Math.round(pctToGain(pct) / 0.1) * 0.1).toFixed(1)); // snap to 0.1 dB
     onChange(Math.max(GAIN_MIN, Math.min(GAIN_MAX, gain)));
   }, [onChange]);
 
@@ -182,20 +183,57 @@ function VerticalFader({ value, disabled, onChange }: FaderProps) {
   );
 }
 
+// ─── AutoEQ helpers ───────────────────────────────────────────────────────────
+
+interface AutoEqVariant { form: string; rig: string | null; source: string; }
+interface AutoEqResult  { name: string; source: string; rig: string | null; form: string; }
+
+
+/** Parses AutoEQ FixedBandEQ.txt format.
+ * Expected lines:
+ *   Preamp: -5.5 dB
+ *   Filter 1: ON PK Fc 31 Hz Gain -0.2 dB Q 1.41
+ *   ...
+ * Returns all 10 band gains as exact floats and the preamp value.
+ */
+function parseFixedBandEqString(text: string): { gains: number[]; preamp: number } {
+  const preampMatch = text.match(/Preamp:\s*(-?\d+(?:\.\d+)?)\s*dB/i);
+  const preamp = preampMatch ? parseFloat(preampMatch[1]) : 0;
+
+  const gains: number[] = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
+  const allFilters = [...text.matchAll(/^Filter\s+\d+:\s+ON\s+PK\s+.*?Gain\s+(-?\d+(?:\.\d+)?)\s+dB/gim)];
+  allFilters.slice(0, 10).forEach((m, i) => {
+    gains[i] = parseFloat(m[1]);
+  });
+
+  return { gains, preamp };
+}
+
 // ─── Main component ───────────────────────────────────────────────────────────
 
 export default function Equalizer() {
   const { t } = useTranslation();
   const gains = useEqStore(s => s.gains);
   const enabled = useEqStore(s => s.enabled);
+  const preGain = useEqStore(s => s.preGain);
   const activePreset = useEqStore(s => s.activePreset);
   const customPresets = useEqStore(s => s.customPresets);
-  const { setBandGain, setEnabled, applyPreset, saveCustomPreset, deleteCustomPreset } = useEqStore();
+  const { setBandGain, setEnabled, setPreGain, applyPreset, applyAutoEq, saveCustomPreset, deleteCustomPreset } = useEqStore();
 
   const [saveName, setSaveName] = useState('');
   const [showSave, setShowSave] = useState(false);
   const canvasRef = useRef<HTMLCanvasElement>(null);
 
+  // AutoEQ state
+  const [autoEqOpen, setAutoEqOpen] = useState(false);
+  const [autoEqQuery, setAutoEqQuery] = useState('');
+  const [autoEqResults, setAutoEqResults] = useState<AutoEqResult[]>([]);
+  const [autoEqLoading, setAutoEqLoading] = useState(false);
+  const [autoEqError, setAutoEqError] = useState<string | null>(null);
+  const [autoEqApplied, setAutoEqApplied] = useState<string | null>(null);
+  const [entriesLoading, setEntriesLoading] = useState(false);
+  const entriesCacheRef = useRef<Record<string, AutoEqVariant[]> | null>(null);
+
   const theme = useThemeStore(s => s.theme);
 
   const redraw = useCallback(() => {
@@ -216,6 +254,62 @@ export default function Equalizer() {
     return () => ro.disconnect();
   }, [redraw]);
 
+  // AutoEQ: load entries index lazily when section opens, then filter client-side
+  async function ensureEntries() {
+    if (entriesCacheRef.current) return;
+    setEntriesLoading(true);
+    setAutoEqError(null);
+    try {
+      const json = await invoke<string>('autoeq_entries');
+      entriesCacheRef.current = JSON.parse(json);
+    } catch (e: unknown) {
+      setAutoEqError(e instanceof Error ? e.message : t('settings.eqAutoEqError'));
+    } finally {
+      setEntriesLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    const q = autoEqQuery.trim().toLowerCase();
+    if (!entriesCacheRef.current || q.length < 1) { setAutoEqResults([]); return; }
+    const flat: AutoEqResult[] = [];
+    for (const [name, variants] of Object.entries(entriesCacheRef.current)) {
+      if (!name.toLowerCase().includes(q)) continue;
+      for (const v of variants) {
+        flat.push({ name, source: v.source, rig: v.rig, form: v.form });
+        if (flat.length >= 20) break;
+      }
+      if (flat.length >= 20) break;
+    }
+    setAutoEqResults(flat);
+  // entriesLoading in deps: re-runs after entries finish loading so a query typed
+  // during loading produces results immediately without needing a re-type.
+  }, [autoEqQuery, entriesLoading]);
+
+  async function applyAutoEqResult(result: AutoEqResult) {
+    setAutoEqLoading(true);
+    setAutoEqError(null);
+    try {
+      const text = await invoke<string>('autoeq_fetch_profile', {
+        name: result.name,
+        source: result.source,
+        rig: result.rig ?? null,
+        form: result.form,
+      });
+      if (!text) throw new Error(t('settings.eqAutoEqFetchError'));
+      const { gains: newGains, preamp } = parseFixedBandEqString(text);
+      applyAutoEq(result.name, newGains, preamp);
+      setAutoEqApplied(result.name);
+      setAutoEqQuery('');
+      setAutoEqResults([]);
+      setTimeout(() => setAutoEqApplied(null), 3000);
+    } catch (e: unknown) {
+      setAutoEqError(e instanceof Error ? e.message : t('settings.eqAutoEqFetchError'));
+    } finally {
+      setAutoEqLoading(false);
+    }
+  }
+
   const allPresets = [...BUILTIN_PRESETS, ...customPresets];
   const selectValue = activePreset ?? '__custom__';
   const isCustomSaved = activePreset && !BUILTIN_PRESETS.some(p => p.name === activePreset);
@@ -279,6 +373,74 @@ export default function Equalizer() {
         </div>
       )}
 
+      {/* AutoEQ section */}
+      <div className="eq-autoeq-section">
+        <button
+          className="eq-autoeq-toggle"
+          onClick={() => {
+            const opening = !autoEqOpen;
+            setAutoEqOpen(opening);
+            setAutoEqQuery('');
+            setAutoEqResults([]);
+            setAutoEqError(null);
+            if (opening) ensureEntries();
+          }}
+        >
+          <Search size={13} />
+          <span>{t('settings.eqAutoEqTitle')}</span>
+          {autoEqOpen ? <ChevronUp size={13} /> : <ChevronDown size={13} />}
+        </button>
+
+        {autoEqOpen && (
+          <div className="eq-autoeq-body">
+            <div className="eq-autoeq-search-row">
+              <input
+                className="input"
+                placeholder={t('settings.eqAutoEqPlaceholder')}
+                value={autoEqQuery}
+                onChange={e => { setAutoEqQuery(e.target.value); setAutoEqError(null); }}
+                autoFocus
+                style={{ flex: 1, padding: '6px 12px', fontSize: 13 }}
+              />
+              {autoEqQuery && (
+                <button className="eq-ctrl-btn" onClick={() => { setAutoEqQuery(''); setAutoEqResults([]); }}>
+                  <X size={13} />
+                </button>
+              )}
+            </div>
+
+            {(entriesLoading || autoEqLoading) && (
+              <div className="eq-autoeq-status">{t('settings.eqAutoEqSearching')}</div>
+            )}
+            {autoEqError && (
+              <div className="eq-autoeq-status eq-autoeq-error">{autoEqError}</div>
+            )}
+            {autoEqApplied && (
+              <div className="eq-autoeq-status eq-autoeq-applied">✓ {autoEqApplied}</div>
+            )}
+
+            {autoEqResults.length > 0 && (
+              <div className="eq-autoeq-results">
+                {autoEqResults.map((r, i) => (
+                  <button
+                    key={`${r.name}|${r.source}|${i}`}
+                    className="eq-autoeq-result-btn"
+                    onClick={() => applyAutoEqResult(r)}
+                  >
+                    <span>{r.name}</span>
+                    <span className="eq-autoeq-result-source">{r.source}</span>
+                  </button>
+                ))}
+              </div>
+            )}
+
+            {!entriesLoading && !autoEqLoading && !autoEqError && autoEqQuery.length >= 2 && autoEqResults.length === 0 && (
+              <div className="eq-autoeq-status">{t('settings.eqAutoEqNoResults')}</div>
+            )}
+          </div>
+        )}
+      </div>
+
       {/* EQ panel */}
       <div className={`eq-panel ${!enabled ? 'eq-panel--off' : ''}`}>
         {/* Frequency response */}
@@ -313,6 +475,27 @@ export default function Equalizer() {
             </div>
           ))}
         </div>
+
+        {/* Pre-gain row */}
+        <div className="eq-pregain-row">
+          <span className="eq-pregain-label">{t('settings.eqPreGain')}</span>
+          <input
+            type="range"
+            className="eq-pregain-slider"
+            min={-30} max={6} step={0.1}
+            value={preGain}
+            disabled={!enabled}
+            onChange={e => setPreGain(parseFloat(e.target.value))}
+          />
+          <span className="eq-pregain-val">
+            {preGain > 0 ? '+' : ''}{preGain.toFixed(1)} dB
+          </span>
+          {preGain !== 0 && (
+            <button className="eq-ctrl-btn" onClick={() => setPreGain(0)} data-tooltip={t('settings.eqResetPreGain')} style={{ marginLeft: 4 }}>
+              <RotateCcw size={11} />
+            </button>
+          )}
+        </div>
       </div>
     </div>
   );

src/components/ExportPickerModal.tsx

@@ -0,0 +1,90 @@
+import { useState } from 'react';
+import { X, Download } from 'lucide-react';
+
+interface Props {
+  onConfirm: (since: number) => void;
+  onClose: () => void;
+}
+
+export default function ExportPickerModal({ onConfirm, onClose }: Props) {
+  const today = new Date().toISOString().slice(0, 10);
+  const [date, setDate] = useState(today);
+
+  const handleConfirm = () => {
+    const since = new Date(date + 'T00:00:00').getTime();
+    onConfirm(since);
+  };
+
+  return (
+    <div
+      style={{
+        position: 'fixed', inset: 0, zIndex: 99998,
+        background: 'rgba(0,0,0,0.6)',
+        display: 'flex', alignItems: 'center', justifyContent: 'center',
+      }}
+      onClick={e => { if (e.target === e.currentTarget) onClose(); }}
+    >
+      <div style={{
+        background: 'var(--bg-card)',
+        border: '1px solid var(--border-subtle)',
+        borderRadius: '14px',
+        padding: '28px 32px',
+        width: '340px',
+        boxShadow: '0 8px 40px rgba(0,0,0,0.5)',
+      }}>
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '20px' }}>
+          <h2 style={{ margin: 0, fontSize: '16px', fontWeight: 700, color: 'var(--text-primary)' }}>
+            Alben exportieren
+          </h2>
+          <button
+            onClick={onClose}
+            style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-secondary)', padding: '4px', display: 'flex' }}
+          >
+            <X size={18} />
+          </button>
+        </div>
+
+        <p style={{ margin: '0 0 16px', fontSize: '13px', color: 'var(--text-secondary)', lineHeight: 1.5 }}>
+          Alle Alben exportieren, die seit diesem Datum hinzugekommen sind:
+        </p>
+
+        <input
+          type="date"
+          value={date}
+          max={today}
+          onChange={e => {
+            setDate(e.target.value);
+            e.target.blur();
+          }}
+          style={{
+            width: '100%',
+            padding: '9px 12px',
+            borderRadius: '8px',
+            border: '1px solid var(--border-subtle)',
+            background: 'var(--bg-app)',
+            color: 'var(--text-primary)',
+            fontSize: '14px',
+            boxSizing: 'border-box',
+            outline: 'none',
+            colorScheme: 'dark',
+          }}
+        />
+
+        <div style={{ display: 'flex', gap: '10px', marginTop: '20px' }}>
+          <button className="btn btn-surface" onClick={onClose} style={{ flex: 1 }}>
+            Abbrechen
+          </button>
+          <button
+            className="btn btn-primary"
+            onClick={handleConfirm}
+            disabled={!date}
+            style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '6px' }}
+          >
+            <Download size={15} />
+            Exportieren
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/FullscreenPlayer.tsx

@@ -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>('');
@@ -233,11 +245,11 @@ export default function FullscreenPlayer({ onClose }: FullscreenPlayerProps) {
           <button className="fs-btn fs-btn-sm" onClick={stop} aria-label="Stop">
             <Square size={14} fill="currentColor" />
           </button>
-          <button className="fs-btn" onClick={previous} aria-label={t('player.prev')}>
+          <button className="fs-btn" onClick={() => previous()} aria-label={t('player.prev')}>
             <SkipBack size={20} />
           </button>
           <FsPlayBtn />
-          <button className="fs-btn" onClick={next} aria-label={t('player.next')}>
+          <button className="fs-btn" onClick={() => next()} aria-label={t('player.next')}>
             <SkipForward size={20} />
           </button>
           <button

src/components/GenreFilterBar.tsx

@@ -0,0 +1,146 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Filter, X } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { getGenres } from '../api/subsonic';
+
+interface GenreFilterBarProps {
+  selected: string[];
+  onSelectionChange: (selected: string[]) => void;
+}
+
+export default function GenreFilterBar({ selected, onSelectionChange }: GenreFilterBarProps) {
+  const { t } = useTranslation();
+  const [open, setOpen] = useState(false);
+  const [genres, setGenres] = useState<string[]>([]);
+  const [search, setSearch] = useState('');
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    getGenres().then(data =>
+      setGenres(data.map(g => g.value).sort((a, b) => a.localeCompare(b)))
+    );
+  }, []);
+
+  // close dropdown on outside click
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setDropdownOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, []);
+
+  // sync open state with selection
+  useEffect(() => {
+    if (selected.length > 0) setOpen(true);
+  }, [selected]);
+
+  const filteredOptions = genres.filter(
+    g => !selected.includes(g) && g.toLowerCase().includes(search.toLowerCase())
+  );
+
+  const add = (genre: string) => {
+    onSelectionChange([...selected, genre]);
+    setSearch('');
+    inputRef.current?.focus();
+  };
+
+  const remove = (genre: string) => {
+    onSelectionChange(selected.filter(s => s !== genre));
+  };
+
+  const clear = () => {
+    onSelectionChange([]);
+    setSearch('');
+    setOpen(false);
+    setDropdownOpen(false);
+  };
+
+  const openFilter = () => {
+    setOpen(true);
+    setTimeout(() => { inputRef.current?.focus(); setDropdownOpen(true); }, 30);
+  };
+
+  if (!open) {
+    return (
+      <button className="btn btn-surface" onClick={openFilter} style={{ display: 'flex', alignItems: 'center', gap: '0.4rem' }}>
+        <Filter size={14} />
+        {t('common.filterGenre')}
+      </button>
+    );
+  }
+
+  const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {
+    // relatedTarget is the next focused element; if it's outside our container, handle close
+    const next = e.relatedTarget as Node | null;
+    if (containerRef.current && next && containerRef.current.contains(next)) return;
+    setTimeout(() => {
+      if (selected.length === 0) {
+        setOpen(false);
+        setSearch('');
+        setDropdownOpen(false);
+      } else {
+        setDropdownOpen(false);
+      }
+    }, 150);
+  };
+
+  return (
+    <div ref={containerRef} onBlur={handleBlur} style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', flexWrap: 'wrap' }}>
+      <Filter size={14} style={{ color: 'var(--accent)', flexShrink: 0 }} />
+
+      <div className="genre-filter-tagbox">
+        {selected.map(g => (
+          <span key={g} className="genre-filter-chip">
+            {g}
+            <button onClick={() => remove(g)} aria-label={`Remove ${g}`}>
+              <X size={11} />
+            </button>
+          </span>
+        ))}
+
+        <input
+          ref={inputRef}
+          className="genre-filter-input"
+          placeholder={selected.length === 0 ? t('common.filterSearchGenres') : ''}
+          value={search}
+          onChange={e => { setSearch(e.target.value); setDropdownOpen(true); }}
+          onFocus={() => setDropdownOpen(true)}
+          onKeyDown={e => {
+            if (e.key === 'Escape') { setDropdownOpen(false); e.currentTarget.blur(); }
+            if (e.key === 'Backspace' && search === '' && selected.length > 0) {
+              remove(selected[selected.length - 1]);
+            }
+          }}
+        />
+
+        {dropdownOpen && filteredOptions.length > 0 && (
+          <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}
+              </div>
+            ))}
+          </div>
+        )}
+
+        {dropdownOpen && filteredOptions.length === 0 && search.length > 0 && (
+          <div className="genre-filter-dropdown" onWheel={e => e.stopPropagation()}>
+            <div className="genre-filter-empty">{t('common.filterNoGenres')}</div>
+          </div>
+        )}
+      </div>
+
+      {selected.length > 0 && (
+        <button className="btn btn-ghost" onClick={clear} style={{ padding: '0.35rem 0.6rem', display: 'flex', alignItems: 'center', gap: '0.3rem', fontSize: '0.8rem' }}>
+          <X size={13} />
+          {t('common.filterClear')}
+        </button>
+      )}
+    </div>
+  );
+}

src/components/Hero.tsx

@@ -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';
 
@@ -80,14 +80,30 @@ export default function Hero({ albums: albumsProp }: HeroProps = {}) {
 
   const album = albums[activeIdx] ?? null;
 
-  // Resolve background URL via cache
-  const bgRawUrl = album?.coverArt ? buildCoverArtUrl(album.coverArt, 800) : '';
-  const bgCacheKey = album?.coverArt ? coverArtCacheKey(album.coverArt, 800) : '';
+  // Lazily fetch format label for the currently-visible album (cached by id)
+  const [albumFormats, setAlbumFormats] = useState<Record<string, string>>({});
+  useEffect(() => {
+    if (!album || albumFormats[album.id] !== undefined) return;
+    getAlbum(album.id).then(data => {
+      const fmts = [...new Set(data.songs.map(s => s.suffix).filter((f): f is string => !!f))];
+      setAlbumFormats(prev => ({ ...prev, [album.id]: fmts.map(f => f.toUpperCase()).join(' / ') }));
+    }).catch(() => {
+      setAlbumFormats(prev => ({ ...prev, [album.id]: '' }));
+    });
+  }, [album?.id]);
+
+  // 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);
 
-  // Resolve cover thumbnail via cache
-  const coverRawUrl = album?.coverArt ? buildCoverArtUrl(album.coverArt, 300) : '';
-  const coverCacheKey = album?.coverArt ? coverArtCacheKey(album.coverArt, 300) : '';
+  // Keep the last known good URL so HeroBg never receives '' during a cache-miss
+  // transition (which would cause the background to flash empty before fading in).
+  const stableBgUrl = useRef('');
+  if (resolvedBgUrl) stableBgUrl.current = resolvedBgUrl;
+
+  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" />;
 
@@ -99,7 +115,7 @@ export default function Hero({ albums: albumsProp }: HeroProps = {}) {
       onClick={() => navigate(`/album/${album.id}`)}
       style={{ cursor: 'pointer' }}
     >
-      <HeroBg url={resolvedBgUrl} />
+      <HeroBg url={stableBgUrl.current} />
       <div className="hero-overlay" aria-hidden="true" />
 
       {/* key causes re-mount → animate-fade-in triggers on each album change */}
@@ -120,6 +136,7 @@ export default function Hero({ albums: albumsProp }: HeroProps = {}) {
             {album.year && <span className="badge">{album.year}</span>}
             {album.genre && <span className="badge">{album.genre}</span>}
             {album.songCount && <span className="badge">{album.songCount} Tracks</span>}
+            {albumFormats[album.id] && <span className="badge">{albumFormats[album.id]}</span>}
           </div>
           <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
             <button
@@ -133,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,
-                  }));
-                  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')}
             >

src/components/LastfmIcon.tsx

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

src/components/LiveSearch.tsx

@@ -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 });
-      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 });
-                          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>

src/components/LyricsPane.tsx

@@ -8,23 +8,49 @@ interface Props {
   currentTrack: Track | null;
 }
 
+interface CachedLyrics {
+  syncedLines: LrcLine[] | null;
+  plainLyrics: string | null;
+  notFound: boolean;
+}
+
+// Session-level cache — survives tab switches (component unmount/remount).
+// Cleared implicitly when the app restarts.
+const lyricsCache = new Map<string, CachedLyrics>();
+
 export default function LyricsPane({ currentTrack }: Props) {
   const { t } = useTranslation();
 
-  const [loading, setLoading]         = useState(false);
-  const [syncedLines, setSyncedLines]   = useState<LrcLine[] | null>(null);
-  const [plainLyrics, setPlainLyrics]   = useState<string | null>(null);
-  const [notFound, setNotFound]         = useState(false);
-  const [fetchedFor, setFetchedFor]     = useState<string | null>(null);
+  const cached = currentTrack ? lyricsCache.get(currentTrack.id) : undefined;
+
+  const [loading, setLoading]       = useState(!cached && !!currentTrack);
+  const [syncedLines, setSyncedLines] = useState<LrcLine[] | null>(cached?.syncedLines ?? null);
+  const [plainLyrics, setPlainLyrics] = useState<string | null>(cached?.plainLyrics ?? null);
+  const [notFound, setNotFound]       = useState(cached?.notFound ?? false);
 
   const hasSynced  = syncedLines !== null && syncedLines.length > 0;
   const currentTime = usePlayerStore(s => hasSynced ? s.currentTime : 0);
+  const seek = usePlayerStore(s => s.seek);
+  const duration = usePlayerStore(s => s.currentTrack?.duration ?? 0);
 
   const lineRefs   = useRef<(HTMLDivElement | null)[]>([]);
   const prevActive = useRef(-1);
 
   useEffect(() => {
-    if (!currentTrack || currentTrack.id === fetchedFor) return;
+    if (!currentTrack) return;
+
+    // Serve from cache if available
+    const hit = lyricsCache.get(currentTrack.id);
+    if (hit) {
+      setSyncedLines(hit.syncedLines);
+      setPlainLyrics(hit.plainLyrics);
+      setNotFound(hit.notFound);
+      setLoading(false);
+      lineRefs.current = [];
+      prevActive.current = -1;
+      return;
+    }
+
     let cancelled = false;
     setSyncedLines(null);
     setPlainLyrics(null);
@@ -41,27 +67,26 @@ export default function LyricsPane({ currentTrack }: Props) {
     ).then(result => {
       if (cancelled) return;
       setLoading(false);
-      setFetchedFor(currentTrack.id);
       if (!result || (!result.syncedLyrics && !result.plainLyrics)) {
+        lyricsCache.set(currentTrack.id, { syncedLines: null, plainLyrics: null, notFound: true });
         setNotFound(true);
         return;
       }
-      if (result.syncedLyrics) {
-        const lines = parseLrc(result.syncedLyrics);
-        setSyncedLines(lines.length > 0 ? lines : null);
-      }
+      const lines = result.syncedLyrics ? parseLrc(result.syncedLyrics) : null;
+      const synced = lines && lines.length > 0 ? lines : null;
+      lyricsCache.set(currentTrack.id, { syncedLines: synced, plainLyrics: result.plainLyrics, notFound: false });
+      setSyncedLines(synced);
       setPlainLyrics(result.plainLyrics);
     }).catch(() => {
-      if (!cancelled) { setLoading(false); setNotFound(true); }
+      if (!cancelled) {
+        lyricsCache.set(currentTrack.id, { syncedLines: null, plainLyrics: null, notFound: true });
+        setLoading(false);
+        setNotFound(true);
+      }
     });
     return () => { cancelled = true; };
   }, [currentTrack?.id]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  // Reset when track changes
-  useEffect(() => {
-    setFetchedFor(null);
-  }, [currentTrack?.id]);
-
   const activeIdx = hasSynced
     ? syncedLines!.reduce((acc, line, i) => (currentTime >= line.time ? i : acc), -1)
     : -1;
@@ -80,6 +105,13 @@ export default function LyricsPane({ currentTrack }: Props) {
     );
   }
 
+  const getLyricLineClass = (i: number, active: number) => {
+    const base = 'lyrics-line';
+    if (i > active) return base;
+    if (i < active) return `${base} completed`;
+    return `${base} active`;
+  };
+
   return (
     <div className="lyrics-pane">
       {loading && <p className="lyrics-status">{t('player.lyricsLoading')}</p>}
@@ -90,7 +122,9 @@ export default function LyricsPane({ currentTrack }: Props) {
             <div
               key={i}
               ref={el => { lineRefs.current[i] = el; }}
-              className={`lyrics-line${i === activeIdx ? ' active' : ''}`}
+              className={getLyricLineClass(i, activeIdx)}
+              onClick={() => { if (duration > 0) seek(line.time / duration); }}
+              style={{ cursor: 'pointer' }}
             >
               {line.text || '\u00A0'}
             </div>

src/components/MarqueeText.tsx

@@ -0,0 +1,49 @@
+import React, { useRef, useState, useEffect, useCallback } from 'react';
+
+interface Props {
+  text: string;
+  className?: string;
+  style?: React.CSSProperties;
+  onClick?: () => void;
+}
+
+export default function MarqueeText({ text, className, style, onClick }: Props) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const textRef = useRef<HTMLSpanElement>(null);
+  const [scrollAmount, setScrollAmount] = useState(0);
+
+  const measure = useCallback(() => {
+    const container = containerRef.current;
+    const text = textRef.current;
+    if (!container || !text) return;
+    text.style.display = 'inline-block';
+    const textWidth = text.getBoundingClientRect().width;
+    text.style.display = '';
+    const overflow = textWidth - container.clientWidth;
+    setScrollAmount(overflow > 4 ? Math.ceil(overflow) : 0);
+  }, []);
+
+  useEffect(() => {
+    measure();
+    const ro = new ResizeObserver(measure);
+    if (containerRef.current) ro.observe(containerRef.current);
+    return () => ro.disconnect();
+  }, [text, measure]);
+
+  return (
+    <div
+      ref={containerRef}
+      className={`marquee-wrap${className ? ` ${className}` : ''}`}
+      style={style}
+      onClick={onClick}
+    >
+      <span
+        ref={textRef}
+        className={scrollAmount > 0 ? 'marquee-scroll' : ''}
+        style={scrollAmount > 0 ? { '--marquee-amount': `-${scrollAmount}px` } as React.CSSProperties : {}}
+      >
+        {text}
+      </span>
+    </div>
+  );
+}

src/components/NowPlayingDropdown.tsx

@@ -146,7 +146,7 @@ export default function NowPlayingDropdown() {
                   <div style={{ minWidth: 0, flex: 1, display: 'flex', flexDirection: 'column', gap: '2px' }}>
                     <div className="truncate" style={{ fontSize: '13px', fontWeight: 600, color: 'var(--text-primary)' }}>{stream.title}</div>
                     <div className="truncate" style={{ fontSize: '12px', color: 'var(--text-secondary)' }}>{stream.artist}</div>
-                    <div style={{ display: 'flex', alignItems: 'center', gap: '4px', marginTop: '2px', fontSize: '11px', color: 'var(--text-muted)' }}>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: '4px', marginTop: '2px', fontSize: '11px', color: 'var(--text-secondary)' }}>
                       <User size={10} />
                       <span className="truncate">{stream.username} ({stream.playerName || 'Web'})</span>
                       {stream.minutesAgo > 0 && <span>• {t('nowPlaying.minutesAgo', { n: stream.minutesAgo })}</span>}

src/components/OfflineBanner.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { WifiOff, RefreshCw } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+interface Props {
+  onRetry: () => void;
+  isChecking: boolean;
+}
+
+export default function OfflineBanner({ onRetry, isChecking }: Props) {
+  const { t } = useTranslation();
+  return (
+    <div className="offline-banner">
+      <WifiOff size={14} />
+      <span>{t('connection.offlineModeBanner')}</span>
+      <button
+        className="offline-banner-retry"
+        onClick={onRetry}
+        disabled={isChecking}
+      >
+        <RefreshCw size={12} className={isChecking ? 'spin' : ''} />
+        {t('connection.retry')}
+      </button>
+    </div>
+  );
+}

src/components/PSmallLogo.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+interface Props {
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export default function PSmallLogo({ className, style }: Props) {
+  return (
+    <svg viewBox="0 0 115.549 130.30972" xmlns="http://www.w3.org/2000/svg" style={style} className={className}><defs id="defs1">
+      <linearGradient id="psmallGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+        <stop offset="0%" stopColor="var(--accent)" />
+        <stop offset="100%" stopColor="var(--ctp-blue)" />
+      </linearGradient>
+    </defs><g
+     id="layer1"
+     transform="translate(220.53237,27.789086)"><path
+       fill="url(#psmallGrad)"
+       d="m -191.83501,87.581279 v -14.93937 l 1.01946,-0.029 c 1.8496,-0.0526 5.09881,-2.007 6.98453,-4.20123 2.13731,-2.48697 3.28384,-4.43657 4.52545,-7.69521 0.51751,-1.35819 1.078,-2.78694 1.24554,-3.175 0.16755,-0.38805 0.88173,-2.7693 1.58707,-5.29166 0.70533,-2.52236 1.41605,-4.90361 1.57937,-5.29167 0.16441,-0.39067 0.30759,11.85061 0.32081,27.42847 l 0.0239,28.134031 h -8.64306 -8.64305 z m -3.42317,-19.65031 c -0.81559,-0.16111 -1.84746,-0.48272 -2.29306,-0.71468 -1.09242,-0.5687 -2.72853,-2.16884 -2.74064,-2.68038 -0.005,-0.22765 -0.38465,-0.86265 -0.84281,-1.41111 -0.8626,-1.03264 -2.38323,-4.66133 -4.63113,-11.05137 -1.72997,-4.91772 -1.63358,-4.68451 -3.35352,-8.11389 -0.82714,-1.64924 -1.91998,-3.45186 -2.42853,-4.00582 -1.28805,-1.40307 -4.41406,-2.7715 -6.89485,-3.01827 l -2.08965,-0.20785 1.43221,-0.99035 c 1.5468,-1.06957 5.31147,-2.35399 6.9124,-2.35835 1.72563,-0.005 4.25283,0.7809 5.71247,1.77575 1.63175,1.11217 3.92377,3.83335 3.77488,4.48172 -0.0559,0.24344 0.11427,0.44261 0.37817,0.44261 0.53171,0 3.78445,6.24176 3.78445,7.26208 0,0.15195 0.30609,0.92171 0.6802,1.71057 0.37412,0.78887 1.08633,2.44854 1.5827,3.68817 1.00279,2.50434 2.57055,5.33152 2.95544,5.32962 0.85183,-0.004 3.83204,-7.97894 5.40479,-14.46266 1.9193,-7.91232 5.01161,-18.44694 6.10967,-20.81389 2.30114,-4.96024 4.60601,-7.03734 8.12223,-7.31959 1.95377,-0.15683 2.44243,-0.0601 4.01261,0.79453 2.49546,1.35819 3.31044,2.35029 5.40102,6.57479 0.93741,1.89425 3.29625,9.1126 4.36446,13.35583 0.51289,2.03729 1.21262,4.57729 1.55498,5.64444 0.34236,1.06716 0.83543,2.65466 1.09573,3.52778 0.96371,3.23267 3.75139,8.2344 5.51689,9.89856 2.09506,1.9748 4.10606,3.2977 5.85136,3.84922 0.72761,0.22993 1.32292,0.49404 1.32292,0.58692 0,0.0929 -0.71641,0.48577 -1.59202,0.87309 -2.29705,1.01609 -6.48839,1.02714 -8.75823,0.0231 -3.42674,-1.51581 -6.17101,-4.45149 -8.36088,-8.94406 -0.59782,-1.22642 -1.23412,-2.50231 -1.41401,-2.8353 -0.17988,-0.333 -0.47718,-1.20612 -0.66066,-1.94028 -0.74987,-3.00045 -6.42415,-19.25706 -6.99617,-20.04376 -0.79895,-1.09881 -0.87818,-1.08476 -1.55823,0.27628 -1.1693,2.3402 -2.07427,5.18987 -3.61302,11.37709 -3.03871,12.21839 -6.36478,22.38234 -8.0081,24.47148 -0.36655,0.466 -0.66646,0.99153 -0.66646,1.16785 0,0.86017 -2.61454,3.05174 -4.28395,3.59089 -1.94625,0.62857 -2.53141,0.65417 -4.78366,0.20926 z m 49.82815,-13.29265 c -2.77991,-0.70614 -6.29714,-6.05076 -8.15323,-12.38927 -0.30389,-1.03778 -0.47868,-1.96073 -0.38841,-2.051 0.0903,-0.0903 1.5695,-0.22877 3.28719,-0.30779 8.47079,-0.38969 9.78292,-0.63406 14.05919,-2.61837 3.78653,-1.75706 9.09259,-6.79386 10.56941,-10.03304 3.78708,-8.30644 4.33485,-14.20262 2.08448,-22.4376404 -1.15336,-4.22063002 -3.6401,-8.21361 -6.73205,-10.80969 -1.12271,-0.94265 -2.12066,-1.8146 -2.21767,-1.93765 -0.3794,-0.48123 -4.30858,-2.4333296 -6.41876,-3.1889796 -2.16778,-0.77628 -2.64336,-0.79956 -18.71666,-0.91597 l -16.49236,-0.11945 V -0.68605142 10.798429 h -0.8256 c -1.53109,0 -5.09758,2.09614 -6.79456,3.99338 -1.65639,1.85186 -4.54446,7.43871 -5.41264,10.47051 -0.25002,0.87312 -0.58222,1.98437 -0.73823,2.46944 -0.39136,1.2169 -2.0765,7.30176 -3.12634,11.28889 -0.2052,0.7793 -0.33685,-11.27627 -0.35693,-32.6846104 l -0.0318,-33.9193396 1.55319,-0.12371 c 0.85426,-0.068 12.32395,-0.10028 25.4882,-0.0716 20.69377,0.045 24.2694,0.12953 26.40444,0.62402 3.9887,0.92382 7.58472,2.04932 7.58472,2.3739 0,0.16576 0.52886,0.30139 1.17524,0.30139 2.09331,0 10.76432,4.87704 10.22435,5.75072 -0.12186,0.19718 -0.0447,0.24734 0.17328,0.11263 0.60692,-0.3751 4.21691,3.0333 6.9953,6.60467 2.06429,2.6534496 4.63504,8.4775396 5.94174,13.4611396 1.7681,6.7433 1.74625,15.8657704 -0.0549,22.9305504 -2.11084,8.27937 -4.97852,13.41407 -10.75456,19.25647 -2.59968,2.62955 -8.78375,7.02548 -9.88326,7.02548 -0.27557,0 -0.68644,0.1854 -0.91304,0.412 -0.39593,0.39593 -0.78905,0.56749 -4.31522,1.88319 -3.68968,1.37672 -10.83412,2.28545 -13.21446,1.68081 z m 7.57002,-15.26489 c 0,-0.19403 -0.07,-0.35278 -0.15557,-0.35278 -0.0856,0 -0.25368,0.15875 -0.3736,0.35278 -0.11992,0.19403 -0.0499,0.35278 0.15557,0.35278 0.20548,0 0.3736,-0.15875 0.3736,-0.35278 z"
+       id="path1" /></g></svg>
+  );
+}

src/components/PlayerBar.tsx

@@ -2,17 +2,19 @@ import React, { useCallback, useMemo, useState } from 'react';
 import { createPortal } from 'react-dom';
 import {
   Play, Pause, SkipBack, SkipForward, Volume2, VolumeX, Music,
-  Square, Repeat, Repeat1, Maximize2, SlidersHorizontal, X, Heart, MicVocal
+  Square, Repeat, Repeat1, Maximize2, SlidersHorizontal, X, Heart, MicVocal, Cast
 } 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';
 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';
@@ -25,18 +27,46 @@ export default function PlayerBar() {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const [eqOpen, setEqOpen] = useState(false);
+  const [showVolPct, setShowVolPct] = useState(false);
   const showLyrics   = useLyricsStore(s => s.showLyrics);
   const activeTab    = useLyricsStore(s => s.activeTab);
   const {
-    currentTrack, isPlaying, currentTime, volume,
+    currentTrack, currentRadio, isPlaying, currentTime, volume,
     togglePlay, next, previous, setVolume,
     stop, toggleRepeat, repeatMode, toggleFullscreen,
     lastfmLoved, toggleLastfmLove,
     isQueueVisible, toggleQueue,
+    starredOverrides, setStarredOverride,
   } = usePlayerStore();
   const { lastfmSessionKey } = useAuthStore();
 
+  const isRadio = !!currentRadio;
+
+  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;
+
+  // Cover art: prefer radio station art, fall back to track art.
+  // Note: getCoverArt.view needs ra-{id}, not the raw coverArt filename Navidrome returns.
+  const radioCoverSrc = useMemo(
+    () => currentRadio?.coverArt ? buildCoverArtUrl(`ra-${currentRadio.id}`, 128) : '',
+    [currentRadio?.coverArt, currentRadio?.id]
+  );
+  const radioCoverKey = currentRadio?.coverArt ? coverArtCacheKey(`ra-${currentRadio.id}`, 128) : '';
   const coverSrc = useMemo(() => currentTrack?.coverArt ? buildCoverArtUrl(currentTrack.coverArt, 128) : '', [currentTrack?.coverArt]);
   const coverKey = currentTrack?.coverArt ? coverArtCacheKey(currentTrack.coverArt, 128) : '';
 
@@ -44,6 +74,12 @@ export default function PlayerBar() {
     setVolume(parseFloat(e.target.value));
   }, [setVolume]);
 
+  const handleVolumeWheel = useCallback((e: React.WheelEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    const delta = e.deltaY > 0 ? -0.05 : 0.05;
+    setVolume(Math.max(0, Math.min(1, volume + delta)));
+  }, [volume, setVolume]);
+
   const volumeStyle = {
     background: `linear-gradient(to right, var(--volume-accent, var(--accent)) ${volume * 100}%, var(--ctp-surface2) ${volume * 100}%)`,
   };
@@ -54,11 +90,24 @@ export default function PlayerBar() {
       {/* Track Info */}
       <div className="player-track-info">
         <div
-          className={`player-album-art-wrap ${currentTrack ? 'clickable' : ''}`}
-          onClick={() => currentTrack && toggleFullscreen()}
-          data-tooltip={currentTrack ? t('player.openFullscreen') : undefined}
+          className={`player-album-art-wrap ${currentTrack && !isRadio ? 'clickable' : ''}`}
+          onClick={() => !isRadio && currentTrack && toggleFullscreen()}
+          data-tooltip={!isRadio && currentTrack ? t('player.openFullscreen') : undefined}
         >
-          {currentTrack?.coverArt ? (
+          {isRadio ? (
+            currentRadio?.coverArt ? (
+              <CachedImage
+                className="player-album-art"
+                src={radioCoverSrc}
+                cacheKey={radioCoverKey}
+                alt={currentRadio.name}
+              />
+            ) : (
+              <div className="player-album-art-placeholder">
+                <Cast size={20} />
+              </div>
+            )
+          ) : currentTrack?.coverArt ? (
             <CachedImage
               className="player-album-art"
               src={coverSrc}
@@ -70,29 +119,38 @@ export default function PlayerBar() {
               <Music size={22} />
             </div>
           )}
-          {currentTrack && (
+          {currentTrack && !isRadio && (
             <div className="player-art-expand-hint" aria-hidden="true">
               <Maximize2 size={16} />
             </div>
           )}
         </div>
         <div className="player-track-meta">
-          <div
+          <MarqueeText
+            text={isRadio ? (currentRadio?.name ?? '—') : (currentTrack?.title ?? t('player.noTitle'))}
             className="player-track-name"
-            style={{ cursor: currentTrack?.albumId ? 'pointer' : 'default' }}
-            onClick={() => currentTrack?.albumId && navigate(`/album/${currentTrack.albumId}`)}
-          >
-            {currentTrack?.title ?? t('player.noTitle')}
-          </div>
-          <div
+            style={{ cursor: !isRadio && currentTrack?.albumId ? 'pointer' : 'default' }}
+            onClick={() => !isRadio && currentTrack?.albumId && navigate(`/album/${currentTrack.albumId}`)}
+          />
+          <MarqueeText
+            text={isRadio ? t('radio.liveStream') : (currentTrack?.artist ?? '—')}
             className="player-track-artist"
-            style={{ cursor: currentTrack?.artistId ? 'pointer' : 'default' }}
-            onClick={() => currentTrack?.artistId && navigate(`/artist/${currentTrack.artistId}`)}
-          >
-            {currentTrack?.artist ?? '—'}
-          </div>
+            style={{ cursor: !isRadio && currentTrack?.artistId ? 'pointer' : 'default' }}
+            onClick={() => !isRadio && currentTrack?.artistId && navigate(`/artist/${currentTrack.artistId}`)}
+          />
         </div>
-        {currentTrack && lastfmSessionKey && (
+        {currentTrack && !isRadio && (
+          <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 && !isRadio && lastfmSessionKey && (
           <button
             className="player-btn player-btn-sm player-love-btn"
             onClick={toggleLastfmLove}
@@ -100,7 +158,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>
@@ -110,7 +168,7 @@ export default function PlayerBar() {
         <button className="player-btn player-btn-sm" onClick={stop} aria-label={t('player.stop')} data-tooltip={t('player.stop')}>
           <Square size={14} fill="currentColor" />
         </button>
-        <button className="player-btn" onClick={previous} aria-label={t('player.prev')} data-tooltip={t('player.prev')}>
+        <button className="player-btn" onClick={() => previous()} aria-label={t('player.prev')} data-tooltip={t('player.prev')} disabled={isRadio} style={isRadio ? { opacity: 0.3, pointerEvents: 'none' } : undefined}>
           <SkipBack size={19} />
         </button>
         <button
@@ -121,7 +179,7 @@ export default function PlayerBar() {
         >
           {isPlaying ? <Pause size={22} fill="currentColor" /> : <Play size={22} fill="currentColor" />}
         </button>
-        <button className="player-btn" onClick={next} aria-label={t('player.next')} data-tooltip={t('player.next')}>
+        <button className="player-btn" onClick={() => next()} aria-label={t('player.next')} data-tooltip={t('player.next')} disabled={isRadio} style={isRadio ? { opacity: 0.3, pointerEvents: 'none' } : undefined}>
           <SkipForward size={19} />
         </button>
         <button
@@ -135,13 +193,25 @@ export default function PlayerBar() {
         </button>
       </div>
 
-      {/* Waveform Seekbar */}
+      {/* Waveform Seekbar / Radio live bar */}
       <div className="player-waveform-section">
-        <span className="player-time">{formatTime(currentTime)}</span>
-        <div className="player-waveform-wrap">
-          <WaveformSeek trackId={currentTrack?.id} />
-        </div>
-        <span className="player-time">{formatTime(duration)}</span>
+        {isRadio ? (
+          <>
+            <span className="player-time">{formatTime(currentTime)}</span>
+            <div className="player-waveform-wrap" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+              <span className="radio-live-badge">{t('radio.live')}</span>
+            </div>
+            <span className="player-time" style={{ opacity: 0 }}>0:00</span>
+          </>
+        ) : (
+          <>
+            <span className="player-time">{formatTime(currentTime)}</span>
+            <div className="player-waveform-wrap">
+              <WaveformSeek trackId={currentTrack?.id} />
+            </div>
+            <span className="player-time">{formatTime(duration)}</span>
+          </>
+        )}
       </div>
 
       {/* Lyrics Button */}
@@ -174,18 +244,27 @@ export default function PlayerBar() {
         >
           {volume === 0 ? <VolumeX size={16} /> : <Volume2 size={16} />}
         </button>
-        <input
-          type="range"
-          id="player-volume"
-          min={0}
-          max={1}
-          step={0.01}
-          value={volume}
-          onChange={handleVolume}
-          style={volumeStyle}
-          aria-label={t('player.volume')}
-          className="player-volume-slider"
-        />
+        <div className="player-volume-slider-wrap" onWheel={handleVolumeWheel}>
+          {showVolPct && (
+            <span className="player-volume-pct" style={{ left: `${volume * 100}%` }}>
+              {Math.round(volume * 100)}%
+            </span>
+          )}
+          <input
+            type="range"
+            id="player-volume"
+            min={0}
+            max={1}
+            step={0.01}
+            value={volume}
+            onChange={handleVolume}
+            style={volumeStyle}
+            aria-label={t('player.volume')}
+            className="player-volume-slider"
+            onMouseEnter={() => setShowVolPct(true)}
+            onMouseLeave={() => setShowVolPct(false)}
+          />
+        </div>
       </div>
 
       {/* EQ Popup — rendered via portal to avoid backdrop-filter containing-block issue */}

src/components/QueuePanel.tsx

@@ -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, ArrowUpToLine, Radio } 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,14 +177,17 @@ 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);
   const crossfadeSecs = useAuthStore(s => s.crossfadeSecs);
   const gaplessEnabled = useAuthStore(s => s.gaplessEnabled);
+  const infiniteQueueEnabled = useAuthStore(s => s.infiniteQueueEnabled);
   const setCrossfadeEnabled = useAuthStore(s => s.setCrossfadeEnabled);
   const setCrossfadeSecs = useAuthStore(s => s.setCrossfadeSecs);
   const setGaplessEnabled = useAuthStore(s => s.setGaplessEnabled);
+  const setInfiniteQueueEnabled = useAuthStore(s => s.setInfiniteQueueEnabled);
 
   const activeTab  = useLyricsStore(s => s.activeTab);
   const setTab     = useLyricsStore(s => s.setTab);
@@ -162,22 +210,91 @@ 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, payload: psyPayload } = useDragDrop();
+  const isRadioDrag = isPsyDragging && !!psyPayload && (() => {
+    try { return JSON.parse(psyPayload.data).type === 'radio'; } catch { return false; }
+  })();
+
+  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; }
+
+      // Radio streams are not tracks — reject silently
+      if (parsedData.type === 'radio') 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 +303,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,
-      }));
-      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 && !isRadioDrag ? ' queue-drop-active' : ''}`}
+      onMouseMove={e => {
+        if (!isPsyDragging || isRadioDrag || !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,40 +366,58 @@ 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">
-          <div className="queue-current-cover">
-            {currentTrack.coverArt ? (
-              <img src={buildCoverArtUrl(currentTrack.coverArt, 128)} alt="" loading="eager" />
-            ) : (
-              <div className="fallback"><Music size={32} /></div>
-            )}
-            {(currentTrack.bitRate || currentTrack.suffix) && (
-              <div className="queue-current-tech">
-                {currentTrack.bitRate && currentTrack.suffix
-                  ? `${currentTrack.bitRate} · ${currentTrack.suffix.toUpperCase()}`
-                  : currentTrack.suffix?.toUpperCase() ?? ''}
-              </div>
-            )}
-          </div>
-          <div className="queue-current-info">
-            <h3 className="truncate">{currentTrack.title}</h3>
-            <div
-              className="queue-current-sub truncate"
-              style={{ cursor: currentTrack.artistId ? 'pointer' : 'default' }}
-              onClick={() => currentTrack.artistId && navigate(`/artist/${currentTrack.artistId}`)}
-            >{currentTrack.artist}</div>
-            <div
-              className="queue-current-sub truncate"
-              style={{ cursor: currentTrack.albumId ? 'pointer' : 'default' }}
-              onClick={() => currentTrack.albumId && navigate(`/album/${currentTrack.albumId}`)}
-            >{currentTrack.album}</div>
-            {currentTrack.year && (
-              <div className="queue-current-sub">{currentTrack.year}</div>
-            )}
-            {renderStars(currentTrack.userRating)}
+          {(currentTrack.suffix || currentTrack.bitRate || currentTrack.samplingRate || currentTrack.bitDepth) && (
+            <div className="queue-current-tech">
+              {[
+                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={currentCoverSrc} alt="" loading="eager" />
+              ) : (
+                <div className="fallback"><Music size={32} /></div>
+              )}
+            </div>
+            <div className="queue-current-info">
+              <h3 className="truncate">{currentTrack.title}</h3>
+              <div
+                className="queue-current-sub truncate"
+                style={{ cursor: currentTrack.artistId ? 'pointer' : 'default' }}
+                onClick={() => currentTrack.artistId && navigate(`/artist/${currentTrack.artistId}`)}
+              >{currentTrack.artist}</div>
+              <div
+                className="queue-current-sub truncate"
+                style={{ cursor: currentTrack.albumId ? 'pointer' : 'default' }}
+                onClick={() => currentTrack.albumId && navigate(`/album/${currentTrack.albumId}`)}
+              >{currentTrack.album}</div>
+              {currentTrack.year && (
+                <div className="queue-current-sub">{currentTrack.year}</div>
+              )}
+              {renderStars(currentTrack.userRating)}
+            </div>
           </div>
         </div>
       )}
@@ -358,8 +427,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} />
@@ -370,7 +445,7 @@ export default function QueuePanel() {
         <div className="queue-toolbar-sep" />
         <button
           className={`queue-round-btn${gaplessEnabled ? ' active' : ''}`}
-          onClick={() => setGaplessEnabled(!gaplessEnabled)}
+          onClick={() => { setCrossfadeEnabled(false); setShowCrossfadePopover(false); setGaplessEnabled(!gaplessEnabled); }}
           data-tooltip={t('queue.gapless')}
           aria-label={t('queue.gapless')}
         >
@@ -385,6 +460,7 @@ export default function QueuePanel() {
                 setCrossfadeEnabled(false);
                 setShowCrossfadePopover(false);
               } else {
+                setGaplessEnabled(false);
                 setCrossfadeEnabled(true);
                 setShowCrossfadePopover(true);
               }
@@ -399,26 +475,34 @@ export default function QueuePanel() {
               <div className="crossfade-popover-label">
                 <Waves size={11} />
                 {t('queue.crossfade')}
-                <span className="crossfade-popover-value">{crossfadeSecs}s</span>
+                <span className="crossfade-popover-value">{crossfadeSecs.toFixed(1)} s</span>
               </div>
               <input
                 type="range"
-                min={1}
+                min={0.1}
                 max={10}
-                step={0.5}
+                step={0.1}
                 value={crossfadeSecs}
                 onChange={e => {
-                  setCrossfadeSecs(Number(e.target.value));
+                  setCrossfadeSecs(parseFloat(e.target.value));
                   setCrossfadeEnabled(true);
                 }}
                 className="crossfade-popover-slider"
               />
               <div className="crossfade-popover-range">
-                <span>1s</span><span>10s</span>
+                <span>0.1s</span><span>10s</span>
               </div>
             </div>
           )}
         </div>
+        <button
+          className={`queue-round-btn${infiniteQueueEnabled ? ' active' : ''}`}
+          onClick={() => setInfiniteQueueEnabled(!infiniteQueueEnabled)}
+          data-tooltip={t('queue.infiniteQueue')}
+          aria-label={t('queue.infiniteQueue')}
+        >
+          <ArrowUpToLine size={13} />
+        </button>
       </div>
 
       {currentTrack && queue.length > 0 && <div className="queue-divider"><span style={{ fontSize: '12px', fontWeight: 600, color: 'var(--text-muted)' }}>{t('queue.nextTracks')}</span></div>}
@@ -431,15 +515,14 @@ 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
+            const isFirstAutoAdded = track.autoAdded && (idx === 0 || !queue[idx - 1].autoAdded);
+            const isFirstRadioAdded = track.radioAdded && (idx === 0 || !queue[idx - 1].radioAdded);
+
             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' };
@@ -447,8 +530,18 @@ export default function QueuePanel() {
             }
 
             return (
+              <React.Fragment key={`${track.id}-${idx}`}>
+              {isFirstRadioAdded && (
+                <div className="queue-divider" style={{ margin: '2px 0' }}>
+                  <span style={{ fontSize: '11px', fontWeight: 500, color: 'var(--text-muted)' }}>{t('queue.radioAdded')}</span>
+                </div>
+              )}
+              {isFirstAutoAdded && (
+                <div className="queue-divider" style={{ margin: '2px 0' }}>
+                  <span style={{ fontSize: '11px', fontWeight: 500, color: 'var(--text-muted)' }}>{t('queue.autoAdded')}</span>
+                </div>
+              )}
               <div
-                key={`${track.id}-${idx}`}
                 data-queue-idx={idx}
                 className={`queue-item ${isPlaying ? 'active' : ''} ${contextMenu.isOpen && contextMenu.type === 'queue-item' && contextMenu.queueIndex === idx ? 'context-active' : ''}`}
                 onClick={() => playTrack(track, queue)}
@@ -456,11 +549,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">
@@ -474,6 +582,7 @@ export default function QueuePanel() {
                   {formatTime(track.duration)}
                 </div>
               </div>
+              </React.Fragment>
             );
           })
         )}
@@ -502,39 +611,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,
-              }));
+              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>

src/components/Sidebar.tsx

@@ -1,69 +1,38 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { usePlayerStore } from '../store/playerStore';
-import { open } from '@tauri-apps/plugin-shell';
-import { version as appVersion } from '../../package.json';
+import { useOfflineStore } from '../store/offlineStore';
+import { useAuthStore } from '../store/authStore';
+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, ListMusic,
-  PanelLeftClose, PanelLeft, HelpCircle, Dices, ArrowUpCircle, AudioLines
+  Disc3, Users, Music4, Radio, Settings, Heart, BarChart3, Shuffle,
+  PanelLeftClose, PanelLeft, HelpCircle, Dices, AudioLines, HardDriveDownload, Tags, ListMusic, Cast
 } from 'lucide-react';
+import PsysonicLogo from './PsysonicLogo';
+import PSmallLogo from './PSmallLogo';
 
-const PsysonicLogo = () => (
-  <img src="/logo-psysonic.png" alt="Psysonic Logo" width="36" height="36" />
-);
+// 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' },
+  radio:        { icon: Cast,       labelKey: 'sidebar.radio',         to: '/radio',         section: 'library' }, // TODO: unhide when radio is ready
+  statistics:   { icon: BarChart3,  labelKey: 'sidebar.statistics',   to: '/statistics',    section: 'system'  },
+  help:         { icon: HelpCircle, labelKey: 'sidebar.help',         to: '/help',          section: 'system'  },
+};
 
-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: ListMusic, labelKey: 'sidebar.playlists', to: '/playlists' },
-  { icon: Shuffle, labelKey: 'sidebar.randomMix', to: '/random-mix' },
-  { icon: Heart, labelKey: 'sidebar.favorites', to: '/favorites' },
-];
-
-function isNewer(latest: string, current: string): boolean {
-  const parse = (v: string) => v.replace(/^[^0-9]*/, '').split('.').map(Number);
-  const [lMaj, lMin, lPat] = parse(latest);
-  const [cMaj, cMin, cPat] = parse(current);
-  if (lMaj !== cMaj) return lMaj > cMaj;
-  if (lMin !== cMin) return lMin > cMin;
-  return lPat > cPat;
-}
-
-function UpdateToast({ isCollapsed, latestVersion }: { isCollapsed: boolean; latestVersion: string }) {
-  const { t } = useTranslation();
-
-  if (isCollapsed) {
-    return (
-      <div className="update-toast-icon" style={{ marginTop: 'auto' }} data-tooltip={`${t('sidebar.updateAvailable')}: ${latestVersion}`} data-tooltip-pos="bottom">
-        <ArrowUpCircle size={20} />
-      </div>
-    );
-  }
-
-  return (
-    <div className="update-toast">
-      <div className="update-toast-header">
-        <ArrowUpCircle size={14} />
-        <span className="update-toast-label">{t('sidebar.updateAvailable')}</span>
-      </div>
-      <div className="update-toast-version">{t('sidebar.updateReady', { version: latestVersion })}</div>
-      <button
-        className="update-toast-link"
-        onClick={() => open('https://github.com/Psychotoxical/psysonic/releases')}
-      >
-        {t('sidebar.updateLink')}
-      </button>
-    </div>
-  );
-}
 
 export default function Sidebar({
   isCollapsed = false,
-  toggleCollapse
+  toggleCollapse,
 }: {
   isCollapsed?: boolean;
   toggleCollapse?: () => void;
@@ -71,50 +40,42 @@ export default function Sidebar({
   const { t } = useTranslation();
   const isPlaying   = usePlayerStore(s => s.isPlaying);
   const currentTrack = usePlayerStore(s => s.currentTrack);
-  const [latestVersion, setLatestVersion] = useState<string | null>(null);
+  const offlineJobs = useOfflineStore(s => s.jobs);
+  const activeJobs = offlineJobs.filter(j => j.status === 'queued' || j.status === 'downloading');
+  const offlineAlbums = useOfflineStore(s => s.albums);
+  const serverId = useAuthStore(s => s.activeServerId ?? '');
+  const hasOfflineContent = Object.values(offlineAlbums).some(a => a.serverId === serverId);
+  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' : ''}`}>
       <div className="sidebar-brand">
-        <button 
-          className="collapse-btn"
-          onClick={toggleCollapse}
-          data-tooltip={isCollapsed ? t('sidebar.expand') : t('sidebar.collapse')}
-          data-tooltip-pos="bottom"
-          style={{ padding: 0 }}
-        >
-          {isCollapsed ? <PanelLeft size={24} /> : <PanelLeftClose size={24} />}
-        </button>
-        {!isCollapsed && <PsysonicLogo />}
-        {!isCollapsed && <span className="brand-name">Psysonic</span>}
+        {isCollapsed
+          ? <PSmallLogo style={{ height: '32px', width: 'auto' }} />
+          : <PsysonicLogo style={{ height: '28px', width: 'auto' }} />
+        }
       </div>
 
+      <button
+        className="collapse-btn"
+        onClick={toggleCollapse}
+        data-tooltip={isCollapsed ? t('sidebar.expand') : t('sidebar.collapse')}
+        data-tooltip-pos="right"
+      >
+        {isCollapsed ? <PanelLeft size={14} /> : <PanelLeftClose size={14} />}
+      </button>
+
       <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}
@@ -128,7 +89,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' : ''}`}
@@ -143,26 +104,31 @@ export default function Sidebar({
           {!isCollapsed && <span>{t('sidebar.nowPlaying')}</span>}
         </NavLink>
 
-        {!isCollapsed && <span className="nav-section-label">{t('sidebar.system')}</span>}
-        {latestVersion && <UpdateToast isCollapsed={isCollapsed} latestVersion={latestVersion} />}
-        <NavLink
-          to="/statistics"
-          className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}
-          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>
+        {hasOfflineContent && (
+          <NavLink
+            to="/offline"
+            className={({ isActive }) => `nav-link nav-link-offline ${isActive ? 'active' : ''}`}
+            data-tooltip={isCollapsed ? t('sidebar.offlineLibrary') : undefined}
+            data-tooltip-pos="bottom"
+          >
+            <HardDriveDownload size={isCollapsed ? 22 : 18} />
+            {!isCollapsed && <span>{t('sidebar.offlineLibrary')}</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' : ''}`}
@@ -172,6 +138,19 @@ export default function Sidebar({
           <Settings size={isCollapsed ? 22 : 18} />
           {!isCollapsed && <span>{t('sidebar.settings')}</span>}
         </NavLink>
+
+        {activeJobs.length > 0 && (
+          <div
+            className={`sidebar-offline-queue ${isCollapsed ? 'sidebar-offline-queue--collapsed' : ''}`}
+            data-tooltip={isCollapsed ? t('sidebar.downloadingTracks', { n: activeJobs.length }) : undefined}
+            data-tooltip-pos="right"
+          >
+            <HardDriveDownload size={isCollapsed ? 18 : 14} className="spin-slow" />
+            {!isCollapsed && (
+              <span>{t('sidebar.downloadingTracks', { n: activeJobs.length })}</span>
+            )}
+          </div>
+        )}
       </nav>
     </aside>
   );

src/components/SongInfoModal.tsx

@@ -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
+  );
+}

src/components/ThemePicker.tsx

@@ -13,24 +13,29 @@ const THEME_GROUPS: { group: string; themes: ThemeDef[] }[] = [
   {
     group: 'Games',
     themes: [
-      { id: 'ascalon',           label: 'Ascalon',           bg: '#1c1a17', card: '#0f0d0b', accent: '#d4af37' },
-      { id: 'azerothian-gold',   label: 'Azerothian Gold',   bg: '#1a1a1a', card: '#0a0a0a', accent: '#c19e67' },
+      { id: 'gw1',               label: 'GW1',               bg: '#0e0b08', card: '#1a1208', accent: '#c8960c' },
       { id: 'grand-theft-audio', label: 'Grand Theft Audio', bg: '#141414', card: '#0a0a0a', accent: '#57b05a' },
       { id: 'lambda-17',         label: 'Lambda 17',         bg: '#14171a', card: '#0a0b0c', accent: '#ff9d00' },
-      { id: 'nightcity-2077',    label: 'NightCity 2077',    bg: '#050505', card: '#000000', accent: '#FCEE0A' },
+      { id: 'nightcity-2077',    label: 'NightCity 2077',    bg: '#06060f', card: '#0a0a1a', accent: '#FCEE0A' },
+      { id: 'tetrastack',        label: 'TetraStack',        bg: '#060614', card: '#0c0c20', accent: '#00f0f0' },
       { id: 'v-tactical',        label: 'V-Tactical',        bg: '#161c22', card: '#090c0e', accent: '#ff8a00' },
+      { id: 'horde',             label: 'Horde',             bg: '#1a0500', card: '#2e0a02', accent: '#cc2200' },
+      { id: 'alliance',          label: 'Alliance',          bg: '#06101e', card: '#0c1e34', accent: '#3388cc' },
     ],
   },
   {
     group: 'Movies',
     themes: [
       { id: 'blade',                label: 'Blade',                bg: '#121212', card: '#050505', accent: '#b30000' },
-      { id: 'imperial-sith',        label: 'Imperial Sith',        bg: '#0f0f11', card: '#050505', accent: '#e60000' },
-      { id: 'middle-earth',         label: 'Middle Earth',         bg: '#f4e4bc', card: '#2a1d15', accent: '#d4af37' },
-      { id: 'morpheus',             label: 'Morpheus',             bg: '#0a0a0a', card: '#000000', accent: '#00ff41' },
-      { id: 'order-of-the-phoenix', label: 'Order of the Phoenix', bg: '#181818', card: '#0a0a0a', accent: '#e63900' },
-      { id: 'pandora',              label: 'Pandora',              bg: '#0c1b22', card: '#142b35', accent: '#00f2ff' },
+      { id: 'dune',                 label: 'Dune',                 bg: '#1c1408', card: '#0e0c1a', accent: '#c8780a' },
+      { id: 'hill-valley-85',       label: 'Hill Valley 85',       bg: '#0d0b18', card: '#141120', accent: '#ff8c00' },
+      { id: 'middle-earth',         label: 'Middle Earth',         bg: '#f0e0b0', card: '#241a0e', accent: '#d4a820' },
+      { id: 'morpheus',             label: 'Morpheus',             bg: '#050905', card: '#0a120a', accent: '#00ff41' },
+      { id: 'spider-tech',          label: 'Spider-Tech',          bg: '#0e0c18', card: '#181428', accent: '#E62429' },
       { id: 'stark-hud',            label: 'Stark HUD',            bg: '#0b0f15', card: '#05070a', accent: '#00f2ff' },
+      { id: 't-800',                label: 'T-800',                bg: '#140e0e', card: '#1a0a0a', accent: '#ff2000' },
+      { id: 'barb-and-ken',         label: 'Barb & Ken',           bg: '#1a000f', card: '#2e0019', accent: '#FF1B8D' },
+      { id: 'toy-tale',             label: 'Toy Tale',             bg: '#1a1208', card: '#2a1c10', accent: '#FFD600' },
     ],
   },
   {
@@ -55,11 +60,19 @@ const THEME_GROUPS: { group: string; themes: ThemeDef[] }[] = [
   {
     group: 'Operating Systems',
     themes: [
-      { id: 'cupertino-dark',  label: 'Cupertino Dark',  bg: '#1e1e1f', card: '#2d2d2f', accent: '#007aff' },
+      { id: 'ubuntu-ambiance', label: 'Ubuntu',          bg: '#f4efea', card: '#3d1f3d', accent: '#e95420' },
+      { id: 'aqua-quartz',     label: 'Aqua Quartz',     bg: '#f6f6f6', card: '#ffffff',  accent: '#3876f7' },
       { id: 'cupertino-light', label: 'Cupertino Light', bg: '#ffffff', card: '#f2f2f7', accent: '#0071e3' },
-      { id: 'aero-glass',      label: 'W7',              bg: '#cddbed', card: '#1d4268', accent: '#1878e8' },
-      { id: 'w98',             label: 'W98',             bg: '#008080', card: '#c0c0c0', accent: '#000080' },
-      { id: 'luna-teal',       label: 'WXP',             bg: '#ece9d8', card: '#0055e5', accent: '#3c9d29' },
+      { id: 'cupertino-dark',  label: 'Cupertino Dark',  bg: '#1e1e1f', card: '#2d2d2f', accent: '#007aff' },
+      { id: 'dos',             label: 'DOS',             bg: '#0000AA', card: '#000080', accent: '#FFFF55' },
+      { id: 'unix',            label: 'Unix',            bg: '#000000', card: '#111111', accent: '#22C55E' },
+      { id: 'w3-1',            label: 'W3.1',            bg: '#c0c0c0', card: '#ffffff',  accent: '#000080' },
+      { id: 'w98',             label: 'W98',             bg: '#008080', card: '#d4d0c8', accent: '#000080' },
+      { id: 'luna-teal',       label: 'WXP',             bg: '#ece9d8', card: '#1248b8', accent: '#3c9d29' },
+      { id: 'wista',           label: 'Wista',           bg: '#eef3fc', card: '#0e1e3e', accent: '#1565c8' },
+      { id: 'aero-glass',      label: 'W7',              bg: '#b8cfe8', card: '#05080f', accent: '#1878e8' },
+      { id: 'w10',             label: 'W10',             bg: '#f3f3f3', card: '#ffffff',  accent: '#0078d4' },
+      { id: 'w11',             label: 'W11',             bg: '#202020', card: '#2c2c2c', accent: '#0078d4' },
     ],
   },
   {
@@ -73,23 +86,41 @@ const THEME_GROUPS: { group: string; themes: ThemeDef[] }[] = [
     ],
   },
   {
-    group: 'Psysonic Themes — Mediaplayer',
+    group: 'Mediaplayer',
     themes: [
-      { id: 'cobalt-media',    label: 'Cobalt Media',    bg: '#3a62a5', card: '#000000', accent: '#45ff00' },
+      { id: 'winmedplayer',    label: 'WinMedPlayer',    bg: '#3a62a5', card: '#000000', accent: '#45ff00' },
       { id: 'cupertino-beats', label: 'Cupertino Beats', bg: '#1c1c1e', card: '#2c2c2e', accent: '#fa243c' },
       { id: 'dzr0',            label: 'DZR',             bg: '#FFFFFF', card: '#F5F5F7', accent: '#A238FF' },
-      { id: 'navy-jukebox',    label: 'Navy Jukebox',    bg: '#d4d8db', card: '#001358', accent: '#0070a0' },
-      { id: 'onyx-cinema',     label: 'Onyx Cinema',     bg: '#141414', card: '#000000', accent: '#00aaff' },
+      { id: 'muma-jukebox',    label: 'MuMa Jukebox',    bg: '#d4d8db', card: '#001358', accent: '#0070a0' },
+      { id: 'p-dvd',           label: 'P-DVD',           bg: '#141414', card: '#000000', accent: '#00aaff' },
       { id: 'spotless',        label: 'Spotless',        bg: '#121212', card: '#181818', accent: '#1ED760' },
-      { id: 'wnamp',           label: 'WnAmp',           bg: '#2b2b3a', card: '#000000', accent: '#00ff00' },
+      { id: 'jayfin',          label: 'Jayfin',          bg: '#141414', card: '#1e1e1e', accent: '#AA5CC3' },
+      { id: 'wnamp',           label: 'WnAmp',           bg: '#2b2b3a', card: '#000000', accent: '#d4cc46' },
     ],
   },
   {
     group: 'Series',
     themes: [
-      { id: 'ice-and-fire', label: 'A Theme of Ice and Fire', bg: '#121820', card: '#05070a', accent: '#70a1ff' },
+      { id: 'ice-and-fire', label: 'A Theme of Ice and Fire', bg: '#100c08', card: '#090c10', accent: '#c41e1e' },
       { id: 'doh-matic',    label: "D'oh-matic",              bg: '#FFFDF0', card: '#FFD90F', accent: '#1F75FE' },
-      { id: 'heisenberg',   label: 'Heisenberg',              bg: '#1a1d1a', card: '#0a0c0a', accent: '#3fe0ff' },
+      { 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' },
+    ],
+  },
+  {
+    group: 'Social Media',
+    themes: [
+      { id: 'insta',    label: 'Insta',    bg: '#121212', card: '#000000', accent: '#E1306C' },
+      { id: 'readit',   label: 'ReadIt',   bg: '#030303', card: '#1A1A1B', accent: '#FF4500' },
+      { id: 'the-book', label: 'The Book', bg: '#F0F2F5', card: '#FFFFFF',  accent: '#1877F2' },
     ],
   },
 ];

src/components/WaveformSeek.tsx

@@ -1,6 +1,11 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { usePlayerStore } from '../store/playerStore';
 
+function fmt(s: number): string {
+  if (!s || isNaN(s)) return '0:00';
+  return `${Math.floor(s / 60)}:${Math.floor(s % 60).toString().padStart(2, '0')}`;
+}
+
 const BAR_COUNT = 500;
 
 function hashStr(str: string): number {
@@ -59,9 +64,9 @@ function drawWaveform(
   ctx.clearRect(0, 0, w, h);
 
   const style = getComputedStyle(document.documentElement);
-  const colorAccent   = style.getPropertyValue('--accent').trim()       || '#cba6f7';
-  const colorBuffered = style.getPropertyValue('--ctp-overlay0').trim() || '#6c7086';
-  const colorUnplayed = style.getPropertyValue('--ctp-surface1').trim() || '#313244';
+  const colorAccent   = style.getPropertyValue('--waveform-played').trim()   || style.getPropertyValue('--accent').trim()       || '#cba6f7';
+  const colorBuffered = style.getPropertyValue('--waveform-buffered').trim() || style.getPropertyValue('--ctp-overlay0').trim() || '#6c7086';
+  const colorUnplayed = style.getPropertyValue('--waveform-unplayed').trim() || style.getPropertyValue('--ctp-surface1').trim() || '#313244';
 
   if (!heights) {
     ctx.globalAlpha = 0.3;
@@ -125,9 +130,12 @@ export default function WaveformSeek({ trackId }: Props) {
   const bufferedRef = useRef(0);
   const isDragging  = useRef(false);
 
+  const [hoverPct, setHoverPct] = useState<number | null>(null);
+
   const progress = usePlayerStore(s => s.progress);
   const buffered = usePlayerStore(s => s.buffered);
   const seek     = usePlayerStore(s => s.seek);
+  const duration = usePlayerStore(s => s.currentTrack?.duration ?? 0);
 
   progressRef.current = progress;
   bufferedRef.current = buffered;
@@ -175,14 +183,30 @@ export default function WaveformSeek({ trackId }: Props) {
   }, []);
 
   return (
-    <canvas
-      ref={canvasRef}
-      style={{ width: '100%', height: '24px', cursor: trackId ? 'pointer' : 'default', display: 'block' }}
-      onMouseDown={e => {
-        isDragging.current = true;
-        const rect = e.currentTarget.getBoundingClientRect();
-        seekRef.current(Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width)));
-      }}
-    />
+    <div style={{ position: 'relative', width: '100%' }}>
+      {hoverPct !== null && duration > 0 && (
+        <span
+          className="player-volume-pct"
+          style={{ left: `${hoverPct * 100}%` }}
+        >
+          {fmt(hoverPct * duration)}
+        </span>
+      )}
+      <canvas
+        ref={canvasRef}
+        style={{ width: '100%', height: '24px', cursor: trackId ? 'pointer' : 'default', display: 'block' }}
+        onMouseDown={e => {
+          isDragging.current = true;
+          const rect = e.currentTarget.getBoundingClientRect();
+          seekRef.current(Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width)));
+        }}
+        onMouseMove={e => {
+          if (!trackId) return;
+          const rect = e.currentTarget.getBoundingClientRect();
+          setHoverPct(Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width)));
+        }}
+        onMouseLeave={() => setHoverPct(null)}
+      />
+    </div>
   );
 }

src/contexts/DragDropContext.tsx

@@ -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 };
+}

src/pages/AdvancedSearch.tsx

@@ -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: 240, flex: '1 1 240px', maxWidth: 360 }}>
+                <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: 96 }}
+              />
+              <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: 96 }}
+              />
+            </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: '60px minmax(150px, 1fr) minmax(80px, 1fr) minmax(80px, 1fr) 90px 65px' }}>
+                  <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: '60px minmax(150px, 1fr) minmax(80px, 1fr) minmax(80px, 1fr) 90px 65px' }}
+                      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${song.artistId ? ' track-artist-link' : ''}`}
+                          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>
+  );
+}

src/pages/AlbumDetail.tsx

@@ -1,9 +1,11 @@
-import React, { useEffect, useState } 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';
 import { writeFile } from '@tauri-apps/plugin-fs';
 import { join } from '@tauri-apps/api/path';
 import AlbumCard from '../components/AlbumCard';
@@ -30,6 +32,7 @@ export default function AlbumDetail() {
   const enqueue = usePlayerStore(s => s.enqueue);
   const openContextMenu = usePlayerStore(s => s.openContextMenu);
   const starredOverrides = usePlayerStore(s => s.starredOverrides);
+  const setStarredOverride = usePlayerStore(s => s.setStarredOverride);
   const currentTrack = usePlayerStore(s => s.currentTrack);
   const isPlaying = usePlayerStore(s => s.isPlaying);
 
@@ -42,7 +45,30 @@ export default function AlbumDetail() {
   const [downloadProgress, setDownloadProgress] = useState<number | null>(null);
   const [isStarred, setIsStarred] = useState(false);
   const [starredSongs, setStarredSongs] = useState<Set<string>>(new Set());
-  const [hoveredSongId, setHoveredSongId] = useState<string | null>(null);
+  const [offlineStorageFull, setOfflineStorageFull] = useState(false);
+
+  const { downloadAlbum, deleteAlbum } = useOfflineStore();
+  const offlineTracks = useOfflineStore(s => s.tracks);
+  const offlineAlbums = useOfflineStore(s => s.albums);
+  const offlineJobs = useOfflineStore(s => s.jobs);
+  const serverId = auth.activeServerId ?? '';
+
+  const offlineStatus: 'none' | 'downloading' | 'cached' = (() => {
+    if (!album) return 'none';
+    const meta = offlineAlbums[`${serverId}:${album.album.id}`];
+    const isDownloaded = meta && meta.trackIds.length > 0 && meta.trackIds.every(tid => !!offlineTracks[`${serverId}:${tid}`]);
+    if (isDownloaded) return 'cached';
+    const isDownloading = offlineJobs.some(j => j.albumId === album.album.id && (j.status === 'queued' || j.status === 'downloading'));
+    return isDownloading ? 'downloading' : 'none';
+  })();
+
+  const offlineProgress = (() => {
+    if (!album) return null;
+    const albumJobs = offlineJobs.filter(j => j.albumId === album.album.id);
+    if (albumJobs.length === 0) return null;
+    const done = albumJobs.filter(j => j.status === 'done' || j.status === 'error').length;
+    return { done, total: albumJobs.length };
+  })();
 
   useEffect(() => {
     if (!id) return;
@@ -64,34 +90,39 @@ export default function AlbumDetail() {
     }).catch(() => setLoading(false));
   }, [id]);
 
-  const handlePlayAll = () => {
-    if (!album) return;
-    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,
-    }));
-    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 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,
-    }));
-    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 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,
-    };
-    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 }));
@@ -171,18 +202,44 @@ export default function AlbumDetail() {
     const next = new Set(starredSongs);
     if (wasStarred) next.delete(song.id); else next.add(song.id);
     setStarredSongs(next);
+    setStarredOverride(song.id, !wasStarred);
     try {
       if (wasStarred) await unstar(song.id, 'song');
       else await star(song.id, 'song');
     } catch (err) {
       console.error('Failed to toggle song star', err);
       setStarredSongs(new Set(starredSongs));
+      setStarredOverride(song.id, wasStarred);
     }
   };
 
-  // Hooks must be called unconditionally — derive from nullable album state
-  const coverUrl = album?.album.coverArt ? buildCoverArtUrl(album.album.coverArt, 400) : '';
-  const coverKey = album?.album.coverArt ? coverArtCacheKey(album.album.coverArt, 400) : '';
+  const handleCacheOffline = useCallback(async () => {
+    if (!album) return;
+    const maxBytes = auth.maxCacheMb * 1024 * 1024;
+    try {
+      const usedBytes = await invoke<number>('get_offline_cache_size');
+      if (usedBytes >= maxBytes) {
+        setOfflineStorageFull(true);
+        return;
+      }
+    } catch {
+      // If we can't check, proceed anyway
+    }
+    setOfflineStorageFull(false);
+    downloadAlbum(album.album.id, album.album.name, album.album.artist, album.album.coverArt, album.album.year, album.songs, serverId);
+  }, [album, auth.maxCacheMb, downloadAlbum, serverId]);
+
+  const handleRemoveOffline = () => {
+    if (!album) return;
+    deleteAlbum(album.album.id, serverId);
+  };
+
+  // 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>;
@@ -209,15 +266,29 @@ export default function AlbumDetail() {
         onEnqueueAll={handleEnqueueAll}
         onBio={handleBio}
         onCloseBio={() => setBioOpen(false)}
+        offlineStatus={offlineStatus}
+        offlineProgress={offlineProgress}
+        onCacheOffline={handleCacheOffline}
+        onRemoveOffline={handleRemoveOffline}
       />
+      {offlineStorageFull && (
+        <div className="offline-storage-full-banner" role="alert">
+          <span>{t('albumDetail.offlineStorageFull', { mb: auth.maxCacheMb })}</span>
+          <button className="btn btn-ghost" style={{ fontSize: 13 }} onClick={() => navigate('/offline')}>
+            {t('albumDetail.offlineStorageGoToLibrary')}
+          </button>
+          <button className="btn btn-ghost" style={{ fontSize: 13 }} onClick={() => navigate('/settings', { state: { tab: 'library' } })}>
+            {t('albumDetail.offlineStorageGoToSettings')}
+          </button>
+          <button className="offline-storage-full-dismiss" onClick={() => setOfflineStorageFull(false)} aria-label="Dismiss">×</button>
+        </div>
+      )}
 
       <AlbumTrackList
         songs={songs}
         hasVariousArtists={hasVariousArtists}
         currentTrack={currentTrack}
         isPlaying={isPlaying}
-        hoveredSongId={hoveredSongId}
-        setHoveredSongId={setHoveredSongId}
         ratings={ratings}
         starredSongs={new Set([
           ...[...starredSongs].filter(id => starredOverrides[id] !== false),

src/pages/Albums.tsx

@@ -1,10 +1,21 @@
 import React, { useEffect, useState, useCallback, useRef } from 'react';
 import AlbumCard from '../components/AlbumCard';
-import { getAlbumList, SubsonicAlbum } from '../api/subsonic';
+import GenreFilterBar from '../components/GenreFilterBar';
+import { getAlbumList, getAlbumsByGenre, SubsonicAlbum } from '../api/subsonic';
 import { useTranslation } from 'react-i18next';
+import { X } from 'lucide-react';
 
 type SortType = 'alphabeticalByName' | 'alphabeticalByArtist';
 
+const PAGE_SIZE = 30;
+const CURRENT_YEAR = new Date().getFullYear();
+
+async function fetchByGenres(genres: string[]): Promise<SubsonicAlbum[]> {
+  const results = await Promise.all(genres.map(g => getAlbumsByGenre(g, 500, 0)));
+  const seen = new Set<string>();
+  return results.flat().filter(a => { if (seen.has(a.id)) return false; seen.add(a.id); return true; });
+}
+
 export default function Albums() {
   const { t } = useTranslation();
   const [albums, setAlbums] = useState<SubsonicAlbum[]>([]);
@@ -12,14 +23,27 @@ export default function Albums() {
   const [loading, setLoading] = useState(true);
   const [page, setPage] = useState(0);
   const [hasMore, setHasMore] = useState(true);
-  const PAGE_SIZE = 30;
-
+  const [selectedGenres, setSelectedGenres] = useState<string[]>([]);
+  const [yearFrom, setYearFrom] = useState('');
+  const [yearTo, setYearTo] = useState('');
   const observerTarget = useRef<HTMLDivElement>(null);
 
-  const load = useCallback(async (sortType: SortType, offset: number, append = false) => {
+  const genreFiltered = selectedGenres.length > 0;
+  const fromNum = parseInt(yearFrom, 10);
+  const toNum = parseInt(yearTo, 10);
+  const yearActive = !isNaN(fromNum) && !isNaN(toNum) && fromNum >= 1 && toNum >= 1;
+
+  const load = useCallback(async (
+    sortType: SortType,
+    offset: number,
+    append = false,
+    yearFilter?: { from: number; to: number },
+  ) => {
     setLoading(true);
     try {
-      const data = await getAlbumList(sortType, PAGE_SIZE, offset);
+      const extra = yearFilter ? { fromYear: yearFilter.from, toYear: yearFilter.to } : {};
+      const type = yearFilter ? 'byYear' : sortType;
+      const data = await getAlbumList(type, PAGE_SIZE, offset, extra);
       if (append) setAlbums(prev => [...prev, ...data]);
       else setAlbums(data);
       setHasMore(data.length === PAGE_SIZE);
@@ -28,30 +52,52 @@ export default function Albums() {
     }
   }, []);
 
-  useEffect(() => { setPage(0); load(sort, 0); }, [sort, load]);
+  const loadFiltered = useCallback(async (genres: string[], sortType: SortType) => {
+    setLoading(true);
+    try {
+      const data = await fetchByGenres(genres);
+      const sorted = [...data].sort((a, b) =>
+        sortType === 'alphabeticalByArtist'
+          ? a.artist.localeCompare(b.artist)
+          : a.name.localeCompare(b.name)
+      );
+      setAlbums(sorted);
+      setHasMore(false);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    setPage(0);
+    if (genreFiltered) {
+      loadFiltered(selectedGenres, sort);
+    } else if (yearActive) {
+      load(sort, 0, false, { from: fromNum, to: toNum });
+    } else {
+      load(sort, 0);
+    }
+  }, [sort, genreFiltered, selectedGenres, yearActive, fromNum, toNum, load, loadFiltered]);
 
   const loadMore = useCallback(() => {
-    if (loading || !hasMore) return;
+    if (loading || !hasMore || genreFiltered) return;
     const next = page + 1;
     setPage(next);
-    load(sort, next * PAGE_SIZE, true);
-  }, [loading, hasMore, page, sort, load]);
+    const yf = yearActive ? { from: fromNum, to: toNum } : undefined;
+    load(sort, next * PAGE_SIZE, true, yf);
+  }, [loading, hasMore, page, sort, load, genreFiltered, yearActive, fromNum, toNum]);
 
   useEffect(() => {
     const observer = new IntersectionObserver(
-      entries => {
-        if (entries[0].isIntersecting) {
-          loadMore();
-        }
-      },
+      entries => { if (entries[0].isIntersecting) loadMore(); },
       { rootMargin: '200px' }
     );
-    if (observerTarget.current) {
-      observer.observe(observerTarget.current);
-    }
+    if (observerTarget.current) observer.observe(observerTarget.current);
     return () => observer.disconnect();
   }, [loadMore]);
 
+  const clearYear = () => { setYearFrom(''); setYearTo(''); };
+
   const sortOptions: { value: SortType; label: string }[] = [
     { value: 'alphabeticalByName', label: t('albums.sortByName') },
     { value: 'alphabeticalByArtist', label: t('albums.sortByArtist') },
@@ -59,10 +105,10 @@ export default function Albums() {
 
   return (
     <div className="content-body animate-fade-in">
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.5rem' }}>
-        <h1 className="page-title">{t('albums.title')}</h1>
-        <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
-          {sortOptions.map(o => (
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.5rem', flexWrap: 'wrap', gap: '0.75rem' }}>
+        <h1 className="page-title" style={{ marginBottom: 0 }}>{t('albums.title')}</h1>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', flexWrap: 'wrap' }}>
+          {!yearActive && sortOptions.map(o => (
             <button
               key={o.value}
               className={`btn btn-surface ${sort === o.value ? 'btn-sort-active' : ''}`}
@@ -72,6 +118,46 @@ export default function Albums() {
               {o.label}
             </button>
           ))}
+
+          {/* Year range filter */}
+          <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+            <span style={{ fontSize: 12, color: 'var(--text-muted)', whiteSpace: 'nowrap' }}>
+              {t('albums.yearFilterLabel')}
+            </span>
+            <input
+              className="input"
+              type="number"
+              min={1900}
+              max={CURRENT_YEAR}
+              placeholder={t('albums.yearFrom')}
+              value={yearFrom}
+              onChange={e => setYearFrom(e.target.value)}
+              style={{ width: 68, padding: '4px 6px', fontSize: 12 }}
+            />
+            <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>–</span>
+            <input
+              className="input"
+              type="number"
+              min={1900}
+              max={CURRENT_YEAR}
+              placeholder={t('albums.yearTo')}
+              value={yearTo}
+              onChange={e => setYearTo(e.target.value)}
+              style={{ width: 68, padding: '4px 6px', fontSize: 12 }}
+            />
+            {yearActive && (
+              <button
+                className="btn btn-ghost"
+                onClick={clearYear}
+                data-tooltip={t('albums.yearFilterClear')}
+                style={{ padding: '4px 6px' }}
+              >
+                <X size={13} />
+              </button>
+            )}
+          </div>
+
+          <GenreFilterBar selected={selectedGenres} onSelectionChange={setSelectedGenres} />
         </div>
       </div>
 
@@ -84,10 +170,11 @@ export default function Albums() {
           <div className="album-grid-wrap">
             {albums.map(a => <AlbumCard key={a.id} album={a} />)}
           </div>
-
-          <div ref={observerTarget} style={{ height: '20px', margin: '2rem 0', display: 'flex', justifyContent: 'center' }}>
-            {loading && hasMore && <div className="spinner" style={{ width: 20, height: 20 }} />}
-          </div>
+          {!genreFiltered && (
+            <div ref={observerTarget} style={{ height: '20px', margin: '2rem 0', display: 'flex', justifyContent: 'center' }}>
+              {loading && hasMore && <div className="spinner" style={{ width: 20, height: 20 }} />}
+            </div>
+          )}
         </>
       )}
     </div>

src/pages/ArtistDetail.tsx

@@ -1,12 +1,14 @@
 import { useEffect, useState } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
-import { getArtist, getArtistInfo, getTopSongs, getSimilarSongs2, search, SubsonicArtist, SubsonicAlbum, SubsonicSong, SubsonicArtistInfo, buildCoverArtUrl, coverArtCacheKey, star, unstar } from '../api/subsonic';
+import { getArtist, getArtistInfo, getTopSongs, getSimilarSongs2, getAlbum, search, SubsonicArtist, SubsonicAlbum, SubsonicSong, SubsonicArtistInfo, buildCoverArtUrl, coverArtCacheKey, star, unstar } from '../api/subsonic';
 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, HardDriveDownload, Check } from 'lucide-react';
 import { open } from '@tauri-apps/plugin-shell';
-import { usePlayerStore } from '../store/playerStore';
+import { usePlayerStore, songToTrack } from '../store/playerStore';
+import { useOfflineStore } from '../store/offlineStore';
+import { useAuthStore } from '../store/authStore';
 import { useTranslation } from 'react-i18next';
 import { lastfmGetSimilarArtists, lastfmIsConfigured } from '../api/lastfm';
 import LastfmIcon from '../components/LastfmIcon';
@@ -46,6 +48,7 @@ export default function ArtistDetail() {
   const [info, setInfo] = useState<SubsonicArtistInfo | null>(null);
   const [loading, setLoading] = useState(true);
   const [radioLoading, setRadioLoading] = useState(false);
+  const [playAllLoading, setPlayAllLoading] = useState(false);
   const [isStarred, setIsStarred] = useState(false);
   const [openedLink, setOpenedLink] = useState<string | null>(null);
   const [similarArtists, setSimilarArtists] = useState<SubsonicArtist[]>([]);
@@ -57,6 +60,10 @@ export default function ArtistDetail() {
   const enqueue = usePlayerStore(state => state.enqueue);
   const clearQueue = usePlayerStore(state => state.clearQueue);
   const openContextMenu = usePlayerStore(state => state.openContextMenu);
+  const currentTrack = usePlayerStore(state => state.currentTrack);
+  const isPlaying = usePlayerStore(state => state.isPlaying);
+  const { downloadArtist, bulkProgress } = useOfflineStore();
+  const activeServerId = useAuthStore(s => s.activeServerId) ?? '';
 
   useEffect(() => {
     if (!id) return;
@@ -160,18 +167,34 @@ export default function ArtistDetail() {
     }
   };
 
-  const handlePlayAll = () => {
-    if (topSongs.length > 0) {
-      clearQueue();
-      playTrack(topSongs[0], topSongs);
+  const fetchAllTracks = async () => {
+    const results = await Promise.all(albums.map(a => getAlbum(a.id)));
+    const sorted = [...results].sort((a, b) => (a.album.year ?? 0) - (b.album.year ?? 0));
+    return sorted.flatMap(r => [...r.songs].sort((a, b) => (a.track ?? 0) - (b.track ?? 0))).map(songToTrack);
+  };
+
+  const handlePlayAll = async () => {
+    if (albums.length === 0) return;
+    setPlayAllLoading(true);
+    try {
+      const tracks = await fetchAllTracks();
+      if (tracks.length > 0) playTrack(tracks[0], tracks);
+    } finally {
+      setPlayAllLoading(false);
     }
   };
 
-  const handleShuffle = () => {
-    if (topSongs.length > 0) {
-      const shuffled = [...topSongs].sort(() => Math.random() - 0.5);
-      clearQueue();
-      playTrack(shuffled[0], shuffled);
+  const handleShuffle = async () => {
+    if (albums.length === 0) return;
+    setPlayAllLoading(true);
+    try {
+      const tracks = await fetchAllTracks();
+      if (tracks.length > 0) {
+        const shuffled = [...tracks].sort(() => Math.random() - 0.5);
+        playTrack(shuffled[0], shuffled);
+      }
+    } finally {
+      setPlayAllLoading(false);
     }
   };
 
@@ -179,16 +202,33 @@ export default function ArtistDetail() {
     if (!artist) return;
     setRadioLoading(true);
     try {
-      const similar = await getSimilarSongs2(artist.id, 50);
-      if (similar.length > 0) {
-        clearQueue();
-        playTrack(similar[0], similar);
+      // Fire both fetches in parallel
+      const topPromise = getTopSongs(artist.name);
+      const similarPromise = getSimilarSongs2(artist.id, 50);
+
+      // Start playing as soon as top songs arrive
+      const top = await topPromise;
+      if (top.length > 0) {
+        const firstTrack = songToTrack(top[0]);
+        playTrack(firstTrack, [firstTrack]);
+        setRadioLoading(false);
+        // Enqueue remaining tracks when similar songs arrive
+        const similar = await similarPromise;
+        const remaining = [...top.slice(1), ...similar].map(songToTrack);
+        if (remaining.length > 0) enqueue(remaining);
       } else {
-        alert(t('artistDetail.noRadio'));
+        // No top songs — fall back to similar
+        const similar = await similarPromise;
+        if (similar.length > 0) {
+          const tracks = similar.map(songToTrack);
+          playTrack(tracks[0], tracks);
+        } else {
+          alert(t('artistDetail.noRadio'));
+        }
+        setRadioLoading(false);
       }
     } catch (e) {
       console.error('Radio start failed', e);
-    } finally {
       setRadioLoading(false);
     }
   };
@@ -283,19 +323,21 @@ 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>
 
           <div style={{ display: 'flex', gap: '8px', marginTop: '1.5rem', flexWrap: 'wrap' }}>
-            {topSongs.length > 0 && (
+            {albums.length > 0 && (
               <>
-                <button className="btn btn-primary" onClick={handlePlayAll}>
-                  <Play size={16} /> {t('artistDetail.playAll')}
+                <button className="btn btn-primary" onClick={handlePlayAll} disabled={playAllLoading}>
+                  {playAllLoading ? <div className="spinner" style={{ width: 16, height: 16, borderTopColor: 'currentColor' }} /> : <Play size={16} />}
+                  {t('artistDetail.playAll')}
                 </button>
-                <button className="btn btn-surface" onClick={handleShuffle}>
-                  <Shuffle size={16} /> {t('artistDetail.shuffle')}
+                <button className="btn btn-surface" onClick={handleShuffle} disabled={playAllLoading}>
+                  {playAllLoading ? <div className="spinner" style={{ width: 16, height: 16, borderTopColor: 'currentColor' }} /> : <Shuffle size={16} />}
+                  {t('artistDetail.shuffle')}
                 </button>
               </>
             )}
@@ -303,6 +345,28 @@ export default function ArtistDetail() {
               {radioLoading ? <div className="spinner" style={{ width: 16, height: 16, borderTopColor: 'currentColor' }} /> : <Radio size={16} />}
               {radioLoading ? t('artistDetail.loading') : t('artistDetail.radio')}
             </button>
+            {albums.length > 0 && (() => {
+              const progress = id ? bulkProgress[id] : undefined;
+              const isDone = progress && progress.done === progress.total;
+              const isDownloading = progress && !isDone;
+              return (
+                <button
+                  className="btn btn-surface"
+                  disabled={!!isDownloading}
+                  onClick={() => { if (id && artist) downloadArtist(id, artist.name, activeServerId); }}
+                  data-tooltip={isDownloading
+                    ? t('artistDetail.offlineDownloading', { done: progress.done, total: progress.total })
+                    : isDone ? t('artistDetail.offlineCached') : t('artistDetail.cacheOffline')}
+                >
+                  {isDownloading
+                    ? <div className="spinner" style={{ width: 16, height: 16, borderTopColor: 'currentColor' }} />
+                    : isDone ? <Check size={16} /> : <HardDriveDownload size={16} />}
+                  {isDownloading
+                    ? t('artistDetail.offlineDownloading', { done: progress.done, total: progress.total })
+                    : isDone ? t('artistDetail.offlineCached') : t('artistDetail.cacheOffline')}
+                </button>
+              );
+            })()}
           </div>
         </div>
       </div>
@@ -324,29 +388,33 @@ export default function ArtistDetail() {
             {t('artistDetail.topTracks')}
           </h2>
           <div className="tracklist" style={{ padding: 0, marginBottom: '2rem' }}>
-            <div className="tracklist-header" style={{ gridTemplateColumns: '36px minmax(150px, 2fr) minmax(100px, 1fr) 60px' }}>
+            <div className="tracklist-header" style={{ gridTemplateColumns: '60px minmax(150px, 1fr) minmax(100px, 1fr) 65px' }}>
               <div style={{ textAlign: 'center' }}>#</div>
               <div>{t('artistDetail.trackTitle')}</div>
               <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');
-                }}
-              >
-                <div className="track-num" style={{ textAlign: 'center' }}>{idx + 1}</div>
+             {topSongs.map((song, idx) => {
+                   const track = songToTrack(song);
+                   return (
+                     <div
+                       key={song.id}
+                       className="track-row"
+                       style={{ gridTemplateColumns: '60px minmax(150px, 1fr) minmax(100px, 1fr) 65px' }}
+                       onClick={e => {
+                         if ((e.target as HTMLElement).closest('button, a, input')) return;
+                         playTrack(track, topSongs.map(songToTrack));
+                       }}
+                       onContextMenu={(e) => {
+                         e.preventDefault();
+                         openContextMenu(e.clientX, e.clientY, track, 'song');
+                       }}
+                     >
+                <div className={`track-num${currentTrack?.id === song.id ? ' track-num-active' : ''}`} style={{ cursor: 'pointer' }} onClick={e => { e.stopPropagation(); playTrack(track, topSongs.map(songToTrack)); }}>
+                  {currentTrack?.id === song.id && isPlaying && <span className="track-num-eq"><div className="eq-bars"><span className="eq-bar" /><span className="eq-bar" /><span className="eq-bar" /></div></span>}
+                  <span className="track-num-play"><Play size={13} fill="currentColor" /></span>
+                  <span className="track-num-number">{idx + 1}</span>
+                </div>
                 <div className="track-info" style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
                   {song.coverArt && (
                     <CachedImage
@@ -365,13 +433,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) && (

src/pages/Artists.tsx

@@ -1,8 +1,10 @@
 import React, { useEffect, useState, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { getArtists, SubsonicArtist } from '../api/subsonic';
-import { LayoutGrid, List } from 'lucide-react';
+import { getArtists, SubsonicArtist, buildCoverArtUrl, coverArtCacheKey } from '../api/subsonic';
+import { LayoutGrid, List, Images, ChevronDown } from 'lucide-react';
 import { usePlayerStore } from '../store/playerStore';
+import { useAuthStore } from '../store/authStore';
+import CachedImage from '../components/CachedImage';
 import { useTranslation } from 'react-i18next';
 
 const ALL_SENTINEL = 'ALL';
@@ -23,12 +25,52 @@ function nameColor(name: string): string {
 }
 
 function nameInitial(name: string): string {
-  // Skip leading non-letter chars (punctuation, numbers, brackets, …)
-  const letter = name.match(/[a-zA-ZÀ-ÖØ-öø-ÿ]/)?.[0];
+  // \p{L} matches any Unicode letter — covers cyrillic, arabic, CJK, etc.
+  const letter = name.match(/\p{L}/u)?.[0];
   if (letter) return letter.toUpperCase();
-  // Fallback: first alphanumeric (e.g. "1349")
-  const alnum = name.match(/[a-zA-Z0-9]/)?.[0];
-  return alnum?.toUpperCase() ?? '?';
+  const alnum = name.match(/[0-9]/)?.[0];
+  return alnum ?? '?';
+}
+
+function ArtistCardAvatar({ artist, showImages }: { artist: SubsonicArtist; showImages: boolean }) {
+  const color = nameColor(artist.name);
+  if (showImages && artist.coverArt) {
+    return (
+      <div className="artist-card-avatar">
+        <CachedImage
+          src={buildCoverArtUrl(artist.coverArt, 300)}
+          cacheKey={coverArtCacheKey(artist.coverArt, 300)}
+          alt={artist.name}
+        />
+      </div>
+    );
+  }
+  return (
+    <div className="artist-card-avatar artist-card-avatar-initial" style={{ borderColor: color }}>
+      <span style={{ color }}>{nameInitial(artist.name)}</span>
+    </div>
+  );
+}
+
+function ArtistRowAvatar({ artist, showImages }: { artist: SubsonicArtist; showImages: boolean }) {
+  const color = nameColor(artist.name);
+  if (showImages && artist.coverArt) {
+    return (
+      <div className="artist-avatar">
+        <CachedImage
+          src={buildCoverArtUrl(artist.coverArt, 64)}
+          cacheKey={coverArtCacheKey(artist.coverArt, 64)}
+          alt={artist.name}
+          style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: '50%' }}
+        />
+      </div>
+    );
+  }
+  return (
+    <div className="artist-avatar artist-avatar-initial" style={{ borderColor: color }}>
+      <span style={{ color }}>{nameInitial(artist.name)}</span>
+    </div>
+  );
 }
 
 export default function Artists() {
@@ -42,6 +84,8 @@ export default function Artists() {
   const [visibleCount, setVisibleCount] = useState(50);
   const navigate = useNavigate();
   const openContextMenu = usePlayerStore(state => state.openContextMenu);
+  const showArtistImages = useAuthStore(s => s.showArtistImages);
+  const setShowArtistImages = useAuthStore(s => s.setShowArtistImages);
 
   useEffect(() => {
     getArtists().then(data => { setArtists(data); setLoading(false); }).catch(() => setLoading(false));
@@ -101,6 +145,15 @@ export default function Artists() {
         </div>
 
         <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+          <button
+            className={`btn btn-surface`}
+            onClick={() => setShowArtistImages(!showArtistImages)}
+            style={showArtistImages ? { background: 'var(--accent)', color: 'var(--ctp-crust)', padding: '0.5rem' } : { padding: '0.5rem' }}
+            data-tooltip={showArtistImages ? t('artists.imagesOn') : t('artists.imagesOff')}
+            data-tooltip-wrap
+          >
+            <Images size={20} />
+          </button>
           <button
             className={`btn btn-surface ${viewMode === 'grid' ? 'btn-sort-active' : ''}`}
             onClick={() => setViewMode('grid')}
@@ -146,30 +199,25 @@ export default function Artists() {
 
       {!loading && viewMode === 'grid' && (
         <div className="album-grid-wrap">
-          {visible.map(artist => {
-            const color = nameColor(artist.name);
-            return (
-              <div
-                key={artist.id}
-                className="artist-card"
-                onClick={() => navigate(`/artist/${artist.id}`)}
-                onContextMenu={(e) => {
-                  e.preventDefault();
-                  openContextMenu(e.clientX, e.clientY, artist, 'artist');
-                }}
-              >
-                <div className="artist-card-avatar artist-card-avatar-initial" style={{ borderColor: color }}>
-                  <span style={{ color }}>{nameInitial(artist.name)}</span>
-                </div>
-                <div style={{ textAlign: 'center' }}>
-                  <div className="artist-card-name">{artist.name}</div>
-                  {artist.albumCount != null && (
-                    <div className="artist-card-meta">{t('artists.albumCount', { count: artist.albumCount })}</div>
-                  )}
-                </div>
+          {visible.map(artist => (
+            <div
+              key={artist.id}
+              className="artist-card"
+              onClick={() => navigate(`/artist/${artist.id}`)}
+              onContextMenu={(e) => {
+                e.preventDefault();
+                openContextMenu(e.clientX, e.clientY, artist, 'artist');
+              }}
+            >
+              <ArtistCardAvatar artist={artist} showImages={showArtistImages} />
+              <div style={{ textAlign: 'center' }}>
+                <div className="artist-card-name">{artist.name}</div>
+                {artist.albumCount != null && (
+                  <div className="artist-card-meta">{t('artists.albumCount', { count: artist.albumCount })}</div>
+                )}
               </div>
-            );
-          })}
+            </div>
+          ))}
         </div>
       )}
 
@@ -179,31 +227,26 @@ export default function Artists() {
             <div key={letter} style={{ marginBottom: '1.5rem' }}>
               <h3 className="letter-heading">{letter}</h3>
               <div className="artist-list">
-                {groups[letter].map(artist => {
-                  const color = nameColor(artist.name);
-                  return (
-                    <button
-                      key={artist.id}
-                      className="artist-row"
-                      onClick={() => navigate(`/artist/${artist.id}`)}
-                      onContextMenu={(e) => {
-                        e.preventDefault();
-                        openContextMenu(e.clientX, e.clientY, artist, 'artist');
-                      }}
-                      id={`artist-${artist.id}`}
-                    >
-                      <div className="artist-avatar artist-avatar-initial" style={{ borderColor: color }}>
-                        <span style={{ color }}>{nameInitial(artist.name)}</span>
-                      </div>
-                      <div style={{ textAlign: 'left' }}>
-                        <div className="artist-name">{artist.name}</div>
-                        {artist.albumCount != null && (
-                          <div className="artist-meta">{t('artists.albumCount', { count: artist.albumCount })}</div>
-                        )}
-                      </div>
-                    </button>
-                  );
-                })}
+                {groups[letter].map(artist => (
+                  <button
+                    key={artist.id}
+                    className="artist-row"
+                    onClick={() => navigate(`/artist/${artist.id}`)}
+                    onContextMenu={(e) => {
+                      e.preventDefault();
+                      openContextMenu(e.clientX, e.clientY, artist, 'artist');
+                    }}
+                    id={`artist-${artist.id}`}
+                  >
+                    <ArtistRowAvatar artist={artist} showImages={showArtistImages} />
+                    <div style={{ textAlign: 'left' }}>
+                      <div className="artist-name">{artist.name}</div>
+                      {artist.albumCount != null && (
+                        <div className="artist-meta">{t('artists.albumCount', { count: artist.albumCount })}</div>
+                      )}
+                    </div>
+                  </button>
+                ))}
               </div>
             </div>
           ))}
@@ -211,9 +254,9 @@ export default function Artists() {
       )}
 
       {!loading && hasMore && (
-        <div style={{ margin: '2rem 0', display: 'flex', justifyContent: 'center' }}>
-          <button className="btn btn-ghost" onClick={loadMore}>
-            {t('artists.loadMore')}
+        <div style={{ marginTop: 32, marginBottom: '2rem', display: 'flex', justifyContent: 'center' }}>
+          <button className="btn btn-primary" onClick={loadMore}>
+            <ChevronDown size={16} /> {t('artists.loadMore')}
           </button>
         </div>
       )}

src/pages/Favorites.tsx

@@ -1,32 +1,92 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+import { useTracklistColumns, type ColDef } from '../utils/useTracklistColumns';
 import AlbumRow from '../components/AlbumRow';
 import ArtistRow from '../components/ArtistRow';
-import { getStarred, SubsonicAlbum, SubsonicArtist, SubsonicSong } from '../api/subsonic';
-import { usePlayerStore } from '../store/playerStore';
-import { Play, ListPlus } from 'lucide-react';
+import CachedImage from '../components/CachedImage';
+import {
+  getStarred, getInternetRadioStations,
+  SubsonicAlbum, SubsonicArtist, SubsonicSong, InternetRadioStation,
+  buildCoverArtUrl, coverArtCacheKey,
+} from '../api/subsonic';
+import { usePlayerStore, songToTrack } from '../store/playerStore';
+import { Cast, ChevronDown, ChevronLeft, ChevronRight, Check, Heart, ListPlus, Play, Star, 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';
+
+const FAV_COLUMNS: readonly ColDef[] = [
+  { key: 'num',      i18nKey: null,            minWidth: 60,  defaultWidth: 60,  required: true  },
+  { key: 'title',    i18nKey: 'trackTitle',    minWidth: 150, defaultWidth: 0,   required: true,  flex: true },
+  { key: 'artist',   i18nKey: 'trackArtist',   minWidth: 80,  defaultWidth: 180, required: false },
+  { key: 'duration', i18nKey: 'trackDuration', minWidth: 50,  defaultWidth: 65,  required: false },
+  { key: 'remove',   i18nKey: null,            minWidth: 36,  defaultWidth: 36,  required: true  },
+];
 
 export default function Favorites() {
   const { t } = useTranslation();
   const [albums, setAlbums] = useState<SubsonicAlbum[]>([]);
   const [artists, setArtists] = useState<SubsonicArtist[]>([]);
   const [songs, setSongs] = useState<SubsonicSong[]>([]);
+  const [radioStations, setRadioStations] = useState<InternetRadioStation[]>([]);
   const [loading, setLoading] = useState(true);
 
-  const { playTrack, enqueue } = usePlayerStore();
+  // ── Column resize/visibility (must be before early return) ───────────────
+  const {
+    colVisible, visibleCols, gridStyle,
+    startResize, toggleColumn,
+    pickerOpen, setPickerOpen, pickerRef, tracklistRef,
+  } = useTracklistColumns(FAV_COLUMNS, 'psysonic_favorites_columns');
+
+  const { playTrack, enqueue, playRadio, stop } = usePlayerStore();
+  const currentTrack = usePlayerStore(s => s.currentTrack);
+  const currentRadio = usePlayerStore(s => s.currentRadio);
+  const isPlaying = usePlayerStore(s => s.isPlaying);
+  const starredOverrides = usePlayerStore(s => s.starredOverrides);
+  const setStarredOverride = usePlayerStore(s => s.setStarredOverride);
+  const psyDrag = useDragDrop();
+
+  function removeSong(id: string) {
+    unstar(id, 'song').catch(() => {});
+    setStarredOverride(id, false);
+    setSongs(prev => prev.filter(s => s.id !== id));
+  }
+
+  function unfavoriteStation(id: string) {
+    setRadioStations(prev => prev.filter(s => s.id !== id));
+    try {
+      const next = new Set<string>(JSON.parse(localStorage.getItem('psysonic_radio_favorites') ?? '[]'));
+      next.delete(id);
+      localStorage.setItem('psysonic_radio_favorites', JSON.stringify([...next]));
+    } catch { /* ignore */ }
+  }
+
   const openContextMenu = usePlayerStore(s => s.openContextMenu);
   const navigate = useNavigate();
 
   useEffect(() => {
-    getStarred()
-      .then(res => {
-        setAlbums(res.albums);
-        setArtists(res.artists);
-        setSongs(res.songs);
-        setLoading(false);
-      })
-      .catch(() => setLoading(false));
+    const loadAll = async () => {
+      const [starredResult] = await Promise.allSettled([
+        getStarred(),
+      ]);
+      if (starredResult.status === 'fulfilled') {
+        setAlbums(starredResult.value.albums);
+        setArtists(starredResult.value.artists);
+        setSongs(starredResult.value.songs);
+      }
+
+      // Radio favorites: read IDs from localStorage, fetch all stations, filter
+      try {
+        const favIds = new Set<string>(JSON.parse(localStorage.getItem('psysonic_radio_favorites') ?? '[]'));
+        if (favIds.size > 0) {
+          const all = await getInternetRadioStations();
+          setRadioStations(all.filter(s => favIds.has(s.id)));
+        }
+      } catch { /* ignore */ }
+
+      setLoading(false);
+    };
+    loadAll();
   }, []);
 
   if (loading) {
@@ -37,7 +97,8 @@ export default function Favorites() {
     );
   }
 
-  const hasAnyFavorites = albums.length > 0 || artists.length > 0 || songs.length > 0;
+  const visibleSongs = songs.filter(s => starredOverrides[s.id] !== false);
+  const hasAnyFavorites = albums.length > 0 || artists.length > 0 || visibleSongs.length > 0 || radioStations.length > 0;
 
   return (
     <div className="content-body animate-fade-in" style={{ display: 'flex', flexDirection: 'column', gap: '3rem' }}>
@@ -57,18 +118,38 @@ export default function Favorites() {
             <AlbumRow title={t('favorites.albums')} albums={albums} />
           )}
 
-          {songs.length > 0 && (
+          {radioStations.length > 0 && (
+            <RadioStationRow
+              title={t('favorites.stations')}
+              stations={radioStations}
+              currentRadio={currentRadio}
+              isPlaying={isPlaying}
+              onPlay={s => {
+                if (currentRadio?.id === s.id && isPlaying) stop();
+                else playRadio(s);
+              }}
+              onUnfavorite={unfavoriteStation}
+            />
+          )}
+
+          {visibleSongs.length > 0 && (
             <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 = visibleSongs.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,
-                    }));
+                    const tracks = visibleSongs.map(songToTrack);
                     enqueue(tracks);
                   }}
                 >
@@ -76,48 +157,117 @@ export default function Favorites() {
                   {t('favorites.enqueueAll')}
                 </button>
               </div>
-              <div className="tracklist" style={{ padding: 0 }}>
-                <div className="tracklist-header tracklist-va">
-                  <div className="col-center">#</div>
-                  <div>{t('albumDetail.trackTitle')}</div>
-                  <div>{t('albumDetail.trackArtist')}</div>
-                  <div className="col-center">{t('albumDetail.trackDuration')}</div>
+              <div className="tracklist" style={{ padding: 0 }} ref={tracklistRef}>
+                <div style={{ position: 'relative' }}>
+                  <div className="tracklist-header tracklist-va" style={gridStyle}>
+                    {visibleCols.map((colDef, colIndex) => {
+                      const key = colDef.key;
+                      const isLastCol = colIndex === visibleCols.length - 1;
+                      const label = colDef.i18nKey ? t(`albumDetail.${colDef.i18nKey}`) : '';
+                      if (key === 'num') return <div key="num" className="track-num"><span className="track-num-number">#</span></div>;
+                      if (key === 'title') {
+                        const hasNextCol = colIndex + 1 < visibleCols.length;
+                        return (
+                          <div key="title" style={{ position: 'relative', padding: 0, margin: 0, minWidth: 0, overflow: 'hidden' }}>
+                            <div style={{ display: 'flex', width: '100%', height: '100%', alignItems: 'center', justifyContent: 'flex-start', paddingLeft: 12 }}>
+                              <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{label}</span>
+                            </div>
+                            {hasNextCol && <div className="col-resize-handle" onMouseDown={e => startResize(e, colIndex + 1, -1)} />}
+                          </div>
+                        );
+                      }
+                      if (key === 'remove') return <div key="remove" />;
+                      const isCentered = key === 'duration';
+                      return (
+                        <div key={key} style={{ position: 'relative', padding: 0, margin: 0, minWidth: 0, overflow: 'hidden' }}>
+                          <div style={{ display: 'flex', width: '100%', height: '100%', alignItems: 'center', justifyContent: isCentered ? 'center' : 'flex-start', paddingLeft: isCentered ? 0 : 12 }}>
+                            <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{label}</span>
+                          </div>
+                          {!isLastCol && <div className="col-resize-handle" onMouseDown={e => startResize(e, colIndex, 1)} />}
+                        </div>
+                      );
+                    })}
+                  </div>
+                  <div className="tracklist-col-picker" ref={pickerRef}>
+                    <button className="tracklist-col-picker-btn" onClick={e => { e.stopPropagation(); setPickerOpen(v => !v); }} data-tooltip={t('albumDetail.columns')}>
+                      <ChevronDown size={14} />
+                    </button>
+                    {pickerOpen && (
+                      <div className="tracklist-col-picker-menu">
+                        <div className="tracklist-col-picker-label">{t('albumDetail.columns')}</div>
+                        {FAV_COLUMNS.filter(c => !c.required).map(c => {
+                          const label = c.i18nKey ? t(`albumDetail.${c.i18nKey}`) : c.key;
+                          const isOn = colVisible.has(c.key);
+                          return (
+                            <button key={c.key} className={`tracklist-col-picker-item${isOn ? ' active' : ''}`} onClick={() => toggleColumn(c.key)}>
+                              <span className="tracklist-col-picker-check">{isOn && <Check size={13} />}</span>
+                              {label}
+                            </button>
+                          );
+                        })}
+                      </div>
+                    )}
+                  </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,
-                  };
+                {visibleSongs.map((song, i) => {
+                  const track = songToTrack(song);
                   return (
                     <div
                       key={song.id}
                       className="track-row track-row-va"
-                      onDoubleClick={() => playTrack(song, songs)}
+                      style={gridStyle}
+                      onClick={e => {
+                        if ((e.target as HTMLElement).closest('button, a, input')) return;
+                        playTrack(track, visibleSongs.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' }}>
-                        {i + 1}
-                      </div>
-                      <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-duration">
-                        {Math.floor(song.duration / 60)}:{(song.duration % 60).toString().padStart(2, '0')}
-                      </div>
+                      {visibleCols.map(colDef => {
+                        switch (colDef.key) {
+                          case 'num': return (
+                            <div key="num" className={`track-num${currentTrack?.id === song.id ? ' track-num-active' : ''}${currentTrack?.id === song.id && !isPlaying ? ' track-num-paused' : ''}`} style={{ cursor: 'pointer' }} onClick={e => { e.stopPropagation(); playTrack(track, visibleSongs.map(songToTrack)); }}>
+                              {currentTrack?.id === song.id && isPlaying && <span className="track-num-eq"><div className="eq-bars"><span className="eq-bar" /><span className="eq-bar" /><span className="eq-bar" /></div></span>}
+                              <span className="track-num-play"><Play size={13} fill="currentColor" /></span>
+                              <span className="track-num-number">{i + 1}</span>
+                            </div>
+                          );
+                          case 'title': return <div key="title" className="track-info"><span className="track-title">{song.title}</span></div>;
+                          case 'artist': return (
+                            <div key="artist" className="track-artist-cell">
+                              <span className={`track-artist${song.artistId ? ' track-artist-link' : ''}`} style={{ cursor: song.artistId ? 'pointer' : 'default' }} onClick={() => song.artistId && navigate(`/artist/${song.artistId}`)}>{song.artist}</span>
+                            </div>
+                          );
+                          case 'duration': return (
+                            <div key="duration" className="track-duration">
+                              {Math.floor(song.duration / 60)}:{(song.duration % 60).toString().padStart(2, '0')}
+                            </div>
+                          );
+                          case 'remove': return (
+                            <div key="remove" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                              <button className="btn-icon fav-remove-btn" data-tooltip={t('favorites.removeSong')} onClick={e => { e.stopPropagation(); removeSong(song.id); }} aria-label={t('favorites.removeSong')}>
+                                <X size={14} />
+                              </button>
+                            </div>
+                          );
+                          default: return null;
+                        }
+                      })}
                     </div>
                   );
                 })}
@@ -129,3 +279,117 @@ export default function Favorites() {
     </div>
   );
 }
+
+// ── Radio Station Row ─────────────────────────────────────────────────────────
+
+interface RadioStationRowProps {
+  title: string;
+  stations: InternetRadioStation[];
+  currentRadio: InternetRadioStation | null;
+  isPlaying: boolean;
+  onPlay: (s: InternetRadioStation) => void;
+  onUnfavorite: (id: string) => void;
+}
+
+function RadioStationRow({ title, stations, currentRadio, isPlaying, onPlay, onUnfavorite }: RadioStationRowProps) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [showLeft, setShowLeft] = useState(false);
+  const [showRight, setShowRight] = useState(true);
+
+  const handleScroll = () => {
+    if (!scrollRef.current) return;
+    const { scrollLeft, scrollWidth, clientWidth } = scrollRef.current;
+    setShowLeft(scrollLeft > 0);
+    setShowRight(scrollLeft < scrollWidth - clientWidth - 5);
+  };
+
+  const scroll = (dir: 'left' | 'right') => {
+    if (!scrollRef.current) return;
+    scrollRef.current.scrollBy({ left: dir === 'left' ? -scrollRef.current.clientWidth * 0.75 : scrollRef.current.clientWidth * 0.75, behavior: 'smooth' });
+  };
+
+  return (
+    <section className="album-row-section">
+      <div className="album-row-header">
+        <h2 className="section-title" style={{ marginBottom: 0 }}>{title}</h2>
+        <div className="album-row-nav">
+          <button className={`nav-btn${!showLeft ? ' disabled' : ''}`} onClick={() => scroll('left')} disabled={!showLeft}>
+            <ChevronLeft size={20} />
+          </button>
+          <button className={`nav-btn${!showRight ? ' disabled' : ''}`} onClick={() => scroll('right')} disabled={!showRight}>
+            <ChevronRight size={20} />
+          </button>
+        </div>
+      </div>
+      <div className="album-grid-wrapper">
+        <div className="album-grid" ref={scrollRef} onScroll={handleScroll}>
+          {stations.map(s => (
+            <RadioFavCard
+              key={s.id}
+              station={s}
+              isActive={currentRadio?.id === s.id}
+              isPlaying={isPlaying}
+              onPlay={() => onPlay(s)}
+              onUnfavorite={() => onUnfavorite(s.id)}
+            />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+// ── Radio Favorite Card ───────────────────────────────────────────────────────
+
+interface RadioFavCardProps {
+  station: InternetRadioStation;
+  isActive: boolean;
+  isPlaying: boolean;
+  onPlay: () => void;
+  onUnfavorite: () => void;
+}
+
+function RadioFavCard({ station: s, isActive, isPlaying, onPlay, onUnfavorite }: RadioFavCardProps) {
+  const { t } = useTranslation();
+  return (
+    <div className={`album-card${isActive ? ' radio-card-active' : ''}`}>
+      <div className="album-card-cover">
+        {s.coverArt ? (
+          <CachedImage
+            src={buildCoverArtUrl(`ra-${s.id}`, 256)}
+            cacheKey={coverArtCacheKey(`ra-${s.id}`, 256)}
+            alt={s.name}
+            className="album-card-cover-img"
+          />
+        ) : (
+          <div className="album-card-cover-placeholder playlist-card-icon">
+            <Cast size={48} strokeWidth={1.2} />
+          </div>
+        )}
+        {isActive && isPlaying && (
+          <div className="radio-live-overlay">
+            <span className="radio-live-badge">{t('radio.live')}</span>
+          </div>
+        )}
+        <div className="album-card-play-overlay">
+          <button className="album-card-details-btn" onClick={onPlay}>
+            {isActive && isPlaying ? <X size={15} /> : <Cast size={14} />}
+          </button>
+        </div>
+      </div>
+      <div className="album-card-info">
+        <div className="album-card-title">{s.name}</div>
+        <div className="album-card-artist" style={{ display: 'flex', alignItems: 'center' }}>
+          <button
+            className="radio-favorite-btn active"
+            style={{ background: 'none', border: 'none', padding: '2px', cursor: 'pointer', display: 'flex' }}
+            onClick={onUnfavorite}
+            data-tooltip={t('radio.unfavorite')}
+          >
+            <Heart size={12} fill="currentColor" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/pages/GenreDetail.tsx

@@ -0,0 +1,86 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { ArrowLeft, Disc3 } from 'lucide-react';
+import { getAlbumsByGenre, SubsonicAlbum } from '../api/subsonic';
+import AlbumCard from '../components/AlbumCard';
+
+const PAGE_SIZE = 50;
+
+export default function GenreDetail() {
+  const { name } = useParams<{ name: string }>();
+  const genre = decodeURIComponent(name ?? '');
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const [albums, setAlbums] = useState<SubsonicAlbum[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [hasMore, setHasMore] = useState(true);
+  const [offset, setOffset] = useState(0);
+
+  useEffect(() => {
+    setAlbums([]);
+    setOffset(0);
+    setHasMore(true);
+    setLoading(true);
+    getAlbumsByGenre(genre, PAGE_SIZE, 0)
+      .then(data => {
+        setAlbums(data);
+        setHasMore(data.length === PAGE_SIZE);
+        setOffset(PAGE_SIZE);
+      })
+      .finally(() => setLoading(false));
+  }, [genre]);
+
+  const loadMore = useCallback(() => {
+    if (loadingMore || !hasMore) return;
+    setLoadingMore(true);
+    getAlbumsByGenre(genre, PAGE_SIZE, offset)
+      .then(data => {
+        setAlbums(prev => [...prev, ...data]);
+        setHasMore(data.length === PAGE_SIZE);
+        setOffset(prev => prev + PAGE_SIZE);
+      })
+      .finally(() => setLoadingMore(false));
+  }, [genre, offset, loadingMore, hasMore]);
+
+  return (
+    <div className="content-body animate-fade-in">
+      <button
+        className="btn btn-ghost"
+        onClick={() => navigate(-1)}
+        style={{ marginBottom: '1.5rem', display: 'flex', alignItems: 'center', gap: '0.5rem' }}
+      >
+        <ArrowLeft size={16} />
+        <span>{t('genres.back')}</span>
+      </button>
+
+      <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1.5rem', flexWrap: 'wrap' }}>
+        <h1 className="page-title" style={{ marginBottom: 0 }}>{genre}</h1>
+        {!loading && albums.length > 0 && (
+          <span style={{ display: 'flex', alignItems: 'center', gap: '0.4rem', color: 'var(--text-secondary)', fontSize: '0.9rem', fontWeight: 500 }}>
+            <Disc3 size={14} style={{ color: 'var(--accent)' }} />
+            {t('genres.albumCount', { count: albums.length })}{hasMore ? '+' : ''}
+          </span>
+        )}
+      </div>
+
+      {loading && <p className="loading-text">{t('genres.albumsLoading')}</p>}
+      {!loading && albums.length === 0 && <p className="loading-text">{t('genres.albumsEmpty')}</p>}
+
+      {albums.length > 0 && (
+        <div className="album-grid-wrap">
+          {albums.map(album => <AlbumCard key={album.id} album={album} />)}
+        </div>
+      )}
+
+      {hasMore && !loading && (
+        <div style={{ display: 'flex', justifyContent: 'center', padding: '2rem 0' }}>
+          <button className="btn btn-surface" onClick={loadMore} disabled={loadingMore}>
+            {loadingMore ? t('common.loadingMore') : t('genres.loadMore')}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

src/pages/Genres.tsx

@@ -0,0 +1,128 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import {
+  Headphones, Zap, Music2, Music, Cpu, Mic, Radio, Cloud,
+  Leaf, Heart, Sun, Flame, Film, Globe, BookOpen, Podcast, Star,
+  Tags, type LucideIcon,
+} from 'lucide-react';
+import { getGenres, SubsonicGenre } from '../api/subsonic';
+
+function getGenreIcon(name: string): LucideIcon {
+  const n = name.toLowerCase();
+  if (/ambient|drone|new age/.test(n)) return Cloud;
+  if (/metal|hardcore|thrash|death|grind|doom/.test(n)) return Zap;
+  if (/rock/.test(n)) return Radio;
+  if (/jazz/.test(n)) return Music2;
+  if (/classical|orchestra|chamber|baroque|opera|symphon/.test(n)) return Music;
+  if (/electronic|techno|edm|house|trance|electro|synth/.test(n)) return Cpu;
+  if (/hip.?hop|rap/.test(n)) return Mic;
+  if (/pop/.test(n)) return Star;
+  if (/folk|country|bluegrass|americana/.test(n)) return Leaf;
+  if (/blues/.test(n)) return Music2;
+  if (/soul|r.?b|funk|gospel/.test(n)) return Heart;
+  if (/reggae|ska|dub/.test(n)) return Sun;
+  if (/punk/.test(n)) return Flame;
+  if (/soundtrack|score|ost|film|movie|cinema/.test(n)) return Film;
+  if (/world|latin|afro|celtic|tribal|traditional/.test(n)) return Globe;
+  if (/audiobook|spoken|hörbuch|speech|comedy/.test(n)) return BookOpen;
+  if (/podcast/.test(n)) return Podcast;
+  return Headphones;
+}
+
+const CTP_COLORS = [
+  'var(--ctp-rosewater)', 'var(--ctp-flamingo)', 'var(--ctp-pink)', 'var(--ctp-mauve)',
+  'var(--ctp-red)', 'var(--ctp-maroon)', 'var(--ctp-peach)', 'var(--ctp-yellow)',
+  'var(--ctp-green)', 'var(--ctp-teal)', 'var(--ctp-sky)', 'var(--ctp-sapphire)',
+  'var(--ctp-blue)', 'var(--ctp-lavender)',
+];
+
+function genreColor(name: string): string {
+  let h = 0;
+  for (let i = 0; i < name.length; i++) h = (h * 31 + name.charCodeAt(i)) >>> 0;
+  return CTP_COLORS[h % CTP_COLORS.length];
+}
+
+const SCROLL_KEY = 'genres-scroll';
+
+export default function Genres() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const [genres, setGenres] = useState<SubsonicGenre[]>([]);
+  const [loading, setLoading] = useState(true);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    getGenres()
+      .then(data => {
+        const sorted = [...data].sort((a, b) => b.albumCount - a.albumCount);
+        setGenres(sorted);
+      })
+      .finally(() => setLoading(false));
+  }, []);
+
+  // Restore scroll position after genres are rendered
+  useEffect(() => {
+    if (loading || genres.length === 0) return;
+    const saved = sessionStorage.getItem(SCROLL_KEY);
+    if (!saved) return;
+    const pos = parseInt(saved, 10);
+    sessionStorage.removeItem(SCROLL_KEY);
+    requestAnimationFrame(() => {
+      if (containerRef.current) containerRef.current.scrollTop = pos;
+    });
+  }, [loading, genres.length]);
+
+  const handleGenreClick = (genreValue: string) => {
+    if (containerRef.current) {
+      sessionStorage.setItem(SCROLL_KEY, String(containerRef.current.scrollTop));
+    }
+    navigate(`/genres/${encodeURIComponent(genreValue)}`);
+  };
+
+  return (
+    <div ref={containerRef} className="content-body animate-fade-in">
+      <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1.5rem', flexWrap: 'wrap' }}>
+        <h1 className="page-title" style={{ marginBottom: 0 }}>{t('genres.title')}</h1>
+        {!loading && genres.length > 0 && (
+          <span style={{ display: 'flex', alignItems: 'center', gap: '0.4rem', color: 'var(--text-secondary)', fontSize: '0.9rem', fontWeight: 500 }}>
+            <Tags size={14} style={{ color: 'var(--accent)' }} />
+            {genres.length} {t('genres.genreCount')}
+          </span>
+        )}
+      </div>
+
+      {loading && <p className="loading-text">{t('genres.loading')}</p>}
+      {!loading && genres.length === 0 && <p className="loading-text">{t('genres.empty')}</p>}
+
+      {!loading && genres.length > 0 && (
+        <div className="album-grid-wrap">
+          {genres.map(genre => {
+            const Icon = getGenreIcon(genre.value);
+            const color = genreColor(genre.value);
+            return (
+              <div
+                key={genre.value}
+                className="genre-card"
+                style={{ '--genre-color': color } as React.CSSProperties}
+                onClick={() => handleGenreClick(genre.value)}
+                role="button"
+                tabIndex={0}
+                onKeyDown={e => e.key === 'Enter' && handleGenreClick(genre.value)}
+                data-tooltip={genre.value}
+              >
+                <div className="genre-card-watermark">
+                  <Icon size={80} strokeWidth={1.2} />
+                </div>
+                <p className="genre-card-name">{genre.value}</p>
+                <p className="genre-card-count">
+                  {t('genres.albumCount', { count: genre.albumCount })}
+                </p>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}

src/pages/Help.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { ChevronDown, Rocket, Play, LibraryBig, Settings2, Radio, Wrench, Shuffle } from 'lucide-react';
+import { ChevronDown, Rocket, Play, LibraryBig, Settings2, Radio, Wrench, Shuffle, WifiOff } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 
 interface FaqItem { q: string; a: string; }
@@ -43,9 +43,9 @@ export default function Help() {
         { q: t('help.q7'), a: t('help.a7') },
         { q: t('help.q8'), a: t('help.a8') },
         { q: t('help.q22'), a: t('help.a22') },
-        { q: t('help.q23'), a: t('help.a23') },
         { q: t('help.q24'), a: t('help.a24') },
         { q: t('help.q29'), a: t('help.a29') },
+        { q: t('help.q30'), a: t('help.a30') },
       ],
     },
     {
@@ -64,8 +64,9 @@ export default function Help() {
       items: [
         { q: t('help.q12'), a: t('help.a12') },
         { q: t('help.q13'), a: t('help.a13') },
-        { q: t('help.q14'), a: t('help.a14') },
         { q: t('help.q15'), a: t('help.a15') },
+        { q: t('help.q31'), a: t('help.a31') },
+        { q: t('help.q32'), a: t('help.a32') },
       ],
     },
     {
@@ -85,6 +86,15 @@ export default function Help() {
         { q: t('help.q28'), a: t('help.a28') },
       ],
     },
+    {
+      icon: <WifiOff size={18} />,
+      title: t('help.s8'),
+      items: [
+        { q: t('help.q34'), a: t('help.a34') },
+        { q: t('help.q35'), a: t('help.a35') },
+        { q: t('help.q36'), a: t('help.a36') },
+      ],
+    },
     {
       icon: <Wrench size={18} />,
       title: t('help.s6'),
@@ -101,9 +111,9 @@ export default function Help() {
     <div className="content-body animate-fade-in">
       <h1 className="page-title" style={{ marginBottom: '2rem' }}>{t('help.title')}</h1>
 
-      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '1.25rem', alignItems: 'start' }}>
+      <div style={{ columns: 2, columnGap: '1.25rem' }}>
         {sections.map((section, si) => (
-          <section key={si} className="settings-section">
+          <section key={si} className="settings-section" style={{ breakInside: 'avoid', marginBottom: '1.25rem' }}>
             <div className="settings-section-header">
               {section.icon}
               <h2>{section.title}</h2>

src/pages/Home.tsx

@@ -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>

src/pages/InternetRadio.tsx

@@ -0,0 +1,892 @@
+import React, { useEffect, useState, useRef, useMemo, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import { Cast, Plus, Trash2, X, Globe, Camera, Loader2, Search, Heart, Check } from 'lucide-react';
+import { useDragSource, useDragDrop } from '../contexts/DragDropContext';
+import {
+  getInternetRadioStations, createInternetRadioStation,
+  updateInternetRadioStation, deleteInternetRadioStation,
+  uploadRadioCoverArt, deleteRadioCoverArt,
+  uploadRadioCoverArtBytes, searchRadioBrowser, getTopRadioStations, fetchUrlBytes,
+  InternetRadioStation, RadioBrowserStation, buildCoverArtUrl, coverArtCacheKey, RADIO_PAGE_SIZE,
+} from '../api/subsonic';
+import { usePlayerStore } from '../store/playerStore';
+import CachedImage from '../components/CachedImage';
+import CustomSelect from '../components/CustomSelect';
+import { useTranslation } from 'react-i18next';
+import { open } from '@tauri-apps/plugin-shell';
+import { showToast } from '../utils/toast';
+
+export default function InternetRadio() {
+  const { t } = useTranslation();
+  const { playRadio, stop, currentRadio, isPlaying } = usePlayerStore();
+
+  const [stations, setStations] = useState<InternetRadioStation[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [deleteConfirmId, setDeleteConfirmId] = useState<string | null>(null);
+  // null = closed, 'new' = create modal, InternetRadioStation = edit modal
+  const [modalStation, setModalStation] = useState<InternetRadioStation | 'new' | null>(null);
+  const [browseOpen, setBrowseOpen] = useState(false);
+
+  const [sortBy, setSortBy] = useState<'manual' | 'az' | 'za' | 'newest'>('manual');
+  const [activeFilter, setActiveFilter] = useState('all');
+  const [activeLetter, setActiveLetter] = useState<string | null>(null);
+  const [favorites, setFavorites] = useState<Set<string>>(() => {
+    try { return new Set<string>(JSON.parse(localStorage.getItem('psysonic_radio_favorites') ?? '[]')); }
+    catch { return new Set<string>(); }
+  });
+  const [manualOrder, setManualOrder] = useState<string[]>([]);
+  const [dragOver, setDragOver] = useState<{ id: string; side: 'before' | 'after' } | null>(null);
+
+  useEffect(() => {
+    getInternetRadioStations()
+      .then(setStations)
+      .catch(() => {})
+      .finally(() => setLoading(false));
+  }, []);
+
+  const reload = async () => {
+    const list = await getInternetRadioStations().catch(() => [] as InternetRadioStation[]);
+    setStations(list);
+  };
+
+  // Merge saved manual order with current stations when stations change
+  useEffect(() => {
+    if (!stations.length) return;
+    const saved: string[] = (() => {
+      try { return JSON.parse(localStorage.getItem('psysonic_radio_order') ?? '[]'); }
+      catch { return []; }
+    })();
+    const currentIds = new Set(stations.map(s => s.id));
+    const merged = saved.filter((id: string) => currentIds.has(id));
+    stations.forEach(s => { if (!merged.includes(s.id)) merged.push(s.id); });
+    setManualOrder(merged);
+  }, [stations]);
+
+  const toggleFavorite = useCallback((id: string) => {
+    setFavorites(prev => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id); else next.add(id);
+      localStorage.setItem('psysonic_radio_favorites', JSON.stringify([...next]));
+      return next;
+    });
+  }, []);
+
+  const handleReorder = useCallback((srcId: string, tgtId: string, side: 'before' | 'after') => {
+    setManualOrder(prev => {
+      const order = [...prev];
+      const si = order.indexOf(srcId);
+      if (si === -1) return prev;
+      order.splice(si, 1);                         // remove from original position
+      const ti = order.indexOf(tgtId);             // recalculate after removal
+      if (ti === -1) return prev;
+      const insertAt = side === 'before' ? ti : ti + 1;
+      order.splice(insertAt, 0, srcId);
+      localStorage.setItem('psysonic_radio_order', JSON.stringify(order));
+      return order;
+    });
+  }, []);
+
+  // After chip-filter + sort, but before alphabet filter — used to compute available letters
+  const sortedFilteredStations = useMemo(() => {
+    let list = [...stations];
+    if (activeFilter === 'favorites') list = list.filter(s => favorites.has(s.id));
+    if (sortBy === 'az') list.sort((a, b) => a.name.localeCompare(b.name));
+    else if (sortBy === 'za') list.sort((a, b) => b.name.localeCompare(a.name));
+    else if (sortBy === 'newest') list.reverse();
+    else {
+      const orderMap = new Map(manualOrder.map((id, i) => [id, i]));
+      list.sort((a, b) => (orderMap.get(a.id) ?? 999) - (orderMap.get(b.id) ?? 999));
+    }
+    return list;
+  }, [stations, activeFilter, favorites, sortBy, manualOrder]);
+
+  const availableLetters = useMemo(() => {
+    const set = new Set<string>();
+    for (const s of sortedFilteredStations) {
+      const ch = s.name.trim()[0]?.toUpperCase() ?? '';
+      if (ch >= 'A' && ch <= 'Z') set.add(ch);
+      else if (ch) set.add('#');
+    }
+    return set;
+  }, [sortedFilteredStations]);
+
+  const displayedStations = useMemo(() => {
+    if (!activeLetter) return sortedFilteredStations;
+    return sortedFilteredStations.filter(s => {
+      const ch = s.name.trim()[0]?.toUpperCase() ?? '';
+      if (activeLetter === '#') return !(ch >= 'A' && ch <= 'Z');
+      return ch === activeLetter;
+    });
+  }, [sortedFilteredStations, activeLetter]);
+
+  const handleSave = async (opts: {
+    name: string;
+    streamUrl: string;
+    homepageUrl: string;
+    coverFile: File | null;
+    coverRemoved: boolean;
+  }) => {
+    if (modalStation === 'new') {
+      await createInternetRadioStation(
+        opts.name.trim(),
+        opts.streamUrl.trim(),
+        opts.homepageUrl.trim() || undefined
+      );
+      if (opts.coverFile) {
+        // Reload first to get the new station's ID, then upload cover
+        const updated = await getInternetRadioStations().catch(() => [] as InternetRadioStation[]);
+        const created = updated.find(
+          s => s.name === opts.name.trim() && s.streamUrl === opts.streamUrl.trim()
+        );
+        if (created) {
+          try {
+            await uploadRadioCoverArt(created.id, opts.coverFile);
+          } catch (err) {
+            showToast(typeof err === 'string' ? err : err instanceof Error ? err.message : 'Cover upload failed', 4000, 'error');
+          }
+          // Reload again so coverArt field is picked up
+          await reload();
+        } else {
+          setStations(updated);
+        }
+      } else {
+        await reload();
+      }
+    } else {
+      const id = (modalStation as InternetRadioStation).id;
+      await updateInternetRadioStation(
+        id,
+        opts.name.trim(),
+        opts.streamUrl.trim(),
+        opts.homepageUrl.trim() || undefined
+      );
+      if (opts.coverFile) {
+        try {
+          await uploadRadioCoverArt(id, opts.coverFile);
+        } catch (err) {
+          showToast(typeof err === 'string' ? err : err instanceof Error ? err.message : 'Cover upload failed', 4000, 'error');
+        }
+      } else if (opts.coverRemoved) {
+        await deleteRadioCoverArt(id).catch(() => {});
+      }
+      await reload();
+    }
+    setModalStation(null);
+  };
+
+  const handleDelete = async (e: React.MouseEvent, s: InternetRadioStation) => {
+    e.stopPropagation();
+    if (deleteConfirmId !== s.id) {
+      setDeleteConfirmId(s.id);
+      return;
+    }
+    if (currentRadio?.id === s.id) stop();
+    try {
+      await deleteInternetRadioStation(s.id);
+      setStations(prev => prev.filter(st => st.id !== s.id));
+    } catch {}
+    setDeleteConfirmId(null);
+  };
+
+  const handlePlay = (e: React.MouseEvent, s: InternetRadioStation) => {
+    e.stopPropagation();
+    if (currentRadio?.id === s.id && isPlaying) {
+      stop();
+    } else {
+      playRadio(s);
+    }
+  };
+
+  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 ── */}
+      <div className="playlists-header">
+        <h1 className="page-title" style={{ marginBottom: 0 }}>{t('radio.title')}</h1>
+        <div style={{ display: 'flex', gap: 8 }}>
+          <button className="btn btn-primary" onClick={() => setBrowseOpen(true)}>
+            <Search size={14} /> {t('radio.browseDirectory')}
+          </button>
+          <button className="btn btn-primary" onClick={() => setModalStation('new')}>
+            <Plus size={15} /> {t('radio.addStation')}
+          </button>
+        </div>
+      </div>
+
+      {/* ── Toolbar + Grid ── */}
+      {stations.length === 0 ? (
+        <div className="empty-state">{t('radio.empty')}</div>
+      ) : (
+        <>
+          <RadioToolbar
+            sortBy={sortBy}
+            activeFilter={activeFilter}
+            onSortChange={setSortBy}
+            onFilterChange={f => { setActiveFilter(f); setActiveLetter(null); }}
+          />
+          <AlphabetFilterBar
+            activeLetter={activeLetter}
+            availableLetters={availableLetters}
+            onSelect={l => setActiveLetter(prev => prev === l ? null : l)}
+          />
+          {displayedStations.length === 0 ? (
+            <div className="empty-state">{t('radio.noFavorites')}</div>
+          ) : (
+            <div className="album-grid-wrap">
+              {displayedStations.map(s => (
+                <RadioCard
+                  key={s.id}
+                  s={s}
+                  isActive={currentRadio?.id === s.id}
+                  isPlaying={isPlaying}
+                  deleteConfirmId={deleteConfirmId}
+                  isFavorite={favorites.has(s.id)}
+                  isManual={sortBy === 'manual'}
+                  dropIndicator={dragOver?.id === s.id ? dragOver.side : null}
+                  onPlay={e => handlePlay(e, s)}
+                  onDelete={e => handleDelete(e, s)}
+                  onEdit={() => setModalStation(s)}
+                  onFavoriteToggle={() => toggleFavorite(s.id)}
+                  onDragEnter={side => setDragOver({ id: s.id, side })}
+                  onDragLeave={() => setDragOver(prev => prev?.id === s.id ? null : prev)}
+                  onDropOnto={(srcId, side) => handleReorder(srcId, s.id, side)}
+                  onCardMouseLeave={() => { if (deleteConfirmId === s.id) setDeleteConfirmId(null); }}
+                />
+              ))}
+            </div>
+          )}
+        </>
+      )}
+
+      {/* ── Edit/Create Modal ── */}
+      {modalStation !== null && (
+        <RadioEditModal
+          station={modalStation === 'new' ? null : modalStation}
+          onClose={() => setModalStation(null)}
+          onSave={handleSave}
+        />
+      )}
+
+      {/* ── Directory Modal ── */}
+      {browseOpen && (
+        <RadioDirectoryModal
+          onClose={() => setBrowseOpen(false)}
+          onAdded={reload}
+        />
+      )}
+    </div>
+  );
+}
+
+// ── Toolbar ───────────────────────────────────────────────────────────────────
+
+interface RadioToolbarProps {
+  sortBy: 'manual' | 'az' | 'za' | 'newest';
+  activeFilter: string;
+  onSortChange: (s: 'manual' | 'az' | 'za' | 'newest') => void;
+  onFilterChange: (f: string) => void;
+}
+
+function RadioToolbar({ sortBy, activeFilter, onSortChange, onFilterChange }: RadioToolbarProps) {
+  const { t } = useTranslation();
+  const sortOptions = [
+    { value: 'manual', label: t('radio.sortManual') },
+    { value: 'az',     label: t('radio.sortAZ') },
+    { value: 'za',     label: t('radio.sortZA') },
+    { value: 'newest', label: t('radio.sortNewest') },
+  ];
+  return (
+    <div className="radio-toolbar">
+      <div className="radio-toolbar-chips">
+        {(['all', 'favorites'] as const).map(f => (
+          <button
+            key={f}
+            className={`radio-filter-chip${activeFilter === f ? ' active' : ''}`}
+            onClick={() => onFilterChange(f)}
+          >
+            {f === 'all' ? t('radio.filterAll') : t('radio.filterFavorites')}
+          </button>
+        ))}
+      </div>
+      <CustomSelect
+        value={sortBy}
+        options={sortOptions}
+        onChange={v => onSortChange(v as RadioToolbarProps['sortBy'])}
+        style={{ width: 'max-content', minWidth: 130, maxWidth: 220, flexShrink: 0 }}
+      />
+    </div>
+  );
+}
+
+// ── Alphabet Filter Bar ────────────────────────────────────────────────────────
+
+const ALPHABET_KEYS = ['#', ...Array.from({ length: 26 }, (_, i) => String.fromCharCode(65 + i))];
+
+interface AlphabetFilterBarProps {
+  activeLetter: string | null;
+  availableLetters: Set<string>;
+  onSelect: (l: string) => void;
+}
+
+function AlphabetFilterBar({ activeLetter, availableLetters, onSelect }: AlphabetFilterBarProps) {
+  return (
+    <div className="alphabet-filter-bar">
+      {ALPHABET_KEYS.map(l => {
+        const available = availableLetters.has(l);
+        const active = activeLetter === l;
+        return (
+          <button
+            key={l}
+            className={`alphabet-filter-btn${active ? ' active' : ''}${!available ? ' empty' : ''}`}
+            onClick={() => { if (available) onSelect(l); }}
+            tabIndex={available ? 0 : -1}
+          >
+            {l}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+// ── Radio Card ────────────────────────────────────────────────────────────────
+
+interface RadioCardProps {
+  s: InternetRadioStation;
+  isActive: boolean;
+  isPlaying: boolean;
+  deleteConfirmId: string | null;
+  isFavorite: boolean;
+  isManual: boolean;
+  dropIndicator: 'before' | 'after' | null;
+  onPlay: (e: React.MouseEvent) => void;
+  onDelete: (e: React.MouseEvent) => void;
+  onEdit: () => void;
+  onFavoriteToggle: () => void;
+  onDragEnter: (side: 'before' | 'after') => void;
+  onDragLeave: () => void;
+  onDropOnto: (srcId: string, side: 'before' | 'after') => void;
+  onCardMouseLeave: () => void;
+}
+
+function RadioCard({
+  s, isActive, isPlaying, deleteConfirmId, isFavorite, isManual, dropIndicator,
+  onPlay, onDelete, onEdit, onFavoriteToggle, onDragEnter, onDragLeave,
+  onDropOnto, onCardMouseLeave,
+}: RadioCardProps) {
+  const { t } = useTranslation();
+  const cardRef = useRef<HTMLDivElement>(null);
+  const lastSideRef = useRef<'before' | 'after'>('after');
+  const { isDragging, payload } = useDragDrop();
+  const isBeingDragged = isDragging && !!payload && (() => {
+    try { return JSON.parse(payload.data).id === s.id; } catch { return false; }
+  })();
+
+  const dragHandlers = useDragSource(() => ({
+    data: JSON.stringify({ type: 'radio', id: s.id }),
+    label: s.name,
+  }));
+
+  // Calculate which half of the card the cursor is on
+  const getSide = (e: React.MouseEvent): 'before' | 'after' => {
+    const rect = cardRef.current?.getBoundingClientRect();
+    if (!rect) return 'after';
+    return e.clientX < rect.left + rect.width / 2 ? 'before' : 'after';
+  };
+
+  // psy-drop listener: fires when a drag is released over this card
+  useEffect(() => {
+    if (!isManual) return;
+    const el = cardRef.current;
+    if (!el) return;
+    const handler = (e: Event) => {
+      const data = JSON.parse((e as CustomEvent).detail?.data ?? '{}');
+      if (data.type === 'radio' && data.id !== s.id) onDropOnto(data.id, lastSideRef.current);
+    };
+    el.addEventListener('psy-drop', handler);
+    return () => el.removeEventListener('psy-drop', handler);
+  }, [isManual, s.id, onDropOnto]);
+
+  return (
+    <div
+      ref={cardRef}
+      className={[
+        'album-card',
+        isActive ? 'radio-card-active' : '',
+        dropIndicator === 'before' ? 'radio-card-drop-before' : '',
+        dropIndicator === 'after' ? 'radio-card-drop-after' : '',
+      ].filter(Boolean).join(' ')}
+      style={{ cursor: isManual ? 'grab' : 'default', opacity: isBeingDragged ? 0.4 : 1 }}
+      {...(isManual ? dragHandlers : {})}
+      onMouseMove={e => {
+        if (!isDragging || !isManual) return;
+        const side = getSide(e);
+        lastSideRef.current = side;
+        onDragEnter(side);
+      }}
+      onMouseLeave={() => { onDragLeave(); onCardMouseLeave(); }}
+    >
+      {/* Cover */}
+      <div className="album-card-cover">
+        {s.coverArt ? (
+          <CachedImage
+            src={buildCoverArtUrl(`ra-${s.id}`, 256)}
+            cacheKey={coverArtCacheKey(`ra-${s.id}`, 256)}
+            alt={s.name}
+            className="album-card-cover-img"
+          />
+        ) : (
+          <div className="album-card-cover-placeholder playlist-card-icon">
+            <Cast size={48} strokeWidth={1.2} />
+          </div>
+        )}
+
+        {isActive && isPlaying && (
+          <div className="radio-live-overlay">
+            <span className="radio-live-badge">{t('radio.live')}</span>
+          </div>
+        )}
+
+        <div className="album-card-play-overlay">
+          <button className="album-card-details-btn" onClick={onPlay}>
+            {isActive && isPlaying ? <X size={15} /> : <Cast size={14} />}
+          </button>
+        </div>
+
+        <button
+          className={`playlist-card-delete ${deleteConfirmId === s.id ? 'playlist-card-delete--confirm' : ''}`}
+          onClick={onDelete}
+          data-tooltip={deleteConfirmId === s.id ? t('radio.confirmDelete') : t('radio.deleteStation')}
+          data-tooltip-pos="bottom"
+        >
+          {deleteConfirmId === s.id ? <Trash2 size={12} /> : <X size={12} />}
+        </button>
+      </div>
+
+      {/* Info */}
+      <div className="album-card-info">
+        <div className="album-card-title">{s.name}</div>
+        <div className="album-card-artist" style={{ display: 'flex', gap: '0.35rem', alignItems: 'center' }}>
+          <button className="radio-card-chip" onClick={onEdit}>
+            {t('radio.editStation')}
+          </button>
+          <button
+            className={`player-btn player-btn-sm radio-favorite-btn${isFavorite ? ' active' : ''}`}
+            onClick={e => { e.stopPropagation(); onFavoriteToggle(); }}
+            data-tooltip={t(isFavorite ? 'radio.unfavorite' : 'radio.favorite')}
+          >
+            <Heart size={11} fill={isFavorite ? 'currentColor' : 'none'} />
+          </button>
+          {s.homepageUrl && (
+            <button
+              className="player-btn player-btn-sm"
+              style={{ opacity: 0.6 }}
+              onClick={() => open(s.homepageUrl!)}
+              data-tooltip={t('radio.openHomepage')}
+            >
+              <Globe size={11} />
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ── Radio Edit Modal ──────────────────────────────────────────────────────────
+
+interface RadioEditModalProps {
+  station: InternetRadioStation | null; // null = create new
+  onClose: () => void;
+  onSave: (opts: {
+    name: string;
+    streamUrl: string;
+    homepageUrl: string;
+    coverFile: File | null;
+    coverRemoved: boolean;
+  }) => Promise<void>;
+}
+
+function RadioEditModal({ station, onClose, onSave }: RadioEditModalProps) {
+  const { t } = useTranslation();
+  const [name, setName] = useState(station?.name ?? '');
+  const [streamUrl, setStreamUrl] = useState(station?.streamUrl ?? '');
+  const [homepageUrl, setHomepageUrl] = useState(station?.homepageUrl ?? '');
+  const [coverFile, setCoverFile] = useState<File | null>(null);
+  const [coverPreview, setCoverPreview] = useState<string | null>(null);
+  const [coverRemoved, setCoverRemoved] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const coverInputRef = useRef<HTMLInputElement>(null);
+
+  const hasExistingCover = !coverRemoved && (coverPreview || station?.coverArt);
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    e.target.value = '';
+    if (!file) return;
+    setCoverFile(file);
+    setCoverRemoved(false);
+    const reader = new FileReader();
+    reader.onload = ev => setCoverPreview(ev.target?.result as string);
+    reader.readAsDataURL(file);
+  };
+
+  const handleRemoveCover = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setCoverFile(null);
+    setCoverPreview(null);
+    setCoverRemoved(true);
+  };
+
+  const handleSave = async () => {
+    if (!name.trim() || !streamUrl.trim()) return;
+    setSaving(true);
+    try {
+      await onSave({ name, streamUrl, homepageUrl, coverFile, coverRemoved });
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleOverlayClick = (e: React.MouseEvent) => {
+    if (e.target === e.currentTarget) onClose();
+  };
+
+  return (
+    <div className="modal-overlay" style={{ alignItems: 'center', paddingTop: 0, overflowY: 'auto' }} onClick={handleOverlayClick}>
+      <div
+        className="modal-content"
+        style={{ maxWidth: 440, width: '90%', maxHeight: 'none', overflow: 'visible' }}
+        onClick={e => e.stopPropagation()}
+      >
+        <button className="btn btn-ghost modal-close" onClick={onClose} style={{ top: 16, right: 16 }}>
+          <X size={18} />
+        </button>
+
+        <h2 className="modal-title" style={{ fontSize: 20 }}>
+          {station ? t('radio.editStation') : t('radio.addStation')}
+        </h2>
+
+        {/* Cover + fields side by side */}
+        <div style={{ display: 'flex', gap: 16, alignItems: 'flex-start', marginBottom: 20 }}>
+          {/* Cover */}
+          <div
+            className="playlist-edit-cover-wrap"
+            style={{ width: 140, height: 140 }}
+            onClick={() => coverInputRef.current?.click()}
+          >
+            {coverPreview ? (
+              <img src={coverPreview} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
+            ) : !coverRemoved && station?.coverArt ? (
+              <CachedImage
+                src={buildCoverArtUrl(`ra-${station.id}`, 256)}
+                cacheKey={coverArtCacheKey(`ra-${station.id}`, 256)}
+                alt=""
+                style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
+              />
+            ) : (
+              <div className="album-card-cover-placeholder playlist-card-icon" style={{ width: '100%', height: '100%', borderRadius: 0 }}>
+                <Cast size={36} strokeWidth={1.2} />
+              </div>
+            )}
+            <div className="playlist-edit-cover-overlay">
+              <div className="playlist-edit-cover-menu">
+                <button
+                  className="playlist-edit-cover-menu-item"
+                  onClick={e => { e.stopPropagation(); coverInputRef.current?.click(); }}
+                >
+                  <Camera size={13} />
+                  {t('radio.changeCoverLabel')}
+                </button>
+                {hasExistingCover && (
+                  <button
+                    className="playlist-edit-cover-menu-item playlist-edit-cover-menu-item--danger"
+                    onClick={handleRemoveCover}
+                  >
+                    {t('radio.removeCover')}
+                  </button>
+                )}
+              </div>
+            </div>
+            <input ref={coverInputRef} type="file" accept="image/*" style={{ display: 'none' }} onChange={handleFileChange} />
+          </div>
+
+          {/* Fields */}
+          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 8 }}>
+            <input
+              className="input"
+              style={{ fontSize: 15, fontWeight: 600 }}
+              value={name}
+              onChange={e => setName(e.target.value)}
+              placeholder={t('radio.stationName')}
+              autoFocus
+            />
+            <input
+              className="input"
+              value={streamUrl}
+              onChange={e => setStreamUrl(e.target.value)}
+              placeholder={t('radio.streamUrl')}
+            />
+            <input
+              className="input"
+              value={homepageUrl}
+              onChange={e => setHomepageUrl(e.target.value)}
+              placeholder={t('radio.homepageUrl')}
+            />
+          </div>
+        </div>
+
+        <div className="playlist-edit-footer">
+          <div />
+          <button
+            className="btn btn-primary"
+            onClick={handleSave}
+            disabled={saving || !name.trim() || !streamUrl.trim()}
+          >
+            {saving ? <Loader2 size={14} className="spin-slow" /> : null}
+            {t('radio.save')}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ── Radio Directory Modal ─────────────────────────────────────────────────────
+
+interface RadioDirectoryModalProps {
+  onClose: () => void;
+  onAdded: () => void;
+}
+
+function RadioDirectoryModal({ onClose, onAdded }: RadioDirectoryModalProps) {
+  const { t } = useTranslation();
+  const [query, setQuery] = useState('');
+  const [results, setResults] = useState<RadioBrowserStation[]>([]);
+  const [searching, setSearching] = useState(false);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [offset, setOffset] = useState(0);
+  const [hasMore, setHasMore] = useState(true);
+  const [addingId, setAddingId] = useState<string | null>(null);
+  const [addedIds, setAddedIds] = useState<Set<string>>(new Set());
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const observerRef = useRef<IntersectionObserver | null>(null);
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const queryRef = useRef(query);
+  useEffect(() => { queryRef.current = query; }, [query]);
+
+  const fetchPage = useCallback(async (q: string, off: number, append: boolean) => {
+    if (append) setLoadingMore(true); else setSearching(true);
+    try {
+      const page = q.trim()
+        ? await searchRadioBrowser(q.trim(), off)
+        : await getTopRadioStations(off);
+      if (append) setResults(prev => [...prev, ...page]);
+      else setResults(page);
+      setHasMore(page.length >= RADIO_PAGE_SIZE);
+      setOffset(off + page.length);
+    } catch {
+      if (!append) setResults([]);
+      setHasMore(false);
+    } finally {
+      if (append) setLoadingMore(false); else setSearching(false);
+    }
+  }, []);
+
+  // Load top stations on open
+  useEffect(() => {
+    fetchPage('', 0, false);
+  }, [fetchPage]);
+
+  // Debounced search; reset pagination on new query
+  useEffect(() => {
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => {
+      setOffset(0);
+      setHasMore(true);
+      fetchPage(query, 0, false);
+    }, query.trim() ? 400 : 0);
+    return () => { if (debounceRef.current) clearTimeout(debounceRef.current); };
+  }, [query, fetchPage]);
+
+  // Callback ref: re-creates the IntersectionObserver whenever hasMore/loadingMore/offset change,
+  // so the closure always captures current state — no stale refs needed.
+  const sentinelRef = useCallback((node: HTMLDivElement | null) => {
+    if (observerRef.current) { observerRef.current.disconnect(); observerRef.current = null; }
+    if (!node) return;
+    const root = scrollContainerRef.current ?? null;
+    observerRef.current = new IntersectionObserver(entries => {
+      const entry = entries[0];
+      console.log('[RadioDir] Observer fired:', entry.isIntersecting, '| hasMore:', hasMore, '| loading:', loadingMore);
+      if (entry.isIntersecting && hasMore && !loadingMore) {
+        fetchPage(queryRef.current, offset, true);
+      }
+    }, { root, rootMargin: '200px', threshold: 0 });
+    observerRef.current.observe(node);
+  }, [hasMore, loadingMore, offset, fetchPage]);
+
+  const handleAdd = async (s: RadioBrowserStation) => {
+    if (addedIds.has(s.stationuuid) || addingId !== null) return;
+    setAddingId(s.stationuuid);
+    try {
+      await createInternetRadioStation(s.name, s.url);
+      if (s.favicon) {
+        const list = await getInternetRadioStations().catch(() => [] as InternetRadioStation[]);
+        const created = list.find(r => r.streamUrl === s.url);
+        if (created) {
+          try {
+            const [fileBytes, mimeType] = await fetchUrlBytes(s.favicon);
+            await uploadRadioCoverArtBytes(created.id, fileBytes, mimeType);
+          } catch { /* favicon optional */ }
+        }
+      }
+      onAdded();
+      setAddedIds(prev => new Set(prev).add(s.stationuuid));
+      showToast(`${t('radio.stationAdded')}: ${s.name}`, 3000);
+    } catch (err) {
+      const msg = typeof err === 'string' ? err : (err instanceof Error ? err.message : '');
+      if (msg.toLowerCase().includes('unique constraint') || msg.toLowerCase().includes('radio.name')) {
+        showToast('Ein Sender mit diesem Namen existiert bereits.', 4000, 'error');
+      } else {
+        showToast(msg || 'Failed', 3000, 'error');
+      }
+    } finally {
+      setAddingId(null);
+    }
+  };
+
+  return createPortal(
+    // ── 1. Backdrop ──────────────────────────────────────────────
+    <div
+      style={{
+        position: 'fixed',
+        inset: 0,
+        zIndex: 9999,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        background: 'rgba(17,17,27,0.85)',
+        backdropFilter: 'blur(8px)',
+      }}
+      onClick={e => { if (e.target === e.currentTarget) onClose(); }}
+    >
+      {/* ── 2. Content Box ─────────────────────────────────────── */}
+      <div
+        style={{
+          width: '80vw',
+          maxWidth: 800,
+          height: '80vh',
+          background: 'var(--ctp-surface0)',
+          border: '1px solid var(--border)',
+          borderRadius: 12,
+          boxShadow: 'var(--shadow-lg)',
+          overflow: 'hidden',
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+        onClick={e => e.stopPropagation()}
+      >
+        {/* ── 3. Header ──────────────────────────────────────────── */}
+        <div
+          style={{
+            flexShrink: 0,
+            padding: 20,
+            background: 'var(--ctp-surface0)',
+            zIndex: 10,
+            position: 'relative',
+            borderBottom: '1px solid var(--border)',
+          }}
+        >
+          <button
+            className="btn btn-ghost"
+            style={{ position: 'absolute', top: 16, right: 16, color: 'var(--text-muted)' }}
+            onClick={onClose}
+          >
+            <X size={18} />
+          </button>
+          <h2 style={{ fontSize: 20, fontWeight: 700, marginBottom: 14, color: 'var(--text-primary)', fontFamily: 'var(--font-display)' }}>
+            {t('radio.browseDirectory')}
+          </h2>
+          <input
+            className="input"
+            value={query}
+            onChange={e => setQuery(e.target.value)}
+            placeholder={t('radio.directoryPlaceholder')}
+            autoFocus
+            style={{ width: '100%' }}
+          />
+        </div>
+
+        {/* ── 4. Body / Results ──────────────────────────────────── */}
+        <div ref={scrollContainerRef} style={{ flex: 1, minHeight: 0, overflowY: 'auto', padding: '0 20px 20px' }}>
+          {searching ? (
+            <div style={{ display: 'flex', justifyContent: 'center', padding: '2rem' }}>
+              <div className="spinner" />
+            </div>
+          ) : results.length === 0 ? (
+            <div className="empty-state" style={{ padding: '2rem 0' }}>{t('radio.noResults')}</div>
+          ) : (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 2, paddingTop: 8 }}>
+              {results.map(s => {
+                const isAdded = addedIds.has(s.stationuuid);
+                const isLoading = addingId === s.stationuuid;
+                const isDisabled = isAdded || addingId !== null;
+                return (
+                  <div
+                    key={s.stationuuid}
+                    className={`radio-browser-result${isAdded ? ' added' : ''}${isDisabled ? '' : ' clickable'}`}
+                    onClick={() => handleAdd(s)}
+                  >
+                    {s.favicon ? (
+                      <img
+                        src={s.favicon}
+                        alt=""
+                        className="radio-browser-favicon"
+                        onError={e => { (e.target as HTMLImageElement).style.display = 'none'; }}
+                      />
+                    ) : (
+                      <div className="radio-browser-favicon radio-browser-favicon--placeholder">
+                        <Cast size={16} strokeWidth={1.5} />
+                      </div>
+                    )}
+                    <div className="radio-browser-info">
+                      <div className="radio-browser-name">{s.name}</div>
+                      {s.tags && (
+                        <div className="radio-browser-tags">
+                          {s.tags.split(',').slice(0, 4).map(tag => tag.trim()).filter(Boolean).join(' · ')}
+                        </div>
+                      )}
+                    </div>
+                    <div className="radio-browser-action" aria-hidden>
+                      {isLoading
+                        ? <Loader2 size={14} className="spin-slow" style={{ color: 'var(--accent)' }} />
+                        : isAdded
+                          ? <Check size={14} style={{ color: 'var(--accent)' }} />
+                          : <Plus size={14} style={{ color: 'var(--text-muted)' }} />}
+                    </div>
+                  </div>
+                );
+              })}
+              {/* Sentinel for IntersectionObserver */}
+              <div ref={sentinelRef} style={{ height: 20, width: '100%', flexShrink: 0 }} />
+              {loadingMore && (
+                <div style={{ display: 'flex', justifyContent: 'center', padding: '12px 0' }}>
+                  <div className="spinner" style={{ width: 20, height: 20 }} />
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>,
+    document.body
+  );
+}

src/pages/NewReleases.tsx

@@ -1,17 +1,27 @@
 import React, { useEffect, useState, useCallback, useRef } from 'react';
 import AlbumCard from '../components/AlbumCard';
-import { getAlbumList, SubsonicAlbum } from '../api/subsonic';
+import GenreFilterBar from '../components/GenreFilterBar';
+import { getAlbumList, getAlbumsByGenre, SubsonicAlbum } from '../api/subsonic';
 import { useTranslation } from 'react-i18next';
 
+const PAGE_SIZE = 30;
+
+async function fetchByGenres(genres: string[]): Promise<SubsonicAlbum[]> {
+  const results = await Promise.all(genres.map(g => getAlbumsByGenre(g, 500, 0)));
+  const seen = new Set<string>();
+  const union = results.flat().filter(a => { if (seen.has(a.id)) return false; seen.add(a.id); return true; });
+  return union.sort((a, b) => (b.year ?? 0) - (a.year ?? 0));
+}
+
 export default function NewReleases() {
   const { t } = useTranslation();
   const [albums, setAlbums] = useState<SubsonicAlbum[]>([]);
   const [loading, setLoading] = useState(true);
   const [page, setPage] = useState(0);
   const [hasMore, setHasMore] = useState(true);
-  const PAGE_SIZE = 30;
-
+  const [selectedGenres, setSelectedGenres] = useState<string[]>([]);
   const observerTarget = useRef<HTMLDivElement>(null);
+  const filtered = selectedGenres.length > 0;
 
   const load = useCallback(async (offset: number, append = false) => {
     setLoading(true);
@@ -25,34 +35,44 @@ export default function NewReleases() {
     }
   }, []);
 
-  useEffect(() => { setPage(0); load(0); }, [load]);
+  const loadFiltered = useCallback(async (genres: string[]) => {
+    setLoading(true);
+    try {
+      setAlbums(await fetchByGenres(genres));
+      setHasMore(false);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (filtered) loadFiltered(selectedGenres);
+    else { setPage(0); load(0); }
+  }, [filtered, selectedGenres, load, loadFiltered]);
 
   const loadMore = useCallback(() => {
-    if (loading || !hasMore) return;
+    if (loading || !hasMore || filtered) return;
     const next = page + 1;
     setPage(next);
     load(next * PAGE_SIZE, true);
-  }, [loading, hasMore, page, load]);
+  }, [loading, hasMore, page, load, filtered]);
 
   useEffect(() => {
     const observer = new IntersectionObserver(
-      entries => {
-        if (entries[0].isIntersecting) {
-          loadMore();
-        }
-      },
+      entries => { if (entries[0].isIntersecting) loadMore(); },
       { rootMargin: '200px' }
     );
-    if (observerTarget.current) {
-      observer.observe(observerTarget.current);
-    }
+    if (observerTarget.current) observer.observe(observerTarget.current);
     return () => observer.disconnect();
   }, [loadMore]);
 
   return (
     <div className="content-body animate-fade-in">
-      <h1 className="page-title" style={{ marginBottom: '1.5rem' }}>{t('sidebar.newReleases')}</h1>
-      
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.5rem', flexWrap: 'wrap', gap: '0.75rem' }}>
+        <h1 className="page-title" style={{ marginBottom: 0 }}>{t('sidebar.newReleases')}</h1>
+        <GenreFilterBar selected={selectedGenres} onSelectionChange={setSelectedGenres} />
+      </div>
+
       {loading && albums.length === 0 ? (
         <div style={{ display: 'flex', justifyContent: 'center', padding: '3rem' }}>
           <div className="spinner" />
@@ -62,10 +82,11 @@ export default function NewReleases() {
           <div className="album-grid-wrap">
             {albums.map(a => <AlbumCard key={a.id} album={a} />)}
           </div>
-          
-          <div ref={observerTarget} style={{ height: '20px', margin: '2rem 0', display: 'flex', justifyContent: 'center' }}>
-            {loading && hasMore && <div className="spinner" style={{ width: 20, height: 20 }} />}
-          </div>
+          {!filtered && (
+            <div ref={observerTarget} style={{ height: '20px', margin: '2rem 0', display: 'flex', justifyContent: 'center' }}>
+              {loading && hasMore && <div className="spinner" style={{ width: 20, height: 20 }} />}
+            </div>
+          )}
         </>
       )}
     </div>

src/pages/NowPlaying.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useRef, useEffect, useCallback, memo } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { Music, Star, ExternalLink, MicVocal } from 'lucide-react';
+import { Music, Star, ExternalLink, MicVocal, Heart } from 'lucide-react';
 import { usePlayerStore } from '../store/playerStore';
 import { useLyricsStore } from '../store/lyricsStore';
 import {
@@ -156,34 +156,6 @@ function TagCloud({ similarArtists, onArtistClick }: TagCloudProps) {
   );
 }
 
-// ─── Blurred background ───────────────────────────────────────────────────────
-
-const NpBg = memo(function NpBg({ url }: { url: string }) {
-  const [layers, setLayers] = useState<Array<{ url: string; id: number; visible: boolean }>>(() =>
-    url ? [{ url, id: 0, visible: true }] : []
-  );
-  const nextId = useRef(1);
-
-  useEffect(() => {
-    if (!url) return;
-    const id = nextId.current++;
-    setLayers(prev => [...prev, { url, id, visible: false }]);
-    const t1 = setTimeout(() => setLayers(prev => prev.map(l => ({ ...l, visible: l.id === id }))), 30);
-    const t2 = setTimeout(() => setLayers(prev => prev.filter(l => l.id === id)), 700);
-    return () => { clearTimeout(t1); clearTimeout(t2); };
-  }, [url]);
-
-  return (
-    <div className="np-bg-wrap">
-      {layers.map(l => (
-        <div key={l.id} className="np-bg-layer"
-          style={{ backgroundImage: `url(${l.url})`, opacity: l.visible ? 1 : 0 }}
-        />
-      ))}
-      <div className="np-bg-overlay" />
-    </div>
-  );
-});
 
 // ─── Album Tracklist ──────────────────────────────────────────────────────────
 
@@ -286,47 +258,12 @@ export default function NowPlaying() {
   const coverKey      = currentTrack?.coverArt ? coverArtCacheKey(currentTrack.coverArt, 800) : '';
   const resolvedCover = useCachedUrl(coverFetchUrl, coverKey);
 
-  // Ambilight — sample 8 zones (4 corners + 4 edge midpoints)
-  const [ambilightColors, setAmbilightColors] = useState({
-    tl: '0,0,0', tc: '0,0,0', tr: '0,0,0',
-    ml: '0,0,0',                             mr: '0,0,0',
-    bl: '0,0,0', bc: '0,0,0', br: '0,0,0',
-  });
-  useEffect(() => {
-    if (!resolvedCover) return;
-    const img = new Image();
-    img.onload = () => {
-      const S = 30;
-      const canvas = document.createElement('canvas');
-      canvas.width = S; canvas.height = S;
-      const ctx = canvas.getContext('2d');
-      if (!ctx) return;
-      ctx.drawImage(img, 0, 0, S, S);
-      const data = ctx.getImageData(0, 0, S, S).data;
-      const t = Math.floor(S * 0.25), m = Math.floor(S * 0.5), b2 = Math.floor(S * 0.75);
-      const avg = (x0: number, y0: number, x1: number, y1: number) => {
-        let r = 0, g = 0, b = 0, n = 0;
-        for (let y = y0; y < y1; y++) for (let x = x0; x < x1; x++) {
-          const i = (y * S + x) * 4;
-          r += data[i]; g += data[i+1]; b += data[i+2]; n++;
-        }
-        return `${Math.round(r/n)},${Math.round(g/n)},${Math.round(b/n)}`;
-      };
-      setAmbilightColors({
-        tl: avg(0, 0, t, t),         tc: avg(t, 0, b2, t),        tr: avg(b2, 0, S, t),
-        ml: avg(0, t, t, b2),                                       mr: avg(b2, t, S, b2),
-        bl: avg(0, b2, t, S),        bc: avg(t, b2, b2, S),        br: avg(b2, b2, S, S),
-      });
-    };
-    img.src = resolvedCover;
-  }, [resolvedCover]);
 
 
   const similarArtists = artistInfo?.similarArtist ?? [];
 
   return (
     <div className="np-page">
-      <NpBg url={resolvedCover ?? ''} />
 
       <div className="np-main">
         {currentTrack ? (
@@ -359,7 +296,7 @@ export default function NowPlaying() {
                     <button onClick={toggleStar} className="np-star-btn"
                       data-tooltip={starred ? t('contextMenu.unfavorite') : t('contextMenu.favorite')}
                     >
-                      <Star size={17} fill={starred ? 'var(--ctp-yellow)' : 'none'} color={starred ? 'var(--ctp-yellow)' : 'white'} />
+                      <Heart size={17} fill={starred ? 'var(--ctp-yellow)' : 'none'} color={starred ? 'var(--ctp-yellow)' : 'white'} />
                     </button>
                     <button
                       className="np-star-btn"
@@ -375,23 +312,9 @@ export default function NowPlaying() {
 
               {/* Center: cover */}
               <div className="np-hero-cover-wrap">
-                <div style={{
-                  position: 'absolute', inset: '-20px', zIndex: 0,
-                  background: `
-                    radial-gradient(circle at 0%   0%,   rgba(${ambilightColors.tl},0.85) 0%, transparent 55%),
-                    radial-gradient(circle at 50%  0%,   rgba(${ambilightColors.tc},0.85) 0%, transparent 55%),
-                    radial-gradient(circle at 100% 0%,   rgba(${ambilightColors.tr},0.85) 0%, transparent 55%),
-                    radial-gradient(circle at 0%   50%,  rgba(${ambilightColors.ml},0.85) 0%, transparent 55%),
-                    radial-gradient(circle at 100% 50%,  rgba(${ambilightColors.mr},0.85) 0%, transparent 55%),
-                    radial-gradient(circle at 0%   100%, rgba(${ambilightColors.bl},0.85) 0%, transparent 55%),
-                    radial-gradient(circle at 50%  100%, rgba(${ambilightColors.bc},0.85) 0%, transparent 55%),
-                    radial-gradient(circle at 100% 100%, rgba(${ambilightColors.br},0.85) 0%, transparent 55%)
-                  `,
-                  filter: 'blur(28px)',
-                }} />
                 {resolvedCover
-                  ? <img src={resolvedCover} alt="" className="np-cover" style={{ position: 'relative', zIndex: 1 }} />
-                  : <div className="np-cover np-cover-fallback" style={{ position: 'relative', zIndex: 1 }}><Music size={52} /></div>
+                  ? <img src={resolvedCover} alt="" className="np-cover" />
+                  : <div className="np-cover np-cover-fallback"><Music size={52} /></div>
                 }
               </div>
 
@@ -404,7 +327,7 @@ export default function NowPlaying() {
             </div>
 
             {/* ── About the Artist ── */}
-            {(artistInfo?.biography || artistInfo?.largeImageUrl) && (
+            {artistInfo?.biography && (
               <div className="np-info-card">
                 <div className="np-card-header">
                   <h3 className="np-card-title">{t('nowPlaying.aboutArtist')}</h3>
@@ -416,19 +339,22 @@ export default function NowPlaying() {
                 </div>
                 <div className="np-artist-bio-row">
                   {artistInfo.largeImageUrl && (
-                    <img src={artistInfo.largeImageUrl} alt={currentTrack.artist} className="np-artist-thumb" />
-                  )}
-                  {artistInfo.biography && (
-                    <div className="np-bio-wrap">
-                      <div
-                        className={`np-bio-text${bioExpanded ? ' expanded' : ''}`}
-                        dangerouslySetInnerHTML={{ __html: sanitizeHtml(artistInfo.biography) }}
-                      />
-                      <button className="np-bio-toggle" onClick={() => setBioExpanded(v => !v)}>
-                        {bioExpanded ? t('nowPlaying.showLess') : t('nowPlaying.readMore')}
-                      </button>
-                    </div>
+                    <img
+                      src={artistInfo.largeImageUrl}
+                      alt={currentTrack.artist}
+                      className="np-artist-thumb"
+                      onError={e => { (e.target as HTMLImageElement).style.display = 'none'; }}
+                    />
                   )}
+                  <div className="np-bio-wrap">
+                    <div
+                      className={`np-bio-text${bioExpanded ? ' expanded' : ''}`}
+                      dangerouslySetInnerHTML={{ __html: sanitizeHtml(artistInfo.biography) }}
+                    />
+                    <button className="np-bio-toggle" onClick={() => setBioExpanded(v => !v)}>
+                      {bioExpanded ? t('nowPlaying.showLess') : t('nowPlaying.readMore')}
+                    </button>
+                  </div>
                 </div>
               </div>
             )}

src/pages/OfflineLibrary.tsx

@@ -0,0 +1,178 @@
+import React, { useState } from 'react';
+import { Play, HardDriveDownload, Trash2 } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { useOfflineStore } from '../store/offlineStore';
+import { useAuthStore } from '../store/authStore';
+import { usePlayerStore } from '../store/playerStore';
+import { buildCoverArtUrl, coverArtCacheKey } from '../api/subsonic';
+import CachedImage from '../components/CachedImage';
+
+type FilterType = 'all' | 'album' | 'playlist' | 'artist';
+
+export default function OfflineLibrary() {
+  const { t } = useTranslation();
+  const serverId = useAuthStore(s => s.activeServerId ?? '');
+  const offlineAlbums = useOfflineStore(s => s.albums);
+  const offlineTracks = useOfflineStore(s => s.tracks);
+  const deleteAlbum = useOfflineStore(s => s.deleteAlbum);
+  const playTrack = usePlayerStore(s => s.playTrack);
+  const enqueue = usePlayerStore(s => s.enqueue);
+  const [filter, setFilter] = useState<FilterType>('all');
+
+  const albums = Object.values(offlineAlbums).filter(a => a.serverId === serverId);
+
+  const countByType = (type: FilterType) => {
+    if (type === 'all') return albums.length;
+    return albums.filter(a => (a.type ?? 'album') === type).length;
+  };
+
+  const filtered = filter === 'all'
+    ? albums
+    : albums.filter(a => (a.type ?? 'album') === filter);
+
+  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);
+    if (tracks[0]) playTrack(tracks[0], tracks);
+  };
+
+  const handleEnqueue = (albumId: string) => {
+    enqueue(buildTracks(albumId));
+  };
+
+  const renderCard = (album: typeof albums[0]) => {
+    const coverUrl = album.coverArt ? buildCoverArtUrl(album.coverArt, 300) : '';
+    const cacheKey = album.coverArt ? coverArtCacheKey(album.coverArt, 300) : '';
+    const trackCount = album.trackIds.filter(tid => !!offlineTracks[`${serverId}:${tid}`]).length;
+    return (
+      <div key={`${album.serverId}:${album.id}`} className="album-card card offline-library-card">
+        <div className="album-card-cover">
+          {coverUrl ? (
+            <CachedImage src={coverUrl} cacheKey={cacheKey} alt={`${album.name} Cover`} loading="lazy" />
+          ) : (
+            <div className="album-card-cover-placeholder">
+              <HardDriveDownload size={32} />
+            </div>
+          )}
+          <div className="album-card-play-overlay">
+            <button
+              className="album-card-details-btn"
+              onClick={() => handlePlay(album.id)}
+              aria-label={`${album.name} abspielen`}
+            >
+              <Play size={15} fill="currentColor" />
+            </button>
+          </div>
+        </div>
+        <div className="album-card-info">
+          <p className="album-card-title truncate">{album.name}</p>
+          <p className="album-card-artist truncate">{album.artist}</p>
+          {album.year && <p className="album-card-year">{album.year}</p>}
+          <div className="offline-library-card-meta">
+            <button
+              className="offline-library-enqueue"
+              onClick={() => handleEnqueue(album.id)}
+              data-tooltip={t('queue.addToQueue')}
+              data-tooltip-pos="top"
+            >
+              + Queue
+            </button>
+            <span className="offline-library-tracks">{trackCount} tracks</span>
+            <button
+              className="offline-library-delete"
+              onClick={() => deleteAlbum(album.id, serverId)}
+              data-tooltip={t('albumDetail.removeOffline')}
+              data-tooltip-pos="top"
+            >
+              <Trash2 size={11} />
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  // For artist filter: group by artist name
+  const renderArtistGroups = () => {
+    const groups: Record<string, typeof albums> = {};
+    for (const album of filtered) {
+      const key = album.artist || '—';
+      if (!groups[key]) groups[key] = [];
+      groups[key].push(album);
+    }
+    const sortedArtists = Object.keys(groups).sort((a, b) => a.localeCompare(b));
+    return sortedArtists.map(artistName => (
+      <div key={artistName} className="offline-artist-group">
+        <h2 className="offline-artist-group-heading">{artistName}</h2>
+        <div className="album-grid-wrap">
+          {groups[artistName].map(renderCard)}
+        </div>
+      </div>
+    ));
+  };
+
+  const TABS: { id: FilterType; labelKey: string }[] = [
+    { id: 'all',      labelKey: 'connection.offlineFilterAll' },
+    { id: 'album',    labelKey: 'connection.offlineFilterAlbums' },
+    { id: 'playlist', labelKey: 'connection.offlineFilterPlaylists' },
+    { id: 'artist',   labelKey: 'connection.offlineFilterArtists' },
+  ];
+
+  return (
+    <div className="offline-library animate-fade-in">
+      <div className="offline-library-header">
+        <HardDriveDownload size={24} />
+        <div>
+          <h1 className="offline-library-title">{t('connection.offlineLibraryTitle')}</h1>
+          <p className="offline-library-count">
+            {t('connection.offlineAlbumCount', { n: albums.length, count: albums.length })}
+          </p>
+        </div>
+      </div>
+
+      <div className="offline-filter-tabs">
+        {TABS.map(tab => {
+          const count = countByType(tab.id);
+          if (tab.id !== 'all' && count === 0) return null;
+          return (
+            <button
+              key={tab.id}
+              className={`offline-filter-tab${filter === tab.id ? ' active' : ''}`}
+              onClick={() => setFilter(tab.id)}
+            >
+              {t(tab.labelKey)}
+              <span className="offline-filter-tab-count">{count}</span>
+            </button>
+          );
+        })}
+      </div>
+
+      {filtered.length === 0 ? (
+        <div className="empty-state">{t('connection.offlineLibraryEmpty')}</div>
+      ) : filter === 'artist' ? (
+        renderArtistGroups()
+      ) : (
+        <div className="album-grid-wrap">
+          {filtered.map(renderCard)}
+        </div>
+      )}
+    </div>
+  );
+}

src/pages/Playlists.tsx

@@ -1,137 +1,188 @@
-import React, { useEffect, useState, useMemo } from 'react';
-import { SubsonicPlaylist, getPlaylists, getPlaylist, deletePlaylist } from '../api/subsonic';
-import { usePlayerStore } from '../store/playerStore';
-import { Play, Trash2, ChevronUp, ChevronDown } from 'lucide-react';
+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';
 
-type SortKey = 'name' | 'songCount' | 'duration';
-type SortDir = 'asc' | 'desc';
-
 function formatDuration(seconds: number): string {
   const h = Math.floor(seconds / 3600);
   const m = Math.floor((seconds % 3600) / 60);
-  return h > 0 ? `${h}h ${m}m` : `${m}m`;
-}
-
-function SortHeader({
-  label, sortKey, current, dir, onSort
-}: {
-  label: string;
-  sortKey: SortKey;
-  current: SortKey;
-  dir: SortDir;
-  onSort: (k: SortKey) => void;
-}) {
-  const active = current === sortKey;
-  return (
-    <button className={`playlist-sort-btn${active ? ' active' : ''}`} onClick={() => onSort(sortKey)}>
-      {label}
-      {active ? (dir === 'asc' ? <ChevronUp size={13} /> : <ChevronDown size={13} />) : null}
-    </button>
-  );
+  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 [filter, setFilter] = useState('');
-  const [sortKey, setSortKey] = useState<SortKey>('name');
-  const [sortDir, setSortDir] = useState<SortDir>('asc');
+  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);
 
-  const playTrack = usePlayerStore(s => s.playTrack);
-  const clearQueue = usePlayerStore(s => s.clearQueue);
-
-  const fetchPlaylists = () => {
-    setLoading(true);
+  useEffect(() => {
     getPlaylists()
-      .then(data => { setPlaylists(data); setLoading(false); })
-      .catch(err => { console.error('Failed to load playlists', err); setLoading(false); });
-  };
+      .then(setPlaylists)
+      .catch(() => {})
+      .finally(() => setLoading(false));
+  }, []);
 
-  useEffect(() => { fetchPlaylists(); }, []);
+  useEffect(() => {
+    if (creating) nameInputRef.current?.focus();
+  }, [creating]);
 
-  const handleSort = (key: SortKey) => {
-    if (sortKey === key) setSortDir(d => d === 'asc' ? 'desc' : 'asc');
-    else { setSortKey(key); setSortDir('asc'); }
-  };
-
-  const handlePlay = async (id: string) => {
+  const handleCreate = async () => {
+    const name = newName.trim() || t('playlists.unnamed');
     try {
-      const data = await getPlaylist(id);
-      const tracks = data.songs.map((s: any) => ({
-        id: s.id, title: s.title, artist: s.artist, album: s.album,
-        albumId: s.albumId, artistId: s.artistId, duration: s.duration,
-        coverArt: s.coverArt, track: s.track, year: s.year,
-        bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating,
-      }));
-      if (tracks.length > 0) { clearQueue(); playTrack(tracks[0], tracks); }
-    } catch (e) { console.error('Failed to play playlist', e); }
+      await createPlaylist(name);
+      const updated = await getPlaylists();
+      setPlaylists(updated);
+    } catch {}
+    setCreating(false);
+    setNewName('');
   };
 
-  const handleDelete = async (id: string, name: string) => {
-    if (confirm(t('playlists.confirmDelete', { name }))) {
-      try { await deletePlaylist(id); fetchPlaylists(); }
-      catch (e) { console.error('Failed to delete playlist', e); }
+  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);
   };
 
-  const visible = useMemo(() => {
-    const q = filter.toLowerCase();
-    const filtered = q ? playlists.filter(p => p.name.toLowerCase().includes(q)) : playlists;
-    return [...filtered].sort((a, b) => {
-      let cmp = 0;
-      if (sortKey === 'name') cmp = a.name.localeCompare(b.name);
-      else if (sortKey === 'songCount') cmp = a.songCount - b.songCount;
-      else cmp = a.duration - b.duration;
-      return sortDir === 'asc' ? cmp : -cmp;
-    });
-  }, [playlists, filter, sortKey, sortDir]);
+  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">
-      <div className="playlist-page-header">
-        <h1 className="page-title">{t('playlists.title')}</h1>
-        <input
-          className="playlist-filter-input"
-          type="search"
-          placeholder={t('playlists.filterPlaceholder')}
-          value={filter}
-          onChange={e => setFilter(e.target.value)}
-        />
+
+      {/* ── 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>
 
-      {loading ? (
-        <div className="loading-center"><div className="spinner" /></div>
-      ) : playlists.length === 0 ? (
-        <div className="empty-state" style={{ whiteSpace: 'pre-line' }}>{t('playlists.empty')}</div>
+      {/* ── Grid ── */}
+      {playlists.length === 0 ? (
+        <div className="empty-state">{t('playlists.empty')}</div>
       ) : (
-        <div className="playlist-list">
-          <div className="playlist-list-header">
-            <div />
-            <SortHeader label={t('playlists.colName')} sortKey="name" current={sortKey} dir={sortDir} onSort={handleSort} />
-            <SortHeader label={t('playlists.colTracks')} sortKey="songCount" current={sortKey} dir={sortDir} onSort={handleSort} />
-            <SortHeader label={t('playlists.colDuration')} sortKey="duration" current={sortKey} dir={sortDir} onSort={handleSort} />
-            <div />
-          </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>
+                )}
 
-          {visible.length === 0 ? (
-            <div className="empty-state">{t('playlists.noResults')}</div>
-          ) : visible.map(p => (
-            <div key={p.id} className="playlist-row">
-              <button className="playlist-play-icon" onClick={() => handlePlay(p.id)} data-tooltip={t('playlists.play')}>
-                <Play size={14} fill="currentColor" />
-              </button>
-              <span className="playlist-name truncate">{p.name}</span>
-              <span className="playlist-meta">{t('playlists.track', { count: p.songCount })}</span>
-              <span className="playlist-meta">{formatDuration(p.duration)}</span>
-              <button
-                className="btn btn-ghost playlist-delete-btn"
-                onClick={() => handleDelete(p.id, p.name)}
-                data-tooltip={t('playlists.deleteTooltip')}
-              >
-                <Trash2 size={15} />
-              </button>
+                {/* 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>

src/pages/RandomAlbums.tsx

@@ -1,23 +1,40 @@
 import React, { useEffect, useState, useCallback, useRef } from 'react';
 import { RefreshCw } from 'lucide-react';
-import { getAlbumList, SubsonicAlbum } from '../api/subsonic';
+import { getAlbumList, getAlbumsByGenre, SubsonicAlbum } from '../api/subsonic';
 import AlbumCard from '../components/AlbumCard';
+import GenreFilterBar from '../components/GenreFilterBar';
 import { useTranslation } from 'react-i18next';
 
 const ALBUM_COUNT = 30;
 
+async function fetchByGenres(genres: string[]): Promise<SubsonicAlbum[]> {
+  const results = await Promise.all(genres.map(g => getAlbumsByGenre(g, 500, 0)));
+  const seen = new Set<string>();
+  const union = results.flat().filter(a => { if (seen.has(a.id)) return false; seen.add(a.id); return true; });
+  // Fisher-Yates shuffle
+  for (let i = union.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [union[i], union[j]] = [union[j], union[i]];
+  }
+  return union.slice(0, ALBUM_COUNT);
+}
+
 export default function RandomAlbums() {
   const { t } = useTranslation();
   const [albums, setAlbums] = useState<SubsonicAlbum[]>([]);
   const [loading, setLoading] = useState(true);
+  const [selectedGenres, setSelectedGenres] = useState<string[]>([]);
   const loadingRef = useRef(false);
+  const filtered = selectedGenres.length > 0;
 
-  const load = useCallback(async () => {
+  const load = useCallback(async (genres: string[]) => {
     if (loadingRef.current) return;
     loadingRef.current = true;
     setLoading(true);
     try {
-      const data = await getAlbumList('random', ALBUM_COUNT);
+      const data = genres.length > 0
+        ? await fetchByGenres(genres)
+        : await getAlbumList('random', ALBUM_COUNT);
       setAlbums(data);
     } catch (e) {
       console.error(e);
@@ -27,21 +44,24 @@ export default function RandomAlbums() {
     }
   }, []);
 
-  useEffect(() => { load(); }, [load]);
+  useEffect(() => { load(selectedGenres); }, [selectedGenres, load]);
 
   return (
     <div className="content-body animate-fade-in">
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '1.5rem' }}>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '1.5rem', flexWrap: 'wrap', gap: '0.75rem' }}>
         <h1 className="page-title" style={{ marginBottom: 0 }}>{t('randomAlbums.title')}</h1>
-        <button
-          className="btn btn-ghost"
-          onClick={load}
-          disabled={loading}
-          data-tooltip={t('randomAlbums.refresh')}
-        >
-          <RefreshCw size={16} className={loading ? 'animate-spin' : ''} />
-          {t('randomAlbums.refresh')}
-        </button>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', flexWrap: 'wrap' }}>
+          <GenreFilterBar selected={selectedGenres} onSelectionChange={setSelectedGenres} />
+          <button
+            className="btn btn-ghost"
+            onClick={() => load(selectedGenres)}
+            disabled={loading}
+            data-tooltip={t('randomAlbums.refresh')}
+          >
+            <RefreshCw size={16} className={loading ? 'animate-spin' : ''} />
+            {t('randomAlbums.refresh')}
+          </button>
+        </div>
       </div>
 
       {loading && albums.length === 0 ? (

src/pages/RandomMix.tsx

@@ -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 { Play, RefreshCw, ChevronDown, ChevronUp, Heart } 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';
@@ -44,10 +28,16 @@ export default function RandomMix() {
   const playTrack = usePlayerStore(s => s.playTrack);
   const openContextMenu = usePlayerStore(s => s.openContextMenu);
   const contextMenuOpen = usePlayerStore(s => s.contextMenu.isOpen);
+  const currentTrack = usePlayerStore(s => s.currentTrack);
+  const isPlaying = usePlayerStore(s => s.isPlaying);
+  const starredOverrides = usePlayerStore(s => s.starredOverrides);
+  const setStarredOverride = usePlayerStore(s => s.setStarredOverride);
   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);
+  const [addedArtist, setAddedArtist] = useState<string | null>(null);
 
   // Blacklist panel state
   const [blacklistOpen, setBlacklistOpen] = useState(false);
@@ -55,7 +45,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);
@@ -80,7 +72,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 => {
@@ -94,24 +95,26 @@ export default function RandomMix() {
     if (song.genre && checkText(song.genre)) return false;
     if (song.title && checkText(song.title)) return false;
     if (song.album && checkText(song.album)) return false;
+    if (song.artist && checkText(song.artist)) return false;
     return true;
   });
 
   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));
     }
   };
 
   const toggleSongStar = async (song: SubsonicSong, e: React.MouseEvent) => {
     e.stopPropagation();
-    const currentlyStarred = starredSongs.has(song.id);
+    const currentlyStarred = song.id in starredOverrides ? starredOverrides[song.id] : starredSongs.has(song.id);
     const nextStarred = new Set(starredSongs);
     if (currentlyStarred) nextStarred.delete(song.id);
     else nextStarred.add(song.id);
     setStarredSongs(nextStarred);
+    setStarredOverride(song.id, !currentlyStarred);
 
     try {
       if (currentlyStarred) await unstar(song.id, 'song');
@@ -119,55 +122,30 @@ export default function RandomMix() {
     } catch (err) {
       console.error('Failed to toggle song star', err);
       setStarredSongs(new Set(starredSongs));
+      setStarredOverride(song.id, currentlyStarred);
     }
   };
 
-  // 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">
@@ -179,8 +157,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'}`}
@@ -211,9 +189,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
@@ -296,34 +277,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>
@@ -331,157 +325,211 @@ export default function RandomMix() {
             <div style={{ display: 'flex', justifyContent: 'center', padding: '2rem' }}><div className="spinner" /></div>
           ) : (
             <div className="tracklist">
-              <div className="tracklist-header" style={{ gridTemplateColumns: '36px 1fr 1fr 1fr 120px 80px' }}>
-                <span></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 className="tracklist-header" style={{ gridTemplateColumns: '60px minmax(150px, 1fr) minmax(80px, 1fr) minmax(80px, 1fr) 70px 65px' }}>
+                <div></div>
+                <div>{t('randomMix.trackTitle')}</div>
+                <div>{t('randomMix.trackArtist')}</div>
+                <div>{t('randomMix.trackAlbum')}</div>
+                <div className="col-center">{t('randomMix.trackFavorite')}</div>
+                <div className="col-center">{t('randomMix.trackDuration')}</div>
               </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 }, '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 } }));
-                  }}
-                >
-                  <button className="btn btn-ghost" style={{ padding: 4 }} onClick={e => { e.stopPropagation(); playTrack(song, genreMixSongs); }}>
-                    <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>
-              ))}
+              {genreMixSongs.map((song, idx) => {
+                const track = songToTrack(song);
+                const queueSongs = genreMixSongs.map(songToTrack);
+                const isCurrentTrack = currentTrack?.id === song.id;
+                const artist = song.artist;
+                const isArtistBlocked = !!artist && customGenreBlacklist.some(bg => artist.toLowerCase().includes(bg.toLowerCase()));
+                const isArtistJustAdded = addedArtist === artist;
+                return (
+                  <div
+                    key={song.id}
+                    className={`track-row${isCurrentTrack ? ' active' : ''}${contextMenuSongId === song.id ? ' context-active' : ''}`}
+                    style={{ gridTemplateColumns: '60px minmax(150px, 1fr) minmax(80px, 1fr) minmax(80px, 1fr) 70px 65px' }}
+                    onClick={e => { if ((e.target as HTMLElement).closest('button, a, input')) return; playTrack(track, queueSongs); }}
+                    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);
+                    }}
+                  >
+                    <div className={`track-num${isCurrentTrack ? ' track-num-active' : ''}`} style={{ cursor: 'pointer' }} onClick={e => { e.stopPropagation(); playTrack(track, queueSongs); }}>
+                      {isCurrentTrack && isPlaying && <span className="track-num-eq"><div className="eq-bars"><span className="eq-bar" /><span className="eq-bar" /><span className="eq-bar" /></div></span>}
+                      <span className="track-num-play"><Play size={13} fill="currentColor" /></span>
+                      <span className="track-num-number">{idx + 1}</span>
+                    </div>
+                    <div className="track-info"><span className="track-title">{song.title}</span></div>
+                    <div className="track-artist-cell">
+                      {artist ? (
+                        <button
+                          className={`rm-artist-btn${isArtistBlocked ? ' is-blocked' : isArtistJustAdded ? ' just-added' : ''}`}
+                          onClick={() => {
+                            if (isArtistBlocked) return;
+                            if (!customGenreBlacklist.some(bg => artist.toLowerCase().includes(bg.toLowerCase()))) {
+                              setCustomGenreBlacklist([...customGenreBlacklist, artist]);
+                              setAddedArtist(artist);
+                              setTimeout(() => setAddedArtist(null), 1500);
+                            }
+                          }}
+                          data-tooltip={isArtistBlocked ? t('randomMix.artistBlocked') : isArtistJustAdded ? t('randomMix.artistAddedToBlacklist') : t('randomMix.artistClickHint')}
+                        >{artist}</button>
+                      ) : <span className="track-artist">—</span>}
+                    </div>
+                    <div className="track-info">
+                      <span className="track-title" style={{ fontSize: '0.85rem', color: 'var(--text-secondary)' }}>{song.album ?? '—'}</span>
+                    </div>
+                    <div className="track-star-cell">
+                      <button
+                        className="btn btn-ghost track-star-btn"
+                        onClick={e => toggleSongStar(song, e)}
+                        data-tooltip={(song.id in starredOverrides ? starredOverrides[song.id] : starredSongs.has(song.id)) ? t('randomMix.favoriteRemove') : t('randomMix.favoriteAdd')}
+                        style={{ color: (song.id in starredOverrides ? starredOverrides[song.id] : starredSongs.has(song.id)) ? 'var(--color-star-active, var(--accent))' : 'var(--color-star-inactive, var(--text-muted))' }}
+                      >
+                        <Heart size={14} fill={(song.id in starredOverrides ? starredOverrides[song.id] : starredSongs.has(song.id)) ? 'currentColor' : 'none'} />
+                      </button>
+                    </div>
+                    <div className="track-duration">{formatDuration(song.duration)}</div>
+                  </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>
       ) : (
         <div className="tracklist">
-          <div className="tracklist-header" style={{ gridTemplateColumns: '36px 1fr 1fr 1fr 120px 60px 80px' }}>
-            <span></span>
-            <span>{t('randomMix.trackTitle')}</span>
-            <span>{t('randomMix.trackArtist')}</span>
-            <span>{t('randomMix.trackAlbum')}</span>
-            <span data-tooltip={t('randomMix.genreClickHint')} data-tooltip-wrap style={{ cursor: 'help' }}>
+          <div className="tracklist-header" style={{ gridTemplateColumns: '60px minmax(150px, 1fr) minmax(80px, 1fr) minmax(80px, 1fr) 120px 70px 65px' }}>
+            <div></div>
+            <div>{t('randomMix.trackTitle')}</div>
+            <div>{t('randomMix.trackArtist')}</div>
+            <div>{t('randomMix.trackAlbum')}</div>
+            <div data-tooltip={t('randomMix.genreClickHint')} data-tooltip-wrap style={{ cursor: 'help' }}>
               {t('randomMix.trackGenre')} <span style={{ color: 'var(--accent)', fontWeight: 700, fontSize: 13 }}>ⓘ</span>
-            </span>
-            <span style={{ textAlign: 'center' }}>{t('randomMix.trackFavorite')}</span>
-            <span style={{ textAlign: 'right' }}>{t('randomMix.trackDuration')}</span>
+            </div>
+            <div className="col-center">{t('randomMix.trackFavorite')}</div>
+            <div className="col-center">{t('randomMix.trackDuration')}</div>
           </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 };
-                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,
-                };
-                e.dataTransfer.setData('text/plain', JSON.stringify({ type: 'song', track }));
-              }}
-            >
-              <button
-                className="btn btn-ghost"
-                style={{ padding: 4 }}
-                onClick={(e) => { e.stopPropagation(); playTrack(song, filteredSongs); }}
-                data-tooltip={t('randomMix.play')}
+          {filteredSongs.map((song, idx) => {
+            const track = songToTrack(song);
+            const queueSongs = filteredSongs.map(songToTrack);
+            const isCurrentTrack = currentTrack?.id === song.id;
+            const artist = song.artist;
+            const genre = song.genre;
+            const isArtistBlocked = !!artist && customGenreBlacklist.some(bg => artist.toLowerCase().includes(bg.toLowerCase()));
+            const isArtistJustAdded = addedArtist === artist;
+            const isGenreBlocked = !!genre && (
+              AUDIOBOOK_GENRES.some(ag => genre.toLowerCase().includes(ag)) ||
+              customGenreBlacklist.some(bg => genre.toLowerCase().includes(bg.toLowerCase()))
+            );
+            const isGenreJustAdded = addedGenre === genre;
+            return (
+              <div
+                key={song.id}
+                className={`track-row${isCurrentTrack ? ' active' : ''}${contextMenuSongId === song.id ? ' context-active' : ''}`}
+                style={{ gridTemplateColumns: '60px minmax(150px, 1fr) minmax(80px, 1fr) minmax(80px, 1fr) 120px 70px 65px' }}
+                onClick={e => { if ((e.target as HTMLElement).closest('button, a, input')) return; playTrack(track, queueSongs); }}
+                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);
+                }}
               >
-                <Play size={14} fill="currentColor" />
-              </button>
+                <div className={`track-num${isCurrentTrack ? ' track-num-active' : ''}`} style={{ cursor: 'pointer' }} onClick={e => { e.stopPropagation(); playTrack(track, queueSongs); }}>
+                  {isCurrentTrack && isPlaying && <span className="track-num-eq"><div className="eq-bars"><span className="eq-bar" /><span className="eq-bar" /><span className="eq-bar" /></div></span>}
+                  <span className="track-num-play"><Play size={13} fill="currentColor" /></span>
+                  <span className="track-num-number">{idx + 1}</span>
+                </div>
 
-              <div className="track-info">
-                <span className="track-title">{song.title}</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-artist-cell">
+                  {artist ? (
+                    <button
+                      className={`rm-artist-btn${isArtistBlocked ? ' is-blocked' : isArtistJustAdded ? ' just-added' : ''}`}
+                      onClick={() => {
+                        if (isArtistBlocked) return;
+                        if (!customGenreBlacklist.some(bg => artist.toLowerCase().includes(bg.toLowerCase()))) {
+                          setCustomGenreBlacklist([...customGenreBlacklist, artist]);
+                          setAddedArtist(artist);
+                          setTimeout(() => setAddedArtist(null), 1500);
+                        }
+                      }}
+                      data-tooltip={isArtistBlocked ? t('randomMix.artistBlocked') : isArtistJustAdded ? t('randomMix.artistAddedToBlacklist') : t('randomMix.artistClickHint')}
+                    >{artist}</button>
+                  ) : <span className="track-artist">—</span>}
+                </div>
 
-              <div className="track-info">
-                <span className="track-title" style={{ fontSize: '0.85rem', color: 'var(--subtext0)' }}>{song.album}</span>
-              </div>
+                <div className="track-info">
+                  <span className="track-title" style={{ fontSize: '0.85rem', color: 'var(--text-secondary)' }}>{song.album ?? '—'}</span>
+                </div>
 
-              {(() => {
-                const genre = song.genre;
-                if (!genre) return <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>—</div>;
-                const isBlocked = AUDIOBOOK_GENRES.some(ag => genre.toLowerCase().includes(ag)) ||
-                  customGenreBlacklist.some(bg => genre.toLowerCase().includes(bg.toLowerCase()));
-                const justAdded = addedGenre === genre;
-                return (
+                <div>
+                  {genre ? (
+                    <button
+                      className={`rm-genre-chip${isGenreBlocked ? ' is-blocked' : isGenreJustAdded ? ' just-added' : ''}`}
+                      onClick={() => {
+                        if (isGenreBlocked) return;
+                        if (!customGenreBlacklist.some(bg => genre.toLowerCase().includes(bg.toLowerCase()))) {
+                          setCustomGenreBlacklist([...customGenreBlacklist, genre]);
+                          setAddedGenre(genre);
+                          setTimeout(() => setAddedGenre(null), 1500);
+                        }
+                      }}
+                      data-tooltip={isGenreBlocked ? t('randomMix.genreBlocked') : isGenreJustAdded ? t('randomMix.genreAddedToBlacklist') : t('randomMix.genreClickHint')}
+                    >{genre}</button>
+                  ) : <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>—</span>}
+                </div>
+
+                <div className="track-star-cell">
                   <button
-                    className="btn btn-ghost"
-                    style={{
-                      fontSize: 11,
-                      padding: '2px 8px',
-                      borderRadius: 'var(--radius-sm)',
-                      background: isBlocked ? 'color-mix(in srgb, var(--danger) 15%, transparent)' : justAdded ? 'color-mix(in srgb, var(--accent) 15%, transparent)' : 'var(--bg-hover)',
-                      color: isBlocked ? 'var(--danger)' : justAdded ? 'var(--accent)' : 'var(--text-muted)',
-                      border: 'none',
-                      cursor: isBlocked ? 'default' : 'pointer',
-                      maxWidth: '100%',
-                      overflow: 'hidden',
-                      textOverflow: 'ellipsis',
-                      whiteSpace: 'nowrap',
-                      height: 'auto',
-                      minHeight: 'unset',
-                    }}
-                    onClick={() => {
-                      if (isBlocked) return;
-                      const already = customGenreBlacklist.some(bg => genre.toLowerCase().includes(bg.toLowerCase()));
-                      if (!already) {
-                        setCustomGenreBlacklist([...customGenreBlacklist, genre]);
-                        setAddedGenre(genre);
-                        setTimeout(() => setAddedGenre(null), 1500);
-                      }
-                    }}
-                    data-tooltip={isBlocked ? t('randomMix.genreBlocked') : justAdded ? t('randomMix.genreAddedToBlacklist') : genre}
+                    className="btn btn-ghost track-star-btn"
+                    onClick={e => toggleSongStar(song, e)}
+                    data-tooltip={(song.id in starredOverrides ? starredOverrides[song.id] : starredSongs.has(song.id)) ? t('randomMix.favoriteRemove') : t('randomMix.favoriteAdd')}
+                    style={{ color: (song.id in starredOverrides ? starredOverrides[song.id] : starredSongs.has(song.id)) ? 'var(--color-star-active, var(--accent))' : 'var(--color-star-inactive, var(--text-muted))' }}
                   >
-                    {genre}
+                    <Heart size={14} fill={(song.id in starredOverrides ? starredOverrides[song.id] : starredSongs.has(song.id)) ? 'currentColor' : 'none'} />
                   </button>
-                );
-              })()}
+                </div>
 
-              <div style={{ display: 'flex', justifyContent: 'center' }}>
-                <button
-                  className="btn btn-ghost"
-                  onClick={(e) => toggleSongStar(song, e)}
-                  data-tooltip={starredSongs.has(song.id) ? t('randomMix.favoriteRemove') : t('randomMix.favoriteAdd')}
-                  style={{ padding: '4px', height: 'auto', minHeight: 'unset', color: starredSongs.has(song.id) ? 'var(--accent)' : 'var(--text-muted)' }}
-                >
-                  <Star size={14} fill={starredSongs.has(song.id) ? "currentColor" : "none"} />
-                </button>
+                <div className="track-duration">{formatDuration(song.duration)}</div>
               </div>
-
-              <span className="track-duration" style={{ textAlign: 'right' }}>
-                {formatDuration(song.duration)}
-              </span>
-            </div>
-          ))}
+            );
+          })}
         </div>
       ))}
 

src/pages/SearchResults.tsx

@@ -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,
-    }, 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,
-    })));
+    playTrack(songToTrack(song), list.map(songToTrack));
   };
 
   return (
@@ -77,7 +69,7 @@ export default function SearchResults() {
                 <h2 className="section-title" style={{ marginBottom: 0 }}>{t('search.songs')}</h2>
               </div>
               <div className="tracklist" style={{ padding: 0 }}>
-                <div className="tracklist-header" style={{ gridTemplateColumns: '36px minmax(100px, 2fr) minmax(80px, 1.2fr) minmax(80px, 1.2fr) 100px 60px' }}>
+                <div className="tracklist-header" style={{ gridTemplateColumns: '60px minmax(150px, 1fr) minmax(80px, 1fr) minmax(80px, 1fr) 100px 65px' }}>
                   <div />
                   <div>{t('albumDetail.trackTitle')}</div>
                   <div>{t('albumDetail.trackArtist')}</div>
@@ -89,19 +81,24 @@ export default function SearchResults() {
                   <div
                     key={song.id}
                     className={`track-row${currentTrack?.id === song.id ? ' active' : ''}`}
-                    style={{ gridTemplateColumns: '36px minmax(100px, 2fr) minmax(80px, 1.2fr) minmax(80px, 1.2fr) 100px 60px' }}
+                    style={{ gridTemplateColumns: '60px minmax(150px, 1fr) minmax(80px, 1fr) minmax(80px, 1fr) 100px 65px' }}
                     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,
+                    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

src/pages/Statistics.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { getAlbumList, getArtists, getGenres, SubsonicAlbum } from '../api/subsonic';
+import { getAlbumList, getArtists, getGenres, getRandomSongs, SubsonicAlbum, SubsonicGenre } from '../api/subsonic';
 import AlbumRow from '../components/AlbumRow';
 import { useTranslation } from 'react-i18next';
 import { useAuthStore } from '../store/authStore';
@@ -14,6 +14,13 @@ function relativeTime(timestamp: number, t: (key: string, opts?: any) => string)
   return t('statistics.lfmDaysAgo', { n: Math.floor(diff / 86400) });
 }
 
+function formatPlaytime(seconds: number): string {
+  const h = Math.floor(seconds / 3600);
+  const m = Math.floor((seconds % 3600) / 60);
+  if (h > 0) return `${h.toLocaleString()}h ${m}m`;
+  return `${m}m`;
+}
+
 const PERIODS: { key: LastfmPeriod; label: string }[] = [
   { key: '7day', label: 'lfmPeriod7day' },
   { key: '1month', label: 'lfmPeriod1month' },
@@ -32,8 +39,14 @@ export default function Statistics() {
   const [artistCount, setArtistCount] = useState<number | null>(null);
   const [totalSongs, setTotalSongs] = useState<number | null>(null);
   const [totalAlbums, setTotalAlbums] = useState<number | null>(null);
+  const [genres, setGenres] = useState<SubsonicGenre[]>([]);
   const [loading, setLoading] = useState(true);
 
+  const [totalPlaytime, setTotalPlaytime] = useState<number | null>(null);
+  const [playtimeCapped, setPlaytimeCapped] = useState(false);
+  const [formatData, setFormatData] = useState<{ format: string; count: number }[] | null>(null);
+  const [formatSampleSize, setFormatSampleSize] = useState(0);
+
   const [lfmPeriod, setLfmPeriod] = useState<LastfmPeriod>('1month');
   const [lfmTopArtists, setLfmTopArtists] = useState<LastfmTopArtist[]>([]);
   const [lfmTopAlbums, setLfmTopAlbums] = useState<LastfmTopAlbum[]>([]);
@@ -54,12 +67,62 @@ export default function Statistics() {
       setFrequent(fr);
       setHighest(hi);
       setArtistCount(a.length);
-      setTotalSongs(g.reduce((acc: number, genre: any) => acc + genre.songCount, 0));
-      setTotalAlbums(g.reduce((acc: number, genre: any) => acc + genre.albumCount, 0));
+      setTotalSongs(g.reduce((acc: number, genre: SubsonicGenre) => acc + genre.songCount, 0));
+      setTotalAlbums(g.reduce((acc: number, genre: SubsonicGenre) => acc + genre.albumCount, 0));
+      const sorted = [...g].sort((a, b) => b.songCount - a.songCount);
+      setGenres(sorted);
       setLoading(false);
     }).catch(() => setLoading(false));
   }, []);
 
+  // Background fetch: total playtime (paginate getAlbumList up to 10 pages of 500)
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      let total = 0;
+      let offset = 0;
+      const pageSize = 500;
+      const maxPages = 10;
+      let capped = false;
+      for (let page = 0; page < maxPages; page++) {
+        try {
+          const albums = await getAlbumList('newest', pageSize, offset);
+          if (cancelled) return;
+          for (const a of albums) total += (a.duration ?? 0);
+          if (albums.length < pageSize) break;
+          if (page === maxPages - 1) capped = true;
+          offset += pageSize;
+        } catch {
+          break;
+        }
+      }
+      if (!cancelled) {
+        setTotalPlaytime(total);
+        setPlaytimeCapped(capped);
+      }
+    })();
+    return () => { cancelled = true; };
+  }, []);
+
+  // Background fetch: format distribution (sample of 500 random songs)
+  useEffect(() => {
+    let cancelled = false;
+    getRandomSongs(500).then(songs => {
+      if (cancelled) return;
+      const counts: Record<string, number> = {};
+      for (const song of songs) {
+        const fmt = song.suffix?.toUpperCase() ?? 'Unknown';
+        counts[fmt] = (counts[fmt] ?? 0) + 1;
+      }
+      const sorted = Object.entries(counts)
+        .map(([format, count]) => ({ format, count }))
+        .sort((a, b) => b.count - a.count);
+      setFormatData(sorted);
+      setFormatSampleSize(songs.length);
+    }).catch(() => {});
+    return () => { cancelled = true; };
+  }, []);
+
   useEffect(() => {
     if (!lastfmIsConfigured() || !lastfmSessionKey || !lastfmUsername) return;
     setLfmRecentLoading(true);
@@ -97,12 +160,20 @@ export default function Statistics() {
     }
   };
 
+  const playtimeDisplay = totalPlaytime === null
+    ? t('statistics.computing')
+    : (playtimeCapped ? '≥ ' : '') + formatPlaytime(totalPlaytime);
+
   const stats = [
-    { label: t('statistics.statArtists'), value: artistCount },
-    { label: t('statistics.statAlbums'), value: totalAlbums },
-    { label: t('statistics.statSongs'), value: totalSongs },
+    { label: t('statistics.statArtists'), value: artistCount?.toLocaleString() ?? '—' },
+    { label: t('statistics.statAlbums'), value: totalAlbums?.toLocaleString() ?? '—' },
+    { label: t('statistics.statSongs'), value: totalSongs?.toLocaleString() ?? '—' },
+    { label: t('statistics.statPlaytime'), value: playtimeDisplay },
   ];
 
+  const topGenres = genres.slice(0, 10);
+  const maxGenreSongs = topGenres[0]?.songCount ?? 1;
+
   return (
     <div className="content-body animate-fade-in">
       <h1 className="page-title">{t('statistics.title')}</h1>
@@ -115,12 +186,85 @@ export default function Statistics() {
           <div className="stats-overview">
             {stats.map(s => (
               <div key={s.label} className="stats-card">
-                <span className="stats-card-value">{s.value?.toLocaleString() ?? '—'}</span>
+                <span className="stats-card-value">{s.value}</span>
                 <span className="stats-card-label">{s.label}</span>
               </div>
             ))}
           </div>
 
+          {/* Genre Insights + Format Distribution */}
+          {(topGenres.length > 0 || formatData) && (
+            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '1rem', marginBottom: '0.5rem' }}>
+
+              {topGenres.length > 0 && (
+                <div style={{ background: 'var(--glass-bg)', border: '1px solid var(--glass-border)', borderRadius: '12px', padding: '1.25rem', backdropFilter: 'blur(8px)' }}>
+                  <h3 style={{ fontSize: '0.7rem', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.1em', color: 'var(--accent)', marginBottom: '1rem' }}>
+                    {t('statistics.genreInsights')}
+                  </h3>
+                  <div style={{ display: 'flex', flexDirection: 'column', gap: '0.6rem' }}>
+                    {topGenres.map(g => (
+                      <div key={g.value}>
+                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: '0.2rem' }}>
+                          <span style={{ fontSize: '0.8rem', fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '70%' }}>
+                            {g.value}
+                          </span>
+                          <span style={{ fontSize: '0.7rem', color: 'var(--text-muted)', flexShrink: 0, marginLeft: '0.5rem' }}>
+                            {g.songCount.toLocaleString()}
+                          </span>
+                        </div>
+                        <div style={{ height: '4px', borderRadius: '2px', background: 'var(--glass-border)', overflow: 'hidden' }}>
+                          <div style={{
+                            height: '100%',
+                            width: `${(g.songCount / maxGenreSongs) * 100}%`,
+                            background: 'var(--accent)',
+                            opacity: 0.7,
+                            borderRadius: '2px',
+                            transition: 'width 0.4s ease',
+                          }} />
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {formatData && (
+                <div style={{ background: 'var(--glass-bg)', border: '1px solid var(--glass-border)', borderRadius: '12px', padding: '1.25rem', backdropFilter: 'blur(8px)' }}>
+                  <h3 style={{ fontSize: '0.7rem', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.1em', color: 'var(--accent)', marginBottom: '0.25rem' }}>
+                    {t('statistics.formatDistribution')}
+                  </h3>
+                  <p style={{ fontSize: '0.7rem', color: 'var(--text-muted)', marginBottom: '1rem' }}>
+                    {t('statistics.formatSample', { n: formatSampleSize.toLocaleString() })}
+                  </p>
+                  <div style={{ display: 'flex', flexDirection: 'column', gap: '0.6rem' }}>
+                    {formatData.map(f => {
+                      const pct = formatSampleSize > 0 ? Math.round((f.count / formatSampleSize) * 100) : 0;
+                      return (
+                        <div key={f.format}>
+                          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: '0.2rem' }}>
+                            <span style={{ fontSize: '0.8rem', fontWeight: 600, fontFamily: 'monospace' }}>{f.format}</span>
+                            <span style={{ fontSize: '0.7rem', color: 'var(--text-muted)' }}>{pct}%</span>
+                          </div>
+                          <div style={{ height: '4px', borderRadius: '2px', background: 'var(--glass-border)', overflow: 'hidden' }}>
+                            <div style={{
+                              height: '100%',
+                              width: `${pct}%`,
+                              background: 'var(--accent)',
+                              opacity: 0.6,
+                              borderRadius: '2px',
+                              transition: 'width 0.4s ease',
+                            }} />
+                          </div>
+                        </div>
+                      );
+                    })}
+                  </div>
+                </div>
+              )}
+
+            </div>
+          )}
+
           {recent.length > 0 && (
             <AlbumRow title={t('statistics.recentlyPlayed')} albums={recent} />
           )}

src/store/authStore.ts

@@ -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;
@@ -21,10 +23,10 @@ interface AuthState {
   lastfmUsername: string;
 
   // Settings (global)
-  minimizeToTray: boolean;
   scrobblingEnabled: boolean;
   maxCacheMb: number;
   downloadFolder: string;
+  offlineDownloadDir: string;
   excludeAudiobooks: boolean;
   customGenreBlacklist: string[];
   replayGainEnabled: boolean;
@@ -32,6 +34,13 @@ interface AuthState {
   crossfadeEnabled: boolean;
   crossfadeSecs: number;
   gaplessEnabled: boolean;
+  infiniteQueueEnabled: boolean;
+  showArtistImages: boolean;
+  minimizeToTray: boolean;
+  discordRichPresence: boolean;
+  nowPlayingEnabled: boolean;
+  showChangelogOnUpdate: boolean;
+  lastSeenChangelogVersion: string;
 
   // Status
   isLoggedIn: boolean;
@@ -51,10 +60,10 @@ interface AuthState {
   connectLastfm: (sessionKey: string, username: string) => void;
   disconnectLastfm: () => void;
   setLastfmSessionError: (v: boolean) => void;
-  setMinimizeToTray: (v: boolean) => void;
   setScrobblingEnabled: (v: boolean) => void;
   setMaxCacheMb: (v: number) => void;
   setDownloadFolder: (v: string) => void;
+  setOfflineDownloadDir: (v: string) => void;
   setExcludeAudiobooks: (v: boolean) => void;
   setCustomGenreBlacklist: (v: string[]) => void;
   setReplayGainEnabled: (v: boolean) => void;
@@ -62,6 +71,13 @@ interface AuthState {
   setCrossfadeEnabled: (v: boolean) => void;
   setCrossfadeSecs: (v: number) => void;
   setGaplessEnabled: (v: boolean) => void;
+  setInfiniteQueueEnabled: (v: boolean) => void;
+  setShowArtistImages: (v: boolean) => void;
+  setMinimizeToTray: (v: boolean) => void;
+  setDiscordRichPresence: (v: boolean) => void;
+  setNowPlayingEnabled: (v: boolean) => void;
+  setShowChangelogOnUpdate: (v: boolean) => void;
+  setLastSeenChangelogVersion: (v: string) => void;
   logout: () => void;
 
   // Derived
@@ -82,10 +98,10 @@ export const useAuthStore = create<AuthState>()(
       lastfmApiSecret: '',
       lastfmSessionKey: '',
       lastfmUsername: '',
-      minimizeToTray: false,
       scrobblingEnabled: true,
       maxCacheMb: 500,
       downloadFolder: '',
+      offlineDownloadDir: '',
       excludeAudiobooks: false,
       customGenreBlacklist: [],
       replayGainEnabled: false,
@@ -93,6 +109,13 @@ export const useAuthStore = create<AuthState>()(
       crossfadeEnabled: false,
       crossfadeSecs: 3,
       gaplessEnabled: false,
+      infiniteQueueEnabled: false,
+      showArtistImages: false,
+      minimizeToTray: false,
+      discordRichPresence: false,
+      nowPlayingEnabled: false,
+      showChangelogOnUpdate: true,
+      lastSeenChangelogVersion: '',
       isLoggedIn: false,
       isConnecting: false,
       connectionError: null,
@@ -139,17 +162,30 @@ export const useAuthStore = create<AuthState>()(
 
       setLastfmSessionError: (v) => set({ lastfmSessionError: v }),
 
-      setMinimizeToTray: (v) => set({ minimizeToTray: v }),
       setScrobblingEnabled: (v) => set({ scrobblingEnabled: v }),
       setMaxCacheMb: (v) => set({ maxCacheMb: v }),
       setDownloadFolder: (v) => set({ downloadFolder: v }),
+      setOfflineDownloadDir: (v) => set({ offlineDownloadDir: 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 }),
+      setInfiniteQueueEnabled: (v) => set({ infiniteQueueEnabled: v }),
+      setShowArtistImages: (v) => set({ showArtistImages: v }),
+      setMinimizeToTray: (v) => set({ minimizeToTray: v }),
+      setDiscordRichPresence: (v) => set({ discordRichPresence: v }),
+      setNowPlayingEnabled: (v) => set({ nowPlayingEnabled: v }),
+      setShowChangelogOnUpdate: (v) => set({ showChangelogOnUpdate: v }),
+      setLastSeenChangelogVersion: (v) => set({ lastSeenChangelogVersion: v }),
 
       logout: () => set({ isLoggedIn: false }),
 

src/store/eqStore.ts

@@ -37,19 +37,22 @@ export const BUILTIN_PRESETS: EqPreset[] = [
 interface EqState {
   gains: number[];           // 10 values, -12 to +12 dB
   enabled: boolean;
+  preGain: number;           // pre-amplification in dB (-30 to +6), applied before bands
   activePreset: string | null;
   customPresets: EqPreset[];
 
   setBandGain: (index: number, gain: number) => void;
   setEnabled: (v: boolean) => void;
+  setPreGain: (v: number) => void;
   applyPreset: (name: string) => void;
+  applyAutoEq: (name: string, gains: number[], preGain: number) => void;
   saveCustomPreset: (name: string) => void;
   deleteCustomPreset: (name: string) => void;
   syncToRust: () => void;
 }
 
-function syncEq(gains: number[], enabled: boolean) {
-  invoke('audio_set_eq', { gains: gains.map(g => g), enabled }).catch(() => {});
+function syncEq(gains: number[], enabled: boolean, preGain: number) {
+  invoke('audio_set_eq', { gains: gains.map(g => g), enabled, preGain }).catch(() => {});
 }
 
 export const useEqStore = create<EqState>()(
@@ -57,6 +60,7 @@ export const useEqStore = create<EqState>()(
     (set, get) => ({
       gains: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
       enabled: false,
+      preGain: 0,
       activePreset: 'Flat',
       customPresets: [],
 
@@ -65,12 +69,25 @@ export const useEqStore = create<EqState>()(
         const gains = [...get().gains];
         gains[index] = clamped;
         set({ gains, activePreset: null });
-        syncEq(gains, get().enabled);
+        syncEq(gains, get().enabled, get().preGain);
       },
 
       setEnabled: (v) => {
         set({ enabled: v });
-        syncEq(get().gains, v);
+        syncEq(get().gains, v, get().preGain);
+      },
+
+      setPreGain: (v) => {
+        const clamped = Math.max(-30, Math.min(6, v));
+        set({ preGain: clamped, activePreset: null });
+        syncEq(get().gains, get().enabled, clamped);
+      },
+
+      applyAutoEq: (name, gains, preGain) => {
+        const clampedPreGain = Math.max(-30, Math.min(6, preGain));
+        const clampedGains = gains.map(g => Math.max(-12, Math.min(12, g)));
+        set({ gains: clampedGains, preGain: clampedPreGain, activePreset: name });
+        syncEq(clampedGains, get().enabled, clampedPreGain);
       },
 
       applyPreset: (name) => {
@@ -78,7 +95,7 @@ export const useEqStore = create<EqState>()(
         const preset = all.find(p => p.name === name);
         if (!preset) return;
         set({ gains: [...preset.gains], activePreset: name });
-        syncEq(preset.gains, get().enabled);
+        syncEq(preset.gains, get().enabled, get().preGain);
       },
 
       saveCustomPreset: (name) => {
@@ -95,8 +112,8 @@ export const useEqStore = create<EqState>()(
       },
 
       syncToRust: () => {
-        const { gains, enabled } = get();
-        syncEq(gains, enabled);
+        const { gains, enabled, preGain } = get();
+        syncEq(gains, enabled, preGain);
       },
     }),
     {
@@ -105,6 +122,7 @@ export const useEqStore = create<EqState>()(
       partialize: (s) => ({
         gains: s.gains,
         enabled: s.enabled,
+        preGain: s.preGain,
         activePreset: s.activePreset,
         customPresets: s.customPresets,
       }),

src/store/globalShortcutsStore.ts

@@ -0,0 +1,103 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import { invoke } from '@tauri-apps/api/core';
+import { formatKeyCode } from './keybindingsStore';
+
+export type GlobalAction = 'play-pause' | 'next' | 'prev' | 'volume-up' | 'volume-down';
+
+const MODIFIER_CODES = [
+  'ControlLeft', 'ControlRight', 'AltLeft', 'AltRight',
+  'ShiftLeft', 'ShiftRight', 'MetaLeft', 'MetaRight', 'OSLeft', 'OSRight',
+];
+
+/** Build a Tauri-compatible shortcut string from a KeyboardEvent, or null if invalid. */
+export function buildGlobalShortcut(e: KeyboardEvent): string | null {
+  if (MODIFIER_CODES.includes(e.code)) return null;
+  // Require at least Ctrl, Alt, or Meta — Shift alone is too invasive
+  if (!e.ctrlKey && !e.altKey && !e.metaKey) return null;
+
+  const mods: string[] = [];
+  if (e.ctrlKey)  mods.push('ctrl');
+  if (e.altKey)   mods.push('alt');
+  if (e.shiftKey) mods.push('shift');
+  if (e.metaKey)  mods.push('super');
+
+  return [...mods, e.code].join('+');
+}
+
+/** Human-readable label for a stored shortcut string, e.g. "ctrl+alt+ArrowRight" → "Ctrl+Alt+→". */
+export function formatGlobalShortcut(shortcut: string): string {
+  return shortcut.split('+').map(part => {
+    if (part === 'ctrl')  return 'Ctrl';
+    if (part === 'alt')   return 'Alt';
+    if (part === 'shift') return 'Shift';
+    if (part === 'super' || part === 'meta') return 'Super';
+    return formatKeyCode(part);
+  }).join('+');
+}
+
+// Module-level guard — prevents double-registration from React StrictMode's
+// intentional double-invocation of effects in development.
+let _registerAllCalled = false;
+
+interface GlobalShortcutsState {
+  shortcuts: Partial<Record<GlobalAction, string>>;
+  setShortcut: (action: GlobalAction, shortcut: string | null) => Promise<void>;
+  registerAll: () => Promise<void>;
+  resetAll: () => Promise<void>;
+}
+
+export const useGlobalShortcutsStore = create<GlobalShortcutsState>()(
+  persist(
+    (set, get) => ({
+      shortcuts: {},
+
+      setShortcut: async (action, shortcut) => {
+        const prev = get().shortcuts[action];
+        if (prev) {
+          try { await invoke('unregister_global_shortcut', { shortcut: prev }); } catch {}
+        }
+        if (shortcut) {
+          try {
+            await invoke('register_global_shortcut', { shortcut, action });
+            set(s => ({ shortcuts: { ...s.shortcuts, [action]: shortcut } }));
+          } catch (e) {
+            console.warn('[GlobalShortcuts] Failed to register:', shortcut, e);
+          }
+        } else {
+          set(s => {
+            const next = { ...s.shortcuts };
+            delete next[action];
+            return { shortcuts: next };
+          });
+        }
+      },
+
+      registerAll: async () => {
+        if (_registerAllCalled) return;
+        _registerAllCalled = true;
+        const { shortcuts } = get();
+        for (const [action, shortcut] of Object.entries(shortcuts)) {
+          if (shortcut) {
+            try {
+              await invoke('register_global_shortcut', { shortcut, action });
+            } catch (e) {
+              console.warn('[GlobalShortcuts] Failed to re-register:', shortcut, e);
+            }
+          }
+        }
+      },
+
+      resetAll: async () => {
+        const { shortcuts } = get();
+        for (const shortcut of Object.values(shortcuts)) {
+          if (shortcut) {
+            try { await invoke('unregister_global_shortcut', { shortcut }); } catch {}
+          }
+        }
+        set({ shortcuts: {} });
+      },
+    }),
+    { name: 'psysonic_global_shortcuts' }
+  )
+);

src/store/homeStore.ts

@@ -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' }
+  )
+);

src/store/offlineStore.ts

@@ -0,0 +1,295 @@
+import { create } from 'zustand';
+import { persist, createJSONStorage } from 'zustand/middleware';
+import { invoke } from '@tauri-apps/api/core';
+import { buildStreamUrl, getArtist, getAlbum } from '../api/subsonic';
+import type { SubsonicSong } from '../api/subsonic';
+import { useAuthStore } from './authStore';
+import { showToast } from '../utils/toast';
+
+export interface OfflineTrackMeta {
+  id: string;
+  serverId: string;
+  localPath: string;
+  title: string;
+  artist: string;
+  album: string;
+  albumId: string;
+  artistId?: string;
+  suffix: string;
+  duration: number;
+  bitRate?: number;
+  coverArt?: string;
+  year?: number;
+  genre?: string;
+  replayGainTrackDb?: number;
+  replayGainAlbumDb?: number;
+  replayGainPeak?: number;
+  cachedAt: string;
+}
+
+export interface OfflineAlbumMeta {
+  id: string;
+  serverId: string;
+  name: string;
+  artist: string;
+  coverArt?: string;
+  year?: number;
+  trackIds: string[];
+  type?: 'album' | 'playlist' | 'artist';
+}
+
+export interface DownloadJob {
+  trackId: string;
+  albumId: string;
+  albumName: string;
+  trackTitle: string;
+  trackIndex: number;
+  totalTracks: number;
+  status: 'queued' | 'downloading' | 'done' | 'error';
+}
+
+interface OfflineState {
+  tracks: Record<string, OfflineTrackMeta>;   // key: `${serverId}:${trackId}`
+  albums: Record<string, OfflineAlbumMeta>;   // key: `${serverId}:${albumId}`
+  jobs: DownloadJob[];
+  /** Progress for bulk (playlist / artist) downloads. Key = playlistId or artistId. */
+  bulkProgress: Record<string, { done: number; total: number }>;
+
+  isDownloaded: (trackId: string, serverId: string) => boolean;
+  isAlbumDownloaded: (albumId: string, serverId: string) => boolean;
+  isAlbumDownloading: (albumId: string) => boolean;
+  getLocalUrl: (trackId: string, serverId: string) => string | null;
+  downloadAlbum: (
+    albumId: string,
+    albumName: string,
+    albumArtist: string,
+    coverArt: string | undefined,
+    year: number | undefined,
+    songs: SubsonicSong[],
+    serverId: string,
+    type?: 'album' | 'playlist' | 'artist',
+  ) => Promise<void>;
+  downloadPlaylist: (playlistId: string, playlistName: string, coverArt: string | undefined, songs: SubsonicSong[], serverId: string) => Promise<void>;
+  downloadArtist: (artistId: string, artistName: string, serverId: string) => Promise<void>;
+  deleteAlbum: (albumId: string, serverId: string) => Promise<void>;
+  clearAll: (serverId: string) => Promise<void>;
+  getAlbumProgress: (albumId: string) => { done: number; total: number } | null;
+}
+
+export const useOfflineStore = create<OfflineState>()(
+  persist(
+    (set, get) => ({
+      tracks: {},
+      albums: {},
+      jobs: [],
+      bulkProgress: {},
+
+      isDownloaded: (trackId, serverId) =>
+        !!get().tracks[`${serverId}:${trackId}`],
+
+      isAlbumDownloaded: (albumId, serverId) => {
+        const album = get().albums[`${serverId}:${albumId}`];
+        if (!album || album.trackIds.length === 0) return false;
+        return album.trackIds.every(tid => !!get().tracks[`${serverId}:${tid}`]);
+      },
+
+      isAlbumDownloading: (albumId) =>
+        get().jobs.some(
+          j => j.albumId === albumId && (j.status === 'queued' || j.status === 'downloading')
+        ),
+
+      getLocalUrl: (trackId, serverId) => {
+        const meta = get().tracks[`${serverId}:${trackId}`];
+        if (!meta) return null;
+        return `psysonic-local://${meta.localPath}`;
+      },
+
+      clearAll: async (serverId) => {
+        const albumKeys = Object.keys(get().albums).filter(k => k.startsWith(`${serverId}:`));
+        for (const key of albumKeys) {
+          const albumId = key.slice(`${serverId}:`.length);
+          await get().deleteAlbum(albumId, serverId);
+        }
+      },
+
+      getAlbumProgress: (albumId) => {
+        const albumJobs = get().jobs.filter(j => j.albumId === albumId);
+        if (albumJobs.length === 0) return null;
+        const done = albumJobs.filter(j => j.status === 'done' || j.status === 'error').length;
+        return { done, total: albumJobs.length };
+      },
+
+      downloadAlbum: async (albumId, albumName, albumArtist, coverArt, year, songs, serverId, type = 'album') => {
+        const CONCURRENCY = 2;
+        const trackIds = songs.map(s => s.id);
+
+        // Register album shell + queue jobs
+        set(state => ({
+          albums: {
+            ...state.albums,
+            [`${serverId}:${albumId}`]: { id: albumId, serverId, name: albumName, artist: albumArtist, coverArt, year, trackIds, type },
+          },
+          jobs: [
+            ...state.jobs.filter(j => j.albumId !== albumId),
+            ...songs.map((s, i) => ({
+              trackId: s.id,
+              albumId,
+              albumName,
+              trackTitle: s.title,
+              trackIndex: i,
+              totalTracks: songs.length,
+              status: 'queued' as const,
+            })),
+          ],
+        }));
+
+        // Download in batches of CONCURRENCY
+        for (let i = 0; i < songs.length; i += CONCURRENCY) {
+          const batch = songs.slice(i, i + CONCURRENCY);
+          await Promise.all(
+            batch.map(async song => {
+              set(state => ({
+                jobs: state.jobs.map(j =>
+                  j.trackId === song.id && j.albumId === albumId
+                    ? { ...j, status: 'downloading' }
+                    : j,
+                ),
+              }));
+
+              const suffix = song.suffix || 'mp3';
+              const url = buildStreamUrl(song.id);
+              const customDir = useAuthStore.getState().offlineDownloadDir || null;
+
+              try {
+                const localPath = await invoke<string>('download_track_offline', {
+                  trackId: song.id,
+                  serverId,
+                  url,
+                  suffix,
+                  customDir,
+                });
+
+                set(state => ({
+                  tracks: {
+                    ...state.tracks,
+                    [`${serverId}:${song.id}`]: {
+                      id: song.id,
+                      serverId,
+                      localPath,
+                      title: song.title,
+                      artist: song.artist,
+                      album: song.album,
+                      albumId: song.albumId,
+                      artistId: song.artistId,
+                      suffix,
+                      duration: song.duration,
+                      bitRate: song.bitRate,
+                      coverArt: song.coverArt,
+                      year: song.year,
+                      genre: song.genre,
+                      replayGainTrackDb: song.replayGain?.trackGain,
+                      replayGainAlbumDb: song.replayGain?.albumGain,
+                      replayGainPeak: song.replayGain?.trackPeak,
+                      cachedAt: new Date().toISOString(),
+                    },
+                  },
+                  jobs: state.jobs.map(j =>
+                    j.trackId === song.id && j.albumId === albumId
+                      ? { ...j, status: 'done' }
+                      : j,
+                  ),
+                }));
+              } catch (err) {
+                const msg = typeof err === 'string' ? err : (err instanceof Error ? err.message : '');
+                if (msg === 'VOLUME_NOT_FOUND') {
+                  showToast('Speichermedium nicht gefunden. Bitte Verzeichnis in den Einstellungen prüfen.', 6000, 'error');
+                }
+                set(state => ({
+                  jobs: state.jobs.map(j =>
+                    j.trackId === song.id && j.albumId === albumId
+                      ? { ...j, status: 'error' }
+                      : j,
+                  ),
+                }));
+              }
+            }),
+          );
+        }
+
+        // Clear completed jobs after a short delay
+        setTimeout(() => {
+          set(state => ({
+            jobs: state.jobs.filter(
+              j => j.albumId !== albumId || (j.status !== 'done' && j.status !== 'error'),
+            ),
+          }));
+        }, 2500);
+      },
+
+      downloadPlaylist: async (playlistId, playlistName, coverArt, songs, serverId) => {
+        // Deduplicate songs (a track can appear multiple times in a playlist).
+        const seen = new Set<string>();
+        const unique = songs.filter(s => { if (seen.has(s.id)) return false; seen.add(s.id); return true; });
+        // Store the entire playlist as one virtual album entry so the Offline Library
+        // shows a single card for the playlist rather than one card per album.
+        await get().downloadAlbum(playlistId, playlistName, '', coverArt, undefined, unique, serverId, 'playlist');
+      },
+
+      downloadArtist: async (artistId, artistName, serverId) => {
+        let albums: { id: string; name: string; artist: string; coverArt?: string; year?: number }[] = [];
+        try {
+          const res = await getArtist(artistId);
+          albums = res.albums;
+        } catch { return; }
+        set(state => ({
+          bulkProgress: { ...state.bulkProgress, [artistId]: { done: 0, total: albums.length } },
+        }));
+        for (let i = 0; i < albums.length; i++) {
+          const album = albums[i];
+          try {
+            const { songs } = await getAlbum(album.id);
+            await get().downloadAlbum(album.id, album.name, album.artist || artistName, album.coverArt, album.year, songs, serverId, 'artist');
+          } catch { /* skip failed album */ }
+          set(state => ({
+            bulkProgress: { ...state.bulkProgress, [artistId]: { done: i + 1, total: albums.length } },
+          }));
+        }
+        setTimeout(() => {
+          set(state => {
+            const { [artistId]: _removed, ...rest } = state.bulkProgress;
+            return { bulkProgress: rest };
+          });
+        }, 3000);
+      },
+
+      deleteAlbum: async (albumId, serverId) => {
+        const album = get().albums[`${serverId}:${albumId}`];
+        if (!album) return;
+
+        await Promise.all(
+          album.trackIds.map(async trackId => {
+            const meta = get().tracks[`${serverId}:${trackId}`];
+            if (!meta) return;
+            await invoke('delete_offline_track', {
+              localPath: meta.localPath,
+              baseDir: useAuthStore.getState().offlineDownloadDir || null,
+            }).catch(() => {});
+          }),
+        );
+
+        set(state => {
+          const tracks = { ...state.tracks };
+          album.trackIds.forEach(tid => delete tracks[`${serverId}:${tid}`]);
+          const albums = { ...state.albums };
+          delete albums[`${serverId}:${albumId}`];
+          return { tracks, albums };
+        });
+      },
+    }),
+    {
+      name: 'psysonic-offline',
+      storage: createJSONStorage(() => localStorage),
+      partialize: state => ({ tracks: state.tracks, albums: state.albums }),
+    },
+  ),
+);

src/store/playerStore.ts

@@ -2,9 +2,11 @@ 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, getPlayQueue, savePlayQueue, reportNowPlaying, scrobbleSong, SubsonicSong } from '../api/subsonic';
+import { showToast } from '../utils/toast';
+import { buildStreamUrl, buildCoverArtUrl, getPlayQueue, savePlayQueue, reportNowPlaying, scrobbleSong, SubsonicSong, getSong, getRandomSongs, getSimilarSongs2, getTopSongs, InternetRadioStation } from '../api/subsonic';
 import { lastfmScrobble, lastfmUpdateNowPlaying, lastfmLoveTrack, lastfmUnloveTrack, lastfmGetTrackLoved, lastfmGetAllLovedTracks } from '../api/lastfm';
 import { useAuthStore } from './authStore';
+import { useOfflineStore } from './offlineStore';
 
 export interface Track {
   id: string;
@@ -24,6 +26,11 @@ export interface Track {
   replayGainAlbumDb?: number;
   replayGainPeak?: number;
   starred?: string;
+  genre?: string;
+  samplingRate?: number;
+  bitDepth?: number;
+  autoAdded?: boolean;
+  radioAdded?: boolean;
 }
 
 export function songToTrack(song: SubsonicSong): Track {
@@ -45,11 +52,15 @@ export function songToTrack(song: SubsonicSong): Track {
     replayGainAlbumDb: song.replayGain?.albumGain,
     replayGainPeak: song.replayGain?.trackPeak,
     starred: song.starred,
+    genre: song.genre,
+    samplingRate: song.samplingRate,
+    bitDepth: song.bitDepth,
   };
 }
 
 interface PlayerState {
   currentTrack: Track | null;
+  currentRadio: InternetRadioStation | null;
   queue: Track[];
   queueIndex: number;
   isPlaying: boolean;
@@ -63,17 +74,22 @@ interface PlayerState {
   starredOverrides: Record<string, boolean>;
   setStarredOverride: (id: string, starred: boolean) => void;
 
-  playTrack: (track: Track, queue?: Track[]) => void;
+  playRadio: (station: InternetRadioStation) => void;
+  playTrack: (track: Track, queue?: Track[], manual?: boolean) => void;
   pause: () => void;
   resume: () => void;
   stop: () => void;
   togglePlay: () => void;
-  next: () => void;
+  next: (manual?: boolean) => void;
   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;
+  enqueueRadio: (tracks: Track[], artistId?: string) => void;
+  setRadioArtistId: (artistId: string) => void;
   clearQueue: () => void;
 
   isQueueVisible: boolean;
@@ -107,6 +123,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 ─────────────────────────────────────────
@@ -120,17 +140,51 @@ let isAudioPaused = false;
 // playGeneration has moved on, preventing stale errors from skipping wrong tracks.
 let playGeneration = 0;
 
+// Guard against concurrent infinite-queue fetches.
+let infiniteQueueFetching = false;
+// Guard against concurrent radio top-up fetches.
+let radioFetching = false;
+// Artist ID used to start the current radio session — persists across track
+// advances so proactive loading works even when songs lack artistId.
+let currentRadioArtistId: string | null = null;
+
 // 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.
 let togglePlayLock = false;
 
+// ── HTML5 Radio Player ────────────────────────────────────────────────────────
+// Internet radio streams are played via a native <audio> element instead of
+// the Rust/Symphonia engine.  This gives us browser-native reconnect logic,
+// codec support (MP3, AAC, HE-AAC, OGG) and stable ICY stream handling for
+// free, without touching the regular playback pipeline at all.
+const radioAudio = new Audio();
+radioAudio.preload = 'none';
+let radioStopping = false;
+radioAudio.addEventListener('ended', () => {
+  // Stream disconnected unexpectedly — clear radio state.
+  usePlayerStore.setState({ isPlaying: false, currentRadio: null, progress: 0, currentTime: 0 });
+});
+radioAudio.addEventListener('error', () => {
+  if (radioStopping) { radioStopping = false; return; }
+  usePlayerStore.setState({ isPlaying: false, currentRadio: null });
+  showToast('Radio stream error', 3000, 'error');
+});
+
 // Timestamp of the last gapless auto-advance (from audio:track_switched).
 // Used to suppress ghost-commands from stale IPC arriving after the switch.
 let lastGaplessSwitchTime = 0;
 
+// Track ID that has already been sent to audio_chain_preload / audio_preload.
+// Prevents the 100ms progress ticker from firing 300 identical IPC calls over
+// the last 30 seconds of a track, each spawning its own HTTP download.
+let gaplessPreloadingId: string | null = null;
+
 // ─── Server queue sync ─────────────────────────────────────────────────────────
 let syncTimeout: ReturnType<typeof setTimeout> | null = null;
 function syncQueueToServer(queue: Track[], currentTrack: Track | null, currentTime: number) {
@@ -151,6 +205,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;
@@ -177,8 +243,10 @@ function handleAudioProgress(current_time: number, duration: number) {
     const nextTrack = repeatMode === 'one'
       ? track
       : (nextIdx < queue.length ? queue[nextIdx] : (repeatMode === 'all' ? queue[0] : null));
-    if (nextTrack && nextTrack.id !== track.id) {
-      const nextUrl = buildStreamUrl(nextTrack.id);
+    if (nextTrack && nextTrack.id !== track.id && nextTrack.id !== gaplessPreloadingId) {
+      gaplessPreloadingId = nextTrack.id;
+      const serverId = useAuthStore.getState().activeServerId ?? '';
+      const nextUrl = useOfflineStore.getState().getLocalUrl(nextTrack.id, serverId) ?? buildStreamUrl(nextTrack.id);
       if (gaplessEnabled) {
         // Gapless ON: decode + chain directly into the Sink now, 30 s in
         // advance. By the time the track boundary arrives, the next source is
@@ -214,14 +282,21 @@ function handleAudioEnded() {
     return;
   }
 
+  // Radio stream disconnected — just stop; don't advance queue.
+  if (usePlayerStore.getState().currentRadio) {
+    isAudioPaused = false;
+    usePlayerStore.setState({ isPlaying: false, currentRadio: null, progress: 0, currentTime: 0 });
+    return;
+  }
+
   const { repeatMode, currentTrack, queue } = usePlayerStore.getState();
   isAudioPaused = false;
   usePlayerStore.setState({ isPlaying: false, progress: 0, currentTime: 0, buffered: 0 });
   setTimeout(() => {
     if (repeatMode === 'one' && currentTrack) {
-      usePlayerStore.getState().playTrack(currentTrack, queue);
+      usePlayerStore.getState().playTrack(currentTrack, queue, false);
     } else {
-      usePlayerStore.getState().next();
+      usePlayerStore.getState().next(false);
     }
   }, 150);
 }
@@ -233,6 +308,7 @@ function handleAudioEnded() {
  */
 function handleAudioTrackSwitched(duration: number) {
   lastGaplessSwitchTime = Date.now();
+  gaplessPreloadingId = null; // allow preloading for the track after this one
   isAudioPaused = false;
 
   const store = usePlayerStore.getState();
@@ -266,8 +342,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 => {
@@ -284,12 +360,16 @@ function handleAudioTrackSwitched(duration: number) {
 function handleAudioError(message: string) {
   console.error('[psysonic] Audio error from backend:', message);
   isAudioPaused = false;
+
+  const detail = message.length > 80 ? message.slice(0, 80) + '…' : message;
+  showToast(`Couldn't play track — skipping. ${detail}`, 8000, 'error');
+
   const gen = playGeneration;
   usePlayerStore.setState({ isPlaying: false });
   setTimeout(() => {
     if (playGeneration !== gen) return;
-    usePlayerStore.getState().next();
-  }, 500);
+    usePlayerStore.getState().next(false);
+  }, 1500);
 }
 
 /**
@@ -326,8 +406,98 @@ export function initAudioListeners(): () => void {
     invoke('audio_set_gapless', { enabled: state.gaplessEnabled }).catch(() => {});
   });
 
+  // ── MPRIS / OS media controls sync ───────────────────────────────────────
+  // Whenever the current track or playback state changes, push updates to the
+  // Rust souvlaki MediaControls so the OS media overlay stays accurate.
+  let prevTrackId: string | null = null;
+  let prevIsPlaying: boolean | null = null;
+  let lastMprisPositionUpdate = 0;
+
+  const unsubMpris = usePlayerStore.subscribe((state) => {
+    const { currentTrack, isPlaying, currentTime } = state;
+
+    // Update metadata when track changes
+    if (currentTrack && currentTrack.id !== prevTrackId) {
+      prevTrackId = currentTrack.id;
+      const coverUrl = currentTrack.coverArt
+        ? buildCoverArtUrl(currentTrack.coverArt, 512)
+        : undefined;
+      invoke('mpris_set_metadata', {
+        title: currentTrack.title,
+        artist: currentTrack.artist,
+        album: currentTrack.album,
+        coverUrl,
+        durationSecs: currentTrack.duration,
+      }).catch(() => {});
+    }
+
+    // Update playback state on play/pause change
+    const playbackChanged = isPlaying !== prevIsPlaying;
+    if (playbackChanged) {
+      prevIsPlaying = isPlaying;
+      lastMprisPositionUpdate = Date.now();
+      invoke('mpris_set_playback', {
+        playing: isPlaying,
+        positionSecs: currentTime > 0 ? currentTime : null,
+      }).catch(() => {});
+      return;
+    }
+
+    // Keep position in sync while playing — update every ~500 ms so Plasma
+    // always shows the correct time without interpolation gaps.
+    if (isPlaying && Date.now() - lastMprisPositionUpdate >= 500) {
+      lastMprisPositionUpdate = Date.now();
+      invoke('mpris_set_playback', {
+        playing: true,
+        positionSecs: currentTime,
+      }).catch(() => {});
+    }
+  });
+
+  // ── Discord Rich Presence sync ────────────────────────────────────────────
+  // Updates on track change or play/pause toggle. No per-tick updates needed —
+  // Discord auto-counts up the elapsed timer from the start_timestamp we set.
+  let discordPrevTrackId: string | null = null;
+  let discordPrevIsPlaying: boolean | null = null;
+
+  function syncDiscord() {
+    const { currentTrack, isPlaying, currentTime } = usePlayerStore.getState();
+    const { discordRichPresence } = useAuthStore.getState();
+
+    if (!discordRichPresence || !currentTrack) {
+      if (discordPrevTrackId !== null) {
+        discordPrevTrackId = null;
+        discordPrevIsPlaying = null;
+        invoke('discord_clear_presence').catch(() => {});
+      }
+      return;
+    }
+
+    const trackChanged = currentTrack.id !== discordPrevTrackId;
+    const playingChanged = isPlaying !== discordPrevIsPlaying;
+    if (!trackChanged && !playingChanged) return;
+
+    discordPrevTrackId = currentTrack.id;
+    discordPrevIsPlaying = isPlaying;
+
+    invoke('discord_update_presence', {
+      title: currentTrack.title,
+      artist: currentTrack.artist ?? 'Unknown Artist',
+      album: currentTrack.album ?? null,
+      // Pass elapsed when playing so Discord shows a live running timer.
+      // Pass null when paused — Discord shows the song/artist without a timer.
+      elapsedSecs: isPlaying ? currentTime : null,
+    }).catch(() => {});
+  }
+
+  const unsubDiscordPlayer = usePlayerStore.subscribe(syncDiscord);
+  const unsubDiscordAuth = useAuthStore.subscribe(syncDiscord);
+
   return () => {
     unsubAuth();
+    unsubMpris();
+    unsubDiscordPlayer();
+    unsubDiscordAuth();
     pending.forEach(p => p.then(unlisten => unlisten()));
   };
 }
@@ -338,6 +508,7 @@ export const usePlayerStore = create<PlayerState>()(
   persist(
     (set, get) => ({
       currentTrack: null,
+      currentRadio: null,
       queue: [],
       queueIndex: 0,
       isPlaying: false,
@@ -362,6 +533,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 })),
@@ -422,14 +597,49 @@ export const usePlayerStore = create<PlayerState>()(
 
       // ── stop ────────────────────────────────────────────────────────────────
       stop: () => {
-        invoke('audio_stop').catch(console.error);
+        if (get().currentRadio) {
+          radioStopping = true;
+          radioAudio.pause();
+          radioAudio.src = '';
+        } else {
+          invoke('audio_stop').catch(console.error);
+        }
         isAudioPaused = false;
-        if (seekDebounce) { clearTimeout(seekDebounce); seekDebounce = null; }
-        set({ isPlaying: false, progress: 0, buffered: 0, currentTime: 0 });
+        if (seekDebounce) { clearTimeout(seekDebounce); seekDebounce = null; } seekTarget = null;
+        set({ isPlaying: false, progress: 0, buffered: 0, currentTime: 0, currentRadio: null });
+      },
+
+      // ── playRadio ────────────────────────────────────────────────────────────
+      playRadio: (station) => {
+        const { volume } = get();
+        ++playGeneration;
+        isAudioPaused = false;
+        gaplessPreloadingId = null;
+        if (seekDebounce) { clearTimeout(seekDebounce); seekDebounce = null; } seekTarget = null;
+        // Stop Rust engine in case a regular track was playing.
+        invoke('audio_stop').catch(() => {});
+        // Play via HTML5 audio — browser handles reconnects, codec negotiation, buffering.
+        radioAudio.src = station.streamUrl;
+        radioAudio.volume = volume;
+        radioAudio.play().catch((err: unknown) => {
+          console.error('[psysonic] radio HTML5 play failed:', err);
+          set({ isPlaying: false, currentRadio: null });
+        });
+        set({
+          currentRadio: station,
+          currentTrack: null,
+          queue: [],
+          queueIndex: 0,
+          isPlaying: true,
+          progress: 0,
+          currentTime: 0,
+          buffered: 0,
+          scrobbled: true, // no scrobbling for radio
+        });
       },
 
       // ── playTrack ────────────────────────────────────────────────────────────
-      playTrack: (track, queue) => {
+      playTrack: (track, queue, manual = true) => {
         // Ghost-command guard: if a gapless switch happened within 500 ms,
         // this playTrack call is likely a stale IPC echo — suppress it.
         if (Date.now() - lastGaplessSwitchTime < 500) {
@@ -438,15 +648,26 @@ export const usePlayerStore = create<PlayerState>()(
 
         const gen = ++playGeneration;
         isAudioPaused = false;
-        if (seekDebounce) { clearTimeout(seekDebounce); seekDebounce = null; }
+        gaplessPreloadingId = null; // new track — allow fresh preload for next
+        if (seekDebounce) { clearTimeout(seekDebounce); seekDebounce = null; } seekTarget = null;
+
+        // If a radio stream is active, stop it before the new track starts so
+        // the PlayerBar clears radio mode immediately and the stream is released.
+        if (get().currentRadio) {
+          radioStopping = true;
+          radioAudio.pause();
+          radioAudio.src = '';
+        }
 
         const state = get();
         const newQueue = queue ?? state.queue;
         const idx = newQueue.findIndex(t => t.id === track.id);
 
         // Set state immediately so the UI updates before the download completes.
+        // currentRadio: null ensures the PlayerBar switches out of radio mode right away.
         set({
           currentTrack: track,
+          currentRadio: null,
           queue: newQueue,
           queueIndex: idx >= 0 ? idx : 0,
           progress: 0,
@@ -457,8 +678,8 @@ export const usePlayerStore = create<PlayerState>()(
           isPlaying: true, // optimistic — reverted on error
         });
 
-        const url = buildStreamUrl(track.id);
         const authState = useAuthStore.getState();
+        const url = useOfflineStore.getState().getLocalUrl(track.id, authState.activeServerId ?? '') ?? buildStreamUrl(track.id);
         const replayGainDb = authState.replayGainEnabled
           ? (authState.replayGainMode === 'album' ? track.replayGainAlbumDb : track.replayGainTrackDb) ?? null
           : null;
@@ -469,19 +690,20 @@ export const usePlayerStore = create<PlayerState>()(
           durationHint: track.duration,
           replayGainDb,
           replayGainPeak,
+          manual,
         }).catch((err: unknown) => {
           if (playGeneration !== gen) return;
           console.error('[psysonic] audio_play failed:', err);
           set({ isPlaying: false });
           setTimeout(() => {
             if (playGeneration !== gen) return;
-            get().next();
+            get().next(false);
           }, 500);
         });
 
         // 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 => {
@@ -497,12 +719,21 @@ export const usePlayerStore = create<PlayerState>()(
 
       // ── pause / resume / togglePlay ──────────────────────────────────────────
       pause: () => {
-        invoke('audio_pause').catch(console.error);
-        isAudioPaused = true;
+        if (get().currentRadio) {
+          radioAudio.pause();
+        } else {
+          invoke('audio_pause').catch(console.error);
+          isAudioPaused = true;
+        }
         set({ isPlaying: false });
       },
 
       resume: () => {
+        if (get().currentRadio) {
+          radioAudio.play().catch(console.error);
+          set({ isPlaying: true });
+          return;
+        }
         const { currentTrack, queue, currentTime } = get();
         if (!currentTrack) return;
 
@@ -512,31 +743,64 @@ 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;
-          invoke('audio_play', {
-            url: buildStreamUrl(currentTrack.id),
-            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,
+              manual: false,
+              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,
+               manual: false,
+             }).catch((err: unknown) => {
+               if (playGeneration !== gen) return;
+               console.error('[psysonic] audio_play (cold resume) failed:', err);
+               set({ isPlaying: false });
+             });
+             syncQueueToServer(queue, currentTrack, currentTime);
+           });
         }
       },
 
@@ -549,17 +813,117 @@ export const usePlayerStore = create<PlayerState>()(
       },
 
       // ── next / previous ──────────────────────────────────────────────────────
-      next: () => {
-        const { queue, queueIndex, repeatMode } = get();
+      next: (manual = true) => {
+        const { queue, queueIndex, repeatMode, currentTrack } = get();
         const nextIdx = queueIndex + 1;
         if (nextIdx < queue.length) {
-          get().playTrack(queue[nextIdx], queue);
+          get().playTrack(queue[nextIdx], queue, manual);
+          // Proactively top up auto-added tracks when ≤ 2 remain ahead,
+          // so the queue never runs dry without a visible loading pause.
+          const { infiniteQueueEnabled } = useAuthStore.getState();
+          if (infiniteQueueEnabled && repeatMode === 'off' && !infiniteQueueFetching) {
+            const remainingAuto = queue.slice(nextIdx + 1).filter(t => t.autoAdded).length;
+            if (remainingAuto <= 2) {
+              infiniteQueueFetching = true;
+              getRandomSongs(5, currentTrack?.genre).then(songs => {
+                if (songs.length > 0) {
+                  const newTracks: Track[] = songs.map(s => ({ ...songToTrack(s), autoAdded: true }));
+                  set(state => ({ queue: [...state.queue, ...newTracks] }));
+                }
+              }).catch(() => {}).finally(() => { infiniteQueueFetching = false; });
+            }
+          }
+          // Proactively top up radio tracks when ≤ 2 remain — always, regardless
+          // of infinite queue setting.
+          const nextTrack = queue[nextIdx];
+          if (nextTrack.radioAdded && !radioFetching) {
+            const remainingRadio = queue.slice(nextIdx + 1).filter(t => t.radioAdded).length;
+            if (remainingRadio <= 2) {
+              const artistId = nextTrack.artistId ?? currentRadioArtistId ?? null;
+              const artistName = nextTrack.artist;
+              if (artistId) {
+                radioFetching = true;
+                Promise.all([getSimilarSongs2(artistId), getTopSongs(artistName)])
+                  .then(([similar, top]) => {
+                    const existingIds = new Set(get().queue.map(t => t.id));
+                    const fresh: Track[] = [...top, ...similar]
+                      .map(songToTrack)
+                      .filter(t => !existingIds.has(t.id))
+                      .slice(0, 10)
+                      .map(t => ({ ...t, radioAdded: true as const }));
+                    if (fresh.length > 0) {
+                      set(state => ({ queue: [...state.queue, ...fresh] }));
+                    }
+                  })
+                  .catch(() => {})
+                  .finally(() => { radioFetching = false; });
+              }
+            }
+          }
         } else if (repeatMode === 'all' && queue.length > 0) {
-          get().playTrack(queue[0], queue);
+          get().playTrack(queue[0], queue, manual);
         } else {
-          invoke('audio_stop').catch(console.error);
-          isAudioPaused = false;
-          set({ isPlaying: false, progress: 0, buffered: 0, currentTime: 0 });
+          // Queue exhausted. Check radio first (independent of infinite queue setting),
+          // then infinite queue, then stop.
+          if (currentTrack?.radioAdded && !radioFetching) {
+            const artistId = currentTrack.artistId ?? currentRadioArtistId ?? null;
+            if (artistId) {
+              radioFetching = true;
+              Promise.all([getSimilarSongs2(artistId), getTopSongs(currentTrack.artist)])
+                .then(([similar, top]) => {
+                  radioFetching = false;
+                  const existingIds = new Set(get().queue.map(t => t.id));
+                  const fresh: Track[] = [...top, ...similar]
+                    .map(songToTrack)
+                    .filter(t => !existingIds.has(t.id))
+                    .slice(0, 10)
+                    .map(t => ({ ...t, radioAdded: true as const }));
+                  if (fresh.length > 0) {
+                    const currentQueue = get().queue;
+                    const newQueue = [...currentQueue, ...fresh];
+                    get().playTrack(fresh[0], newQueue, false);
+                  } else {
+                    invoke('audio_stop').catch(console.error);
+                    isAudioPaused = false;
+                    set({ isPlaying: false, progress: 0, buffered: 0, currentTime: 0 });
+                  }
+                })
+                .catch(() => {
+                  radioFetching = false;
+                  invoke('audio_stop').catch(console.error);
+                  isAudioPaused = false;
+                  set({ isPlaying: false, progress: 0, buffered: 0, currentTime: 0 });
+                });
+              return;
+            }
+          }
+          const { infiniteQueueEnabled } = useAuthStore.getState();
+          if (infiniteQueueEnabled && repeatMode === 'off') {
+            if (infiniteQueueFetching) return;
+            infiniteQueueFetching = true;
+            getRandomSongs(5, currentTrack?.genre).then(songs => {
+              infiniteQueueFetching = false;
+              if (songs.length === 0) {
+                invoke('audio_stop').catch(console.error);
+                isAudioPaused = false;
+                set({ isPlaying: false, progress: 0, buffered: 0, currentTime: 0 });
+                return;
+              }
+              const newTracks: Track[] = songs.map(s => ({ ...songToTrack(s), autoAdded: true }));
+              const currentQueue = get().queue;
+              const newQueue = [...currentQueue, ...newTracks];
+              get().playTrack(newTracks[0], newQueue, false);
+            }).catch(() => {
+              infiniteQueueFetching = false;
+              invoke('audio_stop').catch(console.error);
+              isAudioPaused = false;
+              set({ isPlaying: false, progress: 0, buffered: 0, currentTime: 0 });
+            });
+          } else {
+            invoke('audio_stop').catch(console.error);
+            isAudioPaused = false;
+            set({ isPlaying: false, progress: 0, buffered: 0, currentTime: 0 });
+          }
         }
       },
 
@@ -587,6 +951,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);
       },
@@ -595,6 +960,7 @@ export const usePlayerStore = create<PlayerState>()(
       setVolume: (v) => {
         const clamped = Math.max(0, Math.min(1, v));
         invoke('audio_set_volume', { volume: clamped }).catch(console.error);
+        radioAudio.volume = clamped;
         set({ volume: clamped });
       },
 
@@ -605,16 +971,67 @@ export const usePlayerStore = create<PlayerState>()(
       // ── queue management ─────────────────────────────────────────────────────
       enqueue: (tracks) => {
         set(state => {
-          const newQueue = [...state.queue, ...tracks];
+          // Insert before the first upcoming auto-added track so the
+          // "Added automatically" separator always stays at the boundary.
+          const firstAutoIdx = state.queue.findIndex(
+            (t, i) => t.autoAdded && i > state.queueIndex
+          );
+          const newQueue = firstAutoIdx === -1
+            ? [...state.queue, ...tracks]
+            : [
+                ...state.queue.slice(0, firstAutoIdx),
+                ...tracks,
+                ...state.queue.slice(firstAutoIdx),
+              ];
           syncQueueToServer(newQueue, state.currentTrack, state.currentTime);
           return { queue: newQueue };
         });
       },
 
+      setRadioArtistId: (artistId) => { currentRadioArtistId = artistId; },
+
+      enqueueRadio: (tracks, artistId) => {
+        if (artistId) currentRadioArtistId = artistId;
+        set(state => {
+          // Drop all upcoming (not yet played) radio tracks — clicking "Start Radio"
+          // again replaces the pending radio batch instead of stacking on top.
+          const beforeAndCurrent = state.queue.slice(0, state.queueIndex + 1);
+          const upcoming = state.queue.slice(state.queueIndex + 1).filter(t => !t.radioAdded);
+          // Insert new radio tracks before any autoAdded tracks in the upcoming section.
+          const firstAutoIdx = upcoming.findIndex(t => t.autoAdded);
+          const merged = firstAutoIdx === -1
+            ? [...upcoming, ...tracks]
+            : [
+                ...upcoming.slice(0, firstAutoIdx),
+                ...tracks,
+                ...upcoming.slice(firstAutoIdx),
+              ];
+          const newQueue = [...beforeAndCurrent, ...merged];
+          syncQueueToServer(newQueue, state.currentTrack, state.currentTime);
+          return { queue: newQueue };
+        });
+      },
+
+      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);
       },
@@ -657,40 +1074,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',
@@ -703,7 +1135,7 @@ export const usePlayerStore = create<PlayerState>()(
         queueIndex: state.queueIndex,
         currentTime: state.currentTime,
         lastfmLovedCache: state.lastfmLovedCache,
-      } as Partial<PlayerState>),
+      }),
     }
   )
 );

src/store/playlistStore.ts

@@ -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' }
+  )
+);

src/store/sidebarStore.ts

@@ -0,0 +1,58 @@
+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: 'radio',         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',
+      onRehydrateStorage: () => (state) => {
+        if (!state) return;
+        const known = new Set(state.items.map(i => i.id));
+        const missing = DEFAULT_SIDEBAR_ITEMS.filter(i => !known.has(i.id));
+        if (missing.length > 0) {
+          state.items = [...state.items, ...missing];
+        }
+      },
+    }
+  )
+);

src/store/themeStore.ts

@@ -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' | 'navy-jukebox' | 'cobalt-media' | 'onyx-cinema' | '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' | 'azerothian-gold' | 'ascalon' | 'grand-theft-audio' | 'v-tactical' | 'nightcity-2077' | 'middle-earth' | 'morpheus' | 'pandora' | 'stark-hud' | 'blade' | 'imperial-sith' | 'order-of-the-phoenix' | 'heisenberg' | 'ice-and-fire' | 'doh-matic';
+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;

src/styles/layout.css

@@ -1,5 +1,14 @@
 /* ─── Psysonic App Shell ─── */
 
+*, *::before, *::after {
+  user-select: none;
+}
+
+/* Allow text selection only where the user needs to copy content */
+.artist-bio, [data-selectable] {
+  user-select: text;
+}
+
 .app-shell {
   position: relative;
   display: grid;
@@ -9,6 +18,11 @@
     "sidebar main queue"
     "player  player player";
   height: 100vh;
+  /* overflow: hidden keeps the player bar pinned at the bottom even when the
+     window is dragged below the OS minHeight constraint (ignored on some
+     Linux WMs/compositors). Without this, the 1fr row's implicit auto
+     min-height can push the grid taller than 100vh, scrolling the player
+     bar out of view. */
   overflow: hidden;
   background: var(--bg-app);
 }
@@ -38,7 +52,9 @@
   flex-direction: column;
   background: var(--bg-sidebar);
   border-right: 1px solid var(--border-subtle);
-  overflow: hidden;
+  position: relative;
+  z-index: 2;
+  min-height: 0; /* allow 1fr row to shrink freely */
 }
 
 .sidebar-brand {
@@ -70,7 +86,7 @@
 
 .sidebar-nav {
   flex: 1;
-  padding: var(--space-4) var(--space-3);
+  padding: var(--space-1) var(--space-3) var(--space-4);
   display: flex;
   flex-direction: column;
   gap: var(--space-1);
@@ -134,18 +150,17 @@
   opacity: 1;
 }
 
-/* Now Playing nav link */
+/* Now Playing nav link — subtly accented but not permanently "active"-looking */
 .nav-link-nowplaying {
   color: var(--accent);
-  background: var(--accent-dim);
   font-weight: 600;
 }
 .nav-link-nowplaying:hover {
-  background: color-mix(in srgb, var(--accent) 20%, transparent);
+  background: var(--bg-hover);
   color: var(--accent);
 }
 .nav-link-nowplaying.active {
-  background: color-mix(in srgb, var(--accent) 22%, transparent);
+  background: var(--accent-dim);
   color: var(--accent);
 }
 .nav-link-nowplaying svg {
@@ -176,7 +191,7 @@
 /* Collapsed Sidebar Styles */
 .sidebar.collapsed .sidebar-brand {
   justify-content: center;
-  padding: 0;
+  padding: 0 var(--space-3);
 }
 
 .sidebar.collapsed .nav-link {
@@ -185,21 +200,49 @@
 }
 
 .collapse-btn {
-  background: transparent;
-  border: none;
+  position: absolute;
+  top: calc(50% - var(--player-height) / 2);
+  left: calc(var(--sidebar-width) - 11px);
+  transform: translateY(-50%);
+  z-index: 101;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  border: 1px solid var(--border-subtle);
+  background: var(--bg-card);
   color: var(--text-muted);
   cursor: pointer;
-  padding: var(--space-2);
-  border-radius: var(--radius-md);
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all var(--transition-fast);
+  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
+  box-shadow: var(--shadow-sm);
 }
 
 .collapse-btn:hover {
   background: var(--bg-hover);
   color: var(--text-primary);
+  box-shadow: var(--shadow-md);
+}
+
+.queue-toggle-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--radius-md);
+  border: none;
+  background: transparent;
+  color: var(--accent);
+  cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease;
+  flex-shrink: 0;
+}
+
+.queue-toggle-btn:hover {
+  background: var(--accent-dim);
+  color: var(--accent);
 }
 
 /* ─── Update Toast ─── */
@@ -208,6 +251,138 @@
   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;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.app-updater-hint {
+  font-size: 10px;
+  color: var(--text-muted);
+  font-style: italic;
+  margin: 0 0 2px;
+}
+.app-updater-error {
+  font-size: 10px;
+  color: var(--danger);
+  background: color-mix(in srgb, var(--danger) 12%, transparent);
+  border-radius: 4px;
+  padding: 4px 6px;
+  margin-bottom: 4px;
+  word-break: break-all;
+}
+.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-btn-secondary {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 11px;
+  font-weight: 400;
+  color: var(--text-secondary);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  opacity: 0.75;
+  transition: opacity var(--transition-fast);
+}
+.app-updater-btn-secondary:hover { opacity: 1; color: var(--text-primary); }
+.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);
@@ -266,6 +441,35 @@
   cursor: default;
 }
 
+/* ─── Sidebar offline download queue ─── */
+.sidebar-offline-queue {
+  margin: 4px var(--space-1) 0;
+  padding: 6px 10px;
+  border-radius: var(--radius-md);
+  background: var(--accent-dim);
+  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  font-size: 11px;
+  color: var(--accent);
+  overflow: hidden;
+}
+
+.sidebar-offline-queue--collapsed {
+  justify-content: center;
+  padding: 6px;
+}
+
+@keyframes spin-slow {
+  to { transform: rotate(360deg); }
+}
+
+.spin-slow {
+  animation: spin-slow 2s linear infinite;
+  flex-shrink: 0;
+}
+
 /* ─── Main Content ─── */
 .main-content {
   grid-area: main;
@@ -273,6 +477,7 @@
   flex-direction: column;
   overflow: hidden;
   min-width: 0;
+  min-height: 0; /* allow 1fr row to shrink freely */
   background: var(--bg-app);
   z-index: 1;
 }
@@ -304,6 +509,82 @@
   overflow-y: auto;
   overflow-x: hidden;
   padding: var(--space-6);
+  contain: paint;
+}
+
+/* ─── Offline Banner ─── */
+.offline-banner {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 16px;
+  background: color-mix(in srgb, var(--accent) 12%, var(--bg-sidebar));
+  border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
+  color: var(--accent);
+  font-size: 12px;
+  font-weight: 500;
+  flex-shrink: 0;
+}
+
+.offline-banner span {
+  flex: 1;
+}
+
+.offline-banner-retry {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  background: none;
+  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
+  border-radius: var(--radius-sm);
+  color: var(--accent);
+  font-size: 11px;
+  padding: 2px 8px;
+  cursor: pointer;
+  transition: background var(--transition-fast);
+}
+
+.offline-banner-retry:hover {
+  background: color-mix(in srgb, var(--accent) 15%, transparent);
+}
+
+.offline-banner-retry:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+/* ─── Offline Storage Full Banner ─── */
+.offline-storage-full-banner {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 10px 16px;
+  margin: 0 0 1rem 0;
+  background: color-mix(in srgb, var(--color-danger, #e53935) 12%, var(--bg-card));
+  border: 1px solid color-mix(in srgb, var(--color-danger, #e53935) 40%, transparent);
+  border-radius: var(--radius-md);
+  font-size: 13px;
+  color: var(--text-primary);
+  line-height: 1.4;
+}
+
+.offline-storage-full-banner span {
+  flex: 1;
+}
+
+.offline-storage-full-dismiss {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--text-muted);
+  font-size: 18px;
+  line-height: 1;
+  padding: 0 2px;
+  flex-shrink: 0;
+}
+
+.offline-storage-full-dismiss:hover {
+  color: var(--text-primary);
 }
 
 /* ─── Player Bar ─── */
@@ -311,7 +592,7 @@
   grid-area: player;
   display: flex;
   align-items: center;
-  gap: var(--space-4);
+  gap: var(--space-6);
   padding: 0 var(--space-5);
   background: var(--bg-player);
   border-top: 1px solid var(--border-subtle);
@@ -324,9 +605,9 @@
   display: flex;
   align-items: center;
   gap: var(--space-3);
-  flex: 0 0 auto;
-  max-width: min(40vw, 480px);
+  flex: 0 0 320px;
   min-width: 0;
+  overflow: hidden;
 }
 
 .player-album-art {
@@ -385,6 +666,7 @@
 .player-album-art-wrap.clickable:hover .player-art-expand-hint { opacity: 1; }
 
 .player-track-meta {
+  flex: 1 1 0;
   min-width: 0;
   overflow: hidden;
 }
@@ -393,20 +675,33 @@
   font-size: 14px;
   font-weight: 600;
   color: var(--text-primary);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 
 .player-track-artist {
   font-size: 12px;
   color: var(--text-secondary);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
   margin-top: 2px;
 }
 
+/* ── Marquee (PlayerBar track name / artist) ── */
+.marquee-wrap {
+  overflow: hidden;
+  white-space: nowrap;
+  width: 100%;
+}
+
+.marquee-scroll {
+  display: inline-block;
+  animation: player-marquee 12s linear infinite;
+  animation-delay: 2s;
+}
+
+@keyframes player-marquee {
+  0%,   12% { transform: translateX(0); }
+  78%,  88% { transform: translateX(var(--marquee-amount)); }
+  88.1%, 100% { transform: translateX(0); }
+}
+
 .player-buttons {
   display: flex;
   align-items: center;
@@ -437,6 +732,11 @@
   height: 28px;
 }
 
+/* Star + Last.fm heart — visually separated from track title */
+.player-star-btn {
+  margin: var(--space-1);
+}
+
 .player-btn-primary {
   width: 46px;
   height: 46px;
@@ -462,6 +762,8 @@
   display: flex;
   align-items: center;
   gap: var(--space-2);
+  margin-left: 24px;
+  margin-right: 24px;
 }
 
 .player-waveform-wrap {
@@ -475,6 +777,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 */
@@ -486,9 +797,30 @@
   width: 155px;
 }
 
-.player-volume-slider {
+.player-volume-slider-wrap {
   flex: 1;
   min-width: 0;
+  position: relative;
+}
+
+.player-volume-slider {
+  width: 100%;
+}
+
+.player-volume-pct {
+  position: absolute;
+  bottom: calc(100% + 6px);
+  transform: translateX(-50%);
+  font-size: 10px;
+  font-weight: 600;
+  background: var(--bg-card);
+  color: var(--text-primary);
+  border: 1px solid var(--border-subtle);
+  padding: 2px 6px;
+  border-radius: var(--radius-sm);
+  pointer-events: none;
+  white-space: nowrap;
+  box-shadow: var(--shadow-sm);
 }
 
 .player-eq-btn {
@@ -569,6 +901,12 @@
   flex-direction: column;
   overflow: hidden;
   min-width: 0;
+  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 {
@@ -699,13 +1037,18 @@
 }
 
 .queue-current-track {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.queue-current-track-body {
   padding: var(--space-3) var(--space-4);
   display: flex;
   flex-direction: row;
   align-items: flex-start;
   gap: var(--space-3);
-  flex-shrink: 0;
-  border-bottom: 1px solid var(--border-subtle);
 }
 
 .queue-current-cover {
@@ -753,21 +1096,18 @@
 }
 
 .queue-current-tech {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  width: 100%;
   font-size: 9px;
   font-family: monospace;
   letter-spacing: 0.05em;
-  background: rgba(0, 0, 0, 0.62);
-  backdrop-filter: blur(4px);
-  color: rgba(255, 255, 255, 0.85);
-  padding: 3px 6px;
-  text-align: center;
+  background: var(--ctp-surface1);
+  color: var(--accent);
+  padding: 3px var(--space-4);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  text-align: center;
+  backdrop-filter: blur(8px);
 }
 
 .queue-divider {

src/utils/backup.ts

@@ -0,0 +1,73 @@
+import { save, open as openDialog } from '@tauri-apps/plugin-dialog';
+import { writeFile, readTextFile } from '@tauri-apps/plugin-fs';
+import { version as appVersion } from '../../package.json';
+
+const BACKUP_VERSION = 1;
+
+const BACKUP_KEYS = [
+  'psysonic-auth',
+  'psysonic_theme',
+  'psysonic_font',
+  'psysonic_language',
+  'psysonic_keybindings',
+  'psysonic_sidebar',
+  'psysonic-eq',
+  'psysonic_global_shortcuts',
+  'psysonic-player',
+];
+
+export async function exportBackup(): Promise<string | null> {
+  const stores: Record<string, unknown> = {};
+  for (const key of BACKUP_KEYS) {
+    const val = localStorage.getItem(key);
+    if (val !== null) {
+      try {
+        stores[key] = JSON.parse(val);
+      } catch {
+        stores[key] = val;
+      }
+    }
+  }
+
+  const manifest = {
+    version: BACKUP_VERSION,
+    app_version: appVersion,
+    created_at: new Date().toISOString(),
+    stores,
+  };
+
+  const today = new Date().toISOString().slice(0, 10);
+  const path = await save({
+    filters: [{ name: 'Psysonic Backup', extensions: ['psybkp'] }],
+    defaultPath: `psysonic-backup-${today}.psybkp`,
+  });
+
+  if (!path) return null;
+
+  const content = JSON.stringify(manifest, null, 2);
+  await writeFile(path, new TextEncoder().encode(content));
+  return path;
+}
+
+export async function importBackup(): Promise<void> {
+  const path = await openDialog({
+    filters: [{ name: 'Psysonic Backup', extensions: ['psybkp'] }],
+    multiple: false,
+    title: 'Import Psysonic Backup',
+  });
+
+  if (!path || typeof path !== 'string') return;
+
+  const raw = await readTextFile(path);
+  const manifest = JSON.parse(raw);
+
+  if (typeof manifest.version !== 'number' || !manifest.stores || typeof manifest.stores !== 'object') {
+    throw new Error('invalid_backup');
+  }
+
+  for (const [key, value] of Object.entries(manifest.stores)) {
+    localStorage.setItem(key, JSON.stringify(value));
+  }
+
+  window.location.reload();
+}

src/utils/dragGhost.ts

@@ -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 });
+}

src/utils/exportNewAlbums.ts

@@ -0,0 +1,283 @@
+import { writeFile } from '@tauri-apps/plugin-fs';
+import { downloadDir, join } from '@tauri-apps/api/path';
+import { getAlbumList, buildCoverArtUrl } from '../api/subsonic';
+import { useAuthStore } from '../store/authStore';
+import type { SubsonicAlbum } from '../api/subsonic';
+
+// Catppuccin Macchiato palette
+const M = {
+  crust:    '#181926',
+  mantle:   '#1e2030',
+  base:     '#24273a',
+  surface0: '#363a4f',
+  surface1: '#494d64',
+  surface2: '#5b6078',
+  text:     '#cad3f5',
+  subtext1: '#b8c0e0',
+  subtext0: '#a5adcb',
+  mauve:    '#c6a0f6',
+  lavender: '#b7bdf8',
+  overlay2: '#939ab7',
+};
+
+const W          = 1080;
+const PAD        = 56;
+const COVER_SIZE = 52;
+const ROW_H      = 72;
+const COVER_PAD  = (ROW_H - COVER_SIZE) / 2;
+const TEXT_X     = PAD + COVER_SIZE + 18;
+const TEXT_W     = W - TEXT_X - PAD;
+const HEADER_H   = 260;
+const FOOTER_H   = 72;
+const MAX_PER_PAGE = 20;
+
+function clampText(ctx: CanvasRenderingContext2D, text: string, maxW: number): string {
+  if (ctx.measureText(text).width <= maxW) return text;
+  let t = text;
+  while (ctx.measureText(t + '…').width > maxW && t.length > 0) t = t.slice(0, -1);
+  return t + '…';
+}
+
+async function loadImage(url: string): Promise<ImageBitmap | null> {
+  try {
+    const res = await fetch(url);
+    if (!res.ok) return null;
+    return await createImageBitmap(await res.blob());
+  } catch { return null; }
+}
+
+async function loadLogo(): Promise<HTMLImageElement | null> {
+  try {
+    const res = await fetch('/psysonic-inapp-logo.svg');
+    if (!res.ok) return null;
+    const blob = await res.blob();
+    const url = URL.createObjectURL(blob);
+    return new Promise(resolve => {
+      const img = new Image();
+      img.onload = () => { URL.revokeObjectURL(url); resolve(img); };
+      img.onerror = () => { URL.revokeObjectURL(url); resolve(null); };
+      img.src = url;
+    });
+  } catch { return null; }
+}
+
+function roundRect(ctx: CanvasRenderingContext2D, x: number, y: number, w: number, h: number, r: number) {
+  ctx.beginPath();
+  ctx.moveTo(x + r, y);
+  ctx.lineTo(x + w - r, y);
+  ctx.quadraticCurveTo(x + w, y, x + w, y + r);
+  ctx.lineTo(x + w, y + h - r);
+  ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
+  ctx.lineTo(x + r, y + h);
+  ctx.quadraticCurveTo(x, y + h, x, y + h - r);
+  ctx.lineTo(x, y + r);
+  ctx.quadraticCurveTo(x, y, x + r, y);
+  ctx.closePath();
+}
+
+async function renderPage(
+  albums: SubsonicAlbum[],
+  covers: (ImageBitmap | null)[],
+  logo: HTMLImageElement | null,
+  now: Date,
+  totalCount: number,
+  pageNum: number,
+  totalPages: number,
+  globalOffset: number,
+): Promise<Blob> {
+  const H = HEADER_H + albums.length * ROW_H + FOOTER_H;
+  const canvas = document.createElement('canvas');
+  canvas.width = W;
+  canvas.height = H;
+  const ctx = canvas.getContext('2d')!;
+
+  // Background
+  ctx.fillStyle = M.base;
+  ctx.fillRect(0, 0, W, H);
+
+  const headerGrad = ctx.createLinearGradient(0, 0, 0, HEADER_H);
+  headerGrad.addColorStop(0, M.mantle);
+  headerGrad.addColorStop(1, M.base);
+  ctx.fillStyle = headerGrad;
+  ctx.fillRect(0, 0, W, HEADER_H);
+
+  // Logo
+  const LOGO_H = 52;
+  const logoY = 44;
+  if (logo) {
+    const logoW = logo.naturalWidth && logo.naturalHeight
+      ? Math.round(LOGO_H * (logo.naturalWidth / logo.naturalHeight))
+      : LOGO_H * 4;
+    ctx.drawImage(logo, W / 2 - logoW / 2, logoY, logoW, LOGO_H);
+  }
+
+  // Title
+  ctx.textAlign = 'center';
+  ctx.font = '700 42px system-ui, sans-serif';
+  ctx.fillStyle = M.text;
+  ctx.fillText('Die neuesten Alben', W / 2, logoY + LOGO_H + 52);
+
+  // Date + page indicator
+  const dateStr = now.toLocaleDateString('de-DE', { day: '2-digit', month: 'long', year: 'numeric' });
+  const pageStr = totalPages > 1 ? `  ·  Teil ${pageNum} / ${totalPages}` : '';
+  ctx.font = '400 18px system-ui, sans-serif';
+  ctx.fillStyle = M.subtext0;
+  ctx.fillText(dateStr + pageStr, W / 2, logoY + LOGO_H + 82);
+
+  // Count badge (total, only on first page)
+  if (pageNum === 1) {
+    const badgeText = `${totalCount} ${totalCount !== 1 ? 'Alben' : 'Album'}`;
+    ctx.font = '600 13px system-ui, sans-serif';
+    const badgeW = ctx.measureText(badgeText).width + 24;
+    const badgeX = W / 2 - badgeW / 2;
+    const badgeY = logoY + LOGO_H + 102;
+    roundRect(ctx, badgeX, badgeY, badgeW, 24, 12);
+    ctx.fillStyle = M.surface0;
+    ctx.fill();
+    ctx.fillStyle = M.mauve;
+    ctx.fillText(badgeText, W / 2, badgeY + 16);
+  }
+
+  // Divider
+  ctx.strokeStyle = M.surface1;
+  ctx.lineWidth = 1;
+  ctx.beginPath();
+  ctx.moveTo(PAD, HEADER_H - 16);
+  ctx.lineTo(W - PAD, HEADER_H - 16);
+  ctx.stroke();
+
+  // Album rows
+  for (let i = 0; i < albums.length; i++) {
+    const album = albums[i];
+    const cover = covers[i];
+    const rowY = HEADER_H + i * ROW_H;
+    const coverY = rowY + COVER_PAD;
+    const globalIdx = globalOffset + i;
+
+    if (i % 2 === 0) {
+      ctx.fillStyle = 'rgba(54,58,79,0.35)';
+      ctx.fillRect(0, rowY, W, ROW_H);
+    }
+
+    // Index
+    ctx.textAlign = 'right';
+    ctx.font = '500 13px system-ui, sans-serif';
+    ctx.fillStyle = M.surface2;
+    ctx.fillText(String(globalIdx + 1), PAD - 12, coverY + COVER_SIZE / 2 + 5);
+
+    // Cover
+    roundRect(ctx, PAD, coverY, COVER_SIZE, COVER_SIZE, 8);
+    ctx.fillStyle = M.surface0;
+    ctx.fill();
+    if (cover) {
+      ctx.save();
+      roundRect(ctx, PAD, coverY, COVER_SIZE, COVER_SIZE, 8);
+      ctx.clip();
+      ctx.drawImage(cover, PAD, coverY, COVER_SIZE, COVER_SIZE);
+      ctx.restore();
+    } else {
+      ctx.font = '28px system-ui';
+      ctx.fillStyle = M.surface2;
+      ctx.textAlign = 'center';
+      ctx.fillText('♪', PAD + COVER_SIZE / 2, coverY + COVER_SIZE / 2 + 10);
+    }
+
+    // Text row
+    ctx.textAlign = 'left';
+    ctx.font = '600 17px system-ui, sans-serif';
+    const lineY = coverY + COVER_SIZE / 2 + 6;
+    const sep = '  —  ';
+
+    const artistClamp = clampText(ctx, album.artist, TEXT_W * 0.42);
+    const artistW = ctx.measureText(artistClamp).width;
+    const sepW = ctx.measureText(sep).width;
+    const remaining = TEXT_W - artistW - sepW;
+    const albumClamp = clampText(ctx, album.name, remaining * 0.65);
+    const albumW = ctx.measureText(albumClamp).width;
+
+    ctx.fillStyle = M.mauve;
+    ctx.fillText(artistClamp, TEXT_X, lineY);
+    ctx.fillStyle = M.overlay2;
+    ctx.fillText(sep, TEXT_X + artistW, lineY);
+    ctx.fillStyle = M.text;
+    ctx.fillText(albumClamp, TEXT_X + artistW + sepW, lineY);
+
+    if (album.year || album.genre) {
+      ctx.font = '400 15px system-ui, sans-serif';
+      let cx = TEXT_X + artistW + sepW + albumW;
+      if (album.year) {
+        ctx.fillStyle = M.subtext0;
+        const yearPart = `  (${album.year})`;
+        ctx.fillText(yearPart, cx, lineY);
+        cx += ctx.measureText(yearPart).width;
+      }
+      if (album.genre) {
+        ctx.fillStyle = M.subtext0;
+        const dashPart = '  —  ';
+        ctx.fillText(dashPart, cx, lineY);
+        cx += ctx.measureText(dashPart).width;
+        ctx.fillStyle = M.lavender;
+        ctx.fillText(clampText(ctx, album.genre, TEXT_X + TEXT_W - cx), cx, lineY);
+      }
+    }
+
+    if (i < albums.length - 1) {
+      ctx.strokeStyle = M.surface0;
+      ctx.lineWidth = 1;
+      ctx.beginPath();
+      ctx.moveTo(PAD, rowY + ROW_H);
+      ctx.lineTo(W - PAD, rowY + ROW_H);
+      ctx.stroke();
+    }
+  }
+
+  // Footer
+  ctx.textAlign = 'center';
+  ctx.font = '400 13px system-ui, sans-serif';
+  ctx.fillStyle = M.overlay2;
+  ctx.fillText('www.psysonic.de', W / 2, H - FOOTER_H / 2 + 6);
+
+  return new Promise(resolve => canvas.toBlob(b => resolve(b!), 'image/png'));
+}
+
+export async function exportNewAlbumsImage(since: number): Promise<{ count: number; paths: string[] } | null> {
+  const albums = await getAlbumList('newest', 500);
+  if (albums.length === 0) return null;
+
+  const newAlbums = since > 0
+    ? albums.filter(a => a.created && new Date(a.created).getTime() >= since)
+    : albums;
+
+  if (newAlbums.length === 0) return null;
+
+  newAlbums.sort((a, b) => a.artist.localeCompare(b.artist, 'de') || a.name.localeCompare(b.name, 'de'));
+
+  // Chunk into pages
+  const pages: SubsonicAlbum[][] = [];
+  for (let i = 0; i < newAlbums.length; i += MAX_PER_PAGE) {
+    pages.push(newAlbums.slice(i, i + MAX_PER_PAGE));
+  }
+
+  const now = new Date();
+  const logo = await loadLogo();
+  const { downloadFolder } = useAuthStore.getState();
+  const folder = downloadFolder || await downloadDir();
+  const timestamp = now.toISOString().slice(0, 10);
+  const paths: string[] = [];
+
+  for (let p = 0; p < pages.length; p++) {
+    const page = pages[p];
+    const covers = await Promise.all(
+      page.map(a => a.coverArt ? loadImage(buildCoverArtUrl(a.coverArt, 160)) : Promise.resolve(null))
+    );
+
+    const blob = await renderPage(page, covers, logo, now, newAlbums.length, p + 1, pages.length, p * MAX_PER_PAGE);
+    const suffix = pages.length > 1 ? `-${p + 1}` : '';
+    const filename = `psysonic-new-albums-${timestamp}${suffix}.png`;
+    const filePath = await join(folder, filename);
+    await writeFile(filePath, new Uint8Array(await blob.arrayBuffer()));
+    paths.push(filePath);
+  }
+
+  return { count: newAlbums.length, paths };
+}

src/utils/imageCache.ts

@@ -1,3 +1,5 @@
+import { useAuthStore } from '../store/authStore';
+
 const DB_NAME = 'psysonic-img-cache';
 const STORE_NAME = 'images';
 const MAX_AGE_MS = 30 * 24 * 60 * 60 * 1000; // 30 days
@@ -7,16 +9,36 @@ const MAX_CONCURRENT_FETCHES = 5;
 // In-memory map: cacheKey → object URL (insertion-order = LRU approximation)
 const objectUrlCache = new Map<string, string>();
 
-// Concurrency limiter for network fetches
+// Concurrency limiter for network fetches.
+// Each queue entry is a resolver that signals "slot acquired".
 let activeFetches = 0;
 const fetchQueue: Array<() => void> = [];
 
-function acquireFetchSlot(): Promise<void> {
+/**
+ * Acquires a fetch slot. Returns true if a slot was granted, false if the
+ * provided AbortSignal fired while the call was waiting in the queue (in that
+ * case no slot is held and the caller must NOT call releaseFetchSlot).
+ */
+function acquireFetchSlot(signal?: AbortSignal): Promise<boolean> {
+  if (signal?.aborted) return Promise.resolve(false);
   if (activeFetches < MAX_CONCURRENT_FETCHES) {
     activeFetches++;
-    return Promise.resolve();
+    return Promise.resolve(true);
   }
-  return new Promise(resolve => fetchQueue.push(resolve));
+  return new Promise<boolean>(resolve => {
+    const onGrant = () => {
+      signal?.removeEventListener('abort', onAbort);
+      resolve(true);
+    };
+    const onAbort = () => {
+      // Remove from queue without consuming a slot — no releaseFetchSlot needed.
+      const idx = fetchQueue.indexOf(onGrant);
+      if (idx !== -1) fetchQueue.splice(idx, 1);
+      resolve(false);
+    };
+    fetchQueue.push(onGrant);
+    signal?.addEventListener('abort', onAbort, { once: true });
+  });
 }
 
 function releaseFetchSlot(): void {
@@ -25,7 +47,7 @@ function releaseFetchSlot(): void {
   if (next) { activeFetches++; next(); }
 }
 
-function evictIfNeeded(): void {
+function evictMemoryIfNeeded(): void {
   while (objectUrlCache.size > MAX_MEMORY_CACHE) {
     const oldestKey = objectUrlCache.keys().next().value;
     if (!oldestKey) break;
@@ -73,6 +95,48 @@ async function getBlob(key: string): Promise<Blob | null> {
   }
 }
 
+/** Evicts oldest IDB entries until total blob size is below maxBytes. Fire-and-forget. */
+async function evictDiskIfNeeded(maxBytes: number): Promise<void> {
+  try {
+    const database = await openDB();
+    const entries: Array<{ key: string; timestamp: number; size: number }> = await new Promise(resolve => {
+      const req = database.transaction(STORE_NAME, 'readonly').objectStore(STORE_NAME).getAll();
+      req.onsuccess = () => {
+        resolve(
+          (req.result ?? []).map((e: { key: string; timestamp: number; blob: Blob }) => ({
+            key: e.key,
+            timestamp: e.timestamp,
+            size: e.blob?.size ?? 0,
+          })),
+        );
+      };
+      req.onerror = () => resolve([]);
+    });
+
+    let total = entries.reduce((acc, e) => acc + e.size, 0);
+    if (total <= maxBytes) return;
+
+    // Oldest first
+    entries.sort((a, b) => a.timestamp - b.timestamp);
+
+    const tx = database.transaction(STORE_NAME, 'readwrite');
+    const store = tx.objectStore(STORE_NAME);
+    for (const entry of entries) {
+      if (total <= maxBytes) break;
+      store.delete(entry.key);
+      // Also purge from memory cache
+      const objUrl = objectUrlCache.get(entry.key);
+      if (objUrl) {
+        URL.revokeObjectURL(objUrl);
+        objectUrlCache.delete(entry.key);
+      }
+      total -= entry.size;
+    }
+  } catch {
+    // Ignore
+  }
+}
+
 async function putBlob(key: string, blob: Blob): Promise<void> {
   try {
     const database = await openDB();
@@ -82,18 +146,59 @@ async function putBlob(key: string, blob: Blob): Promise<void> {
       tx.oncomplete = () => resolve();
       tx.onerror = () => resolve();
     });
+    // Enforce disk limit after write (fire-and-forget)
+    const maxBytes = useAuthStore.getState().maxCacheMb * 1024 * 1024;
+    evictDiskIfNeeded(maxBytes);
   } catch {
     // Ignore write errors
   }
 }
 
+/** Returns the total size in bytes of all blobs stored in IndexedDB. */
+export async function getImageCacheSize(): Promise<number> {
+  try {
+    const database = await openDB();
+    return new Promise(resolve => {
+      const req = database.transaction(STORE_NAME, 'readonly').objectStore(STORE_NAME).getAll();
+      req.onsuccess = () => {
+        const entries: Array<{ blob: Blob }> = req.result ?? [];
+        resolve(entries.reduce((acc, e) => acc + (e.blob?.size ?? 0), 0));
+      };
+      req.onerror = () => resolve(0);
+    });
+  } catch {
+    return 0;
+  }
+}
+
+/** Clears all entries from IndexedDB and revokes all in-memory object URLs. */
+export async function clearImageCache(): Promise<void> {
+  for (const url of objectUrlCache.values()) {
+    URL.revokeObjectURL(url);
+  }
+  objectUrlCache.clear();
+  try {
+    const database = await openDB();
+    await new Promise<void>(resolve => {
+      const tx = database.transaction(STORE_NAME, 'readwrite');
+      tx.objectStore(STORE_NAME).clear();
+      tx.oncomplete = () => resolve();
+      tx.onerror = () => resolve();
+    });
+  } catch {
+    // Ignore
+  }
+}
+
 /**
  * Returns a cached object URL for an image.
  * @param fetchUrl  The actual URL to fetch from (may contain ephemeral auth params).
  * @param cacheKey  A stable key that identifies the image across sessions.
+ * @param signal    Optional AbortSignal — aborts queue-waiting and in-flight fetches
+ *                  so navigating away does not leave zombie fetches draining I/O.
  */
-export async function getCachedUrl(fetchUrl: string, cacheKey: string): Promise<string> {
-  if (!fetchUrl) return '';
+export async function getCachedUrl(fetchUrl: string, cacheKey: string, signal?: AbortSignal): Promise<string> {
+  if (!fetchUrl || signal?.aborted) return '';
 
   // 1. In-memory hit (same session)
   const existing = objectUrlCache.get(cacheKey);
@@ -101,26 +206,34 @@ export async function getCachedUrl(fetchUrl: string, cacheKey: string): Promise<
 
   // 2. IndexedDB hit (persisted from previous session)
   const blob = await getBlob(cacheKey);
+  if (signal?.aborted) return '';
   if (blob) {
     const objUrl = URL.createObjectURL(blob);
     objectUrlCache.set(cacheKey, objUrl);
-    evictIfNeeded();
+    evictMemoryIfNeeded();
     return objUrl;
   }
 
-  // 3. Network fetch with concurrency limit → store in IDB → return object URL
-  await acquireFetchSlot();
+  // 3. Network fetch with concurrency limit → store in IDB → return object URL.
+  // acquireFetchSlot returns false (without holding a slot) when aborted in queue.
+  const acquired = await acquireFetchSlot(signal);
+  if (!acquired || signal?.aborted) {
+    if (acquired) releaseFetchSlot();
+    return '';
+  }
   try {
     const resp = await fetch(fetchUrl);
     if (!resp.ok) return fetchUrl;
     const newBlob = await resp.blob();
-    putBlob(cacheKey, newBlob); // fire-and-forget
+    if (signal?.aborted) return '';
+    putBlob(cacheKey, newBlob); // fire-and-forget (includes disk eviction)
     const objUrl = URL.createObjectURL(newBlob);
     objectUrlCache.set(cacheKey, objUrl);
-    evictIfNeeded();
+    evictMemoryIfNeeded();
     return objUrl;
-  } catch {
-    return fetchUrl;
+  } catch (e) {
+    // AbortError → return '' (component is gone). Other errors → return raw URL.
+    return e instanceof DOMException && e.name === 'AbortError' ? '' : fetchUrl;
   } finally {
     releaseFetchSlot();
   }

src/utils/playAlbum.ts

@@ -20,7 +20,12 @@ function fadeOut(setVolume: (v: number) => void, from: number, durationMs: numbe
 
 export async function playAlbum(albumId: string): Promise<void> {
   const albumData = await getAlbum(albumId);
-  const tracks = albumData.songs.map(songToTrack);
+  const albumGenre = albumData.album.genre;
+  const tracks = albumData.songs.map(s => {
+    const track = songToTrack(s);
+    if (!track.genre && albumGenre) track.genre = albumGenre;
+    return track;
+  });
   if (!tracks.length) return;
 
   const store = usePlayerStore.getState();

src/utils/toast.ts

@@ -0,0 +1,87 @@
+/**
+ * Lightweight DOM-based toast notification.
+ * Uses the app's CSS custom properties so it respects the active theme.
+ * Multiple toasts stack vertically above each other.
+ */
+
+const TOAST_GAP = 8;
+const TOAST_BOTTOM_ANCHOR = 100;
+
+function getActiveToasts(): HTMLElement[] {
+  return Array.from(document.querySelectorAll<HTMLElement>('.psysonic-toast'));
+}
+
+function reflow(): void {
+  const toasts = getActiveToasts();
+  let bottom = TOAST_BOTTOM_ANCHOR;
+  for (let i = toasts.length - 1; i >= 0; i--) {
+    toasts[i].style.bottom = `${bottom}px`;
+    bottom += toasts[i].offsetHeight + TOAST_GAP;
+  }
+}
+
+export type ToastVariant = 'error' | 'info';
+
+export function showToast(text: string, durationMs = 4000, variant: ToastVariant = 'info'): void {
+  const isError = variant === 'error';
+
+  const toast = document.createElement('div');
+  toast.className = 'psysonic-toast';
+
+  const icon = document.createElement('span');
+  icon.textContent = isError ? '✕' : 'ℹ';
+  icon.style.cssText = `
+    flex-shrink: 0;
+    font-size: 11px;
+    font-weight: 700;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: ${isError ? 'var(--danger)' : 'var(--accent)'};
+    color: var(--bg-app);
+    line-height: 1;
+  `;
+
+  const msg = document.createElement('span');
+  msg.textContent = text;
+  msg.style.cssText = `flex: 1; min-width: 0;`;
+
+  toast.style.cssText = `
+    position: fixed;
+    bottom: ${TOAST_BOTTOM_ANCHOR}px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    background: var(--bg-card);
+    color: var(--text-primary);
+    border: 1px solid ${isError ? 'var(--danger)' : 'var(--border)'};
+    border-left: 3px solid ${isError ? 'var(--danger)' : 'var(--accent)'};
+    padding: 10px 16px;
+    border-radius: 8px;
+    font-size: 13.5px;
+    font-weight: 500;
+    z-index: 999999;
+    pointer-events: none;
+    box-shadow: 0 4px 24px rgba(0,0,0,0.45)${isError ? ', 0 0 0 1px color-mix(in srgb, var(--danger) 20%, transparent)' : ''};
+    white-space: normal;
+    word-break: break-word;
+    transition: bottom 150ms ease;
+    max-width: 480px;
+    width: max-content;
+  `;
+
+  toast.appendChild(icon);
+  toast.appendChild(msg);
+  document.body.appendChild(toast);
+  reflow();
+
+  setTimeout(() => {
+    toast.remove();
+    reflow();
+  }, durationMs);
+}

src/utils/useTracklistColumns.ts

@@ -0,0 +1,179 @@
+import React, { useState, useEffect, useMemo, useRef, useCallback } from 'react';
+
+export interface ColDef {
+  readonly key: string;
+  readonly i18nKey?: string | null;
+  readonly minWidth: number;
+  readonly defaultWidth: number;
+  readonly required: boolean;
+  /** If true the column uses minmax(minWidth, 1fr) instead of a fixed px width. */
+  readonly flex?: boolean;
+}
+
+function loadPrefs(
+  storageKey: string,
+  columns: readonly ColDef[],
+): { widths: Record<string, number>; visible: Set<string> } {
+  const defaultWidths: Record<string, number> = Object.fromEntries(
+    columns.map(c => [c.key, c.defaultWidth]),
+  );
+  const defaultVisible = new Set<string>(columns.map(c => c.key));
+  try {
+    const raw = localStorage.getItem(storageKey);
+    if (!raw) return { widths: defaultWidths, visible: defaultVisible };
+    const parsed = JSON.parse(raw) as { widths?: Record<string, number>; visible?: string[] };
+    const visible = new Set<string>(parsed.visible ?? [...defaultVisible]);
+    columns.filter(c => c.required).forEach(c => visible.add(c.key));
+    return {
+      widths: { ...defaultWidths, ...(parsed.widths ?? {}) },
+      visible,
+    };
+  } catch {
+    return { widths: defaultWidths, visible: defaultVisible };
+  }
+}
+
+function savePrefs(storageKey: string, widths: Record<string, number>, visible: Set<string>) {
+  localStorage.setItem(storageKey, JSON.stringify({ widths, visible: [...visible] }));
+}
+
+export function useTracklistColumns(columns: readonly ColDef[], storageKey: string) {
+  const [colWidths, setColWidths] = useState<Record<string, number>>(
+    () => loadPrefs(storageKey, columns).widths,
+  );
+  const [colVisible, setColVisible] = useState<Set<string>>(
+    () => loadPrefs(storageKey, columns).visible,
+  );
+  const [pickerOpen, setPickerOpen] = useState(false);
+
+  const tracklistRef = useRef<HTMLDivElement>(null);
+  const pickerRef = useRef<HTMLDivElement>(null);
+  // Refs to avoid stale closures in drag/save handlers
+  const colWidthsRef = useRef(colWidths);
+  const colVisibleRef = useRef(colVisible);
+  useEffect(() => { colWidthsRef.current = colWidths; }, [colWidths]);
+  useEffect(() => { colVisibleRef.current = colVisible; }, [colVisible]);
+
+  const visibleCols = useMemo(
+    () => columns.filter(c => colVisible.has(c.key)),
+    [columns, colVisible],
+  );
+
+  const gridTemplate = useMemo(
+    () =>
+      visibleCols
+        .map(c => (c.flex ? `minmax(${c.minWidth}px, 1fr)` : `${colWidths[c.key]}px`))
+        .join(' '),
+    [visibleCols, colWidths],
+  );
+
+  // Minimum total width so the grid never squishes below its current column sizes.
+  // When .tracklist is narrower, overflow-x: auto triggers a scrollbar.
+  // Formula (box-sizing: border-box): colSum + gaps + left/right padding (12px each = 24px)
+  const gridMinWidth = useMemo(() => {
+    const gapPx = 12; // --space-3
+    const boxPaddingH = 24; // var(--space-3) * 2
+    const colSum = visibleCols.reduce<number>(
+      (s, c) => s + (c.flex ? c.minWidth : colWidths[c.key]),
+      0,
+    );
+    const gaps = Math.max(0, visibleCols.length - 1) * gapPx;
+    return colSum + gaps + boxPaddingH;
+  }, [visibleCols, colWidths]);
+
+  const gridStyle = useMemo(
+    () => ({ gridTemplateColumns: gridTemplate, minWidth: `${gridMinWidth}px` }),
+    [gridTemplate, gridMinWidth],
+  );
+
+  // Excel-style column resize:
+  //   direction =  1 → right-edge handle: drag right → column grows, 1fr title shrinks
+  //   direction = -1 → left-edge handle : drag right → next px col shrinks, 1fr title grows
+  const startResize = useCallback(
+    (e: React.MouseEvent, colIndex: number, direction: 1 | -1 = 1) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      const visCols = visibleCols; // stable for the drag duration
+      const colDef = visCols[colIndex];
+      const colKey = colDef.key;
+      const colMin = columns.find(c => c.key === colKey)!.minWidth;
+      const startX = e.clientX;
+      const startW = colWidths[colKey];
+
+      let maxW = Infinity;
+      const el = tracklistRef.current;
+      if (el) {
+        const style = getComputedStyle(el);
+        const paddingH = parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
+        const containerW = el.clientWidth - paddingH;
+        const headerEl = el.querySelector('.tracklist-header') as HTMLElement | null;
+        const gapPx = headerEl
+          ? parseFloat(getComputedStyle(headerEl).columnGap) || 12
+          : 12;
+        const totalGaps = (visCols.length - 1) * gapPx;
+        const otherFixed = visCols
+          .filter((_, i) => i !== colIndex)
+          .reduce<number>((s, c) => s + (c.flex ? c.minWidth : colWidths[c.key]), 0);
+        maxW = Math.max(colMin, containerW - totalGaps - otherFixed);
+      }
+
+      const onMove = (me: MouseEvent) => {
+        const delta = me.clientX - startX;
+        const newW = Math.min(Math.max(colMin, startW + direction * delta), maxW);
+        setColWidths(prev => ({ ...prev, [colKey]: newW }));
+      };
+
+      const onUp = () => {
+        document.removeEventListener('mousemove', onMove);
+        document.removeEventListener('mouseup', onUp);
+        document.body.style.cursor = '';
+        document.body.style.userSelect = '';
+        savePrefs(storageKey, colWidthsRef.current, colVisibleRef.current);
+      };
+
+      document.body.style.cursor = 'col-resize';
+      document.body.style.userSelect = 'none';
+      document.addEventListener('mousemove', onMove);
+      document.addEventListener('mouseup', onUp);
+    },
+    [columns, visibleCols, colWidths, storageKey],
+  );
+
+  const toggleColumn = useCallback(
+    (key: string) => {
+      const def = columns.find(c => c.key === key)!;
+      if (def.required) return;
+      setColVisible(prev => {
+        const next = new Set(prev);
+        if (next.has(key)) next.delete(key);
+        else next.add(key);
+        savePrefs(storageKey, colWidthsRef.current, next);
+        return next;
+      });
+    },
+    [columns, storageKey],
+  );
+
+  useEffect(() => {
+    if (!pickerOpen) return;
+    const handler = (e: MouseEvent) => {
+      if (!pickerRef.current?.contains(e.target as Node)) setPickerOpen(false);
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [pickerOpen]);
+
+  return {
+    colWidths,
+    colVisible,
+    visibleCols,
+    gridStyle,
+    startResize,
+    toggleColumn,
+    pickerOpen,
+    setPickerOpen,
+    pickerRef,
+    tracklistRef,
+  };
+}