fix(plex): a collection sibling is a full Plex card, and the player's info overlay plays it

- PlexInfo's collection strip gives each card the related strip's action set: the "…" menu (with
  Restart for a touch reader), the watched toggle and the playlist add.
- `onPlayItem` is required, so no variant draws a Play that does nothing; the player's info overlay
  plays the sibling in the running player (`go(id, _, fromZero)` for its Restart).

frontend/src/components/PlexInfo.dom.test.tsx

@@ -25,6 +25,8 @@ import type { PlexItemDetail } from "../lib/api";
 
 afterEach(cleanup);
 
+const noop = () => {};
+
 const detail: PlexItemDetail = {
   id: "m1",
   kind: "movie",
@@ -75,7 +77,7 @@ function wrap(ui: React.ReactElement) {
 
 describe("PlexInfo enriched detail (page)", () => {
   it("renders the multi-source ratings row (IMDb / TMDb / audience)", () => {
-    wrap(<PlexInfo detail={detail} variant="page" />);
+    wrap(<PlexInfo onPlayItem={noop} detail={detail} variant="page" />);
     expect(screen.getByText("IMDb")).toBeTruthy();
     expect(screen.getByText("7.8")).toBeTruthy();
     expect(screen.getByText(/TMDb/)).toBeTruthy(); // "TMDb · 1.2K" (vote count compacted)
@@ -85,7 +87,7 @@ describe("PlexInfo enriched detail (page)", () => {
   });
 
   it("renders the facts panel with budget / revenue / studios / countries", () => {
-    wrap(<PlexInfo detail={detail} variant="page" />);
+    wrap(<PlexInfo onPlayItem={noop} detail={detail} variant="page" />);
     expect(screen.getByText("plex.info.facts.title")).toBeTruthy();
     expect(screen.getByText("plex.info.facts.budget")).toBeTruthy();
     expect(screen.getByText("$160M")).toBeTruthy();
@@ -96,7 +98,7 @@ describe("PlexInfo enriched detail (page)", () => {
 
   it("keyword chips filter the library on click", () => {
     const onFilter = vi.fn();
-    wrap(<PlexInfo detail={detail} variant="page" onFilter={onFilter} />);
+    wrap(<PlexInfo onPlayItem={noop} detail={detail} variant="page" onFilter={onFilter} />);
     fireEvent.click(screen.getByText("heist"));
     expect(onFilter).toHaveBeenCalledWith({ keywords: ["heist"] });
   });
@@ -104,7 +106,7 @@ describe("PlexInfo enriched detail (page)", () => {
   // E28: every value that filters says so on hover — the genre, certificate and studio had no hint
   // while the keyword and the year did — and a value filters in the facts panel as in the header.
   it("every filtering value carries a filter hint", () => {
-    wrap(<PlexInfo detail={detail} variant="page" onFilter={() => {}} />);
+    wrap(<PlexInfo onPlayItem={noop} detail={detail} variant="page" onFilter={() => {}} />);
     for (const v of ["heist", "Crime", "R", "Studio A"])
       for (const el of screen.getAllByText(v))
         expect(el.closest("[title]")?.getAttribute("title")).toBe(`plex.info.filterValue:${v}`);
@@ -112,7 +114,7 @@ describe("PlexInfo enriched detail (page)", () => {
 
   it("the facts panel's year and certificate filter like the header's", () => {
     const onFilter = vi.fn();
-    wrap(<PlexInfo detail={detail} variant="page" onFilter={onFilter} />);
+    wrap(<PlexInfo onPlayItem={noop} detail={detail} variant="page" onFilter={onFilter} />);
     const [, factsCert] = screen.getAllByText("R");
     fireEvent.click(factsCert!);
     expect(onFilter).toHaveBeenLastCalledWith({ contentRatings: ["R"] });
@@ -123,7 +125,7 @@ describe("PlexInfo enriched detail (page)", () => {
 
   it("crew members open the person page on click", () => {
     const onOpenPerson = vi.fn();
-    wrap(<PlexInfo detail={detail} variant="page" onOpenPerson={onOpenPerson} />);
+    wrap(<PlexInfo onPlayItem={noop} detail={detail} variant="page" onOpenPerson={onOpenPerson} />);
     expect(screen.getByText("plex.info.crew")).toBeTruthy();
     fireEvent.click(screen.getByText("Jane Director"));
     expect(onOpenPerson).toHaveBeenCalledWith("Jane Director");
@@ -132,7 +134,7 @@ describe("PlexInfo enriched detail (page)", () => {
   it("RatingsRow: with no IMDb score, the audience score becomes the filterable one", () => {
     const onFilter = vi.fn();
     const noImdb = { ...detail, imdb_rating: null, imdb_id: null, imdb_url: null };
-    wrap(<PlexInfo detail={noImdb} variant="page" onFilter={onFilter} />);
+    wrap(<PlexInfo onPlayItem={noop} detail={noImdb} variant="page" onFilter={onFilter} />);
     expect(screen.queryByText("IMDb")).toBeNull();
     // audience (8.4) is now the primary/filterable score → clicking it filters ratingMin.
     fireEvent.click(screen.getByText("8.4"));
@@ -141,14 +143,14 @@ describe("PlexInfo enriched detail (page)", () => {
 
   it("RatingsRow: suppresses the duplicate audience chip when it equals the IMDb score", () => {
     const dupe = { ...detail, rating: 7.8 }; // audience == imdb_rating (7.8)
-    wrap(<PlexInfo detail={dupe} variant="page" />);
+    wrap(<PlexInfo onPlayItem={noop} detail={dupe} variant="page" />);
     expect(screen.getByText("IMDb")).toBeTruthy();
     expect(screen.queryByText("plex.info.audience")).toBeNull(); // duplicate audience chip suppressed
     expect(screen.getAllByText("7.8")).toHaveLength(1); // the score shows once (IMDb only)
   });
 
   it("the overlay variant stays lean (no facts / keywords / crew panels)", () => {
-    wrap(<PlexInfo detail={detail} variant="overlay" />);
+    wrap(<PlexInfo onPlayItem={noop} detail={detail} variant="overlay" />);
     expect(screen.queryByText("plex.info.facts.title")).toBeNull();
     expect(screen.queryByText("plex.info.keywords")).toBeNull();
     expect(screen.queryByText("plex.info.crew")).toBeNull();
@@ -186,7 +188,7 @@ describe("PlexInfo layout B (page)", () => {
   };
 
   it("stacks the collection, the crew and the cast in the main column, the facts beside it", () => {
-    wrap(<PlexInfo detail={full} variant="page" />);
+    wrap(<PlexInfo onPlayItem={noop} detail={full} variant="page" />);
     const coll = heading("The Collection");
     const crew = heading("plex.info.crew");
     const cast = heading("plex.info.cast");
@@ -205,7 +207,13 @@ describe("PlexInfo layout B (page)", () => {
   });
 
   it("with nothing for the main column, the sidebar's sections take the full width", () => {
-    wrap(<PlexInfo detail={{ ...detail, tmdb: { ...detail.tmdb!, crew: [] } }} variant="page" />);
+    wrap(
+      <PlexInfo
+        onPlayItem={noop}
+        detail={{ ...detail, tmdb: { ...detail.tmdb!, crew: [] } }}
+        variant="page"
+      />,
+    );
     expect(screen.queryByRole("heading", { name: "plex.info.crew" })).toBeNull();
     const side = column(heading("plex.info.facts.title"));
     expect(side).toBe(column(heading("plex.info.keywords")));
@@ -213,3 +221,54 @@ describe("PlexInfo layout B (page)", () => {
     expect([...side.parentElement!.children]).toEqual([side]);
   });
 });
+
+// E28 review D1 + D2: a collection sibling is a Plex card like any other — its "…" menu, its watched
+// toggle and its playlist add, as on the related strip — where it used to be a Play and nothing else.
+describe("a collection strip's card", () => {
+  beforeAll(() => {
+    class Stub {
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    }
+    globalThis.ResizeObserver ??= Stub as unknown as typeof ResizeObserver;
+  });
+  const withColl: PlexItemDetail = {
+    ...detail,
+    collections: [
+      {
+        id: "c1",
+        title: "The Collection",
+        source: "plex",
+        items: [
+          {
+            id: "m2",
+            type: "movie",
+            title: "Sequel",
+            thumb: "/api/plex/image/m2",
+            status: "in_progress",
+            position_seconds: 60,
+            duration_seconds: 6000,
+          },
+        ],
+      },
+    ],
+  };
+
+  it("carries the card's whole action set, the Restart in its menu too", async () => {
+    const onPlayItem = vi.fn();
+    wrap(<PlexInfo detail={withColl} variant="page" onPlayItem={onPlayItem} />);
+    const strip = screen.getByRole("heading", { name: "The Collection" }).parentElement!
+      .parentElement!;
+    const named = (n: string) =>
+      [...strip.querySelectorAll("button")].find((b) => b.getAttribute("aria-label") === n);
+    expect(named("plex.markWatched")).toBeDefined();
+    expect(named("plex.playlistAdd.manage")).toBeDefined();
+    const more = strip.querySelector<HTMLButtonElement>("button[aria-haspopup]");
+    expect(more).not.toBeNull();
+    fireEvent.click(more!);
+    const restart = await screen.findAllByRole("menuitem", { hidden: true });
+    fireEvent.click(restart.find((r) => r.textContent === "card.restartTitle")!);
+    await vi.waitFor(() => expect(onPlayItem).toHaveBeenCalledWith("m2", true));
+  });
+});