jonas/Hoard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add global app banners and integrate into layout

Browse Source 
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:
Jonas
2026-04-18 23:02:01 +02:00
parent 86ed227566
commit 6c2a149f96
5 changed files with 226 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
GUI/src/Layout.vue
+125 -20
View File
@@ -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) {
GUI/src/plugins/routesLayout.ts
+2 -2
View File
@@ -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',
GUI/src/routes/authentication/Login.vue
+8 -15
View File
@@ -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"
GUI/src/stores/appBanners.ts
+82
View File
@@ -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,
}
})