Add toast message on execution interrupted (#490)

* Move toast to top level

* Toast store

src/components/sidebar/tabs/QueueSidebarTab.vue

@@ -36,7 +36,6 @@
       </div>
     </template>
   </SideBarTabTemplate>
-  <Toast />
   <ConfirmPopup />
   <ContextMenu ref="menu" :model="menuItems" />
 </template>
@@ -44,7 +43,6 @@
 <script setup lang="ts">
 import Button from 'primevue/button'
 import ConfirmPopup from 'primevue/confirmpopup'
-import Toast from 'primevue/toast'
 import ContextMenu from 'primevue/contextmenu'
 import TaskItem from './queue/TaskItem.vue'
 import SideBarTabTemplate from './SidebarTabTemplate.vue'

src/components/toast/GlobalToast.vue

@@ -0,0 +1,28 @@
+<template>
+  <Toast />
+</template>
+
+<script setup lang="ts">
+import { useToastStore } from '@/stores/toastStore'
+import Toast from 'primevue/toast'
+import { useToast } from 'primevue/usetoast'
+import { watch } from 'vue'
+
+const toast = useToast()
+const toastStore = useToastStore()
+
+watch(
+  () => toastStore.messages,
+  (newMessages) => {
+    if (newMessages.length === 0) {
+      return
+    }
+
+    newMessages.forEach((message) => {
+      toast.add(message)
+    })
+    toastStore.removeAll()
+  },
+  { deep: true }
+)
+</script>