# 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. Offene Richtungsentscheidungen (Bernd)

Navigation Handy (Tabs vs. Seitenmenü), Chats + Gruppen zusammen, Stil der
Anrufansicht, Anruf-Pille – siehe Fragen im Chat.