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

templates/layout.html

@@ -56,6 +56,9 @@
             {% block content %}{% endblock %}
     </main>
 
+    <!-- Toast Container -->
+    <div id="toast-container" class="toast-container position-fixed bottom-0 end-0 p-3"></div>
+
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"
         integrity="sha384-j1CDi7MgGQ12Z7Qab0qlWQ/Qqz24Gc6BM0thvEMVjHnfYGF0rmFCozFSxQBxwHKO"
         crossorigin="anonymous"></script>

templates/settings.html

@@ -221,33 +221,36 @@
             });
         });
 
-        form.addEventListener('submit', (event) => {
-            event.preventDefault(); 
+        form.addEventListener('submit', async (event) => {
+            event.preventDefault();
             try {
                 const state = buildFormState();
-                fetch('/api/settings', {
+            
+                const response = await fetch('/api/settings', {
                     method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json'
-                    },
+                    headers: { 'Content-Type': 'application/json' },
                     body: JSON.stringify(state)
-                })
-                .then(response => {
-                    if (!response.ok) {
-                        return response.json().then(data => {
-                            throw new Error(data.errors?.join("\n") || "Unknown error");
-                        });
-                    }
-                    return response.json();
-                })
-                .then(data => {
-                    console.log("Sync result:", data);
-                })
-                .catch(err => {
-                    console.error("Submission error:", err);
                 });
+            
+                const contentType = response.headers.get("content-type");
+            
+                if (!response.ok) {
+                    if (contentType && contentType.includes("application/json")) {
+                        const data = await response.json();
+                        throw new Error(data.errors?.join("\n") || "Unknown error");
+                    } else {
+                        const text = await response.text();
+                        throw new Error("Unexpected response:\n" + text.slice(0, 200));
+                    }
+                }
+            
+                const data = await response.json();
+                console.log("Sync result:", data);
+                renderToast({ message: 'Settings updated successfully.', type: 'success' });
+            
             } catch (err) {
-                console.error("Failed to build form state:", err);
+                console.error("Submission error:", err);
+                renderToast({ message: `Failed to update settings, ${err}`, type: 'danger' });
             }
         });