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

@@ -18,6 +18,8 @@ import {
 import { navItemAttrs } from "../lib/listNav";
 import { failCopyKeys } from "../lib/downloadFailure";
 import { jobTitle } from "./downloadTitle";
+import { IconButton } from "./ui/IconButton";
+import { Pressable } from "./ui/Pressable";
 
 // Download-row presentation + the small shared primitives (status pill, icon button, usage bar),
 // split out of DownloadCenter (all purely prop-driven, no shared state). Rendered by the queue,
@@ -136,17 +138,14 @@ export function IconBtn({
   children: ReactNode;
 }) {
   return (
-    <button
+    <IconButton
+      variant={danger ? "danger" : "ghost"}
       onClick={onClick}
       data-nav-open={open ? "" : undefined}
-      title={title}
-      className={clsx(
-        "p-1.5 rounded-md hover:bg-surface text-muted transition",
-        danger ? "hover:text-danger" : "hover:text-fg",
-      )}
+      label={title}
     >
       {children}
-    </button>
+    </IconButton>
   );
 }
 
@@ -182,14 +181,9 @@ function SourceRef({ url }: { url: string }) {
       >
         {displayUrl(url)}
       </a>
-      <button
-        onClick={copy}
-        aria-label={t("downloads.source.copy")}
-        title={t("downloads.source.copy")}
-        className="shrink-0 p-0.5 rounded-sm hover:bg-surface hover:text-fg transition"
-      >
-        <Copy className="w-3.5 h-3.5" />
-      </button>
+      <IconButton onClick={copy} label={t("downloads.source.copy")}>
+        <Copy />
+      </IconButton>
     </div>
   );
 }
@@ -267,14 +261,14 @@ export function DownloadRow({
             </span>
           ) : null}
           {job.status === "error" ? (
-            <button
+            <Pressable
               onClick={() => onShowError?.(job)}
-              className="text-danger hover:opacity-80 inline-flex items-center gap-1 truncate"
+              className="text-danger inline-flex items-center gap-1 truncate"
               title={t("downloads.errors.fail.title")}
             >
               · {t(failCopyKeys(job, "short"))}
               <span className="text-muted underline">{t("downloads.errors.fail.detailsLink")}</span>
-            </button>
+            </Pressable>
           ) : null}
         </div>
         {job.source_url && <SourceRef url={job.source_url} />}
@@ -306,12 +300,10 @@ export function DownloadRow({
           </div>
         )}
       </div>
-      {/* Row action buttons: grown a step here (bigger tap target + icon) without touching the shared
-          IconBtn — scoped so the same primitive stays smaller in the modals. `shrink-0` + no wrap keeps
-          them on the title's line; the text column shrinks instead. */}
-      <div className="flex items-start gap-1 shrink-0 [&_button]:p-2 [&_svg]:size-4.5">
-        {children}
-      </div>
+      {/* Row action buttons: the md rung here (the row stands alone), the sm rung in the modals, one
+          IconBtn for both. `shrink-0` + no wrap keeps them on the title's line; the text column
+          shrinks instead. */}
+      <div className="flex items-start gap-1 shrink-0 [&_button]:size-8">{children}</div>
     </div>
   );
 }