chore(release): v1.41.0

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

.github/workflows/release.yml

@@ -281,7 +281,15 @@ jobs:
         run: nix flake update --accept-flake-config
 
       - name: verify nix build + push to Cachix
-        run: nix build .#psysonic --accept-flake-config --no-link --print-build-logs
+        run: |
+          set -euo pipefail
+          nix build .#psysonic --accept-flake-config --no-link --print-build-logs
+          # The cachix-action daemon writes a post-build-hook into the user
+          # nix.conf, but the Determinate Nix daemon that runs the builds reads
+          # the system nix.conf — so the hook never fires and only a couple of
+          # early prep paths get uploaded. Force an explicit closure push here;
+          # cachix dedupes against anything already in the cache.
+          nix path-info --recursive .#psysonic | cachix push psysonic
 
       - name: commit + push refreshed lock and hash (if changed)
         run: |

CHANGELOG.md

@@ -13,6 +13,44 @@ 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
+
+### 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.
+
+- **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.
+
+- **Compilation filter on All Albums** *(Issue [#65](https://github.com/Psychotoxical/psysonic/issues/65), by [@Psychotoxical](https://github.com/Psychotoxical))*: A tri-state toggle in the Albums page header (All / Only compilations / Hide compilations) that reads the OpenSubsonic `isCompilation` tag exposed by Navidrome 0.61+. Client-side filter, no additional server calls. Translated into all 8 supported locales.
+
+- **Sticky header on Albums, New Releases, Artists** *(by [@Psychotoxical](https://github.com/Psychotoxical))*: The header row with search/sort/genre/year controls now pins to the top while scrolling, so filters stay reachable without jumping back up. Works the same on all three browse pages.
+
+- **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.
+
+### 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.
+
+- **Year filter — portal popover** *(by [@Psychotoxical](https://github.com/Psychotoxical))*: The From/To number inputs in the Albums header became a single button with a popover mirroring the genre filter pattern. When the filter is active, the button shows the range (e.g. `2020–2024`) in accent colour.
+
+- **Sort picker — portal dropdown** *(by [@Psychotoxical](https://github.com/Psychotoxical))*: The two sort buttons on Albums (`A–Z (Album)`, `A–Z (Artist)`) collapse into one dropdown button showing the current choice. Generic `SortDropdown` component, reusable for other pages.
+
+- **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.
+
+### Fixed
+
+- **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.
+
+- **Release CI — Cachix never receiving the psysonic closure** *(by [@Psychotoxical](https://github.com/Psychotoxical))*: `cachix-action` installs its post-build hook via `NIX_USER_CONF_FILES`, but the Determinate Nix daemon that runs the actual builds reads the system nix.conf — so the hook never fired. Only a couple of early prep paths ever reached the cache, never the compiled `psysonic` output. The release workflow now pushes the full closure explicitly after `nix build`; Cachix dedupes against paths already present, so redundancy is cheap.
+
+### Contributors
+
+- [@cucadmuh](https://github.com/cucadmuh) — i18n fix for ArtistCardLocal.
+
+---
+
 ## [1.40.0] - 2026-04-18
 
 ### Added

package.json

@@ -1,6 +1,6 @@
 {
   "name": "psysonic",
-  "version": "1.40.0",
+  "version": "1.41.0",
   "private": true,
   "scripts": {
     "dev": "vite",

packages/aur/PKGBUILD

@@ -1,6 +1,6 @@
 # Maintainer: Psychotoxic <psychotoxic@gmx.de>
 pkgname=psysonic
-pkgver=1.40.0
+pkgver=1.41.0
 pkgrel=1
 pkgdesc="Desktop music player for Subsonic API-compatible servers (Navidrome, Gonic, etc.)"
 arch=('x86_64')

src-tauri/Cargo.lock

@@ -3653,7 +3653,7 @@ dependencies = [
 
 [[package]]
 name = "psysonic"
-version = "1.40.0"
+version = "1.41.0"
 dependencies = [
  "biquad",
  "discord-rich-presence",
@@ -6186,11 +6186,11 @@ checksum = "ccf3ec651a847eb01de73ccad15eb7d99f80485de043efb2f370cd654f4ea44b"
 
 [[package]]
 name = "wasip2"
-version = "1.0.2+wasi-0.2.9"
+version = "1.0.3+wasi-0.2.9"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9517f9239f02c069db75e65f174b3da828fe5f5b945c4dd26bd25d89c03ebcf5"
+checksum = "20064672db26d7cdc89c7798c48a0fdfac8213434a1186e5ef29fd560ae223d6"
 dependencies = [
- "wit-bindgen",
+ "wit-bindgen 0.57.1",
 ]
 
 [[package]]
@@ -6199,7 +6199,7 @@ version = "0.4.0+wasi-0.3.0-rc-2026-01-06"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "5428f8bf88ea5ddc08faddef2ac4a67e390b88186c703ce6dbd955e1c145aca5"
 dependencies = [
- "wit-bindgen",
+ "wit-bindgen 0.51.0",
 ]
 
 [[package]]
@@ -6339,9 +6339,9 @@ dependencies = [
 
 [[package]]
 name = "web_atoms"
-version = "0.2.3"
+version = "0.2.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "57a9779e9f04d2ac1ce317aee707aa2f6b773afba7b931222bff6983843b1576"
+checksum = "d7cff6eef815df1834fd250e3a2ff436044d82a9f1bc1980ca1dbdf07effc538"
 dependencies = [
  "phf 0.13.1",
  "phf_codegen 0.13.1",
@@ -7139,6 +7139,12 @@ dependencies = [
  "wit-bindgen-rust-macro",
 ]
 
+[[package]]
+name = "wit-bindgen"
+version = "0.57.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1ebf944e87a7c253233ad6766e082e3cd714b5d03812acc24c318f549614536e"
+
 [[package]]
 name = "wit-bindgen-core"
 version = "0.51.0"

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "psysonic"
-version = "1.40.0"
+version = "1.41.0"
 description = "Psysonic Desktop Music Player"
 authors = []
 license = ""

src-tauri/capabilities/default.json

@@ -3,7 +3,7 @@
   "identifier": "default",
   "description": "Default capabilities for Psysonic",
   "platforms": ["linux", "macOS", "windows"],
-  "windows": ["main"],
+  "windows": ["main", "mini"],
   "permissions": [
     "core:default",
     "shell:default",

src-tauri/src/lib.rs

@@ -2432,11 +2432,26 @@ fn build_tray_icon(app: &tauri::AppHandle) -> tauri::Result<TrayIcon> {
             _ => {}
         })
         .on_tray_icon_event(|tray, event| {
-            if let TrayIconEvent::Click {
-                button: MouseButton::Left,
-                button_state: MouseButtonState::Up,
-                ..
-            } = event {
+            // Windows fires a Click on *every* half of a double-click, so a
+            // double-click would toggle the window visibility twice and end up
+            // back where it started (the bug #cucadmuh reported). Switch to the
+            // Windows-only DoubleClick event there and ignore single clicks;
+            // that matches the standard Windows tray convention (Discord, etc).
+            #[cfg(target_os = "windows")]
+            let should_toggle = matches!(
+                event,
+                TrayIconEvent::DoubleClick { button: MouseButton::Left, .. }
+            );
+            #[cfg(not(target_os = "windows"))]
+            let should_toggle = matches!(
+                event,
+                TrayIconEvent::Click {
+                    button: MouseButton::Left,
+                    button_state: MouseButtonState::Up,
+                    ..
+                }
+            );
+            if should_toggle {
                 let app = tray.app_handle();
                 if let Some(win) = app.get_webview_window("main") {
                     if win.is_visible().unwrap_or(false) {
@@ -2582,6 +2597,103 @@ fn is_tiling_wm_cmd() -> bool {
     }
 }
 
+// ── Mini Player window ──────────────────────────────────────────────────────
+// Secondary always-on-top window with minimal playback controls. Uses the
+// same frontend bundle as the main window; disambiguated by window label
+// "mini". On tiling WMs (Hyprland, Sway, i3, …) always-on-top is ignored, so
+// we fall back to a regular window there.
+
+/// 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
+/// restores the main window.
+#[tauri::command]
+fn open_mini_player(app: tauri::AppHandle) -> Result<(), String> {
+    if let Some(win) = app.get_webview_window("mini") {
+        let visible = win.is_visible().unwrap_or(false);
+        if visible {
+            win.hide().map_err(|e| e.to_string())?;
+            if let Some(main) = app.get_webview_window("main") {
+                let _ = main.unminimize();
+                let _ = main.show();
+                let _ = main.set_focus();
+            }
+        } else {
+            win.show().map_err(|e| e.to_string())?;
+            let _ = win.set_focus();
+            if let Some(main) = app.get_webview_window("main") {
+                let _ = main.minimize();
+            }
+        }
+        return Ok(());
+    }
+
+    let use_always_on_top = {
+        #[cfg(target_os = "linux")]
+        { !is_tiling_wm() }
+        #[cfg(not(target_os = "linux"))]
+        { true }
+    };
+
+    let win = 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)
+    .resizable(true)
+    .decorations(true)
+    .always_on_top(use_always_on_top)
+    .skip_taskbar(false)
+    .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") {
+        let _ = main.minimize();
+    }
+    Ok(())
+}
+
+/// Hide the mini player window if it exists and restore the main window.
+/// Does not destroy the mini window so its state is preserved for next open.
+#[tauri::command]
+fn close_mini_player(app: tauri::AppHandle) -> Result<(), String> {
+    if let Some(win) = app.get_webview_window("mini") {
+        win.hide().map_err(|e| e.to_string())?;
+    }
+    if let Some(main) = app.get_webview_window("main") {
+        let _ = main.unminimize();
+        let _ = main.show();
+        let _ = main.set_focus();
+    }
+    Ok(())
+}
+
+/// 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.
+#[tauri::command]
+fn show_main_window(app: tauri::AppHandle) -> Result<(), String> {
+    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())?;
+        main.set_focus().map_err(|e| e.to_string())?;
+    }
+    Ok(())
+}
+
+/// Toggle always-on-top on the mini player window.
+#[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") {
+        win.set_always_on_top(on_top).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")]
@@ -2779,6 +2891,16 @@ pub fn run() {
                         // Let JS decide: minimize to tray or exit, based on user setting.
                         let _ = window.emit("window:close-requested", ());
                     }
+                } else if window.label() == "mini" {
+                    // Native close on the mini: hide instead of destroying so
+                    // state is preserved, and restore the main window.
+                    api.prevent_close();
+                    let _ = window.hide();
+                    if let Some(main) = window.app_handle().get_webview_window("main") {
+                        let _ = main.unminimize();
+                        let _ = main.show();
+                        let _ = main.set_focus();
+                    }
                 }
             }
         })
@@ -2794,6 +2916,10 @@ pub fn run() {
             set_linux_webkit_smooth_scrolling,
             no_compositing_mode,
             is_tiling_wm_cmd,
+            open_mini_player,
+            close_mini_player,
+            set_mini_player_always_on_top,
+            show_main_window,
             register_global_shortcut,
             unregister_global_shortcut,
             mpris_set_metadata,

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "Psysonic",
-  "version": "1.40.0",
+  "version": "1.41.0",
   "identifier": "dev.psysonic.player",
   "build": {
     "beforeDevCommand": "npm run dev",

src/App.tsx

@@ -38,6 +38,8 @@ import InternetRadio from './pages/InternetRadio';
 import FolderBrowser from './pages/FolderBrowser';
 import DeviceSync from './pages/DeviceSync';
 import NowPlayingPage from './pages/NowPlaying';
+import MiniPlayer from './components/MiniPlayer';
+import { initMiniPlayerBridgeOnMain } from './utils/miniPlayerBridge';
 import FullscreenPlayer from './components/FullscreenPlayer';
 import ContextMenu from './components/ContextMenu';
 import SongInfoModal from './components/SongInfoModal';
@@ -325,6 +327,20 @@ function AppShell() {
     };
   }, []);
 
+  // Pause CSS animations when the window is minimized / hidden.
+  // WebView2 on Windows keeps compositing infinite-loop animations (mesh-aura,
+  // portrait-drift, eq-bounce, …) even when the app is minimized, which shows
+  // up as steady GPU usage. The CSS rule `html[data-app-hidden="true"]` in
+  // components.css pauses all running animations while this flag is set.
+  useEffect(() => {
+    const update = () => {
+      document.documentElement.dataset.appHidden = document.hidden ? 'true' : 'false';
+    };
+    document.addEventListener('visibilitychange', update);
+    update();
+    return () => document.removeEventListener('visibilitychange', update);
+  }, []);
+
   const isMobilePlayer = isMobile && location.pathname === '/now-playing';
 
   return (
@@ -930,6 +946,12 @@ export default function App() {
   const font = useFontStore(s => s.font);
   const [exportPickerOpen, setExportPickerOpen] = useState(false);
 
+  // Mini Player window: detected via Tauri window label. Rendered without
+  // router / sidebar / full audio listeners — it just listens for state + sends
+  // control events. Label is read synchronously from a global set in main.tsx
+  // so the initial render picks the right tree.
+  const isMiniWindow = typeof window !== 'undefined' && (window as any).__PSY_WINDOW_LABEL__ === 'mini';
+
   useEffect(() => {
     document.documentElement.setAttribute('data-theme', effectiveTheme);
   }, [effectiveTheme]);
@@ -938,6 +960,16 @@ export default function App() {
     document.documentElement.setAttribute('data-font', font);
   }, [font]);
 
+  // Main window only: push playback state to mini window + handle control events.
+  useEffect(() => {
+    if (isMiniWindow) return;
+    return initMiniPlayerBridgeOnMain();
+  }, [isMiniWindow]);
+
+  if (isMiniWindow) {
+    return <MiniPlayer />;
+  }
+
   // UI scaling is scoped to .main-content via an inner wrapper (see <main>
   // below). Sidebar, queue, player bar and (Linux) custom title bar stay 1:1
   // because they live in separate grid cells. Document-level zoom is not used

src/api/subsonic.ts

@@ -71,6 +71,8 @@ export interface SubsonicAlbum {
   created?: string;
   /** Present on some servers (e.g. OpenSubsonic) for album-level rating. */
   userRating?: number;
+  /** OpenSubsonic: true when the album is tagged as a compilation. */
+  isCompilation?: boolean;
 }
 
 /** OpenSubsonic `artists` / `albumArtists` entries on a child song (may include `userRating`). */

src/components/ArtistCardLocal.tsx

@@ -2,6 +2,7 @@ import React, { useMemo } from 'react';
 import { SubsonicArtist, buildCoverArtUrl, coverArtCacheKey } from '../api/subsonic';
 import { useNavigate } from 'react-router-dom';
 import { Users } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
 import CachedImage from './CachedImage';
 
 interface Props {
@@ -9,6 +10,7 @@ interface Props {
 }
 
 export default function ArtistCardLocal({ artist }: Props) {
+  const { t } = useTranslation();
   const navigate = useNavigate();
   const coverId = artist.coverArt || artist.id;
   // buildCoverArtUrl generates a new crypto salt on every call — must be
@@ -38,7 +40,7 @@ export default function ArtistCardLocal({ artist }: Props) {
         <span className="artist-card-name">{artist.name}</span>
         {typeof artist.albumCount === 'number' && (
           <span className="artist-card-meta">
-            {artist.albumCount} {artist.albumCount === 1 ? 'Album' : 'Alben'}
+            {t('artists.albumCount', { count: artist.albumCount })}
           </span>
         )}
       </div>

src/components/FullscreenPlayer.tsx

@@ -502,8 +502,9 @@ interface FsLyricsMenuProps {
   open: boolean;
   onClose: () => void;
   accentColor: string | null;
+  triggerRef?: React.RefObject<HTMLElement | null>;
 }
-const FsLyricsMenu = memo(function FsLyricsMenu({ open, onClose, accentColor }: FsLyricsMenuProps) {
+const FsLyricsMenu = memo(function FsLyricsMenu({ open, onClose, accentColor, triggerRef }: FsLyricsMenuProps) {
   const { t } = useTranslation();
   const showLyrics  = useAuthStore(s => s.showFullscreenLyrics);
   const lyricsStyle = useAuthStore(s => s.fsLyricsStyle);
@@ -512,13 +513,16 @@ const FsLyricsMenu = memo(function FsLyricsMenu({ open, onClose, accentColor }:
   const panelRef    = useRef<HTMLDivElement>(null);
 
   // Close on click outside the panel or on Escape.
-  // setTimeout(0) defers listener registration past the current click cycle
-  // so the button click that opens the panel doesn't immediately close it.
+  // Ignore clicks on the trigger button so re-clicking it toggles normally
+  // instead of outside-handler closing + click re-opening.
   useEffect(() => {
     if (!open) return;
     const onKey   = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
     const onMouse = (e: MouseEvent) => {
-      if (panelRef.current && !panelRef.current.contains(e.target as Node)) onClose();
+      const target = e.target as Node;
+      if (panelRef.current?.contains(target)) return;
+      if (triggerRef?.current?.contains(target)) return;
+      onClose();
     };
     window.addEventListener('keydown', onKey);
     const t = setTimeout(() => window.addEventListener('mousedown', onMouse), 0);
@@ -527,7 +531,7 @@ const FsLyricsMenu = memo(function FsLyricsMenu({ open, onClose, accentColor }:
       window.removeEventListener('keydown', onKey);
       window.removeEventListener('mousedown', onMouse);
     };
-  }, [open, onClose]);
+  }, [open, onClose, triggerRef]);
 
   if (!open) return null;
 
@@ -702,6 +706,7 @@ export default function FullscreenPlayer({ onClose }: FullscreenPlayerProps) {
   // Lyrics settings popover state
   const [lyricsMenuOpen, setLyricsMenuOpen] = useState(false);
   const closeLyricsMenu = useCallback(() => setLyricsMenuOpen(false), []);
+  const lyricsMenuTriggerRef = useRef<HTMLButtonElement>(null);
 
   // Idle-fade system — hides controls after 3 s of inactivity
   const [isIdle, setIsIdle] = useState(false);
@@ -838,8 +843,9 @@ export default function FullscreenPlayer({ onClose }: FullscreenPlayerProps) {
             </button>
           )}
           <div style={{ position: 'relative', zIndex: 9 }}>
-            <FsLyricsMenu open={lyricsMenuOpen} onClose={closeLyricsMenu} accentColor={dynamicAccent} />
+            <FsLyricsMenu open={lyricsMenuOpen} onClose={closeLyricsMenu} accentColor={dynamicAccent} triggerRef={lyricsMenuTriggerRef} />
             <button
+              ref={lyricsMenuTriggerRef}
               className={`fs-btn fs-btn-sm${lyricsMenuOpen ? ' active' : ''}`}
               onClick={() => setLyricsMenuOpen(v => !v)}
               aria-label={t('player.fsLyricsToggle')}

src/components/GenreFilterBar.tsx

@@ -1,5 +1,6 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { Filter, X } from 'lucide-react';
+import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { Check, Filter, X } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { getGenres } from '../api/subsonic';
 
@@ -13,8 +14,10 @@ export default function GenreFilterBar({ selected, onSelectionChange }: GenreFil
   const [open, setOpen] = useState(false);
   const [genres, setGenres] = useState<string[]>([]);
   const [search, setSearch] = useState('');
-  const [dropdownOpen, setDropdownOpen] = useState(false);
-  const containerRef = useRef<HTMLDivElement>(null);
+  const [popStyle, setPopStyle] = useState<React.CSSProperties>({});
+
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const popRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
@@ -23,124 +26,178 @@ export default function GenreFilterBar({ selected, onSelectionChange }: GenreFil
     );
   }, []);
 
-  // close dropdown on outside click
-  useEffect(() => {
-    const handler = (e: MouseEvent) => {
-      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
-        setDropdownOpen(false);
-      }
-    };
-    document.addEventListener('mousedown', handler);
-    return () => document.removeEventListener('mousedown', handler);
-  }, []);
+  const selectedSet = useMemo(() => new Set(selected), [selected]);
 
-  // sync open state with selection
-  useEffect(() => {
-    if (selected.length > 0) setOpen(true);
-  }, [selected]);
+  // Selected on top, then alphabetical (stable for comfortable scanning).
+  const sortedGenres = useMemo(() => {
+    const arr = [...genres];
+    arr.sort((a, b) => {
+      const sa = selectedSet.has(a) ? 0 : 1;
+      const sb = selectedSet.has(b) ? 0 : 1;
+      if (sa !== sb) return sa - sb;
+      return a.localeCompare(b);
+    });
+    return arr;
+  }, [genres, selectedSet]);
 
-  const filteredOptions = genres.filter(
-    g => !selected.includes(g) && g.toLowerCase().includes(search.toLowerCase())
-  );
+  const filteredGenres = useMemo(() => {
+    const q = search.trim().toLowerCase();
+    if (!q) return sortedGenres;
+    return sortedGenres.filter(g => g.toLowerCase().includes(q));
+  }, [sortedGenres, search]);
 
-  const add = (genre: string) => {
-    onSelectionChange([...selected, genre]);
-    setSearch('');
-    inputRef.current?.focus();
+  const updatePopStyle = () => {
+    if (!triggerRef.current) return;
+    const rect = triggerRef.current.getBoundingClientRect();
+    const MARGIN = 6;
+    const WIDTH = 280;
+    const MAX_H = 360;
+    const spaceBelow = window.innerHeight - rect.bottom - MARGIN;
+    const spaceAbove = rect.top - MARGIN;
+    const useAbove = spaceBelow < 160 && spaceAbove > spaceBelow;
+    const left = Math.min(
+      Math.max(rect.left, 8),
+      window.innerWidth - WIDTH - 8,
+    );
+    setPopStyle({
+      position: 'fixed',
+      left,
+      width: WIDTH,
+      ...(useAbove
+        ? { bottom: window.innerHeight - rect.top + MARGIN }
+        : { top: rect.bottom + MARGIN }),
+      maxHeight: Math.min(MAX_H, useAbove ? spaceAbove : spaceBelow),
+      zIndex: 99998,
+    });
   };
 
-  const remove = (genre: string) => {
-    onSelectionChange(selected.filter(s => s !== genre));
+  useLayoutEffect(() => {
+    if (!open) return;
+    updatePopStyle();
+    setTimeout(() => inputRef.current?.focus(), 0);
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onResize = () => updatePopStyle();
+    window.addEventListener('resize', onResize);
+    window.addEventListener('scroll', onResize, true);
+    return () => {
+      window.removeEventListener('resize', onResize);
+      window.removeEventListener('scroll', onResize, true);
+    };
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onDown = (e: MouseEvent) => {
+      if (
+        !triggerRef.current?.contains(e.target as Node) &&
+        !popRef.current?.contains(e.target as Node)
+      ) setOpen(false);
+    };
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') setOpen(false); };
+    document.addEventListener('mousedown', onDown);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('mousedown', onDown);
+      document.removeEventListener('keydown', onKey);
+    };
+  }, [open]);
+
+  const toggle = (genre: string) => {
+    if (selectedSet.has(genre)) onSelectionChange(selected.filter(s => s !== genre));
+    else onSelectionChange([...selected, genre]);
   };
 
   const clear = () => {
     onSelectionChange([]);
     setSearch('');
-    setOpen(false);
-    setDropdownOpen(false);
   };
 
-  const openFilter = () => {
-    setOpen(true);
-    setTimeout(() => { inputRef.current?.focus(); setDropdownOpen(true); }, 30);
-  };
-
-  if (!open) {
-    return (
-      <button className="btn btn-surface" onClick={openFilter} style={{ display: 'flex', alignItems: 'center', gap: '0.4rem' }}>
-        <Filter size={14} />
-        {t('common.filterGenre')}
-      </button>
-    );
-  }
-
-  const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {
-    // relatedTarget is the next focused element; if it's outside our container, handle close
-    const next = e.relatedTarget as Node | null;
-    if (containerRef.current && next && containerRef.current.contains(next)) return;
-    setTimeout(() => {
-      if (selected.length === 0) {
-        setOpen(false);
-        setSearch('');
-        setDropdownOpen(false);
-      } else {
-        setDropdownOpen(false);
-      }
-    }, 150);
-  };
+  const count = selected.length;
 
   return (
-    <div ref={containerRef} onBlur={handleBlur} style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', flexWrap: 'wrap' }}>
-      <Filter size={14} style={{ color: 'var(--accent)', flexShrink: 0 }} />
+    <>
+      <button
+        ref={triggerRef}
+        type="button"
+        className={`btn btn-surface${count > 0 ? ' btn-sort-active' : ''}`}
+        onClick={() => setOpen(v => !v)}
+        aria-haspopup="dialog"
+        aria-expanded={open}
+        style={{ display: 'flex', alignItems: 'center', gap: '0.4rem' }}
+      >
+        <Filter size={14} />
+        {t('common.filterGenre')}
+        {count > 0 && <span className="genre-filter-count">{count}</span>}
+      </button>
 
-      <div className="genre-filter-tagbox">
-        {selected.map(g => (
-          <span key={g} className="genre-filter-chip">
-            {g}
-            <button onClick={() => remove(g)} aria-label={`Remove ${g}`}>
-              <X size={11} />
-            </button>
-          </span>
-        ))}
+      {open && createPortal(
+        <div
+          ref={popRef}
+          className="genre-filter-popover"
+          style={popStyle}
+          role="dialog"
+        >
+          <div className="genre-filter-popover__search">
+            <input
+              ref={inputRef}
+              type="text"
+              placeholder={t('common.filterSearchGenres')}
+              value={search}
+              onChange={e => setSearch(e.target.value)}
+              onKeyDown={e => {
+                if (e.key === 'Enter' && filteredGenres.length > 0) {
+                  toggle(filteredGenres[0]);
+                }
+              }}
+            />
+          </div>
 
-        <input
-          ref={inputRef}
-          className="genre-filter-input"
-          placeholder={selected.length === 0 ? t('common.filterSearchGenres') : ''}
-          value={search}
-          onChange={e => { setSearch(e.target.value); setDropdownOpen(true); }}
-          onFocus={() => setDropdownOpen(true)}
-          onKeyDown={e => {
-            if (e.key === 'Escape') { setDropdownOpen(false); e.currentTarget.blur(); }
-            if (e.key === 'Backspace' && search === '' && selected.length > 0) {
-              remove(selected[selected.length - 1]);
-            }
-          }}
-        />
-
-        {dropdownOpen && filteredOptions.length > 0 && (
-          <div className="genre-filter-dropdown" onWheel={e => e.stopPropagation()}>
-            {filteredOptions.slice(0, 60).map(g => (
-              <div key={g} className="genre-filter-option" onMouseDown={() => add(g)}>
-                {g}
+          <div className="genre-filter-popover__list">
+            {filteredGenres.length === 0 ? (
+              <div className="genre-filter-popover__empty">
+                {t('common.filterNoGenres')}
               </div>
-            ))}
+            ) : (
+              filteredGenres.map(g => {
+                const isSel = selectedSet.has(g);
+                return (
+                  <div
+                    key={g}
+                    className={`genre-filter-popover__option${isSel ? ' genre-filter-popover__option--selected' : ''}`}
+                    onClick={() => toggle(g)}
+                    role="option"
+                    aria-selected={isSel}
+                  >
+                    <span className="genre-filter-popover__check">
+                      {isSel && <Check size={12} strokeWidth={3} />}
+                    </span>
+                    <span style={{ flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                      {g}
+                    </span>
+                  </div>
+                );
+              })
+            )}
           </div>
-        )}
 
-        {dropdownOpen && filteredOptions.length === 0 && search.length > 0 && (
-          <div className="genre-filter-dropdown" onWheel={e => e.stopPropagation()}>
-            <div className="genre-filter-empty">{t('common.filterNoGenres')}</div>
-          </div>
-        )}
-      </div>
-
-      {selected.length > 0 && (
-        <button className="btn btn-ghost" onClick={clear} style={{ padding: '0.35rem 0.6rem', display: 'flex', alignItems: 'center', gap: '0.3rem', fontSize: '0.8rem' }}>
-          <X size={13} />
-          {t('common.filterClear')}
-        </button>
+          {count > 0 && (
+            <div className="genre-filter-popover__footer">
+              <button
+                className="btn btn-ghost"
+                onClick={clear}
+                style={{ padding: '0.3rem 0.55rem', display: 'flex', alignItems: 'center', gap: '0.3rem', fontSize: '0.8rem' }}
+              >
+                <X size={13} />
+                {t('common.filterClear')}
+              </button>
+            </div>
+          )}
+        </div>,
+        document.body,
       )}
-    </div>
+    </>
   );
 }

src/components/MiniPlayer.tsx

@@ -0,0 +1,151 @@
+import React, { 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 CachedImage from './CachedImage';
+import { buildCoverArtUrl, coverArtCacheKey } from '../api/subsonic';
+import type { MiniSyncPayload, MiniControlAction } from '../utils/miniPlayerBridge';
+
+interface ProgressPayload {
+  current_time: number;
+  duration: number;
+}
+
+function fmt(seconds: number): string {
+  if (!isFinite(seconds) || seconds < 0) seconds = 0;
+  const m = Math.floor(seconds / 60);
+  const s = Math.floor(seconds % 60);
+  return `${m}:${s.toString().padStart(2, '0')}`;
+}
+
+export default function MiniPlayer() {
+  const [state, setState] = useState<MiniSyncPayload>({ track: null, isPlaying: false, isMobile: false });
+  const [currentTime, setCurrentTime] = useState(0);
+  const [duration, setDuration] = useState(0);
+  const [alwaysOnTop, setAlwaysOnTop] = useState(true);
+  const ticker = useRef<number | null>(null);
+
+  // Announce to main window that we're mounted; it replies with a snapshot.
+  useEffect(() => {
+    emit('mini:ready', {}).catch(() => {});
+  }, []);
+
+  // Keyboard: Space → toggle, ← / → → prev / next. Ignore when typing.
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      const tgt = e.target as HTMLElement | null;
+      const tag = tgt?.tagName;
+      if (tag === 'INPUT' || tag === 'TEXTAREA' || tgt?.isContentEditable) return;
+      if (e.key === ' ' || e.code === 'Space') {
+        e.preventDefault();
+        emit('mini:control', 'toggle').catch(() => {});
+      } else if (e.key === 'ArrowRight') {
+        emit('mini:control', 'next').catch(() => {});
+      } else if (e.key === 'ArrowLeft') {
+        emit('mini:control', 'prev').catch(() => {});
+      }
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, []);
+
+  // Subscribe to state + progress from the main window / Rust.
+  useEffect(() => {
+    const unSync = listen<MiniSyncPayload>('mini:sync', (e) => {
+      setState(e.payload);
+      if (e.payload.track?.duration) setDuration(e.payload.track.duration);
+    });
+    const unProgress = listen<ProgressPayload>('audio:progress', (e) => {
+      setCurrentTime(e.payload.current_time);
+      if (e.payload.duration > 0) setDuration(e.payload.duration);
+    });
+    const unEnded = listen('audio:ended', () => setCurrentTime(0));
+    return () => {
+      unSync.then(fn => fn()).catch(() => {});
+      unProgress.then(fn => fn()).catch(() => {});
+      unEnded.then(fn => fn()).catch(() => {});
+      if (ticker.current) window.clearInterval(ticker.current);
+    };
+  }, []);
+
+  const control = (action: MiniControlAction) => emit('mini:control', action).catch(() => {});
+
+  const toggleOnTop = async () => {
+    const next = !alwaysOnTop;
+    setAlwaysOnTop(next);
+    try { await invoke('set_mini_player_always_on_top', { onTop: next }); } catch {}
+  };
+
+  const closeMini = async () => {
+    try { await invoke('close_mini_player'); } catch {}
+  };
+
+  const showMain = () => invoke('show_main_window').catch(() => {});
+
+  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__body">
+        <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__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-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'}
+        >
+          {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>
+    </div>
+  );
+}

src/components/PlayerBar.tsx

@@ -2,8 +2,10 @@ import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from '
 import { createPortal } from 'react-dom';
 import {
   Play, Pause, SkipBack, SkipForward, Volume2, VolumeX, Music,
-  Square, Repeat, Repeat1, Maximize2, SlidersVertical, X, Heart, Cast
+  Square, Repeat, Repeat1, Maximize2, SlidersVertical, X, Heart, Cast,
+  PictureInPicture2,
 } 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';
@@ -310,6 +312,16 @@ export default function PlayerBar() {
         <SlidersVertical size={15} />
       </button>
 
+      {/* Mini Player */}
+      <button
+        className="player-btn player-btn-sm"
+        onClick={() => invoke('open_mini_player').catch(() => {})}
+        aria-label="Mini Player"
+        data-tooltip="Mini Player"
+      >
+        <PictureInPicture2 size={15} />
+      </button>
+
       {/* Volume */}
       <div className="player-volume-section">
         <button

src/components/SortDropdown.tsx

@@ -0,0 +1,133 @@
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { ArrowDownUp, Check } from 'lucide-react';
+
+export interface SortOption<V extends string> {
+  value: V;
+  label: string;
+}
+
+interface Props<V extends string> {
+  value: V;
+  options: SortOption<V>[];
+  onChange: (value: V) => void;
+  ariaLabel?: string;
+}
+
+export default function SortDropdown<V extends string>({ value, options, onChange, ariaLabel }: Props<V>) {
+  const [open, setOpen] = useState(false);
+  const [popStyle, setPopStyle] = useState<React.CSSProperties>({});
+
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const popRef = useRef<HTMLDivElement>(null);
+
+  const current = options.find(o => o.value === value);
+
+  const updatePopStyle = () => {
+    if (!triggerRef.current) return;
+    const rect = triggerRef.current.getBoundingClientRect();
+    const MARGIN = 6;
+    const WIDTH = Math.max(rect.width, 220);
+    const MAX_H = 300;
+    const spaceBelow = window.innerHeight - rect.bottom - MARGIN;
+    const spaceAbove = rect.top - MARGIN;
+    const useAbove = spaceBelow < 160 && spaceAbove > spaceBelow;
+    const left = Math.min(
+      Math.max(rect.left, 8),
+      window.innerWidth - WIDTH - 8,
+    );
+    setPopStyle({
+      position: 'fixed',
+      left,
+      width: WIDTH,
+      ...(useAbove
+        ? { bottom: window.innerHeight - rect.top + MARGIN }
+        : { top: rect.bottom + MARGIN }),
+      maxHeight: Math.min(MAX_H, useAbove ? spaceAbove : spaceBelow),
+      zIndex: 99998,
+    });
+  };
+
+  useLayoutEffect(() => {
+    if (!open) return;
+    updatePopStyle();
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onResize = () => updatePopStyle();
+    window.addEventListener('resize', onResize);
+    window.addEventListener('scroll', onResize, true);
+    return () => {
+      window.removeEventListener('resize', onResize);
+      window.removeEventListener('scroll', onResize, true);
+    };
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onDown = (e: MouseEvent) => {
+      if (
+        !triggerRef.current?.contains(e.target as Node) &&
+        !popRef.current?.contains(e.target as Node)
+      ) setOpen(false);
+    };
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') setOpen(false); };
+    document.addEventListener('mousedown', onDown);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('mousedown', onDown);
+      document.removeEventListener('keydown', onKey);
+    };
+  }, [open]);
+
+  return (
+    <>
+      <button
+        ref={triggerRef}
+        type="button"
+        className="btn btn-surface"
+        onClick={() => setOpen(v => !v)}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        aria-label={ariaLabel}
+        style={{ display: 'flex', alignItems: 'center', gap: '0.4rem' }}
+      >
+        <ArrowDownUp size={14} />
+        {current?.label ?? value}
+      </button>
+
+      {open && createPortal(
+        <div
+          ref={popRef}
+          className="genre-filter-popover"
+          style={popStyle}
+          role="listbox"
+        >
+          <div className="genre-filter-popover__list">
+            {options.map(opt => {
+              const isSel = opt.value === value;
+              return (
+                <div
+                  key={opt.value}
+                  className={`genre-filter-popover__option${isSel ? ' genre-filter-popover__option--selected' : ''}`}
+                  onClick={() => { onChange(opt.value); setOpen(false); }}
+                  role="option"
+                  aria-selected={isSel}
+                >
+                  <span className="genre-filter-popover__check">
+                    {isSel && <Check size={12} strokeWidth={3} />}
+                  </span>
+                  <span style={{ flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                    {opt.label}
+                  </span>
+                </div>
+              );
+            })}
+          </div>
+        </div>,
+        document.body,
+      )}
+    </>
+  );
+}

src/components/YearFilterButton.tsx

@@ -0,0 +1,167 @@
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { CalendarRange, X } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+interface Props {
+  from: string;
+  to: string;
+  onChange: (from: string, to: string) => void;
+}
+
+const CURRENT_YEAR = new Date().getFullYear();
+
+export default function YearFilterButton({ from, to, onChange }: Props) {
+  const { t } = useTranslation();
+  const [open, setOpen] = useState(false);
+  const [popStyle, setPopStyle] = useState<React.CSSProperties>({});
+
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const popRef = useRef<HTMLDivElement>(null);
+  const fromRef = useRef<HTMLInputElement>(null);
+
+  const fromNum = parseInt(from, 10);
+  const toNum = parseInt(to, 10);
+  const active = !isNaN(fromNum) && !isNaN(toNum) && fromNum >= 1 && toNum >= 1;
+
+  const updatePopStyle = () => {
+    if (!triggerRef.current) return;
+    const rect = triggerRef.current.getBoundingClientRect();
+    const MARGIN = 6;
+    const WIDTH = 260;
+    const MAX_H = 200;
+    const spaceBelow = window.innerHeight - rect.bottom - MARGIN;
+    const spaceAbove = rect.top - MARGIN;
+    const useAbove = spaceBelow < 160 && spaceAbove > spaceBelow;
+    const left = Math.min(
+      Math.max(rect.left, 8),
+      window.innerWidth - WIDTH - 8,
+    );
+    setPopStyle({
+      position: 'fixed',
+      left,
+      width: WIDTH,
+      ...(useAbove
+        ? { bottom: window.innerHeight - rect.top + MARGIN }
+        : { top: rect.bottom + MARGIN }),
+      maxHeight: Math.min(MAX_H, useAbove ? spaceAbove : spaceBelow),
+      zIndex: 99998,
+    });
+  };
+
+  useLayoutEffect(() => {
+    if (!open) return;
+    updatePopStyle();
+    setTimeout(() => fromRef.current?.focus(), 0);
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onResize = () => updatePopStyle();
+    window.addEventListener('resize', onResize);
+    window.addEventListener('scroll', onResize, true);
+    return () => {
+      window.removeEventListener('resize', onResize);
+      window.removeEventListener('scroll', onResize, true);
+    };
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onDown = (e: MouseEvent) => {
+      if (
+        !triggerRef.current?.contains(e.target as Node) &&
+        !popRef.current?.contains(e.target as Node)
+      ) setOpen(false);
+    };
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') setOpen(false); };
+    document.addEventListener('mousedown', onDown);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('mousedown', onDown);
+      document.removeEventListener('keydown', onKey);
+    };
+  }, [open]);
+
+  const clear = () => {
+    onChange('', '');
+  };
+
+  return (
+    <>
+      <button
+        ref={triggerRef}
+        type="button"
+        className={`btn btn-surface${active ? ' btn-sort-active' : ''}`}
+        onClick={() => setOpen(v => !v)}
+        aria-haspopup="dialog"
+        aria-expanded={open}
+        style={{
+          display: 'flex', alignItems: 'center', gap: '0.4rem',
+          ...(active ? { background: 'var(--accent)', color: 'var(--ctp-crust)' } : {}),
+        }}
+      >
+        <CalendarRange size={14} />
+        {active ? `${fromNum}–${toNum}` : t('albums.yearFilterLabel')}
+      </button>
+
+      {open && createPortal(
+        <div
+          ref={popRef}
+          className="genre-filter-popover"
+          style={popStyle}
+          role="dialog"
+        >
+          <div style={{ padding: '0.75rem 0.75rem 0.5rem', display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+              <div style={{ display: 'flex', flexDirection: 'column', flex: 1, gap: '0.2rem' }}>
+                <label style={{ fontSize: '0.72rem', color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.04em' }}>
+                  {t('albums.yearFrom')}
+                </label>
+                <input
+                  ref={fromRef}
+                  className="input"
+                  type="number"
+                  min={1900}
+                  max={CURRENT_YEAR}
+                  placeholder="1970"
+                  value={from}
+                  onChange={e => onChange(e.target.value, to)}
+                />
+              </div>
+              <span style={{ alignSelf: 'flex-end', paddingBottom: '0.4rem', color: 'var(--text-muted)' }}>–</span>
+              <div style={{ display: 'flex', flexDirection: 'column', flex: 1, gap: '0.2rem' }}>
+                <label style={{ fontSize: '0.72rem', color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.04em' }}>
+                  {t('albums.yearTo')}
+                </label>
+                <input
+                  className="input"
+                  type="number"
+                  min={1900}
+                  max={CURRENT_YEAR}
+                  placeholder={String(CURRENT_YEAR)}
+                  value={to}
+                  onChange={e => onChange(from, e.target.value)}
+                />
+              </div>
+            </div>
+          </div>
+
+          {active && (
+            <div className="genre-filter-popover__footer">
+              <button
+                className="btn btn-ghost"
+                onClick={clear}
+                style={{ padding: '0.3rem 0.55rem', display: 'flex', alignItems: 'center', gap: '0.3rem', fontSize: '0.8rem' }}
+              >
+                <X size={13} />
+                {t('albums.yearFilterClear')}
+              </button>
+            </div>
+          )}
+        </div>,
+        document.body,
+      )}
+    </>
+  );
+}

src/locales/de.ts

@@ -218,6 +218,9 @@ export const deTranslation = {
     clearArtistFilter: 'Künstlerfilter zurücksetzen',
     noFilterResults: 'Keine Ergebnisse mit den ausgewählten Filtern.',
     allArtists: 'Alle Künstler',
+    topArtists: 'Top-Künstler nach Favoriten',
+    topArtistsSongCount_one: '{{count}} Song',
+    topArtistsSongCount_other: '{{count}} Songs',
   },
   randomLanding: {
     title: 'Mix erstellen',
@@ -287,6 +290,12 @@ export const deTranslation = {
     yearTo: 'Bis',
     yearFilterClear: 'Jahresfilter zurücksetzen',
     yearFilterLabel: 'Jahr',
+    compilationLabel: 'Sampler',
+    compilationOnly: 'Nur Sampler',
+    compilationHide: 'Ohne Sampler',
+    compilationTooltipAll: 'Alle Alben · klicken: nur Sampler',
+    compilationTooltipOnly: 'Nur Sampler · klicken: Sampler ausblenden',
+    compilationTooltipHide: 'Sampler ausgeblendet · klicken: alle zeigen',
     select: 'Mehrfachauswahl',
     startSelect: 'Mehrfachauswahl aktivieren',
     cancelSelect: 'Abbrechen',

src/locales/en.ts

@@ -219,6 +219,9 @@ export const enTranslation = {
     clearArtistFilter: 'Clear artist filter',
     noFilterResults: 'No results with selected filters.',
     allArtists: 'All Artists',
+    topArtists: 'Top Artists by Favorites',
+    topArtistsSongCount_one: '{{count}} song',
+    topArtistsSongCount_other: '{{count}} songs',
   },
   randomLanding: {
     title: 'Build a Mix',
@@ -288,6 +291,12 @@ export const enTranslation = {
     yearTo: 'To',
     yearFilterClear: 'Clear year filter',
     yearFilterLabel: 'Year',
+    compilationLabel: 'Compilations',
+    compilationOnly: 'Only compilations',
+    compilationHide: 'Hide compilations',
+    compilationTooltipAll: 'All albums · click: only compilations',
+    compilationTooltipOnly: 'Only compilations · click: hide compilations',
+    compilationTooltipHide: 'Compilations hidden · click: show all',
     select: 'Multi-select',
     startSelect: 'Enable multi-select',
     cancelSelect: 'Cancel',

src/locales/es.ts

@@ -219,6 +219,9 @@ export const esTranslation = {
     clearArtistFilter: 'Limpiar filtro de artista',
     noFilterResults: 'No hay resultados con los filtros seleccionados.',
     allArtists: 'Todos los Artistas',
+    topArtists: 'Artistas favoritos principales',
+    topArtistsSongCount_one: '{{count}} canción',
+    topArtistsSongCount_other: '{{count}} canciones',
   },
   randomLanding: {
     title: 'Crear Mezcla',
@@ -288,6 +291,12 @@ export const esTranslation = {
     yearTo: 'Hasta',
     yearFilterClear: 'Limpiar filtro de año',
     yearFilterLabel: 'Año',
+    compilationLabel: 'Recopilatorios',
+    compilationOnly: 'Solo recopilatorios',
+    compilationHide: 'Ocultar recopilatorios',
+    compilationTooltipAll: 'Todos los álbumes · clic: solo recopilatorios',
+    compilationTooltipOnly: 'Solo recopilatorios · clic: ocultar recopilatorios',
+    compilationTooltipHide: 'Recopilatorios ocultos · clic: mostrar todo',
     select: 'Selección múltiple',
     startSelect: 'Activar selección múltiple',
     cancelSelect: 'Cancelar',

src/locales/fr.ts

@@ -218,6 +218,9 @@ export const frTranslation = {
     clearArtistFilter: 'Effacer le filtre artiste',
     noFilterResults: 'Aucun résultat avec les filtres sélectionnés.',
     allArtists: 'Tous les artistes',
+    topArtists: 'Artistes favoris principaux',
+    topArtistsSongCount_one: '{{count}} morceau',
+    topArtistsSongCount_other: '{{count}} morceaux',
   },
   randomLanding: {
     title: 'Créer un mix',
@@ -287,6 +290,12 @@ export const frTranslation = {
     yearTo: 'À',
     yearFilterClear: 'Effacer le filtre année',
     yearFilterLabel: 'Année',
+    compilationLabel: 'Compilations',
+    compilationOnly: 'Uniquement compilations',
+    compilationHide: 'Masquer compilations',
+    compilationTooltipAll: 'Tous les albums · clic : uniquement compilations',
+    compilationTooltipOnly: 'Uniquement compilations · clic : masquer compilations',
+    compilationTooltipHide: 'Compilations masquées · clic : tout afficher',
     select: 'Sélection multiple',
     startSelect: 'Activer la sélection multiple',
     cancelSelect: 'Annuler',

src/locales/nb.ts

@@ -218,6 +218,9 @@ export const nbTranslation = {
     clearArtistFilter: 'Tøm artistfilter',
     noFilterResults: 'Ingen resultater med valgte filtre.',
     allArtists: 'Alle artister',
+    topArtists: 'Toppartister etter favoritter',
+    topArtistsSongCount_one: '{{count}} sang',
+    topArtistsSongCount_other: '{{count}} sanger',
   },
   randomLanding: {
     title: 'Lag en miks',
@@ -287,6 +290,12 @@ export const nbTranslation = {
     yearTo: 'Til',
     yearFilterClear: 'Tøm år filteret',
     yearFilterLabel: 'År',
+    compilationLabel: 'Samleplater',
+    compilationOnly: 'Kun samleplater',
+    compilationHide: 'Skjul samleplater',
+    compilationTooltipAll: 'Alle album · klikk: kun samleplater',
+    compilationTooltipOnly: 'Kun samleplater · klikk: skjul samleplater',
+    compilationTooltipHide: 'Samleplater skjult · klikk: vis alle',
     select: 'Multivalg',
     startSelect: 'Aktiver multivalg',
     cancelSelect: 'Avbryt',

src/locales/nl.ts

@@ -217,6 +217,9 @@ export const nlTranslation = {
     clearArtistFilter: 'Artiestfilter wissen',
     noFilterResults: 'Geen resultaten met de geselecteerde filters.',
     allArtists: 'Alle artiesten',
+    topArtists: 'Top-artiesten op favorieten',
+    topArtistsSongCount_one: '{{count}} nummer',
+    topArtistsSongCount_other: '{{count}} nummers',
   },
   randomLanding: {
     title: 'Mix samenstellen',
@@ -286,6 +289,12 @@ export const nlTranslation = {
     yearTo: 'Tot',
     yearFilterClear: 'Jaarfilter wissen',
     yearFilterLabel: 'Jaar',
+    compilationLabel: 'Compilaties',
+    compilationOnly: 'Alleen compilaties',
+    compilationHide: 'Compilaties verbergen',
+    compilationTooltipAll: 'Alle albums · klik: alleen compilaties',
+    compilationTooltipOnly: 'Alleen compilaties · klik: compilaties verbergen',
+    compilationTooltipHide: 'Compilaties verborgen · klik: toon alles',
     select: 'Meervoudige selectie',
     startSelect: 'Meervoudige selectie inschakelen',
     cancelSelect: 'Annuleren',

src/locales/ru.ts

@@ -222,6 +222,11 @@ export const ruTranslation = {
     clearArtistFilter: 'Сбросить фильтр исполнителя',
     noFilterResults: 'Нет результатов с выбранными фильтрами.',
     allArtists: 'Все исполнители',
+    topArtists: 'Топ исполнителей по избранному',
+    topArtistsSongCount_one: '{{count}} трек',
+    topArtistsSongCount_few: '{{count}} трека',
+    topArtistsSongCount_many: '{{count}} треков',
+    topArtistsSongCount_other: '{{count}} трека',
   },
   randomLanding: {
     title: 'Собрать микс',
@@ -296,6 +301,12 @@ export const ruTranslation = {
     yearTo: 'По',
     yearFilterClear: 'Сбросить год',
     yearFilterLabel: 'Год',
+    compilationLabel: 'Сборники',
+    compilationOnly: 'Только сборники',
+    compilationHide: 'Скрыть сборники',
+    compilationTooltipAll: 'Все альбомы · клик: только сборники',
+    compilationTooltipOnly: 'Только сборники · клик: скрыть сборники',
+    compilationTooltipHide: 'Сборники скрыты · клик: показать всё',
     select: 'Множественный выбор',
     startSelect: 'Включить множественный выбор',
     cancelSelect: 'Отмена',

src/locales/zh.ts

@@ -217,6 +217,9 @@ export const zhTranslation = {
     clearArtistFilter: '清除艺术家筛选',
     noFilterResults: '所选筛选条件下无结果。',
     allArtists: '全部艺术家',
+    topArtists: '按收藏数排行的艺术家',
+    topArtistsSongCount_one: '{{count}} 首歌曲',
+    topArtistsSongCount_other: '{{count}} 首歌曲',
   },
   randomLanding: {
     title: '创建混音',
@@ -286,6 +289,12 @@ export const zhTranslation = {
     yearTo: '到',
     yearFilterClear: '清除年份筛选',
     yearFilterLabel: '年份',
+    compilationLabel: '合辑',
+    compilationOnly: '仅合辑',
+    compilationHide: '隐藏合辑',
+    compilationTooltipAll: '所有专辑 · 点击：仅合辑',
+    compilationTooltipOnly: '仅合辑 · 点击：隐藏合辑',
+    compilationTooltipHide: '已隐藏合辑 · 点击：显示全部',
     select: '多选',
     startSelect: '启用多选',
     cancelSelect: '取消',

src/main.tsx

@@ -1,11 +1,20 @@
 import { StrictMode } from 'react';
 import ReactDOM from 'react-dom/client';
+import { getCurrentWindow } from '@tauri-apps/api/window';
 import App from './App';
 import './i18n';
 import './styles/theme.css';
 import './styles/layout.css';
 import './styles/components.css';
 
+// Expose the Tauri window label synchronously so App() can pick its root
+// component (main app vs mini player) on first render without flicker.
+try {
+  (window as any).__PSY_WINDOW_LABEL__ = getCurrentWindow().label;
+} catch {
+  (window as any).__PSY_WINDOW_LABEL__ = 'main';
+}
+
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <App />

src/pages/Albums.tsx

@@ -1,6 +1,8 @@
-import React, { useEffect, useState, useCallback, useRef } from 'react';
+import React, { useEffect, useState, useCallback, useRef, useMemo } from 'react';
 import AlbumCard from '../components/AlbumCard';
 import GenreFilterBar from '../components/GenreFilterBar';
+import YearFilterButton from '../components/YearFilterButton';
+import SortDropdown from '../components/SortDropdown';
 import { getAlbumList, getAlbumsByGenre, getAlbum, SubsonicAlbum, buildDownloadUrl } from '../api/subsonic';
 import { useTranslation } from 'react-i18next';
 import { useAuthStore } from '../store/authStore';
@@ -11,12 +13,12 @@ import { invoke } from '@tauri-apps/api/core';
 import { join } from '@tauri-apps/api/path';
 import { showToast } from '../utils/toast';
 import { useZipDownloadStore } from '../store/zipDownloadStore';
-import { X, CheckSquare2, Download, HardDriveDownload, ListMusic } from 'lucide-react';
+import { CheckSquare2, Download, HardDriveDownload, ListMusic, Disc3 } from 'lucide-react';
 
 type SortType = 'alphabeticalByName' | 'alphabeticalByArtist';
+type CompFilter = 'all' | 'only' | 'hide';
 
 const PAGE_SIZE = 30;
-const CURRENT_YEAR = new Date().getFullYear();
 
 function sanitizeFilename(name: string): string {
   return name.replace(/[<>:"/\\|?*\x00-\x1f]/g, '_').trim() || 'download';
@@ -44,6 +46,7 @@ export default function Albums() {
   const [selectedGenres, setSelectedGenres] = useState<string[]>([]);
   const [yearFrom, setYearFrom] = useState('');
   const [yearTo, setYearTo] = useState('');
+  const [compFilter, setCompFilter] = useState<CompFilter>('all');
   const observerTarget = useRef<HTMLDivElement>(null);
 
   // ── Multi-selection ──────────────────────────────────────────────────────
@@ -68,9 +71,19 @@ export default function Albums() {
     setSelectedIds(new Set());
   };
 
-  const selectedAlbums = albums.filter(a => selectedIds.has(a.id));
+  const visibleAlbums = useMemo(() => {
+    if (compFilter === 'all') return albums;
+    if (compFilter === 'only') return albums.filter(a => a.isCompilation);
+    return albums.filter(a => !a.isCompilation);
+  }, [albums, compFilter]);
+
+  const selectedAlbums = visibleAlbums.filter(a => selectedIds.has(a.id));
   const openContextMenu = usePlayerStore(state => state.openContextMenu);
 
+  const cycleCompFilter = () => {
+    setCompFilter(v => v === 'all' ? 'only' : v === 'only' ? 'hide' : 'all');
+  };
+
   const handleDownloadZips = async () => {
     if (selectedAlbums.length === 0) return;
     const folder = auth.downloadFolder || await requestDownloadFolder();
@@ -179,8 +192,6 @@ export default function Albums() {
     return () => observer.disconnect();
   }, [loadMore]);
 
-  const clearYear = () => { setYearFrom(''); setYearTo(''); };
-
   const sortOptions: { value: SortType; label: string }[] = [
     { value: 'alphabeticalByName',   label: t('albums.sortByName') },
     { value: 'alphabeticalByArtist', label: t('albums.sortByArtist') },
@@ -188,7 +199,7 @@ export default function Albums() {
 
   return (
     <div className="content-body animate-fade-in">
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.5rem', flexWrap: 'wrap', gap: '0.75rem' }}>
+      <div className="page-sticky-header" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '0.75rem' }}>
         <h1 className="page-title" style={{ marginBottom: 0 }}>
           {selectionMode && selectedIds.size > 0
             ? t('albums.selectionCount', { count: selectedIds.size })
@@ -208,54 +219,41 @@ export default function Albums() {
             </>
           ) : (
             <>
-              {!yearActive && sortOptions.map(o => (
-                <button
-                  key={o.value}
-                  className={`btn btn-surface ${sort === o.value ? 'btn-sort-active' : ''}`}
-                  onClick={() => setSort(o.value)}
-                  style={sort === o.value ? { background: 'var(--accent)', color: 'var(--ctp-crust)' } : {}}
-                >
-                  {o.label}
-                </button>
-              ))}
+              {!yearActive && (
+                <SortDropdown
+                  value={sort}
+                  options={sortOptions}
+                  onChange={setSort}
+                />
+              )}
 
-              <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
-                <span style={{ fontSize: 14, color: 'var(--text-muted)', whiteSpace: 'nowrap' }}>
-                  {t('albums.yearFilterLabel')}
-                </span>
-                <input
-                  className="input"
-                  type="number"
-                  min={1900}
-                  max={CURRENT_YEAR}
-                  placeholder={t('albums.yearFrom')}
-                  value={yearFrom}
-                  onChange={e => setYearFrom(e.target.value)}
-                  style={{ width: 76, padding: 'var(--space-2) var(--space-2)' }}
-                />
-                <span style={{ fontSize: 14, color: 'var(--text-muted)' }}>–</span>
-                <input
-                  className="input"
-                  type="number"
-                  min={1900}
-                  max={CURRENT_YEAR}
-                  placeholder={t('albums.yearTo')}
-                  value={yearTo}
-                  onChange={e => setYearTo(e.target.value)}
-                  style={{ width: 76, padding: 'var(--space-2) var(--space-2)' }}
-                />
-                {yearActive && (
-                  <button
-                    className="btn btn-ghost"
-                    onClick={clearYear}
-                    data-tooltip={t('albums.yearFilterClear')}
-                  >
-                    <X size={14} />
-                  </button>
-                )}
-              </div>
+              <YearFilterButton
+                from={yearFrom}
+                to={yearTo}
+                onChange={(from, to) => { setYearFrom(from); setYearTo(to); }}
+              />
 
               <GenreFilterBar selected={selectedGenres} onSelectionChange={setSelectedGenres} />
+
+              <button
+                className={`btn btn-surface${compFilter !== 'all' ? ' btn-sort-active' : ''}`}
+                onClick={cycleCompFilter}
+                data-tooltip={
+                  compFilter === 'all' ? t('albums.compilationTooltipAll')
+                  : compFilter === 'only' ? t('albums.compilationTooltipOnly')
+                  : t('albums.compilationTooltipHide')
+                }
+                data-tooltip-pos="bottom"
+                style={{
+                  display: 'flex', alignItems: 'center', gap: '0.4rem',
+                  ...(compFilter !== 'all' ? { background: 'var(--accent)', color: 'var(--ctp-crust)' } : {}),
+                }}
+              >
+                <Disc3 size={14} />
+                {compFilter === 'all' ? t('albums.compilationLabel')
+                  : compFilter === 'only' ? t('albums.compilationOnly')
+                  : t('albums.compilationHide')}
+              </button>
             </>
           )}
 
@@ -279,7 +277,7 @@ export default function Albums() {
       ) : (
         <>
           <div className="album-grid-wrap">
-            {albums.map(a => (
+            {visibleAlbums.map(a => (
               <AlbumCard
                 key={a.id}
                 album={a}

src/pages/Artists.tsx

@@ -172,77 +172,79 @@ export default function Artists() {
 
   return (
     <div className="content-body animate-fade-in">
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '1.5rem', flexWrap: 'wrap', gap: '1rem' }}>
-        <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
-          <h1 className="page-title" style={{ marginBottom: 0 }}>
-            {selectionMode && selectedIds.size > 0
-              ? t('artists.selectionCount', { count: selectedIds.size })
-              : t('artists.title')}
-          </h1>
-          <input
-            className="input"
-            style={{ maxWidth: 220 }}
-            placeholder={t('artists.search')}
-            value={filter}
-            onChange={e => setFilter(e.target.value)}
-            id="artist-filter-input"
-          />
+      <div className="page-sticky-header">
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: '1rem' }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+            <h1 className="page-title" style={{ marginBottom: 0 }}>
+              {selectionMode && selectedIds.size > 0
+                ? t('artists.selectionCount', { count: selectedIds.size })
+                : t('artists.title')}
+            </h1>
+            <input
+              className="input"
+              style={{ maxWidth: 220 }}
+              placeholder={t('artists.search')}
+              value={filter}
+              onChange={e => setFilter(e.target.value)}
+              id="artist-filter-input"
+            />
+          </div>
+
+          <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+            {!(selectionMode && selectedIds.size > 0) && (<>
+                <button
+                  className={`btn btn-surface`}
+                  onClick={() => setShowArtistImages(!showArtistImages)}
+                  style={showArtistImages ? { background: 'var(--accent)', color: 'var(--ctp-crust)', padding: '0.5rem' } : { padding: '0.5rem' }}
+                  data-tooltip={showArtistImages ? t('artists.imagesOn') : t('artists.imagesOff')}
+                  data-tooltip-wrap
+                >
+                  <Images size={20} />
+                </button>
+                <button
+                  className={`btn btn-surface ${viewMode === 'grid' ? 'btn-sort-active' : ''}`}
+                  onClick={() => setViewMode('grid')}
+                  style={viewMode === 'grid' ? { background: 'var(--accent)', color: 'var(--ctp-crust)', padding: '0.5rem' } : { padding: '0.5rem' }}
+                  data-tooltip={t('artists.gridView')}
+                >
+                  <LayoutGrid size={20} />
+                </button>
+                <button
+                  className={`btn btn-surface ${viewMode === 'list' ? 'btn-sort-active' : ''}`}
+                  onClick={() => setViewMode('list')}
+                  style={viewMode === 'list' ? { background: 'var(--accent)', color: 'var(--ctp-crust)', padding: '0.5rem' } : { padding: '0.5rem' }}
+                  data-tooltip={t('artists.listView')}
+                >
+                  <List size={20} />
+                </button>
+              </>
+            )}
+            <button
+              className={`btn btn-surface${selectionMode ? ' btn-sort-active' : ''}`}
+              onClick={toggleSelectionMode}
+              data-tooltip={selectionMode ? t('artists.cancelSelect') : t('artists.startSelect')}
+              data-tooltip-pos="bottom"
+              style={selectionMode ? { background: 'var(--accent)', color: 'var(--ctp-crust)' } : {}}
+            >
+              <CheckSquare2 size={15} />
+              {selectionMode ? t('artists.cancelSelect') : t('artists.select')}
+            </button>
+          </div>
         </div>
 
-        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
-          {!(selectionMode && selectedIds.size > 0) && (<>
-              <button
-                className={`btn btn-surface`}
-                onClick={() => setShowArtistImages(!showArtistImages)}
-                style={showArtistImages ? { background: 'var(--accent)', color: 'var(--ctp-crust)', padding: '0.5rem' } : { padding: '0.5rem' }}
-                data-tooltip={showArtistImages ? t('artists.imagesOn') : t('artists.imagesOff')}
-                data-tooltip-wrap
-              >
-                <Images size={20} />
-              </button>
-              <button
-                className={`btn btn-surface ${viewMode === 'grid' ? 'btn-sort-active' : ''}`}
-                onClick={() => setViewMode('grid')}
-                style={viewMode === 'grid' ? { background: 'var(--accent)', color: 'var(--ctp-crust)', padding: '0.5rem' } : { padding: '0.5rem' }}
-                data-tooltip={t('artists.gridView')}
-              >
-                <LayoutGrid size={20} />
-              </button>
-              <button
-                className={`btn btn-surface ${viewMode === 'list' ? 'btn-sort-active' : ''}`}
-                onClick={() => setViewMode('list')}
-                style={viewMode === 'list' ? { background: 'var(--accent)', color: 'var(--ctp-crust)', padding: '0.5rem' } : { padding: '0.5rem' }}
-                data-tooltip={t('artists.listView')}
-              >
-                <List size={20} />
-              </button>
-            </>
-          )}
-          <button
-            className={`btn btn-surface${selectionMode ? ' btn-sort-active' : ''}`}
-            onClick={toggleSelectionMode}
-            data-tooltip={selectionMode ? t('artists.cancelSelect') : t('artists.startSelect')}
-            data-tooltip-pos="bottom"
-            style={selectionMode ? { background: 'var(--accent)', color: 'var(--ctp-crust)' } : {}}
-          >
-            <CheckSquare2 size={15} />
-            {selectionMode ? t('artists.cancelSelect') : t('artists.select')}
-          </button>
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.25rem', marginTop: 'var(--space-4)' }}>
+          {ALPHABET.map(l => (
+            <button
+              key={l}
+              onClick={() => setLetterFilter(l)}
+              className={`artists-alpha-btn${letterFilter === l ? ' artists-alpha-btn--active' : ''}`}
+            >
+              {l === ALL_SENTINEL ? t('artists.all') : l}
+            </button>
+          ))}
         </div>
       </div>
 
-      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.25rem', marginBottom: '2rem' }}>
-        {ALPHABET.map(l => (
-          <button
-            key={l}
-            onClick={() => setLetterFilter(l)}
-            className={`artists-alpha-btn${letterFilter === l ? ' artists-alpha-btn--active' : ''}`}
-          >
-            {l === ALL_SENTINEL ? t('artists.all') : l}
-          </button>
-        ))}
-      </div>
-
       {loading && <div style={{ display: 'flex', justifyContent: 'center', padding: '3rem' }}><div className="spinner" /></div>}
 
       {!loading && viewMode === 'grid' && (

src/pages/DeviceSync.tsx

@@ -872,7 +872,7 @@ export default function DeviceSync() {
               {activeTab === 'albums' && (search.trim() ? albumSearchResults : randomAlbums).map(al => (
                 <BrowserRow key={al.id} name={al.name} meta={al.artist}
                   selected={sources.some(s => s.id === al.id) && !pendingDeletion.includes(al.id)}
-                  onToggle={() => handleToggleSource({ type: 'album', id: al.id, name: al.name })} />
+                  onToggle={() => handleToggleSource({ type: 'album', id: al.id, name: al.name, artist: al.artist })} />
               ))}
               {activeTab === 'artists' && filteredArtists.map(ar => (
                 <React.Fragment key={ar.id}>
@@ -896,7 +896,7 @@ export default function DeviceSync() {
                       <BrowserRow key={al.id} name={al.name} meta={al.year?.toString()}
                         selected={sources.some(s => s.id === al.id) && !pendingDeletion.includes(al.id)}
                         indent
-                        onToggle={() => handleToggleSource({ type: 'album', id: al.id, name: al.name })} />
+                        onToggle={() => handleToggleSource({ type: 'album', id: al.id, name: al.name, artist: al.artist || ar.name })} />
                     ))
                   }
                 </React.Fragment>
@@ -990,7 +990,10 @@ export default function DeviceSync() {
                         onChange={() => toggleChecked(s.id)}
                         disabled={status === 'deletion'}
                       />
-                      <span className="device-sync-row-name">{s.name}</span>
+                      <span className="device-sync-row-name">
+                        {s.name}
+                        {s.artist && <span className="device-sync-row-artist"> · {s.artist}</span>}
+                      </span>
                       <span className="device-sync-source-type">{s.type}</span>
                       <span className={`device-sync-status-icon ${status}`}>
                         {status === 'synced'   && <CheckCircle2 size={13} />}
@@ -1272,8 +1275,10 @@ function BrowserRow({ name, meta, selected, onToggle, indent }: {
       <span className="device-sync-row-check">
         {selected ? <CheckCircle2 size={14} /> : <span className="device-sync-row-circle" />}
       </span>
-      <span className="device-sync-row-name">{name}</span>
-      {meta && <span className="device-sync-row-meta">{meta}</span>}
+      <span className="device-sync-row-name">
+        {name}
+        {meta && <span className="device-sync-row-artist"> · {meta}</span>}
+      </span>
     </button>
   );
 }

src/pages/Favorites.tsx

@@ -10,7 +10,7 @@ import {
 } from '../api/subsonic';
 import { usePlayerStore, songToTrack } from '../store/playerStore';
 import StarRating from '../components/StarRating';
-import { Cast, ChevronDown, ChevronLeft, ChevronRight, Check, Heart, ListPlus, Play, Star, X, SlidersHorizontal, ArrowUp, ArrowDown, RotateCcw } from 'lucide-react';
+import { Cast, ChevronDown, ChevronLeft, ChevronRight, Check, Heart, ListPlus, Play, Star, Users, X, SlidersHorizontal, ArrowUp, ArrowDown, RotateCcw } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { unstar } from '../api/subsonic';
@@ -25,6 +25,7 @@ const FAV_COLUMNS: readonly ColDef[] = [
   { key: 'title',    i18nKey: 'trackTitle',    minWidth: 150, defaultWidth: 0,   required: true,  flex: true },
   { key: 'artist',   i18nKey: 'trackArtist',   minWidth: 80,  defaultWidth: 180, required: false },
   { key: 'album',    i18nKey: 'trackAlbum',    minWidth: 80,  defaultWidth: 180, required: false },
+  { key: 'genre',    i18nKey: 'trackGenre',    minWidth: 60,  defaultWidth: 120, required: false },
   { key: 'rating',   i18nKey: 'trackRating',   minWidth: 80,  defaultWidth: 120, required: false },
   { key: 'duration', i18nKey: 'trackDuration', minWidth: 72,  defaultWidth: 92,  required: false },
   { key: 'format',   i18nKey: 'trackFormat',   minWidth: 60,  defaultWidth: 80,  required: false },
@@ -205,6 +206,30 @@ export default function Favorites() {
     loadAll();
   }, [musicLibraryFilterVersion]);
 
+  // ── Top Favorite Artists aggregated from favorited songs ─────────────
+  const topFavoriteArtists = useMemo(() => {
+    const counts = new Map<string, { id: string; name: string; count: number; coverArtId: string }>();
+    for (const s of songs) {
+      if (starredOverrides[s.id] === false) continue;
+      const key = s.artistId || s.artist;
+      if (!key) continue;
+      const existing = counts.get(key);
+      if (existing) {
+        existing.count += 1;
+      } else {
+        counts.set(key, {
+          id: key,
+          name: s.artist || key,
+          count: 1,
+          coverArtId: s.artistId || '',
+        });
+      }
+    }
+    return Array.from(counts.values())
+      .sort((a, b) => b.count - a.count)
+      .slice(0, 12);
+  }, [songs, starredOverrides]);
+
   // ── Filter & sort logic ──────────────────────────────────────────────────
   const filteredSongs = useMemo(() => {
     return songs.filter(s => {
@@ -309,6 +334,15 @@ export default function Favorites() {
             />
           )}
 
+          {topFavoriteArtists.length >= 2 && (
+            <TopFavoriteArtistsRow
+              title={t('favorites.topArtists')}
+              artists={topFavoriteArtists}
+              selectedKey={selectedArtist}
+              onToggle={key => setSelectedArtist(prev => prev === key ? null : key)}
+            />
+          )}
+
           {(visibleSongs.length > 0 || selectedArtist || selectedGenres.length > 0 || yearRange[0] !== MIN_YEAR || yearRange[1] !== CURRENT_YEAR) && (
             <section className="album-row-section">
               {/* ── Section Header with Stats & Filters ───────────────────────── */}
@@ -656,6 +690,11 @@ export default function Favorites() {
                               )}
                             </div>
                           );
+                          case 'genre': return (
+                            <div key="genre" className="track-genre">
+                              {song.genre ?? '—'}
+                            </div>
+                          );
                           case 'format': return (
                             <div key="format" className="track-meta">
                               {(song.suffix || song.bitRate) && (
@@ -709,6 +748,120 @@ export default function Favorites() {
   );
 }
 
+// ── Top Favorite Artists Row ──────────────────────────────────────────────────
+
+interface TopFavoriteArtist {
+  id: string;
+  name: string;
+  count: number;
+  coverArtId: string;
+}
+
+interface TopFavoriteArtistsRowProps {
+  title: string;
+  artists: TopFavoriteArtist[];
+  selectedKey: string | null;
+  onToggle: (key: string) => void;
+}
+
+function TopFavoriteArtistsRow({ title, artists, selectedKey, onToggle }: TopFavoriteArtistsRowProps) {
+  const { t } = useTranslation();
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [showLeft, setShowLeft] = useState(false);
+  const [showRight, setShowRight] = useState(true);
+
+  const handleScroll = () => {
+    if (!scrollRef.current) return;
+    const { scrollLeft, scrollWidth, clientWidth } = scrollRef.current;
+    setShowLeft(scrollLeft > 0);
+    setShowRight(scrollLeft < scrollWidth - clientWidth - 5);
+  };
+
+  useEffect(() => {
+    handleScroll();
+    window.addEventListener('resize', handleScroll);
+    return () => window.removeEventListener('resize', handleScroll);
+  }, [artists]);
+
+  const scroll = (dir: 'left' | 'right') => {
+    if (!scrollRef.current) return;
+    const amount = scrollRef.current.clientWidth * 0.75;
+    scrollRef.current.scrollBy({ left: dir === 'left' ? -amount : amount, behavior: 'smooth' });
+  };
+
+  return (
+    <section className="album-row-section">
+      <div className="album-row-header">
+        <h2 className="section-title" style={{ marginBottom: 0 }}>{title}</h2>
+        <div className="album-row-nav">
+          <button className={`nav-btn ${!showLeft ? 'disabled' : ''}`} onClick={() => scroll('left')} disabled={!showLeft}>
+            <ChevronLeft size={20} />
+          </button>
+          <button className={`nav-btn ${!showRight ? 'disabled' : ''}`} onClick={() => scroll('right')} disabled={!showRight}>
+            <ChevronRight size={20} />
+          </button>
+        </div>
+      </div>
+
+      <div className="album-grid-wrapper">
+        <div className="album-grid" ref={scrollRef} onScroll={handleScroll}>
+          {artists.map(a => (
+            <TopFavoriteArtistCard
+              key={a.id}
+              artist={a}
+              isSelected={selectedKey === a.id}
+              onClick={() => onToggle(a.id)}
+              songCountLabel={t('favorites.topArtistsSongCount', { count: a.count })}
+            />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+interface TopFavoriteArtistCardProps {
+  artist: TopFavoriteArtist;
+  isSelected: boolean;
+  onClick: () => void;
+  songCountLabel: string;
+}
+
+function TopFavoriteArtistCard({ artist, isSelected, onClick, songCountLabel }: TopFavoriteArtistCardProps) {
+  const coverId = artist.coverArtId;
+  const coverSrc = useMemo(() => coverId ? buildCoverArtUrl(coverId, 300) : '', [coverId]);
+  const coverCacheKey = useMemo(() => coverId ? coverArtCacheKey(coverId, 300) : '', [coverId]);
+
+  return (
+    <div
+      className={`artist-card${isSelected ? ' artist-card-selected' : ''}`}
+      onClick={onClick}
+      style={isSelected ? { outline: '2px solid var(--accent)', outlineOffset: '-2px', borderRadius: 12 } : undefined}
+    >
+      <div className="artist-card-avatar">
+        {coverId ? (
+          <CachedImage
+            src={coverSrc}
+            cacheKey={coverCacheKey}
+            alt={artist.name}
+            loading="lazy"
+            onError={(e) => {
+              e.currentTarget.style.display = 'none';
+              e.currentTarget.parentElement?.classList.add('fallback-visible');
+            }}
+          />
+        ) : (
+          <Users size={32} color="var(--text-muted)" />
+        )}
+      </div>
+      <div className="artist-card-info">
+        <span className="artist-card-name">{artist.name}</span>
+        <span className="artist-card-meta">{songCountLabel}</span>
+      </div>
+    </div>
+  );
+}
+
 // ── Radio Station Row ─────────────────────────────────────────────────────────
 
 interface RadioStationRowProps {

src/pages/NewReleases.tsx

@@ -137,7 +137,7 @@ export default function NewReleases() {
 
   return (
     <div className="content-body animate-fade-in">
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.5rem', flexWrap: 'wrap', gap: '0.75rem' }}>
+      <div className="page-sticky-header" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '0.75rem' }}>
         <h1 className="page-title" style={{ marginBottom: 0 }}>
           {selectionMode && selectedIds.size > 0
             ? t('albums.selectionCount', { count: selectedIds.size })

src/store/deviceSyncStore.ts

@@ -5,6 +5,8 @@ export interface DeviceSyncSource {
   type: 'album' | 'playlist' | 'artist';
   id: string;
   name: string;
+  /** Album artist — only set when type === 'album'. Shown as a subtitle in the device list. */
+  artist?: string;
 }
 
 interface DeviceSyncState {

src/styles/components.css

@@ -3690,13 +3690,11 @@
   right: 0;
   width: 230px;
   z-index: 9;
-  background: rgba(18, 18, 28, 0.88);
-  backdrop-filter: blur(20px) saturate(1.4);
-  -webkit-backdrop-filter: blur(20px) saturate(1.4);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: #14141d;
+  border: 1px solid rgba(255, 255, 255, 0.14);
   border-radius: 14px;
   padding: 14px;
-  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.04);
+  box-shadow: 0 12px 44px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.04);
   animation: fslmIn 160ms cubic-bezier(0.22, 1, 0.36, 1) both;
   transform-origin: bottom right;
 }
@@ -3737,18 +3735,18 @@
   flex: 1;
   padding: 8px 10px;
   border-radius: 9px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  background: rgba(255, 255, 255, 0.05);
-  color: rgba(255, 255, 255, 0.5);
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  background: rgba(255, 255, 255, 0.06);
+  color: rgba(255, 255, 255, 0.78);
   cursor: pointer;
   text-align: left;
   transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
 }
 
 .fslm-style-btn:hover {
-  border-color: rgba(255, 255, 255, 0.22);
-  color: rgba(255, 255, 255, 0.75);
-  background: rgba(255, 255, 255, 0.08);
+  border-color: rgba(255, 255, 255, 0.3);
+  color: #fff;
+  background: rgba(255, 255, 255, 0.1);
 }
 
 .fslm-style-active {
@@ -6048,97 +6046,110 @@ html.no-compositing .fsr-lyric-line.fsrl-active .fsr-lyric-word.active {
 }
 
 /* ─ Genre Filter Bar ─ */
-.genre-filter-tagbox {
-  position: relative;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0.3rem;
-  padding: 0.3rem 0.6rem;
-  border: 1px solid var(--border-subtle);
-  border-radius: 8px;
-  background: var(--bg-card);
-  min-width: 220px;
-  cursor: text;
-  transition: border-color 0.15s;
-}
-
-.genre-filter-tagbox:focus-within {
-  border-color: var(--accent);
-}
-
-.genre-filter-chip {
+.genre-filter-count {
   display: inline-flex;
   align-items: center;
-  gap: 0.2rem;
-  padding: 0.15rem 0.3rem 0.15rem 0.5rem;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  margin-left: 0.35rem;
+  border-radius: 9px;
   background: var(--accent);
   color: var(--ctp-crust);
-  border-radius: 4px;
-  font-size: 0.75rem;
-  font-weight: 600;
-  white-space: nowrap;
-}
-
-.genre-filter-chip button {
-  background: none;
-  border: none;
-  color: inherit;
-  cursor: pointer;
-  padding: 0;
-  display: flex;
-  align-items: center;
-  opacity: 0.75;
+  font-size: 0.7rem;
+  font-weight: 700;
   line-height: 1;
 }
 
-.genre-filter-chip button:hover { opacity: 1; }
-
-.genre-filter-input {
-  border: none;
-  background: none;
-  outline: none;
-  color: var(--text-primary);
-  font-size: 0.85rem;
-  min-width: 100px;
-  flex: 1;
-  padding: 0.1rem 0;
-}
-
-.genre-filter-input::placeholder { color: var(--text-muted); }
-
-.genre-filter-dropdown {
-  position: absolute;
-  top: calc(100% + 4px);
-  left: 0;
-  right: 0;
+.genre-filter-popover {
   background: var(--bg-card);
   border: 1px solid var(--border-subtle);
-  border-radius: 8px;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
-  max-height: 220px;
-  overflow-y: auto;
+  border-radius: 10px;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
   overscroll-behavior: contain;
-  z-index: 500;
 }
 
-.genre-filter-option {
-  padding: 0.45rem 0.75rem;
+.genre-filter-popover__search {
+  padding: 0.55rem 0.6rem 0.4rem;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.genre-filter-popover__search input {
+  width: 100%;
+  border: 1px solid var(--border-subtle);
+  background: var(--bg-app);
+  color: var(--text-primary);
+  border-radius: 6px;
+  padding: 0.35rem 0.55rem;
+  font-size: 0.85rem;
+  outline: none;
+}
+
+.genre-filter-popover__search input:focus {
+  border-color: var(--accent);
+}
+
+.genre-filter-popover__list {
+  flex: 1;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: 0.25rem 0;
+}
+
+.genre-filter-popover__option {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+  padding: 0.4rem 0.7rem;
   font-size: 0.85rem;
   color: var(--text-primary);
   cursor: pointer;
-  transition: background 0.1s, color 0.1s;
+  user-select: none;
 }
 
-.genre-filter-option:hover {
+.genre-filter-popover__option:hover {
   background: var(--bg-hover);
-  color: var(--accent);
 }
 
-.genre-filter-empty {
-  padding: 0.6rem 0.75rem;
+.genre-filter-popover__option--selected {
+  color: var(--accent);
+  font-weight: 600;
+}
+
+.genre-filter-popover__check {
+  width: 16px;
+  height: 16px;
+  border: 1.5px solid var(--border-subtle);
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--ctp-crust);
+  background: transparent;
+}
+
+.genre-filter-popover__option--selected .genre-filter-popover__check {
+  background: var(--accent);
+  border-color: var(--accent);
+}
+
+.genre-filter-popover__empty {
+  padding: 0.75rem;
   font-size: 0.82rem;
   color: var(--text-muted);
+  text-align: center;
+}
+
+.genre-filter-popover__footer {
+  padding: 0.4rem 0.5rem;
+  border-top: 1px solid var(--border-subtle);
+  display: flex;
+  justify-content: flex-end;
 }
 
 /* ─ Genre Cards ─ */
@@ -8467,6 +8478,16 @@ html.no-compositing .fsr-lyric-line.fsrl-active .fsr-lyric-word.active {
 
 .device-sync-row-name {
   flex: 1;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.device-sync-row-artist {
+  color: var(--text-muted);
+  font-weight: 400;
+  margin-left: 0.2em;
 }
 
 .device-sync-device-row.checked { background: var(--accent-dim); }
@@ -8804,3 +8825,165 @@ html.no-compositing .fsr-lyric-line.fsrl-active .fsr-lyric-word.active {
 
 .device-sync-row-name { flex: 1; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .device-sync-row-meta { font-size: 0.75rem; color: var(--text-secondary); flex-shrink: 0; }
+
+/* ── Pause CSS animations when the window is hidden / minimized ────────────
+   Set via App.tsx on `visibilitychange`. WebView2 on Windows keeps compositing
+   infinite CSS animations (mesh-aura, portrait-drift, eq-bounce, track-pulse,
+   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. */
+/* ─ Mini Player window ───────────────────────────────────────────────────── */
+.mini-player {
+  width: 100%;
+  height: 100vh;
+  display: grid;
+  grid-template-columns: 112px 1fr;
+  grid-template-rows: 1fr auto;
+  gap: 10px;
+  padding: 12px;
+  background: var(--bg-app);
+  color: var(--text-primary);
+  overflow: hidden;
+  user-select: none;
+  box-sizing: border-box;
+}
+
+.mini-player__art {
+  grid-row: 1 / span 2;
+  aspect-ratio: 1;
+  width: 112px;
+  height: 112px;
+  background: var(--bg-card);
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
+}
+.mini-player__art img,
+.mini-player__art-fallback {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+.mini-player__art-fallback {
+  background: linear-gradient(135deg, var(--bg-secondary), var(--bg-card));
+}
+
+.mini-player__body {
+  padding: 0 2px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+}
+
+.mini-player__titles {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+.mini-player__title {
+  font-size: 13px;
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.mini-player__artist {
+  font-size: 11px;
+  color: var(--text-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.mini-player__controls {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  margin-top: 2px;
+}
+.mini-player__btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  border: none;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--text-primary);
+  cursor: pointer;
+  transition: background 0.12s;
+}
+.mini-player__btn:hover {
+  background: var(--bg-hover);
+}
+.mini-player__btn--primary {
+  width: 36px;
+  height: 36px;
+  background: var(--accent);
+  color: var(--ctp-crust);
+}
+.mini-player__btn--primary:hover {
+  background: var(--accent);
+  filter: brightness(1.08);
+}
+
+.mini-player__progress {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 10px;
+  color: var(--text-muted);
+}
+.mini-player__progress-time {
+  font-variant-numeric: tabular-nums;
+  min-width: 30px;
+}
+.mini-player__progress-track {
+  flex: 1;
+  height: 3px;
+  border-radius: 2px;
+  background: var(--ctp-surface1);
+  overflow: hidden;
+}
+.mini-player__progress-fill {
+  height: 100%;
+  background: var(--accent);
+  transition: width 0.25s linear;
+}
+
+.mini-player__toolbar {
+  grid-column: 2;
+  display: flex;
+  gap: 4px;
+  justify-content: flex-end;
+}
+.mini-player__tool {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+}
+.mini-player__tool:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+.mini-player__tool--active {
+  color: var(--accent);
+}
+
+html[data-app-hidden="true"] *,
+html[data-app-hidden="true"] *::before,
+html[data-app-hidden="true"] *::after {
+  animation-play-state: paused !important;
+}

src/styles/layout.css

@@ -1031,6 +1031,33 @@
   contain: paint;
 }
 
+/* Every page re-uses .content-body as its outer wrapper, but App.tsx already
+   renders one around <Routes /> as the scroll container. The inner one must
+   not establish its own scroll ancestor — otherwise `position: sticky`
+   children anchor to a container that never scrolls, and the header just
+   scrolls along with the content. Padding stays: the outer App.tsx
+   content-body has `padding: 0` inline, the inner one is what gives each
+   page its breathing room. */
+.content-body .content-body {
+  overflow: visible;
+}
+
+/* Sticky page header: keeps page title + filter/search bar visible while the
+   body scrolls. Negative horizontal margins (+ matching padding) make the
+   background flush with the scroll container edges so the sticky block looks
+   like a real bar, not a floating island. `top: 0` clamps below the content-
+   body's own padding-top; the residual 24px gap above the sticky block while
+   scrolling is intentional — gives the bar visual breathing room. */
+.page-sticky-header {
+  position: sticky;
+  top: 0;
+  z-index: 5;
+  background: var(--bg-app);
+  margin: 0 calc(-1 * var(--space-6)) var(--space-5);
+  padding: var(--space-4) var(--space-6);
+  border-bottom: 1px solid var(--border-subtle);
+}
+
 /* ─── Offline Banner ─── */
 .offline-banner {
   display: flex;

src/styles/theme.css

@@ -4035,7 +4035,7 @@ select.input.input:focus {
 
   to {
     opacity: 1;
-    transform: translateY(0);
+    transform: none;
   }
 }
 

src/utils/miniPlayerBridge.ts

@@ -0,0 +1,107 @@
+import { getCurrentWindow } from '@tauri-apps/api/window';
+import { listen, emitTo } from '@tauri-apps/api/event';
+import { usePlayerStore } from '../store/playerStore';
+
+export const MINI_WINDOW_LABEL = 'mini';
+
+export interface MiniSyncPayload {
+  track: {
+    id: string;
+    title: string;
+    artist: string;
+    album: string;
+    albumId?: string;
+    artistId?: string;
+    coverArt?: string;
+    duration?: number;
+    starred?: boolean;
+  } | null;
+  isPlaying: boolean;
+  isMobile: false;
+}
+
+export type MiniControlAction =
+  | 'toggle'
+  | 'next'
+  | 'prev'
+  | 'show-main';
+
+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,
+    isPlaying: s.isPlaying,
+    isMobile: false,
+  };
+}
+
+/**
+ * Bridge initialised on the main window. Pushes track/state changes to the
+ * mini window whenever they matter, and handles control events coming back
+ * from the mini window.
+ *
+ * Returns a cleanup function.
+ */
+export function initMiniPlayerBridgeOnMain(): () => void {
+  // Only run on the main window
+  if (getCurrentWindow().label !== 'main') return () => {};
+
+  // Push state to the mini window on every relevant store change.
+  let last = '';
+  const push = () => {
+    const payload = snapshot();
+    const key = `${payload.track?.id ?? ''}|${payload.isPlaying}|${payload.track?.starred ?? ''}`;
+    if (key === last) return;
+    last = key;
+    emitTo(MINI_WINDOW_LABEL, 'mini:sync', payload).catch(() => {});
+  };
+
+  const unsub = usePlayerStore.subscribe((state, prev) => {
+    if (state.currentTrack?.id !== prev.currentTrack?.id
+      || state.isPlaying !== prev.isPlaying
+      || state.currentTrack?.starred !== prev.currentTrack?.starred) {
+      push();
+    }
+  });
+
+  // Push an initial snapshot whenever a new mini window announces itself.
+  const readyUnlisten = listen('mini:ready', () => {
+    last = '';
+    push();
+  });
+
+  // Receive control actions from the mini window.
+  const controlUnlisten = listen<MiniControlAction>('mini:control', (e) => {
+    const action = e.payload;
+    const store = usePlayerStore.getState();
+    switch (action) {
+      case 'toggle':   store.togglePlay(); break;
+      case 'next':     store.next(true); break;
+      case 'prev':     store.previous(); break;
+      case 'show-main': {
+        const w = getCurrentWindow();
+        w.unminimize().catch(() => {});
+        w.show().catch(() => {});
+        w.setFocus().catch(() => {});
+        break;
+      }
+    }
+  });
+
+  return () => {
+    unsub();
+    readyUnlisten.then(fn => fn()).catch(() => {});
+    controlUnlisten.then(fn => fn()).catch(() => {});
+  };
+}