7339 implement contextual actions inside the commandmenu (#8000)

Closes #7339


https://github.com/user-attachments/assets/b623caa4-c1b3-448e-8880-4a8301802ba8

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

@@ -10,6 +10,7 @@ import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchS
 import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
 import { Command, CommandType } from '@/command-menu/types/Command';
 import { Company } from '@/companies/types/Company';
+import { mainContextStoreComponentInstanceIdState } from '@/context-store/states/mainContextStoreComponentInstanceId';
 import { useKeyboardShortcutMenu } from '@/keyboard-shortcut-menu/hooks/useKeyboardShortcutMenu';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { getCompanyDomainName } from '@/object-metadata/utils/getCompanyDomainName';
@@ -287,6 +288,14 @@ export const CommandMenu = () => {
         : true) && cmd.type === CommandType.Create,
   );
 
+  const matchingActionCommands = commandMenuCommands.filter(
+    (cmd) =>
+      (deferredCommandMenuSearch.length > 0
+        ? checkInShortcuts(cmd, deferredCommandMenuSearch) ||
+          checkInLabels(cmd, deferredCommandMenuSearch)
+        : true) && cmd.type === CommandType.Action,
+  );
+
   useListenClickOutside({
     refs: [commandMenuRef],
     callback: closeCommandMenu,
@@ -312,6 +321,7 @@ export const CommandMenu = () => {
 
   const selectableItemIds = copilotCommands
     .map((cmd) => cmd.id)
+    .concat(matchingActionCommands.map((cmd) => cmd.id))
     .concat(matchingCreateCommand.map((cmd) => cmd.id))
     .concat(matchingNavigateCommand.map((cmd) => cmd.id))
     .concat(people?.map((person) => person.id))
@@ -320,22 +330,28 @@ export const CommandMenu = () => {
     .concat(notes?.map((note) => note.id));
 
   const isNoResults =
+    !matchingActionCommands.length &&
     !matchingCreateCommand.length &&
     !matchingNavigateCommand.length &&
     !people?.length &&
     !companies?.length &&
     !notes?.length &&
     !opportunities?.length;
+
   const isLoading =
     isPeopleLoading ||
     isNotesLoading ||
     isOpportunitiesLoading ||
     isCompaniesLoading;
 
+  const mainContextStoreComponentInstanceId = useRecoilValue(
+    mainContextStoreComponentInstanceIdState,
+  );
+
   return (
     <>
       {isCommandMenuOpened && (
-        <StyledCommandMenu ref={commandMenuRef}>
+        <StyledCommandMenu ref={commandMenuRef} className="command-menu">
           <StyledInputContainer>
             <StyledInput
               autoFocus
@@ -393,6 +409,23 @@ export const CommandMenu = () => {
                       </SelectableItem>
                     </CommandGroup>
                   )}
+                  {mainContextStoreComponentInstanceId && (
+                    <CommandGroup heading="Actions">
+                      {matchingActionCommands?.map((actionCommand) => (
+                        <SelectableItem
+                          itemId={actionCommand.id}
+                          key={actionCommand.id}
+                        >
+                          <CommandMenuItem
+                            id={actionCommand.id}
+                            label={actionCommand.label}
+                            Icon={actionCommand.Icon}
+                            onClick={actionCommand.onCommandClick}
+                          />
+                        </SelectableItem>
+                      ))}
+                    </CommandGroup>
+                  )}
                   <CommandGroup heading="Create">
                     {matchingCreateCommand.map((cmd) => (
                       <SelectableItem itemId={cmd.id} key={cmd.id}>