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

fix(electrobun): tab bar at bottom, collapse slides down naturally

Browse source
This commit is contained in:
Hibryda 2026-03-20 02:29:49 +01:00
parent cb4fe5bd4a
commit 3d1cd0028f
5 changed files with 56 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

2
ui-electrobun/build/dev-linux-x64/AgentOrchestrator-dev/Resources/app/views/mainview/assets/index-C1lqQ5yX.js → ui-electrobun/build/dev-linux-x64/AgentOrchestrator-dev/Resources/app/views/mainview/assets/index-CTw1Ditw.js
View file

File diff suppressed because one or more lines are too long

32
ui-electrobun/build/dev-linux-x64/AgentOrchestrator-dev/Resources/app/views/mainview/assets/index-ZExxpdQV.css Normal file
View file

File diff suppressed because one or more lines are too long

32
ui-electrobun/build/dev-linux-x64/AgentOrchestrator-dev/Resources/app/views/mainview/assets/index-udrfKXO8.css
View file

File diff suppressed because one or more lines are too long

4
ui-electrobun/build/dev-linux-x64/AgentOrchestrator-dev/Resources/app/views/mainview/index.html
View file

@ -4,8 +4,8 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Svelte App</title> <title>Svelte App</title>
<script type="module" crossorigin src="/assets/index-C1lqQ5yX.js"></script> <script type="module" crossorigin src="/assets/index-CTw1Ditw.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-udrfKXO8.css"> <link rel="stylesheet" crossorigin href="/assets/index-ZExxpdQV.css">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

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

@ -61,7 +61,23 @@
</script> </script>
<div class="terminal-section" style="--accent: {accent}"> <div class="terminal-section" style="--accent: {accent}">
<!-- Section header: collapse toggle + terminal tabs --> <!-- Terminal panes ABOVE the tab bar — collapse shrinks upward, tab bar stays at bottom -->
<div class="term-panes" class:collapsed>
{#each tabs as tab (tab.id)}
{#if mounted.has(tab.id)}
<div
class="term-pane"
style:display={activeTabId === tab.id ? 'flex' : 'none'}
role="tabpanel"
aria-label={tab.title}
>
<Terminal />
</div>
{/if}
{/each}
</div>
<!-- Tab bar at BOTTOM — slides down as panes collapse -->
<div class="term-section-header"> <div class="term-section-header">
<button <button
class="collapse-btn" class="collapse-btn"
@ -81,11 +97,10 @@
stroke-linejoin="round" stroke-linejoin="round"
aria-hidden="true" aria-hidden="true"
> >
<polyline points="6 9 12 15 18 9"/> <polyline points="6 15 12 9 18 15"/>
</svg> </svg>
</button> </button>
<!-- Tab pills -->
<div class="term-tabs" role="tablist" aria-label="Terminal tabs"> <div class="term-tabs" role="tablist" aria-label="Terminal tabs">
{#each tabs as tab (tab.id)} {#each tabs as tab (tab.id)}
<button <button
@ -118,25 +133,6 @@
>+</button> >+</button>
</div> </div>
</div> </div>
<!--
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" class:collapsed>
{#each tabs as tab (tab.id)}
{#if mounted.has(tab.id)}
<div
class="term-pane"
style:display={activeTabId === tab.id ? 'flex' : 'none'}
role="tabpanel"
aria-label={tab.title}
>
<Terminal />
</div>
{/if}
{/each}
</div>
</div> </div>
<style> <style>
@ -154,10 +150,10 @@
align-items: stretch; align-items: stretch;
height: 1.875rem; height: 1.875rem;
background: var(--ctp-mantle); background: var(--ctp-mantle);
border-bottom: 1px solid var(--ctp-surface0); border-top: 1px solid var(--ctp-surface0);
flex-shrink: 0; flex-shrink: 0;
position: relative; position: relative;
z-index: 10; /* Above terminal canvas so buttons are clickable */ z-index: 10;
} }
.collapse-btn { .collapse-btn {
@ -184,7 +180,7 @@
} }
.chevron.rotated { .chevron.rotated {
transform: rotate(-90deg); transform: rotate(90deg);
} }
/* Tab pills */ /* Tab pills */