fix: Missing a visible quote message link

apps/meteor/client/components/message/content/attachments/QuoteAttachment.tsx

@@ -1,14 +1,17 @@
 import type { MessageQuoteAttachment } from '@rocket.chat/core-typings';
 import { css } from '@rocket.chat/css-in-js';
-import { Box, Palette } from '@rocket.chat/fuselage';
+import { Divider, Palette } from '@rocket.chat/fuselage';
 import { useUserPreference } from '@rocket.chat/ui-contexts';
+import { useTranslation } from 'react-i18next';
 
 import { useTimeAgo } from '../../../../hooks/useTimeAgo';
 import MessageContentBody from '../../MessageContentBody';
 import Attachments from '../Attachments';
 import AttachmentAuthor from './structure/AttachmentAuthor';
 import AttachmentAuthorAvatar from './structure/AttachmentAuthorAvatar';
+import AttachmentAuthorMessageLink from './structure/AttachmentAuthorMessageLink';
 import AttachmentAuthorName from './structure/AttachmentAuthorName';
+import AttachmentAuthorTimestamp from './structure/AttachmentAuthorTimestamp';
 import AttachmentContent from './structure/AttachmentContent';
 import AttachmentDetails from './structure/AttachmentDetails';
 import AttachmentInner from './structure/AttachmentInner';
@@ -35,6 +38,7 @@ type QuoteAttachmentProps = {
 };
 
 export const QuoteAttachment = ({ attachment }: QuoteAttachmentProps) => {
+	const { t } = useTranslation();
 	const formatTime = useTimeAgo();
 	const displayAvatarPreference = useUserPreference<boolean>('displayAvatars');
 
@@ -57,12 +61,16 @@ export const QuoteAttachment = ({ attachment }: QuoteAttachmentProps) => {
 							{attachment.author_name}
 						</AttachmentAuthorName>
 						{attachment.ts && (
-							<Box
-								fontScale='c1'
-								{...(attachment.message_link ? { is: 'a', href: attachment.message_link, color: 'default' } : { color: 'default' })}
-							>
-								{formatTime(attachment.ts)}
-							</Box>
+							<>
+								<Divider vertical />
+								<AttachmentAuthorTimestamp>{formatTime(attachment.ts)}</AttachmentAuthorTimestamp>
+							</>
+						)}
+						{attachment.message_link && (
+							<>
+								<Divider vertical />
+								<AttachmentAuthorMessageLink href={attachment.message_link}>{t('Jump_to_message')}</AttachmentAuthorMessageLink>
+							</>
 						)}
 					</AttachmentAuthor>
 					{attachment.attachments && (

apps/meteor/client/components/message/content/attachments/structure/AttachmentAuthorMessageLink.tsx

@@ -0,0 +1,8 @@
+import { Box } from '@rocket.chat/fuselage';
+import type { ComponentPropsWithoutRef } from 'react';
+
+type AttachmentAuthorMessageLinkProps = ComponentPropsWithoutRef<typeof Box>;
+
+const AttachmentAuthorMessageLink = (props: AttachmentAuthorMessageLinkProps) => <Box is='a' fontScale='c1' {...props} />;
+
+export default AttachmentAuthorMessageLink;

apps/meteor/client/components/message/content/attachments/structure/AttachmentAuthorName.tsx

@@ -3,6 +3,6 @@ import type { ComponentPropsWithoutRef } from 'react';
 
 type AttachmentAuthorNameProps = ComponentPropsWithoutRef<typeof Box>;
 
-const AttachmentAuthorName = (props: AttachmentAuthorNameProps) => <Box withTruncatedText fontScale='p2m' mi={8} {...props} />;
+const AttachmentAuthorName = (props: AttachmentAuthorNameProps) => <Box withTruncatedText fontScale='p2m' mis={8} {...props} />;
 
 export default AttachmentAuthorName;

apps/meteor/client/components/message/content/attachments/structure/AttachmentAuthorTimestamp.tsx

@@ -0,0 +1,8 @@
+import { Box } from '@rocket.chat/fuselage';
+import type { ComponentPropsWithoutRef } from 'react';
+
+type AttachmentAuthorTimestampProps = ComponentPropsWithoutRef<typeof Box>;
+
+const AttachmentAuthorTimestamp = (props: AttachmentAuthorTimestampProps) => <Box fontScale='c1' {...props} />;
+
+export default AttachmentAuthorTimestamp;