firebase implementation

src/components/SnackbarQueue.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { useSnackbarStore } from '@/stores/snackbar.ts'
+
+const snackbarStore = useSnackbarStore()
+</script>
+
+<template>
+  <v-snackbar-queue
+    ref="queue"
+    v-model="snackbarStore.snackbarQueue"
+    location="bottom end"
+    timeout="5000"
+    total-visible="5"
+  />
+</template>
+
+<style scoped lang="scss">
+.bouncy-slide-x-transition-enter-active,
+.bouncy-slide-x-transition-leave-active,
+.bouncy-slide-x-transition-move,
+.bouncy-slide-x-reverse-transition-enter-active,
+.bouncy-slide-x-reverse-transition-leave-active,
+.bouncy-slide-x-reverse-transition-move {
+  transition: transform, opacity;
+  transition-duration: 0.5s;
+  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+.bouncy-slide-x-transition-enter-from,
+.bouncy-slide-x-transition-leave-to {
+  opacity: 0;
+  transform: translateX(-30%);
+}
+.bouncy-slide-x-reverse-transition-enter-from,
+.bouncy-slide-x-reverse-transition-leave-to {
+  opacity: 0;
+  transform: translateX(30%);
+}
+</style>