checkpoint

2026-02-04 12:10:30 -05:00
parent b8549777ba
commit cdabf2c3e0
22 changed files with 1176 additions and 18 deletions
--- a/src/components/PreferencesPanel.tsx
+++ b/src/components/PreferencesPanel.tsx
@@ -0,0 +1,130 @@
+import { createSignal } from "solid-js"
+import { useKeyboard } from "@opentui/solid"
+import { useAppStore } from "../stores/app"
+import type { ThemeName } from "../types/settings"
+
+type FocusField = "theme" | "font" | "speed" | "explicit" | "auto"
+
+const THEME_LABELS: Array<{ value: ThemeName; label: string }> = [
+  { value: "system", label: "System" },
+  { value: "catppuccin", label: "Catppuccin" },
+  { value: "gruvbox", label: "Gruvbox" },
+  { value: "tokyo", label: "Tokyo" },
+  { value: "nord", label: "Nord" },
+  { value: "custom", label: "Custom" },
+]
+
+export function PreferencesPanel() {
+  const appStore = useAppStore()
+  const [focusField, setFocusField] = createSignal<FocusField>("theme")
+
+  const settings = () => appStore.state().settings
+  const preferences = () => appStore.state().preferences
+
+  const handleKey = (key: { name: string; shift?: boolean }) => {
+    if (key.name === "tab") {
+      const fields: FocusField[] = ["theme", "font", "speed", "explicit", "auto"]
+      const idx = fields.indexOf(focusField())
+      const next = key.shift
+        ? (idx - 1 + fields.length) % fields.length
+        : (idx + 1) % fields.length
+      setFocusField(fields[next])
+      return
+    }
+
+    if (key.name === "left" || key.name === "h") {
+      stepValue(-1)
+    }
+    if (key.name === "right" || key.name === "l") {
+      stepValue(1)
+    }
+    if (key.name === "space" || key.name === "enter") {
+      toggleValue()
+    }
+  }
+
+  const stepValue = (delta: number) => {
+    const field = focusField()
+    if (field === "theme") {
+      const idx = THEME_LABELS.findIndex((t) => t.value === settings().theme)
+      const next = (idx + delta + THEME_LABELS.length) % THEME_LABELS.length
+      appStore.setTheme(THEME_LABELS[next].value)
+      return
+    }
+    if (field === "font") {
+      const next = Math.min(20, Math.max(10, settings().fontSize + delta))
+      appStore.updateSettings({ fontSize: next })
+      return
+    }
+    if (field === "speed") {
+      const next = Math.min(2, Math.max(0.5, settings().playbackSpeed + delta * 0.1))
+      appStore.updateSettings({ playbackSpeed: Number(next.toFixed(1)) })
+    }
+  }
+
+  const toggleValue = () => {
+    const field = focusField()
+    if (field === "explicit") {
+      appStore.updatePreferences({ showExplicit: !preferences().showExplicit })
+    }
+    if (field === "auto") {
+      appStore.updatePreferences({ autoDownload: !preferences().autoDownload })
+    }
+  }
+
+  useKeyboard(handleKey)
+
+  return (
+    <box flexDirection="column" gap={1}>
+      <text fg="gray">Preferences</text>
+
+      <box flexDirection="column" gap={1}>
+        <box flexDirection="row" gap={1} alignItems="center">
+          <text fg={focusField() === "theme" ? "cyan" : "gray"}>Theme:</text>
+          <box border padding={0}>
+            <text fg="white">{THEME_LABELS.find((t) => t.value === settings().theme)?.label}</text>
+          </box>
+          <text fg="gray">[Left/Right]</text>
+        </box>
+
+        <box flexDirection="row" gap={1} alignItems="center">
+          <text fg={focusField() === "font" ? "cyan" : "gray"}>Font Size:</text>
+          <box border padding={0}>
+            <text fg="white">{settings().fontSize}px</text>
+          </box>
+          <text fg="gray">[Left/Right]</text>
+        </box>
+
+        <box flexDirection="row" gap={1} alignItems="center">
+          <text fg={focusField() === "speed" ? "cyan" : "gray"}>Playback:</text>
+          <box border padding={0}>
+            <text fg="white">{settings().playbackSpeed}x</text>
+          </box>
+          <text fg="gray">[Left/Right]</text>
+        </box>
+
+        <box flexDirection="row" gap={1} alignItems="center">
+          <text fg={focusField() === "explicit" ? "cyan" : "gray"}>Show Explicit:</text>
+          <box border padding={0}>
+            <text fg={preferences().showExplicit ? "green" : "gray"}>
+              {preferences().showExplicit ? "On" : "Off"}
+            </text>
+          </box>
+          <text fg="gray">[Space]</text>
+        </box>
+
+        <box flexDirection="row" gap={1} alignItems="center">
+          <text fg={focusField() === "auto" ? "cyan" : "gray"}>Auto Download:</text>
+          <box border padding={0}>
+            <text fg={preferences().autoDownload ? "green" : "gray"}>
+              {preferences().autoDownload ? "On" : "Off"}
+            </text>
+          </box>
+          <text fg="gray">[Space]</text>
+        </box>
+      </box>
+
+      <text fg="gray">Tab to move focus, Left/Right to adjust</text>
+    </box>
+  )
+}