fix: Clickable area for docs in sidebar is obstructed (#2809)

closes #2808

app/components/Sidebar/components/CollectionLink.tsx

@@ -27,8 +27,6 @@ type Props = {
   activeDocument: Document | null | undefined;
   prefetchDocument: (id: string) => Promise<any>;
   belowCollection: Collection | void;
-  isDraggingAnyCollection: boolean;
-  onChangeDragging: (dragging: boolean) => void;
 };
 
 function CollectionLink({
@@ -37,8 +35,6 @@ function CollectionLink({
   prefetchDocument,
   canUpdate,
   belowCollection,
-  isDraggingAnyCollection,
-  onChangeDragging,
 }: Props) {
   const history = useHistory();
   const { t } = useTranslation();
@@ -68,24 +64,11 @@ function CollectionLink({
     collection.id === ui.activeCollectionId
   );
 
-  React.useEffect(() => {
-    // If we're viewing a starred document through the starred menu then don't
-    // touch the expanded / collapsed state of the collections
-    if (search === "?starred") {
-      return;
-    }
-
-    if (isDraggingAnyCollection) {
-      setExpanded(false);
-    } else {
-      setExpanded(collection.id === ui.activeCollectionId);
-    }
-  }, [isDraggingAnyCollection, collection.id, ui.activeCollectionId, search]);
   const manualSort = collection.sort.field === "index";
   const can = policies.abilities(collection.id);
   const belowCollectionIndex = belowCollection ? belowCollection.index : null;
 
-  // Drop to re-parent
+  // Drop to re-parent document
   const [{ isOver, canDrop }, drop] = useDrop({
     accept: "document",
     drop: (item: DragObject, monitor) => {
@@ -117,7 +100,7 @@ function CollectionLink({
     }),
   });
 
-  // Drop to reorder
+  // Drop to reorder document
   const [{ isOverReorder }, dropToReorder] = useDrop({
     accept: "document",
     drop: async (item: DragObject) => {
@@ -129,8 +112,11 @@ function CollectionLink({
     }),
   });
 
-  // Drop to reorder Collection
+  // Drop to reorder collection
-  const [{ isCollectionDropping }, dropToReorderCollection] = useDrop({
+  const [
+    { isCollectionDropping, isDraggingAnotherCollection },
+    dropToReorderCollection,
+  ] = useDrop({
     accept: "collection",
     drop: async (item: DragObject) => {
       collections.move(
@@ -146,14 +132,14 @@ function CollectionLink({
     },
     collect: (monitor) => ({
       isCollectionDropping: monitor.isOver(),
+      isDraggingAnotherCollection: monitor.canDrop(),
     }),
   });
 
-  // Drag to reorder Collection
+  // Drag to reorder collection
   const [{ isCollectionDragging }, dragToReorderCollection] = useDrag({
     type: "collection",
     item: () => {
-      onChangeDragging(true);
       return {
         id: collection.id,
       };
@@ -164,11 +150,25 @@ function CollectionLink({
     canDrag: () => {
       return can.move;
     },
-    end: () => {
-      onChangeDragging(false);
-    },
   });
 
+  const isDraggingAnyCollection =
+    isDraggingAnotherCollection || isCollectionDragging;
+
+  React.useEffect(() => {
+    // If we're viewing a starred document through the starred menu then don't
+    // touch the expanded / collapsed state of the collections
+    if (search === "?starred") {
+      return;
+    }
+
+    if (isDraggingAnyCollection) {
+      setExpanded(false);
+    } else {
+      setExpanded(collection.id === ui.activeCollectionId);
+    }
+  }, [isDraggingAnyCollection, collection.id, ui.activeCollectionId, search]);
+
   return (
     <>
       <div

app/components/Sidebar/components/Collections.tsx

@@ -26,9 +26,6 @@ function Collections() {
   const isPreloaded = !!collections.orderedData.length;
   const { t } = useTranslation();
   const orderedCollections = collections.orderedData;
-  const [isDraggingAnyCollection, setIsDraggingAnyCollection] = React.useState(
-    false
-  );
 
   React.useEffect(() => {
     async function load() {
@@ -85,8 +82,6 @@ function Collections() {
           activeDocument={documents.active}
           prefetchDocument={documents.prefetchDocument}
           canUpdate={policies.abilities(collection.id).update}
-          isDraggingAnyCollection={isDraggingAnyCollection}
-          onChangeDragging={setIsDraggingAnyCollection}
           belowCollection={orderedCollections[index + 1]}
         />
       ))}

app/components/Sidebar/components/DocumentLink.tsx

@@ -197,7 +197,7 @@ function DocumentLink(
   });
 
   // Drop to reorder
-  const [{ isOverReorder }, dropToReorder] = useDrop({
+  const [{ isOverReorder, isDraggingAnyDocument }, dropToReorder] = useDrop({
     accept: "document",
     drop: (item: DragObject) => {
       if (!collection) return;
@@ -212,6 +212,7 @@ function DocumentLink(
     },
     collect: (monitor) => ({
       isOverReorder: !!monitor.isOver(),
+      isDraggingAnyDocument: !!monitor.canDrop(),
     }),
   });
 
@@ -274,7 +275,7 @@ function DocumentLink(
             </DropToImport>
           </div>
         </Draggable>
-        {manualSort && (
+        {manualSort && isDraggingAnyDocument && (
           <DropCursor isActiveDrop={isOverReorder} innerRef={dropToReorder} />
         )}
       </Relative>