sửa giao diện dark mode cho sáng hơn chút

src/components/roomlist/DMList.jsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import { FiMessageSquare, FiUserPlus, FiSearch } from "react-icons/fi";
 import { setActiveRoom } from "../../store/slices/appSlice";
@@ -211,8 +211,14 @@ function DMList({ activeRoom, setActiveRoom: setActiveRoomProp }) {
   const dispatch = useDispatch();
   const { isDark } = useSelector((state) => state.theme);
   const { loading: dmLoading, conversations, conversationsFetched } = useSelector((state) => state.dm);
+  console.log("[DMList] Render, conversations:", conversations.length, "fetched:", conversationsFetched);
   const [sentRequests, setSentRequests] = useState([]);
 
+  useEffect(() => {
+    console.log("[DMList] MOUNTED");
+    return () => console.log("[DMList] UNMOUNTED");
+  }, []);
+
   const {
     items,
     onlineStatus,

src/hooks/useDMList.js

@@ -43,6 +43,7 @@ function matchesStudyBot(query) {
 export function useDMList() {
   const dispatch = useDispatch();
   const { conversations, onlineUsers, conversationsFetched } = useSelector((state) => state.dm);
+  console.log("[useDMList] Hook called, conversations:", conversations.length, "fetched:", conversationsFetched);
 
   const [searchResults, setSearchResults] = useState([]);
   const [searchQuery, setSearchQuery] = useState("");
@@ -54,10 +55,14 @@ export function useDMList() {
   const processedMessageIds = useRef(new Set());
 
   // Fetch conversations on mount — only if not already fetched
+  const isFetchingRef = useRef(false);
   useEffect(() => {
     if (conversationsFetched) return; // Skip: already cached
+    if (isFetchingRef.current) return; // Prevent duplicate requests
+    isFetchingRef.current = true;
     dispatch(fetchConversations());
-  }, [dispatch, conversationsFetched]);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dispatch]);
 
   // Listen to realtime updates via WebSocket
   useEffect(() => {

src/services/dm.service.js

@@ -7,7 +7,14 @@ export const dmService = {
   createOrGetConversation: (userId) => api.post("/dms", { userId }),
 
   /** Get list of conversations */
-  getConversations: (params) => api.get("/dms", { params }),
+  getConversations: async (params) => {
+    const response = await api.get("/dms", { params });
+    console.log("[dmService.getConversations] API response:", {
+      count: response.data?.data?.length || response.data?.conversations?.length || response.data?.length || 0,
+      data: response.data,
+    });
+    return response;
+  },
 
   // === Messages ===
 

src/store/slices/dmSlice.js

@@ -8,9 +8,13 @@ export const fetchConversations = createAsyncThunk(
   "dm/fetchConversations",
   async (_, { rejectWithValue }) => {
     try {
+      console.log("[fetchConversations] Calling API...");
       const { data } = await dmService.getConversations({ page: 1, limit: 20 });
-      return data.data || data.conversations || data || [];
+      const result = data.data || data.conversations || data || [];
+      console.log("[fetchConversations] Result:", { count: result.length, ids: result.map(c => c.id) });
+      return result;
     } catch (err) {
+      console.error("[fetchConversations] Error:", err);
       return rejectWithValue(err.response?.data?.message || "Không thể tải danh sách trò chuyện");
     }
   }
@@ -243,6 +247,7 @@ const dmSlice = createSlice({
       .addCase(fetchConversations.fulfilled, (state, action) => {
         state.loading = false;
         state.conversations = action.payload;
+        state.conversationsFetched = true;
       })
       .addCase(fetchConversations.rejected, (state, action) => {
         state.loading = false;

src/styles/theme.css

@@ -15,19 +15,19 @@
 /* ===================== DARK MODE ===================== */
 .dark {
   /* === SURFACE COLORS === */
-  --bg-surface: #1a1f35;
-  --bg-surface-secondary: #222842;
-  --bg-surface-tertiary: #2a3050;
+  --bg-surface: #1e2238;
+  --bg-surface-secondary: #252b4a;
+  --bg-surface-tertiary: #2e3558;
 
   /* === BORDER COLORS === */
-  --border-primary: #333a5c;
-  --border-secondary: #3d4568;
+  --border-primary: #3d4568;
+  --border-secondary: #4a5478;
 
   /* === TEXT COLORS === */
-  --text-primary: #e8ecf4;
-  --text-secondary: #b0bdd0;
-  --text-tertiary: #8899b5;
-  --text-muted: #6b7a99;
+  --text-primary: #f0f3f8;
+  --text-secondary: #c4d0e4;
+  --text-tertiary: #9aadcc;
+  --text-muted: #7a8db0;
 
   /* === BRAND COLORS === */
   --primary: #a3a6ff;
@@ -43,28 +43,28 @@
   --tertiary-active: #ac8aff26;
 
   /* === INPUT COLORS === */
-  --input-bg: #222842;
-  --input-border: #333a5c;
-  --input-text: #e8ecf4;
-  --input-placeholder: #8899b5;
+  --input-bg: #252b4a;
+  --input-border: #3d4568;
+  --input-text: #f0f3f8;
+  --input-placeholder: #9aadcc;
 
   /* === HOVER COLORS === */
-  --hover-primary: #2a3050;
-  --hover-secondary: #333a5c;
+  --hover-primary: #2e3558;
+  --hover-secondary: #3d4568;
 
   /* === CARD/BG COLORS === */
-  --card-bg: #222842;
-  --card-bg-secondary: #2a3050;
+  --card-bg: #252b4a;
+  --card-bg-secondary: #2e3558;
 
   /* === STATUS COLORS === */
   --online: #69f6b8;
-  --offline: #8899b5;
+  --offline: #9aadcc;
   --notification: #a3a6ff;
   --danger: #ff6b6b;
 
   /* === SCROLLBAR === */
-  --scrollbar-thumb: #3d4568;
-  --scrollbar-thumb-hover: #4d5578;
+  --scrollbar-thumb: #4a5478;
+  --scrollbar-thumb-hover: #5a6488;
 }
 
 /* ===================== LIGHT MODE ===================== */