clear secret

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>

.circleci/config.yml

@@ -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

Dockerfile

@@ -20,6 +20,11 @@ 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 && \
@@ -36,5 +41,7 @@ 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"]

Dockerfile.base

@@ -6,10 +6,6 @@ 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
 
@@ -23,4 +19,3 @@ 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

LICENSE

@@ -3,8 +3,8 @@ Business Source License 1.1
 Parameters
 
 Licensor:             General Outline, Inc.
-Licensed Work:        Outline 0.71.0
-                      The Licensed Work is (c) 2020 General Outline, Inc.
+Licensed Work:        Outline 0.80.2
+                      The Licensed Work is (c) 2024 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:          2027-08-18
+Change Date:          2028-09-26
 
 Change License:       Apache License, Version 2.0
 

app.json

@@ -3,7 +3,13 @@
   "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": {
@@ -212,4 +218,4 @@
       "required": false
     }
   }
-}
+}

app/actions/definitions/collections.tsx

@@ -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 { CollectionSection } from "~/actions/sections";
+import { ActiveCollectionSection, CollectionSection } from "~/actions/sections";
 import { setPersistedState } from "~/hooks/usePersistedState";
 import history from "~/utils/history";
 import { newTemplatePath, searchPath } from "~/utils/routeHelpers";
@@ -70,9 +70,9 @@ export const editCollection = createAction({
   name: ({ t, isContextMenu }) =>
     isContextMenu ? `${t("Edit")}…` : t("Edit collection"),
   analyticsName: "Edit collection",
-  section: CollectionSection,
+  section: ActiveCollectionSection,
   icon: <EditIcon />,
-  visible: ({ stores, activeCollectionId }) =>
+  visible: ({ activeCollectionId }) =>
     !!activeCollectionId &&
     stores.policies.abilities(activeCollectionId).update,
   perform: ({ t, activeCollectionId }) => {
@@ -96,12 +96,12 @@ export const editCollectionPermissions = createAction({
   name: ({ t, isContextMenu }) =>
     isContextMenu ? `${t("Permissions")}…` : t("Collection permissions"),
   analyticsName: "Collection permissions",
-  section: CollectionSection,
+  section: ActiveCollectionSection,
   icon: <PadlockIcon />,
-  visible: ({ stores, activeCollectionId }) =>
+  visible: ({ activeCollectionId }) =>
     !!activeCollectionId &&
     stores.policies.abilities(activeCollectionId).update,
-  perform: ({ t, stores, activeCollectionId }) => {
+  perform: ({ t, activeCollectionId }) => {
     if (!activeCollectionId) {
       return;
     }
@@ -127,7 +127,7 @@ export const editCollectionPermissions = createAction({
 export const searchInCollection = createAction({
   name: ({ t }) => t("Search in collection"),
   analyticsName: "Search collection",
-  section: CollectionSection,
+  section: ActiveCollectionSection,
   icon: <SearchIcon />,
   visible: ({ activeCollectionId }) =>
     !!activeCollectionId &&
@@ -140,10 +140,10 @@ export const searchInCollection = createAction({
 export const starCollection = createAction({
   name: ({ t }) => t("Star"),
   analyticsName: "Star collection",
-  section: CollectionSection,
+  section: ActiveCollectionSection,
   icon: <StarredIcon />,
   keywords: "favorite bookmark",
-  visible: ({ activeCollectionId, stores }) => {
+  visible: ({ activeCollectionId }) => {
     if (!activeCollectionId) {
       return false;
     }
@@ -153,7 +153,7 @@ export const starCollection = createAction({
       stores.policies.abilities(activeCollectionId).star
     );
   },
-  perform: async ({ activeCollectionId, stores }) => {
+  perform: async ({ activeCollectionId }) => {
     if (!activeCollectionId) {
       return;
     }
@@ -167,10 +167,10 @@ export const starCollection = createAction({
 export const unstarCollection = createAction({
   name: ({ t }) => t("Unstar"),
   analyticsName: "Unstar collection",
-  section: CollectionSection,
+  section: ActiveCollectionSection,
   icon: <UnstarredIcon />,
   keywords: "unfavorite unbookmark",
-  visible: ({ activeCollectionId, stores }) => {
+  visible: ({ activeCollectionId }) => {
     if (!activeCollectionId) {
       return false;
     }
@@ -180,7 +180,7 @@ export const unstarCollection = createAction({
       stores.policies.abilities(activeCollectionId).unstar
     );
   },
-  perform: async ({ activeCollectionId, stores }) => {
+  perform: async ({ activeCollectionId }) => {
     if (!activeCollectionId) {
       return;
     }
@@ -193,16 +193,16 @@ export const unstarCollection = createAction({
 export const deleteCollection = createAction({
   name: ({ t }) => `${t("Delete")}…`,
   analyticsName: "Delete collection",
-  section: CollectionSection,
+  section: ActiveCollectionSection,
   dangerous: true,
   icon: <TrashIcon />,
-  visible: ({ activeCollectionId, stores }) => {
+  visible: ({ activeCollectionId }) => {
     if (!activeCollectionId) {
       return false;
     }
     return stores.policies.abilities(activeCollectionId).delete;
   },
-  perform: ({ activeCollectionId, stores, t }) => {
+  perform: ({ activeCollectionId, t }) => {
     if (!activeCollectionId) {
       return;
     }
@@ -227,10 +227,10 @@ export const deleteCollection = createAction({
 export const createTemplate = createAction({
   name: ({ t }) => t("New template"),
   analyticsName: "New template",
-  section: CollectionSection,
+  section: ActiveCollectionSection,
   icon: <ShapesIcon />,
   keywords: "new create template",
-  visible: ({ activeCollectionId, stores }) =>
+  visible: ({ activeCollectionId }) =>
     !!(
       !!activeCollectionId &&
       stores.policies.abilities(activeCollectionId).createDocument

app/actions/definitions/dataAttributes.tsx

@@ -1,25 +0,0 @@
-import { PlusIcon } from "outline-icons";
-import * as React from "react";
-import stores from "~/stores";
-import { DataAttributeNew } from "~/components/DataAttribute/DataAttributeNew";
-import { createAction } from "..";
-import { SettingsSection } from "../sections";
-
-export const createDataAttribute = createAction({
-  name: ({ t }) => t("New attribute"),
-  analyticsName: "New attribute",
-  section: SettingsSection,
-  icon: <PlusIcon />,
-  keywords: "create",
-  visible: () =>
-    stores.policies.abilities(stores.auth.team?.id || "").createDataAttribute,
-  perform: ({ t, event }) => {
-    event?.preventDefault();
-    event?.stopPropagation();
-
-    stores.dialogs.openModal({
-      title: t("New attribute"),
-      content: <DataAttributeNew onSubmit={stores.dialogs.closeAllModals} />,
-    });
-  },
-});

app/actions/definitions/documents.tsx

@@ -24,25 +24,37 @@ import {
   UnpublishIcon,
   PublishIcon,
   CommentIcon,
-  GlobeIcon,
   CopyIcon,
   EyeIcon,
+  PadlockIcon,
+  GlobeIcon,
 } from "outline-icons";
 import * as React from "react";
 import { toast } from "sonner";
-import { ExportContentType, TeamPreference } from "@shared/types";
+import {
+  ExportContentType,
+  TeamPreference,
+  NavigationNode,
+} 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 { DocumentSection, TrashSection } from "~/actions/sections";
+import {
+  ActiveDocumentSection,
+  DocumentSection,
+  TrashSection,
+} from "~/actions/sections";
 import env from "~/env";
 import { setPersistedState } from "~/hooks/usePersistedState";
 import history from "~/utils/history";
@@ -66,23 +78,24 @@ export const openDocument = createAction({
   keywords: "go to",
   icon: <DocumentIcon />,
   children: ({ stores }) => {
-    const paths = stores.collections.pathsToDocuments;
+    const nodes = stores.collections.navigationNodes.reduce(
+      (acc, node) => [...acc, ...node.children],
+      [] as NavigationNode[]
+    );
 
-    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),
-      }));
+    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),
+    }));
   },
 });
 
@@ -104,9 +117,9 @@ export const createDocument = createAction({
       !!currentTeamId && stores.policies.abilities(currentTeamId).createDocument
     );
   },
-  perform: ({ activeCollectionId, inStarredSection }) =>
+  perform: ({ activeCollectionId, sidebarContext }) =>
     history.push(newDocumentPath(activeCollectionId), {
-      starred: inStarredSection,
+      sidebarContext,
     }),
 });
 
@@ -121,11 +134,11 @@ export const createDocumentFromTemplate = createAction({
     !!activeDocumentId &&
     !!stores.documents.get(activeDocumentId)?.template &&
     stores.policies.abilities(currentTeamId).createDocument,
-  perform: ({ activeCollectionId, activeDocumentId, inStarredSection }) =>
+  perform: ({ activeCollectionId, activeDocumentId, sidebarContext }) =>
     history.push(
       newDocumentPath(activeCollectionId, { templateId: activeDocumentId }),
       {
-        starred: inStarredSection,
+        sidebarContext,
       }
     ),
 });
@@ -133,7 +146,7 @@ export const createDocumentFromTemplate = createAction({
 export const createNestedDocument = createAction({
   name: ({ t }) => t("New nested document"),
   analyticsName: "New document",
-  section: DocumentSection,
+  section: ActiveDocumentSection,
   icon: <NewDocumentIcon />,
   keywords: "create",
   visible: ({ currentTeamId, activeDocumentId, stores }) =>
@@ -141,16 +154,16 @@ export const createNestedDocument = createAction({
     !!activeDocumentId &&
     stores.policies.abilities(currentTeamId).createDocument &&
     stores.policies.abilities(activeDocumentId).createChildDocument,
-  perform: ({ activeDocumentId, inStarredSection }) =>
+  perform: ({ activeDocumentId, sidebarContext }) =>
     history.push(newNestedDocumentPath(activeDocumentId), {
-      starred: inStarredSection,
+      sidebarContext,
     }),
 });
 
 export const starDocument = createAction({
   name: ({ t }) => t("Star"),
   analyticsName: "Star document",
-  section: DocumentSection,
+  section: ActiveDocumentSection,
   icon: <StarredIcon />,
   keywords: "favorite bookmark",
   visible: ({ activeDocumentId, stores }) => {
@@ -176,7 +189,7 @@ export const starDocument = createAction({
 export const unstarDocument = createAction({
   name: ({ t }) => t("Unstar"),
   analyticsName: "Unstar document",
-  section: DocumentSection,
+  section: ActiveDocumentSection,
   icon: <UnstarredIcon />,
   keywords: "unfavorite unbookmark",
   visible: ({ activeDocumentId, stores }) => {
@@ -202,7 +215,7 @@ export const unstarDocument = createAction({
 export const publishDocument = createAction({
   name: ({ t }) => t("Publish"),
   analyticsName: "Publish document",
-  section: DocumentSection,
+  section: ActiveDocumentSection,
   icon: <PublishIcon />,
   visible: ({ activeDocumentId, stores }) => {
     if (!activeDocumentId) {
@@ -244,7 +257,7 @@ export const publishDocument = createAction({
 export const unpublishDocument = createAction({
   name: ({ t }) => t("Unpublish"),
   analyticsName: "Unpublish document",
-  section: DocumentSection,
+  section: ActiveDocumentSection,
   icon: <UnpublishIcon />,
   visible: ({ activeDocumentId, stores }) => {
     if (!activeDocumentId) {
@@ -275,7 +288,7 @@ export const unpublishDocument = createAction({
 export const subscribeDocument = createAction({
   name: ({ t }) => t("Subscribe"),
   analyticsName: "Subscribe to document",
-  section: DocumentSection,
+  section: ActiveDocumentSection,
   icon: <SubscribeIcon />,
   visible: ({ activeDocumentId, stores }) => {
     if (!activeDocumentId) {
@@ -303,7 +316,7 @@ export const subscribeDocument = createAction({
 export const unsubscribeDocument = createAction({
   name: ({ t }) => t("Unsubscribe"),
   analyticsName: "Unsubscribe from document",
-  section: DocumentSection,
+  section: ActiveDocumentSection,
   icon: <UnsubscribeIcon />,
   visible: ({ activeDocumentId, stores }) => {
     if (!activeDocumentId) {
@@ -331,10 +344,14 @@ export const unsubscribeDocument = createAction({
 });
 
 export const shareDocument = createAction({
-  name: ({ t }) => t("Share"),
+  name: ({ t }) => `${t("Permissions")}…`,
   analyticsName: "Share document",
-  section: DocumentSection,
-  icon: <GlobeIcon />,
+  section: ActiveDocumentSection,
+  icon: <PadlockIcon />,
+  visible: ({ stores, activeDocumentId }) => {
+    const can = stores.policies.abilities(activeDocumentId!);
+    return can.manageUsers || can.share;
+  },
   perform: async ({ activeDocumentId, stores, currentUserId, t }) => {
     if (!activeDocumentId || !currentUserId) {
       return;
@@ -366,7 +383,7 @@ export const shareDocument = createAction({
 export const downloadDocumentAsHTML = createAction({
   name: ({ t }) => t("HTML"),
   analyticsName: "Download document as HTML",
-  section: DocumentSection,
+  section: ActiveDocumentSection,
   keywords: "html export",
   icon: <DownloadIcon />,
   iconInContextMenu: false,
@@ -385,7 +402,7 @@ export const downloadDocumentAsHTML = createAction({
 export const downloadDocumentAsPDF = createAction({
   name: ({ t }) => t("PDF"),
   analyticsName: "Download document as PDF",
-  section: DocumentSection,
+  section: ActiveDocumentSection,
   keywords: "export",
   icon: <DownloadIcon />,
   iconInContextMenu: false,
@@ -409,7 +426,7 @@ export const downloadDocumentAsPDF = createAction({
 export const downloadDocumentAsMarkdown = createAction({
   name: ({ t }) => t("Markdown"),
   analyticsName: "Download document as Markdown",
-  section: DocumentSection,
+  section: ActiveDocumentSection,
   keywords: "md markdown export",
   icon: <DownloadIcon />,
   iconInContextMenu: false,
@@ -429,9 +446,11 @@ export const downloadDocument = createAction({
   name: ({ t, isContextMenu }) =>
     isContextMenu ? t("Download") : t("Download document"),
   analyticsName: "Download document",
-  section: DocumentSection,
+  section: ActiveDocumentSection,
   icon: <DownloadIcon />,
   keywords: "export",
+  visible: ({ activeDocumentId, stores }) =>
+    !!activeDocumentId && stores.policies.abilities(activeDocumentId).download,
   children: [
     downloadDocumentAsHTML,
     downloadDocumentAsPDF,
@@ -441,8 +460,10 @@ export const downloadDocument = createAction({
 
 export const copyDocumentAsMarkdown = createAction({
   name: ({ t }) => t("Copy as Markdown"),
-  section: DocumentSection,
+  section: ActiveDocumentSection,
   keywords: "clipboard",
+  icon: <MarkdownIcon />,
+  iconInContextMenu: false,
   visible: ({ activeDocumentId, stores }) =>
     !!activeDocumentId && stores.policies.abilities(activeDocumentId).download,
   perform: ({ stores, activeDocumentId, t }) => {
@@ -456,10 +477,33 @@ 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: DocumentSection,
+  section: ActiveDocumentSection,
   keywords: "clipboard",
+  icon: <CopyIcon />,
+  iconInContextMenu: false,
   visible: ({ activeDocumentId }) => !!activeDocumentId,
   perform: ({ stores, activeDocumentId, t }) => {
     const document = activeDocumentId
@@ -475,17 +519,17 @@ export const copyDocumentLink = createAction({
 export const copyDocument = createAction({
   name: ({ t }) => t("Copy"),
   analyticsName: "Copy document",
-  section: DocumentSection,
+  section: ActiveDocumentSection,
   icon: <CopyIcon />,
   keywords: "clipboard",
-  children: [copyDocumentLink, copyDocumentAsMarkdown],
+  children: [copyDocumentLink, copyDocumentShareLink, copyDocumentAsMarkdown],
 });
 
 export const duplicateDocument = createAction({
   name: ({ t, isContextMenu }) =>
     isContextMenu ? t("Duplicate") : t("Duplicate document"),
   analyticsName: "Duplicate document",
-  section: DocumentSection,
+  section: ActiveDocumentSection,
   icon: <DuplicateIcon />,
   keywords: "copy",
   visible: ({ activeDocumentId, stores }) =>
@@ -529,7 +573,7 @@ export const pinDocumentToCollection = createAction({
     });
   },
   analyticsName: "Pin document to collection",
-  section: DocumentSection,
+  section: ActiveDocumentSection,
   icon: <PinIcon />,
   iconInContextMenu: false,
   visible: ({ activeCollectionId, activeDocumentId, stores }) => {
@@ -565,7 +609,7 @@ export const pinDocumentToCollection = createAction({
 export const pinDocumentToHome = createAction({
   name: ({ t }) => t("Pin to home"),
   analyticsName: "Pin document to home",
-  section: DocumentSection,
+  section: ActiveDocumentSection,
   icon: <PinIcon />,
   iconInContextMenu: false,
   visible: ({ activeDocumentId, currentTeamId, stores }) => {
@@ -597,7 +641,7 @@ export const pinDocumentToHome = createAction({
 export const pinDocument = createAction({
   name: ({ t }) => t("Pin"),
   analyticsName: "Pin document",
-  section: DocumentSection,
+  section: ActiveDocumentSection,
   icon: <PinIcon />,
   children: [pinDocumentToCollection, pinDocumentToHome],
 });
@@ -605,7 +649,7 @@ export const pinDocument = createAction({
 export const searchInDocument = createAction({
   name: ({ t }) => t("Search in document"),
   analyticsName: "Search document",
-  section: DocumentSection,
+  section: ActiveDocumentSection,
   icon: <SearchIcon />,
   visible: ({ stores, activeDocumentId }) => {
     if (!activeDocumentId) {
@@ -623,7 +667,7 @@ export const printDocument = createAction({
   name: ({ t, isContextMenu }) =>
     isContextMenu ? t("Print") : t("Print document"),
   analyticsName: "Print document",
-  section: DocumentSection,
+  section: ActiveDocumentSection,
   icon: <PrintIcon />,
   visible: ({ activeDocumentId }) => !!(activeDocumentId && window.print),
   perform: () => {
@@ -658,15 +702,21 @@ export const importDocument = createAction({
       const files = getEventFiles(ev);
 
       const file = files[0];
-      const document = await documents.import(
-        file,
-        activeDocumentId,
-        activeCollectionId,
-        {
-          publish: true,
-        }
-      );
-      history.push(document.url);
+
+      try {
+        const document = await documents.import(
+          file,
+          activeDocumentId,
+          activeCollectionId,
+          {
+            publish: true,
+          }
+        );
+        history.push(document.url);
+      } catch (err) {
+        toast.error(err.message);
+        throw err;
+      }
     };
 
     input.click();
@@ -676,7 +726,7 @@ export const importDocument = createAction({
 export const createTemplateFromDocument = createAction({
   name: ({ t }) => t("Templatize"),
   analyticsName: "Templatize document",
-  section: DocumentSection,
+  section: ActiveDocumentSection,
   icon: <ShapesIcon />,
   keywords: "new create template",
   visible: ({ activeCollectionId, activeDocumentId, stores }) => {
@@ -711,14 +761,14 @@ export const openRandomDocument = createAction({
   section: DocumentSection,
   icon: <ShuffleIcon />,
   perform: ({ stores, activeDocumentId }) => {
-    const documentPaths = stores.collections.pathsToDocuments.filter(
-      (path) => path.type === "document" && path.id !== activeDocumentId
-    );
-    const documentPath =
-      documentPaths[Math.round(Math.random() * documentPaths.length)];
+    const nodes = stores.collections.navigationNodes
+      .reduce((acc, node) => [...acc, ...node.children], [] as NavigationNode[])
+      .filter((node) => node.id !== activeDocumentId);
 
-    if (documentPath) {
-      history.push(documentPath.url);
+    const random = nodes[Math.round(Math.random() * nodes.length)];
+
+    if (random) {
+      history.push(random.url);
     }
   },
 });
@@ -776,7 +826,7 @@ export const moveDocumentToCollection = createAction({
       : t("Move");
   },
   analyticsName: "Move document",
-  section: DocumentSection,
+  section: ActiveDocumentSection,
   icon: <MoveIcon />,
   iconInContextMenu: false,
   visible: ({ activeDocumentId, stores }) => {
@@ -805,7 +855,7 @@ export const moveDocumentToCollection = createAction({
 export const moveDocument = createAction({
   name: ({ t }) => t("Move"),
   analyticsName: "Move document",
-  section: DocumentSection,
+  section: ActiveDocumentSection,
   icon: <MoveIcon />,
   visible: ({ activeDocumentId, stores }) => {
     if (!activeDocumentId) {
@@ -824,7 +874,7 @@ export const moveDocument = createAction({
 export const moveTemplate = createAction({
   name: ({ t }) => t("Move"),
   analyticsName: "Move document",
-  section: DocumentSection,
+  section: ActiveDocumentSection,
   icon: <MoveIcon />,
   visible: ({ activeDocumentId, stores }) => {
     if (!activeDocumentId) {
@@ -841,9 +891,9 @@ export const moveTemplate = createAction({
 });
 
 export const archiveDocument = createAction({
-  name: ({ t }) => t("Archive"),
+  name: ({ t }) => `${t("Archive")}…`,
   analyticsName: "Archive document",
-  section: DocumentSection,
+  section: ActiveDocumentSection,
   icon: <ArchiveIcon />,
   visible: ({ activeDocumentId, stores }) => {
     if (!activeDocumentId) {
@@ -852,14 +902,30 @@ export const archiveDocument = createAction({
     return !!stores.policies.abilities(activeDocumentId).archive;
   },
   perform: async ({ activeDocumentId, stores, t }) => {
+    const { dialogs, documents } = stores;
+
     if (activeDocumentId) {
-      const document = stores.documents.get(activeDocumentId);
+      const document = documents.get(activeDocumentId);
       if (!document) {
         return;
       }
 
-      await document.archive();
-      toast.success(t("Document archived"));
+      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>
+        ),
+      });
     }
   },
 });
@@ -867,7 +933,7 @@ export const archiveDocument = createAction({
 export const deleteDocument = createAction({
   name: ({ t }) => `${t("Delete")}…`,
   analyticsName: "Delete document",
-  section: DocumentSection,
+  section: ActiveDocumentSection,
   icon: <TrashIcon />,
   dangerous: true,
   visible: ({ activeDocumentId, stores }) => {
@@ -901,7 +967,7 @@ export const deleteDocument = createAction({
 export const permanentlyDeleteDocument = createAction({
   name: ({ t }) => t("Permanently delete"),
   analyticsName: "Permanently delete document",
-  section: DocumentSection,
+  section: ActiveDocumentSection,
   icon: <CrossIcon />,
   dangerous: true,
   visible: ({ activeDocumentId, stores }) => {
@@ -956,7 +1022,7 @@ export const permanentlyDeleteDocumentsInTrash = createAction({
 export const openDocumentComments = createAction({
   name: ({ t }) => t("Comments"),
   analyticsName: "Open comments",
-  section: DocumentSection,
+  section: ActiveDocumentSection,
   icon: <CommentIcon />,
   visible: ({ activeDocumentId, stores }) => {
     const can = stores.policies.abilities(activeDocumentId ?? "");
@@ -978,7 +1044,7 @@ export const openDocumentComments = createAction({
 export const openDocumentHistory = createAction({
   name: ({ t }) => t("History"),
   analyticsName: "Open document history",
-  section: DocumentSection,
+  section: ActiveDocumentSection,
   icon: <HistoryIcon />,
   visible: ({ activeDocumentId, stores }) => {
     const can = stores.policies.abilities(activeDocumentId ?? "");
@@ -999,7 +1065,7 @@ export const openDocumentHistory = createAction({
 export const openDocumentInsights = createAction({
   name: ({ t }) => t("Insights"),
   analyticsName: "Open document insights",
-  section: DocumentSection,
+  section: ActiveDocumentSection,
   icon: <GraphIcon />,
   visible: ({ activeDocumentId, stores }) => {
     const can = stores.policies.abilities(activeDocumentId ?? "");
@@ -1036,7 +1102,7 @@ export const toggleViewerInsights = createAction({
       : t("Enable viewer insights");
   },
   analyticsName: "Toggle viewer insights",
-  section: DocumentSection,
+  section: ActiveDocumentSection,
   icon: <EyeIcon />,
   visible: ({ activeDocumentId, stores }) => {
     const can = stores.policies.abilities(activeDocumentId ?? "");
@@ -1066,6 +1132,7 @@ export const rootDocumentActions = [
   importDocument,
   downloadDocument,
   copyDocumentLink,
+  copyDocumentShareLink,
   copyDocumentAsMarkdown,
   starDocument,
   unstarDocument,

app/actions/definitions/navigation.tsx

@@ -216,7 +216,9 @@ export const logout = createAction({
   perform: async () => {
     await stores.auth.logout();
     if (env.OIDC_LOGOUT_URI) {
-      window.location.replace(env.OIDC_LOGOUT_URI);
+      setTimeout(() => {
+        window.location.replace(env.OIDC_LOGOUT_URI);
+      }, 200);
     }
   },
 });

app/actions/definitions/revisions.tsx

@@ -17,7 +17,7 @@ export const restoreRevision = createAction({
   analyticsName: "Restore revision",
   icon: <RestoreIcon />,
   section: RevisionSection,
-  visible: ({ activeDocumentId, stores }) =>
+  visible: ({ activeDocumentId }) =>
     !!activeDocumentId && stores.policies.abilities(activeDocumentId).update,
   perform: async ({ event, location, activeDocumentId }) => {
     event?.preventDefault();
@@ -47,7 +47,7 @@ export const copyLinkToRevision = createAction({
   analyticsName: "Copy link to revision",
   icon: <LinkIcon />,
   section: RevisionSection,
-  perform: async ({ activeDocumentId, stores, t }) => {
+  perform: async ({ activeDocumentId, t }) => {
     if (!activeDocumentId) {
       return;
     }

app/actions/definitions/users.tsx

@@ -18,7 +18,7 @@ export const inviteUser = createAction({
   icon: <PlusIcon />,
   keywords: "team member workspace user",
   section: UserSection,
-  visible: ({ stores }) =>
+  visible: () =>
     stores.policies.abilities(stores.auth.team?.id || "").inviteUser,
   perform: ({ t }) => {
     stores.dialogs.openModal({
@@ -40,7 +40,7 @@ export const updateUserRoleActionFactory = (user: User, role: UserRole) =>
           })}…`,
     analyticsName: "Update user role",
     section: UserSection,
-    visible: ({ stores }) => {
+    visible: () => {
       const can = stores.policies.abilities(user.id);
 
       return UserRoleHelper.isRoleHigher(role, user.role)
@@ -70,7 +70,7 @@ export const deleteUserActionFactory = (userId: string) =>
     keywords: "leave",
     dangerous: true,
     section: UserSection,
-    visible: ({ stores }) => stores.policies.abilities(userId).delete,
+    visible: () => stores.policies.abilities(userId).delete,
     perform: ({ t }) => {
       const user = stores.users.get(userId);
       if (!user) {

app/actions/index.ts

@@ -98,6 +98,11 @@ export function actionToKBar(
       )
     : [];
 
+  const sectionPriority =
+    typeof action.section !== "string" && "priority" in action.section
+      ? (action.section.priority as number) ?? 0
+      : 0;
+
   return [
     {
       id: action.id,
@@ -108,6 +113,7 @@ 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,

app/actions/sections.ts

@@ -2,10 +2,28 @@ 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");
@@ -21,4 +39,6 @@ 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");

app/components/Analytics.tsx

@@ -106,6 +106,24 @@ 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}</>;
 };
 

app/components/ArrowKeyNavigation.tsx

@@ -19,7 +19,7 @@ function ArrowKeyNavigation(
           return;
         }
 
-        if (ev.key === "Escape") {
+        if (ev.key === "Escape" || ev.key === "Backspace") {
           ev.preventDefault();
           onEscape(ev);
         }

app/components/AuthenticatedLayout.tsx

@@ -1,17 +1,14 @@
 import { AnimatePresence } from "framer-motion";
-import { observer, useLocalStore } from "mobx-react";
+import { observer } 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";
@@ -25,6 +22,7 @@ import {
   matchDocumentSlug as slug,
   matchDocumentInsights,
 } from "~/utils/routeHelpers";
+import { DocumentContextProvider } from "./DocumentContext";
 import Fade from "./Fade";
 import { PortalContext } from "./Portal";
 
@@ -50,12 +48,6 @@ 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) {
@@ -125,7 +117,7 @@ const AuthenticatedLayout: React.FC = ({ children }: Props) => {
   );
 
   return (
-    <DocumentContext.Provider value={documentContext}>
+    <DocumentContextProvider>
       <PortalContext.Provider value={layoutRef.current}>
         <Layout
           title={team.name}
@@ -142,7 +134,7 @@ const AuthenticatedLayout: React.FC = ({ children }: Props) => {
           </React.Suspense>
         </Layout>
       </PortalContext.Provider>
-    </DocumentContext.Provider>
+    </DocumentContextProvider>
   );
 };
 

app/components/Avatar/AvatarWithPresence.tsx

@@ -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;

app/components/Avatar/GroupAvatar.tsx

@@ -0,0 +1,35 @@
+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>
+  );
+}

app/components/Avatar/Initials.tsx

@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import { s } from "@shared/styles";
 import Flex from "~/components/Flex";
 
 const Initials = styled(Flex)<{
@@ -11,7 +12,7 @@ const Initials = styled(Flex)<{
   border-radius: 50%;
   width: 100%;
   height: 100%;
-  color: #fff;
+  color: ${s("white75")};
   background-color: ${(props) => props.color};
   width: ${(props) => props.size}px;
   height: ${(props) => props.size}px;

app/components/Avatar/index.ts

@@ -1,6 +1,7 @@
-import Avatar from "./Avatar";
+import Avatar, { IAvatar, AvatarSize } from "./Avatar";
 import AvatarWithPresence from "./AvatarWithPresence";
+import { GroupAvatar } from "./GroupAvatar";
 
-export { AvatarWithPresence };
+export { Avatar, GroupAvatar, AvatarSize, AvatarWithPresence };
 
-export default Avatar;
+export type { IAvatar };

app/components/Button.tsx

@@ -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;
       }
   `};

app/components/Collaborators.tsx

@@ -1,13 +1,13 @@
 import filter from "lodash/filter";
 import isEqual from "lodash/isEqual";
-import sortBy from "lodash/sortBy";
+import orderBy from "lodash/orderBy";
 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/AvatarWithPresence";
+import { AvatarWithPresence } from "~/components/Avatar";
 import DocumentViews from "~/components/DocumentViews";
 import Facepile from "~/components/Facepile";
 import NudeButton from "~/components/NudeButton";
@@ -16,9 +16,14 @@ 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();
@@ -39,15 +44,16 @@ function Collaborators(props: Props) {
   // ensure currently present via websocket are always ordered first
   const collaborators = React.useMemo(
     () =>
-      sortBy(
+      orderBy(
         filter(
           users.orderedData,
-          (user) =>
-            (presentIds.includes(user.id) ||
-              document.collaboratorIds.includes(user.id)) &&
-            !user.isSuspended
+          (u) =>
+            (presentIds.includes(u.id) ||
+              document.collaboratorIds.includes(u.id)) &&
+            !u.isSuspended
         ),
-        (user) => presentIds.includes(user.id)
+        [(u) => presentIds.includes(u.id), "id"],
+        ["asc", "asc"]
       ),
     [document.collaboratorIds, users.orderedData, presentIds]
   );
@@ -69,12 +75,19 @@ function Collaborators(props: Props) {
     placement: "bottom-end",
   });
 
+  const limit = 8;
+
   return (
     <>
       <PopoverDisclosure {...popover}>
-        {(props) => (
-          <NudeButton width={collaborators.length * 32} height={32} {...props}>
+        {(popoverProps) => (
+          <NudeButton
+            width={Math.min(collaborators.length, limit) * 32}
+            height={32}
+            {...popoverProps}
+          >
             <Facepile
+              limit={limit}
               users={collaborators}
               renderAvatar={(collaborator) => {
                 const isPresent = presentIds.includes(collaborator.id);

app/components/Collection/CollectionForm.tsx

@@ -19,7 +19,6 @@ 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"));
 
@@ -156,18 +155,16 @@ export const CollectionForm = observer(function CollectionForm_({
         />
       )}
 
-      {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")}
-          />
-        )}
+      {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")}
+        />
+      )}
 
       <Flex justify="flex-end">
         <Button

app/components/Collection/CollectionNew.tsx

@@ -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,8 +17,11 @@ export const CollectionNew = observer(function CollectionNew_({
   const handleSubmit = React.useCallback(
     async (data: FormData) => {
       try {
-        const collection = new Collection(data, collections);
-        await collection.save();
+        const collection = await collections.save(data);
+        // Avoid flash of loading state for the new collection, we know it's empty.
+        runInAction(() => {
+          collection.documents = [];
+        });
         onSubmit?.();
         history.push(collection.path);
       } catch (error) {

app/components/CommandBar/CommandBar.tsx

@@ -6,20 +6,27 @@ 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 useSettingsActions from "~/hooks/useSettingsActions";
-import useTemplateActions from "~/hooks/useTemplateActions";
+import CommandBarResults from "./CommandBarResults";
+import useRecentDocumentActions from "./useRecentDocumentActions";
+import useSettingsAction from "./useSettingsAction";
+import useTemplatesAction from "./useTemplatesAction";
 
 function CommandBar() {
   const { t } = useTranslation();
-  const settingsActions = useSettingsActions();
-  const templateActions = useTemplateActions();
+  const recentDocumentActions = useRecentDocumentActions();
+  const settingsAction = useSettingsAction();
+  const templatesAction = useTemplatesAction();
   const commandBarActions = React.useMemo(
-    () => [...rootActions, templateActions, settingsActions],
-    [settingsActions, templateActions]
+    () => [
+      ...recentDocumentActions,
+      ...rootActions,
+      templatesAction,
+      settingsAction,
+    ],
+    [recentDocumentActions, settingsAction, templatesAction]
   );
 
   useCommandBarActions(commandBarActions);
@@ -30,7 +37,9 @@ function CommandBar() {
         <Positioner>
           <Animator>
             <SearchActions />
-            <SearchInput defaultPlaceholder={t("Type a command or search")} />
+            <SearchInput
+              defaultPlaceholder={`${t("Type a command or search")}…`}
+            />
             <CommandBarResults />
           </Animator>
         </Positioner>
@@ -60,12 +69,15 @@ const Positioner = styled(KBarPositioner)`
 `;
 
 const SearchInput = styled(KBarSearch)`
-  padding: 16px 20px;
-  width: 100%;
+  position: relative;
+  padding: 16px 12px;
+  margin: 0 8px;
+  width: calc(100% - 16px);
   outline: none;
   border: none;
   background: ${s("menuBackground")};
   color: ${s("text")};
+  border-bottom: 1px solid ${s("inputBorder")};
 
   &:disabled,
   &::placeholder {

app/components/CommandBar/CommandBarItem.tsx

@@ -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 "./Text";
+import Text from "~/components/Text";
 
 type Props = {
   action: ActionImpl;
@@ -69,8 +69,8 @@ function CommandBarItem(
               ) : (
                 ""
               )}
-              {sc.split("+").map((s) => (
-                <Key key={s}>{s}</Key>
+              {sc.split("+").map((key) => (
+                <Key key={key}>{key}</Key>
               ))}
             </React.Fragment>
           ))}

app/components/CommandBar/CommandBarResults.tsx

@@ -1,8 +1,8 @@
 import { useMatches, KBarResults } from "kbar";
 import * as React from "react";
 import styled from "styled-components";
-import { s } from "@shared/styles";
-import CommandBarItem from "~/components/CommandBarItem";
+import Text from "~/components/Text";
+import CommandBarItem from "./CommandBarItem";
 
 export default function CommandBarResults() {
   const { results, rootActionId } = useMatches();
@@ -14,7 +14,9 @@ export default function CommandBarResults() {
         maxHeight={400}
         onRender={({ item, active }) =>
           typeof item === "string" ? (
-            <Header>{item}</Header>
+            <Header type="tertiary" size="xsmall" ellipsis>
+              {item}
+            </Header>
           ) : (
             <CommandBarItem
               action={item}
@@ -35,11 +37,10 @@ const Container = styled.div`
   }
 `;
 
-const Header = styled.h3`
-  font-size: 13px;
-  letter-spacing: 0.04em;
+const Header = styled(Text).attrs({ as: "h3" })`
+  letter-spacing: 0.03em;
   margin: 0;
   padding: 16px 0 4px 20px;
-  color: ${s("textTertiary")};
   height: 36px;
+  cursor: default;
 `;

app/components/CommandBar/index.ts

@@ -0,0 +1,3 @@
+import CommandBar from "./CommandBar";
+
+export default CommandBar;

app/components/CommandBar/useRecentDocumentActions.tsx

@@ -0,0 +1,35 @@
+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;

app/components/CommandBar/useSettingsAction.tsx

@@ -2,10 +2,10 @@ import { SettingsIcon } from "outline-icons";
 import * as React from "react";
 import { createAction } from "~/actions";
 import { NavigationSection } from "~/actions/sections";
+import useSettingsConfig from "~/hooks/useSettingsConfig";
 import history from "~/utils/history";
-import useSettingsConfig from "./useSettingsConfig";
 
-const useSettingsActions = () => {
+const useSettingsAction = () => {
   const config = useSettingsConfig();
   const actions = React.useMemo(
     () =>
@@ -38,4 +38,4 @@ const useSettingsActions = () => {
   return navigateToSettings;
 };
 
-export default useSettingsActions;
+export default useSettingsAction;

app/components/CommandBar/useTemplatesAction.tsx

@@ -3,11 +3,11 @@ import * as React from "react";
 import Icon from "~/components/Icon";
 import { createAction } from "~/actions";
 import { DocumentSection } from "~/actions/sections";
+import useStores from "~/hooks/useStores";
 import history from "~/utils/history";
 import { newDocumentPath } from "~/utils/routeHelpers";
-import useStores from "./useStores";
 
-const useTemplatesActions = () => {
+const useTemplatesAction = () => {
   const { documents } = useStores();
 
   React.useEffect(() => {
@@ -27,13 +27,13 @@ const useTemplatesActions = () => {
             <NewDocumentIcon />
           ),
           keywords: "create",
-          perform: ({ activeCollectionId, inStarredSection }) =>
+          perform: ({ activeCollectionId, sidebarContext }) =>
             history.push(
               newDocumentPath(item.collectionId ?? activeCollectionId, {
                 templateId: item.id,
               }),
               {
-                starred: inStarredSection,
+                sidebarContext,
               }
             ),
         })
@@ -60,4 +60,4 @@ const useTemplatesActions = () => {
   return newFromTemplate;
 };
 
-export default useTemplatesActions;
+export default useTemplatesAction;

app/components/ConfirmMoveDialog.tsx

@@ -0,0 +1,62 @@
+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);

app/components/ConnectionStatus.tsx

@@ -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, { useTheme } from "styled-components";
+import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import Fade from "~/components/Fade";
 import NudeButton from "~/components/NudeButton";
@@ -11,7 +11,6 @@ import useStores from "~/hooks/useStores";
 
 function ConnectionStatus() {
   const { ui } = useStores();
-  const theme = useTheme();
   const { t } = useTranslation();
 
   const codeToMessage = {
@@ -61,7 +60,7 @@ function ConnectionStatus() {
     >
       <Button>
         <Fade>
-          <DisconnectedIcon color={theme.sidebarText} />
+          <DisconnectedIcon />
         </Fade>
       </Button>
     </Tooltip>
@@ -72,7 +71,7 @@ const Button = styled(NudeButton)`
   display: none;
   position: fixed;
   bottom: 0;
-  margin: 24px;
+  margin: 20px;
   transform: translateX(-32px);
 
   ${breakpoint("tablet")`

app/components/ContextMenu/MenuItem.tsx

@@ -6,6 +6,7 @@ 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";
 
@@ -22,7 +23,7 @@ type Props = {
   as?: string | React.ComponentType<any>;
   hide?: () => void;
   level?: number;
-  icon?: React.ReactElement | null;
+  icon?: React.ReactElement;
   children?: React.ReactNode;
   ref?: React.LegacyRef<HTMLButtonElement> | undefined;
 };
@@ -74,9 +75,9 @@ const MenuItem = (
           ])}
         >
           {selected !== undefined && (
-            <MenuIconWrapper aria-hidden>
+            <SelectedWrapper aria-hidden>
               {selected ? <CheckmarkIcon /> : <Spacer />}
-            </MenuIconWrapper>
+            </SelectedWrapper>
           )}
           {icon && <MenuIconWrapper aria-hidden>{icon}</MenuIconWrapper>}
           <Title>{children}</Title>
@@ -152,7 +153,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;
@@ -196,4 +197,13 @@ 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);

app/components/ContextMenu/index.tsx

@@ -6,6 +6,7 @@ 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";
@@ -50,6 +51,8 @@ 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;
 };
 
@@ -134,6 +137,7 @@ type InnerContextMenuProps = MenuStateReturn & {
   menuProps: { style?: React.CSSProperties; placement: string };
   children: React.ReactNode;
   maxWidth?: number;
+  minHeight?: number;
 };
 
 /**
@@ -171,6 +175,32 @@ 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
       ? {
@@ -193,6 +223,7 @@ const InnerContextMenu = (props: InnerContextMenuProps) => {
         <Background
           dir="auto"
           maxWidth={props.maxWidth}
+          minHeight={props.minHeight}
           topAnchor={topAnchor}
           rightAnchor={rightAnchor}
           ref={backgroundRef}
@@ -223,10 +254,30 @@ export const Position = styled.div`
   position: absolute;
   z-index: ${depths.menu};
 
-  &.focus-visible {
+  // Note: pointer events are re-enabled after the animation ends, see event listeners above
+  pointer-events: none;
+
+  &: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;
+    }
   }
 
   /*
@@ -247,6 +298,7 @@ type BackgroundProps = {
   topAnchor?: boolean;
   rightAnchor?: boolean;
   maxWidth?: number;
+  minHeight?: number;
   theme: DefaultTheme;
 };
 
@@ -258,9 +310,8 @@ export const Background = styled(Scrollable)<BackgroundProps>`
   border-radius: 6px;
   padding: 6px;
   min-width: 180px;
-  min-height: 44px;
+  min-height: ${(props) => props.minHeight || 44}px;
   max-height: 75vh;
-  pointer-events: all;
   font-weight: normal;
 
   @media print {

app/components/DataAttribute/DataAttributeEdit.tsx

@@ -1,34 +0,0 @@
-import { observer } from "mobx-react";
-import * as React from "react";
-import { toast } from "sonner";
-import DataAttribute from "~/models/DataAttribute";
-import { DataAttributeForm, FormData } from "./DataAttributeForm";
-
-type Props = {
-  dataAttribute: DataAttribute;
-  onSubmit: () => void;
-};
-
-export const DataAttributeEdit = observer(function DataAttributeEdit_({
-  dataAttribute,
-  onSubmit,
-}: Props) {
-  const handleSubmit = React.useCallback(
-    async (data: FormData) => {
-      try {
-        await dataAttribute.save(data);
-        onSubmit?.();
-      } catch (error) {
-        toast.error(error.message);
-      }
-    },
-    [dataAttribute, onSubmit]
-  );
-
-  return (
-    <DataAttributeForm
-      dataAttribute={dataAttribute}
-      handleSubmit={handleSubmit}
-    />
-  );
-});

app/components/DataAttribute/DataAttributeForm.tsx

@@ -1,212 +0,0 @@
-import { observer } from "mobx-react";
-import { CloseIcon, PlusIcon } from "outline-icons";
-import * as React from "react";
-import { Controller, useForm } from "react-hook-form";
-import { useTranslation } from "react-i18next";
-import styled, { useTheme } from "styled-components";
-import {
-  DataAttributeDataType,
-  type DataAttributeOptions,
-} from "@shared/models/types";
-import { DataAttributeValidation } from "@shared/validations";
-import type DataAttribute from "~/models/DataAttribute";
-import Button from "~/components/Button";
-import Flex from "~/components/Flex";
-import Input from "~/components/Input";
-import { DataAttributesHelper } from "~/utils/DataAttributesHelper";
-import InputSelect from "../InputSelect";
-import NudeButton from "../NudeButton";
-
-type Props = {
-  handleSubmit: (data: FormData) => void;
-  dataAttribute?: DataAttribute;
-};
-
-export interface FormData {
-  name: string;
-  description?: string;
-  dataType: DataAttributeDataType;
-  options?: DataAttributeOptions;
-}
-
-export const DataAttributeForm = observer(function DataAttributeForm_({
-  handleSubmit,
-  dataAttribute,
-}: Props) {
-  const theme = useTheme();
-  const { t } = useTranslation();
-  const {
-    register,
-    handleSubmit: formHandleSubmit,
-    formState,
-    watch,
-    control,
-    setFocus,
-    setValue,
-  } = useForm<FormData>({
-    mode: "all",
-    defaultValues: {
-      name: dataAttribute?.name,
-      description: dataAttribute?.description ?? undefined,
-      dataType: dataAttribute?.dataType ?? DataAttributeDataType.String,
-      options: dataAttribute?.options ?? undefined,
-    },
-  });
-  const values = watch();
-  const isEditing = !!dataAttribute;
-
-  React.useEffect(() => {
-    if (isEditing) {
-      return;
-    }
-    setTimeout(() => setFocus("name", { shouldSelect: true }), 100);
-  }, [isEditing, setFocus]);
-
-  return (
-    <form onSubmit={formHandleSubmit(handleSubmit)}>
-      <div>
-        <Controller
-          control={control}
-          name="dataType"
-          render={({ field }) => (
-            <InputSelect
-              ref={field.ref}
-              value={field.value}
-              disabled={isEditing}
-              onChange={(value: DataAttributeDataType) => {
-                field.onChange(value);
-
-                if (value === DataAttributeDataType.List) {
-                  setValue("options", {
-                    options: [
-                      {
-                        value: "",
-                      },
-                      {
-                        value: "",
-                      },
-                    ],
-                  });
-                }
-              }}
-              ariaLabel={t("Format")}
-              label={t("Format")}
-              options={Object.values(DataAttributeDataType).map((dataType) => ({
-                value: dataType,
-                label: DataAttributesHelper.getName(dataType, t),
-              }))}
-              style={{ width: "auto" }}
-            />
-          )}
-        />
-      </div>
-      {values.dataType === DataAttributeDataType.List && (
-        <Options gap={8} column>
-          {values.options?.options?.map((option, index) => (
-            <Flex gap={4} align="center" key={index}>
-              <Input
-                value={option.value}
-                onChange={(event) => {
-                  const newOptions = [...(values.options?.options ?? [])];
-                  newOptions[index] = { value: event.target.value };
-                  setValue("options", { options: newOptions });
-                }}
-                type="text"
-                autoComplete="off"
-                autoFocus={index !== 1}
-                minLength={DataAttributeValidation.minOptionLength}
-                maxLength={DataAttributeValidation.maxOptionLength}
-                margin={0}
-                required
-                flex
-              />
-              <NudeButton
-                disabled={
-                  (values.options?.options?.length ?? 0) <=
-                  DataAttributeValidation.minOptions
-                }
-                onClick={() => {
-                  const newOptions = [...(values.options?.options ?? [])];
-                  newOptions.splice(index, 1);
-                  setValue("options", { options: newOptions });
-                }}
-              >
-                <CloseIcon color={theme.textSecondary} />
-              </NudeButton>
-            </Flex>
-          ))}
-          <div>
-            <Controller
-              control={control}
-              name="options"
-              render={({ field }) => (
-                <Button
-                  neutral
-                  borderOnHover
-                  icon={<PlusIcon size={20} />}
-                  disabled={
-                    (values.options?.options?.length ?? 0) >=
-                    DataAttributeValidation.maxOptions
-                  }
-                  onClick={() => {
-                    field.onChange({
-                      options: [
-                        ...(field.value?.options ?? []),
-                        {
-                          value: "",
-                        },
-                      ],
-                    });
-                  }}
-                >
-                  {t("Add option")}
-                </Button>
-              )}
-            />
-          </div>
-        </Options>
-      )}
-      <Input
-        type="text"
-        label={t("Name")}
-        {...register("name", {
-          required: true,
-          minLength: DataAttributeValidation.minNameLength,
-          maxLength: DataAttributeValidation.maxNameLength,
-        })}
-        autoComplete="off"
-        autoFocus
-        flex
-      />
-      <Input
-        type="text"
-        label={t("Description")}
-        placeholder={t("Optional")}
-        {...register("description", {
-          maxLength: DataAttributeValidation.maxDescriptionLength,
-        })}
-        autoComplete="off"
-        flex
-      />
-      <Flex justify="flex-end">
-        <Button
-          type="submit"
-          disabled={formState.isSubmitting || !formState.isValid}
-        >
-          {dataAttribute
-            ? formState.isSubmitting
-              ? `${t("Saving")}…`
-              : t("Save")
-            : formState.isSubmitting
-            ? `${t("Creating")}…`
-            : t("Create")}
-        </Button>
-      </Flex>
-    </form>
-  );
-});
-
-const Options = styled(Flex)`
-  margin-left: 16px;
-  margin-bottom: 16px;
-`;

app/components/DataAttribute/DataAttributeNew.tsx

@@ -1,30 +0,0 @@
-import { observer } from "mobx-react";
-import * as React from "react";
-import { toast } from "sonner";
-import DataAttribute from "~/models/DataAttribute";
-import useStores from "~/hooks/useStores";
-import { DataAttributeForm, FormData } from "./DataAttributeForm";
-
-type Props = {
-  onSubmit: () => void;
-};
-
-export const DataAttributeNew = observer(function DataAttributeNew_({
-  onSubmit,
-}: Props) {
-  const { dataAttributes } = useStores();
-  const handleSubmit = React.useCallback(
-    async (data: FormData) => {
-      try {
-        const dataAttribute = new DataAttribute(data, dataAttributes);
-        await dataAttribute.save();
-        onSubmit?.();
-      } catch (error) {
-        toast.error(error.message);
-      }
-    },
-    [dataAttributes, onSubmit]
-  );
-
-  return <DataAttributeForm handleSubmit={handleSubmit} />;
-});

app/components/DefaultCollectionInputSelect.tsx

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

app/components/DocumentBreadcrumb.tsx

@@ -8,6 +8,7 @@ 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 {
@@ -67,14 +68,15 @@ const DocumentBreadcrumb: React.FC<Props> = ({
   const collection = document.collectionId
     ? collections.get(document.collectionId)
     : undefined;
+  const can = usePolicy(collection);
 
   React.useEffect(() => {
-    void document.loadRelations();
+    void document.loadRelations({ withoutPolicies: true });
   }, [document]);
 
   let collectionNode: MenuInternalLink | undefined;
 
-  if (collection) {
+  if (collection && can.readDocument) {
     collectionNode = {
       type: "route",
       title: collection.name,

app/components/DocumentContext.ts

@@ -1,37 +0,0 @@
-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;

app/components/DocumentContext.tsx

@@ -0,0 +1,76 @@
+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>;
+};

app/components/DocumentExplorer.tsx

@@ -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 "smooth-scroll-into-view-if-needed";
+import scrollIntoView from "scroll-into-view-if-needed";
 import styled, { useTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { NavigationNode } from "@shared/types";

app/components/DocumentExplorerSearchResult.tsx

@@ -1,7 +1,7 @@
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import scrollIntoView from "smooth-scroll-into-view-if-needed";
+import scrollIntoView from "scroll-into-view-if-needed";
 import styled from "styled-components";
 import { ellipsis } from "@shared/styles";
 import { Node as SearchResult } from "~/components/DocumentExplorerNode";

app/components/DocumentMeta.tsx

@@ -140,7 +140,7 @@ const DocumentMeta: React.FC<Props> = ({
   }
 
   const nestedDocumentsCount = collection
-    ? collection.getDocumentChildren(document.id).length
+    ? collection.getChildrenForDocument(document.id).length
     : 0;
   const canShowProgressBar = isTasks && !isTemplate;
 

app/components/DocumentViews.tsx

@@ -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";

app/components/DuplicateDialog.tsx

@@ -70,14 +70,14 @@ function DuplicateDialog({ document, onSubmit }: Props) {
             <Text size="small">
               <Switch
                 name="publish"
-                label={t("Published")}
+                label={t("Publish")}
                 labelPosition="right"
                 checked={publish}
                 onChange={handlePublishChange}
               />
             </Text>
           )}
-          {document.publishedAt && (
+          {document.publishedAt && document.childDocuments.length > 0 && (
             <Text size="small">
               <Switch
                 name="recursive"

app/components/Editor.tsx

@@ -9,7 +9,6 @@ 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";
@@ -43,21 +42,14 @@ 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,
-    onHeadingsChange,
-    onCreateCommentMark,
-    onDeleteCommentMark,
-  } = props;
+  const { id, shareId, onChange, onCreateCommentMark, onDeleteCommentMark } =
+    props;
   const userLocale = useUserLocale();
   const locale = dateLocale(userLocale);
   const { comments, documents } = useStores();
@@ -65,7 +57,6 @@ 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(
@@ -212,21 +203,6 @@ 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();
@@ -261,20 +237,18 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
   const handleChange = React.useCallback(
     (event) => {
       onChange?.(event);
-      updateHeadings();
       updateComments();
     },
-    [onChange, updateComments, updateHeadings]
+    [onChange, updateComments]
   );
 
   const handleRefChanged = React.useCallback(
     (node: SharedEditor | null) => {
       if (node) {
-        updateHeadings();
         updateComments();
       }
     },
-    [updateComments, updateHeadings]
+    [updateComments]
   );
 
   return (

app/components/EventListItem.tsx

@@ -12,10 +12,11 @@ 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";
@@ -158,7 +159,9 @@ const EventListItem = ({ event, latest, document, ...rest }: Props) => {
       }
       actions={
         isRevision && isActive && event.modelId && !latest ? (
-          <RevisionMenu document={document} revisionId={event.modelId} />
+          <StyledEventBoundary>
+            <RevisionMenu document={document} revisionId={event.modelId} />
+          </StyledEventBoundary>
         ) : undefined
       }
       onMouseEnter={prefetchRevision}
@@ -175,6 +178,10 @@ 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;

app/components/Facepile.tsx

@@ -3,9 +3,8 @@ import * as React from "react";
 import styled from "styled-components";
 import { s } from "@shared/styles";
 import User from "~/models/User";
-import Avatar from "~/components/Avatar";
+import { Avatar, AvatarSize } from "~/components/Avatar";
 import Flex from "~/components/Flex";
-import { AvatarSize } from "./Avatar/Avatar";
 
 type Props = {
   users: User[];

app/components/FilterOptions.tsx

@@ -1,18 +1,23 @@
+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";
 
-type TFilterOption = {
+interface TFilterOption extends PaginatedItem {
   key: string;
   label: string;
   note?: string;
   icon?: React.ReactNode;
-};
+}
 
 type Props = {
   options: TFilterOption[];
@@ -21,6 +26,9 @@ 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 = ({
@@ -30,13 +38,20 @@ 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
@@ -44,6 +59,109 @@ 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}>
@@ -53,33 +171,73 @@ const FilterOptions = ({
           </StyledButton>
         )}
       </MenuButton>
-      <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 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>
     </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;

app/components/GroupListItem.tsx

@@ -13,7 +13,6 @@ 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";
 
@@ -26,15 +25,11 @@ type Props = {
 };
 
 function GroupListItem({ group, showFacepile, renderActions }: Props) {
-  const { groupUsers } = useStores();
   const { t } = useTranslation();
   const [membersModalOpen, setMembersModalOpen, setMembersModalClosed] =
     useBoolean();
   const memberCount = group.memberCount;
-  const membershipsInGroup = groupUsers.inGroup(group.id);
-  const users = membershipsInGroup
-    .slice(0, MAX_AVATAR_DISPLAY)
-    .map((gm) => gm.user);
+  const users = group.users.slice(0, MAX_AVATAR_DISPLAY);
   const overflow = memberCount - users.length;
 
   return (

app/components/HoverPreview/HoverPreviewIssue.tsx

@@ -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";

app/components/HoverPreview/HoverPreviewMention.tsx

@@ -1,7 +1,6 @@
 import * as React from "react";
 import { UnfurlResourceType, UnfurlResponse } from "@shared/types";
-import Avatar from "~/components/Avatar";
-import { AvatarSize } from "~/components/Avatar/Avatar";
+import { Avatar, AvatarSize } from "~/components/Avatar";
 import Flex from "~/components/Flex";
 import { Preview, Title, Info, Card, CardContent } from "./Components";
 

app/components/HoverPreview/HoverPreviewPullRequest.tsx

@@ -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";

app/components/Icon.tsx

@@ -2,8 +2,6 @@ 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";
@@ -83,7 +81,7 @@ const SVGIcon = observer(
   }: Props) => {
     const { ui } = useStores();
 
-    let color = inputColor ?? randomElement(colorPalette);
+    let color = inputColor ?? colorPalette[0];
 
     // If the chosen icon color is very dark then we invert it in dark mode
     if (!forceColor) {
@@ -119,12 +117,7 @@ export const IconTitleWrapper = styled(Flex)<{ dir?: string }>`
   z-index: 1;
 
   ${(props: { dir?: string }) =>
-    props.dir === "rtl" ? "right: -40px" : "left: -40px"};
-
-  ${breakpoint("desktop")`
-    ${(props: { dir?: string }) =>
-      props.dir === "rtl" ? "right: -44px" : "left: -44px"};
-  `}
+    props.dir === "rtl" ? "right: -44px" : "left: -44px"};
 `;
 
 export default Icon;

app/components/IconPicker/components/ColorPicker.tsx

@@ -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")};
   }
 `;
 

app/components/IconPicker/components/Grid.tsx

@@ -44,6 +44,7 @@ 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

app/components/IconPicker/index.tsx

@@ -309,4 +309,4 @@ const StyledTabPanel = styled(TabPanel)`
   overflow-y: auto;
 `;
 
-export default IconPicker;
+export default React.memo(IconPicker);

app/components/Icons/CollectionIcon.tsx

@@ -1,5 +1,5 @@
 import { observer } from "mobx-react";
-import { CollectionIcon } from "outline-icons";
+import { CollectionIcon, PrivateCollectionIcon } from "outline-icons";
 import { getLuminance } from "polished";
 import * as React from "react";
 import { colorPalette } from "@shared/utils/collections";
@@ -40,8 +40,11 @@ function ResolvedCollectionIcon({
           : "currentColor"
         : collectionColor);
 
+    const Component = collection.isPrivate
+      ? PrivateCollectionIcon
+      : CollectionIcon;
     return (
-      <CollectionIcon
+      <Component
         color={color}
         expanded={expanded}
         size={size}
@@ -57,6 +60,7 @@ function ResolvedCollectionIcon({
       size={size}
       initial={collection.initial}
       className={className}
+      forceColor={inputColor ? true : false}
     />
   );
 }

app/components/Input.tsx

@@ -143,12 +143,8 @@ export interface Props
   onRequestSubmit?: (
     ev: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>
   ) => unknown;
-  onFocus?: (
-    ev: React.SyntheticEvent<HTMLInputElement | HTMLTextAreaElement>
-  ) => unknown;
-  onBlur?: (
-    ev: React.SyntheticEvent<HTMLInputElement | HTMLTextAreaElement>
-  ) => unknown;
+  onFocus?: (ev: React.SyntheticEvent) => unknown;
+  onBlur?: (ev: React.SyntheticEvent) => unknown;
 }
 
 function Input(
@@ -158,9 +154,7 @@ function Input(
   const internalRef = React.useRef<HTMLInputElement | HTMLTextAreaElement>();
   const [focused, setFocused] = React.useState(false);
 
-  const handleBlur = (
-    ev: React.SyntheticEvent<HTMLInputElement | HTMLTextAreaElement>
-  ) => {
+  const handleBlur = (ev: React.SyntheticEvent) => {
     setFocused(false);
 
     if (props.onBlur) {
@@ -168,9 +162,7 @@ function Input(
     }
   };
 
-  const handleFocus = (
-    ev: React.SyntheticEvent<HTMLInputElement | HTMLTextAreaElement>
-  ) => {
+  const handleFocus = (ev: React.SyntheticEvent) => {
     setFocused(true);
 
     if (props.onFocus) {

app/components/InputSelect.tsx

@@ -55,8 +55,6 @@ export type Props = {
    * The Modal will take care of preventing body scroll behaviour.
    */
   skipBodyScroll?: boolean;
-  autoFocus?: boolean;
-  placeholder?: string;
 };
 
 export interface InputSelectRef {
@@ -87,8 +85,6 @@ const InputSelect = (props: Props, ref: React.RefObject<InputSelectRef>) => {
     icon,
     nude,
     skipBodyScroll,
-    autoFocus,
-    placeholder,
     ...rest
   } = props;
 
@@ -218,7 +214,6 @@ const InputSelect = (props: Props, ref: React.RefObject<InputSelectRef>) => {
               neutral
               disclosure
               className={className}
-              autoFocus={autoFocus}
               icon={icon}
               $nude={nude}
               {...buttonProps}
@@ -226,9 +221,7 @@ const InputSelect = (props: Props, ref: React.RefObject<InputSelectRef>) => {
               {option ? (
                 labelForOption(option)
               ) : (
-                <Placeholder>
-                  {placeholder ?? `Select a ${ariaLabel.toLowerCase()}`}
-                </Placeholder>
+                <Placeholder>Select a {ariaLabel.toLowerCase()}</Placeholder>
               )}
             </StyledButton>
           )}
@@ -359,7 +352,9 @@ const Wrapper = styled.label<{ short?: boolean }>`
 `;
 
 export const Positioner = styled(Position)`
-  &.focus-visible {
+  pointer-events: all;
+
+  &:focus-visible {
     ${StyledSelectOption} {
       &[aria-selected="true"] {
         color: ${(props) => props.theme.white};

app/components/Layout.tsx

@@ -41,7 +41,6 @@ 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 />

app/components/List/Item.tsx

@@ -4,7 +4,7 @@ import {
 } from "@getoutline/react-roving-tabindex";
 import { LocationDescriptor } from "history";
 import * as React from "react";
-import scrollIntoView from "smooth-scroll-into-view-if-needed";
+import scrollIntoView from "scroll-into-view-if-needed";
 import styled, { useTheme } from "styled-components";
 import { s, ellipsis } from "@shared/styles";
 import Flex from "~/components/Flex";
@@ -142,10 +142,14 @@ const ListItem = (
       $hover={!!rest.onClick}
       {...rest}
       {...rovingTabIndex}
-      onClick={(ev) => {
-        rest.onClick?.(ev);
-        rovingTabIndex.onClick(ev);
-      }}
+      onClick={
+        rest.onClick
+          ? (ev) => {
+              rest.onClick?.(ev);
+              rovingTabIndex.onClick(ev);
+            }
+          : undefined
+      }
       onKeyDown={(ev) => {
         rest.onKeyDown?.(ev);
         rovingTabIndex.onKeyDown(ev);

app/components/Modal.tsx

@@ -271,7 +271,7 @@ const Small = styled.div`
   outline: none;
 
   ${NudeButton} {
-    &:hover:not(:disabled),
+    &:hover,
     &[aria-expanded="true"] {
       background: ${s("sidebarControlHoverBackground")};
     }

app/components/NavLink.tsx

@@ -1,6 +1,6 @@
 import { LocationDescriptor, LocationDescriptorObject } from "history";
 import * as React from "react";
-import { match, NavLink, Route } from "react-router-dom";
+import { type match, NavLink, Route } from "react-router-dom";
 
 type Props = React.ComponentProps<typeof NavLink> & {
   children?: (

app/components/Notifications/NotificationListItem.tsx

@@ -9,8 +9,7 @@ import Notification from "~/models/Notification";
 import CommentEditor from "~/scenes/Document/components/CommentEditor";
 import useStores from "~/hooks/useStores";
 import { hover, truncateMultiline } from "~/styles";
-import Avatar from "../Avatar";
-import { AvatarSize } from "../Avatar/Avatar";
+import { Avatar, AvatarSize } from "../Avatar";
 import Flex from "../Flex";
 import Text from "../Text";
 import Time from "../Time";

app/components/PageTitle.tsx

@@ -29,7 +29,6 @@ const PageTitle = ({ title, favicon }: Props) => {
         href={favicon ?? originalShortcutHref}
         key={favicon ?? originalShortcutHref}
       />
-      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     </Helmet>
   );
 };

app/components/PaginatedList.tsx

@@ -13,9 +13,9 @@ import withStores from "~/components/withStores";
 import { dateToHeading } from "~/utils/date";
 
 export interface PaginatedItem {
-  id: string;
-  createdAt?: string;
+  id?: string;
   updatedAt?: string;
+  createdAt?: string;
 }
 
 type Props<T> = WithTranslation &
@@ -36,6 +36,7 @@ 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
@@ -196,6 +197,7 @@ class PaginatedList<T extends PaginatedItem> extends React.PureComponent<
           onEscape={onEscape}
           className={this.props.className}
           items={this.itemsToRender}
+          ref={this.props.listRef}
         >
           {() => {
             let previousHeading = "";
@@ -211,7 +213,11 @@ 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 =
-                item.updatedAt || item.createdAt || previousHeading;
+                "updatedAt" in item && item.updatedAt
+                  ? item.updatedAt
+                  : "createdAt" in item && item.createdAt
+                  ? item.createdAt
+                  : previousHeading;
               const currentHeading = dateToHeading(
                 currentDate,
                 this.props.t,
@@ -227,7 +233,9 @@ class PaginatedList<T extends PaginatedItem> extends React.PureComponent<
               ) {
                 previousHeading = currentHeading;
                 return (
-                  <React.Fragment key={item.id}>
+                  <React.Fragment
+                    key={"id" in item && item.id ? item.id : index}
+                  >
                     {renderHeading(currentHeading)}
                     {children}
                   </React.Fragment>

app/components/PinnedDocuments.tsx

@@ -30,13 +30,24 @@ 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, canUpdate, ...rest }: Props) {
-  const { documents, collections } = useStores();
+function PinnedDocuments({
+  limit,
+  pins,
+  placeholderCount,
+  canUpdate,
+  ...rest
+}: Props) {
+  const { documents } = 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));
@@ -59,9 +70,9 @@ function PinnedDocuments({ limit, pins, canUpdate, ...rest }: Props) {
       const { active, over } = event;
 
       if (over && active.id !== over.id) {
-        setItems((items) => {
-          const activePos = items.indexOf(active.id as string);
-          const overPos = items.indexOf(over.id as string);
+        setItems((existing) => {
+          const activePos = existing.indexOf(active.id as string);
+          const overPos = existing.indexOf(over.id as string);
 
           const overIndex = pins[overPos]?.index || null;
           const nextIndex = pins[overPos + 1]?.index || null;
@@ -78,20 +89,16 @@ function PinnedDocuments({ limit, pins, canUpdate, ...rest }: Props) {
                   ? fractionalIndex(prevIndex, overIndex)
                   : fractionalIndex(overIndex, nextIndex),
             })
-            .catch(() => setItems(items));
+            .catch(() => setItems(existing));
 
           // Update the order in state immediately
-          return arrayMove(items, activePos, overPos);
+          return arrayMove(existing, activePos, overPos);
         });
       }
     },
     [pins]
   );
 
-  if (collections.orderedData.length === 0) {
-    return null;
-  }
-
   return (
     <DndContext
       sensors={sensors}
@@ -109,23 +116,34 @@ function PinnedDocuments({ limit, pins, canUpdate, ...rest }: Props) {
       >
         <SortableContext items={items} strategy={rectSortingStrategy}>
           <List>
-            <AnimatePresence initial={false}>
-              {items.map((documentId) => {
-                const document = documents.get(documentId);
-                const pin = pins.find((pin) => pin.documentId === documentId);
+            {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);
 
-                return document ? (
-                  <DocumentCard
-                    key={documentId}
-                    document={document}
-                    canUpdatePin={canUpdate}
-                    isDraggable={items.length > 1}
-                    pin={pin}
-                    {...rest}
-                  />
-                ) : null;
-              })}
-            </AnimatePresence>
+                  // 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>
+            )}
           </List>
         </SortableContext>
       </ResizingHeightContainer>

app/components/PlaceholderText.tsx

@@ -5,8 +5,9 @@ import { s } from "@shared/styles";
 import Flex from "~/components/Flex";
 import { pulsate } from "~/styles/animations";
 
-export type Props = {
+export type Props = React.ComponentProps<typeof Flex> & {
   header?: boolean;
+  width?: number;
   height?: number;
   minWidth?: number;
   maxWidth?: number;
@@ -17,16 +18,22 @@ 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} />;
+  return (
+    <Mask
+      width={`${widthRef.current / (restProps.header ? 2 : 1)}%`}
+      {...restProps}
+    />
+  );
 }
 
 const Mask = styled(Flex)<{
-  width: number;
+  width: number | string;
   height?: number;
   delay?: number;
   header?: boolean;
 }>`
-  width: ${(props) => (props.header ? props.width / 2 : props.width)}%;
+  width: ${(props) =>
+    typeof props.width === "number" ? `${props.width}px` : props.width};
   height: ${(props) =>
     props.height ? props.height : props.header ? 24 : 18}px;
   margin-bottom: 6px;

app/components/ResizingHeightContainer.tsx

@@ -1,5 +1,6 @@
 import { m, TargetAndTransition } from "framer-motion";
 import * as React from "react";
+import { mergeRefs } from "react-merge-refs";
 import useComponentSize from "~/hooks/useComponentSize";
 
 type Props = {
@@ -18,35 +19,37 @@ type Props = {
 /**
  * Automatically animates the height of a container based on it's contents.
  */
-export function ResizingHeightContainer(props: Props) {
-  const {
-    hideOverflow,
-    children,
-    config = {
-      transition: {
-        duration: 0.1,
-        ease: "easeInOut",
+export const ResizingHeightContainer = React.forwardRef<HTMLDivElement, Props>(
+  function ResizingHeightContainer_(props, forwardedRef) {
+    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={ref}>{children}</div>
-    </m.div>
-  );
-}
+    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>
+    );
+  }
+);

app/components/SearchActions.ts

@@ -10,7 +10,7 @@ export default function SearchActions() {
   const { searches } = useStores();
 
   React.useEffect(() => {
-    if (!searches.isLoaded) {
+    if (!searches.isLoaded && !searches.isFetching) {
       void searches.fetchPage({
         source: "app",
       });

app/components/SearchPopover.tsx

@@ -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, { PaginatedItem } from "~/components/PaginatedList";
+import PaginatedList 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<
-    PaginatedItem[] | undefined
+    SearchResult[] | undefined
   >();
   const [cachedQuery, setCachedQuery] = React.useState(query);
   const [cachedSearchResults, setCachedSearchResults] = React.useState<
-    PaginatedItem[] | undefined
+    SearchResult[] | 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: PaginatedItem[] = await documents.search(query, {
+        const response = await documents.search(query, {
           shareId,
           ...options,
         });

app/components/Sharing/Collection/AccessControlList.tsx

@@ -0,0 +1,254 @@
+import { observer } from "mobx-react";
+import { 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 InputMemberPermissionSelect from "~/components/InputMemberPermissionSelect";
+import InputSelectPermission from "~/components/InputSelectPermission";
+import Scrollable from "~/components/Scrollable";
+import useMaxHeight from "~/hooks/useMaxHeight";
+import usePolicy from "~/hooks/usePolicy";
+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 */
+  collection: Collection;
+  /** Children to be rendered before the list of members */
+  children?: React.ReactNode;
+  /** List of users and groups that have been invited during the current editing session */
+  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;
+
+    const { request: fetchMemberships, loading: membershipLoading } =
+      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]
+    );
+
+    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>
+    );
+  }
+);
+
+const ScrollableContainer = styled(Scrollable)`
+  padding: 12px 24px;
+  margin: -12px -24px;
+`;

app/components/Sharing/Collection/CollectionMemberList.tsx

@@ -1,180 +0,0 @@
-import { observer } from "mobx-react";
-import { GroupIcon } from "outline-icons";
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-import { useTheme } from "styled-components";
-import Squircle from "@shared/components/Squircle";
-import { CollectionPermission } from "@shared/types";
-import Collection from "~/models/Collection";
-import Avatar, { AvatarSize } from "~/components/Avatar/Avatar";
-import InputMemberPermissionSelect from "~/components/InputMemberPermissionSelect";
-import usePolicy from "~/hooks/usePolicy";
-import useRequest from "~/hooks/useRequest";
-import useStores from "~/hooks/useStores";
-import { EmptySelectValue, Permission } from "~/types";
-import { ListItem } from "../components/ListItem";
-
-type Props = {
-  /** Collection to which team members are supposed to be invited */
-  collection: Collection;
-  /** Children to be rendered before the list of members */
-  children?: React.ReactNode;
-  /** List of users and groups that have been invited during the current editing session */
-  invitedInSession: string[];
-};
-
-function CollectionMemberList({ collection, invitedInSession }: Props) {
-  const { memberships, groupMemberships } = useStores();
-  const can = usePolicy(collection);
-  const { t } = useTranslation();
-  const theme = useTheme();
-  const collectionId = collection.id;
-
-  const { request: fetchMemberships } = useRequest(
-    React.useCallback(
-      () => memberships.fetchAll({ id: collectionId }),
-      [memberships, collectionId]
-    )
-  );
-
-  const { request: fetchGroupMemberships } = useRequest(
-    React.useCallback(
-      () => groupMemberships.fetchAll({ id: collectionId }),
-      [groupMemberships, collectionId]
-    )
-  );
-
-  React.useEffect(() => {
-    void fetchMemberships();
-    void fetchGroupMemberships();
-  }, [fetchMemberships, fetchGroupMemberships]);
-
-  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]
-  );
-
-  return (
-    <>
-      {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>
-            }
-          />
-        ))}
-    </>
-  );
-}
-
-export default observer(CollectionMemberList);

app/components/Sharing/Collection/SharePopover.tsx

@@ -1,18 +1,15 @@
 import { isEmail } from "class-validator";
 import { m } from "framer-motion";
 import { observer } from "mobx-react";
-import { BackIcon, UserIcon } from "outline-icons";
+import { BackIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
-import { useTheme } from "styled-components";
-import Squircle from "@shared/components/Squircle";
 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/Avatar";
-import InputSelectPermission from "~/components/InputSelectPermission";
+import { Avatar, AvatarSize } from "~/components/Avatar";
 import NudeButton from "~/components/NudeButton";
 import { createAction } from "~/actions";
 import { UserSection } from "~/actions/sections";
@@ -22,15 +19,14 @@ import useKeyDown from "~/hooks/useKeyDown";
 import usePolicy from "~/hooks/usePolicy";
 import usePrevious from "~/hooks/usePrevious";
 import useStores from "~/hooks/useStores";
-import { EmptySelectValue, Permission } from "~/types";
+import { Permission } from "~/types";
 import { collectionPath, urlify } from "~/utils/routeHelpers";
 import { Wrapper, presence } from "../components";
 import { CopyLinkButton } from "../components/CopyLinkButton";
-import { ListItem } from "../components/ListItem";
 import { PermissionAction } from "../components/PermissionAction";
 import { SearchInput } from "../components/SearchInput";
 import { Suggestions } from "../components/Suggestions";
-import CollectionMemberList from "./CollectionMemberList";
+import { AccessControlList } from "./AccessControlList";
 
 type Props = {
   /** The collection to share. */
@@ -42,7 +38,6 @@ type Props = {
 };
 
 function SharePopover({ collection, visible, onRequestClose }: Props) {
-  const theme = useTheme();
   const team = useCurrentTeam();
   const { groupMemberships, users, groups, memberships } = useStores();
   const { t } = useTranslation();
@@ -362,40 +357,11 @@ function SharePopover({ collection, visible, onRequestClose }: Props) {
           addPendingId={handleAddPendingId}
           removePendingId={handleRemovePendingId}
           onEscape={handleEscape}
-          showGroups
         />
       )}
 
       <div style={{ display: picker ? "none" : "block" }}>
-        <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>
-          }
-        />
-
-        <CollectionMemberList
+        <AccessControlList
           collection={collection}
           invitedInSession={invitedInSession}
         />

app/components/Sharing/Document/AccessControlList.tsx

@@ -0,0 +1,287 @@
+import { observer } from "mobx-react";
+import { MoreIcon, QuestionMarkIcon, 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 { 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 Scrollable from "~/components/Scrollable";
+import Text from "~/components/Text";
+import useCurrentTeam from "~/hooks/useCurrentTeam";
+import useCurrentUser from "~/hooks/useCurrentUser";
+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 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";
+
+type Props = {
+  /** The document being shared. */
+  document: Document;
+  /** List of users that have been invited during the current editing session */
+  invitedInSession: string[];
+  /** The existing share model, if any. */
+  share: Share | null | undefined;
+  /** The existing share parent model, if any. */
+  sharedParent: Share | null | undefined;
+  /** Callback fired when the popover requests to be closed. */
+  onRequestClose: () => void;
+  /** Whether the popover is visible. */
+  visible: boolean;
+};
+
+export const AccessControlList = observer(
+  ({
+    document,
+    invitedInSession,
+    share,
+    sharedParent,
+    onRequestClose,
+    visible,
+  }: Props) => {
+    const { t } = useTranslation();
+    const theme = useTheme();
+    const collection = document.collection;
+    const usersInCollection = useUsersInCollection(collection);
+    const user = useCurrentUser();
+    const { userMemberships, groupMemberships } = 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,
+      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);
+
+    React.useEffect(() => {
+      void fetchUserMemberships();
+      void fetchGroupMemberships();
+    }, [fetchUserMemberships, fetchGroupMemberships]);
+
+    React.useEffect(() => {
+      calcMaxHeight();
+    });
+
+    return (
+      <ScrollableContainer
+        ref={containerRef}
+        hiddenScrollbars
+        style={{ maxHeight }}
+      >
+        {showLoading ? (
+          <Placeholder />
+        ) : (
+          <>
+            {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}
+                />
+              </>
+            ) : 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}
+              share={share}
+              sharedParent={sharedParent}
+              onRequestClose={onRequestClose}
+            />
+          </Sticky>
+        )}
+      </ScrollableContainer>
+    );
+  }
+);
+
+const AccessTooltip = ({
+  children,
+  content,
+}: {
+  children?: React.ReactNode;
+  content?: string;
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <Flex align="center" gap={2}>
+      <Text type="secondary" size="small">
+        {children}
+      </Text>
+      <Tooltip content={content ?? t("Access inherited from collection")}>
+        <QuestionMarkIcon size={18} />
+      </Tooltip>
+    </Flex>
+  );
+};
+
+const CollectionSquircle = ({ collection }: { collection: Collection }) => {
+  const theme = useTheme();
+  const iconType = determineIconType(collection.icon)!;
+  const squircleColor =
+    iconType === IconType.SVG ? collection.color! : theme.slateLight;
+  const iconSize = iconType === IconType.SVG ? 16 : 22;
+
+  return (
+    <Squircle color={squircleColor} size={AvatarSize.Medium}>
+      <CollectionIcon
+        collection={collection}
+        color={theme.white}
+        size={iconSize}
+      />
+    </Squircle>
+  );
+};
+
+function useUsersInCollection(collection?: Collection) {
+  const { users, memberships } = useStores();
+  const { request } = useRequest(() =>
+    memberships.fetchPage({ limit: 1, id: collection!.id })
+  );
+
+  React.useEffect(() => {
+    if (collection && !collection.permission) {
+      void request();
+    }
+  }, [collection]);
+
+  return collection
+    ? collection.permission
+      ? true
+      : users.inCollection(collection.id).length > 1
+    : false;
+}
+
+const Sticky = styled.div`
+  background: ${s("menuBackground")};
+  position: sticky;
+  bottom: -12px;
+`;
+
+const ScrollableContainer = styled(Scrollable)`
+  padding: 12px 24px;
+  margin: -12px -24px;
+`;

app/components/Sharing/Document/DocumentMemberList.tsx

@@ -1,19 +1,23 @@
 import orderBy from "lodash/orderBy";
 import { observer } from "mobx-react";
 import * as React from "react";
-import { useTranslation } from "react-i18next";
-import { useHistory } from "react-router-dom";
+import { useTranslation, Trans } from "react-i18next";
+import { Link, useHistory } from "react-router-dom";
 import { toast } from "sonner";
-import { Pagination } from "@shared/constants";
+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 LoadingIndicator from "~/components/LoadingIndicator";
+import { GroupAvatar } from "~/components/Avatar";
+import InputMemberPermissionSelect from "~/components/InputMemberPermissionSelect";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import usePolicy from "~/hooks/usePolicy";
-import useRequest from "~/hooks/useRequest";
 import useStores from "~/hooks/useStores";
+import { EmptySelectValue, Permission } from "~/types";
 import { homePath } from "~/utils/routeHelpers";
-import MemberListItem from "./DocumentMemberListItem";
+import { ListItem } from "../components/ListItem";
+import DocumentMemberListItem from "./DocumentMemberListItem";
 
 type Props = {
   /** Document to which team members are supposed to be invited */
@@ -25,27 +29,13 @@ type Props = {
 };
 
 function DocumentMembersList({ document, invitedInSession }: Props) {
-  const { userMemberships } = useStores();
+  const { userMemberships, groupMemberships } = useStores();
+
   const user = useCurrentUser();
   const history = useHistory();
   const can = usePolicy(document);
   const { t } = useTranslation();
-
-  const { loading: loadingDocumentMembers, request: fetchDocumentMembers } =
-    useRequest(
-      React.useCallback(
-        () =>
-          userMemberships.fetchDocumentMemberships({
-            id: document.id,
-            limit: Pagination.defaultLimit,
-          }),
-        [userMemberships, document.id]
-      )
-    );
-
-  React.useEffect(() => {
-    void fetchDocumentMembers();
-  }, [fetchDocumentMembers]);
+  const theme = useTheme();
 
   const handleRemoveUser = React.useCallback(
     async (item) => {
@@ -68,7 +58,7 @@ function DocumentMembersList({ document, invitedInSession }: Props) {
         toast.error(t("Could not remove user"));
       }
     },
-    [history, userMemberships, user, document]
+    [t, history, userMemberships, user, document]
   );
 
   const handleUpdateUser = React.useCallback(
@@ -88,7 +78,7 @@ function DocumentMembersList({ document, invitedInSession }: Props) {
         toast.error(t("Could not update user"));
       }
     },
-    [userMemberships, document]
+    [t, userMemberships, document]
   );
 
   // Order newly added users first during the current editing session, on reload members are
@@ -105,14 +95,101 @@ function DocumentMembersList({ document, invitedInSession }: Props) {
     [document.members, invitedInSession]
   );
 
-  if (loadingDocumentMembers) {
-    return <LoadingIndicator />;
-  }
+  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) => (
-        <MemberListItem
+        <DocumentMemberListItem
           key={item.id}
           user={item}
           membership={item.getMembership(document)}
@@ -131,4 +208,9 @@ function DocumentMembersList({ document, invitedInSession }: Props) {
   );
 }
 
+const StyledLink = styled(Link)`
+  color: ${s("textTertiary")};
+  text-decoration: underline;
+`;
+
 export default observer(DocumentMembersList);

app/components/Sharing/Document/DocumentMemberListItem.tsx

@@ -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 from "~/components/Avatar";
-import { AvatarSize } from "~/components/Avatar/Avatar";
+import { Avatar, AvatarSize } from "~/components/Avatar";
 import InputMemberPermissionSelect from "~/components/InputMemberPermissionSelect";
+import Time from "~/components/Time";
 import { EmptySelectValue, Permission } from "~/types";
 import { ListItem } from "../components/ListItem";
 
@@ -68,7 +68,6 @@ const DocumentMemberListItem = ({
   if (!currentPermission) {
     return null;
   }
-  const disabled = !onUpdate && !onLeave;
   const MaybeLink = membership?.source ? StyledLink : React.Fragment;
 
   return (
@@ -90,36 +89,35 @@ const DocumentMemberListItem = ({
           </Trans>
         ) : user.isSuspended ? (
           t("Suspended")
-        ) : user.email ? (
-          user.email
         ) : user.isInvited ? (
           t("Invited")
-        ) : user.isViewer ? (
-          t("Viewer")
+        ) : user.lastActiveAt ? (
+          <Trans>
+            Active <Time dateTime={user.lastActiveAt} /> ago
+          </Trans>
         ) : (
-          t("Editor")
+          t("Never signed in")
         )
       }
       actions={
-        disabled ? null : (
-          <div style={{ marginRight: -8 }}>
-            <InputMemberPermissionSelect
-              permissions={
-                onLeave
-                  ? [
-                      currentPermission,
-                      {
-                        label: `${t("Leave")}…`,
-                        value: EmptySelectValue,
-                      },
-                    ]
-                  : permissions
-              }
-              value={membership?.permission}
-              onChange={handleChange}
-            />
-          </div>
-        )
+        <div style={{ marginRight: -8 }}>
+          <InputMemberPermissionSelect
+            permissions={
+              onLeave
+                ? [
+                    currentPermission,
+                    {
+                      label: `${t("Leave")}…`,
+                      value: EmptySelectValue,
+                    },
+                  ]
+                : permissions
+            }
+            value={membership?.permission}
+            onChange={handleChange}
+            disabled={!onUpdate && !onLeave}
+          />
+        </div>
       }
     />
   );

app/components/Sharing/Document/OtherAccess.tsx

@@ -1,167 +0,0 @@
-import { observer } from "mobx-react";
-import { MoreIcon, QuestionMarkIcon, UserIcon } from "outline-icons";
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-import { useTheme } from "styled-components";
-import Squircle from "@shared/components/Squircle";
-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 Flex from "~/components/Flex";
-import Text from "~/components/Text";
-import useCurrentUser from "~/hooks/useCurrentUser";
-import useRequest from "~/hooks/useRequest";
-import useStores from "~/hooks/useStores";
-import Avatar from "../../Avatar";
-import { AvatarSize } from "../../Avatar/Avatar";
-import CollectionIcon from "../../Icons/CollectionIcon";
-import Tooltip from "../../Tooltip";
-import { ListItem } from "../components/ListItem";
-
-type Props = {
-  /** The document being shared. */
-  document: Document;
-  children: React.ReactNode;
-};
-
-export const OtherAccess = observer(({ document, children }: Props) => {
-  const { t } = useTranslation();
-  const theme = useTheme();
-  const collection = document.collection;
-  const usersInCollection = useUsersInCollection(collection);
-  const user = useCurrentUser();
-
-  return (
-    <>
-      {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>}
-            />
-          )}
-          {children}
-        </>
-      ) : 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>
-            }
-          />
-          {children}
-        </>
-      ) : (
-        <>
-          {children}
-          <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"
-                )}
-              />
-            }
-          />
-        </>
-      )}
-    </>
-  );
-});
-
-const AccessTooltip = ({
-  children,
-  content,
-}: {
-  children?: React.ReactNode;
-  content?: string;
-}) => {
-  const { t } = useTranslation();
-
-  return (
-    <Flex align="center" gap={2}>
-      <Text type="secondary" size="small">
-        {children}
-      </Text>
-      <Tooltip content={content ?? t("Access inherited from collection")}>
-        <QuestionMarkIcon size={18} />
-      </Tooltip>
-    </Flex>
-  );
-};
-
-const CollectionSquircle = ({ collection }: { collection: Collection }) => {
-  const theme = useTheme();
-  const iconType = determineIconType(collection.icon)!;
-  const squircleColor =
-    iconType === IconType.SVG ? collection.color! : theme.slateLight;
-  const iconSize = iconType === IconType.SVG ? 16 : 22;
-
-  return (
-    <Squircle color={squircleColor} size={AvatarSize.Medium}>
-      <CollectionIcon
-        collection={collection}
-        color={theme.white}
-        size={iconSize}
-      />
-    </Squircle>
-  );
-};
-
-function useUsersInCollection(collection?: Collection) {
-  const { users, memberships } = useStores();
-  const { request } = useRequest(() =>
-    memberships.fetchPage({ limit: 1, id: collection!.id })
-  );
-
-  React.useEffect(() => {
-    if (collection && !collection.permission) {
-      void request();
-    }
-  }, [collection]);
-
-  return collection
-    ? collection.permission
-      ? true
-      : users.inCollection(collection.id).length > 1
-    : false;
-}

app/components/Sharing/Document/PublicAccess.tsx

@@ -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/Avatar";
+import { AvatarSize } from "../../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`
-  margin-bottom: 8px;
+  padding-bottom: 8px;
 `;
 
 const DomainPrefix = styled.span`

app/components/Sharing/Document/SharePopover.tsx

@@ -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 from "~/components/Avatar";
-import { AvatarSize } from "~/components/Avatar/Avatar";
+import { Avatar, GroupAvatar, AvatarSize } from "~/components/Avatar";
 import NudeButton from "~/components/NudeButton";
 import { createAction } from "~/actions";
 import { UserSection } from "~/actions/sections";
@@ -22,14 +22,12 @@ import usePrevious from "~/hooks/usePrevious";
 import useStores from "~/hooks/useStores";
 import { Permission } from "~/types";
 import { documentPath, urlify } from "~/utils/routeHelpers";
-import { Separator, Wrapper, presence } from "../components";
+import { Wrapper, presence } from "../components";
 import { CopyLinkButton } from "../components/CopyLinkButton";
 import { PermissionAction } from "../components/PermissionAction";
 import { SearchInput } from "../components/SearchInput";
 import { Suggestions } from "../components/Suggestions";
-import DocumentMembersList from "./DocumentMemberList";
-import { OtherAccess } from "./OtherAccess";
-import PublicAccess from "./PublicAccess";
+import { AccessControlList } from "./AccessControlList";
 
 type Props = {
   /** The document to share. */
@@ -55,12 +53,11 @@ function SharePopover({
   const { t } = useTranslation();
   const can = usePolicy(document);
   const [hasRendered, setHasRendered] = React.useState(visible);
-  const { users, userMemberships } = useStores();
+  const { users, userMemberships, groups, groupMemberships } = useStores();
   const [query, setQuery] = React.useState("");
   const [picker, showPicker, hidePicker] = useBoolean();
   const [invitedInSession, setInvitedInSession] = React.useState<string[]>([]);
   const [pendingIds, setPendingIds] = React.useState<string[]>([]);
-  const collectionSharingDisabled = document.collection?.sharing === false;
   const [permission, setPermission] = React.useState<DocumentPermission>(
     DocumentPermission.Read
   );
@@ -132,9 +129,9 @@ function SharePopover({
         name: t("Invite"),
         section: UserSection,
         perform: async () => {
-          const usersInvited = await Promise.all(
+          const invited = await Promise.all(
             pendingIds.map(async (idOrEmail) => {
-              let user;
+              let user, group;
 
               // convert email to user
               if (isEmail(idOrEmail)) {
@@ -148,38 +145,77 @@ function SharePopover({
                 user = response[0];
               } else {
                 user = users.get(idOrEmail);
+                group = groups.get(idOrEmail);
               }
 
-              if (!user) {
-                return;
+              if (user) {
+                await userMemberships.create({
+                  documentId: document.id,
+                  userId: user.id,
+                  permission,
+                });
+                return user;
               }
 
-              await userMemberships.create({
-                documentId: document.id,
-                userId: user.id,
-                permission,
-              });
+              if (group) {
+                await groupMemberships.create({
+                  documentId: document.id,
+                  groupId: group.id,
+                  permission,
+                });
+                return group;
+              }
 
-              return user;
+              return;
             })
           );
 
-          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,
-              })
-            );
+          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,
+                })
+              );
+            }
           }
 
           setInvitedInSession((prev) => [...prev, ...pendingIds]);
@@ -188,14 +224,16 @@ function SharePopover({
         },
       }),
     [
-      t,
-      pendingIds,
+      document.id,
+      groupMemberships,
+      groups,
       hidePicker,
       userMemberships,
-      document.id,
+      pendingIds,
       permission,
-      users,
+      t,
       team.defaultUserRole,
+      users,
     ]
   );
 
@@ -341,24 +379,14 @@ function SharePopover({
       )}
 
       <div style={{ display: picker ? "none" : "block" }}>
-        <OtherAccess document={document}>
-          <DocumentMembersList
-            document={document}
-            invitedInSession={invitedInSession}
-          />
-        </OtherAccess>
-
-        {team.sharing && can.share && !collectionSharingDisabled && visible && (
-          <>
-            {document.members.length ? <Separator /> : null}
-            <PublicAccess
-              document={document}
-              share={share}
-              sharedParent={sharedParent}
-              onRequestClose={onRequestClose}
-            />
-          </>
-        )}
+        <AccessControlList
+          document={document}
+          invitedInSession={invitedInSession}
+          share={share}
+          sharedParent={sharedParent}
+          visible={visible}
+          onRequestClose={onRequestClose}
+        />
       </div>
     </Wrapper>
   );

app/components/Sharing/components/Placeholder.tsx

@@ -0,0 +1,47 @@
+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>
+  );
+}

app/components/Sharing/components/Suggestions.tsx

@@ -1,11 +1,10 @@
 import { isEmail } from "class-validator";
 import concat from "lodash/concat";
 import { observer } from "mobx-react";
-import { CheckmarkIcon, CloseIcon, GroupIcon } from "outline-icons";
+import { CheckmarkIcon, CloseIcon } 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 styled from "styled-components";
 import { s } from "@shared/styles";
 import { stringToColor } from "@shared/utils/color";
 import Collection from "~/models/Collection";
@@ -13,8 +12,7 @@ import Document from "~/models/Document";
 import Group from "~/models/Group";
 import User from "~/models/User";
 import ArrowKeyNavigation from "~/components/ArrowKeyNavigation";
-import Avatar from "~/components/Avatar";
-import { AvatarSize, IAvatar } from "~/components/Avatar/Avatar";
+import { Avatar, GroupAvatar, AvatarSize, IAvatar } from "~/components/Avatar";
 import Empty from "~/components/Empty";
 import Placeholder from "~/components/List/Placeholder";
 import Scrollable from "~/components/Scrollable";
@@ -42,8 +40,6 @@ 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;
 };
@@ -57,7 +53,6 @@ export const Suggestions = observer(
       pendingIds,
       addPendingId,
       removePendingId,
-      showGroups,
       onEscape,
     }: Props,
     ref: React.Ref<HTMLDivElement>
@@ -66,9 +61,8 @@ 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({
+    const { maxHeight } = useMaxHeight({
       elementRef: containerRef,
       maxViewportPercentage: 70,
     });
@@ -76,10 +70,7 @@ export const Suggestions = observer(
     const fetchUsersByQuery = useThrottledCallback(
       (query: string) => {
         void users.fetchPage({ query });
-
-        if (showGroups) {
-          void groups.fetchPage({ query });
-        }
+        void groups.fetchPage({ query });
       },
       250,
       undefined,
@@ -107,17 +98,20 @@ export const Suggestions = observer(
           : collection
           ? users.notInCollection(collection.id, query)
           : users.orderedData
-      ).filter((u) => !u.isSuspended);
+      ).filter((u) => !u.isSuspended && u.id !== user.id);
 
       if (isEmail(query)) {
         filtered.push(getSuggestionForEmail(query));
       }
 
-      if (collection?.id) {
-        return [...groups.notInCollection(collection.id, query), ...filtered];
-      }
-
-      return filtered;
+      return [
+        ...(document
+          ? groups.notInDocument(document.id, query)
+          : collection
+          ? groups.notInCollection(collection.id, query)
+          : []),
+        ...filtered,
+      ];
     }, [
       getSuggestionForEmail,
       users,
@@ -141,7 +135,7 @@ export const Suggestions = observer(
               : users.get(id) ?? groups.get(id)
           )
           .filter(Boolean) as User[],
-      [users, getSuggestionForEmail, pendingIds]
+      [users, groups, getSuggestionForEmail, pendingIds]
     );
 
     React.useEffect(() => {
@@ -155,11 +149,7 @@ export const Suggestions = observer(
           subtitle: t("{{ count }} member", {
             count: suggestion.memberCount,
           }),
-          image: (
-            <Squircle color={theme.text} size={AvatarSize.Medium}>
-              <GroupIcon color={theme.background} size={16} />
-            </Squircle>
-          ),
+          image: <GroupAvatar group={suggestion} />,
         };
       }
       return {

app/components/Sharing/components/index.tsx

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

app/components/Sidebar/App.tsx

@@ -34,16 +34,18 @@ import TrashLink from "./components/TrashLink";
 
 function AppSidebar() {
   const { t } = useTranslation();
-  const { documents, ui } = useStores();
+  const { documents, ui, collections } = useStores();
   const team = useCurrentTeam();
   const user = useCurrentUser();
   const can = usePolicy(team);
 
   React.useEffect(() => {
+    void collections.fetchAll();
+
     if (!user.isViewer) {
       void documents.fetchDrafts();
     }
-  }, [documents, user.isViewer]);
+  }, [documents, collections, user.isViewer]);
 
   const [dndArea, setDndArea] = React.useState();
   const handleSidebarRef = React.useCallback((node) => setDndArea(node), []);
@@ -92,43 +94,45 @@ 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>
-              <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>
-                  }
-                />
-              )}
+              <Starred />
             </Section>
             <Section>
               <SharedWithMe />
             </Section>
-            <Section>
-              <Starred />
-            </Section>
             <Section auto>
               <Collections />
             </Section>

app/components/Sidebar/Sidebar.tsx

@@ -4,16 +4,17 @@ 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";
@@ -39,6 +40,7 @@ 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;
@@ -189,6 +191,7 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
         $isSmallerThanMinimum={isSmallerThanMinimum}
         $mobileSidebarVisible={ui.mobileSidebarVisible}
         $collapsed={collapsed}
+        $isMobile={isMobile}
         className={className}
         onPointerMove={handlePointerMove}
         onPointerLeave={handlePointerLeave}
@@ -256,6 +259,7 @@ type ContainerProps = {
   $isHovering: boolean;
   $collapsed: boolean;
   $hidden: boolean;
+  $isMobile: boolean;
 };
 
 const hoverStyles = (props: ContainerProps) => `
@@ -274,14 +278,12 @@ 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, opacity 150ms ease-in-out,
-    transform 150ms ease-out,
+  transition: box-shadow 150ms ease-in-out, transform 150ms ease-out,
     ${s("backgroundTransition")}
       ${(props: ContainerProps) =>
         props.$isAnimating ? `,width ${ANIMATION_MS}ms ease-out` : ""};
@@ -299,7 +301,20 @@ const Container = styled(Flex)<ContainerProps>`
   }
 
   & > div {
-    opacity: ${(props) => (props.$collapsed && !props.$isHovering ? "0" : "1")};
+    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";
+      }
+    }};
   }
 
   ${breakpoint("tablet")`

app/components/Sidebar/components/CollectionLink.tsx

@@ -5,11 +5,10 @@ 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 DocumentReparent from "~/scenes/DocumentReparent";
+import ConfirmMoveDialog from "~/components/ConfirmMoveDialog";
 import Fade from "~/components/Fade";
 import CollectionIcon from "~/components/Icons/CollectionIcon";
 import NudeButton from "~/components/NudeButton";
@@ -22,8 +21,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;
@@ -39,16 +38,13 @@ 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 inStarredSection = useStarredContext();
+  const sidebarContext = useSidebarContext();
   const editableTitleRef = React.useRef<RefHandle>(null);
 
   const handleTitleChange = React.useCallback(
@@ -82,22 +78,12 @@ const CollectionLink: React.FC<Props> = ({
 
       if (
         prevCollection &&
-        prevCollection.permission === null &&
         prevCollection.permission !== collection.permission &&
         !document?.isDraft
       ) {
-        itemRef.current = item;
-
         dialogs.openModal({
-          title: t("Move document"),
-          content: (
-            <DocumentReparent
-              item={item}
-              collection={collection}
-              onSubmit={dialogs.closeAllModals}
-              onCancel={dialogs.closeAllModals}
-            />
-          ),
+          title: t("Change permissions?"),
+          content: <ConfirmMoveDialog item={item} collection={collection} />,
         });
       } else {
         await documents.move({ documentId: id, collectionId: collection.id });
@@ -116,78 +102,69 @@ const CollectionLink: React.FC<Props> = ({
     }),
   });
 
-  const handleTitleEditing = React.useCallback((isEditing: boolean) => {
-    setIsEditing(isEditing);
-  }, []);
-
   const handlePrefetch = React.useCallback(() => {
     void collection.fetchDocuments();
   }, [collection]);
 
   const context = useActionContext({
     activeCollectionId: collection.id,
-    inStarredSection,
+    sidebarContext,
   });
 
   return (
-    <>
-      <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>
-    </>
+    <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>
   );
 };
 

app/components/Sidebar/components/CollectionLinkChildren.tsx

@@ -6,21 +6,26 @@ 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 { DragObject } from "./SidebarLink";
-import useCollectionDocuments from "./useCollectionDocuments";
+import SidebarLink, { DragObject } from "./SidebarLink";
 
 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>;
 };
 
@@ -31,9 +36,8 @@ function CollectionLinkChildren({
 }: Props) {
   const can = usePolicy(collection);
   const manualSort = collection.sort.field === "index";
-  const { documents } = useStores();
+  const { documents, dialogs, collections } = useStores();
   const { t } = useTranslation();
-
   const childDocuments = useCollectionDocuments(collection, documents.active);
 
   // Drop to reorder document
@@ -52,11 +56,26 @@ function CollectionLinkChildren({
       if (!collection) {
         return;
       }
-      void documents.move({
-        documentId: item.id,
-        collectionId: collection.id,
-        index: 0,
-      });
+
+      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,
+        });
+      }
     },
     collect: (monitor) => ({
       isOverReorder: !!monitor.isOver(),
@@ -91,7 +110,17 @@ function CollectionLinkChildren({
             index={index}
           />
         ))}
-        {childDocuments?.length === 0 && <EmptyCollectionPlaceholder />}
+        {childDocuments?.length === 0 && (
+          <SidebarLink
+            label={
+              <Text type="tertiary" size="small" italic>
+                {t("Empty")}
+              </Text>
+            }
+            onClick={() => history.push(collection.url)}
+            depth={2}
+          />
+        )}
       </DocumentsLoader>
     </Folder>
   );

app/components/Sidebar/components/Collections.tsx

@@ -53,7 +53,6 @@ function Collections() {
       <Header id="collections" title={t("Collections")}>
         <Relative>
           <PaginatedList
-            fetch={collections.fetchPage}
             options={params}
             aria-label={t("Collections")}
             items={collections.orderedData}

app/components/Sidebar/components/Disclosure.tsx

@@ -42,7 +42,7 @@ const Button = styled(NudeButton)<{ $root?: boolean }>`
     props.$root &&
     css`
       opacity: 0;
-      left: -16px;
+      left: -18px;
 
       &:hover {
         opacity: 1;

app/components/Sidebar/components/DocumentLink.tsx

@@ -2,11 +2,8 @@ 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";
@@ -22,14 +19,18 @@ 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 { useSharedContext } from "./SharedContext";
-import SidebarLink, { DragObject } from "./SidebarLink";
-import { useStarredContext } from "./StarredContext";
+import { SidebarContextType, useSidebarContext } from "./SidebarContext";
+import SidebarLink from "./SidebarLink";
 
 type Props = {
   node: NavigationNode;
@@ -65,26 +66,23 @@ function InnerDocumentLink(
   const { fetchChildDocuments } = documents;
   const [isEditing, setIsEditing] = React.useState(false);
   const editableTitleRef = React.useRef<RefHandle>(null);
-  const inStarredSection = useStarredContext();
-  const inSharedSection = useSharedContext();
+  const sidebarContext = useSidebarContext();
 
   React.useEffect(() => {
-    if (isActiveDocument && (hasChildDocuments || inSharedSection)) {
+    if (
+      isActiveDocument &&
+      (hasChildDocuments || sidebarContext !== "collections")
+    ) {
       void fetchChildDocuments(node.id);
     }
   }, [
     fetchChildDocuments,
     node.id,
     hasChildDocuments,
-    inSharedSection,
+    sidebarContext,
     isActiveDocument,
   ]);
 
-  const pathToNode = React.useMemo(
-    () => collection?.pathToDocument(node.id).map((entry) => entry.id),
-    [collection, node]
-  );
-
   const showChildren = React.useMemo(
     () =>
       !!(
@@ -100,27 +98,27 @@ function InnerDocumentLink(
     [hasChildDocuments, activeDocument, isActiveDocument, node, collection]
   );
 
-  const [expanded, setExpanded] = React.useState(showChildren);
+  const [expanded, setExpanded, setCollapsed] = useBoolean(showChildren);
 
   React.useEffect(() => {
     if (showChildren) {
-      setExpanded(showChildren);
+      setExpanded();
     }
-  }, [showChildren]);
+  }, [setExpanded, showChildren]);
 
   // when the last child document is removed auto-close the local folder state
   React.useEffect(() => {
     if (expanded && !hasChildDocuments) {
-      setExpanded(false);
+      setCollapsed();
     }
-  }, [expanded, hasChildDocuments]);
+  }, [setCollapsed, expanded, hasChildDocuments]);
 
   const handleDisclosureClick = React.useCallback(
     (ev) => {
       ev?.preventDefault();
-      setExpanded(!expanded);
+      expanded ? setCollapsed() : setExpanded();
     },
-    [expanded]
+    [setCollapsed, setExpanded, expanded]
   );
 
   const handlePrefetch = React.useCallback(() => {
@@ -128,152 +126,52 @@ function InnerDocumentLink(
   }, [prefetchDocument, node]);
 
   const handleTitleChange = React.useCallback(
-    async (title: string) => {
+    async (value: string) => {
       if (!document) {
         return;
       }
       await documents.update({
         id: document.id,
-        title,
+        title: value,
       });
     },
     [documents, document]
   );
   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, 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;
-    }
-  }, []);
+  const [{ isDragging }, drag] = useDragDocument(node, depth, document);
 
   // Drop to re-parent
-  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(),
-    }),
-  });
+  const parentRef = React.useRef<HTMLDivElement>(null);
+  const [{ isOverReparent, canDropToReparent }, dropToReparent] =
+    useDropToReparentDocument(node, setExpanded, parentRef);
 
   // 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;
-      }
-
+  const [{ isOverReorder, isDraggingAnyDocument }, dropToReorder] =
+    useDropToReorderDocument(node, collection, (item) => {
       if (!collection) {
         return;
       }
-      if (item.id === node.id) {
-        return;
-      }
-
       if (expanded) {
-        void documents.move({
+        return {
           documentId: item.id,
           collectionId: collection.id,
           parentDocumentId: node.id,
           index: 0,
-        });
-        return;
+        };
       }
-
-      void documents.move({
+      return {
         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 =
@@ -309,18 +207,18 @@ function InnerDocumentLink(
         return;
       }
       if (ev.key === "ArrowRight" && !expanded) {
-        setExpanded(true);
+        setExpanded();
       }
       if (ev.key === "ArrowLeft" && expanded) {
-        setExpanded(false);
+        setCollapsed();
       }
     },
-    [hasChildren, expanded]
+    [setExpanded, setCollapsed, hasChildren, expanded]
   );
 
   return (
     <>
-      <Relative onDragLeave={resetHoverExpanding}>
+      <Relative ref={parentRef}>
         <Draggable
           key={node.id}
           ref={drag}
@@ -338,7 +236,7 @@ function InnerDocumentLink(
                   pathname: node.url,
                   state: {
                     title: node.title,
-                    starred: inStarredSection,
+                    sidebarContext,
                   },
                 }}
                 icon={icon && <Icon value={icon} color={color} />}
@@ -352,16 +250,25 @@ function InnerDocumentLink(
                     ref={editableTitleRef}
                   />
                 }
-                isActive={(match, location: Location<{ starred?: boolean }>) =>
-                  ((document && location.pathname.endsWith(document.urlId)) ||
-                    !!match) &&
-                  location.state?.starred === inStarredSection
-                }
+                isActive={(
+                  match,
+                  location: Location<{
+                    sidebarContext?: SidebarContextType;
+                  }>
+                ) => {
+                  if (sidebarContext !== location.state?.sidebarContext) {
+                    return false;
+                  }
+                  return (
+                    (document && location.pathname.endsWith(document.urlId)) ||
+                    !!match
+                  );
+                }}
                 isActiveDrop={isOverReparent && canDropToReparent}
                 depth={depth}
                 exact={false}
                 showActions={menuOpen}
-                scrollIntoViewIfNeeded={!inStarredSection}
+                scrollIntoViewIfNeeded={sidebarContext === "collections"}
                 isDraft={isDraft}
                 ref={ref}
                 menu={
@@ -397,7 +304,7 @@ function InnerDocumentLink(
             </DropToImport>
           </div>
         </Draggable>
-        {isDraggingAnyDocument && manualSort && (
+        {isDraggingAnyDocument && collection?.isManualSort && (
           <DropCursor isActiveDrop={isOverReorder} innerRef={dropToReorder} />
         )}
       </Relative>

app/components/Sidebar/components/DraggableCollectionLink.tsx

@@ -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,25 +23,19 @@ type Props = {
   belowCollection: Collection | void;
 };
 
-function useLocationStateStarred() {
-  const location = useLocation<{
-    starred?: boolean;
-  }>();
-  return location.state?.starred;
-}
-
 function DraggableCollectionLink({
   collection,
   activeDocument,
   prefetchDocument,
   belowCollection,
 }: Props) {
-  const locationStateStarred = useLocationStateStarred();
-  const { ui, collections } = useStores();
+  const locationSidebarContext = useLocationState();
+  const sidebarContext = useSidebarContext();
+  const { ui, policies, collections } = useStores();
   const [expanded, setExpanded] = React.useState(
-    collection.id === ui.activeCollectionId && !locationStateStarred
+    collection.id === ui.activeCollectionId &&
+      sidebarContext === locationSidebarContext
   );
-  const can = usePolicy(collection);
   const belowCollectionIndex = belowCollection ? belowCollection.index : null;
 
   // Drop to reorder collection
@@ -58,7 +52,8 @@ function DraggableCollectionLink({
     },
     canDrop: (item) =>
       collection.id !== item.id &&
-      (!belowCollection || item.id !== belowCollection.id),
+      (!belowCollection || item.id !== belowCollection.id) &&
+      policies.abilities(item.id)?.move,
     collect: (monitor: DropTargetMonitor<Collection, Collection>) => ({
       isCollectionDropping: monitor.isOver(),
       isDraggingAnyCollection: monitor.canDrop(),
@@ -76,7 +71,6 @@ function DraggableCollectionLink({
     collect: (monitor) => ({
       isDragging: monitor.isDragging(),
     }),
-    canDrag: () => can.move,
   });
 
   React.useEffect(() => {
@@ -86,10 +80,18 @@ 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 && !locationStateStarred) {
+    if (
+      collection.id === ui.activeCollectionId &&
+      sidebarContext === locationSidebarContext
+    ) {
       setExpanded(true);
     }
-  }, [collection.id, ui.activeCollectionId, locationStateStarred]);
+  }, [
+    collection.id,
+    ui.activeCollectionId,
+    sidebarContext,
+    locationSidebarContext,
+  ]);
 
   const handleDisclosureClick = React.useCallback((ev) => {
     ev?.preventDefault();

app/components/Sidebar/components/EmptyCollectionPlaceholder.tsx

@@ -1,22 +0,0 @@
-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;

app/components/Sidebar/components/GroupLink.tsx

@@ -0,0 +1,48 @@
+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);

app/components/Sidebar/components/HistoryNavigation.tsx

@@ -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>

app/components/Sidebar/components/NavLink.tsx

@@ -10,7 +10,7 @@ import {
   match,
 } from "react-router";
 import { Link } from "react-router-dom";
-import scrollIntoView from "smooth-scroll-into-view-if-needed";
+import scrollIntoView from "scroll-into-view-if-needed";
 import history from "~/utils/history";
 
 const resolveToLocation = (

app/components/Sidebar/components/SharedContext.ts

@@ -1,7 +0,0 @@
-import * as React from "react";
-
-const SharedContext = React.createContext<boolean | undefined>(undefined);
-
-export const useSharedContext = () => React.useContext(SharedContext);
-
-export default SharedContext;

app/components/Sidebar/components/SharedWithMe.tsx

@@ -4,34 +4,38 @@ 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 } = useStores();
+  const { userMemberships, groupMemberships } = 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 [reorderMonitor, dropToReorderRef] = useDropToReorderUserMembership(
-    () => fractionalIndex(null, user.memberships[0].index)
+  const [reorderProps, dropToReorderRef] = useDropToReorderUserMembership(() =>
+    fractionalIndex(null, user.documentMemberships[0].index)
   );
 
   React.useEffect(() => {
@@ -40,29 +44,32 @@ function SharedWithMe() {
     }
   }, [error, t]);
 
-  if (!user.memberships.length) {
+  if (
+    !user.documentMemberships.length &&
+    !user.groupsWithDocumentMemberships.length
+  ) {
     return null;
   }
 
   return (
-    <SharedContext.Provider value={true}>
+    <SidebarContext.Provider value="shared">
       <Flex column>
         <Header id="shared" title={t("Shared with me")}>
+          {user.groupsWithDocumentMemberships.map((group) => (
+            <GroupLink key={group.id} group={group} />
+          ))}
           <Relative>
-            {reorderMonitor.isDragging && (
+            {reorderProps.isDragging && (
               <DropCursor
-                isActiveDrop={reorderMonitor.isOverCursor}
+                isActiveDrop={reorderProps.isOverCursor}
                 innerRef={dropToReorderRef}
                 position="top"
               />
             )}
-            {user.memberships
+            {user.documentMemberships
               .slice(0, page * Pagination.sidebarLimit)
               .map((membership) => (
-                <SharedWithMeLink
-                  key={membership.id}
-                  userMembership={membership}
-                />
+                <SharedWithMeLink key={membership.id} membership={membership} />
               ))}
             {!end && (
               <SidebarLink
@@ -82,7 +89,7 @@ function SharedWithMe() {
           </Relative>
         </Header>
       </Flex>
-    </SharedContext.Provider>
+    </SidebarContext.Provider>
   );
 }