Update chatbot

app/templates/tickets/notifications.html

@@ -19,11 +19,14 @@
         {% if notifs.items %}
           {% for n in notifs.items %}
           <a href="{{ n.link or '#' }}"
+             data-notif-id="{{ n.id }}"
+             data-is-read="{{ 'true' if n.is_read else 'false' }}"
+             class="notif-list-item"
              style="display:flex;gap:14px;padding:16px 20px;border-bottom:1px solid var(--border);color:var(--text);
                     {% if not n.is_read %}border-left:3px solid var(--accent3);background:rgba(0,180,216,.03);{% endif %}">
             <div style="margin-top:2px;flex-shrink:0;">
               {% if not n.is_read %}
-                <div style="width:8px;height:8px;border-radius:50%;background:var(--accent3);margin-top:3px;"></div>
+                <div class="notif-unread-dot" style="width:8px;height:8px;border-radius:50%;background:var(--accent3);margin-top:3px;"></div>
               {% else %}
                 <i class="bi bi-check2" style="color:var(--muted);font-size:14px;"></i>
               {% endif %}
@@ -78,4 +81,45 @@
     </div>
   </div>
 </div>
-{% endblock %}
+
+<script>
+(function(){
+  // On page load, fetch the live unread count and sync the bell badge.
+  // The server-rendered {{ unread_notifications }} is only accurate at render
+  // time — if the user has been clicking around, it can be stale.
+  fetch('/api/notifications/unread-count')
+    .then(r => r.json())
+    .then(d => { if(typeof updateBadge === 'function') updateBadge(d.count); })
+    .catch(() => {});
+
+  // Intercept every notification link click:
+  // 1. If the notification is unread, call the mark-read API.
+  // 2. Decrement the bell badge immediately (optimistic update).
+  // 3. Navigate to the destination.
+  document.querySelectorAll('a.notif-list-item').forEach(function(link){
+    link.addEventListener('click', async function(e){
+      const id     = this.dataset.notifId;
+      const isRead = this.dataset.isRead === 'true';
+      const dest   = this.getAttribute('href');
+
+      if(!isRead && id){
+        e.preventDefault();
+        try {
+          await csrfPost('/api/notifications/' + id + '/read');
+        } catch(_){}
+        // Update badge — decrement by 1
+        if(typeof updateBadge === 'function') updateBadge(-1, true);
+        // Mark the row as visually read
+        this.dataset.isRead = 'true';
+        this.style.borderLeft = '';
+        this.style.background = '';
+        const dot = this.querySelector('.notif-unread-dot');
+        if(dot) dot.remove();
+      }
+
+      if(dest && dest !== '#') window.location.href = dest;
+    });
+  });
+})();
+</script>
+{% endblock %}