feat(ux): added auto-layout for workflows (#443)

* added auto-layout

* cleanup & fixes

* disable auto-format during debugging & during execution

* nits, acknowledged PR comments

Author: waleedlatif1

apps/sim/app/w/[id]/components/control-bar/control-bar.tsx

@@ -8,6 +8,7 @@ import {
   ChevronDown,
   Copy,
   History,
+  Layers,
   Loader2,
   Play,
   SkipForward,
@@ -698,6 +699,37 @@ export function ControlBar() {
     </Tooltip>
   )
 
+  /**
+   * Render auto-layout button
+   */
+  const renderAutoLayoutButton = () => {
+    const handleAutoLayoutClick = () => {
+      if (isExecuting || isMultiRunning || isDebugging) {
+        return
+      }
+
+      window.dispatchEvent(new CustomEvent('trigger-auto-layout'))
+    }
+
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant='ghost'
+            size='icon'
+            onClick={handleAutoLayoutClick}
+            className='hover:text-primary'
+            disabled={isExecuting || isMultiRunning || isDebugging}
+          >
+            <Layers className='h-5 w-5' />
+            <span className='sr-only'>Auto Layout</span>
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent command='Shift+L'>Auto Layout</TooltipContent>
+      </Tooltip>
+    )
+  }
+
   /**
    * Render debug mode controls
    */
@@ -975,6 +1007,7 @@ export function ControlBar() {
         {renderHistoryDropdown()}
         {renderNotificationsDropdown()}
         {renderDuplicateButton()}
+        {renderAutoLayoutButton()}
         {renderDebugModeToggle()}
         {/* {renderPublishButton()} */}
         {renderDeployButton()}

apps/sim/app/w/[id]/components/workflow-edge/workflow-edge.tsx

@@ -12,8 +12,6 @@ export const WorkflowEdge = ({
   data,
   style,
 }: EdgeProps) => {
-  const isHorizontal = sourcePosition === 'right' || sourcePosition === 'left'
-
   const [edgePath, labelX, labelY] = getSmoothStepPath({
     sourceX,
     sourceY,
@@ -22,7 +20,7 @@ export const WorkflowEdge = ({
     targetY,
     targetPosition,
     borderRadius: 8,
-    offset: isHorizontal ? 30 : 20,
+    offset: 10,
   })
 
   // Use the directly provided isSelected flag instead of computing it