feat(plex): expanded metadata filters, clickable info page, image disk cache

Backend (migration 0045_plex_filter_meta): plex_items gains rating (audienceRating
~IMDb), content_rating, studio, originally_available_at, and GIN-indexed genres /
directors / cast_names — all mirrored from the cheap section listing (no per-item API
calls; they also seed a future watch-habit recommender). /browse gains genre / content-
rating / year / rating / duration / added-within / director / actor / studio filters
(@> containment, GIN) + sort by year|rating|duration|release; new /facets endpoint
returns available genres+ratings (with counts) and the year/rating/duration bounds. A
thin on-disk image cache (.plex-img-cache) serves posters/art/cast photos from local
disk after first fetch (~7-14x faster repeat loads).

Frontend: PlexSidebar grows the full filter set (facet-driven genre/age chips, rating
steps, year range inputs, duration buckets, added-within, active people/studio chips,
clear-all); filters persist per-account as one JSON blob. PlexInfo metadata (year,
genre, director, cast, studio, IMDb score) is clickable → sets the matching filter and
returns to the filtered grid (page variant only; the in-player overlay stays read-only
so a stray click can't stop playback). i18n en/hu/de.

frontend/src/components/PlexBrowse.tsx

@@ -2,7 +2,7 @@ import { lazy, Suspense, useEffect, useLayoutEffect, useRef, type CSSProperties
 import { useTranslation } from "react-i18next";
 import { useInfiniteQuery, useQuery, useQueryClient } from "@tanstack/react-query";
 import { ArrowLeft, CheckCircle2, Info, Play } from "lucide-react";
-import { api, type PlexCard } from "../lib/api";
+import { api, type PlexCard, type PlexFilters } from "../lib/api";
 import { useDebounced } from "../lib/useDebounced";
 import { useHistorySubview } from "../lib/history";
 
@@ -22,7 +22,14 @@ type Sub =
 // (useHistorySubview) so browser Back returns to the grid. Playback lands in P2 — a card announces
 // for now. Rendered by App for page==="plex" (its own nav module).
 
-type Props = { q: string; library: string; show: string; sort: string };
+type Props = {
+  q: string;
+  library: string;
+  show: string;
+  sort: string;
+  filters: PlexFilters;
+  setFilters: (f: PlexFilters) => void;
+};
 
 const PAGE = 40;
 
@@ -33,7 +40,7 @@ function dur(n?: number | null): string {
   return h ? `${h}h ${m}m` : `${m}m`;
 }
 
-export default function PlexBrowse({ q, library, show, sort }: Props) {
+export default function PlexBrowse({ q, library, show, sort, filters, setFilters }: Props) {
   const { t } = useTranslation();
   const qc = useQueryClient();
   const dq = useDebounced(q.trim(), 350);
@@ -53,11 +60,19 @@ export default function PlexBrowse({ q, library, show, sort }: Props) {
   }, [sub.view.kind]);
 
   const browseQ = useInfiniteQuery({
-    queryKey: ["plex-browse", library, dq, sort, show],
+    queryKey: ["plex-browse", library, dq, sort, show, filters],
     enabled: !!library && sub.view.kind === "grid",
     initialPageParam: 0,
     queryFn: ({ pageParam }) =>
-      api.plexBrowse({ library, q: dq || undefined, sort, show, offset: pageParam as number, limit: PAGE }),
+      api.plexBrowse({
+        library,
+        q: dq || undefined,
+        sort,
+        show,
+        filters,
+        offset: pageParam as number,
+        limit: PAGE,
+      }),
     getNextPageParam: (last) => {
       const seen = last.offset + last.items.length;
       return seen < last.total ? seen : undefined;
@@ -111,6 +126,11 @@ export default function PlexBrowse({ q, library, show, sort }: Props) {
         id={infoId}
         onBack={sub.back}
         onPlay={() => sub.open({ kind: "player", id: infoId })}
+        onFilter={(patch) => {
+          // Clicking a metadata chip sets that filter and returns to the (now filtered) grid.
+          setFilters({ ...filters, ...patch });
+          sub.back();
+        }}
       />
     );
   }
@@ -273,10 +293,12 @@ function PlexInfoView({
   id,
   onBack,
   onPlay,
+  onFilter,
 }: {
   id: string;
   onBack: () => void;
   onPlay: () => void;
+  onFilter: (patch: Partial<PlexFilters>) => void;
 }) {
   const { t } = useTranslation();
   const q = useQuery({ queryKey: ["plex-item", id], queryFn: () => api.plexItem(id) });
@@ -295,7 +317,7 @@ function PlexInfoView({
         <p className="p-8 text-muted text-sm">{t("plex.loading")}</p>
       ) : (
         <Suspense fallback={<p className="p-8 text-muted text-sm">{t("plex.loading")}</p>}>
-          <PlexInfo detail={q.data} variant="page" onPlay={onPlay} />
+          <PlexInfo detail={q.data} variant="page" onPlay={onPlay} onFilter={onFilter} />
         </Suspense>
       )}
     </div>

frontend/src/components/PlexInfo.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import { useQueryClient } from "@tanstack/react-query";
 import {
@@ -10,7 +10,7 @@ import {
   Star,
   X,
 } from "lucide-react";
-import { api, type PlexItemDetail } from "../lib/api";
+import { api, type PlexFilters, type PlexItemDetail } from "../lib/api";
 
 // 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
@@ -24,8 +24,31 @@ type Props = {
   onPlay?: () => void; // page: start/resume playback
   onClose?: () => void; // overlay: dismiss
   onStateChange?: () => void; // after a watch-state change, let the opener refresh
+  // When provided, metadata (year/genre/director/cast/studio/rating) becomes clickable and sets
+  // the corresponding Plex filter (then the opener navigates to the filtered grid).
+  onFilter?: (patch: Partial<PlexFilters>) => void;
 };
 
+// A metadata value that filters the grid when clicked (if onFilter is wired), else plain text.
+function Filterable({
+  onClick,
+  title,
+  className,
+  children,
+}: {
+  onClick?: () => void;
+  title?: string;
+  className?: string;
+  children: ReactNode;
+}) {
+  if (!onClick) return <span className={className}>{children}</span>;
+  return (
+    <button onClick={onClick} title={title} className={`${className ?? ""} cursor-pointer hover:text-accent transition`}>
+      {children}
+    </button>
+  );
+}
+
 function fmtDur(s?: number | null): string {
   if (!s) return "";
   const h = Math.floor(s / 3600);
@@ -33,7 +56,7 @@ function fmtDur(s?: number | null): string {
   return h ? `${h}h ${m}m` : `${m}m`;
 }
 
-export default function PlexInfo({ detail, variant, onPlay, onClose, onStateChange }: Props) {
+export default function PlexInfo({ detail, variant, onPlay, onClose, onStateChange, onFilter }: Props) {
   const { t } = useTranslation();
   const qc = useQueryClient();
 
@@ -59,15 +82,9 @@ export default function PlexInfo({ detail, variant, onPlay, onClose, onStateChan
     onStateChange?.();
   };
 
-  const meta = [
-    detail.year,
-    detail.content_rating,
-    fmtDur(detail.duration_seconds),
-    detail.studio,
-  ].filter(Boolean);
-
   const cast = showCast ? detail.cast : [];
   const overlay = variant === "overlay";
+  const mutedCls = overlay ? "text-white/70" : "text-muted";
 
   return (
     <div className={overlay ? "relative w-full max-w-3xl" : "relative"}>
@@ -141,27 +158,50 @@ export default function PlexInfo({ detail, variant, onPlay, onClose, onStateChan
           />
 
           <div className={`min-w-0 flex-1 ${overlay ? "text-white/90" : ""}`}>
-            {/* Meta line + IMDb rating/link */}
+            {/* Meta line + IMDb rating/link (each value can set the matching filter). */}
             <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-sm">
-              {meta.map((m, i) => (
-                <span key={i} className={overlay ? "text-white/70" : "text-muted"}>
-                  {m}
-                </span>
-              ))}
-              {detail.imdb_rating != null && (
-                <a
-                  href={detail.imdb_url ?? undefined}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className={`inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 font-semibold ${
-                    detail.imdb_url ? "bg-amber-400/15 text-amber-500 hover:bg-amber-400/25" : ""
-                  }`}
-                  title={detail.imdb_url ? t("plex.info.openImdb") : undefined}
+              {detail.year != null && (
+                <Filterable
+                  className={mutedCls}
+                  title={onFilter ? t("plex.info.filterYear", { year: detail.year }) : undefined}
+                  onClick={onFilter ? () => onFilter({ yearMin: detail.year, yearMax: detail.year }) : undefined}
                 >
-                  <Star className="w-3.5 h-3.5 fill-current" />
-                  {detail.imdb_rating.toFixed(1)}
-                  {detail.imdb_url && <ExternalLink className="w-3 h-3 opacity-70" />}
-                </a>
+                  {detail.year}
+                </Filterable>
+              )}
+              {detail.content_rating && (
+                <Filterable
+                  className={mutedCls}
+                  onClick={onFilter ? () => onFilter({ contentRatings: [detail.content_rating!] }) : undefined}
+                >
+                  {detail.content_rating}
+                </Filterable>
+              )}
+              {detail.duration_seconds ? <span className={mutedCls}>{fmtDur(detail.duration_seconds)}</span> : null}
+              {detail.studio && (
+                <Filterable
+                  className={mutedCls}
+                  onClick={onFilter ? () => onFilter({ studio: detail.studio! }) : undefined}
+                >
+                  {detail.studio}
+                </Filterable>
+              )}
+              {detail.imdb_rating != null && (
+                <span className="inline-flex items-center gap-1 rounded-md bg-amber-400/15 px-1.5 py-0.5 font-semibold text-amber-500">
+                  <button
+                    onClick={onFilter ? () => onFilter({ ratingMin: Math.floor(detail.imdb_rating!) }) : undefined}
+                    className={`inline-flex items-center gap-1 ${onFilter ? "cursor-pointer hover:opacity-80" : "cursor-default"}`}
+                    title={onFilter ? t("plex.info.filterRating", { n: Math.floor(detail.imdb_rating!) }) : undefined}
+                  >
+                    <Star className="w-3.5 h-3.5 fill-current" />
+                    {detail.imdb_rating.toFixed(1)}
+                  </button>
+                  {detail.imdb_url && (
+                    <a href={detail.imdb_url} target="_blank" rel="noopener noreferrer" title={t("plex.info.openImdb")}>
+                      <ExternalLink className="w-3 h-3 opacity-70 hover:opacity-100" />
+                    </a>
+                  )}
+                </span>
               )}
             </div>
 
@@ -174,19 +214,31 @@ export default function PlexInfo({ detail, variant, onPlay, onClose, onStateChan
             {detail.genres.length > 0 && (
               <div className="mt-2 flex flex-wrap gap-1.5">
                 {detail.genres.map((g) => (
-                  <span
+                  <Filterable
                     key={g}
                     className={`rounded-full px-2 py-0.5 text-xs ${overlay ? "bg-white/10" : "bg-surface text-muted"}`}
+                    onClick={onFilter ? () => onFilter({ genres: [g] }) : undefined}
                   >
                     {g}
-                  </span>
+                  </Filterable>
                 ))}
               </div>
             )}
 
             {detail.directors.length > 0 && (
-              <p className={`mt-2 text-sm ${overlay ? "text-white/70" : "text-muted"}`}>
-                {t("plex.info.director")}: <span className="font-medium">{detail.directors.join(", ")}</span>
+              <p className={`mt-2 text-sm ${mutedCls}`}>
+                {t("plex.info.director")}:{" "}
+                {detail.directors.map((d, i) => (
+                  <span key={d}>
+                    <Filterable
+                      className="font-medium"
+                      onClick={onFilter ? () => onFilter({ director: d }) : undefined}
+                    >
+                      {d}
+                    </Filterable>
+                    {i < detail.directors.length - 1 ? ", " : ""}
+                  </span>
+                ))}
               </p>
             )}
 
@@ -246,29 +298,51 @@ export default function PlexInfo({ detail, variant, onPlay, onClose, onStateChan
               {t("plex.info.cast")}
             </h2>
             <div className="flex gap-3 overflow-x-auto pb-2">
-              {cast.map((c, i) => (
-                <div key={i} className="w-20 shrink-0 text-center">
-                  <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"}`}
-                  >
-                    {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">
-                        {c.name.charAt(0)}
+              {cast.map((c, i) => {
+                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"
+                      } ${onFilter ? "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">
+                          {c.name.charAt(0)}
+                        </div>
+                      )}
+                    </div>
+                    <div
+                      className={`truncate text-xs font-medium ${overlay ? "text-white/90" : ""} ${
+                        onFilter ? "group-hover/cast:text-accent" : ""
+                      }`}
+                    >
+                      {c.name}
+                    </div>
+                    {c.role && (
+                      <div className={`truncate text-[11px] ${overlay ? "text-white/55" : "text-muted"}`}>
+                        {c.role}
                       </div>
                     )}
+                  </>
+                );
+                return onFilter ? (
+                  <button
+                    key={i}
+                    onClick={() => onFilter({ actor: c.name })}
+                    title={t("plex.info.filterActor", { name: c.name })}
+                    className="group/cast w-20 shrink-0 text-center"
+                  >
+                    {inner}
+                  </button>
+                ) : (
+                  <div key={i} className="w-20 shrink-0 text-center">
+                    {inner}
                   </div>
-                  <div className={`truncate text-xs font-medium ${overlay ? "text-white/90" : ""}`}>
-                    {c.name}
-                  </div>
-                  {c.role && (
-                    <div className={`truncate text-[11px] ${overlay ? "text-white/55" : "text-muted"}`}>
-                      {c.role}
-                    </div>
-                  )}
-                </div>
-              ))}
+                );
+              })}
             </div>
           </div>
         )}

frontend/src/components/PlexSidebar.tsx

@@ -1,11 +1,14 @@
-import { useEffect } from "react";
+import { useEffect, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import { useQuery } from "@tanstack/react-query";
-import { ChevronRight, Film, SlidersHorizontal, Tv2 } from "lucide-react";
-import { api } from "../lib/api";
+import { ChevronRight, Film, SlidersHorizontal, Tv2, X } from "lucide-react";
+import { api, EMPTY_PLEX_FILTERS, plexFilterCount, type PlexFilters } from "../lib/api";
 
-// The Plex module's left filter column (mirrors the feed Sidebar's shell): pick a library, filter
-// by watch state (movie libraries only), and sort. State is owned by App (per-account persisted).
+// The Plex module's left filter column (mirrors the feed Sidebar's shell). Movie libraries get the
+// full metadata filter set (genre / rating / year / duration / added / content rating + the
+// director/actor/studio chips set by clicking the info page); shows keep library + sort only. State
+// is owned by App (per-account persisted). Facets (available genres/ratings + bounds) come from the
+// backend so the sidebar only offers what the library actually contains.
 
 type Props = {
   library: string;
@@ -14,12 +17,23 @@ type Props = {
   setShow: (v: string) => void;
   sort: string;
   setSort: (v: string) => void;
+  filters: PlexFilters;
+  setFilters: (f: PlexFilters) => void;
   collapsed: boolean;
   onToggleCollapse: () => void;
 };
 
 const SHOW_OPTS = ["all", "unwatched", "in_progress", "watched"] as const;
-const SORT_OPTS = ["added", "title"] as const;
+const MOVIE_SORTS = ["added", "release", "year", "rating", "duration", "title"] as const;
+const SHOW_SORTS = ["added", "title"] as const;
+const RATING_STEPS = [5, 6, 7, 8, 9];
+const ADDED_OPTS = ["24h", "1w", "1m", "6m", "1y"] as const;
+// Duration buckets → [minSeconds|null, maxSeconds|null].
+const DURATION_BUCKETS: { key: string; min: number | null; max: number | null }[] = [
+  { key: "short", min: null, max: 90 * 60 },
+  { key: "mid", min: 90 * 60, max: 120 * 60 },
+  { key: "long", min: 120 * 60, max: null },
+];
 
 export default function PlexSidebar({
   library,
@@ -28,6 +42,8 @@ export default function PlexSidebar({
   setShow,
   sort,
   setSort,
+  filters,
+  setFilters,
   collapsed,
   onToggleCollapse,
 }: Props) {
@@ -35,14 +51,38 @@ export default function PlexSidebar({
   const libsQ = useQuery({ queryKey: ["plex-libraries"], queryFn: api.plexLibraries });
   const libs = libsQ.data?.libraries ?? [];
   const activeLib = libs.find((l) => l.key === library);
+  const isMovieLib = activeLib?.kind === "movie";
+
+  const facetsQ = useQuery({
+    queryKey: ["plex-facets", library],
+    queryFn: () => api.plexFacets(library),
+    enabled: !!library && isMovieLib,
+  });
+  const facets = facetsQ.data;
 
   // Default to the first library once loaded (or if the stored one vanished).
   useEffect(() => {
     if (libs.length && !libs.some((l) => l.key === library)) setLibrary(libs[0].key);
   }, [libs, library, setLibrary]);
 
-  const isMovieLib = activeLib?.kind === "movie";
-  const activeCount = (show !== "all" && isMovieLib ? 1 : 0) + (sort !== "added" ? 1 : 0);
+  const fCount = isMovieLib ? plexFilterCount(filters) : 0;
+  const activeCount =
+    fCount + (show !== "all" && isMovieLib ? 1 : 0) + (sort !== "added" ? 1 : 0);
+  const anyActive = activeCount > 0;
+
+  const patch = (p: Partial<PlexFilters>) => setFilters({ ...filters, ...p });
+  const toggleIn = (arr: string[], v: string) =>
+    arr.includes(v) ? arr.filter((x) => x !== v) : [...arr, v];
+  const clearAll = () => {
+    setFilters(EMPTY_PLEX_FILTERS);
+    setShow("all");
+    setSort("added");
+  };
+
+  const sorts = isMovieLib ? MOVIE_SORTS : SHOW_SORTS;
+  const durBucketKey = DURATION_BUCKETS.find(
+    (b) => (filters.durationMin ?? null) === b.min && (filters.durationMax ?? null) === b.max,
+  )?.key;
 
   if (collapsed) {
     return (
@@ -74,8 +114,7 @@ export default function PlexSidebar({
   return (
     <aside className="hidden md:block w-64 shrink-0 border-r border-border bg-surface/40 overflow-y-auto p-4 space-y-4">
       {/* Library scope */}
-      <div>
-        <div className="text-[11px] uppercase tracking-wide text-muted mb-1.5">{t("plex.filter.library")}</div>
+      <Section label={t("plex.filter.library")}>
         <div className="flex flex-col gap-1">
           {libs.map((l) => (
             <button
@@ -91,45 +130,232 @@ export default function PlexSidebar({
             </button>
           ))}
         </div>
-      </div>
+      </Section>
 
-      {/* Watch state (movie libraries only — an episode's state lives in the show drill-down) */}
+      {anyActive && (
+        <button
+          onClick={clearAll}
+          className="w-full inline-flex items-center justify-center gap-1.5 rounded-lg border border-border px-2.5 py-1.5 text-xs text-muted hover:border-accent hover:text-accent transition"
+        >
+          <X className="w-3.5 h-3.5" />
+          {t("plex.filter.clearAll")} ({activeCount})
+        </button>
+      )}
+
+      {/* Watch state (movie libraries only) */}
       {isMovieLib && (
-        <div>
-          <div className="text-[11px] uppercase tracking-wide text-muted mb-1.5">{t("plex.filter.show")}</div>
-          <div className="flex flex-wrap gap-1">
+        <Section label={t("plex.filter.show")}>
+          <ChipRow>
             {SHOW_OPTS.map((s) => (
-              <button
-                key={s}
-                onClick={() => setShow(s)}
-                className={`px-2.5 py-1 rounded-full text-xs transition ${
-                  show === s ? "bg-accent text-accent-fg" : "glass-card glass-hover"
-                }`}
-              >
+              <Chip key={s} active={show === s} onClick={() => setShow(s)}>
                 {t(`plex.filter.showOpt.${s}`)}
-              </button>
+              </Chip>
             ))}
-          </div>
-        </div>
+          </ChipRow>
+        </Section>
       )}
 
       {/* Sort */}
-      <div>
-        <div className="text-[11px] uppercase tracking-wide text-muted mb-1.5">{t("plex.filter.sort")}</div>
-        <div className="flex flex-wrap gap-1">
-          {SORT_OPTS.map((s) => (
-            <button
-              key={s}
-              onClick={() => setSort(s)}
-              className={`px-2.5 py-1 rounded-full text-xs transition ${
-                sort === s ? "bg-accent text-accent-fg" : "glass-card glass-hover"
-              }`}
-            >
+      <Section label={t("plex.filter.sort")}>
+        <ChipRow>
+          {sorts.map((s) => (
+            <Chip key={s} active={sort === s} onClick={() => setSort(s)}>
               {t(`plex.sort.${s}`)}
-            </button>
+            </Chip>
           ))}
-        </div>
-      </div>
+        </ChipRow>
+      </Section>
+
+      {/* Metadata filters (movie libraries only) */}
+      {isMovieLib && (
+        <>
+          {/* Active people / studio — set by clicking the info page. */}
+          {(filters.director || filters.actor || filters.studio) && (
+            <Section label={t("plex.filter.active")}>
+              <div className="flex flex-wrap gap-1.5">
+                {filters.director && (
+                  <RemovableChip label={filters.director} onRemove={() => patch({ director: null })} />
+                )}
+                {filters.actor && (
+                  <RemovableChip label={filters.actor} onRemove={() => patch({ actor: null })} />
+                )}
+                {filters.studio && (
+                  <RemovableChip label={filters.studio} onRemove={() => patch({ studio: null })} />
+                )}
+              </div>
+            </Section>
+          )}
+
+          {/* IMDb rating min */}
+          <Section label={t("plex.filter.rating")}>
+            <ChipRow>
+              <Chip active={filters.ratingMin == null} onClick={() => patch({ ratingMin: null })}>
+                {t("plex.filter.any")}
+              </Chip>
+              {RATING_STEPS.map((r) => (
+                <Chip key={r} active={filters.ratingMin === r} onClick={() => patch({ ratingMin: r })}>
+                  {r}+
+                </Chip>
+              ))}
+            </ChipRow>
+          </Section>
+
+          {/* Genres (from facets) */}
+          {facets && facets.genres.length > 0 && (
+            <Section label={t("plex.filter.genre")}>
+              <ChipRow>
+                {facets.genres.map((g) => (
+                  <Chip
+                    key={g.value}
+                    active={filters.genres.includes(g.value)}
+                    onClick={() => patch({ genres: toggleIn(filters.genres, g.value) })}
+                  >
+                    {g.value}
+                  </Chip>
+                ))}
+              </ChipRow>
+            </Section>
+          )}
+
+          {/* Year range */}
+          <Section label={t("plex.filter.year")}>
+            <div className="flex items-center gap-2">
+              <NumberInput
+                value={filters.yearMin ?? null}
+                placeholder={facets?.year_min ?? undefined}
+                onChange={(v) => patch({ yearMin: v })}
+              />
+              <span className="text-muted text-xs">–</span>
+              <NumberInput
+                value={filters.yearMax ?? null}
+                placeholder={facets?.year_max ?? undefined}
+                onChange={(v) => patch({ yearMax: v })}
+              />
+            </div>
+          </Section>
+
+          {/* Duration buckets */}
+          <Section label={t("plex.filter.duration")}>
+            <ChipRow>
+              <Chip
+                active={!durBucketKey && filters.durationMin == null && filters.durationMax == null}
+                onClick={() => patch({ durationMin: null, durationMax: null })}
+              >
+                {t("plex.filter.any")}
+              </Chip>
+              {DURATION_BUCKETS.map((b) => (
+                <Chip
+                  key={b.key}
+                  active={durBucketKey === b.key}
+                  onClick={() => patch({ durationMin: b.min, durationMax: b.max })}
+                >
+                  {t(`plex.filter.durationOpt.${b.key}`)}
+                </Chip>
+              ))}
+            </ChipRow>
+          </Section>
+
+          {/* Added to Plex */}
+          <Section label={t("plex.filter.added")}>
+            <ChipRow>
+              <Chip active={!filters.addedWithin} onClick={() => patch({ addedWithin: "" })}>
+                {t("plex.filter.any")}
+              </Chip>
+              {ADDED_OPTS.map((a) => (
+                <Chip key={a} active={filters.addedWithin === a} onClick={() => patch({ addedWithin: a })}>
+                  {t(`plex.filter.addedOpt.${a}`)}
+                </Chip>
+              ))}
+            </ChipRow>
+          </Section>
+
+          {/* Content rating (from facets) */}
+          {facets && facets.content_ratings.length > 0 && (
+            <Section label={t("plex.filter.contentRating")}>
+              <ChipRow>
+                {facets.content_ratings.map((c) => (
+                  <Chip
+                    key={c.value}
+                    active={filters.contentRatings.includes(c.value)}
+                    onClick={() => patch({ contentRatings: toggleIn(filters.contentRatings, c.value) })}
+                  >
+                    {c.value}
+                  </Chip>
+                ))}
+              </ChipRow>
+            </Section>
+          )}
+        </>
+      )}
     </aside>
   );
 }
+
+function Section({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <div>
+      <div className="text-[11px] uppercase tracking-wide text-muted mb-1.5">{label}</div>
+      {children}
+    </div>
+  );
+}
+
+function ChipRow({ children }: { children: ReactNode }) {
+  return <div className="flex flex-wrap gap-1">{children}</div>;
+}
+
+function Chip({
+  active,
+  onClick,
+  children,
+}: {
+  active: boolean;
+  onClick: () => void;
+  children: ReactNode;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      className={`px-2.5 py-1 rounded-full text-xs transition ${
+        active ? "bg-accent text-accent-fg" : "glass-card glass-hover"
+      }`}
+    >
+      {children}
+    </button>
+  );
+}
+
+function RemovableChip({ label, onRemove }: { label: string; onRemove: () => void }) {
+  return (
+    <span className="inline-flex items-center gap-1 rounded-full bg-accent/15 text-accent px-2 py-1 text-xs">
+      <span className="truncate max-w-[9rem]">{label}</span>
+      <button onClick={onRemove} className="hover:opacity-70" aria-label="remove">
+        <X className="w-3 h-3" />
+      </button>
+    </span>
+  );
+}
+
+function NumberInput({
+  value,
+  placeholder,
+  onChange,
+}: {
+  value: number | null;
+  placeholder?: number;
+  onChange: (v: number | null) => void;
+}) {
+  return (
+    <input
+      type="number"
+      inputMode="numeric"
+      value={value ?? ""}
+      placeholder={placeholder != null ? String(placeholder) : ""}
+      onChange={(e) => {
+        const n = e.target.value === "" ? null : Number(e.target.value);
+        onChange(n != null && Number.isFinite(n) ? n : null);
+      }}
+      className="w-20 rounded-lg border border-border bg-card px-2 py-1 text-sm tabular-nums focus:border-accent focus:outline-none"
+    />
+  );
+}