fix: include InternetRadio.tsx (referenced in App.tsx router)

feat: v1.31.0 — AutoEQ, resizable tracklist columns, Discord Listening type, layout fixes
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-23 15:55:45 +00:00 · 2026-04-04 02:09:19 +02:00 · 2026-04-04 02:04:14 +02:00 · 2026-04-03 15:00:36 +02:00 · 2026-04-03 14:54:59 +02:00 · 2026-04-03 14:53:41 +02:00
60 changed files with 11998 additions and 4730 deletions
@@ -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"]
@@ -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:
@@ -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
@@ -106,6 +125,38 @@ jobs:
          releaseId: ${{ needs.create-release.outputs.release_id }}
          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 +177,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 +209,32 @@ jobs:
          find src-tauri/target/release/bundle \
            \( -name "*.deb" -o -name "*.rpm" \) \
            | xargs gh release upload "app-v${VERSION}" --clobber
+
+  generate-manifest:
+    needs: [create-release, build-macos-windows]
+    permissions:
+      contents: write
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v5
+      - name: setup node
+        uses: actions/setup-node@v5
+        with:
+          node-version: lts/*
+      - name: cache npm
+        uses: actions/cache@v4
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-npm-${{ hashFiles('package-lock.json') }}
+          restore-keys: ${{ runner.os }}-npm-
+      - name: generate latest.json
+        env:
+          VERSION: ${{ needs.create-release.outputs.package_version }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: node scripts/generate-update-manifest.js
+      - name: upload latest.json
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          VERSION=${{ needs.create-release.outputs.package_version }}
+          gh release upload "app-v${VERSION}" latest.json --clobber
@@ -5,6 +5,173 @@ 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.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
@@ -27,7 +27,9 @@ Designed specifically for users hosting their own music via Navidrome or other S
 - 🌍 **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.
@@ -37,8 +39,8 @@ Designed specifically for users hosting their own music via Navidrome or other S
 - 🔤 **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.
 - 🏷️ **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.
- 🔄 **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).
+- 🔄 **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

@@ -52,7 +54,11 @@ 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 server-native Genre Mix (top genres by song count, shuffleable)
@@ -70,22 +76,26 @@ Designed specifically for users hosting their own music via Navidrome or other S

 ---

-## ● Known Limitations
-
-Some known bugs actively working on fixes
-
-
 ## 📥 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

@@ -1,19 +1,22 @@
 {
  "name": "psysonic",
-  "version": "1.21.0",
+  "version": "1.30.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "psysonic",
-      "version": "1.21.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-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",
@@ -1224,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",
@@ -1493,6 +1523,15 @@
        "@tauri-apps/api": "^2.8.0"
      }
    },
+    "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"
+      }
+    },
    "node_modules/@tauri-apps/plugin-shell": {
      "version": "2.3.5",
      "resolved": "https://registry.npmjs.org/@tauri-apps/plugin-shell/-/plugin-shell-2.3.5.tgz",
@@ -1511,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",
@@ -1,6 +1,6 @@
 {
  "name": "psysonic",
-  "version": "1.25.0",
+  "version": "1.31.0",
  "private": true,
  "scripts": {
    "dev": "vite",
@@ -11,12 +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-process": "^2.3.1",
    "@tauri-apps/plugin-shell": "^2",
    "@tauri-apps/plugin-store": "^2",
+    "@tauri-apps/plugin-updater": "^2.10.0",
    "@tauri-apps/plugin-window-state": "^2.4.1",
    "axios": "^1.7.7",
    "i18next": "^25.8.16",
@@ -1,6 +1,6 @@
 # Maintainer: Psychotoxic <psychotoxic@gmx.de>
 pkgname=psysonic
-pkgver=1.25.0
+pkgver=1.31.0
 pkgrel=1
 pkgdesc="Desktop music player for Subsonic API-compatible servers (Navidrome, Gonic, etc.)"
 arch=('x86_64')
@@ -16,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')
@@ -26,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
 }
@@ -0,0 +1,70 @@
+#!/usr/bin/env node
+// Generates latest.json for the Tauri updater from a GitHub release.
+// Reads .sig files uploaded by tauri-action, assembles the manifest, writes latest.json.
+//
+// Required env vars: VERSION, GITHUB_TOKEN
+// Usage: node scripts/generate-update-manifest.js
+
+const { execSync } = require('child_process');
+const fs = require('fs');
+
+const VERSION = process.env.VERSION;
+const REPO = 'Psychotoxical/psysonic';
+const TAG = `app-v${VERSION}`;
+
+if (!VERSION) {
+  console.error('VERSION env var required');
+  process.exit(1);
+}
+
+// Platform → update bundle filename (produced by tauri-action with updater plugin)
+const PLATFORM_FILES = {
+  'darwin-aarch64': `Psysonic_aarch64.app.tar.gz`,
+  'darwin-x86_64':  `Psysonic_x64.app.tar.gz`,
+  'windows-x86_64': `Psysonic_${VERSION}_x64-setup.nsis.zip`,
+};
+
+const platforms = {};
+
+for (const [platform, filename] of Object.entries(PLATFORM_FILES)) {
+  const sigFile = `${filename}.sig`;
+  try {
+    execSync(
+      `gh release download "${TAG}" --repo "${REPO}" -p "${sigFile}" --clobber`,
+      { stdio: 'pipe' }
+    );
+    const signature = fs.readFileSync(sigFile, 'utf8').trim();
+    const url = `https://github.com/${REPO}/releases/download/${TAG}/${filename}`;
+    platforms[platform] = { signature, url };
+    console.log(`✓ ${platform}`);
+  } catch (e) {
+    console.warn(`⚠ Skipping ${platform}: asset not found (${sigFile})`);
+  }
+}
+
+if (Object.keys(platforms).length === 0) {
+  console.error('No platforms found — aborting manifest generation');
+  process.exit(1);
+}
+
+// Pull release notes from GitHub
+let notes = '';
+try {
+  const raw = execSync(
+    `gh release view "${TAG}" --repo "${REPO}" --json body`,
+    { stdio: 'pipe' }
+  ).toString();
+  notes = JSON.parse(raw).body ?? '';
+} catch {
+  console.warn('Could not fetch release notes');
+}
+
+const manifest = {
+  version: VERSION,
+  notes,
+  pub_date: new Date().toISOString(),
+  platforms,
+};
+
+fs.writeFileSync('latest.json', JSON.stringify(manifest, null, 2));
+console.log(`\nWrote latest.json for v${VERSION} with platforms: ${Object.keys(platforms).join(', ')}`);
@@ -69,6 +69,15 @@ version = "1.0.102"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "7f202df86484c868dbad7eaa557ef785d5c66295e41b460ef922eca0723b842c"

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

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

+[[package]]
+name = "async-process"
+version = "2.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fc50921ec0055cdd8a16de48773bfeec5c972598674347252c0399676be7da75"
+dependencies = [
+ "async-channel",
+ "async-io 2.6.0",
+ "async-lock 3.4.2",
+ "async-signal",
+ "async-task",
+ "blocking",
+ "cfg-if",
+ "event-listener 5.4.1",
+ "futures-lite 2.6.1",
+ "rustix 1.1.4",
+]
+
 [[package]]
 name = "async-recursion"
 version = "1.1.1"
@@ -526,7 +565,7 @@ checksum = "d38f2da7a0a2c4ccf0065be06397cc26a81f4e528be095826eee9d4adbb8c60f"
 dependencies = [
 "byteorder",
 "fnv",
- "uuid",
+ "uuid 1.22.0",
 ]

 [[package]]
@@ -892,6 +931,17 @@ dependencies = [
 "syn 1.0.109",
 ]

+[[package]]
+name = "derive_arbitrary"
+version = "1.4.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1e567bd82dcff979e4b03460c307b3cdc9e96fde3d73bed1496d2bc75d9dd62a"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.117",
+]
+
 [[package]]
 name = "derive_more"
 version = "0.99.20"
@@ -936,6 +986,19 @@ dependencies = [
 "windows-sys 0.61.2",
 ]

+[[package]]
+name = "discord-rich-presence"
+version = "0.2.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a75db747ecd252c01bfecaf709b07fcb4c634adf0edb5fed47bc9c3052e7076b"
+dependencies = [
+ "serde",
+ "serde_derive",
+ "serde_json",
+ "serde_repr",
+ "uuid 0.8.2",
+]
+
 [[package]]
 name = "dispatch"
 version = "0.2.0"
@@ -1059,6 +1122,12 @@ dependencies = [
 "cfg-if",
 ]

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

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

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

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

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

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

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

 [[package]]
 name = "psysonic"
-version = "1.25.0"
+version = "1.31.0"
 dependencies = [
 "biquad",
+ "discord-rich-presence",
+ "futures-util",
 "md5",
 "reqwest 0.12.28",
 "rodio",
@@ -3376,8 +3500,11 @@ dependencies = [
 "tauri-plugin-dialog",
 "tauri-plugin-fs",
 "tauri-plugin-global-shortcut",
+ "tauri-plugin-process",
 "tauri-plugin-shell",
+ "tauri-plugin-single-instance",
 "tauri-plugin-store",
+ "tauri-plugin-updater",
 "tauri-plugin-window-state",
 "tokio",
 ]
@@ -3514,6 +3641,15 @@ dependencies = [
 "bitflags 2.11.0",
 ]

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

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

+[[package]]
+name = "rustls-platform-verifier"
+version = "0.6.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1d99feebc72bae7ab76ba994bb5e121b8d83d910ca40b36e0921f53becc41784"
+dependencies = [
+ "core-foundation 0.10.1",
+ "core-foundation-sys",
+ "jni",
+ "log",
+ "once_cell",
+ "rustls",
+ "rustls-native-certs",
+ "rustls-platform-verifier-android",
+ "rustls-webpki",
+ "security-framework",
+ "security-framework-sys",
+ "webpki-root-certs",
+ "windows-sys 0.61.2",
+]
+
+[[package]]
+name = "rustls-platform-verifier-android"
+version = "0.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f87165f0995f63a9fbeea62b64d10b4d9d8e78ec6d7d51fb2125fda7bb36788f"
+
 [[package]]
 name = "rustls-webpki"
 version = "0.103.9"
@@ -3830,7 +4011,7 @@ dependencies = [
 "serde",
 "serde_json",
 "url",
- "uuid",
+ "uuid 1.22.0",
 ]

 [[package]]
@@ -4231,7 +4412,7 @@ dependencies = [
 "objc2-foundation",
 "objc2-quartz-core",
 "raw-window-handle",
- "redox_syscall",
+ "redox_syscall 0.5.18",
 "tracing",
 "wasm-bindgen",
 "web-sys",
@@ -4279,8 +4460,8 @@ dependencies = [
 "pollster",
 "thiserror 1.0.69",
 "windows 0.44.0",
- "zbus",
- "zvariant",
+ "zbus 3.15.2",
+ "zvariant 3.15.2",
 ]

 [[package]]
@@ -4358,6 +4539,7 @@ dependencies = [
 "symphonia-codec-vorbis",
 "symphonia-core",
 "symphonia-format-isomp4",
+ "symphonia-format-ogg",
 "symphonia-format-riff",
 "symphonia-metadata",
 ]
@@ -4454,6 +4636,18 @@ dependencies = [
 "symphonia-utils-xiph",
 ]

+[[package]]
+name = "symphonia-format-ogg"
+version = "0.5.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2b4955c67c1ed3aa8ae8428d04ca8397fbef6a19b2b051e73b5da8b1435639cb"
+dependencies = [
+ "log",
+ "symphonia-core",
+ "symphonia-metadata",
+ "symphonia-utils-xiph",
+]
+
 [[package]]
 name = "symphonia-format-riff"
 version = "0.5.5"
@@ -4613,6 +4807,17 @@ dependencies = [
 "syn 2.0.117",
 ]

+[[package]]
+name = "tar"
+version = "0.4.45"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "22692a6476a21fa75fdfc11d452fda482af402c008cdbaf3476414e122040973"
+dependencies = [
+ "filetime",
+ "libc",
+ "xattr",
+]
+
 [[package]]
 name = "target-lexicon"
 version = "0.12.16"
@@ -4716,7 +4921,7 @@ dependencies = [
 "thiserror 2.0.18",
 "time",
 "url",
- "uuid",
+ "uuid 1.22.0",
 "walkdir",
 ]

@@ -4806,6 +5011,16 @@ dependencies = [
 "thiserror 2.0.18",
 ]

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

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

+[[package]]
+name = "tauri-plugin-updater"
+version = "2.10.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3fe8e9bebd88fc222938ffdfbdcfa0307081423bd01e3252fc337d8bde81fc61"
+dependencies = [
+ "base64 0.22.1",
+ "dirs",
+ "flate2",
+ "futures-util",
+ "http",
+ "infer",
+ "log",
+ "minisign-verify",
+ "osakit",
+ "percent-encoding",
+ "reqwest 0.13.2",
+ "rustls",
+ "semver",
+ "serde",
+ "serde_json",
+ "tar",
+ "tauri",
+ "tauri-plugin",
+ "tempfile",
+ "thiserror 2.0.18",
+ "time",
+ "tokio",
+ "url",
+ "windows-sys 0.60.2",
+ "zip",
+]
+
 [[package]]
 name = "tauri-plugin-window-state"
 version = "2.4.1"
@@ -4943,7 +5206,7 @@ dependencies = [
 "toml 0.9.12+spec-1.1.0",
 "url",
 "urlpattern",
- "uuid",
+ "uuid 1.22.0",
 "walkdir",
 ]

@@ -5456,6 +5719,15 @@ version = "1.0.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "b6c140620e7ffbb22c2dee59cafe6084a59b5ffc27a8859a5f0d494b5d52b6be"

+[[package]]
+name = "uuid"
+version = "0.8.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bc5cf98d8186244414c848017f0e2676b3fcb46807f6668a97dfe67359a3c4b7"
+dependencies = [
+ "getrandom 0.2.17",
+]
+
 [[package]]
 name = "uuid"
 version = "1.22.0"
@@ -5734,6 +6006,15 @@ dependencies = [
 "system-deps",
 ]

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

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

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

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

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

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

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

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

 [dependencies]
 tauri = { version = "2", features = ["tray-icon", "image-png"] }
+tauri-plugin-single-instance = "2"
 tauri-plugin-shell = "2"
 tauri-plugin-global-shortcut = "2"
 tauri-plugin-store = "2"
@@ -30,10 +31,14 @@ tauri-plugin-fs = "2"
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"
 rodio = { version = "0.19", default-features = false, features = ["symphonia-all"] }
-symphonia = { version = "0.5", default-features = false, features = ["flac", "mp3", "pcm", "aac", "isomp4", "vorbis", "wav", "adpcm"] }
+symphonia = { version = "0.5", default-features = false, features = ["flac", "mp3", "pcm", "aac", "isomp4", "vorbis", "ogg", "wav", "adpcm"] }
 reqwest = { version = "0.12", features = ["stream", "json"] }
+futures-util = "0.3"
 md5 = "0.7"
 tokio = { version = "1", features = ["rt", "time"] }
 biquad = "0.4"
 tauri-plugin-window-state = "2.4.1"
+tauri-plugin-updater = "2"
+tauri-plugin-process = "2"
 souvlaki = { version = "0.8", default-features = false, features = ["use_zbus"] }
+discord-rich-presence = "0.2"
@@ -30,6 +30,8 @@
    "core:window:allow-set-fullscreen",
    "core:window:allow-is-fullscreen",
    "core:window:allow-create",
-    "core:webview:allow-create-webview-window"
+    "core:webview:allow-create-webview-window",
+    "updater:default",
+    "process:allow-restart"
  ]
 }
@@ -1 +1 @@
-{"default":{"identifier":"default","description":"Default capabilities for Psysonic","local":true,"windows":["main"],"permissions":["core:default","shell:default",{"identifier":"shell:allow-open","allow":[{"url":"https://**"}]},"global-shortcut:allow-register","global-shortcut:allow-unregister","store:default","store:allow-load","store:allow-set","store:allow-get","store:allow-save","dialog:default","dialog:allow-open","fs:default","fs:allow-write-file","fs:allow-mkdir","fs:scope-download-recursive","window-state:allow-save-window-state","window-state:allow-restore-state","core:window:allow-set-title","core:window:allow-close","core:window:allow-hide","core:window:allow-show","core:window:allow-set-fullscreen","core:window:allow-is-fullscreen","core:window:allow-create","core:webview:allow-create-webview-window"],"platforms":["linux","macOS","windows"]}}
+{"default":{"identifier":"default","description":"Default capabilities for Psysonic","local":true,"windows":["main"],"permissions":["core:default","shell:default",{"identifier":"shell:allow-open","allow":[{"url":"https://**"}]},"global-shortcut:allow-register","global-shortcut:allow-unregister","store:default","store:allow-load","store:allow-set","store:allow-get","store:allow-save","dialog:default","dialog:allow-open","fs:default","fs:allow-write-file","fs:allow-mkdir","fs:scope-download-recursive","window-state:allow-save-window-state","window-state:allow-restore-state","core:window:allow-set-title","core:window:allow-close","core:window:allow-hide","core:window:allow-show","core:window:allow-set-fullscreen","core:window:allow-is-fullscreen","core:window:allow-create","core:webview:allow-create-webview-window","updater:default","process:allow-restart"],"platforms":["linux","macOS","windows"]}}
@@ -6014,6 +6014,36 @@
          "const": "global-shortcut:deny-unregister-all",
          "markdownDescription": "Denies the unregister_all command without any pre-configured scope."
        },
+        {
+          "description": "This permission set configures which\nprocess features are by default exposed.\n\n#### Granted Permissions\n\nThis enables to quit via `allow-exit` and restart via `allow-restart`\nthe application.\n\n#### This default permission set includes:\n\n- `allow-exit`\n- `allow-restart`",
+          "type": "string",
+          "const": "process:default",
+          "markdownDescription": "This permission set configures which\nprocess features are by default exposed.\n\n#### Granted Permissions\n\nThis enables to quit via `allow-exit` and restart via `allow-restart`\nthe application.\n\n#### This default permission set includes:\n\n- `allow-exit`\n- `allow-restart`"
+        },
+        {
+          "description": "Enables the exit command without any pre-configured scope.",
+          "type": "string",
+          "const": "process:allow-exit",
+          "markdownDescription": "Enables the exit command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the restart command without any pre-configured scope.",
+          "type": "string",
+          "const": "process:allow-restart",
+          "markdownDescription": "Enables the restart command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the exit command without any pre-configured scope.",
+          "type": "string",
+          "const": "process:deny-exit",
+          "markdownDescription": "Denies the exit command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the restart command without any pre-configured scope.",
+          "type": "string",
+          "const": "process:deny-restart",
+          "markdownDescription": "Denies the restart command without any pre-configured scope."
+        },
        {
          "description": "This permission set configures which\nshell functionality is exposed by default.\n\n#### Granted Permissions\n\nIt allows to use the `open` functionality with a reasonable\nscope pre-configured. It will allow opening `http(s)://`,\n`tel:` and `mailto:` links.\n\n#### This default permission set includes:\n\n- `allow-open`",
          "type": "string",
@@ -6254,6 +6284,60 @@
          "const": "store:deny-values",
          "markdownDescription": "Denies the values command without any pre-configured scope."
        },
+        {
+          "description": "This permission set configures which kind of\nupdater functions are exposed to the frontend.\n\n#### Granted Permissions\n\nThe full workflow from checking for updates to installing them\nis enabled.\n\n\n#### This default permission set includes:\n\n- `allow-check`\n- `allow-download`\n- `allow-install`\n- `allow-download-and-install`",
+          "type": "string",
+          "const": "updater:default",
+          "markdownDescription": "This permission set configures which kind of\nupdater functions are exposed to the frontend.\n\n#### Granted Permissions\n\nThe full workflow from checking for updates to installing them\nis enabled.\n\n\n#### This default permission set includes:\n\n- `allow-check`\n- `allow-download`\n- `allow-install`\n- `allow-download-and-install`"
+        },
+        {
+          "description": "Enables the check command without any pre-configured scope.",
+          "type": "string",
+          "const": "updater:allow-check",
+          "markdownDescription": "Enables the check command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the download command without any pre-configured scope.",
+          "type": "string",
+          "const": "updater:allow-download",
+          "markdownDescription": "Enables the download command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the download_and_install command without any pre-configured scope.",
+          "type": "string",
+          "const": "updater:allow-download-and-install",
+          "markdownDescription": "Enables the download_and_install command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the install command without any pre-configured scope.",
+          "type": "string",
+          "const": "updater:allow-install",
+          "markdownDescription": "Enables the install command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the check command without any pre-configured scope.",
+          "type": "string",
+          "const": "updater:deny-check",
+          "markdownDescription": "Denies the check command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the download command without any pre-configured scope.",
+          "type": "string",
+          "const": "updater:deny-download",
+          "markdownDescription": "Denies the download command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the download_and_install command without any pre-configured scope.",
+          "type": "string",
+          "const": "updater:deny-download-and-install",
+          "markdownDescription": "Denies the download_and_install command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the install command without any pre-configured scope.",
+          "type": "string",
+          "const": "updater:deny-install",
+          "markdownDescription": "Denies the install command without any pre-configured scope."
+        },
        {
          "description": "This permission set configures what kind of\noperations are available from the window state plugin.\n\n#### Granted Permissions\n\nAll operations are enabled by default.\n\n\n#### This default permission set includes:\n\n- `allow-filename`\n- `allow-restore-state`\n- `allow-save-window-state`",
          "type": "string",
@@ -6014,6 +6014,36 @@
          "const": "global-shortcut:deny-unregister-all",
          "markdownDescription": "Denies the unregister_all command without any pre-configured scope."
        },
+        {
+          "description": "This permission set configures which\nprocess features are by default exposed.\n\n#### Granted Permissions\n\nThis enables to quit via `allow-exit` and restart via `allow-restart`\nthe application.\n\n#### This default permission set includes:\n\n- `allow-exit`\n- `allow-restart`",
+          "type": "string",
+          "const": "process:default",
+          "markdownDescription": "This permission set configures which\nprocess features are by default exposed.\n\n#### Granted Permissions\n\nThis enables to quit via `allow-exit` and restart via `allow-restart`\nthe application.\n\n#### This default permission set includes:\n\n- `allow-exit`\n- `allow-restart`"
+        },
+        {
+          "description": "Enables the exit command without any pre-configured scope.",
+          "type": "string",
+          "const": "process:allow-exit",
+          "markdownDescription": "Enables the exit command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the restart command without any pre-configured scope.",
+          "type": "string",
+          "const": "process:allow-restart",
+          "markdownDescription": "Enables the restart command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the exit command without any pre-configured scope.",
+          "type": "string",
+          "const": "process:deny-exit",
+          "markdownDescription": "Denies the exit command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the restart command without any pre-configured scope.",
+          "type": "string",
+          "const": "process:deny-restart",
+          "markdownDescription": "Denies the restart command without any pre-configured scope."
+        },
        {
          "description": "This permission set configures which\nshell functionality is exposed by default.\n\n#### Granted Permissions\n\nIt allows to use the `open` functionality with a reasonable\nscope pre-configured. It will allow opening `http(s)://`,\n`tel:` and `mailto:` links.\n\n#### This default permission set includes:\n\n- `allow-open`",
          "type": "string",
@@ -6254,6 +6284,60 @@
          "const": "store:deny-values",
          "markdownDescription": "Denies the values command without any pre-configured scope."
        },
+        {
+          "description": "This permission set configures which kind of\nupdater functions are exposed to the frontend.\n\n#### Granted Permissions\n\nThe full workflow from checking for updates to installing them\nis enabled.\n\n\n#### This default permission set includes:\n\n- `allow-check`\n- `allow-download`\n- `allow-install`\n- `allow-download-and-install`",
+          "type": "string",
+          "const": "updater:default",
+          "markdownDescription": "This permission set configures which kind of\nupdater functions are exposed to the frontend.\n\n#### Granted Permissions\n\nThe full workflow from checking for updates to installing them\nis enabled.\n\n\n#### This default permission set includes:\n\n- `allow-check`\n- `allow-download`\n- `allow-install`\n- `allow-download-and-install`"
+        },
+        {
+          "description": "Enables the check command without any pre-configured scope.",
+          "type": "string",
+          "const": "updater:allow-check",
+          "markdownDescription": "Enables the check command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the download command without any pre-configured scope.",
+          "type": "string",
+          "const": "updater:allow-download",
+          "markdownDescription": "Enables the download command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the download_and_install command without any pre-configured scope.",
+          "type": "string",
+          "const": "updater:allow-download-and-install",
+          "markdownDescription": "Enables the download_and_install command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the install command without any pre-configured scope.",
+          "type": "string",
+          "const": "updater:allow-install",
+          "markdownDescription": "Enables the install command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the check command without any pre-configured scope.",
+          "type": "string",
+          "const": "updater:deny-check",
+          "markdownDescription": "Denies the check command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the download command without any pre-configured scope.",
+          "type": "string",
+          "const": "updater:deny-download",
+          "markdownDescription": "Denies the download command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the download_and_install command without any pre-configured scope.",
+          "type": "string",
+          "const": "updater:deny-download-and-install",
+          "markdownDescription": "Denies the download_and_install command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the install command without any pre-configured scope.",
+          "type": "string",
+          "const": "updater:deny-install",
+          "markdownDescription": "Denies the install command without any pre-configured scope."
+        },
        {
          "description": "This permission set configures what kind of\noperations are available from the window state plugin.\n\n#### Granted Permissions\n\nAll operations are enabled by default.\n\n\n#### This default permission set includes:\n\n- `allow-filename`\n- `allow-restore-state`\n- `allow-save-window-state`",
          "type": "string",
@@ -1,5 +1,6 @@
-use std::io::{Cursor, Read, Seek};
-use std::sync::{Arc, Mutex};
+use std::collections::VecDeque;
+use std::io::{Cursor, Read, Seek, SeekFrom};
+use std::sync::{Arc, Condvar, Mutex};
 use std::sync::atomic::{AtomicBool, AtomicU32, AtomicU64, Ordering};
 use std::time::{Duration, Instant};

@@ -16,6 +17,7 @@ use symphonia::core::{
    probe::Hint,
    units::{self, Time},
 };
+use futures_util::StreamExt;
 use tauri::{AppHandle, Emitter, State};

 // ─── 10-Band Graphic Equalizer ────────────────────────────────────────────────
@@ -30,6 +32,7 @@ struct EqSource<S: Source<Item = f32>> {
    channels: u16,
    gains: Arc<[AtomicU32; 10]>,
    enabled: Arc<AtomicBool>,
+    pre_gain: Arc<AtomicU32>,
    filters: [[DirectForm2Transposed<f32>; 2]; 10],
    current_gains: [f32; 10],
    sample_counter: usize,
@@ -37,7 +40,7 @@ struct EqSource<S: Source<Item = f32>> {
 }

 impl<S: Source<Item = f32>> EqSource<S> {
-    fn new(inner: S, gains: Arc<[AtomicU32; 10]>, enabled: Arc<AtomicBool>) -> Self {
+    fn new(inner: S, gains: Arc<[AtomicU32; 10]>, enabled: Arc<AtomicBool>, pre_gain: Arc<AtomicU32>) -> Self {
        let sample_rate = inner.sample_rate();
        let channels = inner.channels();
        let filters = std::array::from_fn(|band| {
@@ -58,7 +61,7 @@ impl<S: Source<Item = f32>> EqSource<S> {
            })
        });
        Self {
-            inner, sample_rate, channels, gains, enabled,
+            inner, sample_rate, channels, gains, enabled, pre_gain,
            filters,
            current_gains: [0.0; 10],
            sample_counter: 0,
@@ -106,7 +109,9 @@ impl<S: Source<Item = f32>> Iterator for EqSource<S> {
        let ch = self.channel_idx.min(1);
        self.channel_idx = (self.channel_idx + 1) % self.channels as usize;

-        let mut s = sample;
+        let pre_gain_db = f32::from_bits(self.pre_gain.load(Ordering::Relaxed));
+        let pre_gain_factor = 10_f32.powf(pre_gain_db / 20.0);
+        let mut s = sample * pre_gain_factor;
        for band in 0..10 {
            s = self.filters[band][ch].run(s);
        }
@@ -229,9 +234,15 @@ impl<S: Source<Item = f32>> Source for EqualPowerFadeIn<S> {
    fn sample_rate(&self) -> u32 { self.inner.sample_rate() }
    fn total_duration(&self) -> Option<Duration> { self.inner.total_duration() }
    fn try_seek(&mut self, pos: Duration) -> Result<(), rodio::source::SeekError> {
-        // Restart the fade envelope after seeking (avoids a mid-song click if
-        // the user seeks to the very beginning while a fade was in progress).
-        self.sample_count = 0;
+        // For mid-track seeks: skip straight to unity gain so the new position
+        // plays at full volume immediately — no audible fade-in glitch.
+        // For seeks to the very start (< 100 ms): keep the micro-fade to
+        // suppress any DC-offset click from the fresh decode.
+        if pos.as_millis() < 100 {
+            self.sample_count = 0;
+        } else {
+            self.sample_count = self.fade_samples;
+        }
        self.inner.try_seek(pos)
    }
 }
@@ -405,6 +416,120 @@ impl<S: Source<Item = f32>> Source for CountingSource<S> {

 // ─── SizedCursorSource — MediaSource with correct byte_len ────────────────────
 //
+// ─── RadioBuffer — streaming MediaSource for live HTTP radio ─────────────────
+//
+// Bridges an async reqwest byte-stream (download task) into a synchronous
+// Read+Seek interface that symphonia / rodio can consume.
+//
+// Back-pressure: the download task pauses when the ring buffer exceeds 4 MB
+// (~4 min at 128 kbps).  Read() blocks (via Condvar) until data arrives so
+// rodio's audio thread can decode in real time.  is_seekable() = false so
+// symphonia never tries to seek backward into consumed data.
+
+const RADIO_BUF_MAX: usize = 256 * 1024;
+
+pub(crate) struct RadioInner {
+    data: VecDeque<u8>,
+    eof: bool,
+    pos: u64,
+}
+
+// The read-side: given to symphonia / rodio.
+struct RadioBuffer {
+    inner: Arc<(Mutex<RadioInner>, Condvar)>,
+}
+
+// The write-side: held by the async download task.
+pub struct RadioFeed {
+    pub inner: Arc<(Mutex<RadioInner>, Condvar)>,
+}
+
+impl RadioBuffer {
+    fn new() -> (RadioBuffer, RadioFeed) {
+        let arc = Arc::new((
+            Mutex::new(RadioInner { data: VecDeque::new(), eof: false, pos: 0 }),
+            Condvar::new(),
+        ));
+        (RadioBuffer { inner: arc.clone() }, RadioFeed { inner: arc })
+    }
+}
+
+impl RadioFeed {
+    pub fn push(&self, chunk: &[u8]) {
+        let (lock, cvar) = &*self.inner;
+        let mut g = lock.lock().unwrap();
+        g.data.extend(chunk.iter().copied());
+        cvar.notify_one();
+    }
+
+    pub fn is_full(&self) -> bool {
+        let (lock, _) = &*self.inner;
+        lock.lock().unwrap().data.len() >= RADIO_BUF_MAX
+    }
+
+    pub fn flush(&self) {
+        let (lock, _) = &*self.inner;
+        lock.lock().unwrap().data.clear();
+    }
+
+    pub fn close(&self) {
+        let (lock, cvar) = &*self.inner;
+        let mut g = lock.lock().unwrap();
+        g.eof = true;
+        cvar.notify_all();
+    }
+}
+
+impl Read for RadioBuffer {
+    fn read(&mut self, buf: &mut [u8]) -> std::io::Result<usize> {
+        let (lock, cvar) = &*self.inner;
+        let mut g = lock.lock().unwrap();
+        let deadline = std::time::Instant::now() + Duration::from_secs(10);
+        while g.data.is_empty() && !g.eof {
+            let rem = deadline.saturating_duration_since(std::time::Instant::now());
+            if rem.is_zero() {
+                eprintln!("[radio] RadioBuffer::read() timed out — no data for 10 s");
+                return Err(std::io::Error::new(std::io::ErrorKind::TimedOut, "radio: no data after 10 s"));
+            }
+            let (new_g, _) = cvar.wait_timeout(g, rem).unwrap();
+            g = new_g;
+        }
+        if g.data.is_empty() {
+            eprintln!("[radio] RadioBuffer::read() → EOF (eof flag set, buffer empty)");
+            return Ok(0); // EOF
+        }
+        let n = buf.len().min(g.data.len());
+        for (i, b) in g.data.drain(..n).enumerate() {
+            buf[i] = b;
+        }
+        g.pos += n as u64;
+        // Notify downloader that buffer has drained below the cap.
+        cvar.notify_one();
+        Ok(n)
+    }
+}
+
+impl Seek for RadioBuffer {
+    fn seek(&mut self, pos: SeekFrom) -> std::io::Result<u64> {
+        // Live streams cannot seek.  Symphonia will not try because
+        // is_seekable() = false; the only call it makes is SeekFrom::Current(0)
+        // (tell) which we handle.
+        let (lock, _) = &*self.inner;
+        let g = lock.lock().unwrap();
+        match pos {
+            SeekFrom::Current(0) => Ok(g.pos),
+            _ => Err(std::io::Error::new(std::io::ErrorKind::Unsupported, "radio stream: not seekable")),
+        }
+    }
+}
+
+impl MediaSource for RadioBuffer {
+    fn is_seekable(&self) -> bool { false }
+    fn byte_len(&self) -> Option<u64> { None }
+}
+
+// ─── SizedCursorSource — correct byte_len for seekable in-memory sources ──────
+//
 // rodio's internal ReadSeekSource wraps Cursor<Vec<u8>> but hardcodes
 // byte_len() → None.  This tells symphonia "stream length unknown", which
 // prevents the FLAC demuxer from seeking (it validates seek offsets against
@@ -478,13 +603,20 @@ impl SizedDecoder {

        let probed = symphonia::default::get_probe()
            .format(&hint, mss, &format_opts, &MetadataOptions::default())
-            .map_err(|e| format!("probe failed: {e}"))?;
+            .map_err(|e| {
+                let hint_str = format_hint.unwrap_or("unknown");
+                if e.to_string().to_lowercase().contains("unsupported") {
+                    format!("unsupported format: .{hint_str} files cannot be played (no demuxer)")
+                } else {
+                    format!("could not open audio stream (.{hint_str}): {e}")
+                }
+            })?;

        let track = probed.format
            .tracks()
            .iter()
            .find(|t| t.codec_params.codec != CODEC_TYPE_NULL)
-            .ok_or_else(|| "no supported audio track".to_string())?;
+            .ok_or_else(|| "no playable audio track found in file".to_string())?;

        let track_id = track.id;
        let total_duration = track.codec_params.time_base
@@ -493,7 +625,13 @@ impl SizedDecoder {

        let mut decoder = symphonia::default::get_codecs()
            .make(&track.codec_params, &DecoderOptions::default())
-            .map_err(|e| format!("codec init failed: {e}"))?;
+            .map_err(|e| {
+                if e.to_string().to_lowercase().contains("unsupported") {
+                    "unsupported codec: no decoder available for this audio format".to_string()
+                } else {
+                    format!("failed to initialise audio decoder: {e}")
+                }
+            })?;

        let mut format = probed.format;

@@ -505,7 +643,7 @@ impl SizedDecoder {
                Err(symphonia::core::errors::Error::IoError(_)) => {
                    break decoder.last_decoded();
                }
-                Err(e) => return Err(format!("first packet: {e}")),
+                Err(e) => return Err(format!("could not read audio data: {e}")),
            };
            if packet.track_id() != track_id { continue; }
            match decoder.decode(&packet) {
@@ -513,10 +651,10 @@ impl SizedDecoder {
                Err(symphonia::core::errors::Error::DecodeError(_)) => {
                    decode_errors += 1;
                    if decode_errors > DECODE_MAX_RETRIES {
-                        return Err("too many decode errors".into());
+                        return Err("too many decode errors — file may be corrupt".into());
                    }
                }
-                Err(e) => return Err(format!("decode: {e}")),
+                Err(e) => return Err(format!("audio decode error: {e}")),
            }
        };

@@ -533,6 +671,50 @@ impl SizedDecoder {
        })
    }

+    /// Build a decoder from any `MediaSource` (e.g. `RadioBuffer`).
+    /// Uses `enable_gapless: false` — live streams are not seekable; gapless
+    /// trimming requires seeking to read the LAME/iTunSMPB end-padding info.
+    fn new_streaming(media: Box<dyn MediaSource>, format_hint: Option<&str>) -> Result<Self, String> {
+        let mss = MediaSourceStream::new(media, Default::default());
+        let mut hint = Hint::new();
+        if let Some(ext) = format_hint { hint.with_extension(ext); }
+        let format_opts = FormatOptions { enable_gapless: false, ..Default::default() };
+        let probed = symphonia::default::get_probe()
+            .format(&hint, mss, &format_opts, &MetadataOptions::default())
+            .map_err(|e| format!("radio: format probe failed: {e}"))?;
+
+        let track = probed.format.tracks().iter()
+            .find(|t| t.codec_params.codec != CODEC_TYPE_NULL)
+            .ok_or_else(|| "radio: no audio track found".to_string())?;
+        let track_id = track.id;
+        // Live streams have no known total frame count → total_duration = None.
+        let total_duration = None;
+        let mut decoder = symphonia::default::get_codecs()
+            .make(&track.codec_params, &DecoderOptions::default())
+            .map_err(|e| format!("radio: codec init failed: {e}"))?;
+        let mut format = probed.format;
+
+        let mut errors = 0usize;
+        let decoded = loop {
+            let packet = match format.next_packet() {
+                Ok(p) => p,
+                Err(_) => break decoder.last_decoded(),
+            };
+            if packet.track_id() != track_id { continue; }
+            match decoder.decode(&packet) {
+                Ok(d) => break d,
+                Err(symphonia::core::errors::Error::DecodeError(_)) => {
+                    errors += 1;
+                    if errors > DECODE_MAX_RETRIES { return Err("radio: too many decode errors".into()); }
+                }
+                Err(e) => return Err(format!("radio: decode error: {e}")),
+            }
+        };
+        let spec = decoded.spec().to_owned();
+        let buffer = Self::make_buffer(decoded, &spec);
+        Ok(SizedDecoder { decoder, current_frame_offset: 0, format, total_duration, buffer, spec })
+    }
+
    #[inline]
    fn make_buffer(decoded: AudioBufferRef, spec: &SignalSpec) -> SampleBuffer<i16> {
        let duration = units::Duration::from(decoded.capacity() as u64);
@@ -746,6 +928,7 @@ fn build_source(
    duration_hint: f64,
    eq_gains: Arc<[AtomicU32; 10]>,
    eq_enabled: Arc<AtomicBool>,
+    eq_pre_gain: Arc<AtomicU32>,
    done_flag: Arc<AtomicBool>,
    fade_in_dur: Duration,
    sample_counter: Arc<AtomicU64>,
@@ -805,7 +988,7 @@ fn build_source(
    let fadeout_trigger = Arc::new(AtomicBool::new(false));
    let fadeout_samples = Arc::new(AtomicU64::new(0));

-    let eq_src = EqSource::new(dyn_src, eq_gains, eq_enabled);
+    let eq_src = EqSource::new(dyn_src, eq_gains, eq_enabled, eq_pre_gain);
    let fade_in = EqualPowerFadeIn::new(eq_src, fade_in_dur);
    let fade_out = TriggeredFadeOut::new(fade_in, fadeout_trigger.clone(), fadeout_samples.clone());
    let notifying = NotifyingSource::new(fade_out, done_flag);
@@ -851,6 +1034,7 @@ pub struct AudioEngine {
    pub http_client: reqwest::Client,
    pub eq_gains: Arc<[AtomicU32; 10]>,
    pub eq_enabled: Arc<AtomicBool>,
+    pub eq_pre_gain: Arc<AtomicU32>,
    pub preloaded: Arc<Mutex<Option<PreloadedTrack>>>,
    pub crossfade_enabled: Arc<AtomicBool>,
    pub crossfade_secs: Arc<AtomicU32>,
@@ -960,6 +1144,7 @@ pub fn create_engine() -> (AudioEngine, std::thread::JoinHandle<()>) {
            .unwrap_or_default(),
        eq_gains: Arc::new(std::array::from_fn(|_| AtomicU32::new(0f32.to_bits()))),
        eq_enabled: Arc::new(AtomicBool::new(false)),
+        eq_pre_gain: Arc::new(AtomicU32::new(0f32.to_bits())),
        preloaded: Arc::new(Mutex::new(None)),
        crossfade_enabled: Arc::new(AtomicBool::new(false)),
        crossfade_secs: Arc::new(AtomicU32::new(3.0f32.to_bits())),
@@ -1022,7 +1207,17 @@ async fn fetch_data(
        app.emit("audio:error", &msg).ok();
        return Err(msg);
    }
-    let data: Vec<u8> = response.bytes().await.map_err(|e| e.to_string())?.into();
+    // Stream the body, checking gen between chunks so a rapid manual skip can
+    // abort a superseded download mid-flight and free bandwidth for the new one.
+    let hint = response.content_length().unwrap_or(0) as usize;
+    let mut stream = response.bytes_stream();
+    let mut data = Vec::with_capacity(hint);
+    while let Some(chunk) = stream.next().await {
+        if state.generation.load(Ordering::SeqCst) != gen {
+            return Ok(None); // superseded — abort
+        }
+        data.extend_from_slice(&chunk.map_err(|e| e.to_string())?);
+    }
    Ok(Some(data))
 }

@@ -1055,6 +1250,7 @@ pub async fn audio_play(
    duration_hint: f64,
    replay_gain_db: Option<f32>,
    replay_gain_peak: Option<f32>,
+    manual: bool, // true = user-initiated skip → bypass crossfade, start immediately
    app: AppHandle,
    state: State<'_, AudioEngine>,
 ) -> Result<(), String> {
@@ -1118,7 +1314,8 @@ pub async fn audio_play(

    let (gain_linear, effective_volume) = compute_gain(replay_gain_db, replay_gain_peak, volume);

-    let crossfade_enabled = state.crossfade_enabled.load(Ordering::Relaxed);
+    // Manual skips (user-initiated) bypass crossfade — the track should start immediately.
+    let crossfade_enabled = state.crossfade_enabled.load(Ordering::Relaxed) && !manual;
    let crossfade_secs_val = f32::from_bits(state.crossfade_secs.load(Ordering::Relaxed)).clamp(0.5, 12.0);

    // Measure how much audio Track A actually has left right now.
@@ -1160,6 +1357,7 @@ pub async fn audio_play(
        duration_hint,
        state.eq_gains.clone(),
        state.eq_enabled.clone(),
+        state.eq_pre_gain.clone(),
        done_flag.clone(),
        fade_in_dur,
        state.samples_played.clone(),
@@ -1329,7 +1527,16 @@ pub async fn audio_chain_preload(
                if !resp.status().is_success() {
                    return Ok(()); // silently fail — audio_play will retry
                }
-                resp.bytes().await.map_err(|e| e.to_string())?.into()
+                let hint = resp.content_length().unwrap_or(0) as usize;
+                let mut stream = resp.bytes_stream();
+                let mut buf = Vec::with_capacity(hint);
+                while let Some(chunk) = stream.next().await {
+                    if state.generation.load(Ordering::SeqCst) != snapshot_gen {
+                        return Ok(()); // superseded by manual skip — abort download
+                    }
+                    buf.extend_from_slice(&chunk.map_err(|e| e.to_string())?);
+                }
+                buf
            }
        }
    };
@@ -1355,6 +1562,7 @@ pub async fn audio_chain_preload(
        duration_hint,
        state.eq_gains.clone(),
        state.eq_enabled.clone(),
+        state.eq_pre_gain.clone(),
        done_next.clone(),
        Duration::ZERO, // gapless: no fade-in — sample-accurate boundary, no click
        chain_counter.clone(),
@@ -1440,6 +1648,15 @@ fn spawn_progress_task(
            // ready, transition seamlessly: swap tracking state, emit
            // audio:track_switched for the new track, and continue the loop.
            if current_done.load(Ordering::SeqCst) {
+                // Radio (dur == 0): stream exhausted / connection dropped → stop.
+                let cur_dur = current_arc.lock().unwrap().duration_secs;
+                if cur_dur <= 0.0 {
+                    eprintln!("[radio] current_done fired → emitting audio:ended (dur=0)");
+                    gen_counter.fetch_add(1, Ordering::SeqCst);
+                    app.emit("audio:ended", ()).ok();
+                    break;
+                }
+
                let chained = chained_arc.lock().unwrap().take();
                if let Some(info) = chained {
                    // Swap to the chained source's done flag.
@@ -1642,9 +1859,56 @@ pub fn audio_update_replay_gain(
    }
 }

+/// Proxy: fetches https://autoeq.app/entries via Rust to bypass WebView CORS restrictions.
 #[tauri::command]
-pub fn audio_set_eq(gains: [f32; 10], enabled: bool, state: State<'_, AudioEngine>) {
+pub async fn autoeq_entries(state: State<'_, AudioEngine>) -> Result<String, String> {
+    state.http_client
+        .get("https://autoeq.app/entries")
+        .send().await.map_err(|e| e.to_string())?
+        .text().await.map_err(|e| e.to_string())
+}
+
+/// Fetches the AutoEQ GraphicEQ profile for a specific headphone from GitHub raw content.
+///
+/// Directory layout in the AutoEQ repo:
+///   results/{source}/{form}/{name}/{name} GraphicEQ.txt           (most sources)
+///   results/{source}/{rig} {form}/{name}/{name} GraphicEQ.txt     (crinacle — rig-prefixed dir)
+///
+/// We try the rig-prefixed path first (when rig is present), then fall back to form-only.
+#[tauri::command]
+pub async fn autoeq_fetch_profile(
+    name: String,
+    source: String,
+    rig: Option<String>,
+    form: String,
+    state: State<'_, AudioEngine>,
+) -> Result<String, String> {
+    let base = "https://raw.githubusercontent.com/jaakkopasanen/AutoEq/master/results";
+    let filename = format!("{} GraphicEQ.txt", name);
+
+    let candidates: Vec<String> = if let Some(ref r) = rig {
+        vec![
+            format!("{}/{}/{} {}/{}/{}", base, source, r, form, name, filename),
+            format!("{}/{}/{}/{}/{}", base, source, form, name, filename),
+        ]
+    } else {
+        vec![format!("{}/{}/{}/{}/{}", base, source, form, name, filename)]
+    };
+
+    for url in &candidates {
+        let resp = state.http_client.get(url).send().await.map_err(|e| e.to_string())?;
+        if resp.status().is_success() {
+            return resp.text().await.map_err(|e| e.to_string());
+        }
+    }
+
+    Err(format!("GraphicEQ profile not found for '{}'", name))
+}
+
+#[tauri::command]
+pub fn audio_set_eq(gains: [f32; 10], enabled: bool, pre_gain: f32, state: State<'_, AudioEngine>) {
    state.eq_enabled.store(enabled, Ordering::Relaxed);
+    state.eq_pre_gain.store(pre_gain.clamp(-30.0, 6.0).to_bits(), Ordering::Relaxed);
    for (i, &gain) in gains.iter().enumerate() {
        state.eq_gains[i].store(gain.clamp(-12.0, 12.0).to_bits(), Ordering::Relaxed);
    }
@@ -1676,6 +1940,200 @@ pub async fn audio_preload(
    Ok(())
 }

+/// Play a live internet radio stream.
+///
+/// Unlike `audio_play`, the stream URL is infinite so bytes cannot be
+/// downloaded upfront.  A `RadioBuffer` bridges the async HTTP download into
+/// the synchronous Read interface that symphonia/rodio expect.  Emits
+/// `audio:playing` with `duration = 0.0` to signal "unknown duration" to JS.
+#[tauri::command]
+pub async fn audio_play_radio(
+    url: String,
+    volume: f32,
+    app: AppHandle,
+    state: State<'_, AudioEngine>,
+) -> Result<(), String> {
+    let gen = state.generation.fetch_add(1, Ordering::SeqCst) + 1;
+
+    // Cancel pending chain and fading-out sink immediately so audio stops.
+    *state.chained_info.lock().unwrap() = None;
+    {
+        let mut cur = state.current.lock().unwrap();
+        if let Some(old) = cur.sink.take() { old.stop(); }
+    }
+    if let Some(old) = state.fading_out_sink.lock().unwrap().take() { old.stop(); }
+
+    // Open the HTTP stream.
+    let response = state.http_client
+        .get(&url)
+        .header("Icy-MetaData", "0") // opt-out of Shoutcast inline metadata
+        .send().await
+        .map_err(|e| { let m = format!("radio: connection failed: {e}"); app.emit("audio:error", &m).ok(); m })?;
+
+    if !response.status().is_success() {
+        let m = format!("radio: HTTP {}", response.status());
+        app.emit("audio:error", &m).ok();
+        return Err(m);
+    }
+
+    // Derive a format hint from Content-Type so symphonia probes faster.
+    let ct = response.headers()
+        .get("content-type")
+        .and_then(|v| v.to_str().ok())
+        .unwrap_or("")
+        .to_lowercase();
+    let fmt_hint: Option<String> = if ct.contains("mpeg") || ct.contains("mp3") {
+        Some("mp3".into())
+    } else if ct.contains("aac") || ct.contains("aacp") {
+        Some("aac".into())
+    } else if ct.contains("ogg") {
+        Some("ogg".into())
+    } else if ct.contains("flac") {
+        Some("flac".into())
+    } else {
+        None
+    };
+
+    let (radio_buf, feed) = RadioBuffer::new();
+    let feed = Arc::new(feed);
+
+    // Background task: stream HTTP chunks into RadioBuffer with auto-reconnect.
+    // Many radio CDNs (Shoutcast/Icecast) close the TCP connection periodically.
+    // Rather than stopping, we reconnect to the same URL and keep pushing into
+    // the same RadioBuffer so the decoder recovers with only a brief glitch.
+    {
+        let gen_arc = state.generation.clone();
+        let feed2 = feed.clone();
+        let http_client2 = state.http_client.clone();
+        let url2 = url.clone();
+        tokio::spawn(async move {
+            let mut bytes_total: u64 = 0;
+            let mut reconnects: u32 = 0;
+            // Use the already-open response for the first connection; reconnect as needed.
+            let mut response_opt: Option<reqwest::Response> = Some(response);
+
+            'outer: loop {
+                if gen_arc.load(Ordering::SeqCst) != gen {
+                    eprintln!("[radio] download: gen mismatch → exit ({bytes_total} bytes, {reconnects} reconnects)");
+                    break 'outer;
+                }
+
+                let resp = match response_opt.take() {
+                    Some(r) => r,
+                    None => {
+                        tokio::time::sleep(Duration::from_millis(500)).await;
+                        if gen_arc.load(Ordering::SeqCst) != gen { break 'outer; }
+                        match http_client2.get(&url2).header("Icy-MetaData", "0").send().await {
+                            Ok(r) if r.status().is_success() => {
+                                reconnects += 1;
+                                eprintln!("[radio] reconnected #{reconnects} ({bytes_total} bytes so far)");
+                                feed2.flush(); // clear stale buffer so decoder gets a clean stream start
+                                r
+                            },
+                            Ok(r) => { eprintln!("[radio] reconnect failed: HTTP {} — giving up", r.status()); break 'outer; },
+                            Err(e) => { eprintln!("[radio] reconnect error: {e} — giving up"); break 'outer; },
+                        }
+                    },
+                };
+
+                let mut stream = resp.bytes_stream();
+                loop {
+                    if gen_arc.load(Ordering::SeqCst) != gen { break 'outer; }
+                    if feed2.is_full() {
+                        tokio::time::sleep(Duration::from_millis(50)).await;
+                        continue;
+                    }
+                    match stream.next().await {
+                        Some(Ok(chunk)) => {
+                            bytes_total += chunk.len() as u64;
+                            feed2.push(&chunk);
+                        },
+                        Some(Err(e)) => {
+                            eprintln!("[radio] stream error: {e} → reconnecting (attempt {})", reconnects + 1);
+                            break; // triggers outer reconnect
+                        },
+                        None => {
+                            eprintln!("[radio] stream ended cleanly → reconnecting (attempt {})", reconnects + 1);
+                            break;
+                        },
+                    }
+                }
+            }
+
+            eprintln!("[radio] download task exiting, closing feed");
+            feed2.close();
+        });
+    }
+
+    if state.generation.load(Ordering::SeqCst) != gen { return Ok(()); }
+
+    // Build symphonia decoder in a blocking thread (RadioBuffer::read blocks).
+    let decoder = tokio::task::spawn_blocking(move || {
+        SizedDecoder::new_streaming(Box::new(radio_buf), fmt_hint.as_deref())
+    }).await.map_err(|e| e.to_string())??;
+
+    if state.generation.load(Ordering::SeqCst) != gen { return Ok(()); }
+
+    let sample_rate = decoder.sample_rate();
+    let channels = decoder.channels();
+
+    let done_flag = Arc::new(AtomicBool::new(false));
+    state.samples_played.store(0, Ordering::Relaxed);
+
+    // Radio: no gapless trim, no ReplayGain, 5 ms micro-fade to suppress click.
+    let dyn_src = DynSource::new(decoder.convert_samples::<f32>());
+    let fadeout_trigger = Arc::new(AtomicBool::new(false));
+    let fadeout_samples = Arc::new(AtomicU64::new(0));
+    let eq_src = EqSource::new(dyn_src, state.eq_gains.clone(), state.eq_enabled.clone(), state.eq_pre_gain.clone());
+    let fade_in = EqualPowerFadeIn::new(eq_src, Duration::from_millis(5));
+    let fade_out = TriggeredFadeOut::new(fade_in, fadeout_trigger.clone(), fadeout_samples.clone());
+    let notifying = NotifyingSource::new(fade_out, done_flag.clone());
+    let counting = CountingSource::new(notifying, state.samples_played.clone());
+
+    if state.generation.load(Ordering::SeqCst) != gen { return Ok(()); }
+
+    let sink = Sink::try_new(&*state.stream_handle).map_err(|e| e.to_string())?;
+    let effective_vol = (volume.clamp(0.0, 1.0) * MASTER_HEADROOM).clamp(0.0, 1.0);
+    sink.set_volume(effective_vol);
+    sink.append(counting);
+
+    {
+        let mut cur = state.current.lock().unwrap();
+        if let Some(old) = cur.sink.take() { old.stop(); }
+        cur.sink = Some(sink);
+        cur.duration_secs = 0.0; // sentinel: live stream
+        cur.seek_offset = 0.0;
+        cur.play_started = Some(Instant::now());
+        cur.paused_at = None;
+        cur.replay_gain_linear = 1.0;
+        cur.base_volume = volume.clamp(0.0, 1.0);
+        cur.fadeout_trigger = Some(fadeout_trigger);
+        cur.fadeout_samples = Some(fadeout_samples);
+    }
+
+    state.current_sample_rate.store(sample_rate, Ordering::Relaxed);
+    state.current_channels.store(channels as u32, Ordering::Relaxed);
+
+    app.emit("audio:playing", 0.0f64).ok();
+
+    spawn_progress_task(
+        gen,
+        state.generation.clone(),
+        state.current.clone(),
+        state.chained_info.clone(),
+        state.crossfade_enabled.clone(),
+        state.crossfade_secs.clone(),
+        done_flag,
+        app,
+        state.samples_played.clone(),
+        state.current_sample_rate.clone(),
+        state.current_channels.clone(),
+        state.gapless_switch_at.clone(),
+    );
+
+    Ok(())
+}
+
 #[tauri::command]
 pub fn audio_set_crossfade(enabled: bool, secs: f32, state: State<'_, AudioEngine>) {
    state.crossfade_enabled.store(enabled, Ordering::Relaxed);
@@ -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(())
+}
@@ -2,6 +2,7 @@
 #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]

 mod audio;
+mod discord;

 use std::collections::HashMap;
 use std::sync::Mutex;
@@ -30,6 +31,50 @@ 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);
+}
+
 /// 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.
@@ -296,12 +341,21 @@ pub fn run() {
    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_global_shortcut::Builder::new().build())
        .plugin(tauri_plugin_store::Builder::default().build())
        .plugin(tauri_plugin_dialog::init())
        .plugin(tauri_plugin_fs::init())
+        .plugin(tauri_plugin_single_instance::init(|app, _args, _cwd| {
+            let window = app.get_webview_window("main").expect("no main window");
+            let _ = window.show();
+            let _ = window.unminimize();
+            let _ = window.set_focus();
+        }))

        .setup(|app| {
            // ── System tray ───────────────────────────────────────────────
@@ -482,14 +536,20 @@ pub fn run() {
            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,
            download_track_offline,
            delete_offline_track,
            get_offline_cache_size,
+            relaunch_after_update,
        ])
        .run(tauri::generate_context!())
        .expect("error while running Psysonic");
@@ -1,7 +1,7 @@
 {
  "$schema": "https://schema.tauri.app/config/2",
  "productName": "Psysonic",
-  "version": "1.25.0",
+  "version": "1.31.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": {
@@ -1,4 +1,5 @@
 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';
@@ -28,9 +29,11 @@ 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';
@@ -43,6 +46,7 @@ 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';
@@ -138,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]);
@@ -182,14 +186,36 @@ function AppShell() {
    // 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);
    };
  }, []);

@@ -255,6 +281,7 @@ function AppShell() {
            <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>
@@ -272,8 +299,10 @@ function AppShell() {
        <FullscreenPlayer onClose={toggleFullscreen} />
      )}
      <ContextMenu />
+      <SongInfoModal />
      <DownloadFolderModal />
      <TooltipPortal />
+      <AppUpdater />
      {changelogModalOpen && <ChangelogModal onClose={() => setChangelogModalOpen(false)} />}
    </div>
  );
@@ -429,20 +458,6 @@ export default function App() {

  const handleExport = async (since: number) => {
    setExportPickerOpen(false);
-    const showToast = (text: string) => {
-      const toast = document.createElement('div');
-      toast.textContent = text;
-      toast.style.cssText = `
-        position:fixed; bottom:100px; left:50%; transform:translateX(-50%);
-        background:#24273a; color:#cad3f5; border:1px solid #363a4f;
-        padding:10px 20px; border-radius:10px; font-size:14px;
-        z-index:999999; pointer-events:none;
-        box-shadow:0 4px 24px rgba(0,0,0,0.5);
-        white-space:nowrap;
-      `;
-      document.body.appendChild(toast);
-      setTimeout(() => toast.remove(), 4000);
-    };
    try {
      const { exportNewAlbumsImage } = await import('./utils/exportNewAlbums');
      const result = await exportNewAlbumsImage(since);
@@ -74,6 +74,7 @@ export interface SubsonicSong {
  contentType?: string;
  size?: number;
  samplingRate?: number;
+  bitDepth?: number;
  channelCount?: number;
  starred?: string;
  genre?: string;
@@ -87,6 +88,14 @@ export interface SubsonicSong {
  };
 }

+export interface InternetRadioStation {
+  id: string;
+  name: string;
+  streamUrl: string;
+  homepageUrl?: string;
+  coverArt?: string; // Navidrome v0.61.0+
+}
+
 export interface SubsonicPlaylist {
  id: string;
  name: string;
@@ -394,9 +403,18 @@ export async function createPlaylist(name: string, songIds?: string[]): Promise<
  return data.playlist;
 }

-export async function updatePlaylist(id: string, songIds: string[]): Promise<void> {
-  // createPlaylist with playlistId replaces the existing playlist's songs (Subsonic API 1.14+)
-  await api('createPlaylist.view', { playlistId: id, songId: songIds });
+export async function 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 deletePlaylist(id: string): Promise<void> {
@@ -432,3 +450,36 @@ 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 });
+}
@@ -81,7 +81,11 @@ 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>
@@ -1,14 +1,16 @@
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Play, Star, ExternalLink, X, ChevronLeft, Download, ListPlus, HardDriveDownload, Loader2 } from 'lucide-react';
+import { Play, Heart, ExternalLink, X, ChevronLeft, Download, ListPlus, HardDriveDownload, Loader2 } from 'lucide-react';
 import { SubsonicSong, buildCoverArtUrl } from '../api/subsonic';
 import CachedImage from './CachedImage';
 import CoverLightbox from './CoverLightbox';
 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')}`;
 }

@@ -143,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>
@@ -203,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>

@@ -1,21 +1,25 @@
-import React, { useState, useEffect } from 'react';
-import { Play, Star } from 'lucide-react';
+import React, { useState, useEffect, useLayoutEffect, useMemo, useRef } from 'react';
+import { Play, Heart, ListPlus, X, ChevronDown, Check } from 'lucide-react';
 import { SubsonicSong } from '../api/subsonic';
 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 }) {
@@ -41,6 +45,89 @@ function StarRating({ value, onChange }: { value: number; onChange: (r: number)
  );
 }

+// ── Column configuration ──────────────────────────────────────────────────────
+
+const COLUMNS = [
+  { key: 'num',      i18nKey: null,             minWidth: 60,  defaultWidth: 60,   required: true,  fixed: true  },
+  { key: 'title',    i18nKey: 'trackTitle',     minWidth: 100, defaultWidth: 220,  required: true,  fixed: false },
+  { key: 'artist',   i18nKey: 'trackArtist',    minWidth: 80,  defaultWidth: 160,  required: false, fixed: false },
+  { key: 'favorite', i18nKey: 'trackFavorite',  minWidth: 50,  defaultWidth: 70,   required: false, fixed: false },
+  { key: 'rating',   i18nKey: 'trackRating',    minWidth: 80,  defaultWidth: 100,  required: false, fixed: false },
+  { key: 'duration', i18nKey: 'trackDuration',  minWidth: 50,  defaultWidth: 60,   required: false, fixed: false },
+  { key: 'format',   i18nKey: 'trackFormat',    minWidth: 60,  defaultWidth: 80,   required: false, fixed: false },
+  { key: 'genre',    i18nKey: 'trackGenre',     minWidth: 60,  defaultWidth: 80,   required: false, fixed: false },
+] as const;
+
+type ColKey = (typeof COLUMNS)[number]['key'];
+
+const DEFAULT_WIDTHS: Record<ColKey, number> = Object.fromEntries(
+  COLUMNS.map(c => [c.key, c.defaultWidth])
+) as Record<ColKey, number>;
+
+const DEFAULT_VISIBLE = new Set<ColKey>([
+  'num', 'title', 'artist', 'favorite', 'rating', 'duration', 'format', 'genre',
+]);
+
+function loadColPrefs(): { widths: Record<ColKey, number>; visible: Set<ColKey> } {
+  try {
+    const raw = localStorage.getItem('psysonic_tracklist_columns');
+    if (!raw) return { widths: { ...DEFAULT_WIDTHS }, visible: new Set(DEFAULT_VISIBLE) };
+    const parsed = JSON.parse(raw);
+    const visible = new Set<ColKey>((parsed.visible as ColKey[]) ?? [...DEFAULT_VISIBLE]);
+    COLUMNS.filter(c => c.required).forEach(c => visible.add(c.key as ColKey));
+    return {
+      widths: { ...DEFAULT_WIDTHS, ...(parsed.widths ?? {}) },
+      visible,
+    };
+  } catch {
+    return { widths: { ...DEFAULT_WIDTHS }, visible: new Set(DEFAULT_VISIBLE) };
+  }
+}
+
+function saveColPrefs(widths: Record<ColKey, number>, visible: Set<ColKey>) {
+  localStorage.setItem('psysonic_tracklist_columns', JSON.stringify({
+    widths,
+    visible: [...visible],
+  }));
+}
+
+/** Scale flexible (non-fixed) visible columns proportionally to fill `targetW` exactly.
+ *  Fixed columns (e.g. 'num') keep their width unchanged.
+ *  Each flexible column is clamped to its minWidth; rounding error is absorbed by 'title'. */
+function fitColumnsToWidth(
+  widths: Record<ColKey, number>,
+  vCols: readonly { readonly key: string; readonly minWidth: number; readonly fixed: boolean }[],
+  targetW: number,
+  gapPx: number
+): Record<ColKey, number> {
+  if (vCols.length === 0 || targetW <= 0) return widths;
+  const next = { ...widths };
+  const fixedCols = vCols.filter(c => c.fixed);
+  const flexCols  = vCols.filter(c => !c.fixed);
+  if (flexCols.length === 0) return next;
+  const totalGaps  = Math.max(0, vCols.length - 1) * gapPx;
+  const fixedTotal = fixedCols.reduce((s, c) => s + (next[c.key as ColKey] ?? c.minWidth), 0);
+  const available  = targetW - totalGaps - fixedTotal;
+  if (available <= 0) return next;
+  const currentFlexTotal = flexCols.reduce((s, c) => s + (next[c.key as ColKey] ?? c.minWidth), 0);
+  if (currentFlexTotal === 0) return next;
+  const ratio = available / currentFlexTotal;
+  flexCols.forEach(c => {
+    const key = c.key as ColKey;
+    next[key] = Math.max(c.minWidth, Math.round((next[key] ?? c.minWidth) * ratio));
+  });
+  // Correct rounding drift in 'title' column
+  const newFlexTotal = flexCols.reduce((s, c) => s + next[c.key as ColKey], 0);
+  const diff = available - newFlexTotal;
+  if (flexCols.some(c => c.key === 'title') && diff !== 0) {
+    const titleDef = COLUMNS.find(c => c.key === 'title')!;
+    next['title'] = Math.max(titleDef.minWidth, next['title'] + diff);
+  }
+  return next;
+}
+
+// ── Props ─────────────────────────────────────────────────────────────────────
+
 interface AlbumTrackListProps {
  songs: SubsonicSong[];
  hasVariousArtists: boolean;
@@ -67,13 +154,194 @@ export default function AlbumTrackList({
  onContextMenu,
 }: AlbumTrackListProps) {
  const { t } = useTranslation();
-  const [hoveredSongId, setHoveredSongId] = useState<string | null>(null);
+  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 ──────────────────────────────────────────────────────────
+  const [colWidths, setColWidths] = useState<Record<ColKey, number>>(() => loadColPrefs().widths);
+  const [colVisible, setColVisible] = useState<Set<ColKey>>(() => loadColPrefs().visible);
+  const [pickerOpen, setPickerOpen] = useState(false);
+  const pickerRef = useRef<HTMLDivElement>(null);
+  const tracklistRef = useRef<HTMLDivElement>(null);
+  const prevContainerW = useRef(0);
+  const colVisibleRef = useRef(colVisible);
+  useEffect(() => { colVisibleRef.current = colVisible; }, [colVisible]);
+
+  // Stores the user's last intentional column widths + the container W they match.
+  // ResizeObserver always scales FROM this base — never from intermediate scaled values.
+  // This prevents drift when the window is shrunk and enlarged again.
+  const baseWidthsRef = useRef<{ widths: Record<ColKey, number>; containerW: number } | null>(null);
+  // Tracks current colWidths without a useEffect dependency in callbacks
+  const colWidthsRef = useRef(colWidths);
+  useEffect(() => { colWidthsRef.current = colWidths; }, [colWidths]);
+
+  // On mount: fit saved (or default) widths to current container; establish base.
+  useLayoutEffect(() => {
+    const el = tracklistRef.current;
+    if (!el) return;
+    const style = getComputedStyle(el);
+    const paddingH = parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
+    const containerW = el.clientWidth - paddingH;
+    prevContainerW.current = containerW;
+    const vCols = COLUMNS.filter(c => colVisibleRef.current.has(c.key));
+    setColWidths(prev => {
+      const fitted = fitColumnsToWidth(prev, vCols, containerW, 12);
+      baseWidthsRef.current = { widths: fitted, containerW };
+      return fitted;
+    });
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // When the container resizes, scale all columns proportionally FROM the base.
+  // Using the base (not prev) means shrink → grow always returns to exact original widths.
+  useEffect(() => {
+    const el = tracklistRef.current;
+    if (!el) return;
+    const observer = new ResizeObserver(() => {
+      const style = getComputedStyle(el);
+      const paddingH = parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
+      const newW = el.clientWidth - paddingH;
+      if (Math.abs(newW - prevContainerW.current) < 2) return;
+      prevContainerW.current = newW;
+      const base = baseWidthsRef.current;
+      if (!base) return;
+      const headerEl = el.querySelector('.tracklist-header') as HTMLElement | null;
+      const gapPx = headerEl ? (parseFloat(getComputedStyle(headerEl).columnGap) || 12) : 12;
+      const vCols = COLUMNS.filter(c => colVisibleRef.current.has(c.key));
+      // Always scale from base.widths, never from current state → no drift
+      setColWidths(() => fitColumnsToWidth(base.widths, vCols, newW, gapPx));
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // All visible columns in order
+  const visibleCols = useMemo(
+    () => COLUMNS.filter(c => colVisible.has(c.key)),
+    [colVisible]
+  );
+
+  // Grid template: all fixed px — bidirectional resize works correctly
+  const gridTemplate = useMemo(
+    () => visibleCols.map(c => `${colWidths[c.key]}px`).join(' '),
+    [colWidths, visibleCols]
+  );
+
+  const colStyle = { gridTemplateColumns: gridTemplate };
+
+
+  // ── Bidirectional resize ─────────────────────────────────────────────────
+  // Dragging the divider between col[colIndex] and col[colIndex+1]:
+  //   → right: colA grows, colB shrinks (clamped to minWidth)
+  //   → left:  colA shrinks, colB grows (clamped to minWidth)
+  // Excel-style resize: only the dragged column changes width.
+  // Clamped so total never exceeds container width — no overflow, no scrollbar.
+  const startResize = (e: React.MouseEvent, colIndex: number) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    const colA = visibleCols[colIndex];
+    const defA = COLUMNS.find(c => c.key === colA.key)!;
+    const startX = e.clientX;
+    const startW = colWidths[colA.key as ColKey];
+    const snapshotVisible = colVisible;
+
+    // Measure container once at drag start
+    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) || 0) : 12;
+      const sumOthers = visibleCols
+        .filter((_, i) => i !== colIndex)
+        .reduce((s, c) => s + colWidths[c.key as ColKey], 0);
+      maxW = Math.max(defA.minWidth, containerW - sumOthers - (visibleCols.length - 1) * gapPx);
+    }
+
+    const onMove = (me: MouseEvent) => {
+      const newW = Math.min(Math.max(defA.minWidth, startW + me.clientX - startX), maxW);
+      setColWidths(prev => ({ ...prev, [colA.key]: newW }));
+    };
+
+    const onUp = () => {
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup', onUp);
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+      // Save final state and update base so future window resizes scale from here
+      const finalWidths = colWidthsRef.current;
+      baseWidthsRef.current = { widths: { ...finalWidths }, containerW: prevContainerW.current };
+      saveColPrefs(finalWidths, snapshotVisible);
+    };
+
+    document.body.style.cursor = 'col-resize';
+    document.body.style.userSelect = 'none';
+    document.addEventListener('mousemove', onMove);
+    document.addEventListener('mouseup', onUp);
+  };
+
+  const toggleColumn = (key: ColKey) => {
+    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);
+      saveColPrefs(colWidths, next);
+      return next;
+    });
+  };
+
+  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]);
+
+  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]);
+
  const totalDuration = songs.reduce((acc, s) => acc + s.duration, 0);

  const discs = new Map<number, SubsonicSong[]>();
@@ -83,20 +351,215 @@ export default function AlbumTrackList({
    discs.get(disc)!.push(song);
  });
  const discNums = Array.from(discs.keys()).sort((a, b) => a - b);
-   const isMultiDisc = discNums.length > 1;
+  const isMultiDisc = discNums.length > 1;
+
+  const inSelectMode = selectedIds.size > 0;
+
+  // ── Header cell renderer ──────────────────────────────────────────────────
+  const renderHeaderCell = (colDef: (typeof COLUMNS)[number], colIndex: number) => {
+    const key = colDef.key as ColKey;
+    const isLastCol = colIndex === visibleCols.length - 1;
+    const isCentered = key === 'favorite' || key === 'rating' || key === 'duration';
+    const label = colDef.i18nKey ? t(`albumDetail.${colDef.i18nKey as string}`) : '';
+
+    // 'num' header mirrors the row-cell layout exactly so checkbox + # stay aligned
+    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>
+      );
+    }
+
+    return (
+      <div
+        key={key}
+        className={isCentered ? 'col-center' : undefined}
+        style={{ position: 'relative' }}
+      >
+        <span style={{ display: 'block', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+          {label}
+        </span>
+        {/* Resize handle on all non-fixed columns except the last */}
+        {!isLastCol && !colDef.fixed && (
+          <div
+            className="col-resize-handle"
+            onMouseDown={e => startResize(e, colIndex)}
+          />
+        )}
+      </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${' tracklist-va'}`}>
-        <div className="col-center">#</div>
-        <div>{t('albumDetail.trackTitle')}</div>
-        <div>{t('albumDetail.trackArtist')}</div>
-        <div className="col-center">{t('albumDetail.trackFavorite')}</div>
-        <div className="col-center">{t('albumDetail.trackRating')}</div>
-        <div className="col-center">{t('albumDetail.trackDuration')}</div>
-        <div>{t('albumDetail.trackFormat')}</div>
+    <div 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={colStyle}>
+          {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 key = c.key as ColKey;
+                const label = c.i18nKey ? t(`albumDetail.${c.i18nKey as string}`) : key;
+                const isOn = colVisible.has(key);
+                return (
+                  <button
+                    key={key}
+                    className={`tracklist-col-picker-item${isOn ? ' active' : ''}`}
+                    onClick={() => toggleColumn(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 && (
@@ -105,88 +568,50 @@ export default function AlbumTrackList({
              CD {discNum}
            </div>
          )}
-          {discs.get(discNum)!.map((song, i) => (
-            <div
-              key={song.id}
-              className={`track-row track-row-va${currentTrack?.id === song.id ? ' active' : ''}${contextMenuSongId === song.id ? ' context-active' : ''}`}
-              onMouseEnter={() => setHoveredSongId(song.id)}
-              onMouseLeave={() => setHoveredSongId(null)}
-              onDoubleClick={() => onPlaySong(song)}
-              onContextMenu={e => {
-                e.preventDefault();
-                setContextMenuSongId(song.id);
-                onContextMenu(e.clientX, e.clientY, 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);
-              }}
-            >
+          {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={colStyle}
+                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>
-              <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${' tracklist-va'}`}>
-        <span className="tracklist-total-label">{t('albumDetail.trackTotal')}</span>
-        <span className="tracklist-total-value">{formatDuration(totalDuration)}</span>
-      </div>
    </div>
  );
 }
@@ -0,0 +1,146 @@
+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 }
+  | { 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) {
+      console.error('Update failed', e);
+      setState({ phase: 'available', version: savedVersion, update });
+    }
+  };
+
+  const handleDownload = () => {
+    open('https://github.com/Psychotoxical/psysonic/releases/latest');
+  };
+
+  const version = state.phase === 'available' ? state.version : '';
+  const canInstall = state.phase === 'available' && state.update !== null;
+  const isLinuxFallback = state.phase === 'available' && state.update === null;
+
+  return createPortal(
+    <div className="app-updater-toast">
+      <div className="app-updater-header">
+        <RefreshCw size={13} />
+        <span className="app-updater-label">{t('common.updaterAvailable')}</span>
+        <button className="app-updater-dismiss" onClick={() => setDismissed(true)} aria-label="Dismiss">
+          <X size={12} />
+        </button>
+      </div>
+      <div className="app-updater-version">{t('common.updaterVersion', { version })}</div>
+
+      {state.phase === 'downloading' && (
+        <div className="app-updater-progress-wrap">
+          <div className="app-updater-progress-bar">
+            <div className="app-updater-progress-fill" style={{ width: `${state.pct}%` }} />
+          </div>
+          <span className="app-updater-pct">{state.pct}%</span>
+        </div>
+      )}
+
+      {state.phase === 'installing' && (
+        <div className="app-updater-status">{t('common.updaterInstalling')}</div>
+      )}
+
+      {state.phase === 'available' && (
+        <div className="app-updater-actions">
+          {canInstall && (
+            <>
+              <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
+  );
+}
@@ -6,31 +6,56 @@ 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, style, onLoad, ...props }: CachedImageProps) {
-  const resolvedSrc = useCachedUrl(src, cacheKey);
-  const [loaded, setLoaded] = useState(false);
-  const prevSrc = useRef('');
+  const [inView, setInView] = useState(false);
+  const imgRef = useRef<HTMLImageElement>(null);

-  if (resolvedSrc !== prevSrc.current) {
-    prevSrc.current = resolvedSrc;
+  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
-      src={resolvedSrc}
-      style={{ ...style, opacity: loaded ? 1 : 0, transition: loaded ? 'opacity 0.15s ease' : 'none' }}
+      ref={imgRef}
+      src={resolvedSrc || undefined}
+      style={{ ...style, opacity: loaded ? 1 : 0, transition: 'opacity 0.15s ease' }}
      onLoad={e => { setLoaded(true); onLoad?.(e); }}
      {...props}
    />
@@ -1,5 +1,6 @@
 import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { Play, ListPlus, Radio, Star, Download, ChevronRight, User, Disc3, Heart, ListMusic, Plus } from 'lucide-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, songToTrack } from '../store/playerStore';
 import { SubsonicAlbum, SubsonicArtist, star, unstar, getSimilarSongs2, getTopSongs, buildDownloadUrl, getAlbum, getPlaylists, getPlaylist, createPlaylist, updatePlaylist, SubsonicPlaylist } from '../api/subsonic';
@@ -21,7 +22,7 @@ function sanitizeFilename(name: string): string {
 }

 // ── Add-to-Playlist submenu ───────────────────────────────────────
-function AddToPlaylistSubmenu({ songIds, onDone }: { songIds: string[]; onDone: () => void }) {
+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);
@@ -84,9 +85,11 @@ function AddToPlaylistSubmenu({ songIds, onDone }: { songIds: string[]; onDone:
    onDone();
  };

-  const subStyle: React.CSSProperties = flipLeft
-    ? { right: 'calc(100% + 4px)', left: 'auto' }
-    : { left: 'calc(100% + 4px)', right: 'auto' };
+  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}>
@@ -160,7 +163,7 @@ function AlbumToPlaylistSubmenu({ albumId, onDone }: { albumId: string; 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();
@@ -204,16 +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(songToTrack);
-         playTrack(radioTracks[0], radioTracks);
-       }
-    } catch (e) {
-      console.error('Failed to start radio', e);
+  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);
+      }
    }
  };

@@ -294,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(() => {
@@ -302,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 && (() => {
@@ -315,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>
            </>
          );
        })()}
@@ -340,7 +404,7 @@ 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))}>
@@ -374,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>
            </>
@@ -415,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 && (() => {
@@ -428,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>
            </>
          );
        })()}
@@ -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 = Math.round(pctToGain(pct) / 0.1) * 0.1; // snap to 0.1 dB
    onChange(Math.max(GAIN_MIN, Math.min(GAIN_MAX, gain)));
  }, [onChange]);

@@ -182,20 +183,63 @@ 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; }
+
+
+function parseGraphicEqString(graphicEqStr: string): number[] {
+  const line = graphicEqStr.replace(/^GraphicEQ:\s*/i, '');
+  const points: [number, number][] = line
+    .split(';')
+    .map(s => s.trim())
+    .filter(Boolean)
+    .map(s => { const [f, g] = s.split(/\s+/).map(Number); return [f, g] as [number, number]; })
+    .filter(([f, g]) => !isNaN(f) && !isNaN(g));
+
+  if (points.length === 0) return [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
+
+  return [31, 62, 125, 250, 500, 1000, 2000, 4000, 8000, 16000].map(targetFreq => {
+    if (targetFreq <= points[0][0]) return points[0][1];
+    if (targetFreq >= points[points.length - 1][0]) return points[points.length - 1][1];
+    for (let i = 0; i < points.length - 1; i++) {
+      if (points[i][0] <= targetFreq && points[i + 1][0] >= targetFreq) {
+        const lo = points[i], hi = points[i + 1];
+        if (lo[0] === hi[0]) return lo[1];
+        const t = (Math.log10(targetFreq) - Math.log10(lo[0])) / (Math.log10(hi[0]) - Math.log10(lo[0]));
+        return Math.round((lo[1] + t * (hi[1] - lo[1])) / 0.1) * 0.1;
+      }
+    }
+    return 0;
+  });
+}
+
 // ─── 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 +260,63 @@ 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 newGains = parseGraphicEqString(text);
+      // autoeq.app normalizes gains (preamp baked in) — apply with 0 pre-gain
+      applyAutoEq(result.name, newGains, 0);
+      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 +380,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 +482,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>
  );
@@ -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 (
    <>
@@ -158,8 +167,9 @@ export default function FullscreenPlayer({ onClose }: FullscreenPlayerProps) {
  // 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]);
-  // useCachedUrl must be called unconditionally (hook rules)
-  const resolvedCoverUrl = useCachedUrl(coverUrl, coverKey);
+  // 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>('');
@@ -235,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
@@ -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>
  );
@@ -30,6 +30,8 @@ export default function LyricsPane({ currentTrack }: Props) {

  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);
@@ -103,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>}
@@ -113,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>
@@ -2,11 +2,11 @@ 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';
@@ -14,6 +14,7 @@ import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { useLyricsStore } from '../store/lyricsStore';
 import MarqueeText from './MarqueeText';
+import LastfmIcon from './LastfmIcon';

 function formatTime(seconds: number): string {
  if (!seconds || isNaN(seconds)) return '0:00';
@@ -30,15 +31,41 @@ export default function PlayerBar() {
  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.
+  const radioCoverSrc = useMemo(
+    () => currentRadio?.coverArt ? buildCoverArtUrl(currentRadio.coverArt, 128) : '',
+    [currentRadio?.coverArt]
+  );
+  const radioCoverKey = currentRadio?.coverArt ? coverArtCacheKey(currentRadio.coverArt, 128) : '';
  const coverSrc = useMemo(() => currentTrack?.coverArt ? buildCoverArtUrl(currentTrack.coverArt, 128) : '', [currentTrack?.coverArt]);
  const coverKey = currentTrack?.coverArt ? coverArtCacheKey(currentTrack.coverArt, 128) : '';

@@ -46,6 +73,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}%)`,
  };
@@ -56,11 +89,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}
@@ -72,7 +118,7 @@ export default function PlayerBar() {
              <Music size={22} />
            </div>
          )}
-          {currentTrack && (
+          {currentTrack && !isRadio && (
            <div className="player-art-expand-hint" aria-hidden="true">
              <Maximize2 size={16} />
            </div>
@@ -80,19 +126,30 @@ export default function PlayerBar() {
        </div>
        <div className="player-track-meta">
          <MarqueeText
-            text={currentTrack?.title ?? t('player.noTitle')}
+            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}`)}
+            style={{ cursor: !isRadio && currentTrack?.albumId ? 'pointer' : 'default' }}
+            onClick={() => !isRadio && currentTrack?.albumId && navigate(`/album/${currentTrack.albumId}`)}
          />
          <MarqueeText
-            text={currentTrack?.artist ?? '—'}
+            text={isRadio ? t('radio.liveStream') : (currentTrack?.artist ?? '—')}
            className="player-track-artist"
-            style={{ cursor: currentTrack?.artistId ? 'pointer' : 'default' }}
-            onClick={() => currentTrack?.artistId && navigate(`/artist/${currentTrack.artistId}`)}
+            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 +157,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 +167,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 +178,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 +192,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,7 +243,7 @@ export default function PlayerBar() {
        >
          {volume === 0 ? <VolumeX size={16} /> : <Volume2 size={16} />}
        </button>
-        <div className="player-volume-slider-wrap">
+        <div className="player-volume-slider-wrap" onWheel={handleVolumeWheel}>
          {showVolPct && (
            <span className="player-volume-pct" style={{ left: `${volume * 100}%` }}>
              {Math.round(volume * 100)}%
@@ -1,7 +1,8 @@
 import React, { useState, useRef, useMemo } from 'react';
 import { Track, usePlayerStore, songToTrack } from '../store/playerStore';
-import { Play, Music, Star, X, Trash2, Save, FolderOpen, Shuffle, Infinity, Waves, MicVocal, ListMusic, Check, ListPlus } from 'lucide-react';
-import { buildCoverArtUrl, getAlbum, getPlaylists, getPlaylist, createPlaylist, updatePlaylist, deletePlaylist, SubsonicPlaylist } from '../api/subsonic';
+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';
@@ -159,10 +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 currentCoverSrc = useMemo(
+  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);
@@ -177,9 +183,11 @@ export default function QueuePanel() {
  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);
@@ -363,12 +371,19 @@ export default function QueuePanel() {

      {currentTrack && (
        <div className="queue-current-track">
-          {(currentTrack.genre || currentTrack.suffix || currentTrack.bitRate) && (
+          {(currentTrack.suffix || currentTrack.bitRate || currentTrack.samplingRate || currentTrack.bitDepth) && (
            <div className="queue-current-tech">
              {[
-                currentTrack.genre,
                currentTrack.suffix?.toUpperCase(),
                currentTrack.bitRate ? `${currentTrack.bitRate} kbps` : undefined,
+                (() => {
+                  const bd = currentTrack.bitDepth;
+                  const sr = currentTrack.samplingRate ? `${currentTrack.samplingRate / 1000} kHz` : '';
+                  if (bd && sr) return `${bd}/${sr}`;
+                  if (bd) return `${bd}-bit`;
+                  if (sr) return sr;
+                  return undefined;
+                })(),
              ].filter(Boolean).join(' · ')}
            </div>
          )}
@@ -474,6 +489,14 @@ export default function QueuePanel() {
            </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>}
@@ -486,6 +509,8 @@ export default function QueuePanel() {
        ) : (
          queue.map((track, idx) => {
            const isPlaying = idx === queueIndex;
+            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 (isPsyDragging && psyDragFromIdxRef.current === idx) {
@@ -499,8 +524,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)}
@@ -541,6 +576,7 @@ export default function QueuePanel() {
                  {formatTime(track.duration)}
                </div>
              </div>
+              </React.Fragment>
            );
          })
        )}
@@ -1,15 +1,13 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { usePlayerStore } from '../store/playerStore';
 import { useOfflineStore } from '../store/offlineStore';
 import { useAuthStore } from '../store/authStore';
 import { useSidebarStore } from '../store/sidebarStore';
-import { open } from '@tauri-apps/plugin-shell';
-import { version as appVersion } from '../../package.json';
 import { NavLink } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import {
  Disc3, Users, Music4, Radio, Settings, Heart, BarChart3, Shuffle,
-  PanelLeftClose, PanelLeft, HelpCircle, Dices, ArrowUpCircle, AudioLines, HardDriveDownload, Tags, ListMusic
+  PanelLeftClose, PanelLeft, HelpCircle, Dices, AudioLines, HardDriveDownload, Tags, ListMusic, Cast
 } from 'lucide-react';
 import PsysonicLogo from './PsysonicLogo';
 import PSmallLogo from './PSmallLogo';
@@ -26,46 +24,11 @@ export const ALL_NAV_ITEMS: Record<string, { icon: React.ElementType; labelKey:
  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'  },
 };

-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,
@@ -83,8 +46,6 @@ export default function Sidebar({
  const serverId = useAuthStore(s => s.activeServerId ?? '');
  const hasOfflineContent = Object.values(offlineAlbums).some(a => a.serverId === serverId);
  const sidebarItems = useSidebarStore(s => s.items);
-  const [latestVersion, setLatestVersion] = useState<string | null>(null);
-
  // Resolve ordered, visible items per section from store config
  const visibleLibrary = sidebarItems
    .filter(cfg => cfg.visible && ALL_NAV_ITEMS[cfg.id]?.section === 'library')
@@ -93,28 +54,6 @@ export default function Sidebar({
    .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' : ''}`}>
@@ -178,8 +117,7 @@ export default function Sidebar({
        )}

        {visibleSystem.length > 0 && !isCollapsed && <span className="nav-section-label">{t('sidebar.system')}</span>}
-        {latestVersion && <UpdateToast isCollapsed={isCollapsed} latestVersion={latestVersion} />}
-        {visibleSystem.map(item => (
+{visibleSystem.map(item => (
          <NavLink
            key={item.to}
            to={item.to}
@@ -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
+  );
+}
@@ -169,7 +169,7 @@ export default function AdvancedSearch() {
              <span style={{ fontSize: 13, color: 'var(--text-muted)', minWidth: 90, flexShrink: 0 }}>
                {t('search.advancedGenre')}
              </span>
-              <div style={{ minWidth: 180 }}>
+              <div style={{ minWidth: 240, flex: '1 1 240px', maxWidth: 360 }}>
                <CustomSelect
                  value={genre}
                  options={genreSelectOptions}
@@ -188,7 +188,7 @@ export default function AdvancedSearch() {
                value={yearFrom}
                onChange={e => setYearFrom(e.target.value)}
                placeholder={t('search.advancedYearFrom')}
-                style={{ width: 76 }}
+                style={{ width: 96 }}
              />
              <span style={{ color: 'var(--text-muted)', fontSize: 14 }}>–</span>
              <input
@@ -199,7 +199,7 @@ export default function AdvancedSearch() {
                value={yearTo}
                onChange={e => setYearTo(e.target.value)}
                placeholder={t('search.advancedYearTo')}
-                style={{ width: 76 }}
+                style={{ width: 96 }}
              />
            </div>

@@ -319,7 +319,7 @@ export default function AdvancedSearch() {
                      </div>
                      <div className="track-artist-cell">
                        <span
-                          className="track-artist"
+                          className={`track-artist${song.artistId ? ' track-artist-link' : ''}`}
                          style={{ cursor: song.artistId ? 'pointer' : 'default' }}
                          onClick={() => song.artistId && navigate(`/artist/${song.artistId}`)}
                        >
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useCallback } from 'react';
+import React, { useEffect, useState, useCallback, useMemo } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { invoke } from '@tauri-apps/api/core';
 import { getAlbum, getArtist, getArtistInfo, setRating, buildCoverArtUrl, coverArtCacheKey, buildDownloadUrl, star, unstar, SubsonicSong, SubsonicAlbum } from '../api/subsonic';
@@ -32,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);

@@ -112,9 +113,15 @@ const handleEnqueueAll = () => {
   };

   const handlePlaySong = (song: SubsonicSong) => {
-     const track = songToTrack(song);
-     if (!track.genre && album?.album.genre) track.genre = album.album.genre;
-     playTrack(track, [track]);
+     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) => {
@@ -195,12 +202,14 @@ const handleEnqueueAll = () => {
    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);
    }
  };

@@ -225,9 +234,12 @@ const handleEnqueueAll = () => {
    deleteAlbum(album.album.id, serverId);
  };

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

  if (loading) return <div className="loading-center"><div className="spinner" /></div>;
@@ -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, 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>
@@ -337,13 +401,20 @@ export default function ArtistDetail() {
                       key={song.id}
                       className="track-row"
                       style={{ gridTemplateColumns: '36px minmax(150px, 2fr) minmax(100px, 1fr) 60px' }}
-                       onDoubleClick={() => playTrack(track, topSongs.map(songToTrack))}
+                       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" style={{ textAlign: 'center' }}>{idx + 1}</div>
+                <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
@@ -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 } 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>
          ))}
@@ -17,10 +17,15 @@ export default function Favorites() {
  const [loading, setLoading] = useState(true);

  const { playTrack, enqueue } = usePlayerStore();
+  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 psyDrag = useDragDrop();

  function removeSong(id: string) {
    unstar(id, 'song').catch(() => {});
+    setStarredOverride(id, false);
    setSongs(prev => prev.filter(s => s.id !== id));
  }
  const openContextMenu = usePlayerStore(s => s.openContextMenu);
@@ -45,7 +50,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;

  return (
    <div className="content-body animate-fade-in" style={{ display: 'flex', flexDirection: 'column', gap: '3rem' }}>
@@ -65,14 +71,14 @@ export default function Favorites() {
            <AlbumRow title={t('favorites.albums')} albums={albums} />
          )}

-          {songs.length > 0 && (
+          {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 = songs.map(songToTrack);
+                    const tracks = visibleSongs.map(songToTrack);
                    playTrack(tracks[0], tracks);
                  }}
                >
@@ -82,7 +88,7 @@ export default function Favorites() {
                <button
                  className="btn btn-surface"
                  onClick={() => {
-                    const tracks = songs.map(songToTrack);
+                    const tracks = visibleSongs.map(songToTrack);
                    enqueue(tracks);
                  }}
                >
@@ -98,14 +104,17 @@ export default function Favorites() {
                  <div className="col-center">{t('albumDetail.trackDuration')}</div>
                  <div />
                </div>
-                {songs.map((song, i) => {
+                {visibleSongs.map((song, i) => {
                  const track = songToTrack(song);
                  return (
                    <div
                      key={song.id}
                      className="track-row track-row-va"
                      style={{ gridTemplateColumns: '40px 1fr 1fr 60px 32px' }}
-                      onDoubleClick={() => playTrack(track, songs.map(songToTrack))}
+                      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"
                      onMouseDown={e => {
@@ -124,15 +133,17 @@ export default function Favorites() {
                        document.addEventListener('mouseup', onUp);
                      }}
                    >
-                      <div className="track-num col-center" onClick={() => playTrack(track, songs.map(songToTrack))} style={{ cursor: 'pointer' }}>
-                        {i + 1}
+                      <div className={`track-num${currentTrack?.id === song.id ? ' track-num-active' : ''}`} 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>
                      <div className="track-info">
                        <span className="track-title">{song.title}</span>
                      </div>
                      <div className="track-artist-cell">
                        <span
-                          className="track-artist"
+                          className={`track-artist${song.artistId ? ' track-artist-link' : ''}`}
                          style={{ cursor: song.artistId ? 'pointer' : 'default' }}
                          onClick={() => song.artistId && navigate(`/artist/${song.artistId}`)}
                        >{song.artist}</span>
@@ -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>
@@ -0,0 +1,300 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { Cast, Plus, Trash2, X, Pencil, Check, Globe } from 'lucide-react';
+import {
+  getInternetRadioStations, createInternetRadioStation,
+  updateInternetRadioStation, deleteInternetRadioStation,
+  InternetRadioStation, buildCoverArtUrl, coverArtCacheKey,
+} from '../api/subsonic';
+import { usePlayerStore } from '../store/playerStore';
+import CachedImage from '../components/CachedImage';
+import { useTranslation } from 'react-i18next';
+import { open } from '@tauri-apps/plugin-shell';
+
+export default function InternetRadio() {
+  const { t } = useTranslation();
+  const { playRadio, stop, currentRadio, isPlaying } = usePlayerStore();
+
+  const [stations, setStations] = useState<InternetRadioStation[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  // Add form
+  const [adding, setAdding] = useState(false);
+  const [addName, setAddName] = useState('');
+  const [addUrl, setAddUrl] = useState('');
+  const [addHomepage, setAddHomepage] = useState('');
+  const [addSaving, setAddSaving] = useState(false);
+  const addNameRef = useRef<HTMLInputElement>(null);
+
+  // Edit inline
+  const [editId, setEditId] = useState<string | null>(null);
+  const [editName, setEditName] = useState('');
+  const [editUrl, setEditUrl] = useState('');
+  const [editHomepage, setEditHomepage] = useState('');
+  const [editSaving, setEditSaving] = useState(false);
+
+  // Delete confirm
+  const [deleteConfirmId, setDeleteConfirmId] = useState<string | null>(null);
+
+  useEffect(() => {
+    getInternetRadioStations()
+      .then(setStations)
+      .catch(() => {})
+      .finally(() => setLoading(false));
+  }, []);
+
+  useEffect(() => {
+    if (adding) addNameRef.current?.focus();
+  }, [adding]);
+
+  const reload = async () => {
+    const list = await getInternetRadioStations().catch(() => [] as InternetRadioStation[]);
+    setStations(list);
+  };
+
+  const handleAdd = async () => {
+    if (!addName.trim() || !addUrl.trim()) return;
+    setAddSaving(true);
+    try {
+      await createInternetRadioStation(addName.trim(), addUrl.trim(), addHomepage.trim() || undefined);
+      await reload();
+    } catch {}
+    setAddSaving(false);
+    setAdding(false);
+    setAddName(''); setAddUrl(''); setAddHomepage('');
+  };
+
+  const handleEditStart = (s: InternetRadioStation) => {
+    setEditId(s.id);
+    setEditName(s.name);
+    setEditUrl(s.streamUrl);
+    setEditHomepage(s.homepageUrl ?? '');
+    setDeleteConfirmId(null);
+  };
+
+  const handleEditSave = async () => {
+    if (!editId || !editName.trim() || !editUrl.trim()) return;
+    setEditSaving(true);
+    try {
+      await updateInternetRadioStation(editId, editName.trim(), editUrl.trim(), editHomepage.trim() || undefined);
+      await reload();
+    } catch {}
+    setEditSaving(false);
+    setEditId(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: '0.5rem', alignItems: 'center' }}>
+          {adding ? (
+            <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center', flexWrap: 'wrap' }}>
+              <input
+                ref={addNameRef}
+                className="input"
+                style={{ width: 160 }}
+                placeholder={t('radio.stationName')}
+                value={addName}
+                onChange={e => setAddName(e.target.value)}
+                onKeyDown={e => { if (e.key === 'Enter') handleAdd(); if (e.key === 'Escape') { setAdding(false); setAddName(''); setAddUrl(''); setAddHomepage(''); } }}
+              />
+              <input
+                className="input"
+                style={{ width: 220 }}
+                placeholder={t('radio.streamUrl')}
+                value={addUrl}
+                onChange={e => setAddUrl(e.target.value)}
+                onKeyDown={e => { if (e.key === 'Enter') handleAdd(); if (e.key === 'Escape') { setAdding(false); setAddName(''); setAddUrl(''); setAddHomepage(''); } }}
+              />
+              <input
+                className="input"
+                style={{ width: 160 }}
+                placeholder={t('radio.homepageUrl')}
+                value={addHomepage}
+                onChange={e => setAddHomepage(e.target.value)}
+                onKeyDown={e => { if (e.key === 'Enter') handleAdd(); if (e.key === 'Escape') { setAdding(false); setAddName(''); setAddUrl(''); setAddHomepage(''); } }}
+              />
+              <button className="btn btn-primary" onClick={handleAdd} disabled={addSaving || !addName.trim() || !addUrl.trim()}>
+                {addSaving ? <span className="spinner" style={{ width: 12, height: 12 }} /> : t('radio.save')}
+              </button>
+              <button className="btn btn-surface" onClick={() => { setAdding(false); setAddName(''); setAddUrl(''); setAddHomepage(''); }}>
+                {t('radio.cancel')}
+              </button>
+            </div>
+          ) : (
+            <button className="btn btn-primary" onClick={() => setAdding(true)}>
+              <Plus size={15} /> {t('radio.addStation')}
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* ── Grid ── */}
+      {stations.length === 0 ? (
+        <div className="empty-state">{t('radio.empty')}</div>
+      ) : (
+        <div className="album-grid-wrap">
+          {stations.map(s => {
+            const isActive = currentRadio?.id === s.id;
+            const isEditingThis = editId === s.id;
+
+            return (
+              <div
+                key={s.id}
+                className={`album-card${isActive ? ' radio-card-active' : ''}`}
+                onMouseLeave={() => { if (deleteConfirmId === s.id) setDeleteConfirmId(null); }}
+              >
+                {/* Cover area */}
+                <div className="album-card-cover">
+                  {s.coverArt ? (
+                    <CachedImage
+                      src={buildCoverArtUrl(s.coverArt, 256)}
+                      cacheKey={coverArtCacheKey(s.coverArt, 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>
+                  )}
+
+                  {/* LIVE badge on active station */}
+                  {isActive && isPlaying && (
+                    <div className="radio-live-overlay">
+                      <span className="radio-live-badge">{t('radio.live')}</span>
+                    </div>
+                  )}
+
+                  {/* Play overlay */}
+                  <div className="album-card-play-overlay">
+                    <button
+                      className="album-card-details-btn"
+                      onClick={e => handlePlay(e, s)}
+                    >
+                      {isActive && isPlaying
+                        ? <X size={15} />
+                        : <Cast size={14} />
+                      }
+                    </button>
+                  </div>
+
+                  {/* Delete button */}
+                  <button
+                    className={`playlist-card-delete ${deleteConfirmId === s.id ? 'playlist-card-delete--confirm' : ''}`}
+                    onClick={e => handleDelete(e, s)}
+                    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 / inline edit */}
+                <div className="album-card-info" style={{ padding: '0.5rem 0.6rem 0.4rem' }}>
+                  {isEditingThis ? (
+                    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.3rem' }}>
+                      <input
+                        className="input"
+                        style={{ fontSize: '0.78rem', padding: '0.25rem 0.4rem' }}
+                        value={editName}
+                        placeholder={t('radio.stationName')}
+                        onChange={e => setEditName(e.target.value)}
+                        onKeyDown={e => { if (e.key === 'Enter') handleEditSave(); if (e.key === 'Escape') setEditId(null); }}
+                        autoFocus
+                      />
+                      <input
+                        className="input"
+                        style={{ fontSize: '0.78rem', padding: '0.25rem 0.4rem' }}
+                        value={editUrl}
+                        placeholder={t('radio.streamUrl')}
+                        onChange={e => setEditUrl(e.target.value)}
+                        onKeyDown={e => { if (e.key === 'Enter') handleEditSave(); if (e.key === 'Escape') setEditId(null); }}
+                      />
+                      <input
+                        className="input"
+                        style={{ fontSize: '0.78rem', padding: '0.25rem 0.4rem' }}
+                        value={editHomepage}
+                        placeholder={t('radio.homepageUrl')}
+                        onChange={e => setEditHomepage(e.target.value)}
+                        onKeyDown={e => { if (e.key === 'Enter') handleEditSave(); if (e.key === 'Escape') setEditId(null); }}
+                      />
+                      <div style={{ display: 'flex', gap: '0.3rem', marginTop: '0.1rem' }}>
+                        <button className="btn btn-primary" style={{ flex: 1, padding: '0.2rem 0' }} onClick={handleEditSave} disabled={editSaving}>
+                          {editSaving ? <span className="spinner" style={{ width: 10, height: 10 }} /> : <Check size={12} />}
+                        </button>
+                        <button className="btn btn-surface" style={{ flex: 1, padding: '0.2rem 0' }} onClick={() => setEditId(null)}>
+                          <X size={12} />
+                        </button>
+                      </div>
+                    </div>
+                  ) : (
+                    <>
+                      <div className="album-card-title" style={{ display: 'flex', alignItems: 'center', gap: '0.3rem' }}>
+                        <span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{s.name}</span>
+                        <button
+                          className="player-btn player-btn-sm"
+                          style={{ flexShrink: 0, opacity: 0.6 }}
+                          onClick={() => handleEditStart(s)}
+                          data-tooltip={t('radio.editStation')}
+                        >
+                          <Pencil size={11} />
+                        </button>
+                        {s.homepageUrl && (
+                          <button
+                            className="player-btn player-btn-sm"
+                            style={{ flexShrink: 0, opacity: 0.6 }}
+                            onClick={() => open(s.homepageUrl!)}
+                            data-tooltip={t('radio.openHomepage')}
+                          >
+                            <Globe size={11} />
+                          </button>
+                        )}
+                      </div>
+                      <div className="album-card-artist" style={{ fontSize: '0.7rem', opacity: 0.55, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                        {s.streamUrl}
+                      </div>
+                    </>
+                  )}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
@@ -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 {
@@ -296,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"
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Play, HardDriveDownload, Trash2 } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { useOfflineStore } from '../store/offlineStore';
@@ -7,6 +7,8 @@ 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 ?? '');
@@ -15,26 +17,36 @@ export default function OfflineLibrary() {
  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 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 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);
@@ -45,6 +57,84 @@ const buildTracks = (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">
@@ -57,60 +147,30 @@ const buildTracks = (albumId: string) => {
        </div>
      </div>

-      {albums.length === 0 ? (
+      <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">
-          {albums.map(album => {
-            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.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)}
-                      title="Zur Warteschlange hinzufügen"
-                    >
-                      + 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>
-            );
-          })}
+          {filtered.map(renderCard)}
        </div>
      )}
    </div>
@@ -1,12 +1,16 @@
 import React, { useEffect, useState, useRef, useCallback, useMemo } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
-import { ChevronLeft, Play, ListPlus, Trash2, Search, X, Loader2, Plus, GripVertical, Star, RefreshCw } from 'lucide-react';
+import { ChevronLeft, Play, ListPlus, Trash2, Search, X, Loader2, Plus, GripVertical, Star, RefreshCw, Shuffle, Heart, HardDriveDownload, Check } from 'lucide-react';
+import { AddToPlaylistSubmenu } from '../components/ContextMenu';
 import {
  getPlaylist, updatePlaylist, search, setRating, star, unstar,
-  getSimilarSongs2, SubsonicPlaylist, SubsonicSong,
+  getRandomSongs, SubsonicPlaylist, SubsonicSong,
 } from '../api/subsonic';
 import { usePlayerStore, songToTrack } from '../store/playerStore';
+import { useShallow } from 'zustand/react/shallow';
 import { usePlaylistStore } from '../store/playlistStore';
+import { useOfflineStore } from '../store/offlineStore';
+import { useAuthStore } from '../store/authStore';
 import { useDragDrop } from '../contexts/DragDropContext';
 import CachedImage, { useCachedUrl } from '../components/CachedImage';
 import { coverArtCacheKey, buildCoverArtUrl } from '../api/subsonic';
@@ -53,9 +57,21 @@ export default function PlaylistDetail() {
  const { id } = useParams<{ id: string }>();
  const { t } = useTranslation();
  const navigate = useNavigate();
-  const { playTrack, enqueue, openContextMenu, currentTrack, isPlaying } = usePlayerStore();
+  const { playTrack, enqueue, openContextMenu, currentTrack, isPlaying, starredOverrides, setStarredOverride } = usePlayerStore(
+    useShallow(s => ({
+      playTrack: s.playTrack,
+      enqueue: s.enqueue,
+      openContextMenu: s.openContextMenu,
+      currentTrack: s.currentTrack,
+      isPlaying: s.isPlaying,
+      starredOverrides: s.starredOverrides,
+      setStarredOverride: s.setStarredOverride,
+    }))
+  );
  const touchPlaylist = usePlaylistStore((s) => s.touchPlaylist);
  const { startDrag, isDragging } = useDragDrop();
+  const { downloadPlaylist, isAlbumDownloading, isAlbumDownloaded, getAlbumProgress } = useOfflineStore();
+  const activeServerId = useAuthStore(s => s.activeServerId) ?? '';

  const [playlist, setPlaylist] = useState<SubsonicPlaylist | null>(null);
  const [songs, setSongs] = useState<SubsonicSong[]>([]);
@@ -63,11 +79,50 @@ export default function PlaylistDetail() {
  const [saving, setSaving] = useState(false);
  const [ratings, setRatings] = useState<Record<string, number>>({});
  const [starredSongs, setStarredSongs] = useState<Set<string>>(new Set());
-  const [hoveredSongId, setHoveredSongId] = useState<string | null>(null);
  const [hoveredSuggestionId, setHoveredSuggestionId] = useState<string | null>(null);
  const [contextMenuSongId, setContextMenuSongId] = useState<string | null>(null);
  const contextMenuOpen = usePlayerStore(s => s.contextMenu.isOpen);

+  // ── Bulk select ───────────────────────────────────────────────────
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+  const [lastSelectedIdx, setLastSelectedIdx] = useState<number | null>(null);
+  const [showBulkPlPicker, setShowBulkPlPicker] = useState(false);
+
+  const toggleSelect = (id: string, idx: number, shift: boolean) => {
+    setSelectedIds(prev => {
+      const next = new Set(prev);
+      if (shift && lastSelectedIdx !== null) {
+        const from = Math.min(lastSelectedIdx, idx);
+        const to = Math.max(lastSelectedIdx, idx);
+        songs.slice(from, to + 1).forEach(s => next.add(s.id));
+      } else {
+        next.has(id) ? next.delete(id) : next.add(id);
+      }
+      return next;
+    });
+    setLastSelectedIdx(idx);
+  };
+
+  const allSelected = selectedIds.size === songs.length && songs.length > 0;
+  const toggleAll = () => setSelectedIds(allSelected ? new Set() : new Set(songs.map(s => s.id)));
+
+  const bulkRemove = () => {
+    const prevCount = songs.length;
+    const next = songs.filter(s => !selectedIds.has(s.id));
+    setSongs(next);
+    savePlaylist(next, prevCount);
+    setSelectedIds(new Set());
+  };
+
+  useEffect(() => {
+    if (!showBulkPlPicker) return;
+    const handler = (e: MouseEvent) => {
+      if (!(e.target as HTMLElement).closest('.bulk-pl-picker-wrap')) setShowBulkPlPicker(false);
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [showBulkPlPicker]);
+
  // ── 2×2 cover quad (first 4 unique album covers) ─────────────
  const coverQuad = useMemo(() => {
    const seen = new Set<string>();
@@ -140,15 +195,21 @@ export default function PlaylistDetail() {

  // ── Suggestions ───────────────────────────────────────────────
  const loadSuggestions = useCallback(async (currentSongs: SubsonicSong[]) => {
-    const withArtist = currentSongs.filter(s => s.artistId);
-    if (!withArtist.length) return;
-    const pick = withArtist[Math.floor(Math.random() * withArtist.length)];
+    if (!currentSongs.length) return;
+    // Count genres across playlist songs, pick the most common one
+    const genreCounts: Record<string, number> = {};
+    for (const s of currentSongs) {
+      if (s.genre) genreCounts[s.genre] = (genreCounts[s.genre] ?? 0) + 1;
+    }
+    const genres = Object.entries(genreCounts).sort((a, b) => b[1] - a[1]);
+    // Fall back to no genre filter if none of the songs have genre tags
+    const genre = genres.length > 0 ? genres[Math.floor(Math.random() * Math.min(3, genres.length))][0] : undefined;
    const existingIds = new Set(currentSongs.map(s => s.id));
    setLoadingSuggestions(true);
    setSuggestions([]);
    try {
-      const similar = await getSimilarSongs2(pick.artistId!, 25);
-      setSuggestions(similar.filter(s => !existingIds.has(s.id)).slice(0, 10));
+      const random = await getRandomSongs(25, genre);
+      setSuggestions(random.filter(s => !existingIds.has(s.id)).slice(0, 10));
    } catch {}
    setLoadingSuggestions(false);
  }, []);
@@ -159,11 +220,11 @@ export default function PlaylistDetail() {
  }, [playlist?.id]);

  // ── Save ──────────────────────────────────────────────────────
-  const savePlaylist = useCallback(async (updatedSongs: SubsonicSong[]) => {
+  const savePlaylist = useCallback(async (updatedSongs: SubsonicSong[], prevCount = 0) => {
    if (!id) return;
    setSaving(true);
    try {
-      await updatePlaylist(id, updatedSongs.map(s => s.id));
+      await updatePlaylist(id, updatedSongs.map(s => s.id), prevCount);
      if (id) touchPlaylist(id);
    } catch {}
    setSaving(false);
@@ -171,9 +232,10 @@ export default function PlaylistDetail() {

  // ── Remove ────────────────────────────────────────────────────
  const removeSong = (idx: number) => {
+    const prevCount = songs.length;
    const next = songs.filter((_, i) => i !== idx);
    setSongs(next);
-    savePlaylist(next);
+    savePlaylist(next, prevCount);
  };

  // ── Add ───────────────────────────────────────────────────────
@@ -194,12 +256,13 @@ export default function PlaylistDetail() {

  const handleToggleStar = (song: SubsonicSong, e: React.MouseEvent) => {
    e.stopPropagation();
-    const isStarred = starredSongs.has(song.id);
+    const isStarred = song.id in starredOverrides ? starredOverrides[song.id] : starredSongs.has(song.id);
    setStarredSongs(prev => {
      const next = new Set(prev);
      isStarred ? next.delete(song.id) : next.add(song.id);
      return next;
    });
+    setStarredOverride(song.id, !isStarred);
    (isStarred ? unstar(song.id, 'song') : star(song.id, 'song')).catch(() => {});
  };

@@ -286,6 +349,10 @@ export default function PlaylistDetail() {
    document.addEventListener('mouseup', onUp);
  };

+  // ── Memoized derivations ──────────────────────────────────────
+  const existingIds = useMemo(() => new Set(songs.map(s => s.id)), [songs]);
+  const tracks = useMemo(() => songs.map(songToTrack), [songs]);
+
  // ── Drag-over visual feedback ─────────────────────────────────
  const handleRowMouseEnter = (idx: number, e: React.MouseEvent) => {
    if (!isDragging) return;
@@ -307,8 +374,6 @@ export default function PlaylistDetail() {
    return <div className="content-body"><div className="empty-state">{t('playlists.notFound')}</div></div>;
  }

-  const existingIds = new Set(songs.map(s => s.id));
-
  return (
    <div className="content-body animate-fade-in">

@@ -347,7 +412,6 @@ export default function PlaylistDetail() {
                  <button className="btn btn-primary" disabled={songs.length === 0} onClick={() => {
                    if (!songs.length) return;
                    touchPlaylist(id!);
-                    const tracks = songs.map(songToTrack);
                    playTrack(tracks[0], tracks);
                  }}>
                    <Play size={16} fill="currentColor" /> {t('playlists.playAll')}
@@ -355,7 +419,19 @@ export default function PlaylistDetail() {
                  <button className="btn btn-surface" disabled={songs.length === 0} onClick={() => {
                    if (!songs.length) return;
                    touchPlaylist(id!);
-                    enqueue(songs.map(songToTrack));
+                    const shuffled = [...tracks];
+                    for (let i = shuffled.length - 1; i > 0; i--) {
+                      const j = Math.floor(Math.random() * (i + 1));
+                      [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
+                    }
+                    playTrack(shuffled[0], shuffled);
+                  }}>
+                    <Shuffle size={16} /> {t('playlists.shuffle', 'Shuffle')}
+                  </button>
+                  <button className="btn btn-surface" disabled={songs.length === 0} onClick={() => {
+                    if (!songs.length) return;
+                    touchPlaylist(id!);
+                    enqueue(tracks);
                  }}>
                    <ListPlus size={16} /> {t('playlists.addToQueue')}
                  </button>
@@ -366,6 +442,25 @@ export default function PlaylistDetail() {
                >
                  <Search size={16} /> {t('playlists.addSongs')}
                </button>
+                {songs.length > 0 && id && (() => {
+                  const isDownloading = isAlbumDownloading(id);
+                  const isCached = isAlbumDownloaded(id, activeServerId);
+                  const progress = isDownloading ? getAlbumProgress(id) : null;
+                  return (
+                    <button
+                      className="btn btn-ghost"
+                      disabled={isDownloading}
+                      onClick={() => { if (playlist) downloadPlaylist(id, playlist.name, playlist.coverArt, songs, activeServerId); }}
+                      data-tooltip={isDownloading
+                        ? t('albumDetail.offlineDownloading', { n: progress?.done ?? 0, total: progress?.total ?? 0 })
+                        : isCached ? t('playlists.offlineCached') : t('playlists.cacheOffline')}
+                    >
+                      {isDownloading
+                        ? <div className="spinner" style={{ width: 14, height: 14, borderTopColor: 'currentColor' }} />
+                        : isCached ? <Check size={16} /> : <HardDriveDownload size={16} />}
+                    </button>
+                  );
+                })()}
              </div>
            </div>
          </div>
@@ -394,20 +489,13 @@ export default function PlaylistDetail() {
            <div className="empty-state" style={{ padding: '0.5rem 0' }}>{t('playlists.noResults')}</div>
          )}
          {searchResults.map(song => (
-            <div key={song.id} className="playlist-search-row">
+            <div key={song.id} className="playlist-search-row" style={{ cursor: 'pointer' }} onClick={() => addSong(song)}>
              <CachedImage src={buildCoverArtUrl(song.coverArt ?? '', 40)} cacheKey={coverArtCacheKey(song.coverArt ?? '', 40)} alt="" className="playlist-search-thumb" />
              <div className="playlist-search-info">
                <span className="playlist-search-title">{song.title}</span>
                <span className="playlist-search-artist">{song.artist} · <span className="playlist-search-album">{song.album}</span></span>
              </div>
              <span className="playlist-search-duration">{formatDuration(song.duration ?? 0)}</span>
-              <button
-                className="playlist-search-add-btn"
-                data-tooltip={t('playlists.addSong')}
-                onClick={() => addSong(song)}
-              >
-                <Plus size={14} />
-              </button>
            </div>
          ))}
        </div>
@@ -416,9 +504,53 @@ export default function PlaylistDetail() {
      {/* ── Tracklist ── */}
      <div className="tracklist" ref={tracklistRef}>

+        {/* Bulk action bar */}
+        {selectedIds.size > 0 && (
+          <div className="bulk-action-bar">
+            <span className="bulk-action-count">
+              {t('common.bulkSelected', { count: selectedIds.size })}
+            </span>
+            <div className="bulk-pl-picker-wrap">
+              <button
+                className="btn btn-surface btn-sm"
+                onClick={() => setShowBulkPlPicker(v => !v)}
+              >
+                <ListPlus size={14} />
+                {t('common.bulkAddToPlaylist')}
+              </button>
+              {showBulkPlPicker && (
+                <AddToPlaylistSubmenu
+                  songIds={[...selectedIds]}
+                  onDone={() => { setShowBulkPlPicker(false); setSelectedIds(new Set()); }}
+                  dropDown
+                />
+              )}
+            </div>
+            <button
+              className="btn btn-surface btn-sm"
+              style={{ color: 'var(--danger)' }}
+              onClick={bulkRemove}
+            >
+              <Trash2 size={14} />
+              {t('common.bulkRemoveFromPlaylist')}
+            </button>
+            <button
+              className="btn btn-ghost btn-sm"
+              onClick={() => setSelectedIds(new Set())}
+            >
+              <X size={13} />
+              {t('common.bulkClear')}
+            </button>
+          </div>
+        )}
+
        {/* Header */}
        <div className="tracklist-header tracklist-va tracklist-playlist">
-          <div className="col-center">#</div>
+          <div className="col-center" style={{ cursor: songs.length > 0 ? 'pointer' : undefined }} onClick={songs.length > 0 ? toggleAll : undefined}>
+            {selectedIds.size > 0
+              ? <span className={`bulk-check${allSelected ? ' checked' : ''}`} />
+              : '#'}
+          </div>
          <div>{t('albumDetail.trackTitle')}</div>
          <div>{t('albumDetail.trackArtist')}</div>
          <div className="col-center">{t('albumDetail.trackFavorite')}</div>
@@ -429,25 +561,32 @@ export default function PlaylistDetail() {
        </div>

        {songs.length === 0 && (
-          <div className="empty-state" style={{ padding: '2rem 0' }}>{t('playlists.emptyPlaylist')}</div>
+          <div className="empty-state" style={{ padding: '2rem 0', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '1rem' }}>
+            <span>{t('playlists.emptyPlaylist')}</span>
+            <button className="btn btn-primary" onClick={() => setSearchOpen(true)}>
+              <Search size={15} />
+              {t('playlists.addFirstSong')}
+            </button>
+          </div>
        )}

        {songs.map((song, idx) => (
          <React.Fragment key={song.id + idx}>
-            {/* Drop indicator above row */}
            {isDragging && dropTargetIdx?.idx === idx && dropTargetIdx.before && (
              <div className="playlist-drop-indicator" />
            )}
-
            <div
              data-track-idx={idx}
-              className={`track-row track-row-va tracklist-playlist${currentTrack?.id === song.id ? ' active' : ''}${contextMenuSongId === song.id ? ' context-active' : ''}`}
-              onMouseEnter={e => { setHoveredSongId(song.id); handleRowMouseEnter(idx, e); }}
-              onMouseLeave={() => setHoveredSongId(null)}
+              className={`track-row track-row-va tracklist-playlist${currentTrack?.id === song.id ? ' active' : ''}${contextMenuSongId === song.id ? ' context-active' : ''}${selectedIds.has(song.id) ? ' bulk-selected' : ''}`}
+              onMouseEnter={e => handleRowMouseEnter(idx, e)}
              onMouseDown={e => handleRowMouseDown(e, idx)}
-              onDoubleClick={() => {
-                const tracks = songs.map(songToTrack);
-                playTrack(tracks[idx], tracks);
+              onClick={e => {
+                if ((e.target as HTMLElement).closest('button, a, input')) return;
+                if (selectedIds.size > 0) {
+                  toggleSelect(song.id, idx, e.shiftKey);
+                } else {
+                  playTrack(tracks[idx], tracks);
+                }
              }}
              onContextMenu={e => {
                e.preventDefault();
@@ -455,20 +594,28 @@ export default function PlaylistDetail() {
                openContextMenu(e.clientX, e.clientY, songToTrack(song), 'album-song');
              }}
            >
-              {/* # — play on click, grip icon on hover */}
-              <div
-                className="track-num"
-                style={{ cursor: 'pointer', color: (hoveredSongId === song.id || currentTrack?.id === song.id) ? 'var(--accent)' : undefined }}
-                onClick={() => { const tracks = songs.map(songToTrack); playTrack(tracks[idx], tracks); }}
-              >
-                {hoveredSongId === song.id && currentTrack?.id !== song.id
-                  ? <GripVertical size={13} />
-                  : currentTrack?.id === song.id && isPlaying
-                    ? <div className="eq-bars"><span className="eq-bar" /><span className="eq-bar" /><span className="eq-bar" /></div>
-                    : currentTrack?.id === song.id
-                      ? <Play size={13} fill="currentColor" />
-                      : idx + 1}
-              </div>
+              {/* # — checkbox in select mode, always-visible play button otherwise */}
+              {(() => {
+                const inSelectMode = selectedIds.size > 0;
+                return (
+                  <div
+                    className={`track-num${currentTrack?.id === song.id ? ' track-num-active' : ''}`}
+                    style={{ cursor: 'pointer' }}
+                    onClick={e => {
+                      e.stopPropagation();
+                      playTrack(tracks[idx], tracks);
+                    }}
+                  >
+                    <span
+                      className={`bulk-check${selectedIds.has(song.id) ? ' checked' : ''}${inSelectMode ? ' bulk-check-visible' : ''}`}
+                      onClick={e => { e.stopPropagation(); toggleSelect(song.id, idx, 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">{idx + 1}</span>
+                  </div>
+                );
+              })()}

              {/* Title */}
              <div className="track-info">
@@ -477,7 +624,11 @@ export default function PlaylistDetail() {

              {/* Artist */}
              <div className="track-artist-cell">
-                <span className="track-artist">{song.artist}</span>
+                <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>

              {/* Favorite */}
@@ -485,9 +636,9 @@ export default function PlaylistDetail() {
                <button
                  className="btn btn-ghost track-star-btn"
                  onClick={e => handleToggleStar(song, e)}
-                  style={{ color: starredSongs.has(song.id) ? 'var(--color-star-active, var(--accent))' : 'var(--color-star-inactive, var(--text-muted))' }}
+                  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))' }}
                >
-                  <Star size={14} fill={starredSongs.has(song.id) ? 'currentColor' : 'none'} />
+                  <Heart size={14} fill={(song.id in starredOverrides ? starredOverrides[song.id] : starredSongs.has(song.id)) ? 'currentColor' : 'none'} />
                </button>
              </div>

@@ -514,8 +665,6 @@ export default function PlaylistDetail() {
                </button>
              </div>
            </div>
-
-            {/* Drop indicator below last row or between rows */}
            {isDragging && dropTargetIdx?.idx === idx && !dropTargetIdx.before && (
              <div className="playlist-drop-indicator" />
            )}
@@ -569,7 +718,10 @@ export default function PlaylistDetail() {
                className={`track-row track-row-va tracklist-playlist${contextMenuSongId === song.id ? ' context-active' : ''}`}
                onMouseEnter={() => setHoveredSuggestionId(song.id)}
                onMouseLeave={() => setHoveredSuggestionId(null)}
-                onDoubleClick={() => addSong(song)}
+                onClick={e => {
+                  if ((e.target as HTMLElement).closest('button, a, input')) return;
+                  addSong(song);
+                }}
                onContextMenu={e => {
                  e.preventDefault();
                  setContextMenuSongId(song.id);
@@ -583,7 +735,11 @@ export default function PlaylistDetail() {
                  <span className="track-title">{song.title}</span>
                </div>
                <div className="track-artist-cell">
-                  <span className="track-artist">{song.artist}</span>
+                  <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>
                {/* no star/rating for suggestions */}
                <div />
@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { ListMusic, Play, Plus, X } from 'lucide-react';
+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';
@@ -172,7 +172,7 @@ export default function Playlists() {
                  data-tooltip={deleteConfirmId === pl.id ? t('playlists.confirmDelete') : t('playlists.deletePlaylist')}
                  data-tooltip-pos="bottom"
                >
-                  <X size={12} />
+                  {deleteConfirmId === pl.id ? <Trash2 size={12} /> : <X size={12} />}
                </button>
              </div>

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { getRandomSongs, getGenres, SubsonicSong, SubsonicGenre, star, unstar } from '../api/subsonic';
 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';

@@ -28,6 +28,10 @@ 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());
@@ -105,11 +109,12 @@ export default function RandomMix() {

  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');
@@ -117,6 +122,7 @@ export default function RandomMix() {
    } catch (err) {
      console.error('Failed to toggle song star', err);
      setStarredSongs(new Set(starredSongs));
+      setStarredOverride(song.id, currentlyStarred);
    }
  };

@@ -319,19 +325,28 @@ 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(80px, 1.5fr) minmax(60px, 1fr) minmax(60px, 1fr) 70px 60px' }}>
+                <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 => {
+              {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${contextMenuSongId === song.id ? ' context-active' : ''}`} style={{ gridTemplateColumns: '36px 1fr 1fr 1fr 120px 80px' }}
-                    onDoubleClick={() => playTrack(track, genreMixSongs.map(songToTrack))} role="row"
+                  <div
+                    key={song.id}
+                    className={`track-row${isCurrentTrack ? ' active' : ''}${contextMenuSongId === song.id ? ' context-active' : ''}`}
+                    style={{ gridTemplateColumns: '60px minmax(80px, 1.5fr) minmax(60px, 1fr) minmax(60px, 1fr) 70px 60px' }}
+                    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;
@@ -349,21 +364,49 @@ export default function RandomMix() {
                      document.addEventListener('mouseup', onUp);
                    }}
                  >
-                  <button className="btn btn-ghost" style={{ padding: 4 }} onClick={e => { e.stopPropagation(); playTrack(track, genreMixSongs.map(songToTrack)); }}>
-                    <Play size={14} fill="currentColor" />
-                  </button>
-                  <div className="track-info"><span className="track-title">{song.title}</span></div>
-                  <div className="track-artist-cell"><span className="track-artist">{song.artist}</span></div>
-                  <div className="track-info"><span className="track-title" style={{ fontSize: '0.85rem', color: 'var(--subtext0)' }}>{song.album}</span></div>
-                  <div style={{ fontSize: 12, color: 'var(--text-muted)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{song.genre ?? '—'}</div>
-                 <span className="track-duration" style={{ textAlign: 'right' }}>{formatDuration(song.duration)}</span>
-                 </div>
-                 );
-               })}
-             </div>
-           )}
-         </div>
-       )}
+                    <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>
+      )}

      {!selectedGenre && (loading && songs.length === 0 ? (
        <div style={{ display: 'flex', justifyContent: 'center', padding: '4rem' }}>
@@ -371,26 +414,37 @@ export default function RandomMix() {
        </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(80px, 1.5fr) minmax(60px, 1fr) minmax(60px, 1fr) 120px 70px 60px' }}>
+            <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) => {
+          {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${contextMenuSongId === song.id ? ' context-active' : ''}`}
-                style={{ gridTemplateColumns: '36px 1fr 1fr 1fr 120px 60px 80px' }}
-                onDoubleClick={() => playTrack(track, filteredSongs.map(songToTrack))}
+                className={`track-row${isCurrentTrack ? ' active' : ''}${contextMenuSongId === song.id ? ' context-active' : ''}`}
+                style={{ gridTemplateColumns: '60px minmax(80px, 1.5fr) minmax(60px, 1fr) minmax(60px, 1fr) 120px 70px 60px' }}
+                onClick={e => { if ((e.target as HTMLElement).closest('button, a, input')) return; playTrack(track, queueSongs); }}
                role="row"
                onContextMenu={e => {
                  e.preventDefault();
@@ -413,124 +467,71 @@ export default function RandomMix() {
                  document.addEventListener('mouseup', onUp);
                }}
              >
-              <button
-                className="btn btn-ghost"
-                style={{ padding: 4 }}
-                onClick={(e) => { e.stopPropagation(); playTrack(songToTrack(song), filteredSongs.map(songToTrack)); }}
-                data-tooltip={t('randomMix.play')}
-              >
-                <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">
-                {(() => {
-                  const artist = song.artist;
-                  if (!artist) return <span className="track-artist">—</span>;
-                  const isBlocked = customGenreBlacklist.some(bg => artist.toLowerCase().includes(bg.toLowerCase()));
-                  const justAdded = addedArtist === artist;
-                  return (
+                <div className="track-artist-cell">
+                  {artist ? (
                    <button
-                      className="btn btn-ghost track-artist"
-                      style={{
-                        fontSize: 'inherit',
-                        padding: '1px 6px',
-                        borderRadius: 'var(--radius-sm)',
-                        background: isBlocked ? 'color-mix(in srgb, var(--danger) 15%, transparent)' : justAdded ? 'color-mix(in srgb, var(--accent) 15%, transparent)' : 'transparent',
-                        color: isBlocked ? 'var(--danger)' : justAdded ? 'var(--accent)' : 'var(--text-secondary)',
-                        border: 'none',
-                        cursor: isBlocked ? 'default' : 'pointer',
-                        maxWidth: '100%',
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                        whiteSpace: 'nowrap',
-                        height: 'auto',
-                        minHeight: 'unset',
-                        textAlign: 'left',
-                      }}
+                      className={`rm-artist-btn${isArtistBlocked ? ' is-blocked' : isArtistJustAdded ? ' just-added' : ''}`}
                      onClick={() => {
-                        if (isBlocked) return;
-                        const already = customGenreBlacklist.some(bg => artist.toLowerCase().includes(bg.toLowerCase()));
-                        if (!already) {
+                        if (isArtistBlocked) return;
+                        if (!customGenreBlacklist.some(bg => artist.toLowerCase().includes(bg.toLowerCase()))) {
                          setCustomGenreBlacklist([...customGenreBlacklist, artist]);
                          setAddedArtist(artist);
                          setTimeout(() => setAddedArtist(null), 1500);
                        }
                      }}
-                      data-tooltip={isBlocked ? t('randomMix.artistBlocked') : justAdded ? t('randomMix.artistAddedToBlacklist') : t('randomMix.artistClickHint')}
-                    >
-                      {artist}
-                    </button>
-                  );
-                })()}
-              </div>
+                      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>
-       ))}
+            );
+          })}
+        </div>
+      ))}

    </div>
  );
@@ -5,7 +5,7 @@ import { useNavigate, useLocation } from 'react-router-dom';
 import {
  Wifi, WifiOff, Globe, Music2, Sliders, LogOut, CheckCircle2, FolderOpen,
  Palette, Server, Plus, Trash2, Eye, EyeOff, Info, ExternalLink, Shuffle, X, Play, Type, Keyboard, ChevronDown,
-  GripVertical, PanelLeft, RotateCcw
+  GripVertical, PanelLeft, RotateCcw, LayoutGrid, AppWindow
 } from 'lucide-react';
 import { invoke } from '@tauri-apps/api/core';
 import { open as openUrl } from '@tauri-apps/plugin-shell';
@@ -21,6 +21,7 @@ import { useFontStore, FontId } from '../store/fontStore';
 import { useKeybindingsStore, KeyAction, formatKeyCode, DEFAULT_BINDINGS } from '../store/keybindingsStore';
 import { useGlobalShortcutsStore, GlobalAction, buildGlobalShortcut, formatGlobalShortcut } from '../store/globalShortcutsStore';
 import { useSidebarStore, DEFAULT_SIDEBAR_ITEMS, SidebarItemConfig } from '../store/sidebarStore';
+import { useHomeStore, HomeSectionId } from '../store/homeStore';
 import { useDragDrop, useDragSource } from '../contexts/DragDropContext';
 import { ALL_NAV_ITEMS } from '../components/Sidebar';
 import { pingWithCredentials } from '../api/subsonic';
@@ -54,6 +55,31 @@ const CONTRIBUTORS = [
      'songToTrack() — unified track construction across all sources',
    ],
  },
+  {
+    github: 'nisarg-78',
+    since: '1.29.0',
+    contributions: [
+      'Click-to-seek in synced lyrics (PR #38)',
+      'Volume scroll wheel on volume slider (PR #38)',
+      'Lyrics line visual states: active / completed / upcoming (PR #38)',
+    ],
+  },
+  {
+    github: 'JulianNymark',
+    since: '1.29.0',
+    contributions: [
+      'OGG/Vorbis container support via symphonia-format-ogg (PR #42)',
+      'Themed toast notifications for audio playback errors (PR #43)',
+      'Human-readable audio error messages (PR #44)',
+    ],
+  },
+] as const;
+
+const SPECIAL_THANKS = [
+  {
+    github: 'netherguy4',
+    reason: 'Countless constructive feature ideas and thoughtful feedback',
+  },
 ] as const;

 type Tab = 'playback' | 'library' | 'appearance' | 'shortcuts' | 'server' | 'about';
@@ -413,6 +439,8 @@ export default function Settings() {
                  <span className="toggle-track" />
                </label>
              </div>
+
+
            </div>
          </section>

@@ -425,7 +453,7 @@ export default function Settings() {
          {/* Cache */}
          <section className="settings-section">
            <div className="settings-section-header">
-              <Sliders size={18} />
+              <AppWindow size={18} />
              <h2>{t('settings.behavior')}</h2>
            </div>
            <div className="settings-card">
@@ -562,6 +590,8 @@ export default function Settings() {
              </div>
            </div>
          </section>
+
+          <HomeCustomizer />
        </>
      )}

@@ -817,6 +847,9 @@ export default function Settings() {
              <Server size={18} />
              <h2>{t('settings.servers')}</h2>
            </div>
+            <div style={{ fontSize: 12, color: 'var(--text-muted)', marginBottom: '0.75rem' }}>
+              {t('settings.serverCompatible')}
+            </div>

            {auth.servers.length === 0 && !showAddForm ? (
              <div className="settings-card" style={{ color: 'var(--text-muted)', fontSize: 14 }}>
@@ -846,7 +879,7 @@ export default function Settings() {
                          {status === 'error' && <WifiOff size={16} style={{ color: 'var(--danger)' }} />}
                          {status === 'testing' && <div className="spinner" style={{ width: 16, height: 16 }} />}
                          <button
-                            className="btn btn-ghost"
+                            className="btn btn-surface"
                            style={{ fontSize: 12, padding: '4px 10px' }}
                            onClick={() => testConnection(srv)}
                            disabled={status === 'testing'}
@@ -885,7 +918,7 @@ export default function Settings() {
            {showAddForm ? (
              <AddServerForm onSave={handleAddServer} onCancel={() => setShowAddForm(false)} />
            ) : (
-              <button className="btn btn-ghost" style={{ marginTop: '0.75rem' }} onClick={() => setShowAddForm(true)} id="settings-add-server-btn">
+              <button className="btn btn-surface" style={{ marginTop: '0.75rem' }} onClick={() => setShowAddForm(true)} id="settings-add-server-btn">
                <Plus size={16} /> {t('settings.addServer')}
              </button>
            )}
@@ -963,7 +996,7 @@ export default function Settings() {
          {/* Downloads + Tray */}
          <section className="settings-section">
            <div className="settings-section-header">
-              <Sliders size={18} />
+              <AppWindow size={18} />
              <h2>{t('settings.behavior')}</h2>
            </div>
            <div className="settings-card">
@@ -978,6 +1011,39 @@ export default function Settings() {
                </label>
              </div>
              <div className="settings-section-divider" />
+              <div className="settings-toggle-row">
+                <div>
+                  <div style={{ fontWeight: 500 }}>{t('settings.showArtistImages')}</div>
+                  <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>{t('settings.showArtistImagesDesc')}</div>
+                </div>
+                <label className="toggle-switch" aria-label={t('settings.showArtistImages')}>
+                  <input type="checkbox" checked={auth.showArtistImages} onChange={e => auth.setShowArtistImages(e.target.checked)} />
+                  <span className="toggle-track" />
+                </label>
+              </div>
+              <div className="settings-section-divider" />
+              <div className="settings-toggle-row">
+                <div>
+                  <div style={{ fontWeight: 500 }}>{t('settings.discordRichPresence')}</div>
+                  <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>{t('settings.discordRichPresenceDesc')}</div>
+                </div>
+                <label className="toggle-switch" aria-label={t('settings.discordRichPresence')}>
+                  <input type="checkbox" checked={auth.discordRichPresence} onChange={e => auth.setDiscordRichPresence(e.target.checked)} />
+                  <span className="toggle-track" />
+                </label>
+              </div>
+              <div className="settings-section-divider" />
+              <div className="settings-toggle-row">
+                <div>
+                  <div style={{ fontWeight: 500 }}>{t('settings.nowPlayingEnabled')}</div>
+                  <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>{t('settings.nowPlayingEnabledDesc')}</div>
+                </div>
+                <label className="toggle-switch" aria-label={t('settings.nowPlayingEnabled')}>
+                  <input type="checkbox" checked={auth.nowPlayingEnabled} onChange={e => auth.setNowPlayingEnabled(e.target.checked)} />
+                  <span className="toggle-track" />
+                </label>
+              </div>
+              <div className="settings-section-divider" />
              <div className="settings-toggle-row">
                <div>
                  <div style={{ fontWeight: 500 }}>{t('settings.downloadsTitle')}</div>
@@ -997,7 +1063,7 @@ export default function Settings() {
                      <X size={16} />
                    </button>
                  )}
-                  <button className="btn btn-ghost" onClick={pickDownloadFolder} id="settings-download-folder-btn">
+                  <button className="btn btn-surface" onClick={pickDownloadFolder} id="settings-download-folder-btn">
                    <FolderOpen size={16} /> {t('settings.pickFolder')}
                  </button>
                </div>
@@ -1096,6 +1162,28 @@ export default function Settings() {
                    </div>
                  )}
                </div>
+                <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'flex-start' }}>
+                  <span style={{ color: 'var(--text-muted)', minWidth: 56, flexShrink: 0, paddingTop: 2, fontSize: 13 }}>{t('settings.aboutSpecialThanksLabel')}</span>
+                  <div style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem', flex: 1 }}>
+                    {SPECIAL_THANKS.map(s => (
+                      <div key={s.github} style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+                        <img
+                          src={`https://github.com/${s.github}.png?size=32`}
+                          width={22} height={22}
+                          style={{ borderRadius: '50%', flexShrink: 0 }}
+                          alt={s.github}
+                        />
+                        <button
+                          style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0, color: 'var(--accent)', fontWeight: 600, fontSize: 13 }}
+                          onClick={() => openUrl(`https://github.com/${s.github}`)}
+                        >
+                          @{s.github}
+                        </button>
+                        <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>— {s.reason}</span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
              </div>

              <button
@@ -1138,10 +1226,53 @@ function renderInline(text: string): React.ReactNode[] {
  });
 }

-function SidebarGripHandle({ idx, label }: { idx: number; label: string }) {
+function HomeCustomizer() {
+  const { t } = useTranslation();
+  const { sections, toggleSection, reset } = useHomeStore();
+
+  const SECTION_LABELS: Record<HomeSectionId, string> = {
+    hero:            t('home.hero'),
+    recent:          t('home.recent'),
+    discover:        t('home.discover'),
+    discoverArtists: t('home.discoverArtists'),
+    recentlyPlayed:  t('home.recentlyPlayed'),
+    starred:         t('home.starred'),
+    mostPlayed:      t('home.mostPlayed'),
+  };
+
+  return (
+    <section className="settings-section">
+      <div className="settings-section-header">
+        <LayoutGrid size={18} />
+        <h2>{t('settings.homeCustomizerTitle')}</h2>
+        <button
+          className="btn btn-ghost"
+          style={{ marginLeft: 'auto', fontSize: 12, color: 'var(--text-muted)' }}
+          onClick={reset}
+          data-tooltip={t('settings.sidebarReset')}
+        >
+          <RotateCcw size={14} />
+        </button>
+      </div>
+      <div className="settings-card" style={{ padding: '4px 0' }}>
+        {sections.map(sec => (
+          <div key={sec.id} className="settings-toggle-row" style={{ padding: '8px 16px' }}>
+            <span style={{ fontSize: 14 }}>{SECTION_LABELS[sec.id]}</span>
+            <label className="toggle-switch" aria-label={SECTION_LABELS[sec.id]}>
+              <input type="checkbox" checked={sec.visible} onChange={() => toggleSection(sec.id)} />
+              <span className="toggle-track" />
+            </label>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+function SidebarGripHandle({ idx, section, label }: { idx: number; section: 'library' | 'system'; label: string }) {
  const { t } = useTranslation();
  const { onMouseDown } = useDragSource(() => ({
-    data: JSON.stringify({ type: 'sidebar_reorder', index: idx }),
+    data: JSON.stringify({ type: 'sidebar_reorder', index: idx, section }),
    label,
  }));
  return (
@@ -1156,69 +1287,103 @@ function SidebarGripHandle({ idx, label }: { idx: number; label: string }) {
  );
 }

+type DropTarget = { idx: number; before: boolean; section: 'library' | 'system' } | null;
+
 function SidebarCustomizer() {
  const { t } = useTranslation();
  const { items, setItems, toggleItem, reset } = useSidebarStore();
  const { isDragging: isPsyDragging } = useDragDrop();
-  const listRef = useRef<HTMLDivElement>(null);
-  const [dropTarget, setDropTarget] = useState<{ idx: number; before: boolean } | null>(null);
-  const dropTargetRef = useRef<{ idx: number; before: boolean } | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [dropTarget, setDropTarget] = useState<DropTarget>(null);
+  const dropTargetRef = useRef<DropTarget>(null);
  const itemsRef = useRef(items);
  itemsRef.current = items;

+  const libraryItems = items.filter(cfg => ALL_NAV_ITEMS[cfg.id]?.section === 'library');
+  const systemItems  = items.filter(cfg => ALL_NAV_ITEMS[cfg.id]?.section === 'system');
+
  useEffect(() => {
-    if (!isPsyDragging) {
-      dropTargetRef.current = null;
-      setDropTarget(null);
-    }
+    if (!isPsyDragging) { dropTargetRef.current = null; setDropTarget(null); }
  }, [isPsyDragging]);

  useEffect(() => {
-    const el = listRef.current;
+    const el = containerRef.current;
    if (!el) return;
    const onPsyDrop = (e: Event) => {
      const detail = (e as CustomEvent).detail;
      if (!detail?.data) return;
-      let parsed: { type?: string; index?: number };
+      let parsed: { type?: string; index?: number; section?: string };
      try { parsed = JSON.parse(detail.data); } catch { return; }
-      if (parsed.type !== 'sidebar_reorder' || parsed.index == null) return;
+      if (parsed.type !== 'sidebar_reorder' || parsed.index == null || !parsed.section) return;

      const fromIdx = parsed.index;
+      const fromSection = parsed.section as 'library' | 'system';
      const target = dropTargetRef.current;
-      dropTargetRef.current = null;
-      setDropTarget(null);
-      if (target === null) return;
+      dropTargetRef.current = null; setDropTarget(null);
+      if (!target || target.section !== fromSection) return;

+      const sectionItems = fromSection === 'library' ? [...libraryItems] : [...systemItems];
      const insertBefore = target.before ? target.idx : target.idx + 1;
      if (insertBefore === fromIdx || insertBefore === fromIdx + 1) return;

-      const next = [...itemsRef.current];
-      const [moved] = next.splice(fromIdx, 1);
-      const adjustedInsert = insertBefore > fromIdx ? insertBefore - 1 : insertBefore;
-      next.splice(adjustedInsert, 0, moved);
-      setItems(next);
+      const [moved] = sectionItems.splice(fromIdx, 1);
+      sectionItems.splice(insertBefore > fromIdx ? insertBefore - 1 : insertBefore, 0, moved);
+
+      // Merge reordered section back into flat items array
+      const all = [...itemsRef.current];
+      const positions = all.map((cfg, i) => ({ cfg, i }))
+        .filter(({ cfg }) => ALL_NAV_ITEMS[cfg.id]?.section === fromSection)
+        .map(({ i }) => i);
+      positions.forEach((pos, i) => { all[pos] = sectionItems[i]; });
+      setItems(all);
    };
    el.addEventListener('psy-drop', onPsyDrop);
    return () => el.removeEventListener('psy-drop', onPsyDrop);
-  }, [setItems]);
+  }, [libraryItems, systemItems, setItems]);

  const handleMouseMove = (e: React.MouseEvent) => {
-    if (!isPsyDragging || !listRef.current) return;
-    const rows = listRef.current.querySelectorAll<HTMLElement>('[data-sidebar-idx]');
-    let target: { idx: number; before: boolean } | null = null;
+    if (!isPsyDragging || !containerRef.current) return;
+    const rows = containerRef.current.querySelectorAll<HTMLElement>('[data-sidebar-idx]');
+    let target: DropTarget = null;
    for (const row of rows) {
      const rect = row.getBoundingClientRect();
      const idx = Number(row.dataset.sidebarIdx);
-      if (e.clientY < rect.top + rect.height / 2) {
-        target = { idx, before: true };
-        break;
-      }
-      target = { idx, before: false };
+      const section = row.dataset.sidebarSection as 'library' | 'system';
+      if (e.clientY < rect.top + rect.height / 2) { target = { idx, before: true, section }; break; }
+      target = { idx, before: false, section };
    }
    dropTargetRef.current = target;
    setDropTarget(target);
  };

+  const renderRow = (cfg: SidebarItemConfig, localIdx: number, section: 'library' | 'system') => {
+    const meta = ALL_NAV_ITEMS[cfg.id];
+    if (!meta) return null;
+    const Icon = meta.icon;
+    const isBefore = isPsyDragging && dropTarget?.section === section && dropTarget.idx === localIdx && dropTarget.before;
+    const isAfter  = isPsyDragging && dropTarget?.section === section && dropTarget.idx === localIdx && !dropTarget.before;
+    return (
+      <div
+        key={cfg.id}
+        data-sidebar-idx={localIdx}
+        data-sidebar-section={section}
+        className="sidebar-customizer-row"
+        style={{
+          borderTop:    isBefore ? '2px solid var(--accent)' : undefined,
+          borderBottom: isAfter  ? '2px solid var(--accent)' : undefined,
+        }}
+      >
+        <SidebarGripHandle idx={localIdx} section={section} label={t(meta.labelKey)} />
+        <Icon size={16} style={{ color: 'var(--text-muted)', flexShrink: 0 }} />
+        <span style={{ flex: 1, fontSize: 14 }}>{t(meta.labelKey)}</span>
+        <label className="toggle-switch" aria-label={t(meta.labelKey)}>
+          <input type="checkbox" checked={cfg.visible} onChange={() => toggleItem(cfg.id)} />
+          <span className="toggle-track" />
+        </label>
+      </div>
+    );
+  };
+
  return (
    <section className="settings-section">
      <div className="settings-section-header">
@@ -1233,40 +1398,19 @@ function SidebarCustomizer() {
          <RotateCcw size={14} />
        </button>
      </div>
-      <div
-        className="settings-card"
-        style={{ padding: '4px 0' }}
-        ref={listRef}
-        onMouseMove={handleMouseMove}
-      >
-        {items.map((cfg, idx) => {
-          const meta = ALL_NAV_ITEMS[cfg.id];
-          if (!meta) return null;
-          const Icon = meta.icon;
-          const isBefore = isPsyDragging && dropTarget?.idx === idx && dropTarget.before;
-          const isAfter  = isPsyDragging && dropTarget?.idx === idx && !dropTarget.before;
-          return (
-            <div
-              key={cfg.id}
-              data-sidebar-idx={idx}
-              className="sidebar-customizer-row"
-              style={{
-                borderTop:    isBefore ? '2px solid var(--accent)' : undefined,
-                borderBottom: isAfter  ? '2px solid var(--accent)' : undefined,
-              }}
-            >
-              <SidebarGripHandle idx={idx} label={t(meta.labelKey)} />
-              <Icon size={16} style={{ color: 'var(--text-muted)', flexShrink: 0 }} />
-              <span style={{ flex: 1, fontSize: 14 }}>{t(meta.labelKey)}</span>
-              <label className="toggle-switch" aria-label={t(meta.labelKey)}>
-                <input type="checkbox" checked={cfg.visible} onChange={() => toggleItem(cfg.id)} />
-                <span className="toggle-track" />
-              </label>
-            </div>
-          );
-        })}
-        <div className="sidebar-customizer-fixed-hint">
-          <span>{t('settings.sidebarFixed')}: {t('sidebar.nowPlaying')}, {t('sidebar.settings')}</span>
+      <div ref={containerRef} onMouseMove={handleMouseMove} style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+        {/* Library block */}
+        <div className="settings-card" style={{ padding: '4px 0' }}>
+          <div className="sidebar-customizer-block-label">{t('sidebar.library')}</div>
+          {libraryItems.map((cfg, i) => renderRow(cfg, i, 'library'))}
+        </div>
+        {/* System block */}
+        <div className="settings-card" style={{ padding: '4px 0' }}>
+          <div className="sidebar-customizer-block-label">{t('sidebar.system')}</div>
+          {systemItems.map((cfg, i) => renderRow(cfg, i, 'system'))}
+          <div className="sidebar-customizer-fixed-hint">
+            <span>{t('settings.sidebarFixed')}: {t('sidebar.nowPlaying')}, {t('sidebar.settings')}</span>
+          </div>
        </div>
      </div>
    </section>
@@ -33,7 +33,11 @@ interface AuthState {
  crossfadeEnabled: boolean;
  crossfadeSecs: number;
  gaplessEnabled: boolean;
+  infiniteQueueEnabled: boolean;
+  showArtistImages: boolean;
  minimizeToTray: boolean;
+  discordRichPresence: boolean;
+  nowPlayingEnabled: boolean;
  showChangelogOnUpdate: boolean;
  lastSeenChangelogVersion: string;

@@ -65,7 +69,11 @@ 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;
@@ -98,7 +106,11 @@ 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,
@@ -163,7 +175,11 @@ export const useAuthStore = create<AuthState>()(
      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 }),

@@ -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,
      }),
@@ -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' }
+  )
+);
@@ -1,7 +1,7 @@
 import { create } from 'zustand';
 import { persist, createJSONStorage } from 'zustand/middleware';
 import { invoke } from '@tauri-apps/api/core';
-import { buildStreamUrl } from '../api/subsonic';
+import { buildStreamUrl, getArtist, getAlbum } from '../api/subsonic';
 import type { SubsonicSong } from '../api/subsonic';

 export interface OfflineTrackMeta {
@@ -33,6 +33,7 @@ export interface OfflineAlbumMeta {
  coverArt?: string;
  year?: number;
  trackIds: string[];
+  type?: 'album' | 'playlist' | 'artist';
 }

 export interface DownloadJob {
@@ -49,6 +50,8 @@ 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;
@@ -62,7 +65,10 @@ interface OfflineState {
    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;
@@ -74,6 +80,7 @@ export const useOfflineStore = create<OfflineState>()(
      tracks: {},
      albums: {},
      jobs: [],
+      bulkProgress: {},

      isDownloaded: (trackId, serverId) =>
        !!get().tracks[`${serverId}:${trackId}`],
@@ -110,7 +117,7 @@ export const useOfflineStore = create<OfflineState>()(
        return { done, total: albumJobs.length };
      },

-      downloadAlbum: async (albumId, albumName, albumArtist, coverArt, year, songs, serverId) => {
+      downloadAlbum: async (albumId, albumName, albumArtist, coverArt, year, songs, serverId, type = 'album') => {
        const CONCURRENCY = 2;
        const trackIds = songs.map(s => s.id);

@@ -118,7 +125,7 @@ export const useOfflineStore = create<OfflineState>()(
        set(state => ({
          albums: {
            ...state.albums,
-            [`${serverId}:${albumId}`]: { id: albumId, serverId, name: albumName, artist: albumArtist, coverArt, year, trackIds },
+            [`${serverId}:${albumId}`]: { id: albumId, serverId, name: albumName, artist: albumArtist, coverArt, year, trackIds, type },
          },
          jobs: [
            ...state.jobs.filter(j => j.albumId !== albumId),
@@ -211,6 +218,42 @@ export const useOfflineStore = create<OfflineState>()(
        }, 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;
@@ -2,7 +2,8 @@ import { create } from 'zustand';
 import { persist, createJSONStorage } from 'zustand/middleware';
 import { invoke } from '@tauri-apps/api/core';
 import { listen } from '@tauri-apps/api/event';
-import { buildStreamUrl, buildCoverArtUrl, getPlayQueue, savePlayQueue, reportNowPlaying, scrobbleSong, SubsonicSong, getSong } 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';
@@ -26,6 +27,10 @@ export interface Track {
  replayGainPeak?: number;
  starred?: string;
  genre?: string;
+  samplingRate?: number;
+  bitDepth?: number;
+  autoAdded?: boolean;
+  radioAdded?: boolean;
 }

 export function songToTrack(song: SubsonicSong): Track {
@@ -48,11 +53,14 @@ export function songToTrack(song: SubsonicSong): Track {
    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;
@@ -66,12 +74,13 @@ 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;
@@ -79,6 +88,8 @@ interface PlayerState {
   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;
@@ -112,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 ─────────────────────────────────────────
@@ -125,6 +140,14 @@ 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
@@ -241,14 +264,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);
 }
@@ -294,8 +324,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 => {
@@ -312,12 +342,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);
 }

 /**
@@ -402,9 +436,50 @@ export function initAudioListeners(): () => void {
    }
  });

+  // ── 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()));
  };
 }
@@ -415,6 +490,7 @@ export const usePlayerStore = create<PlayerState>()(
  persist(
    (set, get) => ({
      currentTrack: null,
+      currentRadio: null,
      queue: [],
      queueIndex: 0,
      isPlaying: false,
@@ -439,6 +515,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 })),
@@ -502,11 +582,35 @@ export const usePlayerStore = create<PlayerState>()(
        invoke('audio_stop').catch(console.error);
        isAudioPaused = false;
        if (seekDebounce) { clearTimeout(seekDebounce); seekDebounce = null; } seekTarget = null;
-        set({ isPlaying: false, progress: 0, buffered: 0, currentTime: 0 });
+        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;
+        invoke('audio_play_radio', { url: station.streamUrl, volume }).catch((err: unknown) => {
+          console.error('[psysonic] audio_play_radio 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) {
@@ -547,19 +651,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 => {
@@ -612,6 +717,7 @@ export const usePlayerStore = create<PlayerState>()(
              volume: vol,
              durationHint: trackToPlay.duration,
              replayGainDb: replayGainDbCold,
+              manual: false,
              replayGainPeak: replayGainPeakCold,
            }).then(() => {
              if (playGeneration === gen && currentTime > 1) {
@@ -639,6 +745,7 @@ export const usePlayerStore = create<PlayerState>()(
               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);
@@ -658,17 +765,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 });
+          }
        }
      },

@@ -715,7 +922,42 @@ 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 };
        });
@@ -18,6 +18,7 @@ export const DEFAULT_SIDEBAR_ITEMS: SidebarItemConfig[] = [
  { id: 'randomMix',     visible: true },
  { id: 'favorites',     visible: true },
  { id: 'playlists',     visible: true },
+  { id: 'radio',         visible: true },
  { id: 'statistics',    visible: true },
  { id: 'help',          visible: true },
 ];
@@ -42,6 +43,16 @@ export const useSidebarStore = create<SidebarStore>()(

      reset: () => set({ items: DEFAULT_SIDEBAR_ITEMS }),
    }),
-    { name: 'psysonic_sidebar' }
+    {
+      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];
+        }
+      },
+    }
  )
 );
@@ -723,6 +723,63 @@
  color: var(--color-error, #e05050);
 }

+/* Filter tabs */
+.offline-filter-tabs {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.offline-filter-tab {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 14px;
+  border-radius: 20px;
+  border: 1px solid var(--border);
+  background: none;
+  color: var(--text-secondary);
+  font-size: 13px;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s, border-color 0.15s;
+}
+
+.offline-filter-tab:hover {
+  color: var(--text-primary);
+  border-color: var(--accent);
+}
+
+.offline-filter-tab.active {
+  background: var(--accent);
+  color: var(--ctp-base);
+  border-color: var(--accent);
+  font-weight: 600;
+}
+
+.offline-filter-tab-count {
+  font-size: 11px;
+  opacity: 0.75;
+}
+
+.offline-filter-tab.active .offline-filter-tab-count {
+  opacity: 0.85;
+}
+
+/* Artist discography groups */
+.offline-artist-group {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.offline-artist-group-heading {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--text-primary);
+  padding-bottom: 6px;
+  border-bottom: 1px solid var(--border);
+}
+
 .album-detail {
  display: flex;
  flex-direction: column;
@@ -1076,9 +1133,91 @@
  margin-top: 4px;
 }

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

 .col-center {
@@ -1087,7 +1226,6 @@

 .tracklist-header {
  display: grid;
-  grid-template-columns: 36px minmax(100px, 3fr) 70px 80px 60px 120px;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2) var(--space-3);
@@ -1100,13 +1238,8 @@
  margin-bottom: var(--space-2);
 }

-.tracklist-header.tracklist-va {
-  grid-template-columns: 36px minmax(80px, 1.5fr) minmax(60px, 1fr) 70px 80px 60px 120px;
-}
-
 .track-row {
  display: grid;
-  grid-template-columns: 36px minmax(100px, 3fr) 70px 80px 60px 120px;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2) var(--space-3);
@@ -1114,65 +1247,156 @@
  cursor: pointer;
  transition: background var(--transition-fast);
  user-select: none;
-}
-
-.track-row.track-row-va {
-  grid-template-columns: 36px minmax(80px, 1.5fr) minmax(60px, 1fr) 70px 80px 60px 120px;
+  contain: layout style;
+  overflow: hidden;
 }

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

-.tracklist-total.tracklist-va {
-  grid-template-columns: 36px minmax(80px, 1.5fr) minmax(60px, 1fr) 70px 80px 60px 120px;
-}
-
 .tracklist-total-label {
-  grid-column: 1 / 5;
-  text-align: right;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
+  text-align: right;
 }

 .tracklist-total-value {
-  grid-column: 5 / 6;
-  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
+  text-align: center;
 }

-.tracklist-total.tracklist-va .tracklist-total-label {
-  grid-column: 1 / 6;
+/* ── Column resize handle ── */
+/* Sits at the right edge of each header cell, fully inside the cell bounds */
+.col-resize-handle {
+  position: absolute;
+  right: -4px;
+  top: 0;
+  bottom: 0;
+  width: 8px;
+  cursor: col-resize;
+  z-index: 2;
 }

-.tracklist-total.tracklist-va .tracklist-total-value {
-  grid-column: 6 / 7;
+.col-resize-handle::after {
+  content: '';
+  position: absolute;
+  left: 3px;
+  top: 20%;
+  bottom: 20%;
+  width: 2px;
+  border-radius: 1px;
+  background: var(--ctp-surface1);
+  transition: background 0.15s;
+}
+
+.col-resize-handle:hover::after,
+.col-resize-handle:active::after {
+  background: var(--accent);
+}
+
+/* ── Column visibility picker ── */
+.tracklist-col-picker {
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  padding-right: 4px;
+}
+
+.tracklist-col-picker-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: var(--radius-sm);
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  opacity: 0.5;
+  transition: opacity 0.15s, background 0.15s;
+}
+
+.tracklist-col-picker-btn:hover {
+  opacity: 1;
+  background: var(--ctp-surface0);
+  color: var(--text-primary);
+}
+
+.tracklist-col-picker-menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  background: var(--bg-card);
+  border: 1px solid var(--ctp-surface1);
+  border-radius: var(--radius-md);
+  padding: 6px;
+  min-width: 160px;
+  z-index: 200;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
+}
+
+.tracklist-col-picker-label {
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  padding: 4px 8px 6px;
+}
+
+.tracklist-col-picker-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 5px 8px;
+  border-radius: var(--radius-sm);
+  background: none;
+  border: none;
+  color: var(--text-secondary);
+  cursor: pointer;
+  font-size: 13px;
+  text-align: left;
+  transition: background 0.1s;
+}
+
+.tracklist-col-picker-item:hover {
+  background: var(--ctp-surface0);
+  color: var(--text-primary);
+}
+
+.tracklist-col-picker-item.active {
+  color: var(--accent);
+}
+
+.tracklist-col-picker-check {
+  width: 16px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--accent);
 }

 /* ── Playlist tracklist variant — adds delete column ── */
 .tracklist-header.tracklist-playlist,
-.track-row.tracklist-playlist,
-.tracklist-total.tracklist-playlist {
-  grid-template-columns: 36px minmax(80px, 1.5fr) minmax(60px, 1fr) 70px 80px 60px 120px 36px;
-}
-
-.tracklist-total.tracklist-playlist .tracklist-total-label {
-  grid-column: 1 / 6;
-}
-
-.tracklist-total.tracklist-playlist .tracklist-total-value {
-  grid-column: 6 / 7;
+.track-row.tracklist-playlist {
+  grid-template-columns: 60px minmax(80px, 1.5fr) minmax(60px, 1fr) 70px 80px 60px 80px 80px 36px;
 }

 /* Delete button in playlist row */
@@ -1247,10 +1471,64 @@
 }

 .track-num {
+  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
 }
+.track-num .bulk-check {
+  position: absolute;
+  left: 0;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.1s;
+}
+.track-num .bulk-check.bulk-check-visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+.track-row:hover .track-num .bulk-check {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* Default: show track number */
+.track-num-number {
+  font-size: 13px;
+  color: var(--text-muted);
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+}
+
+/* Play icon: hidden by default */
+.track-num-play {
+  display: none;
+  align-items: center;
+  color: var(--text-primary);
+}
+
+/* Eq-bars wrapper */
+.track-num-eq {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+/* ── Hover (non-active row): hide number, show play icon ── */
+.track-row:hover .track-num-number       { display: none; }
+.track-row:hover .track-num-play         { display: flex; }
+
+/* ── Active (currently playing): hide number, show eq-bars ── */
+.track-num.track-num-active .track-num-number { display: none; }
+.track-num.track-num-active .track-num-number { color: var(--accent); } /* kept for when visible */
+
+/* ── Active + hover: hide eq-bars, show play icon ── */
+.track-row:hover .track-num.track-num-active .track-num-eq  { display: none; }
+.track-row:hover .track-num.track-num-active .track-num-play { display: flex; }
+
+/* Paused state: show play icon statically (no hover needed) */
+.track-num.track-num-paused .track-num-play { display: flex; opacity: 0.5; }
+.track-row:hover .track-num.track-num-paused .track-num-play { opacity: 1; }

 /* Equalizer bars — shown for the currently playing track */
 .eq-bars {
@@ -1324,11 +1602,6 @@
  font-size: 16px;
 }

-.track-num {
-  font-size: 13px;
-  color: var(--text-muted);
-  font-variant-numeric: tabular-nums;
-}

 .track-info {
  min-width: 0;
@@ -1356,6 +1629,11 @@
  text-overflow: ellipsis;
 }

+.track-artist-link:hover {
+  color: var(--accent);
+  text-decoration: underline;
+}
+
 .track-codec {
  display: block;
  font-size: 10px;
@@ -1388,6 +1666,14 @@
  margin-top: 0;
 }

+.track-genre {
+  font-size: 11px;
+  color: var(--text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .track-star-cell {
  display: flex;
  justify-content: center;
@@ -1399,6 +1685,70 @@
  min-height: unset;
 }

+/* ── Random Mix — clickable artist name ── */
+.rm-artist-btn {
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  font-size: 12px;
+  color: var(--text-secondary);
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  text-align: left;
+  text-decoration: underline;
+  text-decoration-style: dotted;
+  text-decoration-color: transparent;
+  transition: color 0.15s, text-decoration-color 0.15s;
+}
+.rm-artist-btn:hover {
+  color: var(--accent);
+  text-decoration-color: var(--accent);
+}
+.rm-artist-btn.is-blocked {
+  color: var(--danger);
+  text-decoration-color: var(--danger);
+  cursor: default;
+}
+.rm-artist-btn.just-added {
+  color: var(--accent);
+  text-decoration-color: var(--accent);
+}
+
+/* ── Random Mix — genre pill chip ── */
+.rm-genre-chip {
+  display: inline-block;
+  background: var(--bg-hover);
+  border: none;
+  border-radius: var(--radius-sm);
+  padding: 2px 8px;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--text-muted);
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  transition: background 0.15s, color 0.15s;
+}
+.rm-genre-chip:hover {
+  background: color-mix(in srgb, var(--accent) 20%, transparent);
+  color: var(--accent);
+}
+.rm-genre-chip.is-blocked {
+  background: color-mix(in srgb, var(--danger) 15%, transparent);
+  color: var(--danger);
+  cursor: default;
+}
+.rm-genre-chip.just-added {
+  background: color-mix(in srgb, var(--accent) 20%, transparent);
+  color: var(--accent);
+}
+
 /* ─ Modal ─ */
 .modal-overlay {
  position: fixed;
@@ -1856,7 +2206,7 @@
 .lyrics-line {
  font-size: 14px;
  font-weight: 400;
-  color: var(--text-muted);
+  color: var(--text-secondary);
  text-align: center;
  padding: 5px 8px;
  border-radius: 6px;
@@ -1865,10 +2215,18 @@
  cursor: default;
 }

+.lyrics-line.completed {
+  color: var(--text-muted);
+}
+
 .lyrics-line.active {
  color: var(--accent);
 }

+.lyrics-line:hover:not(.active) {
+  color: var(--text-secondary);
+}
+
 .lyrics-plain {
  padding: 4px 0 16px;
 }
@@ -1990,6 +2348,15 @@
  cursor: grabbing;
 }

+.sidebar-customizer-block-label {
+  padding: 6px var(--space-4) 4px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-muted);
+}
+
 .sidebar-customizer-fixed-hint {
  padding: 8px var(--space-4) 6px;
  font-size: 11px;
@@ -2046,10 +2413,18 @@
  box-shadow: var(--shadow-sm);
 }

+.toggle-switch:hover .toggle-track {
+  background: var(--ctp-overlay0);
+}
+
 .toggle-switch input:checked+.toggle-track {
  background: var(--accent);
 }

+.toggle-switch:hover input:checked+.toggle-track {
+  filter: brightness(1.15);
+}
+
 .toggle-switch input:checked+.toggle-track::before {
  transform: translateX(20px);
 }
@@ -2272,10 +2647,10 @@
 /* ── Blurred background ── */
 .fs-bg {
  position: absolute;
-  inset: -30%;
+  inset: -20%;
  background-size: cover;
  background-position: center 20%;
-  filter: blur(6px) brightness(0.25) saturate(1.6);
+  filter: blur(4px) brightness(0.25) saturate(1.5);
  animation: ken-burns 120s linear infinite;
  z-index: 0;
  will-change: transform;
@@ -2326,6 +2701,7 @@
  gap: 18px;
  width: min(440px, 88vw);
  padding: 16px 0;
+  will-change: transform;
 }

 /* Artist name — above cover */
@@ -2349,6 +2725,7 @@
  box-shadow: none;
  flex-shrink: 0;
  animation: cover-breathe 9s ease-in-out infinite;
+  will-change: transform;
 }

 .fs-cover {
@@ -4119,6 +4496,134 @@
  color: var(--text-muted);
  white-space: nowrap;
 }
+
+/* Pre-gain row */
+.eq-pregain-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px 10px;
+  border-top: 1px solid var(--border-subtle);
+}
+
+.eq-pregain-label {
+  font-size: 11px;
+  color: var(--text-muted);
+  white-space: nowrap;
+  min-width: 72px;
+}
+
+.eq-pregain-slider {
+  flex: 1;
+  accent-color: var(--accent);
+  height: 4px;
+  cursor: pointer;
+}
+
+.eq-pregain-val {
+  font-size: 11px;
+  color: var(--text-secondary);
+  font-variant-numeric: tabular-nums;
+  min-width: 52px;
+  text-align: right;
+}
+
+/* AutoEQ section */
+.eq-autoeq-section {
+  border: 1px solid var(--border-subtle);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.eq-autoeq-toggle {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  padding: 8px 12px;
+  background: var(--bg-card);
+  border: none;
+  color: var(--text-secondary);
+  font-size: 12px;
+  cursor: pointer;
+  text-align: left;
+}
+
+.eq-autoeq-toggle:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.eq-autoeq-toggle span {
+  flex: 1;
+}
+
+.eq-autoeq-body {
+  padding: 10px 12px 12px;
+  background: var(--bg-app);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.eq-autoeq-search-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.eq-autoeq-status {
+  font-size: 11px;
+  color: var(--text-muted);
+  padding: 2px 0;
+}
+
+.eq-autoeq-error {
+  color: var(--danger);
+}
+
+.eq-autoeq-applied {
+  color: var(--accent);
+}
+
+.eq-autoeq-results {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  max-height: 180px;
+  overflow-y: auto;
+}
+
+.eq-autoeq-result-btn {
+  text-align: left;
+  padding: 5px 10px;
+  border-radius: 5px;
+  border: none;
+  background: transparent;
+  color: var(--text-secondary);
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.eq-autoeq-result-btn:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.eq-autoeq-result-btn {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+}
+
+.eq-autoeq-result-source {
+  font-size: 10px;
+  color: var(--text-muted);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
 /* ─── Changelog ────────────────────────────────────────────────────────────── */

 .changelog-list {
@@ -4417,9 +4922,93 @@
 }

 .playlist-card-delete--confirm {
-  background: rgba(220, 60, 60, 0.9) !important;
+  background: #dc3c3c !important;
  color: #fff !important;
  opacity: 1 !important;
+  width: 30px !important;
+  height: 30px !important;
+  top: 3px !important;
+  right: 3px !important;
+  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.45);
+  animation: delete-confirm-pulse 0.7s ease-in-out infinite alternate;
+}
+
+@keyframes delete-confirm-pulse {
+  from { background: #dc3c3c; }
+  to   { background: #ff2222; }
+}
+
+/* ─ Internet Radio ─ */
+.radio-card-active {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+}
+
+.radio-live-overlay {
+  position: absolute;
+  top: 6px;
+  left: 6px;
+  z-index: 3;
+  pointer-events: none;
+}
+
+.radio-live-badge {
+  display: inline-block;
+  padding: 2px 6px;
+  border-radius: 3px;
+  background: #e03030;
+  color: #fff;
+  font-size: 0.65rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  line-height: 1.4;
+}
+
+/* ─ Bulk Select ─ */
+.bulk-action-bar {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-3);
+  background: var(--accent-dim, color-mix(in srgb, var(--accent) 15%, transparent));
+  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
+  border-radius: var(--radius);
+  margin-bottom: var(--space-2);
+}
+.bulk-action-count {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--accent);
+  margin-right: auto;
+}
+.bulk-pl-picker-wrap {
+  position: relative;
+}
+
+.bulk-check {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  border: 1.5px solid var(--text-muted);
+  border-radius: 3px;
+  background: transparent;
+  vertical-align: middle;
+  flex-shrink: 0;
+  transition: border-color 0.1s, background 0.1s;
+}
+.bulk-check.checked {
+  background: var(--accent);
+  border-color: var(--accent);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%23fff' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-size: 10px 10px;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+.track-row.bulk-selected {
+  background: color-mix(in srgb, var(--accent) 10%, transparent) !important;
+}
+.track-row.bulk-selected:hover {
+  background: color-mix(in srgb, var(--accent) 16%, transparent) !important;
 }

 /* Drop indicator line */
@@ -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;
@@ -141,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 {
@@ -243,6 +251,129 @@
  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-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);
@@ -592,6 +723,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;
@@ -617,8 +753,8 @@
  display: flex;
  align-items: center;
  gap: var(--space-2);
-  margin-left: 32px;
-  margin-right: 32px;
+  margin-left: 24px;
+  margin-right: 24px;
 }

 .player-waveform-wrap {
@@ -9,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 {
@@ -174,9 +194,11 @@ export async function clearImageCache(): Promise<void> {
 * 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);
@@ -184,6 +206,7 @@ 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);
@@ -191,19 +214,26 @@ export async function getCachedUrl(fetchUrl: string, cacheKey: string): Promise<
    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();
+    if (signal?.aborted) return '';
    putBlob(cacheKey, newBlob); // fire-and-forget (includes disk eviction)
    const objUrl = URL.createObjectURL(newBlob);
    objectUrlCache.set(cacheKey, objUrl);
    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();
  }
@@ -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);
+}
Author	SHA1	Message	Date
Psychotoxical	67f31b0700	fix: include InternetRadio.tsx (referenced in App.tsx router)	2026-04-04 02:09:19 +02:00
Psychotoxical	c873880a26	feat: v1.31.0 — AutoEQ, resizable tracklist columns, Discord Listening type, layout fixes Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-04 02:04:14 +02:00
Psychotoxical	463b7483fd	fix: wrap next/previous in arrow functions to satisfy MouseEventHandler type	2026-04-03 15:00:36 +02:00
Psychotoxical	3d11ef91a1	chore: bump AUR pkgver to 1.30.0	2026-04-03 14:54:59 +02:00
Psychotoxical	c365140870	feat: v1.30.0 — Discord RPC, offline bulk download, artist images, lazy loading, crossfade fix - Discord Rich Presence (opt-in) — requested by @Bewenben (#49) - Bulk offline download for playlists and artist discographies — requested by @Apollosport (#54) - Offline Library filter tabs: All / Albums / Playlists / Discographies with artist grouping - Artist images on Artists overview (opt-in, off by default) — reported by @Apollosport (#53) - Image lazy loading via IntersectionObserver (300px margin) across all pages - Fix: crossfade no longer triggers on manual track skip — reported by @netherguy4 (#35) - Fix: playlist offline cache now stored as single entry (not per-album) - Fix: image cache AbortController no longer blocks IDB writes - Update toast: experimental auto-update hint + GH download link always visible (Win/Mac) - Queue tech strip: genre removed - Facebook theme: contrast, opaque badge/back button, queue tab labels - "Save discography offline" label (was "Download discography") - Fix: clearing empty playlists via updatePlaylist.view (Axios empty array workaround) - starredOverrides propagated to AlbumDetail, Favorites, RandomMix Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-03 14:53:41 +02:00
Psychotoxical	651b3cb050	Update README.md	2026-04-03 12:02:34 +02:00
Psychotoxical	e2ee9247ad	chore: attribute contributions from JulianNymark and nisarg-78 JulianNymark contributed OGG/Vorbis support, audio error toasts, and human-readable error messages (PRs #42, #43, #44). nisarg-78 contributed QoL and UI improvements (PR #38). Changes were incorporated manually due to conflicts at the time of merge. Co-Authored-By: JulianNymark <819074+JulianNymark@users.noreply.github.com> Co-Authored-By: nisarg-78 <84626554+nisarg-78@users.noreply.github.com>	2026-04-02 22:45:58 +02:00
Psychotoxical	74df7b6b88	Update CHANGELOG.md	2026-04-02 22:36:36 +02:00
Psychotoxical	27a6693c8c	Update CHANGELOG.md	2026-04-02 22:28:35 +02:00
Psychotoxical	a932e7c2db	chore: bump to v1.29.0 — release prep Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-02 22:24:41 +02:00
Psychotoxical	7263d93d42	feat: v1.29.0 — Radio fast-start, seek fix, OGG, error toasts, contributors Incorporates PRs #38 (nisarg-78), #42 #43 #44 (JulianNymark) with fixes: Audio / Playback - Artist Radio starts immediately from fast getTopSongs (local library); getSimilarSongs2 (Last.fm) enriches queue in background — no more wait - Fix seek audio glitch: EqualPowerFadeIn only resets to zero-gain on seeks to track start (<100 ms); all other seeks resume at unity gain - OGG/Vorbis container support via symphonia-format-ogg (PR #42) - Human-readable audio error messages in SizedDecoder (PR #44) - Audio playback errors shown as themed toast notifications (PR #43) Queue / Radio - Infinite Queue: proactive load of 5 tracks (was 25) when ≤2 remain - Radio: proactive reload at ≤2 remaining tracks, independent of Infinite Queue setting — radio no longer stops at last track - Fix: clicking Start Radio multiple times no longer stacks duplicates - Fix: Start Radio on artist keeps current song playing - Manual tracks always appear before Radio, Radio before Auto-added - Queue separators: "— Radio —" and "— Auto —" dividers - Fix: radio proactive load now works even when songs lack artistId (uses currentRadioArtistId module var as fallback) UI / UX - Click synced lyrics lines to seek (PR #38) - Volume scroll wheel on volume slider (PR #38) - Lyrics: active / completed / upcoming visual states (PR #38) - Shared toast utility (src/utils/toast.ts) replaces inline toast fn - Auto-updater: relaunch_after_update Rust command exits first to release single-instance lock before spawning new process About / Credits - nisarg-78 and JulianNymark added to contributors (since v1.29.0) - netherguy4 added as Special Thanks for feature ideas and feedback - i18n: aboutSpecialThanksLabel in all 5 languages Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-02 22:17:55 +02:00
Psychotoxical	95283d792b	feat: v1.28.0 — Infinite Queue, Start Radio, Single-click Play, Performance Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-02 17:40:39 +02:00
Psychotoxical	53d5888ebf	chore: bump AUR pkgrel to 1.27.4-2 (CFLAGS fix rollout) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-02 13:25:31 +02:00
Psychotoxical	cad4338324	fix(aur): unset CFLAGS/CXXFLAGS to fix ring LTO link failure on CachyOS CachyOS makepkg.conf sets -flto=auto in CFLAGS. ring's build.rs uses the cc crate to compile its C/asm objects, which picks up CFLAGS, producing fat-LTO objects. bfd cannot resolve ring_core_* symbols from fat-LTO objects when linking against non-LTO Rust rlibs. Also adds nasm to makedepends (required by ring 0.17.x for x86_64 asm). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-02 12:41:34 +02:00
Psychotoxical	f9bc67cb77	fix(aur): append -fuse-ld=bfd to RUSTFLAGS — substitution was no-op on CachyOS	2026-04-02 11:54:50 +02:00
Psychotoxical	74c75d83ca	fix(aur): override RUSTFLAGS to swap lld→bfd for ring linker error makepkg.conf on Arch injects -fuse-ld=lld into RUSTFLAGS which overrides .cargo/config.toml target rustflags. PKGBUILD now explicitly patches RUSTFLAGS at env level so bfd is used regardless of system config. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-02 11:44:00 +02:00
Psychotoxical	005abae97d	fix: explicit Windows NSIS updater bundle signing step tauri-action uploads the .exe but doesn't create .nsis.zip/.sig because the bundler doesn't pick up TAURI_SIGNING_PRIVATE_KEY automatically. Added a PowerShell step that zips the exe, signs it via tauri signer, and uploads .nsis.zip + .nsis.zip.sig — mirroring the macOS approach. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-02 11:23:05 +02:00
Psychotoxical	a9c20dfbdf	chore: bump to v1.27.3 — CI fixes, ring linker fix, draft releases - fix: CI Windows NSIS upload — let tauri-action handle artifact upload directly - fix: Linux/AUR ring linker error — cc + -fuse-ld=bfd via .cargo/config.toml - fix: releases now created as draft for review before publishing - chore: consolidate 1.27.0–1.27.2 changelog into single entry Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-02 11:06:18 +02:00
Psychotoxical	0b5db172bd	chore: bump to v1.27.2 — bugfix release - fix: Radio from context menu passed artist name as ID to getSimilarSongs2 (closes #29) - fix: CI Windows NSIS upload — tauri-action no longer searches missing bundle/msi/ - fix: Linux/AUR ring linker error — use cc instead of rust-lld via .cargo/config.toml Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-02 10:38:26 +02:00
Psychotoxical	bf99a64baf	fix: guard against empty NSIS bundle in Windows signing step tauri-action already signs and uploads the .nsis.zip.sig when TAURI_SIGNING_PRIVATE_KEY is set, so the manual find returns empty and crashed with "a value is required for <FILE>". Exit 0 cleanly. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-02 03:23:17 +02:00
Psychotoxical	523596e414	chore: bump AUR pkgver to 1.27.1	2026-04-02 03:08:52 +02:00
Psychotoxical	2fe35e3f9b	fix: v1.27.1 — CI signing pipeline, sig naming, npm+cargo caching	2026-04-02 03:07:19 +02:00
Psychotoxical	e9fa541933	chore: add npm + cargo caching to all CI jobs (netherguy4 #28 )	2026-04-02 02:54:58 +02:00
Psychotoxical	746aa69405	fix: explicit bundle signing step after tauri-action	2026-04-02 02:53:08 +02:00
Psychotoxical	205b2c1914	fix: signing env at job level, fix macOS bundle filenames in manifest	2026-04-02 02:38:53 +02:00
Psychotoxical	0086b3e310	chore: bump AUR pkgver to 1.27.0	2026-04-02 02:15:26 +02:00
Psychotoxical	55e7cb835b	feat: v1.27.0 — In-App Auto-Update, Configurable Home, Icon Consistency Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-02 02:14:57 +02:00
Psychotoxical	d8da511a8f	fix: v1.26.1 — hero/album/playlist background flickering Background of Hero carousel, Album Detail and Playlist Detail was flickering for up to 20 seconds on first visit. useCachedUrl with fallbackToFetch=true returned the raw server URL immediately, causing a double render — once with the HTTP URL and again when the blob was ready. Fixed by passing fallbackToFetch=false in all three locations. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-01 21:20:15 +02:00
Psychotoxical	434ee0ecf1	feat: v1.26.0 — Bulk Select, Song Info, Favorite Button, Recently Played ### Added - Favorite/Star button in player bar (requested by @halfkey) - Bulk multi-select for album tracklist and playlist detail (add to playlist, remove from playlist) - Song Info modal via right-click context menu (metadata: format, bitrate, sample rate, bit depth, channels, file size, path, replay gain) - Recently Played section on Home page - "Show activity in Now Playing" opt-in toggle in Settings → Behavior ### Fixed - Queue cover art not updating on track change (useCachedUrl/CachedImage reset on cacheKey change) - FullscreenPlayer background flickering (FsBg preloads image before layer transition) - Playlist card delete confirmation visual (size expansion + pulse animation) - Gruvbox Light Soft: back button and badge invisible against light background ### Changed - buildStreamUrl: removed unused suffix parameter Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-01 20:57:57 +02:00
Psychotoxical	7d1c66071e	Update CHANGELOG.md	2026-04-01 17:28:50 +02:00
Psychotoxical	1adfda1daa	fix: remove invalid single-instance capability + dead static tray icon Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-01 13:51:50 +02:00
Psychotoxical	e65c476a76	fix: v1.25.1 — Opus playback, single-instance enforcement Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-01 13:45:37 +02:00