vinzenz/hyperhive
vinzenz/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor(frontend): add createTabStrip + migrate logs sub-tabs (#1464 step 1)

Browse source 
Adds @hive/shared/tabs.js — createTabStrip(tabbar, {defaultId, onShow}):
a hash-routed tab strip that resolves controls by `[data-tab="<id>"]`
inside the passed container and panels by `[data-tab-pane="<id>"]`,
toggling `.hive-tab--active` + aria-selected + the panel's `hidden`, and
firing onShow(id) for per-tab side-effects. Always hash-routed (deep-
linkable + back/forward), no element-resolver callbacks (convention over
config), per the #1464 design review.

Wires it up: @hive/shared exports `./tabs.js` + `./tabs.css`, and
common.css @imports tabs.css (component structure, not a swap target, so
inlining is fine — unlike theme.css).

Migrates the logs sub-tabs as the first consumer: markup uses
`.hive-tab`/`data-tab`/`data-tab-pane`, logs.css drops the duplicated
base styles (keeps only its `flex:1` layout delta), and logs.js swaps its
activeTab/showTab/hashchange for createTabStrip (onShow lazy-loads the
SYSTEM tab). Behaviour-preserving. aria-selected is now standardised.
This commit is contained in:
iris 2026-06-08 22:03:39 +02:00
commit e1c276a06e
7 changed files with 103 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

22
frontend/packages/dashboard/src/logs.css
View file

@ -7,29 +7,13 @@ body.logs-shell {
padding: 0;
}
/* Base tab styling now lives in @hive/shared/tabs.css (.hive-tab*). The
logs strip only adds a layout delta: fill the header row next to the
← home back-link. */
.logs-tabbar {
display: flex;
gap: 0.2em;
flex: 1;
}
.logs-tab {
display: inline-flex;
align-items: center;
padding: 0.35em 0.9em;
border-radius: 4px;
color: var(--subtext0);
text-decoration: none;
font-size: 0.85em;
letter-spacing: 0.05em;
transition: background 100ms, color 100ms;
}
.logs-tab:hover { background: var(--border); color: var(--fg); }
.logs-tab.logs-tab-active {
background: var(--border);
color: var(--purple);
}
.logs-main {
padding: 1.2em 1.5em 2em;
}