diff --git a/docs/web-ui/README.md b/docs/web-ui/README.md index 6157a06c..033fa629 100644 --- a/docs/web-ui/README.md +++ b/docs/web-ui/README.md @@ -11,7 +11,7 @@ what you actually do here. ## Where things are Everything starts at the **dashboard**, served at `/`. A pages menu -(the `☰` button at the left of the tab strip) links to the other +(the link icon beside the profile avatar, at the right of the tab strip) links to the other surfaces — Stats, the API docs and the swarm UI — and each of those pages links back to the dashboard. diff --git a/docs/web-ui/dashboard.md b/docs/web-ui/dashboard.md index 6e4b171d..23b324bb 100644 --- a/docs/web-ui/dashboard.md +++ b/docs/web-ui/dashboard.md @@ -17,8 +17,9 @@ is a standalone page reached from the pages menu, not from the dashboard tab strip. **Chrome header** (fixed, overlays the active tab pane): -- **Pages menu**: a `☰` button at the left of the chrome (`links-menu.js`) - opening a popover with links to **stats** +- **Pages menu**: a link icon at the right end of the chrome, beside the + profile avatar (`links-menu.js`, `@hive/shared`'s `LinksMenu`, the same + component the swarm UI uses for its service links), opening a popover with links to **stats** (`/stats.html`), **api docs** (`/api/docs/`) and **swarm** (the swarm UI at the swarm apex domain, opened in a new tab). The swarm entry comes from `state.swarm_public_url`, which hive-c0re reads from diff --git a/frontend/packages/dashboard/src/dashboard.css b/frontend/packages/dashboard/src/dashboard.css index 5304605d..a2364718 100644 --- a/frontend/packages/dashboard/src/dashboard.css +++ b/frontend/packages/dashboard/src/dashboard.css @@ -8,6 +8,7 @@ @import "@hive/shared/jobq-rollup.css"; @import "@hive/shared/jobq-graph.css"; @import "@hive/shared/user-menu.css"; +@import "@hive/shared/links-menu.css"; /* ─── tabbed dashboard chrome ────────────────────────────────────── Top-of-page sticky header with banner + tab strip. SSE stays @@ -43,71 +44,20 @@ body.dashboard-shell { padding: 0.3em 1em; margin: 0 0 1em; } -/* Profile menu (user-menu.js): the avatar at the right end of the chrome. - Its own look is `@hive/shared/user-menu.css`'s. */ -.user-menu-slot { +/* The pages menu and the profile menu, together at the right end of the + chrome. Their own looks are `@hive/shared/links-menu.css`'s and + `@hive/shared/user-menu.css`'s. */ +.dashboard-chrome-actions { + display: flex; + align-items: center; + gap: 0.25em; flex: none; margin-left: auto; } -/* Pages menu (links-menu.js): one icon button at the left of the chrome - that opens a popover of the standalone pages and the swarm UI. Same - shape as the swarm UI's LinksMenu — quiet until hovered or open. The - explicit `[hidden]` rule is needed because `display: flex` on the - popover would otherwise beat the UA `[hidden]` style. */ -.links-menu { - position: relative; +.links-menu-slot, +.user-menu-slot { flex: none; } -.links-menu-button { - display: flex; - align-items: center; - justify-content: center; - width: 2em; - height: 2em; - padding: 0; - border: 1px solid transparent; - border-radius: 0.4em; - background: none; - color: var(--purple); - font-size: 1em; - line-height: 1; - cursor: pointer; -} -.links-menu-button:hover, -.links-menu-button[aria-expanded="true"] { - border-color: var(--border); - background: var(--bg-elev); -} -.links-menu-popover { - position: absolute; - top: calc(100% + 0.4em); - left: 0; - z-index: 10; - display: flex; - flex-direction: column; - min-width: 10em; - padding: 0.4em; - border: 1px solid var(--border); - border-radius: 0.5em; - background: var(--bg-elev); - box-shadow: 0 0.25em 0.75em rgba(0, 0, 0, 0.3); -} -.links-menu-popover[hidden] { - display: none; -} -.links-menu-item { - display: flex; - align-items: center; - gap: 0.5em; - padding: 0.4em 0.6em; - border-radius: 0.35em; - color: var(--fg); - text-decoration: none; - white-space: nowrap; -} -.links-menu-item:hover { - background: var(--bg); -} .banner-thin { text-align: center; margin: 0; @@ -125,7 +75,7 @@ body.dashboard-shell { flex-wrap: nowrap; align-items: center; gap: 0.2em; - /* On one row with the pages menu; the chrome owns the gutter + + /* On one row with the chrome's menus; the chrome owns the gutter + the bottom divider, so no outer padding / border here. */ } /* Shares the flat-pill aesthetic of the shared `.hive-tab` (sub-tabs on diff --git a/frontend/packages/dashboard/src/index.html b/frontend/packages/dashboard/src/index.html index 199c92bf..68af0c61 100644 --- a/frontend/packages/dashboard/src/index.html +++ b/frontend/packages/dashboard/src/index.html @@ -17,10 +17,6 @@ button / shared links keep you on the same view. JS owns the show/hide. -->
- - - -
+ +
+ +
+