fix: unified fullscreen terminal header

- Add showControls prop to TerminalComponent to optionally hide internal header
- Add reset() method to TerminalRef for external reset control
- TerminalPage now renders a unified fullscreen header bar combining:
  - Session tabs (TerminalSessionTabs)
  - Terminal controls (status dot, A-, A+, Reset, Exit Fullscreen)
- Unified header is always visible in fullscreen (no hover-to-reveal)
- TerminalComponent internal header hidden when in fullscreen mode
- Remove old CSS that hid session tabs with opacity:0 until hover

Quality gates: pytest 188 passed, frontend typecheck clean

Fixes: terminal-fullscreen-unified-header
This commit is contained in:
Alex Blank
2026-05-29 10:34:31 +02:00
parent 0fdbef578f
commit 8926152fca
7 changed files with 297 additions and 95 deletions
+49 -10
View File
@@ -2890,18 +2890,57 @@ a.nav-item,
border-radius: 0;
}
.terminal-page.fullscreen .terminal-session-tabs {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 10;
opacity: 0;
transition: opacity 0.3s;
/* Unified fullscreen header: session tabs + terminal controls */
.terminal-fullscreen-header {
display: flex;
align-items: center;
justify-content: space-between;
background: #2d2d2d;
border-bottom: 1px solid #3e3e3e;
flex-shrink: 0;
min-height: 0;
}
.terminal-page.fullscreen .terminal-session-tabs:hover {
opacity: 1;
.terminal-fullscreen-header-tabs {
flex: 1;
min-width: 0;
overflow: hidden;
}
.terminal-fullscreen-header-tabs .terminal-session-tabs {
background: transparent;
border-bottom: none;
}
.terminal-fullscreen-header-controls {
display: flex;
align-items: center;
gap: var(--space-2);
padding: 0 var(--space-3);
flex-shrink: 0;
border-left: 1px solid #3e3e3e;
}
.terminal-fullscreen-status {
width: 8px;
height: 8px;
border-radius: 50%;
background: #666;
flex-shrink: 0;
}
.terminal-fullscreen-status.connecting {
background: #f5f543;
animation: pulse 1.5s infinite;
}
.terminal-fullscreen-status.connected {
background: #0dbc79;
}
.terminal-fullscreen-status.disconnected,
.terminal-fullscreen-status.error {
background: #cd3131;
}
/* Mobile auto-hide header and tabs */