From a8626e400d1d4de3ac83f23eb110343b26ac261d Mon Sep 17 00:00:00 2001
From: Manish Suthar <manishsuthar078@gmail.com>
Date: Thu, 20 Mar 2025 02:17:34 +0530
Subject: [PATCH 1/2] feat(dialogs): skills, custom-section, and interests
 dialogs supports draggable tags

---
 .../sidebars/left/dialogs/custom-section.tsx  | 30 +++++++++++++++++++
 .../sidebars/left/dialogs/interests.tsx       | 28 +++++++++++++++++
 .../builder/sidebars/left/dialogs/skills.tsx  | 29 ++++++++++++++++++
 3 files changed, 87 insertions(+)

diff --git a/apps/client/src/pages/builder/sidebars/left/dialogs/custom-section.tsx b/apps/client/src/pages/builder/sidebars/left/dialogs/custom-section.tsx
index 849158dd..27759b5f 100644
--- a/apps/client/src/pages/builder/sidebars/left/dialogs/custom-section.tsx
+++ b/apps/client/src/pages/builder/sidebars/left/dialogs/custom-section.tsx
@@ -30,6 +30,10 @@ const formSchema = customSectionSchema;
 
 type FormValues = z.infer<typeof formSchema>;
 
+const handleDragOver = (e: React.DragEvent) => {
+  e.preventDefault();
+};
+
 export const CustomSectionDialog = () => {
   const { payload } = useDialog<CustomSection>("custom");
 
@@ -40,6 +44,24 @@ export const CustomSectionDialog = () => {
 
   const [pendingKeyword, setPendingKeyword] = useState("");
 
+  const [draggedIndex, setDraggedIndex] = useState<number | null>(null);
+
+  const handleDrop = (
+    e: React.DragEvent,
+    dropIndex: number,
+    field: { value: string[]; onChange: (value: string[]) => void },
+  ) => {
+    e.preventDefault();
+    if (draggedIndex === null) return;
+
+    const newKeywords = [...field.value];
+    const [draggedItem] = newKeywords.splice(draggedIndex, 1);
+    newKeywords.splice(dropIndex, 0, draggedItem);
+
+    field.onChange(newKeywords);
+    setDraggedIndex(null);
+  };
+
   // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
   if (!payload) return null;
 
@@ -172,9 +194,17 @@ export const CustomSectionDialog = () => {
                     <motion.div
                       key={item}
                       layout
+                      draggable
                       initial={{ opacity: 0, y: -50 }}
                       animate={{ opacity: 1, y: 0, transition: { delay: index * 0.1 } }}
                       exit={{ opacity: 0, x: -50 }}
+                      onDragStart={() => {
+                        setDraggedIndex(index);
+                      }}
+                      onDragOver={handleDragOver}
+                      onDrop={(e) => {
+                        handleDrop(e, index, field);
+                      }}
                     >
                       <Badge
                         className="cursor-pointer"
diff --git a/apps/client/src/pages/builder/sidebars/left/dialogs/interests.tsx b/apps/client/src/pages/builder/sidebars/left/dialogs/interests.tsx
index fe741b80..5a1d113e 100644
--- a/apps/client/src/pages/builder/sidebars/left/dialogs/interests.tsx
+++ b/apps/client/src/pages/builder/sidebars/left/dialogs/interests.tsx
@@ -31,6 +31,26 @@ export const InterestsDialog = () => {
   });
 
   const [pendingKeyword, setPendingKeyword] = useState("");
+  const [draggedIndex, setDraggedIndex] = useState<number | null>(null);
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+  };
+
+  const handleDrop = (
+    e: React.DragEvent,
+    dropIndex: number,
+    field: { value: string[]; onChange: (value: string[]) => void },
+  ) => {
+    e.preventDefault();
+    if (draggedIndex === null) return;
+
+    const newKeywords = [...field.value];
+    const [draggedItem] = newKeywords.splice(draggedIndex, 1);
+    newKeywords.splice(dropIndex, 0, draggedItem);
+
+    field.onChange(newKeywords);
+    setDraggedIndex(null);
+  };
 
   return (
     <SectionDialog<FormValues>
@@ -76,9 +96,17 @@ export const InterestsDialog = () => {
                     <motion.div
                       key={item}
                       layout
+                      draggable
                       initial={{ opacity: 0, y: -50 }}
                       animate={{ opacity: 1, y: 0, transition: { delay: index * 0.1 } }}
                       exit={{ opacity: 0, x: -50 }}
+                      onDragStart={() => {
+                        setDraggedIndex(index);
+                      }}
+                      onDragOver={handleDragOver}
+                      onDrop={(e) => {
+                        handleDrop(e, index, field);
+                      }}
                     >
                       <Badge
                         className="cursor-pointer"
diff --git a/apps/client/src/pages/builder/sidebars/left/dialogs/skills.tsx b/apps/client/src/pages/builder/sidebars/left/dialogs/skills.tsx
index aec541eb..d4adedb6 100644
--- a/apps/client/src/pages/builder/sidebars/left/dialogs/skills.tsx
+++ b/apps/client/src/pages/builder/sidebars/left/dialogs/skills.tsx
@@ -25,6 +25,10 @@ const formSchema = skillSchema;
 
 type FormValues = z.infer<typeof formSchema>;
 
+const handleDragOver = (e: React.DragEvent) => {
+  e.preventDefault();
+};
+
 export const SkillsDialog = () => {
   const form = useForm<FormValues>({
     defaultValues: defaultSkill,
@@ -32,6 +36,23 @@ export const SkillsDialog = () => {
   });
 
   const [pendingKeyword, setPendingKeyword] = useState("");
+  const [draggedIndex, setDraggedIndex] = useState<number | null>(null);
+
+  const handleDrop = (
+    e: React.DragEvent,
+    dropIndex: number,
+    field: { value: string[]; onChange: (value: string[]) => void },
+  ) => {
+    e.preventDefault();
+    if (draggedIndex === null) return;
+
+    const newKeywords = [...field.value];
+    const [draggedItem] = newKeywords.splice(draggedIndex, 1);
+    newKeywords.splice(dropIndex, 0, draggedItem);
+
+    field.onChange(newKeywords);
+    setDraggedIndex(null);
+  };
 
   return (
     <SectionDialog<FormValues>
@@ -122,9 +143,17 @@ export const SkillsDialog = () => {
                     <motion.div
                       key={item}
                       layout
+                      draggable
                       initial={{ opacity: 0, y: -50 }}
                       animate={{ opacity: 1, y: 0, transition: { delay: index * 0.1 } }}
                       exit={{ opacity: 0, x: -50 }}
+                      onDragStart={() => {
+                        setDraggedIndex(index);
+                      }}
+                      onDragOver={handleDragOver}
+                      onDrop={(e) => {
+                        handleDrop(e, index, field);
+                      }}
                     >
                       <Badge
                         className="cursor-pointer"

From 1994dde1f248416a6b9ea238350faf152c4e0b5c Mon Sep 17 00:00:00 2001
From: Manish Suthar <manishsuthar078@gmail.com>
Date: Sat, 22 Mar 2025 23:18:29 +0530
Subject: [PATCH 2/2] chore: handleDragOver moved to outer scope for better
 perf

---
 .../src/pages/builder/sidebars/left/dialogs/interests.tsx  | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/apps/client/src/pages/builder/sidebars/left/dialogs/interests.tsx b/apps/client/src/pages/builder/sidebars/left/dialogs/interests.tsx
index 5a1d113e..1773717e 100644
--- a/apps/client/src/pages/builder/sidebars/left/dialogs/interests.tsx
+++ b/apps/client/src/pages/builder/sidebars/left/dialogs/interests.tsx
@@ -24,6 +24,10 @@ const formSchema = interestSchema;
 
 type FormValues = z.infer<typeof formSchema>;
 
+const handleDragOver = (e: React.DragEvent) => {
+  e.preventDefault();
+};
+
 export const InterestsDialog = () => {
   const form = useForm<FormValues>({
     defaultValues: defaultInterest,
@@ -32,9 +36,6 @@ export const InterestsDialog = () => {
 
   const [pendingKeyword, setPendingKeyword] = useState("");
   const [draggedIndex, setDraggedIndex] = useState<number | null>(null);
-  const handleDragOver = (e: React.DragEvent) => {
-    e.preventDefault();
-  };
 
   const handleDrop = (
     e: React.DragEvent,