Enhance toast notifications and improve settings form submission; implement async handling and error reporting for better user feedback

static/js/widget.js

@@ -1,3 +1,47 @@
+function renderToast({ message, type = 'info', timeout = 3000 }) {
+    if (!message) {
+        console.warn('renderToast was called without a message.');
+        return;
+    }
+
+    // Auto-create the toast container if it doesn't exist
+    let container = document.getElementById('toast-container');
+    if (!container) {
+        container = document.createElement('div');
+        container.id = 'toast-container';
+        container.className = 'toast-container position-fixed bottom-0 end-0 p-3';
+        document.body.appendChild(container);
+    }
+
+    const toastId = `toast-${Date.now()}`;
+    const wrapper = document.createElement('div');
+    wrapper.innerHTML = `
+        <div id="${toastId}" class="toast align-items-center text-bg-${type}" role="alert" aria-live="assertive" aria-atomic="true">
+            <div class="d-flex">
+                <div class="toast-body">
+                    ${message}
+                </div>
+                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
+            </div>
+        </div>
+    `;
+
+    const toastElement = wrapper.firstElementChild;
+    container.appendChild(toastElement);
+
+    const toast = new bootstrap.Toast(toastElement, { delay: timeout });
+    toast.show();
+
+    toastElement.addEventListener('hidden.bs.toast', () => {
+        toastElement.remove();
+
+        // Clean up container if empty
+        if (container.children.length === 0) {
+            container.remove();
+        }
+    });
+}
+
 const ComboBoxWidget = (() => {
     let tempIdCounter = 1;