StatusActionButton: show selected emoji

app/soapbox/components/status-action-button.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import React from 'react';
 
-import { Text, Icon } from 'soapbox/components/ui';
+import { Text, Icon, Emoji } from 'soapbox/components/ui';
 import { shortNumberFormat } from 'soapbox/utils/numbers';
 
 const COLORS = {
@@ -15,7 +15,7 @@ interface IStatusActionCounter {
   count: number,
 }
 
-/** Action button numerical counter, eg "5" likes */
+/** Action button numerical counter, eg "5" likes. */
 const StatusActionCounter: React.FC<IStatusActionCounter> = ({ count = 0 }): JSX.Element => {
   return (
     <Text size='xs' weight='semibold' theme='inherit'>
@@ -31,10 +31,11 @@ interface IStatusActionButton extends React.ButtonHTMLAttributes<HTMLButtonEleme
   active?: boolean,
   color?: Color,
   filled?: boolean,
+  emoji?: string,
 }
 
-const StatusActionButton = React.forwardRef((props: IStatusActionButton, ref: React.ForwardedRef<HTMLButtonElement>): JSX.Element => {
-  const { icon, className, iconClassName, active, color, filled = false, count = 0, ...filteredProps } = props;
+const StatusActionButton = React.forwardRef<HTMLButtonElement, IStatusActionButton>((props, ref): JSX.Element => {
+  const { icon, className, iconClassName, active, color, filled = false, count = 0, emoji, ...filteredProps } = props;
 
   return (
     <button
@@ -53,6 +54,11 @@ const StatusActionButton = React.forwardRef((props: IStatusActionButton, ref: Re
       )}
       {...filteredProps}
     >
+      {emoji ? (
+        <span className='block w-6 h-6 flex items-center justify-center'>
+          <Emoji className='w-full h-full p-0.5' emoji={emoji} />
+        </span>
+      ) : (
         <Icon
           src={icon}
           className={classNames(
@@ -62,6 +68,7 @@ const StatusActionButton = React.forwardRef((props: IStatusActionButton, ref: Re
             iconClassName,
           )}
         />
+      )}
 
       {(count || null) && (
         <StatusActionCounter count={count} />

app/soapbox/components/status_action_bar.tsx

@@ -670,6 +670,7 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
               color='accent'
               active={Boolean(meEmojiReact)}
               count={emojiReactCount}
+              emoji={meEmojiReact}
             />
           </EmojiButtonWrapper>
         ) : (