feat: v1.20.0 — FLAC Seek Fix, Genres, Genre Filter, Chinese, W10 Theme

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

CHANGELOG.md

@@ -5,6 +5,29 @@ 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.20.0] - 2026-03-29
+
+### Added
+
+- **Chinese language (zh)**: Full UI translation contributed by [@jiezhuo](https://github.com/jiezhuo). Language can be selected in Settings → General.
+- **Genres page** *(requested by [@grillonbleu](https://github.com/grillonbleu))*: New page (sidebar: Tags icon) showing all server genres as coloured cards — icon watermark, genre name, album count. Cards are sorted by album count descending and deterministically colour-coded from the Catppuccin palette. Clicking a card opens the album list for that genre. Navigating back restores the previous scroll position.
+- **Genre filter on Albums, New Releases, Random Albums** *(requested by [@grillonbleu](https://github.com/grillonbleu))*: A multi-select genre combobox in the page header lets you filter any of these views to one or more genres. Chips show selected genres; backspace removes the last one; clicking outside collapses the filter automatically when nothing is selected. In filter mode, results are fetched in parallel across all selected genres and deduped client-side.
+- **Settings — Contributors**: A new "Contributors" row in the About section credits community translators.
+
+### Changed
+
+- **Theme — W10** *(Operating Systems)*: New Windows 10 Fluent Design light theme. Clean white content area, flat light-grey `#F3F3F3` navigation pane, near-black `#1C1C1C` taskbar player bar with a Windows-blue `#0078D4` accent stripe, flat buttons without gradients (4 px radius). Sharp, unmistakably W10 — distinct from the glass-era W7/Vista and the rounded-corner W11.
+- **ThemePicker — Windows themes sorted by release year**: W3.1 → W98 → WXP → Wista → W7 → W10 → W11.
+- **Playlists page — removed**: The dedicated Playlists page has been removed. Playlists remain fully accessible via the Queue panel (Save / Load buttons in the toolbar).
+
+### Fixed
+
+- **FLAC seeking** *(Rust audio engine)*: `rodio`'s internal `ReadSeekSource` hardcodes `byte_len() → None`, which caused the symphonia FLAC demuxer to reject all seek attempts (it validates seek byte offsets against the total stream length). Replaced `rodio::Decoder` with a direct symphonia pipeline (`SizedDecoder`) that wraps the audio bytes in a `SizedCursorSource` providing the correct `byte_len()`. FLAC seeking now works regardless of whether the file has an embedded SEEKTABLE.
+- **Genre missing in Queue meta box when playing from album card**: `playAlbum()` (used by the play button on all album cards) mapped song-level genre only — which Navidrome does not always return per song. Now falls back to the album-level genre from `getAlbum`. Same fallback applied to all three play/enqueue handlers in `AlbumDetail`.
+- **Logo gradient CSS variables**: Sidebar logo gradient now uses `--logo-color-start` / `--logo-color-end` with fallbacks, allowing themes with dark sidebars to override the gradient colours.
+
+---
+
 ## [1.19.0] - 2026-03-27
 
 ### Added

README.md

@@ -24,7 +24,7 @@ Designed specifically for users hosting their own music via Navidrome or other S
 
 - 🎨 **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.
+- 🌍 **Internationalization (i18n)**: Fully translated into English, German, French, Dutch, and Chinese.
 - 📻 **Live "Now Playing"**: See what other users on your server are currently listening to in real-time.
 - 🎵 **Last.fm Integration**: Direct scrobbling, Now Playing updates, love/unlove, Similar Artists, and top stats — no Navidrome configuration required.
 - 🎤 **Synchronized Lyrics**: In-sidebar lyrics pane powered by LRCLIB — synced with auto-scroll and line highlighting, plain-text fallback.
@@ -36,6 +36,7 @@ Designed specifically for users hosting their own music via Navidrome or other S
 - ⌨️ **Configurable Keybindings**: Rebind any playback action (play/pause, next, seek, volume…) directly in Settings.
 - 🔤 **Font Picker**: 10 UI fonts to choose from in Settings → Appearance.
 - 🎼 **Random Mix**: Generate a random playlist from your entire library. Filter by keyword or pick a Super Genre (Metal, Rock, Electronic, Jazz…) for a focused mix with progressive loading.
+- 🏷️ **Genres**: Browse your entire library by genre — coloured cards sorted by album count with a dedicated album view per genre. Multi-select genre filter available on Albums, New Releases, and Random Albums pages.
 - 🔄 **Update Notifications**: Built-in update checker (on startup + every 10 minutes) that notifies you when a new version is available on GitHub.
 - 🖥️ **Cross-Platform**: Available natively for Windows, macOS, and Linux (including Wayland support).
 
@@ -56,7 +57,7 @@ Designed specifically for users hosting their own music via Navidrome or other S
 - [x] IndexedDB image caching
 - [x] Random Mix with keyword filter & Super Genre mix
 - [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] Internationalization (English, German, French, Dutch, Chinese)
 - [x] AUR package (Arch / CachyOS)
 - [x] Configurable keybindings
 - [x] Font picker (10 UI fonts)
@@ -71,7 +72,6 @@ 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**: 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.19.0",
+  "version": "1.20.0",
   "private": true,
   "scripts": {
     "dev": "vite",

src-tauri/Cargo.lock

@@ -3370,6 +3370,7 @@ dependencies = [
  "serde",
  "serde_json",
  "souvlaki",
+ "symphonia",
  "tauri",
  "tauri-build",
  "tauri-plugin-dialog",

src-tauri/Cargo.toml

@@ -30,6 +30,7 @@ tauri-plugin-fs = "2"
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"
 rodio = { version = "0.19", default-features = false, features = ["symphonia-all"] }
+symphonia = { version = "0.5", default-features = false, features = ["flac", "mp3", "pcm", "aac", "isomp4", "vorbis", "wav", "adpcm"] }
 reqwest = { version = "0.12", features = ["stream", "json"] }
 md5 = "0.7"
 tokio = { version = "1", features = ["rt", "time"] }

src-tauri/src/audio.rs

@@ -1,12 +1,21 @@
-use std::io::Cursor;
+use std::io::{Cursor, Read, Seek};
 use std::sync::{Arc, Mutex};
 use std::sync::atomic::{AtomicBool, AtomicU32, AtomicU64, Ordering};
 use std::time::{Duration, Instant};
 
 use biquad::{Biquad, Coefficients, DirectForm2Transposed, ToHertz, Type as FilterType};
-use rodio::{Decoder, Sink, Source};
+use rodio::{Sink, Source};
 use rodio::source::UniformSourceIterator;
 use serde::Serialize;
+use symphonia::core::{
+    audio::{AudioBufferRef, SampleBuffer, SignalSpec},
+    codecs::{DecoderOptions, CODEC_TYPE_NULL},
+    formats::{FormatOptions, FormatReader, SeekMode, SeekTo},
+    io::{MediaSource, MediaSourceStream},
+    meta::MetadataOptions,
+    probe::Hint,
+    units::{self, Time},
+};
 use tauri::{AppHandle, Emitter, State};
 
 // ─── 10-Band Graphic Equalizer ────────────────────────────────────────────────
@@ -394,6 +403,264 @@ impl<S: Source<Item = f32>> Source for CountingSource<S> {
     }
 }
 
+// ─── SizedCursorSource — MediaSource with correct byte_len ────────────────────
+//
+// rodio's internal ReadSeekSource wraps Cursor<Vec<u8>> but hardcodes
+// byte_len() → None.  This tells symphonia "stream length unknown", which
+// prevents the FLAC demuxer from seeking (it validates seek offsets against
+// the total stream length from byte_len).  MP3 is unaffected because its
+// demuxer uses Xing/LAME headers instead.
+//
+// This wrapper provides the actual byte length, fixing seek for all formats.
+
+struct SizedCursorSource {
+    inner: Cursor<Vec<u8>>,
+    len: u64,
+}
+
+impl Read for SizedCursorSource {
+    fn read(&mut self, buf: &mut [u8]) -> std::io::Result<usize> {
+        self.inner.read(buf)
+    }
+}
+
+impl Seek for SizedCursorSource {
+    fn seek(&mut self, pos: std::io::SeekFrom) -> std::io::Result<u64> {
+        self.inner.seek(pos)
+    }
+}
+
+impl MediaSource for SizedCursorSource {
+    fn is_seekable(&self) -> bool { true }
+    fn byte_len(&self) -> Option<u64> { Some(self.len) }
+}
+
+// ─── SizedDecoder — symphonia decoder with correct byte_len ───────────────────
+//
+// Replaces rodio::Decoder::new() which wraps the source in ReadSeekSource
+// (byte_len = None).  This constructs the symphonia pipeline directly,
+// providing the correct byte_len via SizedCursorSource.
+//
+// Implements Iterator<Item = i16> + Source — identical interface to
+// rodio::Decoder, so the rest of the source chain is unchanged.
+
+const DECODE_MAX_RETRIES: usize = 3;
+
+struct SizedDecoder {
+    decoder: Box<dyn symphonia::core::codecs::Decoder>,
+    current_frame_offset: usize,
+    format: Box<dyn FormatReader>,
+    total_duration: Option<Time>,
+    buffer: SampleBuffer<i16>,
+    spec: SignalSpec,
+}
+
+impl SizedDecoder {
+    fn new(data: Vec<u8>, format_hint: Option<&str>) -> Result<Self, String> {
+        let data_len = data.len() as u64;
+        let source = SizedCursorSource {
+            inner: Cursor::new(data),
+            len: data_len,
+        };
+        let mss = MediaSourceStream::new(
+            Box::new(source) as Box<dyn MediaSource>,
+            Default::default(),
+        );
+
+        let mut hint = Hint::new();
+        if let Some(ext) = format_hint {
+            hint.with_extension(ext);
+        }
+        let format_opts = FormatOptions {
+            enable_gapless: true,
+            ..Default::default()
+        };
+
+        let probed = symphonia::default::get_probe()
+            .format(&hint, mss, &format_opts, &MetadataOptions::default())
+            .map_err(|e| format!("probe failed: {e}"))?;
+
+        let track = probed.format
+            .tracks()
+            .iter()
+            .find(|t| t.codec_params.codec != CODEC_TYPE_NULL)
+            .ok_or_else(|| "no supported audio track".to_string())?;
+
+        let track_id = track.id;
+        let total_duration = track.codec_params.time_base
+            .zip(track.codec_params.n_frames)
+            .map(|(base, frames)| base.calc_time(frames));
+
+        let mut decoder = symphonia::default::get_codecs()
+            .make(&track.codec_params, &DecoderOptions::default())
+            .map_err(|e| format!("codec init failed: {e}"))?;
+
+        let mut format = probed.format;
+
+        // Decode the first packet to initialise spec + buffer.
+        let mut decode_errors: usize = 0;
+        let decoded = loop {
+            let packet = match format.next_packet() {
+                Ok(p) => p,
+                Err(symphonia::core::errors::Error::IoError(_)) => {
+                    break decoder.last_decoded();
+                }
+                Err(e) => return Err(format!("first packet: {e}")),
+            };
+            if packet.track_id() != track_id { continue; }
+            match decoder.decode(&packet) {
+                Ok(decoded) => break decoded,
+                Err(symphonia::core::errors::Error::DecodeError(_)) => {
+                    decode_errors += 1;
+                    if decode_errors > DECODE_MAX_RETRIES {
+                        return Err("too many decode errors".into());
+                    }
+                }
+                Err(e) => return Err(format!("decode: {e}")),
+            }
+        };
+
+        let spec = decoded.spec().to_owned();
+        let buffer = Self::make_buffer(decoded, &spec);
+
+        Ok(SizedDecoder {
+            decoder,
+            current_frame_offset: 0,
+            format,
+            total_duration,
+            buffer,
+            spec,
+        })
+    }
+
+    #[inline]
+    fn make_buffer(decoded: AudioBufferRef, spec: &SignalSpec) -> SampleBuffer<i16> {
+        let duration = units::Duration::from(decoded.capacity() as u64);
+        let mut buffer = SampleBuffer::<i16>::new(duration, *spec);
+        buffer.copy_interleaved_ref(decoded);
+        buffer
+    }
+
+    /// Refine position after a coarse seek — decode packets until we reach the
+    /// exact requested timestamp.
+    fn refine_position(
+        &mut self,
+        seek_res: symphonia::core::formats::SeekedTo,
+    ) -> Result<(), String> {
+        let mut samples_to_pass = seek_res.required_ts - seek_res.actual_ts;
+        let packet = loop {
+            let candidate = self.format.next_packet()
+                .map_err(|e| format!("refine seek: {e}"))?;
+            if candidate.dur() > samples_to_pass {
+                break candidate;
+            }
+            samples_to_pass -= candidate.dur();
+        };
+
+        let mut decoded = self.decoder.decode(&packet);
+        for _ in 0..DECODE_MAX_RETRIES {
+            if decoded.is_err() {
+                let p = self.format.next_packet()
+                    .map_err(|e| format!("refine retry: {e}"))?;
+                decoded = self.decoder.decode(&p);
+            }
+        }
+
+        let decoded = decoded.map_err(|e| format!("refine decode: {e}"))?;
+        decoded.spec().clone_into(&mut self.spec);
+        self.buffer = Self::make_buffer(decoded, &self.spec);
+        self.current_frame_offset = samples_to_pass as usize * self.spec.channels.count();
+        Ok(())
+    }
+}
+
+impl Iterator for SizedDecoder {
+    type Item = i16;
+
+    #[inline]
+    fn next(&mut self) -> Option<i16> {
+        if self.current_frame_offset >= self.buffer.len() {
+            let packet = self.format.next_packet().ok()?;
+            let mut decoded = self.decoder.decode(&packet);
+            for _ in 0..DECODE_MAX_RETRIES {
+                if decoded.is_err() {
+                    let p = self.format.next_packet().ok()?;
+                    decoded = self.decoder.decode(&p);
+                }
+            }
+            let decoded = decoded.ok()?;
+            decoded.spec().clone_into(&mut self.spec);
+            self.buffer = Self::make_buffer(decoded, &self.spec);
+            self.current_frame_offset = 0;
+        }
+
+        let sample = *self.buffer.samples().get(self.current_frame_offset)?;
+        self.current_frame_offset += 1;
+        Some(sample)
+    }
+}
+
+impl Source for SizedDecoder {
+    #[inline]
+    fn current_frame_len(&self) -> Option<usize> {
+        Some(self.buffer.samples().len())
+    }
+
+    #[inline]
+    fn channels(&self) -> u16 {
+        self.spec.channels.count() as u16
+    }
+
+    #[inline]
+    fn sample_rate(&self) -> u32 {
+        self.spec.rate
+    }
+
+    #[inline]
+    fn total_duration(&self) -> Option<Duration> {
+        self.total_duration.map(|Time { seconds, frac }| {
+            Duration::new(seconds, (frac * 1_000_000_000.0) as u32)
+        })
+    }
+
+    fn try_seek(&mut self, pos: Duration) -> Result<(), rodio::source::SeekError> {
+        let seek_beyond_end = self
+            .total_duration()
+            .is_some_and(|dur| dur.saturating_sub(pos).as_millis() < 1);
+
+        let time: Time = if seek_beyond_end {
+            let t = self.total_duration.unwrap_or(pos.as_secs_f64().into());
+            // Step back a tiny bit — some demuxers can't seek to the exact end.
+            let mut secs = t.seconds;
+            let mut frac = t.frac - 0.0001;
+            if frac < 0.0 {
+                secs = secs.saturating_sub(1);
+                frac = 1.0 - frac;
+            }
+            Time { seconds: secs, frac }
+        } else {
+            pos.as_secs_f64().into()
+        };
+
+        let to_skip = self.current_frame_offset % self.channels() as usize;
+
+        let seek_res = self
+            .format
+            .seek(SeekMode::Accurate, SeekTo::Time { time, track_id: None })
+            .map_err(|e| rodio::source::SeekError::Other(
+                Box::new(std::io::Error::new(std::io::ErrorKind::Other, e.to_string()))
+            ))?;
+
+        self.refine_position(seek_res)
+            .map_err(|e| rodio::source::SeekError::Other(
+                Box::new(std::io::Error::new(std::io::ErrorKind::Other, e))
+            ))?;
+
+        self.current_frame_offset += to_skip;
+        Ok(())
+    }
+}
+
 // ─── Encoder-gap trimming (iTunSMPB) ─────────────────────────────────────────
 //
 // MP3/AAC encoders prepend an "encoder delay" (typically 576–2112 silent
@@ -473,6 +740,7 @@ struct BuiltSource {
 ///
 /// `sample_counter`: atomic counter incremented per sample for drift-free position.
 /// `target_rate`: canonical output sample rate for resampling (0 = no resampling).
+/// `format_hint`: optional file extension (e.g. "flac", "mp3") to help symphonia probe.
 fn build_source(
     data: Vec<u8>,
     duration_hint: f64,
@@ -482,11 +750,11 @@ fn build_source(
     fade_in_dur: Duration,
     sample_counter: Arc<AtomicU64>,
     target_rate: u32,
+    format_hint: Option<&str>,
 ) -> Result<BuiltSource, String> {
     let gapless = parse_gapless_info(&data);
 
-    let cursor = Cursor::new(data);
-    let decoder = Decoder::new(cursor).map_err(|e| e.to_string())?;
+    let decoder = SizedDecoder::new(data, format_hint)?;
     let sample_rate = decoder.sample_rate();
     let channels = decoder.channels();
 
@@ -881,6 +1149,10 @@ pub async fn audio_play(
     // Reset sample counter for the new track.
     state.samples_played.store(0, Ordering::Relaxed);
     let target_rate = state.current_sample_rate.load(Ordering::Relaxed);
+    // Extract format hint from URL for better symphonia probing.
+    let format_hint = url.rsplit('.').next()
+        .and_then(|ext| ext.split('?').next())
+        .map(|s| s.to_lowercase());
     let built = build_source(
         data,
         duration_hint,
@@ -890,6 +1162,7 @@ pub async fn audio_play(
         fade_in_dur,
         state.samples_played.clone(),
         target_rate,
+        format_hint.as_deref(),
     ).map_err(|e| { app.emit("audio:error", &e).ok(); e })?;
     let source = built.source;
     let duration_secs = built.duration_secs;
@@ -1071,6 +1344,9 @@ pub async fn audio_chain_preload(
     // samples_played when the chained track becomes active.
     let chain_counter = Arc::new(AtomicU64::new(0));
     let target_rate = state.current_sample_rate.load(Ordering::Relaxed);
+    let format_hint = url.rsplit('.').next()
+        .and_then(|ext| ext.split('?').next())
+        .map(|s| s.to_lowercase());
     let built = build_source(
         data,
         duration_hint,
@@ -1080,6 +1356,7 @@ pub async fn audio_chain_preload(
         Duration::ZERO, // gapless: no fade-in — sample-accurate boundary, no click
         chain_counter.clone(),
         target_rate,
+        format_hint.as_deref(),
     ).map_err(|e| e.to_string())?;
     let source = built.source;
     let duration_secs = built.duration_secs;
@@ -1144,6 +1421,8 @@ fn spawn_progress_task(
         let mut near_end_ticks: u32 = 0;
         // Local done-flag reference; swapped on gapless transition.
         let mut current_done = initial_done;
+        // Local sample counter; swapped to chained source's counter on transition.
+        let mut samples_played = samples_played;
 
         loop {
             // 100 ms tick — tight enough for responsive UI, low enough CPU cost.
@@ -1163,12 +1442,11 @@ fn spawn_progress_task(
                     // Swap to the chained source's done flag.
                     current_done = info.source_done;
 
-                    // Swap the sample counter: the chained source's counter
-                    // is already being incremented by CountingSource. Copy its
-                    // current value into the shared samples_played so the
-                    // progress calculation stays accurate.
-                    let chained_samples = info.sample_counter.load(Ordering::Relaxed);
-                    samples_played.store(chained_samples, Ordering::Relaxed);
+                    // Swap to the chained source's sample counter.
+                    // The chained CountingSource increments its own Arc,
+                    // so we must rebind our local reference to it —
+                    // a one-time value copy would go stale immediately.
+                    samples_played = info.sample_counter;
 
                     // Update tracking state.
                     {
@@ -1234,6 +1512,15 @@ fn spawn_progress_task(
                 near_end_ticks += 1;
                 // At 100 ms ticks, 10 ticks ≈ 1 s — equivalent to the old 2×500ms.
                 if near_end_ticks >= 10 {
+                    // If a gapless chain is pending, the source hasn't
+                    // exhausted yet — duration_hint (integer seconds from
+                    // Subsonic) is shorter than the actual audio content.
+                    // Don't emit audio:ended; let the gapless transition
+                    // handle it when current_done fires.
+                    let has_chain = chained_arc.lock().unwrap().is_some();
+                    if has_chain {
+                        continue;
+                    }
                     gen_counter.fetch_add(1, Ordering::SeqCst);
                     app.emit("audio:ended", ()).ok();
                     break;

src-tauri/tauri.conf.json

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

src/App.tsx

@@ -22,7 +22,6 @@ import Login from './pages/Login';
 import AlbumDetail from './pages/AlbumDetail';
 import LabelAlbums from './pages/LabelAlbums';
 import Statistics from './pages/Statistics';
-import Playlists from './pages/Playlists';
 import Help from './pages/Help';
 import RandomAlbums from './pages/RandomAlbums';
 import SearchResults from './pages/SearchResults';
@@ -36,6 +35,8 @@ import LastfmIndicator from './components/LastfmIndicator';
 import OfflineOverlay from './components/OfflineOverlay';
 import OfflineBanner from './components/OfflineBanner';
 import OfflineLibrary from './pages/OfflineLibrary';
+import Genres from './pages/Genres';
+import GenreDetail from './pages/GenreDetail';
 import ExportPickerModal from './components/ExportPickerModal';
 import { useConnectionStatus } from './hooks/useConnectionStatus';
 import { useAuthStore } from './store/authStore';
@@ -200,7 +201,6 @@ function AppShell() {
             <Route path="/new-releases" element={<NewReleases />} />
             <Route path="/favorites" element={<Favorites />} />
             <Route path="/random-mix" element={<RandomMix />} />
-            <Route path="/playlists" element={<Playlists />} />
             <Route path="/label/:name" element={<LabelAlbums />} />
             <Route path="/search" element={<SearchResults />} />
             <Route path="/statistics" element={<Statistics />} />
@@ -208,6 +208,8 @@ function AppShell() {
             <Route path="/settings" element={<Settings />} />
             <Route path="/help" element={<Help />} />
             <Route path="/offline" element={<OfflineLibrary />} />
+            <Route path="/genres" element={<Genres />} />
+            <Route path="/genres/:name" element={<GenreDetail />} />
           </Routes>
         </div>
       </main>

src/api/subsonic.ts

@@ -230,8 +230,19 @@ export async function getSimilarSongs2(id: string, count = 50): Promise<Subsonic
 }
 
 export async function getGenres(): Promise<SubsonicGenre[]> {
-  const data = await api<{ genres: { genre: SubsonicGenre[] } }>('getGenres.view');
-  return data.genres?.genre ?? [];
+  const data = await api<{ genres: { genre: SubsonicGenre | SubsonicGenre[] } }>('getGenres.view');
+  const raw = data.genres?.genre;
+  if (!raw) return [];
+  return Array.isArray(raw) ? raw : [raw];
+}
+
+export async function getAlbumsByGenre(genre: string, size = 50, offset = 0): Promise<SubsonicAlbum[]> {
+  const data = await api<{ albumList2: { album: SubsonicAlbum | SubsonicAlbum[] } }>('getAlbumList2.view', {
+    type: 'byGenre', genre, size, offset, _t: Date.now(),
+  });
+  const raw = data.albumList2?.album;
+  if (!raw) return [];
+  return Array.isArray(raw) ? raw : [raw];
 }
 
 export interface SearchResults {

src/components/GenreFilterBar.tsx

@@ -0,0 +1,146 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Filter, X } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { getGenres } from '../api/subsonic';
+
+interface GenreFilterBarProps {
+  selected: string[];
+  onSelectionChange: (selected: string[]) => void;
+}
+
+export default function GenreFilterBar({ selected, onSelectionChange }: GenreFilterBarProps) {
+  const { t } = useTranslation();
+  const [open, setOpen] = useState(false);
+  const [genres, setGenres] = useState<string[]>([]);
+  const [search, setSearch] = useState('');
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    getGenres().then(data =>
+      setGenres(data.map(g => g.value).sort((a, b) => a.localeCompare(b)))
+    );
+  }, []);
+
+  // close dropdown on outside click
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setDropdownOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, []);
+
+  // sync open state with selection
+  useEffect(() => {
+    if (selected.length > 0) setOpen(true);
+  }, [selected]);
+
+  const filteredOptions = genres.filter(
+    g => !selected.includes(g) && g.toLowerCase().includes(search.toLowerCase())
+  );
+
+  const add = (genre: string) => {
+    onSelectionChange([...selected, genre]);
+    setSearch('');
+    inputRef.current?.focus();
+  };
+
+  const remove = (genre: string) => {
+    onSelectionChange(selected.filter(s => s !== genre));
+  };
+
+  const clear = () => {
+    onSelectionChange([]);
+    setSearch('');
+    setOpen(false);
+    setDropdownOpen(false);
+  };
+
+  const openFilter = () => {
+    setOpen(true);
+    setTimeout(() => { inputRef.current?.focus(); setDropdownOpen(true); }, 30);
+  };
+
+  if (!open) {
+    return (
+      <button className="btn btn-surface" onClick={openFilter} style={{ display: 'flex', alignItems: 'center', gap: '0.4rem' }}>
+        <Filter size={14} />
+        {t('common.filterGenre')}
+      </button>
+    );
+  }
+
+  const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {
+    // relatedTarget is the next focused element; if it's outside our container, handle close
+    const next = e.relatedTarget as Node | null;
+    if (containerRef.current && next && containerRef.current.contains(next)) return;
+    setTimeout(() => {
+      if (selected.length === 0) {
+        setOpen(false);
+        setSearch('');
+        setDropdownOpen(false);
+      } else {
+        setDropdownOpen(false);
+      }
+    }, 150);
+  };
+
+  return (
+    <div ref={containerRef} onBlur={handleBlur} style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', flexWrap: 'wrap' }}>
+      <Filter size={14} style={{ color: 'var(--accent)', flexShrink: 0 }} />
+
+      <div className="genre-filter-tagbox">
+        {selected.map(g => (
+          <span key={g} className="genre-filter-chip">
+            {g}
+            <button onClick={() => remove(g)} aria-label={`Remove ${g}`}>
+              <X size={11} />
+            </button>
+          </span>
+        ))}
+
+        <input
+          ref={inputRef}
+          className="genre-filter-input"
+          placeholder={selected.length === 0 ? t('common.filterSearchGenres') : ''}
+          value={search}
+          onChange={e => { setSearch(e.target.value); setDropdownOpen(true); }}
+          onFocus={() => setDropdownOpen(true)}
+          onKeyDown={e => {
+            if (e.key === 'Escape') { setDropdownOpen(false); e.currentTarget.blur(); }
+            if (e.key === 'Backspace' && search === '' && selected.length > 0) {
+              remove(selected[selected.length - 1]);
+            }
+          }}
+        />
+
+        {dropdownOpen && filteredOptions.length > 0 && (
+          <div className="genre-filter-dropdown">
+            {filteredOptions.slice(0, 60).map(g => (
+              <div key={g} className="genre-filter-option" onMouseDown={() => add(g)}>
+                {g}
+              </div>
+            ))}
+          </div>
+        )}
+
+        {dropdownOpen && filteredOptions.length === 0 && search.length > 0 && (
+          <div className="genre-filter-dropdown">
+            <div className="genre-filter-empty">{t('common.filterNoGenres')}</div>
+          </div>
+        )}
+      </div>
+
+      {selected.length > 0 && (
+        <button className="btn btn-ghost" onClick={clear} style={{ padding: '0.35rem 0.6rem', display: 'flex', alignItems: 'center', gap: '0.3rem', fontSize: '0.8rem' }}>
+          <X size={13} />
+          {t('common.filterClear')}
+        </button>
+      )}
+    </div>
+  );
+}

src/components/PsysonicLogo.tsx

@@ -9,8 +9,8 @@ export default function PsysonicLogo({ className, style }: Props) {
   return (
     <svg viewBox="0 0 594.45007 134.93138" xmlns="http://www.w3.org/2000/svg" style={style} className={className}><defs id="defs1">
       <linearGradient id="psysonicGrad" x1="0%" y1="0%" x2="100%" y2="100%">
-        <stop offset="0%" stopColor="var(--accent)" />
-        <stop offset="100%" stopColor="var(--ctp-blue)" />
+        <stop offset="0%" stopColor="var(--logo-color-start, var(--accent))" />
+        <stop offset="100%" stopColor="var(--logo-color-end, var(--ctp-blue))" />
       </linearGradient>
     </defs><g
      id="layer1"

src/components/Sidebar.tsx

@@ -7,8 +7,8 @@ import { version as appVersion } from '../../package.json';
 import { NavLink } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import {
-  Disc3, Users, Music4, Radio, Settings, Heart, BarChart3, Shuffle, ListMusic,
-  PanelLeftClose, PanelLeft, HelpCircle, Dices, ArrowUpCircle, AudioLines, HardDriveDownload
+  Disc3, Users, Music4, Radio, Settings, Heart, BarChart3, Shuffle,
+  PanelLeftClose, PanelLeft, HelpCircle, Dices, ArrowUpCircle, AudioLines, HardDriveDownload, Tags
 } from 'lucide-react';
 import PsysonicLogo from './PsysonicLogo';
 import PSmallLogo from './PSmallLogo';
@@ -19,7 +19,7 @@ const navItems = [
   { icon: Music4,  labelKey: 'sidebar.allAlbums',    to: '/albums' },
   { icon: Dices,   labelKey: 'sidebar.randomAlbums', to: '/random-albums' },
   { icon: Users, labelKey: 'sidebar.artists', to: '/artists' },
-  { icon: ListMusic, labelKey: 'sidebar.playlists', to: '/playlists' },
+  { icon: Tags, labelKey: 'sidebar.genres', to: '/genres' },
   { icon: Shuffle, labelKey: 'sidebar.randomMix', to: '/random-mix' },
   { icon: Heart, labelKey: 'sidebar.favorites', to: '/favorites' },
 ];

src/components/ThemePicker.tsx

@@ -60,15 +60,18 @@ const THEME_GROUPS: { group: string; themes: ThemeDef[] }[] = [
   {
     group: 'Operating Systems',
     themes: [
+      { id: 'ubuntu-ambiance', label: 'Ubuntu',          bg: '#f4efea', card: '#3d1f3d', accent: '#e95420' },
       { 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: 'cupertino-dark',  label: 'Cupertino Dark',  bg: '#1e1e1f', card: '#2d2d2f', accent: '#007aff' },
       { 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: 'wista',           label: 'Wista',           bg: '#eef3fc', card: '#0e1e3e', accent: '#1565c8' },
+      { id: 'aero-glass',      label: 'W7',              bg: '#b8cfe8', card: '#05080f', accent: '#1878e8' },
+      { id: 'w10',             label: 'W10',             bg: '#f3f3f3', card: '#ffffff',  accent: '#0078d4' },
       { id: 'w11',             label: 'W11',             bg: '#202020', card: '#2c2c2c', accent: '#0078d4' },
     ],
   },

src/i18n.ts

@@ -10,7 +10,6 @@ const enTranslation = {
     allAlbums: 'All Albums',
     randomAlbums: 'Random Albums',
     artists: 'Artists',
-    playlists: 'Playlists',
     randomMix: 'Random Mix',
     favorites: 'Favorites',
     nowPlaying: 'Now Playing',
@@ -25,6 +24,7 @@ const enTranslation = {
     updateLink: 'Go to release →',
     downloadingTracks: 'Caching {{n}} tracks…',
     offlineLibrary: 'Offline Library',
+    genres: 'Genres',
   },
   home: {
     starred: 'Personal Favorites',
@@ -161,6 +161,18 @@ const enTranslation = {
     title: 'Random Albums',
     refresh: 'Refresh',
   },
+  genres: {
+    title: 'Genres',
+    genreCount: 'Genres',
+    albumCount_one: '{{count}} album',
+    albumCount_other: '{{count}} albums',
+    loading: 'Loading genres…',
+    empty: 'No genres found.',
+    albumsLoading: 'Loading albums…',
+    albumsEmpty: 'No albums found for this genre.',
+    loadMore: 'Load more',
+    back: 'Back',
+  },
   randomMix: {
     title: 'Random Mix',
     remix: 'Remix',
@@ -191,22 +203,6 @@ const enTranslation = {
     filterPanelTitle: 'Filters',
     genreClickHint: 'Click a genre tag to add it\nas a filter keyword.\nMatches genre, title, album & artist.',
   },
-  playlists: {
-    title: 'Playlists',
-    loading: 'Loading playlists…',
-    empty: 'No playlists found.\nUse the queue to create playlists.',
-    play: 'Play',
-    deleteTooltip: 'Delete',
-    confirmDelete: 'Really delete playlist "{{name}}"?',
-    minutes: 'min.',
-    track_one: '{{count}} Track',
-    track_other: '{{count}} Tracks',
-    filterPlaceholder: 'Filter playlists…',
-    colName: 'Name',
-    colTracks: 'Tracks',
-    colDuration: 'Duration',
-    noResults: 'No playlists match your filter.',
-  },
   albums: {
     title: 'All Albums',
     sortByName: 'A–Z (Album)',
@@ -282,6 +278,10 @@ const enTranslation = {
     chooseDownloadFolder: 'Choose download folder',
     noFolderSelected: 'No folder selected',
     rememberDownloadFolder: 'Remember this folder',
+    filterGenre: 'Genre Filter',
+    filterSearchGenres: 'Search genres…',
+    filterNoGenres: 'No genres match',
+    filterClear: 'Clear',
   },
   settings: {
     title: 'Settings',
@@ -290,6 +290,7 @@ const enTranslation = {
     languageDe: 'German',
     languageFr: 'French',
     languageNl: 'Dutch',
+    languageZh: 'Chinese',
     font: 'Font',
     theme: 'Theme',
     appearance: 'Appearance',
@@ -357,6 +358,8 @@ const enTranslation = {
     aboutVersion: 'Version',
     aboutBuiltWith: 'Built with Tauri · React · TypeScript · Rust/rodio',
     aboutAiCredit: 'Developed with the support of Claude Code by Anthropic',
+    aboutContributorsLabel: 'Contributors',
+    aboutContributors: 'jiezhuo — Chinese translation',
     changelog: 'Changelog',
     randomMixTitle: 'Random Mix',
     randomMixBlacklistTitle: 'Custom Filter Keywords',
@@ -433,7 +436,7 @@ const enTranslation = {
     q12: 'How do I change the theme?',
     a12: 'Settings → Theme. Choose from 47 themes across 7 groups: Psysonic Themes, Psysonic Mediaplayer, Operating Systems, Games, Movies, Series, and Open Source Classics (Catppuccin, Nord, Gruvbox).',
     q13: 'How do I change the language?',
-    a13: 'Settings → Language. English, German, French, and Dutch are supported.',
+    a13: 'Settings → Language. English, German, French, Dutch, and Chinese are supported.',
     q15: 'How do I set a download folder?',
     a15: 'Settings → App Behavior → Download Folder. Pick any folder — downloaded albums are saved there as ZIP files. Without a custom folder, your browser\'s default downloads location is used.',
     s5: 'Scrobbling',
@@ -577,7 +580,6 @@ const deTranslation = {
     allAlbums: 'Alle Alben',
     randomAlbums: 'Zufallsalben',
     artists: 'Künstler',
-    playlists: 'Playlists',
     randomMix: 'Zufallsmix',
     favorites: 'Favoriten',
     nowPlaying: 'Now Playing',
@@ -592,6 +594,7 @@ const deTranslation = {
     updateLink: 'Zum Release →',
     downloadingTracks: '{{n}} Tracks werden gecacht…',
     offlineLibrary: 'Offline-Bibliothek',
+    genres: 'Genres',
   },
   home: {
     starred: 'Persönliche Favoriten',
@@ -728,6 +731,18 @@ const deTranslation = {
     title: 'Zufallsalben',
     refresh: 'Neu laden',
   },
+  genres: {
+    title: 'Genres',
+    genreCount: 'Genres',
+    albumCount_one: '{{count}} Album',
+    albumCount_other: '{{count}} Alben',
+    loading: 'Genres werden geladen…',
+    empty: 'Keine Genres gefunden.',
+    albumsLoading: 'Alben werden geladen…',
+    albumsEmpty: 'Keine Alben in diesem Genre gefunden.',
+    loadMore: 'Mehr laden',
+    back: 'Zurück',
+  },
   randomMix: {
     title: 'Zufallsmix',
     remix: 'Neu mixen',
@@ -758,22 +773,6 @@ const deTranslation = {
     filterPanelTitle: 'Filter',
     genreClickHint: 'Genre-Tag anklicken,\num es als Filter-Keyword hinzuzufügen.\nPrüft Genre, Titel, Album & Künstler.',
   },
-  playlists: {
-    title: 'Playlists',
-    loading: 'Lade Playlists…',
-    empty: 'Keine Playlists gefunden.\nNutze die Warteschlange, um Playlists zu erstellen.',
-    play: 'Abspielen',
-    deleteTooltip: 'Löschen',
-    confirmDelete: 'Playlist "{{name}}" wirklich löschen?',
-    minutes: 'Min.',
-    track_one: '{{count}} Track',
-    track_other: '{{count}} Tracks',
-    filterPlaceholder: 'Playlists filtern…',
-    colName: 'Name',
-    colTracks: 'Tracks',
-    colDuration: 'Dauer',
-    noResults: 'Keine Playlists entsprechen dem Filter.',
-  },
   albums: {
     title: 'Alle Alben',
     sortByName: 'A–Z (Album)',
@@ -849,6 +848,10 @@ const deTranslation = {
     chooseDownloadFolder: 'Download-Ordner wählen',
     noFolderSelected: 'Kein Ordner ausgewählt',
     rememberDownloadFolder: 'Ordner merken',
+    filterGenre: 'Genre-Filter',
+    filterSearchGenres: 'Genres suchen…',
+    filterNoGenres: 'Keine Genres gefunden',
+    filterClear: 'Zurücksetzen',
   },
   settings: {
     title: 'Einstellungen',
@@ -857,6 +860,7 @@ const deTranslation = {
     languageDe: 'Deutsch',
     languageFr: 'Französisch',
     languageNl: 'Niederländisch',
+    languageZh: 'Chinesisch',
     font: 'Schriftart',
     theme: 'Design',
     appearance: 'Darstellung',
@@ -924,6 +928,8 @@ const deTranslation = {
     aboutVersion: 'Version',
     aboutBuiltWith: 'Gebaut mit Tauri · React · TypeScript · Rust/rodio',
     aboutAiCredit: 'Mit freundlicher Unterstützung von Claude Code by Anthropic',
+    aboutContributorsLabel: 'Mitwirkende',
+    aboutContributors: 'jiezhuo — Chinesische Übersetzung',
     changelog: 'Changelog',
     randomMixTitle: 'Zufallsmix',
     randomMixBlacklistTitle: 'Eigene Filter-Keywords',
@@ -1000,7 +1006,7 @@ const deTranslation = {
     q12: 'Wie ändere ich das Theme?',
     a12: 'Einstellungen → Design. 47 Designs in 7 Gruppen: Psysonic Themes, Psysonic Mediaplayer, Betriebssysteme, Spiele, Filme, Serien und Open-Source-Classics (Catppuccin, Nord, Gruvbox).',
     q13: 'Wie ändere ich die Sprache?',
-    a13: 'Einstellungen → Sprache. Englisch, Deutsch, Französisch und Niederländisch werden unterstützt.',
+    a13: 'Einstellungen → Sprache. Englisch, Deutsch, Französisch, Niederländisch und Chinesisch werden unterstützt.',
     q15: 'Wie lege ich einen Download-Ordner fest?',
     a15: 'Einstellungen → App-Verhalten → Download-Ordner. Beliebigen Ordner wählen — heruntergeladene Alben werden dort als ZIP gespeichert. Ohne eigenen Ordner landet alles im Standard-Downloads-Ordner.',
     s5: 'Scrobbling',
@@ -1144,7 +1150,6 @@ const frTranslation = {
     allAlbums: 'Tous les albums',
     randomAlbums: 'Albums aléatoires',
     artists: 'Artistes',
-    playlists: 'Listes de lecture',
     randomMix: 'Mix aléatoire',
     favorites: 'Favoris',
     nowPlaying: 'En cours',
@@ -1159,6 +1164,7 @@ const frTranslation = {
     updateLink: 'Voir la version →',
     downloadingTracks: '{{n}} pistes en cache…',
     offlineLibrary: 'Bibliothèque hors ligne',
+    genres: 'Genres',
   },
   home: {
     starred: 'Favoris personnels',
@@ -1295,6 +1301,18 @@ const frTranslation = {
     title: 'Albums aléatoires',
     refresh: 'Actualiser',
   },
+  genres: {
+    title: 'Genres',
+    genreCount: 'genres',
+    albumCount_one: '{{count}} album',
+    albumCount_other: '{{count}} albums',
+    loading: 'Chargement des genres…',
+    empty: 'Aucun genre trouvé.',
+    albumsLoading: 'Chargement des albums…',
+    albumsEmpty: 'Aucun album trouvé pour ce genre.',
+    loadMore: 'Charger plus',
+    back: 'Retour',
+  },
   randomMix: {
     title: 'Mix aléatoire',
     remix: 'Remixer',
@@ -1325,22 +1343,6 @@ const frTranslation = {
     filterPanelTitle: 'Filtres',
     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',
-    loading: 'Chargement des listes…',
-    empty: 'Aucune liste de lecture.\nUtilisez la file d\'attente pour en créer.',
-    play: 'Lire',
-    deleteTooltip: 'Supprimer',
-    confirmDelete: 'Supprimer la liste « {{name}} » ?',
-    minutes: 'min.',
-    track_one: '{{count}} piste',
-    track_other: '{{count}} pistes',
-    filterPlaceholder: 'Filtrer les listes…',
-    colName: 'Nom',
-    colTracks: 'Pistes',
-    colDuration: 'Durée',
-    noResults: 'Aucune liste ne correspond au filtre.',
-  },
   albums: {
     title: 'Tous les albums',
     sortByName: 'A–Z (Album)',
@@ -1416,6 +1418,10 @@ const frTranslation = {
     chooseDownloadFolder: 'Choisir le dossier de téléchargement',
     noFolderSelected: 'Aucun dossier sélectionné',
     rememberDownloadFolder: 'Mémoriser ce dossier',
+    filterGenre: 'Filtre genre',
+    filterSearchGenres: 'Rechercher des genres…',
+    filterNoGenres: 'Aucun genre trouvé',
+    filterClear: 'Effacer',
   },
   settings: {
     title: 'Paramètres',
@@ -1424,6 +1430,7 @@ const frTranslation = {
     languageDe: 'Allemand',
     languageFr: 'Français',
     languageNl: 'Néerlandais',
+    languageZh: 'Chinois',
     font: 'Police',
     theme: 'Thème',
     appearance: 'Apparence',
@@ -1491,6 +1498,8 @@ const frTranslation = {
     aboutVersion: 'Version',
     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',
     changelog: 'Journal des modifications',
     randomMixTitle: 'Mix aléatoire',
     randomMixBlacklistTitle: 'Mots-clés de filtre personnalisés',
@@ -1567,7 +1576,7 @@ const frTranslation = {
     q12: 'Comment changer le thème ?',
     a12: 'Paramètres → Thème. 47 thèmes en 7 groupes : Psysonic Themes, Psysonic Mediaplayer, Systèmes d\'exploitation, Jeux, Films, Séries et Open Source Classics (Catppuccin, Nord, Gruvbox).',
     q13: 'Comment changer la langue ?',
-    a13: 'Paramètres → Langue. L\'anglais, l\'allemand, le français et le néerlandais sont pris en charge.',
+    a13: 'Paramètres → Langue. L\'anglais, l\'allemand, le français, le néerlandais et le chinois sont pris en charge.',
     q15: 'Comment définir un dossier de téléchargement ?',
     a15: 'Paramètres → Comportement → Dossier de téléchargement. Les albums téléchargés y sont enregistrés en ZIP.',
     s5: 'Scrobbling',
@@ -1711,7 +1720,6 @@ const nlTranslation = {
     allAlbums: 'Alle albums',
     randomAlbums: 'Willekeurige albums',
     artists: 'Artiesten',
-    playlists: 'Afspeellijsten',
     randomMix: 'Willekeurige mix',
     favorites: 'Favorieten',
     nowPlaying: 'Nu bezig',
@@ -1726,6 +1734,7 @@ const nlTranslation = {
     updateLink: 'Naar release →',
     downloadingTracks: '{{n}} nummers worden gecached…',
     offlineLibrary: 'Offline bibliotheek',
+    genres: 'Genres',
   },
   home: {
     starred: 'Persoonlijke favorieten',
@@ -1862,6 +1871,18 @@ const nlTranslation = {
     title: 'Willekeurige albums',
     refresh: 'Vernieuwen',
   },
+  genres: {
+    title: 'Genres',
+    genreCount: 'genres',
+    albumCount_one: '{{count}} album',
+    albumCount_other: '{{count}} albums',
+    loading: 'Genres laden…',
+    empty: 'Geen genres gevonden.',
+    albumsLoading: 'Albums laden…',
+    albumsEmpty: 'Geen albums gevonden voor dit genre.',
+    loadMore: 'Meer laden',
+    back: 'Terug',
+  },
   randomMix: {
     title: 'Willekeurige mix',
     remix: 'Opnieuw mixen',
@@ -1892,22 +1913,6 @@ const nlTranslation = {
     filterPanelTitle: 'Filters',
     genreClickHint: 'Klik op een genre-tag om het\ntoe te voegen als filtertrefwoord.\nVergelijkt genre, titel, album & artiest.',
   },
-  playlists: {
-    title: 'Afspeellijsten',
-    loading: 'Afspeellijsten laden…',
-    empty: 'Geen afspeellijsten gevonden.\nGebruik de wachtrij om afspeellijsten aan te maken.',
-    play: 'Afspelen',
-    deleteTooltip: 'Verwijderen',
-    confirmDelete: 'Afspeellijst "{{name}}" echt verwijderen?',
-    minutes: 'min.',
-    track_one: '{{count}} nummer',
-    track_other: '{{count}} nummers',
-    filterPlaceholder: 'Afspeellijsten filteren…',
-    colName: 'Naam',
-    colTracks: 'Nummers',
-    colDuration: 'Duur',
-    noResults: 'Geen afspeellijsten komen overeen met het filter.',
-  },
   albums: {
     title: 'Alle albums',
     sortByName: 'A–Z (Album)',
@@ -1983,6 +1988,10 @@ const nlTranslation = {
     chooseDownloadFolder: 'Downloadmap kiezen',
     noFolderSelected: 'Geen map geselecteerd',
     rememberDownloadFolder: 'Deze map onthouden',
+    filterGenre: 'Genre-filter',
+    filterSearchGenres: 'Genres zoeken…',
+    filterNoGenres: 'Geen genres gevonden',
+    filterClear: 'Wissen',
   },
   settings: {
     title: 'Instellingen',
@@ -1991,6 +2000,7 @@ const nlTranslation = {
     languageDe: 'Duits',
     languageFr: 'Frans',
     languageNl: 'Nederlands',
+    languageZh: 'Chinees',
     font: 'Lettertype',
     theme: 'Thema',
     appearance: 'Weergave',
@@ -2058,6 +2068,8 @@ const nlTranslation = {
     aboutVersion: 'Versie',
     aboutBuiltWith: 'Gebouwd met Tauri · React · TypeScript · Rust/rodio',
     aboutAiCredit: 'Ontwikkeld met ondersteuning van Claude Code door Anthropic',
+    aboutContributorsLabel: 'Bijdragers',
+    aboutContributors: 'jiezhuo — Chinese vertaling',
     changelog: 'Wijzigingslog',
     randomMixTitle: 'Willekeurige mix',
     randomMixBlacklistTitle: 'Aangepaste filtertrefwoorden',
@@ -2134,7 +2146,7 @@ const nlTranslation = {
     q12: 'Hoe verander ik het thema?',
     a12: 'Instellingen → Thema. 47 thema\'s in 7 groepen: Psysonic Themes, Psysonic Mediaplayer, Besturingssystemen, Games, Films, Series en Open Source Classics (Catppuccin, Nord, Gruvbox).',
     q13: 'Hoe verander ik de taal?',
-    a13: 'Instellingen → Taal. Engels, Duits, Frans en Nederlands worden momenteel ondersteund.',
+    a13: 'Instellingen → Taal. Engels, Duits, Frans, Nederlands en Chinees worden momenteel ondersteund.',
     q15: 'Hoe stel ik een downloadmap in?',
     a15: 'Instellingen → App-gedrag → Downloadmap. Gedownloade albums worden daar opgeslagen als ZIP-bestanden.',
     s5: 'Scrobbling',
@@ -2269,6 +2281,576 @@ const nlTranslation = {
   }
 };
 
+// Chinese Translations
+const zhTranslation = {
+  sidebar: {
+    library: '音乐库',
+    mainstage: '主舞台',
+    newReleases: '新发布',
+    allAlbums: '全部专辑',
+    randomAlbums: '随机专辑',
+    artists: '艺术家',
+    randomMix: '随机混音',
+    favorites: '收藏夹',
+    nowPlaying: '正在播放',
+    system: '系统',
+    statistics: '统计',
+    settings: '设置',
+    help: '帮助',
+    expand: '展开侧边栏',
+    collapse: '收起侧边栏',
+    updateAvailable: '有可用更新',
+    updateReady: '{{version}} 已就绪',
+    updateLink: '前往发布页面 →',
+    downloadingTracks: '正在缓存 {{n}} 首歌曲…',
+    offlineLibrary: '离线音乐库',
+    genres: '流派',
+  },
+  home: {
+    starred: '个人收藏',
+    recent: '最近添加',
+    mostPlayed: '最常播放',
+    discover: '发现',
+    loadMore: '加载更多',
+    discoverMore: '发现更多',
+    discoverArtists: '发现艺术家',
+    discoverArtistsMore: '全部艺术家'
+  },
+  hero: {
+    eyebrow: '精选专辑',
+    playAlbum: '播放专辑',
+    enqueue: '加入队列',
+    enqueueTooltip: '将整张专辑添加到播放队列',
+  },
+  search: {
+    placeholder: '搜索艺术家、专辑或歌曲…',
+    noResults: '未找到 "{{query}}" 的相关结果',
+    artists: '艺术家',
+    albums: '专辑',
+    songs: '歌曲',
+    clearLabel: '清除搜索',
+    title: '搜索',
+    resultsFor: '"{{query}}" 的搜索结果',
+    album: '专辑',
+  },
+  nowPlaying: {
+    tooltip: '谁正在收听？',
+    title: '谁正在收听？',
+    loading: '加载中…',
+    nobody: '当前无人收听。',
+    minutesAgo: '{{n}} 分钟前',
+    nothingPlaying: '尚未开始播放。开始播放一首歌曲吧！',
+    aboutArtist: '关于艺术家',
+    fromAlbum: '来自此专辑',
+    viewAlbum: '查看专辑',
+    goToArtist: '前往艺术家',
+    readMore: '阅读更多',
+    showLess: '收起',
+    genreInfo: '流派',
+    trackInfo: '曲目信息',
+  },
+  contextMenu: {
+    playNow: '立即播放',
+    playNext: '下一首播放',
+    addToQueue: '添加到队列',
+    enqueueAlbum: '专辑加入队列',
+    startRadio: '开始电台',
+    lfmLove: '在 Last.fm 上标记喜欢',
+    lfmUnlove: '取消 Last.fm 喜欢标记',
+    favorite: '收藏',
+    favoriteArtist: '收藏艺术家',
+    favoriteAlbum: '收藏专辑',
+    unfavorite: '取消收藏',
+    unfavoriteArtist: '取消收藏艺术家',
+    unfavoriteAlbum: '取消收藏专辑',
+    removeFromQueue: '从队列中移除',
+    openAlbum: '打开专辑',
+    goToArtist: '前往艺术家',
+    download: '下载 (ZIP)',
+  },
+  albumDetail: {
+    back: '返回',
+    playAll: '全部播放',
+    enqueue: '加入队列',
+    enqueueTooltip: '将整张专辑添加到播放队列',
+    artistBio: '艺术家简介',
+    download: '下载 (ZIP)',
+    downloading: '加载中…',
+    cacheOffline: '设为离线可用',
+    offlineCached: '已离线缓存',
+    offlineDownloading: '正在缓存… ({{n}}/{{total}})',
+    removeOffline: '移除离线缓存',
+    offlineStorageFull: '离线存储空间已满（限制：{{mb}} MB）。请从离线音乐库中删除专辑以释放空间，或在设置中增加限制。',
+    offlineStorageGoToLibrary: '离线音乐库',
+    offlineStorageGoToSettings: '设置',
+    favoriteAdd: '添加到收藏',
+    favoriteRemove: '从收藏中移除',
+    favorite: '收藏',
+    noBio: '暂无简介。',
+    moreByArtist: '{{artist}} 的更多作品',
+    tracksCount: '{{n}} 首曲目',
+    goToArtist: '前往 {{artist}}',
+    moreLabelAlbums: '{{label}} 的更多专辑',
+    trackTitle: '标题',
+    trackArtist: '艺术家',
+    trackFormat: '格式',
+    trackFavorite: '收藏',
+    trackRating: '评分',
+    trackDuration: '时长',
+    trackTotal: '总计',
+    notFound: '未找到专辑。',
+    bioModal: '艺术家简介',
+    bioClose: '关闭',
+    ratingLabel: '评分',
+  },
+  artistDetail: {
+    back: '返回',
+    albums: '专辑',
+    album: '专辑',
+    playAll: '全部播放',
+    shuffle: '随机播放',
+    radio: '电台',
+    loading: '加载中…',
+    noRadio: '未找到该艺术家的相似曲目。',
+    notFound: '未找到艺术家。',
+    albumsBy: '{{name}} 的专辑',
+    topTracks: '热门曲目',
+    noAlbums: '未找到专辑。',
+    trackTitle: '标题',
+    trackAlbum: '专辑',
+    trackDuration: '时长',
+    favoriteAdd: '添加到收藏',
+    favoriteRemove: '从收藏中移除',
+    favorite: '收藏',
+    albumCount_one: '{{count}} 张专辑',
+    albumCount_other: '{{count}} 张专辑',
+    openedInBrowser: '已在浏览器中打开',
+    featuredOn: '还出现在',
+    similarArtists: '相似艺术家',
+  },
+  favorites: {
+    title: '收藏夹',
+    empty: '您还没有保存任何收藏。',
+    artists: '艺术家',
+    albums: '专辑',
+    songs: '歌曲',
+    enqueueAll: '全部加入队列',
+    removeSong: '从收藏中移除',
+  },
+  randomAlbums: {
+    title: '随机专辑',
+    refresh: '刷新',
+  },
+  genres: {
+    title: '流派',
+    genreCount: '个流派',
+    albumCount_one: '{{count}} 张专辑',
+    albumCount_other: '{{count}} 张专辑',
+    loading: '正在加载流派…',
+    empty: '未找到流派。',
+    albumsLoading: '正在加载专辑…',
+    albumsEmpty: '未找到该流派的专辑。',
+    loadMore: '加载更多',
+    back: '返回',
+  },
+  randomMix: {
+    title: '随机混音',
+    remix: '重新混音',
+    remixTooltip: '加载新的随机歌曲',
+    playAll: '全部播放',
+    trackTitle: '标题',
+    trackArtist: '艺术家',
+    trackAlbum: '专辑',
+    trackFavorite: '收藏',
+    trackDuration: '时长',
+    favoriteAdd: '添加到收藏',
+    favoriteRemove: '从收藏中移除',
+    play: '播放',
+    trackGenre: '流派',
+    excludeAudiobooks: '排除有声读物和广播剧',
+    excludeAudiobooksDesc: '根据流派、标题、专辑和艺术家匹配关键词 — 例如 Hörbuch、Audiobook、Spoken Word 等',
+    genreBlocked: '关键词已屏蔽',
+    genreAddedToBlacklist: '已添加到过滤列表',
+    genreAlreadyBlocked: '已屏蔽',
+    artistBlocked: '艺术家已屏蔽',
+    artistAddedToBlacklist: '艺术家已添加到过滤列表',
+    artistClickHint: '点击屏蔽此艺术家',
+    blacklistToggle: '关键词过滤',
+    genreMixTitle: '流派混音',
+    genreMixDesc: '选择一个流派以获取精选的随机混音',
+    genreMixLoadMore: '加载 10 首更多',
+    genreMixNoGenres: '服务器上未找到流派。',
+    filterPanelTitle: '过滤器',
+    genreClickHint: '点击流派标签将其添加为过滤关键词。\\n匹配流派、标题、专辑和艺术家。',
+  },
+  albums: {
+    title: '全部专辑',
+    sortByName: '按名称排序 (A-Z)',
+    sortByArtist: '按艺术家排序 (A-Z)',
+    sortNewest: '最新优先',
+    sortRandom: '随机排序',
+  },
+  artists: {
+    title: '艺术家',
+    search: '搜索…',
+    all: '全部',
+    gridView: '网格视图',
+    listView: '列表视图',
+    loadMore: '加载更多',
+    notFound: '未找到艺术家。',
+    albumCount_one: '{{count}} 张专辑',
+    albumCount_other: '{{count}} 张专辑',
+  },
+  login: {
+    subtitle: '您的 Navidrome 桌面播放器',
+    serverName: '服务器名称（可选）',
+    serverNamePlaceholder: '我的 Navidrome',
+    serverUrl: '服务器地址',
+    serverUrlPlaceholder: '192.168.1.100:4533 或 music.example.com',
+    username: '用户名',
+    usernamePlaceholder: 'admin',
+    password: '密码',
+    showPassword: '显示密码',
+    hidePassword: '隐藏密码',
+    connect: '连接',
+    connecting: '正在连接…',
+    connected: '已连接！',
+    error: '连接失败 — 请检查您的信息。',
+    urlRequired: '请输入服务器地址。',
+    savedServers: '已保存的服务器',
+    addNew: '或添加新服务器',
+  },
+  connection: {
+    connected: '已连接',
+    connectedTo: '已连接到 {{server}}',
+    disconnected: '已断开连接',
+    disconnectedFrom: '无法连接到 {{server}} — 点击检查设置',
+    checking: '正在连接…',
+    extern: '外部',
+    offlineTitle: '无服务器连接',
+    offlineSubtitle: '无法连接到 {{server}}。请检查您的网络或服务器。',
+    offlineModeBanner: '离线模式 — 正在从本地缓存播放',
+    offlineLibraryTitle: '离线音乐库',
+    offlineLibraryEmpty: '尚未缓存任何专辑。请联网，打开专辑并点击"设为离线可用"。',
+    offlineAlbumCount_one: '{{n}} 张专辑',
+    offlineAlbumCount_plural: '{{n}} 张专辑',
+    retry: '重试',
+    lastfmConnected: 'Last.fm 已连接为 @{{user}}',
+    lastfmSessionInvalid: '会话无效 — 点击重新连接',
+  },
+  common: {
+    albums: '专辑',
+    album: '专辑',
+    loading: '加载中…',
+    loadingMore: '加载中…',
+    loadingPlaylists: '正在加载播放列表…',
+    noAlbums: '未找到专辑。',
+    downloading: '正在下载…',
+    downloadZip: '下载 (ZIP)',
+    back: '返回',
+    cancel: '取消',
+    save: '保存',
+    delete: '删除',
+    use: '使用',
+    add: '添加',
+    active: '当前使用',
+    download: '下载',
+    chooseDownloadFolder: '选择下载文件夹',
+    noFolderSelected: '未选择文件夹',
+    rememberDownloadFolder: '记住此文件夹',
+    filterGenre: '流派筛选',
+    filterSearchGenres: '搜索流派…',
+    filterNoGenres: '未找到匹配流派',
+    filterClear: '清除',
+  },
+  settings: {
+    title: '设置',
+    language: '语言',
+    languageEn: '英语',
+    languageDe: '德语',
+    languageFr: '法语',
+    languageNl: '荷兰语',
+    languageZh: '中文',
+    font: '字体',
+    theme: '主题',
+    appearance: '外观',
+    servers: '服务器',
+    serverName: '服务器名称',
+    serverUrl: '服务器地址',
+    serverUsername: '用户名',
+    serverPassword: '密码',
+    addServer: '添加服务器',
+    addServerTitle: '添加新服务器',
+    useServer: '使用',
+    deleteServer: '删除',
+    noServers: '未保存任何服务器。',
+    serverActive: '当前使用',
+    confirmDeleteServer: '删除服务器 "{{name}}"？',
+    serverConnecting: '正在连接…',
+    serverConnected: '已连接！',
+    serverFailed: '连接失败。',
+    testBtn: '测试连接',
+    testingBtn: '正在测试…',
+    connected: '已连接',
+    failed: '失败',
+    eqTitle: '均衡器',
+    eqEnabled: '启用均衡器',
+    eqPreset: '预设',
+    eqPresetCustom: '自定义',
+    eqPresetBuiltin: '内置预设',
+    eqPresetCustomGroup: '我的预设',
+    eqSavePreset: '保存为预设',
+    eqPresetName: '预设名称…',
+    eqDeletePreset: '删除预设',
+    eqResetBands: '重置为平直',
+    lfmTitle: 'Last.fm',
+    lfmConnect: '连接 Last.fm',
+    lfmConnecting: '等待授权…',
+    lfmConfirm: '我已完成授权',
+    lfmConnected: '已连接为',
+    lfmDisconnect: '断开连接',
+    lfmConnectDesc: '连接您的 Last.fm 账户以启用歌曲记录和正在播放更新，直接从 Psysonic 发送 — 无需配置 Navidrome。',
+    lfmOpenBrowser: '将打开浏览器窗口。在 Last.fm 上授权 Psysonic，然后点击下方按钮。',
+    lfmScrobbles: '{{n}} 次记录',
+    lfmMemberSince: '{{year}} 年加入',
+    scrobbleEnabled: '启用歌曲记录',
+    scrobbleDesc: '播放 50% 后发送歌曲到 Last.fm',
+    behavior: '应用行为',
+    cacheTitle: '最大存储大小',
+    cacheDesc: '封面和艺术家图片。存满时，最旧的条目将自动移除。离线专辑不会自动移除，但手动清除缓存时会被删除。',
+    cacheUsed: '已使用：{{images}} 张图片 · {{offline}} 首离线曲目',
+    cacheClearBtn: '清除缓存',
+    cacheClearWarning: '这将同时移除音乐库中的所有离线专辑。',
+    cacheClearConfirm: '全部清除',
+    cacheClearCancel: '取消',
+    downloadsTitle: '下载文件夹',
+    downloadsDefault: '默认下载文件夹',
+    pickFolder: '选择',
+    pickFolderTitle: '选择下载文件夹',
+    clearFolder: '清除下载文件夹',
+    logout: '退出登录',
+    aboutTitle: '关于 Psysonic',
+    aboutDesc: '适用于 Subsonic 兼容服务器（Navidrome、Gonic 等）的桌面音乐播放器。以简洁现代的界面流媒体播放您的自托管音乐库，采用 Catppuccin 配色方案风格。',
+    aboutFeatures: '多服务器支持 · 歌曲记录 · 全屏播放器 · 专辑下载 · 图片缓存 · Catppuccin 主题',
+    aboutLicense: '许可证',
+    aboutLicenseText: 'GNU GPL v3 — 在相同许可证下可自由使用、修改和分发。',
+    aboutRepo: 'GitHub 上的源代码',
+    aboutVersion: '版本',
+    aboutBuiltWith: '使用 Tauri · React · TypeScript · Rust/rodio 构建',
+    aboutAiCredit: '在 Anthropic 的 Claude Code 支持下开发',
+    aboutContributorsLabel: '贡献者',
+    aboutContributors: 'jiezhuo — 中文翻译',
+    changelog: '更新日志',
+    randomMixTitle: '随机混音',
+    randomMixBlacklistTitle: '自定义过滤关键词',
+    randomMixBlacklistDesc: '当任何关键词匹配流派、标题、专辑或艺术家时，歌曲将被排除（当上方复选框开启时生效）。',
+    randomMixBlacklistPlaceholder: '添加关键词…',
+    randomMixBlacklistAdd: '添加',
+    randomMixBlacklistEmpty: '尚未添加自定义关键词。',
+    randomMixHardcodedTitle: '内置关键词（复选框开启时生效）',
+    tabPlayback: '播放',
+    tabLibrary: '音乐库',
+    tabAppearance: '外观',
+    tabShortcuts: '快捷键',
+    tabServer: '服务器',
+    tabAbout: '关于',
+    shortcutsReset: '恢复默认',
+    shortcutListening: '请按下按键…',
+    shortcutUnbound: '—',
+    globalShortcutsTitle: '全局快捷键',
+    globalShortcutsNote: '即使 Psysonic 在后台也能在系统范围内工作。需要 Ctrl、Alt 或 Super 作为修饰键。',
+    shortcutClear: '清除',
+    shortcutPlayPause: '播放 / 暂停',
+    shortcutNext: '下一首',
+    shortcutPrev: '上一首',
+    shortcutVolumeUp: '音量增大',
+    shortcutVolumeDown: '音量减小',
+    shortcutSeekForward: '快进 10 秒',
+    shortcutSeekBackward: '快退 10 秒',
+    shortcutToggleQueue: '切换队列',
+    shortcutFullscreenPlayer: '全屏播放器',
+    shortcutNativeFullscreen: '原生全屏',
+    playbackTitle: '播放',
+    replayGain: '回放增益',
+    replayGainDesc: '使用 ReplayGain 元数据标准化曲目音量',
+    replayGainMode: '模式',
+    replayGainTrack: '曲目',
+    replayGainAlbum: '专辑',
+    crossfade: '交叉淡入淡出',
+    crossfadeDesc: '曲目间淡入淡出',
+    crossfadeSecs: '{{n}} 秒',
+    notWithGapless: '无缝播放开启时不可用',
+    notWithCrossfade: '交叉淡入淡出开启时不可用',
+    gapless: '无缝播放',
+    gaplessDesc: '预缓冲下一首曲目以消除歌曲间的间隙',
+    experimental: '实验性',
+  },
+  help: {
+    title: '帮助',
+    s1: '入门指南',
+    q1: '支持哪些服务器？',
+    a1: 'Psysonic 可与任何 Subsonic 兼容服务器配合使用：Navidrome、Gonic、Subsonic、Airsonic 等。推荐使用 Navidrome。',
+    q2: '如何连接服务器？',
+    a2: '打开设置并点击"添加服务器"。输入服务器地址（如 192.168.1.100:4533）、用户名和密码。Psysonic 会在保存前测试连接 — 如果连接失败则不会存储任何信息。',
+    q3: '可以使用多个服务器吗？',
+    a3: '可以。您可以在设置中添加任意数量的服务器，并随时切换。同一时间只能有一个服务器处于活动状态。',
+    s2: '播放',
+    q4: '如何播放音乐？',
+    a4: '双击任意曲目即可播放。在专辑和艺术家页面，使用"全部播放"开始播放整张专辑。您也可以将曲目拖入队列面板。',
+    q5: '有哪些键盘快捷键？',
+    a5: '空格键 = 播放 / 暂停 · Esc = 关闭全屏播放器。媒体键（播放/暂停、下一首、上一首）在所有平台上都有效。在 Linux 上，请使用播放器栏按钮作为媒体键。应用内快捷键和系统级全局快捷键可在 设置 → 键盘快捷键 / 全局快捷键 中自定义。',
+    q6: '什么是播放队列？',
+    a6: '队列显示所有即将播放的曲目。点击右上角标题栏的面板图标（正在播放指示器旁边）打开队列。您可以通过拖拽重新排序，使用随机播放按钮打乱顺序，并将队列保存为播放列表。',
+    q7: '如何打开全屏播放器？',
+    a7: '点击底部播放器栏的专辑封面缩略图，或其旁边的展开图标。按 Esc 键关闭。',
+    q8: '重复播放如何工作？',
+    a8: '点击播放器栏的重复按钮可在以下模式间循环：关闭 → 重复全部 → 重复单曲。',
+    s3: '音乐库',
+    q9: '如何下载专辑？',
+    a9: '打开专辑详情页并点击"下载 (ZIP)"。服务器会先将专辑压缩为 ZIP 文件 — 对于大型专辑或无损文件（FLAC / WAV），在实际下载开始前可能需要一些时间。这是正常的：进度条会在服务器完成压缩并开始传输后显示。',
+    q10: '如何收藏曲目和专辑？',
+    a10: '点击任意曲目行或专辑标题上的星形图标。收藏的项目会显示在侧边栏的收藏夹中。',
+    q11: '首页的英雄轮播是什么？',
+    a11: '首页顶部的横幅会随机从您的音乐库中选择专辑，每 10 秒轮换一次。点击圆点可跳转到特定专辑，或点击横幅打开专辑。',
+    s4: '设置',
+    q12: '如何更改主题？',
+    a12: '设置 → 主题。从 7 个分组共 47 个主题中选择：Psysonic 主题、Psysonic 媒体播放器、操作系统、游戏、电影、电视剧，以及开源经典（Catppuccin、Nord、Gruvbox）。',
+    q13: '如何更改语言？',
+    a13: '设置 → 语言。支持英语、德语、法语、荷兰语和中文。',
+    q15: '如何设置下载文件夹？',
+    a15: '设置 → 应用行为 → 下载文件夹。选择任意文件夹 — 下载的专辑将以 ZIP 文件形式保存在那里。未设置自定义文件夹时，将使用浏览器的默认下载位置。',
+    s5: '歌曲记录',
+    q16: '歌曲记录如何工作？',
+    a16: 'Psysonic 直接向 Last.fm 发送记录 — 无需配置 Navidrome。在 设置 → Last.fm 中连接您的 Last.fm 账户并启用记录功能。',
+    q17: '何时发送记录？',
+    a17: '在您听完曲目的 50% 后提交记录。',
+    q22: '播放器栏中的波形是什么？',
+    a22: '波形进度条取代了传统的进度滑块。点击任意位置跳转到该位置，或拖动进行拖动播放。已播放部分显示蓝到紫的渐变，缓冲区域稍亮，未播放部分则淡化显示。',
+    q24: '可以随机打乱队列吗？',
+    a24: '可以。打开队列面板并点击队列标题栏的随机播放图标。当前播放曲目保持在第 1 位 — 其余曲目将随机重新排序。',
+    q25: '艺术家页面上的 Last.fm 和 Wikipedia 链接会在浏览器中打开吗？',
+    a25: '是的 — 它们会在您的默认系统浏览器中打开。点击时按钮会短暂显示确认标签。',
+    s7: '随机混音',
+    q26: '什么是随机混音？',
+    a26: '随机混音从您的整个音乐库中构建一个随机曲目的播放列表。通过侧边栏的"随机混音"打开并点击"新混音"。您可以在生成前调整曲目数量。',
+    q27: '什么是关键词过滤？',
+    a27: '关键词过滤会排除流派、标题或专辑名称包含特定词汇的曲目。有声读物会被自动过滤。在 设置 → 随机混音 中添加自定义关键词，或点击曲目列表中的任意流派标签即时添加。',
+    q28: '什么是超级流派混音？',
+    a28: '超级流派混音将您的音乐库分组为宽泛的类别（摇滚、金属、电子、爵士、古典等），并从该风格构建一个专注的混音。在曲目列表下方选择类别标签。结果会随着每个子流派的获取而逐步显示。',
+    s6: '故障排除',
+    q18: '封面和艺术家图片加载缓慢。',
+    a18: '图片首次加载时从服务器磁盘获取，然后本地缓存 30 天。如果服务器存储较慢，首次访问页面可能需要一些时间。后续访问将瞬间完成。',
+    q19: '连接测试失败。',
+    a19: '检查 URL 包括端口（如 http://192.168.1.100:4533）。确保防火墙没有阻止连接。在本地网络上尝试使用 http:// 而非 https://。同时验证用户名和密码是否正确。',
+    q20: 'Linux 上没有音频。',
+    a20: 'Psysonic 提供 .deb（Ubuntu/Debian）、.rpm（Fedora/RHEL）版本，以及通过 AUR 在 Arch/CachyOS 上安装（yay -S psysonic）。没有 AppImage。如果没有音频，请确保 PipeWire 或 PulseAudio 正在运行。',
+    q21: '应用在 Linux 上显示黑屏。',
+    a21: '这通常是 WebKitGTK 中的 GPU/EGL 驱动问题。使用 GDK_BACKEND=x11 WEBKIT_DISABLE_COMPOSITING_MODE=1 WEBKIT_DISABLE_DMABUF_RENDERER=1 启动。AUR 包和官方 .deb/.rpm 安装程序会自动设置这些环境变量。',
+    q29: '什么是交叉淡入淡出和无缝播放？',
+    a29: '两者都是 设置 → 音频 中的实验性音频功能。无缝播放预缓冲下一首曲目以消除歌曲间的静音。交叉淡入淡出让当前曲目淡出同时下一首淡入 — 调整持续时间（1-10 秒）以符合您的喜好。',
+    q30: 'Psysonic 显示歌词吗？',
+    a30: '是的。点击播放器栏的麦克风图标可在队列面板中打开歌词标签。Psysonic 自动从 LRCLIB 获取歌词。如果可用同步歌词，活动行会高亮并随歌曲实时滚动。如果只有纯文本歌词，则静态显示完整文本。',
+    q33: '可以在 FLAC 文件中拖动（拖动播放）吗？',
+    a33: '在 FLAC 文件中拖动需要文件中嵌入 SEEKTABLE 元数据块。未编码此块的文件无法拖动 — 点击波形将无效。大多数现代编码器（如 ffmpeg、flac CLI）默认包含 SEEKTABLE。您可以使用以下命令为现有文件添加：flac --replay-gain *.flac 或 metaflac --add-seekpoint=10s *.flac',
+    q31: '可以自定义键盘快捷键吗？',
+    a31: '可以。设置 → 键盘快捷键 允许您重新映射应用内操作（播放/暂停、下一首、上一首、音量增/减、全屏等）到任意按键。设置 → 全局快捷键 允许您分配即使 Psysonic 在后台也能触发的系统级快捷键。',
+    q32: '可以更改字体吗？',
+    a32: '可以。设置 → 字体 允许您从 10 种字体中选择，包括 IBM Plex Mono、Fira Code、JetBrains Mono、Courier Prime 等。所选字体将应用于整个界面。',
+    s8: '离线模式',
+    q34: '什么是离线模式？',
+    a34: '离线模式（测试版）允许您将专辑缓存到设备，以便在没有活动服务器连接时收听。缓存的曲目存储在本地并直接从磁盘播放 — 播放期间不进行网络请求。',
+    q35: '如何缓存专辑以供离线使用？',
+    a35: '打开任意专辑并点击专辑标题栏的下载图标。Psysonic 会在后台下载所有曲目。按钮上会显示进度。缓存完成后，图标变为绿色。您可以在离线音乐库页面（侧边栏）查看和移除缓存的专辑。',
+    q36: '离线缓存可以使用多少存储空间？',
+    a36: '您可以在 设置 → 音乐库 中设置最大缓存大小。达到限制时，专辑页面会显示警告横幅。您可以从离线音乐库中删除单个专辑以释放空间。',
+  },
+  queue: {
+    title: '队列',
+    savePlaylist: '保存为播放列表',
+    playlistName: '播放列表名称',
+    cancel: '取消',
+    save: '保存',
+    loadPlaylist: '加载播放列表',
+    loading: '加载中…',
+    noPlaylists: '未找到播放列表。',
+    load: '加载',
+    delete: '删除',
+    deleteConfirm: '删除播放列表 "{{name}}"？',
+    clear: '清空',
+    shuffle: '随机打乱队列',
+    gapless: '无缝播放',
+    crossfade: '交叉淡入淡出',
+    hide: '隐藏',
+    close: '关闭',
+    nextTracks: '即将播放',
+    emptyQueue: '队列为空。',
+    trackSingular: '首曲目',
+    trackPlural: '首曲目',
+    showRemaining: '显示剩余时间',
+    showTotal: '显示总时间',
+  },
+  statistics: {
+    title: '统计',
+    recentlyPlayed: '最近播放',
+    mostPlayed: '最常播放的专辑',
+    highestRated: '评分最高的专辑',
+    genreDistribution: '流派分布（前 20）',
+    loadMore: '加载更多',
+    statArtists: '艺术家',
+    statAlbums: '专辑',
+    statSongs: '歌曲',
+    statGenres: '流派',
+    genreSongs: '{{count}} 首歌曲',
+    genreAlbums: '{{count}} 张专辑',
+    recentlyAdded: '最近添加',
+    decadeDistribution: '按年代分布的专辑',
+    decadeAlbums_one: '{{count}} 张专辑',
+    decadeAlbums_other: '{{count}} 张专辑',
+    decadeUnknown: '未知',
+    lfmTitle: 'Last.fm 统计',
+    lfmTopArtists: '热门艺术家',
+    lfmTopAlbums: '热门专辑',
+    lfmTopTracks: '热门曲目',
+    lfmPlays: '{{count}} 次播放',
+    lfmPeriodOverall: '全部时间',
+    lfmPeriod7day: '7 天',
+    lfmPeriod1month: '1 个月',
+    lfmPeriod3month: '3 个月',
+    lfmPeriod6month: '6 个月',
+    lfmPeriod12month: '12 个月',
+    lfmNotConnected: '在设置中连接 Last.fm 以查看您的统计。',
+    lfmRecentTracks: '最近记录',
+    lfmNowPlaying: '正在播放',
+    lfmJustNow: '刚刚',
+    lfmMinutesAgo: '{{n}} 分钟前',
+    lfmHoursAgo: '{{n}} 小时前',
+    lfmDaysAgo: '{{n}} 天前',
+  },
+  player: {
+    regionLabel: '音乐播放器',
+    openFullscreen: '打开全屏播放器',
+    fullscreen: '全屏播放器',
+    closeFullscreen: '关闭全屏',
+    closeTooltip: '关闭 (Esc)',
+    noTitle: '无标题',
+    stop: '停止',
+    prev: '上一首',
+    play: '播放',
+    pause: '暂停',
+    next: '下一首',
+    repeat: '重复',
+    repeatOff: '关闭',
+    repeatAll: '全部',
+    repeatOne: '单曲',
+    progress: '播放进度',
+    volume: '音量',
+    toggleQueue: '切换队列',
+    lyrics: '歌词',
+    lyricsLoading: '正在加载歌词…',
+    lyricsNotFound: '未找到此曲目的歌词',
+  }
+};
+
 // Retrieve language from local storage or default to 'en'
 const savedLanguage = localStorage.getItem('psysonic_language') || 'en';
 
@@ -2279,7 +2861,8 @@ i18n
       en: { translation: enTranslation },
       de: { translation: deTranslation },
       fr: { translation: frTranslation },
-      nl: { translation: nlTranslation }
+      nl: { translation: nlTranslation },
+      zh: { translation: zhTranslation }
     },
     lng: savedLanguage,
     fallbackLng: 'en',

src/pages/AlbumDetail.tsx

@@ -91,32 +91,35 @@ export default function AlbumDetail() {
 
   const handlePlayAll = () => {
     if (!album) return;
+    const albumGenre = album.album.genre;
     const tracks = album.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,
-      starred: s.starred, genre: s.genre,
+      starred: s.starred, genre: s.genre ?? albumGenre,
     }));
     if (tracks[0]) playTrack(tracks[0], tracks);
   };
 
   const handleEnqueueAll = () => {
     if (!album) return;
+    const albumGenre = album.album.genre;
     const tracks = album.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,
-      starred: s.starred, genre: s.genre,
+      starred: s.starred, genre: s.genre ?? albumGenre,
     }));
     enqueue(tracks);
   };
 
   const handlePlaySong = (song: SubsonicSong) => {
+    const albumGenre = album?.album.genre;
     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,
+      starred: song.starred, genre: song.genre ?? albumGenre,
     };
     playTrack(track, [track]);
   };

src/pages/Albums.tsx

@@ -1,10 +1,19 @@
 import React, { useEffect, useState, useCallback, useRef } from 'react';
 import AlbumCard from '../components/AlbumCard';
-import { getAlbumList, SubsonicAlbum } from '../api/subsonic';
+import GenreFilterBar from '../components/GenreFilterBar';
+import { getAlbumList, getAlbumsByGenre, SubsonicAlbum } from '../api/subsonic';
 import { useTranslation } from 'react-i18next';
 
 type SortType = 'alphabeticalByName' | 'alphabeticalByArtist';
 
+const PAGE_SIZE = 30;
+
+async function fetchByGenres(genres: string[]): Promise<SubsonicAlbum[]> {
+  const results = await Promise.all(genres.map(g => getAlbumsByGenre(g, 500, 0)));
+  const seen = new Set<string>();
+  return results.flat().filter(a => { if (seen.has(a.id)) return false; seen.add(a.id); return true; });
+}
+
 export default function Albums() {
   const { t } = useTranslation();
   const [albums, setAlbums] = useState<SubsonicAlbum[]>([]);
@@ -12,9 +21,9 @@ export default function Albums() {
   const [loading, setLoading] = useState(true);
   const [page, setPage] = useState(0);
   const [hasMore, setHasMore] = useState(true);
-  const PAGE_SIZE = 30;
-
+  const [selectedGenres, setSelectedGenres] = useState<string[]>([]);
   const observerTarget = useRef<HTMLDivElement>(null);
+  const filtered = selectedGenres.length > 0;
 
   const load = useCallback(async (sortType: SortType, offset: number, append = false) => {
     setLoading(true);
@@ -28,27 +37,40 @@ export default function Albums() {
     }
   }, []);
 
-  useEffect(() => { setPage(0); load(sort, 0); }, [sort, load]);
+  const loadFiltered = useCallback(async (genres: string[], sortType: SortType) => {
+    setLoading(true);
+    try {
+      const data = await fetchByGenres(genres);
+      const sorted = [...data].sort((a, b) =>
+        sortType === 'alphabeticalByArtist'
+          ? a.artist.localeCompare(b.artist)
+          : a.name.localeCompare(b.name)
+      );
+      setAlbums(sorted);
+      setHasMore(false);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (filtered) loadFiltered(selectedGenres, sort);
+    else { setPage(0); load(sort, 0); }
+  }, [sort, filtered, selectedGenres, load, loadFiltered]);
 
   const loadMore = useCallback(() => {
-    if (loading || !hasMore) return;
+    if (loading || !hasMore || filtered) return;
     const next = page + 1;
     setPage(next);
     load(sort, next * PAGE_SIZE, true);
-  }, [loading, hasMore, page, sort, load]);
+  }, [loading, hasMore, page, sort, load, filtered]);
 
   useEffect(() => {
     const observer = new IntersectionObserver(
-      entries => {
-        if (entries[0].isIntersecting) {
-          loadMore();
-        }
-      },
+      entries => { if (entries[0].isIntersecting) loadMore(); },
       { rootMargin: '200px' }
     );
-    if (observerTarget.current) {
-      observer.observe(observerTarget.current);
-    }
+    if (observerTarget.current) observer.observe(observerTarget.current);
     return () => observer.disconnect();
   }, [loadMore]);
 
@@ -59,9 +81,9 @@ export default function Albums() {
 
   return (
     <div className="content-body animate-fade-in">
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.5rem' }}>
-        <h1 className="page-title">{t('albums.title')}</h1>
-        <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.5rem', flexWrap: 'wrap', gap: '0.75rem' }}>
+        <h1 className="page-title" style={{ marginBottom: 0 }}>{t('albums.title')}</h1>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', flexWrap: 'wrap' }}>
           {sortOptions.map(o => (
             <button
               key={o.value}
@@ -72,6 +94,7 @@ export default function Albums() {
               {o.label}
             </button>
           ))}
+          <GenreFilterBar selected={selectedGenres} onSelectionChange={setSelectedGenres} />
         </div>
       </div>
 
@@ -84,10 +107,11 @@ export default function Albums() {
           <div className="album-grid-wrap">
             {albums.map(a => <AlbumCard key={a.id} album={a} />)}
           </div>
-
-          <div ref={observerTarget} style={{ height: '20px', margin: '2rem 0', display: 'flex', justifyContent: 'center' }}>
-            {loading && hasMore && <div className="spinner" style={{ width: 20, height: 20 }} />}
-          </div>
+          {!filtered && (
+            <div ref={observerTarget} style={{ height: '20px', margin: '2rem 0', display: 'flex', justifyContent: 'center' }}>
+              {loading && hasMore && <div className="spinner" style={{ width: 20, height: 20 }} />}
+            </div>
+          )}
         </>
       )}
     </div>

src/pages/GenreDetail.tsx

@@ -0,0 +1,86 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { ArrowLeft, Disc3 } from 'lucide-react';
+import { getAlbumsByGenre, SubsonicAlbum } from '../api/subsonic';
+import AlbumCard from '../components/AlbumCard';
+
+const PAGE_SIZE = 50;
+
+export default function GenreDetail() {
+  const { name } = useParams<{ name: string }>();
+  const genre = decodeURIComponent(name ?? '');
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const [albums, setAlbums] = useState<SubsonicAlbum[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [hasMore, setHasMore] = useState(true);
+  const [offset, setOffset] = useState(0);
+
+  useEffect(() => {
+    setAlbums([]);
+    setOffset(0);
+    setHasMore(true);
+    setLoading(true);
+    getAlbumsByGenre(genre, PAGE_SIZE, 0)
+      .then(data => {
+        setAlbums(data);
+        setHasMore(data.length === PAGE_SIZE);
+        setOffset(PAGE_SIZE);
+      })
+      .finally(() => setLoading(false));
+  }, [genre]);
+
+  const loadMore = useCallback(() => {
+    if (loadingMore || !hasMore) return;
+    setLoadingMore(true);
+    getAlbumsByGenre(genre, PAGE_SIZE, offset)
+      .then(data => {
+        setAlbums(prev => [...prev, ...data]);
+        setHasMore(data.length === PAGE_SIZE);
+        setOffset(prev => prev + PAGE_SIZE);
+      })
+      .finally(() => setLoadingMore(false));
+  }, [genre, offset, loadingMore, hasMore]);
+
+  return (
+    <div className="content-body animate-fade-in">
+      <button
+        className="btn btn-ghost"
+        onClick={() => navigate(-1)}
+        style={{ marginBottom: '1.5rem', display: 'flex', alignItems: 'center', gap: '0.5rem' }}
+      >
+        <ArrowLeft size={16} />
+        <span>{t('genres.back')}</span>
+      </button>
+
+      <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1.5rem', flexWrap: 'wrap' }}>
+        <h1 className="page-title" style={{ marginBottom: 0 }}>{genre}</h1>
+        {!loading && albums.length > 0 && (
+          <span style={{ display: 'flex', alignItems: 'center', gap: '0.4rem', color: 'var(--text-secondary)', fontSize: '0.9rem', fontWeight: 500 }}>
+            <Disc3 size={14} style={{ color: 'var(--accent)' }} />
+            {t('genres.albumCount', { count: albums.length })}{hasMore ? '+' : ''}
+          </span>
+        )}
+      </div>
+
+      {loading && <p className="loading-text">{t('genres.albumsLoading')}</p>}
+      {!loading && albums.length === 0 && <p className="loading-text">{t('genres.albumsEmpty')}</p>}
+
+      {albums.length > 0 && (
+        <div className="album-grid-wrap">
+          {albums.map(album => <AlbumCard key={album.id} album={album} />)}
+        </div>
+      )}
+
+      {hasMore && !loading && (
+        <div style={{ display: 'flex', justifyContent: 'center', padding: '2rem 0' }}>
+          <button className="btn btn-surface" onClick={loadMore} disabled={loadingMore}>
+            {loadingMore ? t('common.loadingMore') : t('genres.loadMore')}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

src/pages/Genres.tsx

@@ -0,0 +1,128 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import {
+  Headphones, Zap, Music2, Music, Cpu, Mic, Radio, Cloud,
+  Leaf, Heart, Sun, Flame, Film, Globe, BookOpen, Podcast, Star,
+  Tags, type LucideIcon,
+} from 'lucide-react';
+import { getGenres, SubsonicGenre } from '../api/subsonic';
+
+function getGenreIcon(name: string): LucideIcon {
+  const n = name.toLowerCase();
+  if (/ambient|drone|new age/.test(n)) return Cloud;
+  if (/metal|hardcore|thrash|death|grind|doom/.test(n)) return Zap;
+  if (/rock/.test(n)) return Radio;
+  if (/jazz/.test(n)) return Music2;
+  if (/classical|orchestra|chamber|baroque|opera|symphon/.test(n)) return Music;
+  if (/electronic|techno|edm|house|trance|electro|synth/.test(n)) return Cpu;
+  if (/hip.?hop|rap/.test(n)) return Mic;
+  if (/pop/.test(n)) return Star;
+  if (/folk|country|bluegrass|americana/.test(n)) return Leaf;
+  if (/blues/.test(n)) return Music2;
+  if (/soul|r.?b|funk|gospel/.test(n)) return Heart;
+  if (/reggae|ska|dub/.test(n)) return Sun;
+  if (/punk/.test(n)) return Flame;
+  if (/soundtrack|score|ost|film|movie|cinema/.test(n)) return Film;
+  if (/world|latin|afro|celtic|tribal|traditional/.test(n)) return Globe;
+  if (/audiobook|spoken|hörbuch|speech|comedy/.test(n)) return BookOpen;
+  if (/podcast/.test(n)) return Podcast;
+  return Headphones;
+}
+
+const CTP_COLORS = [
+  'var(--ctp-rosewater)', 'var(--ctp-flamingo)', 'var(--ctp-pink)', 'var(--ctp-mauve)',
+  'var(--ctp-red)', 'var(--ctp-maroon)', 'var(--ctp-peach)', 'var(--ctp-yellow)',
+  'var(--ctp-green)', 'var(--ctp-teal)', 'var(--ctp-sky)', 'var(--ctp-sapphire)',
+  'var(--ctp-blue)', 'var(--ctp-lavender)',
+];
+
+function genreColor(name: string): string {
+  let h = 0;
+  for (let i = 0; i < name.length; i++) h = (h * 31 + name.charCodeAt(i)) >>> 0;
+  return CTP_COLORS[h % CTP_COLORS.length];
+}
+
+const SCROLL_KEY = 'genres-scroll';
+
+export default function Genres() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const [genres, setGenres] = useState<SubsonicGenre[]>([]);
+  const [loading, setLoading] = useState(true);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    getGenres()
+      .then(data => {
+        const sorted = [...data].sort((a, b) => b.albumCount - a.albumCount);
+        setGenres(sorted);
+      })
+      .finally(() => setLoading(false));
+  }, []);
+
+  // Restore scroll position after genres are rendered
+  useEffect(() => {
+    if (loading || genres.length === 0) return;
+    const saved = sessionStorage.getItem(SCROLL_KEY);
+    if (!saved) return;
+    const pos = parseInt(saved, 10);
+    sessionStorage.removeItem(SCROLL_KEY);
+    requestAnimationFrame(() => {
+      if (containerRef.current) containerRef.current.scrollTop = pos;
+    });
+  }, [loading, genres.length]);
+
+  const handleGenreClick = (genreValue: string) => {
+    if (containerRef.current) {
+      sessionStorage.setItem(SCROLL_KEY, String(containerRef.current.scrollTop));
+    }
+    navigate(`/genres/${encodeURIComponent(genreValue)}`);
+  };
+
+  return (
+    <div ref={containerRef} className="content-body animate-fade-in">
+      <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1.5rem', flexWrap: 'wrap' }}>
+        <h1 className="page-title" style={{ marginBottom: 0 }}>{t('genres.title')}</h1>
+        {!loading && genres.length > 0 && (
+          <span style={{ display: 'flex', alignItems: 'center', gap: '0.4rem', color: 'var(--text-secondary)', fontSize: '0.9rem', fontWeight: 500 }}>
+            <Tags size={14} style={{ color: 'var(--accent)' }} />
+            {genres.length} {t('genres.genreCount')}
+          </span>
+        )}
+      </div>
+
+      {loading && <p className="loading-text">{t('genres.loading')}</p>}
+      {!loading && genres.length === 0 && <p className="loading-text">{t('genres.empty')}</p>}
+
+      {!loading && genres.length > 0 && (
+        <div className="album-grid-wrap">
+          {genres.map(genre => {
+            const Icon = getGenreIcon(genre.value);
+            const color = genreColor(genre.value);
+            return (
+              <div
+                key={genre.value}
+                className="genre-card"
+                style={{ '--genre-color': color } as React.CSSProperties}
+                onClick={() => handleGenreClick(genre.value)}
+                role="button"
+                tabIndex={0}
+                onKeyDown={e => e.key === 'Enter' && handleGenreClick(genre.value)}
+                data-tooltip={genre.value}
+              >
+                <div className="genre-card-watermark">
+                  <Icon size={80} strokeWidth={1.2} />
+                </div>
+                <p className="genre-card-name">{genre.value}</p>
+                <p className="genre-card-count">
+                  {t('genres.albumCount', { count: genre.albumCount })}
+                </p>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}

src/pages/NewReleases.tsx

@@ -1,17 +1,27 @@
 import React, { useEffect, useState, useCallback, useRef } from 'react';
 import AlbumCard from '../components/AlbumCard';
-import { getAlbumList, SubsonicAlbum } from '../api/subsonic';
+import GenreFilterBar from '../components/GenreFilterBar';
+import { getAlbumList, getAlbumsByGenre, SubsonicAlbum } from '../api/subsonic';
 import { useTranslation } from 'react-i18next';
 
+const PAGE_SIZE = 30;
+
+async function fetchByGenres(genres: string[]): Promise<SubsonicAlbum[]> {
+  const results = await Promise.all(genres.map(g => getAlbumsByGenre(g, 500, 0)));
+  const seen = new Set<string>();
+  const union = results.flat().filter(a => { if (seen.has(a.id)) return false; seen.add(a.id); return true; });
+  return union.sort((a, b) => (b.year ?? 0) - (a.year ?? 0));
+}
+
 export default function NewReleases() {
   const { t } = useTranslation();
   const [albums, setAlbums] = useState<SubsonicAlbum[]>([]);
   const [loading, setLoading] = useState(true);
   const [page, setPage] = useState(0);
   const [hasMore, setHasMore] = useState(true);
-  const PAGE_SIZE = 30;
-
+  const [selectedGenres, setSelectedGenres] = useState<string[]>([]);
   const observerTarget = useRef<HTMLDivElement>(null);
+  const filtered = selectedGenres.length > 0;
 
   const load = useCallback(async (offset: number, append = false) => {
     setLoading(true);
@@ -25,34 +35,44 @@ export default function NewReleases() {
     }
   }, []);
 
-  useEffect(() => { setPage(0); load(0); }, [load]);
+  const loadFiltered = useCallback(async (genres: string[]) => {
+    setLoading(true);
+    try {
+      setAlbums(await fetchByGenres(genres));
+      setHasMore(false);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (filtered) loadFiltered(selectedGenres);
+    else { setPage(0); load(0); }
+  }, [filtered, selectedGenres, load, loadFiltered]);
 
   const loadMore = useCallback(() => {
-    if (loading || !hasMore) return;
+    if (loading || !hasMore || filtered) return;
     const next = page + 1;
     setPage(next);
     load(next * PAGE_SIZE, true);
-  }, [loading, hasMore, page, load]);
+  }, [loading, hasMore, page, load, filtered]);
 
   useEffect(() => {
     const observer = new IntersectionObserver(
-      entries => {
-        if (entries[0].isIntersecting) {
-          loadMore();
-        }
-      },
+      entries => { if (entries[0].isIntersecting) loadMore(); },
       { rootMargin: '200px' }
     );
-    if (observerTarget.current) {
-      observer.observe(observerTarget.current);
-    }
+    if (observerTarget.current) observer.observe(observerTarget.current);
     return () => observer.disconnect();
   }, [loadMore]);
 
   return (
     <div className="content-body animate-fade-in">
-      <h1 className="page-title" style={{ marginBottom: '1.5rem' }}>{t('sidebar.newReleases')}</h1>
-      
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.5rem', flexWrap: 'wrap', gap: '0.75rem' }}>
+        <h1 className="page-title" style={{ marginBottom: 0 }}>{t('sidebar.newReleases')}</h1>
+        <GenreFilterBar selected={selectedGenres} onSelectionChange={setSelectedGenres} />
+      </div>
+
       {loading && albums.length === 0 ? (
         <div style={{ display: 'flex', justifyContent: 'center', padding: '3rem' }}>
           <div className="spinner" />
@@ -62,10 +82,11 @@ export default function NewReleases() {
           <div className="album-grid-wrap">
             {albums.map(a => <AlbumCard key={a.id} album={a} />)}
           </div>
-          
-          <div ref={observerTarget} style={{ height: '20px', margin: '2rem 0', display: 'flex', justifyContent: 'center' }}>
-            {loading && hasMore && <div className="spinner" style={{ width: 20, height: 20 }} />}
-          </div>
+          {!filtered && (
+            <div ref={observerTarget} style={{ height: '20px', margin: '2rem 0', display: 'flex', justifyContent: 'center' }}>
+              {loading && hasMore && <div className="spinner" style={{ width: 20, height: 20 }} />}
+            </div>
+          )}
         </>
       )}
     </div>

src/pages/Playlists.tsx

@@ -1,141 +0,0 @@
-import React, { useEffect, useState, useMemo } from 'react';
-import { SubsonicPlaylist, getPlaylists, getPlaylist, deletePlaylist } from '../api/subsonic';
-import { usePlayerStore } from '../store/playerStore';
-import { Play, Trash2, ChevronUp, ChevronDown } from 'lucide-react';
-import { useTranslation } from 'react-i18next';
-
-type SortKey = 'name' | 'songCount' | 'duration';
-type SortDir = 'asc' | 'desc';
-
-function formatDuration(seconds: number): string {
-  const h = Math.floor(seconds / 3600);
-  const m = Math.floor((seconds % 3600) / 60);
-  return h > 0 ? `${h}h ${m}m` : `${m}m`;
-}
-
-function SortHeader({
-  label, sortKey, current, dir, onSort
-}: {
-  label: string;
-  sortKey: SortKey;
-  current: SortKey;
-  dir: SortDir;
-  onSort: (k: SortKey) => void;
-}) {
-  const active = current === sortKey;
-  return (
-    <button className={`playlist-sort-btn${active ? ' active' : ''}`} onClick={() => onSort(sortKey)}>
-      {label}
-      {active ? (dir === 'asc' ? <ChevronUp size={13} /> : <ChevronDown size={13} />) : null}
-    </button>
-  );
-}
-
-export default function Playlists() {
-  const { t } = useTranslation();
-  const [playlists, setPlaylists] = useState<SubsonicPlaylist[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [filter, setFilter] = useState('');
-  const [sortKey, setSortKey] = useState<SortKey>('name');
-  const [sortDir, setSortDir] = useState<SortDir>('asc');
-
-  const playTrack = usePlayerStore(s => s.playTrack);
-  const clearQueue = usePlayerStore(s => s.clearQueue);
-
-  const fetchPlaylists = () => {
-    setLoading(true);
-    getPlaylists()
-      .then(data => { setPlaylists(data); setLoading(false); })
-      .catch(err => { console.error('Failed to load playlists', err); setLoading(false); });
-  };
-
-  useEffect(() => { fetchPlaylists(); }, []);
-
-  const handleSort = (key: SortKey) => {
-    if (sortKey === key) setSortDir(d => d === 'asc' ? 'desc' : 'asc');
-    else { setSortKey(key); setSortDir('asc'); }
-  };
-
-  const handlePlay = async (id: string) => {
-    try {
-      const data = await getPlaylist(id);
-      const tracks = data.songs.map((s: any) => ({
-        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, genre: s.genre,
-      }));
-      if (tracks.length > 0) { clearQueue(); playTrack(tracks[0], tracks); }
-    } catch (e) { console.error('Failed to play playlist', e); }
-  };
-
-  const handleDelete = async (id: string, name: string) => {
-    if (confirm(t('playlists.confirmDelete', { name }))) {
-      try { await deletePlaylist(id); fetchPlaylists(); }
-      catch (e) { console.error('Failed to delete playlist', e); }
-    }
-  };
-
-  const visible = useMemo(() => {
-    const q = filter.toLowerCase();
-    const filtered = q ? playlists.filter(p => p.name.toLowerCase().includes(q)) : playlists;
-    return [...filtered].sort((a, b) => {
-      let cmp = 0;
-      if (sortKey === 'name') cmp = a.name.localeCompare(b.name);
-      else if (sortKey === 'songCount') cmp = a.songCount - b.songCount;
-      else cmp = a.duration - b.duration;
-      return sortDir === 'asc' ? cmp : -cmp;
-    });
-  }, [playlists, filter, sortKey, sortDir]);
-
-  return (
-    <div className="content-body animate-fade-in">
-      <div className="playlist-page-header">
-        <h1 className="page-title">{t('playlists.title')}</h1>
-        <input
-          className="playlist-filter-input"
-          type="search"
-          placeholder={t('playlists.filterPlaceholder')}
-          value={filter}
-          onChange={e => setFilter(e.target.value)}
-        />
-      </div>
-
-      {loading ? (
-        <div className="loading-center"><div className="spinner" /></div>
-      ) : playlists.length === 0 ? (
-        <div className="empty-state" style={{ whiteSpace: 'pre-line' }}>{t('playlists.empty')}</div>
-      ) : (
-        <div className="playlist-list">
-          <div className="playlist-list-header">
-            <div />
-            <SortHeader label={t('playlists.colName')} sortKey="name" current={sortKey} dir={sortDir} onSort={handleSort} />
-            <SortHeader label={t('playlists.colTracks')} sortKey="songCount" current={sortKey} dir={sortDir} onSort={handleSort} />
-            <SortHeader label={t('playlists.colDuration')} sortKey="duration" current={sortKey} dir={sortDir} onSort={handleSort} />
-            <div />
-          </div>
-
-          {visible.length === 0 ? (
-            <div className="empty-state">{t('playlists.noResults')}</div>
-          ) : visible.map(p => (
-            <div key={p.id} className="playlist-row">
-              <button className="playlist-play-icon" onClick={() => handlePlay(p.id)} data-tooltip={t('playlists.play')}>
-                <Play size={14} fill="currentColor" />
-              </button>
-              <span className="playlist-name truncate">{p.name}</span>
-              <span className="playlist-meta">{t('playlists.track', { count: p.songCount })}</span>
-              <span className="playlist-meta">{formatDuration(p.duration)}</span>
-              <button
-                className="btn btn-ghost playlist-delete-btn"
-                onClick={() => handleDelete(p.id, p.name)}
-                data-tooltip={t('playlists.deleteTooltip')}
-              >
-                <Trash2 size={15} />
-              </button>
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}

src/pages/RandomAlbums.tsx

@@ -1,23 +1,40 @@
 import React, { useEffect, useState, useCallback, useRef } from 'react';
 import { RefreshCw } from 'lucide-react';
-import { getAlbumList, SubsonicAlbum } from '../api/subsonic';
+import { getAlbumList, getAlbumsByGenre, SubsonicAlbum } from '../api/subsonic';
 import AlbumCard from '../components/AlbumCard';
+import GenreFilterBar from '../components/GenreFilterBar';
 import { useTranslation } from 'react-i18next';
 
 const ALBUM_COUNT = 30;
 
+async function fetchByGenres(genres: string[]): Promise<SubsonicAlbum[]> {
+  const results = await Promise.all(genres.map(g => getAlbumsByGenre(g, 500, 0)));
+  const seen = new Set<string>();
+  const union = results.flat().filter(a => { if (seen.has(a.id)) return false; seen.add(a.id); return true; });
+  // Fisher-Yates shuffle
+  for (let i = union.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [union[i], union[j]] = [union[j], union[i]];
+  }
+  return union.slice(0, ALBUM_COUNT);
+}
+
 export default function RandomAlbums() {
   const { t } = useTranslation();
   const [albums, setAlbums] = useState<SubsonicAlbum[]>([]);
   const [loading, setLoading] = useState(true);
+  const [selectedGenres, setSelectedGenres] = useState<string[]>([]);
   const loadingRef = useRef(false);
+  const filtered = selectedGenres.length > 0;
 
-  const load = useCallback(async () => {
+  const load = useCallback(async (genres: string[]) => {
     if (loadingRef.current) return;
     loadingRef.current = true;
     setLoading(true);
     try {
-      const data = await getAlbumList('random', ALBUM_COUNT);
+      const data = genres.length > 0
+        ? await fetchByGenres(genres)
+        : await getAlbumList('random', ALBUM_COUNT);
       setAlbums(data);
     } catch (e) {
       console.error(e);
@@ -27,21 +44,24 @@ export default function RandomAlbums() {
     }
   }, []);
 
-  useEffect(() => { load(); }, [load]);
+  useEffect(() => { load(selectedGenres); }, [selectedGenres, load]);
 
   return (
     <div className="content-body animate-fade-in">
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '1.5rem' }}>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '1.5rem', flexWrap: 'wrap', gap: '0.75rem' }}>
         <h1 className="page-title" style={{ marginBottom: 0 }}>{t('randomAlbums.title')}</h1>
-        <button
-          className="btn btn-ghost"
-          onClick={load}
-          disabled={loading}
-          data-tooltip={t('randomAlbums.refresh')}
-        >
-          <RefreshCw size={16} className={loading ? 'animate-spin' : ''} />
-          {t('randomAlbums.refresh')}
-        </button>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', flexWrap: 'wrap' }}>
+          <GenreFilterBar selected={selectedGenres} onSelectionChange={setSelectedGenres} />
+          <button
+            className="btn btn-ghost"
+            onClick={() => load(selectedGenres)}
+            disabled={loading}
+            data-tooltip={t('randomAlbums.refresh')}
+          >
+            <RefreshCw size={16} className={loading ? 'animate-spin' : ''} />
+            {t('randomAlbums.refresh')}
+          </button>
+        </div>
       </div>
 
       {loading && albums.length === 0 ? (

src/pages/Settings.tsx

@@ -552,6 +552,7 @@ export default function Settings() {
                     { value: 'en', label: t('settings.languageEn') },
                     { value: 'fr', label: t('settings.languageFr') },
                     { value: 'de', label: t('settings.languageDe') },
+                    { value: 'zh', label: t('settings.languageZh') },
                   ]}
                 />
               </div>
@@ -1016,6 +1017,10 @@ 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>
               </div>
 
               <button

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' | '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';
+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' | 'w10';
 
 interface ThemeState {
   theme: Theme;

src/styles/components.css

@@ -4055,3 +4055,147 @@
   padding: 1px 4px;
   border-radius: 3px;
 }
+
+/* ─ Genre Filter Bar ─ */
+.genre-filter-tagbox {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 0.3rem 0.6rem;
+  border: 1px solid var(--border-subtle);
+  border-radius: 8px;
+  background: var(--bg-card);
+  min-width: 220px;
+  cursor: text;
+  transition: border-color 0.15s;
+}
+
+.genre-filter-tagbox:focus-within {
+  border-color: var(--accent);
+}
+
+.genre-filter-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.2rem;
+  padding: 0.15rem 0.3rem 0.15rem 0.5rem;
+  background: var(--accent);
+  color: var(--ctp-crust);
+  border-radius: 4px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.genre-filter-chip button {
+  background: none;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  opacity: 0.75;
+  line-height: 1;
+}
+
+.genre-filter-chip button:hover { opacity: 1; }
+
+.genre-filter-input {
+  border: none;
+  background: none;
+  outline: none;
+  color: var(--text-primary);
+  font-size: 0.85rem;
+  min-width: 100px;
+  flex: 1;
+  padding: 0.1rem 0;
+}
+
+.genre-filter-input::placeholder { color: var(--text-muted); }
+
+.genre-filter-dropdown {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  background: var(--bg-card);
+  border: 1px solid var(--border-subtle);
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
+  max-height: 220px;
+  overflow-y: auto;
+  z-index: 500;
+}
+
+.genre-filter-option {
+  padding: 0.45rem 0.75rem;
+  font-size: 0.85rem;
+  color: var(--text-primary);
+  cursor: pointer;
+  transition: background 0.1s, color 0.1s;
+}
+
+.genre-filter-option:hover {
+  background: var(--bg-hover);
+  color: var(--accent);
+}
+
+.genre-filter-empty {
+  padding: 0.6rem 0.75rem;
+  font-size: 0.82rem;
+  color: var(--text-muted);
+}
+
+/* ─ Genre Cards ─ */
+.genre-card {
+  aspect-ratio: 1;
+  border-radius: 12px;
+  padding: 0.9rem;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  background:
+    linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 45%, transparent 70%),
+    var(--genre-color, var(--accent));
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+  user-select: none;
+}
+
+.genre-card:hover {
+  transform: translateY(-3px) scale(1.02);
+  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.32);
+}
+
+.genre-card-watermark {
+  position: absolute;
+  top: 50%;
+  right: -10px;
+  transform: translateY(-55%);
+  opacity: 0.22;
+  color: #fff;
+  pointer-events: none;
+}
+
+.genre-card-name {
+  font-size: 0.86rem;
+  font-weight: 700;
+  color: #fff;
+  margin: 0;
+  line-height: 1.25;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.genre-card-count {
+  font-size: 0.72rem;
+  color: rgba(255, 255, 255, 0.85);
+  margin: 0.2rem 0 0;
+}

src/utils/playAlbum.ts

@@ -20,7 +20,12 @@ function fadeOut(setVolume: (v: number) => void, from: number, durationMs: numbe
 
 export async function playAlbum(albumId: string): Promise<void> {
   const albumData = await getAlbum(albumId);
-  const tracks = albumData.songs.map(songToTrack);
+  const albumGenre = albumData.album.genre;
+  const tracks = albumData.songs.map(s => {
+    const track = songToTrack(s);
+    if (!track.genre && albumGenre) track.genre = albumGenre;
+    return track;
+  });
   if (!tracks.length) return;
 
   const store = usePlayerStore.getState();