feat: Implement individual notification click handling, differentiate notification types for replies and subscriptions, and refine notification display text.

public/s/js/f0ck.js

@@ -1010,6 +1010,28 @@ class NotificationSystem {
         this.markAllReadUI();
       });
     }
+
+    // Handle individual notification clicks
+    if (this.list) {
+      this.list.addEventListener('click', async (e) => {
+        const item = e.target.closest('.notif-item');
+        if (!item) return;
+
+        e.preventDefault();
+        const id = item.dataset.id;
+        const href = item.getAttribute('href');
+
+        // Mark as read
+        if (item.classList.contains('unread')) {
+          try {
+            await fetch(`/api/notifications/${id}/read`, { method: 'POST' });
+          } catch (err) { console.error(err); }
+        }
+
+        // Navigate
+        window.location.href = href;
+      });
+    }
   }
 
   async poll() {
@@ -1043,12 +1065,15 @@ class NotificationSystem {
   }
 
   renderItem(n) {
-    const typeText = n.type === 'comment_reply' ? 'replied to your comment' : 'Start';
+    let typeText = 'Start';
+    if (n.type === 'comment_reply') typeText = 'replied to you';
+    else if (n.type === 'subscription') typeText = 'commented in a thread you follow';
+
     const cid = n.comment_id || n.reference_id;
     const link = `/${n.item_id}#c${cid}`;
 
     return `
-            <a href="${link}" class="notif-item ${n.is_read ? '' : 'unread'}" onclick="window.location.href='${link}'; return false;">
+            <a href="${link}" class="notif-item ${n.is_read ? '' : 'unread'}" data-id="${n.id}">
                 <div>
                     <strong>${n.from_user}</strong> ${typeText}
                 </div>
@@ -1057,6 +1082,7 @@ class NotificationSystem {
         `;
   }
 
+
   markAllReadUI() {
     this.countBadge.style.display = 'none';
     this.list.querySelectorAll('.notif-item.unread').forEach(el => el.classList.remove('unread'));