[web] show unreads for each community in the community list

Summary:
This diff introduces the unread badge to the community list in the navigation sidebar. Here we want to show the unreads broken down by each community

Linear task: https://linear.app/comm/issue/ENG-5951/introduce-a-new-unread-badge

Depends on D10435

Test Plan:
Please see the screenshots/demo video

{F983389}

{F996924}

{F983387}

{F983410}

Reviewers: atul, rohan, kamil

Reviewed By: atul

Subscribers: ashoat, tomek

Differential Revision: https://phab.comm.dev/D10393

web/navigation-sidebar/community-list-item.css

@@ -1,3 +1,13 @@
+.container {
+  position: relative;
+}
+
 .container:hover {
   cursor: pointer;
 }
+
+.unreadBadgeContainer {
+  position: absolute;
+  right: -8px;
+  bottom: 14px;
+}

web/navigation-sidebar/community-list-item.react.js

@@ -2,10 +2,13 @@
 
 import * as React from 'react';
 
+import { unreadCountSelectorForCommunity } from 'lib/selectors/thread-selectors.js';
 import type { ResolvedThreadInfo } from 'lib/types/thread-types.js';
 
 import css from './community-list-item.css';
 import ThreadAvatar from '../avatars/thread-avatar.react.js';
+import UnreadBadge from '../components/unread-badge.react.js';
+import { useSelector } from '../redux/redux-utils.js';
 import { useNavigationSidebarTooltip } from '../utils/tooltip-action-utils.js';
 
 type Props = {
@@ -14,6 +17,22 @@ type Props = {
 
 function CommunityListItem(props: Props): React.Node {
   const { threadInfo } = props;
+  const { id: threadID } = threadInfo;
+
+  const communityUnreadCountSelector =
+    unreadCountSelectorForCommunity(threadID);
+  const unreadCountValue = useSelector(communityUnreadCountSelector);
+
+  const unreadBadge = React.useMemo(() => {
+    if (unreadCountValue === 0) {
+      return null;
+    }
+    return (
+      <div className={css.unreadBadgeContainer}>
+        <UnreadBadge unreadCount={unreadCountValue} />
+      </div>
+    );
+  }, [unreadCountValue]);
 
   const { onMouseEnter, onMouseLeave } = useNavigationSidebarTooltip({
     tooltipLabel: threadInfo.uiName,
@@ -26,6 +45,7 @@ function CommunityListItem(props: Props): React.Node {
       onMouseLeave={onMouseLeave}
     >
       <ThreadAvatar size="S" threadInfo={threadInfo} />
+      {unreadBadge}
     </div>
   );
 }