Skip to content

F4: Drag-reorder Clients in sidebar #7

@rororowyourboat

Description

@rororowyourboat

Summary

Allow users to reorder Client sections in the sidebar via drag-and-drop. Order is persisted server-side.

Scope

  • Add a SortableContext for Client headers in the sidebar (separate from project sorting)
  • Use useSortable on Client header components
  • On drag end, dispatch client.reorder command with {clientId, newPosition}
  • Server emits client.reordered event, projector updates sort_order field
  • "Unassigned" section is pinned to the bottom and not draggable

Technical notes

  • The current dnd-kit setup uses restrictToVerticalAxis and restrictToFirstScrollableAncestor modifiers — these work for Client reordering too
  • Need to distinguish Client-header drags from Project-item drags. Use data payload on useSortable to tag the drag type
  • Consider adding a DragOverlay for visual feedback (currently missing from the codebase)
  • Optimistic UI: reorder locally on drag end, roll back if command fails

Key files to modify

  • apps/web/src/components/Sidebar.tsx — add Client-level SortableContext, distinguish drag types in onDragEnd
  • apps/web/src/store.ts — optimistic state update for client order

Dependencies

  • F1 (Client entity with sortOrder), F3 (sidebar hierarchy rendering)

Acceptance criteria

  • Can drag Client sections to reorder them
  • Order persists across server restarts (server-side)
  • "Unassigned" cannot be dragged
  • Visual drag overlay shows Client name during drag
  • Optimistic UI with rollback on failure

Metadata

Metadata

Assignees

No one assigned

    Labels

    P1Priority 1 - Foundationclient-hierarchyClient hierarchy & workspace organizationenhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions