[WEB-1138] feat: List lssue Layout Drag and Drop (#4536)

* List Dnd Complete feature

* fix minor bugs in list dnd

* remove double overlay in kanban post refactor

* add missing dependencies to useEffects

* make provision to add to the last issue of the group

* show current child issues to also be disabled if the parent issue is being dragged

* fix last issue border

* fix code static analysis suggestions

* prevent context menu on drag handle

packages/ui/src/drag-handle.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { forwardRef } from "react";
+import { MoreVertical } from "lucide-react";
+
+interface IDragHandle {
+  isDragging: boolean;
+  disabled?: boolean;
+}
+
+export const DragHandle = forwardRef<HTMLButtonElement | null, IDragHandle>((props, ref) => {
+  const { isDragging, disabled = false } = props;
+
+  if (disabled) {
+    return <div className="w-[14px] h-[18px]" />;
+  }
+
+  return (
+    <button
+      type="button"
+      className={`mr-1 p-[2px] flex flex-shrink-0 rounded bg-custom-background-90 text-custom-sidebar-text-200 group-hover:opacity-100 cursor-grab ${
+        isDragging ? "opacity-100" : "opacity-0"
+      }`}
+      onContextMenu={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      }}
+      ref={ref}
+    >
+      <MoreVertical className="h-3.5 w-3.5 stroke-custom-text-400" />
+      <MoreVertical className="-ml-5 h-3.5 w-3.5 stroke-custom-text-400" />
+    </button>
+  );
+});
+
+DragHandle.displayName = "DragHandle";

packages/ui/src/index.ts

@@ -12,4 +12,5 @@ export * from "./tooltip";
 export * from "./loader";
 export * from "./control-link";
 export * from "./toast";
+export * from "./drag-handle";
 export * from "./drop-indicator";