F4: Drag-reorder Clients in sidebar #7

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