From 79ee7d7c9ba774faada9c01cd67421c2e3683ed9 Mon Sep 17 00:00:00 2001
From: ~latter-bolden <brian@tlon.io>
Date: Thu, 8 Feb 2024 17:26:02 -0500
Subject: [PATCH 1/3] messages: add hook for getting messages count dependent
 on filter

---
 ui/src/logic/useMessagesUnreadCount.ts | 73 ++++++++++++++++++++++++++
 1 file changed, 73 insertions(+)
 create mode 100644 ui/src/logic/useMessagesUnreadCount.ts

diff --git a/ui/src/logic/useMessagesUnreadCount.ts b/ui/src/logic/useMessagesUnreadCount.ts
new file mode 100644
index 0000000000..9e1d1cf04b
--- /dev/null
+++ b/ui/src/logic/useMessagesUnreadCount.ts
@@ -0,0 +1,73 @@
+import { useMemo } from 'react';
+import { useDmUnreads } from '@/state/chat';
+import { useUnreads } from '@/state/channel/channel';
+import { useMessagesFilter } from '@/state/settings';
+import { usePinnedChats } from '@/state/pins';
+import { whomIsDm, whomIsMultiDm, whomIsNest } from '@/logic/utils';
+
+export default function useMessagesUnreadCount(): number {
+  const { data: dmUnreads } = useDmUnreads();
+  const channelUnreads = useUnreads();
+  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 chatChannelUnreadsCount = useMemo(
+    () =>
+      Object.entries(channelUnreads).reduce(
+        (acc, [channel, unread]) =>
+          unread.count > 0 && channel.includes('chat/') ? acc + 1 : acc,
+        0
+      ),
+    [channelUnreads]
+  );
+
+  const pinnedDmUnreadsCount = useMemo(
+    () =>
+      pins
+        .filter((pin) => whomIsDm(pin) || whomIsMultiDm(pin))
+        .reduce((accum, whom) => {
+          const unread = dmUnreads[whom];
+          return unread.count > 0 ? accum + 1 : accum;
+        }, 0),
+    [pins, dmUnreads]
+  );
+
+  const pinnedChatUnreadsCount = useMemo(
+    () =>
+      pins
+        .filter((pin) => whomIsNest(pin))
+        .reduce((accum, whom) => {
+          const unread = dmUnreads[whom];
+          return unread.count > 0 ? accum + 1 : accum;
+        }, 0),
+    [pins, dmUnreads]
+  );
+
+  const unreadCount = useMemo(() => {
+    switch (messagesFilter) {
+      case 'All Messages':
+        return dmUnreadsCount + chatChannelUnreadsCount;
+      case 'Group Channels':
+        return chatChannelUnreadsCount + pinnedDmUnreadsCount;
+      case 'Direct Messages':
+      default:
+        return dmUnreadsCount + pinnedChatUnreadsCount;
+    }
+  }, [
+    messagesFilter,
+    dmUnreadsCount,
+    chatChannelUnreadsCount,
+    pinnedDmUnreadsCount,
+    pinnedChatUnreadsCount,
+  ]);
+
+  return unreadCount;
+}

From 8967368a41b196adb20f0ad1da957cbe33318f48 Mon Sep 17 00:00:00 2001
From: ~latter-bolden <brian@tlon.io>
Date: Thu, 8 Feb 2024 17:28:49 -0500
Subject: [PATCH 2/3] sidebar: extract messages sidebar item and add count

---
 .../Sidebar/MessagesSidebarItem.tsx           | 51 +++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 ui/src/components/Sidebar/MessagesSidebarItem.tsx

diff --git a/ui/src/components/Sidebar/MessagesSidebarItem.tsx b/ui/src/components/Sidebar/MessagesSidebarItem.tsx
new file mode 100644
index 0000000000..c943cdc076
--- /dev/null
+++ b/ui/src/components/Sidebar/MessagesSidebarItem.tsx
@@ -0,0 +1,51 @@
+import cn from 'classnames';
+import { Link } from 'react-router-dom';
+import useMessagesUnreadCount from '@/logic/useMessagesUnreadCount';
+import MessagesIcon from '../icons/MessagesIcon';
+import SidebarItem from './SidebarItem';
+import useActiveTab from './util';
+import AddIcon16 from '../icons/Add16Icon';
+import ActivityIndicator from './ActivityIndicator';
+
+export default function MessagesSidebarItem() {
+  const activeTab = useActiveTab();
+  const unreadCount = useMessagesUnreadCount();
+
+  return (
+    <SidebarItem
+      icon={
+        <MessagesIcon
+          className={cn(
+            'm-1 h-4 w-4',
+            activeTab === 'messages' && 'text-black'
+          )}
+          nonNav
+          isInactive={activeTab !== 'messages'}
+        />
+      }
+      actions={
+        <div className="group">
+          {unreadCount > 0 && (
+            <ActivityIndicator
+              count={unreadCount}
+              className="group-hover:hidden"
+              bg={
+                activeTab === 'messages'
+                  ? 'bg-none text-black'
+                  : 'bg-blue-soft text-blue'
+              }
+            />
+          )}
+          <Link to="/dm/new" className="hidden items-center group-hover:flex">
+            <AddIcon16 className="h-4 w-4" />
+          </Link>
+        </div>
+      }
+      to={'/messages'}
+      className="group"
+      color={activeTab === 'messages' ? 'text-black' : 'text-gray-600'}
+    >
+      Messages
+    </SidebarItem>
+  );
+}

From 8079645dda16d6f41bf9698d08fd4a02c63dab66 Mon Sep 17 00:00:00 2001
From: ~latter-bolden <brian@tlon.io>
Date: Thu, 8 Feb 2024 17:30:15 -0500
Subject: [PATCH 3/3] sidebar: use new messages sidebar item in top nav

---
 ui/src/components/Sidebar/SidebarTopMenu.tsx | 36 ++------------------
 1 file changed, 3 insertions(+), 33 deletions(-)

diff --git a/ui/src/components/Sidebar/SidebarTopMenu.tsx b/ui/src/components/Sidebar/SidebarTopMenu.tsx
index 4b2ad3ec50..a6f3f4b0d9 100644
--- a/ui/src/components/Sidebar/SidebarTopMenu.tsx
+++ b/ui/src/components/Sidebar/SidebarTopMenu.tsx
@@ -1,21 +1,14 @@
 import React, { useContext } from 'react';
-import cn from 'classnames';
-import { debounce } from 'lodash';
-import { Link, useLocation } from 'react-router-dom';
-import ActivityIndicator, {
-  ActivitySidebarItem,
-} from '@/components/Sidebar/ActivityIndicator';
-import { useIsMobile } from '@/logic/useMedia';
+import { ActivitySidebarItem } from '@/components/Sidebar/ActivityIndicator';
 import SidebarItem from '@/components/Sidebar/SidebarItem';
 import { AppUpdateContext } from '@/logic/useAppUpdates';
 import ShipName from '@/components/ShipName';
 import Avatar, { useProfileColor } from '@/components/Avatar';
 import AddGroupSidebarItem from './AddGroupSidebarItem';
 import SidebarHeader from './SidebarHeader';
-import MessagesIcon from '../icons/MessagesIcon';
 import { DesktopUpdateButton } from '../UpdateNotices';
 import useActiveTab from './util';
-import AddIcon16 from '../icons/Add16Icon';
+import MessagesSidebarItem from './MessagesSidebarItem';
 
 const UpdateOrAppMenu = React.memo(() => {
   const { needsUpdate } = useContext(AppUpdateContext);
@@ -31,30 +24,7 @@ const SidebarTopMenu = React.memo(() => {
       <UpdateOrAppMenu />
 
       <AddGroupSidebarItem />
-
-      <SidebarItem
-        icon={
-          <MessagesIcon
-            className={cn(
-              'm-1 h-4 w-4',
-              activeTab === 'messages' && 'text-black'
-            )}
-            nonNav
-            isInactive={activeTab !== 'messages'}
-          />
-        }
-        actions={
-          <Link to="/dm/new" className="hidden group-hover:block">
-            <AddIcon16 className="h-4 w-4" />
-          </Link>
-        }
-        to={'/messages'}
-        className="group"
-        color={activeTab === 'messages' ? 'text-black' : 'text-gray-600'}
-      >
-        Messages
-      </SidebarItem>
-
+      <MessagesSidebarItem />
       <ActivitySidebarItem />
 
       <SidebarItem