feat(#336): Profil-Menü + Bereichs-Nav (App-Shell Phase 1) #343

Merged

admin-mrrm merged 1 commit from feat/336-app-shell into main

2026-05-19 21:30:57 +02:00

admin-mrrm commented

2026-05-19 21:24:34 +02:00

Owner

Refs #336 — Phase 1 von zwei.

Was

Umsetzung des Profil-Menüs oben rechts und Trennung von Bereichs-Nav (täglich) vs. Settings/Konto, identisch für Web und Mobile.

Web

Neuer Header (full-width) mit Logo links + Profil-Avatar rechts; Klick öffnet Tamagui-Popover mit Einstellungen / Konto / Abmelden
Sidebar zeigt nur noch die täglichen Bereiche (Einkaufen, Todo, Listen, Mail, Archiv, Pakete) — Einstellungen und Konto aus NAV_ITEMS entfernt
useSignOut()-Hook (apps/web/src/hooks/use-sign-out.ts) bündelt die Logout-Logik; konto.tsx und das Profil-Menü teilen sich denselben Code
Avatar zeigt Initialen aus name / preferredUsername / email (Fallback: ?)
layout.spec.tsx ergänzt: Einstellungen/Konto fehlen im Layout, Profil-Menü-Trigger ist vorhanden

Mobile

ProfileMenu via headerRight im (drawer)/_layout.tsx: Avatar öffnet Tamagui-Sheet mit denselben drei Aktionen
Drawer-NAV_ITEMS identisch reduziert
Eigener useSignOut()-Hook (apps/mobile/src/hooks/use-sign-out.ts) — bewusst nicht shared, da Web/Mobile unterschiedliche Navigations- und Auth-APIs verwenden (useNavigate vs. expo-router + performLogout)

Bewusst Phase 2 (Folge-PR / -Issue)

Eigene Sub-Navigation im /einstellungen-Bereich (verschachtelte Routes + sub-sidebar / settings-stack)
Off-Canvas-Hamburger-Drawer auf schmalen Web-Viewports (heute weiterhin inline-Bar unter dem Header — wenig elegant, aber funktional)

Damit dieser PR überschaubar bleibt und das eigentliche Kern-UX-Ziel (Profil-Menü oben rechts, keine Settings-Vermischung im Hauptmenü) sofort live geht. Sub-Navigation wird in einem Folge-Issue separat geplant.

Tests

pnpm -r typecheck ✅
pnpm -r test ✅ (web 62, mobile 54, alles übrige unverändert grün)
Web layout.spec: 2 neue Assertions

Test plan

pnpm -r typecheck
pnpm -r test
Web Desktop: Avatar oben rechts, Dropdown öffnet, Einstellungen / Konto / Abmelden navigieren
Web schmal: Header bleibt sichtbar, Nav-Items in horizontaler Leiste (Phase 2 → Hamburger)
Mobile: Avatar oben rechts im Drawer-Header, Sheet öffnet sauber
Abmelden funktioniert aus dem Profil-Menü (Web + Mobile)

Refs #336 — Phase 1 von zwei. ## Was Umsetzung des Profil-Menüs oben rechts und Trennung von Bereichs-Nav (täglich) vs. Settings/Konto, identisch für Web und Mobile. ### Web - Neuer Header (full-width) mit Logo links + Profil-Avatar rechts; Klick öffnet Tamagui-Popover mit `Einstellungen / Konto / Abmelden` - Sidebar zeigt nur noch die täglichen Bereiche (Einkaufen, Todo, Listen, Mail, Archiv, Pakete) — `Einstellungen` und `Konto` aus `NAV_ITEMS` entfernt - `useSignOut()`-Hook (`apps/web/src/hooks/use-sign-out.ts`) bündelt die Logout-Logik; `konto.tsx` und das Profil-Menü teilen sich denselben Code - Avatar zeigt Initialen aus `name` / `preferredUsername` / `email` (Fallback: `?`) - `layout.spec.tsx` ergänzt: Einstellungen/Konto fehlen im Layout, Profil-Menü-Trigger ist vorhanden ### Mobile - `ProfileMenu` via `headerRight` im `(drawer)/_layout.tsx`: Avatar öffnet Tamagui-Sheet mit denselben drei Aktionen - Drawer-`NAV_ITEMS` identisch reduziert - Eigener `useSignOut()`-Hook (`apps/mobile/src/hooks/use-sign-out.ts`) — bewusst nicht shared, da Web/Mobile unterschiedliche Navigations- und Auth-APIs verwenden (`useNavigate` vs. `expo-router` + `performLogout`) ## Bewusst Phase 2 (Folge-PR / -Issue) - **Eigene Sub-Navigation im /einstellungen-Bereich** (verschachtelte Routes + sub-sidebar / settings-stack) - **Off-Canvas-Hamburger-Drawer auf schmalen Web-Viewports** (heute weiterhin inline-Bar unter dem Header — wenig elegant, aber funktional) Damit dieser PR überschaubar bleibt und das eigentliche Kern-UX-Ziel (Profil-Menü oben rechts, keine Settings-Vermischung im Hauptmenü) sofort live geht. Sub-Navigation wird in einem Folge-Issue separat geplant. ## Tests - `pnpm -r typecheck` ✅ - `pnpm -r test` ✅ (web 62, mobile 54, alles übrige unverändert grün) - Web layout.spec: 2 neue Assertions ## Test plan - [x] pnpm -r typecheck - [x] pnpm -r test - [ ] Web Desktop: Avatar oben rechts, Dropdown öffnet, `Einstellungen` / `Konto` / `Abmelden` navigieren - [ ] Web schmal: Header bleibt sichtbar, Nav-Items in horizontaler Leiste (Phase 2 → Hamburger) - [ ] Mobile: Avatar oben rechts im Drawer-Header, Sheet öffnet sauber - [ ] Abmelden funktioniert aus dem Profil-Menü (Web + Mobile)

admin-mrrm added 1 commit

2026-05-19 21:24:34 +02:00

feat(#336 ): Profil-Menü oben rechts + Bereichs-Nav nur fürs Tägliche (Phase 1)

continuous-integration/drone/push Build is passing

Details

continuous-integration/drone/pr Build is passing

Details

e90d12a949

Web (apps/web)
- Neue Header-Zeile (durchgehend, full-width) mit Logo links und Profil-Avatar
  rechts; Klick öffnet Tamagui Popover mit „Einstellungen / Konto / Abmelden"
- Layout: NAV_ITEMS um „Einstellungen" und „Konto" reduziert — Sidebar zeigt
  jetzt nur tägliche Bereiche (Einkaufen, Todo, Listen, Mail, Archiv, Pakete)
- useSignOut-Hook extrahiert; konto.tsx und Profil-Menü teilen sich die Logik
- Avatar zeigt Initialen aus name / preferredUsername / email
- layout.spec ergänzt: Einstellungen/Konto fehlen, Profil-Menü-Trigger ist da

Mobile (apps/mobile)
- Drawer-NAV_ITEMS reduziert (identisch zum Web)
- ProfileMenu via headerRight im (drawer)/_layout: Avatar öffnet Tamagui Sheet
  mit „Einstellungen / Konto / Abmelden"
- useSignOut-Hook parallel zur Web-Variante (eigene Datei, da unterschiedliche
  Navigations-/Auth-APIs)

Bewusst Phase 2 (Folge-PR/-Issue):
- eigene Sub-Navigation/Sidebar im /einstellungen-Bereich
- Off-Canvas-Drawer auf schmalen Web-Viewports (heute weiter inline-Nav)

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>