Use native Bootstrap toasts instead of Oruga.

frontend/scss/azuracast/overrides/_toasts.scss

@@ -1,9 +1,5 @@
 body.page-full {
-  .notifictations.is-top {
-    padding-top: $header-nav-height + 2rem;
-  }
-
-  div.toast-notification.top-0 {
-    top: 72px !important;
+  div.toast-container.top-0 {
+    top: $header-nav-height !important;
   }
 }

frontend/vue/components/Common/Modal.vue

@@ -23,7 +23,7 @@
                         >
                             {{ title }}
                         </h1>
-                        <slot name="modal-header"/>
+                        <slot name="modal-header" />
                         <button
                             type="button"
                             class="btn-close"
@@ -33,14 +33,14 @@
                     </div>
                     <div class="modal-body">
                         <loading :loading="busy">
-                            <slot name="default"/>
+                            <slot name="default" />
                         </loading>
                     </div>
                     <div
                         v-if="slots['modal-footer']"
                         class="modal-footer"
                     >
-                        <slot name="modal-footer"/>
+                        <slot name="modal-footer" />
                     </div>
                 </div>
             </div>

frontend/vue/components/Common/Toast.vue

@@ -0,0 +1,34 @@
+<template>
+    <div
+        class="toast align-items-center toast-notification mb-3"
+        :class="'text-bg-'+variant"
+        role="alert"
+        aria-live="assertive"
+        aria-atomic="true"
+    >
+        <div class="d-flex">
+            <div class="toast-body">
+                {{ message }}
+            </div>
+            <button
+                type="button"
+                class="btn-close me-2 m-auto"
+                data-bs-dismiss="toast"
+                aria-label="Close"
+            />
+        </div>
+    </div>
+</template>
+
+<script setup>
+const props = defineProps({
+    message: {
+        type: String,
+        required: true
+    },
+    variant: {
+        type: String,
+        default: 'info'
+    }
+})
+</script>

frontend/vue/functions/useNotify.js

@@ -1,28 +1,36 @@
 import {useTranslate} from "~/vendor/gettext";
-import {useProgrammatic} from "@oruga-ui/oruga-next";
+import {h, render} from "vue";
+import {default as BSToast} from 'bootstrap/js/src/toast';
+
+import Toast from '~/components/Common/Toast.vue';
+
+export function createToast(props) {
+    const vNode = h(Toast, props);
+
+    const newDiv = document.createElement('div');
+    newDiv.style.display = "contents";
+    
+    document.querySelector('.toast-container').appendChild(newDiv);
+
+    render(vNode, newDiv);
+
+    return new BSToast(vNode.el);
+}
 
 /* Composition API BootstrapVue utilities */
 export function useNotify() {
     const {$gettext} = useTranslate();
-    const {oruga} = useProgrammatic();
 
     const notify = (message = null, options = {}) => {
         if (document.hidden) {
             return;
         }
 
-        const defaults = {
-            rootClass: 'toast-notification',
-            duration: 3000,
-            position: 'top-right',
-            closable: true
-        };
-
-        oruga.notification.open({
-            ...defaults,
+        const toast = createToast({
             ...options,
-            message: message
+            message
         });
+        toast.show();
     };
 
     const notifyError = (message = null, options = {}) => {
@@ -53,18 +61,14 @@ export function useNotify() {
         return message;
     };
 
-    let $loadingComponent;
+    // let $loadingComponent;
 
     const showLoading = () => {
-        $loadingComponent = oruga.loading.open({
-            fullPage: true,
-            container: null
-        });
-        setTimeout(() => $loadingComponent.close(), 3 * 1000);
+        // TODO Replace Oruga
     };
 
     const hideLoading = () => {
-        $loadingComponent.close();
+        // TODO Replace Oruga
     };
 
     let $isAxiosLoading = false;

templates/partials/toasts.phtml

@@ -5,22 +5,25 @@
 $flashObj = $request->getAttribute(App\Http\ServerRequest::ATTR_SESSION_FLASH);
 
 $notifies = [];
-
-if (null !== $flashObj && $flashObj->hasMessages()):
-    foreach ($flashObj->getMessages() as $message):
-        ?>
-        <div
-            class="toast align-items-center toast-notification text-bg-<?= $message['color'] ?> position-absolute end-0 top-0 m-3"
-            role="alert" aria-live="assertive" aria-atomic="true">
-            <div class="d-flex">
-                <div class="toast-body">
-                    <?= $message['text'] ?>
-                </div>
-                <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
-            </div>
-        </div>
+?>
+<div class="toast-container top-0 end-0 p-3">
     <?php
-    endforeach;
-endif;
-
-
+    if (null !== $flashObj && $flashObj->hasMessages()):
+        foreach ($flashObj->getMessages() as $message):
+            ?>
+            <div
+                class="toast align-items-center toast-notification text-bg-<?= $message['color'] ?>"
+                role="alert" aria-live="assertive" aria-atomic="true">
+                <div class="d-flex">
+                    <div class="toast-body">
+                        <?= $message['text'] ?>
+                    </div>
+                    <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast"
+                            aria-label="Close"></button>
+                </div>
+            </div>
+        <?php
+        endforeach;
+    endif;
+    ?>
+</div>