refactor: improvemets

Signed-off-by: Sebastian Krupinski <krupinski01@gmail.com>

core/src/App.vue

@@ -1,11 +1,13 @@
 <template>
   <RouterView></RouterView>
+  <SharedSnackbar />
 </template>
 
 <script setup lang="ts">
 import { RouterView } from 'vue-router';
 import { onMounted, watch } from 'vue';
 import { useTheme } from 'vuetify';
+import SharedSnackbar from '@KTXC/components/shared/SharedSnackbar.vue';
 import { useLayoutStore } from '@KTXC/stores/layoutStore';
 import { useUserStore } from '@KTXC/stores/userStore';
 import { useTenantStore } from '@KTXC/stores/tenantStore';

core/src/components/shared/SharedSnackbar.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { useSnackbar } from '@KTXC/composables/useSnackbar'
+
+const {
+  snackbarVisible,
+  snackbarMessage,
+  snackbarColor,
+  snackbarTimeout,
+  hideSnackbar,
+} = useSnackbar()
+</script>
+
+<template>
+  <v-snackbar
+    :model-value="snackbarVisible"
+    :color="snackbarColor"
+    :timeout="snackbarTimeout"
+    location="bottom right"
+    @update:model-value="value => !value && hideSnackbar()"
+  >
+    {{ snackbarMessage }}
+
+    <template #actions>
+      <v-btn variant="text" @click="hideSnackbar()">
+        Close
+      </v-btn>
+    </template>
+  </v-snackbar>
+</template>

core/src/composables/useSnackbar.ts

@@ -2,7 +2,7 @@
  * Simple snackbar/toast notification composable
  * Uses Vuetify's snackbar component
  */
-import { ref } from 'vue'
+import { nextTick, ref } from 'vue'
 
 export interface SnackbarOptions {
   message: string
@@ -10,21 +10,60 @@ export interface SnackbarOptions {
   timeout?: number
 }
 
+interface SnackbarState {
+  message: string
+  color: string
+  timeout: number
+}
+
 const snackbarVisible = ref(false)
 const snackbarMessage = ref('')
 const snackbarColor = ref<string>('info')
 const snackbarTimeout = ref(3000)
+const snackbarQueue = ref<SnackbarState[]>([])
+
+function showNextSnackbar() {
+  if (snackbarVisible.value || snackbarQueue.value.length === 0) {
+    return
+  }
+
+  const nextSnackbar = snackbarQueue.value.shift()
+
+  if (!nextSnackbar) {
+    return
+  }
+
+  snackbarMessage.value = nextSnackbar.message
+  snackbarColor.value = nextSnackbar.color
+  snackbarTimeout.value = nextSnackbar.timeout
+  snackbarVisible.value = true
+}
 
 export function useSnackbar() {
   const showSnackbar = (options: SnackbarOptions) => {
-    snackbarMessage.value = options.message
-    snackbarColor.value = options.color || 'info'
-    snackbarTimeout.value = options.timeout || 3000
-    snackbarVisible.value = true
+    
+    const notification = {
+      message: options.message,
+      color: options.color || 'info',
+      timeout: options.timeout || 3000,
+    }
+
+    if (!snackbarVisible.value && snackbarQueue.value.length === 0) {
+      snackbarMessage.value = notification.message
+      snackbarColor.value = notification.color
+      snackbarTimeout.value = notification.timeout
+      snackbarVisible.value = true
+      return
+    }
+
+    snackbarQueue.value = [...snackbarQueue.value, notification]
   }
 
   const hideSnackbar = () => {
     snackbarVisible.value = false
+    void nextTick(() => {
+      showNextSnackbar()
+    })
   }
 
   return {
@@ -32,6 +71,7 @@ export function useSnackbar() {
     snackbarMessage,
     snackbarColor,
     snackbarTimeout,
+    snackbarQueue,
     showSnackbar,
     hideSnackbar,
   }

core/src/shared/index.ts

@@ -16,6 +16,7 @@ export { useLayoutStore } from '../stores/layoutStore'
 // Composables
 export { useUser } from '../composables/useUser'
 export { useClipboard } from '../composables/useClipboard'
+export { useSnackbar } from '../composables/useSnackbar'
 
 // Services
 export { userService } from '../services/user/userService'