refactor(v3): simplify sidebar to Settings-only + fix MarkdownPane switching + restyle

This commit is contained in:
Hibryda 2026-03-08 03:44:33 +01:00
parent d2fd9fb6e3
commit e677a6aa6a
4 changed files with 135 additions and 138 deletions

View file

@ -8,53 +8,36 @@
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+,' },
];
const settingsIcon = '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';
// 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
function handleSettingsClick() {
if (getActiveTab() === 'settings' && expanded) {
ontoggle?.();
} else {
setActiveTab(id);
setActiveTab('settings');
if (!expanded) ontoggle?.();
}
}
</script>
<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}
<button
class="rail-btn"
class:active={getActiveTab() === 'settings' && expanded}
onclick={handleSettingsClick}
title="Settings (Ctrl+,)"
>
<svg width="20" height="20" viewBox="0 0 24 24" fill="none">
<path
d={settingsIcon}
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
fill="none"
/>
</svg>
</button>
</nav>
<style>

View file

@ -73,15 +73,17 @@
{/if}
</div>
<div class="project-terminal-area">
<TerminalTabs {project} agentSessionId={mainSessionId} />
</div>
{#if activeTab === 'claude'}
<div class="project-terminal-area">
<TerminalTabs {project} agentSessionId={mainSessionId} />
</div>
{/if}
</div>
<style>
.project-box {
display: grid;
grid-template-rows: auto auto 1fr auto;
grid-template-rows: auto auto 1fr;
min-width: 30rem;
scroll-snap-align: start;
background: var(--ctp-base);