claude-code

web/components/settings/GeneralSettings.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import { Sun, Moon, Monitor } from "lucide-react";
+import { useChatStore } from "@/lib/store";
+import { useTheme } from "@/components/layout/ThemeProvider";
+import { SettingRow, SectionHeader, Toggle, Slider } from "./SettingRow";
+import { cn } from "@/lib/utils";
+
+export function GeneralSettings() {
+  const { settings, updateSettings, resetSettings } = useChatStore();
+  const { setTheme } = useTheme();
+
+  const themes = [
+    { id: "light" as const, label: "Light", icon: Sun },
+    { id: "dark" as const, label: "Dark", icon: Moon },
+    { id: "system" as const, label: "System", icon: Monitor },
+  ];
+
+  function handleThemeChange(t: "light" | "dark" | "system") {
+    updateSettings({ theme: t });
+    setTheme(t);
+  }
+
+  return (
+    <div>
+      <SectionHeader title="General" onReset={() => resetSettings("general")} />
+
+      <SettingRow
+        label="Theme"
+        description="Choose the color scheme for the interface."
+      >
+        <div className="flex gap-1.5">
+          {themes.map(({ id, label, icon: Icon }) => (
+            <button
+              key={id}
+              onClick={() => handleThemeChange(id)}
+              className={cn(
+                "flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-colors",
+                settings.theme === id
+                  ? "bg-brand-600 text-white"
+                  : "bg-surface-800 text-surface-400 hover:text-surface-200"
+              )}
+            >
+              <Icon className="w-3.5 h-3.5" />
+              {label}
+            </button>
+          ))}
+        </div>
+      </SettingRow>
+
+      <SettingRow
+        label="Chat font size"
+        description="Font size for messages in the chat window."
+        stack
+      >
+        <Slider
+          value={settings.fontSize.chat}
+          min={12}
+          max={20}
+          onChange={(v) =>
+            updateSettings({ fontSize: { ...settings.fontSize, chat: v } })
+          }
+          unit="px"
+        />
+      </SettingRow>
+
+      <SettingRow
+        label="Code font size"
+        description="Font size for code blocks and inline code."
+        stack
+      >
+        <Slider
+          value={settings.fontSize.code}
+          min={10}
+          max={18}
+          onChange={(v) =>
+            updateSettings({ fontSize: { ...settings.fontSize, code: v } })
+          }
+          unit="px"
+        />
+      </SettingRow>
+
+      <SettingRow
+        label="Send on Enter"
+        description="Press Enter to send messages. When off, use Cmd+Enter or Ctrl+Enter."
+      >
+        <Toggle
+          checked={settings.sendOnEnter}
+          onChange={(v) => updateSettings({ sendOnEnter: v })}
+        />
+      </SettingRow>
+
+      <SettingRow
+        label="Show timestamps"
+        description="Display the time each message was sent."
+      >
+        <Toggle
+          checked={settings.showTimestamps}
+          onChange={(v) => updateSettings({ showTimestamps: v })}
+        />
+      </SettingRow>
+
+      <SettingRow
+        label="Compact mode"
+        description="Reduce spacing between messages for higher information density."
+      >
+        <Toggle
+          checked={settings.compactMode}
+          onChange={(v) => updateSettings({ compactMode: v })}
+        />
+      </SettingRow>
+    </div>
+  );
+}