pyramid/docs/UI_AUDIT.md

UI/UX-Audit Pyramid (2026-10-08)

Grundlage: Code-Analyse der Navigation + automatische Screenshot-Tour integration_test/ui_audit_tour_test.dart (35 Zustände, Handy 1080×2340 und PC 1600×1000, zwei Testkonten, Bilder in build/ui_audit/, p_* = Handy, d_* = PC). Neu erzeugen:

$env:PYRAMID_PROFILE_DIR="$env:USERPROFILE\.pyramid-autopilot\profile1"
flutter test integration_test/ui_audit_tour_test.dart -d windows

1. Wie die Navigation heute funktioniert

Vier Zustände steuern, was man sieht (lib/core/app_state.dart):

Zustand	Werte	Wirkung
activeSpaceIdProvider	dms, rooms, Space-ID	welche Liste links/unten steht
activeRoomIdProvider	Raum-ID oder leer	welcher Chat offen ist
viewModeProvider	chat, voice	Hauptbereich zeigt Chat oder Anrufansicht
activeModalProvider	none, settings, search	Overlay

Handy: Hamburger öffnet ein schmales Seitenmenü (unbeschriftet: Logo = Chats, orangenes „R“ = Räume, Space-Kürzel, „+“, Zahnrad). Darunter die Liste; ein Chat gleitet darüber; „Anruf“ ist ein weiterer Vordergrund. PC: Leiste (Spaces) + Liste + Hauptbereich (+ Mitglieder rechts).

Was wohin führt:

• Liste → Chat (alle Listen), Sprachkanal antippen → beitreten (Mini-Leiste unten), nochmal antippen → verlassen.
• Chat-Kopf (nur DM) → Anruf/Video → Anrufansicht. Gruppen: kein Anruf.
• ⋮ (Handy) → Suche, Mitglieder. PC-Kopf: Threads (ohne Funktion), Anheften, Suche, Mitglieder.
• Mini-Leiste → Anrufansicht; Anrufansicht „Minimieren“ → zurück zum Chat.
• Zahnrad (Profilbalken unten und Seitenmenü) → Einstellungen.

2. Sackgassen und tote Elemente (alle behoben, siehe 5.)

#	Wo	Was passiert	Schwere
S1	Gegenseite legt auf / Anruf scheitert / Sprachkanal bricht ab	Ansicht bleibt auf „Anruf“: englische Leerseite „No active call – Join a voice room“, Handy ohne Zurück (p_18)	hoch
S2	dieselbe Leerseite	LiveKit-Fehlermeldung wird dort nicht angezeigt (stiller Fehler)	hoch
S3	Gruppenchat (Handy + PC)	kein Anruf-Knopf – Gruppenanruf-Code nicht erreichbar (p_06, d_06)	hoch
S4	PC-Chatkopf „Threads“	Knopf ohne Funktion	mittel
S5	Space betreten (PC)	rechts nur „Wähle einen Chat aus“, letzter/erster Kanal öffnet nicht (d_04)	mittel
S6	Anruf läuft (PC)	Steuerung doppelt: Anrufansicht + Mini-Leiste links (d_15)	niedrig

3. Befunde nach Bereich

Listen

• Haupt-Navigation am Handy versteckt im Seitenmenü, Symbole unbeschriftet und teils kryptisch (orangenes „R“-Dreieck für „Räume“) (p_02).
• „Räume“ listet auch alle Kanäle aus Spaces → doppelt; Sprachkanäle hängen ohne Überschrift unten, sehen anders aus als Chats (p_03, p_17).
• Suchfeld ohne Lupe, eingerückter Text.
• Profilbalken unten + Anruf-Leiste (zweizeilig) belegen am Handy ~25 % der Höhe (p_12, p_17).

Chats

• Gruppen sehen aus wie „#Kanal“ (Kopf, Liste) statt wie Gruppen.
• Leerer Chat englisch („No messages yet“), PC-Leerzustand halb englisch.
• Mitgliederliste: eckige Avatare (sonst rund), man selbst nicht als „Du“.

Anrufe

• Anrufansicht für reine Sprachanrufe: riesige schwarze Video-Kachel mit Initial (p_15). Eigene Kachel zeigt „D“ (von „Du“) statt eigenem Avatar. Keine Gesprächsdauer.
• Kopf-Symbole „Hero/Grid“ und „Minimieren“ unklar (englische Tooltips).
• Mini-Leiste „VOICE CONNECTED“ (englisch) auch bei 1:1-Anrufen; Mikro/Kopfhörer lila gefüllt = „an“ – liest sich wie Warnung; in der Anrufansicht ist die Logik umgekehrt (rot = stumm).
• Annehmen-Fenster: Platzhalter-Symbol statt Avatar, kein „Sprach-/Videoanruf“.

Allgemein

• Englische Reste (Bildschirm-Auswähler erledigt; Anrufansicht, Leerzustände).
• Statusleisten-Streifen in anderer Farbe über Overlays (p_07, p_09).
• „Tastaturkürzel“ in den Handy-Einstellungen.

4. Konzept: modern, aufgeräumt, übersichtlich

Leitlinie: WhatsApp für Chats, Discord für Server/Sprachkanäle – beides in einer klaren Struktur, nichts doppelt, kein Zustand ohne Weg zurück.

1. Navigation Handy: untere Leiste mit beschrifteten Tabs statt Seitenmenü – Chats (DMs + Gruppen zusammen, nach Aktivität), Server (Spaces als Karten → Kanäle, Sprachkanäle mit Live-Teilnehmern), Du (Profil, Status, Einstellungen). Profilbalken unten entfällt.
2. Listen: einheitliche Kacheln; Space-Kanäle gruppiert in „Textkanäle“ / „Sprachkanäle“; Sprachkanal-Kachel zeigt Teilnehmer-Avatare; Kanäle eines Spaces erscheinen nicht zusätzlich unter „Räume“.
3. Anruf-Logik (ein Modell): 1:1-Anruf, Gruppenanruf (Gruppenchat) und Sprachkanal (Server) teilen eine Anrufansicht und eine kompakte „Anruf-Pille“. Anruf endet → automatisch zurück zum Chat, mit kurzem Hinweis („Anruf beendet · 3:12“).
4. Anrufansicht: Sprachanruf = große runde Avatare mit Sprech-Ring, Name, Dauer (wie WhatsApp/Discord); Video/Bildschirm = Kacheln bzw. großes Bild + Filmstreifen. Steuerung einheitlich: neutral = an, rot durchgestrichen = aus.
5. Visuell: runde Avatare überall (echte Bilder), Kopfzeilen mit Avatar + Untertitel (Mitgliederzahl/online), Leerzustände mit Handlung („Schreib die erste Nachricht“), ruhigere Flächen (Karten statt Linien), einheitliche Abstände/Radien, vollständig deutsch.

5. Sofort behoben (diese Runde)

S1–S6, englische Reste in Anruf/Leerzuständen, Annehmen-Fenster mit Avatar und Anrufart, eigene Kachel mit eigenem Avatar, „Du“ in der Mitgliederliste, „Tastaturkürzel“ nur am PC – Details in PROGRESS.md.

6. Bernds Entscheidungen (2026-10-09) und Umsetzung (0.1.42)

Frage	Entscheidung	Umsetzung
Navigation Handy	Seitenmenü; untere Leiste als Mockup zum Vergleich	Einstellung „Navigation“ (Standard Seitenmenü), layout/mobile_tabs.dart, Vergleichsbild build/ui_vergleich/1_navigation_vergleich.png
Chatliste	Alles in „Chats“	DMs + Gruppen ohne Server zusammen, Filter-Chips; Server-Kanäle nur im Server
Gruppenanruf	Anruf + Beitreten-Karte	Knopf im Gruppenkopf, Start-Nachricht (Push), Karte „Gruppenanruf läuft · Beitreten“
Anrufansicht	animierte, aneinandergedrückte Bubbles → (2026-10-10) „aufgeblasene“ Formen bis an die Fensterränder, erst nur Kontur	call_ui/inflated_layout.dart + view/bubble_stage.dart, Kacheln umschaltbar, Vorschau integration_test/call_bubbles_demo_test.dart

Noch offen aus §4: einheitliche Hinweis-Meldungen (Snackbar-Stil), kompaktere Anruf-Pille, Abschnitts-Überschriften Text/Sprache in Server-Listen.