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) => ({
@@ -417,12 +403,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 +611,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 />}
@@ -923,7 +895,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,7 +45,7 @@ export const SettingsAccountsNewEmailGroupChannel = () => {
   }, [createEmailGroupChannel, handle, navigate, enqueueErrorSnackBar, t]);
 
   return (
-    <SubMenuTopBarContainer
+    <SettingsPageLayout
       title={t`New Email Handle`}
       links={[
         {
@@ -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,85 @@
+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. Symmetric padding + 1fr / auto / 1fr grid
+// keep the title centered on the same vertical axis as the tabs and body content.
+const StyledHeader = styled.div`
+  align-items: center;
+  box-sizing: border-box;
+  display: grid;
+  gap: ${themeCssVariables.spacing[2]};
+  grid-template-columns: 1fr auto 1fr;
+  padding: ${themeCssVariables.spacing[3]};
+  width: 100%;
+`;
+
+const StyledLeft = styled.div`
+  align-items: center;
+  display: flex;
+  gap: ${themeCssVariables.spacing[1]};
+  justify-self: start;
+  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;
+  justify-self: 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>
+  );
+};

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

@@ -0,0 +1,106 @@
+import { CommandMenuForMobile } from '@/command-menu/components/CommandMenuForMobile';
+import { useCommandMenuHotKeys } from '@/command-menu/hooks/useCommandMenuHotKeys';
+import { InformationBannerWrapper } from '@/information-banner/components/InformationBannerWrapper';
+import { SettingsPageHeader } from '@/settings/components/layout/SettingsPageHeader';
+import { SettingsSecondaryBar } from '@/settings/components/layout/SettingsSecondaryBar';
+import { SidePanelForDesktop } from '@/side-panel/components/SidePanelForDesktop';
+import { type BreadcrumbProps } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
+import { styled } from '@linaria/react';
+import { type JSX, type ReactNode } from 'react';
+import { isDefined } from 'twenty-shared/utils';
+import { themeCssVariables } from 'twenty-ui/theme-constants';
+
+const SETTINGS_CONTENT_MAX_WIDTH = 760;
+
+type SettingsPageLayoutProps = {
+  links: BreadcrumbProps['links'];
+  title?: ReactNode;
+  actionButton?: ReactNode;
+  secondaryBar?: ReactNode;
+  children: ReactNode;
+  // className styles the root; tag renders beside the centered title.
+  className?: string;
+  tag?: JSX.Element;
+};
+
+const StyledRoot = styled.div<{ isMobile: boolean }>`
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  min-height: 0;
+  min-width: 0;
+  padding: ${({ isMobile }) =>
+    isMobile ? themeCssVariables.spacing[1] : themeCssVariables.spacing[2]};
+`;
+
+const StyledMainCardWrapper = styled.div`
+  display: flex;
+  flex: 1 1 0;
+  min-width: 0;
+  width: 0;
+`;
+
+// The single rounded card that bounds the whole settings chrome: header, secondary
+// bar and body all live inside it, against the noisy background that shows in the gap.
+const StyledCard = styled.div`
+  background: ${themeCssVariables.background.primary};
+  border: 1px solid ${themeCssVariables.border.color.medium};
+  border-radius: ${themeCssVariables.border.radius.md};
+  box-sizing: border-box;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+  width: 100%;
+`;
+
+// flex: 1 + min-height: 0 keep this in the card's overflow chain so the scroll
+// happens inside the body rather than collapsing to content height.
+const StyledBodyContent = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  margin: 0 auto;
+  max-width: ${SETTINGS_CONTENT_MAX_WIDTH}px;
+  min-height: 0;
+  width: 100%;
+`;
+
+export const SettingsPageLayout = ({
+  links,
+  title,
+  actionButton,
+  secondaryBar,
+  children,
+  tag,
+  className,
+}: SettingsPageLayoutProps) => {
+  const isMobile = useIsMobile();
+
+  useCommandMenuHotKeys();
+
+  return (
+    <StyledRoot isMobile={isMobile} className={className}>
+      <StyledMainCardWrapper>
+        <StyledCard>
+          <SettingsPageHeader
+            links={links}
+            title={title}
+            tag={tag}
+            actionButton={actionButton}
+          />
+          {isDefined(secondaryBar) && (
+            <SettingsSecondaryBar>{secondaryBar}</SettingsSecondaryBar>
+          )}
+          <StyledBodyContent>
+            <InformationBannerWrapper />
+            {children}
+          </StyledBodyContent>
+        </StyledCard>
+      </StyledMainCardWrapper>
+      {isMobile ? <CommandMenuForMobile /> : <SidePanelForDesktop />}
+    </StyledRoot>
+  );
+};

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

@@ -0,0 +1,21 @@
+import { styled } from '@linaria/react';
+import { type ReactNode } from 'react';
+import { themeCssVariables } from 'twenty-ui/theme-constants';
+
+// The secondary row that sits between the header and the body, bracketed by a
+// top + bottom border. Holds either <SettingsTabBar/> or <SettingsWizardStepBar/>.
+const StyledSecondaryBar = styled.div`
+  align-items: center;
+  border-bottom: 1px solid ${themeCssVariables.border.color.light};
+  border-top: 1px solid ${themeCssVariables.border.color.light};
+  box-sizing: border-box;
+  display: flex;
+  flex-shrink: 0;
+  min-height: ${themeCssVariables.spacing[10]};
+  padding: 0 ${themeCssVariables.spacing[3]};
+  width: 100%;
+`;
+
+export const SettingsSecondaryBar = ({ children }: { children: ReactNode }) => (
+  <StyledSecondaryBar>{children}</StyledSecondaryBar>
+);