Drag and drop spike

[patosullivan]

Summary

Changes

How did I test?

Risks and impact

• Safe to rollback without consulting PR author? (Yes | No)
• Affects important code area:
  • Onboarding
  • State / providers
  • Message sync
  • Channel display
  • Notifications
  • Other:

Rollback plan

Screenshots / videos

Simulator.Screen.Recording.-.iPhone.15.Pro.-.2026-06-09.at.09.27.11.mp4

[Copilot]

Pull request overview

Implements a cross-platform “pinned chats drag-and-drop reordering” spike (TLON-5948) by adding a slot-preserving %set-order backend action, persisting reordered pin indices locally with correct cache invalidation, and wiring sortable pinned sections into the app UI (web + native) with automated coverage (unit + e2e).

Changes:

• Add %pins %set-order to the backend (parser + agent handler) and expose it via api.setPinnedItemOrder.
• Add local pin reordering persistence (setPinnedItemsOrder, clearPinnedItems) + getChats invalidation and a robust reorderPinnedItems action with optimistic update + reconcile behavior.
• Add sortable pinned section UI to ChatList (header-based pinned block) and new ordering helpers/hooks, plus Playwright and unit tests.

Reviewed changes

Copilot reviewed 23 out of 23 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
packages/shared/src/store/reorderPinnedItems.test.ts	Adds DB-backed tests for optimistic reorder, backend payload semantics, sync interleaving, and failure reconciliation behavior.
packages/shared/src/store/channelActions.ts	Implements reorderPinnedItems with slot-preserving normalization, backend poke, reassert-on-success, and reconcile/rollback on failure.
packages/shared/src/db/queries.ts	Adds setPinnedItemsOrder, clearPinnedItems, and makes getChats depend on pins for invalidation.
packages/shared/src/db/queries.test.ts	Adds tests for pin reorder queries + react-query invalidation behavior.
packages/app/navigation/desktop/MessagesSidebar.tsx	Ensures ChatList renders when pinned items exist; passes allPinnedChats through for filtered-tab reorder correctness.
packages/app/navigation/desktop/HomeSidebar.tsx	Passes allPinnedChats to ChatList for full-order reconstruction when reordering in filtered views.
packages/app/hooks/useResolvedChats.ts	Busts memoization on pinned-order-only changes via a pinnedOrder signature component.
packages/app/hooks/usePinnedChatOrdering.ts	Adds platform-agnostic pinned ordering hook that merges visible reorders into full order and calls shared persistence.
packages/app/hooks/usePinnedChatOrdering.helpers.ts	Pure helpers for visible reorder + visible-into-full merge logic.
packages/app/hooks/usePinnedChatOrdering.helpers.test.ts	Unit tests for reorder/merge helper semantics, including “hidden pins stay fixed”.
packages/app/features/top/ChatListScreen.tsx	Passes allPinnedChats to ChatList for correct reorder behavior.
packages/app/features/chat-list/SortablePinnedChats.web.tsx	Web sortable pinned list implementation using dnd-kit (needs minor import cleanup).
packages/app/features/chat-list/SortablePinnedChats.tsx	Native sortable pinned list implementation using react-native-sortables with failure reset behavior.
packages/app/features/chat-list/ChatList.tsx	Renders pinned section as a sortable header block with a Sort/Done toggle; virtualizes only the non-pinned sections.
packages/app/features/chat-list/ChatList.helpers.ts	Adds pinned-section constants and splitPinnedSection to separate pinned header content from the virtualized list.
packages/app/features/chat-list/ChatList.helpers.test.ts	Adds tests for splitPinnedSection behavior and invariants.
packages/api/src/client/groupsApi.ts	Adds setPinnedItemOrder client poke for %pins %set-order.
desk/tests/lib/groups-json.hoon	Adds JSON parser unit tests for %set-order payload parsing across id shapes.
desk/tests/app/groups-ui.hoon	Adds agent unit tests for slot-preserving %set-order semantics.
desk/sur/ui.hoon	Extends UI action type to include %pins %set-order.
desk/lib/groups-json.hoon	Extends JSON parser to accept set-order pins action with (ar whom).
desk/app/groups-ui.hoon	Implements slot-preserving %set-order handling in the backend agent.
apps/tlon-web/e2e/pinned-reorder.spec.ts	Adds Playwright e2e test validating reorder interaction and persistence across reload.

---

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