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

@@ -42,6 +42,7 @@ import { Button } from "./ui/Button";
 import { DownloadRow, IconBtn, UsageBar } from "./downloadRow";
 import { MetaEditModal, ErrorModal } from "./downloadModals";
 import { AdminSystem } from "./downloadAdmin";
+import NavGrid from "./ui/NavGrid";
 
 export default function DownloadCenter() {
   const me = useMe();
@@ -225,9 +226,9 @@ export default function DownloadCenter() {
                 {t("downloads.page.upload")}
               </Button>
             </div>
-            <div className="space-y-2">
-              {queue.map((job) => (
-                <DownloadRow key={job.id} job={job} onShowError={setErrorJob}>
+            <NavGrid className="space-y-2">
+              {queue.map((job, i) => (
+                <DownloadRow key={job.id} job={job} navIndex={i} onShowError={setErrorJob}>
                   {(job.status === "queued" || job.status === "running") && (
                     <IconBtn
                       onClick={() => act.mutate({ id: job.id, op: "pause" })}
@@ -275,21 +276,25 @@ export default function DownloadCenter() {
                     {t("downloads.empty.queue")}
                   </div>
                 ))}
-            </div>
+            </NavGrid>
           </>
         )}
 
         {tab === "done" && (
           <>
             <UsageBar />
-            <div className="space-y-2">
-              {library.map((job) => {
+            <NavGrid className="space-y-2">
+              {library.map((job, i) => {
                 // Row actions gated on the stored media_kind + job_kind (see downloadActions).
                 const a = libraryRowActions(job);
                 return (
-                  <DownloadRow key={job.id} job={job}>
+                  <DownloadRow key={job.id} job={job} navIndex={i}>
                     {a.play && (
-                      <IconBtn onClick={() => setPlayJob(job)} title={t("downloads.actions.play")}>
+                      <IconBtn
+                        open
+                        onClick={() => setPlayJob(job)}
+                        title={t("downloads.actions.play")}
+                      >
                         <PlayCircle className="w-4 h-4" />
                       </IconBtn>
                     )}
@@ -358,19 +363,23 @@ export default function DownloadCenter() {
                     {t("downloads.empty.done")}
                   </div>
                 ))}
-            </div>
+            </NavGrid>
           </>
         )}
 
         {tab === "shared" && (
-          <div className="space-y-2">
-            {(sharedQ.data ?? []).map((job) => {
+          <NavGrid className="space-y-2">
+            {(sharedQ.data ?? []).map((job, i) => {
               // Same media_kind + can_download gate as the library, via the shared helper (S5b).
               const a = sharedRowActions(job);
               return (
-                <DownloadRow key={job.id} job={job}>
+                <DownloadRow key={job.id} job={job} navIndex={i}>
                   {a.play && (
-                    <IconBtn onClick={() => setPlayJob(job)} title={t("downloads.actions.play")}>
+                    <IconBtn
+                      open
+                      onClick={() => setPlayJob(job)}
+                      title={t("downloads.actions.play")}
+                    >
                       <PlayCircle className="w-4 h-4" />
                     </IconBtn>
                   )}
@@ -408,7 +417,7 @@ export default function DownloadCenter() {
                   {t("downloads.empty.shared")}
                 </div>
               ))}
-          </div>
+          </NavGrid>
         )}
 
         {tab === "system" && me.role === "admin" && <AdminSystem />}