Merge pull request #2244 from m4dd0c/draggable-tags

feat(dialogs): skills, custom-section, and interests dialogs support draggable tags.

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"

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,
@@ -31,6 +35,23 @@ export const InterestsDialog = () => {
   });
 
   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>
@@ -76,9 +97,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"

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"