From 7a710aee3c5bbde5a7087aad04d834bb3ae4f106 Mon Sep 17 00:00:00 2001
From: nitin <142569587+ehconitin@users.noreply.github.com>
Date: Tue, 12 Aug 2025 17:19:04 +0530
Subject: [PATCH] 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
---
 .../SettingsAccountsConnectedAccountsListCard.tsx         | 1 -
 .../components/SettingsAccountsConnectionForm.tsx         | 8 ++------
 .../SettingsAccountsEditImapSmtpCaldavConnection.tsx      | 8 ++++----
 .../components/SettingsAccountsListEmptyStateCard.tsx     | 2 +-
 .../SettingsAccountsNewImapSmtpCaldavConnection.tsx       | 8 ++++----
 .../settings/components/SettingsNavigationDrawerItem.tsx  | 6 +++++-
 .../settings/components/SettingsNavigationDrawerItems.tsx | 2 ++
 .../modules/settings/hooks/useSettingsNavigationItems.tsx | 1 -
 8 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsListCard.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsListCard.tsx
index 510468c422a..66a2bec2722 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsListCard.tsx
+++ b/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 = ({
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectionForm.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectionForm.tsx
index 1f79068b184..4fb0d853e4d 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectionForm.tsx
+++ b/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"
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEditImapSmtpCaldavConnection.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEditImapSmtpCaldavConnection.tsx
index 6c664082f06..6067c551896 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEditImapSmtpCaldavConnection.tsx
+++ b/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
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListEmptyStateCard.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListEmptyStateCard.tsx
index dc98b29f4ed..70872c7b65e 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListEmptyStateCard.tsx
+++ b/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>
       )}
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsNewImapSmtpCaldavConnection.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsNewImapSmtpCaldavConnection.tsx
index e37b78d8486..9e00e03497b 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsNewImapSmtpCaldavConnection.tsx
+++ b/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
diff --git a/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItem.tsx b/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItem.tsx
index c73389d285b..45a85910009 100644
--- a/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItem.tsx
+++ b/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;
   }
diff --git a/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx b/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx
index 581b295266b..68704250efd 100644
--- a/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx
+++ b/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({
diff --git a/packages/twenty-front/src/modules/settings/hooks/useSettingsNavigationItems.tsx b/packages/twenty-front/src/modules/settings/hooks/useSettingsNavigationItems.tsx
index 1d8e7187a02..fc972ee1219 100644
--- a/packages/twenty-front/src/modules/settings/hooks/useSettingsNavigationItems.tsx
+++ b/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`,