Add lock icon to hover cards

app/javascript/mastodon/components/display_name.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 
 import type { List } from 'immutable';
 
+import LockIcon from '@/material-icons/400-24px/lock.svg?react';
+import { Icon } from 'mastodon/components/icon';
 import type { Account } from 'mastodon/models/account';
 
 import { autoPlayGif } from '../initial_state';
@@ -12,6 +14,7 @@ interface Props {
   account?: Account;
   others?: List<Account>;
   localDomain?: string;
+  showLocked?: boolean;
 }
 
 export class DisplayName extends React.PureComponent<Props> {
@@ -48,7 +51,7 @@ export class DisplayName extends React.PureComponent<Props> {
   };
 
   render() {
-    const { others, localDomain } = this.props;
+    const { others, localDomain, showLocked } = this.props;
 
     let displayName: React.ReactNode,
       suffix: React.ReactNode,
@@ -93,7 +96,14 @@ export class DisplayName extends React.PureComponent<Props> {
           />
         </bdi>
       );
-      suffix = <span className='display-name__account'>@{acct}</span>;
+      suffix = (
+        <span className='display-name__account'>
+          @{acct}
+          {showLocked && account.get('locked') && (
+            <Icon id='lock' icon={LockIcon} />
+          )}
+        </span>
+      );
     } else {
       displayName = (
         <bdi>

app/javascript/mastodon/components/hover_card_account.tsx

@@ -51,7 +51,11 @@ export const HoverCardAccount = forwardRef<
         <>
           <Link to={`/@${account.acct}`} className='hover-card__name'>
             <Avatar account={account} size={46} />
-            <DisplayName account={account} localDomain={domain} />
+            <DisplayName
+              account={account}
+              localDomain={domain}
+              showLocked
+            />
           </Link>
 
           <div className='hover-card__text-row'>