molecule-core/canvas/src/components/StatusDot.tsx
Hongming Wang 2049870057 fix(canvas): address all code review findings on PR #482
- Reconcile TIER_CONFIG/TIER_COLORS into single TIER_CONFIG with both
  `color` (pill style) and `border` (bordered badge style) fields
- Remove TemplatePalette alias indirection (TIER_LABELS_SHARED → direct import)
- Extract inline spinner SVGs to shared Spinner component (3 copies → 1)
- Migrate status dot colors from 6 remaining files to shared tokens:
  SearchDialog, StatusDot, Legend, ContextMenu, Toolbar + add statusDotClass()
- Add COMM_TYPE_LABELS to design-tokens, used by CommunicationOverlay sr-only
- Update reduced-motion tests: components that delegate to design-tokens
  pass the guard check via import detection; add design-tokens.ts own test
- 507/507 tests pass, build clean

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-16 07:48:47 -07:00

20 lines
434 B
TypeScript

"use client";
import { STATUS_CONFIG, statusDotClass } from "@/lib/design-tokens";
export function StatusDot({
status,
size = "sm",
}: {
status: string;
size?: "sm" | "md";
}) {
const sizeClass = size === "md" ? "w-2.5 h-2.5" : "w-2 h-2";
const glowClass = STATUS_CONFIG[status]?.glow ?? "";
return (
<div
className={`${sizeClass} rounded-full shrink-0 ${statusDotClass(status)} ${glowClass}`}
/>
);
}