version 0.0.24

frontend/src/pages/Chat.jsx

@@ -28,7 +28,7 @@ export default function Chat() {
   const [groups, setGroups] = useState({ publicGroups: [], privateGroups: [] });
   const [activeGroupId, setActiveGroupId] = useState(null);
   const [notifications, setNotifications] = useState([]);
-  const [unreadGroups, setUnreadGroups] = useState(new Set());
+  const [unreadGroups, setUnreadGroups] = useState(new Map());
   const [modal, setModal] = useState(null); // 'profile' | 'users' | 'settings' | 'newchat'
   const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
   const [showSidebar, setShowSidebar] = useState(true);
@@ -89,6 +89,7 @@ export default function Chat() {
     if (!socket) return;
 
     const handleNewMsg = (msg) => {
+      // Update group preview text
       setGroups(prev => {
         const updateGroup = (g) => g.id === msg.group_id
           ? { ...g, last_message: msg.content || (msg.image_url ? '📷 Image' : ''), last_message_at: msg.created_at }
@@ -98,15 +99,23 @@ export default function Chat() {
           privateGroups: prev.privateGroups.map(updateGroup),
         };
       });
+      // Increment unread count for the group if not currently viewing it
+      setUnreadGroups(prev => {
+        if (msg.group_id === activeGroupId) return prev;
+        const next = new Map(prev);
+        next.set(msg.group_id, (next.get(msg.group_id) || 0) + 1);
+        return next;
+      });
     };
 
     const handleNotification = (notif) => {
       if (notif.type === 'private_message') {
-        // Show unread dot on private group in sidebar (if not currently viewing it)
+        // Private message unread is already handled by handleNewMsg above
+        // (kept for push notification path when socket is not the source)
         setUnreadGroups(prev => {
           if (notif.groupId === activeGroupId) return prev;
-          const next = new Set(prev);
-          next.add(notif.groupId);
+          const next = new Map(prev);
+          next.set(notif.groupId, (next.get(notif.groupId) || 0) + 1);
           return next;
         });
       } else {
@@ -127,9 +136,9 @@ export default function Chat() {
   const selectGroup = (id) => {
     setActiveGroupId(id);
     if (isMobile) setShowSidebar(false);
-    // Clear notifications for this group
+    // Clear notifications and unread count for this group
     setNotifications(prev => prev.filter(n => n.groupId !== id));
-    setUnreadGroups(prev => { const next = new Set(prev); next.delete(id); return next; });
+    setUnreadGroups(prev => { const next = new Map(prev); next.delete(id); return next; });
   };
 
   const activeGroup = [