From 01f6e423464d5b20ffd85aa6cd4b096c99304fe7 Mon Sep 17 00:00:00 2001
From: jake <jakeadriansames@gmail.com>
Date: Sat, 21 Mar 2026 11:04:06 +0000
Subject: [PATCH] =?UTF-8?q?agent:=20settings=20=E2=80=94=20restyle=20with?=
 =?UTF-8?q?=20zone=20picker=20and=20accessibility=20controls?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/lib/pages/SettingsPage.svelte | 52 ++++++++++++++++++++++++-------
 1 file changed, 40 insertions(+), 12 deletions(-)

diff --git a/src/lib/pages/SettingsPage.svelte b/src/lib/pages/SettingsPage.svelte
index 7e3b91b..02ba6d0 100644
--- a/src/lib/pages/SettingsPage.svelte
+++ b/src/lib/pages/SettingsPage.svelte
@@ -7,8 +7,14 @@
   import Toggle from "$lib/components/Toggle.svelte";
   import SegmentedButton from "$lib/components/SegmentedButton.svelte";
   import HotkeyRecorder from "$lib/components/HotkeyRecorder.svelte";
+  import ZonePicker from "$lib/components/ZonePicker.svelte";
+  import AccessibilityControls from "$lib/components/AccessibilityControls.svelte";
+  import { getPreferences, updatePreferences } from "$lib/stores/preferences.svelte.js";
+  import { Check, ChevronRight } from "lucide-svelte";
   import { open } from "@tauri-apps/plugin-dialog";
 
+  const prefs = getPreferences();
+
   let engineStatus = $state("Checking...");
   let engineOk = $state(false);
   let downloadedModels = $state([]);
@@ -93,6 +99,15 @@
     saveSettings();
   });
 
+  // Sync theme setting to preferences store
+  $effect(() => {
+    const map = { Dark: 'dark', Light: 'light', System: 'system' };
+    const mapped = map[settings.theme] || 'dark';
+    if (prefs.theme !== mapped) {
+      updatePreferences({ theme: mapped });
+    }
+  });
+
   async function downloadModel(size) {
     downloadingModel = size;
     downloadProgress = 0;
@@ -349,9 +364,7 @@
                     title={settings.britishEnglish ? "British English spelling active" : "Click to enable British English spelling"}
                   >
                     {#if settings.britishEnglish}
-                      <svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
-                        <path d="M5 12l5 5L20 7" stroke-linecap="round" stroke-linejoin="round" />
-                      </svg>
+                      <Check class="w-3 h-3" strokeWidth={2.5} />
                     {/if}
                     British English
                   </button>
@@ -425,9 +438,7 @@
               class="flex items-center gap-2 w-full text-left mb-1"
               onclick={() => showProfiles = !showProfiles}
             >
-              <svg class="w-3 h-3 text-text-tertiary transition-transform {showProfiles ? 'rotate-90' : ''}" viewBox="0 0 24 24" fill="currentColor">
-                <path d="M8 5l8 7-8 7z" />
-              </svg>
+              <ChevronRight class="w-3 h-3 text-text-tertiary transition-transform duration-[var(--duration-ui)] {showProfiles ? 'rotate-90' : ''}" />
               <h3 class="text-[14px] font-semibold text-text">Profiles</h3>
               <span class="text-[10px] px-1.5 py-0.5 rounded-full bg-bg-elevated text-text-tertiary">
                 {profiles.length}
@@ -495,9 +506,7 @@
               class="flex items-center gap-2 w-full text-left mb-1"
               onclick={() => showTemplates = !showTemplates}
             >
-              <svg class="w-3 h-3 text-text-tertiary transition-transform {showTemplates ? 'rotate-90' : ''}" viewBox="0 0 24 24" fill="currentColor">
-                <path d="M8 5l8 7-8 7z" />
-              </svg>
+              <ChevronRight class="w-3 h-3 text-text-tertiary transition-transform duration-[var(--duration-ui)] {showTemplates ? 'rotate-90' : ''}" />
               <h3 class="text-[14px] font-semibold text-text">Templates</h3>
               <span class="text-[10px] px-1.5 py-0.5 rounded-full bg-bg-elevated text-text-tertiary">
                 {templates.length}
@@ -645,6 +654,11 @@
               <SegmentedButton options={["Dark", "Light", "System"]} bind:value={settings.theme} />
             </div>
 
+            <div class="mb-6">
+              <p class="text-[10px] font-medium text-text-tertiary uppercase tracking-wider mb-2">Zone</p>
+              <ZonePicker />
+            </div>
+
             <div class="mb-6">
               <p class="text-[10px] font-medium text-text-tertiary uppercase tracking-wider mb-2">
                 Font Size <span class="font-normal text-text-secondary ml-1">{settings.fontSize}px</span>
@@ -660,6 +674,22 @@
         {/if}
       </div>
 
+      <!-- Accessibility -->
+      <div class="border-b border-border-subtle">
+        <button
+          class="flex items-center justify-between w-full py-4 px-5 text-left"
+          onclick={() => openSection = openSection === 'accessibility' ? null : 'accessibility'}
+        >
+          <h3 class="font-display text-[18px] italic text-text">Accessibility</h3>
+          <span class="text-text-tertiary text-[16px] leading-none">{openSection === 'accessibility' ? '−' : '+'}</span>
+        </button>
+        {#if openSection === 'accessibility'}
+          <div class="px-5 pb-5 animate-fade-in">
+            <AccessibilityControls />
+          </div>
+        {/if}
+      </div>
+
       <!-- About -->
       <div>
         <button
@@ -686,9 +716,7 @@
                 "No telemetry — zero data collection",
               ] as item}
                 <div class="flex items-start gap-2">
-                  <svg class="w-3.5 h-3.5 text-success mt-0.5 flex-shrink-0" viewBox="0 0 24 24" fill="currentColor">
-                    <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17Z" />
-                  </svg>
+                  <Check class="w-3.5 h-3.5 text-success mt-0.5 flex-shrink-0" />
                   <p class="text-[11px] text-text-secondary">{item}</p>
                 </div>
               {/each}