mirror of
https://github.com/kilyabin/psysonic.git
synced 2026-07-22 14:35:41 +00:00
Frank Stellmacher
651a3f276a
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>
77 lines
2.4 KiB
TypeScript
77 lines
2.4 KiB
TypeScript
import React, { useId } from 'react';
|
|
import { ChevronDown } from 'lucide-react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useAuthStore } from '../store/authStore';
|
|
|
|
interface SettingsSubSectionProps {
|
|
title: string;
|
|
icon?: React.ReactNode;
|
|
defaultOpen?: boolean;
|
|
description?: string;
|
|
searchText?: string;
|
|
// 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;
|
|
}
|
|
|
|
// Wird innerhalb eines Settings-Tabs als Accordion-Gruppe genutzt. Natives
|
|
// <details> liefert Keyboard + ARIA gratis; der CSS-Stil setzt den Chevron
|
|
// im Summary mittels [open]-Selektor.
|
|
export default function SettingsSubSection({
|
|
title,
|
|
icon,
|
|
defaultOpen = false,
|
|
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
|
|
className="settings-sub-section-summary"
|
|
aria-labelledby={headingId}
|
|
>
|
|
{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"
|
|
onClick={e => e.stopPropagation()}
|
|
onKeyDown={e => e.stopPropagation()}
|
|
>
|
|
{action}
|
|
</span>
|
|
)}
|
|
<ChevronDown size={16} className="settings-sub-section-chevron" aria-hidden="true" />
|
|
</summary>
|
|
{description && (
|
|
<p className="settings-sub-section-desc">{description}</p>
|
|
)}
|
|
<div className="settings-sub-section-content">
|
|
{children}
|
|
</div>
|
|
</details>
|
|
);
|
|
}
|