This commit is contained in:
2026-02-04 22:48:54 -05:00
parent 39a4f88496
commit c26150221a
12 changed files with 321 additions and 97 deletions

View File

@@ -76,55 +76,55 @@ export function PreferencesPanel() {
return (
<box flexDirection="column" gap={1}>
<text fg="gray">Preferences</text>
<text fg="var(--color-muted)">Preferences</text>
<box flexDirection="column" gap={1}>
<box flexDirection="row" gap={1} alignItems="center">
<text fg={focusField() === "theme" ? "cyan" : "gray"}>Theme:</text>
<text fg={focusField() === "theme" ? "var(--color-primary)" : "var(--color-muted)"}>Theme:</text>
<box border padding={0}>
<text fg="white">{THEME_LABELS.find((t) => t.value === settings().theme)?.label}</text>
<text fg="var(--color-text)">{THEME_LABELS.find((t) => t.value === settings().theme)?.label}</text>
</box>
<text fg="gray">[Left/Right]</text>
<text fg="var(--color-muted)">[Left/Right]</text>
</box>
<box flexDirection="row" gap={1} alignItems="center">
<text fg={focusField() === "font" ? "cyan" : "gray"}>Font Size:</text>
<text fg={focusField() === "font" ? "var(--color-primary)" : "var(--color-muted)"}>Font Size:</text>
<box border padding={0}>
<text fg="white">{settings().fontSize}px</text>
<text fg="var(--color-text)">{settings().fontSize}px</text>
</box>
<text fg="gray">[Left/Right]</text>
<text fg="var(--color-muted)">[Left/Right]</text>
</box>
<box flexDirection="row" gap={1} alignItems="center">
<text fg={focusField() === "speed" ? "cyan" : "gray"}>Playback:</text>
<text fg={focusField() === "speed" ? "var(--color-primary)" : "var(--color-muted)"}>Playback:</text>
<box border padding={0}>
<text fg="white">{settings().playbackSpeed}x</text>
<text fg="var(--color-text)">{settings().playbackSpeed}x</text>
</box>
<text fg="gray">[Left/Right]</text>
<text fg="var(--color-muted)">[Left/Right]</text>
</box>
<box flexDirection="row" gap={1} alignItems="center">
<text fg={focusField() === "explicit" ? "cyan" : "gray"}>Show Explicit:</text>
<text fg={focusField() === "explicit" ? "var(--color-primary)" : "var(--color-muted)"}>Show Explicit:</text>
<box border padding={0}>
<text fg={preferences().showExplicit ? "green" : "gray"}>
<text fg={preferences().showExplicit ? "var(--color-success)" : "var(--color-muted)"}>
{preferences().showExplicit ? "On" : "Off"}
</text>
</box>
<text fg="gray">[Space]</text>
<text fg="var(--color-muted)">[Space]</text>
</box>
<box flexDirection="row" gap={1} alignItems="center">
<text fg={focusField() === "auto" ? "cyan" : "gray"}>Auto Download:</text>
<text fg={focusField() === "auto" ? "var(--color-primary)" : "var(--color-muted)"}>Auto Download:</text>
<box border padding={0}>
<text fg={preferences().autoDownload ? "green" : "gray"}>
<text fg={preferences().autoDownload ? "var(--color-success)" : "var(--color-muted)"}>
{preferences().autoDownload ? "On" : "Off"}
</text>
</box>
<text fg="gray">[Space]</text>
<text fg="var(--color-muted)">[Space]</text>
</box>
</box>
<text fg="gray">Tab to move focus, Left/Right to adjust</text>
<text fg="var(--color-muted)">Tab to move focus, Left/Right to adjust</text>
</box>
)
}