[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/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
-          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>
-    );
+    const targetLink = <LinkedDisplayName
+      className='notification__display-name'
+      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>