cooking

src/pages/Settings/ExportDialog.tsx

@@ -0,0 +1,36 @@
+const createSignal = <T,>(value: T): [() => T, (next: T) => void] => {
+  let current = value
+  return [() => current, (next) => {
+    current = next
+  }]
+}
+
+import { SyncStatus } from "./SyncStatus"
+
+export function ExportDialog() {
+  const filename = createSignal("podcast-sync.json")
+  const format = createSignal<"json" | "xml">("json")
+
+  return (
+    <box border title="Export" style={{ padding: 1, flexDirection: "column", gap: 1 }}>
+      <box style={{ flexDirection: "row", gap: 1 }}>
+        <text>File:</text>
+        <input value={filename[0]()} onInput={filename[1]} style={{ width: 30 }} />
+      </box>
+      <box style={{ flexDirection: "row", gap: 1 }}>
+        <text>Format:</text>
+        <tab_select
+          options={[
+            { name: "JSON", description: "Portable" },
+            { name: "XML", description: "Structured" },
+          ]}
+          onSelect={(index) => format[1](index === 0 ? "json" : "xml")}
+        />
+      </box>
+      <box border>
+        <text>Export {format[0]()} to {filename[0]()}</text>
+      </box>
+      <SyncStatus />
+    </box>
+  )
+}

src/pages/Settings/FilePicker.tsx

@@ -0,0 +1,22 @@
+import { detectFormat } from "@/utils/file-detector";
+
+type FilePickerProps = {
+  value: string;
+  onChange: (value: string) => void;
+};
+
+export function FilePicker(props: FilePickerProps) {
+  const format = detectFormat(props.value);
+
+  return (
+    <box style={{ flexDirection: "column", gap: 1 }}>
+      <input
+        value={props.value}
+        onInput={props.onChange}
+        placeholder="/path/to/sync-file.json"
+        style={{ width: 40 }}
+      />
+      <text>Format: {format}</text>
+    </box>
+  );
+}

src/pages/Settings/ImportDialog.tsx

@@ -0,0 +1,21 @@
+const createSignal = <T,>(value: T): [() => T, (next: T) => void] => {
+  let current = value
+  return [() => current, (next) => {
+    current = next
+  }]
+}
+
+import { FilePicker } from "./FilePicker"
+
+export function ImportDialog() {
+  const filePath = createSignal("")
+
+  return (
+    <box border title="Import" style={{ padding: 1, flexDirection: "column", gap: 1 }}>
+      <FilePicker value={filePath[0]()} onChange={filePath[1]} />
+      <box border>
+        <text>Import selected file</text>
+      </box>
+    </box>
+  )
+}

src/pages/Settings/LoginScreen.tsx

@@ -0,0 +1,175 @@
+/**
+ * Login screen component for PodTUI
+ * Email/password login with links to code validation and OAuth
+ */
+
+import { createSignal } from "solid-js";
+import { useAuthStore } from "@/stores/auth";
+import { useTheme } from "@/context/ThemeContext";
+import { AUTH_CONFIG } from "@/config/auth";
+
+interface LoginScreenProps {
+  focused?: boolean;
+  onNavigateToCode?: () => void;
+  onNavigateToOAuth?: () => void;
+}
+
+type FocusField = "email" | "password" | "submit" | "code" | "oauth";
+
+export function LoginScreen(props: LoginScreenProps) {
+  const auth = useAuthStore();
+  const { theme } = useTheme();
+  const [email, setEmail] = createSignal("");
+  const [password, setPassword] = createSignal("");
+  const [focusField, setFocusField] = createSignal<FocusField>("email");
+  const [emailError, setEmailError] = createSignal<string | null>(null);
+  const [passwordError, setPasswordError] = createSignal<string | null>(null);
+
+  const fields: FocusField[] = ["email", "password", "submit", "code", "oauth"];
+
+  const validateEmail = (value: string): boolean => {
+    if (!value) {
+      setEmailError("Email is required");
+      return false;
+    }
+    if (!AUTH_CONFIG.email.pattern.test(value)) {
+      setEmailError("Invalid email format");
+      return false;
+    }
+    setEmailError(null);
+    return true;
+  };
+
+  const validatePassword = (value: string): boolean => {
+    if (!value) {
+      setPasswordError("Password is required");
+      return false;
+    }
+    if (value.length < AUTH_CONFIG.password.minLength) {
+      setPasswordError(`Minimum ${AUTH_CONFIG.password.minLength} characters`);
+      return false;
+    }
+    setPasswordError(null);
+    return true;
+  };
+
+  const handleSubmit = async () => {
+    const isEmailValid = validateEmail(email());
+    const isPasswordValid = validatePassword(password());
+
+    if (!isEmailValid || !isPasswordValid) {
+      return;
+    }
+
+    await auth.login({ email: email(), password: password() });
+  };
+
+  const handleKeyPress = (key: { name: string; shift?: boolean }) => {
+    if (key.name === "tab") {
+      const currentIndex = fields.indexOf(focusField());
+      const nextIndex = key.shift
+        ? (currentIndex - 1 + fields.length) % fields.length
+        : (currentIndex + 1) % fields.length;
+      setFocusField(fields[nextIndex]);
+    } else if (key.name === "return") {
+      if (focusField() === "submit") {
+        handleSubmit();
+      } else if (focusField() === "code" && props.onNavigateToCode) {
+        props.onNavigateToCode();
+      } else if (focusField() === "oauth" && props.onNavigateToOAuth) {
+        props.onNavigateToOAuth();
+      }
+    }
+  };
+
+  return (
+    <box flexDirection="column" border padding={2} gap={1}>
+      <text>
+        <strong>Sign In</strong>
+      </text>
+
+      <box height={1} />
+
+      {/* Email field */}
+      <box flexDirection="column" gap={0}>
+        <text fg={focusField() === "email" ? theme.primary : undefined}>
+          Email:
+        </text>
+        <input
+          value={email()}
+          onInput={setEmail}
+          placeholder="your@email.com"
+          focused={props.focused && focusField() === "email"}
+          width={30}
+        />
+        {emailError() && <text fg={theme.error}>{emailError()}</text>}
+      </box>
+
+      {/* Password field */}
+      <box flexDirection="column" gap={0}>
+        <text fg={focusField() === "password" ? theme.primary : undefined}>
+          Password:
+        </text>
+        <input
+          value={password()}
+          onInput={setPassword}
+          placeholder="********"
+          focused={props.focused && focusField() === "password"}
+          width={30}
+        />
+        {passwordError() && <text fg={theme.error}>{passwordError()}</text>}
+      </box>
+
+      <box height={1} />
+
+      {/* Submit button */}
+      <box flexDirection="row" gap={2}>
+        <box
+          border
+          padding={1}
+          backgroundColor={
+            focusField() === "submit" ? theme.primary : undefined
+          }
+        >
+          <text fg={focusField() === "submit" ? theme.text : undefined}>
+            {auth.isLoading ? "Signing in..." : "[Enter] Sign In"}
+          </text>
+        </box>
+      </box>
+
+      {/* Auth error message */}
+      {auth.error && <text fg={theme.error}>{auth.error.message}</text>}
+
+      <box height={1} />
+
+      {/* Alternative auth options */}
+      <text fg={theme.textMuted}>Or authenticate with:</text>
+
+      <box flexDirection="row" gap={2}>
+        <box
+          border
+          padding={1}
+          backgroundColor={focusField() === "code" ? theme.primary : undefined}
+        >
+          <text fg={focusField() === "code" ? theme.accent : theme.textMuted}>
+            [C] Sync Code
+          </text>
+        </box>
+
+        <box
+          border
+          padding={1}
+          backgroundColor={focusField() === "oauth" ? theme.primary : undefined}
+        >
+          <text fg={focusField() === "oauth" ? theme.accent : theme.textMuted}>
+            [O] OAuth Info
+          </text>
+        </box>
+      </box>
+
+      <box height={1} />
+
+      <text fg={theme.textMuted}>Tab to navigate, Enter to select</text>
+    </box>
+  );
+}

src/pages/Settings/OAuthPlaceholder.tsx

@@ -0,0 +1,125 @@
+/**
+ * OAuth placeholder component for PodTUI
+ * Displays OAuth limitations and alternative authentication methods
+ */
+
+import { createSignal } from "solid-js";
+import { OAUTH_PROVIDERS, OAUTH_LIMITATION_MESSAGE } from "@/config/auth";
+
+interface OAuthPlaceholderProps {
+  focused?: boolean;
+  onBack?: () => void;
+  onNavigateToCode?: () => void;
+}
+
+type FocusField = "code" | "back";
+
+export function OAuthPlaceholder(props: OAuthPlaceholderProps) {
+  const [focusField, setFocusField] = createSignal<FocusField>("code");
+
+  const fields: FocusField[] = ["code", "back"];
+
+  const handleKeyPress = (key: { name: string; shift?: boolean }) => {
+    if (key.name === "tab") {
+      const currentIndex = fields.indexOf(focusField());
+      const nextIndex = key.shift
+        ? (currentIndex - 1 + fields.length) % fields.length
+        : (currentIndex + 1) % fields.length;
+      setFocusField(fields[nextIndex]);
+    } else if (key.name === "return") {
+      if (focusField() === "code" && props.onNavigateToCode) {
+        props.onNavigateToCode();
+      } else if (focusField() === "back" && props.onBack) {
+        props.onBack();
+      }
+    } else if (key.name === "escape" && props.onBack) {
+      props.onBack();
+    }
+  };
+
+  return (
+    <box flexDirection="column" border padding={2} gap={1}>
+      <text>
+        <strong>OAuth Authentication</strong>
+      </text>
+
+      <box height={1} />
+
+      {/* OAuth providers list */}
+      <text fg="cyan">Available OAuth Providers:</text>
+
+      <box flexDirection="column" gap={0} paddingLeft={2}>
+        {OAUTH_PROVIDERS.map((provider) => (
+          <box flexDirection="row" gap={1}>
+            <text fg={provider.enabled ? "green" : "gray"}>
+              {provider.enabled ? "[+]" : "[-]"} {provider.name}
+            </text>
+            <text fg="gray">- {provider.description}</text>
+          </box>
+        ))}
+      </box>
+
+      <box height={1} />
+
+      {/* Limitation message */}
+      <box border padding={1} borderColor="yellow">
+        <text fg="yellow">Terminal Limitations</text>
+      </box>
+
+      <box paddingLeft={1}>
+        {OAUTH_LIMITATION_MESSAGE.split("\n").map((line) => (
+          <text fg="gray">{line}</text>
+        ))}
+      </box>
+
+      <box height={1} />
+
+      {/* Alternative options */}
+      <text fg="cyan">Recommended Alternatives:</text>
+
+      <box flexDirection="column" gap={0} paddingLeft={2}>
+        <box flexDirection="row" gap={1}>
+          <text fg="green">[1]</text>
+          <text fg="white">Use a sync code from the web portal</text>
+        </box>
+        <box flexDirection="row" gap={1}>
+          <text fg="green">[2]</text>
+          <text fg="white">Use email/password authentication</text>
+        </box>
+        <box flexDirection="row" gap={1}>
+          <text fg="green">[3]</text>
+          <text fg="white">Use file-based sync (no account needed)</text>
+        </box>
+      </box>
+
+      <box height={1} />
+
+      {/* Action buttons */}
+      <box flexDirection="row" gap={2}>
+        <box
+          border
+          padding={1}
+          backgroundColor={focusField() === "code" ? "#333" : undefined}
+        >
+          <text fg={focusField() === "code" ? "cyan" : undefined}>
+            [C] Enter Sync Code
+          </text>
+        </box>
+
+        <box
+          border
+          padding={1}
+          backgroundColor={focusField() === "back" ? "#333" : undefined}
+        >
+          <text fg={focusField() === "back" ? "yellow" : "gray"}>
+            [Esc] Back to Login
+          </text>
+        </box>
+      </box>
+
+      <box height={1} />
+
+      <text fg="gray">Tab to navigate, Enter to select, Esc to go back</text>
+    </box>
+  );
+}

src/pages/Settings/PreferencesPanel.tsx

@@ -0,0 +1,159 @@
+import { createSignal } from "solid-js";
+import { useKeyboard } from "@opentui/solid";
+import { useAppStore } from "@/stores/app";
+import { useTheme } from "@/context/ThemeContext";
+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 { theme } = useTheme();
+  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 === "return") {
+      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={theme.textMuted}>Preferences</text>
+
+      <box flexDirection="column" gap={1}>
+        <box flexDirection="row" gap={1} alignItems="center">
+          <text fg={focusField() === "theme" ? theme.primary : theme.textMuted}>
+            Theme:
+          </text>
+          <box border padding={0}>
+            <text fg={theme.text}>
+              {THEME_LABELS.find((t) => t.value === settings().theme)?.label}
+            </text>
+          </box>
+          <text fg={theme.textMuted}>[Left/Right]</text>
+        </box>
+
+        <box flexDirection="row" gap={1} alignItems="center">
+          <text fg={focusField() === "font" ? theme.primary : theme.textMuted}>
+            Font Size:
+          </text>
+          <box border padding={0}>
+            <text fg={theme.text}>{settings().fontSize}px</text>
+          </box>
+          <text fg={theme.textMuted}>[Left/Right]</text>
+        </box>
+
+        <box flexDirection="row" gap={1} alignItems="center">
+          <text fg={focusField() === "speed" ? theme.primary : theme.textMuted}>
+            Playback:
+          </text>
+          <box border padding={0}>
+            <text fg={theme.text}>{settings().playbackSpeed}x</text>
+          </box>
+          <text fg={theme.textMuted}>[Left/Right]</text>
+        </box>
+
+        <box flexDirection="row" gap={1} alignItems="center">
+          <text
+            fg={focusField() === "explicit" ? theme.primary : theme.textMuted}
+          >
+            Show Explicit:
+          </text>
+          <box border padding={0}>
+            <text
+              fg={preferences().showExplicit ? theme.success : theme.textMuted}
+            >
+              {preferences().showExplicit ? "On" : "Off"}
+            </text>
+          </box>
+          <text fg={theme.textMuted}>[Space]</text>
+        </box>
+
+        <box flexDirection="row" gap={1} alignItems="center">
+          <text fg={focusField() === "auto" ? theme.primary : theme.textMuted}>
+            Auto Download:
+          </text>
+          <box border padding={0}>
+            <text
+              fg={preferences().autoDownload ? theme.success : theme.textMuted}
+            >
+              {preferences().autoDownload ? "On" : "Off"}
+            </text>
+          </box>
+          <text fg={theme.textMuted}>[Space]</text>
+        </box>
+      </box>
+
+      <text fg={theme.textMuted}>Tab to move focus, Left/Right to adjust</text>
+    </box>
+  );
+}

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>
+  );
+}

src/pages/Settings/SourceManager.tsx

@@ -0,0 +1,343 @@
+/**
+ * Source management component for PodTUI
+ * Add, remove, and configure podcast sources
+ */
+
+import { createSignal, For } from "solid-js";
+import { useFeedStore } from "@/stores/feed";
+import { useTheme } from "@/context/ThemeContext";
+import { SourceType } from "@/types/source";
+import type { PodcastSource } from "@/types/source";
+
+interface SourceManagerProps {
+  focused?: boolean;
+  onClose?: () => void;
+}
+
+type FocusArea = "list" | "add" | "url" | "country" | "explicit" | "language";
+
+export function SourceManager(props: SourceManagerProps) {
+  const feedStore = useFeedStore();
+  const { theme } = useTheme();
+  const [selectedIndex, setSelectedIndex] = createSignal(0);
+  const [focusArea, setFocusArea] = createSignal<FocusArea>("list");
+  const [newSourceUrl, setNewSourceUrl] = createSignal("");
+  const [newSourceName, setNewSourceName] = createSignal("");
+  const [error, setError] = createSignal<string | null>(null);
+
+  const sources = () => feedStore.sources();
+
+  const handleKeyPress = (key: { name: string; shift?: boolean }) => {
+    if (key.name === "escape") {
+      if (focusArea() !== "list") {
+        setFocusArea("list");
+        setError(null);
+      } else if (props.onClose) {
+        props.onClose();
+      }
+      return;
+    }
+
+    if (key.name === "tab") {
+      const areas: FocusArea[] = [
+        "list",
+        "country",
+        "language",
+        "explicit",
+        "add",
+        "url",
+      ];
+      const idx = areas.indexOf(focusArea());
+      const nextIdx = key.shift
+        ? (idx - 1 + areas.length) % areas.length
+        : (idx + 1) % areas.length;
+      setFocusArea(areas[nextIdx]);
+      return;
+    }
+
+    if (focusArea() === "list") {
+      if (key.name === "up" || key.name === "k") {
+        setSelectedIndex((i) => Math.max(0, i - 1));
+      } else if (key.name === "down" || key.name === "j") {
+        setSelectedIndex((i) => Math.min(sources().length - 1, i + 1));
+      } else if (
+        key.name === "return" ||
+        key.name === "space"
+      ) {
+        const source = sources()[selectedIndex()];
+        if (source) {
+          feedStore.toggleSource(source.id);
+        }
+      } else if (key.name === "d" || key.name === "delete") {
+        const source = sources()[selectedIndex()];
+        if (source) {
+          const removed = feedStore.removeSource(source.id);
+          if (!removed) {
+            setError("Cannot remove default sources");
+          }
+        }
+      } else if (key.name === "a") {
+        setFocusArea("add");
+      }
+    }
+
+    if (focusArea() === "country") {
+      if (
+        key.name === "enter" ||
+        key.name === "return" ||
+        key.name === "space"
+      ) {
+        const source = sources()[selectedIndex()];
+        if (source && source.type === SourceType.API) {
+          const next = source.country === "US" ? "GB" : "US";
+          feedStore.updateSource(source.id, { country: next });
+        }
+      }
+    }
+
+    if (focusArea() === "explicit") {
+      if (
+        key.name === "return" ||
+        key.name === "space"
+      ) {
+        const source = sources()[selectedIndex()];
+        if (source && source.type === SourceType.API) {
+          feedStore.updateSource(source.id, {
+            allowExplicit: !source.allowExplicit,
+          });
+        }
+      }
+    }
+
+    if (focusArea() === "language") {
+      if (
+        key.name === "return" ||
+        key.name === "space"
+      ) {
+        const source = sources()[selectedIndex()];
+        if (source && source.type === SourceType.API) {
+          const next = source.language === "ja_jp" ? "en_us" : "ja_jp";
+          feedStore.updateSource(source.id, { language: next });
+        }
+      }
+    }
+  };
+
+  const handleAddSource = () => {
+    const url = newSourceUrl().trim();
+    const name = newSourceName().trim() || `Custom Source`;
+
+    if (!url) {
+      setError("URL is required");
+      return;
+    }
+
+    try {
+      new URL(url);
+    } catch {
+      setError("Invalid URL format");
+      return;
+    }
+
+    feedStore.addSource({
+      name,
+      type: "rss" as SourceType,
+      baseUrl: url,
+      enabled: true,
+      description: `Custom RSS feed: ${url}`,
+    });
+
+    setNewSourceUrl("");
+    setNewSourceName("");
+    setFocusArea("list");
+    setError(null);
+  };
+
+  const getSourceIcon = (source: PodcastSource) => {
+    if (source.type === SourceType.API) return "[API]";
+    if (source.type === SourceType.RSS) return "[RSS]";
+    return "[?]";
+  };
+
+  const selectedSource = () => sources()[selectedIndex()];
+  const isApiSource = () => selectedSource()?.type === SourceType.API;
+  const sourceCountry = () => selectedSource()?.country || "US";
+  const sourceExplicit = () => selectedSource()?.allowExplicit !== false;
+  const sourceLanguage = () => selectedSource()?.language || "en_us";
+
+  return (
+    <box flexDirection="column" border padding={1} gap={1}>
+      <box flexDirection="row" justifyContent="space-between">
+        <text>
+          <strong>Podcast Sources</strong>
+        </text>
+        <box border padding={0} onMouseDown={props.onClose}>
+          <text fg={theme.primary}>[Esc] Close</text>
+        </box>
+      </box>
+
+      <text fg={theme.textMuted}>Manage where to search for podcasts</text>
+
+      {/* Source list */}
+      <box border padding={1} flexDirection="column" gap={1}>
+        <text fg={focusArea() === "list" ? theme.primary : theme.textMuted}>
+          Sources:
+        </text>
+        <scrollbox height={6}>
+          <For each={sources()}>
+            {(source, index) => (
+              <box
+                flexDirection="row"
+                gap={1}
+                padding={0}
+                backgroundColor={
+                  focusArea() === "list" && index() === selectedIndex()
+                    ? theme.primary
+                    : undefined
+                }
+                onMouseDown={() => {
+                  setSelectedIndex(index());
+                  setFocusArea("list");
+                  feedStore.toggleSource(source.id);
+                }}
+              >
+                <text
+                  fg={
+                    focusArea() === "list" && index() === selectedIndex()
+                      ? theme.primary
+                      : theme.textMuted
+                  }
+                >
+                  {focusArea() === "list" && index() === selectedIndex()
+                    ? ">"
+                    : " "}
+                </text>
+                <text fg={source.enabled ? theme.success : theme.error}>
+                  {source.enabled ? "[x]" : "[ ]"}
+                </text>
+                <text fg={theme.accent}>{getSourceIcon(source)}</text>
+                <text
+                  fg={
+                    focusArea() === "list" && index() === selectedIndex()
+                      ? theme.text
+                      : undefined
+                  }
+                >
+                  {source.name}
+                </text>
+              </box>
+            )}
+          </For>
+        </scrollbox>
+        <text fg={theme.textMuted}>
+          Space/Enter to toggle, d to delete, a to add
+        </text>
+
+        {/* API settings */}
+        <box flexDirection="column" gap={1}>
+          <text fg={isApiSource() ? theme.textMuted : theme.accent}>
+            {isApiSource()
+              ? "API Settings"
+              : "API Settings (select an API source)"}
+          </text>
+          <box flexDirection="row" gap={2}>
+            <box
+              border
+              padding={0}
+              backgroundColor={
+                focusArea() === "country" ? theme.primary : undefined
+              }
+            >
+              <text
+                fg={focusArea() === "country" ? theme.primary : theme.textMuted}
+              >
+                Country: {sourceCountry()}
+              </text>
+            </box>
+            <box
+              border
+              padding={0}
+              backgroundColor={
+                focusArea() === "language" ? theme.primary : undefined
+              }
+            >
+              <text
+                fg={
+                  focusArea() === "language" ? theme.primary : theme.textMuted
+                }
+              >
+                Language:{" "}
+                {sourceLanguage() === "ja_jp" ? "Japanese" : "English"}
+              </text>
+            </box>
+            <box
+              border
+              padding={0}
+              backgroundColor={
+                focusArea() === "explicit" ? theme.primary : undefined
+              }
+            >
+              <text
+                fg={
+                  focusArea() === "explicit" ? theme.primary : theme.textMuted
+                }
+              >
+                Explicit: {sourceExplicit() ? "Yes" : "No"}
+              </text>
+            </box>
+          </box>
+          <text fg={theme.textMuted}>
+            Enter/Space to toggle focused setting
+          </text>
+        </box>
+      </box>
+
+      {/* Add new source form */}
+      <box border padding={1} flexDirection="column" gap={1}>
+        <text
+          fg={
+            focusArea() === "add" || focusArea() === "url"
+              ? theme.primary
+              : theme.textMuted
+          }
+        >
+          Add New Source:
+        </text>
+
+        <box flexDirection="row" gap={1}>
+          <text fg={theme.textMuted}>Name:</text>
+          <input
+            value={newSourceName()}
+            onInput={setNewSourceName}
+            placeholder="My Custom Feed"
+            focused={props.focused && focusArea() === "add"}
+            width={25}
+          />
+        </box>
+
+        <box flexDirection="row" gap={1}>
+          <text fg={theme.textMuted}>URL:</text>
+          <input
+            value={newSourceUrl()}
+            onInput={(v) => {
+              setNewSourceUrl(v);
+              setError(null);
+            }}
+            placeholder="https://example.com/feed.rss"
+            focused={props.focused && focusArea() === "url"}
+            width={35}
+          />
+        </box>
+
+        <box border padding={0} width={15} onMouseDown={handleAddSource}>
+          <text fg={theme.success}>[+] Add Source</text>
+        </box>
+      </box>
+
+      {/* Error message */}
+      {error() && <text fg={theme.error}>{error()}</text>}
+
+      <text fg={theme.textMuted}>Tab to switch sections, Esc to close</text>
+    </box>
+  );
+}

src/pages/Settings/SyncError.tsx

@@ -0,0 +1,15 @@
+type SyncErrorProps = {
+  message: string
+  onRetry: () => void
+}
+
+export function SyncError(props: SyncErrorProps) {
+  return (
+    <box border title="Error" style={{ padding: 1, flexDirection: "column", gap: 1 }}>
+      <text>{props.message}</text>
+      <box border onMouseDown={props.onRetry}>
+        <text>Retry</text>
+      </box>
+    </box>
+  )
+}

src/pages/Settings/SyncPanel.tsx

@@ -0,0 +1,30 @@
+const createSignal = <T,>(value: T): [() => T, (next: T) => void] => {
+  let current = value
+  return [() => current, (next) => {
+    current = next
+  }]
+}
+
+import { ImportDialog } from "./ImportDialog"
+import { ExportDialog } from "./ExportDialog"
+import { SyncStatus } from "./SyncStatus"
+
+export function SyncPanel() {
+  const mode = createSignal<"import" | "export" | null>(null)
+
+  return (
+    <box style={{ flexDirection: "column", gap: 1 }}>
+      <box style={{ flexDirection: "row", gap: 1 }}>
+        <box border onMouseDown={() => mode[1]("import")}>
+          <text>Import</text>
+        </box>
+        <box border onMouseDown={() => mode[1]("export")}>
+          <text>Export</text>
+        </box>
+      </box>
+      <SyncStatus />
+      {mode[0]() === "import" ? <ImportDialog /> : null}
+      {mode[0]() === "export" ? <ExportDialog /> : null}
+    </box>
+  )
+}

src/pages/Settings/SyncProfile.tsx

@@ -0,0 +1,155 @@
+/**
+ * Sync profile component for PodTUI
+ * Displays user profile information and sync status
+ */
+
+import { createSignal } from "solid-js";
+import { useAuthStore } from "@/stores/auth";
+import { format } from "date-fns";
+
+interface SyncProfileProps {
+  focused?: boolean;
+  onLogout?: () => void;
+  onManageSync?: () => void;
+}
+
+type FocusField = "sync" | "export" | "logout";
+
+export function SyncProfile(props: SyncProfileProps) {
+  const auth = useAuthStore();
+  const [focusField, setFocusField] = createSignal<FocusField>("sync");
+  const [lastSyncTime] = createSignal<Date | null>(new Date());
+
+  const fields: FocusField[] = ["sync", "export", "logout"];
+
+  const handleKeyPress = (key: { name: string; shift?: boolean }) => {
+    if (key.name === "tab") {
+      const currentIndex = fields.indexOf(focusField());
+      const nextIndex = key.shift
+        ? (currentIndex - 1 + fields.length) % fields.length
+        : (currentIndex + 1) % fields.length;
+      setFocusField(fields[nextIndex]);
+    } else if (key.name === "return") {
+      if (focusField() === "sync" && props.onManageSync) {
+        props.onManageSync();
+      } else if (focusField() === "logout" && props.onLogout) {
+        handleLogout();
+      }
+    }
+  };
+
+  const handleLogout = () => {
+    auth.logout();
+    if (props.onLogout) {
+      props.onLogout();
+    }
+  };
+
+  const formatDate = (date: Date | null | undefined): string => {
+    if (!date) return "Never";
+    return format(date, "MMM d, yyyy HH:mm");
+  };
+
+  const user = () => auth.state().user;
+
+  // Get user initials for avatar
+  const userInitials = () => {
+    const name = user()?.name || "?";
+    return name.slice(0, 2).toUpperCase();
+  };
+
+  return (
+    <box flexDirection="column" border padding={2} gap={1}>
+      <text>
+        <strong>User Profile</strong>
+      </text>
+
+      <box height={1} />
+
+      {/* User avatar and info */}
+      <box flexDirection="row" gap={2}>
+        {/* ASCII avatar */}
+        <box
+          border
+          padding={1}
+          width={8}
+          height={4}
+          justifyContent="center"
+          alignItems="center"
+        >
+          <text fg="cyan">{userInitials()}</text>
+        </box>
+
+        {/* User details */}
+        <box flexDirection="column" gap={0}>
+          <text fg="white">{user()?.name || "Guest User"}</text>
+          <text fg="gray">{user()?.email || "No email"}</text>
+          <text fg="gray">Joined: {formatDate(user()?.createdAt)}</text>
+        </box>
+      </box>
+
+      <box height={1} />
+
+      {/* Sync status section */}
+      <box border padding={1} flexDirection="column" gap={0}>
+        <text fg="cyan">Sync Status</text>
+
+        <box flexDirection="row" gap={1}>
+          <text fg="gray">Status:</text>
+          <text fg={user()?.syncEnabled ? "green" : "yellow"}>
+            {user()?.syncEnabled ? "Enabled" : "Disabled"}
+          </text>
+        </box>
+
+        <box flexDirection="row" gap={1}>
+          <text fg="gray">Last Sync:</text>
+          <text fg="white">{formatDate(lastSyncTime())}</text>
+        </box>
+
+        <box flexDirection="row" gap={1}>
+          <text fg="gray">Method:</text>
+          <text fg="white">File-based (JSON/XML)</text>
+        </box>
+      </box>
+
+      <box height={1} />
+
+      {/* Action buttons */}
+      <box flexDirection="row" gap={2}>
+        <box
+          border
+          padding={1}
+          backgroundColor={focusField() === "sync" ? "#333" : undefined}
+        >
+          <text fg={focusField() === "sync" ? "cyan" : undefined}>
+            [S] Manage Sync
+          </text>
+        </box>
+
+        <box
+          border
+          padding={1}
+          backgroundColor={focusField() === "export" ? "#333" : undefined}
+        >
+          <text fg={focusField() === "export" ? "cyan" : undefined}>
+            [E] Export Data
+          </text>
+        </box>
+
+        <box
+          border
+          padding={1}
+          backgroundColor={focusField() === "logout" ? "#333" : undefined}
+        >
+          <text fg={focusField() === "logout" ? "red" : "gray"}>
+            [L] Logout
+          </text>
+        </box>
+      </box>
+
+      <box height={1} />
+
+      <text fg="gray">Tab to navigate, Enter to select</text>
+    </box>
+  );
+}

src/pages/Settings/SyncProgress.tsx

@@ -0,0 +1,25 @@
+type SyncProgressProps = {
+  value: number
+}
+
+export function SyncProgress(props: SyncProgressProps) {
+  const width = 30
+  let filled = (props.value / 100) * width
+  filled = filled >= 0 ? filled : 0
+  filled = filled <= width ? filled : width
+  filled = filled | 0
+  if (filled < 0) filled = 0
+  if (filled > width) filled = width
+
+  let bar = ""
+  for (let i = 0; i < width; i += 1) {
+    bar += i < filled ? "#" : "-"
+  }
+
+  return (
+    <box style={{ flexDirection: "column" }}>
+      <text>{bar}</text>
+      <text>{props.value}%</text>
+    </box>
+  )
+}

src/pages/Settings/SyncStatus.tsx

@@ -0,0 +1,50 @@
+const createSignal = <T,>(value: T): [() => T, (next: T) => void] => {
+  let current = value
+  return [() => current, (next) => {
+    current = next
+  }]
+}
+
+import { SyncProgress } from "./SyncProgress"
+import { SyncError } from "./SyncError"
+
+type SyncState = "idle" | "syncing" | "complete" | "error"
+
+export function SyncStatus() {
+  const state = createSignal<SyncState>("idle")
+  const message = createSignal("Idle")
+  const progress = createSignal(0)
+
+  const toggle = () => {
+    if (state[0]() === "idle") {
+      state[1]("syncing")
+      message[1]("Syncing...")
+      progress[1](40)
+    } else if (state[0]() === "syncing") {
+      state[1]("complete")
+      message[1]("Sync complete")
+      progress[1](100)
+    } else if (state[0]() === "complete") {
+      state[1]("error")
+      message[1]("Sync failed")
+    } else {
+      state[1]("idle")
+      message[1]("Idle")
+      progress[1](0)
+    }
+  }
+
+  return (
+    <box border title="Sync Status" style={{ padding: 1, flexDirection: "column", gap: 1 }}>
+      <box style={{ flexDirection: "row", gap: 1 }}>
+        <text>Status:</text>
+        <text>{message[0]()}</text>
+      </box>
+      <SyncProgress value={progress[0]()} />
+      {state[0]() === "error" ? <SyncError message={message[0]()} onRetry={() => toggle()} /> : null}
+      <box border onMouseDown={toggle}>
+        <text>Cycle Status</text>
+      </box>
+    </box>
+  )
+}

src/pages/Settings/VisualizerSettings.tsx

@@ -0,0 +1,164 @@
+/**
+ * VisualizerSettings — settings panel for the real-time audio visualizer.
+ *
+ * Allows adjusting bar count, noise reduction, sensitivity, and
+ * frequency cutoffs. All changes persist via the app store.
+ */
+
+import { createSignal } from "solid-js";
+import { useKeyboard } from "@opentui/solid";
+import { useAppStore } from "@/stores/app";
+import { useTheme } from "@/context/ThemeContext";
+
+type FocusField = "bars" | "sensitivity" | "noise" | "lowCut" | "highCut";
+
+const FIELDS: FocusField[] = [
+  "bars",
+  "sensitivity",
+  "noise",
+  "lowCut",
+  "highCut",
+];
+
+export function VisualizerSettings() {
+  const appStore = useAppStore();
+  const { theme } = useTheme();
+  const [focusField, setFocusField] = createSignal<FocusField>("bars");
+
+  const viz = () => appStore.state().settings.visualizer;
+
+  const handleKey = (key: { name: string; shift?: boolean }) => {
+    if (key.name === "tab") {
+      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);
+    }
+  };
+
+  const stepValue = (delta: number) => {
+    const field = focusField();
+    const v = viz();
+
+    switch (field) {
+      case "bars": {
+        // Step by 8: 8, 16, 24, 32, ..., 128
+        const next = Math.min(128, Math.max(8, v.bars + delta * 8));
+        appStore.updateVisualizer({ bars: next });
+        break;
+      }
+      case "sensitivity": {
+        // Toggle: 0 (manual) or 1 (auto)
+        appStore.updateVisualizer({ sensitivity: v.sensitivity === 1 ? 0 : 1 });
+        break;
+      }
+      case "noise": {
+        // Step by 0.05: 0.0 – 1.0
+        const next = Math.min(
+          1,
+          Math.max(0, Number((v.noiseReduction + delta * 0.05).toFixed(2))),
+        );
+        appStore.updateVisualizer({ noiseReduction: next });
+        break;
+      }
+      case "lowCut": {
+        // Step by 10: 20 – 500 Hz
+        const next = Math.min(500, Math.max(20, v.lowCutOff + delta * 10));
+        appStore.updateVisualizer({ lowCutOff: next });
+        break;
+      }
+      case "highCut": {
+        // Step by 500: 1000 – 20000 Hz
+        const next = Math.min(
+          20000,
+          Math.max(1000, v.highCutOff + delta * 500),
+        );
+        appStore.updateVisualizer({ highCutOff: next });
+        break;
+      }
+    }
+  };
+
+  useKeyboard(handleKey);
+
+  return (
+    <box flexDirection="column" gap={1}>
+      <text fg={theme.textMuted}>Visualizer</text>
+
+      <box flexDirection="column" gap={1}>
+        <box flexDirection="row" gap={1} alignItems="center">
+          <text fg={focusField() === "bars" ? theme.primary : theme.textMuted}>
+            Bars:
+          </text>
+          <box border padding={0}>
+            <text fg={theme.text}>{viz().bars}</text>
+          </box>
+          <text fg={theme.textMuted}>[Left/Right +/-8]</text>
+        </box>
+
+        <box flexDirection="row" gap={1} alignItems="center">
+          <text
+            fg={
+              focusField() === "sensitivity" ? theme.primary : theme.textMuted
+            }
+          >
+            Auto Sensitivity:
+          </text>
+          <box border padding={0}>
+            <text
+              fg={viz().sensitivity === 1 ? theme.success : theme.textMuted}
+            >
+              {viz().sensitivity === 1 ? "On" : "Off"}
+            </text>
+          </box>
+          <text fg={theme.textMuted}>[Left/Right]</text>
+        </box>
+
+        <box flexDirection="row" gap={1} alignItems="center">
+          <text fg={focusField() === "noise" ? theme.primary : theme.textMuted}>
+            Noise Reduction:
+          </text>
+          <box border padding={0}>
+            <text fg={theme.text}>{viz().noiseReduction.toFixed(2)}</text>
+          </box>
+          <text fg={theme.textMuted}>[Left/Right +/-0.05]</text>
+        </box>
+
+        <box flexDirection="row" gap={1} alignItems="center">
+          <text
+            fg={focusField() === "lowCut" ? theme.primary : theme.textMuted}
+          >
+            Low Cutoff:
+          </text>
+          <box border padding={0}>
+            <text fg={theme.text}>{viz().lowCutOff} Hz</text>
+          </box>
+          <text fg={theme.textMuted}>[Left/Right +/-10]</text>
+        </box>
+
+        <box flexDirection="row" gap={1} alignItems="center">
+          <text
+            fg={focusField() === "highCut" ? theme.primary : theme.textMuted}
+          >
+            High Cutoff:
+          </text>
+          <box border padding={0}>
+            <text fg={theme.text}>{viz().highCutOff} Hz</text>
+          </box>
+          <text fg={theme.textMuted}>[Left/Right +/-500]</text>
+        </box>
+      </box>
+
+      <text fg={theme.textMuted}>Tab to move focus, Left/Right to adjust</text>
+    </box>
+  );
+}