965 flow control arrow menu 1/3 add insert step button (#12519)

Add insert step button to workflow edges



https://github.com/user-attachments/assets/7144f722-f1c7-450f-a8eb-c902071986a1



Also fixes `iconButtonGroup` UI component

## Before


https://github.com/user-attachments/assets/7b5f0245-d0e8-48af-9aa5-a29388a1caea


## After



https://github.com/user-attachments/assets/1820874f-aa99-41ae-8254-c76c275ee3ae

packages/twenty-ui/src/input/button/components/IconButtonGroup.tsx

@@ -2,17 +2,10 @@ import styled from '@emotion/styled';
 import { IconComponent } from '@ui/display';
 import { MouseEvent } from 'react';
 
-import { IconButton, IconButtonPosition, IconButtonProps } from './IconButton';
+import { InsideButton } from '@ui/input/button/components/InsideButton';
 
-const StyledIconButtonGroupContainer = styled.div`
-  border-radius: ${({ theme }) => theme.border.radius.md};
-  display: flex;
-`;
-
-export type IconButtonGroupProps = Pick<
-  IconButtonProps,
-  'accent' | 'size' | 'variant'
-> & {
+export type IconButtonGroupProps = {
+  disabled?: boolean;
   iconButtons: {
     Icon: IconComponent;
     onClick?: (event: MouseEvent<any>) => void;
@@ -20,31 +13,36 @@ export type IconButtonGroupProps = Pick<
   className?: string;
 };
 
+const StyledIconButtonGroupContainer = styled.div<
+  Pick<IconButtonGroupProps, 'disabled'>
+>`
+  display: inline-flex;
+  align-items: flex-start;
+  background-color: ${({ disabled, theme }) =>
+    disabled ? 'inherit' : theme.background.transparent.lighter};
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  gap: 2px;
+  padding: 2px;
+  backdrop-filter: blur(20px);
+
+  &:hover {
+    box-shadow: ${({ theme }) => theme.boxShadow.light};
+  }
+`;
+
 export const IconButtonGroup = ({
-  accent,
   iconButtons,
-  size,
-  variant,
+  disabled,
   className,
 }: IconButtonGroupProps) => (
-  <StyledIconButtonGroupContainer className={className}>
+  <StyledIconButtonGroupContainer className={className} disabled={disabled}>
     {iconButtons.map(({ Icon, onClick }, index) => {
-      const position: IconButtonPosition =
-        index === 0
-          ? 'left'
-          : index === iconButtons.length - 1
-            ? 'right'
-            : 'middle';
-
       return (
-        <IconButton
+        <InsideButton
           key={index}
-          accent={accent}
           Icon={Icon}
           onClick={onClick}
-          position={position}
-          size={size}
-          variant={variant}
+          disabled={disabled}
         />
       );
     })}