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

This commit is contained in:
Hibryda 2026-03-20 02:14:10 +01:00
parent 4ae558af17
commit bdd4477aec

View file

@ -25,7 +25,9 @@
// Track which tabs have been mounted at least once (for lazy init)
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}`;
tabs = [...tabs, { id, title: `shell ${counter}` }];
counter++;
@ -121,7 +123,7 @@
Terminal panes: always rendered (display:none when collapsed) so xterm state
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)}
{#if mounted.has(tab.id)}
<div
@ -154,6 +156,8 @@
background: var(--ctp-mantle);
border-bottom: 1px solid var(--ctp-surface0);
flex-shrink: 0;
position: relative;
z-index: 10; /* Above terminal canvas so buttons are clickable */
}
.collapse-btn {
@ -266,8 +270,14 @@
/* Terminal pane container */
.term-panes {
height: 12rem;
min-height: 8rem;
min-height: 0;
position: relative;
overflow: hidden;
transition: height 0.15s ease;
}
.term-panes.collapsed {
height: 0;
}
.term-pane {