Fix action selection design (#9748)

<img width="1512" alt="Capture d’écran 2025-01-20 à 16 24 22"
src="https://github.com/user-attachments/assets/fc1ce873-1b7b-49bc-9ab3-105e16adde2e"
/>

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/RightDrawerWorkflowSelectActionContent.tsx

@@ -1,6 +1,7 @@
 import { WorkflowWithCurrentVersion } from '@/workflow/types/Workflow';
 import { useCreateStep } from '@/workflow/workflow-steps/hooks/useCreateStep';
-import { ACTIONS } from '@/workflow/workflow-steps/workflow-actions/constants/Actions';
+import { OTHER_ACTIONS } from '@/workflow/workflow-steps/workflow-actions/constants/OtherActions';
+import { RECORD_ACTIONS } from '@/workflow/workflow-steps/workflow-actions/constants/RecordActions';
 import styled from '@emotion/styled';
 import { MenuItem } from 'twenty-ui';
 
@@ -14,6 +15,16 @@ const StyledActionListContainer = styled.div`
   padding-inline: ${({ theme }) => theme.spacing(2)};
 `;
 
+const StyledSectionTitle = styled.span`
+  color: ${({ theme }) => theme.font.color.tertiary};
+  font-size: ${({ theme }) => theme.font.size.sm};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  padding-top: ${({ theme }) => theme.spacing(2)};
+  padding-bottom: ${({ theme }) => theme.spacing(1)};
+  padding-left: ${({ theme }) => theme.spacing(1)};
+  padding-right: ${({ theme }) => theme.spacing(1)};
+`;
+
 export const RightDrawerWorkflowSelectActionContent = ({
   workflow,
 }: {
@@ -25,14 +36,22 @@ export const RightDrawerWorkflowSelectActionContent = ({
 
   return (
     <StyledActionListContainer>
-      {ACTIONS.map((action) => (
+      <StyledSectionTitle>Records</StyledSectionTitle>
+      {RECORD_ACTIONS.map((action) => (
         <MenuItem
           key={action.type}
           LeftIcon={action.icon}
           text={action.label}
-          onClick={() => {
-            return createStep(action.type);
-          }}
+          onClick={() => createStep(action.type)}
+        />
+      ))}
+      <StyledSectionTitle>Other</StyledSectionTitle>
+      {OTHER_ACTIONS.map((action) => (
+        <MenuItem
+          key={action.type}
+          LeftIcon={action.icon}
+          text={action.label}
+          onClick={() => createStep(action.type)}
         />
       ))}
     </StyledActionListContainer>

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/constants/Actions.ts

@@ -1,38 +0,0 @@
-import { WorkflowStepType } from '@/workflow/types/Workflow';
-import {
-  IconAddressBook,
-  IconComponent,
-  IconSettingsAutomation,
-} from 'twenty-ui';
-
-export const ACTIONS: Array<{
-  label: string;
-  type: WorkflowStepType;
-  icon: IconComponent;
-}> = [
-  {
-    label: 'Serverless Function',
-    type: 'CODE',
-    icon: IconSettingsAutomation,
-  },
-  {
-    label: 'Send Email',
-    type: 'SEND_EMAIL',
-    icon: IconSettingsAutomation,
-  },
-  {
-    label: 'Create Record',
-    type: 'CREATE_RECORD',
-    icon: IconAddressBook,
-  },
-  {
-    label: 'Update Record',
-    type: 'UPDATE_RECORD',
-    icon: IconAddressBook,
-  },
-  {
-    label: 'Delete Record',
-    type: 'DELETE_RECORD',
-    icon: IconAddressBook,
-  },
-];

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/constants/OtherActions.ts

@@ -0,0 +1,19 @@
+import { WorkflowStepType } from '@/workflow/types/Workflow';
+import { IconCode, IconComponent, IconSend } from 'twenty-ui';
+
+export const OTHER_ACTIONS: Array<{
+  label: string;
+  type: WorkflowStepType;
+  icon: IconComponent;
+}> = [
+  {
+    label: 'Send Email',
+    type: 'SEND_EMAIL',
+    icon: IconSend,
+  },
+  {
+    label: 'Code',
+    type: 'CODE',
+    icon: IconCode,
+  },
+];

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/constants/RecordActions.ts

@@ -0,0 +1,24 @@
+import { WorkflowStepType } from '@/workflow/types/Workflow';
+import { IconComponent, IconPlus, IconRefreshDot, IconTrash } from 'twenty-ui';
+
+export const RECORD_ACTIONS: Array<{
+  label: string;
+  type: WorkflowStepType;
+  icon: IconComponent;
+}> = [
+  {
+    label: 'Create Record',
+    type: 'CREATE_RECORD',
+    icon: IconPlus,
+  },
+  {
+    label: 'Update Record',
+    type: 'UPDATE_RECORD',
+    icon: IconRefreshDot,
+  },
+  {
+    label: 'Delete Record',
+    type: 'DELETE_RECORD',
+    icon: IconTrash,
+  },
+];