Display "Replying to {acct}" instead of "Show thread"

app/soapbox/components/status.js

@@ -193,6 +193,12 @@ class Status extends ImmutablePureComponent {
     this.props.onToggleHidden(this._properStatus());
   };
 
+  handleReplyToClick = ({ target }) => {
+    if (target.className === 'status__meta') {
+      this.handleClick();
+    }
+  }
+
   renderLoadingMediaGallery() {
     return <div className='media_gallery' style={{ height: '285px' }} />;
   }
@@ -290,6 +296,29 @@ class Status extends ImmutablePureComponent {
     this.node = c;
   }
 
+  getInReplyToMessage = () => {
+    const { status } = this.props;
+    const inReplyToId = status.get('in_reply_to_id');
+    const inReplyToAcct = status.getIn(['pleroma', 'in_reply_to_account_acct']);
+
+    if (inReplyToAcct) {
+      return (
+        <FormattedMessage
+          id='status.replying_to'
+          defaultMessage='Replying to {accts}'
+          values={{ accts: <NavLink to={`/@${inReplyToAcct}`}>{`@${inReplyToAcct.split('@')[0]}`}</NavLink> }}
+        />
+      );
+    }
+
+    // Fallback for Mastodon
+    if (inReplyToId) {
+      return <FormattedMessage id='status.replying_to_post' defaultMessage='Replying to a post' />;
+    }
+
+    return null;
+  }
+
   render() {
     let media = null;
     const poll = null;
@@ -467,6 +496,7 @@ class Status extends ImmutablePureComponent {
     const statusUrl = `/@${status.getIn(['account', 'acct'])}/posts/${status.get('id')}`;
     const favicon = status.getIn(['account', 'pleroma', 'favicon']);
     const domain = getDomain(status.get('account'));
+    const inReplyToMessage = this.getInReplyToMessage();
 
     return (
       <HotKeys handlers={handlers}>
@@ -507,6 +537,12 @@ class Status extends ImmutablePureComponent {
               </div>
             )}
 
+            {(showThread && inReplyToMessage) && (
+              <button className='status__meta' onClick={this.handleReplyToClick}>
+                {inReplyToMessage}
+              </button>
+            )}
+
             <StatusContent
               status={status}
               reblogContent={reblogContent}
@@ -519,12 +555,6 @@ class Status extends ImmutablePureComponent {
             {media}
             {poll}
 
-            {showThread && status.get('in_reply_to_id') && status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) && (
-              <button className='status__content__read-more-button' onClick={this.handleClick}>
-                <FormattedMessage id='status.show_thread' defaultMessage='Show thread' />
-              </button>
-            )}
-
             <StatusActionBar
               status={status}
               account={account}

app/styles/components/status.scss

@@ -95,22 +95,6 @@
   max-height: 20px * 15; // 15 lines is roughly above 500 characters
 }
 
-.status__content__read-more-button {
-  display: block;
-  font-size: 15px;
-  line-height: 20px;
-  color: var(--highlight-text-color);
-  border: 0;
-  background: transparent;
-  padding: 0;
-  padding-top: 8px;
-
-  &:hover,
-  &:active {
-    text-decoration: underline;
-  }
-}
-
 .status__content__spoiler-link {
   display: inline-block;
   border-radius: 2px;
@@ -220,6 +204,10 @@
   &__meta {
     font-size: 14px;
     color: var(--primary-text-color--faint);
+    display: block;
+    border: 0;
+    padding: 0;
+    background: transparent;
 
     a {
       color: var(--brand-color);