feat(resources): drag onto breadcrumbs to move back up, and round the drop ring

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/components/folders/folder-breadcrumbs.ts

@@ -91,14 +91,15 @@ export function folderBreadcrumbItems(options: FolderBreadcrumbItemsOptions): Br
   const trailing = options.trailing ?? NO_TRAILING_CRUMBS
 
   const items: BreadcrumbItem[] = [
-    { label: rootLabel, icon: rootIcon, onClick: () => onNavigate(null) },
+    { label: rootLabel, icon: rootIcon, folderId: null, onClick: () => onNavigate(null) },
   ]
 
   breadcrumbs.forEach((folder, index) => {
     /** Where you already are — and on a detail page that is a trailing crumb, not a folder. */
     const isOpenFolder = trailing.length === 0 && index === breadcrumbs.length - 1
     items.push({
       label: folder.name,
+      folderId: folder.id,
       onClick: isOpenFolder ? undefined : () => onNavigate(folder.id),
       dropdownItems:
         isOpenFolder && options.currentFolderActions?.length

apps/sim/app/workspace/[workspaceId]/components/folders/folders.test.ts

@@ -11,10 +11,12 @@ import { nextUntitledFolderName } from '@/app/workspace/[workspaceId]/components
 import {
   folderRowId,
   parseFolderedRowId,
+  splitFolderedRowIds,
 } from '@/app/workspace/[workspaceId]/components/folders/folder-row-id'
 import {
   buildDescendantIndex,
   buildMoveOptions,
+  buildMoveOptionsExcludingSubtrees,
   parseMoveOptionValue,
   ROOT_MOVE_OPTION_VALUE,
 } from '@/app/workspace/[workspaceId]/components/folders/move-options'
@@ -331,3 +333,114 @@ describe('folderAncestorChain', () => {
     expect(folderAncestorChain('a', (id) => folders[id]).map((f) => f.id)).toEqual(['b', 'a'])
   })
 })
+
+describe('splitFolderedRowIds', () => {
+  it('separates folder rows from resource rows', () => {
+    const { folderIds, resourceIds } = splitFolderedRowIds([
+      folderRowId('f-1'),
+      'res-1',
+      folderRowId('f-2'),
+      'res-2',
+    ])
+
+    expect(folderIds).toEqual(['f-1', 'f-2'])
+    expect(resourceIds).toEqual(['res-1', 'res-2'])
+  })
+
+  it('returns empty lists for an empty selection', () => {
+    expect(splitFolderedRowIds([])).toEqual({ folderIds: [], resourceIds: [] })
+  })
+
+  it('accepts a Set, which is how a selection is actually held', () => {
+    const { folderIds, resourceIds } = splitFolderedRowIds(new Set([folderRowId('f-1'), 'res-1']))
+    expect(folderIds).toEqual(['f-1'])
+    expect(resourceIds).toEqual(['res-1'])
+  })
+})
+
+describe('buildMoveOptionsExcludingSubtrees', () => {
+  /** `a` holds `a1`, which holds `a1x`; `b` is an unrelated sibling. */
+  const folders = [makeFolder('a'), makeFolder('a1', 'a'), makeFolder('a1x', 'a1'), makeFolder('b')]
+  const descendantsByFolderId = buildDescendantIndex(folders)
+  const valuesOf = (nodes: ReturnType<typeof buildMoveOptions>): string[] =>
+    nodes.flatMap((node) => [node.value, ...valuesOf(node.children)])
+
+  it('offers every folder when nothing is excluded', () => {
+    const options = buildMoveOptionsExcludingSubtrees({
+      folders,
+      rootLabel: 'Root',
+      excludeFolderIds: [],
+      descendantsByFolderId,
+    })
+    expect(valuesOf(options)).toEqual([ROOT_MOVE_OPTION_VALUE, 'a', 'a1', 'a1x', 'b'])
+  })
+
+  it('excludes a moving folder and its whole subtree, never offering a cycle', () => {
+    // The invariant this helper exists to hold: a folder can never be filed into itself or
+    // anything beneath it, at any depth.
+    const options = buildMoveOptionsExcludingSubtrees({
+      folders,
+      rootLabel: 'Root',
+      excludeFolderIds: ['a'],
+      descendantsByFolderId,
+    })
+    expect(valuesOf(options)).toEqual([ROOT_MOVE_OPTION_VALUE, 'b'])
+  })
+
+  it('excludes the union of several selected subtrees', () => {
+    const options = buildMoveOptionsExcludingSubtrees({
+      folders,
+      rootLabel: 'Root',
+      excludeFolderIds: ['a1', 'b'],
+      descendantsByFolderId,
+    })
+    expect(valuesOf(options)).toEqual([ROOT_MOVE_OPTION_VALUE, 'a'])
+  })
+
+  it('always keeps the workspace root as a destination', () => {
+    const options = buildMoveOptionsExcludingSubtrees({
+      folders,
+      rootLabel: 'Root',
+      excludeFolderIds: ['a', 'b'],
+      descendantsByFolderId,
+    })
+    expect(valuesOf(options)).toEqual([ROOT_MOVE_OPTION_VALUE])
+  })
+})
+
+describe('folderBreadcrumbItems drag destinations', () => {
+  const chain = [makeFolder('a'), makeFolder('a1', 'a')]
+
+  it('names the folder each crumb points at, so the header can accept a drop on it', () => {
+    const items = folderBreadcrumbItems({
+      rootLabel: 'Files',
+      breadcrumbs: chain,
+      onNavigate: vi.fn(),
+    })
+
+    expect(items.map((item) => item.folderId)).toEqual([null, 'a', 'a1'])
+  })
+
+  it('leaves a trailing crumb without a folder id, so it stays inert', () => {
+    const items = folderBreadcrumbItems({
+      rootLabel: 'Files',
+      breadcrumbs: chain,
+      onNavigate: vi.fn(),
+      trailing: [{ label: 'report.md', terminal: true }],
+    })
+
+    expect(items.at(-1)).toMatchObject({ label: 'report.md' })
+    expect(items.at(-1)?.folderId).toBeUndefined()
+  })
+
+  it('gives the root crumb null rather than omitting it — the root is a real destination', () => {
+    const items = folderBreadcrumbItems({
+      rootLabel: 'Files',
+      breadcrumbs: [],
+      onNavigate: vi.fn(),
+    })
+
+    expect(items).toHaveLength(1)
+    expect(items[0]).toHaveProperty('folderId', null)
+  })
+})

apps/sim/app/workspace/[workspaceId]/components/folders/move-options.tsx

@@ -184,6 +184,11 @@ export function renderMoveOptions(
  * Shared because that exclusion is a correctness invariant, not a preference: hand-copying it
  * per surface is how one list eventually offers a cyclic destination. Covers the single-folder
  * case too — pass a one-element array.
+ *
+ * Expanding each selection to its descendants is deliberately belt-and-braces: {@link
+ * buildMoveOptions} descends from the root, so an excluded folder already takes its subtree out
+ * of the walk. The explicit expansion keeps the invariant true of the exclusion set itself, so
+ * it survives that walk ever being replaced by a flat render.
  */
 export function buildMoveOptionsExcludingSubtrees({
   folders,

apps/sim/app/workspace/[workspaceId]/components/folders/use-folder-row-drag-drop.ts

@@ -98,6 +98,7 @@ export function useFolderRowDragDrop({
 }: UseFolderRowDragDropOptions): RowDragDropConfig {
   const [activeDropTargetId, setActiveDropTargetId] = useState<string | null>(null)
   const [isBodyDropActive, setIsBodyDropActive] = useState(false)
+  const [activeBreadcrumbIndex, setActiveBreadcrumbIndex] = useState<number | null>(null)
   const [draggedRowIds, setDraggedRowIds] = useState<Set<string>>(() => EMPTY_ROW_IDS)
   /**
    * The in-flight drag source, mirrored outside React state because `onDragOver` fires far
@@ -172,6 +173,7 @@ export function useFolderRowDragDrop({
     setDraggedRowIds(EMPTY_ROW_IDS)
     setActiveDropTargetId(null)
     setIsBodyDropActive(false)
+    setActiveBreadcrumbIndex(null)
   }, [dragGhost, springLoad])
 
   useDragTeardown(endDrag)
@@ -289,6 +291,7 @@ export function useFolderRowDragDrop({
            * clearing here the row and the body would both render as the target at once.
            */
           setIsBodyDropActive(false)
+          setActiveBreadcrumbIndex(null)
           /**
            * Armed on the same condition as the highlight, so a folder only springs open where a
            * drop was already possible. A folder the drag cannot legally enter never opens.
@@ -327,6 +330,48 @@ export function useFolderRowDragDrop({
         if (move) optionsRef.current.onMoveRows(move, target.id)
       },
       onDragEnd: endDrag,
+      /**
+       * The breadcrumb is how a drag walks back UP. Spring-loading only ever goes deeper, so
+       * without this a drag that entered a folder can only leave it by being abandoned.
+       * Hovering a crumb navigates to it on the same timer a folder row uses, and releasing on
+       * one files the drag there directly.
+       */
+      breadcrumb: {
+        activeIndex: activeBreadcrumbIndex,
+        onDragOver: (e: DragEvent<HTMLElement>, folderId: string | null, index: number) => {
+          const sourceRowIds = draggedRowIdsRef.current
+          const canDrop =
+            sourceRowIds.length > 0 && resolveMoveToFolder(folderId, sourceRowIds) !== null
+          /**
+           * Armed even when the drop itself would be a no-op — walking back through a crumb the
+           * rows already live in is exactly how a user returns to where they started, and
+           * refusing to navigate there would strand them.
+           */
+          if (sourceRowIds.length > 0 && folderId !== currentFolderIdRef.current) {
+            springLoad.arm(folderId)
+          }
+          setActiveBreadcrumbIndex(canDrop ? index : null)
+          setIsBodyDropActive(false)
+          if (!canDrop) return
+          e.preventDefault()
+          e.stopPropagation()
+          e.dataTransfer.dropEffect = 'move'
+        },
+        onDragLeave: (_e: DragEvent<HTMLElement>, index: number) => {
+          springLoad.disarm()
+          setActiveBreadcrumbIndex((current) => (current === index ? null : current))
+        },
+        onDrop: (e: DragEvent<HTMLElement>, folderId: string | null) => {
+          e.preventDefault()
+          e.stopPropagation()
+          const sourceRowIds =
+            readRowDragPayload(e.dataTransfer, DRAG_ROW_MIME) ?? draggedRowIdsRef.current
+          const move = sourceRowIds.length > 0 ? resolveMoveToFolder(folderId, sourceRowIds) : null
+          if (move) dropHandledRef.current = true
+          endDrag()
+          if (move) optionsRef.current.onMoveRows(move, folderId)
+        },
+      },
       body: {
         isActive: isBodyDropActive,
         onDragOver: (e: DragEvent<HTMLDivElement>) => {

apps/sim/app/workspace/[workspaceId]/components/folders/use-spring-loaded-folder.test.tsx

@@ -185,6 +185,31 @@ describe('useSpringLoadedFolder', () => {
     expect(onSpringOpen).toHaveBeenCalledTimes(2)
   })
 
+  it('springs to the workspace root, which a breadcrumb targets as null', () => {
+    // Walking a drag back UP goes through the breadcrumb, whose first crumb is the root — so
+    // null has to be a real destination here, distinct from "nothing armed".
+    const onSpringOpen = vi.fn()
+    const harness = renderSpringLoad(onSpringOpen)
+
+    act(() => harness.get().arm(null))
+    rest()
+
+    expect(onSpringOpen).toHaveBeenCalledExactlyOnceWith(null, { history: 'push' })
+  })
+
+  it('opens the root at most once per drag, like any other folder', () => {
+    const onSpringOpen = vi.fn()
+    const harness = renderSpringLoad(onSpringOpen)
+
+    act(() => harness.get().arm(null))
+    rest()
+    act(() => harness.get().arm('folder-a'))
+    act(() => harness.get().arm(null))
+    rest()
+
+    expect(onSpringOpen).toHaveBeenCalledTimes(1)
+  })
+
   it('never opens a folder after unmount', () => {
     const onSpringOpen = vi.fn()
     const harness = renderSpringLoad(onSpringOpen)

apps/sim/app/workspace/[workspaceId]/components/folders/use-spring-loaded-folder.ts

@@ -27,7 +27,7 @@ export interface UseSpringLoadedFolderOptions {
    * over while deciding where to drop; replacing every level would overwrite the entry they
    * were actually standing on, so Back would leave the page instead of returning to it.
    */
-  onSpringOpen: (folderId: string, options: SpringOpenOptions) => void
+  onSpringOpen: (folderId: string | null, options: SpringOpenOptions) => void
   delayMs?: number
 }
 
@@ -37,7 +37,7 @@ export interface SpringLoadedFolder {
    * fires continuously: re-arming the folder already being timed does not restart it, so the
    * countdown reflects how long the drag has actually rested there.
    */
-  arm: (folderId: string) => void
+  arm: (folderId: string | null) => void
   /** Cancels the pending open — the drag left the row, or the row stopped being a valid target. */
   disarm: () => void
   /** Cancels the pending open and forgets which folders already opened. Call when the drag ends. */
@@ -60,26 +60,29 @@ export function useSpringLoadedFolder({
   delayMs = SPRING_LOAD_DELAY_MS,
 }: UseSpringLoadedFolderOptions): SpringLoadedFolder {
   const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
-  /** Folder the timer is currently counting down for, so re-arming it is a no-op. */
-  const armedFolderIdRef = useRef<string | null>(null)
+  /**
+   * Folder the timer is counting down for, so re-arming it is a no-op. `undefined` means
+   * nothing is armed — `null` is a real destination here, the workspace root.
+   */
+  const armedFolderIdRef = useRef<string | null | undefined>(undefined)
   /** Folders already opened during this drag; each may only spring once. */
-  const openedFolderIdsRef = useRef<Set<string> | null>(null)
-  const openedFolderIds = (openedFolderIdsRef.current ??= new Set<string>())
+  const openedFolderIdsRef = useRef<Set<string | null> | null>(null)
+  const openedFolderIds = (openedFolderIdsRef.current ??= new Set<string | null>())
 
   const onSpringOpenRef = useRef(onSpringOpen)
   onSpringOpenRef.current = onSpringOpen
 
   const clearTimer = useCallback(() => {
     if (timerRef.current !== null) clearTimeout(timerRef.current)
     timerRef.current = null
-    armedFolderIdRef.current = null
+    armedFolderIdRef.current = undefined
   }, [])
 
   /** A drag can outlive the list that started it; never leave a timer pointing at a dead tree. */
   useEffect(() => clearTimer, [clearTimer])
 
   const arm = useCallback(
-    (folderId: string) => {
+    (folderId: string | null) => {
       if (armedFolderIdRef.current === folderId) return
 
       /**
@@ -93,7 +96,7 @@ export function useSpringLoadedFolder({
       armedFolderIdRef.current = folderId
       timerRef.current = setTimeout(() => {
         timerRef.current = null
-        armedFolderIdRef.current = null
+        armedFolderIdRef.current = undefined
         /** Read before the add: an empty set means nothing has opened in this drag yet. */
         const isFirstOpenOfDrag = openedFolderIds.size === 0
         openedFolderIds.add(folderId)

apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/index.ts

@@ -1,4 +1,5 @@
 export type {
+  BreadcrumbDropConfig,
   BreadcrumbEditing,
   BreadcrumbItem,
   DropdownOption,