4810 display participants in the right drawer of the calendar event (#4896)

Closes #4810

- Introduces a new component `ExpandableList` which uses intersection
observers to display the maximum number of elements possible

packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageSender.tsx

@@ -1,11 +1,7 @@
-import React from 'react';
 import styled from '@emotion/styled';
 
+import { ParticipantChip } from '@/activities/components/ParticipantChip';
 import { EmailThreadMessageParticipant } from '@/activities/emails/types/EmailThreadMessageParticipant';
-import { getDisplayNameFromParticipant } from '@/activities/emails/utils/getDisplayNameFromParticipant';
-import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
-import { RecordChip } from '@/object-record/components/RecordChip';
-import { Avatar } from '@/users/components/Avatar';
 import { beautifyPastDateRelativeToNow } from '~/utils/date-utils';
 
 const StyledEmailThreadMessageSender = styled.div`
@@ -13,23 +9,6 @@ const StyledEmailThreadMessageSender = styled.div`
   justify-content: space-between;
 `;
 
-const StyledEmailThreadMessageSenderUser = styled.div`
-  align-items: flex-start;
-  display: flex;
-`;
-
-const StyledAvatar = styled(Avatar)`
-  margin: ${({ theme }) => theme.spacing(0, 1)};
-`;
-
-const StyledSenderName = styled.span`
-  color: ${({ theme }) => theme.font.color.primary};
-  font-size: ${({ theme }) => theme.font.size.sm};
-  font-weight: ${({ theme }) => theme.font.weight.medium};
-  overflow: hidden;
-  text-overflow: ellipsis;
-`;
-
 const StyledThreadMessageSentAt = styled.div`
   align-items: flex-end;
   display: flex;
@@ -37,10 +16,6 @@ const StyledThreadMessageSentAt = styled.div`
   font-size: ${({ theme }) => theme.font.size.sm};
 `;
 
-const StyledRecordChip = styled(RecordChip)`
-  font-weight: ${({ theme }) => theme.font.weight.medium};
-`;
-
 type EmailThreadMessageSenderProps = {
   sender: EmailThreadMessageParticipant;
   sentAt: string;
@@ -50,35 +25,9 @@ export const EmailThreadMessageSender = ({
   sender,
   sentAt,
 }: EmailThreadMessageSenderProps) => {
-  const { person, workspaceMember } = sender;
-
-  const displayName = getDisplayNameFromParticipant({
-    participant: sender,
-    shouldUseFullName: true,
-  });
-
-  const avatarUrl = person?.avatarUrl ?? workspaceMember?.avatarUrl ?? '';
-
   return (
     <StyledEmailThreadMessageSender>
-      <StyledEmailThreadMessageSenderUser>
-        {person ? (
-          <StyledRecordChip
-            objectNameSingular={CoreObjectNameSingular.Person}
-            record={person}
-          />
-        ) : (
-          <>
-            <StyledAvatar
-              avatarUrl={avatarUrl}
-              type="rounded"
-              placeholder={displayName}
-              size="sm"
-            />
-            <StyledSenderName>{displayName}</StyledSenderName>
-          </>
-        )}
-      </StyledEmailThreadMessageSenderUser>
+      <ParticipantChip participant={sender} variant="bold" />
       <StyledThreadMessageSentAt>
         {beautifyPastDateRelativeToNow(sentAt)}
       </StyledThreadMessageSentAt>