mirror of
https://github.com/fabro-sh/fabro.git
synced 2026-10-06 02:48:25 +00:00
acf8caa351
Surfaces the run t-shirt size (XS/S/M/L/XL) in both the main runs list and the Children sub-tab, visible by default. L renders in amber and XL in coral to flag risky and unhealthy runs at a glance. Extracts a shared SizeChip component used by the run header and the table cell, derives Ord on RunSize so the new sort key (server-side ListRuns sort) orders by bucket, and reorders TOGGLEABLE_COLUMNS so the column picker mirrors the visible table order. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
33 lines
1.1 KiB
TypeScript
33 lines
1.1 KiB
TypeScript
import type { RunSize } from "@qltysh/fabro-api-client";
|
|
|
|
import { formatUsdMicros } from "../lib/format";
|
|
import { Tooltip } from "./ui";
|
|
|
|
const SIZE_TONE: Record<RunSize, { className: string; note: string | null }> = {
|
|
XS: { className: "bg-overlay text-fg-muted", note: null },
|
|
S: { className: "bg-overlay text-fg-muted", note: null },
|
|
M: { className: "bg-overlay text-fg-muted", note: null },
|
|
L: { className: "bg-amber/15 text-amber", note: "risky" },
|
|
XL: { className: "bg-coral/15 text-coral", note: "unhealthy" },
|
|
};
|
|
|
|
export function SizeChip({
|
|
size,
|
|
totalUsdMicros,
|
|
}: {
|
|
size: RunSize;
|
|
totalUsdMicros?: number | null;
|
|
}) {
|
|
const tone = SIZE_TONE[size];
|
|
const billed = totalUsdMicros != null ? ` · ${formatUsdMicros(totalUsdMicros)} billed` : "";
|
|
const tooltip = tone.note != null
|
|
? `Size ${size} (${tone.note})${billed}`
|
|
: `Size ${size}${billed}`;
|
|
return (
|
|
<Tooltip label={tooltip}>
|
|
<span className={`rounded px-1.5 py-0.5 font-mono text-xs font-bold tabular-nums ${tone.className}`}>
|
|
{size}
|
|
</span>
|
|
</Tooltip>
|
|
);
|
|
}
|