251 create top bar chips inside the command menu (#9809)

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



https://github.com/user-attachments/assets/065c97fe-1daf-4b48-9d57-6bbb96d24ede

packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasEditableEffect.tsx

@@ -8,11 +8,15 @@ import { EMPTY_TRIGGER_STEP_ID } from '@/workflow/workflow-diagram/constants/Emp
 import { useStartNodeCreation } from '@/workflow/workflow-diagram/hooks/useStartNodeCreation';
 import { useTriggerNodeSelection } from '@/workflow/workflow-diagram/hooks/useTriggerNodeSelection';
 import { workflowSelectedNodeState } from '@/workflow/workflow-diagram/states/workflowSelectedNodeState';
-import { WorkflowDiagramNode } from '@/workflow/workflow-diagram/types/WorkflowDiagram';
+import {
+  WorkflowDiagramNode,
+  WorkflowDiagramStepNodeData,
+} from '@/workflow/workflow-diagram/types/WorkflowDiagram';
+import { getWorkflowNodeIcon } from '@/workflow/workflow-diagram/utils/getWorkflowNodeIcon';
 import { OnSelectionChangeParams, useOnSelectionChange } from '@xyflow/react';
 import { useCallback } from 'react';
 import { useSetRecoilState } from 'recoil';
-import { isDefined } from 'twenty-ui';
+import { IconBolt, isDefined } from 'twenty-ui';
 
 export const WorkflowDiagramCanvasEditableEffect = () => {
   const { startNodeCreation } = useStartNodeCreation();
@@ -37,7 +41,10 @@ export const WorkflowDiagramCanvasEditableEffect = () => {
 
       const isEmptyTriggerNode = selectedNode.type === EMPTY_TRIGGER_STEP_ID;
       if (isEmptyTriggerNode) {
-        openRightDrawer(RightDrawerPages.WorkflowStepSelectTriggerType);
+        openRightDrawer(RightDrawerPages.WorkflowStepSelectTriggerType, {
+          title: 'Trigger Type',
+          Icon: IconBolt,
+        });
 
         return;
       }
@@ -53,9 +60,14 @@ export const WorkflowDiagramCanvasEditableEffect = () => {
         return;
       }
 
+      const selectedNodeData = selectedNode.data as WorkflowDiagramStepNodeData;
+
       setWorkflowSelectedNode(selectedNode.id);
       setHotkeyScope(RightDrawerHotkeyScope.RightDrawer, { goto: false });
-      openRightDrawer(RightDrawerPages.WorkflowStepEdit);
+      openRightDrawer(RightDrawerPages.WorkflowStepEdit, {
+        title: selectedNodeData.name,
+        Icon: getWorkflowNodeIcon(selectedNodeData),
+      });
     },
     [
       setWorkflowSelectedNode,

packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasReadonlyEffect.tsx

@@ -5,7 +5,11 @@ import { RightDrawerPages } from '@/ui/layout/right-drawer/types/RightDrawerPage
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
 import { useTriggerNodeSelection } from '@/workflow/workflow-diagram/hooks/useTriggerNodeSelection';
 import { workflowSelectedNodeState } from '@/workflow/workflow-diagram/states/workflowSelectedNodeState';
-import { WorkflowDiagramNode } from '@/workflow/workflow-diagram/types/WorkflowDiagram';
+import {
+  WorkflowDiagramNode,
+  WorkflowDiagramStepNodeData,
+} from '@/workflow/workflow-diagram/types/WorkflowDiagram';
+import { getWorkflowNodeIcon } from '@/workflow/workflow-diagram/utils/getWorkflowNodeIcon';
 import { OnSelectionChangeParams, useOnSelectionChange } from '@xyflow/react';
 import { useCallback } from 'react';
 import { useSetRecoilState } from 'recoil';
@@ -30,7 +34,12 @@ export const WorkflowDiagramCanvasReadonlyEffect = () => {
 
       setWorkflowSelectedNode(selectedNode.id);
       setHotkeyScope(RightDrawerHotkeyScope.RightDrawer, { goto: false });
-      openRightDrawer(RightDrawerPages.WorkflowStepView);
+
+      const selectedNodeData = selectedNode.data as WorkflowDiagramStepNodeData;
+      openRightDrawer(RightDrawerPages.WorkflowStepView, {
+        title: selectedNodeData.name,
+        Icon: getWorkflowNodeIcon(selectedNodeData),
+      });
     },
     [
       setWorkflowSelectedNode,

packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramStepNodeBase.tsx

@@ -1,15 +1,9 @@
 import { assertUnreachable } from '@/workflow/utils/assertUnreachable';
 import { WorkflowDiagramBaseStepNode } from '@/workflow/workflow-diagram/components/WorkflowDiagramBaseStepNode';
 import { WorkflowDiagramStepNodeData } from '@/workflow/workflow-diagram/types/WorkflowDiagram';
+import { getWorkflowNodeIcon } from '@/workflow/workflow-diagram/utils/getWorkflowNodeIcon';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import {
-  IconAddressBook,
-  IconCode,
-  IconHandMove,
-  IconMail,
-  IconPlaylistAdd,
-} from 'twenty-ui';
 
 const StyledStepNodeLabelIconContainer = styled.div`
   align-items: center;
@@ -29,6 +23,8 @@ export const WorkflowDiagramStepNodeBase = ({
 }) => {
   const theme = useTheme();
 
+  const Icon = getWorkflowNodeIcon(data);
+
   const renderStepIcon = () => {
     switch (data.nodeType) {
       case 'trigger': {
@@ -36,7 +32,7 @@ export const WorkflowDiagramStepNodeBase = ({
           case 'DATABASE_EVENT': {
             return (
               <StyledStepNodeLabelIconContainer>
-                <IconPlaylistAdd
+                <Icon
                   size={theme.icon.size.lg}
                   color={theme.font.color.tertiary}
                 />
@@ -46,7 +42,7 @@ export const WorkflowDiagramStepNodeBase = ({
           case 'MANUAL': {
             return (
               <StyledStepNodeLabelIconContainer>
-                <IconHandMove
+                <Icon
                   size={theme.icon.size.lg}
                   color={theme.font.color.tertiary}
                 />
@@ -62,17 +58,14 @@ export const WorkflowDiagramStepNodeBase = ({
           case 'CODE': {
             return (
               <StyledStepNodeLabelIconContainer>
-                <IconCode
-                  size={theme.icon.size.lg}
-                  color={theme.color.orange}
-                />
+                <Icon size={theme.icon.size.lg} color={theme.color.orange} />
               </StyledStepNodeLabelIconContainer>
             );
           }
           case 'SEND_EMAIL': {
             return (
               <StyledStepNodeLabelIconContainer>
-                <IconMail size={theme.icon.size.lg} color={theme.color.blue} />
+                <Icon size={theme.icon.size.lg} color={theme.color.blue} />
               </StyledStepNodeLabelIconContainer>
             );
           }
@@ -81,7 +74,7 @@ export const WorkflowDiagramStepNodeBase = ({
           case 'DELETE_RECORD': {
             return (
               <StyledStepNodeLabelIconContainer>
-                <IconAddressBook
+                <Icon
                   size={theme.icon.size.lg}
                   color={theme.font.color.tertiary}
                   stroke={theme.icon.stroke.sm}