fix IMAP breadcrumb (#13847)

closes https://github.com/twentyhq/twenty/issues/13811
figma -
https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=72629-202079&t=CHbHe7QGamvPTnAi-0

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

@@ -23,7 +23,6 @@ const StyledAddAccountSection = styled(Section)`
   display: flex;
   justify-content: flex-end;
   padding-top: ${({ theme }) => theme.spacing(2)};
-  padding-bottom: ${({ theme }) => theme.spacing(2)};
 `;
 
 export const SettingsAccountsConnectedAccountsListCard = ({

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

@@ -68,13 +68,9 @@ export const SettingsAccountsConnectionForm = ({
 }: SettingsAccountsConnectionFormProps) => {
   const { t } = useLingui();
 
-  const getTitle = () => {
-    return isEditing ? t`Edit Email Account` : t`New Email Account`;
-  };
-
   const getDescription = () => {
     if (isEditing) {
-      return t`Update your email account configuration. Configure any combination of IMAP, SMTP, and CalDAV as needed.`;
+      return t`Update your account's configuration. Configure any combination of IMAP, SMTP, and CalDAV as needed.`;
     }
     return t`You can set up any combination of IMAP (receiving emails), SMTP (sending emails), and CalDAV (calendar sync).`;
   };
@@ -83,7 +79,7 @@ export const SettingsAccountsConnectionForm = ({
 
   return (
     <Section>
-      <H2Title title={getTitle()} description={getDescription()} />
+      <H2Title title={t`Mail Account`} description={getDescription()} />
       <StyledFormContainer>
         <Controller
           name="handle"

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

@@ -60,17 +60,17 @@ export const SettingsAccountsEditImapSmtpCaldavConnection = () => {
     // eslint-disable-next-line react/jsx-props-no-spreading
     <FormProvider {...formMethods}>
       <SubMenuTopBarContainer
-        title={t`Edit Email Account`}
+        title={t`Edit Account`}
         links={[
           {
-            children: t`Workspace`,
-            href: getSettingsPath(SettingsPath.Workspace),
+            children: t`User`,
+            href: getSettingsPath(SettingsPath.ProfilePage),
           },
           {
             children: t`Accounts`,
             href: getSettingsPath(SettingsPath.Accounts),
           },
-          { children: t`Edit Email Account` },
+          { children: t`Edit Account` },
         ]}
         actionButton={
           <SaveAndCancelButtons

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

@@ -69,7 +69,7 @@ export const SettingsAccountsListEmptyStateCard = () => {
         >
           <SettingsCard
             Icon={<IconAt size={theme.icon.size.md} />}
-            title={t`Connect Email Account`}
+            title={t`Connect Account`}
           />
         </UndecoratedLink>
       )}

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

@@ -31,17 +31,17 @@ export const SettingsAccountsNewImapSmtpCaldavConnection = () => {
     // eslint-disable-next-line react/jsx-props-no-spreading
     <FormProvider {...formMethods}>
       <SubMenuTopBarContainer
-        title={t`New Email Account`}
+        title={t`New Account`}
         links={[
           {
-            children: t`Workspace`,
-            href: getSettingsPath(SettingsPath.Workspace),
+            children: t`User`,
+            href: getSettingsPath(SettingsPath.ProfilePage),
           },
           {
             children: t`Accounts`,
             href: getSettingsPath(SettingsPath.Accounts),
           },
-          { children: t`New Email Account` },
+          { children: t`New Account` },
         ]}
         actionButton={
           <SaveAndCancelButtons

packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItem.tsx

@@ -10,19 +10,23 @@ import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 type SettingsNavigationDrawerItemProps = {
   item: SettingsNavigationItem;
   subItemState?: NavigationDrawerSubItemState;
+  hasActiveSubItem?: boolean;
 };
 
 export const SettingsNavigationDrawerItem = ({
   item,
   subItemState,
+  hasActiveSubItem = false,
 }: SettingsNavigationDrawerItemProps) => {
   const href = item.path ? getSettingsPath(item.path) : '';
   const pathName = useResolvedPath(href).pathname;
-  const isActive = !!useMatch({
+  const matchResult = useMatch({
     path: pathName,
     end: item.matchSubPages === false,
   });
 
+  const isActive = !!matchResult && !hasActiveSubItem;
+
   if (isDefined(item.isHidden) && item.isHidden) {
     return null;
   }

packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx

@@ -55,6 +55,7 @@ export const SettingsNavigationDrawerItems = () => {
               if (Array.isArray(subItems) && subItems.length > 0) {
                 const selectedSubItemIndex =
                   getSelectedIndexForSubItems(subItems);
+                const hasActiveSubItem = selectedSubItemIndex !== -1;
 
                 return (
                   <NavigationDrawerItemGroup
@@ -62,6 +63,7 @@ export const SettingsNavigationDrawerItems = () => {
                   >
                     <SettingsNavigationDrawerItem
                       item={item}
+                      hasActiveSubItem={hasActiveSubItem}
                       subItemState={
                         item.indentationLevel
                           ? getNavigationSubItemLeftAdornment({

packages/twenty-front/src/modules/settings/hooks/useSettingsNavigationItems.tsx

@@ -86,7 +86,6 @@ const useSettingsNavigationItems = (): SettingsNavigationSection[] => {
           label: t`Accounts`,
           path: SettingsPath.Accounts,
           Icon: IconAt,
-          matchSubPages: false,
           subItems: [
             {
               label: t`Emails`,