feat(settings): move settings chrome into a single rounded card

packages/twenty-front/src/modules/app/components/SettingsRoutes.tsx

@@ -24,20 +24,6 @@ const SettingsRestPlayground = lazy(() =>
   ),
 );
 
-const SettingsAccountsCalendars = lazy(() =>
-  import('~/pages/settings/accounts/SettingsAccountsCalendars').then(
-    (module) => ({
-      default: module.SettingsAccountsCalendars,
-    }),
-  ),
-);
-
-const SettingsAccountsEmails = lazy(() =>
-  import('~/pages/settings/accounts/SettingsAccountsEmails').then((module) => ({
-    default: module.SettingsAccountsEmails,
-  })),
-);
-
 const SettingsAccountsConfiguration = lazy(() =>
   import('~/pages/settings/accounts/SettingsAccountsConfiguration').then(
     (module) => ({
@@ -122,20 +108,20 @@ const SettingsLogicFunctionDetail = lazy(() =>
   ),
 );
 
-const SettingsWorkspace = lazy(() =>
-  import('~/pages/settings/SettingsWorkspace').then((module) => ({
-    default: module.SettingsWorkspace,
+const SettingsGeneral = lazy(() =>
+  import('~/pages/settings/general/SettingsGeneral').then((module) => ({
+    default: module.SettingsGeneral,
   })),
 );
 
 const SettingsWorkspaceEmail = lazy(() =>
-  import('~/pages/settings/SettingsWorkspaceEmail').then((module) => ({
+  import('~/pages/settings/email/SettingsWorkspaceEmail').then((module) => ({
     default: module.SettingsWorkspaceEmail,
   })),
 );
 
 const SettingsWorkspaceEmailGroupChannelDetail = lazy(() =>
-  import('~/pages/settings/workspace/SettingsWorkspaceEmailGroupChannelDetail').then(
+  import('~/pages/settings/email/SettingsWorkspaceEmailGroupChannelDetail').then(
     (module) => ({
       default: module.SettingsWorkspaceEmailGroupChannelDetail,
     }),
@@ -157,9 +143,11 @@ const SettingsCustomDomainPage = lazy(() =>
 );
 
 const SettingsApiWebhooks = lazy(() =>
-  import('~/pages/settings/workspace/SettingsApiWebhooks').then((module) => ({
-    default: module.SettingsApiWebhooks,
-  })),
+  import('~/pages/settings/api-webhooks/SettingsApiWebhooks').then(
+    (module) => ({
+      default: module.SettingsApiWebhooks,
+    }),
+  ),
 );
 
 const SettingsAI = lazy(() =>
@@ -319,13 +307,13 @@ const SettingsWorkspaceMember = lazy(() =>
 );
 
 const SettingsProfile = lazy(() =>
-  import('~/pages/settings/SettingsProfile').then((module) => ({
+  import('~/pages/settings/profile/SettingsProfile').then((module) => ({
     default: module.SettingsProfile,
   })),
 );
 
 const SettingsTwoFactorAuthenticationMethod = lazy(() =>
-  import('~/pages/settings/SettingsTwoFactorAuthenticationMethod').then(
+  import('~/pages/settings/profile/SettingsTwoFactorAuthenticationMethod').then(
     (module) => ({
       default: module.SettingsTwoFactorAuthenticationMethod,
     }),
@@ -347,19 +335,19 @@ const SettingsAccounts = lazy(() =>
 );
 
 const SettingsBilling = lazy(() =>
-  import('~/pages/settings/SettingsBilling').then((module) => ({
+  import('~/pages/settings/billing/SettingsBilling').then((module) => ({
     default: module.SettingsBilling,
   })),
 );
 
 const SettingsUsage = lazy(() =>
-  import('~/pages/settings/SettingsUsage').then((module) => ({
+  import('~/pages/settings/billing/SettingsUsage').then((module) => ({
     default: module.SettingsUsage,
   })),
 );
 
 const SettingsUsageUserDetail = lazy(() =>
-  import('~/pages/settings/SettingsUsageUserDetail').then((module) => ({
+  import('~/pages/settings/billing/SettingsUsageUserDetail').then((module) => ({
     default: module.SettingsUsageUserDetail,
   })),
 );
@@ -417,12 +405,6 @@ const SettingsObjectFieldEdit = lazy(() =>
   ),
 );
 
-const SettingsSecurity = lazy(() =>
-  import('~/pages/settings/security/SettingsSecurity').then((module) => ({
-    default: module.SettingsSecurity,
-  })),
-);
-
 const SettingsSecuritySSOIdentifyProvider = lazy(() =>
   import('~/pages/settings/security/SettingsSecuritySSOIdentifyProvider').then(
     (module) => ({
@@ -631,14 +613,6 @@ export const SettingsRoutes = ({ isAdminPageEnabled }: SettingsRoutesProps) => (
           path={SettingsPath.AccountsConfiguration}
           element={<SettingsAccountsConfiguration />}
         />
-        <Route
-          path={SettingsPath.AccountsCalendars}
-          element={<SettingsAccountsCalendars />}
-        />
-        <Route
-          path={SettingsPath.AccountsEmails}
-          element={<SettingsAccountsEmails />}
-        />
         <Route
           path={SettingsPath.NewImapSmtpCaldavConnection}
           element={<SettingsNewImapSmtpCaldavConnection />}
@@ -655,7 +629,7 @@ export const SettingsRoutes = ({ isAdminPageEnabled }: SettingsRoutesProps) => (
           />
         }
       >
-        <Route path={SettingsPath.Workspace} element={<SettingsWorkspace />} />
+        <Route path={SettingsPath.General} element={<SettingsGeneral />} />
         <Route
           path={SettingsPath.WorkspaceEmail}
           element={<SettingsWorkspaceEmail />}
@@ -923,7 +897,6 @@ export const SettingsRoutes = ({ isAdminPageEnabled }: SettingsRoutesProps) => (
           />
         }
       >
-        <Route path={SettingsPath.Security} element={<SettingsSecurity />} />
         <Route
           path={SettingsPath.NewSSOIdentityProvider}
           element={<SettingsSecuritySSOIdentifyProvider />}

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

@@ -5,7 +5,7 @@ import { useParams } from 'react-router-dom';
 
 import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
-import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
+import { SettingsPageLayout } from '@/settings/components/layout/SettingsPageLayout';
 import { SettingsPath } from 'twenty-shared/types';
 
 import { Loader } from 'twenty-ui/feedback';
@@ -64,7 +64,7 @@ export const SettingsAccountsEditImapSmtpCaldavConnection = () => {
   const renderForm = () => (
     // oxlint-disable-next-line react/jsx-props-no-spreading
     <FormProvider {...formMethods}>
-      <SubMenuTopBarContainer
+      <SettingsPageLayout
         title={t`Edit Account`}
         links={[
           {
@@ -94,7 +94,7 @@ export const SettingsAccountsEditImapSmtpCaldavConnection = () => {
             existingProtocols={existingProtocols}
           />
         </SettingsPageContainer>
-      </SubMenuTopBarContainer>
+      </SettingsPageLayout>
     </FormProvider>
   );
 

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

@@ -12,7 +12,7 @@ import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { SettingsTextInput } from '@/ui/input/components/SettingsTextInput';
-import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
+import { SettingsPageLayout } from '@/settings/components/layout/SettingsPageLayout';
 import { useNavigateSettings } from '~/hooks/useNavigateSettings';
 
 export const SettingsAccountsNewEmailGroupChannel = () => {
@@ -45,12 +45,12 @@ export const SettingsAccountsNewEmailGroupChannel = () => {
   }, [createEmailGroupChannel, handle, navigate, enqueueErrorSnackBar, t]);
 
   return (
-    <SubMenuTopBarContainer
+    <SettingsPageLayout
       title={t`New Email Handle`}
       links={[
         {
           children: t`Workspace`,
-          href: getSettingsPath(SettingsPath.Workspace),
+          href: getSettingsPath(SettingsPath.General),
         },
         {
           children: t`Email`,
@@ -84,6 +84,6 @@ export const SettingsAccountsNewEmailGroupChannel = () => {
           />
         </Section>
       </SettingsPageContainer>
-    </SubMenuTopBarContainer>
+    </SettingsPageLayout>
   );
 };

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

@@ -3,7 +3,7 @@ import { FormProvider } from 'react-hook-form';
 
 import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
-import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
+import { SettingsPageLayout } from '@/settings/components/layout/SettingsPageLayout';
 import { SettingsPath } from 'twenty-shared/types';
 
 import { getSettingsPath } from 'twenty-shared/utils';
@@ -30,7 +30,7 @@ export const SettingsAccountsNewImapSmtpCaldavConnection = () => {
   return (
     // oxlint-disable-next-line react/jsx-props-no-spreading
     <FormProvider {...formMethods}>
-      <SubMenuTopBarContainer
+      <SettingsPageLayout
         title={t`New Account`}
         links={[
           {
@@ -56,7 +56,7 @@ export const SettingsAccountsNewImapSmtpCaldavConnection = () => {
         <SettingsPageContainer>
           <SettingsAccountsConnectionForm control={control} isEditing={false} />
         </SettingsPageContainer>
-      </SubMenuTopBarContainer>
+      </SettingsPageLayout>
     </FormProvider>
   );
 };

packages/twenty-front/src/modules/settings/components/layout/SettingsPageHeader.tsx

@@ -0,0 +1,86 @@
+import { useNavigationDrawerExpanded } from '@/navigation/hooks/useNavigationDrawerExpanded';
+import {
+  Breadcrumb,
+  type BreadcrumbProps,
+} from '@/ui/navigation/bread-crumb/components/Breadcrumb';
+import { NavigationDrawerCollapseButton } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerCollapseButton';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
+import { styled } from '@linaria/react';
+import { type ReactNode } from 'react';
+import { isDefined } from 'twenty-shared/utils';
+import { themeCssVariables } from 'twenty-ui/theme-constants';
+
+type SettingsPageHeaderProps = {
+  links: BreadcrumbProps['links'];
+  title?: ReactNode;
+  tag?: ReactNode;
+  actionButton?: ReactNode;
+};
+
+// Header row inside the settings card. The side cells fill equal minmax(0, 1fr)
+// tracks and clip overflow, so the centered title stays on the same vertical axis
+// as the tabs and body even when the breadcrumb is long — the breadcrumb truncates
+// instead of pushing or overlapping the title. Plain `1fr` (= minmax(auto, 1fr))
+// would let a long breadcrumb grow its track and shove the title off-center.
+const StyledHeader = styled.div`
+  align-items: center;
+  box-sizing: border-box;
+  display: grid;
+  gap: ${themeCssVariables.spacing[2]};
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  padding: ${themeCssVariables.spacing[3]};
+  width: 100%;
+`;
+
+const StyledLeft = styled.div`
+  align-items: center;
+  display: flex;
+  gap: ${themeCssVariables.spacing[1]};
+  min-width: 0;
+  overflow: hidden;
+`;
+
+const StyledTitle = styled.div`
+  align-items: center;
+  color: ${themeCssVariables.font.color.primary};
+  display: flex;
+  font-size: ${themeCssVariables.font.size.md};
+  font-weight: ${themeCssVariables.font.weight.semiBold};
+  gap: ${themeCssVariables.spacing[2]};
+  min-width: 0;
+  text-align: center;
+`;
+
+const StyledRight = styled.div`
+  align-items: center;
+  display: flex;
+  gap: ${themeCssVariables.spacing[2]};
+  justify-content: flex-end;
+  min-width: 0;
+`;
+
+export const SettingsPageHeader = ({
+  links,
+  title,
+  tag,
+  actionButton,
+}: SettingsPageHeaderProps) => {
+  const isMobile = useIsMobile();
+  const isNavigationDrawerExpanded = useNavigationDrawerExpanded();
+
+  return (
+    <StyledHeader>
+      <StyledLeft>
+        {!isNavigationDrawerExpanded && (
+          <NavigationDrawerCollapseButton direction="right" />
+        )}
+        <Breadcrumb links={links} />
+      </StyledLeft>
+      <StyledTitle>
+        {!isMobile && isDefined(title) && title}
+        {!isMobile && tag}
+      </StyledTitle>
+      <StyledRight>{actionButton}</StyledRight>
+    </StyledHeader>
+  );
+};