From 886a2f723a09b5c21cc2fcc6720aeec22da9b581 Mon Sep 17 00:00:00 2001
From: Hibryda <hibryda@protonmail.com>
Date: Tue, 17 Mar 2026 05:50:34 +0100
Subject: [PATCH] =?UTF-8?q?feat(settings):=20Sprint=204=20=E2=80=94=20wire?=
 =?UTF-8?q?=20all=206=20category=20components=20into=20SettingsPanel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

SettingsPanel now renders actual components instead of placeholders:
AppearanceSettings, AgentSettings, SecuritySettings, ProjectSettings,
OrchestrationSettings, AdvancedSettings. Category switching via sidebar
with keyboard navigation and search deep-linking.

Settings redesign complete: 2959-line monolith replaced by 7 modular
components totaling ~1,700 lines. Monolith retained for backward
compatibility — will be removed once all edge cases are verified.
---
 src/lib/settings/SettingsPanel.svelte | 25 +++++++++++++++++++------
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/lib/settings/SettingsPanel.svelte b/src/lib/settings/SettingsPanel.svelte
index 0ff8106..9fb3f14 100644
--- a/src/lib/settings/SettingsPanel.svelte
+++ b/src/lib/settings/SettingsPanel.svelte
@@ -3,6 +3,12 @@
   // Settings Panel — VS Code-style sidebar + content layout with search.
   import { onMount } from 'svelte';
   import { SETTINGS_REGISTRY, type SettingsCategory, type SettingEntry } from './settings-registry';
+  import AppearanceSettings from './categories/AppearanceSettings.svelte';
+  import AgentSettings from './categories/AgentSettings.svelte';
+  import SecuritySettings from './categories/SecuritySettings.svelte';
+  import ProjectSettings from './categories/ProjectSettings.svelte';
+  import OrchestrationSettings from './categories/OrchestrationSettings.svelte';
+  import AdvancedSettings from './categories/AdvancedSettings.svelte';
 
   interface Props {
     onClose?: () => void;
@@ -124,12 +130,19 @@
       </nav>
 
       <div class="settings-content" role="tabpanel">
-        <!-- Category components will be rendered here via dynamic import or {#if} -->
-        <div class="category-placeholder">
-          <h2>{CATEGORIES.find(c => c.id === activeCategory)?.label}</h2>
-          <p>Settings for {activeCategory} will be rendered here.</p>
-          <p class="setting-count">{SETTINGS_REGISTRY.filter(s => s.category === activeCategory).length} settings</p>
-        </div>
+        {#if activeCategory === 'appearance'}
+          <AppearanceSettings />
+        {:else if activeCategory === 'agents'}
+          <AgentSettings />
+        {:else if activeCategory === 'security'}
+          <SecuritySettings />
+        {:else if activeCategory === 'projects'}
+          <ProjectSettings />
+        {:else if activeCategory === 'orchestration'}
+          <OrchestrationSettings />
+        {:else if activeCategory === 'advanced'}
+          <AdvancedSettings />
+        {/if}
       </div>
     </div>
   {/if}