Add Keyboard navigation on IconPicker

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

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
 
@@ -12,6 +13,7 @@ import { Person } from '@/people/types/Person';
 import { IconNotes } from '@/ui/display/icon';
 import { SelectableItem } from '@/ui/layout/selectable-list/components/SelectableItem';
 import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
+import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
@@ -98,6 +100,11 @@ export const CommandMenu = () => {
     setSearch(event.target.value);
   };
 
+  const { selectedItemId } = useSelectableList({
+    selectableListId: 'command-menu-list',
+  });
+  const navigate = useNavigate();
+
   useScopedHotkeys(
     'ctrl+k,meta+k',
     () => {
@@ -187,6 +194,38 @@ export const CommandMenu = () => {
     .concat(companies.map((company) => company.id))
     .concat(activities.map((activity) => activity.id));
 
+  useScopedHotkeys(
+    'Enter',
+    () => {
+      closeKeyboardShortcutMenu();
+      const otherCommands = [
+        ...people.map((person) => ({
+          id: person.id,
+          to: `object/person/${person.id}`,
+        })),
+        ...companies.map((company) => ({
+          id: company.id,
+          to: `object/company/${company.id}`,
+        })),
+        ...activities.map((activity) => ({
+          id: activity.id,
+          to: `object/activity/${activity.id}`,
+        })),
+      ] as Command[];
+
+      const selectedCommand = [...commandMenuCommands, ...otherCommands].find(
+        (cmd) => cmd.id === selectedItemId,
+      );
+
+      selectedCommand?.onCommandClick?.();
+      if (selectedCommand?.to) navigate(selectedCommand.to);
+
+      toggleCommandMenu();
+    },
+    AppHotkeyScope.CommandMenu,
+    [toggleCommandMenu, setSearch],
+  );
+
   return (
     isCommandMenuOpened && (
       <StyledDialog>
@@ -203,7 +242,8 @@ export const CommandMenu = () => {
               />
               <SelectableList
                 selectableListId="command-menu-list"
-                selectableItemIds={selectableItemIds}
+                selectableItemIds={[selectableItemIds]}
+                hotkeyScope={AppHotkeyScope.CommandMenu}
               >
                 {!matchingCreateCommand.length &&
                   !matchingNavigateCommand.length &&

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

@@ -14,7 +14,7 @@ export const CommandMenuSelectableListEffect = ({
   });
 
   useEffect(() => {
-    setSelectableItemIds(selectableItemIds);
+    setSelectableItemIds([selectableItemIds]);
   }, [selectableItemIds, setSelectableItemIds]);
 
   return <></>;

front/src/modules/ui/input/components/IconPicker.tsx

@@ -1,5 +1,6 @@
 import { useMemo, useState } from 'react';
 import styled from '@emotion/styled';
+import { Key } from 'ts-key-enum';
 
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
@@ -9,6 +10,10 @@ import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/Dropdow
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
+import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
+import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
+import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
+import { arrayToChunks } from '~/utils/array/array-to-chunks';
 
 import { IconButton, IconButtonVariant } from '../button/components/IconButton';
 import { LightIconButton } from '../button/components/LightIconButton';
@@ -77,49 +82,81 @@ export const IconPicker = ({
     ).slice(0, 25);
   }, [icons, searchString, selectedIconKey]);
 
+  const iconKeys2d = useMemo(
+    () => arrayToChunks(iconKeys.slice(), 5),
+    [iconKeys],
+  );
+
+  const { selectedItemId } = useSelectableList({
+    selectableListId: 'icon-list',
+  });
+
+  const selectedItem = selectedItemId ?? selectedIconKey;
+
+  useScopedHotkeys(
+    Key.Enter,
+    () => {
+      if (selectedItem) {
+        const itemIndex = iconKeys.indexOf(selectedItem);
+
+        if (itemIndex === -1)
+          onChange({ iconKey: selectedItem, Icon: icons[itemIndex] });
+        closeDropdown();
+      }
+    },
+    IconPickerHotkeyScope.IconPicker,
+    [selectedItem],
+  );
+
   return (
     <DropdownScope dropdownScopeId={dropdownScopeId}>
       <Dropdown
         dropdownHotkeyScope={{ scope: IconPickerHotkeyScope.IconPicker }}
         clickableComponent={
           <IconButton
             disabled={disabled}
-            Icon={selectedIconKey ? icons[selectedIconKey] : IconApps}
+            Icon={selectedItem ? icons[selectedItem] : IconApps}
             variant={variant}
           />
         }
         dropdownMenuWidth={176}
         dropdownComponents={
-          <DropdownMenu width={176}>
-            <DropdownMenuSearchInput
-              placeholder="Search icon"
-              autoFocus
-              onChange={(event) => setSearchString(event.target.value)}
-            />
-            <DropdownMenuSeparator />
-            <DropdownMenuItemsContainer>
-              {isLoading ? (
-                <DropdownMenuSkeletonItem />
-              ) : (
-                <StyledMenuIconItemsContainer>
-                  {iconKeys.map((iconKey) => (
-                    <StyledLightIconButton
-                      key={iconKey}
-                      aria-label={convertIconKeyToLabel(iconKey)}
-                      isSelected={selectedIconKey === iconKey}
-                      size="medium"
-                      title={iconKey}
-                      Icon={icons[iconKey]}
-                      onClick={() => {
-                        onChange({ iconKey, Icon: icons[iconKey] });
-                        closeDropdown();
-                      }}
-                    />
-                  ))}
-                </StyledMenuIconItemsContainer>
-              )}
-            </DropdownMenuItemsContainer>
-          </DropdownMenu>
+          <SelectableList
+            selectableListId="icon-list"
+            selectableItemIds={iconKeys2d}
+            hotkeyScope={IconPickerHotkeyScope.IconPicker}
+          >
+            <DropdownMenu width={176}>
+              <DropdownMenuSearchInput
+                placeholder="Search icon"
+                autoFocus
+                onChange={(event) => setSearchString(event.target.value)}
+              />
+              <DropdownMenuSeparator />
+              <DropdownMenuItemsContainer>
+                {isLoading ? (
+                  <DropdownMenuSkeletonItem />
+                ) : (
+                  <StyledMenuIconItemsContainer>
+                    {iconKeys.map((iconKey) => (
+                      <StyledLightIconButton
+                        key={iconKey}
+                        aria-label={convertIconKeyToLabel(iconKey)}
+                        isSelected={selectedItem === iconKey}
+                        size="medium"
+                        title={iconKey}
+                        Icon={icons[iconKey]}
+                        onClick={() => {
+                          onChange({ iconKey, Icon: icons[iconKey] });
+                          closeDropdown();
+                        }}
+                      />
+                    ))}
+                  </StyledMenuIconItemsContainer>
+                )}
+              </DropdownMenuItemsContainer>
+            </DropdownMenu>
+          </SelectableList>
         }
         onClickOutside={onClickOutside}
         onClose={() => {

front/src/modules/ui/layout/selectable-list/components/SelectableList.tsx

@@ -1,13 +1,16 @@
-import { ReactNode } from 'react';
+import { ReactNode, useEffect } from 'react';
 import styled from '@emotion/styled';
 
 import { useSelectableListHotKeys } from '@/ui/layout/selectable-list/hooks/internal/useSelectableListHotKeys';
+import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
 import { SelectableListScope } from '@/ui/layout/selectable-list/scopes/SelectableListScope';
+
 type SelectableListProps = {
   children: ReactNode;
   selectableListId: string;
-  selectableItemIds: string[];
+  selectableItemIds: string[][];
   onSelect?: (selected: string) => void;
+  hotkeyScope: string;
 };
 
 const StyledSelectableItemsContainer = styled.div`
@@ -17,8 +20,18 @@ const StyledSelectableItemsContainer = styled.div`
 export const SelectableList = ({
   children,
   selectableListId,
+  hotkeyScope,
+  selectableItemIds,
 }: SelectableListProps) => {
-  useSelectableListHotKeys(selectableListId);
+  useSelectableListHotKeys(selectableListId, hotkeyScope);
+
+  const { setSelectableItemIds } = useSelectableList({
+    selectableListId,
+  });
+
+  useEffect(() => {
+    setSelectableItemIds(selectableItemIds);
+  }, [selectableItemIds, setSelectableItemIds]);
 
   return (
     <SelectableListScope selectableListScopeId={selectableListId}>

front/src/modules/ui/layout/selectable-list/hooks/internal/useSelectableListHotKeys.tsx

@@ -1,16 +1,37 @@
-import { isNull } from '@sniptt/guards';
 import { useRecoilCallback } from 'recoil';
 import { Key } from 'ts-key-enum';
 
 import { getSelectableListScopedStates } from '@/ui/layout/selectable-list/utils/internal/getSelectableListScopedStates';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
-import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
 import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
 
-export const useSelectableListHotKeys = (scopeId: string) => {
+type Direction = 'up' | 'down' | 'left' | 'right';
+
+export const useSelectableListHotKeys = (
+  scopeId: string,
+  hotkeyScope: string,
+) => {
+  const findPosition = (
+    selectableItemIds: string[][],
+    selectedItemId?: string | null,
+  ) => {
+    if (!selectedItemId) {
+      // If nothing is selected, return the default position
+      return { row: 0, col: 0 };
+    }
+
+    for (let row = 0; row < selectableItemIds.length; row++) {
+      const col = selectableItemIds[row].indexOf(selectedItemId);
+      if (col !== -1) {
+        return { row, col };
+      }
+    }
+    return { row: 0, col: 0 };
+  };
+
   const handleSelect = useRecoilCallback(
     ({ snapshot, set }) =>
-      (direction: 'up' | 'down') => {
+      (direction: Direction) => {
         const { selectedItemIdState, selectableItemIdsState } =
           getSelectableListScopedStates({
             selectableListScopeId: scopeId,
@@ -21,31 +42,54 @@ export const useSelectableListHotKeys = (scopeId: string) => {
           selectableItemIdsState,
         );
 
-        const computeNextId = (direction: 'up' | 'down') => {
+        const { row: currentRow, col: currentCol } = findPosition(
+          selectableItemIds,
+          selectedItemId,
+        );
+
+        const computeNextId = (direction: Direction) => {
           if (selectableItemIds.length === 0) {
             return;
           }
 
-          if (isNull(selectedItemId)) {
-            return direction === 'up'
-              ? selectableItemIds[selectableItemIds.length - 1]
-              : selectableItemIds[0];
-          }
+          const isSingleRow = selectableItemIds.length === 1;
 
-          const currentIndex = selectableItemIds.indexOf(selectedItemId);
-          if (currentIndex === -1) {
-            return direction === 'up'
-              ? selectableItemIds[selectableItemIds.length - 1]
-              : selectableItemIds[0];
+          let nextRow: number;
+          let nextCol: number;
+
+          switch (direction) {
+            case 'up':
+              nextRow = isSingleRow ? currentRow : Math.max(0, currentRow - 1);
+              nextCol = isSingleRow ? Math.max(0, currentCol - 1) : currentCol;
+              break;
+            case 'down':
+              nextRow = isSingleRow
+                ? currentRow
+                : Math.min(selectableItemIds.length - 1, currentRow + 1);
+              nextCol = isSingleRow
+                ? Math.min(
+                    selectableItemIds[currentRow].length - 1,
+                    currentCol + 1,
+                  )
+                : currentCol;
+              break;
+            case 'left':
+              nextRow = currentRow;
+              nextCol = Math.max(0, currentCol - 1);
+              break;
+            case 'right':
+              nextRow = currentRow;
+              nextCol = Math.min(
+                selectableItemIds[currentRow].length - 1,
+                currentCol + 1,
+              );
+              break;
+            default:
+              nextRow = currentRow;
+              nextCol = currentCol;
           }
 
-          return direction === 'up'
-            ? currentIndex == 0
-              ? selectableItemIds[selectableItemIds.length - 1]
-              : selectableItemIds[currentIndex - 1]
-            : currentIndex == selectableItemIds.length - 1
-            ? selectableItemIds[0]
-            : selectableItemIds[currentIndex + 1];
+          return selectableItemIds[nextRow][nextCol];
         };
 
         const nextId = computeNextId(direction);
@@ -70,17 +114,16 @@ export const useSelectableListHotKeys = (scopeId: string) => {
     [scopeId],
   );
 
-  useScopedHotkeys(
-    Key.ArrowUp,
-    () => handleSelect('up'),
-    AppHotkeyScope.CommandMenu,
-    [],
-  );
+  useScopedHotkeys(Key.ArrowUp, () => handleSelect('up'), hotkeyScope, []);
+
+  useScopedHotkeys(Key.ArrowDown, () => handleSelect('down'), hotkeyScope, []);
+
+  useScopedHotkeys(Key.ArrowLeft, () => handleSelect('left'), hotkeyScope, []);
 
   useScopedHotkeys(
-    Key.ArrowDown,
-    () => handleSelect('down'),
-    AppHotkeyScope.CommandMenu,
+    Key.ArrowRight,
+    () => handleSelect('right'),
+    hotkeyScope,
     [],
   );