feat(plex): filter the feed by playback class (Direct Play / Direct Stream / Transcode HW/SW)

Adds a movie-scoped "Playback" filter to the Plex feed so a user can isolate items by how
they play — the groundwork for collecting HW-transcodable (or no-transcode) versions.

Four classes derived from the stored `playable` + a new `transcode_hw` facet:
- Direct Play (direct), Direct Stream (remux)
- Transcode · HW  — playable=transcode AND the iGPU can hardware-transcode it
- Transcode · SW  — playable=transcode, software libx264 only

The HW/SW split is precise, not codec-only: a 10-bit/HDR HEVC is HW-decodable yet breaks the
VAAPI nv12 pipeline (the same case plex/stream special-cases), so it must count as SW.

Backend:
- New PlexItem columns (migration 0077): transcode_hw, video_bit_depth, media_probed_at.
  Migration backfills transcode_hw codec-only so the filter works immediately.
- `plex.sync.transcode_hw_capable` is the single classifier; the HW-decodable codec set moves
  to sync as `HW_DECODABLE_CODECS` and plex.stream imports it, so the catalog facet and the
  runtime encoder choice can't disagree by codec.
- Bit-depth backfill (`_probe_media_batch`, wired into sync): probes only HW-decodable transcode
  items' video Stream for bit-depth + HDR and refines a 10-bit/HDR HEVC to software. Bounded
  per run, watermarked by media_probed_at. A codec change resets the watermark (stale probe).
- Filter + self-excluded facet on a shared `playback_class_expr` CASE (movie-leg only — a show
  is an aggregate with no single class). transcode_hw threaded onto the feed/detail/card JSON.

Frontend:
- Multi-select "Playback" Combobox in the sidebar (movie scope, facet-empty drop-out), active
  chips, 4-way corner-dot badge (green/blue/amber/red) + tooltip, and an info-page playback chip
  with a codec · bit-depth subtitle. New `bg-info` (blue) token, i18n HU/EN parity.
- Fix a regression where the card's playback dot lost its hover tooltip: the full-card reveal
  overlay swallowed the cursor; the dot now sits above it (z-20).

Gate: backend full lane + frontend typecheck/lint/knip/prettier/vitest all green. Browser-UAT'd
on localdev (filter narrows to the SW set, facet counts, badge colour + tooltip, info chip).

frontend/src/components/PlexInfo.tsx

@@ -19,6 +19,7 @@ import i18n from "../i18n";
 import { Carousel } from "./Carousel";
 import PlexCollectionEditor from "./PlexCollectionEditor";
 import PlexPlaylistAdd from "./PlexPlaylistAdd";
+import { PLAYABLE_TINT, playableClass } from "./plexCards";
 
 // The rich "media info" surface for a Plex item — poster/art, IMDb score + link, content rating,
 // genres, director, cast (with photos), summary. Reused in TWO places: a full-page view opened from
@@ -253,6 +254,33 @@ function CrewPanel({
   );
 }
 
+// The playback-class chip (dot + Plex-native label), with a muted codec · bit-depth subtitle when
+// known. Class + colour are derived through the SAME shared helper the browse-card corner dot uses,
+// so the two surfaces can't drift. `overlay` tints the label for the dark player background.
+function PlaybackChip({ detail, overlay }: { detail: PlexItemDetail; overlay: boolean }) {
+  const { t } = useTranslation();
+  if (!detail.playable) return null;
+  const cls = playableClass(detail.playable, detail.transcode_hw);
+  const sub = [
+    detail.codec_video ? detail.codec_video.toUpperCase() : null,
+    detail.video_bit_depth != null ? `${detail.video_bit_depth}-bit` : null,
+  ]
+    .filter(Boolean)
+    .join(" · ");
+  return (
+    <span
+      className={`inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-xs ${
+        overlay ? "bg-white/10 text-white/90" : "bg-surface text-muted"
+      }`}
+      title={t(`plex.playable.${cls}`)}
+    >
+      <span className={`h-2 w-2 shrink-0 rounded-full ${PLAYABLE_TINT[cls] ?? "bg-gray-400"}`} />
+      <span className="font-medium">{t(`plex.filter.playableOpt.${cls}`)}</span>
+      {sub && <span className="opacity-70">{sub}</span>}
+    </span>
+  );
+}
+
 type Props = {
   detail: PlexItemDetail;
   variant: "page" | "overlay";
@@ -479,6 +507,7 @@ export default function PlexInfo({
                     {detail.studio}
                   </Filterable>
                 )}
+                <PlaybackChip detail={detail} overlay={overlay} />
               </div>
 
               {/* Multi-source ratings row (E5 S5): IMDb / TMDb / audience, whichever are present. */}

frontend/src/components/PlexSidebar.tsx

@@ -296,6 +296,28 @@ export default function PlexSidebar({ layout, setLayout, collapsed, onToggleColl
           },
         ]
       : []),
+    // Playback class (Direct Play / Direct Stream / Transcode HW/SW) — movie-only (shows have no
+    // class), and dropped when the facet is empty. Labels are localized (the facet ships class keys).
+    ...(scope === "movie" && facets && facets.playable.length > 0
+      ? [
+          {
+            id: "playable",
+            title: t("plex.filter.playable"),
+            body: (
+              <Combobox
+                label={t("plex.filter.playable")}
+                options={facets.playable.map((p) => ({
+                  value: p.value,
+                  label: t(`plex.filter.playableOpt.${p.value}`),
+                  count: p.count,
+                }))}
+                selected={filters.playable}
+                onChange={(next) => patch({ playable: next })}
+              />
+            ),
+          },
+        ]
+      : []),
   ];
 
   return (

frontend/src/components/plexCards.tsx

@@ -8,14 +8,23 @@ import type { PlexCard, PlexCastMember, PlexFilters, PlexSeasonDetail } from "..
 // Presentational Plex cards + strips, split out of PlexBrowse (all purely prop-driven, no shared
 // state). Rendered by the browse grid, the person page, and the series show/season views.
 
-// Playback cost, escalating good→heavy: direct (green) → remux, a light repackage
-// (amber) → transcode, a full re-encode (red). Reuses the status trio as a gradient;
-// all three stay visually distinct.
-const PLAYABLE_TINT: Record<string, string> = {
+// Playback cost, escalating good→heavy: Direct Play (green) → Direct Stream / remux, a light
+// repackage (blue) → Transcode · HW, a hardware re-encode (amber) → Transcode · SW, a software
+// re-encode (red). transcode splits HW vs SW by card.transcode_hw. Reuses the semantic tokens as a
+// gradient; all four stay visually distinct in light + dark.
+export const PLAYABLE_TINT: Record<string, string> = {
   direct: "bg-success",
-  remux: "bg-warn",
-  transcode: "bg-danger",
+  remux: "bg-info",
+  transcode_hw: "bg-warn",
+  transcode_sw: "bg-danger",
 };
+// Collapse the wire `playable` (direct|remux|transcode) + transcode_hw flag into one of the 4 display
+// classes, so the corner dot's colour + tooltip can't drift from the sidebar filter's option keys.
+// Shared with the info-page playback chip (PlexInfo) so both surfaces derive the class identically.
+export function playableClass(playable: string, transcodeHw?: boolean | null): string {
+  if (playable === "transcode") return transcodeHw ? "transcode_hw" : "transcode_sw";
+  return playable; // direct | remux
+}
 
 // The reveal class for a status pill (watched / in-progress) that shares a corner with a hover-reveal
 // control (the watched-toggle). When that control is present it takes over on touch, so the pill yields
@@ -82,13 +91,20 @@ export function PlexPosterCard({
           decoding="async"
           className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200"
         />
-        {/* Playable-cost tint (always shown — a quick "will it direct-play" cue). */}
-        {card.playable && (
-          <span
-            className={`absolute top-1.5 left-1.5 w-2 h-2 rounded-full ring-2 ring-black/40 ${PLAYABLE_TINT[card.playable] ?? "bg-gray-400"}`}
-            title={t(`plex.playable.${card.playable}`)}
-          />
-        )}
+        {/* Playable-cost tint (always shown — a quick "will it direct-play" cue). z-20 keeps the dot
+            ABOVE the full-card hover-reveal overlay below (absolute inset-0, no pointer-events-none):
+            without it the overlay sits on top and swallows the cursor, so the dot's native `title`
+            tooltip never fired on hover (a regression once the reveal overlay was added). */}
+        {card.playable &&
+          (() => {
+            const cls = playableClass(card.playable, card.transcode_hw);
+            return (
+              <span
+                className={`absolute top-1.5 left-1.5 z-20 w-2 h-2 rounded-full ring-2 ring-black/40 ${PLAYABLE_TINT[cls] ?? "bg-gray-400"}`}
+                title={t(`plex.playable.${cls}`)}
+              />
+            );
+          })()}
         {/* Rest-state watched badge (top-right). Yields to the hover quick-actions on a playable card
             (reveal-idle: gone on touch where the toggle is always shown); a watched show keeps it. */}
         {card.status === "watched" && (

frontend/src/components/usePlexActiveFilters.ts

@@ -110,6 +110,13 @@ export function buildPlexActiveFilters(
       remove: () => patch({ studios: filters.studios.filter((x) => x !== s) }),
     });
   }
+  for (const p of filters.playable) {
+    out.push({
+      key: `playable:${p}`,
+      label: t(`plex.filter.playableOpt.${p}`),
+      remove: () => patch({ playable: filters.playable.filter((x) => x !== p) }),
+    });
+  }
   for (const k of filters.keywords) {
     out.push({
       key: `keyword:${k}`,