feat(design): the button families on the decided ladder, first half of the sweep (E28 S3b1)

Button is rebuilt to A1/B1/B3: explicit heights (xs 24 / sm 28 / md 32, lg 40 for a hero CTA), r8 (a
pill on media), state layers instead of opacity and bg-card hovers, a `pressed` toggle, `overlay`,
`media` and `link-muted` variants. The icon-only sizes move to the new IconButton (28 / 32, 48 only for
the Play on a picture; a required label). Pressable (a card, row or tile that is the control) and
DragHandle join them. The state-* utilities now stand down on a disabled, busy or pressed control, held
by theme.contract.test.ts.

Swept onto them: the Button icon-size callers and 16 files (Plex playlist, Plex detail, the YT player
modal chrome, Welcome, Plex and video cards with AddToPlaylist and DownloadButton, the video editor,
Feed, personal views, Scheduler, Users, the nav rail, Plex detail parts, Settings): 268 raw buttons are
153. Fixed on the way: FocusSafeButton overwrote a caller's aria-disabled (the "unavailable, here is
why" state; adminInvites caught it), a season toggle and a Plex settings switch had no name/state, and
the video card's overlay follows the C5 card (Resume pill, From the start pill, a round Play).

frontend/src/components/ui/IconButton.tsx

@@ -0,0 +1,109 @@
+import { forwardRef } from "react";
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+import clsx from "clsx";
+import { Loader2 } from "lucide-react";
+import { FocusSafeButton } from "./FocusSafeButton";
+
+// A button that is only a glyph (docs/DESIGN.md A2): two sizes, r8, and a name it cannot ship without
+// (`label` is required: it is the accessible name and the tooltip). On a picture it is round and dark
+// translucent (`media`), readable on any thumbnail; round means "on media" and nothing else. The glyph
+// is sized here, so a row of them never mixes 14 and 16px icons.
+
+type IconButtonVariant =
+  | "ghost" // the default: quiet glyph, a state layer on hover
+  | "primary" // solid accent — the one affirmative action of a compact form (Send, Save view)
+  | "outline" // bordered — an icon action that stands on its own in a form or a header
+  | "outline-accent" // bordered + accent — an affirmative row action (Approve)
+  | "outline-danger" // bordered, danger on hover — a row's destructive action beside bordered siblings
+  | "outline-warn" // bordered + warn — a reversible restriction that is currently ON (Suspended)
+  | "danger" // quiet at rest, danger on hover — a row's delete/remove
+  | "glass" // glass card — beside the glass Buttons on a Plex page
+  | "media" // round, dark translucent — on a thumbnail or a poster
+  | "overlay"; // white glyph on the always-dark player chrome, whatever the theme
+
+type IconButtonSize =
+  | "sm" // 28 — rows and dense toolbars
+  | "md" // 32 — on its own
+  | "lg"; // 48 — only the Play in the middle of a picture (C5: a not-started card)
+
+const ACT = "enabled:not-aria-disabled:";
+const VARIANTS: Record<IconButtonVariant, string> = {
+  ghost: `text-muted state-layer ${ACT}hover:text-fg`,
+  primary: "state-filled",
+  outline: `border border-border text-muted state-layer ${ACT}hover:text-fg`,
+  "outline-accent": "border border-accent/40 text-accent state-layer",
+  "outline-danger": `border border-border text-muted state-layer ${ACT}hover:text-danger ${ACT}hover:border-danger/40`,
+  "outline-warn": "border border-warn/40 text-warn state-layer",
+  danger: `text-muted state-layer ${ACT}hover:text-danger`,
+  glass: `glass-card glass-hover ${ACT}hover:text-accent`,
+  // The player chrome and a thumbnail are dark in the light theme too, so these two paint with
+  // white and black, not with the theme's fg (whose state layer would be a dark wash on a dark video).
+  media: `bg-black/60 text-white ${ACT}hover:bg-black/75`,
+  overlay: `text-white/80 ${ACT}hover:text-white ${ACT}hover:bg-white/15`,
+};
+
+// An icon toggle that is on shows it in the glyph (watched, saved, a selected track), not as a solid
+// fill: a solid accent square in a row of quiet glyphs outshouts the row's primary action.
+const PRESSED = "aria-pressed:text-accent";
+
+const SIZES: Record<IconButtonSize, string> = {
+  sm: "size-7 [&>svg]:size-4",
+  md: "size-8 [&>svg]:size-4",
+  lg: "size-12 [&>svg]:size-6",
+};
+
+export interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+  /** The accessible name and the tooltip. Required: the button renders no text. */
+  label: string;
+  /** The glyph (a lucide element); the primitive sizes it. */
+  children: ReactNode;
+  variant?: IconButtonVariant;
+  size?: IconButtonSize;
+  /** A toggle: sets aria-pressed and tints the glyph with the accent. */
+  pressed?: boolean;
+  /** Sits on a picture: round (A2). Implied by the `media` variant. */
+  onMedia?: boolean;
+  /** Busy: a spinner replaces the glyph, and the button is unavailable without losing the focus. */
+  loading?: boolean;
+  /** Leave the tooltip to a richer one the caller renders (a `Tooltip` around the button). */
+  noTitle?: boolean;
+}
+
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(
+  {
+    label,
+    children,
+    variant = "ghost",
+    size = "sm",
+    pressed,
+    onMedia = false,
+    loading = false,
+    noTitle = false,
+    type,
+    className,
+    ...rest
+  },
+  ref,
+) {
+  return (
+    <FocusSafeButton
+      ref={ref}
+      type={type ?? "button"}
+      busy={loading}
+      aria-label={label}
+      aria-pressed={pressed}
+      title={noTitle ? undefined : label}
+      className={clsx(
+        "inline-grid shrink-0 place-items-center transition touch-target disabled:opacity-50 disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:cursor-not-allowed",
+        VARIANTS[variant],
+        onMedia || variant === "media" ? "rounded-full" : "rounded-lg",
+        pressed !== undefined && PRESSED,
+        SIZES[size],
+        className,
+      )}
+      {...rest}
+    >
+      {loading ? <Loader2 className="animate-spin" /> : children}
+    </FocusSafeButton>
+  );
+});