🐛(frontend) fix drag-and-drop move disabled by viewport breakpoint

The docs grid and the doc tree both gated the "move document"
drag-and-drop on a screen-size breakpoint (isLargeScreen / isDesktop),
derived from window.innerWidth. Browser zoom shrinks window.innerWidth
the same way a narrower window does, so zooming in on a desktop browser
silently disabled drag-and-drop even though the user was still on a
mouse - matching the reported "zoomed in, can't move; zoomed out, can
move" behaviour, in both the docs grid and moving a subdoc in the tree.

Replace the width-based gate with a new hasCoarsePointer flag on
useResponsiveStore, backed by the `(pointer: coarse)` media query. That
feature reflects the actual input device rather than viewport size, so
it stays correct across zoom levels/widths for mouse users while still
disabling drag-and-drop for genuine touch-primary devices.

Verified locally against a running dev server: before the fix the docs
grid rendered zero draggable items below the 768px breakpoint; after
the fix it stays draggable at any width for a mouse-driven context, and
a touch-emulated context still gets the non-draggable fallback. The
doc-tree canDrag/canDrop gate was verified via matchMedia('(pointer:
coarse)') staying false across widths 1280-500 in a mouse context and
true in a touch-emulated context.

Closes #2599

Author: AntoLC

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

@@ -3,7 +3,6 @@ import {
   TreeDataItem,
   TreeView,
   TreeViewMoveResult,
-  useResponsive,
   useTreeContext,
 } from '@gouvfr-lasuite/ui-components';
 import { useRouter } from 'next/router';
@@ -13,6 +12,7 @@ import { NodeApi } from 'react-arborist';
 import { Overlayer } from '@/components';
 import { CLASS_DOC_TITLE } from '@/docs/doc-header';
 import { Doc, useMoveDoc } from '@/docs/doc-management';
+import { useResponsiveStore } from '@/stores/useResponsiveStore';
 
 import { isDocNode, isWithinTreeItemActions } from '../utils';
 
@@ -33,7 +33,7 @@ export const DocTreeSubpages = memo(function DocTreeSubpages({
   rootNodeId,
   rootItemRef,
 }: DocTreeSubPagesProps) {
-  const { isDesktop } = useResponsive();
+  const { hasCoarsePointer } = useResponsiveStore();
   const treeContext = useTreeContext<Doc | null>();
   const { mutateAsync: moveDoc } = useMoveDoc();
   const { query } = useRouter();
@@ -70,21 +70,21 @@ export const DocTreeSubpages = memo(function DocTreeSubpages({
     ({ parentNode }: { parentNode: NodeApi<TreeDataItem<Doc>> | null }) => {
       const parentValue = parentNode?.data.value;
       if (!parentValue || !isDocNode(parentValue)) {
-        return doc.abilities.move && isDesktop;
+        return doc.abilities.move && !hasCoarsePointer;
       }
-      return parentValue.abilities.move && isDesktop;
+      return parentValue.abilities.move && !hasCoarsePointer;
     },
-    [doc.abilities.move, isDesktop],
+    [doc.abilities.move, hasCoarsePointer],
   );
 
   const canDrag = useCallback(
     (node: TreeDataItem<Doc>) => {
       if (!isDocNode(node.value)) {
         return false;
       }
-      return node.value.abilities.move && isDesktop;
+      return node.value.abilities.move && !hasCoarsePointer;
     },
-    [isDesktop],
+    [hasCoarsePointer],
   );
 
   const handleRowKeyDown = useCallback(

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

@@ -8,7 +8,6 @@ import {
 } from '@dnd-kit/core';
 import { getEventCoordinates } from '@dnd-kit/utilities';
 import { TreeViewMoveModeEnum, useModal } from '@gouvfr-lasuite/ui-components';
-import { useMediaQuery } from '@mantine/hooks';
 import dynamic from 'next/dynamic';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
@@ -17,6 +16,7 @@ import { css } from 'styled-components';
 
 import { Card, Text } from '@/components';
 import { Doc, useMoveDoc, useTrans } from '@/docs/doc-management';
+import { useResponsiveStore } from '@/stores/useResponsiveStore';
 
 import { DocDragEndData, useDragAndDrop } from '../hooks/useDragAndDrop';
 
@@ -322,24 +322,18 @@ export const DraggableDocGridItem = ({
   );
 };
 
-/**
- * Browser zoom shrinks the viewport below the mobile breakpoint on a desktop,
- * so dnD depends on the pointer, not on the width. `any-pointer` also covers a
- * mouse plugged into a touch-first computer, where the primary pointer is coarse.
- */
-const FINE_POINTER_QUERY = '(any-pointer: fine)';
-
 export const DocGridContentList = ({ docs }: DocGridContentListProps) => {
-  const hasFinePointer = useMediaQuery(FINE_POINTER_QUERY);
+  const { hasCoarsePointer } = useResponsiveStore();
 
   if (docs.length === 0) {
     return null;
   }
 
-  if (hasFinePointer) {
+  if (!hasCoarsePointer) {
     return <DraggableDocGridContentList docs={docs} />;
   }
 
+  // Render a non-draggable list for touch-primary devices.
   return docs.map((doc) => (
     <DocsGridItem key={doc.id} dragMode={false} doc={doc} />
   ));

src/frontend/apps/impress/src/stores/useResponsiveStore.tsx

@@ -19,6 +19,11 @@ export interface UseResponsiveStore {
   screenWidth: number;
   setScreenSize: (size: ScreenSize) => void;
   isDesktop: boolean;
+  /**
+   * Indicates whether the primary input device has a coarse pointer (e.g., a touchscreen)
+   * rather than a fine pointer (e.g., a mouse or trackpad).
+   */
+  hasCoarsePointer: boolean;
   initializeResizeListener: () => () => void;
 }
 
@@ -28,6 +33,7 @@ const initialState = {
   isSmallMobile: false,
   isTablet: false,
   isDesktop: false,
+  hasCoarsePointer: false,
   screenSize: 'desktop' as ScreenSize,
   screenWidth: 0,
 };
@@ -38,6 +44,7 @@ export const useResponsiveStore = create<UseResponsiveStore>((set) => ({
   isMobile: initialState.isMobile,
   isSmallMobile: initialState.isSmallMobile,
   isTablet: initialState.isTablet,
+  hasCoarsePointer: initialState.hasCoarsePointer,
   screenSize: initialState.screenSize,
   screenWidth: initialState.screenWidth,
   setScreenSize: (size: ScreenSize) => set(() => ({ screenSize: size })),
@@ -107,9 +114,18 @@ export const useResponsiveStore = create<UseResponsiveStore>((set) => ({
 
     resizeHandler();
 
+    // Listen for changes to the primary input device's pointer type (coarse vs fine).
+    const coarsePointerQuery = window.matchMedia('(pointer: coarse)');
+    const pointerHandler = () => {
+      set({ hasCoarsePointer: coarsePointerQuery.matches });
+    };
+    pointerHandler();
+    coarsePointerQuery.addEventListener('change', pointerHandler);
+
     return () => {
       clearTimeout(resizeTimeout);
       window.removeEventListener('resize', debouncedResizeHandler);
+      coarsePointerQuery.removeEventListener('change', pointerHandler);
     };
   },
 }));