From 34dc681c0ed98962b85089b68890aaedefe8f482 Mon Sep 17 00:00:00 2001
From: Thomas des Francs <tdesfrancs@gmail.com>
Date: Fri, 26 Jun 2026 11:14:30 +0200
Subject: [PATCH] Use settings icon in settings drawer tab (#22204)

## Summary

- Let the shared navigation drawer tab row accept a custom icon and
accessible label for its navigation tab.
- Use the Settings icon and Settings label when that tab row is rendered
inside the settings drawer.
- Keep the main navigation drawer defaulting to the Home icon.

## Screenshots

### Before

<img width="420" alt="Before: settings drawer navigation tab uses the
Home icon"
src="https://github.com/user-attachments/assets/03b684ba-0f62-4a96-a9f1-8c6138efd9cf"
/>

### After

<img width="420" alt="After: settings drawer navigation tab uses the
Settings icon"
src="https://github.com/user-attachments/assets/3e5f4669-ed7c-4355-be92-c9cfbf160959"
/>

## Validation

- `yarn oxfmt --check
packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerTabsRow.tsx
packages/twenty-front/src/modules/navigation/components/SettingsNavigationDrawer.tsx`
- `git diff --check`
- `yarn nx typecheck twenty-front`

Note: `oxlint` could not run locally because the installed dependencies
are missing the native `@oxlint/binding-darwin-*` optional package.
---
 .../MainNavigationDrawerTabsRow.tsx           | 21 +++++++++++++++----
 .../components/SettingsNavigationDrawer.tsx   |  6 +++++-
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerTabsRow.tsx b/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerTabsRow.tsx
index a5f3d0c887..7ccb82aefe 100644
--- a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerTabsRow.tsx
+++ b/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerTabsRow.tsx
@@ -1,6 +1,11 @@
 import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
-import { IconComment, IconHome, IconMessageCirclePlus } from 'twenty-ui/icon';
+import {
+  type IconComponent,
+  IconComment,
+  IconHome,
+  IconMessageCirclePlus,
+} from 'twenty-ui/icon';
 import { OverflowingTextWithTooltip } from 'twenty-ui/surfaces';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 import { useIsMobile } from 'twenty-ui/utilities';
@@ -128,7 +133,15 @@ const StyledNewChatButton = styled.div`
   }
 `;
 
-export const MainNavigationDrawerTabsRow = () => {
+type MainNavigationDrawerTabsRowProps = {
+  NavigationMenuTabIcon?: IconComponent;
+  navigationMenuTabLabel?: string;
+};
+
+export const MainNavigationDrawerTabsRow = ({
+  NavigationMenuTabIcon = IconHome,
+  navigationMenuTabLabel = t`Home`,
+}: MainNavigationDrawerTabsRowProps) => {
   const { theme } = useContext(ThemeContext);
   const isMobile = useIsMobile();
   const isNavigationDrawerExpanded = useAtomStateValue(
@@ -191,7 +204,7 @@ export const MainNavigationDrawerTabsRow = () => {
               navigationDrawerActiveTab ===
               NAVIGATION_DRAWER_TABS.NAVIGATION_MENU
             }
-            aria-label={t`Home`}
+            aria-label={navigationMenuTabLabel}
             tabIndex={
               navigationDrawerActiveTab ===
               NAVIGATION_DRAWER_TABS.NAVIGATION_MENU
@@ -202,7 +215,7 @@ export const MainNavigationDrawerTabsRow = () => {
             onKeyDown={handleTabKeyDown(NAVIGATION_DRAWER_TABS.NAVIGATION_MENU)}
           >
             <StyledTabIcon>
-              <IconHome
+              <NavigationMenuTabIcon
                 size={theme.icon.size.md}
                 color={getTabIconColor(
                   navigationDrawerActiveTab ===
diff --git a/packages/twenty-front/src/modules/navigation/components/SettingsNavigationDrawer.tsx b/packages/twenty-front/src/modules/navigation/components/SettingsNavigationDrawer.tsx
index 1b91f60aed..4a41b705cb 100644
--- a/packages/twenty-front/src/modules/navigation/components/SettingsNavigationDrawer.tsx
+++ b/packages/twenty-front/src/modules/navigation/components/SettingsNavigationDrawer.tsx
@@ -16,6 +16,7 @@ import { styled } from '@linaria/react';
 import { useLingui } from '@lingui/react/macro';
 import { useIsMobile } from 'twenty-ui/utilities';
 import { AdvancedSettingsToggle } from 'twenty-ui/input';
+import { IconSettings } from 'twenty-ui/icon';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 import { PermissionFlagType } from '~/generated-metadata/graphql';
 
@@ -55,7 +56,10 @@ export const SettingsNavigationDrawer = ({
     <NavigationDrawer className={className} title={t`Settings`}>
       {hasAiPermission && (
         <NavigationDrawerFixedContent>
-          <MainNavigationDrawerTabsRow />
+          <MainNavigationDrawerTabsRow
+            NavigationMenuTabIcon={IconSettings}
+            navigationMenuTabLabel={t`Settings`}
+          />
         </NavigationDrawerFixedContent>
       )}