mirror of
https://github.com/kilyabin/psysonic.git
synced 2026-07-22 14:35:41 +00:00
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>
This commit is contained in:
committed by
GitHub
parent
e1283f4068
commit
651a3f276a
+19
-1
@@ -178,7 +178,7 @@ export default function Settings() {
|
||||
onClick={() => setSearchOpen(true)}
|
||||
aria-label={t('settings.searchPlaceholder')}
|
||||
data-tooltip={t('settings.searchPlaceholder')}
|
||||
data-tooltip-pos="left"
|
||||
data-tooltip-pos="bottom"
|
||||
>
|
||||
<Search size={16} />
|
||||
</button>
|
||||
@@ -229,6 +229,24 @@ export default function Settings() {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<label
|
||||
className="settings-advanced-toggle"
|
||||
data-tooltip={t('settings.advancedModeTooltip')}
|
||||
data-tooltip-pos="left"
|
||||
>
|
||||
<span className="settings-advanced-toggle-label">
|
||||
{t('settings.advancedMode')}
|
||||
</span>
|
||||
<span className="toggle-switch">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={auth.advancedSettingsEnabled}
|
||||
onChange={e => auth.setAdvancedSettingsEnabled(e.target.checked)}
|
||||
aria-label={t('settings.advancedMode')}
|
||||
/>
|
||||
<span className="toggle-track" />
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* Tab navigation */}
|
||||
|
||||
Reference in New Issue
Block a user