swarm-ui: delete StatusChip, migrate its 3 callers to shared Badge

mara: non-interactive Badge and StatusChip render identically (same
padding/radius/font, same tone-to-color mapping) and StatusChip's
4-tone/single-label shape is a strict subset of Badge's — no real
reason to keep both. Deletes StatusChip.tsx/.css, migrates AgentsPage's
config-PR chip, HivesPage's freshness chip, and ComponentsPage's own
table-status sample to Badge (tone/value, no onClick). Also drops the
now-redundant standalone StatusChip demo section on /components (the
Badge section already covers all 4 former chip tones plus accent).

Updated the two stale StatusChip references outside swarm-ui too:
design-guide.md's component-list example and colors.css's WCAG-
contrast-rationale comment.
This commit is contained in:
iris 2026-08-28 10:46:04 +02:00 committed by mara
commit 638e1ac2c6
8 changed files with 19 additions and 76 deletions

View file

@ -1,21 +0,0 @@
.ui-chip {
display: inline-block;
padding: 0.15em 0.6em;
border-radius: 1em;
font-size: 0.85em;
line-height: 1.4;
background: var(--purple-dim);
color: var(--fg);
}
.ui-chip-neutral {
color: var(--muted);
}
.ui-chip-positive {
color: var(--green);
}
.ui-chip-warning {
color: var(--amber);
}
.ui-chip-negative {
color: var(--red);
}

View file

@ -1,25 +0,0 @@
// <StatusChip> — a small labelled state indicator. Generic over
// `tone` rather than a fixed status vocabulary (`online`/`offline`/…)
// because the first real caller (the hive roster) starts with a
// single static "configured" tone and grows real online/stale/offline
// states once a status rollup lands server-side — same component,
// richer data later, no rebuild.
import type { ComponentChildren } from 'preact';
import './StatusChip.css';
export type ChipTone = 'neutral' | 'positive' | 'warning' | 'negative';
// `label` takes renderable children, not just a string — a freshness
// chip embeds a live `<RelativeTime>` alongside its static text (e.g.
// "fresh (5s ago)" where the age keeps ticking), and a plain string
// couldn't carry that without the chip reaching back into a caller's
// formatting choices.
export function StatusChip({
tone = 'neutral',
label,
}: {
tone?: ChipTone;
label: ComponentChildren;
}) {
return <span class={'ui-chip ui-chip-' + tone}>{label}</span>;
}