feat: Add ability to star collection (#3327)

* Migrations, models, commands

* ui

* Move starred hint to location state

* lint

* tsc

* refactor

* Add collection empty state in expanded sidebar

* Add empty placeholder within starred collections

* Drag and drop improves, Relative refactor

* fix: Starring untitled draft leaves empty space

* fix: Creating draft in starred collection shouldnt open main

* fix: Dupe drop cursor

* Final fixes

* fix: Canonical redirect replaces starred location state

* fix: Don't show reorder cursor at the top of collection with no permission to edit when dragging

app/components/Sidebar/components/CollectionLink.tsx

@@ -1,18 +1,15 @@
-import fractionalIndex from "fractional-index";
+import { Location } from "history";
 import { observer } from "mobx-react";
 import { PlusIcon } from "outline-icons";
 import * as React from "react";
-import { useDrop, useDrag, DropTargetMonitor } from "react-dnd";
+import { useDrop } from "react-dnd";
 import { useTranslation } from "react-i18next";
-import { useLocation, useHistory } from "react-router-dom";
-import styled from "styled-components";
-import { sortNavigationNodes } from "@shared/utils/collections";
+import { useHistory } from "react-router-dom";
 import Collection from "~/models/Collection";
 import Document from "~/models/Document";
 import DocumentReparent from "~/scenes/DocumentReparent";
 import CollectionIcon from "~/components/CollectionIcon";
 import Fade from "~/components/Fade";
-import Modal from "~/components/Modal";
 import NudeButton from "~/components/NudeButton";
 import { createDocument } from "~/actions/definitions/documents";
 import useActionContext from "~/hooks/useActionContext";
@@ -21,40 +18,36 @@ import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
 import CollectionMenu from "~/menus/CollectionMenu";
 import { NavigationNode } from "~/types";
-import DocumentLink from "./DocumentLink";
-import DropCursor from "./DropCursor";
 import DropToImport from "./DropToImport";
 import EditableTitle from "./EditableTitle";
+import Relative from "./Relative";
 import SidebarLink, { DragObject } from "./SidebarLink";
+import { useStarredContext } from "./StarredContext";
 
 type Props = {
   collection: Collection;
-  canUpdate: boolean;
-  activeDocument: Document | null | undefined;
-  prefetchDocument: (id: string) => Promise<Document | void>;
-  belowCollection: Collection | void;
+  expanded?: boolean;
+  onDisclosureClick: (ev: React.MouseEvent<HTMLButtonElement>) => void;
+  activeDocument: Document | undefined;
+  isDraggingAnyCollection?: boolean;
 };
 
-function CollectionLink({
+const CollectionLink: React.FC<Props> = ({
   collection,
-  activeDocument,
-  prefetchDocument,
-  canUpdate,
-  belowCollection,
-}: Props) {
-  const history = useHistory();
-  const { t } = useTranslation();
-  const { search } = useLocation();
-  const [menuOpen, handleMenuOpen, handleMenuClose] = useBoolean();
-  const [
-    permissionOpen,
-    handlePermissionOpen,
-    handlePermissionClose,
-  ] = useBoolean();
+  expanded,
+  onDisclosureClick,
+  isDraggingAnyCollection,
+}) => {
   const itemRef = React.useRef<
     NavigationNode & { depth: number; active: boolean; collectionId: string }
   >();
+  const { dialogs, documents, collections } = useStores();
+  const [menuOpen, handleMenuOpen, handleMenuClose] = useBoolean();
   const [isEditing, setIsEditing] = React.useState(false);
+  const canUpdate = usePolicy(collection.id).update;
+  const { t } = useTranslation();
+  const history = useHistory();
+  const inStarredSection = useStarredContext();
 
   const handleTitleChange = React.useCallback(
     async (name: string) => {
@@ -66,26 +59,6 @@ function CollectionLink({
     [collection, history]
   );
 
-  const handleTitleEditing = React.useCallback((isEditing: boolean) => {
-    setIsEditing(isEditing);
-  }, []);
-
-  const { ui, documents, collections } = useStores();
-  const [expanded, setExpanded] = React.useState(
-    collection.id === ui.activeCollectionId
-  );
-
-  const [openedOnce, setOpenedOnce] = React.useState(expanded);
-  React.useEffect(() => {
-    if (expanded) {
-      setOpenedOnce(true);
-    }
-  }, [expanded]);
-
-  const manualSort = collection.sort.field === "index";
-  const can = usePolicy(collection.id);
-  const belowCollectionIndex = belowCollection ? belowCollection.index : null;
-
   // Drop to re-parent document
   const [{ isOver, canDrop }, drop] = useDrop({
     accept: "document",
@@ -111,14 +84,23 @@ function CollectionLink({
         prevCollection.permission !== collection.permission
       ) {
         itemRef.current = item;
-        handlePermissionOpen();
+
+        dialogs.openModal({
+          title: t("Move document"),
+          content: (
+            <DocumentReparent
+              item={item}
+              collection={collection}
+              onSubmit={dialogs.closeAllModals}
+              onCancel={dialogs.closeAllModals}
+            />
+          ),
+        });
       } else {
         documents.move(id, collection.id);
       }
     },
-    canDrop: () => {
-      return can.update;
-    },
+    canDrop: () => canUpdate,
     collect: (monitor) => ({
       isOver: !!monitor.isOver({
         shallow: true,
@@ -127,224 +109,69 @@ function CollectionLink({
     }),
   });
 
-  // Drop to reorder document
-  const [{ isOverReorder }, dropToReorder] = useDrop({
-    accept: "document",
-    drop: (item: DragObject) => {
-      if (!collection) {
-        return;
-      }
-      documents.move(item.id, collection.id, undefined, 0);
-    },
-    collect: (monitor) => ({
-      isOverReorder: !!monitor.isOver(),
-    }),
-  });
-
-  // Drop to reorder collection
-  const [
-    { isCollectionDropping, isDraggingAnyCollection },
-    dropToReorderCollection,
-  ] = useDrop({
-    accept: "collection",
-    drop: (item: DragObject) => {
-      collections.move(
-        item.id,
-        fractionalIndex(collection.index, belowCollectionIndex)
-      );
-    },
-    canDrop: (item) => {
-      return (
-        collection.id !== item.id &&
-        (!belowCollection || item.id !== belowCollection.id)
-      );
-    },
-    collect: (monitor: DropTargetMonitor<Collection, Collection>) => ({
-      isCollectionDropping: monitor.isOver(),
-      isDraggingAnyCollection: monitor.getItemType() === "collection",
-    }),
-  });
-
-  // Drag to reorder collection
-  const [{ isCollectionDragging }, dragToReorderCollection] = useDrag({
-    type: "collection",
-    item: () => {
-      return {
-        id: collection.id,
-      };
-    },
-    collect: (monitor) => ({
-      isCollectionDragging: monitor.isDragging(),
-    }),
-    canDrag: () => {
-      return can.move;
-    },
-  });
-
-  const collectionDocuments = React.useMemo(() => {
-    if (
-      activeDocument?.isActive &&
-      activeDocument?.isDraft &&
-      activeDocument?.collectionId === collection.id &&
-      !activeDocument?.parentDocumentId
-    ) {
-      return sortNavigationNodes(
-        [activeDocument.asNavigationNode, ...collection.documents],
-        collection.sort
-      );
-    }
-
-    return collection.documents;
-  }, [
-    activeDocument?.isActive,
-    activeDocument?.isDraft,
-    activeDocument?.collectionId,
-    activeDocument?.parentDocumentId,
-    activeDocument?.asNavigationNode,
-    collection.documents,
-    collection.id,
-    collection.sort,
-  ]);
-
-  const displayDocumentLinks = expanded && !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 (collection.id === ui.activeCollectionId) {
-      setExpanded(true);
-    }
-  }, [collection.id, ui.activeCollectionId, search]);
+  const handleTitleEditing = React.useCallback((isEditing: boolean) => {
+    setIsEditing(isEditing);
+  }, []);
 
   const context = useActionContext({
     activeCollectionId: collection.id,
+    inStarredSection,
   });
 
   return (
     <>
       <Relative ref={drop}>
-        <Draggable
-          key={collection.id}
-          ref={dragToReorderCollection}
-          $isDragging={isCollectionDragging}
-          $isMoving={isCollectionDragging}
-        >
-          <DropToImport collectionId={collection.id}>
-            <SidebarLink
-              to={collection.url}
-              expanded={displayDocumentLinks}
-              onDisclosureClick={(event) => {
-                event.preventDefault();
-                setExpanded((prev) => !prev);
-              }}
-              icon={
-                <CollectionIcon
-                  collection={collection}
-                  expanded={displayDocumentLinks}
-                />
-              }
-              showActions={menuOpen}
-              isActiveDrop={isOver && canDrop}
-              label={
-                <EditableTitle
-                  title={collection.name}
-                  onSubmit={handleTitleChange}
-                  onEditing={handleTitleEditing}
-                  canUpdate={canUpdate}
-                />
-              }
-              exact={false}
-              depth={0}
-              menu={
-                !isEditing &&
-                !isDraggingAnyCollection && (
-                  <Fade>
-                    <NudeButton
-                      tooltip={{ tooltip: t("New doc"), delay: 500 }}
-                      action={createDocument}
-                      context={context}
-                      hideOnActionDisabled
-                    >
-                      <PlusIcon />
-                    </NudeButton>
-                    <CollectionMenu
-                      collection={collection}
-                      onOpen={handleMenuOpen}
-                      onClose={handleMenuClose}
-                    />
-                  </Fade>
-                )
-              }
-            />
-          </DropToImport>
-        </Draggable>
-      </Relative>
-      <Relative>
-        {openedOnce && (
-          <Folder $open={displayDocumentLinks}>
-            {manualSort && (
-              <DropCursor
-                isActiveDrop={isOverReorder}
-                innerRef={dropToReorder}
-                position="top"
-              />
-            )}
-            {collectionDocuments.map((node, index) => (
-              <DocumentLink
-                key={node.id}
-                node={node}
-                collection={collection}
-                activeDocument={activeDocument}
-                prefetchDocument={prefetchDocument}
+        <DropToImport collectionId={collection.id}>
+          <SidebarLink
+            to={{
+              pathname: collection.url,
+              state: { starred: inStarredSection },
+            }}
+            expanded={expanded}
+            onDisclosureClick={onDisclosureClick}
+            icon={
+              <CollectionIcon collection={collection} expanded={expanded} />
+            }
+            showActions={menuOpen}
+            isActiveDrop={isOver && canDrop}
+            isActive={(match, location: Location<{ starred?: boolean }>) =>
+              !!match && location.state?.starred === inStarredSection
+            }
+            label={
+              <EditableTitle
+                title={collection.name}
+                onSubmit={handleTitleChange}
+                onEditing={handleTitleEditing}
                 canUpdate={canUpdate}
-                isDraft={node.isDraft}
-                depth={2}
-                index={index}
               />
-            ))}
-          </Folder>
-        )}
-        {isDraggingAnyCollection && (
-          <DropCursor
-            isActiveDrop={isCollectionDropping}
-            innerRef={dropToReorderCollection}
+            }
+            exact={false}
+            depth={0}
+            menu={
+              !isEditing &&
+              !isDraggingAnyCollection && (
+                <Fade>
+                  <NudeButton
+                    tooltip={{ tooltip: t("New doc"), delay: 500 }}
+                    action={createDocument}
+                    context={context}
+                    hideOnActionDisabled
+                  >
+                    <PlusIcon />
+                  </NudeButton>
+                  <CollectionMenu
+                    collection={collection}
+                    onOpen={handleMenuOpen}
+                    onClose={handleMenuClose}
+                  />
+                </Fade>
+              )
+            }
           />
-        )}
+        </DropToImport>
       </Relative>
-
-      <Modal
-        title={t("Move document")}
-        onRequestClose={handlePermissionClose}
-        isOpen={permissionOpen}
-      >
-        {itemRef.current && (
-          <DocumentReparent
-            item={itemRef.current}
-            collection={collection}
-            onSubmit={handlePermissionClose}
-            onCancel={handlePermissionClose}
-          />
-        )}
-      </Modal>
     </>
   );
-}
-
-const Relative = styled.div`
-  position: relative;
-`;
-
-const Folder = styled.div<{ $open?: boolean }>`
-  display: ${(props) => (props.$open ? "block" : "none")};
-`;
-
-const Draggable = styled("div")<{ $isDragging: boolean; $isMoving: boolean }>`
-  opacity: ${(props) => (props.$isDragging || props.$isMoving ? 0.5 : 1)};
-  pointer-events: ${(props) => (props.$isMoving ? "none" : "auto")};
-`;
+};
 
 export default observer(CollectionLink);