refactor: split avatar component to handle displaynames

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

frontend/src/components/editor-page/sidebar/user-line/user-line.tsx

@@ -3,14 +3,16 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
+import { UserAvatar } from '../../../common/user-avatar/user-avatar'
 import { UserAvatarForUsername } from '../../../common/user-avatar/user-avatar-for-username'
 import { createCursorCssClass } from '../../editor-pane/codemirror-extensions/remote-cursors/create-cursor-css-class'
 import { ActiveIndicator } from '../users-online-sidebar-menu/active-indicator'
 import styles from './user-line.module.scss'
-import React from 'react'
+import React, { useMemo } from 'react'
 
 export interface UserLineProps {
   username: string | null
+  displayName: string
   active: boolean
   color: number
 }
@@ -22,7 +24,22 @@ export interface UserLineProps {
  * @param color The color of the user's edits.
  * @param status The user's current online status.
  */
-export const UserLine: React.FC<UserLineProps> = ({ username, active, color }) => {
+export const UserLine: React.FC<UserLineProps> = ({ username, displayName, active, color }) => {
+  const avatar = useMemo(() => {
+    if (username) {
+      return (
+        <UserAvatarForUsername
+          username={username}
+          additionalClasses={'flex-fill overflow-hidden px-2 text-nowrap w-100'}
+        />
+      )
+    } else {
+      return (
+        <UserAvatar displayName={displayName} additionalClasses={'flex-fill overflow-hidden px-2 text-nowrap w-100'} />
+      )
+    }
+  }, [displayName, username])
+
   return (
     <div className={'d-flex align-items-center h-100 w-100'}>
       <div
@@ -30,10 +47,7 @@ export const UserLine: React.FC<UserLineProps> = ({ username, active, color }) =
           color
         )}`}
       />
-      <UserAvatarForUsername
-        username={username}
-        additionalClasses={'flex-fill overflow-hidden px-2 text-nowrap w-100'}
-      />
+      {avatar}
       <div className={styles['active-indicator-container']}>
         <ActiveIndicator active={active} />
       </div>