feat: overlay the scroll-to-end-of-convo button with the unread message count

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

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

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

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;
+  top: ${props => (props.unreadCount ? '29' : '27')}px;
-  left: 28px;
+  left: ${props => (props.unreadCount
-  padding: 1px 4px;
+    ? (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>
+  );
+};