Add emoji reaction bar into status view

app/javascript/mastodon/actions/importer/normalizer.js

@@ -40,6 +40,10 @@ export function normalizeStatus(status, normalOldStatus) {
     normalStatus.filtered = status.filtered.map(normalizeFilterResult);
   }
 
+  if (status.emoji_reactions) {
+    normalStatus.emojiReactions = status.emoji_reactions;
+  }
+
   // Only calculate these values when status first encountered and
   // when the underlying values change. Otherwise keep the ones
   // already in the reducer

app/javascript/mastodon/components/status.jsx

@@ -1,5 +1,8 @@
 import PropTypes from 'prop-types';
 
+import StatusEmojiReactionsBar from './status_emoji_reactions_bar';
+import AttachmentList from './attachment_list';
+
 import { injectIntl, defineMessages, FormattedMessage } from 'react-intl';
 
 import classNames from 'classnames';
@@ -669,6 +672,12 @@ class Status extends ImmutablePureComponent {
     const {statusContentProps, hashtagBar} = getHashtagBarForStatus(status);
     const expanded = !status.get('hidden') || status.get('spoiler_text').length === 0;
 
+    let emojiReactionsBar = null;
+    if (status.get('emoji_reactions')) {
+      const emojiReactions = status.get('emoji_reactions');
+      emojiReactionsBar = <StatusEmojiReactionsBar emojiReactions={emojiReactions} statusId={status.get('id')} />;
+    }
+
     return (
       <HotKeys handlers={handlers}>
         <div className={classNames('status__wrapper', `status__wrapper-${status.get('visibility')}`, { 'status__wrapper-reply': !!status.get('in_reply_to_id'), unread, focusable: !this.props.muted })} tabIndex={this.props.muted ? null : 0} data-featured={featured ? 'true' : null} aria-label={textForScreenReader(intl, status, rebloggedByText)} ref={this.handleRef} data-nosnippet={status.getIn(['account', 'noindex'], true) || undefined}>
@@ -712,6 +721,8 @@ class Status extends ImmutablePureComponent {
             
             {expanded && hashtagBar}
 
+            {emojiReactionsBar}
+
             <StatusActionBar scrollKey={scrollKey} status={status} account={account} onFilter={matchedFilters ? this.handleFilterClick : null} {...other} />
           </div>
         </div>

app/javascript/mastodon/components/status_emoji_reactions_bar.jsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import PropTypes from 'prop-types';
+import { injectIntl } from 'react-intl';
+import emojify from '../features/emoji/emoji';
+import classNames from 'classnames';
+
+class EmojiReactionButton extends React.PureComponent {
+
+  static propTypes = {
+    name: ImmutablePropTypes.map,
+    url: PropTypes.string,
+    staticUrl: PropTypes.string,
+    count: PropTypes.number.isRequired,
+    me: PropTypes.bool,
+    onClick: PropTypes.func,
+  };
+
+  render () {
+    const { name, url, staticUrl, count, me } = this.props;
+
+    let emojiHtml = null;
+    if (url) {
+      let customEmojis = {};
+      customEmojis[name] = { url, static_url: staticUrl };
+      emojiHtml = emojify(`:${name}:`, customEmojis);
+    } else {
+      emojiHtml = emojify(name);
+    }
+
+    const classList = {
+      'emoji-reactions-bar__button': true,
+      'toggled': me,
+    };
+
+    return (
+      <button className={classNames(classList)} type='button'>
+        <span className='emoji' dangerouslySetInnerHTML={{ __html: emojiHtml }} />
+        <span className='count'>{count}</span>
+      </button>
+    );
+  }
+
+}
+
+class StatusEmojiReactionsBar extends React.PureComponent {
+
+  static propTypes = {
+    emojiReactions: ImmutablePropTypes.map.isRequired,
+    statusId: PropTypes.string,
+  };
+
+  render () {
+    const { emojiReactions, statusId } = this.props;
+
+    const emojiButtons = React.Children.map(emojiReactions, (emoji) => (
+      <EmojiReactionButton
+        key={emoji.get('id')}
+        name={emoji.get('name')}
+        count={emoji.get('count')}
+        me={emoji.get('me')}
+        url={emoji.get('url')}
+        staticUrl={emoji.get('static_url')}
+      />));
+
+    return (
+      <div className='status__emoji-reactions-bar'>
+        {emojiButtons}
+      </div>
+    );
+  }
+
+}
+export default injectIntl(StatusEmojiReactionsBar);

app/javascript/mastodon/features/status/components/detailed_status.jsx

@@ -6,6 +6,7 @@ import classNames from 'classnames';
 import { Link, withRouter } from 'react-router-dom';
 
 import ImmutablePropTypes from 'react-immutable-proptypes';
+import StatusEmojiReactionsBar from '../../../components/status_emoji_reactions_bar';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
 import { ReactComponent as AlternateEmailIcon } from '@material-symbols/svg-600/outlined/alternate_email.svg';
@@ -254,9 +255,14 @@ class DetailedStatus extends ImmutablePureComponent {
       } else if (status.get('spoiler_text').length === 0) {
         return <Card sensitive={status.get('sensitive')} onOpenMedia={this.props.onOpenMedia} card={status.get('card', null)} quote={quote} />;
       }
-
     }
     
+    let emojiReactionsBar = null;
+    if (status.get('emoji_reactions')) {
+      const emojiReactions = status.get('emoji_reactions');
+      emojiReactionsBar = <StatusEmojiReactionsBar emojiReactions={emojiReactions} statusId={status.get('id')} />;
+    }
+
     if (status.get('application')) {
       applicationLink = <> · <a className='detailed-status__application' href={status.getIn(['application', 'website'])} target='_blank' rel='noopener noreferrer'>{status.getIn(['application', 'name'])}</a></>;
     }
@@ -351,6 +357,8 @@ class DetailedStatus extends ImmutablePureComponent {
 
           {expanded && hashtagBar}
 
+          {emojiReactionsBar}
+
           <div className='detailed-status__meta'>
             <a className='detailed-status__datetime' href={`/@${status.getIn(['account', 'acct'])}/${status.get('id')}`} target='_blank' rel='noopener noreferrer'>
               <FormattedDate value={new Date(status.get('created_at'))} hour12={false} year='numeric' month='short' day='2-digit' hour='2-digit' minute='2-digit' />

app/javascript/styles/mastodon/components.scss

@@ -1417,6 +1417,38 @@ body > [data-popper-placement] {
     color: $highlight-text-color;
   }
 }
+.status__emoji-reactions-bar {
+  display: flex;
+  gap: 8px;
+  margin: 8px 0 2px 4px;
+
+  .emoji-reactions-bar__button {
+    background: lighten($ui-base-color, 16%);
+    border: 0;
+    cursor: pointer;
+    display: flex;
+    justify-items: center;
+    align-items: center;
+    height: 20px;
+
+    &.toggled {
+      background: darken($ui-primary-color, 16%);
+    }
+
+    .emoji {
+      display: block;
+      height: 16px;
+      img {
+        margin-top: 0;
+        margin-bottom: 0;
+      }
+    }
+    .count {
+      display: block;
+      margin: 0 2px;
+    }
+  }
+}
 
 .status__action-bar {
   display: flex;