From 49a0a0d15fa31b8aeeba04805df607968489fda3 Mon Sep 17 00:00:00 2001 From: iris Date: Tue, 9 Jun 2026 09:13:35 +0200 Subject: [PATCH] refactor(frontend): extract the page-chrome into @hive/shared (#1464 step 3) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The standalone pages (/flow, /logs, /stats, /settings) all share the same sticky back-link header, but its CSS lived in the dashboard's common.css under the misnomer `.logs-*` (the comment even noted it was used by more than logs). Promote it to a first-class shared component. - new @hive/shared/chrome.css with neutral `.page-header` / `.page-back` / `.page-title` (cohering with the `.page-content` gutter wrapper); exported from the shared package and @imported into common.css next to base/terminal/tabs.css. - rename the four pages' header markup `.logs-*` → `.page-*`. - drop the old `.logs-*` chrome block from common.css; refresh the stale doc comments in settings.css / stats.css / dashboard.css. CSS-only, behaviour/visual-neutral (same rules, new names + home). The dashboard keeps its own richer sticky `.dashboard-chrome`; unifying the per-agent UI's `.stats-nav` chrome is a larger follow-up, deferred. Part of #1464 step 3. --- frontend/packages/dashboard/src/common.css | 36 ++------------- frontend/packages/dashboard/src/dashboard.css | 7 +-- frontend/packages/dashboard/src/flow.html | 6 +-- frontend/packages/dashboard/src/logs.html | 4 +- frontend/packages/dashboard/src/settings.css | 6 +-- frontend/packages/dashboard/src/settings.html | 6 +-- frontend/packages/dashboard/src/stats.css | 3 +- frontend/packages/dashboard/src/stats.html | 6 +-- frontend/packages/shared/package.json | 3 +- frontend/packages/shared/src/chrome.css | 45 +++++++++++++++++++ 10 files changed, 71 insertions(+), 51 deletions(-) create mode 100644 frontend/packages/shared/src/chrome.css diff --git a/frontend/packages/dashboard/src/common.css b/frontend/packages/dashboard/src/common.css index 305d68d5..5993c10a 100644 --- a/frontend/packages/dashboard/src/common.css +++ b/frontend/packages/dashboard/src/common.css @@ -3,6 +3,7 @@ @import "@hive/shared/base.css"; @import "@hive/shared/terminal.css"; @import "@hive/shared/tabs.css"; +@import "@hive/shared/chrome.css"; /* ─── global typography ───────────────────────────────────────────── Element-level rules shared across all three pages (index, flow, @@ -220,38 +221,9 @@ code { color: var(--fg); } -/* ─── page chrome: header + back link (flow + logs pages) ─────────── - .logs-header / .logs-back / .logs-title are used by both - /flow.html and /logs.html — the same frosted sticky bar pattern. */ -.logs-header { - position: sticky; - top: 0; - z-index: 25; - background: color-mix(in srgb, var(--bg) 92%, transparent); - -webkit-backdrop-filter: blur(8px) saturate(120%); - backdrop-filter: blur(8px) saturate(120%); - border-bottom: 1px solid var(--purple-dim); - display: flex; - align-items: center; - gap: 1.5em; - padding: 0.5em 1.5em; -} - -.logs-back { - color: var(--purple); - text-decoration: none; - font-size: 0.88em; - white-space: nowrap; - flex: none; -} -.logs-back:hover { text-decoration: underline; } - -.logs-title { - color: var(--subtext0); - font-size: 0.85em; - letter-spacing: 0.05em; - flex: none; -} +/* page chrome (.page-header / .page-back / .page-title — the standalone + pages' sticky back-link bar) moved to @hive/shared/chrome.css, imported + at the top of this file. */ /* ─── operator inbox + message rows ──────────────────────────────── .inbox and .msg-* are rendered by common.js (renderInbox) and diff --git a/frontend/packages/dashboard/src/dashboard.css b/frontend/packages/dashboard/src/dashboard.css index dfd2eeb0..a47f3732 100644 --- a/frontend/packages/dashboard/src/dashboard.css +++ b/frontend/packages/dashboard/src/dashboard.css @@ -32,9 +32,10 @@ body.dashboard-shell { margin: 0 0 1em; } /* ← home back-link to the H0M3 hub. Small purple link top-left of the - chrome, mirroring the .logs-back treatment the sub-pages use so the - navigation reads consistently. Full chrome unification (a shared, - reusable tab/back-link component) is a later step. */ + chrome, mirroring the .page-back treatment the standalone pages use + (now shared from @hive/shared/chrome.css) so the navigation reads + consistently. The dashboard keeps this richer sticky chrome of its + own rather than folding into the simple page header. */ .dash-home-back { display: inline-block; color: var(--purple); diff --git a/frontend/packages/dashboard/src/flow.html b/frontend/packages/dashboard/src/flow.html index 6b3d0c7e..ee4e037c 100644 --- a/frontend/packages/dashboard/src/flow.html +++ b/frontend/packages/dashboard/src/flow.html @@ -16,9 +16,9 @@ No full tabbar — the flow page is a dedicated full-viewport terminal surface; navigating back to the menu is the only chrome needed. Pages link back to H0M3, not the dashboard. --> -
- ← home - FL0W +
+ ← home + FL0W diff --git a/frontend/packages/dashboard/src/logs.html b/frontend/packages/dashboard/src/logs.html index 60f0eaba..6ce72586 100644 --- a/frontend/packages/dashboard/src/logs.html +++ b/frontend/packages/dashboard/src/logs.html @@ -15,8 +15,8 @@ -
- ← home +
+ ← home