header component added (#3539)

* header component added

* fix css issues and date format issue

---------

Co-authored-by: bosiraphael <raphael.bosi@gmail.com>

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

@@ -0,0 +1,54 @@
+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';
+interface ThreadHeaderProps {
+  subject: string;
+  lastMessageSentAt: Date;
+}
+
+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 ThreadHeader = ({
+  subject,
+  lastMessageSentAt,
+}: ThreadHeaderProps) => {
+  return (
+    <StyledContainer>
+      <Tag Icon={IconMail} color="gray" text="Email" onClick={() => {}} />
+      <StyledHead>
+        <StyledHeading>{subject}</StyledHeading>
+        <StyledContent>
+          Last message {beautifyPastDateRelativeToNow(lastMessageSentAt)}
+        </StyledContent>
+      </StyledHead>
+    </StyledContainer>
+  );
+};

packages/twenty-front/src/modules/activities/emails/right-drawer/components/RightDrawerThread.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import styled from '@emotion/styled';
 
+import { ThreadHeader } from '@/activities/emails/components/ThreadHeader';
+
 const StyledContainer = styled.div`
   box-sizing: border-box;
   display: flex;
@@ -12,9 +14,16 @@ const StyledContainer = styled.div`
 `;
 
 export const RightDrawerThread = () => {
+  const mockedThread = {
+    subject: 'Tes with long subject, very long subject, very long subject',
+    receivedAt: new Date(),
+  };
   return (
     <StyledContainer>
-      <></>
+      <ThreadHeader
+        subject={mockedThread.subject}
+        lastMessageSentAt={mockedThread.receivedAt}
+      />
     </StyledContainer>
   );
 };

packages/twenty-front/src/modules/ui/display/tag/components/Tag.tsx

@@ -1,5 +1,7 @@
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
+import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { ThemeColor } from '@/ui/theme/constants/colors';
 import { themeColorSchema } from '@/ui/theme/utils/themeColorSchema';
 
@@ -30,12 +32,18 @@ const StyledContent = styled.span`
   white-space: nowrap;
 `;
 
+const StyledIconContainer = styled.div`
+  display: flex;
+  margin-right: ${({ theme }) => theme.spacing(1)};
+`;
+
 type TagWeight = 'regular' | 'medium';
 
 type TagProps = {
   className?: string;
   color: ThemeColor;
   text: string;
+  Icon?: IconComponent;
   onClick?: () => void;
   weight?: TagWeight;
 };
@@ -44,15 +52,24 @@ export const Tag = ({
   className,
   color,
   text,
+  Icon,
   onClick,
   weight = 'regular',
-}: TagProps) => (
+}: TagProps) => {
+  const theme = useTheme();
+  return (
     <StyledTag
       className={className}
       color={themeColorSchema.catch('gray').parse(color)}
       onClick={onClick}
       weight={weight}
     >
+      {!!Icon && (
+        <StyledIconContainer>
+          <Icon size={theme.icon.size.sm} stroke={theme.icon.stroke.sm} />
+        </StyledIconContainer>
+      )}
       <StyledContent>{text}</StyledContent>
     </StyledTag>
   );
+};