diff --git a/stylesheets/components/MessageDetail.scss b/stylesheets/components/MessageDetail.scss index c33e5e4feb..74534ece98 100644 --- a/stylesheets/components/MessageDetail.scss +++ b/stylesheets/components/MessageDetail.scss @@ -198,3 +198,7 @@ color: $color-white; background-color: $color-accent-red; } + +.module-message-detail__status-timestamp { + margin-left: 6px; +} diff --git a/ts/components/conversation/MessageDetail.tsx b/ts/components/conversation/MessageDetail.tsx index b7b9994ed6..3dc44248ca 100644 --- a/ts/components/conversation/MessageDetail.tsx +++ b/ts/components/conversation/MessageDetail.tsx @@ -19,6 +19,7 @@ import { groupBy } from '../../util/mapUtil'; import { ContactNameColorType } from '../../types/Colors'; import { SendStatus } from '../../messages/MessageSendState'; import * as log from '../../logging/log'; +import { Timestamp } from './Timestamp'; export type Contact = Pick< ConversationType, @@ -35,6 +36,7 @@ export type Contact = Pick< | 'unblurredAvatarPath' > & { status?: SendStatus; + statusTimestamp?: number; isOutgoingKeyError: boolean; isUnidentifiedDelivery: boolean; @@ -182,6 +184,13 @@ export class MessageDetail extends React.Component { {errorComponent} {unidentifiedDeliveryComponent} + {contact.statusTimestamp && ( + + )} ); } diff --git a/ts/models/messages.ts b/ts/models/messages.ts index 4cef2a9535..2e6c1f12f4 100644 --- a/ts/models/messages.ts +++ b/ts/models/messages.ts @@ -351,7 +351,9 @@ export class MessageModel extends window.Backbone.Model { window.storage.get('unidentifiedDeliveryIndicators', false) && this.isUnidentifiedDelivery(id, unidentifiedDeliveriesSet); - let status = getOwn(sendStateByConversationId, id)?.status; + const sendState = getOwn(sendStateByConversationId, id); + + let status = sendState?.status; // If a message was only sent to yourself (Note to Self or a lonely group), it // is shown read. @@ -362,6 +364,7 @@ export class MessageModel extends window.Backbone.Model { return { ...findAndFormatContact(id), status, + statusTimestamp: sendState?.updatedAt, errors: errorsForContact, isOutgoingKeyError, isUnidentifiedDelivery,