fix(choices): show the drag pill as soon as a touch drag starts

[chhoumann]

Summary

On a phone, long-pressing a choice drew the whole dragged row over the row below it until the finger moved (#2136). svelte-dnd-action calls transformDraggedElement (which makes the pill) only when the zone renders the shadow item, and the zones strip it at DRAG_STARTED (#1244, #883, #1692). A mouse drag moves at once; a touch drag starts after the 200 ms long-press without moving, so the full-row clone stayed over the next row.

showDragPillOnStart (in dndReorder.ts) turns the clone into the pill on DRAG_STARTED, with the zone's own label. The choice list, macro builder command list and template folder list call it from their consider handler; the folder list's label function is now shared between the two places that need it.

Older than 2.30: 2.29.0 does the same on the phone.

Testing

• Reproduced on an iPhone (iOS 18.7, Obsidian 1.14.3) on 2.29.0 and the 2.30 candidate: screen recording frame. With this branch on the phone, a long-press shows the pill at once and the row below stays clean:

  

• tests/e2e/drag-pill-touch.test.ts: arms the handle, holds a touch on a choice row for 400 ms without moving, and checks the clone is the pill with the choice's name, then that the hold-and-release kept every choice ([BUG] Drag-and-drop deletes choices on Android #1692). It fails on master ({ pill: false, label: null }).

• tests/e2e/drag-pill-bounds.test.ts passes. tests/e2e/choice-list-layout.test.ts "opens the New choice menu under its button" fails in my local instance on master and on this branch alike, before any drag code runs.

• pnpm run test: 6607 passed, 33 skipped. pnpm run check, pnpm run build-with-lint: clean.

Release impact

Visual only, all platforms (a mouse drag gets the pill one move earlier). No settings or data change.

Fixes #2136

Note

Show drag pill immediately on touch drag start in choice lists

Adds showDragPillOnStart in dndReorder.ts to convert the drag clone into a labeled drag pill as soon as the drag-start trigger fires, instead of waiting for first movement. Applies it to the choice, command, and folder drag handlers in ChoiceList.svelte, CommandList.svelte, and FolderList.svelte.

• Extracts the default label resolution into a shared nameLabel utility used by the drag-zone options and the pill helper.
• Adds an end-to-end test in drag-pill-touch.test.ts verifying a stationary touch long-press produces a labeled pill before finger movement, and releasing it leaves choice order unchanged.

^{Macroscope summarized 332e13b.}

Summary by CodeRabbit

• New Features
  • Drag previews now show clear labels for folders, commands, and choices, including the command’s displayed name.
  • Touch-dragging a choice displays its label in the drag preview.
• Bug Fixes
  • Improved consistency of labels shown in drag previews across supported lists.

[chatgpt-codex-connector]

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review	Status	Commit	Review trigger
📝 Code Review	✅ Completed 2026-10-02T08:26:33.968778Z	332e13b	PR opened

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

[coderabbitai]

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Advanced

Run ID: 7c9e4ce4-01d6-4951-a2ce-1ee9ae6e24aa

📥 Commits

Reviewing files that changed from the base of the PR and between dd59057 and 332e13b.

📒 Files selected for processing (5)

• src/gui/ChoiceBuilder/FolderList.svelte
• src/gui/MacroGUIs/CommandList.svelte
• src/gui/choiceList/ChoiceList.svelte
• src/gui/shared/dndReorder.ts
• tests/e2e/drag-pill-touch.test.ts

Included review availability: This review used your included allowance. Your plan provides up to 8 included reviews per hour; 5 remain after this review.

---

📝 Walkthrough

Walkthrough

The change adds shared drag-start handling that transforms drag clones into labeled pills. Choice, command, and folder lists call the helper with their label resolvers. An end-to-end test checks touch dragging and preserves choice order.

Changes

Drag pill rendering

Layer / File(s)	Summary
Shared drag-start transformation src/gui/shared/dndReorder.ts	Adds showDragPillOnStart for DRAG_STARTED events. It resolves the item label and transforms the drag clone. The shared fallback label is used by baseDndOptions.
List integration and touch test src/gui/choiceList/ChoiceList.svelte, src/gui/MacroGUIs/CommandList.svelte, src/gui/ChoiceBuilder/FolderList.svelte, tests/e2e/drag-pill-touch.test.ts	Choice, command, and folder lists call the helper with their label resolvers. The touch test checks pill rendering and confirms the choices remain in order.

Priority: ➖ Normal

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Bug fix · Severity of issue fixed: Low

Merge Risk: ⚪ Minimal · up to 332e1

This change shows the drag pill as soon as a touch drag starts in the three lists. The impact is visual only, and no merge-blocking risk is evident.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	Issue #2136 requires the drag clone to become the pill when a touch drag starts without pointer movement. showDragPillOnStart handles DRAG_STARTED, finds the shadow item and clone, and calls `tran…
Out of Scope Changes check	✅ Passed	The changes stay within issue #2136. They add shared drag-start pill behavior, connect it to the three affected lists, align the folder label resolver, and add focused touch-drag coverage. No unrelate…
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 3 functions across 2 files. (3 skipped: 3 …
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the primary fix: showing the drag pill when a touch drag starts. It focuses on the choice list and does not mention the related macro command and folder lists, but it remai…

✨ Finishing Touches

📝 Generate docstrings

• Commit to this branch
• Create a new PR

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

• Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Autopilot is currently an internal CodeRabbit preview.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{A rabbit holds a paw quite still,
A drag clone turns to pill with skill.
Choice and folder names appear,
Commands join the list, precise and clear.
Three choices stay in order, too,
While rabbit hops away, pleased through.}

_{Comment @coderabbitai help to get the list of available commands.}