diff --git a/app/javascript/mastodon/components/status.jsx b/app/javascript/mastodon/components/status.jsx
index 7236c9633d..6c32fd245d 100644
--- a/app/javascript/mastodon/components/status.jsx
+++ b/app/javascript/mastodon/components/status.jsx
@@ -12,7 +12,6 @@ import { HotKeys } from 'react-hotkeys';
import AlternateEmailIcon from '@/material-icons/400-24px/alternate_email.svg?react';
import PushPinIcon from '@/material-icons/400-24px/push_pin.svg?react';
import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react';
-import ReplyIcon from '@/material-icons/400-24px/reply.svg?react';
import { ContentWarning } from 'mastodon/components/content_warning';
import { FilterWarning } from 'mastodon/components/filter_warning';
import { Icon } from 'mastodon/components/icon';
@@ -34,6 +33,7 @@ import { getHashtagBarForStatus } from './hashtag_bar';
import { RelativeTimestamp } from './relative_timestamp';
import StatusActionBar from './status_action_bar';
import StatusContent from './status_content';
+import { StatusThreadLabel } from './status_thread_label';
import { VisibilityIcon } from './visibility_icon';
const domParser = new DOMParser();
@@ -413,7 +413,7 @@ class Status extends ImmutablePureComponent {
if (featured) {
prepend = (
<div className='status__prepend'>
- <div className='status__prepend-icon-wrapper'><Icon id='thumb-tack' icon={PushPinIcon} className='status__prepend-icon' /></div>
+ <div className='status__prepend__icon'><Icon id='thumb-tack' icon={PushPinIcon} /></div>
<FormattedMessage id='status.pinned' defaultMessage='Pinned post' />
</div>
);
@@ -422,7 +422,7 @@ class Status extends ImmutablePureComponent {
prepend = (
<div className='status__prepend'>
- <div className='status__prepend-icon-wrapper'><Icon id='retweet' icon={RepeatIcon} className='status__prepend-icon' /></div>
+ <div className='status__prepend__icon'><Icon id='retweet' icon={RepeatIcon} /></div>
<FormattedMessage id='status.reblogged_by' defaultMessage='{name} boosted' values={{ name: <a onClick={this.handlePrependAccountClick} data-id={status.getIn(['account', 'id'])} data-hover-card-account={status.getIn(['account', 'id'])} href={`/@${status.getIn(['account', 'acct'])}`} className='status__display-name muted'><bdi><strong dangerouslySetInnerHTML={display_name_html} /></bdi></a> }} />
</div>
);
@@ -434,18 +434,13 @@ class Status extends ImmutablePureComponent {
} else if (status.get('visibility') === 'direct') {
prepend = (
<div className='status__prepend'>
- <div className='status__prepend-icon-wrapper'><Icon id='at' icon={AlternateEmailIcon} className='status__prepend-icon' /></div>
+ <div className='status__prepend__icon'><Icon id='at' icon={AlternateEmailIcon} /></div>
<FormattedMessage id='status.direct_indicator' defaultMessage='Private mention' />
</div>
);
- } else if (showThread && status.get('in_reply_to_id') && status.get('in_reply_to_account_id') === status.getIn(['account', 'id'])) {
- const display_name_html = { __html: status.getIn(['account', 'display_name_html']) };
-
+ } else if (showThread && status.get('in_reply_to_id')) {
prepend = (
- <div className='status__prepend'>
- <div className='status__prepend-icon-wrapper'><Icon id='reply' icon={ReplyIcon} className='status__prepend-icon' /></div>
- <FormattedMessage id='status.replied_to' defaultMessage='Replied to {name}' values={{ name: <a onClick={this.handlePrependAccountClick} data-id={status.getIn(['account', 'id'])} data-hover-card-account={status.getIn(['account', 'id'])} href={`/@${status.getIn(['account', 'acct'])}`} className='status__display-name muted'><bdi><strong dangerouslySetInnerHTML={display_name_html} /></bdi></a> }} />
- </div>
+ <StatusThreadLabel accountId={status.getIn(['account', 'id'])} inReplyToAccountId={status.get('in_reply_to_account_id')} />
);
}
diff --git a/app/javascript/mastodon/components/status_thread_label.tsx b/app/javascript/mastodon/components/status_thread_label.tsx
new file mode 100644
index 0000000000..b18aca6dcb
--- /dev/null
+++ b/app/javascript/mastodon/components/status_thread_label.tsx
@@ -0,0 +1,50 @@
+import { FormattedMessage } from 'react-intl';
+
+import ReplyIcon from '@/material-icons/400-24px/reply.svg?react';
+import { Icon } from 'mastodon/components/icon';
+import { DisplayedName } from 'mastodon/features/notifications_v2/components/displayed_name';
+import { useAppSelector } from 'mastodon/store';
+
+export const StatusThreadLabel: React.FC<{
+ accountId: string;
+ inReplyToAccountId: string;
+}> = ({ accountId, inReplyToAccountId }) => {
+ const inReplyToAccount = useAppSelector((state) =>
+ state.accounts.get(inReplyToAccountId),
+ );
+
+ let label;
+
+ if (accountId === inReplyToAccountId) {
+ label = (
+ <FormattedMessage
+ id='status.continued_thread'
+ defaultMessage='Continued thread'
+ />
+ );
+ } else if (inReplyToAccount) {
+ label = (
+ <FormattedMessage
+ id='status.replied_to'
+ defaultMessage='Replied to {name}'
+ values={{ name: <DisplayedName accountIds={[inReplyToAccountId]} /> }}
+ />
+ );
+ } else {
+ label = (
+ <FormattedMessage
+ id='status.replied_in_thread'
+ defaultMessage='Replied in thread'
+ />
+ );
+ }
+
+ return (
+ <div className='status__prepend'>
+ <div className='status__prepend__icon'>
+ <Icon id='reply' icon={ReplyIcon} />
+ </div>
+ {label}
+ </div>
+ );
+};
diff --git a/app/javascript/mastodon/locales/en.json b/app/javascript/mastodon/locales/en.json
index 4321acef4b..7c1d7f126d 100644
--- a/app/javascript/mastodon/locales/en.json
+++ b/app/javascript/mastodon/locales/en.json
@@ -780,6 +780,7 @@
"status.bookmark": "Bookmark",
"status.cancel_reblog_private": "Unboost",
"status.cannot_reblog": "This post cannot be boosted",
+ "status.continued_thread": "Continued thread",
"status.copy": "Copy link to post",
"status.delete": "Delete",
"status.detailed_status": "Detailed conversation view",
@@ -813,6 +814,7 @@
"status.reblogs.empty": "No one has boosted this post yet. When someone does, they will show up here.",
"status.redraft": "Delete & re-draft",
"status.remove_bookmark": "Remove bookmark",
+ "status.replied_in_thread": "Replied in thread",
"status.replied_to": "Replied to {name}",
"status.reply": "Reply",
"status.replyAll": "Reply to thread",
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 0b7c9ac903..92d2034633 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -1607,15 +1607,29 @@ body > [data-popper-placement] {
.status__prepend {
padding: 16px;
padding-bottom: 0;
- display: inline-flex;
- gap: 10px;
+ display: flex;
+ align-items: center;
+ gap: 8px;
font-size: 15px;
line-height: 22px;
font-weight: 500;
color: $dark-text-color;
- .status__display-name strong {
- color: $dark-text-color;
+ &__icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex: 0 0 auto;
+
+ .icon {
+ width: 16px;
+ height: 16px;
+ }
+ }
+
+ a {
+ color: inherit;
+ text-decoration: none;
}
> span {