Todo Panel — Drag to reorder + recategorize categories and items #49

Parent

#44

What to build

Full drag-and-drop using @dnd-kit (already in apps/web deps). A single drag gesture can reorder items within a category, recategorize an item into a different category, and reorder categories themselves.

State machine: todoStore gains:

• reorderItems(items: Array<{ id, categoryId, order }>) — batch update orders after a drag operation
• recategorizeItem(itemId, newCategoryId, targetOrder) — move item to new category at a given position
• reorderCategories(categoryIds: string[]) — update category order

WebSocket: todo.mutate already supports batched mutations — a drag operation that reorders and recategorizes is sent as a single mutation.

Drag implementation: DndContext wraps the full list. Each category is a SortableContext for its items. Dropping an item into a different category's SortableContext recategorizes it. Category headers are also sortable (separate SortableContext or drag handle). Visual feedback during drag (opacity, placeholder).

Acceptance criteria

• Items can be dragged within a category to reorder
• Items can be dragged from one category into another to recategorize
• Category headers can be dragged to reorder categories
• A single drag gesture that recategorizes AND repositions works (e.g. drag item from Backend into UI at position 3)
• Visual feedback during drag (ghost/opacity + placeholder)
• Drag result is committed as a single todo.mutate call
• Constraints: done section items are NOT draggable (done items are static)
• Unit tests: reorderItems, recategorizeItem, reorderCategories logic in todoStore
• bun fmt, bun lint, bun typecheck all pass

Blocked by

• Todo Panel — Status cycle + done section + archive #48