Proxy our toast usage via our own methods to be able to control enabling/disabling it.

ui/assets/css/style.css

@@ -325,7 +325,10 @@ hr {
   white-space: nowrap;
 }
 
-
 .is-max-width {
   max-width: calc(100% - 10px);
 }
+
+.is-bold {
+  font-weight: bold;
+}

ui/components/ConditionForm.vue

@@ -149,7 +149,7 @@ const props = defineProps({
   },
 })
 
-const toast = useToast()
+const toast = useNotification()
 const form = reactive(JSON.parse(JSON.stringify(props.item)))
 const import_string = ref('')
 const showImport = useStorage('showImport', false);

ui/components/FloatingImage.vue

@@ -43,7 +43,7 @@ const props = defineProps({
 });
 
 const cache = useSessionCache()
-const toast = useToast()
+const toast = useNotification()
 const url = ref()
 const error = ref(false)
 const isPreloading = ref(false)

ui/components/GetInfo.vue

@@ -40,7 +40,7 @@ import { request } from '~/utils/index'
 const emitter = defineEmits(['closeModel'])
 const isLoading = ref(false)
 const data = ref({})
-const toast = useToast()
+const toast = useNotification()
 
 const props = defineProps({
   link: {

ui/components/History.vue

@@ -385,7 +385,7 @@ const emitter = defineEmits(['getInfo', 'add_new'])
 const config = useConfigStore()
 const stateStore = useStateStore()
 const socket = useSocketStore()
-const toast = useToast()
+const toast = useNotification()
 
 const selectedElms = ref([])
 const masterSelectAll = ref(false)

ui/components/ImageView.vue

@@ -23,7 +23,7 @@ import { request } from '~/utils/index'
 const emitter = defineEmits(['closeModel'])
 const isLoading = ref(false)
 const data = ref({})
-const toast = useToast()
+const toast = useNotification()
 const image = ref('')
 
 const props = defineProps({

ui/components/NewDownload.vue

@@ -189,7 +189,7 @@ const props = defineProps({
 const emitter = defineEmits(['getInfo', 'clear_form'])
 const config = useConfigStore()
 const socket = useSocketStore()
-const toast = useToast()
+const toast = useNotification()
 
 const showAdvanced = useStorage('show_advanced', false)
 const addInProgress = ref(false)

ui/components/NotificationForm.vue

@@ -268,7 +268,7 @@
 <script setup>
 import { useStorage } from '@vueuse/core'
 const emitter = defineEmits(['cancel', 'submit']);
-const toast = useToast();
+const toast = useNotification();
 const props = defineProps({
   reference: {
     type: String,

ui/components/PresetForm.vue

@@ -218,7 +218,7 @@ const props = defineProps({
 })
 
 const config = useConfigStore()
-const toast = useToast()
+const toast = useNotification()
 const form = reactive(JSON.parse(JSON.stringify(props.preset)))
 const import_string = ref('')
 const showImport = useStorage('showImport', false);

ui/components/TaskForm.vue

@@ -233,7 +233,7 @@ import { useStorage } from '@vueuse/core'
 import { CronExpressionParser } from 'cron-parser'
 
 const emitter = defineEmits(['cancel', 'submit']);
-const toast = useToast();
+const toast = useNotification();
 const config = useConfigStore();
 const showImport = useStorage('showImport', false);
 const import_string = ref('');

ui/components/VideoPlayer.vue

@@ -31,7 +31,7 @@ import { onMounted, onUpdated, ref, onUnmounted } from 'vue'
 import Hls from 'hls.js'
 import { makeDownload } from '~/utils/index'
 const config = useConfigStore()
-const toast = useToast()
+const toast = useNotification()
 
 const props = defineProps({
   item: {

ui/composables/useNotification.ts

@@ -0,0 +1,47 @@
+import { useStorage } from '@vueuse/core'
+import { useToast } from "vue-toastification"
+
+type notificationType = 'info' | 'success' | 'warning' | 'error'
+type notificationOptions = {
+  timeout?: number
+}
+
+const allowToast = useStorage<boolean>('allow_toasts', true)
+const toast = useToast()
+
+function notify(type: notificationType, message: string, opts?: notificationOptions): void {
+  if (!allowToast.value) {
+    return;
+  }
+
+  if (!opts) {
+    opts = {}
+  }
+
+  switch (type) {
+    case 'info':
+      toast.info(message, opts)
+      break;
+    case 'success':
+      toast.success(message, opts)
+      break;
+    case 'warning':
+      toast.warning(message, opts)
+      break;
+    case 'error':
+      toast.error(message, opts)
+      break;
+    default:
+      toast.error(`Unknown notification type: ${type}. ${message}`, opts)
+      break;
+  }
+}
+
+export default function useNotification() {
+  return {
+    info: (message: string, opts?: notificationOptions) => notify('info', message, opts),
+    success: (message: string, opts?: notificationOptions) => notify('success', message, opts),
+    warning: (message: string, opts?: notificationOptions) => notify('warning', message, opts),
+    error: (message: string, opts?: notificationOptions) => notify('error', message, opts),
+  }
+}

ui/composables/useToast.js

@@ -1,2 +0,0 @@
-import { useToast } from "vue-toastification";
-export default () => useToast()

ui/pages/browser/[...slug].vue

@@ -155,7 +155,7 @@ import moment from 'moment'
 import { useStorage } from '@vueuse/core'
 
 const route = useRoute()
-const toast = useToast()
+const toast = useNotification()
 const config = useConfigStore()
 const socket = useSocketStore()
 

ui/pages/conditions.vue

@@ -113,7 +113,7 @@
 <script setup>
 import { request } from '~/utils/index'
 
-const toast = useToast()
+const toast = useNotification()
 const config = useConfigStore()
 const socket = useSocketStore()
 

ui/pages/logs.vue

@@ -117,7 +117,7 @@ import { useStorage } from '@vueuse/core'
 
 let scrollTimeout = null
 
-const toast = useToast()
+const toast = useNotification()
 const socket = useSocketStore()
 const config = useConfigStore()
 

ui/pages/notifications.vue

@@ -140,7 +140,7 @@ div.is-centered {
 <script setup>
 import { request } from '~/utils/index'
 
-const toast = useToast()
+const toast = useNotification()
 const config = useConfigStore()
 const socket = useSocketStore()
 

ui/pages/presets.vue

@@ -149,7 +149,7 @@ div.is-centered {
 <script setup>
 import { request } from '~/utils/index'
 
-const toast = useToast()
+const toast = useNotification()
 const config = useConfigStore()
 const socket = useSocketStore()
 

ui/pages/tasks.vue

@@ -122,7 +122,7 @@ import moment from 'moment'
 import { CronExpressionParser } from 'cron-parser'
 import { request } from '~/utils/index'
 
-const toast = useToast()
+const toast = useNotification()
 const config = useConfigStore()
 const socket = useSocketStore()
 

ui/stores/SocketStore.js

@@ -5,7 +5,7 @@ export const useSocketStore = defineStore('socket', () => {
   const runtimeConfig = useRuntimeConfig()
   const config = useConfigStore()
   const stateStore = useStateStore()
-  const toast = useToast()
+  const toast = useNotification()
 
   const socket = ref(null);
   const isConnected = ref(false);

ui/utils/index.js

@@ -1,6 +1,4 @@
-import { useStorage } from '@vueuse/core'
+const toast = useNotification()
-
-const toast = useToast()
 const AG_SEPARATOR = '.'
 
 /**