[FEAT] Toastr and saving UX improvements

src/components/utilities/ToastContainer.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="fixed bottom-5 right-5 z-[100] flex flex-col items-end space-y-2 pointer-events-none">
+    <TransitionGroup
+      enter-active-class="transform ease-out duration-300 transition"
+      enter-from-class="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
+      enter-to-class="translate-y-0 opacity-100 sm:translate-x-0"
+      leave-active-class="transition ease-in duration-100"
+      leave-from-class="opacity-100"
+      leave-to-class="opacity-0"
+    >
+      <ToastItem v-for="toast in toasts" :key="toast.id" :toast="toast" />
+    </TransitionGroup>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { useToast } from '@/composables/useToast';
+  import ToastItem from './ToastItem.vue';
+
+  const { toasts } = useToast();
+</script>