# ifaa TeamDialog Mobile-first Unternehmens-Chat-Prototyp im sachlichen ifaa-inspirierten Stil mit lokalem Onboarding, Demo-Login, Einzel-/Gruppenchats, Admin-Pflege, Punkte-Dashboard und Hash-Routing. ## Masterplan - **Vision:** Ein leichtgewichtiger interner Teamdialog für Unternehmenskommunikation, Abteilungsabstimmungen, Leitungskreise, Workshops und Aufgabenkommunikation. - **Zielnutzer:** Mitarbeitende mit lokalem Profil sowie Demo-Admins/Leitungspersonen, die Benutzer, To-dos und Abteilungspunkte im Browser pflegen. - **Value Proposition:** Statische App ohne Build-Schritt: Profil, Chats, Kontakte, To-dos, Punkte und Dark Mode bleiben per `localStorage` erhalten. - **Produktfokus:** Einmalige Profilanlage oder lokale Demo-Anmeldung, danach geschützte Chat-Shell mit Chatübersicht, Chatraum, Chat-Erstellung, Dashboard, Profil und Admin-Seiten. - **Demo-Charakter:** Keine echte Server-Synchronisation, keine produktive Authentifizierung, keine verschlüsselte Passwortspeicherung; alle Daten sind lokale Browserdaten. ## Tech Stack & Architecture - **Runtime:** Reine statische Browser-App über `index.html`; kein Bundler, kein JSX-Compiler, keine Package-Installation. - **CDNs in `index.html`:** - Tailwind CDN für Utility-First Styling. - React `19.2.0`, React DOM `19.2.0/client`, React Router DOM `7.13.0`, Lucide Icons und `htm` via `esm.sh`. - GenMB Auth SDK ist injiziert (`window.genmb.auth`), aber aktuell nicht in Guards, Profilanlage oder Logout integriert. - **Rendering:** Kein JSX. Alle Komponenten nutzen `html` aus `src/jsx.js`, gebunden mit `htm.bind(React.createElement)`. - Komponenten: `<${Component} prop=${value} />` - Fragments: `<${React.Fragment}>…` - Events: `onClick`, `onInput`, `onSubmit`, `onChange` - Listen immer mit stabilem `key=${...}`. - **Entry Point:** `src/main.js` setzt bei leerem Hash `#/start` und rendert `` in `#root`. - **Provider:** `src/mainProviders.js` ist aktuell nur ein neutraler Wrapper (`

{children}

`), aber der zentrale Ort für spätere globale Provider. - **Routing:** `HashRouter` in `src/App.js`, damit statisches Hosting ohne Server-Rewrites funktioniert. - Öffentlich: `#/start` - Profilgeschützt: `#/chats`, `#/chats/:chatId`, `#/new`, `#/dashboard`, `#/admin-todos`, `#/admin-users`, `#/profile` - Index `#/` redirectet nach `/start`; unbekannte Routen landen in `src/pages/NotFound.js`. - **Zugangsschutz:** `RequireProfile` in `src/App.js` prüft ausschließlich `profile` aus `useChatStore`. Ohne Profil Redirect nach `/start`. - Es gibt keine echte Rollenprüfung; Admin-Seiten sind nur durch das Profil-Gate geschützt. - `Layout.js` meldet lokal ab via `logoutLocal()` und navigiert nach `/start`. - **Theme:** `ThemeGate` in `src/App.js` toggelt `document.documentElement.classList` anhand `darkMode`. - **State & Persistenz:** Zentraler Zustand in `src/store/useChatStore.js`, lokal persistiert. - Persistierte Domänen: `profile`, `contacts`, `chats`, `darkMode`, `departmentScores`, `pointActivities`, `adminTodos`. - Wichtige Actions: Profil speichern/zurücksetzen/lokal abmelden, lokale Anmeldung, Dark Mode toggeln, Direktchat/Gruppenchat erstellen, Nachricht senden, Admin-To-do anlegen, Abteilungspunkte vergeben, Kontakte hinzufügen/ändern/löschen, `refreshFromStorage`. - **Gotcha:** Seed-/Demo-Daten aktualisieren sich bei bestehenden Browserdaten nicht automatisch. Für vollständigen Demo-Reset den App-Persistenz-Eintrag in `localStorage` löschen. - **Quasi-Sync:** `src/pages/Chats.js` und `src/pages/ChatRoom.js` pollen alle `1500ms` via `refreshFromStorage()`, um Änderungen zwischen Browser-Tabs/Views im Demo-Betrieb sichtbar zu machen. - **Backend/API:** Kein eigener Backend-Code. - GenMB Auth SDK in `index.html` bietet theoretisch `ready()`, `signIn()`, `sendMagicLink(email)`, `signOut()`, `getUser()`, `isAuthenticated()`, `onAuthStateChange(callback)`. - Diese Auth-Oberfläche ist derzeit nicht Teil des tatsächlichen App-Flows. ## File Structure ```text index.html # Statischer Einstieg; lädt Tailwind, main.css, GenMB Auth SDK und src/main.js. styles/main.css # Globale Tokens, ifaa-Farben, Dark Mode, Glass Cards, Focus-Ring, App-Shell. src/main.js # Root-Render und Hash-Fallback nach /start. src/mainProviders.js # Aktuell leerer Provider-Wrapper für spätere globale Provider. src/jsx.js # htm/React-Bindung; einzige erlaubte Template-API statt JSX. src/App.js # HashRouter, Profil-Guard, ThemeGate, Route-Tabelle. src/store/useChatStore.js # Lokaler App-State, Demo-Seeds, Persistenz und alle Mutations-Actions. src/components/Layout.js # Geschützte App-Shell mit Sidebar, Navigation, Dark-Mode-Toggle, Logout. src/components/ChatListItem.js # Karten-Darstellung eines Chats mit letzter Nachricht und Typ-Badge. src/pages/Onboarding.js # Startseite mit einmaliger Profilanlage und lokaler Demo-Anmeldung. src/pages/Chats.js # Chatübersicht, Sortierung nach letzter Aktivität, Storage-Polling. src/pages/ChatRoom.js # Nachrichtenansicht, Composer, Emoji/GIF-Funktion, Auto-Scroll. src/pages/NewChat.js # Erstellung von Einzel- und Gruppenchats aus lokalen Kontakten. src/pages/Dashboard.js # Punkte-/Abteilungsübersicht und Aktivitätsverlauf. src/pages/AdminTodos.js # To-do-Anlage mit Mehrfach-Abteilungsauswahl und Punktevergabe. src/pages/AdminUsers.js # Lokale Benutzerverwaltung inkl. Mail-Identifier und Demo-Passwort. src/pages/Profile.js # Anzeige/Bearbeitung des aktiven lokalen Profils. src/pages/NotFound.js # 404-Seite mit Rücklink zur Chatübersicht. src/utils/date.js # Deutsche Zeit-/Datumsformatierung für UI. CLAUDE.md # Diese Projektanleitung für Coding Agents. ``` ## Key Features ### Onboarding & lokaler Zugang - `src/pages/Onboarding.js` ist der öffentliche Einstieg unter `#/start`. - Nutzer geben einmalig **Name**, **Geburtstag** und **Spitzname** an; daraus wird ein lokales `profile` erzeugt. - Zusätzlich existiert eine lokale Demo-Anmeldung über Benutzer aus `contacts` mit Mailadresse/Passwort. - `RequireProfile` in `src/App.js` schützt alle App-Routen nur anhand des lokalen Profils. - Logout in `src/components/Layout.js` entfernt bzw. deaktiviert das lokale Profil über `logoutLocal()`; GenMB `signOut()` wird nicht genutzt. ### Chats - `src/pages/Chats.js` zeigt alle lokalen Chats, sortiert absteigend nach letzter Nachricht, ersatzweise `createdAt`. - `src/components/ChatListItem.js` zeigt: - Chat-Initialen aus `chat.title` - Chattyp `group` oder Direktchat - letzte Nachricht mit Sendername aus `profile` oder `contacts` - Uhrzeit über `formatTime()` aus `src/utils/date.js` - `src/pages/NewChat.js` erstellt: - Einzelchats mit einem Kontakt - Gruppenchats mit mehreren Kontakten und eigenem Titel - Chat-Datenmodell in `useChatStore.js` sinngemäß: - `chat`: `{ id, title, type: 'direct'|'group', members, messages, createdAt }` - `message`: `{ id, senderId, text, gifUrl?, sentAt }` - eigene Nachrichten verwenden `senderId: 'me'`. ### Chatraum - `src/pages/ChatRoom.js` lädt `chatId` aus der URL. - Nicht vorhandene Chats zeigen eine lokale “Chat nicht gefunden”-Karte mit Link zu `/chats`. - Composer erlaubt: - Textnachrichten - Emoji-Auswahl aus lokaler `emojis`-Liste - GIF/WebP über URL oder feste `gifSuggestions` - Validierung: - Leere Nachricht ohne GIF ist ungültig. - GIF-URL muss `http:` oder `https:` sein und auf `.gif` oder `.webp` enden. - Nach Senden wird via `sendMessage(chat.id, { text, gifUrl })` gespeichert und zum Ende gescrollt. ### Admin: Benutzer - `src/pages/AdminUsers.js` verwaltet ausschließlich lokale Kontakte. - Neue Benutzer brauchen: - Name - Spitzname - eindeutige Mailadresse - Abteilung - Passwort mit mindestens 6 Zeichen - Mailadressen werden normalisiert (`trim().toLowerCase()`) und als eindeutiger Login-Identifier verwendet. - Bearbeitung erlaubt Name, Spitzname, Mailadresse, Rolle/Abteilung und Passwort. - Löschen verhindert das aktive Profil (`person.id === profile?.id`). - `removeContact()` entfernt den Kontakt und bereinigt zugehörige lokale Chatauswahl gemäß Store-Logik. ### Admin: To-dos & Punkte - `src/pages/AdminTodos.js` legt Aufgaben für eine oder mehrere Abteilungen an. - Abteilungen kommen aus `departments` in `src/store/useChatStore.js`. - Kategorien: - `Meeting-To-do` → Default 80 Punkte - `Pflichtschulung` → Default 120 Punkte - `Verbesserung` - Submit ruft sowohl `addAdminTodo()` als auch `awardDepartmentPoints()` auf. - Punkte werden je ausgewählter Abteilung gutgeschrieben und im Dashboard sichtbar. ### Dashboard - `src/pages/Dashboard.js` zeigt lokale `departmentScores` und `pointActivities`. - Fokus ist Demonstration von Abteilungsleistung/Punkteverlauf, nicht echte Analytics. ### Profil - `src/pages/Profile.js` zeigt und bearbeitet das aktive lokale Profil. - `formatDate()` aus `src/utils/date.js` formatiert Geburtstage deutsch und vermeidet Zeitzonenverschiebung durch `T12:00:00`. ## Design Guidelines - Stil: sachlich, aufgeräumt, “ifaa-inspiriert”, mobile-first, mit klaren Kartenflächen und kräftigen Akzenten. - Globale Design Tokens liegen in `styles/main.css` als CSS-Variablen: - `--primary`, `--secondary`, `--background`, `--card`, `--muted`, `--border`, `--destructive` - Radien über `--radius-sm`, `--radius-md`, `--radius-lg` - Tailwind-Klassen nutzen konsequent HSL-Token: `bg-[hsl(var(--primary))]`, `text-[hsl(var(--muted-foreground))]`. - Wiederkehrende Klassen: - `glass-card` für Karten/Sidebars - `focus-ring` für interaktive Elemente - `app-shell` als Layout-Hintergrund/Viewport-Container - `brand-rhythm` als ifaa-artiger Akzentbalken - `chat-scroll` für Nachrichtenbereich - `message-enter` für Nachrichteneinstieg - Responsive Verhalten: - Mobile: vertikale Shell, Sidebar oben, Inhalt darunter. - Desktop (`lg`): Sidebar sticky links (`lg:w-80`), Content rechts. - Chatraum nutzt viewport-nahe Höhe: `h-[calc(100vh-1.5rem)]`, desktop `lg:h-[calc(100vh-3rem)]`. - Dark Mode ist klassengesteuert über `html.dark`; keine Systempräferenz-Logik. ## App Flow 1. **Start** - Browser öffnet `index.html`. - `src/main.js` setzt leeren Hash auf `#/start`. - `Onboarding` zeigt Profilanlage/Demo-Login. 2. **Profil vorhanden** - `RequireProfile` erlaubt geschützte Routen. - `Layout` zeigt Sidebar mit Nutzerinitialen, Navigation, Dark-Mode-Toggle und Logout. 3. **Chat lesen** - `/chats` listet Unterhaltungen. - Klick öffnet `/chats/:chatId`. - Fehlende ID zeigt lokale Fehlerkarte statt App-Absturz. 4. **Chat erstellen** - `/new` wählt Kontakte und Chattyp. - Nach Erstellung sollte in den neuen Chat oder die Übersicht navigiert werden, je nach aktueller Implementierung in `NewChat.js`. 5. **Admin-Pflege** - `/admin-users` verändert lokale Kontakte. - `/admin-todos` erzeugt To-dos und vergibt Punkte. - `/dashboard` visualisiert lokale Punktestände. 6. **Edge Cases** - Ohne Profil jeder geschützte Pfad → `/start`. - Unbekannter Pfad → `NotFound`. - Bestehende `localStorage`-Daten können neue Seed-Daten überdecken. - Cross-Tab-Änderungen erscheinen nur in Views mit Polling; nicht jede Seite pollt automatisch. ## Conventions - **Sprache:** UI-Texte auf Deutsch. Technische Namen auf Englisch. - **Komponenten:** Named Exports verwenden (`export function Chats()`), Dateien nach Komponente/Page benennen. - **Templates:** Kein JSX hinzufügen. Immer `html` aus `src/jsx.js` nutzen. - **Imports:** Browserfähige ESM-Imports beibehalten; externe Pakete nur über CDN/esm.sh, nicht via npm. - **State:** Neue globale Daten und Mutationen in `src/store/useChatStore.js` ergänzen, nicht in Komponenten verstreuen. - **Persistenz:** Beim Ändern des Store-Schemas Rückwärtskompatibilität zu bestehenden `localStorage`-Einträgen beachten oder Reset-Hinweis einplanen. - **Styling:** Primär Tailwind Utility-Klassen mit CSS-Variablen aus `styles/main.css`; keine hardcodierten Fremdfarben außer bewusstem UI-Zustand. - **Routing:** Neue Seite: 1. Datei in `src/pages/NeueSeite.js` anlegen. 2. In `src/App.js` importieren und unter dem geschützten `…}>` registrieren, falls Profil erforderlich. 3. Optional Nav-Eintrag in `src/components/Layout.js` als `NavItem` ergänzen. - **Formulare:** Validierung lokal im Page-Component, klare deutsche Fehlermeldung, Erfolgsmeldung nach Mutation. - **Icons:** Lucide React über `https://esm.sh/lucide-react?deps=react@19.2.0`. - **Datumsformatierung:** Keine direkte `toLocaleString()`-Duplikation in Komponenten; `src/utils/date.js` verwenden oder dort erweitern. - **Auth-Gotcha:** Nicht annehmen, dass `window.genmb.auth` aktiv genutzt wird. Wenn echte Auth integriert wird, müssen `Onboarding`, `RequireProfile`, `Layout.handleLogout()` und Store-Profilmapping gemeinsam angepasst werden. ## Platform (GenMB) This app is built and hosted on GenMB. **Runtime:** Browser sandbox (iframe) or Cloud Run. No Node.js server — all code runs client-side unless `backend/` exists. **Dependencies:** CDN-only (esm.sh, cdn.tailwindcss.com, unpkg). Use ES module imports with full CDN URLs. No `npm install` at runtime. **Entry point:** `index.html` must include all CDN script tags. Tailwind via CDN with inline config. **Built-in services (relative API paths only, never hardcode domains):** - `/api/ai/completion` — AI proxy | `/api/data/{appId}/*` — PostgreSQL (DataConnect SDK) - `/api/storage/{appId}/*` — File uploads (GCS) | `/api/auth/google/*` — Google OAuth - `/api/contact/submit` — Contact form | SDKs: `window.genmb.db`, `.storage`, `.auth` **File structure:** `index.html` (entry), `src/` (source), `styles/` (CSS), `backend/` (optional FastAPI), `CLAUDE.md` (this file). **Cannot:** Install npm packages at runtime, access filesystem, make direct server-side calls from frontend, modify infra.