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.

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-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/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,18 @@ 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'

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

@@ -7,7 +7,6 @@ import {
   DropdownMenuSubTrigger,
 } from '@sim/emcn'
 import { Folder } from '@sim/emcn/icons'
-import type { WorkflowFolder } from '@/stores/folders/types'
 
 export interface MoveOptionNode {
   value: string
@@ -26,8 +25,16 @@ export function parseMoveOptionValue(optionValue: string): string | null {
   return optionValue === ROOT_MOVE_OPTION_VALUE ? null : optionValue
 }
 
+/** The folder fields the move-option builders actually read, so any folder tree can use them. */
+export interface MoveOptionFolder {
+  id: string
+  name: string
+  parentId: string | null
+  sortOrder: number
+}
+
 export interface BuildMoveOptionsParams {
-  folders: WorkflowFolder[]
+  folders: readonly MoveOptionFolder[]
   rootLabel: string
   /**
    * Folder ids that must not appear as destinations — the folder being moved and every
@@ -53,7 +60,7 @@ export function buildMoveOptions({
   rootLabel,
   excludedFolderIds,
 }: BuildMoveOptionsParams): MoveOptionNode[] {
-  const childrenByParent = new Map<string | null, WorkflowFolder[]>()
+  const childrenByParent = new Map<string | null, MoveOptionFolder[]>()
   for (const folder of folders) {
     if (excludedFolderIds?.has(folder.id)) continue
     const parentId = folder.parentId ?? null
@@ -80,7 +87,9 @@ export function buildMoveOptions({
  * candidate instead of re-walking the tree. `seen` terminates a cycle, which the DB permits
  * between constraint checks.
  */
-export function buildDescendantIndex(folders: WorkflowFolder[]): Map<string, Set<string>> {
+export function buildDescendantIndex(
+  folders: readonly { id: string; parentId: string | null }[]
+): Map<string, Set<string>> {
   const childrenByParent = new Map<string, string[]>()
   for (const folder of folders) {
     if (!folder.parentId) continue
@@ -167,3 +176,33 @@ export function renderMoveOptions(
     </>
   )
 }
+
+/**
+ * Move destinations for a selection, with every selected folder and its subtree excluded — a
+ * folder cannot be filed into itself or anything beneath it.
+ *
+ * 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.
+ */
+export function buildMoveOptionsExcludingSubtrees({
+  folders,
+  rootLabel,
+  excludeFolderIds,
+  descendantsByFolderId,
+}: {
+  folders: readonly MoveOptionFolder[]
+  rootLabel: string
+  excludeFolderIds: readonly string[]
+  descendantsByFolderId: Map<string, Set<string>>
+}): MoveOptionNode[] {
+  if (excludeFolderIds.length === 0) return buildMoveOptions({ folders, rootLabel })
+
+  const excludedFolderIds = new Set<string>(excludeFolderIds)
+  for (const folderId of excludeFolderIds) {
+    for (const descendantId of descendantsByFolderId.get(folderId) ?? []) {
+      excludedFolderIds.add(descendantId)
+    }
+  }
+  return buildMoveOptions({ folders, rootLabel, excludedFolderIds })
+}

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

@@ -0,0 +1,33 @@
+'use client'
+
+import { useEffect, useRef } from 'react'
+
+/**
+ * Runs a drag's teardown wherever the drag actually ends.
+ *
+ * `dragend` fires on the SOURCE ROW, which is not guaranteed to still exist: spring-loading
+ * navigates into another folder mid-drag, which unmounts it. A row-level handler would then
+ * never run, leaving the drag ghost stuck on the page, every row frozen at drag opacity, and a
+ * stale source id that makes the next drop resolve against rows the user never picked up.
+ *
+ * Listening on `window` catches the event wherever it lands — including a drag cancelled with
+ * Escape or released outside the window, which never reaches a row at all.
+ *
+ * `teardown` is read through a ref and the listeners bind once, deliberately. Depending on the
+ * callback would re-run this effect on every render, and any cleanup wired into it would then
+ * abort drags that are still in progress — a bug this exact hook already shipped once.
+ */
+export function useDragTeardown(teardown: () => void): void {
+  const teardownRef = useRef(teardown)
+  teardownRef.current = teardown
+
+  useEffect(() => {
+    const handleDragEnd = () => teardownRef.current()
+    window.addEventListener('dragend', handleDragEnd)
+    window.addEventListener('drop', handleDragEnd)
+    return () => {
+      window.removeEventListener('dragend', handleDragEnd)
+      window.removeEventListener('drop', handleDragEnd)
+    }
+  }, [])
+}