From 0503aa7982bbb2ce5aac77935e941401131f51d4 Mon Sep 17 00:00:00 2001
From: martmull <martmull@hotmail.fr>
Date: Wed, 27 May 2026 18:57:48 +0200
Subject: [PATCH] Display application info in workflow side panel (#20976)

To comply this design
https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=99421-167676&t=GXw0bOgp2P51YVKi-0


## Before

<img width="569" height="470" alt="image"
src="https://github.com/user-attachments/assets/c52c8775-2934-4620-8885-dff5a8230a89"
/>


## After

<img width="314" height="258" alt="image"
src="https://github.com/user-attachments/assets/df9cbd15-cf7b-4a47-ac8d-1292c71a7c94"
/>
---
 .../applications/components/AppChip.tsx       |  6 +++-
 .../SidePanelWorkflowSelectAction.tsx         | 17 +++-------
 .../action/components/ToolMenuItem.tsx        | 33 +++++++++++++++++++
 3 files changed, 42 insertions(+), 14 deletions(-)
 create mode 100644 packages/twenty-front/src/modules/side-panel/pages/workflow/action/components/ToolMenuItem.tsx

diff --git a/packages/twenty-front/src/modules/applications/components/AppChip.tsx b/packages/twenty-front/src/modules/applications/components/AppChip.tsx
index 98faef32fd..e0a8d5dd90 100644
--- a/packages/twenty-front/src/modules/applications/components/AppChip.tsx
+++ b/packages/twenty-front/src/modules/applications/components/AppChip.tsx
@@ -15,6 +15,7 @@ type AppChipProps = {
     name?: string | null;
   };
   className?: string;
+  chipOnly?: boolean;
 };
 
 const StyledContainer = styled.div`
@@ -34,6 +35,7 @@ export const AppChip = ({
   size = 'sm',
   fallbackApplicationData,
   className,
+  chipOnly = false,
 }: AppChipProps) => {
   const { applicationChipData } = useApplicationChipData({
     applicationId,
@@ -52,7 +54,9 @@ export const AppChip = ({
         backgroundColor={applicationChipData.colors?.backgroundColor}
         borderColor={applicationChipData.colors?.borderColor}
       />
-      <OverflowingTextWithTooltip text={applicationChipData.name} />
+      {!chipOnly && (
+        <OverflowingTextWithTooltip text={applicationChipData.name} />
+      )}
     </StyledContainer>
   );
 };
diff --git a/packages/twenty-front/src/modules/side-panel/pages/workflow/action/components/SidePanelWorkflowSelectAction.tsx b/packages/twenty-front/src/modules/side-panel/pages/workflow/action/components/SidePanelWorkflowSelectAction.tsx
index 4f51147c7b..16e2d5fae7 100644
--- a/packages/twenty-front/src/modules/side-panel/pages/workflow/action/components/SidePanelWorkflowSelectAction.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/workflow/action/components/SidePanelWorkflowSelectAction.tsx
@@ -9,11 +9,9 @@ import { CORE_ACTIONS } from '@/workflow/workflow-steps/workflow-actions/constan
 import { FLOW_ACTIONS } from '@/workflow/workflow-steps/workflow-actions/constants/FlowActions';
 import { HUMAN_INPUT_ACTIONS } from '@/workflow/workflow-steps/workflow-actions/constants/HumanInputActions';
 import { RECORD_ACTIONS } from '@/workflow/workflow-steps/workflow-actions/constants/RecordActions';
-import { getActionIconColorOrThrow } from '@/workflow/workflow-steps/workflow-actions/utils/getActionIconColorOrThrow';
+import { ToolMenuItem } from '@/side-panel/pages/workflow/action/components/ToolMenuItem';
 import { useLingui } from '@lingui/react/macro';
 import { isDefined } from 'twenty-shared/utils';
-import { IconFunction } from 'twenty-ui/display';
-import { MenuItem } from 'twenty-ui/navigation';
 
 export type WorkflowActionSelection = {
   type: WorkflowActionType;
@@ -91,19 +89,12 @@ export const SidePanelWorkflowSelectAction = ({
       {toolFunctions.length > 0 && (
         <>
           <SidePanelWorkflowSelectStepTitle>
-            {t`Applications`}
+            {t`Other`}
           </SidePanelWorkflowSelectStepTitle>
           {toolFunctions.map((fn) => (
-            <MenuItem
+            <ToolMenuItem
               key={fn.id}
-              withIconContainer={true}
-              LeftIcon={() => (
-                <IconFunction
-                  color={getActionIconColorOrThrow('LOGIC_FUNCTION')}
-                  size={16}
-                />
-              )}
-              text={fn.workflowActionTriggerSettings?.label ?? fn.name}
+              logicFunction={fn}
               onClick={() => handleFunctionClick(fn.id)}
             />
           ))}
diff --git a/packages/twenty-front/src/modules/side-panel/pages/workflow/action/components/ToolMenuItem.tsx b/packages/twenty-front/src/modules/side-panel/pages/workflow/action/components/ToolMenuItem.tsx
new file mode 100644
index 0000000000..c96ffc32b8
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/pages/workflow/action/components/ToolMenuItem.tsx
@@ -0,0 +1,33 @@
+import { AppChip } from '@/applications/components/AppChip';
+import { useApplicationChipData } from '@/applications/hooks/useApplicationChipData';
+import { type LogicFunction } from '@/logic-functions/types/LogicFunction';
+import { MenuItem } from 'twenty-ui/navigation';
+
+type ToolMenuItemProps = {
+  logicFunction: LogicFunction;
+  onClick: () => void;
+};
+
+export const ToolMenuItem = ({ logicFunction, onClick }: ToolMenuItemProps) => {
+  const { applicationChipData } = useApplicationChipData({
+    applicationId: logicFunction.applicationId,
+  });
+
+  return (
+    <MenuItem
+      withIconContainer={true}
+      LeftIcon={() => (
+        <AppChip
+          applicationId={logicFunction.applicationId}
+          size={'md'}
+          chipOnly
+        />
+      )}
+      text={
+        logicFunction.workflowActionTriggerSettings?.label ?? logicFunction.name
+      }
+      contextualText={applicationChipData.name}
+      onClick={onClick}
+    />
+  );
+};