feat(plex): a title opens its page, the picture plays; an episode links up

A card title lit like a link but played the item. Now the picture plays and
the title opens the page of what it names: a movie's or an episode's info
page, a show's page, and for an episode standing as its show (Recently
watched) the show. Every poster and episode card carries it (grid, rails,
person, collection, season, related, Home), a card with no page keeps a plain
title, and the season page gains the menu's Details row too.

The episode page had no way up: the detail now serves the show's and the
season's rating keys, and on the page the show title opens the show and
"S1·E25" the season (Back returns to where the page was).

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

@@ -313,7 +313,7 @@ describe("Plex cards in a keyboard-walkable list", () => {
 describe("a Plex card's title stays selectable", () => {
   it("opens from its caption, but not on the click that ends selecting the title", () => {
     const onOpen = vi.fn();
-    render(<PlexPosterCard card={movie()} onOpen={onOpen} />);
+    render(<PlexPosterCard card={movie()} onOpen={vi.fn()} onPage={onOpen} />);
     const title = screen.getByText("M");
     const range = document.createRange();
     range.selectNodeContents(title);
@@ -327,10 +327,47 @@ describe("a Plex card's title stays selectable", () => {
   });
 });
 
+// The picture plays; the title, lit like a link, opens the page of what it names (owner).
+describe("a Plex card's title is a link to its page", () => {
+  it("a movie's title opens its page and never plays it", () => {
+    const onOpen = vi.fn();
+    const onPage = vi.fn();
+    render(<PlexPosterCard card={movie()} onOpen={onOpen} onPage={onPage} />);
+    fireEvent.click(screen.getByText("M"), { detail: 1 });
+    expect(onPage).toHaveBeenCalledWith(expect.objectContaining({ id: "1", type: "movie" }));
+    expect(onOpen).not.toHaveBeenCalled();
+  });
+
+  it("an episode standing as its show opens the show", () => {
+    const onPage = vi.fn();
+    const ep: PlexCard = { ...episode(), show_id: "s9", show_title: "The Show" };
+    render(<PlexPosterCard card={ep} onOpen={vi.fn()} onPage={onPage} />);
+    fireEvent.click(screen.getByText("The Show"), { detail: 1 });
+    expect(onPage).toHaveBeenCalledWith(expect.objectContaining({ id: "s9", type: "show" }));
+  });
+
+  it("an episode card's title opens the episode's page, its picture plays", () => {
+    const onPlay = vi.fn();
+    const onPage = vi.fn();
+    render(<EpisodeCard ep={episode()} onPlay={onPlay} onPage={onPage} />);
+    fireEvent.click(screen.getByText(episode().title), { detail: 1 });
+    expect(onPage).toHaveBeenCalledTimes(1);
+    expect(onPlay).not.toHaveBeenCalled();
+  });
+
+  it("without a page the title is plain text: a click does nothing", () => {
+    const onOpen = vi.fn();
+    render(<PlexPosterCard card={movie()} onOpen={onOpen} />);
+    fireEvent.click(screen.getByText("M"), { detail: 1 });
+    expect(onOpen).not.toHaveBeenCalled();
+    expect(screen.getByText("M").className).not.toContain("cursor-pointer");
+  });
+});
+
 describe("a Plex card's caption and a drag", () => {
   it("does not open on a press dragged past the slop", () => {
     const onOpen = vi.fn();
-    render(<PlexPosterCard card={movie()} onOpen={onOpen} />);
+    render(<PlexPosterCard card={movie()} onOpen={vi.fn()} onPage={onOpen} />);
     const title = screen.getByText("M");
     fireEvent.mouseDown(title, { clientX: 10, clientY: 10 });
     fireEvent.click(title, { detail: 1, clientX: 60, clientY: 10 });