feat(settings): global Advanced Mode toggle + playlist page layout (#556) (#720)

Adds a per-element visibility toggle for the playlist detail page (Add
Songs, Import CSV, Download ZIP, Cache Offline, Suggestions) and reworks
the way uncommon options are surfaced: instead of a per-tab collapsible
group, a global "Advanced" toggle in the Settings header reveals all
`advanced` sub-sections across every tab and marks each one with a small
badge. Sets the pattern up so any future advanced option lives in its
natural tab, gated by the same switch.

- New `advancedSettingsEnabled` boolean on `authStore`
  (UiAppearance slice, persisted with the rest of the store).
- `SettingsSubSection` gains an `advanced?: boolean` prop. Hidden when
  the toggle is off; renders an "Advanced" pill in the header when on.
- Settings header gets a Toggle-Switch next to the search lupe.
- `PersonalisationTab` flattens — Sidebar + Home stay always visible;
  Artist sections, Queue Toolbar, and the new Playlist layout get
  `advanced` and disappear by default. `PersonalisationAdvancedGroup`
  component + CSS removed.
- New `playlistLayoutStore` (Zustand + persist, items[{id,visible}] +
  rehydrate sanitize) following the queueToolbarStore pattern.
- `PlaylistHero` and `PlaylistSuggestions` gate the four toolbar buttons
  and the suggestions rail on the store directly.
- One-time migration in MainApp on mount: if the user had opened the
  old per-tab Advanced group (`psysonic_personalisation_advanced_open
  === 'true'`) OR already customised any of the three sub-sections,
  Advanced Mode auto-enables on first launch. Idempotent via a
  localStorage flag; legacy key removed afterwards.
- New i18n keys `settings.advancedMode`, `settings.advancedModeTooltip`,
  `settings.advancedBadge`, `settings.playlistLayout*` in all 9 locales.

Reuses kveld9's design from PR #556; not merged because the locale split
landed afterwards. Credited under the existing kveld9 entry in
settingsCredits.ts.

Co-authored-by: Kveld. <kveld912@proton.me>

src/components/SettingsSubSection.tsx

@@ -1,5 +1,7 @@
 import React, { useId } from 'react';
 import { ChevronDown } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { useAuthStore } from '../store/authStore';
 
 interface SettingsSubSectionProps {
   title: string;
@@ -10,6 +12,8 @@ interface SettingsSubSectionProps {
   // Rechts im Summary neben dem Chevron (z.B. Reset-Button). Clicks werden
   // gestoppt, damit sie das Accordion nicht togglen.
   action?: React.ReactNode;
+  /** Hidden unless the global Advanced Mode toggle is on; renders a small badge when visible. */
+  advanced?: boolean;
   children: React.ReactNode;
 }
 
@@ -23,13 +27,20 @@ export default function SettingsSubSection({
   description,
   searchText,
   action,
+  advanced = false,
   children,
 }: SettingsSubSectionProps) {
+  const { t } = useTranslation();
+  const advancedSettingsEnabled = useAuthStore(s => s.advancedSettingsEnabled);
   const headingId = useId();
+
+  if (advanced && !advancedSettingsEnabled) return null;
+
   return (
     <details
       className="settings-sub-section"
       data-settings-search={searchText ?? title}
+      data-advanced={advanced ? 'true' : undefined}
       open={defaultOpen}
     >
       <summary
@@ -38,6 +49,11 @@ export default function SettingsSubSection({
       >
         {icon && <span className="settings-sub-section-icon">{icon}</span>}
         <span id={headingId} className="settings-sub-section-title">{title}</span>
+        {advanced && (
+          <span className="settings-sub-section-advanced-badge" aria-hidden="true">
+            {t('settings.advancedBadge')}
+          </span>
+        )}
         {action && (
           <span
             className="settings-sub-section-action"

src/components/playlist/PlaylistHero.tsx

@@ -8,6 +8,7 @@ import {
 import type { SubsonicPlaylist, SubsonicSong } from '../../api/subsonicTypes';
 import type { ZipDownload } from '../../store/zipDownloadStore';
 import { useThemeStore } from '../../store/themeStore';
+import { usePlaylistLayoutStore, type PlaylistLayoutItemId } from '../../store/playlistLayoutStore';
 import {
   displayPlaylistName, formatSize, isSmartPlaylistName, totalDurationLabel,
 } from '../../utils/componentHelpers/playlistDetailHelpers';
@@ -59,6 +60,9 @@ export default function PlaylistHero({
   const navigate = useNavigate();
   const enableCoverArtBackground = useThemeStore(s => s.enableCoverArtBackground);
   const enablePlaylistCoverPhoto = useThemeStore(s => s.enablePlaylistCoverPhoto);
+  const layoutItems = usePlaylistLayoutStore(s => s.items);
+  const isLayoutVisible = (id: PlaylistLayoutItemId) =>
+    layoutItems.find(i => i.id === id)?.visible !== false;
 
   return (
     <div className="album-detail-header">
@@ -158,23 +162,26 @@ export default function PlaylistHero({
                   <ListPlus size={16} />
                 </button>
               </div>
-              <button
-                className={`btn btn-ghost ${searchOpen ? 'active' : ''}`}
-                onClick={() => { setSearchOpen(v => !v); setSearchQuery(''); setSearchResults([]); setSelectedSearchIds(new Set()); setSearchPlPickerOpen(false); }}
-              >
-                <Search size={16} /> {t('playlists.addSongs')}
-              </button>
-              <button
-                className="btn btn-ghost"
-                onClick={handleImportCsv}
-                disabled={csvImporting}
-                data-tooltip={t('playlists.importCSVTooltip')}
-              >
-                {csvImporting ? <Loader2 size={16} className="spin-slow" /> : <FileUp size={16} />}
-                {t('playlists.importCSV')}
-              </button>
-              {/* search close resets selection */}
-              {songs.length > 0 && (
+              {isLayoutVisible('addSongs') && (
+                <button
+                  className={`btn btn-ghost ${searchOpen ? 'active' : ''}`}
+                  onClick={() => { setSearchOpen(v => !v); setSearchQuery(''); setSearchResults([]); setSelectedSearchIds(new Set()); setSearchPlPickerOpen(false); }}
+                >
+                  <Search size={16} /> {t('playlists.addSongs')}
+                </button>
+              )}
+              {isLayoutVisible('importCsv') && (
+                <button
+                  className="btn btn-ghost"
+                  onClick={handleImportCsv}
+                  disabled={csvImporting}
+                  data-tooltip={t('playlists.importCSVTooltip')}
+                >
+                  {csvImporting ? <Loader2 size={16} className="spin-slow" /> : <FileUp size={16} />}
+                  {t('playlists.importCSV')}
+                </button>
+              )}
+              {isLayoutVisible('downloadZip') && songs.length > 0 && (
                 activeZip && !activeZip.done && !activeZip.error ? (
                   <div className="download-progress-wrap">
                     <Download size={14} />
@@ -189,7 +196,7 @@ export default function PlaylistHero({
                   </button>
                 )
               )}
-              {songs.length > 0 && id && (
+              {isLayoutVisible('offlineCache') && songs.length > 0 && id && (
                 <button
                   className={`btn btn-ghost${isCached ? ' btn-danger' : ''}`}
                   disabled={isDownloading}

src/components/playlist/PlaylistSuggestions.tsx

@@ -7,6 +7,7 @@ import type { SubsonicSong } from '../../api/subsonicTypes';
 import { usePlayerStore } from '../../store/playerStore';
 import { usePreviewStore } from '../../store/previewStore';
 import { useThemeStore } from '../../store/themeStore';
+import { usePlaylistLayoutStore } from '../../store/playlistLayoutStore';
 import { songToTrack } from '../../utils/playback/songToTrack';
 import { codecLabel } from '../../utils/componentHelpers/playlistDetailHelpers';
 import { formatTrackTime } from '../../utils/format/formatDuration';
@@ -43,6 +44,10 @@ export default function PlaylistSuggestions({
   const previewingId = usePreviewStore(s => s.previewingId);
   const previewAudioStarted = usePreviewStore(s => s.audioStarted);
   const showBitrate = useThemeStore(s => s.showBitrate);
+  const suggestionsVisible = usePlaylistLayoutStore(s =>
+    s.items.find(i => i.id === 'suggestions')?.visible !== false);
+
+  if (!suggestionsVisible) return null;
 
   const filteredSuggestions = suggestions.filter(s => !existingIds.has(s.id));
 

src/components/settings/PersonalisationTab.tsx

@@ -1,12 +1,14 @@
 import { useTranslation } from 'react-i18next';
-import { LayoutGrid, ListMusic, PanelLeft, RotateCcw, Users } from 'lucide-react';
+import { LayoutGrid, ListMusic, ListTodo, PanelLeft, RotateCcw, Users } from 'lucide-react';
 import { useArtistLayoutStore } from '../../store/artistLayoutStore';
 import { useHomeStore } from '../../store/homeStore';
+import { usePlaylistLayoutStore } from '../../store/playlistLayoutStore';
 import { useQueueToolbarStore } from '../../store/queueToolbarStore';
 import { useSidebarStore } from '../../store/sidebarStore';
 import SettingsSubSection from '../SettingsSubSection';
 import { ArtistLayoutCustomizer } from './ArtistLayoutCustomizer';
 import { HomeCustomizer } from './HomeCustomizer';
+import { PlaylistLayoutCustomizer } from './PlaylistLayoutCustomizer';
 import { QueueToolbarCustomizer } from './QueueToolbarCustomizer';
 import { SidebarCustomizer } from './SidebarCustomizer';
 
@@ -33,25 +35,6 @@ export function PersonalisationTab() {
         <SidebarCustomizer />
       </SettingsSubSection>
 
-      <SettingsSubSection
-        title={t('settings.artistLayoutTitle')}
-        icon={<Users size={16} />}
-        action={
-          <button
-            type="button"
-            className="btn btn-ghost"
-            style={{ fontSize: 12, color: 'var(--text-muted)', padding: '2px 6px' }}
-            onClick={() => useArtistLayoutStore.getState().reset()}
-            data-tooltip={t('settings.artistLayoutReset')}
-            aria-label={t('settings.artistLayoutReset')}
-          >
-            <RotateCcw size={14} />
-          </button>
-        }
-      >
-        <ArtistLayoutCustomizer />
-      </SettingsSubSection>
-
       <SettingsSubSection
         title={t('settings.homeCustomizerTitle')}
         icon={<LayoutGrid size={16} />}
@@ -71,9 +54,30 @@ export function PersonalisationTab() {
         <HomeCustomizer />
       </SettingsSubSection>
 
+      <SettingsSubSection
+        title={t('settings.artistLayoutTitle')}
+        icon={<Users size={16} />}
+        advanced
+        action={
+          <button
+            type="button"
+            className="btn btn-ghost"
+            style={{ fontSize: 12, color: 'var(--text-muted)', padding: '2px 6px' }}
+            onClick={() => useArtistLayoutStore.getState().reset()}
+            data-tooltip={t('settings.artistLayoutReset')}
+            aria-label={t('settings.artistLayoutReset')}
+          >
+            <RotateCcw size={14} />
+          </button>
+        }
+      >
+        <ArtistLayoutCustomizer />
+      </SettingsSubSection>
+
       <SettingsSubSection
         title={t('settings.queueToolbarTitle')}
         icon={<ListMusic size={16} />}
+        advanced
         action={
           <button
             type="button"
@@ -89,6 +93,26 @@ export function PersonalisationTab() {
       >
         <QueueToolbarCustomizer />
       </SettingsSubSection>
+
+      <SettingsSubSection
+        title={t('settings.playlistLayoutTitle')}
+        icon={<ListTodo size={16} />}
+        advanced
+        action={
+          <button
+            type="button"
+            className="btn btn-ghost"
+            style={{ fontSize: 12, color: 'var(--text-muted)', padding: '2px 6px' }}
+            onClick={() => usePlaylistLayoutStore.getState().reset()}
+            data-tooltip={t('settings.playlistLayoutReset')}
+            aria-label={t('settings.playlistLayoutReset')}
+          >
+            <RotateCcw size={14} />
+          </button>
+        }
+      >
+        <PlaylistLayoutCustomizer />
+      </SettingsSubSection>
     </>
   );
 }

src/components/settings/PlaylistLayoutCustomizer.tsx

@@ -0,0 +1,44 @@
+import { useTranslation } from 'react-i18next';
+import { Download, FileUp, HardDrive, Lightbulb, Search } from 'lucide-react';
+import { usePlaylistLayoutStore, type PlaylistLayoutItemId } from '../../store/playlistLayoutStore';
+
+const PLAYLIST_LAYOUT_ICONS: Record<PlaylistLayoutItemId, typeof Search> = {
+  addSongs:     Search,
+  importCsv:    FileUp,
+  downloadZip:  Download,
+  offlineCache: HardDrive,
+  suggestions:  Lightbulb,
+};
+
+const PLAYLIST_LAYOUT_LABEL_KEYS: Record<PlaylistLayoutItemId, string> = {
+  addSongs:     'playlists.addSongs',
+  importCsv:    'playlists.importCSV',
+  downloadZip:  'playlists.downloadZip',
+  offlineCache: 'playlists.cacheOffline',
+  suggestions:  'playlists.suggestions',
+};
+
+export function PlaylistLayoutCustomizer() {
+  const { t } = useTranslation();
+  const items = usePlaylistLayoutStore(s => s.items);
+  const toggleItem = usePlaylistLayoutStore(s => s.toggleItem);
+
+  return (
+    <div className="settings-card" style={{ padding: '4px 0' }}>
+      {items.map((it) => {
+        const Icon = PLAYLIST_LAYOUT_ICONS[it.id];
+        const label = t(PLAYLIST_LAYOUT_LABEL_KEYS[it.id]);
+        return (
+          <div key={it.id} className="sidebar-customizer-row">
+            <Icon size={16} style={{ color: 'var(--text-muted)', flexShrink: 0 }} />
+            <span style={{ flex: 1, fontSize: 14 }}>{label}</span>
+            <label className="toggle-switch" aria-label={label}>
+              <input type="checkbox" checked={it.visible} onChange={() => toggleItem(it.id)} />
+              <span className="toggle-track" />
+            </label>
+          </div>
+        );
+      })}
+    </div>
+  );
+}