New view picker (#4610)

* Implement new view picker

* Complete feature

* Fixes according to review

packages/twenty-front/src/modules/ui/input/button/components/Button.tsx

@@ -20,6 +20,7 @@ export type ButtonProps = {
   position?: ButtonPosition;
   accent?: ButtonAccent;
   soon?: boolean;
+  justify?: 'center' | 'flex-start' | 'flex-end';
   disabled?: boolean;
   focus?: boolean;
   onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
@@ -28,7 +29,13 @@ export type ButtonProps = {
 const StyledButton = styled.button<
   Pick<
     ButtonProps,
-    'fullWidth' | 'variant' | 'size' | 'position' | 'accent' | 'focus'
+    | 'fullWidth'
+    | 'variant'
+    | 'size'
+    | 'position'
+    | 'accent'
+    | 'focus'
+    | 'justify'
   >
 >`
   align-items: center;
@@ -177,9 +184,7 @@ const StyledButton = styled.button<
             `;
           case 'danger':
             return css`
-              background: ${!disabled
-                ? theme.background.transparent.primary
-                : 'transparent'};
+              background: transparent;
               border-color: ${variant === 'secondary'
                 ? focus
                   ? theme.color.red
@@ -236,6 +241,7 @@ const StyledButton = styled.button<
   font-weight: 500;
   gap: ${({ theme }) => theme.spacing(1)};
   height: ${({ size }) => (size === 'small' ? '24px' : '32px')};
+  justify-content: ${({ justify }) => justify};
   padding: ${({ theme }) => {
     return `0 ${theme.spacing(2)}`;
   }};
@@ -266,6 +272,7 @@ export const Button = ({
   position = 'standalone',
   soon = false,
   disabled = false,
+  justify = 'flex-start',
   focus = false,
   onClick,
 }: ButtonProps) => {
@@ -279,6 +286,7 @@ export const Button = ({
       position={position}
       disabled={soon || disabled}
       focus={focus}
+      justify={justify}
       accent={accent}
       className={className}
       onClick={onClick}

packages/twenty-front/src/modules/ui/input/button/components/LightIconButtonGroup.tsx

@@ -31,6 +31,7 @@ export const LightIconButtonGroup = ({
         <LightIconButton
           key={`light-icon-button-${index}`}
           Icon={Icon}
+          disabled={!onClick}
           onClick={onClick}
           size={size}
         />

packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx

@@ -30,6 +30,7 @@ type IconPickerProps = {
   onOpen?: () => void;
   variant?: IconButtonVariant;
   className?: string;
+  disableBlur?: boolean;
 };
 
 const StyledMenuIconItemsContainer = styled.div`
@@ -86,6 +87,7 @@ export const IconPicker = ({
   onClose,
   onOpen,
   variant = 'secondary',
+  disableBlur = false,
   className,
 }: IconPickerProps) => {
   const [searchString, setSearchString] = useState('');
@@ -148,6 +150,7 @@ export const IconPicker = ({
           />
         }
         dropdownMenuWidth={176}
+        disableBlur={disableBlur}
         dropdownComponents={
           <SelectableList
             selectableListId="icon-list"

packages/twenty-front/src/modules/ui/input/components/Select.tsx

@@ -22,6 +22,7 @@ export type SelectOption<Value extends string | number | null> = {
 export type SelectProps<Value extends string | number | null> = {
   className?: string;
   disabled?: boolean;
+  disableBlur?: boolean;
   dropdownId: string;
   dropdownWidth?: `${string}px` | 'auto' | number;
   emptyOption?: SelectOption<Value>;
@@ -75,6 +76,7 @@ const StyledIconChevronDown = styled(IconChevronDown)<{ disabled?: boolean }>`
 export const Select = <Value extends string | number | null>({
   className,
   disabled: disabledFromProps,
+  disableBlur = false,
   dropdownId,
   dropdownWidth = 176,
   emptyOption,
@@ -141,6 +143,7 @@ export const Select = <Value extends string | number | null>({
           dropdownMenuWidth={dropdownWidth}
           dropdownPlacement="bottom-start"
           clickableComponent={selectControl}
+          disableBlur={disableBlur}
           dropdownComponents={
             <>
               {!!withSearchInput && (