[FIX] Read receipts show with color gray when not read yet (#25244)

* fix: show read receipts with color gray instead of hidden

* fix: rename function

* review

Co-authored-by: gabriellsh <gabriel.henriques@rocket.chat>

apps/meteor/client/views/room/MessageList/components/MessageContent.tsx

@@ -17,7 +17,7 @@ import { UserPresence } from '../../../../lib/presence';
 import MessageBlock from '../../../blocks/MessageBlock';
 import MessageLocation from '../../../location/MessageLocation';
 import { useMessageActions, useMessageOembedIsEnabled, useMessageRunActionLink } from '../../contexts/MessageContext';
-import { useMessageShowReadReceipt } from '../contexts/MessageListContext';
+import { useMessageListShowReadReceipt } from '../contexts/MessageListContext';
 import { isOwnUserMessage } from '../lib/isOwnUserMessage';
 import EncryptedMessageRender from './EncryptedMessageRender';
 import ReactionsList from './MessageReactionsList';
@@ -36,7 +36,7 @@ const MessageContent: FC<{ message: IMessage; sequential: boolean; subscription?
 	const runActionLink = useMessageRunActionLink();
 
 	const oembedIsEnabled = useMessageOembedIsEnabled();
-	const shouldShowReadReceipt = useMessageShowReadReceipt({ message });
+	const shouldShowReadReceipt = useMessageListShowReadReceipt();
 	const user: UserPresence = { ...message.u, roles: [], ...useUserData(message.u._id) };
 	const isEncryptedMessage = isE2EEMessage(message);
 
@@ -111,7 +111,7 @@ const MessageContent: FC<{ message: IMessage; sequential: boolean; subscription?
 
 			{oembedIsEnabled && message.urls && <PreviewList urls={message.urls} />}
 
-			{shouldShowReadReceipt && <ReadReceipt />}
+			{shouldShowReadReceipt && <ReadReceipt unread={message.unread} />}
 		</>
 	);
 };

apps/meteor/client/views/room/MessageList/components/MessageReadReceipt.tsx

@@ -2,15 +2,15 @@ import { css } from '@rocket.chat/css-in-js';
 import { Box, Icon } from '@rocket.chat/fuselage';
 import React, { ReactElement } from 'react';
 
-const MessageReadReceipt = (): ReactElement | null => (
+const MessageReadReceipt = ({ unread }: { unread?: boolean }): ReactElement | null => (
 	<Box
 		position='absolute'
 		className={css`
 			top: 2px;
 			right: 0.5rem;
 		`}
 	>
-		<Icon name='check' size='x11' color='primary' />
+		<Icon name='check' size='x11' color={unread ? 'secondary' : 'primary'} />
 	</Box>
 );
 

apps/meteor/client/views/room/MessageList/contexts/MessageListContext.tsx

@@ -5,12 +5,12 @@ export type MessageListContextValue = {
 	useShowTranslated: ({ message }: { message: IMessage }) => boolean;
 	useShowStarred: ({ message }: { message: IMessage }) => boolean;
 	useShowFollowing: ({ message }: { message: IMessage }) => boolean;
-	useShowReadReceipt: ({ message }: { message: IMessage }) => boolean;
 	useMessageDateFormatter: () => (date: Date) => string;
 	useUserHasReacted: (message: IMessage) => (reaction: string) => boolean;
 	useReactToMessage: (message: IMessage) => (reaction: string) => void;
 	useReactionsFilter: (message: IMessage) => (reaction: string) => string[];
 	useOpenEmojiPicker: (message: IMessage) => (event: React.MouseEvent) => void;
+	showReadReceipt: boolean;
 	showRoles: boolean;
 	showRealName: boolean;
 	showUsername: boolean;
@@ -26,7 +26,6 @@ export const MessageListContext = createContext<MessageListContextValue>({
 	useShowTranslated: () => false,
 	useShowStarred: () => false,
 	useShowFollowing: () => false,
-	useShowReadReceipt: () => false,
 	useUserHasReacted: () => (): boolean => false,
 	useMessageDateFormatter:
 		() =>
@@ -38,6 +37,7 @@ export const MessageListContext = createContext<MessageListContextValue>({
 		(message) =>
 		(reaction: string): string[] =>
 			message.reactions ? message.reactions[reaction]?.usernames || [] : [],
+	showReadReceipt: false,
 	showRoles: false,
 	showRealName: false,
 	showUsername: false,
@@ -51,8 +51,8 @@ export const useShowFollowing: MessageListContextValue['useShowFollowing'] = (..
 	useContext(MessageListContext).useShowFollowing(...args);
 export const useMessageDateFormatter: MessageListContextValue['useMessageDateFormatter'] = (...args) =>
 	useContext(MessageListContext).useMessageDateFormatter(...args);
-export const useMessageShowReadReceipt: MessageListContextValue['useShowReadReceipt'] = (...args) =>
-	useContext(MessageListContext).useShowReadReceipt(...args);
+export const useMessageListShowReadReceipt = (): MessageListContextValue['showReadReceipt'] =>
+	useContext(MessageListContext).showReadReceipt;
 export const useMessageListShowRoles = (): MessageListContextValue['showRoles'] => useContext(MessageListContext).showRoles;
 export const useMessageListShowRealName = (): MessageListContextValue['showRealName'] => useContext(MessageListContext).showRealName;
 export const useMessageListShowUsername = (): MessageListContextValue['showUsername'] => useContext(MessageListContext).showUsername;

apps/meteor/client/views/room/MessageList/providers/MessageListProvider.tsx

@@ -75,12 +75,11 @@ export const MessageListProvider: FC<{
 			useShowStarred: hasSubscription
 				? ({ message }): boolean => Boolean(Array.isArray(message.starred) && message.starred.find((star) => star._id === uid))
 				: (): boolean => false,
-			useShowReadReceipt: ({ message }): boolean => showReadReceipt && !message.unread,
 			useMessageDateFormatter:
 				() =>
 				(date: Date): string =>
 					date.toLocaleString(),
-
+			showReadReceipt,
 			showRoles,
 			showRealName,
 			showUsername,