feat: improve multiple toasts on the same page from different sources

app/templates/common/fragments/toasts.html

@@ -1,7 +1,6 @@
 {% load i18n %}
 {% load toast_bg %}
 {% if messages %}
-    <div class="toast-container position-fixed bottom-0 end-0 p-3">
   {% for message in messages %}
       <div class="toast align-items-center text-bg-{{ message.tags | toast_bg }} border-0"
            role="alert"
@@ -18,5 +17,4 @@
           <div class="toast-body">{{ message }}</div>
       </div>
   {% endfor %}
-    </div>
 {% endif %}

app/templates/includes/toasts.html

@@ -1,3 +1,6 @@
-<div id="toasts" hx-get="{% url 'toasts' %}"
-     hx-trigger="load, toast from:window, toasts from:window">
+<div id="toasts">
+  <div class="toast-container position-fixed bottom-0 end-0 p-3" hx-trigger="load, updated from:window" hx-get="{% url 'toasts' %}" hx-swap="beforeend">
+
   </div>
+</div>
+

frontend/src/application/bootstrap.js

@@ -7,12 +7,15 @@ function initiateToasts() {
     const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl));  // eslint-disable-line no-undef
 
     for (let i = 0; i < toastList.length; i++) {
+        if (toastList[i].isShown() === false) {
             toastList[i].show();
             toastList[i]._element.addEventListener('hidden.bs.toast', (event) => {
                 event.target.remove();
             });
         }
     }
+}
 
+document.addEventListener('DOMContentLoaded', initiateToasts, false);
 document.addEventListener('htmx:afterSwap', initiateToasts, false);
 initiateToasts();