[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/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;
-    }
-    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>
-    );
+export const DisplayName: FC<
+  DisplayNameProps & ComponentPropsWithoutRef<'span'>
+> = ({ variant = 'default', ...props }) => {
+  if (variant === 'simple') {
+    return <DisplayNameSimple {...props} />;
+  } else if (variant === 'noDomain') {
+    return <DisplayNameWithoutDomain {...props} />;
   }
-  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>
   );
 };