Show mentioned badges & enable scrolling to mentions in conversations

ts/components/conversation/ScrollDownButton.stories.tsx

@@ -7,15 +7,17 @@ import { action } from '@storybook/addon-actions';
 
 import { setupI18n } from '../../util/setupI18n';
 import enMessages from '../../../_locales/en/messages.json';
-import type { Props } from './ScrollDownButton';
-import { ScrollDownButton } from './ScrollDownButton';
+import type { ScrollDownButtonPropsType } from './ScrollDownButton';
+import { ScrollDownButton, ScrollDownButtonVariant } from './ScrollDownButton';
 
 const i18n = setupI18n('en', enMessages);
 
-const createProps = (overrideProps: Partial<Props> = {}): Props => ({
+const createProps = (
+  overrideProps: Partial<ScrollDownButtonPropsType> = {}
+): ScrollDownButtonPropsType => ({
+  variant: ScrollDownButtonVariant.UNREAD_MESSAGES,
   i18n,
-  scrollDown: action('scrollDown'),
-  conversationId: 'fake-conversation-id',
+  onClick: action('scrollDown'),
   ...overrideProps,
 });
 
@@ -23,7 +25,7 @@ export default {
   title: 'Components/Conversation/ScrollDownButton',
   component: ScrollDownButton,
   argTypes: {
-    unreadCount: {
+    count: {
       control: { type: 'radio' },
       options: {
         None: undefined,
@@ -36,10 +38,22 @@ export default {
 } as Meta;
 
 // eslint-disable-next-line react/function-component-definition
-const Template: Story<Props> = args => <ScrollDownButton {...args} />;
+const Template: Story<ScrollDownButtonPropsType> = args => (
+  <ScrollDownButton {...args} />
+);
 
-export const Default = Template.bind({});
-Default.args = createProps({});
-Default.story = {
-  name: 'Default',
+export const UnreadMessages = Template.bind({});
+UnreadMessages.args = createProps({
+  variant: ScrollDownButtonVariant.UNREAD_MESSAGES,
+});
+UnreadMessages.story = {
+  name: 'UnreadMessages',
+};
+
+export const UnreadMentions = Template.bind({});
+UnreadMentions.args = createProps({
+  variant: ScrollDownButtonVariant.UNREAD_MENTIONS,
+});
+UnreadMentions.story = {
+  name: 'UnreadMentions',
 };

ts/components/conversation/ScrollDownButton.tsx

@@ -1,53 +1,69 @@
 // Copyright 2019 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+import classNames from 'classnames';
 import React from 'react';
 
 import type { LocalizerType } from '../../types/Util';
+import { getClassNamesFor } from '../../util/getClassNamesFor';
 
-export type Props = {
-  unreadCount?: number;
-  conversationId: string;
-
-  scrollDown: (conversationId: string) => void;
+export enum ScrollDownButtonVariant {
+  UNREAD_MESSAGES = 'unread-messages',
+  UNREAD_MENTIONS = 'unread-mentions',
+}
 
+export type ScrollDownButtonPropsType = {
+  variant: ScrollDownButtonVariant;
+  count?: number;
+  onClick: VoidFunction;
   i18n: LocalizerType;
 };
 
 export function ScrollDownButton({
-  conversationId,
-  unreadCount,
+  variant,
+  count,
+  onClick,
   i18n,
-  scrollDown,
-}: Props): JSX.Element {
-  const altText = unreadCount
-    ? i18n('icu:messagesBelow')
-    : i18n('icu:scrollDown');
+}: ScrollDownButtonPropsType): JSX.Element {
+  const getClassName = getClassNamesFor('ScrollDownButton');
 
   let badgeText: string | undefined;
-  if (unreadCount) {
-    if (unreadCount < 100) {
-      badgeText = unreadCount.toString();
+  if (count) {
+    if (count < 100) {
+      badgeText = count.toString();
     } else {
       badgeText = '99+';
     }
   }
 
+  let altText: string;
+  switch (variant) {
+    case ScrollDownButtonVariant.UNREAD_MESSAGES:
+      altText = count ? i18n('icu:messagesBelow') : i18n('icu:scrollDown');
+      break;
+    case ScrollDownButtonVariant.UNREAD_MENTIONS:
+      altText = i18n('icu:mentionsBelow');
+      break;
+    default:
+      throw new Error(`Unexpected variant: ${variant}`);
+  }
+
   return (
-    <div className="ScrollDownButton">
-      <button
-        type="button"
-        className="ScrollDownButton__button"
-        onClick={() => {
-          scrollDown(conversationId);
-        }}
-        title={altText}
-      >
-        {badgeText ? (
-          <div className="ScrollDownButton__button__badge">{badgeText}</div>
-        ) : null}
-        <div className="ScrollDownButton__button__icon" />
-      </button>
-    </div>
+    <button
+      type="button"
+      className={classNames(getClassName(''), getClassName(`__${variant}`))}
+      onClick={onClick}
+      title={altText}
+    >
+      {badgeText ? (
+        <div className={getClassName('__badge')}>{badgeText}</div>
+      ) : null}
+      <div
+        className={classNames(
+          getClassName('__icon'),
+          getClassName(`__icon--${variant}`)
+        )}
+      />
+    </button>
   );
 }

ts/components/conversation/Timeline.stories.tsx

@@ -277,6 +277,7 @@ const actions = () => ({
   markMessageRead: action('markMessageRead'),
   toggleSelectMessage: action('toggleSelectMessage'),
   targetMessage: action('targetMessage'),
+  scrollToOldestUnreadMention: action('scrollToOldestUnreadMention'),
   clearTargetedMessage: action('clearTargetedMessage'),
   updateSharedGroups: action('updateSharedGroups'),
 

ts/components/conversation/Timeline.tsx

@@ -8,7 +8,7 @@ import React from 'react';
 import Measure from 'react-measure';
 
 import type { ReadonlyDeep } from 'type-fest';
-import { ScrollDownButton } from './ScrollDownButton';
+import { ScrollDownButton, ScrollDownButtonVariant } from './ScrollDownButton';
 
 import type { LocalizerType, ThemeType } from '../../types/Util';
 import type { ConversationType } from '../../state/ducks/conversations';
@@ -100,6 +100,7 @@ type PropsHousekeepingType = {
   isIncomingMessageRequest: boolean;
   isSomeoneTyping: boolean;
   unreadCount?: number;
+  unreadMentionsCount?: number;
 
   targetedMessageId?: string;
   invitedContactsForNewlyCreatedGroup: Array<ConversationType>;
@@ -168,6 +169,7 @@ export type PropsActionsType = {
       safeConversationId: string;
     }>
   ) => void;
+  scrollToOldestUnreadMention: (conversationId: string) => unknown;
 };
 
 export type PropsType = PropsDataType &
@@ -776,10 +778,12 @@ export class Timeline extends React.Component<
       renderTypingBubble,
       reviewGroupMemberNameCollision,
       reviewMessageRequestNameCollision,
+      scrollToOldestUnreadMention,
       shouldShowMiniPlayer,
       theme,
       totalUnseen,
       unreadCount,
+      unreadMentionsCount,
     } = this.props;
     const {
       hasRecentlyScrolled,
@@ -815,7 +819,7 @@ export class Timeline extends React.Component<
         areAnyMessagesUnread &&
         areAnyMessagesBelowCurrentPosition
     );
-    const shouldShowScrollDownButton = Boolean(
+    const shouldShowScrollDownButtons = Boolean(
       areThereAnyMessages &&
         (areUnreadBelowCurrentPosition || areSomeMessagesBelowCurrentPosition)
     );
@@ -1127,14 +1131,24 @@ export class Timeline extends React.Component<
                   />
                 </div>
               </main>
+              {shouldShowScrollDownButtons ? (
+                <div className="module-timeline__scrolldown-buttons">
+                  {unreadMentionsCount ? (
+                    <ScrollDownButton
+                      variant={ScrollDownButtonVariant.UNREAD_MENTIONS}
+                      count={unreadMentionsCount}
+                      onClick={() => scrollToOldestUnreadMention(id)}
+                      i18n={i18n}
+                    />
+                  ) : null}
 
-              {shouldShowScrollDownButton ? (
-                <ScrollDownButton
-                  conversationId={id}
-                  unreadCount={areUnreadBelowCurrentPosition ? unreadCount : 0}
-                  scrollDown={this.onClickScrollDownButton}
-                  i18n={i18n}
-                />
+                  <ScrollDownButton
+                    variant={ScrollDownButtonVariant.UNREAD_MESSAGES}
+                    count={areUnreadBelowCurrentPosition ? unreadCount : 0}
+                    onClick={this.onClickScrollDownButton}
+                    i18n={i18n}
+                  />
+                </div>
               ) : null}
             </div>
           )}