Show badges in reaction viewer

ts/components/conversation/ReactionViewer.tsx

@@ -10,9 +10,11 @@ import { Avatar } from '../Avatar';
 import { Emoji } from '../emoji/Emoji';
 import { useRestoreFocus } from '../../hooks/useRestoreFocus';
 import type { ConversationType } from '../../state/ducks/conversations';
+import type { PreferredBadgeSelectorType } from '../../state/selectors/badges';
 import type { EmojiData } from '../emoji/lib';
 import { emojiToData } from '../emoji/lib';
 import { useEscapeHandling } from '../../hooks/useEscapeHandling';
+import type { ThemeType } from '../../types/Util';
 
 export type Reaction = {
   emoji: string;
@@ -21,6 +23,7 @@ export type Reaction = {
     ConversationType,
     | 'acceptedMessageRequest'
     | 'avatarPath'
+    | 'badges'
     | 'color'
     | 'id'
     | 'isMe'
@@ -33,9 +36,11 @@ export type Reaction = {
 };
 
 export type OwnProps = {
+  getPreferredBadge: PreferredBadgeSelectorType;
   reactions: Array<Reaction>;
   pickedReaction?: string;
   onClose?: () => unknown;
+  theme: ThemeType;
 };
 
 export type Props = OwnProps &
@@ -62,7 +67,18 @@ type ReactionCategory = {
 type ReactionWithEmojiData = Reaction & EmojiData;
 
 export const ReactionViewer = React.forwardRef<HTMLDivElement, Props>(
-  ({ i18n, reactions, onClose, pickedReaction, ...rest }, ref) => {
+  (
+    {
+      getPreferredBadge,
+      i18n,
+      onClose,
+      pickedReaction,
+      reactions,
+      theme,
+      ...rest
+    },
+    ref
+  ) => {
     const reactionsWithEmojiData = React.useMemo(
       () =>
         reactions
@@ -205,6 +221,7 @@ export const ReactionViewer = React.forwardRef<HTMLDivElement, Props>(
                 <Avatar
                   acceptedMessageRequest={from.acceptedMessageRequest}
                   avatarPath={from.avatarPath}
+                  badge={getPreferredBadge(from.badges)}
                   conversationType="direct"
                   sharedGroupNames={from.sharedGroupNames}
                   size={32}
@@ -213,6 +230,7 @@ export const ReactionViewer = React.forwardRef<HTMLDivElement, Props>(
                   name={from.name}
                   profileName={from.profileName}
                   phoneNumber={from.phoneNumber}
+                  theme={theme}
                   title={from.title}
                   i18n={i18n}
                 />