Update collection list item design (#38425)

app/javascript/mastodon/components/avatar.tsx

@@ -95,7 +95,7 @@ export const Avatar: React.FC<Props> = ({
 };
 
 export const AvatarById: React.FC<
-  { accountId: string } & Omit<Props, 'account'>
+  { accountId: string | undefined } & Omit<Props, 'account'>
 > = ({ accountId, ...otherProps }) => {
   const account = useAccount(accountId);
   return <Avatar account={account} {...otherProps} />;

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