Workspace has no visual feedback when the user is dragging a design from one folder to another — drag is initiated on the card, but the destination folder chip does not highlight to show "this is where the design will land" #274

New issue

Closed

opened 2026-10-04 03:41:22 +00:00 by Mark · 1 comment

Mark commented

2026-10-04 03:41:22 +00:00

Owner

Finding

src/components/gallery/FolderNav.tsx's folder chips have onDragOver and onDrop handlers. Per the snippet, the chips have a visual state for isDragOver (per isDragOver ? 'rgba(230,169,72,0.2)' : ...).

grep -n 'isDragOver' src/components/gallery/FolderNav.tsx returns matches; the visual is wired.

But:

The drag visual only applies when the drag is OVER the folder chip
The user has to drag and find the folder
If the user drags past the folder, the visual disappears
If the user drops outside any folder chip, the design stays where it was (no error feedback)

The polish move is:

Highlight the folder chip on drag-over (already in place).
Show a "drop here" visual when the drag is over a valid drop target.
Show a "can't drop here" visual when over an invalid area.
Show a toast or visual confirmation when the drop succeeds.

Where

FolderNav: src/components/gallery/FolderNav.tsx (drag-over visual)
DesignCard: src/components/gallery/DesignCard.tsx (drag start)
Gallery: src/pages/Gallery.tsx (drag state, drop handler)
Drop zones: only the folder chips; no "all designs" zone for "remove from folder"

Suggested fix shape

Folder chip: already highlights on drag-over. Polish: add a "Drop to add to {folderName}" tooltip on drag-over.
Gallery background: when dragging anywhere outside a folder chip, the gallery shows a "drop here to remove from folder" overlay. This is the "unfiled" zone.
Toast on drop: "Moved 'design.pes' to {folderName}" or "Removed from folder" (per the drop target).
Error state: if the user tries to drop on a non-drop zone, show a brief red border on the gallery.
Drag preview: when dragging a card, the cursor shows a translucent preview of the card. e.dataTransfer.setDragImage(cardElement, 0, 0).

Severity

Low. The user can drag and see the folder highlight. The polish moves are minor.

Discovered by

Gap analysis (2026-10-02) of gallery drag-and-drop.

The folder drag-and-drop reorder (per #235) is a separate concern.
The "remove from folder" workflow has no entry point in the current UI.
Figma/Notion have rich drag-and-drop visual feedback; the gallery is currently minimal.

## Finding `src/components/gallery/FolderNav.tsx`'s folder chips have `onDragOver` and `onDrop` handlers. Per the snippet, the chips have a visual state for `isDragOver` (per `isDragOver ? 'rgba(230,169,72,0.2)' : ...`). `grep -n 'isDragOver' src/components/gallery/FolderNav.tsx` returns matches; the visual is wired. But: - The drag visual only applies when the drag is OVER the folder chip - The user has to drag and find the folder - If the user drags past the folder, the visual disappears - If the user drops outside any folder chip, the design stays where it was (no error feedback) The polish move is: 1. Highlight the folder chip on drag-over (already in place). 2. Show a "drop here" visual when the drag is over a valid drop target. 3. Show a "can't drop here" visual when over an invalid area. 4. Show a toast or visual confirmation when the drop succeeds. ## Where - FolderNav: `src/components/gallery/FolderNav.tsx` (drag-over visual) - DesignCard: `src/components/gallery/DesignCard.tsx` (drag start) - Gallery: `src/pages/Gallery.tsx` (drag state, drop handler) - Drop zones: only the folder chips; no "all designs" zone for "remove from folder" ## Suggested fix shape 1. **Folder chip**: already highlights on drag-over. Polish: add a "Drop to add to {folderName}" tooltip on drag-over. 2. **Gallery background**: when dragging anywhere outside a folder chip, the gallery shows a "drop here to remove from folder" overlay. This is the "unfiled" zone. 3. **Toast on drop**: "Moved 'design.pes' to {folderName}" or "Removed from folder" (per the drop target). 4. **Error state**: if the user tries to drop on a non-drop zone, show a brief red border on the gallery. 5. **Drag preview**: when dragging a card, the cursor shows a translucent preview of the card. `e.dataTransfer.setDragImage(cardElement, 0, 0)`. ## Severity Low. The user can drag and see the folder highlight. The polish moves are minor. ## Discovered by Gap analysis (2026-10-02) of gallery drag-and-drop. ## Related - The folder drag-and-drop reorder (per #235) is a separate concern. - The "remove from folder" workflow has no entry point in the current UI. - Figma/Notion have rich drag-and-drop visual feedback; the gallery is currently minimal.

Mark added the

feature-request

triage-approved

labels

2026-10-04 03:41:22 +00:00

Mark referenced this issue from a commit

2026-10-04 13:53:12 +00:00

fix(#274): gallery drag-and-drop visual feedback

Mark commented

2026-10-04 13:53:19 +00:00

Author

Owner

Shipped fix(#274) at 863e484 on origin/main.

Gallery drag-and-drop now gives the user visual feedback at every stage:

FolderNav chip replaces the static folder name with Drop to add to {folder} while a design-card drag hovers it (was: highlight only, no textual cue)
Gallery surface shows a full-surface Drop here to remove from {folder} overlay when the card drag is anywhere outside a chip AND the active folder is custom. Dropping on the gallery background moves the design to Unsorted and surfaces the existing Moved to Unsorted toast
Gallery surface shows a red border flash + error toast when a card drops on the background while viewing a default folder (was: silent no-op)
DesignCard uses setDragImage so the OS-rendered ghost matches the card itself (was: unstyled browser ghost)

1496 tests pass (117 test files). New regression coverage in src/components/gallery/issue-274-drag-feedback.test.tsx pins all four behaviors + the active-folder guard.

Shipped fix(#274) at 863e484 on origin/main. Gallery drag-and-drop now gives the user visual feedback at every stage: - FolderNav chip replaces the static folder name with **Drop to add to {folder}** while a design-card drag hovers it (was: highlight only, no textual cue) - Gallery surface shows a full-surface **Drop here to remove from {folder}** overlay when the card drag is anywhere outside a chip AND the active folder is custom. Dropping on the gallery background moves the design to Unsorted and surfaces the existing **Moved to Unsorted** toast - Gallery surface shows a red border flash + **error toast** when a card drops on the background while viewing a default folder (was: silent no-op) - DesignCard uses `setDragImage` so the OS-rendered ghost matches the card itself (was: unstyled browser ghost) 1496 tests pass (117 test files). New regression coverage in `src/components/gallery/issue-274-drag-feedback.test.tsx` pins all four behaviors + the active-folder guard.

Mark closed this issue

2026-10-04 13:53:24 +00:00