agents-orchestrator/agent-orchestrator
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(settings): Sprint 4 — wire all 6 category components into SettingsPanel

Browse source 
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.
This commit is contained in:
Hibryda 2026-03-17 05:50:34 +01:00
parent c622202f5f
commit 886a2f723a
1 changed files with 19 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

25
src/lib/settings/SettingsPanel.svelte
View file

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