From 1ec9bce79d254f22afbe8de452b4011e0c568aa9 Mon Sep 17 00:00:00 2001
From: Josh Perez <60019601+josh-signal@users.noreply.github.com>
Date: Wed, 10 May 2023 15:01:03 -0400
Subject: [PATCH] Splits up current message from edited messages in modal

---
 .../components/EditHistoryMessagesModal.scss  |  8 ++++
 ts/components/EditHistoryMessagesModal.tsx    | 42 ++++++++++++++++++-
 2 files changed, 48 insertions(+), 2 deletions(-)

diff --git a/stylesheets/components/EditHistoryMessagesModal.scss b/stylesheets/components/EditHistoryMessagesModal.scss
index f580fdcb7cff..66820212c21f 100644
--- a/stylesheets/components/EditHistoryMessagesModal.scss
+++ b/stylesheets/components/EditHistoryMessagesModal.scss
@@ -2,6 +2,14 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 .EditHistoryMessagesModal {
+  &__divider {
+    margin-block: 24px;
+  }
+
+  &__title {
+    @include font-body-1-bold;
+  }
+
   .module-message {
     padding-inline: 0;
 
diff --git a/ts/components/EditHistoryMessagesModal.tsx b/ts/components/EditHistoryMessagesModal.tsx
index 7683765747e3..35166f00c116 100644
--- a/ts/components/EditHistoryMessagesModal.tsx
+++ b/ts/components/EditHistoryMessagesModal.tsx
@@ -95,6 +95,9 @@ export function EditHistoryMessagesModal({
     Record<string, number | undefined>
   >({});
 
+  const [currentMessage, ...pastEdits] = editHistoryMessages;
+  const currentMessageId = `${currentMessage.id}.${currentMessage.timestamp}`;
+
   return (
     <Modal
       hasXButton
@@ -102,11 +105,46 @@ export function EditHistoryMessagesModal({
       modalName="EditHistoryMessagesModal"
       moduleClassName="EditHistoryMessagesModal"
       onClose={closeEditHistoryModal}
-      title={i18n('icu:EditHistoryMessagesModal__title')}
       noTransform
     >
       <div ref={containerElementRef}>
-        {editHistoryMessages.map(messageAttributes => {
+        <Message
+          {...MESSAGE_DEFAULT_PROPS}
+          {...currentMessage}
+          id={currentMessageId}
+          containerElementRef={containerElementRef}
+          displayLimit={displayLimitById[currentMessageId]}
+          getPreferredBadge={getPreferredBadge}
+          i18n={i18n}
+          isSpoilerExpanded={revealedSpoilersById[currentMessageId] || {}}
+          key={currentMessage.timestamp}
+          kickOffAttachmentDownload={kickOffAttachmentDownload}
+          messageExpanded={(messageId, displayLimit) => {
+            const update = {
+              ...displayLimitById,
+              [messageId]: displayLimit,
+            };
+            setDisplayLimitById(update);
+          }}
+          platform={platform}
+          showLightbox={closeAndShowLightbox}
+          showSpoiler={(messageId, data) => {
+            const update = {
+              ...revealedSpoilersById,
+              [messageId]: data,
+            };
+            setRevealedSpoilersById(update);
+          }}
+          theme={theme}
+        />
+
+        <hr className="EditHistoryMessagesModal__divider" />
+
+        <h3 className="EditHistoryMessagesModal__title">
+          {i18n('icu:EditHistoryMessagesModal__title')}
+        </h3>
+
+        {pastEdits.map(messageAttributes => {
           const syntheticId = `${messageAttributes.id}.${messageAttributes.timestamp}`;
 
           return (