change snackbar to nitivue

frontend/src/components/message.vue

@@ -1,18 +1,38 @@
 <template>
-    <v-snackbar
-    v-model="sb.showMsg"
-    location="top"
-    :color="snackbar.color"
-    :timeout="snackbar.timeout">
-      {{ snackbar.message }}
-    </v-snackbar>
+  <Notivue v-slot="item">
+    <NotivueSwipe :item="item">
+      <Notification
+        :item="item"
+        :theme="theme"
+        :dir="direction"
+        :icons="outlinedIcons"
+        :hideClose="true"
+        @click="item.clear"
+      />
+    </NotivueSwipe>
+  </Notivue>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
-import Message from '@/store/modules/message'
+import { Notivue, Notification, NotivueSwipe, outlinedIcons, pastelTheme, darkTheme } from 'notivue'
+import { computed } from 'vue'
+import { useTheme } from 'vuetify'
+import vuetify from '@/plugins/vuetify';
 
-const sb = Message()
+const Theme = useTheme()
 
-const snackbar = ref(sb.snackbar)
+const theme = computed(() =>{
+  return Theme.global.name.value == "light" ? pastelTheme : darkTheme
+})
+
+const direction = computed(() => {
+  return vuetify.locale.current.value == 'fa' ? 'rtl' : 'ltr'
+})
 </script>
+
+<style>
+:root {
+  --nv-z: 10020;
+}
+
+</style>