Add ability to display notifications other than HTTP errors

web/templates/index.html

@@ -29,7 +29,8 @@
 
     <main class="mx-4">
         <div class="hidden bg-slate-950 dark:bg-slate-50 fixed font-bold p-4 right-8 rounded-lg shadow-lg text-slate-100 dark:text-slate-900 top-8 z-50"
-            id="notification">
+            id="notification" hx-swap="innerHTML">
+            <span id="notification-content"></span>
         </div>
 
         <div id="page-content">
@@ -74,12 +75,26 @@
     </script>
 
     <script>
+        htmx.on('htmx:afterSwap', function (event) {
+            var notificationContent = document.getElementById('notification-content');
+            if (notificationContent.textContent.trim() !== "") {
+                var notification = document.getElementById('notification');
+                notification.classList.remove('hidden');
+                setTimeout(function () {
+                    notification.classList.add('hidden');
+                    notificationContent.textContent = "";
+                }, 5000);
+            }
+        });
+
         htmx.on('htmx:responseError', function (event) {
+            var notificationContent = document.getElementById('notification-content');
             var notification = document.getElementById('notification');
-            notification.innerText = event.detail.xhr.responseText;
+            notificationContent.textContent = event.detail.xhr.responseText;
             notification.classList.remove('hidden');
             setTimeout(function () {
                 notification.classList.add('hidden');
+                notificationContent.textContent = "";
             }, 5000);
         });
     </script>