322 compact command chips dropdown (#10456)

Closes https://github.com/twentyhq/core-team-issues/issues/322



https://github.com/user-attachments/assets/d4806f04-e217-40f5-9707-93334bbd49ea

---------

Co-authored-by: Devessier <baptiste@devessier.fr>

packages/twenty-ui/src/navigation/menu-item/components/MenuItem.tsx

@@ -25,6 +25,7 @@ export type MenuItemProps = {
   isIconDisplayedOnHoverOnly?: boolean;
   isTooltipOpen?: boolean;
   LeftIcon?: IconComponent | null;
+  LeftComponent?: ReactNode;
   RightIcon?: IconComponent | null;
   onClick?: (event: MouseEvent<HTMLDivElement>) => void;
   onMouseEnter?: (event: MouseEvent<HTMLDivElement>) => void;
@@ -42,6 +43,7 @@ export const MenuItem = ({
   iconButtons,
   isIconDisplayedOnHoverOnly = true,
   LeftIcon,
+  LeftComponent,
   RightIcon,
   onClick,
   onMouseEnter,
@@ -77,6 +79,7 @@ export const MenuItem = ({
       <StyledMenuItemLeftContent>
         <MenuItemLeftContent
           LeftIcon={LeftIcon ?? undefined}
+          LeftComponent={LeftComponent}
           text={text}
           contextualText={contextualText}
           disabled={disabled}

packages/twenty-ui/src/navigation/menu-item/internals/components/MenuItemLeftContent.tsx

@@ -38,6 +38,7 @@ const StyledContextualText = styled.div`
 
 type MenuItemLeftContentProps = {
   className?: string;
+  LeftComponent?: ReactNode;
   LeftIcon: IconComponent | null | undefined;
   showGrip?: boolean;
   disabled?: boolean;
@@ -47,6 +48,7 @@ type MenuItemLeftContentProps = {
 
 export const MenuItemLeftContent = ({
   className,
+  LeftComponent,
   LeftIcon,
   text,
   contextualText,
@@ -71,6 +73,7 @@ export const MenuItemLeftContent = ({
       {LeftIcon && (
         <LeftIcon size={theme.icon.size.md} stroke={theme.icon.stroke.sm} />
       )}
+      {LeftComponent}
       <StyledMenuItemLabel>
         {isString(text) ? (
           <StyledMainText>