feat(resources): multiselect on tables and knowledge, spring-loaded folders (#6721)

* feat(resources): multiselect on tables and knowledge, spring-loaded folders

Tables and Knowledge lists get the checkbox multiselect Files already had —
selection, shift-click ranges, select-all, and a shared bulk action bar for
move and delete.

Dragging a resource onto a folder row and resting there now opens that folder,
so nested filing is one gesture (macOS Finder spring-loading). Works on Files,
Tables, and Knowledge.

Selection, the action bar, the drag payload, the drag ghost, and drag teardown
are extracted to shared modules; Files migrates onto them rather than keeping
its own copies.

Bulk move and delete land as single authorized operations that take folders and
resources together, so a mixed selection commits once instead of fanning out.

Fixes two latent UI bugs: the drop-target outline referenced --accent, an
HSL-channel token only valid via hsl(), so it silently rendered as currentColor;
and rows painted hover and selected with the same surface token, making the two
states indistinguishable.

* chore(audits): re-record route ratchet after merging staging

* fix(bulk): reject a move target inside the moving subtree and report contained folders deterministically

* improvement(resources): neutral drop affordance, longer spring delay, and a body drop target

* fix(resources): drop into the open folder on Files, return on an unused spring-open, and guard bulk caps

* fix(drag): end a drag on pointer resume instead of an idle timer

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

* fix(resources): tint the list region on drop instead of ringing it

* refactor(folders): share the spring-navigation lifecycle so Files returns too

* fix(breadcrumbs): accept a drag on the open-folder crumb too

* fix(files): keep the view in a spring-opened folder when an OS upload lands there

Author: waleedlatif1

apps/sim/app/api/knowledge/bulk-delete/route.ts

@@ -0,0 +1,30 @@
+import { bulkDeleteKnowledgeItemsContract } from '@/lib/api/contracts/knowledge'
+import {
+  defineInternalJsonRoute,
+  internalRateLimits,
+  internalSessionAuth,
+} from '@/lib/api/server/routes'
+import { internalKnowledgeErrorPolicies } from '@/lib/knowledge/api/route-policies'
+import { bulkDeleteKnowledgeItems } from '@/lib/knowledge/application/bulk'
+import { knowledgeOperations } from '@/lib/knowledge/application/operations'
+
+export const POST = defineInternalJsonRoute({
+  contract: bulkDeleteKnowledgeItemsContract,
+  auth: internalSessionAuth,
+  operation: knowledgeOperations.bulkDeleteItems,
+  rateLimit: internalRateLimits.none({
+    reason: 'Matches the unlimited single-base and single-folder deletes it batches',
+  }),
+  errorPolicy: internalKnowledgeErrorPolicies.bulkDelete,
+  mapInput: ({ body }) => ({
+    assertedWorkspaceId: body.workspaceId,
+    knowledgeBaseIds: body.knowledgeBaseIds,
+    folderIds: body.folderIds,
+    source: 'ui',
+  }),
+  useCase: bulkDeleteKnowledgeItems,
+  present: ({ deleted, skipped, notFound, failed, deletedItems }) => ({
+    success: true as const,
+    data: { deleted, skipped, notFound, failed, deletedItems },
+  }),
+})

apps/sim/app/api/knowledge/bulk-move/route.ts

@@ -0,0 +1,31 @@
+import { bulkMoveKnowledgeItemsContract } from '@/lib/api/contracts/knowledge'
+import {
+  defineInternalJsonRoute,
+  internalRateLimits,
+  internalSessionAuth,
+} from '@/lib/api/server/routes'
+import { internalKnowledgeErrorPolicies } from '@/lib/knowledge/api/route-policies'
+import { bulkMoveKnowledgeItems } from '@/lib/knowledge/application/bulk'
+import { knowledgeOperations } from '@/lib/knowledge/application/operations'
+
+export const POST = defineInternalJsonRoute({
+  contract: bulkMoveKnowledgeItemsContract,
+  auth: internalSessionAuth,
+  operation: knowledgeOperations.bulkMoveItems,
+  rateLimit: internalRateLimits.none({
+    reason: 'Matches the unlimited single-base and single-folder moves it batches',
+  }),
+  errorPolicy: internalKnowledgeErrorPolicies.bulkMove,
+  mapInput: ({ body }) => ({
+    assertedWorkspaceId: body.workspaceId,
+    knowledgeBaseIds: body.knowledgeBaseIds,
+    folderIds: body.folderIds,
+    targetFolderId: body.targetFolderId,
+    source: 'ui',
+  }),
+  useCase: bulkMoveKnowledgeItems,
+  present: ({ moved, skipped, notFound, failed }) => ({
+    success: true as const,
+    data: { moved, skipped, notFound, failed },
+  }),
+})

apps/sim/app/api/table/bulk-delete/route.ts

@@ -0,0 +1,29 @@
+import { bulkDeleteTablesContract } from '@/lib/api/contracts/tables'
+import {
+  defineInternalJsonRoute,
+  internalRateLimits,
+  internalSessionAuth,
+} from '@/lib/api/server/routes'
+import { internalTableErrorPolicies } from '@/lib/table/api'
+import { bulkDeleteTables } from '@/lib/table/application/bulk'
+import { tableOperations } from '@/lib/table/application/operations'
+
+export const POST = defineInternalJsonRoute({
+  contract: bulkDeleteTablesContract,
+  auth: internalSessionAuth,
+  operation: tableOperations.bulkDelete,
+  rateLimit: internalRateLimits.none({
+    reason: 'Matches the unlimited single-table and single-folder deletes it batches',
+  }),
+  errorPolicy: internalTableErrorPolicies.bulk,
+  mapInput: ({ body }) => ({
+    assertedWorkspaceId: body.workspaceId,
+    tableIds: body.tableIds,
+    folderIds: body.folderIds,
+  }),
+  useCase: bulkDeleteTables,
+  present: ({ deleted, skipped, notFound, failed, deletedItems }) => ({
+    success: true as const,
+    data: { deleted, skipped, notFound, failed, deletedItems },
+  }),
+})

apps/sim/app/api/table/bulk-move/route.ts

@@ -0,0 +1,30 @@
+import { bulkMoveTablesContract } from '@/lib/api/contracts/tables'
+import {
+  defineInternalJsonRoute,
+  internalRateLimits,
+  internalSessionAuth,
+} from '@/lib/api/server/routes'
+import { internalTableErrorPolicies } from '@/lib/table/api'
+import { bulkMoveTables } from '@/lib/table/application/bulk'
+import { tableOperations } from '@/lib/table/application/operations'
+
+export const POST = defineInternalJsonRoute({
+  contract: bulkMoveTablesContract,
+  auth: internalSessionAuth,
+  operation: tableOperations.bulkMove,
+  rateLimit: internalRateLimits.none({
+    reason: 'Matches the unlimited single-table and single-folder moves it batches',
+  }),
+  errorPolicy: internalTableErrorPolicies.bulk,
+  mapInput: ({ body }) => ({
+    assertedWorkspaceId: body.workspaceId,
+    tableIds: body.tableIds,
+    folderIds: body.folderIds,
+    targetFolderId: body.targetFolderId,
+  }),
+  useCase: bulkMoveTables,
+  present: ({ moved, skipped, notFound, failed }) => ({
+    success: true as const,
+    data: { moved, skipped, notFound, failed },
+  }),
+})

apps/sim/app/workspace/[workspaceId]/components/folders/drag-payload.ts

@@ -0,0 +1,41 @@
+/**
+ * The row ids a drag carries, written to and read from `dataTransfer` as JSON under a
+ * private MIME type.
+ *
+ * The payload has to live on the event rather than only in component state: a drag survives
+ * the source row unmounting — spring-loading navigates away mid-drag — and it can be released
+ * over a different mount of the same page.
+ *
+ * Each surface passes its own MIME so a drag from one list is never mistaken for a drag from
+ * another, and so an unrelated OS drag is ignored outright.
+ */
+
+/** Writes `rowIds` under `mime`, plus a plain-text fallback for drops outside the app. */
+export function writeRowDragPayload(
+  dataTransfer: DataTransfer,
+  mime: string,
+  rowIds: string[]
+): void {
+  dataTransfer.setData(mime, JSON.stringify(rowIds))
+  dataTransfer.setData('text/plain', rowIds.join(','))
+}
+
+/**
+ * Reads the row ids back, returning `null` when the payload is absent (a foreign drag) or
+ * malformed (another writer on the same MIME) rather than throwing mid-drop. Callers fall back
+ * to their in-memory source for drags that never round-tripped through `dataTransfer`.
+ */
+export function readRowDragPayload(dataTransfer: DataTransfer, mime: string): string[] | null {
+  const raw = dataTransfer.getData(mime)
+  if (!raw) return null
+  try {
+    const parsed: unknown = JSON.parse(raw)
+    if (!Array.isArray(parsed)) return null
+    const rowIds = parsed.filter(
+      (value): value is string => typeof value === 'string' && value.length > 0
+    )
+    return rowIds.length > 0 ? rowIds : null
+  } catch {
+    return null
+  }
+}

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/folder-context-menu.tsx

@@ -35,9 +35,8 @@ interface FolderContextMenuProps {
  * Row context menu for a folder, shared by the resource lists built on the generic folder
  * engine — Knowledge and Tables — so a folder offers the same actions on both.
  *
- * Files is deliberately not a consumer: its rows carry multi-select and bulk actions, so a
- * folder there routes through `FileRowContextMenu` alongside the file rows it is selected
- * with. Converging the two is follow-up work.
+ * Files is deliberately not a consumer: a folder there routes through `FileRowContextMenu`
+ * alongside the file rows it is selected with. Converging the two is follow-up work.
  *
  * Mirrors the resource-row menus (`KnowledgeBaseContextMenu`, `FileRowContextMenu`): a
  * `DropdownMenu` anchored to a one-pixel fixed trigger at the cursor, non-modal so the list

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

@@ -26,3 +26,23 @@ export function parseFolderedRowId(rowId: string): ParsedFolderedRowId {
   }
   return { kind: 'resource', id: rowId }
 }
+
+/**
+ * Splits a selection of foldered row ids into the two id lists every bulk operation takes.
+ *
+ * A foldered list holds folder rows and resource rows in one selection (see
+ * {@link folderRowId}), so every consumer needs this same split before it can call an API.
+ */
+export function splitFolderedRowIds(rowIds: Iterable<string>): {
+  folderIds: string[]
+  resourceIds: string[]
+} {
+  const folderIds: string[] = []
+  const resourceIds: string[] = []
+  for (const rowId of rowIds) {
+    const parsed = parseFolderedRowId(rowId)
+    if (parsed.kind === 'folder') folderIds.push(parsed.id)
+    else resourceIds.push(parsed.id)
+  }
+  return { folderIds, resourceIds }
+}

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/index.ts

@@ -1,20 +1,22 @@
+export { readRowDragPayload, writeRowDragPayload } from './drag-payload'
 export type { BreadcrumbFolder, FolderBreadcrumbItemsOptions } from './folder-breadcrumbs'
 export { breadcrumbFolderChain, folderBreadcrumbItems } from './folder-breadcrumbs'
 export { FolderContextMenu } from './folder-context-menu'
 export { nextUntitledFolderName } from './folder-naming'
 export type { FolderRowOptions } from './folder-row'
 export { folderRow } from './folder-row'
 export type { FolderedRowKind, ParsedFolderedRowId } from './folder-row-id'
-export { folderRowId, parseFolderedRowId } from './folder-row-id'
+export { folderRowId, parseFolderedRowId, splitFolderedRowIds } from './folder-row-id'
 export type {
   FolderedHeaderResourceType,
   FolderedResourceHeaderMeta,
 } from './foldered-resources'
 export { FOLDERED_RESOURCE_HEADERS, folderedResourceListHref } from './foldered-resources'
-export type { BuildMoveOptionsParams, MoveOptionNode } from './move-options'
+export type { BuildMoveOptionsParams, MoveOptionFolder, MoveOptionNode } from './move-options'
 export {
   buildDescendantIndex,
   buildMoveOptions,
+  buildMoveOptionsExcludingSubtrees,
   parseMoveOptionValue,
   ROOT_MOVE_OPTION_VALUE,
   renderMoveOption,
@@ -23,9 +25,20 @@ export {
 export type { SortableResource } from './resource-sort'
 export { sortResources } from './resource-sort'
 export { folderNavParsers, folderNavUrlKeys } from './search-params'
+export { useDragTeardown } from './use-drag-teardown'
 export type { FolderAncestors, UseFolderAncestorsOptions } from './use-folder-ancestors'
 export { useFolderAncestors } from './use-folder-ancestors'
 export type { FolderNavigation, UseFolderNavigationOptions } from './use-folder-navigation'
 export { useFolderNavigation } from './use-folder-navigation'
-export type { UseFolderRowDragDropOptions } from './use-folder-row-drag-drop'
+export type { FolderedRowMove, UseFolderRowDragDropOptions } from './use-folder-row-drag-drop'
 export { useFolderRowDragDrop } from './use-folder-row-drag-drop'
+export type { RowDragGhost } from './use-row-drag-ghost'
+export { useRowDragGhost } from './use-row-drag-ghost'
+export type {
+  SpringLoadedFolder,
+  SpringOpenOptions,
+  UseSpringLoadedFolderOptions,
+} from './use-spring-loaded-folder'
+export { SPRING_LOAD_DELAY_MS, useSpringLoadedFolder } from './use-spring-loaded-folder'
+export type { SpringNavigation, UseSpringNavigationOptions } from './use-spring-navigation'
+export { useSpringNavigation } from './use-spring-navigation'