feat: add Show Page Emails tab (#2962)

* feat: add Show Page Emails tab

Closes #2926, Closes #2927

* feat: review - disable Emails tab if messaging not enabled

* refactor: review - add FeatureFlagKey type

---------

Co-authored-by: Thais GUIGON <thaisguigon@macbook-pro.home>

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

@@ -0,0 +1,38 @@
+import styled from '@emotion/styled';
+
+import {
+  H1Title,
+  H1TitleFontColor,
+} from '@/ui/display/typography/components/H1Title';
+import { Section } from '@/ui/layout/section/components/Section';
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(6)};
+  padding: ${({ theme }) => theme.spacing(6, 6, 2)};
+`;
+
+const StyledH1Title = styled(H1Title)`
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledEmailCount = styled.span`
+  color: ${({ theme }) => theme.font.color.light};
+`;
+
+export const Emails = () => (
+  <StyledContainer>
+    <Section>
+      <StyledH1Title
+        title={
+          <>
+            Inbox <StyledEmailCount>2</StyledEmailCount>
+          </>
+        }
+        fontColor={H1TitleFontColor.Primary}
+      />
+    </Section>
+  </StyledContainer>
+);

packages/twenty-front/src/modules/ui/display/typography/components/H1Title.tsx

@@ -1,7 +1,8 @@
+import { ReactNode } from 'react';
 import styled from '@emotion/styled';
 
 type H1TitleProps = {
-  title: string;
+  title: ReactNode;
   fontColor?: H1TitleFontColor;
   className?: string;
 };

packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 
+import { Emails } from '@/activities/emails/components/Emails';
 import { Attachments } from '@/activities/files/components/Attachments';
 import { Notes } from '@/activities/notes/components/Notes';
 import { EntityTasks } from '@/activities/tasks/components/EntityTasks';
@@ -16,6 +17,7 @@ import { TabList } from '@/ui/layout/tab/components/TabList';
 import { activeTabIdScopedState } from '@/ui/layout/tab/states/activeTabIdScopedState';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
+import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 
 import { ShowPageRecoilScopeContext } from '../../states/ShowPageRecoilScopeContext';
 
@@ -52,6 +54,8 @@ export const ShowPageRightContainer = ({
   notes,
   emails,
 }: ShowPageRightContainerProps) => {
+  const isMessagingEnabled = useIsFeatureEnabled('IS_MESSAGING_ENABLED');
+
   const TASK_TABS = [
     {
       id: 'timeline',
@@ -86,7 +90,7 @@ export const ShowPageRightContainer = ({
       title: 'Emails',
       Icon: IconMail,
       hide: !emails,
-      disabled: true,
+      disabled: !isMessagingEnabled || entity.type === 'Custom',
     },
   ];
 
@@ -104,6 +108,7 @@ export const ShowPageRightContainer = ({
       {activeTabId === 'tasks' && <EntityTasks entity={entity} />}
       {activeTabId === 'notes' && <Notes entity={entity} />}
       {activeTabId === 'files' && <Attachments targetableEntity={entity} />}
+      {activeTabId === 'emails' && <Emails />}
     </StyledShowPageRightContainer>
   );
 };

packages/twenty-front/src/modules/workspace/hooks/useIsFeatureEnabled.ts

@@ -1,17 +1,14 @@
 import { useRecoilValue } from 'recoil';
 
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
+import { FeatureFlagKey } from '@/workspace/types/FeatureFlagKey';
 
-export const useIsFeatureEnabled = (featureKey: string): boolean => {
+export const useIsFeatureEnabled = (featureKey: FeatureFlagKey) => {
   const currentWorkspace = useRecoilValue(currentWorkspaceState);
 
   const featureFlag = currentWorkspace?.featureFlags?.find(
     (flag) => flag.key === featureKey,
   );
 
-  if (!featureFlag) {
-    return false;
-  }
-
-  return featureFlag.value;
+  return !!featureFlag?.value;
 };

packages/twenty-front/src/modules/workspace/types/FeatureFlagKey.ts

@@ -0,0 +1,4 @@
+export type FeatureFlagKey =
+  | 'IS_MESSAGING_ENABLED'
+  | 'IS_NOTE_CREATE_IMAGES_ENABLED'
+  | 'IS_RELATION_FIELD_TYPE_ENABLED';