Add global app banners and integrate into layout
Introduce a global app banners store (GUI/src/stores/appBanners.ts) and switch authentication error/notification flows to use it. GUI/src/Layout.vue now consumes the banner store, replaces the single snackbar with a stacked, dismissible banner UI (styles, transitions and z-index included), and adds navigateToBrandTarget() to route the brand button based on auth state. GUI/src/routes/authentication/Login.vue was updated to push errors to the new banner store and remove the local alert. Minor route adjustments in GUI/src/plugins/routesLayout.ts: rename 'Dash' to 'Dashboard' and change Login visibility to Unauthenticated. codexInfo.md updated to document these UI/behavior changes.
This commit is contained in:
@@ -107,6 +107,9 @@ Ich baue alleine neben meiner Ausbildung eine einfache self-hosted Web-App für
|
||||
- Öffentliche Landingpage wurde auf `/welcome` verschoben; `404`- und Impressum-Links zur Startseite zeigen entsprechend auf `/welcome`.
|
||||
- Sidebar-Navigation berücksichtigt Auth-Status differenziert: `Startseite` wird nur unangemeldet angezeigt (inkl. unterem Drawer-Link), `Dash` nur angemeldet.
|
||||
- Topbar zeigt bei aktiver Anmeldung den Benutzernamen; die Abmelden-Aktion erscheint im Hover-Menü unter dem Benutzernamen (Desktop) bzw. im Account-Menü (Mobile).
|
||||
- Fehler werden jetzt global über einen Banner-Stack am unteren Seitenrand angezeigt (routeübergreifend, stapelbar, manuell schließbar).
|
||||
- Der globale Banner-Stack im Layout nutzt einen kontrollierten `z-index` und opake Hintergründe, damit Fehlermeldungen im Vordergrund bleiben und kaum durchscheinende Inhalte zeigen.
|
||||
- Klick auf Logo/Branding in der Topbar führt abhängig vom Auth-Status: angemeldet auf `Dashboard`, unangemeldet auf `Welcome`.
|
||||
|
||||
## Änderungen durch Codex
|
||||
- Grundlegender UI-Neuaufbau der App-Shell (`GUI/src/Layout.vue`) inklusive Navigation, Footer und Seitenkontext.
|
||||
@@ -155,3 +158,9 @@ Ich baue alleine neben meiner Ausbildung eine einfache self-hosted Web-App für
|
||||
- `GUI/src/Layout.vue` erweitert: Sidebar filtert jetzt auch `Visibility.Authenticated`/`Visibility.Unauthenticated`, zeigt Trennlinie vor Auth-Einträgen, Topbar zeigt Benutzernamen bei Login und bietet Abmelden (Desktop + Mobile) inkl. Fehler-Snackbar.
|
||||
- `GUI/src/plugins/routesLayout.ts` weiter angepasst: `Startseite` nutzt jetzt `Visibility.Unauthenticated`, damit sie in der Sidebar nach Login nicht mehr auswählbar ist.
|
||||
- `GUI/src/Layout.vue` Topbar angepasst: separater Logout-Button entfernt; Logout ist jetzt als Menüpunkt unter dem Benutzernamen verfügbar (`open-on-hover` auf Desktop, Menü auf Mobile).
|
||||
- `GUI/src/routes/authentication/Login.vue` um Alert-Polish ergänzt: Fehler-Alert nutzt eigene Klasse mit stabiler Mindesthöhe und erhöhter Zeilenhöhe, damit Meldungen vollständig sichtbar sind.
|
||||
- Neuer Store `GUI/src/stores/appBanners.ts` ergänzt: globale Meldungen können aus jeder Seite per `push`/`pushError` hinzugefügt und einzeln geschlossen werden.
|
||||
- `GUI/src/Layout.vue` auf globalen Banner-Stack umgestellt: mehrere Meldungen werden unten rechts gestapelt angezeigt und bleiben beim Navigieren erhalten.
|
||||
- `GUI/src/routes/authentication/Login.vue` von lokalem Inline-Fehler-Alert auf globale Banner-Meldungen umgestellt.
|
||||
- `GUI/src/Layout.vue` Banner-Polish: Banner-Hintergründe je Typ explizit opak getönt, Overlay-/Underlay-Transparenz deaktiviert und `z-index` auf `2100` zurückgesetzt.
|
||||
- `GUI/src/Layout.vue` Brand-Navigation ergänzt: Logo/Titel-Button nutzt jetzt `navigateToBrandTarget()` und leitet eingeloggte Nutzer auf `Dashboard`, sonst auf `Home` (`/welcome`).
|
||||
|
||||
Reference in New Issue
Block a user