Update collection list item design (#38425)

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

@@ -6,10 +6,11 @@ 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(() => {
+export function useAccountHandle(
+  account: DisplayNameProps['account'],
+  localDomain: DisplayNameProps['localDomain'],
+) {
+  return useMemo(() => {
     if (!account) {
       return null;
     }
@@ -20,6 +21,12 @@ export const DisplayNameDefault: FC<
     }
     return `@${acct}`;
   }, [account, localDomain]);
+}
+
+export const DisplayNameDefault: FC<
+  Omit<DisplayNameProps, 'variant'> & ComponentPropsWithoutRef<'span'>
+> = ({ account, localDomain, className, ...props }) => {
+  const username = useAccountHandle(account, localDomain);
 
   return (
     <DisplayNameWithoutDomain