From 255fe6f7718fd734c9f16b537ba46c60a52dcee2 Mon Sep 17 00:00:00 2001
From: Herculino Trotta <netotrotta@gmail.com>
Date: Thu, 17 Oct 2024 11:07:30 -0300
Subject: [PATCH] feat: add dismiss button and improve hiding for
 htmx-error-handler

---
 .../includes/scripts/hyperscript/htmx_error_handler.html     | 5 +++--
 app/templates/layouts/base.html                              | 5 +++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/app/templates/includes/scripts/hyperscript/htmx_error_handler.html b/app/templates/includes/scripts/hyperscript/htmx_error_handler.html
index bcf8510..b9606dc 100644
--- a/app/templates/includes/scripts/hyperscript/htmx_error_handler.html
+++ b/app/templates/includes/scripts/hyperscript/htmx_error_handler.html
@@ -1,7 +1,8 @@
 <script type="text/hyperscript">
   behavior htmx_error_handler
-    on htmx:responseError or htmx:afterRequest[detail.failed] remove .invisible .visually-hidden .swing-in-top-fwd from
+    on htmx:responseError or htmx:afterRequest[detail.failed] remove .tw-hidden from
     #loading-error then log event
-    on htmx:afterRequest[detail.successful] add .invisible .visually-hidden .swing-in-top-fwd to #loading-error
+    on htmx:afterRequest[detail.successful] add .tw-hidden to #loading-error
+    on click from #loading-error-close add .tw-hidden to #loading-error
   end
 </script>
diff --git a/app/templates/layouts/base.html b/app/templates/layouts/base.html
index 3a27332..45c20aa 100644
--- a/app/templates/layouts/base.html
+++ b/app/templates/layouts/base.html
@@ -27,9 +27,10 @@
            {% block body_hyperscript %}{% endblock %}">
       {% include 'includes/navbar.html' %}
 
-      <div class="container invisible visually-hidden" id="loading-error">
-        <div class="alert alert-danger m-3" role="alert">
+      <div class="container tw-hidden" id="loading-error">
+        <div class="alert alert-danger m-3 alert-dismissible swing-in-top-fwd" role="alert">
           {% translate 'Something went wrong loading your data. Try reloading the page or check the console for more information.' %}
+          <button type="button" class="btn-close" aria-label="Close" id="loading-error-close"></button>
         </div>
       </div>