Fix navbar object color not updating immediately when changed in edit mode (#19075)

https://github.com/user-attachments/assets/f2a8f2af-b92f-4d2e-9570-fe66f0a3eca0

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

@@ -0,0 +1,19 @@
+import { isNonEmptyString } from '@sniptt/guards';
+import { type NavigationMenuItem } from '~/generated-metadata/graphql';
+
+import { isNavigationMenuItemObject } from '@/navigation-menu-item/common/utils/isNavigationMenuItemObject';
+import { isDefined } from 'twenty-shared/utils';
+
+type ObjectNavigationMenuItem = Omit<
+  NavigationMenuItem,
+  'targetObjectMetadataId'
+> & {
+  targetObjectMetadataId: string;
+};
+
+export const isValidObjectNavigationMenuItem = (
+  item?: NavigationMenuItem,
+): item is ObjectNavigationMenuItem =>
+  isDefined(item) &&
+  isNavigationMenuItemObject(item) &&
+  isNonEmptyString(item.targetObjectMetadataId);

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

@@ -10,7 +10,6 @@ import { filterWorkspaceNavigationMenuItems } from '@/navigation-menu-item/commo
 import { buildUpdateInputsFromDraft } from '@/navigation-menu-item/edit/utils/buildUpdateInputsFromDraft';
 import { getObjectMetadataColorUpdates } from '@/navigation-menu-item/edit/utils/getObjectMetadataColorUpdates';
 import { useUpdateOneObjectMetadataItem } from '@/object-metadata/hooks/useUpdateOneObjectMetadataItem';
-import { objectMetadataItemsSelector } from '@/object-metadata/states/objectMetadataItemsSelector';
 import { useStore } from 'jotai';
 
 export const useSaveNavigationMenuItemsDraft = () => {
@@ -29,11 +28,9 @@ export const useSaveNavigationMenuItemsDraft = () => {
       return;
     }
 
-    const objectMetadataItems = store.get(objectMetadataItemsSelector.atom);
-
     const colorUpdates = getObjectMetadataColorUpdates({
       draft,
-      objectMetadataItems,
+      currentItems,
     });
 
     for (const { idToUpdate, color } of colorUpdates) {

packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/components/SidePanelEditColorOption.tsx

@@ -1,4 +1,8 @@
 import { CommandMenuItemDropdown } from '@/command-menu/components/CommandMenuItemDropdown';
+import { useUpdateMetadataStoreDraft } from '@/metadata-store/hooks/useUpdateMetadataStoreDraft';
+import { type FlatObjectMetadataItem } from '@/metadata-store/types/FlatObjectMetadataItem';
+import { isValidObjectNavigationMenuItem } from '@/navigation-menu-item/common/utils/isValidObjectNavigationMenuItem';
+import { useSelectedNavigationMenuItemEditItem } from '@/navigation-menu-item/edit/hooks/useSelectedNavigationMenuItemEditItem';
 import { useUpdateNavigationMenuItemInDraft } from '@/navigation-menu-item/edit/hooks/useUpdateNavigationMenuItemInDraft';
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
@@ -15,8 +19,8 @@ import {
   DEFAULT_COLOR_LABELS,
   MenuItemSelectColor,
 } from 'twenty-ui/navigation';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
 import { type ThemeColor, MAIN_COLOR_NAMES } from 'twenty-ui/theme';
+import { themeCssVariables } from 'twenty-ui/theme-constants';
 const NAVIGATION_MENU_ITEM_COLOR_DROPDOWN_ID = 'navigation-menu-item-color';
 
 const StyledMenuStyleText = styled.span`
@@ -37,6 +41,8 @@ export const SidePanelEditColorOption = ({
   const { updateNavigationMenuItemInDraft } =
     useUpdateNavigationMenuItemInDraft();
   const { closeDropdown } = useCloseDropdown();
+  const { updateInDraft, applyChanges } = useUpdateMetadataStoreDraft();
+  const { selectedItem } = useSelectedNavigationMenuItemEditItem();
 
   const [searchValue, setSearchValue] = useState('');
   const themeColor = color ?? 'gray';
@@ -56,6 +62,17 @@ export const SidePanelEditColorOption = ({
     updateNavigationMenuItemInDraft(navigationMenuItemId, {
       color: selectedColor,
     });
+
+    if (isValidObjectNavigationMenuItem(selectedItem)) {
+      updateInDraft('objectMetadataItems', [
+        {
+          id: selectedItem.targetObjectMetadataId,
+          color: selectedColor,
+        } as FlatObjectMetadataItem,
+      ]);
+      applyChanges();
+    }
+
     closeDropdown(NAVIGATION_MENU_ITEM_COLOR_DROPDOWN_ID);
   };
 

packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/components/SidePanelEditObjectViewBase.tsx

@@ -1,16 +1,16 @@
 import { navigationMenuItemsSelector } from '@/navigation-menu-item/common/states/navigationMenuItemsSelector';
 import { getNavigationMenuItemColor } from '@/navigation-menu-item/common/utils/getNavigationMenuItemColor';
-import { getNavigationMenuItemObjectNameSingular } from '@/navigation-menu-item/display/object/utils/getNavigationMenuItemObjectNameSingular';
 import { parseThemeColor } from '@/navigation-menu-item/common/utils/parseThemeColor';
-import { objectMetadataItemsSelector } from '@/object-metadata/states/objectMetadataItemsSelector';
-import { SidePanelGroup } from '@/side-panel/components/SidePanelGroup';
-import { SidePanelList } from '@/side-panel/components/SidePanelList';
+import { getNavigationMenuItemObjectNameSingular } from '@/navigation-menu-item/display/object/utils/getNavigationMenuItemObjectNameSingular';
 import { SidePanelEditColorOption } from '@/navigation-menu-item/edit/side-panel/components/SidePanelEditColorOption';
 import {
   type OrganizeActionsProps,
   SidePanelEditOrganizeActions,
 } from '@/navigation-menu-item/edit/side-panel/components/SidePanelEditOrganizeActions';
 import { getOrganizeActionsSelectableItemIds } from '@/navigation-menu-item/edit/side-panel/utils/getOrganizeActionsSelectableItemIds';
+import { objectMetadataItemsSelector } from '@/object-metadata/states/objectMetadataItemsSelector';
+import { SidePanelGroup } from '@/side-panel/components/SidePanelGroup';
+import { SidePanelList } from '@/side-panel/components/SidePanelList';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { viewsSelector } from '@/views/states/selectors/viewsSelector';
 import { useLingui } from '@lingui/react/macro';

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

@@ -3,8 +3,6 @@ import { isDefined } from 'twenty-shared/utils';
 
 import { type NavigationMenuItem } from '~/generated-metadata/graphql';
 
-import { type EnrichedObjectMetadataItem } from '@/object-metadata/types/EnrichedObjectMetadataItem';
-
 type ObjectMetadataColorUpdate = {
   idToUpdate: string;
   color: string;
@@ -12,10 +10,10 @@ type ObjectMetadataColorUpdate = {
 
 export const getObjectMetadataColorUpdates = ({
   draft,
-  objectMetadataItems,
+  currentItems,
 }: {
   draft: NavigationMenuItem[];
-  objectMetadataItems: EnrichedObjectMetadataItem[];
+  currentItems: NavigationMenuItem[];
 }): ObjectMetadataColorUpdate[] => {
   const updates: ObjectMetadataColorUpdate[] = [];
 
@@ -30,15 +28,9 @@ export const getObjectMetadataColorUpdates = ({
       continue;
     }
 
-    const objectMetadataItem = objectMetadataItems.find(
-      (item) => item.id === draftItem.targetObjectMetadataId,
-    );
+    const currentItem = currentItems.find((item) => item.id === draftItem.id);
 
-    if (!isDefined(objectMetadataItem)) {
-      continue;
-    }
-
-    if (objectMetadataItem.color === draftItem.color) {
+    if (currentItem?.color === draftItem.color) {
       continue;
     }