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.
72 lines
2.4 KiB
TypeScript
72 lines
2.4 KiB
TypeScript
import { useTranslation } from "react-i18next";
|
|
import { ExternalLink } from "lucide-react";
|
|
import Avatar from "./ui/Avatar";
|
|
import Tooltip from "./ui/Tooltip";
|
|
import { channelYouTubeUrl } from "../lib/format";
|
|
|
|
// Avatar + channel name + "open on YouTube" link, shared by the Channel manager and the
|
|
// discovery list (and anywhere else that lists a channel). When `onView` is given the name
|
|
// is a button that opens the in-app channel view, with middle-click opening YouTube in a new
|
|
// tab; without it the name is plain text.
|
|
export default function ChannelLink({
|
|
id,
|
|
title,
|
|
handle,
|
|
thumbnailUrl,
|
|
onView,
|
|
}: {
|
|
id: string;
|
|
title: string | null;
|
|
handle?: string | null;
|
|
thumbnailUrl: string | null;
|
|
onView?: () => void;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const ytUrl = channelYouTubeUrl(id, handle);
|
|
const name = title ?? id;
|
|
return (
|
|
<div className="flex items-center gap-2 min-w-0">
|
|
<Avatar src={thumbnailUrl} fallback={title ?? ""} className="w-8 h-8 rounded-full shrink-0" />
|
|
{onView ? (
|
|
<button
|
|
onClick={onView}
|
|
// The channel's "open" element: in a keyboard-walkable list (lib/listNav) Enter on the row or
|
|
// card clicks this.
|
|
data-nav-open=""
|
|
onAuxClick={(e) => {
|
|
// Middle-click opens the channel's YouTube page in a new tab; left-click keeps
|
|
// opening the in-app channel detail.
|
|
if (e.button === 1) {
|
|
e.preventDefault();
|
|
window.open(ytUrl, "_blank", "noopener,noreferrer");
|
|
}
|
|
}}
|
|
onMouseDown={(e) => {
|
|
if (e.button === 1) e.preventDefault(); // suppress middle-click autoscroll
|
|
}}
|
|
// title = the full name, so a truncated fluid-column name is still readable on hover.
|
|
title={name}
|
|
className="text-sm font-medium truncate hover:text-accent text-left min-w-0"
|
|
>
|
|
{name}
|
|
</button>
|
|
) : (
|
|
<span title={name} className="text-sm font-medium truncate min-w-0">
|
|
{name}
|
|
</span>
|
|
)}
|
|
<Tooltip hint={t("channels.row.openOnYouTube")}>
|
|
<a
|
|
href={ytUrl}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-muted hover:text-accent shrink-0"
|
|
aria-label={t("channels.row.openOnYouTube")}
|
|
>
|
|
<ExternalLink className="w-3.5 h-3.5" />
|
|
</a>
|
|
</Tooltip>
|
|
</div>
|
|
);
|
|
}
|