peter
ccd5f3739a
S3 wires the shelf's editor. The gesture is the E10 right-click menu, so the decision "this is comfort media" can be made where the thing is — the feed, a Plex grid, a channel row, a playlist — rather than only on the page that lists the shelf. One shared piece, `components/comfortPin.tsx`: the five pin-kind constructors, the shelf query, and ONE `ActionMenuItem` that switches Pin/Unpin honestly (and says "not known yet" with a disabled row until the shelf has answered, since a confident "Pin" over something already pinned is exactly the quiet lie the house rules forbid). Surfaces that already have a row menu compose the item in (`Playlists`, `PlaylistsRail`); the rest mount `ComfortPinMenu`. Two structural notes: - The feed's menu lives in `VirtualFeed`, not in `Feed` — that is the list, and it is also what gives the channel page the gesture for free, since it renders `<Feed channelScoped>` all the way down. - Cards take `menuProps` as a FUNCTION of the row, not the built props object. `triggerProps` is stable across renders while its return value is not, and a fresh object prop would blow past `VideoCard`'s memo for every card in the virtualized feed on every parent render. `DataTable` and `ChannelLayoutGrid` grow a generic `rowProps` so a channel row answers the same gesture in both of the manager's layouts; the table stays domain-free and never learns what a menu is. On Home the shelf tile's menu is the whole editor: four move rows (front / left / right / end, reusing the playlist menu's ordering idiom) plus the unpin, over menu rows rather than drag & drop — dragging inside a horizontal, scrolling Carousel fights the scroll, and menu rows are keyboard-reachable for free. The reorder is optimistic on the cached payload and re-asks the server on failure rather than showing an order that was never accepted. The exhausted shelf tile (a pinned channel with nothing unwatched left) is `aria-disabled`, not `disabled`: measured in Chromium, a disabled button still receives contextmenu and pointerdown, but it loses focus — and with it Shift+F10, the only keyboard route to the menu it most needs. Verified end to end in the browser against the live account: all five pin kinds, the reorder (persisted across a reload), the unpin, and the honest Unpin label on a resume tile that is already on the shelf.
51 lines
2.0 KiB
TypeScript
51 lines
2.0 KiB
TypeScript
import { useTranslation } from "react-i18next";
|
|
|
|
import { type PlexCard, type Video } from "../lib/api";
|
|
import { pinPlex, pinVideo, useComfortPin, type PinTarget } from "./comfortPin";
|
|
import { ContextMenu } from "./ui/ContextMenu";
|
|
import { type ContextMenuController } from "./ui/useContextMenu";
|
|
|
|
// The menu SURFACE for the comfort-shelf pin (E24 S3). Split from `comfortPin.tsx` for the same
|
|
// reason `ContextMenu.tsx` is split from `useContextMenu.ts`: a file that exports components and
|
|
// nothing else keeps react-refresh working for every surface that imports it.
|
|
|
|
/**
|
|
* The whole right-click menu for a surface whose only context action is the pin — the card grids and
|
|
* rails. Render ONE per list, outside the rows (see `ui/ContextMenu`), and spread
|
|
* `menu.triggerProps` on each row.
|
|
*
|
|
* `target` maps the row the user right-clicked to its pin; `title` names it in the confirmation
|
|
* toast. Both come from the call site because only it knows what its rows are.
|
|
*/
|
|
export function ComfortPinMenu<T>({
|
|
menu,
|
|
target,
|
|
title,
|
|
}: {
|
|
menu: ContextMenuController<T>;
|
|
target: (row: T) => PinTarget | null;
|
|
title: (row: T) => string;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const pin = useComfortPin(menu.open);
|
|
const row = menu.target;
|
|
return (
|
|
<ContextMenu
|
|
menu={menu}
|
|
ariaLabel={t("home.pin.menu")}
|
|
items={row ? pin.item(target(row), title(row)) : []}
|
|
/>
|
|
);
|
|
}
|
|
|
|
/** The Plex poster grids and rails — five of them, all pinning the same way. One component so the
|
|
* show-vs-item decision and the toast's name are written once rather than five times. */
|
|
export function PlexPinMenu({ menu }: { menu: ContextMenuController<PlexCard> }) {
|
|
return <ComfortPinMenu menu={menu} target={pinPlex} title={(c) => c.title} />;
|
|
}
|
|
|
|
/** The YouTube video lists (the feed grid, the Home rails). */
|
|
export function VideoPinMenu({ menu }: { menu: ContextMenuController<Video> }) {
|
|
return <ComfortPinMenu menu={menu} target={(v) => pinVideo(v.id)} title={(v) => v.title ?? ""} />;
|
|
}
|