feat(chat): drag-to-reorder pinned threads + Move up/Move down#280
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Drag-to-reorder via grip handle on desktop; "Move up" / "Move down" menu items on mobile (and as discoverable fallback on desktop). Anchor-based adapter event: reorderPinned(threadId, beforeId | null). Framework owns optimistic visual reorder + rollback. Scoped to pinned threads only. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
11 tasks: ThreadActionAdapter.reorderPinned, pendingOrder state + visibleThreads override, drag handlers, Move-up/Move-down menu items, grip handle template + drag attributes, styles, tests, example ThreadsService.reorderPinned (LangGraph metadata.pinnedOrder), demo-shell threadAction, API docs regen, browser verification. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Add reorderPinned? to ThreadActionAdapter, pendingOrder/draggingThreadId/dropTarget signals, update visibleThreads with optimistic pinned-order overrides, wire move-up/move-down menu items, and add all drag-and-drop handler methods. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
blove
force-pushed
the
claude/chat-pinned-reorder-impl
branch
from
8b3ccd7 to
dec45cf
Compare
jsdom doesn't run layout, so wrap elements returned a zero-height rect which inverted the before/after threshold and made both drop tests assert the wrong anchor id. Stub the rects to 40px each and use absolute clientY values so the position math matches a real layout. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
7 tasks
blove
added a commit
that referenced
this pull request
May 13, 2026
…ft) (#291) * docs: spec for grip-replaces-pin-on-hover Eliminate the always-reserved 18px left gutter that pinned rows take for the grip button. Swap the drag affordance into the same slot as the pin icon via opacity transition. Zero layout shift, zero new state. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * docs: plan for grip-replaces-pin-on-hover Single-task TDD plan: structural test → template restructure → styles replacement → verify all PR #280 tests still pass → PR. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(chat): drag handle replaces pin icon on hover (no left-gutter shift) PR #280 introduced a standalone grip button as a sibling of the row's main click button. The grip occupies 18px (16px width + 2px margin) of inline space whether visible or not, so pinned rows sat 18px right of unpinned rows. The user disliked the constant layout shift. Drop the standalone grip. Wrap the existing pin SVG in a fixed-size .chat-thread-list__pin-slot span; render the grip glyph as an absolutely-positioned sibling inside that slot. CSS opacity-toggle on :hover / :focus-within swaps which icon is visible. Zero layout shift, same affordance. The <li> remains the drag source — all drag handlers untouched. Move up / Move down menu items (keyboard path) unchanged. --------- Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds drag-to-reorder for pinned threads in
@ngaf/chat. Desktop: hover-revealed grip handle on the left of pinned rows initiates native HTML5 drag-and-drop with a drop indicator line. Mobile (and as a discoverable fallback on desktop): "Move up" / "Move down" entries appear in the row's existing overflow menu. Both code paths converge onThreadActionAdapter.reorderPinned?(threadId, beforeId | null)— framework owns optimistic visual reorder and rollback on rejection.Spec: docs/superpowers/specs/2026-05-12-chat-pinned-reorder-design.md
Plan: docs/superpowers/plans/2026-05-12-chat-pinned-reorder.md
New adapter method
Extended
chat-thread-list: newpendingOrderoverride signal,draggingThreadId+dropTargettransient state; updatedvisibleThreadsapplies pending order; newperformReorderPinned/performMoveUp/performMoveDownhandlers; HTML5 drag handlers (onDragStart/onDragOver/onDragLeave/onDrop/onDragEnd); grip-handle template + drag attributes on each row; "Move up" / "Move down" menu items conditional on pinned position; updatedshowKebabto includereorderPinned.::before/::afteron[data-drop-position]; row dimming during drag.ThreadsService:reorderPinnedPATCHesmetadata.pinnedOrderon each affected pinned thread (re-stamps 0..N-1);toThreadreadsmetadata.pinnedOrder;refreshsorts pinned-first then bypinnedOrder.Test plan
nx run chat:test— existing + 12 new reorder tests passnx run chat:build && nx lint chat— cleannx run examples-chat-angular:build— cleanScope
beforeId | null) — stable across concurrent mutation.@angular/cdkdependency (native HTML5 drag-and-drop).Out of scope (deferred)
🤖 Generated with Claude Code