From 7c898cd00836431a4b3ca52e9797488e9c9ff968 Mon Sep 17 00:00:00 2001
From: Lucas Bordeau <bordeau.lucas@gmail.com>
Date: Thu, 5 Jun 2025 20:53:47 +0200
Subject: [PATCH] Fix filter and sort chips in view bar (#12455)

This PR fixes the filter and sort chips in the view bar.

Fixes https://github.com/twentyhq/core-team-issues/issues/1002
Fixes https://github.com/twentyhq/core-team-issues/issues/1003
---
 .../ConfigVariableFilterContainer.tsx         |  1 +
 .../views/components/AdvancedFilterChip.tsx   |  1 +
 .../views/components/EditableFilterChip.tsx   |  5 +++--
 .../views/components/EditableSortChip.tsx     |  1 +
 .../views/components/SoftDeleteFilterChip.tsx |  1 +
 .../views/components/SortOrFilterChip.tsx     | 20 +++++++++++++++++--
 6 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/ConfigVariableFilterContainer.tsx b/packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/ConfigVariableFilterContainer.tsx
index 93d70a261..31db0c718 100644
--- a/packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/ConfigVariableFilterContainer.tsx
+++ b/packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/ConfigVariableFilterContainer.tsx
@@ -35,6 +35,7 @@ export const ConfigVariableFilterContainer = ({
               onRemove={chip.onRemove}
               labelValue={chip.source ?? ''}
               variant={chip.variant}
+              type="filter"
             />
           ))}
         </StyledChipContainer>
diff --git a/packages/twenty-front/src/modules/views/components/AdvancedFilterChip.tsx b/packages/twenty-front/src/modules/views/components/AdvancedFilterChip.tsx
index 8dd1557a7..83aaded8d 100644
--- a/packages/twenty-front/src/modules/views/components/AdvancedFilterChip.tsx
+++ b/packages/twenty-front/src/modules/views/components/AdvancedFilterChip.tsx
@@ -113,6 +113,7 @@ export const AdvancedFilterChip = () => {
       Icon={IconFilter}
       onRemove={handleRemoveClick}
       variant={hasAnyDeletedAtFilterInAdvancedFilters ? 'danger' : 'default'}
+      type="filter"
     />
   );
 };
diff --git a/packages/twenty-front/src/modules/views/components/EditableFilterChip.tsx b/packages/twenty-front/src/modules/views/components/EditableFilterChip.tsx
index f7a12a38c..68670cded 100644
--- a/packages/twenty-front/src/modules/views/components/EditableFilterChip.tsx
+++ b/packages/twenty-front/src/modules/views/components/EditableFilterChip.tsx
@@ -50,8 +50,8 @@ export const EditableFilterChip = ({
 
   const recordFilterIsEmpty = isRecordFilterConsideredEmpty(recordFilter);
 
-  const labelKey = `${fieldNameLabel}${!operandIsEmptiness && !recordFilterIsEmpty ? operandLabelShort : operandIsEmptiness ? ` ${operandLabelShort}` : ''}`;
-  const labelValue = operandIsEmptiness ? '' : recordFilter.displayValue;
+  const labelKey = `${fieldNameLabel}`;
+  const labelValue = `${!operandIsEmptiness && !recordFilterIsEmpty ? operandLabelShort : operandIsEmptiness ? ` ${operandLabelShort}` : ''} ${operandIsEmptiness ? '' : recordFilter.displayValue}`;
 
   return (
     <SortOrFilterChip
@@ -62,6 +62,7 @@ export const EditableFilterChip = ({
       Icon={FieldMetadataItemIcon}
       onRemove={onRemove}
       onClick={onClick}
+      type="filter"
     />
   );
 };
diff --git a/packages/twenty-front/src/modules/views/components/EditableSortChip.tsx b/packages/twenty-front/src/modules/views/components/EditableSortChip.tsx
index d8e6e6212..ea4f02571 100644
--- a/packages/twenty-front/src/modules/views/components/EditableSortChip.tsx
+++ b/packages/twenty-front/src/modules/views/components/EditableSortChip.tsx
@@ -39,6 +39,7 @@ export const EditableSortChip = ({ recordSort }: EditableSortChipProps) => {
       Icon={recordSort.direction === 'desc' ? IconArrowDown : IconArrowUp}
       onRemove={handleRemoveClick}
       onClick={handleClick}
+      type="sort"
     />
   );
 };
diff --git a/packages/twenty-front/src/modules/views/components/SoftDeleteFilterChip.tsx b/packages/twenty-front/src/modules/views/components/SoftDeleteFilterChip.tsx
index e82400beb..52bf1d729 100644
--- a/packages/twenty-front/src/modules/views/components/SoftDeleteFilterChip.tsx
+++ b/packages/twenty-front/src/modules/views/components/SoftDeleteFilterChip.tsx
@@ -38,6 +38,7 @@ export const SoftDeleteFilterChip = ({
       labelValue={recordFilter.label ?? ''}
       Icon={ChipIcon}
       onRemove={handleRemoveClick}
+      type="filter"
     />
   );
 };
diff --git a/packages/twenty-front/src/modules/views/components/SortOrFilterChip.tsx b/packages/twenty-front/src/modules/views/components/SortOrFilterChip.tsx
index 10ee989d8..6e38cdac5 100644
--- a/packages/twenty-front/src/modules/views/components/SortOrFilterChip.tsx
+++ b/packages/twenty-front/src/modules/views/components/SortOrFilterChip.tsx
@@ -33,7 +33,7 @@ const StyledChip = styled.div<{ variant: SortOrFilterChipVariant }>`
         return theme.color.blue;
     }
   }};
-  height: 26px;
+  height: 24px;
   box-sizing: border-box;
   cursor: pointer;
   display: flex;
@@ -87,8 +87,18 @@ const StyledLabelKey = styled.div`
   font-weight: ${({ theme }) => theme.font.weight.medium};
 `;
 
+const StyledFilterValue = styled.span`
+  font-weight: ${({ theme }) => theme.font.weight.regular};
+`;
+
+const StyledSortValue = styled.span`
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+`;
+
 export type SortOrFilterChipVariant = 'default' | 'danger';
 
+export type SortOrFilterChipType = 'sort' | 'filter';
+
 type SortOrFilterChipProps = {
   labelKey?: string;
   labelValue: string;
@@ -97,6 +107,7 @@ type SortOrFilterChipProps = {
   onRemove: () => void;
   onClick?: () => void;
   testId?: string;
+  type: SortOrFilterChipType;
 };
 
 export const SortOrFilterChip = ({
@@ -107,6 +118,7 @@ export const SortOrFilterChip = ({
   onRemove,
   testId,
   onClick,
+  type,
 }: SortOrFilterChipProps) => {
   const theme = useTheme();
 
@@ -123,7 +135,11 @@ export const SortOrFilterChip = ({
         </StyledIcon>
       )}
       {labelKey && <StyledLabelKey>{labelKey}</StyledLabelKey>}
-      {labelValue}
+      {type === 'sort' ? (
+        <StyledSortValue>{labelValue}</StyledSortValue>
+      ) : (
+        <StyledFilterValue>{labelValue}</StyledFilterValue>
+      )}
       <StyledDelete
         variant={variant}
         onClick={handleDeleteClick}