feat: add Settings/Accounts/Emails/Inbox Setting Contact auto-creation (#3188)

Co-authored-by: Lakshay saini <lakshay.saini@finmo.net>

packages/twenty-front/src/modules/accounts/types/Account.ts

@@ -3,6 +3,7 @@ import { InboxSettingsVisibilityValue } from '@/settings/accounts/components/Set
 export type Account = {
   id: string;
   handle: string;
+  isContactAutoCreationEnabled?: boolean;
   isSynced?: boolean;
   visibility: InboxSettingsVisibilityValue;
 };

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsInboxSettingsContactAutoCreationSection.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 { IconSend } 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 SettingsAccountsInboxSettingsContactAutoCreateSectionProps = {
+  account: Account;
+  onToggle: (value: boolean) => void;
+};
+
+export const SettingsAccountsInboxSettingsContactAutoCreateSection = ({
+  account,
+  onToggle,
+}: SettingsAccountsInboxSettingsContactAutoCreateSectionProps) => {
+  const theme = useTheme();
+
+  return (
+    <Section>
+      <H2Title
+        title="Contact auto-creation"
+        description="Automatically create contacts for people you’ve sent emails to"
+      />
+      <Card>
+        <StyledCardContent>
+          <SettingsAccountsInboxSettingsCardMedia>
+            <IconSend size={theme.icon.size.sm} stroke={theme.icon.stroke.lg} />
+          </SettingsAccountsInboxSettingsCardMedia>
+          <StyledTitle>Auto-creation</StyledTitle>
+          <Toggle
+            value={account.isContactAutoCreationEnabled}
+            onChange={onToggle}
+          />
+        </StyledCardContent>
+      </Card>
+    </Section>
+  );
+};

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

@@ -97,6 +97,7 @@ export {
   IconRepeat,
   IconRobot,
   IconSearch,
+  IconSend,
   IconSettings,
   IconTable,
   IconTag,