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/Playlists.tsx

@@ -56,12 +56,14 @@ import { useComfortPin, pinVideo } from "./comfortPin";
 import { ContextMenu } from "./ui/ContextMenu";
 import { useContextMenu } from "./ui/useContextMenu";
 import UndoToolbar from "./ui/UndoToolbar";
+import NavGrid from "./ui/NavGrid";
 import { PageToolbar } from "./ui/PageShell";
 import { useConfirm } from "./ConfirmProvider";
 import { usePlaylistActions } from "./usePlaylistActions";
 import { usePlaylists } from "./PlaylistsProvider";
 import { useMe } from "../lib/useMe";
 import { usePref } from "../lib/usePref";
+import { navItemAttrs } from "../lib/listNav";
 import { ColumnHead, alignClass } from "./ui/tableHeader";
 import { filterRows, isActive, type Column, type FilterMap } from "../lib/tableColumns";
 import { GRIP_KEY, playlistColumns } from "./playlistColumns";
@@ -93,12 +95,15 @@ const idsKey = (items: Video[]) =>
 
 function Row({
   video,
+  index,
   columns,
   dragDisabled,
   dragHint,
   menuProps,
 }: {
   video: Video;
+  /** Its position among the rows shown — the row is a keyboard item (lib/listNav). */
+  index: number;
   columns: Column<Video>[];
   dragDisabled: boolean;
   dragHint: string;
@@ -125,6 +130,7 @@ function Row({
       // transition-COLORS, not `transition` — the bare utility animates transform too, which is
       // the same lag by another route (150ms behind the pointer, on every row).
       className="border-b border-border/50 hover:bg-card/40 transition-colors"
+      {...navItemAttrs(index)}
       {...menuProps}
     >
       {columns.map((col) => (
@@ -1087,10 +1093,14 @@ export default function Playlists() {
                   items={shown.map((v) => v.id)}
                   strategy={verticalListSortingStrategy}
                 >
-                  <tbody>
-                    {shown.map((v) => (
+                  {/* The rows are a keyboard list: `j`/`k` and the arrows walk them, Enter plays. The grip
+                    keeps Space/Enter, and during a keyboard drag the arrows too (listNav leaves a key
+                    dnd-kit has handled). */}
+                  <NavGrid as="tbody">
+                    {shown.map((v, i) => (
                       <Row
                         key={v.id}
+                        index={i}
                         video={v}
                         columns={columns}
                         dragDisabled={!canEdit || viewActive}
@@ -1098,7 +1108,7 @@ export default function Playlists() {
                         menuProps={rowMenu.triggerProps(v)}
                       />
                     ))}
-                  </tbody>
+                  </NavGrid>
                 </SortableContext>
               </table>
               {shown.length === 0 && (