Support explicit addressing

app/soapbox/features/compose/components/compose_form.js

@@ -7,6 +7,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { Link } from 'react-router-dom';
 import ReplyIndicatorContainer from '../containers/reply_indicator_container';
+import ReplyMentions from '../containers/reply_mentions_container';
 import AutosuggestTextarea from '../../../components/autosuggest_textarea';
 import AutosuggestInput from '../../../components/autosuggest_input';
 import PollButtonContainer from '../containers/poll_button_container';
@@ -308,7 +309,9 @@ export default class ComposeForm extends ImmutablePureComponent {
 
         <WarningContainer />
 
-        { !shouldCondense && <ReplyIndicatorContainer /> }
+        {!shouldCondense && <ReplyIndicatorContainer />}
+
+        {!shouldCondense && <ReplyMentions />}
 
         <div className={`spoiler-input ${this.props.spoiler ? 'spoiler-input--visible' : ''}`}>
           <AutosuggestInput

app/soapbox/features/compose/components/reply_mentions.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { FormattedMessage, injectIntl } from 'react-intl';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import PropTypes from 'prop-types';
+
+export default @injectIntl
+class ReplyMentions extends ImmutablePureComponent {
+
+  static propTypes = {
+    onOpenMentionsModal: PropTypes.func.isRequired,
+    explicitAddressing: PropTypes.bool,
+    to: ImmutablePropTypes.orderedSet,
+    isReply: PropTypes.bool,
+  };
+
+  handleClick = e => {
+    e.preventDefault();
+
+    this.props.onOpenMentionsModal();
+  }
+
+  render() {
+    const { explicitAddressing, to, isReply } = this.props;
+
+    if (!explicitAddressing || !isReply || !to || to.length === 0) {
+      return null;
+    }
+
+    return (
+      <a href='#' className='reply-mentions' onClick={this.handleClick}>
+        <FormattedMessage
+          id='reply_mentions.reply'
+          defaultMessage='Replying to {accounts}{more}'
+          values={{
+            accounts: to.slice(0, 2).map(acct => <><span className='reply-mentions__account'>@{acct.split('@')[0]}</span>{' '}</>),
+            more: to.size > 2 && <FormattedMessage id='reply_mentions.more' defaultMessage='and {count} more' values={{ count: to.size - 2 }} />,
+          }}
+        />
+      </a>
+    );
+  }
+
+}