Add unread message count indicator per conversation

ts/components/SessionScrollButton.tsx

@@ -3,8 +3,8 @@ 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';
-import { Noop } from '../types/Util';
 
 const SessionScrollButtonDiv = styled.div`
   position: fixed;
@@ -18,8 +18,9 @@ const SessionScrollButtonDiv = styled.div`
   }
 `;
 
-export const SessionScrollButton = (props: { onClickScrollBottom: Noop }) => {
+export const SessionScrollButton = (props: { onClickScrollBottom: () => void }) => {
   const show = useSelector(getShowScrollButton);
+  const unreadCount = useSelectedUnreadCount();
 
   return (
     <SessionScrollButtonDiv>
@@ -29,6 +30,7 @@ export const SessionScrollButton = (props: { onClickScrollBottom: Noop }) => {
         isHidden={!show}
         onClick={props.onClickScrollBottom}
         dataTestId="scroll-to-bottom-button"
+        unreadCount={unreadCount}
       />
     </SessionScrollButtonDiv>
   );

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) => {

ts/components/icon/SessionIconButton.tsx

@@ -1,10 +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 { SessionIcon, SessionIconProps } from '.';
-import { SessionNotificationCount } from './SessionNotificationCount';
+import { SessionNotificationCount, SessionUnreadCount } from './SessionNotificationCount';
 
 interface SProps extends SessionIconProps {
   onClick?: (e?: React.MouseEvent<HTMLDivElement>) => void;
@@ -61,6 +60,7 @@ const SessionIconButtonInner = React.forwardRef<HTMLDivElement, SProps>((props,
     dataTestIdIcon,
     style,
     tabIndex,
+    unreadCount,
   } = props;
   const clickHandler = (e: React.MouseEvent<HTMLDivElement>) => {
     if (props.onClick) {
@@ -103,6 +103,7 @@ const SessionIconButtonInner = React.forwardRef<HTMLDivElement, SProps>((props,
         dataTestId={dataTestIdIcon}
       />
       {Boolean(notificationCount) && <SessionNotificationCount count={notificationCount} />}
+      {Boolean(unreadCount) && <SessionUnreadCount count={unreadCount} />}
     </StyledSessionIconButton>
   );
 });

ts/components/icon/SessionNotificationCount.tsx

@@ -2,17 +2,18 @@ import React from 'react';
 import styled from 'styled-components';
 
 type Props = {
+  overflowingAt: number;
+  centeredOnTop: boolean;
   count?: number;
 };
-
-const StyledCountContainer = styled.div<{ shouldRender: boolean }>`
+const StyledCountContainer = styled.div<{ centeredOnTop: boolean }>`
   position: absolute;
   font-size: 18px;
   line-height: 1.2;
-  top: 27px;
-  left: 28px;
-  padding: 1px 4px;
-  opacity: 1;
+  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;
@@ -21,34 +22,44 @@ const StyledCountContainer = styled.div<{ shouldRender: boolean }>`
   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.centeredOnTop ? 'nowrap' : 'normal')};
 `;
 
-const StyledCount = styled.div`
+const StyledCount = styled.div<{ centeredOnTop: boolean }>`
   position: relative;
-  font-size: 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);
+const OverflowingAt = (props: { overflowingAt: number }) => {
+  return (
+    <>
+      {props.overflowingAt}
+      <span>+</span>
+    </>
+  );
+};
 
-  if (overflow) {
-    return (
-      <StyledCountContainer shouldRender={shouldRender}>
-        <StyledCount>
-          {99}
-          <span>+</span>
-        </StyledCount>
-      </StyledCountContainer>
-    );
+const NotificationOrUnreadCount = ({ centeredOnTop, overflowingAt, count }: Props) => {
+  if (!count) {
+    return null;
   }
+  const overflowing = count > overflowingAt;
+
   return (
-    <StyledCountContainer shouldRender={shouldRender}>
-      <StyledCount>{count}</StyledCount>
+    <StyledCountContainer centeredOnTop={centeredOnTop}>
+      <StyledCount centeredOnTop={centeredOnTop}>
+        {overflowing ? <OverflowingAt overflowingAt={overflowingAt} /> : count}
+      </StyledCount>
     </StyledCountContainer>
   );
 };
+
+export const SessionNotificationCount = (props: Pick<Props, 'count'>) => {
+  return <NotificationOrUnreadCount centeredOnTop={false} overflowingAt={99} count={props.count} />;
+};
+
+export const SessionUnreadCount = (props: Pick<Props, 'count'>) => {
+  return <NotificationOrUnreadCount centeredOnTop={true} overflowingAt={999} count={props.count} />;
+};

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);
 }