From 3776a3ba653db123022763923f06054b4b27e9d2 Mon Sep 17 00:00:00 2001
From: Hibryda <hibryda@protonmail.com>
Date: Sat, 7 Mar 2026 23:48:03 +0100
Subject: [PATCH] feat(v3): convert Settings from tab to collapsible side
 drawer

Settings is now a right-side drawer (32em width, semi-transparent
backdrop) instead of a full-page tab. GlobalTabBar has 3 tabs
(Sessions/Docs/Context) + gear icon toggle. WorkspaceTab type
reduced to 'sessions' | 'docs' | 'context'. Close via Escape,
click-outside, or close button. Alt+1..3 for tabs, Ctrl+, toggles
drawer.
---
 v2/src/App.svelte                             | 126 +++++++++++++++---
 .../components/Workspace/GlobalTabBar.svelte  |  79 +++++++++--
 .../components/Workspace/SettingsTab.svelte   |   7 +-
 v2/src/lib/stores/workspace.svelte.ts         |   2 +-
 4 files changed, 180 insertions(+), 34 deletions(-)

diff --git a/v2/src/App.svelte b/v2/src/App.svelte
index 75c3149..1485fff 100644
--- a/v2/src/App.svelte
+++ b/v2/src/App.svelte
@@ -25,10 +25,15 @@
   let detachedConfig = getDetachedConfig();
 
   let paletteOpen = $state(false);
+  let settingsOpen = $state(false);
   let loaded = $state(false);
 
   let activeTab = $derived(getActiveTab());
 
+  function toggleSettings() {
+    settingsOpen = !settingsOpen;
+  }
+
   onMount(() => {
     initTheme();
     startAgentDispatcher();
@@ -45,10 +50,10 @@
         return;
       }
 
-      // Alt+1..4 — switch workspace tab
-      if (e.altKey && !e.ctrlKey && e.key >= '1' && e.key <= '4') {
+      // Alt+1..3 — switch workspace tab
+      if (e.altKey && !e.ctrlKey && e.key >= '1' && e.key <= '3') {
         e.preventDefault();
-        const tabs = ['sessions', 'docs', 'context', 'settings'] as const;
+        const tabs = ['sessions', 'docs', 'context'] as const;
         setActiveTab(tabs[parseInt(e.key) - 1]);
         return;
       }
@@ -64,10 +69,17 @@
         return;
       }
 
-      // Ctrl+, — settings tab
+      // Ctrl+, — toggle settings drawer
       if (e.ctrlKey && e.key === ',') {
         e.preventDefault();
-        setActiveTab('settings');
+        toggleSettings();
+        return;
+      }
+
+      // Escape — close settings drawer
+      if (e.key === 'Escape' && settingsOpen) {
+        e.preventDefault();
+        settingsOpen = false;
         return;
       }
     }
@@ -99,19 +111,36 @@
   </div>
 {:else if loaded}
   <div class="app-shell">
-    <GlobalTabBar />
+    <GlobalTabBar {settingsOpen} ontoggleSettings={toggleSettings} />
 
-    <main class="tab-content">
-      {#if activeTab === 'sessions'}
-        <ProjectGrid />
-      {:else if activeTab === 'docs'}
-        <DocsTab />
-      {:else if activeTab === 'context'}
-        <ContextTab />
-      {:else if activeTab === 'settings'}
-        <SettingsTab />
+    <div class="content-area">
+      <main class="tab-content">
+        {#if activeTab === 'sessions'}
+          <ProjectGrid />
+        {:else if activeTab === 'docs'}
+          <DocsTab />
+        {:else if activeTab === 'context'}
+          <ContextTab />
+        {/if}
+      </main>
+
+      {#if settingsOpen}
+        <!-- svelte-ignore a11y_click_events_have_key_events -->
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div class="drawer-backdrop" onclick={() => settingsOpen = false}></div>
+        <aside class="settings-drawer">
+          <div class="drawer-header">
+            <h2>Settings</h2>
+            <button class="drawer-close" onclick={() => settingsOpen = false} title="Close (Esc)">
+              <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+                <path d="M2 2l10 10M12 2L2 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+              </svg>
+            </button>
+          </div>
+          <SettingsTab />
+        </aside>
       {/if}
-    </main>
+    </div>
 
     <StatusBar />
   </div>
@@ -137,11 +166,74 @@
     overflow: hidden;
   }
 
-  .tab-content {
+  .content-area {
     flex: 1;
+    position: relative;
     overflow: hidden;
   }
 
+  .tab-content {
+    height: 100%;
+    overflow: hidden;
+  }
+
+  .drawer-backdrop {
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.3);
+    z-index: 50;
+  }
+
+  .settings-drawer {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 32em;
+    max-width: 90%;
+    background: var(--ctp-base);
+    border-left: 1px solid var(--ctp-surface1);
+    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3);
+    z-index: 51;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .drawer-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 16px;
+    border-bottom: 1px solid var(--ctp-surface0);
+    flex-shrink: 0;
+  }
+
+  .drawer-header h2 {
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: var(--ctp-text);
+    margin: 0;
+  }
+
+  .drawer-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    background: transparent;
+    border: none;
+    border-radius: 4px;
+    color: var(--ctp-subtext0);
+    cursor: pointer;
+  }
+
+  .drawer-close:hover {
+    color: var(--ctp-text);
+    background: var(--ctp-surface0);
+  }
+
   .loading {
     display: flex;
     align-items: center;
diff --git a/v2/src/lib/components/Workspace/GlobalTabBar.svelte b/v2/src/lib/components/Workspace/GlobalTabBar.svelte
index 7a59173..7239cd2 100644
--- a/v2/src/lib/components/Workspace/GlobalTabBar.svelte
+++ b/v2/src/lib/components/Workspace/GlobalTabBar.svelte
@@ -1,37 +1,67 @@
 <script lang="ts">
   import { getActiveTab, setActiveTab, type WorkspaceTab } from '../../stores/workspace.svelte';
 
+  interface Props {
+    settingsOpen?: boolean;
+    ontoggleSettings?: () => void;
+  }
+
+  let { settingsOpen = false, ontoggleSettings }: Props = $props();
+
   const tabs: { id: WorkspaceTab; label: string; shortcut: string }[] = [
     { id: 'sessions', label: 'Sessions', shortcut: 'Alt+1' },
     { id: 'docs', label: 'Docs', shortcut: 'Alt+2' },
     { id: 'context', label: 'Context', shortcut: 'Alt+3' },
-    { id: 'settings', label: 'Settings', shortcut: 'Alt+4' },
   ];
 </script>
 
 <nav class="global-tab-bar">
-  {#each tabs as tab}
-    <button
-      class="tab-btn"
-      class:active={getActiveTab() === tab.id}
-      onclick={() => setActiveTab(tab.id)}
-      title={tab.shortcut}
-    >
-      {tab.label}
-    </button>
-  {/each}
+  <div class="tabs">
+    {#each tabs as tab}
+      <button
+        class="tab-btn"
+        class:active={getActiveTab() === tab.id}
+        onclick={() => setActiveTab(tab.id)}
+        title={tab.shortcut}
+      >
+        {tab.label}
+      </button>
+    {/each}
+  </div>
+  <button
+    class="settings-toggle"
+    class:active={settingsOpen}
+    onclick={ontoggleSettings}
+    title="Settings (Ctrl+,)"
+  >
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+      <path
+        d="M6.5 1L6.2 2.7a5 5 0 0 0-1.2.7L3.4 2.8 1.9 5.4l1.3 1.2a5 5 0 0 0 0 1.4L1.9 9.2l1.5 2.6 1.6-.6a5 5 0 0 0 1.2.7L6.5 14h3l.3-1.7a5 5 0 0 0 1.2-.7l1.6.6 1.5-2.6-1.3-1.2a5 5 0 0 0 0-1.4l1.3-1.2-1.5-2.6-1.6.6a5 5 0 0 0-1.2-.7L9.5 1h-3zM8 5.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5z"
+        stroke="currentColor"
+        stroke-width="1.2"
+        stroke-linejoin="round"
+        fill="none"
+      />
+    </svg>
+  </button>
 </nav>
 
 <style>
   .global-tab-bar {
     display: flex;
-    gap: 2px;
+    align-items: center;
     padding: 4px 8px;
     background: var(--ctp-mantle);
     border-bottom: 1px solid var(--ctp-surface0);
     flex-shrink: 0;
   }
 
+  .tabs {
+    display: flex;
+    gap: 2px;
+    flex: 1;
+  }
+
   .tab-btn {
     padding: 4px 14px;
     background: transparent;
@@ -53,4 +83,29 @@
     background: var(--ctp-base);
     border-bottom: 2px solid var(--ctp-blue);
   }
+
+  .settings-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    background: transparent;
+    border: none;
+    border-radius: 4px;
+    color: var(--ctp-subtext0);
+    cursor: pointer;
+    transition: color 0.15s, background 0.15s;
+    flex-shrink: 0;
+  }
+
+  .settings-toggle:hover {
+    color: var(--ctp-text);
+    background: var(--ctp-surface0);
+  }
+
+  .settings-toggle.active {
+    color: var(--ctp-blue);
+    background: var(--ctp-surface0);
+  }
 </style>
diff --git a/v2/src/lib/components/Workspace/SettingsTab.svelte b/v2/src/lib/components/Workspace/SettingsTab.svelte
index 7f17857..afb2a7a 100644
--- a/v2/src/lib/components/Workspace/SettingsTab.svelte
+++ b/v2/src/lib/components/Workspace/SettingsTab.svelte
@@ -478,14 +478,13 @@
 
 <style>
   .settings-tab {
-    padding: 16px 24px;
+    padding: 12px 16px;
     overflow-y: auto;
-    height: 100%;
-    max-width: 560px;
+    flex: 1;
   }
 
   h2 {
-    font-size: 0.85rem;
+    font-size: 0.8rem;
     font-weight: 600;
     color: var(--ctp-text);
     margin: 0 0 10px;
diff --git a/v2/src/lib/stores/workspace.svelte.ts b/v2/src/lib/stores/workspace.svelte.ts
index f02edef..4f30560 100644
--- a/v2/src/lib/stores/workspace.svelte.ts
+++ b/v2/src/lib/stores/workspace.svelte.ts
@@ -2,7 +2,7 @@ import { loadGroups, saveGroups, getCliGroup } from '../adapters/groups-bridge';
 import type { GroupsFile, GroupConfig, ProjectConfig } from '../types/groups';
 import { clearAllAgentSessions } from '../stores/agents.svelte';
 
-export type WorkspaceTab = 'sessions' | 'docs' | 'context' | 'settings';
+export type WorkspaceTab = 'sessions' | 'docs' | 'context';
 
 export interface TerminalTab {
   id: string;