Skip to content

Sidebar: show a drop indicator while dragging blocks/folders #37

Description

@ApocDev

When dragging a block or folder in the sidebar there is no visual cue showing where it will land, so you drop blind and often have to retry until it goes where you wanted.

Why

The sidebar uses native HTML5 drag/drop (draggable + onDragOver/onDrop in app/src/routes/block.tsx). onDragOver only calls preventDefault() to allow the drop; nothing renders to show the target position. The drop itself works — dropBlockBeforesetBlockOrderFn and dropFolderBeforesetGroupOrderFn reorder and persist — but the user gets no feedback about where "before this row" actually is until after they let go.

Scope

  • While a drag is in progress, show a drop indicator at the computed insert position — e.g. a horizontal line between rows where the item would land, and/or a highlight on the folder it would drop into.
  • Track the current hover target in state from onDragOver (which row/folder, and before/after) and render the cue; clear it on dragleave/drop/dragend.
  • Cover both cases the sidebar already supports: reordering blocks (and moving a block into a folder via groupId) and reordering folders.
  • Visual only — no change to the existing drop/persist logic.

Part of #33. The same affordance will matter even more once nested folders (#8) land, and the row-reorder work in #6 should get the matching cue inside the block editor.

Metadata

Metadata

Assignees

No one assigned

    Labels

    area: webWeb UI (React/TanStack/vite-plus)enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions