Replace hotkey scopes by focus stack (Part 1 - Dropdowns and Side Panel) (#12673)

This PR is the first part of a refactoring aiming to deprecate the
hotkey scopes api in favor of the new focus stack api which is more
robust.

The refactored components in this PR are the dropdowns and the side
panel/command menu.

- Replaced `useScopedHotkeys` by `useHotkeysOnFocusedElement` for all
dropdown components, selectable lists and the command menu
- Introduced `focusId` for all dropdowns and created a common hotkey
scope `DropdownHotkeyScope` for backward compatibility
- Replaced `setHotkeyScopeAndMemorizePreviousScope` occurrences with
`usePushFocusItemToFocusStack` and `goBackToPreviousHotkeyScope` with
`removeFocusItemFromFocusStack`

Note: Test that the shorcuts and arrow key navigation still work
properly when interacting with dropdowns and the command menu.

Bugs that I have spotted during the QA but which are already present on
main:
- Icon picker select with arrow keys doesn’t work inside dropdowns
- Some dropdowns are not selectable with arrow keys (no selectable list)
- Dropdowns in dropdowns don’t reset the hotkey scope correctly when
closing
- The table click outside is not triggered after closing a table cell
and clicking outside of the table

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

@@ -13,19 +13,26 @@ type SelectableListProps = {
   selectableItemIdArray?: string[];
   selectableItemIdMatrix?: string[][];
   onSelect?: (selected: string) => void;
-  hotkeyScope: string;
   selectableListInstanceId: string;
+  focusId: string;
+  hotkeyScope: string;
 };
 
 export const SelectableList = ({
   children,
-  hotkeyScope,
   selectableItemIdArray,
   selectableItemIdMatrix,
   selectableListInstanceId,
   onSelect,
+  focusId,
+  hotkeyScope,
 }: SelectableListProps) => {
-  useSelectableListHotKeys(selectableListInstanceId, hotkeyScope, onSelect);
+  useSelectableListHotKeys(
+    selectableListInstanceId,
+    hotkeyScope,
+    focusId,
+    onSelect,
+  );
 
   const setSelectableItemIds = useSetRecoilComponentStateV2(
     selectableItemIdsComponentState,
@@ -54,7 +61,7 @@ export const SelectableList = ({
         instanceId: selectableListInstanceId,
       }}
     >
-      <SelectableListContextProvider value={{ hotkeyScope }}>
+      <SelectableListContextProvider value={{ focusId, hotkeyScope }}>
         {children}
       </SelectableListContextProvider>
     </SelectableListComponentInstanceContext.Provider>

packages/twenty-front/src/modules/ui/layout/selectable-list/components/SelectableListItemHotkeyEffect.tsx

@@ -8,12 +8,14 @@ export const SelectableListItemHotkeyEffect = ({
   itemId: string;
   onEnter: () => void;
 }) => {
-  const { hotkeyScope } = useSelectableListContextOrThrow();
+  const { focusId, hotkeyScope } = useSelectableListContextOrThrow();
 
   useSelectableListListenToEnterHotkeyOnItem({
-    hotkeyScope,
+    focusId,
     itemId,
     onEnter,
+    hotkeyScope,
   });
+
   return null;
 };

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

@@ -5,14 +5,16 @@ import { Key } from 'ts-key-enum';
 import { selectableItemIdsComponentState } from '@/ui/layout/selectable-list/states/selectableItemIdsComponentState';
 import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState';
 import { isSelectedItemIdComponentFamilySelector } from '@/ui/layout/selectable-list/states/selectors/isSelectedItemIdComponentFamilySelector';
-import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
+import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
 import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
 
 type Direction = 'up' | 'down' | 'left' | 'right';
 
 export const useSelectableListHotKeys = (
   instanceId: string,
+  // TODO: Remove this after migration to focus stack
   hotkeyScope: string,
+  focusId: string,
   onSelect?: (itemId: string) => void,
 ) => {
   const findPosition = (
@@ -134,16 +136,35 @@ export const useSelectableListHotKeys = (
     [instanceId, onSelect],
   );
 
-  useScopedHotkeys(Key.ArrowUp, () => handleSelect('up'), hotkeyScope, []);
+  useHotkeysOnFocusedElement({
+    keys: Key.ArrowUp,
+    callback: () => handleSelect('up'),
+    focusId,
+    scope: hotkeyScope,
+    dependencies: [handleSelect],
+  });
 
-  useScopedHotkeys(Key.ArrowDown, () => handleSelect('down'), hotkeyScope, []);
+  useHotkeysOnFocusedElement({
+    keys: Key.ArrowDown,
+    callback: () => handleSelect('down'),
+    focusId,
+    scope: hotkeyScope,
+    dependencies: [handleSelect],
+  });
 
-  useScopedHotkeys(Key.ArrowLeft, () => handleSelect('left'), hotkeyScope, []);
+  useHotkeysOnFocusedElement({
+    keys: Key.ArrowLeft,
+    callback: () => handleSelect('left'),
+    focusId,
+    scope: hotkeyScope,
+    dependencies: [handleSelect],
+  });
 
-  useScopedHotkeys(
-    Key.ArrowRight,
-    () => handleSelect('right'),
-    hotkeyScope,
-    [],
-  );
+  useHotkeysOnFocusedElement({
+    keys: Key.ArrowRight,
+    callback: () => handleSelect('right'),
+    focusId,
+    scope: hotkeyScope,
+    dependencies: [handleSelect],
+  });
 };

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

@@ -1,6 +1,6 @@
 import { SelectableListComponentInstanceContext } from '@/ui/layout/selectable-list/states/contexts/SelectableListComponentInstanceContext';
 import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState';
-import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
+import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
 import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
 import { isNonEmptyString } from '@sniptt/guards';
@@ -8,20 +8,24 @@ import { useRecoilCallback } from 'recoil';
 import { Key } from 'ts-key-enum';
 
 export const useSelectableListListenToEnterHotkeyOnItem = ({
-  hotkeyScope,
+  focusId,
   itemId,
   onEnter,
+  hotkeyScope,
 }: {
-  hotkeyScope: string;
+  focusId: string;
   itemId: string;
   onEnter: () => void;
+  // TODO: Remove this after migration to focus stack
+  hotkeyScope: string;
 }) => {
   const instanceId = useAvailableComponentInstanceIdOrThrow(
     SelectableListComponentInstanceContext,
   );
-  useScopedHotkeys(
-    Key.Enter,
-    useRecoilCallback(
+
+  useHotkeysOnFocusedElement({
+    keys: Key.Enter,
+    callback: useRecoilCallback(
       ({ snapshot }) =>
         () => {
           const selectedItemId = getSnapshotValue(
@@ -37,7 +41,8 @@ export const useSelectableListListenToEnterHotkeyOnItem = ({
         },
       [instanceId, itemId, onEnter],
     ),
-    hotkeyScope,
-    [itemId, onEnter],
-  );
+    focusId,
+    scope: hotkeyScope,
+    dependencies: [itemId, onEnter],
+  });
 };

packages/twenty-front/src/modules/ui/layout/selectable-list/states/contexts/SelectableListContext.tsx

@@ -1,6 +1,7 @@
 import { createRequiredContext } from '~/utils/createRequiredContext';
 
 export type SelectableListContextValue = {
+  focusId: string;
   hotkeyScope: string;
 };