feat(keys): j/k and the arrows walk the channel, playlist and download lists

Third and last slice of the E11 keyboard layer (S4c). S4a/S4b covered every card grid and rail; the
table-shaped pages — the channel manager, a playlist, the download center — were still Tab-stop
country: a channel row carries a priority stepper, four action buttons and a tag picker before the next
row's name.

- `ui/DataTable keyboardNav`: the rows are the items, Enter clicks the element a column marks
  `data-nav-open`. DataTable renders its rows twice (a table, and a card list below `md`); both register
  and `lib/listNav` now walks only lists on screen (`checkVisibility`), so `j` past the last row never
  carries on into the hidden copy.
- `lib/listNav` leaves a key something before it already handled (`defaultPrevented`): during a keyboard
  drag a playlist row's grip moves the row with the arrows, and dnd-kit takes the key on the document
  before listNav's window listener. Without the guard ↓ moved the focus off the grip and dropped the drag.
- `ui/NavGrid as="tbody"` for a table whose body is the list (the playlist, under dnd-kit's
  SortableContext).
- Wired: Subscriptions and Discovery tables, the card layout (`ChannelLayoutGrid` → VirtualGrid
  `keyboardNav`), Hidden/Blocked cards (the ChannelLink name is a channel's open element); a playlist's
  rows (the title plays; the grip keeps Space/Enter); the download queue, library and shared lists (the
  play button opens, `IconBtn open`; a row without one opens nothing).
- `listNav.wiring.contract.test`: `VirtualGrid` and `DataTable` must say `keyboardNav` like `Carousel`,
  `DownloadRow` is a card; the audit log's table is the one exemption (its rows open nothing), and an
  exemption that no longer matches a tag fails the test.

Measured in Chrome: Channels table j → row, ring round the whole row; a row walked down keeps 12px above
the viewport edge, walked up clears the sticky header by 35px; Enter opens the channel. Cards 3 columns:
→ 0→1, ↓ 1→4. Hidden and Discovery: j + Enter open the channel. Playlist: j + Enter plays, Escape returns
focus to the row; a keyboard drag (Enter on the grip, ↓) moves the row with focus kept on the grip, and
Escape cancels with the order unchanged. Downloads library: Enter plays a video row, does nothing on a
plain file row.

frontend/src/components/downloadRow.tsx

@@ -8,6 +8,7 @@ import { api, type DownloadJob } from "../lib/api";
 import { notify } from "../lib/notifications";
 import { copyText } from "../lib/clipboard";
 import { formatBytes, formatDuration, formatEta, formatSpeed, relativeTime } from "../lib/format";
+import { navItemAttrs } from "../lib/listNav";
 
 // 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,
@@ -112,16 +113,20 @@ export function IconBtn({
   onClick,
   title,
   danger,
+  open,
   children,
 }: {
   onClick: () => void;
   title: string;
   danger?: boolean;
+  /** The row's "open" action (play): Enter on a keyboard-walked row (lib/listNav) clicks it. */
+  open?: boolean;
   children: ReactNode;
 }) {
   return (
     <button
       onClick={onClick}
+      data-nav-open={open ? "" : undefined}
       title={title}
       className={clsx(
         "p-1.5 rounded-md hover:bg-surface text-muted transition",
@@ -201,16 +206,22 @@ function ChannelLine({ job }: { job: DownloadJob }) {
 export function DownloadRow({
   job,
   onShowError,
+  navIndex,
   children,
 }: {
   job: DownloadJob;
   onShowError?: (job: DownloadJob) => void;
+  /** Its position in a keyboard-walkable list (lib/listNav). */
+  navIndex?: number;
   children?: ReactNode;
 }) {
   const { t } = useTranslation();
   const running = job.status === "running";
   return (
-    <div className="flex gap-3 p-2.5 rounded-xl glass-card glass-hover transition">
+    <div
+      {...(navIndex !== undefined && navItemAttrs(navIndex))}
+      className="flex gap-3 p-2.5 rounded-xl glass-card glass-hover transition"
+    >
       <Thumb job={job} />
       <div className="min-w-0 flex-1">
         <div className="font-medium leading-snug line-clamp-1 flex items-center gap-1.5">