refactor(plex): extract shared PlexLibraryPicker (F6)

AddItemPanel (Collection page) and NewCollectionPanel (browse) had near-
duplicate debounced library-search + result-list rendering. Extract it into
one PlexLibraryPicker that owns the query, the loading/error/empty states and
the row markup; callers keep their own chrome and pass term + renderAction.
No behaviour change.

frontend/src/components/plexBrowseLists.tsx

@@ -17,6 +17,7 @@ import { notify } from "../lib/notifications";
 import { useDebounced } from "../lib/useDebounced";
 import { LoadingState, StateMessage } from "./QueryState";
 import PosterTile from "./PosterTile";
+import PlexLibraryPicker from "./PlexLibraryPicker";
 
 // A collection tile's sub-line: item count · total runtime (each dropped when unknown, e.g. show-only
 // collections have no movie runtime).
@@ -86,7 +87,6 @@ function NewCollectionPanel({
   const [name, setName] = useState("");
   const [term, setTerm] = useState("");
   const [busy, setBusy] = useState(false);
-  const debounced = useDebounced(term.trim(), 300);
   const trimmed = name.trim();
   // Advisory only: `existingNames` is the search-scoped, all-library collection union, whereas the
   // backend enforces uniqueness PER library (Plex only conflates same-named collections within one
@@ -94,12 +94,6 @@ function NewCollectionPanel({
   // same-name collection in another library would be un-creatable. The backend's 409 is authoritative.
   const dupHint = trimmed.length > 0 && existingNames.has(trimmed.toLowerCase());
   const nameOk = trimmed.length > 0;
-  const q = useQuery({
-    queryKey: qk.plexLibrary("collection-new", debounced),
-    queryFn: () => api.plexLibrary({ scope: "both", q: debounced, limit: 12 }),
-    enabled: nameOk && debounced.length > 0,
-  });
-  const results = q.data?.items ?? [];
 
   async function create(card: PlexCard) {
     if (!nameOk || busy) return;
@@ -155,38 +149,21 @@ function NewCollectionPanel({
           className="glass-card flex-1 rounded-lg px-3 py-1.5 text-sm focus:outline-hidden focus:ring-2 focus:ring-accent/40 disabled:opacity-50"
         />
       </div>
-      {!nameOk || debounced.length === 0 ? null : q.isLoading ? (
-        <LoadingState label={t("plex.loading")} />
-      ) : q.isError ? (
-        <p className="text-muted text-sm">{t("common.loadError")}</p>
-      ) : results.length === 0 ? (
-        <p className="text-muted text-sm">{t("plex.collection.addNoResults")}</p>
-      ) : (
-        <ul className="flex flex-col gap-1">
-          {results.map((c) => (
-            <li key={c.id} className="flex items-center gap-3">
-              <img
-                src={c.thumb}
-                alt=""
-                className="h-12 w-8 shrink-0 rounded object-cover"
-                loading="lazy"
-              />
-              <span className="min-w-0 flex-1 truncate text-sm">
-                {c.title}
-                {c.year != null && <span className="text-muted"> · {c.year}</span>}
-              </span>
-              <button
-                onClick={() => create(c)}
-                disabled={busy}
-                className="glass-card glass-hover inline-flex items-center gap-1 rounded-lg px-2.5 py-1 text-xs disabled:opacity-50"
-              >
-                <Check className="h-3.5 w-3.5" />
-                {t("plex.collection.createWith")}
-              </button>
-            </li>
-          ))}
-        </ul>
-      )}
+      <PlexLibraryPicker
+        scope="both"
+        term={term}
+        enabled={nameOk}
+        renderAction={(c) => (
+          <button
+            onClick={() => create(c)}
+            disabled={busy}
+            className="glass-card glass-hover inline-flex items-center gap-1 rounded-lg px-2.5 py-1 text-xs disabled:opacity-50"
+          >
+            <Check className="h-3.5 w-3.5" />
+            {t("plex.collection.createWith")}
+          </button>
+        )}
+      />
     </div>
   );
 }