refactor(v3): simplify sidebar to Settings-only + fix MarkdownPane switching + restyle
This commit is contained in:
parent
d2fd9fb6e3
commit
e677a6aa6a
4 changed files with 135 additions and 138 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue