feat: disable dnds for mobile

src/app/deals/components/Boards/Boards.tsx

@@ -7,6 +7,7 @@ import CreateBoardButton from "@/app/deals/components/CreateBoardButton/CreateBo
 import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
 import SortableDnd from "@/components/dnd/SortableDnd";
 import { BoardSchema } from "@/lib/client";
+import { isMobile } from "react-device-detect";
 
 const Boards = () => {
     const { boards, setSelectedBoard, onUpdateBoard } = useBoardsContext();
@@ -36,6 +37,7 @@ const Boards = () => {
                     onDragEnd={onDragEnd}
                     onItemClick={selectBoard}
                     rowStyle={{ flexWrap: "nowrap" }}
+                    disabled={isMobile}
                 />
                 <CreateBoardButton />
             </Group>

src/app/deals/components/DealContainer/DealContainer.tsx

@@ -6,14 +6,16 @@ import { DealSchema } from "@/lib/client";
 
 type Props = {
     deal: DealSchema;
+    disabled?: boolean;
 };
 
-const DealContainer: FC<Props> = ({ deal }) => {
+const DealContainer: FC<Props> = ({ deal, disabled = false }) => {
     const dealBody = useMemo(() => <DealCard deal={deal} />, [deal]);
 
     return (
         <Box>
             <SortableItem
+                disabled={disabled}
                 dragHandleStyle={{ cursor: "pointer" }}
                 id={deal.id}>
                 {dealBody}

src/app/deals/components/Funnel/Funnel.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import React, { FC, ReactNode } from "react";
+import { isMobile } from "react-device-detect";
 import { Group, ScrollArea } from "@mantine/core";
 import CreateStatusButton from "@/app/deals/components/CreateStatusButton/CreateStatusButton";
 import DealCard from "@/app/deals/components/DealCard/DealCard";
@@ -63,6 +64,7 @@ const Funnel: FC = () => {
                         <DealContainer
                             key={deal.id}
                             deal={deal}
+                            disabled={isMobile}
                         />
                     )}
                     activeContainer={activeStatus}
@@ -80,6 +82,7 @@ const Funnel: FC = () => {
                             {children}
                         </StatusColumnWrapper>
                     )}
+                    disabled={isMobile}
                 />
                 <CreateStatusButton />
             </Group>

src/components/dnd/FunnelDnd/FunnelColumn.tsx

@@ -12,6 +12,7 @@ type Props<TItem> = {
     items: TItem[];
     renderItem: (item: TItem) => ReactNode;
     children?: ReactNode;
+    disabled?: boolean;
 };
 
 const FunnelColumn = <TItem extends BaseDraggable>({
@@ -19,6 +20,7 @@ const FunnelColumn = <TItem extends BaseDraggable>({
     items,
     renderItem,
     children,
+    disabled = false,
 }: Props<TItem>) => {
     const { setNodeRef } = useDroppable({ id });
 
@@ -26,6 +28,7 @@ const FunnelColumn = <TItem extends BaseDraggable>({
         <>
             {children}
             <SortableContext
+                disabled={disabled}
                 id={id}
                 items={items}
                 strategy={verticalListSortingStrategy}>

src/components/dnd/FunnelDnd/FunnelDnd.tsx

@@ -36,6 +36,7 @@ type Props<TContainer, TItem> = {
     getItemsByContainer: (container: TContainer, items: TItem[]) => TItem[];
     activeContainer: TContainer | null;
     activeItem: TItem | null;
+    disabled?: boolean;
 };
 
 const FunnelDnd = <
@@ -55,6 +56,7 @@ const FunnelDnd = <
     getItemsByContainer,
     activeContainer,
     activeItem,
+    disabled = false,
 }: Props<TContainer, TItem>) => {
     const sensors = useDndSensors();
 
@@ -81,7 +83,8 @@ const FunnelDnd = <
                         return (
                             <SortableItem
                                 key={containerId}
-                                id={containerId}>
+                                id={containerId}
+                                disabled={disabled}>
                                 {renderContainer(
                                     container,
                                     <FunnelColumn
@@ -108,6 +111,7 @@ const FunnelDnd = <
                                     id={containerId}
                                     items={containerItems}
                                     renderItem={renderItem}
+                                    disabled={disabled}
                                 />
                             );
                         }}

src/components/dnd/SortableDnd/SortableDnd.tsx

@@ -28,6 +28,7 @@ type Props<T extends BaseItem> = {
     onItemClick: (item: T) => void;
     rowStyle?: CSSProperties;
     itemStyle?: CSSProperties;
+    disabled?: boolean;
 };
 
 const SortableDnd = <T extends BaseItem>({
@@ -37,6 +38,7 @@ const SortableDnd = <T extends BaseItem>({
     onItemClick,
     rowStyle,
     itemStyle,
+    disabled = false,
 }: Props<T>) => {
     const [active, setActive] = useState<Active | null>(null);
     const [items, setItems] = useState<T[]>([]);
@@ -95,7 +97,9 @@ const SortableDnd = <T extends BaseItem>({
             onDragStart={({ active }) => setActive(active)}
             onDragEnd={onDragEndLocal}
             onDragCancel={() => setActive(null)}>
-            <SortableContext items={items}>
+            <SortableContext
+                items={items}
+                disabled={disabled}>
                 <Group
                     gap={0}
                     style={rowStyle}
@@ -111,7 +115,8 @@ const SortableDnd = <T extends BaseItem>({
                             <SortableItem
                                 dragHandleStyle={{ cursor: "pointer" }}
                                 itemStyle={itemStyle}
-                                id={item.id}>
+                                id={item.id}
+                                disabled={disabled}>
                                 {renderItem(item)}
                             </SortableItem>
                         </Box>

src/components/dnd/SortableItem/SortableItem.tsx

@@ -8,6 +8,7 @@ type Props = {
     id: number | string;
     itemStyle?: CSSProperties;
     dragHandleStyle?: CSSProperties;
+    disabled?: boolean;
 };
 
 const SortableItem = ({
@@ -15,6 +16,7 @@ const SortableItem = ({
     itemStyle,
     id,
     dragHandleStyle,
+    disabled,
 }: PropsWithChildren<Props>) => {
     const {
         attributes,
@@ -24,7 +26,7 @@ const SortableItem = ({
         setActivatorNodeRef,
         transform,
         transition,
-    } = useSortable({ id });
+    } = useSortable({ id, disabled });
 
     const context = useMemo(
         () => ({