Fix command menu context chip display on show page (#10267)

## New Company
### Before:
<img width="500" alt="Capture d’écran 2025-02-17 à 16 47 54"
src="https://github.com/user-attachments/assets/4573450d-14b1-41f0-9b86-24003f489fde"
/>

### After:
<img width="500" alt="Capture d’écran 2025-02-17 à 16 46 24"
src="https://github.com/user-attachments/assets/6622bd75-900a-451b-ac21-c98bddeee32d"
/>


## Task
### Before:
<img width="500" alt="Capture d’écran 2025-02-17 à 16 47 35"
src="https://github.com/user-attachments/assets/04b77faa-b628-4839-ab94-95c8570c1818"
/>

### After:
<img width="501" alt="Capture d’écran 2025-02-17 à 16 47 03"
src="https://github.com/user-attachments/assets/1577dea6-7541-497e-af6e-3a4559f1a913"
/>

packages/twenty-front/src/modules/activities/hooks/useOpenActivityRightDrawer.ts

@@ -1,5 +1,6 @@
 import { useRecoilState, useSetRecoilState } from 'recoil';
 
+import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState';
 import { viewableRecordNameSingularState } from '@/object-record/record-right-drawer/states/viewableRecordNameSingularState';
@@ -7,7 +8,6 @@ import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
 import { RightDrawerHotkeyScope } from '@/ui/layout/right-drawer/types/RightDrawerHotkeyScope';
 import { RightDrawerPages } from '@/ui/layout/right-drawer/types/RightDrawerPages';
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
-import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import { IconList } from 'twenty-ui';
 import { FeatureFlagKey } from '~/generated/graphql';
@@ -33,6 +33,8 @@ export const useOpenActivityRightDrawer = ({
     FeatureFlagKey.IsCommandMenuV2Enabled,
   );
 
+  const { openRecordInCommandMenu } = useCommandMenu();
+
   return (activityId: string) => {
     if (
       isRightDrawerOpen &&
@@ -43,16 +45,19 @@ export const useOpenActivityRightDrawer = ({
     }
 
     if (isCommandMenuV2Enabled) {
-      setHotkeyScope(AppHotkeyScope.CommandMenuOpen, { goto: false });
+      openRecordInCommandMenu({
+        recordId: activityId,
+        objectNameSingular,
+        isNewRecord: false,
+      });
     } else {
       setHotkeyScope(RightDrawerHotkeyScope.RightDrawer, { goto: false });
+      setViewableRecordId(activityId);
+      setViewableRecordNameSingular(objectNameSingular);
+      openRightDrawer(RightDrawerPages.ViewRecord, {
+        title: objectNameSingular,
+        Icon: IconList,
+      });
     }
-
-    setViewableRecordId(activityId);
-    setViewableRecordNameSingular(objectNameSingular);
-    openRightDrawer(RightDrawerPages.ViewRecord, {
-      title: objectNameSingular,
-      Icon: IconList,
-    });
   };
 };

packages/twenty-front/src/modules/activities/hooks/useOpenCreateActivityDrawer.ts

@@ -13,11 +13,11 @@ import { Note } from '@/activities/types/Note';
 import { NoteTarget } from '@/activities/types/NoteTarget';
 import { Task } from '@/activities/types/Task';
 import { TaskTarget } from '@/activities/types/TaskTarget';
+import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
 import { isNewViewableRecordLoadingState } from '@/object-record/record-right-drawer/states/isNewViewableRecordLoading';
 import { viewableRecordNameSingularState } from '@/object-record/record-right-drawer/states/viewableRecordNameSingularState';
-import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import { IconList } from 'twenty-ui';
 import { FeatureFlagKey } from '~/generated/graphql';
@@ -68,6 +68,8 @@ export const useOpenCreateActivityDrawer = ({
     FeatureFlagKey.IsCommandMenuV2Enabled,
   );
 
+  const { openRecordInCommandMenu } = useCommandMenu();
+
   const openCreateActivityDrawer = async ({
     targetableObjects,
     customAssignee,
@@ -76,10 +78,12 @@ export const useOpenCreateActivityDrawer = ({
     customAssignee?: WorkspaceMember;
   }) => {
     setIsNewViewableRecordLoading(true);
-    openRightDrawer(RightDrawerPages.ViewRecord, {
-      title: activityObjectNameSingular,
-      Icon: IconList,
-    });
+    if (!isCommandMenuV2Enabled) {
+      openRightDrawer(RightDrawerPages.ViewRecord, {
+        title: activityObjectNameSingular,
+        Icon: IconList,
+      });
+    }
     setViewableRecordId(null);
     setViewableRecordNameSingular(activityObjectNameSingular);
 
@@ -122,7 +126,11 @@ export const useOpenCreateActivityDrawer = ({
     }
 
     if (isCommandMenuV2Enabled) {
-      setHotkeyScope(AppHotkeyScope.CommandMenuOpen, { goto: false });
+      openRecordInCommandMenu({
+        recordId: activity.id,
+        objectNameSingular: activityObjectNameSingular,
+        isNewRecord: true,
+      });
     } else {
       setHotkeyScope(RightDrawerHotkeyScope.RightDrawer, { goto: false });
     }

packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChipGroupsWithRecordSelection.tsx

@@ -3,6 +3,7 @@ import { CommandMenuContextRecordChipAvatars } from '@/command-menu/components/C
 import { getSelectedRecordsContextText } from '@/command-menu/utils/getRecordContextText';
 import { useFindManyRecordsSelectedInContextStore } from '@/context-store/hooks/useFindManyRecordsSelectedInContextStore';
 import { useObjectMetadataItemById } from '@/object-metadata/hooks/useObjectMetadataItemById';
+import { isDefined } from 'twenty-shared';
 import { CommandMenuContextChipProps } from './CommandMenuContextChip';
 
 export const CommandMenuContextChipGroupsWithRecordSelection = ({
@@ -21,7 +22,7 @@ export const CommandMenuContextChipGroupsWithRecordSelection = ({
       limit: 3,
     });
 
-  if (loading || !totalCount) {
+  if (loading) {
     return null;
   }
 
@@ -33,21 +34,25 @@ export const CommandMenuContextChipGroupsWithRecordSelection = ({
     />
   ));
 
-  const selectedRecordsContextText = getSelectedRecordsContextText(
-    objectMetadataItem,
-    records,
-    totalCount,
-  );
+  const recordSelectionContextChip = totalCount
+    ? {
+        text: getSelectedRecordsContextText(
+          objectMetadataItem,
+          records,
+          totalCount,
+        ),
+        Icons: Avatars,
+      }
+    : undefined;
+
+  const contextChipsWithRecordSelection = [
+    recordSelectionContextChip,
+    ...contextChips,
+  ].filter(isDefined);
 
   return (
     <CommandMenuContextChipGroups
-      contextChips={[
-        {
-          text: selectedRecordsContextText,
-          Icons: Avatars,
-        },
-        ...contextChips,
-      ]}
+      contextChips={contextChipsWithRecordSelection}
     />
   );
 };

packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts

@@ -1,9 +1,11 @@
 import { useRecoilCallback, useRecoilValue } from 'recoil';
 
 import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchState';
+import { objectMetadataItemFamilySelector } from '@/object-metadata/states/objectMetadataItemFamilySelector';
 import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
 import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
 import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
+import { IconDotsVertical, IconSearch, useIcons } from 'twenty-ui';
 
 import { useCopyContextStoreStates } from '@/command-menu/hooks/useCopyContextStoreAndActionMenuStates';
 import { useResetContextStoreStates } from '@/command-menu/hooks/useResetContextStoreStates';
@@ -24,9 +26,9 @@ import { ContextStoreViewType } from '@/context-store/types/ContextStoreViewType
 import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState';
 import { viewableRecordNameSingularState } from '@/object-record/record-right-drawer/states/viewableRecordNameSingularState';
 import { emitRightDrawerCloseEvent } from '@/ui/layout/right-drawer/utils/emitRightDrawerCloseEvent';
+import { t } from '@lingui/core/macro';
 import { useCallback } from 'react';
-import { isDefined } from 'twenty-shared';
-import { IconDotsVertical, IconList, IconSearch } from 'twenty-ui';
+import { capitalize, isDefined } from 'twenty-shared';
 import { isCommandMenuOpenedState } from '../states/isCommandMenuOpenedState';
 
 export const useCommandMenu = () => {
@@ -35,6 +37,7 @@ export const useCommandMenu = () => {
     setHotkeyScopeAndMemorizePreviousScope,
     goBackToPreviousHotkeyScope,
   } = usePreviousHotkeyScope();
+  const { getIcon } = useIcons();
 
   const mainContextStoreComponentInstanceId = useRecoilValue(
     mainContextStoreComponentInstanceIdState,
@@ -211,18 +214,44 @@ export const useCommandMenu = () => {
   }, []);
 
   const openRecordInCommandMenu = useRecoilCallback(
-    ({ set }) => {
-      return (recordId: string, objectNameSingular: string) => {
+    ({ set, snapshot }) => {
+      return ({
+        recordId,
+        objectNameSingular,
+        isNewRecord = false,
+      }: {
+        recordId: string;
+        objectNameSingular: string;
+        isNewRecord?: boolean;
+      }) => {
         set(viewableRecordNameSingularState, objectNameSingular);
         set(viewableRecordIdState, recordId);
+
+        const objectMetadataItem = snapshot
+          .getLoadable(
+            objectMetadataItemFamilySelector({
+              objectName: objectNameSingular,
+              objectNameType: 'singular',
+            }),
+          )
+          .getValue();
+
+        const Icon = objectMetadataItem?.icon
+          ? getIcon(objectMetadataItem.icon)
+          : getIcon('IconList');
+
+        const capitalizedObjectNameSingular = capitalize(objectNameSingular);
+
         navigateCommandMenu({
           page: CommandMenuPages.ViewRecord,
-          pageTitle: objectNameSingular,
-          pageIcon: IconList,
+          pageTitle: isNewRecord
+            ? t`New ${capitalizedObjectNameSingular}`
+            : capitalizedObjectNameSingular,
+          pageIcon: Icon,
         });
       };
     },
-    [navigateCommandMenu],
+    [getIcon, navigateCommandMenu],
   );
 
   const openRecordsSearchPage = () => {

packages/twenty-front/src/modules/object-record/record-table/hooks/useCreateNewTableRecords.ts

@@ -89,7 +89,11 @@ export const useCreateNewTableRecord = ({
 
       await createOneRecord({ id: recordId });
 
-      openRecordInCommandMenu(recordId, objectMetadataItem.nameSingular);
+      openRecordInCommandMenu({
+        recordId,
+        objectNameSingular: objectMetadataItem.nameSingular,
+        isNewRecord: true,
+      });
 
       openRecordTitleCell({
         recordId,