frontend: add <hive-tab-strip>, convert logs/credentials/core/builds tabbars

Every sub-page tabbar (logs.html, credentials.html, core.html,
builds.html) hand-wrote the same <nav class="hive-tabbar"><a
class="hive-tab">...</a></nav> boilerplate and then called
createTabStrip() on it after the fact. Add <hive-tab-strip>, a
markup-owning custom element (same reuse-boundary pattern as
<hive-menu>/<hive-side-panel>) that renders that markup from a
declarative tabs list, then wires the existing createTabStrip()
behaviour over what it just rendered — no behaviour duplication.

Convert all four sites to use it: each page's JS now calls
`.configure({ tabs, defaultId, onShow })` on the tabbar element instead
of `createTabStrip(el, opts)`, and configure() returns the identical
{ show, active } shape so nothing downstream changes. builds.js's
rebuild-queue count pill (builds-tab-count-rebuild) is expressed as a
tab's `badgeId` and renders nested in the same spot.

The dashboard's own tabbar and the two no-pane stats time-range
pickers are a different markup/behaviour shape and are intentionally
left alone.
This commit is contained in:
iris 2026-08-02 04:00:40 +02:00 committed by mara
commit 435ef193e1
10 changed files with 103 additions and 75 deletions

View file

@ -16,25 +16,12 @@
meta inputs, and build log history on one page. Carved out of the
old /core.html (rebuild queue + meta inputs) and /logs.html (BUILD
tab) so the full build lifecycle is in one place. Same minimal
chrome as /core.html — a `← home` back-link + a createTabStrip
chrome as /core.html — a `← home` back-link + a <hive-tab-strip>
sub-tab nav. Default sub-tab is the rebuild queue. -->
<header class="page-header">
<a class="page-back" href="/">← home</a>
<nav class="hive-tabbar builds-tabbar" id="builds-tabbar" role="tablist">
<a class="hive-tab" id="builds-tab-rebuild" href="#rebuild" role="tab"
aria-controls="builds-pane-rebuild" data-tab="rebuild">
<span class="builds-tab-label">R3BU1LD QU3U3</span>
<span class="tab-count" id="builds-tab-count-rebuild" hidden></span>
</a>
<a class="hive-tab" id="builds-tab-meta" href="#meta" role="tab"
aria-controls="builds-pane-meta" data-tab="meta">
<span class="builds-tab-label">M3T4 1NPUTS</span>
</a>
<a class="hive-tab" id="builds-tab-buildlogs" href="#buildlogs" role="tab"
aria-controls="builds-pane-buildlogs" data-tab="buildlogs">
<span class="builds-tab-label">BUILD L0GS</span>
</a>
</nav>
<hive-tab-strip class="hive-tabbar builds-tabbar" id="builds-tabbar" prefix="builds"
role="tablist"></hive-tab-strip>
</header>
<main class="builds-main">