feat(ui): add drag-and-drop reordering to projects form

[CalvinChuaYH]

Pull Request Title

Added drag and drop reordering for project form builder

Related Issue

This builds on the work done in PR #676.

Description

This PR adds the drag-and-drop functionality to reorder projects within the Project section of the resume builder. Users can now easily reorder their projects.

This enhancement extends the existing drag-and-drop pattern done by @Konstantin-Lasiy in PR #676 to the project section of the resume builder.

Type

• Bug Fix
• Feature Enhancement
• Documentation Update
• Code Refactoring
• Other (please specify):

Proposed Changes

• Followed the existing drag-and-drop pattern used for section reordering

Screenshots / Code Snippets (if applicable)

How to Test

1. Navigate to the Resume Builder page (http://localhost:3000/builder)
2. Navigate to the Projects section
   • Click "Add Project" to create at least 2-3 experience entries
   • Hover over any item - observe the grip icon (⋮⋮) on the left edge
   • Drag items to reorder them
   • Verify smooth animations and that order persists

Checklist

• The code compiles successfully without any errors or warnings
• The changes have been tested and verified
• The documentation has been updated (if applicable)
• The changes follow the project's coding guidelines and best practices
• The commit messages are descriptive and follow the project's guidelines
• All tests (if applicable) pass successfully
• This pull request has been linked to the related issue (if applicable)

Additional Information

I noticed there is some duplicated code in this implementation - happy to refactor in a follow-up PR if needed.

---

Summary by cubic

Add drag-and-drop reordering to the Projects form so users can reorder projects with mouse or keyboard. Matches the existing dnd-kit pattern used for section reordering for a consistent UX.

• New Features
  • DndContext/SortableContext with PointerSensor + KeyboardSensor (sortableKeyboardCoordinates), closestCenter collision, and vertical list strategy.
  • handleDragEnd uses arrayMove to update order via onChange.
  • Wraps each project in DraggableListItem; empty state and inputs/add/delete actions unchanged.

^{Written for commit ef93b91. Summary will update on new commits.}

[kilo-code-bot]

Code Review Summary

Status: 2 Minor Issues Found | Recommendation: Merge (issues are minor)

Overview

Severity	Count
CRITICAL	0
WARNING	0
SUGGESTION	2

Analysis

This PR adds drag-and-drop reordering functionality to the projects form using @dnd-kit. The implementation is well-structured and follows best practices:

✅ Proper sensor configuration - Both PointerSensor and KeyboardSensor are configured for accessibility
✅ Correct DnD context setup - Uses SortableContext with verticalListSortingStrategy
✅ Safe drag handling - handleDragEnd validates indices before reordering
✅ Clean component integration - Reuses existing DraggableListItem component

Issue Details (click to expand)

SUGGESTION

File	Line	Issue
apps/frontend/components/builder/forms/projects-form.tsx	143-144	Inconsistent indentation - extra spaces on <p> tag content
apps/frontend/components/builder/forms/projects-form.tsx	163	Redundant key prop - DraggableListItem already receives id which could be used internally

Custom Review Focus Areas

API Breaking Changes: ✅ None - This PR only modifies frontend UI components

Prompts Flow: ✅ Not affected - No changes to prompt templates or LLM interactions

LiteLLM Configurations: ✅ Not affected - No backend changes

Files Reviewed (1 file)

• apps/frontend/components/builder/forms/projects-form.tsx - 2 minor suggestions

---

Fix these issues in Kilo Cloud

[cubic-dev-ai]

No issues found across 1 file