Add in mark as reaad button to list view, use ajax to preform the action without page refresh.

web/templates/account/messages/read.html

@@ -6,17 +6,63 @@
     <hr>
     <p>{{ .Message.Body }}</p>
 
-    <form method="POST" action="/account/messages/archive" class="d-inline">
-      <input type="hidden" name="csrf_token" value="{{ $.CSRFToken }}">
-      <input type="hidden" name="id" value="{{ .Message.ID }}">
-      <button type="submit" class="btn btn-outline-danger mt-3">Archive</button>
-    </form>
+    <div class="mt-4">
+      <button id="mark-read-btn" data-id="{{ .Message.ID }}" class="btn btn-outline-success">Mark As Read</button>
 
-    <a href="/account/messages" class="btn btn-secondary mt-3">Back to Inbox</a>
+      <form method="POST" action="/account/messages/archive" class="d-inline">
+        <input type="hidden" name="csrf_token" value="{{ $.CSRFToken }}">
+        <input type="hidden" name="id" value="{{ .Message.ID }}">
+        <button type="submit" class="btn btn-outline-danger">Archive</button>
+      </form>
+
+      <a href="/account/messages" class="btn btn-secondary">Back to Inbox</a>
+    </div>
   {{ else }}
     <div class="alert alert-danger text-center">
       Message not found or access denied.
     </div>
   {{ end }}
 </div>
+
+<script>
+document.addEventListener("DOMContentLoaded", function () {
+  const btn = document.getElementById("mark-read-btn");
+  if (!btn) return;
+
+  btn.addEventListener("click", async function () {
+    const id = this.dataset.id;
+    const res = await fetch("/account/messages/mark-read", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded"
+      },
+      body: new URLSearchParams({
+        id: id,
+        csrf_token: "{{ $.CSRFToken }}"
+      })
+    });
+
+    if (res.ok) {
+      this.classList.remove("btn-outline-success");
+      this.classList.add("btn-success");
+      this.textContent = "Marked As Read ✔";
+
+      const badge = document.getElementById("message-count");
+      if (badge) {
+        let count = parseInt(badge.textContent);
+        if (!isNaN(count)) {
+          count = Math.max(count - 1, 0);
+          if (count === 0) {
+            badge.remove();
+          } else {
+            badge.textContent = count;
+          }
+        }
+      }
+    } else {
+      alert("Failed to mark as read.");
+    }
+  });
+});
+</script>
 {{ end }}