From 96bcddc056957a267ebc18ebc98f762f251abe6f Mon Sep 17 00:00:00 2001
From: Thomas Trompette <thomas.trompette@sfr.fr>
Date: Tue, 30 Jan 2024 10:47:15 +0100
Subject: [PATCH] Add participant avatars + remove tbody from fetchMore loader
 (#3679)

* Add participant avatars + remove tbody from fetchMore loader

* Update sender names

---------

Co-authored-by: Thomas Trompette <thomast@twenty.com>
---
 .../emails/components/EmailThreadPreview.tsx  | 61 +++++++++++++++----
 .../components/FetchMoreLoader.tsx            | 13 +---
 2 files changed, 53 insertions(+), 21 deletions(-)

diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx
index a9549c1238..431c6ef0a0 100644
--- a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx
+++ b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx
@@ -36,13 +36,20 @@ const StyledHeading = styled.div<{ unread: boolean }>`
   }
 `;
 
-const StyledAvatar = styled(Avatar)`
-  margin: ${({ theme }) => theme.spacing(0, 1)};
+const StyledParticipantsContainer = styled.div`
+  align-items: center;
+  display: flex;
 `;
 
-const StyledSenderName = styled.span`
+const StyledAvatar = styled(Avatar)`
+  margin-left: ${({ theme }) => theme.spacing(-1)};
+`;
+
+const StyledSenderNames = styled.span`
+  margin: ${({ theme }) => theme.spacing(0, 1)};
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
 `;
 
 const StyledThreadCount = styled.span`
@@ -88,17 +95,49 @@ export const EmailThreadPreview = ({
   thread,
   onClick,
 }: EmailThreadPreviewProps) => {
+  const senderNames =
+    thread.firstParticipant.displayName +
+    (thread?.lastTwoParticipants?.[0]?.displayName
+      ? `, ${thread.lastTwoParticipants?.[0]?.displayName}`
+      : '') +
+    (thread?.lastTwoParticipants?.[1]?.displayName
+      ? `, ${thread.lastTwoParticipants?.[1]?.displayName}`
+      : '');
+
+  const [finalDisplayedName, finalAvatarUrl] =
+    thread.participantCount > 3
+      ? [`${thread.participantCount}`, '']
+      : [
+          thread?.lastTwoParticipants?.[1]?.displayName,
+          thread?.lastTwoParticipants?.[1]?.avatarUrl,
+        ];
+
   return (
     <StyledCardContent onClick={() => onClick()} divider={divider}>
       <StyledHeading unread={!thread.read}>
-        <StyledAvatar
-          avatarUrl={thread.firstParticipant.avatarUrl}
-          placeholder={thread.firstParticipant.displayName}
-          type="rounded"
-        />
-        <StyledSenderName>
-          {thread.firstParticipant.displayName}
-        </StyledSenderName>
+        <StyledParticipantsContainer>
+          <Avatar
+            avatarUrl={thread?.firstParticipant?.avatarUrl}
+            placeholder={thread.firstParticipant.displayName}
+            type="rounded"
+          />
+          {thread?.lastTwoParticipants?.[0] && (
+            <StyledAvatar
+              avatarUrl={thread.lastTwoParticipants[0].avatarUrl}
+              placeholder={thread.lastTwoParticipants[0].displayName}
+              type="rounded"
+            />
+          )}
+          {finalDisplayedName && (
+            <StyledAvatar
+              avatarUrl={finalAvatarUrl}
+              placeholder={finalDisplayedName}
+              type="rounded"
+            />
+          )}
+        </StyledParticipantsContainer>
+
+        <StyledSenderNames>{senderNames}</StyledSenderNames>
         <StyledThreadCount>{thread.numberOfMessagesInThread}</StyledThreadCount>
       </StyledHeading>
 
diff --git a/packages/twenty-front/src/modules/ui/utilities/loading-state/components/FetchMoreLoader.tsx b/packages/twenty-front/src/modules/ui/utilities/loading-state/components/FetchMoreLoader.tsx
index 1fcc59b276..fb45a23711 100644
--- a/packages/twenty-front/src/modules/ui/utilities/loading-state/components/FetchMoreLoader.tsx
+++ b/packages/twenty-front/src/modules/ui/utilities/loading-state/components/FetchMoreLoader.tsx
@@ -27,15 +27,8 @@ export const FetchMoreLoader = ({
   });
 
   return (
-    <tbody ref={tbodyRef}>
-      {loading && (
-        <tr>
-          <td colSpan={7}>
-            <StyledText>Loading more...</StyledText>
-          </td>
-          <td colSpan={7} />
-        </tr>
-      )}
-    </tbody>
+    <div ref={tbodyRef}>
+      {loading && <StyledText>Loading more...</StyledText>}
+    </div>
   );
 };