Add tab hotkey on table page (#457)

* wip

* wip

* - Added scopes on useHotkeys
- Use new EditableCellV2
- Implemented Recoil Scoped State with specific context
- Implemented soft focus position
- Factorized open/close editable cell
- Removed editable relation old components
- Broke down entity table into multiple components
- Added Recoil Scope by CellContext
- Added Recoil Scope by RowContext

* First working version

* Use a new EditableCellSoftFocusMode

* Fixed initialize soft focus

* Fixed enter mode

* Added TODO

* Fix

* Fixes

* Fix tests

* Fix lint

* Fixes

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

front/src/modules/people/components/PeopleCompanyCell.tsx

@@ -1,7 +1,7 @@
 import CompanyChip from '@/companies/components/CompanyChip';
-import { EditableCellV2 } from '@/ui/components/editable-cell/EditableCellV2';
+import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
+import { EditableCell } from '@/ui/components/editable-cell/EditableCell';
 import { isCreateModeScopedState } from '@/ui/components/editable-cell/states/isCreateModeScopedState';
-import { useRecoilScopedState } from '@/ui/hooks/useRecoilScopedState';
 import { getLogoUrlFromDomainName } from '@/utils/utils';
 import { Company, Person } from '~/generated/graphql';
 
@@ -18,7 +18,7 @@ export function PeopleCompanyCell({ people }: OwnProps) {
   const [isCreating] = useRecoilScopedState(isCreateModeScopedState);
 
   return (
-    <EditableCellV2
+    <EditableCell
       editModeContent={
         isCreating ? (
           <PeopleCompanyCreateCell people={people} />

front/src/modules/people/components/PeopleCompanyCreateCell.tsx

@@ -2,11 +2,11 @@ import { useRef, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { v4 } from 'uuid';
 
+import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
 import { relationPickerSearchFilterScopedState } from '@/relation-picker/states/relationPickerSearchFilterScopedState';
 import { isCreateModeScopedState } from '@/ui/components/editable-cell/states/isCreateModeScopedState';
 import { DoubleTextInput } from '@/ui/components/inputs/DoubleTextInput';
 import { useListenClickOutsideArrayOfRef } from '@/ui/hooks/useListenClickOutsideArrayOfRef';
-import { useRecoilScopedState } from '@/ui/hooks/useRecoilScopedState';
 import { logError } from '@/utils/logs/logError';
 import {
   Person,

front/src/modules/people/components/PeopleCompanyPicker.tsx

@@ -1,9 +1,9 @@
+import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
 import { SingleEntitySelect } from '@/relation-picker/components/SingleEntitySelect';
 import { useFilteredSearchEntityQuery } from '@/relation-picker/hooks/useFilteredSearchEntityQuery';
 import { relationPickerSearchFilterScopedState } from '@/relation-picker/states/relationPickerSearchFilterScopedState';
-import { useCloseEditableCell } from '@/ui/components/editable-cell/hooks/useCloseEditableCell';
+import { useEditableCell } from '@/ui/components/editable-cell/hooks/useCloseEditableCell';
 import { isCreateModeScopedState } from '@/ui/components/editable-cell/states/isCreateModeScopedState';
-import { useRecoilScopedState } from '@/ui/hooks/useRecoilScopedState';
 import { getLogoUrlFromDomainName } from '@/utils/utils';
 import {
   CommentableType,
@@ -25,7 +25,7 @@ export function PeopleCompanyPicker({ people }: OwnProps) {
   );
   const [updatePeople] = useUpdatePeopleMutation();
 
-  const closeEditableCell = useCloseEditableCell();
+  const { closeEditableCell } = useEditableCell();
 
   const companies = useFilteredSearchEntityQuery({
     queryHook: useSearchCompanyQuery,