Fun picker improvements

ts/components/conversation/ReactionViewer.tsx

@@ -7,7 +7,6 @@ import classNames from 'classnames';
 import { ContactName } from './ContactName';
 import type { Props as AvatarProps } from '../Avatar';
 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';
@@ -15,6 +14,15 @@ import type { EmojiData } from '../emoji/lib';
 import { emojiToData } from '../emoji/lib';
 import { useEscapeHandling } from '../../hooks/useEscapeHandling';
 import type { ThemeType } from '../../types/Util';
+import {
+  getEmojiParentByKey,
+  getEmojiParentKeyByVariantKey,
+  getEmojiVariantByKey,
+  getEmojiVariantKeyByValue,
+  isEmojiVariantValue,
+} from '../fun/data/emojis';
+import { strictAssert } from '../../util/assert';
+import { FunStaticEmoji } from '../fun/FunEmoji';
 
 export type Reaction = {
   emoji: string;
@@ -65,6 +73,30 @@ type ReactionCategory = {
 
 type ReactionWithEmojiData = Reaction & EmojiData;
 
+function ReactionViewerEmoji(props: {
+  emojiVariantValue: string | undefined;
+}): JSX.Element {
+  strictAssert(props.emojiVariantValue != null, 'Expected an emoji');
+  strictAssert(
+    isEmojiVariantValue(props.emojiVariantValue),
+    'Must be valid emoji variant value'
+  );
+  const emojiVariantKey = getEmojiVariantKeyByValue(props.emojiVariantValue);
+  const emojiVariant = getEmojiVariantByKey(emojiVariantKey);
+
+  const emojiParentKey = getEmojiParentKeyByVariantKey(emojiVariantKey);
+  const emojiParent = getEmojiParentByKey(emojiParentKey);
+
+  return (
+    <FunStaticEmoji
+      role="img"
+      aria-label={emojiParent.englishShortNameDefault}
+      size={18}
+      emoji={emojiVariant}
+    />
+  );
+}
+
 export const ReactionViewer = React.forwardRef<HTMLDivElement, Props>(
   function ReactionViewerInner(
     {
@@ -207,7 +239,7 @@ export const ReactionViewer = React.forwardRef<HTMLDivElement, Props>(
                   </span>
                 ) : (
                   <>
-                    <Emoji size={18} emoji={emoji} />
+                    <ReactionViewerEmoji emojiVariantValue={emoji} />
                     <span className="module-reaction-viewer__header__button__count">
                       {count}
                     </span>
@@ -251,7 +283,7 @@ export const ReactionViewer = React.forwardRef<HTMLDivElement, Props>(
                 )}
               </div>
               <div className="module-reaction-viewer__body__row__emoji">
-                <Emoji size={18} emoji={emoji} />
+                <ReactionViewerEmoji emojiVariantValue={emoji} />
               </div>
             </div>
           ))}