Add emoji reaction detail status

app/javascript/mastodon/components/account.jsx

@@ -39,6 +39,7 @@ class Account extends ImmutablePureComponent {
     actionTitle: PropTypes.string,
     defaultAction: PropTypes.string,
     onActionClick: PropTypes.func,
+    children: PropTypes.object,
   };
 
   static defaultProps = {
@@ -70,7 +71,7 @@ class Account extends ImmutablePureComponent {
   };
 
   render () {
-    const { account, intl, hidden, onActionClick, actionIcon, actionTitle, defaultAction, size } = this.props;
+    const { account, intl, hidden, onActionClick, actionIcon, actionTitle, defaultAction, size, children } = this.props;
 
     if (!account) {
       return (
@@ -146,6 +147,10 @@ class Account extends ImmutablePureComponent {
             <DisplayName account={account} />
           </Link>
 
+          <div>
+            {children}
+          </div>
+
           <div className='account__relationship'>
             {buttons}
           </div>

app/javascript/mastodon/components/emoji_view.jsx

@@ -0,0 +1,33 @@
+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';
+
+export default class EmojiView extends React.PureComponent {
+
+  static propTypes = {
+    name: PropTypes.string,
+    url: PropTypes.string,
+    staticUrl: PropTypes.string,
+  };
+
+  render () {
+    const { name, url, staticUrl } = this.props;
+
+    let emojiHtml = null;
+    if (url) {
+      let customEmojis = {};
+      customEmojis[`:${name}:`] = { url, static_url: staticUrl };
+      emojiHtml = emojify(`:${name}:`, customEmojis);
+    } else {
+      emojiHtml = emojify(name);
+    }
+
+    return (
+      <span className='emoji' dangerouslySetInnerHTML={{ __html: emojiHtml }} />
+    );
+  }
+
+}

app/javascript/mastodon/components/status_emoji_reactions_bar.jsx

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import { injectIntl } from 'react-intl';
 import emojify from '../features/emoji/emoji';
 import classNames from 'classnames';
+import EmojiView from './emoji_view';
 
 class EmojiReactionButton extends React.PureComponent {
 
@@ -32,15 +33,6 @@ class EmojiReactionButton extends React.PureComponent {
   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,
@@ -48,7 +40,9 @@ class EmojiReactionButton extends React.PureComponent {
 
     return (
       <button className={classNames(classList)} type='button' onClick={this.onClick}>
-        <span className='emoji' dangerouslySetInnerHTML={{ __html: emojiHtml }} />
+        <span className='emoji'>
+          <EmojiView name={name} url={url} staticUrl={staticUrl} />
+        </span>
         <span className='count'>{count}</span>
       </button>
     );