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/views/components/EditableFilterChip.tsx

@@ -18,10 +18,8 @@ export const EditableFilterChip = ({
     <SortOrFilterChip
       key={viewFilter.id}
       testId={viewFilter.id}
-      labelKey={viewFilter.definition.label}
-      labelValue={`${getOperandLabelShort(viewFilter.operand)} ${
-        viewFilter.displayValue
-      }`}
+      labelKey={`${viewFilter.definition.label}${getOperandLabelShort(viewFilter.operand)}`}
+      labelValue={viewFilter.displayValue}
       Icon={getIcon(viewFilter.definition.iconName)}
       onRemove={onRemove}
     />

packages/twenty-front/src/modules/views/components/SortOrFilterChip.tsx

@@ -33,35 +33,44 @@ const StyledChip = styled.div<{ variant: SortOrFitlerChipVariant }>`
         return theme.color.blue;
     }
   }};
+  height: 26px;
+  box-sizing: border-box;
   cursor: pointer;
   display: flex;
   flex-direction: row;
   flex-shrink: 0;
   font-size: ${({ theme }) => theme.font.size.sm};
   font-weight: ${({ theme }) => theme.font.weight.medium};
-  padding: ${({ theme }) => theme.spacing(0.5) + ' ' + theme.spacing(2)};
-  margin-left: ${({ theme }) => theme.spacing(2)};
+  padding: ${({ theme }) => theme.spacing(0.5)};
+  padding-left: ${({ theme }) => theme.spacing(1)};
+  column-gap: ${({ theme }) => theme.spacing(1)};
   user-select: none;
   white-space: nowrap;
 
-  max-height: ${({ theme }) => theme.spacing(4.5)};
+  margin-left: ${({ theme }) => theme.spacing(2)};
 `;
 
 const StyledIcon = styled.div`
   align-items: center;
   display: flex;
-  margin-right: ${({ theme }) => theme.spacing(1)};
 `;
 
-const StyledDelete = styled.div<{ variant: SortOrFitlerChipVariant }>`
+const StyledDelete = styled.button<{ variant: SortOrFitlerChipVariant }>`
+  box-sizing: border-box;
+  height: 20px;
+  width: 20px;
+  display: flex;
+  justify-content: center;
   align-items: center;
   cursor: pointer;
-  padding: ${({ theme }) => theme.spacing(0.5)};
-  display: flex;
   font-size: ${({ theme }) => theme.font.size.sm};
-  margin-left: ${({ theme }) => theme.spacing(2)};
-  margin-top: 1px;
   user-select: none;
+  padding: 0;
+  margin: 0;
+  background: none;
+  border: none;
+  color: inherit;
+
   &:hover {
     background-color: ${({ theme, variant }) => {
       switch (variant) {