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/ui/components/editable-cell/EditableCellDisplayMode.tsx

@@ -1,7 +1,12 @@
-import { ReactElement } from 'react';
 import styled from '@emotion/styled';
 
-export const EditableCellNormalModeOuterContainer = styled.div`
+import { useIsSoftFocusOnCurrentCell } from './hooks/useIsSoftFocusOnCurrentCell';
+
+type Props = {
+  softFocus: boolean;
+};
+
+export const EditableCellNormalModeOuterContainer = styled.div<Props>`
   align-items: center;
   display: flex;
   height: 100%;
@@ -11,17 +16,12 @@ export const EditableCellNormalModeOuterContainer = styled.div`
   padding-right: ${({ theme }) => theme.spacing(1)};
   width: 100%;
 
-  &:hover {
-    -moz-box-shadow: inset 0 0 0 1px
-      ${({ theme }) => theme.font.color.extraLight};
-
-    -webkit-box-shadow: inset 0 0 0 1px
-      ${({ theme }) => theme.font.color.extraLight};
-    background: ${({ theme }) => theme.background.transparent.secondary};
-    border-radius: ${({ theme }) => theme.border.radius.md};
-
-    box-shadow: inset 0 0 0 1px ${({ theme }) => theme.font.color.extraLight};
-  }
+  ${(props) =>
+    props.softFocus
+      ? `background: ${props.theme.background.transparent.secondary};
+         border-radius: ${props.theme.border.radius.md};
+         box-shadow: inset 0 0 0 1px ${props.theme.grayScale.gray30};`
+      : ''}
 `;
 
 export const EditableCellNormalModeInnerContainer = styled.div`
@@ -32,13 +32,13 @@ export const EditableCellNormalModeInnerContainer = styled.div`
   width: 100%;
 `;
 
-type OwnProps = {
-  children: ReactElement;
-};
+export function EditableCellDisplayMode({
+  children,
+}: React.PropsWithChildren<unknown>) {
+  const hasSoftFocus = useIsSoftFocusOnCurrentCell();
 
-export function EditableCellDisplayMode({ children }: OwnProps) {
   return (
-    <EditableCellNormalModeOuterContainer>
+    <EditableCellNormalModeOuterContainer softFocus={hasSoftFocus}>
       <EditableCellNormalModeInnerContainer>
         {children}
       </EditableCellNormalModeInnerContainer>