icons: restore inline-SVG link/gear icons, share them across all three pages
Fixes a regression + a longer-standing inconsistency (mara: "agent
page link icons is different from swarm ui, settings icon looks weird
since component extract").
- The `SettingsMenu` shared-component extraction swapped swarm-ui's
original inline-SVG gear trigger for a plain `⚙` text glyph (matching
agent's `MetaNav`, which was itself still on the `🔗` emoji at the
time). An emoji/text glyph is rendered by the OS/browser's own font
at that font's fixed metrics — it can never match a neighbouring
icon in size or weight, and some codepoints (the gear included)
aren't even reliably covered by every font.
- New `@hive/shared/icons.js` (`GearIcon`, `LinkIcon`) — the exact SVG
markup that used to live only in swarm-ui's `SettingsMenu`/
`LinksMenu` as two separate inline copies, now the one shared source.
- `SettingsMenu` (shared) uses `GearIcon`; agent's `MetaNav` and
swarm-ui's `LinksMenu` both use `LinkIcon` — three consumers, one
rendering path, matching stroke/viewBox/size everywhere.
Verified with real screenshots on both agent and swarm-ui — both
trigger icons render as the same crisp line-icon style now.
This commit is contained in:
parent
350b4e9fb7
commit
4175ae86e3
5 changed files with 84 additions and 27 deletions
|
|
@ -1,5 +1,10 @@
|
|||
// <MetaNav> — the header's meta-nav trigger: a single fixed-size Badge
|
||||
// ("🔗") in the pills cluster that opens a popover listing
|
||||
// (`@hive/shared/icons.js`'s `LinkIcon` — an emoji glyph here can't
|
||||
// match a neighbouring icon's size/weight on any platform, see that
|
||||
// file's comment; mara: "agent page link icons is different from
|
||||
// swarm ui" was this trigger still on the old `🔗` emoji after
|
||||
// swarm-ui's own link trigger had already moved to the SVG) in the
|
||||
// pills cluster that opens a popover listing
|
||||
// stats/screen/forge/config + any `hyperhive.dashboardLinks` extras,
|
||||
// sourced from the backend's `agent_links()` (the single source of
|
||||
// truth — same list also feeds the dashboard card's icon strip) — plus
|
||||
|
|
@ -25,6 +30,7 @@
|
|||
// `LoginFlow`'s `.login-card` already made for the same reason.
|
||||
import { useEffect, useRef, useState } from 'preact/hooks';
|
||||
import { Badge } from '@hive/shared/badge.js';
|
||||
import { LinkIcon } from '@hive/shared/icons.js';
|
||||
import type { AgentLink } from '../types.js';
|
||||
import './MetaNav.css';
|
||||
|
||||
|
|
@ -67,7 +73,7 @@ export function MetaNav({ links, forgePublicUrl, dashboardBase }: MetaNavProps)
|
|||
|
||||
return (
|
||||
<div class="meta-nav-anchor" ref={rootRef}>
|
||||
<Badge value="🔗" title="agent links" onClick={() => setOpen((o) => !o)} expanded={open} />
|
||||
<Badge value={<LinkIcon />} title="agent links" onClick={() => setOpen((o) => !o)} expanded={open} />
|
||||
{open ? (
|
||||
<div class="meta-nav-popover" role="menu" aria-label="agent links">
|
||||
<a
|
||||
|
|
|
|||
Loading…
Reference in a new issue