unreads: use chat store unreads for sidebar count

Fixes LAND-1574.

We were using the unread state synced from the backend for the unread count on the messages tab button.
This caused a delay in updating the count due to the delay in the updated state.

If we switch to using the chat store unreads, the count updates immediately.

ui/src/logic/useMessagesUnreadCount.ts

@@ -1,31 +1,19 @@
 import { useMemo } from 'react';
-import { useDmUnreads } from '@/state/chat';
-import { useUnreads } from '@/state/channel/channel';
+import { useChatStoreDmUnreads } from '@/state/chat';
+import { useChatStoreChannelUnreads } from '@/state/channel/channel';
 import { useMessagesFilter } from '@/state/settings';
 import { usePinnedChats } from '@/state/pins';
-import { whomIsDm, whomIsMultiDm, whomIsNest } from '@/logic/utils';
+import { nestToFlag, whomIsDm, whomIsMultiDm, whomIsNest } from '@/logic/utils';
 
 export default function useMessagesUnreadCount(): number {
-  const { data: dmUnreads } = useDmUnreads();
-  const channelUnreads = useUnreads();
+  const dmUnreads = useChatStoreDmUnreads();
+  const channelUnreads = useChatStoreChannelUnreads();
   const messagesFilter = useMessagesFilter();
   const pins = usePinnedChats();
 
-  const dmUnreadsCount = useMemo(
-    () =>
-      Object.entries(dmUnreads).reduce(
-        (acc, [_whom, unread]) => (unread.count > 0 ? acc + 1 : acc),
-        0
-      ),
-    [dmUnreads]
-  );
+  const dmUnreadsCount = useMemo(() => dmUnreads.length, [dmUnreads]);
   const chatChannelUnreadsCount = useMemo(
-    () =>
-      Object.entries(channelUnreads).reduce(
-        (acc, [channel, unread]) =>
-          unread.count > 0 && channel.includes('chat/') ? acc + 1 : acc,
-        0
-      ),
+    () => channelUnreads.length,
     [channelUnreads]
   );
 
@@ -34,8 +22,8 @@ export default function useMessagesUnreadCount(): number {
       pins
         .filter((pin) => whomIsDm(pin) || whomIsMultiDm(pin))
         .reduce((accum, whom) => {
-          const unread = dmUnreads[whom];
-          return unread?.count > 0 ? accum + 1 : accum;
+          const unread = dmUnreads.find((un) => un === whom);
+          return unread ? accum + 1 : accum;
         }, 0),
     [pins, dmUnreads]
   );
@@ -45,8 +33,11 @@ export default function useMessagesUnreadCount(): number {
       pins
         .filter((pin) => whomIsNest(pin))
         .reduce((accum, whom) => {
-          const unread = channelUnreads[whom];
-          return unread?.count > 0 ? accum + 1 : accum;
+          const unread = channelUnreads.find((un) => {
+            const [_, flag] = nestToFlag(whom);
+            return un === flag;
+          });
+          return unread ? accum + 1 : accum;
         }, 0),
     [pins, channelUnreads]
   );

ui/src/state/channel/channel.ts

@@ -38,7 +38,7 @@ import {
   ChannelsSubscribeResponse,
 } from '@/types/channel';
 import api from '@/api';
-import { checkNest, log, nestToFlag } from '@/logic/utils';
+import { checkNest, log, nestToFlag, whomIsFlag } from '@/logic/utils';
 import useReactQuerySubscription from '@/logic/useReactQuerySubscription';
 import useReactQueryScry from '@/logic/useReactQueryScry';
 import useReactQuerySubscribeOnce from '@/logic/useReactQuerySubscribeOnce';
@@ -1085,6 +1085,25 @@ export function useUnreads(): Unreads {
   return data as Unreads;
 }
 
+export function useChatStoreChannelUnreads() {
+  const chats = useChatStore((s) => s.chats);
+
+  return useMemo(
+    () =>
+      Object.entries(chats).reduce((acc, [k, v]) => {
+        if (whomIsFlag(k)) {
+          const { unread } = v;
+
+          if (unread && !unread.seen) {
+            acc.push(k);
+          }
+        }
+        return acc;
+      }, [] as string[]),
+    [chats]
+  );
+}
+
 export function useIsJoined(nest: Nest) {
   checkNest(nest);
   const unreads = useUnreads();

ui/src/state/chat/chat.ts

@@ -1693,6 +1693,25 @@ export function useCheckDmUnread() {
   );
 }
 
+export function useChatStoreDmUnreads(): string[] {
+  const chats = useChatStore(selChats);
+
+  return useMemo(
+    () =>
+      Object.entries(chats).reduce((acc, [k, v]) => {
+        if (whomIsDm(k)) {
+          const { unread } = v;
+          if (unread && !unread.seen) {
+            acc.push(k);
+          }
+        }
+
+        return acc;
+      }, [] as string[]),
+    [chats]
+  );
+}
+
 export function useMultiDmIsPending(id: string): boolean {
   const unread = useDmUnread(id);
   const chat = useMultiDm(id);