From 6c2a149f9664d9bed3cffec7a86dffe20a0a089b Mon Sep 17 00:00:00 2001
From: Jonas <77726472+kobolol@users.noreply.github.com>
Date: Sat, 18 Apr 2026 23:02:01 +0200
Subject: [PATCH] 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.
---
 GUI/src/Layout.vue                      | 145 ++++++++++++++++++++----
 GUI/src/plugins/routesLayout.ts         |   4 +-
 GUI/src/routes/authentication/Login.vue |  23 ++--
 GUI/src/stores/appBanners.ts            |  82 ++++++++++++++
 codexInfo.md                            |   9 ++
 5 files changed, 226 insertions(+), 37 deletions(-)
 create mode 100644 GUI/src/stores/appBanners.ts

diff --git a/GUI/src/Layout.vue b/GUI/src/Layout.vue
index 15c4851..6d9b0af 100644
--- a/GUI/src/Layout.vue
+++ b/GUI/src/Layout.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from 'vue'
+import { storeToRefs } from 'pinia'
 import { useDisplay, useTheme } from 'vuetify'
 import { useRoute, useRouter } from 'vue-router'
 
@@ -11,6 +12,7 @@ import {
   logout,
   type CurrentUser,
 } from '@/services/authSession'
+import { useAppBannersStore } from '@/stores/appBanners'
 
 const display = useDisplay()
 const theme = useTheme()
@@ -21,7 +23,8 @@ const currentYear = new Date().getFullYear()
 const themeStorageKey = 'theme'
 const currentUser = ref<CurrentUser | null>(null)
 const isLoggingOut = ref(false)
-const authMessage = ref('')
+const appBannersStore = useAppBannersStore()
+const { banners } = storeToRefs(appBannersStore)
 
 function normalizeRoutePath(path: string) {
   if (!path || path === '/') {
@@ -107,14 +110,6 @@ const themeLabel = computed(() =>
 )
 const isAuthenticated = computed(() => currentUser.value !== null)
 const userLabel = computed(() => currentUser.value?.userName ?? 'Konto')
-const showAuthMessage = computed({
-  get: () => authMessage.value.length > 0,
-  set: (nextValue: boolean) => {
-    if (!nextValue) {
-      authMessage.value = ''
-    }
-  },
-})
 
 function applyTheme(nextTheme: 'light' | 'dark', persist = true) {
   theme.global.name.value = nextTheme
@@ -133,6 +128,11 @@ function toggleTheme() {
   applyTheme(isDarkTheme.value ? 'light' : 'dark')
 }
 
+function navigateToBrandTarget() {
+  const targetRouteName = isAuthenticated.value ? 'Dashboard' : 'Home'
+  void router.push({ name: targetRouteName })
+}
+
 async function refreshAuthState(options: { force?: boolean } = {}) {
   try {
     currentUser.value = await fetchCurrentUser({ force: options.force === true })
@@ -147,7 +147,6 @@ async function handleLogout() {
   }
 
   isLoggingOut.value = true
-  authMessage.value = ''
 
   try {
     await logout()
@@ -155,9 +154,9 @@ async function handleLogout() {
     await router.replace({ name: 'Login' })
   } catch (error) {
     if (error instanceof AuthRequestError) {
-      authMessage.value = error.message
+      appBannersStore.pushError(error.message, 'Abmeldung fehlgeschlagen')
     } else {
-      authMessage.value = 'Abmeldung fehlgeschlagen. Bitte versuche es erneut.'
+      appBannersStore.pushError('Abmeldung fehlgeschlagen. Bitte versuche es erneut.', 'Abmeldung fehlgeschlagen')
     }
   } finally {
     isLoggingOut.value = false
@@ -165,6 +164,10 @@ async function handleLogout() {
   }
 }
 
+function dismissBanner(id: string) {
+  appBannersStore.dismiss(id)
+}
+
 function changeWebsiteTitle() {
   if (activeRoute.value) {
     document.title = `Hoard | ${activeRoute.value.name}`
@@ -207,7 +210,7 @@ watch(
         />
       </template>
 
-      <button type="button" class="brand-button" @click="router.push({ name: 'Home' })">
+      <button type="button" class="brand-button" @click="navigateToBrandTarget">
         <span class="brand-mark">
           <img :src="iconImage" alt="Hoard Icon" class="brand-logo" />
         </span>
@@ -385,14 +388,28 @@ watch(
       </v-footer>
     </v-main>
 
-    <v-snackbar
-      v-model="showAuthMessage"
-      color="error"
-      location="bottom right"
-      timeout="4500"
+    <section
+      v-if="banners.length > 0"
+      class="app-banner-stack"
+      aria-live="polite"
+      aria-label="Systemmeldungen"
     >
-      {{ authMessage }}
-    </v-snackbar>
+      <transition-group name="app-banner-transition" tag="div" class="app-banner-list">
+        <v-alert
+          v-for="banner in banners"
+          :key="banner.id"
+          :class="['app-banner-item', `app-banner-item--${banner.type}`]"
+          :type="banner.type"
+          variant="tonal"
+          border="start"
+          closable
+          @click:close="dismissBanner(banner.id)"
+        >
+          <p v-if="banner.title" class="app-banner-title">{{ banner.title }}</p>
+          <p class="app-banner-text">{{ banner.message }}</p>
+        </v-alert>
+      </transition-group>
+    </section>
   </v-app>
 </template>
 
@@ -578,6 +595,84 @@ watch(
   font-size: var(--font-size-sm);
 }
 
+.app-banner-stack {
+  position: fixed;
+  right: max(var(--space-4), env(safe-area-inset-right));
+  bottom: max(var(--space-4), env(safe-area-inset-bottom));
+  z-index: 2100;
+  pointer-events: none;
+}
+
+.app-banner-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  width: min(420px, calc(100vw - (2 * var(--space-4))));
+}
+
+:deep(.app-banner-item) {
+  pointer-events: auto;
+  border: 1px solid var(--color-border) !important;
+  box-shadow: var(--shadow-md);
+}
+
+:deep(.app-banner-item .v-alert__overlay),
+:deep(.app-banner-item .v-alert__underlay) {
+  opacity: 0 !important;
+}
+
+:deep(.app-banner-item .v-alert__content) {
+  line-height: 1.45;
+}
+
+:deep(.app-banner-item--error) {
+  background-color: color-mix(in srgb, var(--color-danger) 10%, var(--color-surface) 90%) !important;
+}
+
+:deep(.app-banner-item--warning) {
+  background-color: color-mix(in srgb, var(--color-warning) 10%, var(--color-surface) 90%) !important;
+}
+
+:deep(.app-banner-item--info) {
+  background-color: color-mix(in srgb, var(--color-info) 10%, var(--color-surface) 90%) !important;
+}
+
+:deep(.app-banner-item--success) {
+  background-color: color-mix(in srgb, var(--color-success) 10%, var(--color-surface) 90%) !important;
+}
+
+.app-banner-title,
+.app-banner-text {
+  margin: 0;
+}
+
+.app-banner-title {
+  margin-bottom: 2px;
+  color: var(--color-text);
+  font-size: var(--font-size-sm);
+  font-weight: 700;
+}
+
+.app-banner-text {
+  color: var(--color-text-secondary);
+  line-height: 1.45;
+}
+
+.app-banner-transition-enter-active,
+.app-banner-transition-leave-active {
+  transition: opacity 180ms ease, transform 180ms ease;
+}
+
+.app-banner-transition-enter-from,
+.app-banner-transition-leave-to {
+  opacity: 0;
+  transform: translateY(10px);
+}
+
+.app-banner-transition-move {
+  transition: transform 180ms ease;
+}
+
 @media (width <= 960px) {
   .hoard-app-bar {
     padding-inline:
@@ -645,6 +740,16 @@ watch(
     justify-content: center;
     gap: var(--space-2);
   }
+
+  .app-banner-stack {
+    right: var(--hoard-mobile-safe-right);
+    left: var(--hoard-mobile-safe-left);
+    bottom: calc(var(--hoard-mobile-safe-bottom) + var(--space-1));
+  }
+
+  .app-banner-list {
+    width: 100%;
+  }
 }
 
 @media (width <= 600px) {
diff --git a/GUI/src/plugins/routesLayout.ts b/GUI/src/plugins/routesLayout.ts
index fb9893e..6f88d31 100644
--- a/GUI/src/plugins/routesLayout.ts
+++ b/GUI/src/plugins/routesLayout.ts
@@ -52,7 +52,7 @@ export const routes: LayoutRoute[] = [
   },
   {
     path: '/',
-    name: 'Dash',
+    name: 'Dashboard',
     description: 'Geschützter Bereich für dein Konto',
     icon: 'mdi-view-dashboard-outline',
     visible: Visibility.Authenticated,
@@ -70,7 +70,7 @@ export const routes: LayoutRoute[] = [
     name: 'Login',
     description: 'Logge dich ein',
     icon: 'mdi-login',
-    visible: Visibility.Hidden,
+    visible: Visibility.Unauthenticated,
     meta: {
       path: '/login',
       name: 'Login',
diff --git a/GUI/src/routes/authentication/Login.vue b/GUI/src/routes/authentication/Login.vue
index 60831ce..895bd19 100644
--- a/GUI/src/routes/authentication/Login.vue
+++ b/GUI/src/routes/authentication/Login.vue
@@ -2,12 +2,13 @@
 import { computed, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { AuthRequestError, login } from '@/services/authSession'
+import { useAppBannersStore } from '@/stores/appBanners'
 
 const showPassword = ref(false)
 const userName = ref('')
 const password = ref('')
 const isSubmitting = ref(false)
-const errorMessage = ref('')
+const appBannersStore = useAppBannersStore()
 
 const route = useRoute()
 const router = useRouter()
@@ -27,12 +28,11 @@ const redirectPath = computed(() => {
 
 async function handleSubmit() {
   if (submitDisabled.value) {
-    errorMessage.value = 'Bitte Benutzername und Passwort eingeben.'
+    appBannersStore.pushError('Bitte Benutzername und Passwort eingeben.', 'Anmeldung fehlgeschlagen')
     return
   }
 
   isSubmitting.value = true
-  errorMessage.value = ''
 
   try {
     await login({
@@ -43,9 +43,12 @@ async function handleSubmit() {
     await router.replace(redirectPath.value)
   } catch (error) {
     if (error instanceof AuthRequestError) {
-      errorMessage.value = error.message
+      appBannersStore.pushError(error.message, 'Anmeldung fehlgeschlagen')
     } else {
-      errorMessage.value = 'Anmeldung fehlgeschlagen. Bitte versuche es erneut.'
+      appBannersStore.pushError(
+        'Anmeldung fehlgeschlagen. Bitte versuche es erneut.',
+        'Anmeldung fehlgeschlagen',
+      )
     }
   } finally {
     isSubmitting.value = false
@@ -85,16 +88,6 @@ async function handleSubmit() {
           <p>Melde dich mit deinem bestehenden Konto an.</p>
         </div>
 
-        <v-alert
-          v-if="errorMessage"
-          type="error"
-          variant="tonal"
-          density="comfortable"
-          border="start"
-        >
-          {{ errorMessage }}
-        </v-alert>
-
         <v-text-field
           v-model="userName"
           label="Benutzername"
diff --git a/GUI/src/stores/appBanners.ts b/GUI/src/stores/appBanners.ts
new file mode 100644
index 0000000..6e7749f
--- /dev/null
+++ b/GUI/src/stores/appBanners.ts
@@ -0,0 +1,82 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+export type AppBannerType = 'success' | 'info' | 'warning' | 'error'
+
+export interface AppBannerMessage {
+  id: string
+  type: AppBannerType
+  title?: string
+  message: string
+  createdAt: number
+}
+
+interface PushBannerInput {
+  type?: AppBannerType
+  title?: string
+  message: string
+}
+
+const MAX_BANNERS = 8
+
+function createBannerId() {
+  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+    return crypto.randomUUID()
+  }
+
+  return `banner-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`
+}
+
+export const useAppBannersStore = defineStore('app-banners', () => {
+  const banners = ref<AppBannerMessage[]>([])
+
+  function push(input: PushBannerInput) {
+    const now = Date.now()
+    const type = input.type ?? 'info'
+    const normalizedMessage = input.message.trim()
+    if (normalizedMessage.length === 0) {
+      return ''
+    }
+
+    const lastBanner = banners.value[banners.value.length - 1]
+    if (
+      lastBanner &&
+      lastBanner.type === type &&
+      lastBanner.message === normalizedMessage &&
+      now - lastBanner.createdAt < 1200
+    ) {
+      return lastBanner.id
+    }
+
+    const banner: AppBannerMessage = {
+      id: createBannerId(),
+      type,
+      title: input.title,
+      message: normalizedMessage,
+      createdAt: now,
+    }
+
+    banners.value = [...banners.value, banner].slice(-MAX_BANNERS)
+    return banner.id
+  }
+
+  function pushError(message: string, title = 'Fehler') {
+    return push({ type: 'error', title, message })
+  }
+
+  function dismiss(id: string) {
+    banners.value = banners.value.filter((banner) => banner.id !== id)
+  }
+
+  function clear() {
+    banners.value = []
+  }
+
+  return {
+    banners,
+    push,
+    pushError,
+    dismiss,
+    clear,
+  }
+})
diff --git a/codexInfo.md b/codexInfo.md
index 68280ff..869bd1d 100644
--- a/codexInfo.md
+++ b/codexInfo.md
@@ -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`).