feat(ui): space icons, chat improvements, StudyBot mentions

- Add space icon id to create space payload
- Display space icon in sidebar and room list header
- Show welcome state when no room/DM selected (disable input)
- Skip loading skeleton for rooms/DMs with no last_message
- Detect StudyBot messages and render with bot styling
- Add StudyBot to @ mention suggestions

src/App.jsx

@@ -27,6 +27,11 @@ import {
   preloadAllData,
 } from "./store/slices/dmSlice";
 import { addMessage } from "./store/slices/messageSlice";
+import {
+  updateRoomLastMessage,
+  incrementRoomUnreadCount,
+  addJoinedRoom,
+} from "./store/slices/spaceSlice";
 import socketService from "./services/socket.service";
 
 function App() {
@@ -233,10 +238,17 @@ function App() {
       const senderId = data.user_id || data.senderId;
       const id = data.id;
       const tempId = data.tempId;
-      
+
       if (!roomId || !content) return;
-      
+
       console.log("[App] newMessage parsed:", { roomId, id, tempId, author, senderId });
+
+      const state = store.getState();
+      const currentActiveRoom = state.app.activeRoom;
+      const currentUserId = state.auth.user?.id;
+      const isOwnMessage = String(senderId) === String(currentUserId);
+
+      // 1. Save message to Redux
       dispatch(
         addMessage({
           roomId,
@@ -251,11 +263,30 @@ function App() {
             content,
             created_at: data.created_at || new Date().toISOString(),
             isPinned: data.is_pinned || false,
-            isOwn: String(senderId) === String(store.getState().auth.user?.id),
+            isOwn: isOwnMessage,
             tempId,
           },
         }),
       );
+
+      // 2. Update room's last_message in spaceSlice (for RoomList display)
+      dispatch(
+        updateRoomLastMessage({
+          roomId,
+          message: {
+            id: id || Date.now(),
+            content,
+            created_at: data.created_at || new Date().toISOString(),
+            sender_id: senderId,
+            sender: author,
+          },
+        }),
+      );
+
+      // 3. Increment unread count if not viewing this room and not own message
+      if (roomId !== currentActiveRoom && !isOwnMessage) {
+        dispatch(incrementRoomUnreadCount({ roomId }));
+      }
     };
 
     socketService.onConnected(handleConnected);

src/components/ChatArea.jsx

@@ -20,7 +20,10 @@ import {
 } from "../store/slices/dmSlice";
 import { fetchRoomMessages } from "../store/slices/messageSlice";
 import { addMessage } from "../store/slices/messageSlice";
-import { createRoom } from "../store/slices/spaceSlice";
+import {
+  createRoom,
+  clearRoomUnreadCount,
+} from "../store/slices/spaceSlice";
 import socketService from "../services/socket.service";
 
 function ChatArea({
@@ -360,26 +363,45 @@ function ChatArea({
     return String(a.id).localeCompare(String(b.id));
   });
 
+  // Detect if sender is StudyBot bot
+  const isStudyBot = (msg) => {
+    const senderName = typeof msg.sender === "object"
+      ? msg.sender?.display_name || msg.sender?.username || ""
+      : typeof msg.sender === "string"
+        ? msg.sender
+        : "";
+    const senderUsername = typeof msg.sender === "object"
+      ? msg.sender?.username || ""
+      : "";
+    return senderName === "StudyBot" || senderUsername === "studybot";
+  };
+
   // Convert API messages to unified UI format
   const chatMessages = sortedMessages.map((msg) => {
     const senderId = msg.sender_id || msg.senderId || msg.sender?.id;
     const isOwn = String(senderId) === String(currentUser?.id);
+    const msgIsBot = isStudyBot(msg);
     // Handle both object sender (DM/WS) and string sender (old format)
     const senderName = isOwn
       ? currentUser?.display_name || currentUser?.name || "Bạn"
-      : (typeof msg.sender === "object" && msg.sender?.display_name)
-        ? msg.sender.display_name
-        : (typeof msg.sender === "string" ? msg.sender : "Unknown");
+      : msgIsBot
+        ? "StudyBot"
+        : (typeof msg.sender === "object" && msg.sender?.display_name)
+          ? msg.sender.display_name
+          : (typeof msg.sender === "string" ? msg.sender : "Unknown");
     const avatar = isOwn
       ? currentUser?.display_name?.charAt(0).toUpperCase() ||
         currentUser?.name?.charAt(0).toUpperCase() ||
         "B"
-      : (typeof msg.sender === "object" && msg.sender?.display_name)
-        ? msg.sender.display_name.charAt(0).toUpperCase()
-        : (typeof msg.sender === "string" ? msg.sender.charAt(0).toUpperCase() : "?");
+      : msgIsBot
+        ? "🤖"
+        : (typeof msg.sender === "object" && msg.sender?.display_name)
+          ? msg.sender.display_name.charAt(0).toUpperCase()
+          : (typeof msg.sender === "string" ? msg.sender.charAt(0).toUpperCase() : "?");
     // Get color: own message from currentUser, DM other from dmUser, space from membersMap
     const color = (() => {
       if (isOwn) return currentUser?.color || null;
+      if (msgIsBot) return null; // Bot uses tertiary color in ChatMessage component
       if (isDM && dmUser?.id && String(dmUser.id) === String(senderId)) {
         return dmUser.color || null;
       }
@@ -412,6 +434,7 @@ function ChatArea({
       isPinned: msg.is_pinned || false,
       replyTo: msg.reply_to || null,
       isOwn,
+      isBot: msgIsBot,
       senderId,
       pending: msg.pending || false,
       is_read: msg.is_read,
@@ -419,7 +442,11 @@ function ChatArea({
     };
   });
 
-  // Join/leave space room via WebSocket
+  // Join space room via WebSocket
+  // NOTE: We intentionally do NOT leaveRoom on cleanup.
+  // Once joined, the user stays in the room to receive real-time messages
+  // even when switching to another room, DM, or tab.
+  // This matches DM behavior where all conversations are joined permanently.
   const [joinedRoom, setJoinedRoom] = useState(null);
   useEffect(() => {
     if (isSpaceRoom && room) {
@@ -428,13 +455,17 @@ function ChatArea({
       }).catch((err) => {
         console.error("[ChatArea] Failed to join room:", err);
       });
-      return () => {
-        socketService.leaveRoom(room);
-        setJoinedRoom(null);
-      };
+      // No cleanup leave — keep receiving messages for this room
     }
   }, [isSpaceRoom, room]);
 
+  // 🆕 Clear room unread count when opening a room
+  useEffect(() => {
+    if (isSpaceRoom && room) {
+      dispatch(clearRoomUnreadCount({ roomId: room }));
+    }
+  }, [isSpaceRoom, room, dispatch]);
+
   // Space members are already fetched globally in App.jsx
   // No need to fetch again when entering a room
 
@@ -449,6 +480,31 @@ function ChatArea({
     ? Object.values(roomsMap).flat().find((r) => r.id === room)
     : null;
 
+  // Check if we already know this room/DM has no messages (last_message is null from API)
+  // This lets us skip loading skeleton and show empty state immediately
+  const isKnownEmpty = (() => {
+    if (isSpaceRoom && currentRoomInfo) {
+      return currentRoomInfo.last_message === null || currentRoomInfo.last_message === undefined;
+    }
+    if (isDM && activeConversation) {
+      return activeConversation.last_message === null || activeConversation.last_message === undefined;
+    }
+    return false;
+  })();
+
+  // Check if we're in a space view but no room selected yet
+  const isSpaceViewNoRoom = view === "space" && !room && appState.activeSpace;
+  const currentSpaceForWelcome = isSpaceViewNoRoom
+    ? spaces.find((s) => s.id === appState.activeSpace)
+    : null;
+
+  const spaceWelcome = isSpaceViewNoRoom && currentSpaceForWelcome
+    ? {
+        title: `Chào mừng đến với ${currentSpaceForWelcome.name}`,
+        description: currentSpaceForWelcome.description || "Hãy chọn một room bên trái để bắt đầu trò chuyện.",
+      }
+    : null;
+
   const placeholder = isBotRoom || (isDM && room === "studybot-dm")
     ? "Hỏi trợ lý AI..."
     : dmUser
@@ -947,6 +1003,7 @@ function ChatArea({
         dmUser={dmUser}
         roomName={currentRoomInfo?.name}
         roomDescription={currentRoomInfo?.description}
+        spaceWelcome={spaceWelcome}
         onToggleRoomList={onToggleRoomList}
         onToggleMemberList={onToggleMemberList}
         roomListCollapsed={roomListCollapsed}
@@ -970,8 +1027,10 @@ function ChatArea({
         chatMessages={chatMessages}
         dmUser={dmUser}
         hasNoSelection={isDM && !dmUser}
+        spaceWelcome={spaceWelcome}
+        isKnownEmpty={isKnownEmpty}
         sendingMessages={sendingMessages}
-        isLoading={(isDM && messagesLoading) || (isSpaceRoom && roomMessagesLoading)}
+        isLoading={!isKnownEmpty && ((isDM && messagesLoading) || (isSpaceRoom && roomMessagesLoading))}
         conversationId={conversationId}
         roomId={isSpaceRoom ? room : null}
         onRetry={handleRetryMessage}
@@ -1007,6 +1066,7 @@ function ChatArea({
         onSend={handleSend}
         onTyping={handleTyping}
         onStopTyping={handleStopTyping}
+        disabled={!room}
         typingSender={
           isOtherUserTyping
             ? dmUser?.name

src/components/Sidebar.jsx

@@ -41,7 +41,7 @@ function Sidebar() {
         {spaces.map((space) => (
           <SpaceIcon
             key={space.id}
-            icon={space.icon}
+            icon={space.icon_url}
             name={space.name}
             isActive={currentView === "space" && activeSpace === space.id}
             hasNotification={space.hasNotification || false}

src/components/chatarea/ChatHeader.jsx

@@ -77,26 +77,27 @@ function ChatHeader({
   roomListCollapsed,
   memberListCollapsed,
   onOpenRoomSettings,
+  spaceWelcome,
 }) {
-  const hasNoSelection = isDM && !dmUser;
+  const hasNoSelection = (isDM && !dmUser) || spaceWelcome;
 
   const headerTitle = hasNoSelection
     ? "Tin nhắn"
     : isBotRoom
-        ? "Trợ lý AI"
-        : isDM && dmUser
-          ? dmUser.name
-          : roomName || `# ${activeRoom}`;
+      ? "Trợ lý AI"
+      : isDM && dmUser
+        ? dmUser.name
+        : roomName || (activeRoom ? `# ${activeRoom}` : "");
 
   const headerSubtitle = hasNoSelection
     ? "Chọn một cuộc trò chuyện để bắt đầu"
     : isBotRoom
-        ? "Hỏi đáp với trợ lý AI"
-        : isDM && dmUser
-          ? dmUser.isOnline
-            ? "Đang hoạt động"
-            : "Ngoại tuyến"
-          : roomDescription || "";
+      ? "Hỏi đáp với trợ lý AI"
+      : isDM && dmUser
+        ? dmUser.isOnline
+          ? "Đang hoạt động"
+          : "Ngoại tuyến"
+        : roomDescription || "";
 
   return (
     <div

src/components/chatarea/ChatInput.jsx

@@ -28,6 +28,7 @@ function ChatInput({
   onTyping,
   onStopTyping,
   typingSender,
+  disabled,
 }) {
   const [showMentions, setShowMentions] = useState(false);
   const [mentionFilter, setMentionFilter] = useState("");
@@ -48,6 +49,14 @@ function ChatInput({
     const users = [];
     const seenIds = new Set();
 
+    // Add StudyBot as a mentionable user
+    users.push({
+      id: "studybot",
+      name: "StudyBot",
+      isBot: true,
+    });
+    seenIds.add("studybot");
+
     conversations.forEach((conv) => {
       const ou = conv.other_user;
       if (ou && !seenIds.has(ou.id)) {
@@ -472,33 +481,33 @@ function ChatInput({
         )}
 
         <div
-          className="chat-input-wrapper border rounded-lg p-1 transition-colors relative"
+          className={`chat-input-wrapper border rounded-lg p-1 transition-colors relative ${disabled ? "opacity-50" : ""}`}
           style={{
             background: "var(--input-bg)",
             borderColor: "var(--input-border)",
           }}
           onFocus={(e) =>
-            (e.currentTarget.style.borderColor = "var(--primary)")
+            !disabled && (e.currentTarget.style.borderColor = "var(--primary)")
           }
           onBlur={(e) =>
-            (e.currentTarget.style.borderColor = "var(--input-border)")
+            !disabled && (e.currentTarget.style.borderColor = "var(--input-border)")
           }
         >
           <div className="flex items-center gap-2">
             <div
               className={`chat-input-placeholder ${isEmpty ? "" : "hidden"}`}
             >
-              {placeholderText}
+              {disabled ? "Chọn một cuộc trò chuyện để bắt đầu" : placeholderText}
             </div>
             <div
               ref={editorRef}
-              contentEditable
+              contentEditable={!disabled}
               className="flex-1 border-none bg-transparent px-3 py-2 text-sm outline-none font-sans min-h-9 max-h-32 overflow-y-auto relative z-10"
               style={{
                 color: "var(--input-text)",
               }}
-              onInput={handleInput}
-              onKeyDown={handleKeyDown}
+              onInput={disabled ? undefined : handleInput}
+              onKeyDown={disabled ? undefined : handleKeyDown}
               suppressContentEditableWarning
             />
             {/* Hidden file input */}
@@ -509,19 +518,21 @@ function ChatInput({
               multiple
               className="hidden"
               onChange={handleFileSelect}
+              disabled={disabled}
             />
             <button
               type="button"
-              className="w-9 h-9 border-none rounded-md cursor-pointer flex items-center justify-center transition-colors"
+              disabled={disabled}
+              className="w-9 h-9 border-none rounded-md cursor-pointer flex items-center justify-center transition-colors disabled:cursor-not-allowed"
               style={{
                 background: "transparent",
                 color: "var(--text-secondary)",
               }}
               onMouseEnter={(e) =>
-                (e.currentTarget.style.background = "var(--hover-primary)")
+                !disabled && (e.currentTarget.style.background = "var(--hover-primary)")
               }
               onMouseLeave={(e) =>
-                (e.currentTarget.style.background = "transparent")
+                !disabled && (e.currentTarget.style.background = "transparent")
               }
               onClick={handleAttachmentClick}
               title="Đính kèm file (PDF, hình ảnh)"
@@ -530,16 +541,17 @@ function ChatInput({
             </button>
             <button
               type="button"
-              className="w-9 h-9 border-none rounded-md cursor-pointer flex items-center justify-center transition-colors"
+              disabled={disabled}
+              className="w-9 h-9 border-none rounded-md cursor-pointer flex items-center justify-center transition-colors disabled:cursor-not-allowed"
               style={{
                 background: "var(--primary)",
                 color: isDark ? "var(--bg-surface)" : "#fff",
               }}
               onMouseEnter={(e) =>
-                (e.currentTarget.style.background = "var(--primary-hover)")
+                !disabled && (e.currentTarget.style.background = "var(--primary-hover)")
               }
               onMouseLeave={(e) =>
-                (e.currentTarget.style.background = "var(--primary)")
+                !disabled && (e.currentTarget.style.background = "var(--primary)")
               }
               onClick={handleSend}
               title="Gửi"

src/components/chatarea/ChatMessages.jsx

@@ -238,7 +238,7 @@ function MessageSkeleton({ isDark, width = "75%", showSecondLine = true }) {
   );
 }
 
-function EmptyChatState({ dmUser, isDark, hasNoSelection }) {
+function EmptyChatState({ dmUser, isDark, hasNoSelection, spaceWelcome }) {
   return (
     <div className="flex flex-col items-center justify-center px-6 text-center">
       <div
@@ -265,21 +265,25 @@ function EmptyChatState({ dmUser, isDark, hasNoSelection }) {
         className="text-base font-semibold mb-2"
         style={{ color: "var(--text-primary)" }}
       >
-        {hasNoSelection
-          ? "Chọn một cuộc trò chuyện"
-          : dmUser
-            ? `Bắt đầu trò chuyện với ${dmUser.name}`
-            : "Chưa có tin nhắn nào"}
+        {spaceWelcome
+          ? spaceWelcome.title
+          : hasNoSelection
+            ? "Chọn một cuộc trò chuyện"
+            : dmUser
+              ? `Bắt đầu trò chuyện với ${dmUser.name}`
+              : "Chưa có tin nhắn nào"}
       </div>
       <div
         className="text-sm leading-relaxed max-w-xs"
         style={{ color: "var(--text-muted)" }}
       >
-        {hasNoSelection
-          ? "Hãy chọn một ngườii bạn bên trái để bắt đầu nhắn tin."
-          : dmUser
-            ? "Hãy gửi lờii chào hoặc câu hỏi để bắt đầu cuộc trò chuyện đầu tiên nhé!"
-            : "Chọn một cuộc trò chuyện để bắt đầu nhắn tin."}
+        {spaceWelcome
+          ? spaceWelcome.description
+          : hasNoSelection
+            ? "Hãy chọn một ngườii bạn bên trái để bắt đầu nhắn tin."
+            : dmUser
+              ? "Hãy gửi lờii chào hoặc câu hỏi để bắt đầu cuộc trò chuyện đầu tiên nhé!"
+              : "Chọn một cuộc trò chuyện để bắt đầu nhắn tin."}
       </div>
     </div>
   );
@@ -293,6 +297,8 @@ function ChatMessages({
   onEdit,
   onShowProfile,
   hasNoSelection,
+  spaceWelcome,
+  isKnownEmpty,
   sendingMessages,
   isLoading,
   conversationId,
@@ -413,15 +419,15 @@ function ChatMessages({
 
   const hasMessages = chatMessages.length > 0;
 
-  const isEmpty = !hasMessages && !isLoading;
+  const isEmpty = !hasMessages && (!isLoading || isKnownEmpty);
 
   return (
     <div
       ref={messagesContainerRef}
-      className={`flex-1 p-4 ${isEmpty ? "flex items-center justify-center overflow-hidden" : ` ${isLoading ? "overflow-hidden" : "overflow-y-auto"}`}`}
+      className={`flex-1 p-4 ${isEmpty ? "flex items-center justify-center overflow-hidden" : ` ${isLoading && !isKnownEmpty ? "overflow-hidden" : "overflow-y-auto"}`}`}
       onScroll={isEmpty ? undefined : handleScroll}
     >
-      {isLoading && !hasMessages ? (
+      {isLoading && !hasMessages && !isKnownEmpty ? (
         <div className="flex flex-col gap-2 w-full min-h-full justify-end pb-2">
           <MessageSkeleton isDark={isDark} width="60%" showSecondLine={false} />
           <MessageSkeleton isDark={isDark} width="85%" />
@@ -438,6 +444,7 @@ function ChatMessages({
           dmUser={dmUser}
           isDark={isDark}
           hasNoSelection={hasNoSelection}
+          spaceWelcome={spaceWelcome}
         />
       ) : (
         <div className="flex flex-col min-h-full justify-end gap-1 w-full">

src/components/createspace/CreateSpace.jsx

@@ -1,50 +1,11 @@
 import { useState } from "react";
 import { useSelector, useDispatch } from "react-redux";
-import {
-  PiGraduationCap,
-  PiRobot,
-  PiFolder,
-  PiPencil,
-  PiComputerTower,
-  PiBooks,
-  PiStudent,
-  PiFlask,
-  PiCode,
-  PiGlobe,
-  PiMusicNotes,
-  PiPalette,
-  PiCamera,
-  PiGameController,
-  PiHeart,
-  PiStar,
-  PiRocket,
-  PiBrain,
-  PiCalculator,
-  PiCalendar,
-  PiUsers,
-  PiTrophy,
-  PiFlag,
-  PiSun,
-  PiMoon,
-  PiCloud,
-  PiHouse,
-  PiCar,
-  PiAirplane,
-  PiBasketball,
-  PiGuitar,
-  PiPhone,
-  PiLaptop,
-  PiCoffee,
-  PiPizza,
-  PiFirstAid,
-  PiLockKey,
-  PiMoney,
-  PiGift,
-  PiFire,
-  PiSnowflake,
-} from "react-icons/pi";
+import { PiGraduationCap } from "react-icons/pi";
 import { FiSearch, FiX } from "react-icons/fi";
-import { cancelCreateSpace, navigateToSpace } from "../../store/slices/appSlice";
+import {
+  cancelCreateSpace,
+  navigateToSpace,
+} from "../../store/slices/appSlice";
 import { createSpace } from "../../store/slices/spaceSlice";
 import { dmService } from "../../services/dm.service";
 import { spaceIcons, getSpaceIconComponent } from "../../constants/spaceIcons";
@@ -55,7 +16,7 @@ function CreateSpace() {
   const [spaceName, setSpaceName] = useState("");
   const [spaceIcon, setSpaceIcon] = useState(spaceIcons[0].id);
   const [spaceDescription, setSpaceDescription] = useState("");
-  
+
   // Members state
   const [members, setMembers] = useState([]);
   const [searchQuery, setSearchQuery] = useState("");
@@ -66,7 +27,7 @@ function CreateSpace() {
   // Search users - only trigger on Enter key
   const handleSearch = async (query) => {
     setSearchQuery(query);
-    
+
     if (!query.trim()) {
       setSearchResults([]);
       setIsSearching(false);
@@ -75,15 +36,15 @@ function CreateSpace() {
   };
 
   const handleSearchKeyDown = async (e) => {
-    if (e.key === 'Enter') {
+    if (e.key === "Enter") {
       e.preventDefault();
       const query = searchQuery.trim();
-      
+
       if (!query) {
         setSearchResults([]);
         return;
       }
-      
+
       setIsSearching(true);
       try {
         const { data } = await dmService.searchUsers(query);
@@ -131,9 +92,8 @@ function CreateSpace() {
       if (spaceDescription.trim()) {
         payload.description = spaceDescription.trim();
       }
-      // Gửi icon nếu BE hỗ trợ (URL string theo API doc)
-      // Nếu BE chưa hỗ trợ, có thể bỏ qua hoặc comment dòng dưới
-      // payload.icon = spaceIcon;
+      // Gửi icon id (theo spaceIcons id) lên BE
+      payload.icon = spaceIcon;
 
       // Gửi memberIds nếu có members được chọn
       if (members.length > 0) {
@@ -299,18 +259,27 @@ function CreateSpace() {
             >
               Thêm thành viên
             </h3>
-            
+
             {/* Search input */}
             <div className="relative mb-3">
               {isSearching ? (
                 <div className="absolute left-3 top-1/2 -translate-y-1/2">
-                  <div className="w-4 h-4 border-2 border-t-transparent rounded-full animate-spin"
-                    style={{ borderColor: "var(--text-muted)", borderTopColor: "transparent" }}
+                  <div
+                    className="w-4 h-4 border-2 border-t-transparent rounded-full animate-spin"
+                    style={{
+                      borderColor: "var(--text-muted)",
+                      borderTopColor: "transparent",
+                    }}
                   />
                 </div>
               ) : (
                 <button
-                  onClick={() => handleSearchKeyDown({ key: 'Enter', preventDefault: () => {} })}
+                  onClick={() =>
+                    handleSearchKeyDown({
+                      key: "Enter",
+                      preventDefault: () => {},
+                    })
+                  }
                   className="absolute left-3 top-1/2 -translate-y-1/2 hover:opacity-70 transition-opacity"
                   style={{ color: "var(--text-muted)" }}
                 >
@@ -337,7 +306,7 @@ function CreateSpace() {
                 }
               />
             </div>
-            
+
             {/* Selected members - chips */}
             {members.length > 0 && (
               <div className="mb-3">
@@ -378,7 +347,7 @@ function CreateSpace() {
                 </div>
               </div>
             )}
-            
+
             {/* Search results with checkbox - keep showing after select */}
             {searchResults.length > 0 && (
               <div>

src/components/roomlist/SpaceRoomList.jsx

@@ -3,8 +3,16 @@ import { useSelector, useDispatch } from "react-redux";
 import { FiSearch, FiPlus, FiSliders } from "react-icons/fi";
 import { createRoom } from "../../store/slices/spaceSlice";
 import { setActiveRoom } from "../../store/slices/appSlice";
+import { getSpaceIconComponent } from "../../constants/spaceIcons";
 
-function RoomItem({ room, isActive, onClick, lastMessage, lastMessageTime, unreadCount }) {
+function RoomItem({
+  room,
+  isActive,
+  onClick,
+  lastMessage,
+  lastMessageTime,
+  unreadCount,
+}) {
   const [isHovered, setIsHovered] = useState(false);
 
   return (
@@ -58,9 +66,8 @@ function RoomItem({ room, isActive, onClick, lastMessage, lastMessageTime, unrea
         <div
           className="text-xs mt-0.5 truncate"
           style={{
-            color: unreadCount > 0
-              ? "var(--text-primary)"
-              : "var(--text-secondary)",
+            color:
+              unreadCount > 0 ? "var(--text-primary)" : "var(--text-secondary)",
             fontWeight: unreadCount > 0 ? 500 : 400,
           }}
         >
@@ -269,9 +276,13 @@ function SpaceRoomList({
   const dispatch = useDispatch();
   const [isSearching, setIsSearching] = useState(false);
 
-  const { spaces, roomsMap, roomsLoading, fetchedRooms } = useSelector(
-    (state) => state.space,
-  );
+  const {
+    spaces,
+    roomsMap,
+    roomsLoading,
+    fetchedRooms,
+    roomUnreadCounts,
+  } = useSelector((state) => state.space);
   const currentUser = useSelector((state) => state.auth.user);
 
   const spaceRooms = roomsMap[activeSpace] || [];
@@ -281,8 +292,13 @@ function SpaceRoomList({
   const getRoomLastMessage = (room) => {
     const lastMsg = room.last_message;
     if (!lastMsg) return null;
-    const isOwn = lastMsg.sender_id && currentUser?.id && String(lastMsg.sender_id) === String(currentUser.id);
-    const senderName = isOwn ? "Bạn" : (lastMsg.sender_display_name || lastMsg.username || "Unknown");
+    const isOwn =
+      lastMsg.sender_id &&
+      currentUser?.id &&
+      String(lastMsg.sender_id) === String(currentUser.id);
+    const senderName = isOwn
+      ? "Bạn"
+      : lastMsg.sender_display_name || lastMsg.username || "Unknown";
     return {
       content: lastMsg.content,
       senderName,
@@ -328,11 +344,13 @@ function SpaceRoomList({
         style={{ borderColor: "var(--border-primary)" }}
       >
         <div className="flex items-center justify-between mb-3">
-          <div
-            className="text-base font-semibold truncate"
-            style={{ color: "var(--text-primary)" }}
-          >
-            {currentSpace?.name || "Space"}
+          <div className="flex items-center gap-2 min-w-0">
+            <div
+              className="text-base font-semibold truncate"
+              style={{ color: "var(--text-primary)" }}
+            >
+              {currentSpace?.name || "Space"}
+            </div>
           </div>
           <button
             onClick={() => console.log("Space settings clicked")}
@@ -403,16 +421,16 @@ function SpaceRoomList({
                   room={room}
                   isActive={activeRoom === room.id}
                   onClick={() => setActiveRoom(room.id)}
-                  lastMessage={lastMsg ? `${lastMsg.senderName}: ${lastMsg.content}` : null}
-                  unreadCount={room.unreadCount || 0}
+                  lastMessage={
+                    lastMsg ? `${lastMsg.senderName}: ${lastMsg.content}` : null
+                  }
+                  unreadCount={roomUnreadCounts[room.id] || 0}
                 />
               );
             })}
           </div>
         )}
       </div>
-
-
     </div>
   );
 }

src/store/slices/dmSlice.js

@@ -125,6 +125,24 @@ export const preloadAllData = createAsyncThunk(
         socketService.joinDM(conv.id);
       });
 
+      // ─── Phase 3: Join all Space rooms via WebSocket ───
+      const allRoomIds = [];
+      spaces.forEach((space) => {
+        if (space.rooms && Array.isArray(space.rooms)) {
+          space.rooms.forEach((room) => {
+            if (room.id) {
+              allRoomIds.push(room.id);
+            }
+          });
+        }
+      });
+      allRoomIds.forEach((roomId) => {
+        socketService.joinRoom(roomId).catch((err) => {
+          console.warn("[preloadAllData] Failed to join room:", roomId, err);
+        });
+      });
+      console.log(`[preloadAllData] Joined ${allRoomIds.length} space rooms via WebSocket`);
+
       const elapsed = Math.round(performance.now() - preloadStart);
       console.log(`%c[preloadAllData] << Hoàn tất preload trong ${elapsed}ms`, "color: #8b5cf6; font-weight: bold; font-size: 13px;", {
         conversations: convList.length,

src/store/slices/spaceSlice.js

@@ -192,6 +192,11 @@ const initialState = {
   spacesFetched: false,
   fetchedRooms: {}, // { [spaceId]: boolean }
   fetchedMembers: {}, // { [spaceId]: boolean }
+  // 🆕 Room unread tracking (similar to DM)
+  roomUnreadCounts: {}, // { [roomId]: number }
+  roomTotalUnreadCount: 0,
+  // 🆕 Track joined rooms for WebSocket
+  joinedRooms: [], // Array<roomId>
 };
 
 const spaceSlice = createSlice({
@@ -260,6 +265,75 @@ const spaceSlice = createSlice({
 
     resetSpaceState: () => initialState,
 
+    // 🆕 Update room's last_message and move to top of list
+    updateRoomLastMessage: (state, action) => {
+      const { roomId, message } = action.payload;
+      // Find the room in roomsMap
+      for (const spaceId of Object.keys(state.roomsMap)) {
+        const rooms = state.roomsMap[spaceId];
+        const idx = rooms.findIndex((r) => r.id === roomId);
+        if (idx !== -1) {
+          rooms[idx] = {
+            ...rooms[idx],
+            last_message: {
+              id: message.id,
+              content: message.content,
+              created_at: message.created_at,
+              sender_id: message.sender_id,
+              sender_display_name: message.sender?.display_name || message.sender?.name || "Unknown",
+            },
+          };
+          // Move room to top of the list (similar to DM conversation sort)
+          const room = rooms.splice(idx, 1)[0];
+          rooms.unshift(room);
+          break;
+        }
+      }
+    },
+
+    // 🆕 Increment unread count for a room
+    incrementRoomUnreadCount: (state, action) => {
+      const { roomId } = action.payload;
+      const current = state.roomUnreadCounts[roomId] || 0;
+      state.roomUnreadCounts[roomId] = current + 1;
+      state.roomTotalUnreadCount = Object.values(state.roomUnreadCounts).reduce(
+        (a, b) => a + b,
+        0,
+      );
+    },
+
+    // 🆕 Clear unread count for a room
+    clearRoomUnreadCount: (state, action) => {
+      const { roomId } = action.payload;
+      delete state.roomUnreadCounts[roomId];
+      state.roomTotalUnreadCount = Object.values(state.roomUnreadCounts).reduce(
+        (a, b) => a + b,
+        0,
+      );
+    },
+
+    // 🆕 Set unread count for a room
+    setRoomUnreadCount: (state, action) => {
+      const { roomId, count } = action.payload;
+      if (count <= 0) {
+        delete state.roomUnreadCounts[roomId];
+      } else {
+        state.roomUnreadCounts[roomId] = count;
+      }
+      state.roomTotalUnreadCount = Object.values(state.roomUnreadCounts).reduce(
+        (a, b) => a + b,
+        0,
+      );
+    },
+
+    // 🆕 Track joined rooms
+    addJoinedRoom: (state, action) => {
+      const roomId = action.payload;
+      if (!state.joinedRooms.includes(roomId)) {
+        state.joinedRooms.push(roomId);
+      }
+    },
+
     // Load spaces and rooms from localStorage cache
     loadSpacesFromCache: (state) => {
       // Skip if already loaded in Redux
@@ -453,6 +527,12 @@ export const {
   resetSpaceState,
   loadSpacesFromCache,
   loadMembersFromCache,
+  // 🆕 Room unread tracking exports
+  updateRoomLastMessage,
+  incrementRoomUnreadCount,
+  clearRoomUnreadCount,
+  setRoomUnreadCount,
+  addJoinedRoom,
 } = spaceSlice.actions;
 
 export default spaceSlice.reducer;