fix: disable souvlaki on Windows to fix startup crash (v1.17.1)

SMTC init via souvlaki requires a valid HWND + COM message loop, which
are not available in setup(). Guarded behind #[cfg(not(target_os = "windows"))].
mpris_set_metadata / mpris_set_playback no-op on Windows via the None branch.

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

CHANGELOG.md

@@ -5,6 +5,122 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.17.1] - 2026-03-25
+
+### Fixed
+
+- **Windows crash on startup**: souvlaki SMTC init in `setup()` requires a valid HWND and a running COM message loop, neither of which exists at that point. Media controls are disabled on Windows until init can be properly deferred post-window. All other functionality unaffected.
+
+---
+
+## [1.17.0] - 2026-03-25
+
+### Added
+
+- **Media Keys & OS Media Controls** *(experimental)*: Initial integration via [souvlaki](https://github.com/Sinono3/souvlaki) — MPRIS2 on Linux, Now Playing on macOS, SMTC on Windows. Track metadata (title, artist, album, cover art) and playback state are pushed to the OS media overlay in real time. On Linux, init is skipped gracefully if no D-Bus session is present. This feature is still under active development and observation — behaviour may vary across desktop environments and OS versions.
+- **Random Mix — Artist Blacklist**: Artist names are now included in the keyword blacklist filter. Clickable artist chips in the tracklist let you add an artist to the blacklist with one click — same UX as the existing genre chips.
+- **Favorites — Remove Song**: Each song row in Favorites now has an inline X button to remove the track from favorites instantly (optimistic UI, server unstar happens in the background).
+- **3 New Themes**:
+  - *Games*: **Horde** — Durotar blood-red earth, iron-plate sidebar, forge-fire gold glow on track name.
+  - *Games*: **Alliance** — Stormwind deep navy, cathedral stone columns, paladin holy-light glow, gold sidebar trim and nav accent.
+  - *Operating Systems*: **W11** — Windows 11 Fluent Design dark mode. Mica-style sidebar, clean neutral palette, taskbar-inspired player bar. No gradients — faithful to the minimal Fluent aesthetic.
+
+### Changed
+
+- **Theme renames**: Cobalt Media → **WinMedPlayer**, Onyx Cinema → **P-DVD**, Navy Jukebox → **MuMa Jukebox**.
+- **NowPlayingDropdown**: Username / player name row now uses `--text-secondary` for improved readability across all themes.
+
+### Fixed
+
+- **Performance — App-wide interaction lag**: Removed `[data-theme='X'] * { font-family: ... !important }` universal selectors from several themes (DOS, Unix, and others). The browser places universal selectors in the "universal bucket" and checks them against every DOM node on every style recalculation — measurably sluggish with 500–1000+ elements even when the affected theme is not active. `font-family` is now set on the theme root block (inherits to children) with a targeted `button, input, textarea, select` override for elements that don't inherit font.
+- **Performance — Scroll jank**: Removed `repeating-linear-gradient` / `repeating-radial-gradient` from `.app-shell` in DOS, Unix, GW1, Morpheus, Aqua Quartz, and others. WebKitGTK with `WEBKIT_DISABLE_COMPOSITING_MODE=1` (always set by the AUR wrapper) has no GPU compositing — fine-pitch repeating patterns on the full-viewport background re-rasterize every scroll frame. Patterns are now applied only to `.sidebar` and `.player-bar`, which never scroll.
+- **Contrast — 29 themes**: Audited all themes against WCAG AA. Fixed `--text-muted` and `--text-secondary` values in 29 themes that had insufficient contrast ratios (< 3.5:1). Affects Catppuccin (all four variants), Gruvbox (all six), Nord variants, GW1, Heisenberg, Ice and Fire, Spider-Tech, Morpheus, Hill Valley 85, Dune, and others.
+
+### Removed
+
+- **Theme**: Azerothian Gold removed from the Games group.
+
+---
+
+## [1.16.0] - 2026-03-24
+
+### Added
+
+- **15 New Themes** across multiple categories:
+  - *Operating Systems*: **Aqua Quartz** — Mac OS X Aqua (skeuomorphic jelly buttons, brushed aluminium player bar, pinstripe background, blue Source List sidebar, authentic `#3876f7` accent)
+  - *Movies*: **Spider-Tech** (Spider-Man navy/red), **T-800** (Terminator Skynet blue), **B-Runner** (Blade Runner 2049 amber), **Hill Valley 85** (Back to the Future)
+  - *Games*: **TetraStack** (Tetris 8-bit, cyan, grid background, 0px radii)
+  - *Series*: **Turtle Power** (TMNT turtle green, brick tile sidebar)
+  - *Social Media* (new group): **Insta** (Instagram dark pink), **ReadIt** (Reddit dark orange-red), **The Book** (Facebook light, blue sidebar)
+  - *Operating Systems*: **W3.1** (Windows 3.1, light silver/teal, 0px radii, inset bevels)
+  - *Mediaplayer*: **Jayfin** (Jellyfin-inspired — deep black, purple `#AA5CC3` primary, cyan `#00A4DC` secondary, brand gradient on player bar and progress fill)
+- **Aqua Quartz — Full Skeuomorphic Polish**: All button variants (`.btn-surface`, `.btn-ghost`, `.hero-play-btn`, `.album-card-details-btn`, `.queue-round-btn`) now have the authentic Aqua jelly gradient. Sidebar sports the iconic blue Source List gradient with white icons and a white pill for the active nav link.
+
+### Changed
+
+- **W98 Theme — Complete Overhaul**: Rebuilt from scratch with authentic Windows 98 design language: correct `#d4d0c8` warm-gray button face (not flat `#c0c0c0`), full 4-layer 3D bevel on all panels and buttons (raised default, sunken on press), song title displays in the iconic navy→light-blue title bar gradient, progress bar is a sunken white trough with navy fill, 16px styled scrollbar, all hover/active states consistently navy `#000080` + white text.
+- **Theme Picker — Alphabetical Order**: All theme groups and themes within groups are now sorted alphabetically.
+- **Theme Picker — Group Rename**: "Psysonic Themes — Mediaplayer" renamed to "Mediaplayer".
+- **Sidebar + Queue Toggle Buttons**: Queue toggle button now uses the theme accent color (icon + hover).
+
+### Fixed
+
+- **AlbumDetail — Genre not propagating**: Playing via the album detail Play All / Enqueue All buttons now correctly includes the track genre in the constructed Track objects, making it show up in the Queue strip.
+- **W98 — Theme Accordion active state**: Open category headers are now navy with white text instead of black-on-navy.
+- **Aqua Quartz — Sidebar section labels**: "Library" / "System" labels now render in white on the blue sidebar.
+- **W98 — Connection indicators**: Server name and Last.fm username in the header are now black (`#000000`) on the warm-gray background for full readability.
+
+### Removed
+
+- **Themes**: Removed **Pandora**, **Order of the Phoenix**, and **Imperial Sith** — too similar to other better-executed themes in their respective groups.
+
+---
+
+## [1.15.0] - 2026-03-23
+
+### Added
+
+- **Queue — Genre · Format · Bitrate Strip**: The meta box above the queue now shows a full-width frosted strip with Genre, audio format, and bitrate (e.g. `Electronic · FLAC · 1411 kbps`). Genre is sourced directly from track metadata and is now propagated through all 11 track construction sites across the codebase.
+- **Lyrics — Accent Color Highlight**: The active synced lyrics line is now highlighted in the theme accent color instead of bold+larger text. Eliminates layout jumps caused by the font-weight change pushing lines to wrap.
+
+### Fixed
+
+- **Sidebar — Collapse Button**: The collapse button now correctly sits on the right border of the sidebar, straddling the dividing line between sidebar and main content, and is always visible.
+
+### Changed
+
+- **Queue — Tech Info**: Codec/bitrate badge replaced by the new full-width Genre · Format · Bitrate strip at the top of the meta box.
+
+---
+
+## [1.14.0] - 2026-03-22
+
+### Critical Fixes
+
+- **Prebuffer Flood — 300 simultaneous downloads eliminated**: The audio engine was spawning up to 300 concurrent HTTP download requests during prebuffering, causing network saturation of ~200 Mbit/s and significant CPU load. The root cause was unbounded parallel preload logic in the Rust engine. Fixed: the engine now buffers intelligently with a single controlled preload per track. Network usage dropped to under 100 kbit/s during normal playback.
+- **Gapless Playback — fully stable**: Gapless transitions now work correctly end-to-end. Previously, edge cases in the sample-accurate handoff between tracks caused audio glitches or silence between songs.
+- **Crossfade — fully stable**: The equal-power crossfade (sin/cos envelope) is now reliable across all track transitions. Previous instability was caused by race conditions in the fade-out trigger and Sink lifecycle management.
+- **Now Playing Page — performance**: The Now Playing page no longer causes sustained CPU spikes. Heavy re-renders triggered by frequent `audio:progress` events (previously every 500 ms with wall-clock drift) are resolved — progress is now driven by an atomic sample counter at 100 ms intervals with no layout thrashing.
+
+### Fixed
+
+- **Volume — Clipping at 100%**: Audible distortion at maximum volume eliminated. A `MASTER_HEADROOM` constant of −1 dB (`0.891`) is now applied to all volume calculations, preventing inter-sample peaks from 0 dBFS masters and EQ biquad ripple from clipping.
+- **Seek — Display Desync**: Seeking while paused could cause the time display to jump to the new position while audio continued from the old one. `CountingSource::try_seek` now only resets the sample counter after confirming the seek succeeded.
+- **Gapless + Crossfade — Mutual Exclusion**: Both modes can no longer be active simultaneously. Enabling one auto-disables the other (Queue toolbar + Settings). Running both simultaneously caused a glitch where Song 2, gapless-chained inside the Sink, would play at full volume after Song 1's crossfade completed.
+- **Now Playing — About the Artist**: The "About the Artist" card is now hidden when no biography is available. Artist images that fail to load are silently hidden instead of showing a broken image placeholder.
+
+### Added
+
+- **Waveform — Hover Tooltip**: Hovering over the waveform seekbar shows a floating time label above the cursor. Hidden when no track is loaded or the cursor leaves.
+- **Hero & Album Detail — Format Badge**: Audio format (FLAC, MP3, OGG, …) now shown alongside Year, Genre, and Track Count in the hero meta row on the Home page and in the Album Detail header.
+- **Help — FLAC Seeking**: New FAQ entry explaining that FLAC files without an embedded SEEKTABLE cannot be seeked, with instructions for adding one via `flac` or `metaflac`.
+
+### Changed
+
+- **Queue — Tech Info**: Codec/bitrate badge moved from the frosted-glass cover overlay into the top-right corner of the meta box. Album artwork is no longer obscured.
+
+---
+
 ## [1.13.0] - 2026-03-22
 
 ### Added

CLAUDE.md

@@ -49,8 +49,8 @@ There are no test scripts. TypeScript compilation (`tsc`) is part of the build.
 | `src/components/LastfmIcon.tsx` | Shared Last.fm SVG logo component. `<LastfmIcon size={16} />`. |
 | `src/store/authStore.ts` | Multi-server support via `ServerProfile[]` + `activeServerId`. `getBaseUrl()` / `getActiveServer()` used by subsonic.ts. Also stores Last.fm session key, username, scrobbling toggle. Persisted via **`localStorage`** (synchronous — do not change to async storage). |
 | `src/store/playerStore.ts` | Playback state, queue, scrobbling at 50% via Last.fm, server queue sync (debounced 1.5s). On `playTrack`: calls `reportNowPlaying` (Navidrome) + `lastfmUpdateNowPlaying` (Last.fm) independently. Persists `currentTrack`, `queue`, `queueIndex`, `currentTime` for cold-start resume. |
-| `src-tauri/src/audio.rs` | Rust audio engine: `audio_play`, `audio_pause`, `audio_resume`, `audio_stop`, `audio_seek`, `audio_set_volume` commands. Emits `audio:playing`, `audio:progress` (500ms), `audio:ended`, `audio:error` events. |
-| `src/store/themeStore.ts` | Theme selection (47 themes across 7 groups), applied as `data-theme` on `<html>` |
+| `src-tauri/src/audio.rs` | Rust audio engine: `audio_play`, `audio_pause`, `audio_resume`, `audio_stop`, `audio_seek`, `audio_set_volume` commands. Emits `audio:playing`, `audio:progress` (100ms), `audio:ended`, `audio:error` events. `MASTER_HEADROOM` (-1 dB) prevents inter-sample clipping at full volume. |
+| `src/store/themeStore.ts` | Theme selection (60 themes across 8 groups), applied as `data-theme` on `<html>` |
 | `src/store/lyricsStore.ts` | Sidebar tab state (`activeTab: 'queue' \| 'lyrics'`). `showLyrics()` / `showQueue()` / `setTab()`. Not persisted. |
 | `src/components/LyricsPane.tsx` | Lyrics pane rendered inside QueuePanel when `activeTab === 'lyrics'`. Fetches from LRCLIB, parses LRC, auto-scrolls active line. Only subscribes to `currentTime` when synced lyrics are present. |
 | `src/api/lrclib.ts` | Fetches lyrics from `https://lrclib.net/api/get`. Returns `{ syncedLyrics, plainLyrics }`. `parseLrc()` parses LRC timestamps into sorted `LrcLine[]`. |
@@ -63,7 +63,7 @@ There are no test scripts. TypeScript compilation (`tsc`) is part of the build.
 | `src/components/Sidebar.tsx` | Sidebar nav + `UpdateToast` component. On mount (1.5s delay) fetches `https://api.github.com/repos/Psychotoxical/psysonic/releases/latest`, compares `tag_name` against `version` imported directly from `package.json` (build-time constant — more reliable than `getVersion()` from Tauri API), and shows a toast above Statistics only when a newer version exists. Silently no-ops if offline. |
 | `src/components/AlbumHeader.tsx` | Extracted from AlbumDetail — cover art, album info, play/enqueue buttons, bio modal, download. |
 | `src/components/AlbumTrackList.tsx` | Extracted from AlbumDetail — tracklist with star ratings, codec labels, VA artist column, context menu. |
-| `src/components/QueuePanel.tsx` | Queue sidebar. Toolbar with round buttons (Shuffle, Save, Load, Clear, Gapless ∞, Crossfade ≋). Header shows title + count + duration inline. Crossfade popover (range slider 1–10 s) anchored below the ≋ button. Tech info (codec/bitrate) as frosted-glass overlay on cover art. Items get `.context-active` class while their context menu is open. |
+| `src/components/QueuePanel.tsx` | Queue sidebar. Toolbar with round buttons (Shuffle, Save, Load, Clear, Gapless ∞, Crossfade ≋). **Gapless and Crossfade are mutually exclusive** — enabling one disables the other in both the toolbar and Settings. Header shows title + count + duration inline. Crossfade popover (range slider 1–10 s) anchored below the ≋ button. Tech info (codec/bitrate) as frosted-glass overlay on cover art. Items get `.context-active` class while their context menu is open. |
 | `src/components/CoverLightbox.tsx` | Full-screen image lightbox. Props: `{ src, alt, onClose }`. ESC key + overlay click to close. Used in `AlbumHeader` and `ArtistDetail`. |
 | `packages/aur/PKGBUILD` | AUR package definition for Arch/CachyOS. Installs a wrapper script at `/usr/bin/psysonic` that sets `GDK_BACKEND=x11`, `WEBKIT_DISABLE_COMPOSITING_MODE=1`, `WEBKIT_DISABLE_DMABUF_RENDERER=1` before launching the binary. |
 
@@ -113,7 +113,7 @@ Use `getActiveServer()` to get the current server, `getBaseUrl()` to get its URL
 Add a function to `src/api/subsonic.ts` using the `api<T>()` helper. The helper automatically injects auth params and unwraps `subsonic-response`.
 
 ### Themes
-47 themes across 7 groups, selectable in Settings via `ThemePicker`. `themeStore` persists the choice and sets `data-theme` on `<html>`. All component CSS uses semantic tokens (`--accent`, `--text-primary`, etc.) — only the player button gradient and a few decorative elements reference `--ctp-*` palette vars directly, so every theme must define the full `--ctp-*` set.
+60 themes across 8 groups, selectable in Settings via `ThemePicker`. `themeStore` persists the choice and sets `data-theme` on `<html>`. All component CSS uses semantic tokens (`--accent`, `--text-primary`, etc.) — only the player button gradient and a few decorative elements reference `--ctp-*` palette vars directly, so every theme must define the full `--ctp-*` set.
 
 `--volume-accent` overrides the volume slider colour independently of `--accent` (used by WnAmp for orange volume, yellow accent elsewhere).
 
@@ -124,34 +124,49 @@ Add a function to `src/api/subsonic.ts` using the `api<T>()` helper. The helper
 | `psychowave` | Psysonic Themes | deep violet synthwave | Purple `#a06ae0` |
 | `vintage-tube-radio` | Psysonic Themes | warm brown, VFD orange | Orange `#FF6F00` |
 | `neon-drift` | Psysonic Themes | midnight blue, electric cyan glow | Cyan `#00f2ff` |
-| `wnamp` | Psysonic — Mediaplayer | cool gray-blue dark, LCD glow, Courier New | Yellow `#d4cc46`, volume `#de9b35` |
-| `navy-jukebox` | Psysonic — Mediaplayer | silver/blue light | Blue `#0070a0` |
-| `cobalt-media` | Psysonic — Mediaplayer | cobalt blue dark | Lime `#45ff00` |
-| `onyx-cinema` | Psysonic — Mediaplayer | near-black cinematic | Cyan `#00aaff` |
-| `spotless` | Psysonic — Mediaplayer | flat dark, Spotify-inspired | Green `#1ED760` |
-| `dzr0` | Psysonic — Mediaplayer | flat light, Deezer-inspired | Purple `#A238FF` |
-| `cupertino-beats` | Psysonic — Mediaplayer | Apple Music dark, glassmorphism | Red `#fa243c` |
+| `wnamp` | Mediaplayer | cool gray-blue dark, LCD glow, Courier New | Yellow `#d4cc46`, volume `#de9b35` |
+| `muma-jukebox` | Mediaplayer | silver/blue light | Blue `#0070a0` |
+| `winmedplayer` | Mediaplayer | cobalt blue dark | Lime `#45ff00` |
+| `p-dvd` | Mediaplayer | near-black cinematic | Cyan `#00aaff` |
+| `spotless` | Mediaplayer | flat dark, Spotify-inspired | Green `#1ED760` |
+| `dzr0` | Mediaplayer | flat light, Deezer-inspired | Purple `#A238FF` |
+| `cupertino-beats` | Mediaplayer | Apple Music dark, glassmorphism | Red `#fa243c` |
 | `cupertino-light` | Operating Systems | macOS light, frosted glass | Apple Blue `#0071e3` |
 | `cupertino-dark` | Operating Systems | macOS Space Grey, frosted glass | Vibrant Blue `#007aff` |
-| `aero-glass` | Operating Systems | Win7 Aero glass blue | Blue `#1878e8` |
+| `aero-glass` | Operating Systems | Win7 Aero — ice-blue glass sidebar, near-black frosted taskbar player bar, Aero button gradients | Blue `#1878e8` |
 | `w98` | Operating Systems | Windows 98 teal desktop | Navy `#000080` |
-| `luna-teal` | Operating Systems | WinXP Luna, green gel buttons | Green `#3c9d29` |
-| `ascalon` | Games | Guild Wars 1 dark stone fantasy | Gold `#d4af37` |
-| `azerothian-gold` | Games | World of Warcraft | Gold `#c19e67` |
+| `luna-teal` | Operating Systems | WinXP Luna — warm tan bg, Luna blue task-pane sidebar, XP selection blue hover `#316AC5`, gel buttons | Green `#3c9d29` |
+| `w11` | Operating Systems | Windows 11 Fluent Design dark — Mica sidebar, clean neutrals, no gradients | Windows Blue `#0078d4` |
+| `gw1` | Games | Guild Wars 1 — aged Tyrian stone, ornate gold borders, Cinzel serif track name, Searing crimson danger | Gold `#c8960c` |
 | `grand-theft-audio` | Games | GTA night city | Green `#57b05a` |
 | `lambda-17` | Games | Half-Life orange alert | Amber `#ff9d00` |
 | `nightcity-2077` | Games | Cyberpunk 2077 | Neon Yellow `#FCEE0A` |
+| `tetrastack` | Games | Tetris 8-bit, grid background | Cyan `#00f0f0` |
 | `v-tactical` | Games | Battlefield | Burnt Orange `#ff8a00` |
+| `horde` | Games | WoW Horde — Durotar blood-red earth, forge-fire gold glow, iron-plate sidebar | Blood Red `#cc2200` |
+| `alliance` | Games | WoW Alliance — Stormwind deep navy, cathedral stone, paladin holy-light glow, gold sidebar trim | Royal Blue `#3388cc` |
 | `blade` | Movies | deep black, blood-red | Red `#b30000` |
+| `dune` | Movies | Arrakis — warm sand main vs cool sietch-blue `#0e0c1a` sidebar, spice cinnamon `#c8780a` accent, desert horizon gradient, sand-grain scrollbar | Spice `#c8780a` |
+| `hill-valley-85` | Movies | BTTF — DeLorean time circuit: track name red `#ff2200` Courier New uppercase, artist amber, stainless-steel sidebar lines, fire+lightning radial gradients | Orange `#ff8c00` |
 | `imperial-sith` | Movies | Star Wars dark side | Red `#e60000` |
-| `middle-earth` | Movies | warm parchment light (LOTR) | Gold `#d4af37` |
-| `morpheus` | Movies | Matrix terminal | Phosphor Green `#00ff41` |
+| `middle-earth` | Movies | LOTR — parchment bg, Bag End oak wood-grain sidebar, `ring-inscription-glow` 5s animation on track name, Sammath Naur player bar, seven-stop gold progress bar, Georgia serif | Gold `#d4a820` |
+| `morpheus` | Movies | Matrix — CRT scanlines on app-shell, vertical code-column sidebar pattern, terminal buttons (monospace, no fill, green glow border-radius 0), 6px scrollbar | Phosphor Green `#00ff41` |
 | `order-of-the-phoenix` | Movies | Harry Potter | Ember Orange `#e63900` |
 | `pandora` | Movies | Avatar bioluminescent | Cyan `#00f2ff` |
+| `spider-tech` | Movies | Spider-Man — CSS spider web (conic+radial) radiating from sidebar top-left, Into the Spider-Verse halftone dots on app-shell, track name red glow, artist in suit-blue `#4a88ff` | Red `#E62429` |
 | `stark-hud` | Movies | Iron Man HUD | Cyan `#00f2ff` |
-| `ice-and-fire` | Series | Game of Thrones | Ice Blue `#70a1ff` |
+| `t-800` | Movies | Terminator, Skynet blue | Cyan `#00d4ff` |
+| `aqua-quartz` | Operating Systems | Mac OS X Aqua, skeuomorphic jelly buttons | Blue `#3876f7` |
+| `dos` | Operating Systems | MS-DOS — ANSI blue `#0000AA` bg, Courier New everywhere, inverted grey selection, blinking block cursor on track name, 16px DOS scrollbar | Yellow `#FFFF55` |
+| `unix` | Operating Systems | Unix Shell — pure black, Courier New, `$ ` prompt prefix + blinking `_` cursor on track name, artist in ANSI blue `#5588FF` (ls directory color), thin 6px scrollbar | Green `#22C55E` |
+| `w3-1` | Operating Systems | Windows 3.1, light silver/teal | Navy `#000080` |
+| `ice-and-fire` | Series | Game of Thrones — temperature duality: volcanic warm main (`#100c08`) vs cold Castle Black sidebar (`#090c10`), `fire-flicker` 5s irregular animation on track name, dragon gold `#c8880a` artist, red-to-gold content header rule, forge fire glow on player bar | Blood Red `#c41e1e` |
 | `doh-matic` | Series | The Simpsons | Blue `#1F75FE` |
-| `heisenberg` | Series | Breaking Bad | Crystal Blue `#3fe0ff` |
+| `heisenberg` | Series | Breaking Bad — periodic table grid on app-shell, hazmat tape diagonal on sidebar, `crystal-pulse` 3s glow animation on track name, lab fluorescent blue top border on player bar | Crystal Blue `#35d4f8` |
+| `turtle-power` | Series | TMNT, turtle green, brick sidebar | Green `#33cc33` |
+| `insta` | Social Media | Instagram dark, pink gradient | Pink `#E1306C` |
+| `readit` | Social Media | Reddit dark, orange-red | OrangeRed `#FF4500` |
+| `the-book` | Social Media | Facebook light, blue sidebar | Blue `#1877F2` |
 | `mocha` | Open Source Classics | Catppuccin dark | Mauve |
 | `macchiato` | Open Source Classics | Catppuccin medium-dark | Mauve |
 | `frappe` | Open Source Classics | Catppuccin medium | Mauve |
@@ -215,8 +230,9 @@ The workflow is split into three jobs: `create-release` (creates the GitHub Rele
 - Auth data is persisted via **`localStorage`** (synchronous Zustand storage). Do **not** switch to `@tauri-apps/plugin-store` for `authStore` — async storage causes a rehydration race condition where `getActiveServer()` returns `undefined` before state is restored.
 - `tauri.conf.json` CSP is set to `null` — a stricter CSP breaks HTTP requests in WebKitGTK on Linux.
 - App logo: `public/logo.png` (used in login page and elsewhere). All platform icons generated from this via `npx tauri icon public/logo.png`.
-- **Audio engine (Rust/rodio)**: `audio_play` downloads the full track via reqwest, decodes with symphonia/rodio `Decoder`, appends to a `Sink`. A generation counter (`AtomicU64`) cancels in-flight downloads when the user skips. Progress is tracked via wall-clock (`seek_offset + elapsed`) clamped to `duration_secs` — **not** `sink.empty()` (unreliable in rodio 0.19). `audio:ended` fires after 2 consecutive ticks where `pos >= dur - 1.0s`. Tauri IPC parameter names are **camelCase** (`durationHint`, not `duration_hint`) — this is a hard-learned gotcha, do not revert.
-- **Seek**: `playerStore.seek()` debounces by 100 ms, then calls `invoke('audio_seek', { seconds })`. The Rust side calls `sink.try_seek()` and updates `seek_offset` + `play_started`.
+- **Audio engine (Rust/rodio)**: `audio_play` downloads the full track via reqwest, decodes with symphonia/rodio `Decoder`, appends to a `Sink`. A generation counter (`AtomicU64`) cancels in-flight downloads when the user skips. Progress is tracked via atomic sample counter (`CountingSource`) — no wall-clock drift. `audio:ended` fires after ~1 s of consecutive near-end ticks at 100 ms intervals. Tauri IPC parameter names are **camelCase** (`durationHint`, not `duration_hint`) — this is a hard-learned gotcha, do not revert. `MASTER_HEADROOM = 0.891_254` (-1 dB) is applied to all volume calculations to prevent inter-sample clipping from modern 0 dBFS masters + EQ biquad ripple.
+- **Seek**: `playerStore.seek()` debounces by 100 ms, then calls `invoke('audio_seek', { seconds })`. The Rust side calls `sink.try_seek()` first; if that fails (e.g. FLAC without a SEEKTABLE), the seek silently fails — FLAC files without SEEKTABLE are not seekable. `CountingSource::try_seek` only resets the counter if the inner seek actually succeeded (prevents display desync on failure).
+- **Gapless + Crossfade mutual exclusion**: Enabling one auto-disables the other, enforced in both Settings (row opacity/pointer-events + onChange) and QueuePanel toolbar (button onClick). Both features running simultaneously caused a glitch: Crossfade moved the Sink (which had Song 2 gapless-chained) to `fading_out_sink`; after Song 1's fade-out, Song 2 played at full volume from the old Sink.
 - **Cold-start resume**: `resume()` checks `isAudioPaused` flag. If true (warm resume), calls `audio_resume`. If false (cold start after restart), calls `audio_play` with saved URL then `audio_seek` to saved `currentTime`. Position preference: server queue position > 0 → use server; otherwise use localStorage value.
 - **Drag-and-drop**: All drag sources use `dataTransfer.setData('text/plain', ...)` — WebView2 (Windows) does not support custom MIME types like `application/json`. Queue reordering calculates the **drop target index from `e.clientY`** at drop time (iterates `[data-queue-idx]` elements, picks the first whose midpoint is below the cursor). `fromIdx` comes from `dataTransfer` (set in `dragstart`, always reliable). `onDragEnd` clears refs synchronously. All drops are handled by the `<aside>` container — no `onDrop` on individual queue items.
 - **Drag-and-drop cursor (Linux)**: WebKitGTK does not honour `dropEffect` for cursor display — the cursor may show as forbidden or no indicator depending on the compositor (KDE Plasma vs GNOME). DnD works correctly regardless. This is a known WebKitGTK limitation, not fixable from web content.
@@ -229,7 +245,8 @@ The workflow is split into three jobs: `create-release` (creates the GitHub Rele
 - **Statistics page**: Library stat cards (Artists / Albums / Songs), Recently Played, Most Played, Highest Rated. Last.fm section (when configured): top artists/albums/tracks with period filter + recent scrobbles. No genre chart (removed). Data loaded in parallel via `Promise.allSettled`.
 - **Context menu**: `song` and `queue-item` types both have "Go to Album" (`Disc3` icon, shown only when `song.albumId` exists) and "Favorite/Unfavorite" toggle. Context menu type union: `'song' | 'album' | 'artist' | 'queue-item' | 'album-song'`. Starred state is read from `item.starred` (set when the item was loaded) and overridden by `starredOverrides` in `playerStore` (updated immediately on star/unstar so the UI reflects the change without a page reload). `Track` interface includes `starred?: string` — propagated via `songToTrack()` and all inline track-object construction sites.
 - **QueuePanel meta box**: Shows title (no link) → artist (linked to `/artist/:id`) → album (linked to `/album/:id`) → year (if available). Cover art is 90×90 px, top-aligned with codec/bitrate frosted-glass overlay at bottom. Default panel width 340 px. Header: title 16px/700, song count + total duration inline in `--accent` colour.
-- **Queue toolbar**: 6 round buttons (`queue-round-btn`, `border-radius: 50%`) centred in a row. Active state: `background: var(--accent); color: var(--ctp-base)`. Crossfade (≋) button: inactive click → enable + open popover; active click → disable + close. Popover: `position: absolute; top: calc(100% + 10px); right: 0; width: 170px` — right-aligned to prevent viewport overflow.
+- **Queue toolbar**: 6 round buttons (`queue-round-btn`, `border-radius: 50%`) centred in a row. Active state: `background: var(--accent); color: var(--ctp-base)`. Crossfade (≋) button: inactive click → enable + open popover; active click → disable + close. Popover: `position: absolute; top: calc(100% + 10px); right: 0; width: 170px` — right-aligned to prevent viewport overflow. **Gapless and Crossfade are mutually exclusive** — clicking one disables the other.
+- **WaveformSeek hover tooltip**: Hovering over the waveform canvas shows a floating time label (`.player-volume-pct`) above the cursor position, reusing the same CSS class as the volume % label. Rendered in a relative `<div>` wrapper; positioned via `left: ${hoverPct * 100}%`. Hidden when no track is loaded or mouse has left the canvas.
 - **Queue hover**: Queue items use `.context-active` CSS class when their context menu is open, keeping the hover highlight visible.
 - **Random Mix hover**: Row uses `.context-active` CSS class when a context menu is open for that song. `contextMenuSongId` state cleared via `useEffect` when `contextMenu.isOpen` becomes false.
 - **Favorites songs**: Full tracklist layout matching AlbumDetail — `track-row-va` grid with `#`, Title, Artist, Duration columns and a header row. Artist name clickable → artist page. "Add all to queue" button (`btn btn-surface`) next to the section title sends all favorited songs to the queue.
@@ -244,4 +261,4 @@ The workflow is split into three jobs: `create-release` (creates the GitHub Rele
 - **CoverLightbox**: Shared component (`src/components/CoverLightbox.tsx`). Props: `{ src, alt, onClose }`. ESC + overlay click to close. Used in `AlbumHeader` (album cover) and `ArtistDetail` (artist avatar, wrapped in `.artist-detail-avatar-btn`).
 - **Home page**: Section order: recent → discover → artist discovery (pill-buttons, no images) → starred → mostPlayed. Artist discovery uses `getArtists()` full list + client-side Fisher-Yates shuffle (16 random), rendered as `artist-ext-link` pill-buttons (same as ArtistDetail "Similar Artists") — no image loading, no performance impact.
 - **CoverLightbox + EQ popup**: Both use `createPortal(…, document.body)` to escape `backdrop-filter` CSS containing-block issues on the player bar and other ancestors.
-- **Version**: 1.13.0
+- **Version**: 1.16.0

README.md

@@ -22,7 +22,7 @@ Designed specifically for users hosting their own music via Navidrome or other S
 
 ## ✨ Features
 
-- 🎨 **Gorgeous UI**: 47 deeply integrated themes across 7 groups — Open Source Classics (Catppuccin, Nord, Gruvbox), Operating Systems, Games, Movies, Series, Psysonic originals, and Psysonic Mediaplayer — with smooth glassmorphism effects and micro-animations.
+- 🎨 **Gorgeous UI**: A large selection of beautiful, lean themes for every taste — Open Source Classics (Catppuccin, Nord, Gruvbox), Operating Systems, Games, Movies, Series, Psysonic originals, and Mediaplayer — with smooth glassmorphism effects and micro-animations.
 - ⚡ **Blazing Fast**: Built with Rust & Tauri — native audio engine (rodio), minimal RAM usage compared to typical Electron apps.
 - 🌍 **Internationalization (i18n)**: Fully translated into English, German, French, and Dutch.
 - 📻 **Live "Now Playing"**: See what other users on your server are currently listening to in real-time.
@@ -55,15 +55,15 @@ Designed specifically for users hosting their own music via Navidrome or other S
 - [x] Multi-server support
 - [x] IndexedDB image caching
 - [x] Random Mix with keyword filter & Super Genre mix
-- [x] 47 themes across 7 groups: Open Source Classics, Operating Systems, Games, Movies, Series, Psysonic originals, Psysonic Mediaplayer
+- [x] Large theme library across 8 groups: Open Source Classics, Operating Systems, Games, Movies, Series, Social Media, Psysonic originals, Mediaplayer
 - [x] Internationalization (English, German, French, Dutch)
 - [x] AUR package (Arch / CachyOS)
 - [x] Configurable keybindings
 - [x] Font picker (10 UI fonts)
 
 ### 📋 Planned
-- [ ] FLAC seeking fix
 - [ ] General UI polish & visual refinement
+- [ ] Accessibility (a11y) — keyboard navigation, screen reader support, ARIA labels
 - [ ] More languages
 
 ---
@@ -71,7 +71,7 @@ Designed specifically for users hosting their own music via Navidrome or other S
 ## ● Known Limitations
 
 - **Linux (drag & drop cursor feedback)**: Due to a WebKitGTK limitation, the drag cursor does not reflect the drop operation type — it may appear as a "forbidden" symbol or show no indicator at all, depending on the desktop environment. Drag and drop itself works correctly.
-- **FLAC seeking**: Jumping to a position in a FLAC file via the waveform seekbar currently does not work. Seeking in MP3, OGG, and other formats is unaffected. This is a known issue and will be investigated.
+- **FLAC seeking**: Seeking in FLAC files requires an embedded SEEKTABLE metadata block. Files encoded without one cannot be seeked — clicking the waveform has no effect. Most modern encoders include a SEEKTABLE by default. You can add one retroactively with `metaflac --add-seekpoint=10s *.flac`.
 
 ## 📥 Installation
 

package.json

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

packages/aur/PKGBUILD

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

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "psysonic"
-version = "1.12.0"
+version = "1.16.0"
 description = "Psysonic Desktop Music Player"
 authors = []
 license = ""
@@ -36,3 +36,4 @@ md5 = "0.7"
 tokio = { version = "1", features = ["rt", "time"] }
 biquad = "0.4"
 tauri-plugin-window-state = "2.4.1"
+souvlaki = { version = "0.8", default-features = false, features = ["use_zbus"] }

src-tauri/Entitlements.plist

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

src-tauri/Info.plist

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

src-tauri/src/audio.rs

@@ -380,11 +380,17 @@ impl<S: Source<Item = f32>> Source for CountingSource<S> {
     fn sample_rate(&self) -> u32 { self.inner.sample_rate() }
     fn total_duration(&self) -> Option<Duration> { self.inner.total_duration() }
     fn try_seek(&mut self, pos: Duration) -> Result<(), rodio::source::SeekError> {
-        // Reset counter to the sought position in samples.
-        let samples = (pos.as_secs_f64() * self.inner.sample_rate() as f64
-            * self.inner.channels() as f64) as u64;
-        self.counter.store(samples, Ordering::Relaxed);
-        self.inner.try_seek(pos)
+        // Reset counter only after confirming the inner seek succeeded.
+        // If we reset first and the seek fails, the counter ends up at the
+        // new position while the decoder is still at the old one — causing
+        // a permanent desync between displayed time and actual audio.
+        let result = self.inner.try_seek(pos);
+        if result.is_ok() {
+            let samples = (pos.as_secs_f64() * self.inner.sample_rate() as f64
+                * self.inner.channels() as f64) as u64;
+            self.counter.store(samples, Ordering::Relaxed);
+        }
+        result
     }
 }
 
@@ -746,6 +752,12 @@ async fn fetch_data(
     Ok(Some(data))
 }
 
+/// -1 dB headroom applied at full scale to prevent inter-sample clipping.
+/// Modern masters are often at 0 dBFS; the EQ biquad chain and resampler
+/// can produce inter-sample peaks slightly above ±1.0 → audible distortion.
+/// 10^(-1/20) ≈ 0.891 — inaudible volume difference, eliminates clipping.
+const MASTER_HEADROOM: f32 = 0.891_254;
+
 fn compute_gain(
     replay_gain_db: Option<f32>,
     replay_gain_peak: Option<f32>,
@@ -756,7 +768,7 @@ fn compute_gain(
         .unwrap_or(1.0);
     let peak = replay_gain_peak.unwrap_or(1.0).max(0.001);
     let gain_linear = gain_linear.min(1.0 / peak);
-    let effective = (volume.clamp(0.0, 1.0) * gain_linear).clamp(0.0, 1.0);
+    let effective = (volume.clamp(0.0, 1.0) * gain_linear * MASTER_HEADROOM).clamp(0.0, 1.0);
     (gain_linear, effective)
 }
 
@@ -1280,7 +1292,7 @@ pub fn audio_seek(seconds: f64, state: State<'_, AudioEngine>) -> Result<(), Str
         }
     }
 
-    // Seeking far back invalidates any pending gapless chain.
+    // Seeking back invalidates any pending gapless chain.
     let cur_pos = {
         let cur = state.current.lock().unwrap();
         cur.position()
@@ -1290,15 +1302,17 @@ pub fn audio_seek(seconds: f64, state: State<'_, AudioEngine>) -> Result<(), Str
     }
 
     let mut cur = state.current.lock().unwrap();
-    if let Some(sink) = &cur.sink {
-        sink.try_seek(Duration::from_secs_f64(seconds.max(0.0)))
-            .map_err(|e: rodio::source::SeekError| e.to_string())?;
-        if cur.paused_at.is_some() {
-            cur.paused_at = Some(seconds);
-        } else {
-            cur.seek_offset = seconds;
-            cur.play_started = Some(Instant::now());
-        }
+    if cur.sink.is_none() { return Ok(()); }
+
+    cur.sink.as_ref().unwrap()
+        .try_seek(Duration::from_secs_f64(seconds.max(0.0)))
+        .map_err(|e| e.to_string())?;
+
+    if cur.paused_at.is_some() {
+        cur.paused_at = Some(seconds);
+    } else {
+        cur.seek_offset = seconds;
+        cur.play_started = Some(Instant::now());
     }
     Ok(())
 }
@@ -1308,7 +1322,7 @@ pub fn audio_set_volume(volume: f32, state: State<'_, AudioEngine>) {
     let mut cur = state.current.lock().unwrap();
     cur.base_volume = volume.clamp(0.0, 1.0);
     if let Some(sink) = &cur.sink {
-        sink.set_volume((cur.base_volume * cur.replay_gain_linear).clamp(0.0, 1.0));
+        sink.set_volume((cur.base_volume * cur.replay_gain_linear * MASTER_HEADROOM).clamp(0.0, 1.0));
     }
 }
 

src-tauri/src/lib.rs

@@ -16,6 +16,10 @@ use tauri::{
 /// Prevents on_shortcut() accumulating duplicate handlers across JS reloads (HMR / StrictMode).
 type ShortcutMap = Mutex<HashMap<String, String>>;
 
+/// Shared handle to OS media controls (MPRIS2 on Linux, Now Playing on macOS, SMTC on Windows).
+/// `None` if souvlaki failed to initialize (e.g. no D-Bus session on Linux).
+type MprisControls = Mutex<Option<souvlaki::MediaControls>>;
+
 #[tauri::command]
 fn greet(name: &str) -> String {
     format!("Hello, {}!", name)
@@ -138,6 +142,52 @@ fn unregister_global_shortcut(
     app.global_shortcut().unregister(parsed).map_err(|e| e.to_string())
 }
 
+#[tauri::command]
+fn mpris_set_metadata(
+    controls: tauri::State<MprisControls>,
+    title: Option<String>,
+    artist: Option<String>,
+    album: Option<String>,
+    cover_url: Option<String>,
+    duration_secs: Option<f64>,
+) -> Result<(), String> {
+    use souvlaki::MediaMetadata;
+    use std::time::Duration;
+
+    let duration = duration_secs.map(|s| Duration::from_secs_f64(s));
+    let mut guard = controls.lock().unwrap();
+    let Some(ctrl) = guard.as_mut() else { return Ok(()); };
+    ctrl.set_metadata(MediaMetadata {
+        title: title.as_deref(),
+        artist: artist.as_deref(),
+        album: album.as_deref(),
+        cover_url: cover_url.as_deref(),
+        duration,
+    })
+    .map_err(|e| format!("MPRIS set_metadata failed: {e:?}"))
+}
+
+#[tauri::command]
+fn mpris_set_playback(
+    controls: tauri::State<MprisControls>,
+    playing: bool,
+    position_secs: Option<f64>,
+) -> Result<(), String> {
+    use souvlaki::{MediaPlayback, MediaPosition};
+    use std::time::Duration;
+
+    let progress = position_secs.map(|s| MediaPosition(Duration::from_secs_f64(s)));
+    let playback = if playing {
+        MediaPlayback::Playing { progress }
+    } else {
+        MediaPlayback::Paused { progress }
+    };
+    let mut guard = controls.lock().unwrap();
+    let Some(ctrl) = guard.as_mut() else { return Ok(()); };
+    ctrl.set_playback(playback)
+        .map_err(|e| format!("MPRIS set_playback failed: {e:?}"))
+}
+
 pub fn run() {
     let (audio_engine, _audio_thread) = audio::create_engine();
 
@@ -201,26 +251,62 @@ pub fn run() {
                 })
                 .build(app)?;
 
-            // Register media key global shortcuts (all platforms)
+            // ── MPRIS2 / OS media controls via souvlaki ──────────────────
+            // Windows: souvlaki SMTC init requires a valid HWND and a running
+            // COM message loop, neither of which is available this early in
+            // setup(). Disabled on Windows until we can defer init post-window.
+            // mpris_set_metadata / mpris_set_playback no-op via the None branch.
+            #[cfg(target_os = "windows")]
+            app.manage(MprisControls::new(None));
+
+            #[cfg(not(target_os = "windows"))]
             {
-                use tauri_plugin_global_shortcut::{GlobalShortcutExt, Shortcut, ShortcutState};
-                let shortcuts = ["MediaPlayPause", "MediaNextTrack", "MediaPreviousTrack"];
-                for shortcut_str in &shortcuts {
-                    if let Ok(shortcut) = shortcut_str.parse::<Shortcut>() {
-                        let shortcut_clone = shortcut_str.to_string();
-                        let _ = app.global_shortcut().on_shortcut(shortcut, move |app, _shortcut, event| {
-                            if event.state == ShortcutState::Pressed {
-                                let event_name = match shortcut_clone.as_str() {
-                                    "MediaPlayPause" => "media:play-pause",
-                                    "MediaNextTrack" => "media:next",
-                                    "MediaPreviousTrack" => "media:prev",
-                                    _ => return,
-                                };
-                                let _ = app.emit(event_name, ());
-                            }
-                        });
+                use souvlaki::{MediaControlEvent, MediaControls, PlatformConfig};
+
+                // On Linux, souvlaki requires a live D-Bus session.
+                #[cfg(target_os = "linux")]
+                let dbus_ok = std::env::var("DBUS_SESSION_BUS_ADDRESS")
+                    .map(|v| !v.is_empty())
+                    .unwrap_or(false);
+                #[cfg(not(target_os = "linux"))]
+                let dbus_ok = true;
+
+                if !dbus_ok {
+                    eprintln!("[Psysonic] No D-Bus session — MPRIS media controls disabled");
+                    app.manage(MprisControls::new(None));
+                } else {
+
+                let config = PlatformConfig {
+                    dbus_name: "psysonic",
+                    display_name: "Psysonic",
+                    hwnd: None,
+                };
+
+                let maybe_controls = match MediaControls::new(config) {
+                    Ok(mut controls) => {
+                        let app_handle = app.handle().clone();
+                        if let Err(e) = controls.attach(move |event: MediaControlEvent| {
+                            let event_name = match event {
+                                MediaControlEvent::Toggle   => "media:play-pause",
+                                MediaControlEvent::Play     => "media:play-pause",
+                                MediaControlEvent::Pause    => "media:play-pause",
+                                MediaControlEvent::Next     => "media:next",
+                                MediaControlEvent::Previous => "media:prev",
+                                _ => return,
+                            };
+                            let _ = app_handle.emit(event_name, ());
+                        }) {
+                            eprintln!("[Psysonic] Failed to attach media controls: {e:?}");
+                        }
+                        Some(controls)
                     }
-                }
+                    Err(e) => {
+                        eprintln!("[Psysonic] Could not create media controls: {e:?}");
+                        None
+                    }
+                };
+                app.manage(MprisControls::new(maybe_controls));
+                } // end dbus_ok
             }
 
             Ok(())
@@ -239,6 +325,8 @@ pub fn run() {
             exit_app,
             register_global_shortcut,
             unregister_global_shortcut,
+            mpris_set_metadata,
+            mpris_set_playback,
             audio::audio_play,
             audio::audio_pause,
             audio::audio_resume,

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "Psysonic",
-  "version": "1.13.0",
+  "version": "1.17.1",
   "identifier": "dev.psysonic.player",
   "build": {
     "beforeDevCommand": "npm run dev",
@@ -55,6 +55,10 @@
         "bundleMediaFramework": true
       }
     },
+    "macOS": {
+      "entitlements": "Entitlements.plist",
+      "minimumSystemVersion": "10.15"
+    },
     "windows": {
       "wix": {
         "upgradeCode": "e3b4c2a1-7f6d-4e8b-9c5a-2d1f0e3b8a7c"

src/App.tsx

@@ -135,9 +135,9 @@ function AppShell() {
       } as React.CSSProperties}
       onContextMenu={e => e.preventDefault()}
     >
-      <Sidebar 
-        isCollapsed={isSidebarCollapsed} 
-        toggleCollapse={() => setIsSidebarCollapsed(!isSidebarCollapsed)} 
+      <Sidebar
+        isCollapsed={isSidebarCollapsed}
+        toggleCollapse={() => setIsSidebarCollapsed(!isSidebarCollapsed)}
       />
       <main className="main-content">
         <header className="content-header">
@@ -147,12 +147,12 @@ function AppShell() {
           <LastfmIndicator />
           <NowPlayingDropdown />
           <button
-            className="collapse-btn"
+            className="queue-toggle-btn"
             onClick={toggleQueue}
             data-tooltip={t('player.toggleQueue')}
             data-tooltip-pos="bottom"
           >
-            {isQueueVisible ? <PanelRightClose size={24} /> : <PanelRight size={24} />}
+            {isQueueVisible ? <PanelRightClose size={18} /> : <PanelRight size={18} />}
           </button>
         </header>
         <div className="content-body" style={{ padding: 0, position: 'relative' }}>

src/components/AlbumHeader.tsx

@@ -103,6 +103,7 @@ export default function AlbumHeader({
 
   const totalDuration = songs.reduce((acc, s) => acc + s.duration, 0);
   const totalSize = songs.reduce((acc, s) => acc + (s.size ?? 0), 0);
+  const formatLabel = [...new Set(songs.map(s => s.suffix).filter((f): f is string => !!f))].map(f => f.toUpperCase()).join(' / ');
 
   return (
     <>
@@ -159,6 +160,7 @@ export default function AlbumHeader({
                 {info.genre && <span>· {info.genre}</span>}
                 <span>· {songs.length} Tracks</span>
                 <span>· {formatDuration(totalDuration)}</span>
+                {formatLabel && <span>· {formatLabel}</span>}
                 {info.recordLabel && (
                   <>
                     <span className="album-info-dot">·</span>

src/components/AlbumTrackList.tsx

@@ -86,7 +86,7 @@ export default function AlbumTrackList({
     albumId: song.albumId, artistId: song.artistId, duration: song.duration,
     coverArt: song.coverArt, track: song.track, year: song.year,
     bitRate: song.bitRate, suffix: song.suffix, userRating: song.userRating,
-    starred: song.starred,
+    starred: song.starred, genre: song.genre,
   });
 
   return (

src/components/ContextMenu.tsx

@@ -69,7 +69,7 @@ export default function ContextMenu() {
         const radioTracks = [...top, ...similar].map(s => ({
           id: s.id, title: s.title, artist: s.artist, album: s.album,
           albumId: s.albumId, artistId: s.artistId, duration: s.duration, coverArt: s.coverArt, track: s.track,
-          year: s.year, bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating,
+          year: s.year, bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating, genre: s.genre,
         }));
         playTrack(radioTracks[0], radioTracks);
       }
@@ -135,7 +135,7 @@ export default function ContextMenu() {
                   const tracks = albumData.songs.map(s => ({
                     id: s.id, title: s.title, artist: s.artist, album: s.album,
                     albumId: s.albumId, artistId: s.artistId, duration: s.duration, coverArt: s.coverArt, track: s.track,
-                    year: s.year, bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating,
+                    year: s.year, bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating, genre: s.genre,
                   }));
                   enqueue(tracks);
                 })}>

src/components/Hero.tsx

@@ -80,6 +80,18 @@ export default function Hero({ albums: albumsProp }: HeroProps = {}) {
 
   const album = albums[activeIdx] ?? null;
 
+  // Lazily fetch format label for the currently-visible album (cached by id)
+  const [albumFormats, setAlbumFormats] = useState<Record<string, string>>({});
+  useEffect(() => {
+    if (!album || albumFormats[album.id] !== undefined) return;
+    getAlbum(album.id).then(data => {
+      const fmts = [...new Set(data.songs.map(s => s.suffix).filter((f): f is string => !!f))];
+      setAlbumFormats(prev => ({ ...prev, [album.id]: fmts.map(f => f.toUpperCase()).join(' / ') }));
+    }).catch(() => {
+      setAlbumFormats(prev => ({ ...prev, [album.id]: '' }));
+    });
+  }, [album?.id]);
+
   // Resolve background URL via cache
   const bgRawUrl = album?.coverArt ? buildCoverArtUrl(album.coverArt, 800) : '';
   const bgCacheKey = album?.coverArt ? coverArtCacheKey(album.coverArt, 800) : '';
@@ -120,6 +132,7 @@ export default function Hero({ albums: albumsProp }: HeroProps = {}) {
             {album.year && <span className="badge">{album.year}</span>}
             {album.genre && <span className="badge">{album.genre}</span>}
             {album.songCount && <span className="badge">{album.songCount} Tracks</span>}
+            {albumFormats[album.id] && <span className="badge">{albumFormats[album.id]}</span>}
           </div>
           <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
             <button
@@ -140,7 +153,7 @@ export default function Hero({ albums: albumsProp }: HeroProps = {}) {
                   const tracks = albumData.songs.map(s => ({
                     id: s.id, title: s.title, artist: s.artist, album: s.album,
                     albumId: s.albumId, artistId: s.artistId, duration: s.duration, coverArt: s.coverArt, track: s.track,
-                    year: s.year, bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating,
+                    year: s.year, bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating, genre: s.genre,
                   }));
                   usePlayerStore.getState().enqueue(tracks);
                 } catch (_) { }

src/components/LiveSearch.tsx

@@ -58,7 +58,7 @@ export default function LiveSearch() {
     ...(results.artists.map(a => ({ id: a.id, action: () => { navigate(`/artist/${a.id}`); setOpen(false); setQuery(''); } }))),
     ...(results.albums.map(a => ({ id: a.id, action: () => { navigate(`/album/${a.id}`); setOpen(false); setQuery(''); } }))),
     ...(results.songs.map(s => ({ id: s.id, action: () => {
-      playTrack({ id: s.id, title: s.title, artist: s.artist, album: s.album, albumId: s.albumId, artistId: s.artistId, duration: s.duration, coverArt: s.coverArt, year: s.year, bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating });
+      playTrack({ id: s.id, title: s.title, artist: s.artist, album: s.album, albumId: s.albumId, artistId: s.artistId, duration: s.duration, coverArt: s.coverArt, year: s.year, bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating, genre: s.genre });
       setOpen(false); setQuery('');
     }}))),
   ] : [];
@@ -176,7 +176,7 @@ export default function LiveSearch() {
                     return (
                       <button key={s.id} className={`search-result-item${activeIndex === i ? ' active' : ''}`}
                         onClick={() => {
-                          playTrack({ id: s.id, title: s.title, artist: s.artist, album: s.album, albumId: s.albumId, artistId: s.artistId, duration: s.duration, coverArt: s.coverArt, year: s.year, bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating });
+                          playTrack({ id: s.id, title: s.title, artist: s.artist, album: s.album, albumId: s.albumId, artistId: s.artistId, duration: s.duration, coverArt: s.coverArt, year: s.year, bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating, genre: s.genre });
                           setOpen(false); setQuery('');
                         }}
                         role="option" aria-selected={activeIndex === i}>

src/components/NowPlayingDropdown.tsx

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

src/components/QueuePanel.tsx

@@ -270,7 +270,7 @@ export default function QueuePanel() {
       const tracks: Track[] = albumData.songs.map(s => ({
         id: s.id, title: s.title, artist: s.artist, album: s.album,
         albumId: s.albumId, artistId: s.artistId, duration: s.duration, coverArt: s.coverArt, track: s.track,
-        year: s.year, bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating,
+        year: s.year, bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating, genre: s.genre,
       }));
       enqueue(tracks);
     }
@@ -319,36 +319,40 @@ export default function QueuePanel() {
 
       {currentTrack && (
         <div className="queue-current-track">
-          <div className="queue-current-cover">
-            {currentTrack.coverArt ? (
-              <img src={buildCoverArtUrl(currentTrack.coverArt, 128)} alt="" loading="eager" />
-            ) : (
-              <div className="fallback"><Music size={32} /></div>
-            )}
-            {(currentTrack.bitRate || currentTrack.suffix) && (
-              <div className="queue-current-tech">
-                {currentTrack.bitRate && currentTrack.suffix
-                  ? `${currentTrack.bitRate} · ${currentTrack.suffix.toUpperCase()}`
-                  : currentTrack.suffix?.toUpperCase() ?? ''}
-              </div>
-            )}
-          </div>
-          <div className="queue-current-info">
-            <h3 className="truncate">{currentTrack.title}</h3>
-            <div
-              className="queue-current-sub truncate"
-              style={{ cursor: currentTrack.artistId ? 'pointer' : 'default' }}
-              onClick={() => currentTrack.artistId && navigate(`/artist/${currentTrack.artistId}`)}
-            >{currentTrack.artist}</div>
-            <div
-              className="queue-current-sub truncate"
-              style={{ cursor: currentTrack.albumId ? 'pointer' : 'default' }}
-              onClick={() => currentTrack.albumId && navigate(`/album/${currentTrack.albumId}`)}
-            >{currentTrack.album}</div>
-            {currentTrack.year && (
-              <div className="queue-current-sub">{currentTrack.year}</div>
-            )}
-            {renderStars(currentTrack.userRating)}
+          {(currentTrack.genre || currentTrack.suffix || currentTrack.bitRate) && (
+            <div className="queue-current-tech">
+              {[
+                currentTrack.genre,
+                currentTrack.suffix?.toUpperCase(),
+                currentTrack.bitRate ? `${currentTrack.bitRate} kbps` : undefined,
+              ].filter(Boolean).join(' · ')}
+            </div>
+          )}
+          <div className="queue-current-track-body">
+            <div className="queue-current-cover">
+              {currentTrack.coverArt ? (
+                <img src={buildCoverArtUrl(currentTrack.coverArt, 128)} alt="" loading="eager" />
+              ) : (
+                <div className="fallback"><Music size={32} /></div>
+              )}
+            </div>
+            <div className="queue-current-info">
+              <h3 className="truncate">{currentTrack.title}</h3>
+              <div
+                className="queue-current-sub truncate"
+                style={{ cursor: currentTrack.artistId ? 'pointer' : 'default' }}
+                onClick={() => currentTrack.artistId && navigate(`/artist/${currentTrack.artistId}`)}
+              >{currentTrack.artist}</div>
+              <div
+                className="queue-current-sub truncate"
+                style={{ cursor: currentTrack.albumId ? 'pointer' : 'default' }}
+                onClick={() => currentTrack.albumId && navigate(`/album/${currentTrack.albumId}`)}
+              >{currentTrack.album}</div>
+              {currentTrack.year && (
+                <div className="queue-current-sub">{currentTrack.year}</div>
+              )}
+              {renderStars(currentTrack.userRating)}
+            </div>
           </div>
         </div>
       )}
@@ -370,7 +374,7 @@ export default function QueuePanel() {
         <div className="queue-toolbar-sep" />
         <button
           className={`queue-round-btn${gaplessEnabled ? ' active' : ''}`}
-          onClick={() => setGaplessEnabled(!gaplessEnabled)}
+          onClick={() => { setCrossfadeEnabled(false); setShowCrossfadePopover(false); setGaplessEnabled(!gaplessEnabled); }}
           data-tooltip={t('queue.gapless')}
           aria-label={t('queue.gapless')}
         >
@@ -385,6 +389,7 @@ export default function QueuePanel() {
                 setCrossfadeEnabled(false);
                 setShowCrossfadePopover(false);
               } else {
+                setGaplessEnabled(false);
                 setCrossfadeEnabled(true);
                 setShowCrossfadePopover(true);
               }
@@ -524,7 +529,7 @@ export default function QueuePanel() {
               const tracks: Track[] = data.songs.map(s => ({
                 id: s.id, title: s.title, artist: s.artist, album: s.album,
                 albumId: s.albumId, artistId: s.artistId, duration: s.duration, coverArt: s.coverArt, track: s.track,
-                year: s.year, bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating,
+                year: s.year, bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating, genre: s.genre,
               }));
               if (tracks.length > 0) {
                 clearQueue();

src/components/Sidebar.tsx

@@ -61,7 +61,7 @@ function UpdateToast({ isCollapsed, latestVersion }: { isCollapsed: boolean; lat
 
 export default function Sidebar({
   isCollapsed = false,
-  toggleCollapse
+  toggleCollapse,
 }: {
   isCollapsed?: boolean;
   toggleCollapse?: () => void;

src/components/ThemePicker.tsx

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

src/components/WaveformSeek.tsx

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

src/i18n.ts

@@ -148,6 +148,7 @@ const enTranslation = {
     albums: 'Albums',
     songs: 'Songs',
     enqueueAll: 'Add all to queue',
+    removeSong: 'Remove from favorites',
   },
   randomAlbums: {
     title: 'Random Albums',
@@ -168,17 +169,20 @@ const enTranslation = {
     play: 'Play',
     trackGenre: 'Genre',
     excludeAudiobooks: 'Exclude audiobooks & radio plays',
-    excludeAudiobooksDesc: 'Matches keywords against genre, title, and album — e.g. Hörbuch, Audiobook, Spoken Word, …',
+    excludeAudiobooksDesc: 'Matches keywords against genre, title, album, and artist — e.g. Hörbuch, Audiobook, Spoken Word, …',
     genreBlocked: 'Keyword blocked',
     genreAddedToBlacklist: 'Added to filter list',
     genreAlreadyBlocked: 'Already blocked',
+    artistBlocked: 'Artist blocked',
+    artistAddedToBlacklist: 'Artist added to filter list',
+    artistClickHint: 'Click to block this artist',
     blacklistToggle: 'Keyword Filter',
     genreMixTitle: 'Genre Mix',
     genreMixDesc: 'Select a genre to get a curated random mix',
     genreMixLoadMore: 'Load 10 more',
     genreMixNoGenres: 'No genres found on server.',
     filterPanelTitle: 'Filters',
-    genreClickHint: 'Click a genre tag to add it\nas a filter keyword.\nMatches genre, title & album.',
+    genreClickHint: 'Click a genre tag to add it\nas a filter keyword.\nMatches genre, title, album & artist.',
   },
   playlists: {
     title: 'Playlists',
@@ -341,7 +345,7 @@ const enTranslation = {
     changelog: 'Changelog',
     randomMixTitle: 'Random Mix',
     randomMixBlacklistTitle: 'Custom Filter Keywords',
-    randomMixBlacklistDesc: 'Songs are excluded when any keyword matches their genre, title, or album (active when the checkbox above is on).',
+    randomMixBlacklistDesc: 'Songs are excluded when any keyword matches their genre, title, album, or artist (active when the checkbox above is on).',
     randomMixBlacklistPlaceholder: 'Add keyword…',
     randomMixBlacklistAdd: 'Add',
     randomMixBlacklistEmpty: 'No custom keywords added yet.',
@@ -377,6 +381,8 @@ const enTranslation = {
     crossfade: 'Crossfade',
     crossfadeDesc: 'Fade between tracks',
     crossfadeSecs: '{{n}}s',
+    notWithGapless: 'Not available while Gapless is active',
+    notWithCrossfade: 'Not available while Crossfade is active',
     gapless: 'Gapless Playback',
     gaplessDesc: 'Pre-buffer next track to eliminate gaps between songs',
     experimental: 'Experimental',
@@ -448,6 +454,8 @@ const enTranslation = {
     a29: 'Both are experimental audio features in Settings → Audio. Gapless pre-buffers the next track to eliminate silence between songs. Crossfade fades out the current track while fading in the next — adjust the duration (1–10 s) to taste.',
     q30: 'Does Psysonic show lyrics?',
     a30: 'Yes. Click the microphone icon in the player bar to open the Lyrics tab in the queue panel. Psysonic fetches lyrics automatically from LRCLIB. If synced lyrics are available, the active line is highlighted and scrolls in real time as the song plays. If only plain text is available, the full text is shown statically.',
+    q33: 'Can I seek (scrub) within a FLAC file?',
+    a33: 'Seeking in FLAC files requires a SEEKTABLE metadata block to be embedded in the file. Files that were encoded without one cannot be seeked — clicking the waveform will have no effect. Most modern encoders (e.g. ffmpeg, flac CLI) include a SEEKTABLE by default. You can add one to existing files using: flac --replay-gain *.flac or metaflac --add-seekpoint=10s *.flac',
     q31: 'Can I customize keyboard shortcuts?',
     a31: 'Yes. Settings → Keyboard Shortcuts lets you remap in-app actions (Play/Pause, Next, Previous, Volume Up/Down, Fullscreen, and more) to any key. Settings → Global Shortcuts lets you assign system-wide shortcuts that trigger even when Psysonic is in the background.',
     q32: 'Can I change the font?',
@@ -687,6 +695,7 @@ const deTranslation = {
     albums: 'Alben',
     songs: 'Songs',
     enqueueAll: 'Alle in die Warteschlange',
+    removeSong: 'Aus Favoriten entfernen',
   },
   randomAlbums: {
     title: 'Zufallsalben',
@@ -707,17 +716,20 @@ const deTranslation = {
     play: 'Abspielen',
     trackGenre: 'Genre',
     excludeAudiobooks: 'Hörbücher & Hörspiele ausschließen',
-    excludeAudiobooksDesc: 'Prüft Keywords gegen Genre, Titel und Album — z. B. Hörbuch, Audiobook, Spoken Word, …',
+    excludeAudiobooksDesc: 'Prüft Keywords gegen Genre, Titel, Album und Künstler — z. B. Hörbuch, Audiobook, Spoken Word, …',
     genreBlocked: 'Keyword gesperrt',
     genreAddedToBlacklist: 'Zur Filterliste hinzugefügt',
     genreAlreadyBlocked: 'Bereits gesperrt',
+    artistBlocked: 'Künstler gesperrt',
+    artistAddedToBlacklist: 'Künstler zur Filterliste hinzugefügt',
+    artistClickHint: 'Klicken um diesen Künstler zu sperren',
     blacklistToggle: 'Keyword-Filter',
     genreMixTitle: 'Genre-Mix',
     genreMixDesc: 'Genre auswählen für einen passenden Zufallsmix',
     genreMixLoadMore: '10 weitere laden',
     genreMixNoGenres: 'Keine Genres auf dem Server gefunden.',
     filterPanelTitle: 'Filter',
-    genreClickHint: 'Genre-Tag anklicken,\num es als Filter-Keyword hinzuzufügen.\nPrüft Genre, Titel & Album.',
+    genreClickHint: 'Genre-Tag anklicken,\num es als Filter-Keyword hinzuzufügen.\nPrüft Genre, Titel, Album & Künstler.',
   },
   playlists: {
     title: 'Playlists',
@@ -880,7 +892,7 @@ const deTranslation = {
     changelog: 'Changelog',
     randomMixTitle: 'Zufallsmix',
     randomMixBlacklistTitle: 'Eigene Filter-Keywords',
-    randomMixBlacklistDesc: 'Songs werden ausgeschlossen, wenn ein Keyword auf Genre, Titel oder Album zutrifft (aktiv wenn die Checkbox oben an ist).',
+    randomMixBlacklistDesc: 'Songs werden ausgeschlossen, wenn ein Keyword auf Genre, Titel, Album oder Künstler zutrifft (aktiv wenn die Checkbox oben an ist).',
     randomMixBlacklistPlaceholder: 'Keyword hinzufügen…',
     randomMixBlacklistAdd: 'Hinzufügen',
     randomMixBlacklistEmpty: 'Noch keine eigenen Keywords hinzugefügt.',
@@ -916,6 +928,8 @@ const deTranslation = {
     crossfade: 'Crossfade',
     crossfadeDesc: 'Überblendung zwischen Tracks',
     crossfadeSecs: '{{n}}s',
+    notWithGapless: 'Nicht verfügbar wenn Nahtlose Wiedergabe aktiv ist',
+    notWithCrossfade: 'Nicht verfügbar wenn Crossfade aktiv ist',
     gapless: 'Nahtlose Wiedergabe',
     gaplessDesc: 'Nächsten Track vorpuffern um Lücken zwischen Songs zu vermeiden',
     experimental: 'Experimentell',
@@ -987,6 +1001,8 @@ const deTranslation = {
     a29: 'Beides sind experimentelle Audiofunktionen in Einstellungen → Audio. Nahtlose Wiedergabe puffert den nächsten Track vor, um Stille zu eliminieren. Crossfade blendet den aktuellen Track aus, während der nächste eingeblendet wird — Dauer (1–10 s) einstellbar.',
     q30: 'Zeigt Psysonic Songtexte an?',
     a30: 'Ja. Klick auf das Mikrofon-Icon in der Playerleiste öffnet den Lyrics-Tab im Queue-Panel. Psysonic lädt Texte automatisch von LRCLIB. Sind synchronisierte Lyrics verfügbar, wird die aktuelle Zeile hervorgehoben und scrollt in Echtzeit mit. Bei reinen Texten wird der Volltext statisch angezeigt.',
+    q33: 'Kann ich in FLAC-Dateien seekbar (spulen)?',
+    a33: 'Das Spulen in FLAC-Dateien erfordert einen SEEKTABLE-Metadatenblock in der Datei. Dateien, die ohne diesen Block kodiert wurden, können nicht geseekt werden — ein Klick auf die Wellenform hat keinen Effekt. Die meisten modernen Encoder (z. B. ffmpeg, flac CLI) fügen standardmäßig eine SEEKTABLE ein. Mit folgendem Befehl kann man sie nachträglich hinzufügen: flac --replay-gain *.flac oder metaflac --add-seekpoint=10s *.flac',
     q31: 'Kann ich Tastenkürzel anpassen?',
     a31: 'Ja. Einstellungen → Tastenkürzel erlaubt das Neuzuordnen von In-App-Aktionen (Play/Pause, Weiter, Zurück, Lautstärke, Vollbild u. v. m.). Einstellungen → Globale Shortcuts ermöglicht systemweite Kürzel, die auch im Hintergrund ausgelöst werden.',
     q32: 'Kann ich die Schriftart ändern?',
@@ -1226,6 +1242,7 @@ const frTranslation = {
     albums: 'Albums',
     songs: 'Morceaux',
     enqueueAll: 'Tout ajouter à la file',
+    removeSong: 'Retirer des favoris',
   },
   randomAlbums: {
     title: 'Albums aléatoires',
@@ -1246,17 +1263,20 @@ const frTranslation = {
     play: 'Lire',
     trackGenre: 'Genre',
     excludeAudiobooks: 'Exclure les livres audio et pièces radiophoniques',
-    excludeAudiobooksDesc: 'Correspond aux mots-clés dans le genre, le titre et l\'album — ex. Hörbuch, Audiobook, Spoken Word, …',
+    excludeAudiobooksDesc: 'Correspond aux mots-clés dans le genre, le titre, l\'album et l\'artiste — ex. Hörbuch, Audiobook, Spoken Word, …',
     genreBlocked: 'Mot-clé bloqué',
     genreAddedToBlacklist: 'Ajouté à la liste de filtres',
     genreAlreadyBlocked: 'Déjà bloqué',
+    artistBlocked: 'Artiste bloqué',
+    artistAddedToBlacklist: 'Artiste ajouté à la liste de filtres',
+    artistClickHint: 'Cliquer pour bloquer cet artiste',
     blacklistToggle: 'Filtre par mot-clé',
     genreMixTitle: 'Mix par genre',
     genreMixDesc: 'Sélectionnez un genre pour obtenir un mix aléatoire',
     genreMixLoadMore: 'Charger 10 de plus',
     genreMixNoGenres: 'Aucun genre trouvé sur le serveur.',
     filterPanelTitle: 'Filtres',
-    genreClickHint: 'Cliquez sur un tag de genre pour l\'ajouter\ncomme mot-clé de filtre.\nCorrespond au genre, titre et album.',
+    genreClickHint: 'Cliquez sur un tag de genre pour l\'ajouter\ncomme mot-clé de filtre.\nCorrespond au genre, titre, album et artiste.',
   },
   playlists: {
     title: 'Listes de lecture',
@@ -1419,7 +1439,7 @@ const frTranslation = {
     changelog: 'Journal des modifications',
     randomMixTitle: 'Mix aléatoire',
     randomMixBlacklistTitle: 'Mots-clés de filtre personnalisés',
-    randomMixBlacklistDesc: 'Les morceaux sont exclus si un mot-clé correspond à leur genre, titre ou album (actif quand la case ci-dessus est cochée).',
+    randomMixBlacklistDesc: 'Les morceaux sont exclus si un mot-clé correspond à leur genre, titre, album ou artiste (actif quand la case ci-dessus est cochée).',
     randomMixBlacklistPlaceholder: 'Ajouter un mot-clé…',
     randomMixBlacklistAdd: 'Ajouter',
     randomMixBlacklistEmpty: 'Aucun mot-clé personnalisé ajouté.',
@@ -1455,6 +1475,8 @@ const frTranslation = {
     crossfade: 'Fondu enchaîné',
     crossfadeDesc: 'Fondu entre les pistes',
     crossfadeSecs: '{{n}}s',
+    notWithGapless: 'Non disponible quand la lecture sans blanc est active',
+    notWithCrossfade: 'Non disponible quand le fondu enchaîné est actif',
     gapless: 'Lecture sans blanc',
     gaplessDesc: 'Préparer la piste suivante pour éliminer les silences entre les morceaux',
     experimental: 'Expérimental',
@@ -1526,6 +1548,8 @@ const frTranslation = {
     a29: 'Ce sont des fonctionnalités audio expérimentales dans Paramètres → Audio. La lecture sans blanc pré-charge la piste suivante pour éliminer les silences. Le fondu enchaîné effectue un fondu sortant de la piste en cours tout en faisant un fondu entrant de la suivante — durée réglable (1–10 s).',
     q30: 'Psysonic affiche-t-il les paroles ?',
     a30: 'Oui. Cliquez sur l\'icône microphone dans la barre du lecteur pour ouvrir l\'onglet Paroles. Psysonic récupère automatiquement les paroles depuis LRCLIB. Si des paroles synchronisées sont disponibles, la ligne active est mise en évidence et défile en temps réel. Sinon, le texte complet est affiché statiquement.',
+    q33: 'Puis-je faire une recherche (scrubbing) dans un fichier FLAC ?',
+    a33: 'La navigation dans les fichiers FLAC nécessite un bloc de métadonnées SEEKTABLE intégré dans le fichier. Les fichiers encodés sans ce bloc ne peuvent pas être recherchés — cliquer sur la forme d\'onde n\'aura aucun effet. La plupart des encodeurs modernes (p. ex. ffmpeg, flac CLI) incluent une SEEKTABLE par défaut. Vous pouvez en ajouter une aux fichiers existants avec : flac --replay-gain *.flac ou metaflac --add-seekpoint=10s *.flac',
     q31: 'Puis-je personnaliser les raccourcis clavier ?',
     a31: 'Oui. Paramètres → Raccourcis clavier permet de réattribuer les actions in-app (Lecture/Pause, Suivant, Précédent, Volume, Plein écran, etc.). Paramètres → Raccourcis globaux permet d\'assigner des raccourcis système actifs même quand l\'application est en arrière-plan.',
     q32: 'Puis-je changer la police ?',
@@ -1765,6 +1789,7 @@ const nlTranslation = {
     albums: 'Albums',
     songs: 'Nummers',
     enqueueAll: 'Alles aan wachtrij toevoegen',
+    removeSong: 'Verwijderen uit favorieten',
   },
   randomAlbums: {
     title: 'Willekeurige albums',
@@ -1785,17 +1810,20 @@ const nlTranslation = {
     play: 'Afspelen',
     trackGenre: 'Genre',
     excludeAudiobooks: 'Luisterboeken en hoorspelen uitsluiten',
-    excludeAudiobooksDesc: 'Vergelijkt trefwoorden met genre, titel en album — bijv. Hörbuch, Audiobook, Spoken Word, …',
+    excludeAudiobooksDesc: 'Vergelijkt trefwoorden met genre, titel, album en artiest — bijv. Hörbuch, Audiobook, Spoken Word, …',
     genreBlocked: 'Trefwoord geblokkeerd',
     genreAddedToBlacklist: 'Aan filterlijst toegevoegd',
     genreAlreadyBlocked: 'Al geblokkeerd',
+    artistBlocked: 'Artiest geblokkeerd',
+    artistAddedToBlacklist: 'Artiest aan filterlijst toegevoegd',
+    artistClickHint: 'Klik om deze artiest te blokkeren',
     blacklistToggle: 'Trefwoordfilter',
     genreMixTitle: 'Genremix',
     genreMixDesc: 'Selecteer een genre voor een samengestelde willekeurige mix',
     genreMixLoadMore: '10 meer laden',
     genreMixNoGenres: 'Geen genres gevonden op server.',
     filterPanelTitle: 'Filters',
-    genreClickHint: 'Klik op een genre-tag om het\ntoe te voegen als filtertrefwoord.\nVergelijkt genre, titel & album.',
+    genreClickHint: 'Klik op een genre-tag om het\ntoe te voegen als filtertrefwoord.\nVergelijkt genre, titel, album & artiest.',
   },
   playlists: {
     title: 'Afspeellijsten',
@@ -1958,7 +1986,7 @@ const nlTranslation = {
     changelog: 'Wijzigingslog',
     randomMixTitle: 'Willekeurige mix',
     randomMixBlacklistTitle: 'Aangepaste filtertrefwoorden',
-    randomMixBlacklistDesc: 'Nummers worden uitgesloten als een trefwoord overeenkomt met hun genre, titel of album (actief wanneer het selectievakje hierboven is aangevinkt).',
+    randomMixBlacklistDesc: 'Nummers worden uitgesloten als een trefwoord overeenkomt met hun genre, titel, album of artiest (actief wanneer het selectievakje hierboven is aangevinkt).',
     randomMixBlacklistPlaceholder: 'Trefwoord toevoegen…',
     randomMixBlacklistAdd: 'Toevoegen',
     randomMixBlacklistEmpty: 'Nog geen aangepaste trefwoorden toegevoegd.',
@@ -1994,6 +2022,8 @@ const nlTranslation = {
     crossfade: 'Overgang',
     crossfadeDesc: 'Fade tussen nummers',
     crossfadeSecs: '{{n}}s',
+    notWithGapless: 'Niet beschikbaar als naadloos afspelen actief is',
+    notWithCrossfade: 'Niet beschikbaar als overgang actief is',
     gapless: 'Naadloos afspelen',
     gaplessDesc: 'Volgend nummer vooraf bufferen om stiltes tussen nummers te elimineren',
     experimental: 'Experimenteel',
@@ -2065,6 +2095,8 @@ const nlTranslation = {
     a29: 'Dit zijn experimentele audiofuncties in Instellingen → Audio. Naadloos afspelen buffert het volgende nummer voor om stiltes te elimineren. Overgang fadeert het huidige nummer uit terwijl het volgende infadeert — duur (1–10 s) instelbaar.',
     q30: 'Toont Psysonic songteksten?',
     a30: 'Ja. Klik op het microfoonpictogram in de spelerbalk om het tabblad Songteksten te openen. Psysonic haalt teksten automatisch op van LRCLIB. Als gesynchroniseerde teksten beschikbaar zijn, wordt de actieve regel gemarkeerd en scrolt mee in realtime. Anders wordt de volledige tekst statisch getoond.',
+    q33: 'Kan ik door een FLAC-bestand scrubben (zoeken)?',
+    a33: 'Zoeken in FLAC-bestanden vereist een SEEKTABLE-metadatablok in het bestand. Bestanden die zonder dit blok zijn gecodeerd, kunnen niet worden doorzocht — klikken op de golfvorm heeft geen effect. De meeste moderne encoders (bijv. ffmpeg, flac CLI) bevatten standaard een SEEKTABLE. U kunt er een toevoegen aan bestaande bestanden met: flac --replay-gain *.flac of metaflac --add-seekpoint=10s *.flac',
     q31: 'Kan ik sneltoetsen aanpassen?',
     a31: 'Ja. Instellingen → Sneltoetsen laat je in-app acties (Afspelen/Pauzeren, Volgende, Vorige, Volume, Volledig scherm, enz.) hertoewijzen. Instellingen → Globale sneltoetsen laat je systeembrede sneltoetsen instellen die werken ook als de app op de achtergrond staat.',
     q32: 'Kan ik het lettertype wijzigen?',

src/pages/AlbumDetail.tsx

@@ -70,6 +70,7 @@ export default function AlbumDetail() {
       id: s.id, title: s.title, artist: s.artist, album: s.album,
       albumId: s.albumId, artistId: s.artistId, duration: s.duration, coverArt: s.coverArt,
       track: s.track, year: s.year, bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating,
+      starred: s.starred, genre: s.genre,
     }));
     if (tracks[0]) playTrack(tracks[0], tracks);
   };
@@ -80,6 +81,7 @@ export default function AlbumDetail() {
       id: s.id, title: s.title, artist: s.artist, album: s.album,
       albumId: s.albumId, artistId: s.artistId, duration: s.duration, coverArt: s.coverArt,
       track: s.track, year: s.year, bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating,
+      starred: s.starred, genre: s.genre,
     }));
     enqueue(tracks);
   };
@@ -89,6 +91,7 @@ export default function AlbumDetail() {
       id: song.id, title: song.title, artist: song.artist, album: song.album,
       albumId: song.albumId, artistId: song.artistId, duration: song.duration, coverArt: song.coverArt,
       track: song.track, year: song.year, bitRate: song.bitRate, suffix: song.suffix, userRating: song.userRating,
+      starred: song.starred, genre: song.genre,
     };
     playTrack(track, [track]);
   };

src/pages/Favorites.tsx

@@ -3,9 +3,10 @@ import AlbumRow from '../components/AlbumRow';
 import ArtistRow from '../components/ArtistRow';
 import { getStarred, SubsonicAlbum, SubsonicArtist, SubsonicSong } from '../api/subsonic';
 import { usePlayerStore } from '../store/playerStore';
-import { Play, ListPlus } from 'lucide-react';
+import { ListPlus, X } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
+import { unstar } from '../api/subsonic';
 
 export default function Favorites() {
   const { t } = useTranslation();
@@ -15,6 +16,11 @@ export default function Favorites() {
   const [loading, setLoading] = useState(true);
 
   const { playTrack, enqueue } = usePlayerStore();
+
+  function removeSong(id: string) {
+    unstar(id, 'song').catch(() => {});
+    setSongs(prev => prev.filter(s => s.id !== id));
+  }
   const openContextMenu = usePlayerStore(s => s.openContextMenu);
   const navigate = useNavigate();
 
@@ -67,7 +73,7 @@ export default function Favorites() {
                     const tracks = songs.map(s => ({
                       id: s.id, title: s.title, artist: s.artist, album: s.album,
                       albumId: s.albumId, artistId: s.artistId, duration: s.duration, coverArt: s.coverArt,
-                      track: s.track, year: s.year, bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating,
+                      track: s.track, year: s.year, bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating, genre: s.genre,
                     }));
                     enqueue(tracks);
                   }}
@@ -77,22 +83,24 @@ export default function Favorites() {
                 </button>
               </div>
               <div className="tracklist" style={{ padding: 0 }}>
-                <div className="tracklist-header tracklist-va">
+                <div className="tracklist-header tracklist-va" style={{ gridTemplateColumns: '40px 1fr 1fr 60px 32px' }}>
                   <div className="col-center">#</div>
                   <div>{t('albumDetail.trackTitle')}</div>
                   <div>{t('albumDetail.trackArtist')}</div>
                   <div className="col-center">{t('albumDetail.trackDuration')}</div>
+                  <div />
                 </div>
                 {songs.map((song, i) => {
                   const track = {
                     id: song.id, title: song.title, artist: song.artist, album: song.album,
                     albumId: song.albumId, artistId: song.artistId, duration: song.duration, coverArt: song.coverArt,
-                    track: song.track, year: song.year, bitRate: song.bitRate, suffix: song.suffix, userRating: song.userRating, starred: song.starred,
+                    track: song.track, year: song.year, bitRate: song.bitRate, suffix: song.suffix, userRating: song.userRating, starred: song.starred, genre: song.genre,
                   };
                   return (
                     <div
                       key={song.id}
                       className="track-row track-row-va"
+                      style={{ gridTemplateColumns: '40px 1fr 1fr 60px 32px' }}
                       onDoubleClick={() => playTrack(song, songs)}
                       onContextMenu={e => { e.preventDefault(); openContextMenu(e.clientX, e.clientY, track, 'song'); }}
                       role="row"
@@ -118,6 +126,16 @@ export default function Favorites() {
                       <div className="track-duration">
                         {Math.floor(song.duration / 60)}:{(song.duration % 60).toString().padStart(2, '0')}
                       </div>
+                      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                        <button
+                          className="btn-icon fav-remove-btn"
+                          data-tooltip={t('favorites.removeSong')}
+                          onClick={e => { e.stopPropagation(); removeSong(song.id); }}
+                          aria-label={t('favorites.removeSong')}
+                        >
+                          <X size={14} />
+                        </button>
+                      </div>
                     </div>
                   );
                 })}

src/pages/Help.tsx

@@ -46,6 +46,7 @@ export default function Help() {
         { q: t('help.q24'), a: t('help.a24') },
         { q: t('help.q29'), a: t('help.a29') },
         { q: t('help.q30'), a: t('help.a30') },
+        { q: t('help.q33'), a: t('help.a33') },
       ],
     },
     {

src/pages/NowPlaying.tsx

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

src/pages/Playlists.tsx

@@ -63,7 +63,7 @@ export default function Playlists() {
         id: s.id, title: s.title, artist: s.artist, album: s.album,
         albumId: s.albumId, artistId: s.artistId, duration: s.duration,
         coverArt: s.coverArt, track: s.track, year: s.year,
-        bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating,
+        bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating, genre: s.genre,
       }));
       if (tracks.length > 0) { clearQueue(); playTrack(tracks[0], tracks); }
     } catch (e) { console.error('Failed to play playlist', e); }

src/pages/RandomMix.tsx

@@ -48,6 +48,7 @@ export default function RandomMix() {
   const [starredSongs, setStarredSongs] = useState<Set<string>>(new Set());
   const { excludeAudiobooks, setExcludeAudiobooks, customGenreBlacklist, setCustomGenreBlacklist } = useAuthStore();
   const [addedGenre, setAddedGenre] = useState<string | null>(null);
+  const [addedArtist, setAddedArtist] = useState<string | null>(null);
 
   // Blacklist panel state
   const [blacklistOpen, setBlacklistOpen] = useState(false);
@@ -94,6 +95,7 @@ export default function RandomMix() {
     if (song.genre && checkText(song.genre)) return false;
     if (song.title && checkText(song.title)) return false;
     if (song.album && checkText(song.album)) return false;
+    if (song.artist && checkText(song.artist)) return false;
     return true;
   });
 
@@ -342,10 +344,10 @@ export default function RandomMix() {
               {genreMixSongs.map(song => (
                 <div key={song.id} className={`track-row${contextMenuSongId === song.id ? ' context-active' : ''}`} style={{ gridTemplateColumns: '36px 1fr 1fr 1fr 120px 80px' }}
                   onDoubleClick={() => playTrack(song, genreMixSongs)} role="row" draggable
-                  onContextMenu={e => { e.preventDefault(); setContextMenuSongId(song.id); openContextMenu(e.clientX, e.clientY, { id: song.id, title: song.title, artist: song.artist, album: song.album, albumId: song.albumId, artistId: song.artistId, duration: song.duration, coverArt: song.coverArt, track: song.track, year: song.year, bitRate: song.bitRate, suffix: song.suffix, userRating: song.userRating, starred: song.starred }, 'song'); }}
+                  onContextMenu={e => { e.preventDefault(); setContextMenuSongId(song.id); openContextMenu(e.clientX, e.clientY, { id: song.id, title: song.title, artist: song.artist, album: song.album, albumId: song.albumId, artistId: song.artistId, duration: song.duration, coverArt: song.coverArt, track: song.track, year: song.year, bitRate: song.bitRate, suffix: song.suffix, userRating: song.userRating, starred: song.starred, genre: song.genre }, 'song'); }}
                   onDragStart={e => {
                     e.dataTransfer.effectAllowed = 'copy';
-                    e.dataTransfer.setData('text/plain', JSON.stringify({ type: 'song', track: { id: song.id, title: song.title, artist: song.artist, album: song.album, albumId: song.albumId, artistId: song.artistId, duration: song.duration, coverArt: song.coverArt, track: song.track, year: song.year, bitRate: song.bitRate, suffix: song.suffix, userRating: song.userRating } }));
+                    e.dataTransfer.setData('text/plain', JSON.stringify({ type: 'song', track: { id: song.id, title: song.title, artist: song.artist, album: song.album, albumId: song.albumId, artistId: song.artistId, duration: song.duration, coverArt: song.coverArt, track: song.track, year: song.year, bitRate: song.bitRate, suffix: song.suffix, userRating: song.userRating, genre: song.genre } }));
                   }}
                 >
                   <button className="btn btn-ghost" style={{ padding: 4 }} onClick={e => { e.stopPropagation(); playTrack(song, genreMixSongs); }}>
@@ -391,7 +393,7 @@ export default function RandomMix() {
               draggable
               onContextMenu={e => {
                 e.preventDefault();
-                const track = { id: song.id, title: song.title, artist: song.artist, album: song.album, albumId: song.albumId, artistId: song.artistId, duration: song.duration, coverArt: song.coverArt, track: song.track, year: song.year, bitRate: song.bitRate, suffix: song.suffix, userRating: song.userRating, starred: song.starred };
+                const track = { id: song.id, title: song.title, artist: song.artist, album: song.album, albumId: song.albumId, artistId: song.artistId, duration: song.duration, coverArt: song.coverArt, track: song.track, year: song.year, bitRate: song.bitRate, suffix: song.suffix, userRating: song.userRating, starred: song.starred, genre: song.genre };
                 setContextMenuSongId(song.id);
                 openContextMenu(e.clientX, e.clientY, track, 'song');
               }}
@@ -400,7 +402,7 @@ export default function RandomMix() {
                 const track = {
                   id: song.id, title: song.title, artist: song.artist, album: song.album,
                   albumId: song.albumId, artistId: song.artistId, duration: song.duration, coverArt: song.coverArt, track: song.track,
-                  year: song.year, bitRate: song.bitRate, suffix: song.suffix, userRating: song.userRating,
+                  year: song.year, bitRate: song.bitRate, suffix: song.suffix, userRating: song.userRating, genre: song.genre,
                 };
                 e.dataTransfer.setData('text/plain', JSON.stringify({ type: 'song', track }));
               }}
@@ -419,7 +421,45 @@ export default function RandomMix() {
               </div>
 
               <div className="track-artist-cell">
-                <span className="track-artist">{song.artist}</span>
+                {(() => {
+                  const artist = song.artist;
+                  if (!artist) return <span className="track-artist">—</span>;
+                  const isBlocked = customGenreBlacklist.some(bg => artist.toLowerCase().includes(bg.toLowerCase()));
+                  const justAdded = addedArtist === artist;
+                  return (
+                    <button
+                      className="btn btn-ghost track-artist"
+                      style={{
+                        fontSize: 'inherit',
+                        padding: '1px 6px',
+                        borderRadius: 'var(--radius-sm)',
+                        background: isBlocked ? 'color-mix(in srgb, var(--danger) 15%, transparent)' : justAdded ? 'color-mix(in srgb, var(--accent) 15%, transparent)' : 'transparent',
+                        color: isBlocked ? 'var(--danger)' : justAdded ? 'var(--accent)' : 'var(--text-secondary)',
+                        border: 'none',
+                        cursor: isBlocked ? 'default' : 'pointer',
+                        maxWidth: '100%',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                        height: 'auto',
+                        minHeight: 'unset',
+                        textAlign: 'left',
+                      }}
+                      onClick={() => {
+                        if (isBlocked) return;
+                        const already = customGenreBlacklist.some(bg => artist.toLowerCase().includes(bg.toLowerCase()));
+                        if (!already) {
+                          setCustomGenreBlacklist([...customGenreBlacklist, artist]);
+                          setAddedArtist(artist);
+                          setTimeout(() => setAddedArtist(null), 1500);
+                        }
+                      }}
+                      data-tooltip={isBlocked ? t('randomMix.artistBlocked') : justAdded ? t('randomMix.artistAddedToBlacklist') : t('randomMix.artistClickHint')}
+                    >
+                      {artist}
+                    </button>
+                  );
+                })()}
               </div>
 
               <div className="track-info">

src/pages/SearchResults.tsx

@@ -35,12 +35,12 @@ export default function SearchResults() {
       id: song.id, title: song.title, artist: song.artist, album: song.album,
       albumId: song.albumId, artistId: song.artistId, duration: song.duration,
       coverArt: song.coverArt, year: song.year, bitRate: song.bitRate,
-      suffix: song.suffix, userRating: song.userRating,
+      suffix: song.suffix, userRating: song.userRating, genre: song.genre,
     }, list.map(s => ({
       id: s.id, title: s.title, artist: s.artist, album: s.album,
       albumId: s.albumId, artistId: s.artistId, duration: s.duration,
       coverArt: s.coverArt, year: s.year, bitRate: s.bitRate,
-      suffix: s.suffix, userRating: s.userRating,
+      suffix: s.suffix, userRating: s.userRating, genre: s.genre,
     })));
   };
 
@@ -99,7 +99,7 @@ export default function SearchResults() {
                         id: song.id, title: song.title, artist: song.artist, album: song.album,
                         albumId: song.albumId, artistId: song.artistId, duration: song.duration,
                         coverArt: song.coverArt, year: song.year, bitRate: song.bitRate,
-                        suffix: song.suffix, userRating: song.userRating,
+                        suffix: song.suffix, userRating: song.userRating, genre: song.genre,
                       };
                       e.dataTransfer.setData('text/plain', JSON.stringify({ type: 'song', track }));
                     }}

src/pages/Settings.tsx

@@ -296,19 +296,22 @@ export default function Settings() {
               <div className="divider" />
 
               {/* Crossfade */}
-              <div className="settings-toggle-row">
+              <div className="settings-toggle-row" style={auth.gaplessEnabled ? { opacity: 0.45, pointerEvents: 'none' } : undefined}>
                 <div>
                   <div style={{ fontWeight: 500 }}>
                     {t('settings.crossfade')}
                   </div>
-                  <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>{t('settings.crossfadeDesc')}</div>
+                  <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>
+                    {auth.gaplessEnabled ? t('settings.notWithGapless') : t('settings.crossfadeDesc')}
+                  </div>
                 </div>
                 <label className="toggle-switch" aria-label={t('settings.crossfade')}>
-                  <input type="checkbox" checked={auth.crossfadeEnabled} onChange={e => auth.setCrossfadeEnabled(e.target.checked)} id="crossfade-toggle" />
+                  <input type="checkbox" checked={auth.crossfadeEnabled} disabled={auth.gaplessEnabled}
+                    onChange={e => { auth.setGaplessEnabled(false); auth.setCrossfadeEnabled(e.target.checked); }} id="crossfade-toggle" />
                   <span className="toggle-track" />
                 </label>
               </div>
-              {auth.crossfadeEnabled && (
+              {auth.crossfadeEnabled && !auth.gaplessEnabled && (
                 <div style={{ paddingLeft: '1rem', marginTop: '0.5rem', display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
                   <input
                     type="range"
@@ -329,15 +332,18 @@ export default function Settings() {
               <div className="divider" />
 
               {/* Gapless */}
-              <div className="settings-toggle-row">
+              <div className="settings-toggle-row" style={auth.crossfadeEnabled ? { opacity: 0.45, pointerEvents: 'none' } : undefined}>
                 <div>
                   <div style={{ fontWeight: 500 }}>
                     {t('settings.gapless')}
                   </div>
-                  <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>{t('settings.gaplessDesc')}</div>
+                  <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>
+                    {auth.crossfadeEnabled ? t('settings.notWithCrossfade') : t('settings.gaplessDesc')}
+                  </div>
                 </div>
                 <label className="toggle-switch" aria-label={t('settings.gapless')}>
-                  <input type="checkbox" checked={auth.gaplessEnabled} onChange={e => auth.setGaplessEnabled(e.target.checked)} id="gapless-toggle" />
+                  <input type="checkbox" checked={auth.gaplessEnabled} disabled={auth.crossfadeEnabled}
+                    onChange={e => { auth.setCrossfadeEnabled(false); auth.setGaplessEnabled(e.target.checked); }} id="gapless-toggle" />
                   <span className="toggle-track" />
                 </label>
               </div>

src/store/playerStore.ts

@@ -2,7 +2,7 @@ import { create } from 'zustand';
 import { persist, createJSONStorage } from 'zustand/middleware';
 import { invoke } from '@tauri-apps/api/core';
 import { listen } from '@tauri-apps/api/event';
-import { buildStreamUrl, getPlayQueue, savePlayQueue, reportNowPlaying, scrobbleSong, SubsonicSong } from '../api/subsonic';
+import { buildStreamUrl, buildCoverArtUrl, getPlayQueue, savePlayQueue, reportNowPlaying, scrobbleSong, SubsonicSong } from '../api/subsonic';
 import { lastfmScrobble, lastfmUpdateNowPlaying, lastfmLoveTrack, lastfmUnloveTrack, lastfmGetTrackLoved, lastfmGetAllLovedTracks } from '../api/lastfm';
 import { useAuthStore } from './authStore';
 
@@ -24,6 +24,7 @@ export interface Track {
   replayGainAlbumDb?: number;
   replayGainPeak?: number;
   starred?: string;
+  genre?: string;
 }
 
 export function songToTrack(song: SubsonicSong): Track {
@@ -45,6 +46,7 @@ export function songToTrack(song: SubsonicSong): Track {
     replayGainAlbumDb: song.replayGain?.albumGain,
     replayGainPeak: song.replayGain?.trackPeak,
     starred: song.starred,
+    genre: song.genre,
   };
 }
 
@@ -131,6 +133,11 @@ let togglePlayLock = false;
 // Used to suppress ghost-commands from stale IPC arriving after the switch.
 let lastGaplessSwitchTime = 0;
 
+// Track ID that has already been sent to audio_chain_preload / audio_preload.
+// Prevents the 100ms progress ticker from firing 300 identical IPC calls over
+// the last 30 seconds of a track, each spawning its own HTTP download.
+let gaplessPreloadingId: string | null = null;
+
 // ─── Server queue sync ─────────────────────────────────────────────────────────
 let syncTimeout: ReturnType<typeof setTimeout> | null = null;
 function syncQueueToServer(queue: Track[], currentTrack: Track | null, currentTime: number) {
@@ -177,7 +184,8 @@ function handleAudioProgress(current_time: number, duration: number) {
     const nextTrack = repeatMode === 'one'
       ? track
       : (nextIdx < queue.length ? queue[nextIdx] : (repeatMode === 'all' ? queue[0] : null));
-    if (nextTrack && nextTrack.id !== track.id) {
+    if (nextTrack && nextTrack.id !== track.id && nextTrack.id !== gaplessPreloadingId) {
+      gaplessPreloadingId = nextTrack.id;
       const nextUrl = buildStreamUrl(nextTrack.id);
       if (gaplessEnabled) {
         // Gapless ON: decode + chain directly into the Sink now, 30 s in
@@ -233,6 +241,7 @@ function handleAudioEnded() {
  */
 function handleAudioTrackSwitched(duration: number) {
   lastGaplessSwitchTime = Date.now();
+  gaplessPreloadingId = null; // allow preloading for the track after this one
   isAudioPaused = false;
 
   const store = usePlayerStore.getState();
@@ -326,8 +335,43 @@ export function initAudioListeners(): () => void {
     invoke('audio_set_gapless', { enabled: state.gaplessEnabled }).catch(() => {});
   });
 
+  // ── MPRIS / OS media controls sync ───────────────────────────────────────
+  // Whenever the current track or playback state changes, push updates to the
+  // Rust souvlaki MediaControls so the OS media overlay stays accurate.
+  let prevTrackId: string | null = null;
+  let prevIsPlaying: boolean | null = null;
+
+  const unsubMpris = usePlayerStore.subscribe((state) => {
+    const { currentTrack, isPlaying, currentTime } = state;
+
+    // Update metadata when track changes
+    if (currentTrack && currentTrack.id !== prevTrackId) {
+      prevTrackId = currentTrack.id;
+      const coverUrl = currentTrack.coverArt
+        ? buildCoverArtUrl(currentTrack.coverArt, 512)
+        : undefined;
+      invoke('mpris_set_metadata', {
+        title: currentTrack.title,
+        artist: currentTrack.artist,
+        album: currentTrack.album,
+        coverUrl,
+        durationSecs: currentTrack.duration,
+      }).catch(() => {});
+    }
+
+    // Update playback state when it changes
+    if (isPlaying !== prevIsPlaying) {
+      prevIsPlaying = isPlaying;
+      invoke('mpris_set_playback', {
+        playing: isPlaying,
+        positionSecs: currentTime > 0 ? currentTime : null,
+      }).catch(() => {});
+    }
+  });
+
   return () => {
     unsubAuth();
+    unsubMpris();
     pending.forEach(p => p.then(unlisten => unlisten()));
   };
 }
@@ -438,6 +482,7 @@ export const usePlayerStore = create<PlayerState>()(
 
         const gen = ++playGeneration;
         isAudioPaused = false;
+        gaplessPreloadingId = null; // new track — allow fresh preload for next
         if (seekDebounce) { clearTimeout(seekDebounce); seekDebounce = null; }
 
         const state = get();

src/store/themeStore.ts

@@ -1,7 +1,7 @@
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 
-type Theme = 'mocha' | 'macchiato' | 'frappe' | 'latte' | 'nord' | 'nord-snowstorm' | 'nord-frost' | 'nord-aurora' | 'psychowave' | 'wnamp' | 'poison' | 'nucleo' | 'navy-jukebox' | 'cobalt-media' | 'onyx-cinema' | 'vintage-tube-radio' | 'neon-drift' | 'aero-glass' | 'luna-teal' | 'w98' | 'cupertino-light' | 'cupertino-dark' | 'gruvbox-dark-hard' | 'gruvbox-dark-medium' | 'gruvbox-dark-soft' | 'gruvbox-light-hard' | 'gruvbox-light-medium' | 'gruvbox-light-soft' | 'spotless' | 'dzr0' | 'cupertino-beats' | 'lambda-17' | 'azerothian-gold' | 'ascalon' | 'grand-theft-audio' | 'v-tactical' | 'nightcity-2077' | 'middle-earth' | 'morpheus' | 'pandora' | 'stark-hud' | 'blade' | 'imperial-sith' | 'order-of-the-phoenix' | 'heisenberg' | 'ice-and-fire' | 'doh-matic';
+type Theme = 'mocha' | 'macchiato' | 'frappe' | 'latte' | 'nord' | 'nord-snowstorm' | 'nord-frost' | 'nord-aurora' | 'psychowave' | 'wnamp' | 'poison' | 'nucleo' | 'muma-jukebox' | 'winmedplayer' | 'p-dvd' | 'vintage-tube-radio' | 'neon-drift' | 'aero-glass' | 'luna-teal' | 'w98' | 'cupertino-light' | 'cupertino-dark' | 'gruvbox-dark-hard' | 'gruvbox-dark-medium' | 'gruvbox-dark-soft' | 'gruvbox-light-hard' | 'gruvbox-light-medium' | 'gruvbox-light-soft' | 'spotless' | 'dzr0' | 'cupertino-beats' | 'lambda-17' | 'gw1' | 'grand-theft-audio' | 'v-tactical' | 'nightcity-2077' | 'middle-earth' | 'morpheus' | 'stark-hud' | 'blade' | 'heisenberg' | 'ice-and-fire' | 'doh-matic' | 't-800' | 'dune' | 'tetrastack' | 'the-book' | 'readit' | 'insta' | 'hill-valley-85' | 'turtle-power' | 'w3-1' | 'aqua-quartz' | 'spider-tech' | 'dos' | 'unix' | 'jayfin' | 'horde' | 'alliance' | 'w11';
 
 interface ThemeState {
   theme: Theme;

src/styles/components.css

@@ -1629,14 +1629,12 @@
   padding: 5px 8px;
   border-radius: 6px;
   line-height: 1.6;
-  transition: color 0.25s, font-size 0.2s, font-weight 0.2s;
+  transition: color 0.25s;
   cursor: default;
 }
 
 .lyrics-line.active {
-  color: var(--text-primary);
-  font-size: 15px;
-  font-weight: 600;
+  color: var(--accent);
 }
 
 .lyrics-plain {
@@ -2558,6 +2556,29 @@
   opacity: 1;
 }
 
+.fav-remove-btn {
+  opacity: 0;
+  color: var(--text-muted);
+  background: none;
+  border: none;
+  padding: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-sm);
+  transition: opacity 0.15s, color 0.15s;
+}
+
+.fav-remove-btn:hover {
+  color: var(--ctp-red);
+}
+
+.track-row:hover .fav-remove-btn,
+.track-row.context-active .fav-remove-btn {
+  opacity: 1;
+}
+
 /* ─ Statistics Page ─ */
 .stats-page {
   display: flex;
@@ -2801,6 +2822,10 @@
   overflow: hidden;
   display: flex;
   flex-direction: column;
+  background:
+    radial-gradient(ellipse at 20% 0%, color-mix(in srgb, var(--accent) 10%, var(--bg-main)) 0%, transparent 60%),
+    radial-gradient(ellipse at 80% 100%, color-mix(in srgb, var(--ctp-blue) 8%, var(--bg-main)) 0%, transparent 60%),
+    var(--bg-main);
 }
 
 /* Main scrollable content */
@@ -3175,38 +3200,6 @@
   flex-shrink: 0;
 }
 
-.np-bg-wrap {
-  position: absolute;
-  inset: 0;
-  z-index: 0;
-  overflow: hidden;
-  contain: paint;
-}
-
-.np-bg-layer {
-  position: absolute;
-  inset: -15%;
-  background-size: cover;
-  background-position: center;
-  filter: blur(70px) brightness(0.55) saturate(1.6);
-  transition: opacity 0.6s ease;
-  animation: np-ken-burns 40s ease-in-out infinite alternate;
-  will-change: transform;
-}
-
-@keyframes np-ken-burns {
-  0%   { transform: scale(1.00) translate(0%,    0%);   }
-  25%  { transform: scale(1.04) translate(-2%,  -1.5%); }
-  50%  { transform: scale(1.06) translate(1.5%,  2%);   }
-  75%  { transform: scale(1.03) translate(-1%,   1.5%); }
-  100% { transform: scale(1.05) translate(2%,   -1%);   }
-}
-
-.np-bg-overlay {
-  position: absolute;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.38);
-}
 
 .np-hero-content {
   position: relative;

src/styles/layout.css

@@ -9,7 +9,6 @@
     "sidebar main queue"
     "player  player player";
   height: 100vh;
-  overflow: hidden;
   background: var(--bg-app);
 }
 
@@ -39,6 +38,7 @@
   background: var(--bg-sidebar);
   border-right: 1px solid var(--border-subtle);
   position: relative;
+  z-index: 2;
 }
 
 .sidebar-brand {
@@ -186,12 +186,12 @@
 
 .collapse-btn {
   position: absolute;
-  top: 50%;
-  right: -13px;
+  top: calc(50% - var(--player-height) / 2);
+  left: calc(var(--sidebar-width) - 11px);
   transform: translateY(-50%);
   z-index: 101;
-  width: 26px;
-  height: 26px;
+  width: 22px;
+  height: 22px;
   border-radius: 50%;
   border: 1px solid var(--border-subtle);
   background: var(--bg-card);
@@ -200,21 +200,36 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  opacity: 0;
-  transition: opacity 0.2s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
+  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
   box-shadow: var(--shadow-sm);
 }
 
-.sidebar:hover .collapse-btn {
-  opacity: 1;
-}
-
 .collapse-btn:hover {
   background: var(--bg-hover);
   color: var(--text-primary);
   box-shadow: var(--shadow-md);
 }
 
+.queue-toggle-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--radius-md);
+  border: none;
+  background: transparent;
+  color: var(--accent);
+  cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease;
+  flex-shrink: 0;
+}
+
+.queue-toggle-btn:hover {
+  background: var(--accent-dim);
+  color: var(--accent);
+}
+
 /* ─── Update Toast ─── */
 @keyframes update-toast-in {
   from { opacity: 0; transform: translateY(6px); }
@@ -317,6 +332,7 @@
   overflow-y: auto;
   overflow-x: hidden;
   padding: var(--space-6);
+  contain: paint;
 }
 
 /* ─── Player Bar ─── */
@@ -749,13 +765,18 @@
 }
 
 .queue-current-track {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.queue-current-track-body {
   padding: var(--space-3) var(--space-4);
   display: flex;
   flex-direction: row;
   align-items: flex-start;
   gap: var(--space-3);
-  flex-shrink: 0;
-  border-bottom: 1px solid var(--border-subtle);
 }
 
 .queue-current-cover {
@@ -803,21 +824,18 @@
 }
 
 .queue-current-tech {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  width: 100%;
   font-size: 9px;
   font-family: monospace;
   letter-spacing: 0.05em;
-  background: rgba(0, 0, 0, 0.62);
-  backdrop-filter: blur(4px);
-  color: rgba(255, 255, 255, 0.85);
-  padding: 3px 6px;
-  text-align: center;
+  background: var(--ctp-surface1);
+  color: var(--accent);
+  padding: 3px var(--space-4);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  text-align: center;
+  backdrop-filter: blur(8px);
 }
 
 .queue-divider {