3696 add emails tab empty state on shows (#3702)

* empty inbox

* fix No Files alignment

* add animation when exiting the screen

* update calendar settings to be singular

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

@@ -17,6 +17,13 @@ import {
   H1TitleFontColor,
 } from '@/ui/display/typography/components/H1Title';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
+import {
+  StyledEmptyContainer,
+  StyledEmptySubTitle,
+  StyledEmptyTextContainer,
+  StyledEmptyTitle,
+} from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
 import { Card } from '@/ui/layout/card/components/Card';
 import { Section } from '@/ui/layout/section/components/Section';
 import { getScopeIdFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdFromComponentId';
@@ -141,14 +148,27 @@ export const EmailThreads = ({
   const { totalNumberOfThreads, timelineThreads }: TimelineThreadsWithTotal =
     data?.[queryName] ?? [];
 
+  if (!firstQueryLoading && !timelineThreads?.length) {
+    return (
+      <StyledEmptyContainer>
+        <AnimatedPlaceholder type="emptyInbox" />
+        <StyledEmptyTextContainer>
+          <StyledEmptyTitle>Empty Inbox</StyledEmptyTitle>
+          <StyledEmptySubTitle>
+            No email exchange has occurred with this record yet.
+          </StyledEmptySubTitle>
+        </StyledEmptyTextContainer>
+      </StyledEmptyContainer>
+    );
+  }
+
   return (
     <StyledContainer>
       <Section>
         <StyledH1Title
           title={
             <>
-              Inbox{' '}
-              <StyledEmailCount>{totalNumberOfThreads ?? 0}</StyledEmailCount>
+              Inbox <StyledEmailCount>{totalNumberOfThreads}</StyledEmailCount>
             </>
           }
           fontColor={H1TitleFontColor.Primary}