Optimize conversation unread message selectors

src-gui/src/renderer/components/pages/help/ConversationsBox.tsx

@@ -46,14 +46,17 @@ import { Message, PrimitiveDateTimeString } from "models/apiModel";
 import { formatDateTime } from "utils/conversionUtils";
 import { Theme } from "renderer/components/theme";
 
+const EMPTY_MESSAGES: Message[] = [];
+
 // Hook: sorted feedback IDs by latest activity, then unread
 function useSortedFeedbackIds() {
   const ids = useAppSelector((s) => s.conversations.knownFeedbackIds || []);
   const conv = useAppSelector((s) => s.conversations.conversations);
-  const seen = useAppSelector((s) => new Set(s.conversations.seenMessages));
+  const seenMessages = useAppSelector((s) => s.conversations.seenMessages);
   return useMemo(() => {
+    const seen = new Set(seenMessages);
     const arr = ids.map((id) => {
-      const msgs = conv[id] || [];
+      const msgs = conv[id] ?? EMPTY_MESSAGES;
       const unread = msgs.filter(
         (m) => m.is_from_staff && !seen.has(m.id.toString()),
       ).length;
@@ -74,7 +77,7 @@ function useSortedFeedbackIds() {
         b.latest - a.latest || (b.unread > 0 ? 1 : 0) - (a.unread > 0 ? 1 : 0),
     );
     return arr.map((x) => x.id);
-  }, [ids, conv, seen]);
+  }, [ids, conv, seenMessages]);
 }
 
 // Main component
@@ -173,7 +176,7 @@ function ConversationRow({
   onOpen: (id: string) => void;
 }) {
   const msgs = useAppSelector(
-    (s) => s.conversations.conversations[feedbackId] || [],
+    (s) => s.conversations.conversations[feedbackId] ?? EMPTY_MESSAGES,
   );
   const unread = useUnreadMessagesCount(feedbackId);
   const sorted = useMemo(
@@ -245,7 +248,7 @@ function ConversationModal({
 }) {
   const dispatch = useAppDispatch();
   const msgs = useAppSelector(
-    (s) => s.conversations.conversations[feedbackId] || [],
+    (s) => s.conversations.conversations[feedbackId] ?? EMPTY_MESSAGES,
   );
   const [newMessage, setNewMessage] = useState("");
   const [sending, setSending] = useState(false);

src-gui/src/store/hooks.ts

@@ -31,7 +31,7 @@ import {
   TauriBackgroundProgress,
   TauriBitcoinSyncProgress,
 } from "models/tauriModel";
-import { Alert } from "models/apiModel";
+import { Alert, Message } from "models/apiModel";
 import { fnv1a } from "utils/hash";
 import {
   selectAllSwapInfos,
@@ -43,6 +43,8 @@ import {
 export const useAppDispatch = () => useDispatch<AppDispatch>();
 export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
 
+const EMPTY_MESSAGES: Message[] = [];
+
 export function useResumeableSwapsCount(
   additionalFilter?: (s: GetSwapInfoResponseExt) => boolean,
 ) {
@@ -300,41 +302,48 @@ export function useConservativeBitcoinSyncProgress(): TauriBitcoinSyncProgress |
  * @returns The number of unread staff messages.
  */
 export function useUnreadMessagesCount(feedbackId: string): number {
-  const { conversationsMap, seenMessagesSet } = useAppSelector((state) => ({
-    conversationsMap: state.conversations.conversations,
-    // Convert seenMessages array to a Set for efficient lookup
-    seenMessagesSet: new Set(state.conversations.seenMessages),
-  }));
-
-  const messages = conversationsMap[feedbackId] || [];
-
-  const unreadStaffMessages = messages.filter(
-    (msg) => msg.is_from_staff && !seenMessagesSet.has(msg.id.toString()),
+  const messages = useAppSelector(
+    (state) => state.conversations.conversations[feedbackId] ?? EMPTY_MESSAGES,
+  );
+  const seenMessages = useAppSelector(
+    (state) => state.conversations.seenMessages,
   );
 
-  return unreadStaffMessages.length;
+  return useMemo(() => {
+    const seenMessagesSet = new Set(seenMessages);
+
+    return messages.filter(
+      (msg) => msg.is_from_staff && !seenMessagesSet.has(msg.id.toString()),
+    ).length;
+  }, [messages, seenMessages]);
 }
 
 /**
  * Calculates the total number of unread messages from staff across all feedback conversations.
  * @returns The total number of unread staff messages.
  */
 export function useTotalUnreadMessagesCount(): number {
-  const { conversationsMap, seenMessagesSet } = useAppSelector((state) => ({
-    conversationsMap: state.conversations.conversations,
-    seenMessagesSet: new Set(state.conversations.seenMessages),
-  }));
-
-  let totalUnreadCount = 0;
-  for (const feedbackId in conversationsMap) {
-    const messages = conversationsMap[feedbackId] || [];
-    const unreadStaffMessages = messages.filter(
-      (msg) => msg.is_from_staff && !seenMessagesSet.has(msg.id.toString()),
-    );
-    totalUnreadCount += unreadStaffMessages.length;
-  }
+  const conversationsMap = useAppSelector(
+    (state) => state.conversations.conversations,
+  );
+  const seenMessages = useAppSelector(
+    (state) => state.conversations.seenMessages,
+  );
+
+  return useMemo(() => {
+    const seenMessagesSet = new Set(seenMessages);
+
+    let totalUnreadCount = 0;
+    for (const feedbackId in conversationsMap) {
+      const messages = conversationsMap[feedbackId] ?? EMPTY_MESSAGES;
+      const unreadStaffMessages = messages.filter(
+        (msg) => msg.is_from_staff && !seenMessagesSet.has(msg.id.toString()),
+      );
+      totalUnreadCount += unreadStaffMessages.length;
+    }
 
-  return totalUnreadCount;
+    return totalUnreadCount;
+  }, [conversationsMap, seenMessages]);
 }
 
 /// Returns all the alerts that have not been acknowledged