add LinkedDisplayName component

app/javascript/mastodon/components/display_name/display_name.stories.tsx

@@ -4,7 +4,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { accountFactoryState } from '@/testing/factories';
 
-import { DisplayName } from '.';
+import { DisplayName, LinkedDisplayName } from '.';
 
 type PageProps = Omit<ComponentProps<typeof DisplayName>, 'account'> & {
   name: string;
@@ -67,3 +67,15 @@ export const LocalUser: Story = {
     localDomain: '',
   },
 };
+
+export const Linked: Story = {
+  render({ name, username, loading, ...args }) {
+    const account = !loading
+      ? accountFactoryState({
+          display_name: name,
+          acct: username,
+        })
+      : undefined;
+    return <LinkedDisplayName {...args} account={account} />;
+  },
+};

app/javascript/mastodon/components/display_name/index.tsx

@@ -1,6 +1,9 @@
 import type { ComponentPropsWithoutRef, FC } from 'react';
 import { useMemo } from 'react';
 
+import type { LinkProps } from 'react-router-dom';
+import { Link } from 'react-router-dom';
+
 import { EmojiHTML } from '@/mastodon/features/emoji/emoji_html';
 import type { Account } from '@/mastodon/models/account';
 import { isModernEmojiEnabled } from '@/mastodon/utils/environment';
@@ -52,31 +55,24 @@ export const DisplayName: FC<Props & ComponentPropsWithoutRef<'span'>> = ({
       </span>
     );
   }
+  const accountName = isModernEmojiEnabled()
+    ? account.get('display_name')
+    : account.get('display_name_html');
   if (simple) {
     return (
-      <EmojiHTML
-        {...props}
-        htmlString={
-          isModernEmojiEnabled()
-            ? account.get('display_name')
-            : account.get('display_name_html')
-        }
-        shallow
-        as='span'
-      />
+      <bdi>
+        <EmojiHTML {...props} htmlString={accountName} shallow as='span' />
+      </bdi>
     );
   }
+
   return (
     <span {...props} className={`display-name ${className}`}>
       <bdi>
         <EmojiHTML
           {...props}
           className={`display-name__html ${className}`}
-          htmlString={
-            isModernEmojiEnabled()
-              ? account.get('display_name')
-              : account.get('display_name_html')
-          }
+          htmlString={accountName}
           shallow
           as='strong'
         />
@@ -85,3 +81,38 @@ export const DisplayName: FC<Props & ComponentPropsWithoutRef<'span'>> = ({
     </span>
   );
 };
+
+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,
+  };
+  if (!account) {
+    return <DisplayName {...displayProps} />;
+  }
+
+  return (
+    <Link
+      to={`/@${account.acct}`}
+      title={`@${account.acct}`}
+      data-hover-card-account={account.id}
+      {...linkProps}
+    >
+      <DisplayName {...displayProps} />
+    </Link>
+  );
+};