What
Add drag-and-drop reordering to the Smart Clipboard Kanban board:
- Reorder snippets within a board
- Move snippets between boards
- Reorder boards themselves
Current state
The UI already has grip handles (<GripVertical> icons) on each snippet card, and boards are rendered as horizontal columns. The position field exists in both bf_snippets and bf_snippet_boards tables. The update APIs (whisperwoofScUpdateSnippet, whisperwoofUpdateBoard) already support changing position and boardId.
Approach
Use a lightweight drag library like @dnd-kit/core (already in the React ecosystem, ~8KB gzipped):
- Wrap each
BoardColumn in a SortableContext
- Make
SnippetCard draggable via useSortable
- On drop: update
position (and boardId if cross-board) via the existing IPC methods
- Persist new positions to SQLite
Files to modify
src/whisperwoof/ui/smart-clipboard/SmartClipboard.tsx — add dnd-kit wrappers
package.json — add @dnd-kit/core + @dnd-kit/sortable dependencies
Acceptance criteria
What
Add drag-and-drop reordering to the Smart Clipboard Kanban board:
Current state
The UI already has grip handles (
<GripVertical>icons) on each snippet card, and boards are rendered as horizontal columns. Thepositionfield exists in bothbf_snippetsandbf_snippet_boardstables. The update APIs (whisperwoofScUpdateSnippet,whisperwoofUpdateBoard) already support changingpositionandboardId.Approach
Use a lightweight drag library like @dnd-kit/core (already in the React ecosystem, ~8KB gzipped):
BoardColumnin aSortableContextSnippetCarddraggable viauseSortableposition(andboardIdif cross-board) via the existing IPC methodsFiles to modify
src/whisperwoof/ui/smart-clipboard/SmartClipboard.tsx— add dnd-kit wrapperspackage.json— add@dnd-kit/core+@dnd-kit/sortabledependenciesAcceptance criteria