Refactor actions (#8761)

Closes #8737 
- Refactored actions by creating hooks to add the possibility to
register actions programatically.
- Small fixes from #8610 review
- Fixed shortcuts display inside the command menu
- Removed `actionMenuEntriesComponentState` and introduced
`actionMenuEntriesComponentSelector`

packages/twenty-front/src/modules/action-menu/actions/global-actions/components/GlobalActionMenuEntriesSetter.tsx

@@ -1,8 +0,0 @@
-import { WorkflowRunActionEffect } from '@/action-menu/actions/global-actions/workflow-run-actions/components/WorkflowRunActionEffect';
-import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
-
-export const GlobalActionMenuEntriesSetter = () => {
-  const isWorkflowEnabled = useIsFeatureEnabled('IS_WORKFLOW_ENABLED');
-
-  return <>{isWorkflowEnabled && <WorkflowRunActionEffect />}</>;
-};

packages/twenty-front/src/modules/action-menu/actions/record-actions/components/RecordActionMenuEntriesSetter.tsx

@@ -1,26 +1,12 @@
-import { DeleteRecordsActionEffect } from '@/action-menu/actions/record-actions/components/DeleteRecordsActionEffect';
+import { MultipleRecordsActionMenuEntrySetterEffect } from '@/action-menu/actions/record-actions/multiple-records/components/MultipleRecordsActionMenuEntrySetterEffect';
-import { ExportRecordsActionEffect } from '@/action-menu/actions/record-actions/components/ExportRecordsActionEffect';
+import { NoSelectionActionMenuEntrySetterEffect } from '@/action-menu/actions/record-actions/no-selection/components/NoSelectionActionMenuEntrySetterEffect';
-import { ManageFavoritesActionEffect } from '@/action-menu/actions/record-actions/components/ManageFavoritesActionEffect';
+import { SingleRecordActionMenuEntrySetterEffect } from '@/action-menu/actions/record-actions/single-record/components/SingleRecordActionMenuEntrySetterEffect';
-import { WorkflowRunRecordActionEffect } from '@/action-menu/actions/record-actions/workflow-run-record-actions/components/WorkflowRunRecordActionEffect';
 import { contextStoreCurrentObjectMetadataIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdComponentState';
 import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState';
 import { useObjectMetadataItemById } from '@/object-metadata/hooks/useObjectMetadataItemById';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
-import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import { isDefined } from 'twenty-ui';
 
-const noSelectionRecordActionEffects = [ExportRecordsActionEffect];
-
-const singleRecordActionEffects = [
-  ManageFavoritesActionEffect,
-  DeleteRecordsActionEffect,
-];
-
-const multipleRecordActionEffects = [
-  ExportRecordsActionEffect,
-  DeleteRecordsActionEffect,
-];
-
 export const RecordActionMenuEntriesSetter = () => {
   const contextStoreCurrentObjectMetadataId = useRecoilComponentValueV2(
     contextStoreCurrentObjectMetadataIdComponentState,
@@ -48,26 +34,20 @@ const ActionEffects = ({
     contextStoreNumberOfSelectedRecordsComponentState,
   );
 
-  const isWorkflowEnabled = useIsFeatureEnabled('IS_WORKFLOW_ENABLED');
-
-  const actions =
-    contextStoreNumberOfSelectedRecords === 0
-      ? noSelectionRecordActionEffects
-      : contextStoreNumberOfSelectedRecords === 1
-        ? singleRecordActionEffects
-        : multipleRecordActionEffects;
-
   return (
     <>
-      {actions.map((ActionEffect, index) => (
+      {contextStoreNumberOfSelectedRecords === 0 && (
-        <ActionEffect
+        <NoSelectionActionMenuEntrySetterEffect
-          key={index}
-          position={index}
           objectMetadataItem={objectMetadataItem}
         />
-      ))}
+      )}
-      {contextStoreNumberOfSelectedRecords === 1 && isWorkflowEnabled && (
+      {contextStoreNumberOfSelectedRecords === 1 && (
-        <WorkflowRunRecordActionEffect
+        <SingleRecordActionMenuEntrySetterEffect
+          objectMetadataItem={objectMetadataItem}
+        />
+      )}
+      {contextStoreNumberOfSelectedRecords > 1 && (
+        <MultipleRecordsActionMenuEntrySetterEffect
           objectMetadataItem={objectMetadataItem}
         />
       )}

packages/twenty-front/src/modules/action-menu/actions/record-actions/multiple-records/components/MultipleRecordsActionMenuEntrySetterEffect.tsx

@@ -0,0 +1,24 @@
+import { useMultipleRecordsActions } from '@/action-menu/actions/record-actions/multiple-records/hooks/useMultipleRecordsActions';
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { useEffect } from 'react';
+
+export const MultipleRecordsActionMenuEntrySetterEffect = ({
+  objectMetadataItem,
+}: {
+  objectMetadataItem: ObjectMetadataItem;
+}) => {
+  const { registerMultipleRecordsActions, unregisterMultipleRecordsActions } =
+    useMultipleRecordsActions({
+      objectMetadataItem,
+    });
+
+  useEffect(() => {
+    registerMultipleRecordsActions();
+
+    return () => {
+      unregisterMultipleRecordsActions();
+    };
+  }, [registerMultipleRecordsActions, unregisterMultipleRecordsActions]);
+
+  return null;
+};

packages/twenty-front/src/modules/action-menu/actions/record-actions/multiple-records/hooks/useDeleteMultipleRecordsAction.tsx

@@ -18,10 +18,10 @@ import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTabl
 import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
 import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
-import { useCallback, useContext, useEffect, useState } from 'react';
+import { useCallback, useContext, useState } from 'react';
 import { IconTrash, isDefined } from 'twenty-ui';
 
-export const DeleteRecordsActionEffect = ({
+export const useDeleteMultipleRecordsAction = ({
   position,
   objectMetadataItem,
 }: {
@@ -106,12 +106,12 @@ export const DeleteRecordsActionEffect = ({
   const { isInRightDrawer, onActionExecutedCallback } =
     useContext(ActionMenuContext);
 
-  useEffect(() => {
+  const registerDeleteMultipleRecordsAction = () => {
     if (canDelete) {
       addActionMenuEntry({
         type: ActionMenuEntryType.Standard,
         scope: ActionMenuEntryScope.RecordSelection,
-        key: 'delete',
+        key: 'delete-multiple-records',
         label: 'Delete',
         position,
         Icon: IconTrash,
@@ -124,16 +124,8 @@ export const DeleteRecordsActionEffect = ({
           <ConfirmationModal
             isOpen={isDeleteRecordsModalOpen}
             setIsOpen={setIsDeleteRecordsModalOpen}
-            title={`Delete ${contextStoreNumberOfSelectedRecords} ${
+            title={'Delete Records'}
-              contextStoreNumberOfSelectedRecords === 1 ? `record` : 'records'
+            subtitle={`Are you sure you want to delete these records? They can be recovered from the Options menu.`}
-            }`}
-            subtitle={`Are you sure you want to delete ${
-              contextStoreNumberOfSelectedRecords === 1
-                ? 'this record'
-                : 'these records'
-            }? ${
-              contextStoreNumberOfSelectedRecords === 1 ? 'It' : 'They'
-            } can be recovered from the Options menu.`}
             onConfirmClick={() => {
               handleDeleteClick();
               onActionExecutedCallback?.();
@@ -141,31 +133,19 @@ export const DeleteRecordsActionEffect = ({
                 closeRightDrawer();
               }
             }}
-            deleteButtonText={`Delete ${
+            deleteButtonText={'Delete Records'}
-              contextStoreNumberOfSelectedRecords > 1 ? 'Records' : 'Record'
-            }`}
           />
         ),
       });
-    } else {
-      removeActionMenuEntry('delete');
     }
+  };
 
-    return () => {
+  const unregisterDeleteMultipleRecordsAction = () => {
-      removeActionMenuEntry('delete');
+    removeActionMenuEntry('delete-multiple-records');
-    };
+  };
-  }, [
-    addActionMenuEntry,
-    canDelete,
-    closeRightDrawer,
-    contextStoreNumberOfSelectedRecords,
-    handleDeleteClick,
-    isDeleteRecordsModalOpen,
-    isInRightDrawer,
-    onActionExecutedCallback,
-    position,
-    removeActionMenuEntry,
-  ]);
 
-  return null;
+  return {
+    registerDeleteMultipleRecordsAction,
+    unregisterDeleteMultipleRecordsAction,
+  };
 };

packages/twenty-front/src/modules/action-menu/actions/record-actions/multiple-records/hooks/useExportMultipleRecordsAction.tsx

@@ -1,7 +1,5 @@
 import { useActionMenuEntries } from '@/action-menu/hooks/useActionMenuEntries';
-import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState';
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
-import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { IconDatabaseExport } from 'twenty-ui';
 
 import {
@@ -12,9 +10,8 @@ import {
   displayedExportProgress,
   useExportRecords,
 } from '@/object-record/record-index/export/hooks/useExportRecords';
-import { useEffect } from 'react';
 
-export const ExportRecordsActionEffect = ({
+export const useExportMultipleRecordsAction = ({
   position,
   objectMetadataItem,
 }: {
@@ -22,9 +19,6 @@ export const ExportRecordsActionEffect = ({
   objectMetadataItem: ObjectMetadataItem;
 }) => {
   const { addActionMenuEntry, removeActionMenuEntry } = useActionMenuEntries();
-  const contextStoreNumberOfSelectedRecords = useRecoilComponentValueV2(
-    contextStoreNumberOfSelectedRecordsComponentState,
-  );
 
   const { progress, download } = useExportRecords({
     delayMs: 100,
@@ -33,32 +27,25 @@ export const ExportRecordsActionEffect = ({
     filename: `${objectMetadataItem.nameSingular}.csv`,
   });
 
-  useEffect(() => {
+  const registerExportMultipleRecordsAction = () => {
     addActionMenuEntry({
       type: ActionMenuEntryType.Standard,
-      scope:
+      scope: ActionMenuEntryScope.RecordSelection,
-        contextStoreNumberOfSelectedRecords > 0
+      key: 'export-multiple-records',
-          ? ActionMenuEntryScope.RecordSelection
-          : ActionMenuEntryScope.Global,
-      key: 'export',
       position,
       label: displayedExportProgress(progress),
       Icon: IconDatabaseExport,
       accent: 'default',
       onClick: () => download(),
     });
+  };
 
-    return () => {
+  const unregisterExportMultipleRecordsAction = () => {
-      removeActionMenuEntry('export');
+    removeActionMenuEntry('export-multiple-records');
-    };
+  };
-  }, [
-    contextStoreNumberOfSelectedRecords,
-    download,
-    progress,
-    addActionMenuEntry,
-    removeActionMenuEntry,
-    position,
-  ]);
 
-  return null;
+  return {
+    registerExportMultipleRecordsAction,
+    unregisterExportMultipleRecordsAction,
+  };
 };

packages/twenty-front/src/modules/action-menu/actions/record-actions/multiple-records/hooks/useMultipleRecordsActions.tsx

@@ -0,0 +1,40 @@
+import { useDeleteMultipleRecordsAction } from '@/action-menu/actions/record-actions/multiple-records/hooks/useDeleteMultipleRecordsAction';
+import { useExportViewNoSelectionRecordAction } from '@/action-menu/actions/record-actions/no-selection/hooks/useExportMultipleRecordsAction';
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+
+export const useMultipleRecordsActions = ({
+  objectMetadataItem,
+}: {
+  objectMetadataItem: ObjectMetadataItem;
+}) => {
+  const {
+    registerDeleteMultipleRecordsAction,
+    unregisterDeleteMultipleRecordsAction,
+  } = useDeleteMultipleRecordsAction({
+    position: 0,
+    objectMetadataItem,
+  });
+
+  const {
+    registerExportViewNoSelectionRecordsAction,
+    unregisterExportViewNoSelectionRecordsAction,
+  } = useExportViewNoSelectionRecordAction({
+    position: 1,
+    objectMetadataItem,
+  });
+
+  const registerMultipleRecordsActions = () => {
+    registerDeleteMultipleRecordsAction();
+    registerExportViewNoSelectionRecordsAction();
+  };
+
+  const unregisterMultipleRecordsActions = () => {
+    unregisterDeleteMultipleRecordsAction();
+    unregisterExportViewNoSelectionRecordsAction();
+  };
+
+  return {
+    registerMultipleRecordsActions,
+    unregisterMultipleRecordsActions,
+  };
+};

packages/twenty-front/src/modules/action-menu/actions/record-actions/no-selection/components/NoSelectionActionMenuEntrySetterEffect.tsx

@@ -0,0 +1,26 @@
+import { useNoSelectionRecordActions } from '@/action-menu/actions/record-actions/no-selection/hooks/useNoSelectionRecordActions';
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { useEffect } from 'react';
+
+export const NoSelectionActionMenuEntrySetterEffect = ({
+  objectMetadataItem,
+}: {
+  objectMetadataItem: ObjectMetadataItem;
+}) => {
+  const {
+    registerNoSelectionRecordActions,
+    unregisterNoSelectionRecordActions,
+  } = useNoSelectionRecordActions({
+    objectMetadataItem,
+  });
+
+  useEffect(() => {
+    registerNoSelectionRecordActions();
+
+    return () => {
+      unregisterNoSelectionRecordActions();
+    };
+  }, [registerNoSelectionRecordActions, unregisterNoSelectionRecordActions]);
+
+  return null;
+};

packages/twenty-front/src/modules/action-menu/actions/record-actions/no-selection/hooks/useExportMultipleRecordsAction.tsx

@@ -0,0 +1,51 @@
+import { useActionMenuEntries } from '@/action-menu/hooks/useActionMenuEntries';
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { IconDatabaseExport } from 'twenty-ui';
+
+import {
+  ActionMenuEntryScope,
+  ActionMenuEntryType,
+} from '@/action-menu/types/ActionMenuEntry';
+import {
+  displayedExportProgress,
+  useExportRecords,
+} from '@/object-record/record-index/export/hooks/useExportRecords';
+
+export const useExportViewNoSelectionRecordAction = ({
+  position,
+  objectMetadataItem,
+}: {
+  position: number;
+  objectMetadataItem: ObjectMetadataItem;
+}) => {
+  const { addActionMenuEntry, removeActionMenuEntry } = useActionMenuEntries();
+
+  const { progress, download } = useExportRecords({
+    delayMs: 100,
+    objectMetadataItem,
+    recordIndexId: objectMetadataItem.namePlural,
+    filename: `${objectMetadataItem.nameSingular}.csv`,
+  });
+
+  const registerExportViewNoSelectionRecordsAction = () => {
+    addActionMenuEntry({
+      type: ActionMenuEntryType.Standard,
+      scope: ActionMenuEntryScope.Global,
+      key: 'export-view-no-selection',
+      position,
+      label: displayedExportProgress(progress),
+      Icon: IconDatabaseExport,
+      accent: 'default',
+      onClick: () => download(),
+    });
+  };
+
+  const unregisterExportViewNoSelectionRecordsAction = () => {
+    removeActionMenuEntry('export-view-no-selection');
+  };
+
+  return {
+    registerExportViewNoSelectionRecordsAction,
+    unregisterExportViewNoSelectionRecordsAction,
+  };
+};

packages/twenty-front/src/modules/action-menu/actions/record-actions/no-selection/hooks/useNoSelectionRecordActions.tsx

@@ -0,0 +1,29 @@
+import { useExportViewNoSelectionRecordAction } from '@/action-menu/actions/record-actions/no-selection/hooks/useExportMultipleRecordsAction';
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+
+export const useNoSelectionRecordActions = ({
+  objectMetadataItem,
+}: {
+  objectMetadataItem: ObjectMetadataItem;
+}) => {
+  const {
+    registerExportViewNoSelectionRecordsAction,
+    unregisterExportViewNoSelectionRecordsAction,
+  } = useExportViewNoSelectionRecordAction({
+    position: 0,
+    objectMetadataItem,
+  });
+
+  const registerNoSelectionRecordActions = () => {
+    registerExportViewNoSelectionRecordsAction();
+  };
+
+  const unregisterNoSelectionRecordActions = () => {
+    unregisterExportViewNoSelectionRecordsAction();
+  };
+
+  return {
+    registerNoSelectionRecordActions,
+    unregisterNoSelectionRecordActions,
+  };
+};

packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/components/SingleRecordActionMenuEntrySetterEffect.tsx

@@ -0,0 +1,24 @@
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { useEffect } from 'react';
+import { useSingleRecordActions } from '../hooks/useSingleRecordActions';
+
+export const SingleRecordActionMenuEntrySetterEffect = ({
+  objectMetadataItem,
+}: {
+  objectMetadataItem: ObjectMetadataItem;
+}) => {
+  const { registerSingleRecordActions, unregisterSingleRecordActions } =
+    useSingleRecordActions({
+      objectMetadataItem,
+    });
+
+  useEffect(() => {
+    registerSingleRecordActions();
+
+    return () => {
+      unregisterSingleRecordActions();
+    };
+  }, [registerSingleRecordActions, unregisterSingleRecordActions]);
+
+  return null;
+};

packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/hooks/useDeleteSingleRecordAction.tsx

@@ -0,0 +1,128 @@
+import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext';
+import { useActionMenuEntries } from '@/action-menu/hooks/useActionMenuEntries';
+import {
+  ActionMenuEntryScope,
+  ActionMenuEntryType,
+} from '@/action-menu/types/ActionMenuEntry';
+import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
+import { useDeleteFavorite } from '@/favorites/hooks/useDeleteFavorite';
+import { useFavorites } from '@/favorites/hooks/useFavorites';
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord';
+import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
+import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
+import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { useCallback, useContext, useState } from 'react';
+import { IconTrash, isDefined } from 'twenty-ui';
+
+export const useDeleteSingleRecordAction = ({
+  position,
+  objectMetadataItem,
+}: {
+  position: number;
+  objectMetadataItem: ObjectMetadataItem;
+}) => {
+  const { addActionMenuEntry, removeActionMenuEntry } = useActionMenuEntries();
+
+  const [isDeleteRecordsModalOpen, setIsDeleteRecordsModalOpen] =
+    useState(false);
+
+  const { resetTableRowSelection } = useRecordTable({
+    recordTableId: objectMetadataItem.namePlural,
+  });
+
+  const { deleteOneRecord } = useDeleteOneRecord({
+    objectNameSingular: objectMetadataItem.nameSingular,
+  });
+
+  const { sortedFavorites: favorites } = useFavorites();
+  const { deleteFavorite } = useDeleteFavorite();
+
+  const contextStoreTargetedRecordsRule = useRecoilComponentValueV2(
+    contextStoreTargetedRecordsRuleComponentState,
+  );
+
+  const { closeRightDrawer } = useRightDrawer();
+
+  const recordIdToDelete =
+    contextStoreTargetedRecordsRule.mode === 'selection'
+      ? contextStoreTargetedRecordsRule.selectedRecordIds?.[0]
+      : undefined;
+
+  const handleDeleteClick = useCallback(async () => {
+    if (!isDefined(recordIdToDelete)) {
+      return;
+    }
+
+    resetTableRowSelection();
+
+    const foundFavorite = favorites?.find(
+      (favorite) => favorite.recordId === recordIdToDelete,
+    );
+
+    if (isDefined(foundFavorite)) {
+      deleteFavorite(foundFavorite.id);
+    }
+
+    await deleteOneRecord(recordIdToDelete);
+  }, [
+    deleteFavorite,
+    deleteOneRecord,
+    favorites,
+    recordIdToDelete,
+    resetTableRowSelection,
+  ]);
+
+  const isRemoteObject = objectMetadataItem.isRemote;
+
+  const { isInRightDrawer, onActionExecutedCallback } =
+    useContext(ActionMenuContext);
+
+  const registerDeleteSingleRecordAction = () => {
+    if (isRemoteObject || !isDefined(recordIdToDelete)) {
+      return;
+    }
+
+    addActionMenuEntry({
+      type: ActionMenuEntryType.Standard,
+      scope: ActionMenuEntryScope.RecordSelection,
+      key: 'delete-single-record',
+      label: 'Delete',
+      position,
+      Icon: IconTrash,
+      accent: 'danger',
+      isPinned: true,
+      onClick: () => {
+        setIsDeleteRecordsModalOpen(true);
+      },
+      ConfirmationModal: (
+        <ConfirmationModal
+          isOpen={isDeleteRecordsModalOpen}
+          setIsOpen={setIsDeleteRecordsModalOpen}
+          title={'Delete Record'}
+          subtitle={
+            'Are you sure you want to delete this record? It can be recovered from the Options menu.'
+          }
+          onConfirmClick={() => {
+            handleDeleteClick();
+            onActionExecutedCallback?.();
+            if (isInRightDrawer) {
+              closeRightDrawer();
+            }
+          }}
+          deleteButtonText={'Delete Record'}
+        />
+      ),
+    });
+  };
+
+  const unregisterDeleteSingleRecordAction = () => {
+    removeActionMenuEntry('delete-single-record');
+  };
+
+  return {
+    registerDeleteSingleRecordAction,
+    unregisterDeleteSingleRecordAction,
+  };
+};

packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/hooks/useManageFavoritesSingleRecordAction.tsx

@@ -10,11 +10,10 @@ import { useFavorites } from '@/favorites/hooks/useFavorites';
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
-import { useEffect } from 'react';
 import { useRecoilValue } from 'recoil';
 import { IconHeart, IconHeartOff, isDefined } from 'twenty-ui';
 
-export const ManageFavoritesActionEffect = ({
+export const useManageFavoritesSingleRecordAction = ({
   position,
   objectMetadataItem,
 }: {
@@ -48,7 +47,7 @@ export const ManageFavoritesActionEffect = ({
 
   const isFavorite = !!selectedRecordId && !!foundFavorite;
 
-  useEffect(() => {
+  const registerManageFavoritesSingleRecordAction = () => {
     if (!isDefined(objectMetadataItem) || objectMetadataItem.isRemote) {
       return;
     }
@@ -56,7 +55,7 @@ export const ManageFavoritesActionEffect = ({
     addActionMenuEntry({
       type: ActionMenuEntryType.Standard,
       scope: ActionMenuEntryScope.RecordSelection,
-      key: 'manage-favorites',
+      key: 'manage-favorites-single-record',
       label: isFavorite ? 'Remove from favorites' : 'Add to favorites',
       position,
       Icon: isFavorite ? IconHeartOff : IconHeart,
@@ -68,21 +67,14 @@ export const ManageFavoritesActionEffect = ({
         }
       },
     });
+  };
 
-    return () => {
+  const unregisterManageFavoritesSingleRecordAction = () => {
-      removeActionMenuEntry('manage-favorites');
+    removeActionMenuEntry('manage-favorites-single-record');
-    };
+  };
-  }, [
-    addActionMenuEntry,
-    createFavorite,
-    deleteFavorite,
-    foundFavorite?.id,
-    isFavorite,
-    objectMetadataItem,
-    position,
-    removeActionMenuEntry,
-    selectedRecord,
-  ]);
 
-  return null;
+  return {
+    registerManageFavoritesSingleRecordAction,
+    unregisterManageFavoritesSingleRecordAction,
+  };
 };

packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/hooks/useSingleRecordActions.tsx

@@ -0,0 +1,50 @@
+import { useDeleteSingleRecordAction } from '@/action-menu/actions/record-actions/single-record/hooks/useDeleteSingleRecordAction';
+import { useManageFavoritesSingleRecordAction } from '@/action-menu/actions/record-actions/single-record/hooks/useManageFavoritesSingleRecordAction';
+import { useWorkflowRunRecordActions } from '@/action-menu/actions/record-actions/workflow-run-record-actions/hooks/useWorkflowRunRecordActions';
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+
+export const useSingleRecordActions = ({
+  objectMetadataItem,
+}: {
+  objectMetadataItem: ObjectMetadataItem;
+}) => {
+  const {
+    registerManageFavoritesSingleRecordAction,
+    unregisterManageFavoritesSingleRecordAction,
+  } = useManageFavoritesSingleRecordAction({
+    position: 0,
+    objectMetadataItem,
+  });
+
+  const {
+    registerDeleteSingleRecordAction,
+    unregisterDeleteSingleRecordAction,
+  } = useDeleteSingleRecordAction({
+    position: 1,
+    objectMetadataItem,
+  });
+
+  const {
+    registerWorkflowRunRecordActions,
+    unregisterWorkflowRunRecordActions,
+  } = useWorkflowRunRecordActions({
+    objectMetadataItem,
+  });
+
+  const registerSingleRecordActions = () => {
+    registerManageFavoritesSingleRecordAction();
+    registerDeleteSingleRecordAction();
+    registerWorkflowRunRecordActions();
+  };
+
+  const unregisterSingleRecordActions = () => {
+    unregisterManageFavoritesSingleRecordAction();
+    unregisterDeleteSingleRecordAction();
+    unregisterWorkflowRunRecordActions();
+  };
+
+  return {
+    registerSingleRecordActions,
+    unregisterSingleRecordActions,
+  };
+};

packages/twenty-front/src/modules/action-menu/actions/record-actions/workflow-run-record-actions/hooks/useWorkflowRunRecordActions.tsx

@@ -13,12 +13,11 @@ import { useAllActiveWorkflowVersions } from '@/workflow/hooks/useAllActiveWorkf
 import { useRunWorkflowVersion } from '@/workflow/hooks/useRunWorkflowVersion';
 
 import { useTheme } from '@emotion/react';
-import { useEffect } from 'react';
 import { useRecoilValue } from 'recoil';
 import { IconSettingsAutomation, isDefined } from 'twenty-ui';
 import { capitalize } from '~/utils/string/capitalize';
 
-export const WorkflowRunRecordActionEffect = ({
+export const useWorkflowRunRecordActions = ({
   objectMetadataItem,
 }: {
   objectMetadataItem: ObjectMetadataItem;
@@ -49,7 +48,7 @@ export const WorkflowRunRecordActionEffect = ({
 
   const theme = useTheme();
 
-  useEffect(() => {
+  const registerWorkflowRunRecordActions = () => {
     if (!isDefined(objectMetadataItem) || objectMetadataItem.isRemote) {
       return;
     }
@@ -88,22 +87,16 @@ export const WorkflowRunRecordActionEffect = ({
         },
       });
     }
+  };
 
-    return () => {
+  const unregisterWorkflowRunRecordActions = () => {
-      for (const activeWorkflowVersion of activeWorkflowVersions) {
+    for (const activeWorkflowVersion of activeWorkflowVersions) {
-        removeActionMenuEntry(`workflow-run-${activeWorkflowVersion.id}`);
+      removeActionMenuEntry(`workflow-run-${activeWorkflowVersion.id}`);
-      }
+    }
-    };
+  };
-  }, [
-    activeWorkflowVersions,
-    addActionMenuEntry,
-    enqueueSnackBar,
-    objectMetadataItem,
-    removeActionMenuEntry,
-    runWorkflowVersion,
-    selectedRecord,
-    theme.snackBar.success.color,
-  ]);
 
-  return null;
+  return {
+    registerWorkflowRunRecordActions,
+    unregisterWorkflowRunRecordActions,
+  };
 };

packages/twenty-front/src/modules/action-menu/actions/record-agnostic-actions/components/RecordAgnosticActionsSetterEffect.tsx

@@ -0,0 +1,17 @@
+import { useRecordAgnosticActions } from '@/action-menu/actions/record-agnostic-actions/hooks/useGlobalActions';
+import { useEffect } from 'react';
+
+export const RecordAgnosticActionsSetterEffect = () => {
+  const { registerRecordAgnosticActions, unregisterRecordAgnosticActions } =
+    useRecordAgnosticActions();
+
+  useEffect(() => {
+    registerRecordAgnosticActions();
+
+    return () => {
+      unregisterRecordAgnosticActions();
+    };
+  }, [registerRecordAgnosticActions, unregisterRecordAgnosticActions]);
+
+  return null;
+};

packages/twenty-front/src/modules/action-menu/actions/record-agnostic-actions/hooks/useGlobalActions.ts

@@ -0,0 +1,23 @@
+import { useWorkflowRunActions } from '@/action-menu/actions/record-agnostic-actions/workflow-run-actions/hooks/useWorkflowRunActions';
+import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
+
+export const useRecordAgnosticActions = () => {
+  const isWorkflowEnabled = useIsFeatureEnabled('IS_WORKFLOW_ENABLED');
+
+  const { addWorkflowRunActions, removeWorkflowRunActions } =
+    useWorkflowRunActions();
+
+  const registerRecordAgnosticActions = () => {
+    if (isWorkflowEnabled) {
+      addWorkflowRunActions();
+    }
+  };
+
+  const unregisterRecordAgnosticActions = () => {
+    if (isWorkflowEnabled) {
+      removeWorkflowRunActions();
+    }
+  };
+
+  return { registerRecordAgnosticActions, unregisterRecordAgnosticActions };
+};

packages/twenty-front/src/modules/action-menu/actions/record-agnostic-actions/workflow-run-actions/hooks/useWorkflowRunActions.tsx

@@ -9,11 +9,10 @@ import { useAllActiveWorkflowVersions } from '@/workflow/hooks/useAllActiveWorkf
 import { useRunWorkflowVersion } from '@/workflow/hooks/useRunWorkflowVersion';
 
 import { useTheme } from '@emotion/react';
-import { useEffect } from 'react';
 import { IconSettingsAutomation } from 'twenty-ui';
 import { capitalize } from '~/utils/string/capitalize';
 
-export const WorkflowRunActionEffect = () => {
+export const useWorkflowRunActions = () => {
   const { addActionMenuEntry, removeActionMenuEntry } = useActionMenuEntries();
 
   const { records: activeWorkflowVersions } = useAllActiveWorkflowVersions({
@@ -26,7 +25,7 @@ export const WorkflowRunActionEffect = () => {
 
   const theme = useTheme();
 
-  useEffect(() => {
+  const addWorkflowRunActions = () => {
     for (const [
       index,
       activeWorkflowVersion,
@@ -56,20 +55,13 @@ export const WorkflowRunActionEffect = () => {
         },
       });
     }
+  };
 
-    return () => {
+  const removeWorkflowRunActions = () => {
-      for (const activeWorkflowVersion of activeWorkflowVersions) {
+    for (const activeWorkflowVersion of activeWorkflowVersions) {
-        removeActionMenuEntry(`workflow-run-${activeWorkflowVersion.id}`);
+      removeActionMenuEntry(`workflow-run-${activeWorkflowVersion.id}`);
-      }
+    }
-    };
+  };
-  }, [
-    activeWorkflowVersions,
-    addActionMenuEntry,
-    enqueueSnackBar,
-    removeActionMenuEntry,
-    runWorkflowVersion,
-    theme.snackBar.success.color,
-  ]);
 
-  return null;
+  return { addWorkflowRunActions, removeWorkflowRunActions };
 };

packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenu.tsx

@@ -1,5 +1,5 @@
-import { GlobalActionMenuEntriesSetter } from '@/action-menu/actions/global-actions/components/GlobalActionMenuEntriesSetter';
 import { RecordActionMenuEntriesSetter } from '@/action-menu/actions/record-actions/components/RecordActionMenuEntriesSetter';
+import { RecordAgnosticActionsSetterEffect } from '@/action-menu/actions/record-agnostic-actions/components/RecordAgnosticActionsSetterEffect';
 import { ActionMenuConfirmationModals } from '@/action-menu/components/ActionMenuConfirmationModals';
 import { RecordIndexActionMenuBar } from '@/action-menu/components/RecordIndexActionMenuBar';
 import { RecordIndexActionMenuDropdown } from '@/action-menu/components/RecordIndexActionMenuDropdown';
@@ -28,7 +28,7 @@ export const RecordIndexActionMenu = () => {
           <ActionMenuConfirmationModals />
           <RecordIndexActionMenuEffect />
           <RecordActionMenuEntriesSetter />
-          <GlobalActionMenuEntriesSetter />
+          <RecordAgnosticActionsSetterEffect />
         </ActionMenuContext.Provider>
       )}
     </>

packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenu.tsx

@@ -1,5 +1,5 @@
-import { GlobalActionMenuEntriesSetter } from '@/action-menu/actions/global-actions/components/GlobalActionMenuEntriesSetter';
 import { RecordActionMenuEntriesSetter } from '@/action-menu/actions/record-actions/components/RecordActionMenuEntriesSetter';
+import { RecordAgnosticActionsSetterEffect } from '@/action-menu/actions/record-agnostic-actions/components/RecordAgnosticActionsSetterEffect';
 import { ActionMenuConfirmationModals } from '@/action-menu/components/ActionMenuConfirmationModals';
 import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext';
 
@@ -48,7 +48,7 @@ export const RecordShowActionMenu = ({
           />
           <ActionMenuConfirmationModals />
           <RecordActionMenuEntriesSetter />
-          <GlobalActionMenuEntriesSetter />
+          <RecordAgnosticActionsSetterEffect />
         </ActionMenuContext.Provider>
       )}
     </>

packages/twenty-front/src/modules/action-menu/components/RecordShowRightDrawerActionMenu.tsx

@@ -1,5 +1,5 @@
-import { GlobalActionMenuEntriesSetter } from '@/action-menu/actions/global-actions/components/GlobalActionMenuEntriesSetter';
 import { RecordActionMenuEntriesSetter } from '@/action-menu/actions/record-actions/components/RecordActionMenuEntriesSetter';
+import { RecordAgnosticActionsSetterEffect } from '@/action-menu/actions/record-agnostic-actions/components/RecordAgnosticActionsSetterEffect';
 import { ActionMenuConfirmationModals } from '@/action-menu/components/ActionMenuConfirmationModals';
 import { RightDrawerActionMenuDropdown } from '@/action-menu/components/RightDrawerActionMenuDropdown';
 import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext';
@@ -24,7 +24,7 @@ export const RecordShowRightDrawerActionMenu = () => {
           <RightDrawerActionMenuDropdown />
           <ActionMenuConfirmationModals />
           <RecordActionMenuEntriesSetter />
-          <GlobalActionMenuEntriesSetter />
+          <RecordAgnosticActionsSetterEffect />
         </ActionMenuContext.Provider>
       )}
     </>

packages/twenty-front/src/modules/app/effect-components/PageChangeEffect.tsx

@@ -2,25 +2,18 @@ import { useEffect, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
 
-import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
 import {
   setSessionId,
   useEventTracker,
 } from '@/analytics/hooks/useEventTracker';
 import { useRequestFreshCaptchaToken } from '@/captcha/hooks/useRequestFreshCaptchaToken';
 import { isCaptchaScriptLoadedState } from '@/captcha/states/isCaptchaScriptLoadedState';
-import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
-import { CommandType } from '@/command-menu/types/Command';
-import { useNonSystemActiveObjectMetadataItems } from '@/object-metadata/hooks/useNonSystemActiveObjectMetadataItems';
-import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
-import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { TableHotkeyScope } from '@/object-record/record-table/types/TableHotkeyScope';
 import { AppBasePath } from '@/types/AppBasePath';
 import { AppPath } from '@/types/AppPath';
 import { PageHotkeyScope } from '@/types/PageHotkeyScope';
 import { SettingsPath } from '@/types/SettingsPath';
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
-import { IconCheckbox } from 'twenty-ui';
 import { useCleanRecoilState } from '~/hooks/useCleanRecoilState';
 import { useIsMatchingLocation } from '~/hooks/useIsMatchingLocation';
 import { usePageChangeEffectNavigateLocation } from '~/hooks/usePageChangeEffectNavigateLocation';
@@ -45,14 +38,6 @@ export const PageChangeEffect = () => {
 
   const eventTracker = useEventTracker();
 
-  const { addToCommandMenu, setObjectsInCommandMenu } = useCommandMenu();
-
-  const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
-
-  const openCreateActivity = useOpenCreateActivityDrawer({
-    activityObjectNameSingular: CoreObjectNameSingular.Task,
-  });
-
   useEffect(() => {
     cleanRecoilState();
   }, [cleanRecoilState]);
@@ -150,33 +135,6 @@ export const PageChangeEffect = () => {
     }
   }, [isMatchingLocation, setHotkeyScope]);
 
-  const { nonSystemActiveObjectMetadataItems } =
-    useNonSystemActiveObjectMetadataItems();
-
-  useEffect(() => {
-    setObjectsInCommandMenu(nonSystemActiveObjectMetadataItems);
-
-    addToCommandMenu([
-      {
-        id: 'create-task',
-        to: '',
-        label: 'Create Task',
-        type: CommandType.Create,
-        Icon: IconCheckbox,
-        onCommandClick: () =>
-          openCreateActivity({
-            targetableObjects: [],
-          }),
-      },
-    ]);
-  }, [
-    nonSystemActiveObjectMetadataItems,
-    addToCommandMenu,
-    setObjectsInCommandMenu,
-    openCreateActivity,
-    objectMetadataItems,
-  ]);
-
   useEffect(() => {
     setTimeout(() => {
       setSessionId();

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

@@ -9,7 +9,7 @@ import { CommandMenuTopBar } from '@/command-menu/components/CommandMenuTopBar';
 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 { commandMenuCommandsState } from '@/command-menu/states/commandMenuCommandsState';
+import { commandMenuCommandsComponentSelector } from '@/command-menu/states/commandMenuCommandsSelector';
 import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchState';
 import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
 import {
@@ -35,6 +35,7 @@ import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import styled from '@emotion/styled';
@@ -67,6 +68,8 @@ type CommandGroupConfig = {
     to?: string;
     onClick?: () => void;
     key?: string;
+    firstHotKey?: string;
+    secondHotKey?: string;
   };
 };
 
@@ -128,7 +131,6 @@ export const CommandMenu = () => {
     commandMenuSearchState,
   );
   const [deferredCommandMenuSearch] = useDebounce(commandMenuSearch, 300); // 200ms - 500ms
-  const commandMenuCommands = useRecoilValue(commandMenuCommandsState);
   const { closeKeyboardShortcutMenu } = useKeyboardShortcutMenu();
 
   const setContextStoreTargetedRecordsRule = useSetRecoilComponentStateV2(
@@ -141,6 +143,10 @@ export const CommandMenu = () => {
 
   const isMobile = useIsMobile();
 
+  const commandMenuCommands = useRecoilComponentValueV2(
+    commandMenuCommandsComponentSelector,
+  );
+
   useScopedHotkeys(
     'ctrl+k,meta+k',
     () => {
@@ -478,6 +484,8 @@ export const CommandMenu = () => {
         label: command.label,
         to: command.to,
         onClick: command.onCommandClick,
+        firstHotKey: command.firstHotKey,
+        secondHotKey: command.secondHotKey,
       }),
     },
     {
@@ -489,6 +497,8 @@ export const CommandMenu = () => {
         label: command.label,
         to: command.to,
         onClick: command.onCommandClick,
+        firstHotKey: command.firstHotKey,
+        secondHotKey: command.secondHotKey,
       }),
     },
     {
@@ -506,6 +516,8 @@ export const CommandMenu = () => {
             placeholder={`${person.name.firstName} ${person.name.lastName}`}
           />
         ),
+        firstHotKey: person.firstHotKey,
+        secondHotKey: person.secondHotKey,
       }),
     },
     {
@@ -524,6 +536,8 @@ export const CommandMenu = () => {
             )}
           />
         ),
+        firstHotKey: company.firstHotKey,
+        secondHotKey: company.secondHotKey,
       }),
     },
     {
@@ -628,6 +642,8 @@ export const CommandMenu = () => {
                               : ''
                           }`}
                           onClick={copilotCommand.onCommandClick}
+                          firstHotKey={copilotCommand.firstHotKey}
+                          secondHotKey={copilotCommand.secondHotKey}
                         />
                       </SelectableItem>
                     </CommandGroup>
@@ -646,6 +662,12 @@ export const CommandMenu = () => {
                             onClick={
                               standardActionrecordSelectionCommand.onCommandClick
                             }
+                            firstHotKey={
+                              standardActionrecordSelectionCommand.firstHotKey
+                            }
+                            secondHotKey={
+                              standardActionrecordSelectionCommand.secondHotKey
+                            }
                           />
                         </SelectableItem>
                       ),
@@ -663,6 +685,12 @@ export const CommandMenu = () => {
                             onClick={
                               workflowRunRecordSelectionCommand.onCommandClick
                             }
+                            firstHotKey={
+                              workflowRunRecordSelectionCommand.firstHotKey
+                            }
+                            secondHotKey={
+                              workflowRunRecordSelectionCommand.secondHotKey
+                            }
                           />
                         </SelectableItem>
                       ),
@@ -683,6 +711,12 @@ export const CommandMenu = () => {
                               onClick={
                                 standardActionGlobalCommand.onCommandClick
                               }
+                              firstHotKey={
+                                standardActionGlobalCommand.firstHotKey
+                              }
+                              secondHotKey={
+                                standardActionGlobalCommand.secondHotKey
+                              }
                             />
                           </SelectableItem>
                         ),
@@ -702,6 +736,10 @@ export const CommandMenu = () => {
                               label={workflowRunGlobalCommand.label}
                               Icon={workflowRunGlobalCommand.Icon}
                               onClick={workflowRunGlobalCommand.onCommandClick}
+                              firstHotKey={workflowRunGlobalCommand.firstHotKey}
+                              secondHotKey={
+                                workflowRunGlobalCommand.secondHotKey
+                              }
                             />
                           </SelectableItem>
                         ),
@@ -713,8 +751,16 @@ export const CommandMenu = () => {
                     items?.length ? (
                       <CommandGroup heading={heading} key={heading}>
                         {items.map((item) => {
-                          const { id, Icon, label, to, onClick, key } =
+                          const {
-                            renderItem(item);
+                            id,
+                            Icon,
+                            label,
+                            to,
+                            onClick,
+                            key,
+                            firstHotKey,
+                            secondHotKey,
+                          } = renderItem(item);
                           return (
                             <SelectableItem itemId={id} key={id}>
                               <CommandMenuItem
@@ -724,6 +770,8 @@ export const CommandMenu = () => {
                                 label={label}
                                 to={to}
                                 onClick={onClick}
+                                firstHotKey={firstHotKey}
+                                secondHotKey={secondHotKey}
                               />
                             </SelectableItem>
                           );

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

@@ -1,20 +0,0 @@
-import { actionMenuEntriesComponentSelector } from '@/action-menu/states/actionMenuEntriesComponentSelector';
-import { commandMenuCommandsState } from '@/command-menu/states/commandMenuCommandsState';
-import { computeCommandMenuCommands } from '@/command-menu/utils/computeCommandMenuCommands';
-import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
-import { useEffect } from 'react';
-import { useSetRecoilState } from 'recoil';
-
-export const CommandMenuCommandsEffect = () => {
-  const actionMenuEntries = useRecoilComponentValueV2(
-    actionMenuEntriesComponentSelector,
-  );
-
-  const setCommands = useSetRecoilState(commandMenuCommandsState);
-
-  useEffect(() => {
-    setCommands(computeCommandMenuCommands(actionMenuEntries));
-  }, [actionMenuEntries, setCommands]);
-
-  return null;
-};

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

@@ -1,15 +1,8 @@
-import { useContextStoreSelectedRecords } from '@/context-store/hooks/useContextStoreSelectedRecords';
+import { CommandMenuContextRecordChipAvatars } from '@/command-menu/components/CommandMenuContextRecordChipAvatars';
-import { contextStoreCurrentObjectMetadataIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdComponentState';
+import { useFindManyRecordsSelectedInContextStore } from '@/context-store/hooks/useFindManyRecordsSelectedInContextStore';
-import { useGetStandardObjectIcon } from '@/object-metadata/hooks/useGetStandardObjectIcon';
 import { useObjectMetadataItemById } from '@/object-metadata/hooks/useObjectMetadataItemById';
-import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { getObjectRecordIdentifier } from '@/object-metadata/utils/getObjectRecordIdentifier';
-import { useRecordChipData } from '@/object-record/hooks/useRecordChipData';
-import { ObjectRecord } from '@/object-record/types/ObjectRecord';
-import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
-import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { Avatar } from 'twenty-ui';
 import { capitalize } from '~/utils/string/capitalize';
 
 const StyledChip = styled.div`
@@ -28,70 +21,23 @@ const StyledChip = styled.div`
   color: ${({ theme }) => theme.font.color.primary};
 `;
 
-const StyledAvatarWrapper = styled.div`
-  background-color: ${({ theme }) => theme.background.primary};
-  border-radius: ${({ theme }) => theme.border.radius.sm};
-  padding: ${({ theme }) => theme.spacing(0.5)};
-  border: 1px solid ${({ theme }) => theme.border.color.medium};
-  &:not(:first-of-type) {
-    margin-left: -${({ theme }) => theme.spacing(1)};
-  }
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-
 const StyledAvatarContainer = styled.div`
   display: flex;
 `;
 
-const CommandMenuContextRecordChipAvatars = ({
+export const CommandMenuContextRecordChip = ({
-  objectMetadataItem,
+  objectMetadataItemId,
-  record,
 }: {
-  objectMetadataItem: ObjectMetadataItem;
+  objectMetadataItemId: string;
-  record: ObjectRecord;
 }) => {
-  const { recordChipData } = useRecordChipData({
-    objectNameSingular: objectMetadataItem.nameSingular,
-    record,
-  });
-
-  const { Icon, IconColor } = useGetStandardObjectIcon(
-    objectMetadataItem.nameSingular,
-  );
-
-  const theme = useTheme();
-
-  return (
-    <StyledAvatarWrapper>
-      {Icon ? (
-        <Icon color={IconColor} size={theme.icon.size.sm} />
-      ) : (
-        <Avatar
-          avatarUrl={recordChipData.avatarUrl}
-          placeholderColorSeed={recordChipData.recordId}
-          placeholder={recordChipData.name}
-          type={recordChipData.avatarType}
-          size="sm"
-        />
-      )}
-    </StyledAvatarWrapper>
-  );
-};
-
-export const CommandMenuContextRecordChip = () => {
-  const contextStoreCurrentObjectMetadataId = useRecoilComponentValueV2(
-    contextStoreCurrentObjectMetadataIdComponentState,
-  );
-
   const { objectMetadataItem } = useObjectMetadataItemById({
-    objectId: contextStoreCurrentObjectMetadataId ?? '',
+    objectId: objectMetadataItemId,
   });
 
-  const { records, loading, totalCount } = useContextStoreSelectedRecords({
+  const { records, loading, totalCount } =
-    limit: 3,
+    useFindManyRecordsSelectedInContextStore({
-  });
+      limit: 3,
+    });
 
   if (loading || !totalCount) {
     return null;

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

@@ -0,0 +1,55 @@
+import { useGetStandardObjectIcon } from '@/object-metadata/hooks/useGetStandardObjectIcon';
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { useRecordChipData } from '@/object-record/hooks/useRecordChipData';
+import { ObjectRecord } from '@/object-record/types/ObjectRecord';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { Avatar } from 'twenty-ui';
+
+const StyledAvatarWrapper = styled.div`
+  background-color: ${({ theme }) => theme.background.primary};
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  padding: ${({ theme }) => theme.spacing(0.5)};
+  border: 1px solid ${({ theme }) => theme.border.color.medium};
+  &:not(:first-of-type) {
+    margin-left: -${({ theme }) => theme.spacing(1)};
+  }
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const CommandMenuContextRecordChipAvatars = ({
+  objectMetadataItem,
+  record,
+}: {
+  objectMetadataItem: ObjectMetadataItem;
+  record: ObjectRecord;
+}) => {
+  const { recordChipData } = useRecordChipData({
+    objectNameSingular: objectMetadataItem.nameSingular,
+    record,
+  });
+
+  const { Icon, IconColor } = useGetStandardObjectIcon(
+    objectMetadataItem.nameSingular,
+  );
+
+  const theme = useTheme();
+
+  return (
+    <StyledAvatarWrapper>
+      {Icon ? (
+        <Icon color={IconColor} size={theme.icon.size.sm} />
+      ) : (
+        <Avatar
+          avatarUrl={recordChipData.avatarUrl}
+          placeholderColorSeed={recordChipData.recordId}
+          placeholder={recordChipData.name}
+          type={recordChipData.avatarType}
+          size="sm"
+        />
+      )}
+    </StyledAvatarWrapper>
+  );
+};

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

@@ -2,8 +2,10 @@ import { CommandMenuContextRecordChip } from '@/command-menu/components/CommandM
 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 { contextStoreCurrentObjectMetadataIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdComponentState';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import styled from '@emotion/styled';
-import { IconX, LightIconButton, useIsMobile } from 'twenty-ui';
+import { IconX, LightIconButton, isDefined, useIsMobile } from 'twenty-ui';
 
 const StyledInputContainer = styled.div`
   align-items: center;
@@ -65,9 +67,17 @@ export const CommandMenuTopBar = ({
 
   const { closeCommandMenu } = useCommandMenu();
 
+  const contextStoreCurrentObjectMetadataId = useRecoilComponentValueV2(
+    contextStoreCurrentObjectMetadataIdComponentState,
+  );
+
   return (
     <StyledInputContainer>
-      <CommandMenuContextRecordChip />
+      {isDefined(contextStoreCurrentObjectMetadataId) && (
+        <CommandMenuContextRecordChip
+          objectMetadataItemId={contextStoreCurrentObjectMetadataId}
+        />
+      )}
       <StyledInput
         autoFocus
         value={commandMenuSearch}

packages/twenty-front/src/modules/command-menu/components/__stories__/CommandMenu.stories.tsx

@@ -1,14 +1,9 @@
-import { action } from '@storybook/addon-actions';
 import { Decorator, Meta, StoryObj } from '@storybook/react';
 import { expect, userEvent, within } from '@storybook/test';
-import { useEffect } from 'react';
+import { useSetRecoilState } from 'recoil';
-import { useRecoilValue, useSetRecoilState } from 'recoil';
-import { IconCheckbox, IconNotes } from 'twenty-ui';
 
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
-import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
-import { CommandType } from '@/command-menu/types/Command';
 import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
 import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
@@ -21,8 +16,8 @@ import {
 import { sleep } from '~/utils/sleep';
 
 import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
+import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
 import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
-import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
 import { JestContextStoreSetter } from '~/testing/jest/JestContextStoreSetter';
 import { CommandMenu } from '../CommandMenu';
 
@@ -55,46 +50,13 @@ const meta: Meta<typeof CommandMenu> = {
       const setCurrentWorkspaceMember = useSetRecoilState(
         currentWorkspaceMemberState,
       );
-      const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
+      const setIsCommandMenuOpened = useSetRecoilState(
-
+        isCommandMenuOpenedState,
-      const { addToCommandMenu, setObjectsInCommandMenu, openCommandMenu } =
+      );
-        useCommandMenu();
 
       setCurrentWorkspace(mockDefaultWorkspace);
       setCurrentWorkspaceMember(mockedWorkspaceMemberData);
-
+      setIsCommandMenuOpened(true);
-      useEffect(() => {
-        const nonSystemActiveObjects = objectMetadataItems.filter(
-          (object) => !object.isSystem && object.isActive,
-        );
-
-        setObjectsInCommandMenu(nonSystemActiveObjects);
-
-        addToCommandMenu([
-          {
-            id: 'create-task',
-            to: '',
-            label: 'Create Task',
-            type: CommandType.Create,
-            Icon: IconCheckbox,
-            onCommandClick: action('create task click'),
-          },
-          {
-            id: 'create-note',
-            to: '',
-            label: 'Create Note',
-            type: CommandType.Create,
-            Icon: IconNotes,
-            onCommandClick: action('create note click'),
-          },
-        ]);
-        openCommandMenu();
-      }, [
-        addToCommandMenu,
-        setObjectsInCommandMenu,
-        openCommandMenu,
-        objectMetadataItems,
-      ]);
 
       return <Story />;
     },
@@ -115,9 +77,6 @@ export const DefaultWithoutSearch: Story = {
   play: async () => {
     const canvas = within(document.body);
 
-    expect(
-      await canvas.findByText('Create Task', undefined, { timeout: 10000 }),
-    ).toBeInTheDocument();
     expect(await canvas.findByText('Go to People')).toBeInTheDocument();
     expect(await canvas.findByText('Go to Companies')).toBeInTheDocument();
     expect(await canvas.findByText('Go to Opportunities')).toBeInTheDocument();
@@ -134,7 +93,6 @@ export const MatchingPersonCompanyActivityCreateNavigate: Story = {
     await userEvent.type(searchInput, 'n');
     expect(await canvas.findByText('Linkedin')).toBeInTheDocument();
     expect(await canvas.findByText(companiesMock[0].name)).toBeInTheDocument();
-    expect(await canvas.findByText('Create Note')).toBeInTheDocument();
     expect(await canvas.findByText('Go to Companies')).toBeInTheDocument();
   },
 };
@@ -145,7 +103,6 @@ export const OnlyMatchingCreateAndNavigate: Story = {
     const searchInput = await canvas.findByPlaceholderText('Type anything');
     await sleep(openTimeout);
     await userEvent.type(searchInput, 'ta');
-    expect(await canvas.findByText('Create Task')).toBeInTheDocument();
     expect(await canvas.findByText('Go to Tasks')).toBeInTheDocument();
   },
 };

packages/twenty-front/src/modules/command-menu/constants/CommandMenuNavigateCommands.ts

@@ -8,7 +8,7 @@ import {
 
 import { Command, CommandType } from '../types/Command';
 
-export const COMMAND_MENU_COMMANDS: { [key: string]: Command } = {
+export const COMMAND_MENU_NAVIGATE_COMMANDS: { [key: string]: Command } = {
   people: {
     id: 'go-to-people',
     to: '/objects/people',

packages/twenty-front/src/modules/command-menu/hooks/__tests__/useCommandMenu.test.tsx

@@ -1,12 +1,12 @@
 import { renderHook } from '@testing-library/react';
 import { act } from 'react-dom/test-utils';
 import { MemoryRouter } from 'react-router-dom';
-import { RecoilRoot, useRecoilState, useRecoilValue } from 'recoil';
+import { RecoilRoot, useRecoilValue } from 'recoil';
 
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
-import { commandMenuCommandsState } from '@/command-menu/states/commandMenuCommandsState';
+import { commandMenuCommandsComponentSelector } from '@/command-menu/states/commandMenuCommandsSelector';
 import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
-import { CommandType } from '@/command-menu/types/Command';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 
 const Wrapper = ({ children }: { children: React.ReactNode }) => (
   <RecoilRoot>
@@ -24,15 +24,15 @@ const renderHooks = () => {
     () => {
       const commandMenu = useCommandMenu();
       const isCommandMenuOpened = useRecoilValue(isCommandMenuOpenedState);
-      const [commandMenuCommands, setCommandMenuCommands] = useRecoilState(
+      const commandMenuCommands = useRecoilComponentValueV2(
-        commandMenuCommandsState,
+        commandMenuCommandsComponentSelector,
+        'command-menu',
       );
 
       return {
         commandMenu,
         isCommandMenuOpened,
         commandMenuCommands,
-        setCommandMenuCommands,
       };
     },
     {
@@ -77,24 +77,6 @@ describe('useCommandMenu', () => {
     expect(result.current.isCommandMenuOpened).toBe(false);
   });
 
-  it('should add commands to the menu', () => {
-    const { result } = renderHooks();
-
-    expect(
-      result.current.commandMenuCommands.find((cmd) => cmd.label === 'Test'),
-    ).toBeUndefined();
-
-    act(() => {
-      result.current.commandMenu.addToCommandMenu([
-        { label: 'Test', id: 'test', to: '/test', type: CommandType.Navigate },
-      ]);
-    });
-
-    expect(
-      result.current.commandMenuCommands.find((cmd) => cmd.label === 'Test'),
-    ).toBeDefined();
-  });
-
   it('onItemClick', () => {
     const { result } = renderHooks();
     const onClickMock = jest.fn();
@@ -106,43 +88,4 @@ describe('useCommandMenu', () => {
     expect(result.current.isCommandMenuOpened).toBe(true);
     expect(onClickMock).toHaveBeenCalledTimes(1);
   });
-
-  it('should setObjectsInCommandMenu command menu', () => {
-    const { result } = renderHooks();
-
-    act(() => {
-      result.current.commandMenu.setObjectsInCommandMenu([]);
-    });
-
-    expect(result.current.commandMenuCommands.length).toBe(1);
-
-    act(() => {
-      result.current.commandMenu.setObjectsInCommandMenu([
-        {
-          id: 'b88745ce-9021-4316-a018-8884e02d05ca',
-          nameSingular: 'task',
-          namePlural: 'tasks',
-          labelSingular: 'Task',
-          labelPlural: 'Tasks',
-          isLabelSyncedWithName: true,
-          shortcut: 'T',
-          description: 'A task',
-          icon: 'IconCheckbox',
-          isCustom: false,
-          isRemote: false,
-          isActive: true,
-          isSystem: false,
-          createdAt: '2024-09-12T20:23:46.041Z',
-          updatedAt: '2024-09-13T08:36:53.426Z',
-          labelIdentifierFieldMetadataId:
-            'ab7901eb-43e1-4dc7-8f3b-cdee2857eb9a',
-          imageIdentifierFieldMetadataId: null,
-          fields: [],
-          indexMetadatas: [],
-        },
-      ]);
-    });
-
-    expect(result.current.commandMenuCommands.length).toBe(2);
-  });
 });

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

@@ -9,24 +9,17 @@ import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousH
 import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
 import { isDefined } from '~/utils/isDefined';
 
-import { COMMAND_MENU_COMMANDS } from '@/command-menu/constants/CommandMenuCommands';
 import { contextStoreCurrentObjectMetadataIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdComponentState';
 import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
 import { contextStoreFiltersComponentState } from '@/context-store/states/contextStoreFiltersComponentState';
 import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState';
 import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
 import { mainContextStoreComponentInstanceIdState } from '@/context-store/states/mainContextStoreComponentInstanceId';
-import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
-import { ALL_ICONS } from '@ui/display/icon/providers/internal/AllIcons';
-import { sortByProperty } from '~/utils/array/sortByProperty';
-import { commandMenuCommandsState } from '../states/commandMenuCommandsState';
 import { isCommandMenuOpenedState } from '../states/isCommandMenuOpenedState';
-import { Command, CommandType } from '../types/Command';
 
 export const useCommandMenu = () => {
   const navigate = useNavigate();
   const setIsCommandMenuOpened = useSetRecoilState(isCommandMenuOpenedState);
-  const setCommands = useSetRecoilState(commandMenuCommandsState);
   const { resetSelectedItem } = useSelectableList('command-menu-list');
   const {
     setHotkeyScopeAndMemorizePreviousScope,
@@ -161,36 +154,6 @@ export const useCommandMenu = () => {
     [closeCommandMenu, openCommandMenu],
   );
 
-  const addToCommandMenu = useCallback(
-    (addCommand: Command[]) => {
-      setCommands((prev) => [...prev, ...addCommand]);
-    },
-    [setCommands],
-  );
-
-  const setObjectsInCommandMenu = (menuItems: ObjectMetadataItem[]) => {
-    const formattedItems = [
-      ...[
-        ...menuItems.map(
-          (item) =>
-            ({
-              id: item.id,
-              to: `/objects/${item.namePlural}`,
-              label: `Go to ${item.labelPlural}`,
-              type: CommandType.Navigate,
-              firstHotKey: item.shortcut ? 'G' : undefined,
-              secondHotKey: item.shortcut,
-              Icon: ALL_ICONS[
-                (item?.icon as keyof typeof ALL_ICONS) ?? 'IconArrowUpRight'
-              ],
-            }) as Command,
-        ),
-      ].sort(sortByProperty('label', 'asc')),
-      COMMAND_MENU_COMMANDS.settings,
-    ];
-    setCommands(formattedItems);
-  };
-
   const onItemClick = useCallback(
     (onClick?: () => void, to?: string) => {
       toggleCommandMenu();
@@ -211,8 +174,6 @@ export const useCommandMenu = () => {
     openCommandMenu,
     closeCommandMenu,
     toggleCommandMenu,
-    addToCommandMenu,
     onItemClick,
-    setObjectsInCommandMenu,
   };
 };

packages/twenty-front/src/modules/command-menu/states/commandMenuCommandsSelector.ts

@@ -0,0 +1,23 @@
+import { actionMenuEntriesComponentSelector } from '@/action-menu/states/actionMenuEntriesComponentSelector';
+import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
+import { Command } from '@/command-menu/types/Command';
+import { computeCommandMenuCommands } from '@/command-menu/utils/computeCommandMenuCommands';
+import { createComponentSelectorV2 } from '@/ui/utilities/state/component-state/utils/createComponentSelectorV2';
+
+export const commandMenuCommandsComponentSelector = createComponentSelectorV2<
+  Command[]
+>({
+  key: 'commandMenuCommandsComponentSelector',
+  componentInstanceContext: ActionMenuComponentInstanceContext,
+  get:
+    ({ instanceId }) =>
+    ({ get }) => {
+      const actionMenuEntries = get(
+        actionMenuEntriesComponentSelector.selectorFamily({
+          instanceId,
+        }),
+      );
+
+      return computeCommandMenuCommands(actionMenuEntries);
+    },
+});

packages/twenty-front/src/modules/command-menu/states/commandMenuCommandsState.ts

@@ -1,15 +0,0 @@
-import { createState } from 'twenty-ui';
-
-import { Command, CommandType } from '../types/Command';
-
-export const commandMenuCommandsState = createState<Command[]>({
-  key: 'command-menu/commandMenuCommandsState',
-  defaultValue: [
-    {
-      id: '',
-      to: '',
-      label: '',
-      type: CommandType.Navigate,
-    },
-  ],
-});

packages/twenty-front/src/modules/command-menu/utils/computeCommandMenuCommands.ts

@@ -3,7 +3,7 @@ import {
   ActionMenuEntryScope,
   ActionMenuEntryType,
 } from '@/action-menu/types/ActionMenuEntry';
-import { COMMAND_MENU_COMMANDS } from '@/command-menu/constants/CommandMenuCommands';
+import { COMMAND_MENU_NAVIGATE_COMMANDS } from '@/command-menu/constants/CommandMenuNavigateCommands';
 import {
   Command,
   CommandScope,
@@ -13,7 +13,7 @@ import {
 export const computeCommandMenuCommands = (
   actionMenuEntries: ActionMenuEntry[],
 ): Command[] => {
-  const commands = Object.values(COMMAND_MENU_COMMANDS);
+  const navigateCommands = Object.values(COMMAND_MENU_NAVIGATE_COMMANDS);
 
   const actionCommands: Command[] = actionMenuEntries
     ?.filter(
@@ -49,5 +49,5 @@ export const computeCommandMenuCommands = (
           : CommandScope.Global,
     }));
 
-  return [...commands, ...actionCommands, ...workflowRunCommands];
+  return [...navigateCommands, ...actionCommands, ...workflowRunCommands];
 };

packages/twenty-front/src/modules/context-store/components/MainContextStoreComponentInstanceIdSetterEffect.tsx

@@ -1,3 +1,4 @@
+import { CONTEXT_STORE_INSTANCE_ID_DEFAULT_VALUE } from '@/context-store/constants/ContextStoreInstanceIdDefaultValue';
 import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
 import { mainContextStoreComponentInstanceIdState } from '@/context-store/states/mainContextStoreComponentInstanceId';
 import { useContext, useEffect } from 'react';
@@ -11,10 +12,14 @@ export const MainContextStoreComponentInstanceIdSetterEffect = () => {
   const context = useContext(ContextStoreComponentInstanceContext);
 
   useEffect(() => {
-    setMainContextStoreComponentInstanceId(context?.instanceId ?? 'app');
+    setMainContextStoreComponentInstanceId(
+      context?.instanceId ?? CONTEXT_STORE_INSTANCE_ID_DEFAULT_VALUE,
+    );
 
     return () => {
-      setMainContextStoreComponentInstanceId('app');
+      setMainContextStoreComponentInstanceId(
+        CONTEXT_STORE_INSTANCE_ID_DEFAULT_VALUE,
+      );
     };
   }, [context, setMainContextStoreComponentInstanceId]);
 

packages/twenty-front/src/modules/context-store/constants/ContextStoreInstanceIdDefaultValue.tsx

@@ -0,0 +1 @@
+export const CONTEXT_STORE_INSTANCE_ID_DEFAULT_VALUE = 'app';

packages/twenty-front/src/modules/context-store/hooks/useContextStoreCurrentObjectMetadataIdOrThrow.ts

@@ -4,15 +4,14 @@ import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/
 export const useContextStoreCurrentObjectMetadataIdOrThrow = (
   instanceId?: string,
 ) => {
-  const contextStoreCurrentObjectMetadataIdComponent =
+  const contextStoreCurrentObjectMetadataId = useRecoilComponentValueV2(
-    useRecoilComponentValueV2(
+    contextStoreCurrentObjectMetadataIdComponentState,
-      contextStoreCurrentObjectMetadataIdComponentState,
+    instanceId,
-      instanceId,
+  );
-    );
 
-  if (!contextStoreCurrentObjectMetadataIdComponent) {
+  if (!contextStoreCurrentObjectMetadataId) {
     throw new Error('contextStoreCurrentObjectMetadataIdComponent is not set');
   }
 
-  return contextStoreCurrentObjectMetadataIdComponent;
+  return contextStoreCurrentObjectMetadataId;
 };

packages/twenty-front/src/modules/context-store/hooks/useFindManyRecordsSelectedInContextStore.ts

@@ -6,7 +6,7 @@ import { useObjectMetadataItemById } from '@/object-metadata/hooks/useObjectMeta
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 
-export const useContextStoreSelectedRecords = ({
+export const useFindManyRecordsSelectedInContextStore = ({
   instanceId,
   limit = 3,
 }: {

packages/twenty-front/src/modules/context-store/states/mainContextStoreComponentInstanceId.ts

@@ -1,6 +1,7 @@
+import { CONTEXT_STORE_INSTANCE_ID_DEFAULT_VALUE } from '@/context-store/constants/ContextStoreInstanceIdDefaultValue';
 import { createState } from 'twenty-ui';
 
 export const mainContextStoreComponentInstanceIdState = createState<string>({
   key: 'mainContextStoreComponentInstanceIdState',
-  defaultValue: 'app',
+  defaultValue: CONTEXT_STORE_INSTANCE_ID_DEFAULT_VALUE,
 });

packages/twenty-front/src/modules/ui/layout/page/components/DefaultLayout.tsx

@@ -1,10 +1,9 @@
-import { GlobalActionMenuEntriesSetter } from '@/action-menu/actions/global-actions/components/GlobalActionMenuEntriesSetter';
 import { RecordActionMenuEntriesSetter } from '@/action-menu/actions/record-actions/components/RecordActionMenuEntriesSetter';
+import { RecordAgnosticActionsSetterEffect } from '@/action-menu/actions/record-agnostic-actions/components/RecordAgnosticActionsSetterEffect';
 import { ActionMenuConfirmationModals } from '@/action-menu/components/ActionMenuConfirmationModals';
 import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
 import { AuthModal } from '@/auth/components/AuthModal';
 import { CommandMenu } from '@/command-menu/components/CommandMenu';
-import { CommandMenuCommandsEffect } from '@/command-menu/components/CommandMenuCommandsEffect';
 import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
 import { AppErrorBoundary } from '@/error-handler/components/AppErrorBoundary';
 import { KeyboardShortcutMenu } from '@/keyboard-shortcut-menu/components/KeyboardShortcutMenu';
@@ -93,9 +92,8 @@ export const DefaultLayout = () => {
             value={{ instanceId: 'command-menu' }}
           >
             <RecordActionMenuEntriesSetter />
-            <GlobalActionMenuEntriesSetter />
+            <RecordAgnosticActionsSetterEffect />
             <ActionMenuConfirmationModals />
-            <CommandMenuCommandsEffect />
             <CommandMenu />
           </ActionMenuComponentInstanceContext.Provider>
         </ContextStoreComponentInstanceContext.Provider>

packages/twenty-front/src/testing/graphqlMocks.ts

@@ -716,6 +716,11 @@ export const graphqlMocks = {
                   },
                   deletedAt: null,
                   workflowId: '200c1508-f102-4bb9-af32-eda55239ae61',
+                  workflow: {
+                    __typename: 'Workflow',
+                    id: '200c1508-f102-4bb9-af32-eda55239ae61',
+                    name: '1231 qqerrt',
+                  },
                 },
               },
             ],