Pages

Contents

xPulse Chat – UI/UX Layout Concept v1.3.0

Status: CONCEPT · Target Version: v1.3.0 Created during v1.2.0 development as a planning basis for the next step.

Goal

A uniform, consistent app layout across all views. Mobile-first, responsive – on desktop with a permanently visible sidebar.

App Shell

Basic Structure

1 ┌──────────────────────────────────────────────────────┐
2 │  [☰]  Area Title / Status            [👤 username ▾] │  ← Top Bar (right side above content only)
3 ├──────────────────┬───────────────────────────────────┤
4 │                  │                                   │
5 │  Logo            │   Dynamic Content Area            │
6 │  ────────        │                                   │
7 │  Peer List       │   (Chat / Peer Detail /           │
8 │  (scrollbar)     │    Profile / Text Pages)          │
9 │                  │                                   │
10 │  ────────        │                                   │
11 │  Guidelines      │                                   │
12 │  Version         │                                   │
13 │  Info            │                                   │
14 └──────────────────┴───────────────────────────────────┘

Components

Area	Description
Left Sidebar	Always visible (desktop) / overlay (mobile)
Top Bar	Only above the dynamic content, not above the sidebar
Dynamic Content	Changes depending on route
Footer	Removed entirely

Content (top to bottom)

1 ┌──────────────────┐
2 │  🔷 xPulse       │  ← Logo
3 │  ────────────    │
4 │                  │
5 │  ── Peers ──  [+]│  ← "+" button: title="Add Peer"
6 │  🟢 Bob          │     Peer list (scrollbar)
7 │  🔴 Carol        │     with online status badge
8 │  🔴 Dave         │     active peer highlighted
9 │                  │
10 │  (empty state)   │
11 │                  │
12 │  ────────────    │
13 │  Info · Guidelines│  ← Footer links (centered)
14 │  Disclaimer       │
15 │  [Version 1.3.0] │  ← Pill → link to /changelog (only way to reach it)
16 └──────────────────┘

No active user in the sidebar! Login/Profile is only accessible via the user menu in the top bar on the right.

Behaviour

Desktop (≥ 768px): Sidebar permanently visible, fixed width (~220px)
Mobile (< 768px): Collapsed by default, openable as overlay via hamburger button (☰)
Overlay: Dark backdrop behind sidebar, click on backdrop closes sidebar
Click on peer in list → navigates to chat, sidebar closes on mobile

Top Bar

Only above the dynamic content area (not above the sidebar).

1 ┌─────────────────────────────────────────────────────┐
2 │ [☰ mobile only]  Area Title / Status    [👤 username ▾] │
3 └─────────────────────────────────────────────────────┘

1 [👤 username ▾]
2   ┌──────────────┐
3   │  My Profile  │
4   │  ──────────  │
5   │  Logout      │
6   └──────────────┘

Area Title – by Route

Route	Area Title	Subtitle / Status
`/peer/list`	`P2P Chat`	–
`/peer/add`	`Add Peer`	–
`/peer/add/:hash` (Re-Pair)	`Peer {Login} Re-Pair`	–
`/peer/:hash`	`Peer {Login}`	–
`/chat/:hash`	`Chat with {Login}`	Status (see below)
`/profile`	`My Profile`	–
`/info`	`Info`	–
`/changelog`	`Changelog`	–
`/guidelines`	`Usage Guidelines`	–
`/disclaimer`	`Disclaimer`	–

Chat Status in Area Title

1 Chat with Bob  🔴 offline
2 Chat with Bob  🟡 connecting…
3 Chat with Bob  🟢 online · in chat: no
4 Chat with Bob  🟢 online · in chat: yes
5 Chat with Bob  🟢 connected

Dynamic Content – by Route

`/peer/list` – Default State

1 ┌───────────────────────────────┐
2 │                               │
3 │   Hello Alice 👋              │
4 │                               │
5 │   Select a peer               │
6 │   to start chatting           │
7 │                               │
8 └───────────────────────────────┘

The peer list itself is in the left sidebar – the right content area shows the personalised welcome state when no peer is selected.

`/chat/:hash` – Chat View

1 ┌───────────────────────────────┐
2 │  Chat Messages (scrollbar)    │
3 │                               │
4 │  [Typing Indicator]           │
5 ├───────────────────────────────┤
6 │  [textarea]              [↑]  │
7 └───────────────────────────────┘

No separate header – status is in the Top Bar Area Title
No chat-input-hint footer – status is visible in the Area Title
Input disabled when peer is offline or not connected

`/peer/add` – Add Peer / Re-Pair

1 ┌───────────────────────────────┐
2 │  Pairing Code Input /         │
3 │  Generate Code                │
4 │                               │
5 │  [Pairing Timer Bar]          │
6 │                               │
7 │  Status / Feedback            │
8 └───────────────────────────────┘

Add: Area Title Add Peer
Re-Pair: Area Title Peer {Login} Re-Pair
Same view, same component – only Area Title differs
Accessible via [+] button in the sidebar next to "Peers" label

1 ┌───────────────────────────────┐
2 │  👤 Avatar + Status Badge     │
3 │  Login + Chat Icon            │
4 │                               │
5 │  Peer Hash: ...               │
6 │  Added: ...                   │
7 │                               │
8 │  [→ Open Chat]                │
9 │  [⟳ Re-pair]                  │
10 │  [Remove]                     │
11 └───────────────────────────────┘

`/profile` – Profile View

Same as before, just without its own header (Area Title takes over).

Text Pages (`/info`, `/guidelines`, `/disclaimer`)

Same as before, just without their own header (Area Title = Page Title). Pure content only – no tabs.

`/changelog` – Changelog

1 ┌───────────────────────────────┐
2 │  CHANGELOG.md                 │
3 │  (rendered Markdown)          │
4 │                               │
5 └───────────────────────────────┘

Accessible only via the version pill in the sidebar footer → deliberate decision
Fewer footer links, logically consistent: "which version? → what changed?"

1 ┌─────────────────────┐
2 │ ☰  Chat with Bob 🟢  [👤▾] │  ← Top Bar
3 ├─────────────────────┤
4 │                     │
5 │   Dynamic Content   │
6 │                     │
7 └─────────────────────┘
8  
9 Sidebar open (overlay):
10 ┌──────────┬──────────┐
11 │ ✕ xPulse │  (blur   │
12 │ ──────   │   +      │
13 │ 🟢 Bob   │  dark    │
14 │ 🔴 Carol │  overlay)│
15 │ ──────   │          │
16 │ Info     │          │
17 │ v1.3.0   │          │
18 └──────────┴──────────┘

CSS / Layout Technical

CSS Grid for app shell: grid-template-columns: 220px 1fr (desktop)
Media query @media (max-width: 768px) → sidebar as position: fixed overlay
--sidebar-width: 220px as CSS custom property
Top Bar: position: sticky; top: 0 above the content area
Sidebar peer list: overflow-y: auto; flex: 1 (scrollbar between logo and footer)

What Is Removed

Current	In v1.3.0
Each view has its own header	Unified Top Bar
Back buttons in views	Navigation via sidebar
`peers-footer` with button	`[+]` button in sidebar next to "Peers" label
`chat-input-hint` footer	Status in Area Title
Inconsistent inline styles	Extracted CSS files
`peer-detail` as optional separate view	Could become a right panel sidebar

Open Questions / Decisions

Question	Decision
Breadcrumbs or Area Title?	Area Title
Changelog via pill only or also footer link?	Version pill only
`peer-detail` separate route or panel?	Separate route
Sidebar width on tablet	TBD

Chat Info Panel (right in chat)

Optional separate panel on the right side of the chat – not a full peer detail, only chat-relevant info:

1 ┌─────────────────────────────────────────────────────┐
2 │  Chat with Bob 🟢          [ℹ]  ←  Toggle Panel     │
3 ├──────────────────────────────┬──────────────────────┤
4 │                              │  Chat Info           │
5 │   Chat Messages              │  ────────────        │
6 │                              │  👤 Bob              │
7 │                              │  🟢 online           │
8 │                              │  in chat: yes        │
9 │                              │                      │
10 │                              │  connected since:    │
11 │                              │  03.03.2026 13:54    │
12 │                              │  Messages: 42        │
13 │   [typing indicator]         │                      │
14 ├──────────────────────────────┴──────────────────────┤
15 │  [textarea]                                    [↑]  │
16 └─────────────────────────────────────────────────────┘

Toggle via [ℹ] button in the Area Title of the chat content area (right in the title, not in the Top Bar!)
Top Bar right is exclusively for the user menu
Mobile: Panel as overlay from the right (with backdrop)
Desktop: Panel opens next to the chat (no overlay)
State (open/closed) is stored in localStorage: xpulse_panel_chat_info

All panel states are stored in localStorage:

Key	Default	Description
`xpulse_panel_left`	`open`	Left sidebar (desktop)
`xpulse_panel_chat_info`	`closed`	Chat info panel (right)

Mobile: Sidebar always as overlay, no localStorage for open/closed
Desktop: Sidebar without overlay, no backdrop – simply collapse/expand
Default sidebar desktop: open
Default chat info panel: closed

xPulse Chat – UI/UX Layout Concept v1.3.0

Goal

App Shell

Basic Structure

Components

Left Sidebar

Content (top to bottom)

Behaviour

Top Bar

Area Title – by Route

Chat Status in Area Title

Dynamic Content – by Route

`/peer/list` – Default State

`/chat/:hash` – Chat View

`/peer/add` – Add Peer / Re-Pair

`/profile` – Profile View

Text Pages (`/info`, `/guidelines`, `/disclaimer`)

`/changelog` – Changelog

Mobile Navigation

CSS / Layout Technical

What Is Removed

Open Questions / Decisions

Chat Info Panel (right in chat)

Panel / Sidebar State (localStorage)

1	┌──────────────────────────────────────────────────────┐
2	│ [☰] Area Title / Status [👤 username ▾] │ ← Top Bar (right side above content only)
3	├──────────────────┬───────────────────────────────────┤
4	│ │ │
5	│ Logo │ Dynamic Content Area │
6	│ ──────── │ │
7	│ Peer List │ (Chat / Peer Detail / │
8	│ (scrollbar) │ Profile / Text Pages) │
9	│ │ │
10	│ ──────── │ │
11	│ Guidelines │ │
12	│ Version │ │
13	│ Info │ │
14	└──────────────────┴───────────────────────────────────┘

1	┌──────────────────┐
2	│ 🔷 xPulse │ ← Logo
3	│ ──────────── │
4	│ │
5	│ ── Peers ── [+]│ ← "+" button: title="Add Peer"
6	│ 🟢 Bob │ Peer list (scrollbar)
7	│ 🔴 Carol │ with online status badge
8	│ 🔴 Dave │ active peer highlighted
9	│ │
10	│ (empty state) │
11	│ │
12	│ ──────────── │
13	│ Info · Guidelines│ ← Footer links (centered)
14	│ Disclaimer │
15	│ [Version 1.3.0] │ ← Pill → link to /changelog (only way to reach it)
16	└──────────────────┘

1	┌─────────────────────────────────────────────────────┐
2	│ [☰ mobile only] Area Title / Status [👤 username ▾] │
3	└─────────────────────────────────────────────────────┘

1	[👤 username ▾]
2	┌──────────────┐
3	│ My Profile │
4	│ ────────── │
5	│ Logout │
6	└──────────────┘

1	Chat with Bob 🔴 offline
2	Chat with Bob 🟡 connecting…
3	Chat with Bob 🟢 online · in chat: no
4	Chat with Bob 🟢 online · in chat: yes
5	Chat with Bob 🟢 connected

1	┌───────────────────────────────┐
2	│ │
3	│ Hello Alice 👋 │
4	│ │
5	│ Select a peer │
6	│ to start chatting │
7	│ │
8	└───────────────────────────────┘

1	┌───────────────────────────────┐
2	│ Chat Messages (scrollbar) │
3	│ │
4	│ [Typing Indicator] │
5	├───────────────────────────────┤
6	│ [textarea] [↑] │
7	└───────────────────────────────┘

1	┌───────────────────────────────┐
2	│ Pairing Code Input / │
3	│ Generate Code │
4	│ │
5	│ [Pairing Timer Bar] │
6	│ │
7	│ Status / Feedback │
8	└───────────────────────────────┘

1	┌───────────────────────────────┐
2	│ 👤 Avatar + Status Badge │
3	│ Login + Chat Icon │
4	│ │
5	│ Peer Hash: ... │
6	│ Added: ... │
7	│ │
8	│ [→ Open Chat] │
9	│ [⟳ Re-pair] │
10	│ [Remove] │
11	└───────────────────────────────┘

1	┌───────────────────────────────┐
2	│ CHANGELOG.md │
3	│ (rendered Markdown) │
4	│ │
5	└───────────────────────────────┘

1	┌─────────────────────┐
2	│ ☰ Chat with Bob 🟢 [👤▾] │ ← Top Bar
3	├─────────────────────┤
4	│ │
5	│ Dynamic Content │
6	│ │
7	└─────────────────────┘
8
9	Sidebar open (overlay):
10	┌──────────┬──────────┐
11	│ ✕ xPulse │ (blur │
12	│ ────── │ + │
13	│ 🟢 Bob │ dark │
14	│ 🔴 Carol │ overlay)│
15	│ ────── │ │
16	│ Info │ │
17	│ v1.3.0 │ │
18	└──────────┴──────────┘

1	┌─────────────────────────────────────────────────────┐
2	│ Chat with Bob 🟢 [ℹ] ← Toggle Panel │
3	├──────────────────────────────┬──────────────────────┤
4	│ │ Chat Info │
5	│ Chat Messages │ ──────────── │
6	│ │ 👤 Bob │
7	│ │ 🟢 online │
8	│ │ in chat: yes │
9	│ │ │
10	│ │ connected since: │
11	│ │ 03.03.2026 13:54 │
12	│ │ Messages: 42 │
13	│ [typing indicator] │ │
14	├──────────────────────────────┴──────────────────────┤
15	│ [textarea] [↑] │
16	└─────────────────────────────────────────────────────┘

xPulse Chat – UI/UX Layout Concept v1.3.0

Goal

App Shell

Basic Structure

Components

Left Sidebar

Content (top to bottom)

Behaviour

Top Bar

User Menu Dropdown (right)

Area Title – by Route

Chat Status in Area Title

Dynamic Content – by Route

`/peer/list` – Default State

`/chat/:hash` – Chat View

`/peer/add` – Add Peer / Re-Pair

`/profile` – Profile View

Text Pages (`/info`, `/guidelines`, `/disclaimer`)

`/changelog` – Changelog

Mobile Navigation

CSS / Layout Technical

What Is Removed

Open Questions / Decisions

Chat Info Panel (right in chat)

Panel / Sidebar State (localStorage)