feat(v3): redesign UI from top tab bar to VSCode-style left sidebar
Replace horizontal tab bar + right-side settings drawer with vertical icon rail (36px) + expandable drawer panel (28em) + always-visible workspace. GlobalTabBar now renders 4 SVG icon buttons. Settings is a regular sidebar tab. Keyboard: Alt+1..4, Ctrl+B toggle, Ctrl+, settings.
This commit is contained in:
Hibryda
parent
4424a90f89
commit
87dd8cb09d
4 changed files with 145 additions and 138 deletions
|
|
@ -25,13 +25,21 @@
|
|||
let detachedConfig = getDetachedConfig();
|
||||
|
||||
let paletteOpen = $state(false);
|
||||
let settingsOpen = $state(false);
|
||||
let drawerOpen = $state(false);
|
||||
let loaded = $state(false);
|
||||
|
||||
let activeTab = $derived(getActiveTab());
|
||||
|
||||
function toggleSettings() {
|
||||
settingsOpen = !settingsOpen;
|
||||
// Panel titles
|
||||
const panelTitles: Record<string, string> = {
|
||||
sessions: 'Sessions',
|
||||
docs: 'Documentation',
|
||||
context: 'Context',
|
||||
settings: 'Settings',
|
||||
};
|
||||
|
||||
function toggleDrawer() {
|
||||
drawerOpen = !drawerOpen;
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
|
|
@ -50,11 +58,20 @@
|
|||
return;
|
||||
}
|
||||
|
||||
// Alt+1..3 — switch workspace tab
|
||||
if (e.altKey && !e.ctrlKey && e.key >= '1' && e.key <= '3') {
|
||||
// Alt+1..4 — switch sidebar tab (and open drawer)
|
||||
if (e.altKey && !e.ctrlKey && e.key >= '1' && e.key <= '4') {
|
||||
e.preventDefault();
|
||||
const tabs = ['sessions', 'docs', 'context'] as const;
|
||||
setActiveTab(tabs[parseInt(e.key) - 1]);
|
||||
const tabs = ['sessions', 'docs', 'context', 'settings'] as const;
|
||||
const idx = parseInt(e.key) - 1;
|
||||
if (idx < tabs.length) {
|
||||
const tab = tabs[idx];
|
||||
if (getActiveTab() === tab && drawerOpen) {
|
||||
drawerOpen = false;
|
||||
} else {
|
||||
setActiveTab(tab);
|
||||
drawerOpen = true;
|
||||
}
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -69,17 +86,29 @@
|
|||
return;
|
||||
}
|
||||
|
||||
// Ctrl+, — toggle settings drawer
|
||||
// Ctrl+, — toggle settings panel
|
||||
if (e.ctrlKey && e.key === ',') {
|
||||
e.preventDefault();
|
||||
toggleSettings();
|
||||
if (getActiveTab() === 'settings' && drawerOpen) {
|
||||
drawerOpen = false;
|
||||
} else {
|
||||
setActiveTab('settings');
|
||||
drawerOpen = true;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Escape — close settings drawer
|
||||
if (e.key === 'Escape' && settingsOpen) {
|
||||
// Ctrl+B — toggle sidebar
|
||||
if (e.ctrlKey && !e.shiftKey && e.key === 'b') {
|
||||
e.preventDefault();
|
||||
settingsOpen = false;
|
||||
drawerOpen = !drawerOpen;
|
||||
return;
|
||||
}
|
||||
|
||||
// Escape — close drawer
|
||||
if (e.key === 'Escape' && drawerOpen) {
|
||||
e.preventDefault();
|
||||
drawerOpen = false;
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
|
@ -111,35 +140,36 @@
|
|||
</div>
|
||||
{:else if loaded}
|
||||
<div class="app-shell">
|
||||
<GlobalTabBar {settingsOpen} ontoggleSettings={toggleSettings} />
|
||||
<div class="main-row">
|
||||
<GlobalTabBar expanded={drawerOpen} ontoggle={toggleDrawer} />
|
||||
|
||||
<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)">
|
||||
{#if drawerOpen}
|
||||
<aside class="sidebar-panel">
|
||||
<div class="panel-header">
|
||||
<h2>{panelTitles[activeTab] ?? ''}</h2>
|
||||
<button class="panel-close" onclick={() => drawerOpen = false} title="Close sidebar (Ctrl+B)">
|
||||
<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 />
|
||||
<div class="panel-content">
|
||||
{#if activeTab === 'sessions'}
|
||||
<ProjectGrid />
|
||||
{:else if activeTab === 'docs'}
|
||||
<DocsTab />
|
||||
{:else if activeTab === 'context'}
|
||||
<ContextTab />
|
||||
{:else if activeTab === 'settings'}
|
||||
<SettingsTab />
|
||||
{/if}
|
||||
</div>
|
||||
</aside>
|
||||
{/if}
|
||||
|
||||
<main class="workspace">
|
||||
<ProjectGrid />
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<StatusBar />
|
||||
|
|
@ -166,62 +196,45 @@
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
.content-area {
|
||||
.main-row {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
display: flex;
|
||||
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;
|
||||
.sidebar-panel {
|
||||
width: 28em;
|
||||
max-width: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--ctp-base);
|
||||
border-right: 1px solid var(--ctp-surface1);
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.drawer-header {
|
||||
.panel-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 16px;
|
||||
padding: 8px 12px;
|
||||
border-bottom: 1px solid var(--ctp-surface0);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.drawer-header h2 {
|
||||
font-size: 0.9rem;
|
||||
.panel-header h2 {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
color: var(--ctp-text);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.drawer-close {
|
||||
.panel-close {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
|
|
@ -229,11 +242,21 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.drawer-close:hover {
|
||||
.panel-close:hover {
|
||||
color: var(--ctp-text);
|
||||
background: var(--ctp-surface0);
|
||||
}
|
||||
|
||||
.panel-content {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.workspace {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -2,89 +2,74 @@
|
|||
import { getActiveTab, setActiveTab, type WorkspaceTab } from '../../stores/workspace.svelte';
|
||||
|
||||
interface Props {
|
||||
settingsOpen?: boolean;
|
||||
ontoggleSettings?: () => void;
|
||||
expanded?: boolean;
|
||||
ontoggle?: () => void;
|
||||
}
|
||||
|
||||
let { settingsOpen = false, ontoggleSettings }: Props = $props();
|
||||
let { expanded = false, ontoggle }: 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: 'Ctrl+,' },
|
||||
];
|
||||
|
||||
// SVG icon paths for each tab
|
||||
const icons: Record<WorkspaceTab, string> = {
|
||||
sessions: 'M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z',
|
||||
docs: 'M6 2h9l5 5v15H4V2h2zm8 0v5h5M8 12h8M8 16h5',
|
||||
context: 'M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 5v5l3 3',
|
||||
settings: 'M10.3 2L9.9 4.4a7 7 0 0 0-1.8 1l-2.2-.9-1.7 3 1.8 1.5a7 7 0 0 0 0 2l-1.8 1.5 1.7 3 2.2-.9a7 7 0 0 0 1.8 1L10.3 18h3.4l.4-2.4a7 7 0 0 0 1.8-1l2.2.9 1.7-3-1.8-1.5a7 7 0 0 0 0-2l1.8-1.5-1.7-3-2.2.9a7 7 0 0 0-1.8-1L13.7 2h-3.4zM12 8a4 4 0 1 1 0 8 4 4 0 0 1 0-8z',
|
||||
};
|
||||
|
||||
function handleTabClick(id: WorkspaceTab) {
|
||||
const current = getActiveTab();
|
||||
if (current === id && expanded) {
|
||||
// Clicking active tab again collapses
|
||||
ontoggle?.();
|
||||
} else {
|
||||
setActiveTab(id);
|
||||
if (!expanded) ontoggle?.();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<nav class="global-tab-bar">
|
||||
<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 class="sidebar-rail">
|
||||
{#each tabs as tab}
|
||||
<button
|
||||
class="rail-btn"
|
||||
class:active={getActiveTab() === tab.id && expanded}
|
||||
onclick={() => handleTabClick(tab.id)}
|
||||
title="{tab.label} ({tab.shortcut})"
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none">
|
||||
<path
|
||||
d={icons[tab.id]}
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
fill="none"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
{/each}
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
.global-tab-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 4px 8px;
|
||||
background: var(--ctp-mantle);
|
||||
border-bottom: 1px solid var(--ctp-surface0);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
.sidebar-rail {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
flex: 1;
|
||||
padding: 6px 4px;
|
||||
background: var(--ctp-mantle);
|
||||
border-right: 1px solid var(--ctp-surface0);
|
||||
flex-shrink: 0;
|
||||
width: 36px;
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
padding: 4px 14px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--ctp-subtext0);
|
||||
font-size: 0.8rem;
|
||||
cursor: pointer;
|
||||
border-radius: 4px 4px 0 0;
|
||||
transition: color 0.15s, background 0.15s;
|
||||
}
|
||||
|
||||
.tab-btn:hover {
|
||||
color: var(--ctp-text);
|
||||
background: var(--ctp-surface0);
|
||||
}
|
||||
|
||||
.tab-btn.active {
|
||||
color: var(--ctp-text);
|
||||
background: var(--ctp-base);
|
||||
border-bottom: 2px solid var(--ctp-blue);
|
||||
}
|
||||
|
||||
.settings-toggle {
|
||||
.rail-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -93,18 +78,17 @@
|
|||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
color: var(--ctp-subtext0);
|
||||
color: var(--ctp-overlay1);
|
||||
cursor: pointer;
|
||||
transition: color 0.15s, background 0.15s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.settings-toggle:hover {
|
||||
.rail-btn:hover {
|
||||
color: var(--ctp-text);
|
||||
background: var(--ctp-surface0);
|
||||
}
|
||||
|
||||
.settings-toggle.active {
|
||||
.rail-btn.active {
|
||||
color: var(--ctp-blue);
|
||||
background: var(--ctp-surface0);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -480,7 +480,7 @@
|
|||
.settings-tab {
|
||||
padding: 12px 16px;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
h2 {
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
export type WorkspaceTab = 'sessions' | 'docs' | 'context' | 'settings';
|
||||
|
||||
export interface TerminalTab {
|
||||
id: string;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue