545 replace objects icons and names with records avatars and labelidentifiers in command menu context chips (#10787)

Closes https://github.com/twentyhq/core-team-issues/issues/545 This PR: - Introduces `commandMenuNavigationMorphItemsState` which stores the information about the `recordId` and the `objectMetadataItemId` for each page - Creates `CommandMenuContextChipEffect`, which queries the records from the previous pages in case a record has been updated during the navigation, to keep up to date information and stores it inside `commandMenuNavigationRecordsState` - `useCommandMenuContextChips` returns the context chips information - Style updates (icons background and color) - Updates `useCommandMenu` to set and reset these new states https://github.com/user-attachments/assets/8886848a-721d-4709-9330-8e84ebc0d51e
2025-03-12 15:26:14 +01:00
parent e030fc8917
commit bfc542290b
22 changed files with 620 additions and 174 deletions
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChipGroupsWithRecordSelection.tsx
+++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChipGroupsWithRecordSelection.tsx
@ -47,6 +47,7 @@ export const CommandMenuContextChipGroupsWithRecordSelection = ({
          ),
          Icons: Avatars,
          onClick: contextChips.length > 0 ? openRootCommandMenu : undefined,
+          withIconBackground: false,
        }
      : undefined;

--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChipRecordSetterEffect.tsx
+++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChipRecordSetterEffect.tsx
@ -0,0 +1,117 @@
+import { commandMenuNavigationMorphItemByPageState } from '@/command-menu/states/commandMenuNavigationMorphItemsState';
+import { commandMenuNavigationRecordsState } from '@/command-menu/states/commandMenuNavigationRecordsState';
+import { commandMenuNavigationStackState } from '@/command-menu/states/commandMenuNavigationStackState';
+import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { RecordGqlNode } from '@/object-record/graphql/types/RecordGqlNode';
+import { usePerformCombinedFindManyRecords } from '@/object-record/multiple-objects/hooks/usePerformCombinedFindManyRecords';
+import { isNonEmptyArray } from '@sniptt/guards';
+import { useCallback, useEffect } from 'react';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
+import { capitalize, isDefined } from 'twenty-shared';
+
+export const CommandMenuContextChipRecordSetterEffect = () => {
+  const commandMenuNavigationMorphItemByPage = useRecoilValue(
+    commandMenuNavigationMorphItemByPageState,
+  );
+
+  const setCommandMenuNavigationRecords = useSetRecoilState(
+    commandMenuNavigationRecordsState,
+  );
+
+  const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
+
+  const { performCombinedFindManyRecords } =
+    usePerformCombinedFindManyRecords();
+
+  const objectMetadataIdsUsedInCommandMenuNavigation = Array.from(
+    commandMenuNavigationMorphItemByPage.values(),
+  ).map(({ objectMetadataId }) => objectMetadataId);
+
+  const searchableObjectMetadataItems = objectMetadataItems.filter(({ id }) =>
+    objectMetadataIdsUsedInCommandMenuNavigation.includes(id),
+  );
+
+  const commandMenuNavigationStack = useRecoilValue(
+    commandMenuNavigationStackState,
+  );
+
+  const fetchRecords = useCallback(async () => {
+    const filterPerMetadataItemFilteredOnRecordId = Object.fromEntries(
+      searchableObjectMetadataItems
+        .map(({ id, nameSingular }) => {
+          const recordIdsForMetadataItem = Array.from(
+            commandMenuNavigationMorphItemByPage.values(),
+          )
+            .filter(({ objectMetadataId }) => objectMetadataId === id)
+            .map(({ recordId }) => recordId);
+
+          if (!isNonEmptyArray(recordIdsForMetadataItem)) {
+            return null;
+          }
+
+          return [
+            `filter${capitalize(nameSingular)}`,
+            {
+              id: {
+                in: recordIdsForMetadataItem,
+              },
+            },
+          ];
+        })
+        .filter(isDefined),
+    );
+
+    const operationSignatures = searchableObjectMetadataItems
+      .filter(({ nameSingular }) =>
+        isDefined(
+          filterPerMetadataItemFilteredOnRecordId[
+            `filter${capitalize(nameSingular)}`
+          ],
+        ),
+      )
+      .map((objectMetadataItem) => ({
+        objectNameSingular: objectMetadataItem.nameSingular,
+        variables: {
+          filter:
+            filterPerMetadataItemFilteredOnRecordId[
+              `filter${capitalize(objectMetadataItem.nameSingular)}`
+            ],
+        },
+      }));
+
+    if (operationSignatures.length === 0) {
+      setCommandMenuNavigationRecords([]);
+      return;
+    }
+
+    const { result } = await performCombinedFindManyRecords({
+      operationSignatures,
+    });
+
+    const formattedRecords = Object.entries(result).flatMap(
+      ([objectNamePlural, records]) =>
+        records.map((record) => ({
+          objectMetadataItem: searchableObjectMetadataItems.find(
+            ({ namePlural }) => namePlural === objectNamePlural,
+          ) as ObjectMetadataItem,
+          record: record as RecordGqlNode,
+        })),
+    );
+
+    setCommandMenuNavigationRecords(formattedRecords);
+  }, [
+    commandMenuNavigationMorphItemByPage,
+    performCombinedFindManyRecords,
+    searchableObjectMetadataItems,
+    setCommandMenuNavigationRecords,
+  ]);
+
+  useEffect(() => {
+    if (commandMenuNavigationStack.length > 1) {
+      fetchRecords();
+    }
+  }, [commandMenuNavigationStack.length, fetchRecords]);
+
+  return null;
+};
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextRecordChipAvatars.tsx
+++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextRecordChipAvatars.tsx
@ -32,7 +32,6 @@ export const CommandMenuContextRecordChipAvatars = ({
    objectNameSingular: objectMetadataItem.nameSingular,
    record,
  });
-
  const { Icon, IconColor } = useGetStandardObjectIcon(
    objectMetadataItem.nameSingular,
  );
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuRouter.tsx
+++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuRouter.tsx
@ -1,4 +1,5 @@
 import { CommandMenuContainer } from '@/command-menu/components/CommandMenuContainer';
+import { CommandMenuContextChipRecordSetterEffect } from '@/command-menu/components/CommandMenuContextChipRecordSetterEffect';
 import { CommandMenuTopBar } from '@/command-menu/components/CommandMenuTopBar';
 import { COMMAND_MENU_PAGES_CONFIG } from '@/command-menu/constants/CommandMenuPagesConfig';
 import { commandMenuPageInfoState } from '@/command-menu/states/commandMenuPageInfoState';
@ -30,6 +31,7 @@ export const CommandMenuRouter = () => {

  return (
    <CommandMenuContainer>
+      <CommandMenuContextChipRecordSetterEffect />
      <CommandMenuPageComponentInstanceContext.Provider
        value={{ instanceId: commandMenuPageInfo.instanceId }}
      >
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuTopBar.tsx
+++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuTopBar.tsx
@ -5,7 +5,7 @@ import { CommandMenuTopBarInputFocusEffect } from '@/command-menu/components/Com
 import { COMMAND_MENU_SEARCH_BAR_HEIGHT } from '@/command-menu/constants/CommandMenuSearchBarHeight';
 import { COMMAND_MENU_SEARCH_BAR_PADDING } from '@/command-menu/constants/CommandMenuSearchBarPadding';
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
-import { commandMenuNavigationStackState } from '@/command-menu/states/commandMenuNavigationStackState';
+import { useCommandMenuContextChips } from '@/command-menu/hooks/useCommandMenuContextChips';
 import { commandMenuPageState } from '@/command-menu/states/commandMenuPageState';
 import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchState';
 import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
@ -16,7 +16,7 @@ import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useLingui } from '@lingui/react/macro';
 import { AnimatePresence, motion } from 'framer-motion';
-import { useMemo, useRef } from 'react';
+import { useRef } from 'react';
 import { useLocation } from 'react-router-dom';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-shared';
@ -100,11 +100,7 @@ export const CommandMenuTopBar = () => {

  const isMobile = useIsMobile();

-  const {
-    closeCommandMenu,
-    goBackFromCommandMenu,
-    navigateCommandMenuHistory,
-  } = useCommandMenu();
+  const { closeCommandMenu, goBackFromCommandMenu } = useCommandMenu();

  const contextStoreCurrentObjectMetadataItem = useRecoilComponentValueV2(
    contextStoreCurrentObjectMetadataItemComponentState,
@ -112,42 +108,13 @@ export const CommandMenuTopBar = () => {

  const commandMenuPage = useRecoilValue(commandMenuPageState);

-  const commandMenuNavigationStack = useRecoilValue(
-    commandMenuNavigationStackState,
-  );
-
  const theme = useTheme();

  const isCommandMenuV2Enabled = useIsFeatureEnabled(
    FeatureFlagKey.IsCommandMenuV2Enabled,
  );

-  const contextChips = useMemo(() => {
-    const filteredCommandMenuNavigationStack =
-      commandMenuNavigationStack.filter(
-        (page) => page.page !== CommandMenuPages.Root,
-      );
-
-    return filteredCommandMenuNavigationStack.map((page, index) => {
-      const isLastChip =
-        index === filteredCommandMenuNavigationStack.length - 1;
-
-      return {
-        page,
-        Icons: [<page.pageIcon size={theme.icon.size.sm} />],
-        text: page.pageTitle,
-        onClick: isLastChip
-          ? undefined
-          : () => {
-              navigateCommandMenuHistory(index);
-            },
-      };
-    });
-  }, [
-    commandMenuNavigationStack,
-    navigateCommandMenuHistory,
-    theme.icon.size.sm,
-  ]);
+  const { contextChips } = useCommandMenuContextChips();

  const location = useLocation();
  const isButtonVisible =
--- a/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts
+++ b/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts
@ -24,6 +24,8 @@ import { useResetContextStoreStates } from '@/command-menu/hooks/useResetContext
 import { viewableRecordIdComponentState } from '@/command-menu/pages/record-page/states/viewableRecordIdComponentState';
 import { viewableRecordNameSingularComponentState } from '@/command-menu/pages/record-page/states/viewableRecordNameSingularComponentState';
 import { workflowIdComponentState } from '@/command-menu/pages/workflow/states/workflowIdComponentState';
+import { commandMenuNavigationMorphItemByPageState } from '@/command-menu/states/commandMenuNavigationMorphItemsState';
+import { commandMenuNavigationRecordsState } from '@/command-menu/states/commandMenuNavigationRecordsState';
 import { commandMenuNavigationStackState } from '@/command-menu/states/commandMenuNavigationStackState';
 import { commandMenuPageInfoState } from '@/command-menu/states/commandMenuPageInfoState';
 import { commandMenuPageState } from '@/command-menu/states/commandMenuPageState';
@ -38,10 +40,12 @@ import { contextStoreFiltersComponentState } from '@/context-store/states/contex
 import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState';
 import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
 import { ContextStoreViewType } from '@/context-store/types/ContextStoreViewType';
+import { getIconColorForObjectType } from '@/object-metadata/utils/getIconColorForObjectType';
 import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState';
 import { useDropdownV2 } from '@/ui/layout/dropdown/hooks/useDropdownV2';
 import { emitRightDrawerCloseEvent } from '@/ui/layout/right-drawer/utils/emitRightDrawerCloseEvent';
 import { isDragSelectionStartEnabledState } from '@/ui/utilities/drag-select/states/internal/isDragSelectionStartEnabledState';
+import { useTheme } from '@emotion/react';
 import { t } from '@lingui/core/macro';
 import { useCallback } from 'react';
 import { capitalize, isDefined } from 'twenty-shared';
@ -52,6 +56,7 @@ export type CommandMenuNavigationStackItem = {
  page: CommandMenuPages;
  pageTitle: string;
  pageIcon: IconComponent;
+  pageIconColor?: string;
  pageId?: string;
 };

@ -68,6 +73,8 @@ export const useCommandMenu = () => {

  const { closeDropdown } = useDropdownV2();

+  const theme = useTheme();
+
  const closeCommandMenu = useRecoilCallback(
    ({ set }) =>
      () => {
@ -95,6 +102,8 @@ export const useCommandMenu = () => {
        });
        set(isCommandMenuOpenedState, false);
        set(commandMenuSearchState, '');
+        set(commandMenuNavigationMorphItemByPageState, new Map());
+        set(commandMenuNavigationRecordsState, []);
        set(commandMenuNavigationStackState, []);
        resetSelectedItem();
        set(hasUserSelectedCommandState, false);
@ -154,6 +163,7 @@ export const useCommandMenu = () => {
        page,
        pageTitle,
        pageIcon,
+        pageIconColor,
        pageId,
        resetNavigationStack = false,
      }: CommandMenuNavigationStackItem & {
@ -185,9 +195,13 @@ export const useCommandMenu = () => {
              page,
              pageTitle,
              pageIcon,
+              pageIconColor,
              pageId,
            },
          ]);
+
+          set(commandMenuNavigationRecordsState, []);
+          set(commandMenuNavigationMorphItemByPageState, new Map());
        } else {
          set(commandMenuNavigationStackState, [
            ...currentNavigationStack,
@ -195,6 +209,7 @@ export const useCommandMenu = () => {
              page,
              pageTitle,
              pageIcon,
+              pageIconColor,
              pageId,
            },
          ]);
@ -255,6 +270,21 @@ export const useCommandMenu = () => {
        });

        set(commandMenuNavigationStackState, newNavigationStack);
+
+        const currentMorphItems = snapshot
+          .getLoadable(commandMenuNavigationMorphItemByPageState)
+          .getValue();
+
+        if (currentNavigationStack.length > 0) {
+          const removedItem = currentNavigationStack.at(-1);
+
+          if (isDefined(removedItem)) {
+            const newMorphItems = new Map(currentMorphItems);
+            newMorphItems.delete(removedItem.pageId);
+            set(commandMenuNavigationMorphItemByPageState, newMorphItems);
+          }
+        }
+
        set(hasUserSelectedCommandState, false);
      };
    },
@ -285,6 +315,17 @@ export const useCommandMenu = () => {
        Icon: newNavigationStackItem?.pageIcon,
        instanceId: newNavigationStackItem?.pageId,
      });
+      const currentMorphItems = snapshot
+        .getLoadable(commandMenuNavigationMorphItemByPageState)
+        .getValue();
+
+      const newMorphItems = new Map(
+        Array.from(currentMorphItems.entries()).filter(([pageId]) =>
+          newNavigationStack.some((item) => item.pageId === pageId),
+        ),
+      );
+
+      set(commandMenuNavigationMorphItemByPageState, newMorphItems);

      set(hasUserSelectedCommandState, false);
    };
@ -376,10 +417,31 @@ export const useCommandMenu = () => {
            .getValue(),
        );

+        const currentMorphItems = snapshot
+          .getLoadable(commandMenuNavigationMorphItemByPageState)
+          .getValue();
+
+        const morphItemToAdd = {
+          objectMetadataId: objectMetadataItem.id,
+          recordId,
+        };
+
+        const newMorphItems = new Map([
+          ...currentMorphItems,
+          [pageComponentInstanceId, morphItemToAdd],
+        ]);
+
+        set(commandMenuNavigationMorphItemByPageState, newMorphItems);
+
        const Icon = objectMetadataItem?.icon
          ? getIcon(objectMetadataItem.icon)
          : getIcon('IconList');

+        const IconColor = getIconColorForObjectType({
+          objectType: objectMetadataItem.nameSingular,
+          theme,
+        });
+
        const capitalizedObjectNameSingular = capitalize(objectNameSingular);

        navigateCommandMenu({
@ -388,12 +450,13 @@ export const useCommandMenu = () => {
            ? t`New ${capitalizedObjectNameSingular}`
            : capitalizedObjectNameSingular,
          pageIcon: Icon,
+          pageIconColor: IconColor,
          pageId: pageComponentInstanceId,
          resetNavigationStack: false,
        });
      };
    },
-    [getIcon, navigateCommandMenu],
+    [getIcon, navigateCommandMenu, theme],
  );

  const openWorkflowTriggerTypeInCommandMenu = useRecoilCallback(
@ -522,6 +585,31 @@ export const useCommandMenu = () => {
          calendarEventId,
        );

+        // TODO: Uncomment this once we need to calendar event title in the navigation
+        // const objectMetadataItem = snapshot
+        //   .getLoadable(objectMetadataItemsState)
+        //   .getValue()
+        //   .find(
+        //     ({ nameSingular }) =>
+        //       nameSingular === CoreObjectNameSingular.CalendarEvent,
+        //   );
+
+        // set(
+        //   commandMenuNavigationMorphItemsState,
+        //   new Map([
+        //     ...snapshot
+        //       .getLoadable(commandMenuNavigationMorphItemsState)
+        //       .getValue(),
+        //     [
+        //       pageComponentInstanceId,
+        //       {
+        //         objectMetadataId: objectMetadataItem?.id,
+        //         recordId: calendarEventId,
+        //       },
+        //     ],
+        //   ]),
+        // );
+
        navigateCommandMenu({
          page: CommandMenuPages.ViewCalendarEvent,
          pageTitle: 'Calendar Event',
@ -545,6 +633,31 @@ export const useCommandMenu = () => {
          emailThreadId,
        );

+        // TODO: Uncomment this once we need to show the thread title in the navigation
+        // const objectMetadataItem = snapshot
+        //   .getLoadable(objectMetadataItemsState)
+        //   .getValue()
+        //   .find(
+        //     ({ nameSingular }) =>
+        //       nameSingular === CoreObjectNameSingular.MessageThread,
+        //   );
+
+        // set(
+        //   commandMenuNavigationMorphItemsState,
+        //   new Map([
+        //     ...snapshot
+        //       .getLoadable(commandMenuNavigationMorphItemsState)
+        //       .getValue(),
+        //     [
+        //       pageComponentInstanceId,
+        //       {
+        //         objectMetadataId: objectMetadataItem?.id,
+        //         recordId: emailThreadId,
+        //       },
+        //     ],
+        //   ]),
+        // );
+
        navigateCommandMenu({
          page: CommandMenuPages.ViewEmailThread,
          pageTitle: 'Email Thread',
--- a/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuContextChips.tsx
+++ b/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuContextChips.tsx
@ -0,0 +1,133 @@
+import { CommandMenuContextRecordChipAvatars } from '@/command-menu/components/CommandMenuContextRecordChipAvatars';
+import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
+import { commandMenuNavigationMorphItemByPageState } from '@/command-menu/states/commandMenuNavigationMorphItemsState';
+import { commandMenuNavigationRecordsState } from '@/command-menu/states/commandMenuNavigationRecordsState';
+import { commandMenuNavigationStackState } from '@/command-menu/states/commandMenuNavigationStackState';
+import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
+import { getObjectRecordIdentifier } from '@/object-metadata/utils/getObjectRecordIdentifier';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { useMemo } from 'react';
+import { useRecoilValue } from 'recoil';
+import { isDefined } from 'twenty-shared';
+
+const StyledIconWrapper = styled.div`
+  background: ${({ theme }) => theme.background.primary};
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const useCommandMenuContextChips = () => {
+  const commandMenuNavigationStack = useRecoilValue(
+    commandMenuNavigationStackState,
+  );
+
+  const { navigateCommandMenuHistory } = useCommandMenu();
+
+  const theme = useTheme();
+
+  const commandMenuNavigationMorphItemByPage = useRecoilValue(
+    commandMenuNavigationMorphItemByPageState,
+  );
+
+  const commandMenuNavigationRecords = useRecoilValue(
+    commandMenuNavigationRecordsState,
+  );
+
+  const contextChips = useMemo(() => {
+    const filteredCommandMenuNavigationStack =
+      commandMenuNavigationStack.filter(
+        (page) => page.page !== CommandMenuPages.Root,
+      );
+
+    return filteredCommandMenuNavigationStack
+      .map((page, index) => {
+        const isLastChip =
+          index === filteredCommandMenuNavigationStack.length - 1;
+
+        const isRecordPage = page.page === CommandMenuPages.ViewRecord;
+
+        if (isRecordPage && !isLastChip) {
+          const commandMenuNavigationMorphItem =
+            commandMenuNavigationMorphItemByPage.get(page.pageId);
+
+          if (!isDefined(commandMenuNavigationMorphItem?.recordId)) {
+            return null;
+          }
+
+          const objectMetadataItem = commandMenuNavigationRecords.find(
+            ({ objectMetadataItem }) =>
+              objectMetadataItem.id ===
+              commandMenuNavigationMorphItem.objectMetadataId,
+          )?.objectMetadataItem;
+
+          const record = commandMenuNavigationRecords.find(
+            ({ record }) =>
+              record.id === commandMenuNavigationMorphItem.recordId,
+          )?.record;
+
+          if (!isDefined(objectMetadataItem) || !isDefined(record)) {
+            return null;
+          }
+
+          const name = getObjectRecordIdentifier({
+            objectMetadataItem,
+            record,
+          }).name;
+
+          return {
+            page,
+            Icons: [
+              <CommandMenuContextRecordChipAvatars
+                objectMetadataItem={objectMetadataItem}
+                record={record}
+              />,
+            ],
+            text: name,
+            onClick: () => {
+              navigateCommandMenuHistory(index);
+            },
+          };
+        }
+
+        return {
+          page,
+          Icons: isLastChip
+            ? [<page.pageIcon size={theme.icon.size.sm} />]
+            : [
+                <StyledIconWrapper>
+                  <page.pageIcon
+                    size={theme.icon.size.sm}
+                    color={
+                      isDefined(page.pageIconColor) &&
+                      page.pageIconColor !== 'currentColor'
+                        ? page.pageIconColor
+                        : theme.font.color.tertiary
+                    }
+                  />
+                </StyledIconWrapper>,
+              ],
+          text: page.pageTitle,
+          onClick: isLastChip
+            ? undefined
+            : () => {
+                navigateCommandMenuHistory(index);
+              },
+        };
+      })
+      .filter(isDefined);
+  }, [
+    commandMenuNavigationMorphItemByPage,
+    commandMenuNavigationRecords,
+    commandMenuNavigationStack,
+    navigateCommandMenuHistory,
+    theme.font.color.tertiary,
+    theme.icon.size.sm,
+  ]);
+
+  return {
+    contextChips,
+  };
+};
--- a/packages/twenty-front/src/modules/command-menu/states/commandMenuNavigationMorphItemsState.ts
+++ b/packages/twenty-front/src/modules/command-menu/states/commandMenuNavigationMorphItemsState.ts
@ -0,0 +1,9 @@
+import { MorphItem } from '@/object-record/multiple-objects/types/MorphItem';
+import { createState } from '@ui/utilities/state/utils/createState';
+
+export const commandMenuNavigationMorphItemByPageState = createState<
+  Map<string, MorphItem>
+>({
+  key: 'command-menu/commandMenuNavigationMorphItemByPageState',
+  defaultValue: new Map(),
+});
--- a/packages/twenty-front/src/modules/command-menu/states/commandMenuNavigationRecordsState.ts
+++ b/packages/twenty-front/src/modules/command-menu/states/commandMenuNavigationRecordsState.ts
@ -0,0 +1,13 @@
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { ObjectRecord } from '@/object-record/types/ObjectRecord';
+import { createState } from '@ui/utilities/state/utils/createState';
+
+export const commandMenuNavigationRecordsState = createState<
+  {
+    objectMetadataItem: ObjectMetadataItem;
+    record: ObjectRecord;
+  }[]
+>({
+  key: 'command-menu/commandMenuNavigationRecordsState',
+  defaultValue: [],
+});
--- a/packages/twenty-front/src/modules/command-menu/states/commandMenuNavigationStackState.ts
+++ b/packages/twenty-front/src/modules/command-menu/states/commandMenuNavigationStackState.ts
@ -5,6 +5,7 @@ export type CommandMenuNavigationStackItem = {
  page: CommandMenuPages;
  pageTitle: string;
  pageIcon: IconComponent;
+  pageIconColor?: string;
  pageId: string;
 };