feat: implement real-time message and notification count synchronization via custom events and socket listeners

src/hooks/useMessaging.ts

@@ -170,6 +170,9 @@ export function useMessaging(options: UseMessagingOptions = {}): UseMessagingRet
         setConversations((prev) =>
           prev.map((c) => (c.id === conversationId ? { ...c, unreadCount: 0 } : c))
         );
+
+        // Notify header to instantly refresh message + notification counts
+        window.dispatchEvent(new Event('messages-read'));
       } catch (error) {
         console.error('Failed to load conversation:', error);
       } finally {
@@ -331,6 +334,7 @@ export function useMessaging(options: UseMessagingOptions = {}): UseMessagingRet
     } else {
       await messagesService.markAsRead(currentConversationIdRef.current);
     }
+    window.dispatchEvent(new Event('messages-read'));
   }, [isConnected]);
 
   // Mark all conversations as read
@@ -342,6 +346,7 @@ export function useMessaging(options: UseMessagingOptions = {}): UseMessagingRet
     setConversations((prev) =>
       prev.map((c) => ({ ...c, unreadCount: 0 }))
     );
+    window.dispatchEvent(new Event('messages-read'));
   }, [conversations]);
 
   // Delete a conversation
@@ -497,6 +502,8 @@ export function useMessaging(options: UseMessagingOptions = {}): UseMessagingRet
           } else {
             messagesService.markAsRead(message.conversationId).catch(() => {});
           }
+          // Notify header to refresh counts since we auto-read the message
+          window.dispatchEvent(new Event('messages-read'));
         }
       }