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/PlexInfo.tsx

@@ -11,6 +11,8 @@ import { DetailAside, DetailAsideToggles, DetailKeywords } from "./plexDetailAsi
 import {
   DETAIL_POSTER,
   episodeLine,
+  episodeName,
+  episodeNumbers,
   tmdbBackdropUrl,
   useCrossfadeBackdrop,
   useDetailAside,
@@ -186,6 +188,11 @@ type Props = {
   onPlayItem: (id: string, fromStart?: boolean) => void;
   // The item's library key — enables the admin "Manage collections" editor (page variant, movies).
   library?: string;
+  // Page variant, an episode: its show title opens the show page, its "S1·E25" the season page.
+  onOpenShow?: (showId: string) => void;
+  onOpenSeason?: (showId: string, seasonId: string) => void;
+  // Page variant: a collection strip's title opens that title's info page (its picture plays it).
+  onOpenInfo?: (id: string) => void;
 };
 
 export default function PlexInfo({
@@ -198,6 +205,9 @@ export default function PlexInfo({
   onOpenPerson,
   onPlayItem,
   library,
+  onOpenShow,
+  onOpenSeason,
+  onOpenInfo,
 }: Props) {
   const { t, i18n } = useTranslation();
   const lang = i18n.language;
@@ -299,6 +309,12 @@ export default function PlexInfo({
   const asideShown = !overlay && aside.column;
   const infoTitle =
     detail.kind === "episode" && detail.show_title ? detail.show_title : detail.title;
+  // Up from an episode: the show's title and the episode's season are links on the page (not over
+  // the running player, where leaving would stop it).
+  const showId = detail.kind === "episode" && !overlay ? detail.show_id : null;
+  const seasonId = detail.season_id;
+  const numbers = episodeNumbers(detail);
+  const upLink = "hover:text-accent hover:underline";
 
   return (
     <div className={overlay ? "relative w-full max-w-3xl" : "relative glass-media"}>
@@ -312,11 +328,32 @@ export default function PlexInfo({
               {overlay ? (
                 <h2 className="text-lg font-bold text-white">{infoTitle}</h2>
               ) : (
-                <PageHeading className="text-2xl font-bold">{infoTitle}</PageHeading>
+                <PageHeading className="text-2xl font-bold">
+                  {showId && onOpenShow && detail.show_title ? (
+                    <Pressable selectable className={upLink} onClick={() => onOpenShow(showId)}>
+                      {infoTitle}
+                    </Pressable>
+                  ) : (
+                    infoTitle
+                  )}
+                </PageHeading>
               )}
               {detail.kind === "episode" && (
                 <p className={`text-sm ${overlay ? "text-white/70" : "text-muted"}`}>
-                  {episodeLine(detail)}
+                  {showId && seasonId && onOpenSeason && numbers ? (
+                    <>
+                      <Pressable
+                        selectable
+                        className={upLink}
+                        onClick={() => onOpenSeason(showId, seasonId)}
+                      >
+                        {episodeName(detail)}
+                      </Pressable>
+                      {` — ${detail.title}`}
+                    </>
+                  ) : (
+                    episodeLine(detail)
+                  )}
                 </p>
               )}
             </div>
@@ -576,6 +613,7 @@ export default function PlexInfo({
                       shelf
                       navIndex={i}
                       onOpen={() => onPlayItem(m.id)}
+                      onPage={!overlay && onOpenInfo ? (c) => onOpenInfo(c.id) : undefined}
                       onRestart={() => onPlayItem(m.id, true)}
                       onToggleWatched={toggleColWatched}
                       onAdd={colActions.add}