refactor: uniform toast and better error display

html-router/templates/auth/account_settings.html

@@ -40,44 +40,15 @@
   </div>
 
   <script>
-    // Using a single toast element avoids creating many timeouts when clicking repeatedly.
-    let current_toast = null;
-    let toast_timeout = null;
-
-    function show_toast(message) {
-      if (current_toast) {
-        // Update message and reset timeout if a toast is already displayed.
-        current_toast.querySelector('span').textContent = message;
-        clearTimeout(toast_timeout);
-      } else {
-        current_toast = document.createElement('div');
-        current_toast.className = 'toast';
-        current_toast.innerHTML = `<div class="alert alert-success">
-        <div>
-        <span>${message}</span>
-        </div>
-        </div>`;
-        document.body.appendChild(current_toast);
-      }
-      toast_timeout = setTimeout(() => {
-        if (current_toast) {
-          current_toast.remove();
-          current_toast = null;
-        }
-      }, 3000);
-    }
-
     function copy_api_key() {
       const input = document.getElementById('api_key_input');
       if (!input) return;
       if (navigator.clipboard && window.isSecureContext) {
-        navigator.clipboard.writeText(input.value).then(() => {
-          show_toast('API key copied!');
-        }).catch(() => {
-          show_toast('Copy failed');
-        });
+        navigator.clipboard.writeText(input.value)
+          .then(() => show_toast('API key copied!', 'success'))
+          .catch(() => show_toast('Copy failed', 'error'));
       } else {
-        show_toast('Copy not supported');
+        show_toast('Copy not supported', 'info');
       }
     }
   </script>

html-router/templates/body_base.html

@@ -10,6 +10,7 @@
     {% block main %}{% endblock %}
 
     <div id="modal"></div>
+    <div id="toast-container" class="toast toast-bottom toast-end"></div>
   </div>
 </body>
 {% endblock %}

html-router/templates/head_base.html

@@ -6,8 +6,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
   <title>{% block title %}Minne{% endblock %}</title>
 
-  <!-- <meta http-equiv=" refresh" content="4"> -->
-
   <!-- Preload critical assets -->
   <link rel="preload" href="/assets/htmx.min.js" as="script">
   <link rel="preload" href="/assets/htmx-ext-sse.js" as="script">
@@ -20,6 +18,7 @@
   <script src="/assets/htmx.min.js" defer></script>
   <script src="/assets/htmx-ext-sse.js" defer></script>
   <script src="/assets/theme-toggle.js" defer></script>
+  <script src="/assets/toast.js" defer></script>
 
   <!-- Icons -->
   <link rel="icon" href="/assets/icon/favicon.ico">
@@ -33,8 +32,6 @@
   {% block head %}{% endblock %}
 
 </head>
-{% block body %}{% endblock %}
-
 <script>
   (function wait_for_htmx() {
     if (window.htmx) {
@@ -45,4 +42,6 @@
   })();
 </script>
 
+{% block body %}{% endblock %}
+
 </html>