From bdd4477aec70bb23c255da6293251de563c4b268 Mon Sep 17 00:00:00 2001
From: Hibryda <hibryda@protonmail.com>
Date: Fri, 20 Mar 2026 02:14:10 +0100
Subject: [PATCH] fix(electrobun): terminal collapse animation + tab bar
 z-index above canvas

---
 ui-electrobun/src/mainview/TerminalTabs.svelte | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/ui-electrobun/src/mainview/TerminalTabs.svelte b/ui-electrobun/src/mainview/TerminalTabs.svelte
index ab0baf4..2236a41 100644
--- a/ui-electrobun/src/mainview/TerminalTabs.svelte
+++ b/ui-electrobun/src/mainview/TerminalTabs.svelte
@@ -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 {