Logout-Button im App-Header (neben Avatar) #40

New Issue

Lars · 2026-03-24T06:09:13+01:00

Lars commented

2026-03-24 06:09:13 +01:00

Priorität: Low (Nice-to-Have)
Aufwand: ~15 Minuten
Labels: quick-win, ux

Beschreibung

Logout-Button direkt in der App-Top-Leiste (Header) hinzufügen für schnellen Zugriff.

Aktueller Zustand:

Logout ist nur über Settings-Seite erreichbar
User muss: Avatar klicken → Settings öffnen → nach unten scrollen → Logout-Button finden

Gewünschter Zustand:

Logout-Button direkt im Header sichtbar
Schneller, direkter Zugriff ohne Navigation

Design (empfohlen)

LogOut-Icon (lucide-react) rechts neben dem Avatar:

Tooltip: "Abmelden"
Click → Logout mit Bestätigung
Hover-Effekt: Rot einfärben (#D85A30)

Implementierung

Siehe Details in .claude/feature-requests/logout-button-header.md

Betroffene Dateien

frontend/src/App.jsx (Header, Zeile 120-128)

Code-Änderungen

Import: import { LogOut } from 'lucide-react'
Handler: handleLogout() mit confirm() Dialog
Button-Icon rechts neben Avatar platzieren

Styling-Überlegungen

Icon sollte auf Mobile gut klickbar sein (min. 44x44px Touch-Target)
Hover-Effekt: Rot einfärben für "Gefahr"
Bestätigung via confirm() oder schöneres Modal (optional)

Testing

Desktop: Icon erscheint rechts neben Avatar
Mobile: Icon ist gut klickbar (min. 44x44px)
Hover-Effekt funktioniert (rot)
Click → Bestätigung → Logout → Redirect zu Login
Nach Logout: Session gelöscht, nicht mehr eingeloggt

Notizen

Settings-Seite behält Logout-Button (Fallback)
Eventuell später zu Dropdown-Menü erweitern

Quelle: .claude/feature-requests/logout-button-header.md

**Priorität:** Low (Nice-to-Have) **Aufwand:** ~15 Minuten **Labels:** quick-win, ux ## Beschreibung Logout-Button direkt in der App-Top-Leiste (Header) hinzufügen für schnellen Zugriff. **Aktueller Zustand:** - Logout ist nur über Settings-Seite erreichbar - User muss: Avatar klicken → Settings öffnen → nach unten scrollen → Logout-Button finden **Gewünschter Zustand:** - Logout-Button direkt im Header sichtbar - Schneller, direkter Zugriff ohne Navigation ## Design (empfohlen) LogOut-Icon (lucide-react) rechts neben dem Avatar: - Tooltip: "Abmelden" - Click → Logout mit Bestätigung - Hover-Effekt: Rot einfärben (#D85A30) ## Implementierung Siehe Details in `.claude/feature-requests/logout-button-header.md` ### Betroffene Dateien - `frontend/src/App.jsx` (Header, Zeile 120-128) ### Code-Änderungen 1. Import: `import { LogOut } from 'lucide-react'` 2. Handler: `handleLogout()` mit confirm() Dialog 3. Button-Icon rechts neben Avatar platzieren ## Styling-Überlegungen - Icon sollte auf Mobile gut klickbar sein (min. 44x44px Touch-Target) - Hover-Effekt: Rot einfärben für "Gefahr" - Bestätigung via `confirm()` oder schöneres Modal (optional) ## Testing - [ ] Desktop: Icon erscheint rechts neben Avatar - [ ] Mobile: Icon ist gut klickbar (min. 44x44px) - [ ] Hover-Effekt funktioniert (rot) - [ ] Click → Bestätigung → Logout → Redirect zu Login - [ ] Nach Logout: Session gelöscht, nicht mehr eingeloggt ## Notizen - Settings-Seite behält Logout-Button (Fallback) - Eventuell später zu Dropdown-Menü erweitern --- **Quelle:** `.claude/feature-requests/logout-button-header.md`

Lars added the

feature

low

labels 2026-03-24 06:09:13 +01:00

Sign in to join this conversation.