peter
b5d37ca142
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.
77 lines
2.4 KiB
TypeScript
77 lines
2.4 KiB
TypeScript
import { type ReactNode } from "react";
|
|
import ChannelLink from "./ChannelLink";
|
|
import NavGrid from "./ui/NavGrid";
|
|
import { navItemAttrs } from "../lib/listNav";
|
|
|
|
// The presentation shared by the channel manager's "excluded channel" tabs — Hidden and Blocked.
|
|
// A responsive grid of proper channel cards (avatar + name + open-on-YouTube, via ChannelLink) each
|
|
// with one reversing action, instead of a bare row of name chips. Both tabs pass the same shape; only
|
|
// the header icon/label, the action, and the copy differ.
|
|
export interface ExcludedChannel {
|
|
id: string;
|
|
title: string | null;
|
|
handle?: string | null;
|
|
thumbnail_url: string | null;
|
|
}
|
|
|
|
export default function ExcludedChannelList({
|
|
channels,
|
|
icon,
|
|
title,
|
|
hint,
|
|
emptyText,
|
|
actionLabel,
|
|
actionIcon,
|
|
onAction,
|
|
onView,
|
|
}: {
|
|
channels: ExcludedChannel[];
|
|
icon: ReactNode;
|
|
title: string;
|
|
hint: string;
|
|
emptyText: string;
|
|
actionLabel: string;
|
|
actionIcon: ReactNode;
|
|
onAction: (id: string) => void;
|
|
onView?: (c: ExcludedChannel) => void;
|
|
}) {
|
|
if (channels.length === 0) return <p className="text-sm text-muted py-8">{emptyText}</p>;
|
|
return (
|
|
<>
|
|
<div className="flex items-center gap-2 mb-3">
|
|
{icon}
|
|
<span className="text-xs uppercase tracking-wide text-muted">{title}</span>
|
|
</div>
|
|
<NavGrid className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3">
|
|
{channels.map((c, i) => (
|
|
<div
|
|
key={c.id}
|
|
{...navItemAttrs(i)}
|
|
className="glass-card flex items-center gap-2 rounded-xl px-3 py-2"
|
|
>
|
|
<div className="min-w-0 flex-1">
|
|
<ChannelLink
|
|
id={c.id}
|
|
title={c.title}
|
|
handle={c.handle}
|
|
thumbnailUrl={c.thumbnail_url}
|
|
onView={onView ? () => onView(c) : undefined}
|
|
/>
|
|
</div>
|
|
<button
|
|
onClick={() => onAction(c.id)}
|
|
title={actionLabel}
|
|
aria-label={actionLabel}
|
|
className="shrink-0 inline-flex items-center gap-1 rounded-full border border-border px-2 py-1 text-xs text-muted transition hover:border-accent hover:text-accent"
|
|
>
|
|
{actionIcon}
|
|
{actionLabel}
|
|
</button>
|
|
</div>
|
|
))}
|
|
</NavGrid>
|
|
<p className="text-2xs text-muted mt-3">{hint}</p>
|
|
</>
|
|
);
|
|
}
|