Zwei Teile, ein Treffer — und einer verschwand

Du hast drei Filme vermisst, und die Zahlen sagten schon, wo sie sind: 448
Filme plus 13 zweite Fassungen sind genau die 461 Dateien. Es fehlte keine
Datei; drei Filme steckten als Fassung in einem anderen.

Gemessen, warum. Der Dateinamenleser ist unschuldig — „Teil 2" bleibt im
Titel. TMDB aber liefert für „Heiligtümer des Todes Teil 1" wie für „Teil 2"
denselben Treffer zuerst, sobald ohne Jahr gesucht werden muss. Und weil
zwei Einträge dieselbe Kennung nicht teilen dürfen, wurde der zweite
geschluckt.

Zwei Dateien, deren Namen verschiedene Jahre nennen, sind jetzt verschiedene
Filme. Der erste Anlauf hatte ein Jahr Abstand als Toleranz erlaubt — für
Dezember-Erstaufführungen — und verschluckte damit genau den Fall, um den es
geht: Teil 1 ist von 2010, Teil 2 von 2011.

Dazu sieht man endlich, was nicht zugeordnet werden konnte. „Nicht
zugeordnet" listete bisher nur Dateien ganz ohne Titel, und die gibt es bei
Filmen nie — deshalb standen dort nur Serien. Daneben eine Liste der Titel
mit mehreren Dateien: zwei Fassungen sind die Regel, zwei verschiedene Filme
der Fehler, und an den Dateinamen sieht man es sofort.

Der Bearbeiten-Dialog hat jetzt Reiter statt Knöpfe, die weitere Fenster
öffnen — ein Fenster über einem Fenster, und man wusste nicht mehr, was man
zumacht. „Titel ändern" und „Bilder bearbeiten" sind aus dem Kontextmenü
raus; über „Bearbeiten" kommt man an beides.

Beim Prüfen gefunden: ein Dialog blieb nach einem Seitenwechsel über der
neuen Seite stehen. Er hängt an body, nicht am Inhaltsbereich.

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

web/app/src/api.ts

@@ -794,6 +794,38 @@ export type Unzugeordnet = { gesamt: number; dateien: UnzugeordneteDatei[] };
 export const unzugeordnet = (bibliothek: string, anzahl = 300) =>
   anfrage<Unzugeordnet>(`/libraries/${bibliothek}/unassigned?take=${anzahl}`);
 
+/** Ein Titel, zu dem die Metadatenquelle nichts hergab. */
+export type OhneZuordnung = {
+  id: string;
+  /** „movie" oder „series" — damit der Klick weiss, wohin. */
+  art: 'movie' | 'series';
+  titel: string;
+  jahr: number | null;
+  dateien: number;
+  /** Ein Dateiname, damit man den Titel wiedererkennt. */
+  beispiel: string | null;
+};
+
+/** Titel, die zwar dastehen, aber ohne Metadaten — unter ihrem Dateinamen.
+ *
+ * **Nicht zu verwechseln mit `unzugeordnet`.** Das sind Dateien ganz ohne
+ * Titel; bei einer Filmbibliothek ist diese Liste immer leer, weil der Scan
+ * für jede Datei einen Eintrag anlegt. Hier geht es um Einträge, die es gibt,
+ * zu denen die Quelle aber nichts fand. */
+export const ohneZuordnung = (bibliothek: string, anzahl = 300) =>
+  anfrage<OhneZuordnung[]>(`/libraries/${bibliothek}/unmatched?take=${anzahl}`);
+
+export type Mehrfachtitel = {
+  id: string; art: 'movie' | 'series';
+  titel: string; jahr: number | null;
+  dateien: string[];
+};
+export type Mehrfachbericht = { gesamt: number; titel: Mehrfachtitel[] };
+
+/** Titel mit mehr als einer Datei — dort versteckt sich falsch Zusammengelegtes. */
+export const mehrfachfassungen = (bibliothek: string, anzahl = 300) =>
+  anfrage<Mehrfachbericht>(`/libraries/${bibliothek}/versions?take=${anzahl}`);
+
 export type VermissteDatei = {
   fileId: string; path: string; versionLabel: string | null;
   missingSince: string; libraryName: string;

web/app/src/bearbeiten.ts

@@ -4,9 +4,10 @@ import {
   type Film, type Serie,
 } from './api';
 import { esc, knopf, feld, fehlerzeile, meldung, hinweisZeigen } from './util';
-import { icons, icon } from './icons';
-import { bilddialog } from './bilder';
-import { zuordnungsdialog } from './zuordnung';
+import { icons } from './icons';
+import { bilderflaeche } from './bilder';
+import { zuordnungsflaeche } from './zuordnung';
+import { beimSeitenwechselSchliessen } from './dialog';
 
 /** Was sich nach dem Bearbeiten geändert hat. */
 export type Bearbeitungsergebnis = {
@@ -18,6 +19,8 @@ export type Bearbeitungsergebnis = {
   verschmolzen: boolean;
   /** Welcher Eintrag das jetzt ist — nach einem Zusammenlegen ein anderer. */
   id: string;
+  /** Ob im Bilderreiter etwas getauscht wurde. */
+  bildGeaendert: boolean;
 };
 
 /** Alles zu einem Titel an einer Stelle.
@@ -69,12 +72,14 @@ export function bearbeiten(
         sortiertitel: zuletzt.sortTitle,
         verschmolzen,
         id: jetzige,
+        bildGeaendert: geaendertesBild,
       });
     }
   });
   d.addEventListener('click', e => { if (e.target === d) d.close(); });
   document.body.appendChild(d);
   d.showModal();
+  beimSeitenwechselSchliessen(d);
 
   /** Der zuletzt geladene Stand — daraus entsteht die Rückmeldung. */
   let zuletzt: Film | Serie | null = null;
@@ -92,18 +97,63 @@ export function bearbeiten(
     zeichnen(zuletzt);
   }
 
+  /** Welcher Reiter offen ist — überlebt das Neuzeichnen nach jeder Änderung. */
+  let reiter: 'angaben' | 'bilder' | 'zuordnung' = 'angaben';
+
   function zeichnen(eintrag: Film | Serie): void {
     koerper.innerHTML = '';
     h.textContent = `Bearbeiten — ${eintrag.title}`;
 
-    koerper.append(
-      kopfzeile(eintrag),
-      abschnittTitel(eintrag),
-      abschnittSortierung(eintrag),
-      abschnittWeiteres(eintrag),
-    );
+    const leiste = document.createElement('nav');
+    leiste.className = 'reiter';
+    ([
+      ['angaben', 'Angaben'],
+      ['bilder', 'Bilder'],
+      ['zuordnung', 'Zuordnung'],
+    ] as const).forEach(([wert, text]) => {
+      const b = document.createElement('button');
+      b.textContent = text;
+      b.classList.toggle('check', wert === reiter);
+      b.onclick = () => { reiter = wert; zeichnen(eintrag); };
+      leiste.appendChild(b);
+    });
+
+    const buehne = document.createElement('div');
+    buehne.className = 'bearb-buehne';
+
+    koerper.append(kopfzeile(eintrag), leiste, buehne);
+
+    // **Alles im selben Fenster.**
+    //
+    // Bilder und Zuordnung gingen vorher als zweiter Dialog über dem ersten
+    // auf — ein Fenster über einem Fenster, und man wusste nicht mehr, was
+    // man eigentlich zumacht. Es sind dieselben Flächen, nur hier gezeichnet.
+    if (reiter === 'angaben') {
+      buehne.append(abschnittTitel(eintrag), abschnittSortierung(eintrag));
+      return;
+    }
+
+    if (reiter === 'bilder') {
+      bilderflaeche(buehne, art, jetzige, () => { geaendertesBild = true; });
+      return;
+    }
+
+    zuordnungsflaeche(buehne, art, jetzige, eintrag.title, null, stand => {
+      if (stand.merged) {
+        // Diesen Eintrag gibt es nicht mehr; weiterzubearbeiten hiesse, auf
+        // ein Loch zu zeigen. Der Dialog folgt dem überlebenden.
+        verschmolzen = true;
+        jetzige = stand.id;
+        hinweisZeigen(`Mit „${stand.title}" zusammengelegt.`);
+      }
+      reiter = 'angaben';
+      void laden();
+    });
   }
 
+  /** Ob im Bilderreiter etwas getauscht wurde — die Kachel will das wissen. */
+  let geaendertesBild = false;
+
   /* ---------- Kopf: Plakat und was zugeordnet ist ---------- */
 
   function kopfzeile(eintrag: Film | Serie): HTMLElement {
@@ -212,44 +262,6 @@ export function bearbeiten(
     return block;
   }
 
-  /* ---------- Bilder und Zuordnung ---------- */
-
-  function abschnittWeiteres(eintrag: Film | Serie): HTMLElement {
-    const block = abschnitt('Bilder und Zuordnung',
-      'Plakat, Hintergrund und Schriftzug — und welchem Eintrag der '
-      + 'Metadatenquelle dieser Titel entspricht.');
-
-    const reihe = document.createElement('div');
-    reihe.className = 'knopfreihe';
-
-    const bilder = knopf('Bilder bearbeiten', 'btn');
-    bilder.prepend(icon('stift'));
-    // **Der Dialog bleibt offen dahinter.** Wer das Plakat wechselt, ist mit
-    // dem Bearbeiten meist nicht fertig — ihn hier zuzumachen hiesse, danach
-    // wieder von vorn anzufangen.
-    bilder.onclick = () => bilddialog(art, jetzige, eintrag.title, () => void laden());
-
-    const zuordnung = knopf('Zuordnung korrigieren', 'btn');
-    zuordnung.prepend(icon('suche'));
-    // **Ohne Jahr.** Das angezeigte stammt aus der Zuordnung, die gerade
-    // korrigiert werden soll — bei einem falschen Treffer grenzt es die Suche
-    // auf genau das falsche Jahr ein.
-    zuordnung.onclick = () => zuordnungsdialog(art, jetzige, eintrag.title, null, stand => {
-      if (stand.merged) {
-        // Diesen Eintrag gibt es nicht mehr; weiterzubearbeiten hiesse, auf
-        // ein Loch zu zeigen. Der Dialog folgt dem überlebenden.
-        verschmolzen = true;
-        jetzige = stand.id;
-        hinweisZeigen(`Mit „${stand.title}" zusammengelegt.`);
-      }
-      void laden();
-    });
-
-    reihe.append(bilder, zuordnung);
-    block.appendChild(reihe);
-    return block;
-  }
-
   /* ---------- Hilfsbausteine ---------- */
 
   function abschnitt(titel: string, text: string): HTMLElement {

web/app/src/bilder.ts

@@ -1,6 +1,7 @@
 import { bildAdresse, bildauswahl, bildSetzen, bildHochladen, type Bildkandidat } from './api';
 import { knopf, fehlerzeile, meldung } from './util';
 import { icons } from './icons';
+import { beimSeitenwechselSchliessen } from './dialog';
 
 type Bildart = 'poster' | 'backdrop' | 'logo';
 
@@ -49,13 +50,33 @@ export function bilddialog(
 
   const koerper = document.createElement('div');
   koerper.className = 'dlg-koerper';
-  koerper.innerHTML = '<div class="spinner"></div>';
 
   d.append(kopf, koerper);
   d.addEventListener('close', () => { d.remove(); if (geaendert) fertig?.(); });
   d.addEventListener('click', e => { if (e.target === d) d.close(); });
   document.body.appendChild(d);
   d.showModal();
+  beimSeitenwechselSchliessen(d);
+
+  bilderflaeche(koerper, art, id, () => { geaendert = true; });
+}
+
+/** Dieselbe Bildauswahl, aber in eine beliebige Fläche gezeichnet.
+ *
+ * **Damit sie als Reiter in „Bearbeiten" stehen kann.**
+ *
+ * Vorher ging von dort ein zweiter Dialog über dem ersten auf — ein Fenster
+ * über einem Fenster, und man wusste nicht mehr, was man eigentlich zumacht.
+ * Der eigene Dialog bleibt für alle, die nur die Bilder wollen; er ist jetzt
+ * nur noch ein Rahmen um diese Fläche.
+ */
+export function bilderflaeche(
+  koerper: HTMLElement,
+  art: 'movies' | 'series',
+  id: string,
+  beiAenderung?: () => void,
+): void {
+  koerper.innerHTML = '<div class="spinner"></div>';
 
   /** Welcher Reiter offen ist — überlebt das Neuzeichnen nach jeder Wahl. */
   let offen: Bildart = 'poster';
@@ -205,7 +226,7 @@ export function bilddialog(
       b.disabled = true;
       try {
         await bildSetzen(art, id, bildart, kandidat!.url);
-        geaendert = true;
+        beiAenderung?.();
         await laden();
       }
       catch (fehler) {

web/app/src/card.ts

@@ -5,9 +5,7 @@ import {
 import { esc, anteil, hinweisZeigen } from './util';
 import { icons } from './icons';
 import { kontextmenue, menueAnZiel, type Menuepunkt } from './menue';
-import { bilddialog } from './bilder';
 import { zuordnungsdialog } from './zuordnung';
-import { titeldialog } from './titel';
 import { bearbeiten } from './bearbeiten';
 
 /** Was eine Kachel zeigt — unabhängig davon, woher sie kommt. */
@@ -339,28 +337,16 @@ function kachelpunkte(
           hinweisZeigen(`„${ergebnis.titel}" wurde mit einem vorhandenen Eintrag zusammengelegt.`);
           return;
         }
+        // Auch ein getauschtes Plakat kommt damit mit — `kachelAuffrischen`
+        // holt den Eintrag ohnehin frisch.
         void kachelAuffrischen(k, knopf);
       }),
     });
 
-    punkte.push({
-      text: 'Bilder bearbeiten',
-      icon: 'stift',
-      // **Die Kachel holt sich das neue Plakat selbst.** Vorher blieb das
-      // alte stehen, bis man die ganze Oberfläche neu lud.
-      tun: () => bilddialog(art, k.id, k.titel, () => void kachelAuffrischen(k, knopf)),
-    });
-    punkte.push({
-      text: 'Titel ändern',
-      icon: 'stift',
-      // **Nicht jeder Titel steht bei TMDB.** Ein Mitschnitt hat gar keinen,
-      // und mancher heisst im Haushalt anders. Bisher blieb nur der Dateiname.
-      tun: () => titeldialog(art, k.id, k.titel, neu => {
-        k.titel = neu;
-        const text = knopf.querySelector('.kacheltext strong');
-        if (text) text.textContent = neu;
-      }),
-    });
+    // **Nur noch diese eine Abkürzung.** Titel und Bilder standen zusätzlich
+    // im Menü, seit es „Bearbeiten" gibt aber doppelt — und ein Menü mit zwei
+    // Wegen zur selben Sache ist eines zu viel. Die Zuordnung bleibt, weil
+    // sie der häufigste Grund ist, überhaupt etwas anzufassen.
     punkte.push({
       text: 'Zuordnung korrigieren',
       icon: 'suche',

web/app/src/dialog.ts

@@ -427,3 +427,24 @@ export function nachfragen(optionen: {
     tun: () => optionen.tun(),
   });
 }
+
+/** Schliesst einen Dialog, wenn die Seite gewechselt wird.
+ *
+ * **Ein `<dialog>` hängt an `document.body`, nicht am Inhaltsbereich.** Der
+ * Router tauscht darunter die Seite aus, und das Fenster bleibt darüber
+ * stehen — über einer Seite, zu der es nicht mehr gehört, und mit einem
+ * Hintergrund, der sich nicht bedienen lässt. Gesehen beim Prüfen: ein
+ * Bearbeiten-Dialog stand noch über der Verwaltung.
+ *
+ * Wird beim Schliessen von selbst wieder abgemeldet — sonst sammelt sich je
+ * geöffnetem Dialog ein Zuhörer am Fenster an.
+ */
+export function beimSeitenwechselSchliessen(d: HTMLDialogElement): void {
+  const zu = (): void => d.close();
+  window.addEventListener('hashchange', zu);
+  window.addEventListener('popstate', zu);
+  d.addEventListener('close', () => {
+    window.removeEventListener('hashchange', zu);
+    window.removeEventListener('popstate', zu);
+  });
+}

web/app/src/style.css

@@ -1582,3 +1582,30 @@ body:has(.auswahlleiste:not(.hidden)) .hinweise { bottom: 104px; }
 @media (max-width: 560px) {
   .bearb-abschnitt .knopfreihe .feld { flex: 1 1 100%; }
 }
+
+/* Die Bühne hinter den Reitern im Bearbeiten-Dialog. */
+.bearb-buehne { margin-top: var(--s-regular); }
+/* Die Reiterleiste sitzt hier enger als über einer ganzen Seite. */
+.dlg .reiter { margin: 0; border-bottom: 1px solid var(--line); }
+
+/* ---------- Ohne Zuordnung: eine Liste zum Durchgehen ---------- */
+
+.ohnezuordnung {
+  display: flex; flex-direction: column; gap: 2px;
+  margin-top: var(--s-snug);
+  max-height: 320px; overflow-y: auto;
+}
+.ohnezuordnung-zeile {
+  display: flex; align-items: baseline; gap: var(--s-regular);
+  width: 100%; text-align: left; cursor: pointer;
+  background: none; border: 0; color: var(--text);
+  padding: 7px var(--s-snug); border-radius: var(--r-control);
+}
+.ohnezuordnung-zeile:hover,
+.ohnezuordnung-zeile:focus-visible { background: var(--raised); }
+.oz-titel { font-size: 14px; flex: 0 0 auto; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* Der Dateiname steht daneben — daran erkennt man, was gemeint ist. */
+.oz-dazu {
+  font-size: 12px; color: var(--text-muted); flex: 1 1 auto;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}

web/app/src/views/admin.ts

@@ -9,7 +9,7 @@ import {
   benutzer, benutzerAnlegen, metadatenEinstellung, metadatenSetzen,
   servernameSetzen, systemauskunft,
   laufendeWiedergaben, serverzustand, bildAdresse,
-  speicherorte, bildspeicherLeeren, unzugeordnet,
+  speicherorte, bildspeicherLeeren, unzugeordnet, ohneZuordnung, mehrfachfassungen,
   sprachverteilung, abweichendeAuffrischen,
   type Bibliothek, type Wiedergabe, ApiFehler,
 } from '../api';
@@ -38,7 +38,8 @@ export function verwaltung(
   const wurzel = document.createElement('div');
   wurzel.append(dashboard(signal), sprachbereich(), pruefbereich(geaendert),
     vermisstenbereich(geaendert), bibliotheksbereich(geaendert, signal), benutzerbereich(),
-    serverbereich(geaendert), speicherbereich(), unzugeordnetbereich(),
+    serverbereich(geaendert), speicherbereich(), ohneZuordnungBereich(),
+    unzugeordnetbereich(),
     protokollbereich());
   return wurzel;
 }
@@ -407,6 +408,120 @@ function pruefbereich(geaendert: () => void): HTMLElement {
  * fehlt die Folgennummer, muss umbenannt werden; fehlt der Serienname, genügt
  * ein Ordner darum herum.
  */
+/** Titel, zu denen die Metadatenquelle nichts hergab.
+ *
+ * **Weil die Zahl allein nichts erklärt.** In der Übersicht standen 448
+ * Filme, in Plex 451 — und nirgends, welche drei fehlen oder warum. Ein Film
+ * ohne Zuordnung steht zwar in der Mediathek, aber unter seinem Dateinamen
+ * und ohne Plakat; wer ihn sucht, findet ihn nicht, weil er anders heisst.
+ *
+ * Daneben: Titel mit mehr als einer Datei. Zwei Dateien an einem Film sind
+ * meist zwei Fassungen und in Ordnung — manchmal aber zwei verschiedene
+ * Filme, die bei der Quelle auf denselben Treffer liefen. An den Dateinamen
+ * sieht man das in zwei Sekunden.
+ */
+function ohneZuordnungBereich(): HTMLElement {
+  const bereich = document.createElement('section');
+  bereich.classList.add('hidden');
+  bereich.appendChild(abschnitt('Ohne Zuordnung'));
+
+  const liste = document.createElement('div');
+  liste.className = 'einstellungen';
+  bereich.appendChild(liste);
+
+  void laden();
+
+  async function laden(): Promise<void> {
+    let alle;
+    try { alle = await bibliotheken(); }
+    catch { return; }
+
+    const ergebnisse = await Promise.all(alle.map(async b => {
+      try {
+        const [offen, mehrfach] = await Promise.all([
+          ohneZuordnung(b.id), mehrfachfassungen(b.id),
+        ]);
+        return { b, offen, mehrfach };
+      } catch { return null; }
+    }));
+
+    const mitFunden = ergebnisse
+      .filter(e => e !== null)
+      .filter(e => e!.offen.length > 0 || e!.mehrfach.gesamt > 0);
+
+    if (mitFunden.length === 0) { bereich.classList.add('hidden'); return; }
+    bereich.classList.remove('hidden');
+
+    liste.innerHTML = '';
+
+    mitFunden.forEach(e => {
+      const { b, offen, mehrfach } = e!;
+
+      if (offen.length > 0) {
+        liste.appendChild(gruppe(
+          `${b.name} — ${anzahl(offen.length, 'Titel')} ohne Zuordnung`,
+          'Diese stehen unter ihrem Dateinamen in der Mediathek. '
+          + 'Über „Zuordnung korrigieren" lassen sie sich geradeziehen.',
+          offen.map(t => ({
+            titel: t.titel + (t.jahr ? ` (${t.jahr})` : ''),
+            dazu: t.beispiel ?? `${anzahl(t.dateien, 'Datei')}`,
+            // **Hier bearbeiten, nicht woandershin springen.** Wer eine
+            // Liste durchgeht, will nach dem Geradeziehen beim nächsten
+            // weitermachen — nicht jedes Mal zurücknavigieren.
+            tun: () => bearbeiten(t.art === 'series' ? 'series' : 'movies', t.id, () => void laden()),
+          }))));
+      }
+
+      if (mehrfach.gesamt > 0) {
+        liste.appendChild(gruppe(
+          `${b.name} — ${anzahl(mehrfach.gesamt, 'Titel')} mit mehreren Dateien`,
+          'Meist zwei Fassungen desselben Films. Stehen hier aber zwei '
+          + 'verschiedene Filme, lief einer von beiden auf den falschen Treffer — '
+          + 'dann hilft „Zuordnung korrigieren".',
+          mehrfach.titel.map(t => ({
+            titel: t.titel + (t.jahr ? ` (${t.jahr})` : ''),
+            dazu: t.dateien.join(' · '),
+            tun: () => bearbeiten(t.art === 'series' ? 'series' : 'movies', t.id, () => void laden()),
+          }))));
+      }
+    });
+  }
+
+  function anzahl(n: number, wort: string): string {
+    return `${n} ${n === 1 ? wort : (wort === 'Datei' ? 'Dateien' : wort)}`;
+  }
+
+  function gruppe(
+    ueberschrift: string, hinweis: string,
+    zeilen: { titel: string; dazu: string; tun: () => void }[],
+  ): HTMLElement {
+    const d = document.createElement('div');
+    d.className = 'einstellung';
+
+    const kopf = document.createElement('div');
+    kopf.className = 'zeile';
+    kopf.innerHTML = `<strong>${esc(ueberschrift)}</strong>`
+      + `<span class="winzig">${esc(hinweis)}</span>`;
+    d.appendChild(kopf);
+
+    const innen = document.createElement('div');
+    innen.className = 'ohnezuordnung';
+    zeilen.forEach(z => {
+      const b = document.createElement('button');
+      b.className = 'ohnezuordnung-zeile';
+      b.innerHTML = `<span class="oz-titel">${esc(z.titel)}</span>`
+        + `<span class="oz-dazu">${esc(z.dazu)}</span>`;
+      b.onclick = z.tun;
+      innen.appendChild(b);
+    });
+    d.appendChild(innen);
+
+    return d;
+  }
+
+  return bereich;
+}
+
 function unzugeordnetbereich(): HTMLElement {
   const bereich = document.createElement('section');
   const kopf = abschnitt('Nicht zugeordnet');

web/app/src/zuordnung.ts

@@ -1,6 +1,7 @@
 import { vorschlaege, zuordnen, herkunft, type Zuordnungsstand } from './api';
 import { esc, knopf, feld, fehlerzeile, leer, meldung } from './util';
 import { icons } from './icons';
+import { beimSeitenwechselSchliessen } from './dialog';
 
 /** Einen Titel einem anderen Eintrag der Metadatenquelle zuordnen.
  *
@@ -40,6 +41,39 @@ export function zuordnungsdialog(
   const koerper = document.createElement('div');
   koerper.className = 'dlg-koerper';
 
+  d.append(kopf, koerper);
+  d.addEventListener('close', () => d.remove());
+  d.addEventListener('click', e => { if (e.target === d) d.close(); });
+  document.body.appendChild(d);
+  d.showModal();
+  beimSeitenwechselSchliessen(d);
+
+  zuordnungsflaeche(koerper, art, id, titel, jahr, stand => {
+    d.close();
+    fertig?.(stand);
+  });
+}
+
+/** Dieselbe Zuordnungssuche, aber in eine beliebige Fläche gezeichnet.
+ *
+ * **Damit sie als Reiter in „Bearbeiten" stehen kann** — statt als zweiter
+ * Dialog über dem ersten. Der eigene Dialog bleibt für alle, die nur die
+ * Zuordnung wollen; er ist jetzt nur noch ein Rahmen um diese Fläche.
+ *
+ * `fertig` wird nach einer übernommenen Zuordnung gerufen. Ob daraufhin etwas
+ * geschlossen wird, entscheidet der Aufrufer — in einem Reiter wäre das
+ * falsch, in einem eigenen Dialog richtig.
+ */
+export function zuordnungsflaeche(
+  koerper: HTMLElement,
+  art: 'movies' | 'series',
+  id: string,
+  titel: string,
+  jahr: number | null,
+  fertig?: (stand: Zuordnungsstand) => void,
+): void {
+  koerper.innerHTML = '';
+
   // **Woher der Titel stammt, über allem anderen.**
   //
   // Liegt die Zuordnung völlig daneben, sagt der angezeigte Titel nichts mehr
@@ -92,16 +126,10 @@ export function zuordnungsdialog(
   treffer.className = 'einstellungen';
 
   koerper.append(quelle, 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();
 
@@ -165,7 +193,6 @@ export function zuordnungsdialog(
             lauf.innerHTML = stand.merged
               ? '<span>Übernommen und mit dem vorhandenen Eintrag zusammengelegt.</span>'
               : '<span>Übernommen.</span>';
-            d.close();
             fertig?.(stand);
           } catch (fehler) {
             lauf.remove();