Add user badges to typing bubbles

ts/components/conversation/Timeline.stories.tsx

@@ -25,6 +25,7 @@ import { TypingBubble } from './TypingBubble';
 import { ContactSpoofingType } from '../../util/contactSpoofing';
 import { ReadStatus } from '../../messages/MessageReadStatus';
 import type { WidthBreakpoint } from '../_util';
+import { ThemeType } from '../../types/Util';
 
 const i18n = setupI18n('en', enMessages);
 
@@ -443,11 +444,13 @@ const renderLoadingRow = () => <TimelineLoadingRow state="loading" />;
 const renderTypingBubble = () => (
   <TypingBubble
     acceptedMessageRequest
+    badge={undefined}
     color={getRandomColor()}
     conversationType="direct"
     phoneNumber="+18005552222"
     i18n={i18n}
     isMe={false}
+    theme={ThemeType.light}
     title="title"
     sharedGroupNames={[]}
   />

ts/components/conversation/TypingBubble.stories.tsx

@@ -10,6 +10,7 @@ import enMessages from '../../../_locales/en/messages.json';
 import type { Props } from './TypingBubble';
 import { TypingBubble } from './TypingBubble';
 import { AvatarColors } from '../../types/Colors';
+import { ThemeType } from '../../types/Util';
 
 const i18n = setupI18n('en', enMessages);
 
@@ -17,6 +18,7 @@ const story = storiesOf('Components/Conversation/TypingBubble', module);
 
 const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   acceptedMessageRequest: true,
+  badge: undefined,
   isMe: false,
   i18n,
   color: select(
@@ -33,6 +35,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
     overrideProps.conversationType || 'direct'
   ),
   sharedGroupNames: [],
+  theme: ThemeType.light,
 });
 
 story.add('Direct', () => {

ts/components/conversation/TypingBubble.tsx

@@ -7,8 +7,9 @@ import classNames from 'classnames';
 import { TypingAnimation } from './TypingAnimation';
 import { Avatar } from '../Avatar';
 
-import type { LocalizerType } from '../../types/Util';
+import type { LocalizerType, ThemeType } from '../../types/Util';
 import type { ConversationType } from '../../state/ducks/conversations';
+import type { BadgeType } from '../../badges/types';
 
 export type Props = Pick<
   ConversationType,
@@ -22,8 +23,10 @@ export type Props = Pick<
   | 'sharedGroupNames'
   | 'title'
 > & {
+  badge: undefined | BadgeType;
   conversationType: 'group' | 'direct';
   i18n: LocalizerType;
+  theme: ThemeType;
 };
 
 export class TypingBubble extends React.PureComponent<Props> {
@@ -31,6 +34,7 @@ export class TypingBubble extends React.PureComponent<Props> {
     const {
       acceptedMessageRequest,
       avatarPath,
+      badge,
       color,
       conversationType,
       i18n,
@@ -39,6 +43,7 @@ export class TypingBubble extends React.PureComponent<Props> {
       phoneNumber,
       profileName,
       sharedGroupNames,
+      theme,
       title,
     } = this.props;
 
@@ -51,6 +56,7 @@ export class TypingBubble extends React.PureComponent<Props> {
         <Avatar
           acceptedMessageRequest={acceptedMessageRequest}
           avatarPath={avatarPath}
+          badge={badge}
           color={color}
           conversationType="direct"
           i18n={i18n}
@@ -58,6 +64,7 @@ export class TypingBubble extends React.PureComponent<Props> {
           name={name}
           phoneNumber={phoneNumber}
           profileName={profileName}
+          theme={theme}
           title={title}
           sharedGroupNames={sharedGroupNames}
           size={28}

ts/state/ducks/conversations.ts

@@ -174,6 +174,7 @@ export type ConversationType = {
   typingContact?: {
     acceptedMessageRequest: boolean;
     avatarPath?: string;
+    badges: ConversationType['badges'];
     color?: AvatarColorType;
     isMe: boolean;
     name?: string;

ts/state/smart/TypingBubble.tsx

@@ -1,4 +1,4 @@
-// Copyright 2019-2020 Signal Messenger, LLC
+// Copyright 2019-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import { connect } from 'react-redux';
@@ -7,8 +7,9 @@ import { TypingBubble } from '../../components/conversation/TypingBubble';
 import { strictAssert } from '../../util/assert';
 import type { StateType } from '../reducer';
 
-import { getIntl } from '../selectors/user';
+import { getIntl, getTheme } from '../selectors/user';
 import { getConversationSelector } from '../selectors/conversations';
+import { getPreferredBadgeSelector } from '../selectors/badges';
 
 type ExternalProps = {
   id: string;
@@ -22,12 +23,16 @@ const mapStateToProps = (state: StateType, props: ExternalProps) => {
     throw new Error(`Did not find conversation ${id} in state!`);
   }
 
-  strictAssert(conversation.typingContact, 'Missing typingContact');
+  const { typingContact } = conversation;
+  strictAssert(typingContact, 'Missing typingContact');
 
   return {
-    ...conversation.typingContact,
+    ...typingContact,
+    // This `|| []` is probably unnecessarily defensive. This should only affect v5.24.
+    badge: getPreferredBadgeSelector(state)(typingContact.badges || []),
     conversationType: conversation.type,
     i18n: getIntl(state),
+    theme: getTheme(state),
   };
 };