Merge branch 'main' into feat/navbar-customization-v2

- Imported MAIN_COLOR_NAMES for dynamic color handling.
- Added logic to generate colors for custom objects based on a hash of their names.
- Updated getStandardObjectIconColor to return a color for custom objects when not found in the standard list.

packages/twenty-front/src/generated-metadata/graphql.ts

@@ -1041,6 +1041,7 @@ export type CreateLogicFunctionFromSourceInput = {
 };
 
 export type CreateNavigationMenuItemInput = {
+  color?: InputMaybe<Scalars['String']>;
   folderId?: InputMaybe<Scalars['UUID']>;
   icon?: InputMaybe<Scalars['String']>;
   link?: InputMaybe<Scalars['String']>;
@@ -3246,6 +3247,7 @@ export type NativeModelCapabilities = {
 export type NavigationMenuItem = {
   __typename?: 'NavigationMenuItem';
   applicationId?: Maybe<Scalars['UUID']>;
+  color?: Maybe<Scalars['String']>;
   createdAt: Scalars['DateTime'];
   folderId?: Maybe<Scalars['UUID']>;
   icon?: Maybe<Scalars['String']>;
@@ -4584,6 +4586,7 @@ export type UpdateLogicFunctionFromSourceInputUpdates = {
 };
 
 export type UpdateNavigationMenuItemInput = {
+  color?: InputMaybe<Scalars['String']>;
   folderId?: InputMaybe<Scalars['UUID']>;
   icon?: InputMaybe<Scalars['String']>;
   link?: InputMaybe<Scalars['String']>;
@@ -5873,42 +5876,42 @@ export type FindManyMarketplaceAppsQueryVariables = Exact<{ [key: string]: never
 
 export type FindManyMarketplaceAppsQuery = { __typename?: 'Query', findManyMarketplaceApps: Array<{ __typename?: 'MarketplaceApp', id: string, name: string, description: string, icon: string, version: string, author: string, category: string, logo?: string | null, screenshots: Array<string>, aboutDescription: string, providers: Array<string>, websiteUrl?: string | null, termsUrl?: string | null, objects: Array<{ __typename?: 'MarketplaceAppObject', universalIdentifier: string, nameSingular: string, namePlural: string, labelSingular: string, labelPlural: string, description?: string | null, icon?: string | null, fields: Array<{ __typename?: 'MarketplaceAppField', universalIdentifier?: string | null, name: string, type: string, label: string, description?: string | null, icon?: string | null }> }>, fields: Array<{ __typename?: 'MarketplaceAppField', name: string, type: string, label: string, description?: string | null, icon?: string | null, objectUniversalIdentifier?: string | null }>, logicFunctions: Array<{ __typename?: 'MarketplaceAppLogicFunction', name: string, description?: string | null, timeoutSeconds?: number | null }>, frontComponents: Array<{ __typename?: 'MarketplaceAppFrontComponent', name: string, description?: string | null }>, defaultRole?: { __typename?: 'MarketplaceAppDefaultRole', id: string, label: string, description?: string | null, canReadAllObjectRecords: boolean, canUpdateAllObjectRecords: boolean, canSoftDeleteAllObjectRecords: boolean, canDestroyAllObjectRecords: boolean, canUpdateAllSettings: boolean, canAccessAllTools: boolean, permissionFlags: Array<string>, objectPermissions: Array<{ __typename?: 'MarketplaceAppRoleObjectPermission', objectUniversalIdentifier: string, canReadObjectRecords?: boolean | null, canUpdateObjectRecords?: boolean | null, canSoftDeleteObjectRecords?: boolean | null, canDestroyObjectRecords?: boolean | null }>, fieldPermissions: Array<{ __typename?: 'MarketplaceAppRoleFieldPermission', objectUniversalIdentifier: string, fieldUniversalIdentifier: string, canReadFieldValue?: boolean | null, canUpdateFieldValue?: boolean | null }> } | null }> };
 
-export type NavigationMenuItemFieldsFragment = { __typename?: 'NavigationMenuItem', id: string, userWorkspaceId?: string | null, targetRecordId?: string | null, targetObjectMetadataId?: string | null, viewId?: string | null, folderId?: string | null, name?: string | null, link?: string | null, icon?: string | null, position: number, applicationId?: string | null, createdAt: string, updatedAt: string };
+export type NavigationMenuItemFieldsFragment = { __typename?: 'NavigationMenuItem', id: string, userWorkspaceId?: string | null, targetRecordId?: string | null, targetObjectMetadataId?: string | null, viewId?: string | null, folderId?: string | null, name?: string | null, link?: string | null, icon?: string | null, color?: string | null, position: number, applicationId?: string | null, createdAt: string, updatedAt: string };
 
-export type NavigationMenuItemQueryFieldsFragment = { __typename?: 'NavigationMenuItem', id: string, userWorkspaceId?: string | null, targetRecordId?: string | null, targetObjectMetadataId?: string | null, viewId?: string | null, folderId?: string | null, name?: string | null, link?: string | null, icon?: string | null, position: number, applicationId?: string | null, createdAt: string, updatedAt: string, targetRecordIdentifier?: { __typename?: 'RecordIdentifier', id: string, labelIdentifier: string, imageIdentifier?: string | null } | null };
+export type NavigationMenuItemQueryFieldsFragment = { __typename?: 'NavigationMenuItem', id: string, userWorkspaceId?: string | null, targetRecordId?: string | null, targetObjectMetadataId?: string | null, viewId?: string | null, folderId?: string | null, name?: string | null, link?: string | null, icon?: string | null, color?: string | null, position: number, applicationId?: string | null, createdAt: string, updatedAt: string, targetRecordIdentifier?: { __typename?: 'RecordIdentifier', id: string, labelIdentifier: string, imageIdentifier?: string | null } | null };
 
 export type CreateNavigationMenuItemMutationVariables = Exact<{
   input: CreateNavigationMenuItemInput;
 }>;
 
 
-export type CreateNavigationMenuItemMutation = { __typename?: 'Mutation', createNavigationMenuItem: { __typename?: 'NavigationMenuItem', id: string, userWorkspaceId?: string | null, targetRecordId?: string | null, targetObjectMetadataId?: string | null, viewId?: string | null, folderId?: string | null, name?: string | null, link?: string | null, icon?: string | null, position: number, applicationId?: string | null, createdAt: string, updatedAt: string } };
+export type CreateNavigationMenuItemMutation = { __typename?: 'Mutation', createNavigationMenuItem: { __typename?: 'NavigationMenuItem', id: string, userWorkspaceId?: string | null, targetRecordId?: string | null, targetObjectMetadataId?: string | null, viewId?: string | null, folderId?: string | null, name?: string | null, link?: string | null, icon?: string | null, color?: string | null, position: number, applicationId?: string | null, createdAt: string, updatedAt: string } };
 
 export type DeleteNavigationMenuItemMutationVariables = Exact<{
   id: Scalars['UUID'];
 }>;
 
 
-export type DeleteNavigationMenuItemMutation = { __typename?: 'Mutation', deleteNavigationMenuItem: { __typename?: 'NavigationMenuItem', id: string, userWorkspaceId?: string | null, targetRecordId?: string | null, targetObjectMetadataId?: string | null, viewId?: string | null, folderId?: string | null, name?: string | null, link?: string | null, icon?: string | null, position: number, applicationId?: string | null, createdAt: string, updatedAt: string } };
+export type DeleteNavigationMenuItemMutation = { __typename?: 'Mutation', deleteNavigationMenuItem: { __typename?: 'NavigationMenuItem', id: string, userWorkspaceId?: string | null, targetRecordId?: string | null, targetObjectMetadataId?: string | null, viewId?: string | null, folderId?: string | null, name?: string | null, link?: string | null, icon?: string | null, color?: string | null, position: number, applicationId?: string | null, createdAt: string, updatedAt: string } };
 
 export type UpdateNavigationMenuItemMutationVariables = Exact<{
   input: UpdateOneNavigationMenuItemInput;
 }>;
 
 
-export type UpdateNavigationMenuItemMutation = { __typename?: 'Mutation', updateNavigationMenuItem: { __typename?: 'NavigationMenuItem', id: string, userWorkspaceId?: string | null, targetRecordId?: string | null, targetObjectMetadataId?: string | null, viewId?: string | null, folderId?: string | null, name?: string | null, link?: string | null, icon?: string | null, position: number, applicationId?: string | null, createdAt: string, updatedAt: string } };
+export type UpdateNavigationMenuItemMutation = { __typename?: 'Mutation', updateNavigationMenuItem: { __typename?: 'NavigationMenuItem', id: string, userWorkspaceId?: string | null, targetRecordId?: string | null, targetObjectMetadataId?: string | null, viewId?: string | null, folderId?: string | null, name?: string | null, link?: string | null, icon?: string | null, color?: string | null, position: number, applicationId?: string | null, createdAt: string, updatedAt: string } };
 
 export type FindManyNavigationMenuItemsQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-export type FindManyNavigationMenuItemsQuery = { __typename?: 'Query', navigationMenuItems: Array<{ __typename?: 'NavigationMenuItem', id: string, userWorkspaceId?: string | null, targetRecordId?: string | null, targetObjectMetadataId?: string | null, viewId?: string | null, folderId?: string | null, name?: string | null, link?: string | null, icon?: string | null, position: number, applicationId?: string | null, createdAt: string, updatedAt: string, targetRecordIdentifier?: { __typename?: 'RecordIdentifier', id: string, labelIdentifier: string, imageIdentifier?: string | null } | null }> };
+export type FindManyNavigationMenuItemsQuery = { __typename?: 'Query', navigationMenuItems: Array<{ __typename?: 'NavigationMenuItem', id: string, userWorkspaceId?: string | null, targetRecordId?: string | null, targetObjectMetadataId?: string | null, viewId?: string | null, folderId?: string | null, name?: string | null, link?: string | null, icon?: string | null, color?: string | null, position: number, applicationId?: string | null, createdAt: string, updatedAt: string, targetRecordIdentifier?: { __typename?: 'RecordIdentifier', id: string, labelIdentifier: string, imageIdentifier?: string | null } | null }> };
 
 export type FindOneNavigationMenuItemQueryVariables = Exact<{
   id: Scalars['UUID'];
 }>;
 
 
-export type FindOneNavigationMenuItemQuery = { __typename?: 'Query', navigationMenuItem?: { __typename?: 'NavigationMenuItem', id: string, userWorkspaceId?: string | null, targetRecordId?: string | null, targetObjectMetadataId?: string | null, viewId?: string | null, folderId?: string | null, name?: string | null, link?: string | null, icon?: string | null, position: number, applicationId?: string | null, createdAt: string, updatedAt: string, targetRecordIdentifier?: { __typename?: 'RecordIdentifier', id: string, labelIdentifier: string, imageIdentifier?: string | null } | null } | null };
+export type FindOneNavigationMenuItemQuery = { __typename?: 'Query', navigationMenuItem?: { __typename?: 'NavigationMenuItem', id: string, userWorkspaceId?: string | null, targetRecordId?: string | null, targetObjectMetadataId?: string | null, viewId?: string | null, folderId?: string | null, name?: string | null, link?: string | null, icon?: string | null, color?: string | null, position: number, applicationId?: string | null, createdAt: string, updatedAt: string, targetRecordIdentifier?: { __typename?: 'RecordIdentifier', id: string, labelIdentifier: string, imageIdentifier?: string | null } | null } | null };
 
 export type ObjectMetadataFieldsFragment = { __typename?: 'Object', id: string, nameSingular: string, namePlural: string, labelSingular: string, labelPlural: string, description?: string | null, icon?: string | null, isCustom: boolean, isRemote: boolean, isActive: boolean, isSystem: boolean, isUIReadOnly: boolean, createdAt: string, updatedAt: string, labelIdentifierFieldMetadataId?: string | null, imageIdentifierFieldMetadataId?: string | null, applicationId: string, shortcut?: string | null, isLabelSyncedWithName: boolean, isSearchable: boolean, duplicateCriteria?: Array<Array<string>> | null, indexMetadataList: Array<{ __typename?: 'Index', id: string, createdAt: string, updatedAt: string, name: string, indexWhereClause?: string | null, indexType: IndexType, isUnique: boolean, isCustom?: boolean | null, indexFieldMetadataList: Array<{ __typename?: 'IndexField', id: string, fieldMetadataId: string, createdAt: string, updatedAt: string, order: number }> }>, fieldsList: Array<{ __typename?: 'Field', id: string, type: FieldMetadataType, name: string, label: string, description?: string | null, icon?: string | null, isCustom?: boolean | null, isActive?: boolean | null, isSystem?: boolean | null, isUIReadOnly?: boolean | null, isNullable?: boolean | null, isUnique?: boolean | null, createdAt: string, updatedAt: string, defaultValue?: any | null, options?: any | null, settings?: any | null, isLabelSyncedWithName?: boolean | null, morphId?: string | null, applicationId: string, relation?: { __typename?: 'Relation', type: RelationType, sourceObjectMetadata: { __typename?: 'Object', id: string, nameSingular: string, namePlural: string }, targetObjectMetadata: { __typename?: 'Object', id: string, nameSingular: string, namePlural: string }, sourceFieldMetadata: { __typename?: 'Field', id: string, name: string }, targetFieldMetadata: { __typename?: 'Field', id: string, name: string } } | null, morphRelations?: Array<{ __typename?: 'Relation', type: RelationType, sourceObjectMetadata: { __typename?: 'Object', id: string, nameSingular: string, namePlural: string }, targetObjectMetadata: { __typename?: 'Object', id: string, nameSingular: string, namePlural: string }, sourceFieldMetadata: { __typename?: 'Field', id: string, name: string }, targetFieldMetadata: { __typename?: 'Field', id: string, name: string } }> | null }> };
 
@@ -7404,6 +7407,7 @@ export const NavigationMenuItemFieldsFragmentDoc = gql`
   name
   link
   icon
+  color
   position
   applicationId
   createdAt

packages/twenty-front/src/modules/command-menu/components/CommandMenuFolderInfo.tsx

@@ -1,4 +1,3 @@
-import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useLingui } from '@lingui/react/macro';
 import { useRecoilValue } from 'recoil';
@@ -7,24 +6,22 @@ import { useIcons } from 'twenty-ui/display';
 import { CommandMenuPageInfoLayout } from '@/command-menu/components/CommandMenuPageInfoLayout';
 import { commandMenuPageInfoState } from '@/command-menu/states/commandMenuPageInfoState';
 import { commandMenuShouldFocusTitleInputComponentState } from '@/command-menu/states/commandMenuShouldFocusTitleInputComponentState';
-import { StyledNavigationMenuItemIconContainer } from '@/navigation-menu-item/components/NavigationMenuItemIconContainer';
+import { NavigationMenuItemStyleIcon } from '@/navigation-menu-item/components/NavigationMenuItemStyleIcon';
 import { FOLDER_ICON_DEFAULT } from '@/navigation-menu-item/constants/FolderIconDefault';
 import { NavigationMenuItemType } from '@/navigation-menu-item/constants/NavigationMenuItemType';
 import { useUpdateFolderInDraft } from '@/navigation-menu-item/hooks/useUpdateFolderInDraft';
 import { useWorkspaceSectionItems } from '@/navigation-menu-item/hooks/useWorkspaceSectionItems';
 import { selectedNavigationMenuItemInEditModeStateV2 } from '@/navigation-menu-item/states/selectedNavigationMenuItemInEditModeStateV2';
-import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
-import { getNavigationMenuItemIconColors } from '@/navigation-menu-item/utils/getNavigationMenuItemIconColors';
 import { IconPicker } from '@/ui/input/components/IconPicker';
 import { TitleInput } from '@/ui/input/components/TitleInput';
 import { useRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentState';
+import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
 
 const StyledClickableIconWrapper = styled.div`
   cursor: pointer;
 `;
 
 export const CommandMenuFolderInfo = () => {
-  const theme = useTheme();
   const { t } = useLingui();
   const { getIcon } = useIcons();
   const commandMenuPageInfo = useRecoilValue(commandMenuPageInfoState);
@@ -82,15 +79,10 @@ export const CommandMenuFolderInfo = () => {
           }
           clickableComponent={
             <StyledClickableIconWrapper>
-              <StyledNavigationMenuItemIconContainer
-                $backgroundColor={getNavigationMenuItemIconColors(theme).folder}
-              >
-                <FolderIconComponent
-                  size={theme.spacing(3.5)}
-                  color={theme.grayScale.gray1}
-                  stroke={theme.icon.stroke.md}
-                />
-              </StyledNavigationMenuItemIconContainer>
+              <NavigationMenuItemStyleIcon
+                Icon={FolderIconComponent}
+                color={selectedItem.color}
+              />
             </StyledClickableIconWrapper>
           }
         />
@@ -111,6 +103,7 @@ export const CommandMenuFolderInfo = () => {
           onFocus={() => setShouldFocusTitleInput(false)}
         />
       }
+      label={t`Folder`}
     />
   );
 };

packages/twenty-front/src/modules/command-menu/components/CommandMenuItem.tsx

@@ -67,7 +67,7 @@ export const CommandMenuItem = ({
               })
           : undefined
       }
-      focused={isSelectedItemId}
+      focused={!disabled && isSelectedItemId}
       RightComponent={RightComponent}
       hasSubMenu={hasSubMenu}
       isSubMenuOpened={isSubMenuOpened}

packages/twenty-front/src/modules/command-menu/components/CommandMenuLinkInfo.tsx

@@ -1,4 +1,3 @@
-import { useTheme } from '@emotion/react';
 import { useLingui } from '@lingui/react/macro';
 import { useRecoilValue } from 'recoil';
 import { IconLink } from 'twenty-ui/display';
@@ -6,18 +5,16 @@ import { IconLink } from 'twenty-ui/display';
 import { CommandMenuPageInfoLayout } from '@/command-menu/components/CommandMenuPageInfoLayout';
 import { commandMenuPageInfoState } from '@/command-menu/states/commandMenuPageInfoState';
 import { commandMenuShouldFocusTitleInputComponentState } from '@/command-menu/states/commandMenuShouldFocusTitleInputComponentState';
+import { NavigationMenuItemStyleIcon } from '@/navigation-menu-item/components/NavigationMenuItemStyleIcon';
 import { NavigationMenuItemType } from '@/navigation-menu-item/constants/NavigationMenuItemType';
-import { StyledNavigationMenuItemIconContainer } from '@/navigation-menu-item/components/NavigationMenuItemIconContainer';
 import { useUpdateLinkInDraft } from '@/navigation-menu-item/hooks/useUpdateLinkInDraft';
 import { useWorkspaceSectionItems } from '@/navigation-menu-item/hooks/useWorkspaceSectionItems';
 import { selectedNavigationMenuItemInEditModeStateV2 } from '@/navigation-menu-item/states/selectedNavigationMenuItemInEditModeStateV2';
-import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
-import { getNavigationMenuItemIconColors } from '@/navigation-menu-item/utils/getNavigationMenuItemIconColors';
 import { TitleInput } from '@/ui/input/components/TitleInput';
 import { useRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentState';
+import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
 
 export const CommandMenuLinkInfo = () => {
-  const theme = useTheme();
   const { t } = useLingui();
   const commandMenuPageInfo = useRecoilValue(commandMenuPageInfoState);
   const [shouldFocusTitleInput, setShouldFocusTitleInput] =
@@ -63,15 +60,10 @@ export const CommandMenuLinkInfo = () => {
   return (
     <CommandMenuPageInfoLayout
       icon={
-        <StyledNavigationMenuItemIconContainer
-          $backgroundColor={getNavigationMenuItemIconColors(theme).link}
-        >
-          <IconLink
-            size={theme.spacing(3.5)}
-            color={theme.grayScale.gray1}
-            stroke={theme.icon.stroke.md}
-          />
-        </StyledNavigationMenuItemIconContainer>
+        <NavigationMenuItemStyleIcon
+          Icon={IconLink}
+          color={selectedItem.color}
+        />
       }
       title={
         <TitleInput
@@ -89,7 +81,7 @@ export const CommandMenuLinkInfo = () => {
           onFocus={() => setShouldFocusTitleInput(false)}
         />
       }
-      label={t`link`}
+      label={t`Link`}
     />
   );
 };

packages/twenty-front/src/modules/command-menu/components/CommandMenuObjectViewRecordInfo.tsx

@@ -6,11 +6,15 @@ import { NavigationMenuItemIcon } from '@/navigation-menu-item/components/Naviga
 import { NavigationMenuItemType } from '@/navigation-menu-item/constants/NavigationMenuItemType';
 import { useSelectedNavigationMenuItemEditItem } from '@/navigation-menu-item/hooks/useSelectedNavigationMenuItemEditItem';
 import { useSelectedNavigationMenuItemEditItemLabel } from '@/navigation-menu-item/hooks/useSelectedNavigationMenuItemEditItemLabel';
+import { useSelectedNavigationMenuItemEditItemObjectMetadata } from '@/navigation-menu-item/hooks/useSelectedNavigationMenuItemEditItemObjectMetadata';
+import { ViewKey } from '@/views/types/ViewKey';
 
 export const CommandMenuObjectViewRecordInfo = () => {
   const { t } = useLingui();
   const { selectedItem } = useSelectedNavigationMenuItemEditItem();
   const { selectedItemLabel } = useSelectedNavigationMenuItemEditItemLabel();
+  const { selectedItemObjectMetadata } =
+    useSelectedNavigationMenuItemEditItemObjectMetadata();
 
   const processedItem =
     selectedItem && selectedItem.itemType !== NavigationMenuItemType.FOLDER
@@ -30,11 +34,12 @@ export const CommandMenuObjectViewRecordInfo = () => {
     return null;
   }
 
-  const label = isViewOrRecord
-    ? processedItem.itemType === NavigationMenuItemType.RECORD
-      ? t`record`
-      : t`view`
-    : t`object`;
+  const label =
+    processedItem.itemType === NavigationMenuItemType.RECORD
+      ? selectedItemObjectMetadata?.labelSingular
+      : processedItem.viewKey === ViewKey.Index
+        ? t`Object`
+        : t`View`;
 
   return (
     <CommandMenuPageInfoLayout

packages/twenty-front/src/modules/command-menu/components/CommandMenuSubViewWithSearch.tsx

@@ -12,9 +12,12 @@ const StyledSubViewContainer = styled.div`
 `;
 
 const StyledSearchContainer = styled.div`
+  align-items: center;
   border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
+  display: flex;
+  height: ${({ theme }) => theme.spacing(10)};
   min-width: 0;
-  padding: ${({ theme }) => theme.spacing(2, 3)};
+  padding-inline: ${({ theme }) => theme.spacing(3)};
 `;
 
 const StyledSearchInput = styled.input`
@@ -22,8 +25,7 @@ const StyledSearchInput = styled.input`
   border: none;
   border-radius: ${({ theme }) => theme.border.radius.sm};
   box-sizing: border-box;
-  color: ${({ theme }) => theme.font.color.primary};
-  font-size: ${({ theme }) => theme.font.size.md};
+
   padding: 0;
   width: 100%;
   outline: none;

packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuEditColorOption.tsx

@@ -0,0 +1,118 @@
+import styled from '@emotion/styled';
+import { useLingui } from '@lingui/react/macro';
+import { useState } from 'react';
+import { capitalize } from 'twenty-shared/utils';
+import { IconColorSwatch } from 'twenty-ui/display';
+import { type ColorLabels, MenuItemSelectColor } from 'twenty-ui/navigation';
+import { MAIN_COLOR_NAMES, type ThemeColor } from 'twenty-ui/theme';
+
+import { CommandMenuItemDropdown } from '@/command-menu/components/CommandMenuItemDropdown';
+import { useUpdateNavigationMenuItemInDraft } from '@/navigation-menu-item/hooks/useUpdateNavigationMenuItemInDraft';
+import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
+import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
+import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
+import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
+
+const NAVIGATION_MENU_ITEM_COLOR_DROPDOWN_ID = 'navigation-menu-item-color';
+
+const StyledMenuStyleText = styled.span`
+  color: ${({ theme }) => theme.font.color.light};
+  font-size: 13px;
+`;
+
+const COLOR_LABELS: ColorLabels = {
+  gray: 'Gray',
+  tomato: 'Tomato',
+  red: 'Red',
+  ruby: 'Ruby',
+  crimson: 'Crimson',
+  pink: 'Pink',
+  plum: 'Plum',
+  purple: 'Purple',
+  violet: 'Violet',
+  iris: 'Iris',
+  cyan: 'Cyan',
+  turquoise: 'Turquoise',
+  sky: 'Sky',
+  blue: 'Blue',
+  jade: 'Jade',
+  green: 'Green',
+  grass: 'Grass',
+  mint: 'Mint',
+  lime: 'Lime',
+  bronze: 'Bronze',
+  gold: 'Gold',
+  brown: 'Brown',
+  orange: 'Orange',
+  amber: 'Amber',
+  yellow: 'Yellow',
+};
+
+type CommandMenuEditColorOptionProps = {
+  navigationMenuItemId: string;
+  color: string | null | undefined;
+};
+
+export const CommandMenuEditColorOption = ({
+  navigationMenuItemId,
+  color,
+}: CommandMenuEditColorOptionProps) => {
+  const { t } = useLingui();
+  const { updateNavigationMenuItemInDraft } =
+    useUpdateNavigationMenuItemInDraft();
+  const { closeDropdown } = useCloseDropdown();
+
+  const [searchValue, setSearchValue] = useState('');
+  const themeColor = (color ?? 'gray') as ThemeColor;
+  const colorLabel = COLOR_LABELS[themeColor] ?? capitalize(themeColor);
+
+  const query = searchValue.trim().toLowerCase();
+
+  const filteredColorNames = !query
+    ? MAIN_COLOR_NAMES
+    : MAIN_COLOR_NAMES.filter(
+        (colorName) =>
+          colorName.toLowerCase().includes(query) ||
+          (COLOR_LABELS[colorName] ?? '').toLowerCase().includes(query),
+      );
+
+  const handleSelectColor = (selectedColor: ThemeColor) => {
+    updateNavigationMenuItemInDraft(navigationMenuItemId, {
+      color: selectedColor,
+    });
+    closeDropdown(NAVIGATION_MENU_ITEM_COLOR_DROPDOWN_ID);
+  };
+
+  return (
+    <CommandMenuItemDropdown
+      id="edit-navigation-menu-item-color"
+      label={t`Color`}
+      Icon={IconColorSwatch}
+      dropdownId={NAVIGATION_MENU_ITEM_COLOR_DROPDOWN_ID}
+      dropdownPlacement="bottom-start"
+      RightComponent={<StyledMenuStyleText>{colorLabel}</StyledMenuStyleText>}
+      dropdownComponents={
+        <DropdownContent>
+          <DropdownMenuSearchInput
+            placeholder={t`Search colors...`}
+            value={searchValue}
+            onChange={(event) => setSearchValue(event.target.value)}
+          />
+          <DropdownMenuSeparator />
+          <DropdownMenuItemsContainer hasMaxHeight>
+            {filteredColorNames.map((colorName) => (
+              <MenuItemSelectColor
+                key={colorName}
+                onClick={() => handleSelectColor(colorName)}
+                color={colorName}
+                selected={colorName === themeColor}
+                colorLabels={COLOR_LABELS}
+              />
+            ))}
+          </DropdownMenuItemsContainer>
+        </DropdownContent>
+      }
+    />
+  );
+};

packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuEditFolderPickerSubView.tsx

@@ -1,12 +1,15 @@
-import { useState } from 'react';
 import { useLingui } from '@lingui/react/macro';
-import { IconFolderPlus } from 'twenty-ui/display';
+import { useState } from 'react';
+import { useIcons } from 'twenty-ui/display';
 
 import { CommandGroup } from '@/command-menu/components/CommandGroup';
 import { CommandMenuItem } from '@/command-menu/components/CommandMenuItem';
 import { CommandMenuList } from '@/command-menu/components/CommandMenuList';
 import { CommandMenuSubViewWithSearch } from '@/command-menu/components/CommandMenuSubViewWithSearch';
 import { useFolderPickerSelectionData } from '@/command-menu/pages/navigation-menu-item/hooks/useFolderPickerSelectionData';
+import { NavigationMenuItemStyleIcon } from '@/navigation-menu-item/components/NavigationMenuItemStyleIcon';
+import { FOLDER_ICON_DEFAULT } from '@/navigation-menu-item/constants/FolderIconDefault';
+import { DEFAULT_NAVIGATION_MENU_ITEM_COLOR_FOLDER } from '@/navigation-menu-item/constants/NavigationMenuItemDefaultColorFolder';
 import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
 import { filterBySearchQuery } from '~/utils/filterBySearchQuery';
 
@@ -18,6 +21,7 @@ export const CommandMenuEditFolderPickerSubView = ({
   onBack,
 }: CommandMenuEditFolderPickerSubViewProps) => {
   const { t } = useLingui();
+  const { getIcon } = useIcons();
   const [searchValue, setSearchValue] = useState('');
   const { foldersToShow, includeNoFolderOption, handleSelectFolder } =
     useFolderPickerSelectionData({ onCloseSubView: onBack });
@@ -64,20 +68,30 @@ export const CommandMenuEditFolderPickerSubView = ({
               />
             </SelectableListItem>
           )}
-          {filteredFolders.map((folder) => (
-            <SelectableListItem
-              key={folder.id}
-              itemId={folder.id}
-              onEnter={() => handleSelectFolder(folder.id)}
-            >
-              <CommandMenuItem
-                Icon={IconFolderPlus}
-                label={folder.name}
-                id={folder.id}
-                onClick={() => handleSelectFolder(folder.id)}
-              />
-            </SelectableListItem>
-          ))}
+          {filteredFolders.map((folder) => {
+            const FolderIcon = getIcon(folder.icon ?? FOLDER_ICON_DEFAULT);
+            const folderColor =
+              folder.color ?? DEFAULT_NAVIGATION_MENU_ITEM_COLOR_FOLDER;
+            return (
+              <SelectableListItem
+                key={folder.id}
+                itemId={folder.id}
+                onEnter={() => handleSelectFolder(folder.id)}
+              >
+                <CommandMenuItem
+                  LeftComponent={
+                    <NavigationMenuItemStyleIcon
+                      Icon={FolderIcon}
+                      color={folderColor}
+                    />
+                  }
+                  label={folder.name}
+                  id={folder.id}
+                  onClick={() => handleSelectFolder(folder.id)}
+                />
+              </SelectableListItem>
+            );
+          })}
         </CommandGroup>
       </CommandMenuList>
     </CommandMenuSubViewWithSearch>

packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuEditLinkItemView.tsx

@@ -5,12 +5,13 @@ import { getAbsoluteUrl } from 'twenty-shared/utils';
 
 import { CommandGroup } from '@/command-menu/components/CommandGroup';
 import { CommandMenuList } from '@/command-menu/components/CommandMenuList';
+import { CommandMenuEditColorOption } from '@/command-menu/pages/navigation-menu-item/components/CommandMenuEditColorOption';
 import {
   type OrganizeActionsProps,
   CommandMenuEditOrganizeActions,
 } from '@/command-menu/pages/navigation-menu-item/components/CommandMenuEditOrganizeActions';
-import { getOrganizeActionsSelectableItemIds } from '@/command-menu/pages/navigation-menu-item/utils/getOrganizeActionsSelectableItemIds';
 import { CommandMenuEditOwnerSection } from '@/command-menu/pages/navigation-menu-item/components/CommandMenuEditOwnerSection';
+import { getOrganizeActionsSelectableItemIds } from '@/command-menu/pages/navigation-menu-item/utils/getOrganizeActionsSelectableItemIds';
 import { type ProcessedNavigationMenuItem } from '@/navigation-menu-item/types/processed-navigation-menu-item';
 import { TextInput } from '@/ui/input/components/TextInput';
 
@@ -40,6 +41,10 @@ export const CommandMenuEditLinkItemView = ({
   return (
     <CommandMenuList commandGroups={[]} selectableItemIds={selectableItemIds}>
       <CommandGroup heading={t`Customize`}>
+        <CommandMenuEditColorOption
+          navigationMenuItemId={selectedItem.id}
+          color={selectedItem.color}
+        />
         <TextInput
           fullWidth
           placeholder="www.google.com"

packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuEditObjectViewBase.tsx

@@ -1,9 +1,13 @@
+import { CommandGroup } from '@/command-menu/components/CommandGroup';
+import { CommandMenuList } from '@/command-menu/components/CommandMenuList';
+import { CommandMenuEditColorOption } from '@/command-menu/pages/navigation-menu-item/components/CommandMenuEditColorOption';
 import {
   type OrganizeActionsProps,
   CommandMenuEditOrganizeActions,
 } from '@/command-menu/pages/navigation-menu-item/components/CommandMenuEditOrganizeActions';
 import { getOrganizeActionsSelectableItemIds } from '@/command-menu/pages/navigation-menu-item/utils/getOrganizeActionsSelectableItemIds';
-import { CommandMenuList } from '@/command-menu/components/CommandMenuList';
+import { useSelectedNavigationMenuItemEditItem } from '@/navigation-menu-item/hooks/useSelectedNavigationMenuItemEditItem';
+import { useLingui } from '@lingui/react/macro';
 
 type CommandMenuEditObjectViewBaseProps = OrganizeActionsProps & {
   onOpenFolderPicker: () => void;
@@ -19,10 +23,20 @@ export const CommandMenuEditObjectViewBase = ({
   onAddBefore,
   onAddAfter,
 }: CommandMenuEditObjectViewBaseProps) => {
+  const { t } = useLingui();
+  const { selectedItem } = useSelectedNavigationMenuItemEditItem();
   const selectableItemIds = getOrganizeActionsSelectableItemIds(true);
 
   return (
     <CommandMenuList commandGroups={[]} selectableItemIds={selectableItemIds}>
+      {selectedItem && (
+        <CommandGroup heading={t`Customize`}>
+          <CommandMenuEditColorOption
+            navigationMenuItemId={selectedItem.id}
+            color={selectedItem.color}
+          />
+        </CommandGroup>
+      )}
       <CommandMenuEditOrganizeActions
         canMoveUp={canMoveUp}
         canMoveDown={canMoveDown}

packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuNavigationMenuItemEditPage.tsx

@@ -1,4 +1,6 @@
+import { CommandGroup } from '@/command-menu/components/CommandGroup';
 import { CommandMenuList } from '@/command-menu/components/CommandMenuList';
+import { CommandMenuEditColorOption } from '@/command-menu/pages/navigation-menu-item/components/CommandMenuEditColorOption';
 import { CommandMenuEditFolderPickerSubView } from '@/command-menu/pages/navigation-menu-item/components/CommandMenuEditFolderPickerSubView';
 import { CommandMenuEditLinkItemView } from '@/command-menu/pages/navigation-menu-item/components/CommandMenuEditLinkItemView';
 import { CommandMenuEditObjectViewBase } from '@/command-menu/pages/navigation-menu-item/components/CommandMenuEditObjectViewBase';
@@ -115,6 +117,14 @@ export const CommandMenuNavigationMenuItemEditPage = () => {
           commandGroups={[]}
           selectableItemIds={getOrganizeActionsSelectableItemIds(false)}
         >
+          {selectedItem && (
+            <CommandGroup heading={t`Customize`}>
+              <CommandMenuEditColorOption
+                navigationMenuItemId={selectedItem.id}
+                color={selectedItem.color}
+              />
+            </CommandGroup>
+          )}
           <CommandMenuEditOrganizeActions
             canMoveUp={canMoveUp}
             canMoveDown={canMoveDown}
@@ -133,6 +143,14 @@ export const CommandMenuNavigationMenuItemEditPage = () => {
           commandGroups={[]}
           selectableItemIds={getOrganizeActionsSelectableItemIds(true)}
         >
+          {selectedItem && (
+            <CommandGroup heading={t`Customize`}>
+              <CommandMenuEditColorOption
+                navigationMenuItemId={selectedItem.id}
+                color={selectedItem.color}
+              />
+            </CommandGroup>
+          )}
           <CommandMenuEditOrganizeActions
             canMoveUp={canMoveUp}
             canMoveDown={canMoveDown}

packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuNewSidebarItemMainMenu.tsx

@@ -1,10 +1,11 @@
+import { useTheme } from '@emotion/react';
 import { useLingui } from '@lingui/react/macro';
 import {
-  IconAddressBook,
-  IconCube,
+  Avatar,
+  IconBuildingSkyscraper,
   IconFolder,
   IconLink,
-  IconList,
+  IconTable,
 } from 'twenty-ui/display';
 
 import { CommandGroup } from '@/command-menu/components/CommandGroup';
@@ -15,8 +16,9 @@ import { CommandMenuItemWithAddToNavigationDrag } from '@/command-menu/component
 import { CommandMenuList } from '@/command-menu/components/CommandMenuList';
 import { useAddFolderToNavigationMenu } from '@/command-menu/pages/navigation-menu-item/hooks/useAddFolderToNavigationMenu';
 import { useAddLinkToNavigationMenu } from '@/command-menu/pages/navigation-menu-item/hooks/useAddLinkToNavigationMenu';
-import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
+import { NavigationMenuItemStyleIcon } from '@/navigation-menu-item/components/NavigationMenuItemStyleIcon';
 import { NavigationMenuItemType } from '@/navigation-menu-item/constants/NavigationMenuItemType';
+import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
 
 type CommandMenuNewSidebarItemMainMenuProps = {
   onSelectObject: () => void;
@@ -30,6 +32,7 @@ export const CommandMenuNewSidebarItemMainMenu = ({
   onSelectRecord,
 }: CommandMenuNewSidebarItemMainMenuProps) => {
   const { t } = useLingui();
+  const theme = useTheme();
   const { handleAddFolder } = useAddFolderToNavigationMenu();
   const { handleAddLink } = useAddLinkToNavigationMenu();
 
@@ -46,7 +49,12 @@ export const CommandMenuNewSidebarItemMainMenu = ({
               <CommandMenuAddToNavDraggablePlaceholder index={0}>
                 <SelectableListItem itemId="object" onEnter={onSelectObject}>
                   <CommandMenuItem
-                    Icon={IconCube}
+                    Icon={() => (
+                      <NavigationMenuItemStyleIcon
+                        Icon={IconBuildingSkyscraper}
+                        color="blue"
+                      />
+                    )}
                     label={t`Object`}
                     id="object"
                     hasSubMenu={true}
@@ -57,7 +65,12 @@ export const CommandMenuNewSidebarItemMainMenu = ({
               <CommandMenuAddToNavDraggablePlaceholder index={1}>
                 <SelectableListItem itemId="view" onEnter={onSelectView}>
                   <CommandMenuItem
-                    Icon={IconList}
+                    Icon={() => (
+                      <NavigationMenuItemStyleIcon
+                        Icon={IconTable}
+                        color="gray"
+                      />
+                    )}
                     label={t`View`}
                     id="view"
                     hasSubMenu={true}
@@ -68,7 +81,13 @@ export const CommandMenuNewSidebarItemMainMenu = ({
               <CommandMenuAddToNavDraggablePlaceholder index={2}>
                 <SelectableListItem itemId="record" onEnter={onSelectRecord}>
                   <CommandMenuItem
-                    Icon={IconAddressBook}
+                    Icon={() => (
+                      <Avatar
+                        placeholder="L"
+                        type="rounded"
+                        backgroundColor={theme.color.green4}
+                      />
+                    )}
                     label={t`Record`}
                     id="record"
                     hasSubMenu={true}

packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuNewSidebarItemObjectFlow.tsx

@@ -6,6 +6,7 @@ import { CommandMenuObjectPickerSubView } from '@/command-menu/pages/navigation-
 import { CommandMenuSystemObjectPickerSubView } from '@/command-menu/pages/navigation-menu-item/components/CommandMenuSystemObjectPickerSubView';
 import { getAvailableObjectMetadataForNewSidebarItem } from '@/command-menu/pages/navigation-menu-item/utils/getAvailableObjectMetadataForNewSidebarItem';
 import { useAddObjectToNavigationMenuDraft } from '@/navigation-menu-item/hooks/useAddObjectToNavigationMenuDraft';
+import { getStandardObjectIconColor } from '@/navigation-menu-item/utils/getStandardObjectIconColor';
 import { useDraftNavigationMenuItems } from '@/navigation-menu-item/hooks/useDraftNavigationMenuItems';
 import { useNavigationMenuObjectMetadataFromDraft } from '@/navigation-menu-item/hooks/useNavigationMenuObjectMetadataFromDraft';
 import { addMenuItemInsertionContextStateV2 } from '@/navigation-menu-item/states/addMenuItemInsertionContextStateV2';
@@ -67,6 +68,7 @@ export const CommandMenuNewSidebarItemObjectFlow = ({
       currentDraft,
       addMenuItemInsertionContext?.targetFolderId,
       addMenuItemInsertionContext?.targetIndex,
+      getStandardObjectIconColor(objectMetadataItem.nameSingular),
     );
     setAddMenuItemInsertionContext(null);
     closeCommandMenu();

packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuNewSidebarItemViewObjectPickerSubView.tsx

@@ -1,4 +1,3 @@
-import { useTheme } from '@emotion/react';
 import { useLingui } from '@lingui/react/macro';
 import { IconSettings, useIcons } from 'twenty-ui/display';
 
@@ -7,8 +6,8 @@ import { CommandMenuItem } from '@/command-menu/components/CommandMenuItem';
 import { CommandMenuList } from '@/command-menu/components/CommandMenuList';
 import { CommandMenuSubViewWithSearch } from '@/command-menu/components/CommandMenuSubViewWithSearch';
 import { useFilteredPickerItems } from '@/command-menu/hooks/useFilteredPickerItems';
-import { IconWithBackground } from '@/navigation-menu-item/components/IconWithBackground';
-import { getNavigationMenuItemIconColors } from '@/navigation-menu-item/utils/getNavigationMenuItemIconColors';
+import { NavigationMenuItemStyleIcon } from '@/navigation-menu-item/components/NavigationMenuItemStyleIcon';
+import { getStandardObjectIconColor } from '@/navigation-menu-item/utils/getStandardObjectIconColor';
 import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
 
@@ -32,9 +31,7 @@ export const CommandMenuNewSidebarItemViewObjectPickerSubView = ({
   showSystemObjectsOption = true,
 }: CommandMenuNewSidebarItemViewObjectPickerSubViewProps) => {
   const { t } = useLingui();
-  const theme = useTheme();
   const { getIcon } = useIcons();
-  const iconColors = getNavigationMenuItemIconColors(theme);
   const { filteredItems, selectableItemIds, isEmpty, hasSearchQuery } =
     useFilteredPickerItems({
       items: objects,
@@ -68,12 +65,12 @@ export const CommandMenuNewSidebarItemViewObjectPickerSubView = ({
               onEnter={() => onSelectObject(objectMetadataItem)}
             >
               <CommandMenuItem
-                Icon={({ size, stroke }) => (
-                  <IconWithBackground
+                Icon={() => (
+                  <NavigationMenuItemStyleIcon
                     Icon={getIcon(objectMetadataItem.icon)}
-                    backgroundColor={iconColors.object}
-                    size={size}
-                    stroke={stroke}
+                    color={getStandardObjectIconColor(
+                      objectMetadataItem.nameSingular,
+                    )}
                   />
                 )}
                 label={objectMetadataItem.labelPlural}
@@ -86,7 +83,7 @@ export const CommandMenuNewSidebarItemViewObjectPickerSubView = ({
           {showSystemObjectsOption && (
             <SelectableListItem itemId="system" onEnter={onOpenSystemPicker}>
               <CommandMenuItem
-                Icon={IconSettings}
+                Icon={() => <NavigationMenuItemStyleIcon Icon={IconSettings} />}
                 label={t`System objects`}
                 id="system"
                 hasSubMenu={true}

packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuNewSidebarItemViewPickerSubView.tsx

@@ -9,16 +9,17 @@ import { CommandMenuList } from '@/command-menu/components/CommandMenuList';
 import { CommandMenuSubViewWithSearch } from '@/command-menu/components/CommandMenuSubViewWithSearch';
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { useFilteredPickerItems } from '@/command-menu/hooks/useFilteredPickerItems';
-import { useDraftNavigationMenuItems } from '@/navigation-menu-item/hooks/useDraftNavigationMenuItems';
 import { ObjectIconWithViewOverlay } from '@/navigation-menu-item/components/ObjectIconWithViewOverlay';
 import { NavigationMenuItemType } from '@/navigation-menu-item/constants/NavigationMenuItemType';
 import { useAddViewToNavigationMenuDraft } from '@/navigation-menu-item/hooks/useAddViewToNavigationMenuDraft';
+import { useDraftNavigationMenuItems } from '@/navigation-menu-item/hooks/useDraftNavigationMenuItems';
 import { useNavigationMenuObjectMetadataFromDraft } from '@/navigation-menu-item/hooks/useNavigationMenuObjectMetadataFromDraft';
 import { addMenuItemInsertionContextStateV2 } from '@/navigation-menu-item/states/addMenuItemInsertionContextStateV2';
-import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
-import { useSetRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilStateV2';
+import { getStandardObjectIconColor } from '@/navigation-menu-item/utils/getStandardObjectIconColor';
 import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
 import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
+import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
+import { useSetRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilStateV2';
 import { type View } from '@/views/types/View';
 import { ViewKey } from '@/views/types/ViewKey';
 
@@ -80,6 +81,9 @@ export const CommandMenuNewSidebarItemViewPickerSubView = ({
       currentDraft,
       addMenuItemInsertionContext?.targetFolderId ?? null,
       addMenuItemInsertionContext?.targetIndex,
+      selectedObjectMetadataItem
+        ? getStandardObjectIconColor(selectedObjectMetadataItem.nameSingular)
+        : undefined,
     );
     setAddMenuItemInsertionContext(null);
     closeCommandMenu();
@@ -118,6 +122,9 @@ export const CommandMenuNewSidebarItemViewPickerSubView = ({
                               selectedObjectMetadataItem.icon,
                             )}
                             ViewIcon={getIcon(view.icon)}
+                            objectColor={getStandardObjectIconColor(
+                              selectedObjectMetadataItem.nameSingular,
+                            )}
                           />
                         ) : undefined
                       }

packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuNewSidebarItemViewSystemSubView.tsx

@@ -1,4 +1,3 @@
-import { useTheme } from '@emotion/react';
 import { useLingui } from '@lingui/react/macro';
 import { useIcons } from 'twenty-ui/display';
 
@@ -6,9 +5,9 @@ import { CommandGroup } from '@/command-menu/components/CommandGroup';
 import { CommandMenuItem } from '@/command-menu/components/CommandMenuItem';
 import { CommandMenuList } from '@/command-menu/components/CommandMenuList';
 import { CommandMenuSubViewWithSearch } from '@/command-menu/components/CommandMenuSubViewWithSearch';
-import { IconWithBackground } from '@/navigation-menu-item/components/IconWithBackground';
-import { getNavigationMenuItemIconColors } from '@/navigation-menu-item/utils/getNavigationMenuItemIconColors';
 import { useFilteredPickerItems } from '@/command-menu/hooks/useFilteredPickerItems';
+import { NavigationMenuItemStyleIcon } from '@/navigation-menu-item/components/NavigationMenuItemStyleIcon';
+import { getStandardObjectIconColor } from '@/navigation-menu-item/utils/getStandardObjectIconColor';
 import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
 
@@ -28,9 +27,7 @@ export const CommandMenuNewSidebarItemViewSystemSubView = ({
   onSelectObject,
 }: CommandMenuNewSidebarItemViewSystemSubViewProps) => {
   const { t } = useLingui();
-  const theme = useTheme();
   const { getIcon } = useIcons();
-  const iconColors = getNavigationMenuItemIconColors(theme);
   const {
     filteredItems: filteredSystemObjectMetadataItems,
     selectableItemIds,
@@ -67,12 +64,12 @@ export const CommandMenuNewSidebarItemViewSystemSubView = ({
               onEnter={() => onSelectObject(objectMetadataItem)}
             >
               <CommandMenuItem
-                Icon={({ size, stroke }) => (
-                  <IconWithBackground
+                Icon={() => (
+                  <NavigationMenuItemStyleIcon
                     Icon={getIcon(objectMetadataItem.icon)}
-                    backgroundColor={iconColors.object}
-                    size={size}
-                    stroke={stroke}
+                    color={getStandardObjectIconColor(
+                      objectMetadataItem.nameSingular,
+                    )}
                   />
                 )}
                 label={objectMetadataItem.labelPlural}

packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuObjectMenuItem.tsx

@@ -1,13 +1,12 @@
-import { useTheme } from '@emotion/react';
 import { useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
 import { useIcons } from 'twenty-ui/display';
 
 import { CommandMenuItem } from '@/command-menu/components/CommandMenuItem';
 import { CommandMenuItemWithAddToNavigationDrag } from '@/command-menu/components/CommandMenuItemWithAddToNavigationDrag';
-import { IconWithBackground } from '@/navigation-menu-item/components/IconWithBackground';
+import { NavigationMenuItemStyleIcon } from '@/navigation-menu-item/components/NavigationMenuItemStyleIcon';
 import { NavigationMenuItemType } from '@/navigation-menu-item/constants/NavigationMenuItemType';
-import { getNavigationMenuItemIconColors } from '@/navigation-menu-item/utils/getNavigationMenuItemIconColors';
+import { getStandardObjectIconColor } from '@/navigation-menu-item/utils/getStandardObjectIconColor';
 import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
 import { coreIndexViewIdFromObjectMetadataItemFamilySelector } from '@/views/states/selectors/coreIndexViewIdFromObjectMetadataItemFamilySelector';
@@ -28,15 +27,14 @@ export const CommandMenuObjectMenuItem = ({
   variant,
   dragIndex,
 }: CommandMenuObjectMenuItemProps) => {
-  const theme = useTheme();
   const { getIcon } = useIcons();
-  const iconColors = getNavigationMenuItemIconColors(theme);
   const defaultViewId = useRecoilValue(
     coreIndexViewIdFromObjectMetadataItemFamilySelector({
       objectMetadataItemId: objectMetadataItem.id,
     }),
   );
   const Icon = getIcon(objectMetadataItem.icon);
+  const iconColor = getStandardObjectIconColor(objectMetadataItem.nameSingular);
   const isDisabled = !isDefined(defaultViewId);
 
   const handleClick = () => {
@@ -46,11 +44,15 @@ export const CommandMenuObjectMenuItem = ({
     onSelect(objectMetadataItem, defaultViewId);
   };
 
+  const styledIcon = () => (
+    <NavigationMenuItemStyleIcon Icon={Icon} color={iconColor} />
+  );
+
   return (
     <SelectableListItem itemId={objectMetadataItem.id} onEnter={handleClick}>
       {variant === 'add' && !isDisabled ? (
         <CommandMenuItemWithAddToNavigationDrag
-          icon={Icon}
+          icon={styledIcon}
           label={objectMetadataItem.labelPlural}
           id={objectMetadataItem.id}
           onClick={handleClick}
@@ -60,18 +62,12 @@ export const CommandMenuObjectMenuItem = ({
             objectMetadataId: objectMetadataItem.id,
             defaultViewId: defaultViewId ?? '',
             label: objectMetadataItem.labelPlural,
+            iconColor,
           }}
         />
       ) : (
         <CommandMenuItem
-          Icon={({ size, stroke }) => (
-            <IconWithBackground
-              Icon={Icon}
-              backgroundColor={iconColors.object}
-              size={size}
-              stroke={stroke}
-            />
-          )}
+          Icon={styledIcon}
           label={objectMetadataItem.labelPlural}
           id={objectMetadataItem.id}
           onClick={handleClick}

packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuObjectPickerItem.tsx

@@ -1,11 +1,10 @@
-import { useTheme } from '@emotion/react';
 import { isDefined } from 'twenty-shared/utils';
 import { useIcons } from 'twenty-ui/display';
 
 import { CommandMenuItem } from '@/command-menu/components/CommandMenuItem';
 import { CommandMenuObjectMenuItem } from '@/command-menu/pages/navigation-menu-item/components/CommandMenuObjectMenuItem';
-import { IconWithBackground } from '@/navigation-menu-item/components/IconWithBackground';
-import { getNavigationMenuItemIconColors } from '@/navigation-menu-item/utils/getNavigationMenuItemIconColors';
+import { NavigationMenuItemStyleIcon } from '@/navigation-menu-item/components/NavigationMenuItemStyleIcon';
+import { getStandardObjectIconColor } from '@/navigation-menu-item/utils/getStandardObjectIconColor';
 import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
 
@@ -29,9 +28,7 @@ export const CommandMenuObjectPickerItem = ({
   objectMenuItemVariant = 'edit',
   dragIndex,
 }: CommandMenuObjectPickerItemProps) => {
-  const theme = useTheme();
   const { getIcon } = useIcons();
-  const iconColors = getNavigationMenuItemIconColors(theme);
 
   if (isViewItem && isDefined(onSelectObjectForViewEdit)) {
     return (
@@ -40,12 +37,12 @@ export const CommandMenuObjectPickerItem = ({
         onEnter={() => onSelectObjectForViewEdit(objectMetadataItem)}
       >
         <CommandMenuItem
-          Icon={({ size, stroke }) => (
-            <IconWithBackground
+          Icon={() => (
+            <NavigationMenuItemStyleIcon
               Icon={getIcon(objectMetadataItem.icon)}
-              backgroundColor={iconColors.object}
-              size={size}
-              stroke={stroke}
+              color={getStandardObjectIconColor(
+                objectMetadataItem.nameSingular,
+              )}
             />
           )}
           label={objectMetadataItem.labelPlural}

packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuObjectPickerSubView.tsx

@@ -9,6 +9,7 @@ import { CommandMenuList } from '@/command-menu/components/CommandMenuList';
 import { CommandMenuSubViewWithSearch } from '@/command-menu/components/CommandMenuSubViewWithSearch';
 import { useFilteredPickerItems } from '@/command-menu/hooks/useFilteredPickerItems';
 import { CommandMenuObjectPickerItem } from '@/command-menu/pages/navigation-menu-item/components/CommandMenuObjectPickerItem';
+import { NavigationMenuItemStyleIcon } from '@/navigation-menu-item/components/NavigationMenuItemStyleIcon';
 import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
 
@@ -72,10 +73,10 @@ export const CommandMenuObjectPickerSubView = ({
         <CommandMenuAddToNavDraggablePlaceholder index={filteredItems.length}>
           <SelectableListItem itemId="system" onEnter={onOpenSystemPicker}>
             <CommandMenuItem
-              Icon={IconSettings}
+              Icon={() => <NavigationMenuItemStyleIcon Icon={IconSettings} />}
               label={t`System objects`}
               id="system"
-              hasSubMenu={true}
+              hasSubMenu
               onClick={onOpenSystemPicker}
             />
           </SelectableListItem>
@@ -83,10 +84,10 @@ export const CommandMenuObjectPickerSubView = ({
       ) : (
         <SelectableListItem itemId="system" onEnter={onOpenSystemPicker}>
           <CommandMenuItem
-            Icon={IconSettings}
+            Icon={() => <NavigationMenuItemStyleIcon Icon={IconSettings} />}
             label={t`System objects`}
             id="system"
-            hasSubMenu={true}
+            hasSubMenu
             onClick={onOpenSystemPicker}
           />
         </SelectableListItem>

packages/twenty-front/src/modules/navigation-menu-item/components/AddToNavigationDragHandle.tsx

@@ -1,12 +1,15 @@
 import { css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { isNonEmptyString } from '@sniptt/guards';
 import type { ReactNode } from 'react';
 import { isDefined } from 'twenty-shared/utils';
 import { IconGripVertical, type IconComponent } from 'twenty-ui/display';
 
-import { StyledNavigationMenuItemIconContainer } from '@/navigation-menu-item/components/NavigationMenuItemIconContainer';
+import { NavigationMenuItemStyleIcon } from '@/navigation-menu-item/components/NavigationMenuItemStyleIcon';
+import { DEFAULT_NAVIGATION_MENU_ITEM_COLOR_FOLDER } from '@/navigation-menu-item/constants/NavigationMenuItemDefaultColorFolder';
+import { DEFAULT_NAVIGATION_MENU_ITEM_COLOR_LINK } from '@/navigation-menu-item/constants/NavigationMenuItemDefaultColorLink';
+import { NavigationMenuItemType } from '@/navigation-menu-item/constants/NavigationMenuItemType';
 import type { AddToNavigationDragPayload } from '@/navigation-menu-item/types/add-to-navigation-drag-payload';
-import { getIconBackgroundColorForPayload } from '@/navigation-menu-item/utils/getIconBackgroundColorForPayload';
 
 const StyledIconSlot = styled.div<{ $hasFixedSize: boolean }>`
   align-items: center;
@@ -18,8 +21,8 @@ const StyledIconSlot = styled.div<{ $hasFixedSize: boolean }>`
   ${({ theme, $hasFixedSize }) =>
     $hasFixedSize &&
     css`
-      height: ${theme.spacing(4.5)};
-      width: ${theme.spacing(4.5)};
+      height: ${theme.spacing(4)};
+      width: ${theme.spacing(4)};
     `}
 
   &:active {
@@ -30,11 +33,13 @@ const StyledIconSlot = styled.div<{ $hasFixedSize: boolean }>`
 type AddToNavigationDragHandleIconProps = {
   icon?: IconComponent;
   customIconContent?: ReactNode;
+  iconColor?: string;
 };
 
 const AddToNavigationDragHandleIcon = ({
   icon,
   customIconContent,
+  iconColor,
 }: AddToNavigationDragHandleIconProps) => {
   const theme = useTheme();
   const iconSize = theme.icon.size.md;
@@ -47,7 +52,11 @@ const AddToNavigationDragHandleIcon = ({
   if (isDefined(icon)) {
     const Icon = icon;
     return (
-      <Icon size={iconSize} stroke={iconStroke} color={theme.grayScale.gray1} />
+      <Icon
+        size={iconSize}
+        stroke={iconStroke}
+        color={iconColor ?? theme.grayScale.gray1}
+      />
     );
   }
 };
@@ -66,37 +75,34 @@ export const AddToNavigationDragHandle = ({
   isHovered,
 }: AddToNavigationDragHandleProps) => {
   const theme = useTheme();
-  const iconBackgroundColor = getIconBackgroundColorForPayload(payload, theme);
-  const hasBackgroundColor = !!iconBackgroundColor && !isHovered;
-  const payloadHasBackgroundColor = !!iconBackgroundColor;
-  const iconSize = theme.icon.size.md;
-  const iconStroke = theme.icon.stroke.sm;
-
+  const effectiveColor =
+    payload.type === 'object' && isNonEmptyString(payload.iconColor)
+      ? payload.iconColor
+      : payload.type === 'folder'
+        ? DEFAULT_NAVIGATION_MENU_ITEM_COLOR_FOLDER
+        : payload.type === 'link'
+          ? DEFAULT_NAVIGATION_MENU_ITEM_COLOR_LINK
+          : undefined;
+  const hasBackgroundColor =
+    payload.type !== NavigationMenuItemType.RECORD &&
+    isDefined(effectiveColor) &&
+    !isHovered;
   const showCustomContentWithoutWrapper = isDefined(customIconContent);
 
   return (
     <StyledIconSlot
-      $hasFixedSize={
-        payloadHasBackgroundColor || showCustomContentWithoutWrapper
-      }
+      $hasFixedSize={hasBackgroundColor || showCustomContentWithoutWrapper}
     >
       {isHovered ? (
         <IconGripVertical
-          size={iconSize}
-          stroke={iconStroke}
+          size={theme.icon.size.md}
+          stroke={theme.icon.stroke.sm}
           color={theme.font.color.tertiary}
         />
       ) : showCustomContentWithoutWrapper ? (
         customIconContent
-      ) : hasBackgroundColor ? (
-        <StyledNavigationMenuItemIconContainer
-          $backgroundColor={iconBackgroundColor}
-        >
-          <AddToNavigationDragHandleIcon
-            icon={icon}
-            customIconContent={customIconContent}
-          />
-        </StyledNavigationMenuItemIconContainer>
+      ) : hasBackgroundColor && icon ? (
+        <NavigationMenuItemStyleIcon Icon={icon} color={effectiveColor} />
       ) : (
         <AddToNavigationDragHandleIcon
           icon={icon}

packages/twenty-front/src/modules/navigation-menu-item/components/CurrentWorkspaceMemberNavigationMenuItems.tsx

@@ -1,4 +1,3 @@
-import { useTheme } from '@emotion/react';
 import { Droppable } from '@hello-pangea/dnd';
 import { useLingui } from '@lingui/react/macro';
 import { useContext, useState } from 'react';
@@ -10,7 +9,6 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
 import { IconFolder, IconFolderOpen, IconHeartOff } from 'twenty-ui/display';
 
-import { getNavigationMenuItemIconColors } from '@/navigation-menu-item/utils/getNavigationMenuItemIconColors';
 import { LightIconButton } from 'twenty-ui/input';
 import { AnimatedExpandableContainer } from 'twenty-ui/layout';
 import { useIsMobile } from 'twenty-ui/utilities';
@@ -19,6 +17,7 @@ import { NavigationItemDropTarget } from '@/navigation-menu-item/components/Navi
 import { NavigationMenuItemDroppable } from '@/navigation-menu-item/components/NavigationMenuItemDroppable';
 import { NavigationMenuItemFolderNavigationDrawerItemDropdown } from '@/navigation-menu-item/components/NavigationMenuItemFolderNavigationDrawerItemDropdown';
 import { NavigationMenuItemIcon } from '@/navigation-menu-item/components/NavigationMenuItemIcon';
+import { DEFAULT_NAVIGATION_MENU_ITEM_COLOR_FOLDER } from '@/navigation-menu-item/constants/NavigationMenuItemDefaultColorFolder';
 import { NAVIGATION_MENU_ITEM_FOLDER_DELETE_MODAL_ID } from '@/navigation-menu-item/constants/NavigationMenuItemFolderDeleteModalId';
 import { NavigationMenuItemType } from '@/navigation-menu-item/constants/NavigationMenuItemType';
 import { NavigationMenuItemDragContext } from '@/navigation-menu-item/contexts/NavigationMenuItemDragContext';
@@ -26,7 +25,7 @@ import { useDeleteNavigationMenuItem } from '@/navigation-menu-item/hooks/useDel
 import { useDeleteNavigationMenuItemFolder } from '@/navigation-menu-item/hooks/useDeleteNavigationMenuItemFolder';
 import { useRenameNavigationMenuItemFolder } from '@/navigation-menu-item/hooks/useRenameNavigationMenuItemFolder';
 import { openNavigationMenuItemFolderIdsStateV2 } from '@/navigation-menu-item/states/openNavigationMenuItemFolderIdsStateV2';
-import { useRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilStateV2';
+import { getEffectiveNavigationMenuItemColor } from '@/navigation-menu-item/utils/getEffectiveNavigationMenuItemColor';
 import { getNavigationMenuItemSecondaryLabel } from '@/navigation-menu-item/utils/getNavigationMenuItemSecondaryLabel';
 import { isLocationMatchingNavigationMenuItem } from '@/navigation-menu-item/utils/isLocationMatchingNavigationMenuItem';
 import { type ProcessedNavigationMenuItem } from '@/navigation-menu-item/utils/sortNavigationMenuItems';
@@ -42,9 +41,10 @@ import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/componen
 import { NavigationDrawerItemsCollapsableContainer } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItemsCollapsableContainer';
 import { NavigationDrawerSubItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSubItem';
 import { currentNavigationMenuItemFolderIdStateV2 } from '@/ui/navigation/navigation-drawer/states/currentNavigationMenuItemFolderIdStateV2';
-import { useSetRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilStateV2';
 import { getNavigationSubItemLeftAdornment } from '@/ui/navigation/navigation-drawer/utils/getNavigationSubItemLeftAdornment';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
+import { useRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilStateV2';
+import { useSetRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilStateV2';
 import { isNonEmptyString } from '@sniptt/guards';
 import { isDefined } from 'twenty-shared/utils';
 
@@ -64,8 +64,6 @@ export const CurrentWorkspaceMemberNavigationMenuItems = ({
   isWorkspaceFolder = false,
 }: CurrentWorkspaceMemberNavigationMenuItemsProps) => {
   const { t } = useLingui();
-  const theme = useTheme();
-  const iconColors = getNavigationMenuItemIconColors(theme);
   const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
   const location = useLocation();
   const navigate = useNavigate();
@@ -233,7 +231,7 @@ export const CurrentWorkspaceMemberNavigationMenuItems = ({
               <NavigationDrawerItem
                 label={folder.folderName}
                 Icon={isOpen ? IconFolderOpen : IconFolder}
-                iconBackgroundColor={iconColors.folder}
+                iconColor={DEFAULT_NAVIGATION_MENU_ITEM_COLOR_FOLDER}
                 onClick={handleToggle}
                 rightOptions={rightOptions}
                 className="navigation-drawer-item"
@@ -300,6 +298,9 @@ export const CurrentWorkspaceMemberNavigationMenuItems = ({
                         }
                         isDragging={isDragging}
                         triggerEvent="CLICK"
+                        iconColor={getEffectiveNavigationMenuItemColor(
+                          navigationMenuItem,
+                        )}
                       />
                     }
                   />

packages/twenty-front/src/modules/navigation-menu-item/components/CurrentWorkspaceMemberOrphanNavigationMenuItems.tsx

@@ -6,13 +6,14 @@ import { IconHeartOff } from 'twenty-ui/display';
 import { LightIconButton } from 'twenty-ui/input';
 
 import { NavigationItemDropTarget } from '@/navigation-menu-item/components/NavigationItemDropTarget';
-import { NavigationSections } from '@/navigation-menu-item/constants/NavigationSections.constants';
 import { NavigationMenuItemDroppable } from '@/navigation-menu-item/components/NavigationMenuItemDroppable';
 import { NavigationMenuItemIcon } from '@/navigation-menu-item/components/NavigationMenuItemIcon';
 import { NavigationMenuItemDroppableIds } from '@/navigation-menu-item/constants/NavigationMenuItemDroppableIds';
+import { NavigationSections } from '@/navigation-menu-item/constants/NavigationSections.constants';
 import { NavigationMenuItemDragContext } from '@/navigation-menu-item/contexts/NavigationMenuItemDragContext';
 import { useDeleteNavigationMenuItem } from '@/navigation-menu-item/hooks/useDeleteNavigationMenuItem';
 import { useSortedNavigationMenuItems } from '@/navigation-menu-item/hooks/useSortedNavigationMenuItems';
+import { getEffectiveNavigationMenuItemColor } from '@/navigation-menu-item/utils/getEffectiveNavigationMenuItemColor';
 import { getNavigationMenuItemSecondaryLabel } from '@/navigation-menu-item/utils/getNavigationMenuItemSecondaryLabel';
 import { isLocationMatchingNavigationMenuItem } from '@/navigation-menu-item/utils/isLocationMatchingNavigationMenuItem';
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
@@ -71,6 +72,9 @@ export const CurrentWorkspaceMemberOrphanNavigationMenuItems = () => {
                           navigationMenuItem={navigationMenuItem}
                         />
                       )}
+                      iconColor={getEffectiveNavigationMenuItemColor(
+                        navigationMenuItem,
+                      )}
                       active={isLocationMatchingNavigationMenuItem(
                         currentPath,
                         currentViewPath,

packages/twenty-front/src/modules/navigation-menu-item/components/IconWithBackground.tsx

@@ -1,29 +0,0 @@
-import { useTheme } from '@emotion/react';
-import type { IconComponent } from 'twenty-ui/display';
-
-import { StyledNavigationMenuItemIconContainer } from '@/navigation-menu-item/components/NavigationMenuItemIconContainer';
-
-type IconWithBackgroundProps = {
-  Icon: IconComponent;
-  backgroundColor: string;
-  size?: number | string;
-  stroke?: number | string;
-};
-
-export const IconWithBackground = ({
-  Icon,
-  backgroundColor,
-  size,
-  stroke,
-}: IconWithBackgroundProps) => {
-  const theme = useTheme();
-  return (
-    <StyledNavigationMenuItemIconContainer $backgroundColor={backgroundColor}>
-      <Icon
-        size={size ?? theme.icon.size.md}
-        stroke={stroke ?? theme.icon.stroke.md}
-        color={theme.grayScale.gray1}
-      />
-    </StyledNavigationMenuItemIconContainer>
-  );
-};

packages/twenty-front/src/modules/navigation-menu-item/components/NavigationMenuItemIcon.tsx

@@ -1,4 +1,5 @@
 import { useTheme } from '@emotion/react';
+import { isNonEmptyString } from '@sniptt/guards';
 import { useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
 import { Avatar, useIcons } from 'twenty-ui/display';
@@ -7,7 +8,8 @@ import { FeatureFlagKey } from '~/generated-metadata/graphql';
 import { StyledNavigationMenuItemIconContainer } from '@/navigation-menu-item/components/NavigationMenuItemIconContainer';
 import { ObjectIconWithViewOverlay } from '@/navigation-menu-item/components/ObjectIconWithViewOverlay';
 import { NavigationMenuItemType } from '@/navigation-menu-item/constants/NavigationMenuItemType';
-import { getNavigationMenuItemIconColors } from '@/navigation-menu-item/utils/getNavigationMenuItemIconColors';
+import { getEffectiveNavigationMenuItemColor } from '@/navigation-menu-item/utils/getEffectiveNavigationMenuItemColor';
+import { getNavigationMenuItemIconStyleFromColor } from '@/navigation-menu-item/utils/get-navigation-menu-item-icon-style-from-color';
 import { type ProcessedNavigationMenuItem } from '@/navigation-menu-item/utils/sortNavigationMenuItems';
 import { useGetStandardObjectIcon } from '@/object-metadata/hooks/useGetStandardObjectIcon';
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
@@ -26,82 +28,81 @@ export const NavigationMenuItemIcon = ({
   );
   const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
   const { Icon: StandardIcon, IconColor } = useGetStandardObjectIcon(
-    navigationMenuItem.objectNameSingular || '',
+    navigationMenuItem.objectNameSingular ?? '',
   );
 
   const isRecord =
     navigationMenuItem.itemType === NavigationMenuItemType.RECORD;
-  const isLink = navigationMenuItem.itemType === NavigationMenuItemType.LINK;
-  const isObjectIndexView =
-    navigationMenuItem.itemType === NavigationMenuItemType.VIEW &&
-    navigationMenuItem.viewKey === ViewKey.Index;
   const isViewWithOverlay =
     navigationMenuItem.itemType === NavigationMenuItemType.VIEW &&
-    !isObjectIndexView;
+    navigationMenuItem.viewKey !== ViewKey.Index;
 
   const objectMetadataItem = objectMetadataItems.find(
     (item) => item.nameSingular === navigationMenuItem.objectNameSingular,
   );
-  const ObjectIconForView =
+  const objectIconForView =
     objectMetadataItem?.icon != null
       ? getIcon(objectMetadataItem.icon)
       : StandardIcon;
 
-  if (
+  const canShowViewOverlay =
     isViewWithOverlay &&
-    isDefined(ObjectIconForView) &&
-    isDefined(navigationMenuItem.Icon)
-  ) {
-    const ViewIcon = getIcon(navigationMenuItem.Icon);
+    isDefined(objectIconForView) &&
+    isDefined(navigationMenuItem.Icon);
+
+  if (canShowViewOverlay) {
     return (
       <ObjectIconWithViewOverlay
-        ObjectIcon={ObjectIconForView}
-        ViewIcon={ViewIcon}
+        ObjectIcon={objectIconForView}
+        ViewIcon={getIcon(navigationMenuItem.Icon!)}
+        objectColor={
+          isNavigationMenuItemEditingEnabled
+            ? (navigationMenuItem.color ?? undefined)
+            : undefined
+        }
       />
     );
   }
 
-  const IconToUse =
-    StandardIcon ||
+  const iconToUse =
+    StandardIcon ??
     (navigationMenuItem.Icon ? getIcon(navigationMenuItem.Icon) : undefined);
+  const effectiveColor =
+    getEffectiveNavigationMenuItemColor(navigationMenuItem);
+  const useStyledIcon =
+    isNavigationMenuItemEditingEnabled &&
+    !isRecord &&
+    isNonEmptyString(effectiveColor);
+  const iconStyle = useStyledIcon
+    ? getNavigationMenuItemIconStyleFromColor(theme, effectiveColor)
+    : null;
 
-  const placeholderColorSeed = navigationMenuItem.targetRecordId ?? undefined;
-  const iconColors = getNavigationMenuItemIconColors(theme);
-  const iconBackgroundColor = isNavigationMenuItemEditingEnabled
-    ? isRecord
-      ? undefined
-      : isLink
-        ? iconColors.link
-        : isViewWithOverlay
-          ? iconColors.view
-          : iconColors.object
-    : undefined;
-
-  const iconColorToUse = iconBackgroundColor
-    ? theme.grayScale.gray1
+  const iconColorToUse = iconStyle
+    ? iconStyle.iconColor
     : StandardIcon
       ? IconColor
       : theme.font.color.secondary;
 
   const avatar = (
     <Avatar
-      size={iconBackgroundColor ? 'sm' : 'md'}
+      size={iconStyle ? 'sm' : 'md'}
       type={navigationMenuItem.avatarType}
-      Icon={IconToUse}
+      Icon={iconToUse}
       iconColor={iconColorToUse}
       avatarUrl={navigationMenuItem.avatarUrl}
       placeholder={navigationMenuItem.labelIdentifier}
-      placeholderColorSeed={placeholderColorSeed}
+      placeholderColorSeed={navigationMenuItem.targetRecordId ?? undefined}
     />
   );
 
-  if (!iconBackgroundColor) {
+  if (!iconStyle) {
     return avatar;
   }
 
   return (
     <StyledNavigationMenuItemIconContainer
-      $backgroundColor={iconBackgroundColor}
+      $backgroundColor={iconStyle.backgroundColor}
+      $borderColor={iconStyle.borderColor}
     >
       {avatar}
     </StyledNavigationMenuItemIconContainer>

packages/twenty-front/src/modules/navigation-menu-item/components/NavigationMenuItemIconContainer.tsx

@@ -2,15 +2,19 @@ import styled from '@emotion/styled';
 
 export const StyledNavigationMenuItemIconContainer = styled.div<{
   $backgroundColor?: string;
+  $borderColor?: string;
 }>`
   align-items: center;
-  border-radius: ${({ theme }) => theme.border.radius.xs};
+  border-radius: 4px;
+  box-sizing: border-box;
   display: flex;
   flex-shrink: 0;
-  height: ${({ theme }) => theme.spacing(4.5)};
+  height: ${({ theme }) => theme.spacing(4)};
   justify-content: center;
-  width: ${({ theme }) => theme.spacing(4.5)};
+  width: ${({ theme }) => theme.spacing(4)};
 
   ${({ $backgroundColor }) =>
     $backgroundColor ? `background-color: ${$backgroundColor};` : ''}
+  ${({ $borderColor }) =>
+    $borderColor ? `border: 1px solid ${$borderColor};` : ''}
 `;

packages/twenty-front/src/modules/navigation-menu-item/components/NavigationMenuItemStyleIcon.tsx

@@ -0,0 +1,30 @@
+import { useTheme } from '@emotion/react';
+import type { IconComponent } from 'twenty-ui/display';
+
+import { StyledNavigationMenuItemIconContainer } from '@/navigation-menu-item/components/NavigationMenuItemIconContainer';
+import { getNavigationMenuItemIconStyleFromColor } from '@/navigation-menu-item/utils/get-navigation-menu-item-icon-style-from-color';
+
+export type NavigationMenuItemStyleIconProps = {
+  Icon: IconComponent;
+  color?: string | null;
+};
+
+export const NavigationMenuItemStyleIcon = ({
+  Icon,
+  color,
+}: NavigationMenuItemStyleIconProps) => {
+  const theme = useTheme();
+  const style = getNavigationMenuItemIconStyleFromColor(theme, color);
+  return (
+    <StyledNavigationMenuItemIconContainer
+      $backgroundColor={style.backgroundColor}
+      $borderColor={style.borderColor}
+    >
+      <Icon
+        size={theme.icon.size.md}
+        stroke={theme.icon.stroke.md}
+        color={style.iconColor}
+      />
+    </StyledNavigationMenuItemIconContainer>
+  );
+};

packages/twenty-front/src/modules/navigation-menu-item/components/ObjectIconWithViewOverlay.tsx

@@ -2,34 +2,40 @@ import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import type { IconComponent } from 'twenty-ui/display';
 
-import { getNavigationMenuItemIconColors } from '@/navigation-menu-item/utils/getNavigationMenuItemIconColors';
+import { getNavigationMenuItemIconStyleFromColor } from '@/navigation-menu-item/utils/get-navigation-menu-item-icon-style-from-color';
 
 const StyledCompositeContainer = styled.div`
   align-items: center;
-  border-radius: ${({ theme }) => theme.border.radius.xs};
+  border-radius: 4px;
+  box-sizing: border-box;
   display: flex;
   flex-shrink: 0;
-  height: ${({ theme }) => theme.spacing(4.5)};
+  height: 16px;
   justify-content: center;
   position: relative;
-  width: ${({ theme }) => theme.spacing(4.5)};
+  width: 16px;
 `;
 
-const StyledObjectIconWrapper = styled.div<{ $backgroundColor: string }>`
+const StyledObjectIconWrapper = styled.div<{
+  $backgroundColor: string;
+  $borderColor?: string;
+}>`
   position: absolute;
   inset: 0;
-  border-radius: ${({ theme }) => theme.border.radius.xs};
+  border-radius: 4px;
+  box-sizing: border-box;
   background-color: ${({ $backgroundColor }) => $backgroundColor};
   display: flex;
   align-items: center;
   justify-content: center;
+  ${({ $borderColor }) =>
+    $borderColor ? `border: 1px solid ${$borderColor};` : ''}
 `;
 
 const StyledViewOverlay = styled.div<{ $backgroundColor: string }>`
   align-items: center;
   background-color: ${({ $backgroundColor }) => $backgroundColor};
-  border: 1px solid ${({ theme }) => theme.background.primary};
-  border-radius: ${({ theme }) => theme.border.radius.xs};
+  border-radius: 4px;
   bottom: -7px;
   display: flex;
   height: ${({ theme }) => theme.spacing(3.5)};
@@ -42,29 +48,37 @@ const StyledViewOverlay = styled.div<{ $backgroundColor: string }>`
 export type ObjectIconWithViewOverlayProps = {
   ObjectIcon: IconComponent;
   ViewIcon: IconComponent;
+  objectColor?: string | null;
 };
 
 export const ObjectIconWithViewOverlay = ({
   ObjectIcon,
   ViewIcon,
+  objectColor,
 }: ObjectIconWithViewOverlayProps) => {
   const theme = useTheme();
-  const iconColors = getNavigationMenuItemIconColors(theme);
+  const objectStyle = getNavigationMenuItemIconStyleFromColor(
+    theme,
+    objectColor,
+  );
 
   return (
     <StyledCompositeContainer>
-      <StyledObjectIconWrapper $backgroundColor={iconColors.object}>
+      <StyledObjectIconWrapper
+        $backgroundColor={objectStyle.backgroundColor}
+        $borderColor={objectStyle.borderColor}
+      >
         <ObjectIcon
           size={theme.spacing(3.5)}
           stroke={theme.icon.stroke.md}
-          color={theme.grayScale.gray1}
+          color={objectStyle.iconColor}
         />
       </StyledObjectIconWrapper>
-      <StyledViewOverlay $backgroundColor={iconColors.view}>
+      <StyledViewOverlay $backgroundColor={theme.grayScale.gray4}>
         <ViewIcon
-          size={theme.spacing(2)}
-          stroke={theme.icon.stroke.sm}
-          color={theme.grayScale.gray1}
+          size={theme.spacing(2.5)}
+          stroke={theme.icon.stroke.lg}
+          color={theme.grayScale.gray10}
         />
       </StyledViewOverlay>
     </StyledCompositeContainer>

packages/twenty-front/src/modules/navigation-menu-item/components/WorkspaceNavigationMenuItemsFolder.tsx

@@ -1,14 +1,22 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { Droppable } from '@hello-pangea/dnd';
+import { useLingui } from '@lingui/react/macro';
 import { isNonEmptyString } from '@sniptt/guards';
 import { useContext } from 'react';
-import { isDefined } from 'twenty-shared/utils';
-
-import { useIsDropDisabledForSection } from '@/navigation-menu-item/hooks/useIsDropDisabledForSection';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
-import { IconChevronDown, IconChevronRight, useIcons } from 'twenty-ui/display';
+import { isDefined } from 'twenty-shared/utils';
+import {
+  IconChevronDown,
+  IconChevronRight,
+  IconPlus,
+  useIcons,
+} from 'twenty-ui/display';
+
+import { useNavigateCommandMenu } from '@/command-menu/hooks/useNavigateCommandMenu';
+import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
+import { useIsDropDisabledForSection } from '@/navigation-menu-item/hooks/useIsDropDisabledForSection';
 import { AnimatedExpandableContainer } from 'twenty-ui/layout';
 import { useIsMobile } from 'twenty-ui/utilities';
 
@@ -16,12 +24,13 @@ import { NavigationMenuItemDroppable } from '@/navigation-menu-item/components/N
 import { NavigationMenuItemIcon } from '@/navigation-menu-item/components/NavigationMenuItemIcon';
 import { WorkspaceNavigationMenuItemFolderDragClone } from '@/navigation-menu-item/components/WorkspaceNavigationMenuItemFolderDragClone';
 import { FOLDER_ICON_DEFAULT } from '@/navigation-menu-item/constants/FolderIconDefault';
+import { DEFAULT_NAVIGATION_MENU_ITEM_COLOR_FOLDER } from '@/navigation-menu-item/constants/NavigationMenuItemDefaultColorFolder';
 import { NavigationMenuItemDroppableIds } from '@/navigation-menu-item/constants/NavigationMenuItemDroppableIds';
 import { NavigationMenuItemType } from '@/navigation-menu-item/constants/NavigationMenuItemType';
 import { NavigationMenuItemDragContext } from '@/navigation-menu-item/contexts/NavigationMenuItemDragContext';
 import { type NavigationMenuItemClickParams } from '@/navigation-menu-item/hooks/useWorkspaceSectionItems';
+import { addMenuItemInsertionContextStateV2 } from '@/navigation-menu-item/states/addMenuItemInsertionContextStateV2';
 import { openNavigationMenuItemFolderIdsStateV2 } from '@/navigation-menu-item/states/openNavigationMenuItemFolderIdsStateV2';
-import { getNavigationMenuItemIconColors } from '@/navigation-menu-item/utils/getNavigationMenuItemIconColors';
 import { getNavigationMenuItemSecondaryLabel } from '@/navigation-menu-item/utils/getNavigationMenuItemSecondaryLabel';
 import { getObjectMetadataForNavigationMenuItem } from '@/navigation-menu-item/utils/getObjectMetadataForNavigationMenuItem';
 import { isLocationMatchingNavigationMenuItem } from '@/navigation-menu-item/utils/isLocationMatchingNavigationMenuItem';
@@ -38,8 +47,6 @@ import { useSetRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetReco
 import { coreViewsState } from '@/views/states/coreViewState';
 import { ViewKey } from '@/views/types/ViewKey';
 import { convertCoreViewToView } from '@/views/utils/convertCoreViewToView';
-import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
-import { FeatureFlagKey } from '~/generated-metadata/graphql';
 
 const StyledFolderContainer = styled.div<{ $isSelectedInEditMode: boolean }>`
   border: ${({ theme, $isSelectedInEditMode }) =>
@@ -54,7 +61,6 @@ const StyledFolderDroppableContent = styled.div<{
 }>`
   display: flex;
   flex-direction: column;
-  gap: ${({ theme }) => theme.betweenSiblingsGap};
   padding-bottom: ${({ theme, $compact }) => ($compact ? 0 : theme.spacing(2))};
 `;
 
@@ -68,6 +74,7 @@ type WorkspaceNavigationMenuItemsFolderProps = {
   folderId: string;
   folderName: string;
   folderIconKey?: string | null;
+  folderColor?: string | null;
   navigationMenuItems: ProcessedNavigationMenuItem[];
   isGroup: boolean;
   isEditMode?: boolean;
@@ -82,6 +89,7 @@ export const WorkspaceNavigationMenuItemsFolder = ({
   folderId,
   folderName,
   folderIconKey,
+  folderColor,
   navigationMenuItems,
   isGroup,
   isEditMode = false,
@@ -93,10 +101,6 @@ export const WorkspaceNavigationMenuItemsFolder = ({
 }: WorkspaceNavigationMenuItemsFolderProps) => {
   const theme = useTheme();
   const { getIcon } = useIcons();
-  const isNavigationMenuItemEditingEnabled = useIsFeatureEnabled(
-    FeatureFlagKey.IS_NAVIGATION_MENU_ITEM_EDITING_ENABLED,
-  );
-  const iconColors = getNavigationMenuItemIconColors(theme);
   const FolderIcon = getIcon(folderIconKey ?? FOLDER_ICON_DEFAULT);
   const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
   const coreViews = useRecoilValue(coreViewsState);
@@ -107,15 +111,38 @@ export const WorkspaceNavigationMenuItemsFolder = ({
   const currentViewPath = location.pathname + location.search;
   const isMobile = useIsMobile();
 
+  const { t } = useLingui();
   const [openNavigationMenuItemFolderIds, setOpenNavigationMenuItemFolderIds] =
     useRecoilStateV2(openNavigationMenuItemFolderIdsStateV2);
 
   const setCurrentFolderId = useSetRecoilStateV2(
     currentNavigationMenuItemFolderIdStateV2,
   );
+  const setAddMenuItemInsertionContext = useSetRecoilStateV2(
+    addMenuItemInsertionContextStateV2,
+  );
+  const { navigateCommandMenu } = useNavigateCommandMenu();
 
   const isOpen = openNavigationMenuItemFolderIds.includes(folderId);
 
+  const folderContentLengthForTree =
+    isEditMode && isSelectedInEditMode
+      ? navigationMenuItems.length + 1
+      : navigationMenuItems.length;
+
+  const handleAddMenuItemToFolder = () => {
+    setAddMenuItemInsertionContext({
+      targetFolderId: folderId,
+      targetIndex: navigationMenuItems.length,
+    });
+    navigateCommandMenu({
+      page: CommandMenuPages.NavigationMenuAddItem,
+      pageTitle: t`New sidebar item`,
+      pageIcon: IconPlus,
+      resetNavigationStack: true,
+    });
+  };
+
   const handleToggle = () => {
     if (isMobile) {
       setCurrentFolderId((prev) => (prev === folderId ? null : folderId));
@@ -163,8 +190,10 @@ export const WorkspaceNavigationMenuItemsFolder = ({
           <NavigationDrawerItem
             label={folderName}
             Icon={FolderIcon}
-            iconBackgroundColor={
-              isNavigationMenuItemEditingEnabled ? iconColors.folder : undefined
+            iconColor={
+              isDefined(folderColor)
+                ? folderColor
+                : DEFAULT_NAVIGATION_MENU_ITEM_COLOR_FOLDER
             }
             onClick={handleClick}
             className="navigation-drawer-item"
@@ -287,8 +316,7 @@ export const WorkspaceNavigationMenuItemsFolder = ({
                             }
                             subItemState={getNavigationSubItemLeftAdornment({
                               index,
-                              arrayLength:
-                                navigationMenuItemFolderContentLength,
+                              arrayLength: folderContentLengthForTree,
                               selectedIndex: selectedNavigationMenuItemIndex,
                             })}
                             isDragging={isContextDragging}
@@ -302,6 +330,19 @@ export const WorkspaceNavigationMenuItemsFolder = ({
                 </StyledFolderDroppableContent>
               )}
             </Droppable>
+            {isEditMode && isSelectedInEditMode && (
+              <NavigationDrawerSubItem
+                label={t`Add menu item`}
+                Icon={IconPlus}
+                onClick={handleAddMenuItemToFolder}
+                triggerEvent="CLICK"
+                subItemState={getNavigationSubItemLeftAdornment({
+                  index: navigationMenuItems.length,
+                  arrayLength: folderContentLengthForTree,
+                  selectedIndex: selectedNavigationMenuItemIndex,
+                })}
+              />
+            )}
           </AnimatedExpandableContainer>
         </StyledFolderExpandableWrapper>
       </NavigationDrawerItemsCollapsableContainer>

packages/twenty-front/src/modules/navigation-menu-item/constants/NavigationMenuItemDefaultColorFolder.ts

@@ -0,0 +1 @@
+export const DEFAULT_NAVIGATION_MENU_ITEM_COLOR_FOLDER = 'orange';

packages/twenty-front/src/modules/navigation-menu-item/constants/NavigationMenuItemDefaultColorLink.ts

@@ -0,0 +1 @@
+export const DEFAULT_NAVIGATION_MENU_ITEM_COLOR_LINK = 'red';

packages/twenty-front/src/modules/navigation-menu-item/constants/NavigationMenuItemDefaultIconColor.constant.ts

@@ -0,0 +1,3 @@
+import type { ThemeColor } from 'twenty-ui/theme';
+
+export const DEFAULT_NAV_ITEM_ICON_COLOR: ThemeColor = 'gray';

packages/twenty-front/src/modules/navigation-menu-item/graphql/fragments/navigationMenuItemFragment.ts

@@ -11,6 +11,7 @@ export const NAVIGATION_MENU_ITEM_FRAGMENT = gql`
     name
     link
     icon
+    color
     position
     applicationId
     createdAt

packages/twenty-front/src/modules/navigation-menu-item/hooks/useAddFolderToNavigationMenuDraft.ts

@@ -2,6 +2,7 @@ import { v4 } from 'uuid';
 import { isDefined } from 'twenty-shared/utils';
 import type { NavigationMenuItem } from '~/generated-metadata/graphql';
 
+import { DEFAULT_NAVIGATION_MENU_ITEM_COLOR_FOLDER } from '@/navigation-menu-item/constants/NavigationMenuItemDefaultColorFolder';
 import { navigationMenuItemsDraftStateV2 } from '@/navigation-menu-item/states/navigationMenuItemsDraftStateV2';
 import { useSetRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilStateV2';
 import { computeInsertIndexAndPosition } from '@/navigation-menu-item/utils/computeInsertIndexAndPosition';
@@ -43,6 +44,7 @@ export const useAddFolderToNavigationMenuDraft = () => {
       position,
       userWorkspaceId: undefined,
       name: name.trim(),
+      color: DEFAULT_NAVIGATION_MENU_ITEM_COLOR_FOLDER,
       applicationId: undefined,
       createdAt: new Date().toISOString(),
       updatedAt: new Date().toISOString(),

packages/twenty-front/src/modules/navigation-menu-item/hooks/useAddLinkToNavigationMenuDraft.ts

@@ -2,6 +2,7 @@ import { isDefined } from 'twenty-shared/utils';
 import { v4 } from 'uuid';
 import type { NavigationMenuItem } from '~/generated-metadata/graphql';
 
+import { DEFAULT_NAVIGATION_MENU_ITEM_COLOR_LINK } from '@/navigation-menu-item/constants/NavigationMenuItemDefaultColorLink';
 import { navigationMenuItemsDraftStateV2 } from '@/navigation-menu-item/states/navigationMenuItemsDraftStateV2';
 import { useSetRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilStateV2';
 import { computeInsertIndexAndPosition } from '@/navigation-menu-item/utils/computeInsertIndexAndPosition';
@@ -47,6 +48,7 @@ export const useAddLinkToNavigationMenuDraft = () => {
       userWorkspaceId: undefined,
       name: label.trim() || 'Link',
       link: normalizedUrl,
+      color: DEFAULT_NAVIGATION_MENU_ITEM_COLOR_LINK,
       applicationId: undefined,
       createdAt: new Date().toISOString(),
       updatedAt: new Date().toISOString(),

packages/twenty-front/src/modules/navigation-menu-item/hooks/useAddObjectToNavigationMenuDraft.ts

@@ -1,10 +1,10 @@
-import { v4 } from 'uuid';
 import { isDefined } from 'twenty-shared/utils';
+import { v4 } from 'uuid';
 import type { NavigationMenuItem } from '~/generated-metadata/graphql';
 
 import { navigationMenuItemsDraftStateV2 } from '@/navigation-menu-item/states/navigationMenuItemsDraftStateV2';
-import { useSetRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilStateV2';
 import { computeInsertIndexAndPosition } from '@/navigation-menu-item/utils/computeInsertIndexAndPosition';
+import { useSetRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilStateV2';
 
 export const useAddObjectToNavigationMenuDraft = () => {
   const setNavigationMenuItemsDraft = useSetRecoilStateV2(
@@ -17,6 +17,7 @@ export const useAddObjectToNavigationMenuDraft = () => {
     currentDraft: NavigationMenuItem[],
     targetFolderId?: string | null,
     targetIndex?: number,
+    color?: string | null,
   ): string => {
     const folderId = targetFolderId ?? null;
 
@@ -45,6 +46,7 @@ export const useAddObjectToNavigationMenuDraft = () => {
       folderId: folderId ?? undefined,
       name: undefined,
       applicationId: undefined,
+      color,
       createdAt: new Date().toISOString(),
       updatedAt: new Date().toISOString(),
     };

packages/twenty-front/src/modules/navigation-menu-item/hooks/useAddViewToNavigationMenuDraft.ts

@@ -1,10 +1,10 @@
-import { v4 } from 'uuid';
 import { isDefined } from 'twenty-shared/utils';
+import { v4 } from 'uuid';
 import type { NavigationMenuItem } from '~/generated-metadata/graphql';
 
 import { navigationMenuItemsDraftStateV2 } from '@/navigation-menu-item/states/navigationMenuItemsDraftStateV2';
-import { useSetRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilStateV2';
 import { computeInsertIndexAndPosition } from '@/navigation-menu-item/utils/computeInsertIndexAndPosition';
+import { useSetRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilStateV2';
 
 export const useAddViewToNavigationMenuDraft = () => {
   const setNavigationMenuItemsDraft = useSetRecoilStateV2(
@@ -16,6 +16,7 @@ export const useAddViewToNavigationMenuDraft = () => {
     currentDraft: NavigationMenuItem[],
     targetFolderId?: string | null,
     targetIndex?: number,
+    color?: string | null,
   ): string => {
     const folderId = targetFolderId ?? null;
 
@@ -44,6 +45,7 @@ export const useAddViewToNavigationMenuDraft = () => {
       folderId: folderId ?? undefined,
       name: undefined,
       applicationId: undefined,
+      color,
       createdAt: new Date().toISOString(),
       updatedAt: new Date().toISOString(),
     };

packages/twenty-front/src/modules/navigation-menu-item/hooks/useDraftNavigationMenuItemsAllFolders.ts

@@ -8,7 +8,9 @@ export const useDraftNavigationMenuItemsAllFolders = () => {
     currentDraft?.filter(isNavigationMenuItemFolder).map((item) => ({
       id: item.id,
       name: item.name ?? 'Folder',
-      folderId: item.folderId ?? undefined,
+      folderId: item.folderId,
+      icon: item.icon,
+      color: item.color,
     })) ?? [];
 
   return { allFolders };

packages/twenty-front/src/modules/navigation-menu-item/hooks/useDraftNavigationMenuItemsWorkspaceFolders.ts

@@ -8,6 +8,8 @@ export const useDraftNavigationMenuItemsWorkspaceFolders = () => {
     (folder) => ({
       id: folder.id,
       name: folder.folderName,
+      icon: folder.icon,
+      color: folder.color,
     }),
   );
 

packages/twenty-front/src/modules/navigation-menu-item/hooks/useHandleAddToNavigationDrop.ts

@@ -18,14 +18,15 @@ import { isNavigationMenuInEditModeStateV2 } from '@/navigation-menu-item/states
 import { navigationMenuItemsDraftStateV2 } from '@/navigation-menu-item/states/navigationMenuItemsDraftStateV2';
 import { openNavigationMenuItemFolderIdsStateV2 } from '@/navigation-menu-item/states/openNavigationMenuItemFolderIdsStateV2';
 import { selectedNavigationMenuItemInEditModeStateV2 } from '@/navigation-menu-item/states/selectedNavigationMenuItemInEditModeStateV2';
-import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
-import { useSetRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilStateV2';
-import { useStore } from 'jotai';
+import { getStandardObjectIconColor } from '@/navigation-menu-item/utils/getStandardObjectIconColor';
 import { isWorkspaceDroppableId } from '@/navigation-menu-item/utils/isWorkspaceDroppableId';
 import { validateAndExtractWorkspaceFolderId } from '@/navigation-menu-item/utils/validateAndExtractWorkspaceFolderId';
 import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
+import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
+import { useSetRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilStateV2';
 import { coreViewsState } from '@/views/states/coreViewState';
 import { convertCoreViewToView } from '@/views/utils/convertCoreViewToView';
+import { useStore } from 'jotai';
 
 export const useHandleAddToNavigationDrop = () => {
   const { addObjectToDraft } = useAddObjectToNavigationMenuDraft();
@@ -129,15 +130,19 @@ export const useHandleAddToNavigationDrop = () => {
           return;
         }
         case NavigationMenuItemType.OBJECT: {
+          const objectMetadataItem = objectMetadataItems.find(
+            (item) => item.id === payload.objectMetadataId,
+          );
           const newItemId = addObjectToDraft(
             payload.objectMetadataId,
             payload.defaultViewId,
             currentDraft,
             folderId,
             index,
-          );
-          const objectMetadataItem = objectMetadataItems.find(
-            (item) => item.id === payload.objectMetadataId,
+            payload.iconColor ??
+              (objectMetadataItem
+                ? getStandardObjectIconColor(objectMetadataItem.nameSingular)
+                : undefined),
           );
           openEditForNewNavItem(newItemId, {
             pageTitle: objectMetadataItem?.labelPlural ?? payload.label,
@@ -148,14 +153,22 @@ export const useHandleAddToNavigationDrop = () => {
           return;
         }
         case NavigationMenuItemType.VIEW: {
+          const views = coreViews.map(convertCoreViewToView);
+          const view = views.find((v) => v.id === payload.viewId);
+          const viewObjectMetadataItem = view
+            ? objectMetadataItems.find(
+                (item) => item.id === view.objectMetadataId,
+              )
+            : undefined;
           const newItemId = addViewToDraft(
             payload.viewId,
             currentDraft,
             folderId,
             index,
+            viewObjectMetadataItem
+              ? getStandardObjectIconColor(viewObjectMetadataItem.nameSingular)
+              : undefined,
           );
-          const views = coreViews.map(convertCoreViewToView);
-          const view = views.find((v) => v.id === payload.viewId);
           openEditForNewNavItem(newItemId, {
             pageTitle: view?.name ?? payload.label,
             pageIcon: view ? getIcon(view.icon) : IconFolder,

packages/twenty-front/src/modules/navigation-menu-item/hooks/useNavigationMenuItemsByFolder.ts

@@ -15,9 +15,16 @@ import { usePrefetchedNavigationMenuItemsData } from './usePrefetchedNavigationM
 type NavigationMenuItemFolder = {
   id: string;
   folderName: string;
+  icon?: string | null;
+  color?: string | null;
   navigationMenuItems: ReturnType<typeof sortNavigationMenuItems>[number][];
 };
 
+type NavigationMenuItemFolderEntry = Pick<
+  NavigationMenuItemFolder,
+  'id' | 'folderName' | 'icon' | 'color'
+>;
+
 export const useNavigationMenuItemsByFolder = () => {
   const coreViews = useRecoilValue(coreViewsState);
   const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
@@ -34,13 +41,18 @@ export const useNavigationMenuItemsByFolder = () => {
 
   const { workspaceFolders, userFolders, itemsByFolderId } =
     allNavigationMenuItems.reduce<{
-      workspaceFolders: Array<{ id: string; name: string }>;
-      userFolders: Array<{ id: string; name: string }>;
+      workspaceFolders: NavigationMenuItemFolderEntry[];
+      userFolders: NavigationMenuItemFolderEntry[];
       itemsByFolderId: Map<string, NavigationMenuItem[]>;
     }>(
       (acc, item) => {
         if (isNavigationMenuItemFolder(item)) {
-          const folderEntry = { id: item.id, name: item.name || 'Folder' };
+          const folderEntry: NavigationMenuItemFolderEntry = {
+            id: item.id,
+            folderName: item.name || 'Folder',
+            icon: item.icon ?? undefined,
+            color: item.color ?? undefined,
+          };
           if (isDefined(item.userWorkspaceId)) {
             acc.userFolders.push(folderEntry);
           } else {
@@ -64,7 +76,7 @@ export const useNavigationMenuItemsByFolder = () => {
       },
     );
 
-  const buildFoldersList = (folders: Array<{ id: string; name: string }>) => {
+  const buildFoldersList = (folders: NavigationMenuItemFolderEntry[]) => {
     const sortedFolders = [...folders].sort((a, b) => {
       const folderA = allNavigationMenuItems.find((item) => item.id === a.id);
       const folderB = allNavigationMenuItems.find((item) => item.id === b.id);
@@ -117,7 +129,9 @@ export const useNavigationMenuItemsByFolder = () => {
 
       acc.push({
         id: folder.id,
-        folderName: folder.name,
+        folderName: folder.folderName,
+        icon: folder.icon,
+        color: folder.color,
         navigationMenuItems: sortedItems,
       });
 

packages/twenty-front/src/modules/navigation-menu-item/hooks/useSaveNavigationMenuItemsDraft.ts

@@ -12,8 +12,8 @@ import { navigationMenuItemsDraftStateV2 } from '@/navigation-menu-item/states/n
 import { filterWorkspaceNavigationMenuItems } from '@/navigation-menu-item/utils/filterWorkspaceNavigationMenuItems';
 import { isNavigationMenuItemFolder } from '@/navigation-menu-item/utils/isNavigationMenuItemFolder';
 import { isNavigationMenuItemLink } from '@/navigation-menu-item/utils/isNavigationMenuItemLink';
-import { useStore } from 'jotai';
 import { prefetchNavigationMenuItemsState } from '@/prefetch/states/prefetchNavigationMenuItemsState';
+import { useStore } from 'jotai';
 
 export const useSaveNavigationMenuItemsDraft = () => {
   const { updateNavigationMenuItem } = useUpdateNavigationMenuItem();
@@ -91,8 +91,9 @@ export const useSaveNavigationMenuItemsDraft = () => {
           };
 
           if (isNavigationMenuItemFolder(draftItem)) {
-            input.name = draftItem.name ?? undefined;
-            input.icon = draftItem.icon ?? null;
+            input.name = draftItem.name;
+            input.icon = draftItem.icon;
+            input.color = draftItem.color;
           } else if (isNavigationMenuItemLink(draftItem)) {
             input.name = draftItem.name ?? 'Link';
             const linkUrl = (draftItem.link ?? '').trim();
@@ -106,14 +107,17 @@ export const useSaveNavigationMenuItemsDraft = () => {
             input.viewId = draftItem.viewId;
           } else if (isDefined(draftItem.targetRecordId)) {
             input.targetRecordId = draftItem.targetRecordId;
-            input.targetObjectMetadataId =
-              draftItem.targetObjectMetadataId ?? undefined;
+            input.targetObjectMetadataId = draftItem.targetObjectMetadataId;
           }
 
           if (isDefined(draftItem.folderId)) {
             input.folderId = draftItem.folderId;
           }
 
+          if (isDefined(draftItem.color)) {
+            input.color = draftItem.color;
+          }
+
           await createNavigationMenuItemMutation({
             variables: { input },
           });
@@ -127,25 +131,26 @@ export const useSaveNavigationMenuItemsDraft = () => {
           if (!original) continue;
 
           const positionChanged = original.position !== draftItem.position;
-          const folderIdChanged =
-            (original.folderId ?? null) !== (draftItem.folderId ?? null);
+          const folderIdChanged = original.folderId !== draftItem.folderId;
           const nameChanged =
-            (isNavigationMenuItemFolder(draftItem) ||
-              isNavigationMenuItemLink(draftItem)) &&
-            (original.name ?? null) !== (draftItem.name ?? null);
+            isNavigationMenuItemFolder(draftItem) ||
+            (isNavigationMenuItemLink(draftItem) &&
+              original.name !== draftItem.name);
           const linkChanged =
             isNavigationMenuItemLink(draftItem) &&
-            (original.link ?? null) !== (draftItem.link ?? null);
+            original.link !== draftItem.link;
           const iconChanged =
             isNavigationMenuItemFolder(draftItem) &&
-            (original.icon ?? null) !== (draftItem.icon ?? null);
+            original.icon !== draftItem.icon;
+          const colorChanged = original.color !== draftItem.color;
 
           if (
             positionChanged ||
             folderIdChanged ||
             nameChanged ||
             linkChanged ||
-            iconChanged
+            iconChanged ||
+            colorChanged
           ) {
             const updateInput: {
               id: string;
@@ -154,6 +159,7 @@ export const useSaveNavigationMenuItemsDraft = () => {
               name?: string;
               link?: string | null;
               icon?: string | null;
+              color?: string | null;
             } = { id: draftItem.id };
 
             if (positionChanged) {
@@ -163,7 +169,7 @@ export const useSaveNavigationMenuItemsDraft = () => {
               );
             }
             if (folderIdChanged) {
-              updateInput.folderId = draftItem.folderId ?? null;
+              updateInput.folderId = draftItem.folderId;
             }
             if (nameChanged && isNavigationMenuItemFolder(draftItem)) {
               updateInput.name = draftItem.name ?? undefined;
@@ -181,7 +187,10 @@ export const useSaveNavigationMenuItemsDraft = () => {
                 : null;
             }
             if (iconChanged && isNavigationMenuItemFolder(draftItem)) {
-              updateInput.icon = draftItem.icon ?? null;
+              updateInput.icon = draftItem.icon;
+            }
+            if (colorChanged) {
+              updateInput.color = draftItem.color;
             }
 
             await updateNavigationMenuItem(updateInput);

packages/twenty-front/src/modules/navigation-menu-item/hooks/useUpdateNavigationMenuItemInDraft.ts

@@ -20,10 +20,9 @@ export const useUpdateNavigationMenuItemInDraft = () => {
     setNavigationMenuItemsDraft((draft) => {
       if (!draft) return draft;
 
-      return draft.map((item) => {
-        if (item.id !== navigationMenuItemId) return item;
-        return { ...item, ...updates };
-      });
+      return draft.map((item) =>
+        item.id === navigationMenuItemId ? { ...item, ...updates } : item,
+      );
     });
   };
 

packages/twenty-front/src/modules/navigation-menu-item/types/add-to-navigation-drag-payload.ts

@@ -3,6 +3,7 @@ export type AddToNavigationDragPayloadObject = {
   objectMetadataId: string;
   defaultViewId: string;
   label: string;
+  iconColor?: string;
 };
 
 export type AddToNavigationDragPayloadView = {

packages/twenty-front/src/modules/navigation-menu-item/utils/NavigationMenuItemIconColorShadeBackground.constant.ts

@@ -0,0 +1 @@
+export const COLOR_SHADE_BACKGROUND = 5;

packages/twenty-front/src/modules/navigation-menu-item/utils/NavigationMenuItemIconColorShadeBorder.constant.ts

@@ -0,0 +1 @@
+export const COLOR_SHADE_BORDER = 6;

packages/twenty-front/src/modules/navigation-menu-item/utils/NavigationMenuItemIconColorShadeIcon.constant.ts

@@ -0,0 +1 @@
+export const COLOR_SHADE_ICON = 11;

packages/twenty-front/src/modules/navigation-menu-item/utils/get-color-from-theme.util.ts

@@ -0,0 +1,12 @@
+import type { Theme } from '@emotion/react';
+import type { ThemeColor } from 'twenty-ui/theme';
+
+export const getColorFromTheme = (
+  theme: Theme,
+  themeColor: ThemeColor,
+  shade: number,
+): string => {
+  const colorMap = theme.color as unknown as Record<string, string>;
+  const key = `${themeColor}${shade}`;
+  return colorMap[key] ?? theme.tag.text[themeColor];
+};

packages/twenty-front/src/modules/navigation-menu-item/utils/get-navigation-menu-item-icon-border-color.ts

@@ -0,0 +1,10 @@
+import type { Theme } from '@emotion/react';
+import type { ThemeColor } from 'twenty-ui/theme';
+
+import { getColorFromTheme } from '@/navigation-menu-item/utils/get-color-from-theme.util';
+import { COLOR_SHADE_BORDER } from '@/navigation-menu-item/utils/NavigationMenuItemIconColorShadeBorder.constant';
+
+export const getNavigationMenuItemIconBorderColor = (
+  theme: Theme,
+  themeColor: ThemeColor,
+): string => getColorFromTheme(theme, themeColor, COLOR_SHADE_BORDER);

packages/twenty-front/src/modules/navigation-menu-item/utils/get-navigation-menu-item-icon-style-from-color.ts

@@ -0,0 +1,25 @@
+import type { Theme } from '@emotion/react';
+
+import { DEFAULT_NAV_ITEM_ICON_COLOR } from '@/navigation-menu-item/constants/NavigationMenuItemDefaultIconColor.constant';
+import { getColorFromTheme } from '@/navigation-menu-item/utils/get-color-from-theme.util';
+import { COLOR_SHADE_BACKGROUND } from '@/navigation-menu-item/utils/NavigationMenuItemIconColorShadeBackground.constant';
+import { COLOR_SHADE_BORDER } from '@/navigation-menu-item/utils/NavigationMenuItemIconColorShadeBorder.constant';
+import { COLOR_SHADE_ICON } from '@/navigation-menu-item/utils/NavigationMenuItemIconColorShadeIcon.constant';
+import { type NavigationMenuItemIconStyle } from '@/navigation-menu-item/utils/navigation-menu-item-icon-style.type';
+import { parseThemeColor } from '@/navigation-menu-item/utils/parseThemeColor';
+
+export const getNavigationMenuItemIconStyleFromColor = (
+  theme: Theme,
+  color: string | null | undefined,
+): NavigationMenuItemIconStyle => {
+  const themeColor = parseThemeColor(color ?? DEFAULT_NAV_ITEM_ICON_COLOR);
+  return {
+    backgroundColor: getColorFromTheme(
+      theme,
+      themeColor,
+      COLOR_SHADE_BACKGROUND,
+    ),
+    iconColor: getColorFromTheme(theme, themeColor, COLOR_SHADE_ICON),
+    borderColor: getColorFromTheme(theme, themeColor, COLOR_SHADE_BORDER),
+  };
+};

packages/twenty-front/src/modules/navigation-menu-item/utils/getEffectiveNavigationMenuItemColor.ts

@@ -0,0 +1,21 @@
+import { isNonEmptyString } from '@sniptt/guards';
+
+import { DEFAULT_NAVIGATION_MENU_ITEM_COLOR_FOLDER } from '@/navigation-menu-item/constants/NavigationMenuItemDefaultColorFolder';
+import { DEFAULT_NAVIGATION_MENU_ITEM_COLOR_LINK } from '@/navigation-menu-item/constants/NavigationMenuItemDefaultColorLink';
+import { NavigationMenuItemType } from '@/navigation-menu-item/constants/NavigationMenuItemType';
+import { type ProcessedNavigationMenuItem } from '@/navigation-menu-item/types/processed-navigation-menu-item';
+
+export const getEffectiveNavigationMenuItemColor = (
+  navigationMenuItem: ProcessedNavigationMenuItem,
+): string | undefined => {
+  if (isNonEmptyString(navigationMenuItem.color)) {
+    return navigationMenuItem.color;
+  }
+  if (navigationMenuItem.itemType === NavigationMenuItemType.FOLDER) {
+    return DEFAULT_NAVIGATION_MENU_ITEM_COLOR_FOLDER;
+  }
+  if (navigationMenuItem.itemType === NavigationMenuItemType.LINK) {
+    return DEFAULT_NAVIGATION_MENU_ITEM_COLOR_LINK;
+  }
+  return undefined;
+};

packages/twenty-front/src/modules/navigation-menu-item/utils/getIconBackgroundColorForPayload.ts

@@ -1,26 +0,0 @@
-import type { Theme } from '@emotion/react';
-
-import { NavigationMenuItemType } from '@/navigation-menu-item/constants/NavigationMenuItemType';
-import type { AddToNavigationDragPayload } from '@/navigation-menu-item/types/add-to-navigation-drag-payload';
-import { getNavigationMenuItemIconColors } from '@/navigation-menu-item/utils/getNavigationMenuItemIconColors';
-
-export const getIconBackgroundColorForPayload = (
-  payload: AddToNavigationDragPayload,
-  theme: Theme,
-): string | undefined => {
-  const colors = getNavigationMenuItemIconColors(theme);
-  switch (payload.type) {
-    case NavigationMenuItemType.OBJECT:
-      return colors.object;
-    case NavigationMenuItemType.VIEW:
-      return colors.view;
-    case NavigationMenuItemType.FOLDER:
-      return colors.folder;
-    case NavigationMenuItemType.LINK:
-      return colors.link;
-    case NavigationMenuItemType.RECORD:
-      return undefined;
-    default:
-      return undefined;
-  }
-};

packages/twenty-front/src/modules/navigation-menu-item/utils/getNavigationMenuItemIconColors.ts

@@ -1,8 +0,0 @@
-import type { Theme } from '@emotion/react';
-
-export const getNavigationMenuItemIconColors = (theme: Theme) => ({
-  folder: theme.color.orange,
-  link: theme.color.red,
-  view: theme.grayScale.gray8,
-  object: theme.color.blue,
-});

packages/twenty-front/src/modules/navigation-menu-item/utils/getStandardObjectIconColor.ts

@@ -0,0 +1,38 @@
+import { type ThemeColor, MAIN_COLOR_NAMES } from 'twenty-ui/theme';
+
+import { DEFAULT_NAV_ITEM_ICON_COLOR } from '@/navigation-menu-item/constants/NavigationMenuItemDefaultIconColor.constant';
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+
+const STANDARD_OBJECT_ICON_COLOR: Partial<
+  Record<CoreObjectNameSingular, ThemeColor>
+> = {
+  [CoreObjectNameSingular.Company]: 'blue',
+  [CoreObjectNameSingular.Person]: 'blue',
+  [CoreObjectNameSingular.Task]: 'turquoise',
+  [CoreObjectNameSingular.TaskTarget]: 'turquoise',
+  [CoreObjectNameSingular.Note]: 'turquoise',
+  [CoreObjectNameSingular.NoteTarget]: 'turquoise',
+  [CoreObjectNameSingular.Opportunity]: 'red',
+  [CoreObjectNameSingular.Dashboard]: DEFAULT_NAV_ITEM_ICON_COLOR,
+  [CoreObjectNameSingular.Workflow]: DEFAULT_NAV_ITEM_ICON_COLOR,
+  [CoreObjectNameSingular.WorkflowRun]: DEFAULT_NAV_ITEM_ICON_COLOR,
+  [CoreObjectNameSingular.WorkflowVersion]: DEFAULT_NAV_ITEM_ICON_COLOR,
+};
+
+const CUSTOM_OBJECT_ICON_COLORS: ThemeColor[] = MAIN_COLOR_NAMES.filter(
+  (color) => color !== 'gray',
+);
+
+const getColorForCustomObject = (seed: string): ThemeColor => {
+  let hash = 0;
+  for (let index = 0; index < seed.length; index += 1) {
+    hash = (hash << 5) - hash + seed.charCodeAt(index);
+    hash |= 0;
+  }
+  const index = Math.abs(hash) % CUSTOM_OBJECT_ICON_COLORS.length;
+  return CUSTOM_OBJECT_ICON_COLORS[index];
+};
+
+export const getStandardObjectIconColor = (nameSingular: string): ThemeColor =>
+  STANDARD_OBJECT_ICON_COLOR[nameSingular as CoreObjectNameSingular] ??
+  getColorForCustomObject(nameSingular);

packages/twenty-front/src/modules/navigation-menu-item/utils/navigation-menu-item-icon-style.type.ts

@@ -0,0 +1,5 @@
+export type NavigationMenuItemIconStyle = {
+  backgroundColor: string;
+  iconColor: string;
+  borderColor: string;
+};

packages/twenty-front/src/modules/navigation-menu-item/utils/parseThemeColor.ts

@@ -0,0 +1,10 @@
+import { themeColorSchema, type ThemeColor } from 'twenty-ui/theme';
+
+import { DEFAULT_NAV_ITEM_ICON_COLOR } from '@/navigation-menu-item/constants/NavigationMenuItemDefaultIconColor.constant';
+
+export const parseThemeColor = (
+  color: string | null | undefined,
+): ThemeColor => {
+  const result = themeColorSchema.safeParse(color ?? '');
+  return result.success ? result.data : DEFAULT_NAV_ITEM_ICON_COLOR;
+};

packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerItemForObjectMetadataItem.tsx

@@ -2,7 +2,7 @@ import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainCo
 import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
 import { ObjectIconWithViewOverlay } from '@/navigation-menu-item/components/ObjectIconWithViewOverlay';
 import { NavigationMenuItemType } from '@/navigation-menu-item/constants/NavigationMenuItemType';
-import { getNavigationMenuItemIconColors } from '@/navigation-menu-item/utils/getNavigationMenuItemIconColors';
+import { getStandardObjectIconColor } from '@/navigation-menu-item/utils/getStandardObjectIconColor';
 import { type ProcessedNavigationMenuItem } from '@/navigation-menu-item/utils/sortNavigationMenuItems';
 import { lastVisitedViewPerObjectMetadataItemState } from '@/navigation/states/lastVisitedViewPerObjectMetadataItemState';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
@@ -14,7 +14,6 @@ import { getNavigationSubItemLeftAdornment } from '@/ui/navigation/navigation-dr
 import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
 import { coreViewsFromObjectMetadataItemFamilySelector } from '@/views/states/selectors/coreViewsFromObjectMetadataItemFamilySelector';
 import { ViewKey } from '@/views/types/ViewKey';
-import { useTheme } from '@emotion/react';
 import { useLocation } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
 import { AppPath } from 'twenty-shared/types';
@@ -44,11 +43,9 @@ export const NavigationDrawerItemForObjectMetadataItem = ({
   onActiveItemClickWhenNotInEditMode,
   isDragging = false,
 }: NavigationDrawerItemForObjectMetadataItemProps) => {
-  const theme = useTheme();
   const isNavigationMenuItemEditingEnabled = useIsFeatureEnabled(
     FeatureFlagKey.IS_NAVIGATION_MENU_ITEM_EDITING_ENABLED,
   );
-  const iconColors = getNavigationMenuItemIconColors(theme);
   const lastVisitedViewPerObjectMetadataItem = useRecoilValue(
     lastVisitedViewPerObjectMetadataItemState,
   );
@@ -141,13 +138,17 @@ export const NavigationDrawerItemForObjectMetadataItem = ({
           <ObjectIconWithViewOverlay
             ObjectIcon={getIcon(objectMetadataItem.icon)}
             ViewIcon={getIcon(navigationMenuItem!.Icon!)}
+            objectColor={navigationMenuItem?.color}
           />
         )
       : getIcon(objectMetadataItem.icon);
 
-  const iconBackgroundColor =
-    isNavigationMenuItemEditingEnabled && !isRecord && !isViewWithCustomName
-      ? iconColors.object
+  const iconThemeColor =
+    isNavigationMenuItemEditingEnabled && !isRecord
+      ? isDefined(navigationMenuItem?.color)
+        ? navigationMenuItem.color
+        : (getStandardObjectIconColor(objectMetadataItem.nameSingular) ??
+          'gray')
       : undefined;
 
   const secondaryLabel =
@@ -222,7 +223,7 @@ export const NavigationDrawerItemForObjectMetadataItem = ({
       }
       onClick={handleClick}
       Icon={Icon}
-      iconBackgroundColor={iconBackgroundColor}
+      iconColor={iconThemeColor}
       active={isActive}
       isSelectedInEditMode={isSelectedInEditMode}
       isDragging={isDragging}

packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerSectionForWorkspaceItems.tsx

@@ -1,5 +1,4 @@
 import { NavigationDropTargetContext } from '@/navigation-menu-item/contexts/NavigationDropTargetContext';
-import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { Droppable } from '@hello-pangea/dnd';
 import { useLingui } from '@lingui/react/macro';
@@ -19,7 +18,6 @@ import {
   type FlatWorkspaceItem,
   type NavigationMenuItemClickParams,
 } from '@/navigation-menu-item/hooks/useWorkspaceSectionItems';
-import { getNavigationMenuItemIconColors } from '@/navigation-menu-item/utils/getNavigationMenuItemIconColors';
 import { getObjectMetadataForNavigationMenuItem } from '@/navigation-menu-item/utils/getObjectMetadataForNavigationMenuItem';
 import { type ProcessedNavigationMenuItem } from '@/navigation-menu-item/utils/sortNavigationMenuItems';
 import { NavigationDrawerItemForObjectMetadataItem } from '@/object-metadata/components/NavigationDrawerItemForObjectMetadataItem';
@@ -67,7 +65,6 @@ export const NavigationDrawerSectionForWorkspaceItems = ({
   onActiveObjectMetadataItemClick,
 }: NavigationDrawerSectionForWorkspaceItemsProps) => {
   const { t } = useLingui();
-  const theme = useTheme();
   const workspaceDropDisabled = useIsDropDisabledForSection(true);
   const { toggleNavigationSection, isNavigationSectionOpen } =
     useNavigationSection('Workspace');
@@ -206,6 +203,9 @@ export const NavigationDrawerSectionForWorkspaceItems = ({
                             folderId={item.id}
                             folderName={item.name ?? 'Folder'}
                             folderIconKey={item.Icon}
+                            folderColor={
+                              'color' in item ? item.color : undefined
+                            }
                             navigationMenuItems={
                               folderChildrenById.get(item.id) ?? []
                             }
@@ -231,7 +231,6 @@ export const NavigationDrawerSectionForWorkspaceItems = ({
 
                 if (type === 'link') {
                   const linkItem = item as ProcessedNavigationMenuItem;
-                  const iconColors = getNavigationMenuItemIconColors(theme);
                   return (
                     <NavigationItemDropTarget
                       key={item.id}
@@ -259,7 +258,7 @@ export const NavigationDrawerSectionForWorkspaceItems = ({
                                 : undefined
                             }
                             Icon={IconLink}
-                            iconBackgroundColor={iconColors.link}
+                            iconColor={linkItem.color}
                             active={false}
                             isSelectedInEditMode={
                               editModeProps.isSelectedInEditMode

packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageHeader.tsx

@@ -3,6 +3,7 @@ import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainCo
 import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
 import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState';
 import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
+import { RecordIndexPageHeaderIcon } from '@/object-record/record-index/components/RecordIndexPageHeaderIcon';
 import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
 import { PageHeaderToggleCommandMenuButton } from '@/ui/layout/page-header/components/PageHeaderToggleCommandMenuButton';
 import { PageHeader } from '@/ui/layout/page/components/PageHeader';
@@ -10,7 +11,6 @@ import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/ho
 import styled from '@emotion/styled';
 import { t } from '@lingui/core/macro';
 import { isDefined } from 'twenty-shared/utils';
-import { useIcons } from 'twenty-ui/display';
 
 const StyledTitleWithSelectedRecords = styled.div`
   display: flex;
@@ -41,9 +41,6 @@ export const RecordIndexPageHeader = () => {
   const objectMetadataItem =
     findObjectMetadataItemByNamePlural(objectNamePlural);
 
-  const { getIcon } = useIcons();
-  const Icon = getIcon(objectMetadataItem?.icon);
-
   const label = objectMetadataItem?.labelPlural ?? objectNamePlural;
 
   const pageHeaderTitle =
@@ -65,7 +62,12 @@ export const RecordIndexPageHeader = () => {
   );
 
   return (
-    <PageHeader title={pageHeaderTitle} Icon={Icon}>
+    <PageHeader
+      title={pageHeaderTitle}
+      Icon={() => (
+        <RecordIndexPageHeaderIcon objectMetadataItem={objectMetadataItem} />
+      )}
+    >
       {isDefined(contextStoreCurrentViewId) && (
         <>
           <RecordIndexActionMenu />

packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageHeaderIcon.tsx

@@ -0,0 +1,60 @@
+import { isNonEmptyString } from '@sniptt/guards';
+import { useRecoilValue } from 'recoil';
+
+import { NavigationMenuItemStyleIcon } from '@/navigation-menu-item/components/NavigationMenuItemStyleIcon';
+import { usePrefetchedNavigationMenuItemsData } from '@/navigation-menu-item/hooks/usePrefetchedNavigationMenuItemsData';
+import { getStandardObjectIconColor } from '@/navigation-menu-item/utils/getStandardObjectIconColor';
+import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { coreIndexViewIdFromObjectMetadataItemFamilySelector } from '@/views/states/selectors/coreIndexViewIdFromObjectMetadataItemFamilySelector';
+import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
+import { useTheme } from '@emotion/react';
+import { isDefined } from 'twenty-shared/utils';
+import { useIcons } from 'twenty-ui/display';
+import { FeatureFlagKey } from '~/generated-metadata/graphql';
+
+export const RecordIndexPageHeaderIcon = ({
+  objectMetadataItem,
+}: {
+  objectMetadataItem?: ObjectMetadataItem;
+}) => {
+  const theme = useTheme();
+  const isNavigationMenuItemEditingEnabled = useIsFeatureEnabled(
+    FeatureFlagKey.IS_NAVIGATION_MENU_ITEM_EDITING_ENABLED,
+  );
+  const { workspaceNavigationMenuItems } =
+    usePrefetchedNavigationMenuItemsData();
+  const coreIndexViewId = useRecoilValue(
+    coreIndexViewIdFromObjectMetadataItemFamilySelector({
+      objectMetadataItemId: objectMetadataItem?.id ?? '',
+    }),
+  );
+  const { getIcon } = useIcons();
+  const ObjectIcon = getIcon(objectMetadataItem?.icon);
+
+  if (!ObjectIcon) {
+    return null;
+  }
+
+  if (!isNavigationMenuItemEditingEnabled) {
+    return <ObjectIcon size={theme.icon.size.md} />;
+  }
+
+  const navItem = isDefined(coreIndexViewId)
+    ? workspaceNavigationMenuItems.find(
+        (item) => item.viewId === coreIndexViewId,
+      )
+    : undefined;
+  const navigationMenuItemColor = isNonEmptyString(navItem?.color)
+    ? navItem.color
+    : undefined;
+  const iconColor =
+    navigationMenuItemColor ??
+    getStandardObjectIconColor(objectMetadataItem?.nameSingular ?? '');
+
+  return (
+    <NavigationMenuItemStyleIcon
+      Icon={ObjectIcon}
+      color={iconColor ?? undefined}
+    />
+  );
+};

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx

@@ -1,3 +1,4 @@
+import { NavigationMenuItemStyleIcon } from '@/navigation-menu-item/components/NavigationMenuItemStyleIcon';
 import { useIsSettingsPage } from '@/navigation/hooks/useIsSettingsPage';
 import { NAVIGATION_DRAWER_COLLAPSED_WIDTH } from '@/ui/layout/resizable-panel/constants/NavigationDrawerCollapsedWidth';
 import { NavigationDrawerAnimatedCollapseWrapper } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerAnimatedCollapseWrapper';
@@ -7,10 +8,12 @@ import { type NavigationDrawerSubItemState } from '@/ui/navigation/navigation-dr
 import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { useRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilStateV2';
+import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import isPropValid from '@emotion/is-prop-valid';
 import { css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { t } from '@lingui/core/macro';
+import { isNonEmptyString } from '@sniptt/guards';
 import { type ReactNode } from 'react';
 import { Link } from 'react-router-dom';
 import { isDefined } from 'twenty-shared/utils';
@@ -29,6 +32,7 @@ import {
   type TriggerEventType,
   useMouseDownNavigation,
 } from 'twenty-ui/utilities';
+import { FeatureFlagKey } from '~/generated-metadata/graphql';
 
 const DEFAULT_INDENTATION_LEVEL = 1;
 
@@ -43,7 +47,7 @@ export type NavigationDrawerItemProps = {
   to?: string;
   onClick?: () => void;
   Icon?: IconComponent | ((props: TablerIconsProps) => JSX.Element);
-  iconBackgroundColor?: string;
+  iconColor?: string | null;
   active?: boolean;
   danger?: boolean;
   soon?: boolean;
@@ -216,7 +220,10 @@ const StyledSpacer = styled.span`
   flex-grow: 1;
 `;
 
-const StyledIcon = styled.div<{ $backgroundColor?: string }>`
+const StyledIcon = styled.div<{
+  $backgroundColor?: string;
+  $borderColor?: string;
+}>`
   align-items: center;
   display: flex;
   flex-grow: 0;
@@ -224,13 +231,15 @@ const StyledIcon = styled.div<{ $backgroundColor?: string }>`
   justify-content: center;
   margin-right: ${({ theme }) => theme.spacing(2)};
 
-  ${({ theme, $backgroundColor }) =>
+  ${({ theme, $backgroundColor, $borderColor }) =>
     $backgroundColor &&
     css`
       background-color: ${$backgroundColor};
-      border-radius: ${theme.border.radius.xs};
-      height: ${theme.spacing(4.5)};
-      width: ${theme.spacing(4.5)};
+      border-radius: 4px;
+      box-sizing: border-box;
+      height: ${theme.spacing(4)};
+      width: ${theme.spacing(4)};
+      ${$borderColor ? `border: 1px solid ${$borderColor};` : ''}
     `}
 `;
 
@@ -283,7 +292,7 @@ export const NavigationDrawerItem = ({
   secondaryLabel,
   indentationLevel = DEFAULT_INDENTATION_LEVEL,
   Icon,
-  iconBackgroundColor,
+  iconColor,
   to,
   onClick,
   active,
@@ -304,6 +313,9 @@ export const NavigationDrawerItem = ({
   const theme = useTheme();
   const isMobile = useIsMobile();
   const isSettingsPage = useIsSettingsPage();
+  const isNavigationMenuItemEditingEnabled = useIsFeatureEnabled(
+    FeatureFlagKey.IS_NAVIGATION_MENU_ITEM_EDITING_ENABLED,
+  );
   const [isNavigationDrawerExpanded, setIsNavigationDrawerExpanded] =
     useRecoilStateV2(isNavigationDrawerExpandedState);
 
@@ -375,30 +387,30 @@ export const NavigationDrawerItem = ({
             </NavigationDrawerAnimatedCollapseWrapper>
           )}
 
-          {Icon && (
-            <StyledIcon $backgroundColor={iconBackgroundColor}>
-              <Icon
-                style={{
-                  minWidth: iconBackgroundColor
-                    ? theme.spacing(3.5)
-                    : theme.icon.size.md,
-                }}
-                size={
-                  iconBackgroundColor ? theme.spacing(3.5) : theme.icon.size.md
-                }
-                stroke={theme.icon.stroke.md}
-                color={
-                  iconBackgroundColor
-                    ? theme.grayScale.gray1
-                    : showBreadcrumb &&
-                        !isSettingsPage &&
-                        !isNavigationDrawerExpanded
+          {Icon &&
+            (isNavigationMenuItemEditingEnabled &&
+            isNonEmptyString(iconColor) ? (
+              <StyledIcon>
+                <NavigationMenuItemStyleIcon Icon={Icon} color={iconColor} />
+              </StyledIcon>
+            ) : (
+              <StyledIcon>
+                <Icon
+                  style={{
+                    minWidth: theme.icon.size.md,
+                  }}
+                  size={theme.icon.size.md}
+                  stroke={theme.icon.stroke.md}
+                  color={
+                    showBreadcrumb &&
+                    !isSettingsPage &&
+                    !isNavigationDrawerExpanded
                       ? theme.font.color.light
                       : 'currentColor'
-                }
-              />
-            </StyledIcon>
-          )}
+                  }
+                />
+              </StyledIcon>
+            ))}
 
           <StyledLabelParent>
             <OverflowingTextWithTooltip

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSubItem.tsx

@@ -10,7 +10,7 @@ export const NavigationDrawerSubItem = ({
   label,
   secondaryLabel,
   Icon,
-  iconBackgroundColor,
+  iconColor,
   to,
   onClick,
   active,
@@ -32,7 +32,7 @@ export const NavigationDrawerSubItem = ({
       indentationLevel={2}
       subItemState={subItemState}
       Icon={Icon}
-      iconBackgroundColor={iconBackgroundColor}
+      iconColor={iconColor}
       to={to}
       onClick={onClick}
       active={active}

packages/twenty-server/src/database/commands/upgrade-version-command/1-18/1-18-migrate-favorites-to-navigation-menu-items.command.ts

@@ -286,6 +286,7 @@ export class MigrateFavoritesToNavigationMenuItemsCommand extends ActiveOrSuspen
           name: favoriteFolder.name,
           link: null,
           icon: null,
+          color: null,
           position: favoriteFolder.position,
           workspaceId,
           applicationId: workspaceCustomApplicationId,
@@ -320,6 +321,7 @@ export class MigrateFavoritesToNavigationMenuItemsCommand extends ActiveOrSuspen
           name: favoriteFolder.name,
           link: null,
           icon: null,
+          color: null,
           position: favoriteFolder.position,
           workspaceId,
           applicationId: workspaceCustomApplicationId,
@@ -528,6 +530,7 @@ export class MigrateFavoritesToNavigationMenuItemsCommand extends ActiveOrSuspen
             name: null,
             link: null,
             icon: null,
+            color: null,
             position: favorite.position,
             workspaceId,
             applicationId,
@@ -582,6 +585,7 @@ export class MigrateFavoritesToNavigationMenuItemsCommand extends ActiveOrSuspen
         name: null,
         link: null,
         icon: null,
+        color: null,
         position: favorite.position,
         workspaceId,
         applicationId: workspaceCustomApplicationId,

packages/twenty-server/src/database/typeorm/core/migrations/common/1771146443209-add-color-to-navigation-menu-item.ts

@@ -0,0 +1,19 @@
+import { type MigrationInterface, type QueryRunner } from 'typeorm';
+
+export class AddColorToNavigationMenuItem1771146443209
+  implements MigrationInterface
+{
+  name = 'AddColorToNavigationMenuItem1771146443209';
+
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(
+      `ALTER TABLE "core"."navigationMenuItem" ADD "color" text`,
+    );
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(
+      `ALTER TABLE "core"."navigationMenuItem" DROP COLUMN "color"`,
+    );
+  }
+}

packages/twenty-server/src/engine/core-modules/application/utils/from-navigation-menu-item-manifest-to-universal-flat-navigation-menu-item.util.ts

@@ -17,6 +17,7 @@ export const fromNavigationMenuItemManifestToUniversalFlatNavigationMenuItem =
       applicationUniversalIdentifier,
       name: navigationMenuItemManifest.name ?? null,
       icon: navigationMenuItemManifest.icon ?? null,
+      color: navigationMenuItemManifest.color ?? null,
       position: navigationMenuItemManifest.position,
       viewUniversalIdentifier:
         navigationMenuItemManifest.viewUniversalIdentifier ?? null,

packages/twenty-server/src/engine/metadata-modules/flat-entity/constant/__tests__/__snapshots__/all-universal-flat-entity-properties-to-compare-and-stringify.constant.spec.ts.snap

@@ -104,6 +104,7 @@ exports[`ALL_UNIVERSAL_FLAT_ENTITY_PROPERTIES_TO_COMPARE_AND_STRINGIFY should ma
       "name",
       "link",
       "icon",
+      "color",
     ],
     "propertiesToStringify": [],
   },

packages/twenty-server/src/engine/metadata-modules/flat-entity/constant/all-entity-properties-configuration-by-metadata-name.constant.ts

@@ -1020,6 +1020,11 @@ export const ALL_ENTITY_PROPERTIES_CONFIGURATION_BY_METADATA_NAME = {
     name: { toCompare: true, toStringify: false, universalProperty: undefined },
     link: { toCompare: true, toStringify: false, universalProperty: undefined },
     icon: { toCompare: true, toStringify: false, universalProperty: undefined },
+    color: {
+      toCompare: true,
+      toStringify: false,
+      universalProperty: undefined,
+    },
     createdAt: {
       toCompare: false,
       toStringify: false,

packages/twenty-server/src/engine/metadata-modules/flat-navigation-menu-item/constants/flat-navigation-menu-item-editable-properties.constant.ts

@@ -6,4 +6,5 @@ export const FLAT_NAVIGATION_MENU_ITEM_EDITABLE_PROPERTIES = [
   'name',
   'link',
   'icon',
+  'color',
 ] as const satisfies MetadataEntityPropertyName<'navigationMenuItem'>[];

packages/twenty-server/src/engine/metadata-modules/flat-navigation-menu-item/utils/from-create-navigation-menu-item-input-to-flat-navigation-menu-item-to-create.util.ts

@@ -82,6 +82,7 @@ export const fromCreateNavigationMenuItemInputToFlatNavigationMenuItemToCreate =
       name: createNavigationMenuItemInput.name ?? null,
       link: createNavigationMenuItemInput.link ?? null,
       icon: createNavigationMenuItemInput.icon ?? null,
+      color: createNavigationMenuItemInput.color ?? null,
       position,
       workspaceId,
       applicationId: flatApplication.id,

packages/twenty-server/src/engine/metadata-modules/flat-navigation-menu-item/utils/from-flat-navigation-menu-item-to-navigation-menu-item-dto.util.ts

@@ -14,6 +14,7 @@ export const fromFlatNavigationMenuItemToNavigationMenuItemDto = (
   name: flatNavigationMenuItem.name ?? undefined,
   link: flatNavigationMenuItem.link ?? undefined,
   icon: flatNavigationMenuItem.icon ?? undefined,
+  color: flatNavigationMenuItem.color ?? undefined,
   position: flatNavigationMenuItem.position,
   workspaceId: flatNavigationMenuItem.workspaceId,
   applicationId: flatNavigationMenuItem.applicationId ?? undefined,

packages/twenty-server/src/engine/metadata-modules/flat-navigation-menu-item/utils/from-navigation-menu-item-entity-to-flat-navigation-menu-item.util.ts

@@ -83,6 +83,7 @@ export const fromNavigationMenuItemEntityToFlatNavigationMenuItem = ({
     name: navigationMenuItemEntity.name,
     link: navigationMenuItemEntity.link,
     icon: navigationMenuItemEntity.icon,
+    color: navigationMenuItemEntity.color,
     position: navigationMenuItemEntity.position,
     workspaceId: navigationMenuItemEntity.workspaceId,
     universalIdentifier: navigationMenuItemEntity.universalIdentifier,

packages/twenty-server/src/engine/metadata-modules/navigation-menu-item/dtos/create-navigation-menu-item.input.ts

@@ -41,6 +41,11 @@ export class CreateNavigationMenuItemInput {
   @Field(() => String, { nullable: true })
   icon?: string | null;
 
+  @IsOptional()
+  @IsString()
+  @Field(() => String, { nullable: true })
+  color?: string | null;
+
   @IsUUID()
   @IsOptional()
   @Field(() => UUIDScalarType, { nullable: true })

packages/twenty-server/src/engine/metadata-modules/navigation-menu-item/dtos/navigation-menu-item.dto.ts

@@ -51,6 +51,10 @@ export class NavigationMenuItemDTO {
   @Field(() => String, { nullable: true })
   icon?: string | null;
 
+  @IsOptional()
+  @Field(() => String, { nullable: true })
+  color?: string | null;
+
   @IsUUID()
   @IsOptional()
   @Field(() => UUIDScalarType, { nullable: true })

packages/twenty-server/src/engine/metadata-modules/navigation-menu-item/dtos/update-navigation-menu-item.input.ts

@@ -38,6 +38,11 @@ export class UpdateNavigationMenuItemInput {
   @IsString()
   @Field(() => String, { nullable: true })
   icon?: string | null;
+
+  @IsOptional()
+  @IsString()
+  @Field(() => String, { nullable: true })
+  color?: string | null;
 }
 
 @InputType()

packages/twenty-server/src/engine/metadata-modules/navigation-menu-item/entities/navigation-menu-item.entity.ts

@@ -87,6 +87,9 @@ export class NavigationMenuItemEntity
   @Column({ nullable: true, type: 'text' })
   icon: string | null;
 
+  @Column({ nullable: true, type: 'text' })
+  color: string | null;
+
   @ManyToOne(() => NavigationMenuItemEntity, {
     onDelete: 'CASCADE',
     nullable: true,

packages/twenty-server/src/engine/metadata-modules/object-metadata/object-metadata.service.ts

@@ -896,6 +896,7 @@ export class ObjectMetadataService extends TypeOrmQueryService<ObjectMetadataEnt
       name: null,
       link: null,
       icon: null,
+      color: null,
       position: nextPosition,
       workspaceId,
       applicationId: workspaceCustomApplicationId,

packages/twenty-server/src/engine/workspace-manager/twenty-standard-application/constants/standard-navigation-menu-item.constant.ts

@@ -7,34 +7,34 @@ export const STANDARD_NAVIGATION_MENU_ITEMS = {
       STANDARD_OBJECTS.company.views.allCompanies.universalIdentifier,
     position: 0,
   },
-  allDashboards: {
-    universalIdentifier: '20202020-b002-4b02-8b02-c0aba11c0002',
+  allPeople: {
+    universalIdentifier: '20202020-b005-4b05-8b05-c0aba11c0005',
     viewUniversalIdentifier:
-      STANDARD_OBJECTS.dashboard.views.allDashboards.universalIdentifier,
+      STANDARD_OBJECTS.person.views.allPeople.universalIdentifier,
     position: 1,
   },
-  allNotes: {
-    universalIdentifier: '20202020-b003-4b03-8b03-c0aba11c0003',
-    viewUniversalIdentifier:
-      STANDARD_OBJECTS.note.views.allNotes.universalIdentifier,
-    position: 2,
-  },
   allOpportunities: {
     universalIdentifier: '20202020-b004-4b04-8b04-c0aba11c0004',
     viewUniversalIdentifier:
       STANDARD_OBJECTS.opportunity.views.allOpportunities.universalIdentifier,
-    position: 3,
-  },
-  allPeople: {
-    universalIdentifier: '20202020-b005-4b05-8b05-c0aba11c0005',
-    viewUniversalIdentifier:
-      STANDARD_OBJECTS.person.views.allPeople.universalIdentifier,
-    position: 4,
+    position: 2,
   },
   allTasks: {
     universalIdentifier: '20202020-b006-4b06-8b06-c0aba11c0006',
     viewUniversalIdentifier:
       STANDARD_OBJECTS.task.views.allTasks.universalIdentifier,
+    position: 3,
+  },
+  allNotes: {
+    universalIdentifier: '20202020-b003-4b03-8b03-c0aba11c0003',
+    viewUniversalIdentifier:
+      STANDARD_OBJECTS.note.views.allNotes.universalIdentifier,
+    position: 4,
+  },
+  allDashboards: {
+    universalIdentifier: '20202020-b002-4b02-8b02-c0aba11c0002',
+    viewUniversalIdentifier:
+      STANDARD_OBJECTS.dashboard.views.allDashboards.universalIdentifier,
     position: 5,
   },
   workflowsFolder: {
@@ -66,3 +66,18 @@ export const STANDARD_NAVIGATION_MENU_ITEMS = {
     position: 2,
   },
 } as const;
+
+export const STANDARD_NAVIGATION_MENU_ITEM_DEFAULT_COLORS: Partial<
+  Record<keyof typeof STANDARD_NAVIGATION_MENU_ITEMS, string>
+> = {
+  allCompanies: 'blue',
+  allPeople: 'blue',
+  allTasks: 'turquoise',
+  allNotes: 'turquoise',
+  allOpportunities: 'red',
+  workflowsFolder: 'orange',
+  allDashboards: 'gray',
+  workflowsFolderAllWorkflows: 'gray',
+  workflowsFolderAllWorkflowRuns: 'gray',
+  workflowsFolderAllWorkflowVersions: 'gray',
+};

packages/twenty-server/src/engine/workspace-manager/twenty-standard-application/utils/navigation-menu-item/create-standard-navigation-menu-item-flat-metadata.util.ts

@@ -1,11 +1,14 @@
 import { isDefined } from 'twenty-shared/utils';
 
 import { type FlatEntityMaps } from 'src/engine/metadata-modules/flat-entity/types/flat-entity-maps.type';
-import { TWENTY_STANDARD_APPLICATION } from 'src/engine/workspace-manager/twenty-standard-application/constants/twenty-standard-applications';
 import { findFlatEntityByUniversalIdentifier } from 'src/engine/metadata-modules/flat-entity/utils/find-flat-entity-by-universal-identifier.util';
 import { type FlatNavigationMenuItem } from 'src/engine/metadata-modules/flat-navigation-menu-item/types/flat-navigation-menu-item.type';
 import { type FlatView } from 'src/engine/metadata-modules/flat-view/types/flat-view.type';
-import { STANDARD_NAVIGATION_MENU_ITEMS } from 'src/engine/workspace-manager/twenty-standard-application/constants/standard-navigation-menu-item.constant';
+import {
+  STANDARD_NAVIGATION_MENU_ITEM_DEFAULT_COLORS,
+  STANDARD_NAVIGATION_MENU_ITEMS,
+} from 'src/engine/workspace-manager/twenty-standard-application/constants/standard-navigation-menu-item.constant';
+import { TWENTY_STANDARD_APPLICATION } from 'src/engine/workspace-manager/twenty-standard-application/constants/twenty-standard-applications';
 
 export const createStandardNavigationMenuItemFlatMetadata = ({
   workspaceId,
@@ -66,6 +69,9 @@ export const createStandardNavigationMenuItemFlatMetadata = ({
     name: null,
     link: null,
     icon: null,
+    color:
+      STANDARD_NAVIGATION_MENU_ITEM_DEFAULT_COLORS[navigationMenuItemName] ??
+      null,
     position,
     createdAt: now,
     updatedAt: now,

packages/twenty-server/src/engine/workspace-manager/twenty-standard-application/utils/navigation-menu-item/create-standard-navigation-menu-item-folder-flat-metadata.util.ts

@@ -40,6 +40,7 @@ export const createStandardNavigationMenuItemFolderFlatMetadata = ({
   name,
   link: null,
   icon: icon ?? null,
+  color: 'orange',
   position,
   createdAt: now,
   updatedAt: now,
@@ -99,6 +100,7 @@ export const createStandardNavigationMenuItemFolderItemFlatMetadata = ({
     name: null,
     link: null,
     icon: null,
+    color: 'gray',
     position,
     createdAt: now,
     updatedAt: now,

packages/twenty-shared/src/application/navigationMenuItemManifestType.ts

@@ -3,6 +3,7 @@ import { type SyncableEntityOptions } from '@/application/syncableEntityOptionsT
 export type NavigationMenuItemManifest = SyncableEntityOptions & {
   name?: string;
   icon?: string;
+  color?: string;
   position: number;
   viewUniversalIdentifier?: string;
   link?: string;