refactor(plex): one cast row for a show's page and a title's info

CastStrip (a show's page) and PlexInfo (a title's page and the player's overlay) each drew the
cast carousel by hand, and the copies had drifted: the gap, lazy pictures, the name's tooltip, the
initial's size. Both now render CastRow, which takes the overlay's white-on-art palette as a tone;
each caller keeps its own frame and heading. A DOM test holds the palette per variant (seen red
with the tone wired to "panel"). jscpd over the shipped code: 1 clone >= 10 lines -> 0.

frontend/src/components/PlexInfo.tsx

@@ -19,7 +19,6 @@ import { Carousel } from "./ui/Carousel";
 import PlexCollectionEditor from "./PlexCollectionEditor";
 import PlexPlaylistAdd from "./PlexPlaylistAdd";
 import { PLAYABLE_TINT, playableClass } from "./plexPlayable";
-import { navItemAttrs } from "../lib/listNav";
 import { Button } from "./ui/Button";
 import { IconButton } from "./ui/IconButton";
 import { Pressable } from "./ui/Pressable";
@@ -27,7 +26,7 @@ import { SURFACE } from "./ui/surfaces";
 import { Badge } from "./ui/Badge";
 import { IconLink } from "./ui/LinkButton";
 import { PageHeading } from "./ui/Headings";
-import { PlexPosterCard } from "./plexCards";
+import { CastRow, PlexPosterCard } from "./plexCards";
 import { PlexMenu } from "./PlexMenu";
 import { useContextMenu } from "./ui/useContextMenu";
 import { usePlexCardActions } from "./usePlexCardActions";
@@ -594,71 +593,12 @@ export default function PlexInfo({
               <h2 className={`mb-2 text-sm font-semibold ${overlay ? "text-white/80" : ""}`}>
                 {t("plex.info.cast")}
               </h2>
-              <Carousel
-                ariaLabel={t("plex.info.cast")}
-                gap="gap-3"
-                keyboardNav={!!(onOpenPerson || onFilter)}
-              >
-                {cast.map((c, i) => {
-                  const clickable = !!(onOpenPerson || onFilter);
-                  const inner = (
-                    <>
-                      <div
-                        className={`mx-auto mb-1 h-20 w-20 overflow-hidden rounded-full border ${
-                          overlay ? "border-white/15 bg-white/10" : "border-border bg-surface"
-                        } ${clickable ? "group-hover/cast:border-accent" : ""}`}
-                      >
-                        {c.thumb ? (
-                          <img src={c.thumb} alt="" className="h-full w-full object-cover" />
-                        ) : (
-                          <div
-                            className={`grid h-full w-full place-items-center text-lg opacity-40 ${overlay ? "text-white" : ""}`}
-                          >
-                            {c.name.charAt(0)}
-                          </div>
-                        )}
-                      </div>
-                      <div
-                        className={`truncate text-xs font-medium ${overlay ? "text-white/90" : ""} ${
-                          clickable ? "group-hover/cast:text-accent" : ""
-                        }`}
-                      >
-                        {c.name}
-                      </div>
-                      {c.role && (
-                        <div
-                          className={`truncate text-2xs ${overlay ? "text-white/55" : "text-muted"}`}
-                        >
-                          {c.role}
-                        </div>
-                      )}
-                    </>
-                  );
-                  return clickable ? (
-                    <Pressable
-                      selectable
-                      key={i}
-                      align="center"
-                      {...navItemAttrs(i)}
-                      onClick={() =>
-                        onOpenPerson ? onOpenPerson(c.name) : onFilter?.({ actors: [c.name] })
-                      }
-                      title={
-                        onOpenPerson
-                          ? t("plex.info.viewPerson", { name: c.name })
-                          : t("plex.info.filterActor", { name: c.name })
-                      }
-                      className="group/cast w-20 shrink-0"
-                    >
-                      {inner}
-                    </Pressable>
-                  ) : (
-                    <div key={i} className="w-20 shrink-0 text-center">
-                      {inner}
-                    </div>
-                  );
-                })}
-              </Carousel>
+              <CastRow
+                cast={cast}
+                tone={overlay ? "overlay" : "panel"}
+                onFilter={onFilter}
+                onOpenPerson={onOpenPerson}
+              />
             </div>
           );
           if (overlay)