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

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>

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"
     />
   );
 };

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 labelKey = `${fieldNameLabel}`;
-  const labelValue = operandIsEmptiness ? '' : recordFilter.displayValue;
+  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"
     />
   );
 };

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"
     />
   );
 };

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"
     />
   );
 };

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}