Neun gemeldete Fehler, und die Frage, welcher Build gerade läuft

Ein grosser Commit, weil die Punkte einander bedingen: ohne lesbare
Fehlermeldung war die Serienerkennung nicht zu diagnostizieren, und ohne
Build-Kennung nicht einmal festzustellen, ob überhaupt der gebaute Stand
läuft. Zwei der neun Meldungen betrafen Funktionen, die seit Stunden im
Quelltext stehen.

Version und Build. Die Version steht fest; daneben eine Kennung aus
sechs Zeichen, die sich bei jedem Docker-Bau ändert. Sie steht in der
Verwaltung, unter /health und im Protokoll bei jedem Start. Damit ist
"reden wir vom selben Build?" in zwei Sekunden beantwortet statt in
einem halben Tag.

Serien. Lag eine Datei direkt im Serienordner und trug vor der
Folgennummer nichts, wurde der ganze Dateiname zum Serientitel: aus 95
Serien wurden 737, jede mit einer Folge, bei jedem Lauf neu. Dazu lief
der Scan in Verweise hinein — derselbe Ordner unter zwei Namen ergab
zwei Serien. Und weder neue noch umgezogene Dateien standen in der
Pfadliste des Laufs, weshalb ein doppelt gesehener Pfad eine zweite
Zeile mit gleichem (LibraryId, Path) anlegte und der
Eindeutigkeitsindex den ganzen Speichervorgang scheitern liess. Jede
Serienanlage wird jetzt im Tagesprotokoll begründet.

Fehlermeldungen. "An error occurred while saving the entity changes"
stand englisch in einer deutschen Oberfläche und nannte weder Ursache
noch nächsten Schritt. Jetzt geht der vollständige Text ins Protokoll
und ein deutscher Satz ohne Fehlercode in die Anzeige — auch für
"Failed to fetch", das aus dem Browser kam und nie übersetzt wurde.

Protokolle. Die Ansicht holte die ganze Datei und zeigte 800 Zeilen
davon; bei zwei Megabyte brach die Verbindung ab. Gelesen wird jetzt
serverseitig rückwärts, mit einem Knopf für mehr.

Auswahlfelder. Die drei <select> zeichnete das Betriebssystem: ein
helles Systemmenü mitten in der dunklen Oberfläche. Ersetzt durch ein
eigenes Listenfeld mit Tastaturbedienung.

Bildwahl. Drei Raster untereinander in einem scrollenden Dialog hiess
zwei Scrollebenen übereinander. Jetzt ein Reiter je Bildtyp.

Sprache. Die Serversprache stand in der Serverliste zwischen Name,
Metadaten und Fassung — gesucht und nicht gefunden. Sie hat jetzt einen
eigenen Abschnitt ganz oben.

Dazu: ein Knopf, der den erfassten Inhalt einer Mediathek verwirft, ohne
Name und Pfad mitzunehmen; ein Abschnitt Speicher mit den drei Pfaden,
ihrer Belegung und dem Leeren des Bildspeichers; und die Korrektur einer
Zuordnung frischt nur noch die Kachel auf statt die ganze Seite.

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

web/app/src/bilder.ts

@@ -1,5 +1,5 @@
 import { bildAdresse, bildauswahl, bildSetzen, bildHochladen, type Bildkandidat } from './api';
-import { knopf, fehlerzeile } from './util';
+import { knopf, fehlerzeile, meldung } from './util';
 import { icons } from './icons';
 
 type Bildart = 'poster' | 'backdrop' | 'logo';
@@ -43,6 +43,9 @@ export function bilddialog(art: 'movies' | 'series', id: string, titel: string):
   document.body.appendChild(d);
   d.showModal();
 
+  /** Welcher Reiter offen ist — überlebt das Neuzeichnen nach jeder Wahl. */
+  let offen: Bildart = 'poster';
+
   void laden();
 
   async function laden(): Promise<void> {
@@ -51,7 +54,7 @@ export function bilddialog(art: 'movies' | 'series', id: string, titel: string):
       auswahl = await bildauswahl(art, id);
     } catch (fehler) {
       koerper.innerHTML = '';
-      koerper.appendChild(fehlerzeile((fehler as Error).message));
+      koerper.appendChild(fehlerzeile(meldung(fehler)));
       return;
     }
 
@@ -66,14 +69,51 @@ export function bilddialog(art: 'movies' | 'series', id: string, titel: string):
       koerper.appendChild(hinweis);
     }
 
+    // **Ein Reiter je Bildtyp statt drei Blöcke untereinander.**
+    //
+    // Vorher scrollte der Dialogkörper, und jedes der drei Raster darin
+    // scrollte noch einmal. Zwei Ebenen übereinander heisst: das Rad trifft
+    // mal die eine, mal die andere, je nachdem wo der Zeiger steht — und man
+    // landet nie dort, wo man hinwollte. Jetzt ist genau ein Typ sichtbar und
+    // genau eine Fläche scrollt.
+    const reiter = document.createElement('div');
+    reiter.className = 'bildreiter';
+    reiter.setAttribute('role', 'tablist');
+
+    const buehne = document.createElement('div');
+    buehne.className = 'bildbuehne';
+
+    koerper.append(reiter, buehne);
+
+    const bloecke = new Map<Bildart, HTMLElement>();
+
     ARTEN.forEach(({ art: bildart, titel: name, verhaeltnis }) => {
+      const aktuell = bildart === 'poster' ? auswahl.current.poster
+        : bildart === 'backdrop' ? auswahl.current.backdrop
+        : auswahl.current.logo;
+
+      const passende = auswahl.candidates.filter(k => k.kind === bildart);
+
+      const knopfReiter = document.createElement('button');
+      knopfReiter.type = 'button';
+      knopfReiter.className = 'bildreiter-knopf' + (bildart === offen ? ' an' : '');
+      knopfReiter.setAttribute('role', 'tab');
+      knopfReiter.setAttribute('aria-selected', String(bildart === offen));
+      // Die Zahl dazu: so sieht man vor dem Klicken, ob es dort etwas gibt.
+      knopfReiter.innerHTML = `<span>${name}</span>`
+        + `<span class="winzig">${passende.length}</span>`;
+      knopfReiter.onclick = () => { offen = bildart; void laden(); };
+      reiter.appendChild(knopfReiter);
+
+      if (bildart !== offen) return;
+
       const abschnitt = document.createElement('section');
       abschnitt.className = 'bildblock';
 
       const kopfzeile = document.createElement('div');
       kopfzeile.className = 'knopfreihe';
       const u = document.createElement('h3');
-      u.textContent = name;
+      u.textContent = aktuell ? `${name} — eines ist gesetzt` : name;
       kopfzeile.appendChild(u);
 
       // Eigenes Bild — ein verstecktes Dateifeld hinter einem Knopf, weil
@@ -91,37 +131,34 @@ export function bilddialog(art: 'movies' | 'series', id: string, titel: string):
         eigenes.disabled = true;
         try { await bildHochladen(art, id, bildart, datei); await laden(); }
         catch (fehler) {
-          abschnitt.appendChild(fehlerzeile((fehler as Error).message));
+          abschnitt.appendChild(fehlerzeile(meldung(fehler)));
           eigenes.disabled = false;
         }
       };
       kopfzeile.append(eigenes, feld);
       abschnitt.appendChild(kopfzeile);
 
-      const gitter = document.createElement('div');
-      gitter.className = 'bildgitter';
-      gitter.style.setProperty('--verhaeltnis', verhaeltnis);
-
-      const aktuell = bildart === 'poster' ? auswahl.current.poster
-        : bildart === 'backdrop' ? auswahl.current.backdrop
-        : auswahl.current.logo;
-
-      const passende = auswahl.candidates.filter(k => k.kind === bildart);
       if (passende.length === 0 && !aktuell) {
         const leer = document.createElement('p');
         leer.className = 'winzig';
         leer.textContent = 'Nichts zur Auswahl.';
         abschnitt.append(leer);
-        koerper.appendChild(abschnitt);
+        buehne.appendChild(abschnitt);
+        bloecke.set(bildart, abschnitt);
         return;
       }
 
+      const gitter = document.createElement('div');
+      gitter.className = 'bildgitter';
+      gitter.style.setProperty('--verhaeltnis', verhaeltnis);
+
       // Das gesetzte Bild zuerst, damit sichtbar ist, wovon man weggeht.
       if (aktuell) gitter.appendChild(kachelFuer(null, bildAdresse(aktuell)!, true, bildart));
       passende.forEach(k => gitter.appendChild(kachelFuer(k, k.thumbUrl, false, bildart)));
 
       abschnitt.appendChild(gitter);
-      koerper.appendChild(abschnitt);
+      buehne.appendChild(abschnitt);
+      bloecke.set(bildart, abschnitt);
     });
   }
 
@@ -154,7 +191,7 @@ export function bilddialog(art: 'movies' | 'series', id: string, titel: string):
       b.disabled = true;
       try { await bildSetzen(art, id, bildart, kandidat!.url); await laden(); }
       catch (fehler) {
-        b.after(fehlerzeile((fehler as Error).message));
+        b.after(fehlerzeile(meldung(fehler)));
         b.disabled = false;
       }
     };