feat: add 3 visual toggles (cover art background, playlist cover photo, show bitrate)

feat: add 3 visual toggles (cover art background, playlist cover photo, show bitrate)

src/components/AlbumHeader.tsx

@@ -6,6 +6,7 @@ import CachedImage from './CachedImage';
 import CoverLightbox from './CoverLightbox';
 import { useTranslation } from 'react-i18next';
 import { useIsMobile } from '../hooks/useIsMobile';
+import { useThemeStore } from '../store/themeStore';
 import StarRating from './StarRating';
 import type { EntityRatingSupportLevel } from '../api/subsonic';
 
@@ -125,6 +126,7 @@ export default function AlbumHeader({
   const totalDuration = songs.reduce((acc, s) => acc + s.duration, 0);
   const totalSize = songs.reduce((acc, s) => acc + (s.size ?? 0), 0);
   const formatLabel = [...new Set(songs.map(s => s.suffix).filter((f): f is string => !!f))].map(f => f.toUpperCase()).join(' / ');
+  const enableCoverArtBackground = useThemeStore(s => s.enableCoverArtBackground);
 
   return (
     <>
@@ -138,14 +140,16 @@ export default function AlbumHeader({
       )}
 
       <div className="album-detail-header">
-        {resolvedCoverUrl && (
-          <div
-            className="album-detail-bg"
-            style={{ backgroundImage: `url(${resolvedCoverUrl})` }}
-            aria-hidden="true"
-          />
+        {resolvedCoverUrl && enableCoverArtBackground && (
+          <>
+            <div
+              className="album-detail-bg"
+              style={{ backgroundImage: `url(${resolvedCoverUrl})` }}
+              aria-hidden="true"
+            />
+            <div className="album-detail-overlay" aria-hidden="true" />
+          </>
         )}
-        <div className="album-detail-overlay" aria-hidden="true" />
 
         <div className="album-detail-content">
           <button className="btn btn-ghost album-detail-back" onClick={() => navigate(-1)}>

src/components/AlbumTrackList.tsx

@@ -10,6 +10,7 @@ import { AddToPlaylistSubmenu } from './ContextMenu';
 import { useIsMobile } from '../hooks/useIsMobile';
 import StarRating from './StarRating';
 import { useSelectionStore } from '../store/selectionStore';
+import { useThemeStore } from '../store/themeStore';
 
 function formatDuration(seconds: number): string {
   const h = Math.floor(seconds / 3600);
@@ -19,11 +20,11 @@ function formatDuration(seconds: number): string {
   return `${m}:${s.toString().padStart(2, '0')}`;
 }
 
-function codecLabel(song: { suffix?: string; bitRate?: number }): string {
+function codecLabel(song: { suffix?: string; bitRate?: number }, showBitrate: boolean): string {
   const parts: string[] = [];
   if (song.suffix) parts.push(song.suffix.toUpperCase());
-  if (song.bitRate) parts.push(`${song.bitRate}`);
-  return parts.join(' ');
+  if (showBitrate && song.bitRate) parts.push(`${song.bitRate} kbps`);
+  return parts.join(' · ');
 }
 
 // ── Column configuration ──────────────────────────────────────────────────────
@@ -108,6 +109,7 @@ const TrackRow = React.memo(function TrackRow({
 }: TrackRowProps) {
   const { t } = useTranslation();
   const navigate = useNavigate();
+  const showBitrate = useThemeStore(s => s.showBitrate);
   // Fine-grained: only re-renders when THIS row's selection boolean flips.
   const isSelected = useSelectionStore(s => s.selectedIds.has(song.id));
   const isActive = currentTrackId === song.id;
@@ -192,8 +194,8 @@ const TrackRow = React.memo(function TrackRow({
       case 'format':
         return (
           <div key="format" className="track-meta">
-            {(song.suffix || song.bitRate) && (
-              <span className="track-codec">{codecLabel(song)}</span>
+            {(song.suffix || (showBitrate && song.bitRate)) && (
+              <span className="track-codec">{codecLabel(song, showBitrate)}</span>
             )}
           </div>
         );

src/components/Hero.tsx

@@ -8,6 +8,7 @@ import { useTranslation } from 'react-i18next';
 import { playAlbum } from '../utils/playAlbum';
 import { useIsMobile } from '../hooks/useIsMobile';
 import { useAuthStore } from '../store/authStore';
+import { useThemeStore } from '../store/themeStore';
 import { filterAlbumsByMixRatings, getMixMinRatingsConfigFromAuth } from '../utils/mixRatingFilter';
 
 const INTERVAL_MS = 10000;
@@ -58,6 +59,7 @@ export default function Hero({ albums: albumsProp }: HeroProps = {}) {
   const isMobile = useIsMobile();
   const musicLibraryFilterVersion = useAuthStore(s => s.musicLibraryFilterVersion);
   const mixMinRatingFilterEnabled = useAuthStore(s => s.mixMinRatingFilterEnabled);
+  const enableCoverArtBackground = useThemeStore(s => s.enableCoverArtBackground);
   const mixMinRatingAlbum = useAuthStore(s => s.mixMinRatingAlbum);
   const mixMinRatingArtist = useAuthStore(s => s.mixMinRatingArtist);
   const [albums, setAlbums] = useState<SubsonicAlbum[]>([]);
@@ -141,8 +143,8 @@ export default function Hero({ albums: albumsProp }: HeroProps = {}) {
       onClick={() => navigate(`/album/${album.id}`)}
       style={{ cursor: 'pointer' }}
     >
-      <HeroBg url={stableBgUrl.current} />
-      <div className="hero-overlay" aria-hidden="true" />
+      {enableCoverArtBackground && <HeroBg url={stableBgUrl.current} />}
+      {enableCoverArtBackground && <div className="hero-overlay" aria-hidden="true" />}
 
       {/* key causes re-mount → animate-fade-in triggers on each album change */}
       <div className="hero-content animate-fade-in" key={album.id}>