Rework MischLabs into service dashboard

Brain.md

@@ -3,12 +3,15 @@
 ## Projektziel
 Eine ansprechende Landing Page fuer mischlabs.de, die alle Dienste als Kacheln mit direkten Verlinkungen anzeigt. Laeuft als Docker-Container und wird ueber Git auto-deployed.
 
+Aktueller Stand: Die Seite ist keine reine Linkliste mehr, sondern ein kompaktes Service-Dashboard mit Kategorien, Suche, Hintergrund-Statuscheck und PWA-Unterstuetzung.
+
 ## Status
 - [x] Git-Repo initialisiert und Remote verbunden (https://git.mischlabs.de/MrDiderot/mischlabs.git)
 - [x] Dienste-Liste vom Screenshot erfasst (9 Services inkl. MiChess)
 - [x] Landing Page Design und Implementierung (index.html + style.css)
 - [x] Docker-Setup (Dockerfile, docker-compose.yml, nginx.conf)
 - [x] PWA-Grundlage fuer iOS/Home-Screen-Installation
+- [x] Dashboard v2 mit Kategorien, Suche und Live-Statusindikatoren
 - [x] Push zum Remote
 - [x] MiChess-Kachel hinzugefuegt (Commit lokal, Push steht aus wg. Auth-Fehler)
 - [ ] Push des MiChess-Commits (Git-Auth-Token erneuern)
@@ -32,7 +35,7 @@ Eine ansprechende Landing Page fuer mischlabs.de, die alle Dienste als Kacheln m
 | 8 | tom.mischlabs.de | Persoenliche Seite | #ec4899 (Pink) |
 
 ## Technische Entscheidungen
-- **Reines HTML + CSS mit minimalem PWA-JS** (kein Framework) - maximale Performance, minimales Docker-Image
+- **Reines HTML + CSS mit minimalem Dashboard-/PWA-JS** (kein Framework) - maximale Performance, minimales Docker-Image
 - **nginx:alpine** als Base-Image - extrem leichtgewichtig (~5MB)
 - **Google Fonts (Inter)** fuer moderne Typografie
 - **Inline SVG Icons** - keine externen Dependencies
@@ -40,6 +43,8 @@ Eine ansprechende Landing Page fuer mischlabs.de, die alle Dienste als Kacheln m
 - **Dark Theme** mit subtilen Glow-Effekten
 - **Staggered Animations**: Kacheln faden nacheinander ein (9 Stueck)
 - **PWA**: Manifest, Apple-Touch-Icon, App-Icons und Service Worker fuer installierbare iOS/Web-App
+- **Dashboard**: Kategorien `Zugang`, `Medien`, `Arbeit`, `Persoenlich`, Suche und clientseitige no-cors Statuschecks
+- **Auth-Link**: Zeigt auf die Keycloak Account Console (`/realms/mischlabs/account`), nicht mehr auf die Admin-Konsole
 
 ## Docker-Setup
 - **Container-Name**: `mischlabs`
@@ -53,6 +58,8 @@ Eine ansprechende Landing Page fuer mischlabs.de, die alle Dienste als Kacheln m
 mischlabs/
   index.html          - Haupt-HTML mit allen 9 Service-Kacheln
   style.css           - Komplettes Styling (Dark Theme, Grid, Animationen)
+  app.js              - Suche, Filter, Statuschecks, Service-Worker-Registrierung
+  offline.html        - Offline-Fallback fuer installierte PWA
   manifest.webmanifest - PWA-Metadaten fuer installierbare App
   sw.js               - Schlanker Service Worker mit App-Shell-Cache
   icons/              - App-Icons fuer iOS/PWA
@@ -98,8 +105,19 @@ mischlabs/
   - `icons/icon-512.png` (512x512)
   - `icons/maskable-512.png` (512x512, maskable)
 - Service Worker:
-  - Cache-Name: `mischlabs-pwa-v1`
-  - Cached die App-Shell (`/`, `index.html`, `style.css?v=8`, Manifest und Icons)
-  - Navigationen fallen offline auf `index.html` zurueck
+  - Cache-Name: `mischlabs-pwa-v3`
+  - Cached die App-Shell (`/`, `index.html`, `offline.html`, `style.css?v=9`, `app.js?v=1`, Manifest und Icons)
+  - Navigationen fallen offline auf `offline.html` zurueck
 - Dockerfile kopiert Manifest, Service Worker und Icons in das Nginx-Image.
-- `nginx.conf` liefert `manifest.webmanifest` mit `application/manifest+json` und `sw.js` mit `no-cache` aus.
+- `nginx.conf` liefert `manifest.webmanifest` mit `application/manifest+json` und `sw.js` mit harten No-Cache-Headern aus.
+
+## Dashboard-v2-Stand 2026-05-21
+- Neues Logo oben nutzt `icons/app-icon-source.png`.
+- Die alte oeffentliche Auth-Kachel wurde auf die Keycloak Account Console umgebogen:
+  `https://auth.mischlabs.de/realms/mischlabs/account`
+- Kategorien:
+  - Zugang: SSO, Drive, Passwords
+  - Medien: Movies, Audiobooks, Books
+  - Arbeit: Git, MiChess
+  - Persoenlich: Tom
+- `app.js` prueft Dienste im Hintergrund per `fetch(..., { mode: "no-cors" })`. Das ist bewusst nur ein Erreichbarkeitsindikator, kein vollwertiges Monitoring.