🛂(frontend) block drag n drop when not desktop

Scrolling on mobile devices was causing issues
with drag and drop functionality, documents were
being moved unintentionally.
This commit disables drag and drop on mobile devices
to prevent this issue.

src/frontend/apps/impress/src/features/docs/doc-tree/components/DocSubPageItem.tsx

@@ -71,6 +71,7 @@ export const DocSubPageItem = (props: TreeViewNodeProps<Doc>) => {
   return (
     <Box
       className="--docs-sub-page-item"
+      draggable={doc.abilities.move && isDesktop}
       $position="relative"
       $css={css`
         background-color: ${actionsOpen

src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTree.tsx

@@ -2,6 +2,7 @@ import {
   OpenMap,
   TreeView,
   TreeViewMoveResult,
+  useResponsive,
   useTreeContext,
 } from '@gouvfr-lasuite/ui-kit';
 import { useRouter } from 'next/navigation';
@@ -29,6 +30,7 @@ export const DocTree = ({ currentDoc }: DocTreeProps) => {
   const [rootActionsOpen, setRootActionsOpen] = useState(false);
   const treeContext = useTreeContext<Doc | null>();
   const router = useRouter();
+  const { isDesktop } = useResponsive();
 
   const [initialOpenState, setInitialOpenState] = useState<OpenMap | undefined>(
     undefined,
@@ -243,13 +245,13 @@ export const DocTree = ({ currentDoc }: DocTreeProps) => {
           canDrop={({ parentNode }) => {
             const parentDoc = parentNode?.data.value as Doc;
             if (!parentDoc) {
-              return currentDoc.abilities.move;
+              return currentDoc.abilities.move && isDesktop;
             }
-            return parentDoc.abilities.move;
+            return parentDoc.abilities.move && isDesktop;
           }}
           canDrag={(node) => {
             const doc = node.value as Doc;
-            return doc.abilities.move;
+            return doc.abilities.move && isDesktop;
           }}
           rootNodeId={treeContext.root.id}
           renderNode={DocSubPageItem}

src/frontend/apps/impress/src/features/docs/docs-grid/components/DocGridContentList.tsx

@@ -51,7 +51,9 @@ type DocGridContentListProps = {
   docs: Doc[];
 };
 
-export const DocGridContentList = ({ docs }: DocGridContentListProps) => {
+export const DraggableDocGridContentList = ({
+  docs,
+}: DocGridContentListProps) => {
   const { mutateAsync: handleMove, isError } = useMoveDoc();
   const queryClient = useQueryClient();
   const modalConfirmation = useModal();
@@ -223,7 +225,7 @@ export const DocGridContentList = ({ docs }: DocGridContentListProps) => {
   );
 };
 
-interface DocGridItemProps {
+interface DraggableDocGridItemProps {
   doc: Doc;
   dragMode: boolean;
   canDrag: boolean;
@@ -235,7 +237,7 @@ export const DraggableDocGridItem = ({
   dragMode,
   canDrag,
   updateCanDrop,
-}: DocGridItemProps) => {
+}: DraggableDocGridItemProps) => {
   const canDrop = doc.abilities.move;
 
   return (
@@ -252,3 +254,13 @@ export const DraggableDocGridItem = ({
     </Droppable>
   );
 };
+
+export const DocGridContentList = ({ docs }: DocGridContentListProps) => {
+  if (docs.length === 0) {
+    return null;
+  }
+
+  return docs.map((doc) => (
+    <DocsGridItem dragMode={false} doc={doc} key={doc.id} />
+  ));
+};

src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx

@@ -9,7 +9,10 @@ import { useResponsiveStore } from '@/stores';
 
 import { useResponsiveDocGrid } from '../hooks/useResponsiveDocGrid';
 
-import { DocGridContentList } from './DocGridContentList';
+import {
+  DocGridContentList,
+  DraggableDocGridContentList,
+} from './DocGridContentList';
 import { DocsGridLoader } from './DocsGridLoader';
 
 type DocsGridProps = {
@@ -118,7 +121,11 @@ export const DocsGrid = ({
               )}
             </Box>
 
-            <DocGridContentList docs={docs} />
+            {isDesktop ? (
+              <DraggableDocGridContentList docs={docs} />
+            ) : (
+              <DocGridContentList docs={docs} />
+            )}
 
             {hasNextPage && !loading && (
               <InView