fix(ui): no button drops the keyboard focus when its own action disables it

A focused button that turns natively disabled loses the focus to <body> in
Chrome. The app disables the very button that was pressed on ~60 sites — a
mutation pending, a pager at its last page, undo with nothing left, a player
at the end of its queue, a form gone clean — so a keyboard user was thrown
out of the page on every such press.

One primitive instead of a fix per site: ui/FocusSafeButton renders a
focused-and-disabled (or busy) button as aria-disabled with a click guard,
and applies the native attribute again once the focus is elsewhere. It asks
the document at render time as well as listening for focus events, because
a window without focus fires none (measured). ui/Button and ui/form's Switch
are built on it; 57 hand-rolled buttons swapped their tag for it keeping
their classes, and three hand-copies of the rule (the channel page's Block
and Hide, ChannelDiscovery's Subscribe) now pass `busy`. The soft state's
dim look is one rule in index.css.

`local/focus-safe-disabled` refuses a new raw <button disabled>, pinned by
focusSafe.contract.test.ts. lib/plexDetailUi moved to components/: it is
components, and lib may not import the primitive.

Measured on localdev in Chrome: the audit log's Next button keeps the focus
on reaching the last page, reads aria-disabled, and the guarded click does
nothing.

frontend/src/components/ChannelPage.tsx

@@ -37,6 +37,7 @@ import { channelYouTubeUrl, formatViews } from "../lib/format";
 import { ChannelTagsControl } from "./ChannelTags";
 import { useChannelTagActions } from "../lib/useChannelTagActions";
 import { Button } from "./ui/Button";
+import { FocusSafeButton } from "./ui/FocusSafeButton";
 
 // A dedicated channel page: an "About"-style header (banner, avatar, stats, subscribe) over the
 // channel's videos (the catalog filtered to this channel). For an un-subscribed channel it
@@ -480,13 +481,11 @@ export default function ChannelPage({
                 </Button>
               )}
               {!me.is_demo && (
-                <button
-                  // Busy blocks the click, not the focus: a focused button that turns natively
-                  // `disabled` drops the keyboard to <body> (the rule and its measurement: ui/Button).
-                  // Nor does a busy toggle light up on hover, as if a click would do something.
-                  onClick={() => !block.isPending && block.mutate()}
-                  aria-disabled={block.isPending || undefined}
-                  aria-busy={block.isPending || undefined}
+                <FocusSafeButton
+                  // Busy blocks the click, not the focus (FocusSafeButton). Nor does a busy toggle
+                  // light up on hover, as if a click would do something.
+                  onClick={() => block.mutate()}
+                  busy={block.isPending}
                   title={ch?.blocked ? t("channel.unblock") : t("channel.block")}
                   aria-label={ch?.blocked ? t("channel.unblock") : t("channel.block")}
                   className={`inline-flex items-center justify-center w-9 h-9 rounded-lg border aria-disabled:opacity-50 transition ${
@@ -496,16 +495,15 @@ export default function ChannelPage({
                   }`}
                 >
                   <Ban className="w-4 h-4" />
-                </button>
+                </FocusSafeButton>
               )}
               {/* Hide-from-feed toggle — subscription-scoped, so offered only on a followed channel
                   (mirrors the manager's Eye/EyeOff). Keeps the subscription; only drops its videos
                   from the feed. EyeOff = currently hidden (click to unhide). */}
               {ch?.subscribed && !me.is_demo && (
-                <button
-                  onClick={() => !toggleHidden.isPending && toggleHidden.mutate()}
-                  aria-disabled={toggleHidden.isPending || undefined}
-                  aria-busy={toggleHidden.isPending || undefined}
+                <FocusSafeButton
+                  onClick={() => toggleHidden.mutate()}
+                  busy={toggleHidden.isPending}
                   title={ch.hidden ? t("channel.hiddenHint") : t("channel.hideHint")}
                   aria-label={ch.hidden ? t("channel.unhide") : t("channel.hide")}
                   className={`inline-flex items-center justify-center w-9 h-9 rounded-lg border aria-disabled:opacity-50 transition ${
@@ -515,7 +513,7 @@ export default function ChannelPage({
                   }`}
                 >
                   {ch.hidden ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
-                </button>
+                </FocusSafeButton>
               )}
               {!me.is_demo &&
                 !ch?.blocked &&