dexter/BTerminal
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

45
v2/src/App.svelte
View file

@ -8,8 +8,6 @@
// Workspace components // Workspace components
import GlobalTabBar from './lib/components/Workspace/GlobalTabBar.svelte'; import GlobalTabBar from './lib/components/Workspace/GlobalTabBar.svelte';
import ProjectGrid from './lib/components/Workspace/ProjectGrid.svelte'; import ProjectGrid from './lib/components/Workspace/ProjectGrid.svelte';
import DocsTab from './lib/components/Workspace/DocsTab.svelte';
import ContextTab from './lib/components/Workspace/ContextTab.svelte';
import SettingsTab from './lib/components/Workspace/SettingsTab.svelte'; import SettingsTab from './lib/components/Workspace/SettingsTab.svelte';
import CommandPalette from './lib/components/Workspace/CommandPalette.svelte'; import CommandPalette from './lib/components/Workspace/CommandPalette.svelte';
@ -32,28 +30,17 @@
let panelContentEl: HTMLElement | undefined = $state(); let panelContentEl: HTMLElement | undefined = $state();
let panelWidth = $state<string | undefined>(undefined); let panelWidth = $state<string | undefined>(undefined);
// Panel titles // Measure the panel content's natural width
const panelTitles: Record<string, string> = {
sessions: 'Sessions',
docs: 'Documentation',
context: 'Context',
settings: 'Settings',
};
// Measure the panel content's natural width by finding the widest
// nowrap element or element with min-width, then sizing the drawer to fit.
$effect(() => { $effect(() => {
const el = panelContentEl; const el = panelContentEl;
void activeTab; void activeTab;
if (!el) { panelWidth = undefined; return; } if (!el) { panelWidth = undefined; return; }
const frame = requestAnimationFrame(() => { const frame = requestAnimationFrame(() => {
// Find all elements that define intrinsic width (nowrap text, inputs, etc.)
let maxW = 0; let maxW = 0;
const candidates = el.querySelectorAll('[style*="white-space"], h3, h4, input, .settings-list, .settings-tab, .docs-tab, .context-tab'); const candidates = el.querySelectorAll('[style*="white-space"], h3, h4, input, .settings-list, .settings-tab');
for (const c of candidates) { for (const c of candidates) {
maxW = Math.max(maxW, c.scrollWidth); maxW = Math.max(maxW, c.scrollWidth);
} }
// Also check the direct child's min-width
const child = el.firstElementChild as HTMLElement; const child = el.firstElementChild as HTMLElement;
if (child) { if (child) {
const cs = getComputedStyle(child); const cs = getComputedStyle(child);
@ -61,7 +48,6 @@
if (!isNaN(mw)) maxW = Math.max(maxW, mw); if (!isNaN(mw)) maxW = Math.max(maxW, mw);
} }
if (maxW > 0) { if (maxW > 0) {
// Add padding for panel-content's own padding
panelWidth = `${maxW + 24}px`; panelWidth = `${maxW + 24}px`;
} }
}); });
@ -88,23 +74,6 @@
return; return;
} }
// 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', '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;
}
// Ctrl+1..5 — focus project by index // Ctrl+1..5 — focus project by index
if (e.ctrlKey && !e.shiftKey && e.key >= '1' && e.key <= '5') { if (e.ctrlKey && !e.shiftKey && e.key >= '1' && e.key <= '5') {
e.preventDefault(); e.preventDefault();
@ -176,7 +145,7 @@
{#if drawerOpen} {#if drawerOpen}
<aside class="sidebar-panel" style:width={panelWidth}> <aside class="sidebar-panel" style:width={panelWidth}>
<div class="panel-header"> <div class="panel-header">
<h2>{panelTitles[activeTab] ?? ''}</h2> <h2>Settings</h2>
<button class="panel-close" onclick={() => drawerOpen = false} title="Close sidebar (Ctrl+B)"> <button class="panel-close" onclick={() => drawerOpen = false} title="Close sidebar (Ctrl+B)">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"> <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"/> <path d="M2 2l10 10M12 2L2 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
@ -184,15 +153,7 @@
</button> </button>
</div> </div>
<div class="panel-content" bind:this={panelContentEl}> <div class="panel-content" bind:this={panelContentEl}>
{#if activeTab === 'sessions'}
<ProjectGrid />
{:else if activeTab === 'docs'}
<DocsTab />
{:else if activeTab === 'context'}
<ContextTab />
{:else if activeTab === 'settings'}
<SettingsTab /> <SettingsTab />
{/if}
</div> </div>
</aside> </aside>
{/if} {/if}

157
v2/src/lib/components/Markdown/MarkdownPane.svelte
View file

@ -15,6 +15,8 @@
let renderedHtml = $state(''); let renderedHtml = $state('');
let error = $state(''); let error = $state('');
let unlisten: (() => void) | undefined; let unlisten: (() => void) | undefined;
let currentWatchPath = $state<string | null>(null);
let highlighterReady = $state(false);
const renderer = new Renderer(); const renderer = new Renderer();
renderer.code = function({ text, lang }: { text: string; lang?: string }) { renderer.code = function({ text, lang }: { text: string; lang?: string }) {
@ -34,11 +36,27 @@
} }
} }
// React to filePath changes — re-watch the new file
$effect(() => {
if (!highlighterReady) return;
const path = filePath;
if (path === currentWatchPath) return;
// Unwatch previous file
if (currentWatchPath) {
unwatchFile(paneId).catch(() => {});
}
currentWatchPath = path;
watchFile(paneId, path)
.then(content => renderMarkdown(content))
.catch(e => { error = `Failed to open file: ${e}`; });
});
onMount(async () => { onMount(async () => {
try { try {
await getHighlighter(); await getHighlighter();
const content = await watchFile(paneId, filePath); highlighterReady = true;
renderMarkdown(content);
unlisten = await onFileChanged((payload: FileChangedPayload) => { unlisten = await onFileChanged((payload: FileChangedPayload) => {
if (payload.pane_id === paneId) { if (payload.pane_id === paneId) {
@ -46,7 +64,7 @@
} }
}); });
} catch (e) { } catch (e) {
error = `Failed to open file: ${e}`; error = `Failed to initialize: ${e}`;
} }
}); });
@ -72,78 +90,98 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
background: var(--bg-primary); background: var(--ctp-base);
color: var(--text-primary); color: var(--ctp-text);
} }
.markdown-body { .markdown-body {
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
padding: 16px 20px; padding: 1.25rem 1.5rem;
font-size: 14px; font-family: var(--ui-font-family, sans-serif);
line-height: 1.6; font-size: 0.875rem;
line-height: 1.7;
} }
.markdown-body :global(h1) { .markdown-body :global(h1) {
font-size: 1.6em; font-size: 1.6em;
font-weight: 700; font-weight: 700;
margin: 0.8em 0 0.4em; margin: 1em 0 0.5em;
color: var(--ctp-lavender); color: var(--ctp-lavender);
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--ctp-surface1);
padding-bottom: 0.3em; padding-bottom: 0.3em;
} }
.markdown-body :global(h2) { .markdown-body :global(h2) {
font-size: 1.3em; font-size: 1.3em;
font-weight: 600; font-weight: 600;
margin: 0.7em 0 0.3em; margin: 0.9em 0 0.4em;
color: var(--ctp-blue); color: var(--ctp-blue);
} }
.markdown-body :global(h3) { .markdown-body :global(h3) {
font-size: 1.1em; font-size: 1.1em;
font-weight: 600; font-weight: 600;
margin: 0.6em 0 0.3em; margin: 0.8em 0 0.3em;
color: var(--ctp-sapphire); color: var(--ctp-sapphire);
} }
.markdown-body :global(h4) {
font-size: 1em;
font-weight: 600;
margin: 0.6em 0 0.3em;
color: var(--ctp-teal);
}
.markdown-body :global(p) { .markdown-body :global(p) {
margin: 0.5em 0; margin: 0.6em 0;
}
.markdown-body :global(strong) {
color: var(--ctp-text);
font-weight: 600;
}
.markdown-body :global(em) {
color: var(--ctp-subtext1);
} }
.markdown-body :global(code) { .markdown-body :global(code) {
background: var(--bg-surface); background: var(--ctp-surface0);
padding: 1px 5px; padding: 0.125em 0.375em;
border-radius: 3px; border-radius: 0.25em;
font-family: var(--font-mono); font-family: var(--term-font-family, 'JetBrains Mono', monospace);
font-size: 0.9em; font-size: 0.85em;
color: var(--ctp-green); color: var(--ctp-green);
} }
.markdown-body :global(pre) { .markdown-body :global(pre) {
background: var(--bg-surface); background: var(--ctp-mantle);
padding: 12px 14px; padding: 0.875rem 1rem;
border-radius: var(--border-radius); border-radius: 0.375rem;
border: 1px solid var(--ctp-surface0);
overflow-x: auto; overflow-x: auto;
font-size: 12px; font-size: 0.8rem;
line-height: 1.5; line-height: 1.55;
margin: 0.6em 0; margin: 0.75em 0;
} }
.markdown-body :global(pre code) { .markdown-body :global(pre code) {
background: none; background: none;
padding: 0; padding: 0;
color: var(--text-primary); color: var(--ctp-text);
font-size: inherit;
} }
.markdown-body :global(.shiki) { .markdown-body :global(.shiki) {
background: var(--bg-surface) !important; background: var(--ctp-mantle) !important;
padding: 12px 14px; padding: 0.875rem 1rem;
border-radius: var(--border-radius); border-radius: 0.375rem;
border: 1px solid var(--ctp-surface0);
overflow-x: auto; overflow-x: auto;
font-size: 12px; font-size: 0.8rem;
line-height: 1.5; line-height: 1.55;
margin: 0.6em 0; margin: 0.75em 0;
} }
.markdown-body :global(.shiki code) { .markdown-body :global(.shiki code) {
@ -153,70 +191,83 @@
.markdown-body :global(blockquote) { .markdown-body :global(blockquote) {
border-left: 3px solid var(--ctp-mauve); border-left: 3px solid var(--ctp-mauve);
margin: 0.5em 0; margin: 0.75em 0;
padding: 4px 12px; padding: 0.375rem 1rem;
color: var(--text-secondary); color: var(--ctp-subtext0);
background: color-mix(in srgb, var(--ctp-surface0) 30%, transparent);
border-radius: 0 0.25rem 0.25rem 0;
} }
.markdown-body :global(ul), .markdown-body :global(ol) { .markdown-body :global(ul), .markdown-body :global(ol) {
padding-left: 24px; padding-left: 1.5rem;
margin: 0.4em 0; margin: 0.5em 0;
} }
.markdown-body :global(li) { .markdown-body :global(li) {
margin: 0.2em 0; margin: 0.25em 0;
}
.markdown-body :global(li::marker) {
color: var(--ctp-overlay1);
} }
.markdown-body :global(a) { .markdown-body :global(a) {
color: var(--ctp-blue); color: var(--ctp-blue);
text-decoration: none; text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 0.15s;
} }
.markdown-body :global(a:hover) { .markdown-body :global(a:hover) {
text-decoration: underline; border-bottom-color: var(--ctp-blue);
} }
.markdown-body :global(table) { .markdown-body :global(table) {
border-collapse: collapse; border-collapse: collapse;
width: 100%; width: 100%;
margin: 0.5em 0; margin: 0.75em 0;
font-size: 13px; font-size: 0.825rem;
} }
.markdown-body :global(th), .markdown-body :global(td) { .markdown-body :global(th), .markdown-body :global(td) {
border: 1px solid var(--border); border: 1px solid var(--ctp-surface1);
padding: 6px 10px; padding: 0.4rem 0.75rem;
text-align: left; text-align: left;
} }
.markdown-body :global(th) { .markdown-body :global(th) {
background: var(--bg-surface); background: var(--ctp-surface0);
font-weight: 600; font-weight: 600;
color: var(--ctp-subtext1);
}
.markdown-body :global(tr:hover td) {
background: color-mix(in srgb, var(--ctp-surface0) 40%, transparent);
} }
.markdown-body :global(hr) { .markdown-body :global(hr) {
border: none; border: none;
border-top: 1px solid var(--border); border-top: 1px solid var(--ctp-surface1);
margin: 1em 0; margin: 1.5em 0;
} }
.markdown-body :global(img) { .markdown-body :global(img) {
max-width: 100%; max-width: 100%;
border-radius: var(--border-radius); border-radius: 0.375rem;
} }
.file-path { .file-path {
border-top: 1px solid var(--border); border-top: 1px solid var(--ctp-surface0);
padding: 4px 12px; padding: 0.25rem 0.75rem;
font-size: 10px; font-size: 0.65rem;
font-family: var(--font-mono); font-family: var(--term-font-family, monospace);
color: var(--text-muted); color: var(--ctp-overlay0);
flex-shrink: 0; flex-shrink: 0;
} }
.error { .error {
color: var(--ctp-red); color: var(--ctp-red);
padding: 16px; padding: 1rem;
font-size: 13px; font-size: 0.85rem;
} }
</style> </style>

33
v2/src/lib/components/Workspace/GlobalTabBar.svelte
View file

@ -8,44 +8,28 @@
let { expanded = false, ontoggle }: Props = $props(); let { expanded = false, ontoggle }: Props = $props();
const tabs: { id: WorkspaceTab; label: string; shortcut: string }[] = [ 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';
{ 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 function handleSettingsClick() {
const icons: Record<WorkspaceTab, string> = { if (getActiveTab() === 'settings' && expanded) {
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?.(); ontoggle?.();
} else { } else {
setActiveTab(id); setActiveTab('settings');
if (!expanded) ontoggle?.(); if (!expanded) ontoggle?.();
} }
} }
</script> </script>
<nav class="sidebar-rail"> <nav class="sidebar-rail">
{#each tabs as tab}
<button <button
class="rail-btn" class="rail-btn"
class:active={getActiveTab() === tab.id && expanded} class:active={getActiveTab() === 'settings' && expanded}
onclick={() => handleTabClick(tab.id)} onclick={handleSettingsClick}
title="{tab.label} ({tab.shortcut})" title="Settings (Ctrl+,)"
> >
<svg width="20" height="20" viewBox="0 0 24 24" fill="none"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
<path <path
d={icons[tab.id]} d={settingsIcon}
stroke="currentColor" stroke="currentColor"
stroke-width="1.5" stroke-width="1.5"
stroke-linecap="round" stroke-linecap="round"
@ -54,7 +38,6 @@
/> />
</svg> </svg>
</button> </button>
{/each}
</nav> </nav>
<style> <style>

4
v2/src/lib/components/Workspace/ProjectBox.svelte
View file

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