fixed inconsistent disply name

src/app/organisms/channel/ChannelViewCmdBar.jsx

@@ -149,7 +149,7 @@ function FollowingMembers({ roomId, roomTimeline, viewEvent }) {
   return followingMembers.length !== 0 && (
     <TimelineChange
       variant="follow"
-      content={getUsersActionJsx(followingMembers, 'following the conversation.')}
+      content={getUsersActionJsx(roomId, followingMembers, 'following the conversation.')}
       time=""
       onClick={() => openReadReceipts(roomId, lastMEvent.getId())}
     />

src/app/organisms/channel/ChannelViewFloating.jsx

@@ -30,7 +30,7 @@ function ChannelViewFloating({
   function getTypingMessage(members) {
     const userIds = members;
     userIds.delete(mx.getUserId());
-    return getUsersActionJsx([...userIds], 'typing...');
+    return getUsersActionJsx(roomId, [...userIds], 'typing...');
   }
 
   function updateTyping(members) {

src/app/organisms/channel/ChannelViewInput.scss

@@ -29,7 +29,7 @@
     & .btn-cmd-esc {
       display: none;
       margin: 0 var(--sp-extra-tight);
-      padding: var(--sp-ultra-tight) var(--sp-tight);
+      padding: var(--sp-ultra-tight) var(--sp-extra-tight);
       border-radius: calc(var(--bo-radius) / 2);
       box-shadow: var(--bs-surface-border);
       cursor: pointer;

src/app/organisms/channel/common.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { getUsername } from '../../../util/matrixUtil';
+import initMatrix from '../../../client/initMatrix';
+import { getUsername, getUsernameOfRoomMember } from '../../../util/matrixUtil';
 
 function getTimelineJSXMessages() {
   return {
@@ -134,8 +135,13 @@ function getTimelineJSXMessages() {
   };
 }
 
-function getUsersActionJsx(userIds, actionStr) {
-  const getUserJSX = (username) => <b>{getUsername(username)}</b>;
+function getUsersActionJsx(roomId, userIds, actionStr) {
+  const room = initMatrix.matrixClient.getRoom(roomId);
+  const getUserDisplayName = (userId) => {
+    if (room?.getMember(userId)) return getUsernameOfRoomMember(room.getMember(userId));
+    return getUsername(userId);
+  };
+  const getUserJSX = (userId) => <b>{getUserDisplayName(userId)}</b>;
   if (!Array.isArray(userIds)) return 'Idle';
   if (userIds.length === 0) return 'Idle';
   const MAX_VISIBLE_COUNT = 3;

src/app/organisms/read-receipts/ReadReceipts.jsx

@@ -3,7 +3,7 @@ import React, { useState, useEffect } from 'react';
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import navigation from '../../../client/state/navigation';
-import { getUsername } from '../../../util/matrixUtil';
+import { getUsername, getUsernameOfRoomMember } from '../../../util/matrixUtil';
 import colorMXID from '../../../util/colorMXID';
 
 import IconButton from '../../atoms/button/IconButton';
@@ -51,12 +51,16 @@ function ReadReceipts() {
   function renderPeople(receipt) {
     const room = initMatrix.matrixClient.getRoom(roomId);
     const member = room.getMember(receipt.userId);
+    const getUserDisplayName = (userId) => {
+      if (room?.getMember(userId)) return getUsernameOfRoomMember(room.getMember(userId));
+      return getUsername(userId);
+    };
     return (
       <PeopleSelector
         key={receipt.userId}
         onClick={() => alert('Viewing profile is yet to be implemented')}
         avatarSrc={member?.getAvatarUrl(initMatrix.matrixClient.baseUrl, 24, 24, 'crop')}
-        name={getUsername(receipt.userId)}
+        name={getUserDisplayName(receipt.userId)}
         color={colorMXID(receipt.userId)}
       />
     );