From 2f1ac3a747c5865d2a32941ec151d863328c7e3d Mon Sep 17 00:00:00 2001
From: "Aaron D. Lee" <aaron.daniel.lee@mgial.com>
Date: Sun, 4 Jan 2026 00:27:32 -0500
Subject: [PATCH] Switch flash messages to toast notifications
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Simple single-line toasts in top-right corner
- Positioned below navbar (70px from top)
- Auto-dismiss after 4 seconds
- Color-coded: green success, yellow warning, red error

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 frontends/web/templates/base.html | 31 +++++++++++++++++++------------
 1 file changed, 19 insertions(+), 12 deletions(-)

diff --git a/frontends/web/templates/base.html b/frontends/web/templates/base.html
index 7408ad7..5054bf0 100644
--- a/frontends/web/templates/base.html
+++ b/frontends/web/templates/base.html
@@ -65,19 +65,22 @@
     </nav>
 
     <main class="container py-5">
-        {% with messages = get_flashed_messages(with_categories=true) %}
-            {% if messages %}
-                <div class="mx-auto mb-3" style="max-width: 460px;">
-                    {% for category, message in messages %}
-                        <div class="alert alert-{{ 'danger' if category == 'error' else ('warning' if category == 'warning' else 'success') }} alert-dismissible fade show" role="alert">
-                            <i class="bi bi-{{ 'exclamation-triangle' if category == 'error' else ('exclamation-circle' if category == 'warning' else 'check-circle') }} me-2"></i>
-                            {{ message }}
-                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
+        <!-- Toast notifications container -->
+        <div class="toast-container position-fixed end-0 p-3" style="z-index: 1100; top: 70px;">
+            {% with messages = get_flashed_messages(with_categories=true) %}
+                {% for category, message in messages %}
+                    <div class="toast show align-items-center text-bg-{{ 'danger' if category == 'error' else ('warning' if category == 'warning' else 'success') }} border-0" role="alert" data-bs-autohide="true" data-bs-delay="4000">
+                        <div class="d-flex">
+                            <div class="toast-body">
+                                <i class="bi bi-{{ 'exclamation-triangle' if category == 'error' else ('exclamation-circle' if category == 'warning' else 'check-circle') }} me-2"></i>
+                                {{ message }}
+                            </div>
+                            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
                         </div>
-                    {% endfor %}
-                </div>
-            {% endif %}
-        {% endwith %}
+                    </div>
+                {% endfor %}
+            {% endwith %}
+        </div>
 
         {% block content %}{% endblock %}
     </main>
@@ -92,6 +95,10 @@
     </footer>
 
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+    <script>
+    // Initialize toasts (auto-hide after delay)
+    document.querySelectorAll('.toast').forEach(el => new bootstrap.Toast(el));
+    </script>
     {% block scripts %}{% endblock %}
 </body>
 </html>