doc

fix: Made the document header components more responsive to the available space
More improvements to LaTeX fence detection
2026-06-13 19:35:02 +03:00 · 2024-12-03 21:59:46 -05:00 · 2024-12-03 21:59:05 -05:00 · 2024-12-02 22:28:59 -05:00 · 2024-12-02 21:58:22 -05:00 · 2024-12-02 21:22:58 -05:00
756 changed files with 28000 additions and 14329 deletions
@@ -4,12 +4,6 @@ defaults: &defaults
  working_directory: ~/outline
  docker:
    - image: cimg/node:20.10
-    - image: cimg/redis:5.0
-    - image: cimg/postgres:14.2
-      environment:
-        POSTGRES_USER: postgres
-        POSTGRES_PASSWORD: password
-        POSTGRES_DB: circle_test
  resource_class: large
  environment:
    NODE_ENV: test
@@ -78,6 +72,14 @@ jobs:
  test-server:
    <<: *defaults
    parallelism: 3
+    docker:
+      - image: cimg/node:20.10
+      - image: cimg/redis:5.0
+      - image: cimg/postgres:14.2
+        environment:
+          POSTGRES_USER: postgres
+          POSTGRES_PASSWORD: password
+          POSTGRES_DB: circle_test
    steps:
      - checkout
      - restore_cache:
@@ -88,7 +90,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
@@ -108,8 +110,7 @@ jobs:
    executor: docker-publisher
    steps:
      - checkout
-      - setup_remote_docker:
-          version: 20.10.6
+      - setup_remote_docker
      - run:
          name: Install Docker buildx
          command: |
@@ -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"]
@@ -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
@@ -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.81.0
+                      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-11-11

 Change License:       Apache License, Version 2.0

@@ -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
    }
  }
-}
+}
@@ -1,8 +1,10 @@
 import {
+  ArchiveIcon,
  CollectionIcon,
  EditIcon,
  PadlockIcon,
  PlusIcon,
+  RestoreIcon,
  SearchIcon,
  ShapesIcon,
  StarredIcon,
@@ -10,16 +12,18 @@ import {
  UnstarredIcon,
 } from "outline-icons";
 import * as React from "react";
+import { toast } from "sonner";
 import stores from "~/stores";
 import Collection from "~/models/Collection";
 import { CollectionEdit } from "~/components/Collection/CollectionEdit";
 import { CollectionNew } from "~/components/Collection/CollectionNew";
 import CollectionDeleteDialog from "~/components/CollectionDeleteDialog";
+import ConfirmationDialog from "~/components/ConfirmationDialog";
 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 +74,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 +100,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,11 +131,22 @@ 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 &&
-    stores.policies.abilities(activeCollectionId).readDocument,
+  visible: ({ activeCollectionId }) => {
+    if (!activeCollectionId) {
+      return false;
+    }
+
+    const collection = stores.collections.get(activeCollectionId);
+
+    if (!collection?.isActive) {
+      return false;
+    }
+
+    return stores.policies.abilities(activeCollectionId).readDocument;
+  },
+
  perform: ({ activeCollectionId }) => {
    history.push(searchPath(undefined, { collectionId: activeCollectionId }));
  },
@@ -140,10 +155,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 +168,7 @@ export const starCollection = createAction({
      stores.policies.abilities(activeCollectionId).star
    );
  },
-  perform: async ({ activeCollectionId, stores }) => {
+  perform: async ({ activeCollectionId }) => {
    if (!activeCollectionId) {
      return;
    }
@@ -167,10 +182,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 +195,7 @@ export const unstarCollection = createAction({
      stores.policies.abilities(activeCollectionId).unstar
    );
  },
-  perform: async ({ activeCollectionId, stores }) => {
+  perform: async ({ activeCollectionId }) => {
    if (!activeCollectionId) {
      return;
    }
@@ -190,19 +205,85 @@ export const unstarCollection = createAction({
  },
 });

+export const archiveCollection = createAction({
+  name: ({ t }) => `${t("Archive")}…`,
+  analyticsName: "Archive collection",
+  section: CollectionSection,
+  icon: <ArchiveIcon />,
+  visible: ({ activeCollectionId, stores }) => {
+    if (!activeCollectionId) {
+      return false;
+    }
+    return !!stores.policies.abilities(activeCollectionId).archive;
+  },
+  perform: async ({ activeCollectionId, stores, t }) => {
+    const { dialogs, collections } = stores;
+    if (!activeCollectionId) {
+      return;
+    }
+    const collection = collections.get(activeCollectionId);
+    if (!collection) {
+      return;
+    }
+
+    dialogs.openModal({
+      title: t("Archive collection"),
+      content: (
+        <ConfirmationDialog
+          onSubmit={async () => {
+            await collection.archive();
+            toast.success(t("Collection archived"));
+          }}
+          submitText={t("Archive")}
+          savingText={`${t("Archiving")}…`}
+        >
+          {t(
+            "Archiving this collection will also archive all documents within it. Documents from the collection will no longer be visible in search results."
+          )}
+        </ConfirmationDialog>
+      ),
+    });
+  },
+});
+
+export const restoreCollection = createAction({
+  name: ({ t }) => t("Restore"),
+  analyticsName: "Restore collection",
+  section: CollectionSection,
+  icon: <RestoreIcon />,
+  visible: ({ activeCollectionId, stores }) => {
+    if (!activeCollectionId) {
+      return false;
+    }
+    return !!stores.policies.abilities(activeCollectionId).restore;
+  },
+  perform: async ({ activeCollectionId, stores, t }) => {
+    if (!activeCollectionId) {
+      return;
+    }
+    const collection = stores.collections.get(activeCollectionId);
+    if (!collection) {
+      return;
+    }
+
+    await collection.restore();
+    toast.success(t("Collection restored"));
+  },
+});
+
 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 +308,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
@@ -1,9 +1,10 @@
-import { DoneIcon, TrashIcon } from "outline-icons";
+import { DoneIcon, SmileyIcon, TrashIcon } from "outline-icons";
 import * as React from "react";
 import { toast } from "sonner";
 import stores from "~/stores";
 import Comment from "~/models/Comment";
 import CommentDeleteDialog from "~/components/CommentDeleteDialog";
+import ViewReactionsDialog from "~/components/Reactions/ViewReactionsDialog";
 import history from "~/utils/history";
 import { createAction } from "..";
 import { DocumentSection } from "../sections";
@@ -88,3 +89,27 @@ export const unresolveCommentFactory = ({
      onUnresolve();
    },
  });
+
+export const viewCommentReactionsFactory = ({
+  comment,
+}: {
+  comment: Comment;
+}) =>
+  createAction({
+    name: ({ t }) => `${t("View reactions")}`,
+    analyticsName: "View comment reactions",
+    section: DocumentSection,
+    icon: <SmileyIcon />,
+    visible: () =>
+      stores.policies.abilities(comment.id).read &&
+      comment.reactions.length > 0,
+    perform: ({ t, event }) => {
+      event?.preventDefault();
+      event?.stopPropagation();
+
+      stores.dialogs.openModal({
+        title: t("Reactions"),
+        content: <ViewReactionsDialog model={comment} />,
+      });
+    },
+  });
@@ -24,25 +24,39 @@ import {
  UnpublishIcon,
  PublishIcon,
  CommentIcon,
-  GlobeIcon,
  CopyIcon,
  EyeIcon,
+  PadlockIcon,
+  GlobeIcon,
+  LogoutIcon,
 } 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 UserMembership from "~/models/UserMembership";
 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 DuplicateDialog from "~/components/DuplicateDialog";
+import ConfirmationDialog from "~/components/ConfirmationDialog";
+import DocumentCopy from "~/components/DocumentCopy";
+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 +80,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 +119,9 @@ export const createDocument = createAction({
      !!currentTeamId && stores.policies.abilities(currentTeamId).createDocument
    );
  },
-  perform: ({ activeCollectionId, inStarredSection }) =>
+  perform: ({ activeCollectionId, sidebarContext }) =>
    history.push(newDocumentPath(activeCollectionId), {
-      starred: inStarredSection,
+      sidebarContext,
    }),
 });

@@ -116,16 +131,35 @@ export const createDocumentFromTemplate = createAction({
  section: DocumentSection,
  icon: <NewDocumentIcon />,
  keywords: "create",
-  visible: ({ currentTeamId, activeDocumentId, stores }) =>
-    !!currentTeamId &&
-    !!activeDocumentId &&
-    !!stores.documents.get(activeDocumentId)?.template &&
-    stores.policies.abilities(currentTeamId).createDocument,
-  perform: ({ activeCollectionId, activeDocumentId, inStarredSection }) =>
+  visible: ({
+    currentTeamId,
+    activeCollectionId,
+    activeDocumentId,
+    stores,
+  }) => {
+    const document = activeDocumentId
+      ? stores.documents.get(activeDocumentId)
+      : undefined;
+
+    if (
+      !currentTeamId ||
+      !document?.isTemplate ||
+      !!document?.isDraft ||
+      !!document?.isDeleted
+    ) {
+      return false;
+    }
+
+    if (activeCollectionId) {
+      return stores.policies.abilities(activeCollectionId).createDocument;
+    }
+    return stores.policies.abilities(currentTeamId).createDocument;
+  },
+  perform: ({ activeCollectionId, activeDocumentId, sidebarContext }) =>
    history.push(
      newDocumentPath(activeCollectionId, { templateId: activeDocumentId }),
      {
-        starred: inStarredSection,
+        sidebarContext,
      }
    ),
 });
@@ -133,7 +167,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 +175,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 +210,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 +236,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 +278,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 +309,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 +337,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,18 +365,20 @@ 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;
    }

    const document = stores.documents.get(activeDocumentId);
-    const share = stores.shares.getByDocumentId(activeDocumentId);
-    const sharedParent = stores.shares.getByDocumentParents(activeDocumentId);
    if (!document) {
      return;
    }
@@ -353,8 +389,6 @@ export const shareDocument = createAction({
      content: (
        <SharePopover
          document={document}
-          share={share}
-          sharedParent={sharedParent}
          onRequestClose={stores.dialogs.closeAllModals}
          visible
        />
@@ -366,7 +400,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 +419,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 +443,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 +463,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 +477,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 +494,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 +536,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 }) =>
@@ -501,7 +562,7 @@ export const duplicateDocument = createAction({
    stores.dialogs.openModal({
      title: t("Copy document"),
      content: (
-        <DuplicateDialog
+        <DocumentCopy
          document={document}
          onSubmit={(response) => {
            stores.dialogs.closeAllModals();
@@ -529,7 +590,7 @@ export const pinDocumentToCollection = createAction({
    });
  },
  analyticsName: "Pin document to collection",
-  section: DocumentSection,
+  section: ActiveDocumentSection,
  icon: <PinIcon />,
  iconInContextMenu: false,
  visible: ({ activeCollectionId, activeDocumentId, stores }) => {
@@ -565,7 +626,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 +658,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 +666,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 +684,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 +719,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 +743,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 +778,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 +843,7 @@ export const moveDocumentToCollection = createAction({
      : t("Move");
  },
  analyticsName: "Move document",
-  section: DocumentSection,
+  section: ActiveDocumentSection,
  icon: <MoveIcon />,
  iconInContextMenu: false,
  visible: ({ activeDocumentId, stores }) => {
@@ -805,7 +872,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 +891,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 +908,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 +919,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 +950,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 +984,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 +1039,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 ?? "");
@@ -971,14 +1054,14 @@ export const openDocumentComments = createAction({
      return;
    }

-    stores.ui.toggleComments(activeDocumentId);
+    stores.ui.toggleComments();
  },
 });

 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 +1082,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 +1119,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 ?? "");
@@ -1057,6 +1140,42 @@ export const toggleViewerInsights = createAction({
  },
 });

+export const leaveDocument = createAction({
+  name: ({ t }) => t("Leave document"),
+  analyticsName: "Leave document",
+  section: ActiveDocumentSection,
+  icon: <LogoutIcon />,
+  visible: ({ currentUserId, activeDocumentId, stores }) => {
+    const membership = stores.userMemberships.orderedData.find(
+      (m) => m.documentId === activeDocumentId && m.userId === currentUserId
+    );
+
+    return !!membership;
+  },
+  perform: async ({ t, location, currentUserId, activeDocumentId, stores }) => {
+    if (!activeDocumentId) {
+      return;
+    }
+
+    const document = stores.documents.get(activeDocumentId);
+
+    try {
+      if (document && location.pathname.startsWith(document.path)) {
+        history.push(homePath());
+      }
+
+      await stores.userMemberships.delete({
+        documentId: activeDocumentId,
+        userId: currentUserId,
+      } as UserMembership);
+
+      toast.success(t("You have left the shared document"));
+    } catch (err) {
+      toast.error(t("Could not leave document"));
+    }
+  },
+});
+
 export const rootDocumentActions = [
  openDocument,
  archiveDocument,
@@ -1066,6 +1185,7 @@ export const rootDocumentActions = [
  importDocument,
  downloadDocument,
  copyDocumentLink,
+  copyDocumentShareLink,
  copyDocumentAsMarkdown,
  starDocument,
  unstarDocument,
@@ -1074,6 +1194,7 @@ export const rootDocumentActions = [
  subscribeDocument,
  unsubscribeDocument,
  duplicateDocument,
+  leaveDocument,
  moveTemplateToWorkspace,
  moveDocumentToCollection,
  openRandomDocument,
@@ -91,6 +91,15 @@ export const navigateToSettings = createAction({
  perform: () => history.push(settingsPath()),
 });

+export const navigateToWorkspaceSettings = createAction({
+  name: ({ t }) => t("Settings"),
+  analyticsName: "Navigate to workspace settings",
+  section: NavigationSection,
+  icon: <SettingsIcon />,
+  visible: () => stores.policies.abilities(stores.auth.team?.id || "").update,
+  perform: () => history.push(settingsPath("details")),
+});
+
 export const navigateToProfileSettings = createAction({
  name: ({ t }) => t("Profile"),
  analyticsName: "Navigate to profile settings",
@@ -216,7 +225,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);
    }
  },
 });
@@ -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;
    }
@@ -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) {
@@ -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,
@@ -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");
@@ -31,7 +31,6 @@ const Actions = styled(Flex)`
  left: 0;
  border-radius: 3px;
  background: ${s("background")};
-  transition: ${s("backgroundTransition")};
  padding: 12px;
  backdrop-filter: blur(20px);

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

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

-        if (ev.key === "Escape") {
+        if (ev.key === "Escape" || ev.key === "Backspace") {
          ev.preventDefault();
          onEscape(ev);
        }
@@ -5,6 +5,7 @@ import { Redirect } from "react-router-dom";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";
 import { changeLanguage } from "~/utils/language";
+import { logoutPath } from "~/utils/routeHelpers";
 import LoadingIndicator from "./LoadingIndicator";

 type Props = {
@@ -32,7 +33,7 @@ const Authenticated = ({ children }: Props) => {
  }

  void auth.logout(true);
-  return <Redirect to="/" />;
+  return <Redirect to={logoutPath()} />;
 };

 export default observer(Authenticated);
@@ -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) {
@@ -102,7 +94,7 @@ const AuthenticatedLayout: React.FC = ({ children }: Props) => {
    !showHistory &&
    can.comment &&
    ui.activeDocumentId &&
-    ui.commentsExpanded.includes(ui.activeDocumentId) &&
+    ui.commentsExpanded &&
    team.getPreference(TeamPreference.Commenting);

  const sidebarRight = (
@@ -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>
  );
 };

@@ -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;
@@ -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>
+  );
+}
@@ -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;
@@ -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 };
@@ -8,18 +8,16 @@ import BreadcrumbMenu from "~/menus/BreadcrumbMenu";
 import { undraggableOnDesktop } from "~/styles";
 import { MenuInternalLink } from "~/types";

-type Props = {
+type Props = React.PropsWithChildren<{
  items: MenuInternalLink[];
  max?: number;
  highlightFirstItem?: boolean;
-};
+}>;

-function Breadcrumb({
-  items,
-  highlightFirstItem,
-  children,
-  max = 2,
-}: React.PropsWithChildren<Props>) {
+function Breadcrumb(
+  { items, highlightFirstItem, children, max = 2 }: Props,
+  ref: React.RefObject<HTMLDivElement> | null
+) {
  const totalItems = items.length;
  const topLevelItems: MenuInternalLink[] = [...items];
  let overflowItems;
@@ -37,7 +35,7 @@ function Breadcrumb({
  }

  return (
-    <Flex justify="flex-start" align="center">
+    <Flex justify="flex-start" align="center" ref={ref}>
      {topLevelItems.map((item, index) => (
        <React.Fragment key={String(item.to) || index}>
          {item.icon}
@@ -67,6 +65,8 @@ const Slash = styled(GoToIcon)`

 const Item = styled(Link)<{ $highlight: boolean; $withIcon: boolean }>`
  ${ellipsis()}
+  ${undraggableOnDesktop()}
+
  display: flex;
  flex-shrink: 1;
  min-width: 0;
@@ -76,7 +76,6 @@ const Item = styled(Link)<{ $highlight: boolean; $withIcon: boolean }>`
  height: 24px;
  font-weight: ${(props) => (props.$highlight ? "500" : "inherit")};
  margin-left: ${(props) => (props.$withIcon ? "4px" : "0")};
-  ${undraggableOnDesktop()}

  svg {
    flex-shrink: 0;
@@ -87,4 +86,4 @@ const Item = styled(Link)<{ $highlight: boolean; $withIcon: boolean }>`
  }
 `;

-export default Breadcrumb;
+export default React.forwardRef<HTMLDivElement, Props>(Breadcrumb);
@@ -1,5 +1,5 @@
 import { LocationDescriptor } from "history";
-import { ExpandedIcon } from "outline-icons";
+import { DisclosureIcon } from "outline-icons";
 import { darken, lighten, transparentize } from "polished";
 import * as React from "react";
 import styled from "styled-components";
@@ -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;
      }
  `};
@@ -189,10 +189,14 @@ const Button = <T extends React.ElementType = "button">(
      <Inner hasIcon={hasIcon} hasText={hasText} disclosure={disclosure}>
        {hasIcon && ic}
        {hasText && <Label hasIcon={hasIcon}>{children || value}</Label>}
-        {disclosure && <ExpandedIcon />}
+        {disclosure && <StyledDisclosureIcon />}
      </Inner>
    </RealButton>
  );
 };

+const StyledDisclosureIcon = styled(DisclosureIcon)`
+  opacity: 0.8;
+`;
+
 export default React.forwardRef(Button);
@@ -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,10 +16,18 @@ import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";

 type Props = {
+  /** The document to display live collaborators for */
  document: Document;
+  /** The maximum number of collaborators to display, defaults to 6 */
+  limit?: number;
 };

+/**
+ * Displays a list of live collaborators for a document, including their avatars
+ * and presence status.
+ */
 function Collaborators(props: Props) {
+  const { limit = 6 } = props;
  const { t } = useTranslation();
  const user = useCurrentUser();
  const currentUserId = user?.id;
@@ -39,15 +47,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]
  );
@@ -72,9 +81,15 @@ function Collaborators(props: Props) {
  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}
+              overflow={collaborators.length - limit}
              users={collaborators}
              renderAvatar={(collaborator) => {
                const isPresent = presentIds.includes(collaborator.id);
@@ -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
@@ -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) {
@@ -0,0 +1,45 @@
+import { ArchiveIcon } from "outline-icons";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import Collection from "~/models/Collection";
+import CollectionIcon from "~/components/Icons/CollectionIcon";
+import { MenuInternalLink } from "~/types";
+import { archivePath, collectionPath } from "~/utils/routeHelpers";
+import Breadcrumb from "./Breadcrumb";
+
+type Props = {
+  collection: Collection;
+};
+
+export const CollectionBreadcrumb: React.FC<Props> = ({ collection }) => {
+  const { t } = useTranslation();
+
+  const items = React.useMemo(() => {
+    const collectionNode: MenuInternalLink = {
+      type: "route",
+      title: collection.name,
+      icon: <CollectionIcon collection={collection} expanded />,
+      to: collectionPath(collection.path),
+    };
+
+    const category: MenuInternalLink | undefined = collection.isArchived
+      ? {
+          type: "route",
+          icon: <ArchiveIcon />,
+          title: t("Archive"),
+          to: archivePath(),
+        }
+      : undefined;
+
+    const output = [];
+    if (category) {
+      output.push(category);
+    }
+
+    output.push(collectionNode);
+
+    return output;
+  }, [collection, t]);
+
+  return <Breadcrumb items={items} highlightFirstItem />;
+};
@@ -201,7 +201,6 @@ const Input = styled.div`
  margin: -8px;
  padding: 8px;
  border-radius: 8px;
-  transition: ${s("backgroundTransition")};

  &:after {
    content: "";
@@ -226,7 +225,7 @@ const Input = styled.div`
  }

  &[data-editing="true"] {
-    background: ${s("secondaryBackground")};
+    background: ${s("backgroundSecondary")};
  }

  .block-menu-trigger,
@@ -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,13 +69,19 @@ 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")};

+  &:not(:last-child) {
+    border-bottom: 1px solid ${s("inputBorder")};
+  }
+
  &:disabled,
  &::placeholder {
    color: ${s("placeholder")};
@@ -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>
          ))}
@@ -1,12 +1,16 @@
 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();

+  if (results.length === 0) {
+    return null;
+  }
+
  return (
    <Container>
      <KBarResults
@@ -14,7 +18,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 +41,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;
 `;
@@ -0,0 +1,3 @@
+import CommandBar from "./CommandBar";
+
+export default CommandBar;
@@ -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;
@@ -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;
@@ -0,0 +1,89 @@
+import { NewDocumentIcon, ShapesIcon } from "outline-icons";
+import * as React from "react";
+import Icon from "~/components/Icon";
+import { createAction } from "~/actions";
+import {
+  ActiveCollectionSection,
+  DocumentSection,
+  TeamSection,
+} from "~/actions/sections";
+import useStores from "~/hooks/useStores";
+import history from "~/utils/history";
+import { newDocumentPath } from "~/utils/routeHelpers";
+
+const useTemplatesAction = () => {
+  const { documents } = useStores();
+
+  React.useEffect(() => {
+    void documents.fetchAllTemplates();
+  }, [documents]);
+
+  const actions = React.useMemo(
+    () =>
+      documents.templatesAlphabetical.map((template) =>
+        createAction({
+          name: template.titleWithDefault,
+          analyticsName: "New document",
+          section: template.isWorkspaceTemplate
+            ? TeamSection
+            : ActiveCollectionSection,
+          icon: template.icon ? (
+            <Icon value={template.icon} color={template.color ?? undefined} />
+          ) : (
+            <NewDocumentIcon />
+          ),
+          keywords: "create",
+          visible: ({ currentTeamId, activeCollectionId, stores }) => {
+            if (activeCollectionId) {
+              return (
+                stores.policies.abilities(activeCollectionId).createDocument &&
+                (template.collectionId === activeCollectionId ||
+                  template.isWorkspaceTemplate)
+              );
+            }
+            return (
+              !!currentTeamId &&
+              stores.policies.abilities(currentTeamId).createDocument &&
+              template.isWorkspaceTemplate
+            );
+          },
+          perform: ({ activeCollectionId, sidebarContext }) =>
+            history.push(
+              newDocumentPath(template.collectionId ?? activeCollectionId, {
+                templateId: template.id,
+              }),
+              {
+                sidebarContext,
+              }
+            ),
+        })
+      ),
+    [documents.templatesAlphabetical]
+  );
+
+  const newFromTemplate = React.useMemo(
+    () =>
+      createAction({
+        id: "templates",
+        name: ({ t }) => t("New from template"),
+        placeholder: ({ t }) => t("Choose a template"),
+        section: DocumentSection,
+        icon: <ShapesIcon />,
+        visible: ({ currentTeamId, activeCollectionId, stores }) => {
+          if (activeCollectionId) {
+            return stores.policies.abilities(activeCollectionId).createDocument;
+          }
+          return (
+            !!currentTeamId &&
+            stores.policies.abilities(currentTeamId).createDocument
+          );
+        },
+        children: () => actions,
+      }),
+    [actions]
+  );
+
+  return newFromTemplate;
+};
+
+export default useTemplatesAction;
@@ -0,0 +1,64 @@
+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: Record<Partial<CollectionPermission> | "null", string> =
+    {
+      [CollectionPermission.Admin]: t("manage access"),
+      [CollectionPermission.ReadWrite]: t("view and edit access"),
+      [CollectionPermission.Read]: t("view only access"),
+      null: t("no access"),
+    };
+
+  const handleSubmit = async () => {
+    await documents.move({
+      documentId: item.id,
+      collectionId: collection.id,
+      ...rest,
+    });
+    dialogs.closeAllModals();
+  };
+
+  return (
+    <ConfirmationDialog
+      onSubmit={handleSubmit}
+      submitText={t("Move document")}
+      savingText={`${t("Moving")}…`}
+    >
+      <Trans
+        defaults="Moving the document <em>{{ title }}</em> to the {{ newCollectionName }} collection will change permission for all workspace members from <em>{{ prevPermission }}</em> to <em>{{ newPermission }}</em>."
+        values={{
+          title: item.title,
+          prevCollectionName: prevCollection?.name,
+          newCollectionName: collection.name,
+          prevPermission: accessMapping[prevCollection?.permission || "null"],
+          newPermission: accessMapping[collection.permission || "null"],
+        }}
+        components={{
+          em: <strong />,
+        }}
+      />
+    </ConfirmationDialog>
+  );
+}
+
+export default observer(ConfirmMoveDialog);
@@ -2,7 +2,7 @@ import { observer } from "mobx-react";
 import { DisconnectedIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import styled, { 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 = {
@@ -36,7 +35,7 @@ function ConnectionStatus() {
  };

  const message = ui.multiplayerErrorCode
-    ? codeToMessage[ui.multiplayerErrorCode]
+    ? codeToMessage[ui.multiplayerErrorCode as keyof typeof codeToMessage]
    : undefined;

  return ui.multiplayerStatus === "connecting" ||
@@ -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")`
@@ -182,7 +182,6 @@ function placeCaret(element: HTMLElement, atStart: boolean) {

 const Content = styled.span`
  background: ${s("background")};
-  transition: ${s("backgroundTransition")};
  color: ${s("text")};
  -webkit-text-fill-color: ${s("text")};
  outline: none;
@@ -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";

@@ -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);
@@ -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,14 @@ 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;
  }

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

@@ -258,9 +294,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 {
@@ -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) {
@@ -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 {
@@ -56,25 +57,25 @@ function useCategory(document: Document): MenuInternalLink | null {
  return null;
 }

-const DocumentBreadcrumb: React.FC<Props> = ({
-  document,
-  children,
-  onlyText,
-}: Props) => {
+function DocumentBreadcrumb(
+  { document, children, onlyText }: Props,
+  ref: React.RefObject<HTMLDivElement> | null
+) {
  const { collections } = useStores();
  const { t } = useTranslation();
  const category = useCategory(document);
  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,
@@ -138,11 +139,11 @@ const DocumentBreadcrumb: React.FC<Props> = ({
  }

  return (
-    <Breadcrumb items={items} highlightFirstItem>
+    <Breadcrumb items={items} ref={ref} highlightFirstItem>
      {children}
    </Breadcrumb>
  );
-};
+}

 const StyledIcon = styled(Icon)`
  margin-right: 2px;
@@ -158,4 +159,4 @@ const SmallSlash = styled(GoToIcon)`
  opacity: 0.5;
 `;

-export default observer(DocumentBreadcrumb);
+export default observer(React.forwardRef(DocumentBreadcrumb));
@@ -39,6 +39,7 @@ function DocumentCard(props: Props) {
  const { collections } = useStores();
  const theme = useTheme();
  const { document, pin, canUpdatePin, isDraggable } = props;
+  const pinnedToHome = React.useRef(!pin?.collectionId).current;
  const collection = document.collectionId
    ? collections.get(document.collectionId)
    : undefined;
@@ -122,13 +123,13 @@ function DocumentCard(props: Props) {
              <Squircle
                color={
                  collection?.color ??
-                  (!pin?.collectionId ? theme.slateLight : theme.slateDark)
+                  (pinnedToHome ? theme.slateLight : theme.slateDark)
                }
              >
                {collection?.icon &&
                collection?.icon !== "letter" &&
                collection?.icon !== "collection" &&
-                !pin?.collectionId ? (
+                pinnedToHome ? (
                  <CollectionIcon collection={collection} color="white" />
                ) : (
                  <DocumentIcon color="white" />
@@ -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;
@@ -0,0 +1,84 @@
+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
+  isEditorInitialized: boolean = false;
+
+  @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
+  setEditorInitialized = (initialized: boolean) => {
+    this.isEditorInitialized = initialized;
+  };
+
+  @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>;
+};
@@ -0,0 +1,149 @@
+import flatten from "lodash/flatten";
+import { observer } from "mobx-react";
+import * as React from "react";
+import { Trans, useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import styled from "styled-components";
+import { NavigationNode } from "@shared/types";
+import Document from "~/models/Document";
+import { FlexContainer, Footer, StyledText } from "~/scenes/DocumentMove";
+import Button from "~/components/Button";
+import DocumentExplorer from "~/components/DocumentExplorer";
+import useCollectionTrees from "~/hooks/useCollectionTrees";
+import useStores from "~/hooks/useStores";
+import { flattenTree } from "~/utils/tree";
+import Switch from "./Switch";
+import Text from "./Text";
+
+type Props = {
+  /** The original document to duplicate */
+  document: Document;
+  onSubmit: (documents: Document[]) => void;
+};
+
+function DocumentCopy({ document, onSubmit }: Props) {
+  const { t } = useTranslation();
+  const { policies } = useStores();
+  const collectionTrees = useCollectionTrees();
+  const [publish, setPublish] = React.useState<boolean>(!!document.publishedAt);
+  const [recursive, setRecursive] = React.useState<boolean>(true);
+  const [selectedPath, selectPath] = React.useState<NavigationNode | null>(
+    null
+  );
+
+  const items = React.useMemo(() => {
+    const nodes = flatten(collectionTrees.map(flattenTree)).filter((node) =>
+      node.collectionId
+        ? policies.get(node.collectionId)?.abilities.createDocument
+        : true
+    );
+
+    if (document.isTemplate) {
+      return nodes
+        .filter((node) => node.type === "collection")
+        .map((node) => ({ ...node, children: [] }));
+    }
+    return nodes;
+  }, [policies, collectionTrees, document.isTemplate]);
+
+  const handlePublishChange = React.useCallback(
+    (ev: React.ChangeEvent<HTMLInputElement>) => {
+      setPublish(ev.target.checked);
+    },
+    []
+  );
+
+  const handleRecursiveChange = React.useCallback(
+    (ev: React.ChangeEvent<HTMLInputElement>) => {
+      setRecursive(ev.target.checked);
+    },
+    []
+  );
+
+  const copy = async () => {
+    if (!selectedPath) {
+      toast.message(t("Select a location to copy"));
+      return;
+    }
+
+    try {
+      const result = await document.duplicate({
+        publish,
+        recursive,
+        title: document.title,
+        collectionId: selectedPath.collectionId,
+        ...(selectedPath.type === "document"
+          ? { parentDocumentId: selectedPath.id }
+          : {}),
+      });
+
+      toast.success(t("Document copied"));
+      onSubmit(result);
+    } catch (err) {
+      toast.error(t("Couldn’t copy the document, try again?"));
+    }
+  };
+
+  return (
+    <FlexContainer column>
+      <DocumentExplorer
+        items={items}
+        onSubmit={copy}
+        onSelect={selectPath}
+        defaultValue={document.parentDocumentId || document.collectionId || ""}
+      />
+      <OptionsContainer>
+        {!document.isTemplate && (
+          <>
+            {document.collectionId && (
+              <Text size="small">
+                <Switch
+                  name="publish"
+                  label={t("Publish")}
+                  labelPosition="right"
+                  checked={publish}
+                  onChange={handlePublishChange}
+                />
+              </Text>
+            )}
+            {document.publishedAt && document.childDocuments.length > 0 && (
+              <Text size="small">
+                <Switch
+                  name="recursive"
+                  label={t("Include nested documents")}
+                  labelPosition="right"
+                  checked={recursive}
+                  onChange={handleRecursiveChange}
+                />
+              </Text>
+            )}
+          </>
+        )}
+      </OptionsContainer>
+      <Footer justify="space-between" align="center" gap={8}>
+        <StyledText type="secondary">
+          {selectedPath ? (
+            <Trans
+              defaults="Copy to <em>{{ location }}</em>"
+              values={{ location: selectedPath.title }}
+              components={{ em: <strong /> }}
+            />
+          ) : (
+            t("Select a location to copy")
+          )}
+        </StyledText>
+        <Button disabled={!selectedPath} onClick={copy}>
+          {t("Copy")}
+        </Button>
+      </Footer>
+    </FlexContainer>
+  );
+}
+
+const OptionsContainer = styled.div`
+  margin: 16px 0 8px 0;
+  padding-left: 24px;
+  padding-right: 24px;
+`;
+
+export default observer(DocumentCopy);
@@ -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";
@@ -31,15 +31,15 @@ import { ancestors, descendants } from "~/utils/tree";
 type Props = {
  /** Action taken upon submission of selected item, could be publish, move etc. */
  onSubmit: () => void;
-
  /** A side-effect of item selection */
  onSelect: (item: NavigationNode | null) => void;
-
  /** Items to be shown in explorer */
  items: NavigationNode[];
+  /** Automatically expand to and select item with the given id */
+  defaultValue?: string;
 };

-function DocumentExplorer({ onSubmit, onSelect, items }: Props) {
+function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
  const isMobile = useMobile();
  const { collections, documents } = useStores();
  const { t } = useTranslation();
@@ -47,12 +47,25 @@ function DocumentExplorer({ onSubmit, onSelect, items }: Props) {

  const [searchTerm, setSearchTerm] = React.useState<string>();
  const [selectedNode, selectNode] = React.useState<NavigationNode | null>(
-    null
+    () => {
+      const node =
+        defaultValue && items.find((item) => item.id === defaultValue);
+      return node || null;
+    }
  );
  const [initialScrollOffset, setInitialScrollOffset] =
    React.useState<number>(0);
  const [activeNode, setActiveNode] = React.useState<number>(0);
-  const [expandedNodes, setExpandedNodes] = React.useState<string[]>([]);
+  const [expandedNodes, setExpandedNodes] = React.useState<string[]>(() => {
+    if (defaultValue) {
+      const node = items.find((item) => item.id === defaultValue);
+      if (node) {
+        return ancestors(node).map((node) => node.id);
+      }
+    }
+    return [];
+  });
+
  const [itemRefs, setItemRefs] = React.useState<
    React.RefObject<HTMLSpanElement>[]
  >([]);
@@ -94,6 +107,15 @@ function DocumentExplorer({ onSubmit, onSelect, items }: Props) {
    onSelect(selectedNode);
  }, [selectedNode, onSelect]);

+  React.useEffect(() => {
+    if (defaultValue && selectedNode && listRef) {
+      const index = nodes.findIndex((node) => node.id === selectedNode.id);
+      if (index > 0) {
+        setTimeout(() => listRef.current?.scrollToItem(index, "center"), 50);
+      }
+    }
+  }, []);
+
  function getNodes() {
    function includeDescendants(item: NavigationNode): NavigationNode[] {
      return expandedNodes.includes(item.id)
@@ -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";
@@ -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;

@@ -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";
@@ -1,97 +0,0 @@
-import { observer } from "mobx-react";
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-import { DocumentValidation } from "@shared/validations";
-import Document from "~/models/Document";
-import ConfirmationDialog from "~/components/ConfirmationDialog";
-import Input from "./Input";
-import Switch from "./Switch";
-import Text from "./Text";
-
-type Props = {
-  /** The original document to duplicate */
-  document: Document;
-  onSubmit: (documents: Document[]) => void;
-};
-
-function DuplicateDialog({ document, onSubmit }: Props) {
-  const { t } = useTranslation();
-  const defaultTitle = t(`Copy of {{ documentName }}`, {
-    documentName: document.title,
-  });
-  const [publish, setPublish] = React.useState<boolean>(!!document.publishedAt);
-  const [recursive, setRecursive] = React.useState<boolean>(true);
-  const [title, setTitle] = React.useState<string>(defaultTitle);
-
-  const handlePublishChange = React.useCallback(
-    (ev: React.ChangeEvent<HTMLInputElement>) => {
-      setPublish(ev.target.checked);
-    },
-    []
-  );
-
-  const handleRecursiveChange = React.useCallback(
-    (ev: React.ChangeEvent<HTMLInputElement>) => {
-      setRecursive(ev.target.checked);
-    },
-    []
-  );
-
-  const handleTitleChange = React.useCallback(
-    (ev: React.ChangeEvent<HTMLInputElement>) => {
-      setTitle(ev.target.value);
-    },
-    []
-  );
-
-  const handleSubmit = async () => {
-    const result = await document.duplicate({
-      publish,
-      recursive,
-      title,
-    });
-    onSubmit(result);
-  };
-
-  return (
-    <ConfirmationDialog onSubmit={handleSubmit} submitText={t("Duplicate")}>
-      <Input
-        autoFocus
-        autoSelect
-        name="title"
-        label={t("Title")}
-        onChange={handleTitleChange}
-        maxLength={DocumentValidation.maxTitleLength}
-        defaultValue={defaultTitle}
-      />
-      {!document.isTemplate && (
-        <>
-          {document.collectionId && (
-            <Text size="small">
-              <Switch
-                name="publish"
-                label={t("Published")}
-                labelPosition="right"
-                checked={publish}
-                onChange={handlePublishChange}
-              />
-            </Text>
-          )}
-          {document.publishedAt && (
-            <Text size="small">
-              <Switch
-                name="recursive"
-                label={t("Include nested documents")}
-                labelPosition="right"
-                checked={recursive}
-                onChange={handleRecursiveChange}
-              />
-            </Text>
-          )}
-        </>
-      )}
-    </ConfirmationDialog>
-  );
-}
-
-export default observer(DuplicateDialog);
@@ -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(
@@ -107,7 +98,7 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
      }

      // default search for anything that doesn't look like a URL
-      const results = await documents.searchTitles(term);
+      const results = await documents.searchTitles({ query: term });

      return sortBy(
        results.map(({ document }) => ({
@@ -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,26 +237,25 @@ 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 (
    <ErrorBoundary component="div" reloadOnChunkMissing>
      <>
        <LazyLoadedEditor
+          key={props.extensions?.length || 0}
          ref={mergeRefs([ref, localRef, handleRefChanged])}
          uploadFile={handleUploadFile}
          embeds={embeds}
@@ -293,14 +268,15 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
          placeholder={props.placeholder || ""}
          defaultValue={props.defaultValue || ""}
        />
-        {props.editorStyle?.paddingBottom && !props.readOnly && (
-          <ClickablePadding
-            onClick={focusAtEnd}
-            onDrop={handleDrop}
-            onDragOver={handleDragOver}
-            minHeight={props.editorStyle.paddingBottom}
-          />
-        )}
+        {props.editorStyle?.paddingBottom &&
+          (!props.readOnly || props.shareId) && (
+            <ClickablePadding
+              onClick={props.readOnly ? undefined : focusAtEnd}
+              onDrop={props.readOnly ? undefined : handleDrop}
+              onDragOver={props.readOnly ? undefined : handleDragOver}
+              minHeight={props.editorStyle.paddingBottom}
+            />
+          )}
      </>
    </ErrorBoundary>
  );
@@ -0,0 +1,20 @@
+import styled from "styled-components";
+import { s } from "@shared/styles";
+
+type Props = {
+  /** Width of the containing element. */
+  width?: number | string;
+  /** Height of the containing element. */
+  height?: number | string;
+  /** Controls the rendered emoji size. */
+  size?: number;
+};
+
+export const Emoji = styled.span<Props>`
+  font-family: ${s("fontFamilyEmoji")};
+  width: ${({ width }) =>
+    typeof width === "string" ? width : width ? `${width}px` : "auto"};
+  height: ${({ height }) =>
+    typeof height === "string" ? height : height ? `${height}px` : "auto"};
+  font-size: ${({ size }) => size && `${size}px`};
+`;
@@ -138,7 +138,7 @@ class ErrorBoundary extends React.Component<Props> {
 }

 const Pre = styled.pre`
-  background: ${s("secondaryBackground")};
+  background: ${s("backgroundSecondary")};
  padding: 16px;
  border-radius: 4px;
  font-size: 12px;
@@ -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";
@@ -26,7 +27,7 @@ import { documentHistoryPath } from "~/utils/routeHelpers";

 type Props = {
  document: Document;
-  event: Event;
+  event: Event<Document>;
  latest?: boolean;
 };

@@ -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;
@@ -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[];
@@ -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 rgb(34 40 52);
+    background: ${s("menuBackground")};
+  }
+
+  ${NativeInput} {
+    font-size: 14px;
+  }
+`;
+
 const Note = styled(Text)`
  display: block;
  margin: 2px 0;
@@ -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 (
@@ -80,7 +75,7 @@ const Image = styled(Flex)`
  justify-content: center;
  width: 32px;
  height: 32px;
-  background: ${s("secondaryBackground")};
+  background: ${s("backgroundSecondary")};
  border-radius: 32px;
 `;

@@ -94,7 +94,6 @@ const Scene = styled.div`
  align-items: flex-start;
  width: 350px;
  background: ${s("background")};
-  transition: ${s("backgroundTransition")};
  border-radius: 8px;
  outline: none;
  opacity: 0;
@@ -3,6 +3,7 @@ import { observer } from "mobx-react";
 import { MenuIcon } from "outline-icons";
 import { transparentize } from "polished";
 import * as React from "react";
+import { mergeRefs } from "react-merge-refs";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { depths, s } from "@shared/styles";
@@ -10,25 +11,34 @@ import { supportsPassiveListener } from "@shared/utils/browser";
 import Button from "~/components/Button";
 import Fade from "~/components/Fade";
 import Flex from "~/components/Flex";
+import useComponentSize from "~/hooks/useComponentSize";
 import useEventListener from "~/hooks/useEventListener";
 import useMobile from "~/hooks/useMobile";
 import useStores from "~/hooks/useStores";
 import { draggableOnDesktop, fadeOnDesktopBackgrounded } from "~/styles";
 import Desktop from "~/utils/Desktop";

+export const HEADER_HEIGHT = 64;
+
 type Props = {
  left?: React.ReactNode;
  title: React.ReactNode;
-  actions?: React.ReactNode;
+  actions?:
+    | ((props: { isCompact: boolean }) => React.ReactNode)
+    | React.ReactNode;
  hasSidebar?: boolean;
  className?: string;
 };

-function Header({ left, title, actions, hasSidebar, className }: Props) {
+function Header(
+  { left, title, actions, hasSidebar, className }: Props,
+  ref: React.RefObject<HTMLDivElement> | null
+) {
  const { ui } = useStores();
  const isMobile = useMobile();
  const hasMobileSidebar = hasSidebar && isMobile;
-
+  const internalRef = React.useRef<HTMLDivElement | null>(null);
+  const breadcrumbsRef = React.useRef<HTMLDivElement | null>(null);
  const passThrough = !actions && !left && !title;

  const [isScrolled, setScrolled] = React.useState(false);
@@ -51,8 +61,18 @@ function Header({ left, title, actions, hasSidebar, className }: Props) {
    });
  }, []);

+  const setBreadcrumbRef = React.useCallback((node: HTMLDivElement) => {
+    breadcrumbsRef.current = node.firstElementChild as HTMLDivElement;
+  }, []);
+
+  const size = useComponentSize(internalRef);
+  const breadcrumbsSize = useComponentSize(breadcrumbsRef);
+  const breadcrumbMakesCompact = breadcrumbsSize.width > size.width / 3;
+  const isCompact = size.width < 1000 || breadcrumbMakesCompact;
+
  return (
    <Wrapper
+      ref={mergeRefs([ref, internalRef])}
      align="center"
      shrink={false}
      className={className}
@@ -60,7 +80,7 @@ function Header({ left, title, actions, hasSidebar, className }: Props) {
      $insetTitleAdjust={ui.sidebarIsClosed && Desktop.hasInsetTitlebar()}
    >
      {left || hasMobileSidebar ? (
-        <Breadcrumbs>
+        <Breadcrumbs ref={setBreadcrumbRef}>
          {hasMobileSidebar && (
            <MobileMenuButton
              onClick={ui.toggleMobileSidebar}
@@ -72,7 +92,7 @@ function Header({ left, title, actions, hasSidebar, className }: Props) {
        </Breadcrumbs>
      ) : null}

-      {isScrolled ? (
+      {isScrolled && !isCompact ? (
        <Title onClick={handleClickTitle}>
          <Fade>{title}</Fade>
        </Title>
@@ -80,7 +100,7 @@ function Header({ left, title, actions, hasSidebar, className }: Props) {
        <div />
      )}
      <Actions align="center" justify="flex-end">
-        {actions}
+        {typeof actions === "function" ? actions({ isCompact }) : actions}
      </Actions>
    </Wrapper>
  );
@@ -128,9 +148,8 @@ const Wrapper = styled(Flex)<WrapperProps>`
      `};

  padding: 12px;
-  transition: all 100ms ease-out;
  transform: translate3d(0, 0, 0);
-  min-height: 64px;
+  min-height: ${HEADER_HEIGHT}px;
  justify-content: flex-start;
  ${draggableOnDesktop()}

@@ -150,7 +169,6 @@ const Wrapper = styled(Flex)<WrapperProps>`

  ${breakpoint("tablet")`
    padding: 16px;
-    justify-content: center;
    ${(props: WrapperProps) => props.$insetTitleAdjust && `padding-left: 64px;`}
    `};
 `;
@@ -189,4 +207,4 @@ const MobileMenuButton = styled(Button)`
  }
 `;

-export default observer(Header);
+export default observer(React.forwardRef(Header));
@@ -61,7 +61,7 @@ export const Label = styled(Text).attrs({ size: "xsmall", weight: "bold" })<{
  color?: string;
 }>`
  background-color: ${(props) =>
-    props.color ?? props.theme.secondaryBackground};
+    props.color ?? props.theme.backgroundSecondary};
  color: ${(props) =>
    props.color ? getTextColor(props.color) : props.theme.text};
  width: fit-content;
@@ -125,6 +125,7 @@ function HoverPreviewDesktop({ element, data, dataLoading, onClose }: Props) {
                avatarUrl={data.avatarUrl}
                color={data.color}
                lastActive={data.lastActive}
+                email={data.email}
              />
            ) : data.type === UnfurlResourceType.Document ? (
              <HoverPreviewDocument
@@ -1,8 +1,8 @@
 import * as React from "react";
 import { Trans } from "react-i18next";
 import { UnfurlResourceType, UnfurlResponse } from "@shared/types";
+import { Avatar } from "~/components/Avatar";
 import Flex from "~/components/Flex";
-import Avatar from "../Avatar";
 import { IssueStatusIcon } from "../Icons/IssueStatusIcon";
 import Text from "../Text";
 import Time from "../Time";
@@ -1,14 +1,13 @@
 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";

 type Props = Omit<UnfurlResponse[UnfurlResourceType.Mention], "type">;

 const HoverPreviewMention = React.forwardRef(function _HoverPreviewMention(
-  { avatarUrl, name, lastActive, color }: Props,
+  { avatarUrl, name, lastActive, color, email }: Props,
  ref: React.Ref<HTMLDivElement>
 ) {
  return (
@@ -26,6 +25,7 @@ const HoverPreviewMention = React.forwardRef(function _HoverPreviewMention(
            />
            <Flex column gap={2} justify="center">
              <Title>{name}</Title>
+              {email && <Info>{email}</Info>}
              <Info>{lastActive}</Info>
            </Flex>
          </Flex>
@@ -1,8 +1,8 @@
 import * as React from "react";
 import { Trans } from "react-i18next";
 import { UnfurlResourceType, UnfurlResponse } from "@shared/types";
+import { Avatar } from "~/components/Avatar";
 import Flex from "~/components/Flex";
-import Avatar from "../Avatar";
 import { PullRequestIcon } from "../Icons/PullRequestIcon";
 import Text from "../Text";
 import Time from "../Time";
@@ -2,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;
@@ -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")};
  }
 `;

@@ -1,8 +0,0 @@
-import styled from "styled-components";
-import { s } from "@shared/styles";
-
-export const Emoji = styled.span`
-  font-family: ${s("fontFamilyEmoji")};
-  width: 24px;
-  height: 24px;
-`;
@@ -18,11 +18,7 @@ import {
 import GridTemplate, { DataNode } from "./GridTemplate";
 import SkinTonePicker from "./SkinTonePicker";

-/**
- * This is needed as a constant for react-window.
- * Calculated from the heights of TabPanel and InputSearch.
- */
-const GRID_HEIGHT = 362;
+const GRID_HEIGHT = 410;

 const useEmojiState = () => {
  const [emojiSkinTone, setEmojiSkinTone] = usePersistedState<EmojiSkinTone>(
@@ -80,6 +76,7 @@ type Props = {
  panelWidth: number;
  query: string;
  panelActive: boolean;
+  height?: number;
  onEmojiChange: (emoji: string) => void;
  onQueryChange: (query: string) => void;
 };
@@ -90,6 +87,7 @@ const EmojiPanel = ({
  panelActive,
  onEmojiChange,
  onQueryChange,
+  height = GRID_HEIGHT,
 }: Props) => {
  const { t } = useTranslation();

@@ -159,7 +157,7 @@ const EmojiPanel = ({
      <GridTemplate
        ref={scrollableRef}
        width={panelWidth}
-        height={GRID_HEIGHT}
+        height={height - 48}
        data={templateData}
        onIconSelect={handleEmojiSelection}
      />
@@ -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
@@ -4,9 +4,9 @@ import React from "react";
 import styled from "styled-components";
 import { IconType } from "@shared/types";
 import { IconLibrary } from "@shared/utils/IconLibrary";
+import { Emoji } from "~/components/Emoji";
 import Text from "~/components/Text";
 import { TRANSLATED_CATEGORIES } from "../utils";
-import { Emoji } from "./Emoji";
 import Grid from "./Grid";
 import { IconButton } from "./IconButton";

@@ -71,7 +71,7 @@ const GridTemplate = (
            <IconButton
              key={item.name}
              onClick={() => onIconSelect({ id: item.name, value: item.name })}
-              delay={item.delay}
+              style={{ "--delay": `${item.delay}ms` } as React.CSSProperties}
            >
              <Icon as={IconLibrary.getComponent(item.name)} color={item.color}>
                {item.initial}
@@ -85,7 +85,9 @@ const GridTemplate = (
            key={item.id}
            onClick={() => onIconSelect({ id: item.id, value: item.value })}
          >
-            <Emoji>{item.value}</Emoji>
+            <Emoji width={24} height={24}>
+              {item.value}
+            </Emoji>
          </IconButton>
        );
      });
@@ -7,7 +7,6 @@ export const IconButton = styled(NudeButton)<{ delay?: number }>`
  width: 32px;
  height: 32px;
  padding: 4px;
-  --delay: ${({ delay }) => delay && `${delay}ms`};

  &: ${hover} {
    background: ${s("listItemHoverBackground")};
@@ -5,10 +5,10 @@ import styled from "styled-components";
 import { depths, s } from "@shared/styles";
 import { EmojiSkinTone } from "@shared/types";
 import { getEmojiVariants } from "@shared/utils/emoji";
+import { Emoji } from "~/components/Emoji";
 import Flex from "~/components/Flex";
 import NudeButton from "~/components/NudeButton";
 import { hover } from "~/styles";
-import { Emoji } from "./Emoji";
 import { IconButton } from "./IconButton";

 const SkinTonePicker = ({
@@ -26,7 +26,7 @@ const SkinTonePicker = ({
  );

  const menu = useMenuState({
-    placement: "bottom",
+    placement: "bottom-end",
  });

  const handleSkinClick = React.useCallback(
@@ -43,7 +43,9 @@ const SkinTonePicker = ({
        <MenuItem {...menu} key={emoji.value}>
          {(menuprops) => (
            <IconButton {...menuprops} onClick={() => handleSkinClick(eskin)}>
-              <Emoji>{emoji.value}</Emoji>
+              <Emoji width={24} height={24}>
+                {emoji.value}
+              </Emoji>
            </IconButton>
          )}
        </MenuItem>
@@ -82,6 +82,7 @@ const IconPicker = ({
    modal: true,
    unstable_offset: [0, 0],
  });
+  const { hide, show, visible } = popover;
  const tab = useTabState({ selectedId: defaultTab });
  const previouslyVisible = usePrevious(popover.visible);

@@ -96,12 +97,12 @@ const IconPicker = ({

  const handleIconChange = React.useCallback(
    (ic: string) => {
-      popover.hide();
+      hide();
      const icType = determineIconType(ic);
      const finalColor = icType === IconType.SVG ? chosenColor : null;
      onChange(ic, finalColor);
    },
-    [popover, onChange, chosenColor]
+    [hide, onChange, chosenColor]
  );

  const handleIconColorChange = React.useCallback(
@@ -118,32 +119,32 @@ const IconPicker = ({
  );

  const handleIconRemove = React.useCallback(() => {
-    popover.hide();
+    hide();
    onChange(null, null);
-  }, [popover, onChange]);
+  }, [hide, onChange]);

  const handlePopoverButtonClick = React.useCallback(
    (ev: React.MouseEvent) => {
      ev.stopPropagation();
-      if (popover.visible) {
-        popover.hide();
+      if (visible) {
+        hide();
      } else {
-        popover.show();
+        show();
      }
    },
-    [popover]
+    [hide, show, visible]
  );

  // Popover open effect
  React.useEffect(() => {
-    if (popover.visible && !previouslyVisible) {
+    if (visible && !previouslyVisible) {
      onOpen?.();
-    } else if (!popover.visible && previouslyVisible) {
+    } else if (!visible && previouslyVisible) {
      onClose?.();
      setQuery("");
      resetDefaultTab();
    }
-  }, [popover.visible, previouslyVisible, onOpen, onClose, resetDefaultTab]);
+  }, [visible, previouslyVisible, onOpen, onClose, resetDefaultTab]);

  // Custom click outside handling rather than using `hideOnClickOutside` from reakit so that we can
  // prevent event bubbling.
@@ -198,7 +199,7 @@ const IconPicker = ({
                {...tab}
                id={TAB_NAMES["Icon"]}
                aria-label={t("Icons")}
-                active={tab.selectedId === TAB_NAMES["Icon"]}
+                $active={tab.selectedId === TAB_NAMES["Icon"]}
              >
                {t("Icons")}
              </StyledTab>
@@ -206,7 +207,7 @@ const IconPicker = ({
                {...tab}
                id={TAB_NAMES["Emoji"]}
                aria-label={t("Emojis")}
-                active={tab.selectedId === TAB_NAMES["Emoji"]}
+                $active={tab.selectedId === TAB_NAMES["Emoji"]}
              >
                {t("Emojis")}
              </StyledTab>
@@ -273,7 +274,7 @@ const TabActionsWrapper = styled(Flex)`
  border-bottom: 1px solid ${s("inputBorder")};
 `;

-const StyledTab = styled(Tab)<{ active: boolean }>`
+const StyledTab = styled(Tab)<{ $active: boolean }>`
  position: relative;
  font-weight: 500;
  font-size: 14px;
@@ -282,15 +283,15 @@ const StyledTab = styled(Tab)<{ active: boolean }>`
  border: 0;
  padding: 8px 12px;
  user-select: none;
-  color: ${({ active }) => (active ? s("textSecondary") : s("textTertiary"))};
+  color: ${({ $active }) => ($active ? s("textSecondary") : s("textTertiary"))};
  transition: color 100ms ease-in-out;

  &: ${hover} {
    color: ${s("textSecondary")};
  }

-  ${({ active }) =>
-    active &&
+  ${({ $active }) =>
+    $active &&
    css`
      &:after {
        content: "";
@@ -309,4 +310,4 @@ const StyledTabPanel = styled(TabPanel)`
  overflow-y: auto;
 `;

-export default IconPicker;
+export default React.memo(IconPicker);
@@ -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}
    />
  );
 }
@@ -10,7 +10,7 @@ import * as React from "react";
 import { VisuallyHidden } from "reakit/VisuallyHidden";
 import styled, { css } from "styled-components";
 import { s } from "@shared/styles";
-import Button, { Inner } from "~/components/Button";
+import Button, { Props as ButtonProps, Inner } from "~/components/Button";
 import Text from "~/components/Text";
 import useMenuHeight from "~/hooks/useMenuHeight";
 import useMobile from "~/hooks/useMobile";
@@ -33,7 +33,7 @@ export type Option = {
  divider?: boolean;
 };

-export type Props = {
+export type Props = Omit<ButtonProps<any>, "onChange"> & {
  id?: string;
  name?: string;
  value?: string | null;
@@ -313,7 +313,7 @@ const StyledButton = styled(Button)<{ $nude?: boolean }>`
  margin-bottom: 16px;
  display: block;
  width: 100%;
-  cursor: default;
+  cursor: var(--pointer);

  &:hover:not(:disabled) {
    background: ${s("buttonNeutralBackground")};
@@ -352,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};
@@ -1,6 +1,8 @@
 import * as React from "react";
 import { useTranslation } from "react-i18next";
+import styled from "styled-components";
 import { $Diff } from "utility-types";
+import { s } from "@shared/styles";
 import { CollectionPermission } from "@shared/types";
 import { EmptySelectValue } from "~/types";
 import InputSelect, { Props, Option, InputSelectRef } from "./InputSelect";
@@ -19,7 +21,7 @@ function InputSelectPermission(
  const { t } = useTranslation();

  return (
-    <InputSelect
+    <Select
      ref={ref}
      label={t("Permission")}
      options={[
@@ -45,4 +47,8 @@ function InputSelectPermission(
  );
 }

+const Select = styled(InputSelect)`
+  color: ${s("textSecondary")};
+`;
+
 export default React.forwardRef(InputSelectPermission);
@@ -47,14 +47,16 @@ export default function LanguagePrompt() {
          <br />
          <Link
            onClick={async () => {
-              ui.setLanguagePromptDismissed();
+              ui.set({ languagePromptDismissed: true });
              await user.save({ language });
            }}
          >
            {t("Change Language")}
          </Link>{" "}
          &middot;{" "}
-          <Link onClick={ui.setLanguagePromptDismissed}>{t("Dismiss")}</Link>
+          <Link onClick={() => ui.set({ languagePromptDismissed: true })}>
+            {t("Dismiss")}
+          </Link>
        </span>
      </Flex>
    </Wrapper>
@@ -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 />
@@ -77,7 +76,6 @@ const Layout = React.forwardRef(function Layout_(

 const Container = styled(Flex)`
  background: ${s("background")};
-  transition: ${s("backgroundTransition")};
  position: relative;
  width: 100%;
  min-height: 100%;
@@ -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);
@@ -188,7 +192,7 @@ const Wrapper = styled.a<{
  &:focus,
  &:focus-within {
    background: ${(props) =>
-      props.$hover ? props.theme.secondaryBackground : "inherit"};
+      props.$hover ? props.theme.backgroundSecondary : "inherit"};
  }

  cursor: ${(props) =>
@@ -39,12 +39,15 @@ const LocaleTime: React.FC<Props> = ({
  relative,
  tooltipDelay,
 }: Props) => {
-  const userLocale: string = useUserLocale() || "";
-  const dateFormatLong = {
+  const userLocale = useUserLocale();
+  const dateFormatLong: Record<string, string> = {
    en_US: "MMMM do, yyyy h:mm a",
    fr_FR: "'Le 'd MMMM yyyy 'à' H:mm",
  };
-  const formatLocaleLong = dateFormatLong[userLocale] ?? "MMMM do, yyyy h:mm a";
+  const formatLocaleLong =
+    (userLocale ? dateFormatLong[userLocale] : undefined) ??
+    "MMMM do, yyyy h:mm a";
+  // @ts-expect-error fallback to formatLocaleLong
  const formatLocale = format?.[userLocale] ?? formatLocaleLong;
  const [_, setMinutesMounted] = React.useState(0); // eslint-disable-line @typescript-eslint/no-unused-vars
  const callback = React.useRef<() => void>();
@@ -174,7 +174,6 @@ const Fullscreen = styled.div<FullscreenProps>`
  justify-content: center;
  align-items: flex-start;
  background: ${s("background")};
-  transition: ${s("backgroundTransition")};
  outline: none;

  ${breakpoint("tablet")`
@@ -265,7 +264,6 @@ const Small = styled.div`
  justify-content: center;
  align-items: flex-start;
  background: ${s("modalBackground")};
-  transition: ${s("backgroundTransition")};
  box-shadow: ${s("modalShadow")};
  border-radius: 8px;
  outline: none;
@@ -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?: (
@@ -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";
@@ -24,13 +24,15 @@ import NotificationListItem from "./NotificationListItem";
 type Props = {
  /** Callback when the notification panel wants to close. */
  onRequestClose: () => void;
+  /** Whether the panel is open or not. */
+  isOpen: boolean;
 };

 /**
 * A panel containing a list of notifications and controls to manage them.
 */
 function Notifications(
-  { onRequestClose }: Props,
+  { onRequestClose, isOpen }: Props,
  ref: React.RefObject<HTMLDivElement>
 ) {
  const context = useActionContext();
@@ -72,7 +74,7 @@ function Notifications(
            <PaginatedList
              fetch={notifications.fetchPage}
              options={{ archived: false }}
-              items={notifications.orderedData}
+              items={isOpen ? notifications.orderedData : undefined}
              renderItem={(item: Notification) => (
                <NotificationListItem
                  key={item.id}
@@ -40,7 +40,11 @@ const NotificationsPopover: React.FC = ({ children }: Props) => {
        shrink
        flex
      >
-        <Notifications onRequestClose={popover.hide} ref={scrollableRef} />
+        <Notifications
+          onRequestClose={popover.hide}
+          isOpen={popover.visible}
+          ref={scrollableRef}
+        />
      </StyledPopover>
    </>
  );
@@ -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>
  );
 };
@@ -6,9 +6,11 @@ import PaginatedList from "~/components/PaginatedList";
 import EventListItem from "./EventListItem";

 type Props = {
-  events: Event[];
+  events: Event<Document>[];
  document: Document;
-  fetch: (options: Record<string, any> | undefined) => Promise<Event[]>;
+  fetch: (
+    options: Record<string, any> | undefined
+  ) => Promise<Event<Document>[]>;
  options?: Record<string, any>;
  heading?: React.ReactNode;
  empty?: React.ReactNode;
@@ -30,7 +32,7 @@ const PaginatedEventList = React.memo<Props>(function PaginatedEventList({
      heading={heading}
      fetch={fetch}
      options={options}
-      renderItem={(item: Event, index) => (
+      renderItem={(item: Event<Document>, index) => (
        <EventListItem
          key={item.id}
          event={item}
@@ -13,13 +13,14 @@ 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 &
-  RootStore & {
+  RootStore &
+  React.HTMLAttributes<HTMLDivElement> & {
    fetch?: (
      options: Record<string, any> | undefined
    ) => Promise<T[] | undefined> | undefined;
@@ -36,6 +37,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 +198,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 +214,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 +234,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>
@@ -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>
@@ -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;
@@ -0,0 +1,172 @@
+import { observer } from "mobx-react";
+import { transparentize } from "polished";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import styled, { css } from "styled-components";
+import { s } from "@shared/styles";
+import type { ReactionSummary } from "@shared/types";
+import { getEmojiId } from "@shared/utils/emoji";
+import User from "~/models/User";
+import { Emoji } from "~/components/Emoji";
+import Flex from "~/components/Flex";
+import NudeButton from "~/components/NudeButton";
+import Text from "~/components/Text";
+import Tooltip from "~/components/Tooltip";
+import useCurrentUser from "~/hooks/useCurrentUser";
+import { hover } from "~/styles";
+
+type Props = {
+  /** Thin reaction data - contains the emoji & active user ids for this reaction. */
+  reaction: ReactionSummary;
+  /** Users who reacted using this emoji. */
+  reactedUsers: User[];
+  /** Whether the emoji button should be disabled (prevents add/remove events). */
+  disabled: boolean;
+  /** Callback when the user intends to add the reaction. */
+  onAddReaction: (emoji: string) => Promise<void>;
+  /** Callback when the user intends to remove the reaction. */
+  onRemoveReaction: (emoji: string) => Promise<void>;
+};
+
+const useTooltipContent = ({
+  reactedUsers,
+  currUser,
+  emoji,
+  active,
+}: {
+  reactedUsers: User[];
+  currUser: User;
+  emoji: string;
+  active: boolean;
+}) => {
+  const { t } = useTranslation();
+
+  if (!reactedUsers.length) {
+    return;
+  }
+
+  const transformedEmoji = `:${getEmojiId(emoji)}:`;
+
+  switch (reactedUsers.length) {
+    case 1: {
+      return t("{{ username }} reacted with {{ emoji }}", {
+        username: active ? t("You") : reactedUsers[0].name,
+        emoji: transformedEmoji,
+      });
+    }
+
+    case 2: {
+      const firstUsername = active ? t("You") : reactedUsers[0].name;
+      const secondUsername = active
+        ? reactedUsers.find((user) => user.id !== currUser.id)?.name
+        : reactedUsers[1].name;
+
+      return t(
+        "{{ firstUsername }} and {{ secondUsername }} reacted with {{ emoji }}",
+        {
+          firstUsername,
+          secondUsername,
+          emoji: transformedEmoji,
+        }
+      );
+    }
+
+    default: {
+      const firstUsername = active ? t("You") : reactedUsers[0].name;
+      const count = reactedUsers.length - 1;
+
+      return t(
+        "{{ firstUsername }} and {{ count }} others reacted with {{ emoji }}",
+        {
+          firstUsername,
+          count,
+          emoji: transformedEmoji,
+        }
+      );
+    }
+  }
+};
+
+const Reaction: React.FC<Props> = ({
+  reaction,
+  reactedUsers,
+  disabled,
+  onAddReaction,
+  onRemoveReaction,
+}) => {
+  const user = useCurrentUser();
+
+  const active = reaction.userIds.includes(user.id);
+
+  const tooltipContent = useTooltipContent({
+    reactedUsers,
+    currUser: user,
+    emoji: reaction.emoji,
+    active,
+  });
+
+  const handleClick = React.useCallback(
+    (event: React.SyntheticEvent<HTMLButtonElement>) => {
+      event.stopPropagation();
+      active
+        ? void onRemoveReaction(reaction.emoji)
+        : void onAddReaction(reaction.emoji);
+    },
+    [reaction, active, onAddReaction, onRemoveReaction]
+  );
+
+  const DisplayedEmoji = React.useMemo(
+    () => (
+      <EmojiButton disabled={disabled} $active={active} onClick={handleClick}>
+        <Flex gap={6} justify="center" align="center">
+          <Emoji size={15}>{reaction.emoji}</Emoji>
+          <Count weight="xbold">{reaction.userIds.length}</Count>
+        </Flex>
+      </EmojiButton>
+    ),
+    [reaction.emoji, reaction.userIds, disabled, active, handleClick]
+  );
+
+  return tooltipContent ? (
+    <Tooltip content={tooltipContent} delay={250} placement="bottom">
+      {DisplayedEmoji}
+    </Tooltip>
+  ) : (
+    <>{DisplayedEmoji}</>
+  );
+};
+
+const EmojiButton = styled(NudeButton)<{
+  $active: boolean;
+  disabled: boolean;
+}>`
+  width: auto;
+  height: 28px;
+  padding: 6px;
+  border-radius: 12px;
+  background: ${s("backgroundTertiary")};
+  pointer-events: ${({ disabled }) => disabled && "none"};
+
+  &: ${hover} {
+    background: ${s("backgroundQuaternary")};
+  }
+
+  ${(props) =>
+    props.$active &&
+    css`
+      background: ${transparentize(0.7, props.theme.accent)};
+
+      &: ${hover} {
+        background: ${transparentize(0.5, props.theme.accent)};
+      }
+    `}
+`;
+
+const Count = styled(Text)`
+  font-size: 11px;
+  color: ${s("buttonNeutralText")};
+  padding-right: 1px;
+  font-variant-numeric: tabular-nums;
+`;
+
+export default observer(Reaction);
@@ -0,0 +1,87 @@
+import compact from "lodash/compact";
+import { observer } from "mobx-react";
+import React from "react";
+import Comment from "~/models/Comment";
+import useHover from "~/hooks/useHover";
+import useStores from "~/hooks/useStores";
+import Logger from "~/utils/Logger";
+import Flex from "../Flex";
+import { ResizingHeightContainer } from "../ResizingHeightContainer";
+import Reaction from "./Reaction";
+
+type Props = {
+  /** Model for which to show the reactions. */
+  model: Comment;
+  /** Callback when the user intends to add a reaction. */
+  onAddReaction: (emoji: string) => Promise<void>;
+  /** Callback when the user intends to remove a reaction. */
+  onRemoveReaction: (emoji: string) => Promise<void>;
+  /** classname generated by styled-components. */
+  className?: string;
+  /** Picker to render as the last element */
+  picker?: React.ReactElement;
+};
+
+const ReactionList: React.FC<Props> = ({
+  model,
+  onAddReaction,
+  onRemoveReaction,
+  className,
+  picker,
+}) => {
+  const { users } = useStores();
+  const listRef = React.useRef<HTMLDivElement>(null);
+
+  const hovered = useHover({
+    ref: listRef,
+    duration: 250,
+  });
+
+  React.useEffect(() => {
+    const loadReactedUsersData = async () => {
+      try {
+        await model.loadReactedUsersData();
+      } catch (err) {
+        Logger.warn("Could not prefetch reaction data");
+      }
+    };
+
+    if (hovered) {
+      void loadReactedUsersData();
+    }
+  }, [hovered, model]);
+
+  const hasReactions = !!model.reactions.length;
+  const style = React.useMemo(() => {
+    if (hasReactions) {
+      return { minHeight: 28 };
+    }
+    return undefined;
+  }, [hasReactions]);
+
+  return (
+    <ResizingHeightContainer style={style}>
+      <Flex ref={listRef} className={className} align="center" gap={6} wrap>
+        {model.reactions.map((reaction) => {
+          const reactedUsers = compact(
+            reaction.userIds.map((id) => users.get(id))
+          );
+
+          return (
+            <Reaction
+              key={reaction.emoji}
+              reaction={reaction}
+              reactedUsers={reactedUsers}
+              disabled={model.isResolved}
+              onAddReaction={onAddReaction}
+              onRemoveReaction={onRemoveReaction}
+            />
+          );
+        })}
+        {picker}
+      </Flex>
+    </ResizingHeightContainer>
+  );
+};
+
+export default observer(ReactionList);
@@ -0,0 +1,161 @@
+import { ReactionIcon } from "outline-icons";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { PopoverDisclosure, usePopoverState } from "reakit";
+import EventBoundary from "@shared/components/EventBoundary";
+import Flex from "~/components/Flex";
+import NudeButton from "~/components/NudeButton";
+import PlaceholderText from "~/components/PlaceholderText";
+import Popover from "~/components/Popover";
+import useMobile from "~/hooks/useMobile";
+import useOnClickOutside from "~/hooks/useOnClickOutside";
+import useWindowSize from "~/hooks/useWindowSize";
+import Tooltip from "../Tooltip";
+
+const EmojiPanel = React.lazy(
+  () => import("~/components/IconPicker/components/EmojiPanel")
+);
+
+type Props = {
+  /** Callback when an emoji is selected by the user. */
+  onSelect: (emoji: string) => Promise<void>;
+  /** Callback when the picker is opened. */
+  onOpen?: () => void;
+  /** Callback when the picker is closed. */
+  onClose?: () => void;
+  /** Optional classname. */
+  className?: string;
+  size?: number;
+};
+
+const ReactionPicker: React.FC<Props> = ({
+  onSelect,
+  onOpen,
+  onClose,
+  className,
+  size,
+}) => {
+  const { t } = useTranslation();
+  const popover = usePopoverState({
+    modal: true,
+    unstable_offset: [0, 0],
+    placement: "bottom-end",
+  });
+
+  const { width: windowWidth } = useWindowSize();
+  const isMobile = useMobile();
+
+  const [query, setQuery] = React.useState("");
+  const contentRef = React.useRef<HTMLDivElement | null>(null);
+
+  const popoverWidth = isMobile ? windowWidth : 300;
+  // In mobile, popover is absolutely positioned to leave 8px on both sides.
+  const panelWidth = isMobile ? windowWidth - 16 : popoverWidth;
+  const { toggle, hide } = popover;
+  const handlePopoverButtonClick = React.useCallback(
+    (ev: React.MouseEvent) => {
+      ev.stopPropagation();
+      toggle();
+    },
+    [toggle]
+  );
+
+  const handleEmojiSelect = React.useCallback(
+    (emoji: string) => {
+      hide();
+      void onSelect(emoji);
+    },
+    [hide, onSelect]
+  );
+
+  // Popover open effect
+  React.useEffect(() => {
+    if (popover.visible) {
+      onOpen?.();
+    } else {
+      onClose?.();
+    }
+  }, [popover.visible, onOpen, onClose]);
+
+  // Custom click outside handling rather than using `hideOnClickOutside` from reakit so that we can
+  // prevent event bubbling.
+  useOnClickOutside(
+    contentRef,
+    (event) => {
+      if (
+        popover.visible &&
+        !popover.unstable_disclosureRef.current?.contains(event.target as Node)
+      ) {
+        event.stopPropagation();
+        event.preventDefault();
+        popover.hide();
+      }
+    },
+    { capture: true }
+  );
+
+  return (
+    <>
+      <PopoverDisclosure {...popover}>
+        {(props) => (
+          <Tooltip
+            content={t("Add reaction")}
+            placement="top"
+            delay={500}
+            hideOnClick
+          >
+            <NudeButton
+              {...props}
+              aria-label={t("Reaction picker")}
+              className={className}
+              onClick={handlePopoverButtonClick}
+              size={size}
+            >
+              <ReactionIcon size={22} />
+            </NudeButton>
+          </Tooltip>
+        )}
+      </PopoverDisclosure>
+      <Popover
+        {...popover}
+        ref={contentRef}
+        width={popoverWidth}
+        shrink
+        aria-label={t("Reaction picker")}
+        onClick={(e) => e.stopPropagation()}
+        hideOnClickOutside={false}
+      >
+        {popover.visible && (
+          <React.Suspense fallback={<Placeholder />}>
+            <EventBoundary>
+              <EmojiPanel
+                height={300}
+                panelWidth={panelWidth}
+                query={query}
+                onEmojiChange={handleEmojiSelect}
+                onQueryChange={setQuery}
+                panelActive
+              />
+            </EventBoundary>
+          </React.Suspense>
+        )}
+      </Popover>
+    </>
+  );
+};
+
+const Placeholder = React.memo(
+  () => (
+    <Flex column gap={6} style={{ height: "300px", padding: "6px 12px" }}>
+      <Flex gap={8}>
+        <PlaceholderText height={32} minWidth={90} />
+        <PlaceholderText height={32} width={32} />
+      </Flex>
+      <PlaceholderText height={24} width={120} />
+    </Flex>
+  ),
+  () => true
+);
+Placeholder.displayName = "ReactionPickerPlaceholder";
+
+export default ReactionPicker;
@@ -0,0 +1,146 @@
+import compact from "lodash/compact";
+import { observer } from "mobx-react";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Tab, TabPanel, useTabState } from "reakit";
+import { toast } from "sonner";
+import styled, { css } from "styled-components";
+import { s } from "@shared/styles";
+import Comment from "~/models/Comment";
+import { Avatar, AvatarSize } from "~/components/Avatar";
+import { Emoji } from "~/components/Emoji";
+import Flex from "~/components/Flex";
+import PlaceholderText from "~/components/PlaceholderText";
+import Text from "~/components/Text";
+import useStores from "~/hooks/useStores";
+import { hover } from "~/styles";
+
+type Props = {
+  /** Model for which to show the reactions. */
+  model: Comment;
+};
+
+const ViewReactionsDialog: React.FC<Props> = ({ model }) => {
+  const { t } = useTranslation();
+  const { users } = useStores();
+  const tab = useTabState();
+  const { reactedUsersLoaded } = model;
+
+  React.useEffect(() => {
+    const loadReactedUsersData = async () => {
+      try {
+        await model.loadReactedUsersData();
+      } catch (err) {
+        toast.error(t("Could not load reactions"));
+      }
+    };
+
+    void loadReactedUsersData();
+  }, [t, model]);
+
+  if (!reactedUsersLoaded) {
+    return <PlaceHolder />;
+  }
+
+  return (
+    <>
+      <TabActionsWrapper>
+        {model.reactions.map((reaction) => (
+          <StyledTab
+            {...tab}
+            key={reaction.emoji}
+            id={reaction.emoji}
+            aria-label={t("Reaction")}
+            $active={tab.selectedId === reaction.emoji}
+          >
+            <Emoji size={16}>{reaction.emoji}</Emoji>
+          </StyledTab>
+        ))}
+      </TabActionsWrapper>
+      {model.reactions.map((reaction) => {
+        const reactedUsers = compact(
+          reaction.userIds.map((id) => users.get(id))
+        );
+
+        return (
+          <StyledTabPanel {...tab} key={reaction.emoji}>
+            {reactedUsers.map((user) => (
+              <UserInfo key={user.name} align="center" gap={8}>
+                <Avatar model={user} size={AvatarSize.Medium} />
+                <Text size="medium">{user.name}</Text>
+              </UserInfo>
+            ))}
+          </StyledTabPanel>
+        );
+      })}
+    </>
+  );
+};
+
+const PlaceHolder = React.memo(
+  () => (
+    <>
+      <TabActionsWrapper gap={8} style={{ paddingBottom: "10px" }}>
+        <PlaceholderText width={40} height={32} />
+        <PlaceholderText width={40} height={32} />
+      </TabActionsWrapper>
+      <UserInfo align="center" gap={12}>
+        <PlaceholderText width={AvatarSize.Medium} height={AvatarSize.Medium} />
+        <PlaceholderText height={34} />
+      </UserInfo>
+      <UserInfo align="center" gap={12}>
+        <PlaceholderText width={AvatarSize.Medium} height={AvatarSize.Medium} />
+        <PlaceholderText height={34} />
+      </UserInfo>
+    </>
+  ),
+  () => true
+);
+PlaceHolder.displayName = "ViewReactionsPlaceholder";
+
+const TabActionsWrapper = styled(Flex)`
+  border-bottom: 1px solid ${s("inputBorder")};
+`;
+
+const StyledTab = styled(Tab)<{ $active: boolean }>`
+  position: relative;
+  font-weight: 500;
+  font-size: 14px;
+  cursor: var(--pointer);
+  background: none;
+  border: 0;
+  border-radius: 4px 4px 0 0;
+  padding: 8px 12px 10px;
+  user-select: none;
+  transition: background-color 100ms ease;
+
+  &: ${hover} {
+    background-color: ${s("listItemHoverBackground")};
+  }
+
+  ${({ $active }) =>
+    $active &&
+    css`
+      &:after {
+        content: "";
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 1px;
+        background: ${s("textSecondary")};
+      }
+    `}
+`;
+
+const StyledTabPanel = styled(TabPanel)`
+  height: 300px;
+  padding: 5px 0;
+  overflow-y: auto;
+`;
+
+const UserInfo = styled(Flex)`
+  padding: 10px 8px;
+`;
+
+export default observer(ViewReactionsDialog);
@@ -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>
+    );
+  }
+);
@@ -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",
      });
@@ -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";
@@ -19,9 +19,10 @@ import SearchListItem from "./SearchListItem";

 interface Props extends React.HTMLAttributes<HTMLInputElement> {
  shareId: string;
+  className?: string;
 }

-function SearchPopover({ shareId }: Props) {
+function SearchPopover({ shareId, className }: Props) {
  const { t } = useTranslation();
  const { documents } = useStores();
  const focusRef = React.useRef<HTMLElement | null>(null);
@@ -36,11 +37,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 +55,8 @@ 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,
        });
@@ -186,6 +188,7 @@ function SearchPopover({ shareId }: Props) {
            onChange={handleSearchInputChange}
            onFocus={handleSearchInputFocus}
            onKeyDown={handleKeyDown}
+            className={className}
          />
        )}
      </PopoverDisclosure>
@@ -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;
+`;
--- a/Show More
+++ b/Show More