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/ui/layout/selectable-list/components/SelectableList.tsx

@@ -26,7 +26,7 @@ export const SelectableList = ({
 }: SelectableListProps) => {
   useSelectableListHotKeys(selectableListId, hotkeyScope);
 
-  const { setSelectableItemIds, setSelectableListOnEnter } =
+  const { setSelectableItemIds, setSelectableListOnEnter, setSelectedItemId } =
     useSelectableList(selectableListId);
 
   useEffect(() => {
@@ -47,7 +47,12 @@ export const SelectableList = ({
     if (isDefined(selectableItemIdArray)) {
       setSelectableItemIds(arrayToChunks(selectableItemIdArray, 1));
     }
-  }, [selectableItemIdArray, selectableItemIdMatrix, setSelectableItemIds]);
+  }, [
+    selectableItemIdArray,
+    selectableItemIdMatrix,
+    setSelectableItemIds,
+    setSelectedItemId,
+  ]);
 
   return (
     <SelectableListScope selectableListScopeId={selectableListId}>

packages/twenty-front/src/modules/ui/layout/selectable-list/hooks/useSelectableList.ts

@@ -33,11 +33,23 @@ export const useSelectableList = (selectableListId?: string) => {
     [selectedItemIdState, isSelectedItemIdSelector],
   );
 
+  const setSelectedItemId = useRecoilCallback(
+    ({ set }) =>
+      (itemId: string) => {
+        resetSelectedItem();
+        set(selectedItemIdState, itemId);
+        set(isSelectedItemIdSelector(itemId), true);
+      },
+    [resetSelectedItem, selectedItemIdState, isSelectedItemIdSelector],
+  );
+
   return {
     selectableListId: scopeId,
     setSelectableItemIds,
     isSelectedItemIdSelector,
     setSelectableListOnEnter,
     resetSelectedItem,
+    setSelectedItemId,
+    selectedItemIdState,
   };
 };