feat(plex): series-page polish — season/episode quick actions + glassy art backdrop

- Season cards (show page) gain a hover Play overlay, a clickable title, a quick
  watched/unwatched toggle (whole season) and an add-whole-season-to-playlist button.
- Episode cards gain a hover watched/unwatched quick toggle (single episode) — in the
  season page and the search Episodes section.
- Series show + season pages now use the same glassy HTPC look as the movie info page:
  a faint fixed art backdrop + a customize menu (toggle the backdrop / hide the cast
  row), factored into a shared lib/plexDetailUi (useDetailPrefs / useArtBackdrop /
  DetailCustomizeMenu), reusing the movie info prefs (plexInfoArtBg/plexInfoCast) so the
  toggle state is consistent across movies and series.

frontend/src/components/PlexBrowse.tsx

@@ -28,6 +28,7 @@ import {
 } from "../lib/api";
 import { useDebounced } from "../lib/useDebounced";
 import { useHistorySubview } from "../lib/history";
+import { DetailCustomizeMenu, useArtBackdrop, useDetailPrefs } from "../lib/plexDetailUi";
 import PlexPlaylistAdd, { type PlexAddTarget } from "./PlexPlaylistAdd";
 import PlexCollectionEditor from "./PlexCollectionEditor";
 
@@ -205,6 +206,10 @@ export default function PlexBrowse({
     await api.plexSetState(card.id, next).catch(() => {});
     qc.invalidateQueries({ queryKey: ["plex-library"] });
   }
+  async function toggleEpisodeWatched(ep: PlexCard) {
+    await api.plexSetState(ep.id, ep.status === "watched" ? "new" : "watched").catch(() => {});
+    qc.invalidateQueries({ queryKey: ["plex-library"] });
+  }
   // Apply a metadata filter (clicked on an info page / show hero / cast) then show the unified grid.
   // Array filters (genres/people/studios) UNION with what's set; scalars replace. Clicking a person
   // (cast/crew) widens to the 'both' scope so their movies AND shows show up together (mixed feed).
@@ -331,7 +336,13 @@ export default function PlexBrowse({
               <h2 className="text-sm font-semibold mb-3">{t("plex.unified.episodes")}</h2>
               <div className="grid grid-cols-[repeat(auto-fill,minmax(230px,1fr))] gap-x-3 gap-y-4">
                 {episodes.map((ep) => (
-                  <EpisodeCard key={ep.id} ep={ep} withShowTitle onPlay={() => onCard(ep)} />
+                  <EpisodeCard
+                    key={ep.id}
+                    ep={ep}
+                    withShowTitle
+                    onPlay={() => onCard(ep)}
+                    onToggleWatched={() => toggleEpisodeWatched(ep)}
+                  />
                 ))}
               </div>
             </section>
@@ -588,24 +599,78 @@ function ActionBtn({
   );
 }
 
-function SeasonCard({ se, onOpen }: { se: PlexSeasonDetail; onOpen: () => void }) {
+function SeasonCard({
+  se,
+  onOpen,
+  onToggleWatched,
+  onAdd,
+}: {
+  se: PlexSeasonDetail;
+  onOpen: () => void;
+  onToggleWatched?: () => void;
+  onAdd?: () => void;
+}) {
   const { t } = useTranslation();
+  const watched = se.status === "watched";
   return (
-    <button onClick={onOpen} className="group text-left">
+    <div className="group text-left">
-      <div className="relative aspect-[2/3] rounded-xl overflow-hidden bg-card border border-border">
+      <div
+        onClick={onOpen}
+        role="button"
+        tabIndex={0}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onOpen();
+          }
+        }}
+        className="relative aspect-[2/3] rounded-xl overflow-hidden bg-card border border-border cursor-pointer"
+      >
         <img
           src={se.thumb}
           alt=""
           loading="lazy"
           className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200"
         />
-        {se.status === "watched" && (
+        <div className="absolute inset-0 bg-black/45 opacity-0 group-hover:opacity-100 transition grid place-items-center">
-          <span className="absolute top-1.5 right-1.5 text-[10px] bg-black/70 text-white px-1.5 py-0.5 rounded">
+          <div className="flex flex-col items-center gap-1 text-white">
+            <Play className="w-9 h-9" fill="currentColor" />
+            <span className="text-xs font-medium">{t("plex.openShow")}</span>
+          </div>
+        </div>
+        {/* Quick watched toggle (whole season), on hover. */}
+        {onToggleWatched && (
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              onToggleWatched();
+            }}
+            title={watched ? t("plex.series.markSeasonUnwatched") : t("plex.series.markSeasonWatched")}
+            className="absolute top-1.5 right-1.5 p-1 rounded-full bg-black/60 opacity-0 group-hover:opacity-100 hover:bg-black/80 transition"
+          >
+            <CheckCircle2 className={`w-4 h-4 ${watched ? "text-emerald-400" : "text-white"}`} />
+          </button>
+        )}
+        {/* Add whole season to a playlist, on hover. */}
+        {onAdd && (
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              onAdd();
+            }}
+            title={t("plex.playlist.addSeason")}
+            className="absolute bottom-1.5 right-1.5 p-1 rounded-full bg-black/60 opacity-0 group-hover:opacity-100 hover:bg-black/80 transition"
+          >
+            <ListPlus className="w-4 h-4 text-white" />
+          </button>
+        )}
+        {watched && (
+          <span className="absolute top-1.5 right-1.5 text-[10px] bg-black/70 text-white px-1.5 py-0.5 rounded group-hover:opacity-0">
             {t("plex.watched")}
           </span>
         )}
         {se.status === "in_progress" && (
-          <span className="absolute top-1.5 right-1.5 text-[10px] bg-accent/80 text-accent-fg px-1.5 py-0.5 rounded">
+          <span className="absolute top-1.5 right-1.5 text-[10px] bg-accent/80 text-accent-fg px-1.5 py-0.5 rounded group-hover:opacity-0">
             {t("plex.inProgress")}
           </span>
         )}
@@ -613,8 +678,10 @@ function SeasonCard({ se, onOpen }: { se: PlexSeasonDetail; onOpen: () => void }
           {t("plex.series.episodeCount", { count: se.episode_count })}
         </span>
       </div>
-      <div className="mt-1.5 text-sm font-medium line-clamp-2 leading-tight">{se.title}</div>
+      <div onClick={onOpen} className="mt-1.5 text-sm font-medium line-clamp-2 leading-tight cursor-pointer hover:text-accent">
-    </button>
+        {se.title}
+      </div>
+    </div>
   );
 }
 
@@ -693,11 +760,13 @@ function EpisodeCard({
   ep,
   onPlay,
   onAdd,
+  onToggleWatched,
   withShowTitle,
 }: {
   ep: PlexCard;
   onPlay: () => void;
   onAdd?: () => void;
+  onToggleWatched?: () => void;
   withShowTitle?: boolean;
 }) {
   const { t } = useTranslation();
@@ -708,9 +777,17 @@ function EpisodeCard({
       : 0;
   return (
     <div className="group">
-      <button
+      <div
         onClick={onPlay}
-        className="relative block w-full aspect-video rounded-xl overflow-hidden bg-card border border-border text-left"
+        role="button"
+        tabIndex={0}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onPlay();
+          }
+        }}
+        className="relative block w-full aspect-video rounded-xl overflow-hidden bg-card border border-border text-left cursor-pointer"
       >
         <img
           src={ep.thumb}
@@ -721,8 +798,21 @@ function EpisodeCard({
         <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition grid place-items-center">
           <Play className="w-9 h-9 text-white" fill="currentColor" />
         </div>
+        {/* Quick watched toggle (single episode), on hover. */}
+        {onToggleWatched && (
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              onToggleWatched();
+            }}
+            title={ep.status === "watched" ? t("plex.markUnwatched") : t("plex.markWatched")}
+            className="absolute top-1.5 right-1.5 p-1 rounded-full bg-black/60 opacity-0 group-hover:opacity-100 hover:bg-black/80 transition"
+          >
+            <CheckCircle2 className={`w-4 h-4 ${ep.status === "watched" ? "text-emerald-400" : "text-white"}`} />
+          </button>
+        )}
         {ep.status === "watched" && (
-          <span className="absolute top-1.5 right-1.5">
+          <span className={`absolute top-1.5 right-1.5 ${onToggleWatched ? "group-hover:opacity-0" : ""}`}>
             <CheckCircle2 className="w-4 h-4 text-emerald-400" />
           </span>
         )}
@@ -731,7 +821,7 @@ function EpisodeCard({
             <div className="h-full bg-accent" style={{ width: `${pct}%` }} />
           </div>
         )}
-      </button>
+      </div>
       <div className="mt-1.5 flex items-start gap-1.5">
         <div className="min-w-0 flex-1">
           {withShowTitle && ep.show_title && (
@@ -791,6 +881,8 @@ function PlexShowView({
   const showLib = show?.library ?? undefined;
   const allKeys = (d?.seasons ?? []).flatMap((se) => se.episodes.map((e) => e.id));
   const watched = show?.status === "watched";
+  const { artBg, showCast, toggleArtBg, toggleCast } = useDetailPrefs();
+  useArtBackdrop(show?.art, artBg);
   async function markAll(w: boolean) {
     setBusy(true);
     try {
@@ -801,9 +893,23 @@ function PlexShowView({
     qc.invalidateQueries({ queryKey: ["plex-show", showId] });
     qc.invalidateQueries({ queryKey: ["plex-library"] });
   }
+  async function markSeason(seasonRk: string, w: boolean) {
+    await api.plexSeasonState(seasonRk, w).catch(() => {});
+    qc.invalidateQueries({ queryKey: ["plex-show", showId] });
+    qc.invalidateQueries({ queryKey: ["plex-library"] });
+  }
 
   return (
-    <div className="p-4 max-w-[1200px] mx-auto">
+    <div className="relative p-4 max-w-[1200px] mx-auto">
+      <div className="absolute right-4 top-4 z-10">
+        <DetailCustomizeMenu
+          artBg={artBg}
+          onToggleArtBg={toggleArtBg}
+          showCast={showCast}
+          onToggleCast={toggleCast}
+          hasCast={(show?.cast.length ?? 0) > 0}
+        />
+      </div>
       <BackBtn onBack={onBack} label={t("plex.backToLibrary")} />
 
       {q.isLoading || !d || !show ? (
@@ -894,11 +1000,26 @@ function PlexShowView({
           <h2 className="text-sm font-semibold mb-3">{t("plex.series.seasons")}</h2>
           <div className="grid grid-cols-[repeat(auto-fill,minmax(140px,1fr))] gap-3 mb-8">
             {d.seasons.map((se) => (
-              <SeasonCard key={se.id} se={se} onOpen={() => onOpenSeason(se.id)} />
+              <SeasonCard
+                key={se.id}
+                se={se}
+                onOpen={() => onOpenSeason(se.id)}
+                onToggleWatched={() => markSeason(se.id, se.status !== "watched")}
+                onAdd={
+                  se.episodes.length > 0
+                    ? () =>
+                        setAddTarget({
+                          kind: "group",
+                          ratingKeys: se.episodes.map((e) => e.id),
+                          title: `${show.title} — ${se.title}`,
+                        })
+                    : undefined
+                }
+              />
             ))}
           </div>
 
-          {show.cast.length > 0 && <CastStrip cast={show.cast} onFilter={onFilter} />}
+          {show.cast.length > 0 && showCast && <CastStrip cast={show.cast} onFilter={onFilter} />}
           {d.related.length > 0 && <RelatedStrip related={d.related} onOpen={onOpenShow} />}
         </>
       )}
@@ -938,6 +1059,8 @@ function PlexSeasonView({
 
   const seasonKeys = se?.episodes.map((e) => e.id) ?? [];
   const watched = se?.status === "watched";
+  const { artBg, showCast, toggleArtBg, toggleCast } = useDetailPrefs();
+  useArtBackdrop(d?.show.art, artBg);
   async function markAll(w: boolean) {
     setBusy(true);
     try {
@@ -948,9 +1071,23 @@ function PlexSeasonView({
     qc.invalidateQueries({ queryKey: ["plex-show", showId] });
     qc.invalidateQueries({ queryKey: ["plex-library"] });
   }
+  async function markEpisode(ep: PlexCard) {
+    await api.plexSetState(ep.id, ep.status === "watched" ? "new" : "watched").catch(() => {});
+    qc.invalidateQueries({ queryKey: ["plex-show", showId] });
+    qc.invalidateQueries({ queryKey: ["plex-library"] });
+  }
 
   return (
-    <div className="p-4 max-w-[1200px] mx-auto">
+    <div className="relative p-4 max-w-[1200px] mx-auto">
+      <div className="absolute right-4 top-4 z-10">
+        <DetailCustomizeMenu
+          artBg={artBg}
+          onToggleArtBg={toggleArtBg}
+          showCast={showCast}
+          onToggleCast={toggleCast}
+          hasCast={false}
+        />
+      </div>
       <BackBtn onBack={onBack} label={t("plex.series.backToShow")} />
 
       {q.isLoading || !d || !se ? (
@@ -1006,6 +1143,7 @@ function PlexSeasonView({
                 ep={ep}
                 onPlay={() => onPlay(ep.id, seasonKeys)}
                 onAdd={() => setAddTarget({ kind: "single", ratingKey: ep.id, title: ep.title })}
+                onToggleWatched={() => markEpisode(ep)}
               />
             ))}
           </div>

frontend/src/lib/plexDetailUi.tsx

@@ -0,0 +1,126 @@
+import { useLayoutEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useQueryClient } from "@tanstack/react-query";
+import { SlidersHorizontal } from "lucide-react";
+import { useDismiss } from "./useDismiss";
+import { api } from "./api";
+
+// Shared "detail page" UI reused by the movie info page (PlexInfo) and the series show/season pages,
+// so they look consistent (the standing glassy/HTPC brief): the faint fixed art backdrop, the two
+// per-user display prefs (art background / cast row — same keys as the movie info page), and the
+// customize menu that toggles them.
+
+export function useDetailPrefs() {
+  const qc = useQueryClient();
+  const prefs = (qc.getQueryData<{ preferences?: Record<string, unknown> }>(["me"])?.preferences ?? {}) as {
+    plexInfoArtBg?: boolean;
+    plexInfoCast?: boolean;
+  };
+  const [artBg, setArtBg] = useState(prefs.plexInfoArtBg !== false);
+  const [showCast, setShowCast] = useState(prefs.plexInfoCast !== false);
+  const save = (patch: Record<string, unknown>) => {
+    api.savePrefs(patch).catch(() => {});
+    qc.setQueryData<{ preferences?: Record<string, unknown> } | undefined>(["me"], (m) =>
+      m ? { ...m, preferences: { ...(m.preferences || {}), ...patch } } : m,
+    );
+  };
+  return {
+    artBg,
+    showCast,
+    toggleArtBg: () => {
+      const next = !artBg;
+      setArtBg(next);
+      save({ plexInfoArtBg: next });
+    },
+    toggleCast: () => {
+      const next = !showCast;
+      setShowCast(next);
+      save({ plexInfoCast: next });
+    },
+  };
+}
+
+// Paint the item's art as a faint FIXED backdrop on the page's <main> scroll container (HTPC-style),
+// so the glass panels float over it. Cleared on unmount / when disabled / when there's no art.
+export function useArtBackdrop(art: string | null | undefined, enabled: boolean) {
+  useLayoutEffect(() => {
+    const main = document.querySelector("main");
+    if (!main) return;
+    const s = main.style;
+    const clear = () => {
+      s.backgroundImage = "";
+      s.backgroundSize = "";
+      s.backgroundPosition = "";
+      s.backgroundRepeat = "";
+      s.backgroundAttachment = "";
+    };
+    if (enabled && art) {
+      s.backgroundImage =
+        `linear-gradient(color-mix(in srgb, var(--bg) 60%, transparent), ` +
+        `color-mix(in srgb, var(--bg) 64%, transparent)), url("${art}")`;
+      s.backgroundSize = "cover";
+      s.backgroundPosition = "center 20%";
+      s.backgroundRepeat = "no-repeat";
+      s.backgroundAttachment = "fixed";
+    } else {
+      clear();
+    }
+    return clear;
+  }, [art, enabled]);
+}
+
+export function DetailCustomizeMenu({
+  artBg,
+  onToggleArtBg,
+  showCast,
+  onToggleCast,
+  hasCast,
+}: {
+  artBg: boolean;
+  onToggleArtBg: () => void;
+  showCast: boolean;
+  onToggleCast: () => void;
+  hasCast: boolean;
+}) {
+  const { t } = useTranslation();
+  const [open, setOpen] = useState(false);
+  const btnRef = useRef<HTMLButtonElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+  useDismiss(open, () => setOpen(false), [menuRef, btnRef]);
+  return (
+    <div className="relative shrink-0">
+      <button
+        ref={btnRef}
+        onClick={() => setOpen((v) => !v)}
+        title={t("plex.info.customize")}
+        className="p-1.5 rounded-lg text-muted hover:bg-surface hover:text-fg"
+      >
+        <SlidersHorizontal className="w-4 h-4" />
+      </button>
+      {open && (
+        <div
+          ref={menuRef}
+          className="glass-menu absolute right-0 top-full z-20 mt-1 w-52 rounded-xl p-1.5 text-sm"
+          style={{ background: "color-mix(in srgb, var(--surface) 58%, transparent)" }}
+        >
+          <PrefToggle label={t("plex.info.prefArtBg")} on={artBg} onClick={onToggleArtBg} />
+          {hasCast && <PrefToggle label={t("plex.info.prefCast")} on={showCast} onClick={onToggleCast} />}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function PrefToggle({ label, on, onClick }: { label: string; on: boolean; onClick: () => void }) {
+  return (
+    <button
+      onClick={onClick}
+      className="flex w-full items-center justify-between rounded-lg px-2 py-1.5 text-left hover:bg-surface"
+    >
+      <span>{label}</span>
+      <span className={`relative h-4 w-7 rounded-full transition ${on ? "bg-accent" : "bg-border"}`}>
+        <span className={`absolute top-0.5 h-3 w-3 rounded-full bg-white transition-all ${on ? "left-3.5" : "left-0.5"}`} />
+      </span>
+    </button>
+  );
+}