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

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 =