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
|
|
@ -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