feat: use vue-sonner for toasts

frontend/package.json

@@ -39,6 +39,7 @@
 		"vue": "^3.4.15",
 		"vue-codemirror": "^6.0.1",
 		"vue-router": "^4.0.12",
+		"vue-sonner": "^1.0.3",
 		"vue-tsc": "^1.6.5",
 		"vuedraggable": "^4.1.0"
 	},

frontend/src/App.vue

@@ -4,16 +4,16 @@
 		<Suspense v-else>
 			<AppShell />
 		</Suspense>
-		<Toasts />
+		<Toaster :visible-toasts="2" :rich-colors="true" position="bottom-right" />
 	</div>
 </template>
 
 <script setup>
 import AppShell from '@/components/AppShell.vue'
-import Toasts from '@/utils/toasts'
-import { inject, onBeforeUnmount, computed } from 'vue'
-import { useRoute } from 'vue-router'
 import sessionStore from '@/stores/sessionStore'
+import { computed, inject, onBeforeUnmount } from 'vue'
+import { useRoute } from 'vue-router'
+import { Toaster } from 'vue-sonner'
 
 const route = useRoute()
 const isGuestView = computed(() => route.meta.isGuestView)

frontend/src/utils/toasts.js

@@ -1,19 +1,13 @@
-import { h, reactive, ref } from 'vue'
-import Toast from '@/components/Toast.vue'
-
-let toasts = ref([])
-
-export default {
-	name: 'Toasts',
-	render() {
-		return toasts.value.map((toast) => h(Toast, toast))
-	},
-}
+import { toast } from 'vue-sonner'
 
 export function createToast(toastOptions) {
-	let toast = reactive({
-		key: 'toast-' + toasts.value.length,
-		...toastOptions,
-	})
-	toasts.value.push(toast)
+	const { title, variant, message } = toastOptions
+	const variantToFnMap = {
+		info: toast.info,
+		error: toast.error,
+		warning: toast.warning,
+		success: toast.success,
+	}
+	const toastFn = variantToFnMap[variant]
+	toastFn(message || title)
 }

yarn.lock

@@ -4818,6 +4818,11 @@ vue-router@*, vue-router@^4.0.12, vue-router@^4.1.6:
   dependencies:
     "@vue/devtools-api" "^6.5.0"
 
+vue-sonner@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/vue-sonner/-/vue-sonner-1.0.3.tgz#6d94c4e299c1a1da87cca7cc561bdd3078516a48"
+  integrity sha512-uJPvtcftMjmiXfpsMtB77+TkzWn8gEPI0l5sN+X+UqYuAOVacf0dk7ONqRsc5DWy1ilJtLexz/wSggwjimkYKA==
+
 vue-template-compiler@^2.7.14:
   version "2.7.14"
   resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz#4545b7dfb88090744c1577ae5ac3f964e61634b1"