chore: Nuxt 4 upgrade (#7426)

frontend/app/components/Layout/LayoutParts/TheSnackbar.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="text-center">
+    <v-snackbar
+      v-model="toastAlert.open"
+      location="top"
+      :color="toastAlert.color"
+      timeout="2000"
+    >
+      <v-icon
+        v-if="icon"
+        dark
+        start
+        :icon="icon"
+      />
+
+      {{ toastAlert.title }}
+      {{ toastAlert.text }}
+
+      <template #actions>
+        <v-btn
+          variant="text"
+          @click="toastAlert.open = false"
+        >
+          {{ $t('general.close') }}
+        </v-btn>
+      </template>
+    </v-snackbar>
+    <v-snackbar
+      v-model="toastLoading.open"
+      content-class="py-2"
+      density="compact"
+      location="bottom"
+      :timeout="-1"
+      :color="toastLoading.color"
+    >
+      <div
+        class="d-flex flex-column align-center justify-start"
+        @click="toastLoading.open = false"
+      >
+        <div class="mb-2 mt-0 text-subtitle-1 text-center">
+          {{ toastLoading.text }}
+        </div>
+        <v-progress-linear
+          indeterminate
+          color="white-darken-2"
+        />
+      </div>
+    </v-snackbar>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useNuxtApp } from "#app";
+import { toastAlert, toastLoading } from "~/composables/use-toast";
+
+const { $globals } = useNuxtApp();
+const icon = computed(() => {
+  switch (toastAlert.color) {
+    case "error":
+      return $globals.icons.alertOutline;
+    case "success":
+      return $globals.icons.checkBold;
+    case "info":
+      return $globals.icons.informationOutline;
+    default:
+      return $globals.icons.alertOutline;
+  }
+});
+</script>