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
|
|
@ -12,6 +12,7 @@
|
|||
// render a dead affordance" rule the old dashboard's H0M3 tiles follow
|
||||
// for Forge/Matrix.
|
||||
import { useEffect, useRef, useState } from 'preact/hooks';
|
||||
import { LinkIcon } from '@hive/shared/icons.js';
|
||||
import './LinksMenu.css';
|
||||
|
||||
interface ServiceLink {
|
||||
|
|
@ -62,30 +63,12 @@ export function LinksMenu() {
|
|||
aria-label="swarm services"
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
>
|
||||
{/* Feather/lucide "link" glyph, not the 🔗 emoji this replaced —
|
||||
reported live by mara: "links and settings icon styles
|
||||
different / all different sizes". An emoji glyph is rendered
|
||||
by the
|
||||
OS/browser's colour-emoji font at that font's own fixed
|
||||
metrics, ignoring `font-size`/`color` — it can never match a
|
||||
neighbouring text-style icon (SettingsMenu's `⚙`) in size or
|
||||
weight, on any platform. Same inline-SVG shape as
|
||||
SettingsMenu's gear now uses, so both trigger buttons finally
|
||||
share one rendering path (stroke, viewBox, size). */}
|
||||
<svg
|
||||
width="1.3em"
|
||||
height="1.3em"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
|
||||
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
|
||||
</svg>
|
||||
{/* `@hive/shared/icons.js`'s `LinkIcon` — reported live by mara:
|
||||
"links and settings icon styles different / all different
|
||||
sizes". Now shared with `SettingsMenu`'s `GearIcon` and
|
||||
agent's own `MetaNav` trigger, one rendering path instead of
|
||||
three separate inline copies — see that file's comment. */}
|
||||
<LinkIcon />
|
||||
</button>
|
||||
{open ? (
|
||||
<div class="links-menu-popover" role="menu">
|
||||
|
|
|
|||
Loading…
Reference in a new issue