From e57b608db9aaacf7a466bcd639e9622bcd4400c4 Mon Sep 17 00:00:00 2001
From: Ian Macdonald <ian@caliban.org>
Date: Wed, 8 Mar 2023 03:28:36 +0100
Subject: [PATCH 1/5] feat: overlay the scroll-to-end-of-convo button with the
 unread message count

---
 ts/components/SessionScrollButton.tsx         |  4 ++--
 .../SessionMessagesListContainer.tsx          |  1 +
 ts/components/icon/SessionIcon.tsx            |  1 +
 ts/components/icon/SessionIconButton.tsx      |  5 +++++
 .../icon/SessionNotificationCount.tsx         | 22 +++++++++++++++----
 5 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/ts/components/SessionScrollButton.tsx b/ts/components/SessionScrollButton.tsx
index 5c7543da2..555cf881c 100644
--- a/ts/components/SessionScrollButton.tsx
+++ b/ts/components/SessionScrollButton.tsx
@@ -4,7 +4,6 @@ import styled from 'styled-components';
 import { getShowScrollButton } from '../state/selectors/conversations';
 
 import { SessionIconButton } from './icon';
-import { Noop } from '../types/Util';
 
 const SessionScrollButtonDiv = styled.div`
   position: fixed;
@@ -18,7 +17,7 @@ const SessionScrollButtonDiv = styled.div`
   }
 `;
 
-export const SessionScrollButton = (props: { onClickScrollBottom: Noop }) => {
+export const SessionScrollButton = (props: { onClickScrollBottom: () => void, unreadCount: number }) => {
   const show = useSelector(getShowScrollButton);
 
   return (
@@ -29,6 +28,7 @@ export const SessionScrollButton = (props: { onClickScrollBottom: Noop }) => {
         isHidden={!show}
         onClick={props.onClickScrollBottom}
         dataTestId="scroll-to-bottom-button"
+        unreadCount={props.unreadCount}
       />
     </SessionScrollButtonDiv>
   );
diff --git a/ts/components/conversation/SessionMessagesListContainer.tsx b/ts/components/conversation/SessionMessagesListContainer.tsx
index 042b84a41..d88e7647c 100644
--- a/ts/components/conversation/SessionMessagesListContainer.tsx
+++ b/ts/components/conversation/SessionMessagesListContainer.tsx
@@ -152,6 +152,7 @@ class SessionMessagesListContainerInner extends React.Component<Props> {
           // eslint-disable-next-line @typescript-eslint/no-misused-promises
           onClickScrollBottom={this.props.scrollToNow}
           key="scroll-down-button"
+          unreadCount={conversation.unreadCount || 0}
         />
       </StyledMessagesContainer>
     );
diff --git a/ts/components/icon/SessionIcon.tsx b/ts/components/icon/SessionIcon.tsx
index e190abf42..604357ca3 100644
--- a/ts/components/icon/SessionIcon.tsx
+++ b/ts/components/icon/SessionIcon.tsx
@@ -16,6 +16,7 @@ export type SessionIconProps = {
   noScale?: boolean;
   backgroundColor?: string;
   dataTestId?: string;
+  unreadCount?: number;
 };
 
 const getIconDimensionFromIconSize = (iconSize: SessionIconSize | number) => {
diff --git a/ts/components/icon/SessionIconButton.tsx b/ts/components/icon/SessionIconButton.tsx
index b572f6619..73c0796af 100644
--- a/ts/components/icon/SessionIconButton.tsx
+++ b/ts/components/icon/SessionIconButton.tsx
@@ -1,6 +1,10 @@
 import React, { KeyboardEvent } from 'react';
 import classNames from 'classnames';
 import _ from 'lodash';
+<<<<<<< HEAD
+=======
+import { SessionNotificationCount, SessionUnreadCount } from './SessionNotificationCount';
+>>>>>>> c66b53b75d (Overlay the scroll-to-end-of-convo button with the unread message count.)
 import styled from 'styled-components';
 
 import { SessionIcon, SessionIconProps } from '.';
@@ -61,6 +65,7 @@ const SessionIconButtonInner = React.forwardRef<HTMLDivElement, SProps>((props,
     dataTestIdIcon,
     style,
     tabIndex,
+    unreadCount
   } = props;
   const clickHandler = (e: React.MouseEvent<HTMLDivElement>) => {
     if (props.onClick) {
diff --git a/ts/components/icon/SessionNotificationCount.tsx b/ts/components/icon/SessionNotificationCount.tsx
index 26281b828..28c3443ad 100644
--- a/ts/components/icon/SessionNotificationCount.tsx
+++ b/ts/components/icon/SessionNotificationCount.tsx
@@ -5,13 +5,16 @@ type Props = {
   count?: number;
 };
 
-const StyledCountContainer = styled.div<{ shouldRender: boolean }>`
+const StyledCountContainer = styled.div<{ shouldRender: boolean, unreadCount?: number }>`
   position: absolute;
   font-size: 18px;
   line-height: 1.2;
-  top: 27px;
-  left: 28px;
-  padding: 1px 4px;
+  top: ${props => (props.unreadCount ? '29' : '27')}px;
+  left: ${props => (props.unreadCount
+    ? (15 - props.unreadCount.toString().length * 2).toString()
+    : '28'
+  )}px;
+  padding: 3px 3px;
   opacity: 1;
   display: flex;
   align-items: center;
@@ -52,3 +55,14 @@ export const SessionNotificationCount = (props: Props) => {
     </StyledCountContainer>
   );
 };
+
+export const SessionUnreadCount = (props: Props) => {
+  const { count } = props;
+  const shouldRender = Boolean(count && count > 0);
+
+  return (
+    <StyledCountContainer shouldRender={shouldRender} unreadCount={count}>
+      <StyledCount>{count}</StyledCount>
+    </StyledCountContainer>
+  );
+};

From b76ab7e9bf08bb1b414632e6dcc311f5ff32560f Mon Sep 17 00:00:00 2001
From: Kee Jefferys <kee@loki.network>
Date: Mon, 11 Dec 2023 19:30:14 +1100
Subject: [PATCH 2/5] fix: update unread display

---
 ts/components/SessionScrollButton.tsx         |  5 +++-
 ts/components/icon/SessionIconButton.tsx      |  8 ++-----
 .../icon/SessionNotificationCount.tsx         | 23 ++++++++-----------
 3 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/ts/components/SessionScrollButton.tsx b/ts/components/SessionScrollButton.tsx
index 555cf881c..62d21959c 100644
--- a/ts/components/SessionScrollButton.tsx
+++ b/ts/components/SessionScrollButton.tsx
@@ -17,7 +17,10 @@ const SessionScrollButtonDiv = styled.div`
   }
 `;
 
-export const SessionScrollButton = (props: { onClickScrollBottom: () => void, unreadCount: number }) => {
+export const SessionScrollButton = (props: {
+  onClickScrollBottom: () => void;
+  unreadCount: number;
+}) => {
   const show = useSelector(getShowScrollButton);
 
   return (
diff --git a/ts/components/icon/SessionIconButton.tsx b/ts/components/icon/SessionIconButton.tsx
index 73c0796af..a7e51b7d8 100644
--- a/ts/components/icon/SessionIconButton.tsx
+++ b/ts/components/icon/SessionIconButton.tsx
@@ -1,14 +1,9 @@
 import React, { KeyboardEvent } from 'react';
 import classNames from 'classnames';
 import _ from 'lodash';
-<<<<<<< HEAD
-=======
-import { SessionNotificationCount, SessionUnreadCount } from './SessionNotificationCount';
->>>>>>> c66b53b75d (Overlay the scroll-to-end-of-convo button with the unread message count.)
 import styled from 'styled-components';
-
+import { SessionNotificationCount, SessionUnreadCount } from './SessionNotificationCount';
 import { SessionIcon, SessionIconProps } from '.';
-import { SessionNotificationCount } from './SessionNotificationCount';
 
 interface SProps extends SessionIconProps {
   onClick?: (e?: React.MouseEvent<HTMLDivElement>) => void;
@@ -108,6 +103,7 @@ const SessionIconButtonInner = React.forwardRef<HTMLDivElement, SProps>((props,
         dataTestId={dataTestIdIcon}
       />
       {Boolean(notificationCount) && <SessionNotificationCount count={notificationCount} />}
+      {Boolean(unreadCount) && <SessionUnreadCount count={unreadCount} />}
     </StyledSessionIconButton>
   );
 });
diff --git a/ts/components/icon/SessionNotificationCount.tsx b/ts/components/icon/SessionNotificationCount.tsx
index 28c3443ad..16fc02e6f 100644
--- a/ts/components/icon/SessionNotificationCount.tsx
+++ b/ts/components/icon/SessionNotificationCount.tsx
@@ -4,18 +4,15 @@ import styled from 'styled-components';
 type Props = {
   count?: number;
 };
-
-const StyledCountContainer = styled.div<{ shouldRender: boolean, unreadCount?: number }>`
+const StyledCountContainer = styled.div<{ shouldRender: boolean; unreadCount?: number }>`
   position: absolute;
   font-size: 18px;
   line-height: 1.2;
-  top: ${props => (props.unreadCount ? '29' : '27')}px;
-  left: ${props => (props.unreadCount
-    ? (15 - props.unreadCount.toString().length * 2).toString()
-    : '28'
-  )}px;
-  padding: 3px 3px;
-  opacity: 1;
+  top: ${props => (props.unreadCount ? '-10px' : '27px')};
+  left: ${props => (props.unreadCount ? '50%' : '28px')};
+  transform: ${props => (props.unreadCount ? 'translateX(-50%)' : 'none')};
+  padding: ${props => (props.unreadCount ? '3px 3px' : '1px 4px')};
+  opacity: ${props => (props.shouldRender ? 1 : 0)};
   display: flex;
   align-items: center;
   justify-content: center;
@@ -24,14 +21,14 @@ const StyledCountContainer = styled.div<{ shouldRender: boolean, unreadCount?: n
   font-weight: 700;
   background: var(--unread-messages-alert-background-color);
   transition: var(--default-duration);
-  opacity: ${props => (props.shouldRender ? 1 : 0)};
   text-align: center;
   color: var(--unread-messages-alert-text-color);
+  white-space: ${props => (props.unreadCount ? 'nowrap' : 'normal')};
 `;
 
-const StyledCount = styled.div`
+const StyledCount = styled.div<{ unreadCount?: number }>`
   position: relative;
-  font-size: 0.6rem;
+  font-size: ${props => (props.unreadCount ? 'var(--font-size-xs)' : '0.6rem')};
 `;
 
 export const SessionNotificationCount = (props: Props) => {
@@ -62,7 +59,7 @@ export const SessionUnreadCount = (props: Props) => {
 
   return (
     <StyledCountContainer shouldRender={shouldRender} unreadCount={count}>
-      <StyledCount>{count}</StyledCount>
+      <StyledCount unreadCount={count}>{count}</StyledCount>
     </StyledCountContainer>
   );
 };

From 379ef2977ad01e4316c4eb6f653f85a9b0cd84b9 Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Fri, 22 Mar 2024 16:42:11 +1100
Subject: [PATCH 3/5] fix: cleanup PR and merge copy pasted component

---
 ts/components/SessionScrollButton.tsx         |  9 ++-
 .../SessionMessagesListContainer.tsx          |  1 -
 ts/components/icon/SessionIconButton.tsx      |  6 +-
 .../icon/SessionNotificationCount.tsx         | 66 ++++++++++---------
 ts/state/selectors/selectedConversation.ts    |  8 +++
 5 files changed, 49 insertions(+), 41 deletions(-)

diff --git a/ts/components/SessionScrollButton.tsx b/ts/components/SessionScrollButton.tsx
index 62d21959c..4d0b2b50d 100644
--- a/ts/components/SessionScrollButton.tsx
+++ b/ts/components/SessionScrollButton.tsx
@@ -3,6 +3,7 @@ import { useSelector } from 'react-redux';
 import styled from 'styled-components';
 import { getShowScrollButton } from '../state/selectors/conversations';
 
+import { useSelectedUnreadCount } from '../state/selectors/selectedConversation';
 import { SessionIconButton } from './icon';
 
 const SessionScrollButtonDiv = styled.div`
@@ -17,11 +18,9 @@ const SessionScrollButtonDiv = styled.div`
   }
 `;
 
-export const SessionScrollButton = (props: {
-  onClickScrollBottom: () => void;
-  unreadCount: number;
-}) => {
+export const SessionScrollButton = (props: { onClickScrollBottom: () => void }) => {
   const show = useSelector(getShowScrollButton);
+  const unreadCount = useSelectedUnreadCount();
 
   return (
     <SessionScrollButtonDiv>
@@ -31,7 +30,7 @@ export const SessionScrollButton = (props: {
         isHidden={!show}
         onClick={props.onClickScrollBottom}
         dataTestId="scroll-to-bottom-button"
-        unreadCount={props.unreadCount}
+        unreadCount={unreadCount}
       />
     </SessionScrollButtonDiv>
   );
diff --git a/ts/components/conversation/SessionMessagesListContainer.tsx b/ts/components/conversation/SessionMessagesListContainer.tsx
index d88e7647c..042b84a41 100644
--- a/ts/components/conversation/SessionMessagesListContainer.tsx
+++ b/ts/components/conversation/SessionMessagesListContainer.tsx
@@ -152,7 +152,6 @@ class SessionMessagesListContainerInner extends React.Component<Props> {
           // eslint-disable-next-line @typescript-eslint/no-misused-promises
           onClickScrollBottom={this.props.scrollToNow}
           key="scroll-down-button"
-          unreadCount={conversation.unreadCount || 0}
         />
       </StyledMessagesContainer>
     );
diff --git a/ts/components/icon/SessionIconButton.tsx b/ts/components/icon/SessionIconButton.tsx
index a7e51b7d8..6ef11e431 100644
--- a/ts/components/icon/SessionIconButton.tsx
+++ b/ts/components/icon/SessionIconButton.tsx
@@ -1,9 +1,9 @@
-import React, { KeyboardEvent } from 'react';
 import classNames from 'classnames';
 import _ from 'lodash';
+import React, { KeyboardEvent } from 'react';
 import styled from 'styled-components';
-import { SessionNotificationCount, SessionUnreadCount } from './SessionNotificationCount';
 import { SessionIcon, SessionIconProps } from '.';
+import { SessionNotificationCount, SessionUnreadCount } from './SessionNotificationCount';
 
 interface SProps extends SessionIconProps {
   onClick?: (e?: React.MouseEvent<HTMLDivElement>) => void;
@@ -60,7 +60,7 @@ const SessionIconButtonInner = React.forwardRef<HTMLDivElement, SProps>((props,
     dataTestIdIcon,
     style,
     tabIndex,
-    unreadCount
+    unreadCount,
   } = props;
   const clickHandler = (e: React.MouseEvent<HTMLDivElement>) => {
     if (props.onClick) {
diff --git a/ts/components/icon/SessionNotificationCount.tsx b/ts/components/icon/SessionNotificationCount.tsx
index 16fc02e6f..734cb96d8 100644
--- a/ts/components/icon/SessionNotificationCount.tsx
+++ b/ts/components/icon/SessionNotificationCount.tsx
@@ -4,15 +4,14 @@ import styled from 'styled-components';
 type Props = {
   count?: number;
 };
-const StyledCountContainer = styled.div<{ shouldRender: boolean; unreadCount?: number }>`
+const StyledCountContainer = styled.div<{ centeredOnTop: boolean }>`
   position: absolute;
   font-size: 18px;
   line-height: 1.2;
-  top: ${props => (props.unreadCount ? '-10px' : '27px')};
-  left: ${props => (props.unreadCount ? '50%' : '28px')};
-  transform: ${props => (props.unreadCount ? 'translateX(-50%)' : 'none')};
-  padding: ${props => (props.unreadCount ? '3px 3px' : '1px 4px')};
-  opacity: ${props => (props.shouldRender ? 1 : 0)};
+  top: ${props => (props.centeredOnTop ? '-10px' : '27px')};
+  left: ${props => (props.centeredOnTop ? '50%' : '28px')};
+  transform: ${props => (props.centeredOnTop ? 'translateX(-50%)' : 'none')};
+  padding: ${props => (props.centeredOnTop ? '3px 3px' : '1px 4px')};
   display: flex;
   align-items: center;
   justify-content: center;
@@ -23,43 +22,46 @@ const StyledCountContainer = styled.div<{ shouldRender: boolean; unreadCount?: n
   transition: var(--default-duration);
   text-align: center;
   color: var(--unread-messages-alert-text-color);
-  white-space: ${props => (props.unreadCount ? 'nowrap' : 'normal')};
+  white-space: ${props => (props.centeredOnTop ? 'nowrap' : 'normal')};
 `;
 
-const StyledCount = styled.div<{ unreadCount?: number }>`
+const StyledCount = styled.div<{ centeredOnTop: boolean }>`
   position: relative;
-  font-size: ${props => (props.unreadCount ? 'var(--font-size-xs)' : '0.6rem')};
+  font-size: ${props => (props.centeredOnTop ? 'var(--font-size-xs)' : '0.6rem')};
 `;
 
-export const SessionNotificationCount = (props: Props) => {
-  const { count } = props;
-  const overflow = Boolean(count && count > 99);
-  const shouldRender = Boolean(count && count > 0);
-
-  if (overflow) {
-    return (
-      <StyledCountContainer shouldRender={shouldRender}>
-        <StyledCount>
-          {99}
-          <span>+</span>
-        </StyledCount>
-      </StyledCountContainer>
-    );
-  }
+const OverflowingAt = (props: { overflowingAt: number }) => {
   return (
-    <StyledCountContainer shouldRender={shouldRender}>
-      <StyledCount>{count}</StyledCount>
-    </StyledCountContainer>
+    <>
+      {props.overflowingAt}
+      <span>+</span>
+    </>
   );
 };
 
-export const SessionUnreadCount = (props: Props) => {
-  const { count } = props;
-  const shouldRender = Boolean(count && count > 0);
+const NotificationOrUnreadCount = ({
+  centeredOnTop,
+  overflowingAt,
+  count,
+}: Props & { overflowingAt: number; centeredOnTop: boolean }) => {
+  if (!count) {
+    return null;
+  }
+  const overflowing = count > overflowingAt;
 
   return (
-    <StyledCountContainer shouldRender={shouldRender} unreadCount={count}>
-      <StyledCount unreadCount={count}>{count}</StyledCount>
+    <StyledCountContainer centeredOnTop={centeredOnTop}>
+      <StyledCount centeredOnTop={centeredOnTop}>
+        {overflowing ? <OverflowingAt overflowingAt={overflowingAt} /> : count}
+      </StyledCount>
     </StyledCountContainer>
   );
 };
+
+export const SessionNotificationCount = (props: Props) => {
+  return <NotificationOrUnreadCount centeredOnTop={false} overflowingAt={99} count={props.count} />;
+};
+
+export const SessionUnreadCount = (props: Props) => {
+  return <NotificationOrUnreadCount centeredOnTop={true} overflowingAt={999} count={props.count} />;
+};
diff --git a/ts/state/selectors/selectedConversation.ts b/ts/state/selectors/selectedConversation.ts
index 5aca5a79f..0dd1fe42f 100644
--- a/ts/state/selectors/selectedConversation.ts
+++ b/ts/state/selectors/selectedConversation.ts
@@ -60,6 +60,10 @@ const getIsSelectedActive = (state: StateType): boolean => {
   return Boolean(getSelectedConversation(state)?.activeAt) || false;
 };
 
+const getSelectedUnreadCount = (state: StateType) => {
+  return getSelectedConversation(state)?.unreadCount || 0;
+};
+
 const getIsSelectedNoteToSelf = (state: StateType): boolean => {
   return getSelectedConversation(state)?.isMe || false;
 };
@@ -302,6 +306,10 @@ export function useSelectedIsActive() {
   return useSelector(getIsSelectedActive);
 }
 
+export function useSelectedUnreadCount() {
+  return useSelector(getSelectedUnreadCount);
+}
+
 export function useSelectedIsNoteToSelf() {
   return useSelector(getIsSelectedNoteToSelf);
 }

From 9ee3286f7a5fba33624901a3181d681984482da9 Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Mon, 25 Mar 2024 11:26:14 +1100
Subject: [PATCH 4/5] fix: share props type for SessionNotificationCount

---
 ts/components/icon/SessionNotificationCount.tsx | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/ts/components/icon/SessionNotificationCount.tsx b/ts/components/icon/SessionNotificationCount.tsx
index 734cb96d8..ac26a8872 100644
--- a/ts/components/icon/SessionNotificationCount.tsx
+++ b/ts/components/icon/SessionNotificationCount.tsx
@@ -2,6 +2,8 @@ import React from 'react';
 import styled from 'styled-components';
 
 type Props = {
+  overflowingAt: number;
+  centeredOnTop: boolean;
   count?: number;
 };
 const StyledCountContainer = styled.div<{ centeredOnTop: boolean }>`
@@ -39,11 +41,7 @@ const OverflowingAt = (props: { overflowingAt: number }) => {
   );
 };
 
-const NotificationOrUnreadCount = ({
-  centeredOnTop,
-  overflowingAt,
-  count,
-}: Props & { overflowingAt: number; centeredOnTop: boolean }) => {
+const NotificationOrUnreadCount = ({ centeredOnTop, overflowingAt, count }: Props) => {
   if (!count) {
     return null;
   }
@@ -58,10 +56,10 @@ const NotificationOrUnreadCount = ({
   );
 };
 
-export const SessionNotificationCount = (props: Props) => {
+export const SessionNotificationCount = (props: Pick<Props, 'count'>) => {
   return <NotificationOrUnreadCount centeredOnTop={false} overflowingAt={99} count={props.count} />;
 };
 
-export const SessionUnreadCount = (props: Props) => {
+export const SessionUnreadCount = (props: Pick<Props, 'count'>) => {
   return <NotificationOrUnreadCount centeredOnTop={true} overflowingAt={999} count={props.count} />;
 };

From 444e60ce89ed3254585549c6f83a9db26c1b7045 Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Mon, 25 Mar 2024 12:10:33 +1100
Subject: [PATCH 5/5] fix: use 999+ for convo unread count, but 99+ for global
 one

---
 ts/components/icon/SessionNotificationCount.tsx | 17 +++++++++++++++--
 .../conversation-list-item/HeaderItem.tsx       |  9 ++++++++-
 ts/hooks/useParamSelector.ts                    |  6 ++----
 ts/session/constants.ts                         |  5 +++--
 ts/state/selectors/conversations.ts             |  2 --
 ts/state/selectors/selectedConversation.ts      |  8 +++-----
 6 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/ts/components/icon/SessionNotificationCount.tsx b/ts/components/icon/SessionNotificationCount.tsx
index ac26a8872..ba014f7e9 100644
--- a/ts/components/icon/SessionNotificationCount.tsx
+++ b/ts/components/icon/SessionNotificationCount.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
+import { Constants } from '../../session';
 
 type Props = {
   overflowingAt: number;
@@ -57,9 +58,21 @@ const NotificationOrUnreadCount = ({ centeredOnTop, overflowingAt, count }: Prop
 };
 
 export const SessionNotificationCount = (props: Pick<Props, 'count'>) => {
-  return <NotificationOrUnreadCount centeredOnTop={false} overflowingAt={99} count={props.count} />;
+  return (
+    <NotificationOrUnreadCount
+      centeredOnTop={false}
+      overflowingAt={Constants.CONVERSATION.MAX_GLOBAL_UNREAD_COUNT}
+      count={props.count}
+    />
+  );
 };
 
 export const SessionUnreadCount = (props: Pick<Props, 'count'>) => {
-  return <NotificationOrUnreadCount centeredOnTop={true} overflowingAt={999} count={props.count} />;
+  return (
+    <NotificationOrUnreadCount
+      centeredOnTop={true}
+      overflowingAt={Constants.CONVERSATION.MAX_CONVO_UNREAD_COUNT}
+      count={props.count}
+    />
+  );
 };
diff --git a/ts/components/leftpane/conversation-list-item/HeaderItem.tsx b/ts/components/leftpane/conversation-list-item/HeaderItem.tsx
index 1f435bfb1..e8e407a65 100644
--- a/ts/components/leftpane/conversation-list-item/HeaderItem.tsx
+++ b/ts/components/leftpane/conversation-list-item/HeaderItem.tsx
@@ -12,6 +12,7 @@ import {
   useMentionedUs,
   useUnreadCount,
 } from '../../../hooks/useParamSelector';
+import { Constants } from '../../../session';
 import {
   openConversationToSpecificMessage,
   openConversationWithMessages,
@@ -160,8 +161,14 @@ const UnreadCount = ({ convoId }: { convoId: string }) => {
   const unreadMsgCount = useUnreadCount(convoId);
   const forcedUnread = useIsForcedUnreadWithoutUnreadMsg(convoId);
 
+  const unreadWithOverflow =
+    unreadMsgCount > Constants.CONVERSATION.MAX_CONVO_UNREAD_COUNT
+      ? `${Constants.CONVERSATION.MAX_CONVO_UNREAD_COUNT}+`
+      : unreadMsgCount || ' ';
+
+  // TODO would be good to merge the style of this with SessionNotificationCount or SessionUnreadCount at some point.
   return unreadMsgCount > 0 || forcedUnread ? (
-    <p className="module-conversation-list-item__unread-count">{unreadMsgCount || ' '}</p>
+    <p className="module-conversation-list-item__unread-count">{unreadWithOverflow}</p>
   ) : null;
 };
 
diff --git a/ts/hooks/useParamSelector.ts b/ts/hooks/useParamSelector.ts
index 71744f8ee..e51be0c27 100644
--- a/ts/hooks/useParamSelector.ts
+++ b/ts/hooks/useParamSelector.ts
@@ -7,7 +7,6 @@ import {
   hasValidOutgoingRequestValues,
 } from '../models/conversation';
 import { isUsAnySogsFromCache } from '../session/apis/open_group_api/sogsv3/knownBlindedkeys';
-import { CONVERSATION } from '../session/constants';
 import { TimerOptions, TimerOptionsArray } from '../session/disappearing_messages/timerOptions';
 import { PubKey } from '../session/types';
 import { UserUtils } from '../session/utils';
@@ -241,12 +240,11 @@ export function useMessageReactsPropsById(messageId?: string) {
 
 /**
  * Returns the unread count of that conversation, or 0 if none are found.
- * Note: returned value is capped at a max of CONVERSATION.MAX_UNREAD_COUNT
+ * Note: returned value is capped at a max of CONVERSATION.MAX_CONVO_UNREAD_COUNT
  */
 export function useUnreadCount(conversationId?: string): number {
   const convoProps = useConversationPropsById(conversationId);
-  const convoUnreadCount = convoProps?.unreadCount || 0;
-  return Math.min(CONVERSATION.MAX_UNREAD_COUNT, convoUnreadCount);
+  return convoProps?.unreadCount || 0;
 }
 
 export function useHasUnread(conversationId?: string): boolean {
diff --git a/ts/session/constants.ts b/ts/session/constants.ts
index 72602b720..806061e31 100644
--- a/ts/session/constants.ts
+++ b/ts/session/constants.ts
@@ -51,8 +51,9 @@ export const CONVERSATION = {
   // Maximum voice message duraton of 5 minutes
   // which equates to 1.97 MB
   MAX_VOICE_MESSAGE_DURATION: 300,
-  MAX_UNREAD_COUNT: 999,
-};
+  MAX_CONVO_UNREAD_COUNT: 999,
+  MAX_GLOBAL_UNREAD_COUNT: 99, // the global one does not look good with 4 digits (999+) so we have a smaller one for it
+} as const;
 
 /**
  * The file server and onion request max upload size is 10MB precisely.
diff --git a/ts/state/selectors/conversations.ts b/ts/state/selectors/conversations.ts
index 16a46412b..5babd3893 100644
--- a/ts/state/selectors/conversations.ts
+++ b/ts/state/selectors/conversations.ts
@@ -336,7 +336,6 @@ const _getGlobalUnreadCount = (sortedConversations: Array<ReduxConversationType>
     }
 
     if (
-      globalUnreadCount < 100 &&
       isNumber(conversation.unreadCount) &&
       isFinite(conversation.unreadCount) &&
       conversation.unreadCount > 0 &&
@@ -345,7 +344,6 @@ const _getGlobalUnreadCount = (sortedConversations: Array<ReduxConversationType>
       globalUnreadCount += conversation.unreadCount;
     }
   }
-
   return globalUnreadCount;
 };
 
diff --git a/ts/state/selectors/selectedConversation.ts b/ts/state/selectors/selectedConversation.ts
index 0dd1fe42f..3f4b2bf3c 100644
--- a/ts/state/selectors/selectedConversation.ts
+++ b/ts/state/selectors/selectedConversation.ts
@@ -1,5 +1,6 @@
 import { isString } from 'lodash';
 import { useSelector } from 'react-redux';
+import { useUnreadCount } from '../../hooks/useParamSelector';
 import { ConversationTypeEnum, isOpenOrClosedGroup } from '../../models/conversationAttributes';
 import {
   DisappearingMessageConversationModeType,
@@ -60,10 +61,6 @@ const getIsSelectedActive = (state: StateType): boolean => {
   return Boolean(getSelectedConversation(state)?.activeAt) || false;
 };
 
-const getSelectedUnreadCount = (state: StateType) => {
-  return getSelectedConversation(state)?.unreadCount || 0;
-};
-
 const getIsSelectedNoteToSelf = (state: StateType): boolean => {
   return getSelectedConversation(state)?.isMe || false;
 };
@@ -307,7 +304,8 @@ export function useSelectedIsActive() {
 }
 
 export function useSelectedUnreadCount() {
-  return useSelector(getSelectedUnreadCount);
+  const selectedConversation = useSelectedConversationKey();
+  return useUnreadCount(selectedConversation);
 }
 
 export function useSelectedIsNoteToSelf() {