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{' '}
+              Inbox <StyledEmailCount>{totalNumberOfThreads}</StyledEmailCount>
-              <StyledEmailCount>{totalNumberOfThreads ?? 0}</StyledEmailCount>
             </>
           }
           fontColor={H1TitleFontColor.Primary}

packages/twenty-front/src/modules/ui/layout/animated-placeholder/components/AnimatedPlaceholder.tsx

@@ -1,6 +1,7 @@
 import { useEffect } from 'react';
 import styled from '@emotion/styled';
 import { motion, useMotionValue, useTransform } from 'framer-motion';
+import { animate } from 'framer-motion';
 
 import {
   Background,
@@ -56,12 +57,27 @@ const AnimatedPlaceholder = ({ type }: AnimatedPlaceholderProps) => {
       y.set(clientY);
     };
 
+    const handleLeave = () => {
+      animate(x, window.innerWidth / 2, {
+        type: 'spring',
+        stiffness: 100,
+        damping: 10,
+      });
+      animate(y, window.innerHeight / 2, {
+        type: 'spring',
+        stiffness: 100,
+        damping: 10,
+      });
+    };
+
     window.addEventListener('mousemove', handleMove);
     window.addEventListener('touchmove', handleMove);
+    window.document.addEventListener('mouseleave', handleLeave);
 
     return () => {
       window.removeEventListener('mousemove', handleMove);
       window.removeEventListener('touchmove', handleMove);
+      window.document.removeEventListener('mouseleave', handleLeave);
     };
   }, [x, y]);
 

packages/twenty-front/src/modules/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled.tsx

@@ -9,7 +9,6 @@ export const StyledEmptyContainer = styled.div`
   gap: ${({ theme }) => theme.spacing(6)};
   justify-content: center;
   text-align: center;
-  margin: ${({ theme }) => theme.spacing(16)} 0px;
 `;
 
 export const StyledEmptyTextContainer = styled.div`

packages/twenty-front/src/modules/ui/layout/animated-placeholder/constants/AnimatedImages.ts

@@ -5,6 +5,7 @@ export const Background: Record<string, string> = {
   noTask: '/images/placeholders/background/no_task_bg.png',
   errorIndex: '/images/placeholders/background/error_index_bg.png',
   emptyTimeline: '/images/placeholders/background/empty_timeline_bg.png',
+  emptyInbox: '/images/placeholders/background/empty_inbox_bg.png',
   error404: '/images/placeholders/background/404_bg.png',
   error500: '/images/placeholders/background/500_bg.png',
 };
@@ -16,6 +17,7 @@ export const MovingImage: Record<string, string> = {
   noTask: '/images/placeholders/moving-image/no_task.png',
   errorIndex: '/images/placeholders/moving-image/error_index.png',
   emptyTimeline: '/images/placeholders/moving-image/empty_timeline.png',
+  emptyInbox: '/images/placeholders/moving-image/empty_inbox.png',
   error404: '/images/placeholders/moving-image/404.png',
   error500: '/images/placeholders/moving-image/500.png',
 };

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/__stories__/NavigationDrawer.stories.tsx

@@ -114,7 +114,7 @@ export const Submenu: Story = {
             />
             <NavigationDrawerItem
               level={2}
-              label="Calendars"
+              label="Calendar"
               Icon={IconCalendarEvent}
               soon
             />