mitchell/hamlab
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 14 Wiki Activity

Terminal sessions move from the rail into a tab strip on the terminal page

Browse Source 
The rail is now a flat list of pages; Terminal is one of them.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
Mitchell-Johnson
2026-09-18 22:10:22 -07:00
co-authored by Claude Fable 5.1
parent 7eb00d089f
commit 91b7f4f009
5 changed files with 92 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/styles.css
+17 -12
View File
@@ -4,7 +4,7 @@
--ok: #3fb950; --bad: #ff7b72;
--s1: #3987e5; --s2: #c98500; --track: rgba(57, 135, 229, .18);
--btn-fg: #111; --term-bg: var(--term-bg); --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
--header-h: 44px; --footer-h: 28px; --rail-w: 220px;
--header-h: 44px; --footer-h: 28px; --rail-w: 220px; --tabs-h: 34px;
}
* { box-sizing: border-box; }
html, body, #root { height: 100%; margin: 0; }
@@ -46,20 +46,22 @@ button { font: inherit; color: inherit; background: none; border: 0; cursor: poi
.chev { width: 10px; color: var(--muted); font-size: 11px; }
.gicon { width: 18px; text-align: center; color: var(--accent2); font-family: ui-monospace, monospace; font-size: 12px; display: inline-flex; justify-content: center; align-items: center; }
.badge { margin-left: auto; font-size: 10px; text-transform: uppercase; border: 1px solid var(--border); border-radius: 3px; padding: 0 4px; }
.leaves { padding: 2px 0 6px; }
.leaf { display: flex; align-items: center; gap: 8px; padding: 7px 12px 7px 30px; cursor: pointer; width: 100%; text-align: left; }
.leaf:hover { background: var(--bg3); }
.leaf.active { background: var(--bg3); box-shadow: inset 3px 0 0 var(--accent); }
.leaf.exited .lname { color: var(--muted); text-decoration: line-through; }
.leaf.new { color: var(--accent2); }
.lname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leaf-actions { display: flex; gap: 2px; }
.sdot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex-shrink: 0; }
.sdot.run { background: var(--ok); }
/* main + terminal */
.main { flex: 1; min-width: 0; position: relative; background: var(--term-bg); }
.term { position: absolute; inset: 0; padding: 6px 0 0 6px; }
.term { position: absolute; inset: var(--tabs-h) 0 0 0; padding: 6px 0 0 6px; }
.term-tabs { position: absolute; top: 0; left: 0; right: 0; height: var(--tabs-h); display: flex; align-items: stretch; background: var(--bg2); border-bottom: 1px solid var(--border); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.term-tabs::-webkit-scrollbar { display: none; }
.ttab { flex: 0 1 200px; min-width: 96px; display: flex; align-items: center; gap: 6px; padding: 0 4px 0 10px; cursor: pointer; border-right: 1px solid var(--border); color: var(--muted); font-size: 13px; user-select: none; }
.ttab:hover { background: var(--bg3); color: var(--fg); }
.ttab.active { background: var(--term-bg); color: var(--fg); box-shadow: inset 0 2px 0 var(--accent); }
.ttab.exited .tname { text-decoration: line-through; }
.ttab .icon-btn { padding: 0 5px; font-size: 12px; }
.ttab:not(.active):not(:hover) .icon-btn { visibility: hidden; }
.ttab.new { flex: 0 0 auto; min-width: 40px; justify-content: center; padding: 0 12px; border-right: 0; color: var(--accent2); font-size: 16px; position: sticky; right: 0; background: var(--bg2); box-shadow: -1px 0 0 var(--border); }
.tname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.term-inner { height: 100%; }
.term .xterm { height: 100%; }
.xterm-viewport::-webkit-scrollbar { width: 8px; } .xterm-viewport::-webkit-scrollbar-thumb { background: var(--border); }
@@ -79,6 +81,7 @@ button { font: inherit; color: inherit; background: none; border: 0; cursor: poi
.drawer-open .rail { transform: none; }
.drawer-open .backdrop { display: block; position: absolute; inset: 0; z-index: 9; background: rgba(0,0,0,.5); }
.footer { font-size: 11px; }
.ttab { flex: 0 0 auto; max-width: 70vw; }
}
/* dashboard */
@@ -369,7 +372,7 @@ h2.section { margin: 0; font-size: 13px; font-weight: 600; color: var(--muted);
/* per-theme flourishes */
[data-theme="cyberpunk"] .brand, [data-theme="cyberpunk"] .login h1 { text-shadow: 0 0 8px rgba(255, 43, 214, .7), 0 0 18px rgba(255, 43, 214, .35); }
[data-theme="cyberpunk"] .gicon, [data-theme="cyberpunk"] .box-title { text-shadow: 0 0 6px rgba(0, 229, 255, .6); }
[data-theme="cyberpunk"] .leaf.active, [data-theme="cyberpunk"] .group-head.active { box-shadow: inset 3px 0 0 var(--accent), 0 0 12px rgba(255, 43, 214, .25); }
[data-theme="cyberpunk"] .group-head.active { box-shadow: inset 3px 0 0 var(--accent), 0 0 12px rgba(255, 43, 214, .25); }
[data-theme="retro"] body, [data-theme="retro"] .btn, [data-theme="retro"] input, [data-theme="retro"] select { font-family: var(--mono); }
[data-theme="retro"] .brand, [data-theme="retro"] .login h1 { text-shadow: 0 0 6px rgba(255, 176, 0, .6); letter-spacing: 1px; }
[data-theme="retro"] .app::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 100; background: repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.12) 2px 3px); }
@@ -384,7 +387,9 @@ h2.section { margin: 0; font-size: 13px; font-weight: 600; color: var(--muted);
@media (pointer: coarse) {
.btn, .chip, .icon-btn, .link, .th, .mod-tools button, .hide-item, .crumb, .files-tools select, .procs-tools select, .dash-bar select { min-height: 36px; padding-top: 6px; padding-bottom: 6px; }
.icon-btn { min-width: 36px; }
.leaf-actions .icon-btn { min-width: 34px; }
:root { --tabs-h: 40px; }
.ttab .icon-btn { min-width: 30px; }
.ttab:not(.active) .icon-btn { display: none; }
.header .link, .header .icon-btn { min-height: 36px; display: inline-flex; align-items: center; }
.mod-tools { margin-top: 0; }
}