From dd689e0dfd728904d5e29e2a8f149e5ac6565e18 Mon Sep 17 00:00:00 2001
From: Jason Streifling <jason@streifling.com>
Date: Sat, 8 Mar 2025 10:24:25 +0100
Subject: [PATCH] Add ability to display notifications other than HTTP errors

---
 cmd/frontend/docx.go          |  2 +-
 cmd/frontend/notifications.go | 20 ++++++++++++++++++++
 cmd/frontend/pdf.go           |  2 +-
 web/templates/index.html      | 19 +++++++++++++++++--
 4 files changed, 39 insertions(+), 4 deletions(-)
 create mode 100644 cmd/frontend/notifications.go

diff --git a/cmd/frontend/docx.go b/cmd/frontend/docx.go
index 98dbf48..6ad3a81 100644
--- a/cmd/frontend/docx.go
+++ b/cmd/frontend/docx.go
@@ -88,6 +88,6 @@ func UploadDocx(c *b.Config, db *b.DB, s map[string]*Session) http.HandlerFunc {
 			return
 		}
 
-		w.WriteHeader(http.StatusOK)
+		notifyClient(w, "Hochladen erfolgreich!", http.StatusOK)
 	}
 }
diff --git a/cmd/frontend/notifications.go b/cmd/frontend/notifications.go
new file mode 100644
index 0000000..97c40ea
--- /dev/null
+++ b/cmd/frontend/notifications.go
@@ -0,0 +1,20 @@
+package frontend
+
+import (
+	"fmt"
+	"html/template"
+	"net/http"
+)
+
+func notifyClient(w http.ResponseWriter, message string, status int) {
+	h := w.Header()
+	h.Del("Content-Length")
+	h.Set("Content-Type", "text/html; charset=utf-8")
+	if status >= 400 {
+		h.Set("X-Content-Type-Options", "nosniff")
+	}
+	w.WriteHeader(status)
+
+	safeMsg := template.HTMLEscapeString(message)
+	fmt.Fprintf(w, `<span id="notification-content" hx-swap-oob="true">%s</span>`, safeMsg)
+}
diff --git a/cmd/frontend/pdf.go b/cmd/frontend/pdf.go
index 3648d03..0679fa7 100644
--- a/cmd/frontend/pdf.go
+++ b/cmd/frontend/pdf.go
@@ -54,6 +54,6 @@ func UploadPDF(c *b.Config, s map[string]*Session) http.HandlerFunc {
 			return
 		}
 
-		w.WriteHeader(http.StatusOK)
+		notifyClient(w, "Hochladen erfolgreich!", http.StatusOK)
 	}
 }
diff --git a/web/templates/index.html b/web/templates/index.html
index 38925ed..6138e19 100644
--- a/web/templates/index.html
+++ b/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>