feat(design): every button on its family, the chip primitive, the lint rule (E28 S3b2)

The second half of the button sweep: the remaining hand-rolled buttons in
feature components, the design lab and the components/ui composites now
stand on Button, IconButton, Pressable, Chip or DragHandle.

- Chip + DismissibleChip (filter / token / tag / suggest / ghost, 24px
  floor, 44 on touch) replace five chip geometries; FilterChipGroup
  renders Chips; overflow lanes measure a mirror painted by chipClass.
- The Plex control row is IconButton's player rung (36, 20px glyph,
  round, overlay; 44 on touch); the YT modal bar is on the sm rung with
  pressed cycle toggles and names that survive a folded label.
- New variants: IconButton ghost-accent, danger-soft; Button warn on a
  new state-warn utility. The .btn-{tone} recipes and btnCls are gone.
- Fixed on the way: membership rows (collection editor, Plex playlist
  add) announce checked/mixed; a one-letter tag chip was 21px wide;
  descriptionLinks moved out of lib/ (it renders components).
- local/button-primitive: a raw <button>/<FocusSafeButton> outside the
  control-primitive files is a lint error (contract-tested, seen red).

frontend/src/components/VideoInfoCard.tsx

@@ -9,6 +9,7 @@ import { linkify } from "../lib/linkify";
 import Avatar from "./ui/Avatar";
 import { PopoverSurface } from "./ui/AnchoredPopover";
 import { useAnchoredPopover } from "./ui/anchoredPopoverHooks";
+import { IconButton } from "./ui/IconButton";
 
 // The feed card's "more than the card face" hover infobox (E8·S3, decision D3): full (un-clamped)
 // title, channel, views·duration·date, a description snippet, and the channel's tags. It hangs off a
@@ -31,11 +32,14 @@ import { useAnchoredPopover } from "./ui/anchoredPopoverHooks";
 // so the trigger deliberately lives OUTSIDE it.
 export default function VideoInfoCard({
   video,
+  onMedia = false,
   className,
 }: {
   video: Video;
-  /** Trigger-button classes (placement + hover-reveal + skin). The reveal/touch-suppression rules
-   *  live here so each host can match its surface (overlay vs inline). */
+  /** The trigger sits on the thumbnail: the round, dark translucent IconButton (A2). */
+  onMedia?: boolean;
+  /** Trigger placement + hover-reveal. The reveal/touch-suppression rules live with the host, which
+   *  knows its surface (overlay vs inline); the skin is the IconButton's. */
   className?: string;
 }) {
   const { t, i18n } = useTranslation();
@@ -90,8 +94,8 @@ export default function VideoInfoCard({
 
   return (
     <>
-      <button
-        type="button"
+      <IconButton
+        variant={onMedia ? "media" : "ghost"}
         ref={pop.refs.setReference}
         {...pop.getReferenceProps()}
         // The overlay trigger sits inside the thumbnail's <a> (like the play buttons), so a click must
@@ -100,12 +104,11 @@ export default function VideoInfoCard({
           e.preventDefault();
           e.stopPropagation();
         }}
-        aria-label={t("card.info")}
-        title={t("card.info")}
+        label={t("card.info")}
         className={className}
       >
-        <Info className="w-4 h-4" />
-      </button>
+        <Info />
+      </IconButton>
       <PopoverSurface
         popover={pop}
         ariaLabel={t("card.info")}