Die Weboberfläche — im Zuschnitt von Plex, vom Server selbst ausgeliefert

Einrichtung, Anmeldung, Mediathek, Detailseite mit Abspielen und
Herunterladen, Zuordnung korrigieren, Verwaltung. Die Oberfläche aus der
Jellyfin-Zeit ist dabei vollständig ersetzt: `types.ts`, `prefs.ts`,
`contrast.ts`, `views/cards.ts`, `views/player.ts` und `views/settings.ts`
sprachen Jellyfins Schnittstelle und hatten hier nichts mehr zu suchen.

Seitenleiste links, waagerechte Reihen auf der Startseite, Plakate im
Verhältnis 2:3, unscharfer Hintergrund hinter dem Kopf der Detailseite —
das ist der Zuschnitt von Plex, weil er gefällt. **Die Farbe bleibt Flaros
Orchidee**, nicht Plex' Orange; der Aufbau ist das Vorbild, nicht das
Aussehen.

Welche Bibliothek gezeigt wird, entscheidet die Seitenleiste. Eine zweite
Umschaltung innerhalb der Seite wäre dieselbe Entscheidung an zwei Orten.

---

**Der Zugang liegt jetzt auch in einem Cookie.** Ein `<img>`, ein `<video>`
und ein Download-Link senden keine eigenen Kopfzeilen — eine App kann ihr
Token in jede Anfrage legen, ein Browser nicht. Das Token stattdessen in
die Adresse zu schreiben wäre der naheliegende Ausweg und stünde danach in
jedem Zugriffsprotokoll, in jedem Verlauf und in jedem weitergegebenen
Link.

`HttpOnly`, damit kein eingeschlichenes Skript herankommt. `SameSite=Strict`
gegen Anfragen von fremden Seiten. `Secure` nur über https — sonst liesse
sich die Oberfläche im Heimnetz über http gar nicht benutzen. Die Apps
benutzen weiterhin die Kopfzeile: ein zweiter Weg zum selben Token, kein
zweites Verfahren.

---

**Der Fehler, den erst der echte Container zeigte:** eine weisse Seite,
ohne Hinweis worauf.

Die Rückfallregel verlangt für jede Anfrage ohne eigenen Endpunkt einen
angemeldeten Benutzer, und `/assets/index.js` hat keinen. Die statischen
Dateien standen unter `UseAuthorization` — ein neuer Besucher bekam 401 auf
genau das Skript, das ihm die Anmeldemaske zeichnen sollte. `/` kam durch,
weil der SPA-Rückfall `AllowAnonymous` trägt; alles mit Dateiendung nicht.
Jetzt liegen sie davor. Mit Prüfung.

Beim Bau desselben Images der zweite: seit der Kontext die Projektwurzel
ist, überschrieb `COPY server/` die `obj/`-Verzeichnisse aus dem Container
mit denen vom Arbeitsrechner — die zeigen auf osx-arm64, gebaut wird
linux-arm64, `dotnet publish` brach mit NETSDK1047 ab. Dafür gibt es jetzt
eine `.dockerignore` in der Wurzel; die unter `server/` sucht Docker seit
dem Umzug nicht mehr.

---

Vier Prüfungen schlugen danach fehl, und zwar zu Recht: sie hiessen „ohne
Anmeldung gibt es nichts", benutzten aber den Client, der nach dem Anmelden
ein Cookie hält. Sie prüften also den Angemeldeten. Jetzt sagen sie
ausdrücklich, dass sie ohne Zugang fragen.

313 Tests grün. Im Container nachgewiesen: Anmelden, Plakate, Abspielen,
Staffeln und Folgen, Verwaltung — und ein Neuladen auf `/verwaltung`, das
nicht in einem 404 endet.

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

server/README.md

@@ -65,10 +65,34 @@ in Software; das ist langsamer, aber es läuft. **Zum blossen Umpacken wird gar
 keine Hardware gebraucht**, und das ist der Weg, der den meisten Beständen
 hilft.
 
+## Weboberfläche
+
+Der Server liefert sie selbst aus, unter derselben Adresse wie die
+Schnittstelle. Kein Proxy davor, kein CORS, kein Mischmasch aus http und
+https. Gebaut wird sie im Image mit; wer nur an ihr arbeitet, nimmt Vite:
+
+```bash
+cd ../web/app
+npm install
+FLARO_SERVER=http://localhost:18080 npm run dev   # auf http://localhost:5173
+```
+
+Vite reicht `/api` an den Server weiter, damit die Herkunft dieselbe bleibt
+wie im Betrieb.
+
+**Der Zugang liegt in einem Cookie, nicht nur in der Kopfzeile.** Ein
+`<img>`, ein `<video>` und ein Download-Link senden keine eigenen
+Kopfzeilen; das Token stattdessen in die Adresse zu schreiben hiesse, es in
+jedes Zugriffsprotokoll und jeden weitergegebenen Link zu setzen. Das Cookie
+ist `HttpOnly` und `SameSite=Strict`, `Secure` nur über https — sonst liesse
+sich die Oberfläche im Heimnetz gar nicht benutzen. Die Apps benutzen
+weiterhin die Kopfzeile: ein zweiter Weg zum selben Token, kein zweites
+Verfahren.
+
 ## Entwickeln
 
 ```bash
-dotnet test                       # 293 Tests
+dotnet test                       # 313 Tests
 dotnet run --project src/Flaro.Api # auf http://localhost:5000
 ```
 
@@ -76,8 +100,14 @@ Ohne gesetzte Variablen legt der Server `data/`, `cache/` und `transcode/`
 neben dem Programm an.
 
 ```bash
-# Image bauen, beide Architekturen
-docker buildx build --platform linux/amd64,linux/arm64 -t flaro:dev .
+# Image bauen, beide Architekturen.
+# **Aus der Wurzel des Projekts**, nicht aus server/: der Bau braucht
+# web/app für die Oberfläche.
+cd .. && docker buildx build --platform linux/amd64,linux/arm64 \
+    -f server/Dockerfile -t flaro:dev .
+
+# Ein lokaler Server mit Beispielmedien zum Ausprobieren
+Tools/demo-medien.sh && docker compose -f server/docker-compose.local.yml up -d --build
 
 # Eine Migration nach einer Modelländerung
 dotnet ef migrations add <Name> --project src/Flaro.Data --startup-project src/Flaro.Api --output-dir Migrations