fix: settings form select menu (#9179)

Closes: #8647 
Closes: #8649 

**Changes & Why**

1. Added a Search Input to `SettingsDataModelFieldAddressForm` &
`SettingsDataModelFieldCurrencyForm` as `Select` component already
accepts it as a prop.
2. Gave a fixed width to the dropdown of both the above components to
ensure it doesn't shrink on search for the menu items with low word
count.
3. Added countries Flag to `SettingsDataModelFieldAddressForm`. 
4. Replaced `MenuItem` with `MenuItemSelect` to get the desired
highlighted background for the selected item with `IconCheck` to
differentiate the current selected item. This is useful across all the
select components throughout the app.
5. I realized that in some components we might not need IconCheck and
only need a highlighted background for the selected item. For ex:
`SettingsDataModelFieldBooleanForm` . Therefore, I created a prop
`needIconCheck` with default as true so it doesn't break the existing
`MenuItemSelect` and we can pass that prop as false wherever needed.

[Screencast from 2024-12-21
12-08-08.webm](https://github.com/user-attachments/assets/4f8070a8-f339-4556-a137-bbbad58b171c)

packages/twenty-front/src/modules/settings/data-model/fields/forms/address/components/SettingsDataModelFieldAddressForm.tsx

@@ -4,8 +4,8 @@ import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { addressSchema as addressFieldDefaultValueSchema } from '@/object-record/record-field/types/guards/isFieldAddressValue';
 import { SettingsOptionCardContentSelect } from '@/settings/components/SettingsOptions/SettingsOptionCardContentSelect';
 import { useCountries } from '@/ui/input/components/internal/hooks/useCountries';
-import { Select } from '@/ui/input/components/Select';
-import { IconMap } from 'twenty-ui';
+import { Select, SelectOption } from '@/ui/input/components/Select';
+import { IconCircleOff, IconComponentProps, IconMap } from 'twenty-ui';
 import { z } from 'zod';
 import { applySimpleQuotesToString } from '~/utils/string/applySimpleQuotesToString';
 import { stripSimpleQuotesFromString } from '~/utils/string/stripSimpleQuotesFromString';
@@ -33,13 +33,16 @@ export const SettingsDataModelFieldAddressForm = ({
   const { control } = useFormContext<SettingsDataModelFieldTextFormValues>();
   const countries = useCountries()
     .sort((a, b) => a.countryName.localeCompare(b.countryName))
-    .map((country) => ({
-      label: country.countryName,
-      value: country.countryName,
+    .map<SelectOption<string>>(({ countryName, Flag }) => ({
+      label: countryName,
+      value: countryName,
+      Icon: (props: IconComponentProps) =>
+        Flag({ width: props.size, height: props.size }),
     }));
   countries.unshift({
     label: 'No country',
     value: '',
+    Icon: IconCircleOff,
   });
   const defaultDefaultValue = {
     addressStreet1: "''",
@@ -69,7 +72,7 @@ export const SettingsDataModelFieldAddressForm = ({
             description="The default country for new addresses"
           >
             <Select<string>
-              dropdownWidth={'auto'}
+              dropdownWidth={220}
               disabled={disabled}
               dropdownId="selectDefaultCountry"
               value={stripSimpleQuotesFromString(defaultCountry)}
@@ -81,6 +84,7 @@ export const SettingsDataModelFieldAddressForm = ({
               }
               options={countries}
               selectSizeVariant="small"
+              withSearchInput={true}
             />
           </SettingsOptionCardContentSelect>
         );

packages/twenty-front/src/modules/settings/data-model/fields/forms/boolean/components/SettingsDataModelFieldBooleanForm.tsx

@@ -44,6 +44,7 @@ export const SettingsDataModelFieldBooleanForm = ({
             onChange={onChange}
             dropdownId="object-field-default-value-select-boolean"
             dropdownWidth={120}
+            needIconCheck={false}
             options={[
               {
                 value: true,

packages/twenty-front/src/modules/settings/data-model/fields/forms/currency/components/SettingsDataModelFieldCurrencyForm.tsx

@@ -60,13 +60,14 @@ export const SettingsDataModelFieldCurrencyForm = ({
             description="Choose the default currency that will apply"
           >
             <Select<string>
-              dropdownWidth={'auto'}
+              dropdownWidth={220}
               value={value}
               onChange={onChange}
               disabled={disabled}
               dropdownId="object-field-default-value-select-currency"
               options={OPTIONS}
               selectSizeVariant="small"
+              withSearchInput={true}
             />
           </SettingsOptionCardContentSelect>
         )}

packages/twenty-front/src/modules/settings/data-model/fields/forms/number/components/SettingsDataModelFieldNumberForm.tsx

@@ -59,6 +59,7 @@ export const SettingsDataModelFieldNumberForm = ({
                 value={type}
                 onChange={(value) => onChange({ type: value, decimals: count })}
                 disabled={disabled}
+                needIconCheck={false}
                 options={[
                   {
                     Icon: IconNumber9,