feat: v1.26.0 — Bulk Select, Song Info, Favorite Button, Recently Played

### Added - Favorite/Star button in player bar (requested by @halfkey) - Bulk multi-select for album tracklist and playlist detail (add to playlist, remove from playlist) - Song Info modal via right-click context menu (metadata: format, bitrate, sample rate, bit depth, channels, file size, path, replay gain) - Recently Played section on Home page - "Show activity in Now Playing" opt-in toggle in Settings → Behavior ### Fixed - Queue cover art not updating on track change (useCachedUrl/CachedImage reset on cacheKey change) - FullscreenPlayer background flickering (FsBg preloads image before layer transition) - Playlist card delete confirmation visual (size expansion + pulse animation) - Gruvbox Light Soft: back button and badge invisible against light background ### Changed - buildStreamUrl: removed unused suffix parameter Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-21 22:15:40 +00:00 · 2026-04-01 20:57:28 +02:00
parent 7d1c66071e
commit 434ee0ecf1
26 changed files with 1074 additions and 221 deletions
@@ -112,9 +112,15 @@ const handleEnqueueAll = () => {
   };

   const handlePlaySong = (song: SubsonicSong) => {
-     const track = songToTrack(song);
-     if (!track.genre && album?.album.genre) track.genre = album.album.genre;
-     playTrack(track, [track]);
+     if (!album) return;
+     const albumGenre = album.album.genre;
+     const tracks = album.songs.map(s => {
+       const t = songToTrack(s);
+       if (!t.genre && albumGenre) t.genre = albumGenre;
+       return t;
+     });
+     const track = tracks.find(t => t.id === song.id) || songToTrack(song);
+     playTrack(track, tracks);
   };

  const handleRate = async (songId: string, rating: number) => {
@@ -11,6 +11,7 @@ export default function Home() {
  const [random, setRandom] = useState<SubsonicAlbum[]>([]);
  const [heroAlbums, setHeroAlbums] = useState<SubsonicAlbum[]>([]);
  const [mostPlayed, setMostPlayed] = useState<SubsonicAlbum[]>([]);
+  const [recentlyPlayed, setRecentlyPlayed] = useState<SubsonicAlbum[]>([]);
  const [randomArtists, setRandomArtists] = useState<SubsonicArtist[]>([]);
  const [loading, setLoading] = useState(true);

@@ -20,13 +21,15 @@ export default function Home() {
      getAlbumList('newest', 12).catch(() => []),
      getAlbumList('random', 20).catch(() => []),
      getAlbumList('frequent', 12).catch(() => []),
+      getAlbumList('recent', 12).catch(() => []),
      getArtists().catch(() => []),
-    ]).then(([s, n, r, f, artists]) => {
+    ]).then(([s, n, r, f, rp, artists]) => {
      setStarred(s);
      setRecent(n);
      setHeroAlbums(r.slice(0, 8));
      setRandom(r.slice(8));
      setMostPlayed(f);
+      setRecentlyPlayed(rp);
      // Pick 16 random artists via Fisher-Yates shuffle
      const shuffled = [...artists];
      for (let i = shuffled.length - 1; i > 0; i--) {
@@ -39,7 +42,7 @@ export default function Home() {
  }, []);

  const loadMore = async (
-    type: 'starred' | 'newest' | 'random' | 'frequent',
+    type: 'starred' | 'newest' | 'random' | 'frequent' | 'recent',
    currentList: SubsonicAlbum[],
    setter: React.Dispatch<React.SetStateAction<SubsonicAlbum[]>>
  ) => {
@@ -96,6 +99,14 @@ export default function Home() {
                </div>
              </section>
            )}
+            {recentlyPlayed.length > 0 && (
+              <AlbumRow
+                title={t('home.recentlyPlayed')}
+                albums={recentlyPlayed}
+                onLoadMore={() => loadMore('recent', recentlyPlayed, setRecentlyPlayed)}
+                moreText={t('home.loadMore')}
+              />
+            )}
            {starred.length > 0 && (
              <AlbumRow
                title={t('home.starred')}
@@ -1,9 +1,10 @@
 import React, { useEffect, useState, useRef, useCallback, useMemo } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
-import { ChevronLeft, Play, ListPlus, Trash2, Search, X, Loader2, Plus, GripVertical, Star, RefreshCw } from 'lucide-react';
+import { ChevronLeft, Play, ListPlus, Trash2, Search, X, Loader2, Plus, GripVertical, Star, RefreshCw, Shuffle } from 'lucide-react';
+import { AddToPlaylistSubmenu } from '../components/ContextMenu';
 import {
  getPlaylist, updatePlaylist, search, setRating, star, unstar,
-  getSimilarSongs2, SubsonicPlaylist, SubsonicSong,
+  getRandomSongs, SubsonicPlaylist, SubsonicSong,
 } from '../api/subsonic';
 import { usePlayerStore, songToTrack } from '../store/playerStore';
 import { usePlaylistStore } from '../store/playlistStore';
@@ -68,6 +69,45 @@ export default function PlaylistDetail() {
  const [contextMenuSongId, setContextMenuSongId] = useState<string | null>(null);
  const contextMenuOpen = usePlayerStore(s => s.contextMenu.isOpen);

+  // ── Bulk select ───────────────────────────────────────────────────
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+  const [lastSelectedIdx, setLastSelectedIdx] = useState<number | null>(null);
+  const [showBulkPlPicker, setShowBulkPlPicker] = useState(false);
+
+  const toggleSelect = (id: string, idx: number, shift: boolean) => {
+    setSelectedIds(prev => {
+      const next = new Set(prev);
+      if (shift && lastSelectedIdx !== null) {
+        const from = Math.min(lastSelectedIdx, idx);
+        const to = Math.max(lastSelectedIdx, idx);
+        songs.slice(from, to + 1).forEach(s => next.add(s.id));
+      } else {
+        next.has(id) ? next.delete(id) : next.add(id);
+      }
+      return next;
+    });
+    setLastSelectedIdx(idx);
+  };
+
+  const allSelected = selectedIds.size === songs.length && songs.length > 0;
+  const toggleAll = () => setSelectedIds(allSelected ? new Set() : new Set(songs.map(s => s.id)));
+
+  const bulkRemove = () => {
+    const next = songs.filter(s => !selectedIds.has(s.id));
+    setSongs(next);
+    savePlaylist(next);
+    setSelectedIds(new Set());
+  };
+
+  useEffect(() => {
+    if (!showBulkPlPicker) return;
+    const handler = (e: MouseEvent) => {
+      if (!(e.target as HTMLElement).closest('.bulk-pl-picker-wrap')) setShowBulkPlPicker(false);
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [showBulkPlPicker]);
+
  // ── 2×2 cover quad (first 4 unique album covers) ─────────────
  const coverQuad = useMemo(() => {
    const seen = new Set<string>();
@@ -140,15 +180,21 @@ export default function PlaylistDetail() {

  // ── Suggestions ───────────────────────────────────────────────
  const loadSuggestions = useCallback(async (currentSongs: SubsonicSong[]) => {
-    const withArtist = currentSongs.filter(s => s.artistId);
-    if (!withArtist.length) return;
-    const pick = withArtist[Math.floor(Math.random() * withArtist.length)];
+    if (!currentSongs.length) return;
+    // Count genres across playlist songs, pick the most common one
+    const genreCounts: Record<string, number> = {};
+    for (const s of currentSongs) {
+      if (s.genre) genreCounts[s.genre] = (genreCounts[s.genre] ?? 0) + 1;
+    }
+    const genres = Object.entries(genreCounts).sort((a, b) => b[1] - a[1]);
+    // Fall back to no genre filter if none of the songs have genre tags
+    const genre = genres.length > 0 ? genres[Math.floor(Math.random() * Math.min(3, genres.length))][0] : undefined;
    const existingIds = new Set(currentSongs.map(s => s.id));
    setLoadingSuggestions(true);
    setSuggestions([]);
    try {
-      const similar = await getSimilarSongs2(pick.artistId!, 25);
-      setSuggestions(similar.filter(s => !existingIds.has(s.id)).slice(0, 10));
+      const random = await getRandomSongs(25, genre);
+      setSuggestions(random.filter(s => !existingIds.has(s.id)).slice(0, 10));
    } catch {}
    setLoadingSuggestions(false);
  }, []);
@@ -352,6 +398,19 @@ export default function PlaylistDetail() {
                  }}>
                    <Play size={16} fill="currentColor" /> {t('playlists.playAll')}
                  </button>
+                  <button className="btn btn-surface" disabled={songs.length === 0} onClick={() => {
+                    if (!songs.length) return;
+                    touchPlaylist(id!);
+                    const tracks = songs.map(songToTrack);
+                    const shuffled = [...tracks];
+                    for (let i = shuffled.length - 1; i > 0; i--) {
+                      const j = Math.floor(Math.random() * (i + 1));
+                      [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
+                    }
+                    playTrack(shuffled[0], shuffled);
+                  }}>
+                    <Shuffle size={16} /> {t('playlists.shuffle', 'Shuffle')}
+                  </button>
                  <button className="btn btn-surface" disabled={songs.length === 0} onClick={() => {
                    if (!songs.length) return;
                    touchPlaylist(id!);
@@ -416,9 +475,53 @@ export default function PlaylistDetail() {
      {/* ── Tracklist ── */}
      <div className="tracklist" ref={tracklistRef}>

+        {/* Bulk action bar */}
+        {selectedIds.size > 0 && (
+          <div className="bulk-action-bar">
+            <span className="bulk-action-count">
+              {t('common.bulkSelected', { count: selectedIds.size })}
+            </span>
+            <div className="bulk-pl-picker-wrap">
+              <button
+                className="btn btn-surface btn-sm"
+                onClick={() => setShowBulkPlPicker(v => !v)}
+              >
+                <ListPlus size={14} />
+                {t('common.bulkAddToPlaylist')}
+              </button>
+              {showBulkPlPicker && (
+                <AddToPlaylistSubmenu
+                  songIds={[...selectedIds]}
+                  onDone={() => { setShowBulkPlPicker(false); setSelectedIds(new Set()); }}
+                  dropDown
+                />
+              )}
+            </div>
+            <button
+              className="btn btn-surface btn-sm"
+              style={{ color: 'var(--danger)' }}
+              onClick={bulkRemove}
+            >
+              <Trash2 size={14} />
+              {t('common.bulkRemoveFromPlaylist')}
+            </button>
+            <button
+              className="btn btn-ghost btn-sm"
+              onClick={() => setSelectedIds(new Set())}
+            >
+              <X size={13} />
+              {t('common.bulkClear')}
+            </button>
+          </div>
+        )}
+
        {/* Header */}
        <div className="tracklist-header tracklist-va tracklist-playlist">
-          <div className="col-center">#</div>
+          <div className="col-center" style={{ cursor: songs.length > 0 ? 'pointer' : undefined }} onClick={songs.length > 0 ? toggleAll : undefined}>
+            {selectedIds.size > 0
+              ? <span className={`bulk-check${allSelected ? ' checked' : ''}`} />
+              : '#'}
+          </div>
          <div>{t('albumDetail.trackTitle')}</div>
          <div>{t('albumDetail.trackArtist')}</div>
          <div className="col-center">{t('albumDetail.trackFavorite')}</div>
@@ -441,7 +544,7 @@ export default function PlaylistDetail() {

            <div
              data-track-idx={idx}
-              className={`track-row track-row-va tracklist-playlist${currentTrack?.id === song.id ? ' active' : ''}${contextMenuSongId === song.id ? ' context-active' : ''}`}
+              className={`track-row track-row-va tracklist-playlist${currentTrack?.id === song.id ? ' active' : ''}${contextMenuSongId === song.id ? ' context-active' : ''}${selectedIds.has(song.id) ? ' bulk-selected' : ''}`}
              onMouseEnter={e => { setHoveredSongId(song.id); handleRowMouseEnter(idx, e); }}
              onMouseLeave={() => setHoveredSongId(null)}
              onMouseDown={e => handleRowMouseDown(e, idx)}
@@ -449,26 +552,50 @@ export default function PlaylistDetail() {
                const tracks = songs.map(songToTrack);
                playTrack(tracks[idx], tracks);
              }}
+              onClick={e => {
+                if (selectedIds.size > 0 && !(e.target as HTMLElement).closest('button, input')) {
+                  toggleSelect(song.id, idx, e.shiftKey);
+                }
+              }}
              onContextMenu={e => {
                e.preventDefault();
                setContextMenuSongId(song.id);
                openContextMenu(e.clientX, e.clientY, songToTrack(song), 'album-song');
              }}
            >
-              {/* # — play on click, grip icon on hover */}
-              <div
-                className="track-num"
-                style={{ cursor: 'pointer', color: (hoveredSongId === song.id || currentTrack?.id === song.id) ? 'var(--accent)' : undefined }}
-                onClick={() => { const tracks = songs.map(songToTrack); playTrack(tracks[idx], tracks); }}
-              >
-                {hoveredSongId === song.id && currentTrack?.id !== song.id
-                  ? <GripVertical size={13} />
-                  : currentTrack?.id === song.id && isPlaying
-                    ? <div className="eq-bars"><span className="eq-bar" /><span className="eq-bar" /><span className="eq-bar" /></div>
-                    : currentTrack?.id === song.id
-                      ? <Play size={13} fill="currentColor" />
-                      : idx + 1}
-              </div>
+              {/* # — checkbox in select mode, grip/play on hover otherwise */}
+              {(() => {
+                const inSelectMode = selectedIds.size > 0;
+                return (
+                  <div
+                    className="track-num"
+                    style={{ cursor: 'pointer' }}
+                    onClick={e => {
+                      e.stopPropagation();
+                      if (inSelectMode || hoveredSongId === song.id) {
+                        toggleSelect(song.id, idx, e.shiftKey);
+                      } else {
+                        const tracks = songs.map(songToTrack);
+                        playTrack(tracks[idx], tracks);
+                      }
+                    }}
+                  >
+                    <span
+                      className={`bulk-check${selectedIds.has(song.id) ? ' checked' : ''}${(inSelectMode || hoveredSongId === song.id) ? ' bulk-check-visible' : ''}`}
+                      onClick={e => { e.stopPropagation(); toggleSelect(song.id, idx, e.shiftKey); }}
+                    />
+                    <span style={{ color: (hoveredSongId === song.id || currentTrack?.id === song.id) ? 'var(--accent)' : 'var(--text-muted)' }}>
+                      {hoveredSongId === song.id && currentTrack?.id !== song.id && !inSelectMode
+                        ? <GripVertical size={13} />
+                        : currentTrack?.id === song.id && isPlaying
+                          ? <div className="eq-bars"><span className="eq-bar" /><span className="eq-bar" /><span className="eq-bar" /></div>
+                          : currentTrack?.id === song.id
+                            ? <Play size={13} fill="currentColor" />
+                            : idx + 1}
+                    </span>
+                  </div>
+                );
+              })()}

              {/* Title */}
              <div className="track-info">
@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { ListMusic, Play, Plus, X } from 'lucide-react';
+import { ListMusic, Play, Plus, Trash2, X } from 'lucide-react';
 import { getPlaylists, createPlaylist, deletePlaylist, SubsonicPlaylist, getPlaylist, buildCoverArtUrl, coverArtCacheKey } from '../api/subsonic';
 import { usePlayerStore, songToTrack } from '../store/playerStore';
 import { usePlaylistStore } from '../store/playlistStore';
@@ -172,7 +172,7 @@ export default function Playlists() {
                  data-tooltip={deleteConfirmId === pl.id ? t('playlists.confirmDelete') : t('playlists.deletePlaylist')}
                  data-tooltip-pos="bottom"
                >
-                  <X size={12} />
+                  {deleteConfirmId === pl.id ? <Trash2 size={12} /> : <X size={12} />}
                </button>
              </div>

@@ -978,6 +978,17 @@ export default function Settings() {
                </label>
              </div>
              <div className="settings-section-divider" />
+              <div className="settings-toggle-row">
+                <div>
+                  <div style={{ fontWeight: 500 }}>{t('settings.nowPlayingEnabled')}</div>
+                  <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>{t('settings.nowPlayingEnabledDesc')}</div>
+                </div>
+                <label className="toggle-switch" aria-label={t('settings.nowPlayingEnabled')}>
+                  <input type="checkbox" checked={auth.nowPlayingEnabled} onChange={e => auth.setNowPlayingEnabled(e.target.checked)} />
+                  <span className="toggle-track" />
+                </label>
+              </div>
+              <div className="settings-section-divider" />
              <div className="settings-toggle-row">
                <div>
                  <div style={{ fontWeight: 500 }}>{t('settings.downloadsTitle')}</div>
@@ -1138,10 +1149,10 @@ function renderInline(text: string): React.ReactNode[] {
  });
 }

-function SidebarGripHandle({ idx, label }: { idx: number; label: string }) {
+function SidebarGripHandle({ idx, section, label }: { idx: number; section: 'library' | 'system'; label: string }) {
  const { t } = useTranslation();
  const { onMouseDown } = useDragSource(() => ({
-    data: JSON.stringify({ type: 'sidebar_reorder', index: idx }),
+    data: JSON.stringify({ type: 'sidebar_reorder', index: idx, section }),
    label,
  }));
  return (
@@ -1156,69 +1167,103 @@ function SidebarGripHandle({ idx, label }: { idx: number; label: string }) {
  );
 }

+type DropTarget = { idx: number; before: boolean; section: 'library' | 'system' } | null;
+
 function SidebarCustomizer() {
  const { t } = useTranslation();
  const { items, setItems, toggleItem, reset } = useSidebarStore();
  const { isDragging: isPsyDragging } = useDragDrop();
-  const listRef = useRef<HTMLDivElement>(null);
-  const [dropTarget, setDropTarget] = useState<{ idx: number; before: boolean } | null>(null);
-  const dropTargetRef = useRef<{ idx: number; before: boolean } | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [dropTarget, setDropTarget] = useState<DropTarget>(null);
+  const dropTargetRef = useRef<DropTarget>(null);
  const itemsRef = useRef(items);
  itemsRef.current = items;

+  const libraryItems = items.filter(cfg => ALL_NAV_ITEMS[cfg.id]?.section === 'library');
+  const systemItems  = items.filter(cfg => ALL_NAV_ITEMS[cfg.id]?.section === 'system');
+
  useEffect(() => {
-    if (!isPsyDragging) {
-      dropTargetRef.current = null;
-      setDropTarget(null);
-    }
+    if (!isPsyDragging) { dropTargetRef.current = null; setDropTarget(null); }
  }, [isPsyDragging]);

  useEffect(() => {
-    const el = listRef.current;
+    const el = containerRef.current;
    if (!el) return;
    const onPsyDrop = (e: Event) => {
      const detail = (e as CustomEvent).detail;
      if (!detail?.data) return;
-      let parsed: { type?: string; index?: number };
+      let parsed: { type?: string; index?: number; section?: string };
      try { parsed = JSON.parse(detail.data); } catch { return; }
-      if (parsed.type !== 'sidebar_reorder' || parsed.index == null) return;
+      if (parsed.type !== 'sidebar_reorder' || parsed.index == null || !parsed.section) return;

      const fromIdx = parsed.index;
+      const fromSection = parsed.section as 'library' | 'system';
      const target = dropTargetRef.current;
-      dropTargetRef.current = null;
-      setDropTarget(null);
-      if (target === null) return;
+      dropTargetRef.current = null; setDropTarget(null);
+      if (!target || target.section !== fromSection) return;

+      const sectionItems = fromSection === 'library' ? [...libraryItems] : [...systemItems];
      const insertBefore = target.before ? target.idx : target.idx + 1;
      if (insertBefore === fromIdx || insertBefore === fromIdx + 1) return;

-      const next = [...itemsRef.current];
-      const [moved] = next.splice(fromIdx, 1);
-      const adjustedInsert = insertBefore > fromIdx ? insertBefore - 1 : insertBefore;
-      next.splice(adjustedInsert, 0, moved);
-      setItems(next);
+      const [moved] = sectionItems.splice(fromIdx, 1);
+      sectionItems.splice(insertBefore > fromIdx ? insertBefore - 1 : insertBefore, 0, moved);
+
+      // Merge reordered section back into flat items array
+      const all = [...itemsRef.current];
+      const positions = all.map((cfg, i) => ({ cfg, i }))
+        .filter(({ cfg }) => ALL_NAV_ITEMS[cfg.id]?.section === fromSection)
+        .map(({ i }) => i);
+      positions.forEach((pos, i) => { all[pos] = sectionItems[i]; });
+      setItems(all);
    };
    el.addEventListener('psy-drop', onPsyDrop);
    return () => el.removeEventListener('psy-drop', onPsyDrop);
-  }, [setItems]);
+  }, [libraryItems, systemItems, setItems]);

  const handleMouseMove = (e: React.MouseEvent) => {
-    if (!isPsyDragging || !listRef.current) return;
-    const rows = listRef.current.querySelectorAll<HTMLElement>('[data-sidebar-idx]');
-    let target: { idx: number; before: boolean } | null = null;
+    if (!isPsyDragging || !containerRef.current) return;
+    const rows = containerRef.current.querySelectorAll<HTMLElement>('[data-sidebar-idx]');
+    let target: DropTarget = null;
    for (const row of rows) {
      const rect = row.getBoundingClientRect();
      const idx = Number(row.dataset.sidebarIdx);
-      if (e.clientY < rect.top + rect.height / 2) {
-        target = { idx, before: true };
-        break;
-      }
-      target = { idx, before: false };
+      const section = row.dataset.sidebarSection as 'library' | 'system';
+      if (e.clientY < rect.top + rect.height / 2) { target = { idx, before: true, section }; break; }
+      target = { idx, before: false, section };
    }
    dropTargetRef.current = target;
    setDropTarget(target);
  };

+  const renderRow = (cfg: SidebarItemConfig, localIdx: number, section: 'library' | 'system') => {
+    const meta = ALL_NAV_ITEMS[cfg.id];
+    if (!meta) return null;
+    const Icon = meta.icon;
+    const isBefore = isPsyDragging && dropTarget?.section === section && dropTarget.idx === localIdx && dropTarget.before;
+    const isAfter  = isPsyDragging && dropTarget?.section === section && dropTarget.idx === localIdx && !dropTarget.before;
+    return (
+      <div
+        key={cfg.id}
+        data-sidebar-idx={localIdx}
+        data-sidebar-section={section}
+        className="sidebar-customizer-row"
+        style={{
+          borderTop:    isBefore ? '2px solid var(--accent)' : undefined,
+          borderBottom: isAfter  ? '2px solid var(--accent)' : undefined,
+        }}
+      >
+        <SidebarGripHandle idx={localIdx} section={section} label={t(meta.labelKey)} />
+        <Icon size={16} style={{ color: 'var(--text-muted)', flexShrink: 0 }} />
+        <span style={{ flex: 1, fontSize: 14 }}>{t(meta.labelKey)}</span>
+        <label className="toggle-switch" aria-label={t(meta.labelKey)}>
+          <input type="checkbox" checked={cfg.visible} onChange={() => toggleItem(cfg.id)} />
+          <span className="toggle-track" />
+        </label>
+      </div>
+    );
+  };
+
  return (
    <section className="settings-section">
      <div className="settings-section-header">
@@ -1233,40 +1278,19 @@ function SidebarCustomizer() {
          <RotateCcw size={14} />
        </button>
      </div>
-      <div
-        className="settings-card"
-        style={{ padding: '4px 0' }}
-        ref={listRef}
-        onMouseMove={handleMouseMove}
-      >
-        {items.map((cfg, idx) => {
-          const meta = ALL_NAV_ITEMS[cfg.id];
-          if (!meta) return null;
-          const Icon = meta.icon;
-          const isBefore = isPsyDragging && dropTarget?.idx === idx && dropTarget.before;
-          const isAfter  = isPsyDragging && dropTarget?.idx === idx && !dropTarget.before;
-          return (
-            <div
-              key={cfg.id}
-              data-sidebar-idx={idx}
-              className="sidebar-customizer-row"
-              style={{
-                borderTop:    isBefore ? '2px solid var(--accent)' : undefined,
-                borderBottom: isAfter  ? '2px solid var(--accent)' : undefined,
-              }}
-            >
-              <SidebarGripHandle idx={idx} label={t(meta.labelKey)} />
-              <Icon size={16} style={{ color: 'var(--text-muted)', flexShrink: 0 }} />
-              <span style={{ flex: 1, fontSize: 14 }}>{t(meta.labelKey)}</span>
-              <label className="toggle-switch" aria-label={t(meta.labelKey)}>
-                <input type="checkbox" checked={cfg.visible} onChange={() => toggleItem(cfg.id)} />
-                <span className="toggle-track" />
-              </label>
-            </div>
-          );
-        })}
-        <div className="sidebar-customizer-fixed-hint">
-          <span>{t('settings.sidebarFixed')}: {t('sidebar.nowPlaying')}, {t('sidebar.settings')}</span>
+      <div ref={containerRef} onMouseMove={handleMouseMove} style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+        {/* Library block */}
+        <div className="settings-card" style={{ padding: '4px 0' }}>
+          <div className="sidebar-customizer-block-label">{t('sidebar.library')}</div>
+          {libraryItems.map((cfg, i) => renderRow(cfg, i, 'library'))}
+        </div>
+        {/* System block */}
+        <div className="settings-card" style={{ padding: '4px 0' }}>
+          <div className="sidebar-customizer-block-label">{t('sidebar.system')}</div>
+          {systemItems.map((cfg, i) => renderRow(cfg, i, 'system'))}
+          <div className="sidebar-customizer-fixed-hint">
+            <span>{t('settings.sidebarFixed')}: {t('sidebar.nowPlaying')}, {t('sidebar.settings')}</span>
+          </div>
        </div>
      </div>
    </section>