From d106dc3d2a684a2e077ad6e4715b8b802fa65595 Mon Sep 17 00:00:00 2001
From: NguyenND <ngodanguyen@gmail.com>
Date: Fri, 19 Jun 2026 11:36:20 -0400
Subject: [PATCH] 06/19 Fix notification mark as read button

---
 app/templates/notifications/index.html | 55 +++++++++++++++++++++-----
 1 file changed, 46 insertions(+), 9 deletions(-)

diff --git a/app/templates/notifications/index.html b/app/templates/notifications/index.html
index c522aba..a877c09 100644
--- a/app/templates/notifications/index.html
+++ b/app/templates/notifications/index.html
@@ -71,15 +71,13 @@
           </a>
           {% endif %}
           {% if not n.is_read %}
-          <form method="post"
-                action="{{ url_for('notifications.mark_read', notif_id=n.id) }}"
-                class="mb-0">
-            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
-            <button type="submit" class="btn btn-sm btn-outline-secondary"
-                    title="Mark as read">
-              <i class="bi bi-check2"></i>
-            </button>
-          </form>
+          <button type="button"
+                  class="btn btn-sm btn-outline-secondary mark-read-btn"
+                  data-notif-id="{{ n.id }}"
+                  data-url="{{ url_for('notifications.mark_read', notif_id=n.id) }}"
+                  title="Mark as read">
+            <i class="bi bi-check2"></i>
+          </button>
           {% endif %}
         </div>
       </div>
@@ -124,4 +122,43 @@
   <p class="mb-0">No notifications found.</p>
 </div>
 {% endif %}
+{% endblock %}
+
+{% block extra_js %}
+<script>
+document.querySelectorAll('.mark-read-btn').forEach(function(btn) {
+  btn.addEventListener('click', function() {
+    var url = btn.dataset.url;
+    var csrfToken = {{ csrf_token() | tojson }};
+    btn.disabled = true;
+    fetch(url, {
+      method: 'POST',
+      headers: { 'X-CSRFToken': csrfToken, 'Content-Type': 'application/x-www-form-urlencoded' },
+      body: 'csrf_token=' + encodeURIComponent(csrfToken),
+    })
+    .then(function(res) { return res.json(); })
+    .then(function(data) {
+      if (data.ok) {
+        var li = btn.closest('li');
+        li.classList.remove('list-group-item-light', 'border-start', 'border-primary', 'border-3');
+        var badge = li.querySelector('.badge.bg-primary');
+        if (badge) badge.remove();
+        btn.remove();
+        var unreadBadge = document.querySelector('.badge.bg-danger');
+        if (unreadBadge) {
+          var count = parseInt(unreadBadge.textContent) - 1;
+          if (count <= 0) {
+            unreadBadge.remove();
+            var markAllForm = document.querySelector('form[action*="mark-all-read"]');
+            if (markAllForm) markAllForm.closest('.col-auto') && markAllForm.remove();
+          } else {
+            unreadBadge.textContent = count + ' unread';
+          }
+        }
+      }
+    })
+    .catch(function() { btn.disabled = false; });
+  });
+});
+</script>
 {% endblock %}
\ No newline at end of file