feat(workflow-controls): added action bar for picker/hand/undo/redo/zoom workflow controls, added general setting to disable

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx

@@ -1,19 +1,28 @@
 'use client'
 
 import { useRef, useState } from 'react'
+<<<<<<< HEAD
 import { createLogger } from '@sim/logger'
 import { useReactFlow } from 'reactflow'
 import {
   Button,
   ChevronDown,
+=======
+import { useReactFlow } from 'reactflow'
+import {
+  Button,
+>>>>>>> 72ae3be5c (feat(workflow-controls): added action bar for picker/hand/undo/redo/zoom workflow controls, added general setting to disable)
   Cursor,
   Expand,
   Hand,
   Popover,
   PopoverAnchor,
   PopoverContent,
   PopoverItem,
+<<<<<<< HEAD
   PopoverTrigger,
+=======
+>>>>>>> 72ae3be5c (feat(workflow-controls): added action bar for picker/hand/undo/redo/zoom workflow controls, added general setting to disable)
   Redo,
   Tooltip,
   Undo,
@@ -22,19 +31,27 @@ import {
 } from '@/components/emcn'
 import { useSession } from '@/lib/auth/auth-client'
 import { useUpdateGeneralSetting } from '@/hooks/queries/general-settings'
+<<<<<<< HEAD
 import { useCanvasViewport } from '@/hooks/use-canvas-viewport'
+=======
+>>>>>>> 72ae3be5c (feat(workflow-controls): added action bar for picker/hand/undo/redo/zoom workflow controls, added general setting to disable)
 import { useCollaborativeWorkflow } from '@/hooks/use-collaborative-workflow'
 import { useCanvasModeStore } from '@/stores/canvas-mode'
 import { useGeneralStore } from '@/stores/settings/general'
 import { useUndoRedoStore } from '@/stores/undo-redo'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 
+<<<<<<< HEAD
 const logger = createLogger('ActionBar')
 
 export function ActionBar() {
   const reactFlowInstance = useReactFlow()
   const { zoomIn, zoomOut } = reactFlowInstance
   const { fitViewToBounds } = useCanvasViewport(reactFlowInstance)
+=======
+export function ActionBar() {
+  const { zoomIn, zoomOut, fitView } = useReactFlow()
+>>>>>>> 72ae3be5c (feat(workflow-controls): added action bar for picker/hand/undo/redo/zoom workflow controls, added general setting to disable)
   const { mode, setMode } = useCanvasModeStore()
   const { undo, redo } = useCollaborativeWorkflow()
   const showActionBar = useGeneralStore((s) => s.showActionBar)
@@ -50,7 +67,10 @@ export function ActionBar() {
   const canRedo = stack.redo.length > 0
 
   const [contextMenu, setContextMenu] = useState<{ x: number; y: number } | null>(null)
+<<<<<<< HEAD
   const [isCanvasModeOpen, setIsCanvasModeOpen] = useState(false)
+=======
+>>>>>>> 72ae3be5c (feat(workflow-controls): added action bar for picker/hand/undo/redo/zoom workflow controls, added general setting to disable)
   const menuRef = useRef<HTMLDivElement>(null)
 
   const handleContextMenu = (e: React.MouseEvent) => {
@@ -59,13 +79,18 @@ export function ActionBar() {
   }
 
   const handleHide = async () => {
+<<<<<<< HEAD
     try {
       await updateSetting.mutateAsync({ key: 'showActionBar', value: false })
     } catch (error) {
       logger.error('Failed to hide action bar', error)
     } finally {
       setContextMenu(null)
     }
+=======
+    setContextMenu(null)
+    await updateSetting.mutateAsync({ key: 'showActionBar', value: false })
+>>>>>>> 72ae3be5c (feat(workflow-controls): added action bar for picker/hand/undo/redo/zoom workflow controls, added general setting to disable)
   }
 
   if (!showActionBar) {
@@ -75,6 +100,7 @@ export function ActionBar() {
   return (
     <>
       <div
+<<<<<<< HEAD
         className='-translate-x-1/2 fixed bottom-[calc(var(--terminal-height)+16px)] left-[calc((100vw+var(--sidebar-width)-var(--panel-width))/2)] z-10 flex h-[36px] items-center gap-[2px] rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)] p-[4px] shadow-sm transition-[left,bottom] duration-100 ease-out'
         onContextMenu={handleContextMenu}
       >
@@ -120,14 +146,48 @@ export function ActionBar() {
             </PopoverItem>
           </PopoverContent>
         </Popover>
+=======
+        className='fixed bottom-[calc(var(--terminal-height)+12px)] left-[calc(var(--sidebar-width)+12px)] z-10 flex h-[36px] items-center gap-[2px] rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)] p-[4px] shadow-sm transition-[left,bottom] duration-100 ease-out'
+        onContextMenu={handleContextMenu}
+      >
+        <Tooltip.Root>
+          <Tooltip.Trigger asChild>
+            <Button
+              variant={mode === 'hand' ? 'secondary' : 'ghost'}
+              className='h-[28px] w-[28px] p-0'
+              onClick={() => setMode('hand')}
+            >
+              <Hand className='h-[16px] w-[16px]' />
+            </Button>
+          </Tooltip.Trigger>
+          <Tooltip.Content side='top'>Hand tool</Tooltip.Content>
+        </Tooltip.Root>
+
+        <Tooltip.Root>
+          <Tooltip.Trigger asChild>
+            <Button
+              variant={mode === 'cursor' ? 'secondary' : 'ghost'}
+              className='h-[28px] w-[28px] p-0'
+              onClick={() => setMode('cursor')}
+            >
+              <Cursor className='h-[16px] w-[16px]' />
+            </Button>
+          </Tooltip.Trigger>
+          <Tooltip.Content side='top'>Move</Tooltip.Content>
+        </Tooltip.Root>
+>>>>>>> 72ae3be5c (feat(workflow-controls): added action bar for picker/hand/undo/redo/zoom workflow controls, added general setting to disable)
 
         <div className='mx-[4px] h-[20px] w-[1px] bg-[var(--border)]' />
 
         <Tooltip.Root>
           <Tooltip.Trigger asChild>
             <Button
               variant='ghost'
+<<<<<<< HEAD
               className='h-[28px] w-[28px] rounded-[6px] p-0 hover:bg-[var(--surface-5)]'
+=======
+              className='h-[28px] w-[28px] p-0'
+>>>>>>> 72ae3be5c (feat(workflow-controls): added action bar for picker/hand/undo/redo/zoom workflow controls, added general setting to disable)
               onClick={undo}
               disabled={!canUndo}
             >
@@ -143,7 +203,11 @@ export function ActionBar() {
           <Tooltip.Trigger asChild>
             <Button
               variant='ghost'
+<<<<<<< HEAD
               className='h-[28px] w-[28px] rounded-[6px] p-0 hover:bg-[var(--surface-5)]'
+=======
+              className='h-[28px] w-[28px] p-0'
+>>>>>>> 72ae3be5c (feat(workflow-controls): added action bar for picker/hand/undo/redo/zoom workflow controls, added general setting to disable)
               onClick={redo}
               disabled={!canRedo}
             >
@@ -159,11 +223,15 @@ export function ActionBar() {
 
         <Tooltip.Root>
           <Tooltip.Trigger asChild>
+<<<<<<< HEAD
             <Button
               variant='ghost'
               className='h-[28px] w-[28px] rounded-[6px] p-0 hover:bg-[var(--surface-5)]'
               onClick={() => zoomOut()}
             >
+=======
+            <Button variant='ghost' className='h-[28px] w-[28px] p-0' onClick={() => zoomOut()}>
+>>>>>>> 72ae3be5c (feat(workflow-controls): added action bar for picker/hand/undo/redo/zoom workflow controls, added general setting to disable)
               <ZoomOut className='h-[16px] w-[16px]' />
             </Button>
           </Tooltip.Trigger>
@@ -172,11 +240,15 @@ export function ActionBar() {
 
         <Tooltip.Root>
           <Tooltip.Trigger asChild>
+<<<<<<< HEAD
             <Button
               variant='ghost'
               className='h-[28px] w-[28px] rounded-[6px] p-0 hover:bg-[var(--surface-5)]'
               onClick={() => zoomIn()}
             >
+=======
+            <Button variant='ghost' className='h-[28px] w-[28px] p-0' onClick={() => zoomIn()}>
+>>>>>>> 72ae3be5c (feat(workflow-controls): added action bar for picker/hand/undo/redo/zoom workflow controls, added general setting to disable)
               <ZoomIn className='h-[16px] w-[16px]' />
             </Button>
           </Tooltip.Trigger>
@@ -187,8 +259,13 @@ export function ActionBar() {
           <Tooltip.Trigger asChild>
             <Button
               variant='ghost'
+<<<<<<< HEAD
               className='h-[28px] w-[28px] rounded-[6px] p-0 hover:bg-[var(--surface-5)]'
               onClick={() => fitViewToBounds({ padding: 0.1, duration: 300 })}
+=======
+              className='h-[28px] w-[28px] p-0'
+              onClick={() => fitView({ padding: 0.3, duration: 300 })}
+>>>>>>> 72ae3be5c (feat(workflow-controls): added action bar for picker/hand/undo/redo/zoom workflow controls, added general setting to disable)
             >
               <Expand className='h-[16px] w-[16px]' />
             </Button>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx

@@ -503,6 +503,7 @@ export function Panel() {
                 Editor
               </Button>
             </div>
+<<<<<<< HEAD
 
             {/* Canvas Mode Selector */}
             <Popover
@@ -556,6 +557,8 @@ export function Panel() {
                 </PopoverItem>
               </PopoverContent>
             </Popover>
+=======
+>>>>>>> 72ae3be5c (feat(workflow-controls): added action bar for picker/hand/undo/redo/zoom workflow controls, added general setting to disable)
           </div>
 
           {/* Tab Content - Keep all tabs mounted but hidden to preserve state */}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx

@@ -3357,9 +3357,11 @@ const WorkflowContent = React.memo(() => {
               onPointerMove={handleCanvasPointerMove}
               onPointerLeave={handleCanvasPointerLeave}
               elementsSelectable={true}
-              selectionOnDrag={!isHandMode}
+              selectionOnDrag={!isHandMode || isSelectionDragActive}
               selectionMode={SelectionMode.Partial}
               panOnDrag={isHandMode ? [0, 1] : false}
+              onSelectionStart={onSelectionStart}
+              onSelectionEnd={onSelectionEnd}
               multiSelectionKeyCode={['Meta', 'Control', 'Shift']}
               nodesConnectable={effectivePermissions.canEdit}
               nodesDraggable={effectivePermissions.canEdit}