[Glitch] Refactor: Replace all display name usage for new component

Port dfef7d9407 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/components/display_name.tsx

@@ -1,122 +0,0 @@
-import React from 'react';
-
-import type { List } from 'immutable';
-
-import type { Account } from 'flavours/glitch/models/account';
-
-import { autoPlayGif } from '../initial_state';
-
-import { Skeleton } from './skeleton';
-
-interface Props {
-  account?: Account;
-  others?: List<Account>;
-  localDomain?: string;
-}
-
-export class DisplayName extends React.PureComponent<Props> {
-  handleMouseEnter: React.ReactEventHandler<HTMLSpanElement> = ({
-    currentTarget,
-  }) => {
-    if (autoPlayGif) {
-      return;
-    }
-
-    const emojis =
-      currentTarget.querySelectorAll<HTMLImageElement>('img.custom-emoji');
-
-    emojis.forEach((emoji) => {
-      const originalSrc = emoji.getAttribute('data-original');
-      if (originalSrc != null) emoji.src = originalSrc;
-    });
-  };
-
-  handleMouseLeave: React.ReactEventHandler<HTMLSpanElement> = ({
-    currentTarget,
-  }) => {
-    if (autoPlayGif) {
-      return;
-    }
-
-    const emojis =
-      currentTarget.querySelectorAll<HTMLImageElement>('img.custom-emoji');
-
-    emojis.forEach((emoji) => {
-      const staticSrc = emoji.getAttribute('data-static');
-      if (staticSrc != null) emoji.src = staticSrc;
-    });
-  };
-
-  render() {
-    const { others, localDomain } = this.props;
-
-    let displayName: React.ReactNode,
-      suffix: React.ReactNode,
-      account: Account | undefined;
-
-    if (others && others.size > 0) {
-      account = others.first();
-    } else if (this.props.account) {
-      account = this.props.account;
-    }
-
-    if (others && others.size > 1) {
-      displayName = others
-        .take(2)
-        .map((a) => (
-          <bdi key={a.get('id')}>
-            <strong
-              className='display-name__html'
-              dangerouslySetInnerHTML={{ __html: a.get('display_name_html') }}
-            />
-          </bdi>
-        ))
-        .reduce((prev, cur) => [prev, ', ', cur]);
-
-      if (others.size - 2 > 0) {
-        suffix = `+${others.size - 2}`;
-      }
-    } else if (account) {
-      let acct = account.get('acct');
-
-      if (!acct.includes('@') && localDomain) {
-        acct = `${acct}@${localDomain}`;
-      }
-
-      displayName = (
-        <bdi>
-          <strong
-            className='display-name__html'
-            dangerouslySetInnerHTML={{
-              __html: account.get('display_name_html'),
-            }}
-          />
-        </bdi>
-      );
-      suffix = <span className='display-name__account'>@{acct}</span>;
-    } else {
-      displayName = (
-        <bdi>
-          <strong className='display-name__html'>
-            <Skeleton width='10ch' />
-          </strong>
-        </bdi>
-      );
-      suffix = (
-        <span className='display-name__account'>
-          <Skeleton width='7ch' />
-        </span>
-      );
-    }
-
-    return (
-      <span
-        className='display-name'
-        onMouseEnter={this.handleMouseEnter}
-        onMouseLeave={this.handleMouseLeave}
-      >
-        {displayName} {suffix}
-      </span>
-    );
-  }
-}

app/javascript/flavours/glitch/components/display_name/default.tsx

@@ -0,0 +1,36 @@
+import { useMemo } from 'react';
+import type { ComponentPropsWithoutRef, FC } from 'react';
+
+import { Skeleton } from '../skeleton';
+
+import type { DisplayNameProps } from './index';
+import { DisplayNameWithoutDomain } from './no-domain';
+
+export const DisplayNameDefault: FC<
+  Omit<DisplayNameProps, 'variant'> & ComponentPropsWithoutRef<'span'>
+> = ({ account, localDomain, className, ...props }) => {
+  const username = useMemo(() => {
+    if (!account) {
+      return null;
+    }
+    let acct = account.get('acct');
+
+    if (!acct.includes('@') && localDomain) {
+      acct = `${acct}@${localDomain}`;
+    }
+    return `@${acct}`;
+  }, [account, localDomain]);
+
+  return (
+    <DisplayNameWithoutDomain
+      account={account}
+      className={className}
+      {...props}
+    >
+      {' '}
+      <span className='display-name__account'>
+        {username ?? <Skeleton width='7ch' />}
+      </span>
+    </DisplayNameWithoutDomain>
+  );
+};

app/javascript/flavours/glitch/components/display_name/index.tsx

@@ -1,122 +1,52 @@
 import type { ComponentPropsWithoutRef, FC } from 'react';
-import { useMemo } from 'react';
 
-import classNames from 'classnames';
 import type { LinkProps } from 'react-router-dom';
-import { Link } from 'react-router-dom';
 
-import { EmojiHTML } from '@/flavours/glitch/features/emoji/emoji_html';
 import type { Account } from '@/flavours/glitch/models/account';
-import { isModernEmojiEnabled } from '@/flavours/glitch/utils/environment';
+import { Permalink } from 'flavours/glitch/components/permalink';
 
-import { Skeleton } from '../skeleton';
+import { DisplayNameDefault } from './default';
+import { DisplayNameWithoutDomain } from './no-domain';
+import { DisplayNameSimple } from './simple';
 
-interface Props {
+export interface DisplayNameProps {
   account?: Account;
   localDomain?: string;
-  simple?: boolean;
-  noDomain?: boolean;
+  variant?: 'default' | 'simple' | 'noDomain';
 }
 
-export const DisplayName: FC<Props & ComponentPropsWithoutRef<'span'>> = ({
-  account,
-  localDomain,
-  simple = false,
-  noDomain = false,
-  className,
-  ...props
-}) => {
-  const username = useMemo(() => {
-    if (!account || noDomain) {
-      return null;
+export const DisplayName: FC<
+  DisplayNameProps & ComponentPropsWithoutRef<'span'>
+> = ({ variant = 'default', ...props }) => {
+  if (variant === 'simple') {
+    return <DisplayNameSimple {...props} />;
+  } else if (variant === 'noDomain') {
+    return <DisplayNameWithoutDomain {...props} />;
   }
-    let acct = account.get('acct');
-
-    if (!acct.includes('@') && localDomain) {
-      acct = `${acct}@${localDomain}`;
-    }
-    return `@${acct}`;
-  }, [account, localDomain, noDomain]);
-
-  if (!account) {
-    if (simple) {
-      return null;
-    }
-    return (
-      <span {...props} className={classNames('display-name', className)}>
-        <bdi>
-          <strong className='display-name__html'>
-            <Skeleton width='10ch' />
-          </strong>
-        </bdi>
-        {!noDomain && (
-          <span className='display-name__account'>
-            &nbsp;
-            <Skeleton width='7ch' />
-          </span>
-        )}
-      </span>
-    );
-  }
-  const accountName = isModernEmojiEnabled()
-    ? account.get('display_name')
-    : account.get('display_name_html');
-  if (simple) {
-    return (
-      <bdi>
-        <EmojiHTML {...props} htmlString={accountName} shallow as='span' />
-      </bdi>
-    );
-  }
-
-  return (
-    <span {...props} className={classNames('display-name', className)}>
-      <bdi>
-        <EmojiHTML
-          className='display-name__html'
-          htmlString={accountName}
-          shallow
-          as='strong'
-        />
-      </bdi>
-      {username && (
-        <span className='display-name__account'>&nbsp;{username}</span>
-      )}
-    </span>
-  );
+  return <DisplayNameDefault {...props} />;
 };
 
 export const LinkedDisplayName: FC<
-  Props & { asProps?: ComponentPropsWithoutRef<'span'> } & Partial<LinkProps>
-> = ({
-  account,
-  asProps = {},
-  className,
-  localDomain,
-  simple,
-  noDomain,
-  ...linkProps
-}) => {
-  const displayProps = {
-    account,
-    className,
-    localDomain,
-    simple,
-    noDomain,
-    ...asProps,
-  };
+  Omit<LinkProps, 'to'> & {
+    displayProps: DisplayNameProps & ComponentPropsWithoutRef<'span'>;
+  }
+> = ({ displayProps, children, ...linkProps }) => {
+  const { account } = displayProps;
   if (!account) {
     return <DisplayName {...displayProps} />;
   }
 
   return (
-    <Link
+    <Permalink
+      href={account.url}
       to={`/@${account.acct}`}
       title={`@${account.acct}`}
+      data-id={account.id}
       data-hover-card-account={account.id}
       {...linkProps}
     >
+      {children}
       <DisplayName {...displayProps} />
-    </Link>
+    </Permalink>
   );
 };

app/javascript/flavours/glitch/components/display_name/no-domain.tsx

@@ -0,0 +1,39 @@
+import type { ComponentPropsWithoutRef, FC } from 'react';
+
+import classNames from 'classnames';
+
+import { EmojiHTML } from '@/flavours/glitch/features/emoji/emoji_html';
+import { isModernEmojiEnabled } from '@/flavours/glitch/utils/environment';
+
+import { Skeleton } from '../skeleton';
+
+import type { DisplayNameProps } from './index';
+
+export const DisplayNameWithoutDomain: FC<
+  Omit<DisplayNameProps, 'variant' | 'localDomain'> &
+    ComponentPropsWithoutRef<'span'>
+> = ({ account, className, children, ...props }) => {
+  return (
+    <span {...props} className={classNames('display-name', className)}>
+      <bdi>
+        {account ? (
+          <EmojiHTML
+            className='display-name__html'
+            htmlString={
+              isModernEmojiEnabled()
+                ? account.get('display_name')
+                : account.get('display_name_html')
+            }
+            shallow
+            as='strong'
+          />
+        ) : (
+          <strong className='display-name__html'>
+            <Skeleton width='10ch' />
+          </strong>
+        )}
+      </bdi>
+      {children}
+    </span>
+  );
+};

app/javascript/flavours/glitch/components/display_name/simple.tsx

@@ -0,0 +1,23 @@
+import type { ComponentPropsWithoutRef, FC } from 'react';
+
+import { EmojiHTML } from '@/flavours/glitch/features/emoji/emoji_html';
+import { isModernEmojiEnabled } from '@/flavours/glitch/utils/environment';
+
+import type { DisplayNameProps } from './index';
+
+export const DisplayNameSimple: FC<
+  Omit<DisplayNameProps, 'variant' | 'localDomain'> &
+    ComponentPropsWithoutRef<'span'>
+> = ({ account, ...props }) => {
+  if (!account) {
+    return null;
+  }
+  const accountName = isModernEmojiEnabled()
+    ? account.get('display_name')
+    : account.get('display_name_html');
+  return (
+    <bdi>
+      <EmojiHTML {...props} htmlString={accountName} shallow as='span' />
+    </bdi>
+  );
+};

app/javascript/flavours/glitch/components/status.jsx

@@ -25,10 +25,9 @@ import { displayMedia } from '../initial_state';
 import AttachmentList from './attachment_list';
 import { Avatar } from './avatar';
 import { AvatarOverlay } from './avatar_overlay';
-import { DisplayName } from './display_name';
+import { LinkedDisplayName } from './display_name';
 import { getHashtagBarForStatus } from './hashtag_bar';
 import { MentionsPlaceholder } from './mentions_placeholder';
-import { Permalink } from './permalink';
 import StatusActionBar from './status_action_bar';
 import StatusContent from './status_content';
 import StatusIcons from './status_icons';
@@ -713,14 +712,11 @@ class Status extends ImmutablePureComponent {
 
             {(!muted) && (
               <header onClick={this.handleHeaderClick} onAuxClick={this.handleHeaderClick} className='status__info'>
-                <Permalink href={status.getIn(['account', 'url'])} to={`/@${status.getIn(['account', 'acct'])}`} title={status.getIn(['account', 'acct'])} data-hover-card-account={status.getIn(['account', 'id'])} className='status__display-name'>
+                <LinkedDisplayName displayProps={{account: status.get('account')}} className='status__display-name'>
                   <div className='status__avatar'>
                     {statusAvatar}
                   </div>
-
-                  <DisplayName account={status.get('account')} />
-                </Permalink>
-
+                </LinkedDisplayName>
 
                 {isQuotedPost && !!this.props.onQuoteCancel ? (
                   <IconButton

app/javascript/flavours/glitch/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 'flavours/glitch/components/icon';
-import { DisplayedName } from 'flavours/glitch/features/notifications_v2/components/displayed_name';
 import { useAppSelector } from 'flavours/glitch/store';
 
+import { LinkedDisplayName } from './display_name';
+
 export const StatusThreadLabel: React.FC<{
   accountId: string;
   inReplyToAccountId: string;
@@ -27,7 +28,13 @@ export const StatusThreadLabel: React.FC<{
       <FormattedMessage
         id='status.replied_to'
         defaultMessage='Replied to {name}'
-        values={{ name: <DisplayedName accountIds={[inReplyToAccountId]} /> }}
+        values={{
+          name: (
+            <LinkedDisplayName
+              displayProps={{ account: inReplyToAccount, variant: 'simple' }}
+            />
+          ),
+        }}
       />
     );
   } else {

app/javascript/flavours/glitch/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 'flavours/glitch/components/icon';
+import { DisplayName } from '@/flavours/glitch/components/display_name';
 
 export default class FollowRequestNote extends ImmutablePureComponent {
 
@@ -19,7 +20,7 @@ export default class FollowRequestNote extends ImmutablePureComponent {
     return (
       <div className='follow-request-banner'>
         <div className='follow-request-banner__message'>
-          <FormattedMessage id='account.requested_follow' defaultMessage='{name} has requested to follow you' values={{ name: <bdi><strong dangerouslySetInnerHTML={{ __html: account.get('display_name_html') }} /></bdi> }} />
+          <FormattedMessage id='account.requested_follow' defaultMessage='{name} has requested to follow you' values={{ name: <DisplayName account={account} variant='simple' /> }} />
         </div>
 
         <div className='follow-request-banner__action'>

app/javascript/flavours/glitch/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 '@/flavours/glitch/components/account_bio';
+import { DisplayName } from '@/flavours/glitch/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';
@@ -778,7 +779,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];
@@ -867,7 +867,7 @@ export const AccountHeader: React.FC<{
 
           <div className='account__header__tabs__name'>
             <h1>
-              <span dangerouslySetInnerHTML={displayNameHtml} />
+              <DisplayName account={account} variant='simple' />
               <small>
                 <span>
                   @{username}

app/javascript/flavours/glitch/features/account_timeline/components/familiar_followers.tsx

@@ -1,33 +1,26 @@
 import { FormattedMessage } from 'react-intl';
 
-import { Link } from 'react-router-dom';
-
 import { Avatar } from '@/flavours/glitch/components/avatar';
 import { AvatarGroup } from '@/flavours/glitch/components/avatar_group';
+import { LinkedDisplayName } from '@/flavours/glitch/components/display_name';
 import type { Account } from '@/flavours/glitch/models/account';
 
 import { useFetchFamiliarFollowers } from '../hooks/familiar_followers';
 
-const AccountLink: React.FC<{ account?: Account }> = ({ account }) => {
-  if (!account) {
-    return null;
-  }
-
-  return (
-    <Link
-      to={`/@${account.acct}`}
-      data-hover-card-account={account.id}
-      dangerouslySetInnerHTML={{ __html: account.display_name_html }}
-    />
-  );
-};
-
 const FamiliarFollowersReadout: React.FC<{ familiarFollowers: Account[] }> = ({
   familiarFollowers,
 }) => {
   const messageData = {
-    name1: <AccountLink account={familiarFollowers.at(0)} />,
-    name2: <AccountLink account={familiarFollowers.at(1)} />,
+    name1: (
+      <LinkedDisplayName
+        displayProps={{ account: familiarFollowers.at(0), variant: 'simple' }}
+      />
+    ),
+    name2: (
+      <LinkedDisplayName
+        displayProps={{ account: familiarFollowers.at(1), variant: 'simple' }}
+      />
+    ),
     othersCount: familiarFollowers.length - 2,
   };
 

app/javascript/flavours/glitch/features/account_timeline/components/moved_note.tsx

@@ -1,7 +1,7 @@
 import { FormattedMessage } from 'react-intl';
 
+import { DisplayName } from '@/flavours/glitch/components/display_name';
 import { AvatarOverlay } from 'flavours/glitch/components/avatar_overlay';
-import { DisplayName } from 'flavours/glitch/components/display_name';
 import { Permalink } from 'flavours/glitch/components/permalink';
 import { useAppSelector } from 'flavours/glitch/store';
 
@@ -19,15 +19,7 @@ export const MovedNote: React.FC<{
           id='account.moved_to'
           defaultMessage='{name} has indicated that their new account is now:'
           values={{
-            name: (
-              <bdi>
-                <strong
-                  dangerouslySetInnerHTML={{
-                    __html: from?.display_name_html ?? '',
-                  }}
-                />
-              </bdi>
-            ),
+            name: <DisplayName account={from} variant='simple' />,
           }}
         />
       </div>

app/javascript/flavours/glitch/features/annual_report/highlighted_post.tsx

@@ -6,6 +6,7 @@ import { useCallback } from 'react';
 
 import { FormattedMessage } from 'react-intl';
 
+import { DisplayName } from '@/flavours/glitch/components/display_name';
 import { toggleStatusSpoilers } from 'flavours/glitch/actions/statuses';
 import { DetailedStatus } from 'flavours/glitch/features/status/components/detailed_status';
 import { me } from 'flavours/glitch/initial_state';
@@ -82,11 +83,7 @@ export const HighlightedPost: React.FC<{
           id='annual_report.summary.highlighted_post.possessive'
           defaultMessage="{name}'s"
           values={{
-            name: account && (
-              <bdi
-                dangerouslySetInnerHTML={{ __html: account.display_name_html }}
-              />
-            ),
+            name: <DisplayName account={account} variant='simple' />,
           }}
         />
       </strong>

app/javascript/flavours/glitch/features/direct_timeline/components/conversation.jsx

@@ -20,12 +20,12 @@ import { Hotkeys } from 'flavours/glitch/components/hotkeys';
 import AttachmentList from 'flavours/glitch/components/attachment_list';
 import AvatarComposite from 'flavours/glitch/components/avatar_composite';
 import { IconButton } from 'flavours/glitch/components/icon_button';
-import { Permalink } from 'flavours/glitch/components/permalink';
 import { RelativeTimestamp } from 'flavours/glitch/components/relative_timestamp';
 import StatusContent from 'flavours/glitch/components/status_content';
 import { Dropdown } from 'flavours/glitch/components/dropdown_menu';
 import { autoPlayGif } from 'flavours/glitch/initial_state';
 import { makeGetStatus } from 'flavours/glitch/selectors';
+import { LinkedDisplayName } from '@/flavours/glitch/components/display_name';
 
 const messages = defineMessages({
   more: { id: 'status.more', defaultMessage: 'More' },
@@ -149,14 +149,7 @@ export const Conversation = ({ conversation, scrollKey }) => {
   menu.push({ text: intl.formatMessage(messages.delete), action: handleDelete });
 
   const names = accounts.map(a => (
-    <Permalink to={`/@${a.get('acct')}`} href={a.get('url')} key={a.get('id')} data-hover-card-account={a.get('id')}>
-      <bdi>
-        <strong
-          className='display-name__html'
-          dangerouslySetInnerHTML={{ __html: a.get('display_name_html') }}
-        />
-      </bdi>
-    </Permalink>
+    <LinkedDisplayName displayProps={{account, variant: 'simple'}} key={account.get('id')} />
   )).reduce((prev, cur) => [prev, ', ', cur]);
 
   const handlers = {

app/javascript/flavours/glitch/features/explore/components/author_link.jsx

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 
 import { Avatar } from 'flavours/glitch/components/avatar';
-import { Permalink } from 'flavours/glitch/components/permalink';
 import { useAppSelector } from 'flavours/glitch/store';
+import { LinkedDisplayName } from '../../../components/display_name';
 
 export const AuthorLink = ({ accountId }) => {
   const account = useAppSelector(state => state.getIn(['accounts', accountId]));
@@ -12,10 +12,9 @@ export const AuthorLink = ({ accountId }) => {
   }
 
   return (
-    <Permalink href={account.get('url')} to={`/@${account.get('acct')}`} className='story__details__shared__author-link' data-hover-card-account={accountId}>
+    <LinkedDisplayName displayProps={{account}} className='story__details__shared__author-link'>
       <Avatar account={account} size={16} />
-      <bdi dangerouslySetInnerHTML={{ __html: account.get('display_name_html') }} />
-    </Permalink>
+    </LinkedDisplayName>
   );
 };
 

app/javascript/flavours/glitch/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 '@/flavours/glitch/components/display_name';
 import { openModal, closeModal } from 'flavours/glitch/actions/modal';
 import { apiRequest } from 'flavours/glitch/api';
 import { Button } from 'flavours/glitch/components/button';
@@ -404,15 +405,13 @@ const InteractionModal: React.FC<{
   url: string;
 }> = ({ accountId, url }) => {
   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 = <bdi dangerouslySetInnerHTML={{ __html: displayNameHtml }} />;
+  const account = useAppSelector((state) => state.accounts.get(accountId));
+  const name = <DisplayName account={account} variant='simple' />;
 
   const handleSignupClick = useCallback(() => {
     dispatch(

app/javascript/flavours/glitch/features/notifications/components/notification.jsx

@@ -12,9 +12,9 @@ import FlagIcon from '@/material-icons/400-24px/flag-fill.svg?react';
 import PersonIcon from '@/material-icons/400-24px/person-fill.svg?react';
 import PersonAddIcon from '@/material-icons/400-24px/person_add-fill.svg?react';
 import { Account } from 'flavours/glitch/components/account';
+import { LinkedDisplayName } from '@/flavours/glitch/components/display_name';
 import { Icon }  from 'flavours/glitch/components/icon';
 import { Hotkeys } from 'flavours/glitch/components/hotkeys';
-import { Permalink } from 'flavours/glitch/components/permalink';
 import { StatusQuoteManager } from 'flavours/glitch/components/status_quoted';
 import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
 
@@ -407,19 +407,10 @@ class Notification extends ImmutablePureComponent {
     }
 
     const targetAccount = report.get('target_account');
-    const targetDisplayNameHtml = { __html: targetAccount.get('display_name_html') };
-    const targetLink = (
-      <bdi>
-        <Permalink
+    const targetLink = <LinkedDisplayName
       className='notification__display-name'
-          href={targetAccount.get('url')}
-          title={targetAccount.get('acct')}
-          to={`/@${targetAccount.get('acct')}`}
-          dangerouslySetInnerHTML={targetDisplayNameHtml}
-          data-hover-card-account={targetAccount.get('id')}
-        />
-      </bdi>
-    );
+      displayProps={{account:targetAccount, variant: 'simple'}}
+    />;
 
     return (
       <Hotkeys handlers={this.getHandlers()}>
@@ -441,19 +432,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             = (
-      <bdi>
-        <Permalink
-          className='notification__display-name'
-          href={`/@${account.get('acct')}`}
-          title={account.get('acct')}
-          to={`/@${account.get('acct')}`}
-          dangerouslySetInnerHTML={displayNameHtml}
-          data-hover-card-account={account.get('id')}
-        />
-      </bdi>
-    );
+    const link             = <LinkedDisplayName className='notification__display-name' displayProps={{account, variant: 'simple'}} />;
 
     switch(notification.get('type')) {
     case 'follow':

app/javascript/flavours/glitch/features/notifications/components/notification_request.jsx

@@ -16,6 +16,7 @@ import { acceptNotificationRequest, dismissNotificationRequest } from 'flavours/
 import { initReport } from 'flavours/glitch/actions/reports';
 import { Avatar } from 'flavours/glitch/components/avatar';
 import { CheckBox } from 'flavours/glitch/components/check_box';
+import { DisplayName } from '@/flavours/glitch/components/display_name';
 import { IconButton } from 'flavours/glitch/components/icon_button';
 import { Dropdown } from 'flavours/glitch/components/dropdown_menu';
 import { makeGetAccount } from 'flavours/glitch/selectors';
@@ -96,7 +97,7 @@ export const NotificationRequest = ({ id, accountId, notificationsCount, checked
 
         <div className='notification-request__name'>
           <div className='notification-request__name__display-name'>
-            <bdi><strong dangerouslySetInnerHTML={{ __html: account?.get('display_name_html') }} /></bdi>
+            <DisplayName account={account} variant='simple' />
           </div>
 
           <span>@{account?.get('acct')}</span>

app/javascript/flavours/glitch/features/notifications_v2/components/displayed_name.tsx

@@ -1,22 +0,0 @@
-import { Link } from 'react-router-dom';
-
-import { useAppSelector } from 'flavours/glitch/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 (
-    <Link
-      to={`/@${account.acct}`}
-      title={`@${account.acct}`}
-      data-hover-card-account={account.id}
-    >
-      <bdi dangerouslySetInnerHTML={{ __html: account.display_name_html }} />
-    </Link>
-  );
-};

app/javascript/flavours/glitch/features/notifications_v2/components/notification_admin_report.tsx

@@ -2,6 +2,7 @@ import { FormattedMessage, useIntl, defineMessages } from 'react-intl';
 
 import classNames from 'classnames';
 
+import { DisplayName } from '@/flavours/glitch/components/display_name';
 import FlagIcon from '@/material-icons/400-24px/flag-fill.svg?react';
 import { Icon } from 'flavours/glitch/components/icon';
 import { RelativeTimestamp } from 'flavours/glitch/components/relative_timestamp';
@@ -42,11 +43,9 @@ export const NotificationAdminReport: React.FC<{
 
   if (!account || !targetAccount) return null;
 
-  const domain = account.acct.split('@')[1];
-
   const values = {
-    name: <bdi>{domain ?? `@${account.acct}`}</bdi>,
-    target: <bdi>@{targetAccount.acct}</bdi>,
+    name: <DisplayName account={account} variant='simple' />,
+    target: <DisplayName account={targetAccount} variant='simple' />,
     category: intl.formatMessage(messages[report.category]),
     count: report.status_ids.length,
   };

app/javascript/flavours/glitch/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 '@/flavours/glitch/components/display_name';
 import { replyComposeById } from 'flavours/glitch/actions/compose';
 import { navigateToStatus } from 'flavours/glitch/actions/statuses';
 import { Avatar } from 'flavours/glitch/components/avatar';
@@ -14,7 +15,6 @@ import { RelativeTimestamp } from 'flavours/glitch/components/relative_timestamp
 import { NOTIFICATIONS_GROUP_MAX_AVATARS } from 'flavours/glitch/models/notification_group';
 import { useAppSelector, useAppDispatch } from 'flavours/glitch/store';
 
-import { DisplayedName } from './displayed_name';
 import { EmbeddedStatus } from './embedded_status';
 
 const AVATAR_SIZE = 28;
@@ -61,15 +61,18 @@ export const NotificationGroupWithStatus: React.FC<{
   additionalContent,
 }) => {
   const dispatch = useAppDispatch();
+  const account = useAppSelector((state) =>
+    state.accounts.get(accountIds.at(0) ?? ''),
+  );
 
   const label = useMemo(
     () =>
       labelRenderer(
-        <DisplayedName accountIds={accountIds} />,
+        <LinkedDisplayName displayProps={{ account, variant: 'simple' }} />,
         count,
         labelSeeMoreHref,
       ),
-    [labelRenderer, accountIds, count, labelSeeMoreHref],
+    [labelRenderer, account, count, labelSeeMoreHref],
   );
 
   const isPrivateMention = useAppSelector(

app/javascript/flavours/glitch/features/notifications_v2/components/notification_with_status.tsx

@@ -2,6 +2,7 @@ import { useMemo } from 'react';
 
 import classNames from 'classnames';
 
+import { LinkedDisplayName } from '@/flavours/glitch/components/display_name';
 import { replyComposeById } from 'flavours/glitch/actions/compose';
 import {
   toggleReblog,
@@ -18,7 +19,6 @@ import { StatusQuoteManager } from 'flavours/glitch/components/status_quoted';
 import { getStatusHidden } from 'flavours/glitch/selectors/filters';
 import { useAppSelector, useAppDispatch } from 'flavours/glitch/store';
 
-import { DisplayedName } from './displayed_name';
 import type { LabelRenderer } from './notification_group_with_status';
 
 export const NotificationWithStatus: React.FC<{
@@ -42,9 +42,16 @@ export const NotificationWithStatus: React.FC<{
 }) => {
   const dispatch = useAppDispatch();
 
+  const account = useAppSelector((state) =>
+    state.accounts.get(accountIds.at(0) ?? ''),
+  );
   const label = useMemo(
-    () => labelRenderer(<DisplayedName accountIds={accountIds} />, count),
-    [labelRenderer, accountIds, count],
+    () =>
+      labelRenderer(
+        <LinkedDisplayName displayProps={{ account, variant: 'simple' }} />,
+        count,
+      ),
+    [labelRenderer, account, count],
   );
 
   const isPrivateMention = useAppSelector(