Make source handle blue when node is selected and on hover (#13887)

## Branches disabled


https://github.com/user-attachments/assets/a0f597df-467e-4a45-bfc0-7c55dfbbcf47

## Branches enabled


https://github.com/user-attachments/assets/99d5a1c2-6943-407e-9928-ffabd344bebd

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

@@ -1,8 +1,9 @@
-import { Handle, type HandleProps } from '@xyflow/react';
-import styled from '@emotion/styled';
 import { NODE_HANDLE_HEIGHT_PX } from '@/workflow/workflow-diagram/constants/NodeHandleHeightPx';
 import { NODE_HANDLE_WIDTH_PX } from '@/workflow/workflow-diagram/constants/NodeHandleWidthPx';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { Handle, type HandleProps } from '@xyflow/react';
 import { FeatureFlagKey } from '~/generated/graphql';
 
 type WorkflowDiagramBaseHandleProps = HandleProps & {
@@ -45,26 +46,34 @@ const StyledHandle = styled(Handle, {
     }
   }}
 
-  ${({ disableHoverEffect, theme, position, selected }) => {
+  ${({ disableHoverEffect, theme, position }) => {
     if (disableHoverEffect === true) {
-      return '';
+      return undefined;
     }
 
-    let transform = `transform: scale(${HANDLE_SCALE_ON_HOVER}) !important;`;
+    let transform = css`
+      transform: scale(${HANDLE_SCALE_ON_HOVER}) !important;
+    `;
 
     if (position === 'top') {
-      transform = `transform: scale(${HANDLE_SCALE_ON_HOVER}) translate(${-TRANSLATE_PERCENT}%, ${-TRANSLATE_PERCENT}%) !important;`;
+      transform = css`
+        transform: scale(${HANDLE_SCALE_ON_HOVER})
+          translate(${-TRANSLATE_PERCENT}%, ${-TRANSLATE_PERCENT}%) !important;
+      `;
     } else if (position === 'bottom') {
-      transform = `transform: scale(${HANDLE_SCALE_ON_HOVER}) translate(${-TRANSLATE_PERCENT}%, ${TRANSLATE_PERCENT * 2}%) !important;`;
+      transform = css`
+        transform: scale(${HANDLE_SCALE_ON_HOVER})
+          translate(${-TRANSLATE_PERCENT}%, ${TRANSLATE_PERCENT * 2}%) !important;
+      `;
     }
 
-    return `
-    &:hover {
-      border-color: ${selected ? theme.color.blue : theme.font.color.light} !important;
-      background: ${selected ? theme.adaptiveColors.blue1 : theme.background.primary} !important;
-      ${transform}
-    }
-  `;
+    return css`
+      &:hover {
+        background: ${theme.adaptiveColors.blue1} !important;
+        border-color: ${theme.color.blue} !important;
+        ${transform}
+      }
+    `;
   }}
 `;
 

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

@@ -146,6 +146,7 @@ export const WorkflowDiagramStepNodeBase = ({
   nodeType,
   name,
   variant,
+  selected,
   Icon,
   RightFloatingElement,
   BottomHoverFloatingElement,
@@ -158,6 +159,7 @@ export const WorkflowDiagramStepNodeBase = ({
   nodeType: WorkflowDiagramStepNodeData['nodeType'];
   name: string;
   variant: WorkflowDiagramNodeVariant;
+  selected?: boolean;
   Icon?: React.ReactNode;
   RightFloatingElement?: React.ReactNode;
   BottomHoverFloatingElement?: React.ReactNode;
@@ -207,7 +209,7 @@ export const WorkflowDiagramStepNodeBase = ({
         type="source"
         position={Position.Bottom}
         isVisible={displayHandle}
-        selected={handlesSelectedState.sourceHandle}
+        selected={handlesSelectedState.sourceHandle || selected}
       />
     </StyledStepNodeContainer>
   );

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

@@ -66,6 +66,7 @@ export const WorkflowDiagramStepNodeEditableContent = ({
       id={id}
       name={data.name}
       variant={variant}
+      selected={selected}
       nodeType={data.nodeType}
       Icon={<WorkflowDiagramStepNodeIcon data={data} />}
       RightFloatingElement={