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

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

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