agents-orchestrator/agent-orchestrator
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(electrobun): terminal collapse animation + tab bar z-index above canvas

Browse source
This commit is contained in:
Hibryda 2026-03-20 02:14:10 +01:00
parent 4ae558af17
commit bdd4477aec
1 changed files with 13 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

16
ui-electrobun/src/mainview/TerminalTabs.svelte
View file

@ -25,7 +25,9 @@
// Track which tabs have been mounted at least once (for lazy init) // Track which tabs have been mounted at least once (for lazy init)
let mounted = $state<Set<string>>(new Set([firstTabId])); let mounted = $state<Set<string>>(new Set([firstTabId]));
function addTab() { function addTab(e?: MouseEvent) {
// Blur terminal canvas so future clicks on tab bar work
if (e) (e.target as HTMLElement)?.focus();
const id = `${projectId}-t${counter}`; const id = `${projectId}-t${counter}`;
tabs = [...tabs, { id, title: `shell ${counter}` }]; tabs = [...tabs, { id, title: `shell ${counter}` }];
counter++; counter++;
@ -121,7 +123,7 @@
Terminal panes: always rendered (display:none when collapsed) so xterm state Terminal panes: always rendered (display:none when collapsed) so xterm state
is preserved across collapse/expand. Using display:none instead of {#if}. is preserved across collapse/expand. Using display:none instead of {#if}.
--> -->
<div class="term-panes" style:display={collapsed ? 'none' : 'block'}> <div class="term-panes" class:collapsed>
{#each tabs as tab (tab.id)} {#each tabs as tab (tab.id)}
{#if mounted.has(tab.id)} {#if mounted.has(tab.id)}
<div <div
@ -154,6 +156,8 @@
background: var(--ctp-mantle); background: var(--ctp-mantle);
border-bottom: 1px solid var(--ctp-surface0); border-bottom: 1px solid var(--ctp-surface0);
flex-shrink: 0; flex-shrink: 0;
position: relative;
z-index: 10; /* Above terminal canvas so buttons are clickable */
} }
.collapse-btn { .collapse-btn {
@ -266,8 +270,14 @@
/* Terminal pane container */ /* Terminal pane container */
.term-panes { .term-panes {
height: 12rem; height: 12rem;
min-height: 8rem; min-height: 0;
position: relative; position: relative;
overflow: hidden;
transition: height 0.15s ease;
}
.term-panes.collapsed {
height: 0;
} }
.term-pane { .term-pane {