Show mentioned badges & enable scrolling to mentions in conversations

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