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>
2026-04-06 03:00:16 -04:00 · 2026-01-15 13:25:00 -08:00
parent e499cc4f82
commit 1cc489e544
57 changed files with 11198 additions and 397 deletions
--- a/apps/sim/components/emcn/components/tag-input/tag-input.tsx
+++ b/apps/sim/components/emcn/components/tag-input/tag-input.tsx
@@ -40,6 +40,7 @@
 import * as React from 'react'
 import { cva, type VariantProps } from 'class-variance-authority'
 import { Paperclip, Plus, X } from 'lucide-react'
+import { Tooltip } from '@/components/emcn/components/tooltip/tooltip'
 import { cn } from '@/lib/core/utils/cn'

 /**
@@ -155,6 +156,8 @@ export interface FileInputOptions {
  icon?: React.ComponentType<{ className?: string; strokeWidth?: number }>
  /** Extract values from file content. Each extracted value will be passed to onAdd. */
  extractValues?: (text: string) => string[]
+  /** Tooltip text for the file input button */
+  tooltip?: string
 }

 /**
@@ -480,17 +483,24 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(
          )}
        </div>
        {fileInputEnabled && !disabled && (
-          <button
-            type='button'
-            onClick={(e) => {
-              e.stopPropagation()
-              fileInputRef.current?.click()
-            }}
-            className='absolute right-[8px] bottom-[9px] text-[var(--text-tertiary)] transition-colors hover:text-[var(--text-secondary)]'
-            aria-label='Upload file'
-          >
-            <FileIcon className='h-[14px] w-[14px]' strokeWidth={2} />
-          </button>
+          <Tooltip.Root>
+            <Tooltip.Trigger asChild>
+              <button
+                type='button'
+                onClick={(e) => {
+                  e.stopPropagation()
+                  fileInputRef.current?.click()
+                }}
+                className='absolute right-[8px] bottom-[9px] text-[var(--text-tertiary)] transition-colors hover:text-[var(--text-secondary)]'
+                aria-label={fileInputOptions?.tooltip ?? 'Upload file'}
+              >
+                <FileIcon className='h-[14px] w-[14px]' strokeWidth={2} />
+              </button>
+            </Tooltip.Trigger>
+            <Tooltip.Content side='top'>
+              {fileInputOptions?.tooltip ?? 'Upload file'}
+            </Tooltip.Content>
+          </Tooltip.Root>
        )}
      </div>
    )
--- a/apps/sim/components/emcn/components/tooltip/tooltip.tsx
+++ b/apps/sim/components/emcn/components/tooltip/tooltip.tsx
@@ -7,7 +7,12 @@ import { cn } from '@/lib/core/utils/cn'
 /**
 * Tooltip provider component that must wrap your app or tooltip usage area.
 */
-const Provider = TooltipPrimitive.Provider
+const Provider = ({
+  delayDuration = 400,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>) => (
+  <TooltipPrimitive.Provider delayDuration={delayDuration} {...props} />
+)

 /**
 * Root tooltip component that wraps trigger and content.
--- a/apps/sim/components/emcn/icons/cursor.tsx
+++ b/apps/sim/components/emcn/icons/cursor.tsx
@@ -0,0 +1,22 @@
+import type { SVGProps } from 'react'
+
+export function Cursor(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width='24'
+      height='24'
+      viewBox='0 0 24 24'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      {...props}
+    >
+      <path
+        d='M20.5056 10.7754C21.1225 10.5355 21.431 10.4155 21.5176 10.2459C21.5926 10.099 21.5903 9.92446 21.5115 9.77954C21.4205 9.61226 21.109 9.50044 20.486 9.2768L4.59629 3.5728C4.0866 3.38983 3.83175 3.29835 3.66514 3.35605C3.52029 3.40621 3.40645 3.52004 3.35629 3.6649C3.29859 3.8315 3.39008 4.08635 3.57304 4.59605L9.277 20.4858C9.50064 21.1088 9.61246 21.4203 9.77973 21.5113C9.92465 21.5901 10.0991 21.5924 10.2461 21.5174C10.4157 21.4308 10.5356 21.1223 10.7756 20.5054L13.3724 13.8278C13.4194 13.707 13.4429 13.6466 13.4792 13.5957C13.5114 13.5506 13.5508 13.5112 13.5959 13.479C13.6468 13.4427 13.7072 13.4192 13.828 13.3722L20.5056 10.7754Z'
+        stroke='currentColor'
+        strokeWidth='2'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  )
+}
--- a/apps/sim/components/emcn/icons/expand.tsx
+++ b/apps/sim/components/emcn/icons/expand.tsx
@@ -0,0 +1,43 @@
+import type { SVGProps } from 'react'
+
+export function Expand(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width='24'
+      height='24'
+      viewBox='0 0 24 24'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      {...props}
+    >
+      <path
+        d='M15 3H21V9'
+        stroke='currentColor'
+        strokeWidth='2'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='M9 21H3V15'
+        stroke='currentColor'
+        strokeWidth='2'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='M21 3L14 10'
+        stroke='currentColor'
+        strokeWidth='2'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='M3 21L10 14'
+        stroke='currentColor'
+        strokeWidth='2'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  )
+}
--- a/apps/sim/components/emcn/icons/hand.tsx
+++ b/apps/sim/components/emcn/icons/hand.tsx
@@ -0,0 +1,43 @@
+import type { SVGProps } from 'react'
+
+export function Hand(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width='24'
+      height='24'
+      viewBox='0 0 24 24'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      {...props}
+    >
+      <path
+        d='M6.5 11V6.5C6.5 5.67157 7.17157 5 8 5C8.82843 5 9.5 5.67157 9.5 6.5V11'
+        stroke='currentColor'
+        strokeWidth='2'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='M9.5 10.5V5.5C9.5 4.67157 10.1716 4 11 4C11.8284 4 12.5 4.67157 12.5 5.5V10.5'
+        stroke='currentColor'
+        strokeWidth='2'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='M12.5 10.5V6.5C12.5 5.67157 13.1716 5 14 5C14.8284 5 15.5 5.67157 15.5 6.5V10.5'
+        stroke='currentColor'
+        strokeWidth='2'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='M15.5 10.5V8.5C15.5 7.67157 16.1716 7 17 7C17.8284 7 18.5 7.67157 18.5 8.5V15.5C18.5 18.8137 15.8137 21.5 12.5 21.5H11.5C8.18629 21.5 5.5 18.8137 5.5 15.5V13C5.5 12.1716 6.17157 11.5 7 11.5C7.82843 11.5 8.5 12.1716 8.5 13'
+        stroke='currentColor'
+        strokeWidth='2'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  )
+}
--- a/apps/sim/components/emcn/icons/index.ts
+++ b/apps/sim/components/emcn/icons/index.ts
@@ -4,12 +4,15 @@ export { Card } from './card'
 export { ChevronDown } from './chevron-down'
 export { Connections } from './connections'
 export { Copy } from './copy'
+export { Cursor } from './cursor'
 export { DocumentAttachment } from './document-attachment'
 export { Download } from './download'
 export { Duplicate } from './duplicate'
+export { Expand } from './expand'
 export { Eye } from './eye'
 export { FolderCode } from './folder-code'
 export { FolderPlus } from './folder-plus'
+export { Hand } from './hand'
 export { HexSimple } from './hex-simple'
 export { Key } from './key'
 export { Layout } from './layout'
--- a/apps/sim/components/emcn/icons/redo.tsx
+++ b/apps/sim/components/emcn/icons/redo.tsx
@@ -17,14 +17,14 @@ export function Redo(props: SVGProps<SVGSVGElement>) {
      <path
        d='M9.5 4.5H4C2.61929 4.5 1.5 5.61929 1.5 7C1.5 8.38071 2.61929 9.5 4 9.5H7'
        stroke='currentColor'
-        strokeWidth='1.5'
+        strokeWidth='1'
        strokeLinecap='round'
        strokeLinejoin='round'
      />
      <path
        d='M8 2.5L10 4.5L8 6.5'
        stroke='currentColor'
-        strokeWidth='1.5'
+        strokeWidth='1'
        strokeLinecap='round'
        strokeLinejoin='round'
      />
--- a/apps/sim/components/emcn/icons/undo.tsx
+++ b/apps/sim/components/emcn/icons/undo.tsx
@@ -17,14 +17,14 @@ export function Undo(props: SVGProps<SVGSVGElement>) {
      <path
        d='M2.5 4.5H8C9.38071 4.5 10.5 5.61929 10.5 7C10.5 8.38071 9.38071 9.5 8 9.5H5'
        stroke='currentColor'
-        strokeWidth='1.5'
+        strokeWidth='1'
        strokeLinecap='round'
        strokeLinejoin='round'
      />
      <path
        d='M4 2.5L2 4.5L4 6.5'
        stroke='currentColor'
-        strokeWidth='1.5'
+        strokeWidth='1'
        strokeLinecap='round'
        strokeLinejoin='round'
      />
--- a/apps/sim/components/emcn/icons/zoom-in.tsx
+++ b/apps/sim/components/emcn/icons/zoom-in.tsx
@@ -19,28 +19,28 @@ export function ZoomIn(props: SVGProps<SVGSVGElement>) {
        cy='5'
        r='3.5'
        stroke='currentColor'
-        strokeWidth='1.5'
+        strokeWidth='1'
        strokeLinecap='round'
        strokeLinejoin='round'
      />
      <path
        d='M5 3.5V6.5'
        stroke='currentColor'
-        strokeWidth='1.5'
+        strokeWidth='1'
        strokeLinecap='round'
        strokeLinejoin='round'
      />
      <path
        d='M3.5 5H6.5'
        stroke='currentColor'
-        strokeWidth='1.5'
+        strokeWidth='1'
        strokeLinecap='round'
        strokeLinejoin='round'
      />
      <path
        d='M7.5 7.5L10.5 10.5'
        stroke='currentColor'
-        strokeWidth='1.5'
+        strokeWidth='1'
        strokeLinecap='round'
        strokeLinejoin='round'
      />
--- a/apps/sim/components/emcn/icons/zoom-out.tsx
+++ b/apps/sim/components/emcn/icons/zoom-out.tsx
@@ -19,21 +19,21 @@ export function ZoomOut(props: SVGProps<SVGSVGElement>) {
        cy='5'
        r='3.5'
        stroke='currentColor'
-        strokeWidth='1.5'
+        strokeWidth='1'
        strokeLinecap='round'
        strokeLinejoin='round'
      />
      <path
        d='M3.5 5H6.5'
        stroke='currentColor'
-        strokeWidth='1.5'
+        strokeWidth='1'
        strokeLinecap='round'
        strokeLinejoin='round'
      />
      <path
        d='M7.5 7.5L10.5 10.5'
        stroke='currentColor'
-        strokeWidth='1.5'
+        strokeWidth='1'
        strokeLinecap='round'
        strokeLinejoin='round'
      />