feat(desktop): drag-and-drop reordering for v2 sidebar

Merged
SA
7mo ago
+1106-229

Summary

  • Implement drag-and-drop for workspaces, sections, and projects in the v2 dashboard sidebar using @dnd-kit
  • Uses a flat list approach: sections are just header dividers, position determines section membership
  • Workspace drag and section drag are separate modes — sections collapse their workspaces during section drag
  • Project-level drag reordering with content collapse animation

Key design decisions

  • Flat list, not multi-container: Sections are dividers in a single SortableContext, not containers. This eliminates all multi-container complexity (no onDragOver, no findContainer, no custom collision detection)
  • Two drag modes: When dragging a workspace, sections are disabled sortable items (static dividers). When dragging a section, workspaces are hidden and only sections participate
  • Position = membership: Workspaces before the first section are ungrouped. Workspaces after a section header belong to that section
  • Predicted color: Ghost shows the accent color of the section it would land in during drag

Changes

  • New useSidebarDnd hook with flat list state management
  • New SortableSectionHeader, SortableWorkspaceItem, SidebarDragOverlay components
  • reorderProjectChildren and moveWorkspaceToSectionAtIndex mutations
  • Project-level DndContext in DashboardSidebar.tsx
  • Section header grip icon, context menu improvements (Remove from Group, color dots)
  • Always show workspace name + branch, scroll active into view
  • Remove Default from color palette, sections always get random color

Test plan

  • Drag workspace to reorder among ungrouped workspaces
  • Drag workspace below a section header → joins section (gets accent color)
  • Drag workspace above all sections → becomes ungrouped
  • Drag section via grip → workspaces collapse, sections reorder
  • Drag project → content collapses, projects reorder
  • Collapse/expand sections with animation
  • Move to Section via context menu
  • Remove from Group via context menu
  • Cancel drag (ESC) restores original order

Summary by cubic

Adds drag-and-drop reordering for projects, sections, and workspaces in the v2 sidebar using @dnd-kit with a flat list model where position defines group membership. This simplifies DnD, improves keyboard accessibility, and smooths reordering animations.

  • New Features

    • Flat list DnD: sections are headers; position = membership (above first section = ungrouped).
    • Two drag modes: workspace reorders across/into sections; section drag via grip moves as a group with collapsed contents.
    • Project-level reordering with a drag handle and overlay; order persists.
    • Drag overlay: workspace ghost shows predicted section color; section overlay with grip and count.
    • Context menu polish: Move to Section shows color dots; “Remove from Group” appears only when grouped.
    • UX: always show workspace name + branch; active workspace scrolls into view; ESC cancels and restores; sections get a random color (no “Default”).

  • Bug Fixes

    • Fixed tabOrder collisions when removing multiple workspaces from groups by using next-available ordering for ungrouped items.
    • Guarded flat-list sync with active drag to avoid overwriting local drag state.
    • Added missing useSortable attributes to workspace items for full keyboard DnD support.

Summary by CodeRabbit

  • New Features

    • Drag-and-drop reordering for projects, sections, and workspaces in the dashboard sidebar.
    • Move workspaces into/out of groups with precise placement.

  • UI/UX Improvements

    • Visual drag preview overlay and grip handles while dragging.
    • Smooth animations for expanding/collapsing sections and reordering feedback.
    • Group color support and color indicators in menus and headers.