feat: add Show Page Emails preview (#2964)

* feat: add Show Page Emails preview

Closes #2928

* refactor: review - rename StyledContainer to StyledCardContent

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

@@ -0,0 +1,88 @@
+import styled from '@emotion/styled';
+
+import { CardContent } from '@/ui/layout/card/components/CardContent';
+import { Avatar } from '@/users/components/Avatar';
+import { formatToHumanReadableDate } from '~/utils';
+
+import { Email } from '../types/email';
+
+const StyledCardContent = styled(CardContent)`
+  align-items: center;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(2)};
+  height: ${({ theme }) => theme.spacing(12)};
+  padding: ${({ theme }) => theme.spacing(0, 4)};
+`;
+
+const StyledHeading = styled.div<{ unread: boolean }>`
+  align-items: center;
+  color: ${({ theme, unread }) =>
+    unread ? theme.font.color.primary : theme.font.color.secondary};
+  display: flex;
+  font-weight: ${({ theme, unread }) =>
+    unread ? theme.font.weight.medium : theme.font.weight.regular};
+  gap: ${({ theme }) => theme.spacing(1)};
+  width: 160px;
+
+  :before {
+    background-color: ${({ theme, unread }) =>
+      unread ? theme.color.blue : 'transparent'};
+    border-radius: ${({ theme }) => theme.border.radius.rounded};
+    content: '';
+    display: block;
+    height: 6px;
+    width: 6px;
+  }
+`;
+
+const StyledAvatar = styled(Avatar)`
+  margin: ${({ theme }) => theme.spacing(0, 1)};
+`;
+
+const StyledThreadCount = styled.span`
+  color: ${({ theme }) => theme.font.color.tertiary};
+`;
+
+const StyledSubject = styled.div<{ unread: boolean }>`
+  color: ${({ theme, unread }) =>
+    unread ? theme.font.color.primary : theme.font.color.secondary};
+`;
+
+const StyledBody = styled.div`
+  color: ${({ theme }) => theme.font.color.tertiary};
+  flex: 1 0 0;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+const StyledReceivedAt = styled.div`
+  font-size: ${({ theme }) => theme.font.size.sm};
+  font-weight: ${({ theme }) => theme.font.weight.regular};
+  padding: ${({ theme }) => theme.spacing(0, 1)};
+`;
+
+type EmailPreviewProps = {
+  divider?: boolean;
+  email: Email;
+};
+
+export const EmailPreview = ({ divider, email }: EmailPreviewProps) => (
+  <StyledCardContent divider={divider}>
+    <StyledHeading unread={!email.read}>
+      <StyledAvatar
+        avatarUrl={email.senderPictureUrl}
+        placeholder={email.senderName}
+        type="rounded"
+      />
+      {email.senderName}{' '}
+      <StyledThreadCount>{email.numberOfEmailsInThread}</StyledThreadCount>
+    </StyledHeading>
+    <StyledSubject unread={!email.read}>{email.subject}</StyledSubject>
+    <StyledBody>{email.body}</StyledBody>
+    <StyledReceivedAt>
+      {formatToHumanReadableDate(email.receivedAt)}
+    </StyledReceivedAt>
+  </StyledCardContent>
+);

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

@@ -4,7 +4,11 @@ import {
   H1Title,
   H1TitleFontColor,
 } from '@/ui/display/typography/components/H1Title';
+import { Card } from '@/ui/layout/card/components/Card';
 import { Section } from '@/ui/layout/section/components/Section';
+import { mockedEmails as emails } from '~/testing/mock-data/activities';
+
+import { EmailPreview } from './EmailPreview';
 
 const StyledContainer = styled.div`
   display: flex;
@@ -28,11 +32,16 @@ export const Emails = () => (
       <StyledH1Title
         title={
           <>
-            Inbox <StyledEmailCount>2</StyledEmailCount>
+            Inbox <StyledEmailCount>{emails.length}</StyledEmailCount>
           </>
         }
         fontColor={H1TitleFontColor.Primary}
       />
+      <Card>
+        {emails.map((email, index) => (
+          <EmailPreview divider={index < emails.length - 1} email={email} />
+        ))}
+      </Card>
     </Section>
   </StyledContainer>
 );

packages/twenty-front/src/modules/activities/emails/components/__stories__/Emails.stories.tsx

@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Emails } from '../Emails';
+
+const meta: Meta<typeof Emails> = {
+  title: 'Modules/Activity/Emails/Emails',
+  component: Emails,
+};
+
+export default meta;
+type Story = StoryObj<typeof Emails>;
+
+export const Default: Story = {};

packages/twenty-front/src/modules/activities/emails/types/email.ts

@@ -0,0 +1,9 @@
+export type Email = {
+  body: string;
+  numberOfEmailsInThread: number;
+  read: boolean;
+  receivedAt: Date;
+  senderName: string;
+  senderPictureUrl: string;
+  subject: string;
+};

packages/twenty-front/src/modules/users/components/Avatar.tsx

@@ -12,6 +12,7 @@ export type AvatarSize = 'xl' | 'lg' | 'md' | 'sm' | 'xs';
 
 export type AvatarProps = {
   avatarUrl: string | null | undefined;
+  className?: string;
   size?: AvatarSize;
   placeholder: string | undefined;
   colorId?: string;
@@ -90,6 +91,7 @@ const StyledAvatar = styled.div<AvatarProps & { colorId: string }>`
 
 export const Avatar = ({
   avatarUrl,
+  className,
   size = 'md',
   placeholder,
   colorId = placeholder,
@@ -113,6 +115,7 @@ export const Avatar = ({
 
   return (
     <StyledAvatar
+      className={className}
       avatarUrl={getImageAbsoluteURIOrBase64(avatarUrl)}
       placeholder={placeholder}
       size={size}

packages/twenty-front/src/testing/mock-data/activities.ts

@@ -1,3 +1,4 @@
+import { Email } from '@/activities/emails/types/email';
 import { Activity } from '@/activities/types/Activity';
 import { ActivityTarget } from '@/activities/types/ActivityTarget';
 import { Comment } from '@/activities/types/Comment';
@@ -222,3 +223,24 @@ export const mockedActivities: Array<MockedActivity> = [
     __typename: 'Activity',
   },
 ];
+
+export const mockedEmails: Email[] = [
+  {
+    body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dignissim nisi eu tellus dapibus, egestas placerat risus placerat. Praesent eget arcu consectetur, efficitur felis.',
+    numberOfEmailsInThread: 4,
+    read: false,
+    receivedAt: new Date('11/04/2023'),
+    senderName: 'Steve Anahi',
+    senderPictureUrl: '',
+    subject: 'Partnerships',
+  },
+  {
+    body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dignissim nisi eu tellus dapibus, egestas placerat risus placerat. Praesent eget arcu consectetur, efficitur felis.',
+    numberOfEmailsInThread: 3,
+    read: true,
+    receivedAt: new Date('11/04/2023'),
+    senderName: 'Alexandre Prot',
+    senderPictureUrl: '',
+    subject: 'Next step',
+  },
+];