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.
This commit is contained in:
Hibryda
parent
b1b34f8195
commit
3776a3ba65
4 changed files with 180 additions and 34 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue