fix: duplicate merge button bug (#15284)

Fixes - https://github.com/twentyhq/twenty/issues/15263 - Replaced `useLoadSelectedRecordsInContextStore` with `useLoadMergeRecords` in `useOpenMergeRecordsPageInCommandMenu` for improved functionality. - Updated `useMergePreview`, `useMergeRecordsActions`, and `useMergeRecordsSettings` to utilize `mergeRecordsState` instead of the deprecated context store hook. - Cleaned up imports and ensured consistency across merge-related hooks. https://github.com/user-attachments/assets/453539c9-7f2b-4e8c-bfa1-3ceebca07081 --------- Co-authored-by: Charles Bochet <charles@twenty.com>
2025-10-24 22:33:11 +05:30
parent 9b2a73d50a
commit e613b15c5a
34 changed files with 366 additions and 350 deletions
@@ -7,8 +7,7 @@ import { COMMAND_MENU_COMPONENT_INSTANCE_ID } from '@/command-menu/constants/Com
 import { COMMAND_MENU_CONTEXT_CHIP_GROUPS_DROPDOWN_ID } from '@/command-menu/constants/CommandMenuContextChipGroupsDropdownId';
 import { COMMAND_MENU_PREVIOUS_COMPONENT_INSTANCE_ID } from '@/command-menu/constants/CommandMenuPreviousComponentInstanceId';
 import { useCommandMenuCloseAnimationCompleteCleanup } from '@/command-menu/hooks/useCommandMenuCloseAnimationCompleteCleanup';
-import { commandMenuNavigationMorphItemByPageState } from '@/command-menu/states/commandMenuNavigationMorphItemsState';
-import { commandMenuNavigationRecordsState } from '@/command-menu/states/commandMenuNavigationRecordsState';
+import { commandMenuNavigationMorphItemsByPageState } from '@/command-menu/states/commandMenuNavigationMorphItemsByPageState';
 import { commandMenuNavigationStackState } from '@/command-menu/states/commandMenuNavigationStackState';
 import { commandMenuPageInfoState } from '@/command-menu/states/commandMenuPageInfoState';
 import { commandMenuPageState } from '@/command-menu/states/commandMenuPageState';
@@ -73,11 +72,9 @@ describe('useCommandMenuCloseAnimationCompleteCleanup', () => {
        const commandMenuNavigationStack = useRecoilValue(
          commandMenuNavigationStackState,
        );
-        const commandMenuNavigationRecords = useRecoilValue(
-          commandMenuNavigationRecordsState,
-        );
-        const commandMenuNavigationMorphItemByPage = useRecoilValue(
-          commandMenuNavigationMorphItemByPageState,
+
+        const commandMenuNavigationMorphItemsByPage = useRecoilValue(
+          commandMenuNavigationMorphItemsByPageState,
        );
        const hasUserSelectedCommand = useRecoilValue(
          hasUserSelectedCommandState,
@@ -97,9 +94,7 @@ describe('useCommandMenuCloseAnimationCompleteCleanup', () => {
        const setCommandMenuNavigationStack = useSetRecoilState(
          commandMenuNavigationStackState,
        );
-        const setCommandMenuNavigationRecords = useSetRecoilState(
-          commandMenuNavigationRecordsState,
-        );
+
        const setHasUserSelectedCommand = useSetRecoilState(
          hasUserSelectedCommandState,
        );
@@ -115,8 +110,7 @@ describe('useCommandMenuCloseAnimationCompleteCleanup', () => {
          isCommandMenuOpened,
          commandMenuSearch,
          commandMenuNavigationStack,
-          commandMenuNavigationRecords,
-          commandMenuNavigationMorphItemByPage,
+          commandMenuNavigationMorphItemsByPage,
          hasUserSelectedCommand,
          isCommandMenuClosing,
          viewableRecordId,
@@ -125,7 +119,6 @@ describe('useCommandMenuCloseAnimationCompleteCleanup', () => {
          setIsCommandMenuOpened,
          setCommandMenuSearch,
          setCommandMenuNavigationStack,
-          setCommandMenuNavigationRecords,
          setHasUserSelectedCommand,
          setIsCommandMenuClosing,
          setViewableRecordId,
@@ -158,12 +151,6 @@ describe('useCommandMenuCloseAnimationCompleteCleanup', () => {
          pageId: '1',
        },
      ]);
-      result.current.setCommandMenuNavigationRecords([
-        {
-          objectMetadataItem: { id: '1', nameSingular: 'Record' } as any,
-          record: { id: '1' } as any,
-        },
-      ]);
      result.current.setHasUserSelectedCommand(true);
      result.current.setIsCommandMenuClosing(true);
      result.current.setViewableRecordId('record-123');
@@ -185,12 +172,6 @@ describe('useCommandMenuCloseAnimationCompleteCleanup', () => {
        pageId: '1',
      },
    ]);
-    expect(result.current.commandMenuNavigationRecords).toEqual([
-      {
-        objectMetadataItem: { id: '1', nameSingular: 'Record' } as any,
-        record: { id: '1' } as any,
-      },
-    ]);
    expect(result.current.hasUserSelectedCommand).toBe(true);
    expect(result.current.isCommandMenuClosing).toBe(true);
    expect(result.current.viewableRecordId).toBe('record-123');
@@ -208,7 +189,6 @@ describe('useCommandMenuCloseAnimationCompleteCleanup', () => {
    expect(result.current.isCommandMenuOpened).toBe(false);
    expect(result.current.commandMenuSearch).toBe('');
    expect(result.current.commandMenuNavigationStack).toEqual([]);
-    expect(result.current.commandMenuNavigationRecords).toEqual([]);
    expect(result.current.hasUserSelectedCommand).toBe(false);
    expect(result.current.isCommandMenuClosing).toBe(false);
    expect(result.current.viewableRecordId).toBe(null);
@@ -6,7 +6,7 @@ import { COMMAND_MENU_COMPONENT_INSTANCE_ID } from '@/command-menu/constants/Com
 import { useOpenRecordInCommandMenu } from '@/command-menu/hooks/useOpenRecordInCommandMenu';
 import { viewableRecordIdComponentState } from '@/command-menu/pages/record-page/states/viewableRecordIdComponentState';
 import { viewableRecordNameSingularComponentState } from '@/command-menu/pages/record-page/states/viewableRecordNameSingularComponentState';
-import { commandMenuNavigationMorphItemByPageState } from '@/command-menu/states/commandMenuNavigationMorphItemsState';
+import { commandMenuNavigationMorphItemsByPageState } from '@/command-menu/states/commandMenuNavigationMorphItemsByPageState';
 import { commandMenuPageState } from '@/command-menu/states/commandMenuPageState';
 import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
 import { contextStoreCurrentObjectMetadataItemIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemIdComponentState';
@@ -54,8 +54,8 @@ const renderHooks = () => {
      const { openRecordInCommandMenu } = useOpenRecordInCommandMenu();

      const commandMenuPage = useRecoilValue(commandMenuPageState);
-      const commandMenuNavigationMorphItemByPage = useRecoilValue(
-        commandMenuNavigationMorphItemByPageState,
+      const commandMenuNavigationMorphItemsByPage = useRecoilValue(
+        commandMenuNavigationMorphItemsByPageState,
      );

      const viewableRecordId = useRecoilComponentValue(
@@ -88,7 +88,7 @@ const renderHooks = () => {
        openRecordInCommandMenu,
        viewableRecordId,
        commandMenuPage,
-        commandMenuNavigationMorphItemByPage,
+        commandMenuNavigationMorphItemsByPage,
        viewableRecordNameSingular,
        currentObjectMetadataItemId,
        targetedRecordsRule,
@@ -134,13 +134,15 @@ describe('useOpenRecordInCommandMenu', () => {
    expect(result.current.numberOfSelectedRecords).toBe(1);
    expect(result.current.currentViewType).toBe(ContextStoreViewType.ShowPage);

-    expect(result.current.commandMenuNavigationMorphItemByPage.size).toBe(1);
+    expect(result.current.commandMenuNavigationMorphItemsByPage.size).toBe(1);
    expect(
-      result.current.commandMenuNavigationMorphItemByPage.get('mocked-uuid'),
-    ).toEqual({
-      objectMetadataId: personMockObjectMetadataItem.id,
-      recordId,
-    });
+      result.current.commandMenuNavigationMorphItemsByPage.get('mocked-uuid'),
+    ).toEqual([
+      {
+        objectMetadataId: personMockObjectMetadataItem.id,
+        recordId,
+      },
+    ]);

    expect(mockNavigateCommandMenu).toHaveBeenCalledWith({
      page: CommandMenuPages.ViewRecord,
@@ -6,7 +6,7 @@ import { viewableRecordIdComponentState } from '@/command-menu/pages/record-page
 import { viewableRecordNameSingularComponentState } from '@/command-menu/pages/record-page/states/viewableRecordNameSingularComponentState';
 import { commandMenuWorkflowIdComponentState } from '@/command-menu/pages/workflow/states/commandMenuWorkflowIdComponentState';
 import { commandMenuWorkflowVersionIdComponentState } from '@/command-menu/pages/workflow/states/commandMenuWorkflowVersionIdComponentState';
-import { commandMenuNavigationMorphItemByPageState } from '@/command-menu/states/commandMenuNavigationMorphItemsState';
+import { commandMenuNavigationMorphItemsByPageState } from '@/command-menu/states/commandMenuNavigationMorphItemsByPageState';
 import { commandMenuPageState } from '@/command-menu/states/commandMenuPageState';
 import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
 import { contextStoreCurrentObjectMetadataItemIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemIdComponentState';
@@ -68,8 +68,8 @@ const renderHooks = () => {
        openWorkflowViewStepInCommandMenu,
      } = useWorkflowCommandMenu();
      const commandMenuPage = useRecoilValue(commandMenuPageState);
-      const commandMenuNavigationMorphItemByPage = useRecoilValue(
-        commandMenuNavigationMorphItemByPageState,
+      const commandMenuNavigationMorphItemsByPage = useRecoilValue(
+        commandMenuNavigationMorphItemsByPageState,
      );

      const viewableRecordId = useRecoilComponentValue(
@@ -116,7 +116,7 @@ const renderHooks = () => {
        workflowVersionId,
        viewableRecordId,
        commandMenuPage,
-        commandMenuNavigationMorphItemByPage,
+        commandMenuNavigationMorphItemsByPage,
        viewableRecordNameSingular,
        currentObjectMetadataItemId,
        targetedRecordsRule,
@@ -3,8 +3,7 @@ import { COMMAND_MENU_CONTEXT_CHIP_GROUPS_DROPDOWN_ID } from '@/command-menu/con
 import { COMMAND_MENU_LIST_SELECTABLE_LIST_ID } from '@/command-menu/constants/CommandMenuListSelectableListId';
 import { COMMAND_MENU_PREVIOUS_COMPONENT_INSTANCE_ID } from '@/command-menu/constants/CommandMenuPreviousComponentInstanceId';
 import { useResetContextStoreStates } from '@/command-menu/hooks/useResetContextStoreStates';
-import { commandMenuNavigationMorphItemByPageState } from '@/command-menu/states/commandMenuNavigationMorphItemsState';
-import { commandMenuNavigationRecordsState } from '@/command-menu/states/commandMenuNavigationRecordsState';
+import { commandMenuNavigationMorphItemsByPageState } from '@/command-menu/states/commandMenuNavigationMorphItemsByPageState';
 import { commandMenuNavigationStackState } from '@/command-menu/states/commandMenuNavigationStackState';
 import { commandMenuPageInfoState } from '@/command-menu/states/commandMenuPageInfoState';
 import { commandMenuPageState } from '@/command-menu/states/commandMenuPageState';
@@ -91,8 +90,7 @@ export const useCommandMenuCloseAnimationCompleteCleanup = () => {
        });
        set(isCommandMenuOpenedState, false);
        set(commandMenuSearchState, '');
-        set(commandMenuNavigationMorphItemByPageState, new Map());
-        set(commandMenuNavigationRecordsState, []);
+        set(commandMenuNavigationMorphItemsByPageState, new Map());
        set(commandMenuNavigationStackState, []);
        resetSelectedItem();
        set(hasUserSelectedCommandState, false);
@@ -106,14 +104,14 @@ export const useCommandMenuCloseAnimationCompleteCleanup = () => {
          WorkflowServerlessFunctionTabId.CODE,
        );

-        for (const [pageId, morphItem] of snapshot
-          .getLoadable(commandMenuNavigationMorphItemByPageState)
+        for (const [pageId, morphItems] of snapshot
+          .getLoadable(commandMenuNavigationMorphItemsByPageState)
          .getValue()) {
          set(
            activeTabIdComponentState.atomFamily({
              instanceId: getShowPageTabListComponentId({
                pageId,
-                targetObjectId: morphItem.recordId,
+                targetObjectId: morphItems[0].recordId,
              }),
            }),
            null,
@@ -1,10 +1,11 @@
 import { CommandMenuContextRecordChipAvatars } from '@/command-menu/components/CommandMenuContextRecordChipAvatars';
 import { useCommandMenuHistory } from '@/command-menu/hooks/useCommandMenuHistory';
-import { commandMenuNavigationMorphItemByPageState } from '@/command-menu/states/commandMenuNavigationMorphItemsState';
-import { commandMenuNavigationRecordsState } from '@/command-menu/states/commandMenuNavigationRecordsState';
+import { commandMenuNavigationMorphItemsByPageState } from '@/command-menu/states/commandMenuNavigationMorphItemsByPageState';
 import { commandMenuNavigationStackState } from '@/command-menu/states/commandMenuNavigationStackState';
 import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
-import { getObjectRecordIdentifier } from '@/object-metadata/utils/getObjectRecordIdentifier';
+import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
+import { recordStoreIdentifiersFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreIdentifiersSelector';
+import { recordStoreRecordsSelector } from '@/object-record/record-store/states/selectors/recordStoreRecordsSelector';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useMemo } from 'react';
@@ -24,16 +25,31 @@ export const useCommandMenuContextChips = () => {
    commandMenuNavigationStackState,
  );

+  const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
+
  const { navigateCommandMenuHistory } = useCommandMenuHistory();

  const theme = useTheme();

-  const commandMenuNavigationMorphItemByPage = useRecoilValue(
-    commandMenuNavigationMorphItemByPageState,
+  const commandMenuNavigationMorphItemsByPage = useRecoilValue(
+    commandMenuNavigationMorphItemsByPageState,
  );

-  const commandMenuNavigationRecords = useRecoilValue(
-    commandMenuNavigationRecordsState,
+  const allRecordIds = Array.from(
+    commandMenuNavigationMorphItemsByPage.entries(),
+  ).flatMap(([, morphItems]) =>
+    morphItems.map((morphItem) => morphItem.recordId),
+  );
+
+  const recordIdentifiers = useRecoilValue(
+    recordStoreIdentifiersFamilySelector({
+      recordIds: allRecordIds,
+    }),
+  );
+  const records = useRecoilValue(
+    recordStoreRecordsSelector({
+      recordIds: allRecordIds,
+    }),
  );

  const contextChips = useMemo(() => {
@@ -51,32 +67,34 @@ export const useCommandMenuContextChips = () => {

        if (isRecordPage && !isLastChip) {
          const commandMenuNavigationMorphItem =
-            commandMenuNavigationMorphItemByPage.get(page.pageId);
+            commandMenuNavigationMorphItemsByPage.get(page.pageId)?.[0];

          if (!isDefined(commandMenuNavigationMorphItem?.recordId)) {
            return null;
          }

-          const objectMetadataItem = commandMenuNavigationRecords.find(
-            ({ objectMetadataItem }) =>
-              objectMetadataItem.id ===
-              commandMenuNavigationMorphItem.objectMetadataId,
-          )?.objectMetadataItem;
+          const objectMetadataItem = objectMetadataItems.find(
+            (item) =>
+              item.id === commandMenuNavigationMorphItem.objectMetadataId,
+          );

-          const record = commandMenuNavigationRecords.find(
-            ({ record }) =>
-              record.id === commandMenuNavigationMorphItem.recordId,
-          )?.record;
+          const recordIdentifier = recordIdentifiers.find(
+            (recordIdentifier) =>
+              recordIdentifier.id === commandMenuNavigationMorphItem.recordId,
+          );

-          if (!isDefined(objectMetadataItem) || !isDefined(record)) {
+          const record = records.find(
+            (record) => record.id === commandMenuNavigationMorphItem.recordId,
+          );
+
+          if (
+            !isDefined(objectMetadataItem) ||
+            !isDefined(recordIdentifier) ||
+            !isDefined(record)
+          ) {
            return null;
          }

-          const name = getObjectRecordIdentifier({
-            objectMetadataItem,
-            record,
-          }).name;
-
          return {
            page,
            Icons: [
@@ -85,7 +103,7 @@ export const useCommandMenuContextChips = () => {
                record={record}
              />,
            ],
-            text: name,
+            text: recordIdentifier.name,
            onClick: () => {
              navigateCommandMenuHistory(index);
            },
@@ -119,10 +137,12 @@ export const useCommandMenuContextChips = () => {
      })
      .filter(isDefined);
  }, [
-    commandMenuNavigationMorphItemByPage,
-    commandMenuNavigationRecords,
+    commandMenuNavigationMorphItemsByPage,
    commandMenuNavigationStack,
    navigateCommandMenuHistory,
+    objectMetadataItems,
+    recordIdentifiers,
+    records,
    theme.font.color.tertiary,
    theme.icon.size.sm,
  ]);
@@ -1,13 +1,14 @@
 import { useRecoilCallback } from 'recoil';

 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
-import { commandMenuNavigationMorphItemByPageState } from '@/command-menu/states/commandMenuNavigationMorphItemsState';
+import { commandMenuNavigationMorphItemsByPageState } from '@/command-menu/states/commandMenuNavigationMorphItemsByPageState';
 import { commandMenuNavigationStackState } from '@/command-menu/states/commandMenuNavigationStackState';
 import { commandMenuPageInfoState } from '@/command-menu/states/commandMenuPageInfoState';
 import { commandMenuPageState } from '@/command-menu/states/commandMenuPageState';
 import { hasUserSelectedCommandState } from '@/command-menu/states/hasUserSelectedCommandState';
 import { getShowPageTabListComponentId } from '@/ui/layout/show-page/utils/getShowPageTabListComponentId';
 import { activeTabIdComponentState } from '@/ui/layout/tab-list/states/activeTabIdComponentState';
+import { isNonEmptyArray } from '@sniptt/guards';
 import { isDefined } from 'twenty-shared/utils';

 export const useCommandMenuHistory = () => {
@@ -39,7 +40,7 @@ export const useCommandMenuHistory = () => {
        set(commandMenuNavigationStackState, newNavigationStack);

        const currentMorphItems = snapshot
-          .getLoadable(commandMenuNavigationMorphItemByPageState)
+          .getLoadable(commandMenuNavigationMorphItemsByPageState)
          .getValue();

        if (currentNavigationStack.length > 0) {
@@ -48,15 +49,15 @@ export const useCommandMenuHistory = () => {
          if (isDefined(removedItem)) {
            const newMorphItems = new Map(currentMorphItems);
            newMorphItems.delete(removedItem.pageId);
-            set(commandMenuNavigationMorphItemByPageState, newMorphItems);
+            set(commandMenuNavigationMorphItemsByPageState, newMorphItems);

-            const morphItem = currentMorphItems.get(removedItem.pageId);
-            if (isDefined(morphItem)) {
+            const morphItems = currentMorphItems.get(removedItem.pageId);
+            if (isNonEmptyArray(morphItems)) {
              set(
                activeTabIdComponentState.atomFamily({
                  instanceId: getShowPageTabListComponentId({
                    pageId: removedItem.pageId,
-                    targetObjectId: morphItem.recordId,
+                    targetObjectId: morphItems[0].recordId,
                  }),
                }),
                null,
@@ -96,16 +97,16 @@ export const useCommandMenuHistory = () => {
        instanceId: newNavigationStackItem.pageId,
      });
      const currentMorphItems = snapshot
-        .getLoadable(commandMenuNavigationMorphItemByPageState)
+        .getLoadable(commandMenuNavigationMorphItemsByPageState)
        .getValue();

-      for (const [pageId, morphItem] of currentMorphItems.entries()) {
+      for (const [pageId, morphItems] of currentMorphItems.entries()) {
        if (!newNavigationStack.some((item) => item.pageId === pageId)) {
          set(
            activeTabIdComponentState.atomFamily({
              instanceId: getShowPageTabListComponentId({
                pageId,
-                targetObjectId: morphItem.recordId,
+                targetObjectId: morphItems[0].recordId,
              }),
            }),
            null,
@@ -119,7 +120,7 @@ export const useCommandMenuHistory = () => {
        ),
      );

-      set(commandMenuNavigationMorphItemByPageState, newMorphItems);
+      set(commandMenuNavigationMorphItemsByPageState, newMorphItems);

      set(hasUserSelectedCommandState, false);
    };
@@ -0,0 +1,45 @@
+import { commandMenuNavigationMorphItemsByPageState } from '@/command-menu/states/commandMenuNavigationMorphItemsByPageState';
+import { isNonEmptyArray } from '@sniptt/guards';
+import { useRecoilCallback } from 'recoil';
+
+type UpdateNavigationMorphItemsByPageParams = {
+  pageId: string;
+  objectMetadataId: string;
+  objectRecordIds: string[];
+};
+
+export const useCommandMenuUpdateNavigationMorphItemsByPage = () => {
+  const updateCommandMenuNavigationMorphItemsByPage = useRecoilCallback(
+    ({ set, snapshot }) =>
+      async ({
+        pageId,
+        objectMetadataId,
+        objectRecordIds,
+      }: UpdateNavigationMorphItemsByPageParams) => {
+        const currentMorphItems = snapshot
+          .getLoadable(commandMenuNavigationMorphItemsByPageState)
+          .getValue();
+
+        const currentMorphItemsForPage = currentMorphItems.get(pageId);
+
+        const newMorphItems = [
+          ...(isNonEmptyArray(currentMorphItemsForPage)
+            ? currentMorphItemsForPage
+            : []),
+          ...objectRecordIds.map((recordId) => ({
+            objectMetadataId,
+            recordId,
+          })),
+        ];
+
+        const newMorphItemsMap = new Map(currentMorphItems);
+        newMorphItemsMap.set(pageId, newMorphItems);
+        set(commandMenuNavigationMorphItemsByPageState, newMorphItemsMap);
+      },
+    [],
+  );
+
+  return {
+    updateCommandMenuNavigationMorphItemsByPage,
+  };
+};
@@ -2,8 +2,7 @@ import { COMMAND_MENU_COMPONENT_INSTANCE_ID } from '@/command-menu/constants/Com
 import { SIDE_PANEL_FOCUS_ID } from '@/command-menu/constants/SidePanelFocusId';
 import { useCommandMenuCloseAnimationCompleteCleanup } from '@/command-menu/hooks/useCommandMenuCloseAnimationCompleteCleanup';
 import { useCopyContextStoreStates } from '@/command-menu/hooks/useCopyContextStoreAndActionMenuStates';
-import { commandMenuNavigationMorphItemByPageState } from '@/command-menu/states/commandMenuNavigationMorphItemsState';
-import { commandMenuNavigationRecordsState } from '@/command-menu/states/commandMenuNavigationRecordsState';
+import { commandMenuNavigationMorphItemsByPageState } from '@/command-menu/states/commandMenuNavigationMorphItemsByPageState';
 import { commandMenuNavigationStackState } from '@/command-menu/states/commandMenuNavigationStackState';
 import { commandMenuPageInfoState } from '@/command-menu/states/commandMenuPageInfoState';
 import { commandMenuPageState } from '@/command-menu/states/commandMenuPageState';
@@ -122,8 +121,7 @@ export const useNavigateCommandMenu = () => {
            },
          ]);

-          set(commandMenuNavigationRecordsState, []);
-          set(commandMenuNavigationMorphItemByPageState, new Map());
+          set(commandMenuNavigationMorphItemsByPageState, new Map());
        } else {
          set(commandMenuNavigationStackState, [
            ...currentNavigationStack,
@@ -1,7 +1,9 @@
+import { useCommandMenuUpdateNavigationMorphItemsByPage } from '@/command-menu/hooks/useCommandMenuUpdateNavigationMorphItemsByPage';
 import { useNavigateCommandMenu } from '@/command-menu/hooks/useNavigateCommandMenu';
 import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
-import { useLoadSelectedRecordsInContextStore } from '@/object-record/hooks/useLoadSelectedRecordsInContextStore';
+import { useLazyFindManyRecords } from '@/object-record/hooks/useLazyFindManyRecords';
+import { useUpsertRecordsInStore } from '@/object-record/record-store/hooks/useUpsertRecordsInStore';
 import { msg, t } from '@lingui/core/macro';
 import { IconArrowMerge } from 'twenty-ui/display';

@@ -19,21 +21,34 @@ export const useOpenMergeRecordsPageInCommandMenu = ({
  });

  const { navigateCommandMenu } = useNavigateCommandMenu();
+  const { updateCommandMenuNavigationMorphItemsByPage } =
+    useCommandMenuUpdateNavigationMorphItemsByPage();

-  const { loadSelectedRecordsInContextStore } =
-    useLoadSelectedRecordsInContextStore({
-      objectNameSingular,
-      objectRecordIds,
-      objectMetadataItemId: objectMetadataItem.id,
-    });
+  const { upsertRecordsInStore } = useUpsertRecordsInStore();
+
+  const { findManyRecordsLazy } = useLazyFindManyRecords({
+    objectNameSingular,
+    filter: {
+      id: {
+        in: objectRecordIds,
+      },
+    },
+  });

  const openMergeRecordsPageInCommandMenu = async () => {
-    await loadSelectedRecordsInContextStore();
+    await updateCommandMenuNavigationMorphItemsByPage({
+      pageId: CommandMenuPages.MergeRecords,
+      objectMetadataId: objectMetadataItem.id,
+      objectRecordIds,
+    });
+    const { records } = await findManyRecordsLazy();
+    upsertRecordsInStore(records ?? []);

    navigateCommandMenu({
      page: CommandMenuPages.MergeRecords,
      pageTitle: t(msg`Merge records`),
      pageIcon: IconArrowMerge,
+      pageId: CommandMenuPages.MergeRecords,
    });
  };

@@ -1,7 +1,7 @@
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { viewableRecordIdComponentState } from '@/command-menu/pages/record-page/states/viewableRecordIdComponentState';
 import { viewableRecordNameSingularComponentState } from '@/command-menu/pages/record-page/states/viewableRecordNameSingularComponentState';
-import { commandMenuNavigationMorphItemByPageState } from '@/command-menu/states/commandMenuNavigationMorphItemsState';
+import { commandMenuNavigationMorphItemsByPageState } from '@/command-menu/states/commandMenuNavigationMorphItemsByPageState';
 import { commandMenuNavigationStackState } from '@/command-menu/states/commandMenuNavigationStackState';
 import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
 import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainContextStoreInstanceId';
@@ -142,7 +142,7 @@ export const useOpenRecordInCommandMenu = () => {
        );

        const currentMorphItems = snapshot
-          .getLoadable(commandMenuNavigationMorphItemByPageState)
+          .getLoadable(commandMenuNavigationMorphItemsByPageState)
          .getValue();

        const morphItemToAdd = {
@@ -150,10 +150,10 @@ export const useOpenRecordInCommandMenu = () => {
          recordId,
        };

-        const newMorphItems = new Map(currentMorphItems);
-        newMorphItems.set(pageComponentInstanceId, morphItemToAdd);
+        const newMorphItemsMap = new Map(currentMorphItems);
+        newMorphItemsMap.set(pageComponentInstanceId, [morphItemToAdd]);

-        set(commandMenuNavigationMorphItemByPageState, newMorphItems);
+        set(commandMenuNavigationMorphItemsByPageState, newMorphItemsMap);

        const Icon = objectMetadataItem?.icon
          ? getIcon(objectMetadataItem.icon)