peter
5bfcf5d83a
The app HAS a platform layer -- AnchoredPopover (22 importers, with arrows/typeahead/Escape/anchor-flip), QueryState (21), Modal (17), PageShell, DataTable, Tabs, Tooltip and ~26 more -- but it sat flat among ~160 feature components with nothing marking it as one. Several of those files describe themselves as 'the one place' or 'canonical' and were still bypassed by hand-rolled markup, because a layer nobody can see is a layer nobody uses; three separate inventory passes of this codebase misread it the same way. Moves the 33 domain-free modules into components/ui/, rewrites the imports in 89 files, and makes the boundary a lint rule rather than a convention: inside ui/ a one-level-up import (a feature component) and any lib/api slice are errors. The rule was verified to fire on both and to leave generic lib/ helpers alone. README.md states which side of the line a component belongs on and why. No behaviour change: 3x tsc, eslint, knip, prettier and 687 vitest tests all green; no backend file touched.
16 lines
708 B
TypeScript
16 lines
708 B
TypeScript
// A small count pill shown beside a tab label or filter chip (pending requests, item counts). One
|
|
// source for the count-badge token so Tabs and FilterChipGroup can't drift. The `active` variant sits
|
|
// on an accent-filled parent (a pressed tab/chip), so it tints against accent-fg; the resting variant
|
|
// carries its own accent tint. Callers guard on `count > 0` — this just renders the pill.
|
|
export default function CountBadge({ count, active }: { count: number; active?: boolean }) {
|
|
return (
|
|
<span
|
|
className={`tabular-nums text-2xs leading-none px-1.5 py-0.5 rounded-full ${
|
|
active ? "bg-accent-fg/20" : "bg-accent/20 text-accent"
|
|
}`}
|
|
>
|
|
{count}
|
|
</span>
|
|
);
|
|
}
|