Add Keyboard navigation on IconPicker (#2778)

* Add Add Keyboard navigation on IconPicker

Co-authored-by: Matheus <matheus_benini@hotmail.com>

* Add Keyboard navigation on IconPicker

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>

* Add Keyboard navigation on IconPicker

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>

* Add Keyboard navigation on IconPicker

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>

* Refactor according to review

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>

* Implement IconPicker

* Remove onEnter clicked

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Charles Bochet <charles@twenty.com>

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

@@ -4,7 +4,6 @@ import { useRecoilValue } from 'recoil';
 
 import { useOpenActivityRightDrawer } from '@/activities/hooks/useOpenActivityRightDrawer';
 import { Activity } from '@/activities/types/Activity';
-import { CommandMenuSelectableListEffect } from '@/command-menu/components/CommandMenuSelectableListEffect';
 import { Company } from '@/companies/types/Company';
 import { useKeyboardShortcutMenu } from '@/keyboard-shortcut-menu/hooks/useKeyboardShortcutMenu';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
@@ -86,7 +85,7 @@ export const StyledEmpty = styled.div`
 `;
 
 export const CommandMenu = () => {
-  const { toggleCommandMenu, closeCommandMenu } = useCommandMenu();
+  const { toggleCommandMenu } = useCommandMenu();
 
   const openActivityRightDrawer = useOpenActivityRightDrawer();
   const isCommandMenuOpened = useRecoilValue(isCommandMenuOpenedState);
@@ -109,17 +108,6 @@ export const CommandMenu = () => {
     [toggleCommandMenu, setSearch],
   );
 
-  useScopedHotkeys(
-    'esc',
-    () => {
-      setSearch('');
-      closeKeyboardShortcutMenu();
-      closeCommandMenu();
-    },
-    AppHotkeyScope.CommandMenu,
-    [toggleCommandMenu, setSearch],
-  );
-
   const { records: people } = useFindManyRecords<Person>({
     skip: !isCommandMenuOpened,
     objectNameSingular: 'person',
@@ -198,12 +186,13 @@ export const CommandMenu = () => {
         <StyledList>
           <ScrollWrapper>
             <StyledInnerList>
-              <CommandMenuSelectableListEffect
-                selectableItemIds={selectableItemIds}
-              />
               <SelectableList
                 selectableListId="command-menu-list"
-                selectableItemIds={selectableItemIds}
+                selectableItemIds={[selectableItemIds]}
+                hotkeyScope={AppHotkeyScope.CommandMenu}
+                onEnter={(itemId) => {
+                  console.log(itemId);
+                }}
               >
                 {!matchingCreateCommand.length &&
                   !matchingNavigateCommand.length &&