Optimise sortable tile over detection and disable adding groups to groups

src/components/tile/SortableTile.js

@@ -4,7 +4,7 @@ import { useDroppable } from "@dnd-kit/core";
 import { useSortable } from "@dnd-kit/sortable";
 import { animated, useSpring } from "react-spring";
 
-function Sortable({ id, disableGrouping, hidden, children }) {
+function SortableTile({ id, disableGrouping, hidden, children, type }) {
   const {
     attributes,
     listeners,
@@ -13,10 +13,10 @@ function Sortable({ id, disableGrouping, hidden, children }) {
     setDraggableNodeRef,
     over,
     active,
-  } = useSortable({ id });
+  } = useSortable({ id, data: { type } });
   const { setNodeRef: setGroupNodeRef } = useDroppable({
     id: `__group__${id}`,
-    disabled: disableGrouping,
+    disabled: disableGrouping || active?.data?.current?.type === "group",
   });
 
   const dragStyle = {
@@ -82,4 +82,4 @@ function Sortable({ id, disableGrouping, hidden, children }) {
   );
 }
 
-export default Sortable;
+export default SortableTile;

src/components/tile/SortableTiles.js

@@ -42,7 +42,7 @@ function SortableTiles({
     onTileSelect(active.id);
   }
 
-  function handleDragMove({ over }) {
+  function handleDragOver({ over }) {
     setOverId(over?.id);
   }
 
@@ -95,8 +95,8 @@ function SortableTiles({
   return (
     <DndContext
       onDragStart={handleDragStart}
-      onDragMove={handleDragMove}
       onDragEnd={handleDragEnd}
+      onDragOver={handleDragOver}
       sensors={sensors}
       collisionDetection={closestCenter}
     >
@@ -107,6 +107,7 @@ function SortableTiles({
             key={group.id}
             disableGrouping={disableGrouping}
             hidden={group.id === openGroupId}
+            type={group.type}
           >
             {renderSortableGroup(group)}
           </SortableTile>