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

feat(frontend): add icons to the H0M3 link cards (#1582)

Browse source 
Each home-hub tile now leads with an icon next to its label: 🖥 Dashboard,
📡 Flow, 📜 Logs, 📊 Stats, ⚙ Settings, 💬 Matrix. Matches the existing
emoji nav-icon convention (the per-agent link strip uses 📊/🖥/⬡/↳).

Markup: the label is wrapped with the icon in a .home-tile-head flex row
(icon + label on one line, description below). The icon is aria-hidden —
decorative, the label carries the accessible name. CSS-only layout
addition; no behaviour change. Build green.
This commit is contained in:
iris 2026-06-09 15:03:01 +02:00
commit 306befa1c1
2 changed files with 37 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

13
frontend/packages/dashboard/src/home.css
View file

@ -51,6 +51,19 @@ body.home-shell {
box-shadow: 0 -2px 14px -6px color-mix(in srgb, var(--purple) 50%, transparent);
}
/* Icon + label share the top row of each tile; the description sits
below. The icon is decorative (aria-hidden) — the label carries the
accessible name. */
.home-tile-head {
display: flex;
align-items: center;
gap: 0.55em;
}
.home-tile-icon {
font-size: 1.25em;
line-height: 1;
flex: none;
}
.home-tile-label {
font-weight: bold;
letter-spacing: 0.08em;

30
frontend/packages/dashboard/src/index.html
View file

@ -29,27 +29,42 @@
<nav class="home-menu" aria-label="hyperhive surfaces">
<a class="home-tile" href="/dashboard.html">
<span class="home-tile-label">Dashboard</span>
<span class="home-tile-head">
<span class="home-tile-icon" aria-hidden="true">🖥</span>
<span class="home-tile-label">Dashboard</span>
</span>
<span class="home-tile-desc">containers · approvals · permissions · schedules · system</span>
</a>
<a class="home-tile" href="/flow.html">
<span class="home-tile-label">Flow</span>
<span class="home-tile-head">
<span class="home-tile-icon" aria-hidden="true">📡</span>
<span class="home-tile-label">Flow</span>
</span>
<span class="home-tile-desc">live all-agents message firehose</span>
</a>
<a class="home-tile" href="/logs.html">
<span class="home-tile-label">Logs</span>
<span class="home-tile-head">
<span class="home-tile-icon" aria-hidden="true">📜</span>
<span class="home-tile-label">Logs</span>
</span>
<span class="home-tile-desc">build · agent · system logs</span>
</a>
<a class="home-tile" href="/stats.html">
<span class="home-tile-label">Stats</span>
<span class="home-tile-head">
<span class="home-tile-icon" aria-hidden="true">📊</span>
<span class="home-tile-label">Stats</span>
</span>
<span class="home-tile-desc">hive-wide turn stats · cost · model mix</span>
</a>
<a class="home-tile" href="/settings.html">
<span class="home-tile-label">Settings</span>
<span class="home-tile-head">
<span class="home-tile-icon" aria-hidden="true">⚙</span>
<span class="home-tile-label">Settings</span>
</span>
<span class="home-tile-desc">operator-local prefs · browser notifications</span>
</a>
@ -57,7 +72,10 @@
enabled (state.matrix_gui_enabled), mirroring the dashboard
tab gating so operators without it don't see a dead link. -->
<a class="home-tile" id="home-tile-matrix" href="/matrix/" hidden>
<span class="home-tile-label">Matrix</span>
<span class="home-tile-head">
<span class="home-tile-icon" aria-hidden="true">💬</span>
<span class="home-tile-label">Matrix</span>
</span>
<span class="home-tile-desc">matrix chat client</span>
</a>