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/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>
+  );
+}