Skip to content

feat: drag-and-drop reorder for Smart Clipboard boards and snippets #72

@h3qing

Description

@h3qing

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):

  1. Wrap each BoardColumn in a SortableContext
  2. Make SnippetCard draggable via useSortable
  3. On drop: update position (and boardId if cross-board) via the existing IPC methods
  4. 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

  • Snippets can be reordered within a board via drag
  • Snippets can be moved between boards via drag
  • New positions persist across app restart
  • Smooth drag animation (no jank)

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or requestgood first issueGood for newcomersui/uxUser interface and experience

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions