Better notification toast

src/App.vue

@@ -1,20 +1,11 @@
 <script setup lang="ts">
 import { onMounted } from 'vue';
-import Error from '@/components/Error.vue';
 import Footer from '@/components/Footer.vue';
 import Navigation from '@/components/Navigation.vue';
-import Toast from '@/components/Toast.vue';
+import Notification from '@/components/Notification.vue';
 import { useContentStore } from '@/stores/content.store';
-import { useErrorStore } from '@/stores/error.store';
-import { useToastStore } from '@/stores/toast.store';
 import { useUserStore } from '@/stores/user.store';
 
-const errorStore = useErrorStore();
-const { flush_errors } = errorStore;
-
-const toastStore = useToastStore();
-const { dismiss } = toastStore;
-
 const contentStore = useContentStore();
 const { fetchStatic } = contentStore;
 
@@ -23,17 +14,14 @@ const { handle_session_cookie_expiration } = userStore;
 
 onMounted(async () => {
   await handle_session_cookie_expiration();
-  flush_errors();
-  dismiss();
   await fetchStatic();
 });
 
 </script>
 
 <template>
   <Navigation/>
-  <Error/>
-  <Toast/>
+  <Notification/>
   <div class="flex flex-1 flex-col">
     <RouterView v-slot="{ Component }">
       <template v-if="Component">

src/components/Notification.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia';
+import { useNotificationStore } from '@/stores/notification.store';
+
+const NotificationStore = useNotificationStore();
+const { notifications } = storeToRefs(NotificationStore);
+const { removeNotification } = NotificationStore;
+</script>
+<template>
+  <div class="fixed bottom-4 left-1/2 z-50 -translate-x-1/2 space-y-2">
+    <TransitionGroup name="notification">
+      <div
+        v-for="notification in notifications"
+        :key="notification.id"
+        class="flex max-w-sm items-center justify-between gap-2 rounded-lg p-4 shadow-lg transition-all duration-300 ease-in-out"
+        :class="[
+          notification.type === 'error' ? 'bg-red-500 text-white' : 'bg-green-500 text-white',
+        ]"
+      >
+        <div>
+          {{ notification.message }}
+        </div>
+        <button
+          type="button"
+          class="rounded-full p-1 hover:bg-red-600"
+          @click="removeNotification(notification.id)"
+        >
+          <fa-awesome-icon
+            icon="fa-times"
+          />
+        </button>
+      </div>
+    </TransitionGroup>
+  </div>
+</template>
+
+<style scoped>
+.notification-enter-active,
+.notification-leave-active {
+  transition: all 0.3s ease;
+}
+.notification-enter-from,
+.notification-leave-to {
+  opacity: 0;
+  transform: translateY(30px);
+}
+</style>

src/main.ts

@@ -29,7 +29,7 @@ import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
 import { type Component, createApp } from 'vue';
 import Multiselect from 'vue-multiselect';
 import { router } from '@/router';
-import { type ErrorMessage, useErrorStore } from '@/stores/error.store';
+import { useNotificationStore } from '@/stores/notification.store';
 
 import App from './App.vue';
 
@@ -78,28 +78,13 @@ createApp(App as Component)
   .use(router)
   .mount('#app');
 
-const { add_error } = useErrorStore();
+const { addNotification } = useNotificationStore();
 
 axios.interceptors.response.use(
   (res) => res,
-  (error: AxiosError<string | { [key: string]: string | ErrorMessage }, unknown>) => {
-    if (typeof error.response?.data === 'string') {
-      add_error({ status: error.response.status, message: error.response.data });
-    } else if (typeof error.response?.data === 'object') {
-      Object.values(error.response.data).forEach((val) => {
-        if (typeof val === 'object') {
-          Object.values(val)
-            .filter((item): item is string => typeof item === 'string')
-            .forEach((item) => add_error({ status: error.response?.status, message: item }));
-        } else {
-          add_error({ status: error.response?.status, message: val });
-        }
-      });
-    } else {
-      add_error({
-        status: error.response?.status,
-        message: 'Une erreur inattendue est survenue, veuillez réessayer plus tard. Si le problème persiste, contactez un administrateur',
-      });
+  (error: AxiosError<string | string[] | { [key: string]: string }, unknown>) => {
+    if (error.response?.data) {
+      addNotification(error.response.data, 'error');
     }
     return Promise.reject(error);
   },

src/stores/notification.store.ts

@@ -0,0 +1,42 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+interface Notification {
+  id: number;
+  message: string;
+  type: 'error' | 'info';
+}
+
+export const useNotificationStore = defineStore('notification', () => {
+  const notifications = ref<Notification[]>([]);
+
+  function removeNotification(id: number) {
+    const index = notifications.value.findIndex((n) => n.id === id);
+    if (index !== -1) {
+      notifications.value.splice(index, 1);
+    }
+  }
+
+  function addNotification(
+    message: string | string[] | { [key: string]: string },
+    type: 'error' | 'info',
+  ) {
+    if (Array.isArray(message)) {
+      message.forEach((m) => addNotification(m, type));
+      return;
+    }
+    if (typeof message === 'object') {
+      Object.keys(message).forEach((key) => addNotification(message[key], type));
+      return;
+    }
+    const id = Date.now();
+    notifications.value.push({ id, message, type });
+    setTimeout(() => removeNotification(id), 5000); // Remove after 5 seconds
+  }
+
+  return {
+    notifications,
+    addNotification,
+    removeNotification,
+  };
+});