feat(ui): add bootstrap toast for messages

app/templates/base.html

@@ -87,6 +87,18 @@
             <main class="col ms-sm-auto px-md-4 py-4">
                 {% block content %}{% endblock %}
             </main>
+            {% if message %}
+            <div class="position-fixed top-0 start-50 translate-middle-x p-3" style="z-index: 1055; margin-top: 20px;">
+                <div id="messageToast" class="toast text-bg-{{ message_type | default('info') }} border-0" 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>
+            </div>
+            {% endif %}
         </div>
     </div>
 
@@ -106,6 +118,14 @@
             // listen for system theme changes
             window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', applyAutoTheme);
         }
+        // show toast message
+        document.addEventListener('DOMContentLoaded', () => {
+            const toastEl = document.getElementById('messageToast');
+            if (toastEl) {
+                const toast = new bootstrap.Toast(toastEl, { delay: 3000 });
+                toast.show();
+            }
+        });
     </script>
 </body>