Spell check setting (#6446)

Co-authored-by: Douwe Osinga <douwe@squareup.com>

ui/desktop/src/components/settings/chat/ChatSettingsSection.tsx

@@ -3,6 +3,7 @@ import DictationSection from '../dictation/DictationSection';
 import { SecurityToggle } from '../security/SecurityToggle';
 import { ResponseStylesSection } from '../response_styles/ResponseStylesSection';
 import { GoosehintsSection } from './GoosehintsSection';
+import { SpellcheckToggle } from './SpellcheckToggle';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../../ui/card';
 
 export default function ChatSettingsSection() {
@@ -37,6 +38,7 @@ export default function ChatSettingsSection() {
       <Card className="pb-2 rounded-lg">
         <CardContent className="px-2">
           <DictationSection />
+          <SpellcheckToggle />
         </CardContent>
       </Card>
 

ui/desktop/src/components/settings/chat/SpellcheckToggle.tsx

@@ -0,0 +1,33 @@
+import { useState, useEffect } from 'react';
+import { Switch } from '../../ui/switch';
+
+export const SpellcheckToggle = () => {
+  const [enabled, setEnabled] = useState(true);
+
+  useEffect(() => {
+    const loadState = async () => {
+      const state = await window.electron.getSpellcheckState();
+      setEnabled(state);
+    };
+    loadState();
+  }, []);
+
+  const handleToggle = async (checked: boolean) => {
+    setEnabled(checked);
+    await window.electron.setSpellcheck(checked);
+  };
+
+  return (
+    <div className="flex items-center justify-between py-2 px-2 hover:bg-background-muted rounded-lg transition-all">
+      <div>
+        <h3 className="text-text-default">Enable Spellcheck</h3>
+        <p className="text-xs text-text-muted max-w-md mt-[2px]">
+          Check spelling in the chat input. Requires restart to take effect.
+        </p>
+      </div>
+      <div className="flex items-center">
+        <Switch checked={enabled} onCheckedChange={handleToggle} variant="mono" />
+      </div>
+    </div>
+  );
+};