xPulse Chat – UI/UX Layout Concept v1.3.0
Status: CONCEPT · Ziel-Version: v1.3.0
Erstellt im Rahmen der v1.2.0 Entwicklung als Planungsgrundlage für den nächsten Schritt.
Ziel
Einheitliches, konsistentes App-Layout über alle Views hinweg.
Mobile-first, responsive – auf Desktop mit dauerhaft sichtbarer Sidebar.
App Shell
Grundstruktur
| 1 | ┌──────────────────────────────────────────────────────┐ |
| 2 | │ [☰] Area Title / Status [👤 username ▾] │ ← Top Bar (nur rechts über Content) |
| 3 | ├──────────────────┬───────────────────────────────────┤ |
| 4 | │ │ │ |
| 5 | │ Logo │ Dynamic Content Area │ |
| 6 | │ ──────── │ │ |
| 7 | │ Peer Liste │ (Chat / Peer Detail / │ |
| 8 | │ (scrollbar) │ Profil / Text Pages) │ |
| 9 | │ │ │ |
| 10 | │ ──────── │ │ |
| 11 | │ Guidelines │ │ |
| 12 | │ Version │ │ |
| 13 | │ Info │ │ |
| 14 | └──────────────────┴───────────────────────────────────┘ |
Komponenten
| Bereich |
Beschreibung |
| Left Sidebar |
Immer sichtbar (Desktop) / Overlay (Mobile) |
| Top Bar |
Nur über dem Dynamic Content, nicht über Sidebar |
| Dynamic Content |
Wechselt je nach Route |
| Footer |
Entfällt komplett |
Inhalt (von oben nach unten)
| 1 | ┌──────────────────┐ |
| 2 | │ 🔷 xPulse │ ← Logo |
| 3 | │ ──────────── │ |
| 4 | │ │ |
| 5 | │ ── Peers ── [+]│ ← "+" Button: title="Peer hinzufügen" |
| 6 | │ 🟢 Bob │ Peer Liste (scrollbar) |
| 7 | │ 🔴 Carol │ mit Online-Status Badge |
| 8 | │ 🔴 Dave │ aktiver Peer highlighted |
| 9 | │ │ |
| 10 | │ (leer state) │ |
| 11 | │ │ |
| 12 | │ ──────────── │ |
| 13 | │ Info · Guidelines│ ← Footer Links (zentriert) |
| 14 | │ Disclaimer │ |
| 15 | │ [Version 1.3.0] │ ← Pill → Link zu /changelog (einziger Weg) |
| 16 | └──────────────────┘ |
Kein aktiver Benutzer in der Sidebar!
Login/Profil nur über das User-Menü in der Top Bar rechts erreichbar.
Verhalten
- Desktop (≥ 768px): Sidebar dauerhaft sichtbar, feste Breite (~220px)
- Mobile (< 768px): Standardmäßig eingeklappt, per Hamburger-Button (☰) als Overlay öffenbar
- Overlay: Dunkler Backdrop hinter Sidebar, Klick auf Backdrop schließt Sidebar
- Klick auf Peer in der Liste → navigiert zu Chat, Sidebar schließt sich auf Mobile
Top Bar
Nur über dem Dynamic Content Bereich (nicht über der Sidebar).
| 1 | ┌─────────────────────────────────────────────────────┐ |
| 2 | │ [☰ nur Mobile] Area Title / Status [👤 username ▾] │ |
| 3 | └─────────────────────────────────────────────────────┘ |
User Menü Dropdown (rechts)
| 1 | [👤 username ▾] |
| 2 | ┌──────────────┐ |
| 3 | │ Mein Profil │ |
| 4 | │ ────────── │ |
| 5 | │ Logout │ |
| 6 | └──────────────┘ |
Area Title – je nach Route
| Route |
Area Title |
Subtitle / Status |
/peer/list |
P2P Chat |
– |
/peer/add |
Peer hinzufügen |
– |
/peer/add/:hash (Re-Pair) |
Peer {Login} Re-Pair |
– |
/peer/:hash |
Peer {Login} |
– |
/chat/:hash |
Chat mit {Login} |
Status (siehe unten) |
/profile |
Mein Profil |
– |
/info |
Info |
– |
/changelog |
Changelog |
– |
/guidelines |
Usage Guidelines |
– |
/disclaimer |
Disclaimer |
– |
Chat Status im Area Title
| 1 | Chat mit Bob 🔴 offline |
| 2 | Chat mit Bob 🟡 verbinde… |
| 3 | Chat mit Bob 🟢 online · im Chat: nein |
| 4 | Chat mit Bob 🟢 online · im Chat: ja |
| 5 | Chat mit Bob 🟢 verbunden |
Dynamic Content – je nach Route
`/peer/list` – Default State
| 1 | ┌───────────────────────────────┐ |
| 2 | │ │ |
| 3 | │ Hallo Alice 👋 │ |
| 4 | │ │ |
| 5 | │ Wähle einen Peer aus │ |
| 6 | │ um zu chatten │ |
| 7 | │ │ |
| 8 | └───────────────────────────────┘ |
Die Peer-Liste selbst ist in der linken Sidebar – die rechte Content-Area
zeigt den personalisierten Willkommens-State wenn kein Peer ausgewählt ist.
`/chat/:hash` – Chat View
| 1 | ┌───────────────────────────────┐ |
| 2 | │ Chat Messages (scrollbar) │ |
| 3 | │ │ |
| 4 | │ [Typing Indicator] │ |
| 5 | ├───────────────────────────────┤ |
| 6 | │ [textarea] [↑] │ |
| 7 | └───────────────────────────────┘ |
- Kein separater Header – Status ist im Top Bar Area Title
- Kein chat-input-hint Footer – Status ist im Area Title sichtbar
- Input
disabled wenn Peer offline oder nicht verbunden
`/peer/add` – Peer hinzufügen / Re-Pair
| 1 | ┌───────────────────────────────┐ |
| 2 | │ Pairing Code Eingabe / │ |
| 3 | │ Code generieren │ |
| 4 | │ │ |
| 5 | │ [Pairing Timer Bar] │ |
| 6 | │ │ |
| 7 | │ Status / Feedback │ |
| 8 | └───────────────────────────────┘ |
- Add: Area Title
Peer hinzufügen
- Re-Pair: Area Title
Peer {Login} Re-Pair
- Gleiche View, gleiche Komponente – nur Area Title unterscheidet sich
- Erreichbar über
[+] Button in der Sidebar neben "Peers" Label
| 1 | ┌───────────────────────────────┐ |
| 2 | │ 👤 Avatar + Status Badge │ |
| 3 | │ Login + Chat Icon │ |
| 4 | │ │ |
| 5 | │ Peer Hash: ... │ |
| 6 | │ Hinzugefügt: ... │ |
| 7 | │ │ |
| 8 | │ │ |
| 9 | │ │ |
| 10 | │ │ |
| 11 | └───────────────────────────────┘ |
`/profile` – Profil View
Wie bisher, nur ohne eigenen Header (Area Title übernimmt).
Text Pages (`/info`, `/guidelines`, `/disclaimer`)
Wie bisher, nur ohne eigenen Header (Area Title = Page Title).
Nur reiner Inhalt – keine Tabs.
`/changelog` – Changelog
| 1 | ┌───────────────────────────────┐ |
| 2 | │ CHANGELOG.md │ |
| 3 | │ (rendered Markdown) │ |
| 4 | │ │ |
| 5 | └───────────────────────────────┘ |
- Erreichbar nur über Version-Pill im Sidebar Footer → bewusste Entscheidung
- Weniger Links im Footer, inhaltlich logisch: "welche Version? → was hat sich geändert?"
Mobile Navigation
| 1 | ┌─────────────────────┐ |
| 2 | │ ☰ Chat mit Bob 🟢 [👤▾] │ ← Top Bar |
| 3 | ├─────────────────────┤ |
| 4 | │ │ |
| 5 | │ Dynamic Content │ |
| 6 | │ │ |
| 7 | └─────────────────────┘ |
| 8 | |
| 9 | Sidebar offen (Overlay): |
| 10 | ┌──────────┬──────────┐ |
| 11 | │ ✕ xPulse │ (blur │ |
| 12 | │ ────── │ + │ |
| 13 | │ 🟢 Bob │ dark │ |
| 14 | │ 🔴 Carol │ overlay)│ |
| 15 | │ ────── │ │ |
| 16 | │ Info │ │ |
| 17 | │ v1.3.0 │ │ |
| 18 | └──────────┴──────────┘ |
CSS / Layout Technisch
- CSS Grid für App Shell:
grid-template-columns: 220px 1fr (Desktop)
- Media Query
@media (max-width: 768px) → Sidebar als position: fixed Overlay
--sidebar-width: 220px als CSS Custom Property- Top Bar:
position: sticky; top: 0 über dem Content-Bereich
- Sidebar Peer-Liste:
overflow-y: auto; flex: 1 (scrollbar zwischen Logo und Footer)
Was entfällt
| Aktuell |
In v1.3.0 |
| Jede View hat eigenen Header |
Einheitliche Top Bar |
| Back-Buttons in Views |
Navigation via Sidebar |
peers-footer mit Button |
[+] Button in Sidebar neben "Peers" Label |
chat-input-hint Footer |
Status im Area Title |
| Inkonsistente Inline-Styles |
Ausgelagerte CSS-Dateien |
peer-detail als eigene View optional |
Könnte als rechte Panel-Sidebar werden |
Offene Fragen / Entscheidungen
| Frage |
Entscheidung |
| Breadcrumbs oder Area Title? |
Area Title |
| Changelog nur Pill oder auch Footer Link? |
Nur Version-Pill |
peer-detail separate Route oder Panel? |
Separate Route |
| Sidebar-Breite auf Tablet |
TBD |
Chat Info Panel (rechts im Chat)
Separates optionales Panel rechts im Chat – kein Full Peer Detail, nur Chat-relevante Infos:
| 1 | ┌─────────────────────────────────────────────────────┐ |
| 2 | │ Chat mit Bob 🟢 ← Toggle Panel │ |
| 3 | ├──────────────────────────────┬──────────────────────┤ |
| 4 | │ │ Chat Info │ |
| 5 | │ Chat Messages │ ──────────── │ |
| 6 | │ │ 👤 Bob │ |
| 7 | │ │ 🟢 online │ |
| 8 | │ │ im Chat: ja │ |
| 9 | │ │ │ |
| 10 | │ │ verbunden seit: │ |
| 11 | │ │ 03.03.2026 13:54 │ |
| 12 | │ │ Nachricht: 42 │ |
| 13 | │ │ │ |
| 14 | ├──────────────────────────────┴──────────────────────┤ |
| 15 | │ │ |
| 16 | └─────────────────────────────────────────────────────┘ |
- Toggle via
[ℹ] Button im Area Title des Chat-Inhaltsbereichs (rechts im Titel, nicht in der Top Bar!)
- Top Bar rechts ist exklusiv für das User-Menü
- Mobile: Panel als Overlay von rechts (mit Backdrop)
- Desktop: Panel öffnet sich neben dem Chat (kein Overlay)
- Zustand (offen/zu) wird in
localStorage gespeichert: xpulse_panel_chat_info
Alle Panel-Zustände werden in localStorage gespeichert:
| Key |
Default |
Beschreibung |
xpulse_panel_left |
open |
Linke Sidebar (Desktop) |
xpulse_panel_chat_info |
closed |
Chat Info Panel (rechts) |
- Mobile: Sidebar immer als Overlay, kein localStorage für open/closed
- Desktop: Sidebar ohne Overlay, kein Backdrop – einfach ein/ausklappen
- Default Sidebar Desktop:
open
- Default Chat Info Panel:
closed