refactor: replace error message with sweet alert 2

app/templates/includes/scripts/hyperscript/htmx_error_handler.html

@@ -1,8 +1,15 @@
+{% load i18n %}
 <script type="text/hyperscript">
   behavior htmx_error_handler
-    on htmx:responseError or htmx:afterRequest[detail.failed] remove .tw-hidden from
+    on htmx:responseError or htmx:afterRequest[detail.failed] or htmx:sendError queue none
-    #loading-error then log event
+      call Swal.fire({title: '{% trans 'Something went wrong loading your data' %}',
-    on htmx:afterRequest[detail.successful] add .tw-hidden to #loading-error
+                      text: '{% trans 'Try reloading the page or check the console for more information.' %}',
-    on click from #loading-error-close add .tw-hidden to #loading-error
+                      icon: 'error',
+                      customClass: {
+                        confirmButton: 'btn btn-primary'
+                      },
+                      buttonsStyling: true})
+      then log event
+      then halt the event
   end
 </script>

app/templates/layouts/base.html

@@ -27,13 +27,6 @@
            {% block body_hyperscript %}{% endblock %}">
       {% include 'includes/navbar.html' %}
 
-      <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>
-
       <div id="content">
         {% block content %}{% endblock %}
       </div>