From a8f104ee147758da940dd72fb00140db09c1c5e2 Mon Sep 17 00:00:00 2001
From: cyph3rasi <cmcelvogue91@gmail.com>
Date: Sun, 8 Mar 2026 00:31:21 -0800
Subject: [PATCH] Fix unread badge refresh and reply thread UI

---
 src/app/chat/page.tsx          |  6 +++-
 src/app/notifications/page.tsx |  1 +
 src/components/PostCard.tsx    |  1 -
 src/components/Sidebar.tsx     | 62 ++++++++++++++++++++++------------
 4 files changed, 46 insertions(+), 24 deletions(-)

diff --git a/src/app/chat/page.tsx b/src/app/chat/page.tsx
index fed52e7..5ec7e5a 100644
--- a/src/app/chat/page.tsx
+++ b/src/app/chat/page.tsx
@@ -126,12 +126,16 @@ export default function ChatPage() {
 
     const markAsRead = async (conversationId: string) => {
         try {
-            await fetch('/api/swarm/chat/messages', {
+            const res = await fetch('/api/swarm/chat/messages', {
                 method: 'PATCH',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify({ conversationId })
             });
+            if (!res.ok) {
+                return;
+            }
             setConversations(prev => prev.map(c => c.id === conversationId ? { ...c, unreadCount: 0 } : c));
+            window.dispatchEvent(new Event('synapsis:chat-updated'));
         } catch { }
     };
 
diff --git a/src/app/notifications/page.tsx b/src/app/notifications/page.tsx
index ef33aed..fadd208 100644
--- a/src/app/notifications/page.tsx
+++ b/src/app/notifications/page.tsx
@@ -69,6 +69,7 @@ export default function NotificationsPage() {
                 throw new Error('Failed to mark notifications as read');
             }
             setNotifications(prev => prev.map(n => ({ ...n, readAt: new Date().toISOString() })));
+            window.dispatchEvent(new Event('synapsis:notifications-updated'));
         } catch (err) {
             console.error('Failed to mark notifications as read:', err);
         }
diff --git a/src/components/PostCard.tsx b/src/components/PostCard.tsx
index 0d68697..d898a1b 100644
--- a/src/components/PostCard.tsx
+++ b/src/components/PostCard.tsx
@@ -473,7 +473,6 @@ export function PostCard({ post, onLike, onRepost, onComment, onDelete, onHide,
                         showThread={false}
                         isThreadParent={true}
                     />
-                    <div className="thread-line" />
                 </div>
             )}
             <article className={`post ${isDetail ? 'detail' : ''}`}>
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 6f30eb7..8cadb6c 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import Link from 'next/link';
 import Image from 'next/image';
 import { usePathname, useRouter } from 'next/navigation';
@@ -31,43 +31,61 @@ export function Sidebar() {
             });
     }, []);
 
+    const fetchUnreadNotifications = useCallback(() => {
+        fetch('/api/notifications?unread=true&limit=50')
+            .then(res => res.json())
+            .then(data => {
+                setUnreadCount(data.notifications?.length || 0);
+            })
+            .catch(() => { });
+    }, []);
+
+    const fetchUnreadChats = useCallback(() => {
+        fetch('/api/chat/unread')
+            .then(res => res.json())
+            .then(data => {
+                setUnreadChatCount(data.unreadCount || 0);
+            })
+            .catch(() => { });
+    }, []);
+
     // Fetch unread notification count
     useEffect(() => {
         if (!user) return;
 
-        const fetchUnread = () => {
-            fetch('/api/notifications?unread=true&limit=50')
-                .then(res => res.json())
-                .then(data => {
-                    setUnreadCount(data.notifications?.length || 0);
-                })
-                .catch(() => { });
+        fetchUnreadNotifications();
+
+        const handleUnreadRefresh = () => {
+            fetchUnreadNotifications();
         };
 
-        fetchUnread();
+        window.addEventListener('synapsis:notifications-updated', handleUnreadRefresh);
         // Poll every 30 seconds
-        const interval = setInterval(fetchUnread, 30000);
-        return () => clearInterval(interval);
-    }, [user]);
+        const interval = setInterval(fetchUnreadNotifications, 30000);
+        return () => {
+            clearInterval(interval);
+            window.removeEventListener('synapsis:notifications-updated', handleUnreadRefresh);
+        };
+    }, [user, fetchUnreadNotifications]);
 
     // Fetch unread chat count
     useEffect(() => {
         if (!user) return;
 
-        const fetchUnreadChats = () => {
-            fetch('/api/chat/unread')
-                .then(res => res.json())
-                .then(data => {
-                    setUnreadChatCount(data.unreadCount || 0);
-                })
-                .catch(() => { });
+        fetchUnreadChats();
+
+        const handleUnreadRefresh = () => {
+            fetchUnreadChats();
         };
 
-        fetchUnreadChats();
+        window.addEventListener('synapsis:chat-updated', handleUnreadRefresh);
         // Poll every 10 seconds
         const interval = setInterval(fetchUnreadChats, 10000);
-        return () => clearInterval(interval);
-    }, [user]);
+        return () => {
+            clearInterval(interval);
+            window.removeEventListener('synapsis:chat-updated', handleUnreadRefresh);
+        };
+    }, [user, fetchUnreadChats]);
 
     // Home is exact match
     const isHome = pathname === '/';