Messenger / Workspace Split — Konzept

Das Problem

Prilog hat heute eine UI fuer alle Benutzertypen. Mitarbeiter, Eltern und Schueler sehen dieselbe App — mit versteckten Tabs und ausgeblendeten Hubs. Das fuehrt zu:

Leerer Sidebar fuer Eltern (nur Spaces, keine Hubs)
Versteckten Tabs die sich kaputt anfuehlen statt aufgeraeumt
Berechtigungsfehler wenn Eltern versehentlich auf Endpoints zugreifen
Ueberforderte Eltern die eine Workspace-App sehen obwohl sie nur chatten wollen
Dauerhaftes Flickwerk bei jedem neuen Feature (muss fuer alle Modi getestet werden)

Die Loesung: Zwei UI-Modi, ein Codebase

┌─────────────────────────────────────────────────────────┐
│                     PRILOG APP                           │
│                                                          │
│    ┌──────────────────┐    ┌──────────────────────────┐  │
│    │                  │    │                          │  │
│    │    MESSENGER     │    │       WORKSPACE          │  │
│    │                  │    │                          │  │
│    │  Eltern          │    │  Mitarbeiter             │  │
│    │  Schueler        │    │  Lehrkraefte             │  │
│    │                  │    │  Verwaltung              │  │
│    │  Flache Liste    │    │  Schulleitung            │  │
│    │  Vollbild-Chat   │    │                          │  │
│    │  Karten statt    │    │  Sidebar + Hubs          │  │
│    │  Tabs            │    │  Tabs + Module           │  │
│    │                  │    │  Kalender + DMS          │  │
│    │                  │    │  Aufgaben + Workflows    │  │
│    └──────────────────┘    └──────────────────────────┘  │
│                                                          │
│    Entscheidung: contactVisibility des UserTypes         │
│    tenant-wide → Workspace                               │
│    space-only  → Messenger                               │
└─────────────────────────────────────────────────────────┘

Wer bekommt was?

Kriterium	Messenger	Workspace
UserType contactVisibility	`space-only`	`tenant-wide`
Typische Benutzer	Eltern, Schueler, externe Gaeste	Lehrkraefte, Verwaltung, Schulleitung
Hosting	Light + Pro	Light + Pro
Entscheidung	Automatisch via UserType	Automatisch via UserType

Die Entscheidung welcher Modus gezeigt wird basiert auf einem einzigen Wert: contactVisibility des UserTypes. Kein manuelles Konfigurieren, kein Feature-Hiding.

Messenger-Modus: Was Eltern sehen

Layout

┌─────────────────────────────────────────────────┐
│  Prilog                    [Profil] [Abmelden]  │
│─────────────────────────────────────────────────│
│                                                  │
│  🔴 Kind abwesend melden                        │  ← Feste Aktion, immer oben
│                                                  │
│  ┌────────────────────────────────────────────┐  │
│  │ 📌 Klasse 3a Eltern                    2  │  │  ← Unread Badge
│  │     Brief: Wandertag am 15. Mai            │  │  ← Letzter Brief/Nachricht
│  │     Frist: 10. Mai — Noch nicht beantwortet│  │
│  ├────────────────────────────────────────────┤  │
│  │ 💬 Elternbeirat                            │  │
│  │     Frau Mueller: Danke fuer die Info      │  │  ← Letzte Chat-Nachricht
│  ├────────────────────────────────────────────┤  │
│  │ 📋 Mitteilung: Leon                        │  │  ← Mitteilungsheft-Badge
│  │     Neue Mitteilung von Frau Weber         │  │
│  └────────────────────────────────────────────┘  │
│                                                  │
│  ┌────────────────────────────────────────────┐  │
│  │ ⚙ Einstellungen                           │  │
│  └────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────┘

Tap auf einen Space → Vollbild

┌─────────────────────────────────────────────────┐
│  ← Klasse 3a Eltern                     [Info] │
│─────────────────────────────────────────────────│
│                                                  │
│  ┌──────────────────────────────────────────┐   │
│  │ 📌 BRIEF: Wandertag am 15. Mai          │   │  ← Brief als Karte IM Chat
│  │                                           │   │
│  │ Liebe Eltern, am 15. Mai findet...       │   │
│  │                                           │   │
│  │ [  Ja, mein Kind nimmt teil  ]            │   │  ← Antwort-Buttons
│  │ [  Nein                      ]            │   │
│  └──────────────────────────────────────────┘   │
│                                                  │
│  Frau Mueller: Bitte denken Sie an die...       │
│                                                  │
│  ┌──────────────────────────────────────────┐   │
│  │ 📊 UMFRAGE: Wann passt der Elternabend? │   │
│  │ ○ Dienstag 18:00                         │   │
│  │ ● Mittwoch 19:00  ✓                      │   │
│  │ ○ Donnerstag 18:30                       │   │
│  └──────────────────────────────────────────┘   │
│                                                  │
│  ┌───────────────────────────────────┐  [Send]  │
│  │ Nachricht schreiben...            │          │
│  └───────────────────────────────────┘          │
└─────────────────────────────────────────────────┘

Kernprinzipien Messenger

Keine Sidebar, keine Hubs, keine Tabs — alles ist eine flache Liste
Briefe und Umfragen erscheinen als Karten im Chat-Strom — kein separater Tab
Abwesenheit melden ist ein Top-Level-Button — nicht in einem Space versteckt
Mitteilungsheft ist ein eigener Eintrag in der Space-Liste (pro Kind)
Einstellungen sind minimal — Profil, Passwort, Kontrast. Kein Setup.
Vollbild-Chat beim Tap auf einen Space — maximaler Platz fuer Inhalt
Mobile-first — das Layout funktioniert identisch auf Desktop und Handy

Was der Messenger NICHT hat

Keine Sidebar mit Hub-Navigation
Keine Tab-Leiste im Space (Chat, Dateien, Aufgaben...)
Keine Dateiverwaltung (DMS)
Keine Aufgaben-Boards
Keine Kalender-Ansicht
Kein Konzept-Framework
Keine Workflow-Automatisierung
Keinen Space erstellen / bearbeiten / loeschen
Keinen Nutzer einladen

Was der Messenger HAT

Chat (Nachrichten lesen + schreiben)
Briefe/Umfragen/Formulare beantworten (als Karten im Chat)
Kind abwesend melden (Top-Level-Aktion)
Mitteilungsheft lesen + antworten
Profil bearbeiten (Name, Bild, Passwort)
Kontrast-Einstellung

Workspace-Modus: Was Mitarbeiter sehen

Bleibt wie heute — Sidebar, Hubs, Tabs, Module, voller Funktionsumfang. Keine Aenderung am bestehenden Layout.

Technische Umsetzung

Entscheidungspunkt

Beim Login / Bootstrap:

typescript

// Nach /permissions/me Response:
const userTypeKey = permissions.userTypeKey;
const visibilityMatrix = permissions.visibilityMatrix;

// Messenger wenn: UserType hat hub_contacts === false
// (= space-only, = Eltern/Schueler)
const isMessengerMode = userTypeKey
  && visibilityMatrix?.[userTypeKey]?.hub_contacts === false;

Shell-Layout Wechsel

App.tsx
  │
  ├── isMessengerMode === true
  │   └── <MessengerShell />
  │       ├── SpaceList (flach, mit Badges)
  │       ├── AbsenceButton (fix oben)
  │       └── ChatView (Vollbild, mit Brief-Karten)
  │
  └── isMessengerMode === false
      └── <WorkspaceShell />   (= heutiges Layout)
          ├── AppSidebar
          ├── SpaceView
          └── SpaceSidePanel

Neue Komponenten

Komponente	Aufgabe
`MessengerShell`	Top-Level Layout fuer Messenger-Modus
`MessengerSpaceList`	Flache Space-Liste mit Previews + Badges
`MessengerChatView`	Vollbild-Chat mit eingebetteten Brief-Karten
`MessengerAbsenceButton`	"Kind abwesend melden" — fix oben
`MessengerSettings`	Minimale Einstellungen (Profil, Passwort, Kontrast)
`PostCard`	Brief/Umfrage/Formular als Karte im Chat-Strom

Bestehende Komponenten die wiederverwendet werden

Komponente	Verwendet in
Chat-Bubbles, Nachrichten-Rendering	MessengerChatView
ResponseForm (Ja/Nein, Abstimmung)	PostCard
FormFiller (Formular ausfuellen)	PostCard
ProfileSection (Name, Avatar)	MessengerSettings
ChangePassword	MessengerSettings
ContrastSettings	MessengerSettings
AbsencePanel (Report-Formular)	MessengerAbsenceButton

Briefe als Chat-Karten

Der wichtigste UX-Unterschied: Briefe erscheinen nicht in einem separaten Tab, sondern als spezielle Nachrichten im Chat-Strom.

Technisch:

Beim Laden des Chats: auch GET /spaces/:id/posts laden
Posts als PostCard-Komponenten zwischen den Chat-Nachrichten einblenden
Sortierung: nach createdAt, gemischt mit Chat-Nachrichten
Angepinnte Posts: oben fixiert (wie heute, aber als Karte)

typescript

// Im MessengerChatView:
const chatMessages = useChatMessages(spaceId);
const posts = usePosts(spaceId);

// Beide Streams mergen und nach Datum sortieren
const feed = mergeByDate([
  ...chatMessages.map(m => ({ type: 'message', date: m.timestamp, data: m })),
  ...posts.map(p => ({ type: 'post', date: p.createdAt, data: p })),
]);

Umsetzungsplan

Phase 1: MessengerShell (Grundgeruest)

MessengerShell mit Space-Liste
Routing-Weiche in App.tsx basierend auf hub_contacts
Minimale Settings (Profil + Passwort + Kontrast)
~3-4 Tage

Phase 2: MessengerChatView (Vollbild-Chat)

Chat-Rendering im Vollbild (ohne Sidebar/Tabs)
Navigation: Zurueck-Pfeil → Space-Liste
~2-3 Tage

Phase 3: PostCards (Briefe im Chat)

Brief/Umfrage/Formular als Karten im Chat-Strom
Antwort-Buttons direkt auf der Karte
Fortschritts-Info fuer den Autor (nur bei Mitarbeitern)
~3-4 Tage

Phase 4: Abwesenheit + Mitteilungsheft

"Kind abwesend melden" als Top-Level-Button
Mitteilungsheft als eigener Eintrag in der Space-Liste
~2-3 Tage

Phase 5: Polish + Mobile

Animationen, Uebergaenge
PWA-Optimierung fuer den Messenger-Modus
Push-Notification-Badges
~2-3 Tage

Gesamt: ~12-17 Tage

Was sich NICHT aendert

Backend: Keine Aenderungen. Alle Endpoints bleiben gleich.
Workspace-Modus: Keine Aenderungen. Mitarbeiter merken nichts.
Datenmodell: Keine Aenderungen. Briefe, Abwesenheiten, Mitteilungsheft bleiben.
Berechtigungen: Werden einfacher — der Messenger ruft nur Endpoints auf die GUEST darf.
Module-System: Bleibt. Der Messenger nutzt Chat + Letters + Absence + Notebook.

Das Ergebnis

Vorher:
  Eltern oeffnen Prilog → sehen Workspace mit leerer Sidebar,
  versteckten Tabs, 403-Fehlern → "Was soll ich hier?"

Nachher:
  Eltern oeffnen Prilog → sehen ihre Klassen-Chats,
  antworten auf einen Brief, melden Kind krank → fertig in 30 Sekunden.

Der Messenger ist nicht weniger als der Workspace — er ist ein anderes Produkt fuer eine andere Zielgruppe, aus derselben Codebase.

Messenger / Workspace Split — Konzept ​

Das Problem ​

Die Loesung: Zwei UI-Modi, ein Codebase ​

Wer bekommt was? ​

Messenger-Modus: Was Eltern sehen ​

Layout ​

Tap auf einen Space → Vollbild ​

Kernprinzipien Messenger ​

Was der Messenger NICHT hat ​

Was der Messenger HAT ​

Workspace-Modus: Was Mitarbeiter sehen ​

Technische Umsetzung ​

Entscheidungspunkt ​

Shell-Layout Wechsel ​

Neue Komponenten ​

Bestehende Komponenten die wiederverwendet werden ​

Briefe als Chat-Karten ​

Umsetzungsplan ​

Phase 1: MessengerShell (Grundgeruest) ​

Phase 2: MessengerChatView (Vollbild-Chat) ​

Phase 3: PostCards (Briefe im Chat) ​

Phase 4: Abwesenheit + Mitteilungsheft ​

Phase 5: Polish + Mobile ​

Was sich NICHT aendert ​

Das Ergebnis ​