merge: Plex search ephemeral state + empty-with-filters hint (dev-only)

frontend/src/App.tsx

@@ -260,6 +260,12 @@ export default function App() {
     }
   }, [plexFiltersRaw]);
   const setPlexFilters = (f: PlexFilters) => setPlexFiltersRaw(JSON.stringify(f));
+  // The Plex library search term is its OWN ephemeral state — deliberately NOT the persisted feed
+  // `filters.q`. Sharing that box meant a Plex search leaked into the feed and, being persisted,
+  // greeted you with a stale query (colliding with a persisted collection filter → confusing
+  // "0 matches") after a reload. Kept in App so it survives page switches within a session, but
+  // resets on reload.
+  const [plexQ, setPlexQ] = useState("");
   // Bumped to tell the channel manager to drop a stale column filter when we send the user
   // there to see a specific set (the header's "without full history" link).
   const [channelsFilterReset, setChannelsFilterReset] = useState(0);
@@ -767,6 +773,8 @@ export default function App() {
           me={meQuery.data!}
           filters={filters}
           setFilters={setFilters}
+          plexQ={plexQ}
+          setPlexQ={setPlexQ}
           page={page}
           onYtSearch={enterYtSearch}
         />
@@ -819,8 +827,8 @@ export default function App() {
             />
           ) : page === "plex" && meQuery.data!.plex_enabled ? (
             <PlexBrowse
-              q={filters.q}
+              q={plexQ}
-              onClearSearch={() => setFilters({ ...filters, q: "" })}
+              onClearSearch={() => setPlexQ("")}
               library={plexLib}
               show={plexShowFilter}
               sort={plexSort}

frontend/src/components/Header.tsx

@@ -12,12 +12,17 @@ export default function Header({
   me,
   filters,
   setFilters,
+  plexQ,
+  setPlexQ,
   page,
   onYtSearch,
 }: {
   me: Me;
   filters: FeedFilters;
   setFilters: (f: FeedFilters) => void;
+  // Plex has its own ephemeral search term (see App) — the box is shared UI, the state is not.
+  plexQ: string;
+  setPlexQ: (q: string) => void;
   page: Page;
   // Trigger a live YouTube search for the current term (hidden for the demo account, which
   // can't spend the shared quota).
@@ -25,11 +30,14 @@ export default function Header({
 }) {
   const { t } = useTranslation();
   const canSearchYt = !me.is_demo;
-  const trimmedQ = filters.q.trim();
   // The search box serves both the YouTube feed and the Plex module (integrated search); the live
-  // YouTube-search escalation (Enter / button) is feed-only.
+  // YouTube-search escalation (Enter / button) is feed-only. On Plex it drives `plexQ`, on the feed
+  // the persisted `filters.q`.
   const isSearchPage = page === "feed" || page === "plex";
+  const isPlex = page === "plex";
   const isYtCapable = page === "feed" && canSearchYt;
+  const searchValue = isPlex ? plexQ : filters.q;
+  const trimmedQ = searchValue.trim();
 
   return (
     <header className="glass h-14 shrink-0 border-b border-border flex items-center gap-3 px-4 z-20">
@@ -38,14 +46,18 @@ export default function Header({
           <div className="flex-1 relative">
             <Search className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-muted" />
             <input
-              value={filters.q}
+              value={searchValue}
               onChange={(e) => {
                 const q = e.target.value;
+                if (isPlex) {
+                  setPlexQ(q);
+                  return;
+                }
                 // When a search first appears, rank the feed by relevance — set atomically with
                 // the query (race-free vs. per-keystroke updates). Only overrides the default
                 // "newest" sort; a custom sort the user chose is left alone. Cleared in Feed.
                 const startSearch =
-                  page === "feed" && !filters.q.trim() && !!q.trim() && filters.sort === "newest";
+                  !filters.q.trim() && !!q.trim() && filters.sort === "newest";
                 setFilters({ ...filters, q, ...(startSearch ? { sort: "relevance" } : {}) });
               }}
               onKeyDown={(e) => {
@@ -56,9 +68,9 @@ export default function Header({
               placeholder={page === "plex" ? t("plex.searchPlaceholder") : t("header.searchPlaceholder")}
               className="w-full bg-card border border-border rounded-full pl-9 pr-9 py-2 text-sm outline-none focus:border-accent"
             />
-            {filters.q && (
+            {searchValue && (
               <button
-                onClick={() => setFilters({ ...filters, q: "" })}
+                onClick={() => (isPlex ? setPlexQ("") : setFilters({ ...filters, q: "" }))}
                 title={t("header.clearSearch")}
                 aria-label={t("header.clearSearch")}
                 className="absolute right-2.5 top-1/2 -translate-y-1/2 p-0.5 rounded-full text-muted hover:text-fg hover:bg-border/60 transition"

frontend/src/components/PlexBrowse.tsx

@@ -2,7 +2,14 @@ import { lazy, Suspense, useEffect, useLayoutEffect, useRef, useState, type CSSP
 import { useTranslation } from "react-i18next";
 import { useInfiniteQuery, useQuery, useQueryClient } from "@tanstack/react-query";
 import { ArrowLeft, CheckCircle2, Info, ListPlus, Play } from "lucide-react";
-import { api, type PlexCard, type PlexFilters, type PlexPerson } from "../lib/api";
+import {
+  api,
+  EMPTY_PLEX_FILTERS,
+  plexFilterCount,
+  type PlexCard,
+  type PlexFilters,
+  type PlexPerson,
+} from "../lib/api";
 import { useDebounced } from "../lib/useDebounced";
 import { useHistorySubview } from "../lib/history";
 import PlexPlaylistAdd, { type PlexAddTarget } from "./PlexPlaylistAdd";
@@ -267,7 +274,21 @@ export default function PlexBrowse({
       {browseQ.isLoading ? (
         <p className="text-muted text-sm">{t("plex.loading")}</p>
       ) : items.length === 0 ? (
+        dq && plexFilterCount(filters) > 0 ? (
+          // A search that comes up empty WHILE filters are active is usually the filters, not the
+          // query — say so and offer a one-click escape, instead of a bare "No matches".
+          <div className="flex flex-wrap items-center gap-3 text-sm text-muted">
+            <span>{t("plex.noMatchesFiltered", { count: plexFilterCount(filters) })}</span>
+            <button
+              onClick={() => setFilters(EMPTY_PLEX_FILTERS)}
+              className="rounded-full border border-border bg-card px-3 py-1 text-xs font-medium transition hover:border-accent hover:text-accent"
+            >
+              {t("plex.filter.clearAll")}
+            </button>
+          </div>
+        ) : (
           <p className="text-muted text-sm">{dq ? t("plex.noMatches") : t("plex.empty")}</p>
+        )
       ) : (
         <div className="grid grid-cols-[repeat(auto-fill,minmax(150px,1fr))] gap-3">
           {items.map((c) => (

frontend/src/i18n/locales/de/plex.json

@@ -57,6 +57,8 @@
   "count": "{{count}} Titel",
   "searchCount": "{{count}} Treffer",
   "noMatches": "Keine Treffer.",
+  "noMatchesFiltered_one": "Keine Treffer — ein Filter schränkt die Ergebnisse zusätzlich ein.",
+  "noMatchesFiltered_other": "Keine Treffer — {{count}} Filter schränken die Ergebnisse zusätzlich ein.",
   "loading": "Wird geladen…",
   "empty": "Noch nichts hier. Starte eine Plex-Synchronisierung auf der Admin-Konfigurationsseite.",
   "loadMore": "Mehr laden",

frontend/src/i18n/locales/en/plex.json

@@ -57,6 +57,8 @@
   "count": "{{count}} titles",
   "searchCount": "{{count}} matches",
   "noMatches": "No matches.",
+  "noMatchesFiltered_one": "No matches — a filter is also narrowing the results.",
+  "noMatchesFiltered_other": "No matches — {{count}} filters are also narrowing the results.",
   "loading": "Loading…",
   "empty": "Nothing here yet. Run a Plex sync from the admin Config page.",
   "loadMore": "Load more",

frontend/src/i18n/locales/hu/plex.json

@@ -57,6 +57,8 @@
   "count": "{{count}} cím",
   "searchCount": "{{count}} találat",
   "noMatches": "Nincs találat.",
+  "noMatchesFiltered_one": "Nincs találat — egy szűrő is szűkíti az eredményt.",
+  "noMatchesFiltered_other": "Nincs találat — {{count}} szűrő is szűkíti az eredményt.",
   "loading": "Betöltés…",
   "empty": "Még nincs itt semmi. Futtass egy Plex-szinkront az admin Konfiguráció oldalról.",
   "loadMore": "Több betöltése",