Display user badges

ts/components/conversationList/BaseConversationListItem.tsx

@@ -8,10 +8,11 @@ import { isBoolean, isNumber } from 'lodash';
 import { v4 as uuid } from 'uuid';
 
 import { Avatar, AvatarSize } from '../Avatar';
+import type { BadgeType } from '../../badges/types';
 import { Timestamp } from '../conversation/Timestamp';
 import { isConversationUnread } from '../../util/isConversationUnread';
 import { cleanId } from '../_util';
-import type { LocalizerType } from '../../types/Util';
+import type { LocalizerType, ThemeType } from '../../types/Util';
 import type { ConversationType } from '../../state/ducks/conversations';
 
 const BASE_CLASS_NAME =
@@ -27,6 +28,7 @@ export const MESSAGE_TEXT_CLASS_NAME = `${MESSAGE_CLASS_NAME}__text`;
 const CHECKBOX_CLASS_NAME = `${BASE_CLASS_NAME}__checkbox`;
 
 type PropsType = {
+  badge?: BadgeType;
   checked?: boolean;
   conversationType: 'group' | 'direct';
   disabled?: boolean;
@@ -42,6 +44,7 @@ type PropsType = {
   messageText?: ReactNode;
   messageTextIsAlwaysFullSize?: boolean;
   onClick?: () => void;
+  theme?: ThemeType;
   unreadCount?: number;
 } & Pick<
   ConversationType,
@@ -62,6 +65,7 @@ export const BaseConversationListItem: FunctionComponent<PropsType> = React.memo
   function BaseConversationListItem({
     acceptedMessageRequest,
     avatarPath,
+    badge,
     checked,
     color,
     conversationType,
@@ -82,6 +86,7 @@ export const BaseConversationListItem: FunctionComponent<PropsType> = React.memo
     phoneNumber,
     profileName,
     sharedGroupNames,
+    theme,
     title,
     unblurredAvatarPath,
     unreadCount,
@@ -129,6 +134,7 @@ export const BaseConversationListItem: FunctionComponent<PropsType> = React.memo
         <Avatar
           acceptedMessageRequest={acceptedMessageRequest}
           avatarPath={avatarPath}
+          badge={badge}
           color={color}
           conversationType={conversationType}
           noteToSelf={isAvatarNoteToSelf}
@@ -137,6 +143,7 @@ export const BaseConversationListItem: FunctionComponent<PropsType> = React.memo
           name={name}
           phoneNumber={phoneNumber}
           profileName={profileName}
+          theme={theme}
           title={title}
           sharedGroupNames={sharedGroupNames}
           size={AvatarSize.FORTY_EIGHT}

ts/components/conversationList/ConversationListItem.tsx

@@ -15,8 +15,9 @@ import { MessageBody } from '../conversation/MessageBody';
 import { ContactName } from '../conversation/ContactName';
 import { TypingAnimation } from '../conversation/TypingAnimation';
 
-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';
 
 const MESSAGE_STATUS_ICON_CLASS_NAME = `${MESSAGE_TEXT_CLASS_NAME}__status-icon`;
 
@@ -36,6 +37,7 @@ export type PropsData = Pick<
   ConversationType,
   | 'acceptedMessageRequest'
   | 'avatarPath'
+  | 'badges'
   | 'color'
   | 'draftPreview'
   | 'id'
@@ -56,11 +58,14 @@ export type PropsData = Pick<
   | 'typingContact'
   | 'unblurredAvatarPath'
   | 'unreadCount'
->;
+> & {
+  badge?: BadgeType;
+};
 
 type PropsHousekeeping = {
   i18n: LocalizerType;
   onClick: (id: string) => void;
+  theme: ThemeType;
 };
 
 export type Props = PropsData & PropsHousekeeping;
@@ -69,6 +74,7 @@ export const ConversationListItem: FunctionComponent<Props> = React.memo(
   function ConversationListItem({
     acceptedMessageRequest,
     avatarPath,
+    badge,
     color,
     draftPreview,
     i18n,
@@ -85,6 +91,7 @@ export const ConversationListItem: FunctionComponent<Props> = React.memo(
     profileName,
     sharedGroupNames,
     shouldShowDraft,
+    theme,
     title,
     type,
     typingContact,
@@ -163,6 +170,7 @@ export const ConversationListItem: FunctionComponent<Props> = React.memo(
       <BaseConversationListItem
         acceptedMessageRequest={acceptedMessageRequest}
         avatarPath={avatarPath}
+        badge={badge}
         color={color}
         conversationType={type}
         headerDate={lastUpdated}
@@ -180,6 +188,7 @@ export const ConversationListItem: FunctionComponent<Props> = React.memo(
         phoneNumber={phoneNumber}
         profileName={profileName}
         sharedGroupNames={sharedGroupNames}
+        theme={theme}
         title={title}
         unreadCount={unreadCount}
         unblurredAvatarPath={unblurredAvatarPath}