diff --git a/app/javascript/flavours/glitch/components/status_prepend.jsx b/app/javascript/flavours/glitch/components/status_prepend.jsx index 4756b36696..b83767a990 100644 --- a/app/javascript/flavours/glitch/components/status_prepend.jsx +++ b/app/javascript/flavours/glitch/components/status_prepend.jsx @@ -150,11 +150,13 @@ export default class StatusPrepend extends PureComponent { return !type ? null : ( diff --git a/app/javascript/flavours/glitch/components/status_thread_label.tsx b/app/javascript/flavours/glitch/components/status_thread_label.tsx new file mode 100644 index 0000000000..054156efaa --- /dev/null +++ b/app/javascript/flavours/glitch/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 'flavours/glitch/components/icon'; +import { DisplayedName } from 'flavours/glitch/features/notifications_v2/components/displayed_name'; +import { useAppSelector } from 'flavours/glitch/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 = ( + + ); + } else if (inReplyToAccount) { + label = ( + }} + /> + ); + } else { + label = ( + + ); + } + + return ( +
+
+ +
+ {label} +
+ ); +}; diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss index 4ae330d0a5..51d87dbddf 100644 --- a/app/javascript/flavours/glitch/styles/components.scss +++ b/app/javascript/flavours/glitch/styles/components.scss @@ -1776,15 +1776,29 @@ body > [data-popper-placement] { .status__prepend { padding: 8px 14px; // glitch: reduced padding padding-bottom: 0; - display: inline-flex; - gap: 10px; + display: flex; + align-items: center; + gap: 8px; font-size: 14px; 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 {