mara/hyperhive
mara/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Activity

the hive dashboard uses the swarm UI's links menu, beside the profile avatar

Browse source 
The links menu moves into @hive/shared and takes its links as a prop. The swarm
UI feeds it /api/links as before; the dashboard feeds it stats, API docs and the
swarm, and mounts it next to the profile menu in place of its own hamburger on
the left. A link opens in a new tab unless its entry says it is a page of the
same site.
This commit is contained in:
iris 2026-11-01 12:12:38 +01:00 • committed by mara
commit 464b52004b
1 changed files with 192 additions and 239 deletions
Download patch file Download diff file Expand all files Collapse all files

72
frontend/packages/dashboard/src/dashboard.css
View file

@ -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