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

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

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',
@@ -358,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',
@@ -434,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',
@@ -578,7 +580,6 @@ const deTranslation = {
     allAlbums: 'Alle Alben',
     randomAlbums: 'Zufallsalben',
     artists: 'Künstler',
-    playlists: 'Playlists',
     randomMix: 'Zufallsmix',
     favorites: 'Favoriten',
     nowPlaying: 'Now Playing',
@@ -593,6 +594,7 @@ const deTranslation = {
     updateLink: 'Zum Release →',
     downloadingTracks: '{{n}} Tracks werden gecacht…',
     offlineLibrary: 'Offline-Bibliothek',
+    genres: 'Genres',
   },
   home: {
     starred: 'Persönliche Favoriten',
@@ -729,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',
@@ -759,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)',
@@ -850,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',
@@ -926,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',
@@ -1002,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',
@@ -1146,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',
@@ -1161,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',
@@ -1297,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',
@@ -1327,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)',
@@ -1418,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',
@@ -1494,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',
@@ -1570,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',
@@ -1714,7 +1720,6 @@ const nlTranslation = {
     allAlbums: 'Alle albums',
     randomAlbums: 'Willekeurige albums',
     artists: 'Artiesten',
-    playlists: 'Afspeellijsten',
     randomMix: 'Willekeurige mix',
     favorites: 'Favorieten',
     nowPlaying: 'Nu bezig',
@@ -1729,6 +1734,7 @@ const nlTranslation = {
     updateLink: 'Naar release →',
     downloadingTracks: '{{n}} nummers worden gecached…',
     offlineLibrary: 'Offline bibliotheek',
+    genres: 'Genres',
   },
   home: {
     starred: 'Persoonlijke favorieten',
@@ -1865,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',
@@ -1895,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)',
@@ -1986,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',
@@ -2062,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',
@@ -2138,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',
@@ -2282,7 +2290,6 @@ const zhTranslation = {
     allAlbums: '全部专辑',
     randomAlbums: '随机专辑',
     artists: '艺术家',
-    playlists: '播放列表',
     randomMix: '随机混音',
     favorites: '收藏夹',
     nowPlaying: '正在播放',
@@ -2297,6 +2304,7 @@ const zhTranslation = {
     updateLink: '前往发布页面 →',
     downloadingTracks: '正在缓存 {{n}} 首歌曲…',
     offlineLibrary: '离线音乐库',
+    genres: '流派',
   },
   home: {
     starred: '个人收藏',
@@ -2433,6 +2441,18 @@ const zhTranslation = {
     title: '随机专辑',
     refresh: '刷新',
   },
+  genres: {
+    title: '流派',
+    genreCount: '个流派',
+    albumCount_one: '{{count}} 张专辑',
+    albumCount_other: '{{count}} 张专辑',
+    loading: '正在加载流派…',
+    empty: '未找到流派。',
+    albumsLoading: '正在加载专辑…',
+    albumsEmpty: '未找到该流派的专辑。',
+    loadMore: '加载更多',
+    back: '返回',
+  },
   randomMix: {
     title: '随机混音',
     remix: '重新混音',
@@ -2463,22 +2483,6 @@ const zhTranslation = {
     filterPanelTitle: '过滤器',
     genreClickHint: '点击流派标签将其添加为过滤关键词。\\n匹配流派、标题、专辑和艺术家。',
   },
-  playlists: {
-    title: '播放列表',
-    loading: '正在加载播放列表…',
-    empty: '未找到播放列表。\\n使用播放队列创建播放列表。',
-    play: '播放',
-    deleteTooltip: '删除',
-    confirmDelete: '确定要删除播放列表 "{{name}}" 吗？',
-    minutes: '分钟',
-    track_one: '{{count}} 首曲目',
-    track_other: '{{count}} 首曲目',
-    filterPlaceholder: '筛选播放列表…',
-    colName: '名称',
-    colTracks: '曲目',
-    colDuration: '时长',
-    noResults: '没有匹配的播放列表。',
-  },
   albums: {
     title: '全部专辑',
     sortByName: '按名称排序 (A-Z)',
@@ -2554,6 +2558,10 @@ const zhTranslation = {
     chooseDownloadFolder: '选择下载文件夹',
     noFolderSelected: '未选择文件夹',
     rememberDownloadFolder: '记住此文件夹',
+    filterGenre: '流派筛选',
+    filterSearchGenres: '搜索流派…',
+    filterNoGenres: '未找到匹配流派',
+    filterClear: '清除',
   },
   settings: {
     title: '设置',
@@ -2630,6 +2638,8 @@ const zhTranslation = {
     aboutVersion: '版本',
     aboutBuiltWith: '使用 Tauri · React · TypeScript · Rust/rodio 构建',
     aboutAiCredit: '在 Anthropic 的 Claude Code 支持下开发',
+    aboutContributorsLabel: '贡献者',
+    aboutContributors: 'jiezhuo — 中文翻译',
     changelog: '更新日志',
     randomMixTitle: '随机混音',
     randomMixBlacklistTitle: '自定义过滤关键词',
@@ -2706,7 +2716,7 @@ const zhTranslation = {
     q12: '如何更改主题？',
     a12: '设置 → 主题。从 7 个分组共 47 个主题中选择：Psysonic 主题、Psysonic 媒体播放器、操作系统、游戏、电影、电视剧，以及开源经典（Catppuccin、Nord、Gruvbox）。',
     q13: '如何更改语言？',
-    a13: '设置 → 语言。支持英语、德语、法语和荷兰语。',
+    a13: '设置 → 语言。支持英语、德语、法语、荷兰语和中文。',
     q15: '如何设置下载文件夹？',
     a15: '设置 → 应用行为 → 下载文件夹。选择任意文件夹 — 下载的专辑将以 ZIP 文件形式保存在那里。未设置自定义文件夹时，将使用浏览器的默认下载位置。',
     s5: '歌曲记录',

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

@@ -1017,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();