mirror of
https://github.com/Psychotoxical/psysonic.git
synced 2026-07-22 07:15:47 +00:00
Frank Stellmacher
cec175c4bc
Pull the 11 self-contained components at the bottom of Settings.tsx out into `src/components/settings/`: - `HomeCustomizer.tsx` — home-page section visibility toggles. - `QueueToolbarCustomizer.tsx` — drag-to-reorder queue toolbar buttons + per-button visibility. Includes the GripHandle + button icons/labels tables. - `SidebarCustomizer.tsx` — sidebar nav drag-reorder for library + system blocks. Includes the GripHandle and the random-nav-mode toggle. - `LyricsSourcesCustomizer.tsx` — lyrics fetch pipeline UI (mode switch + drag-reorder source list + static-only toggle). - `ArtistLayoutCustomizer.tsx` — artist page section drag-reorder. - `BackupSection.tsx` — export/import buttons with toast feedback. - `ServerGripHandle.tsx` — single-purpose grip handle used by the servers tab in the main Settings body. Each component owns its own DnD plumbing, label tables and drop target types. Settings.tsx now only imports the components; one local `ServerDropTarget` type kept inside `Settings()` because the main component still owns the server-list DnD state. Pure code-move. Settings.tsx: 5298 → 4568 LOC (−730). 13 unused imports trimmed (lucide icons, store types, shallow, layout helpers).
35 lines
1.2 KiB
TypeScript
35 lines
1.2 KiB
TypeScript
import { useTranslation } from 'react-i18next';
|
|
import { useHomeStore, HomeSectionId } from '../../store/homeStore';
|
|
|
|
export function HomeCustomizer() {
|
|
const { t } = useTranslation();
|
|
const { sections, toggleSection } = useHomeStore();
|
|
|
|
const SECTION_LABELS: Record<HomeSectionId, string> = {
|
|
hero: t('home.hero'),
|
|
recent: t('home.recent'),
|
|
discover: t('home.discover'),
|
|
becauseYouLike: t('home.becauseYouLike'),
|
|
discoverSongs: t('home.discoverSongs'),
|
|
discoverArtists: t('home.discoverArtists'),
|
|
recentlyPlayed: t('home.recentlyPlayed'),
|
|
starred: t('home.starred'),
|
|
mostPlayed: t('home.mostPlayed'),
|
|
losslessAlbums: t('home.losslessAlbums'),
|
|
};
|
|
|
|
return (
|
|
<div className="settings-card" style={{ padding: '4px 0' }}>
|
|
{sections.map(sec => (
|
|
<div key={sec.id} className="sidebar-customizer-row">
|
|
<span style={{ flex: 1, fontSize: 14 }}>{SECTION_LABELS[sec.id]}</span>
|
|
<label className="toggle-switch" aria-label={SECTION_LABELS[sec.id]}>
|
|
<input type="checkbox" checked={sec.visible} onChange={() => toggleSection(sec.id)} />
|
|
<span className="toggle-track" />
|
|
</label>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|