feat: Drag document into starred section to star

app/components/Sidebar/components/Starred.tsx

@@ -13,14 +13,14 @@ import DropCursor from "./DropCursor";
 import Header from "./Header";
 import PlaceholderCollections from "./PlaceholderCollections";
 import Relative from "./Relative";
-import SidebarLink from "./SidebarLink";
+import SidebarLink, { DragObject } from "./SidebarLink";
 import StarredContext from "./StarredContext";
 import StarredLink from "./StarredLink";
 
 const STARRED_PAGINATION_LIMIT = 10;
 
 function Starred() {
-  const { stars } = useStores();
+  const { documents, stars } = useStores();
   const { t } = useTranslation();
 
   const { loading, next, end, error, page } = usePaginatedRequest<Star>(
@@ -30,7 +30,7 @@ function Starred() {
     }
   );
 
-  // Drop to reorder document
+  // Drop to reorder star
   const [{ isOverReorder, isDraggingAnyStar }, dropToReorder] = useDrop({
     accept: "star",
     drop: async (item: { star: Star }) => {
@@ -44,9 +44,25 @@ function Starred() {
     }),
   });
 
-  if (error) {
+  // Drop to star document
-    toast.error(t("Could not load starred documents"));
+  const [{ documentIsOverReorder, isDraggingAnyDocument }, dropToStar] =
-  }
+    useDrop({
+      accept: "document",
+      drop: async (item: DragObject) => {
+        const document = documents.get(item.id);
+        await document?.star(fractionalIndex(null, stars.orderedData[0].index));
+      },
+      collect: (monitor) => ({
+        documentIsOverReorder: !!monitor.isOver(),
+        isDraggingAnyDocument: monitor.getItemType() === "document",
+      }),
+    });
+
+  React.useEffect(() => {
+    if (error) {
+      toast.error(t("Could not load starred documents"));
+    }
+  }, [t, error]);
 
   if (!stars.orderedData.length) {
     return null;
@@ -64,6 +80,13 @@ function Starred() {
                 position="top"
               />
             )}
+            {isDraggingAnyDocument && (
+              <DropCursor
+                isActiveDrop={documentIsOverReorder}
+                innerRef={dropToStar}
+                position="top"
+              />
+            )}
             {stars.orderedData
               .slice(0, page * STARRED_PAGINATION_LIMIT)
               .map((star) => (

app/components/Sidebar/components/StarredLink.tsx

@@ -21,7 +21,7 @@ import DocumentLink from "./DocumentLink";
 import DropCursor from "./DropCursor";
 import Folder from "./Folder";
 import Relative from "./Relative";
-import SidebarLink from "./SidebarLink";
+import SidebarLink, { DragObject } from "./SidebarLink";
 
 type Props = {
   star: Star;
@@ -135,8 +135,39 @@ function StarredLink({ star }: Props) {
     }),
   });
 
+  // Drop to star document
+  const [{ documentIsOverReorder, isDraggingAnyDocument }, dropToStar] =
+    useDrop({
+      accept: "document",
+      drop: async (item: DragObject) => {
+        const next = star?.next();
+        const document = documents.get(item.id);
+        await document?.star(
+          fractionalIndex(star?.index || null, next?.index || null)
+        );
+      },
+      collect: (monitor) => ({
+        documentIsOverReorder: !!monitor.isOver(),
+        isDraggingAnyDocument: monitor.getItemType() === "document",
+      }),
+    });
+
   const displayChildDocuments = expanded && !isDragging;
 
+  const cursor = (
+    <>
+      {isDraggingAny && (
+        <DropCursor isActiveDrop={isOverReorder} innerRef={dropToReorder} />
+      )}
+      {isDraggingAnyDocument && (
+        <DropCursor
+          isActiveDrop={documentIsOverReorder}
+          innerRef={dropToStar}
+        />
+      )}
+    </>
+  );
+
   if (documentId) {
     const document = documents.get(documentId);
     if (!document) {
@@ -200,9 +231,7 @@ function StarredLink({ star }: Props) {
               />
             ))}
           </Folder>
-          {isDraggingAny && (
+          {cursor}
-            <DropCursor isActiveDrop={isOverReorder} innerRef={dropToReorder} />
-          )}
         </Relative>
       </>
     );
@@ -225,9 +254,7 @@ function StarredLink({ star }: Props) {
             collection={collection}
             expanded={displayChildDocuments}
           />
-          {isDraggingAny && (
+          {cursor}
-            <DropCursor isActiveDrop={isOverReorder} innerRef={dropToReorder} />
-          )}
         </Relative>
       </>
     );

app/models/Document.ts

@@ -343,7 +343,7 @@ export default class Document extends ParanoidModel {
   };
 
   @action
-  star = () => this.store.star(this);
+  star = (index?: string) => this.store.star(this, index);
 
   @action
   unstar = () => this.store.unstar(this);

app/stores/DocumentsStore.ts

@@ -728,9 +728,10 @@ export default class DocumentsStore extends Store<Document> {
     });
   };
 
-  star = (document: Document) =>
+  star = (document: Document, index?: string) =>
     this.rootStore.stars.create({
       documentId: document.id,
+      index,
     });
 
   unstar = (document: Document) => {