cooking

src/pages/Settings/SettingsPage.tsx

@@ -0,0 +1,120 @@
+import { createSignal, For } from "solid-js";
+import { useKeyboard } from "@opentui/solid";
+import { SourceManager } from "./SourceManager";
+import { useTheme } from "@/context/ThemeContext";
+import { PreferencesPanel } from "./PreferencesPanel";
+import { SyncPanel } from "./SyncPanel";
+import { VisualizerSettings } from "./VisualizerSettings";
+
+type SettingsScreenProps = {
+  accountLabel: string;
+  accountStatus: "signed-in" | "signed-out";
+  onOpenAccount?: () => void;
+  onExit?: () => void;
+};
+
+type SectionId = "sync" | "sources" | "preferences" | "visualizer" | "account";
+
+const SECTIONS: Array<{ id: SectionId; label: string }> = [
+  { id: "sync", label: "Sync" },
+  { id: "sources", label: "Sources" },
+  { id: "preferences", label: "Preferences" },
+  { id: "visualizer", label: "Visualizer" },
+  { id: "account", label: "Account" },
+];
+
+export function SettingsPage(props: SettingsScreenProps) {
+  const { theme } = useTheme();
+  const [activeSection, setActiveSection] = createSignal<SectionId>("sync");
+
+  useKeyboard((key) => {
+    if (key.name === "escape") {
+      props.onExit?.();
+      return;
+    }
+
+    if (key.name === "tab") {
+      const idx = SECTIONS.findIndex((s) => s.id === activeSection());
+      const next = key.shift
+        ? (idx - 1 + SECTIONS.length) % SECTIONS.length
+        : (idx + 1) % SECTIONS.length;
+      setActiveSection(SECTIONS[next].id);
+      return;
+    }
+
+    if (key.name === "1") setActiveSection("sync");
+    if (key.name === "2") setActiveSection("sources");
+    if (key.name === "3") setActiveSection("preferences");
+    if (key.name === "4") setActiveSection("visualizer");
+    if (key.name === "5") setActiveSection("account");
+  });
+
+  return (
+    <box flexDirection="column" gap={1} height="100%">
+      <box
+        flexDirection="row"
+        justifyContent="space-between"
+        alignItems="center"
+      >
+        <text>
+          <strong>Settings</strong>
+        </text>
+        <text fg={theme.textMuted}>
+          [Tab] Switch section | 1-5 jump | Esc up
+        </text>
+      </box>
+
+      <box flexDirection="row" gap={1}>
+        <For each={SECTIONS}>
+          {(section, index) => (
+            <box
+              border
+              padding={0}
+              backgroundColor={
+                activeSection() === section.id ? theme.primary : undefined
+              }
+              onMouseDown={() => setActiveSection(section.id)}
+            >
+              <text
+                fg={
+                  activeSection() === section.id ? theme.text : theme.textMuted
+                }
+              >
+                [{index() + 1}] {section.label}
+              </text>
+            </box>
+          )}
+        </For>
+      </box>
+
+      <box border flexGrow={1} padding={1} flexDirection="column" gap={1}>
+        {activeSection() === "sync" && <SyncPanel />}
+        {activeSection() === "sources" && <SourceManager focused />}
+        {activeSection() === "preferences" && <PreferencesPanel />}
+        {activeSection() === "visualizer" && <VisualizerSettings />}
+        {activeSection() === "account" && (
+          <box flexDirection="column" gap={1}>
+            <text fg={theme.textMuted}>Account</text>
+            <box flexDirection="row" gap={2} alignItems="center">
+              <text fg={theme.textMuted}>Status:</text>
+              <text
+                fg={
+                  props.accountStatus === "signed-in"
+                    ? theme.success
+                    : theme.warning
+                }
+              >
+                {props.accountLabel}
+              </text>
+            </box>
+            <box border padding={0} onMouseDown={() => props.onOpenAccount?.()}>
+              <text fg={theme.primary}>[A] Manage Account</text>
+            </box>
+          </box>
+        )}
+      </box>
+
+      <text fg={theme.textMuted}>Enter to dive | Esc up</text>
+    </box>
+  );
+}