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).
53 lines
2.0 KiB
TypeScript
53 lines
2.0 KiB
TypeScript
import { useTranslation } from 'react-i18next';
|
|
import { AudioLines, Music2 } from 'lucide-react';
|
|
import { useAuthStore } from '../../store/authStore';
|
|
import SettingsSubSection from '../SettingsSubSection';
|
|
import { LyricsSourcesCustomizer } from './LyricsSourcesCustomizer';
|
|
|
|
export function LyricsTab() {
|
|
const { t } = useTranslation();
|
|
const sidebarLyricsStyle = useAuthStore(s => s.sidebarLyricsStyle);
|
|
const setSidebarLyricsStyle = useAuthStore(s => s.setSidebarLyricsStyle);
|
|
|
|
return (
|
|
<>
|
|
<SettingsSubSection
|
|
title={t('settings.lyricsSourcesTitle')}
|
|
icon={<Music2 size={16} />}
|
|
>
|
|
<LyricsSourcesCustomizer />
|
|
</SettingsSubSection>
|
|
|
|
<SettingsSubSection
|
|
title={t('settings.sidebarLyricsStyle')}
|
|
icon={<AudioLines size={16} />}
|
|
>
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
|
|
{(['classic', 'apple'] as const).map(style => {
|
|
const key = style === 'classic' ? 'Classic' : 'Apple';
|
|
const other = style === 'classic' ? 'apple' : 'classic';
|
|
return (
|
|
<div key={style} className="settings-card">
|
|
<div className="settings-toggle-row">
|
|
<div>
|
|
<div style={{ fontWeight: 500 }}>{t(`settings.sidebarLyricsStyle${key}` as any)}</div>
|
|
<div style={{ fontSize: 12, color: 'var(--text-muted)' }}>{t(`settings.sidebarLyricsStyle${key}Desc` as any)}</div>
|
|
</div>
|
|
<label className="toggle-switch" aria-label={t(`settings.sidebarLyricsStyle${key}` as any)}>
|
|
<input
|
|
type="checkbox"
|
|
checked={sidebarLyricsStyle === style}
|
|
onChange={e => setSidebarLyricsStyle(e.target.checked ? style : other)}
|
|
/>
|
|
<span className="toggle-track" />
|
|
</label>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</SettingsSubSection>
|
|
</>
|
|
);
|
|
}
|