Skip to content

[6.x] Drag assets and folders onto breadcrumbs - #15677

Merged
jackmcdade merged 4 commits into
15675-list-view-folder-dropfrom
15677-drag-to-breadcrumbs
Oct 22, 2026
Merged

jackmcdade merged 4 commits into
15675-list-view-folder-dropfrom
15677-drag-to-breadcrumbs

Conversation

@jaygeorge

@jaygeorge jaygeorge commented Oct 19, 2026 •

Copy link
Copy Markdown
Contributor

Depends on #15676.

Description of the Problem

You can drag assets deeper into subfolders, but there's no way to drag one back up. To move an asset into a parent folder, or back to the top, you have to use the Move action instead.

Moving something also didn't feel great. The item showed a spinner, waited on the server, then vanished when the listing refreshed. You could only drag one asset at a time.

What this PR Does

The breadcrumbs above the asset browser are now drop targets, so you can drag an asset or folder onto any parent folder, including "All".

  • The breadcrumb you're over gets the same blue ring as a folder in grid view. In list view, folders now get the ring around their icon and name too, instead of the faint row background.
  • Only items you're allowed to move light up a drop target. A folder can't be dropped onto itself, and anything already in the destination is skipped.
  • While searching, results can come from anywhere, so the current folder's breadcrumb accepts drops too.

Moving multiple assets

Dragging a selected asset now brings the rest of the selection with it. Dragging an unselected asset still moves just that one. Anything in the selection you can't move stays behind.

Drop animation

Dropping onto a folder plays a small macOS-style animation. The folder icon opens, the file drops in, and it snaps shut. When you move several files, it shows a fanned bundle of up to three thumbnails. In list view the same animation plays on the smaller folder icon, and a breadcrumb shows the open-folder icon while its folder is receiving files. The animation respects prefers-reduced-motion.

Optimistic UI

The UI responds straight away instead of waiting on the server:

  1. On drop, the items dim and the request starts immediately. The progress bar in the header runs as usual.
  2. After a short delay, the folder opens and the items fade out. Once they've faded, the remaining items slide into place.
  3. The folder stays open until the server finishes, so large moves don't look done before they are. Fast moves still keep it open long enough to see the file land.
  4. A "Moved to …" or "Moved 3 items to …" toast appears, the folder closes, and the listing refreshes.

If the move fails, the items come back, the folder closes, and an error toast explains why. In search results, moved items stay in the listing, dimmed, because the results span every folder. Concurrent drops are tracked separately, so dropping into two folders, or twice into the same one, animates correctly.

The move itself lives in Browser rather than in the grid and list components, so it carries on correctly if you switch views mid-move. Each move is settled when the refreshed listing comes back, and the selection is updated in that same render. Moved assets get new IDs, so the action's own replaceInSelections callback keeps them selected rather than them silently dropping out (which matters in the asset picker, where the selection is what you're picking).

Tests cover which items a drag carries and the move flow's timing: when the folder opens and closes, failures, and concurrent drops.

drag-to-breadcrumbs.mp4

How to Reproduce

  1. Go to Assets and open a folder at least two levels deep.
  2. Drag an asset onto "All" or a parent folder in the breadcrumbs. The folder icon animates and the asset moves there.
  3. Select a few assets and drag one of them onto a folder. They all move, and the folder shows a bundle of thumbnails.

jaygeorge and others added 2 commits October 22, 2026 14:44
- Parent breadcrumbs accept drops when the dragged item can be moved (and the current folder too while searching)
- Browser owns the move: spinners on the moving items, a "Moved to :folder" toast, and the progress bar until every move has settled
- Moved assets stay selected under their new IDs, via the action's replaceInSelections callback, applied with the refreshed listing
- Folders only accept movable items, can't be dropped onto themselves, and items already in the destination are skipped
- List view outlines the hovered folder's icon and name, like the breadcrumbs
Rendering the overlay on dragstart changed the DOM under the drag source, which made the browser cancel the drag. Only show it while moving, and dim the tile during the drag instead.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@jackmcdade
jackmcdade force-pushed the 15677-drag-to-breadcrumbs branch from 946b9c2 to 3caa1a7 Compare October 22, 2026 18:44
Dropping assets onto a folder or breadcrumb now animates straight away instead of waiting on the server. The items fade out and the grid closes up, while the destination folder opens, the files drop in, and it stays open until the move finishes before snapping shut. Breadcrumbs switch to the open folder icon while they receive a drop. If the move fails, the folder closes and the items come back.

Dragging a selected asset now moves the rest of the selection with it, and the folder animation shows a bundle of up to three of them.
@jackmcdade
jackmcdade merged commit b0c64f3 into 6.x Oct 22, 2026
65 checks passed
@jackmcdade
jackmcdade deleted the 15677-drag-to-breadcrumbs branch October 22, 2026 19:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants