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"