Smarter Feature Queue Reordering: Drag-and-Drop Arrives in v1.0.21

Version: 1.0.21
Category: UI/UX
Affected component: ProjectFeaturesTab

Overview

Managing a long feature queue just got significantly faster. v1.0.21 replaces the previous Up/Down arrow button reordering mechanism in the ProjectFeaturesTab with full drag-and-drop reordering built on @dnd-kit/sortable. Arrow buttons are retained as a keyboard-accessible fallback but are visually de-emphasised so the primary interaction is clear.

This release also fixes a longstanding false affordance: the instruction banner was displaying a GripVertical icon — strongly implying drag support — even though no drag behaviour existed. That icon has been removed from the banner.

Why This Matters

Feature queues in active projects can easily grow beyond 10 items. With the old arrow-button design:

Moving a feature from position 15 to position 2 required 13 separate clicks on the Up button.
The GripVertical icon in the instruction banner led users to attempt dragging, which silently did nothing — a confusing dead end.

Drag-and-drop reduces a multi-step reordering operation to a single gesture, regardless of queue length.

How It Works

Drag Handle

Each feature row in the queue now renders a GripVertical handle on the left side of the row. Click and drag this handle to reposition the feature anywhere in the queue. The list reorders in real time as you drag.

┌──────────────────────────────────────────────┐
│ ⠿  Feature: Stripe billing integration   ↑ ↓ │
│ ⠿  Feature: User invitation flow         ↑ ↓ │
│ ⠿  Feature: CSV export                   ↑ ↓ │
└──────────────────────────────────────────────┘
  ↑ Grip handle    ↑ De-emphasised arrow buttons (keyboard fallback)

Keyboard Fallback

The Up (↑) and Down (↓) arrow buttons remain available on every row for users who prefer keyboard navigation or are not using a pointer device. They are intentionally rendered at reduced visual prominence so they do not compete with the primary drag interaction.

Instruction Banner

The instruction banner no longer displays a GripVertical icon. The banner now accurately reflects the available interactions without creating false expectations.

Implementation Details

Detail	Value
Drag library	`@dnd-kit/sortable`
Keyboard fallback	Up/Down arrow buttons (retained, de-emphasised)
Handle icon	`GripVertical` (per-row only; removed from banner)
Affected file	`src/components/project-features-tab.tsx`

Upgrade Notes

No configuration changes are required. The updated ProjectFeaturesTab component is a drop-in replacement. If your project has a custom wrapper around ProjectFeaturesTab, no prop changes are needed — the drag-and-drop context is managed internally by the component.