feat: add Settings/Accounts/Emails/Inbox Settings page (#3064)

Closes #3013

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

packages/twenty-front/src/App.tsx

@@ -18,6 +18,7 @@ import { NotFound } from '~/pages/not-found/NotFound';
 import { Opportunities } from '~/pages/opportunities/Opportunities';
 import { SettingsAccounts } from '~/pages/settings/accounts/SettingsAccounts';
 import { SettingsAccountsEmails } from '~/pages/settings/accounts/SettingsAccountsEmails';
+import { SettingsAccountsEmailsInboxSettings } from '~/pages/settings/accounts/SettingsAccountsEmailsInboxSettings';
 import { SettingsNewAccount } from '~/pages/settings/accounts/SettingsNewAccount';
 import { SettingsNewObject } from '~/pages/settings/data-model/SettingsNewObject';
 import { SettingsObjectDetail } from '~/pages/settings/data-model/SettingsObjectDetail';
@@ -85,6 +86,10 @@ export const App = () => {
                   path={SettingsPath.AccountsEmails}
                   element={<SettingsAccountsEmails />}
                 />
+                <Route
+                  path={SettingsPath.AccountsEmailsInboxSettings}
+                  element={<SettingsAccountsEmailsInboxSettings />}
+                />
                 <Route
                   path={SettingsPath.WorkspaceMembersPage}
                   element={<SettingsWorkspaceMembers />}

packages/twenty-front/src/modules/types/SettingsPath.ts

@@ -4,6 +4,7 @@ export enum SettingsPath {
   Accounts = 'accounts',
   NewAccount = 'accounts/new',
   AccountsEmails = 'accounts/emails',
+  AccountsEmailsInboxSettings = 'accounts/emails/:accountUuid',
   Objects = 'objects',
   ObjectDetail = 'objects/:objectSlug',
   ObjectEdit = 'objects/:objectSlug/edit',

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

@@ -0,0 +1,35 @@
+import { useEffect } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+
+import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
+import { AppPath } from '@/types/AppPath';
+import { IconSettings } from '@/ui/display/icon';
+import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
+import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
+import { mockedAccounts } from '~/testing/mock-data/accounts';
+
+export const SettingsAccountsEmailsInboxSettings = () => {
+  const navigate = useNavigate();
+  const { accountUuid = '' } = useParams();
+  const account = mockedAccounts.find(
+    (account) => account.uuid === accountUuid,
+  );
+
+  useEffect(() => {
+    if (!account) navigate(AppPath.NotFound);
+  }, [account, navigate]);
+
+  return (
+    <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
+      <SettingsPageContainer>
+        <Breadcrumb
+          links={[
+            { children: 'Accounts', href: '/settings/accounts' },
+            { children: 'Emails', href: '/settings/accounts/emails' },
+            { children: account?.email || '' },
+          ]}
+        />
+      </SettingsPageContainer>
+    </SubMenuTopBarContainer>
+  );
+};