From 1bd533706420dcadb78c21b08dd1bba8745513f1 Mon Sep 17 00:00:00 2001 From: RealDiligent Date: Sun, 26 Jul 2026 08:19:18 +0800 Subject: [PATCH] fix(ui): ratchet-clean apps/ui components batch 1/5 (17 files, 43 violations) Converts each no-restricted-syntax violation to its named token per the eslint message, mirroring the recipe merged in #8177 for packages/ui-kit: - text-[9-13px] one-offs -> mg-type-caption / mg-type-data-sm (+ the existing mg-type-micro/label idioms), dropping the now-redundant font-mono where the token supplies it. Non-uppercase mono numeric sites (uptime-timeline, coverage/registry/schema-drift) snap to mg-type-data-sm (nearest non-uppercase mono step); sans <12px prose/labels snap to mg-type-caption. This homogenizes a few previously-differentiated sizes onto the scale -- the batch's explicit intent, same as #8177. - account-history-chart's bg-card/95 KPI shell -> .mg-glass (its exact 95% translucency tier, packages/ui-kit styles.css). - drift-activity's hand-rolled tablist shell -> , same recipe #8177 used for ActionBar/SegmentedToggle. As there, Panel's default `rounded` replaces the original `rounded-md` (a subtle 2px corner tightening on this small toggle). - 6 GitHub/Discord/RSS/openapi/api/raw external links -> (the icon-only opt-in prop #8177 added), preserving their exact rendering while routing through safeExternalUrl; the schema-drift evidence link keeps its raw anchor (documented) because it needs onClick stopPropagation, which doesn't forward. Genuinely-missing-token residuals are documented eslint-disable, not forced onto a wrong token (per #8172's own guidance): the heatmap/mosaic per-cell rounded-[1px]/[2px] micro-radii (CONTRIBUTING's documented viz residual -- the smallest named step, rounded/4px, would materially change these grids), the two 14px block-number displays (no mg-type-body utility exists), and the #7842 bg-card/80 toggle track (no clean glass tier). This batch does not touch RATCHETED_DIRS (per the issue -- the ratchet-list update belongs to whichever batch clears the last file in the directory). Closes #8167 --- .../metagraphed/account-history-chart.tsx | 3 +- .../metagraphed/analytics/coverage-matrix.tsx | 2 +- .../metagraphed/analytics/drift-activity.tsx | 12 +++-- .../analytics/incidents-timeline.tsx | 2 +- .../metagraphed/analytics/registry-depth.tsx | 2 +- .../analytics/schema-drift-matrix.tsx | 3 +- .../metagraphed/analytics/status-mosaic.tsx | 2 + .../metagraphed/analytics/uptime-timeline.tsx | 8 +-- .../src/components/metagraphed/api-drawer.tsx | 17 +++--- .../metagraphed/api-keys-manager.tsx | 10 ++-- .../metagraphed/api-source-footer.tsx | 2 +- .../src/components/metagraphed/app-shell.tsx | 52 +++++++++---------- .../metagraphed/blocks/author-share-panel.tsx | 2 +- .../metagraphed/blocks/cadence-heatmap.tsx | 2 + .../metagraphed/blocks/live-block-rail.tsx | 2 + .../metagraphed/blocks/neighbor-compare.tsx | 2 +- .../metagraphed/charts/activity-heatmap.tsx | 6 ++- 17 files changed, 69 insertions(+), 60 deletions(-) diff --git a/apps/ui/src/components/metagraphed/account-history-chart.tsx b/apps/ui/src/components/metagraphed/account-history-chart.tsx index 1994fd3982..de9731da05 100644 --- a/apps/ui/src/components/metagraphed/account-history-chart.tsx +++ b/apps/ui/src/components/metagraphed/account-history-chart.tsx @@ -172,6 +172,7 @@ export function AccountHistoryChart({ ss58 }: { ss58: string }) { glass tier (mg-glass would add unwanted blur; mg-glass-soft's 60% visibly lightens this segmented-toggle track). Kept as a bare fraction rather than a wrong tier. */} + {/* eslint-disable-next-line no-restricted-syntax -- #7842: bg-card/80 toggle track has no clean glass tier (mg-glass adds blur, mg-glass-soft lightens it -- see comment above); a pill toggle, not a card shell */}
); })} -
+ {/* Drifting list */} @@ -200,7 +203,7 @@ function DriftRow({ schema, onClick }: { schema: SchemaInfo; onClick: () => void ) : null} -
+
{added != null ? +{added} : null} {removed != null ? −{removed} : null} {schema.previous_hash && schema.hash ? ( @@ -263,6 +266,7 @@ function WeightBar({ weight: w, tone }: { weight: number; tone: "warn" | "muted" key={i} aria-hidden className={classNames( + // eslint-disable-next-line no-restricted-syntax -- heatmap/mosaic micro-radius: documented residual (CONTRIBUTING 'Border radius'); the smallest named step (rounded, 4px) would materially change these dense grids "h-3 w-1 rounded-[1px]", on ? (tone === "warn" ? "bg-health-warn" : "bg-ink-strong") : "bg-ink-subtle/25", )} diff --git a/apps/ui/src/components/metagraphed/analytics/incidents-timeline.tsx b/apps/ui/src/components/metagraphed/analytics/incidents-timeline.tsx index 4e1366c763..69c9965c5c 100644 --- a/apps/ui/src/components/metagraphed/analytics/incidents-timeline.tsx +++ b/apps/ui/src/components/metagraphed/analytics/incidents-timeline.tsx @@ -220,7 +220,7 @@ export function IncidentsTimeline({ className }: { className?: string }) {
-
+
{r.netuid != null ? ( ( {g} diff --git a/apps/ui/src/components/metagraphed/analytics/schema-drift-matrix.tsx b/apps/ui/src/components/metagraphed/analytics/schema-drift-matrix.tsx index 5559d0c25c..ad70f8600d 100644 --- a/apps/ui/src/components/metagraphed/analytics/schema-drift-matrix.tsx +++ b/apps/ui/src/components/metagraphed/analytics/schema-drift-matrix.tsx @@ -293,7 +293,7 @@ function DriftTile({ /> {label} {schema.updated_at ? ( - + ) : null} @@ -301,6 +301,7 @@ function DriftTile({ {evidenceHref ? ( doesn't forward onClick target="_blank" rel="noopener noreferrer" onClick={(e) => e.stopPropagation()} diff --git a/apps/ui/src/components/metagraphed/analytics/status-mosaic.tsx b/apps/ui/src/components/metagraphed/analytics/status-mosaic.tsx index 91a7e4a518..614a5cb3e9 100644 --- a/apps/ui/src/components/metagraphed/analytics/status-mosaic.tsx +++ b/apps/ui/src/components/metagraphed/analytics/status-mosaic.tsx @@ -96,6 +96,7 @@ export function StatusMosaic({ className, limit = 240 }: { className?: string; l const tile = ( {tile} diff --git a/apps/ui/src/components/metagraphed/analytics/uptime-timeline.tsx b/apps/ui/src/components/metagraphed/analytics/uptime-timeline.tsx index 46b629e37b..bfbe9209fd 100644 --- a/apps/ui/src/components/metagraphed/analytics/uptime-timeline.tsx +++ b/apps/ui/src/components/metagraphed/analytics/uptime-timeline.tsx @@ -147,7 +147,7 @@ export function UptimeTimeline({ netuid, className }: { netuid: number; classNam {usingFallbackWindow ? (7d window) : null}
{freshLine ? ( - · {freshLine} + · {freshLine} ) : null} {/* Aggregate window stats. */}
@@ -198,7 +198,7 @@ export function UptimeTimeline({ netuid, className }: { netuid: number; classNam aria-hidden />
-
+
{typeof s.samples === "number" ? ( {formatNumber(s.samples)} samples ) : null} @@ -270,7 +270,7 @@ export function UptimeTimeline({ netuid, className }: { netuid: number; classNam - +
{sev} · {dur}
diff --git a/apps/ui/src/components/metagraphed/api-drawer.tsx b/apps/ui/src/components/metagraphed/api-drawer.tsx index 13bc6af2b7..8a99eda04b 100644 --- a/apps/ui/src/components/metagraphed/api-drawer.tsx +++ b/apps/ui/src/components/metagraphed/api-drawer.tsx @@ -15,7 +15,7 @@ import { TooltipTrigger, CopyableCode, Kbd, - safeExternalUrl, + ExternalLink, } from "@jsonbored/ui-kit"; import { classNames } from "@/lib/metagraphed/format"; import { Panel } from "@/components/metagraphed/primitives"; @@ -51,7 +51,7 @@ export function ApiDrawerTrigger() { - + View in API · ⌘ J @@ -89,7 +89,7 @@ export function ApiDrawer() { API source -

+

Every screen in Metagraphed is powered by a documented JSON endpoint. Copy the URL, open it raw, or grab the curl snippet.

@@ -167,15 +167,14 @@ function ApiSourceBody({ source }: { source: ApiSource }) { GET {fullUrl} - - +
diff --git a/apps/ui/src/components/metagraphed/api-keys-manager.tsx b/apps/ui/src/components/metagraphed/api-keys-manager.tsx index 4082a2ccc0..d72d1855ea 100644 --- a/apps/ui/src/components/metagraphed/api-keys-manager.tsx +++ b/apps/ui/src/components/metagraphed/api-keys-manager.tsx @@ -101,7 +101,7 @@ function SignInPrompt({ {error ? (
{error}
@@ -165,13 +165,13 @@ function ApiKeysPanel({ return (
- + Tier: {tier ?? "free"} @@ -232,7 +232,7 @@ function ApiKeysPanel({ >
{key.key_id}
-
+
Created {formatTimestamp(key.created_at)} · Last used{" "} {formatTimestamp(key.last_used_at)}
@@ -241,7 +241,7 @@ function ApiKeysPanel({ type="button" onClick={() => revokeMutation.mutate(key.key_id)} disabled={revokeMutation.isPending && revokeMutation.variables === key.key_id} - className="shrink-0 rounded border border-health-down/40 bg-health-down/5 px-2 py-1 text-[11px] font-medium text-health-down hover:bg-health-down/10 disabled:opacity-50" + className="shrink-0 rounded border border-health-down/40 bg-health-down/5 px-2 py-1 mg-type-caption font-medium text-health-down hover:bg-health-down/10 disabled:opacity-50" > {revokeMutation.isPending && revokeMutation.variables === key.key_id ? "Revoking…" diff --git a/apps/ui/src/components/metagraphed/api-source-footer.tsx b/apps/ui/src/components/metagraphed/api-source-footer.tsx index 164694d75d..804262b742 100644 --- a/apps/ui/src/components/metagraphed/api-source-footer.tsx +++ b/apps/ui/src/components/metagraphed/api-source-footer.tsx @@ -11,7 +11,7 @@ import { useRegisterApiSource } from "@/lib/metagraphed/api-source-context"; export function ApiSourceFooter({ paths, artifacts }: { paths: string[]; artifacts?: string[] }) { useRegisterApiSource(paths, artifacts ?? []); return ( -
+
data sources {paths.map((p) => ( diff --git a/apps/ui/src/components/metagraphed/app-shell.tsx b/apps/ui/src/components/metagraphed/app-shell.tsx index 85e959a595..3c35fa00d2 100644 --- a/apps/ui/src/components/metagraphed/app-shell.tsx +++ b/apps/ui/src/components/metagraphed/app-shell.tsx @@ -28,6 +28,7 @@ import { TooltipProvider, TooltipTrigger, CopyableCode, + ExternalLink, safeExternalUrl, DiscordIcon, TimeAgo, @@ -271,7 +272,7 @@ export function AppShell({
@@ -586,14 +584,13 @@ function RegistryPulseStrip() { ) : null} · - openapi - +
); } @@ -629,10 +626,9 @@ function EndpointHealthPill() { status === "down" ? "unreachable" : status === "checking" ? "checking…" : `${ms} ms`; const title = `API endpoint · ${ENDPOINT_LABEL[status]}${ms != null ? ` · ${ms} ms` : ""}`; return ( - @@ -642,7 +638,7 @@ function EndpointHealthPill() { · {detail} - + ); } diff --git a/apps/ui/src/components/metagraphed/blocks/author-share-panel.tsx b/apps/ui/src/components/metagraphed/blocks/author-share-panel.tsx index b68377287b..2c2a0a9b0d 100644 --- a/apps/ui/src/components/metagraphed/blocks/author-share-panel.tsx +++ b/apps/ui/src/components/metagraphed/blocks/author-share-panel.tsx @@ -76,7 +76,7 @@ export function AuthorSharePanel({ rows }: { rows: Block[] }) {
{formatNumber(count)}
diff --git a/apps/ui/src/components/metagraphed/blocks/cadence-heatmap.tsx b/apps/ui/src/components/metagraphed/blocks/cadence-heatmap.tsx index ea22696c8e..776eee80eb 100644 --- a/apps/ui/src/components/metagraphed/blocks/cadence-heatmap.tsx +++ b/apps/ui/src/components/metagraphed/blocks/cadence-heatmap.tsx @@ -68,6 +68,7 @@ export function CadenceHeatmap({ rows }: { rows: Block[] }) { to="/blocks/$ref" params={{ ref: String(block.block_number) }} className={classNames( + // eslint-disable-next-line no-restricted-syntax -- heatmap/mosaic micro-radius: documented residual (CONTRIBUTING 'Border radius'); the smallest named step (rounded, 4px) would materially change these dense grids "mg-focus-ring block h-5 w-[10px] rounded-[2px] transition-transform hover:scale-125", tone.cls, )} @@ -110,6 +111,7 @@ function Legend() {
{items.map((i) => ( + {/* eslint-disable-next-line no-restricted-syntax -- heatmap/mosaic micro-radius: documented residual (CONTRIBUTING 'Border radius'); the smallest named step (rounded, 4px) would materially change these dense grids */} {i.label} diff --git a/apps/ui/src/components/metagraphed/blocks/live-block-rail.tsx b/apps/ui/src/components/metagraphed/blocks/live-block-rail.tsx index 5ebcfca3b1..95b7a43f7d 100644 --- a/apps/ui/src/components/metagraphed/blocks/live-block-rail.tsx +++ b/apps/ui/src/components/metagraphed/blocks/live-block-rail.tsx @@ -60,6 +60,7 @@ export function LiveBlockRail() { #{formatNumber(latest.block_number)} @@ -114,6 +115,7 @@ export function LiveBlockRail() {
Blocks · last 7d
+ {/* eslint-disable-next-line no-restricted-syntax -- block-number display at 14px: no mg-type-body utility exists (--mg-type-body is a reserved CSS var per styles.css, not exposed as a class); nearest utility would resize */}
{formatNumber(daily.reduce((s, n) => s + n, 0))}
diff --git a/apps/ui/src/components/metagraphed/blocks/neighbor-compare.tsx b/apps/ui/src/components/metagraphed/blocks/neighbor-compare.tsx index 457701f511..391091f9bc 100644 --- a/apps/ui/src/components/metagraphed/blocks/neighbor-compare.tsx +++ b/apps/ui/src/components/metagraphed/blocks/neighbor-compare.tsx @@ -106,7 +106,7 @@ function DeltaChip({ {loading ? "…" : value != null ? formatNumber(value) : "—"} {delta != null && !loading ? ( - + {delta > 0 ? "+" : ""} {formatNumber(delta)} diff --git a/apps/ui/src/components/metagraphed/charts/activity-heatmap.tsx b/apps/ui/src/components/metagraphed/charts/activity-heatmap.tsx index cfd833a758..f6917d35da 100644 --- a/apps/ui/src/components/metagraphed/charts/activity-heatmap.tsx +++ b/apps/ui/src/components/metagraphed/charts/activity-heatmap.tsx @@ -131,13 +131,14 @@ export function ActivityHeatmap({ netuid, weeks = 12 }: Props) {
-
{c.key}
+
{c.key}
{c.probes} probe{c.probes === 1 ? "" : "s"}
@@ -153,11 +154,12 @@ export function ActivityHeatmap({ netuid, weeks = 12 }: Props) {
))}
-
+
less {[0, 0.25, 0.5, 0.75, 1].map((t) => (