more indication

This commit is contained in:
2026-02-20 22:42:15 -05:00
parent 1a5efceebd
commit 1e6618211a
5 changed files with 168 additions and 135 deletions

View File

@@ -28,6 +28,11 @@ export function SettingsPage() {
const { theme } = useTheme();
const nav = useNavigation();
// Helper function to check if a depth is active
const isActive = (depth: SettingsPaneType): boolean => {
return nav.activeDepth() === depth;
};
return (
<box flexDirection="column" gap={1} height="100%" width="100%">
<box flexDirection="row" gap={1}>
@@ -56,23 +61,23 @@ export function SettingsPage() {
<box
border
borderColor={theme.border}
borderColor={isActive(SettingsPaneType.SYNC) || isActive(SettingsPaneType.SOURCES) || isActive(SettingsPaneType.PREFERENCES) || isActive(SettingsPaneType.VISUALIZER) || isActive(SettingsPaneType.ACCOUNT) ? theme.accent : theme.border}
flexGrow={1}
padding={1}
flexDirection="column"
gap={1}
>
{nav.activeDepth === SettingsPaneType.SYNC && <SyncPanel />}
{nav.activeDepth === SettingsPaneType.SOURCES && (
{isActive(SettingsPaneType.SYNC) && <SyncPanel />}
{isActive(SettingsPaneType.SOURCES) && (
<SourceManager focused />
)}
{nav.activeDepth === SettingsPaneType.PREFERENCES && (
{isActive(SettingsPaneType.PREFERENCES) && (
<PreferencesPanel />
)}
{nav.activeDepth === SettingsPaneType.VISUALIZER && (
{isActive(SettingsPaneType.VISUALIZER) && (
<VisualizerSettings />
)}
{nav.activeDepth === SettingsPaneType.ACCOUNT && (
{isActive(SettingsPaneType.ACCOUNT) && (
<box flexDirection="column" gap={1}>
<text fg={theme.textMuted}>Account</text>
</box>