Ein Knopf, der nichts tut, ist schlimmer als keiner

Der geplante Film zeigte weiter „Abspielen" und „Herunterladen", und wer
drückte, bekam „Dieser Titel ist ab dem 6.10. um 18 Uhr verfügbar". Die
Sperre im Server war richtig; die Oberfläche wusste nur nichts davon.

Gemessen: die Liste führte `PublishAt` seit jeher mit, die Einzelabfrage
`GET /api/v1/movies/{id}` nicht — und die Detailseite entscheidet genau
daran. `publishAt` kam also immer als `null` an, die Prüfung lief ins
Leere. Dasselbe fehlte bei `GET /api/v1/series/{id}` und bei den Folgen.

Jetzt steht dort, wo sonst der Knopf stünde: „Bald ist es soweit", mit
dem Termin darunter. Kein Versprechen, das beim Klicken zurückgenommen
wird.

Der Test prüfte bisher nur die Liste — darum fiel es nicht auf. Er fragt
jetzt die Detailseite und schlägt ohne die Korrektur fehl.

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

web/app/src/api.ts

@@ -87,6 +87,8 @@ export type Folge = {
   id: string; season: number; episode: number;
   title: string | null; overview: string | null; stillImage: string | null; files: Datei[];
   state: Stand | null;
+  /** Wann sie freigegeben ist. Liegt das in der Zukunft, gibt es sie noch nicht. */
+  publishAt?: string | null;
 };
 
 /** Eine Kachel in „Weiterschauen" oder „Nächste Folge" — Film wie Folge. */

web/app/src/style.css

@@ -1644,11 +1644,13 @@ body:has(.auswahlleiste:not(.hidden)) .hinweise { bottom: 104px; }
 .pruef-gruppe strong { font-size: 14px; }
 .pruef-gruppe .winzig { flex: 1 1 240px; }
 
-/* „Verfügbar ab …" steht dort, wo sonst Abspielen stünde. */
+/* Steht dort, wo sonst Abspielen stünde — kein Knopf, der nichts tut. */
 .verfuegbar-ab {
-  display: inline-flex; align-items: center; gap: var(--s-snug);
-  padding: 10px 16px; border-radius: var(--r-control);
+  display: inline-flex; align-items: center; gap: var(--s-regular);
+  padding: 10px 18px; border-radius: var(--r-control);
   background: var(--raised); border: 1px solid var(--line);
-  font-size: 14px; font-weight: 600; color: var(--text-dim);
 }
-.verfuegbar-ab .icon svg { width: 18px; height: 18px; }
+.verfuegbar-ab .icon svg { width: 22px; height: 22px; color: var(--accent); }
+.verfuegbar-text { display: flex; flex-direction: column; line-height: 1.3; }
+.verfuegbar-text strong { font-size: 14px; }
+.verfuegbar-text span { font-size: 13px; color: var(--text-dim); }

web/app/src/views/detail.ts

@@ -251,9 +251,18 @@ export function detailseite(art: Art, id: string, zurueck: () => void): HTMLElem
     if (nochNicht) {
       const hinweisZeile = document.createElement('div');
       hinweisZeile.className = 'verfuegbar-ab';
-      hinweisZeile.append(icon('uhr'), document.createTextNode(
-        `Verfügbar ab ${geplantAb!.toLocaleString('de-CH',
-          { dateStyle: 'long', timeStyle: 'short' })}`));
+
+      const text = document.createElement('div');
+      text.className = 'verfuegbar-text';
+      const oben = document.createElement('strong');
+      oben.textContent = 'Bald ist es soweit';
+      const unten = document.createElement('span');
+      unten.textContent = `Ab ${geplantAb!.toLocaleString('de-CH',
+        { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric',
+          hour: '2-digit', minute: '2-digit' })} Uhr`;
+      text.append(oben, unten);
+
+      hinweisZeile.append(icon('uhr'), text);
       reihe.appendChild(hinweisZeile);
     }
 
@@ -585,7 +594,8 @@ export function detailseite(art: Art, id: string, zurueck: () => void): HTMLElem
         block.appendChild(welche);
       }
       block.appendChild(aktionsreihe(
-        { ...({} as Film), id: folge.id, files: folge.files } as Film, folge.state, datei));
+        { ...({} as Film), id: folge.id, files: folge.files,
+          publishAt: folge.publishAt ?? null } as Film, folge.state, datei));
     });
     return block;
   }