feat: complete user config management

- Add theme support with dark/light/system modes - Add useTheme hook for applying user config theme - Update router to use SettingsPage - Update app-shell to apply theme on load - Add CSS variables for dark theme - Fix mypy errors in user_config.py - Quality gates pass: ruff, mypy, typecheck, lint, build
2026-05-18 15:58:01 +02:00
parent 9f7a750898
commit 94254ee3fd
18 changed files with 463 additions and 171 deletions
@@ -0,0 +1,142 @@
+import { useCallback, useEffect, useState } from "react";
+
+import { getUserConfig, updateUserConfig, type UserConfig, type UserConfigUpdate } from "../api/settings";
+
+type SettingsStatus = "loading" | "ready" | "error";
+
+const THEME_OPTIONS = [
+  { value: "system", label: "System" },
+  { value: "light", label: "Light" },
+  { value: "dark", label: "Dark" },
+];
+
+export const SettingsPage = () => {
+  const [status, setStatus] = useState<SettingsStatus>("loading");
+  const [config, setConfig] = useState<UserConfig>({
+    theme: "system",
+    default_editor: null,
+    git_user_name: null,
+    git_user_email: null,
+  });
+  const [saveStatus, setSaveStatus] = useState<"idle" | "saving" | "saved" | "error">("idle");
+
+  const loadConfig = useCallback(async () => {
+    try {
+      const data = await getUserConfig();
+      setConfig(data);
+      setStatus("ready");
+    } catch {
+      setStatus("error");
+    }
+  }, []);
+
+  useEffect(() => {
+    void loadConfig();
+  }, [loadConfig]);
+
+  const handleChange = (key: keyof UserConfigUpdate, value: string | null) => {
+    setConfig((prev) => ({ ...prev, [key]: value }));
+    setSaveStatus("idle");
+  };
+
+  const handleSave = async () => {
+    setSaveStatus("saving");
+    try {
+      const update: UserConfigUpdate = {
+        theme: config.theme,
+        default_editor: config.default_editor ?? undefined,
+        git_user_name: config.git_user_name ?? undefined,
+        git_user_email: config.git_user_email ?? undefined,
+      };
+      const updated = await updateUserConfig(update);
+      setConfig(updated);
+      setSaveStatus("saved");
+      setTimeout(() => setSaveStatus("idle"), 2000);
+    } catch {
+      setSaveStatus("error");
+    }
+  };
+
+  if (status === "loading") {
+    return <section className="stack"><p className="muted">Loading settings...</p></section>;
+  }
+
+  if (status === "error") {
+    return (
+      <section className="stack">
+        <p>Failed to load settings</p>
+        <button className="secondary-button" onClick={() => void loadConfig()} type="button">
+          Retry
+        </button>
+      </section>
+    );
+  }
+
+  return (
+    <section className="stack">
+      <div className="page-header">
+        <h1>Settings</h1>
+      </div>
+
+      <div className="card stack">
+        <h2>Appearance</h2>
+        <label className="form-field">
+          Theme
+          <select
+            value={config.theme}
+            onChange={(e) => handleChange("theme", e.target.value)}
+          >
+            {THEME_OPTIONS.map((opt) => (
+              <option key={opt.value} value={opt.value}>
+                {opt.label}
+              </option>
+            ))}
+          </select>
+        </label>
+      </div>
+
+      <div className="card stack">
+        <h2>Git Identity</h2>
+        <label className="form-field">
+          User Name
+          <input
+            type="text"
+            value={config.git_user_name ?? ""}
+            onChange={(e) => handleChange("git_user_name", e.target.value || null)}
+            placeholder="Your git commit name"
+          />
+        </label>
+        <label className="form-field">
+          User Email
+          <input
+            type="email"
+            value={config.git_user_email ?? ""}
+            onChange={(e) => handleChange("git_user_email", e.target.value || null)}
+            placeholder="your.email@example.com"
+          />
+        </label>
+      </div>
+
+      <div className="card stack">
+        <h2>Editor</h2>
+        <label className="form-field">
+          Default Editor
+          <input
+            type="text"
+            value={config.default_editor ?? ""}
+            onChange={(e) => handleChange("default_editor", e.target.value || null)}
+            placeholder="e.g., vscode, vim, cursor"
+          />
+        </label>
+      </div>
+
+      <div className="settings-actions">
+        <button className="primary-button" onClick={() => void handleSave()} type="button">
+          {saveStatus === "saving" ? "Saving..." : "Save Settings"}
+        </button>
+        {saveStatus === "saved" && <span className="success-text">Settings saved!</span>}
+        {saveStatus === "error" && <span className="error-text">Failed to save</span>}
+      </div>
+    </section>
+  );
+};