{t('settings.addServerTitle')}
{blockPasswordReveal ? (
) : (
)}
{isEdit ? t('settings.userMgmtEditUserTitle') : t('settings.userMgmtAddUserTitle')}
set('userName', e.target.value)}
disabled={isEdit}
autoComplete="off"
aria-invalid={markInvalid && !form.userName.trim()}
style={markInvalid && !form.userName.trim() ? { borderColor: 'var(--danger)' } : undefined}
/>
set('name', e.target.value)}
autoComplete="off"
aria-invalid={markInvalid && !form.name.trim()}
style={markInvalid && !form.name.trim() ? { borderColor: 'var(--danger)' } : undefined}
/>
set('email', e.target.value)}
autoComplete="off"
/>
set('password', e.target.value)}
placeholder="••••••••"
autoComplete="new-password"
aria-invalid={markInvalid && !form.password.trim()}
style={{
paddingRight: '2.5rem',
...(markInvalid && !form.password.trim() ? { borderColor: 'var(--danger)' } : {}),
}}
/>
{isEdit && (
{t('settings.userMgmtPasswordEditHint')}
)}
{form.isAdmin ? (
{!form.isAdmin && !isEdit && onSaveAndGetMagic && shareServerUrl.trim() && ndToken.trim() && (
{t('settings.userMgmtLibrariesAdminHint')}
) : libraries.length === 0 ? (
{t('settings.userMgmtLibrariesEmpty')}
) : (
<>
{libraries.map(lib => (
))}
{form.libraryIds.length === 0 && (
{t('settings.userMgmtLibrariesValidation')}
)}
)}
{t('settings.userMgmtMagicStringPlaintextWarning')}
{t('settings.userMgmtMagicStringPasswordNavHint')}
{t('settings.userMgmtMagicStringPlaintextWarning')}
{t('settings.userMgmtTitle')}
{t('settings.userMgmtDesc')}
{loading && (
…
)}
{!loading && loadError && (
{t('settings.userMgmtLoadFriendly')}
{loadError}
{t('settings.userMgmtEmpty')}
) : (
{users.map(u => {
const isSelf = u.userName === currentUsername;
const libNames = u.isAdmin
? null
: u.libraryIds.length === 0
? t('settings.userMgmtNoLibraries')
: libraries.filter(l => u.libraryIds.includes(l.id)).map(l => l.name).join(', ');
const lastSeen = formatLastSeen(u.lastAccessAt, i18n.language, t('settings.userMgmtNeverSeen'));
const lastSeenAbsolute = u.lastAccessAt
? new Date(u.lastAccessAt).toLocaleString(i18n.language)
: '';
return (
)}
)}
{ if (!busy) setEditing(u); }}
onKeyDown={(e) => {
if ((e.key === 'Enter' || e.key === ' ') && !busy) {
e.preventDefault();
setEditing(u);
}
}}
style={{
padding: '6px 10px',
display: 'flex',
alignItems: 'center',
gap: 10,
cursor: busy ? 'default' : 'pointer',
}}
>
);
})}
!magicRowSubmitting && setMagicRowUser(null)}
role="dialog"
aria-modal="true"
style={{ alignItems: 'center', paddingTop: 0 }}
>
,
document.body,
)}
e.stopPropagation()}
style={{ maxWidth: '400px' }}
>
{t('settings.userMgmtMagicStringModalTitle')}
{t('settings.userMgmtMagicStringModalDesc', { username: magicRowUser.userName })}
{t('settings.userMgmtMagicStringPasswordNavHint')}
{t('settings.userMgmtMagicStringPlaintextWarning')}
setMagicRowPassword(e.target.value)}
autoComplete="off"
disabled={magicRowSubmitting}
/>
{t('settings.title')}
{!searchOpen ? (
) : (
setSearchQuery(e.target.value)}
placeholder={`${t('settings.searchPlaceholder')} (${IS_MACOS ? '⌘F' : 'Ctrl+F'})`}
aria-label={t('settings.searchPlaceholder')}
autoFocus
onKeyDown={e => {
if (e.key === 'Escape') {
setSearchQuery('');
setSearchOpen(false);
return;
}
if (searchResults.length === 0) return;
if (e.key === 'ArrowDown') {
e.preventDefault();
setSelectedResultIdx(i => Math.min(i + 1, searchResults.length - 1));
} else if (e.key === 'ArrowUp') {
e.preventDefault();
setSelectedResultIdx(i => Math.max(i - 1, 0));
} else if (e.key === 'Enter') {
e.preventDefault();
const hit = searchResults[selectedResultIdx];
if (!hit) return;
setSearchQuery('');
setSearchOpen(false);
setPendingFocusTitle(hit.title);
setActiveTab(hit.tab);
}
}}
/>
)}
{t('settings.searchNoResults')}
)}
{searchQuery && searchResults.length > 0 && (
-
{searchResults.map((hit, idx) => {
const tabLabelKey = TAB_LABEL_KEY[hit.tab];
const selected = idx === selectedResultIdx;
return (
- ); })}
{IS_MACOS ? (
{
const device = val || null;
setDeviceSwitching(true);
try {
await invoke('audio_set_device', { deviceName: device });
auth.setAudioOutputDevice(device);
} catch { /* device open failed — don't persist */ }
setDeviceSwitching(false);
}}
options={buildAudioDeviceSelectOptions(
audioDevices,
t('settings.audioOutputDeviceDefault'),
osDefaultAudioDeviceId,
t('settings.audioOutputDeviceOsDefaultNow'),
auth.audioOutputDevice,
t('settings.audioOutputDeviceNotInCurrentList'),
)}
/>
)}
{/* Native Hi-Res Playback */}
{t('settings.audioOutputDeviceMacNotice')}
) : (
<>
{t('settings.audioOutputDeviceDesc')}
{t('settings.hiResEnabled')}
{t('settings.hiResDesc')}
{/* Normalization */}
{auth.normalizationEngine === 'replaygain' && (
)}
{auth.normalizationEngine === 'loudness' && (
)}
{/* Crossfade */}
{auth.crossfadeEnabled && !auth.gaplessEnabled && (
{t('settings.normalization', { defaultValue: 'Normalization' })}
{t('settings.normalizationDesc')}
{t('settings.replayGainMode')}
{auth.replayGainMode === 'auto' && (
{t('settings.replayGainAutoDesc')}
)}
{t('settings.replayGainPreGain')}
auth.setReplayGainPreGainDb(Number(e.target.value))}
/>
{auth.replayGainPreGainDb > 0 ? `+${auth.replayGainPreGainDb}` : auth.replayGainPreGainDb} dB
{t('settings.replayGainPreGainDesc')}
{t('settings.replayGainFallback')}
auth.setReplayGainFallbackDb(Number(e.target.value))}
/>
{auth.replayGainFallbackDb > 0 ? `+${auth.replayGainFallbackDb}` : auth.replayGainFallbackDb} dB
{t('settings.replayGainFallbackDesc')}
{t('settings.loudnessTargetLufs')}
{t('settings.loudnessTargetLufsDesc')}
{t('settings.loudnessPreAnalysisAttenuation')}
auth.setLoudnessPreAnalysisAttenuationDb(Number(e.target.value))}
/>
{preAnalysisEffectiveDb} dB
{t('settings.loudnessPreAnalysisAttenuationDesc')}{' '}
{t('settings.loudnessPreAnalysisAttenuationRef', {
ref: auth.loudnessPreAnalysisAttenuationDb,
eff: preAnalysisEffectiveDb,
tgt: auth.loudnessTargetLufs,
})}
{t('settings.loudnessFirstPlayNote')}
{t('settings.crossfade')}
{auth.gaplessEnabled ? t('settings.notWithGapless') : t('settings.crossfadeDesc')}
auth.setCrossfadeSecs(parseFloat(e.target.value))}
style={{ flex: 1, minWidth: 80, maxWidth: 200 }}
id="crossfade-secs-slider"
/>
{t('settings.crossfadeSecs', { n: auth.crossfadeSecs.toFixed(1) })}
)}
{/* Gapless */}
{t('settings.gapless')}
{auth.crossfadeEnabled ? t('settings.notWithCrossfade') : t('settings.gaplessDesc')}
{t('settings.preservePlayNextOrder')}
{t('settings.preservePlayNextOrderDesc')}
{t('settings.trackPreviewsToggle')}
{t('settings.trackPreviewsDesc')}
{t('settings.trackPreviewLocationsTitle')}
{t('settings.trackPreviewLocationsDesc')}
{TRACK_PREVIEW_LOCATIONS.map((loc: TrackPreviewLocation) => (
))}
{t(`settings.trackPreviewLocation_${loc}`)}
{t('settings.trackPreviewStart')}
{t('settings.trackPreviewStartDesc')}
auth.setTrackPreviewStartRatio(parseFloat(e.target.value))}
style={{ flex: 1, minWidth: 80, maxWidth: 240 }}
aria-label={t('settings.trackPreviewStart')}
/>
{Math.round(auth.trackPreviewStartRatio * 100)}%
{t('settings.trackPreviewDuration')}
{t('settings.trackPreviewDurationDesc')}
auth.setTrackPreviewDurationSec(parseInt(e.target.value, 10))}
style={{ flex: 1, minWidth: 80, maxWidth: 240 }}
aria-label={t('settings.trackPreviewDuration')}
/>
{t('settings.trackPreviewDurationSecs', { n: auth.trackPreviewDurationSec })}
{(['classic', 'apple'] as const).map(style => {
const key = style === 'classic' ? 'Classic' : 'Apple';
const other = style === 'classic' ? 'apple' : 'classic';
return (
);
})}
)}
{/* ── Integrations ─────────────────────────────────────────────────────── */}
{activeTab === 'integrations' && (
<>
{t(`settings.sidebarLyricsStyle${key}` as any)}
{t(`settings.sidebarLyricsStyle${key}Desc` as any)}
{t('settings.integrationsPrivacyTitle')}
aus dem i18n-String — der Inhalt ist statisch
// und kommt nur aus unseren Locales, kein User-Input.
dangerouslySetInnerHTML={{ __html: t('settings.integrationsPrivacyBody') }}
/>
{auth.lastfmSessionKey ? (
{/* Discord Rich Presence */}
@{auth.lastfmUsername}
{lfmUserInfo && (
{t('settings.lfmScrobbles', { n: lfmUserInfo.playcount.toLocaleString() })}
{t('settings.lfmMemberSince', { year: new Date(lfmUserInfo.registeredAt * 1000).getFullYear() })}
)}
{t('settings.scrobbleEnabled')}
{t('settings.scrobbleDesc')}
{t('settings.lfmConnecting')}
{t('settings.lfmConnectDesc')}
{lfmState === 'error' && ({lfmError}
)}{t('settings.discordRichPresence')}
{t('settings.discordRichPresenceDesc')}
{t('settings.discordCoverNone')}
{t('settings.discordCoverServer')}
{t('settings.discordCoverApple')}
{t('settings.discordTemplates')}
{t('settings.discordTemplatesDesc')}
auth.setDiscordTemplateDetails(e.target.value)}
placeholder="{artist}"
/>
auth.setDiscordTemplateState(e.target.value)}
placeholder="{title}"
/>
auth.setDiscordTemplateLargeText(e.target.value)}
placeholder="{album}"
/>
{t('settings.enableBandsintown')}
{t('settings.enableBandsintownDesc')}
{t('settings.nowPlayingEnabled')}
{t('settings.nowPlayingEnabledDesc')}
{t('settings.randomMixBlacklistDesc')}
{t('settings.randomMixBlacklistTitle')}
{auth.customGenreBlacklist.length === 0 ? (
{t('settings.randomMixBlacklistEmpty')}
) : (
auth.customGenreBlacklist.map(genre => (
{genre}
))
)}
setNewGenre(e.target.value)}
onKeyDown={e => {
if (e.key === 'Enter' && newGenre.trim()) {
const trimmed = newGenre.trim();
if (!auth.customGenreBlacklist.includes(trimmed)) {
auth.setCustomGenreBlacklist([...auth.customGenreBlacklist, trimmed]);
}
setNewGenre('');
}
}}
placeholder={t('settings.randomMixBlacklistPlaceholder')}
style={{ fontSize: 13 }}
/>
{t('settings.luckyMixMenuTitle')}
{t('settings.luckyMixMenuDesc')}
{t('settings.randomMixHardcodedTitle')}
{AUDIOBOOK_GENRES_DISPLAY.map(genre => (
{genre}
))}
{t('settings.ratingsSkipStarTitle')}
{t('settings.ratingsSkipStarDesc')}
{auth.skipStarOnManualSkipsEnabled && (
<>
auth.setSkipStarManualSkipThreshold(Number(e.target.value))}
style={{ width: 72, padding: '6px 10px', fontSize: 13 }}
aria-label={t('settings.ratingsSkipStarThresholdLabel')}
/>
)}
{t('settings.ratingsMixFilterTitle')}
{t('settings.ratingsMixFilterDesc', {
mix: t('sidebar.randomMix'),
albums: t('sidebar.randomAlbums'),
})}
{([
{ key: 'song', label: t('settings.ratingsMixMinSong'), value: auth.mixMinRatingSong, set: auth.setMixMinRatingSong },
{ key: 'album', label: t('settings.ratingsMixMinAlbum'), value: auth.mixMinRatingAlbum, set: auth.setMixMinRatingAlbum },
{ key: 'artist', label: t('settings.ratingsMixMinArtist'), value: auth.mixMinRatingArtist, set: auth.setMixMinRatingArtist },
] as const).map(row => (
)}
{row.label}
))}
{t('settings.offlineDirDesc')}
{auth.offlineDownloadDir && (
)}
{auth.offlineDownloadDir && (
{t('settings.offlineDirHint')}
)}
{(imageCacheBytes !== null || offlineCacheBytes !== null) && (
{t('settings.cacheUsedImages')}
{imageCacheBytes !== null ? formatBytes(imageCacheBytes) : '…'}
{t('settings.cacheUsedOffline')}
{offlineCacheBytes !== null ? formatBytes(offlineCacheBytes) : '…'}
{t('settings.cacheMaxLabel')}
{
const v = Number(e.target.value);
if (v >= 100) auth.setMaxCacheMb(v);
}}
style={{ width: 80, padding: '4px 8px', fontSize: 13 }}
id="cache-size-input"
/>
MB
{showClearConfirm ? (
{t('settings.cacheClearWarning')}
{t('settings.preloadHotCacheMutualExclusive')}
{/* Preload mode */}
{t('settings.preloadMode')}
{t('settings.preloadModeDesc')}
{(['balanced', 'early', 'custom'] as const).map(mode => (
))}
{auth.preloadMode === 'custom' && (
auth.setPreloadCustomSeconds(parseInt(e.target.value))}
style={{ flex: 1, minWidth: 80, maxWidth: 200 }}
/>
{t('settings.preloadCustomSeconds', { n: auth.preloadCustomSeconds })}
)}
)}
{/* Hot Cache */}
{t('settings.hotCacheTitle')}
{t('settings.hotCacheDisclaimer')}
{auth.hotCacheDownloadDir && (
)}
{auth.hotCacheDownloadDir && (
{t('settings.hotCacheDirHint')}
)}
{t('settings.cacheUsedHot')}
{hotCacheBytes !== null ? formatBytes(hotCacheBytes) : '…'}
{t('settings.hotCacheTrackCount')}
{hotCacheTrackCount}
{t('settings.hotCacheMaxMb')}
auth.setHotCacheMaxMb(parseInt(e.target.value, 10))} style={{ flex: 1, minWidth: 80, maxWidth: 200 }} id="hot-cache-max-mb-slider" />
{snapHotCacheMb(auth.hotCacheMaxMb)} MB
{t('settings.hotCacheDebounce')}
auth.setHotCacheDebounceSec(parseInt(e.target.value, 10))} style={{ flex: 1, minWidth: 80, maxWidth: 200 }} id="hot-cache-debounce-slider" />
{Math.min(600, Math.max(0, auth.hotCacheDebounceSec)) === 0
? t('settings.hotCacheDebounceImmediate')
: t('settings.hotCacheDebounceSeconds', { n: Math.min(600, Math.max(0, auth.hotCacheDebounceSec)) })}
{t('settings.downloadsFolderDesc')}
{auth.downloadFolder && (
)}
{theme.enableThemeScheduler && (
theme.setTheme(v as any)} />
{t('settings.themeSchedulerActiveHint')}
)}
{t('settings.themeSchedulerEnable')}
{t('settings.themeSchedulerEnableSub')}
{t('settings.coverArtBackground')}
{t('settings.coverArtBackgroundSub')}
{t('settings.playlistCoverPhoto')}
{t('settings.playlistCoverPhotoSub')}
{t('settings.showBitrate')}
{t('settings.showBitrateSub')}
{t('settings.floatingPlayerBar')}
{t('settings.floatingPlayerBarSub')}
{t('settings.showArtistImages')}
{t('settings.showArtistImagesDesc')}
{t('settings.showOrbitTrigger')}
{t('settings.showOrbitTriggerDesc')}
{t('settings.preloadMiniPlayer')}
{t('settings.preloadMiniPlayerDesc')}
{t('settings.useCustomTitlebar')}
{t('settings.useCustomTitlebarDesc')}
{t('settings.uiScaleLabel')}
{Math.round(fontStore.uiScale * 100)}%
{(() => {
const presets = [80, 90, 100, 110, 125, 150];
const currentPct = Math.round(fontStore.uiScale * 100);
let idx = presets.indexOf(currentPct);
if (idx < 0) {
// Snap legacy off-preset values to the closest preset.
idx = presets.reduce((best, p, i) =>
Math.abs(p - currentPct) < Math.abs(presets[best] - currentPct) ? i : best, 0);
}
return (
<>
fontStore.setUiScale(presets[parseInt(e.target.value, 10)] / 100)}
className="ui-scale-slider"
/>
{presets.map(p => {
const active = currentPct === p;
return (
);
})}
);
})()}
{(
[
// Accessibility-first: OpenDyslexic at the top so dyslexic
// readers don't have to scroll past 14 sans-serifs to find it.
{ id: 'opendyslexic', label: 'OpenDyslexic', stack: "'OpenDyslexic', sans-serif", hint: t('settings.fontHintOpenDyslexic') },
{ id: 'inter', label: 'Inter', stack: "'Inter Variable', sans-serif" },
{ id: 'outfit', label: 'Outfit', stack: "'Outfit Variable', sans-serif" },
{ id: 'dm-sans', label: 'DM Sans', stack: "'DM Sans Variable', sans-serif" },
{ id: 'nunito', label: 'Nunito', stack: "'Nunito Variable', sans-serif" },
{ id: 'rubik', label: 'Rubik', stack: "'Rubik Variable', sans-serif" },
{ id: 'space-grotesk', label: 'Space Grotesk', stack: "'Space Grotesk Variable', sans-serif" },
{ id: 'figtree', label: 'Figtree', stack: "'Figtree Variable', sans-serif" },
{ id: 'manrope', label: 'Manrope', stack: "'Manrope Variable', sans-serif" },
{ id: 'plus-jakarta-sans', label: 'Plus Jakarta Sans', stack: "'Plus Jakarta Sans Variable', sans-serif" },
{ id: 'lexend', label: 'Lexend', stack: "'Lexend Variable', sans-serif" },
{ id: 'geist', label: 'Geist', stack: "'Geist Variable', sans-serif" },
{ id: 'jetbrains-mono', label: 'JetBrains Mono', stack: "'JetBrains Mono Variable', monospace" },
{ id: 'golos-text', label: 'Golos Text', stack: "'Golos Text Variable', sans-serif" },
{ id: 'unbounded', label: 'Unbounded', stack: "'Unbounded Variable', sans-serif" },
] as { id: FontId; label: string; stack: string; hint?: string }[]
).map(f => (
))}
{t('settings.fsShowArtistPortrait')}
{t('settings.fsShowArtistPortraitDesc')}
{t('settings.fsPortraitDim')}
{auth.fsPortraitDim}%
auth.setFsPortraitDim(parseInt(e.target.value, 10))}
className="ui-scale-slider"
/>
{t('settings.seekbarStyleDesc')}
{(['truewave', 'pseudowave', 'linedot', 'bar', 'thick', 'segmented', 'neon', 'pulsewave', 'particletrail', 'liquidfill', 'retrotape'] as SeekbarStyle[]).map(style => (
auth.setSeekbarStyle(style)}
/>
))}
{IN_APP_SHORTCUT_ACTIONS.map(({ id: action, getLabel }) => {
const label = getLabel(t);
const bound = kb.bindings[action];
const isListening = listeningFor === action;
return (
{label}
);
})}
{bound && !isListening && (
)}
{GLOBAL_SHORTCUT_ACTIONS.map(({ id: action, getLabel }) => {
const label = getLabel(t);
const bound = gs.shortcuts[action] ?? null;
const isListening = listeningForGlobal === action;
return (
{label}
);
})}
{bound && !isListening && (
)}
{t('settings.servers')}
{t('settings.serverCompatible')}
{auth.servers.length === 0 && !showAddForm ? (
{t('settings.noServers')}
) : (
{auth.servers.map((srv, srvIdx) => {
const isActive = srv.id === auth.activeServerId;
const status = connStatus[srv.id];
const isBefore = psyDragState.isDragging && serverDropTarget?.idx === srvIdx && serverDropTarget.before;
const isAfter = psyDragState.isDragging && serverDropTarget?.idx === srvIdx && !serverDropTarget.before;
return (
{
e.preventDefault();
void openUrl(AUDIOMUSE_NV_PLUGIN_URL);
}}
style={{ color: 'var(--accent)', textDecoration: 'underline' }}
/>
),
}}
/>
)}
);
})}
)}
{serverListDisplayLabel(srv, auth.servers)}
{isActive && (
{t('settings.serverActive')}
)}
{srv.url.startsWith('https://') && (
{status === 'ok' &&
{t('settings.audiomuseTitle')}
{!!auth.audiomuseNavidromeByServer[srv.id] && auth.audiomuseNavidromeIssueByServer[srv.id] && (
{showAddForm ? (
{t('settings.showTrayIcon')}
{t('settings.showTrayIconDesc')}
{t('settings.minimizeToTray')}
{t('settings.minimizeToTrayDesc')}
{t('settings.linuxWebkitSmoothScroll')}
{t('settings.linuxWebkitSmoothScrollDesc')}
{t('settings.loggingModeDesc')}
{t('settings.aboutDesc')}
{t('settings.aboutLicense')}
{t('settings.aboutLicenseText')}
Stack
{t('settings.aboutBuiltWith')}
{t('settings.aboutMaintainersLabel')}
{MAINTAINERS.map(m => (
))}
{t('settings.aboutReleaseNotesLabel')}
{t('settings.showChangelogOnUpdate')}
{t('settings.showChangelogOnUpdateDesc')}
{[...CONTRIBUTORS].sort((a, b) => b.contributions.length - a.contributions.length).map(c => (
))}
{ e.stopPropagation(); openUrl(`https://github.com/${c.github}`); }}
onKeyDown={e => {
if (e.key === 'Enter' || e.key === ' ') {
e.stopPropagation();
e.preventDefault();
openUrl(`https://github.com/${c.github}`);
}
}}
>
@{c.github}
v{c.since}
·
{t('settings.aboutContributorsCount', { count: c.contributions.length })}
-
{c.contributions.map(item =>
- {item} )}
{sections.map(sec => (
);
}
function SidebarGripHandle({ idx, section, label }: { idx: number; section: 'library' | 'system'; label: string }) {
const { t } = useTranslation();
const { onMouseDown } = useDragSource(() => ({
data: JSON.stringify({ type: 'sidebar_reorder', index: idx, section }),
label,
}));
return (
{SECTION_LABELS[sec.id]}
))}
{t('settings.lyricsSourcesTitle')}
{t('settings.lyricsSourcesDesc')}
{/* Mode switch — standard three-provider pipeline vs. YouLyPlus karaoke. YouLyPlus misses silently fall back to the standard pipeline. */}{t('settings.lyricsModeLyricsplus')}
{t('settings.lyricsModeLyricsplusDesc')}
{t('settings.lyricsModeStandard')}
{t('settings.lyricsModeStandardDesc')}
{lyricsSources.map((src, i) => {
const label = t(LYRICS_SOURCE_LABEL_KEYS[src.id]);
const isBefore = isPsyDragging && dropTarget?.idx === i && dropTarget.before;
const isAfter = isPsyDragging && dropTarget?.idx === i && !dropTarget.before;
return (
)}
{/* Static-only toggle — suppresses line/word tracking in both modes. */}
{t('settings.lyricsStaticOnly')}
{t('settings.lyricsStaticOnlyDesc')}
{t('settings.randomNavSplitTitle')}
{t('settings.randomNavSplitDesc')}
{/* Library block */}
{/* System block */}
);
}
// ── Artist Page Sections Customizer ────────────────────────────────────────
const ARTIST_SECTION_LABEL_KEYS: Record{t('sidebar.library')}
{libraryItems.map((cfg, i) => renderRow(cfg, i, 'library'))}
{t('sidebar.system')}
{systemItems.map((cfg, i) => renderRow(cfg, i, 'system'))}
{t('settings.sidebarFixed')}: {t('sidebar.nowPlaying')}, {t('sidebar.settings')}
{t('settings.artistLayoutDesc')}
{sections.map((section: ArtistSectionConfig, i) => {
const label = t(ARTIST_SECTION_LABEL_KEYS[section.id]);
const isBefore = isPsyDragging && dropTarget?.idx === i && dropTarget.before;
const isAfter = isPsyDragging && dropTarget?.idx === i && !dropTarget.before;
return (
);
}
function BackupSection() {
const { t } = useTranslation();
const [exporting, setExporting] = useState(false);
const [importing, setImporting] = useState(false);
const handleExport = async () => {
setExporting(true);
try {
const path = await exportBackup();
if (path) showToast(t('settings.backupSuccess'), 3000, 'info');
} catch (e) {
console.error('Export failed', e);
showToast(t('settings.backupImportError'), 4000, 'error');
} finally {
setExporting(false);
}
};
const handleImport = async () => {
if (!window.confirm(t('settings.backupImportConfirm'))) return;
setImporting(true);
try {
await importBackup();
// importBackup reloads the page — this toast will briefly show before reload
showToast(t('settings.backupImportSuccess'), 3000, 'info');
} catch (e) {
console.error('Import failed', e);
showToast(t('settings.backupImportError'), 4000, 'error');
setImporting(false);
}
};
return (
{t('settings.backupTitle')}
{t('settings.backupExport')}
{t('settings.backupExportDesc')}
{t('settings.backupImport')}
{t('settings.backupImportDesc')}