wip

2026-06-14 03:45:00 +03:00 · 2024-08-10 21:50:33 -04:00
425 changed files with 7222 additions and 12097 deletions
@@ -88,7 +88,7 @@ jobs:
      - run:
          name: test
          command: |
-            TESTFILES=$(circleci tests glob "**/server/**/*.test.ts" | circleci tests split)
+            TESTFILES=$(circleci tests glob "server/**/*.test.ts" | circleci tests split)
            yarn test --maxWorkers=2 $TESTFILES
  bundle-size:
    <<: *defaults
@@ -20,11 +20,6 @@ COPY --from=base $APP_PATH/.sequelizerc ./.sequelizerc
 COPY --from=base $APP_PATH/node_modules ./node_modules
 COPY --from=base $APP_PATH/package.json ./package.json

-# Install wget to healthcheck the server
-RUN  apt-get update \
-  && apt-get install -y wget \
-  && rm -rf /var/lib/apt/lists/*
-
 # Create a non-root user compatible with Debian and BusyBox based images
 RUN addgroup --gid 1001 nodejs && \
  adduser --uid 1001 --ingroup nodejs nodejs && \
@@ -41,7 +36,5 @@ VOLUME /var/lib/outline/data

 USER nodejs

-HEALTHCHECK --interval=1m CMD wget -qO- "http://localhost:${PORT:-3000}/_health" | grep -q "OK" || exit 1
-
 EXPOSE 3000
 CMD ["yarn", "start"]
@@ -6,6 +6,10 @@ WORKDIR $APP_PATH
 COPY ./package.json ./yarn.lock ./
 COPY ./patches ./patches

+RUN  apt-get update \
+  && apt-get install -y wget \
+  && rm -rf /var/lib/apt/lists/*
+
 RUN yarn install --no-optional --frozen-lockfile --network-timeout 1000000 && \
  yarn cache clean

@@ -19,3 +23,4 @@ RUN yarn install --production=true --frozen-lockfile --network-timeout 1000000 &
  yarn cache clean

 ENV PORT=3000
+HEALTHCHECK CMD wget -qO- http://localhost:${PORT}/_health | grep -q "OK" || exit 1
@@ -3,8 +3,8 @@ Business Source License 1.1
 Parameters

 Licensor:             General Outline, Inc.
-Licensed Work:        Outline 0.80.2
-                      The Licensed Work is (c) 2024 General Outline, Inc.
+Licensed Work:        Outline 0.71.0
+                      The Licensed Work is (c) 2020 General Outline, Inc.
 Additional Use Grant: You may make use of the Licensed Work, provided that
                      you may not use the Licensed Work for a Document
                      Service.
@@ -15,7 +15,7 @@ Additional Use Grant: You may make use of the Licensed Work, provided that
                      Licensed Work by creating teams and documents
                      controlled by such third parties.

-Change Date:          2028-09-26
+Change Date:          2027-08-18

 Change License:       Apache License, Version 2.0

@@ -3,13 +3,7 @@
  "description": "Open source wiki and knowledge base for growing teams",
  "website": "https://www.getoutline.com/",
  "repository": "https://github.com/outline/outline",
-  "keywords": [
-    "wiki",
-    "team",
-    "node",
-    "markdown",
-    "slack"
-  ],
+  "keywords": ["wiki", "team", "node", "markdown", "slack"],
  "success_url": "/",
  "formation": {
    "web": {
@@ -218,4 +212,4 @@
      "required": false
    }
  }
-}
+}
@@ -19,7 +19,7 @@ import DynamicCollectionIcon from "~/components/Icons/CollectionIcon";
 import SharePopover from "~/components/Sharing/Collection/SharePopover";
 import { getHeaderExpandedKey } from "~/components/Sidebar/components/Header";
 import { createAction } from "~/actions";
-import { ActiveCollectionSection, CollectionSection } from "~/actions/sections";
+import { CollectionSection } from "~/actions/sections";
 import { setPersistedState } from "~/hooks/usePersistedState";
 import history from "~/utils/history";
 import { newTemplatePath, searchPath } from "~/utils/routeHelpers";
@@ -70,7 +70,7 @@ export const editCollection = createAction({
  name: ({ t, isContextMenu }) =>
    isContextMenu ? `${t("Edit")}…` : t("Edit collection"),
  analyticsName: "Edit collection",
-  section: ActiveCollectionSection,
+  section: CollectionSection,
  icon: <EditIcon />,
  visible: ({ activeCollectionId }) =>
    !!activeCollectionId &&
@@ -96,7 +96,7 @@ export const editCollectionPermissions = createAction({
  name: ({ t, isContextMenu }) =>
    isContextMenu ? `${t("Permissions")}…` : t("Collection permissions"),
  analyticsName: "Collection permissions",
-  section: ActiveCollectionSection,
+  section: CollectionSection,
  icon: <PadlockIcon />,
  visible: ({ activeCollectionId }) =>
    !!activeCollectionId &&
@@ -127,7 +127,7 @@ export const editCollectionPermissions = createAction({
 export const searchInCollection = createAction({
  name: ({ t }) => t("Search in collection"),
  analyticsName: "Search collection",
-  section: ActiveCollectionSection,
+  section: CollectionSection,
  icon: <SearchIcon />,
  visible: ({ activeCollectionId }) =>
    !!activeCollectionId &&
@@ -140,7 +140,7 @@ export const searchInCollection = createAction({
 export const starCollection = createAction({
  name: ({ t }) => t("Star"),
  analyticsName: "Star collection",
-  section: ActiveCollectionSection,
+  section: CollectionSection,
  icon: <StarredIcon />,
  keywords: "favorite bookmark",
  visible: ({ activeCollectionId }) => {
@@ -167,7 +167,7 @@ export const starCollection = createAction({
 export const unstarCollection = createAction({
  name: ({ t }) => t("Unstar"),
  analyticsName: "Unstar collection",
-  section: ActiveCollectionSection,
+  section: CollectionSection,
  icon: <UnstarredIcon />,
  keywords: "unfavorite unbookmark",
  visible: ({ activeCollectionId }) => {
@@ -193,7 +193,7 @@ export const unstarCollection = createAction({
 export const deleteCollection = createAction({
  name: ({ t }) => `${t("Delete")}…`,
  analyticsName: "Delete collection",
-  section: ActiveCollectionSection,
+  section: CollectionSection,
  dangerous: true,
  icon: <TrashIcon />,
  visible: ({ activeCollectionId }) => {
@@ -227,7 +227,7 @@ export const deleteCollection = createAction({
 export const createTemplate = createAction({
  name: ({ t }) => t("New template"),
  analyticsName: "New template",
-  section: ActiveCollectionSection,
+  section: CollectionSection,
  icon: <ShapesIcon />,
  keywords: "new create template",
  visible: ({ activeCollectionId }) =>
@@ -24,37 +24,25 @@ import {
  UnpublishIcon,
  PublishIcon,
  CommentIcon,
+  GlobeIcon,
  CopyIcon,
  EyeIcon,
-  PadlockIcon,
-  GlobeIcon,
 } from "outline-icons";
 import * as React from "react";
 import { toast } from "sonner";
-import {
-  ExportContentType,
-  TeamPreference,
-  NavigationNode,
-} from "@shared/types";
+import { ExportContentType, TeamPreference } from "@shared/types";
 import { getEventFiles } from "@shared/utils/files";
 import DocumentDelete from "~/scenes/DocumentDelete";
 import DocumentMove from "~/scenes/DocumentMove";
 import DocumentPermanentDelete from "~/scenes/DocumentPermanentDelete";
 import DocumentPublish from "~/scenes/DocumentPublish";
 import DeleteDocumentsInTrash from "~/scenes/Trash/components/DeleteDocumentsInTrash";
-import ConfirmationDialog from "~/components/ConfirmationDialog";
 import DuplicateDialog from "~/components/DuplicateDialog";
-import Icon from "~/components/Icon";
-import MarkdownIcon from "~/components/Icons/MarkdownIcon";
 import SharePopover from "~/components/Sharing/Document";
 import { getHeaderExpandedKey } from "~/components/Sidebar/components/Header";
 import DocumentTemplatizeDialog from "~/components/TemplatizeDialog";
 import { createAction } from "~/actions";
-import {
-  ActiveDocumentSection,
-  DocumentSection,
-  TrashSection,
-} from "~/actions/sections";
+import { DocumentSection, TrashSection } from "~/actions/sections";
 import env from "~/env";
 import { setPersistedState } from "~/hooks/usePersistedState";
 import history from "~/utils/history";
@@ -78,24 +66,23 @@ export const openDocument = createAction({
  keywords: "go to",
  icon: <DocumentIcon />,
  children: ({ stores }) => {
-    const nodes = stores.collections.navigationNodes.reduce(
-      (acc, node) => [...acc, ...node.children],
-      [] as NavigationNode[]
-    );
+    const paths = stores.collections.pathsToDocuments;

-    return nodes.map((item) => ({
-      // Note: using url which includes the slug rather than id here to bust
-      // cache if the document is renamed
-      id: item.url,
-      name: item.title,
-      icon: item.icon ? (
-        <Icon value={item.icon} color={item.color ?? undefined} />
-      ) : (
-        <DocumentIcon />
-      ),
-      section: DocumentSection,
-      perform: () => history.push(item.url),
-    }));
+    return paths
+      .filter((path) => path.type === "document")
+      .map((path) => ({
+        // Note: using url which includes the slug rather than id here to bust
+        // cache if the document is renamed
+        id: path.url,
+        name: path.title,
+        icon: function _Icon() {
+          return stores.documents.get(path.id)?.isStarred ? (
+            <StarredIcon />
+          ) : null;
+        },
+        section: DocumentSection,
+        perform: () => history.push(path.url),
+      }));
  },
 });

@@ -117,9 +104,9 @@ export const createDocument = createAction({
      !!currentTeamId && stores.policies.abilities(currentTeamId).createDocument
    );
  },
-  perform: ({ activeCollectionId, sidebarContext }) =>
+  perform: ({ activeCollectionId, inStarredSection }) =>
    history.push(newDocumentPath(activeCollectionId), {
-      sidebarContext,
+      starred: inStarredSection,
    }),
 });

@@ -134,11 +121,11 @@ export const createDocumentFromTemplate = createAction({
    !!activeDocumentId &&
    !!stores.documents.get(activeDocumentId)?.template &&
    stores.policies.abilities(currentTeamId).createDocument,
-  perform: ({ activeCollectionId, activeDocumentId, sidebarContext }) =>
+  perform: ({ activeCollectionId, activeDocumentId, inStarredSection }) =>
    history.push(
      newDocumentPath(activeCollectionId, { templateId: activeDocumentId }),
      {
-        sidebarContext,
+        starred: inStarredSection,
      }
    ),
 });
@@ -146,7 +133,7 @@ export const createDocumentFromTemplate = createAction({
 export const createNestedDocument = createAction({
  name: ({ t }) => t("New nested document"),
  analyticsName: "New document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <NewDocumentIcon />,
  keywords: "create",
  visible: ({ currentTeamId, activeDocumentId, stores }) =>
@@ -154,16 +141,16 @@ export const createNestedDocument = createAction({
    !!activeDocumentId &&
    stores.policies.abilities(currentTeamId).createDocument &&
    stores.policies.abilities(activeDocumentId).createChildDocument,
-  perform: ({ activeDocumentId, sidebarContext }) =>
+  perform: ({ activeDocumentId, inStarredSection }) =>
    history.push(newNestedDocumentPath(activeDocumentId), {
-      sidebarContext,
+      starred: inStarredSection,
    }),
 });

 export const starDocument = createAction({
  name: ({ t }) => t("Star"),
  analyticsName: "Star document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <StarredIcon />,
  keywords: "favorite bookmark",
  visible: ({ activeDocumentId, stores }) => {
@@ -189,7 +176,7 @@ export const starDocument = createAction({
 export const unstarDocument = createAction({
  name: ({ t }) => t("Unstar"),
  analyticsName: "Unstar document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <UnstarredIcon />,
  keywords: "unfavorite unbookmark",
  visible: ({ activeDocumentId, stores }) => {
@@ -215,7 +202,7 @@ export const unstarDocument = createAction({
 export const publishDocument = createAction({
  name: ({ t }) => t("Publish"),
  analyticsName: "Publish document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <PublishIcon />,
  visible: ({ activeDocumentId, stores }) => {
    if (!activeDocumentId) {
@@ -257,7 +244,7 @@ export const publishDocument = createAction({
 export const unpublishDocument = createAction({
  name: ({ t }) => t("Unpublish"),
  analyticsName: "Unpublish document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <UnpublishIcon />,
  visible: ({ activeDocumentId, stores }) => {
    if (!activeDocumentId) {
@@ -288,7 +275,7 @@ export const unpublishDocument = createAction({
 export const subscribeDocument = createAction({
  name: ({ t }) => t("Subscribe"),
  analyticsName: "Subscribe to document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <SubscribeIcon />,
  visible: ({ activeDocumentId, stores }) => {
    if (!activeDocumentId) {
@@ -316,7 +303,7 @@ export const subscribeDocument = createAction({
 export const unsubscribeDocument = createAction({
  name: ({ t }) => t("Unsubscribe"),
  analyticsName: "Unsubscribe from document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <UnsubscribeIcon />,
  visible: ({ activeDocumentId, stores }) => {
    if (!activeDocumentId) {
@@ -344,14 +331,10 @@ export const unsubscribeDocument = createAction({
 });

 export const shareDocument = createAction({
-  name: ({ t }) => `${t("Permissions")}…`,
+  name: ({ t }) => t("Share"),
  analyticsName: "Share document",
-  section: ActiveDocumentSection,
-  icon: <PadlockIcon />,
-  visible: ({ stores, activeDocumentId }) => {
-    const can = stores.policies.abilities(activeDocumentId!);
-    return can.manageUsers || can.share;
-  },
+  section: DocumentSection,
+  icon: <GlobeIcon />,
  perform: async ({ activeDocumentId, stores, currentUserId, t }) => {
    if (!activeDocumentId || !currentUserId) {
      return;
@@ -383,7 +366,7 @@ export const shareDocument = createAction({
 export const downloadDocumentAsHTML = createAction({
  name: ({ t }) => t("HTML"),
  analyticsName: "Download document as HTML",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  keywords: "html export",
  icon: <DownloadIcon />,
  iconInContextMenu: false,
@@ -402,7 +385,7 @@ export const downloadDocumentAsHTML = createAction({
 export const downloadDocumentAsPDF = createAction({
  name: ({ t }) => t("PDF"),
  analyticsName: "Download document as PDF",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  keywords: "export",
  icon: <DownloadIcon />,
  iconInContextMenu: false,
@@ -426,7 +409,7 @@ export const downloadDocumentAsPDF = createAction({
 export const downloadDocumentAsMarkdown = createAction({
  name: ({ t }) => t("Markdown"),
  analyticsName: "Download document as Markdown",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  keywords: "md markdown export",
  icon: <DownloadIcon />,
  iconInContextMenu: false,
@@ -446,11 +429,9 @@ export const downloadDocument = createAction({
  name: ({ t, isContextMenu }) =>
    isContextMenu ? t("Download") : t("Download document"),
  analyticsName: "Download document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <DownloadIcon />,
  keywords: "export",
-  visible: ({ activeDocumentId, stores }) =>
-    !!activeDocumentId && stores.policies.abilities(activeDocumentId).download,
  children: [
    downloadDocumentAsHTML,
    downloadDocumentAsPDF,
@@ -460,10 +441,8 @@ export const downloadDocument = createAction({

 export const copyDocumentAsMarkdown = createAction({
  name: ({ t }) => t("Copy as Markdown"),
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  keywords: "clipboard",
-  icon: <MarkdownIcon />,
-  iconInContextMenu: false,
  visible: ({ activeDocumentId, stores }) =>
    !!activeDocumentId && stores.policies.abilities(activeDocumentId).download,
  perform: ({ stores, activeDocumentId, t }) => {
@@ -477,33 +456,10 @@ export const copyDocumentAsMarkdown = createAction({
  },
 });

-export const copyDocumentShareLink = createAction({
-  name: ({ t }) => t("Copy public link"),
-  section: ActiveDocumentSection,
-  keywords: "clipboard share",
-  icon: <GlobeIcon />,
-  iconInContextMenu: false,
-  visible: ({ activeDocumentId, stores }) =>
-    !!activeDocumentId &&
-    !!stores.shares.getByDocumentId(activeDocumentId)?.published,
-  perform: ({ stores, activeDocumentId, t }) => {
-    if (!activeDocumentId) {
-      return;
-    }
-    const share = stores.shares.getByDocumentId(activeDocumentId);
-    if (share) {
-      copy(share.url);
-      toast.success(t("Link copied to clipboard"));
-    }
-  },
-});
-
 export const copyDocumentLink = createAction({
  name: ({ t }) => t("Copy link"),
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  keywords: "clipboard",
-  icon: <CopyIcon />,
-  iconInContextMenu: false,
  visible: ({ activeDocumentId }) => !!activeDocumentId,
  perform: ({ stores, activeDocumentId, t }) => {
    const document = activeDocumentId
@@ -519,17 +475,17 @@ export const copyDocumentLink = createAction({
 export const copyDocument = createAction({
  name: ({ t }) => t("Copy"),
  analyticsName: "Copy document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <CopyIcon />,
  keywords: "clipboard",
-  children: [copyDocumentLink, copyDocumentShareLink, copyDocumentAsMarkdown],
+  children: [copyDocumentLink, copyDocumentAsMarkdown],
 });

 export const duplicateDocument = createAction({
  name: ({ t, isContextMenu }) =>
    isContextMenu ? t("Duplicate") : t("Duplicate document"),
  analyticsName: "Duplicate document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <DuplicateIcon />,
  keywords: "copy",
  visible: ({ activeDocumentId, stores }) =>
@@ -573,7 +529,7 @@ export const pinDocumentToCollection = createAction({
    });
  },
  analyticsName: "Pin document to collection",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <PinIcon />,
  iconInContextMenu: false,
  visible: ({ activeCollectionId, activeDocumentId, stores }) => {
@@ -609,7 +565,7 @@ export const pinDocumentToCollection = createAction({
 export const pinDocumentToHome = createAction({
  name: ({ t }) => t("Pin to home"),
  analyticsName: "Pin document to home",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <PinIcon />,
  iconInContextMenu: false,
  visible: ({ activeDocumentId, currentTeamId, stores }) => {
@@ -641,7 +597,7 @@ export const pinDocumentToHome = createAction({
 export const pinDocument = createAction({
  name: ({ t }) => t("Pin"),
  analyticsName: "Pin document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <PinIcon />,
  children: [pinDocumentToCollection, pinDocumentToHome],
 });
@@ -649,7 +605,7 @@ export const pinDocument = createAction({
 export const searchInDocument = createAction({
  name: ({ t }) => t("Search in document"),
  analyticsName: "Search document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <SearchIcon />,
  visible: ({ stores, activeDocumentId }) => {
    if (!activeDocumentId) {
@@ -667,7 +623,7 @@ export const printDocument = createAction({
  name: ({ t, isContextMenu }) =>
    isContextMenu ? t("Print") : t("Print document"),
  analyticsName: "Print document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <PrintIcon />,
  visible: ({ activeDocumentId }) => !!(activeDocumentId && window.print),
  perform: () => {
@@ -702,21 +658,15 @@ export const importDocument = createAction({
      const files = getEventFiles(ev);

      const file = files[0];
-
-      try {
-        const document = await documents.import(
-          file,
-          activeDocumentId,
-          activeCollectionId,
-          {
-            publish: true,
-          }
-        );
-        history.push(document.url);
-      } catch (err) {
-        toast.error(err.message);
-        throw err;
-      }
+      const document = await documents.import(
+        file,
+        activeDocumentId,
+        activeCollectionId,
+        {
+          publish: true,
+        }
+      );
+      history.push(document.url);
    };

    input.click();
@@ -726,7 +676,7 @@ export const importDocument = createAction({
 export const createTemplateFromDocument = createAction({
  name: ({ t }) => t("Templatize"),
  analyticsName: "Templatize document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <ShapesIcon />,
  keywords: "new create template",
  visible: ({ activeCollectionId, activeDocumentId, stores }) => {
@@ -761,14 +711,14 @@ export const openRandomDocument = createAction({
  section: DocumentSection,
  icon: <ShuffleIcon />,
  perform: ({ stores, activeDocumentId }) => {
-    const nodes = stores.collections.navigationNodes
-      .reduce((acc, node) => [...acc, ...node.children], [] as NavigationNode[])
-      .filter((node) => node.id !== activeDocumentId);
+    const documentPaths = stores.collections.pathsToDocuments.filter(
+      (path) => path.type === "document" && path.id !== activeDocumentId
+    );
+    const randomPath =
+      documentPaths[Math.round(Math.random() * documentPaths.length)];

-    const random = nodes[Math.round(Math.random() * nodes.length)];
-
-    if (random) {
-      history.push(random.url);
+    if (randomPath) {
+      history.push(randomPath.url);
    }
  },
 });
@@ -826,7 +776,7 @@ export const moveDocumentToCollection = createAction({
      : t("Move");
  },
  analyticsName: "Move document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <MoveIcon />,
  iconInContextMenu: false,
  visible: ({ activeDocumentId, stores }) => {
@@ -855,7 +805,7 @@ export const moveDocumentToCollection = createAction({
 export const moveDocument = createAction({
  name: ({ t }) => t("Move"),
  analyticsName: "Move document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <MoveIcon />,
  visible: ({ activeDocumentId, stores }) => {
    if (!activeDocumentId) {
@@ -874,7 +824,7 @@ export const moveDocument = createAction({
 export const moveTemplate = createAction({
  name: ({ t }) => t("Move"),
  analyticsName: "Move document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <MoveIcon />,
  visible: ({ activeDocumentId, stores }) => {
    if (!activeDocumentId) {
@@ -891,9 +841,9 @@ export const moveTemplate = createAction({
 });

 export const archiveDocument = createAction({
-  name: ({ t }) => `${t("Archive")}…`,
+  name: ({ t }) => t("Archive"),
  analyticsName: "Archive document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <ArchiveIcon />,
  visible: ({ activeDocumentId, stores }) => {
    if (!activeDocumentId) {
@@ -902,30 +852,14 @@ export const archiveDocument = createAction({
    return !!stores.policies.abilities(activeDocumentId).archive;
  },
  perform: async ({ activeDocumentId, stores, t }) => {
-    const { dialogs, documents } = stores;
-
    if (activeDocumentId) {
-      const document = documents.get(activeDocumentId);
+      const document = stores.documents.get(activeDocumentId);
      if (!document) {
        return;
      }

-      dialogs.openModal({
-        title: t("Are you sure you want to archive this document?"),
-        content: (
-          <ConfirmationDialog
-            onSubmit={async () => {
-              await document.archive();
-              toast.success(t("Document archived"));
-            }}
-            savingText={`${t("Archiving")}…`}
-          >
-            {t(
-              "Archiving this document will remove it from the collection and search results."
-            )}
-          </ConfirmationDialog>
-        ),
-      });
+      await document.archive();
+      toast.success(t("Document archived"));
    }
  },
 });
@@ -933,7 +867,7 @@ export const archiveDocument = createAction({
 export const deleteDocument = createAction({
  name: ({ t }) => `${t("Delete")}…`,
  analyticsName: "Delete document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <TrashIcon />,
  dangerous: true,
  visible: ({ activeDocumentId, stores }) => {
@@ -967,7 +901,7 @@ export const deleteDocument = createAction({
 export const permanentlyDeleteDocument = createAction({
  name: ({ t }) => t("Permanently delete"),
  analyticsName: "Permanently delete document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <CrossIcon />,
  dangerous: true,
  visible: ({ activeDocumentId, stores }) => {
@@ -1022,7 +956,7 @@ export const permanentlyDeleteDocumentsInTrash = createAction({
 export const openDocumentComments = createAction({
  name: ({ t }) => t("Comments"),
  analyticsName: "Open comments",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <CommentIcon />,
  visible: ({ activeDocumentId, stores }) => {
    const can = stores.policies.abilities(activeDocumentId ?? "");
@@ -1044,7 +978,7 @@ export const openDocumentComments = createAction({
 export const openDocumentHistory = createAction({
  name: ({ t }) => t("History"),
  analyticsName: "Open document history",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <HistoryIcon />,
  visible: ({ activeDocumentId, stores }) => {
    const can = stores.policies.abilities(activeDocumentId ?? "");
@@ -1065,7 +999,7 @@ export const openDocumentHistory = createAction({
 export const openDocumentInsights = createAction({
  name: ({ t }) => t("Insights"),
  analyticsName: "Open document insights",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <GraphIcon />,
  visible: ({ activeDocumentId, stores }) => {
    const can = stores.policies.abilities(activeDocumentId ?? "");
@@ -1102,7 +1036,7 @@ export const toggleViewerInsights = createAction({
      : t("Enable viewer insights");
  },
  analyticsName: "Toggle viewer insights",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <EyeIcon />,
  visible: ({ activeDocumentId, stores }) => {
    const can = stores.policies.abilities(activeDocumentId ?? "");
@@ -1132,7 +1066,6 @@ export const rootDocumentActions = [
  importDocument,
  downloadDocument,
  copyDocumentLink,
-  copyDocumentShareLink,
  copyDocumentAsMarkdown,
  starDocument,
  unstarDocument,
@@ -216,9 +216,7 @@ export const logout = createAction({
  perform: async () => {
    await stores.auth.logout();
    if (env.OIDC_LOGOUT_URI) {
-      setTimeout(() => {
-        window.location.replace(env.OIDC_LOGOUT_URI);
-      }, 200);
+      window.location.replace(env.OIDC_LOGOUT_URI);
    }
  },
 });
@@ -98,11 +98,6 @@ export function actionToKBar(
      )
    : [];

-  const sectionPriority =
-    typeof action.section !== "string" && "priority" in action.section
-      ? (action.section.priority as number) ?? 0
-      : 0;
-
  return [
    {
      id: action.id,
@@ -113,7 +108,6 @@ export function actionToKBar(
      keywords: action.keywords ?? "",
      shortcut: action.shortcut || [],
      icon: resolvedIcon,
-      priority: (1 + (action.priority ?? 0)) * (1 + (sectionPriority ?? 0)),
      perform: action.perform
        ? () => performAction(action, context)
        : undefined,
@@ -2,28 +2,10 @@ import { ActionContext } from "~/types";

 export const CollectionSection = ({ t }: ActionContext) => t("Collection");

-export const ActiveCollectionSection = ({ t, stores }: ActionContext) => {
-  const activeCollection = stores.collections.active;
-  return `${t("Collection")} · ${activeCollection?.name}`;
-};
-
-ActiveCollectionSection.priority = 0.8;
-
 export const DeveloperSection = ({ t }: ActionContext) => t("Debug");

 export const DocumentSection = ({ t }: ActionContext) => t("Document");

-export const ActiveDocumentSection = ({ t, stores }: ActionContext) => {
-  const activeDocument = stores.documents.active;
-  return `${t("Document")} · ${activeDocument?.titleWithDefault}`;
-};
-
-ActiveDocumentSection.priority = 0.9;
-
-export const RecentSection = ({ t }: ActionContext) => t("Recently viewed");
-
-RecentSection.priority = 1;
-
 export const RevisionSection = ({ t }: ActionContext) => t("Revision");

 export const SettingsSection = ({ t }: ActionContext) => t("Settings");
@@ -39,6 +21,4 @@ export const TeamSection = ({ t }: ActionContext) => t("Workspace");
 export const RecentSearchesSection = ({ t }: ActionContext) =>
  t("Recent searches");

-RecentSearchesSection.priority = -0.1;
-
 export const TrashSection = ({ t }: ActionContext) => t("Trash");
@@ -106,24 +106,6 @@ const Analytics: React.FC = ({ children }: Props) => {
    });
  }, []);

-  // Umami
-  React.useEffect(() => {
-    (env.analytics as PublicEnv["analytics"]).forEach((integration) => {
-      if (integration.service !== IntegrationService.Umami) {
-        return;
-      }
-
-      const script = document.createElement("script");
-      script.defer = true;
-      script.src = `${integration.settings?.instanceUrl}${integration.settings?.scriptName}`;
-      script.setAttribute(
-        "data-website-id",
-        integration.settings?.measurementId
-      );
-      document.getElementsByTagName("head")[0]?.appendChild(script);
-    });
-  }, []);
-
  return <>{children}</>;
 };

@@ -19,7 +19,7 @@ function ArrowKeyNavigation(
          return;
        }

-        if (ev.key === "Escape" || ev.key === "Backspace") {
+        if (ev.key === "Escape") {
          ev.preventDefault();
          onEscape(ev);
        }
@@ -1,14 +1,17 @@
 import { AnimatePresence } from "framer-motion";
-import { observer } from "mobx-react";
+import { observer, useLocalStore } from "mobx-react";
 import * as React from "react";
 import { Switch, Route, useLocation, matchPath } from "react-router-dom";
 import { TeamPreference } from "@shared/types";
 import ErrorSuspended from "~/scenes/ErrorSuspended";
+import DocumentContext from "~/components/DocumentContext";
+import type { DocumentContextValue } from "~/components/DocumentContext";
 import Layout from "~/components/Layout";
 import RegisterKeyDown from "~/components/RegisterKeyDown";
 import Sidebar from "~/components/Sidebar";
 import SidebarRight from "~/components/Sidebar/Right";
 import SettingsSidebar from "~/components/Sidebar/Settings";
+import type { Editor as TEditor } from "~/editor";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
@@ -22,7 +25,6 @@ import {
  matchDocumentSlug as slug,
  matchDocumentInsights,
 } from "~/utils/routeHelpers";
-import { DocumentContextProvider } from "./DocumentContext";
 import Fade from "./Fade";
 import { PortalContext } from "./Portal";

@@ -48,6 +50,12 @@ const AuthenticatedLayout: React.FC = ({ children }: Props) => {
  const can = usePolicy(ui.activeDocumentId);
  const canCollection = usePolicy(ui.activeCollectionId);
  const team = useCurrentTeam();
+  const documentContext = useLocalStore<DocumentContextValue>(() => ({
+    editor: null,
+    setEditor: (editor: TEditor) => {
+      documentContext.editor = editor;
+    },
+  }));

  const goToSearch = (ev: KeyboardEvent) => {
    if (!ev.metaKey && !ev.ctrlKey) {
@@ -117,7 +125,7 @@ const AuthenticatedLayout: React.FC = ({ children }: Props) => {
  );

  return (
-    <DocumentContextProvider>
+    <DocumentContext.Provider value={documentContext}>
      <PortalContext.Provider value={layoutRef.current}>
        <Layout
          title={team.name}
@@ -134,7 +142,7 @@ const AuthenticatedLayout: React.FC = ({ children }: Props) => {
          </React.Suspense>
        </Layout>
      </PortalContext.Provider>
-    </DocumentContextProvider>
+    </DocumentContext.Provider>
  );
 };

@@ -4,8 +4,8 @@ import { useTranslation } from "react-i18next";
 import styled, { css } from "styled-components";
 import { s } from "@shared/styles";
 import User from "~/models/User";
+import Avatar from "~/components/Avatar";
 import Tooltip from "~/components/Tooltip";
-import Avatar from "./Avatar";

 type Props = {
  user: User;
@@ -1,35 +0,0 @@
-import { GroupIcon } from "outline-icons";
-import * as React from "react";
-import { useTheme } from "styled-components";
-import Squircle from "@shared/components/Squircle";
-import Group from "~/models/Group";
-import { AvatarSize } from "../Avatar/Avatar";
-
-type Props = {
-  /** The group to show an avatar for */
-  group: Group;
-  /** The size of the icon, 24px is default to match standard avatars */
-  size?: number;
-  /** The color of the avatar */
-  color?: string;
-  /** The background color of the avatar */
-  backgroundColor?: string;
-  className?: string;
-};
-
-export function GroupAvatar({
-  color,
-  backgroundColor,
-  size = AvatarSize.Medium,
-  className,
-}: Props) {
-  const theme = useTheme();
-  return (
-    <Squircle color={color ?? theme.text} size={size} className={className}>
-      <GroupIcon
-        color={backgroundColor ?? theme.background}
-        size={size * 0.75}
-      />
-    </Squircle>
-  );
-}
@@ -1,5 +1,4 @@
 import styled from "styled-components";
-import { s } from "@shared/styles";
 import Flex from "~/components/Flex";

 const Initials = styled(Flex)<{
@@ -12,7 +11,7 @@ const Initials = styled(Flex)<{
  border-radius: 50%;
  width: 100%;
  height: 100%;
-  color: ${s("white75")};
+  color: #fff;
  background-color: ${(props) => props.color};
  width: ${(props) => props.size}px;
  height: ${(props) => props.size}px;
@@ -1,7 +1,6 @@
-import Avatar, { IAvatar, AvatarSize } from "./Avatar";
+import Avatar from "./Avatar";
 import AvatarWithPresence from "./AvatarWithPresence";
-import { GroupAvatar } from "./GroupAvatar";

-export { Avatar, GroupAvatar, AvatarSize, AvatarWithPresence };
+export { AvatarWithPresence };

-export type { IAvatar };
+export default Avatar;
@@ -105,7 +105,7 @@ const RealButton = styled(ActionButton)<RealProps>`
        background: ${lighten(0.05, props.theme.danger)};
      }

-      &:focus-visible {
+      &.focus-visible {
        outline-color: ${darken(0.2, props.theme.danger)} !important;
      }
  `};
@@ -1,13 +1,13 @@
 import filter from "lodash/filter";
 import isEqual from "lodash/isEqual";
-import orderBy from "lodash/orderBy";
+import sortBy from "lodash/sortBy";
 import uniq from "lodash/uniq";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { usePopoverState, PopoverDisclosure } from "reakit/Popover";
 import Document from "~/models/Document";
-import { AvatarWithPresence } from "~/components/Avatar";
+import AvatarWithPresence from "~/components/Avatar/AvatarWithPresence";
 import DocumentViews from "~/components/DocumentViews";
 import Facepile from "~/components/Facepile";
 import NudeButton from "~/components/NudeButton";
@@ -16,14 +16,9 @@ import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";

 type Props = {
-  /** The document to display live collaborators for */
  document: Document;
 };

-/**
- * Displays a list of live collaborators for a document, including their avatars
- * and presence status.
- */
 function Collaborators(props: Props) {
  const { t } = useTranslation();
  const user = useCurrentUser();
@@ -44,16 +39,15 @@ function Collaborators(props: Props) {
  // ensure currently present via websocket are always ordered first
  const collaborators = React.useMemo(
    () =>
-      orderBy(
+      sortBy(
        filter(
          users.orderedData,
-          (u) =>
-            (presentIds.includes(u.id) ||
-              document.collaboratorIds.includes(u.id)) &&
-            !u.isSuspended
+          (user) =>
+            (presentIds.includes(user.id) ||
+              document.collaboratorIds.includes(user.id)) &&
+            !user.isSuspended
        ),
-        [(u) => presentIds.includes(u.id), "id"],
-        ["asc", "asc"]
+        (user) => presentIds.includes(user.id)
      ),
    [document.collaboratorIds, users.orderedData, presentIds]
  );
@@ -75,19 +69,12 @@ function Collaborators(props: Props) {
    placement: "bottom-end",
  });

-  const limit = 8;
-
  return (
    <>
      <PopoverDisclosure {...popover}>
-        {(popoverProps) => (
-          <NudeButton
-            width={Math.min(collaborators.length, limit) * 32}
-            height={32}
-            {...popoverProps}
-          >
+        {(props) => (
+          <NudeButton width={collaborators.length * 32} height={32} {...props}>
            <Facepile
-              limit={limit}
              users={collaborators}
              renderAvatar={(collaborator) => {
                const isPresent = presentIds.includes(collaborator.id);
@@ -19,6 +19,7 @@ import Text from "~/components/Text";
 import useBoolean from "~/hooks/useBoolean";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
 import { EmptySelectValue } from "~/types";
+import { Feature, FeatureFlags } from "~/utils/FeatureFlags";

 const IconPicker = React.lazy(() => import("~/components/IconPicker"));

@@ -155,16 +156,18 @@ export const CollectionForm = observer(function CollectionForm_({
        />
      )}

-      {team.sharing && (
-        <Switch
-          id="sharing"
-          label={t("Public document sharing")}
-          note={t(
-            "Allow documents within this collection to be shared publicly on the internet."
-          )}
-          {...register("sharing")}
-        />
-      )}
+      {team.sharing &&
+        (!collection ||
+          FeatureFlags.isEnabled(Feature.newCollectionSharing)) && (
+          <Switch
+            id="sharing"
+            label={t("Public document sharing")}
+            note={t(
+              "Allow documents within this collection to be shared publicly on the internet."
+            )}
+            {...register("sharing")}
+          />
+        )}

      <Flex justify="flex-end">
        <Button
@@ -1,7 +1,7 @@
-import { runInAction } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { toast } from "sonner";
+import Collection from "~/models/Collection";
 import useStores from "~/hooks/useStores";
 import history from "~/utils/history";
 import { CollectionForm, FormData } from "./CollectionForm";
@@ -17,11 +17,8 @@ export const CollectionNew = observer(function CollectionNew_({
  const handleSubmit = React.useCallback(
    async (data: FormData) => {
      try {
-        const collection = await collections.save(data);
-        // Avoid flash of loading state for the new collection, we know it's empty.
-        runInAction(() => {
-          collection.documents = [];
-        });
+        const collection = new Collection(data, collections);
+        await collection.save();
        onSubmit?.();
        history.push(collection.path);
      } catch (error) {
@@ -6,27 +6,20 @@ import { Portal } from "react-portal";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { depths, s } from "@shared/styles";
+import CommandBarResults from "~/components/CommandBarResults";
 import SearchActions from "~/components/SearchActions";
 import rootActions from "~/actions/root";
 import useCommandBarActions from "~/hooks/useCommandBarActions";
-import CommandBarResults from "./CommandBarResults";
-import useRecentDocumentActions from "./useRecentDocumentActions";
-import useSettingsAction from "./useSettingsAction";
-import useTemplatesAction from "./useTemplatesAction";
+import useSettingsActions from "~/hooks/useSettingsActions";
+import useTemplateActions from "~/hooks/useTemplateActions";

 function CommandBar() {
  const { t } = useTranslation();
-  const recentDocumentActions = useRecentDocumentActions();
-  const settingsAction = useSettingsAction();
-  const templatesAction = useTemplatesAction();
+  const settingsActions = useSettingsActions();
+  const templateActions = useTemplateActions();
  const commandBarActions = React.useMemo(
-    () => [
-      ...recentDocumentActions,
-      ...rootActions,
-      templatesAction,
-      settingsAction,
-    ],
-    [recentDocumentActions, settingsAction, templatesAction]
+    () => [...rootActions, templateActions, settingsActions],
+    [settingsActions, templateActions]
  );

  useCommandBarActions(commandBarActions);
@@ -37,9 +30,7 @@ function CommandBar() {
        <Positioner>
          <Animator>
            <SearchActions />
-            <SearchInput
-              defaultPlaceholder={`${t("Type a command or search")}…`}
-            />
+            <SearchInput defaultPlaceholder={t("Type a command or search")} />
            <CommandBarResults />
          </Animator>
        </Positioner>
@@ -69,15 +60,12 @@ const Positioner = styled(KBarPositioner)`
 `;

 const SearchInput = styled(KBarSearch)`
-  position: relative;
-  padding: 16px 12px;
-  margin: 0 8px;
-  width: calc(100% - 16px);
+  padding: 16px 20px;
+  width: 100%;
  outline: none;
  border: none;
  background: ${s("menuBackground")};
  color: ${s("text")};
-  border-bottom: 1px solid ${s("inputBorder")};

  &:disabled,
  &::placeholder {
@@ -1,3 +0,0 @@
-import CommandBar from "./CommandBar";
-
-export default CommandBar;
@@ -1,35 +0,0 @@
-import { DocumentIcon } from "outline-icons";
-import * as React from "react";
-import Icon from "~/components/Icon";
-import { createAction } from "~/actions";
-import { RecentSection } from "~/actions/sections";
-import useStores from "~/hooks/useStores";
-import history from "~/utils/history";
-import { documentPath } from "~/utils/routeHelpers";
-
-const useRecentDocumentActions = (count = 6) => {
-  const { documents, ui } = useStores();
-
-  return React.useMemo(
-    () =>
-      documents.recentlyViewed
-        .filter((document) => document.id !== ui.activeDocumentId)
-        .slice(0, count)
-        .map((item) =>
-          createAction({
-            name: item.titleWithDefault,
-            analyticsName: "Recently viewed document",
-            section: RecentSection,
-            icon: item.icon ? (
-              <Icon value={item.icon} color={item.color ?? undefined} />
-            ) : (
-              <DocumentIcon />
-            ),
-            perform: () => history.push(documentPath(item)),
-          })
-        ),
-    [count, ui.activeDocumentId, documents.recentlyViewed]
-  );
-};
-
-export default useRecentDocumentActions;
@@ -5,7 +5,7 @@ import styled, { css, useTheme } from "styled-components";
 import { s, ellipsis } from "@shared/styles";
 import Flex from "~/components/Flex";
 import Key from "~/components/Key";
-import Text from "~/components/Text";
+import Text from "./Text";

 type Props = {
  action: ActionImpl;
@@ -1,8 +1,8 @@
 import { useMatches, KBarResults } from "kbar";
 import * as React from "react";
 import styled from "styled-components";
-import Text from "~/components/Text";
-import CommandBarItem from "./CommandBarItem";
+import { s } from "@shared/styles";
+import CommandBarItem from "~/components/CommandBarItem";

 export default function CommandBarResults() {
  const { results, rootActionId } = useMatches();
@@ -14,9 +14,7 @@ export default function CommandBarResults() {
        maxHeight={400}
        onRender={({ item, active }) =>
          typeof item === "string" ? (
-            <Header type="tertiary" size="xsmall" ellipsis>
-              {item}
-            </Header>
+            <Header>{item}</Header>
          ) : (
            <CommandBarItem
              action={item}
@@ -37,10 +35,11 @@ const Container = styled.div`
  }
 `;

-const Header = styled(Text).attrs({ as: "h3" })`
-  letter-spacing: 0.03em;
+const Header = styled.h3`
+  font-size: 13px;
+  letter-spacing: 0.04em;
  margin: 0;
  padding: 16px 0 4px 20px;
+  color: ${s("textTertiary")};
  height: 36px;
-  cursor: default;
 `;
@@ -1,62 +0,0 @@
-import { observer } from "mobx-react";
-import * as React from "react";
-import { Trans, useTranslation } from "react-i18next";
-import { CollectionPermission, NavigationNode } from "@shared/types";
-import type Collection from "~/models/Collection";
-import ConfirmationDialog from "~/components/ConfirmationDialog";
-import useStores from "~/hooks/useStores";
-
-type Props = {
-  /** The navigation node to move, must represent a document. */
-  item: NavigationNode;
-  /** The collection to move the document to. */
-  collection: Collection;
-  /** The parent document to move the document under. */
-  parentDocumentId?: string | null;
-  /** The index to move the document to. */
-  index?: number | null;
-};
-
-function ConfirmMoveDialog({ collection, item, ...rest }: Props) {
-  const { documents, dialogs, collections } = useStores();
-  const { t } = useTranslation();
-  const prevCollection = collections.get(item.collectionId!);
-  const accessMapping = {
-    [CollectionPermission.ReadWrite]: t("view and edit access"),
-    [CollectionPermission.Read]: t("view only access"),
-    null: t("no access"),
-  };
-
-  const handleSubmit = async () => {
-    await documents.move({
-      documentId: item.id,
-      collectionId: collection.id,
-      ...rest,
-    });
-    dialogs.closeAllModals();
-  };
-
-  return (
-    <ConfirmationDialog
-      onSubmit={handleSubmit}
-      submitText={t("Move document")}
-      savingText={`${t("Moving")}…`}
-    >
-      <Trans
-        defaults="Moving the document <em>{{ title }}</em> to the {{ newCollectionName }} collection will change permission for all workspace members from <em>{{ prevPermission }}</em> to <em>{{ newPermission }}</em>."
-        values={{
-          title: item.title,
-          prevCollectionName: prevCollection?.name,
-          newCollectionName: collection.name,
-          prevPermission: accessMapping[prevCollection?.permission || "null"],
-          newPermission: accessMapping[collection.permission || "null"],
-        }}
-        components={{
-          em: <strong />,
-        }}
-      />
-    </ConfirmationDialog>
-  );
-}
-
-export default observer(ConfirmMoveDialog);
@@ -2,7 +2,7 @@ import { observer } from "mobx-react";
 import { DisconnectedIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import styled from "styled-components";
+import styled, { useTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import Fade from "~/components/Fade";
 import NudeButton from "~/components/NudeButton";
@@ -11,6 +11,7 @@ import useStores from "~/hooks/useStores";

 function ConnectionStatus() {
  const { ui } = useStores();
+  const theme = useTheme();
  const { t } = useTranslation();

  const codeToMessage = {
@@ -60,7 +61,7 @@ function ConnectionStatus() {
    >
      <Button>
        <Fade>
-          <DisconnectedIcon />
+          <DisconnectedIcon color={theme.sidebarText} />
        </Fade>
      </Button>
    </Tooltip>
@@ -71,7 +72,7 @@ const Button = styled(NudeButton)`
  display: none;
  position: fixed;
  bottom: 0;
-  margin: 20px;
+  margin: 24px;
  transform: translateX(-32px);

  ${breakpoint("tablet")`
@@ -6,7 +6,6 @@ import { mergeRefs } from "react-merge-refs";
 import { MenuItem as BaseMenuItem } from "reakit/Menu";
 import styled, { css } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import { s } from "@shared/styles";
 import Text from "../Text";
 import MenuIconWrapper from "./MenuIconWrapper";

@@ -75,9 +74,9 @@ const MenuItem = (
          ])}
        >
          {selected !== undefined && (
-            <SelectedWrapper aria-hidden>
+            <MenuIconWrapper aria-hidden>
              {selected ? <CheckmarkIcon /> : <Spacer />}
-            </SelectedWrapper>
+            </MenuIconWrapper>
          )}
          {icon && <MenuIconWrapper aria-hidden>{icon}</MenuIconWrapper>}
          <Title>{children}</Title>
@@ -153,7 +152,7 @@ export const MenuAnchorCSS = css<MenuAnchorProps>`
  @media (hover: hover) {
    &:hover,
    &:focus,
-    &:focus-visible {
+    &.focus-visible {
      color: ${props.theme.accentText};
      background: ${props.dangerous ? props.theme.danger : props.theme.accent};
      box-shadow: none;
@@ -197,13 +196,4 @@ export const MenuAnchor = styled.a`
  ${MenuAnchorCSS}
 `;

-const SelectedWrapper = styled.span`
-  width: 24px;
-  height: 24px;
-  margin-right: 4px;
-  margin-left: -8px;
-  flex-shrink: 0;
-  color: ${s("textSecondary")};
-`;
-
 export default React.forwardRef<HTMLAnchorElement, Props>(MenuItem);
@@ -6,7 +6,6 @@ import styled, { DefaultTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { depths, s } from "@shared/styles";
 import Scrollable from "~/components/Scrollable";
-import useEventListener from "~/hooks/useEventListener";
 import useMenuContext from "~/hooks/useMenuContext";
 import useMenuHeight from "~/hooks/useMenuHeight";
 import useMobile from "~/hooks/useMobile";
@@ -51,8 +50,6 @@ type Props = MenuStateReturn & {
  onClick?: (ev: React.MouseEvent) => void;
  /** The maximum width of the context menu. */
  maxWidth?: number;
-  /** The minimum height of the context menu. */
-  minHeight?: number;
  children?: React.ReactNode;
 };

@@ -137,7 +134,6 @@ type InnerContextMenuProps = MenuStateReturn & {
  menuProps: { style?: React.CSSProperties; placement: string };
  children: React.ReactNode;
  maxWidth?: number;
-  minHeight?: number;
 };

 /**
@@ -175,32 +171,6 @@ const InnerContextMenu = (props: InnerContextMenuProps) => {
    };
  }, [props.isSubMenu, props.visible]);

-  useEventListener(
-    "animationstart",
-    (event) => {
-      if (event.target instanceof HTMLElement) {
-        const parent = event.target.parentElement;
-        if (parent) {
-          parent.style.pointerEvents = "none";
-        }
-      }
-    },
-    backgroundRef.current
-  );
-
-  useEventListener(
-    "animationend",
-    (event) => {
-      if (event.target instanceof HTMLElement) {
-        const parent = event.target.parentElement;
-        if (parent) {
-          parent.style.pointerEvents = "auto";
-        }
-      }
-    },
-    backgroundRef.current
-  );
-
  const style =
    topAnchor && !isMobile
      ? {
@@ -223,7 +193,6 @@ const InnerContextMenu = (props: InnerContextMenuProps) => {
        <Background
          dir="auto"
          maxWidth={props.maxWidth}
-          minHeight={props.minHeight}
          topAnchor={topAnchor}
          rightAnchor={rightAnchor}
          ref={backgroundRef}
@@ -254,30 +223,10 @@ export const Position = styled.div`
  position: absolute;
  z-index: ${depths.menu};

-  // Note: pointer events are re-enabled after the animation ends, see event listeners above
-  pointer-events: none;
-
-  &:focus-visible {
+  &.focus-visible {
    transition-delay: 250ms;
    transition-property: outline-width;
    transition-duration: 0;
-    outline: none;
-
-    &:after {
-      content: "";
-      position: absolute;
-      top: 1px;
-      left: 1px;
-      right: 1px;
-      bottom: 1px;
-      pointer-events: none;
-      border-radius: 4px;
-
-      outline-color: ${s("accent")};
-      outline-width: initial;
-      outline-offset: -1px;
-      outline-style: solid;
-    }
  }

  /*
@@ -298,7 +247,6 @@ type BackgroundProps = {
  topAnchor?: boolean;
  rightAnchor?: boolean;
  maxWidth?: number;
-  minHeight?: number;
  theme: DefaultTheme;
 };

@@ -310,8 +258,9 @@ export const Background = styled(Scrollable)<BackgroundProps>`
  border-radius: 6px;
  padding: 6px;
  min-width: 180px;
-  min-height: ${(props) => props.minHeight || 44}px;
+  min-height: 44px;
  max-height: 75vh;
+  pointer-events: all;
  font-weight: normal;

  @media print {
@@ -49,7 +49,7 @@ const DefaultCollectionInputSelect = ({

  const options = React.useMemo(
    () =>
-      collections.nonPrivate.reduce(
+      collections.publicCollections.reduce(
        (acc, collection) => [
          ...acc,
          {
@@ -78,7 +78,7 @@ const DefaultCollectionInputSelect = ({
          },
        ]
      ),
-    [collections.nonPrivate, t]
+    [collections.publicCollections, t]
  );

  if (fetching) {
@@ -8,7 +8,6 @@ import Document from "~/models/Document";
 import Breadcrumb from "~/components/Breadcrumb";
 import Icon from "~/components/Icon";
 import CollectionIcon from "~/components/Icons/CollectionIcon";
-import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
 import { MenuInternalLink } from "~/types";
 import {
@@ -68,15 +67,14 @@ const DocumentBreadcrumb: React.FC<Props> = ({
  const collection = document.collectionId
    ? collections.get(document.collectionId)
    : undefined;
-  const can = usePolicy(collection);

  React.useEffect(() => {
-    void document.loadRelations({ withoutPolicies: true });
+    void document.loadRelations();
  }, [document]);

  let collectionNode: MenuInternalLink | undefined;

-  if (collection && can.readDocument) {
+  if (collection) {
    collectionNode = {
      type: "route",
      title: collection.name,
@@ -0,0 +1,37 @@
+import * as React from "react";
+import { Editor } from "~/editor";
+import useIdle from "~/hooks/useIdle";
+
+export type DocumentContextValue = {
+  /** The current editor instance for this document. */
+  editor: Editor | null;
+  /** Set the current editor instance for this document. */
+  setEditor: (editor: Editor) => void;
+};
+
+const DocumentContext = React.createContext<DocumentContextValue>({
+  editor: null,
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  setEditor() {},
+});
+
+export const useDocumentContext = () => React.useContext(DocumentContext);
+
+const activityEvents = [
+  "click",
+  "mousemove",
+  "DOMMouseScroll",
+  "mousewheel",
+  "mousedown",
+  "touchstart",
+  "touchmove",
+  "focus",
+];
+
+export const useEditingFocus = () => {
+  const { editor } = useDocumentContext();
+  const isIdle = useIdle(3000, activityEvents);
+  return isIdle && !!editor?.view.hasFocus();
+};
+
+export default DocumentContext;
@@ -1,76 +0,0 @@
-import { action, computed, observable } from "mobx";
-import React, { PropsWithChildren } from "react";
-import { Heading } from "@shared/utils/ProsemirrorHelper";
-import Document from "~/models/Document";
-import { Editor } from "~/editor";
-
-class DocumentContext {
-  /** The current document */
-  document?: Document;
-
-  /** The editor instance for this document */
-  editor?: Editor;
-
-  @observable
-  headings: Heading[] = [];
-
-  @computed
-  get hasHeadings() {
-    return this.headings.length > 0;
-  }
-
-  @action
-  setDocument = (document: Document) => {
-    this.document = document;
-    this.updateState();
-  };
-
-  @action
-  setEditor = (editor: Editor) => {
-    this.editor = editor;
-    this.updateState();
-  };
-
-  @action
-  updateState = () => {
-    this.updateHeadings();
-    this.updateTasks();
-  };
-
-  private updateHeadings() {
-    const currHeadings = this.editor?.getHeadings() ?? [];
-    const hasChanged =
-      currHeadings.map((h) => h.level + h.title).join("") !==
-      this.headings.map((h) => h.level + h.title).join("");
-
-    if (hasChanged) {
-      this.headings = currHeadings;
-    }
-  }
-
-  private updateTasks() {
-    const tasks = this.editor?.getTasks() ?? [];
-    const total = tasks.length ?? 0;
-    const completed = tasks.filter((t) => t.completed).length ?? 0;
-    this.document?.updateTasks(total, completed);
-  }
-}
-
-const Context = React.createContext<DocumentContext | null>(null);
-
-export const useDocumentContext = () => {
-  const ctx = React.useContext(Context);
-  if (!ctx) {
-    throw new Error(
-      "useDocumentContext must be used within DocumentContextProvider"
-    );
-  }
-  return ctx;
-};
-
-export const DocumentContextProvider = ({
-  children,
-}: PropsWithChildren<unknown>) => {
-  const context = React.useMemo(() => new DocumentContext(), []);
-  return <Context.Provider value={context}>{children}</Context.Provider>;
-};
@@ -11,7 +11,7 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import AutoSizer from "react-virtualized-auto-sizer";
 import { FixedSizeList as List } from "react-window";
-import scrollIntoView from "scroll-into-view-if-needed";
+import scrollIntoView from "smooth-scroll-into-view-if-needed";
 import styled, { useTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { NavigationNode } from "@shared/types";
@@ -1,7 +1,7 @@
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import scrollIntoView from "scroll-into-view-if-needed";
+import scrollIntoView from "smooth-scroll-into-view-if-needed";
 import styled from "styled-components";
 import { ellipsis } from "@shared/styles";
 import { Node as SearchResult } from "~/components/DocumentExplorerNode";
@@ -140,7 +140,7 @@ const DocumentMeta: React.FC<Props> = ({
  }

  const nestedDocumentsCount = collection
-    ? collection.getChildrenForDocument(document.id).length
+    ? collection.getDocumentChildren(document.id).length
    : 0;
  const canShowProgressBar = isTasks && !isTemplate;

@@ -6,7 +6,7 @@ import { useTranslation } from "react-i18next";
 import { dateLocale, dateToRelative } from "@shared/utils/date";
 import Document from "~/models/Document";
 import User from "~/models/User";
-import { Avatar } from "~/components/Avatar";
+import Avatar from "~/components/Avatar";
 import ListItem from "~/components/List/Item";
 import PaginatedList from "~/components/PaginatedList";
 import useCurrentUser from "~/hooks/useCurrentUser";
@@ -70,14 +70,14 @@ function DuplicateDialog({ document, onSubmit }: Props) {
            <Text size="small">
              <Switch
                name="publish"
-                label={t("Publish")}
+                label={t("Published")}
                labelPosition="right"
                checked={publish}
                onChange={handlePublishChange}
              />
            </Text>
          )}
-          {document.publishedAt && document.childDocuments.length > 0 && (
+          {document.publishedAt && (
            <Text size="small">
              <Switch
                name="recursive"
@@ -9,6 +9,7 @@ import { mergeRefs } from "react-merge-refs";
 import { Optional } from "utility-types";
 import insertFiles from "@shared/editor/commands/insertFiles";
 import { AttachmentPreset } from "@shared/types";
+import { Heading } from "@shared/utils/ProsemirrorHelper";
 import { dateLocale, dateToRelative } from "@shared/utils/date";
 import { getDataTransferFiles } from "@shared/utils/files";
 import parseDocumentSlug from "@shared/utils/parseDocumentSlug";
@@ -42,14 +43,21 @@ export type Props = Optional<
 > & {
  shareId?: string | undefined;
  embedsDisabled?: boolean;
+  onHeadingsChange?: (headings: Heading[]) => void;
  onSynced?: () => Promise<void>;
  onPublish?: (event: React.MouseEvent) => void;
  editorStyle?: React.CSSProperties;
 };

 function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
-  const { id, shareId, onChange, onCreateCommentMark, onDeleteCommentMark } =
-    props;
+  const {
+    id,
+    shareId,
+    onChange,
+    onHeadingsChange,
+    onCreateCommentMark,
+    onDeleteCommentMark,
+  } = props;
  const userLocale = useUserLocale();
  const locale = dateLocale(userLocale);
  const { comments, documents } = useStores();
@@ -57,6 +65,7 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
  const embeds = useEmbeds(!shareId);
  const localRef = React.useRef<SharedEditor>();
  const preferences = useCurrentUser({ rejectOnEmpty: false })?.preferences;
+  const previousHeadings = React.useRef<Heading[] | null>(null);
  const previousCommentIds = React.useRef<string[]>();

  const handleSearchLink = React.useCallback(
@@ -203,6 +212,21 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
    []
  );

+  // Calculate if headings have changed and trigger callback if so
+  const updateHeadings = React.useCallback(() => {
+    if (onHeadingsChange) {
+      const headings = localRef?.current?.getHeadings();
+      if (
+        headings &&
+        headings.map((h) => h.level + h.title).join("") !==
+          previousHeadings.current?.map((h) => h.level + h.title).join("")
+      ) {
+        previousHeadings.current = headings;
+        onHeadingsChange(headings);
+      }
+    }
+  }, [localRef, onHeadingsChange]);
+
  const updateComments = React.useCallback(() => {
    if (onCreateCommentMark && onDeleteCommentMark && localRef.current) {
      const commentMarks = localRef.current.getComments();
@@ -237,18 +261,20 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
  const handleChange = React.useCallback(
    (event) => {
      onChange?.(event);
+      updateHeadings();
      updateComments();
    },
-    [onChange, updateComments]
+    [onChange, updateComments, updateHeadings]
  );

  const handleRefChanged = React.useCallback(
    (node: SharedEditor | null) => {
      if (node) {
+        updateHeadings();
        updateComments();
      }
    },
-    [updateComments]
+    [updateComments, updateHeadings]
  );

  return (
@@ -12,11 +12,10 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router-dom";
 import styled, { css } from "styled-components";
-import EventBoundary from "@shared/components/EventBoundary";
 import { s } from "@shared/styles";
 import Document from "~/models/Document";
 import Event from "~/models/Event";
-import { Avatar } from "~/components/Avatar";
+import Avatar from "~/components/Avatar";
 import Item, { Actions, Props as ItemProps } from "~/components/List/Item";
 import Time from "~/components/Time";
 import useStores from "~/hooks/useStores";
@@ -159,9 +158,7 @@ const EventListItem = ({ event, latest, document, ...rest }: Props) => {
      }
      actions={
        isRevision && isActive && event.modelId && !latest ? (
-          <StyledEventBoundary>
-            <RevisionMenu document={document} revisionId={event.modelId} />
-          </StyledEventBoundary>
+          <RevisionMenu document={document} revisionId={event.modelId} />
        ) : undefined
      }
      onMouseEnter={prefetchRevision}
@@ -178,10 +175,6 @@ const BaseItem = React.forwardRef(function _BaseItem(
  return <ListItem to={to} ref={ref} {...rest} />;
 });

-const StyledEventBoundary = styled(EventBoundary)`
-  height: 24px;
-`;
-
 const Subtitle = styled.span`
  svg {
    margin: -3px;
@@ -3,8 +3,9 @@ import * as React from "react";
 import styled from "styled-components";
 import { s } from "@shared/styles";
 import User from "~/models/User";
-import { Avatar, AvatarSize } from "~/components/Avatar";
+import Avatar from "~/components/Avatar";
 import Flex from "~/components/Flex";
+import { AvatarSize } from "./Avatar/Avatar";

 type Props = {
  users: User[];
@@ -1,23 +1,18 @@
-import deburr from "lodash/deburr";
 import * as React from "react";
-import { useTranslation } from "react-i18next";
 import { useMenuState, MenuButton } from "reakit/Menu";
 import styled from "styled-components";
 import { s } from "@shared/styles";
-import type { FetchPageParams } from "~/stores/base/Store";
 import Button, { Inner } from "~/components/Button";
 import ContextMenu from "~/components/ContextMenu";
 import MenuItem from "~/components/ContextMenu/MenuItem";
 import Text from "~/components/Text";
-import Input, { NativeInput, Outline } from "./Input";
-import PaginatedList, { PaginatedItem } from "./PaginatedList";

-interface TFilterOption extends PaginatedItem {
+type TFilterOption = {
  key: string;
  label: string;
  note?: string;
  icon?: React.ReactNode;
-}
+};

 type Props = {
  options: TFilterOption[];
@@ -26,9 +21,6 @@ type Props = {
  selectedPrefix?: string;
  className?: string;
  onSelect: (key: string | null | undefined) => void;
-  showFilter?: boolean;
-  fetchQuery?: (options: FetchPageParams) => Promise<PaginatedItem[]>;
-  fetchQueryOptions?: Record<string, string>;
 };

 const FilterOptions = ({
@@ -38,20 +30,13 @@ const FilterOptions = ({
  selectedPrefix = "",
  className,
  onSelect,
-  showFilter,
-  fetchQuery,
-  fetchQueryOptions,
 }: Props) => {
-  const { t } = useTranslation();
-  const searchInputRef = React.useRef<HTMLInputElement>(null);
-  const listRef = React.useRef<HTMLDivElement | null>(null);
  const menu = useMenuState({
    modal: true,
  });
  const selectedItems = options.filter((option) =>
    selectedKeys.includes(option.key)
  );
-  const [query, setQuery] = React.useState("");

  const selectedLabel = selectedItems.length
    ? selectedItems
@@ -59,109 +44,6 @@ const FilterOptions = ({
        .join(", ")
    : "";

-  const renderItem = React.useCallback(
-    (option: TFilterOption) => (
-      <MenuItem
-        key={option.key}
-        onClick={() => {
-          onSelect(option.key);
-          menu.hide();
-        }}
-        selected={selectedKeys.includes(option.key)}
-        {...menu}
-      >
-        {option.icon && <Icon>{option.icon}</Icon>}
-        {option.note ? (
-          <LabelWithNote>
-            {option.label}
-            <Note>{option.note}</Note>
-          </LabelWithNote>
-        ) : (
-          option.label
-        )}
-      </MenuItem>
-    ),
-    [menu, onSelect, selectedKeys]
-  );
-
-  const handleFilter = (ev: React.ChangeEvent<HTMLInputElement>) => {
-    setQuery(ev.target.value);
-  };
-
-  const filteredOptions = React.useMemo(() => {
-    const normalizedQuery = deburr(query.toLowerCase());
-
-    return query
-      ? options
-          .filter((option) =>
-            deburr(option.label).toLowerCase().includes(normalizedQuery)
-          )
-          // sort options starting with query first
-          .sort((a, b) => {
-            const aStartsWith = deburr(a.label)
-              .toLowerCase()
-              .startsWith(normalizedQuery);
-            const bStartsWith = deburr(b.label)
-              .toLowerCase()
-              .startsWith(normalizedQuery);
-
-            if (aStartsWith && !bStartsWith) {
-              return -1;
-            }
-            if (!aStartsWith && bStartsWith) {
-              return 1;
-            }
-            return 0;
-          })
-      : options;
-  }, [options, query]);
-
-  const handleKeyDown = React.useCallback(
-    (ev: React.KeyboardEvent) => {
-      if (ev.nativeEvent.isComposing || ev.shiftKey) {
-        return;
-      }
-
-      switch (ev.key) {
-        case "Escape":
-          menu.hide();
-          break;
-        case "Enter":
-          if (filteredOptions.length === 1) {
-            ev.preventDefault();
-            onSelect(filteredOptions[0].key);
-            menu.hide();
-          }
-          break;
-        case "ArrowDown":
-          ev.preventDefault();
-          (listRef.current?.firstElementChild as HTMLElement)?.focus();
-          break;
-        default:
-          break;
-      }
-    },
-    [filteredOptions, menu, onSelect]
-  );
-
-  const handleEscapeFromList = React.useCallback((ev: React.KeyboardEvent) => {
-    searchInputRef.current?.focus();
-
-    if (ev.key === "Backspace") {
-      setQuery((prev) => prev.slice(0, -1));
-    }
-  }, []);
-
-  React.useEffect(() => {
-    if (menu.visible) {
-      searchInputRef.current?.focus();
-    } else {
-      setQuery("");
-    }
-  }, [menu.visible]);
-
-  const showFilterInput = showFilter || options.length > 10;
-
  return (
    <div>
      <MenuButton {...menu}>
@@ -171,73 +53,33 @@ const FilterOptions = ({
          </StyledButton>
        )}
      </MenuButton>
-      <ContextMenu aria-label={defaultLabel} minHeight={66} {...menu}>
-        <PaginatedList
-          listRef={listRef}
-          options={{ query, ...fetchQueryOptions }}
-          items={filteredOptions}
-          fetch={fetchQuery}
-          renderItem={renderItem}
-          onEscape={handleEscapeFromList}
-          heading={showFilterInput ? <Spacer /> : undefined}
-          empty={<Empty />}
-        />
-        {showFilterInput && (
-          <SearchInput
-            ref={searchInputRef}
-            value={query}
-            onChange={handleFilter}
-            onKeyDown={handleKeyDown}
-            placeholder={`${t("Filter")}…`}
-            autoFocus
-          />
-        )}
+      <ContextMenu aria-label={defaultLabel} {...menu}>
+        {options.map((option) => (
+          <MenuItem
+            key={option.key}
+            onClick={() => {
+              onSelect(option.key);
+              menu.hide();
+            }}
+            selected={selectedKeys.includes(option.key)}
+            {...menu}
+          >
+            {option.icon && <Icon>{option.icon}</Icon>}
+            {option.note ? (
+              <LabelWithNote>
+                {option.label}
+                <Note>{option.note}</Note>
+              </LabelWithNote>
+            ) : (
+              option.label
+            )}
+          </MenuItem>
+        ))}
      </ContextMenu>
    </div>
  );
 };

-const Empty = () => {
-  const { t } = useTranslation();
-
-  return (
-    <>
-      <Spacer />
-      <Text size="small" type="tertiary" style={{ marginLeft: 6 }}>
-        {t("No results")}
-      </Text>
-    </>
-  );
-};
-
-const Spacer = styled.div`
-  height: 30px;
-`;
-
-const SearchInput = styled(Input)`
-  position: absolute;
-  width: 100%;
-  border: none;
-  border-top-left-radius: 6px;
-  border-top-right-radius: 6px;
-  overflow: hidden;
-  margin: 0;
-  top: 0;
-  left: 0;
-  right: 0;
-
-  ${Outline} {
-    border: none;
-    border-radius: 0;
-    border-bottom: 1px solid ${s("inputBorder")};
-    background: ${s("menuBackground")};
-  }
-
-  ${NativeInput} {
-    font-size: 14px;
-  }
-`;
-
 const Note = styled(Text)`
  display: block;
  margin: 2px 0;
@@ -13,6 +13,7 @@ import Flex from "~/components/Flex";
 import ListItem from "~/components/List/Item";
 import Modal from "~/components/Modal";
 import useBoolean from "~/hooks/useBoolean";
+import useStores from "~/hooks/useStores";
 import { hover } from "~/styles";
 import NudeButton from "./NudeButton";

@@ -25,11 +26,15 @@ type Props = {
 };

 function GroupListItem({ group, showFacepile, renderActions }: Props) {
+  const { groupUsers } = useStores();
  const { t } = useTranslation();
  const [membersModalOpen, setMembersModalOpen, setMembersModalClosed] =
    useBoolean();
  const memberCount = group.memberCount;
-  const users = group.users.slice(0, MAX_AVATAR_DISPLAY);
+  const membershipsInGroup = groupUsers.inGroup(group.id);
+  const users = membershipsInGroup
+    .slice(0, MAX_AVATAR_DISPLAY)
+    .map((gm) => gm.user);
  const overflow = memberCount - users.length;

  return (
@@ -1,8 +1,8 @@
 import * as React from "react";
 import { Trans } from "react-i18next";
 import { UnfurlResourceType, UnfurlResponse } from "@shared/types";
-import { Avatar } from "~/components/Avatar";
 import Flex from "~/components/Flex";
+import Avatar from "../Avatar";
 import { IssueStatusIcon } from "../Icons/IssueStatusIcon";
 import Text from "../Text";
 import Time from "../Time";
@@ -1,6 +1,7 @@
 import * as React from "react";
 import { UnfurlResourceType, UnfurlResponse } from "@shared/types";
-import { Avatar, AvatarSize } from "~/components/Avatar";
+import Avatar from "~/components/Avatar";
+import { AvatarSize } from "~/components/Avatar/Avatar";
 import Flex from "~/components/Flex";
 import { Preview, Title, Info, Card, CardContent } from "./Components";

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { Trans } from "react-i18next";
 import { UnfurlResourceType, UnfurlResponse } from "@shared/types";
-import { Avatar } from "~/components/Avatar";
 import Flex from "~/components/Flex";
+import Avatar from "../Avatar";
 import { PullRequestIcon } from "../Icons/PullRequestIcon";
 import Text from "../Text";
 import Time from "../Time";
@@ -2,6 +2,8 @@ import { observer } from "mobx-react";
 import { getLuminance } from "polished";
 import * as React from "react";
 import styled from "styled-components";
+import breakpoint from "styled-components-breakpoint";
+import { randomElement } from "@shared/random";
 import { IconType } from "@shared/types";
 import { IconLibrary } from "@shared/utils/IconLibrary";
 import { colorPalette } from "@shared/utils/collections";
@@ -81,7 +83,7 @@ const SVGIcon = observer(
  }: Props) => {
    const { ui } = useStores();

-    let color = inputColor ?? colorPalette[0];
+    let color = inputColor ?? randomElement(colorPalette);

    // If the chosen icon color is very dark then we invert it in dark mode
    if (!forceColor) {
@@ -117,7 +119,12 @@ export const IconTitleWrapper = styled(Flex)<{ dir?: string }>`
  z-index: 1;

  ${(props: { dir?: string }) =>
-    props.dir === "rtl" ? "right: -44px" : "left: -44px"};
+    props.dir === "rtl" ? "right: -40px" : "left: -40px"};
+
+  ${breakpoint("desktop")`
+    ${(props: { dir?: string }) =>
+      props.dir === "rtl" ? "right: -44px" : "left: -44px"};
+  `}
 `;

 export default Icon;
@@ -80,8 +80,8 @@ const BuiltinColors = ({
    {colorPalette.map((color) => (
      <ColorButton
        key={color}
-        $color={color}
-        $active={color === activeColor}
+        color={color}
+        active={color === activeColor}
        onClick={() => onClick(color)}
      >
        <Selected />
@@ -156,22 +156,22 @@ const Selected = styled.span`
  transform: translateY(-25%) rotate(-45deg);
 `;

-const ColorButton = styled(NudeButton)<{ $color: string; $active: boolean }>`
+const ColorButton = styled(NudeButton)<{ color: string; active: boolean }>`
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
-  background-color: ${({ $color }) => $color};
+  background-color: ${({ color }) => color};

  &: ${hover} {
    outline: 2px solid ${s("menuBackground")} !important;
-    box-shadow: ${({ $color }) => `0px 0px 3px 3px ${$color}`};
+    box-shadow: ${({ color }) => `0px 0px 3px 3px ${color}`};
  }

  & ${Selected} {
-    display: ${({ $active }) => ($active ? "block" : "none")};
+    display: ${({ active }) => (active ? "block" : "none")};
  }
 `;

@@ -44,7 +44,6 @@ const Row = ({ index, style, data }: ListChildComponentProps<RowProps>) => {

 const Container = styled(FixedSizeList<RowProps>)`
  padding: 0px 12px;
-  overflow-x: hidden !important;

  // Needed for the absolutely positioned children
  // to respect the VirtualList's padding
@@ -309,4 +309,4 @@ const StyledTabPanel = styled(TabPanel)`
  overflow-y: auto;
 `;

-export default React.memo(IconPicker);
+export default IconPicker;
@@ -1,5 +1,5 @@
 import { observer } from "mobx-react";
-import { CollectionIcon, PrivateCollectionIcon } from "outline-icons";
+import { CollectionIcon } from "outline-icons";
 import { getLuminance } from "polished";
 import * as React from "react";
 import { colorPalette } from "@shared/utils/collections";
@@ -40,11 +40,8 @@ function ResolvedCollectionIcon({
          : "currentColor"
        : collectionColor);

-    const Component = collection.isPrivate
-      ? PrivateCollectionIcon
-      : CollectionIcon;
    return (
-      <Component
+      <CollectionIcon
        color={color}
        expanded={expanded}
        size={size}
@@ -352,9 +352,7 @@ const Wrapper = styled.label<{ short?: boolean }>`
 `;

 export const Positioner = styled(Position)`
-  pointer-events: all;
-
-  &:focus-visible {
+  &.focus-visible {
    ${StyledSelectOption} {
      &[aria-selected="true"] {
        color: ${(props) => props.theme.white};
@@ -41,6 +41,7 @@ const Layout = React.forwardRef(function Layout_(
    <Container column auto ref={ref}>
      <Helmet>
        <title>{title ? title : env.APP_NAME}</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      </Helmet>

      <SkipNavLink />
@@ -4,7 +4,7 @@ import {
 } from "@getoutline/react-roving-tabindex";
 import { LocationDescriptor } from "history";
 import * as React from "react";
-import scrollIntoView from "scroll-into-view-if-needed";
+import scrollIntoView from "smooth-scroll-into-view-if-needed";
 import styled, { useTheme } from "styled-components";
 import { s, ellipsis } from "@shared/styles";
 import Flex from "~/components/Flex";
@@ -142,14 +142,10 @@ const ListItem = (
      $hover={!!rest.onClick}
      {...rest}
      {...rovingTabIndex}
-      onClick={
-        rest.onClick
-          ? (ev) => {
-              rest.onClick?.(ev);
-              rovingTabIndex.onClick(ev);
-            }
-          : undefined
-      }
+      onClick={(ev) => {
+        rest.onClick?.(ev);
+        rovingTabIndex.onClick(ev);
+      }}
      onKeyDown={(ev) => {
        rest.onKeyDown?.(ev);
        rovingTabIndex.onKeyDown(ev);
@@ -9,7 +9,8 @@ import Notification from "~/models/Notification";
 import CommentEditor from "~/scenes/Document/components/CommentEditor";
 import useStores from "~/hooks/useStores";
 import { hover, truncateMultiline } from "~/styles";
-import { Avatar, AvatarSize } from "../Avatar";
+import Avatar from "../Avatar";
+import { AvatarSize } from "../Avatar/Avatar";
 import Flex from "../Flex";
 import Text from "../Text";
 import Time from "../Time";
@@ -29,6 +29,7 @@ const PageTitle = ({ title, favicon }: Props) => {
        href={favicon ?? originalShortcutHref}
        key={favicon ?? originalShortcutHref}
      />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    </Helmet>
  );
 };
@@ -13,9 +13,9 @@ import withStores from "~/components/withStores";
 import { dateToHeading } from "~/utils/date";

 export interface PaginatedItem {
-  id?: string;
-  updatedAt?: string;
+  id: string;
  createdAt?: string;
+  updatedAt?: string;
 }

 type Props<T> = WithTranslation &
@@ -36,7 +36,6 @@ type Props<T> = WithTranslation &
    }) => React.ReactNode;
    renderHeading?: (name: React.ReactElement<any> | string) => React.ReactNode;
    onEscape?: (ev: React.KeyboardEvent<HTMLDivElement>) => void;
-    listRef?: React.RefObject<HTMLDivElement>;
  };

@observer
@@ -197,7 +196,6 @@ class PaginatedList<T extends PaginatedItem> extends React.PureComponent<
          onEscape={onEscape}
          className={this.props.className}
          items={this.itemsToRender}
-          ref={this.props.listRef}
        >
          {() => {
            let previousHeading = "";
@@ -213,11 +211,7 @@ class PaginatedList<T extends PaginatedItem> extends React.PureComponent<
              // Our models have standard date fields, updatedAt > createdAt.
              // Get what a heading would look like for this item
              const currentDate =
-                "updatedAt" in item && item.updatedAt
-                  ? item.updatedAt
-                  : "createdAt" in item && item.createdAt
-                  ? item.createdAt
-                  : previousHeading;
+                item.updatedAt || item.createdAt || previousHeading;
              const currentHeading = dateToHeading(
                currentDate,
                this.props.t,
@@ -233,9 +227,7 @@ class PaginatedList<T extends PaginatedItem> extends React.PureComponent<
              ) {
                previousHeading = currentHeading;
                return (
-                  <React.Fragment
-                    key={"id" in item && item.id ? item.id : index}
-                  >
+                  <React.Fragment key={item.id}>
                    {renderHeading(currentHeading)}
                    {children}
                  </React.Fragment>
@@ -30,24 +30,13 @@ type Props = {
  pins: Pin[];
  /** Maximum number of pins to display */
  limit?: number;
-  /** Number of placeholder pins to display */
-  placeholderCount?: number;
  /** Whether the user has permission to update pins */
  canUpdate?: boolean;
 };

-function PinnedDocuments({
-  limit,
-  pins,
-  placeholderCount,
-  canUpdate,
-  ...rest
-}: Props) {
-  const { documents } = useStores();
+function PinnedDocuments({ limit, pins, canUpdate, ...rest }: Props) {
+  const { documents, collections } = useStores();
  const [items, setItems] = React.useState(pins.map((pin) => pin.documentId));
-  const showPlaceholderRef = React.useRef(true);
-  const showPlaceholder =
-    placeholderCount && !items.length && showPlaceholderRef.current;

  React.useEffect(() => {
    setItems(pins.map((pin) => pin.documentId));
@@ -99,6 +88,10 @@ function PinnedDocuments({
    [pins]
  );

+  if (collections.orderedData.length === 0) {
+    return null;
+  }
+
  return (
    <DndContext
      sensors={sensors}
@@ -116,34 +109,23 @@ function PinnedDocuments({
      >
        <SortableContext items={items} strategy={rectSortingStrategy}>
          <List>
-            {showPlaceholder ? (
-              Array(placeholderCount)
-                .fill(undefined)
-                .map((_, index) => (
-                  <div key={index} style={{ width: 170, height: 180 }} />
-                ))
-            ) : (
-              <AnimatePresence initial={false}>
-                {items.map((documentId) => {
-                  const document = documents.get(documentId);
-                  const pin = pins.find((p) => p.documentId === documentId);
+            <AnimatePresence initial={false}>
+              {items.map((documentId) => {
+                const document = documents.get(documentId);
+                const pin = pins.find((p) => p.documentId === documentId);

-                  // Once any document is loaded, never render the placeholder again
-                  showPlaceholderRef.current = false;
-
-                  return document ? (
-                    <DocumentCard
-                      key={documentId}
-                      document={document}
-                      canUpdatePin={canUpdate}
-                      isDraggable={items.length > 1}
-                      pin={pin}
-                      {...rest}
-                    />
-                  ) : null;
-                })}
-              </AnimatePresence>
-            )}
+                return document ? (
+                  <DocumentCard
+                    key={documentId}
+                    document={document}
+                    canUpdatePin={canUpdate}
+                    isDraggable={items.length > 1}
+                    pin={pin}
+                    {...rest}
+                  />
+                ) : null;
+              })}
+            </AnimatePresence>
          </List>
        </SortableContext>
      </ResizingHeightContainer>
@@ -5,9 +5,8 @@ import { s } from "@shared/styles";
 import Flex from "~/components/Flex";
 import { pulsate } from "~/styles/animations";

-export type Props = React.ComponentProps<typeof Flex> & {
+export type Props = {
  header?: boolean;
-  width?: number;
  height?: number;
  minWidth?: number;
  maxWidth?: number;
@@ -18,22 +17,16 @@ function PlaceholderText({ minWidth, maxWidth, ...restProps }: Props) {
  // We only want to compute the width once so we are storing it inside ref
  const widthRef = React.useRef(randomInteger(minWidth || 75, maxWidth || 100));

-  return (
-    <Mask
-      width={`${widthRef.current / (restProps.header ? 2 : 1)}%`}
-      {...restProps}
-    />
-  );
+  return <Mask width={widthRef.current} {...restProps} />;
 }

 const Mask = styled(Flex)<{
-  width: number | string;
+  width: number;
  height?: number;
  delay?: number;
  header?: boolean;
 }>`
-  width: ${(props) =>
-    typeof props.width === "number" ? `${props.width}px` : props.width};
+  width: ${(props) => (props.header ? props.width / 2 : props.width)}%;
  height: ${(props) =>
    props.height ? props.height : props.header ? 24 : 18}px;
  margin-bottom: 6px;
@@ -1,6 +1,5 @@
 import { m, TargetAndTransition } from "framer-motion";
 import * as React from "react";
-import { mergeRefs } from "react-merge-refs";
 import useComponentSize from "~/hooks/useComponentSize";

 type Props = {
@@ -19,37 +18,35 @@ type Props = {
 /**
 * Automatically animates the height of a container based on it's contents.
 */
-export const ResizingHeightContainer = React.forwardRef<HTMLDivElement, Props>(
-  function ResizingHeightContainer_(props, forwardedRef) {
-    const {
-      hideOverflow,
-      children,
-      config = {
-        transition: {
-          duration: 0.1,
-          ease: "easeInOut",
-        },
+export function ResizingHeightContainer(props: Props) {
+  const {
+    hideOverflow,
+    children,
+    config = {
+      transition: {
+        duration: 0.1,
+        ease: "easeInOut",
      },
-      style,
-    } = props;
+    },
+    style,
+  } = props;

-    const ref = React.useRef<HTMLDivElement>(null);
-    const { height } = useComponentSize(ref);
+  const ref = React.useRef<HTMLDivElement>(null);
+  const { height } = useComponentSize(ref);

-    return (
-      <m.div
-        animate={{
-          ...config,
-          height: Math.round(height),
-        }}
-        style={{
-          ...style,
-          overflow: hideOverflow ? "hidden" : "inherit",
-          position: "relative",
-        }}
-      >
-        <div ref={mergeRefs([ref, forwardedRef])}>{children}</div>
-      </m.div>
-    );
-  }
-);
+  return (
+    <m.div
+      animate={{
+        ...config,
+        height: Math.round(height),
+      }}
+      style={{
+        ...style,
+        overflow: hideOverflow ? "hidden" : "inherit",
+        position: "relative",
+      }}
+    >
+      <div ref={ref}>{children}</div>
+    </m.div>
+  );
+}
@@ -10,7 +10,7 @@ export default function SearchActions() {
  const { searches } = useStores();

  React.useEffect(() => {
-    if (!searches.isLoaded && !searches.isFetching) {
+    if (!searches.isLoaded) {
      void searches.fetchPage({
        source: "app",
      });
@@ -9,7 +9,7 @@ import Empty from "~/components/Empty";
 import { Outline } from "~/components/Input";
 import InputSearch from "~/components/InputSearch";
 import Placeholder from "~/components/List/Placeholder";
-import PaginatedList from "~/components/PaginatedList";
+import PaginatedList, { PaginatedItem } from "~/components/PaginatedList";
 import Popover from "~/components/Popover";
 import { id as bodyContentId } from "~/components/SkipNavContent";
 import useKeyDown from "~/hooks/useKeyDown";
@@ -36,11 +36,11 @@ function SearchPopover({ shareId }: Props) {
  const { show, hide } = popover;

  const [searchResults, setSearchResults] = React.useState<
-    SearchResult[] | undefined
+    PaginatedItem[] | undefined
  >();
  const [cachedQuery, setCachedQuery] = React.useState(query);
  const [cachedSearchResults, setCachedSearchResults] = React.useState<
-    SearchResult[] | undefined
+    PaginatedItem[] | undefined
  >(searchResults);

  React.useEffect(() => {
@@ -54,7 +54,7 @@ function SearchPopover({ shareId }: Props) {
  const performSearch = React.useCallback(
    async ({ query, ...options }) => {
      if (query?.length > 0) {
-        const response = await documents.search(query, {
+        const response: PaginatedItem[] = await documents.search(query, {
          shareId,
          ...options,
        });
@@ -1,12 +1,11 @@
-import { observer } from "mobx-react";
-import { UserIcon } from "outline-icons";
+import { GroupIcon, UserIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled, { useTheme } from "styled-components";
 import Squircle from "@shared/components/Squircle";
 import { CollectionPermission } from "@shared/types";
 import Collection from "~/models/Collection";
-import { Avatar, GroupAvatar, AvatarSize } from "~/components/Avatar";
+import Avatar, { AvatarSize } from "~/components/Avatar/Avatar";
 import InputMemberPermissionSelect from "~/components/InputMemberPermissionSelect";
 import InputSelectPermission from "~/components/InputSelectPermission";
 import Scrollable from "~/components/Scrollable";
@@ -16,7 +15,6 @@ import useRequest from "~/hooks/useRequest";
 import useStores from "~/hooks/useStores";
 import { EmptySelectValue, Permission } from "~/types";
 import { ListItem } from "../components/ListItem";
-import { Placeholder } from "../components/Placeholder";

 type Props = {
  /** Collection to which team members are supposed to be invited */
@@ -27,226 +25,205 @@ type Props = {
  invitedInSession: string[];
 };

-export const AccessControlList = observer(
-  ({ collection, invitedInSession }: Props) => {
-    const { memberships, groupMemberships } = useStores();
-    const can = usePolicy(collection);
-    const { t } = useTranslation();
-    const theme = useTheme();
-    const collectionId = collection.id;
+export function AccessControlList({ collection, invitedInSession }: Props) {
+  const { memberships, groupMemberships } = useStores();
+  const can = usePolicy(collection);
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const collectionId = collection.id;

-    const { request: fetchMemberships, loading: membershipLoading } =
-      useRequest(
-        React.useCallback(
-          () => memberships.fetchAll({ id: collectionId }),
-          [memberships, collectionId]
-        )
-      );
+  const { request: fetchMemberships, data: membershipData } = useRequest(
+    React.useCallback(
+      () => memberships.fetchAll({ id: collectionId }),
+      [memberships, collectionId]
+    )
+  );

-    const { request: fetchGroupMemberships, loading: groupMembershipLoading } =
-      useRequest(
-        React.useCallback(
-          () => groupMemberships.fetchAll({ collectionId }),
-          [groupMemberships, collectionId]
-        )
-      );
-
-    const groupMembershipsInCollection =
-      groupMemberships.inCollection(collectionId);
-    const membershipsInCollection = memberships.inCollection(collectionId);
-    const hasMemberships =
-      groupMembershipsInCollection.length > 0 ||
-      membershipsInCollection.length > 0;
-    const showLoading =
-      !hasMemberships && (membershipLoading || groupMembershipLoading);
-
-    React.useEffect(() => {
-      void fetchMemberships();
-      void fetchGroupMemberships();
-    }, [fetchMemberships, fetchGroupMemberships]);
-
-    const containerRef = React.useRef<HTMLDivElement | null>(null);
-    const { maxHeight, calcMaxHeight } = useMaxHeight({
-      elementRef: containerRef,
-      maxViewportPercentage: 70,
-    });
-
-    React.useEffect(() => {
-      calcMaxHeight();
-    });
-
-    const permissions = React.useMemo(
-      () =>
-        [
-          {
-            label: t("View only"),
-            value: CollectionPermission.Read,
-          },
-          {
-            label: t("Can edit"),
-            value: CollectionPermission.ReadWrite,
-          },
-          {
-            label: t("Manage"),
-            value: CollectionPermission.Admin,
-          },
-          {
-            divider: true,
-            label: t("Remove"),
-            value: EmptySelectValue,
-          },
-        ] as Permission[],
-      [t]
+  const { request: fetchGroupMemberships, data: groupMembershipData } =
+    useRequest(
+      React.useCallback(
+        () => groupMemberships.fetchAll({ id: collectionId }),
+        [groupMemberships, collectionId]
+      )
    );

-    return (
-      <ScrollableContainer
-        ref={containerRef}
-        hiddenScrollbars
-        style={{ maxHeight }}
-      >
-        {showLoading ? (
-          <Placeholder count={2} />
-        ) : (
-          <>
-            <ListItem
-              image={
-                <Squircle color={theme.accent} size={AvatarSize.Medium}>
-                  <UserIcon color={theme.accentText} size={16} />
-                </Squircle>
-              }
-              title={t("All members")}
-              subtitle={t("Everyone in the workspace")}
-              actions={
-                <div style={{ marginRight: -8 }}>
-                  <InputSelectPermission
-                    style={{ margin: 0 }}
-                    onChange={(
-                      value: CollectionPermission | typeof EmptySelectValue
-                    ) => {
-                      void collection.save({
-                        permission: value === EmptySelectValue ? null : value,
-                      });
-                    }}
-                    disabled={!can.update}
-                    value={collection?.permission}
-                    labelHidden
-                    nude
-                  />
-                </div>
-              }
-            />
-            {groupMembershipsInCollection
-              .filter((membership) => membership.group)
-              .sort((a, b) =>
-                (
-                  (invitedInSession.includes(a.group.id) ? "_" : "") +
-                  a.group.name
-                ).localeCompare(b.group.name)
-              )
-              .map((membership) => (
-                <ListItem
-                  key={membership.id}
-                  image={
-                    <GroupAvatar
-                      group={membership.group}
-                      backgroundColor={theme.modalBackground}
-                    />
-                  }
-                  title={membership.group.name}
-                  subtitle={t("{{ count }} member", {
-                    count: membership.group.memberCount,
-                  })}
-                  actions={
-                    <div style={{ marginRight: -8 }}>
-                      <InputMemberPermissionSelect
-                        style={{ margin: 0 }}
-                        permissions={permissions}
-                        onChange={async (
-                          permission:
-                            | CollectionPermission
-                            | typeof EmptySelectValue
-                        ) => {
-                          if (permission === EmptySelectValue) {
-                            await groupMemberships.delete({
-                              collectionId: collection.id,
-                              groupId: membership.groupId,
-                            });
-                          } else {
-                            await groupMemberships.create({
-                              collectionId: collection.id,
-                              groupId: membership.groupId,
-                              permission,
-                            });
-                          }
-                        }}
-                        disabled={!can.update}
-                        value={membership.permission}
-                        labelHidden
-                        nude
-                      />
-                    </div>
-                  }
-                />
-              ))}
-            {membershipsInCollection
-              .filter((membership) => membership.user)
-              .sort((a, b) =>
-                (
-                  (invitedInSession.includes(a.user.id) ? "_" : "") +
-                  a.user.name
-                ).localeCompare(b.user.name)
-              )
-              .map((membership) => (
-                <ListItem
-                  key={membership.id}
-                  image={
-                    <Avatar
-                      model={membership.user}
-                      size={AvatarSize.Medium}
-                      showBorder={false}
-                    />
-                  }
-                  title={membership.user.name}
-                  subtitle={membership.user.email}
-                  actions={
-                    <div style={{ marginRight: -8 }}>
-                      <InputMemberPermissionSelect
-                        style={{ margin: 0 }}
-                        permissions={permissions}
-                        onChange={async (
-                          permission:
-                            | CollectionPermission
-                            | typeof EmptySelectValue
-                        ) => {
-                          if (permission === EmptySelectValue) {
-                            await memberships.delete({
-                              collectionId: collection.id,
-                              userId: membership.userId,
-                            });
-                          } else {
-                            await memberships.create({
-                              collectionId: collection.id,
-                              userId: membership.userId,
-                              permission,
-                            });
-                          }
-                        }}
-                        disabled={!can.update}
-                        value={membership.permission}
-                        labelHidden
-                        nude
-                      />
-                    </div>
-                  }
-                />
-              ))}
-          </>
-        )}
-      </ScrollableContainer>
-    );
+  React.useEffect(() => {
+    void fetchMemberships();
+    void fetchGroupMemberships();
+  }, [fetchMemberships, fetchGroupMemberships]);
+
+  const containerRef = React.useRef<HTMLDivElement | null>(null);
+  const { maxHeight, calcMaxHeight } = useMaxHeight({
+    elementRef: containerRef,
+    maxViewportPercentage: 70,
+  });
+
+  React.useEffect(() => {
+    calcMaxHeight();
+  });
+
+  const permissions = React.useMemo(
+    () =>
+      [
+        {
+          label: t("View only"),
+          value: CollectionPermission.Read,
+        },
+        {
+          label: t("Can edit"),
+          value: CollectionPermission.ReadWrite,
+        },
+        {
+          label: t("Manage"),
+          value: CollectionPermission.Admin,
+        },
+        {
+          divider: true,
+          label: t("Remove"),
+          value: EmptySelectValue,
+        },
+      ] as Permission[],
+    [t]
+  );
+
+  if (!membershipData || !groupMembershipData) {
+    return null;
  }
-);
+
+  return (
+    <ScrollableContainer
+      ref={containerRef}
+      hiddenScrollbars
+      style={{ maxHeight }}
+    >
+      <ListItem
+        image={
+          <Squircle color={theme.accent} size={AvatarSize.Medium}>
+            <UserIcon color={theme.accentText} size={16} />
+          </Squircle>
+        }
+        title={t("All members")}
+        subtitle={t("Everyone in the workspace")}
+        actions={
+          <div style={{ marginRight: -8 }}>
+            <InputSelectPermission
+              style={{ margin: 0 }}
+              onChange={(
+                value: CollectionPermission | typeof EmptySelectValue
+              ) => {
+                void collection.save({
+                  permission: value === EmptySelectValue ? null : value,
+                });
+              }}
+              disabled={!can.update}
+              value={collection?.permission}
+              labelHidden
+              nude
+            />
+          </div>
+        }
+      />
+      {groupMemberships
+        .inCollection(collection.id)
+        .sort((a, b) =>
+          (
+            (invitedInSession.includes(a.group.id) ? "_" : "") + a.group.name
+          ).localeCompare(b.group.name)
+        )
+        .map((membership) => (
+          <ListItem
+            key={membership.id}
+            image={
+              <Squircle color={theme.text} size={AvatarSize.Medium}>
+                <GroupIcon color={theme.background} size={16} />
+              </Squircle>
+            }
+            title={membership.group.name}
+            subtitle={t("{{ count }} member", {
+              count: membership.group.memberCount,
+            })}
+            actions={
+              <div style={{ marginRight: -8 }}>
+                <InputMemberPermissionSelect
+                  style={{ margin: 0 }}
+                  permissions={permissions}
+                  onChange={async (
+                    permission: CollectionPermission | typeof EmptySelectValue
+                  ) => {
+                    if (permission === EmptySelectValue) {
+                      await groupMemberships.delete({
+                        collectionId: collection.id,
+                        groupId: membership.groupId,
+                      });
+                    } else {
+                      await groupMemberships.create({
+                        collectionId: collection.id,
+                        groupId: membership.groupId,
+                        permission,
+                      });
+                    }
+                  }}
+                  disabled={!can.update}
+                  value={membership.permission}
+                  labelHidden
+                  nude
+                />
+              </div>
+            }
+          />
+        ))}
+      {memberships
+        .inCollection(collection.id)
+        .sort((a, b) =>
+          (
+            (invitedInSession.includes(a.user.id) ? "_" : "") + a.user.name
+          ).localeCompare(b.user.name)
+        )
+        .map((membership) => (
+          <ListItem
+            key={membership.id}
+            image={
+              <Avatar
+                model={membership.user}
+                size={AvatarSize.Medium}
+                showBorder={false}
+              />
+            }
+            title={membership.user.name}
+            subtitle={membership.user.email}
+            actions={
+              <div style={{ marginRight: -8 }}>
+                <InputMemberPermissionSelect
+                  style={{ margin: 0 }}
+                  permissions={permissions}
+                  onChange={async (
+                    permission: CollectionPermission | typeof EmptySelectValue
+                  ) => {
+                    if (permission === EmptySelectValue) {
+                      await memberships.delete({
+                        collectionId: collection.id,
+                        userId: membership.userId,
+                      });
+                    } else {
+                      await memberships.create({
+                        collectionId: collection.id,
+                        userId: membership.userId,
+                        permission,
+                      });
+                    }
+                  }}
+                  disabled={!can.update}
+                  value={membership.permission}
+                  labelHidden
+                  nude
+                />
+              </div>
+            }
+          />
+        ))}
+    </ScrollableContainer>
+  );
+}

 const ScrollableContainer = styled(Scrollable)`
  padding: 12px 24px;
@@ -9,7 +9,7 @@ import { CollectionPermission } from "@shared/types";
 import Collection from "~/models/Collection";
 import Group from "~/models/Group";
 import User from "~/models/User";
-import { Avatar, AvatarSize } from "~/components/Avatar";
+import Avatar, { AvatarSize } from "~/components/Avatar/Avatar";
 import NudeButton from "~/components/NudeButton";
 import { createAction } from "~/actions";
 import { UserSection } from "~/actions/sections";
@@ -357,6 +357,7 @@ function SharePopover({ collection, visible, onRequestClose }: Props) {
          addPendingId={handleAddPendingId}
          removePendingId={handleRemovePendingId}
          onEscape={handleEscape}
+          showGroups
        />
      )}

@@ -5,13 +5,13 @@ import { useTranslation } from "react-i18next";
 import styled, { useTheme } from "styled-components";
 import Squircle from "@shared/components/Squircle";
 import { Pagination } from "@shared/constants";
-import { s } from "@shared/styles";
 import { CollectionPermission, IconType } from "@shared/types";
 import { determineIconType } from "@shared/utils/icon";
 import type Collection from "~/models/Collection";
 import type Document from "~/models/Document";
 import Share from "~/models/Share";
 import Flex from "~/components/Flex";
+import LoadingIndicator from "~/components/LoadingIndicator";
 import Scrollable from "~/components/Scrollable";
 import Text from "~/components/Text";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
@@ -20,12 +20,12 @@ import useMaxHeight from "~/hooks/useMaxHeight";
 import usePolicy from "~/hooks/usePolicy";
 import useRequest from "~/hooks/useRequest";
 import useStores from "~/hooks/useStores";
-import { Avatar, AvatarSize } from "../../Avatar";
+import Avatar from "../../Avatar";
+import { AvatarSize } from "../../Avatar/Avatar";
 import CollectionIcon from "../../Icons/CollectionIcon";
 import Tooltip from "../../Tooltip";
 import { Separator } from "../components";
 import { ListItem } from "../components/ListItem";
-import { Placeholder } from "../components/Placeholder";
 import DocumentMemberList from "./DocumentMemberList";
 import PublicAccess from "./PublicAccess";

@@ -58,151 +58,136 @@ export const AccessControlList = observer(
    const collection = document.collection;
    const usersInCollection = useUsersInCollection(collection);
    const user = useCurrentUser();
-    const { userMemberships, groupMemberships } = useStores();
+    const { userMemberships } = useStores();
    const collectionSharingDisabled = document.collection?.sharing === false;
    const team = useCurrentTeam();
    const can = usePolicy(document);
-    const canCollection = usePolicy(collection);
-    const documentId = document.id;

    const containerRef = React.useRef<HTMLDivElement | null>(null);
    const { maxHeight, calcMaxHeight } = useMaxHeight({
      elementRef: containerRef,
-      maxViewportPercentage: 65,
+      maxViewportPercentage: 70,
      margin: 24,
    });

-    const { loading: userMembershipLoading, request: fetchUserMemberships } =
-      useRequest(
-        React.useCallback(
-          () =>
-            userMemberships.fetchDocumentMemberships({
-              id: documentId,
-              limit: Pagination.defaultLimit,
-            }),
-          [userMemberships, documentId]
-        )
-      );
-
-    const { loading: groupMembershipLoading, request: fetchGroupMemberships } =
-      useRequest(
-        React.useCallback(
-          () => groupMemberships.fetchAll({ documentId }),
-          [groupMemberships, documentId]
-        )
-      );
-
-    const hasMemberships =
-      groupMemberships.inDocument(documentId)?.length > 0 ||
-      document.members.length > 0;
-    const showLoading =
-      !hasMemberships && (groupMembershipLoading || userMembershipLoading);
+    const {
+      loading: loadingDocumentMembers,
+      request: fetchDocumentMembers,
+      data,
+    } = useRequest(
+      React.useCallback(
+        () =>
+          userMemberships.fetchDocumentMemberships({
+            id: document.id,
+            limit: Pagination.defaultLimit,
+          }),
+        [userMemberships, document.id]
+      )
+    );

    React.useEffect(() => {
-      void fetchUserMemberships();
-      void fetchGroupMemberships();
-    }, [fetchUserMemberships, fetchGroupMemberships]);
+      void fetchDocumentMembers();
+    }, [fetchDocumentMembers]);

    React.useEffect(() => {
      calcMaxHeight();
    });

+    if (loadingDocumentMembers) {
+      return <LoadingIndicator />;
+    }
+
+    if (!data) {
+      return null;
+    }
+
    return (
      <ScrollableContainer
        ref={containerRef}
        hiddenScrollbars
        style={{ maxHeight }}
      >
-        {showLoading ? (
-          <Placeholder />
+        {collection ? (
+          <>
+            {collection.permission ? (
+              <ListItem
+                image={
+                  <Squircle color={theme.accent} size={AvatarSize.Medium}>
+                    <UserIcon color={theme.accentText} size={16} />
+                  </Squircle>
+                }
+                title={t("All members")}
+                subtitle={t("Everyone in the workspace")}
+                actions={
+                  <AccessTooltip>
+                    {collection?.permission === CollectionPermission.ReadWrite
+                      ? t("Can edit")
+                      : t("Can view")}
+                  </AccessTooltip>
+                }
+              />
+            ) : usersInCollection ? (
+              <ListItem
+                image={<CollectionSquircle collection={collection} />}
+                title={collection.name}
+                subtitle={t("Everyone in the collection")}
+                actions={<AccessTooltip>{t("Can view")}</AccessTooltip>}
+              />
+            ) : (
+              <ListItem
+                image={<Avatar model={user} showBorder={false} />}
+                title={user.name}
+                subtitle={t("You have full access")}
+                actions={<AccessTooltip>{t("Can edit")}</AccessTooltip>}
+              />
+            )}
+            <DocumentMemberList
+              document={document}
+              invitedInSession={invitedInSession}
+            />
+          </>
+        ) : document.isDraft ? (
+          <>
+            <ListItem
+              image={<Avatar model={document.createdBy} showBorder={false} />}
+              title={document.createdBy?.name}
+              actions={
+                <AccessTooltip content={t("Created the document")}>
+                  {t("Can edit")}
+                </AccessTooltip>
+              }
+            />
+            <DocumentMemberList
+              document={document}
+              invitedInSession={invitedInSession}
+            />
+          </>
        ) : (
          <>
-            {collection && canCollection.readDocument ? (
-              <>
-                {collection.permission ? (
-                  <ListItem
-                    image={
-                      <Squircle color={theme.accent} size={AvatarSize.Medium}>
-                        <UserIcon color={theme.accentText} size={16} />
-                      </Squircle>
-                    }
-                    title={t("All members")}
-                    subtitle={t("Everyone in the workspace")}
-                    actions={
-                      <AccessTooltip>
-                        {collection?.permission ===
-                        CollectionPermission.ReadWrite
-                          ? t("Can edit")
-                          : t("Can view")}
-                      </AccessTooltip>
-                    }
-                  />
-                ) : usersInCollection ? (
-                  <ListItem
-                    image={<CollectionSquircle collection={collection} />}
-                    title={collection.name}
-                    subtitle={t("Everyone in the collection")}
-                    actions={<AccessTooltip>{t("Can view")}</AccessTooltip>}
-                  />
-                ) : (
-                  <ListItem
-                    image={<Avatar model={user} showBorder={false} />}
-                    title={user.name}
-                    subtitle={t("You have full access")}
-                    actions={<AccessTooltip>{t("Can edit")}</AccessTooltip>}
-                  />
-                )}
-                <DocumentMemberList
-                  document={document}
-                  invitedInSession={invitedInSession}
+            <DocumentMemberList
+              document={document}
+              invitedInSession={invitedInSession}
+            />
+            <ListItem
+              image={
+                <Squircle color={theme.accent} size={AvatarSize.Medium}>
+                  <MoreIcon color={theme.accentText} size={16} />
+                </Squircle>
+              }
+              title={t("Other people")}
+              subtitle={t("Other workspace members may have access")}
+              actions={
+                <AccessTooltip
+                  content={t(
+                    "This document may be shared with more workspace members through a parent document or collection you do not have access to"
+                  )}
                />
-              </>
-            ) : document.isDraft ? (
-              <>
-                <ListItem
-                  image={
-                    <Avatar model={document.createdBy} showBorder={false} />
-                  }
-                  title={document.createdBy?.name}
-                  actions={
-                    <AccessTooltip content={t("Created the document")}>
-                      {t("Can edit")}
-                    </AccessTooltip>
-                  }
-                />
-                <DocumentMemberList
-                  document={document}
-                  invitedInSession={invitedInSession}
-                />
-              </>
-            ) : (
-              <>
-                <DocumentMemberList
-                  document={document}
-                  invitedInSession={invitedInSession}
-                />
-                <ListItem
-                  image={
-                    <Squircle color={theme.accent} size={AvatarSize.Medium}>
-                      <MoreIcon color={theme.accentText} size={16} />
-                    </Squircle>
-                  }
-                  title={t("Other people")}
-                  subtitle={t("Other workspace members may have access")}
-                  actions={
-                    <AccessTooltip
-                      content={t(
-                        "This document may be shared with more workspace members through a parent document or collection you do not have access to"
-                      )}
-                    />
-                  }
-                />
-              </>
-            )}
+              }
+            />
          </>
        )}
        {team.sharing && can.share && !collectionSharingDisabled && visible && (
-          <Sticky>
+          <>
            {document.members.length ? <Separator /> : null}
            <PublicAccess
              document={document}
@@ -210,7 +195,7 @@ export const AccessControlList = observer(
              sharedParent={sharedParent}
              onRequestClose={onRequestClose}
            />
-          </Sticky>
+          </>
        )}
      </ScrollableContainer>
    );
@@ -275,12 +260,6 @@ function useUsersInCollection(collection?: Collection) {
    : false;
 }

-const Sticky = styled.div`
-  background: ${s("menuBackground")};
-  position: sticky;
-  bottom: -12px;
-`;
-
 const ScrollableContainer = styled(Scrollable)`
  padding: 12px 24px;
  margin: -12px -24px;
@@ -1,23 +1,16 @@
 import orderBy from "lodash/orderBy";
 import { observer } from "mobx-react";
 import * as React from "react";
-import { useTranslation, Trans } from "react-i18next";
-import { Link, useHistory } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { useHistory } from "react-router-dom";
 import { toast } from "sonner";
-import styled, { useTheme } from "styled-components";
-import { s } from "@shared/styles";
-import { DocumentPermission } from "@shared/types";
 import Document from "~/models/Document";
 import UserMembership from "~/models/UserMembership";
-import { GroupAvatar } from "~/components/Avatar";
-import InputMemberPermissionSelect from "~/components/InputMemberPermissionSelect";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
-import { EmptySelectValue, Permission } from "~/types";
 import { homePath } from "~/utils/routeHelpers";
-import { ListItem } from "../components/ListItem";
-import DocumentMemberListItem from "./DocumentMemberListItem";
+import MemberListItem from "./DocumentMemberListItem";

 type Props = {
  /** Document to which team members are supposed to be invited */
@@ -29,13 +22,12 @@ type Props = {
 };

 function DocumentMembersList({ document, invitedInSession }: Props) {
-  const { userMemberships, groupMemberships } = useStores();
+  const { userMemberships } = useStores();

  const user = useCurrentUser();
  const history = useHistory();
  const can = usePolicy(document);
  const { t } = useTranslation();
-  const theme = useTheme();

  const handleRemoveUser = React.useCallback(
    async (item) => {
@@ -58,7 +50,7 @@ function DocumentMembersList({ document, invitedInSession }: Props) {
        toast.error(t("Could not remove user"));
      }
    },
-    [t, history, userMemberships, user, document]
+    [history, userMemberships, user, document]
  );

  const handleUpdateUser = React.useCallback(
@@ -78,7 +70,7 @@ function DocumentMembersList({ document, invitedInSession }: Props) {
        toast.error(t("Could not update user"));
      }
    },
-    [t, userMemberships, document]
+    [userMemberships, document]
  );

  // Order newly added users first during the current editing session, on reload members are
@@ -95,101 +87,10 @@ function DocumentMembersList({ document, invitedInSession }: Props) {
    [document.members, invitedInSession]
  );

-  const permissions = React.useMemo(
-    () =>
-      [
-        {
-          label: t("View only"),
-          value: DocumentPermission.Read,
-        },
-        {
-          label: t("Can edit"),
-          value: DocumentPermission.ReadWrite,
-        },
-        {
-          label: t("Manage"),
-          value: DocumentPermission.Admin,
-        },
-        {
-          divider: true,
-          label: t("Remove"),
-          value: EmptySelectValue,
-        },
-      ] as Permission[],
-    [t]
-  );
-
  return (
    <>
-      {groupMemberships
-        .inDocument(document.id)
-        .sort((a, b) =>
-          (
-            (invitedInSession.includes(a.group.id) ? "_" : "") + a.group.name
-          ).localeCompare(b.group.name)
-        )
-        .map((membership) => {
-          const MaybeLink = membership?.source ? StyledLink : React.Fragment;
-          return (
-            <ListItem
-              key={membership.id}
-              image={
-                <GroupAvatar
-                  group={membership.group}
-                  backgroundColor={theme.modalBackground}
-                />
-              }
-              title={membership.group.name}
-              subtitle={
-                membership.sourceId ? (
-                  <Trans>
-                    Has access through{" "}
-                    <MaybeLink
-                      // @ts-expect-error to prop does not exist on React.Fragment
-                      to={membership.source?.document?.path ?? ""}
-                    >
-                      parent
-                    </MaybeLink>
-                  </Trans>
-                ) : (
-                  t("{{ count }} member", {
-                    count: membership.group.memberCount,
-                  })
-                )
-              }
-              actions={
-                <div style={{ marginRight: -8 }}>
-                  <InputMemberPermissionSelect
-                    style={{ margin: 0 }}
-                    permissions={permissions}
-                    onChange={async (
-                      permission: DocumentPermission | typeof EmptySelectValue
-                    ) => {
-                      if (permission === EmptySelectValue) {
-                        await groupMemberships.delete({
-                          documentId: document.id,
-                          groupId: membership.groupId,
-                        });
-                      } else {
-                        await groupMemberships.create({
-                          documentId: document.id,
-                          groupId: membership.groupId,
-                          permission,
-                        });
-                      }
-                    }}
-                    disabled={!can.manageUsers}
-                    value={membership.permission}
-                    labelHidden
-                    nude
-                  />
-                </div>
-              }
-            />
-          );
-        })}
      {members.map((item) => (
-        <DocumentMemberListItem
+        <MemberListItem
          key={item.id}
          user={item}
          membership={item.getMembership(document)}
@@ -208,9 +109,4 @@ function DocumentMembersList({ document, invitedInSession }: Props) {
  );
 }

-const StyledLink = styled(Link)`
-  color: ${s("textTertiary")};
-  text-decoration: underline;
-`;
-
 export default observer(DocumentMembersList);
@@ -7,9 +7,9 @@ import { s } from "@shared/styles";
 import { DocumentPermission } from "@shared/types";
 import User from "~/models/User";
 import UserMembership from "~/models/UserMembership";
-import { Avatar, AvatarSize } from "~/components/Avatar";
+import Avatar from "~/components/Avatar";
+import { AvatarSize } from "~/components/Avatar/Avatar";
 import InputMemberPermissionSelect from "~/components/InputMemberPermissionSelect";
-import Time from "~/components/Time";
 import { EmptySelectValue, Permission } from "~/types";
 import { ListItem } from "../components/ListItem";

@@ -68,6 +68,7 @@ const DocumentMemberListItem = ({
  if (!currentPermission) {
    return null;
  }
+  const disabled = !onUpdate && !onLeave;
  const MaybeLink = membership?.source ? StyledLink : React.Fragment;

  return (
@@ -89,35 +90,36 @@ const DocumentMemberListItem = ({
          </Trans>
        ) : user.isSuspended ? (
          t("Suspended")
+        ) : user.email ? (
+          user.email
        ) : user.isInvited ? (
          t("Invited")
-        ) : user.lastActiveAt ? (
-          <Trans>
-            Active <Time dateTime={user.lastActiveAt} /> ago
-          </Trans>
+        ) : user.isViewer ? (
+          t("Viewer")
        ) : (
-          t("Never signed in")
+          t("Editor")
        )
      }
      actions={
-        <div style={{ marginRight: -8 }}>
-          <InputMemberPermissionSelect
-            permissions={
-              onLeave
-                ? [
-                    currentPermission,
-                    {
-                      label: `${t("Leave")}…`,
-                      value: EmptySelectValue,
-                    },
-                  ]
-                : permissions
-            }
-            value={membership?.permission}
-            onChange={handleChange}
-            disabled={!onUpdate && !onLeave}
-          />
-        </div>
+        disabled ? null : (
+          <div style={{ marginRight: -8 }}>
+            <InputMemberPermissionSelect
+              permissions={
+                onLeave
+                  ? [
+                      currentPermission,
+                      {
+                        label: `${t("Leave")}…`,
+                        value: EmptySelectValue,
+                      },
+                    ]
+                  : permissions
+              }
+              value={membership?.permission}
+              onChange={handleChange}
+            />
+          </div>
+        )
      }
    />
  );
@@ -18,7 +18,7 @@ import Switch from "~/components/Switch";
 import env from "~/env";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
-import { AvatarSize } from "../../Avatar";
+import { AvatarSize } from "../../Avatar/Avatar";
 import CopyToClipboard from "../../CopyToClipboard";
 import NudeButton from "../../NudeButton";
 import { ResizingHeightContainer } from "../../ResizingHeightContainer";
@@ -203,7 +203,7 @@ const StyledInfoIcon = styled(InfoIcon)`
 `;

 const Wrapper = styled.div`
-  padding-bottom: 8px;
+  margin-bottom: 8px;
 `;

 const DomainPrefix = styled.span`
@@ -7,10 +7,10 @@ import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 import { DocumentPermission } from "@shared/types";
 import Document from "~/models/Document";
-import Group from "~/models/Group";
 import Share from "~/models/Share";
 import User from "~/models/User";
-import { Avatar, GroupAvatar, AvatarSize } from "~/components/Avatar";
+import Avatar from "~/components/Avatar";
+import { AvatarSize } from "~/components/Avatar/Avatar";
 import NudeButton from "~/components/NudeButton";
 import { createAction } from "~/actions";
 import { UserSection } from "~/actions/sections";
@@ -53,7 +53,7 @@ function SharePopover({
  const { t } = useTranslation();
  const can = usePolicy(document);
  const [hasRendered, setHasRendered] = React.useState(visible);
-  const { users, userMemberships, groups, groupMemberships } = useStores();
+  const { users, userMemberships } = useStores();
  const [query, setQuery] = React.useState("");
  const [picker, showPicker, hidePicker] = useBoolean();
  const [invitedInSession, setInvitedInSession] = React.useState<string[]>([]);
@@ -129,9 +129,9 @@ function SharePopover({
        name: t("Invite"),
        section: UserSection,
        perform: async () => {
-          const invited = await Promise.all(
+          const usersInvited = await Promise.all(
            pendingIds.map(async (idOrEmail) => {
-              let user, group;
+              let user;

              // convert email to user
              if (isEmail(idOrEmail)) {
@@ -145,77 +145,38 @@ function SharePopover({
                user = response[0];
              } else {
                user = users.get(idOrEmail);
-                group = groups.get(idOrEmail);
              }

-              if (user) {
-                await userMemberships.create({
-                  documentId: document.id,
-                  userId: user.id,
-                  permission,
-                });
-                return user;
+              if (!user) {
+                return;
              }

-              if (group) {
-                await groupMemberships.create({
-                  documentId: document.id,
-                  groupId: group.id,
-                  permission,
-                });
-                return group;
-              }
+              await userMemberships.create({
+                documentId: document.id,
+                userId: user.id,
+                permission,
+              });

-              return;
+              return user;
            })
          );

-          const invitedUsers = invited.filter(
-            (item) => item instanceof User
-          ) as User[];
-          const invitedGroups = invited.filter(
-            (item) => item instanceof Group
-          ) as Group[];
-
-          if (invitedUsers.length > 0) {
-            // Special case for the common action of adding a single user.
-            if (invitedUsers.length === 1) {
-              const user = invitedUsers[0];
-              toast.message(
-                t("{{ userName }} was added to the document", {
-                  userName: user.name,
-                }),
-                {
-                  icon: <Avatar model={user} size={AvatarSize.Toast} />,
-                }
-              );
-            } else {
-              toast.message(
-                t("{{ count }} people added to the document", {
-                  count: invitedUsers.length,
-                })
-              );
-            }
-          }
-          if (invitedGroups.length > 0) {
-            // Special case for the common action of adding a single group.
-            if (invitedGroups.length === 1) {
-              const group = invitedGroups[0];
-              toast.message(
-                t("{{ userName }} was added to the document", {
-                  userName: group.name,
-                }),
-                {
-                  icon: <GroupAvatar group={group} size={AvatarSize.Toast} />,
-                }
-              );
-            } else {
-              toast.message(
-                t("{{ count }} groups added to the document", {
-                  count: invitedGroups.length,
-                })
-              );
-            }
+          if (usersInvited.length === 1) {
+            const user = usersInvited[0] as User;
+            toast.message(
+              t("{{ userName }} was invited to the document", {
+                userName: user.name,
+              }),
+              {
+                icon: <Avatar model={user} size={AvatarSize.Toast} />,
+              }
+            );
+          } else {
+            toast.success(
+              t("{{ count }} people invited to the document", {
+                count: pendingIds.length,
+              })
+            );
          }

          setInvitedInSession((prev) => [...prev, ...pendingIds]);
@@ -224,16 +185,14 @@ function SharePopover({
        },
      }),
    [
-      document.id,
-      groupMemberships,
-      groups,
+      t,
+      pendingIds,
      hidePicker,
      userMemberships,
-      pendingIds,
+      document.id,
      permission,
-      t,
-      team.defaultUserRole,
      users,
+      team.defaultUserRole,
    ]
  );

@@ -1,47 +0,0 @@
-import times from "lodash/times";
-import * as React from "react";
-import { AvatarSize } from "~/components/Avatar";
-import Fade from "~/components/Fade";
-import PlaceholderText from "~/components/PlaceholderText";
-import { ListItem } from "../components/ListItem";
-
-type Props = {
-  count?: number;
-};
-
-/**
- * Placeholder for a list item in the share popover.
- */
-export function Placeholder({ count = 1 }: Props) {
-  return (
-    <Fade>
-      {times(count, (index) => (
-        <ListItem
-          key={index}
-          image={
-            <PlaceholderText
-              width={AvatarSize.Medium}
-              height={AvatarSize.Medium}
-            />
-          }
-          title={
-            <PlaceholderText
-              maxWidth={50}
-              minWidth={30}
-              height={14}
-              style={{ marginTop: 4, marginBottom: 4 }}
-            />
-          }
-          subtitle={
-            <PlaceholderText
-              maxWidth={75}
-              minWidth={50}
-              height={12}
-              style={{ marginBottom: 4 }}
-            />
-          }
-        />
-      ))}
-    </Fade>
-  );
-}
@@ -1,10 +1,11 @@
 import { isEmail } from "class-validator";
 import concat from "lodash/concat";
 import { observer } from "mobx-react";
-import { CheckmarkIcon, CloseIcon } from "outline-icons";
+import { CheckmarkIcon, CloseIcon, GroupIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import styled from "styled-components";
+import styled, { useTheme } from "styled-components";
+import Squircle from "@shared/components/Squircle";
 import { s } from "@shared/styles";
 import { stringToColor } from "@shared/utils/color";
 import Collection from "~/models/Collection";
@@ -12,7 +13,8 @@ import Document from "~/models/Document";
 import Group from "~/models/Group";
 import User from "~/models/User";
 import ArrowKeyNavigation from "~/components/ArrowKeyNavigation";
-import { Avatar, GroupAvatar, AvatarSize, IAvatar } from "~/components/Avatar";
+import Avatar from "~/components/Avatar";
+import { AvatarSize, IAvatar } from "~/components/Avatar/Avatar";
 import Empty from "~/components/Empty";
 import Placeholder from "~/components/List/Placeholder";
 import Scrollable from "~/components/Scrollable";
@@ -40,6 +42,8 @@ type Props = {
  addPendingId: (id: string) => void;
  /** Callback to remove a user from the pending list. */
  removePendingId: (id: string) => void;
+  /** Show group suggestions. */
+  showGroups?: boolean;
  /** Handles escape from suggestions list */
  onEscape?: (ev: React.KeyboardEvent<HTMLDivElement>) => void;
 };
@@ -53,6 +57,7 @@ export const Suggestions = observer(
      pendingIds,
      addPendingId,
      removePendingId,
+      showGroups,
      onEscape,
    }: Props,
    ref: React.Ref<HTMLDivElement>
@@ -61,6 +66,7 @@ export const Suggestions = observer(
    const { users, groups } = useStores();
    const { t } = useTranslation();
    const user = useCurrentUser();
+    const theme = useTheme();
    const containerRef = React.useRef<HTMLDivElement | null>(null);
    const { maxHeight } = useMaxHeight({
      elementRef: containerRef,
@@ -70,7 +76,10 @@ export const Suggestions = observer(
    const fetchUsersByQuery = useThrottledCallback(
      (query: string) => {
        void users.fetchPage({ query });
-        void groups.fetchPage({ query });
+
+        if (showGroups) {
+          void groups.fetchPage({ query });
+        }
      },
      250,
      undefined,
@@ -98,20 +107,17 @@ export const Suggestions = observer(
          : collection
          ? users.notInCollection(collection.id, query)
          : users.orderedData
-      ).filter((u) => !u.isSuspended && u.id !== user.id);
+      ).filter((u) => !u.isSuspended);

      if (isEmail(query)) {
        filtered.push(getSuggestionForEmail(query));
      }

-      return [
-        ...(document
-          ? groups.notInDocument(document.id, query)
-          : collection
-          ? groups.notInCollection(collection.id, query)
-          : []),
-        ...filtered,
-      ];
+      if (collection?.id) {
+        return [...groups.notInCollection(collection.id, query), ...filtered];
+      }
+
+      return filtered;
    }, [
      getSuggestionForEmail,
      users,
@@ -135,7 +141,7 @@ export const Suggestions = observer(
              : users.get(id) ?? groups.get(id)
          )
          .filter(Boolean) as User[],
-      [users, groups, getSuggestionForEmail, pendingIds]
+      [users, getSuggestionForEmail, pendingIds]
    );

    React.useEffect(() => {
@@ -149,7 +155,11 @@ export const Suggestions = observer(
          subtitle: t("{{ count }} member", {
            count: suggestion.memberCount,
          }),
-          image: <GroupAvatar group={suggestion} />,
+          image: (
+            <Squircle color={theme.text} size={AvatarSize.Medium}>
+              <GroupIcon color={theme.background} size={16} />
+            </Squircle>
+          ),
        };
      }
      return {
@@ -15,7 +15,7 @@ export const Wrapper = styled.div`

 export const Separator = styled.div`
  border-top: 1px dashed ${s("divider")};
-  margin: 8px 0;
+  margin: 12px 0;
 `;

 export const HeaderInput = styled(Flex)`
@@ -40,10 +40,9 @@ function AppSidebar() {
  const can = usePolicy(team);

  React.useEffect(() => {
-    void collections.fetchAll();
-
    if (!user.isViewer) {
      void documents.fetchDrafts();
+      void collections.fetchAll();
    }
  }, [documents, collections, user.isViewer]);

@@ -94,45 +93,43 @@ function AppSidebar() {
              </SidebarButton>
            )}
          </OrganizationMenu>
-          <Section>
-            <SidebarLink
-              to={homePath()}
-              icon={<HomeIcon />}
-              exact={false}
-              label={t("Home")}
-            />
-            <SidebarLink
-              to={searchPath()}
-              icon={<SearchIcon />}
-              label={t("Search")}
-              exact={false}
-            />
-            {can.createDocument && (
-              <SidebarLink
-                to={draftsPath()}
-                icon={<DraftsIcon />}
-                label={
-                  <Flex align="center" justify="space-between">
-                    {t("Drafts")}
-                    {documents.totalDrafts > 0 ? (
-                      <Drafts size="xsmall" type="tertiary">
-                        {documents.totalDrafts > 25
-                          ? "25+"
-                          : documents.totalDrafts}
-                      </Drafts>
-                    ) : null}
-                  </Flex>
-                }
-              />
-            )}
-          </Section>
          <Scrollable flex shadow>
            <Section>
-              <Starred />
+              <SidebarLink
+                to={homePath()}
+                icon={<HomeIcon />}
+                exact={false}
+                label={t("Home")}
+              />
+              <SidebarLink
+                to={searchPath()}
+                icon={<SearchIcon />}
+                label={t("Search")}
+                exact={false}
+              />
+              {can.createDocument && (
+                <SidebarLink
+                  to={draftsPath()}
+                  icon={<DraftsIcon />}
+                  label={
+                    <Flex align="center" justify="space-between">
+                      {t("Drafts")}
+                      {documents.totalDrafts > 0 ? (
+                        <Drafts size="xsmall" type="tertiary">
+                          {documents.totalDrafts}
+                        </Drafts>
+                      ) : null}
+                    </Flex>
+                  }
+                />
+              )}
            </Section>
            <Section>
              <SharedWithMe />
            </Section>
+            <Section>
+              <Starred />
+            </Section>
            <Section auto>
              <Collections />
            </Section>
@@ -4,17 +4,16 @@ import { useLocation } from "react-router-dom";
 import styled, { css, useTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { depths, s } from "@shared/styles";
-import { Avatar } from "~/components/Avatar";
 import Flex from "~/components/Flex";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import useMenuContext from "~/hooks/useMenuContext";
-import useMobile from "~/hooks/useMobile";
 import usePrevious from "~/hooks/usePrevious";
 import useStores from "~/hooks/useStores";
 import AccountMenu from "~/menus/AccountMenu";
 import { fadeOnDesktopBackgrounded } from "~/styles";
 import { fadeIn } from "~/styles/animations";
 import Desktop from "~/utils/Desktop";
+import Avatar from "../Avatar";
 import NotificationIcon from "../Notifications/NotificationIcon";
 import NotificationsPopover from "../Notifications/NotificationsPopover";
 import ResizeBorder from "./components/ResizeBorder";
@@ -40,7 +39,6 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
  const previousLocation = usePrevious(location);
  const { isMenuOpen } = useMenuContext();
  const user = useCurrentUser({ rejectOnEmpty: false });
-  const isMobile = useMobile();
  const width = ui.sidebarWidth;
  const collapsed = ui.sidebarIsClosed && !isMenuOpen;
  const maxWidth = theme.sidebarMaxWidth;
@@ -191,7 +189,6 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
        $isSmallerThanMinimum={isSmallerThanMinimum}
        $mobileSidebarVisible={ui.mobileSidebarVisible}
        $collapsed={collapsed}
-        $isMobile={isMobile}
        className={className}
        onPointerMove={handlePointerMove}
        onPointerLeave={handlePointerLeave}
@@ -259,7 +256,6 @@ type ContainerProps = {
  $isHovering: boolean;
  $collapsed: boolean;
  $hidden: boolean;
-  $isMobile: boolean;
 };

 const hoverStyles = (props: ContainerProps) => `
@@ -278,12 +274,14 @@ const hoverStyles = (props: ContainerProps) => `
 `;

 const Container = styled(Flex)<ContainerProps>`
+  opacity: ${(props) => (props.$hidden ? 0 : 1)};
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  background: ${s("sidebarBackground")};
-  transition: box-shadow 150ms ease-in-out, transform 150ms ease-out,
+  transition: box-shadow 150ms ease-in-out, opacity 150ms ease-in-out,
+    transform 150ms ease-out,
    ${s("backgroundTransition")}
      ${(props: ContainerProps) =>
        props.$isAnimating ? `,width ${ANIMATION_MS}ms ease-out` : ""};
@@ -301,20 +299,7 @@ const Container = styled(Flex)<ContainerProps>`
  }

  & > div {
-    transition: opacity 150ms ease-in-out;
-    opacity: ${(props) => {
-      if (props.$hidden) {
-        return "0";
-      }
-      if (props.$isHovering) {
-        return "1";
-      }
-      if (props.$isMobile) {
-        return props.$mobileSidebarVisible ? "1" : "0";
-      } else {
-        return props.$collapsed ? "0" : "1";
-      }
-    }};
+    opacity: ${(props) => (props.$collapsed && !props.$isHovering ? "0" : "1")};
  }

  ${breakpoint("tablet")`
@@ -5,10 +5,11 @@ import * as React from "react";
 import { useDrop } from "react-dnd";
 import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
+import { NavigationNode } from "@shared/types";
 import { CollectionValidation } from "@shared/validations";
 import Collection from "~/models/Collection";
 import Document from "~/models/Document";
-import ConfirmMoveDialog from "~/components/ConfirmMoveDialog";
+import DocumentReparent from "~/scenes/DocumentReparent";
 import Fade from "~/components/Fade";
 import CollectionIcon from "~/components/Icons/CollectionIcon";
 import NudeButton from "~/components/NudeButton";
@@ -21,8 +22,8 @@ import CollectionMenu from "~/menus/CollectionMenu";
 import DropToImport from "./DropToImport";
 import EditableTitle, { RefHandle } from "./EditableTitle";
 import Relative from "./Relative";
-import { SidebarContextType, useSidebarContext } from "./SidebarContext";
 import SidebarLink, { DragObject } from "./SidebarLink";
+import { useStarredContext } from "./StarredContext";

 type Props = {
  collection: Collection;
@@ -38,13 +39,16 @@ const CollectionLink: React.FC<Props> = ({
  onDisclosureClick,
  isDraggingAnyCollection,
 }: Props) => {
+  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 can = usePolicy(collection);
  const { t } = useTranslation();
  const history = useHistory();
-  const sidebarContext = useSidebarContext();
+  const inStarredSection = useStarredContext();
  const editableTitleRef = React.useRef<RefHandle>(null);

  const handleTitleChange = React.useCallback(
@@ -78,12 +82,22 @@ const CollectionLink: React.FC<Props> = ({

      if (
        prevCollection &&
+        prevCollection.permission === null &&
        prevCollection.permission !== collection.permission &&
        !document?.isDraft
      ) {
+        itemRef.current = item;
+
        dialogs.openModal({
-          title: t("Change permissions?"),
-          content: <ConfirmMoveDialog item={item} collection={collection} />,
+          title: t("Move document"),
+          content: (
+            <DocumentReparent
+              item={item}
+              collection={collection}
+              onSubmit={dialogs.closeAllModals}
+              onCancel={dialogs.closeAllModals}
+            />
+          ),
        });
      } else {
        await documents.move({ documentId: id, collectionId: collection.id });
@@ -102,69 +116,78 @@ const CollectionLink: React.FC<Props> = ({
    }),
  });

+  const handleTitleEditing = React.useCallback((value: boolean) => {
+    setIsEditing(value);
+  }, []);
+
  const handlePrefetch = React.useCallback(() => {
    void collection.fetchDocuments();
  }, [collection]);

  const context = useActionContext({
    activeCollectionId: collection.id,
-    sidebarContext,
+    inStarredSection,
  });

  return (
-    <Relative ref={drop}>
-      <DropToImport collectionId={collection.id}>
-        <SidebarLink
-          to={{
-            pathname: collection.path,
-            state: { sidebarContext },
-          }}
-          expanded={expanded}
-          onDisclosureClick={onDisclosureClick}
-          onClickIntent={handlePrefetch}
-          icon={<CollectionIcon collection={collection} expanded={expanded} />}
-          showActions={menuOpen}
-          isActiveDrop={isOver && canDrop}
-          isActive={(
-            match,
-            location: Location<{ sidebarContext?: SidebarContextType }>
-          ) => !!match && location.state?.sidebarContext === sidebarContext}
-          label={
-            <EditableTitle
-              title={collection.name}
-              onSubmit={handleTitleChange}
-              onEditing={setIsEditing}
-              canUpdate={can.update}
-              maxLength={CollectionValidation.maxNameLength}
-              ref={editableTitleRef}
-            />
-          }
-          exact={false}
-          depth={0}
-          menu={
-            !isEditing &&
-            !isDraggingAnyCollection && (
-              <Fade>
-                <NudeButton
-                  tooltip={{ content: t("New doc"), delay: 500 }}
-                  action={createDocument}
-                  context={context}
-                  hideOnActionDisabled
-                >
-                  <PlusIcon />
-                </NudeButton>
-                <CollectionMenu
-                  collection={collection}
-                  onRename={() => editableTitleRef.current?.setIsEditing(true)}
-                  onOpen={handleMenuOpen}
-                  onClose={handleMenuClose}
-                />
-              </Fade>
-            )
-          }
-        />
-      </DropToImport>
-    </Relative>
+    <>
+      <Relative ref={drop}>
+        <DropToImport collectionId={collection.id}>
+          <SidebarLink
+            to={{
+              pathname: collection.path,
+              state: { starred: inStarredSection },
+            }}
+            expanded={expanded}
+            onDisclosureClick={onDisclosureClick}
+            onClickIntent={handlePrefetch}
+            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={can.update}
+                maxLength={CollectionValidation.maxNameLength}
+                ref={editableTitleRef}
+              />
+            }
+            exact={false}
+            depth={0}
+            menu={
+              !isEditing &&
+              !isDraggingAnyCollection && (
+                <Fade>
+                  <NudeButton
+                    tooltip={{ content: t("New doc"), delay: 500 }}
+                    action={createDocument}
+                    context={context}
+                    hideOnActionDisabled
+                  >
+                    <PlusIcon />
+                  </NudeButton>
+                  <CollectionMenu
+                    collection={collection}
+                    onRename={() =>
+                      editableTitleRef.current?.setIsEditing(true)
+                    }
+                    onOpen={handleMenuOpen}
+                    onClose={handleMenuClose}
+                  />
+                </Fade>
+              )
+            }
+          />
+        </DropToImport>
+      </Relative>
+    </>
  );
 };

@@ -6,26 +6,21 @@ import { toast } from "sonner";
 import styled from "styled-components";
 import Collection from "~/models/Collection";
 import Document from "~/models/Document";
-import ConfirmMoveDialog from "~/components/ConfirmMoveDialog";
 import DocumentsLoader from "~/components/DocumentsLoader";
 import { ResizingHeightContainer } from "~/components/ResizingHeightContainer";
-import Text from "~/components/Text";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
-import history from "~/utils/history";
-import useCollectionDocuments from "../hooks/useCollectionDocuments";
 import DocumentLink from "./DocumentLink";
 import DropCursor from "./DropCursor";
+import EmptyCollectionPlaceholder from "./EmptyCollectionPlaceholder";
 import Folder from "./Folder";
 import PlaceholderCollections from "./PlaceholderCollections";
-import SidebarLink, { DragObject } from "./SidebarLink";
+import { DragObject } from "./SidebarLink";
+import useCollectionDocuments from "./useCollectionDocuments";

 type Props = {
-  /** The collection to render the children of. */
  collection: Collection;
-  /** Whether the children are shown in an expanded state. */
  expanded: boolean;
-  /** Function to prefetch a document by ID. */
  prefetchDocument?: (documentId: string) => Promise<Document | void>;
 };

@@ -36,8 +31,9 @@ function CollectionLinkChildren({
 }: Props) {
  const can = usePolicy(collection);
  const manualSort = collection.sort.field === "index";
-  const { documents, dialogs, collections } = useStores();
+  const { documents } = useStores();
  const { t } = useTranslation();
+
  const childDocuments = useCollectionDocuments(collection, documents.active);

  // Drop to reorder document
@@ -56,26 +52,11 @@ function CollectionLinkChildren({
      if (!collection) {
        return;
      }
-
-      const prevCollection = collections.get(item.collectionId);
-
-      if (
-        prevCollection &&
-        prevCollection.permission !== collection.permission
-      ) {
-        dialogs.openModal({
-          title: t("Change permissions?"),
-          content: (
-            <ConfirmMoveDialog item={item} collection={collection} index={0} />
-          ),
-        });
-      } else {
-        void documents.move({
-          documentId: item.id,
-          collectionId: collection.id,
-          index: 0,
-        });
-      }
+      void documents.move({
+        documentId: item.id,
+        collectionId: collection.id,
+        index: 0,
+      });
    },
    collect: (monitor) => ({
      isOverReorder: !!monitor.isOver(),
@@ -110,17 +91,7 @@ function CollectionLinkChildren({
            index={index}
          />
        ))}
-        {childDocuments?.length === 0 && (
-          <SidebarLink
-            label={
-              <Text type="tertiary" size="small" italic>
-                {t("Empty")}
-              </Text>
-            }
-            onClick={() => history.push(collection.url)}
-            depth={2}
-          />
-        )}
+        {childDocuments?.length === 0 && <EmptyCollectionPlaceholder />}
      </DocumentsLoader>
    </Folder>
  );
@@ -42,7 +42,7 @@ const Button = styled(NudeButton)<{ $root?: boolean }>`
    props.$root &&
    css`
      opacity: 0;
-      left: -18px;
+      left: -16px;

      &:hover {
        opacity: 1;
@@ -2,8 +2,11 @@ import { Location } from "history";
 import { observer } from "mobx-react";
 import { PlusIcon } from "outline-icons";
 import * as React from "react";
+import { useDrag, useDrop } from "react-dnd";
+import { getEmptyImage } from "react-dnd-html5-backend";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
+import { toast } from "sonner";
 import styled from "styled-components";
 import { NavigationNode } from "@shared/types";
 import { sortNavigationNodes } from "@shared/utils/collections";
@@ -19,18 +22,14 @@ import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
 import DocumentMenu from "~/menus/DocumentMenu";
 import { newNestedDocumentPath } from "~/utils/routeHelpers";
-import {
-  useDragDocument,
-  useDropToReorderDocument,
-  useDropToReparentDocument,
-} from "../hooks/useDragAndDrop";
 import DropCursor from "./DropCursor";
 import DropToImport from "./DropToImport";
 import EditableTitle, { RefHandle } from "./EditableTitle";
 import Folder from "./Folder";
 import Relative from "./Relative";
-import { SidebarContextType, useSidebarContext } from "./SidebarContext";
-import SidebarLink from "./SidebarLink";
+import { useSharedContext } from "./SharedContext";
+import SidebarLink, { DragObject } from "./SidebarLink";
+import { useStarredContext } from "./StarredContext";

 type Props = {
  node: NavigationNode;
@@ -66,23 +65,26 @@ function InnerDocumentLink(
  const { fetchChildDocuments } = documents;
  const [isEditing, setIsEditing] = React.useState(false);
  const editableTitleRef = React.useRef<RefHandle>(null);
-  const sidebarContext = useSidebarContext();
+  const inStarredSection = useStarredContext();
+  const inSharedSection = useSharedContext();

  React.useEffect(() => {
-    if (
-      isActiveDocument &&
-      (hasChildDocuments || sidebarContext !== "collections")
-    ) {
+    if (isActiveDocument && (hasChildDocuments || inSharedSection)) {
      void fetchChildDocuments(node.id);
    }
  }, [
    fetchChildDocuments,
    node.id,
    hasChildDocuments,
-    sidebarContext,
+    inSharedSection,
    isActiveDocument,
  ]);

+  const pathToNode = React.useMemo(
+    () => collection?.pathToDocument(node.id).map((entry) => entry.id),
+    [collection, node]
+  );
+
  const showChildren = React.useMemo(
    () =>
      !!(
@@ -98,27 +100,27 @@ function InnerDocumentLink(
    [hasChildDocuments, activeDocument, isActiveDocument, node, collection]
  );

-  const [expanded, setExpanded, setCollapsed] = useBoolean(showChildren);
+  const [expanded, setExpanded] = React.useState(showChildren);

  React.useEffect(() => {
    if (showChildren) {
-      setExpanded();
+      setExpanded(showChildren);
    }
-  }, [setExpanded, showChildren]);
+  }, [showChildren]);

  // when the last child document is removed auto-close the local folder state
  React.useEffect(() => {
    if (expanded && !hasChildDocuments) {
-      setCollapsed();
+      setExpanded(false);
    }
-  }, [setCollapsed, expanded, hasChildDocuments]);
+  }, [expanded, hasChildDocuments]);

  const handleDisclosureClick = React.useCallback(
    (ev) => {
      ev?.preventDefault();
-      expanded ? setCollapsed() : setExpanded();
+      setExpanded(!expanded);
    },
-    [setCollapsed, setExpanded, expanded]
+    [expanded]
  );

  const handlePrefetch = React.useCallback(() => {
@@ -139,39 +141,139 @@ function InnerDocumentLink(
  );
  const [menuOpen, handleMenuOpen, handleMenuClose] = useBoolean();
  const isMoving = documents.movingDocumentId === node.id;
+  const manualSort = collection?.sort.field === "index";
  const can = policies.abilities(node.id);
  const icon = document?.icon || node.icon || node.emoji;
  const color = document?.color || node.color;

  // Draggable
-  const [{ isDragging }, drag] = useDragDocument(node, depth, document);
+  const [{ isDragging }, drag, preview] = useDrag({
+    type: "document",
+    item: () => ({
+      ...node,
+      depth,
+      icon: icon ? <Icon value={icon} color={color} /> : undefined,
+      active: isActiveDocument,
+      collectionId: collection?.id || "",
+    }),
+    collect: (monitor) => ({
+      isDragging: monitor.isDragging(),
+    }),
+    canDrag: () => can.move || can.archive || can.delete,
+  });
+
+  React.useEffect(() => {
+    preview(getEmptyImage(), { captureDraggingState: true });
+  }, [preview]);
+
+  const hoverExpanding = React.useRef<ReturnType<typeof setTimeout>>();
+
+  // We set a timeout when the user first starts hovering over the document link,
+  // to trigger expansion of children. Clear this timeout when they stop hovering.
+  const resetHoverExpanding = React.useCallback(() => {
+    if (hoverExpanding.current) {
+      clearTimeout(hoverExpanding.current);
+      hoverExpanding.current = undefined;
+    }
+  }, []);

  // Drop to re-parent
-  const parentRef = React.useRef<HTMLDivElement>(null);
-  const [{ isOverReparent, canDropToReparent }, dropToReparent] =
-    useDropToReparentDocument(node, setExpanded, parentRef);
-
-  // Drop to reorder
-  const [{ isOverReorder, isDraggingAnyDocument }, dropToReorder] =
-    useDropToReorderDocument(node, collection, (item) => {
+  const [{ isOverReparent, canDropToReparent }, dropToReparent] = useDrop({
+    accept: "document",
+    drop: async (item: DragObject, monitor) => {
+      if (monitor.didDrop()) {
+        return;
+      }
      if (!collection) {
        return;
      }
+      await documents.move({
+        documentId: item.id,
+        collectionId: collection.id,
+        parentDocumentId: node.id,
+      });
+      setExpanded(true);
+    },
+    canDrop: (item, monitor) =>
+      !isDraft &&
+      !!pathToNode &&
+      !pathToNode.includes(monitor.getItem<DragObject>().id) &&
+      item.id !== node.id,
+    hover: (_item, monitor) => {
+      // Enables expansion of document children when hovering over the document
+      // for more than half a second.
+      if (
+        hasChildDocuments &&
+        monitor.canDrop() &&
+        monitor.isOver({
+          shallow: true,
+        })
+      ) {
+        if (!hoverExpanding.current) {
+          hoverExpanding.current = setTimeout(() => {
+            hoverExpanding.current = undefined;
+
+            if (
+              monitor.isOver({
+                shallow: true,
+              })
+            ) {
+              setExpanded(true);
+            }
+          }, 500);
+        }
+      }
+    },
+    collect: (monitor) => ({
+      isOverReparent: monitor.isOver({
+        shallow: true,
+      }),
+      canDropToReparent: monitor.canDrop(),
+    }),
+  });
+
+  // Drop to reorder
+  const [{ isOverReorder, isDraggingAnyDocument }, dropToReorder] = useDrop({
+    accept: "document",
+    drop: (item: DragObject) => {
+      if (!manualSort) {
+        toast.message(
+          t(
+            "You can't reorder documents in an alphabetically sorted collection"
+          )
+        );
+        return;
+      }
+
+      if (!collection) {
+        return;
+      }
+      if (item.id === node.id) {
+        return;
+      }
+
      if (expanded) {
-        return {
+        void documents.move({
          documentId: item.id,
          collectionId: collection.id,
          parentDocumentId: node.id,
          index: 0,
-        };
+        });
+        return;
      }
-      return {
+
+      void documents.move({
        documentId: item.id,
        collectionId: collection.id,
        parentDocumentId: parentId,
        index: index + 1,
-      };
-    });
+      });
+    },
+    collect: (monitor) => ({
+      isOverReorder: monitor.isOver(),
+      isDraggingAnyDocument: monitor.canDrop(),
+    }),
+  });

  const nodeChildren = React.useMemo(() => {
    const insertDraftDocument =
@@ -207,18 +309,18 @@ function InnerDocumentLink(
        return;
      }
      if (ev.key === "ArrowRight" && !expanded) {
-        setExpanded();
+        setExpanded(true);
      }
      if (ev.key === "ArrowLeft" && expanded) {
-        setCollapsed();
+        setExpanded(false);
      }
    },
-    [setExpanded, setCollapsed, hasChildren, expanded]
+    [hasChildren, expanded]
  );

  return (
    <>
-      <Relative ref={parentRef}>
+      <Relative onDragLeave={resetHoverExpanding}>
        <Draggable
          key={node.id}
          ref={drag}
@@ -236,7 +338,7 @@ function InnerDocumentLink(
                  pathname: node.url,
                  state: {
                    title: node.title,
-                    sidebarContext,
+                    starred: inStarredSection,
                  },
                }}
                icon={icon && <Icon value={icon} color={color} />}
@@ -250,25 +352,16 @@ function InnerDocumentLink(
                    ref={editableTitleRef}
                  />
                }
-                isActive={(
-                  match,
-                  location: Location<{
-                    sidebarContext?: SidebarContextType;
-                  }>
-                ) => {
-                  if (sidebarContext !== location.state?.sidebarContext) {
-                    return false;
-                  }
-                  return (
-                    (document && location.pathname.endsWith(document.urlId)) ||
-                    !!match
-                  );
-                }}
+                isActive={(match, location: Location<{ starred?: boolean }>) =>
+                  ((document && location.pathname.endsWith(document.urlId)) ||
+                    !!match) &&
+                  location.state?.starred === inStarredSection
+                }
                isActiveDrop={isOverReparent && canDropToReparent}
                depth={depth}
                exact={false}
                showActions={menuOpen}
-                scrollIntoViewIfNeeded={sidebarContext === "collections"}
+                scrollIntoViewIfNeeded={!inStarredSection}
                isDraft={isDraft}
                ref={ref}
                menu={
@@ -304,7 +397,7 @@ function InnerDocumentLink(
            </DropToImport>
          </div>
        </Draggable>
-        {isDraggingAnyDocument && collection?.isManualSort && (
+        {isDraggingAnyDocument && manualSort && (
          <DropCursor isActiveDrop={isOverReorder} innerRef={dropToReorder} />
        )}
      </Relative>
@@ -3,17 +3,17 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { useDrop, useDrag, DropTargetMonitor } from "react-dnd";
 import { getEmptyImage } from "react-dnd-html5-backend";
+import { useLocation } from "react-router-dom";
 import styled from "styled-components";
 import Collection from "~/models/Collection";
 import Document from "~/models/Document";
 import CollectionIcon from "~/components/Icons/CollectionIcon";
+import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
-import { useLocationState } from "../hooks/useLocationState";
 import CollectionLink from "./CollectionLink";
 import CollectionLinkChildren from "./CollectionLinkChildren";
 import DropCursor from "./DropCursor";
 import Relative from "./Relative";
-import { useSidebarContext } from "./SidebarContext";
 import { DragObject } from "./SidebarLink";

 type Props = {
@@ -23,19 +23,25 @@ type Props = {
  belowCollection: Collection | void;
 };

+function useLocationStateStarred() {
+  const location = useLocation<{
+    starred?: boolean;
+  }>();
+  return location.state?.starred;
+}
+
 function DraggableCollectionLink({
  collection,
  activeDocument,
  prefetchDocument,
  belowCollection,
 }: Props) {
-  const locationSidebarContext = useLocationState();
-  const sidebarContext = useSidebarContext();
-  const { ui, policies, collections } = useStores();
+  const locationStateStarred = useLocationStateStarred();
+  const { ui, collections } = useStores();
  const [expanded, setExpanded] = React.useState(
-    collection.id === ui.activeCollectionId &&
-      sidebarContext === locationSidebarContext
+    collection.id === ui.activeCollectionId && !locationStateStarred
  );
+  const can = usePolicy(collection);
  const belowCollectionIndex = belowCollection ? belowCollection.index : null;

  // Drop to reorder collection
@@ -52,8 +58,7 @@ function DraggableCollectionLink({
    },
    canDrop: (item) =>
      collection.id !== item.id &&
-      (!belowCollection || item.id !== belowCollection.id) &&
-      policies.abilities(item.id)?.move,
+      (!belowCollection || item.id !== belowCollection.id),
    collect: (monitor: DropTargetMonitor<Collection, Collection>) => ({
      isCollectionDropping: monitor.isOver(),
      isDraggingAnyCollection: monitor.canDrop(),
@@ -71,6 +76,7 @@ function DraggableCollectionLink({
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
+    canDrag: () => can.move,
  });

  React.useEffect(() => {
@@ -80,18 +86,10 @@ function DraggableCollectionLink({
  // 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 &&
-      sidebarContext === locationSidebarContext
-    ) {
+    if (collection.id === ui.activeCollectionId && !locationStateStarred) {
      setExpanded(true);
    }
-  }, [
-    collection.id,
-    ui.activeCollectionId,
-    sidebarContext,
-    locationSidebarContext,
-  ]);
+  }, [collection.id, ui.activeCollectionId, locationStateStarred]);

  const handleDisclosureClick = React.useCallback((ev) => {
    ev?.preventDefault();
@@ -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;
@@ -1,48 +0,0 @@
-import { observer } from "mobx-react";
-import { GroupIcon } from "outline-icons";
-import * as React from "react";
-import Group from "~/models/Group";
-import Folder from "./Folder";
-import Relative from "./Relative";
-import SharedWithMeLink from "./SharedWithMeLink";
-import SidebarContext from "./SidebarContext";
-import SidebarLink from "./SidebarLink";
-
-type Props = {
-  /** The group to render */
-  group: Group;
-};
-
-const GroupLink: React.FC<Props> = ({ group }) => {
-  const [expanded, setExpanded] = React.useState(false);
-
-  const handleDisclosureClick = React.useCallback((ev) => {
-    ev?.preventDefault();
-    setExpanded((e) => !e);
-  }, []);
-
-  return (
-    <Relative>
-      <SidebarLink
-        label={group.name}
-        icon={<GroupIcon />}
-        expanded={expanded}
-        onClick={handleDisclosureClick}
-        depth={0}
-      />
-      <SidebarContext.Provider value={group.id}>
-        <Folder expanded={expanded}>
-          {group.documentMemberships.map((membership) => (
-            <SharedWithMeLink
-              key={membership.id}
-              membership={membership}
-              depth={1}
-            />
-          ))}
-        </Folder>
-      </SidebarContext.Provider>
-    </Relative>
-  );
-};
-
-export default observer(GroupLink);
@@ -44,12 +44,12 @@ function HistoryNavigation(props: React.ComponentProps<typeof Flex>) {
  return (
    <Navigation gap={4} {...props}>
      <Tooltip content={t("Go back")} delay={500}>
-        <NudeButton onClick={() => Desktop.bridge?.goBack()}>
+        <NudeButton onClick={() => Desktop.bridge.goBack()}>
          <Back $active={back} />
        </NudeButton>
      </Tooltip>
      <Tooltip content={t("Go forward")} delay={500}>
-        <NudeButton onClick={() => Desktop.bridge?.goForward()}>
+        <NudeButton onClick={() => Desktop.bridge.goForward()}>
          <Forward $active={forward} />
        </NudeButton>
      </Tooltip>
@@ -10,7 +10,7 @@ import {
  match,
 } from "react-router";
 import { Link } from "react-router-dom";
-import scrollIntoView from "scroll-into-view-if-needed";
+import scrollIntoView from "smooth-scroll-into-view-if-needed";
 import history from "~/utils/history";

 const resolveToLocation = (
@@ -0,0 +1,7 @@
+import * as React from "react";
+
+const SharedContext = React.createContext<boolean | undefined>(undefined);
+
+export const useSharedContext = () => React.useContext(SharedContext);
+
+export default SharedContext;
@@ -4,38 +4,34 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 import { Pagination } from "@shared/constants";
-import GroupMembership from "~/models/GroupMembership";
 import UserMembership from "~/models/UserMembership";
 import DelayedMount from "~/components/DelayedMount";
 import Flex from "~/components/Flex";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import usePaginatedRequest from "~/hooks/usePaginatedRequest";
 import useStores from "~/hooks/useStores";
-import { useDropToReorderUserMembership } from "../hooks/useDragAndDrop";
 import DropCursor from "./DropCursor";
-import GroupLink from "./GroupLink";
 import Header from "./Header";
 import PlaceholderCollections from "./PlaceholderCollections";
 import Relative from "./Relative";
+import SharedContext from "./SharedContext";
 import SharedWithMeLink from "./SharedWithMeLink";
-import SidebarContext from "./SidebarContext";
 import SidebarLink from "./SidebarLink";
+import { useDropToReorderUserMembership } from "./useDragAndDrop";

 function SharedWithMe() {
-  const { userMemberships, groupMemberships } = useStores();
+  const { userMemberships } = useStores();
  const { t } = useTranslation();
  const user = useCurrentUser();

-  usePaginatedRequest<GroupMembership>(groupMemberships.fetchAll);
-
  const { loading, next, end, error, page } =
    usePaginatedRequest<UserMembership>(userMemberships.fetchPage, {
      limit: Pagination.sidebarLimit,
    });

  // Drop to reorder document
-  const [reorderProps, dropToReorderRef] = useDropToReorderUserMembership(() =>
-    fractionalIndex(null, user.documentMemberships[0].index)
+  const [reorderMonitor, dropToReorderRef] = useDropToReorderUserMembership(
+    () => fractionalIndex(null, user.memberships[0].index)
  );

  React.useEffect(() => {
@@ -44,32 +40,29 @@ function SharedWithMe() {
    }
  }, [error, t]);

-  if (
-    !user.documentMemberships.length &&
-    !user.groupsWithDocumentMemberships.length
-  ) {
+  if (!user.memberships.length) {
    return null;
  }

  return (
-    <SidebarContext.Provider value="shared">
+    <SharedContext.Provider value={true}>
      <Flex column>
        <Header id="shared" title={t("Shared with me")}>
-          {user.groupsWithDocumentMemberships.map((group) => (
-            <GroupLink key={group.id} group={group} />
-          ))}
          <Relative>
-            {reorderProps.isDragging && (
+            {reorderMonitor.isDragging && (
              <DropCursor
-                isActiveDrop={reorderProps.isOverCursor}
+                isActiveDrop={reorderMonitor.isOverCursor}
                innerRef={dropToReorderRef}
                position="top"
              />
            )}
-            {user.documentMemberships
+            {user.memberships
              .slice(0, page * Pagination.sidebarLimit)
              .map((membership) => (
-                <SharedWithMeLink key={membership.id} membership={membership} />
+                <SharedWithMeLink
+                  key={membership.id}
+                  userMembership={membership}
+                />
              ))}
            {!end && (
              <SidebarLink
@@ -89,7 +82,7 @@ function SharedWithMe() {
          </Relative>
        </Header>
      </Flex>
-    </SidebarContext.Provider>
+    </SharedContext.Provider>
  );
 }

@@ -1,64 +1,44 @@
 import fractionalIndex from "fractional-index";
-import { Location } from "history";
 import { observer } from "mobx-react";
 import * as React from "react";
 import styled from "styled-components";
 import { IconType, NotificationEventType } from "@shared/types";
 import { determineIconType } from "@shared/utils/icon";
-import GroupMembership from "~/models/GroupMembership";
 import UserMembership from "~/models/UserMembership";
 import Fade from "~/components/Fade";
 import useBoolean from "~/hooks/useBoolean";
 import useStores from "~/hooks/useStores";
 import DocumentMenu from "~/menus/DocumentMenu";
-import {
-  useDragMembership,
-  useDropToReorderUserMembership,
-  useDropToReparentDocument,
-} from "../hooks/useDragAndDrop";
-import { useLocationState } from "../hooks/useLocationState";
-import { useSidebarLabelAndIcon } from "../hooks/useSidebarLabelAndIcon";
 import DocumentLink from "./DocumentLink";
 import DropCursor from "./DropCursor";
 import Folder from "./Folder";
 import Relative from "./Relative";
-import { useSidebarContext, type SidebarContextType } from "./SidebarContext";
 import SidebarLink from "./SidebarLink";
+import {
+  useDragUserMembership,
+  useDropToReorderUserMembership,
+} from "./useDragAndDrop";
+import { useSidebarLabelAndIcon } from "./useSidebarLabelAndIcon";

 type Props = {
-  membership: UserMembership | GroupMembership;
-  depth?: number;
+  userMembership: UserMembership;
 };

-function SharedWithMeLink({ membership, depth = 0 }: Props) {
+function SharedWithMeLink({ userMembership }: Props) {
  const { ui, collections, documents } = useStores();
  const { fetchChildDocuments } = documents;
  const [menuOpen, handleMenuOpen, handleMenuClose] = useBoolean();
-  const { documentId } = membership;
+  const { documentId } = userMembership;
  const isActiveDocument = documentId === ui.activeDocumentId;
-  const locationSidebarContext = useLocationState();
-  const sidebarContext = useSidebarContext();
-  const document = documentId ? documents.get(documentId) : undefined;
-
-  const [expanded, setExpanded, setCollapsed] = useBoolean(
-    membership.documentId === ui.activeDocumentId &&
-      locationSidebarContext === sidebarContext
+  const [expanded, setExpanded] = React.useState(
+    userMembership.documentId === ui.activeDocumentId
  );

  React.useEffect(() => {
-    if (
-      membership.documentId === ui.activeDocumentId &&
-      locationSidebarContext === sidebarContext
-    ) {
-      setExpanded();
+    if (userMembership.documentId === ui.activeDocumentId) {
+      setExpanded(true);
    }
-  }, [
-    membership.documentId,
-    ui.activeDocumentId,
-    sidebarContext,
-    locationSidebarContext,
-    setExpanded,
-  ]);
+  }, [userMembership.documentId, ui.activeDocumentId]);

  React.useEffect(() => {
    if (documentId) {
@@ -67,45 +47,38 @@ function SharedWithMeLink({ membership, depth = 0 }: Props) {
  }, [documentId, documents]);

  React.useEffect(() => {
-    if (isActiveDocument && membership.documentId) {
-      void fetchChildDocuments(membership.documentId);
+    if (isActiveDocument && userMembership.documentId) {
+      void fetchChildDocuments(userMembership.documentId);
    }
-  }, [fetchChildDocuments, isActiveDocument, membership.documentId]);
+  }, [fetchChildDocuments, isActiveDocument, userMembership.documentId]);

  const handleDisclosureClick = React.useCallback(
    (ev: React.MouseEvent<HTMLButtonElement>) => {
      ev.preventDefault();
      ev.stopPropagation();
-      if (expanded) {
-        setCollapsed();
-      } else {
-        setExpanded();
-      }
+      setExpanded((prevExpanded) => !prevExpanded);
    },
-    [expanded, setExpanded, setCollapsed]
+    []
  );

-  const parentRef = React.useRef<HTMLDivElement>(null);
-  const node = React.useMemo(() => document?.asNavigationNode, [document]);
-  const [{ isOverReparent, canDropToReparent }, dropToReparent] =
-    useDropToReparentDocument(node, setExpanded, parentRef);
-
-  const { icon } = useSidebarLabelAndIcon(membership);
-  const [{ isDragging }, draggableRef] = useDragMembership(membership);
+  const { icon } = useSidebarLabelAndIcon(userMembership);
+  const [{ isDragging }, draggableRef] = useDragUserMembership(userMembership);

  const getIndex = () => {
-    if (membership instanceof UserMembership) {
-      const next = membership?.next();
-      return fractionalIndex(membership?.index || null, next?.index || null);
-    }
-    return "";
+    const next = userMembership?.next();
+    return fractionalIndex(userMembership?.index || null, next?.index || null);
  };
-  const [reorderProps, dropToReorderRef] =
+  const [reorderMonitor, dropToReorderRef] =
    useDropToReorderUserMembership(getIndex);

  const displayChildDocuments = expanded && !isDragging;

-  if (document) {
+  if (documentId) {
+    const document = documents.get(documentId);
+    if (!document) {
+      return null;
+    }
+
    const { icon: docIcon } = document;
    const label =
      determineIconType(docIcon) === IconType.Emoji
@@ -121,75 +94,63 @@ function SharedWithMeLink({ membership, depth = 0 }: Props) {

    return (
      <>
-        <Relative ref={parentRef}>
-          <Draggable
-            key={membership.id}
-            ref={draggableRef}
-            $isDragging={isDragging}
-          >
-            <div ref={dropToReparent}>
-              <SidebarLink
-                isActiveDrop={isOverReparent && canDropToReparent}
-                depth={depth}
-                to={{
-                  pathname: document.path,
-                  state: { sidebarContext },
-                }}
-                expanded={
-                  hasChildDocuments && !isDragging ? expanded : undefined
-                }
-                onDisclosureClick={handleDisclosureClick}
-                icon={icon}
-                isActive={(
-                  match,
-                  location: Location<{ sidebarContext?: SidebarContextType }>
-                ) =>
-                  !!match && location.state?.sidebarContext === sidebarContext
-                }
-                label={label}
-                exact={false}
-                unreadBadge={
-                  document.unreadNotifications.filter(
-                    (notification) =>
-                      notification.event ===
-                      NotificationEventType.AddUserToDocument
-                  ).length > 0
-                }
-                showActions={menuOpen}
-                menu={
-                  document && !isDragging ? (
-                    <Fade>
-                      <DocumentMenu
-                        document={document}
-                        onOpen={handleMenuOpen}
-                        onClose={handleMenuClose}
-                      />
-                    </Fade>
-                  ) : undefined
-                }
-              />
-            </div>
-          </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>
-        {reorderProps.isDragging && (
-          <DropCursor
-            isActiveDrop={reorderProps.isOverCursor}
-            innerRef={dropToReorderRef}
+        <Draggable
+          key={userMembership.id}
+          ref={draggableRef}
+          $isDragging={isDragging}
+        >
+          <SidebarLink
+            depth={0}
+            to={{
+              pathname: document.path,
+              state: { starred: true },
+            }}
+            expanded={hasChildDocuments && !isDragging ? expanded : undefined}
+            onDisclosureClick={handleDisclosureClick}
+            icon={icon}
+            label={label}
+            exact={false}
+            unreadBadge={
+              document.unreadNotifications.filter(
+                (notification) =>
+                  notification.event === NotificationEventType.AddUserToDocument
+              ).length > 0
+            }
+            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>
+          {reorderMonitor.isDragging && (
+            <DropCursor
+              isActiveDrop={reorderMonitor.isOverCursor}
+              innerRef={dropToReorderRef}
+            />
+          )}
+        </Relative>
      </>
    );
  }
@@ -1,9 +0,0 @@
-import * as React from "react";
-
-export type SidebarContextType = "collections" | "starred" | string | undefined;
-
-const SidebarContext = React.createContext<SidebarContextType>(undefined);
-
-export const useSidebarContext = () => React.useContext(SidebarContext);
-
-export default SidebarContext;
@@ -14,6 +14,7 @@ import NavLink, { Props as NavLinkProps } from "./NavLink";

 export type DragObject = NavigationNode & {
  depth: number;
+  active: boolean;
  collectionId: string;
 };

@@ -7,17 +7,14 @@ import DelayedMount from "~/components/DelayedMount";
 import Flex from "~/components/Flex";
 import usePaginatedRequest from "~/hooks/usePaginatedRequest";
 import useStores from "~/hooks/useStores";
-import {
-  useDropToCreateStar,
-  useDropToReorderStar,
-} from "../hooks/useDragAndDrop";
 import DropCursor from "./DropCursor";
 import Header from "./Header";
 import PlaceholderCollections from "./PlaceholderCollections";
 import Relative from "./Relative";
-import SidebarContext from "./SidebarContext";
 import SidebarLink from "./SidebarLink";
+import StarredContext from "./StarredContext";
 import StarredLink from "./StarredLink";
+import { useDropToCreateStar, useDropToReorderStar } from "./useDragAndDrop";

 const STARRED_PAGINATION_LIMIT = 10;

@@ -28,8 +25,8 @@ function Starred() {
  const { loading, next, end, error, page } = usePaginatedRequest<Star>(
    stars.fetchPage
  );
-  const [reorderStarProps, dropToReorder] = useDropToReorderStar();
-  const [createStarProps, dropToStarRef] = useDropToCreateStar();
+  const [reorderStarMonitor, dropToReorder] = useDropToReorderStar();
+  const [createStarMonitor, dropToStarRef] = useDropToCreateStar();

  React.useEffect(() => {
    if (error) {
@@ -42,20 +39,20 @@ function Starred() {
  }

  return (
-    <SidebarContext.Provider value="starred">
+    <StarredContext.Provider value={true}>
      <Flex column>
        <Header id="starred" title={t("Starred")}>
          <Relative>
-            {reorderStarProps.isDragging && (
+            {reorderStarMonitor.isDragging && (
              <DropCursor
-                isActiveDrop={reorderStarProps.isOverCursor}
+                isActiveDrop={reorderStarMonitor.isOverCursor}
                innerRef={dropToReorder}
                position="top"
              />
            )}
-            {createStarProps.isDragging && (
+            {createStarMonitor.isDragging && (
              <DropCursor
-                isActiveDrop={createStarProps.isOverCursor}
+                isActiveDrop={createStarMonitor.isOverCursor}
                innerRef={dropToStarRef}
                position="top"
              />
@@ -83,7 +80,7 @@ function Starred() {
          </Relative>
        </Header>
      </Flex>
-    </SidebarContext.Provider>
+    </StarredContext.Provider>
  );
 }

@@ -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;
@@ -4,61 +4,54 @@ import { observer } from "mobx-react";
 import { StarredIcon } from "outline-icons";
 import * as React from "react";
 import { useEffect, useState } from "react";
+import { useLocation } from "react-router-dom";
 import styled, { useTheme } from "styled-components";
 import Star from "~/models/Star";
 import Fade from "~/components/Fade";
 import useBoolean from "~/hooks/useBoolean";
 import useStores from "~/hooks/useStores";
 import DocumentMenu from "~/menus/DocumentMenu";
-import {
-  useDragStar,
-  useDropToCreateStar,
-  useDropToReorderStar,
-} from "../hooks/useDragAndDrop";
-import { useLocationState } from "../hooks/useLocationState";
-import { useSidebarLabelAndIcon } from "../hooks/useSidebarLabelAndIcon";
 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 SidebarContext, {
-  SidebarContextType,
-  useSidebarContext,
-} from "./SidebarContext";
 import SidebarLink from "./SidebarLink";
+import {
+  useDragStar,
+  useDropToCreateStar,
+  useDropToReorderStar,
+} from "./useDragAndDrop";
+import { useSidebarLabelAndIcon } from "./useSidebarLabelAndIcon";

 type Props = {
  star: Star;
 };

+function useLocationStateStarred() {
+  const location = useLocation<{
+    starred?: boolean;
+  }>();
+  return location.state?.starred;
+}
+
 function StarredLink({ star }: Props) {
  const theme = useTheme();
  const { ui, collections, documents } = useStores();
  const [menuOpen, handleMenuOpen, handleMenuClose] = useBoolean();
  const { documentId, collectionId } = star;
  const collection = collections.get(collectionId);
-  const locationSidebarContext = useLocationState();
-  const sidebarContext = useSidebarContext();
+  const locationStateStarred = useLocationStateStarred();
  const [expanded, setExpanded] = useState(
-    star.collectionId === ui.activeCollectionId &&
-      sidebarContext === locationSidebarContext
+    star.collectionId === ui.activeCollectionId && !!locationStateStarred
  );

  React.useEffect(() => {
-    if (
-      star.collectionId === ui.activeCollectionId &&
-      sidebarContext === locationSidebarContext
-    ) {
+    if (star.collectionId === ui.activeCollectionId && locationStateStarred) {
      setExpanded(true);
    }
-  }, [
-    star.collectionId,
-    ui.activeCollectionId,
-    sidebarContext,
-    locationSidebarContext,
-  ]);
+  }, [star.collectionId, ui.activeCollectionId, locationStateStarred]);

  useEffect(() => {
    if (documentId) {
@@ -84,22 +77,22 @@ function StarredLink({ star }: Props) {
    <StarredIcon color={theme.yellow} />
  );
  const [{ isDragging }, draggableRef] = useDragStar(star);
-  const [reorderStarProps, dropToReorderRef] = useDropToReorderStar(getIndex);
-  const [createStarProps, dropToStarRef] = useDropToCreateStar(getIndex);
+  const [reorderStarMonitor, dropToReorderRef] = useDropToReorderStar(getIndex);
+  const [createStarMonitor, dropToStarRef] = useDropToCreateStar(getIndex);

  const displayChildDocuments = expanded && !isDragging;

  const cursor = (
    <>
-      {reorderStarProps.isDragging && (
+      {reorderStarMonitor.isDragging && (
        <DropCursor
-          isActiveDrop={reorderStarProps.isOverCursor}
+          isActiveDrop={reorderStarMonitor.isOverCursor}
          innerRef={dropToReorderRef}
        />
      )}
-      {createStarProps.isDragging && (
+      {createStarMonitor.isDragging && (
        <DropCursor
-          isActiveDrop={createStarProps.isOverCursor}
+          isActiveDrop={createStarMonitor.isOverCursor}
          innerRef={dropToStarRef}
        />
      )}
@@ -116,7 +109,7 @@ function StarredLink({ star }: Props) {
      ? collections.get(document.collectionId)
      : undefined;
    const childDocuments = collection
-      ? collection.getChildrenForDocument(documentId)
+      ? collection.getDocumentChildren(documentId)
      : [];
    const hasChildDocuments = childDocuments.length > 0;

@@ -127,15 +120,14 @@ function StarredLink({ star }: Props) {
            depth={0}
            to={{
              pathname: document.url,
-              state: { sidebarContext },
+              state: { starred: true },
            }}
            expanded={hasChildDocuments && !isDragging ? expanded : undefined}
            onDisclosureClick={handleDisclosureClick}
            icon={icon}
-            isActive={(
-              match,
-              location: Location<{ sidebarContext?: SidebarContextType }>
-            ) => !!match && location.state?.sidebarContext === sidebarContext}
+            isActive={(match, location: Location<{ starred?: boolean }>) =>
+              !!match && location.state?.starred === true
+            }
            label={label}
            exact={false}
            showActions={menuOpen}
@@ -152,24 +144,22 @@ function StarredLink({ star }: Props) {
            }
          />
        </Draggable>
-        <SidebarContext.Provider value={document.id}>
-          <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>
-            {cursor}
-          </Relative>
-        </SidebarContext.Provider>
+        <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>
+          {cursor}
+        </Relative>
      </>
    );
  }
@@ -183,18 +173,16 @@ function StarredLink({ star }: Props) {
            expanded={isDragging ? undefined : displayChildDocuments}
            activeDocument={documents.active}
            onDisclosureClick={handleDisclosureClick}
-            isDraggingAnyCollection={reorderStarProps.isDragging}
+            isDraggingAnyCollection={reorderStarMonitor.isDragging}
          />
        </Draggable>
-        <SidebarContext.Provider value={collection.id}>
-          <Relative>
-            <CollectionLinkChildren
-              collection={collection}
-              expanded={displayChildDocuments}
-            />
-            {cursor}
-          </Relative>
-        </SidebarContext.Provider>
+        <Relative>
+          <CollectionLinkChildren
+            collection={collection}
+            expanded={displayChildDocuments}
+          />
+          {cursor}
+        </Relative>
      </>
    );
  }
@@ -1,36 +1,29 @@
 import { observer } from "mobx-react";
 import { TrashIcon } from "outline-icons";
 import * as React from "react";
+import { useState } from "react";
 import { useDrop } from "react-dnd";
 import { useTranslation } from "react-i18next";
+import Document from "~/models/Document";
 import DocumentDelete from "~/scenes/DocumentDelete";
+import Modal from "~/components/Modal";
 import useStores from "~/hooks/useStores";
 import { trashPath } from "~/utils/routeHelpers";
 import SidebarLink, { DragObject } from "./SidebarLink";

 function TrashLink() {
-  const { policies, dialogs, documents } = useStores();
+  const { policies, documents } = useStores();
  const { t } = useTranslation();
+  const [document, setDocument] = useState<Document>();

-  const [{ isDocumentDropping }, dropToTrashRef] = useDrop({
+  const [{ isDocumentDropping }, dropToTrashDocument] = useDrop({
    accept: "document",
-    drop: async (item: DragObject) => {
-      const document = documents.get(item.id);
-      if (!document) {
-        return;
-      }
+    drop: (item: DragObject) => {
+      const doc = documents.get(item.id);

-      dialogs.openModal({
-        title: t("Delete {{ documentName }}", {
-          documentName: document?.noun,
-        }),
-        content: (
-          <DocumentDelete
-            document={document}
-            onSubmit={dialogs.closeAllModals}
-          />
-        ),
-      });
+      // without setTimeout it was not working in firefox v89.0.2-ubuntu
+      // on dropping mouseup is considered as clicking outside the modal, and it immediately closes
+      setTimeout(() => doc && setDocument(doc), 1);
    },
    canDrop: (item) => policies.abilities(item.id).delete,
    collect: (monitor) => ({
@@ -39,16 +32,32 @@ function TrashLink() {
  });

  return (
-    <div ref={dropToTrashRef}>
-      <SidebarLink
-        to={trashPath()}
-        icon={<TrashIcon open={isDocumentDropping} />}
-        exact={false}
-        label={t("Trash")}
-        active={documents.active?.isDeleted}
-        isActiveDrop={isDocumentDropping}
-      />
-    </div>
+    <>
+      <div ref={dropToTrashDocument}>
+        <SidebarLink
+          to={trashPath()}
+          icon={<TrashIcon open={isDocumentDropping} />}
+          exact={false}
+          label={t("Trash")}
+          active={documents.active?.isDeleted}
+          isActiveDrop={isDocumentDropping}
+        />
+      </div>
+      {document && (
+        <Modal
+          title={t("Delete {{ documentName }}", {
+            documentName: document.noun,
+          })}
+          onRequestClose={() => setDocument(undefined)}
+          isOpen
+        >
+          <DocumentDelete
+            document={document}
+            onSubmit={() => setDocument(undefined)}
+          />
+        </Modal>
+      )}
+    </>
  );
 }

@@ -0,0 +1,141 @@
+import fractionalIndex from "fractional-index";
+import { StarredIcon } from "outline-icons";
+import * as React from "react";
+import { ConnectDragSource, useDrag, useDrop } from "react-dnd";
+import { getEmptyImage } from "react-dnd-html5-backend";
+import { useTheme } from "styled-components";
+import Star from "~/models/Star";
+import UserMembership from "~/models/UserMembership";
+import useCurrentUser from "~/hooks/useCurrentUser";
+import useStores from "~/hooks/useStores";
+import { DragObject } from "./SidebarLink";
+import { useSidebarLabelAndIcon } from "./useSidebarLabelAndIcon";
+
+/**
+ * Hook for shared logic that allows dragging a Starred item
+ *
+ * @param star The related Star model.
+ */
+export function useDragStar(
+  star: Star
+): [{ isDragging: boolean }, ConnectDragSource] {
+  const id = star.id;
+  const theme = useTheme();
+  const { label: title, icon } = useSidebarLabelAndIcon(
+    star,
+    <StarredIcon color={theme.yellow} />
+  );
+  const [{ isDragging }, draggableRef, preview] = useDrag({
+    type: "star",
+    item: () => ({ id, title, icon }),
+    collect: (monitor) => ({
+      isDragging: !!monitor.isDragging(),
+    }),
+    canDrag: () => true,
+  });
+
+  React.useEffect(() => {
+    preview(getEmptyImage(), { captureDraggingState: true });
+  }, [preview]);
+
+  return [{ isDragging }, draggableRef];
+}
+
+/**
+ * Hook for shared logic that allows dropping documents and collections to create a star
+ *
+ * @param getIndex A function to get the index of the current item where the star should be inserted.
+ */
+export function useDropToCreateStar(getIndex?: () => string) {
+  const { documents, stars, collections } = useStores();
+
+  return useDrop({
+    accept: ["document", "collection"],
+    drop: async (item: DragObject) => {
+      const model = documents.get(item.id) ?? collections?.get(item.id);
+      await model?.star(
+        getIndex?.() ?? fractionalIndex(null, stars.orderedData[0].index)
+      );
+    },
+    collect: (monitor) => ({
+      isOverCursor: !!monitor.isOver(),
+      isDragging: ["document", "collection"].includes(
+        String(monitor.getItemType())
+      ),
+    }),
+  });
+}
+
+/**
+ * Hook for shared logic that allows dropping stars to reorder
+ *
+ * @param getIndex A function to get the index of the current item where the star should be inserted.
+ */
+export function useDropToReorderStar(getIndex?: () => string) {
+  const { stars } = useStores();
+
+  return useDrop({
+    accept: "star",
+    drop: async (item: DragObject) => {
+      const star = stars.get(item.id);
+      void star?.save({
+        index:
+          getIndex?.() ?? fractionalIndex(null, stars.orderedData[0].index),
+      });
+    },
+    collect: (monitor) => ({
+      isOverCursor: !!monitor.isOver(),
+      isDragging: monitor.getItemType() === "star",
+    }),
+  });
+}
+
+export function useDragUserMembership(
+  userMembership: UserMembership
+): [{ isDragging: boolean }, ConnectDragSource] {
+  const id = userMembership.id;
+  const { label: title, icon } = useSidebarLabelAndIcon(userMembership);
+
+  const [{ isDragging }, draggableRef, preview] = useDrag({
+    type: "userMembership",
+    item: () => ({
+      id,
+      title,
+      icon,
+    }),
+    collect: (monitor) => ({
+      isDragging: !!monitor.isDragging(),
+    }),
+    canDrag: () => true,
+  });
+
+  React.useEffect(() => {
+    preview(getEmptyImage(), { captureDraggingState: true });
+  }, [preview]);
+
+  return [{ isDragging }, draggableRef];
+}
+
+/**
+ * Hook for shared logic that allows dropping user memberships to reorder
+ *
+ * @param getIndex A function to get the index of the current item where the membership should be inserted.
+ */
+export function useDropToReorderUserMembership(getIndex?: () => string) {
+  const { userMemberships } = useStores();
+  const user = useCurrentUser();
+
+  return useDrop({
+    accept: "userMembership",
+    drop: async (item: DragObject) => {
+      const userMembership = userMemberships.get(item.id);
+      void userMembership?.save({
+        index: getIndex?.() ?? fractionalIndex(null, user.memberships[0].index),
+      });
+    },
+    collect: (monitor) => ({
+      isOverCursor: !!monitor.isOver(),
+      isDragging: monitor.getItemType() === "userMembership",
+    }),
+  });
+}
@@ -1,429 +0,0 @@
-import fractionalIndex from "fractional-index";
-import { StarredIcon } from "outline-icons";
-import * as React from "react";
-import { ConnectDragSource, useDrag, useDrop } from "react-dnd";
-import { getEmptyImage } from "react-dnd-html5-backend";
-import { useTranslation } from "react-i18next";
-import { toast } from "sonner";
-import { useTheme } from "styled-components";
-import { NavigationNode } from "@shared/types";
-import Collection from "~/models/Collection";
-import Document from "~/models/Document";
-import GroupMembership from "~/models/GroupMembership";
-import Star from "~/models/Star";
-import UserMembership from "~/models/UserMembership";
-import ConfirmMoveDialog from "~/components/ConfirmMoveDialog";
-import Icon from "~/components/Icon";
-import useCurrentUser from "~/hooks/useCurrentUser";
-import useStores from "~/hooks/useStores";
-import { DragObject } from "../components/SidebarLink";
-import { useSidebarLabelAndIcon } from "./useSidebarLabelAndIcon";
-
-/**
- * Hook for shared logic that allows dragging a Starred item
- *
- * @param star The related Star model.
- */
-export function useDragStar(
-  star: Star
-): [{ isDragging: boolean }, ConnectDragSource] {
-  const id = star.id;
-  const theme = useTheme();
-  const { label: title, icon } = useSidebarLabelAndIcon(
-    star,
-    <StarredIcon color={theme.yellow} />
-  );
-  const [{ isDragging }, draggableRef, preview] = useDrag({
-    type: "star",
-    item: () => ({ id, title, icon }),
-    collect: (monitor) => ({
-      isDragging: !!monitor.isDragging(),
-    }),
-  });
-
-  React.useEffect(() => {
-    preview(getEmptyImage(), { captureDraggingState: true });
-  }, [preview]);
-
-  return [{ isDragging }, draggableRef];
-}
-
-/**
- * Hook for shared logic that allows dropping documents and collections to create a star
- *
- * @param getIndex A function to get the index of the current item where the star should be inserted.
- */
-export function useDropToCreateStar(getIndex?: () => string) {
-  const accept = [
-    "document",
-    "collection",
-    "userMembership",
-    "groupMembership",
-  ];
-  const { documents, stars, collections, userMemberships, groupMemberships } =
-    useStores();
-
-  return useDrop<
-    DragObject,
-    Promise<void>,
-    { isOverCursor: boolean; isDragging: boolean }
-  >({
-    accept,
-    drop: async (item, monitor) => {
-      const type = monitor.getItemType();
-      let model;
-
-      if (type === "collection") {
-        model = collections.get(item.id);
-      } else if (type === "userMembership") {
-        model = userMemberships.get(item.id)?.document;
-      } else if (type === "groupMembership") {
-        model = groupMemberships.get(item.id)?.document;
-      } else {
-        model = documents.get(item.id);
-      }
-      await model?.star(
-        getIndex?.() ?? fractionalIndex(null, stars.orderedData[0].index)
-      );
-    },
-    collect: (monitor) => ({
-      isOverCursor: !!monitor.isOver(),
-      isDragging: accept.includes(String(monitor.getItemType())),
-    }),
-  });
-}
-
-/**
- * Hook for shared logic that allows dropping stars to reorder
- *
- * @param getIndex A function to get the index of the current item where the star should be inserted.
- */
-export function useDropToReorderStar(getIndex?: () => string) {
-  const { stars } = useStores();
-
-  return useDrop<
-    DragObject,
-    Promise<void>,
-    { isOverCursor: boolean; isDragging: boolean }
-  >({
-    accept: "star",
-    drop: async (item) => {
-      const star = stars.get(item.id);
-      void star?.save({
-        index:
-          getIndex?.() ?? fractionalIndex(null, stars.orderedData[0].index),
-      });
-    },
-    collect: (monitor) => ({
-      isOverCursor: !!monitor.isOver(),
-      isDragging: monitor.getItemType() === "star",
-    }),
-  });
-}
-
-/**
- * Hook for shared logic that allows dragging documents.
- *
- * @param node The NavigationNode model to drag.
- * @param depth The depth of the node in the sidebar.
- * @param document The related Document model.
- */
-export function useDragDocument(
-  node: NavigationNode,
-  depth: number,
-  document?: Document
-) {
-  const icon = document?.icon || node.icon || node.emoji;
-  const color = document?.color || node.color;
-
-  const [{ isDragging }, draggableRef, preview] = useDrag<
-    DragObject,
-    Promise<void>,
-    { isDragging: boolean }
-  >({
-    type: "document",
-    item: () =>
-      ({
-        ...node,
-        depth,
-        icon: icon ? <Icon value={icon} color={color} /> : undefined,
-        collectionId: document?.collectionId || "",
-      } as DragObject),
-    collect: (monitor) => ({
-      isDragging: monitor.isDragging(),
-    }),
-  });
-
-  React.useEffect(() => {
-    preview(getEmptyImage(), { captureDraggingState: true });
-  }, [preview]);
-
-  return [{ isDragging }, draggableRef] as const;
-}
-
-/**
- * Hook for shared logic that allows dropping documents to reparent
- *
- * @param node The NavigationNode model to drop.
- * @param setExpanded A function to expand the parent node.
- * @param parentRef A ref to the parent element that will be used to detect when the user is no longer hovering..
- */
-export function useDropToReparentDocument(
-  node: NavigationNode | undefined,
-  setExpanded: () => void,
-  parentRef: React.RefObject<HTMLDivElement>
-) {
-  const { t } = useTranslation();
-  const { documents, collections, dialogs, policies } = useStores();
-  const hasChildDocuments = !!node?.children.length;
-  const document = node ? documents.get(node.id) : undefined;
-  const pathToNode = React.useMemo(
-    () => document?.pathTo.map((item) => item.id),
-    [document]
-  );
-
-  const hoverExpanding = React.useRef<ReturnType<typeof setTimeout>>();
-
-  // We set a timeout when the user first starts hovering over the document link,
-  // to trigger expansion of children. Clear this timeout when they stop hovering.
-  React.useEffect(() => {
-    const resetHoverExpanding = () => {
-      if (hoverExpanding.current) {
-        clearTimeout(hoverExpanding.current);
-        hoverExpanding.current = undefined;
-      }
-    };
-
-    const element = parentRef.current;
-    element?.addEventListener("dragleave", resetHoverExpanding);
-
-    return () => {
-      element?.removeEventListener("dragleave", resetHoverExpanding);
-    };
-  }, [parentRef]);
-
-  return useDrop<
-    DragObject,
-    Promise<void>,
-    { isOverReparent: boolean; canDropToReparent: boolean }
-  >({
-    accept: "document",
-    drop: async (item, monitor) => {
-      if (monitor.didDrop() || !node) {
-        return;
-      }
-
-      const collection = documents.get(node.id)?.collection;
-      const prevCollection = collections.get(item.collectionId);
-
-      if (
-        collection &&
-        prevCollection &&
-        prevCollection.permission !== collection.permission
-      ) {
-        dialogs.openModal({
-          title: t("Change permissions?"),
-          content: (
-            <ConfirmMoveDialog
-              item={item}
-              collection={collection}
-              parentDocumentId={node.id}
-            />
-          ),
-        });
-      } else {
-        await documents.move({
-          documentId: item.id,
-          parentDocumentId: node.id,
-        });
-      }
-
-      setExpanded();
-    },
-    canDrop: (item, monitor) =>
-      !!node &&
-      !!pathToNode &&
-      !pathToNode.includes(monitor.getItem().id) &&
-      item.id !== node.id &&
-      policies.abilities(node.id).update &&
-      policies.abilities(item.id).move,
-    hover: (_item, monitor) => {
-      // Enables expansion of document children when hovering over the document
-      // for more than half a second.
-      if (
-        hasChildDocuments &&
-        monitor.canDrop() &&
-        monitor.isOver({
-          shallow: true,
-        })
-      ) {
-        if (!hoverExpanding.current) {
-          hoverExpanding.current = setTimeout(() => {
-            hoverExpanding.current = undefined;
-
-            if (monitor.isOver({ shallow: true })) {
-              setExpanded();
-            }
-          }, 500);
-        }
-      }
-    },
-    collect: (monitor) => ({
-      isOverReparent: monitor.isOver({ shallow: true }),
-      canDropToReparent: monitor.canDrop(),
-    }),
-  });
-}
-
-/**
- * Hook for shared logic that allows dropping documents to reorder
- *
- * @param node The NavigationNode model to drop.
- * @param collection The related Collection model, if published
- * @param getMoveParams A function to get the move parameters for the document.
- */
-export function useDropToReorderDocument(
-  node: NavigationNode,
-  collection: Collection | undefined,
-  getMoveParams: (item: DragObject) =>
-    | undefined
-    | {
-        documentId: string;
-        collectionId: string;
-        parentDocumentId: string | undefined;
-        index: number;
-      }
-) {
-  const { t } = useTranslation();
-  const { documents, collections, dialogs, policies } = useStores();
-
-  return useDrop<
-    DragObject,
-    Promise<void>,
-    { isOverReorder: boolean; isDraggingAnyDocument: boolean }
-  >({
-    accept: "document",
-    canDrop: (item: DragObject) => {
-      if (item.id === node.id || !policies.abilities(item.id)?.move) {
-        return false;
-      }
-
-      const params = getMoveParams(item);
-      if (params?.collectionId) {
-        return policies.abilities(params.collectionId)?.updateDocument;
-      }
-      if (params?.parentDocumentId) {
-        return policies.abilities(params.parentDocumentId)?.update;
-      }
-
-      return true;
-    },
-    drop: async (item) => {
-      if (!collection?.isManualSort && item.collectionId === collection?.id) {
-        toast.message(
-          t(
-            "You can't reorder documents in an alphabetically sorted collection"
-          )
-        );
-        return;
-      }
-
-      const params = getMoveParams(item);
-
-      if (params) {
-        const prevCollection = collections.get(item.collectionId);
-
-        if (
-          collection &&
-          prevCollection &&
-          prevCollection.permission !== collection.permission
-        ) {
-          dialogs.openModal({
-            title: t("Change permissions?"),
-            content: (
-              <ConfirmMoveDialog
-                item={item}
-                collection={collection}
-                {...params}
-              />
-            ),
-          });
-        } else {
-          void documents.move(params);
-        }
-      }
-    },
-    collect: (monitor) => ({
-      isOverReorder: monitor.isOver(),
-      isDraggingAnyDocument: monitor.canDrop(),
-    }),
-  });
-}
-
-/**
- * Hook for shared logic that allows dragging user memberships.
- *
- * @param membership The UserMembership or GroupMembership model to drag.
- */
-export function useDragMembership(
-  membership: UserMembership | GroupMembership
-) {
-  const id = membership.id;
-  const { label: title, icon } = useSidebarLabelAndIcon(membership);
-
-  const [{ isDragging }, draggableRef, preview] = useDrag<
-    DragObject,
-    Promise<void>,
-    { isDragging: boolean }
-  >({
-    type:
-      membership instanceof UserMembership
-        ? "userMembership"
-        : "groupMembership",
-    item: () =>
-      ({
-        id,
-        title,
-        icon,
-      } as DragObject),
-    collect: (monitor) => ({
-      isDragging: !!monitor.isDragging(),
-    }),
-  });
-
-  React.useEffect(() => {
-    preview(getEmptyImage(), { captureDraggingState: true });
-  }, [preview]);
-
-  return [{ isDragging }, draggableRef] as const;
-}
-
-/**
- * Hook for shared logic that allows dropping user memberships to reorder
- *
- * @param getIndex A function to get the index of the current item where the membership should be inserted.
- */
-export function useDropToReorderUserMembership(getIndex?: () => string) {
-  const { userMemberships } = useStores();
-  const user = useCurrentUser();
-
-  return useDrop<
-    DragObject,
-    Promise<void>,
-    { isOverCursor: boolean; isDragging: boolean }
-  >({
-    accept: "userMembership",
-    drop: async (item) => {
-      const userMembership = userMemberships.get(item.id);
-      void userMembership?.save({
-        index:
-          getIndex?.() ??
-          fractionalIndex(null, user.documentMemberships[0].index),
-      });
-    },
-    collect: (monitor) => ({
-      isOverCursor: !!monitor.isOver(),
-      isDragging: monitor.getItemType() === "userMembership",
-    }),
-  });
-}
@@ -1,12 +0,0 @@
-import { useLocation } from "react-router-dom";
-import { SidebarContextType } from "../components/SidebarContext";
-
-/**
- * Hook to retrieve the sidebar context from the current location state.
- */
-export function useLocationState() {
-  const location = useLocation<{
-    sidebarContext?: SidebarContextType;
-  }>();
-  return location.state?.sidebarContext;
-}
@@ -1,7 +1,7 @@
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useHistory, useLocation } from "react-router-dom";
-import scrollIntoView from "scroll-into-view-if-needed";
+import scrollIntoView from "smooth-scroll-into-view-if-needed";
 import useQuery from "~/hooks/useQuery";
 import lazyWithRetry from "~/utils/lazyWithRetry";
 import type { Props } from "./Table";
@@ -1,6 +1,6 @@
 import styled from "styled-components";
 import { s } from "@shared/styles";
-import { Avatar } from "./Avatar";
+import Avatar from "./Avatar";

 const TeamLogo = styled(Avatar)`
  border-radius: 4px;
--- a/Show More
+++ b/Show More