From 1b2db5b412154ef5ec6166bd648b6f00475aad78 Mon Sep 17 00:00:00 2001 From: tryeverything24 <114252040+tryeverything24@users.noreply.github.com> Date: Sun, 26 Jul 2026 04:17:08 +0300 Subject: [PATCH] fix(ui): swap raw one-off values for design tokens in metagraphed components batch 3/5 (#8169) Converts the 59 no-restricted-syntax violations across these 17 metagraphed components to the matching primitive/token, no visual/behavioral change intended: - Plain-sans micro text (10-11px, no font-mono) snaps to mg-type-caption (12px), the smallest sans step on the scale -- same sub-2px normalization tolerance already established by the batch 5/5 sweep. Mono-context sites keep their family via the mono tokens instead: mg-type-data (11px, exact) for schema-drift-detail's link and schema-drift's row list, mg-type-data-sm (10px) for the copy button and operational-panel's 9.5px mosaic/trend subtitles. - nav-omnibox's input pill and rpc-proxy's window toggle wrap in (flush), with the flex layout moved to bodyClassName so the children stay direct flex children -- same !p-* override pattern as take-management-modal's segmented control. - gittensor-registered-repos' two repo links, nav-mega-menu-content's JSON link, network-switcher's setup link, and neuron-table's CSV download now use from @jsonbored/ui-kit (bare: these are custom-layout/pill links where the non-bare underline + icon treatment would visibly change them; bare still applies safeExternalUrl filtering and target/rel handling). Four sites have no matching token and carry an inline eslint-disable with justification instead of a wrong-tier swap: hero-subnet-chips' bg-card/80 (the #7842-documented glass-tier exception already commented in-file), operational-panel's status-mosaic rounded-[2px] (CONTRIBUTING.md's documented dense-grid residual), and resource-explorer's two TooltipTrigger-asChild anchors (already safeExternalUrl-routed with a custom blocked-state fallback; ui-kit's doesn't forward the ref/hover handlers Radix's Slot injects, so swapping would break the tooltips). Closes #8169. --- .../gittensor-registered-repos.tsx | 16 ++++----- .../metagraphed/hero-subnet-chips.tsx | 1 + .../metagraphed/integrability-board.tsx | 4 +-- .../mega-menu-live-preview-link.tsx | 2 +- .../move-stake-destination-input.tsx | 2 +- .../metagraphed/move-stake-modal.tsx | 2 +- .../metagraphed/nav-mega-menu-content.tsx | 35 +++++++++---------- .../components/metagraphed/nav-omnibox.tsx | 20 +++++++---- .../metagraphed/network-switcher.tsx | 21 ++++++----- .../components/metagraphed/neuron-table.tsx | 28 +++++++-------- .../metagraphed/operational-panel.tsx | 13 ++++--- .../metagraphed/pre-sign-confirmation.tsx | 6 ++-- .../metagraphed/registry-ticker.tsx | 4 +-- .../metagraphed/resource-explorer.tsx | 20 ++++++++--- .../src/components/metagraphed/rpc-proxy.tsx | 6 ++-- .../metagraphed/schema-drift-detail.tsx | 4 +-- .../components/metagraphed/schema-drift.tsx | 6 ++-- 17 files changed, 103 insertions(+), 87 deletions(-) diff --git a/apps/ui/src/components/metagraphed/gittensor-registered-repos.tsx b/apps/ui/src/components/metagraphed/gittensor-registered-repos.tsx index 4c64a1d672..8b692cac02 100644 --- a/apps/ui/src/components/metagraphed/gittensor-registered-repos.tsx +++ b/apps/ui/src/components/metagraphed/gittensor-registered-repos.tsx @@ -1,5 +1,5 @@ import { useQuery } from "@tanstack/react-query"; -import { BrandIcon } from "@jsonbored/ui-kit"; +import { BrandIcon, ExternalLink } from "@jsonbored/ui-kit"; import { Panel } from "@/components/metagraphed/primitives"; import { adapterQuery } from "@/lib/metagraphed/queries"; @@ -63,10 +63,9 @@ export function GittensorRegisteredRepos({ slug }: { slug: string }) { const sharePct = typeof row.emission_share === "number" ? row.emission_share * 100 : null; return (
  • - @@ -79,20 +78,19 @@ export function GittensorRegisteredRepos({ slug }: { slug: string }) { {sharePct !== null ? `${sharePct.toFixed(1)}%` : "—"} - +
    • ); })} {total && total > rows.length ? ( - View all {total} registered repositories → - +     ) : null}     ); diff --git a/apps/ui/src/components/metagraphed/hero-subnet-chips.tsx b/apps/ui/src/components/metagraphed/hero-subnet-chips.tsx index 9ca09b10ea..5c6c98cc04 100644 --- a/apps/ui/src/components/metagraphed/hero-subnet-chips.tsx +++ b/apps/ui/src/components/metagraphed/hero-subnet-chips.tsx @@ -82,6 +82,7 @@ export function HeroSubnetChips({ limit = 14 }: { limit?: number }) { // glass tier (mg-glass would add unwanted blur + drop to 80/95% // depending on browser support; mg-glass-soft's 60% visibly lightens // this chip). Kept as a bare fraction rather than a wrong tier. + // eslint-disable-next-line no-restricted-syntax -- see exception above "inline-flex items-center gap-2 rounded-full border border-border bg-card/80", "px-2.5 py-1.5 hover:border-accent/40 transition-colors", )} diff --git a/apps/ui/src/components/metagraphed/integrability-board.tsx b/apps/ui/src/components/metagraphed/integrability-board.tsx index 0a2b7835dc..579710233b 100644 --- a/apps/ui/src/components/metagraphed/integrability-board.tsx +++ b/apps/ui/src/components/metagraphed/integrability-board.tsx @@ -78,7 +78,7 @@ export function IntegrabilityBoard() { % of subnets -

    +

    Lowest-coverage dimensions first — the biggest gaps to fill.

    @@ -93,7 +93,7 @@ export function IntegrabilityBoard() { subnets -

    +

    How subnet completeness scores are distributed across the registry.

    diff --git a/apps/ui/src/components/metagraphed/mega-menu-live-preview-link.tsx b/apps/ui/src/components/metagraphed/mega-menu-live-preview-link.tsx index 028c10aa02..6cf1625f19 100644 --- a/apps/ui/src/components/metagraphed/mega-menu-live-preview-link.tsx +++ b/apps/ui/src/components/metagraphed/mega-menu-live-preview-link.tsx @@ -44,7 +44,7 @@ function LiveRowLink({ item, onNavigate, registerItem, itemIndex }: MegaMenuLive > {item.label} - {item.sub} + {item.sub} diff --git a/apps/ui/src/components/metagraphed/move-stake-destination-input.tsx b/apps/ui/src/components/metagraphed/move-stake-destination-input.tsx index 1d0b193d5b..f4fb873569 100644 --- a/apps/ui/src/components/metagraphed/move-stake-destination-input.tsx +++ b/apps/ui/src/components/metagraphed/move-stake-destination-input.tsx @@ -63,7 +63,7 @@ export function MoveStakeDestinationInput({ return (
    -
    +
    Moving from{" "} {originValidatorName ?? shortHash(originHotkey, 6)} diff --git a/apps/ui/src/components/metagraphed/move-stake-modal.tsx b/apps/ui/src/components/metagraphed/move-stake-modal.tsx index 2f6ee6cb34..e9baab6ae5 100644 --- a/apps/ui/src/components/metagraphed/move-stake-modal.tsx +++ b/apps/ui/src/components/metagraphed/move-stake-modal.tsx @@ -274,7 +274,7 @@ function StatusView({ > {shortHash(txHash, 8)} -

    +

    May take a few moments to appear once indexed.

    diff --git a/apps/ui/src/components/metagraphed/nav-mega-menu-content.tsx b/apps/ui/src/components/metagraphed/nav-mega-menu-content.tsx index af74fe6e6a..6fcb0eab97 100644 --- a/apps/ui/src/components/metagraphed/nav-mega-menu-content.tsx +++ b/apps/ui/src/components/metagraphed/nav-mega-menu-content.tsx @@ -17,7 +17,7 @@ import { AccordionItem, AccordionTrigger, CopyButton, - safeExternalUrl, + ExternalLink, } from "@jsonbored/ui-kit"; import { MEGA_PANELS, @@ -256,7 +256,7 @@ export function MegaPanelBody({
    {showOverallEmpty ? ( -
    +
    No results for "{filterValue}". @@ -276,7 +276,7 @@ export function MegaPanelBody({
    Browse
    {browseEmpty && !supportsLive ? ( -
    No matches in this section.
    +
    No matches in this section.
    ) : browseEmpty ? null : (
      {browseFiltered.map((l) => { @@ -295,7 +295,7 @@ export function MegaPanelBody({ {l.label}
    {l.hint ? ( -
    {l.hint}
    +
    {l.hint}
    ) : null} @@ -316,19 +316,19 @@ export function MegaPanelBody({ ) : liveError ? (
    - + Couldn't load live {panel.label.toLowerCase()}.
    ) : liveEmpty ? ( -
    +
    No live matches for "{filterValue}".
    ) : ( @@ -363,7 +363,7 @@ export function MegaPanelBody({ to={r.to} onClick={onNavigate} ref={(el) => registerItem(el, i)} - className="rounded-full border border-border bg-card px-2.5 py-1 text-[11px] text-ink hover:border-accent/40 hover:text-accent focus:border-accent/60 focus:outline-none transition-colors" + className="rounded-full border border-border bg-card px-2.5 py-1 mg-type-caption text-ink hover:border-accent/40 hover:text-accent focus:border-accent/60 focus:outline-none transition-colors" preload="intent" > {r.label} @@ -390,7 +390,7 @@ export function MegaPanelBody({ search={(l.search ?? undefined) as never} onClick={onNavigate} ref={(el) => registerItem(el, i)} - className="inline-flex items-center rounded-full border border-border bg-paper px-2.5 py-1 text-[11px] text-ink-muted hover:text-ink-strong hover:border-accent/50 focus:border-accent/60 focus:outline-none transition-colors" + className="inline-flex items-center rounded-full border border-border bg-paper px-2.5 py-1 mg-type-caption text-ink-muted hover:text-ink-strong hover:border-accent/50 focus:border-accent/60 focus:outline-none transition-colors" preload="intent" > {l.label} @@ -400,7 +400,7 @@ export function MegaPanelBody({ })} ) : ( -
    No quick filters.
    +
    No quick filters.
    )}
    @@ -414,7 +414,7 @@ export function MegaPanelBody({ ))}
    ) : snapshot.isError ? ( -
    +
    Snapshot unavailable.
    ) : ( @@ -444,14 +444,13 @@ export function MegaPanelBody({
    {panel.apiPath} - JSON - +
    @@ -535,7 +534,7 @@ export function MobileMegaMenuBody({ onNavigate }: { onNavigate?: () => void }) > {l.label} {l.hint ? ( - {l.hint} + {l.hint} ) : null} @@ -552,7 +551,7 @@ export function MobileMegaMenuBody({ onNavigate }: { onNavigate?: () => void }) to={l.to} search={(l.search ?? undefined) as never} onClick={onNavigate} - className="inline-flex items-center rounded-full border border-border bg-paper px-2.5 py-1 text-[11px] text-ink-muted hover:text-ink-strong" + className="inline-flex items-center rounded-full border border-border bg-paper px-2.5 py-1 mg-type-caption text-ink-muted hover:text-ink-strong" preload="intent" > {l.label} diff --git a/apps/ui/src/components/metagraphed/nav-omnibox.tsx b/apps/ui/src/components/metagraphed/nav-omnibox.tsx index 29834fdaec..b7a92afdec 100644 --- a/apps/ui/src/components/metagraphed/nav-omnibox.tsx +++ b/apps/ui/src/components/metagraphed/nav-omnibox.tsx @@ -18,6 +18,7 @@ import { import { searchQuery } from "@/lib/metagraphed/queries"; import { classNames } from "@/lib/metagraphed/format"; import { Kbd, safeExternalUrl } from "@jsonbored/ui-kit"; +import { Panel } from "@/components/metagraphed/primitives"; import { loadRecent, pushRecent } from "@/lib/metagraphed/search-history"; import { isValidSs58 } from "@/lib/metagraphed/accounts"; import { shortHash } from "@/lib/metagraphed/blocks"; @@ -362,11 +363,14 @@ export function NavOmnibox({ onOpenPalette }: Props) { className="hidden md:block relative flex-1 max-w-xl lg:max-w-2xl xl:max-w-3xl min-w-0" > {/* Input */} -
    -
    + {/* Dropdown — wider than the input, right-aligned */} {open ? ( @@ -414,7 +418,9 @@ export function NavOmnibox({ onOpenPalette }: Props) { {r.label} - {r.hint} + + {r.hint} + ))} @@ -422,7 +428,7 @@ export function NavOmnibox({ onOpenPalette }: Props) {
    -

    +

    Paste anything: wallet address (ss58), block number, transaction hash (0x…) or block hash to jump directly.

    @@ -444,7 +450,7 @@ export function NavOmnibox({ onOpenPalette }: Props) { setOpen(true); inputRef.current?.focus(); }} - className="rounded-full border border-border bg-card px-2.5 py-0.5 text-[11px] text-ink-muted hover:text-ink-strong hover:border-accent/40 transition-colors" + className="rounded-full border border-border bg-card px-2.5 py-0.5 mg-type-caption text-ink-muted hover:text-ink-strong hover:border-accent/40 transition-colors" > {r} diff --git a/apps/ui/src/components/metagraphed/network-switcher.tsx b/apps/ui/src/components/metagraphed/network-switcher.tsx index 3955b9a699..64cbe8b13b 100644 --- a/apps/ui/src/components/metagraphed/network-switcher.tsx +++ b/apps/ui/src/components/metagraphed/network-switcher.tsx @@ -1,6 +1,6 @@ import { useEffect, useState } from "react"; import { Check, ChevronDown, Globe2, Pencil, TerminalSquare } from "lucide-react"; -import { Popover, PopoverTrigger } from "@jsonbored/ui-kit"; +import { ExternalLink, Popover, PopoverTrigger } from "@jsonbored/ui-kit"; import { ClampedPopoverContent } from "./clamped-popover-content"; import { useApiBase, useNetwork } from "@/hooks/use-api-base"; import { CHAIN_NETWORKS, LOCAL_DEV, DEFAULT_API_BASE } from "@/lib/metagraphed/config"; @@ -116,7 +116,7 @@ export function NetworkSwitcher() { {active ? : null} - + {n.description} @@ -133,19 +133,18 @@ export function NetworkSwitcher() { {LOCAL_DEV.label}
    - + {LOCAL_DEV.description}
    {LOCAL_DEV.rpc} - setup → - +
    @@ -153,7 +152,7 @@ export function NetworkSwitcher() { -
    +
    @@ -219,7 +218,7 @@ export function NetworkSwitcher() { diff --git a/apps/ui/src/components/metagraphed/neuron-table.tsx b/apps/ui/src/components/metagraphed/neuron-table.tsx index e1cae760df..a1ee3c8216 100644 --- a/apps/ui/src/components/metagraphed/neuron-table.tsx +++ b/apps/ui/src/components/metagraphed/neuron-table.tsx @@ -1,7 +1,7 @@ import { useMemo, useState } from "react"; import { Link } from "@tanstack/react-router"; import { Coins, Download } from "lucide-react"; -import { CopyButton } from "@jsonbored/ui-kit"; +import { CopyButton, ExternalLink } from "@jsonbored/ui-kit"; import { SortHeader, ariaSort } from "@/components/metagraphed/table-controls"; import { classNames } from "@/lib/metagraphed/format"; import { shortHash } from "@/lib/metagraphed/blocks"; @@ -291,7 +291,7 @@ export function NeuronTable({
    ); @@ -397,7 +397,7 @@ function NeuronCard({ "—" )}
    -
    +
    {isValidator ? ( @@ -428,7 +428,7 @@ function NeuronCard({
    @@ -221,6 +221,11 @@ export function OperationalPanel({ netuid }: { netuid: number }) {
    Health trend
    -
    +
    uptime & latency over the selected window, with incident markers {healthRes?.meta?.generated_at ? ` · ${formatFreshness(healthRes.meta.generated_at) ?? ""}` @@ -285,7 +290,7 @@ export function OperationalPanel({ netuid }: { netuid: number }) { ) : incidents.length === 0 ? (
    Clean history
    -
    +
    No incidents recorded for this subnet.
    @@ -437,7 +442,7 @@ function Stat({
    - + {hint} diff --git a/apps/ui/src/components/metagraphed/pre-sign-confirmation.tsx b/apps/ui/src/components/metagraphed/pre-sign-confirmation.tsx index ee749d46d8..e2c92e5ebd 100644 --- a/apps/ui/src/components/metagraphed/pre-sign-confirmation.tsx +++ b/apps/ui/src/components/metagraphed/pre-sign-confirmation.tsx @@ -100,7 +100,7 @@ export function PreSignConfirmation({ /> ) : null} -
    +
    {stale ? : null} diff --git a/apps/ui/src/components/metagraphed/schema-drift-detail.tsx b/apps/ui/src/components/metagraphed/schema-drift-detail.tsx index 23e5e63b8c..2d711fd565 100644 --- a/apps/ui/src/components/metagraphed/schema-drift-detail.tsx +++ b/apps/ui/src/components/metagraphed/schema-drift-detail.tsx @@ -192,7 +192,7 @@ function EvidenceSection({ {l.label} {l.href.startsWith("http") ? ( - + {l.href} @@ -204,7 +204,7 @@ function EvidenceSection({
    {drift.length > 0 ? ( -
      +
        {drift.slice(0, 3).map((s) => (
      • · {s.name ?? s.url}
        • ))} - {drift.length > 3 ? ( -
      • + {drift.length - 3} more changed
        • - ) : null} + {drift.length > 3 ?
      • + {drift.length - 3} more changed
        • : null}
      ) : null}