From 1e1b7e5cfc51926e811614d04f31df6009154940 Mon Sep 17 00:00:00 2001
From: CalvinChuaYH <calvinchuayh@gmail.com>
Date: Thu, 26 Feb 2026 19:03:55 +0800
Subject: [PATCH 1/3] feat(ui): add drag-and-drop reordering to projects form

---
 .../builder/forms/projects-form.tsx           | 281 ++++++++++--------
 1 file changed, 165 insertions(+), 116 deletions(-)

diff --git a/apps/frontend/components/builder/forms/projects-form.tsx b/apps/frontend/components/builder/forms/projects-form.tsx
index 16ca653a9..3258ec006 100644
--- a/apps/frontend/components/builder/forms/projects-form.tsx
+++ b/apps/frontend/components/builder/forms/projects-form.tsx
@@ -8,6 +8,22 @@ import { RichTextEditor } from '@/components/ui/rich-text-editor';
 import { Project } from '@/components/dashboard/resume-component';
 import { Plus, Trash2, Github, Globe } from 'lucide-react';
 import { useTranslations } from '@/lib/i18n';
+import {
+  DndContext,
+  closestCenter,
+  PointerSensor,
+  KeyboardSensor,
+  useSensor,
+  useSensors,
+  DragEndEvent,
+} from '@dnd-kit/core';
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { DraggableListItem } from '../draggable-list-item';
 
 interface ProjectsFormProps {
   data: Project[];
@@ -17,6 +33,30 @@ interface ProjectsFormProps {
 export const ProjectsForm: React.FC<ProjectsFormProps> = ({ data, onChange }) => {
   const { t } = useTranslations();
 
+  // Configure drag-and-drop sensors
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+
+  // Handler for drag end event
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+
+    if (!over || active.id === over.id) return;
+
+    const oldIndex = data.findIndex((item) => item.id === active.id);
+    const newIndex = data.findIndex((item) => item.id === over.id);
+
+    if (oldIndex === -1 || newIndex === -1) return;
+
+    // Reorder the array using arrayMove from @dnd-kit
+    const reordered = arrayMove(data, oldIndex, newIndex);
+    onChange(reordered);
+  };
+
   const handleAdd = () => {
     const newId = Math.max(...data.map((d) => d.id), 0) + 1;
     onChange([
@@ -98,120 +138,8 @@ export const ProjectsForm: React.FC<ProjectsFormProps> = ({ data, onChange }) =>
         </Button>
       </div>
 
-      <div className="space-y-8">
-        {data.map((item) => (
-          <div key={item.id} className="p-6 border border-black bg-gray-50 relative group">
-            <Button
-              variant="ghost"
-              size="icon"
-              className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity text-destructive hover:text-destructive hover:bg-destructive/10"
-              onClick={() => handleRemove(item.id)}
-            >
-              <Trash2 className="w-4 h-4" />
-            </Button>
-
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4 pr-8">
-              <div className="space-y-2">
-                <Label className="font-mono text-xs uppercase tracking-wider text-gray-500">
-                  {t('builder.forms.projects.fields.projectName')}
-                </Label>
-                <Input
-                  value={item.name || ''}
-                  onChange={(e) => handleChange(item.id, 'name', e.target.value)}
-                  placeholder={t('builder.forms.projects.placeholders.projectName')}
-                  className="rounded-none border-black bg-white"
-                />
-              </div>
-              <div className="space-y-2">
-                <Label className="font-mono text-xs uppercase tracking-wider text-gray-500">
-                  {t('builder.forms.projects.fields.role')}
-                </Label>
-                <Input
-                  value={item.role || ''}
-                  onChange={(e) => handleChange(item.id, 'role', e.target.value)}
-                  placeholder={t('builder.forms.projects.placeholders.role')}
-                  className="rounded-none border-black bg-white"
-                />
-              </div>
-              <div className="space-y-2">
-                <Label className="font-mono text-xs uppercase tracking-wider text-gray-500">
-                  {t('builder.genericItemForm.fields.years')}{' '}
-                  <span className="text-gray-400">({t('common.optional')})</span>
-                </Label>
-                <Input
-                  value={item.years || ''}
-                  onChange={(e) => handleChange(item.id, 'years', e.target.value)}
-                  placeholder={t('builder.forms.projects.placeholders.years')}
-                  className="rounded-none border-black bg-white"
-                />
-              </div>
-              <div className="space-y-2">
-                <Label className="font-mono text-xs uppercase tracking-wider text-gray-500">
-                  <Github className="w-3 h-3 inline mr-1" />
-                  GitHub <span className="text-gray-400">({t('common.optional')})</span>
-                </Label>
-                <Input
-                  value={item.github || ''}
-                  onChange={(e) => handleChange(item.id, 'github', e.target.value)}
-                  placeholder={t('builder.forms.projects.placeholders.github')}
-                  className="rounded-none border-black bg-white"
-                />
-              </div>
-              <div className="space-y-2 md:col-span-2">
-                <Label className="font-mono text-xs uppercase tracking-wider text-gray-500">
-                  <Globe className="w-3 h-3 inline mr-1" />
-                  {t('builder.forms.projects.fields.website')}{' '}
-                  <span className="text-gray-400">({t('common.optional')})</span>
-                </Label>
-                <Input
-                  value={item.website || ''}
-                  onChange={(e) => handleChange(item.id, 'website', e.target.value)}
-                  placeholder={t('builder.forms.projects.placeholders.website')}
-                  className="rounded-none border-black bg-white"
-                />
-              </div>
-            </div>
-
-            <div className="space-y-3">
-              <div className="flex justify-between items-center">
-                <Label className="font-mono text-xs uppercase tracking-wider text-gray-500">
-                  {t('builder.genericItemForm.fields.descriptionPoints')}
-                </Label>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={() => handleAddDescription(item.id)}
-                  className="h-6 text-xs text-blue-700 hover:text-blue-800 hover:bg-blue-50"
-                >
-                  <Plus className="w-3 h-3 mr-1" /> {t('builder.genericItemForm.actions.addPoint')}
-                </Button>
-              </div>
-              {item.description?.map((desc, idx) => (
-                <div key={idx} className="flex gap-2">
-                  <div className="flex-1">
-                    <RichTextEditor
-                      value={desc}
-                      onChange={(html) => handleDescriptionChange(item.id, idx, html)}
-                      placeholder={t('builder.forms.projects.placeholders.description')}
-                      minHeight="60px"
-                    />
-                  </div>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    onClick={() => handleRemoveDescription(item.id, idx)}
-                    className="h-[60px] w-8 text-muted-foreground hover:text-destructive self-end"
-                  >
-                    <Trash2 className="w-3 h-3" />
-                  </Button>
-                </div>
-              ))}
-            </div>
-          </div>
-        ))}
-
-        {data.length === 0 && (
-          <div className="text-center py-12 bg-gray-50 border border-dashed border-black">
+      {data.length === 0 ? (
+        <div className="text-center py-12 bg-gray-50 border border-dashed border-black">
             <p className="font-mono text-sm text-gray-500 mb-4">
               {t('builder.genericItemForm.noEntries', { label: t('resume.sections.projects') })}
             </p>
@@ -224,8 +152,129 @@ export const ProjectsForm: React.FC<ProjectsFormProps> = ({ data, onChange }) =>
               <Plus className="w-4 h-4 mr-2" /> {t('builder.forms.projects.addFirstProject')}
             </Button>
           </div>
-        )}
-      </div>
+      ) : (
+        <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+          <SortableContext
+            items={data.map((item) => item.id)}
+            strategy={verticalListSortingStrategy}
+          >
+            <div className="space-y-8">
+              {data.map((item) => (
+                <DraggableListItem key={item.id} id={item.id}>
+                  <div key={item.id} className="p-6 border border-black bg-gray-50 relative group">
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity text-destructive hover:text-destructive hover:bg-destructive/10"
+                      onClick={() => handleRemove(item.id)}
+                    >
+                      <Trash2 className="w-4 h-4" />
+                    </Button>
+
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4 pr-8">
+                      <div className="space-y-2">
+                        <Label className="font-mono text-xs uppercase tracking-wider text-gray-500">
+                          {t('builder.forms.projects.fields.projectName')}
+                        </Label>
+                        <Input
+                          value={item.name || ''}
+                          onChange={(e) => handleChange(item.id, 'name', e.target.value)}
+                          placeholder={t('builder.forms.projects.placeholders.projectName')}
+                          className="rounded-none border-black bg-white"
+                        />
+                      </div>
+                      <div className="space-y-2">
+                        <Label className="font-mono text-xs uppercase tracking-wider text-gray-500">
+                          {t('builder.forms.projects.fields.role')}
+                        </Label>
+                        <Input
+                          value={item.role || ''}
+                          onChange={(e) => handleChange(item.id, 'role', e.target.value)}
+                          placeholder={t('builder.forms.projects.placeholders.role')}
+                          className="rounded-none border-black bg-white"
+                        />
+                      </div>
+                      <div className="space-y-2">
+                        <Label className="font-mono text-xs uppercase tracking-wider text-gray-500">
+                          {t('builder.genericItemForm.fields.years')}{' '}
+                          <span className="text-gray-400">({t('common.optional')})</span>
+                        </Label>
+                        <Input
+                          value={item.years || ''}
+                          onChange={(e) => handleChange(item.id, 'years', e.target.value)}
+                          placeholder={t('builder.forms.projects.placeholders.years')}
+                          className="rounded-none border-black bg-white"
+                        />
+                      </div>
+                      <div className="space-y-2">
+                        <Label className="font-mono text-xs uppercase tracking-wider text-gray-500">
+                          <Github className="w-3 h-3 inline mr-1" />
+                          GitHub <span className="text-gray-400">({t('common.optional')})</span>
+                        </Label>
+                        <Input
+                          value={item.github || ''}
+                          onChange={(e) => handleChange(item.id, 'github', e.target.value)}
+                          placeholder={t('builder.forms.projects.placeholders.github')}
+                          className="rounded-none border-black bg-white"
+                        />
+                      </div>
+                      <div className="space-y-2 md:col-span-2">
+                        <Label className="font-mono text-xs uppercase tracking-wider text-gray-500">
+                          <Globe className="w-3 h-3 inline mr-1" />
+                          {t('builder.forms.projects.fields.website')}{' '}
+                          <span className="text-gray-400">({t('common.optional')})</span>
+                        </Label>
+                        <Input
+                          value={item.website || ''}
+                          onChange={(e) => handleChange(item.id, 'website', e.target.value)}
+                          placeholder={t('builder.forms.projects.placeholders.website')}
+                          className="rounded-none border-black bg-white"
+                        />
+                      </div>
+                    </div>
+
+                    <div className="space-y-3">
+                      <div className="flex justify-between items-center">
+                        <Label className="font-mono text-xs uppercase tracking-wider text-gray-500">
+                          {t('builder.genericItemForm.fields.descriptionPoints')}
+                        </Label>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => handleAddDescription(item.id)}
+                          className="h-6 text-xs text-blue-700 hover:text-blue-800 hover:bg-blue-50"
+                        >
+                          <Plus className="w-3 h-3 mr-1" /> {t('builder.genericItemForm.actions.addPoint')}
+                        </Button>
+                      </div>
+                      {item.description?.map((desc, idx) => (
+                        <div key={idx} className="flex gap-2">
+                          <div className="flex-1">
+                            <RichTextEditor
+                              value={desc}
+                              onChange={(html) => handleDescriptionChange(item.id, idx, html)}
+                              placeholder={t('builder.forms.projects.placeholders.description')}
+                              minHeight="60px"
+                            />
+                          </div>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            onClick={() => handleRemoveDescription(item.id, idx)}
+                            className="h-[60px] w-8 text-muted-foreground hover:text-destructive self-end"
+                          >
+                            <Trash2 className="w-3 h-3" />
+                          </Button>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                </DraggableListItem>
+              ))}
+            </div>
+          </SortableContext>
+        </DndContext>
+      )}
     </div>
   );
 };

From d7e73d41ea9113263702c06b2f3a561622bce783 Mon Sep 17 00:00:00 2001
From: Calvin Chua <126031516+CalvinChuaYH@users.noreply.github.com>
Date: Thu, 26 Feb 2026 19:37:18 +0800
Subject: [PATCH 2/3] Update
 apps/frontend/components/builder/forms/projects-form.tsx

Co-authored-by: kilo-code-bot[bot] <240665456+kilo-code-bot[bot]@users.noreply.github.com>
---
 apps/frontend/components/builder/forms/projects-form.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/frontend/components/builder/forms/projects-form.tsx b/apps/frontend/components/builder/forms/projects-form.tsx
index 3258ec006..ad884c741 100644
--- a/apps/frontend/components/builder/forms/projects-form.tsx
+++ b/apps/frontend/components/builder/forms/projects-form.tsx
@@ -161,7 +161,7 @@ export const ProjectsForm: React.FC<ProjectsFormProps> = ({ data, onChange }) =>
             <div className="space-y-8">
               {data.map((item) => (
                 <DraggableListItem key={item.id} id={item.id}>
-                  <div key={item.id} className="p-6 border border-black bg-gray-50 relative group">
+                  <div className="p-6 border border-black bg-gray-50 relative group">
                     <Button
                       variant="ghost"
                       size="icon"

From ef93b91df209bb42fefeac6acd8a61fdc66022f1 Mon Sep 17 00:00:00 2001
From: Calvin Chua <126031516+CalvinChuaYH@users.noreply.github.com>
Date: Thu, 26 Feb 2026 19:37:50 +0800
Subject: [PATCH 3/3] Update
 apps/frontend/components/builder/forms/projects-form.tsx

Co-authored-by: kilo-code-bot[bot] <240665456+kilo-code-bot[bot]@users.noreply.github.com>
---
 apps/frontend/components/builder/forms/projects-form.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/frontend/components/builder/forms/projects-form.tsx b/apps/frontend/components/builder/forms/projects-form.tsx
index ad884c741..ff7235372 100644
--- a/apps/frontend/components/builder/forms/projects-form.tsx
+++ b/apps/frontend/components/builder/forms/projects-form.tsx
@@ -140,7 +140,7 @@ export const ProjectsForm: React.FC<ProjectsFormProps> = ({ data, onChange }) =>
 
       {data.length === 0 ? (
         <div className="text-center py-12 bg-gray-50 border border-dashed border-black">
-            <p className="font-mono text-sm text-gray-500 mb-4">
+          <p className="font-mono text-sm text-gray-500 mb-4">
               {t('builder.genericItemForm.noEntries', { label: t('resume.sections.projects') })}
             </p>
             <Button