Build message threads (#3593)

* Adding message thread component

* Add state and mocks

* Rename components and use local state for messages

---------

Co-authored-by: Thomas Trompette <thomast@twenty.com>

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

@@ -0,0 +1,55 @@
+import styled from '@emotion/styled';
+
+import { IconMail } from '@/ui/display/icon';
+import { Tag } from '@/ui/display/tag/components/Tag';
+import { beautifyPastDateRelativeToNow } from '~/utils/date-utils';
+
+type EmailThreadHeaderProps = {
+  subject: string;
+  lastMessageSentAt: string;
+};
+
+const StyledContainer = styled.div`
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  padding: ${({ theme }) => theme.spacing(6)};
+  gap: ${({ theme }) => theme.spacing(6)};
+  border-bottom: 1px solid ${({ theme }) => theme.border.color.medium};
+  background: ${({ theme }) => theme.background.secondary};
+`;
+
+const StyledHead = styled.div`
+  width: 100%;
+`;
+
+const StyledHeading = styled.h2`
+  margin: 0;
+  margin-bottom: ${({ theme }) => theme.spacing(3)};
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+const StyledContent = styled.span`
+  color: ${({ theme }) => theme.font.color.tertiary};
+  width: 100%;
+`;
+
+export const EmailThreadHeader = ({
+  subject,
+  lastMessageSentAt,
+}: EmailThreadHeaderProps) => {
+  return (
+    <StyledContainer>
+      <Tag Icon={IconMail} color="gray" text="Email" onClick={() => {}} />
+      <StyledHead>
+        <StyledHeading>{subject}</StyledHeading>
+        <StyledContent>
+          Last message {beautifyPastDateRelativeToNow(lastMessageSentAt)}
+        </StyledContent>
+      </StyledHead>
+    </StyledContainer>
+  );
+};