UI Improvements to the edit history modal

ts/components/EditHistoryMessagesModal.tsx

@@ -60,7 +60,7 @@ const MESSAGE_DEFAULT_PROPS = {
   shouldHideMetadata: false,
   showContactModal: shouldNeverBeCalled,
   showConversation: noop,
-  showEditHistoryModal: shouldNeverBeCalled,
+  showEditHistoryModal: noop,
   showExpiredIncomingTapToViewToast: shouldNeverBeCalled,
   showExpiredOutgoingTapToViewToast: shouldNeverBeCalled,
   showLightboxForViewOnceMedia: shouldNeverBeCalled,
@@ -100,6 +100,8 @@ export function EditHistoryMessagesModal({
   const [currentMessage, ...pastEdits] = editHistoryMessages;
   const currentMessageId = `${currentMessage.id}.${currentMessage.timestamp}`;
 
+  let previousItem = currentMessage;
+
   return (
     <Modal
       hasXButton
@@ -110,6 +112,7 @@ export function EditHistoryMessagesModal({
       noTransform
     >
       <div ref={containerElementRef}>
+        <TimelineDateHeader i18n={i18n} timestamp={currentMessage.timestamp} />
         <Message
           {...MESSAGE_DEFAULT_PROPS}
           {...currentMessage}
@@ -118,6 +121,7 @@ export function EditHistoryMessagesModal({
           displayLimit={displayLimitById[currentMessageId]}
           getPreferredBadge={getPreferredBadge}
           i18n={i18n}
+          isEditedMessage
           isSpoilerExpanded={revealedSpoilersById[currentMessageId] || {}}
           key={currentMessage.timestamp}
           kickOffAttachmentDownload={kickOffAttachmentDownload}
@@ -146,11 +150,9 @@ export function EditHistoryMessagesModal({
           {i18n('icu:EditHistoryMessagesModal__title')}
         </h3>
 
-        {pastEdits.map((messageAttributes, index) => {
+        {pastEdits.map(messageAttributes => {
           const syntheticId = `${messageAttributes.id}.${messageAttributes.timestamp}`;
 
-          const previousItem = pastEdits[index - 1];
-
           const shouldShowDateHeader = Boolean(
             !previousItem ||
               // This comparison avoids strange header behavior for out-of-order messages.
@@ -164,6 +166,8 @@ export function EditHistoryMessagesModal({
             />
           ) : null;
 
+          previousItem = messageAttributes;
+
           return (
             <React.Fragment key={messageAttributes.timestamp}>
               {dateHeaderElement}