mirror of
https://github.com/Psychotoxical/psysonic.git
synced 2026-07-21 23:05:46 +00:00
Frank Stellmacher
320eb97c03
Three tab-section components carved out of the Settings() default-
export body. Each owns its store hooks + local state; Settings()
now only routes via `{activeTab === 'X' && <XTab />}`.
- `LyricsTab.tsx` (~50 LOC, was ~40 inline) — wraps
`LyricsSourcesCustomizer` + sidebar lyrics style toggles. Owns
the two `useAuthStore(s => s.sidebarLyricsStyle/...)` selectors.
- `PersonalisationTab.tsx` (~95 LOC, was ~80 inline) — wraps the
four customizers (sidebar / artist layout / home / queue toolbar)
with their per-store reset buttons.
- `InputTab.tsx` (~185 LOC, was ~170 inline) — keybindings + global
shortcuts. Owns the two `listeningFor` / `listeningForGlobal`
state slots that were previously hoisted into Settings().
13 now-unused imports trimmed (4 customizer-store hooks, 6
keybinding helpers, `Music2/AudioLines` kept since the tab-button
array still uses them as icons, `LayoutGrid/Keyboard` kept for the
same reason).
Pure code-move. Settings.tsx: 3037 → 2741 LOC (−296). Phase-G
journey: 5298 → 2741 LOC (~48% reduction).
95 lines
3.2 KiB
TypeScript
95 lines
3.2 KiB
TypeScript
import { useTranslation } from 'react-i18next';
|
|
import { LayoutGrid, ListMusic, PanelLeft, RotateCcw, Users } from 'lucide-react';
|
|
import { useArtistLayoutStore } from '../../store/artistLayoutStore';
|
|
import { useHomeStore } from '../../store/homeStore';
|
|
import { useQueueToolbarStore } from '../../store/queueToolbarStore';
|
|
import { useSidebarStore } from '../../store/sidebarStore';
|
|
import SettingsSubSection from '../SettingsSubSection';
|
|
import { ArtistLayoutCustomizer } from './ArtistLayoutCustomizer';
|
|
import { HomeCustomizer } from './HomeCustomizer';
|
|
import { QueueToolbarCustomizer } from './QueueToolbarCustomizer';
|
|
import { SidebarCustomizer } from './SidebarCustomizer';
|
|
|
|
export function PersonalisationTab() {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<>
|
|
<SettingsSubSection
|
|
title={t('settings.sidebarTitle')}
|
|
icon={<PanelLeft size={16} />}
|
|
action={
|
|
<button
|
|
type="button"
|
|
className="btn btn-ghost"
|
|
style={{ fontSize: 12, color: 'var(--text-muted)', padding: '2px 6px' }}
|
|
onClick={() => useSidebarStore.getState().reset()}
|
|
data-tooltip={t('settings.sidebarReset')}
|
|
aria-label={t('settings.sidebarReset')}
|
|
>
|
|
<RotateCcw size={14} />
|
|
</button>
|
|
}
|
|
>
|
|
<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} />}
|
|
action={
|
|
<button
|
|
type="button"
|
|
className="btn btn-ghost"
|
|
style={{ fontSize: 12, color: 'var(--text-muted)', padding: '2px 6px' }}
|
|
onClick={() => useHomeStore.getState().reset()}
|
|
data-tooltip={t('settings.sidebarReset')}
|
|
aria-label={t('settings.sidebarReset')}
|
|
>
|
|
<RotateCcw size={14} />
|
|
</button>
|
|
}
|
|
>
|
|
<HomeCustomizer />
|
|
</SettingsSubSection>
|
|
|
|
<SettingsSubSection
|
|
title={t('settings.queueToolbarTitle')}
|
|
icon={<ListMusic size={16} />}
|
|
action={
|
|
<button
|
|
type="button"
|
|
className="btn btn-ghost"
|
|
style={{ fontSize: 12, color: 'var(--text-muted)', padding: '2px 6px' }}
|
|
onClick={() => useQueueToolbarStore.getState().reset()}
|
|
data-tooltip={t('settings.queueToolbarReset')}
|
|
aria-label={t('settings.queueToolbarReset')}
|
|
>
|
|
<RotateCcw size={14} />
|
|
</button>
|
|
}
|
|
>
|
|
<QueueToolbarCustomizer />
|
|
</SettingsSubSection>
|
|
</>
|
|
);
|
|
}
|