feat(workflow-controls): added action bar for workflow controls (#2767)

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

* added util for fit to zoom that accounts for sidebar, terminal, and panel

* ack PR comments

* remove dead state variable, add logs

* improvement(ui/ux): action bar, panel, tooltip, dragging, invite modal

* added fit to view in canvas context menu

* fix(theme): dark mode flash

* fix: duplicate fit to view

* refactor: popovers; improvement: notifications, diff controls, action bar

* improvement(action-bar): ui/ux

* refactor(action-bar): renamed to workflow controls

* ran migrations

* fix: deleted migration

---------

Co-authored-by: Emir Karabeg <emirkarabeg@berkeley.edu>

Author: waleedlatif1

apps/sim/app/_shell/providers/tooltip-provider.tsx

@@ -0,0 +1,11 @@
+'use client'
+
+import { Tooltip } from '@/components/emcn'
+
+interface TooltipProviderProps {
+  children: React.ReactNode
+}
+
+export function TooltipProvider({ children }: TooltipProviderProps) {
+  return <Tooltip.Provider>{children}</Tooltip.Provider>
+}

apps/sim/app/_styles/globals.css

@@ -58,6 +58,25 @@
   pointer-events: none !important;
 }
 
+/**
+ * Workflow canvas cursor styles
+ * Override React Flow's default selection cursor based on canvas mode
+ */
+.workflow-container.canvas-mode-cursor .react-flow__pane,
+.workflow-container.canvas-mode-cursor .react-flow__selectionpane {
+  cursor: default !important;
+}
+
+.workflow-container.canvas-mode-hand .react-flow__pane,
+.workflow-container.canvas-mode-hand .react-flow__selectionpane {
+  cursor: grab !important;
+}
+
+.workflow-container.canvas-mode-hand .react-flow__pane:active,
+.workflow-container.canvas-mode-hand .react-flow__selectionpane:active {
+  cursor: grabbing !important;
+}
+
 /**
  * Selected node ring indicator
  * Uses a pseudo-element overlay to match the original behavior (absolute inset-0 z-40)
@@ -657,6 +676,20 @@ input[type="search"]::-ms-clear {
   }
 }
 
+/**
+ * Notification toast enter animation
+ */
+@keyframes notification-enter {
+  from {
+    opacity: 0;
+    transform: translateX(-16px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(var(--stack-offset, 0px));
+  }
+}
+
 /**
  * @depricated
  * Legacy globals (light/dark) kept for backward-compat with old classes.

apps/sim/app/api/users/me/settings/route.ts

@@ -27,10 +27,11 @@ const SettingsSchema = z.object({
   superUserModeEnabled: z.boolean().optional(),
   errorNotificationsEnabled: z.boolean().optional(),
   snapToGridSize: z.number().min(0).max(50).optional(),
+  showActionBar: z.boolean().optional(),
 })
 
 const defaultSettings = {
-  theme: 'system',
+  theme: 'dark',
   autoConnect: true,
   telemetryEnabled: true,
   emailPreferences: {},
@@ -39,6 +40,7 @@ const defaultSettings = {
   superUserModeEnabled: false,
   errorNotificationsEnabled: true,
   snapToGridSize: 0,
+  showActionBar: true,
 }
 
 export async function GET() {
@@ -73,6 +75,7 @@ export async function GET() {
           superUserModeEnabled: userSettings.superUserModeEnabled ?? true,
           errorNotificationsEnabled: userSettings.errorNotificationsEnabled ?? true,
           snapToGridSize: userSettings.snapToGridSize ?? 0,
+          showActionBar: userSettings.showActionBar ?? true,
         },
       },
       { status: 200 }

apps/sim/app/layout.tsx

@@ -12,6 +12,7 @@ import { HydrationErrorHandler } from '@/app/_shell/hydration-error-handler'
 import { QueryProvider } from '@/app/_shell/providers/query-provider'
 import { SessionProvider } from '@/app/_shell/providers/session-provider'
 import { ThemeProvider } from '@/app/_shell/providers/theme-provider'
+import { TooltipProvider } from '@/app/_shell/providers/tooltip-provider'
 import { season } from '@/app/_styles/fonts/season/season'
 
 export const viewport: Viewport = {
@@ -208,7 +209,9 @@ export default function RootLayout({ children }: { children: React.ReactNode })
           <ThemeProvider>
             <QueryProvider>
               <SessionProvider>
-                <BrandedLayout>{children}</BrandedLayout>
+                <TooltipProvider>
+                  <BrandedLayout>{children}</BrandedLayout>
+                </TooltipProvider>
               </SessionProvider>
             </QueryProvider>
           </ThemeProvider>

apps/sim/app/playground/page.tsx

@@ -21,12 +21,15 @@ import {
   Combobox,
   Connections,
   Copy,
+  Cursor,
   DatePicker,
   DocumentAttachment,
   Duplicate,
+  Expand,
   Eye,
   FolderCode,
   FolderPlus,
+  Hand,
   HexSimple,
   Input,
   Key as KeyIcon,
@@ -991,11 +994,14 @@ export default function PlaygroundPage() {
                 { Icon: ChevronDown, name: 'ChevronDown' },
                 { Icon: Connections, name: 'Connections' },
                 { Icon: Copy, name: 'Copy' },
+                { Icon: Cursor, name: 'Cursor' },
                 { Icon: DocumentAttachment, name: 'DocumentAttachment' },
                 { Icon: Duplicate, name: 'Duplicate' },
+                { Icon: Expand, name: 'Expand' },
                 { Icon: Eye, name: 'Eye' },
                 { Icon: FolderCode, name: 'FolderCode' },
                 { Icon: FolderPlus, name: 'FolderPlus' },
+                { Icon: Hand, name: 'Hand' },
                 { Icon: HexSimple, name: 'HexSimple' },
                 { Icon: KeyIcon, name: 'Key' },
                 { Icon: Layout, name: 'Layout' },

apps/sim/app/templates/layout-client.tsx

@@ -1,15 +1,12 @@
 'use client'
 
-import { Tooltip } from '@/components/emcn'
 import { season } from '@/app/_styles/fonts/season/season'
 
 export default function TemplatesLayoutClient({ children }: { children: React.ReactNode }) {
   return (
-    <Tooltip.Provider delayDuration={600} skipDelayDuration={0}>
-      <div className={`${season.variable} relative flex min-h-screen flex-col font-season`}>
-        <div className='-z-50 pointer-events-none fixed inset-0 bg-white' />
-        {children}
-      </div>
-    </Tooltip.Provider>
+    <div className={`${season.variable} relative flex min-h-screen flex-col font-season`}>
+      <div className='-z-50 pointer-events-none fixed inset-0 bg-white' />
+      {children}
+    </div>
   )
 }

apps/sim/app/workspace/[workspaceId]/layout.tsx

@@ -1,6 +1,5 @@
 'use client'
 
-import { Tooltip } from '@/components/emcn'
 import { GlobalCommandsProvider } from '@/app/workspace/[workspaceId]/providers/global-commands-provider'
 import { ProviderModelsLoader } from '@/app/workspace/[workspaceId]/providers/provider-models-loader'
 import { SettingsLoader } from '@/app/workspace/[workspaceId]/providers/settings-loader'
@@ -13,16 +12,14 @@ export default function WorkspaceLayout({ children }: { children: React.ReactNod
       <SettingsLoader />
       <ProviderModelsLoader />
       <GlobalCommandsProvider>
-        <Tooltip.Provider delayDuration={600} skipDelayDuration={0}>
-          <div className='flex h-screen w-full bg-[var(--bg)]'>
-            <WorkspacePermissionsProvider>
-              <div className='shrink-0' suppressHydrationWarning>
-                <Sidebar />
-              </div>
-              {children}
-            </WorkspacePermissionsProvider>
-          </div>
-        </Tooltip.Provider>
+        <div className='flex h-screen w-full bg-[var(--bg)]'>
+          <WorkspacePermissionsProvider>
+            <div className='shrink-0' suppressHydrationWarning>
+              <Sidebar />
+            </div>
+            {children}
+          </WorkspacePermissionsProvider>
+        </div>
       </GlobalCommandsProvider>
     </>
   )

apps/sim/app/workspace/[workspaceId]/utils/commands-utils.ts

@@ -19,6 +19,7 @@ export type CommandId =
   | 'clear-terminal-console'
   | 'focus-toolbar-search'
   | 'clear-notifications'
+  | 'fit-to-view'
 
 /**
  * Static metadata for a global command.
@@ -104,6 +105,11 @@ export const COMMAND_DEFINITIONS: Record<CommandId, CommandDefinition> = {
     shortcut: 'Mod+E',
     allowInEditable: false,
   },
+  'fit-to-view': {
+    id: 'fit-to-view',
+    shortcut: 'Mod+Shift+F',
+    allowInEditable: false,
+  },
 }
 
 /**

…ents/context-menu/block-context-menu.tsx …Id]/components/block-menu/block-menu.tsxapps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/context-menu/block-context-menu.tsx renamed to apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/block-menu/block-menu.tsx apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/context-menu/block-context-menu.tsx renamed to apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/block-menu/block-menu.tsx

@@ -1,20 +1,55 @@
 'use client'
 
+import type { RefObject } from 'react'
 import {
   Popover,
   PopoverAnchor,
   PopoverContent,
   PopoverDivider,
   PopoverItem,
 } from '@/components/emcn'
-import type { BlockContextMenuProps } from './types'
+
+/**
+ * Block information for context menu actions
+ */
+export interface BlockInfo {
+  id: string
+  type: string
+  enabled: boolean
+  horizontalHandles: boolean
+  parentId?: string
+  parentType?: string
+}
+
+/**
+ * Props for BlockMenu component
+ */
+export interface BlockMenuProps {
+  isOpen: boolean
+  position: { x: number; y: number }
+  menuRef: RefObject<HTMLDivElement | null>
+  onClose: () => void
+  selectedBlocks: BlockInfo[]
+  onCopy: () => void
+  onPaste: () => void
+  onDuplicate: () => void
+  onDelete: () => void
+  onToggleEnabled: () => void
+  onToggleHandles: () => void
+  onRemoveFromSubflow: () => void
+  onOpenEditor: () => void
+  onRename: () => void
+  hasClipboard?: boolean
+  showRemoveFromSubflow?: boolean
+  disableEdit?: boolean
+}
 
 /**
  * Context menu for workflow block(s).
  * Displays block-specific actions in a popover at right-click position.
  * Supports multi-selection - actions apply to all selected blocks.
  */
-export function BlockContextMenu({
+export function BlockMenu({
   isOpen,
   position,
   menuRef,
@@ -32,7 +67,7 @@ export function BlockContextMenu({
   hasClipboard = false,
   showRemoveFromSubflow = false,
   disableEdit = false,
-}: BlockContextMenuProps) {
+}: BlockMenuProps) {
   const isSingleBlock = selectedBlocks.length === 1
 
   const allEnabled = selectedBlocks.every((b) => b.enabled)

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/block-menu/index.ts

@@ -0,0 +1,2 @@
+export type { BlockInfo, BlockMenuProps } from './block-menu'
+export { BlockMenu } from './block-menu'