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/ui/DataTable.tsx

@@ -5,6 +5,7 @@ import Pager, { hasPagerContent } from "./Pager";
 import { PageToolbar } from "./PageShell";
 import { ColumnHead, alignClass } from "./tableHeader";
 import { filterRows, type Column, type FilterMap } from "../../lib/tableColumns";
+import { navItemAttrs, useListNav } from "../../lib/listNav";
 
 // A reusable, client-side data table: per-column sort + filter (in the header) + pagination,
 // with its sort/filter/page state optionally persisted to localStorage so a reload (F5) keeps
@@ -63,6 +64,7 @@ export default function DataTable<T>({
   filters: filtersProp,
   onFiltersChange,
   fixedLayout = false,
+  keyboardNav = false,
 }: {
   rows: T[];
   columns: Column<T>[];
@@ -111,6 +113,10 @@ export default function DataTable<T>({
   // the viewport. Off by default so existing content-sized tables (playlists, discovery, Plex) are
   // untouched; the channel manager turns it on so its row never scrolls horizontally out of view.
   fixedLayout?: boolean;
+  // Take part in page keyboard navigation (`lib/listNav`): `j`/`k` and the arrows walk the rows, and
+  // Enter clicks the element a column's render marks `data-nav-open` (the channel name). Both row
+  // shapes register; listNav walks only the one on screen, so the hidden copy is never a stop.
+  keyboardNav?: boolean;
 }) {
   const { t } = useTranslation();
   const initial = loadPersist(persistKey);
@@ -126,6 +132,10 @@ export default function DataTable<T>({
   const filters = controlledFilters ? (filtersProp ?? EMPTY_FILTERS) : internalFilters;
   const [page, setPage] = useState(initial.page);
   const [size, setSize] = useState(initial.size ?? pageSize);
+  const bodyRef = useRef<HTMLTableSectionElement>(null);
+  const cardsRef = useRef<HTMLDivElement>(null);
+  useListNav(bodyRef, { enabled: keyboardNav });
+  useListNav(cardsRef, { enabled: keyboardNav });
 
   // Commit a whole new filter map through the owner (controlled) or internal state. A ref holds the
   // latest resolved map so the externalFilter/reset effects can derive from it without taking
@@ -257,11 +267,12 @@ export default function DataTable<T>({
             filters={filters}
             onFilter={applyFilter}
           />
-          <tbody>
-            {paged.map((row) => (
+          <tbody ref={bodyRef}>
+            {paged.map((row, i) => (
               <tr
                 key={rowKey(row)}
                 {...rowProps?.(row)}
+                {...(keyboardNav && navItemAttrs(i))}
                 className={`border-b border-border/50 hover:bg-(--hover) transition ${
                   rowClassName?.(row) ?? ""
                 }`}
@@ -283,11 +294,12 @@ export default function DataTable<T>({
 
       {/* Narrow screens: a compact card per row — the primary column as the heading, the
           rest flowing in a single wrapping meta line (no full-width label/value gaps). */}
-      <div className="md:hidden flex flex-col gap-2">
-        {paged.map((row) => (
+      <div ref={cardsRef} className="md:hidden flex flex-col gap-2">
+        {paged.map((row, i) => (
           <div
             key={rowKey(row)}
             {...rowProps?.(row)}
+            {...(keyboardNav && navItemAttrs(i))}
             className={`glass-card rounded-xl p-3 ${rowClassName?.(row) ?? ""}`}
           >
             {columns