save2

Author: AntoLC

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

@@ -12,7 +12,7 @@ import { css } from 'styled-components';
 
 import { Box, Overlayer, StyledLink } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
-import { Doc, SimpleDocItem } from '@/docs/doc-management';
+import { Doc, SimpleDocItem, useTrans } from '@/docs/doc-management';
 
 import { KEY_DOC_TREE, useDocTree } from '../api/useDocTree';
 import { useMoveDoc } from '../api/useMove';

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

@@ -1,4 +1,5 @@
 import { Data, useDraggable } from '@dnd-kit/core';
+import { useEffect, useState } from 'react';
 
 type DraggableProps<T> = {
   id: string;
@@ -7,11 +8,44 @@ type DraggableProps<T> = {
 };
 
 export const Draggable = <T,>(props: DraggableProps<T>) => {
+  const [isDisabled, setIsDisabled] = useState(false);
+
   const { attributes, listeners, setNodeRef } = useDraggable({
     id: props.id,
     data: props.data,
+    disabled: isDisabled,
   });
 
+  useEffect(() => {
+    const checkModal = () => {
+      const modalOpen = document.querySelector('[role="dialog"]');
+      setIsDisabled(!!modalOpen);
+    };
+
+    checkModal();
+
+    const observer = new MutationObserver(checkModal);
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true,
+    });
+
+    return () => observer.disconnect();
+  }, []);
+
+  if (isDisabled) {
+    return (
+      <div
+        data-testid={`draggable-doc-${props.id}`}
+        className="--docs--grid-draggable --disabled"
+        role="none"
+        style={{ pointerEvents: 'none' }}
+      >
+        {props.children}
+      </div>
+    );
+  }
+
   return (
     <div
       ref={setNodeRef}

src/frontend/apps/impress/src/features/docs/docs-import/components/DocImportModal.tsx

@@ -62,7 +62,7 @@ export const DocImportModal = ({
               aria-label={t('Cancel the move')}
               variant="secondary"
               fullWidth
-              //onClick={() => onClose()}
+              onClick={onClose}
             >
               {t('Cancel')}
             </Button>
@@ -115,6 +115,10 @@ export const DocImportModal = ({
           $direction="column"
           $justify="space-between"
           className="--docs--doc-move-modal"
+          onKeyDown={(e) => {
+            // Prevent keyboard events from bubbling to parent components (e.g., drag and drop)
+            e.stopPropagation();
+          }}
         >
           <QuickSearch
             placeholder={t('Search for a doc')}