feat(e24): pin to the comfort shelf from every card and row
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.
This commit is contained in:
@@ -0,0 +1,237 @@
|
||||
// @vitest-environment jsdom
|
||||
//
|
||||
// E24 S3: the comfort shelf's editor — the right-click menu on the Home rails. Its own file, not an
|
||||
// addition to Home.dom.test.tsx, because the shelf query is module-level react-query state that a
|
||||
// sibling test's mocks would leak into.
|
||||
//
|
||||
// What is asserted here is what tsc cannot see: that the menu the user gets over a SHELF tile is a
|
||||
// different menu from the one over a resume tile, that a move row is disabled exactly when the move
|
||||
// would go nowhere, and that a move writes the shelf's WHOLE new order rather than the pair it
|
||||
// swapped.
|
||||
//
|
||||
// Same floating-ui recipe as ContextMenu.dom.test.tsx: stub the observers, wrap in a FloatingTree,
|
||||
// and match menu items by text with `{ hidden: true }` (floating-ui never positions in jsdom, so the
|
||||
// surface stays visibility:hidden and its contents have no accessible name).
|
||||
import { describe, it, expect, afterEach, beforeAll, beforeEach, vi } from "vitest";
|
||||
import { render, screen, fireEvent, cleanup, waitFor } from "@testing-library/react";
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||
import { FloatingTree } from "@floating-ui/react";
|
||||
|
||||
beforeAll(() => {
|
||||
class Stub {
|
||||
observe() {}
|
||||
unobserve() {}
|
||||
disconnect() {}
|
||||
takeRecords() {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
globalThis.ResizeObserver ??= Stub as unknown as typeof ResizeObserver;
|
||||
globalThis.IntersectionObserver ??= Stub as unknown as typeof IntersectionObserver;
|
||||
});
|
||||
|
||||
vi.mock("react-i18next", async (importOriginal) => {
|
||||
const actual = await importOriginal<typeof import("react-i18next")>();
|
||||
return {
|
||||
...actual,
|
||||
useTranslation: () => ({
|
||||
t: (key: string) => key,
|
||||
i18n: { language: "en" },
|
||||
}),
|
||||
};
|
||||
});
|
||||
|
||||
const discover = vi.fn();
|
||||
const comfortPins = vi.fn();
|
||||
const addComfortPin = vi.fn();
|
||||
const removeComfortPin = vi.fn();
|
||||
const reorderComfortPins = vi.fn();
|
||||
vi.mock("../lib/api", () => ({
|
||||
api: {
|
||||
discover: (...a: unknown[]) => discover(...a),
|
||||
discoverPick: () => new Promise(() => {}),
|
||||
setState: () => Promise.resolve(),
|
||||
watchLaterAdd: () => Promise.resolve(),
|
||||
watchLaterRemove: () => Promise.resolve(),
|
||||
comfortPins: (...a: unknown[]) => comfortPins(...a),
|
||||
addComfortPin: (...a: unknown[]) => addComfortPin(...a),
|
||||
removeComfortPin: (...a: unknown[]) => removeComfortPin(...a),
|
||||
reorderComfortPins: (...a: unknown[]) => reorderComfortPins(...a),
|
||||
},
|
||||
HttpError: class extends Error {},
|
||||
discoverCardKey: (c: { source: string; id: string }) => `${c.source}:${c.id}`,
|
||||
}));
|
||||
|
||||
vi.mock("./NavigationProvider", () => ({ useNavigationActions: () => ({ setPage: vi.fn() }) }));
|
||||
vi.mock("./PlexProvider", () => ({ usePlexActions: () => ({ setJumpTo: vi.fn() }) }));
|
||||
|
||||
import Home from "./Home";
|
||||
|
||||
const video = (id: string, title: string) => ({
|
||||
id,
|
||||
title,
|
||||
channel_id: "UC1",
|
||||
channel_title: "A channel",
|
||||
channel_thumbnail: null,
|
||||
channel_url: "https://youtube.com/channel/UC1",
|
||||
published_at: "2026-01-01T00:00:00Z",
|
||||
thumbnail_url: null,
|
||||
duration_seconds: 600,
|
||||
view_count: 10,
|
||||
is_short: false,
|
||||
live_status: "none",
|
||||
status: "new",
|
||||
position_seconds: 0,
|
||||
saved: false,
|
||||
watch_url: `https://www.youtube.com/watch?v=${id}`,
|
||||
});
|
||||
|
||||
const base = (id: string, title: string) => ({
|
||||
source: "youtube",
|
||||
kind: "video",
|
||||
id,
|
||||
title,
|
||||
subtitle: null,
|
||||
thumb: null,
|
||||
aspect: "wide",
|
||||
duration_seconds: 600,
|
||||
position_seconds: 0,
|
||||
remaining_seconds: 600,
|
||||
status: "new",
|
||||
plex: null,
|
||||
video: video(id, title),
|
||||
});
|
||||
|
||||
/** A pinned CHANNEL — the shelf tile with no native card, and the one that is easiest to address by
|
||||
* its title in a test (the video tiles render a whole VideoCard). */
|
||||
const channelPin = (id: string, title: string, pinId: number) => ({
|
||||
...base(id, title),
|
||||
kind: "channel",
|
||||
video: null,
|
||||
unwatched_count: 3,
|
||||
pin_id: pinId,
|
||||
next: base(`${id}-next`, `${title} next`),
|
||||
});
|
||||
|
||||
const shelf = [
|
||||
channelPin("UCa", "Comfort A", 3),
|
||||
channelPin("UCb", "Comfort B", 7),
|
||||
channelPin("UCc", "Comfort C", 9),
|
||||
];
|
||||
|
||||
const payload = () => ({
|
||||
budget: "any",
|
||||
hero: null,
|
||||
continue_watching: [base("v2", "Resume thing")],
|
||||
comfort: shelf,
|
||||
});
|
||||
|
||||
function mount() {
|
||||
const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } });
|
||||
return render(
|
||||
<FloatingTree>
|
||||
<QueryClientProvider client={qc}>
|
||||
<Home />
|
||||
</QueryClientProvider>
|
||||
</FloatingTree>,
|
||||
);
|
||||
}
|
||||
|
||||
const labels = () => screen.queryAllByRole("menuitem", { hidden: true }).map((b) => b.textContent);
|
||||
const item = (label: string) => {
|
||||
const found = screen
|
||||
.getAllByRole("menuitem", { hidden: true })
|
||||
.find((b) => b.textContent === label);
|
||||
if (!found) throw new Error(`no menuitem "${label}" in [${labels().join(", ")}]`);
|
||||
return found as HTMLButtonElement;
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
discover.mockReset().mockResolvedValue(payload());
|
||||
comfortPins.mockReset().mockResolvedValue({ items: shelf });
|
||||
addComfortPin.mockReset().mockResolvedValue({ ok: true, id: 1, created: true });
|
||||
removeComfortPin.mockReset().mockResolvedValue({ deleted: 1 });
|
||||
reorderComfortPins.mockReset().mockResolvedValue({ ok: true });
|
||||
});
|
||||
afterEach(cleanup);
|
||||
|
||||
describe("Home — the comfort shelf's context menu", () => {
|
||||
it("offers the four moves and the unpin over a SHELF tile", async () => {
|
||||
mount();
|
||||
fireEvent.contextMenu(await screen.findByText("Comfort B"));
|
||||
expect(labels()).toEqual([
|
||||
"home.hero.play",
|
||||
"home.shelf.moveFirst",
|
||||
"home.shelf.moveLeft",
|
||||
"home.shelf.moveRight",
|
||||
"home.shelf.moveLast",
|
||||
"home.pin.remove",
|
||||
]);
|
||||
});
|
||||
|
||||
it("disables exactly the moves that would go nowhere", async () => {
|
||||
mount();
|
||||
// The first tile can go right, but not left or to the front it is already at.
|
||||
fireEvent.contextMenu(await screen.findByText("Comfort A"));
|
||||
expect(item("home.shelf.moveFirst").disabled).toBe(true);
|
||||
expect(item("home.shelf.moveLeft").disabled).toBe(true);
|
||||
expect(item("home.shelf.moveRight").disabled).toBe(false);
|
||||
expect(item("home.shelf.moveLast").disabled).toBe(false);
|
||||
});
|
||||
|
||||
it("writes the WHOLE new order when a tile moves", async () => {
|
||||
mount();
|
||||
fireEvent.contextMenu(await screen.findByText("Comfort A"));
|
||||
fireEvent.click(item("home.shelf.moveRight"));
|
||||
// Not the swapped pair: the endpoint takes the shelf's complete order, and a short list would be
|
||||
// the server reordering half the shelf.
|
||||
await waitFor(() => expect(reorderComfortPins).toHaveBeenCalledWith([7, 3, 9]));
|
||||
});
|
||||
|
||||
it("unpins with the pin id the shelf card carries", async () => {
|
||||
mount();
|
||||
fireEvent.contextMenu(await screen.findByText("Comfort C"));
|
||||
fireEvent.click(item("home.pin.remove"));
|
||||
await waitFor(() => expect(removeComfortPin).toHaveBeenCalledWith(9));
|
||||
});
|
||||
|
||||
it("offers the plain PIN over a resume tile, and never a move", async () => {
|
||||
// The rail below the shelf is not orderable, so its menu must not grow rows that would reorder
|
||||
// something the tile is not part of.
|
||||
mount();
|
||||
await screen.findByText("Comfort A");
|
||||
fireEvent.contextMenu(screen.getByText("Resume thing"));
|
||||
await waitFor(() => expect(labels()).toContain("home.pin.add"));
|
||||
expect(labels().some((l) => l?.startsWith("home.shelf.move"))).toBe(false);
|
||||
fireEvent.click(item("home.pin.add"));
|
||||
await waitFor(() => expect(addComfortPin).toHaveBeenCalledWith("video", "v2"));
|
||||
});
|
||||
|
||||
it("still opens the menu over a shelf tile that has nothing left to play", async () => {
|
||||
// The tile with nothing left to play is the one you most want to take OFF the shelf, so its
|
||||
// menu still has to open and its Play row still has to be honest about being dead.
|
||||
// NOTE what this does NOT prove: jsdom delivers `contextmenu` to a real `<button disabled>`
|
||||
// too, so swapping the tile's `aria-disabled` back to `disabled` keeps this test green. That
|
||||
// choice was settled in a real browser instead (see the tile's own comment) — the difference
|
||||
// is focus, which jsdom's event dispatch never exercises.
|
||||
discover.mockResolvedValue({
|
||||
...payload(),
|
||||
comfort: [{ ...channelPin("UCd", "Nothing left", 11), next: null }],
|
||||
});
|
||||
mount();
|
||||
fireEvent.contextMenu(await screen.findByText("Nothing left"));
|
||||
expect(item("home.hero.play").disabled).toBe(true);
|
||||
fireEvent.click(item("home.pin.remove"));
|
||||
await waitFor(() => expect(removeComfortPin).toHaveBeenCalledWith(11));
|
||||
});
|
||||
|
||||
it("says so rather than guessing while the shelf is still loading", async () => {
|
||||
// "Not pinned" and "not known yet" must not render as the same row: the pin label is only
|
||||
// trustworthy once the shelf has answered.
|
||||
comfortPins.mockReturnValue(new Promise(() => {}));
|
||||
mount();
|
||||
await screen.findByText("Comfort A");
|
||||
fireEvent.contextMenu(screen.getByText("Resume thing"));
|
||||
expect(item("home.pin.add").disabled).toBe(true);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user