Add Select form field (#8815)

Closes https://github.com/twentyhq/twenty/pull/8815

I took inspiration from existing parts of the codebase. Please, see the
comments I left below.

Remaining questions:

- I'm not sure about the best way to handle hotkey scopes in the
components easily



https://github.com/user-attachments/assets/7a6dd144-d528-4f68-97cd-c9181f3954f9

packages/twenty-front/src/modules/ui/field/display/components/SelectDisplay.tsx

@@ -0,0 +1,10 @@
+import { Tag, ThemeColor } from 'twenty-ui';
+
+type SelectDisplayProps = {
+  color: ThemeColor;
+  label: string;
+};
+
+export const SelectDisplay = ({ color, label }: SelectDisplayProps) => {
+  return <Tag preventShrink color={color} text={label} />;
+};

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

@@ -0,0 +1,55 @@
+import { SelectOption } from '@/spreadsheet-import/types';
+import { SelectInput as SelectBaseInput } from '@/ui/input/components/SelectInput';
+import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
+import { ReferenceType } from '@floating-ui/react';
+
+type SelectInputProps = {
+  selectableListId: string;
+  selectableItemIdArray: string[];
+  hotkeyScope: string;
+  onEnter: (itemId: string) => void;
+  selectWrapperRef?: ReferenceType | null | undefined;
+  onOptionSelected: (selectedOption: SelectOption) => void;
+  options: SelectOption[];
+  onCancel?: () => void;
+  defaultOption?: SelectOption | undefined;
+  onFilterChange?: ((filteredOptions: SelectOption[]) => void) | undefined;
+  onClear?: (() => void) | undefined;
+  clearLabel?: string;
+};
+
+export const SelectInput = ({
+  selectableListId,
+  selectableItemIdArray,
+  hotkeyScope,
+  onEnter,
+  selectWrapperRef,
+  onOptionSelected,
+  options,
+  onCancel,
+  defaultOption,
+  onFilterChange,
+  onClear,
+  clearLabel,
+}: SelectInputProps) => {
+  return (
+    <SelectableList
+      selectableListId={selectableListId}
+      selectableItemIdArray={selectableItemIdArray}
+      hotkeyScope={hotkeyScope}
+      onEnter={onEnter}
+    >
+      <SelectBaseInput
+        parentRef={selectWrapperRef}
+        onOptionSelected={onOptionSelected}
+        options={options}
+        onCancel={onCancel}
+        defaultOption={defaultOption}
+        onFilterChange={onFilterChange}
+        onClear={onClear}
+        clearLabel={clearLabel}
+        hotkeyScope={hotkeyScope}
+      />
+    </SelectableList>
+  );
+};