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/lib/listNav.dom.test.tsx

@@ -312,3 +312,40 @@ describe("useListNav · measured lists (rails and plain grids)", () => {
     );
   });
 });
+
+describe("useListNav · keys and lists it must leave alone", () => {
+  // DataTable renders its rows twice — a table and a card list, one of them display:none at any width.
+  it("skips a list that is not on screen", () => {
+    render(
+      <>
+        <List id="a" count={2} />
+        <List id="b" count={2} />
+      </>,
+    );
+    Object.defineProperty(screen.getByTestId("a0").parentElement!, "checkVisibility", {
+      value: () => false,
+    });
+    press("j");
+    expect(focused()).toBe("b0");
+    press("k");
+    expect(focused()).toBe("b0");
+  });
+
+  // A playlist row's drag handle moves the row with the arrows during a keyboard drag; dnd-kit handles
+  // the key on the document first and prevents its default. Moving focus as well would drop the drag.
+  it("leaves a key that something before it already handled", () => {
+    render(<List id="a" count={3} />);
+    press("j");
+    const handled = (e: KeyboardEvent) => e.preventDefault();
+    document.addEventListener("keydown", handled);
+    try {
+      press("ArrowDown");
+      press("j");
+      expect(focused()).toBe("a0");
+    } finally {
+      document.removeEventListener("keydown", handled);
+    }
+    press("ArrowDown");
+    expect(focused()).toBe("a1");
+  });
+});

frontend/src/lib/listNav.ts

@@ -55,11 +55,15 @@ function itemAt(list: NavList, index: number): HTMLElement | null {
 }
 
 function ordered(): NavList[] {
-  return [...lists.values()]
-    .filter((l) => l.el.isConnected)
-    .sort((a, b) =>
-      a.el.compareDocumentPosition(b.el) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1,
-    );
+  return (
+    [...lists.values()]
+      // Only lists on screen: a responsive table renders its rows twice — a table and a card list, one
+      // of them display:none at any width (ui/DataTable) — and `j` must not walk into the hidden copy.
+      .filter((l) => l.el.isConnected && l.el.checkVisibility?.() !== false)
+      .sort((a, b) =>
+        a.el.compareDocumentPosition(b.el) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1,
+      )
+  );
 }
 
 /** The item holding focus (on its root or on a control inside it), and the list it belongs to. */
@@ -203,6 +207,10 @@ function crossRow(from: NavList, item: HTMLElement, dy: -1 | 1): void {
 }
 
 function onKey(e: KeyboardEvent): void {
+  // A key a widget inside the item already handled is not ours: during a keyboard drag a playlist
+  // row's grip moves the row with the arrows (dnd-kit listens on the document, before this window
+  // listener, and prevents the default of every key it acts on).
+  if (e.defaultPrevented) return;
   const arrow = (dx: -1 | 0 | 1, dy: -1 | 0 | 1) => (ev: KeyboardEvent) => {
     if (move(dx, dy)) ev.preventDefault();
   };