fix: workflow node classification (#13945)

closes #13391 
As the solution said to classify workflow nodes based on colors I have
updated them with the following colors and new categories to better
classify and identify different node types as told:

  - Trigger Colors: Data (palette blue), Other (palette purple)
- Action Colors: Data (text/tertiary), AI (palette pink), Flow (tag
green), Human Input (palette orange)
 
<img width="451" height="690" alt="image"
src="https://github.com/user-attachments/assets/8c000f22-8f25-4b1d-ac6f-f2639b1eff94"
/>

<img width="451" height="690" alt="image"
src="https://github.com/user-attachments/assets/15a11a98-3fec-4374-a5f7-d7caf2ae5334"
/>

<img width="480" height="690" alt="image"
src="https://github.com/user-attachments/assets/6382f538-be6d-4595-b967-e7911f7ad61f"
/>

<img width="899" height="761" alt="image"
src="https://github.com/user-attachments/assets/98c97cd4-54cd-4bee-91b5-dd7cd3b03a5e"
/>

---------

Co-authored-by: Thomas Trompette <thomas.trompette@sfr.fr>

packages/twenty-front/src/modules/command-menu/pages/workflow/action/components/CommandMenuWorkflowSelectActionContent.tsx

@@ -1,4 +1,5 @@
 import { useWorkflowCommandMenu } from '@/command-menu/hooks/useWorkflowCommandMenu';
+import { WorkflowActionMenuItems } from '@/command-menu/pages/workflow/action/components/WorkflowActionMenuItems';
 import { commandMenuNavigationStackState } from '@/command-menu/states/commandMenuNavigationStackState';
 import { useRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentState';
 import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
@@ -12,13 +13,18 @@ import { RightDrawerStepListContainer } from '@/workflow/workflow-steps/componen
 import { RightDrawerWorkflowSelectStepTitle } from '@/workflow/workflow-steps/components/RightDrawerWorkflowSelectStepTitle';
 import { useCreateStep } from '@/workflow/workflow-steps/hooks/useCreateStep';
 import { workflowInsertStepIdsComponentState } from '@/workflow/workflow-steps/states/workflowInsertStepIdsComponentState';
+import { AI_ACTIONS } from '@/workflow/workflow-steps/workflow-actions/constants/AiActions';
+import { CORE_ACTIONS } from '@/workflow/workflow-steps/workflow-actions/constants/CoreActions';
+import { HUMAN_INPUT_ACTIONS } from '@/workflow/workflow-steps/workflow-actions/constants/HumanInputActions';
 import { RECORD_ACTIONS } from '@/workflow/workflow-steps/workflow-actions/constants/RecordActions';
-import { useFilteredOtherActions } from '@/workflow/workflow-steps/workflow-actions/hooks/useFilteredOtherActions';
 import { getActionIcon } from '@/workflow/workflow-steps/workflow-actions/utils/getActionIcon';
+import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
+import { useTheme } from '@emotion/react';
+import { useLingui } from '@lingui/react/macro';
 import { useSetRecoilState } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
 import { useIcons } from 'twenty-ui/display';
-import { MenuItemCommand } from 'twenty-ui/navigation';
+import { FeatureFlagKey } from '~/generated/graphql';
 
 export const CommandMenuWorkflowSelectActionContent = ({
   workflow,
@@ -30,7 +36,6 @@ export const CommandMenuWorkflowSelectActionContent = ({
   const { createStep } = useCreateStep({
     workflow,
   });
-  const filteredOtherActions = useFilteredOtherActions();
 
   const { closeRightClickMenu } = useCloseRightClickMenu();
 
@@ -83,30 +88,34 @@ export const CommandMenuWorkflowSelectActionContent = ({
     );
   };
 
+  const theme = useTheme();
+
+  const isAiEnabled = useIsFeatureEnabled(FeatureFlagKey.IS_AI_ENABLED);
+
+  const { t } = useLingui();
+
   return (
     <RightDrawerStepListContainer>
       <RightDrawerWorkflowSelectStepTitle>
-        Records
+        {t`Data`}
       </RightDrawerWorkflowSelectStepTitle>
-      {RECORD_ACTIONS.map((action) => (
-        <MenuItemCommand
-          key={action.type}
-          LeftIcon={getIcon(action.icon)}
-          text={action.label}
-          onClick={() => handleCreateStep(action.type)}
-        />
-      ))}
+      {WorkflowActionMenuItems(RECORD_ACTIONS, theme, handleCreateStep)}
+      {isAiEnabled && (
+        <>
+          <RightDrawerWorkflowSelectStepTitle>
+            {t`AI`}
+          </RightDrawerWorkflowSelectStepTitle>
+          {WorkflowActionMenuItems(AI_ACTIONS, theme, handleCreateStep)}
+        </>
+      )}
       <RightDrawerWorkflowSelectStepTitle>
-        Other
+        {t`Core`}
       </RightDrawerWorkflowSelectStepTitle>
-      {filteredOtherActions.map((action) => (
-        <MenuItemCommand
-          key={action.type}
-          LeftIcon={getIcon(action.icon)}
-          text={action.label}
-          onClick={() => handleCreateStep(action.type)}
-        />
-      ))}
+      {WorkflowActionMenuItems(CORE_ACTIONS, theme, handleCreateStep)}
+      <RightDrawerWorkflowSelectStepTitle>
+        {t`Human Input`}
+      </RightDrawerWorkflowSelectStepTitle>
+      {WorkflowActionMenuItems(HUMAN_INPUT_ACTIONS, theme, handleCreateStep)}
     </RightDrawerStepListContainer>
   );
 };

packages/twenty-front/src/modules/command-menu/pages/workflow/action/components/WorkflowActionMenuItems.tsx

@@ -0,0 +1,32 @@
+import { type WorkflowActionType } from '@/workflow/types/Workflow';
+import { getActionIconColorOrThrow } from '@/workflow/workflow-steps/workflow-actions/utils/getActionIconColorOrThrow';
+import { useIcons } from 'twenty-ui/display';
+import { MenuItemCommand } from 'twenty-ui/navigation';
+
+type Action = { type: WorkflowActionType; label: string; icon: string };
+
+export const WorkflowActionMenuItems = (
+  actions: Action[],
+  theme: any,
+  onClick: (actionType: WorkflowActionType) => void,
+) => {
+  const { getIcon } = useIcons();
+  return actions.map((action) => {
+    const Icon = getIcon(action.icon);
+    return (
+      <MenuItemCommand
+        key={action.type}
+        LeftIcon={() => (
+          <Icon
+            color={getActionIconColorOrThrow({
+              theme,
+              actionType: action.type,
+            })}
+          />
+        )}
+        text={action.label}
+        onClick={() => onClick(action.type)}
+      />
+    );
+  });
+};

packages/twenty-front/src/modules/command-menu/pages/workflow/trigger-type/components/CommandMenuWorkflowSelectTriggerTypeContent.tsx

@@ -13,6 +13,7 @@ import { OTHER_TRIGGER_TYPES } from '@/workflow/workflow-trigger/constants/Other
 import { useUpdateWorkflowVersionTrigger } from '@/workflow/workflow-trigger/hooks/useUpdateWorkflowVersionTrigger';
 import { getTriggerDefaultDefinition } from '@/workflow/workflow-trigger/utils/getTriggerDefaultDefinition';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
+import { useTheme } from '@emotion/react';
 import { TRIGGER_STEP_ID } from 'twenty-shared/workflow';
 import { useIcons } from 'twenty-ui/display';
 import { MenuItemCommand } from 'twenty-ui/navigation';
@@ -67,30 +68,39 @@ export const CommandMenuWorkflowSelectTriggerTypeContent = ({
     };
   };
 
+  const theme = useTheme();
+
   return (
     <RightDrawerStepListContainer>
       <RightDrawerWorkflowSelectStepTitle>
         Data
       </RightDrawerWorkflowSelectStepTitle>
-      {DATABASE_TRIGGER_TYPES.map((action) => (
-        <MenuItemCommand
-          key={action.defaultLabel}
-          LeftIcon={getIcon(action.icon)}
-          text={action.defaultLabel}
-          onClick={handleTriggerTypeClick(action)}
-        />
-      ))}
+      {DATABASE_TRIGGER_TYPES.map((action) => {
+        const Icon = getIcon(action.icon);
+        return (
+          <MenuItemCommand
+            key={action.defaultLabel}
+            LeftIcon={() => <Icon color={theme.color.blue} />}
+            text={action.defaultLabel}
+            onClick={handleTriggerTypeClick(action)}
+          />
+        );
+      })}
+
       <RightDrawerWorkflowSelectStepTitle>
         Others
       </RightDrawerWorkflowSelectStepTitle>
-      {OTHER_TRIGGER_TYPES.map((action) => (
-        <MenuItemCommand
-          key={action.defaultLabel}
-          LeftIcon={getIcon(action.icon)}
-          text={action.defaultLabel}
-          onClick={handleTriggerTypeClick(action)}
-        />
-      ))}
+      {OTHER_TRIGGER_TYPES.map((action) => {
+        const Icon = getIcon(action.icon);
+        return (
+          <MenuItemCommand
+            key={action.defaultLabel}
+            LeftIcon={() => <Icon color={theme.color.purple} />}
+            text={action.defaultLabel}
+            onClick={handleTriggerTypeClick(action)}
+          />
+        );
+      })}
     </RightDrawerStepListContainer>
   );
 };