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 = [

frontend/src/pages/Login.css

@@ -29,12 +29,6 @@
   margin-bottom: 16px;
 }
 
-.default-logo svg {
-  width: 72px;
-  height: 72px;
-  margin-bottom: 16px;
-}
-
 .login-logo h1 {
   font-size: 28px;
   font-weight: 700;

frontend/src/pages/Login.jsx

@@ -66,7 +66,7 @@ export default function Login() {
     }
   };
 
-  const appName = settings.app_name || 'TeamChat';
+  const appName = settings.app_name || 'jama';
   const logoUrl = settings.logo_url;
 
   return (
@@ -76,14 +76,7 @@ export default function Login() {
           {logoUrl ? (
             <img src={logoUrl} alt={appName} className="logo-img" />
           ) : (
-            <div className="default-logo">
-              <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <circle cx="24" cy="24" r="24" fill="#1a73e8"/>
-                <path d="M12 16h24v2H12zM12 22h18v2H12zM12 28h20v2H12z" fill="white"/>
-                <circle cx="36" cy="32" r="8" fill="#34a853"/>
-                <path d="M33 32l2 2 4-4" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-              </svg>
-            </div>
+            <img src="/icons/jama.png" alt="jama" className="logo-img" />
           )}
           <h1>{appName}</h1>
           <p>Sign in to continue</p>