feat: add Settings/Accounts/Emails/Inbox Settings synchronization sec… (#3071)

* feat: add Settings/Accounts/Emails/Inbox Settings page

Closes #3013

* feat: add Settings/Accounts/Emails/Inbox Settings synchronization section

Closes #3014

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsInboxSettingsCardMedia.tsx

@@ -0,0 +1,16 @@
+import styled from '@emotion/styled';
+
+const StyledCardMedia = styled.div`
+  align-items: center;
+  border: 2px solid ${({ theme }) => theme.border.color.medium};
+  border-radius: ${({ theme }) => theme.border.radius.xs};
+  color: ${({ theme }) => theme.font.color.light};
+  display: flex;
+  flex-direction: column;
+  height: ${({ theme }) => theme.spacing(8)};
+  justify-content: center;
+  padding: ${({ theme }) => theme.spacing(0.5)};
+  width: ${({ theme }) => theme.spacing(6)};
+`;
+
+export { StyledCardMedia as SettingsAccountsInboxSettingsCardMedia };

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsInboxSettingsSynchronizationSection.tsx

@@ -0,0 +1,57 @@
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { Account } from '@/accounts/types/Account';
+import { SettingsAccountsInboxSettingsCardMedia } from '@/settings/accounts/components/SettingsAccountsInboxSettingsCardMedia';
+import { IconRefresh } from '@/ui/display/icon';
+import { H2Title } from '@/ui/display/typography/components/H2Title';
+import { Toggle } from '@/ui/input/components/Toggle';
+import { Card } from '@/ui/layout/card/components/Card';
+import { CardContent } from '@/ui/layout/card/components/CardContent';
+import { Section } from '@/ui/layout/section/components/Section';
+
+const StyledCardContent = styled(CardContent)`
+  align-items: center;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(4)};
+  padding: ${({ theme }) => theme.spacing(2, 4)};
+`;
+
+const StyledTitle = styled.span`
+  color: ${({ theme }) => theme.font.color.primary};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  margin-right: auto;
+`;
+
+type SettingsAccountsInboxSettingsSynchronizationSectionProps = {
+  account: Account;
+  onToggle: (value: boolean) => void;
+};
+
+export const SettingsAccountsInboxSettingsSynchronizationSection = ({
+  account,
+  onToggle,
+}: SettingsAccountsInboxSettingsSynchronizationSectionProps) => {
+  const theme = useTheme();
+
+  return (
+    <Section>
+      <H2Title
+        title="Synchronization"
+        description="Past and future emails will automatically be synced to this workspace"
+      />
+      <Card>
+        <StyledCardContent>
+          <SettingsAccountsInboxSettingsCardMedia>
+            <IconRefresh
+              size={theme.icon.size.sm}
+              stroke={theme.icon.stroke.lg}
+            />
+          </SettingsAccountsInboxSettingsCardMedia>
+          <StyledTitle>Sync emails</StyledTitle>
+          <Toggle value={account.isSynced} onChange={onToggle} />
+        </StyledCardContent>
+      </Card>
+    </Section>
+  );
+};

packages/twenty-front/src/modules/ui/display/icon/index.ts

@@ -88,6 +88,7 @@ export {
   IconPlus,
   IconPresentation,
   IconProgressCheck,
+  IconRefresh,
   IconRelationManyToMany,
   IconRelationOneToMany,
   IconRelationOneToOne,

packages/twenty-front/src/pages/settings/accounts/SettingsAccountsEmailsInboxSettings.tsx

@@ -1,6 +1,7 @@
 import { useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
+import { SettingsAccountsInboxSettingsSynchronizationSection } from '@/settings/accounts/components/SettingsAccountsInboxSettingsSynchronizationSection';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { AppPath } from '@/types/AppPath';
 import { IconSettings } from '@/ui/display/icon';
@@ -19,6 +20,10 @@ export const SettingsAccountsEmailsInboxSettings = () => {
     if (!account) navigate(AppPath.NotFound);
   }, [account, navigate]);
 
+  const handleToggle = (_value: boolean) => {};
+
+  if (!account) return <></>;
+
   return (
     <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
       <SettingsPageContainer>
@@ -29,6 +34,10 @@ export const SettingsAccountsEmailsInboxSettings = () => {
             { children: account?.email || '' },
           ]}
         />
+        <SettingsAccountsInboxSettingsSynchronizationSection
+          account={account}
+          onToggle={handleToggle}
+        />
       </SettingsPageContainer>
     </SubMenuTopBarContainer>
   );