chore(release): v1.42.0

Consolidates everything since v1.40.0 (public) into one coherent release. v1.41.0 remains as an internal Draft on GitHub that was used to verify the Cachix substituter pipeline and never went public — this release folds its intended contents in and adds the mini-player feature work, the player-bar time toggle (kveld9), the ReplayGain expand badge and related UX polish on top. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
feat(mini-player): custom titlebar with action icons; cover/meta/controls layout polish
2026-07-26 00:57:42 +00:00 · 2026-04-19 13:40:57 +02:00 · 2026-04-19 13:28:28 +02:00 · 2026-04-19 13:10:16 +02:00 · 2026-04-19 13:05:06 +02:00 · 2026-04-19 12:54:00 +02:00
35 changed files with 2171 additions and 190 deletions
@@ -13,11 +13,28 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 >
 > **📦 Version jump 1.34.x → 1.40.0:** The 1.34.x patch series was bumped a lot as each small feature landed. 1.40.0 consolidates the last few weeks of work — macOS signing + auto-updater, the Device-Sync overhaul, theme work and contrast audits — into a single coherent release. The next major bump (2.0.0) is planned once Windows code-signing + Windows auto-updater are active as well.

-## [1.41.0] - 2026-04-18
+## [1.42.0] - 2026-04-19
+
+> **🛠️ Note on the 1.41.0 jump:** The 1.41.0 tag exists as an internal Draft release on GitHub — it was used to wire up and verify the Cachix substituter pipeline and never went public. **1.42.0 is the first public release after 1.40.0** and consolidates everything that was prepared for 1.41.0 plus the work landed on top in the days since.
+>
+> **❄️ Cachix is live for NixOS users.** The `psysonic.cachix.org` substituter is now actually fed by every release. Earlier 1.40.x runs were silently skipping the cache push (see *Fixed* below), so the first user to ask for a given output paid the full compile cost. Starting with 1.42.0, `nix run github:Psychotoxical/psysonic` and the NixOS module both pull the prebuilt closure straight from Cachix — no local Rust + symphonia + libopus build required.

 ### Added

- **Mini player window — early alpha** *(Issue [#162](https://github.com/Psychotoxical/psysonic/issues/162), by [@Psychotoxical](https://github.com/Psychotoxical))*: A small always-on-top companion window with album art, title, artist, prev/play/next, progress bar, and a pin-on-top toggle. Opens via the new picture-in-picture icon in the player bar. The main window auto-minimizes when the mini opens and is restored when the mini is hidden or closed; an "expand" button in the mini jumps back without closing it. Spacebar toggles playback, arrow keys skip tracks. On tiling WMs (Hyprland/Sway/i3) the always-on-top flag is skipped since it wouldn't be honoured anyway. Lyrics, EQ, queue expand and drag-snap are deliberately out of scope for this first cut.
+- **Mini player — feature-complete second cut** *(Issue [#162](https://github.com/Psychotoxical/psysonic/issues/162), by [@Psychotoxical](https://github.com/Psychotoxical))*: The early-alpha mini from the internal 1.41.0 prep gets the rest of the workflow it was missing.
+  - **Expandable queue panel** with full track list, search-style overlay scrollbar (no width-eating gutter), drag-to-reorder using the existing PsyDnD system, and a localized right-click context menu (Play now / Remove from queue / Open album / Go to artist / Favorite / Song info — all forwarded to the main window via Tauri events so the source-of-truth playerStore stays consistent).
+  - **Custom in-page titlebar** on Windows + Linux with a drag region, the current track title and the queue / pin / open-main / close action icons. macOS keeps the native traffic-lights titlebar so the system look is preserved. The lower toolbar from the alpha is gone — its four buttons live in the titlebar now.
+  - **Persistent geometry**: window position, expanded-queue height and queue-open state all survive an app restart. Position is written to `<app_config_dir>/mini_player_pos.json` on every move (throttled), and re-applied after each show — Linux WMs (Mutter/KWin) re-centre hidden windows on show, so without re-applying the position would be lost on the second open.
+  - **User-bindable keyboard shortcut** in Settings → Shortcuts (`open-mini-player`, default unbound). The same chord toggles between main and mini regardless of which window has focus.
+  - **Layout polish**: cover shrinks 112 → 84 px, the right column gets title / artist / transport in a single block, progress + toolbar take full width.
+  - **Live theme / font / language sync**: changes in the main window propagate to an open mini via the shared localStorage `storage` event — no need to close + re-open the mini after rebinding a shortcut or switching themes.
+  - **Always-on-top reliability fix**: WMs that silently ignore `set_always_on_top(true)` when the flag is "already true" (KWin, certain Mutter releases) get a forced false → true cycle so the constraint is actually re-evaluated. The frontend also re-asserts the pin state on mount and on focus, so the user no longer has to click the pin button twice for it to stick.
+
+- **Player bar — click-to-toggle duration / remaining time** *(contributed by [@kveld9](https://github.com/kveld9), PR [#212](https://github.com/Psychotoxical/psysonic/pull/212))*: Click the time read-out in the player bar to swap between total duration (`3:45`) and remaining time (`-2:34`). Updates live, persisted to `themeStore.showRemainingTime`. A small swap icon (⇄) and hover highlight signal the interaction.
+
+- **Queue — ReplayGain in tech strip, expandable badge** *(Issue [#195](https://github.com/Psychotoxical/psysonic/issues/195), originally by [@cucadmuh](https://github.com/cucadmuh) in PRs [#196](https://github.com/Psychotoxical/psysonic/pull/196) / [#201](https://github.com/Psychotoxical/psysonic/pull/201) — UX iteration by [@Psychotoxical](https://github.com/Psychotoxical) on cucadmuh's feedback)*: Tracks with ReplayGain metadata now show a small `RG ⌄` pill at the end of the codec/bitrate/sample-rate strip. Hover reveals the values via tooltip; click expands a second line ("ReplayGain · T -8.9 dB · A -11.0 dB · Peak 0.998") that is persisted across sessions. Hides itself for tracks without RG metadata.
+
+- **Changelog — sidebar banner + dedicated `/whats-new` page** *(by [@Psychotoxical](https://github.com/Psychotoxical))*: The auto-popup modal that nagged the user on first launch after each update is replaced by a discreet sidebar banner. Clicking it opens a full `/whats-new` page that renders the latest CHANGELOG section in app — no separate Markdown viewer, no broken links to GitHub.

 - **Favorites — genre column + Top Favorite Artists row** *(Issue [#87](https://github.com/Psychotoxical/psysonic/issues/87), by [@Psychotoxical](https://github.com/Psychotoxical))*: The Favorites tracklist now has a toggleable Genre column (alongside the existing Album column and multi-genre filter). A new horizontally scrolling "Top Favorite Artists" row sits between Radio Stations and Songs, aggregated from starred tracks and sorted by star count. Clicking an artist card narrows the song list to that artist.

@@ -27,6 +44,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

 - **Device Sync — album artist on both panels** *(by [@Psychotoxical](https://github.com/Psychotoxical))*: Album entries in both the library (left) and on-device (right) panels now display `Album · Artist` inline, so sampler discs and self-titled albums are no longer guesswork. Playlists unchanged.

+- **NixOS — first-class flake install guide** *(contributed by [@cucadmuh](https://github.com/cucadmuh), PRs [#209](https://github.com/Psychotoxical/psysonic/pull/209) / [#210](https://github.com/Psychotoxical/psysonic/pull/210))*: A new top-level `nixos-install.md` walks through adding Psysonic as a flake input, installing via `environment.systemPackages` / `home.packages`, and wiring up the public `psysonic.cachix.org` substituter so every NixOS user pulls prebuilt binaries. README links to it directly.
+
+- **README — AppImage in the Linux install options + Cachix badge** *(by [@Psychotoxical](https://github.com/Psychotoxical))*: The Linux install section now lists AppImage alongside `.deb`, `.rpm`, AUR and Nix flakes. A Cachix badge on the README header signals that NixOS users get prebuilt binaries.
+
 ### Changed

 - **Genre filter — portal popover** *(by [@Psychotoxical](https://github.com/Psychotoxical))*: The inline tagbox + dropdown (capped at 60 entries, ate header space when expanded) is replaced by a compact button that opens a portal-rendered popover with a search field and the full scrollable list of genres. Selected genres sort to the top. Used on Albums, New Releases, Random Albums and Favorites.
@@ -37,8 +58,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

 - **Device Sync — album/playlist meta inline** *(by [@Psychotoxical](https://github.com/Psychotoxical))*: `BrowserRow` renders secondary info inline with a `·` separator in muted colour instead of a separate right-aligned column, matching the on-device panel's format.

+- **README — Arch/AUR fold-up** *(by [@Psychotoxical](https://github.com/Psychotoxical))*: The Arch / AUR install instructions are folded into the Linux install section so the README stops scrolling forever.
+
 ### Fixed

+- **Player bar — black-flash on WebKitGTK** *(by [@Psychotoxical](https://github.com/Psychotoxical))*: Linux users occasionally saw the entire player bar paint fully black for one frame when an unrelated layer elsewhere on the page invalidated. `contain: layout paint` makes the bar its own paint boundary so it can no longer be pulled into a surrounding dirty rect. No-op on platforms that don't exhibit the flash (Wayland-with-GPU, Chromium webviews on Windows / macOS).
+
+- **Player bar — time-toggle tooltip uses the in-app TooltipPortal** *(follow-up to PR [#212](https://github.com/Psychotoxical/psysonic/pull/212), by [@Psychotoxical](https://github.com/Psychotoxical))*: The new time-swap control was rendering the native browser `title=` tooltip (unstyled OS popup, ignored by every other control). Switched to `data-tooltip="…"` so it matches every other player-bar tooltip.
+
 - **Fullscreen player — lyrics menu toggle + readability** *(by [@Psychotoxical](https://github.com/Psychotoxical))*: Re-clicking the mic icon now actually closes the lyrics settings panel instead of the outside-click handler closing it and the click re-opening it — the trigger button is excluded from the outside-check. The panel itself is now a solid surface (no backdrop blur, near-opaque background, higher-contrast button text) so settings remain readable over the busy fullscreen background.

 - **i18n — ArtistCardLocal album count** *(contributed by [@cucadmuh](https://github.com/cucadmuh))*: Local artist cards were rendering the album count with hardcoded German (`Album` / `Alben`). Switched to the existing plural-aware `artists.albumCount` key which already covers all 8 locales including Russian Slavic plurals.
@@ -47,7 +74,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

 ### Contributors

- [@cucadmuh](https://github.com/cucadmuh) — i18n fix for ArtistCardLocal.
+- [@kveld9](https://github.com/kveld9) — click-to-toggle duration / remaining time in the player bar.
+- [@cucadmuh](https://github.com/cucadmuh) — i18n fix for ArtistCardLocal, ReplayGain UX feedback that drove the expandable badge, NixOS install guide, README polish.

 ---

@@ -9,7 +9,8 @@
    <a href="https://tauri.app/"><img alt="Built with Tauri" src="https://img.shields.io/badge/Built%20with-Tauri-242938?style=flat-square&logo=tauri"></a>
    <a href="https://aur.archlinux.org/packages/psysonic"><img alt="AUR" src="https://img.shields.io/aur/version/psysonic?style=flat-square&color=1793d1"></a>
    <a href="https://aur.archlinux.org/packages/psysonic-bin"><img alt="AUR (bin)" src="https://img.shields.io/aur/version/psysonic-bin?style=flat-square&color=1793d1&label=AUR%20(bin)"></a>
-    <a href="https://discord.gg/pq6d2ZYSg"><img alt="Discord" src="https://img.shields.io/badge/Discord-Join%20us-5865F2?style=flat-square&logo=discord&logoColor=white"></a>
+    <a href="https://psysonic.cachix.org"><img alt="Cachix" src="https://img.shields.io/badge/Cachix-psysonic-5277c3?style=flat-square&logo=nixos&logoColor=white"></a>
+    <a href="https://discord.gg/AMnDRErm4u"><img alt="Discord" src="https://img.shields.io/badge/Discord-Join%20us-5865F2?style=flat-square&logo=discord&logoColor=white"></a>
  </p>
 </div>

@@ -49,7 +50,8 @@ Designed specifically for users hosting their own music via Navidrome or other S
 - 🖥️ **CLI Control**: Control playback, switch servers, manage the queue, and more directly from the command line.
 - ⌨️ **Customization**: Configurable keybindings, UI fonts, global zoom slider, system tray, backup & restore, and in-app auto-update.
 - 🌍 **8 Languages**: English, German, French, Dutch, Spanish, Chinese, Norwegian, Russian.
- 🖥️ **Cross-Platform**: Windows, macOS, and Linux (Arch AUR, .deb, .rpm).
+- 🖥️ **Cross-Platform**: Windows, macOS, and Linux (Arch AUR, .deb, .rpm, NixOS flake).
+- ❄️ **NixOS / flakes**: First-class flake package with a public **Cachix** binary cache (`psysonic.cachix.org`) — `nix run github:Psychotoxical/psysonic` or add to your system config. See the [NixOS install guide](./nixos-install.md).

 ## 🗺️ Roadmap

@@ -74,29 +76,9 @@ curl -fsSL https://raw.githubusercontent.com/Psychotoxical/psysonic/main/scripts
 **Manual Installation:**
 - **Ubuntu / Debian**: `.deb` from GitHub Releases
 - **Fedora / RHEL**: `.rpm` from GitHub Releases
+- **Any distro (portable)**: `.AppImage` from GitHub Releases — `chmod +x` and run, no install required

-### 🍎 macOS
-
- **macOS**: `.dmg` (Universal or Apple Silicon)
-
-> [!WARNING]
-> **Gatekeeper Note:**
-> Since the app is released without an Apple Developer certificate, macOS will block it by default. To bypass this, run the following command in the Terminal after moving the app to the Applications folder:
-> ```sh
-> xattr -cr /Applications/Psysonic.app
-> ```
-
-### 🪟 Windows
-
- **Windows**: `.exe` (NSIS installer)
-
-> [!WARNING]
-> **SmartScreen Note:**
-> Windows SmartScreen might show a warning because the installer isn't signed with an expensive developer certificate. Click on **"More info"** and then **"Run anyway"**.
-
-## 📦 Installation (Arch Linux / AUR)
-
-Psysonic is available in the **AUR** in two versions. Choose the one that best fits your needs:
+**Arch Linux (AUR):**

 | Package | Type | Description |
 | :--- | :--- | :--- |
@@ -106,6 +88,25 @@ Psysonic is available in the **AUR** in two versions. Choose the one that best f
 > [!TIP]
 > The AUR binary package is kindly provided and maintained by [**kilyabin**](https://github.com/kilyabin).

+**❄️ NixOS (flakes):**
+- `nix run github:Psychotoxical/psysonic` — one-shot launch
+- Full guide: [`nixos-install.md`](./nixos-install.md) *(contributed by [@cucadmuh](https://github.com/cucadmuh), PR [#209](https://github.com/Psychotoxical/psysonic/pull/209))*
+
+### 🍎 macOS
+
+- **macOS**: `.dmg` (Universal or Apple Silicon) — **signed with an Apple Developer ID and notarized by Apple**. Gatekeeper opens it with a single click, no `xattr` workaround required.
+
+> [!NOTE]
+> Since **v1.40.0**, macOS builds include an in-app auto-updater: click **Install now** in the update notification and the signed `.app.tar.gz` is fetched, verified against the bundled minisign public key, replaced in place, and the app relaunches — all in one step.
+
+### 🪟 Windows
+
+- **Windows**: `.exe` (NSIS installer)
+
+> [!WARNING]
+> **SmartScreen Note:**
+> Windows SmartScreen might show a warning because the installer isn't signed with an expensive developer certificate. Click on **"More info"** and then **"Run anyway"**.
+
 ## 🚀 Getting Started

 1. Download and install Psysonic.
@@ -0,0 +1,134 @@
+# Installing Psysonic on NixOS (flake)
+
+This guide is for **NixOS** users who want **Psysonic from the upstream Git flake** (`github:Psychotoxical/psysonic`). Supported systems match the flake: **`x86_64-linux`** and **`aarch64-linux`**.
+
+## Prerequisites
+
+**Flakes** enabled (e.g. in `configuration.nix`):
+
+```nix
+nix.settings.experimental-features = [ "nix-command" "flakes" ];
+```
+
+## Binary cache (Cachix)
+
+The project publishes store paths to a public Cachix cache so you can **substitute** binaries instead of compiling Psysonic locally on every machine.
+
+- **Cache page:** [psysonic.cachix.org](https://psysonic.cachix.org)
+- **Substituter URL:** `https://psysonic.cachix.org`
+- **Public key** (trust this only if it matches what you expect from the cache owners):
+
+  ```text
+  psysonic.cachix.org-1:M9cQyQ7tgvUWOQ5Pyt8ozlMoPLtOZir6MfRuTH9/VYA=
+  ```
+
+### NixOS (`configuration.nix` or a flake module)
+
+Add the substituter **and** its signing key under `nix.settings`. Keep `cache.nixos.org` in the list so ordinary `nixpkgs` binaries still resolve:
+
+```nix
+{
+  nix.settings = {
+    substituters = [
+      "https://psysonic.cachix.org"
+      "https://cache.nixos.org/"
+    ];
+    trusted-public-keys = [
+      "psysonic.cachix.org-1:M9cQyQ7tgvUWOQ5Pyt8ozlMoPLtOZir6MfRuTH9/VYA="
+      "cache.nixos.org-1:6NCHdSuAYQQOxGEKTGXLN9WWRXoSBT8GRiSnR6IdfGW="
+    ];
+  };
+}
+```
+
+After `nixos-rebuild switch`, builds that hit the cache will download from Cachix. More background: [Cachix — Getting started](https://docs.cachix.org/getting-started).
+
+## Install on NixOS (flake configuration)
+
+Add the repo as an **input**, then reference **`packages.<system>.psysonic`** (or **`default`**, which is the same package).
+
+### Example: top-level `flake.nix` + `nixosConfigurations`
+
+```nix
+{
+  inputs = {
+    nixpkgs.url = "github:NixOS/nixpkgs/nixos-unstable";
+    psysonic.url = "github:Psychotoxical/psysonic";
+  };
+
+  outputs = { self, nixpkgs, ... }@inputs: let
+    system = "x86_64-linux";
+  in {
+    nixosConfigurations.my-host = nixpkgs.lib.nixosSystem {
+      inherit system;
+      modules = [
+        ./configuration.nix
+        {
+          environment.systemPackages = [
+            inputs.psysonic.packages.${system}.psysonic
+          ];
+        }
+      ];
+    };
+  };
+}
+```
+
+Inside a **module** where you already have `pkgs` and flake `inputs` in scope, a common pattern is:
+
+```nix
+environment.systemPackages = with pkgs; [
+  # …
+  inputs.psysonic.packages.${pkgs.stdenv.hostPlatform.system}.psysonic
+];
+```
+
+### Pinning a revision or tag
+
+Follow **`main`** (above) to track the moving branch, or pin for reproducibility:
+
+```nix
+psysonic.url = "github:Psychotoxical/psysonic?ref=app-v1.34.13";  # example: release tag
+```
+
+Use a tag or commit SHA that exists on GitHub; the release workflow keeps **`flake.lock`** and **`nix/upstream-sources.json`** (`npmDepsHash`) in sync on tagged releases.
+
+### Apply configuration
+
+- **NixOS flake host**
+
+  ```bash
+  sudo nixos-rebuild switch --flake .#my-host
+  ```
+
+- **Home Manager** (if used separately)
+
+  ```bash
+  home-manager switch --flake .#my-user@my-host
+  ```
+
+## Home Manager
+
+If you manage packages with [Home Manager](https://github.com/nix-community/home-manager), add the same package to `home.packages`:
+
+```nix
+home.packages = [
+  inputs.psysonic.packages.${pkgs.stdenv.hostPlatform.system}.psysonic
+];
+```
+
+(Adjust how `inputs` / `pkgs` are passed into your Home Manager module.)
+
+## Desktop entry
+
+The flake package installs a **`.desktop`** file and icon via `copyDesktopItems`; after `nixos-rebuild switch` (or a Home Manager activation that includes the package), Psysonic should appear in your application launcher like any other desktop app.
+
+## Troubleshooting (Linux / WebKit)
+
+Some GPU / compositor setups show a black window or broken scrolling under Wayland/EGL. The upstream Help / FAQ documents workarounds (e.g. running under **X11** and compositor-related env vars). Those apply to the Nix-built binary as well as other Linux builds.
+
+## More detail in-repo
+
+- **`flake.nix`** — package outputs, `devShell`, supported systems (see comments there for `nix build` / `nix develop`).
+- **`nix/psysonic.nix`** — how the app is built from this source tree.
+- **`.github/workflows/release.yml`** — `verify-nix` job: refreshes lock/npm hash and pushes store paths to Cachix on release tags.
@@ -1,12 +1,12 @@
 {
  "name": "psysonic",
-  "version": "1.34.13",
+  "version": "1.41.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "psysonic",
-      "version": "1.34.13",
+      "version": "1.41.0",
      "dependencies": {
        "@fontsource-variable/dm-sans": "^5.2.8",
        "@fontsource-variable/figtree": "^5.2.10",
@@ -1,6 +1,6 @@
 {
  "name": "psysonic",
-  "version": "1.41.0",
+  "version": "1.42.0",
  "private": true,
  "scripts": {
    "dev": "vite",
@@ -1,6 +1,6 @@
 # Maintainer: Psychotoxic <psychotoxic@gmx.de>
 pkgname=psysonic
-pkgver=1.41.0
+pkgver=1.42.0
 pkgrel=1
 pkgdesc="Desktop music player for Subsonic API-compatible servers (Navidrome, Gonic, etc.)"
 arch=('x86_64')
@@ -3115,9 +3115,9 @@ checksum = "9f7c3e4beb33f85d45ae3e3a1792185706c8e16d043238c593331cc7cd313b50"

 [[package]]
 name = "open"
-version = "5.3.3"
+version = "5.3.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "43bb73a7fa3799b198970490a51174027ba0d4ec504b03cd08caf513d40024bc"
+checksum = "9f3bab717c29a857abf75fcef718d441ec7cb2725f937343c734740a985d37fd"
 dependencies = [
 "dunce",
 "is-wsl",
@@ -3653,7 +3653,7 @@ dependencies = [

 [[package]]
 name = "psysonic"
-version = "1.41.0"
+version = "1.42.0"
 dependencies = [
 "biquad",
 "discord-rich-presence",
@@ -5971,9 +5971,9 @@ checksum = "bc7d623258602320d5c55d1bc22793b57daff0ec7efc270ea7d55ce1d5f5471c"

 [[package]]
 name = "typenum"
-version = "1.19.0"
+version = "1.20.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "562d481066bde0658276a35467c4af00bdc6ee726305698a55b86e61d7ad82bb"
+checksum = "40ce102ab67701b8526c123c1bab5cbe42d7040ccfd0f64af1a385808d2f43de"

 [[package]]
 name = "uds_windows"
@@ -1,6 +1,6 @@
 [package]
 name = "psysonic"
-version = "1.41.0"
+version = "1.42.0"
 description = "Psysonic Desktop Music Player"
 authors = []
 license = ""
@@ -36,6 +36,7 @@
    "core:window:allow-is-fullscreen",
    "core:window:allow-start-dragging",
    "core:window:allow-create",
+    "core:window:allow-set-size",
    "core:webview:allow-create-webview-window",
    "process:allow-restart",
    "updater:default"
@@ -2603,6 +2603,104 @@ fn is_tiling_wm_cmd() -> bool {
 // "mini". On tiling WMs (Hyprland, Sway, i3, …) always-on-top is ignored, so
 // we fall back to a regular window there.

+/// Persisted geometry for the mini player. Stored in
+/// `<app_config_dir>/mini_player_pos.json` and rewritten (throttled) on
+/// every `WindowEvent::Moved` so the window reopens where the user last
+/// left it. Coordinates are physical pixels — that's what `set_position`
+/// and the move event both report, so we don't need to round-trip through
+/// scale factors that may differ across monitors.
+#[derive(serde::Serialize, serde::Deserialize, Clone, Copy, Debug)]
+struct MiniPlayerPosition {
+    x: i32,
+    y: i32,
+}
+
+fn mini_pos_file(app: &tauri::AppHandle) -> Option<std::path::PathBuf> {
+    app.path().app_config_dir().ok().map(|p| p.join("mini_player_pos.json"))
+}
+
+fn read_mini_pos(app: &tauri::AppHandle) -> Option<MiniPlayerPosition> {
+    let path = mini_pos_file(app)?;
+    let raw = std::fs::read_to_string(&path).ok()?;
+    serde_json::from_str(&raw).ok()
+}
+
+fn write_mini_pos(app: &tauri::AppHandle, pos: MiniPlayerPosition) {
+    let Some(path) = mini_pos_file(app) else { return };
+    if let Some(parent) = path.parent() {
+        let _ = std::fs::create_dir_all(parent);
+    }
+    if let Ok(json) = serde_json::to_string(&pos) {
+        let _ = std::fs::write(path, json);
+    }
+}
+
+/// Tracks when we last set the mini player position programmatically.
+/// `WindowEvent::Moved` fires for both user drags AND our own `show()` /
+/// `set_position` calls — without this guard the WM's "centre on show"
+/// behaviour would silently overwrite the user's saved position.
+fn last_programmatic_pos_set() -> &'static Mutex<std::time::Instant> {
+    static LAST: OnceLock<Mutex<std::time::Instant>> = OnceLock::new();
+    LAST.get_or_init(|| Mutex::new(std::time::Instant::now() - std::time::Duration::from_secs(10)))
+}
+
+fn mark_mini_pos_programmatic() {
+    *last_programmatic_pos_set().lock().unwrap() = std::time::Instant::now();
+}
+
+fn is_mini_pos_programmatic() -> bool {
+    last_programmatic_pos_set().lock().unwrap().elapsed()
+        < std::time::Duration::from_millis(1000)
+}
+
+/// Throttle disk writes during a drag — `WindowEvent::Moved` fires on
+/// every pointer step. 250 ms keeps the file fresh enough that any close
+/// or release lands a recent position, without hammering the disk.
+/// Programmatic moves (during `show()` / `set_position`) are skipped so
+/// WM re-centring on re-show doesn't clobber the saved position.
+fn persist_mini_pos_throttled(app: &tauri::AppHandle, x: i32, y: i32) {
+    if is_mini_pos_programmatic() {
+        return;
+    }
+    static LAST_WRITE: OnceLock<Mutex<std::time::Instant>> = OnceLock::new();
+    let mu = LAST_WRITE.get_or_init(|| {
+        Mutex::new(std::time::Instant::now() - std::time::Duration::from_secs(10))
+    });
+    {
+        let mut last = mu.lock().unwrap();
+        if last.elapsed() < std::time::Duration::from_millis(250) {
+            return;
+        }
+        *last = std::time::Instant::now();
+    }
+    write_mini_pos(app, MiniPlayerPosition { x, y });
+}
+
+/// Default position when nothing is persisted: bottom-right of the monitor
+/// the main window sits on (falls back to primary). A 24 px logical margin
+/// keeps it off the screen edge; +56 px on the bottom margin avoids most
+/// taskbars/docks since Tauri does not expose work-area rects.
+fn default_mini_position(app: &tauri::AppHandle) -> Option<tauri::PhysicalPosition<i32>> {
+    let monitor = app
+        .get_webview_window("main")
+        .and_then(|w| w.current_monitor().ok().flatten())
+        .or_else(|| app.primary_monitor().ok().flatten())?;
+
+    let scale = monitor.scale_factor();
+    let m_pos = monitor.position();
+    let m_size = monitor.size();
+
+    let win_w = (340.0 * scale).round() as i32;
+    let win_h = (180.0 * scale).round() as i32;
+    let margin_x = (24.0 * scale).round() as i32;
+    let margin_y = (56.0 * scale).round() as i32;
+
+    Some(tauri::PhysicalPosition::new(
+        m_pos.x + (m_size.width as i32) - win_w - margin_x,
+        m_pos.y + (m_size.height as i32) - win_h - margin_y,
+    ))
+}
+
 /// Open (or toggle) the mini player window. Creates it on first call; on
 /// subsequent calls, hides it if visible, shows + focuses it if hidden.
 /// Opening the mini player minimizes the main window; hiding the mini player
@@ -2619,8 +2717,18 @@ fn open_mini_player(app: tauri::AppHandle) -> Result<(), String> {
                let _ = main.set_focus();
            }
        } else {
+            // Re-applying the saved position after show() — many Linux WMs
+            // (Mutter, KWin) re-centre hidden windows when they're shown
+            // again, ignoring any earlier set_position. Mark the move as
+            // programmatic so the Moved-event handler doesn't echo the
+            // intermediate centre coords back to disk.
+            let target = read_mini_pos(&app);
+            mark_mini_pos_programmatic();
            win.show().map_err(|e| e.to_string())?;
            let _ = win.set_focus();
+            if let Some(p) = target {
+                let _ = win.set_position(tauri::PhysicalPosition::new(p.x, p.y));
+            }
            if let Some(main) = app.get_webview_window("main") {
                let _ = main.minimize();
            }
@@ -2635,20 +2743,48 @@ fn open_mini_player(app: tauri::AppHandle) -> Result<(), String> {
        { true }
    };

-    let win = tauri::WebviewWindowBuilder::new(
+    // Resolve target position BEFORE building so the WM places the window
+    // correctly from creation. Calling `set_position` after `build()` is
+    // unreliable on several Linux WMs which re-centre hidden windows.
+    let target_physical = read_mini_pos(&app)
+        .map(|p| tauri::PhysicalPosition::new(p.x, p.y))
+        .or_else(|| default_mini_position(&app));
+    let scale = app
+        .primary_monitor()
+        .ok()
+        .flatten()
+        .map(|m| m.scale_factor())
+        .unwrap_or(1.0);
+
+    // macOS keeps the native titlebar (traffic lights + system look).
+    // Windows and Linux use a custom in-page titlebar so the mini fits a
+    // tighter visual style across all WMs (incl. tiling).
+    let use_decorations = cfg!(target_os = "macos");
+
+    let mut builder = tauri::WebviewWindowBuilder::new(
        &app,
        "mini",
        tauri::WebviewUrl::App("index.html".into()),
    )
    .title("Psysonic Mini")
-    .inner_size(340.0, 140.0)
-    .min_inner_size(320.0, 120.0)
+    .inner_size(340.0, 180.0)
+    .min_inner_size(320.0, 180.0)
    .resizable(true)
-    .decorations(true)
+    .decorations(use_decorations)
    .always_on_top(use_always_on_top)
-    .skip_taskbar(false)
-    .build()
-    .map_err(|e| format!("failed to build mini player window: {e}"))?;
+    .skip_taskbar(false);
+
+    if let Some(pos) = target_physical {
+        builder = builder.position(pos.x as f64 / scale, pos.y as f64 / scale);
+    }
+
+    // Suppress Moved-event echo for the initial show — Linux WMs sometimes
+    // fire stray Moved events with default coords during the first paint.
+    mark_mini_pos_programmatic();
+
+    let win = builder
+        .build()
+        .map_err(|e| format!("failed to build mini player window: {e}"))?;

    let _ = win.set_focus();
    if let Some(main) = app.get_webview_window("main") {
@@ -2674,9 +2810,13 @@ fn close_mini_player(app: tauri::AppHandle) -> Result<(), String> {

 /// Unminimize + show + focus the main window. Called from the mini player's
 /// "expand" button. Can't rely on a JS event bridge here because the main
-/// window's JS is paused while minimized on WebKitGTK.
+/// window's JS is paused while minimized on WebKitGTK. Also hides the mini
+/// window so the two don't sit on screen at the same time.
 #[tauri::command]
 fn show_main_window(app: tauri::AppHandle) -> Result<(), String> {
+    if let Some(mini) = app.get_webview_window("mini") {
+        let _ = mini.hide();
+    }
    if let Some(main) = app.get_webview_window("main") {
        main.unminimize().map_err(|e| e.to_string())?;
        main.show().map_err(|e| e.to_string())?;
@@ -2686,14 +2826,48 @@ fn show_main_window(app: tauri::AppHandle) -> Result<(), String> {
 }

 /// Toggle always-on-top on the mini player window.
+///
+/// Some window managers (KWin, certain Mutter releases, GNOME-on-Wayland)
+/// silently ignore `set_always_on_top(true)` when the internal flag is
+/// already `true` — which happens whenever the window was hidden and
+/// re-shown, or focus was lost and the WM dropped the constraint. We
+/// always force a `false → true` cycle so the WM re-evaluates the layer.
 #[tauri::command]
 fn set_mini_player_always_on_top(app: tauri::AppHandle, on_top: bool) -> Result<(), String> {
    if let Some(win) = app.get_webview_window("mini") {
+        if on_top {
+            let _ = win.set_always_on_top(false);
+        }
        win.set_always_on_top(on_top).map_err(|e| e.to_string())?;
    }
    Ok(())
 }

+/// Resize the mini player window (logical pixels). Used when toggling the
+/// queue panel to expand/collapse without a capability dance. Optional
+/// `minWidth` / `minHeight` adjust the window's resize floor so the user
+/// can't shrink past the layout's minimum (e.g. 2 visible queue rows when
+/// the queue panel is open).
+#[tauri::command]
+fn resize_mini_player(
+    app: tauri::AppHandle,
+    width: f64,
+    height: f64,
+    min_width: Option<f64>,
+    min_height: Option<f64>,
+) -> Result<(), String> {
+    if let Some(win) = app.get_webview_window("mini") {
+        // Lower the floor first; otherwise set_size to a value below the
+        // existing min would silently clamp.
+        if let (Some(mw), Some(mh)) = (min_width, min_height) {
+            win.set_min_size(Some(tauri::LogicalSize::new(mw, mh)))
+                .map_err(|e| e.to_string())?;
+        }
+        win.set_size(tauri::LogicalSize::new(width, height)).map_err(|e| e.to_string())?;
+    }
+    Ok(())
+}
+
 pub fn run() {
    // Linux: second `psysonic --player …` forwards over D-Bus before heavy startup.
    #[cfg(target_os = "linux")]
@@ -2721,7 +2895,11 @@ pub fn run() {
        .manage(TrayState::default())
        .plugin(tauri_plugin_process::init())
        .plugin(tauri_plugin_updater::Builder::new().build())
-        .plugin(tauri_plugin_window_state::Builder::default().build())
+        .plugin(
+            tauri_plugin_window_state::Builder::default()
+                .with_denylist(&["mini"])
+                .build()
+        )
        .plugin(tauri_plugin_shell::init())
        .plugin(tauri_plugin_global_shortcut::Builder::new().build())
        .plugin(tauri_plugin_store::Builder::default().build())
@@ -2873,6 +3051,13 @@ pub fn run() {
            Ok(())
        })
        .on_window_event(|window, event| {
+            // Persist mini player position whenever the user drags it.
+            if window.label() == "mini" {
+                if let tauri::WindowEvent::Moved(pos) = event {
+                    persist_mini_pos_throttled(window.app_handle(), pos.x, pos.y);
+                }
+            }
+
            if let tauri::WindowEvent::CloseRequested { api, .. } = event {
                if window.label() == "main" {
                    api.prevent_close();
@@ -2919,6 +3104,7 @@ pub fn run() {
            open_mini_player,
            close_mini_player,
            set_mini_player_always_on_top,
+            resize_mini_player,
            show_main_window,
            register_global_shortcut,
            unregister_global_shortcut,
@@ -1,7 +1,7 @@
 {
  "$schema": "https://schema.tauri.app/config/2",
  "productName": "Psysonic",
-  "version": "1.41.0",
+  "version": "1.42.0",
  "identifier": "dev.psysonic.player",
  "build": {
    "beforeDevCommand": "npm run dev",
@@ -38,6 +38,7 @@ import InternetRadio from './pages/InternetRadio';
 import FolderBrowser from './pages/FolderBrowser';
 import DeviceSync from './pages/DeviceSync';
 import NowPlayingPage from './pages/NowPlaying';
+import WhatsNew from './pages/WhatsNew';
 import MiniPlayer from './components/MiniPlayer';
 import { initMiniPlayerBridgeOnMain } from './utils/miniPlayerBridge';
 import FullscreenPlayer from './components/FullscreenPlayer';
@@ -53,7 +54,6 @@ import OfflineLibrary from './pages/OfflineLibrary';
 import Genres from './pages/Genres';
 import GenreDetail from './pages/GenreDetail';
 import ExportPickerModal from './components/ExportPickerModal';
-import ChangelogModal from './components/ChangelogModal';
 import AppUpdater from './components/AppUpdater';
 import TitleBar from './components/TitleBar';
 import { IS_LINUX } from './utils/platform';
@@ -146,6 +146,17 @@ function AppShell() {
  const offlineAlbums = useOfflineStore(s => s.albums);
  const hasOfflineContent = Object.values(offlineAlbums).some(a => a.serverId === serverId);

+  // Mini player → main: route requests dispatched as `psy:navigate`
+  // CustomEvents from the bridge land here so React Router can take over.
+  useEffect(() => {
+    const onPsyNavigate = (e: Event) => {
+      const detail = (e as CustomEvent).detail;
+      if (detail?.to) navigate(detail.to);
+    };
+    window.addEventListener('psy:navigate', onPsyNavigate);
+    return () => window.removeEventListener('psy:navigate', onPsyNavigate);
+  }, [navigate]);
+
  // Sync custom titlebar preference with native decorations on Linux
  // On tiling WMs decorations are always off (no native title bar to replace).
  useEffect(() => {
@@ -229,14 +240,9 @@ function AppShell() {
    fn();
  }, [currentTrack, isPlaying]);

-  const [changelogModalOpen, setChangelogModalOpen] = useState(false);
-
-  useEffect(() => {
-    const { showChangelogOnUpdate, lastSeenChangelogVersion } = useAuthStore.getState();
-    if (showChangelogOnUpdate && lastSeenChangelogVersion !== version) {
-      setChangelogModalOpen(true);
-    }
-  }, []);
+  // Post-update changelog is now surfaced via a dismissible banner in the
+  // sidebar (WhatsNewBanner) that links to the /whats-new page — no auto
+  // modal takeover on startup.

  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(() => {
    return localStorage.getItem('psysonic_sidebar_collapsed') === 'true';
@@ -402,6 +408,7 @@ function AppShell() {
            <Route path="/most-played" element={<MostPlayed />} />
            <Route path="/now-playing" element={isMobile ? <MobilePlayerView /> : <NowPlayingPage />} />
            <Route path="/settings" element={<Settings />} />
+            <Route path="/whats-new" element={<WhatsNew />} />
            <Route path="/help" element={<Help />} />
            <Route path="/offline" element={<OfflineLibrary />} />
            <Route path="/genres" element={<Genres />} />
@@ -436,7 +443,6 @@ function AppShell() {
      <DownloadFolderModal />
      <TooltipPortal />
      <AppUpdater />
-      {changelogModalOpen && <ChangelogModal onClose={() => setChangelogModalOpen(false)} />}
    </div>
  );
 }
@@ -806,6 +812,9 @@ function TauriEventBridge() {
          win.isFullscreen().then(fs => win.setFullscreen(!fs));
          break;
        }
+        case 'open-mini-player':
+          invoke('open_mini_player').catch(() => {});
+          break;
      }
    };
    window.addEventListener('keydown', onKey);
@@ -966,8 +975,33 @@ export default function App() {
    return initMiniPlayerBridgeOnMain();
  }, [isMiniWindow]);

+  // Mini window only: re-hydrate persisted appearance stores when the main
+  // window writes new values. Both webviews share localStorage (same origin),
+  // so the `storage` event fires here whenever main mutates a key — but
+  // Zustand persist only reads localStorage on initial load, hence the
+  // explicit rehydrate.
+  useEffect(() => {
+    if (!isMiniWindow) return;
+    const onStorage = (e: StorageEvent) => {
+      if (!e.key) return;
+      if (e.key === 'psysonic_theme') useThemeStore.persist.rehydrate();
+      else if (e.key === 'psysonic_font') useFontStore.persist.rehydrate();
+      else if (e.key === 'psysonic_keybindings') useKeybindingsStore.persist.rehydrate();
+      else if (e.key === 'psysonic_language' && e.newValue) {
+        import('./i18n').then(m => m.default.changeLanguage(e.newValue!));
+      }
+    };
+    window.addEventListener('storage', onStorage);
+    return () => window.removeEventListener('storage', onStorage);
+  }, [isMiniWindow]);
+
  if (isMiniWindow) {
-    return <MiniPlayer />;
+    return (
+      <DragDropProvider>
+        <MiniPlayer />
+        <TooltipPortal />
+      </DragDropProvider>
+    );
  }

  // UI scaling is scoped to .main-content via an inner wrapper (see <main>
@@ -0,0 +1,122 @@
+import { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { emit } from '@tauri-apps/api/event';
+import { useTranslation } from 'react-i18next';
+import { Play, Trash2, Disc3, User, Heart, Info } from 'lucide-react';
+import { star, unstar } from '../api/subsonic';
+import type { MiniTrackInfo } from '../utils/miniPlayerBridge';
+
+interface Props {
+  x: number;
+  y: number;
+  track: MiniTrackInfo;
+  index: number;
+  onClose: () => void;
+}
+
+/**
+ * Slim queue-item context menu for the mini player. The mini lives in its
+ * own webview, so all queue mutations forward to the main window via Tauri
+ * events; only the favorite call hits Subsonic directly because it has no
+ * cross-window state to keep in sync (next mini:sync from main reflects the
+ * new starred flag).
+ */
+export default function MiniContextMenu({ x, y, track, index, onClose }: Props) {
+  const { t } = useTranslation();
+  const ref = useRef<HTMLDivElement>(null);
+  const [starred, setStarred] = useState(!!track.starred);
+  const [pos, setPos] = useState({ left: x, top: y });
+
+  // Clamp the menu inside the mini window's viewport (it pops near the
+  // cursor and would otherwise overflow at the right/bottom edges of the
+  // small window).
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const r = el.getBoundingClientRect();
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const left = Math.min(x, Math.max(4, vw - r.width - 4));
+    const top = Math.min(y, Math.max(4, vh - r.height - 4));
+    setPos({ left, top });
+  }, [x, y]);
+
+  // Dismiss on outside click + Escape.
+  useEffect(() => {
+    const onDown = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) onClose();
+    };
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
+    document.addEventListener('mousedown', onDown);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('mousedown', onDown);
+      document.removeEventListener('keydown', onKey);
+    };
+  }, [onClose]);
+
+  const run = (fn: () => void | Promise<void>) => {
+    Promise.resolve(fn()).finally(onClose);
+  };
+
+  const toggleStar = async () => {
+    const next = !starred;
+    setStarred(next);
+    try {
+      if (next) await star(track.id, 'song');
+      else await unstar(track.id, 'song');
+    } catch {
+      setStarred(!next);
+    }
+  };
+
+  return createPortal(
+    <div
+      ref={ref}
+      className="context-menu mini-context-menu"
+      style={{ position: 'fixed', left: pos.left, top: pos.top, zIndex: 99998 }}
+      onClick={(e) => e.stopPropagation()}
+      onContextMenu={(e) => e.preventDefault()}
+    >
+      <div className="context-menu-item" onClick={() => run(() => emit('mini:jump', { index }))}>
+        <Play size={14} /> {t('contextMenu.playNow')}
+      </div>
+      <div
+        className="context-menu-item"
+        style={{ color: 'var(--danger)' }}
+        onClick={() => run(() => emit('mini:remove', { index }))}
+      >
+        <Trash2 size={14} /> {t('contextMenu.removeFromQueue')}
+      </div>
+      <div className="context-menu-divider" />
+      {track.albumId && (
+        <div
+          className="context-menu-item"
+          onClick={() => run(() => emit('mini:navigate', { to: `/album/${track.albumId}` }))}
+        >
+          <Disc3 size={14} /> {t('contextMenu.openAlbum')}
+        </div>
+      )}
+      {track.artistId && (
+        <div
+          className="context-menu-item"
+          onClick={() => run(() => emit('mini:navigate', { to: `/artist/${track.artistId}` }))}
+        >
+          <User size={14} /> {t('contextMenu.goToArtist')}
+        </div>
+      )}
+      <div className="context-menu-item" onClick={() => run(toggleStar)}>
+        <Heart size={14} fill={starred ? 'currentColor' : 'none'} />
+        {starred ? t('contextMenu.unfavorite') : t('contextMenu.favorite')}
+      </div>
+      <div className="context-menu-divider" />
+      <div
+        className="context-menu-item"
+        onClick={() => run(() => emit('mini:song-info', { id: track.id }))}
+      >
+        <Info size={14} /> {t('contextMenu.songInfo')}
+      </div>
+    </div>,
+    document.body,
+  );
+}
@@ -1,11 +1,80 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { emit, listen } from '@tauri-apps/api/event';
 import { invoke } from '@tauri-apps/api/core';
-import { getCurrentWindow } from '@tauri-apps/api/window';
-import { Play, Pause, SkipBack, SkipForward, Pin, PinOff, Maximize2, X } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Play, Pause, SkipBack, SkipForward, Pin, PinOff, Maximize2, X, ListMusic } from 'lucide-react';
 import CachedImage from './CachedImage';
 import { buildCoverArtUrl, coverArtCacheKey } from '../api/subsonic';
-import type { MiniSyncPayload, MiniControlAction } from '../utils/miniPlayerBridge';
+import { usePlayerStore } from '../store/playerStore';
+import { useKeybindingsStore, matchInAppBinding } from '../store/keybindingsStore';
+import { useDragDrop } from '../contexts/DragDropContext';
+import { IS_MACOS } from '../utils/platform';
+import MiniContextMenu from './MiniContextMenu';
+import type { MiniSyncPayload, MiniControlAction, MiniTrackInfo } from '../utils/miniPlayerBridge';
+
+const COLLAPSED_SIZE = { w: 340, h: 180 };
+const EXPANDED_SIZE  = { w: 340, h: 440 };
+// Minimum window dimensions per state. When the queue is open the floor must
+// keep at least two queue rows visible; a stricter min would let the user
+// collapse the queue area to nothing while it's still toggled on.
+const COLLAPSED_MIN  = { w: 320, h: 180 };
+const EXPANDED_MIN   = { w: 320, h: 260 };
+
+// Persist the expanded-window height so reopening the queue restores the
+// user's preferred size instead of snapping back to EXPANDED_SIZE.h.
+const EXPANDED_H_KEY = 'psysonic_mini_expanded_h';
+function readStoredExpandedHeight(): number {
+  try {
+    const raw = localStorage.getItem(EXPANDED_H_KEY);
+    if (raw) {
+      const n = parseInt(raw, 10);
+      if (Number.isFinite(n) && n >= EXPANDED_MIN.h) return n;
+    }
+  } catch {}
+  return EXPANDED_SIZE.h;
+}
+
+// Persist whether the queue panel was open so the next launch restores
+// the same state. Same scope as the height: localStorage of the mini
+// webview (shared across mini sessions, separate from the main store).
+const QUEUE_OPEN_KEY = 'psysonic_mini_queue_open';
+function readQueueOpen(): boolean {
+  try { return localStorage.getItem(QUEUE_OPEN_KEY) === '1'; } catch { return false; }
+}
+
+function toMini(t: any): MiniTrackInfo {
+  return {
+    id: t.id,
+    title: t.title,
+    artist: t.artist,
+    album: t.album,
+    albumId: t.albumId,
+    artistId: t.artistId,
+    coverArt: t.coverArt,
+    duration: t.duration,
+    starred: !!t.starred,
+  };
+}
+
+/**
+ * Hydrate from the persisted playerStore so initial paint shows real content
+ * instead of "—" while we wait for the mini:sync event from the main window.
+ * The persisted state covers the cold-start window (webview boot + bundle).
+ */
+function initialSnapshot(): MiniSyncPayload {
+  try {
+    const s = usePlayerStore.getState();
+    return {
+      track: s.currentTrack ? toMini(s.currentTrack) : null,
+      queue: (s.queue ?? []).map(toMini),
+      queueIndex: s.queueIndex ?? 0,
+      isPlaying: s.isPlaying,
+      isMobile: false,
+    };
+  } catch {
+    return { track: null, queue: [], queueIndex: 0, isPlaying: false, isMobile: false };
+  }
+}

 interface ProgressPayload {
  current_time: number;
@@ -20,23 +89,114 @@ function fmt(seconds: number): string {
 }

 export default function MiniPlayer() {
-  const [state, setState] = useState<MiniSyncPayload>({ track: null, isPlaying: false, isMobile: false });
+  const { t } = useTranslation();
+  const [state, setState] = useState<MiniSyncPayload>(() => initialSnapshot());
  const [currentTime, setCurrentTime] = useState(0);
-  const [duration, setDuration] = useState(0);
+  const [duration, setDuration] = useState(() => {
+    const initial = initialSnapshot();
+    return initial.track?.duration ?? 0;
+  });
  const [alwaysOnTop, setAlwaysOnTop] = useState(true);
+  const [queueOpen, setQueueOpen] = useState(readQueueOpen);
+  const [scrollMeta, setScrollMeta] = useState({ thumbH: 0, thumbT: 0, visible: false });
  const ticker = useRef<number | null>(null);
+  const queueScrollRef = useRef<HTMLDivElement>(null);
+
+  // ── PsyDnD reorder ──
+  // Mirrors QueuePanel's pattern: mousedown threshold → startDrag, mousemove
+  // on the queue computes a drop indicator, psy-drop emits mini:reorder back
+  // to main where the source-of-truth store lives.
+  const { isDragging: isPsyDragging, startDrag, payload: psyPayload } = useDragDrop();
+  const psyDragFromIdxRef = useRef<number | null>(null);
+  const [dropTarget, setDropTarget] = useState<{ idx: number; before: boolean } | null>(null);
+  const dropTargetRef = useRef<{ idx: number; before: boolean } | null>(null);
+
+  const isReorderDrag = isPsyDragging && !!psyPayload && (() => {
+    try { return JSON.parse(psyPayload.data).type === 'queue_reorder'; } catch { return false; }
+  })();
+
+  useEffect(() => {
+    if (!isPsyDragging) {
+      dropTargetRef.current = null;
+      setDropTarget(null);
+    }
+  }, [isPsyDragging]);
+
+  // ── Context menu state ──
+  const [ctxMenu, setCtxMenu] = useState<{ x: number; y: number; track: MiniTrackInfo; index: number } | null>(null);
+
+  // Compute overlay-scrollbar thumb height + offset from the queue's scroll
+  // metrics. Native scrollbar is hidden via CSS; this thumb floats over the
+  // items so the queue keeps its full width.
+  const recomputeScroll = useCallback(() => {
+    const el = queueScrollRef.current;
+    if (!el) return;
+    const { scrollTop, scrollHeight, clientHeight } = el;
+    if (scrollHeight <= clientHeight + 1) {
+      setScrollMeta(prev => (prev.visible ? { thumbH: 0, thumbT: 0, visible: false } : prev));
+      return;
+    }
+    const ratio = clientHeight / scrollHeight;
+    const thumbH = Math.max(24, Math.round(ratio * clientHeight));
+    const range = clientHeight - thumbH;
+    const scrollRange = scrollHeight - clientHeight;
+    const thumbT = scrollRange > 0 ? Math.round((scrollTop / scrollRange) * range) : 0;
+    setScrollMeta({ thumbH, thumbT, visible: true });
+  }, []);

  // Announce to main window that we're mounted; it replies with a snapshot.
  useEffect(() => {
    emit('mini:ready', {}).catch(() => {});
  }, []);

+  // Restore the expanded window size on initial mount when the queue was
+  // open at the previous app close. Rust always builds the window at the
+  // collapsed size; without this we'd render queueOpen=true into a 180 px
+  // window. Brief jump from collapsed to expanded is unavoidable since
+  // localStorage only lives in JS.
+  useEffect(() => {
+    if (!queueOpen) return;
+    invoke('resize_mini_player', {
+      width: EXPANDED_SIZE.w,
+      height: readStoredExpandedHeight(),
+      minWidth: EXPANDED_MIN.w,
+      minHeight: EXPANDED_MIN.h,
+    }).catch(() => {});
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Re-apply pin state on mount and whenever the window regains focus.
+  // After a Hide → Show cycle (which is what `open_mini_player` does on
+  // re-toggle) the WM often drops the always-on-top constraint silently;
+  // re-asserting it here means the user no longer has to click the pin
+  // button twice to make it stick.
+  useEffect(() => {
+    invoke('set_mini_player_always_on_top', { onTop: alwaysOnTop }).catch(() => {});
+    const reapply = () => {
+      if (alwaysOnTop) {
+        invoke('set_mini_player_always_on_top', { onTop: true }).catch(() => {});
+      }
+    };
+    window.addEventListener('focus', reapply);
+    return () => window.removeEventListener('focus', reapply);
+  }, [alwaysOnTop]);
+
  // Keyboard: Space → toggle, ← / → → prev / next. Ignore when typing.
+  // Also honour the user-configured 'open-mini-player' shortcut so the
+  // same chord that opens the mini from main also closes it from here.
  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      const tgt = e.target as HTMLElement | null;
      const tag = tgt?.tagName;
      if (tag === 'INPUT' || tag === 'TEXTAREA' || tgt?.isContentEditable) return;
+
+      const openMiniBinding = useKeybindingsStore.getState().bindings['open-mini-player'];
+      if (matchInAppBinding(e, openMiniBinding)) {
+        e.preventDefault();
+        invoke('open_mini_player').catch(() => {});
+        return;
+      }
+
      if (e.key === ' ' || e.code === 'Space') {
        e.preventDefault();
        emit('mini:control', 'toggle').catch(() => {});
@@ -83,68 +243,284 @@ export default function MiniPlayer() {

  const showMain = () => invoke('show_main_window').catch(() => {});

+  const toggleQueue = async () => {
+    const next = !queueOpen;
+    // Capture the current expanded height before collapsing so the next
+    // open restores it. Read window.innerHeight directly — it matches the
+    // logical inner size that resize_mini_player set previously.
+    if (!next) {
+      const h = Math.round(window.innerHeight);
+      if (h >= EXPANDED_MIN.h) {
+        try { localStorage.setItem(EXPANDED_H_KEY, String(h)); } catch {}
+      }
+    }
+    setQueueOpen(next);
+    try { localStorage.setItem(QUEUE_OPEN_KEY, next ? '1' : '0'); } catch {}
+    const targetH = next ? readStoredExpandedHeight() : COLLAPSED_SIZE.h;
+    const targetW = next ? EXPANDED_SIZE.w : COLLAPSED_SIZE.w;
+    const min = next ? EXPANDED_MIN : COLLAPSED_MIN;
+    try {
+      await invoke('resize_mini_player', {
+        width: targetW,
+        height: targetH,
+        minWidth: min.w,
+        minHeight: min.h,
+      });
+    } catch {}
+  };
+
+  const jumpTo = (index: number) => emit('mini:jump', { index }).catch(() => {});
+
+  // Listen for psy-drop on the queue. Only handles `queue_reorder` payloads
+  // since the mini player has no external drag sources. `queueOpen` must be
+  // in deps because the wrap (and thus queueScrollRef.current) only mounts
+  // when the queue is expanded — without it the ref is null on first run
+  // and the listener never attaches.
+  useEffect(() => {
+    if (!queueOpen) return;
+    const el = queueScrollRef.current;
+    if (!el) return;
+    const onPsyDrop = (e: Event) => {
+      const detail = (e as CustomEvent).detail;
+      if (!detail?.data) return;
+      let parsed: any = null;
+      try { parsed = JSON.parse(detail.data); } catch { return; }
+      const tgt = dropTargetRef.current;
+      dropTargetRef.current = null;
+      setDropTarget(null);
+      if (parsed.type !== 'queue_reorder') return;
+      const fromIdx = parsed.index as number;
+      psyDragFromIdxRef.current = null;
+      const queueLen = usePlayerStore.getState().queue.length || state.queue.length;
+      const insertIdx = tgt
+        ? (tgt.before ? tgt.idx : tgt.idx + 1)
+        : queueLen;
+      if (fromIdx === insertIdx || fromIdx === insertIdx - 1) return;
+      // Adjust target index if removing the source first shifts later items.
+      const adjusted = fromIdx < insertIdx ? insertIdx - 1 : insertIdx;
+      if (fromIdx === adjusted) return;
+      emit('mini:reorder', { from: fromIdx, to: adjusted }).catch(() => {});
+    };
+    el.addEventListener('psy-drop', onPsyDrop);
+    return () => el.removeEventListener('psy-drop', onPsyDrop);
+  }, [queueOpen, state.queue.length]);
+
+  // Auto-scroll the current track into view when the queue expands.
+  useEffect(() => {
+    if (!queueOpen) return;
+    const el = queueScrollRef.current?.querySelector<HTMLElement>('.mini-queue__item--current');
+    el?.scrollIntoView({ block: 'nearest' });
+  }, [queueOpen, state.queueIndex]);
+
+  // Recompute overlay-thumb on open, queue mutations, and window resize.
+  useEffect(() => {
+    if (!queueOpen) return;
+    recomputeScroll();
+    const onResize = () => recomputeScroll();
+    window.addEventListener('resize', onResize);
+    return () => window.removeEventListener('resize', onResize);
+  }, [queueOpen, state.queue.length, recomputeScroll]);
+
  const { track, isPlaying } = state;
  const progress = duration > 0 ? Math.min(100, (currentTime / duration) * 100) : 0;

  return (
-    <div className="mini-player">
-      <div className="mini-player__art">
-        {track?.coverArt ? (
-          <CachedImage
-            src={buildCoverArtUrl(track.coverArt, 300)}
-            cacheKey={coverArtCacheKey(track.coverArt, 300)}
-            alt={track.album}
-          />
-        ) : (
-          <div className="mini-player__art-fallback" />
-        )}
-      </div>
+    <div className="mini-player-shell">
+      {!IS_MACOS && (
+        <div className="mini-player__titlebar" data-tauri-drag-region>
+          <span className="mini-player__titlebar-title" data-tauri-drag-region>
+            {track?.title ?? 'Psysonic Mini'}
+          </span>
+          <button
+            type="button"
+            className={`mini-player__titlebar-btn${queueOpen ? ' mini-player__titlebar-btn--active' : ''}`}
+            onClick={toggleQueue}
+            data-tauri-drag-region="false"
+            data-tooltip={queueOpen ? t('miniPlayer.hideQueue') : t('miniPlayer.showQueue')}
+            aria-label={queueOpen ? t('miniPlayer.hideQueue') : t('miniPlayer.showQueue')}
+          >
+            <ListMusic size={13} />
+          </button>
+          <button
+            type="button"
+            className={`mini-player__titlebar-btn${alwaysOnTop ? ' mini-player__titlebar-btn--active' : ''}`}
+            onClick={toggleOnTop}
+            data-tauri-drag-region="false"
+            data-tooltip={alwaysOnTop ? t('miniPlayer.pinOff') : t('miniPlayer.pinOnTop')}
+            aria-label={alwaysOnTop ? t('miniPlayer.pinOff') : t('miniPlayer.pinOnTop')}
+          >
+            {alwaysOnTop ? <Pin size={13} /> : <PinOff size={13} />}
+          </button>
+          <button
+            type="button"
+            className="mini-player__titlebar-btn"
+            onClick={showMain}
+            data-tauri-drag-region="false"
+            data-tooltip={t('miniPlayer.openMainWindow')}
+            aria-label={t('miniPlayer.openMainWindow')}
+          >
+            <Maximize2 size={13} />
+          </button>
+          <button
+            type="button"
+            className="mini-player__titlebar-btn mini-player__titlebar-btn--close"
+            onClick={closeMini}
+            data-tauri-drag-region="false"
+            data-tooltip={t('miniPlayer.close')}
+            aria-label={t('miniPlayer.close')}
+          >
+            <X size={13} />
+          </button>
+        </div>
+      )}

-      <div className="mini-player__body">
-        <div className="mini-player__titles">
-          <div className="mini-player__title" title={track?.title}>
-            {track?.title ?? '—'}
+      <div className={`mini-player${queueOpen ? ' mini-player--queue-open' : ''}`}>
+        <div className="mini-player__art">
+          {track?.coverArt ? (
+            <CachedImage
+              src={buildCoverArtUrl(track.coverArt, 300)}
+              cacheKey={coverArtCacheKey(track.coverArt, 300)}
+              alt={track.album}
+            />
+          ) : (
+            <div className="mini-player__art-fallback" />
+          )}
+        </div>
+
+        <div className="mini-player__body" data-tauri-drag-region="false">
+          <div className="mini-player__titles">
+            <div className="mini-player__title" title={track?.title}>
+              {track?.title ?? '—'}
+            </div>
+            <div className="mini-player__artist" title={track?.artist}>
+              {track?.artist ?? ''}
+            </div>
          </div>
-          <div className="mini-player__artist" title={track?.artist}>
-            {track?.artist ?? ''}
+
+          <div className="mini-player__controls">
+            <button className="mini-player__btn" onClick={() => control('prev')} data-tauri-drag-region="false">
+              <SkipBack size={16} />
+            </button>
+            <button className="mini-player__btn mini-player__btn--primary" onClick={() => control('toggle')} data-tauri-drag-region="false">
+              {isPlaying ? <Pause size={18} /> : <Play size={18} />}
+            </button>
+            <button className="mini-player__btn" onClick={() => control('next')} data-tauri-drag-region="false">
+              <SkipForward size={16} />
+            </button>
          </div>
        </div>

-        <div className="mini-player__controls">
-          <button className="mini-player__btn" onClick={() => control('prev')} data-tauri-drag-region="false">
-            <SkipBack size={16} />
-          </button>
-          <button className="mini-player__btn mini-player__btn--primary" onClick={() => control('toggle')}>
-            {isPlaying ? <Pause size={18} /> : <Play size={18} />}
-          </button>
-          <button className="mini-player__btn" onClick={() => control('next')}>
-            <SkipForward size={16} />
-          </button>
-        </div>
-
-        <div className="mini-player__progress">
+        <div className="mini-player__progress" data-tauri-drag-region="false">
          <div className="mini-player__progress-time">{fmt(currentTime)}</div>
          <div className="mini-player__progress-track">
            <div className="mini-player__progress-fill" style={{ width: `${progress}%` }} />
          </div>
          <div className="mini-player__progress-time">{fmt(duration)}</div>
        </div>
-      </div>

-      <div className="mini-player__toolbar">
-        <button
-          className={`mini-player__tool${alwaysOnTop ? ' mini-player__tool--active' : ''}`}
-          onClick={toggleOnTop}
-          data-tooltip={alwaysOnTop ? 'Pin off' : 'Pin on top'}
+        {queueOpen && (
+        <div
+          className={`mini-queue-wrap${isReorderDrag ? ' mini-queue-wrap--drop-active' : ''}`}
+          onMouseMove={(e) => {
+            if (!isReorderDrag || !queueScrollRef.current) return;
+            const items = queueScrollRef.current.querySelectorAll<HTMLElement>('[data-mq-idx]');
+            for (let i = 0; i < items.length; i++) {
+              const r = items[i].getBoundingClientRect();
+              if (e.clientY >= r.top && e.clientY <= r.bottom) {
+                const before = e.clientY < r.top + r.height / 2;
+                const idx = parseInt(items[i].dataset.mqIdx!, 10);
+                const t = { idx, before };
+                dropTargetRef.current = t;
+                setDropTarget(t);
+                return;
+              }
+            }
+            dropTargetRef.current = null;
+            setDropTarget(null);
+          }}
        >
-          {alwaysOnTop ? <Pin size={13} /> : <PinOff size={13} />}
-        </button>
-        <button className="mini-player__tool" onClick={showMain} data-tooltip="Open main window">
-          <Maximize2 size={13} />
-        </button>
-        <button className="mini-player__tool" onClick={closeMini} data-tooltip="Close">
-          <X size={13} />
-        </button>
+          <div className="mini-queue" ref={queueScrollRef} onScroll={recomputeScroll}>
+            {state.queue.length === 0 ? (
+              <div className="mini-queue__empty">{t('miniPlayer.emptyQueue')}</div>
+            ) : (
+              state.queue.map((t, i) => {
+                let dragStyle: React.CSSProperties = {};
+                if (isReorderDrag && psyDragFromIdxRef.current === i) {
+                  dragStyle = { opacity: 0.4 };
+                } else if (isReorderDrag && dropTarget?.idx === i) {
+                  dragStyle = dropTarget.before
+                    ? { boxShadow: 'inset 0 2px 0 var(--accent)' }
+                    : { boxShadow: 'inset 0 -2px 0 var(--accent)' };
+                }
+                return (
+                  <button
+                    key={`${t.id}-${i}`}
+                    data-mq-idx={i}
+                    className={`mini-queue__item${i === state.queueIndex ? ' mini-queue__item--current' : ''}${ctxMenu?.index === i ? ' mini-queue__item--ctx' : ''}`}
+                    onClick={() => jumpTo(i)}
+                    onContextMenu={(e) => {
+                      e.preventDefault();
+                      setCtxMenu({ x: e.clientX, y: e.clientY, track: t, index: i });
+                    }}
+                    onMouseDown={(e) => {
+                      if (e.button !== 0) return;
+                      // Don't start drag while a click would also be valid —
+                      // the threshold check below upgrades to a drag once
+                      // the pointer leaves the deadband.
+                      const startX = e.clientX;
+                      const startY = e.clientY;
+                      const onMove = (me: MouseEvent) => {
+                        if (Math.abs(me.clientX - startX) > 5 || Math.abs(me.clientY - startY) > 5) {
+                          document.removeEventListener('mousemove', onMove);
+                          document.removeEventListener('mouseup', onUp);
+                          psyDragFromIdxRef.current = i;
+                          startDrag(
+                            { data: JSON.stringify({ type: 'queue_reorder', index: i }), label: t.title },
+                            me.clientX,
+                            me.clientY,
+                          );
+                        }
+                      };
+                      const onUp = () => {
+                        document.removeEventListener('mousemove', onMove);
+                        document.removeEventListener('mouseup', onUp);
+                      };
+                      document.addEventListener('mousemove', onMove);
+                      document.addEventListener('mouseup', onUp);
+                    }}
+                    style={dragStyle}
+                  >
+                    <span className="mini-queue__num">{i + 1}</span>
+                    <div className="mini-queue__meta">
+                      <div className="mini-queue__title">{t.title}</div>
+                      <div className="mini-queue__artist">{t.artist}</div>
+                    </div>
+                  </button>
+                );
+              })
+            )}
+          </div>
+          {scrollMeta.visible && (
+            <div
+              className="mini-queue__thumb"
+              style={{
+                height: `${scrollMeta.thumbH}px`,
+                transform: `translateY(${scrollMeta.thumbT}px)`,
+              }}
+            />
+          )}
+        </div>
+      )}
+
+        {ctxMenu && (
+          <MiniContextMenu
+            x={ctxMenu.x}
+            y={ctxMenu.y}
+            track={ctxMenu.track}
+            index={ctxMenu.index}
+            onClose={() => setCtxMenu(null)}
+          />
+        )}
      </div>
    </div>
  );
@@ -3,12 +3,13 @@ import { createPortal } from 'react-dom';
 import {
  Play, Pause, SkipBack, SkipForward, Volume2, VolumeX, Music,
  Square, Repeat, Repeat1, Maximize2, SlidersVertical, X, Heart, Cast,
-  PictureInPicture2,
+  PictureInPicture2, ArrowLeftRight,
 } from 'lucide-react';
 import { invoke } from '@tauri-apps/api/core';
 import { usePlayerStore } from '../store/playerStore';
 import { useShallow } from 'zustand/react/shallow';
 import { useAuthStore } from '../store/authStore';
+import { useThemeStore } from '../store/themeStore';
 import { buildCoverArtUrl, coverArtCacheKey, star, unstar, setRating } from '../api/subsonic';
 import CachedImage from './CachedImage';
 import WaveformSeek from './WaveformSeek';
@@ -43,11 +44,28 @@ const PlaybackTime = memo(function PlaybackTime({ className }: { className?: str
  return <span className={className} ref={spanRef} />;
 });

+// Renders the remaining time (duration - currentTime) without causing PlayerBar to re-render.
+const RemainingTime = memo(function RemainingTime({ duration, className }: { duration: number; className?: string }) {
+  const spanRef = useRef<HTMLSpanElement>(null);
+  useEffect(() => {
+    const updateRemaining = () => {
+      if (spanRef.current) {
+        const remaining = Math.max(0, duration - usePlayerStore.getState().currentTime);
+        spanRef.current.textContent = `-${formatTime(remaining)}`;
+      }
+    };
+    updateRemaining();
+    return usePlayerStore.subscribe(updateRemaining);
+  }, [duration]);
+  return <span className={className} ref={spanRef} />;
+});
+
 export default function PlayerBar() {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const [eqOpen, setEqOpen] = useState(false);
  const [showVolPct, setShowVolPct] = useState(false);
+  const [localShowRemaining, setLocalShowRemaining] = useState(() => useThemeStore.getState().showRemainingTime);
  const premuteVolumeRef = useRef(1);
  const showLyrics   = useLyricsStore(s => s.showLyrics);
  const activeTab    = useLyricsStore(s => s.activeTab);
@@ -297,7 +315,18 @@ export default function PlayerBar() {
            <div className="player-waveform-wrap">
              <WaveformSeek trackId={currentTrack?.id} />
            </div>
-            <span className="player-time">{formatTime(duration)}</span>
+            <span
+              className="player-time player-time-toggle"
+              onClick={() => {
+                const newVal = !localShowRemaining;
+                setLocalShowRemaining(newVal);
+                useThemeStore.getState().setShowRemainingTime(newVal);
+              }}
+              data-tooltip={localShowRemaining ? t('player.showDuration') : t('player.showRemainingTime')}
+            >
+              {localShowRemaining ? <RemainingTime duration={duration} /> : formatTime(duration)}
+              <ArrowLeftRight size={10} style={{ marginLeft: 4, opacity: 0.6 }} />
+            </span>
          </>
        )}
      </div>
@@ -1,6 +1,6 @@
 import React, { useState, useRef, useMemo } from 'react';
 import { Track, usePlayerStore, songToTrack } from '../store/playerStore';
-import { Play, Music, Star, X, Trash2, Save, FolderOpen, Shuffle, Infinity, Waves, MicVocal, ListMusic, Check, ListPlus, ArrowUpToLine, Radio, HardDrive } from 'lucide-react';
+import { Play, Music, Star, X, Trash2, Save, FolderOpen, Shuffle, Infinity, Waves, MicVocal, ListMusic, Check, ListPlus, ArrowUpToLine, Radio, HardDrive, ChevronDown } from 'lucide-react';
 import { buildCoverArtUrl, coverArtCacheKey, getAlbum, getPlaylists, getPlaylist, updatePlaylist, deletePlaylist, SubsonicPlaylist } from '../api/subsonic';
 import { usePlaylistStore } from '../store/playlistStore';
 import { useCachedUrl } from './CachedImage';
@@ -8,6 +8,7 @@ import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { useAuthStore } from '../store/authStore';
+import { useThemeStore } from '../store/themeStore';
 import { useLyricsStore } from '../store/lyricsStore';
 import { useDragDrop } from '../contexts/DragDropContext';
 import LyricsPane from './LyricsPane';
@@ -267,6 +268,8 @@ export default function QueuePanel() {

  const [showRemainingTime, setShowRemainingTime] = useState(false);
  const [showCrossfadePopover, setShowCrossfadePopover] = useState(false);
+  const expandReplayGain = useThemeStore(s => s.expandReplayGain);
+  const setExpandReplayGain = useThemeStore(s => s.setExpandReplayGain);
  const crossfadeBtnRef = useRef<HTMLButtonElement>(null);
  const crossfadePopoverRef = useRef<HTMLDivElement>(null);

@@ -451,28 +454,53 @@ export default function QueuePanel() {
              })(),
            ].filter(Boolean) as string[];
            const rgParts = formatQueueReplayGainParts(currentTrack, t);
-            const techLine = [...baseParts, ...rgParts].join(' · ');
-            if (!techLine && !playbackSource) return null;
+            const baseLine = baseParts.join(' · ');
+            const rgLine = rgParts.join(' · ');
+            if (!baseLine && !rgLine && !playbackSource) return null;
+            const showRgLine = expandReplayGain && !!rgLine;
            return (
-              <div className="queue-current-tech">
-                {playbackSource && (
-                  <span
-                    className="queue-current-tech-source"
-                    data-tooltip={
-                      playbackSource === 'offline'
-                        ? t('queue.sourceOffline')
-                        : playbackSource === 'hot'
-                          ? t('queue.sourceHot')
-                          : t('queue.sourceStream')
-                    }
-                    aria-hidden
-                  >
-                    {playbackSource === 'offline' && <FolderOpen size={11} strokeWidth={2.25} />}
-                    {playbackSource === 'hot' && <HardDrive size={11} strokeWidth={2.25} />}
-                    {playbackSource === 'stream' && <Waves size={11} strokeWidth={2.25} />}
-                  </span>
-                )}
-                <span className="queue-current-tech-main">{techLine}</span>
+              <div className={`queue-current-tech${showRgLine ? ' queue-current-tech--two-line' : ''}`}>
+                <div className="queue-current-tech-stack">
+                  <div className="queue-current-tech-row">
+                    {playbackSource && (
+                      <span
+                        className="queue-current-tech-source"
+                        data-tooltip={
+                          playbackSource === 'offline'
+                            ? t('queue.sourceOffline')
+                            : playbackSource === 'hot'
+                              ? t('queue.sourceHot')
+                              : t('queue.sourceStream')
+                        }
+                        aria-hidden
+                      >
+                        {playbackSource === 'offline' && <FolderOpen size={11} strokeWidth={2.25} />}
+                        {playbackSource === 'hot' && <HardDrive size={11} strokeWidth={2.25} />}
+                        {playbackSource === 'stream' && <Waves size={11} strokeWidth={2.25} />}
+                      </span>
+                    )}
+                    {baseLine && <span className="queue-current-tech-main">{baseLine}</span>}
+                    {rgLine && (
+                      <button
+                        type="button"
+                        className={`queue-current-tech-rg-badge${showRgLine ? ' queue-current-tech-rg-badge--open' : ''}`}
+                        data-tooltip={`${t('queue.replayGain')} · ${rgLine}`}
+                        aria-expanded={showRgLine}
+                        aria-label={t('queue.replayGain')}
+                        onClick={() => setExpandReplayGain(!expandReplayGain)}
+                      >
+                        RG
+                        <ChevronDown size={9} strokeWidth={2.5} />
+                      </button>
+                    )}
+                  </div>
+                  {showRgLine && (
+                    <span className="queue-current-tech-rg">
+                      <span className="queue-current-tech-rg-label">{t('queue.replayGain')}</span>
+                      {' · '}{rgLine}
+                    </span>
+                  )}
+                </div>
              </div>
            );
          })()}
@@ -15,6 +15,7 @@ import {
 } from 'lucide-react';
 import PsysonicLogo from './PsysonicLogo';
 import PSmallLogo from './PSmallLogo';
+import WhatsNewBanner from './WhatsNewBanner';
 import { getPlaylists } from '../api/subsonic';
 import { usePlaylistStore } from '../store/playlistStore';
 import { ALL_NAV_ITEMS } from '../config/navItems';
@@ -294,13 +295,18 @@ export default function Sidebar({
          )
        ))}

+        {/* Spacer: everything from here onward sticks to the bottom of the sidebar. */}
+        <div className="sidebar-bottom-spacer" />
+
+        {/* What's New banner — only visible while the current release hasn't been seen. */}
+        <WhatsNewBanner collapsed={isCollapsed} />
+
        {/* Now Playing — fixed, always visible */}
        <NavLink
          to="/now-playing"
          className={({ isActive }) => `nav-link nav-link-nowplaying ${isActive ? 'active' : ''}`}
          data-tooltip={isCollapsed ? t('sidebar.nowPlaying') : undefined}
          data-tooltip-pos="bottom"
-          style={{ marginTop: 'auto' }}
        >
          <span className="nav-np-icon-wrap">
            <AudioLines size={isCollapsed ? 22 : 18} />
@@ -0,0 +1,65 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Sparkles, X } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { version } from '../../package.json';
+import { useAuthStore } from '../store/authStore';
+
+interface Props {
+  collapsed?: boolean;
+}
+
+/**
+ * Sidebar pill shown above Now Playing while the current app version hasn't
+ * been opened yet. Clicking opens the What's New page; X dismisses.
+ *
+ * Uses a fixed neutral palette so it looks identical across every theme.
+ */
+export default function WhatsNewBanner({ collapsed }: Props) {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const lastSeen = useAuthStore(s => s.lastSeenChangelogVersion);
+  const setLastSeen = useAuthStore(s => s.setLastSeenChangelogVersion);
+  const showOnUpdate = useAuthStore(s => s.showChangelogOnUpdate);
+
+  if (!showOnUpdate || lastSeen === version) return null;
+
+  const dismiss = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setLastSeen(version);
+  };
+
+  const open = () => navigate('/whats-new');
+
+  if (collapsed) {
+    return (
+      <button
+        type="button"
+        className="whats-new-banner whats-new-banner--collapsed"
+        onClick={open}
+        data-tooltip={t('whatsNew.bannerCollapsed', { version })}
+        data-tooltip-pos="bottom"
+      >
+        <Sparkles size={16} />
+      </button>
+    );
+  }
+
+  return (
+    <button type="button" className="whats-new-banner" onClick={open}>
+      <Sparkles size={14} className="whats-new-banner__icon" />
+      <span className="whats-new-banner__text">
+        <span className="whats-new-banner__title">{t('whatsNew.bannerTitle')}</span>
+        <span className="whats-new-banner__version">v{version}</span>
+      </span>
+      <span
+        className="whats-new-banner__dismiss"
+        role="button"
+        aria-label={t('whatsNew.dismiss')}
+        onClick={dismiss}
+      >
+        <X size={12} />
+      </span>
+    </button>
+  );
+}
@@ -599,11 +599,13 @@ export const deTranslation = {
    aboutVersion: 'Version',
    aboutBuiltWith: 'Gebaut mit Tauri · React · TypeScript · Rust/rodio',
    aboutAiCredit: 'Mit freundlicher Unterstützung von Claude Code by Anthropic',
+    aboutReleaseNotesLabel: 'Release Notes',
+    aboutReleaseNotesLink: 'Neuigkeiten dieser Version öffnen',
    aboutContributorsLabel: 'Mitwirkende',
    aboutSpecialThanksLabel: 'Besonderer Dank',
    changelog: 'Changelog',
    showChangelogOnUpdate: "'Was ist neu' bei Update anzeigen",
-    showChangelogOnUpdateDesc: 'Zeigt automatisch die Neuerungen an, wenn eine neue Version zum ersten Mal gestartet wird.',
+    showChangelogOnUpdateDesc: 'Blendet nach einem Update einen dezenten Changelog-Banner über Now Playing ein. Klick öffnet die Release Notes, X blendet ihn aus.',
    randomMixTitle: 'Zufallsmix',
    randomMixBlacklistTitle: 'Eigene Filter-Keywords',
    randomMixBlacklistDesc: 'Songs werden ausgeschlossen, wenn ein Keyword auf Genre, Titel, Album oder Künstler zutrifft (aktiv wenn die Checkbox oben an ist).',
@@ -640,6 +642,7 @@ export const deTranslation = {
    shortcutOpenFolderBrowser: '{{folderBrowser}} öffnen',
    shortcutFullscreenPlayer: 'Vollbild-Player',
    shortcutNativeFullscreen: 'Nativer Vollbildmodus',
+    shortcutOpenMiniPlayer: 'Mini-Player öffnen',
    tabSystem: 'System',
    tabGeneral: 'Allgemein',
    ratingsSectionTitle: 'Bewertungen',
@@ -739,6 +742,14 @@ export const deTranslation = {
    dontShowAgain: 'Nicht mehr anzeigen',
    close: 'Verstanden',
  },
+  whatsNew: {
+    title: 'Was ist neu',
+    empty: 'Für diese Version liegt noch kein Changelog-Eintrag vor.',
+    bannerTitle: 'Changelog',
+    bannerCollapsed: 'Neu in v{{version}}',
+    dismiss: 'Ausblenden',
+    close: 'Schließen',
+  },
  help: {
    title: 'Hilfe',
    s1: 'Erste Schritte',
@@ -894,6 +905,7 @@ export const deTranslation = {
    trackPlural: 'Titel',
    showRemaining: 'Restzeit anzeigen',
    showTotal: 'Gesamtzeit anzeigen',
+    replayGain: 'ReplayGain',
    rgTrack: 'T {{db}} dB',
    rgAlbum: 'A {{db}} dB',
    rgPeak: 'Peak {{pk}}',
@@ -901,6 +913,15 @@ export const deTranslation = {
    sourceHot: 'Wiedergabe aus dem Cache',
    sourceStream: 'Wiedergabe aus dem Netzwerkstream',
  },
+  miniPlayer: {
+    showQueue: 'Warteschlange einblenden',
+    hideQueue: 'Warteschlange ausblenden',
+    pinOnTop: 'Im Vordergrund halten',
+    pinOff: 'Vordergrund deaktivieren',
+    openMainWindow: 'Hauptfenster öffnen',
+    close: 'Schließen',
+    emptyQueue: 'Die Warteschlange ist leer',
+  },
  statistics: {
    title: 'Statistiken',
    recentlyPlayed: 'Zuletzt gehört',
@@ -975,6 +996,8 @@ export const deTranslation = {
    lyricsSourceLrclib: 'Quelle: LRCLIB',
    lyricsSourceNetease: 'Quelle: Netease',
    lyricsSourceLyricsplus: 'Quelle: YouLyPlus',
+    showDuration: 'Dauer anzeigen',
+    showRemainingTime: 'Verbleibende Zeit anzeigen',
  },
  songInfo: {
    title: 'Song-Infos',
@@ -601,11 +601,13 @@ export const enTranslation = {
    aboutVersion: 'Version',
    aboutBuiltWith: 'Built with Tauri · React · TypeScript · Rust/rodio',
    aboutAiCredit: 'Developed with the support of Claude Code by Anthropic',
+    aboutReleaseNotesLabel: 'Release notes',
+    aboutReleaseNotesLink: "Open this version's what's-new",
    aboutContributorsLabel: 'Contributors',
    aboutSpecialThanksLabel: 'Special Thanks',
    changelog: 'Changelog',
    showChangelogOnUpdate: "Show 'What's New' on update",
-    showChangelogOnUpdateDesc: "Automatically show what's new when a new version is launched for the first time.",
+    showChangelogOnUpdateDesc: "Show a discreet changelog banner above Now Playing after an update. Click opens the release notes; X dismisses it.",
    randomMixTitle: 'Random Mix',
    randomMixBlacklistTitle: 'Custom Filter Keywords',
    randomMixBlacklistDesc: 'Songs are excluded when any keyword matches their genre, title, album, or artist (active when the checkbox above is on).',
@@ -665,6 +667,7 @@ export const enTranslation = {
    shortcutOpenFolderBrowser: 'Open {{folderBrowser}}',
    shortcutFullscreenPlayer: 'Fullscreen player',
    shortcutNativeFullscreen: 'Native fullscreen',
+    shortcutOpenMiniPlayer: 'Open mini player',
    playbackTitle: 'Playback',
    replayGain: 'Replay Gain',
    replayGainDesc: 'Normalize track volume using ReplayGain metadata',
@@ -741,6 +744,14 @@ export const enTranslation = {
    dontShowAgain: "Don't show again",
    close: 'Got it',
  },
+  whatsNew: {
+    title: "What's New",
+    empty: 'No changelog entry for this version yet.',
+    bannerTitle: 'Changelog',
+    bannerCollapsed: "What's new in v{{version}}",
+    dismiss: 'Dismiss',
+    close: 'Close',
+  },
  help: {
    title: 'Help',
    s1: 'Getting Started',
@@ -896,6 +907,7 @@ export const enTranslation = {
    trackPlural: 'tracks',
    showRemaining: 'Show remaining time',
    showTotal: 'Show total time',
+    replayGain: 'ReplayGain',
    rgTrack: 'T {{db}} dB',
    rgAlbum: 'A {{db}} dB',
    rgPeak: 'Peak {{pk}}',
@@ -903,6 +915,15 @@ export const enTranslation = {
    sourceHot: 'Playing from cache',
    sourceStream: 'Playing from network stream',
  },
+  miniPlayer: {
+    showQueue: 'Show queue',
+    hideQueue: 'Hide queue',
+    pinOnTop: 'Pin on top',
+    pinOff: 'Unpin',
+    openMainWindow: 'Open main window',
+    close: 'Close',
+    emptyQueue: 'Queue is empty',
+  },
  statistics: {
    title: 'Statistics',
    recentlyPlayed: 'Recently Played',
@@ -977,6 +998,8 @@ export const enTranslation = {
    lyricsSourceLrclib: 'Source: LRCLIB',
    lyricsSourceNetease: 'Source: Netease',
    lyricsSourceLyricsplus: 'Source: YouLyPlus',
+    showDuration: 'Show duration',
+    showRemainingTime: 'Show remaining time',
  },
  songInfo: {
    title: 'Song Info',
@@ -592,11 +592,13 @@ export const esTranslation = {
    aboutVersion: 'Versión',
    aboutBuiltWith: 'Construido con Tauri · React · TypeScript · Rust/rodio',
    aboutAiCredit: 'Desarrollado con el apoyo de Claude Code by Anthropic',
+    aboutReleaseNotesLabel: 'Notas de la versión',
+    aboutReleaseNotesLink: 'Abrir las novedades de esta versión',
    aboutContributorsLabel: 'Contribuidores',
    aboutSpecialThanksLabel: 'Agradecimientos Especiales',
    changelog: 'Registro de Cambios',
    showChangelogOnUpdate: "Mostrar 'Novedades' al actualizar",
-    showChangelogOnUpdateDesc: "Muestra automáticamente las novedades cuando se lanza una nueva versión por primera vez.",
+    showChangelogOnUpdateDesc: 'Muestra un discreto banner de changelog encima de Now Playing tras una actualización. Clic abre las notas de la versión; X lo oculta.',
    randomMixTitle: 'Mezcla Aleatoria',
    randomMixBlacklistTitle: 'Palabras Clave de Filtro Personalizadas',
    randomMixBlacklistDesc: 'Las canciones se excluyen cuando cualquier palabra clave coincide con su género, título, álbum o artista (activo cuando el checkbox de arriba está activado).',
@@ -656,6 +658,7 @@ export const esTranslation = {
    shortcutOpenFolderBrowser: 'Abrir {{folderBrowser}}',
    shortcutFullscreenPlayer: 'Reproductor pantalla completa',
    shortcutNativeFullscreen: 'Pantalla completa nativa',
+    shortcutOpenMiniPlayer: 'Abrir mini reproductor',
    playbackTitle: 'Reproducción',
    replayGain: 'Replay Gain',
    replayGainDesc: 'Normalizar volumen de pistas usando metadatos ReplayGain',
@@ -732,6 +735,14 @@ export const esTranslation = {
    dontShowAgain: 'No mostrar de nuevo',
    close: 'Entendido',
  },
+  whatsNew: {
+    title: 'Novedades',
+    empty: 'Aún no hay entrada de changelog para esta versión.',
+    bannerTitle: 'Changelog',
+    bannerCollapsed: 'Novedades en v{{version}}',
+    dismiss: 'Ocultar',
+    close: 'Cerrar',
+  },
  help: {
    title: 'Ayuda',
    s1: 'Primeros Pasos',
@@ -887,6 +898,7 @@ export const esTranslation = {
    trackPlural: 'pistas',
    showRemaining: 'Mostrar tiempo restante',
    showTotal: 'Mostrar tiempo total',
+    replayGain: 'ReplayGain',
    rgTrack: 'T {{db}} dB',
    rgAlbum: 'A {{db}} dB',
    rgPeak: 'Pico {{pk}}',
@@ -894,6 +906,15 @@ export const esTranslation = {
    sourceHot: 'Reproducción desde la caché',
    sourceStream: 'Reproducción desde la transmisión en red',
  },
+  miniPlayer: {
+    showQueue: 'Mostrar cola',
+    hideQueue: 'Ocultar cola',
+    pinOnTop: 'Mantener encima',
+    pinOff: 'Desfijar',
+    openMainWindow: 'Abrir ventana principal',
+    close: 'Cerrar',
+    emptyQueue: 'La cola está vacía',
+  },
  statistics: {
    title: 'Estadísticas',
    recentlyPlayed: 'Reproducidos Recientemente',
@@ -968,6 +989,8 @@ export const esTranslation = {
    lyricsSourceLrclib: 'Fuente: LRCLIB',
    lyricsSourceNetease: 'Fuente: Netease',
    lyricsSourceLyricsplus: 'Fuente: YouLyPlus',
+    showDuration: 'Mostrar duración',
+    showRemainingTime: 'Mostrar tiempo restante',
  },
  songInfo: {
    title: 'Información de Canción',
@@ -587,11 +587,13 @@ export const frTranslation = {
    aboutVersion: 'Version',
    aboutBuiltWith: 'Construit avec Tauri · React · TypeScript · Rust/rodio',
    aboutAiCredit: 'Développé avec le soutien de Claude Code par Anthropic',
+    aboutReleaseNotesLabel: 'Notes de version',
+    aboutReleaseNotesLink: 'Ouvrir les nouveautés de cette version',
    aboutContributorsLabel: 'Contributeurs',
    aboutSpecialThanksLabel: 'Remerciements spéciaux',
    changelog: 'Journal des modifications',
    showChangelogOnUpdate: "Afficher 'Quoi de neuf' lors des mises à jour",
-    showChangelogOnUpdateDesc: 'Affiche automatiquement les nouveautés au premier lancement d\'une nouvelle version.',
+    showChangelogOnUpdateDesc: "Affiche une bannière discrète du changelog au-dessus de Now Playing après une mise à jour. Un clic ouvre les notes de version, le X la masque.",
    randomMixTitle: 'Mix aléatoire',
    randomMixBlacklistTitle: 'Mots-clés de filtre personnalisés',
    randomMixBlacklistDesc: 'Les morceaux sont exclus si un mot-clé correspond à leur genre, titre, album ou artiste (actif quand la case ci-dessus est cochée).',
@@ -628,6 +630,7 @@ export const frTranslation = {
    shortcutOpenFolderBrowser: 'Ouvrir {{folderBrowser}}',
    shortcutFullscreenPlayer: 'Lecteur plein écran',
    shortcutNativeFullscreen: 'Plein écran natif',
+    shortcutOpenMiniPlayer: 'Ouvrir le mini-lecteur',
    tabSystem: 'Système',
    tabGeneral: 'Général',
    ratingsSectionTitle: 'Notes',
@@ -727,6 +730,14 @@ export const frTranslation = {
    dontShowAgain: 'Ne plus afficher',
    close: 'Compris',
  },
+  whatsNew: {
+    title: 'Quoi de neuf',
+    empty: 'Aucune entrée de changelog pour cette version.',
+    bannerTitle: 'Changelog',
+    bannerCollapsed: 'Nouveau dans v{{version}}',
+    dismiss: 'Ignorer',
+    close: 'Fermer',
+  },
  help: {
    title: 'Aide',
    s1: 'Démarrage',
@@ -882,6 +893,7 @@ export const frTranslation = {
    trackPlural: 'pistes',
    showRemaining: 'Afficher le temps restant',
    showTotal: 'Afficher la durée totale',
+    replayGain: 'ReplayGain',
    rgTrack: 'T {{db}} dB',
    rgAlbum: 'A {{db}} dB',
    rgPeak: 'Pic {{pk}}',
@@ -889,6 +901,15 @@ export const frTranslation = {
    sourceHot: 'Lecture depuis le cache',
    sourceStream: 'Lecture depuis le flux réseau',
  },
+  miniPlayer: {
+    showQueue: 'Afficher la file',
+    hideQueue: 'Masquer la file',
+    pinOnTop: 'Toujours visible',
+    pinOff: 'Désépingler',
+    openMainWindow: 'Ouvrir la fenêtre principale',
+    close: 'Fermer',
+    emptyQueue: 'La file est vide',
+  },
  statistics: {
    title: 'Statistiques',
    recentlyPlayed: 'Écoutés récemment',
@@ -963,6 +984,8 @@ export const frTranslation = {
    lyricsSourceLrclib: 'Source : LRCLIB',
    lyricsSourceNetease: 'Source : Netease',
    lyricsSourceLyricsplus: 'Source : YouLyPlus',
+    showDuration: 'Afficher la durée',
+    showRemainingTime: 'Afficher le temps restant',
  },
  songInfo: {
    title: 'Infos du morceau',
@@ -586,11 +586,13 @@ export const nbTranslation = {
    aboutVersion: 'Versjon',
    aboutBuiltWith: 'Bygget med Tauri · React · TypeScript · Rust/rodio',
    aboutAiCredit: 'Utviklet med støtte fra Claude Code laget av Anthropic',
+    aboutReleaseNotesLabel: 'Versjonsnotater',
+    aboutReleaseNotesLink: 'Åpne nyhetene for denne versjonen',
    aboutContributorsLabel: 'Bidragsytere',
    aboutSpecialThanksLabel: 'Spesiell takk',
    changelog: 'Endringslogg',
    showChangelogOnUpdate: "Vis 'Hva er nytt' ved oppdatering til ny versjon",
-    showChangelogOnUpdateDesc: "Vis automatisk hva som er nytt når en ny versjon lanseres for første gang.",
+    showChangelogOnUpdateDesc: "Viser et diskret changelog-banner over Now Playing etter en oppdatering. Klikk åpner versjonsnotatene; X skjuler det.",
    randomMixTitle: 'Tilfeldig miks',
    randomMixBlacklistTitle: 'Egendefinerte filternøkkelord',
    randomMixBlacklistDesc: 'Sanger ekskluderes når et nøkkelord samsvarer med sjanger, tittel, album eller artist (aktiv når avkrysningsboksen ovenfor er på).',
@@ -650,6 +652,7 @@ export const nbTranslation = {
    shortcutOpenFolderBrowser: 'Åpne {{folderBrowser}}',
    shortcutFullscreenPlayer: 'Fullskjermsspiller',
    shortcutNativeFullscreen: 'Naturlig fullskjerm',
+    shortcutOpenMiniPlayer: 'Åpne minispiller',
    playbackTitle: 'Avspilling',
    replayGain: 'Replay Gain',
    replayGainDesc: 'Normaliser sporvolumet ved hjelp av ReplayGain-metadata',
@@ -726,6 +729,14 @@ export const nbTranslation = {
    dontShowAgain: "Ikke vis igjen",
    close: 'Forstått',
  },
+  whatsNew: {
+    title: 'Nyheter',
+    empty: 'Ingen endringslogg for denne versjonen ennå.',
+    bannerTitle: 'Changelog',
+    bannerCollapsed: 'Nyheter i v{{version}}',
+    dismiss: 'Skjul',
+    close: 'Lukk',
+  },
  help: {
    title: 'Hjelp',
    s1: 'Komme i gang',
@@ -881,6 +892,7 @@ export const nbTranslation = {
    trackPlural: 'spor',
    showRemaining: 'Vis gjenværende tid',
    showTotal: 'Vis total tid',
+    replayGain: 'ReplayGain',
    rgTrack: 'T {{db}} dB',
    rgAlbum: 'A {{db}} dB',
    rgPeak: 'Topp {{pk}}',
@@ -888,6 +900,15 @@ export const nbTranslation = {
    sourceHot: 'Spiller fra cache',
    sourceStream: 'Spiller fra nettverksstrøm',
  },
+  miniPlayer: {
+    showQueue: 'Vis kø',
+    hideQueue: 'Skjul kø',
+    pinOnTop: 'Hold øverst',
+    pinOff: 'Løsne',
+    openMainWindow: 'Åpne hovedvindu',
+    close: 'Lukk',
+    emptyQueue: 'Køen er tom',
+  },
  statistics: {
    title: 'Statistikk',
    recentlyPlayed: 'Nylig spilt',
@@ -962,6 +983,8 @@ export const nbTranslation = {
    lyricsSourceLrclib: 'Kilde: LRCLIB',
    lyricsSourceNetease: 'Kilde: Netease',
    lyricsSourceLyricsplus: 'Kilde: YouLyPlus',
+    showDuration: 'Vis varighet',
+    showRemainingTime: 'Vis gjenværende tid',
  },
  songInfo: {
    title: 'Sanginfo',
@@ -586,11 +586,13 @@ export const nlTranslation = {
    aboutVersion: 'Versie',
    aboutBuiltWith: 'Gebouwd met Tauri · React · TypeScript · Rust/rodio',
    aboutAiCredit: 'Ontwikkeld met ondersteuning van Claude Code door Anthropic',
+    aboutReleaseNotesLabel: 'Release-notities',
+    aboutReleaseNotesLink: 'Nieuws van deze versie openen',
    aboutContributorsLabel: 'Bijdragers',
    aboutSpecialThanksLabel: 'Speciale dank',
    changelog: 'Wijzigingslog',
    showChangelogOnUpdate: "'Wat is nieuw' tonen bij update",
-    showChangelogOnUpdateDesc: 'Toont automatisch de nieuwigheden bij de eerste start van een nieuwe versie.',
+    showChangelogOnUpdateDesc: 'Toont een discrete changelog-banner boven Now Playing na een update. Klik opent de release-notities; X verbergt hem.',
    randomMixTitle: 'Willekeurige mix',
    randomMixBlacklistTitle: 'Aangepaste filtertrefwoorden',
    randomMixBlacklistDesc: 'Nummers worden uitgesloten als een trefwoord overeenkomt met hun genre, titel, album of artiest (actief wanneer het selectievakje hierboven is aangevinkt).',
@@ -627,6 +629,7 @@ export const nlTranslation = {
    shortcutOpenFolderBrowser: '{{folderBrowser}} openen',
    shortcutFullscreenPlayer: 'Volledigschermspeler',
    shortcutNativeFullscreen: 'Systeemvolledig scherm',
+    shortcutOpenMiniPlayer: 'Mini-speler openen',
    tabSystem: 'Systeem',
    tabGeneral: 'Algemeen',
    ratingsSectionTitle: 'Beoordelingen',
@@ -726,6 +729,14 @@ export const nlTranslation = {
    dontShowAgain: 'Niet meer weergeven',
    close: 'Begrepen',
  },
+  whatsNew: {
+    title: 'Wat is nieuw',
+    empty: 'Nog geen changelog-item voor deze versie.',
+    bannerTitle: 'Changelog',
+    bannerCollapsed: 'Nieuw in v{{version}}',
+    dismiss: 'Verbergen',
+    close: 'Sluiten',
+  },
  help: {
    title: 'Help',
    s1: 'Aan de slag',
@@ -881,6 +892,7 @@ export const nlTranslation = {
    trackPlural: 'nummers',
    showRemaining: 'Resterende tijd tonen',
    showTotal: 'Totale tijd tonen',
+    replayGain: 'ReplayGain',
    rgTrack: 'T {{db}} dB',
    rgAlbum: 'A {{db}} dB',
    rgPeak: 'Piek {{pk}}',
@@ -888,6 +900,15 @@ export const nlTranslation = {
    sourceHot: 'Afspelen vanuit cache',
    sourceStream: 'Afspelen vanuit netwerkstream',
  },
+  miniPlayer: {
+    showQueue: 'Wachtrij tonen',
+    hideQueue: 'Wachtrij verbergen',
+    pinOnTop: 'Altijd boven',
+    pinOff: 'Losmaken',
+    openMainWindow: 'Hoofdvenster openen',
+    close: 'Sluiten',
+    emptyQueue: 'Wachtrij is leeg',
+  },
  statistics: {
    title: 'Statistieken',
    recentlyPlayed: 'Recent afgespeeld',
@@ -962,6 +983,8 @@ export const nlTranslation = {
    lyricsSourceLrclib: 'Bron: LRCLIB',
    lyricsSourceNetease: 'Bron: Netease',
    lyricsSourceLyricsplus: 'Bron: YouLyPlus',
+    showDuration: 'Toon duur',
+    showRemainingTime: 'Toon resterende tijd',
  },
  songInfo: {
    title: 'Nummerinfo',
@@ -613,11 +613,13 @@ export const ruTranslation = {
    aboutVersion: 'Версия',
    aboutBuiltWith: 'Tauri · React · TypeScript · Rust/rodio',
    aboutAiCredit: 'При поддержке Claude Code (Anthropic)',
+    aboutReleaseNotesLabel: 'Примечания к выпуску',
+    aboutReleaseNotesLink: 'Открыть «Что нового» этой версии',
    aboutContributorsLabel: 'Участники',
    aboutSpecialThanksLabel: 'Особая благодарность',
    changelog: 'Список изменений',
    showChangelogOnUpdate: 'Показывать «Что нового» после обновления',
-    showChangelogOnUpdateDesc: 'Автоматически при первом запуске новой версии.',
+    showChangelogOnUpdateDesc: 'После обновления над «Сейчас играет» появится ненавязчивый баннер журнала изменений. Клик открывает заметки о выпуске, X скрывает.',
    randomMixTitle: 'Случайный микс',
    randomMixBlacklistTitle: 'Свои слова-фильтры',
    randomMixBlacklistDesc:
@@ -680,6 +682,7 @@ export const ruTranslation = {
    shortcutOpenFolderBrowser: 'Открыть {{folderBrowser}}',
    shortcutFullscreenPlayer: 'Полноэкранный плеер',
    shortcutNativeFullscreen: 'Системный полный экран',
+    shortcutOpenMiniPlayer: 'Открыть мини-плеер',
    playbackTitle: 'Воспроизведение',
    replayGain: 'Replay Gain',
    replayGainDesc: 'Выравнивание громкости по метаданным ReplayGain',
@@ -756,6 +759,14 @@ export const ruTranslation = {
    dontShowAgain: 'Больше не показывать',
    close: 'Понятно',
  },
+  whatsNew: {
+    title: 'Что нового',
+    empty: 'Для этой версии пока нет записи в журнале изменений.',
+    bannerTitle: 'Журнал изменений',
+    bannerCollapsed: 'Что нового в v{{version}}',
+    dismiss: 'Скрыть',
+    close: 'Закрыть',
+  },
  help: {
    title: 'Справка',
    s1: 'С чего начать',
@@ -934,6 +945,7 @@ export const ruTranslation = {
    trackPlural: 'треков',
    showRemaining: 'Осталось',
    showTotal: 'Всего',
+    replayGain: 'ReplayGain',
    rgTrack: 'Т {{db}} дБ',
    rgAlbum: 'А {{db}} дБ',
    rgPeak: 'Пик {{pk}}',
@@ -941,6 +953,15 @@ export const ruTranslation = {
    sourceHot: 'Играет из кэша',
    sourceStream: 'Играет из сетевого потока',
  },
+  miniPlayer: {
+    showQueue: 'Показать очередь',
+    hideQueue: 'Скрыть очередь',
+    pinOnTop: 'Поверх окон',
+    pinOff: 'Открепить',
+    openMainWindow: 'Открыть главное окно',
+    close: 'Закрыть',
+    emptyQueue: 'Очередь пуста',
+  },
  statistics: {
    title: 'Статистика',
    recentlyPlayed: 'Недавно проиграно',
@@ -1023,6 +1044,8 @@ export const ruTranslation = {
    lyricsNotFound: 'Текст не найден',
    lyricsSourceNetease: 'Источник: Netease',
    lyricsSourceLyricsplus: 'Источник: YouLyPlus',
+    showDuration: 'Показать длительность',
+    showRemainingTime: 'Показать оставшееся время',
  },
  songInfo: {
    title: 'О треке',
@@ -582,11 +582,13 @@ export const zhTranslation = {
    aboutVersion: '版本',
    aboutBuiltWith: '使用 Tauri · React · TypeScript · Rust/rodio 构建',
    aboutAiCredit: '在 Anthropic 的 Claude Code 支持下开发',
+    aboutReleaseNotesLabel: '版本说明',
+    aboutReleaseNotesLink: '打开此版本的新功能',
    aboutContributorsLabel: '贡献者',
    aboutSpecialThanksLabel: '特别感谢',
    changelog: '更新日志',
    showChangelogOnUpdate: '更新时显示"新功能"',
-    showChangelogOnUpdateDesc: '新版本首次启动时自动显示更新内容。',
+    showChangelogOnUpdateDesc: '更新后在「正在播放」上方显示一个低调的更新日志横幅。点击打开发行说明，X 按钮关闭。',
    randomMixTitle: '随机混音',
    randomMixBlacklistTitle: '自定义过滤关键词',
    randomMixBlacklistDesc: '当任何关键词匹配流派、标题、专辑或艺术家时，歌曲将被排除（当上方复选框开启时生效）。',
@@ -646,6 +648,7 @@ export const zhTranslation = {
    shortcutOpenFolderBrowser: '打开{{folderBrowser}}',
    shortcutFullscreenPlayer: '全屏播放器',
    shortcutNativeFullscreen: '原生全屏',
+    shortcutOpenMiniPlayer: '打开迷你播放器',
    playbackTitle: '播放',
    replayGain: '回放增益',
    replayGainDesc: '使用 ReplayGain 元数据标准化曲目音量',
@@ -722,6 +725,14 @@ export const zhTranslation = {
    dontShowAgain: '不再显示',
    close: '知道了',
  },
+  whatsNew: {
+    title: '新功能',
+    empty: '此版本暂无更新日志。',
+    bannerTitle: '更新日志',
+    bannerCollapsed: 'v{{version}} 新功能',
+    dismiss: '关闭',
+    close: '关闭',
+  },
  help: {
    title: '帮助',
    s1: '入门指南',
@@ -877,6 +888,7 @@ export const zhTranslation = {
    trackPlural: '首曲目',
    showRemaining: '显示剩余时间',
    showTotal: '显示总时间',
+    replayGain: 'ReplayGain',
    rgTrack: '曲目 {{db}} dB',
    rgAlbum: '专辑 {{db}} dB',
    rgPeak: '峰值 {{pk}}',
@@ -884,6 +896,15 @@ export const zhTranslation = {
    sourceHot: '正在从缓存播放',
    sourceStream: '正在从网络流播放',
  },
+  miniPlayer: {
+    showQueue: '显示队列',
+    hideQueue: '隐藏队列',
+    pinOnTop: '置顶',
+    pinOff: '取消置顶',
+    openMainWindow: '打开主窗口',
+    close: '关闭',
+    emptyQueue: '队列为空',
+  },
  statistics: {
    title: '统计',
    recentlyPlayed: '最近播放',
@@ -958,6 +979,8 @@ export const zhTranslation = {
    lyricsSourceLrclib: '来源：LRCLIB',
    lyricsSourceNetease: '来源：网易云',
    lyricsSourceLyricsplus: '来源：YouLyPlus',
+    showDuration: '显示时长',
+    showRemainingTime: '显示剩余时间',
  },
  songInfo: {
    title: '歌曲信息',
@@ -121,6 +121,8 @@ const CONTRIBUTORS = [
      'ReplayGain values in Queue tech strip (PR #196)',
      'Playback source badge (offline / cache / stream) in Queue tech strip (PR #201)',
      'WebKitGTK wheel scroll mode: smooth (kinetic) default with optional linear toggle (PR #207)',
+      'ArtistCardLocal i18n: use plural-aware artists.albumCount key instead of hardcoded German',
+      'NixOS / flake install guide with Cachix setup (PR #209)',
    ],
  },
  {
@@ -157,6 +159,7 @@ const CONTRIBUTORS = [
      'Tracklist column picker alignment and toggle fix across Favorites and PlaylistDetail (PR #192)',
      'CSV import: dynamic match threshold, cleaned title search, score display in report (PR #199)',
      'Discord Rich Presence: configurable text templates for details, state and album tooltip (PR #198)',
+      'Click-to-toggle duration / remaining time in player bar with persisted preference (PR #212)',
    ],
  },
  {
@@ -2008,6 +2011,7 @@ export default function Settings() {
                ['open-folder-browser', t('settings.shortcutOpenFolderBrowser', { folderBrowser: t('sidebar.folderBrowser') })],
                ['fullscreen-player', t('settings.shortcutFullscreenPlayer')],
                ['native-fullscreen', t('settings.shortcutNativeFullscreen')],
+                ['open-mini-player',  t('settings.shortcutOpenMiniPlayer')],
              ] as [KeyAction, string][]).map(([action, label]) => {
                const bound = kb.bindings[action];
                const isListening = listeningFor === action;
@@ -2443,6 +2447,18 @@ export default function Settings() {
                  <span style={{ color: 'var(--text-muted)', minWidth: 56 }}>AI</span>
                  <span style={{ color: 'var(--text-secondary)' }}>{t('settings.aboutAiCredit')}</span>
                </div>
+                <div style={{ display: 'flex', gap: '0.5rem' }}>
+                  <span style={{ color: 'var(--text-muted)', minWidth: 56 }}>{t('settings.aboutReleaseNotesLabel')}</span>
+                  <button
+                    onClick={() => {
+                      useAuthStore.getState().setLastSeenChangelogVersion('');
+                      navigate('/whats-new');
+                    }}
+                    style={{ color: 'var(--accent)', background: 'none', border: 'none', padding: 0, cursor: 'pointer', textAlign: 'left' }}
+                  >
+                    {t('settings.aboutReleaseNotesLink')}
+                  </button>
+                </div>
                <div>
                  <button
                    style={{ display: 'flex', width: '100%', alignItems: 'center', gap: '0.5rem', background: 'none', border: 'none', cursor: 'pointer', padding: 0, textAlign: 'left' }}
@@ -0,0 +1,62 @@
+import React, { useMemo } from 'react';
+import { Sparkles, X } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { version } from '../../package.json';
+import changelogRaw from '../../CHANGELOG.md?raw';
+import { renderChangelogBody } from '../utils/changelogMarkdown';
+
+export default function WhatsNew() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+
+  const close = () => {
+    if (window.history.length > 1) navigate(-1);
+    else navigate('/');
+  };
+
+  const entry = useMemo(() => {
+    const blocks = changelogRaw.split(/\n(?=## \[)/).filter((b: string) => b.startsWith('## ['));
+    const block = blocks.find((b: string) => b.startsWith(`## [${version}]`));
+    if (!block) return null;
+    const lines = block.split('\n');
+    const match = lines[0].match(/## \[([^\]]+)\](?:\s*-\s*(.+))?/);
+    const body = lines.slice(1).join('\n').trim();
+    return { version: match?.[1] ?? version, date: match?.[2] ?? '', body };
+  }, []);
+
+  return (
+    <div className="whats-new">
+      <header className="whats-new__header">
+        <div className="whats-new__title-row">
+          <Sparkles size={20} className="whats-new__icon" />
+          <div>
+            <h1 className="whats-new__title">{t('whatsNew.title')}</h1>
+            <div className="whats-new__subtitle">
+              v{entry?.version ?? version}
+              {entry?.date && <span className="whats-new__date"> · {entry.date}</span>}
+            </div>
+          </div>
+          <button
+            type="button"
+            className="whats-new__close"
+            onClick={close}
+            aria-label={t('whatsNew.close')}
+            data-tooltip={t('whatsNew.close')}
+            data-tooltip-pos="bottom"
+          >
+            <X size={18} />
+          </button>
+        </div>
+      </header>
+
+      <div className="whats-new__body">
+        {entry ? (
+          renderChangelogBody(entry.body)
+        ) : (
+          <p className="whats-new__empty">{t('whatsNew.empty')}</p>
+        )}
+      </div>
+    </div>
+  );
+}
@@ -12,7 +12,8 @@ export type KeyAction =
  | 'toggle-queue'
  | 'open-folder-browser'
  | 'fullscreen-player'
-  | 'native-fullscreen';
+  | 'native-fullscreen'
+  | 'open-mini-player';

 /** Physical keys only — ignore for binding capture */
 export const MODIFIER_KEY_CODES = [
@@ -35,6 +36,7 @@ export const DEFAULT_BINDINGS: Bindings = {
  'open-folder-browser': null,
  'fullscreen-player': null,
  'native-fullscreen': 'F11',
+  'open-mini-player':  null,
 };

 interface KeybindingsState {
@@ -22,6 +22,10 @@ interface ThemeState {
  setEnablePlaylistCoverPhoto: (v: boolean) => void;
  showBitrate: boolean;
  setShowBitrate: (v: boolean) => void;
+  showRemainingTime: boolean;
+  setShowRemainingTime: (v: boolean) => void;
+  expandReplayGain: boolean;
+  setExpandReplayGain: (v: boolean) => void;
 }

 export function getScheduledTheme(state: Pick<ThemeState, 'enableThemeScheduler' | 'theme' | 'themeDay' | 'themeNight' | 'timeDayStart' | 'timeNightStart'>): string {
@@ -59,6 +63,10 @@ export const useThemeStore = create<ThemeState>()(
      setEnablePlaylistCoverPhoto: (v) => set({ enablePlaylistCoverPhoto: v }),
      showBitrate: true,
      setShowBitrate: (v) => set({ showBitrate: v }),
+      showRemainingTime: false,
+      setShowRemainingTime: (v) => set({ showRemainingTime: v }),
+      expandReplayGain: false,
+      setExpandReplayGain: (v) => set({ expandReplayGain: v }),
    }),
    {
      name: 'psysonic_theme',
@@ -1868,7 +1868,7 @@
 }

 .track-size {
-  color: var(--ctp-overlay0);
+  color: var(--text-muted);
 }

 .track-duration {
@@ -8832,27 +8832,311 @@ html.no-compositing .fsr-lyric-line.fsrl-active .fsr-lyric-word.active {
   led-pulse, …) even when the app is minimized, causing constant GPU use.
   Pausing them cuts that to near zero while hidden without touching the
   running Rust/audio threads. */
+/* ─ What's New — banner + page ────────────────────────────────────────────
+   Fixed neutral palette so it reads identically on every theme (light and
+   dark). The banner sits in the sidebar just above Now Playing; the page
+   opens in the main content area. */
+
+.sidebar-bottom-spacer {
+  margin-top: auto;
+  flex-shrink: 0;
+}
+
+.whats-new-banner {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 8px 10px;
+  margin: 0 0 6px 0;
+  background: #1f2233;
+  color: #dfe3f6;
+  border: 1px solid #3a3f5a;
+  border-radius: 8px;
+  font: inherit;
+  font-size: 12px;
+  text-align: left;
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s;
+  position: relative;
+}
+
+.whats-new-banner:hover {
+  background: #272b40;
+  border-color: #4a5072;
+}
+
+.whats-new-banner__icon {
+  flex-shrink: 0;
+  color: #8ec8ff;
+}
+
+.whats-new-banner__text {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  line-height: 1.25;
+}
+
+.whats-new-banner__title {
+  font-weight: 600;
+  color: #f1f3fb;
+}
+
+.whats-new-banner__version {
+  font-size: 10.5px;
+  color: #9aa0bd;
+  font-variant-numeric: tabular-nums;
+}
+
+.whats-new-banner__dismiss {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border-radius: 4px;
+  color: #9aa0bd;
+  cursor: pointer;
+}
+.whats-new-banner__dismiss:hover {
+  background: rgba(255, 255, 255, 0.08);
+  color: #e4e7f5;
+}
+
+.whats-new-banner--collapsed {
+  width: 34px;
+  height: 34px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 6px;
+}
+
+/* ─── Page ─── */
+.whats-new {
+  max-width: 880px;
+  margin: 0 auto;
+  padding: 28px 32px 48px;
+  color: #e4e7f5;
+  background: #16182a;
+  border-radius: 12px;
+  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.25);
+  border: 1px solid #2a2d44;
+}
+
+.whats-new__header {
+  padding-bottom: 16px;
+  margin-bottom: 20px;
+  border-bottom: 1px solid #2a2d44;
+}
+.whats-new__title-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.whats-new__close {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 6px;
+  border: 1px solid #3a3f5a;
+  background: transparent;
+  color: #9aa0bd;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background 0.15s, color 0.15s, border-color 0.15s;
+}
+.whats-new__close:hover {
+  background: rgba(255,255,255,0.06);
+  color: #e4e7f5;
+  border-color: #4a5072;
+}
+.whats-new__icon {
+  color: #8ec8ff;
+  flex-shrink: 0;
+}
+.whats-new__title {
+  font-size: 22px;
+  font-weight: 700;
+  margin: 0;
+  color: #f1f3fb;
+  line-height: 1.2;
+}
+.whats-new__subtitle {
+  font-size: 13px;
+  color: #9aa0bd;
+  margin-top: 2px;
+}
+.whats-new__date {
+  font-variant-numeric: tabular-nums;
+}
+
+.whats-new__body {
+  font-size: 14px;
+  line-height: 1.65;
+}
+.whats-new__empty {
+  color: #9aa0bd;
+  font-style: italic;
+}
+
+.whats-new-h3 {
+  font-size: 16px;
+  font-weight: 700;
+  color: #f1f3fb;
+  margin: 22px 0 10px;
+  padding-bottom: 6px;
+  border-bottom: 1px solid #2a2d44;
+}
+.whats-new-h4 {
+  font-size: 14px;
+  font-weight: 700;
+  color: #dfe3f6;
+  margin: 14px 0 6px;
+}
+
+.whats-new-p {
+  margin: 6px 0;
+}
+
+.whats-new-list {
+  list-style: disc;
+  padding-left: 22px;
+  margin: 6px 0 10px;
+}
+.whats-new-list li {
+  margin-bottom: 8px;
+  padding-left: 2px;
+}
+.whats-new-list li::marker {
+  color: #6b7192;
+}
+
+.whats-new-quote {
+  border-left: 3px solid #3a3f5a;
+  padding: 6px 12px;
+  margin: 10px 0;
+  color: #b6bcd8;
+  background: rgba(255,255,255,0.02);
+  border-radius: 0 4px 4px 0;
+}
+
+.whats-new-hr {
+  border: none;
+  border-top: 1px solid #2a2d44;
+  margin: 18px 0;
+}
+
+.whats-new-code {
+  background: #262a3e;
+  color: #d4d7f0;
+  padding: 1px 5px;
+  border-radius: 3px;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 12.5px;
+}
+
+.whats-new-link {
+  color: #8ec8ff;
+  text-decoration: none;
+  border-bottom: 1px dashed #4a5072;
+  cursor: pointer;
+}
+.whats-new-link:hover {
+  color: #b6dbff;
+  border-bottom-color: #8ec8ff;
+}
+
 /* ─ Mini Player window ───────────────────────────────────────────────────── */
-.mini-player {
+/* ── Mini player shell ── outermost wrapper that fills the window ── */
+.mini-player-shell {
  width: 100%;
  height: 100vh;
-  display: grid;
-  grid-template-columns: 112px 1fr;
-  grid-template-rows: 1fr auto;
-  gap: 10px;
-  padding: 12px;
+  display: flex;
+  flex-direction: column;
  background: var(--bg-app);
  color: var(--text-primary);
-  overflow: hidden;
  user-select: none;
+  overflow: hidden;
  box-sizing: border-box;
 }

+/* ── Custom in-page titlebar (Linux + Windows; macOS keeps the native one) ── */
+.mini-player__titlebar {
+  flex-shrink: 0;
+  height: 26px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 4px 0 10px;
+  background: color-mix(in srgb, var(--bg-app) 85%, var(--bg-card) 15%);
+  border-bottom: 1px solid var(--border-subtle);
+}
+.mini-player__titlebar-title {
+  flex: 1;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--text-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  letter-spacing: 0.02em;
+}
+.mini-player__titlebar-btn {
+  width: 22px;
+  height: 22px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  color: var(--text-muted);
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background 0.12s, color 0.12s;
+}
+.mini-player__titlebar-btn:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+.mini-player__titlebar-btn--active {
+  color: var(--accent);
+}
+.mini-player__titlebar-btn--close:hover {
+  background: var(--danger);
+  color: var(--ctp-base);
+}
+
+.mini-player {
+  flex: 1;
+  display: grid;
+  grid-template-columns: 84px 1fr;
+  grid-template-rows: 84px auto;
+  gap: 8px 10px;
+  padding: 10px 12px;
+  overflow: hidden;
+  box-sizing: border-box;
+  min-height: 0;
+}
+
+.mini-player--queue-open {
+  grid-template-rows: 84px auto 1fr;
+}
+
 .mini-player__art {
-  grid-row: 1 / span 2;
+  grid-column: 1;
+  grid-row: 1;
  aspect-ratio: 1;
-  width: 112px;
-  height: 112px;
+  width: 84px;
+  height: 84px;
  background: var(--bg-card);
  border-radius: 8px;
  overflow: hidden;
@@ -8870,10 +9154,13 @@ html.no-compositing .fsr-lyric-line.fsrl-active .fsr-lyric-word.active {
 }

 .mini-player__body {
+  grid-column: 2;
+  grid-row: 1;
  padding: 0 2px;
  display: flex;
  flex-direction: column;
-  gap: 6px;
+  justify-content: space-between;
+  gap: 4px;
  min-width: 0;
 }

@@ -8903,7 +9190,6 @@ html.no-compositing .fsr-lyric-line.fsrl-active .fsr-lyric-word.active {
  align-items: center;
  justify-content: center;
  gap: 10px;
-  margin-top: 2px;
 }
 .mini-player__btn {
  display: flex;
@@ -8933,6 +9219,8 @@ html.no-compositing .fsr-lyric-line.fsrl-active .fsr-lyric-word.active {
 }

 .mini-player__progress {
+  grid-column: 1 / -1;
+  grid-row: 2;
  display: flex;
  align-items: center;
  gap: 6px;
@@ -8956,11 +9244,128 @@ html.no-compositing .fsr-lyric-line.fsrl-active .fsr-lyric-word.active {
  transition: width 0.25s linear;
 }

-.mini-player__toolbar {
-  grid-column: 2;
+
+.mini-queue-wrap {
+  grid-column: 1 / -1;
+  grid-row: 3;
+  position: relative;
+  background: var(--bg-card);
+  border-radius: 8px;
+  overflow: hidden;
+  min-height: 0;
+}
+
+.mini-queue {
+  height: 100%;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: 4px;
  display: flex;
-  gap: 4px;
-  justify-content: flex-end;
+  flex-direction: column;
+  gap: 1px;
+  box-sizing: border-box;
+  /* Hide native scrollbar — we render an overlay thumb beside it. */
+  scrollbar-width: none;
+}
+.mini-queue::-webkit-scrollbar {
+  display: none;
+}
+
+.mini-queue__thumb {
+  position: absolute;
+  top: 4px;
+  right: 3px;
+  width: 4px;
+  border-radius: 2px;
+  background: var(--text-muted);
+  opacity: 0;
+  transition: opacity 0.18s ease;
+  pointer-events: none;
+  will-change: transform;
+}
+.mini-queue-wrap:hover .mini-queue__thumb,
+.mini-queue.is-scrolling ~ .mini-queue__thumb {
+  opacity: 0.55;
+}
+
+.mini-queue__empty {
+  padding: 16px;
+  text-align: center;
+  color: var(--text-muted);
+  font-size: 12px;
+}
+
+.mini-queue__item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 5px 8px;
+  border: none;
+  background: transparent;
+  color: var(--text-primary);
+  text-align: left;
+  border-radius: 4px;
+  cursor: pointer;
+  min-width: 0;
+}
+
+.mini-queue__item:hover {
+  background: var(--bg-hover);
+}
+
+.mini-queue__item--ctx {
+  background: var(--bg-hover);
+}
+
+.mini-queue-wrap--drop-active .mini-queue {
+  scroll-behavior: auto;
+}
+
+.mini-queue__item--current {
+  background: var(--accent-dim);
+  color: var(--accent);
+}
+
+.mini-queue__num {
+  flex-shrink: 0;
+  width: 20px;
+  font-size: 10px;
+  color: var(--text-muted);
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+
+.mini-queue__item--current .mini-queue__num {
+  color: var(--accent);
+  font-weight: 600;
+}
+
+.mini-queue__meta {
+  min-width: 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.mini-queue__title {
+  font-size: 12px;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.mini-queue__artist {
+  font-size: 10px;
+  color: var(--text-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.mini-queue__item--current .mini-queue__artist {
+  color: var(--accent);
+  opacity: 0.8;
 }
 .mini-player__tool {
  display: flex;
@@ -1145,6 +1145,11 @@
  height: var(--player-height);
  position: relative;
  z-index: 100;
+  /* WebKitGTK (software compositing) occasionally paints the bar fully
+     black for one frame when an unrelated layer in the page invalidates.
+     `contain` isolates layout/paint so the bar's region cannot
+     participate in the surrounding dirty rect. */
+  contain: layout paint;
 }

 .player-track-info {
@@ -1353,6 +1358,25 @@
  text-align: left;
 }

+/* Clickable time toggle with swap indicator */
+.player-time-toggle {
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 4px;
+  border-radius: 4px;
+  transition: background-color 0.15s, color 0.15s;
+}
+
+.player-time-toggle:hover {
+  background-color: var(--surface-hover, rgba(128, 128, 128, 0.2));
+  color: var(--text-primary);
+}
+
+.player-time-toggle:active {
+  background-color: var(--surface-active, rgba(128, 128, 128, 0.3));
+}
+
 /* Volume section */
 .player-volume-section {
  display: flex;
@@ -1701,6 +1725,66 @@
  text-overflow: ellipsis;
 }

+/* Two-line layout: base info + RG badge on top, optional ReplayGain
+   values underneath when the badge is expanded. The stack wraps both
+   rows so the source icon stays vertically centered next to the whole
+   text block. */
+.queue-current-tech-stack {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1px;
+}
+
+.queue-current-tech-row {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+}
+
+/* Pill-shaped toggle that signals "this track has ReplayGain metadata"
+   without committing screen space to the numbers — values appear in the
+   tooltip and on the second line when expanded. */
+.queue-current-tech-rg-badge {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 1px 5px 1px 6px;
+  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
+  background: color-mix(in srgb, var(--accent) 12%, transparent);
+  color: var(--accent);
+  border-radius: 999px;
+  font: inherit;
+  font-size: 8px;
+  letter-spacing: 0.06em;
+  cursor: pointer;
+  transition: background 0.12s, border-color 0.12s, transform 0.12s;
+}
+.queue-current-tech-rg-badge:hover {
+  background: color-mix(in srgb, var(--accent) 22%, transparent);
+  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
+}
+.queue-current-tech-rg-badge svg {
+  transition: transform 0.18s ease;
+}
+.queue-current-tech-rg-badge--open svg {
+  transform: rotate(180deg);
+}
+
+.queue-current-tech-rg {
+  min-width: 0;
+  max-width: 100%;
+  font-size: 8px;
+  opacity: 0.72;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .queue-divider {
  padding: var(--space-3) var(--space-4) 0;
  flex-shrink: 0;
@@ -4584,9 +4584,10 @@ input[type="range"]:hover::-webkit-slider-thumb {
  --accent-glow: rgba(69, 255, 0, 0.45);
  --text-primary: #ffffff;
  --text-secondary: #dce8ff;
-  --text-muted: #b8d0f8;
-  /* lighter so readable on #3a62a5 */
-  --border: #2a5090;
+  --text-muted: #e8f0ff;
+  /* lifted from #b8d0f8 — clears AA on Luna-blue bg-app and dark sidebar */
+  --border: #071027;
+  /* darkened from #2a5090 to meet 3:1 UI threshold on all main surfaces */
  --border-subtle: #4a72b8;
  --positive: #30dd00;
  --warning: #ffdd44;
@@ -10780,11 +10781,13 @@ input[type="range"]:hover::-webkit-slider-thumb {
  --accent-glow: rgba(21, 101, 200, 0.40);
  --text-primary: #0d1d3c;
  --text-secondary: #2a4878;
-  --text-muted: #4870a8;
+  --text-muted: #3f6aa0;
+  /* slight lift from #4870a8 to clear AA on bg-card (4.23 → 4.65) */
  --border: rgba(100, 160, 220, 0.45);
  --border-subtle: rgba(140, 190, 240, 0.30);
  --positive: #1a8020;
-  --warning: #c8980c;
+  --warning: #735a00;
+  /* deeper Vista gold — #c8980c was 2.37:1 on bg-app, now 5.91:1 */
  --danger: #c02020;
  --radius-sm: 3px;
  --radius-md: 6px;
@@ -11122,6 +11125,22 @@ input[type="range"]:hover::-webkit-slider-thumb {
  color: #6090b8;
 }

+/* Lyrics pane sits inside the queue panel (bg-sidebar = #0e1e3e deep navy).
+   Default --text-primary / --text-muted are near-navy and invisible there —
+   explicit light tokens get the pane back to AA+. */
+[data-theme='wista'] .lyrics-line,
+[data-theme='wista'] .lyrics-status,
+[data-theme='wista'] .lyrics-word-synced .lyrics-line {
+  color: #aac8f0;
+}
+[data-theme='wista'] .lyrics-line.active,
+[data-theme='wista'] .lyrics-word-synced .lyrics-line.active {
+  color: #ffffff;
+}
+[data-theme='wista'] .lyrics-line.completed {
+  color: #aac8f0;
+}
+
 /* ─────────────────────────────────────────── */

 [data-theme='aqua-quartz'] {
@@ -0,0 +1,121 @@
+import React from 'react';
+import { open } from '@tauri-apps/plugin-shell';
+
+/**
+ * Render inline markdown segments: **bold**, *italic*, `code`, [text](url).
+ * External links open in the user's default browser via the Tauri shell plugin.
+ */
+export function renderInlineMarkdown(text: string, keyPrefix = 'i'): React.ReactNode[] {
+  // Tokenize — order matters: links first (no recursion), then emphasis/code.
+  const tokens: React.ReactNode[] = [];
+  const linkRe = /\[([^\]]+)\]\(([^)]+)\)/g;
+  let lastIndex = 0;
+  let match: RegExpExecArray | null;
+  let i = 0;
+
+  const pushInline = (segment: string) => {
+    const parts = segment.split(/(\*\*[^*]+\*\*|\*[^*]+\*|`[^`]+`)/g);
+    for (const part of parts) {
+      if (!part) continue;
+      if (part.startsWith('**') && part.endsWith('**')) {
+        tokens.push(<strong key={`${keyPrefix}-${i++}`}>{part.slice(2, -2)}</strong>);
+      } else if (part.startsWith('*') && part.endsWith('*') && part.length > 2) {
+        tokens.push(<em key={`${keyPrefix}-${i++}`}>{part.slice(1, -1)}</em>);
+      } else if (part.startsWith('`') && part.endsWith('`')) {
+        tokens.push(<code key={`${keyPrefix}-${i++}`} className="whats-new-code">{part.slice(1, -1)}</code>);
+      } else {
+        tokens.push(part);
+      }
+    }
+  };
+
+  while ((match = linkRe.exec(text)) !== null) {
+    if (match.index > lastIndex) pushInline(text.slice(lastIndex, match.index));
+    const [full, label, url] = match;
+    tokens.push(
+      <a
+        key={`${keyPrefix}-link-${i++}`}
+        href={url}
+        onClick={(e) => { e.preventDefault(); open(url).catch(() => {}); }}
+        className="whats-new-link"
+      >
+        {label}
+      </a>
+    );
+    lastIndex = match.index + full.length;
+  }
+  if (lastIndex < text.length) pushInline(text.slice(lastIndex));
+
+  return tokens;
+}
+
+/**
+ * Render a subset of GitHub-flavored Markdown used by our CHANGELOG: headings
+ * (### / ####), bullets (- / *), blockquotes, horizontal rules, and inline
+ * formatting (bold/italic/code/links).
+ */
+export function renderChangelogBody(body: string): React.ReactNode[] {
+  const lines = body.split('\n');
+  const out: React.ReactNode[] = [];
+  let bulletBuffer: React.ReactNode[] = [];
+  let quoteBuffer: string[] = [];
+
+  const flushBullets = () => {
+    if (bulletBuffer.length === 0) return;
+    out.push(<ul key={`ul-${out.length}`} className="whats-new-list">{bulletBuffer}</ul>);
+    bulletBuffer = [];
+  };
+  const flushQuote = () => {
+    if (quoteBuffer.length === 0) return;
+    out.push(
+      <blockquote key={`q-${out.length}`} className="whats-new-quote">
+        {renderInlineMarkdown(quoteBuffer.join(' '), `q-${out.length}`)}
+      </blockquote>
+    );
+    quoteBuffer = [];
+  };
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    const trimmed = line.trim();
+
+    if (trimmed === '') { flushBullets(); flushQuote(); continue; }
+
+    if (trimmed === '---') {
+      flushBullets(); flushQuote();
+      out.push(<hr key={`hr-${out.length}`} className="whats-new-hr" />);
+      continue;
+    }
+
+    if (line.startsWith('### ')) {
+      flushBullets(); flushQuote();
+      out.push(<h3 key={`h3-${out.length}`} className="whats-new-h3">{renderInlineMarkdown(line.slice(4), `h3-${i}`)}</h3>);
+      continue;
+    }
+    if (line.startsWith('#### ')) {
+      flushBullets(); flushQuote();
+      out.push(<h4 key={`h4-${out.length}`} className="whats-new-h4">{renderInlineMarkdown(line.slice(5), `h4-${i}`)}</h4>);
+      continue;
+    }
+
+    if (line.startsWith('> ')) {
+      flushBullets();
+      quoteBuffer.push(line.slice(2));
+      continue;
+    }
+
+    if (line.startsWith('- ') || line.startsWith('* ')) {
+      flushQuote();
+      bulletBuffer.push(
+        <li key={`li-${i}`}>{renderInlineMarkdown(line.slice(2), `li-${i}`)}</li>
+      );
+      continue;
+    }
+
+    // Paragraph / plain line
+    flushBullets(); flushQuote();
+    out.push(<p key={`p-${i}`} className="whats-new-p">{renderInlineMarkdown(line, `p-${i}`)}</p>);
+  }
+  flushBullets(); flushQuote();
+  return out;
+}
@@ -4,18 +4,22 @@ import { usePlayerStore } from '../store/playerStore';

 export const MINI_WINDOW_LABEL = 'mini';

+export interface MiniTrackInfo {
+  id: string;
+  title: string;
+  artist: string;
+  album: string;
+  albumId?: string;
+  artistId?: string;
+  coverArt?: string;
+  duration?: number;
+  starred?: boolean;
+}
+
 export interface MiniSyncPayload {
-  track: {
-    id: string;
-    title: string;
-    artist: string;
-    album: string;
-    albumId?: string;
-    artistId?: string;
-    coverArt?: string;
-    duration?: number;
-    starred?: boolean;
-  } | null;
+  track: MiniTrackInfo | null;
+  queue: MiniTrackInfo[];
+  queueIndex: number;
  isPlaying: boolean;
  isMobile: false;
 }
@@ -26,21 +30,26 @@ export type MiniControlAction =
  | 'prev'
  | 'show-main';

+function toMini(t: any): MiniTrackInfo {
+  return {
+    id: t.id,
+    title: t.title,
+    artist: t.artist,
+    album: t.album,
+    albumId: t.albumId,
+    artistId: t.artistId,
+    coverArt: t.coverArt,
+    duration: t.duration,
+    starred: !!t.starred,
+  };
+}
+
 function snapshot(): MiniSyncPayload {
  const s = usePlayerStore.getState();
-  const t = s.currentTrack;
  return {
-    track: t ? {
-      id: t.id,
-      title: t.title,
-      artist: t.artist,
-      album: t.album,
-      albumId: t.albumId,
-      artistId: t.artistId,
-      coverArt: t.coverArt,
-      duration: t.duration,
-      starred: !!t.starred,
-    } : null,
+    track: s.currentTrack ? toMini(s.currentTrack) : null,
+    queue: (s.queue ?? []).map(toMini),
+    queueIndex: s.queueIndex ?? 0,
    isPlaying: s.isPlaying,
    isMobile: false,
  };
@@ -61,7 +70,8 @@ export function initMiniPlayerBridgeOnMain(): () => void {
  let last = '';
  const push = () => {
    const payload = snapshot();
-    const key = `${payload.track?.id ?? ''}|${payload.isPlaying}|${payload.track?.starred ?? ''}`;
+    const queueIds = payload.queue.map(q => q.id).join(',');
+    const key = `${payload.track?.id ?? ''}|${payload.isPlaying}|${payload.track?.starred ?? ''}|${payload.queueIndex}|${queueIds}`;
    if (key === last) return;
    last = key;
    emitTo(MINI_WINDOW_LABEL, 'mini:sync', payload).catch(() => {});
@@ -70,7 +80,9 @@ export function initMiniPlayerBridgeOnMain(): () => void {
  const unsub = usePlayerStore.subscribe((state, prev) => {
    if (state.currentTrack?.id !== prev.currentTrack?.id
      || state.isPlaying !== prev.isPlaying
-      || state.currentTrack?.starred !== prev.currentTrack?.starred) {
+      || state.currentTrack?.starred !== prev.currentTrack?.starred
+      || state.queueIndex !== prev.queueIndex
+      || state.queue !== prev.queue) {
      push();
    }
  });
@@ -99,9 +111,67 @@ export function initMiniPlayerBridgeOnMain(): () => void {
    }
  });

+  // Jump to a specific queue index.
+  const jumpUnlisten = listen<{ index: number }>('mini:jump', (e) => {
+    const store = usePlayerStore.getState();
+    const idx = e.payload?.index ?? -1;
+    if (idx < 0 || idx >= store.queue.length) return;
+    const track = store.queue[idx];
+    if (track) store.playTrack(track, store.queue, true);
+  });
+
+  // PsyDnD reorder forwarded from the mini queue.
+  const reorderUnlisten = listen<{ from: number; to: number }>('mini:reorder', (e) => {
+    const store = usePlayerStore.getState();
+    const { from, to } = e.payload ?? { from: -1, to: -1 };
+    if (from < 0 || from >= store.queue.length) return;
+    if (to < 0 || to > store.queue.length) return;
+    if (from === to) return;
+    store.reorderQueue(from, to);
+  });
+
+  // Remove a track at index (context menu → "Remove from queue").
+  const removeUnlisten = listen<{ index: number }>('mini:remove', (e) => {
+    const store = usePlayerStore.getState();
+    const idx = e.payload?.index ?? -1;
+    if (idx < 0 || idx >= store.queue.length) return;
+    store.removeTrack(idx);
+  });
+
+  // Navigate the main app to a route. Used by mini context menu actions
+  // like "Open Album" / "Go to Artist" — those need the full main UI.
+  const navigateUnlisten = listen<{ to: string }>('mini:navigate', (e) => {
+    const to = e.payload?.to;
+    if (!to) return;
+    // Surface the main window first so the navigation is visible.
+    const w = getCurrentWindow();
+    w.unminimize().catch(() => {});
+    w.show().catch(() => {});
+    w.setFocus().catch(() => {});
+    // React Router lives in main; route via a custom event the AppShell
+    // picks up (defined in App.tsx).
+    window.dispatchEvent(new CustomEvent('psy:navigate', { detail: { to } }));
+  });
+
+  // Open the SongInfo modal in main for a given track id.
+  const songInfoUnlisten = listen<{ id: string }>('mini:song-info', (e) => {
+    const id = e.payload?.id;
+    if (!id) return;
+    const w = getCurrentWindow();
+    w.unminimize().catch(() => {});
+    w.show().catch(() => {});
+    w.setFocus().catch(() => {});
+    usePlayerStore.getState().openSongInfo(id);
+  });
+
  return () => {
    unsub();
    readyUnlisten.then(fn => fn()).catch(() => {});
    controlUnlisten.then(fn => fn()).catch(() => {});
+    jumpUnlisten.then(fn => fn()).catch(() => {});
+    reorderUnlisten.then(fn => fn()).catch(() => {});
+    removeUnlisten.then(fn => fn()).catch(() => {});
+    navigateUnlisten.then(fn => fn()).catch(() => {});
+    songInfoUnlisten.then(fn => fn()).catch(() => {});
  };
 }
Author	SHA1	Message	Date
Psychotoxical	c17fc0f6ac	chore(release): v1.42.0 Consolidates everything since v1.40.0 (public) into one coherent release. v1.41.0 remains as an internal Draft on GitHub that was used to verify the Cachix substituter pipeline and never went public — this release folds its intended contents in and adds the mini-player feature work, the player-bar time toggle (kveld9), the ReplayGain expand badge and related UX polish on top. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	2026-04-19 13:40:57 +02:00
Psychotoxical	16491f6321	feat(mini-player): custom titlebar with action icons; cover/meta/controls layout polish - Drop the native titlebar on Windows + Linux (decorations: false in open_mini_player); macOS keeps the system titlebar with traffic lights. - Add a slim 26 px custom titlebar with drag region, current track title, and the queue / pin / open-main / close action icons. - Remove the bottom toolbar — those four buttons now live in the titlebar where they're easier to reach. - Refresh the player layout: cover shrinks 112 → 84 px, the right column gets title / artist / transport in a single 84 px-tall block, progress bar spans the full width below. - Add a miniPlayer i18n namespace (showQueue, hideQueue, pinOnTop, pinOff, openMainWindow, close, emptyQueue) localized for all 8 supported locales — previously the tooltips were hard-coded English. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	2026-04-19 13:28:28 +02:00
Psychotoxical	d8244e0139	docs(about): credit kveld9 for player-bar time-toggle (PR #212 )	2026-04-19 13:10:16 +02:00
Psychotoxical	60da17f7cc	feat(mini-player): user-bindable keyboard shortcut to toggle mini player Adds an 'open-mini-player' entry to the in-app keybindings (Settings → Shortcuts), default unbound. Pressing the chord from the main window opens the mini and minimises main; pressing it from the mini hides the mini and restores main — both paths invoke open_mini_player which already handles the toggle. The mini window has its own keydown listener (same pattern as Space / arrows for play/skip) that reads the binding from useKeybindingsStore. Binding changes in main propagate to an open mini through the existing storage-event sync (now also covers psysonic_keybindings) so the user doesn't need to restart the mini after rebinding. Localized in all 8 supported locales. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	2026-04-19 13:05:06 +02:00
Psychotoxical	8cc115cade	fix(mini-player): restore window position + queue-open state across launches Two regressions in the mini player's persistence story: 1. Window position was lost on every reopen. set_position() called on a hidden window is unreliable on Linux WMs (Mutter, KWin re-centre on show). Worse, the WM-induced re-centre fired WindowEvent::Moved with the centre coords, which the throttled persister happily wrote to disk — so the saved position turned into "centre" within seconds. Fix: - Initial open uses WebviewWindowBuilder::position() (logical pixels, scaled via the primary monitor) so the window is created at the right spot. - Re-show path re-applies the saved position with set_position AFTER show(). - Both paths call mark_mini_pos_programmatic() before triggering the move; persist_mini_pos_throttled ignores Moved events within 1 s of a programmatic mark, so WM-induced and self-induced moves no longer overwrite the user's position. 2. The queue panel always opened collapsed regardless of the previous session. Persist queueOpen to localStorage (psysonic_mini_queue_open) and resize the window to the stored expanded height on mount when the saved state was 'open'. Brief jump from 180 px to expanded is unavoidable since localStorage only lives in the JS layer. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	2026-04-19 12:54:00 +02:00
Psychotoxical	e07ef0ebf1	feat(queue): collapse ReplayGain into a click-to-expand badge Per @cucadmuh's feedback: the presence of ReplayGain matters more than the actual numbers. The tech bar now shows a small 'RG' pill on line 1 whenever the track has any RG metadata; hovering reveals the values via tooltip, clicking persistently expands the second line. - Source icon stays inline before the format string (was getting separated from FLAC by the centred stack layout) - Pill uses --accent-tinted color-mix so it adapts to every theme - ChevronDown rotates on expand for a clear affordance - New persisted state: themeStore.expandReplayGain (default collapsed) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	2026-04-19 12:34:52 +02:00
Psychotoxical	6456f13bde	fix(player-bar): contain paint to prevent black-flash on WebKitGTK The player bar occasionally renders fully black for one frame on Linux (WebKitGTK with software compositing) when an unrelated layer elsewhere in the page invalidates. `contain: layout paint` makes the bar its own paint boundary so it can no longer be pulled into a surrounding dirty rect. No-op on Wayland-with-GPU and on Chromium-based webviews (Windows, macOS) — those don't exhibit the flash to begin with. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	2026-04-19 12:28:22 +02:00
Psychotoxical	a48159d302	feat(queue): split tech bar into two lines when ReplayGain is present The tech info strip in the queue header was a single ellipsised line, so ReplayGain values (Track / Album / Peak) got cut off on tracks with a full codec + bitrate + samplerate prefix. Now the strip wraps into two lines whenever RG values exist: - Line 1: codec · bitrate · bit depth/sample rate (unchanged) - Line 2: 'ReplayGain · T … dB · A … dB · Peak …' — slightly smaller and dimmed for hierarchy, ellipsises independently if it still overflows. Tracks without RG metadata stay one line as before. New i18n key `queue.replayGain` ('ReplayGain') added to all 8 locales. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	2026-04-19 12:24:46 +02:00
Psychotoxical	2871db9a96	feat(mini-player): persistent geometry, queue DnD + context menu, overlay scrollbar, live theme sync This iteration fills in the pieces that make the mini player usable as a daily standalone window: - Window position persists to <app_config_dir>/mini_player_pos.json on every WindowEvent::Moved (throttled 250 ms); first launch lands in the bottom-right of the main window's monitor. - Queue keeps a 260 px floor when expanded (~2 visible rows). The user-resized expanded height is restored on next toggle via localStorage so reopening doesn't snap back to the default 440 px. - set_mini_player_always_on_top(true) now forces a false-then-true cycle so the WM re-evaluates the layer after a hide/show; the frontend also re-asserts the pin state on mount and on window focus, so the user no longer has to click the pin button twice for it to stick. - Native scrollbar in the queue is hidden in favour of a JS-driven overlay thumb so items use the full width of the queue area. - PsyDnD reorder works inside the mini queue: drag emits 'mini:reorder', the bridge calls reorderQueue on the source-of-truth store in main. - Localized queue-item context menu (MiniContextMenu) with Play now / Remove from queue / Open album / Go to artist / Favorite / Song info. Cross-window actions forward to main via new bridge events (mini:reorder, mini:remove, mini:navigate, mini:song-info); a psy:navigate CustomEvent picked up by AppShell handles routing. - Theme, font and language changes in main propagate live to the mini via a 'storage' event listener that re-hydrates the persisted Zustand stores and calls i18n.changeLanguage. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	2026-04-19 12:08:05 +02:00
Psychotoxical	42ad24cce1	fix(player-bar): use data-tooltip on time toggle (not native title) Native `title` attribute renders an unstyled OS tooltip and bypasses the TooltipPortal — convention in this codebase is `data-tooltip="…"` so the hover hint matches every other player-bar control. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	2026-04-19 12:04:29 +02:00
Kveld.	eb747ba1ae	introducing timer toggle player bar (#212 )	2026-04-19 12:04:01 +02:00
Psychotoxical	6bd2bfc01c	feat(changelog): replace auto-modal with sidebar banner + /whats-new page Removes the giant startup changelog modal. After an update, a compact neutral-palette pill now sits above Now Playing in the sidebar saying "Changelog — vX.Y.Z". Clicking opens a proper /whats-new page in the main content area; X dismisses. Page renders the current version's CHANGELOG entry with inline Markdown (headings, lists, blockquotes, hr, bold/italic/code, and real [label](url) links that open via the Tauri shell plugin). Visual tokens are hardcoded slate/gray/blue so the banner and page look identical across every theme (dark, light, skeuomorphic, whatever) — requested for consistent contrast. Auto-mark-as-seen removed from the page; the banner only goes away on explicit dismiss, so users can re-read as often as they want. Settings → About gains a "Release notes" row with a link that resets the seen-version and opens the page, so the banner can be retriggered manually (also helpful for dev builds ahead of the current tag). The existing "Show changelog on update" toggle now gates the banner instead of the modal; description strings updated in all 8 locales. fix(themes): WCAG contrast audit — mocha + winmedplayer + wista Mocha (Catppuccin dark) .track-size used --ctp-overlay0 directly (3.36:1 on bg-app, 2.57 on bg-card). Swapped to --text-muted → 7.37 / 5.65. Fix also lifts macchiato/frappe/latte which shared the failure. WinMedPlayer (Luna) --text-muted #b8d0f8 (3.87:1 on bg-app) → #e8f0ff (5.28) --border #2a5090 (1.31 on bg-app) → #071027 (3.12, meets 3:1 UI) Wista (Vista Aero) Lyrics pane sits on bg-sidebar #0e1e3e but used --text-primary (#0d1d3c) for active lines — 1.01:1, literally invisible. Added component overrides: .lyrics-line / .lyrics-status / word-synced variants → #aac8f0 (9.60), .lyrics-line.active → #ffffff (16.48). Palette: --warning #c8980c → #735a00 (2.37 → 5.91 on bg-app), --text-muted #4870a8 → #3f6aa0 (4.23 → 4.65 on bg-card). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	2026-04-19 02:28:45 +02:00
Psychotoxical	b5751c2918	docs(readme): fold Arch/AUR into the Linux install section Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	2026-04-19 01:27:24 +02:00
Psychotoxical	8c050ad297	docs(readme): add AppImage to Linux install options Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	2026-04-19 01:25:56 +02:00
cucadmuh	e2100aedc4	Update README.md (#210 )	2026-04-19 01:21:20 +02:00
Psychotoxical	aa69f360eb	docs(readme): Cachix badge, NixOS feature/install, drop obsolete macOS xattr - Add Cachix badge to the top row linking to psysonic.cachix.org - New NixOS/flakes feature bullet and a dedicated install block with nix run quickstart, system-config hint, Cachix substituter setup, and credit + PR link for @cucadmuh - macOS install block: drop the xattr Gatekeeper workaround (obsolete since v1.40.0 signed + notarized builds); replace with a note on the in-app auto-updater Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	2026-04-19 01:09:36 +02:00
Frank Stellmacher	ee932db8a9	Update README.md	2026-04-19 01:00:42 +02:00
Frank Stellmacher	461a759f0f	Update README.md	2026-04-19 01:00:05 +02:00
Psychotoxical	193a37cf0c	docs(about): credit cucadmuh for ArtistCardLocal i18n + NixOS guide Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	2026-04-19 00:51:54 +02:00
cucadmuh	65a46bdd0f	docs(nix): add NixOS flake install guide (#209 ) Document NixOS/Home Manager installation from the upstream flake, including Cachix substituter/key configuration, apply commands, and pinning. Also add a README Linux note linking to the new NixOS guide.	2026-04-19 00:50:42 +02:00
Psychotoxical	0afcc4ab68	feat(mini-player): expandable queue + UX polish Adds a queue panel that toggles via a new toolbar button and resizes the mini window between 340×180 (collapsed) and 340×440 (expanded). Tracks in the queue are clickable — click jumps to that index via a new mini:jump event handled in the main-window bridge. The current track auto-scrolls into view when the queue opens. Resize uses a new resize_mini_player Rust command (more reliable than JS setSize, which was silently no-op'ing because the core:window:allow-set-size capability was missing). That capability is now granted as well. The mini player hydrates its initial state from the persisted playerStore, so real content (cover, title, artist, queue) shows as soon as React mounts instead of "—" while we wait for the first mini:sync. Dynamic state (isPlaying, progress) still comes from events. Window sizing: - inner_size bumped to 340×180 so the toolbar row isn't clipped - mini label added to tauri-plugin-window-state denylist so old saved sizes don't come back - show_main_window now also hides the mini — clicking expand no longer leaves both windows on screen Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	2026-04-19 00:46:28 +02:00