init commit

app/templates/_flash_sticky.html

@@ -0,0 +1,35 @@
+{% set bs_class = {
+  'success': 'bg-success text-white',
+  'error':   'bg-danger text-white',
+  'warning': 'bg-warning text-dark',
+  'info':    'bg-info text-dark'
+} %}
+
+{% with messages = get_flashed_messages(with_categories=True) %}
+  {% if messages %}
+    <div class="toast-container position-fixed top-0 end-0 p-3" style="z-index: 1100;">
+      {% for category, message in messages %}
+        <div class="toast align-items-center {{ bs_class.get(category, 'bg-secondary text-white') }}" role="alert" aria-live="assertive" aria-atomic="true">
+          <div class="d-flex">
+            <div class="toast-body">
+              <strong class="me-2">{{ category|capitalize }}:</strong> {{ 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>
+      {% endfor %}
+    </div>
+
+    <script>
+      // Show all toasts on page load
+      document.addEventListener("DOMContentLoaded", function () {
+        var toastElList = [].slice.call(document.querySelectorAll('.toast'));
+        toastElList.forEach(function (toastEl) {
+          // Autohide after 5s; tweak as needed
+          var t = new bootstrap.Toast(toastEl, { autohide: true, delay: 5000 });
+          t.show();
+        });
+      });
+    </script>
+  {% endif %}
+{% endwith %}