feat: v1.23.0 — Advanced Search, Genre Mix overhaul, Playlist append, Contributors table

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-21 22:15:40 +00:00 · 2026-03-30 22:56:59 +02:00
parent 74b519f9f5
commit 43c656dfc3
16 changed files with 714 additions and 144 deletions
@@ -5,6 +5,33 @@ 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.23.0] - 2026-03-30
+
+### Added
+
+- **Advanced Search**: New dedicated page (`/search/advanced`) reachable via the filter icon in the search bar. Supports free-text search combined with genre filter (dropdown from server), year range (from/to), and result-type toggle (All / Artists / Albums / Songs). Search logic: text query uses `search3` with client-side genre/year filtering; genre-only uses `getAlbumsByGenre` + random songs from that genre; year-only uses `getAlbumList(byYear)`. Results show in the standard ArtistRow / AlbumRow / tracklist layout with drag-to-queue and context menu support.
+- **Genre Mix — Server-native genres**: The Genre Mix panel in Random Mix now shows the top 20 genres from the server sorted by song count, instead of hardcoded keyword-based "Super Genre" groups. Only genres with at least one song and no audiobook keywords are shown. Clicking a badge fetches up to 50 random songs from exactly that genre.
+- **Genre Mix — Shuffle button**: A ↺ button appears when the server has more than 20 genres. Clicking it picks a fresh random selection of 20 from all available genres, replacing the current badges without triggering a search.
+- **Favorites — Play All**: "Play All" button (primary style) added next to "Add all to queue" in the Favorites → Songs section. Starts playback immediately from the first favorited song.
+- **Playlist Load — Append mode**: The playlist load modal now has two action buttons per playlist: ▶ replaces the queue and starts playback (previous behavior), ≡+ appends all tracks to the existing queue without interrupting playback.
+
+### Fixed
+
+- **Replay Gain** *(contributed by [@trbn1](https://github.com/trbn1))*: Replay Gain metadata (track gain, album gain, peaks) is now correctly propagated to the audio engine across all track-construction sites via the new `songToTrack()` helper. Previously tracks built inline missed the `replayGain` field, causing the engine to apply 0 dB gain regardless of tags.
+
+### Changed
+
+- **Genre Mix description**: Panel subtitle updated to explain that badges represent the top 20 genres by song count and that clicking loads a random mix from that genre.
+- **Random Mix — Filter panel**: Added a short descriptive hint below the "Filters" heading explaining that genre tags and artist names in the tracklist are clickable to add them to the blacklist.
+- **Playlist Load modal**: Width increased from 400 px to 560 px (90 vw cap) so long playlist names are readable without truncation.
+- **Settings — Contributors**: Contributors section is now a collapsible table. Each entry shows the contributor's GitHub avatar, `@username` (linked to their profile), a version badge, and a bullet list of their specific contributions. [@trbn1](https://github.com/trbn1) added for Replay Gain fix (PR #9).
+
+### Theme Fixes
+
+- **Powerslave**: Album card play button no longer flickers between gradient and flat accent color on hover — explicit `:hover` gradient override added. Sidebar stripe pattern replaced with soft radial-gradient cloud wisps.
+
+---
+
 ## [1.22.0] - 2026-03-30

 ### Added
@@ -55,7 +55,8 @@ Designed specifically for users hosting their own music via Navidrome or other S
 - [x] Synchronized lyrics via LRCLIB (in-sidebar, auto-scroll)
 - [x] Multi-server support
 - [x] IndexedDB image caching
- [x] Random Mix with keyword filter & Super Genre mix
+- [x] Random Mix with server-native Genre Mix (top genres by song count, shuffleable)
+- [x] Advanced Search (text + genre + year + result-type filters)
 - [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, Chinese)
 - [x] AUR package (Arch / CachyOS)
@@ -63,7 +64,7 @@ Designed specifically for users hosting their own music via Navidrome or other S
 - [x] Font picker (10 UI fonts)

 ### 📋 Planned
- [ ] General UI polish & visual refinement
+- [ ] Theme contrast & legibility audit — systematic review of text/background contrast ratios across all 60+ themes
 - [ ] Accessibility (a11y) — keyboard navigation, screen reader support, ARIA labels
 - [ ] More languages

@@ -71,7 +72,8 @@ 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.
+- **Linux (Wayland — drag & drop cursor)**: On some Wayland compositors the drag cursor may show no visual indicator during DnD. This is a WebKitGTK limitation unrelated to the drop operation itself, which always works correctly.
+- **FLAC without SEEKTABLE**: FLAC files that were encoded without a SEEKTABLE index cannot be seeked. The seek silently fails; playback continues from the current position.

 ## 📥 Installation

@@ -1,6 +1,6 @@
 {
  "name": "psysonic",
-  "version": "1.22.0",
+  "version": "1.23.0",
  "private": true,
  "scripts": {
    "dev": "vite",
@@ -1,6 +1,6 @@
 # Maintainer: Psychotoxic <psychotoxic@gmx.de>
 pkgname=psysonic
-pkgver=1.22.0
+pkgver=1.23.0
 pkgrel=1
 pkgdesc="Desktop music player for Subsonic API-compatible servers (Navidrome, Gonic, etc.)"
 arch=('x86_64')
@@ -9,7 +9,6 @@ license=('GPL-3.0-only')
 depends=(
  'webkit2gtk-4.1'
  'gtk3'
-  'libayatana-appindicator'
  'openssl'
  'alsa-lib'
 )
@@ -1,7 +1,7 @@
 {
  "$schema": "https://schema.tauri.app/config/2",
  "productName": "Psysonic",
-  "version": "1.22.0",
+  "version": "1.23.0",
  "identifier": "dev.psysonic.player",
  "build": {
    "beforeDevCommand": "npm run dev",
@@ -25,6 +25,7 @@ import Statistics from './pages/Statistics';
 import Help from './pages/Help';
 import RandomAlbums from './pages/RandomAlbums';
 import SearchResults from './pages/SearchResults';
+import AdvancedSearch from './pages/AdvancedSearch';
 import NowPlayingPage from './pages/NowPlaying';
 import FullscreenPlayer from './components/FullscreenPlayer';
 import ContextMenu from './components/ContextMenu';
@@ -242,6 +243,7 @@ function AppShell() {
            <Route path="/random-mix" element={<RandomMix />} />
            <Route path="/label/:name" element={<LabelAlbums />} />
            <Route path="/search" element={<SearchResults />} />
+            <Route path="/search/advanced" element={<AdvancedSearch />} />
            <Route path="/statistics" element={<Statistics />} />
            <Route path="/now-playing" element={<NowPlayingPage />} />
            <Route path="/settings" element={<Settings />} />
@@ -119,7 +119,7 @@ export default function GenreFilterBar({ selected, onSelectionChange }: GenreFil
        />

        {dropdownOpen && filteredOptions.length > 0 && (
-          <div className="genre-filter-dropdown">
+          <div className="genre-filter-dropdown" onWheel={e => e.stopPropagation()}>
            {filteredOptions.slice(0, 60).map(g => (
              <div key={g} className="genre-filter-option" onMouseDown={() => add(g)}>
                {g}
@@ -129,7 +129,7 @@ export default function GenreFilterBar({ selected, onSelectionChange }: GenreFil
        )}

        {dropdownOpen && filteredOptions.length === 0 && search.length > 0 && (
-          <div className="genre-filter-dropdown">
+          <div className="genre-filter-dropdown" onWheel={e => e.stopPropagation()}>
            <div className="genre-filter-empty">{t('common.filterNoGenres')}</div>
          </div>
        )}
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Search, Disc3, Users, Music } from 'lucide-react';
+import { Search, Disc3, Users, Music, SlidersHorizontal } from 'lucide-react';
 import { search, SearchResults, buildCoverArtUrl } from '../api/subsonic';
 import { usePlayerStore, songToTrack } from '../store/playerStore';
 import { useTranslation } from 'react-i18next';
@@ -116,6 +116,16 @@ export default function LiveSearch() {
            ×
          </button>
        )}
+        <button
+          className="live-search-adv-btn"
+          type="button"
+          onClick={() => navigate(query.trim() ? `/search/advanced?q=${encodeURIComponent(query.trim())}` : '/search/advanced')}
+          data-tooltip={t('search.advanced')}
+          data-tooltip-pos="bottom"
+          aria-label={t('search.advanced')}
+        >
+          <SlidersHorizontal size={14} />
+        </button>
      </div>

      {open && (
@@ -1,6 +1,6 @@
 import React, { useState, useRef } from 'react';
 import { Track, usePlayerStore, songToTrack } from '../store/playerStore';
-import { Play, Music, Star, X, Trash2, Save, FolderOpen, Shuffle, Infinity, Waves, MicVocal, ListMusic, Check } from 'lucide-react';
+import { Play, Music, Star, X, Trash2, Save, FolderOpen, Shuffle, Infinity, Waves, MicVocal, ListMusic, Check, ListPlus } from 'lucide-react';
 import { buildCoverArtUrl, getAlbum, getPlaylists, getPlaylist, createPlaylist, updatePlaylist, deletePlaylist, SubsonicPlaylist } from '../api/subsonic';
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -60,7 +60,7 @@ function SavePlaylistModal({ onClose, onSave }: { onClose: () => void, onSave: (
  );
 }

-function LoadPlaylistModal({ onClose, onLoad }: { onClose: () => void, onLoad: (id: string, name: string) => void }) {
+function LoadPlaylistModal({ onClose, onLoad }: { onClose: () => void, onLoad: (id: string, name: string, mode: 'replace' | 'append') => void }) {
  const { t } = useTranslation();
  const [playlists, setPlaylists] = useState<SubsonicPlaylist[]>([]);
  const [loading, setLoading] = useState(true);
@@ -96,7 +96,7 @@ function LoadPlaylistModal({ onClose, onLoad }: { onClose: () => void, onLoad: (
  return (
    <>
    <div className="modal-overlay" onClick={onClose} role="dialog" aria-modal="true">
-      <div className="modal-content" onClick={e => e.stopPropagation()} style={{ maxWidth: '400px' }}>
+      <div className="modal-content" onClick={e => e.stopPropagation()} style={{ maxWidth: '560px', width: '90vw' }}>
        <button className="modal-close" onClick={onClose}><X size={18} /></button>
        <h3 style={{ marginBottom: '1rem', fontFamily: 'var(--font-display)' }}>{t('queue.loadPlaylist')}</h3>
        {!loading && playlists.length > 0 && (
@@ -120,7 +120,8 @@ function LoadPlaylistModal({ onClose, onLoad }: { onClose: () => void, onLoad: (
              <div key={p.id} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '8px 12px', background: 'var(--ctp-surface1)', borderRadius: 'var(--radius-md)' }}>
                <span style={{ fontWeight: 500 }} className="truncate" data-tooltip={p.name}>{p.name}</span>
                <div style={{ display: 'flex', gap: '4px', flexShrink: 0 }}>
-                  <button className="nav-btn" onClick={() => onLoad(p.id, p.name)} data-tooltip={t('queue.load')} style={{ width: '28px', height: '28px', background: 'transparent' }}><Play size={14} /></button>
+                  <button className="nav-btn" onClick={() => onLoad(p.id, p.name, 'replace')} data-tooltip={t('queue.load')} style={{ width: '28px', height: '28px', background: 'transparent' }}><Play size={14} /></button>
+                  <button className="nav-btn" onClick={() => onLoad(p.id, p.name, 'append')} data-tooltip={t('queue.appendToQueue')} style={{ width: '28px', height: '28px', background: 'transparent' }}><ListPlus size={14} /></button>
                  <button className="nav-btn" onClick={() => handleDelete(p.id, p.name)} data-tooltip={t('queue.delete')} style={{ width: '28px', height: '28px', background: 'transparent', color: 'var(--ctp-red)' }}><Trash2 size={14} /></button>
                </div>
              </div>
@@ -583,13 +584,17 @@ export default function QueuePanel() {
      {loadModalOpen && (
        <LoadPlaylistModal
          onClose={() => setLoadModalOpen(false)}
-          onLoad={async (id, name) => {
+          onLoad={async (id, name, mode) => {
            try {
              const data = await getPlaylist(id);
              const tracks: Track[] = data.songs.map(songToTrack);
              if (tracks.length > 0) {
-                clearQueue();
-                playTrack(tracks[0], tracks);
+                if (mode === 'append') {
+                  enqueue(tracks);
+                } else {
+                  clearQueue();
+                  playTrack(tracks[0], tracks);
+                }
              }
              setActivePlaylist({ id, name });
              setLoadModalOpen(false);
@@ -52,6 +52,19 @@ const enTranslation = {
    title: 'Search',
    resultsFor: 'Results for "{{query}}"',
    album: 'Album',
+    advanced: 'Advanced Search',
+    advancedSearchTerm: 'Search term',
+    advancedSearchPlaceholder: 'Title, album, artist…',
+    advancedGenre: 'Genre',
+    advancedAllGenres: 'All genres',
+    advancedYear: 'Year',
+    advancedYearFrom: 'from',
+    advancedYearTo: 'to',
+    advancedAll: 'All',
+    advancedSearch: 'Search',
+    advancedEmpty: 'Enter a search term or select a filter to begin.',
+    advancedNoResults: 'No results found.',
+    advancedGenreNote: 'Songs are randomly selected from this genre.',
  },
  nowPlaying: {
    tooltip: 'Who is listening?',
@@ -155,6 +168,7 @@ const enTranslation = {
    albums: 'Albums',
    songs: 'Songs',
    enqueueAll: 'Add all to queue',
+    playAll: 'Play all',
    removeSong: 'Remove from favorites',
  },
  randomAlbums: {
@@ -197,10 +211,12 @@ const enTranslation = {
    artistClickHint: 'Click to block this artist',
    blacklistToggle: 'Keyword Filter',
    genreMixTitle: 'Genre Mix',
-    genreMixDesc: 'Select a genre to get a curated random mix',
+    genreMixDesc: 'Top 20 genres by song count — click to load a random mix',
    genreMixLoadMore: 'Load 10 more',
    genreMixNoGenres: 'No genres found on server.',
+    shuffleGenres: 'Show different genres',
    filterPanelTitle: 'Filters',
+    filterPanelDesc: 'Click a genre tag or artist name in the tracklist below to block it from future mixes.',
    genreClickHint: 'Click a genre tag to add it\nas a filter keyword.\nMatches genre, title, album & artist.',
  },
  albums: {
@@ -359,7 +375,6 @@ const enTranslation = {
    aboutBuiltWith: 'Built with Tauri · React · TypeScript · Rust/rodio',
    aboutAiCredit: 'Developed with the support of Claude Code by Anthropic',
    aboutContributorsLabel: 'Contributors',
-    aboutContributors: 'jiezhuo — Chinese translation · nullobject — Seek & waveform fixes',
    changelog: 'Changelog',
    showChangelogOnUpdate: "Show 'What's New' on update",
    showChangelogOnUpdateDesc: "Automatically show what's new when a new version is launched for the first time.",
@@ -500,7 +515,8 @@ const enTranslation = {
    loadPlaylist: 'Load Playlist',
    loading: 'Loading…',
    noPlaylists: 'No playlists found.',
-    load: 'Load',
+    load: 'Replace queue & play',
+    appendToQueue: 'Append to queue',
    delete: 'Delete',
    deleteConfirm: 'Delete playlist "{{name}}"?',
    clear: 'Clear',
@@ -629,6 +645,19 @@ const deTranslation = {
    title: 'Suche',
    resultsFor: 'Ergebnisse für „{{query}}"',
    album: 'Album',
+    advanced: 'Erweiterte Suche',
+    advancedSearchTerm: 'Suchbegriff',
+    advancedSearchPlaceholder: 'Titel, Album, Künstler…',
+    advancedGenre: 'Genre',
+    advancedAllGenres: 'Alle Genres',
+    advancedYear: 'Jahr',
+    advancedYearFrom: 'von',
+    advancedYearTo: 'bis',
+    advancedAll: 'Alle',
+    advancedSearch: 'Suchen',
+    advancedEmpty: 'Suchbegriff eingeben oder Filter wählen, um zu beginnen.',
+    advancedNoResults: 'Keine Ergebnisse gefunden.',
+    advancedGenreNote: 'Songs werden zufällig aus dem Genre gewählt.',
  },
  nowPlaying: {
    tooltip: 'Wer hört was?',
@@ -732,6 +761,7 @@ const deTranslation = {
    albums: 'Alben',
    songs: 'Songs',
    enqueueAll: 'Alle in die Warteschlange',
+    playAll: 'Alle abspielen',
    removeSong: 'Aus Favoriten entfernen',
  },
  randomAlbums: {
@@ -774,10 +804,12 @@ const deTranslation = {
    artistClickHint: 'Klicken um diesen Künstler zu sperren',
    blacklistToggle: 'Keyword-Filter',
    genreMixTitle: 'Genre-Mix',
-    genreMixDesc: 'Genre auswählen für einen passenden Zufallsmix',
+    genreMixDesc: 'Top 20 Genres nach Songanzahl — klicken für einen Zufallsmix',
    genreMixLoadMore: '10 weitere laden',
    genreMixNoGenres: 'Keine Genres auf dem Server gefunden.',
+    shuffleGenres: 'Andere Genres anzeigen',
    filterPanelTitle: 'Filter',
+    filterPanelDesc: 'Genre-Tag oder Künstlername in der Liste anklicken, um ihn aus zukünftigen Mixes auszuschließen.',
    genreClickHint: 'Genre-Tag anklicken,\num es als Filter-Keyword hinzuzufügen.\nPrüft Genre, Titel, Album & Künstler.',
  },
  albums: {
@@ -936,7 +968,6 @@ const deTranslation = {
    aboutBuiltWith: 'Gebaut mit Tauri · React · TypeScript · Rust/rodio',
    aboutAiCredit: 'Mit freundlicher Unterstützung von Claude Code by Anthropic',
    aboutContributorsLabel: 'Mitwirkende',
-    aboutContributors: 'jiezhuo — Chinesische Übersetzung · nullobject — Seek & Waveform-Fixes',
    changelog: 'Changelog',
    showChangelogOnUpdate: "'Was ist neu' bei Update anzeigen",
    showChangelogOnUpdateDesc: 'Zeigt automatisch die Neuerungen an, wenn eine neue Version zum ersten Mal gestartet wird.',
@@ -1077,7 +1108,8 @@ const deTranslation = {
    loadPlaylist: 'Playlist laden',
    loading: 'Lade…',
    noPlaylists: 'Keine Playlists gefunden.',
-    load: 'Laden',
+    load: 'Warteschlange ersetzen & abspielen',
+    appendToQueue: 'An Warteschlange anhängen',
    delete: 'Löschen',
    deleteConfirm: 'Playlist "{{name}}" löschen?',
    clear: 'Leeren',
@@ -1206,6 +1238,19 @@ const frTranslation = {
    title: 'Recherche',
    resultsFor: 'Résultats pour « {{query}} »',
    album: 'Album',
+    advanced: 'Recherche avancée',
+    advancedSearchTerm: 'Terme de recherche',
+    advancedSearchPlaceholder: 'Titre, album, artiste…',
+    advancedGenre: 'Genre',
+    advancedAllGenres: 'Tous les genres',
+    advancedYear: 'Année',
+    advancedYearFrom: 'de',
+    advancedYearTo: 'à',
+    advancedAll: 'Tous',
+    advancedSearch: 'Rechercher',
+    advancedEmpty: 'Entrez un terme de recherche ou sélectionnez un filtre.',
+    advancedNoResults: 'Aucun résultat trouvé.',
+    advancedGenreNote: 'Les morceaux sont sélectionnés aléatoirement dans ce genre.',
  },
  nowPlaying: {
    tooltip: 'Qui écoute ?',
@@ -1309,6 +1354,7 @@ const frTranslation = {
    albums: 'Albums',
    songs: 'Morceaux',
    enqueueAll: 'Tout ajouter à la file',
+    playAll: 'Tout lire',
    removeSong: 'Retirer des favoris',
  },
  randomAlbums: {
@@ -1351,10 +1397,12 @@ const frTranslation = {
    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',
+    genreMixDesc: 'Top 20 genres par nombre de morceaux — cliquer pour un mix aléatoire',
    genreMixLoadMore: 'Charger 10 de plus',
    genreMixNoGenres: 'Aucun genre trouvé sur le serveur.',
+    shuffleGenres: 'Afficher d\'autres genres',
    filterPanelTitle: 'Filtres',
+    filterPanelDesc: 'Cliquez sur un tag de genre ou un nom d\'artiste dans la liste pour l\'exclure des futurs mix.',
    genreClickHint: 'Cliquez sur un tag de genre pour l\'ajouter\ncomme mot-clé de filtre.\nCorrespond au genre, titre, album et artiste.',
  },
  albums: {
@@ -1513,7 +1561,6 @@ const frTranslation = {
    aboutBuiltWith: 'Construit avec Tauri · React · TypeScript · Rust/rodio',
    aboutAiCredit: 'Développé avec le soutien de Claude Code par Anthropic',
    aboutContributorsLabel: 'Contributeurs',
-    aboutContributors: 'jiezhuo — traduction chinoise · nullobject — correctifs seek & waveform',
    changelog: 'Journal des modifications',
    showChangelogOnUpdate: "Afficher 'Quoi de neuf' lors des mises à jour",
    showChangelogOnUpdateDesc: 'Affiche automatiquement les nouveautés au premier lancement d\'une nouvelle version.',
@@ -1654,7 +1701,8 @@ const frTranslation = {
    loadPlaylist: 'Charger une liste',
    loading: 'Chargement…',
    noPlaylists: 'Aucune liste trouvée.',
-    load: 'Charger',
+    load: 'Remplacer la file et lire',
+    appendToQueue: 'Ajouter à la file',
    delete: 'Supprimer',
    deleteConfirm: 'Supprimer la liste « {{name}} » ?',
    clear: 'Vider',
@@ -1783,6 +1831,19 @@ const nlTranslation = {
    title: 'Zoeken',
    resultsFor: 'Resultaten voor "{{query}}"',
    album: 'Album',
+    advanced: 'Geavanceerd zoeken',
+    advancedSearchTerm: 'Zoekterm',
+    advancedSearchPlaceholder: 'Titel, album, artiest…',
+    advancedGenre: 'Genre',
+    advancedAllGenres: 'Alle genres',
+    advancedYear: 'Jaar',
+    advancedYearFrom: 'van',
+    advancedYearTo: 'tot',
+    advancedAll: 'Alle',
+    advancedSearch: 'Zoeken',
+    advancedEmpty: 'Voer een zoekterm in of selecteer een filter.',
+    advancedNoResults: 'Geen resultaten gevonden.',
+    advancedGenreNote: 'Nummers worden willekeurig uit dit genre geselecteerd.',
  },
  nowPlaying: {
    tooltip: 'Wie luistert er?',
@@ -1886,6 +1947,7 @@ const nlTranslation = {
    albums: 'Albums',
    songs: 'Nummers',
    enqueueAll: 'Alles aan wachtrij toevoegen',
+    playAll: 'Alles afspelen',
    removeSong: 'Verwijderen uit favorieten',
  },
  randomAlbums: {
@@ -1928,10 +1990,12 @@ const nlTranslation = {
    artistClickHint: 'Klik om deze artiest te blokkeren',
    blacklistToggle: 'Trefwoordfilter',
    genreMixTitle: 'Genremix',
-    genreMixDesc: 'Selecteer een genre voor een samengestelde willekeurige mix',
+    genreMixDesc: 'Top 20 genres op aantal nummers — klik voor een willekeurige mix',
    genreMixLoadMore: '10 meer laden',
    genreMixNoGenres: 'Geen genres gevonden op server.',
+    shuffleGenres: 'Andere genres tonen',
    filterPanelTitle: 'Filters',
+    filterPanelDesc: 'Klik op een genre-tag of artiestennaam in de lijst om deze uit toekomstige mixes te weren.',
    genreClickHint: 'Klik op een genre-tag om het\ntoe te voegen als filtertrefwoord.\nVergelijkt genre, titel, album & artiest.',
  },
  albums: {
@@ -2090,7 +2154,6 @@ const nlTranslation = {
    aboutBuiltWith: 'Gebouwd met Tauri · React · TypeScript · Rust/rodio',
    aboutAiCredit: 'Ontwikkeld met ondersteuning van Claude Code door Anthropic',
    aboutContributorsLabel: 'Bijdragers',
-    aboutContributors: 'jiezhuo — Chinese vertaling · nullobject — seek & waveform-fixes',
    changelog: 'Wijzigingslog',
    showChangelogOnUpdate: "'Wat is nieuw' tonen bij update",
    showChangelogOnUpdateDesc: 'Toont automatisch de nieuwigheden bij de eerste start van een nieuwe versie.',
@@ -2231,7 +2294,8 @@ const nlTranslation = {
    loadPlaylist: 'Afspeellijst laden',
    loading: 'Laden…',
    noPlaylists: 'Geen afspeellijsten gevonden.',
-    load: 'Laden',
+    load: 'Wachtrij vervangen & afspelen',
+    appendToQueue: 'Toevoegen aan wachtrij',
    delete: 'Verwijderen',
    deleteConfirm: 'Afspeellijst "{{name}}" verwijderen?',
    clear: 'Leegmaken',
@@ -2360,6 +2424,19 @@ const zhTranslation = {
    title: '搜索',
    resultsFor: '"{{query}}" 的搜索结果',
    album: '专辑',
+    advanced: '高级搜索',
+    advancedSearchTerm: '搜索词',
+    advancedSearchPlaceholder: '标题、专辑、艺术家…',
+    advancedGenre: '流派',
+    advancedAllGenres: '所有流派',
+    advancedYear: '年份',
+    advancedYearFrom: '从',
+    advancedYearTo: '至',
+    advancedAll: '全部',
+    advancedSearch: '搜索',
+    advancedEmpty: '请输入搜索词或选择过滤器。',
+    advancedNoResults: '未找到结果。',
+    advancedGenreNote: '歌曲从该流派中随机选取。',
  },
  nowPlaying: {
    tooltip: '谁正在收听？',
@@ -2463,6 +2540,7 @@ const zhTranslation = {
    albums: '专辑',
    songs: '歌曲',
    enqueueAll: '全部加入队列',
+    playAll: '全部播放',
    removeSong: '从收藏中移除',
  },
  randomAlbums: {
@@ -2505,10 +2583,12 @@ const zhTranslation = {
    artistClickHint: '点击屏蔽此艺术家',
    blacklistToggle: '关键词过滤',
    genreMixTitle: '流派混音',
-    genreMixDesc: '选择一个流派以获取精选的随机混音',
+    genreMixDesc: '按歌曲数量排列的前 20 个流派 — 点击获取随机混音',
    genreMixLoadMore: '加载 10 首更多',
    genreMixNoGenres: '服务器上未找到流派。',
+    shuffleGenres: '显示其他流派',
    filterPanelTitle: '过滤器',
+    filterPanelDesc: '点击下方列表中的流派标签或艺术家名称，将其从未来的混音中排除。',
    genreClickHint: '点击流派标签将其添加为过滤关键词。\\n匹配流派、标题、专辑和艺术家。',
  },
  albums: {
@@ -2667,7 +2747,6 @@ const zhTranslation = {
    aboutBuiltWith: '使用 Tauri · React · TypeScript · Rust/rodio 构建',
    aboutAiCredit: '在 Anthropic 的 Claude Code 支持下开发',
    aboutContributorsLabel: '贡献者',
-    aboutContributors: 'jiezhuo — 中文翻译 · nullobject — Seek & 波形修复',
    changelog: '更新日志',
    showChangelogOnUpdate: '更新时显示"新功能"',
    showChangelogOnUpdateDesc: '新版本首次启动时自动显示更新内容。',
@@ -2808,7 +2887,8 @@ const zhTranslation = {
    loadPlaylist: '加载播放列表',
    loading: '加载中…',
    noPlaylists: '未找到播放列表。',
-    load: '加载',
+    load: '替换队列并播放',
+    appendToQueue: '追加到队列',
    delete: '删除',
    deleteConfirm: '删除播放列表 "{{name}}"？',
    clear: '清空',
@@ -0,0 +1,354 @@
+import React, { useEffect, useState } from 'react';
+import { useSearchParams, useNavigate } from 'react-router-dom';
+import { Play, SlidersHorizontal } from 'lucide-react';
+import {
+  search, getGenres, getAlbumsByGenre, getAlbumList, getRandomSongs,
+  SubsonicGenre, SubsonicArtist, SubsonicAlbum, SubsonicSong,
+} from '../api/subsonic';
+import { usePlayerStore, songToTrack } from '../store/playerStore';
+import { useTranslation } from 'react-i18next';
+import AlbumRow from '../components/AlbumRow';
+import ArtistRow from '../components/ArtistRow';
+import CustomSelect from '../components/CustomSelect';
+import { useDragDrop } from '../contexts/DragDropContext';
+
+type ResultType = 'all' | 'artists' | 'albums' | 'songs';
+
+interface SearchOpts {
+  query: string;
+  genre: string;
+  yearFrom: string;
+  yearTo: string;
+  resultType: ResultType;
+}
+
+interface Results {
+  artists: SubsonicArtist[];
+  albums: SubsonicAlbum[];
+  songs: SubsonicSong[];
+}
+
+export default function AdvancedSearch() {
+  const { t } = useTranslation();
+  const [params] = useSearchParams();
+  const navigate = useNavigate();
+  const psyDrag = useDragDrop();
+  const playTrack = usePlayerStore(s => s.playTrack);
+  const openContextMenu = usePlayerStore(s => s.openContextMenu);
+
+  const [query, setQuery] = useState(params.get('q') ?? '');
+  const [genre, setGenre] = useState('');
+  const [yearFrom, setYearFrom] = useState('');
+  const [yearTo, setYearTo] = useState('');
+  const [resultType, setResultType] = useState<ResultType>('all');
+  const [genres, setGenres] = useState<SubsonicGenre[]>([]);
+  const [results, setResults] = useState<Results | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [hasSearched, setHasSearched] = useState(false);
+  const [genreNote, setGenreNote] = useState(false);
+
+  const runSearch = async (opts: SearchOpts) => {
+    setLoading(true);
+    setHasSearched(true);
+    setGenreNote(false);
+    const { query: q, genre: g, yearFrom: yf, yearTo: yt, resultType: rt } = opts;
+    const from = yf ? parseInt(yf) : null;
+    const to = yt ? parseInt(yt) : null;
+
+    let artists: SubsonicArtist[] = [];
+    let albums: SubsonicAlbum[] = [];
+    let songs: SubsonicSong[] = [];
+
+    try {
+      if (q.trim()) {
+        const r = await search(q.trim(), { artistCount: 30, albumCount: 50, songCount: 100 });
+        artists = r.artists;
+        albums = r.albums;
+        songs = r.songs;
+
+        if (g) {
+          albums = albums.filter(a => a.genre?.toLowerCase() === g.toLowerCase());
+          songs = songs.filter(s => s.genre?.toLowerCase() === g.toLowerCase());
+        }
+        if (from !== null) {
+          albums = albums.filter(a => !a.year || a.year >= from);
+          songs = songs.filter(s => !s.year || s.year >= from);
+        }
+        if (to !== null) {
+          albums = albums.filter(a => !a.year || a.year <= to);
+          songs = songs.filter(s => !s.year || s.year <= to);
+        }
+      } else if (g) {
+        const [albumRes, songRes] = await Promise.all([
+          rt === 'songs' || rt === 'artists' ? Promise.resolve([]) : getAlbumsByGenre(g, 50),
+          rt === 'albums' || rt === 'artists' ? Promise.resolve([]) : getRandomSongs(100, g),
+        ]);
+        albums = albumRes as SubsonicAlbum[];
+        songs = songRes as SubsonicSong[];
+        if (from !== null) albums = albums.filter(a => !a.year || a.year >= from);
+        if (to !== null) albums = albums.filter(a => !a.year || a.year <= to);
+        if (songs.length > 0) setGenreNote(true);
+      } else if (from !== null || to !== null) {
+        const fromYear = from ?? 1900;
+        const toYear = to ?? new Date().getFullYear();
+        albums = await getAlbumList('byYear', 100, 0, { fromYear, toYear });
+      }
+
+      setResults({
+        artists: rt === 'albums' || rt === 'songs' ? [] : artists,
+        albums: rt === 'artists' || rt === 'songs' ? [] : albums,
+        songs: rt === 'artists' || rt === 'albums' ? [] : songs,
+      });
+    } catch {
+      setResults({ artists: [], albums: [], songs: [] });
+    }
+    setLoading(false);
+  };
+
+  useEffect(() => {
+    getGenres().then(data =>
+      setGenres(data.sort((a, b) => a.value.localeCompare(b.value)))
+    ).catch(() => {});
+    const q = params.get('q') ?? '';
+    if (q) runSearch({ query: q, genre: '', yearFrom: '', yearTo: '', resultType: 'all' });
+  }, []);
+
+  const handleSubmit = (e?: React.FormEvent) => {
+    e?.preventDefault();
+    runSearch({ query, genre, yearFrom, yearTo, resultType });
+  };
+
+  const total = results
+    ? results.artists.length + results.albums.length + results.songs.length
+    : 0;
+
+  const typeOptions: { id: ResultType; label: string }[] = [
+    { id: 'all',     label: t('search.advancedAll') },
+    { id: 'artists', label: t('search.artists') },
+    { id: 'albums',  label: t('search.albums') },
+    { id: 'songs',   label: t('search.songs') },
+  ];
+
+  const genreSelectOptions = [
+    { value: '', label: t('search.advancedAllGenres') },
+    ...genres.map(g => ({ value: g.value, label: g.value })),
+  ];
+
+  return (
+    <div className="content-body animate-fade-in">
+      <div style={{ marginBottom: '1.5rem' }}>
+        <h1 className="page-title" style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+          <SlidersHorizontal size={22} style={{ color: 'var(--accent)', flexShrink: 0 }} />
+          {t('search.advanced')}
+        </h1>
+      </div>
+
+      {/* ── Filter panel ──────────────────────────────────────── */}
+      <form onSubmit={handleSubmit}>
+        <div className="settings-card" style={{ padding: '1.25rem', marginBottom: '2rem' }}>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.9rem' }}>
+
+            {/* Row 1: Search term */}
+            <div style={{ display: 'flex', gap: '0.75rem', alignItems: 'center' }}>
+              <span style={{ fontSize: 13, color: 'var(--text-muted)', minWidth: 90, flexShrink: 0 }}>
+                {t('search.advancedSearchTerm')}
+              </span>
+              <input
+                className="input"
+                type="text"
+                value={query}
+                onChange={e => setQuery(e.target.value)}
+                placeholder={t('search.advancedSearchPlaceholder')}
+                style={{ flex: 1 }}
+                autoFocus
+              />
+            </div>
+
+            {/* Row 2: Genre + Year */}
+            <div style={{ display: 'flex', gap: '0.75rem', alignItems: 'center', flexWrap: 'wrap' }}>
+              <span style={{ fontSize: 13, color: 'var(--text-muted)', minWidth: 90, flexShrink: 0 }}>
+                {t('search.advancedGenre')}
+              </span>
+              <div style={{ minWidth: 180 }}>
+                <CustomSelect
+                  value={genre}
+                  options={genreSelectOptions}
+                  onChange={setGenre}
+                />
+              </div>
+
+              <span style={{ fontSize: 13, color: 'var(--text-muted)', marginLeft: '0.75rem', flexShrink: 0 }}>
+                {t('search.advancedYear')}
+              </span>
+              <input
+                className="input"
+                type="number"
+                min={1900}
+                max={new Date().getFullYear()}
+                value={yearFrom}
+                onChange={e => setYearFrom(e.target.value)}
+                placeholder={t('search.advancedYearFrom')}
+                style={{ width: 76 }}
+              />
+              <span style={{ color: 'var(--text-muted)', fontSize: 14 }}>–</span>
+              <input
+                className="input"
+                type="number"
+                min={1900}
+                max={new Date().getFullYear()}
+                value={yearTo}
+                onChange={e => setYearTo(e.target.value)}
+                placeholder={t('search.advancedYearTo')}
+                style={{ width: 76 }}
+              />
+            </div>
+
+            {/* Row 3: Result type + Search button */}
+            <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap' }}>
+              <div style={{ display: 'flex', gap: '0.3rem', flexWrap: 'wrap' }}>
+                {typeOptions.map(opt => (
+                  <button
+                    key={opt.id}
+                    type="button"
+                    className={`btn ${resultType === opt.id ? 'btn-primary' : 'btn-surface'}`}
+                    style={{ fontSize: 12, padding: '4px 14px' }}
+                    onClick={() => setResultType(opt.id)}
+                  >
+                    {opt.label}
+                  </button>
+                ))}
+              </div>
+              <button
+                className="btn btn-primary"
+                type="submit"
+                disabled={loading}
+                style={{ minWidth: 100 }}
+              >
+                {loading
+                  ? <div className="spinner" style={{ width: 14, height: 14, borderWidth: 2 }} />
+                  : t('search.advancedSearch')
+                }
+              </button>
+            </div>
+          </div>
+        </div>
+      </form>
+
+      {/* ── Results ───────────────────────────────────────────── */}
+      {!hasSearched ? (
+        <div className="empty-state" style={{ opacity: 0.6 }}>
+          {t('search.advancedEmpty')}
+        </div>
+      ) : loading ? (
+        <div style={{ display: 'flex', justifyContent: 'center', padding: '4rem' }}>
+          <div className="spinner" />
+        </div>
+      ) : total === 0 ? (
+        <div className="empty-state">{t('search.advancedNoResults')}</div>
+      ) : (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '3rem' }}>
+
+          {results && results.artists.length > 0 && (
+            <ArtistRow
+              title={`${t('search.artists')} (${results.artists.length})`}
+              artists={results.artists}
+            />
+          )}
+
+          {results && results.albums.length > 0 && (
+            <AlbumRow
+              title={`${t('search.albums')} (${results.albums.length})`}
+              albums={results.albums}
+            />
+          )}
+
+          {results && results.songs.length > 0 && (
+            <section>
+              <h2 className="section-title" style={{ marginBottom: '0.75rem' }}>
+                {t('search.songs')} ({results.songs.length})
+                {genreNote && (
+                  <span style={{ fontSize: 12, fontWeight: 400, color: 'var(--text-muted)', marginLeft: '0.75rem' }}>
+                    — {t('search.advancedGenreNote')}
+                  </span>
+                )}
+              </h2>
+              <div className="tracklist">
+                <div className="tracklist-header" style={{ gridTemplateColumns: '32px 1fr 1fr 1fr 90px 70px' }}>
+                  <span />
+                  <span>{t('randomMix.trackTitle')}</span>
+                  <span>{t('randomMix.trackArtist')}</span>
+                  <span>{t('randomMix.trackAlbum')}</span>
+                  <span>{t('randomMix.trackGenre')}</span>
+                  <span style={{ textAlign: 'right' }}>{t('randomMix.trackDuration')}</span>
+                </div>
+                {results.songs.map(song => {
+                  const track = songToTrack(song);
+                  return (
+                    <div
+                      key={song.id}
+                      className="track-row"
+                      style={{ gridTemplateColumns: '32px 1fr 1fr 1fr 90px 70px' }}
+                      onDoubleClick={() => playTrack(track, results.songs.map(songToTrack))}
+                      role="row"
+                      onContextMenu={e => { e.preventDefault(); openContextMenu(e.clientX, e.clientY, track, 'song'); }}
+                      onMouseDown={e => {
+                        if (e.button !== 0) return;
+                        e.preventDefault();
+                        const sx = e.clientX, sy = e.clientY;
+                        const onMove = (me: MouseEvent) => {
+                          if (Math.abs(me.clientX - sx) > 5 || Math.abs(me.clientY - sy) > 5) {
+                            document.removeEventListener('mousemove', onMove);
+                            document.removeEventListener('mouseup', onUp);
+                            psyDrag.startDrag({ data: JSON.stringify({ type: 'song', track }), label: song.title }, me.clientX, me.clientY);
+                          }
+                        };
+                        const onUp = () => { document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseup', onUp); };
+                        document.addEventListener('mousemove', onMove);
+                        document.addEventListener('mouseup', onUp);
+                      }}
+                    >
+                      <button
+                        className="btn btn-ghost"
+                        style={{ padding: 4 }}
+                        onClick={e => { e.stopPropagation(); playTrack(track, results.songs.map(songToTrack)); }}
+                      >
+                        <Play size={13} fill="currentColor" />
+                      </button>
+                      <div className="track-info">
+                        <span className="track-title">{song.title}</span>
+                      </div>
+                      <div className="track-artist-cell">
+                        <span
+                          className="track-artist"
+                          style={{ cursor: song.artistId ? 'pointer' : 'default' }}
+                          onClick={() => song.artistId && navigate(`/artist/${song.artistId}`)}
+                        >
+                          {song.artist}
+                        </span>
+                      </div>
+                      <div className="track-info">
+                        <span
+                          className="track-title"
+                          style={{ fontSize: '0.85rem', color: 'var(--subtext0)', cursor: 'pointer' }}
+                          onClick={() => navigate(`/album/${song.albumId}`)}
+                        >
+                          {song.album}
+                        </span>
+                      </div>
+                      <div style={{ fontSize: 11, color: 'var(--text-muted)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                        {song.genre ?? '—'}
+                      </div>
+                      <span className="track-duration" style={{ textAlign: 'right' }}>
+                        {Math.floor(song.duration / 60)}:{(song.duration % 60).toString().padStart(2, '0')}
+                      </span>
+                    </div>
+                  );
+                })}
+              </div>
+            </section>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
@@ -3,7 +3,7 @@ import AlbumRow from '../components/AlbumRow';
 import ArtistRow from '../components/ArtistRow';
 import { getStarred, SubsonicAlbum, SubsonicArtist, SubsonicSong } from '../api/subsonic';
 import { usePlayerStore, songToTrack } from '../store/playerStore';
-import { ListPlus, X } from 'lucide-react';
+import { ListPlus, Play, X } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { unstar } from '../api/subsonic';
@@ -69,12 +69,22 @@ export default function Favorites() {
            <section className="album-row-section">
              <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '0.75rem' }}>
                <h2 className="section-title" style={{ margin: 0 }}>{t('favorites.songs')}</h2>
+                <button
+                  className="btn btn-primary"
+                  onClick={() => {
+                    const tracks = songs.map(songToTrack);
+                    playTrack(tracks[0], tracks);
+                  }}
+                >
+                  <Play size={15} />
+                  {t('favorites.playAll')}
+                </button>
                <button
                  className="btn btn-surface"
-                onClick={() => {
-                     const tracks = songs.map(songToTrack);
-                     enqueue(tracks);
-                   }}
+                  onClick={() => {
+                    const tracks = songs.map(songToTrack);
+                    enqueue(tracks);
+                  }}
                >
                  <ListPlus size={15} />
                  {t('favorites.enqueueAll')}
@@ -13,23 +13,6 @@ const AUDIOBOOK_GENRES = [
  'fantasy', 'comedy', 'literature',
 ];

-interface SuperGenre {
-  id: string;
-  label: string;
-  keywords: string[];
-}
-
-const SUPER_GENRES: SuperGenre[] = [
-  { id: 'metal', label: 'Metal', keywords: ['metal', 'thrash', 'doom', 'sludge', 'hardcore', 'grindcore', 'deathcore', 'metalcore', 'stoner', 'crust', 'black', 'death'] },
-  { id: 'rock', label: 'Rock', keywords: ['rock', 'punk', 'grunge', 'alternative', 'indie', 'post-rock', 'prog', 'garage', 'psychedelic', 'shoegaze'] },
-  { id: 'pop', label: 'Pop', keywords: ['pop', 'synth-pop', 'dream pop', 'electropop', 'indie pop', 'dance pop'] },
-  { id: 'electronic', label: 'Electronic', keywords: ['electronic', 'techno', 'trance', 'ambient', 'edm', 'house', 'dubstep', 'drum and bass', 'dnb', 'electro', 'idm', 'synthwave', 'darkwave', 'industrial'] },
-  { id: 'jazz', label: 'Jazz', keywords: ['jazz', 'blues', 'soul', 'funk', 'swing', 'bebop', 'fusion'] },
-  { id: 'classical', label: 'Classical', keywords: ['classical', 'orchestra', 'symphony', 'baroque', 'opera', 'chamber', 'romantic'] },
-  { id: 'hiphop', label: 'Hip-Hop', keywords: ['hip-hop', 'hip hop', 'rap', 'r&b', 'rnb', 'trap', 'grime'] },
-  { id: 'country', label: 'Country', keywords: ['country', 'folk', 'bluegrass', 'americana', 'western'] },
-  { id: 'world', label: 'World', keywords: ['world', 'latin', 'reggae', 'ska', 'afro', 'celtic', 'flamenco', 'bossa nova'] },
-];

 function formatDuration(seconds: number): string {
  if (!seconds || isNaN(seconds)) return '0:00';
@@ -58,7 +41,9 @@ export default function RandomMix() {

  // Genre Mix state
  const [serverGenres, setServerGenres] = useState<SubsonicGenre[]>([]);
-  const [selectedSuperGenre, setSelectedSuperGenre] = useState<string | null>(null);
+  const [allAvailableGenres, setAllAvailableGenres] = useState<string[]>([]);
+  const [displayedGenres, setDisplayedGenres] = useState<string[]>([]);
+  const [selectedGenre, setSelectedGenre] = useState<string | null>(null);
  const [genreMixSongs, setGenreMixSongs] = useState<SubsonicSong[]>([]);
  const [genreMixLoading, setGenreMixLoading] = useState(false);
  const [genreMixComplete, setGenreMixComplete] = useState(false);
@@ -83,7 +68,16 @@ export default function RandomMix() {

  useEffect(() => {
    fetchSongs();
-    getGenres().then(setServerGenres).catch(() => {});
+    getGenres().then(data => {
+      setServerGenres(data);
+      const audiobookLower = AUDIOBOOK_GENRES.map(g => g.toLowerCase());
+      const available = data
+        .filter(g => g.songCount > 0 && !audiobookLower.some(ab => g.value.toLowerCase().includes(ab)))
+        .sort((a, b) => b.songCount - a.songCount)
+        .map(g => g.value);
+      setAllAvailableGenres(available);
+      setDisplayedGenres(available.slice(0, 20));
+    }).catch(() => {});
  }, []);

  const filteredSongs = songs.filter(song => {
@@ -101,13 +95,13 @@ export default function RandomMix() {
    return true;
  });

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

  const toggleSongStar = async (song: SubsonicSong, e: React.MouseEvent) => {
    e.stopPropagation();
@@ -126,52 +120,26 @@ const handlePlayAll = () => {
    }
  };

-  // Compute which super-genres have matching server genres
-  const availableSuperGenres = SUPER_GENRES.filter(sg =>
-    serverGenres.some(sg2 =>
-      sg.keywords.some(kw => sg2.value.toLowerCase().includes(kw))
-    )
-  );
-
-  const loadGenreMix = async (superGenreId: string) => {
-    const sg = SUPER_GENRES.find(s => s.id === superGenreId);
-    if (!sg) return;
-    const allMatched = serverGenres
-      .filter(sg2 => sg.keywords.some(kw => sg2.value.toLowerCase().includes(kw)))
-      .map(sg2 => sg2.value)
-      .sort(() => Math.random() - 0.5);
-    const matched = allMatched.slice(0, 50);
+  const loadGenreMix = async (genre: string) => {
    setGenreMixLoading(true);
    setGenreMixComplete(false);
    setGenreMixSongs([]);
-
-    const perGenre = Math.max(1, Math.ceil(50 / matched.length));
-    const accumulated: SubsonicSong[] = [];
-    let resolved = 0;
-
-    await Promise.allSettled(matched.map(g =>
-      getRandomSongs(perGenre, g, 45000).then(songs => {
-        accumulated.push(...songs);
-        resolved++;
-        // Show first batch immediately; update on every subsequent resolve
-        setGenreMixSongs([...accumulated]);
-        if (resolved === 1) setGenreMixLoading(false);
-      }).catch(() => { resolved++; })
-    ));
-
-    // Final shuffle once all requests are done
-    setGenreMixSongs(prev => {
-      const s = [...prev];
-      for (let i = s.length - 1; i > 0; i--) {
-        const j = Math.floor(Math.random() * (i + 1));
-        [s[i], s[j]] = [s[j], s[i]];
-      }
-      return s.slice(0, 50);
-    });
+    try {
+      const fetched = await getRandomSongs(50, genre, 45000);
+      setGenreMixSongs(fetched);
+    } catch {}
    setGenreMixLoading(false);
    setGenreMixComplete(true);
  };

+  const shuffleDisplayedGenres = () => {
+    const shuffled = [...allAvailableGenres].sort(() => Math.random() - 0.5);
+    setDisplayedGenres(shuffled.slice(0, 20));
+    setSelectedGenre(null);
+    setGenreMixSongs([]);
+    setGenreMixComplete(false);
+  };
+

  return (
    <div className="content-body animate-fade-in">
@@ -183,8 +151,8 @@ const handlePlayAll = () => {
            <RefreshCw size={18} className={loading ? 'spin' : ''} /> {t('randomMix.remix')}
          </button>
          {(() => {
-            const isGenreLoading = selectedSuperGenre && !genreMixComplete;
-            const isDisabled = loading || (selectedSuperGenre ? !genreMixComplete || genreMixSongs.length === 0 : filteredSongs.length === 0);
+            const isGenreLoading = selectedGenre && !genreMixComplete;
+            const isDisabled = loading || (selectedGenre ? !genreMixComplete || genreMixSongs.length === 0 : filteredSongs.length === 0);
            return (
              <button
                className={`btn ${isGenreLoading ? 'btn-surface' : 'btn-primary'}`}
@@ -215,9 +183,12 @@ const handlePlayAll = () => {
      }}>
        {/* Left: Blacklist */}
        <div style={{ background: 'var(--bg-card)', padding: '1rem 1.25rem' }}>
-          <div style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--text-muted)', marginBottom: '0.75rem' }}>
+          <div style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--text-muted)', marginBottom: '0.5rem' }}>
            {t('randomMix.filterPanelTitle')}
          </div>
+          <p style={{ fontSize: 12, color: 'var(--text-muted)', marginBottom: '0.75rem', lineHeight: 1.5 }}>
+            {t('randomMix.filterPanelDesc')}
+          </p>

          <label style={{ display: 'flex', alignItems: 'flex-start', gap: '0.5rem', cursor: 'pointer', fontSize: 13, marginBottom: '0.75rem' }}>
            <input
@@ -300,34 +271,47 @@ const handlePlayAll = () => {
            {t('randomMix.genreMixTitle')}
          </div>
          <p style={{ fontSize: 12, color: 'var(--text-muted)', marginBottom: '0.75rem' }}>{t('randomMix.genreMixDesc')}</p>
-          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.4rem' }}>
+          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.4rem', alignItems: 'center' }}>
            {serverGenres.length === 0 ? (
              <div className="spinner" style={{ width: 14, height: 14 }} />
-            ) : availableSuperGenres.length === 0 ? (
+            ) : displayedGenres.length === 0 ? (
              <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>{t('randomMix.genreMixNoGenres')}</span>
            ) : (
-              availableSuperGenres.map(sg => (
-                <button
-                  key={sg.id}
-                  className={`btn ${selectedSuperGenre === sg.id ? 'btn-primary' : 'btn-surface'}`}
-                  style={{ fontSize: 12, padding: '4px 12px' }}
-                  onClick={() => { setSelectedSuperGenre(sg.id); loadGenreMix(sg.id); }}
-                  disabled={genreMixLoading}
-                >
-                  {sg.label}
-                </button>
-              ))
+              <>
+                {displayedGenres.map(genre => (
+                  <button
+                    key={genre}
+                    className={`btn ${selectedGenre === genre ? 'btn-primary' : 'btn-surface'}`}
+                    style={{ fontSize: 12, padding: '4px 12px' }}
+                    onClick={() => { setSelectedGenre(genre); loadGenreMix(genre); }}
+                    disabled={genreMixLoading}
+                  >
+                    {genre}
+                  </button>
+                ))}
+                {allAvailableGenres.length > 20 && (
+                  <button
+                    className="btn btn-ghost"
+                    style={{ fontSize: 12, padding: '4px 10px', flexShrink: 0 }}
+                    onClick={shuffleDisplayedGenres}
+                    disabled={genreMixLoading}
+                    data-tooltip={t('randomMix.shuffleGenres')}
+                  >
+                    <RefreshCw size={12} />
+                  </button>
+                )}
+              </>
            )}
          </div>
        </div>
      </div>

-      {/* Genre Mix tracklist (shown when a super-genre is selected) */}
+      {/* Genre Mix tracklist (shown when a genre is selected) */}
      {(genreMixLoading || genreMixSongs.length > 0) && (
        <div style={{ marginBottom: '2rem' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
            <span style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: 13, fontWeight: 600, color: 'var(--text-primary)' }}>
-              {SUPER_GENRES.find(s => s.id === selectedSuperGenre)?.label} Mix
+              {selectedGenre} Mix
              {genreMixLoading && <div className="spinner" style={{ width: 12, height: 12, borderWidth: 2 }} />}
            </span>
          </div>
@@ -381,7 +365,7 @@ const handlePlayAll = () => {
         </div>
       )}

-      {!selectedSuperGenre && (loading && songs.length === 0 ? (
+      {!selectedGenre && (loading && songs.length === 0 ? (
        <div style={{ display: 'flex', justifyContent: 'center', padding: '4rem' }}>
          <div className="spinner" />
        </div>
@@ -4,7 +4,7 @@ import changelogRaw from '../../CHANGELOG.md?raw';
 import { useNavigate, useLocation } from 'react-router-dom';
 import {
  Wifi, WifiOff, Globe, Music2, Sliders, LogOut, CheckCircle2, FolderOpen,
-  Palette, Server, Plus, Trash2, Eye, EyeOff, Info, ExternalLink, Shuffle, X, Play, Type, Keyboard
+  Palette, Server, Plus, Trash2, Eye, EyeOff, Info, ExternalLink, Shuffle, X, Play, Type, Keyboard, ChevronDown
 } from 'lucide-react';
 import { invoke } from '@tauri-apps/api/core';
 import { open as openUrl } from '@tauri-apps/plugin-shell';
@@ -26,6 +26,32 @@ import Equalizer from '../components/Equalizer';

 const AUDIOBOOK_GENRES_DISPLAY = ['Hörbuch', 'Hoerbuch', 'Hörspiel', 'Hoerspiel', 'Audiobook', 'Audio Book', 'Spoken Word', 'Spokenword', 'Podcast', 'Kapitel', 'Thriller', 'Krimi', 'Speech', 'Fantasy', 'Comedy', 'Literature'];

+const CONTRIBUTORS = [
+  {
+    github: 'jiezhuo',
+    since: '1.21',
+    contributions: [
+      'Chinese (Simplified) translation',
+    ],
+  },
+  {
+    github: 'nullobject',
+    since: '1.22.0',
+    contributions: [
+      'Seek debounce & race condition fix (PR #7)',
+      'Waveform seekbar stability on position update (PR #8)',
+    ],
+  },
+  {
+    github: 'trbn1',
+    since: '1.22.0',
+    contributions: [
+      'Replay Gain metadata propagation (PR #9)',
+      'songToTrack() — unified track construction across all sources',
+    ],
+  },
+] as const;
+
 type Tab = 'playback' | 'library' | 'appearance' | 'shortcuts' | 'server' | 'about';

 function AddServerForm({ onSave, onCancel }: { onSave: (data: Omit<ServerProfile, 'id'>) => void; onCancel: () => void }) {
@@ -118,6 +144,7 @@ export default function Settings() {
  const [offlineCacheBytes, setOfflineCacheBytes] = useState<number | null>(null);
  const [showClearConfirm, setShowClearConfirm] = useState(false);
  const [clearing, setClearing] = useState(false);
+  const [contributorsOpen, setContributorsOpen] = useState(false);

  useEffect(() => {
    if (!auth.lastfmSessionKey || !auth.lastfmUsername) { setLfmUserInfo(null); return; }
@@ -1017,9 +1044,51 @@ export default function Settings() {
                  <span style={{ color: 'var(--text-muted)', minWidth: 56 }}>AI</span>
                  <span style={{ color: 'var(--text-secondary)' }}>{t('settings.aboutAiCredit')}</span>
                </div>
-                <div style={{ display: 'flex', gap: '0.5rem' }}>
-                  <span style={{ color: 'var(--text-muted)', minWidth: 56 }}>{t('settings.aboutContributorsLabel')}</span>
-                  <span style={{ color: 'var(--text-secondary)' }}>{t('settings.aboutContributors')}</span>
+                <div>
+                  <button
+                    style={{ display: 'flex', width: '100%', alignItems: 'center', gap: '0.5rem', background: 'none', border: 'none', cursor: 'pointer', padding: 0, textAlign: 'left' }}
+                    onClick={() => setContributorsOpen(o => !o)}
+                  >
+                    <span style={{ color: 'var(--text-muted)', minWidth: 56, flexShrink: 0 }}>{t('settings.aboutContributorsLabel')}</span>
+                    <span style={{ color: 'var(--text-secondary)', flex: 1 }}>{CONTRIBUTORS.length}</span>
+                    <ChevronDown size={13} style={{ color: 'var(--text-muted)', transform: contributorsOpen ? 'rotate(180deg)' : 'none', transition: 'transform 0.2s' }} />
+                  </button>
+
+                  {contributorsOpen && (
+                    <div style={{ marginTop: '0.75rem', display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+                      {CONTRIBUTORS.map(c => (
+                        <div key={c.github} style={{
+                          display: 'flex', gap: '0.75rem', alignItems: 'flex-start',
+                          background: 'var(--bg-elevated)', borderRadius: 'var(--radius-md)',
+                          padding: '0.65rem 0.75rem',
+                          boxShadow: 'inset 0 0 0 1px var(--border-subtle)',
+                        }}>
+                          <img
+                            src={`https://github.com/${c.github}.png?size=48`}
+                            width={36} height={36}
+                            style={{ borderRadius: '50%', flexShrink: 0, marginTop: 2 }}
+                            alt={c.github}
+                          />
+                          <div style={{ flex: 1, minWidth: 0 }}>
+                            <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '0.3rem' }}>
+                              <button
+                                style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0, color: 'var(--accent)', fontWeight: 600, fontSize: 13 }}
+                                onClick={() => openUrl(`https://github.com/${c.github}`)}
+                              >
+                                @{c.github}
+                              </button>
+                              <span style={{ fontSize: 10, background: 'var(--accent-dim)', color: 'var(--accent)', padding: '1px 6px', borderRadius: 99, fontWeight: 600 }}>
+                                v{c.since}
+                              </span>
+                            </div>
+                            <ul style={{ margin: 0, padding: '0 0 0 1rem', fontSize: 12, color: 'var(--text-secondary)', lineHeight: 1.8 }}>
+                              {c.contributions.map(item => <li key={item}>{item}</li>)}
+                            </ul>
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  )}
                </div>
              </div>

@@ -169,15 +169,14 @@
  cursor: pointer;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
-  border: 1px solid var(--border-subtle);
  overflow: hidden;
-  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
+  box-shadow: inset 0 0 0 1px var(--border-subtle);
+  transition: transform var(--transition-base), box-shadow var(--transition-base);
 }

 .album-card:hover {
  transform: translateY(-3px);
-  box-shadow: var(--shadow-md);
-  border-color: var(--border);
+  box-shadow: inset 0 0 0 1px var(--border), var(--shadow-md);
 }

 .album-card-cover {
@@ -363,6 +362,11 @@
  gap: var(--space-4);
 }

+.album-grid-wrap .album-card {
+  content-visibility: auto;
+  contain-intrinsic-size: 0 220px;
+}
+

@media (min-width: 1024px) {
  .album-grid-wrap {
@@ -498,13 +502,13 @@

 .live-search-field {
  padding-left: 36px !important;
-  padding-right: 32px !important;
+  padding-right: 58px !important;
  border-radius: var(--radius-full) !important;
 }

 .live-search-clear {
  position: absolute;
-  right: 12px;
+  right: 8px;
  font-size: 18px;
  color: var(--text-muted);
  line-height: 1;
@@ -515,6 +519,29 @@
  color: var(--text-primary);
 }

+.live-search-adv-btn {
+  position: absolute;
+  right: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--text-muted);
+  opacity: 0.55;
+  transition: opacity var(--transition-fast), color var(--transition-fast);
+  border-radius: var(--radius-sm);
+  padding: 0;
+}
+
+.live-search-adv-btn:hover {
+  opacity: 1;
+  color: var(--accent);
+}
+
 .live-search-dropdown {
  position: absolute;
  top: calc(100% + 8px);
@@ -4127,6 +4154,7 @@
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  max-height: 220px;
  overflow-y: auto;
+  overscroll-behavior: contain;
  z-index: 500;
 }

@@ -3306,13 +3306,13 @@ select.input.input:focus {
 .card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
-  border: 1px solid var(--border-subtle);
  overflow: hidden;
+  box-shadow: inset 0 0 0 1px var(--border-subtle);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
 }
 .card:hover {
  transform: translateY(-2px);
-  box-shadow: var(--shadow-md);
+  box-shadow: inset 0 0 0 1px var(--border), var(--shadow-md);
 }

 /* ─── Album Grid ─── */
@@ -11516,21 +11516,17 @@ input[type="range"]:hover::-webkit-slider-thumb {
  --logo-color-end:   #C8960C;
 }

-/* Sidebar — Nile-sky deep blue, subtle hieroglyph grid */
+/* Sidebar — Nile-sky deep blue, drifting cloud wisps */
 [data-theme='powerslave'] .sidebar {
  background: #0A2035;
  border-right: none;
  background-image:
-    repeating-linear-gradient(
-      0deg,
-      rgba(46, 123, 184, 0.08) 0px, transparent 1px, transparent 48px,
-      rgba(46, 123, 184, 0.08) 49px
-    ),
-    repeating-linear-gradient(
-      90deg,
-      rgba(46, 123, 184, 0.05) 0px, transparent 1px, transparent 96px,
-      rgba(46, 123, 184, 0.05) 97px
-    );
+    radial-gradient(ellipse 130% 30% at 50%  6%, rgba(140, 190, 235, 0.07) 0%, transparent 65%),
+    radial-gradient(ellipse  90% 25% at 18% 22%, rgba(100, 155, 205, 0.05) 0%, transparent 60%),
+    radial-gradient(ellipse 115% 28% at 78% 38%, rgba(120, 170, 225, 0.05) 0%, transparent 65%),
+    radial-gradient(ellipse 100% 26% at 38% 58%, rgba( 90, 145, 195, 0.04) 0%, transparent 60%),
+    radial-gradient(ellipse 120% 30% at 68% 75%, rgba(110, 165, 218, 0.05) 0%, transparent 65%),
+    radial-gradient(ellipse  85% 24% at 22% 92%, rgba(130, 180, 232, 0.04) 0%, transparent 60%);
 }

 [data-theme='powerslave'] .nav-link { color: rgba(200, 224, 248, 0.65); }
@@ -11633,6 +11629,10 @@ input[type="range"]:hover::-webkit-slider-thumb {
  border: 1px solid #806006;
 }

+[data-theme='powerslave'] .album-card-details-btn:hover {
+  background: linear-gradient(180deg, #E0A028 0%, #D48818 50%, #B07010 100%);
+}
+
 /* Badge — gold pill */
 [data-theme='powerslave'] .badge,
 [data-theme='powerslave'] .album-detail-badge {