From dd61fed777e9588cc6c46ded089a8857e4d41d6e Mon Sep 17 00:00:00 2001 From: ChaosExAnima Date: Wed, 30 Jul 2025 16:18:32 +0200 Subject: [PATCH] Replace display_name_html across the platform. --- app/javascript/mastodon/components/status.jsx | 20 +++++++++++++---- .../components/status_thread_label.tsx | 7 ++++-- .../components/follow_request_note.jsx | 3 ++- .../components/account_header.tsx | 4 ++-- .../components/familiar_followers.tsx | 21 +++--------------- .../components/moved_note.tsx | 10 +-------- .../annual_report/highlighted_post.tsx | 7 ++---- .../components/conversation.jsx | 14 ++++-------- .../explore/components/author_link.jsx | 3 ++- .../features/interaction_modal/index.tsx | 8 +++---- .../notifications/components/notification.jsx | 7 +++--- .../components/notification_request.jsx | 3 ++- .../components/displayed_name.tsx | 22 ------------------- .../notification_group_with_status.tsx | 9 +++++--- .../components/notification_with_status.tsx | 9 +++++--- .../styles/mastodon/components.scss | 21 +++++++++--------- 16 files changed, 69 insertions(+), 99 deletions(-) delete mode 100644 app/javascript/mastodon/features/notifications_v2/components/displayed_name.tsx diff --git a/app/javascript/mastodon/components/status.jsx b/app/javascript/mastodon/components/status.jsx index 171ae780ff9..d99d3ef8df1 100644 --- a/app/javascript/mastodon/components/status.jsx +++ b/app/javascript/mastodon/components/status.jsx @@ -405,12 +405,24 @@ class Status extends ImmutablePureComponent { const matchedFilters = status.get('matched_filters'); if (status.get('reblog', null) !== null && typeof status.get('reblog') === 'object') { - const display_name_html = { __html: status.getIn(['account', 'display_name_html']) }; + const name = ( + + + + ); prepend = ( -
-
- }} /> +
+ +
); diff --git a/app/javascript/mastodon/components/status_thread_label.tsx b/app/javascript/mastodon/components/status_thread_label.tsx index b18aca6dcbe..1a690de79a8 100644 --- a/app/javascript/mastodon/components/status_thread_label.tsx +++ b/app/javascript/mastodon/components/status_thread_label.tsx @@ -2,9 +2,10 @@ 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'; +import { LinkedDisplayName } from './display_name'; + export const StatusThreadLabel: React.FC<{ accountId: string; inReplyToAccountId: string; @@ -27,7 +28,9 @@ export const StatusThreadLabel: React.FC<{ }} + values={{ + name: , + }} /> ); } else { diff --git a/app/javascript/mastodon/features/account/components/follow_request_note.jsx b/app/javascript/mastodon/features/account/components/follow_request_note.jsx index d57fd030b2d..43eaa11e224 100644 --- a/app/javascript/mastodon/features/account/components/follow_request_note.jsx +++ b/app/javascript/mastodon/features/account/components/follow_request_note.jsx @@ -6,6 +6,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component'; import CheckIcon from '@/material-icons/400-24px/check.svg?react'; import CloseIcon from '@/material-icons/400-24px/close.svg?react'; import { Icon } from 'mastodon/components/icon'; +import { DisplayName } from '@/mastodon/components/display_name'; export default class FollowRequestNote extends ImmutablePureComponent { @@ -19,7 +20,7 @@ export default class FollowRequestNote extends ImmutablePureComponent { return (
- }} /> + }} />
diff --git a/app/javascript/mastodon/features/account_timeline/components/account_header.tsx b/app/javascript/mastodon/features/account_timeline/components/account_header.tsx index 0bae0395031..747649429a4 100644 --- a/app/javascript/mastodon/features/account_timeline/components/account_header.tsx +++ b/app/javascript/mastodon/features/account_timeline/components/account_header.tsx @@ -7,6 +7,7 @@ import { Helmet } from 'react-helmet'; import { NavLink } from 'react-router-dom'; import { AccountBio } from '@/mastodon/components/account_bio'; +import { DisplayName } from '@/mastodon/components/display_name'; import CheckIcon from '@/material-icons/400-24px/check.svg?react'; import LockIcon from '@/material-icons/400-24px/lock.svg?react'; import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react'; @@ -774,7 +775,6 @@ export const AccountHeader: React.FC<{ ); } - const displayNameHtml = { __html: account.display_name_html }; const fields = account.fields; const isLocal = !account.acct.includes('@'); const username = account.acct.split('@')[0]; @@ -863,7 +863,7 @@ export const AccountHeader: React.FC<{

- + @{username} diff --git a/app/javascript/mastodon/features/account_timeline/components/familiar_followers.tsx b/app/javascript/mastodon/features/account_timeline/components/familiar_followers.tsx index 41bd8ab4ba8..dd88fe34e98 100644 --- a/app/javascript/mastodon/features/account_timeline/components/familiar_followers.tsx +++ b/app/javascript/mastodon/features/account_timeline/components/familiar_followers.tsx @@ -1,33 +1,18 @@ import { FormattedMessage } from 'react-intl'; -import { Link } from 'react-router-dom'; - import { Avatar } from '@/mastodon/components/avatar'; import { AvatarGroup } from '@/mastodon/components/avatar_group'; +import { LinkedDisplayName } from '@/mastodon/components/display_name'; import type { Account } from '@/mastodon/models/account'; import { useFetchFamiliarFollowers } from '../hooks/familiar_followers'; -const AccountLink: React.FC<{ account?: Account }> = ({ account }) => { - if (!account) { - return null; - } - - return ( - - ); -}; - const FamiliarFollowersReadout: React.FC<{ familiarFollowers: Account[] }> = ({ familiarFollowers, }) => { const messageData = { - name1: , - name2: , + name1: , + name2: , othersCount: familiarFollowers.length - 2, }; diff --git a/app/javascript/mastodon/features/account_timeline/components/moved_note.tsx b/app/javascript/mastodon/features/account_timeline/components/moved_note.tsx index 51dbb93c8b6..e71c48e34df 100644 --- a/app/javascript/mastodon/features/account_timeline/components/moved_note.tsx +++ b/app/javascript/mastodon/features/account_timeline/components/moved_note.tsx @@ -20,15 +20,7 @@ export const MovedNote: React.FC<{ id='account.moved_to' defaultMessage='{name} has indicated that their new account is now:' values={{ - name: ( - - - - ), + name: , }} />

diff --git a/app/javascript/mastodon/features/annual_report/highlighted_post.tsx b/app/javascript/mastodon/features/annual_report/highlighted_post.tsx index 3a2a70713da..94c8ee43657 100644 --- a/app/javascript/mastodon/features/annual_report/highlighted_post.tsx +++ b/app/javascript/mastodon/features/annual_report/highlighted_post.tsx @@ -6,6 +6,7 @@ import { useCallback } from 'react'; import { FormattedMessage } from 'react-intl'; +import { DisplayName } from '@/mastodon/components/display_name'; import { toggleStatusSpoilers } from 'mastodon/actions/statuses'; import { DetailedStatus } from 'mastodon/features/status/components/detailed_status'; import { me } from 'mastodon/initial_state'; @@ -79,11 +80,7 @@ export const HighlightedPost: React.FC<{ id='annual_report.summary.highlighted_post.possessive' defaultMessage="{name}'s" values={{ - name: account && ( - - ), + name: , }} /> diff --git a/app/javascript/mastodon/features/direct_timeline/components/conversation.jsx b/app/javascript/mastodon/features/direct_timeline/components/conversation.jsx index ec3621f0c06..0f5bea891c7 100644 --- a/app/javascript/mastodon/features/direct_timeline/components/conversation.jsx +++ b/app/javascript/mastodon/features/direct_timeline/components/conversation.jsx @@ -4,7 +4,7 @@ import { useCallback } from 'react'; import { defineMessages, useIntl, FormattedMessage } from 'react-intl'; import classNames from 'classnames'; -import { Link, useHistory } from 'react-router-dom'; +import { useHistory } from 'react-router-dom'; import { createSelector } from '@reduxjs/toolkit'; import ImmutablePropTypes from 'react-immutable-proptypes'; @@ -25,6 +25,7 @@ import StatusContent from 'mastodon/components/status_content'; import { Dropdown } from 'mastodon/components/dropdown_menu'; import { autoPlayGif } from 'mastodon/initial_state'; import { makeGetStatus } from 'mastodon/selectors'; +import { LinkedDisplayName } from '@/mastodon/components/display_name'; const messages = defineMessages({ more: { id: 'status.more', defaultMessage: 'More' }, @@ -147,15 +148,8 @@ export const Conversation = ({ conversation, scrollKey, onMoveUp, onMoveDown }) menu.push({ text: intl.formatMessage(messages.delete), action: handleDelete }); - const names = accounts.map(a => ( - - - - - + const names = accounts.map(account => ( + )).reduce((prev, cur) => [prev, ', ', cur]); const handlers = { diff --git a/app/javascript/mastodon/features/explore/components/author_link.jsx b/app/javascript/mastodon/features/explore/components/author_link.jsx index 764ae753412..83b526c5b36 100644 --- a/app/javascript/mastodon/features/explore/components/author_link.jsx +++ b/app/javascript/mastodon/features/explore/components/author_link.jsx @@ -4,6 +4,7 @@ import { Link } from 'react-router-dom'; import { Avatar } from 'mastodon/components/avatar'; import { useAppSelector } from 'mastodon/store'; +import { DisplayName } from '@/mastodon/components/display_name'; export const AuthorLink = ({ accountId }) => { const account = useAppSelector(state => state.getIn(['accounts', accountId])); @@ -15,7 +16,7 @@ export const AuthorLink = ({ accountId }) => { return ( - + ); }; diff --git a/app/javascript/mastodon/features/interaction_modal/index.tsx b/app/javascript/mastodon/features/interaction_modal/index.tsx index 40d498d1ae1..6555918b95f 100644 --- a/app/javascript/mastodon/features/interaction_modal/index.tsx +++ b/app/javascript/mastodon/features/interaction_modal/index.tsx @@ -7,6 +7,7 @@ import classNames from 'classnames'; import { escapeRegExp } from 'lodash'; import { useDebouncedCallback } from 'use-debounce'; +import { DisplayName } from '@/mastodon/components/display_name'; import InsertChartIcon from '@/material-icons/400-24px/insert_chart.svg?react'; import PersonAddIcon from '@/material-icons/400-24px/person_add.svg?react'; import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react'; @@ -411,15 +412,14 @@ const InteractionModal: React.FC<{ type: 'reply' | 'reblog' | 'favourite' | 'follow' | 'vote'; }> = ({ accountId, url, type }) => { const dispatch = useAppDispatch(); - const displayNameHtml = useAppSelector( - (state) => state.accounts.get(accountId)?.display_name_html ?? '', - ); const signupUrl = useAppSelector( (state) => (state.server.getIn(['server', 'registrations', 'url'], null) || '/auth/sign_up') as string, ); - const name = ; + + const account = useAppSelector((state) => state.accounts.get(accountId)); + const name = ; const handleSignupClick = useCallback(() => { dispatch( diff --git a/app/javascript/mastodon/features/notifications/components/notification.jsx b/app/javascript/mastodon/features/notifications/components/notification.jsx index b38e5da1594..1bf5749f95d 100644 --- a/app/javascript/mastodon/features/notifications/components/notification.jsx +++ b/app/javascript/mastodon/features/notifications/components/notification.jsx @@ -29,6 +29,7 @@ import FollowRequestContainer from '../containers/follow_request_container'; import { ModerationWarning } from './moderation_warning'; import { RelationshipsSeveranceEvent } from './relationships_severance_event'; import Report from './report'; +import { LinkedDisplayName } from '@/mastodon/components/display_name'; const messages = defineMessages({ favourite: { id: 'notification.favourite', defaultMessage: '{name} favorited your post' }, @@ -434,8 +435,7 @@ class Notification extends ImmutablePureComponent { } const targetAccount = report.get('target_account'); - const targetDisplayNameHtml = { __html: targetAccount.get('display_name_html') }; - const targetLink = ; + const targetLink = return ( @@ -457,8 +457,7 @@ class Notification extends ImmutablePureComponent { render () { const { notification } = this.props; const account = notification.get('account'); - const displayNameHtml = { __html: account.get('display_name_html') }; - const link = ; + const link = ; switch(notification.get('type')) { case 'follow': diff --git a/app/javascript/mastodon/features/notifications/components/notification_request.jsx b/app/javascript/mastodon/features/notifications/components/notification_request.jsx index 381bb1153f4..ca5174f1cd2 100644 --- a/app/javascript/mastodon/features/notifications/components/notification_request.jsx +++ b/app/javascript/mastodon/features/notifications/components/notification_request.jsx @@ -20,6 +20,7 @@ import { IconButton } from 'mastodon/components/icon_button'; import { Dropdown } from 'mastodon/components/dropdown_menu'; import { makeGetAccount } from 'mastodon/selectors'; import { toCappedNumber } from 'mastodon/utils/numbers'; +import { DisplayName } from '@/mastodon/components/display_name'; const getAccount = makeGetAccount(); @@ -96,7 +97,7 @@ export const NotificationRequest = ({ id, accountId, notificationsCount, checked
- +
@{account?.get('acct')} diff --git a/app/javascript/mastodon/features/notifications_v2/components/displayed_name.tsx b/app/javascript/mastodon/features/notifications_v2/components/displayed_name.tsx deleted file mode 100644 index 82ecb93ee5f..00000000000 --- a/app/javascript/mastodon/features/notifications_v2/components/displayed_name.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { Link } from 'react-router-dom'; - -import { useAppSelector } from 'mastodon/store'; - -export const DisplayedName: React.FC<{ - accountIds: string[]; -}> = ({ accountIds }) => { - const lastAccountId = accountIds[0] ?? '0'; - const account = useAppSelector((state) => state.accounts.get(lastAccountId)); - - if (!account) return null; - - return ( - - - - ); -}; diff --git a/app/javascript/mastodon/features/notifications_v2/components/notification_group_with_status.tsx b/app/javascript/mastodon/features/notifications_v2/components/notification_group_with_status.tsx index 4be1eefcddc..3fc9e961b73 100644 --- a/app/javascript/mastodon/features/notifications_v2/components/notification_group_with_status.tsx +++ b/app/javascript/mastodon/features/notifications_v2/components/notification_group_with_status.tsx @@ -3,6 +3,7 @@ import type { JSX } from 'react'; import classNames from 'classnames'; +import { LinkedDisplayName } from '@/mastodon/components/display_name'; import { replyComposeById } from 'mastodon/actions/compose'; import { navigateToStatus } from 'mastodon/actions/statuses'; import { Avatar } from 'mastodon/components/avatar'; @@ -14,7 +15,6 @@ import { RelativeTimestamp } from 'mastodon/components/relative_timestamp'; import { NOTIFICATIONS_GROUP_MAX_AVATARS } from 'mastodon/models/notification_group'; import { useAppSelector, useAppDispatch } from 'mastodon/store'; -import { DisplayedName } from './displayed_name'; import { EmbeddedStatus } from './embedded_status'; const AVATAR_SIZE = 28; @@ -62,14 +62,17 @@ export const NotificationGroupWithStatus: React.FC<{ }) => { const dispatch = useAppDispatch(); + const account = useAppSelector((state) => + state.accounts.get(accountIds.at(0) ?? ''), + ); const label = useMemo( () => labelRenderer( - , + , count, labelSeeMoreHref, ), - [labelRenderer, accountIds, count, labelSeeMoreHref], + [labelRenderer, count, labelSeeMoreHref, account], ); const isPrivateMention = useAppSelector( diff --git a/app/javascript/mastodon/features/notifications_v2/components/notification_with_status.tsx b/app/javascript/mastodon/features/notifications_v2/components/notification_with_status.tsx index 96a4a4d65df..f2b8a94d812 100644 --- a/app/javascript/mastodon/features/notifications_v2/components/notification_with_status.tsx +++ b/app/javascript/mastodon/features/notifications_v2/components/notification_with_status.tsx @@ -2,6 +2,7 @@ import { useMemo } from 'react'; import classNames from 'classnames'; +import { LinkedDisplayName } from '@/mastodon/components/display_name'; import { replyComposeById } from 'mastodon/actions/compose'; import { toggleReblog, toggleFavourite } from 'mastodon/actions/interactions'; import { @@ -15,7 +16,6 @@ import { StatusQuoteManager } from 'mastodon/components/status_quoted'; import { getStatusHidden } from 'mastodon/selectors/filters'; import { useAppSelector, useAppDispatch } from 'mastodon/store'; -import { DisplayedName } from './displayed_name'; import type { LabelRenderer } from './notification_group_with_status'; export const NotificationWithStatus: React.FC<{ @@ -39,9 +39,12 @@ export const NotificationWithStatus: React.FC<{ }) => { const dispatch = useAppDispatch(); + const account = useAppSelector((state) => + state.accounts.get(accountIds.at(0) ?? ''), + ); const label = useMemo( - () => labelRenderer(, count), - [labelRenderer, accountIds, count], + () => labelRenderer(, count), + [labelRenderer, count, account], ); const isPrivateMention = useAppSelector( diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 2642dff0391..bd92e8cd3e1 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -1655,21 +1655,22 @@ body > [data-popper-placement] { font-weight: 500; color: $dark-text-color; + a { + text-decoration: none; + color: inherit; + + &:hover { + text-decoration: underline; + } + } + &__icon { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; - - .icon { - width: 16px; - height: 16px; - } - } - - a { - color: inherit; - text-decoration: none; + width: 16px; + height: 16px; } > span {