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/object-metadata/hooks/__tests__/useLimitPerMetadataItem.test.tsx

@@ -1,63 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import { RecoilRoot } from 'recoil';
-
-import { useLimitPerMetadataItem } from '@/object-metadata/hooks/useLimitPerMetadataItem';
-import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
-import { SingleRecordPickerComponentInstanceContext } from '@/object-record/record-picker/single-record-picker/states/contexts/SingleRecordPickerComponentInstanceContext';
-
-const instanceId = 'instanceId';
-const Wrapper = ({ children }: { children: React.ReactNode }) => (
-  <SingleRecordPickerComponentInstanceContext.Provider value={{ instanceId }}>
-    <RecoilRoot>{children}</RecoilRoot>
-  </SingleRecordPickerComponentInstanceContext.Provider>
-);
-
-describe('useLimitPerMetadataItem', () => {
-  const objectData: ObjectMetadataItem[] = [
-    {
-      createdAt: 'createdAt',
-      id: 'id',
-      isActive: true,
-      isCustom: true,
-      isSystem: true,
-      isRemote: false,
-      isSearchable: true,
-      labelPlural: 'labelPlural',
-      labelSingular: 'labelSingular',
-      namePlural: 'namePlural',
-      nameSingular: 'nameSingular',
-      labelIdentifierFieldMetadataId: '20202020-72ba-4e11-a36d-e17b544541e1',
-      updatedAt: 'updatedAt',
-      isLabelSyncedWithName: false,
-      fields: [],
-      indexMetadatas: [],
-    },
-  ];
-
-  it('should return object with nameSingular and default limit', async () => {
-    const { result } = renderHook(
-      () => useLimitPerMetadataItem({ objectMetadataItems: objectData }),
-      {
-        wrapper: Wrapper,
-      },
-    );
-
-    expect(result.current.limitPerMetadataItem).toStrictEqual({
-      limitNameSingular: 60,
-    });
-  });
-
-  it('should return an object with nameSingular and specified limit', async () => {
-    const { result } = renderHook(
-      () =>
-        useLimitPerMetadataItem({ objectMetadataItems: objectData, limit: 30 }),
-      {
-        wrapper: Wrapper,
-      },
-    );
-
-    expect(result.current.limitPerMetadataItem).toStrictEqual({
-      limitNameSingular: 30,
-    });
-  });
-});