feat(design): glass surfaces by role, the static Badge, LinkButton, user pickers on the Combobox (E28 S3d1)

frontend/src/components/ui/ItemCount.tsx

@@ -6,8 +6,9 @@ import { formatNumber } from "../../lib/format";
 // the pill shows "1M+" and the tooltip carries the precise number.
 const OVERFLOW_AT = 1_000_000;
 
-// A compact, FIXED-WIDTH count pill for a toolbar: the filtered item count in the same glass pill as
-// the filter dropdowns, minus the chevron and the interactivity. The fixed width is the point — a
+// A compact, FIXED-WIDTH count pill for a toolbar: the filtered item count at the toolbar's 28, flat
+// and tonal like a `Badge` — no edge, because it does nothing (E28 S3d: edged = pressable, flat = just
+// says; it used to wear the filter dropdowns' glass pill and read as one more). The fixed width is the point — a
 // changing number must never shove the controls beside it, so the box is sized to the widest value
 // ("999,999 items") and the content is centred within it. A count of a million or more collapses to
 // "1M+", with the exact figure in the title tooltip. Deliberately generic ("item(s)", dynamic plural)
@@ -27,7 +28,7 @@ export default function ItemCount({ count }: { count?: number }) {
     <span
       data-testid="item-count"
       title={count == null ? undefined : formatNumber(count)}
-      className="glass-card inline-flex shrink-0 items-center justify-center gap-1.5 rounded-full border border-border px-3 py-1 text-sm text-muted min-w-[9rem] whitespace-nowrap"
+      className="inline-flex h-7 min-w-[9rem] shrink-0 items-center justify-center gap-1.5 rounded-full bg-fg/8 px-3 text-sm whitespace-nowrap text-muted"
     >
       <Layers className="h-3.5 w-3.5 shrink-0 text-muted" aria-hidden="true" />
       <span className="tabular-nums">{label}</span>