Refactor RecordSingleSelect and RecordMultiSelect to be synchronous (#10469)

## Context
We are experiencing a lot of re-rendering / flash on MultiRecordSelect /
SingleRecordSelect / RelationPicker.

This PR is a first step to refactor this components

## Scope

Only move files to uniformize and prepare for the upcoming refactoring

## Vision
- SingleRecordPicker
- MultipleRecordPicker
- sharing RecordPicker tooling (RecordPickerComponentInstanceContext,
searchState)

Used in other areas:
- RelationPicker (which is actually only a subcomponent of
RelationToOneFieldInput)
- RelationFromManyFieldInput
- WorkflowRelationFieldInput
- etc.

+ remove all effects
+ migrate to the latest APIs
+ make a pass on re-renders to remove them completely (we likely need to
use a bit more familyStates here)

packages/twenty-front/src/modules/ui/field/input/components/MultiSelectInput.tsx

@@ -3,7 +3,6 @@ import { useRecoilValue } from 'recoil';
 import { Key } from 'ts-key-enum';
 
 import { FieldMultiSelectValue } from '@/object-record/record-field/types/FieldMetadata';
-import { MULTI_OBJECT_RECORD_SELECT_SELECTABLE_LIST_ID } from '@/object-record/relation-picker/constants/MultiObjectRecordSelectSelectableListId';
 import { SelectOption } from '@/spreadsheet-import/types';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
@@ -19,6 +18,7 @@ import { MenuItemMultiSelectTag } from 'twenty-ui';
 import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly';
 
 type MultiSelectInputProps = {
+  selectableListComponentInstanceId: string;
   values: FieldMultiSelectValue;
   hotkeyScope: string;
   onCancel?: () => void;
@@ -27,6 +27,7 @@ type MultiSelectInputProps = {
 };
 
 export const MultiSelectInput = ({
+  selectableListComponentInstanceId,
   values,
   options,
   hotkeyScope,
@@ -34,10 +35,10 @@ export const MultiSelectInput = ({
   onOptionSelected,
 }: MultiSelectInputProps) => {
   const { selectedItemIdState } = useSelectableListStates({
-    selectableListScopeId: MULTI_OBJECT_RECORD_SELECT_SELECTABLE_LIST_ID,
+    selectableListScopeId: selectableListComponentInstanceId,
   });
   const { resetSelectedItem } = useSelectableList(
-    MULTI_OBJECT_RECORD_SELECT_SELECTABLE_LIST_ID,
+    selectableListComponentInstanceId,
   );
 
   const selectedItemId = useRecoilValue(selectedItemIdState);
@@ -96,7 +97,7 @@ export const MultiSelectInput = ({
 
   return (
     <SelectableList
-      selectableListId={MULTI_OBJECT_RECORD_SELECT_SELECTABLE_LIST_ID}
+      selectableListId={selectableListComponentInstanceId}
       selectableItemIdArray={optionIds}
       hotkeyScope={hotkeyScope}
       onEnter={(itemId) => {