Improve and use grabbing cursor

src/components/designer/DraggableCanvasContainer.tsx

@@ -89,6 +89,7 @@ export const DraggableCanvasContainer = ({ node, children }: DraggableCanvasCont
       ref={draggable.setNodeRef}
       {...draggable.listeners}
       {...draggable.attributes}
+      style={{ cursor: "grab" }}
       onClick={(ev) => {
         ev.stopPropagation()
         dispatch(setSelectedItem(node.nodeId))

src/components/designer/DraggableCanvasItem.tsx

@@ -87,6 +87,7 @@ export const DraggableCanvasItem = ({ node }: DraggableCanvasItemProps) => {
       ref={draggable.setNodeRef}
       {...draggable.listeners}
       {...draggable.attributes}
+      style={{ cursor: "grab" }}
       onClick={(ev) => {
         ev.stopPropagation()
         dispatch(setSelectedItem(node.nodeId))

src/components/designer/TemplateDesigner.tsx

@@ -13,6 +13,7 @@ import { snapCenterToCursor } from "@dnd-kit/modifiers"
 import { Flex, Transition } from "@mantine/core"
 import invariant from "tiny-invariant"
 import { DesignerContextProvider } from "~/contexts/DesignerContext"
+import { useGrabbingCursor } from "~/hooks/useGrabbingCursor"
 import { useMounted } from "~/hooks/useMounted"
 import { refreshMenu, selectPreview, setSelectedItem } from "~/state/designerSlice"
 import { useAppDispatch, useAppSelector } from "~/state/store"
@@ -35,8 +36,16 @@ export const TemplateDesigner = () => {
   const dispatch = useAppDispatch()
   const template = useAppSelector(selectTemplate)
   const preview = useAppSelector(selectPreview)
+  const [grabbingCursorOn, grabbingCursorOff] = useGrabbingCursor()
+
+  const handleDragStart = () => {
+    grabbingCursorOn()
+    dispatch(setSelectedItem(null))
+  }
 
   const handleDragEnd = (event: DragEndEvent) => {
+    grabbingCursorOff()
+
     if (!event.over) return
 
     const { node: activeNode, origin } = event.active.data.current as DraggableData
@@ -168,7 +177,7 @@ export const TemplateDesigner = () => {
           sensors={sensors}
           modifiers={[snapCenterToCursor]}
           collisionDetection={customCollisionDetection}
-          onDragStart={() => dispatch(setSelectedItem(null))}
+          onDragStart={handleDragStart}
           onDragEnd={handleDragEnd}
         >
           <Flex h="100%" align="stretch" gap="xs">

src/components/designer/menuItems/DraggableMenuItem.tsx

@@ -14,7 +14,7 @@ export const DraggableMenuItem = ({ node, children }: DraggableMenuItemProps) =>
   })
 
   return (
-    <div ref={setNodeRef} {...attributes} {...listeners}>
+    <div ref={setNodeRef} {...attributes} {...listeners} style={{ cursor: "grab" }}>
       {children}
     </div>
   )

src/components/designer/optionsEditor/OptionsTable.tsx

@@ -3,6 +3,7 @@ import { restrictToParentElement, restrictToVerticalAxis } from "@dnd-kit/modifi
 import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable"
 import { Table } from "@mantine/core"
 import { Control, FieldArrayWithId, UseFieldArrayMove, UseFieldArrayRemove } from "react-hook-form"
+import { useGrabbingCursor } from "~/hooks/useGrabbingCursor"
 import { useSiteTranslation } from "~/hooks/useSiteTranslation"
 import { Option } from "~/schemas/structure"
 import { DraggableOptionRow } from "./DraggableOptionRow"
@@ -16,16 +17,16 @@ interface OptionsTableProps {
 
 export const OptionsTable = ({ control, fields, move, remove }: OptionsTableProps) => {
   const { t } = useSiteTranslation()
+  const [grabbingCursorOn, grabbingCursorOff] = useGrabbingCursor()
 
   const handleDragStart = () => {
-    document.body.classList.add("grabbing")
+    grabbingCursorOn()
   }
 
   const handleDragEnd = (event: DragEndEvent) => {
-    const { active, over } = event
-
-    document.body.classList.remove("grabbing")
+    grabbingCursorOff()
 
+    const { active, over } = event
     if (over && active.id !== over.id) {
       const oldIndex = fields.findIndex((item) => item.id === active.id)
       const newIndex = fields.findIndex((item) => item.id === over.id)

src/hooks/useGrabbingCursor.ts

@@ -0,0 +1,14 @@
+/**
+ * This hook works together with the CSS in global.css
+ */
+const GRABBING_CLASS = "grabbing"
+
+const on = () => {
+  document.body.classList.add(GRABBING_CLASS)
+}
+
+const off = () => {
+  document.body.classList.remove(GRABBING_CLASS)
+}
+
+export const useGrabbingCursor = () => [on, off]