Wer etwas sieht, kann es jetzt auch sagen

Wer einen Server für andere betreibt, erfährt von Fehlern zuletzt: dass
die deutsche Tonspur nach einer halben Stunde aussetzt, merkt der, der den
Film sieht, und nicht der, der ihn eingeräumt hat. Bisher gab es dafür
keinen Weg ausser dem Zuruf im Wohnzimmer.

Gemeldet wird an einem Film, einer Serie, einer einzelnen Staffel und
einer einzelnen Folge: Art (Bild, Ton, Untertitel, Angaben, Sonstiges),
eine freiwillige Stelle wie 0:34:12 und der Kommentar. Pflicht ist nur der
Kommentar — die beiden anderen machen aus einer Liste von Sätzen etwas,
das man sortieren und nachstellen kann.

**Eine Staffel gibt es als Zeile nicht**, und das prägt den Entwurf. Sie
ist Serie plus Nummer, so wie überall sonst in diesem Server; die Meldung
trägt deshalb drei Fremdschlüssel und daneben eine Staffelnummer. Dass die
Nummer auf eine Staffel zeigt, die es gibt, prüft der Endpunkt beim
Schreiben — die Datenbank kann es nicht, es gibt nichts, worauf sie zeigen
könnte.

**Die Rechteprüfung steht nirgends.** Wer einen Titel nicht sehen darf,
findet ihn beim Melden nicht — das erledigt der Freigabefilter, ohne ein
einziges `Where`. Elegant und genau deshalb leicht zu zerstören, darum
steht dafür ein Test da.

**Die eigene Liste überlebt fremde Entscheidungen.** Titel werden
nachgeschlagen, nicht verbunden: zieht ein Administrator einen Titel
zurück, nachdem jemand ihn gemeldet hat, bleibt die Meldung beim Melder
stehen — nur ohne Namen. Ein Join hätte sie verschwinden lassen, und das
wäre jemandes eigene Eingabe, weggenommen wegen einer fremden Entscheidung.
`IgnoreQueryFilters` wäre die bequeme Abkürzung und gäbe den Namen eines
unveröffentlichten Titels über einen Weg heraus, an den beim nächsten Mal
niemand denkt.

**Erledigt heisst abgehakt, nicht gelöscht**, als Zeitpunkt und nicht als
Haken — wie `PublishAt` und `ChangedSince`. Daneben steht „Wieder öffnen";
ein Fehlgriff wäre sonst endgültig. Das Archiv wird erst auf Zuruf geholt:
es wächst nur, und für den seltenen Blick dauernd zu zahlen lohnt nicht.

**Der Abschnitt steht neben der Prüfliste, nicht darin.** Die versteckt
sich, sobald nichts auf Freigabe wartet — das ist der Normalfall, und die
Meldungen verschwänden mit ihr. Umgekehrt bleibt der Meldungsabschnitt
stehen, auch wenn nichts drinsteht: ein Kanal, der sich versteckt, solange
ihn niemand benutzt hat, bringt niemandem bei, dass es ihn gibt.

Die Zahl an der Leiste holt sich nur, wer sie nicht ohnehin hat: steht „Zu
prüfen" offen, meldet der Abschnitt sie selbst und nach jedem Abhaken.

Nebenbei zwei Dinge am Dialog, die hier auffielen. Es gab **kein
mehrzeiliges Feld** — und das Einsammeln der Werte hätte ein `<textarea>`
still verschluckt: es ist kein `HTMLInputElement` und wäre ins Auffangnetz
für Auswahlfelder gelaufen, also als `undefined` hinausgegangen. Der
Server hätte „ohne Beschreibung" geantwortet, auf einem Dialog, in dem
sichtbar etwas steht. Und `dialog()` meldete sich als einziger nicht beim
Seitenwechsel an: ein Dialog von der Detailseite überlebte den
Zurück-Knopf und stand danach über der Mediathek.

Neun Testfälle auf dem Server, zwölf Läufe. Für den Web-Client gibt es in
diesem Projekt keine Tests; dort ist von Hand geprüft.

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

web/app/src/api.ts

@@ -810,6 +810,60 @@ export const zurueckziehen = (ids: string[]) =>
   anfrage<{ withheld: number }>('/review/withhold',
     { method: 'POST', body: JSON.stringify({ ids, publishAt: null }) });
 
+/* ---------- Meldungen ---------- */
+
+export type Meldungsart = 'bild' | 'ton' | 'untertitel' | 'daten' | 'sonstiges';
+
+export type Meldung = {
+  id: string;
+  /** Worauf sie zeigt. */
+  target: 'movie' | 'series' | 'season' | 'episode';
+  /** Die Kennung der Detailseite — bei Staffel und Folge die der Serie. */
+  itemId: string;
+  /** Leer, wenn der Titel nicht mehr sichtbar ist. */
+  title: string;
+  subTitle: string | null;
+  posterImage: string | null;
+  kind: Meldungsart;
+  positionSeconds: number | null;
+  comment: string;
+  reportedAt: string;
+  reportedBy: string;
+  /** `null` heisst: offen. */
+  resolvedAt: string | null;
+};
+
+/** Meldet ein Problem an einem Titel.
+ *
+ * **Eine Kennung für alles.** Film, Serie und Folge gehen über denselben Weg
+ * hinaus wie Häkchen, Favorit und Fortschritt; welche von dreien es ist,
+ * entscheidet der Server. Nur die Staffel braucht eine Nummer daneben — die
+ * gibt es als eigene Zeile nicht. */
+export const meldungAnlegen = (
+  id: string, kind: Meldungsart, comment: string, position?: string, staffel?: number,
+) =>
+  anfrage<{ id: string }>(`/items/${id}/reports`, {
+    method: 'POST',
+    body: JSON.stringify({
+      kind, comment,
+      position: position ?? null,
+      seasonNumber: staffel ?? null,
+    }),
+  });
+
+/** Alle Meldungen — offene oder erledigte. Nur für Administratoren. */
+export const meldungen = (erledigt = false) =>
+  anfrage<Meldung[]>(`/reports${erledigt ? '?erledigt=true' : ''}`);
+
+/** Die eigenen, offene wie erledigte. */
+export const meineMeldungen = () => anfrage<Meldung[]>('/reports/mine');
+
+export const meldungErledigt = (id: string) =>
+  anfrage<void>(`/reports/${id}/resolve`, { method: 'POST' });
+
+export const meldungWiederOeffnen = (id: string) =>
+  anfrage<void>(`/reports/${id}/reopen`, { method: 'POST' });
+
 /** Die Reihenfolge der Seitenleiste, von oben nach unten. */
 export const reihenfolgeSetzen = (ids: string[]) =>
   anfrage<void>('/libraries/order', { method: 'PUT', body: JSON.stringify({ ids }) });

web/app/src/dialog.ts

@@ -11,7 +11,8 @@ import { auswahl, type Auswahlfeld } from './auswahl';
  * Vorlesesoftware kündigt ihn als Dialog an. Jede Zeile, die das selbst
  * baut, ist eine Zeile, die es schlechter kann. */
 
-export type Feldart = 'text' | 'password' | 'number' | 'ordner' | 'zeitpunkt';
+export type Feldart =
+  'text' | 'password' | 'number' | 'ordner' | 'zeitpunkt' | 'mehrzeilig';
 
 export type Dialogfeld = {
   name: string;
@@ -26,6 +27,8 @@ export type Dialogfeld = {
   schalter?: boolean;
   /** Frühester erlaubter Zeitpunkt — nur bei `art: 'zeitpunkt'`. */
   min?: string;
+  /** Wie hoch es aufmacht — nur bei `art: 'mehrzeilig'`. */
+  zeilen?: number;
 };
 
 /** Liest einen Feldwert — nie `undefined`, ein unbekannter Name ergibt „".
@@ -74,7 +77,7 @@ export function dialog(optionen: {
     koerper.appendChild(p);
   }
 
-  const eingaben = new Map<string, HTMLInputElement | Auswahlfeld>();
+  const eingaben = new Map<string, HTMLInputElement | HTMLTextAreaElement | Auswahlfeld>();
 
   (optionen.felder ?? []).forEach(f => {
     // **Ein `<label>` nur dort, wo genau ein Bedienelement darin sitzt.**
@@ -106,6 +109,18 @@ export function dialog(optionen: {
       block.prepend(e);
       titel.remove();
       block.append(titel);
+    } else if (f.art === 'mehrzeilig') {
+      // **Ein `<textarea>`, kein hohes Textfeld.** „Der Ton setzt bei 0:30
+      // aus" passt in eine Zeile; „… und ab 0:47 ist das Bild schwarz, aber
+      // nur in der 4K-Fassung" nicht. Ein einzeiliges Feld schiebt sich dann
+      // waagerecht weg, und beim Absenden sieht man nicht, was dasteht.
+      const e = document.createElement('textarea');
+      e.className = 'feld';
+      e.rows = f.zeilen ?? 4;
+      e.value = f.wert ?? '';
+      if (f.platzhalter) e.placeholder = f.platzhalter;
+      eingaben.set(f.name, e);
+      block.appendChild(e);
     } else if (f.art === 'zeitpunkt') {
       // **Der Wähler des Browsers, nicht ein Textfeld mit Formvorschrift.**
       // Vorher stand dort „Form: 2026-12-24 20:15" als Hinweis — und jeder
@@ -182,6 +197,12 @@ export function dialog(optionen: {
     los.disabled = true;
     const gesammelt = new Map<string, string>();
     eingaben.forEach((e, name) => {
+      // **Vor der Auswahl geprüft.** Die Zeile darunter ist ein Auffangnetz
+      // für alles, was kein `<input>` ist — ein `<textarea>` liefe hinein und
+      // ergäbe `undefined`. Das wäre der stille Fehler: der Dialog schickte
+      // ein leeres Feld los, und der Server antwortete „ohne Beschreibung",
+      // obwohl man sichtbar etwas geschrieben hat.
+      if (e instanceof HTMLTextAreaElement) { gesammelt.set(name, e.value.trim()); return; }
       if (!(e instanceof HTMLInputElement)) { gesammelt.set(name, e.wert); return; }
       gesammelt.set(name, e.type === 'checkbox' ? String(e.checked) : e.value.trim());
     });
@@ -210,17 +231,25 @@ export function dialog(optionen: {
 
   document.body.appendChild(d);
   d.showModal();
+  // **Ein Seitenwechsel nimmt ihn mit.** Alle Dialoge, die sich selbst bauen,
+  // melden sich hier an; `dialog()` tat es als einziger nicht — ein Dialog von
+  // der Detailseite überlebte damit den Zurück-Knopf und stand danach über der
+  // Mediathek.
+  beimSeitenwechselSchliessen(d);
 
-  const erstes = koerper.querySelector<HTMLElement>('input, select');
+  const erstes = koerper.querySelector<HTMLElement>('input, textarea, select');
   erstes?.focus();
 
-  // Enter im Feld bestätigt — ausser im mehrzeiligen Fall, den es hier
-  // nicht gibt.
+  // Enter im Feld bestätigt — im mehrzeiligen Feld macht es eine Zeile, und
+  // abgeschickt wird dort mit Strg bzw. ⌘. Diesen Fall gab es bis jetzt
+  // nicht; der Satz, der hier stand, stimmte deshalb.
   koerper.addEventListener('keydown', e => {
-    if (e.key === 'Enter' && !(e.target as HTMLElement).matches('select')) {
-      e.preventDefault();
-      los.click();
-    }
+    if (e.key !== 'Enter') return;
+    const ziel = e.target as HTMLElement;
+    if (ziel.matches('select')) return;
+    if (ziel.matches('textarea') && !(e.ctrlKey || e.metaKey)) return;
+    e.preventDefault();
+    los.click();
   });
 }
 

web/app/src/icons.ts

@@ -88,6 +88,13 @@ export const icons = {
   /** Schieberegler — Einstellungen, die eine Stufe haben. */
   stufen: rahmen('<path d="M5 7h14M5 17h14"/><circle cx="9.5" cy="7" r="2.3"/>'
     + '<circle cx="15" cy="17" r="2.3"/>'),
+
+  /** Eine Fahne — hier stimmt etwas nicht.
+   *
+   * **Kein Warndreieck.** Dreieck und Rot sind in dieser Oberfläche für das
+   * reserviert, was etwas wegnimmt. Wer meldet, dass ein Plakat nicht passt,
+   * löst keinen Alarm aus. */
+  fahne: rahmen('<path d="M6 21V4"/><path d="M6 4.8h11.6l-2.5 4 2.5 4H6"/>'),
 } as const;
 
 export type IconName = keyof typeof icons;

web/app/src/melden.ts

@@ -0,0 +1,72 @@
+import { meldungAnlegen, type Meldungsart } from './api';
+import { dialog } from './dialog';
+import { hinweisZeigen } from './util';
+
+/** Die Worte für jede Art.
+ *
+ * **An einer Stelle, nicht an zweien.** Der Dialog bietet sie an, die
+ * Verwaltung zeigt sie wieder an — stünden die Wörter zweimal da, hiesse die
+ * eine Liste irgendwann „Angaben" und die andere noch „Daten". */
+export const ARTWORT: Record<Meldungsart, string> = {
+  bild: 'Bild',
+  ton: 'Ton',
+  untertitel: 'Untertitel',
+  daten: 'Angaben',
+  sonstiges: 'Sonstiges',
+};
+
+/** Meldet ein Problem an einem Titel, einer Staffel oder einer Folge.
+ *
+ * **Warum es das gibt.** Wer einen Server für andere betreibt, erfährt von
+ * Fehlern zuletzt: dass die deutsche Tonspur nach einer halben Stunde
+ * aussetzt, merkt der, der den Film sieht, und nicht der, der ihn eingeräumt
+ * hat. Bisher gab es dafür keinen Weg ausser dem Zuruf im Wohnzimmer.
+ *
+ * **Drei Felder, und zwei davon sind freiwillig.** Die Art macht aus einer
+ * Liste von Sätzen etwas, das man sortieren kann; die Stelle macht aus „ab
+ * irgendwann kein Ton" etwas, das man nachstellen kann. Der Kommentar ist das
+ * eigentliche. Pflicht ist nur er.
+ *
+ * @param id Film, Serie oder Folge — welche von dreien, entscheidet der Server.
+ * @param was Was dasteht, damit man im Dialog sieht, worüber man redet.
+ * @param staffel Nur mit einer Serienkennung: eine einzelne Staffel.
+ */
+export function meldedialog(id: string, was: string, staffel?: number): void {
+  dialog({
+    titel: 'Problem melden',
+    text: `Betrifft „${was}“. Der Administrator sieht die Meldung mit deinem `
+      + 'Namen und kann sie abhaken; du siehst unter „Mein Konto“, was daraus '
+      + 'geworden ist.',
+    felder: [
+      {
+        name: 'art', beschriftung: 'Was stimmt nicht?',
+        auswahl: (Object.keys(ARTWORT) as Meldungsart[])
+          .map(a => ({ wert: a, text: ARTWORT[a] })),
+        wert: 'bild',
+      },
+      {
+        name: 'stelle', beschriftung: 'Stelle',
+        platzhalter: '0:34:12',
+        hinweis: 'Leer lassen, wenn es den ganzen Titel betrifft.',
+      },
+      {
+        name: 'text', beschriftung: 'Was ist passiert?',
+        art: 'mehrzeilig',
+        platzhalter: 'Der deutsche Ton setzt nach einer halben Stunde aus, Englisch läuft weiter.',
+      },
+    ],
+    bestaetigen: 'Melden',
+    tun: async wert => {
+      const text = wert('text').trim();
+      // **Hier und nicht erst am Server.** Der Dialog bleibt bei einem Fehler
+      // offen und zeigt den Satz an; einmal hin und zurück über die Leitung
+      // wäre dafür Verschwendung. Der Server prüft es trotzdem.
+      if (text.length === 0) throw new Error('Ohne Beschreibung lässt sich nichts nachsehen.');
+
+      await meldungAnlegen(
+        id, (wert('art') || 'sonstiges') as Meldungsart, text,
+        wert('stelle') || undefined, staffel);
+      hinweisZeigen('Gemeldet. Danke.');
+    },
+  });
+}

web/app/src/style.css

@@ -663,6 +663,15 @@ h2 { font-size: var(--t-abschnitt); font-weight: 700; letter-spacing: -.015em; m
   color: var(--text); outline: none; min-width: 0;
 }
 .feld:focus { border-color: var(--accent); }
+
+/* Ein mehrzeiliges Feld erbt alles vom einzeiligen — ausser dem, was es nur
+   dort gibt. Ohne `font: inherit` nähme der Browser eine Schreibmaschine, und
+   der Dialog hätte plötzlich zwei Schriften. Gezogen wird nur senkrecht:
+   waagerecht hiesse, den Dialog aufzusprengen. */
+textarea.feld {
+  font: inherit; line-height: 1.45;
+  resize: vertical; min-height: 84px;
+}
 .knopfreihe { display: flex; gap: var(--s-snug); flex-wrap: wrap; align-items: center; }
 
 .fehler {
@@ -1466,6 +1475,15 @@ body:has(.pl.pl-klein) .auswahlleiste { bottom: 92px; }
   border-left: 3px solid transparent; border-radius: 0 var(--r-control) var(--r-control) 0;
   font-size: var(--t-normal);
 }
+
+/* Dieselbe Zahl wie in der Hauptleiste, nur in der anderen Leiste: rechts
+   aussen, damit sie nicht am Text klebt, und tabellarisch, damit sie beim
+   Wechsel von 9 auf 10 nicht springt. */
+.verw-eintrag .zahl {
+  margin-left: auto; flex: none;
+  font-size: 11px; font-variant-numeric: tabular-nums; color: var(--text-faint);
+}
+.verw-eintrag.check .zahl { color: var(--accent); }
 .verw-eintrag .icon { flex: none; color: var(--text-muted); }
 .verw-eintrag:hover { color: var(--text); background: rgba(255, 255, 255, .04); }
 .verw-eintrag:hover .icon { color: var(--text-dim); }

web/app/src/views/detail.ts

@@ -11,6 +11,7 @@ import { icons, icon } from '../icons';
 import { kachel, alsKachel, reihe } from '../card';
 import { vergessen } from '../ansichten';
 import { spieler } from '../spieler';
+import { meldedialog } from '../melden';
 
 type Art = 'filme' | 'serien';
 
@@ -186,7 +187,8 @@ export function detailseite(art: Art, id: string, zurueck: () => void): HTMLElem
       text.appendChild(zeile);
     }
 
-    text.appendChild(aktionsreihe(eintrag, stand, datei));
+    text.appendChild(aktionsreihe(eintrag, stand, datei,
+      () => meldedialog(eintrag.id, eintrag.title)));
 
     const beschreibung = document.createElement('p');
     beschreibung.className = 'beschreibung';
@@ -245,7 +247,13 @@ export function detailseite(art: Art, id: string, zurueck: () => void): HTMLElem
     return 'title' in eintrag && eintrag.title ? eintrag.title : 'Wiedergabe';
   }
 
-  function aktionsreihe(eintrag: Film | Serie, stand: Stand | null, datei: Datei | null): HTMLElement {
+  function aktionsreihe(
+    eintrag: Film | Serie, stand: Stand | null, datei: Datei | null,
+    /** **Nur vom Kopfbereich gesetzt.** Dieselbe Reihe steht auch über jeder
+     *  Fassung und über jeder Folge; unbedingt gesetzt stünde der Melden-Knopf
+     *  drei- bis sechsmal auf der Seite und meinte jedes Mal denselben Titel. */
+    melden?: () => void,
+  ): HTMLElement {
     const reihe = document.createElement('div');
     reihe.className = 'aktionen';
     const hinweisfeld = document.createElement('div');
@@ -321,6 +329,20 @@ export function detailseite(art: Art, id: string, zurueck: () => void): HTMLElem
         async () => { await weglegen(eintrag.id); await laden(); }));
     }
 
+    // **Nicht über `rundKnopf`.** Der schaltet sich beim Klick ab und erst im
+    // Fehlerfall wieder an — richtig für etwas, das danach die Seite neu lädt.
+    // Ein Dialog kehrt sofort zurück; der Knopf bliebe für den Rest der Seite
+    // tot.
+    if (melden) {
+      const m = document.createElement('button');
+      m.className = 'rund';
+      m.innerHTML = icons.fahne;
+      m.title = 'Problem melden';
+      m.setAttribute('aria-label', 'Problem melden');
+      m.onclick = melden;
+      reihe.appendChild(m);
+    }
+
     const huelle = document.createElement('div');
     huelle.append(reihe, hinweisfeld);
     return huelle;
@@ -555,9 +577,25 @@ export function detailseite(art: Art, id: string, zurueck: () => void): HTMLElem
     const alle = await folgen(serie.id);
 
     serie.seasons.forEach(nummer => {
+      // **Die Überschrift bekommt eine Zeile.** Eine Staffel ist das Einzige,
+      // was man melden kann und was es als Eintrag nicht gibt — sie ist Serie
+      // plus Nummer. Also hängt der Knopf an ihrer Überschrift.
+      const kopf = document.createElement('div');
+      kopf.className = 'reihe-kopf';
       const h = document.createElement('h2');
       h.textContent = `Staffel ${nummer}`;
-      bereich.appendChild(h);
+
+      const melden = document.createElement('button');
+      melden.className = 'pfeil';
+      melden.style.marginLeft = 'auto';
+      melden.innerHTML = icons.fahne;
+      melden.title = `Problem mit Staffel ${nummer} melden`;
+      melden.setAttribute('aria-label', `Problem mit Staffel ${nummer} melden`);
+      melden.onclick = () => meldedialog(
+        serie.id, `${serie.title} — Staffel ${nummer}`, nummer);
+
+      kopf.append(h, melden);
+      bereich.appendChild(kopf);
 
       const liste = document.createElement('div');
       liste.className = 'einstellungen';
@@ -582,7 +620,22 @@ export function detailseite(art: Art, id: string, zurueck: () => void): HTMLElem
     zeile.innerHTML =
       `<strong>${String(folge.episode).padStart(2, '0')} · ${esc(folge.title ?? 'Ohne Titel')}</strong>`
       + (nebenbei ? `<span class="winzig">${esc(nebenbei)}</span>` : '');
-    block.appendChild(zeile);
+
+    const wie = `S${folge.season} · F${folge.episode}`
+      + (folge.title ? ` — ${folge.title}` : '');
+    const meldenFolge = document.createElement('button');
+    meldenFolge.className = 'rund';
+    meldenFolge.innerHTML = icons.fahne;
+    meldenFolge.title = 'Problem melden';
+    meldenFolge.setAttribute('aria-label', `Problem mit ${wie} melden`);
+    // Die Kennung der Folge allein — welche Serie das ist, weiss sie selbst.
+    meldenFolge.onclick = () => meldedialog(folge.id, wie);
+
+    const oben = document.createElement('div');
+    oben.className = 'knopfreihe';
+    zeile.style.flex = '1';
+    oben.append(zeile, meldenFolge);
+    block.appendChild(oben);
 
     if (folge.overview) {
       const text = document.createElement('div');

web/app/src/views/einstellungen/index.ts

@@ -1,10 +1,10 @@
-import { istAdmin, type Bibliothek } from '../../api';
+import { istAdmin, meldungen, type Bibliothek } from '../../api';
 import { icon, type IconName } from '../../icons';
 import { kontoseite } from './konto';
 import { geschautseite } from './geschaut';
 import { dashboard, serverbereich, speicherbereich } from './uebersicht';
 import { bibliotheksbereich, vermisstenbereich } from './mediatheken';
-import { pruefbereich } from './pruefung';
+import { pruefbereich, meldungsbereich } from './pruefung';
 import { ohneZuordnungBereich, unzugeordnetbereich } from './zuordnung';
 import { wiedergabebereich } from './wiedergabe';
 import { sprachbereich } from './metadaten';
@@ -77,6 +77,9 @@ export function einstellungenseite(
   const wurzel = document.createElement('div');
   wurzel.className = 'verwaltung';
 
+  /** Das Feld für die Zahl offener Meldungen — erst beim Bauen der Leiste da. */
+  let zahl: HTMLElement | null = null;
+
   const leiste = document.createElement('nav');
   leiste.className = 'verw-leiste';
   leiste.setAttribute('aria-label', 'Bereiche der Einstellungen');
@@ -88,6 +91,19 @@ export function einstellungenseite(
   buehne.className = 'verw-buehne';
   inhalt().forEach(a => buehne.appendChild(a));
 
+  // **Die Zahl holt sich nur, wer sie nicht ohnehin hat.** Steht „Zu prüfen"
+  // offen, meldet der Meldungsabschnitt sie selbst — und zwar nach jedem
+  // Abhaken. Sonst eine Anfrage je Seitenaufbau, und nur für Administratoren.
+  //
+  // Verworfen: die Zahl an `/system/info` oder am Konto mitführen. Beide
+  // werden ohnehin geholt, wären also „umsonst" — und wären ab dem ersten
+  // Abhaken falsch.
+  //
+  // Scheitert sie, bleibt es still: ein Abzeichen, das nicht lädt, fehlt eben.
+  if (admin && welcher !== 'pruefung') {
+    void meldungen(false).then(m => abzeichen(m.length)).catch(() => {});
+  }
+
   wurzel.append(leiste, buehne);
   return wurzel;
 
@@ -95,6 +111,12 @@ export function einstellungenseite(
    *
    * „Verwaltung" über den unteren Einträgen sagt ohne weiteren Satz, dass
    * diese dem Server gehören und nicht einem selbst. */
+  /** Die Zahl offener Meldungen auf „Zu prüfen". Leer statt „0": eine Null
+   *  ist Rauschen. */
+  function abzeichen(offen: number): void {
+    if (zahl) zahl.textContent = offen > 0 ? String(offen) : '';
+  }
+
   function gruppe(name: string, eintraege: Eintrag[]): void {
     const kopf = document.createElement('div');
     kopf.className = 'verw-gruppe';
@@ -108,6 +130,11 @@ export function einstellungenseite(
       k.appendChild(icon(b.bild));
       k.append(document.createTextNode(b.text));
       if (b.wert === welcher) k.setAttribute('aria-current', 'page');
+      if (b.wert === 'pruefung') {
+        zahl = document.createElement('span');
+        zahl.className = 'zahl';
+        k.appendChild(zahl);
+      }
       k.onclick = () => { location.hash = `#/einstellungen/${b.wert}`; };
       leiste.appendChild(k);
     });
@@ -123,7 +150,9 @@ export function einstellungenseite(
         // **Die Prüfliste hört auf sich selbst.** Wird etwas freigegeben,
         // ändert sich der Bestand — und die Liste darüber muss nachziehen.
         const p = pruefbereich(() => { geaendert(); p.auffrischen(); });
-        return [p.wurzel];
+        // Zwei Sektionen, nicht eine: die Prüfliste versteckt sich, sobald
+        // nichts auf Freigabe wartet, und nähme die Meldungen sonst mit.
+        return [p.wurzel, meldungsbereich(abzeichen).wurzel];
       }
       case 'zuordnung':
         return [ohneZuordnungBereich(), unzugeordnetbereich()];

web/app/src/views/einstellungen/konto.ts

@@ -1,11 +1,12 @@
 import {
   sitzung, meinKonto, profilbildSetzen, profilbildEntfernen, bildAdresse,
-  spracheSetzen, sprachen, abmelden, type Rolle,
+  spracheSetzen, sprachen, abmelden, meineMeldungen, type Rolle, type Meldung,
 } from '../../api';
-import { esc, knopf, fehlerzeile, meldung, hinweisZeigen } from '../../util';
+import { esc, knopf, fehlerzeile, meldung, hinweisZeigen, dauer } from '../../util';
 import { dialog, nachfragen } from '../../dialog';
 import { icon } from '../../icons';
 import { zuschneiden } from '../../bildzuschnitt';
+import { ARTWORT } from '../../melden';
 
 /** Das eigene Konto: Bild, Name, Sprache — und Abmelden.
  *
@@ -40,7 +41,7 @@ export function kontoseite(): HTMLElement {
     if (sitzung.wer) Object.assign(sitzung.wer, konto);
 
     wurzel.innerHTML = '';
-    wurzel.append(kopf(konto), einstellungen(konto), abmeldeteil());
+    wurzel.append(kopf(konto), einstellungen(konto), meldeteil(), abmeldeteil());
   }
 
   function kopf(konto: Rolle): HTMLElement {
@@ -170,6 +171,73 @@ export function kontoseite(): HTMLElement {
     return bereich;
   }
 
+  /* ---------- Was man selbst gemeldet hat ---------- */
+
+  /** Die eigenen Meldungen — und was daraus geworden ist.
+   *
+   * **Weg, solange es nichts gibt.** Genau umgekehrt zum Abschnitt in der
+   * Verwaltung: dort ist er eine Ablage, die man finden können muss, auch wenn
+   * sie leer ist. Hier ist er eine Quittung. Wer nie etwas gemeldet hat,
+   * braucht keine Überschrift, die ihm das mitteilt.
+   *
+   * **Ohne Aktionen.** Zurückziehen fehlt mit Absicht: die Verwaltung arbeitet
+   * vielleicht schon daran, und eine Meldung, die mitten darin verschwindet,
+   * ist ein Fehler im Fehlermelder.
+   *
+   * **Scheitert das Laden, bleibt es in diesem Abschnitt.** Die Kontoseite ist
+   * die eine Seite, die jeder hat; sie darf nicht an einer Nebensache
+   * zerbrechen. */
+  function meldeteil(): HTMLElement {
+    const bereich = document.createElement('section');
+    bereich.className = 'hidden';
+
+    const h = document.createElement('h2');
+    h.textContent = 'Meine Meldungen';
+
+    const liste = document.createElement('div');
+    liste.className = 'einstellungen';
+    bereich.append(h, liste);
+
+    void meineMeldungen().then(alle => {
+      if (alle.length === 0) return;
+      bereich.classList.remove('hidden');
+      alle.forEach(m => liste.appendChild(zeileFuer(m)));
+    }).catch(() => { /* Ein Abschnitt, der nicht lädt, fehlt eben. */ });
+
+    return bereich;
+
+    function zeileFuer(m: Meldung): HTMLElement {
+      const d = document.createElement('div');
+      d.className = 'einstellung';
+
+      const zustand = m.resolvedAt
+        ? `Erledigt am ${new Date(m.resolvedAt).toLocaleDateString('de-CH', { dateStyle: 'medium' })}`
+        : 'Offen';
+      const nebenbei = [
+        zustand,
+        ARTWORT[m.kind],
+        m.positionSeconds !== null ? `bei ${dauer(m.positionSeconds)}` : null,
+        new Date(m.reportedAt).toLocaleDateString('de-CH', { dateStyle: 'medium' }),
+      ].filter(Boolean) as string[];
+
+      const zeile = document.createElement('div');
+      zeile.className = 'zeile';
+      // Hat ein Administrator den Titel inzwischen zurückgezogen, bleibt die
+      // eigene Meldung stehen — nur ohne Namen.
+      const name = m.title || 'Titel nicht mehr sichtbar';
+      zeile.innerHTML = `<strong>${esc(name)}${m.subTitle ? ` · ${esc(m.subTitle)}` : ''}</strong>`
+        + `<span class="winzig">${nebenbei.map(esc).join(' · ')}</span>`;
+      d.appendChild(zeile);
+
+      const kommentar = document.createElement('div');
+      kommentar.className = 'hinweis';
+      kommentar.textContent = m.comment;
+      d.appendChild(kommentar);
+
+      return d;
+    }
+  }
+
   /* ---------- Abmelden ---------- */
 
   function abmeldeteil(): HTMLElement {

web/app/src/views/einstellungen/pruefung.ts

@@ -1,7 +1,8 @@
 import {
   zuPruefen, veroeffentlichen, zurueckziehen, zurKenntnis, type Pruefeintrag, bildAdresse,
+  meldungen, meldungErledigt, meldungWiederOeffnen, type Meldung,
 } from '../../api';
-import { esc, knopf, fehlerzeile, meldung } from '../../util';
+import { esc, knopf, fehlerzeile, meldung, dauer, leer } from '../../util';
 import { dialog } from '../../dialog';
 import { icons } from '../../icons';
 import { kontextmenue, menueAnZiel, type Menuepunkt } from '../../menue';
@@ -10,6 +11,7 @@ import { zuordnungsdialog } from '../../zuordnung';
 import { titeldialog } from '../../titel';
 import { bearbeiten } from '../../bearbeiten';
 
+import { ARTWORT } from '../../melden';
 import { abschnitt } from './teile';
 
 /** Zu prüfen: was der Scan gefunden hat und noch nicht freigegeben ist. */
@@ -280,6 +282,155 @@ export function pruefbereich(geaendert: () => void): {
   return { wurzel: bereich, auffrischen: () => void laden() };
 }
 
+/* ---------- Meldungen ---------- */
+
+/** Was Benutzer an Titeln gemeldet haben.
+ *
+ * **Warum neben der Prüfliste und nicht darin.** Beides ist Arbeit, die
+ * hereinkommt, und beides wird abgehakt — der Ort ist derselbe. Eine Sektion
+ * ist es trotzdem nicht: die Prüfliste versteckt sich, sobald nichts auf
+ * Freigabe wartet, und das ist der Normalfall. Die Meldungen verschwänden
+ * dann mit ihr.
+ *
+ * **Und dieser Abschnitt bleibt stehen, auch wenn nichts drinsteht.** Genau
+ * umgekehrt zur Prüfliste: die ist ein Nebenprodukt des Scans, und ein leerer
+ * Abschnitt dafür wäre Rauschen. Meldungen sind ein Kanal, den Menschen
+ * benutzen sollen; einer, der verschwindet, solange ihn niemand benutzt hat,
+ * bringt genau niemandem bei, dass es ihn gibt.
+ *
+ * @param gezaehlt Bekommt die Zahl der offenen — für das Abzeichen an der Leiste.
+ */
+export function meldungsbereich(gezaehlt: (offen: number) => void = () => {}): {
+  wurzel: HTMLElement; auffrischen: () => void;
+} {
+  const bereich = document.createElement('section');
+
+  const liste = document.createElement('div');
+  liste.className = 'einstellungen';
+
+  /** Das Archiv wird erst auf Zuruf geholt — es wächst nur. */
+  const archivKopf = document.createElement('div');
+  archivKopf.className = 'pruef-gruppe hidden';
+  archivKopf.innerHTML = '<strong>Erledigt</strong>'
+    + '<span class="winzig">Abgehakt, aber nicht gelöscht — wer wissen will, '
+    + 'was schon einmal gemeldet war, findet es hier.</span>';
+
+  const archiv = document.createElement('div');
+  archiv.className = 'einstellungen hidden';
+  let archivOffen = false;
+
+  const umschalten = knopf('Erledigte zeigen', 'btn');
+  umschalten.onclick = () => {
+    archivOffen = !archivOffen;
+    umschalten.textContent = archivOffen ? 'Erledigte ausblenden' : 'Erledigte zeigen';
+    archivKopf.classList.toggle('hidden', !archivOffen);
+    archiv.classList.toggle('hidden', !archivOffen);
+    if (archivOffen) void archivLaden();
+  };
+
+  bereich.append(abschnitt('Meldungen', [umschalten]), liste, archivKopf, archiv);
+  void laden();
+
+  async function laden(): Promise<void> {
+    if (liste.childElementCount === 0) liste.innerHTML = '<div class="spinner"></div>';
+    try {
+      const offene = await meldungen(false);
+      liste.innerHTML = '';
+      if (offene.length === 0) liste.appendChild(leer('Keine offenen Meldungen.'));
+      else offene.forEach(m => liste.appendChild(meldezeile(m, false)));
+      gezaehlt(offene.length);
+    } catch (fehler) {
+      liste.innerHTML = '';
+      liste.appendChild(fehlerzeile(meldung(fehler)));
+    }
+  }
+
+  async function archivLaden(): Promise<void> {
+    archiv.innerHTML = '<div class="spinner"></div>';
+    try {
+      const erledigte = await meldungen(true);
+      archiv.innerHTML = '';
+      if (erledigte.length === 0) archiv.appendChild(leer('Noch nichts abgehakt.'));
+      else erledigte.forEach(m => archiv.appendChild(meldezeile(m, true)));
+    } catch (fehler) {
+      archiv.innerHTML = '';
+      archiv.appendChild(fehlerzeile(meldung(fehler)));
+    }
+  }
+
+  function meldezeile(m: Meldung, erledigt: boolean): HTMLElement {
+    const d = document.createElement('div');
+    d.className = 'einstellung pruefzeile';
+
+    const bild = document.createElement('div');
+    bild.className = 'pruef-bild';
+    const adresse = bildAdresse(m.posterImage);
+    if (adresse) {
+      const img = document.createElement('img');
+      img.src = adresse; img.alt = ''; img.loading = 'lazy';
+      bild.appendChild(img);
+    }
+
+    const text = document.createElement('div');
+    text.className = 'zeile';
+    text.style.flex = '1';
+    // Ein zurückgezogener Titel hat hier keinen Namen mehr — die Meldung
+    // bleibt trotzdem stehen.
+    const name = m.title || 'Titel nicht mehr sichtbar';
+    const nebenbei = [
+      ARTWORT[m.kind],
+      m.positionSeconds !== null ? `bei ${dauer(m.positionSeconds)}` : null,
+      m.reportedBy ? `von ${m.reportedBy}` : null,
+      new Date(m.reportedAt).toLocaleString('de-CH', { dateStyle: 'medium', timeStyle: 'short' }),
+    ].filter(Boolean) as string[];
+
+    text.innerHTML = `<strong>${esc(name)}${m.subTitle ? ` · ${esc(m.subTitle)}` : ''}</strong>`
+      + `<span class="winzig">${nebenbei.map(esc).join(' · ')}</span>`;
+
+    const oben = document.createElement('div');
+    oben.className = 'knopfreihe';
+    oben.append(bild, text);
+
+    // **Zum Titel, wenn es ihn noch gibt.** Die Kennung zeigt bei Folge und
+    // Staffel auf die Serie — dort steht die Detailseite.
+    if (m.title) {
+      const hin = knopf('Zum Titel', 'btn');
+      hin.onclick = () => {
+        location.hash = `#/${m.target === 'movie' ? 'filme' : 'serien'}/${m.itemId}`;
+      };
+      oben.appendChild(hin);
+    }
+
+    const schalter = knopf(erledigt ? 'Wieder öffnen' : 'Erledigt',
+      erledigt ? 'btn' : 'btn btn-primary');
+    schalter.onclick = async () => {
+      schalter.disabled = true;
+      try {
+        if (erledigt) await meldungWiederOeffnen(m.id); else await meldungErledigt(m.id);
+        await laden();
+        if (archivOffen) await archivLaden();
+      } catch (fehler) {
+        schalter.disabled = false;
+        d.appendChild(fehlerzeile(meldung(fehler)));
+      }
+    };
+    oben.appendChild(schalter);
+    d.appendChild(oben);
+
+    // **Der Kommentar steht ganz da.** Das Einzige an einer Meldung, was ein
+    // Mensch von Hand geschrieben hat, abzuschneiden hiesse, den Sinn der
+    // Übung wegzukürzen.
+    const kommentar = document.createElement('div');
+    kommentar.className = 'hinweis';
+    kommentar.textContent = m.comment;
+    d.appendChild(kommentar);
+
+    return d;
+  }
+
+  return { wurzel: bereich, auffrischen: () => void laden() };
+}
+
 /* ---------- Protokolle ---------- */
 
 /** Eine Datei je Tag, lesbar ohne Verbindung auf das NAS.