feat: reordering documents in collection (#1722)

* tweaking effect details

* wrap work on this feature

* adds correct color to drop cursor

* simplify logic for early return

* much better comment so Tom doesn't fire me

* feat: Allow changing sort order of collections

* refactor: Move validation to model
feat: Make custom order the default (in prep for dnd)

* feat: Add sort choice to edit collection modal
fix: Improved styling of generic InputSelect

* fix: Vertical space left after removing previous collection description

* chore: Tweak language, menu contents, add auto-disclosure on sub menus

* only show drop-to-reorder cursor when sort is set to manual

Co-authored-by: Tom Moor <tom.moor@gmail.com>

app/components/Sidebar/components/CollectionLink.js

@@ -8,6 +8,7 @@ import Document from "models/Document";
 import CollectionIcon from "components/CollectionIcon";
 import DropToImport from "components/DropToImport";
 import DocumentLink from "./DocumentLink";
+import DropCursor from "./DropCursor";
 import EditableTitle from "./EditableTitle";
 import SidebarLink from "./SidebarLink";
 import useStores from "hooks/useStores";
@@ -39,11 +40,13 @@ function CollectionLink({
 
   const { documents, policies } = useStores();
   const expanded = collection.id === ui.activeCollectionId;
+  const manualSort = collection.sort.field === "index";
 
-  // Droppable
+  // Drop to re-parent
   const [{ isOver, canDrop }, drop] = useDrop({
     accept: "document",
     drop: (item, monitor) => {
+      if (monitor.didDrop()) return;
       if (!collection) return;
       documents.move(item.id, collection.id);
     },
@@ -51,14 +54,26 @@ function CollectionLink({
       return policies.abilities(collection.id).update;
     },
     collect: (monitor) => ({
-      isOver: !!monitor.isOver(),
+      isOver: !!monitor.isOver({ shallow: true }),
       canDrop: monitor.canDrop(),
     }),
   });
 
+  // Drop to reorder
+  const [{ isOverReorder }, dropToReorder] = useDrop({
+    accept: "document",
+    drop: async (item, monitor) => {
+      if (!collection) return;
+      documents.move(item.id, collection.id, undefined, 0);
+    },
+    collect: (monitor) => ({
+      isOverReorder: !!monitor.isOver(),
+    }),
+  });
+
   return (
     <>
-      <div ref={drop}>
+      <div ref={drop} style={{ position: "relative" }}>
         <DropToImport key={collection.id} collectionId={collection.id}>
           <SidebarLink
             key={collection.id}
@@ -88,10 +103,13 @@ function CollectionLink({
             }
           ></SidebarLink>
         </DropToImport>
+        {expanded && manualSort && (
+          <DropCursor isActiveDrop={isOverReorder} innerRef={dropToReorder} />
+        )}
       </div>
 
       {expanded &&
-        collection.documents.map((node) => (
+        collection.documents.map((node, index) => (
           <DocumentLink
             key={node.id}
             node={node}
@@ -100,6 +118,7 @@ function CollectionLink({
             prefetchDocument={prefetchDocument}
             canUpdate={canUpdate}
             depth={1.5}
+            index={index}
           />
         ))}
     </>