refacto(twenty-front): improve DropdownMenuHeader api (#10961)

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectCompositeFieldSubMenu.tsx

@@ -28,6 +28,7 @@ import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-sta
 import { useState } from 'react';
 import { isDefined } from 'twenty-shared';
 import { IconApps, IconChevronLeft, MenuItem, useIcons } from 'twenty-ui';
+import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
 
 export const ObjectFilterDropdownFilterSelectCompositeFieldSubMenu = () => {
   const [searchText] = useState('');
@@ -187,8 +188,12 @@ export const ObjectFilterDropdownFilterSelectCompositeFieldSubMenu = () => {
   return (
     <>
       <DropdownMenuHeader
-        StartIcon={IconChevronLeft}
+        StartComponent={
-        onStartIconClick={handleSubMenuBack}
+          <DropdownMenuHeaderLeftComponent
+            onClick={handleSubMenuBack}
+            Icon={IconChevronLeft}
+          />
+        }
       >
         {getFilterableFieldTypeLabel(objectFilterDropdownSubMenuFieldType)}
       </DropdownMenuHeader>

packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownFieldsContent.tsx

@@ -9,6 +9,7 @@ import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownM
 import { ViewFieldsVisibilityDropdownSection } from '@/views/components/ViewFieldsVisibilityDropdownSection';
 import { ViewType } from '@/views/types/ViewType';
 import { useLingui } from '@lingui/react/macro';
+import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
 
 export const ObjectOptionsDropdownFieldsContent = () => {
   const { t } = useLingui();
@@ -52,8 +53,12 @@ export const ObjectOptionsDropdownFieldsContent = () => {
   return (
     <>
       <DropdownMenuHeader
-        StartIcon={IconChevronLeft}
+        StartComponent={
-        onStartIconClick={resetContent}
+          <DropdownMenuHeaderLeftComponent
+            onClick={resetContent}
+            Icon={IconChevronLeft}
+          />
+        }
       >
         {t`Fields`}
       </DropdownMenuHeader>

packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownHiddenFieldsContent.tsx

@@ -21,6 +21,7 @@ import { ViewFieldsVisibilityDropdownSection } from '@/views/components/ViewFiel
 import { ViewType } from '@/views/types/ViewType';
 import { useLingui } from '@lingui/react/macro';
 import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
+import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
 
 export const ObjectOptionsDropdownHiddenFieldsContent = () => {
   const { t } = useLingui();
@@ -66,8 +67,12 @@ export const ObjectOptionsDropdownHiddenFieldsContent = () => {
   return (
     <>
       <DropdownMenuHeader
-        StartIcon={IconChevronLeft}
+        StartComponent={
-        onStartIconClick={() => onContentChange('fields')}
+          <DropdownMenuHeaderLeftComponent
+            onClick={() => onContentChange('fields')}
+            Icon={IconChevronLeft}
+          />
+        }
       >
         {t`Hidden Fields`}
       </DropdownMenuHeader>

packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownHiddenRecordGroupsContent.tsx

@@ -23,6 +23,7 @@ import { useLingui } from '@lingui/react/macro';
 import { useLocation } from 'react-router-dom';
 import { useSetRecoilState } from 'recoil';
 import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
+import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
 
 export const ObjectOptionsDropdownHiddenRecordGroupsContent = () => {
   const { t } = useLingui();
@@ -74,8 +75,12 @@ export const ObjectOptionsDropdownHiddenRecordGroupsContent = () => {
     <>
       <DropdownMenuItemsContainer>
         <DropdownMenuHeader
-          StartIcon={IconChevronLeft}
+          StartComponent={
-          onStartIconClick={() => onContentChange('recordGroups')}
+            <DropdownMenuHeaderLeftComponent
+              onClick={() => onContentChange('recordGroups')}
+              Icon={IconChevronLeft}
+            />
+          }
         >
           Hidden {recordGroupFieldMetadata?.label}
         </DropdownMenuHeader>

packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownLayoutContent.tsx

@@ -17,6 +17,7 @@ import { ViewOpenRecordInType } from '@/views/types/ViewOpenRecordInType';
 import { ViewType } from '@/views/types/ViewType';
 import { useLingui } from '@lingui/react/macro';
 import { useRecoilValue } from 'recoil';
+import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
 
 export const ObjectOptionsDropdownLayoutContent = () => {
   const { t } = useLingui();
@@ -42,8 +43,12 @@ export const ObjectOptionsDropdownLayoutContent = () => {
   return (
     <>
       <DropdownMenuHeader
-        StartIcon={IconChevronLeft}
+        StartComponent={
-        onStartIconClick={resetContent}
+          <DropdownMenuHeaderLeftComponent
+            onClick={resetContent}
+            Icon={IconChevronLeft}
+          />
+        }
       >
         {t`Layout`}
       </DropdownMenuHeader>

packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownLayoutOpenInContent.tsx

@@ -14,6 +14,7 @@ import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly';
 import { ViewOpenRecordInType } from '@/views/types/ViewOpenRecordInType';
 import { t } from '@lingui/core/macro';
 import { useRecoilValue } from 'recoil';
+import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
 
 export const ObjectOptionsDropdownLayoutOpenInContent = () => {
   const { onContentChange } = useOptionsDropdown();
@@ -24,8 +25,12 @@ export const ObjectOptionsDropdownLayoutOpenInContent = () => {
   return (
     <>
       <DropdownMenuHeader
-        StartIcon={IconChevronLeft}
+        StartComponent={
-        onStartIconClick={() => onContentChange('layout')}
+          <DropdownMenuHeaderLeftComponent
+            onClick={() => onContentChange('layout')}
+            Icon={IconChevronLeft}
+          />
+        }
       >
         {t`Open in`}
       </DropdownMenuHeader>

packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuContent.tsx

@@ -31,6 +31,7 @@ import { useDeleteViewFromCurrentState } from '@/views/view-picker/hooks/useDele
 import { viewPickerReferenceViewIdComponentState } from '@/views/view-picker/states/viewPickerReferenceViewIdComponentState';
 import { useTheme } from '@emotion/react';
 import { useLingui } from '@lingui/react/macro';
+import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
 
 export const ObjectOptionsDropdownMenuContent = () => {
   const { t } = useLingui();
@@ -82,7 +83,11 @@ export const ObjectOptionsDropdownMenuContent = () => {
 
   return (
     <>
-      <DropdownMenuHeader StartIcon={CurrentViewIcon ?? IconList}>
+      <DropdownMenuHeader
+        StartComponent={
+          <DropdownMenuHeaderLeftComponent Icon={CurrentViewIcon ?? IconList} />
+        }
+      >
         {currentView?.name}
       </DropdownMenuHeader>
 

packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupFieldsContent.tsx

@@ -30,6 +30,7 @@ import { useSetRecoilState } from 'recoil';
 import { isDefined } from 'twenty-shared';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
+import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
 
 export const ObjectOptionsDropdownRecordGroupFieldsContent = () => {
   const { t } = useLingui();
@@ -106,11 +107,15 @@ export const ObjectOptionsDropdownRecordGroupFieldsContent = () => {
   return (
     <>
       <DropdownMenuHeader
-        StartIcon={IconChevronLeft}
+        StartComponent={
-        onStartIconClick={() =>
+          <DropdownMenuHeaderLeftComponent
-          isDefined(recordGroupFieldMetadata)
+            onClick={() =>
-            ? onContentChange('recordGroups')
+              isDefined(recordGroupFieldMetadata)
-            : resetContent()
+                ? onContentChange('recordGroups')
+                : resetContent()
+            }
+            Icon={IconChevronLeft}
+          />
         }
       >
         Group by

packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupSortContent.tsx

@@ -15,6 +15,7 @@ import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenu
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
 
 export const ObjectOptionsDropdownRecordGroupSortContent = () => {
   const { currentContentId, onContentChange } = useOptionsDropdown();
@@ -43,8 +44,12 @@ export const ObjectOptionsDropdownRecordGroupSortContent = () => {
   return (
     <>
       <DropdownMenuHeader
-        StartIcon={IconChevronLeft}
+        StartComponent={
-        onStartIconClick={() => onContentChange('recordGroups')}
+          <DropdownMenuHeaderLeftComponent
+            onClick={() => onContentChange('recordGroups')}
+            Icon={IconChevronLeft}
+          />
+        }
       >
         Sort
       </DropdownMenuHeader>

packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupsContent.tsx

@@ -27,6 +27,7 @@ import { useRecoilComponentFamilyValueV2 } from '@/ui/utilities/state/component-
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly';
 import { useLingui } from '@lingui/react/macro';
+import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
 
 export const ObjectOptionsDropdownRecordGroupsContent = () => {
   const { t } = useLingui();
@@ -89,8 +90,12 @@ export const ObjectOptionsDropdownRecordGroupsContent = () => {
   return (
     <>
       <DropdownMenuHeader
-        StartIcon={IconChevronLeft}
+        StartComponent={
-        onStartIconClick={resetContent}
+          <DropdownMenuHeaderLeftComponent
+            onClick={resetContent}
+            Icon={IconChevronLeft}
+          />
+        }
       >
         Group by
       </DropdownMenuHeader>

packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx

@@ -32,6 +32,7 @@ import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-sta
 import { Trans, useLingui } from '@lingui/react/macro';
 import { useRecoilValue } from 'recoil';
 import { v4 } from 'uuid';
+import { useTheme } from '@emotion/react';
 
 export const StyledInput = styled.input`
   background: transparent;
@@ -187,6 +188,8 @@ export const ObjectSortDropdownButton = ({
 
   const { t } = useLingui();
 
+  const theme = useTheme();
+
   return (
     <Dropdown
       dropdownId={OBJECT_SORT_DROPDOWN_ID}
@@ -218,12 +221,12 @@ export const ObjectSortDropdownButton = ({
             </StyledSelectedSortDirectionContainer>
           )}
           <DropdownMenuHeader
-            EndIcon={IconChevronDown}
             onClick={() =>
               setIsRecordSortDirectionMenuUnfolded(
                 !isRecordSortDirectionMenuUnfolded,
               )
             }
+            EndComponent={<IconChevronDown size={theme.icon.size.md} />}
           >
             {selectedRecordSortDirection === 'asc'
               ? t`Ascending`

packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownFieldsContent.tsx

@@ -17,6 +17,7 @@ import {
   MenuItem,
   useIcons,
 } from 'twenty-ui';
+import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
 
 export const RecordBoardColumnHeaderAggregateDropdownFieldsContent = () => {
   const {
@@ -49,11 +50,15 @@ export const RecordBoardColumnHeaderAggregateDropdownFieldsContent = () => {
   return (
     <>
       <DropdownMenuHeader
-        StartIcon={IconChevronLeft}
+        StartComponent={
-        onStartIconClick={() =>
+          <DropdownMenuHeaderLeftComponent
-          previousContentId
+            onClick={() =>
-            ? onContentChange(previousContentId)
+              previousContentId
-            : resetContent()
+                ? onContentChange(previousContentId)
+                : resetContent()
+            }
+            Icon={IconChevronLeft}
+          />
         }
       >
         {getAggregateOperationLabel(aggregateOperation)}

packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownOptionsContent.tsx

@@ -21,6 +21,7 @@ import isEmpty from 'lodash.isempty';
 import { useRecoilValue } from 'recoil';
 import { Key } from 'ts-key-enum';
 import { IconCheck, IconChevronLeft } from 'twenty-ui';
+import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
 
 export const RecordBoardColumnHeaderAggregateDropdownOptionsContent = ({
   availableAggregations,
@@ -59,8 +60,12 @@ export const RecordBoardColumnHeaderAggregateDropdownOptionsContent = ({
   return (
     <>
       <DropdownMenuHeader
-        StartIcon={IconChevronLeft}
+        StartComponent={
-        onStartIconClick={resetContent}
+          <DropdownMenuHeaderLeftComponent
+            onClick={resetContent}
+            Icon={IconChevronLeft}
+          />
+        }
       >
         {title}
       </DropdownMenuHeader>

packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateDropdownSubmenuContent.tsx

@@ -9,6 +9,7 @@ import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { useContext } from 'react';
 import { Key } from 'ts-key-enum';
 import { IconChevronLeft } from 'twenty-ui';
+import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
 
 export const RecordTableColumnAggregateFooterDropdownSubmenuContent = ({
   aggregateOperations,
@@ -33,8 +34,12 @@ export const RecordTableColumnAggregateFooterDropdownSubmenuContent = ({
   return (
     <>
       <DropdownMenuHeader
-        StartIcon={IconChevronLeft}
+        StartComponent={
-        onStartIconClick={resetContent}
+          <DropdownMenuHeaderLeftComponent
+            onClick={resetContent}
+            Icon={IconChevronLeft}
+          />
+        }
       >
         {title}
       </DropdownMenuHeader>

packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader.tsx

@@ -1,13 +1,6 @@
 import styled from '@emotion/styled';
-import { ComponentProps, MouseEvent, ReactElement } from 'react';
+import { ComponentProps, MouseEvent } from 'react';
-import { Avatar, AvatarProps, IconComponent } from 'twenty-ui';
+import { IconComponent } from 'twenty-ui';
-import { DropdownMenuHeaderStartIcon } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderStartIcon';
-import { isDefined } from 'twenty-shared';
-import { useTheme } from '@emotion/react';
-import {
-  Dropdown,
-  DropdownProps,
-} from '@/ui/layout/dropdown/components/Dropdown';
 
 const StyledHeader = styled.li`
   align-items: center;
@@ -37,7 +30,7 @@ const StyledChildrenWrapper = styled.span`
   text-overflow: ellipsis;
 `;
 
-const StyledEndIcon = styled.div`
+const StyledEndComponent = styled.div`
   display: inline-flex;
   color: ${({ theme }) => theme.font.color.tertiary};
   padding: ${({ theme }) => theme.spacing(1)};
@@ -53,50 +46,24 @@ const StyledEndIcon = styled.div`
 type DropdownMenuHeaderProps = ComponentProps<'li'> & {
   EndIcon?: IconComponent;
   onClick?: (event: MouseEvent<HTMLLIElement>) => void;
-  onStartIconClick?: (event: MouseEvent<HTMLButtonElement>) => void;
   testId?: string;
   className?: string;
-  DropdownOnEndIcon?: ReactElement<DropdownProps, typeof Dropdown>;
+  StartComponent?: React.ReactNode;
-} & (
+  EndComponent?: React.ReactNode;
-    | { StartIcon?: IconComponent }
+};
-    | { StartAvatar?: ReactElement<AvatarProps, typeof Avatar> }
-  );
 export const DropdownMenuHeader = ({
   children,
-  EndIcon,
+  StartComponent,
-  onStartIconClick,
   onClick,
   testId,
   className,
-  ...props
+  EndComponent,
 }: DropdownMenuHeaderProps) => {
-  const theme = useTheme();
-
   return (
     <StyledHeader data-testid={testId} className={className} onClick={onClick}>
-      {'StartIcon' in props && isDefined(props.StartIcon) && (
+      {StartComponent && StartComponent}
-        <DropdownMenuHeaderStartIcon
-          onClick={onStartIconClick}
-          StartIcon={props.StartIcon}
-        />
-      )}
-      {!('StartIcon' in props) &&
-        'StartAvatar' in props &&
-        isDefined(props.StartAvatar) && (
-          <DropdownMenuHeaderStartIcon
-            onClick={onStartIconClick}
-            StartAvatar={props.StartAvatar}
-          />
-        )}
       <StyledChildrenWrapper>{children}</StyledChildrenWrapper>
-      {'DropdownOnEndIcon' in props && (
+      {EndComponent && <StyledEndComponent>{EndComponent}</StyledEndComponent>}
-        <StyledEndIcon>{props.DropdownOnEndIcon}</StyledEndIcon>
-      )}
-      {!('DropdownOnEndIcon' in props) && EndIcon && (
-        <StyledEndIcon>
-          <EndIcon size={theme.icon.size.md} />
-        </StyledEndIcon>
-      )}
     </StyledHeader>
   );
 };

packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent.tsx

@@ -25,13 +25,13 @@ const StyledAvatarWrapper = styled.div`
   padding: ${({ theme }) => theme.spacing(1)};
 `;
 
-export const DropdownMenuHeaderStartIcon = ({
+export const DropdownMenuHeaderLeftComponent = ({
   onClick,
   ...props
 }: { onClick?: (event: MouseEvent<HTMLButtonElement>) => void } & (
-  | { StartIcon: IconComponent }
+  | { Icon: IconComponent }
   | {
-      StartAvatar: ReactElement<AvatarProps, typeof Avatar>;
+      Avatar: ReactElement<AvatarProps, typeof Avatar>;
     }
   | Record<never, never>
 )) => {
@@ -39,25 +39,25 @@ export const DropdownMenuHeaderStartIcon = ({
 
   return (
     <>
-      {'StartIcon' in props &&
+      {'Icon' in props &&
         (onClick ? (
           <LightIconButton
-            Icon={props.StartIcon}
+            Icon={props.Icon}
             accent="tertiary"
             size="small"
             onClick={onClick}
           />
         ) : (
           <StyledNonClickableStartIcon>
-            <props.StartIcon
+            <props.Icon
               size={theme.icon.size.sm}
               color={theme.font.color.tertiary}
             />
           </StyledNonClickableStartIcon>
         ))}
 
-      {'StartAvatar' in props && (
+      {'Avatar' in props && (
-        <StyledAvatarWrapper>{props.StartAvatar}</StyledAvatarWrapper>
+        <StyledAvatarWrapper>{props.Avatar}</StyledAvatarWrapper>
       )}
     </>
   );

packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderWithDropdownMenu.tsx

@@ -1,34 +0,0 @@
-import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
-import { IconComponent, IconDotsVertical, LightIconButton } from 'twenty-ui';
-import { SelectHotkeyScope } from '@/ui/input/types/SelectHotkeyScope';
-import { Placement } from '@floating-ui/react';
-import { ReactNode } from 'react';
-
-export type DropdownMenuHeaderWithDropdownMenuProps = {
-  EndIcon?: IconComponent;
-  dropdownPlacement?: Placement;
-  dropdownComponents: ReactNode;
-  dropdownId: string;
-};
-
-export const DropdownMenuHeaderWithDropdownMenu = (
-  props: DropdownMenuHeaderWithDropdownMenuProps,
-) => {
-  return (
-    <div className="hoverable-buttons">
-      <Dropdown
-        clickableComponent={
-          <LightIconButton
-            Icon={props.EndIcon ?? IconDotsVertical}
-            size="small"
-            accent="tertiary"
-          />
-        }
-        dropdownPlacement={props.dropdownPlacement ?? 'bottom-end'}
-        dropdownComponents={props.dropdownComponents}
-        dropdownId={props.dropdownId}
-        dropdownHotkeyScope={{ scope: SelectHotkeyScope.Select }}
-      />
-    </div>
-  );
-};

packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenu.stories.tsx

@@ -22,6 +22,7 @@ import { DropdownMenuItemsContainer } from '../DropdownMenuItemsContainer';
 import { DropdownMenuSearchInput } from '../DropdownMenuSearchInput';
 import { DropdownMenuSeparator } from '../DropdownMenuSeparator';
 import { StyledDropdownMenuSubheader } from '../StyledDropdownMenuSubheader';
+import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
 
 const meta: Meta<typeof Dropdown> = {
   title: 'UI/Layout/Dropdown/Dropdown',
@@ -219,7 +220,11 @@ export const WithHeaders: Story = {
   args: {
     dropdownComponents: (
       <>
-        <DropdownMenuHeader StartIcon={IconChevronLeft}>
+        <DropdownMenuHeader
+          StartComponent={
+            <DropdownMenuHeaderLeftComponent Icon={IconChevronLeft} />
+          }
+        >
           Header
         </DropdownMenuHeader>
         <StyledDropdownMenuSubheader>Subheader 1</StyledDropdownMenuSubheader>

packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenuHeader.stories.tsx

@@ -13,6 +13,7 @@ import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenu
 import { SelectHotkeyScope } from '@/ui/input/types/SelectHotkeyScope';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
+import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
 
 const meta: Meta<typeof DropdownMenuHeader> = {
   title: 'UI/Layout/Dropdown/DropdownMenuHeader',
@@ -31,21 +32,14 @@ export const Text: Story = {
 };
 export const StartIcon: Story = {
   args: {
-    StartIcon: IconChevronLeft,
+    StartComponent: <DropdownMenuHeaderLeftComponent Icon={IconChevronLeft} />,
     children: 'Start Icon',
   },
 };
 
-export const EndIcon: Story = {
-  args: {
-    EndIcon: IconChevronRight,
-    children: 'End Icon',
-  },
-};
-
 export const StartAndEndIcon: Story = {
   args: {
-    StartIcon: IconChevronLeft,
+    StartComponent: <DropdownMenuHeaderLeftComponent Icon={IconChevronLeft} />,
     EndIcon: IconChevronRight,
     children: 'Start and End Icon',
   },
@@ -53,7 +47,7 @@ export const StartAndEndIcon: Story = {
 
 export const StartAvatar: Story = {
   args: {
-    StartAvatar: (
+    StartComponent: (
       <Avatar placeholder="placeholder" avatarUrl={AVATAR_URL_MOCK} />
     ),
     children: 'Avatar',
@@ -63,10 +57,10 @@ export const StartAvatar: Story = {
 export const ContextDropdownAndAvatar: Story = {
   args: {
     children: 'Context Dropdown',
-    StartAvatar: (
+    StartComponent: (
       <Avatar placeholder="placeholder" avatarUrl={AVATAR_URL_MOCK} />
     ),
-    DropdownOnEndIcon: (
+    EndComponent: (
       <Dropdown
         dropdownId={'story-dropdown-id-context-menu'}
         dropdownHotkeyScope={{ scope: SelectHotkeyScope.Select }}

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/MultiWorkspaceDropdownButton.tsx

@@ -34,7 +34,7 @@ export const MultiWorkspaceDropdownButton = () => {
       dropdownHotkeyScope={{
         scope: NavigationDrawerHotKeyScope.MultiWorkspaceDropdownButton,
       }}
-      dropdownOffset={{ y: 0, x: 0 }}
+      dropdownOffset={{ y: -35, x: -5 }}
       clickableComponent={
         <MultiWorkspaceDropdownClickableComponent
           isDropdownOpen={isDropdownOpen}

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownClickableComponent.tsx

@@ -14,7 +14,7 @@ import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNaviga
 export const MultiWorkspaceDropdownClickableComponent = ({
   isDropdownOpen,
 }: {
-  isDropdownOpen: boolean;
+  isDropdownOpen?: boolean;
 }) => {
   const currentWorkspace = useRecoilValue(currentWorkspaceState);
   const theme = useTheme();

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownDefaultComponents.tsx

@@ -36,6 +36,7 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { SelectHotkeyScope } from '@/ui/input/types/SelectHotkeyScope';
 import { useColorScheme } from '@/ui/theme/hooks/useColorScheme';
 import styled from '@emotion/styled';
+import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
 
 const StyledDescription = styled.div`
   color: ${({ theme }) => theme.font.color.light};
@@ -91,13 +92,17 @@ export const MultiWorkspaceDropdownDefaultComponents = () => {
   return (
     <>
       <DropdownMenuHeader
-        StartAvatar={
+        StartComponent={
-          <Avatar
+          <DropdownMenuHeaderLeftComponent
-            placeholder={currentWorkspace?.displayName || ''}
+            Avatar={
-            avatarUrl={currentWorkspace?.logo ?? DEFAULT_WORKSPACE_LOGO}
+              <Avatar
+                placeholder={currentWorkspace?.displayName || ''}
+                avatarUrl={currentWorkspace?.logo ?? DEFAULT_WORKSPACE_LOGO}
+              />
+            }
           />
         }
-        DropdownOnEndIcon={
+        EndComponent={
           <Dropdown
             clickableComponent={
               <LightIconButton

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownThemesComponents.tsx

@@ -5,6 +5,7 @@ import { multiWorkspaceDropdownState } from '@/ui/navigation/navigation-drawer/s
 import { useSetRecoilState } from 'recoil';
 import { useColorScheme } from '@/ui/theme/hooks/useColorScheme';
 import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader';
+import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
 
 export const MultiWorkspaceDropdownThemesComponents = () => {
   const { t } = useLingui();
@@ -18,8 +19,12 @@ export const MultiWorkspaceDropdownThemesComponents = () => {
   return (
     <DropdownMenuItemsContainer>
       <DropdownMenuHeader
-        StartIcon={IconChevronLeft}
+        StartComponent={
-        onStartIconClick={() => setMultiWorkspaceDropdownState('default')}
+          <DropdownMenuHeaderLeftComponent
+            onClick={() => setMultiWorkspaceDropdownState('default')}
+            Icon={IconChevronLeft}
+          />
+        }
       >
         {t`Theme`}
       </DropdownMenuHeader>

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownWorkspacesListComponents.tsx

@@ -18,6 +18,7 @@ import { multiWorkspaceDropdownState } from '@/ui/navigation/navigation-drawer/s
 import { useState } from 'react';
 import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
 import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader';
+import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
 
 export const MultiWorkspaceDropdownWorkspacesListComponents = () => {
   const currentWorkspace = useRecoilValue(currentWorkspaceState);
@@ -37,8 +38,12 @@ export const MultiWorkspaceDropdownWorkspacesListComponents = () => {
   return (
     <DropdownMenuItemsContainer>
       <DropdownMenuHeader
-        StartIcon={IconChevronLeft}
+        StartComponent={
-        onStartIconClick={() => setMultiWorkspaceDropdownState('default')}
+          <DropdownMenuHeaderLeftComponent
+            onClick={() => setMultiWorkspaceDropdownState('default')}
+            Icon={IconChevronLeft}
+          />
+        }
       >
         {t`Other workspaces`}
       </DropdownMenuHeader>

packages/twenty-front/src/modules/views/view-picker/components/ViewPickerContentCreateMode.tsx

@@ -34,6 +34,7 @@ import { viewPickerSelectedIconComponentState } from '@/views/view-picker/states
 import { viewPickerTypeComponentState } from '@/views/view-picker/states/viewPickerTypeComponentState';
 import { useMemo, useState } from 'react';
 import { useLingui } from '@lingui/react/macro';
+import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
 
 const StyledNoKanbanFieldAvailableContainer = styled.div`
   color: ${({ theme }) => theme.font.color.light};
@@ -130,7 +131,11 @@ export const ViewPickerContentCreateMode = () => {
 
   return (
     <>
-      <DropdownMenuHeader StartIcon={IconX} onStartIconClick={handleClose}>
+      <DropdownMenuHeader
+        StartComponent={
+          <DropdownMenuHeaderLeftComponent onClick={handleClose} Icon={IconX} />
+        }
+      >
         {t`Create view`}
       </DropdownMenuHeader>
       <DropdownMenuSeparator />

packages/twenty-front/src/modules/views/view-picker/components/ViewPickerContentEditMode.tsx

@@ -21,6 +21,7 @@ import { viewPickerInputNameComponentState } from '@/views/view-picker/states/vi
 import { viewPickerIsDirtyComponentState } from '@/views/view-picker/states/viewPickerIsDirtyComponentState';
 import { viewPickerIsPersistingComponentState } from '@/views/view-picker/states/viewPickerIsPersistingComponentState';
 import { viewPickerSelectedIconComponentState } from '@/views/view-picker/states/viewPickerSelectedIconComponentState';
+import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
 
 export const ViewPickerContentEditMode = () => {
   const { setViewPickerMode } = useViewPickerMode();
@@ -68,8 +69,12 @@ export const ViewPickerContentEditMode = () => {
   return (
     <>
       <DropdownMenuHeader
-        StartIcon={IconChevronLeft}
+        StartComponent={
-        onStartIconClick={handleClose}
+          <DropdownMenuHeaderLeftComponent
+            onClick={handleClose}
+            Icon={IconChevronLeft}
+          />
+        }
       >
         Edit view
       </DropdownMenuHeader>

packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdownFieldItems.tsx

@@ -26,6 +26,7 @@ import {
   OverflowingTextWithTooltip,
   useIcons,
 } from 'twenty-ui';
+import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
 
 type WorkflowVariablesDropdownFieldItemsProps = {
   step: StepOutputSchema;
@@ -116,8 +117,12 @@ export const WorkflowVariablesDropdownFieldItems = ({
   return (
     <>
       <DropdownMenuHeader
-        StartIcon={IconChevronLeft}
+        StartComponent={
-        onStartIconClick={goBack}
+          <DropdownMenuHeaderLeftComponent
+            onClick={goBack}
+            Icon={IconChevronLeft}
+          />
+        }
         style={{ position: 'fixed' }}
       >
         <OverflowingTextWithTooltip

packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdownObjectItems.tsx

@@ -15,6 +15,7 @@ import {
   OverflowingTextWithTooltip,
   useIcons,
 } from 'twenty-ui';
+import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
 
 type WorkflowVariablesDropdownObjectItemsProps = {
   step: StepOutputSchema;
@@ -98,7 +99,14 @@ export const WorkflowVariablesDropdownObjectItems = ({
 
   return (
     <>
-      <DropdownMenuHeader StartIcon={IconChevronLeft} onStartIconClick={goBack}>
+      <DropdownMenuHeader
+        StartComponent={
+          <DropdownMenuHeaderLeftComponent
+            onClick={goBack}
+            Icon={IconChevronLeft}
+          />
+        }
+      >
         <OverflowingTextWithTooltip
           text={getStepHeaderLabel(step, currentPath)}
         />

packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdownWorkflowStepItems.tsx

@@ -12,6 +12,7 @@ import {
   OverflowingTextWithTooltip,
   useIcons,
 } from 'twenty-ui';
+import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
 
 type WorkflowVariablesDropdownWorkflowStepItemsProps = {
   dropdownId: string;
@@ -37,7 +38,14 @@ export const WorkflowVariablesDropdownWorkflowStepItems = ({
 
   return (
     <>
-      <DropdownMenuHeader StartIcon={IconX} onStartIconClick={closeDropdown}>
+      <DropdownMenuHeader
+        StartComponent={
+          <DropdownMenuHeaderLeftComponent
+            onClick={closeDropdown}
+            Icon={IconX}
+          />
+        }
+      >
         <OverflowingTextWithTooltip text={'Select Step'} />
       </DropdownMenuHeader>
       <DropdownMenuSearchInput