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
2022-04-03 18:51:01 -07:00
parent 3de06b8005
commit 84d6bf8ddf
36 changed files with 988 additions and 635 deletions
--- a/app/actions/definitions/collections.tsx
+++ b/app/actions/definitions/collections.tsx
@@ -1,4 +1,10 @@
-import { CollectionIcon, EditIcon, PlusIcon } from "outline-icons";
+import {
+  CollectionIcon,
+  EditIcon,
+  PlusIcon,
+  StarredIcon,
+  UnstarredIcon,
+} from "outline-icons";
 import * as React from "react";
 import stores from "~/stores";
 import Collection from "~/models/Collection";
@@ -73,4 +79,59 @@ export const editCollection = createAction({
  },
 });

-export const rootCollectionActions = [openCollection, createCollection];
+export const starCollection = createAction({
+  name: ({ t }) => t("Star"),
+  section: CollectionSection,
+  icon: <StarredIcon />,
+  keywords: "favorite bookmark",
+  visible: ({ activeCollectionId, stores }) => {
+    if (!activeCollectionId) {
+      return false;
+    }
+    const collection = stores.collections.get(activeCollectionId);
+    return (
+      !collection?.isStarred &&
+      stores.policies.abilities(activeCollectionId).star
+    );
+  },
+  perform: ({ activeCollectionId, stores }) => {
+    if (!activeCollectionId) {
+      return;
+    }
+
+    const collection = stores.collections.get(activeCollectionId);
+    collection?.star();
+  },
+});
+
+export const unstarCollection = createAction({
+  name: ({ t }) => t("Unstar"),
+  section: CollectionSection,
+  icon: <UnstarredIcon />,
+  keywords: "unfavorite unbookmark",
+  visible: ({ activeCollectionId, stores }) => {
+    if (!activeCollectionId) {
+      return false;
+    }
+    const collection = stores.collections.get(activeCollectionId);
+    return (
+      !!collection?.isStarred &&
+      stores.policies.abilities(activeCollectionId).unstar
+    );
+  },
+  perform: ({ activeCollectionId, stores }) => {
+    if (!activeCollectionId) {
+      return;
+    }
+
+    const collection = stores.collections.get(activeCollectionId);
+    collection?.unstar();
+  },
+});
+
+export const rootCollectionActions = [
+  openCollection,
+  createCollection,
+  starCollection,
+  unstarCollection,
+];
--- a/app/actions/definitions/documents.tsx
+++ b/app/actions/definitions/documents.tsx
@@ -52,8 +52,11 @@ export const createDocument = createAction({
  visible: ({ activeCollectionId, stores }) =>
    !!activeCollectionId &&
    stores.policies.abilities(activeCollectionId).update,
-  perform: ({ activeCollectionId }) =>
-    activeCollectionId && history.push(newDocumentPath(activeCollectionId)),
+  perform: ({ activeCollectionId, inStarredSection }) =>
+    activeCollectionId &&
+    history.push(newDocumentPath(activeCollectionId), {
+      starred: inStarredSection,
+    }),
 });

 export const starDocument = createAction({
--- a/app/components/Sidebar/components/CollectionLink.tsx
+++ b/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);
--- a/app/components/Sidebar/components/CollectionLinkChildren.tsx
+++ b/app/components/Sidebar/components/CollectionLinkChildren.tsx
@@ -0,0 +1,91 @@
+import { observer } from "mobx-react";
+import * as React from "react";
+import { useDrop } from "react-dnd";
+import { useTranslation } from "react-i18next";
+import Collection from "~/models/Collection";
+import Document from "~/models/Document";
+import usePolicy from "~/hooks/usePolicy";
+import useStores from "~/hooks/useStores";
+import useToasts from "~/hooks/useToasts";
+import DocumentLink from "./DocumentLink";
+import DropCursor from "./DropCursor";
+import EmptyCollectionPlaceholder from "./EmptyCollectionPlaceholder";
+import Folder from "./Folder";
+import { DragObject } from "./SidebarLink";
+import useCollectionDocuments from "./useCollectionDocuments";
+
+type Props = {
+  collection: Collection;
+  expanded: boolean;
+  prefetchDocument?: (documentId: string) => Promise<Document | void>;
+};
+
+function CollectionLinkChildren({
+  collection,
+  expanded,
+  prefetchDocument,
+}: Props) {
+  const can = usePolicy(collection.id);
+  const { showToast } = useToasts();
+  const manualSort = collection.sort.field === "index";
+  const { documents } = useStores();
+  const { t } = useTranslation();
+
+  const childDocuments = useCollectionDocuments(collection, documents.active);
+
+  // Drop to reorder document
+  const [{ isOverReorder, isDraggingAnyDocument }, dropToReorder] = useDrop({
+    accept: "document",
+    drop: (item: DragObject) => {
+      if (!manualSort) {
+        showToast(
+          t(
+            "You can't reorder documents in an alphabetically sorted collection"
+          ),
+          {
+            type: "info",
+            timeout: 5000,
+          }
+        );
+        return;
+      }
+
+      if (!collection) {
+        return;
+      }
+      documents.move(item.id, collection.id, undefined, 0);
+    },
+    collect: (monitor) => ({
+      isOverReorder: !!monitor.isOver(),
+      isDraggingAnyDocument: !!monitor.canDrop(),
+    }),
+  });
+
+  return (
+    <Folder expanded={expanded}>
+      {isDraggingAnyDocument && can.update && (
+        <DropCursor
+          disabled={!manualSort}
+          isActiveDrop={isOverReorder}
+          innerRef={dropToReorder}
+          position="top"
+        />
+      )}
+      {childDocuments.map((node, index) => (
+        <DocumentLink
+          key={node.id}
+          node={node}
+          collection={collection}
+          activeDocument={documents.active}
+          prefetchDocument={prefetchDocument}
+          isDraft={node.isDraft}
+          depth={2}
+          index={index}
+        />
+      ))}
+      {childDocuments.length === 0 && <EmptyCollectionPlaceholder />}
+    </Folder>
+  );
+}
+
+export default observer(CollectionLinkChildren);
--- a/app/components/Sidebar/components/Collections.tsx
+++ b/app/components/Sidebar/components/Collections.tsx
@@ -3,24 +3,24 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { useDrop } from "react-dnd";
 import { useTranslation } from "react-i18next";
-import styled from "styled-components";
 import Collection from "~/models/Collection";
 import Fade from "~/components/Fade";
 import Flex from "~/components/Flex";
 import { createCollection } from "~/actions/definitions/collections";
 import useStores from "~/hooks/useStores";
 import useToasts from "~/hooks/useToasts";
-import CollectionLink from "./CollectionLink";
+import DraggableCollectionLink from "./DraggableCollectionLink";
 import DropCursor from "./DropCursor";
 import Header from "./Header";
 import PlaceholderCollections from "./PlaceholderCollections";
+import Relative from "./Relative";
 import SidebarAction from "./SidebarAction";
 import { DragObject } from "./SidebarLink";

 function Collections() {
  const [isFetching, setFetching] = React.useState(false);
  const [fetchError, setFetchError] = React.useState();
-  const { policies, documents, collections } = useStores();
+  const { documents, collections } = useStores();
  const { showToast } = useToasts();
  const [expanded, setExpanded] = React.useState(true);
  const isPreloaded = !!collections.orderedData.length;
@@ -82,12 +82,11 @@ function Collections() {
        />
      )}
      {orderedCollections.map((collection: Collection, index: number) => (
-        <CollectionLink
+        <DraggableCollectionLink
          key={collection.id}
          collection={collection}
          activeDocument={documents.active}
          prefetchDocument={documents.prefetchDocument}
-          canUpdate={policies.abilities(collection.id).update}
          belowCollection={orderedCollections[index + 1]}
        />
      ))}
@@ -116,8 +115,4 @@ function Collections() {
  );
 }

-const Relative = styled.div`
-  position: relative;
-`;
-
 export default observer(Collections);
--- a/app/components/Sidebar/components/DocumentLink.tsx
+++ b/app/components/Sidebar/components/DocumentLink.tsx
@@ -1,3 +1,4 @@
+import { Location } from "history";
 import { observer } from "mobx-react";
 import { PlusIcon } from "outline-icons";
 import * as React from "react";
@@ -13,6 +14,7 @@ import Fade from "~/components/Fade";
 import NudeButton from "~/components/NudeButton";
 import Tooltip from "~/components/Tooltip";
 import useBoolean from "~/hooks/useBoolean";
+import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
 import useToasts from "~/hooks/useToasts";
 import DocumentMenu from "~/menus/DocumentMenu";
@@ -21,24 +23,25 @@ import { newDocumentPath } from "~/utils/routeHelpers";
 import DropCursor from "./DropCursor";
 import DropToImport from "./DropToImport";
 import EditableTitle from "./EditableTitle";
+import Folder from "./Folder";
+import Relative from "./Relative";
 import SidebarLink, { DragObject } from "./SidebarLink";
+import { useStarredContext } from "./StarredContext";

 type Props = {
  node: NavigationNode;
-  canUpdate: boolean;
  collection?: Collection;
  activeDocument: Document | null | undefined;
-  prefetchDocument: (documentId: string) => Promise<Document | void>;
+  prefetchDocument?: (documentId: string) => Promise<Document | void>;
  isDraft?: boolean;
  depth: number;
  index: number;
  parentId?: string;
 };

-function DocumentLink(
+function InnerDocumentLink(
  {
    node,
-    canUpdate,
    collection,
    activeDocument,
    prefetchDocument,
@@ -52,12 +55,14 @@ function DocumentLink(
  const { showToast } = useToasts();
  const { documents, policies } = useStores();
  const { t } = useTranslation();
+  const canUpdate = usePolicy(node.id).update;
  const isActiveDocument = activeDocument && activeDocument.id === node.id;
  const hasChildDocuments =
    !!node.children.length || activeDocument?.parentDocumentId === node.id;
  const document = documents.get(node.id);
  const { fetchChildDocuments } = documents;
  const [isEditing, setIsEditing] = React.useState(false);
+  const inStarredSection = useStarredContext();

  React.useEffect(() => {
    if (isActiveDocument && hasChildDocuments) {
@@ -84,7 +89,6 @@ function DocumentLink(
  }, [hasChildDocuments, activeDocument, isActiveDocument, node, collection]);

  const [expanded, setExpanded] = React.useState(showChildren);
-  const [openedOnce, setOpenedOnce] = React.useState(expanded);

  React.useEffect(() => {
    if (showChildren) {
@@ -92,14 +96,7 @@ function DocumentLink(
    }
  }, [showChildren]);

-  React.useEffect(() => {
-    if (expanded) {
-      setOpenedOnce(true);
-    }
-  }, [expanded]);
-
-  // when the last child document is removed,
-  // also close the local folder state to closed
+  // when the last child document is removed auto-close the local folder state
  React.useEffect(() => {
    if (expanded && !hasChildDocuments) {
      setExpanded(false);
@@ -116,7 +113,7 @@ function DocumentLink(
  );

  const handleMouseEnter = React.useCallback(() => {
-    prefetchDocument(node.id);
+    prefetchDocument?.(node.id);
  }, [prefetchDocument, node]);

  const handleTitleChange = React.useCallback(
@@ -190,7 +187,7 @@ function DocumentLink(
      !isDraft &&
      !!pathToNode &&
      !pathToNode.includes(monitor.getItem<DragObject>().id),
-    hover: (item, monitor) => {
+    hover: (_item, monitor) => {
      // Enables expansion of document children when hovering over the document
      // for more than half a second.
      if (
@@ -314,6 +311,7 @@ function DocumentLink(
                  pathname: node.url,
                  state: {
                    title: node.title,
+                    starred: inStarredSection,
                  },
                }}
                label={
@@ -325,14 +323,14 @@ function DocumentLink(
                    maxLength={MAX_TITLE_LENGTH}
                  />
                }
-                isActive={(match, location) =>
-                  !!match && location.search !== "?starred"
+                isActive={(match, location: Location<{ starred?: boolean }>) =>
+                  !!match && location.state?.starred === inStarredSection
                }
                isActiveDrop={isOverReparent && canDropToReparent}
                depth={depth}
                exact={false}
                showActions={menuOpen}
-                scrollIntoViewIfNeeded={!document?.isStarred}
+                scrollIntoViewIfNeeded={!inStarredSection}
                isDraft={isDraft}
                ref={ref}
                menu={
@@ -375,41 +373,30 @@ function DocumentLink(
          />
        )}
      </Relative>
-      {openedOnce && (
-        <Folder $open={expanded && !isDragging}>
-          {nodeChildren.map((childNode, index) => (
-            <ObservedDocumentLink
-              key={childNode.id}
-              collection={collection}
-              node={childNode}
-              activeDocument={activeDocument}
-              prefetchDocument={prefetchDocument}
-              isDraft={childNode.isDraft}
-              depth={depth + 1}
-              canUpdate={canUpdate}
-              index={index}
-              parentId={node.id}
-            />
-          ))}
-        </Folder>
-      )}
+      <Folder expanded={expanded && !isDragging}>
+        {nodeChildren.map((childNode, index) => (
+          <DocumentLink
+            key={childNode.id}
+            collection={collection}
+            node={childNode}
+            activeDocument={activeDocument}
+            prefetchDocument={prefetchDocument}
+            isDraft={childNode.isDraft}
+            depth={depth + 1}
+            index={index}
+            parentId={node.id}
+          />
+        ))}
+      </Folder>
    </>
  );
 }

-const Folder = styled.div<{ $open?: boolean }>`
-  display: ${(props) => (props.$open ? "block" : "none")};
-`;
-
-const Relative = styled.div`
-  position: relative;
-`;
-
 const Draggable = styled.div<{ $isDragging?: boolean; $isMoving?: boolean }>`
  opacity: ${(props) => (props.$isDragging || props.$isMoving ? 0.5 : 1)};
  pointer-events: ${(props) => (props.$isMoving ? "none" : "all")};
 `;

-const ObservedDocumentLink = observer(React.forwardRef(DocumentLink));
+const DocumentLink = observer(React.forwardRef(InnerDocumentLink));

-export default ObservedDocumentLink;
+export default DocumentLink;
--- a/app/components/Sidebar/components/DraggableCollectionLink.tsx
+++ b/app/components/Sidebar/components/DraggableCollectionLink.tsx
@@ -0,0 +1,148 @@
+import fractionalIndex from "fractional-index";
+import { observer } from "mobx-react";
+import * as React from "react";
+import { useDrop, useDrag, DropTargetMonitor } from "react-dnd";
+import { useLocation } from "react-router-dom";
+import styled from "styled-components";
+import Collection from "~/models/Collection";
+import Document from "~/models/Document";
+import usePolicy from "~/hooks/usePolicy";
+import useStores from "~/hooks/useStores";
+import CollectionLink from "./CollectionLink";
+import CollectionLinkChildren from "./CollectionLinkChildren";
+import DropCursor from "./DropCursor";
+import Relative from "./Relative";
+import { DragObject } from "./SidebarLink";
+import { useStarredContext } from "./StarredContext";
+
+type Props = {
+  collection: Collection;
+  activeDocument: Document | undefined;
+  prefetchDocument: (id: string) => Promise<Document | void>;
+  belowCollection: Collection | void;
+};
+
+function useLocationStateStarred() {
+  const location = useLocation<{
+    starred?: boolean;
+  }>();
+  return location.state?.starred;
+}
+
+function DraggableCollectionLink({
+  collection,
+  activeDocument,
+  prefetchDocument,
+  belowCollection,
+}: Props) {
+  const locationStateStarred = useLocationStateStarred();
+  const { ui, collections } = useStores();
+  const inStarredSection = useStarredContext();
+  const [expanded, setExpanded] = React.useState(
+    collection.id === ui.activeCollectionId &&
+      locationStateStarred === inStarredSection
+  );
+  const can = usePolicy(collection.id);
+  const belowCollectionIndex = belowCollection ? belowCollection.index : null;
+
+  // 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;
+    },
+  });
+
+  // If the current collection is active and relevant to the sidebar section we
+  // are in then expand it automatically
+  React.useEffect(() => {
+    if (
+      collection.id === ui.activeCollectionId &&
+      locationStateStarred === inStarredSection
+    ) {
+      setExpanded(true);
+    }
+  }, [
+    collection.id,
+    ui.activeCollectionId,
+    locationStateStarred,
+    inStarredSection,
+  ]);
+
+  const handleDisclosureClick = React.useCallback((ev) => {
+    ev.preventDefault();
+    setExpanded((e) => !e);
+  }, []);
+
+  const displayChildDocuments = expanded && !isCollectionDragging;
+
+  return (
+    <>
+      <Draggable
+        key={collection.id}
+        ref={dragToReorderCollection}
+        $isDragging={isCollectionDragging}
+      >
+        <CollectionLink
+          collection={collection}
+          expanded={displayChildDocuments}
+          activeDocument={activeDocument}
+          onDisclosureClick={handleDisclosureClick}
+          isDraggingAnyCollection={isDraggingAnyCollection}
+        />
+      </Draggable>
+      <Relative>
+        <CollectionLinkChildren
+          collection={collection}
+          expanded={displayChildDocuments}
+          prefetchDocument={prefetchDocument}
+        />
+        {isDraggingAnyCollection && (
+          <DropCursor
+            isActiveDrop={isCollectionDropping}
+            innerRef={dropToReorderCollection}
+          />
+        )}
+      </Relative>
+    </>
+  );
+}
+
+const Draggable = styled("div")<{ $isDragging: boolean }>`
+  opacity: ${(props) => (props.$isDragging ? 0.5 : 1)};
+  pointer-events: ${(props) => (props.$isDragging ? "none" : "auto")};
+`;
+
+export default observer(DraggableCollectionLink);
--- a/app/components/Sidebar/components/EmptyCollectionPlaceholder.tsx
+++ b/app/components/Sidebar/components/EmptyCollectionPlaceholder.tsx
@@ -0,0 +1,22 @@
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import styled from "styled-components";
+import Text from "~/components/Text";
+
+const EmptyCollectionPlaceholder = () => {
+  const { t } = useTranslation();
+  return (
+    <Empty type="tertiary" size="small">
+      {t("Empty")}
+    </Empty>
+  );
+};
+
+const Empty = styled(Text)`
+  margin-left: 46px;
+  margin-bottom: 0;
+  line-height: 34px;
+  font-style: italic;
+`;
+
+export default EmptyCollectionPlaceholder;
--- a/app/components/Sidebar/components/Folder.tsx
+++ b/app/components/Sidebar/components/Folder.tsx
@@ -0,0 +1,29 @@
+import * as React from "react";
+import styled from "styled-components";
+
+type Props = {
+  expanded: boolean;
+};
+
+const Folder: React.FC<Props> = ({ expanded, children }) => {
+  const [openedOnce, setOpenedOnce] = React.useState(expanded);
+
+  // allows us to avoid rendering all children when the folder hasn't been opened
+  React.useEffect(() => {
+    if (expanded) {
+      setOpenedOnce(true);
+    }
+  }, [expanded]);
+
+  if (!openedOnce) {
+    return null;
+  }
+
+  return <Wrapper $expanded={expanded}>{children}</Wrapper>;
+};
+
+const Wrapper = styled.div<{ $expanded?: boolean }>`
+  display: ${(props) => (props.$expanded ? "block" : "none")};
+`;
+
+export default Folder;
--- a/app/components/Sidebar/components/Relative.tsx
+++ b/app/components/Sidebar/components/Relative.tsx
@@ -0,0 +1,7 @@
+import styled from "styled-components";
+
+const Relative = styled.div`
+  position: relative;
+`;
+
+export default Relative;
--- a/app/components/Sidebar/components/Starred.tsx
+++ b/app/components/Sidebar/components/Starred.tsx
@@ -3,7 +3,6 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { useDrop } from "react-dnd";
 import { useTranslation } from "react-i18next";
-import styled from "styled-components";
 import Star from "~/models/Star";
 import Flex from "~/components/Flex";
 import useStores from "~/hooks/useStores";
@@ -11,7 +10,9 @@ import useToasts from "~/hooks/useToasts";
 import DropCursor from "./DropCursor";
 import Header from "./Header";
 import PlaceholderCollections from "./PlaceholderCollections";
+import Relative from "./Relative";
 import SidebarLink from "./SidebarLink";
+import StarredContext from "./StarredContext";
 import StarredLink from "./StarredLink";

 const STARRED_PAGINATION_LIMIT = 10;
@@ -25,7 +26,7 @@ function Starred() {
  const [offset, setOffset] = React.useState(0);
  const [upperBound, setUpperBound] = React.useState(STARRED_PAGINATION_LIMIT);
  const { showToast } = useToasts();
-  const { stars, documents } = useStores();
+  const { stars } = useStores();
  const { t } = useTranslation();

  const fetchResults = React.useCallback(async () => {
@@ -123,59 +124,45 @@ function Starred() {
  }

  return (
-    <Flex column>
-      <Header onClick={handleExpandClick} expanded={expanded}>
-        {t("Starred")}
-      </Header>
-      {expanded && (
-        <Relative>
-          <DropCursor
-            isActiveDrop={isOverReorder}
-            innerRef={dropToReorder}
-            position="top"
-          />
-          {stars.orderedData.slice(0, upperBound).map((star) => {
-            const document = documents.get(star.documentId);
-
-            return document ? (
-              <StarredLink
-                key={star.id}
-                star={star}
-                documentId={document.id}
-                collectionId={document.collectionId}
-                to={document.url}
-                title={document.title}
+    <StarredContext.Provider value={true}>
+      <Flex column>
+        <Header onClick={handleExpandClick} expanded={expanded}>
+          {t("Starred")}
+        </Header>
+        {expanded && (
+          <Relative>
+            <DropCursor
+              isActiveDrop={isOverReorder}
+              innerRef={dropToReorder}
+              position="top"
+            />
+            {stars.orderedData.slice(0, upperBound).map((star) => (
+              <StarredLink key={star.id} star={star} />
+            ))}
+            {show === "More" && !isFetching && (
+              <SidebarLink
+                onClick={handleShowMore}
+                label={`${t("Show more")}…`}
                depth={0}
              />
-            ) : null;
-          })}
-          {show === "More" && !isFetching && (
-            <SidebarLink
-              onClick={handleShowMore}
-              label={`${t("Show more")}…`}
-              depth={0}
-            />
-          )}
-          {show === "Less" && !isFetching && (
-            <SidebarLink
-              onClick={handleShowLess}
-              label={`${t("Show less")}…`}
-              depth={0}
-            />
-          )}
-          {(isFetching || fetchError) && !stars.orderedData.length && (
-            <Flex column>
-              <PlaceholderCollections />
-            </Flex>
-          )}
-        </Relative>
-      )}
-    </Flex>
+            )}
+            {show === "Less" && !isFetching && (
+              <SidebarLink
+                onClick={handleShowLess}
+                label={`${t("Show less")}…`}
+                depth={0}
+              />
+            )}
+            {(isFetching || fetchError) && !stars.orderedData.length && (
+              <Flex column>
+                <PlaceholderCollections />
+              </Flex>
+            )}
+          </Relative>
+        )}
+      </Flex>
+    </StarredContext.Provider>
  );
 }

-const Relative = styled.div`
-  position: relative;
-`;
-
 export default observer(Starred);
--- a/app/components/Sidebar/components/StarredContext.ts
+++ b/app/components/Sidebar/components/StarredContext.ts
@@ -0,0 +1,7 @@
+import * as React from "react";
+
+const StarredContext = React.createContext<boolean | undefined>(undefined);
+
+export const useStarredContext = () => React.useContext(StarredContext);
+
+export default StarredContext;
--- a/app/components/Sidebar/components/StarredLink.tsx
+++ b/app/components/Sidebar/components/StarredLink.tsx
@@ -1,9 +1,11 @@
 import fractionalIndex from "fractional-index";
+import { Location } from "history";
 import { observer } from "mobx-react";
 import { StarredIcon } from "outline-icons";
 import * as React from "react";
 import { useEffect, useState } from "react";
 import { useDrag, useDrop } from "react-dnd";
+import { useLocation } from "react-router-dom";
 import styled, { useTheme } from "styled-components";
 import parseTitle from "@shared/utils/parseTitle";
 import Star from "~/models/Star";
@@ -12,46 +14,51 @@ import Fade from "~/components/Fade";
 import useBoolean from "~/hooks/useBoolean";
 import useStores from "~/hooks/useStores";
 import DocumentMenu from "~/menus/DocumentMenu";
+import CollectionLink from "./CollectionLink";
+import CollectionLinkChildren from "./CollectionLinkChildren";
+import DocumentLink from "./DocumentLink";
 import DropCursor from "./DropCursor";
+import Folder from "./Folder";
+import Relative from "./Relative";
 import SidebarLink from "./SidebarLink";

 type Props = {
-  star?: Star;
-  depth: number;
-  title: string;
-  to: string;
-  documentId: string;
-  collectionId: string;
+  star: Star;
 };

-function StarredLink({
-  depth,
-  to,
-  documentId,
-  title,
-  collectionId,
-  star,
-}: Props) {
+function useLocationStateStarred() {
+  const location = useLocation<{
+    starred?: boolean;
+  }>();
+  return location.state?.starred;
+}
+
+function StarredLink({ star }: Props) {
  const theme = useTheme();
-  const { collections, documents } = useStores();
-  const collection = collections.get(collectionId);
-  const document = documents.get(documentId);
-  const [expanded, setExpanded] = useState(false);
+  const { ui, collections, documents } = useStores();
  const [menuOpen, handleMenuOpen, handleMenuClose] = useBoolean();
-  const childDocuments = collection
-    ? collection.getDocumentChildren(documentId)
-    : [];
-  const hasChildDocuments = childDocuments.length > 0;
+  const { documentId, collectionId } = star;
+  const collection = collections.get(collectionId);
+  const locationStateStarred = useLocationStateStarred();
+  const [expanded, setExpanded] = useState(
+    star.collectionId === ui.activeCollectionId && !!locationStateStarred
+  );
+
+  React.useEffect(() => {
+    if (star.collectionId === ui.activeCollectionId && locationStateStarred) {
+      setExpanded(true);
+    }
+  }, [star.collectionId, ui.activeCollectionId, locationStateStarred]);

  useEffect(() => {
    async function load() {
-      if (!document) {
+      if (documentId) {
        await documents.fetch(documentId);
      }
    }

    load();
-  }, [collection, collectionId, collections, document, documentId, documents]);
+  }, [documentId, documents]);

  const handleDisclosureClick = React.useCallback(
    (ev: React.MouseEvent<HTMLButtonElement>) => {
@@ -69,9 +76,7 @@ function StarredLink({
    collect: (monitor) => ({
      isDragging: !!monitor.isDragging(),
    }),
-    canDrag: () => {
-      return depth === 0;
-    },
+    canDrag: () => true,
  });

  // Drop to reorder
@@ -90,61 +95,109 @@ function StarredLink({
    }),
  });

-  const { emoji } = parseTitle(title);
-  const label = emoji ? title.replace(emoji, "") : title;
+  const displayChildDocuments = expanded && !isDragging;

-  return (
-    <>
-      <Draggable key={documentId} ref={drag} $isDragging={isDragging}>
-        <SidebarLink
-          depth={depth}
-          expanded={hasChildDocuments ? expanded : undefined}
-          onDisclosureClick={handleDisclosureClick}
-          to={`${to}?starred`}
-          icon={
-            depth === 0 ? (
+  if (documentId) {
+    const document = documents.get(documentId);
+    if (!document) {
+      return null;
+    }
+
+    const collection = collections.get(document.collectionId);
+    const { emoji } = parseTitle(document.title);
+    const label = emoji
+      ? document.title.replace(emoji, "")
+      : document.titleWithDefault;
+    const childDocuments = collection
+      ? collection.getDocumentChildren(documentId)
+      : [];
+    const hasChildDocuments = childDocuments.length > 0;
+
+    return (
+      <>
+        <Draggable key={star.id} ref={drag} $isDragging={isDragging}>
+          <SidebarLink
+            depth={0}
+            to={{
+              pathname: document.url,
+              state: { starred: true },
+            }}
+            expanded={hasChildDocuments && !isDragging ? expanded : undefined}
+            onDisclosureClick={handleDisclosureClick}
+            icon={
              emoji ? (
                <EmojiIcon emoji={emoji} />
              ) : (
                <StarredIcon color={theme.yellow} />
              )
-            ) : undefined
-          }
-          isActive={(match, location) =>
-            !!match && location.search === "?starred"
-          }
-          label={depth === 0 ? label : title}
-          exact={false}
-          showActions={menuOpen}
-          menu={
-            document ? (
-              <Fade>
-                <DocumentMenu
-                  document={document}
-                  onOpen={handleMenuOpen}
-                  onClose={handleMenuClose}
-                />
-              </Fade>
-            ) : undefined
-          }
-        />
-        {isDraggingAny && (
-          <DropCursor isActiveDrop={isOverReorder} innerRef={dropToReorder} />
-        )}
-      </Draggable>
-      {expanded &&
-        childDocuments.map((childDocument) => (
-          <ObserveredStarredLink
-            key={childDocument.id}
-            depth={depth === 0 ? 2 : depth + 1}
-            title={childDocument.title}
-            to={childDocument.url}
-            documentId={childDocument.id}
-            collectionId={collectionId}
+            }
+            isActive={(match, location: Location<{ starred?: boolean }>) =>
+              !!match && location.state?.starred === true
+            }
+            label={label}
+            exact={false}
+            showActions={menuOpen}
+            menu={
+              document && !isDragging ? (
+                <Fade>
+                  <DocumentMenu
+                    document={document}
+                    onOpen={handleMenuOpen}
+                    onClose={handleMenuClose}
+                  />
+                </Fade>
+              ) : undefined
+            }
          />
-        ))}
-    </>
-  );
+        </Draggable>
+        <Relative>
+          <Folder expanded={displayChildDocuments}>
+            {childDocuments.map((node, index) => (
+              <DocumentLink
+                key={node.id}
+                node={node}
+                collection={collection}
+                activeDocument={documents.active}
+                isDraft={node.isDraft}
+                depth={2}
+                index={index}
+              />
+            ))}
+          </Folder>
+          {isDraggingAny && (
+            <DropCursor isActiveDrop={isOverReorder} innerRef={dropToReorder} />
+          )}
+        </Relative>
+      </>
+    );
+  }
+
+  if (collection) {
+    return (
+      <>
+        <Draggable key={star?.id} ref={drag} $isDragging={isDragging}>
+          <CollectionLink
+            collection={collection}
+            expanded={isDragging ? undefined : displayChildDocuments}
+            activeDocument={documents.active}
+            onDisclosureClick={handleDisclosureClick}
+            isDraggingAnyCollection={isDraggingAny}
+          />
+        </Draggable>
+        <Relative>
+          <CollectionLinkChildren
+            collection={collection}
+            expanded={displayChildDocuments}
+          />
+          {isDraggingAny && (
+            <DropCursor isActiveDrop={isOverReorder} innerRef={dropToReorder} />
+          )}
+        </Relative>
+      </>
+    );
+  }
+
+  return null;
 }

 const Draggable = styled.div<{ $isDragging?: boolean }>`
@@ -152,6 +205,4 @@ const Draggable = styled.div<{ $isDragging?: boolean }>`
  opacity: ${(props) => (props.$isDragging ? 0.5 : 1)};
 `;

-const ObserveredStarredLink = observer(StarredLink);
-
-export default ObserveredStarredLink;
+export default observer(StarredLink);
--- a/app/components/Sidebar/components/useCollectionDocuments.ts
+++ b/app/components/Sidebar/components/useCollectionDocuments.ts
@@ -0,0 +1,39 @@
+import * as React from "react";
+import { sortNavigationNodes } from "@shared/utils/collections";
+import Collection from "~/models/Collection";
+import Document from "~/models/Document";
+
+export default function useCollectionDocuments(
+  collection: Collection | undefined,
+  activeDocument: Document | undefined
+) {
+  return React.useMemo(() => {
+    if (!collection) {
+      return [];
+    }
+
+    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,
+    collection?.documents,
+    collection?.id,
+    collection?.sort,
+  ]);
+}
--- a/app/components/Star.tsx
+++ b/app/components/Star.tsx
@@ -1,35 +1,56 @@
+import { observer } from "mobx-react";
 import { StarredIcon, UnstarredIcon } from "outline-icons";
 import * as React from "react";
 import styled, { useTheme } from "styled-components";
+import Collection from "~/models/Collection";
 import Document from "~/models/Document";
+import {
+  starCollection,
+  unstarCollection,
+} from "~/actions/definitions/collections";
 import { starDocument, unstarDocument } from "~/actions/definitions/documents";
 import useActionContext from "~/hooks/useActionContext";
 import { hover } from "~/styles";
 import NudeButton from "./NudeButton";

 type Props = {
-  document: Document;
+  collection?: Collection;
+  document?: Document;
  size?: number;
 };

-function Star({ size, document, ...rest }: Props) {
+function Star({ size, document, collection, ...rest }: Props) {
  const theme = useTheme();
  const context = useActionContext({
-    activeDocumentId: document.id,
+    activeDocumentId: document?.id,
+    activeCollectionId: collection?.id,
  });

-  if (!document) {
+  const target = document || collection;
+
+  if (!target) {
    return null;
  }

  return (
    <NudeButton
      context={context}
-      action={document.isStarred ? unstarDocument : starDocument}
+      hideOnActionDisabled
+      action={
+        collection
+          ? collection.isStarred
+            ? unstarCollection
+            : starCollection
+          : document
+          ? document.isStarred
+            ? unstarDocument
+            : starDocument
+          : undefined
+      }
      size={size}
      {...rest}
    >
-      {document.isStarred ? (
+      {target.isStarred ? (
        <AnimatedStar size={size} color={theme.yellow} />
      ) : (
        <AnimatedStar
@@ -58,4 +79,4 @@ export const AnimatedStar = styled(StarredIcon)`
  }
 `;

-export default Star;
+export default observer(Star);
--- a/app/menus/CollectionMenu.tsx
+++ b/app/menus/CollectionMenu.tsx
@@ -8,6 +8,8 @@ import {
  PadlockIcon,
  AlphabeticalSortIcon,
  ManualSortIcon,
+  UnstarredIcon,
+  StarredIcon,
 } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
@@ -151,11 +153,46 @@ function CollectionMenu({
    });
  }, [dialogs, t, collection]);

+  const handleStar = React.useCallback(
+    (ev: React.SyntheticEvent) => {
+      ev.preventDefault();
+      ev.stopPropagation();
+      collection.star();
+    },
+    [collection]
+  );
+
+  const handleUnstar = React.useCallback(
+    (ev: React.SyntheticEvent) => {
+      ev.preventDefault();
+      ev.stopPropagation();
+      collection.unstar();
+    },
+    [collection]
+  );
+
  const alphabeticalSort = collection.sort.field === "title";
  const can = usePolicy(collection.id);
  const canUserInTeam = usePolicy(team.id);
  const items: MenuItem[] = React.useMemo(
    () => [
+      {
+        type: "button",
+        title: t("Unstar"),
+        onClick: handleUnstar,
+        visible: collection.isStarred && !!can.unstar,
+        icon: <UnstarredIcon />,
+      },
+      {
+        type: "button",
+        title: t("Star"),
+        onClick: handleStar,
+        visible: !collection.isStarred && !!can.star,
+        icon: <StarredIcon />,
+      },
+      {
+        type: "separator",
+      },
      {
        type: "button",
        title: t("New document"),
@@ -234,6 +271,10 @@ function CollectionMenu({
      t,
      can.update,
      can.delete,
+      can.star,
+      can.unstar,
+      handleStar,
+      handleUnstar,
      alphabeticalSort,
      handleChangeSort,
      handleNewDocument,
--- a/app/models/Collection.ts
+++ b/app/models/Collection.ts
@@ -1,5 +1,6 @@
 import { trim } from "lodash";
 import { action, computed, observable } from "mobx";
+import CollectionsStore from "~/stores/CollectionsStore";
 import BaseModel from "~/models/BaseModel";
 import Document from "~/models/Document";
 import { NavigationNode } from "~/types";
@@ -7,6 +8,8 @@ import { client } from "~/utils/ApiClient";
 import Field from "./decorators/Field";

 export default class Collection extends BaseModel {
+  store: CollectionsStore;
+
  @observable
  isSaving: boolean;

@@ -91,6 +94,13 @@ export default class Collection extends BaseModel {
    return !!trim(this.description, "\\").trim();
  }

+  @computed
+  get isStarred(): boolean {
+    return !!this.store.rootStore.stars.orderedData.find(
+      (star) => star.collectionId === this.id
+    );
+  }
+
  @action
  updateDocument(document: Document) {
    const travelNodes = (nodes: NavigationNode[]) =>
@@ -167,6 +177,16 @@ export default class Collection extends BaseModel {
    return path || [];
  }

+  @action
+  star = async () => {
+    return this.store.star(this);
+  };
+
+  @action
+  unstar = async () => {
+    return this.store.unstar(this);
+  };
+
  export = () => {
    return client.get("/collections.export", {
      id: this.id,
--- a/app/models/Star.ts
+++ b/app/models/Star.ts
@@ -11,6 +11,8 @@ class Star extends BaseModel {

  documentId: string;

+  collectionId: string;
+
  createdAt: string;
  updatedAt: string;

--- a/app/scenes/Collection.tsx
+++ b/app/scenes/Collection.tsx
@@ -23,6 +23,7 @@ import PaginatedDocumentList from "~/components/PaginatedDocumentList";
 import PinnedDocuments from "~/components/PinnedDocuments";
 import PlaceholderText from "~/components/PlaceholderText";
 import Scene from "~/components/Scene";
+import Star, { AnimatedStar } from "~/components/Star";
 import Tab from "~/components/Tab";
 import Tabs from "~/components/Tabs";
 import Tooltip from "~/components/Tooltip";
@@ -127,7 +128,7 @@ function CollectionScene() {
            <Empty collection={collection} />
          ) : (
            <>
-              <HeadingWithIcon>
+              <HeadingWithIcon $isStarred={collection.isStarred}>
                <HeadingIcon collection={collection} size={40} expanded />
                {collection.name}
                {!collection.permission && (
@@ -140,6 +141,7 @@ function CollectionScene() {
                    <Badge>{t("Private")}</Badge>
                  </Tooltip>
                )}
+                <StarButton collection={collection} size={32} />
              </HeadingWithIcon>
              <CollectionDescription collection={collection} />

@@ -247,10 +249,37 @@ function CollectionScene() {
  );
 }

-const HeadingWithIcon = styled(Heading)`
+const StarButton = styled(Star)`
+  position: relative;
+  top: 0;
+  left: 10px;
+  overflow: hidden;
+  width: 24px;
+
+  svg {
+    position: relative;
+    left: -4px;
+  }
+`;
+
+const HeadingWithIcon = styled(Heading)<{ $isStarred: boolean }>`
  display: flex;
  align-items: center;

+  ${AnimatedStar} {
+    opacity: ${(props) => (props.$isStarred ? "1 !important" : 0)};
+  }
+
+  &:hover {
+    ${AnimatedStar} {
+      opacity: 0.5;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+
  ${breakpoint("tablet")`
    margin-left: -40px;
  `};
--- a/app/scenes/Document/components/Document.tsx
+++ b/app/scenes/Document/components/Document.tsx
@@ -397,6 +397,7 @@ class DocumentScene extends React.Component<Props> {
  };

  onChangeTitle = action((value: string) => {
+    this.title = value;
    this.props.document.title = value;
    this.updateIsDirty();
    this.autosave();
@@ -448,7 +449,12 @@ class DocumentScene extends React.Component<Props> {
    return (
      <ErrorBoundary>
        {this.props.location.pathname !== canonicalUrl && (
-          <Redirect to={canonicalUrl} />
+          <Redirect
+            to={{
+              pathname: canonicalUrl,
+              state: this.props.location.state,
+            }}
+          />
        )}
        <RegisterKeyDown trigger="m" handler={this.goToMove} />
        <RegisterKeyDown trigger="e" handler={this.goToEdit} />
--- a/app/scenes/Document/components/EditableTitle.tsx
+++ b/app/scenes/Document/components/EditableTitle.tsx
@@ -13,7 +13,6 @@ import Document from "~/models/Document";
 import ContentEditable, { RefHandle } from "~/components/ContentEditable";
 import Star, { AnimatedStar } from "~/components/Star";
 import useEmojiWidth from "~/hooks/useEmojiWidth";
-import usePolicy from "~/hooks/usePolicy";
 import { isModKey } from "~/utils/keyboard";

 type Props = {
@@ -49,7 +48,6 @@ const EditableTitle = React.forwardRef(
    }: Props,
    ref: React.RefObject<RefHandle>
  ) => {
-    const can = usePolicy(document.id);
    const normalizedTitle =
      !value && readOnly ? document.titleWithDefault : value;

@@ -135,9 +133,7 @@ const EditableTitle = React.forwardRef(
        dir="auto"
        ref={ref}
      >
-        {(can.star || can.unstar) && starrable !== false && (
-          <StarButton document={document} size={32} />
-        )}
+        {starrable !== false && <StarButton document={document} size={32} />}
      </Title>
    );
  }
--- a/app/scenes/DocumentNew.tsx
+++ b/app/scenes/DocumentNew.tsx
@@ -34,7 +34,7 @@ function DocumentNew() {
          title: "",
          text: "",
        });
-        history.replace(editDocumentUrl(document));
+        history.replace(editDocumentUrl(document), location.state);
      } catch (err) {
        showToast(t("Couldn’t create the document, try again?"), {
          type: "error",
--- a/app/stores/CollectionsStore.ts
+++ b/app/stores/CollectionsStore.ts
@@ -174,6 +174,19 @@ export default class CollectionsStore extends BaseStore<Collection> {
    );
  }

+  star = async (collection: Collection) => {
+    await this.rootStore.stars.create({
+      collectionId: collection.id,
+    });
+  };
+
+  unstar = async (collection: Collection) => {
+    const star = this.rootStore.stars.orderedData.find(
+      (star) => star.collectionId === collection.id
+    );
+    await star?.delete();
+  };
+
  getPathForDocument(documentId: string): DocumentPath | undefined {
    return this.pathsToDocuments.find((path) => path.id === documentId);
  }
--- a/app/types.ts
+++ b/app/types.ts
@@ -70,6 +70,7 @@ export type ActionContext = {
  isContextMenu: boolean;
  isCommandBar: boolean;
  isButton: boolean;
+  inStarredSection?: boolean;
  activeCollectionId: string | undefined;
  activeDocumentId: string | undefined;
  currentUserId: string | undefined;
--- a/server/commands/starCreator.test.ts
+++ b/server/commands/starCreator.test.ts
@@ -1,3 +1,4 @@
+import { sequelize } from "@server/database/sequelize";
 import { Star, Event } from "@server/models";
 import { buildDocument, buildUser } from "@server/test/factories";
 import { flushdb } from "@server/test/support";
@@ -14,11 +15,14 @@ describe("starCreator", () => {
      teamId: user.teamId,
    });

-    const star = await starCreator({
-      documentId: document.id,
-      user,
-      ip,
-    });
+    const star = await sequelize.transaction(async (transaction) =>
+      starCreator({
+        documentId: document.id,
+        user,
+        ip,
+        transaction,
+      })
+    );

    const event = await Event.findOne();
    expect(star.documentId).toEqual(document.id);
@@ -43,11 +47,14 @@ describe("starCreator", () => {
      index: "P",
    });

-    const star = await starCreator({
-      documentId: document.id,
-      user,
-      ip,
-    });
+    const star = await sequelize.transaction(async (transaction) =>
+      starCreator({
+        documentId: document.id,
+        user,
+        ip,
+        transaction,
+      })
+    );

    const events = await Event.count();
    expect(star.documentId).toEqual(document.id);
--- a/server/commands/starCreator.ts
+++ b/server/commands/starCreator.ts
@@ -1,17 +1,19 @@
 import fractionalIndex from "fractional-index";
-import { Sequelize, WhereOptions } from "sequelize";
-import { sequelize } from "@server/database/sequelize";
+import { Sequelize, Transaction, WhereOptions } from "sequelize";
 import { Star, User, Event } from "@server/models";

 type Props = {
  /** The user creating the star */
  user: User;
  /** The document to star */
-  documentId: string;
+  documentId?: string;
+  /** The collection to star */
+  collectionId?: string;
  /** The sorted index for the star in the sidebar If no index is provided then it will be at the end */
  index?: string;
  /** The IP address of the user creating the star */
  ip: string;
+  transaction: Transaction;
 };

 /**
@@ -24,7 +26,9 @@ type Props = {
 export default async function starCreator({
  user,
  documentId,
+  collectionId,
  ip,
+  transaction,
  ...rest
 }: Props): Promise<Star> {
  let { index } = rest;
@@ -43,46 +47,43 @@ export default async function starCreator({
        Sequelize.literal('"star"."index" collate "C"'),
        ["updatedAt", "DESC"],
      ],
+      transaction,
    });

    // create a star at the beginning of the list
    index = fractionalIndex(null, stars.length ? stars[0].index : null);
  }

-  const transaction = await sequelize.transaction();
-  let star;
-
-  try {
-    const response = await Star.findOrCreate({
-      where: {
-        userId: user.id,
-        documentId,
-      },
-      defaults: {
-        index,
-      },
-      transaction,
-    });
-    star = response[0];
-
-    if (response[1]) {
-      await Event.create(
-        {
-          name: "stars.create",
-          modelId: star.id,
+  const response = await Star.findOrCreate({
+    where: documentId
+      ? {
          userId: user.id,
-          actorId: user.id,
          documentId,
-          ip,
+        }
+      : {
+          userId: user.id,
+          collectionId,
        },
-        { transaction }
-      );
-    }
+    defaults: {
+      index,
+    },
+    transaction,
+  });
+  const star = response[0];

-    await transaction.commit();
-  } catch (err) {
-    await transaction.rollback();
-    throw err;
+  if (response[1]) {
+    await Event.create(
+      {
+        name: "stars.create",
+        modelId: star.id,
+        userId: user.id,
+        actorId: user.id,
+        documentId,
+        collectionId,
+        ip,
+      },
+      { transaction }
+    );
  }

  return star;
--- a/server/migrations/20220402032204-starred-collections.js
+++ b/server/migrations/20220402032204-starred-collections.js
@@ -0,0 +1,34 @@
+'use strict';
+
+module.exports = {
+  up: async (queryInterface, Sequelize) => {
+    await queryInterface.addColumn("stars", "collectionId", {
+      type: Sequelize.UUID,
+      allowNull: true,
+      references: {
+        model: "collections",
+      },
+    });
+    await queryInterface.changeColumn("stars", "documentId", {
+      type: Sequelize.UUID,
+      allowNull: true
+    });
+    await queryInterface.changeColumn("stars", "documentId", {
+      type: Sequelize.UUID,
+      references: {
+        model: "documents",
+      },
+    });
+    await queryInterface.changeColumn("stars", "userId", {
+      type: Sequelize.UUID,
+      allowNull: false,
+      references: {
+        model: "users",
+      },
+    });
+  },
+
+  down: async (queryInterface) => {
+    await queryInterface.removeColumn("stars", "collectionId");
+  }
+};
--- a/server/models/Star.ts
+++ b/server/models/Star.ts
@@ -5,6 +5,7 @@ import {
  ForeignKey,
  Table,
 } from "sequelize-typescript";
+import Collection from "./Collection";
 import Document from "./Document";
 import User from "./User";
 import BaseModel from "./base/BaseModel";
@@ -26,11 +27,18 @@ class Star extends BaseModel {
  userId: string;

  @BelongsTo(() => Document, "documentId")
-  document: Document;
+  document: Document | null;

  @ForeignKey(() => Document)
  @Column(DataType.UUID)
-  documentId: string;
+  documentId: string | null;
+
+  @BelongsTo(() => Collection, "collectionId")
+  collection: Collection | null;
+
+  @ForeignKey(() => Collection)
+  @Column(DataType.UUID)
+  collectionId: string | null;
 }

 export default Star;
--- a/server/policies/collection.ts
+++ b/server/policies/collection.ts
@@ -39,7 +39,7 @@ allow(User, "move", Collection, (user, collection) => {
  throw AdminRequiredError();
 });

-allow(User, "read", Collection, (user, collection) => {
+allow(User, ["read", "star", "unstar"], Collection, (user, collection) => {
  if (!collection || user.teamId !== collection.teamId) {
    return false;
  }
--- a/server/presenters/star.ts
+++ b/server/presenters/star.ts
@@ -4,6 +4,7 @@ export default function present(star: Star) {
  return {
    id: star.id,
    documentId: star.documentId,
+    collectionId: star.collectionId,
    index: star.index,
    createdAt: star.createdAt,
    updatedAt: star.updatedAt,
--- a/server/routes/api/snapshots/documents.test.ts.snap
+++ b/server/routes/api/snapshots/documents.test.ts.snap
@@ -53,15 +53,6 @@ Object {
 }
 `;

-exports[`#documents.starred should require authentication 1`] = `
-Object {
-  "error": "authentication_required",
-  "message": "Authentication required",
-  "ok": false,
-  "status": 401,
-}
-`;
-
 exports[`#documents.unstar should require authentication 1`] = `
 Object {
  "error": "authentication_required",
--- a/server/routes/api/documents.test.ts
+++ b/server/routes/api/documents.test.ts
@@ -1455,45 +1455,6 @@ describe("#documents.viewed", () => {
  });
 });

-describe("#documents.starred", () => {
-  it("should return empty result if no stars", async () => {
-    const { user } = await seed();
-    const res = await server.post("/api/documents.starred", {
-      body: {
-        token: user.getJwtToken(),
-      },
-    });
-    const body = await res.json();
-    expect(res.status).toEqual(200);
-    expect(body.data.length).toEqual(0);
-  });
-
-  it("should return starred documents", async () => {
-    const { user, document } = await seed();
-    await Star.create({
-      documentId: document.id,
-      userId: user.id,
-    });
-    const res = await server.post("/api/documents.starred", {
-      body: {
-        token: user.getJwtToken(),
-      },
-    });
-    const body = await res.json();
-    expect(res.status).toEqual(200);
-    expect(body.data.length).toEqual(1);
-    expect(body.data[0].id).toEqual(document.id);
-    expect(body.policies[0].abilities.update).toEqual(true);
-  });
-
-  it("should require authentication", async () => {
-    const res = await server.post("/api/documents.starred");
-    const body = await res.json();
-    expect(res.status).toEqual(401);
-    expect(body).toMatchSnapshot();
-  });
-});
-
 describe("#documents.move", () => {
  it("should move the document", async () => {
    const { user, document } = await seed();
--- a/server/routes/api/documents.ts
+++ b/server/routes/api/documents.ts
@@ -313,62 +313,6 @@ router.post("documents.viewed", auth(), pagination(), async (ctx) => {
  };
 });

-// Deprecated – use stars.list instead
-router.post("documents.starred", auth(), pagination(), async (ctx) => {
-  let { direction } = ctx.body;
-  const { sort = "updatedAt" } = ctx.body;
-
-  assertSort(sort, Document);
-  if (direction !== "ASC") {
-    direction = "DESC";
-  }
-  const { user } = ctx.state;
-  const collectionIds = await user.collectionIds();
-  const stars = await Star.findAll({
-    where: {
-      userId: user.id,
-    },
-    order: [[sort, direction]],
-    include: [
-      {
-        model: Document,
-        where: {
-          collectionId: collectionIds,
-        },
-        include: [
-          {
-            model: Collection.scope({
-              method: ["withMembership", user.id],
-            }),
-            as: "collection",
-          },
-          {
-            model: Star,
-            as: "starred",
-            where: {
-              userId: user.id,
-            },
-          },
-        ],
-      },
-    ],
-    offset: ctx.state.pagination.offset,
-    limit: ctx.state.pagination.limit,
-  });
-
-  const documents = stars.map((star) => star.document);
-  const data = await Promise.all(
-    documents.map((document) => presentDocument(document))
-  );
-  const policies = presentPolicies(user, documents);
-
-  ctx.body = {
-    pagination: ctx.state.pagination,
-    data,
-    policies,
-  };
-});
-
 router.post("documents.drafts", auth(), pagination(), async (ctx) => {
  let { direction } = ctx.body;
  const { collectionId, dateFilter, sort = "updatedAt" } = ctx.body;
--- a/server/routes/api/stars.ts
+++ b/server/routes/api/stars.ts
@@ -3,8 +3,9 @@ import { Sequelize } from "sequelize";
 import starCreator from "@server/commands/starCreator";
 import starDestroyer from "@server/commands/starDestroyer";
 import starUpdater from "@server/commands/starUpdater";
+import { sequelize } from "@server/database/sequelize";
 import auth from "@server/middlewares/authentication";
-import { Document, Star } from "@server/models";
+import { Document, Star, Collection } from "@server/models";
 import { authorize } from "@server/policies";
 import {
  presentStar,
@@ -18,27 +19,43 @@ import pagination from "./middlewares/pagination";
 const router = new Router();

 router.post("stars.create", auth(), async (ctx) => {
-  const { documentId } = ctx.body;
+  const { documentId, collectionId } = ctx.body;
  const { index } = ctx.body;
-  assertUuid(documentId, "documentId is required");
-
  const { user } = ctx.state;
-  const document = await Document.findByPk(documentId, {
-    userId: user.id,
-  });
-  authorize(user, "star", document);
+
+  assertUuid(
+    documentId || collectionId,
+    "documentId or collectionId is required"
+  );
+
+  if (documentId) {
+    const document = await Document.findByPk(documentId, {
+      userId: user.id,
+    });
+    authorize(user, "star", document);
+  }
+
+  if (collectionId) {
+    const collection = await Collection.scope({
+      method: ["withMembership", user.id],
+    }).findByPk(collectionId);
+    authorize(user, "star", collection);
+  }

  if (index) {
    assertIndexCharacters(index);
  }

-  const star = await starCreator({
-    user,
-    documentId,
-    ip: ctx.request.ip,
-    index,
-  });
-
+  const star = await sequelize.transaction(async (transaction) =>
+    starCreator({
+      user,
+      documentId,
+      collectionId,
+      ip: ctx.request.ip,
+      index,
+      transaction,
+    })
+  );
  ctx.body = {
    data: presentStar(star),
    policies: presentPolicies(user, [star]),
@@ -72,12 +89,17 @@ router.post("stars.list", auth(), pagination(), async (ctx) => {
    });
  }

-  const documents = await Document.defaultScopeWithUser(user.id).findAll({
-    where: {
-      id: stars.map((star) => star.documentId),
-      collectionId: collectionIds,
-    },
-  });
+  const documentIds = stars
+    .map((star) => star.documentId)
+    .filter(Boolean) as string[];
+  const documents = documentIds.length
+    ? await Document.defaultScopeWithUser(user.id).findAll({
+        where: {
+          id: documentIds,
+          collectionId: collectionIds,
+        },
+      })
+    : [];

  const policies = presentPolicies(user, [...documents, ...stars]);

--- a/server/utils/indexing.ts
+++ b/server/utils/indexing.ts
@@ -48,7 +48,7 @@ export async function starIndexing(
  const documents = await Document.findAll({
    attributes: ["id", "updatedAt"],
    where: {
-      id: stars.map((star) => star.documentId),
+      id: stars.map((star) => star.documentId).filter(Boolean) as string[],
    },
    order: [["updatedAt", "DESC"]],
  });
--- a/shared/i18n/locales/en_US/translation.json
+++ b/shared/i18n/locales/en_US/translation.json
@@ -3,13 +3,13 @@
  "New collection": "New collection",
  "Create a collection": "Create a collection",
  "Edit collection": "Edit collection",
+  "Star": "Star",
+  "Unstar": "Unstar",
  "Delete IndexedDB cache": "Delete IndexedDB cache",
  "IndexedDB cache deleted": "IndexedDB cache deleted",
  "Development": "Development",
  "Open document": "Open document",
  "New document": "New document",
-  "Star": "Star",
-  "Unstar": "Unstar",
  "Download": "Download",
  "Download document": "Download document",
  "Duplicate": "Duplicate",
@@ -138,6 +138,7 @@
  "Documents": "Documents",
  "Logo": "Logo",
  "Document archived": "Document archived",
+  "Empty": "Empty",
  "Move document": "Move document",
  "Collections": "Collections",
  "You can't reorder documents in an alphabetically sorted collection": "You can't reorder documents in an alphabetically sorted collection",