Feat/better hotkeys scope (#526)

* Working version

* fix

* Fixed console log

* Fix lint

* wip

* Fix

* Fix

* consolelog

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/ui/components/editable-cell/hooks/useCloseEditableCell.ts

@@ -1,24 +1,24 @@
 import { useRecoilCallback } from 'recoil';
 
-import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
+import { useRemoveHighestHotkeysScopeStackItem } from '@/hotkeys/hooks/useRemoveHighestHotkeysScopeStackItem';
+import { useCloseCurrentCellInEditMode } from '@/ui/tables/hooks/useClearCellInEditMode';
+import { isSoftFocusActiveState } from '@/ui/tables/states/isSoftFocusActiveState';
 import { isSomeInputInEditModeState } from '@/ui/tables/states/isSomeInputInEditModeState';
 
-import { isEditModeScopedState } from '../states/isEditModeScopedState';
+import { useCurrentCellEditMode } from './useCurrentCellEditMode';
 
 export function useEditableCell() {
-  const [, setIsEditMode] = useRecoilScopedState(isEditModeScopedState);
+  const { setCurrentCellInEditMode } = useCurrentCellEditMode();
 
-  const closeEditableCell = useRecoilCallback(
-    ({ set }) =>
-      async () => {
-        setIsEditMode(false);
+  const closeCurrentCellInEditMode = useCloseCurrentCellInEditMode();
 
-        await new Promise((resolve) => setTimeout(resolve, 20));
+  const removeHighestHotkeysScopedStackItem =
+    useRemoveHighestHotkeysScopeStackItem();
 
-        set(isSomeInputInEditModeState, false);
-      },
-    [setIsEditMode],
-  );
+  function closeEditableCell() {
+    closeCurrentCellInEditMode();
+    removeHighestHotkeysScopedStackItem();
+  }
 
   const openEditableCell = useRecoilCallback(
     ({ snapshot, set }) =>
@@ -29,11 +29,12 @@ export function useEditableCell() {
 
         if (!isSomeInputInEditMode) {
           set(isSomeInputInEditModeState, true);
+          set(isSoftFocusActiveState, false);
 
-          setIsEditMode(true);
+          setCurrentCellInEditMode();
         }
       },
-    [setIsEditMode],
+    [setCurrentCellInEditMode],
   );
 
   return {

front/src/modules/ui/components/editable-cell/hooks/useCurrentCellEditMode.ts

@@ -0,0 +1,23 @@
+import { useCallback } from 'react';
+import { useRecoilState } from 'recoil';
+
+import { useMoveEditModeToCellPosition } from '@/ui/tables/hooks/useMoveEditModeToCellPosition';
+import { isCellInEditModeFamilyState } from '@/ui/tables/states/isCellInEditModeFamilyState';
+
+import { useCurrentCellPosition } from './useCurrentCellPosition';
+
+export function useCurrentCellEditMode() {
+  const moveEditModeToCellPosition = useMoveEditModeToCellPosition();
+
+  const currentCellPosition = useCurrentCellPosition();
+
+  const [isCurrentCellInEditMode] = useRecoilState(
+    isCellInEditModeFamilyState(currentCellPosition),
+  );
+
+  const setCurrentCellInEditMode = useCallback(() => {
+    moveEditModeToCellPosition(currentCellPosition);
+  }, [currentCellPosition, moveEditModeToCellPosition]);
+
+  return { isCurrentCellInEditMode, setCurrentCellInEditMode };
+}

front/src/modules/ui/components/editable-cell/hooks/useCurrentCellPosition.ts

@@ -0,0 +1,30 @@
+import { useMemo } from 'react';
+
+import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
+import { CellContext } from '@/ui/tables/states/CellContext';
+import { currentColumnNumberScopedState } from '@/ui/tables/states/currentColumnNumberScopedState';
+import { currentRowNumberScopedState } from '@/ui/tables/states/currentRowNumberScopedState';
+import { RowContext } from '@/ui/tables/states/RowContext';
+import { CellPosition } from '@/ui/tables/types/CellPosition';
+
+export function useCurrentCellPosition() {
+  const [currentRowNumber] = useRecoilScopedState(
+    currentRowNumberScopedState,
+    RowContext,
+  );
+
+  const [currentColumnNumber] = useRecoilScopedState(
+    currentColumnNumberScopedState,
+    CellContext,
+  );
+
+  const currentCellPosition: CellPosition = useMemo(
+    () => ({
+      column: currentColumnNumber,
+      row: currentRowNumber,
+    }),
+    [currentColumnNumber, currentRowNumber],
+  );
+
+  return currentCellPosition;
+}

front/src/modules/ui/components/editable-cell/hooks/useIsSoftFocusOnCurrentCell.ts

@@ -1,35 +1,14 @@
-import { useMemo } from 'react';
 import { useRecoilValue } from 'recoil';
 
-import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
-import { CellContext } from '@/ui/tables/states/CellContext';
-import { currentColumnNumberScopedState } from '@/ui/tables/states/currentColumnNumberScopedState';
-import { currentRowNumberScopedState } from '@/ui/tables/states/currentRowNumberScopedState';
 import { isSoftFocusOnCellFamilyState } from '@/ui/tables/states/isSoftFocusOnCellFamilyState';
-import { RowContext } from '@/ui/tables/states/RowContext';
-import { TablePosition } from '@/ui/tables/types/TablePosition';
+
+import { useCurrentCellPosition } from './useCurrentCellPosition';
 
 export function useIsSoftFocusOnCurrentCell() {
-  const [currentRowNumber] = useRecoilScopedState(
-    currentRowNumberScopedState,
-    RowContext,
-  );
-
-  const [currentColumnNumber] = useRecoilScopedState(
-    currentColumnNumberScopedState,
-    CellContext,
-  );
-
-  const currentTablePosition: TablePosition = useMemo(
-    () => ({
-      column: currentColumnNumber,
-      row: currentRowNumber,
-    }),
-    [currentColumnNumber, currentRowNumber],
-  );
+  const currentCellPosition = useCurrentCellPosition();
 
   const isSoftFocusOnCell = useRecoilValue(
-    isSoftFocusOnCellFamilyState(currentTablePosition),
+    isSoftFocusOnCellFamilyState(currentCellPosition),
   );
 
   return isSoftFocusOnCell;

front/src/modules/ui/components/editable-cell/hooks/useSetSoftFocusOnCurrentCell.ts

@@ -1,14 +1,18 @@
 import { useCallback, useMemo } from 'react';
+import { useRecoilState } from 'recoil';
 
+import { useAddToHotkeysScopeStack } from '@/hotkeys/hooks/useAddToHotkeysScopeStack';
+import { InternalHotkeysScope } from '@/hotkeys/types/internal/InternalHotkeysScope';
 import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
 import { useSetSoftFocusPosition } from '@/ui/tables/hooks/useSetSoftFocusPosition';
 import { CellContext } from '@/ui/tables/states/CellContext';
 import { currentColumnNumberScopedState } from '@/ui/tables/states/currentColumnNumberScopedState';
 import { currentRowNumberScopedState } from '@/ui/tables/states/currentRowNumberScopedState';
+import { isSoftFocusActiveState } from '@/ui/tables/states/isSoftFocusActiveState';
 import { RowContext } from '@/ui/tables/states/RowContext';
-import { TablePosition } from '@/ui/tables/types/TablePosition';
+import { CellPosition } from '@/ui/tables/types/CellPosition';
 
-export function useSetSoftFocusOnCurrentCell() {
+export function useSoftFocusOnCurrentCell() {
   const setSoftFocusPosition = useSetSoftFocusPosition();
   const [currentRowNumber] = useRecoilScopedState(
     currentRowNumberScopedState,
@@ -20,7 +24,7 @@ export function useSetSoftFocusOnCurrentCell() {
     CellContext,
   );
 
-  const currentTablePosition: TablePosition = useMemo(
+  const currentTablePosition: CellPosition = useMemo(
     () => ({
       column: currentColumnNumber,
       row: currentRowNumber,
@@ -28,7 +32,18 @@ export function useSetSoftFocusOnCurrentCell() {
     [currentColumnNumber, currentRowNumber],
   );
 
+  const [, setIsSoftFocusActive] = useRecoilState(isSoftFocusActiveState);
+
+  const addToHotkeysScopeStack = useAddToHotkeysScopeStack();
+
   return useCallback(() => {
     setSoftFocusPosition(currentTablePosition);
-  }, [setSoftFocusPosition, currentTablePosition]);
+    setIsSoftFocusActive(true);
+    addToHotkeysScopeStack({ scope: InternalHotkeysScope.TableSoftFocus });
+  }, [
+    setSoftFocusPosition,
+    currentTablePosition,
+    setIsSoftFocusActive,
+    addToHotkeysScopeStack,
+  ]);
 }