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/SyncStatus.tsx

@@ -8,7 +8,9 @@ import { notifyActionError } from "../lib/actionErrors";
 import { formatViews } from "../lib/format";
 import { PopoverSurface } from "./ui/AnchoredPopover";
 import { useAnchoredPopover } from "./ui/anchoredPopoverHooks";
-import { FocusSafeButton } from "./ui/FocusSafeButton";
+import { Button } from "./ui/Button";
+import { IconButton } from "./ui/IconButton";
+import { Pressable } from "./ui/Pressable";
 
 // Per-user status (not the global catalog): shows the number of videos available to *this*
 // user, how many of *their* channels are still being fetched, and how many lack full
@@ -98,14 +100,13 @@ export default function SyncStatus({
   );
 
   const pauseBtn = isAdmin && (data.paused || syncing > 0 || notFull > 0) && (
-    <FocusSafeButton
+    <IconButton
       onClick={() => toggle.mutate()}
-      disabled={toggle.isPending}
-      title={data.paused ? t("header.sync.resume") : t("header.sync.pause")}
-      className="p-1 rounded-md hover:bg-card hover:text-fg transition"
+      loading={toggle.isPending}
+      label={data.paused ? t("header.sync.resume") : t("header.sync.pause")}
     >
-      {data.paused ? <Play className="w-3.5 h-3.5" /> : <Pause className="w-3.5 h-3.5" />}
-    </FocusSafeButton>
+      {data.paused ? <Play /> : <Pause />}
+    </IconButton>
   );
 
   // Chip: the headline count rides in the header; the state, the history link and pause live in a
@@ -117,7 +118,7 @@ export default function SyncStatus({
   )} ${t("header.sync.total")}`;
   return (
     <div className="pointer-events-auto shrink-0">
-      <button
+      <Pressable
         ref={pop.refs.setReference}
         {...pop.getReferenceProps()}
         // Short label only: the popover already explains the numbers, and the long one overflowed
@@ -134,7 +135,7 @@ export default function SyncStatus({
         {needsAttention && (
           <span className="absolute -top-0.5 -right-0.5 w-2 h-2 rounded-full bg-accent ring-2 ring-bg" />
         )}
-      </button>
+      </Pressable>
 
       <PopoverSurface
         popover={pop}
@@ -161,17 +162,18 @@ export default function SyncStatus({
         )}
         {notFull > 0 && (
           <div className="flex items-center justify-between gap-1.5 pt-2">
-            <button
+            <Button
+              variant="link-muted"
+              icon={<History className="size-3.5!" />}
               onClick={() => {
                 setOpen(false);
                 onGoToFullHistory();
               }}
               title={t("header.sync.fullHistoryTooltip")}
-              className="flex items-center gap-1 hover:text-fg underline decoration-dotted decoration-muted/40 underline-offset-4 transition cursor-pointer"
+              className="gap-1 underline decoration-dotted decoration-muted/40 underline-offset-4"
             >
-              <History className="w-3.5 h-3.5" />
               {t("header.sync.withoutFullHistory", { count: notFull })}
-            </button>
+            </Button>
             {!showMain && pauseBtn}
           </div>
         )}