Clue 401 drag tile to workspace toolbar button to delete

[lbondaryk]

This expanded a bit into an experiment in an accessible and touchpad friendly click-to-pick design for CLUE tiles that can be dropped on drop zones and of course on the trashcan in the toolbar.

[codecov]

Codecov Report

❌ Patch coverage is 34.11371% with 197 lines in your changes missing coverage. Please review.
✅ Project coverage is 66.59%. Comparing base (ea92ae1) to head (6f2ce75).

Files with missing lines	Patch %	Lines
src/components/document/document-content.tsx	11.18%	115 Missing and 12 partials ⚠️
src/components/picked-up-tile-ghost.tsx	28.57%	25 Missing and 5 partials ⚠️
src/components/tiles/tile-component.tsx	25.00%	19 Missing and 2 partials ⚠️
src/components/delete-button.tsx	75.51%	10 Missing and 2 partials ⚠️
src/components/toolbar.tsx	20.00%	4 Missing ⚠️
src/models/stores/ui.ts	84.61%	2 Missing ⚠️
src/components/document/tile-row.tsx	94.44%	1 Missing ⚠️

❗ There is a different number of reports uploaded between BASE (ea92ae1) and HEAD (6f2ce75). Click for more details.

HEAD has 19 uploads less than BASE

Flag	BASE (ea92ae1)	HEAD (6f2ce75)
cypress-regression	13	0
cypress	6	0

Additional details and impacted files

@@             Coverage Diff             @@
##           master    #2785       +/-   ##
===========================================
- Coverage   86.16%   66.59%   -19.58%     
===========================================
  Files         849      845        -4     
  Lines       46449    46704      +255     
  Branches    12072    12152       +80     
===========================================
- Hits        40024    31102     -8922     
- Misses       6018    14477     +8459     
- Partials      407     1125      +718     

Flag	Coverage Δ
cypress	?
cypress-regression	?
cypress-smoke	42.93% <22.80%> (-0.41%)	⬇️
jest	50.36% <32.10%> (-0.14%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[Copilot]

Pull request overview

Adds an alternative, accessible “click-to-pick” tile move flow (with ghost + keyboard navigation) and enables drag-to-delete by dropping tiles onto the toolbar Delete button (CLUE-401).

Changes:

• Extend the UI store with “picked up tile” state and focused drop-zone state to support click-to-pick + keyboard placement.
• Add ghost overlay + drop-zone highlighting/ARIA wiring for click-to-pick placement and keyboard navigation.
• Add drag/drop (and picked-up click) behavior to the Delete toolbar button for single-tile deletion with confirmation.

Reviewed changes

Copilot reviewed 15 out of 15 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
src/models/stores/ui.ts	Adds picked-up tile + focused drop-zone state and actions/views.
src/models/stores/ui.test.ts	Adds unit tests for picked-up tile state/actions.
src/components/toolbar.tsx	Wires a single-tile delete handler into the Delete button.
src/components/tiles/tile-component.tsx	Makes drag handle clickable/focusable to toggle pick-up; cancels pick-up on real drag.
src/components/picked-up-tile-ghost.tsx	New global ghost overlay with cursor tracking + Escape/click-outside cancel + aria-live.
src/components/document/tile-row.tsx	Shows/dims all drop zones during pick-up and adds ARIA props.
src/components/document/tile-row.scss	Updates drop-zone visuals for active vs dimmed states.
src/components/document/document-content.tsx	Adds pick-up mousemove highlighting, keyboard navigation, and click-to-place logic.
src/components/delete-button.tsx	Adds drag/drop-to-delete + picked-up click-to-delete confirmation flow.
src/components/delete-button.test.tsx	Updates tests to provide stores context and new prop.
src/components/app.tsx	Renders the global PickedUpTileGhost.
src/components/app.scss	Adds global “grabbing” cursor styling while a tile is picked up.
docs/plans/2026-03-04-drag-to-delete-design.md	Documents drag-to-delete design decisions.
docs/plans/2026-03-04-click-to-pick-tiles-implementation.md	Detailed implementation plan for click-to-pick (phased).
docs/plans/2026-03-04-click-to-pick-tiles-design.md	Documents click-to-pick design, a11y goals, and verification checklist.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

handlePickUpKeyDown calls preventDefault() for Enter unconditionally while a tile is picked up. After the Tab case moves focus to the delete button, pressing Enter is likely to be intercepted here (preventing the button’s default keyboard activation), and could also interfere with Enter in other focused controls. Consider ignoring key events when focus is inside .delete-button (or other form controls), or removing the global keydown listener when focus leaves the document content.

[Copilot]

The drop zone elements set role="option"/aria-selected, but they aren’t in a role="listbox" container and are not focusable (and have pointer-events: none). This is invalid/ineffective ARIA semantics and may confuse assistive tech. Consider using a simpler role (or none) with aria-label, or implement a proper listbox pattern (listbox + active descendant/focus management).

Suggested change

	? { role: "option" as const,
	"aria-label": `${location} ${rowLabel}`,
	"aria-selected": isHighlighted }
	? {
	"aria-label": `${location} ${rowLabel}`
	}

[Copilot]

New behaviors (delete a picked-up tile via click, and drag/drop delete with DataTransfer parsing) were added here, but the existing tests only cover the basic confirmation flow. Consider adding unit tests that (1) set ui.pickedUpTileId and verify clicking the button triggers the single-tile confirmation and calls onDeleteTile on confirm, and (2) simulate a drop with kDragTileId/kDragTiles to verify the drag-delete path.

[Copilot]

This implementation plan includes an instruction directed at a specific AI tool ("For Claude: REQUIRED SUB-SKILL: Use superpowers:executing-plans"). If this doc is intended for humans, this line is confusing/out of place and will age poorly in the repo. Consider removing it or rewriting it as tool-agnostic guidance.

Suggested change

	> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
	> **Note:** This implementation plan is meant to be followed and executed task-by-task.

[Copilot]

handleDeleteTile() deletes from the toolbar’s current document, but pickedUpTileId/drag-drop can originate from a different document (e.g. resources pane). In that case the confirmation will succeed but document?.deleteTile(tileId) will be a no-op. Consider deleting via stores.documents.findDocumentOfTile(tileId) (or ui.pickedUpDocId) so the correct source document is targeted.

Suggested change

	const { ui } = stores;
	ui.removeTileIdFromSelection(tileId);
	document?.deleteTile(tileId);
	const { ui, documents } = stores;
	ui.removeTileIdFromSelection(tileId);
	const sourceDocument: DocumentModelType | undefined =
	documents && typeof (documents as any).findDocumentOfTile === "function"
	? (documents as any).findDocumentOfTile(tileId)
	: document;
	sourceDocument?.deleteTile(tileId);

[Copilot]

The reaction() adds a global document.addEventListener("keydown", ...) per DocumentContentComponent instance. In multi-pane views (e.g. 2-up/4-up, problem+workspace) this will register multiple handlers and each keypress will be processed multiple times. Consider centralizing pick-up keyboard handling in a single global component (e.g. PickedUpTileGhost) or gating registration so only one active/target document registers the keydown listener.

[cypress]

collaborative-learning    Run #17987

Run Properties:   Passed #17987  •  6f2ce75c1e: feat: Phase 3 polish - tile shrink animation, empty doc support, PR review fixes

Project	collaborative-learning
Branch Review	CLUE-401-drag-tile-to-workspace-toolbar-button-to-delete
Run status	Passed #17987
Run duration	03m 14s
Commit	6f2ce75c1e: feat: Phase 3 polish - tile shrink animation, empty doc support, PR review fixes
Committer	lbondaryk
View all properties for this run ↗︎

---

Test results
Failures	0
Flaky	0
Pending	0
Skipped	0
Passing	4
View all changes introduced in this branch ↗︎