fix: user-status-text to be displayed in room header

client/views/room/Header/Header.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { FlowRouter } from 'meteor/kadira:flow-router';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { ActionButton } from '@rocket.chat/fuselage';
@@ -14,6 +14,9 @@ import { useLayout } from '../../../contexts/LayoutContext';
 import Burger from './Burger';
 import { useTranslation } from '../../../contexts/TranslationContext';
 import MarkdownText from '../../../components/MarkdownText';
+import { useUser } from '../../../contexts/UserContext';
+import { useUserData } from '../../../hooks/useUserData';
+import { useEndpointData } from '../../../hooks/useEndpointData';
 
 export default React.memo(({ room }) => {
 	const { isEmbedded, showTopNavbarEmbeddedLayout } = useLayout();
@@ -34,6 +37,25 @@ const BackToRoom = React.memo(({ small, prid }) => {
 
 const RoomHeader = ({ room }) => {
 	const icon = useRoomIcon(room);
+
+	const user = useUser();
+
+	const otherUserQuery = useMemo(() => {
+		// check if room is direct message with 2 members
+		if (room.t === 'd' && room.uids?.length === 2) {
+			const userId = room.uids.find((uid) => uid !== user._id);
+			return { userId };
+		}
+		return null;
+	}, [room, user]);
+
+	const liveOtherUserStatusText = useUserData(otherUserQuery?.userId)?.statusText;
+
+	// if the other is offline, then liveOtherUserStatusText is undefined
+	const { value: data } = useEndpointData('users.info', otherUserQuery);
+
+	const roomTopic = liveOtherUserStatusText || data?.user?.statusText || room.topic;
+
 	const { isMobile } = useLayout();
 	const avatar = <RoomAvatar room={room}/>;
 	return <Header>
@@ -51,7 +73,7 @@ const RoomHeader = ({ room }) => {
 				<Translate room={room} />
 			</Header.Content.Row>
 			<Header.Content.Row>
-				<Header.Subtitle>{room.topic && <MarkdownText withRichContent={false} content={room.topic}/>}</Header.Subtitle>
+				<Header.Subtitle>{roomTopic && <MarkdownText withRichContent={false} content={roomTopic}/>}</Header.Subtitle>
 			</Header.Content.Row>
 		</Header.Content>
 		<Header.ToolBox>