singlechat/DESIGN-KONZEPT.md

e# Design-Konzept: Modernisierung SingleChat

## Zielbild

SingleChat soll moderner, ruhiger und effizienter wirken, ohne seinen funktionalen Charakter zu verlieren. Die Oberfläche bleibt kompakt und schnell erfassbar, bekommt aber:

- eine konsistentere Farbwelt
- dezentere Rundungen
- klarere Hierarchien
- bessere mobile Nutzbarkeit
- mehr optische Ruhe bei gleicher Informationsdichte

Das Ziel ist keine komplette Neugestaltung, sondern ein kontrolliertes Redesign mit klarer Wiedererkennbarkeit.

## Beobachtungen im aktuellen UI

- Das Hauptgrün ist sehr dominant und wird auf vielen Flächen vollflächig eingesetzt.
- Navigation, Userliste und Chat konkurrieren visuell stark miteinander.
- Abstände und Höhen sind teilweise grob, dadurch wirkt die Oberfläche weniger präzise und nicht platzsparend.
- Farben codieren Geschlechter stark, aber ohne neutrales Basissystem um diese Akzentfarben herum.
- Mobile Nutzung ist nur eingeschränkt vorbereitet, weil die Desktop-Struktur sehr starr ist.

## Design-Prinzipien

- Kompakt vor luftig: wenig vertikale Höhe verschwenden.
- Neutraler Grundaufbau, Akzentfarbe nur gezielt einsetzen.
- Rundungen ja, aber klein bis mittel: modern, nicht verspielt.
- Hohe Kontraste für Lesbarkeit, aber weichere Flächenkontraste.
- Eine saubere visuelle Hierarchie: App-Rahmen, Navigation, Liste, Chat, Eingabe.
- Responsive first ab Tablet abwärts, ohne Desktop-Stärke zu verlieren.

## Visuelle Richtung

### Grundcharakter

Die App soll wie ein modernes, nüchternes Messaging-Tool wirken:

- heller, neutraler Grundton
- gedämpftes Grün als Markenfarbe
- weiche Grauabstufungen für Flächen und Grenzen
- gezielte Statusfarben statt bunter Dauerflächen

### Farbstrategie

Die bisherige grüne Identität bleibt erhalten, wird aber deutlich verfeinert.

#### Primärpalette

- `Primary 700`: `#245c3a`
- `Primary 600`: `#2f6f46`
- `Primary 500`: `#3d8654`
- `Primary 100`: `#e7f1ea`

#### Neutrale Flächen

- `Bg App`: `#f4f6f5`
- `Bg Panel`: `#ffffff`
- `Bg Subtle`: `#eef2ef`
- `Border`: `#d7dfd9`
- `Text Strong`: `#18201b`
- `Text Muted`: `#5f6b63`

#### Status-/Akzentfarben

Diese Farben nur als Marker, Badge oder kleine Flächen einsetzen, nicht mehr als große Vollflächen:

- Info/aktiv: `#3f7cac`
- Erfolg: `#3d8654`
- Warnung: `#c78a2c`
- Fehler: `#c55252`

#### Geschlechterkennzeichnung

Die Geschlechterfarben sollten erhalten bleiben, aber stark abgeschwächt werden:

- nicht als Vollton-Hintergrund der kompletten User-Zeile
- stattdessen als linke Farbleiste, Punktindikator oder Badge
- Text bleibt auf neutralem Hintergrund

Dadurch bleibt die Kodierung sichtbar, ohne die Lesbarkeit und Ruhe zu stören.

## Formensprache

### Rundungen

- Panels: `10px`
- Inputs/Buttons: `8px`
- Kleine Tags/Badges: `999px`
- Message-Bubbles: `10px`

Damit wirkt die App zeitgemäß, bleibt aber sachlich.

### Schatten und Linien

- Statt starker Schatten: feine Konturen
- Schatten nur für Layer-Wechsel, z. B. mobiles Panel oder Bild-Modal
- Standardgrenze: `1px solid #d7dfd9`

## Typografie

Die vorhandene `Noto Sans`-Basis ist sinnvoll, vor allem wegen der Sprachabdeckung. Sie sollte beibehalten werden.

Empfohlene Hierarchie:

- App-Titel: `20px / 600`
- Bereichstitel: `16px / 600`
- Standardtext: `14px / 400`
- Meta-Text: `12px / 500`
- Buttons/Navigation: `13px / 600`

Wichtig:

- geringere Zeilenhöhen in Steuerbereichen
- mehr Gewichtsunterschied statt mehr Schriftgröße

## Layout-Konzept

### Desktop

Empfohlene Struktur:

- obere App-Bar mit Branding und Status
- darunter kompakte Aktionsleiste
- links Userliste
- rechts Hauptbereich mit Chat/Header/Input

#### Größen

- Header: `48px`
- Aktionsleiste: `40px`
- Userliste: `260px` Standardbreite
- Chat-Header: `52px`
- Eingabebereich: `56px` bis `64px`

Die vertikale Verdichtung ist wichtig, damit mehr Chat-Inhalt sichtbar bleibt.

### Tablet

- Userliste auf `220px` reduzieren
- Menüeinträge enger setzen
- Meta-Informationen im Chat-Header stärker verdichten

### Mobile

Die App sollte auf kleineren Breiten nicht dreispaltig bleiben.

Stattdessen:

- Userliste als einblendbares Off-Canvas-Panel
- Hauptnavigation horizontal scrollbar oder als Icon/Text-Leiste
- Chatbereich füllt die Breite vollständig
- Chat-Header mit Nutzername in einer Zeile, Meta in zweiter kleiner Zeile
- Eingabebereich sticky am unteren Rand

## Komponenten-Konzept

### 1. Header

Aktuell sehr schlicht. Neu:

- weißes oder leicht getöntes Panel
- kleineres, präziseres Branding
- optional rechts Session-/Statusinformationen
- klare Unterkante mit feiner Border statt harter Farbfläche

### 2. Menüleiste

Ziel:

- weniger laut
- kompakter
- besser scannbar

Empfehlung:

- Buttons als sekundäre Tabs oder Segment-Buttons
- aktiver Punkt über Hintergrundtönung statt kräftiger Vollfarbe
- Ungelesen-Zähler als Badge
- Timeout und aktiver Chat als Meta-Info statt als dominante Blöcke

### 3. Userliste

Ziel:

- dichter, moderner, besser filterbar wirkend

Empfehlung:

- Zeilenhöhe ca. `36px` bis `40px`
- Flagge kleiner und sauber ausgerichtet
- Username links, Alter/Geschlecht als Meta rechts oder in zweiter reduzierter Textspur
- Geschlecht über Badge/Farbmarker statt komplette Hintergrundfarbe
- Hover nur leicht getönt
- aktive Auswahl klar, aber nicht grell

### 4. Chat-Header

Aktuell stark farbig nach Geschlecht. Neu:

- neutraler Header mit kleinem Farbakzent
- Name prominent, Meta-Infos sekundär
- optional Statuspunkt oder Marker links

Beispiel:

- linke 4px-Akzentleiste nach Geschlecht
- weißer Hintergrund
- Name dunkel
- Alter/Land in `Text Muted`

### 5. Nachrichtenbereich

Ziel:

- besser lesbare Nachrichten
- klarere Trennung zwischen eigener und fremder Nachricht
- trotzdem kompakt

Empfehlung:

- Nachrichten als Bubble mit leichter Tönung
- eigene Nachrichten leicht grünlich-neutral
- fremde Nachrichten weiß
- Username klein, aber klar erkennbar
- Timestamp nur per Hover oder sehr subtil
- weniger Rahmen, mehr Fläche und Abstandssystem

### 6. Eingabebereich

Ziel:

- platzsparend
- mobil belastbar
- moderne Interaktion

Empfehlung:

- Eingabefeld als primäre Fläche
- Senden-Button kompakt
- Smiley/Bild als Icon-Buttons mit identischer Größe
- obere Border statt massiver grauer Box
- Smiley-Leiste als kleines Popover statt großer Block

### 7. Login-Bereich

Ziel:

- freundlicher erster Eindruck
- kompakteres Formular

Empfehlung:

- Formular in Card-Layout
- zweispaltig auf breiteren Screens, einspaltig mobil
- Labels kleiner, Felder konsistent hoch
- Willkommenstext visuell vom Formular getrennt

### 8. Tabellen und Systemmeldungen

Empfehlung:

- Systemmeldungen mit getönter Fläche und weicher Border
- Befehlstabellen mit sticky Header beibehalten
- Tabellen kompakter paddings, aber bessere Zeilentrennung

## Spacing-System

Ein festes Raster reduziert visuelle Unruhe.

Empfehlung:

- `4px`
- `8px`
- `12px`
- `16px`
- `24px`

Regel:

- Innenabstände in Controls meist `8px` oder `12px`
- Bereichsabstände meist `12px` oder `16px`
- keine beliebigen Einzelwerte mehr

## Responsive-Regeln

### Breakpoints

- `>= 1200px`: voller Desktop
- `< 1200px`: kompakter Desktop/Tablet
- `< 900px`: Userliste schmaler, Navigation enger
- `< 720px`: Userliste als Overlay/Drawer
- `< 560px`: Aktionsleiste stark verdichten, nur wichtigste Texte sichtbar

### Mobile Prioritäten

- aktive Konversation hat Vorrang vor Nebenspalten
- Bedienelemente müssen einhändig erreichbar bleiben
- keine horizontalen Layoutbrüche
- Chatinput immer sichtbar

## Interaktionsdetails

- Hover-Effekte sehr leicht halten
- Fokus-Zustände klar sichtbar, farblich aus Primärpalette
- Animationen kurz und funktional, z. B. `120ms` bis `180ms`
- Keine permanente Pulsen-Animation für Inbox mehr; Badge oder sanfter Highlight-Zustand reicht meist aus

## Technische Empfehlung für die Umsetzung

### Design Tokens in `client/src/style.css`

Zuerst zentrale CSS-Variablen definieren:

- Farben
- Radius
- Shadow
- Border
- Spacing
- Höhen wichtiger UI-Bausteine

Beispielhafte Token-Gruppen:

- `--color-bg-app`
- `--color-bg-panel`
- `--color-border`
- `--color-primary`
- `--radius-md`
- `--space-2`
- `--header-height`

### Danach komponentenweise umbauen

Sinnvolle Reihenfolge:

1. globale Tokens und App-Hintergrund
2. Header und Menüleiste
3. Userliste
4. Chat-Header und Nachrichten
5. Eingabebereich
6. Login und Nebenansichten
7. Responsive Verhalten

## Nicht-Ziele

- kein komplettes Rebranding
- keine starke Glasoptik
- keine großen Rundungen
- keine farblich überladene Gender-Codierung
- keine luftige SaaS-Optik mit verschwendetem Platz

## Ergebnisbild in einem Satz

SingleChat soll nach der Überarbeitung wie ein kompaktes, modernes Chat-Tool wirken: ruhig, klar strukturiert, responsiv, markentreu grün und deutlich hochwertiger, ohne unnötig anders auszusehen.