feat(plex): forbid duplicate collection names + a "New collection" button

Two follow-ups after testing the collection editing against real Plex, which revealed that
Plex CONFLATES same-named collections (two rating_keys resolve to one merged member list) —
a genuine footgun.

- Duplicate-name guard: create and rename now reject (409) a title that already exists in the
  target section (case-insensitive), before any Plex write. create() can also derive the
  library from the seed item, so the caller needn't know the section key. The create dialogs
  surface the 409, and the New-collection panel warns inline before submit.
- A "New collection" button on the Collections browse surface (admin only) opens a panel:
  a name field (with the live duplicate check) + a search to pick the FIRST title — Plex can't
  create an empty collection, it needs a seed. Creating opens the new collection's detail page
  straight away, so you can keep adding titles there. This is the B-route the user wanted,
  vs. the only prior path (a movie's "add to collection").

Verified live: the 409 guard (creating an existing name is blocked, no Plex write), and the
full New-collection flow (name + first title → create → lands on the detail page); test
collections created and deleted, real account left clean.

Gate: tsc/lint/knip/prettier clean, 424 vitest; backend ruff clean, 7 collections tests
(+ a duplicate-name-rejection assertion).

frontend/src/components/PlexCollectionEditor.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { Check, Plus } from "lucide-react";
 import { api } from "../lib/api";
+import { notifyActionError } from "../lib/actionErrors";
 import { useScrollFade } from "../lib/useScrollFade";
 import Modal from "./Modal";
 import { useConfirm } from "./ConfirmProvider";
@@ -100,6 +101,9 @@ export default function PlexCollectionEditor({
       setNewName("");
       setMembers((prev) => new Set(prev).add(col.id));
       refresh();
+    } catch (e) {
+      // Surfaces the 409 when the name duplicates an existing collection (Plex conflates same names).
+      notifyActionError(e, t("plex.collection.editFailed"));
     } finally {
       setBusy(null);
     }

frontend/src/components/plexBrowseLists.tsx

@@ -1,11 +1,12 @@
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import type { TFunction } from "i18next";
-import { useQuery } from "@tanstack/react-query";
-import { ListMusic, Lock } from "lucide-react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { Check, ListMusic, Lock, Plus, Search, X } from "lucide-react";
 import { qk } from "../lib/queryKeys";
-import { api, type PlexCollection } from "../lib/api";
+import { api, type PlexCard, type PlexCollection } from "../lib/api";
 import { formatRuntime } from "../lib/format";
+import { notifyActionError } from "../lib/actionErrors";
 import { useDebounced } from "../lib/useDebounced";
 import { LoadingState, StateMessage } from "./QueryState";
 import PosterTile from "./PosterTile";
@@ -68,28 +69,164 @@ export function PlexPlaylistsBrowse({ onOpen }: { onOpen: (id: number) => void }
   );
 }
 
-// A grid of Plex collections (searchable — the union can run to hundreds); a tile filters the title
-// grid by that collection (via the parent's onPick → applyFilter).
+// The "New collection" panel (admin, ask B-route): name (rejected if it duplicates an existing one —
+// Plex conflates same-named collections) + a search to pick the FIRST title, since Plex can't create an
+// empty collection. Creating opens the new collection's detail page (onCreated → onPick).
+function NewCollectionPanel({
+  existingNames,
+  onCreated,
+  onClose,
+}: {
+  existingNames: Set<string>;
+  onCreated: (rk: string) => void;
+  onClose: () => void;
+}) {
+  const { t } = useTranslation();
+  const [name, setName] = useState("");
+  const [term, setTerm] = useState("");
+  const [busy, setBusy] = useState(false);
+  const debounced = useDebounced(term.trim(), 300);
+  const trimmed = name.trim();
+  const dup = trimmed.length > 0 && existingNames.has(trimmed.toLowerCase());
+  const nameOk = trimmed.length > 0 && !dup;
+  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;
+    setBusy(true);
+    try {
+      const col = await api.plexCreateCollection("", trimmed, card.id); // backend derives the library
+      onCreated(col.id);
+    } catch (e) {
+      notifyActionError(e, t("plex.collection.editFailed"));
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div className="glass-card mb-6 rounded-2xl p-4">
+      <div className="mb-2 flex items-center justify-between gap-2">
+        <h3 className="text-sm font-semibold">{t("plex.collection.newCollection")}</h3>
+        <button
+          onClick={onClose}
+          aria-label={t("common.close")}
+          className="glass-hover grid h-8 w-8 place-items-center rounded-lg"
+        >
+          <X className="h-4 w-4" />
+        </button>
+      </div>
+      <input
+        autoFocus
+        value={name}
+        onChange={(e) => setName(e.target.value)}
+        placeholder={t("plex.collection.namePlaceholder")}
+        aria-label={t("plex.collection.newCollection")}
+        className="glass-card w-full rounded-lg px-3 py-1.5 text-sm focus:outline-hidden focus:ring-2 focus:ring-accent/40"
+      />
+      {dup ? (
+        <p className="mt-1 mb-2 text-xs text-danger">{t("plex.collection.nameTaken")}</p>
+      ) : (
+        <p className="mt-1 mb-2 text-xs text-muted">{t("plex.collection.newHint")}</p>
+      )}
+      <div className="mb-3 flex items-center gap-2">
+        <Search className="h-4 w-4 shrink-0 text-muted" />
+        <input
+          value={term}
+          onChange={(e) => setTerm(e.target.value)}
+          disabled={!nameOk}
+          placeholder={t("plex.collection.addSearch")}
+          aria-label={t("plex.collection.addSearch")}
+          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")} />
+      ) : 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>
+      )}
+    </div>
+  );
+}
+
+// A grid of Plex collections (searchable — the union can run to hundreds); a tile opens its info page.
 export function PlexCollectionsBrowse({ onPick }: { onPick: (id: string, title: string) => void }) {
   const { t } = useTranslation();
+  const qc = useQueryClient();
+  const isAdmin = qc.getQueryData<{ role?: string }>(qk.me())?.role === "admin";
   const [search, setSearch] = useState("");
+  const [creating, setCreating] = useState(false);
   const searchDeb = useDebounced(search.trim(), 300);
   const q = useQuery({
     queryKey: qk.plexCollections("union", searchDeb),
     queryFn: () => api.plexCollections(undefined, searchDeb || undefined),
   });
-  const collections = q.data?.collections ?? [];
+  const collections = useMemo(() => q.data?.collections ?? [], [q.data?.collections]);
+  const existingNames = useMemo(
+    () => new Set(collections.map((c) => c.title.trim().toLowerCase())),
+    [collections],
+  );
 
   return (
     <div>
-      <input
-        type="search"
-        value={search}
-        onChange={(e) => setSearch(e.target.value)}
-        placeholder={t("plex.filter.collectionSearch")}
-        aria-label={t("plex.filter.collectionSearch")}
-        className="glass-card mb-4 w-full max-w-sm rounded-lg px-3 py-1.5 text-sm focus:outline-hidden focus:ring-2 focus:ring-accent/40"
-      />
+      <div className="mb-4 flex flex-wrap items-center gap-2">
+        <input
+          type="search"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder={t("plex.filter.collectionSearch")}
+          aria-label={t("plex.filter.collectionSearch")}
+          className="glass-card w-full max-w-sm rounded-lg px-3 py-1.5 text-sm focus:outline-hidden focus:ring-2 focus:ring-accent/40"
+        />
+        {isAdmin && !creating && (
+          <button
+            onClick={() => setCreating(true)}
+            className="glass-card glass-hover inline-flex shrink-0 items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm"
+          >
+            <Plus className="h-4 w-4" />
+            {t("plex.collection.newCollection")}
+          </button>
+        )}
+      </div>
+      {creating && (
+        <NewCollectionPanel
+          existingNames={existingNames}
+          onCreated={(rk) => {
+            setCreating(false);
+            onPick(rk, "");
+          }}
+          onClose={() => setCreating(false)}
+        />
+      )}
       {q.isError && !q.data ? (
         <StateMessage tone="error" onRetry={() => q.refetch()}>
           {t("common.loadError")}