From ed611c77ed2902606a880c26e137639701949143 Mon Sep 17 00:00:00 2001
From: Amit Haridas <amit.wh@gmail.com>
Date: Fri, 5 Jun 2026 19:31:18 +0530
Subject: [PATCH] feat(renderer): EditorSettings tab (font, tab, line/wrap,
 minimap)

---
 .../components/modals/EditorSettings.tsx      | 41 +++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 src/renderer/components/modals/EditorSettings.tsx

diff --git a/src/renderer/components/modals/EditorSettings.tsx b/src/renderer/components/modals/EditorSettings.tsx
new file mode 100644
index 0000000..c14010b
--- /dev/null
+++ b/src/renderer/components/modals/EditorSettings.tsx
@@ -0,0 +1,41 @@
+import { useSettingsStore } from '@/stores/settings-store';
+import { Label } from '@/components/ui/label';
+import { Slider } from '@/components/ui/slider';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Switch } from '@/components/ui/switch';
+
+export function EditorSettings() {
+  const { fontSize, tabSize, lineNumbers, wordWrap, minimap, setSetting } = useSettingsStore();
+
+  return (
+    <div className="space-y-5 text-sm">
+      <div>
+        <Label htmlFor="editor-font-size">Font size: {fontSize}px</Label>
+        <Slider id="editor-font-size" min={10} max={24} step={1} value={[fontSize]} onValueChange={([v]) => setSetting('fontSize', v)} />
+      </div>
+      <div>
+        <Label htmlFor="editor-tab-size">Tab size</Label>
+        <Select value={String(tabSize)} onValueChange={(v) => setSetting('tabSize', Number(v) as 2 | 4 | 8)}>
+          <SelectTrigger id="editor-tab-size" aria-label="Tab size"><SelectValue /></SelectTrigger>
+          <SelectContent>
+            <SelectItem value="2">2 spaces</SelectItem>
+            <SelectItem value="4">4 spaces</SelectItem>
+            <SelectItem value="8">8 spaces</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+      <label className="flex items-center justify-between">
+        <span>Line numbers</span>
+        <Switch checked={lineNumbers} onCheckedChange={(c) => setSetting('lineNumbers', c)} aria-label="Line numbers" />
+      </label>
+      <label className="flex items-center justify-between">
+        <span>Word wrap</span>
+        <Switch checked={wordWrap} onCheckedChange={(c) => setSetting('wordWrap', c)} aria-label="Word wrap" />
+      </label>
+      <label className="flex items-center justify-between">
+        <span>Minimap</span>
+        <Switch checked={minimap} onCheckedChange={(c) => setSetting('minimap', c)} aria-label="Minimap" />
+      </label>
+    </div>
+  );
+}