feat(app): settings modal — terminal, appearance, shell

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-14 18:34:14 +07:00
parent 61c69adb17
commit a2087a0de5
3 changed files with 67 additions and 3 deletions
@@ -0,0 +1,60 @@
+import { useEffect, useRef } from "react";
+import { COLORS, FONT } from "./theme";
+import { setConfig } from "./socketBridge";
+import type { ConfigView, DaemonHealth } from "./socketBridge";
+
+const FONTS = ["JetBrains Mono", "Menlo", "Monaco", "SF Mono", "Fira Code", "Cascadia Code"];
+const ACCENTS: { id: string; hex: string }[] = [
+  { id: "blue", hex: "#4C8DFF" }, { id: "teal", hex: "#34D3C2" }, { id: "purple", hex: "#9B7BFF" },
+  { id: "green", hex: "#3FB950" }, { id: "orange", hex: "#F2934B" },
+];
+
+export function Settings({ config, health, onClose }: { config: ConfigView; health: DaemonHealth | null; onClose: () => void }) {
+  const ref = useRef<HTMLDivElement>(null);
+  useEffect(() => { ref.current?.focus(); }, []);
+  return (
+    <div onMouseDown={onClose} style={{ position: "fixed", inset: 0, zIndex: 2000, background: "#000A", display: "flex", alignItems: "center", justifyContent: "center" }}>
+      <div ref={ref} tabIndex={-1} onMouseDown={(e) => e.stopPropagation()} onKeyDown={(e) => { e.stopPropagation(); if (e.key === "Escape") onClose(); }}
+        style={{ width: 520, maxHeight: "80vh", overflowY: "auto", background: COLORS.bgApp, border: `1px solid ${COLORS.borderStrong}`, borderRadius: 14, padding: 24, color: COLORS.textPrimary, fontFamily: FONT.ui }}>
+        <div style={{ fontWeight: 700, fontSize: 16, marginBottom: 16 }}>Settings</div>
+
+        <div style={{ fontSize: 12, color: COLORS.textSecondary, marginBottom: 6 }}>Terminal font</div>
+        <select value={config.font_family} onChange={(e) => void setConfig({ font_family: e.target.value })}
+          style={{ width: "100%", padding: 8, marginBottom: 10, background: COLORS.bgPanel, color: COLORS.textPrimary, border: `1px solid ${COLORS.borderStrong}`, borderRadius: 8 }}>
+          {FONTS.map((f) => <option key={f} value={f}>{f}</option>)}
+        </select>
+        <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 18 }}>
+          <span style={{ fontSize: 12, color: COLORS.textSecondary }}>Size {config.font_size}</span>
+          <input type="range" min={10} max={20} value={config.font_size} onChange={(e) => void setConfig({ font_size: Number(e.target.value) })} style={{ flex: 1 }} />
+        </div>
+
+        <div style={{ fontSize: 12, color: COLORS.textSecondary, marginBottom: 6 }}>Theme</div>
+        <div style={{ display: "flex", gap: 8, marginBottom: 12 }}>
+          {(["dark", "light"] as const).map((t) => (
+            <button key={t} onClick={() => void setConfig({ theme: t })}
+              style={{ flex: 1, padding: "8px 0", borderRadius: 8, fontSize: 13, textTransform: "capitalize",
+                background: config.theme === t ? COLORS.accent : COLORS.bgElevated, color: config.theme === t ? "#fff" : COLORS.textPrimary,
+                border: `1px solid ${COLORS.borderStrong}` }}>{t}</button>
+          ))}
+        </div>
+        <div style={{ fontSize: 12, color: COLORS.textSecondary, marginBottom: 6 }}>Accent</div>
+        <div style={{ display: "flex", gap: 10, marginBottom: 18 }}>
+          {ACCENTS.map((a) => (
+            <button key={a.id} onClick={() => void setConfig({ accent: a.id })} aria-label={a.id}
+              style={{ width: 26, height: 26, borderRadius: "50%", background: a.hex, cursor: "pointer",
+                border: config.accent === a.id ? `2px solid ${COLORS.textPrimary}` : "2px solid transparent" }} />
+          ))}
+        </div>
+
+        <div style={{ fontSize: 12, color: COLORS.textSecondary, marginBottom: 6 }}>Default shell (empty = auto)</div>
+        <input defaultValue={config.default_shell} onBlur={(e) => void setConfig({ default_shell: e.target.value })}
+          style={{ width: "100%", padding: 8, marginBottom: 18, background: COLORS.bgPanel, color: COLORS.textPrimary, border: `1px solid ${COLORS.borderStrong}`, borderRadius: 8 }} />
+
+        <DaemonSection health={health} />
+      </div>
+    </div>
+  );
+}
+
+// Placeholder — fleshed out in Task 11. Keep the signature stable.
+function DaemonSection(_props: { health: DaemonHealth | null }) { return null; }