Build column design for advanced filters (#12534)

Figma https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=45225-472099&p=f&m=dev A few design items need to be discussed with product (font, add filter button...) to be consistent with existing advanced filter dropdown. I will also add stories. <img width="495" alt="Capture d’écran 2025-06-11 à 11 11 03" src="https://github.com/user-attachments/assets/1fa2fa1e-b4b1-4456-9f9e-81083b0caac6" />
2025-06-11 14:01:00 +02:00
parent beba4b8313
commit ee7d4380d1
23 changed files with 453 additions and 179 deletions
--- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterDropdownColumn.tsx
+++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterDropdownColumn.tsx
@ -0,0 +1,10 @@
+import styled from '@emotion/styled';
+
+const StyledColumn = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: ${({ theme }) => theme.spacing(1)};
+`;
+
+export const AdvancedFilterDropdownColumn = StyledColumn;
--- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterLogicalOperatorCell.tsx
+++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterLogicalOperatorCell.tsx
@ -1,15 +1,18 @@
 import { AdvancedFilterLogicalOperatorDropdown } from '@/object-record/advanced-filter/components/AdvancedFilterLogicalOperatorDropdown';
+import { AdvancedFilterContext } from '@/object-record/advanced-filter/states/context/AdvancedFilterContext';
 import { RecordFilterGroup } from '@/object-record/record-filter-group/types/RecordFilterGroup';

 import styled from '@emotion/styled';
+import { useContext } from 'react';
 import { capitalize } from 'twenty-shared/utils';

-const StyledText = styled.div`
+const StyledText = styled.div<{ noPadding?: boolean }>`
  height: ${({ theme }) => theme.spacing(8)};
  display: flex;
  align-items: center;

-  padding-left: ${({ theme }) => theme.spacing(2.25)};
+  padding-left: ${({ theme, noPadding }) =>
+    noPadding ? 0 : theme.spacing(2.25)};
 `;

 const StyledContainer = styled.div`
@ -27,18 +30,22 @@ type AdvancedFilterLogicalOperatorCellProps = {
 export const AdvancedFilterLogicalOperatorCell = ({
  index,
  recordFilterGroup,
-}: AdvancedFilterLogicalOperatorCellProps) => (
-  <StyledContainer>
-    {index === 0 ? (
-      <StyledText>Where</StyledText>
-    ) : index === 1 ? (
-      <AdvancedFilterLogicalOperatorDropdown
-        recordFilterGroup={recordFilterGroup}
-      />
-    ) : (
-      <StyledText>
-        {capitalize(recordFilterGroup.logicalOperator.toLowerCase())}
-      </StyledText>
-    )}
-  </StyledContainer>
-);
+}: AdvancedFilterLogicalOperatorCellProps) => {
+  const { isColumn } = useContext(AdvancedFilterContext);
+
+  return (
+    <StyledContainer>
+      {index === 0 ? (
+        <StyledText noPadding={isColumn}>Where</StyledText>
+      ) : index === 1 ? (
+        <AdvancedFilterLogicalOperatorDropdown
+          recordFilterGroup={recordFilterGroup}
+        />
+      ) : (
+        <StyledText noPadding={isColumn}>
+          {capitalize(recordFilterGroup.logicalOperator.toLowerCase())}
+        </StyledText>
+      )}
+    </StyledContainer>
+  );
+};
--- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilter.tsx
+++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilter.tsx
@ -0,0 +1,36 @@
+import { AdvancedFilterRecordFilterColumn } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterColumn';
+import { AdvancedFilterRecordFilterRow } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterRow';
+import { AdvancedFilterContext } from '@/object-record/advanced-filter/states/context/AdvancedFilterContext';
+import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent';
+import { RecordFilterGroup } from '@/object-record/record-filter-group/types/RecordFilterGroup';
+import { RecordFilter } from '@/object-record/record-filter/types/RecordFilter';
+import { useContext } from 'react';
+
+export const AdvancedFilterRecordFilter = ({
+  recordFilterGroup,
+  recordFilter,
+  recordFilterIndex,
+  VariablePicker,
+}: {
+  recordFilterGroup: RecordFilterGroup;
+  recordFilter: RecordFilter;
+  recordFilterIndex: number;
+  VariablePicker?: VariablePickerComponent;
+}) => {
+  const { isColumn } = useContext(AdvancedFilterContext);
+
+  return isColumn ? (
+    <AdvancedFilterRecordFilterColumn
+      recordFilterGroup={recordFilterGroup}
+      recordFilter={recordFilter}
+      recordFilterIndex={recordFilterIndex}
+      VariablePicker={VariablePicker}
+    />
+  ) : (
+    <AdvancedFilterRecordFilterRow
+      recordFilterGroup={recordFilterGroup}
+      recordFilter={recordFilter}
+      recordFilterIndex={recordFilterIndex}
+    />
+  );
+};
--- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterColumn.tsx
+++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterColumn.tsx
@ -0,0 +1,63 @@
+import { AdvancedFilterDropdownColumn } from '@/object-record/advanced-filter/components/AdvancedFilterDropdownColumn';
+import { AdvancedFilterFieldSelectDropdownButton } from '@/object-record/advanced-filter/components/AdvancedFilterFieldSelectDropdownButton';
+import { AdvancedFilterLogicalOperatorCell } from '@/object-record/advanced-filter/components/AdvancedFilterLogicalOperatorCell';
+import { AdvancedFilterRecordFilterOperandSelect } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterOperandSelect';
+import { AdvancedFilterRecordFilterOptionsDropdown } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterOptionsDropdown';
+import { AdvancedFilterValueFormInput } from '@/object-record/advanced-filter/components/AdvancedFilterValueFormInput';
+import { getAdvancedFilterObjectFilterDropdownComponentInstanceId } from '@/object-record/advanced-filter/utils/getAdvancedFilterObjectFilterDropdownComponentInstanceId';
+import { ObjectFilterDropdownComponentInstanceContext } from '@/object-record/object-filter-dropdown/states/contexts/ObjectFilterDropdownComponentInstanceContext';
+import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent';
+import { RecordFilterGroup } from '@/object-record/record-filter-group/types/RecordFilterGroup';
+import { RecordFilter } from '@/object-record/record-filter/types/RecordFilter';
+import styled from '@emotion/styled';
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: ${({ theme }) => theme.spacing(1)};
+`;
+
+export const AdvancedFilterRecordFilterColumn = ({
+  recordFilterGroup,
+  recordFilter,
+  recordFilterIndex,
+  VariablePicker,
+}: {
+  recordFilterGroup: RecordFilterGroup;
+  recordFilter: RecordFilter;
+  recordFilterIndex: number;
+  VariablePicker?: VariablePickerComponent;
+}) => {
+  return (
+    <ObjectFilterDropdownComponentInstanceContext.Provider
+      value={{
+        instanceId: getAdvancedFilterObjectFilterDropdownComponentInstanceId(
+          recordFilter.id,
+        ),
+      }}
+    >
+      <AdvancedFilterDropdownColumn>
+        <StyledContainer>
+          <AdvancedFilterLogicalOperatorCell
+            index={recordFilterIndex}
+            recordFilterGroup={recordFilterGroup}
+          />
+          <AdvancedFilterRecordFilterOptionsDropdown
+            recordFilterId={recordFilter.id}
+          />
+        </StyledContainer>
+        <AdvancedFilterFieldSelectDropdownButton
+          recordFilterId={recordFilter.id}
+        />
+        <AdvancedFilterRecordFilterOperandSelect
+          recordFilterId={recordFilter.id}
+        />
+        <AdvancedFilterValueFormInput
+          recordFilterId={recordFilter.id}
+          VariablePicker={VariablePicker}
+        />
+      </AdvancedFilterDropdownColumn>
+    </ObjectFilterDropdownComponentInstanceContext.Provider>
+  );
+};
--- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterGroup.tsx
+++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterGroup.tsx
@ -0,0 +1,36 @@
+import { AdvancedFilterRecordFilterGroupColumn } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterGroupColumn';
+import { AdvancedFilterRecordFilterGroupRow } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterGroupRow';
+import { AdvancedFilterContext } from '@/object-record/advanced-filter/states/context/AdvancedFilterContext';
+import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent';
+import { RecordFilterGroup } from '@/object-record/record-filter-group/types/RecordFilterGroup';
+import { useContext } from 'react';
+
+export const AdvancedFilterRecordFilterGroup = ({
+  parentRecordFilterGroup,
+  recordFilterGroup,
+  recordFilterGroupIndex,
+  VariablePicker,
+}: {
+  parentRecordFilterGroup: RecordFilterGroup;
+  recordFilterGroup: RecordFilterGroup;
+  recordFilterGroupIndex: number;
+  VariablePicker?: VariablePickerComponent;
+}) => {
+  const { isColumn } = useContext(AdvancedFilterContext);
+
+  return isColumn ? (
+    <AdvancedFilterRecordFilterGroupColumn
+      parentRecordFilterGroup={parentRecordFilterGroup}
+      recordFilterGroup={recordFilterGroup}
+      recordFilterGroupIndex={recordFilterGroupIndex}
+      VariablePicker={VariablePicker}
+    />
+  ) : (
+    <AdvancedFilterRecordFilterGroupRow
+      parentRecordFilterGroup={parentRecordFilterGroup}
+      recordFilterGroup={recordFilterGroup}
+      recordFilterGroupIndex={recordFilterGroupIndex}
+      VariablePicker={VariablePicker}
+    />
+  );
+};
--- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterGroupChildren.tsx
+++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterGroupChildren.tsx
@ -1,5 +1,5 @@
 import { AdvancedFilterAddFilterRuleSelect } from '@/object-record/advanced-filter/components/AdvancedFilterAddFilterRuleSelect';
-import { AdvancedFilterRecordFilterRow } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterRow';
+import { AdvancedFilterRecordFilter } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilter';

 import { useChildRecordFiltersAndRecordFilterGroups } from '@/object-record/advanced-filter/hooks/useChildRecordFiltersAndRecordFilterGroups';
 import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent';
@ -45,7 +45,7 @@ export const AdvancedFilterRecordFilterGroupChildren = ({
  return (
    <StyledContainer isGrayBackground={hasParentRecordFilterGroup}>
      {childRecordFilters.map((childRecordFilter, childRecordFilterIndex) => (
-        <AdvancedFilterRecordFilterRow
+        <AdvancedFilterRecordFilter
          key={childRecordFilter.id}
          recordFilter={childRecordFilter}
          recordFilterIndex={childRecordFilterIndex}
--- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterGroupColumn.tsx
+++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterGroupColumn.tsx
@ -0,0 +1,44 @@
+import { AdvancedFilterDropdownColumn } from '@/object-record/advanced-filter/components/AdvancedFilterDropdownColumn';
+import { AdvancedFilterLogicalOperatorCell } from '@/object-record/advanced-filter/components/AdvancedFilterLogicalOperatorCell';
+import { AdvancedFilterRecordFilterGroupChildren } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterGroupChildren';
+import { AdvancedFilterRecordFilterGroupOptionsDropdown } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterGroupOptionsDropdown';
+import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent';
+import { RecordFilterGroup } from '@/object-record/record-filter-group/types/RecordFilterGroup';
+import styled from '@emotion/styled';
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: ${({ theme }) => theme.spacing(1)};
+`;
+
+export const AdvancedFilterRecordFilterGroupColumn = ({
+  parentRecordFilterGroup,
+  recordFilterGroup,
+  recordFilterGroupIndex,
+  VariablePicker,
+}: {
+  parentRecordFilterGroup: RecordFilterGroup;
+  recordFilterGroup: RecordFilterGroup;
+  recordFilterGroupIndex: number;
+  VariablePicker?: VariablePickerComponent;
+}) => {
+  return (
+    <AdvancedFilterDropdownColumn>
+      <StyledContainer>
+        <AdvancedFilterLogicalOperatorCell
+          index={recordFilterGroupIndex}
+          recordFilterGroup={parentRecordFilterGroup}
+        />
+        <AdvancedFilterRecordFilterGroupOptionsDropdown
+          recordFilterGroupId={recordFilterGroup.id}
+        />
+      </StyledContainer>
+      <AdvancedFilterRecordFilterGroupChildren
+        recordFilterGroupId={recordFilterGroup.id}
+        VariablePicker={VariablePicker}
+      />
+    </AdvancedFilterDropdownColumn>
+  );
+};
--- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterOperandSelect.tsx
+++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterOperandSelect.tsx
@ -1,4 +1,5 @@
 import { DEFAULT_ADVANCED_FILTER_DROPDOWN_OFFSET } from '@/object-record/advanced-filter/constants/DefaultAdvancedFilterDropdownOffset';
+import { AdvancedFilterContext } from '@/object-record/advanced-filter/states/context/AdvancedFilterContext';
 import { useApplyObjectFilterDropdownOperand } from '@/object-record/object-filter-dropdown/hooks/useApplyObjectFilterDropdownOperand';

 import { getOperandLabel } from '@/object-record/object-filter-dropdown/utils/getOperandLabel';
@ -16,11 +17,12 @@ import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
 import styled from '@emotion/styled';
+import { useContext } from 'react';
 import { isDefined } from 'twenty-shared/utils';
 import { MenuItem } from 'twenty-ui/navigation';

-const StyledContainer = styled.div`
-  width: 100px;
+const StyledContainer = styled.div<{ isColumn?: boolean }>`
+  width: ${({ isColumn }) => (isColumn ? 'auto' : '100px')};
 `;

 type AdvancedFilterRecordFilterOperandSelectProps = {
@ -36,6 +38,8 @@ export const AdvancedFilterRecordFilterOperandSelect = ({
    currentRecordFiltersComponentState,
  );

+  const { isColumn } = useContext(AdvancedFilterContext);
+
  const filter = currentRecordFilters.find(
    (recordFilter) => recordFilter.id === recordFilterId,
  );
@ -82,7 +86,7 @@ export const AdvancedFilterRecordFilterOperandSelect = ({
  }

  return (
-    <StyledContainer>
+    <StyledContainer isColumn={isColumn}>
      <Dropdown
        dropdownId={dropdownId}
        clickableComponent={
--- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterRow.tsx
+++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterRow.tsx
@ -3,25 +3,20 @@ import { AdvancedFilterFieldSelectDropdownButton } from '@/object-record/advance
 import { AdvancedFilterLogicalOperatorCell } from '@/object-record/advanced-filter/components/AdvancedFilterLogicalOperatorCell';
 import { AdvancedFilterRecordFilterOperandSelect } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterOperandSelect';
 import { AdvancedFilterRecordFilterOptionsDropdown } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterOptionsDropdown';
-import { AdvancedFilterValueFormInput } from '@/object-record/advanced-filter/components/AdvancedFilterValueFormInput';
 import { AdvancedFilterValueInput } from '@/object-record/advanced-filter/components/AdvancedFilterValueInput';
 import { getAdvancedFilterObjectFilterDropdownComponentInstanceId } from '@/object-record/advanced-filter/utils/getAdvancedFilterObjectFilterDropdownComponentInstanceId';
 import { ObjectFilterDropdownComponentInstanceContext } from '@/object-record/object-filter-dropdown/states/contexts/ObjectFilterDropdownComponentInstanceContext';
-import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent';
 import { RecordFilterGroup } from '@/object-record/record-filter-group/types/RecordFilterGroup';
 import { RecordFilter } from '@/object-record/record-filter/types/RecordFilter';
-import { isDefined } from 'twenty-shared/utils';

 export const AdvancedFilterRecordFilterRow = ({
  recordFilterGroup,
  recordFilter,
  recordFilterIndex,
-  VariablePicker,
 }: {
  recordFilterGroup: RecordFilterGroup;
  recordFilter: RecordFilter;
  recordFilterIndex: number;
-  VariablePicker?: VariablePickerComponent;
 }) => {
  return (
    <ObjectFilterDropdownComponentInstanceContext.Provider
@ -36,20 +31,14 @@ export const AdvancedFilterRecordFilterRow = ({
          index={recordFilterIndex}
          recordFilterGroup={recordFilterGroup}
        />
+
        <AdvancedFilterFieldSelectDropdownButton
          recordFilterId={recordFilter.id}
        />
        <AdvancedFilterRecordFilterOperandSelect
          recordFilterId={recordFilter.id}
        />
-        {isDefined(VariablePicker) ? (
-          <AdvancedFilterValueFormInput
-            recordFilterId={recordFilter.id}
-            VariablePicker={VariablePicker}
-          />
-        ) : (
-          <AdvancedFilterValueInput recordFilterId={recordFilter.id} />
-        )}
+        <AdvancedFilterValueInput recordFilterId={recordFilter.id} />
        <AdvancedFilterRecordFilterOptionsDropdown
          recordFilterId={recordFilter.id}
        />
--- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRootRecordFilterGroup.tsx
+++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRootRecordFilterGroup.tsx
@ -1,7 +1,7 @@
 import { AdvancedFilterAddFilterRuleSelect } from '@/object-record/advanced-filter/components/AdvancedFilterAddFilterRuleSelect';
+import { AdvancedFilterRecordFilter } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilter';
+import { AdvancedFilterRecordFilterGroup } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterGroup';

-import { AdvancedFilterRecordFilterGroupRow } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterGroupRow';
-import { AdvancedFilterRecordFilterRow } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterRow';
 import { ADVANCED_FILTER_DROPDOWN_CONTENT_WIDTH } from '@/object-record/advanced-filter/constants/AdvancedFilterDropdownContentWidth';
 import { useChildRecordFiltersAndRecordFilterGroups } from '@/object-record/advanced-filter/hooks/useChildRecordFiltersAndRecordFilterGroups';
 import { rootLevelRecordFilterGroupComponentSelector } from '@/object-record/advanced-filter/states/rootLevelRecordFilterGroupComponentSelector';
@ -45,14 +45,14 @@ export const AdvancedFilterRootRecordFilterGroup = () => {
              isRecordFilterGroupChildARecordFilterGroup(
                recordFilterGroupChild,
              ) ? (
-                <AdvancedFilterRecordFilterGroupRow
+                <AdvancedFilterRecordFilterGroup
                  key={recordFilterGroupChild.id}
                  parentRecordFilterGroup={rootRecordFilterGroup}
                  recordFilterGroup={recordFilterGroupChild}
                  recordFilterGroupIndex={recordFilterGroupChildIndex}
                />
              ) : (
-                <AdvancedFilterRecordFilterRow
+                <AdvancedFilterRecordFilter
                  key={recordFilterGroupChild.id}
                  recordFilterGroup={rootRecordFilterGroup}
                  recordFilter={recordFilterGroupChild}
--- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterValueFormCompositeFieldInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterValueFormCompositeFieldInput.tsx
@ -10,12 +10,12 @@ import { JsonValue } from 'type-fest';

 export const AdvancedFilterValueFormCompositeFieldInput = ({
  recordFilter,
-  VariablePicker,
  onChange,
+  VariablePicker,
 }: {
  recordFilter: RecordFilter;
-  VariablePicker: VariablePickerComponent;
  onChange: (newValue: JsonValue) => void;
+  VariablePicker?: VariablePickerComponent;
 }) => {
  const subFieldNameUsedInDropdown = useRecoilComponentValueV2(
    subFieldNameUsedInDropdownComponentState,
@ -25,8 +25,8 @@ export const AdvancedFilterValueFormCompositeFieldInput = ({

  return (
    <>
-      {filterType === 'ADDRESS' &&
-        (subFieldNameUsedInDropdown === 'addressCountry' ? (
+      {filterType === 'ADDRESS' ? (
+        subFieldNameUsedInDropdown === 'addressCountry' ? (
          <FormCountrySelectInput
            selectedCountryName={recordFilter.value}
            onChange={onChange}
@ -38,9 +38,9 @@ export const AdvancedFilterValueFormCompositeFieldInput = ({
            onChange={onChange}
            VariablePicker={VariablePicker}
          />
-        ))}
-      {filterType === 'CURRENCY' &&
-        (recordFilter.subFieldName === 'currencyCode' ? (
+        )
+      ) : filterType === 'CURRENCY' ? (
+        recordFilter.subFieldName === 'currencyCode' ? (
          <FormCountryCodeSelectInput
            selectedCountryCode={recordFilter.value}
            onChange={onChange}
@ -52,7 +52,28 @@ export const AdvancedFilterValueFormCompositeFieldInput = ({
            onChange={onChange}
            VariablePicker={VariablePicker}
          />
-        ) : null)}
+        ) : null
+      ) : filterType === 'PHONES' ? (
+        recordFilter.subFieldName === 'primaryPhoneNumber' ? (
+          <FormNumberFieldInput
+            defaultValue={recordFilter.value}
+            onChange={onChange}
+            VariablePicker={VariablePicker}
+          />
+        ) : (
+          <FormTextFieldInput
+            defaultValue={recordFilter.value}
+            onChange={onChange}
+            VariablePicker={VariablePicker}
+          />
+        )
+      ) : (
+        <FormTextFieldInput
+          defaultValue={recordFilter.value}
+          onChange={onChange}
+          VariablePicker={VariablePicker}
+        />
+      )}
    </>
  );
 };
--- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterValueFormInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterValueFormInput.tsx
@ -1,10 +1,13 @@
+import { formatFieldMetadataItemAsFieldDefinition } from '@/object-metadata/utils/formatFieldMetadataItemAsFieldDefinition';
 import { AdvancedFilterValueFormCompositeFieldInput } from '@/object-record/advanced-filter/components/AdvancedFilterValueFormCompositeFieldInput';
 import { useApplyObjectFilterDropdownFilterValue } from '@/object-record/object-filter-dropdown/hooks/useApplyObjectFilterDropdownFilterValue';
+import { fieldMetadataItemUsedInDropdownComponentSelector } from '@/object-record/object-filter-dropdown/states/fieldMetadataItemUsedInDropdownComponentSelector';
 import { subFieldNameUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/subFieldNameUsedInDropdownComponentState';
 import { FormFieldInput } from '@/object-record/record-field/components/FormFieldInput';
 import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent';
 import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
 import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState';
+import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { FieldMetadataType } from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
@ -15,12 +18,14 @@ export const AdvancedFilterValueFormInput = ({
  VariablePicker,
 }: {
  recordFilterId: string;
-  VariablePicker: VariablePickerComponent;
+  VariablePicker?: VariablePickerComponent;
 }) => {
  const currentRecordFilters = useRecoilComponentValueV2(
    currentRecordFiltersComponentState,
  );

+  const { objectMetadataItem } = useRecordIndexContextOrThrow();
+
  const subFieldNameUsedInDropdown = useRecoilComponentValueV2(
    subFieldNameUsedInDropdownComponentState,
  );
@ -35,9 +40,20 @@ export const AdvancedFilterValueFormInput = ({
    useApplyObjectFilterDropdownFilterValue();

  const handleChange = (newValue: JsonValue) => {
-    applyObjectFilterDropdownFilterValue(newValue as string);
+    applyObjectFilterDropdownFilterValue(String(newValue));
  };

+  const fieldMetadataItemUsedInDropdown = useRecoilComponentValueV2(
+    fieldMetadataItemUsedInDropdownComponentSelector,
+  );
+
+  const fieldDefinition = fieldMetadataItemUsedInDropdown
+    ? formatFieldMetadataItemAsFieldDefinition({
+        field: fieldMetadataItemUsedInDropdown,
+        objectMetadataItem: objectMetadataItem,
+      })
+    : null;
+
  if (isDisabled) {
    return null;
  }
@ -57,7 +73,7 @@ export const AdvancedFilterValueFormInput = ({
      field={{
        type: recordFilter.type as FieldMetadataType,
        label: '',
-        metadata: {} as FieldMetadata,
+        metadata: fieldDefinition?.metadata as FieldMetadata,
      }}
      defaultValue={recordFilter.value}
      onChange={handleChange}
--- a/packages/twenty-front/src/modules/object-record/advanced-filter/hooks/useDefaultFieldMetadataItemForFilter.ts
+++ b/packages/twenty-front/src/modules/object-record/advanced-filter/hooks/useDefaultFieldMetadataItemForFilter.ts
@ -1,3 +1,4 @@
+import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
 import { useObjectMetadataItemById } from '@/object-metadata/hooks/useObjectMetadataItemById';
 import { availableFieldMetadataItemsForFilterFamilySelector } from '@/object-metadata/states/availableFieldMetadataItemsForFilterFamilySelector';
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
@ -7,11 +8,13 @@ import { isDefined } from 'twenty-shared/utils';

 export const useDefaultFieldMetadataItemForFilter = () => {
  const { currentView } = useGetCurrentViewOnly();
+  const { activeObjectMetadataItems } = useFilteredObjectMetadataItems();

-  const objectMetadataId = currentView?.objectMetadataId;
+  const objectMetadataId =
+    currentView?.objectMetadataId ?? activeObjectMetadataItems[0]?.id;

  if (!isDefined(objectMetadataId)) {
-    throw new Error('Object metadata id is missing from current view');
+    throw new Error('Could not find default object metadata item for filter');
  }

  const { objectMetadataItem } = useObjectMetadataItemById({
--- a/packages/twenty-front/src/modules/object-record/advanced-filter/states/context/AdvancedFilterContext.ts
+++ b/packages/twenty-front/src/modules/object-record/advanced-filter/states/context/AdvancedFilterContext.ts
@ -2,6 +2,7 @@ import { createContext } from 'react';

 type AdvancedFilterContextType = {
  onUpdate?: () => void;
+  isColumn?: boolean;
 };

 export const AdvancedFilterContext = createContext<AdvancedFilterContextType>(
--- a/packages/twenty-front/src/modules/object-record/record-field/components/FormFieldInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/components/FormFieldInput.tsx
@ -10,11 +10,11 @@ import { FormMultiSelectFieldInput } from '@/object-record/record-field/form-typ
 import { FormNumberFieldInput } from '@/object-record/record-field/form-types/components/FormNumberFieldInput';
 import { FormPhoneFieldInput } from '@/object-record/record-field/form-types/components/FormPhoneFieldInput';
 import { FormRawJsonFieldInput } from '@/object-record/record-field/form-types/components/FormRawJsonFieldInput';
+import { FormRelationToOneFieldInput } from '@/object-record/record-field/form-types/components/FormRelationToOneFieldInput';
 import { FormRichTextV2FieldInput } from '@/object-record/record-field/form-types/components/FormRichTextV2FieldInput';
 import { FormSelectFieldInput } from '@/object-record/record-field/form-types/components/FormSelectFieldInput';
 import { FormTextFieldInput } from '@/object-record/record-field/form-types/components/FormTextFieldInput';
 import { FormUuidFieldInput } from '@/object-record/record-field/form-types/components/FormUuidFieldInput';
-import { FormRelationToOneFieldInput } from '@/object-record/record-field/form-types/components/FormRelationToOneFieldInput';
 import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent';
 import { FieldDefinition } from '@/object-record/record-field/types/FieldDefinition';
 import {
@ -42,11 +42,11 @@ import { isFieldMultiSelect } from '@/object-record/record-field/types/guards/is
 import { isFieldNumber } from '@/object-record/record-field/types/guards/isFieldNumber';
 import { isFieldPhones } from '@/object-record/record-field/types/guards/isFieldPhones';
 import { isFieldRawJson } from '@/object-record/record-field/types/guards/isFieldRawJson';
+import { isFieldRelationToOneObject } from '@/object-record/record-field/types/guards/isFieldRelationToOneObject';
 import { isFieldRichTextV2 } from '@/object-record/record-field/types/guards/isFieldRichTextV2';
 import { isFieldSelect } from '@/object-record/record-field/types/guards/isFieldSelect';
 import { isFieldText } from '@/object-record/record-field/types/guards/isFieldText';
 import { isFieldUuid } from '@/object-record/record-field/types/guards/isFieldUuid';
-import { isFieldRelationToOneObject } from '@/object-record/record-field/types/guards/isFieldRelationToOneObject';
 import { JsonValue } from 'type-fest';

 type FormFieldInputProps = {