feat(F6): Implement bookmark-level DnD in list/grid views

[ryota-murakami]

Bookmark-level Drag & Drop

Parent: #4 (P4 Organization)
Feature: F6 — Easy Group ↔ Collection Editing
Found by: QA review 2026-03-24

Problem

Collection-level DnD is fully implemented in left-sidebar.tsx, but bookmark-level DnD (dragging bookmarks between collections or reordering within a collection) is not implemented.

3 TODO comments remain in src/components/raindrop/raindrop-list-item.tsx:

• Line 16: // TODO: @dnd-kit migration — GripVertical for drag handle
• Line 190: // TODO: @dnd-kit migration — drag source setup
• Line 205: // TODO: @dnd-kit migration — drag handle

Tasks

• Add useSortable from @dnd-kit to raindrop-list-item.tsx
• Add useSortable to raindrop-card.tsx (grid view)
• Wrap view containers with DndContext + SortableContext in main-content.tsx
• Implement onDragEnd handler — useBatchUpdateRaindropsMutation for cross-collection moves
• Add drag handle (GripVertical icon) visible on hover
• Add unit tests for bookmark reorder logic
• Add E2E test: drag bookmark to different collection

Acceptance Criteria (from SPEC.md F6)

• Drag bookmark between collections updates API
• Reorder within collection works and persists
• Drag preview shows bookmark title
• Optimistic updates: UI updates immediately, reverts on error