feat: v1.16.0 — 15 New Themes, W98 Overhaul, Aqua Quartz Polish

New themes: Aqua Quartz (Mac OS X Aqua, skeuomorphic), Spider-Tech,
T-800, B-Runner, Hill Valley 85, TetraStack, Turtle Power, Insta,
ReadIt, The Book (new Social Media group), W3.1, Jayfin (Jellyfin).

W98 rebuilt from scratch: authentic #d4d0c8 warm-gray, full 4-layer
3D bevel on all panels/buttons (raised/sunken on press), title bar
gradient on song name, navy progress fill, 16px styled scrollbar.

Aqua Quartz: all button variants now jelly-styled, blue Source List
sidebar with white pill nav, aluminium pinstripe background.

Theme Picker: groups and themes sorted alphabetically, Mediaplayer
group renamed, Pandora/Order of the Phoenix/Imperial Sith removed.

Fix: AlbumDetail genre propagation, W98 accordion active state,
Aqua Quartz sidebar labels, W98 connection indicator contrast.

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

CHANGELOG.md

@@ -5,6 +5,40 @@ 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.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

CLAUDE.md

@@ -50,7 +50,7 @@ There are no test scripts. TypeScript compilation (`tsc`) is part of the build.
 | `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` (100ms), `audio:ended`, `audio:error` events. `MASTER_HEADROOM` (-1 dB) prevents inter-sample clipping at full volume. |
-| `src/store/themeStore.ts` | Theme selection (47 themes across 7 groups), applied as `data-theme` on `<html>` |
+| `src/store/themeStore.ts` | Theme selection (62 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[]`. |
@@ -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.
+62 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,13 +124,13 @@ 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` |
+| `navy-jukebox` | Mediaplayer | silver/blue light | Blue `#0070a0` |
+| `cobalt-media` | Mediaplayer | cobalt blue dark | Lime `#45ff00` |
+| `onyx-cinema` | 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` |
@@ -141,17 +141,29 @@ Add a function to `src/api/subsonic.ts` using the `api<T>()` helper. The helper
 | `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` |
+| `b-runner` | Movies | Blade Runner 2049, amber neon | Amber `#ff9500` |
 | `blade` | Movies | deep black, blood-red | Red `#b30000` |
+| `dune` | Movies | Arrakis desert stone, spice orange | Orange `#ff8c00` |
+| `hill-valley-85` | Movies | Back to the Future, brushed metal | Orange `#ff9900` |
 | `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` |
 | `order-of-the-phoenix` | Movies | Harry Potter | Ember Orange `#e63900` |
 | `pandora` | Movies | Avatar bioluminescent | Cyan `#00f2ff` |
+| `spider-tech` | Movies | Spider-Man navy blue, hero red | Red `#E62429` |
 | `stark-hud` | Movies | Iron Man HUD | Cyan `#00f2ff` |
+| `t-800` | Movies | Terminator, Skynet blue | Cyan `#00d4ff` |
+| `aqua-quartz` | Operating Systems | Mac OS X Aqua, skeuomorphic jelly buttons | Blue `#3876f7` |
+| `w3-1` | Operating Systems | Windows 3.1, light silver/teal | Navy `#000080` |
 | `ice-and-fire` | Series | Game of Thrones | Ice Blue `#70a1ff` |
 | `doh-matic` | Series | The Simpsons | Blue `#1F75FE` |
 | `heisenberg` | Series | Breaking Bad | Crystal Blue `#3fe0ff` |
+| `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 |
@@ -246,4 +258,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.15.0
+- **Version**: 1.16.0

package.json

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

packages/aur/PKGBUILD

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

src-tauri/Cargo.lock

@@ -3139,7 +3139,7 @@ dependencies = [
 
 [[package]]
 name = "psysonic"
-version = "1.14.0"
+version = "1.16.0"
 dependencies = [
  "biquad",
  "md5",

src-tauri/Cargo.toml

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

src-tauri/tauri.conf.json

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

src/components/ThemePicker.tsx

@@ -18,19 +18,22 @@ const THEME_GROUPS: { group: string; themes: ThemeDef[] }[] = [
       { 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' },
     ],
   },
   {
     group: 'Movies',
     themes: [
+      { id: 'b-runner',             label: 'B-Runner',             bg: '#141211', card: '#080707', accent: '#ff9500' },
       { id: 'blade',                label: 'Blade',                bg: '#121212', card: '#050505', accent: '#b30000' },
-      { id: 'imperial-sith',        label: 'Imperial Sith',        bg: '#0f0f11', card: '#050505', accent: '#e60000' },
+      { id: 'dune',                 label: 'Dune',                 bg: '#1c1917', card: '#0c0a09', accent: '#ff8c00' },
+      { id: 'hill-valley-85',       label: 'Hill Valley 85',       bg: '#1a1d23', card: '#0a0a0c', accent: '#ff9900' },
       { 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: 'spider-tech',          label: 'Spider-Tech',          bg: '#0F172A', card: '#050C1A', 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,8 +58,10 @@ 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: 'w3-1',            label: 'W3.1',            bg: '#008080', card: '#c0c0c0', accent: '#000080' },
       { 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' },
@@ -73,7 +78,7 @@ 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: 'cupertino-beats', label: 'Cupertino Beats', bg: '#1c1c1e', card: '#2c2c2e', accent: '#fa243c' },
@@ -81,6 +86,7 @@ const THEME_GROUPS: { group: string; themes: ThemeDef[] }[] = [
       { 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: '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' },
     ],
   },
@@ -90,6 +96,15 @@ const THEME_GROUPS: { group: string; themes: ThemeDef[] }[] = [
       { id: 'ice-and-fire', label: 'A Theme of Ice and Fire', bg: '#121820', card: '#05070a', accent: '#70a1ff' },
       { id: 'doh-matic',    label: "D'oh-matic",              bg: '#FFFDF0', card: '#FFD90F', accent: '#1F75FE' },
       { id: 'heisenberg',   label: 'Heisenberg',              bg: '#1a1d1a', card: '#0a0c0a', accent: '#3fe0ff' },
+      { 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/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' | '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' | 'stark-hud' | 'blade' | 'heisenberg' | 'ice-and-fire' | 'doh-matic' | 't-800' | 'b-runner' | 'dune' | 'tetrastack' | 'the-book' | 'readit' | 'insta' | 'hill-valley-85' | 'turtle-power' | 'w3-1' | 'aqua-quartz' | 'spider-tech' | 'jayfin';
 
 interface ThemeState {
   theme: Theme;

src/styles/layout.css

@@ -219,15 +219,15 @@
   border-radius: var(--radius-md);
   border: none;
   background: transparent;
-  color: var(--text-muted);
+  color: var(--accent);
   cursor: pointer;
   transition: background 0.15s ease, color 0.15s ease;
   flex-shrink: 0;
 }
 
 .queue-toggle-btn:hover {
-  background: var(--bg-hover);
-  color: var(--text-primary);
+  background: var(--accent-dim);
+  color: var(--accent);
 }
 
 /* ─── Update Toast ─── */