feat(plex): collections — sync, browse, filter, and info-page strips (Phase 1, read)

Backend (migration 0047_plex_collections): a plex_collections table mirrors every Plex
collection (card metadata + smart flag + an editable flag reserved for Phase 2); membership
is stored as GIN-indexed collection_keys on member movies (plex_items) and shows (plex_shows).
The background sync (plex_sync) now fetches each library's collections + their children and
rebuilds membership — so ALL reads are local (Plex's dual-language collection queries are slow;
this trades a ~4-min background sync for instant reads). New /api/plex/collections endpoint;
/browse gains a combinable  filter; item_detail returns the movie's collection
'strips' (sibling titles as playable cards, smallest/most-specific collection first) — all pure
local lookups.

Frontend: PlexSidebar gains a searchable Collection picker + an active-collection chip;
PlexInfo renders the collection strips (playable posters + 'Browse collection' → sets the
filter); the collection is part of PlexFilters (persisted). i18n en/hu/de.

Phase 2 (create/edit collections with write-back to Plex) is separate.

frontend/src/components/PlexSidebar.tsx

@@ -1,8 +1,9 @@
-import { useEffect, type ReactNode } from "react";
+import { useEffect, useState, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import { useQuery } from "@tanstack/react-query";
-import { ChevronRight, Film, SlidersHorizontal, Tv2, X } from "lucide-react";
+import { ChevronRight, Film, Layers, SlidersHorizontal, Tv2, X } from "lucide-react";
 import { api, EMPTY_PLEX_FILTERS, plexFilterCount, type PlexFilters } from "../lib/api";
+import { useDebounced } from "../lib/useDebounced";
 
 // 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
@@ -60,6 +61,16 @@ export default function PlexSidebar({
   });
   const facets = facetsQ.data;
 
+  // Collections picker (searchable; the list is only fetched when none is active).
+  const [collSearch, setCollSearch] = useState("");
+  const collSearchDeb = useDebounced(collSearch.trim(), 300);
+  const collectionsQ = useQuery({
+    queryKey: ["plex-collections", library, collSearchDeb],
+    queryFn: () => api.plexCollections(library, collSearchDeb || undefined),
+    enabled: !!library && isMovieLib && !filters.collection,
+  });
+  const collections = collectionsQ.data?.collections ?? [];
+
   // 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);
@@ -205,6 +216,43 @@ export default function PlexSidebar({
             </Section>
           )}
 
+          {/* Collection — pick one from the searchable list (or the active one shows as a chip). */}
+          <Section label={t("plex.filter.collection")}>
+            {filters.collection ? (
+              <div className="flex flex-wrap gap-1.5">
+                <RemovableChip
+                  label={filters.collectionTitle || filters.collection}
+                  onRemove={() => patch({ collection: null, collectionTitle: null })}
+                />
+              </div>
+            ) : (
+              <div>
+                <input
+                  value={collSearch}
+                  onChange={(e) => setCollSearch(e.target.value)}
+                  placeholder={t("plex.filter.collectionSearch")}
+                  className="mb-1.5 w-full rounded-lg border border-border bg-card px-2 py-1 text-sm focus:border-accent focus:outline-none"
+                />
+                <div className="flex max-h-56 flex-col gap-0.5 overflow-y-auto">
+                  {collections.map((c) => (
+                    <button
+                      key={c.id}
+                      onClick={() => patch({ collection: c.id, collectionTitle: c.title })}
+                      className="glass-hover flex items-center gap-2 rounded-lg px-2 py-1 text-left text-sm"
+                    >
+                      <Layers className="w-3.5 h-3.5 shrink-0 text-muted" />
+                      <span className="flex-1 truncate">{c.title}</span>
+                      <span className="text-xs text-muted">{c.child_count}</span>
+                    </button>
+                  ))}
+                  {collections.length === 0 && (
+                    <span className="px-2 py-1 text-xs text-muted">{t("plex.filter.collectionEmpty")}</span>
+                  )}
+                </div>
+              </div>
+            )}
+          </Section>
+
           {/* IMDb rating min */}
           <Section label={t("plex.filter.rating")}>
             <ChipRow>