Refactor/filters (#498)

* 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

* Fixes

* wip

* wip

* wip

* Use company filters

* Refactored FilterDropdown into multiple components

* Refactored entity search select in dropdown

* Renamed states

* Fixed people filters

* Removed unused code

* Cleaned states

* Cleaned state

* Better naming

* fixed rebase

* Fix

* Fixed stories and mocked data and displayName bug

* Fixed cancel sort

* Fixed naming

* Fixed dropdown height

* Fix

* Fixed lint

front/src/modules/relation-picker/components/SingleEntitySelectBase.tsx

@@ -0,0 +1,74 @@
+import { useRef } from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
+
+import { EntityForSelect } from '@/relation-picker/types/EntityForSelect';
+import { DropdownMenuItem } from '@/ui/components/menu/DropdownMenuItem';
+import { DropdownMenuItemContainer } from '@/ui/components/menu/DropdownMenuItemContainer';
+import { DropdownMenuSelectableItem } from '@/ui/components/menu/DropdownMenuSelectableItem';
+import { Avatar } from '@/users/components/Avatar';
+import { isDefined } from '@/utils/type-guards/isDefined';
+
+import { useEntitySelectScroll } from '../hooks/useEntitySelectScroll';
+
+export type EntitiesForSingleEntitySelect<
+  CustomEntityForSelect extends EntityForSelect,
+> = {
+  selectedEntity: CustomEntityForSelect;
+  entitiesToSelect: CustomEntityForSelect[];
+};
+
+export function SingleEntitySelectBase<
+  CustomEntityForSelect extends EntityForSelect,
+>({
+  entities,
+  onEntitySelected,
+}: {
+  entities: EntitiesForSingleEntitySelect<CustomEntityForSelect>;
+  onEntitySelected: (entity: CustomEntityForSelect) => void;
+}) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const entitiesInDropdown = isDefined(entities.selectedEntity)
+    ? [entities.selectedEntity, ...(entities.entitiesToSelect ?? [])]
+    : entities.entitiesToSelect ?? [];
+
+  const { hoveredIndex } = useEntitySelectScroll({
+    entities: entitiesInDropdown,
+    containerRef,
+  });
+
+  useHotkeys(
+    'enter',
+    () => {
+      onEntitySelected(entitiesInDropdown[hoveredIndex]);
+    },
+    {
+      enableOnContentEditable: true,
+      enableOnFormTags: true,
+    },
+    [entitiesInDropdown, hoveredIndex, onEntitySelected],
+  );
+
+  return (
+    <DropdownMenuItemContainer ref={containerRef}>
+      {entitiesInDropdown?.map((entity, index) => (
+        <DropdownMenuSelectableItem
+          key={entity.id}
+          selected={entities.selectedEntity?.id === entity.id}
+          hovered={hoveredIndex === index}
+          onClick={() => onEntitySelected(entity)}
+        >
+          <Avatar
+            avatarUrl={entity.avatarUrl}
+            placeholder={entity.name}
+            size={16}
+            type={entity.avatarType ?? 'rounded'}
+          />
+          {entity.name}
+        </DropdownMenuSelectableItem>
+      ))}
+      {entitiesInDropdown?.length === 0 && (
+        <DropdownMenuItem>No result</DropdownMenuItem>
+      )}
+    </DropdownMenuItemContainer>
+  );
+}