refactor: split avatar component to handle displaynames

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

frontend/src/components/editor-page/document-bar/permissions/permission-entry-user.tsx

@@ -9,7 +9,7 @@ import { getUser } from '../../../../api/users'
 import { useApplicationState } from '../../../../hooks/common/use-application-state'
 import { setNotePermissionsFromServer } from '../../../../redux/note-details/methods'
 import { ShowIf } from '../../../common/show-if/show-if'
-import { UserAvatar } from '../../../common/user-avatar/user-avatar'
+import { UserAvatarForUser } from '../../../common/user-avatar/user-avatar-for-user'
 import { useUiNotifications } from '../../../notifications/ui-notification-boundary'
 import { PermissionEntryButtons, PermissionType } from './permission-entry-buttons'
 import { AccessLevel } from './types'
@@ -58,13 +58,13 @@ export const PermissionEntryUser: React.FC<PermissionEntryUserProps> = ({ entry
   }, [entry.username])
 
   if (!value) {
-    return null
+    return <></>
   }
 
   return (
     <ShowIf condition={!loading && !error}>
       <li className={'list-group-item d-flex flex-row justify-content-between align-items-center'}>
-        <UserAvatar user={value} />
+        <UserAvatarForUser user={value} />
         <PermissionEntryButtons
           type={PermissionType.USER}
           currentSetting={entry.canEdit ? AccessLevel.WRITEABLE : AccessLevel.READ_ONLY}

frontend/src/components/editor-page/document-bar/revisions/revision-list-entry.tsx

@@ -6,7 +6,7 @@
 import type { RevisionMetadata } from '../../../../api/revisions/types'
 import { UiIcon } from '../../../common/icons/ui-icon'
 import { ShowIf } from '../../../common/show-if/show-if'
-import { UserAvatar } from '../../../common/user-avatar/user-avatar'
+import { UserAvatarForUser } from '../../../common/user-avatar/user-avatar-for-user'
 import { WaitSpinner } from '../../../common/wait-spinner/wait-spinner'
 import { useUiNotifications } from '../../../notifications/ui-notification-boundary'
 import styles from './revision-list-entry.module.scss'
@@ -45,7 +45,7 @@ export const RevisionListEntry: React.FC<RevisionListEntryProps> = ({ active, on
     try {
       const authorDetails = await getUserDataForRevision(revision.authorUsernames)
       return authorDetails.map((author) => (
-        <UserAvatar user={author} key={author.username} showName={false} additionalClasses={'mx-1'} />
+        <UserAvatarForUser user={author} key={author.username} showName={false} additionalClasses={'mx-1'} />
       ))
     } catch (error) {
       showErrorNotification('editor.modal.revision.errorUser')(error as Error)

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>

frontend/src/components/editor-page/sidebar/users-online-sidebar-menu/users-online-sidebar-menu.tsx

@@ -56,7 +56,8 @@ export const UsersOnlineSidebarMenu: React.FC<SpecificSidebarMenuProps> = ({
         return (
           <SidebarButton key={realtimeUser.styleIndex}>
             <UserLine
-              username={realtimeUser.displayName}
+              displayName={realtimeUser.displayName}
+              username={realtimeUser.username}
               color={realtimeUser.styleIndex}
               active={realtimeUser.active}
             />