Command menu refactoring (#9257)

Refactored the `CommandMenu` component to make it more readable and
easier to refactor.
The file was way too big so I introduced a few hooks and eliminated code
duplication.

Introduced:
- `useMatchCommands` hook to match commands with the search
- `useCommandMenuCommands` which returns all command menu commands
- `useMatchingCommandMenuCommands` to return the commands matched with
the search
- `CommandMenuContainer` to simplify the `DefaultLayout`

- Unmounted the `CommandMenu` when it wasn't opened to improve
performances

I also introduced a new behavior: Automatically select the first item
when opening the command menu:

https://github.com/user-attachments/assets/4b683d49-570e-47c9-8939-99f42ed8691c

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

@@ -4,9 +4,7 @@ import { MemoryRouter } from 'react-router-dom';
 import { RecoilRoot, useRecoilValue } from 'recoil';
 
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
-import { commandMenuCommandsComponentSelector } from '@/command-menu/states/commandMenuCommandsSelector';
 import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
-import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 
 const Wrapper = ({ children }: { children: React.ReactNode }) => (
   <RecoilRoot>
@@ -24,15 +22,10 @@ const renderHooks = () => {
     () => {
       const commandMenu = useCommandMenu();
       const isCommandMenuOpened = useRecoilValue(isCommandMenuOpenedState);
-      const commandMenuCommands = useRecoilComponentValueV2(
-        commandMenuCommandsComponentSelector,
-        'command-menu',
-      );
 
       return {
         commandMenu,
         isCommandMenuOpened,
-        commandMenuCommands,
       };
     },
     {

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

@@ -9,6 +9,7 @@ import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousH
 import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
 import { isDefined } from '~/utils/isDefined';
 
+import { actionMenuEntriesComponentState } from '@/action-menu/states/actionMenuEntriesComponentState';
 import { contextStoreCurrentObjectMetadataIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdComponentState';
 import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
 import { contextStoreCurrentViewTypeComponentState } from '@/context-store/states/contextStoreCurrentViewTypeComponentState';
@@ -126,6 +127,21 @@ export const useCommandMenu = () => {
           );
         }
 
+        const actionMenuEntries = snapshot
+          .getLoadable(
+            actionMenuEntriesComponentState.atomFamily({
+              instanceId: mainContextStoreComponentInstanceId,
+            }),
+          )
+          .getValue();
+
+        set(
+          actionMenuEntriesComponentState.atomFamily({
+            instanceId: 'command-menu',
+          }),
+          actionMenuEntries,
+        );
+
         setIsCommandMenuOpened(true);
         setHotkeyScopeAndMemorizePreviousScope(AppHotkeyScope.CommandMenuOpen);
       },
@@ -188,6 +204,13 @@ export const useCommandMenu = () => {
           null,
         );
 
+        set(
+          actionMenuEntriesComponentState.atomFamily({
+            instanceId: 'command-menu',
+          }),
+          new Map(),
+        );
+
         if (isCommandMenuOpened) {
           setIsCommandMenuOpened(false);
           resetSelectedItem();

packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuCommands.tsx

@@ -0,0 +1,314 @@
+import { actionMenuEntriesComponentSelector } from '@/action-menu/states/actionMenuEntriesComponentSelector';
+import {
+  ActionMenuEntryScope,
+  ActionMenuEntryType,
+} from '@/action-menu/types/ActionMenuEntry';
+import { useOpenCopilotRightDrawer } from '@/activities/copilot/right-drawer/hooks/useOpenCopilotRightDrawer';
+import { copilotQueryState } from '@/activities/copilot/right-drawer/states/copilotQueryState';
+import { useOpenActivityRightDrawer } from '@/activities/hooks/useOpenActivityRightDrawer';
+import { Note } from '@/activities/types/Note';
+import { Task } from '@/activities/types/Task';
+import { COMMAND_MENU_NAVIGATE_COMMANDS } from '@/command-menu/constants/CommandMenuNavigateCommands';
+import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchState';
+import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
+import {
+  Command,
+  CommandScope,
+  CommandType,
+} from '@/command-menu/types/Command';
+import { Company } from '@/companies/types/Company';
+import { CoreObjectNamePlural } from '@/object-metadata/types/CoreObjectNamePlural';
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { getCompanyDomainName } from '@/object-metadata/utils/getCompanyDomainName';
+import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
+import { useMultiObjectSearch } from '@/object-record/relation-picker/hooks/useMultiObjectSearch';
+import { useMultiObjectSearchQueryResultFormattedAsObjectRecordsMap } from '@/object-record/relation-picker/hooks/useMultiObjectSearchQueryResultFormattedAsObjectRecordsMap';
+import { makeOrFilterVariables } from '@/object-record/utils/makeOrFilterVariables';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
+import isEmpty from 'lodash.isempty';
+import { useMemo } from 'react';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
+import { Avatar, IconCheckbox, IconNotes, IconSparkles } from 'twenty-ui';
+import { useDebounce } from 'use-debounce';
+import { getLogoUrlFromDomainName } from '~/utils';
+
+export const useCommandMenuCommands = () => {
+  const actionMenuEntries = useRecoilComponentValueV2(
+    actionMenuEntriesComponentSelector,
+  );
+  const openActivityRightDrawer = useOpenActivityRightDrawer({
+    objectNameSingular: CoreObjectNameSingular.Note,
+  });
+  const isCommandMenuOpened = useRecoilValue(isCommandMenuOpenedState);
+  const commandMenuSearch = useRecoilValue(commandMenuSearchState);
+  const [deferredCommandMenuSearch] = useDebounce(commandMenuSearch, 300); // 200ms - 500ms
+
+  const isCopilotEnabled = useIsFeatureEnabled('IS_COPILOT_ENABLED');
+  const setCopilotQuery = useSetRecoilState(copilotQueryState);
+  const openCopilotRightDrawer = useOpenCopilotRightDrawer();
+
+  const copilotCommand: Command = {
+    id: 'copilot',
+    to: '', // TODO
+    Icon: IconSparkles,
+    label: 'Open Copilot',
+    type: CommandType.Navigate,
+    onCommandClick: () => {
+      setCopilotQuery(deferredCommandMenuSearch);
+      openCopilotRightDrawer();
+    },
+  };
+
+  const copilotCommands: Command[] = isCopilotEnabled ? [copilotCommand] : [];
+
+  const navigateCommands = Object.values(COMMAND_MENU_NAVIGATE_COMMANDS);
+
+  const actionRecordSelectionCommands: Command[] = actionMenuEntries
+    ?.filter(
+      (actionMenuEntry) =>
+        actionMenuEntry.type === ActionMenuEntryType.Standard &&
+        actionMenuEntry.scope === ActionMenuEntryScope.RecordSelection,
+    )
+    ?.map((actionMenuEntry) => ({
+      id: actionMenuEntry.key,
+      label: actionMenuEntry.label,
+      Icon: actionMenuEntry.Icon,
+      onCommandClick: actionMenuEntry.onClick,
+      type: CommandType.StandardAction,
+      scope: CommandScope.RecordSelection,
+    }));
+
+  const actionGlobalCommands: Command[] = actionMenuEntries
+    ?.filter(
+      (actionMenuEntry) =>
+        actionMenuEntry.type === ActionMenuEntryType.Standard &&
+        actionMenuEntry.scope === ActionMenuEntryScope.Global,
+    )
+    ?.map((actionMenuEntry) => ({
+      id: actionMenuEntry.key,
+      label: actionMenuEntry.label,
+      Icon: actionMenuEntry.Icon,
+      onCommandClick: actionMenuEntry.onClick,
+      type: CommandType.StandardAction,
+      scope: CommandScope.Global,
+    }));
+
+  const workflowRunRecordSelectionCommands: Command[] = actionMenuEntries
+    ?.filter(
+      (actionMenuEntry) =>
+        actionMenuEntry.type === ActionMenuEntryType.WorkflowRun &&
+        actionMenuEntry.scope === ActionMenuEntryScope.RecordSelection,
+    )
+    ?.map((actionMenuEntry) => ({
+      id: actionMenuEntry.key,
+      label: actionMenuEntry.label,
+      Icon: actionMenuEntry.Icon,
+      onCommandClick: actionMenuEntry.onClick,
+      type: CommandType.WorkflowRun,
+      scope: CommandScope.RecordSelection,
+    }));
+
+  const workflowRunGlobalCommands: Command[] = actionMenuEntries
+    ?.filter(
+      (actionMenuEntry) =>
+        actionMenuEntry.type === ActionMenuEntryType.WorkflowRun &&
+        actionMenuEntry.scope === ActionMenuEntryScope.Global,
+    )
+    ?.map((actionMenuEntry) => ({
+      id: actionMenuEntry.key,
+      label: actionMenuEntry.label,
+      Icon: actionMenuEntry.Icon,
+      onCommandClick: actionMenuEntry.onClick,
+      type: CommandType.WorkflowRun,
+      scope: CommandScope.Global,
+    }));
+
+  const {
+    matchesSearchFilterObjectRecordsQueryResult,
+    matchesSearchFilterObjectRecordsLoading: loading,
+  } = useMultiObjectSearch({
+    excludedObjects: [CoreObjectNameSingular.Task, CoreObjectNameSingular.Note],
+    searchFilterValue: deferredCommandMenuSearch ?? undefined,
+    limit: 3,
+  });
+
+  const { objectRecordsMap: matchesSearchFilterObjectRecords } =
+    useMultiObjectSearchQueryResultFormattedAsObjectRecordsMap({
+      multiObjectRecordsQueryResult:
+        matchesSearchFilterObjectRecordsQueryResult,
+    });
+
+  const { loading: isNotesLoading, records: notes } = useFindManyRecords<Note>({
+    skip: !isCommandMenuOpened,
+    objectNameSingular: CoreObjectNameSingular.Note,
+    filter: deferredCommandMenuSearch
+      ? makeOrFilterVariables([
+          { title: { ilike: `%${deferredCommandMenuSearch}%` } },
+          { body: { ilike: `%${deferredCommandMenuSearch}%` } },
+        ])
+      : undefined,
+    limit: 3,
+  });
+
+  const { loading: isTasksLoading, records: tasks } = useFindManyRecords<Task>({
+    skip: !isCommandMenuOpened,
+    objectNameSingular: CoreObjectNameSingular.Task,
+    filter: deferredCommandMenuSearch
+      ? makeOrFilterVariables([
+          { title: { ilike: `%${deferredCommandMenuSearch}%` } },
+          { body: { ilike: `%${deferredCommandMenuSearch}%` } },
+        ])
+      : undefined,
+    limit: 3,
+  });
+
+  const people = matchesSearchFilterObjectRecords.people?.map(
+    (people) => people.record,
+  );
+  const companies = matchesSearchFilterObjectRecords.companies?.map(
+    (companies) => companies.record,
+  );
+  const opportunities = matchesSearchFilterObjectRecords.opportunities?.map(
+    (opportunities) => opportunities.record,
+  );
+
+  const peopleCommands = useMemo(
+    () =>
+      people?.map(({ id, name: { firstName, lastName } }) => ({
+        id,
+        label: `${firstName} ${lastName}`,
+        to: `object/person/${id}`,
+        shouldCloseCommandMenuOnClick: true,
+        Icon: () => (
+          <Avatar
+            type="rounded"
+            avatarUrl={null}
+            placeholderColorSeed={id}
+            placeholder={`${firstName} ${lastName}`}
+          />
+        ),
+      })),
+    [people],
+  );
+
+  const companyCommands = useMemo(
+    () =>
+      companies?.map((company) => ({
+        id: company.id,
+        label: company.name ?? '',
+        to: `object/company/${company.id}`,
+        shouldCloseCommandMenuOnClick: true,
+        Icon: () => (
+          <Avatar
+            placeholderColorSeed={company.id}
+            placeholder={company.name}
+            avatarUrl={getLogoUrlFromDomainName(
+              getCompanyDomainName(company as Company),
+            )}
+          />
+        ),
+      })),
+    [companies],
+  );
+
+  const opportunityCommands = useMemo(
+    () =>
+      opportunities?.map(({ id, name }) => ({
+        id,
+        label: name ?? '',
+        to: `object/opportunity/${id}`,
+        shouldCloseCommandMenuOnClick: true,
+        Icon: () => (
+          <Avatar
+            type="rounded"
+            avatarUrl={null}
+            placeholderColorSeed={id}
+            placeholder={name ?? ''}
+          />
+        ),
+      })),
+    [opportunities],
+  );
+
+  const noteCommands = useMemo(
+    () =>
+      notes?.map((note) => ({
+        id: note.id,
+        label: note.title ?? '',
+        to: '',
+        onCommandClick: () => openActivityRightDrawer(note.id),
+        shouldCloseCommandMenuOnClick: true,
+        Icon: IconNotes,
+      })),
+    [notes, openActivityRightDrawer],
+  );
+
+  const tasksCommands = useMemo(
+    () =>
+      tasks?.map((task) => ({
+        id: task.id,
+        label: task.title ?? '',
+        to: '',
+        onCommandClick: () => openActivityRightDrawer(task.id),
+        shouldCloseCommandMenuOnClick: true,
+        Icon: IconCheckbox,
+      })),
+    [tasks, openActivityRightDrawer],
+  );
+
+  const customObjectRecordsMap = useMemo(() => {
+    return Object.fromEntries(
+      Object.entries(matchesSearchFilterObjectRecords).filter(
+        ([namePlural, records]) =>
+          ![
+            CoreObjectNamePlural.Person,
+            CoreObjectNamePlural.Opportunity,
+            CoreObjectNamePlural.Company,
+          ].includes(namePlural as CoreObjectNamePlural) && !isEmpty(records),
+      ),
+    );
+  }, [matchesSearchFilterObjectRecords]);
+
+  const customObjectCommands = useMemo(() => {
+    const customObjectCommandsArray: Command[] = [];
+    Object.values(customObjectRecordsMap).forEach((objectRecords) => {
+      customObjectCommandsArray.push(
+        ...objectRecords.map((objectRecord) => ({
+          id: objectRecord.record.id,
+          label: objectRecord.recordIdentifier.name,
+          to: `object/${objectRecord.objectMetadataItem.nameSingular}/${objectRecord.record.id}`,
+          shouldCloseCommandMenuOnClick: true,
+          Icon: () => (
+            <Avatar
+              type="rounded"
+              avatarUrl={null}
+              placeholderColorSeed={objectRecord.record.id}
+              placeholder={objectRecord.recordIdentifier.name ?? ''}
+            />
+          ),
+        })),
+      );
+    });
+
+    return customObjectCommandsArray;
+  }, [customObjectRecordsMap]);
+
+  const isLoading = loading || isNotesLoading || isTasksLoading;
+
+  return {
+    copilotCommands,
+    navigateCommands,
+    actionRecordSelectionCommands,
+    actionGlobalCommands,
+    workflowRunRecordSelectionCommands,
+    workflowRunGlobalCommands,
+    peopleCommands,
+    companyCommands,
+    opportunityCommands,
+    noteCommands,
+    tasksCommands,
+    customObjectCommands,
+    isLoading,
+  };
+};

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

@@ -0,0 +1,54 @@
+import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
+import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchState';
+import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState';
+import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
+import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
+import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
+import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
+import { isNonEmptyString } from '@sniptt/guards';
+import { useRecoilValue } from 'recoil';
+import { Key } from 'ts-key-enum';
+
+export const useCommandMenuHotKeys = () => {
+  const { closeCommandMenu } = useCommandMenu();
+
+  const commandMenuSearch = useRecoilValue(commandMenuSearchState);
+
+  const setContextStoreTargetedRecordsRule = useSetRecoilComponentStateV2(
+    contextStoreTargetedRecordsRuleComponentState,
+    'command-menu',
+  );
+
+  const setContextStoreNumberOfSelectedRecords = useSetRecoilComponentStateV2(
+    contextStoreNumberOfSelectedRecordsComponentState,
+    'command-menu',
+  );
+
+  useScopedHotkeys(
+    [Key.Escape],
+    () => {
+      closeCommandMenu();
+    },
+    AppHotkeyScope.CommandMenuOpen,
+    [closeCommandMenu],
+  );
+
+  useScopedHotkeys(
+    [Key.Backspace, Key.Delete],
+    () => {
+      if (!isNonEmptyString(commandMenuSearch)) {
+        setContextStoreTargetedRecordsRule({
+          mode: 'selection',
+          selectedRecordIds: [],
+        });
+
+        setContextStoreNumberOfSelectedRecords(0);
+      }
+    },
+    AppHotkeyScope.CommandMenuOpen,
+    [closeCommandMenu],
+    {
+      preventDefault: false,
+    },
+  );
+};

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

@@ -0,0 +1,37 @@
+import { Command } from '@/command-menu/types/Command';
+import { isNonEmptyString } from '@sniptt/guards';
+import { useDebounce } from 'use-debounce';
+
+export const useMatchCommands = ({
+  commandMenuSearch,
+}: {
+  commandMenuSearch: string;
+}) => {
+  const [deferredCommandMenuSearch] = useDebounce(commandMenuSearch, 300); // 200ms - 500ms
+
+  const checkInShortcuts = (cmd: Command, search: string) => {
+    return (cmd.firstHotKey + (cmd.secondHotKey ?? ''))
+      .toLowerCase()
+      .includes(search.toLowerCase());
+  };
+
+  const checkInLabels = (cmd: Command, search: string) => {
+    if (isNonEmptyString(cmd.label)) {
+      return cmd.label.toLowerCase().includes(search.toLowerCase());
+    }
+    return false;
+  };
+
+  const matchCommands = (commands: Command[]) => {
+    return commands.filter((cmd) =>
+      deferredCommandMenuSearch.length > 0
+        ? checkInShortcuts(cmd, deferredCommandMenuSearch) ||
+          checkInLabels(cmd, deferredCommandMenuSearch)
+        : true,
+    );
+  };
+
+  return {
+    matchCommands,
+  };
+};

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

@@ -0,0 +1,73 @@
+import { useCommandMenuCommands } from '@/command-menu/hooks/useCommandMenuCommands';
+import { useMatchCommands } from '@/command-menu/hooks/useMatchCommands';
+
+export const useMatchingCommandMenuCommands = ({
+  commandMenuSearch,
+}: {
+  commandMenuSearch: string;
+}) => {
+  const { matchCommands } = useMatchCommands({ commandMenuSearch });
+
+  const {
+    copilotCommands,
+    navigateCommands,
+    actionRecordSelectionCommands,
+    actionGlobalCommands,
+    workflowRunRecordSelectionCommands,
+    workflowRunGlobalCommands,
+    peopleCommands,
+    companyCommands,
+    opportunityCommands,
+    noteCommands,
+    tasksCommands,
+    customObjectCommands,
+    isLoading,
+  } = useCommandMenuCommands();
+
+  const matchingNavigateCommand = matchCommands(navigateCommands);
+
+  const matchingStandardActionRecordSelectionCommands = matchCommands(
+    actionRecordSelectionCommands,
+  );
+
+  const matchingStandardActionGlobalCommands =
+    matchCommands(actionGlobalCommands);
+
+  const matchingWorkflowRunRecordSelectionCommands = matchCommands(
+    workflowRunRecordSelectionCommands,
+  );
+
+  const matchingWorkflowRunGlobalCommands = matchCommands(
+    workflowRunGlobalCommands,
+  );
+
+  const isNoResults =
+    !matchingStandardActionRecordSelectionCommands.length &&
+    !matchingWorkflowRunRecordSelectionCommands.length &&
+    !matchingStandardActionGlobalCommands.length &&
+    !matchingWorkflowRunGlobalCommands.length &&
+    !matchingNavigateCommand.length &&
+    !peopleCommands?.length &&
+    !companyCommands?.length &&
+    !opportunityCommands?.length &&
+    !noteCommands?.length &&
+    !tasksCommands?.length &&
+    !customObjectCommands?.length;
+
+  return {
+    isNoResults,
+    isLoading,
+    copilotCommands,
+    matchingStandardActionRecordSelectionCommands,
+    matchingWorkflowRunRecordSelectionCommands,
+    matchingStandardActionGlobalCommands,
+    matchingWorkflowRunGlobalCommands,
+    matchingNavigateCommand,
+    peopleCommands,
+    companyCommands,
+    opportunityCommands,
+    noteCommands,
+    tasksCommands,
+    customObjectCommands,
+  };
+};