feat: new app icon, AUR package, remove AppImage (v1.4.4)

- New app icon across all platforms - AUR package: Arch/CachyOS users can install via yay/paru - AppImage removed: incompatible with non-Ubuntu distros due to bundled WebKitGTK vs system Mesa/EGL conflicts - CI: build only deb+rpm for Linux, drop GStreamer/linuxdeploy deps Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
fix: Random Mix improvements, queue UX fixes (v1.4.3)
2026-07-23 07:45:45 +00:00 · 2026-03-17 19:10:08 +01:00 · 2026-03-16 22:38:27 +01:00 · 2026-03-16 21:26:33 +01:00 · 2026-03-16 19:09:31 +01:00 · 2026-03-16 17:36:58 +01:00
96 changed files with 2143 additions and 922 deletions
@@ -22,23 +22,53 @@ jobs:
      - name: get version
        id: get-version
        run: echo "version=$(node -p "require('./package.json').version")" >> $GITHUB_OUTPUT
+      - name: extract changelog
+        id: changelog
+        run: |
+          VERSION="${{ steps.get-version.outputs.version }}"
+          # Extract the block between ## [VERSION] and the next ## heading
+          BODY=$(awk "/^## \[$VERSION\]/{found=1; next} found && /^## \[/{exit} found{print}" CHANGELOG.md)
+          # Store multiline output
+          EOF=$(dd if=/dev/urandom bs=15 count=1 status=none | base64)
+          echo "body<<$EOF" >> $GITHUB_OUTPUT
+          echo "$BODY" >> $GITHUB_OUTPUT
+          echo "$EOF" >> $GITHUB_OUTPUT
      - name: create release
        id: create-release
        uses: actions/github-script@v7
        env:
          PACKAGE_VERSION: ${{ steps.get-version.outputs.version }}
+          CHANGELOG_BODY: ${{ steps.changelog.outputs.body }}
        with:
          script: |
+            const tag = `app-v${process.env.PACKAGE_VERSION}`;
+            const body = process.env.CHANGELOG_BODY || 'See the assets to download this version and install.';
+            try {
+              const { data } = await github.rest.repos.getReleaseByTag({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                tag,
+              });
+              await github.rest.repos.updateRelease({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                release_id: data.id,
+                body,
+              });
+              return data.id;
+            } catch (e) {
+              if (e.status !== 404) throw e;
+            }
            const { data } = await github.rest.repos.createRelease({
              owner: context.repo.owner,
              repo: context.repo.repo,
-              tag_name: `app-v${process.env.PACKAGE_VERSION}`,
+              tag_name: tag,
              name: `Psysonic v${process.env.PACKAGE_VERSION}`,
-              body: 'See the assets to download this version and install.',
+              body,
              draft: false,
              prerelease: false
-            })
-            return data.id
+            });
+            return data.id;

  build-macos-windows:
    needs: create-release
@@ -78,7 +108,7 @@ jobs:
    needs: create-release
    permissions:
      contents: write
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-24.04
    steps:
      - uses: actions/checkout@v5

@@ -87,14 +117,7 @@ jobs:
          sudo apt-get update
          sudo apt-get install -y \
            libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev patchelf \
-            gstreamer1.0-plugins-base gstreamer1.0-plugins-good \
-            gstreamer1.0-plugins-bad gstreamer1.0-libav
-
-      - name: install linuxdeploy gstreamer plugin
-        run: |
-          wget -q "https://raw.githubusercontent.com/linuxdeploy/linuxdeploy-plugin-gstreamer/master/linuxdeploy-plugin-gstreamer.sh" \
-            -O /usr/local/bin/linuxdeploy-plugin-gstreamer.sh
-          chmod +x /usr/local/bin/linuxdeploy-plugin-gstreamer.sh
+            libasound2-dev

      - name: setup node
        uses: actions/setup-node@v5
@@ -108,21 +131,7 @@ jobs:
        run: npm install

      - name: build
-        run: npm run tauri:build
-        env:
-          APPIMAGE_EXTRACT_AND_RUN: 1
-
-      - name: patch AppImage AppRun
-        run: |
-          APPIMAGE=$(find src-tauri/target/release/bundle/appimage -name "*.AppImage" -not -name "*.tar.gz" | head -1)
-          echo "Patching: $APPIMAGE"
-          APPIMAGE_EXTRACT_AND_RUN=1 ./"$APPIMAGE" --appimage-extract
-          sed -i '/^exec /i export WEBKIT_DISABLE_COMPOSITING_MODE=1\nexport WEBKIT_DISABLE_DMABUF_RENDERER=1\nexport GDK_BACKEND=x11' squashfs-root/AppRun
-          wget -q "https://github.com/AppImage/AppImageKit/releases/download/continuous/appimagetool-x86_64.AppImage" \
-            -O appimagetool
-          chmod +x appimagetool
-          APPIMAGE_EXTRACT_AND_RUN=1 ./appimagetool squashfs-root "$APPIMAGE"
-          rm -rf squashfs-root appimagetool
+        run: npm run tauri:build -- --bundles deb,rpm

      - name: upload Linux artifacts
        env:
@@ -130,5 +139,5 @@ jobs:
        run: |
          VERSION=${{ needs.create-release.outputs.package_version }}
          find src-tauri/target/release/bundle \
-            \( -name "*.AppImage" -not -name "*.tar.gz" -o -name "*.deb" -o -name "*.rpm" \) \
+            \( -name "*.deb" -o -name "*.rpm" \) \
            | xargs gh release upload "app-v${VERSION}" --clobber
@@ -5,6 +5,161 @@ 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.4.4] - 2026-03-17
+
+### Added
+
+#### AUR Package
+- Psysonic is now available on the **Arch User Repository** — Arch and CachyOS users can install via `yay -S psysonic` or `paru -S psysonic`. Builds from source using the system's own WebKitGTK, avoiding the EGL/Mesa compatibility issues that affected the AppImage on modern distros.
+
+### Changed
+
+#### App Icon
+- New app icon across all platforms (Windows, macOS, Linux, Android, iOS).
+
+#### Linux Distribution
+- **AppImage removed**: The AppImage was fundamentally incompatible with non-Ubuntu distros (Arch, Fedora) due to bundled WebKitGTK conflicting with the system's Mesa/EGL. Linux users should use the `.deb` (Ubuntu/Debian), `.rpm` (Fedora/RHEL), or the new AUR package (Arch/CachyOS).
+
+## [1.4.3] - 2026-03-16
+
+### Fixed
+
+#### Random Mix — Genre Mix
+- **Second "Play All" button removed**: The genre mix section had a redundant play button below the super-genre selector. The top-right button is now context-aware — it plays the genre mix when one is active, otherwise the regular mix.
+- **"Play All" disabled during genre mix loading**: The button now stays grayed out with a live progress counter (`n / 50`) until all songs are fully loaded. Clicking while the list was still building sent only the songs loaded so far.
+- **Over-fetching fixed**: Genre mix previously fetched up to 100+ songs and sliced to 50 at the end. Now the matched genre list is capped at 50 (randomly sampled when more match) so the total fetch stays close to 50 with no wasted server I/O.
+- **Regular mix cache-busting**: `getRandomSongs` requests now include a timestamp parameter, preventing browser/axios from returning a cached response and showing the same list on every remix.
+- **Display/state mismatch on remix**: Clicking "Mischen" now clears the current list immediately, ensuring the spinner is shown and the displayed songs always match what "Play All" would send.
+
+#### Queue Panel
+- **Hover highlight lost on right-click**: Queue items now retain their hover highlight while a context menu is open for them (`.context-active` CSS class).
+- **Song count and total duration**: The queue header now shows the number of tracks and total runtime below the title (e.g. `12 tracks · 47:32`).
+
+#### Context Menu
+- **"Favorite" option added for queue items**: Right-clicking a queue item now includes a "Favorite" option, consistent with the song context menu.
+
+## [1.4.2] - 2026-03-16
+
+### Fixed
+
+#### Linux AppImage — Modern Distro Compatibility
+- **Build upgraded to Ubuntu 24.04**: The AppImage was previously built on Ubuntu 22.04 with WebKitGTK 2.36. On modern distros (CachyOS, Arch, etc.) with Mesa 25.x, `eglGetDisplay(EGL_DEFAULT_DISPLAY)` returns `EGL_BAD_PARAMETER` and aborts immediately because newer Mesa no longer accepts implicit platform detection. Building on Ubuntu 24.04 bundles WebKitGTK 2.44 which uses the correct `eglGetPlatformDisplay` API.
+- **`EGL_PLATFORM=x11` added to AppRun**: Additional safeguard that explicitly tells Mesa's EGL loader to use the X11 platform when the app is running under XWayland.
+
+#### Shell — Update Link
+- `shell:allow-open` capability now includes a URL scope (`https://**`), fixing the update toast link that silently did nothing in Tauri v2 without an explicit allow-list.
+
+## [1.4.1] - 2026-03-16
+
+### Fixed
+
+#### Random Albums — Performance & Memory
+- **Auto-refresh removed**: The 30-second auto-cycle timer caused 10 React state updates/second (progress bar interval) and a burst of 30 concurrent image fetches on every tick, eventually making the whole app unresponsive. The page now loads once on mount; use the manual refresh button to get a new selection.
+- **Concurrent fetch limit**: Image fetches are now capped at 5 simultaneous network requests (was unlimited — 30 at once on every refresh).
+- **Object URL memory leak**: The in-memory image cache now caps at 150 entries and revokes old object URLs via `URL.revokeObjectURL()` when evicting. Previously, object URLs accumulated without bound across the entire session.
+- **Dangling state updates**: `useCachedUrl` now uses a cancellation flag — if a component unmounts while a fetch is in flight (e.g. during a grid refresh), the resolved URL is discarded instead of calling `setState` on an unmounted component.
+
+#### i18n
+- Page title "Neueste" on the New Releases page was hardcoded German. Now uses `t('sidebar.newReleases')`.
+
+## [1.4.0] - 2026-03-16
+
+### Added
+
+#### Statistics Page — Upgraded
+- **Library overview**: Four stat cards at the top showing total Artists, Albums, Songs, and Genres — counts derived from the library in parallel.
+- **Recently Played**: Horizontal scroll row showing the last played albums with cover art.
+- **Most Played**: Ranked list of the most frequently played tracks.
+- **Highest Rated**: List of top-rated tracks by user star rating.
+- **Genre Chart**: Visual bar chart of the top genres by song and album count.
+
+#### Playlists Page — Redesigned
+- Replaced the card grid with a clean list layout.
+- **Sort buttons**: Sort by Name, Tracks, or Duration — click again to toggle ascending/descending.
+- **Filter input**: Live search across playlist names.
+- Play and delete buttons appear on row hover.
+
+#### Favorites — Songs Section Upgraded
+- Tracks now display in a full tracklist layout matching Album Detail: separate `#`, Title, Artist, and Duration columns with a header row.
+- Artist name is clickable and navigates to the artist page.
+- Right-click context menu on any track (Go to Album, Add to Queue, etc.).
+- **"Add all to queue"** button (`btn btn-surface`) next to the section title.
+
+#### Context Menu — Go to Album
+- New **Go to Album** option (`Disc3` icon) added for `song` and `queue-item` context menu types.
+- Only shown when the song has a known `albumId`.
+
+#### Queue Panel — Meta Box
+- Now shows: **Title** (no link) → **Artist** (linked to artist page) → **Album** (linked to album page).
+- Removed year display and the old title→album link.
+
+#### Random Mix — Hover Persistence
+- Track row stays highlighted while its context menu is open via `.context-active` CSS class.
+- Highlight is cleared automatically when the context menu closes.
+
+#### Artist Cards — Redesigned
+- `ArtistCardLocal` now matches `AlbumCard` exactly: no padding, full-width square cover via `aspect-ratio: 1`, name and meta below.
+- Uses `CachedImage` with `coverArtCacheKey` for proper IndexedDB caching.
+- Same `flex: 0 0 clamp(140px, 15vw, 180px)` sizing as album cards — artist cards are no longer oversized.
+
+### Fixed
+
+#### Random Albums — Cover Loading & Manual Refresh
+- **Removed `renderKey`**: The album grid was fully remounted on every refresh, restarting all 30 IndexedDB image lookups from scratch. Grid is now stable — only data changes, images stay cached.
+- **`loadingRef` guard**: Prevents concurrent fetch calls if the auto-cycle timer fires during a manual refresh.
+- **Timer race condition**: Manual refresh now calls `clearTimers()` before `load()`, eliminating the race where the auto-cycle timer fired mid-load.
+
+#### Favorites — Artist Navigation
+- Arrow nav buttons in the Artists section now use the same CSS classes as the Albums section (`album-row-section`, `album-row-header`, `album-row-nav`) — consistent styling across both rows.
+
+### Changed
+- **AlbumDetail** refactored into a thin orchestrator. Logic extracted into `AlbumHeader` (`src/components/AlbumHeader.tsx`) and `AlbumTrackList` (`src/components/AlbumTrackList.tsx`).
+- **German i18n**: "Queue" consistently translated as "Warteschlange" throughout — `queue.shuffle`, `favorites.enqueueAll`.
+
+## [1.3.0] - 2026-03-15
+
+### Added
+
+#### Player Bar — Complete Redesign
+- **Waveform seekbar**: Replaces the classic thin slider. A canvas-based waveform with 500 deterministic bars (seeded by `trackId`) fills the full available width. Played portion renders as a blue → mauve gradient with a soft glow; buffered range is slightly brighter; unplayed bars are dimmed to 28% opacity. Click or drag anywhere to seek.
+- **New layout**: Single flex row — `[Cover + Track Info] [Transport Controls] [Waveform + Times] [Volume]`. More breathing room for the waveform; controls feel lighter and better proportioned.
+- **Queue toggle relocated**: Moved from the bottom player bar to the top-right of the content header — consistent with the sidebar collapse button pattern. Uses `PanelRightClose` / `PanelRight` icons (same family as `PanelLeftClose` / `PanelLeft` in the sidebar).
+
+#### Ambient Stage — MilkDrop Visualizer
+- **Butterchurn integration**: Clicking the waveform icon (top-right of the fullscreen player) activates the MilkDrop visualizer powered by [butterchurn](https://github.com/jberg/butterchurn) + `butterchurn-presets`.
+- A hidden `<audio>` element is routed through the Web Audio API `AnalyserNode` (not connected to `AudioDestinationNode` — completely silent). The Rust/rodio engine continues to handle actual audio output.
+- Starts with a random preset; the shuffle button cycles through all available presets with a 2-second blend transition. Current preset name is shown in the top bar.
+- When the visualizer is active, the blurred background, orbs, and overlay are replaced by the canvas.
+
+#### Tracklist — Animated Equalizer Indicator
+- The currently **playing** track shows three animated equalizer bars (CSS `scaleY` keyframe animation, staggered timing) instead of a static play icon.
+- When **paused**, the static play icon is shown.
+- Hovering any other track still shows a play icon.
+- Track row alignment fixed: `align-items: center` on the grid row + `.track-num` as flex center — icons and track numbers are now perfectly vertically aligned with the song title.
+
+#### Artist Pages — In-App Browser
+- Last.fm and Wikipedia buttons now open a native **Tauri `WebviewWindow`** (1100 × 780, centered) instead of the system browser. Both sites load fully within the app and can be closed independently.
+- Required new capabilities: `core:window:allow-create`, `core:webview:allow-create-webview-window`.
+
+#### Update Checker
+- Update check now runs **every 10 minutes** during runtime in addition to the initial check 1.5 s after launch.
+- Version label in the update toast no longer includes a `v` prefix (shows `1.3.0` instead of `v1.3.0`).
+
+#### Help Page
+- New **Random Mix** section: explains the random mix, keyword filter, and super genre mix.
+- Updated **Playback** section: waveform seekbar, MilkDrop visualizer, queue shuffle.
+- Updated **Library** section: in-app browser for artist links.
+- Updated queue entry to reflect the new toggle location.
+- **Accordion styling**: open question and answer share a continuous 3 px accent stripe on the left; answer background uses `--bg-app` for clear contrast against the question's `--bg-card`.
+
+### Fixed
+- **Version in Settings** was hardcoded to `1.0.12`. Now imported from `package.json` at build time — same source as the sidebar update checker.
+- **Hero / Discover duplicate albums**: Both sections previously fetched `random` independently, often showing the same albums. Now a single request fetches 20; `slice(0, 8)` goes to the Hero carousel and `slice(8)` to the Discover row.
+- **Active track pulse too aggressive**: Changed from a `background: transparent` flash to a gentle `opacity: 0.6` fade over 3 s — significantly less distracting.
+
+### Changed
+- **Blacklist → Keyword Filter**: Renamed throughout UI and i18n (EN + DE) to better reflect that the filter matches genre, title, and album fields — not just genre tags.
+
 ## [1.2.0] - 2026-03-15

 ### Added
@@ -1,21 +1,20 @@
-MIT License
+                    GNU GENERAL PUBLIC LICENSE
+                       Version 3, 29 June 2007

-Copyright (c) 2026 Psychotoxical
+ Copyright (C) 2026 Psychotoxical

-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.

-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.

-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+ You should have received a copy of the GNU General Public License
+ along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+ The full license text is available at:
+ https://www.gnu.org/licenses/gpl-3.0.txt
@@ -5,7 +5,7 @@
  
  <p>
    <a href="https://github.com/Psychotoxical/psysonic/releases/latest"><img alt="Latest Release" src="https://img.shields.io/github/v/release/Psychotoxical/psysonic?style=flat-square&color=8839ef"></a>
-    <a href="https://github.com/Psychotoxical/psysonic/blob/main/LICENSE"><img alt="License" src="https://img.shields.io/github/license/Psychotoxical/psysonic?style=flat-square&color=cba6f7"></a>
+    <a href="https://github.com/Psychotoxical/psysonic/blob/main/LICENSE"><img alt="License: GPL v3" src="https://img.shields.io/badge/License-GPLv3-cba6f7?style=flat-square"></a>
    <a href="https://tauri.app/"><img alt="Built with Tauri" src="https://img.shields.io/badge/Built%20with-Tauri-242938?style=flat-square&logo=tauri"></a>
  </p>
 </div>
@@ -22,21 +22,23 @@ Designed specifically for users hosting their own music via Navidrome or other S
 ## ✨ Features

 - 🎨 **Gorgeous UI**: 8 deeply integrated themes (Catppuccin series + Nord series) with smooth glassmorphism effects and micro-animations.
- ⚡ **Blazing Fast**: Built with Rust & Tauri, resulting in minimal RAM usage compared to typical Electron apps.
+- ⚡ **Blazing Fast**: Built with Rust & Tauri — native audio engine (rodio), minimal RAM usage compared to typical Electron apps.
 - 🌍 **Internationalization (i18n)**: Fully translated into English and German.
 - 📻 **Live "Now Playing"**: See what other users on your server are currently listening to in real-time.
 - 🎵 **Last.fm Scrobbling**: Full integration for scrobbling your tracks via the Navidrome server.
 - 💾 **IndexedDB Caching**: Ultra-fast loading times with persistent IndexedDB image caching for cover art and artist images.
 - 📀 **Album Downloads**: Support for downloading entire albums directly to your local machine.
 - 💿 **Album & Artist Views**: Beautiful grid displays and detailed artist pages with related albums and color-coded initial avatars for fast browsing.
- 🎛️ **Queue Management**: Drag & drop support, playlist saving, and loading directly built into the queue. Server-side queue synchronization is fully supported.
- 🔄 **Update Notifications**: Built-in update checker that notifies you when a new version is available on GitHub.
+- 〰️ **Waveform Seekbar**: Canvas-based waveform with a blue-to-mauve gradient and glow effect — click or drag anywhere to seek.
+- 🌊 **MilkDrop Visualizer**: Full-screen Butterchurn/MilkDrop visualizer in the Ambient Stage with hundreds of presets and smooth transitions.
+- 🎛️ **Queue Management**: Drag & drop reordering, shuffle, playlist saving/loading, and server-side queue synchronization.
+- 🎼 **Random Mix**: Generate a random playlist from your entire library. Filter by keyword or pick a Super Genre (Metal, Rock, Electronic, Jazz…) for a focused mix with progressive loading.
+- 🔗 **In-App Browser**: Last.fm and Wikipedia links on artist pages open in a dedicated native window — no need to leave the app.
+- 🔄 **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).

 ## ● Known Limitations

- **Seeking (all platforms)**: Seeking may occasionally be unreliable — especially on Linux/GStreamer. This is a known issue currently being worked on.
- **Queue drag & drop (macOS / Windows)**: Queue reordering via drag & drop is being actively worked on and may not always behave correctly on macOS and Windows.
 - **Linux (drag & drop cursor feedback)**: Due to a WebKitGTK limitation, the drag cursor does not reflect the drop operation type — it may appear as a "forbidden" symbol or show no indicator at all, depending on the desktop environment. Drag and drop itself works correctly.

 ## 📥 Installation
@@ -92,4 +94,6 @@ Contributions are completely welcome! Whether it is translating the app into a n

 ## 📄 License

-Distributed under the MIT License. See `LICENSE` for more information.
+Distributed under the **GNU General Public License v3.0**. See `LICENSE` for more information.
+
+This means: you are free to use, study, and modify Psysonic. If you distribute a modified version, you must release it under the same GPL v3 license and keep the original copyright notice intact. You may **not** incorporate this code into proprietary software.
@@ -1,12 +1,12 @@
 {
  "name": "psysonic",
-  "version": "1.0.12",
+  "version": "1.3.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "psysonic",
-      "version": "1.0.12",
+      "version": "1.3.0",
      "dependencies": {
        "@tauri-apps/api": "^2",
        "@tauri-apps/plugin-dialog": "^2.6.0",
@@ -16,6 +16,8 @@
        "@tauri-apps/plugin-shell": "^2",
        "@tauri-apps/plugin-store": "^2",
        "axios": "^1.7.7",
+        "butterchurn": "^2.6.7",
+        "butterchurn-presets": "^2.4.7",
        "i18next": "^25.8.16",
        "lucide-react": "^0.462.0",
        "md5": "^2.3.0",
@@ -1655,6 +1657,16 @@
        "proxy-from-env": "^1.1.0"
      }
    },
+    "node_modules/babel-runtime": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
+      "integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==",
+      "license": "MIT",
+      "dependencies": {
+        "core-js": "^2.4.0",
+        "regenerator-runtime": "^0.11.0"
+      }
+    },
    "node_modules/baseline-browser-mapping": {
      "version": "2.10.0",
      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.0.tgz",
@@ -1702,6 +1714,27 @@
        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
      }
    },
+    "node_modules/butterchurn": {
+      "version": "2.6.7",
+      "resolved": "https://registry.npmjs.org/butterchurn/-/butterchurn-2.6.7.tgz",
+      "integrity": "sha512-BJiRA8L0L2+84uoG2SSfkp0kclBuN+vQKf217pK7pMlwEO2ZEg3MtO2/o+l8Qpr8Nbejg8tmL1ZHD1jmhiaaqg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.0.0",
+        "ecma-proposal-math-extensions": "0.0.2"
+      }
+    },
+    "node_modules/butterchurn-presets": {
+      "version": "2.4.7",
+      "resolved": "https://registry.npmjs.org/butterchurn-presets/-/butterchurn-presets-2.4.7.tgz",
+      "integrity": "sha512-4MdM8ripz/VfH1BCldrIKdAc/1ryJFBDvqlyow6Ivo1frwj0H3duzvSMFC7/wIjAjxb1QpwVHVqGqS9uAFKhpg==",
+      "license": "MIT",
+      "dependencies": {
+        "babel-runtime": "^6.26.0",
+        "ecma-proposal-math-extensions": "0.0.2",
+        "lodash": "^4.17.4"
+      }
+    },
    "node_modules/call-bind-apply-helpers": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
@@ -1764,6 +1797,14 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/core-js": {
+      "version": "2.6.12",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+      "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
+      "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.",
+      "hasInstallScript": true,
+      "license": "MIT"
+    },
    "node_modules/crypt": {
      "version": "0.0.2",
      "resolved": "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz",
@@ -1821,6 +1862,12 @@
        "node": ">= 0.4"
      }
    },
+    "node_modules/ecma-proposal-math-extensions": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/ecma-proposal-math-extensions/-/ecma-proposal-math-extensions-0.0.2.tgz",
+      "integrity": "sha512-80BnDp2Fn7RxXlEr5HHZblniY4aQ97MOAicdWWpSo0vkQiISSE9wLR4SqxKsu4gCtXFBIPPzy8JMhay4NWRg/Q==",
+      "license": "MIT"
+    },
    "node_modules/electron-to-chromium": {
      "version": "1.5.307",
      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.307.tgz",
@@ -2179,6 +2226,12 @@
        "node": ">=6"
      }
    },
+    "node_modules/lodash": {
+      "version": "4.17.23",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.23.tgz",
+      "integrity": "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==",
+      "license": "MIT"
+    },
    "node_modules/loose-envify": {
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -2433,6 +2486,12 @@
        "react-dom": ">=16.8"
      }
    },
+    "node_modules/regenerator-runtime": {
+      "version": "0.11.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
+      "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==",
+      "license": "MIT"
+    },
    "node_modules/rollup": {
      "version": "4.59.0",
      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.59.0.tgz",
@@ -1,6 +1,6 @@
 {
  "name": "psysonic",
-  "version": "1.2.0",
+  "version": "1.4.4",
  "private": true,
  "scripts": {
    "dev": "vite",
@@ -19,6 +19,8 @@
    "@tauri-apps/plugin-shell": "^2",
    "@tauri-apps/plugin-store": "^2",
    "axios": "^1.7.7",
+    "butterchurn": "^2.6.7",
+    "butterchurn-presets": "^2.4.7",
    "i18next": "^25.8.16",
    "lucide-react": "^0.462.0",
    "md5": "^2.3.0",
@@ -0,0 +1,4 @@
+src/
+pkg/
+*.tar.zst
+*.tar.gz
@@ -0,0 +1,65 @@
+# Maintainer: stelle <stelle@psychotoxical.dev>
+pkgname=psysonic
+pkgver=1.4.3
+pkgrel=1
+pkgdesc="Desktop music player for Subsonic API-compatible servers (Navidrome, Gonic, etc.)"
+arch=('x86_64')
+url="https://github.com/Psychotoxical/psysonic"
+license=('GPL-3.0-only')
+depends=(
+  'webkit2gtk-4.1'
+  'gtk3'
+  'libayatana-appindicator'
+  'openssl'
+  'alsa-lib'
+)
+makedepends=(
+  'npm'
+  'rust'
+  'cargo'
+)
+source=("$pkgname-$pkgver.tar.gz::https://github.com/Psychotoxical/psysonic/archive/refs/tags/app-v$pkgver.tar.gz")
+sha256sums=('SKIP')
+
+build() {
+  cd "psysonic-app-v$pkgver"
+
+  export CARGO_HOME="$srcdir/cargo-home"
+  export npm_config_cache="$srcdir/npm-cache"
+
+  npm install
+  npm run tauri:build -- --no-bundle
+}
+
+package() {
+  cd "psysonic-app-v$pkgver"
+
+  # Binary (in /usr/lib to make room for the wrapper)
+  install -Dm755 "src-tauri/target/release/psysonic" "$pkgdir/usr/lib/psysonic/psysonic"
+
+  # Wrapper script that sets necessary env vars for WebKitGTK on Wayland
+  install -Dm755 /dev/stdin "$pkgdir/usr/bin/psysonic" <<EOF
+#!/bin/sh
+export GDK_BACKEND=x11
+export WEBKIT_DISABLE_COMPOSITING_MODE=1
+export WEBKIT_DISABLE_DMABUF_RENDERER=1
+exec /usr/lib/psysonic/psysonic "\$@"
+EOF
+
+  # Desktop entry
+  install -Dm644 /dev/stdin "$pkgdir/usr/share/applications/psysonic.desktop" <<EOF
+[Desktop Entry]
+Name=Psysonic
+Comment=Desktop music player for Subsonic API-compatible servers
+Exec=psysonic
+Icon=psysonic
+Terminal=false
+Type=Application
+Categories=AudioVideo;Audio;Music;Player;
+EOF
+
+  # Icons
+  install -Dm644 "src-tauri/icons/32x32.png"      "$pkgdir/usr/share/icons/hicolor/32x32/apps/psysonic.png"
+  install -Dm644 "src-tauri/icons/128x128.png"    "$pkgdir/usr/share/icons/hicolor/128x128/apps/psysonic.png"
+  install -Dm644 "src-tauri/icons/128x128@2x.png" "$pkgdir/usr/share/icons/hicolor/256x256/apps/psysonic.png"
+}
@@ -3118,7 +3118,7 @@ dependencies = [

 [[package]]
 name = "psysonic"
-version = "1.2.0"
+version = "1.4.2"
 dependencies = [
 "reqwest 0.12.28",
 "rodio",
@@ -1,6 +1,6 @@
 [package]
 name = "psysonic"
-version = "1.2.0"
+version = "1.4.4"
 description = "Psysonic Desktop Music Player"
 authors = []
 license = ""
@@ -7,7 +7,7 @@
  "permissions": [
    "core:default",
    "shell:default",
-    "shell:allow-open",
+    { "identifier": "shell:allow-open", "allow": [{ "url": "https://**" }] },
    "notification:default",
    "global-shortcut:allow-register",
    "global-shortcut:allow-unregister",
@@ -27,6 +27,8 @@
    "core:window:allow-hide",
    "core:window:allow-show",
    "core:window:allow-set-fullscreen",
-    "core:window:allow-is-fullscreen"
+    "core:window:allow-is-fullscreen",
+    "core:window:allow-create",
+    "core:webview:allow-create-webview-window"
  ]
 }
@@ -1 +1 @@
-{"default":{"identifier":"default","description":"Default capabilities for Psysonic","local":true,"windows":["main"],"permissions":["core:default","shell:default","shell:allow-open","notification:default","global-shortcut:allow-register","global-shortcut:allow-unregister","store:default","store:allow-load","store:allow-set","store:allow-get","store:allow-save","dialog:default","dialog:allow-open","fs:default","fs:allow-write-file","fs:allow-mkdir","fs:scope-download-recursive","core:window:allow-set-title","core:window:allow-close","core:window:allow-hide","core:window:allow-show","core:window:allow-set-fullscreen","core:window:allow-is-fullscreen"],"platforms":["linux","macOS","windows"]}}
+{"default":{"identifier":"default","description":"Default capabilities for Psysonic","local":true,"windows":["main"],"permissions":["core:default","shell:default",{"identifier":"shell:allow-open","allow":[{"url":"https://**"}]},"notification:default","global-shortcut:allow-register","global-shortcut:allow-unregister","store:default","store:allow-load","store:allow-set","store:allow-get","store:allow-save","dialog:default","dialog:allow-open","fs:default","fs:allow-write-file","fs:allow-mkdir","fs:scope-download-recursive","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"]}}
@@ -1,7 +1,7 @@
 {
  "$schema": "https://schema.tauri.app/config/2",
  "productName": "Psysonic",
-  "version": "1.2.0",
+  "version": "1.4.4",
  "identifier": "dev.psysonic.app",
  "build": {
    "beforeDevCommand": "npm run dev",
@@ -22,7 +22,8 @@
        "fullscreen": false,
        "decorations": true,
        "transparent": false,
-        "visible": true
+        "visible": true,
+        "dragDropEnabled": false
      }
    ],
    "security": {
@@ -3,6 +3,8 @@ import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
 import { listen } from '@tauri-apps/api/event';
 import { invoke } from '@tauri-apps/api/core';
 import { getCurrentWindow } from '@tauri-apps/api/window';
+import { PanelRight, PanelRightClose } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
 import Sidebar from './components/Sidebar';
 import PlayerBar from './components/PlayerBar';
 import LiveSearch from './components/LiveSearch';
@@ -37,9 +39,11 @@ function RequireAuth({ children }: { children: React.ReactNode }) {
 }

 function AppShell() {
+  const { t } = useTranslation();
  const isFullscreenOpen = usePlayerStore(s => s.isFullscreenOpen);
  const toggleFullscreen = usePlayerStore(s => s.toggleFullscreen);
  const isQueueVisible = usePlayerStore(s => s.isQueueVisible);
+  const toggleQueue = usePlayerStore(s => s.toggleQueue);
  const initializeFromServerQueue = usePlayerStore(s => s.initializeFromServerQueue);
  const currentTrack = usePlayerStore(s => s.currentTrack);
  const isPlaying = usePlayerStore(s => s.isPlaying);
@@ -124,6 +128,13 @@ function AppShell() {
          <LiveSearch />
          <div className="spacer" />
          <NowPlayingDropdown />
+          <button
+            className="collapse-btn"
+            onClick={toggleQueue}
+            title={t('player.toggleQueue')}
+          >
+            {isQueueVisible ? <PanelRightClose size={24} /> : <PanelRight size={24} />}
+          </button>
        </header>
        <div className="content-body" style={{ padding: 0 }}>
          <Routes>
@@ -163,7 +163,7 @@ export async function getAlbumList(
 }

 export async function getRandomSongs(size = 50, genre?: string, timeout = 15000): Promise<SubsonicSong[]> {
-  const params: Record<string, string | number> = { size };
+  const params: Record<string, string | number> = { size, _t: Date.now() };
  if (genre) params.genre = genre;
  const data = await api<{ randomSongs: { song: SubsonicSong[] } }>('getRandomSongs.view', params, timeout);
  return data.randomSongs?.song ?? [];
@@ -0,0 +1,211 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Play, Star, ExternalLink, X, ChevronLeft, Download, ListPlus, Info } from 'lucide-react';
+import { SubsonicSong } from '../api/subsonic';
+import CachedImage from './CachedImage';
+import { useTranslation } from 'react-i18next';
+
+function formatDuration(seconds: number): string {
+  const m = Math.floor(seconds / 60);
+  const s = seconds % 60;
+  return `${m}:${s.toString().padStart(2, '0')}`;
+}
+
+function formatSize(bytes?: number): string {
+  if (!bytes) return '';
+  return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+}
+
+function sanitizeHtml(html: string): string {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(html, 'text/html');
+  doc.querySelectorAll('script, style, iframe, object, embed, form, input, button, select, base, meta, link').forEach(el => el.remove());
+  doc.querySelectorAll('*').forEach(el => {
+    Array.from(el.attributes).forEach(attr => {
+      const name = attr.name.toLowerCase();
+      const val = attr.value.toLowerCase().trim();
+      if (
+        name.startsWith('on') ||
+        (name === 'href' && (val.startsWith('javascript:') || val.startsWith('data:'))) ||
+        (name === 'src' && (val.startsWith('javascript:') || val.startsWith('data:')))
+      ) {
+        el.removeAttribute(attr.name);
+      }
+    });
+  });
+  return doc.body.innerHTML;
+}
+
+function BioModal({ bio, onClose }: { bio: string; onClose: () => void }) {
+  const { t } = useTranslation();
+  return (
+    <div className="modal-overlay" onClick={onClose} role="dialog" aria-modal="true" aria-label={t('albumDetail.bioModal')}>
+      <div className="modal-content" onClick={e => e.stopPropagation()}>
+        <button className="modal-close" onClick={onClose} aria-label={t('albumDetail.bioClose')}><X size={18} /></button>
+        <h3 className="modal-title">{t('albumDetail.bioModal')}</h3>
+        <div className="artist-bio" dangerouslySetInnerHTML={{ __html: sanitizeHtml(bio) }} data-selectable />
+      </div>
+    </div>
+  );
+}
+
+interface AlbumInfo {
+  id: string;
+  name: string;
+  artist: string;
+  artistId: string;
+  year?: number;
+  genre?: string;
+  coverArt?: string;
+  recordLabel?: string;
+}
+
+interface AlbumHeaderProps {
+  info: AlbumInfo;
+  songs: SubsonicSong[];
+  coverUrl: string;
+  coverKey: string;
+  resolvedCoverUrl: string | null;
+  isStarred: boolean;
+  downloadProgress: number | null;
+  bio: string | null;
+  bioOpen: boolean;
+  onToggleStar: () => void;
+  onDownload: () => void;
+  onPlayAll: () => void;
+  onEnqueueAll: () => void;
+  onBio: () => void;
+  onCloseBio: () => void;
+}
+
+export default function AlbumHeader({
+  info,
+  songs,
+  coverUrl,
+  coverKey,
+  resolvedCoverUrl,
+  isStarred,
+  downloadProgress,
+  bio,
+  bioOpen,
+  onToggleStar,
+  onDownload,
+  onPlayAll,
+  onEnqueueAll,
+  onBio,
+  onCloseBio,
+}: AlbumHeaderProps) {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+
+  const totalDuration = songs.reduce((acc, s) => acc + s.duration, 0);
+  const totalSize = songs.reduce((acc, s) => acc + (s.size ?? 0), 0);
+
+  return (
+    <>
+      {bioOpen && bio && <BioModal bio={bio} onClose={onCloseBio} />}
+
+      <div className="album-detail-header">
+        {resolvedCoverUrl && (
+          <div
+            className="album-detail-bg"
+            style={{ backgroundImage: `url(${resolvedCoverUrl})` }}
+            aria-hidden="true"
+          />
+        )}
+        <div className="album-detail-overlay" aria-hidden="true" />
+
+        <div className="album-detail-content">
+          <button className="btn btn-ghost album-detail-back" onClick={() => navigate(-1)}>
+            <ChevronLeft size={16} /> {t('albumDetail.back')}
+          </button>
+          <div className="album-detail-hero">
+            {coverUrl ? (
+              <CachedImage className="album-detail-cover" src={coverUrl} cacheKey={coverKey} alt={`${info.name} Cover`} />
+            ) : (
+              <div className="album-detail-cover album-cover-placeholder">♪</div>
+            )}
+            <div className="album-detail-meta">
+              <span className="badge album-detail-badge">{t('common.album')}</span>
+              <h1 className="album-detail-title">{info.name}</h1>
+              <p className="album-detail-artist">
+                <button
+                  className="album-detail-artist-link"
+                  data-tooltip={t('albumDetail.goToArtist', { artist: info.artist })}
+                  onClick={() => navigate(`/artist/${info.artistId}`)}
+                >
+                  {info.artist}
+                </button>
+              </p>
+              <div className="album-detail-info">
+                {info.year && <span>{info.year}</span>}
+                {info.genre && <span>· {info.genre}</span>}
+                <span>· {songs.length} Tracks</span>
+                <span>· {formatDuration(totalDuration)}</span>
+                {info.recordLabel && (
+                  <>
+                    <span className="album-info-dot">·</span>
+                    <button
+                      className="album-detail-artist-link"
+                      data-tooltip={t('albumDetail.moreLabelAlbums', { label: info.recordLabel })}
+                      onClick={() => navigate(`/label/${encodeURIComponent(info.recordLabel!)}`)}
+                    >
+                      {info.recordLabel}
+                    </button>
+                  </>
+                )}
+              </div>
+              <div className="album-detail-actions">
+                <div className="album-detail-actions-primary">
+                  <button className="btn btn-primary" id="album-play-all-btn" onClick={onPlayAll}>
+                    <Play size={16} fill="currentColor" /> {t('albumDetail.playAll')}
+                  </button>
+                  <button
+                    className="btn btn-surface"
+                    onClick={onEnqueueAll}
+                    data-tooltip={t('albumDetail.enqueueTooltip')}
+                  >
+                    <ListPlus size={16} /> {t('albumDetail.enqueue')}
+                  </button>
+                </div>
+
+                <button
+                  className="btn btn-ghost"
+                  id="album-star-btn"
+                  onClick={onToggleStar}
+                  data-tooltip={isStarred ? t('albumDetail.favoriteRemove') : t('albumDetail.favoriteAdd')}
+                  style={{ color: isStarred ? 'var(--accent)' : 'inherit', border: isStarred ? '1px solid var(--accent)' : undefined }}
+                >
+                  <Star size={16} fill={isStarred ? 'currentColor' : 'none'} />
+                  {t('albumDetail.favorite')}
+                </button>
+
+                <button className="btn btn-ghost" id="album-bio-btn" onClick={onBio}>
+                  <ExternalLink size={16} /> {t('albumDetail.artistBio')}
+                </button>
+
+                {downloadProgress !== null ? (
+                  <div className="download-progress-wrap">
+                    <Download size={14} />
+                    <div className="download-progress-bar">
+                      <div className="download-progress-fill" style={{ width: `${downloadProgress}%` }} />
+                    </div>
+                    <span className="download-progress-pct">{downloadProgress}%</span>
+                  </div>
+                ) : (
+                  <button className="btn btn-ghost" id="album-download-btn" onClick={onDownload}>
+                    <Download size={16} /> {t('albumDetail.download')}{totalSize > 0 ? ` · ${formatSize(totalSize)}` : ''}
+                  </button>
+                )}
+                <span className="download-hint">
+                  <Info size={12} />
+                  {t('albumDetail.downloadHintShort')}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
@@ -0,0 +1,186 @@
+import React from 'react';
+import { Play, Star } from 'lucide-react';
+import { SubsonicSong } from '../api/subsonic';
+import { Track } from '../store/playerStore';
+import { useTranslation } from 'react-i18next';
+
+function formatDuration(seconds: number): string {
+  const m = Math.floor(seconds / 60);
+  const s = seconds % 60;
+  return `${m}:${s.toString().padStart(2, '0')}`;
+}
+
+function codecLabel(song: { suffix?: string; bitRate?: number }): string {
+  const parts: string[] = [];
+  if (song.suffix) parts.push(song.suffix.toUpperCase());
+  if (song.bitRate) parts.push(`${song.bitRate} kbps`);
+  return parts.join(' · ');
+}
+
+function StarRating({ value, onChange }: { value: number; onChange: (r: number) => void }) {
+  const { t } = useTranslation();
+  const [hover, setHover] = React.useState(0);
+  return (
+    <div className="star-rating" role="radiogroup" aria-label={t('albumDetail.ratingLabel')}>
+      {[1, 2, 3, 4, 5].map(n => (
+        <button
+          key={n}
+          className={`star ${(hover || value) >= n ? 'filled' : ''}`}
+          onMouseEnter={() => setHover(n)}
+          onMouseLeave={() => setHover(0)}
+          onClick={() => onChange(n)}
+          aria-label={`${n}`}
+          role="radio"
+          aria-checked={(hover || value) >= n}
+        >
+          ★
+        </button>
+      ))}
+    </div>
+  );
+}
+
+interface AlbumTrackListProps {
+  songs: SubsonicSong[];
+  hasVariousArtists: boolean;
+  currentTrack: Track | null;
+  isPlaying: boolean;
+  hoveredSongId: string | null;
+  setHoveredSongId: (id: string | null) => void;
+  ratings: Record<string, number>;
+  starredSongs: Set<string>;
+  onPlaySong: (song: SubsonicSong) => void;
+  onRate: (songId: string, rating: number) => void;
+  onToggleSongStar: (song: SubsonicSong, e: React.MouseEvent) => void;
+  onContextMenu: (x: number, y: number, track: Track, type: 'song' | 'album' | 'artist' | 'queue-item' | 'album-song') => void;
+}
+
+export default function AlbumTrackList({
+  songs,
+  hasVariousArtists,
+  currentTrack,
+  isPlaying,
+  hoveredSongId,
+  setHoveredSongId,
+  ratings,
+  starredSongs,
+  onPlaySong,
+  onRate,
+  onToggleSongStar,
+  onContextMenu,
+}: AlbumTrackListProps) {
+  const { t } = useTranslation();
+  const totalDuration = songs.reduce((acc, s) => acc + s.duration, 0);
+
+  const discs = new Map<number, SubsonicSong[]>();
+  songs.forEach(song => {
+    const disc = song.discNumber ?? 1;
+    if (!discs.has(disc)) discs.set(disc, []);
+    discs.get(disc)!.push(song);
+  });
+  const discNums = Array.from(discs.keys()).sort((a, b) => a - b);
+  const isMultiDisc = discNums.length > 1;
+
+  const makeTrack = (song: SubsonicSong): Track => ({
+    id: song.id, title: song.title, artist: song.artist, album: song.album,
+    albumId: song.albumId, artistId: song.artistId, duration: song.duration,
+    coverArt: song.coverArt, track: song.track, year: song.year,
+    bitRate: song.bitRate, suffix: song.suffix, userRating: song.userRating,
+  });
+
+  return (
+    <div className="tracklist">
+      <div className={`tracklist-header${hasVariousArtists ? ' tracklist-va' : ''}`}>
+        <div className="col-center">#</div>
+        <div>{t('albumDetail.trackTitle')}</div>
+        {hasVariousArtists && <div>{t('albumDetail.trackArtist')}</div>}
+        <div className="col-center">{t('albumDetail.trackFavorite')}</div>
+        <div className="col-center">{t('albumDetail.trackRating')}</div>
+        <div className="col-center">{t('albumDetail.trackDuration')}</div>
+        <div>{t('albumDetail.trackFormat')}</div>
+      </div>
+
+      {discNums.map(discNum => (
+        <div key={discNum}>
+          {isMultiDisc && (
+            <div className="disc-header">
+              <span className="disc-icon">💿</span>
+              CD {discNum}
+            </div>
+          )}
+          {discs.get(discNum)!.map((song, i) => (
+            <div
+              key={song.id}
+              className={`track-row${hasVariousArtists ? ' track-row-va' : ''}${currentTrack?.id === song.id ? ' active' : ''}`}
+              onMouseEnter={() => setHoveredSongId(song.id)}
+              onMouseLeave={() => setHoveredSongId(null)}
+              onDoubleClick={() => onPlaySong(song)}
+              onContextMenu={e => {
+                e.preventDefault();
+                onContextMenu(e.clientX, e.clientY, makeTrack(song), 'album-song');
+              }}
+              role="row"
+              draggable
+              onDragStart={e => {
+                e.dataTransfer.effectAllowed = 'copy';
+                e.dataTransfer.setData('text/plain', JSON.stringify({ type: 'song', track: makeTrack(song) }));
+              }}
+            >
+              <div
+                className="track-num"
+                style={{
+                  cursor: hoveredSongId === song.id ? 'pointer' : 'default',
+                  color: (hoveredSongId === song.id || currentTrack?.id === song.id) ? 'var(--accent)' : undefined,
+                }}
+                onClick={() => onPlaySong(song)}
+              >
+                {hoveredSongId === song.id && currentTrack?.id !== song.id
+                  ? <Play size={13} fill="currentColor" />
+                  : currentTrack?.id === song.id && isPlaying
+                    ? <div className="eq-bars"><span className="eq-bar" /><span className="eq-bar" /><span className="eq-bar" /></div>
+                    : currentTrack?.id === song.id
+                      ? <Play size={13} fill="currentColor" />
+                      : (song.track ?? i + 1)}
+              </div>
+              <div className="track-info">
+                <span className="track-title" data-tooltip={song.title}>{song.title}</span>
+              </div>
+              {hasVariousArtists && (
+                <div className="track-artist-cell">
+                  <span className="track-artist">{song.artist}</span>
+                </div>
+              )}
+              <div className="track-star-cell">
+                <button
+                  className="btn btn-ghost track-star-btn"
+                  onClick={e => onToggleSongStar(song, e)}
+                  data-tooltip={starredSongs.has(song.id) ? t('albumDetail.favoriteRemove') : t('albumDetail.favoriteAdd')}
+                  style={{ color: starredSongs.has(song.id) ? 'var(--accent)' : 'var(--text-muted)' }}
+                >
+                  <Star size={14} fill={starredSongs.has(song.id) ? 'currentColor' : 'none'} />
+                </button>
+              </div>
+              <StarRating
+                value={ratings[song.id] ?? song.userRating ?? 0}
+                onChange={r => onRate(song.id, r)}
+              />
+              <div className="track-duration">
+                {formatDuration(song.duration)}
+              </div>
+              <div className="track-meta">
+                {(song.suffix || song.bitRate) && (
+                  <span className="track-codec">{codecLabel(song)}</span>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      ))}
+
+      <div className={`tracklist-total${hasVariousArtists ? ' tracklist-va' : ''}`}>
+        <span className="tracklist-total-label">{t('albumDetail.trackTotal')}</span>
+        <span className="tracklist-total-value">{formatDuration(totalDuration)}</span>
+      </div>
+    </div>
+  );
+}
@@ -1,7 +1,8 @@
 import React from 'react';
-import { SubsonicArtist, buildCoverArtUrl } from '../api/subsonic';
+import { SubsonicArtist, buildCoverArtUrl, coverArtCacheKey } from '../api/subsonic';
 import { useNavigate } from 'react-router-dom';
 import { Users } from 'lucide-react';
+import CachedImage from './CachedImage';

 interface Props {
  artist: SubsonicArtist;
@@ -12,16 +13,14 @@ export default function ArtistCardLocal({ artist }: Props) {
  const coverId = artist.coverArt || artist.id;

  return (
-    <div 
-      className="artist-card"
-      onClick={() => navigate(`/artist/${artist.id}`)}
-    >
-      <div className="artist-card-avatar" style={{ position: 'relative', overflow: 'hidden' }}>
+    <div className="artist-card" onClick={() => navigate(`/artist/${artist.id}`)}>
+      <div className="artist-card-avatar">
        {coverId ? (
-          <img 
-            src={buildCoverArtUrl(coverId, 200)} 
+          <CachedImage
+            src={buildCoverArtUrl(coverId, 300)}
+            cacheKey={coverArtCacheKey(coverId, 300)}
            alt={artist.name}
-            style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+            loading="lazy"
            onError={(e) => {
              e.currentTarget.style.display = 'none';
              e.currentTarget.parentElement?.classList.add('fallback-visible');
@@ -31,14 +30,14 @@ export default function ArtistCardLocal({ artist }: Props) {
          <Users size={32} color="var(--text-muted)" />
        )}
      </div>
-      <div className="artist-card-name" data-tooltip={artist.name}>
-        {artist.name}
+      <div className="artist-card-info">
+        <span className="artist-card-name" data-tooltip={artist.name}>{artist.name}</span>
+        {typeof artist.albumCount === 'number' && (
+          <span className="artist-card-meta">
+            {artist.albumCount} {artist.albumCount === 1 ? 'Album' : 'Alben'}
+          </span>
+        )}
      </div>
-      {typeof artist.albumCount === 'number' && (
-        <div className="artist-card-meta">
-          {artist.albumCount} {artist.albumCount === 1 ? 'Album' : 'Alben'}
-        </div>
-      )}
    </div>
  );
 }
@@ -59,10 +59,10 @@ export default function ArtistRow({ title, artists, moreLink, moreText, onLoadMo
  if (artists.length === 0) return null;

  return (
-    <section className="artist-row-section">
-      <div className="artist-row-header">
+    <section className="album-row-section">
+      <div className="album-row-header">
        <h2 className="section-title" style={{ marginBottom: 0 }}>{title}</h2>
-        <div className="artist-row-nav">
+        <div className="album-row-nav">
          <button 
            className={`nav-btn ${!showLeft ? 'disabled' : ''}`} 
            onClick={() => scroll('left')}
@@ -10,7 +10,9 @@ export function useCachedUrl(fetchUrl: string, cacheKey: string): string {
  const [resolved, setResolved] = useState('');
  useEffect(() => {
    if (!fetchUrl) { setResolved(''); return; }
-    getCachedUrl(fetchUrl, cacheKey).then(setResolved);
+    let cancelled = false;
+    getCachedUrl(fetchUrl, cacheKey).then(url => { if (!cancelled) setResolved(url); });
+    return () => { cancelled = true; };
  }, [fetchUrl, cacheKey]);
  return resolved || fetchUrl;
 }
@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Play, ListPlus, Radio, Star, Download, ChevronRight, User } from 'lucide-react';
+import { Play, ListPlus, Radio, Star, Download, ChevronRight, User, Disc3 } from 'lucide-react';
 import { usePlayerStore, Track } from '../store/playerStore';
 import { SubsonicAlbum, SubsonicArtist, star, unstar, getSimilarSongs2, getTopSongs, buildDownloadUrl, getAlbum } from '../api/subsonic';
 import { useNavigate } from 'react-router-dom';
@@ -146,6 +146,11 @@ export default function ContextMenu() {
                </div>
              )}
              <div className="context-menu-divider" />
+              {song.albumId && (
+                <div className="context-menu-item" onClick={() => handleAction(() => navigate(`/album/${song.albumId}`))}>
+                  <Disc3 size={14} /> {t('contextMenu.openAlbum')}
+                </div>
+              )}
              <div className="context-menu-item" onClick={() => handleAction(() => startRadio(song.artist, song.artist))}>
                <Radio size={14} /> {t('contextMenu.startRadio')}
              </div>
@@ -205,6 +210,14 @@ export default function ContextMenu() {
                {t('contextMenu.removeFromQueue')}
              </div>
              <div className="context-menu-divider" />
+              {song.albumId && (
+                <div className="context-menu-item" onClick={() => handleAction(() => navigate(`/album/${song.albumId}`))}>
+                  <Disc3 size={14} /> {t('contextMenu.openAlbum')}
+                </div>
+              )}
+              <div className="context-menu-item" onClick={() => handleAction(() => star(song.id, 'song'))}>
+                <Star size={14} /> {t('contextMenu.favorite')}
+              </div>
              <div className="context-menu-item" onClick={() => handleAction(() => startRadio(song.artist, song.artist))}>
                <Radio size={14} /> {t('contextMenu.startRadio')}
              </div>
@@ -1,12 +1,13 @@
 import React, { useCallback, useEffect, useState, useRef, memo } from 'react';
 import {
  Play, Pause, SkipBack, SkipForward,
-  ChevronDown, Repeat, Repeat1, Square, Music
+  ChevronDown, Repeat, Repeat1, Square, Music, AudioWaveform, Shuffle
 } from 'lucide-react';
 import { usePlayerStore } from '../store/playerStore';
 import { buildCoverArtUrl, coverArtCacheKey, getArtistInfo } from '../api/subsonic';
 import CachedImage, { useCachedUrl } from './CachedImage';
 import { useTranslation } from 'react-i18next';
+import VisualizerCanvas from './VisualizerCanvas';

 function formatTime(seconds: number): string {
  if (!seconds || isNaN(seconds)) return '0:00';
@@ -147,6 +148,10 @@ export default function FullscreenPlayer({ onClose }: FullscreenPlayerProps) {
  const stop         = usePlayerStore(s => s.stop);
  const toggleRepeat = usePlayerStore(s => s.toggleRepeat);

+  const [vizActive, setVizActive] = useState(false);
+  const [nextPresetTrigger, setNextPresetTrigger] = useState(0);
+  const [presetName, setPresetName] = useState('');
+
  const duration = currentTrack?.duration ?? 0;
  const coverUrl = currentTrack?.coverArt ? buildCoverArtUrl(currentTrack.coverArt, 800) : '';
  const coverKey = currentTrack?.coverArt ? coverArtCacheKey(currentTrack.coverArt, 800) : '';
@@ -177,20 +182,59 @@ export default function FullscreenPlayer({ onClose }: FullscreenPlayerProps) {
  return (
    <div className="fs-player" role="dialog" aria-modal="true" aria-label={t('player.fullscreen')}>

-      {/* Layer 1 — blurred artist image (falls back to cover art) */}
-      <FsBg url={bgUrl} />
-      <div className="fs-bg-overlay" aria-hidden="true" />
-
-      {/* Layer 2 — drifting color orbs */}
-      <div className="fs-orb fs-orb-1" aria-hidden="true" />
-      <div className="fs-orb fs-orb-2" aria-hidden="true" />
-      <div className="fs-orb fs-orb-3" aria-hidden="true" />
+      {/* Layer 1 — blurred artist image OR visualizer */}
+      {vizActive && currentTrack ? (
+        <VisualizerCanvas
+          trackId={currentTrack.id}
+          nextPresetTrigger={nextPresetTrigger}
+          onPresetName={setPresetName}
+        />
+      ) : (
+        <>
+          <FsBg url={bgUrl} />
+          <div className="fs-bg-overlay" aria-hidden="true" />
+          <div className="fs-orb fs-orb-1" aria-hidden="true" />
+          <div className="fs-orb fs-orb-2" aria-hidden="true" />
+          <div className="fs-orb fs-orb-3" aria-hidden="true" />
+        </>
+      )}

      {/* Close */}
      <button className="fs-close" onClick={onClose} aria-label={t('player.closeFullscreen')}>
        <ChevronDown size={28} />
      </button>

+      {/* Visualizer toggle + preset controls */}
+      <div style={{ position: 'absolute', top: '1.25rem', right: '4rem', display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+        {vizActive && (
+          <>
+            {presetName && (
+              <span style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)', maxWidth: 200, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                {presetName}
+              </span>
+            )}
+            <button
+              className="fs-btn fs-btn-sm"
+              onClick={() => setNextPresetTrigger(n => n + 1)}
+              aria-label={t('player.nextPreset')}
+              data-tooltip={t('player.nextPreset')}
+              style={{ color: 'rgba(255,255,255,0.7)' }}
+            >
+              <Shuffle size={14} />
+            </button>
+          </>
+        )}
+        <button
+          className={`fs-btn fs-btn-sm ${vizActive ? 'active' : ''}`}
+          onClick={() => setVizActive(v => !v)}
+          aria-label={t('player.visualizer')}
+          data-tooltip={t('player.visualizer')}
+          style={{ color: vizActive ? 'white' : 'rgba(255,255,255,0.5)' }}
+        >
+          <AudioWaveform size={16} />
+        </button>
+      </div>
+
      {/* Center stage — everything vertically + horizontally centered */}
      <div className="fs-stage">

@@ -42,7 +42,11 @@ function HeroBg({ url }: { url: string }) {
  );
 }

-export default function Hero() {
+interface HeroProps {
+  albums?: SubsonicAlbum[];
+}
+
+export default function Hero({ albums: albumsProp }: HeroProps = {}) {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const [albums, setAlbums] = useState<SubsonicAlbum[]>([]);
@@ -50,8 +54,9 @@ export default function Hero() {
  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);

  useEffect(() => {
+    if (albumsProp?.length) { setAlbums(albumsProp); return; }
    getRandomAlbums(8).then(a => { if (a.length) setAlbums(a); }).catch(() => {});
-  }, []);
+  }, [albumsProp]);

  // Start / restart auto-advance timer
  const startTimer = useCallback((len: number) => {
@@ -1,10 +1,12 @@
 import React, { useCallback, useMemo } from 'react';
 import {
-  Play, Pause, SkipBack, SkipForward, Volume2, VolumeX, Music, List, Square, Repeat, Repeat1, Maximize2
+  Play, Pause, SkipBack, SkipForward, Volume2, VolumeX, Music,
+  Square, Repeat, Repeat1, Maximize2
 } from 'lucide-react';
 import { usePlayerStore } from '../store/playerStore';
 import { buildCoverArtUrl, coverArtCacheKey } from '../api/subsonic';
 import CachedImage from './CachedImage';
+import WaveformSeek from './WaveformSeek';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';

@@ -18,32 +20,27 @@ function formatTime(seconds: number): string {
 export default function PlayerBar() {
  const { t } = useTranslation();
  const navigate = useNavigate();
-  const { currentTrack, isPlaying, progress, buffered, currentTime, volume, togglePlay, next, previous, seek, setVolume, isQueueVisible, toggleQueue, stop, toggleRepeat, repeatMode, toggleFullscreen } = usePlayerStore();
+  const {
+    currentTrack, isPlaying, currentTime, volume,
+    togglePlay, next, previous, setVolume,
+    stop, toggleRepeat, repeatMode, toggleFullscreen,
+  } = usePlayerStore();

  const duration = currentTrack?.duration ?? 0;
  const coverSrc = useMemo(() => currentTrack?.coverArt ? buildCoverArtUrl(currentTrack.coverArt, 128) : '', [currentTrack?.coverArt]);
  const coverKey = currentTrack?.coverArt ? coverArtCacheKey(currentTrack.coverArt, 128) : '';

-  const handleSeek = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    seek(parseFloat(e.target.value));
-  }, [seek]);
-
  const handleVolume = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
    setVolume(parseFloat(e.target.value));
  }, [setVolume]);

-  const pct = progress * 100;
-  const buf = Math.max(pct, buffered * 100);
-  const progressStyle = {
-    background: `linear-gradient(to right, var(--ctp-mauve) ${pct}%, var(--ctp-overlay0) ${pct}%, var(--ctp-overlay0) ${buf}%, var(--ctp-surface2) ${buf}%)`,
-  };
-
  const volumeStyle = {
    background: `linear-gradient(to right, var(--ctp-mauve) ${volume * 100}%, var(--ctp-surface2) ${volume * 100}%)`,
  };

  return (
    <footer className="player-bar" role="region" aria-label={t('player.regionLabel')}>
+
      {/* Track Info */}
      <div className="player-track-info">
        <div
@@ -89,88 +86,69 @@ export default function PlayerBar() {
        </div>
      </div>

-      {/* Controls + Progress */}
-      <div className="player-controls">
-        <div className="player-buttons">
-          <button className="player-btn" onClick={stop} aria-label={t('player.stop')} data-tooltip={t('player.stop')}>
-            <Square size={16} fill="currentColor" />
-          </button>
-          
-          <button className="player-btn" onClick={previous} aria-label={t('player.prev')} data-tooltip={t('player.prev')}>
-            <SkipBack size={20} />
-          </button>
-
-          <button
-            className="player-btn player-btn-primary"
-            onClick={togglePlay}
-            aria-label={isPlaying ? t('player.pause') : t('player.play')}
-            data-tooltip={isPlaying ? t('player.pause') : t('player.play')}
-          >
-            {isPlaying ? <Pause size={22} /> : <Play size={22} fill="currentColor" />}
-          </button>
-
-          <button className="player-btn" onClick={next} aria-label={t('player.next')} data-tooltip={t('player.next')}>
-            <SkipForward size={20} />
-          </button>
-
-          <button 
-            className="player-btn" 
-            onClick={toggleRepeat} 
-            aria-label={t('player.repeat')} 
-            data-tooltip={`${t('player.repeat')}: ${repeatMode === 'off' ? t('player.repeatOff') : repeatMode === 'all' ? t('player.repeatAll') : t('player.repeatOne')}`}
-            style={{ color: repeatMode !== 'off' ? 'var(--accent)' : 'inherit' }}
-          >
-            {repeatMode === 'one' ? <Repeat1 size={18} /> : <Repeat size={18} />}
-          </button>
-        </div>
-
-        <div className="player-progress">
-          <span className="player-time">{formatTime(currentTime)}</span>
-          <div className="player-progress-bar">
-            <input
-              type="range"
-              id="player-seek"
-              min={0}
-              max={1}
-              step={0.001}
-              value={progress}
-              onChange={handleSeek}
-              style={progressStyle}
-              aria-label={t('player.progress')}
-            />
-          </div>
-          <span className="player-time">{formatTime(duration)}</span>
-        </div>
-      </div>
-
-      {/* Volume + Connection */}
-      <div className="player-right">
-        <div className="volume-control" aria-label={t('player.volume')}>
-          {volume === 0 ? <VolumeX size={16} /> : <Volume2 size={16} />}
-          <input
-            type="range"
-            id="player-volume"
-            min={0}
-            max={1}
-            step={0.01}
-            value={volume}
-            onChange={handleVolume}
-            style={volumeStyle}
-            aria-label={t('player.volume')}
-          />
-        </div>
-
-
-        <button 
-          className="player-btn" 
-          onClick={toggleQueue} 
-          aria-label={t('player.toggleQueue')} 
-          data-tooltip={t('player.toggleQueue')}
-          style={{ marginLeft: 'var(--space-3)', color: isQueueVisible ? 'var(--accent)' : 'var(--text-secondary)' }}
+      {/* Transport Controls */}
+      <div className="player-buttons">
+        <button className="player-btn player-btn-sm" onClick={stop} aria-label={t('player.stop')} data-tooltip={t('player.stop')}>
+          <Square size={14} fill="currentColor" />
+        </button>
+        <button className="player-btn" onClick={previous} aria-label={t('player.prev')} data-tooltip={t('player.prev')}>
+          <SkipBack size={19} />
+        </button>
+        <button
+          className="player-btn player-btn-primary"
+          onClick={togglePlay}
+          aria-label={isPlaying ? t('player.pause') : t('player.play')}
+          data-tooltip={isPlaying ? t('player.pause') : t('player.play')}
        >
-          <List size={18} />
+          {isPlaying ? <Pause size={22} /> : <Play size={22} fill="currentColor" />}
+        </button>
+        <button className="player-btn" onClick={next} aria-label={t('player.next')} data-tooltip={t('player.next')}>
+          <SkipForward size={19} />
+        </button>
+        <button
+          className="player-btn player-btn-sm"
+          onClick={toggleRepeat}
+          aria-label={t('player.repeat')}
+          data-tooltip={`${t('player.repeat')}: ${repeatMode === 'off' ? t('player.repeatOff') : repeatMode === 'all' ? t('player.repeatAll') : t('player.repeatOne')}`}
+          style={{ color: repeatMode !== 'off' ? 'var(--accent)' : undefined }}
+        >
+          {repeatMode === 'one' ? <Repeat1 size={14} /> : <Repeat size={14} />}
        </button>
      </div>
+
+      {/* Waveform Seekbar */}
+      <div className="player-waveform-section">
+        <span className="player-time">{formatTime(currentTime)}</span>
+        <div className="player-waveform-wrap">
+          <WaveformSeek trackId={currentTrack?.id} />
+        </div>
+        <span className="player-time">{formatTime(duration)}</span>
+      </div>
+
+      {/* Volume */}
+      <div className="player-volume-section">
+        <button
+          className="player-btn player-btn-sm"
+          onClick={() => setVolume(volume === 0 ? 0.7 : 0)}
+          aria-label={t('player.volume')}
+          style={{ color: 'var(--text-muted)', flexShrink: 0 }}
+        >
+          {volume === 0 ? <VolumeX size={16} /> : <Volume2 size={16} />}
+        </button>
+        <input
+          type="range"
+          id="player-volume"
+          min={0}
+          max={1}
+          step={0.01}
+          value={volume}
+          onChange={handleVolume}
+          style={volumeStyle}
+          aria-label={t('player.volume')}
+          className="player-volume-slider"
+        />
+      </div>
+
    </footer>
  );
 }
@@ -110,6 +110,10 @@ function LoadPlaylistModal({ onClose, onLoad }: { onClose: () => void, onLoad: (
  );
 }

+// Module-level fallback for fromIdx — survives the dragend-before-drop race on
+// macOS WKWebView AND the dataTransfer.getData('') bug on Windows WebView2.
+let _dragFromIdx: number | null = null;
+
 export default function QueuePanel() {
  const { t } = useTranslation();
  const navigate = useNavigate();
@@ -124,6 +128,7 @@ export default function QueuePanel() {
  const reorderQueue = usePlayerStore(s => s.reorderQueue);
  const shuffleQueue = usePlayerStore(s => s.shuffleQueue);
  const enqueue = usePlayerStore(s => s.enqueue);
+  const contextMenu = usePlayerStore(s => s.contextMenu);

  const [draggedIdx, setDraggedIdx] = useState<number | null>(null);
  const [dragOverIdx, setDragOverIdx] = useState<number | null>(null);
@@ -154,10 +159,9 @@ export default function QueuePanel() {
  const onDragStart = (e: React.DragEvent, index: number) => {
    isDraggingInternalRef.current = true;
    draggedIdxRef.current = index;
+    _dragFromIdx = index;
    setDraggedIdx(index);
    e.dataTransfer.effectAllowed = 'move';
-    // Store index in dataTransfer too — on macOS WKWebView dragend fires before
-    // drop, so the ref will already be null; dataTransfer survives that race.
    e.dataTransfer.setData('text/plain', JSON.stringify({ type: 'queue_reorder', index }));
  };

@@ -179,6 +183,9 @@ export default function QueuePanel() {
    isDraggingInternalRef.current = false;
    draggedIdxRef.current = null;
    dragOverIdxRef.current = null;
+    // _dragFromIdx intentionally NOT cleared here — drop fires after dragend on
+    // macOS WKWebView, so we need the value to survive into onDropQueue.
+    // It is cleared in onDropQueue after use instead.
  };

  const onDropQueue = async (e: React.DragEvent) => {
@@ -197,9 +204,11 @@ export default function QueuePanel() {
      if (raw) parsedData = JSON.parse(raw);
    } catch { /* ignore */ }

-    if (parsedData?.type === 'queue_reorder') {
-      // fromIdx: always reliable from dataTransfer (set during dragstart)
-      const fromIdx: number = parsedData.index;
+    if (parsedData?.type === 'queue_reorder' || _dragFromIdx !== null) {
+      // fromIdx: prefer dataTransfer value; fall back to module-level var for
+      // Windows WebView2 where getData() can return '' in the drop handler.
+      const fromIdx: number = parsedData?.index ?? _dragFromIdx!;
+      _dragFromIdx = null;

      // toIdx: calculate from drop coordinates — avoids all ref timing issues.
      // Works even when dragend fires before drop (macOS WKWebView / Windows WebView2).
@@ -220,6 +229,7 @@ export default function QueuePanel() {
    }

    // External drop (song / album dragged from elsewhere in the app)
+    _dragFromIdx = null;
    if (!parsedData) return;
    if (parsedData.type === 'song') {
      enqueue([parsedData.track]);
@@ -245,7 +255,23 @@ export default function QueuePanel() {
      }}
    >
      <div className="queue-header">
-        <h2 style={{ fontSize: '14px', fontWeight: 600, margin: 0 }}>{t('queue.title')}</h2>
+        <div>
+          <h2 style={{ fontSize: '14px', fontWeight: 600, margin: 0 }}>{t('queue.title')}</h2>
+          {queue.length > 0 && (() => {
+            const totalSecs = queue.reduce((acc, t) => acc + (t.duration || 0), 0);
+            const h = Math.floor(totalSecs / 3600);
+            const m = Math.floor((totalSecs % 3600) / 60);
+            const s = totalSecs % 60;
+            const dur = h > 0
+              ? `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`
+              : `${m}:${s.toString().padStart(2, '0')}`;
+            return (
+              <div style={{ fontSize: '11px', color: 'var(--text-muted)', marginTop: '2px' }}>
+                {queue.length} {queue.length === 1 ? t('queue.trackSingular') : t('queue.trackPlural')} · {dur}
+              </div>
+            );
+          })()}
+        </div>
        
        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
          <button onClick={() => shuffleQueue()} style={{ color: 'var(--text-muted)', cursor: 'pointer', display: 'flex' }} aria-label={t('queue.shuffle')} data-tooltip={t('queue.shuffle')} disabled={queue.length < 2}>
@@ -277,18 +303,18 @@ export default function QueuePanel() {
            )}
          </div>
          <div className="queue-current-info">
-            <h3
-              className="truncate"
-              data-tooltip={currentTrack.title}
-              style={{ cursor: currentTrack.albumId ? 'pointer' : 'default' }}
-              onClick={() => currentTrack.albumId && navigate(`/album/${currentTrack.albumId}`)}
-            >{currentTrack.title}</h3>
-            {currentTrack.year && <div className="queue-current-sub">{currentTrack.year}</div>}
+            <h3 className="truncate" data-tooltip={currentTrack.title}>{currentTrack.title}</h3>
+            <div
+              className="queue-current-sub truncate"
+              data-tooltip={currentTrack.artist}
+              style={{ cursor: currentTrack.artistId ? 'pointer' : 'default' }}
+              onClick={() => currentTrack.artistId && navigate(`/artist/${currentTrack.artistId}`)}
+            >{currentTrack.artist}</div>
            <div
              className="queue-current-sub truncate"
              data-tooltip={currentTrack.album}
-              style={{ cursor: currentTrack.artistId ? 'pointer' : 'default' }}
-              onClick={() => currentTrack.artistId && navigate(`/artist/${currentTrack.artistId}`)}
+              style={{ cursor: currentTrack.albumId ? 'pointer' : 'default' }}
+              onClick={() => currentTrack.albumId && navigate(`/album/${currentTrack.albumId}`)}
            >{currentTrack.album}</div>
            
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: '6px' }}>
@@ -334,7 +360,7 @@ export default function QueuePanel() {
              <div
                key={`${track.id}-${idx}`}
                data-queue-idx={idx}
-                className={`queue-item ${isPlaying ? 'active' : ''}`}
+                className={`queue-item ${isPlaying ? 'active' : ''} ${contextMenu.isOpen && contextMenu.type === 'queue-item' && contextMenu.queueIndex === idx ? 'context-active' : ''}`}
                onClick={() => playTrack(track, queue)}
                onContextMenu={(e) => {
                  e.preventDefault();
@@ -72,20 +72,25 @@ export default function Sidebar({

  useEffect(() => {
    let cancelled = false;
-    const timer = setTimeout(async () => {
+
+    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.startsWith('v') ? tag : `v${tag}`);
+          setLatestVersion(tag.replace(/^v/i, ''));
        }
      } catch {
        // network unavailable — silently skip
      }
-    }, 1500);
-    return () => { cancelled = true; clearTimeout(timer); };
+    };
+
+    const initial = setTimeout(check, 1500);
+    const interval = setInterval(check, 10 * 60 * 1000); // every 10 minutes
+
+    return () => { cancelled = true; clearTimeout(initial); clearInterval(interval); };
  }, []);

  return (
@@ -0,0 +1,130 @@
+import { useEffect, useRef } from 'react';
+import butterchurn from 'butterchurn';
+import butterchurnPresets from 'butterchurn-presets';
+import { buildStreamUrl } from '../api/subsonic';
+import { usePlayerStore } from '../store/playerStore';
+
+interface Props {
+  trackId: string;
+  nextPresetTrigger: number;
+  onPresetName: (name: string) => void;
+}
+
+export default function VisualizerCanvas({ trackId, nextPresetTrigger, onPresetName }: Props) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const vizRef = useRef<ReturnType<typeof butterchurn.createVisualizer> | null>(null);
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+  const audioCtxRef = useRef<AudioContext | null>(null);
+  const rafRef = useRef<number>(0);
+  const presetNamesRef = useRef<string[]>([]);
+  const presetMapRef = useRef<Record<string, unknown>>({});
+  const presetIdxRef = useRef(0);
+
+  // ── Init audio analysis + butterchurn ──────────────────────────────────────
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    // Hidden audio element — routed through Web Audio for analysis only.
+    // NOT connected to AudioDestinationNode → completely silent.
+    // The Rust/rodio engine plays the actual audio.
+    const streamUrl = buildStreamUrl(trackId);
+    const audio = new Audio(streamUrl);
+    audio.crossOrigin = 'anonymous';
+    audioRef.current = audio;
+
+    const ctx = new AudioContext();
+    audioCtxRef.current = ctx;
+    const source = ctx.createMediaElementSource(audio);
+    // Intentionally no: source.connect(ctx.destination)
+
+    // Size canvas to fill its container
+    const rect = canvas.getBoundingClientRect();
+    const w = rect.width || window.innerWidth;
+    const h = rect.height || window.innerHeight;
+    canvas.width = w * (window.devicePixelRatio || 1);
+    canvas.height = h * (window.devicePixelRatio || 1);
+
+    const visualizer = butterchurn.createVisualizer(ctx, canvas, {
+      width: canvas.width,
+      height: canvas.height,
+      pixelRatio: window.devicePixelRatio || 1,
+    });
+    vizRef.current = visualizer;
+    visualizer.connectAudio(source);
+
+    // Presets
+    const presets = butterchurnPresets.getPresets();
+    const names = Object.keys(presets);
+    presetNamesRef.current = names;
+    presetMapRef.current = presets;
+    const startIdx = Math.floor(Math.random() * names.length);
+    presetIdxRef.current = startIdx;
+    visualizer.loadPreset(presets[names[startIdx]], 2.0);
+    onPresetName(names[startIdx]);
+
+    // Sync position + play state with main player
+    const { currentTime, isPlaying } = usePlayerStore.getState();
+    audio.currentTime = currentTime;
+    if (isPlaying) audio.play().catch(() => {});
+
+    // Render loop
+    const render = () => {
+      rafRef.current = requestAnimationFrame(render);
+      visualizer.render();
+    };
+    rafRef.current = requestAnimationFrame(render);
+
+    // Keep canvas sized to window
+    const onResize = () => {
+      const r = canvas.getBoundingClientRect();
+      const dpr = window.devicePixelRatio || 1;
+      canvas.width = r.width * dpr;
+      canvas.height = r.height * dpr;
+      visualizer.setRendererSize(canvas.width, canvas.height);
+    };
+    window.addEventListener('resize', onResize);
+
+    // Sync play/pause with main player
+    const unsubscribe = usePlayerStore.subscribe(state => {
+      const a = audioRef.current;
+      const c = audioCtxRef.current;
+      if (!a || !c) return;
+      if (state.isPlaying) {
+        c.resume();
+        a.play().catch(() => {});
+      } else {
+        a.pause();
+      }
+    });
+
+    return () => {
+      cancelAnimationFrame(rafRef.current);
+      window.removeEventListener('resize', onResize);
+      unsubscribe();
+      audio.pause();
+      audio.src = '';
+      ctx.close();
+      vizRef.current = null;
+    };
+  }, [trackId]); // re-init on track change
+
+  // ── Next preset ────────────────────────────────────────────────────────────
+  useEffect(() => {
+    if (!nextPresetTrigger) return;
+    const viz = vizRef.current;
+    const names = presetNamesRef.current;
+    if (!viz || names.length === 0) return;
+    const next = (presetIdxRef.current + 1) % names.length;
+    presetIdxRef.current = next;
+    viz.loadPreset(presetMapRef.current[names[next]], 2.0);
+    onPresetName(names[next]);
+  }, [nextPresetTrigger]);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', display: 'block' }}
+    />
+  );
+}
@@ -0,0 +1,180 @@
+import React, { useEffect, useRef } from 'react';
+import { usePlayerStore } from '../store/playerStore';
+
+const BAR_COUNT = 500;
+
+function hashStr(str: string): number {
+  let h = 0x811c9dc5;
+  for (let i = 0; i < str.length; i++) {
+    h = (h ^ str.charCodeAt(i)) >>> 0;
+    h = Math.imul(h, 0x01000193) >>> 0;
+  }
+  return h;
+}
+
+function makeHeights(trackId: string): Float32Array {
+  let s = hashStr(trackId);
+  const h = new Float32Array(BAR_COUNT);
+  for (let i = 0; i < BAR_COUNT; i++) {
+    s = (Math.imul(s, 1664525) + 1013904223) >>> 0;
+    h[i] = s / 0xffffffff;
+  }
+  // Smooth for an organic look
+  for (let pass = 0; pass < 5; pass++) {
+    for (let i = 1; i < BAR_COUNT - 1; i++) {
+      h[i] = h[i - 1] * 0.25 + h[i] * 0.5 + h[i + 1] * 0.25;
+    }
+  }
+  // Normalize to [0.12, 1.0]
+  let max = 0;
+  for (let i = 0; i < BAR_COUNT; i++) if (h[i] > max) max = h[i];
+  if (max > 0) {
+    for (let i = 0; i < BAR_COUNT; i++) h[i] = 0.12 + (h[i] / max) * 0.88;
+  }
+  return h;
+}
+
+function drawWaveform(
+  canvas: HTMLCanvasElement,
+  heights: Float32Array | null,
+  progress: number,
+  buffered: number,
+) {
+  const ctx = canvas.getContext('2d');
+  if (!ctx) return;
+
+  const rect = canvas.getBoundingClientRect();
+  const w = rect.width || canvas.clientWidth;
+  const h = rect.height || canvas.clientHeight;
+  if (w === 0 || h === 0) return;
+
+  const dpr = window.devicePixelRatio || 1;
+  const pw = Math.round(w * dpr);
+  const ph = Math.round(h * dpr);
+  if (canvas.width !== pw || canvas.height !== ph) {
+    canvas.width = pw;
+    canvas.height = ph;
+  }
+  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+  ctx.clearRect(0, 0, w, h);
+
+  const style = getComputedStyle(document.documentElement);
+  const colorBlue     = style.getPropertyValue('--ctp-blue').trim()     || '#89b4fa';
+  const colorMauve    = style.getPropertyValue('--ctp-mauve').trim()    || '#cba6f7';
+  const colorBuffered = style.getPropertyValue('--ctp-overlay0').trim() || '#6c7086';
+  const colorUnplayed = style.getPropertyValue('--ctp-surface1').trim() || '#313244';
+
+  if (!heights) {
+    ctx.globalAlpha = 0.3;
+    ctx.fillStyle = colorUnplayed;
+    ctx.fillRect(0, (h - 2) / 2, w, 2);
+    ctx.globalAlpha = 1;
+    return;
+  }
+
+  // Use fractional x positions so adjacent bars share exact pixel boundaries — no gaps.
+  const x1Of = (i: number) => (i / BAR_COUNT) * w;
+  const x2Of = (i: number) => ((i + 1) / BAR_COUNT) * w;
+
+  // Pass 1 — unplayed (dim)
+  ctx.globalAlpha = 0.28;
+  ctx.fillStyle = colorUnplayed;
+  for (let i = 0; i < BAR_COUNT; i++) {
+    if (i / BAR_COUNT < buffered) continue;
+    const barH = Math.max(1, heights[i] * h);
+    const x = x1Of(i);
+    ctx.fillRect(x, (h - barH) / 2, x2Of(i) - x, barH);
+  }
+
+  // Pass 2 — buffered (slightly brighter)
+  ctx.globalAlpha = 0.45;
+  ctx.fillStyle = colorBuffered;
+  for (let i = 0; i < BAR_COUNT; i++) {
+    const frac = i / BAR_COUNT;
+    if (frac < progress || frac >= buffered) continue;
+    const barH = Math.max(1, heights[i] * h);
+    const x = x1Of(i);
+    ctx.fillRect(x, (h - barH) / 2, x2Of(i) - x, barH);
+  }
+
+  // Pass 3 — played (gradient + glow)
+  if (progress > 0) {
+    const grad = ctx.createLinearGradient(0, 0, progress * w, 0);
+    grad.addColorStop(0, colorBlue);
+    grad.addColorStop(1, colorMauve);
+    ctx.globalAlpha = 1;
+    ctx.fillStyle = grad;
+    ctx.shadowColor = colorMauve;
+    ctx.shadowBlur = 5;
+    for (let i = 0; i < BAR_COUNT; i++) {
+      if (i / BAR_COUNT >= progress) break;
+      const barH = Math.max(1, heights[i] * h);
+      const x = x1Of(i);
+      ctx.fillRect(x, (h - barH) / 2, x2Of(i) - x, barH);
+    }
+    ctx.shadowBlur = 0;
+  }
+
+  ctx.globalAlpha = 1;
+}
+
+interface Props {
+  trackId: string | undefined;
+}
+
+export default function WaveformSeek({ trackId }: Props) {
+  const canvasRef   = useRef<HTMLCanvasElement>(null);
+  const heightsRef  = useRef<Float32Array | null>(null);
+  const progressRef = useRef(0);
+  const bufferedRef = useRef(0);
+  const isDragging  = useRef(false);
+
+  const progress = usePlayerStore(s => s.progress);
+  const buffered = usePlayerStore(s => s.buffered);
+  const seek     = usePlayerStore(s => s.seek);
+
+  progressRef.current = progress;
+  bufferedRef.current = buffered;
+
+  useEffect(() => {
+    heightsRef.current = trackId ? makeHeights(trackId) : null;
+  }, [trackId]);
+
+  useEffect(() => {
+    if (canvasRef.current) {
+      drawWaveform(canvasRef.current, heightsRef.current, progress, buffered);
+    }
+  }, [progress, buffered, trackId]);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ro = new ResizeObserver(() => {
+      drawWaveform(canvas, heightsRef.current, progressRef.current, bufferedRef.current);
+    });
+    ro.observe(canvas);
+    return () => ro.disconnect();
+  }, []);
+
+  const seekFromX = (clientX: number) => {
+    const canvas = canvasRef.current;
+    if (!canvas || !trackId) return;
+    const rect = canvas.getBoundingClientRect();
+    seek(Math.max(0, Math.min(1, (clientX - rect.left) / rect.width)));
+  };
+
+  useEffect(() => {
+    const up = () => { isDragging.current = false; };
+    window.addEventListener('mouseup', up);
+    return () => window.removeEventListener('mouseup', up);
+  }, []);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      style={{ width: '100%', height: '24px', cursor: trackId ? 'pointer' : 'default', display: 'block' }}
+      onMouseDown={e => { isDragging.current = true; seekFromX(e.clientX); }}
+      onMouseMove={e => { if (isDragging.current) seekFromX(e.clientX); }}
+    />
+  );
+}
@@ -127,6 +127,7 @@ const enTranslation = {
    artists: 'Artists',
    albums: 'Albums',
    songs: 'Songs',
+    enqueueAll: 'Add all to queue',
  },
  randomAlbums: {
    title: 'Random Albums',
@@ -147,17 +148,17 @@ const enTranslation = {
    play: 'Play',
    trackGenre: 'Genre',
    excludeAudiobooks: 'Exclude audiobooks & radio plays',
-    excludeAudiobooksDesc: 'Filters genres: Hörbuch, Hörspiel, Audiobook, Spoken Word, …',
-    genreBlocked: 'Genre blocked',
-    genreAddedToBlacklist: 'Added to blacklist',
+    excludeAudiobooksDesc: 'Matches keywords against genre, title, and album — e.g. Hörbuch, Audiobook, Spoken Word, …',
+    genreBlocked: 'Keyword blocked',
+    genreAddedToBlacklist: 'Added to filter list',
    genreAlreadyBlocked: 'Already blocked',
-    blacklistToggle: 'Genre Blacklist',
+    blacklistToggle: 'Keyword Filter',
    genreMixTitle: 'Genre Mix',
    genreMixDesc: 'Select a genre to get a curated random mix',
    genreMixLoadMore: 'Load 10 more',
    genreMixNoGenres: 'No genres found on server.',
    filterPanelTitle: 'Filters',
-    genreClickHint: 'Click a genre tag\nto add it to your blacklist.\nExcluded from future mixes.',
+    genreClickHint: 'Click a genre tag to add it\nas a filter keyword.\nMatches genre, title & album.',
  },
  playlists: {
    title: 'Playlists',
@@ -169,6 +170,11 @@ const enTranslation = {
    minutes: 'min.',
    track_one: '{{count}} Track',
    track_other: '{{count}} Tracks',
+    filterPlaceholder: 'Filter playlists…',
+    colName: 'Name',
+    colTracks: 'Tracks',
+    colDuration: 'Duration',
+    noResults: 'No playlists match your filter.',
  },
  albums: {
    title: 'All Albums',
@@ -277,12 +283,12 @@ const enTranslation = {
    aboutBuiltWith: 'Built with Tauri · React · TypeScript · Rust/rodio',
    aboutAiCredit: 'Developed with the support of Claude Code by Anthropic',
    randomMixTitle: 'Random Mix',
-    randomMixBlacklistTitle: 'Custom Genre Blacklist',
-    randomMixBlacklistDesc: 'Songs whose genre matches an entry in this list are excluded from the Random Mix (when "Exclude audiobooks" is active).',
-    randomMixBlacklistPlaceholder: 'Add genre…',
+    randomMixBlacklistTitle: 'Custom Filter Keywords',
+    randomMixBlacklistDesc: 'Songs are excluded when any keyword matches their genre, title, or album (active when the checkbox above is on).',
+    randomMixBlacklistPlaceholder: 'Add keyword…',
    randomMixBlacklistAdd: 'Add',
-    randomMixBlacklistEmpty: 'No custom genres added yet.',
-    randomMixHardcodedTitle: 'Built-in exclusions (active when checkbox is on)',
+    randomMixBlacklistEmpty: 'No custom keywords added yet.',
+    randomMixHardcodedTitle: 'Built-in keywords (active when checkbox is on)',
  },
  help: {
    title: 'Help',
@@ -299,7 +305,7 @@ const enTranslation = {
    q5: 'What keyboard shortcuts are available?',
    a5: 'Space = Play / Pause · Escape = Close fullscreen player. Media keys (Play/Pause, Next, Previous) work on macOS and Windows. On Linux, use the player bar buttons.',
    q6: 'What is the queue?',
-    a6: 'The queue shows all upcoming tracks. Open it with the list icon in the player bar. You can reorder tracks by dragging and save the current queue as a playlist.',
+    a6: 'The queue shows all upcoming tracks. Open it with the panel icon in the top-right header (next to the Now Playing indicator). You can reorder tracks by dragging, shuffle with the shuffle button, and save the queue as a playlist.',
    q7: 'How do I open the fullscreen player?',
    a7: 'Click the album art thumbnail in the player bar at the bottom, or the expand icon next to it. Press Escape to close it again.',
    q8: 'How does repeat work?',
@@ -325,6 +331,21 @@ const enTranslation = {
    a16: 'Psysonic uses your Navidrome server\'s built-in Last.fm integration. First, connect your Last.fm account in Navidrome\'s web interface. Then enable scrobbling in Psysonic\'s Settings.',
    q17: 'When is a scrobble sent?',
    a17: 'A scrobble is submitted after you\'ve listened to 50% of a track.',
+    q22: 'What is the waveform in the player bar?',
+    a22: 'The waveform seekbar replaces the classic progress slider. Click anywhere on it to jump to that position, or drag to scrub. The played portion glows with a blue-to-mauve gradient, the buffered range appears slightly brighter, and the unplayed portion is faded.',
+    q23: 'How do I use the MilkDrop visualizer?',
+    a23: 'Open the fullscreen player (click the album art in the player bar), then click the waveform icon in the top-right corner. The visualizer starts with a random MilkDrop preset. Use the shuffle button next to it to cycle through hundreds of presets.',
+    q24: 'Can I shuffle the queue?',
+    a24: 'Yes. Open the queue panel and click the shuffle icon in the queue header. The currently playing track stays at position 1 — all remaining tracks are randomly reordered.',
+    q25: 'Do Last.fm and Wikipedia links on artist pages open in a browser?',
+    a25: 'No — they open in a dedicated in-app window so you never leave Psysonic. The window shows the full website and can be closed independently.',
+    s7: 'Random Mix',
+    q26: 'What is Random Mix?',
+    a26: 'Random Mix builds a playlist of random tracks from your entire library. Open it via "Random Mix" in the sidebar and click "New Mix". You can adjust the track count before generating.',
+    q27: 'What is the Keyword Filter?',
+    a27: 'The Keyword Filter excludes tracks whose genre, title, or album name contains specific words. Audiobooks are filtered automatically. Add custom keywords in Settings → Random Mix, or click any genre tag in the track list to add it instantly.',
+    q28: 'What is the Super Genre Mix?',
+    a28: 'The Super Genre Mix groups your library into broad categories (Rock, Metal, Electronic, Jazz, Classical, etc.) and builds a focused mix from that style. Select a category chip below the track list. Results appear progressively as each sub-genre is fetched.',
    s6: 'Troubleshooting',
    q18: 'Cover art and artist images load slowly.',
    a18: 'Images are fetched from your server\'s disk on first load and then cached locally for 30 days. If your server\'s storage is slow, the first visit to a page may take a moment. Subsequent visits will be instant.',
@@ -352,20 +373,36 @@ const enTranslation = {
    hide: 'Hide',
    close: 'Close',
    nextTracks: 'Next Tracks',
-    emptyQueue: 'The queue is empty.'
+    emptyQueue: 'The queue is empty.',
+    trackSingular: 'track',
+    trackPlural: 'tracks',
  },
  statistics: {
    title: 'Statistics',
+    recentlyPlayed: 'Recently Played',
    mostPlayed: 'Most Played Albums',
    highestRated: 'Highest Rated Albums',
    genreDistribution: 'Genre Distribution (Top 20)',
    loadMore: 'Load more',
+    statArtists: 'Artists',
+    statAlbums: 'Albums',
+    statSongs: 'Songs',
+    statGenres: 'Genres',
+    genreSongs: '{{count}} Songs',
+    genreAlbums: '{{count}} Albums',
+    recentlyAdded: 'Recently Added',
+    decadeDistribution: 'Albums by Decade',
+    decadeAlbums_one: '{{count}} Album',
+    decadeAlbums_other: '{{count}} Albums',
+    decadeUnknown: 'Unknown',
  },
  player: {
    regionLabel: 'Music Player',
    openFullscreen: 'Open Fullscreen Player',
    fullscreen: 'Fullscreen Player',
    closeFullscreen: 'Close Fullscreen',
+    visualizer: 'Visualizer',
+    nextPreset: 'Next preset',
    closeTooltip: 'Close (Esc)',
    noTitle: 'No Title',
    stop: 'Stop',
@@ -509,6 +546,7 @@ const deTranslation = {
    artists: 'Künstler',
    albums: 'Alben',
    songs: 'Songs',
+    enqueueAll: 'Alle in die Warteschlange',
  },
  randomAlbums: {
    title: 'Zufallsalben',
@@ -529,17 +567,17 @@ const deTranslation = {
    play: 'Abspielen',
    trackGenre: 'Genre',
    excludeAudiobooks: 'Hörbücher & Hörspiele ausschließen',
-    excludeAudiobooksDesc: 'Filtert Genres: Hörbuch, Hörspiel, Audiobook, Spoken Word, …',
-    genreBlocked: 'Genre gesperrt',
-    genreAddedToBlacklist: 'Zur Blacklist hinzugefügt',
+    excludeAudiobooksDesc: 'Prüft Keywords gegen Genre, Titel und Album — z. B. Hörbuch, Audiobook, Spoken Word, …',
+    genreBlocked: 'Keyword gesperrt',
+    genreAddedToBlacklist: 'Zur Filterliste hinzugefügt',
    genreAlreadyBlocked: 'Bereits gesperrt',
-    blacklistToggle: 'Genre-Blacklist',
+    blacklistToggle: 'Keyword-Filter',
    genreMixTitle: 'Genre-Mix',
    genreMixDesc: 'Genre auswählen für einen passenden Zufallsmix',
    genreMixLoadMore: '10 weitere laden',
    genreMixNoGenres: 'Keine Genres auf dem Server gefunden.',
    filterPanelTitle: 'Filter',
-    genreClickHint: 'Genre-Tag anklicken,\num es zur Blacklist hinzuzufügen.\nBeim nächsten Mix ausgeschlossen.',
+    genreClickHint: 'Genre-Tag anklicken,\num es als Filter-Keyword hinzuzufügen.\nPrüft Genre, Titel & Album.',
  },
  playlists: {
    title: 'Playlists',
@@ -551,6 +589,11 @@ const deTranslation = {
    minutes: 'Min.',
    track_one: '{{count}} Track',
    track_other: '{{count}} Tracks',
+    filterPlaceholder: 'Playlists filtern…',
+    colName: 'Name',
+    colTracks: 'Tracks',
+    colDuration: 'Dauer',
+    noResults: 'Keine Playlists entsprechen dem Filter.',
  },
  albums: {
    title: 'Alle Alben',
@@ -659,12 +702,12 @@ const deTranslation = {
    aboutBuiltWith: 'Gebaut mit Tauri · React · TypeScript · Rust/rodio',
    aboutAiCredit: 'Mit freundlicher Unterstützung von Claude Code by Anthropic',
    randomMixTitle: 'Zufallsmix',
-    randomMixBlacklistTitle: 'Eigene Genre-Blacklist',
-    randomMixBlacklistDesc: 'Songs, deren Genre einem Eintrag in dieser Liste entspricht, werden aus dem Zufallsmix ausgeschlossen (wenn „Hörbücher ausschließen" aktiv ist).',
-    randomMixBlacklistPlaceholder: 'Genre hinzufügen…',
+    randomMixBlacklistTitle: 'Eigene Filter-Keywords',
+    randomMixBlacklistDesc: 'Songs werden ausgeschlossen, wenn ein Keyword auf Genre, Titel oder Album zutrifft (aktiv wenn die Checkbox oben an ist).',
+    randomMixBlacklistPlaceholder: 'Keyword hinzufügen…',
    randomMixBlacklistAdd: 'Hinzufügen',
-    randomMixBlacklistEmpty: 'Noch keine eigenen Genres hinzugefügt.',
-    randomMixHardcodedTitle: 'Eingebaute Ausschlüsse (aktiv wenn Checkbox an)',
+    randomMixBlacklistEmpty: 'Noch keine eigenen Keywords hinzugefügt.',
+    randomMixHardcodedTitle: 'Eingebaute Keywords (aktiv wenn Checkbox an)',
  },
  help: {
    title: 'Hilfe',
@@ -681,7 +724,7 @@ const deTranslation = {
    q5: 'Welche Tastenkürzel gibt es?',
    a5: 'Leertaste = Play / Pause · Escape = Vollbild schließen. Medientasten (Play/Pause, Weiter, Zurück) funktionieren unter macOS und Windows. Unter Linux bitte die Buttons in der Playerleiste nutzen.',
    q6: 'Was ist die Warteschlange?',
-    a6: 'Die Warteschlange zeigt alle kommenden Tracks. Öffnen mit dem Listen-Icon in der Playerleiste. Tracks können per Drag & Drop umsortiert und als Playlist gespeichert werden.',
+    a6: 'Die Warteschlange zeigt alle kommenden Tracks. Öffnen mit dem Panel-Icon oben rechts im Header (neben dem Now-Playing-Indikator). Tracks per Drag & Drop umsortieren, mit dem Shuffle-Button mischen oder als Playlist speichern.',
    q7: 'Wie öffne ich den Vollbild-Player?',
    a7: 'Klick auf das Album-Cover unten in der Playerleiste oder auf das Expand-Icon daneben. Mit Escape wieder schließen.',
    q8: 'Wie funktioniert die Wiederholfunktion?',
@@ -707,6 +750,21 @@ const deTranslation = {
    a16: 'Psysonic nutzt die eingebaute Last.fm-Integration von Navidrome. Zuerst das Last.fm-Konto im Navidrome-Webinterface verbinden, dann Scrobbling in den Psysonic-Einstellungen aktivieren.',
    q17: 'Wann wird ein Scrobble gesendet?',
    a17: 'Ein Scrobble wird übermittelt, wenn 50 % eines Tracks gehört wurden.',
+    q22: 'Was ist die Waveform in der Playerleiste?',
+    a22: 'Die Waveform-Leiste ersetzt den klassischen Fortschrittsbalken. Klick auf eine beliebige Stelle zum Springen, ziehen zum Scrubben. Der gespielte Teil leuchtet in einem Blau-Mauve-Farbverlauf, der gepufferte Bereich erscheint etwas heller, der ungespielter Teil ist abgeblendet.',
+    q23: 'Wie benutze ich den MilkDrop-Visualizer?',
+    a23: 'Vollbild-Player öffnen (Klick auf das Album-Cover in der Playerleiste), dann oben rechts auf das Waveform-Icon klicken. Der Visualizer startet mit einem zufälligen MilkDrop-Preset. Mit dem Shuffle-Button daneben durch Hunderte von Presets wechseln.',
+    q24: 'Kann ich die Warteschlange mischen?',
+    a24: 'Ja. Die Warteschlange öffnen und auf das Shuffle-Icon im Header klicken. Der aktuell laufende Track bleibt an Position 1 — alle restlichen Tracks werden zufällig neu geordnet.',
+    q25: 'Öffnen Last.fm- und Wikipedia-Links auf Künstlerseiten im Browser?',
+    a25: 'Nein — sie öffnen sich in einem eigenen In-App-Fenster, sodass du Psysonic nie verlassen musst. Das Fenster zeigt die vollständige Website und kann unabhängig geschlossen werden.',
+    s7: 'Zufallsmix',
+    q26: 'Was ist der Zufallsmix?',
+    a26: 'Der Zufallsmix erstellt eine Playlist aus zufälligen Tracks deiner gesamten Bibliothek. Über "Zufallsmix" in der Seitenleiste erreichbar, dann "Neuer Mix" klicken. Die Anzahl der Tracks ist vor der Generierung einstellbar.',
+    q27: 'Was ist der Keyword-Filter?',
+    a27: 'Der Keyword-Filter schließt Tracks aus, deren Genre, Titel oder Album bestimmte Wörter enthält. Hörbücher werden automatisch gefiltert. Eigene Keywords in Einstellungen → Zufallsmix hinzufügen oder per Klick auf ein Genre-Tag direkt in der Trackliste.',
+    q28: 'Was ist der Super-Genre-Mix?',
+    a28: 'Der Super-Genre-Mix fasst die Bibliothek in übergeordnete Kategorien zusammen (Rock, Metal, Electronic, Jazz, Klassik usw.) und erstellt daraus einen fokussierten Mix. Einen Kategorie-Chip unterhalb der Trackliste auswählen. Ergebnisse erscheinen schrittweise, während die einzelnen Sub-Genres geladen werden.',
    s6: 'Problemlösung',
    q18: 'Cover und Künstlerbilder laden langsam.',
    a18: 'Bilder werden beim ersten Aufruf vom Server geholt und dann 30 Tage lokal gecacht. Bei langsamen Server-Festplatten kann der erste Seitenaufruf einen Moment dauern. Danach geht alles sofort.',
@@ -730,24 +788,40 @@ const deTranslation = {
    delete: 'Löschen',
    deleteConfirm: 'Playlist "{{name}}" löschen?',
    clear: 'Leeren',
-    shuffle: 'Queue mischen',
+    shuffle: 'Warteschlange mischen',
    hide: 'Verbergen',
    close: 'Schließen',
    nextTracks: 'Nächste Titel',
-    emptyQueue: 'Die Warteschlange ist leer.'
+    emptyQueue: 'Die Warteschlange ist leer.',
+    trackSingular: 'Titel',
+    trackPlural: 'Titel',
  },
  statistics: {
    title: 'Statistiken',
+    recentlyPlayed: 'Zuletzt gehört',
    mostPlayed: 'Meistgespielte Alben',
    highestRated: 'Höchstbewertete Alben',
    genreDistribution: 'Genre-Verteilung (Top 20)',
    loadMore: 'Mehr laden',
+    statArtists: 'Künstler',
+    statAlbums: 'Alben',
+    statSongs: 'Songs',
+    statGenres: 'Genres',
+    genreSongs: '{{count}} Songs',
+    genreAlbums: '{{count}} Alben',
+    recentlyAdded: 'Neu hinzugefügt',
+    decadeDistribution: 'Alben nach Jahrzehnt',
+    decadeAlbums_one: '{{count}} Album',
+    decadeAlbums_other: '{{count}} Alben',
+    decadeUnknown: 'Unbekannt',
  },
  player: {
    regionLabel: 'Musikplayer',
    openFullscreen: 'Vollbild-Player öffnen',
    fullscreen: 'Vollbild-Player',
    closeFullscreen: 'Vollbild schließen',
+    visualizer: 'Visualizer',
+    nextPreset: 'Nächstes Preset',
    closeTooltip: 'Schließen (Esc)',
    noTitle: 'Kein Titel',
    stop: 'Stop',
@@ -1,15 +1,14 @@
 import React, { useEffect, useState } from 'react';
-import { useParams } from 'react-router-dom';
-import { Play, Star, ExternalLink, X, ChevronLeft, Download, ListPlus, Info } from 'lucide-react';
+import { useParams, useNavigate } from 'react-router-dom';
 import { getAlbum, getArtist, getArtistInfo, setRating, buildCoverArtUrl, coverArtCacheKey, buildDownloadUrl, star, unstar, SubsonicSong, SubsonicAlbum } from '../api/subsonic';
 import { usePlayerStore } from '../store/playerStore';
 import { useAuthStore } from '../store/authStore';
-import { useNavigate } from 'react-router-dom';
-import { open } from '@tauri-apps/plugin-shell';
 import { writeFile } from '@tauri-apps/plugin-fs';
 import { join } from '@tauri-apps/api/path';
 import AlbumCard from '../components/AlbumCard';
-import CachedImage, { useCachedUrl } from '../components/CachedImage';
+import AlbumHeader from '../components/AlbumHeader';
+import AlbumTrackList from '../components/AlbumTrackList';
+import { useCachedUrl } from '../components/CachedImage';
 import { useTranslation } from 'react-i18next';

 function sanitizeFilename(name: string): string {
@@ -20,78 +19,6 @@ function sanitizeFilename(name: string): string {
    .substring(0, 200) || 'download';
 }

-function formatDuration(seconds: number): string {
-  const m = Math.floor(seconds / 60);
-  const s = seconds % 60;
-  return `${m}:${s.toString().padStart(2, '0')}`;
-}
-
-function formatSize(bytes?: number): string {
-  if (!bytes) return '';
-  return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
-}
-
-function 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(' · ');
-}
-
-/** Strip dangerous tags/attributes from server-provided HTML (e.g. artist bios from Last.fm) */
-function sanitizeHtml(html: string): string {
-  const parser = new DOMParser();
-  const doc = parser.parseFromString(html, 'text/html');
-  doc.querySelectorAll('script, style, iframe, object, embed, form, input, button, select, base, meta, link').forEach(el => el.remove());
-  doc.querySelectorAll('*').forEach(el => {
-    Array.from(el.attributes).forEach(attr => {
-      const name = attr.name.toLowerCase();
-      const val = attr.value.toLowerCase().trim();
-      if (name.startsWith('on') || (name === 'href' && (val.startsWith('javascript:') || val.startsWith('data:'))) || (name === 'src' && (val.startsWith('javascript:') || val.startsWith('data:')))) {
-        el.removeAttribute(attr.name);
-      }
-    });
-  });
-  return doc.body.innerHTML;
-}
-
-function StarRating({ value, onChange }: { value: number; onChange: (r: number) => void }) {
-  const { t } = useTranslation();
-  const [hover, setHover] = useState(0);
-  return (
-    <div className="star-rating" role="radiogroup" aria-label={t('albumDetail.ratingLabel')}>
-      {[1,2,3,4,5].map(n => (
-        <button
-          key={n}
-          className={`star ${(hover || value) >= n ? 'filled' : ''}`}
-          onMouseEnter={() => setHover(n)}
-          onMouseLeave={() => setHover(0)}
-          onClick={() => onChange(n)}
-          aria-label={`${n}`}
-          role="radio"
-          aria-checked={(hover || value) >= n}
-        >
-          ★
-        </button>
-      ))}
-    </div>
-  );
-}
-
-interface BioModalProps { bio: string; onClose: () => void; }
-function BioModal({ bio, onClose }: BioModalProps) {
-  const { t } = useTranslation();
-  return (
-    <div className="modal-overlay" onClick={onClose} role="dialog" aria-modal="true" aria-label={t('albumDetail.bioModal')}>
-      <div className="modal-content" onClick={e => e.stopPropagation()}>
-        <button className="modal-close" onClick={onClose} aria-label={t('albumDetail.bioClose')}><X size={18} /></button>
-        <h3 style={{ marginBottom: '1rem', fontFamily: 'var(--font-display)' }}>{t('albumDetail.bioModal')}</h3>
-        <div className="artist-bio" dangerouslySetInnerHTML={{ __html: sanitizeHtml(bio) }} data-selectable />
-      </div>
-    </div>
-  );
-}
-
 export default function AlbumDetail() {
  const { t } = useTranslation();
  const { id } = useParams<{ id: string }>();
@@ -101,6 +28,8 @@ export default function AlbumDetail() {
  const enqueue = usePlayerStore(s => s.enqueue);
  const openContextMenu = usePlayerStore(s => s.openContextMenu);
  const currentTrack = usePlayerStore(s => s.currentTrack);
+  const isPlaying = usePlayerStore(s => s.isPlaying);
+
  const [album, setAlbum] = useState<Awaited<ReturnType<typeof getAlbum>> | null>(null);
  const [relatedAlbums, setRelatedAlbums] = useState<SubsonicAlbum[]>([]);
  const [ratings, setRatings] = useState<Record<string, number>>({});
@@ -136,8 +65,8 @@ export default function AlbumDetail() {
    if (!album) return;
    const tracks = album.songs.map(s => ({
      id: s.id, title: s.title, artist: s.artist, album: s.album,
-      albumId: s.albumId, artistId: s.artistId, duration: s.duration, coverArt: s.coverArt, track: s.track,
-      year: s.year, bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating,
+      albumId: s.albumId, artistId: s.artistId, duration: s.duration, coverArt: s.coverArt,
+      track: s.track, year: s.year, bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating,
    }));
    if (tracks[0]) playTrack(tracks[0], tracks);
  };
@@ -146,8 +75,8 @@ export default function AlbumDetail() {
    if (!album) return;
    const tracks = album.songs.map(s => ({
      id: s.id, title: s.title, artist: s.artist, album: s.album,
-      albumId: s.albumId, artistId: s.artistId, duration: s.duration, coverArt: s.coverArt, track: s.track,
-      year: s.year, bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating,
+      albumId: s.albumId, artistId: s.artistId, duration: s.duration, coverArt: s.coverArt,
+      track: s.track, year: s.year, bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating,
    }));
    enqueue(tracks);
  };
@@ -156,8 +85,7 @@ export default function AlbumDetail() {
    const track = {
      id: song.id, title: song.title, artist: song.artist, album: song.album,
      albumId: song.albumId, artistId: song.artistId, duration: song.duration, coverArt: song.coverArt,
-      track: song.track, year: song.year, bitRate: song.bitRate,
-      suffix: song.suffix, userRating: song.userRating
+      track: song.track, year: song.year, bitRate: song.bitRate, suffix: song.suffix, userRating: song.userRating,
    };
    playTrack(track, [track]);
  };
@@ -175,7 +103,9 @@ export default function AlbumDetail() {
    setBioOpen(true);
  };

-  const handleDownload = async (albumName: string, albumId: string) => {
+  const handleDownload = async () => {
+    if (!album) return;
+    const { name, id: albumId } = album.album;
    setDownloadProgress(0);
    try {
      const url = buildDownloadUrl(albumId);
@@ -205,13 +135,13 @@ export default function AlbumDetail() {
      const blob = new Blob(chunks);
      if (auth.downloadFolder) {
        const buffer = await blob.arrayBuffer();
-        const path = await join(auth.downloadFolder, `${sanitizeFilename(albumName)}.zip`);
+        const path = await join(auth.downloadFolder, `${sanitizeFilename(name)}.zip`);
        await writeFile(path, new Uint8Array(buffer));
      } else {
        const blobUrl = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = blobUrl;
-        a.download = `${sanitizeFilename(albumName)}.zip`;
+        a.download = `${sanitizeFilename(name)}.zip`;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
@@ -221,33 +151,31 @@ export default function AlbumDetail() {
      console.error('Download failed:', e);
      setDownloadProgress(null);
    } finally {
-      // keep bar visible at 100% for 3 seconds so user sees completion
      setTimeout(() => setDownloadProgress(null), 60000);
    }
  };

  const toggleStar = async () => {
    if (!album) return;
-    const currentlyStarred = isStarred;
-    setIsStarred(!currentlyStarred);
+    const wasStarred = isStarred;
+    setIsStarred(!wasStarred);
    try {
-      if (currentlyStarred) await unstar(album.album.id);
+      if (wasStarred) await unstar(album.album.id);
      else await star(album.album.id);
    } catch (e) {
      console.error('Failed to toggle star', e);
-      setIsStarred(currentlyStarred);
+      setIsStarred(wasStarred);
    }
  };

  const toggleSongStar = async (song: SubsonicSong, e: React.MouseEvent) => {
    e.stopPropagation();
-    const currentlyStarred = starredSongs.has(song.id);
-    const nextStarred = new Set(starredSongs);
-    if (currentlyStarred) nextStarred.delete(song.id);
-    else nextStarred.add(song.id);
-    setStarredSongs(nextStarred);
+    const wasStarred = starredSongs.has(song.id);
+    const next = new Set(starredSongs);
+    if (wasStarred) next.delete(song.id); else next.add(song.id);
+    setStarredSongs(next);
    try {
-      if (currentlyStarred) await unstar(song.id, 'song');
+      if (wasStarred) await unstar(song.id, 'song');
      else await star(song.id, 'song');
    } catch (err) {
      console.error('Failed to toggle song star', err);
@@ -264,232 +192,47 @@ export default function AlbumDetail() {
  if (!album) return <div className="empty-state">{t('albumDetail.notFound')}</div>;

  const { album: info, songs } = album;
-  const totalDuration = songs.reduce((acc, s) => acc + s.duration, 0);
  const hasVariousArtists = songs.some(s => s.artist !== info.artist);
-  const totalSize = songs.reduce((acc, s) => acc + (s.size ?? 0), 0);

  return (
    <div className="album-detail animate-fade-in">
-      {bioOpen && bio && <BioModal bio={bio} onClose={() => setBioOpen(false)} />}
+      <AlbumHeader
+        info={info}
+        songs={songs}
+        coverUrl={coverUrl}
+        coverKey={coverKey}
+        resolvedCoverUrl={resolvedCoverUrl}
+        isStarred={isStarred}
+        downloadProgress={downloadProgress}
+        bio={bio}
+        bioOpen={bioOpen}
+        onToggleStar={toggleStar}
+        onDownload={handleDownload}
+        onPlayAll={handlePlayAll}
+        onEnqueueAll={handleEnqueueAll}
+        onBio={handleBio}
+        onCloseBio={() => setBioOpen(false)}
+      />

-      <div className="album-detail-header">
-        {resolvedCoverUrl && (
-          <div
-            className="album-detail-bg"
-            style={{ backgroundImage: `url(${resolvedCoverUrl})` }}
-            aria-hidden="true"
-          />
-        )}
-        <div className="album-detail-overlay" aria-hidden="true" />
-
-        <div style={{ position: 'relative', zIndex: 1 }}>
-          <button className="btn btn-ghost" onClick={() => navigate(-1)} style={{ marginBottom: '1rem', gap: '6px' }}>
-            <ChevronLeft size={16} /> {t('albumDetail.back')}
-          </button>
-          <div className="album-detail-hero">
-            {coverUrl ? (
-              <CachedImage className="album-detail-cover" src={coverUrl} cacheKey={coverKey} alt={`${info.name} Cover`} />
-            ) : (
-              <div className="album-detail-cover album-cover-placeholder">♪</div>
-            )}
-            <div className="album-detail-meta">
-              <span className="badge" style={{ marginBottom: '0.5rem' }}>{t('common.album')}</span>
-              <h1 className="album-detail-title">{info.name}</h1>
-              <p className="album-detail-artist">
-                <button
-                  className="album-detail-artist-link"
-                  data-tooltip={t('albumDetail.goToArtist', { artist: info.artist })}
-                  onClick={() => navigate(`/artist/${info.artistId}`)}
-                >
-                  {info.artist}
-                </button>
-              </p>
-              <div className="album-detail-info">
-                {info.year && <span>{info.year}</span>}
-                {info.genre && <span>· {info.genre}</span>}
-                <span>· {songs.length} Tracks</span>
-                <span>· {formatDuration(totalDuration)}</span>
-                {info.recordLabel && (
-                  <>
-                    <span style={{ margin: '0 4px' }}>·</span>
-                    <button
-                      className="album-detail-artist-link"
-                      data-tooltip={t('albumDetail.moreLabelAlbums', { label: info.recordLabel })}
-                      onClick={() => navigate(`/label/${encodeURIComponent(info.recordLabel!)}`)}
-                    >
-                      {info.recordLabel}
-                    </button>
-                  </>
-                )}
-              </div>
-              <div className="album-detail-actions">
-                <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
-                  <button className="btn btn-primary" id="album-play-all-btn" onClick={handlePlayAll}>
-                    <Play size={16} fill="currentColor" /> {t('albumDetail.playAll')}
-                  </button>
-                  <button
-                    className="btn btn-surface"
-                    onClick={handleEnqueueAll}
-                    data-tooltip={t('albumDetail.enqueueTooltip')}
-                  >
-                    <ListPlus size={16} /> {t('albumDetail.enqueue')}
-                  </button>
-                </div>
-
-                <button
-                  className="btn btn-ghost"
-                  id="album-star-btn"
-                  onClick={toggleStar}
-                  data-tooltip={isStarred ? t('albumDetail.favoriteRemove') : t('albumDetail.favoriteAdd')}
-                  style={{ color: isStarred ? 'var(--accent)' : 'inherit', border: isStarred ? '1px solid var(--accent)' : undefined }}
-                >
-                  <Star size={16} fill={isStarred ? "currentColor" : "none"} />
-                  {t('albumDetail.favorite')}
-                </button>
-
-                <button className="btn btn-ghost" id="album-bio-btn" onClick={handleBio}>
-                  <ExternalLink size={16} /> {t('albumDetail.artistBio')}
-                </button>
-                {downloadProgress !== null ? (
-                  <div className="download-progress-wrap">
-                    <Download size={14} />
-                    <div className="download-progress-bar">
-                      <div className="download-progress-fill" style={{ width: `${downloadProgress}%` }} />
-                    </div>
-                    <span className="download-progress-pct">{downloadProgress}%</span>
-                  </div>
-                ) : (
-                  <button className="btn btn-ghost" id="album-download-btn" onClick={() => handleDownload(info.name, info.id)}>
-                    <Download size={16} /> {t('albumDetail.download')}{totalSize > 0 ? ` · ${formatSize(totalSize)}` : ''}
-                  </button>
-                )}
-                <span className="download-hint">
-                  <Info size={12} />
-                  {t('albumDetail.downloadHintShort')}
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div className="tracklist">
-        <div className={`tracklist-header${hasVariousArtists ? ' tracklist-va' : ''}`}>
-          <div style={{ textAlign: 'center' }}>#</div>
-          <div>{t('albumDetail.trackTitle')}</div>
-          {hasVariousArtists && <div>{t('albumDetail.trackArtist')}</div>}
-          <div style={{ textAlign: 'center' }}>{t('albumDetail.trackFavorite')}</div>
-          <div>{t('albumDetail.trackRating')}</div>
-          <div style={{ textAlign: 'right' }}>{t('albumDetail.trackDuration')}</div>
-          <div>{t('albumDetail.trackFormat')}</div>
-        </div>
-
-        {(() => {
-          const discs = new Map<number, SubsonicSong[]>();
-          songs.forEach(song => {
-            const disc = song.discNumber ?? 1;
-            if (!discs.has(disc)) discs.set(disc, []);
-            discs.get(disc)!.push(song);
-          });
-          const discNums = Array.from(discs.keys()).sort((a, b) => a - b);
-          const isMultiDisc = discNums.length > 1;
-
-          return discNums.map(discNum => (
-            <div key={discNum}>
-              {isMultiDisc && (
-                <div className="disc-header">
-                  <span className="disc-icon">💿</span>
-                  CD {discNum}
-                </div>
-              )}
-              {discs.get(discNum)!.map((song, i) => (
-                <div
-                  key={song.id}
-                  className={`track-row${hasVariousArtists ? ' track-row-va' : ''}${currentTrack?.id === song.id ? ' active' : ''}`}
-                  onMouseEnter={() => setHoveredSongId(song.id)}
-                  onMouseLeave={() => setHoveredSongId(null)}
-                  onDoubleClick={() => handlePlaySong(song)}
-                  onContextMenu={(e) => {
-                    e.preventDefault();
-                    const track = {
-                      id: song.id, title: song.title, artist: song.artist, album: song.album,
-                      albumId: song.albumId, artistId: song.artistId, duration: song.duration, coverArt: song.coverArt, track: song.track,
-                      year: song.year, bitRate: song.bitRate, suffix: song.suffix, userRating: song.userRating,
-                    };
-                    openContextMenu(e.clientX, e.clientY, track, 'album-song');
-                  }}
-                  role="row"
-                  draggable
-                  onDragStart={e => {
-                    e.dataTransfer.effectAllowed = 'copy';
-                    const track = {
-                      id: song.id, title: song.title, artist: song.artist, album: song.album,
-                      albumId: song.albumId, artistId: song.artistId, duration: song.duration, coverArt: song.coverArt, track: song.track,
-                      year: song.year, bitRate: song.bitRate, suffix: song.suffix, userRating: song.userRating,
-                    };
-                    e.dataTransfer.setData('text/plain', JSON.stringify({ type: 'song', track }));
-                  }}
-                >
-                  <div
-                    className="track-num"
-                    style={{ textAlign: 'center', cursor: hoveredSongId === song.id ? 'pointer' : 'default', color: (hoveredSongId === song.id || currentTrack?.id === song.id) ? 'var(--accent)' : undefined }}
-                    onClick={() => handlePlaySong(song)}
-                  >
-                    {hoveredSongId === song.id
-                      ? <Play size={13} fill="currentColor" />
-                      : currentTrack?.id === song.id
-                        ? <Play size={13} fill="currentColor" />
-                        : (song.track ?? i + 1)}
-                  </div>
-                  <div className="track-info">
-                    <span className="track-title" data-tooltip={song.title}>{song.title}</span>
-                  </div>
-                  {hasVariousArtists && (
-                    <div className="track-artist-cell">
-                      <span className="track-artist">{song.artist}</span>
-                    </div>
-                  )}
-                  <div style={{ display: 'flex', justifyContent: 'center' }}>
-                    <button
-                      className="btn btn-ghost"
-                      onClick={(e) => toggleSongStar(song, e)}
-                      data-tooltip={starredSongs.has(song.id) ? t('albumDetail.favoriteRemove') : t('albumDetail.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>
-                  <StarRating
-                    value={ratings[song.id] ?? song.userRating ?? 0}
-                    onChange={r => handleRate(song.id, r)}
-                  />
-                  <div className="track-duration" style={{ textAlign: 'right' }}>
-                    {formatDuration(song.duration)}
-                  </div>
-                  <div className="track-meta" style={{ display: 'flex', alignItems: 'center' }}>
-                    {(song.suffix || song.bitRate) && (
-                      <span className="track-codec" style={{ marginTop: 0 }}>
-                        {codecLabel(song)}
-                      </span>
-                    )}
-                  </div>
-                </div>
-              ))}
-            </div>
-          ));
-        })()}
-
-        {/* Total row */}
-        <div className={`tracklist-total${hasVariousArtists ? ' tracklist-va' : ''}`}>
-          <span className="tracklist-total-label">{t('albumDetail.trackTotal')}</span>
-          <span className="tracklist-total-value">{formatDuration(totalDuration)}</span>
-        </div>
-      </div>
+      <AlbumTrackList
+        songs={songs}
+        hasVariousArtists={hasVariousArtists}
+        currentTrack={currentTrack}
+        isPlaying={isPlaying}
+        hoveredSongId={hoveredSongId}
+        setHoveredSongId={setHoveredSongId}
+        ratings={ratings}
+        starredSongs={starredSongs}
+        onPlaySong={handlePlaySong}
+        onRate={handleRate}
+        onToggleSongStar={toggleSongStar}
+        onContextMenu={openContextMenu}
+      />

      {relatedAlbums.length > 0 && (
-        <div style={{ padding: '0 var(--space-6) var(--space-8)' }}>
-          <div style={{ borderTop: '1px solid var(--border-subtle)', marginBottom: '2rem' }} />
-          <h2 className="section-title" style={{ marginBottom: '1rem' }}>{t('albumDetail.moreByArtist', { artist: info.artist })}</h2>
+        <div className="album-related">
+          <div className="album-related-divider" />
+          <h2 className="section-title album-related-title">{t('albumDetail.moreByArtist', { artist: info.artist })}</h2>
          <div className="album-grid-wrap">
            {relatedAlbums.map(a => <AlbumCard key={a.id} album={a} />)}
          </div>
@@ -4,7 +4,7 @@ import { getArtist, getArtistInfo, getTopSongs, getSimilarSongs2, SubsonicArtist
 import AlbumCard from '../components/AlbumCard';
 import CachedImage from '../components/CachedImage';
 import { ArrowLeft, Users, ExternalLink, Star, Play, Shuffle, Radio } from 'lucide-react';
-import { open } from '@tauri-apps/plugin-shell';
+import { WebviewWindow } from '@tauri-apps/api/webviewWindow';
 import { usePlayerStore } from '../store/playerStore';
 import { useTranslation } from 'react-i18next';

@@ -77,7 +77,16 @@ export default function ArtistDetail() {
    });
  }, [id]);

-  const openLink = (url: string) => open(url);
+  const openLink = (url: string, title: string) => {
+    const label = `browser_${Date.now()}`;
+    new WebviewWindow(label, {
+      url,
+      title,
+      width: 1100,
+      height: 780,
+      center: true,
+    });
+  };

  const toggleStar = async () => {
    if (!artist) return;
@@ -183,12 +192,12 @@ export default function ArtistDetail() {
            {(info?.lastFmUrl || artist.name) && (
              <div className="artist-detail-links">
                {info?.lastFmUrl && (
-                  <button className="artist-ext-link" onClick={() => openLink(info.lastFmUrl!)}>
+                  <button className="artist-ext-link" onClick={() => openLink(info.lastFmUrl!, `${artist.name} — Last.fm`)}>
                    <LastfmIcon size={14} />
                    Last.fm
                  </button>
                )}
-                <button className="artist-ext-link" onClick={() => openLink(wikiUrl)}>
+                <button className="artist-ext-link" onClick={() => openLink(wikiUrl, `${artist.name} — Wikipedia`)}>
                  <ExternalLink size={14} />
                  Wikipedia
                </button>
@@ -3,7 +3,8 @@ import AlbumRow from '../components/AlbumRow';
 import ArtistRow from '../components/ArtistRow';
 import { getStarred, SubsonicAlbum, SubsonicArtist, SubsonicSong } from '../api/subsonic';
 import { usePlayerStore } from '../store/playerStore';
-import { Play } from 'lucide-react';
+import { Play, ListPlus } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';

 export default function Favorites() {
@@ -13,7 +14,9 @@ export default function Favorites() {
  const [songs, setSongs] = useState<SubsonicSong[]>([]);
  const [loading, setLoading] = useState(true);

-  const { playTrack } = usePlayerStore();
+  const { playTrack, enqueue } = usePlayerStore();
+  const openContextMenu = usePlayerStore(s => s.openContextMenu);
+  const navigate = useNavigate();

  useEffect(() => {
    getStarred()
@@ -56,44 +59,68 @@ export default function Favorites() {

          {songs.length > 0 && (
            <section className="album-row-section">
-              <div className="album-row-header" style={{ marginBottom: '1rem' }}>
-                <h2 className="section-title" style={{ marginBottom: 0 }}>{t('favorites.songs')}</h2>
+              <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-surface"
+                  onClick={() => {
+                    const tracks = songs.map(s => ({
+                      id: s.id, title: s.title, artist: s.artist, album: s.album,
+                      albumId: s.albumId, artistId: s.artistId, duration: s.duration, coverArt: s.coverArt,
+                      track: s.track, year: s.year, bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating,
+                    }));
+                    enqueue(tracks);
+                  }}
+                >
+                  <ListPlus size={15} />
+                  {t('favorites.enqueueAll')}
+                </button>
              </div>
              <div className="tracklist" style={{ padding: 0 }}>
-                {songs.map((song) => (
-                  <div
-                    key={song.id}
-                    className="track-row"
-                    style={{ gridTemplateColumns: '36px 1fr 60px' }}
-                    onDoubleClick={() => playTrack(song, songs)}
-                    role="row"
-                    draggable
-                    onDragStart={e => {
-                      e.dataTransfer.effectAllowed = 'copy';
-                      const track = {
-                        id: song.id, title: song.title, artist: song.artist, album: song.album,
-                        albumId: song.albumId, artistId: song.artistId, duration: song.duration, coverArt: song.coverArt, track: song.track,
-                        year: song.year, bitRate: song.bitRate, suffix: song.suffix, userRating: song.userRating,
-                      };
-                      e.dataTransfer.setData('text/plain', JSON.stringify({ type: 'song', track }));
-                    }}
-                  >
-                    <button
-                      className="btn btn-ghost"
-                      style={{ padding: 4 }}
-                      onClick={(e) => { e.stopPropagation(); playTrack(song, songs); }}
+                <div className="tracklist-header tracklist-va">
+                  <div className="col-center">#</div>
+                  <div>{t('albumDetail.trackTitle')}</div>
+                  <div>{t('albumDetail.trackArtist')}</div>
+                  <div className="col-center">{t('albumDetail.trackDuration')}</div>
+                </div>
+                {songs.map((song, i) => {
+                  const track = {
+                    id: song.id, title: song.title, artist: song.artist, album: song.album,
+                    albumId: song.albumId, artistId: song.artistId, duration: song.duration, coverArt: song.coverArt,
+                    track: song.track, year: song.year, bitRate: song.bitRate, suffix: song.suffix, userRating: song.userRating,
+                  };
+                  return (
+                    <div
+                      key={song.id}
+                      className="track-row track-row-va"
+                      onDoubleClick={() => playTrack(song, songs)}
+                      onContextMenu={e => { e.preventDefault(); openContextMenu(e.clientX, e.clientY, track, 'song'); }}
+                      role="row"
+                      draggable
+                      onDragStart={e => {
+                        e.dataTransfer.effectAllowed = 'copy';
+                        e.dataTransfer.setData('text/plain', JSON.stringify({ type: 'song', track }));
+                      }}
                    >
-                      <Play size={14} fill="currentColor" />
-                    </button>
-                    <div className="track-info">
-                      <span className="track-title" title={song.title}>{song.title}</span>
-                      <span className="track-artist">{song.artist}</span>
+                      <div className="track-num col-center" onClick={() => playTrack(song, songs)} style={{ cursor: 'pointer' }}>
+                        {i + 1}
+                      </div>
+                      <div className="track-info">
+                        <span className="track-title" data-tooltip={song.title}>{song.title}</span>
+                      </div>
+                      <div className="track-artist-cell">
+                        <span
+                          className="track-artist"
+                          style={{ cursor: song.artistId ? 'pointer' : 'default' }}
+                          onClick={() => song.artistId && navigate(`/artist/${song.artistId}`)}
+                        >{song.artist}</span>
+                      </div>
+                      <div className="track-duration">
+                        {Math.floor(song.duration / 60)}:{(song.duration % 60).toString().padStart(2, '0')}
+                      </div>
                    </div>
-                    <span className="track-duration" style={{ textAlign: 'right' }}>
-                      {Math.floor(song.duration / 60)}:{(song.duration % 60).toString().padStart(2, '0')}
-                    </span>
-                  </div>
-                ))}
+                  );
+                })}
              </div>
            </section>
          )}
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { ChevronDown, Rocket, Play, LibraryBig, Settings2, Radio, Wrench } from 'lucide-react';
+import { ChevronDown, Rocket, Play, LibraryBig, Settings2, Radio, Wrench, Shuffle } from 'lucide-react';
 import { useTranslation } from 'react-i18next';

 interface FaqItem { q: string; a: string; }
@@ -42,6 +42,9 @@ export default function Help() {
        { q: t('help.q6'), a: t('help.a6') },
        { q: t('help.q7'), a: t('help.a7') },
        { q: t('help.q8'), a: t('help.a8') },
+        { q: t('help.q22'), a: t('help.a22') },
+        { q: t('help.q23'), a: t('help.a23') },
+        { q: t('help.q24'), a: t('help.a24') },
      ],
    },
    {
@@ -51,6 +54,7 @@ export default function Help() {
        { q: t('help.q9'),  a: t('help.a9') },
        { q: t('help.q10'), a: t('help.a10') },
        { q: t('help.q11'), a: t('help.a11') },
+        { q: t('help.q25'), a: t('help.a25') },
      ],
    },
    {
@@ -71,6 +75,15 @@ export default function Help() {
        { q: t('help.q17'), a: t('help.a17') },
      ],
    },
+    {
+      icon: <Shuffle size={18} />,
+      title: t('help.s7'),
+      items: [
+        { q: t('help.q26'), a: t('help.a26') },
+        { q: t('help.q27'), a: t('help.a27') },
+        { q: t('help.q28'), a: t('help.a28') },
+      ],
+    },
    {
      icon: <Wrench size={18} />,
      title: t('help.s6'),
@@ -8,6 +8,7 @@ export default function Home() {
  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 [loading, setLoading] = useState(true);

@@ -15,12 +16,13 @@ export default function Home() {
    Promise.all([
      getAlbumList('starred', 12).catch(() => []),
      getAlbumList('newest', 12).catch(() => []),
-      getAlbumList('random', 12).catch(() => []),
+      getAlbumList('random', 20).catch(() => []),   // fetch 20 — split between Hero and Discover
      getAlbumList('frequent', 12).catch(() => []),
    ]).then(([s, n, r, f]) => {
      setStarred(s);
      setRecent(n);
-      setRandom(r);
+      setHeroAlbums(r.slice(0, 8));
+      setRandom(r.slice(8));
      setMostPlayed(f);
      setLoading(false);
    }).catch(() => setLoading(false));
@@ -47,7 +49,7 @@ export default function Home() {

  return (
    <div className="animate-fade-in">
-      <Hero />
+      <Hero albums={heroAlbums} />

      <div className="content-body" style={{ display: 'flex', flexDirection: 'column', gap: '3rem' }}>
        {loading ? (
@@ -1,8 +1,10 @@
 import React, { useEffect, useState, useCallback, useRef } from 'react';
 import AlbumCard from '../components/AlbumCard';
 import { getAlbumList, SubsonicAlbum } from '../api/subsonic';
+import { useTranslation } from 'react-i18next';

 export default function NewReleases() {
+  const { t } = useTranslation();
  const [albums, setAlbums] = useState<SubsonicAlbum[]>([]);
  const [loading, setLoading] = useState(true);
  const [page, setPage] = useState(0);
@@ -49,7 +51,7 @@ export default function NewReleases() {

  return (
    <div className="content-body animate-fade-in">
-      <h1 className="page-title" style={{ marginBottom: '1.5rem' }}>Neueste</h1>
+      <h1 className="page-title" style={{ marginBottom: '1.5rem' }}>{t('sidebar.newReleases')}</h1>
      
      {loading && albums.length === 0 ? (
        <div style={{ display: 'flex', justifyContent: 'center', padding: '3rem' }}>
@@ -1,13 +1,43 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useMemo } from 'react';
 import { SubsonicPlaylist, getPlaylists, getPlaylist, deletePlaylist } from '../api/subsonic';
 import { usePlayerStore } from '../store/playerStore';
-import { ListMusic, Play, Trash2 } from 'lucide-react';
+import { Play, Trash2, ChevronUp, ChevronDown } from 'lucide-react';
 import { useTranslation } from 'react-i18next';

+type SortKey = 'name' | 'songCount' | 'duration';
+type SortDir = 'asc' | 'desc';
+
+function formatDuration(seconds: number): string {
+  const h = Math.floor(seconds / 3600);
+  const m = Math.floor((seconds % 3600) / 60);
+  return h > 0 ? `${h}h ${m}m` : `${m}m`;
+}
+
+function SortHeader({
+  label, sortKey, current, dir, onSort
+}: {
+  label: string;
+  sortKey: SortKey;
+  current: SortKey;
+  dir: SortDir;
+  onSort: (k: SortKey) => void;
+}) {
+  const active = current === sortKey;
+  return (
+    <button className={`playlist-sort-btn${active ? ' active' : ''}`} onClick={() => onSort(sortKey)}>
+      {label}
+      {active ? (dir === 'asc' ? <ChevronUp size={13} /> : <ChevronDown size={13} />) : null}
+    </button>
+  );
+}
+
 export default function Playlists() {
  const { t } = useTranslation();
  const [playlists, setPlaylists] = useState<SubsonicPlaylist[]>([]);
  const [loading, setLoading] = useState(true);
+  const [filter, setFilter] = useState('');
+  const [sortKey, setSortKey] = useState<SortKey>('name');
+  const [sortDir, setSortDir] = useState<SortDir>('asc');

  const playTrack = usePlayerStore(s => s.playTrack);
  const clearQueue = usePlayerStore(s => s.clearQueue);
@@ -15,104 +45,93 @@ export default function Playlists() {
  const fetchPlaylists = () => {
    setLoading(true);
    getPlaylists()
-      .then(data => {
-        setPlaylists(data);
-        setLoading(false);
-      })
-      .catch(err => {
-        console.error('Failed to load playlists', err);
-        setLoading(false);
-      });
+      .then(data => { setPlaylists(data); setLoading(false); })
+      .catch(err => { console.error('Failed to load playlists', err); setLoading(false); });
  };

-  useEffect(() => {
-    fetchPlaylists();
-  }, []);
+  useEffect(() => { fetchPlaylists(); }, []);
+
+  const handleSort = (key: SortKey) => {
+    if (sortKey === key) setSortDir(d => d === 'asc' ? 'desc' : 'asc');
+    else { setSortKey(key); setSortDir('asc'); }
+  };

  const handlePlay = async (id: string) => {
    try {
      const data = await getPlaylist(id);
      const tracks = data.songs.map((s: any) => ({
        id: s.id, title: s.title, artist: s.artist, album: s.album,
-        albumId: s.albumId, artistId: s.artistId, duration: s.duration, coverArt: s.coverArt, track: s.track,
-        year: s.year, bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating,
+        albumId: s.albumId, artistId: s.artistId, duration: s.duration,
+        coverArt: s.coverArt, track: s.track, year: s.year,
+        bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating,
      }));
-      if (tracks.length > 0) {
-        clearQueue();
-        playTrack(tracks[0], tracks);
-      }
-    } catch (e) {
-      console.error('Failed to play playlist', e);
-    }
+      if (tracks.length > 0) { clearQueue(); playTrack(tracks[0], tracks); }
+    } catch (e) { console.error('Failed to play playlist', e); }
  };

  const handleDelete = async (id: string, name: string) => {
    if (confirm(t('playlists.confirmDelete', { name }))) {
-      try {
-        await deletePlaylist(id);
-        fetchPlaylists();
-      } catch (e) {
-        console.error('Failed to delete playlist', e);
-      }
+      try { await deletePlaylist(id); fetchPlaylists(); }
+      catch (e) { console.error('Failed to delete playlist', e); }
    }
  };

+  const visible = useMemo(() => {
+    const q = filter.toLowerCase();
+    const filtered = q ? playlists.filter(p => p.name.toLowerCase().includes(q)) : playlists;
+    return [...filtered].sort((a, b) => {
+      let cmp = 0;
+      if (sortKey === 'name') cmp = a.name.localeCompare(b.name);
+      else if (sortKey === 'songCount') cmp = a.songCount - b.songCount;
+      else cmp = a.duration - b.duration;
+      return sortDir === 'asc' ? cmp : -cmp;
+    });
+  }, [playlists, filter, sortKey, sortDir]);
+
  return (
    <div className="content-body animate-fade-in">
-      <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '2rem' }}>
-        <ListMusic size={32} style={{ color: 'var(--accent)' }} />
-        <h1 className="page-title" style={{ margin: 0 }}>{t('playlists.title')}</h1>
+      <div className="playlist-page-header">
+        <h1 className="page-title">{t('playlists.title')}</h1>
+        <input
+          className="playlist-filter-input"
+          type="search"
+          placeholder={t('playlists.filterPlaceholder')}
+          value={filter}
+          onChange={e => setFilter(e.target.value)}
+        />
      </div>

      {loading ? (
-        <div className="empty-state">{t('playlists.loading')}</div>
+        <div className="loading-center"><div className="spinner" /></div>
      ) : playlists.length === 0 ? (
-        <div className="empty-state" style={{ whiteSpace: 'pre-line' }}>
-          {t('playlists.empty')}
-        </div>
+        <div className="empty-state" style={{ whiteSpace: 'pre-line' }}>{t('playlists.empty')}</div>
      ) : (
-        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: '1rem' }}>
-          {playlists.map(p => (
-            <div
-              key={p.id}
-              style={{
-                background: 'var(--surface0)',
-                borderRadius: '12px',
-                padding: '1.5rem',
-                display: 'flex',
-                flexDirection: 'column',
-                gap: '1rem',
-                border: '1px solid var(--surface1)',
-                transition: 'all 0.2s ease'
-              }}
-              className="hover-card"
-            >
-              <div>
-                <h3 style={{ fontSize: '1.1rem', fontWeight: 600, margin: '0 0 0.25rem 0', color: 'var(--text)' }} className="truncate">
-                  {p.name}
-                </h3>
-                <p style={{ margin: 0, fontSize: '0.9rem', color: 'var(--subtext0)' }}>
-                  {t('playlists.track', { count: p.songCount })} • {Math.floor(p.duration / 60)} {t('playlists.minutes')}
-                </p>
-              </div>
+        <div className="playlist-list">
+          <div className="playlist-list-header">
+            <div />
+            <SortHeader label={t('playlists.colName')} sortKey="name" current={sortKey} dir={sortDir} onSort={handleSort} />
+            <SortHeader label={t('playlists.colTracks')} sortKey="songCount" current={sortKey} dir={sortDir} onSort={handleSort} />
+            <SortHeader label={t('playlists.colDuration')} sortKey="duration" current={sortKey} dir={sortDir} onSort={handleSort} />
+            <div />
+          </div>

-              <div style={{ display: 'flex', gap: '0.5rem', marginTop: 'auto' }}>
-                <button
-                  className="btn btn-primary"
-                  onClick={() => handlePlay(p.id)}
-                  style={{ flex: 1, display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '0.5rem' }}
-                >
-                  <Play size={16} fill="currentColor" /> {t('playlists.play')}
-                </button>
-                <button
-                  className="btn btn-ghost"
-                  onClick={() => handleDelete(p.id, p.name)}
-                  data-tooltip={t('playlists.deleteTooltip')}
-                  style={{ width: '42px', display: 'flex', justifyContent: 'center', alignItems: 'center', color: 'var(--red)' }}
-                >
-                  <Trash2 size={18} />
-                </button>
-              </div>
+          {visible.length === 0 ? (
+            <div className="empty-state">{t('playlists.noResults')}</div>
+          ) : visible.map(p => (
+            <div key={p.id} className="playlist-row">
+              <button className="playlist-play-icon" onClick={() => handlePlay(p.id)} data-tooltip={t('playlists.play')}>
+                <Play size={14} fill="currentColor" />
+              </button>
+              <span className="playlist-name truncate">{p.name}</span>
+              <span className="playlist-meta">{t('playlists.track', { count: p.songCount })}</span>
+              <span className="playlist-meta">{formatDuration(p.duration)}</span>
+              <button
+                className="btn btn-ghost playlist-delete-btn"
+                onClick={() => handleDelete(p.id, p.name)}
+                data-tooltip={t('playlists.deleteTooltip')}
+              >
+                <Trash2 size={15} />
+              </button>
            </div>
          ))}
        </div>
@@ -4,61 +4,30 @@ import { getAlbumList, SubsonicAlbum } from '../api/subsonic';
 import AlbumCard from '../components/AlbumCard';
 import { useTranslation } from 'react-i18next';

-const INTERVAL_MS = 30000;
 const ALBUM_COUNT = 30;

 export default function RandomAlbums() {
  const { t } = useTranslation();
  const [albums, setAlbums] = useState<SubsonicAlbum[]>([]);
  const [loading, setLoading] = useState(true);
-  const [renderKey, setRenderKey] = useState(0);
-  const [progress, setProgress] = useState(0);
-  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
-  const progressRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const loadingRef = useRef(false);

  const load = useCallback(async () => {
+    if (loadingRef.current) return;
+    loadingRef.current = true;
    setLoading(true);
    try {
      const data = await getAlbumList('random', ALBUM_COUNT);
      setAlbums(data);
-      setRenderKey(k => k + 1);
    } catch (e) {
      console.error(e);
    } finally {
+      loadingRef.current = false;
      setLoading(false);
    }
  }, []);

-  const startCycle = useCallback(() => {
-    // Clear existing timers
-    if (timerRef.current) clearInterval(timerRef.current);
-    if (progressRef.current) clearInterval(progressRef.current);
-
-    // Reset progress bar
-    setProgress(0);
-    const startTime = Date.now();
-    progressRef.current = setInterval(() => {
-      const elapsed = Date.now() - startTime;
-      setProgress(Math.min((elapsed / INTERVAL_MS) * 100, 100));
-    }, 100);
-
-    // Auto-refresh
-    timerRef.current = setInterval(() => {
-      load().then(() => startCycle());
-    }, INTERVAL_MS);
-  }, [load]);
-
-  useEffect(() => {
-    load().then(() => startCycle());
-    return () => {
-      if (timerRef.current) clearInterval(timerRef.current);
-      if (progressRef.current) clearInterval(progressRef.current);
-    };
-  }, [load, startCycle]);
-
-  const handleManualRefresh = () => {
-    load().then(() => startCycle());
-  };
+  useEffect(() => { load(); }, [load]);

  return (
    <div className="content-body animate-fade-in">
@@ -66,7 +35,7 @@ export default function RandomAlbums() {
        <h1 className="page-title" style={{ marginBottom: 0 }}>{t('randomAlbums.title')}</h1>
        <button
          className="btn btn-ghost"
-          onClick={handleManualRefresh}
+          onClick={load}
          disabled={loading}
          data-tooltip={t('randomAlbums.refresh')}
        >
@@ -75,17 +44,12 @@ export default function RandomAlbums() {
        </button>
      </div>

-      {/* Countdown progress bar */}
-      <div className="random-albums-progress">
-        <div className="random-albums-progress-fill" style={{ width: `${progress}%` }} />
-      </div>
-
      {loading && albums.length === 0 ? (
        <div style={{ display: 'flex', justifyContent: 'center', padding: '4rem' }}>
          <div className="spinner" />
        </div>
      ) : (
-        <div className="album-grid-wrap animate-fade-in" key={renderKey}>
+        <div className="album-grid-wrap">
          {albums.map(a => <AlbumCard key={a.id} album={a} />)}
        </div>
      )}
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { getRandomSongs, getGenres, SubsonicSong, SubsonicGenre, star, unstar } from '../api/subsonic';
 import { usePlayerStore } from '../store/playerStore';
 import { useAuthStore } from '../store/authStore';
-import { Play, Star, RefreshCw, ChevronDown, ChevronUp, Plus } from 'lucide-react';
+import { Play, Star, RefreshCw, ChevronDown, ChevronUp } from 'lucide-react';
 import { useTranslation } from 'react-i18next';

 const AUDIOBOOK_GENRES = [
@@ -42,7 +42,9 @@ export default function RandomMix() {
  const [songs, setSongs] = useState<SubsonicSong[]>([]);
  const [loading, setLoading] = useState(true);
  const playTrack = usePlayerStore(s => s.playTrack);
-  const enqueue = usePlayerStore(s => s.enqueue);
+  const openContextMenu = usePlayerStore(s => s.openContextMenu);
+  const contextMenuOpen = usePlayerStore(s => s.contextMenu.isOpen);
+  const [contextMenuSongId, setContextMenuSongId] = useState<string | null>(null);
  const [starredSongs, setStarredSongs] = useState<Set<string>>(new Set());
  const { excludeAudiobooks, setExcludeAudiobooks, customGenreBlacklist, setCustomGenreBlacklist } = useAuthStore();
  const [addedGenre, setAddedGenre] = useState<string | null>(null);
@@ -56,10 +58,11 @@ export default function RandomMix() {
  const [selectedSuperGenre, setSelectedSuperGenre] = useState<string | null>(null);
  const [genreMixSongs, setGenreMixSongs] = useState<SubsonicSong[]>([]);
  const [genreMixLoading, setGenreMixLoading] = useState(false);
-  const [genreMixMatchedGenres, setGenreMixMatchedGenres] = useState<string[]>([]);
+  const [genreMixComplete, setGenreMixComplete] = useState(false);

  const fetchSongs = () => {
    setLoading(true);
+    setSongs([]);
    getRandomSongs(50)
      .then(fetched => {
        setSongs(fetched);
@@ -71,6 +74,10 @@ export default function RandomMix() {
      .catch(() => setLoading(false));
  };

+  useEffect(() => {
+    if (!contextMenuOpen) setContextMenuSongId(null);
+  }, [contextMenuOpen]);
+
  useEffect(() => {
    fetchSongs();
    getGenres().then(setServerGenres).catch(() => {});
@@ -91,7 +98,11 @@ export default function RandomMix() {
  });

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

  const toggleSongStar = async (song: SubsonicSong, e: React.MouseEvent) => {
@@ -121,11 +132,13 @@ export default function RandomMix() {
  const loadGenreMix = async (superGenreId: string) => {
    const sg = SUPER_GENRES.find(s => s.id === superGenreId);
    if (!sg) return;
-    const matched = serverGenres
+    const allMatched = serverGenres
      .filter(sg2 => sg.keywords.some(kw => sg2.value.toLowerCase().includes(kw)))
-      .map(sg2 => sg2.value);
-    setGenreMixMatchedGenres(matched);
+      .map(sg2 => sg2.value)
+      .sort(() => Math.random() - 0.5);
+    const matched = allMatched.slice(0, 50);
    setGenreMixLoading(true);
+    setGenreMixComplete(false);
    setGenreMixSongs([]);

    const perGenre = Math.max(1, Math.ceil(50 / matched.length));
@@ -152,29 +165,9 @@ export default function RandomMix() {
      return s.slice(0, 50);
    });
    setGenreMixLoading(false);
+    setGenreMixComplete(true);
  };

-  const loadMoreGenreMix = async () => {
-    if (!genreMixMatchedGenres.length) return;
-    setGenreMixLoading(true);
-    try {
-      const perGenre = Math.max(1, Math.ceil(10 / genreMixMatchedGenres.length));
-      const settled = await Promise.allSettled(genreMixMatchedGenres.map(g => getRandomSongs(perGenre, g, 45000)));
-      const combined = settled.flatMap(r => r.status === 'fulfilled' ? r.value : []);
-      for (let i = combined.length - 1; i > 0; i--) {
-        const j = Math.floor(Math.random() * (i + 1));
-        [combined[i], combined[j]] = [combined[j], combined[i]];
-      }
-      enqueue(combined.slice(0, 10).map(s => ({
-        id: s.id, title: s.title, artist: s.artist, album: s.album,
-        albumId: s.albumId, artistId: s.artistId, duration: s.duration,
-        coverArt: s.coverArt, track: s.track, year: s.year,
-        bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating,
-      })));
-    } finally {
-      setGenreMixLoading(false);
-    }
-  };

  return (
    <div className="content-body animate-fade-in">
@@ -185,9 +178,23 @@ export default function RandomMix() {
          <button className="btn btn-surface" onClick={fetchSongs} disabled={loading} data-tooltip={t('randomMix.remixTooltip')}>
            <RefreshCw size={18} className={loading ? 'spin' : ''} /> {t('randomMix.remix')}
          </button>
-          <button className="btn btn-primary" onClick={handlePlayAll} disabled={loading || filteredSongs.length === 0}>
-            <Play size={18} fill="currentColor" /> {t('randomMix.playAll')}
-          </button>
+          {(() => {
+            const isGenreLoading = selectedSuperGenre && !genreMixComplete;
+            const isDisabled = loading || (selectedSuperGenre ? !genreMixComplete || genreMixSongs.length === 0 : filteredSongs.length === 0);
+            return (
+              <button
+                className={`btn ${isGenreLoading ? 'btn-surface' : 'btn-primary'}`}
+                onClick={handlePlayAll}
+                disabled={isDisabled}
+              >
+                {isGenreLoading ? (
+                  <><div className="spinner" style={{ width: 14, height: 14, borderWidth: 2 }} /> {Math.min(genreMixSongs.length, 50)} / 50</>
+                ) : (
+                  <><Play size={18} fill="currentColor" /> {t('randomMix.playAll')}</>
+                )}
+              </button>
+            );
+          })()}
        </div>
      </div>

@@ -319,14 +326,6 @@ export default function RandomMix() {
              {SUPER_GENRES.find(s => s.id === selectedSuperGenre)?.label} Mix
              {genreMixLoading && <div className="spinner" style={{ width: 12, height: 12, borderWidth: 2 }} />}
            </span>
-            <div style={{ display: 'flex', gap: '0.5rem' }}>
-              <button className="btn btn-ghost" style={{ fontSize: 12, padding: '4px 10px' }} onClick={loadMoreGenreMix} disabled={genreMixLoading}>
-                <Plus size={14} /> {t('randomMix.genreMixLoadMore')}
-              </button>
-              <button className="btn btn-primary" style={{ fontSize: 12, padding: '4px 12px' }} onClick={() => genreMixSongs.length > 0 && playTrack(genreMixSongs[0], genreMixSongs)} disabled={genreMixLoading || genreMixSongs.length === 0}>
-                <Play size={14} fill="currentColor" /> {t('randomMix.playAll')}
-              </button>
-            </div>
          </div>
          {genreMixLoading && genreMixSongs.length === 0 ? (
            <div style={{ display: 'flex', justifyContent: 'center', padding: '2rem' }}><div className="spinner" /></div>
@@ -341,8 +340,9 @@ export default function RandomMix() {
                <span style={{ textAlign: 'right' }}>{t('randomMix.trackDuration')}</span>
              </div>
              {genreMixSongs.map(song => (
-                <div key={song.id} className="track-row" style={{ gridTemplateColumns: '36px 1fr 1fr 1fr 120px 80px' }}
+                <div key={song.id} className={`track-row${contextMenuSongId === song.id ? ' context-active' : ''}`} style={{ gridTemplateColumns: '36px 1fr 1fr 1fr 120px 80px' }}
                  onDoubleClick={() => playTrack(song, genreMixSongs)} role="row" draggable
+                  onContextMenu={e => { e.preventDefault(); setContextMenuSongId(song.id); openContextMenu(e.clientX, e.clientY, { id: song.id, title: song.title, artist: song.artist, album: song.album, albumId: song.albumId, artistId: song.artistId, duration: song.duration, coverArt: song.coverArt, track: song.track, year: song.year, bitRate: song.bitRate, suffix: song.suffix, userRating: song.userRating }, 'song'); }}
                  onDragStart={e => {
                    e.dataTransfer.effectAllowed = 'copy';
                    e.dataTransfer.setData('text/plain', JSON.stringify({ type: 'song', track: { id: song.id, title: song.title, artist: song.artist, album: song.album, albumId: song.albumId, artistId: song.artistId, duration: song.duration, coverArt: song.coverArt, track: song.track, year: song.year, bitRate: song.bitRate, suffix: song.suffix, userRating: song.userRating } }));
@@ -384,11 +384,17 @@ export default function RandomMix() {
          {filteredSongs.map((song) => (
            <div
              key={song.id}
-              className="track-row"
+              className={`track-row${contextMenuSongId === song.id ? ' context-active' : ''}`}
              style={{ gridTemplateColumns: '36px 1fr 1fr 1fr 120px 60px 80px' }}
              onDoubleClick={() => playTrack(song, filteredSongs)}
              role="row"
              draggable
+              onContextMenu={e => {
+                e.preventDefault();
+                const track = { id: song.id, title: song.title, artist: song.artist, album: song.album, albumId: song.albumId, artistId: song.artistId, duration: song.duration, coverArt: song.coverArt, track: song.track, year: song.year, bitRate: song.bitRate, suffix: song.suffix, userRating: song.userRating };
+                setContextMenuSongId(song.id);
+                openContextMenu(e.clientX, e.clientY, track, 'song');
+              }}
              onDragStart={e => {
                e.dataTransfer.effectAllowed = 'copy';
                const track = {
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { version as appVersion } from '../../package.json';
 import { useNavigate } from 'react-router-dom';
 import {
  Wifi, WifiOff, Globe, Music2, Sliders, LogOut, CheckCircle2, FolderOpen, Palette, Server, Plus, Trash2, Eye, EyeOff, Info, ExternalLink, Shuffle
@@ -465,7 +466,7 @@ export default function Settings() {
                Psysonic
              </div>
              <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 2 }}>
-                {t('settings.aboutVersion')} 1.0.12
+                {t('settings.aboutVersion')} {appVersion}
              </div>
            </div>
          </div>
@@ -1,26 +1,30 @@
 import React, { useEffect, useState } from 'react';
-import { getAlbumList, getGenres, SubsonicAlbum, SubsonicGenre } from '../api/subsonic';
+import { getAlbumList, getArtists, getGenres, SubsonicAlbum, SubsonicGenre } from '../api/subsonic';
 import AlbumRow from '../components/AlbumRow';
-import { BarChart3 } from 'lucide-react';
 import { useTranslation } from 'react-i18next';

 export default function Statistics() {
  const { t } = useTranslation();
+  const [recent, setRecent] = useState<SubsonicAlbum[]>([]);
  const [frequent, setFrequent] = useState<SubsonicAlbum[]>([]);
  const [highest, setHighest] = useState<SubsonicAlbum[]>([]);
  const [genres, setGenres] = useState<SubsonicGenre[]>([]);
+  const [artistCount, setArtistCount] = useState<number | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    Promise.all([
+      getAlbumList('recent', 20).catch(() => []),
      getAlbumList('frequent', 12).catch(() => []),
      getAlbumList('highest', 12).catch(() => []),
-      getGenres().catch(() => [])
-    ]).then(([f, h, g]) => {
-      setFrequent(f);
-      setHighest(h);
-      // Sort genres by album count or song count
-      setGenres(g.sort((a, b) => b.songCount - a.songCount).slice(0, 20)); // Top 20 genres
+      getGenres().catch(() => []),
+      getArtists().catch(() => []),
+    ]).then(([rc, fr, hi, g, a]) => {
+      setRecent(rc);
+      setFrequent(fr);
+      setHighest(hi);
+      setGenres(g.sort((a, b) => b.songCount - a.songCount).slice(0, 20));
+      setArtistCount(a.length);
      setLoading(false);
    }).catch(() => setLoading(false));
  }, []);
@@ -33,29 +37,44 @@ export default function Statistics() {
    try {
      const more = await getAlbumList(type, 12, currentList.length);
      const newItems = more.filter(m => !currentList.find(c => c.id === m.id));
-      if (newItems.length > 0) {
-        setter(prev => [...prev, ...newItems]);
-      }
+      if (newItems.length > 0) setter(prev => [...prev, ...newItems]);
    } catch (e) {
      console.error('Failed to load more', e);
    }
  };

+  const totalSongs = genres.reduce((acc, g) => acc + g.songCount, 0);
+  const totalAlbums = genres.reduce((acc, g) => acc + g.albumCount, 0);
  const maxGenreCount = Math.max(...genres.map(g => g.songCount), 1);

+  const stats = [
+    { label: t('statistics.statArtists'), value: artistCount },
+    { label: t('statistics.statAlbums'), value: totalAlbums || null },
+    { label: t('statistics.statSongs'), value: totalSongs || null },
+    { label: t('statistics.statGenres'), value: genres.length || null },
+  ];
+
  return (
    <div className="content-body animate-fade-in">
-      <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '2rem' }}>
-        <BarChart3 size={32} style={{ color: 'var(--accent)' }} />
-        <h1 className="page-title" style={{ margin: 0 }}>{t('statistics.title')}</h1>
-      </div>
+      <h1 className="page-title">{t('statistics.title')}</h1>

      {loading ? (
-        <div style={{ display: 'flex', justifyContent: 'center', padding: '4rem' }}>
-          <div className="spinner" />
-        </div>
+        <div className="loading-center"><div className="spinner" /></div>
      ) : (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '3rem' }}>
+        <div className="stats-page">
+
+          <div className="stats-overview">
+            {stats.map(s => (
+              <div key={s.label} className="stats-card">
+                <span className="stats-card-value">{s.value?.toLocaleString() ?? '—'}</span>
+                <span className="stats-card-label">{s.label}</span>
+              </div>
+            ))}
+          </div>
+
+          {recent.length > 0 && (
+            <AlbumRow title={t('statistics.recentlyPlayed')} albums={recent} />
+          )}

          <AlbumRow
            title={t('statistics.mostPlayed')}
@@ -72,36 +91,29 @@ export default function Statistics() {
          />

          {genres.length > 0 && (
-            <div>
-              <div className="section-title">
-                <h2>{t('statistics.genreDistribution')}</h2>
-              </div>
-
-              <div style={{ display: 'grid', gap: '1rem', background: 'var(--surface0)', padding: '1.5rem', borderRadius: '12px' }}>
-                {genres.map(genre => {
-                  const percentage = (genre.songCount / maxGenreCount) * 100;
-                  return (
-                    <div key={genre.value} style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem' }}>
-                      <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '0.9rem', color: 'var(--text)' }}>
-                        <span>{genre.value}</span>
-                        <span style={{ color: 'var(--subtext0)' }}>{genre.songCount} Songs</span>
-                      </div>
-                      <div style={{ width: '100%', height: '8px', background: 'var(--surface2)', borderRadius: '4px', overflow: 'hidden' }}>
-                        <div
-                          style={{
-                            width: `${percentage}%`,
-                            height: '100%',
-                            background: 'var(--accent)',
-                            borderRadius: '4px',
-                            transition: 'width 1s ease-out'
-                          }}
-                        />
-                      </div>
+            <section>
+              <h2 className="section-title">{t('statistics.genreDistribution')}</h2>
+              <div className="genre-chart">
+                {genres.map(genre => (
+                  <div key={genre.value} className="genre-row">
+                    <div className="genre-row-header">
+                      <span className="genre-name">{genre.value}</span>
+                      <span className="genre-counts">
+                        {t('statistics.genreSongs', { count: genre.songCount })}
+                        {' · '}
+                        {t('statistics.genreAlbums', { count: genre.albumCount })}
+                      </span>
                    </div>
-                  );
-                })}
+                    <div className="genre-bar-track">
+                      <div
+                        className="genre-bar-fill"
+                        style={{ width: `${(genre.songCount / maxGenreCount) * 100}%` }}
+                      />
+                    </div>
+                  </div>
+                ))}
              </div>
-            </div>
+            </section>
          )}

        </div>
@@ -185,17 +185,12 @@
 .artist-card {
  display: flex;
  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: var(--space-4);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
-  transition: all var(--transition-base);
-  text-align: center;
-  gap: var(--space-3);
-  height: 100%; /* fill grid row */
+  overflow: hidden;
+  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
 }
 .artist-card:hover {
  transform: translateY(-3px);
@@ -203,38 +198,49 @@
  border-color: var(--border);
 }
 .artist-card-avatar {
-  width: 100px;
-  height: 100px;
-  border-radius: 50%;
+  position: relative;
+  aspect-ratio: 1;
+  overflow: hidden;
  background: var(--bg-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
-  box-shadow: var(--shadow-sm);
 }
+.artist-card-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform var(--transition-slow);
+}
+.artist-card:hover .artist-card-avatar img { transform: scale(1.04); }
 .artist-card-avatar-initial {
-  background: var(--bg-card);
-  border: 2px solid;
-  box-shadow: none;
+  aspect-ratio: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
  overflow: hidden;
 }
 .artist-card-avatar-initial span {
-  font-size: 2.5rem;
+  font-size: 3rem;
  font-weight: 800;
  font-family: var(--font-display);
  line-height: 1;
  user-select: none;
 }
+.artist-card-info {
+  padding: var(--space-3) var(--space-3) var(--space-2);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
 .artist-card-name {
  font-weight: 600;
-  font-size: 14px;
+  font-size: 13px;
  color: var(--text-primary);
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  line-clamp: 2;
-  -webkit-box-orient: vertical;
  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .artist-card-meta {
  font-size: 12px;
@@ -307,24 +313,13 @@
  gap: var(--space-4);
 }

-.random-albums-progress {
-  height: 2px;
-  background: var(--border-subtle);
-  border-radius: var(--radius-full);
-  margin-bottom: 1.5rem;
-  overflow: hidden;
-}
-.random-albums-progress-fill {
-  height: 100%;
-  background: var(--accent);
-  border-radius: var(--radius-full);
-  transition: width 0.1s linear;
-}
+
@media (min-width: 1024px) {
  .album-grid-wrap { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
 }

-.album-grid .album-card {
+.album-grid .album-card,
+.album-grid .artist-card {
  flex: 0 0 clamp(140px, 15vw, 180px);
  scroll-snap-align: start;
 }
@@ -519,6 +514,14 @@
 }
 .album-detail-info { display: flex; flex-wrap: wrap; gap: var(--space-2); color: var(--text-muted); font-size: 13px; margin: var(--space-2) 0 var(--space-4); }
 .album-detail-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; row-gap: var(--space-2); }
+.album-detail-actions-primary { display: flex; gap: 8px; flex-wrap: wrap; }
+.album-detail-content { position: relative; z-index: 1; }
+.album-detail-badge { margin-bottom: 0.5rem; }
+.album-detail-back { margin-bottom: 1rem; gap: 6px; }
+.album-info-dot { margin: 0 4px; }
+.album-related { padding: 0 var(--space-6) var(--space-8); }
+.album-related-divider { border-top: 1px solid var(--border-subtle); margin-bottom: 2rem; }
+.album-related-title { margin-bottom: 1rem; }

 .download-hint {
  display: flex;
@@ -568,9 +571,11 @@

 /* ─ Tracklist ─ */
 .tracklist { padding: 0 var(--space-6) var(--space-6); }
+.col-center { text-align: center; }
+
 .tracklist-header {
  display: grid;
-  grid-template-columns: 36px minmax(100px, 3fr) 70px 80px 60px auto;
+  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);
@@ -583,33 +588,33 @@
  margin-bottom: var(--space-2);
 }
 .tracklist-header.tracklist-va {
-  grid-template-columns: 36px minmax(100px, 2fr) minmax(80px, 1.2fr) 70px 80px 60px auto;
+  grid-template-columns: 36px minmax(100px, 2fr) minmax(80px, 1.2fr) 70px 80px 60px 120px;
 }

 .track-row {
  display: grid;
-  grid-template-columns: 36px minmax(100px, 3fr) 70px 80px 60px auto;
+  grid-template-columns: 36px minmax(100px, 3fr) 70px 80px 60px 120px;
  gap: var(--space-3);
-  align-items: start;
+  align-items: center;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast);
 }
 .track-row.track-row-va {
-  grid-template-columns: 36px minmax(100px, 2fr) minmax(80px, 1.2fr) 70px 80px 60px auto;
+  grid-template-columns: 36px minmax(100px, 2fr) minmax(80px, 1.2fr) 70px 80px 60px 120px;
 }

 .tracklist-total {
  display: grid;
-  grid-template-columns: 36px minmax(100px, 3fr) 70px 80px 60px auto;
+  grid-template-columns: 36px minmax(100px, 3fr) 70px 80px 60px 120px;
  gap: var(--space-3);
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-2) var(--space-3);
  margin-top: var(--space-1);
 }
 .tracklist-total.tracklist-va {
-  grid-template-columns: 36px minmax(100px, 2fr) minmax(80px, 1.2fr) 70px 80px 60px auto;
+  grid-template-columns: 36px minmax(100px, 2fr) minmax(80px, 1.2fr) 70px 80px 60px 120px;
 }
 .tracklist-total-label {
  grid-column: 1 / 5;
@@ -622,7 +627,7 @@
 }
 .tracklist-total-value {
  grid-column: 5 / 6;
-  text-align: right;
+  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
@@ -630,15 +635,48 @@
 }
 .tracklist-total.tracklist-va .tracklist-total-label { grid-column: 1 / 6; }
 .tracklist-total.tracklist-va .tracklist-total-value { grid-column: 6 / 7; }
-.track-row:hover { background: var(--bg-hover); }
-.track-row.active { background: var(--accent-dim); animation: track-pulse 2.5s ease-in-out infinite; }
+.track-row:hover,
+.track-row.context-active { background: var(--bg-hover); }
+.track-row.active { background: var(--accent-dim); animation: track-pulse 3s ease-in-out infinite; }
 .track-row.active:hover { background: var(--accent-dim); animation: none; }
@keyframes track-pulse {
-  0%, 100% { background: var(--accent-dim); }
-  50% { background: transparent; }
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.6; }
 }
 .track-row > * { padding-top: 6px; padding-bottom: 6px; }

+.track-num {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Equalizer bars — shown for the currently playing track */
+.eq-bars {
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  gap: 2px;
+  width: 14px;
+  height: 13px;
+}
+.eq-bar {
+  flex: 1;
+  height: 100%;
+  background: var(--accent);
+  border-radius: 1px;
+  transform-origin: bottom;
+  transform: scaleY(0.25);
+  animation: eq-bounce 1.1s ease-in-out infinite;
+}
+.eq-bar:nth-child(1) { animation-delay: 0s;    animation-duration: 1.0s; }
+.eq-bar:nth-child(2) { animation-delay: 0.18s; animation-duration: 1.3s; }
+.eq-bar:nth-child(3) { animation-delay: 0.35s; animation-duration: 0.9s; }
+@keyframes eq-bounce {
+  0%, 100% { transform: scaleY(0.25); }
+  50%       { transform: scaleY(1); }
+}
+
 /* CD / Disc separator */
 .disc-header {
  display: flex;
@@ -657,7 +695,7 @@
 .disc-header:first-child { border-top: none; margin-top: 0; }
 .disc-icon { font-size: 16px; }

-.track-num { font-size: 13px; color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; }
+.track-num { font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
 .track-info { min-width: 0; }
 .track-title { font-size: 13px; font-weight: 500; color: var(--text-primary); overflow-wrap: break-word; word-break: break-word; }
 .track-artist-cell { min-width: 0; display: flex; align-items: flex-start; }
@@ -674,7 +712,11 @@
  text-overflow: ellipsis;
 }
 .track-size { color: var(--ctp-overlay0); }
-.track-duration { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
+.track-duration { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; text-align: center; }
+.track-meta { display: flex; align-items: center; }
+.track-meta .track-codec { margin-top: 0; }
+.track-star-cell { display: flex; justify-content: center; }
+.track-star-btn { padding: 4px; height: auto; min-height: unset; }

 /* ─ Modal ─ */
 .modal-overlay {
@@ -704,6 +746,7 @@
 }
 .modal-close { position: absolute; top: var(--space-4); right: var(--space-4); color: var(--text-muted); }
 .modal-close:hover { color: var(--text-primary); }
+.modal-title { margin-bottom: 1rem; font-family: var(--font-display); }

 .artist-bio { font-size: 14px; line-height: 1.7; color: var(--text-secondary); }
 .artist-bio a { color: var(--accent); text-decoration: underline; }
@@ -799,12 +842,12 @@
 .help-list { display: flex; flex-direction: column; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; }
 .help-item { border-bottom: 1px solid var(--border-subtle); }
 .help-item:last-child { border-bottom: none; }
-.help-question { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); width: 100%; padding: var(--space-4) var(--space-5); text-align: left; font-size: 14px; font-weight: 500; color: var(--text-primary); background: var(--bg-card); transition: background var(--transition-fast); }
+.help-question { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); width: 100%; padding: var(--space-4) var(--space-5); text-align: left; font-size: 14px; font-weight: 500; color: var(--text-primary); background: var(--bg-card); border-left: 3px solid transparent; transition: background var(--transition-fast), border-color var(--transition-fast); }
 .help-question:hover { background: var(--bg-hover); }
-.help-item-open .help-question { color: var(--accent); background: var(--bg-hover); }
+.help-item-open .help-question { color: var(--accent); background: var(--bg-hover); border-left: 3px solid var(--accent); padding-left: calc(var(--space-5) + 3px); }
 .help-chevron { flex-shrink: 0; color: var(--text-muted); transition: transform 0.2s ease; }
 .help-item-open .help-chevron { transform: rotate(180deg); color: var(--accent); }
-.help-answer { padding: var(--space-3) var(--space-5) var(--space-5); font-size: 13px; color: var(--text-secondary); line-height: 1.65; background: var(--bg-hover); border-top: 1px solid var(--border-subtle); }
+.help-answer { padding: var(--space-4) var(--space-5) var(--space-5) calc(var(--space-5) + 3px); font-size: 13px; color: var(--text-secondary); line-height: 1.65; background: var(--bg-app); border-top: 1px solid var(--border-subtle); border-left: 3px solid var(--accent); }
 .settings-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
 .settings-about { display: flex; flex-direction: column; }
 .settings-about-header { display: flex; align-items: center; gap: var(--space-4); }
@@ -1435,3 +1478,196 @@
  bottom: auto;
 }

+
+/* ─ Playlists Page ─ */
+.playlist-page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+.playlist-page-header .page-title { margin-bottom: 0; }
+
+.playlist-filter-input {
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  color: var(--text-primary);
+  font-size: 13px;
+  padding: 6px 12px;
+  width: 220px;
+  outline: none;
+  transition: border-color 0.15s;
+}
+.playlist-filter-input:focus { border-color: var(--accent); }
+.playlist-filter-input::placeholder { color: var(--text-muted); }
+
+.playlist-list { display: flex; flex-direction: column; }
+
+.playlist-list-header {
+  display: grid;
+  grid-template-columns: 36px 1fr 90px 90px 44px;
+  gap: var(--space-3);
+  padding: 6px var(--space-3);
+  border-bottom: 1px solid var(--border-subtle);
+  margin-bottom: 4px;
+}
+
+.playlist-sort-btn {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  transition: color 0.15s;
+}
+.playlist-sort-btn:hover,
+.playlist-sort-btn.active { color: var(--accent); }
+
+.playlist-row {
+  display: grid;
+  grid-template-columns: 36px 1fr 90px 90px 44px;
+  gap: var(--space-3);
+  align-items: center;
+  padding: 6px var(--space-3);
+  border-radius: var(--radius-md);
+  transition: background 0.15s;
+}
+.playlist-row:hover { background: var(--bg-hover); }
+
+.playlist-play-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: var(--accent);
+  color: var(--ctp-base);
+  border: none;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.15s, transform 0.15s;
+  flex-shrink: 0;
+}
+.playlist-row:hover .playlist-play-icon { opacity: 1; }
+.playlist-play-icon:hover { transform: scale(1.1); }
+
+.playlist-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.playlist-meta {
+  font-size: 12px;
+  color: var(--text-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.playlist-delete-btn {
+  opacity: 0;
+  color: var(--ctp-red) !important;
+  padding: 4px;
+  height: auto;
+  min-height: unset;
+  transition: opacity 0.15s;
+  justify-self: center;
+}
+.playlist-row:hover .playlist-delete-btn { opacity: 1; }
+
+/* ─ Statistics Page ─ */
+.stats-page {
+  display: flex;
+  flex-direction: column;
+  gap: 3rem;
+}
+
+.stats-overview {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--space-4);
+}
+@media (max-width: 600px) {
+  .stats-overview { grid-template-columns: repeat(2, 1fr); }
+}
+
+.stats-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  padding: var(--space-5) var(--space-4);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  align-items: center;
+  text-align: center;
+}
+.stats-card-value {
+  font-family: var(--font-display);
+  font-size: 2rem;
+  font-weight: 800;
+  color: var(--accent);
+  line-height: 1;
+}
+.stats-card-label {
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+
+/* Genre chart */
+.genre-chart {
+  background: var(--bg-card);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  padding: var(--space-5);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+.genre-row { display: flex; flex-direction: column; gap: 6px; }
+.genre-row-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: var(--space-3);
+}
+.genre-name {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-primary);
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.genre-counts {
+  font-size: 12px;
+  color: var(--text-muted);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.genre-bar-track {
+  width: 100%;
+  height: 6px;
+  background: var(--bg-hover);
+  border-radius: 3px;
+  overflow: hidden;
+}
+.genre-bar-fill {
+  height: 100%;
+  background: var(--accent);
+  border-radius: 3px;
+  transition: width 0.8s ease-out;
+}
@@ -270,11 +270,10 @@
 /* ─── Player Bar ─── */
 .player-bar {
  grid-area: player;
-  display: grid;
-  grid-template-columns: 280px 1fr 280px;
+  display: flex;
  align-items: center;
  gap: var(--space-4);
-  padding: 0 var(--space-6);
+  padding: 0 var(--space-5);
  background: var(--bg-player);
  border-top: 1px solid var(--border-subtle);
  height: var(--player-height);
@@ -286,6 +285,8 @@
  display: flex;
  align-items: center;
  gap: var(--space-3);
+  flex-shrink: 0;
+  width: 220px;
  min-width: 0;
 }

@@ -366,18 +367,11 @@
  margin-top: 2px;
 }

-.player-controls {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 2px;
-  padding: 12px 0;
-}
-
 .player-buttons {
  display: flex;
  align-items: center;
-  gap: var(--space-3);
+  gap: var(--space-2);
+  flex-shrink: 0;
 }

 .player-btn {
@@ -389,6 +383,7 @@
  border-radius: 50%;
  color: var(--text-muted);
  transition: all var(--transition-fast);
+  flex-shrink: 0;
 }

 .player-btn:hover {
@@ -397,9 +392,14 @@
  transform: scale(1.12);
 }

+.player-btn-sm {
+  width: 28px;
+  height: 28px;
+}
+
 .player-btn-primary {
-  width: 48px;
-  height: 48px;
+  width: 46px;
+  height: 46px;
  background: linear-gradient(135deg, var(--ctp-mauve), var(--ctp-lavender));
  color: var(--ctp-crust);
  border-radius: 50%;
@@ -410,16 +410,22 @@
 .player-btn-primary:hover {
  background: linear-gradient(135deg, var(--ctp-lavender), var(--ctp-mauve));
  color: var(--ctp-crust);
-  transform: scale(1.07);
+  transform: scale(1.06);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4), var(--shadow-glow);
 }

-.player-progress {
+/* Waveform seekbar section */
+.player-waveform-section {
+  flex: 1;
+  min-width: 0;
  display: flex;
  align-items: center;
-  gap: var(--space-3);
-  width: 100%;
-  max-width: 480px;
+  gap: var(--space-2);
+}
+
+.player-waveform-wrap {
+  flex: 1;
+  min-width: 0;
 }

 .player-time {
@@ -427,62 +433,23 @@
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
+  flex-shrink: 0;
 }

-.player-progress-bar {
-  flex: 1;
-  position: relative;
-}
-
-.player-progress-bar input[type="range"] {
-  width: 100%;
-}
-
-.player-right {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: var(--space-3);
-}
-
-.volume-control {
+/* Volume section */
+.player-volume-section {
  display: flex;
  align-items: center;
  gap: var(--space-2);
-  min-width: 120px;
+  flex-shrink: 0;
+  width: 155px;
 }

-.volume-control svg { flex-shrink: 0; color: var(--text-muted); }
-
-.volume-control input[type="range"] { flex: 1; }
-
-/* Connection Toggle */
-.conn-toggle {
-  display: flex;
-  align-items: center;
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-full);
-  padding: 2px;
-  font-size: 11px;
-  font-weight: 600;
-  overflow: hidden;
-  user-select: none;
+.player-volume-slider {
+  flex: 1;
+  min-width: 0;
 }

-.conn-toggle-btn {
-  padding: 4px 10px;
-  border-radius: var(--radius-full);
-  transition: all var(--transition-fast);
-  color: var(--text-muted);
-  cursor: pointer;
-  letter-spacing: 0.03em;
-}
-
-.conn-toggle-btn.active {
-  background: var(--accent);
-  color: var(--ctp-crust);
-}

 /* ─── Queue Panel ─── */
 .queue-panel {
@@ -603,7 +570,7 @@
 /* Prevent child elements from stealing dragenter/dragleave events */
 .queue-item > * { pointer-events: none; }

-.queue-item:hover {
+.queue-item:hover, .queue-item.context-active {
  background: var(--bg-hover);
  color: var(--text-primary);
 }
@@ -662,6 +662,8 @@ select.input.input:focus {
  display: flex;
  gap: 2px;
  color: var(--ctp-overlay1);
+  justify-content: center;
+  width: 100%;
 }
 .star-rating .star.filled { color: var(--ctp-yellow); }
 .star-rating .star:hover { color: var(--ctp-yellow); cursor: pointer; }
@@ -0,0 +1,20 @@
+declare module 'butterchurn' {
+  interface Visualizer {
+    connectAudio(audioNode: AudioNode): void;
+    loadPreset(preset: unknown, blendTime: number): void;
+    render(): void;
+    setRendererSize(width: number, height: number): void;
+  }
+  interface CreateOptions {
+    width: number;
+    height: number;
+    pixelRatio?: number;
+  }
+  function createVisualizer(ctx: AudioContext, canvas: HTMLCanvasElement, opts: CreateOptions): Visualizer;
+  export default { createVisualizer };
+}
+
+declare module 'butterchurn-presets' {
+  function getPresets(): Record<string, unknown>;
+  export default { getPresets };
+}
@@ -1,10 +1,39 @@
 const DB_NAME = 'psysonic-img-cache';
 const STORE_NAME = 'images';
 const MAX_AGE_MS = 30 * 24 * 60 * 60 * 1000; // 30 days
+const MAX_MEMORY_CACHE = 150; // max object URLs kept in RAM
+const MAX_CONCURRENT_FETCHES = 5;

-// In-memory map: cacheKey → object URL (avoids creating multiple object URLs per session)
+// In-memory map: cacheKey → object URL (insertion-order = LRU approximation)
 const objectUrlCache = new Map<string, string>();

+// Concurrency limiter for network fetches
+let activeFetches = 0;
+const fetchQueue: Array<() => void> = [];
+
+function acquireFetchSlot(): Promise<void> {
+  if (activeFetches < MAX_CONCURRENT_FETCHES) {
+    activeFetches++;
+    return Promise.resolve();
+  }
+  return new Promise(resolve => fetchQueue.push(resolve));
+}
+
+function releaseFetchSlot(): void {
+  activeFetches--;
+  const next = fetchQueue.shift();
+  if (next) { activeFetches++; next(); }
+}
+
+function evictIfNeeded(): void {
+  while (objectUrlCache.size > MAX_MEMORY_CACHE) {
+    const oldestKey = objectUrlCache.keys().next().value;
+    if (!oldestKey) break;
+    URL.revokeObjectURL(objectUrlCache.get(oldestKey)!);
+    objectUrlCache.delete(oldestKey);
+  }
+}
+
 let db: IDBDatabase | null = null;
 let dbPromise: Promise<IDBDatabase> | null = null;

@@ -75,10 +104,12 @@ export async function getCachedUrl(fetchUrl: string, cacheKey: string): Promise<
  if (blob) {
    const objUrl = URL.createObjectURL(blob);
    objectUrlCache.set(cacheKey, objUrl);
+    evictIfNeeded();
    return objUrl;
  }

-  // 3. Network fetch → store in IDB → return object URL
+  // 3. Network fetch with concurrency limit → store in IDB → return object URL
+  await acquireFetchSlot();
  try {
    const resp = await fetch(fetchUrl);
    if (!resp.ok) return fetchUrl;
@@ -86,8 +117,11 @@ export async function getCachedUrl(fetchUrl: string, cacheKey: string): Promise<
    putBlob(cacheKey, newBlob); // fire-and-forget
    const objUrl = URL.createObjectURL(newBlob);
    objectUrlCache.set(cacheKey, objUrl);
+    evictIfNeeded();
    return objUrl;
  } catch {
-    return fetchUrl; // fallback: direct URL
+    return fetchUrl;
+  } finally {
+    releaseFetchSlot();
  }
 }
Author	SHA1	Message	Date
Psychotoxical	9b4eb0982c	feat: new app icon, AUR package, remove AppImage (v1.4.4) - New app icon across all platforms - AUR package: Arch/CachyOS users can install via yay/paru - AppImage removed: incompatible with non-Ubuntu distros due to bundled WebKitGTK vs system Mesa/EGL conflicts - CI: build only deb+rpm for Linux, drop GStreamer/linuxdeploy deps Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-03-17 19:10:08 +01:00
Psychotoxical	8ec642f368	fix: Random Mix improvements, queue UX fixes (v1.4.3) - Random Mix: remove redundant Play All button in genre mix section - Random Mix: Play All disabled with live counter during genre mix loading - Random Mix: cap genre fetch at 50 genres to prevent over-fetching - Random Mix: cache-bust getRandomSongs to always get fresh results - Random Mix: clear songs on remix to fix display/play mismatch - Queue: show song count and total duration in header - Queue: context-active class keeps hover highlight on right-click - Context Menu: add Favorite option for queue-item type Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-03-16 22:38:27 +01:00
Psychotoxical	73f836b2ee	fix: AppImage EGL crash on modern distros, update link capability (v1.4.2) - Switch Linux CI build from ubuntu-22.04 to ubuntu-24.04 — bundles WebKitGTK 2.44 which uses eglGetPlatformDisplay instead of the deprecated eglGetDisplay(EGL_DEFAULT_DISPLAY) that fails on Mesa 25.x (CachyOS/Arch with RDNA 4 and other modern hardware) - Add EGL_PLATFORM=x11 to AppRun as additional safeguard for XWayland - Fix shell:allow-open capability missing URL scope (update toast link was silently blocked by Tauri v2 without explicit allow-list) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-03-16 21:26:33 +01:00
Psychotoxical	af18aef42a	fix: random albums performance, image cache memory leak, i18n fix (v1.4.1) - Remove auto-refresh timer from Random Albums (caused 100ms progress interval + 30 concurrent fetches every 30s, eventually freezing the app) - Limit concurrent image fetches to 5 (was unbounded) - Cap in-memory object URL cache at 150 entries with revokeObjectURL eviction - Add cancellation flag to useCachedUrl to prevent setState on unmounted components - Fix hardcoded "Neueste" page title in New Releases (now uses i18n) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-03-16 19:09:31 +01:00
Psychotoxical	d3ffa30bf5	feat: statistics upgrade, playlists redesign, artist cards, and UX improvements (v1.4.0) - Statistics page: library stat cards, recently played, most played, highest rated, genre chart - Playlists page: list layout with sort (Name/Tracks/Duration) and filter input - Favorites songs: full tracklist layout with artist column, context menu, enqueue-all button - AlbumDetail: extracted AlbumHeader and AlbumTrackList components - Artist cards: square cover, same sizing as album cards (clamp 140-180px) - Random Albums: removed renderKey remount, added loadingRef guard, fixed manual refresh race - Context menu: "Go to Album" option for song and queue-item types - Queue panel meta box: artist → artist page, album → album page, removed year - Random Mix: hover persistence via .context-active class while context menu is open - i18n: "Warteschlange" consistently used for queue in German Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-03-16 17:36:58 +01:00
Psychotoxical	f666f84479	chore: switch license from MIT to GPL v3 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-03-15 21:33:02 +01:00
Psychotoxical	c91fdd7e1d	feat: Waveform seekbar, MilkDrop visualizer, EQ bars, in-app browser, and UX improvements (v1.3.0) - PlayerBar redesigned: canvas waveform seekbar (500 bars, blue→mauve gradient + glow) replaces thin slider; new flex layout; queue toggle moved to content header (consistent with sidebar pattern) - MilkDrop visualizer in Ambient Stage via Butterchurn; hidden audio analysis, preset shuffle, smooth blend transitions - Tracklist: animated EQ bars for playing track, play icon when paused, align-items: center fix - Artist pages: Last.fm + Wikipedia open in native Tauri WebviewWindow (in-app browser) - Hero/Discover deduplication: single fetch of 20 random albums split between sections - Update checker: runs every 10 minutes during runtime; version shown without v-prefix - Settings version: now read from package.json instead of hardcoded - Help page: new Random Mix section, updated Playback + Library sections, improved accordion styling - Bump version to 1.3.0 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-03-15 21:24:00 +01:00
Psychotoxical	9bdd433a4b	ci: upsert release — reuse existing release if tag already exists Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-03-15 12:14:22 +01:00
Psychotoxical	a5fd70d3eb	ci: add libasound2-dev for rodio/ALSA on Linux build Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-03-15 12:12:44 +01:00