Der Ordner bestimmt die Serie, nicht der Dateiname

Aus einer Serie wurden siebenhundert. Dateien wie "S01E001_Aang.mkv"
tragen vor der Folgennummer nichts, also wurde der ganze Dateiname zum
Serientitel — jede Folge eine eigene Serie. Und umgekehrt ergab
"Doctor Who (2005) - S12E04.mkv" im Ordner "Doctor Who" zwei Serien, weil
die Jahresangabe nur im Dateinamen stand.

Jetzt gilt: was unter Serien/Pingu/ liegt, gehört zu Pingu. Egal wie tief,
egal wie die Datei heisst. Der Ordner ist die verlässlichere Angabe, weil
ihn ein Mensch angelegt hat; so macht es Plex seit je und aus demselben
Grund. Staffel und Folge liest weiterhin der Dateiname.

Ohne bekannte Wurzel bleibt es beim Dateinamen — dort könnte über dem
Staffelordner irgendetwas stehen. Diesen Weg gehen nur die Tests.

Dazu vier Dinge aus der Benutzung:

Die Mediatheken standen scheinbar in zufälliger Reihenfolge. SQLite
vergleicht Text zeichengenau, und dort stehen alle Grossbuchstaben vor
allen kleinen: "Serien" landete über "film". Jetzt ohne Rücksicht auf
Gross- und Kleinschreibung — und umsortierbar über zwei Pfeile. Nicht über
Ziehen: das ist schöner, aber mit der Tastatur unbedienbar und auf dem
Telefon ein Glücksspiel.

Die Sprache des Servers steckte im Dialog "Metadaten", zusammen mit dem
TMDB-Schlüssel — also dort, wo niemand nach einer Sprache sucht. Wer die
Mediathek auf Englisch vorfand, sah nur "Meine Sprache" und hielt das für
die einzige Möglichkeit. Jetzt eine eigene Zeile.

Das Kontextmenü gab es nur per Rechtsklick, und den findet nur, wer ihn
vermutet — auf dem Telefon gibt es ihn gar nicht. Jetzt drei Punkte auf
jeder Kachel, beim Überfahren und bei Tastaturfokus, auf Geräten ohne
Zeiger dauerhaft. Und "Zuordnung korrigieren" steht endlich darin: wer
zwanzig falsch erkannte Titel vor sich hat, soll sie dort geradeziehen
können statt über vierzig Seitenwechsel.

Folgen ohne eigenes Bild nehmen das der Serie. TMDB liefert Folgenbilder
nur für einen Teil der Folgen und bei kleineren Serien für gar keine; eine
graue Fläche sagt nichts.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

web/app/src/api.ts

@@ -86,6 +86,9 @@ export type Bibliothek = {
 
   /** Ob neue Funde erst geprüft werden. */
   reviewNewItems: boolean;
+
+  /** Wie viele Titel hier noch auf Freigabe warten. */
+  pendingCount: number;
 };
 export type Seite<T> = { items: T[]; total: number };
 export type Lieferung = {
@@ -540,10 +543,21 @@ export const veroeffentlichen = (ids?: string[], publishAt?: string) =>
   anfrage<{ published: number }>('/review/publish',
     { method: 'POST', body: JSON.stringify({ ids: ids ?? null, publishAt: publishAt ?? null }) });
 
+/** Alles Wartende einer einzelnen Mediathek. */
+export const mediathekFreigeben = (libraryId: string, publishAt?: string) =>
+  anfrage<{ published: number }>('/review/publish', {
+    method: 'POST',
+    body: JSON.stringify({ ids: null, publishAt: publishAt ?? null, libraryId }),
+  });
+
 export const zurueckziehen = (ids: string[]) =>
   anfrage<{ withheld: number }>('/review/withhold',
     { method: 'POST', body: JSON.stringify({ ids, publishAt: null }) });
 
+/** Die Reihenfolge der Seitenleiste, von oben nach unten. */
+export const reihenfolgeSetzen = (ids: string[]) =>
+  anfrage<void>('/libraries/order', { method: 'PUT', body: JSON.stringify({ ids }) });
+
 export const pruefungSetzen = (bibliothek: string, an: boolean) =>
   anfrage<void>(`/libraries/${bibliothek}/review`,
     { method: 'PUT', body: JSON.stringify({ reviewNewItems: an }) });

web/app/src/card.ts

@@ -4,8 +4,9 @@ import {
 } from './api';
 import { esc, anteil } from './util';
 import { icons } from './icons';
-import { kontextmenue, type Menuepunkt } from './menue';
+import { kontextmenue, menueAnZiel, type Menuepunkt } from './menue';
 import { bilddialog } from './bilder';
+import { zuordnungsdialog } from './zuordnung';
 
 /** Was eine Kachel zeigt — unabhängig davon, woher sie kommt. */
 export type Kachel = {
@@ -69,6 +70,29 @@ export function kachel(k: Kachel, oeffnen: (art: 'filme' | 'serien', id: string)
   // Titeln hiess „die hab ich alle gesehen" vierzig Seitenwechsel.
   kontextmenue(knopf, () => kachelpunkte(k, knopf, oeffnen));
 
+  // **Ein sichtbarer Griff zum selben Menü.**
+  //
+  // Rechtsklick findet nur, wer ihn vermutet, und auf einem Telefon gibt es
+  // ihn gar nicht. Die drei Punkte erscheinen beim Überfahren und bei
+  // Tastaturfokus — sie sind ein eigener Knopf, nicht Teil der Kachel, sonst
+  // öffnete jeder Klick darauf auch die Detailseite.
+  const mehr = document.createElement('span');
+  mehr.className = 'kachel-mehr';
+  mehr.setAttribute('role', 'button');
+  mehr.setAttribute('tabindex', '0');
+  mehr.setAttribute('aria-label', `Mehr zu „${k.titel}“`);
+  mehr.innerHTML = icons.punkte;
+  mehr.onclick = e => {
+    e.stopPropagation();
+    menueAnZiel(mehr, kachelpunkte(k, knopf, oeffnen));
+  };
+  mehr.onkeydown = e => {
+    if (e.key !== 'Enter' && e.key !== ' ') return;
+    e.preventDefault();
+    e.stopPropagation();
+    menueAnZiel(mehr, kachelpunkte(k, knopf, oeffnen));
+  };
+
   const rahmen = document.createElement('div');
   rahmen.className = 'plakat';
   rahmen.setAttribute('role', 'img');
@@ -119,6 +143,7 @@ export function kachel(k: Kachel, oeffnen: (art: 'filme' | 'serien', id: string)
   schweben.className = 'schweber';
   schweben.innerHTML = icons.abspielen;
   rahmen.appendChild(schweben);
+  rahmen.appendChild(mehr);
 
   knopf.appendChild(rahmen);
 
@@ -236,10 +261,20 @@ function kachelpunkte(
   punkte.push({ text: 'Details', icon: 'mehr', tun: () => oeffnen(k.art, k.id) });
 
   if (istAdmin()) {
+    const art = k.art === 'serien' ? 'series' : 'movies';
     punkte.push({
       text: 'Bilder bearbeiten',
       icon: 'stift',
-      tun: () => bilddialog(k.art === 'serien' ? 'series' : 'movies', k.id, k.titel),
+      tun: () => bilddialog(art, k.id, k.titel),
+    });
+    punkte.push({
+      text: 'Zuordnung korrigieren',
+      icon: 'suche',
+      // **Hier und nicht nur auf der Detailseite.** Wer zwanzig falsch
+      // erkannte Titel vor sich hat, soll sie hier geradeziehen können.
+      tun: () => zuordnungsdialog(art, k.id, k.titel,
+        k.zweite && /^\d{4}$/.test(k.zweite) ? Number(k.zweite) : null,
+        () => location.reload()),
     });
   }
 

web/app/src/dialog.ts

@@ -255,16 +255,53 @@ function ordnerfeld(eingabe: HTMLInputElement): HTMLElement {
 
   let hier: Ordnerstand | null = null;
 
+  /** Welcher Abruf gerade gilt — ältere Antworten werden verworfen. */
+  let lauf = 0;
+
   async function gehe(ziel?: string): Promise<void> {
+    const dieser = ++lauf;
     liste.innerHTML = '<div class="spinner"></div>';
+
+    // **Nach zehn Sekunden sagen, dass es dauert.** Ein Spinner, der ewig
+    // dreht, sagt nichts — und genau so stand er, als ein Ordner nicht
+    // antwortete. Jetzt steht wenigstens da, worauf gewartet wird.
+    const langsam = window.setTimeout(() => {
+      if (dieser !== lauf) return;
+      liste.innerHTML = '';
+      liste.appendChild(hinweiszeile(
+        `„${ziel ?? 'Start'}" antwortet seit zehn Sekunden nicht. `
+        + 'Schläft die Platte, dauert der erste Zugriff — sonst stimmt etwas nicht.'));
+      liste.appendChild(spinnerzeile());
+    }, 10000);
+
     try {
       hier = await ordner(ziel);
     } catch (fehler) {
+      if (dieser !== lauf) return;
       liste.innerHTML = '';
-      liste.appendChild(hinweiszeile((fehler as Error).message));
+      liste.appendChild(hinweiszeile(`Konnte nicht gelesen werden: ${(fehler as Error).message}`));
       return;
+    } finally {
+      window.clearTimeout(langsam);
     }
-    zeichne();
+
+    // Ein überholter Abruf darf nicht das Bild des neueren überschreiben.
+    if (dieser !== lauf) return;
+
+    try {
+      zeichne();
+    } catch (fehler) {
+      // **Auch ein Fehler beim Zeichnen muss sichtbar werden.** Vorher blieb
+      // dann der Spinner stehen, und es sah aus, als käme keine Antwort.
+      liste.innerHTML = '';
+      liste.appendChild(hinweiszeile(`Anzeige gescheitert: ${(fehler as Error).message}`));
+    }
+  }
+
+  function spinnerzeile(): HTMLElement {
+    const d = document.createElement('div');
+    d.className = 'spinner';
+    return d;
   }
 
   function zeichne(): void {

web/app/src/icons.ts

@@ -17,6 +17,9 @@ export const icons = {
   /** Ordner — fürs Durchklicken durch das Dateisystem. */
   ordner: rahmen('<path d="M3 7.5A1.5 1.5 0 0 1 4.5 6h4.3a1.5 1.5 0 0 1 1.07.45L11.4 7.6"'
     + ' /><path d="M3 7.5h16.5A1.5 1.5 0 0 1 21 9v8.5a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 17.5Z"/>'),
+  /** Drei Punkte — der sichtbare Griff zum Kontextmenü. */
+  punkte: rahmen('<circle cx="12" cy="5" r="1.4"/><circle cx="12" cy="12" r="1.4"/>'
+    + '<circle cx="12" cy="19" r="1.4"/>', true),
   /** Winkel nach oben — eine Ebene zurück im Baum. */
   hoch: rahmen('<path d="m6 14 6-6 6 6"/>'),
   /** Filmstreifen — für eine Filmmediathek. */

web/app/src/menue.ts

@@ -55,6 +55,17 @@ export function kontextmenue(ziel: HTMLElement, punkte: () => Menuepunkt[]): voi
   }, { passive: true });
 }
 
+/** Öffnet das Menü an einem Element — für den sichtbaren Griff.
+ *
+ * **Am Element und nicht am Mauszeiger.** Wer die drei Punkte mit der
+ * Tastatur auslöst, hat keinen Zeiger; das Menü soll trotzdem dort erscheinen,
+ * wo der Griff ist.
+ */
+export function menueAnZiel(ziel: HTMLElement, punkte: Menuepunkt[]): void {
+  const kasten = ziel.getBoundingClientRect();
+  oeffnen(kasten.right, kasten.bottom + 4, punkte);
+}
+
 /** Das offene Menü — immer höchstens eines. */
 let offen: HTMLElement | null = null;
 

web/app/src/style.css

@@ -963,3 +963,27 @@ input[type="datetime-local"].feld::-webkit-calendar-picker-indicator:hover {
   color: var(--text-dim); font-size: var(--t-normal);
 }
 .reihe-kopf .knopfreihe .bleiben input { accent-color: var(--accent); width: 16px; height: 16px; }
+
+/* Der sichtbare Griff zum Kontextmenü auf einer Kachel.
+ *
+ * Rechtsklick findet nur, wer ihn vermutet, und auf dem Telefon gibt es ihn
+ * gar nicht. Beim Überfahren und bei Tastaturfokus erscheinen drei Punkte. */
+.kachel-mehr {
+  position: absolute; right: 6px; top: 6px; z-index: 4;
+  display: grid; place-items: center;
+  width: 28px; height: 28px; border-radius: 50%;
+  background: rgba(10, 10, 12, .78);
+  backdrop-filter: blur(6px);
+  color: var(--text);
+  opacity: 0; transition: opacity .15s ease;
+  cursor: pointer;
+}
+.kachel-mehr svg { width: 16px; height: 16px; }
+.kachel:hover .kachel-mehr,
+.kachel:focus-within .kachel-mehr,
+.kachel-mehr:focus-visible { opacity: 1; }
+/* Auf Geräten ohne Mauszeiger steht er dauerhaft da — sonst käme man nie
+   heran. */
+@media (hover: none) {
+  .kachel-mehr { opacity: .85; }
+}

web/app/src/views/admin.ts

@@ -4,6 +4,7 @@ import {
   vermisste, vermisstesEntfernen, type VermissteDatei,
   protokolltage, protokollAdresse, sprachen, spracheSetzen, uebersetzungenHolen,
   meineSprache, zuPruefen, veroeffentlichen, zurueckziehen, pruefungSetzen,
+  mediathekFreigeben, reihenfolgeSetzen,
   type Pruefeintrag,
   benutzer, benutzerAnlegen, metadatenEinstellung, metadatenSetzen,
   servernameSetzen, systemauskunft,
@@ -12,7 +13,7 @@ import {
 } from '../api';
 import { esc, dauer, knopf, fehlerzeile, leer } from '../util';
 import { dialog, nachfragen } from '../dialog';
-import { icon } from '../icons';
+import { icon, icons } from '../icons';
 
 /** Die Verwaltung.
  *
@@ -519,6 +520,22 @@ function vermisstenbereich(geaendert: () => void): HTMLElement {
 /* ---------- Bibliotheken ---------- */
 
 function bibliotheksbereich(geaendert: () => void, signal: AbortSignal): HTMLElement {
+  /** Die Liste, wie sie gerade steht — für das Umsortieren. */
+  let alleBibliotheken: Bibliothek[] = [];
+
+  /** Schiebt einen Eintrag und schickt die ganze neue Reihenfolge. */
+  async function schieben(von: number, nach: number): Promise<void> {
+    if (nach < 0 || nach >= alleBibliotheken.length) return;
+
+    const neu = [...alleBibliotheken];
+    const [eintrag] = neu.splice(von, 1);
+    neu.splice(nach, 0, eintrag!);
+
+    await reihenfolgeSetzen(neu.map(b => b.id));
+    await laden();
+    geaendert();
+  }
+
   const bereich = document.createElement('section');
 
   const anlegen = knopf('Mediathek hinzufügen', 'btn btn-primary');
@@ -571,14 +588,15 @@ function bibliotheksbereich(geaendert: () => void, signal: AbortSignal): HTMLEle
         liste.appendChild(leer('Noch keine Mediathek. Lege oben eine an.'));
         return;
       }
-      alle.forEach(b => liste.appendChild(block(b)));
+      alleBibliotheken = alle;
+      alle.forEach((b, i) => liste.appendChild(block(b, i)));
     } catch (fehler) {
       liste.innerHTML = '';
       liste.appendChild(fehlerzeile((fehler as Error).message));
     }
   }
 
-  function block(b: Bibliothek): HTMLElement {
+  function block(b: Bibliothek, platz: number): HTMLElement {
     const d = document.createElement('div');
     d.className = 'einstellung';
 
@@ -589,10 +607,16 @@ function bibliotheksbereich(geaendert: () => void, signal: AbortSignal): HTMLEle
         ? (serie ? 'Serie' : 'Film')
         : (serie ? 'Serien' : 'Filme'));
 
+    // Was wartet, gehört in dieselbe Zeile — sonst erfährt man es nur, wenn
+    // man bis zur Prüfliste weiterscrollt.
+    const wartet = b.pendingCount > 0
+      ? ` · ${b.pendingCount} wartet${b.pendingCount === 1 ? '' : 'en'} auf Freigabe`
+      : '';
+
     const kopf = document.createElement('div');
     kopf.className = 'zeile';
     kopf.innerHTML = `<strong>${esc(b.name)}</strong>`
-      + `<span class="winzig">${esc(b.path)}${esc(anzahl)}</span>`;
+      + `<span class="winzig">${esc(b.path)}${esc(anzahl)}${esc(wartet)}</span>`;
     d.appendChild(kopf);
 
     const stand = document.createElement('div');
@@ -685,9 +709,51 @@ function bibliotheksbereich(geaendert: () => void, signal: AbortSignal): HTMLEle
       }
     };
 
+    // **Umsortieren über zwei Pfeile, nicht über Ziehen.**
+    //
+    // Ziehen und Ablegen ist schöner, aber mit der Tastatur unbedienbar und
+    // auf dem Telefon ein Glücksspiel. Zwei Knöpfe kann jeder bedienen, und
+    // der Server bekommt die ganze Liste statt eines „eins hoch" — zwei
+    // Benutzer, die gleichzeitig schieben, kämen sonst in einen Zustand, den
+    // keiner von beiden wollte.
+    const hoch = knopf('', 'btn rund');
+    hoch.innerHTML = icons.hoch;
+    hoch.setAttribute('aria-label', `„${b.name}“ nach oben`);
+    hoch.disabled = platz === 0;
+    hoch.onclick = () => void schieben(platz, platz - 1);
+
+    const runter = knopf('', 'btn rund');
+    runter.innerHTML = icons.hoch;
+    runter.style.transform = 'rotate(180deg)';
+    runter.setAttribute('aria-label', `„${b.name}“ nach unten`);
+    runter.disabled = platz === alleBibliotheken.length - 1;
+    runter.onclick = () => void schieben(platz, platz + 1);
+
     const knoepfe = document.createElement('div');
     knoepfe.className = 'knopfreihe';
-    knoepfe.append(los, auffrischen, pruefung, umbenennen, entfernen);
+    knoepfe.append(hoch, runter, los, auffrischen, pruefung, umbenennen, entfernen);
+
+    // **Nur wenn hier wirklich etwas liegt.** Ein Knopf, der nichts zu tun
+    // hat, ist schlechter als keiner — und die Zahl daneben sagt, worum es
+    // geht, ohne dass man erst weiterscrollen muss.
+    if (b.pendingCount > 0) {
+      const freigeben = knopf(
+        `${b.pendingCount} ${b.pendingCount === 1 ? 'Titel' : 'Titel'} freigeben`,
+        'btn btn-primary');
+      freigeben.onclick = async () => {
+        freigeben.disabled = true;
+        try {
+          const bericht = await mediathekFreigeben(b.id);
+          stand.textContent = `${bericht.published} freigegeben.`;
+          await laden();
+          geaendert();
+        } catch (fehler) {
+          d.appendChild(fehlerzeile((fehler as Error).message));
+          freigeben.disabled = false;
+        }
+      };
+      knoepfe.appendChild(freigeben);
+    }
     d.append(knoepfe, stand);
     void verfolgen(false);
     return d;
@@ -821,21 +887,38 @@ function serverbereich(geaendert: () => void): HTMLElement {
               platzhalter: 'Read Access Token oder API Key',
               hinweis: 'Leer lassen, um den mitgelieferten zu behalten.',
             },
-            {
-              name: 'sprache', beschriftung: 'Sprache der Metadaten',
-              auswahl: sprachen, wert: stand.language,
-              hinweis: 'In dieser Sprache werden Titel und Beschreibungen geholt. '
-                + 'Sie bestimmt auch, welche Altersfreigabe gilt. Vorhandene Titel '
-                + 'behalten ihre alte Sprache — dafür gibt es bei jeder Mediathek '
-                + 'den Knopf „Metadaten auffrischen".',
-            },
           ],
           bestaetigen: 'Speichern',
           tun: async wert => {
-            await metadatenSetzen({
-              apiKey: wert('schluessel') || undefined,
-              language: wert('sprache') || undefined,
-            });
+            await metadatenSetzen({ apiKey: wert('schluessel') || undefined });
+            location.reload();
+          },
+        })));
+
+      // **Die Sprache des Servers als eigene Zeile.**
+      //
+      // Sie steckte im Dialog „Metadaten" — zusammen mit dem TMDB-Schlüssel,
+      // also dort, wo niemand nach einer Sprache sucht. Wer die Mediathek auf
+      // Englisch vorfand, sah nur „Meine Sprache" und hielt das für die
+      // einzige Möglichkeit.
+      liste.appendChild(zeile(
+        'Sprache des Servers',
+        sprachen.find(x => x.wert === stand.language)?.text ?? stand.language,
+        'In dieser Sprache werden Titel und Beschreibungen geholt, und sie '
+        + 'bestimmt die Altersfreigabe. Gilt für alle. Vorhandene Titel behalten '
+        + 'ihre alte Sprache — dafür gibt es bei jeder Mediathek „Metadaten '
+        + 'auffrischen".',
+        () => dialog({
+          titel: 'Sprache des Servers',
+          text: 'Die Umstellung wirkt auf neue Funde sofort. Für den vorhandenen '
+            + 'Bestand drückst du danach bei jeder Mediathek „Metadaten auffrischen" '
+            + '— sonst behalten die Titel ihre alte Sprache.',
+          felder: [{
+            name: 'sprache', beschriftung: 'Sprache', auswahl: sprachen, wert: stand.language,
+          }],
+          bestaetigen: 'Übernehmen',
+          tun: async wert => {
+            await metadatenSetzen({ language: wert('sprache') });
             location.reload();
           },
         })));

web/app/src/zuordnung.ts

@@ -0,0 +1,104 @@
+import { vorschlaege, zuordnen } from './api';
+import { esc, knopf, feld, fehlerzeile, leer } from './util';
+import { icons } from './icons';
+
+/** Einen Titel einem anderen Eintrag der Metadatenquelle zuordnen.
+ *
+ * **Als eigener Dialog und nicht nur auf der Detailseite.** Wer in der
+ * Mediathek zwanzig falsch erkannte Titel vor sich hat, soll sie dort
+ * geradeziehen können — vierzig Seitenwechsel sind keine Bedienung.
+ *
+ * `fertig` wird gerufen, wenn etwas zugeordnet wurde; der Aufrufer frischt
+ * damit auf, was er zeigt.
+ */
+export function zuordnungsdialog(
+  art: 'movies' | 'series',
+  id: string,
+  titel: string,
+  jahr: number | null,
+  fertig?: () => void,
+): void {
+  const d = document.createElement('dialog');
+  d.className = 'dlg dlg-breit';
+
+  const kopf = document.createElement('div');
+  kopf.className = 'dlg-kopf';
+  const h = document.createElement('h2');
+  h.textContent = 'Zuordnung korrigieren';
+  const zu = document.createElement('button');
+  zu.className = 'dlg-zu';
+  zu.innerHTML = icons.schliessen;
+  zu.setAttribute('aria-label', 'Schliessen');
+  zu.onclick = () => d.close();
+  kopf.append(h, zu);
+
+  const koerper = document.createElement('div');
+  koerper.className = 'dlg-koerper';
+
+  const hinweis = document.createElement('p');
+  hinweis.className = 'hinweis';
+  hinweis.textContent = 'Der gewählte Eintrag ersetzt Titel, Beschreibung, Bilder '
+    + 'und Besetzung. Von Hand gewählte Bilder bleiben.';
+
+  const suche = feld('Anderer Suchbegriff');
+  suche.value = titel;
+  const jahrfeld = feld('Jahr', 'number');
+  if (jahr) jahrfeld.value = String(jahr);
+  const suchen = knopf('Suchen', 'btn');
+
+  const reihe = document.createElement('div');
+  reihe.className = 'knopfreihe';
+  reihe.append(suche, jahrfeld, suchen);
+
+  const treffer = document.createElement('div');
+  treffer.className = 'einstellungen';
+
+  koerper.append(hinweis, reihe, treffer);
+  d.append(kopf, koerper);
+
+  d.addEventListener('close', () => d.remove());
+  d.addEventListener('click', e => { if (e.target === d) d.close(); });
+  // Enter im Suchfeld sucht, statt den Dialog zu schliessen.
+  suche.onkeydown = e => { if (e.key === 'Enter') { e.preventDefault(); void fragen(); } };
+
+  document.body.appendChild(d);
+  d.showModal();
+
+  suchen.onclick = () => void fragen();
+  void fragen();
+
+  async function fragen(): Promise<void> {
+    treffer.innerHTML = '<div class="spinner"></div>';
+    try {
+      const liste = await vorschlaege(art, id,
+        suche.value.trim(), jahrfeld.value ? Number(jahrfeld.value) : undefined);
+
+      treffer.innerHTML = '';
+      if (liste.length === 0) { treffer.appendChild(leer('Nichts gefunden.')); return; }
+
+      liste.forEach(v => {
+        const zeile = document.createElement('button');
+        zeile.className = 'einstellung waehlbar';
+        zeile.innerHTML =
+          `<div class="zeile"><strong>${esc(v.title)}</strong>`
+          + `<span class="winzig">${esc(v.year ?? '')} · TMDB ${v.tmdbId}</span></div>`
+          + `<div class="hinweis">${esc((v.overview ?? '').slice(0, 160))}</div>`;
+        zeile.onclick = async () => {
+          zeile.disabled = true;
+          try {
+            await zuordnen(art, id, v.tmdbId);
+            d.close();
+            fertig?.();
+          } catch (fehler) {
+            treffer.appendChild(fehlerzeile((fehler as Error).message));
+            zeile.disabled = false;
+          }
+        };
+        treffer.appendChild(zeile);
+      });
+    } catch (fehler) {
+      treffer.innerHTML = '';
+      treffer.appendChild(fehlerzeile((fehler as Error).message));
+    }
+  }
+}