chore: Remove usage of deprecated docker build image

0.80.2-ms-debug
Add debug logging
2026-06-14 03:45:00 +03:00 · 2024-10-16 18:59:59 -04:00 · 2024-10-16 18:41:49 -04:00 · 2024-10-16 18:41:21 -04:00
544 changed files with 7587 additions and 16241 deletions
@@ -4,6 +4,12 @@ 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
@@ -72,14 +78,6 @@ 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:
@@ -3,7 +3,7 @@ Business Source License 1.1
 Parameters

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

-Change Date:          2028-11-11
+Change Date:          2028-09-26

 Change License:       Apache License, Version 2.0

@@ -1,10 +1,8 @@
 import {
-  ArchiveIcon,
  CollectionIcon,
  EditIcon,
  PadlockIcon,
  PlusIcon,
-  RestoreIcon,
  SearchIcon,
  ShapesIcon,
  StarredIcon,
@@ -12,18 +10,16 @@ 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 { ActiveCollectionSection, CollectionSection } from "~/actions/sections";
+import { CollectionSection } from "~/actions/sections";
 import { setPersistedState } from "~/hooks/usePersistedState";
 import history from "~/utils/history";
 import { newTemplatePath, searchPath } from "~/utils/routeHelpers";
@@ -74,7 +70,7 @@ export const editCollection = createAction({
  name: ({ t, isContextMenu }) =>
    isContextMenu ? `${t("Edit")}…` : t("Edit collection"),
  analyticsName: "Edit collection",
-  section: ActiveCollectionSection,
+  section: CollectionSection,
  icon: <EditIcon />,
  visible: ({ activeCollectionId }) =>
    !!activeCollectionId &&
@@ -100,7 +96,7 @@ export const editCollectionPermissions = createAction({
  name: ({ t, isContextMenu }) =>
    isContextMenu ? `${t("Permissions")}…` : t("Collection permissions"),
  analyticsName: "Collection permissions",
-  section: ActiveCollectionSection,
+  section: CollectionSection,
  icon: <PadlockIcon />,
  visible: ({ activeCollectionId }) =>
    !!activeCollectionId &&
@@ -131,22 +127,11 @@ export const editCollectionPermissions = createAction({
 export const searchInCollection = createAction({
  name: ({ t }) => t("Search in collection"),
  analyticsName: "Search collection",
-  section: ActiveCollectionSection,
+  section: CollectionSection,
  icon: <SearchIcon />,
-  visible: ({ activeCollectionId }) => {
-    if (!activeCollectionId) {
-      return false;
-    }
-
-    const collection = stores.collections.get(activeCollectionId);
-
-    if (!collection?.isActive) {
-      return false;
-    }
-
-    return stores.policies.abilities(activeCollectionId).readDocument;
-  },
-
+  visible: ({ activeCollectionId }) =>
+    !!activeCollectionId &&
+    stores.policies.abilities(activeCollectionId).readDocument,
  perform: ({ activeCollectionId }) => {
    history.push(searchPath(undefined, { collectionId: activeCollectionId }));
  },
@@ -155,7 +140,7 @@ export const searchInCollection = createAction({
 export const starCollection = createAction({
  name: ({ t }) => t("Star"),
  analyticsName: "Star collection",
-  section: ActiveCollectionSection,
+  section: CollectionSection,
  icon: <StarredIcon />,
  keywords: "favorite bookmark",
  visible: ({ activeCollectionId }) => {
@@ -182,7 +167,7 @@ export const starCollection = createAction({
 export const unstarCollection = createAction({
  name: ({ t }) => t("Unstar"),
  analyticsName: "Unstar collection",
-  section: ActiveCollectionSection,
+  section: CollectionSection,
  icon: <UnstarredIcon />,
  keywords: "unfavorite unbookmark",
  visible: ({ activeCollectionId }) => {
@@ -205,76 +190,10 @@ 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: ActiveCollectionSection,
+  section: CollectionSection,
  dangerous: true,
  icon: <TrashIcon />,
  visible: ({ activeCollectionId }) => {
@@ -308,7 +227,7 @@ export const deleteCollection = createAction({
 export const createTemplate = createAction({
  name: ({ t }) => t("New template"),
  analyticsName: "New template",
-  section: ActiveCollectionSection,
+  section: CollectionSection,
  icon: <ShapesIcon />,
  keywords: "new create template",
  visible: ({ activeCollectionId }) =>
@@ -1,10 +1,9 @@
-import { DoneIcon, SmileyIcon, TrashIcon } from "outline-icons";
+import { DoneIcon, 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";
@@ -89,27 +88,3 @@ 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} />,
-      });
-    },
-  });
@@ -27,36 +27,23 @@ import {
  CopyIcon,
  EyeIcon,
  PadlockIcon,
-  GlobeIcon,
-  LogoutIcon,
 } from "outline-icons";
 import * as React from "react";
 import { toast } from "sonner";
-import {
-  ExportContentType,
-  TeamPreference,
-  NavigationNode,
-} from "@shared/types";
+import { ExportContentType, TeamPreference } from "@shared/types";
 import { getEventFiles } from "@shared/utils/files";
-import 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 ConfirmationDialog from "~/components/ConfirmationDialog";
-import DocumentCopy from "~/components/DocumentCopy";
-import Icon from "~/components/Icon";
-import MarkdownIcon from "~/components/Icons/MarkdownIcon";
+import DuplicateDialog from "~/components/DuplicateDialog";
 import SharePopover from "~/components/Sharing/Document";
 import { getHeaderExpandedKey } from "~/components/Sidebar/components/Header";
 import DocumentTemplatizeDialog from "~/components/TemplatizeDialog";
 import { createAction } from "~/actions";
-import {
-  ActiveDocumentSection,
-  DocumentSection,
-  TrashSection,
-} from "~/actions/sections";
+import { DocumentSection, TrashSection } from "~/actions/sections";
 import env from "~/env";
 import { setPersistedState } from "~/hooks/usePersistedState";
 import history from "~/utils/history";
@@ -80,24 +67,23 @@ export const openDocument = createAction({
  keywords: "go to",
  icon: <DocumentIcon />,
  children: ({ stores }) => {
-    const nodes = stores.collections.navigationNodes.reduce(
-      (acc, node) => [...acc, ...node.children],
-      [] as NavigationNode[]
-    );
+    const paths = stores.collections.pathsToDocuments;

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

@@ -131,30 +117,11 @@ export const createDocumentFromTemplate = createAction({
  section: DocumentSection,
  icon: <NewDocumentIcon />,
  keywords: "create",
-  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;
-  },
+  visible: ({ currentTeamId, activeDocumentId, stores }) =>
+    !!currentTeamId &&
+    !!activeDocumentId &&
+    !!stores.documents.get(activeDocumentId)?.template &&
+    stores.policies.abilities(currentTeamId).createDocument,
  perform: ({ activeCollectionId, activeDocumentId, sidebarContext }) =>
    history.push(
      newDocumentPath(activeCollectionId, { templateId: activeDocumentId }),
@@ -167,7 +134,7 @@ export const createDocumentFromTemplate = createAction({
 export const createNestedDocument = createAction({
  name: ({ t }) => t("New nested document"),
  analyticsName: "New document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <NewDocumentIcon />,
  keywords: "create",
  visible: ({ currentTeamId, activeDocumentId, stores }) =>
@@ -184,7 +151,7 @@ export const createNestedDocument = createAction({
 export const starDocument = createAction({
  name: ({ t }) => t("Star"),
  analyticsName: "Star document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <StarredIcon />,
  keywords: "favorite bookmark",
  visible: ({ activeDocumentId, stores }) => {
@@ -210,7 +177,7 @@ export const starDocument = createAction({
 export const unstarDocument = createAction({
  name: ({ t }) => t("Unstar"),
  analyticsName: "Unstar document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <UnstarredIcon />,
  keywords: "unfavorite unbookmark",
  visible: ({ activeDocumentId, stores }) => {
@@ -236,7 +203,7 @@ export const unstarDocument = createAction({
 export const publishDocument = createAction({
  name: ({ t }) => t("Publish"),
  analyticsName: "Publish document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <PublishIcon />,
  visible: ({ activeDocumentId, stores }) => {
    if (!activeDocumentId) {
@@ -278,7 +245,7 @@ export const publishDocument = createAction({
 export const unpublishDocument = createAction({
  name: ({ t }) => t("Unpublish"),
  analyticsName: "Unpublish document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <UnpublishIcon />,
  visible: ({ activeDocumentId, stores }) => {
    if (!activeDocumentId) {
@@ -309,7 +276,7 @@ export const unpublishDocument = createAction({
 export const subscribeDocument = createAction({
  name: ({ t }) => t("Subscribe"),
  analyticsName: "Subscribe to document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <SubscribeIcon />,
  visible: ({ activeDocumentId, stores }) => {
    if (!activeDocumentId) {
@@ -337,7 +304,7 @@ export const subscribeDocument = createAction({
 export const unsubscribeDocument = createAction({
  name: ({ t }) => t("Unsubscribe"),
  analyticsName: "Unsubscribe from document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <UnsubscribeIcon />,
  visible: ({ activeDocumentId, stores }) => {
    if (!activeDocumentId) {
@@ -367,7 +334,7 @@ export const unsubscribeDocument = createAction({
 export const shareDocument = createAction({
  name: ({ t }) => `${t("Permissions")}…`,
  analyticsName: "Share document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <PadlockIcon />,
  visible: ({ stores, activeDocumentId }) => {
    const can = stores.policies.abilities(activeDocumentId!);
@@ -379,6 +346,8 @@ export const shareDocument = createAction({
    }

    const document = stores.documents.get(activeDocumentId);
+    const share = stores.shares.getByDocumentId(activeDocumentId);
+    const sharedParent = stores.shares.getByDocumentParents(activeDocumentId);
    if (!document) {
      return;
    }
@@ -389,6 +358,8 @@ export const shareDocument = createAction({
      content: (
        <SharePopover
          document={document}
+          share={share}
+          sharedParent={sharedParent}
          onRequestClose={stores.dialogs.closeAllModals}
          visible
        />
@@ -400,7 +371,7 @@ export const shareDocument = createAction({
 export const downloadDocumentAsHTML = createAction({
  name: ({ t }) => t("HTML"),
  analyticsName: "Download document as HTML",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  keywords: "html export",
  icon: <DownloadIcon />,
  iconInContextMenu: false,
@@ -419,7 +390,7 @@ export const downloadDocumentAsHTML = createAction({
 export const downloadDocumentAsPDF = createAction({
  name: ({ t }) => t("PDF"),
  analyticsName: "Download document as PDF",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  keywords: "export",
  icon: <DownloadIcon />,
  iconInContextMenu: false,
@@ -443,7 +414,7 @@ export const downloadDocumentAsPDF = createAction({
 export const downloadDocumentAsMarkdown = createAction({
  name: ({ t }) => t("Markdown"),
  analyticsName: "Download document as Markdown",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  keywords: "md markdown export",
  icon: <DownloadIcon />,
  iconInContextMenu: false,
@@ -463,11 +434,9 @@ export const downloadDocument = createAction({
  name: ({ t, isContextMenu }) =>
    isContextMenu ? t("Download") : t("Download document"),
  analyticsName: "Download document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <DownloadIcon />,
  keywords: "export",
-  visible: ({ activeDocumentId, stores }) =>
-    !!activeDocumentId && stores.policies.abilities(activeDocumentId).download,
  children: [
    downloadDocumentAsHTML,
    downloadDocumentAsPDF,
@@ -477,10 +446,8 @@ export const downloadDocument = createAction({

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

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

 export const duplicateDocument = createAction({
  name: ({ t, isContextMenu }) =>
    isContextMenu ? t("Duplicate") : t("Duplicate document"),
  analyticsName: "Duplicate document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <DuplicateIcon />,
  keywords: "copy",
  visible: ({ activeDocumentId, stores }) =>
@@ -562,7 +506,7 @@ export const duplicateDocument = createAction({
    stores.dialogs.openModal({
      title: t("Copy document"),
      content: (
-        <DocumentCopy
+        <DuplicateDialog
          document={document}
          onSubmit={(response) => {
            stores.dialogs.closeAllModals();
@@ -590,7 +534,7 @@ export const pinDocumentToCollection = createAction({
    });
  },
  analyticsName: "Pin document to collection",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <PinIcon />,
  iconInContextMenu: false,
  visible: ({ activeCollectionId, activeDocumentId, stores }) => {
@@ -626,7 +570,7 @@ export const pinDocumentToCollection = createAction({
 export const pinDocumentToHome = createAction({
  name: ({ t }) => t("Pin to home"),
  analyticsName: "Pin document to home",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <PinIcon />,
  iconInContextMenu: false,
  visible: ({ activeDocumentId, currentTeamId, stores }) => {
@@ -658,7 +602,7 @@ export const pinDocumentToHome = createAction({
 export const pinDocument = createAction({
  name: ({ t }) => t("Pin"),
  analyticsName: "Pin document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <PinIcon />,
  children: [pinDocumentToCollection, pinDocumentToHome],
 });
@@ -666,7 +610,7 @@ export const pinDocument = createAction({
 export const searchInDocument = createAction({
  name: ({ t }) => t("Search in document"),
  analyticsName: "Search document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <SearchIcon />,
  visible: ({ stores, activeDocumentId }) => {
    if (!activeDocumentId) {
@@ -684,7 +628,7 @@ export const printDocument = createAction({
  name: ({ t, isContextMenu }) =>
    isContextMenu ? t("Print") : t("Print document"),
  analyticsName: "Print document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <PrintIcon />,
  visible: ({ activeDocumentId }) => !!(activeDocumentId && window.print),
  perform: () => {
@@ -743,7 +687,7 @@ export const importDocument = createAction({
 export const createTemplateFromDocument = createAction({
  name: ({ t }) => t("Templatize"),
  analyticsName: "Templatize document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <ShapesIcon />,
  keywords: "new create template",
  visible: ({ activeCollectionId, activeDocumentId, stores }) => {
@@ -778,14 +722,14 @@ export const openRandomDocument = createAction({
  section: DocumentSection,
  icon: <ShuffleIcon />,
  perform: ({ stores, activeDocumentId }) => {
-    const nodes = stores.collections.navigationNodes
-      .reduce((acc, node) => [...acc, ...node.children], [] as NavigationNode[])
-      .filter((node) => node.id !== activeDocumentId);
+    const documentPaths = stores.collections.pathsToDocuments.filter(
+      (path) => path.type === "document" && path.id !== activeDocumentId
+    );
+    const randomPath =
+      documentPaths[Math.round(Math.random() * documentPaths.length)];

-    const random = nodes[Math.round(Math.random() * nodes.length)];
-
-    if (random) {
-      history.push(random.url);
+    if (randomPath) {
+      history.push(randomPath.url);
    }
  },
 });
@@ -843,7 +787,7 @@ export const moveDocumentToCollection = createAction({
      : t("Move");
  },
  analyticsName: "Move document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <MoveIcon />,
  iconInContextMenu: false,
  visible: ({ activeDocumentId, stores }) => {
@@ -872,7 +816,7 @@ export const moveDocumentToCollection = createAction({
 export const moveDocument = createAction({
  name: ({ t }) => t("Move"),
  analyticsName: "Move document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <MoveIcon />,
  visible: ({ activeDocumentId, stores }) => {
    if (!activeDocumentId) {
@@ -891,7 +835,7 @@ export const moveDocument = createAction({
 export const moveTemplate = createAction({
  name: ({ t }) => t("Move"),
  analyticsName: "Move document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <MoveIcon />,
  visible: ({ activeDocumentId, stores }) => {
    if (!activeDocumentId) {
@@ -910,7 +854,7 @@ export const moveTemplate = createAction({
 export const archiveDocument = createAction({
  name: ({ t }) => `${t("Archive")}…`,
  analyticsName: "Archive document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <ArchiveIcon />,
  visible: ({ activeDocumentId, stores }) => {
    if (!activeDocumentId) {
@@ -950,7 +894,7 @@ export const archiveDocument = createAction({
 export const deleteDocument = createAction({
  name: ({ t }) => `${t("Delete")}…`,
  analyticsName: "Delete document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <TrashIcon />,
  dangerous: true,
  visible: ({ activeDocumentId, stores }) => {
@@ -984,7 +928,7 @@ export const deleteDocument = createAction({
 export const permanentlyDeleteDocument = createAction({
  name: ({ t }) => t("Permanently delete"),
  analyticsName: "Permanently delete document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <CrossIcon />,
  dangerous: true,
  visible: ({ activeDocumentId, stores }) => {
@@ -1039,7 +983,7 @@ export const permanentlyDeleteDocumentsInTrash = createAction({
 export const openDocumentComments = createAction({
  name: ({ t }) => t("Comments"),
  analyticsName: "Open comments",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <CommentIcon />,
  visible: ({ activeDocumentId, stores }) => {
    const can = stores.policies.abilities(activeDocumentId ?? "");
@@ -1054,14 +998,14 @@ export const openDocumentComments = createAction({
      return;
    }

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

 export const openDocumentHistory = createAction({
  name: ({ t }) => t("History"),
  analyticsName: "Open document history",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <HistoryIcon />,
  visible: ({ activeDocumentId, stores }) => {
    const can = stores.policies.abilities(activeDocumentId ?? "");
@@ -1082,7 +1026,7 @@ export const openDocumentHistory = createAction({
 export const openDocumentInsights = createAction({
  name: ({ t }) => t("Insights"),
  analyticsName: "Open document insights",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <GraphIcon />,
  visible: ({ activeDocumentId, stores }) => {
    const can = stores.policies.abilities(activeDocumentId ?? "");
@@ -1119,7 +1063,7 @@ export const toggleViewerInsights = createAction({
      : t("Enable viewer insights");
  },
  analyticsName: "Toggle viewer insights",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <EyeIcon />,
  visible: ({ activeDocumentId, stores }) => {
    const can = stores.policies.abilities(activeDocumentId ?? "");
@@ -1140,42 +1084,6 @@ 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,
@@ -1185,7 +1093,6 @@ export const rootDocumentActions = [
  importDocument,
  downloadDocument,
  copyDocumentLink,
-  copyDocumentShareLink,
  copyDocumentAsMarkdown,
  starDocument,
  unstarDocument,
@@ -1194,7 +1101,6 @@ export const rootDocumentActions = [
  subscribeDocument,
  unsubscribeDocument,
  duplicateDocument,
-  leaveDocument,
  moveTemplateToWorkspace,
  moveDocumentToCollection,
  openRandomDocument,
@@ -91,15 +91,6 @@ 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",
@@ -98,11 +98,6 @@ export function actionToKBar(
      )
    : [];

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

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

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

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

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

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

-RecentSearchesSection.priority = -0.1;
-
 export const TrashSection = ({ t }: ActionContext) => t("Trash");
@@ -31,6 +31,7 @@ const Actions = styled(Flex)`
  left: 0;
  border-radius: 3px;
  background: ${s("background")};
+  transition: ${s("backgroundTransition")};
  padding: 12px;
  backdrop-filter: blur(20px);

@@ -5,7 +5,6 @@ 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 = {
@@ -33,7 +32,7 @@ const Authenticated = ({ children }: Props) => {
  }

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

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

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

  const goToSearch = (ev: KeyboardEvent) => {
    if (!ev.metaKey && !ev.ctrlKey) {
@@ -94,7 +102,7 @@ const AuthenticatedLayout: React.FC = ({ children }: Props) => {
    !showHistory &&
    can.comment &&
    ui.activeDocumentId &&
-    ui.commentsExpanded &&
+    ui.commentsExpanded.includes(ui.activeDocumentId) &&
    team.getPreference(TeamPreference.Commenting);

  const sidebarRight = (
@@ -117,7 +125,7 @@ const AuthenticatedLayout: React.FC = ({ children }: Props) => {
  );

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

@@ -8,16 +8,18 @@ import BreadcrumbMenu from "~/menus/BreadcrumbMenu";
 import { undraggableOnDesktop } from "~/styles";
 import { MenuInternalLink } from "~/types";

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

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

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

 const Item = styled(Link)<{ $highlight: boolean; $withIcon: boolean }>`
  ${ellipsis()}
-  ${undraggableOnDesktop()}
-
  display: flex;
  flex-shrink: 1;
  min-width: 0;
@@ -76,6 +76,7 @@ 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;
@@ -86,4 +87,4 @@ const Item = styled(Link)<{ $highlight: boolean; $withIcon: boolean }>`
  }
 `;

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

-const StyledDisclosureIcon = styled(DisclosureIcon)`
-  opacity: 0.8;
-`;
-
 export default React.forwardRef(Button);
@@ -18,8 +18,6 @@ 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;
 };

 /**
@@ -27,7 +25,6 @@ type Props = {
 * and presence status.
 */
 function Collaborators(props: Props) {
-  const { limit = 6 } = props;
  const { t } = useTranslation();
  const user = useCurrentUser();
  const currentUserId = user?.id;
@@ -78,6 +75,8 @@ function Collaborators(props: Props) {
    placement: "bottom-end",
  });

+  const limit = 8;
+
  return (
    <>
      <PopoverDisclosure {...popover}>
@@ -89,7 +88,6 @@ function Collaborators(props: Props) {
          >
            <Facepile
              limit={limit}
-              overflow={collaborators.length - limit}
              users={collaborators}
              renderAvatar={(collaborator) => {
                const isPresent = presentIds.includes(collaborator.id);
@@ -1,45 +0,0 @@
-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,6 +201,7 @@ const Input = styled.div`
  margin: -8px;
  padding: 8px;
  border-radius: 8px;
+  transition: ${s("backgroundTransition")};

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

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

  .block-menu-trigger,
@@ -6,27 +6,20 @@ import { Portal } from "react-portal";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { depths, s } from "@shared/styles";
+import CommandBarResults from "~/components/CommandBarResults";
 import SearchActions from "~/components/SearchActions";
 import rootActions from "~/actions/root";
 import useCommandBarActions from "~/hooks/useCommandBarActions";
-import CommandBarResults from "./CommandBarResults";
-import useRecentDocumentActions from "./useRecentDocumentActions";
-import useSettingsAction from "./useSettingsAction";
-import useTemplatesAction from "./useTemplatesAction";
+import useSettingsActions from "~/hooks/useSettingsActions";
+import useTemplateActions from "~/hooks/useTemplateActions";

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

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

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

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

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

 export default function CommandBarResults() {
  const { results, rootActionId } = useMatches();

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

-const Header = styled(Text).attrs({ as: "h3" })`
-  letter-spacing: 0.03em;
+const Header = styled.h3`
+  font-size: 13px;
+  letter-spacing: 0.04em;
  margin: 0;
  padding: 16px 0 4px 20px;
+  color: ${s("textTertiary")};
  height: 36px;
-  cursor: default;
 `;
@@ -1,64 +0,0 @@
-import { observer } from "mobx-react";
-import * as React from "react";
-import { Trans, useTranslation } from "react-i18next";
-import { CollectionPermission, NavigationNode } from "@shared/types";
-import type Collection from "~/models/Collection";
-import ConfirmationDialog from "~/components/ConfirmationDialog";
-import useStores from "~/hooks/useStores";
-
-type Props = {
-  /** The navigation node to move, must represent a document. */
-  item: NavigationNode;
-  /** The collection to move the document to. */
-  collection: Collection;
-  /** The parent document to move the document under. */
-  parentDocumentId?: string | null;
-  /** The index to move the document to. */
-  index?: number | null;
-};
-
-function ConfirmMoveDialog({ collection, item, ...rest }: Props) {
-  const { documents, dialogs, collections } = useStores();
-  const { t } = useTranslation();
-  const prevCollection = collections.get(item.collectionId!);
-  const accessMapping: 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);
@@ -35,7 +35,7 @@ function ConnectionStatus() {
  };

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

  return ui.multiplayerStatus === "connecting" ||
@@ -182,6 +182,7 @@ 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;
@@ -262,6 +262,22 @@ export const Position = styled.div`
    transition-property: outline-width;
    transition-duration: 0;
    outline: none;
+
+    &:after {
+      content: "";
+      position: absolute;
+      top: 1px;
+      left: 1px;
+      right: 1px;
+      bottom: 1px;
+      pointer-events: none;
+      border-radius: 4px;
+
+      outline-color: ${s("accent")};
+      outline-width: initial;
+      outline-offset: -1px;
+      outline-style: solid;
+    }
  }

  /*
@@ -49,7 +49,7 @@ const DefaultCollectionInputSelect = ({

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

  if (fetching) {
@@ -57,10 +57,11 @@ function useCategory(document: Document): MenuInternalLink | null {
  return null;
 }

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

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

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

-export default observer(React.forwardRef(DocumentBreadcrumb));
+export default observer(DocumentBreadcrumb);
@@ -39,7 +39,6 @@ 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;
@@ -123,13 +122,13 @@ function DocumentCard(props: Props) {
              <Squircle
                color={
                  collection?.color ??
-                  (pinnedToHome ? theme.slateLight : theme.slateDark)
+                  (!pin?.collectionId ? theme.slateLight : theme.slateDark)
                }
              >
                {collection?.icon &&
                collection?.icon !== "letter" &&
                collection?.icon !== "collection" &&
-                pinnedToHome ? (
+                !pin?.collectionId ? (
                  <CollectionIcon collection={collection} color="white" />
                ) : (
                  <DocumentIcon color="white" />
@@ -0,0 +1,37 @@
+import * as React from "react";
+import { Editor } from "~/editor";
+import useIdle from "~/hooks/useIdle";
+
+export type DocumentContextValue = {
+  /** The current editor instance for this document. */
+  editor: Editor | null;
+  /** Set the current editor instance for this document. */
+  setEditor: (editor: Editor) => void;
+};
+
+const DocumentContext = React.createContext<DocumentContextValue>({
+  editor: null,
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  setEditor() {},
+});
+
+export const useDocumentContext = () => React.useContext(DocumentContext);
+
+const activityEvents = [
+  "click",
+  "mousemove",
+  "DOMMouseScroll",
+  "mousewheel",
+  "mousedown",
+  "touchstart",
+  "touchmove",
+  "focus",
+];
+
+export const useEditingFocus = () => {
+  const { editor } = useDocumentContext();
+  const isIdle = useIdle(3000, activityEvents);
+  return isIdle && !!editor?.view.hasFocus();
+};
+
+export default DocumentContext;
@@ -1,84 +0,0 @@
-import { action, computed, observable } from "mobx";
-import React, { PropsWithChildren } from "react";
-import { Heading } from "@shared/utils/ProsemirrorHelper";
-import Document from "~/models/Document";
-import { Editor } from "~/editor";
-
-class DocumentContext {
-  /** The current document */
-  document?: Document;
-
-  /** The editor instance for this document */
-  editor?: Editor;
-
-  @observable
-  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>;
-};
@@ -1,149 +0,0 @@
-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);
@@ -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, defaultValue }: Props) {
+function DocumentExplorer({ onSubmit, onSelect, items }: Props) {
  const isMobile = useMobile();
  const { collections, documents } = useStores();
  const { t } = useTranslation();
@@ -47,25 +47,12 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {

  const [searchTerm, setSearchTerm] = React.useState<string>();
  const [selectedNode, selectNode] = React.useState<NavigationNode | null>(
-    () => {
-      const node =
-        defaultValue && items.find((item) => item.id === defaultValue);
-      return node || null;
-    }
+    null
  );
  const [initialScrollOffset, setInitialScrollOffset] =
    React.useState<number>(0);
  const [activeNode, setActiveNode] = React.useState<number>(0);
-  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 [expandedNodes, setExpandedNodes] = React.useState<string[]>([]);
  const [itemRefs, setItemRefs] = React.useState<
    React.RefObject<HTMLSpanElement>[]
  >([]);
@@ -107,15 +94,6 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: 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)
@@ -0,0 +1,97 @@
+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("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>
+          )}
+        </>
+      )}
+    </ConfirmationDialog>
+  );
+}
+
+export default observer(DuplicateDialog);
@@ -9,6 +9,7 @@ import { mergeRefs } from "react-merge-refs";
 import { Optional } from "utility-types";
 import insertFiles from "@shared/editor/commands/insertFiles";
 import { AttachmentPreset } from "@shared/types";
+import { Heading } from "@shared/utils/ProsemirrorHelper";
 import { dateLocale, dateToRelative } from "@shared/utils/date";
 import { getDataTransferFiles } from "@shared/utils/files";
 import parseDocumentSlug from "@shared/utils/parseDocumentSlug";
@@ -42,14 +43,21 @@ export type Props = Optional<
 > & {
  shareId?: string | undefined;
  embedsDisabled?: boolean;
+  onHeadingsChange?: (headings: Heading[]) => void;
  onSynced?: () => Promise<void>;
  onPublish?: (event: React.MouseEvent) => void;
  editorStyle?: React.CSSProperties;
 };

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

  const handleSearchLink = React.useCallback(
@@ -98,7 +107,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({ query: term });
+      const results = await documents.searchTitles(term);

      return sortBy(
        results.map(({ document }) => ({
@@ -203,6 +212,21 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
    []
  );

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

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

  return (
    <ErrorBoundary component="div" reloadOnChunkMissing>
      <>
        <LazyLoadedEditor
-          key={props.extensions?.length || 0}
          ref={mergeRefs([ref, localRef, handleRefChanged])}
          uploadFile={handleUploadFile}
          embeds={embeds}
@@ -268,15 +293,14 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
          placeholder={props.placeholder || ""}
          defaultValue={props.defaultValue || ""}
        />
-        {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}
-            />
-          )}
+        {props.editorStyle?.paddingBottom && !props.readOnly && (
+          <ClickablePadding
+            onClick={focusAtEnd}
+            onDrop={handleDrop}
+            onDragOver={handleDragOver}
+            minHeight={props.editorStyle.paddingBottom}
+          />
+        )}
      </>
    </ErrorBoundary>
  );
@@ -1,20 +0,0 @@
-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("backgroundSecondary")};
+  background: ${s("secondaryBackground")};
  padding: 16px;
  border-radius: 4px;
  font-size: 12px;
@@ -27,7 +27,7 @@ import { documentHistoryPath } from "~/utils/routeHelpers";

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

@@ -229,7 +229,7 @@ const SearchInput = styled(Input)`
  ${Outline} {
    border: none;
    border-radius: 0;
-    border-bottom: 1px solid rgb(34 40 52);
+    border-bottom: 1px solid ${s("inputBorder")};
    background: ${s("menuBackground")};
  }

@@ -75,7 +75,7 @@ const Image = styled(Flex)`
  justify-content: center;
  width: 32px;
  height: 32px;
-  background: ${s("backgroundSecondary")};
+  background: ${s("secondaryBackground")};
  border-radius: 32px;
 `;

@@ -94,6 +94,7 @@ const Scene = styled.div`
  align-items: flex-start;
  width: 350px;
  background: ${s("background")};
+  transition: ${s("backgroundTransition")};
  border-radius: 8px;
  outline: none;
  opacity: 0;
@@ -3,7 +3,6 @@ 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";
@@ -11,34 +10,25 @@ 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?:
-    | ((props: { isCompact: boolean }) => React.ReactNode)
-    | React.ReactNode;
+  actions?: React.ReactNode;
  hasSidebar?: boolean;
  className?: string;
 };

-function Header(
-  { left, title, actions, hasSidebar, className }: Props,
-  ref: React.RefObject<HTMLDivElement> | null
-) {
+function Header({ left, title, actions, hasSidebar, className }: Props) {
  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);
@@ -61,18 +51,8 @@ function Header(
    });
  }, []);

-  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}
@@ -80,7 +60,7 @@ function Header(
      $insetTitleAdjust={ui.sidebarIsClosed && Desktop.hasInsetTitlebar()}
    >
      {left || hasMobileSidebar ? (
-        <Breadcrumbs ref={setBreadcrumbRef}>
+        <Breadcrumbs>
          {hasMobileSidebar && (
            <MobileMenuButton
              onClick={ui.toggleMobileSidebar}
@@ -92,7 +72,7 @@ function Header(
        </Breadcrumbs>
      ) : null}

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

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

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

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

-export default observer(React.forwardRef(Header));
+export default observer(Header);
@@ -61,7 +61,7 @@ export const Label = styled(Text).attrs({ size: "xsmall", weight: "bold" })<{
  color?: string;
 }>`
  background-color: ${(props) =>
-    props.color ?? props.theme.backgroundSecondary};
+    props.color ?? props.theme.secondaryBackground};
  color: ${(props) =>
    props.color ? getTextColor(props.color) : props.theme.text};
  width: fit-content;
@@ -125,7 +125,6 @@ function HoverPreviewDesktop({ element, data, dataLoading, onClose }: Props) {
                avatarUrl={data.avatarUrl}
                color={data.color}
                lastActive={data.lastActive}
-                email={data.email}
              />
            ) : data.type === UnfurlResourceType.Document ? (
              <HoverPreviewDocument
@@ -7,7 +7,7 @@ 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, email }: Props,
+  { avatarUrl, name, lastActive, color }: Props,
  ref: React.Ref<HTMLDivElement>
 ) {
  return (
@@ -25,7 +25,6 @@ const HoverPreviewMention = React.forwardRef(function _HoverPreviewMention(
            />
            <Flex column gap={2} justify="center">
              <Title>{name}</Title>
-              {email && <Info>{email}</Info>}
              <Info>{lastActive}</Info>
            </Flex>
          </Flex>
@@ -2,6 +2,7 @@ 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 { IconType } from "@shared/types";
 import { IconLibrary } from "@shared/utils/IconLibrary";
 import { colorPalette } from "@shared/utils/collections";
@@ -117,7 +118,12 @@ export const IconTitleWrapper = styled(Flex)<{ dir?: string }>`
  z-index: 1;

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

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

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

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

@@ -157,7 +159,7 @@ const EmojiPanel = ({
      <GridTemplate
        ref={scrollableRef}
        width={panelWidth}
-        height={height - 48}
+        height={GRID_HEIGHT}
        data={templateData}
        onIconSelect={handleEmojiSelection}
      />
@@ -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 })}
-              style={{ "--delay": `${item.delay}ms` } as React.CSSProperties}
+              delay={item.delay}
            >
              <Icon as={IconLibrary.getComponent(item.name)} color={item.color}>
                {item.initial}
@@ -85,9 +85,7 @@ const GridTemplate = (
            key={item.id}
            onClick={() => onIconSelect({ id: item.id, value: item.value })}
          >
-            <Emoji width={24} height={24}>
-              {item.value}
-            </Emoji>
+            <Emoji>{item.value}</Emoji>
          </IconButton>
        );
      });
@@ -7,6 +7,7 @@ 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-end",
+    placement: "bottom",
  });

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

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

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

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

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

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

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

  // Custom click outside handling rather than using `hideOnClickOutside` from reakit so that we can
  // prevent event bubbling.
@@ -199,7 +198,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>
@@ -207,7 +206,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>
@@ -274,7 +273,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;
@@ -283,15 +282,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: "";
@@ -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, { Props as ButtonProps, Inner } from "~/components/Button";
+import Button, { 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 = Omit<ButtonProps<any>, "onChange"> & {
+export type Props = {
  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: var(--pointer);
+  cursor: default;

  &:hover:not(:disabled) {
    background: ${s("buttonNeutralBackground")};
@@ -1,8 +1,6 @@
 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";
@@ -21,7 +19,7 @@ function InputSelectPermission(
  const { t } = useTranslation();

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

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

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

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

  ${breakpoint("tablet")`
@@ -264,6 +265,7 @@ 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;
@@ -24,15 +24,13 @@ 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, isOpen }: Props,
+  { onRequestClose }: Props,
  ref: React.RefObject<HTMLDivElement>
 ) {
  const context = useActionContext();
@@ -74,7 +72,7 @@ function Notifications(
            <PaginatedList
              fetch={notifications.fetchPage}
              options={{ archived: false }}
-              items={isOpen ? notifications.orderedData : undefined}
+              items={notifications.orderedData}
              renderItem={(item: Notification) => (
                <NotificationListItem
                  key={item.id}
@@ -40,11 +40,7 @@ const NotificationsPopover: React.FC = ({ children }: Props) => {
        shrink
        flex
      >
-        <Notifications
-          onRequestClose={popover.hide}
-          isOpen={popover.visible}
-          ref={scrollableRef}
-        />
+        <Notifications onRequestClose={popover.hide} ref={scrollableRef} />
      </StyledPopover>
    </>
  );
@@ -6,11 +6,9 @@ import PaginatedList from "~/components/PaginatedList";
 import EventListItem from "./EventListItem";

 type Props = {
-  events: Event<Document>[];
+  events: Event[];
  document: Document;
-  fetch: (
-    options: Record<string, any> | undefined
-  ) => Promise<Event<Document>[]>;
+  fetch: (options: Record<string, any> | undefined) => Promise<Event[]>;
  options?: Record<string, any>;
  heading?: React.ReactNode;
  empty?: React.ReactNode;
@@ -32,7 +30,7 @@ const PaginatedEventList = React.memo<Props>(function PaginatedEventList({
      heading={heading}
      fetch={fetch}
      options={options}
-      renderItem={(item: Event<Document>, index) => (
+      renderItem={(item: Event, index) => (
        <EventListItem
          key={item.id}
          event={item}
@@ -19,8 +19,7 @@ export interface PaginatedItem {
 }

 type Props<T> = WithTranslation &
-  RootStore &
-  React.HTMLAttributes<HTMLDivElement> & {
+  RootStore & {
    fetch?: (
      options: Record<string, any> | undefined
    ) => Promise<T[] | undefined> | undefined;
@@ -1,172 +0,0 @@
-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);
@@ -1,87 +0,0 @@
-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);
@@ -1,161 +0,0 @@
-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;
@@ -1,146 +0,0 @@
-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);
@@ -10,7 +10,7 @@ export default function SearchActions() {
  const { searches } = useStores();

  React.useEffect(() => {
-    if (!searches.isLoaded && !searches.isFetching) {
+    if (!searches.isLoaded) {
      void searches.fetchPage({
        source: "app",
      });
@@ -19,10 +19,9 @@ import SearchListItem from "./SearchListItem";

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

-function SearchPopover({ shareId, className }: Props) {
+function SearchPopover({ shareId }: Props) {
  const { t } = useTranslation();
  const { documents } = useStores();
  const focusRef = React.useRef<HTMLElement | null>(null);
@@ -55,8 +54,7 @@ function SearchPopover({ shareId, className }: Props) {
  const performSearch = React.useCallback(
    async ({ query, ...options }) => {
      if (query?.length > 0) {
-        const response = await documents.search({
-          query,
+        const response = await documents.search(query, {
          shareId,
          ...options,
        });
@@ -188,7 +186,6 @@ function SearchPopover({ shareId, className }: Props) {
            onChange={handleSearchInputChange}
            onFocus={handleSearchInputFocus}
            onKeyDown={handleKeyDown}
-            className={className}
          />
        )}
      </PopoverDisclosure>
@@ -1,13 +1,13 @@
+import invariant from "invariant";
 import debounce from "lodash/debounce";
 import isEmpty from "lodash/isEmpty";
 import { observer } from "mobx-react";
-import { CopyIcon, GlobeIcon, InfoIcon, QuestionMarkIcon } from "outline-icons";
+import { CopyIcon, GlobeIcon, InfoIcon } from "outline-icons";
 import * as React from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import { toast } from "sonner";
 import styled, { useTheme } from "styled-components";
-import Flex from "@shared/components/Flex";
 import Squircle from "@shared/components/Squircle";
 import { s } from "@shared/styles";
 import { UrlHelper } from "@shared/utils/UrlHelper";
@@ -17,6 +17,7 @@ import Input, { NativeInput } from "~/components/Input";
 import Switch from "~/components/Switch";
 import env from "~/env";
 import usePolicy from "~/hooks/usePolicy";
+import useStores from "~/hooks/useStores";
 import { AvatarSize } from "../../Avatar";
 import CopyToClipboard from "../../CopyToClipboard";
 import NudeButton from "../../NudeButton";
@@ -38,6 +39,7 @@ type Props = {
 };

 function PublicAccess({ document, share, sharedParent }: Props) {
+  const { shares } = useStores();
  const { t } = useTranslation();
  const theme = useTheme();
  const [validationError, setValidationError] = React.useState("");
@@ -51,30 +53,20 @@ function PublicAccess({ document, share, sharedParent }: Props) {
    setUrlId(share?.urlId);
  }, [share?.urlId]);

-  const handleIndexingChanged = React.useCallback(
-    async (event) => {
-      try {
-        await share?.save({
-          allowIndexing: event.currentTarget.checked,
-        });
-      } catch (err) {
-        toast.error(err.message);
-      }
-    },
-    [share]
-  );
-
  const handlePublishedChange = React.useCallback(
    async (event) => {
+      const share = shares.getByDocumentId(document.id);
+      invariant(share, "Share must exist");
+
      try {
-        await share?.save({
+        await share.save({
          published: event.currentTarget.checked,
        });
      } catch (err) {
        toast.error(err.message);
      }
    },
-    [share]
+    [document.id, shares]
  );

  const handleUrlChange = React.useMemo(
@@ -167,32 +159,6 @@ function PublicAccess({ document, share, sharedParent }: Props) {
      />

      <ResizingHeightContainer>
-        {share?.published && (
-          <ListItem
-            title={
-              <Text type="tertiary" as={Flex}>
-                {t("Search engine indexing")}&nbsp;
-                <Tooltip
-                  content={t(
-                    "Disable this setting to discourage search engines from indexing the page"
-                  )}
-                >
-                  <QuestionMarkIcon size={18} />
-                </Tooltip>
-              </Text>
-            }
-            actions={
-              <Switch
-                aria-label={t("Search engine indexing")}
-                checked={share?.allowIndexing ?? false}
-                onChange={handleIndexingChanged}
-                width={26}
-                height={14}
-              />
-            }
-          />
-        )}
-
        {sharedParent?.published ? (
          <ShareLinkInput type="text" disabled defaultValue={shareUrl}>
            {copyButton}
@@ -8,6 +8,7 @@ import { toast } from "sonner";
 import { DocumentPermission } from "@shared/types";
 import Document from "~/models/Document";
 import Group from "~/models/Group";
+import Share from "~/models/Share";
 import User from "~/models/User";
 import { Avatar, GroupAvatar, AvatarSize } from "~/components/Avatar";
 import NudeButton from "~/components/NudeButton";
@@ -31,19 +32,26 @@ import { AccessControlList } from "./AccessControlList";
 type Props = {
  /** The document to share. */
  document: Document;
+  /** The existing share model, if any. */
+  share: Share | null | undefined;
+  /** The existing share parent model, if any. */
+  sharedParent: Share | null | undefined;
  /** Callback fired when the popover requests to be closed. */
  onRequestClose: () => void;
  /** Whether the popover is visible. */
  visible: boolean;
 };

-function SharePopover({ document, onRequestClose, visible }: Props) {
+function SharePopover({
+  document,
+  share,
+  sharedParent,
+  onRequestClose,
+  visible,
+}: Props) {
  const team = useCurrentTeam();
  const { t } = useTranslation();
  const can = usePolicy(document);
-  const { shares } = useStores();
-  const share = shares.getByDocumentId(document.id);
-  const sharedParent = shares.getByDocumentParents(document.id);
  const [hasRendered, setHasRendered] = React.useState(visible);
  const { users, userMemberships, groups, groupMemberships } = useStores();
  const [query, setQuery] = React.useState("");
@@ -94,40 +94,38 @@ function AppSidebar() {
              </SidebarButton>
            )}
          </OrganizationMenu>
-          <Overflow>
-            <Section>
+          <Section>
+            <SidebarLink
+              to={homePath()}
+              icon={<HomeIcon />}
+              exact={false}
+              label={t("Home")}
+            />
+            <SidebarLink
+              to={searchPath()}
+              icon={<SearchIcon />}
+              label={t("Search")}
+              exact={false}
+            />
+            {can.createDocument && (
              <SidebarLink
-                to={homePath()}
-                icon={<HomeIcon />}
-                exact={false}
-                label={t("Home")}
+                to={draftsPath()}
+                icon={<DraftsIcon />}
+                label={
+                  <Flex align="center" justify="space-between">
+                    {t("Drafts")}
+                    {documents.totalDrafts > 0 ? (
+                      <Drafts size="xsmall" type="tertiary">
+                        {documents.totalDrafts > 25
+                          ? "25+"
+                          : documents.totalDrafts}
+                      </Drafts>
+                    ) : null}
+                  </Flex>
+                }
              />
-              <SidebarLink
-                to={searchPath()}
-                icon={<SearchIcon />}
-                label={t("Search")}
-                exact={false}
-              />
-              {can.createDocument && (
-                <SidebarLink
-                  to={draftsPath()}
-                  icon={<DraftsIcon />}
-                  label={
-                    <Flex align="center" justify="space-between">
-                      {t("Drafts")}
-                      {documents.totalDrafts > 0 ? (
-                        <Drafts size="xsmall" type="tertiary">
-                          {documents.totalDrafts > 25
-                            ? "25+"
-                            : documents.totalDrafts}
-                        </Drafts>
-                      ) : null}
-                    </Flex>
-                  }
-                />
-              )}
-            </Section>
-          </Overflow>
+            )}
+          </Section>
          <Scrollable flex shadow>
            <Section>
              <Starred />
@@ -135,16 +133,16 @@ function AppSidebar() {
            <Section>
              <SharedWithMe />
            </Section>
-            <Section>
+            <Section auto>
              <Collections />
            </Section>
-            {can.createDocument && (
-              <Section auto>
-                <ArchiveLink />
-              </Section>
-            )}
            <Section>
-              {can.createDocument && <TrashLink />}
+              {can.createDocument && (
+                <>
+                  <ArchiveLink />
+                  <TrashLink />
+                </>
+              )}
              <SidebarAction action={inviteUser} />
            </Section>
          </Scrollable>
@@ -154,11 +152,6 @@ function AppSidebar() {
  );
 }

-const Overflow = styled.div`
-  overflow: hidden;
-  flex-shrink: 0;
-`;
-
 const Drafts = styled(Text)`
  margin: 0 4px;
 `;
@@ -32,13 +32,13 @@ function Right({ children, border, className }: Props) {
        Math.min(window.innerWidth - event.pageX, maxWidth),
        minWidth
      );
-      ui.set({ sidebarRightWidth: width });
+      ui.setRightSidebarWidth(width);
    },
    [minWidth, maxWidth, ui]
  );

  const handleReset = React.useCallback(() => {
-    ui.set({ sidebarRightWidth: theme.sidebarRightWidth });
+    ui.setRightSidebarWidth(theme.sidebarRightWidth);
  }, [ui, theme.sidebarRightWidth]);

  const handleStopDrag = React.useCallback(() => {
@@ -128,7 +128,7 @@ const Sidebar = styled(m.div)<{
  max-width: 80%;
  border-left: 1px solid ${s("divider")};
  transition: border-left 100ms ease-in-out;
-  z-index: ${depths.sidebar};
+  z-index: 1;

  ${breakpoint("mobile", "tablet")`
    display: flex;
@@ -1,18 +1,13 @@
 import { observer } from "mobx-react";
-import { SidebarIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import { NavigationNode } from "@shared/types";
-import Flex from "~/components/Flex";
 import Scrollable from "~/components/Scrollable";
 import SearchPopover from "~/components/SearchPopover";
-import Tooltip from "~/components/Tooltip";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";
-import { hover } from "~/styles";
 import history from "~/utils/history";
-import { metaDisplay } from "~/utils/keyboard";
 import { homePath, sharedDocumentPath } from "~/utils/routeHelpers";
 import { useTeamContext } from "../TeamContext";
 import TeamLogo from "../TeamLogo";
@@ -20,7 +15,6 @@ import Sidebar from "./Sidebar";
 import Section from "./components/Section";
 import DocumentLink from "./components/SharedDocumentLink";
 import SidebarButton from "./components/SidebarButton";
-import ToggleButton from "./components/ToggleButton";

 type Props = {
  rootNode: NavigationNode;
@@ -33,11 +27,9 @@ function SharedSidebar({ rootNode, shareId }: Props) {
  const { ui, documents } = useStores();
  const { t } = useTranslation();

-  const teamAvailable = !!team?.name;
-
  return (
-    <StyledSidebar $hoverTransition={!teamAvailable}>
-      {teamAvailable && (
+    <Sidebar>
+      {team?.name && (
        <SidebarButton
          title={team.name}
          image={<TeamLogo model={team} size={32} alt={t("Logo")} />}
@@ -46,20 +38,11 @@ function SharedSidebar({ rootNode, shareId }: Props) {
              user ? homePath() : sharedDocumentPath(shareId, rootNode.url)
            )
          }
-        >
-          <ToggleSidebar />
-        </SidebarButton>
+        />
      )}
      <ScrollContainer topShadow flex>
        <TopSection>
-          <SearchWrapper>
-            <StyledSearchPopover shareId={shareId} />
-          </SearchWrapper>
-          {!teamAvailable && (
-            <ToggleWrapper>
-              <ToggleSidebar />
-            </ToggleWrapper>
-          )}
+          <SearchPopover shareId={shareId} />
        </TopSection>
        <Section>
          <DocumentLink
@@ -72,74 +55,23 @@ function SharedSidebar({ rootNode, shareId }: Props) {
          />
        </Section>
      </ScrollContainer>
-    </StyledSidebar>
+    </Sidebar>
  );
 }

-const ToggleSidebar = () => {
-  const { t } = useTranslation();
-  const { ui } = useStores();
-
-  return (
-    <Tooltip
-      content={t("Toggle sidebar")}
-      shortcut={`${metaDisplay}+.`}
-      delay={500}
-    >
-      <ToggleButton
-        position="bottom"
-        image={<SidebarIcon />}
-        onClick={() => {
-          ui.toggleCollapsedSidebar();
-          (document.activeElement as HTMLElement)?.blur();
-        }}
-      />
-    </Tooltip>
-  );
-};
-
 const ScrollContainer = styled(Scrollable)`
  padding-bottom: 16px;
 `;

-const TopSection = styled(Flex)`
-  padding: 8px;
-  flex-shrink: 0;
-`;
+const TopSection = styled(Section)`
+  // this weird looking && increases the specificity of the style rule
+  &&:first-child {
+    margin-top: 16px;
+  }

-const SearchWrapper = styled.div`
-  width: 100%;
-`;
-
-const StyledSearchPopover = styled(SearchPopover)`
-  width: 100%;
-  transition: width 100ms ease-out;
-  margin: 8px 0;
-`;
-
-const ToggleWrapper = styled.div`
-  position: absolute;
-  right: 0;
-  opacity: 0;
-  transform: translateX(10px);
-  transition: opacity 100ms ease-out, transform 100ms ease-out;
-`;
-
-const StyledSidebar = styled(Sidebar)<{ $hoverTransition: boolean }>`
-  ${({ $hoverTransition }) =>
-    $hoverTransition &&
-    `
-      &: ${hover} {
-        ${StyledSearchPopover} {
-          width: 85%;
-        }
-
-        ${ToggleWrapper} {
-          opacity: 1;
-          transform: translateX(0);
-        }
-      }
-    `}
+  && {
+    margin-bottom: 16px;
+  }
 `;

 export default observer(SharedSidebar);
@@ -8,7 +8,6 @@ import { Avatar } from "~/components/Avatar";
 import Flex from "~/components/Flex";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import useMenuContext from "~/hooks/useMenuContext";
-import useMobile from "~/hooks/useMobile";
 import usePrevious from "~/hooks/usePrevious";
 import useStores from "~/hooks/useStores";
 import AccountMenu from "~/menus/AccountMenu";
@@ -40,12 +39,12 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
  const previousLocation = usePrevious(location);
  const { isMenuOpen } = useMenuContext();
  const user = useCurrentUser({ rejectOnEmpty: false });
-  const isMobile = useMobile();
  const width = ui.sidebarWidth;
  const collapsed = ui.sidebarIsClosed && !isMenuOpen;
  const maxWidth = theme.sidebarMaxWidth;
  const minWidth = theme.sidebarMinWidth + 16; // padding

+  const setWidth = ui.setSidebarWidth;
  const [offset, setOffset] = React.useState(0);
  const [isHovering, setHovering] = React.useState(false);
  const [isAnimating, setAnimating] = React.useState(false);
@@ -61,13 +60,13 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
      const width = Math.min(event.pageX - offset, maxWidth);
      const isSmallerThanCollapsePoint = width < minWidth / 2;

-      ui.set({
-        sidebarWidth: isSmallerThanCollapsePoint
-          ? theme.sidebarCollapsedWidth
-          : width,
-      });
+      if (isSmallerThanCollapsePoint) {
+        setWidth(theme.sidebarCollapsedWidth);
+      } else {
+        setWidth(width);
+      }
    },
-    [ui, theme, offset, minWidth, maxWidth]
+    [theme, offset, minWidth, maxWidth, setWidth]
  );

  const handleStopDrag = React.useCallback(() => {
@@ -85,25 +84,17 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
        setCollapsing(true);
        ui.collapseSidebar();
      } else {
-        ui.set({ sidebarWidth: minWidth });
+        setWidth(minWidth);
        setAnimating(true);
      }
    } else {
-      ui.set({ sidebarWidth: width });
+      setWidth(width);
    }
-  }, [ui, isSmallerThanMinimum, minWidth, width]);
-
-  const handleBlur = React.useCallback(() => {
-    setHovering(false);
-  }, []);
+  }, [ui, isSmallerThanMinimum, minWidth, width, setWidth]);

  const handleMouseDown = React.useCallback(
    (event) => {
      event.preventDefault();
-      if (!document.hasFocus()) {
-        return;
-      }
-
      setOffset(event.pageX - width);
      setResizing(true);
      setAnimating(false);
@@ -111,9 +102,9 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
    [width]
  );

-  const handlePointerActivity = React.useCallback(() => {
+  const handlePointerMove = React.useCallback(() => {
    if (ui.sidebarIsClosed) {
-      setHovering(document.hasFocus());
+      setHovering(true);
      setPointerMoved(true);
    }
  }, [ui.sidebarIsClosed]);
@@ -122,10 +113,7 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
    (ev) => {
      if (hasPointerMoved) {
        setHovering(
-          document.hasFocus() &&
-            ev.pageX < width &&
-            ev.pageY < window.innerHeight &&
-            ev.pageY > 0
+          ev.pageX < width && ev.pageY < window.innerHeight && ev.pageY > 0
        );
      }
    },
@@ -148,11 +136,11 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
  React.useEffect(() => {
    if (isCollapsing) {
      setTimeout(() => {
-        ui.set({ sidebarWidth: minWidth });
+        setWidth(minWidth);
        setCollapsing(false);
      }, ANIMATION_MS);
    }
-  }, [ui, minWidth, isCollapsing]);
+  }, [setWidth, minWidth, isCollapsing]);

  React.useEffect(() => {
    if (isResizing) {
@@ -163,17 +151,14 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
      document.body.style.cursor = "initial";
    }

-    window.addEventListener("blur", handleBlur);
-
    return () => {
-      window.removeEventListener("blur", handleBlur);
      document.removeEventListener("mousemove", handleDrag);
      document.removeEventListener("mouseup", handleStopDrag);
    };
-  }, [isResizing, handleDrag, handleBlur, handleStopDrag]);
+  }, [isResizing, handleDrag, handleStopDrag]);

  const handleReset = React.useCallback(() => {
-    ui.set({ sidebarWidth: theme.sidebarWidth });
+    ui.setSidebarWidth(theme.sidebarWidth);
  }, [ui, theme.sidebarWidth]);

  React.useEffect(() => {
@@ -204,10 +189,8 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
        $isSmallerThanMinimum={isSmallerThanMinimum}
        $mobileSidebarVisible={ui.mobileSidebarVisible}
        $collapsed={collapsed}
-        $isMobile={isMobile}
        className={className}
-        onPointerDown={handlePointerActivity}
-        onPointerMove={handlePointerActivity}
+        onPointerMove={handlePointerMove}
        onPointerLeave={handlePointerLeave}
        column
      >
@@ -231,7 +214,15 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
                  />
                }
              >
-                <Notifications />
+                <NotificationsPopover>
+                  {(rest: SidebarButtonProps) => (
+                    <SidebarButton
+                      {...rest}
+                      position="bottom"
+                      image={<NotificationIcon />}
+                    />
+                  )}
+                </NotificationsPopover>
              </SidebarButton>
            )}
          </AccountMenu>
@@ -246,14 +237,6 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
  );
 });

-const Notifications = () => (
-  <NotificationsPopover>
-    {(rest: SidebarButtonProps) => (
-      <SidebarButton {...rest} position="bottom" image={<NotificationIcon />} />
-    )}
-  </NotificationsPopover>
-);
-
 const Backdrop = styled.a`
  animation: ${fadeIn} 250ms ease-in-out;
  position: fixed;
@@ -273,7 +256,6 @@ type ContainerProps = {
  $isHovering: boolean;
  $collapsed: boolean;
  $hidden: boolean;
-  $isMobile: boolean;
 };

 const hoverStyles = (props: ContainerProps) => `
@@ -298,8 +280,9 @@ const Container = styled(Flex)<ContainerProps>`
  width: 100%;
  background: ${s("sidebarBackground")};
  transition: box-shadow 150ms ease-in-out, transform 150ms ease-out,
-    ${(props: ContainerProps) =>
-      props.$isAnimating ? `,width ${ANIMATION_MS}ms ease-out` : ""};
+    ${s("backgroundTransition")}
+      ${(props: ContainerProps) =>
+        props.$isAnimating ? `,width ${ANIMATION_MS}ms ease-out` : ""};
  transform: translateX(
    ${(props) => (props.$mobileSidebarVisible ? 0 : "-100%")}
  );
@@ -315,19 +298,8 @@ const Container = styled(Flex)<ContainerProps>`

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

  ${breakpoint("tablet")`
@@ -1,101 +1,41 @@
-import isUndefined from "lodash/isUndefined";
 import { observer } from "mobx-react";
 import { ArchiveIcon } from "outline-icons";
 import * as React from "react";
+import { useDrop } from "react-dnd";
 import { useTranslation } from "react-i18next";
-import Flex from "@shared/components/Flex";
-import Collection from "~/models/Collection";
-import PaginatedList from "~/components/PaginatedList";
-import useRequest from "~/hooks/useRequest";
+import { toast } from "sonner";
 import useStores from "~/hooks/useStores";
 import { archivePath } from "~/utils/routeHelpers";
-import { useDropToArchive } from "../hooks/useDragAndDrop";
-import { ArchivedCollectionLink } from "./ArchivedCollectionLink";
-import { StyledError } from "./Collections";
-import PlaceholderCollections from "./PlaceholderCollections";
-import Relative from "./Relative";
-import SidebarLink from "./SidebarLink";
+import SidebarLink, { DragObject } from "./SidebarLink";

 function ArchiveLink() {
-  const { collections } = useStores();
+  const { policies, documents } = useStores();
  const { t } = useTranslation();

-  const [disclosure, setDisclosure] = React.useState<boolean>(false);
-  const [expanded, setExpanded] = React.useState<boolean | undefined>();
-
-  const { request, data, loading, error } = useRequest(
-    collections.fetchArchived,
-    true
-  );
-
-  React.useEffect(() => {
-    if (!isUndefined(data) && !loading && isUndefined(error)) {
-      setDisclosure(data.length > 0);
-    }
-  }, [data, loading, error]);
-
-  React.useEffect(() => {
-    setDisclosure(collections.archived.length > 0);
-  }, [collections.archived]);
-
-  React.useEffect(() => {
-    if (disclosure && isUndefined(expanded)) {
-      setExpanded(false);
-    }
-  }, [disclosure]);
-
-  React.useEffect(() => {
-    if (expanded) {
-      void request();
-    }
-  }, [expanded, request]);
-
-  const handleDisclosureClick = React.useCallback((ev) => {
-    ev.preventDefault();
-    ev.stopPropagation();
-    setExpanded((e) => !e);
-  }, []);
-
-  const handleClick = React.useCallback(() => {
-    setExpanded(true);
-  }, []);
-
-  const [{ isOverArchiveSection, isDragging }, dropToArchiveRef] =
-    useDropToArchive();
+  const [{ isDocumentDropping }, dropToArchiveDocument] = useDrop({
+    accept: "document",
+    drop: async (item: DragObject) => {
+      const document = documents.get(item.id);
+      await document?.archive();
+      toast.success(t("Document archived"));
+    },
+    canDrop: (item) => policies.abilities(item.id).archive,
+    collect: (monitor) => ({
+      isDocumentDropping: monitor.isOver(),
+    }),
+  });

  return (
-    <Flex column>
-      <div ref={dropToArchiveRef}>
-        <SidebarLink
-          to={archivePath()}
-          icon={<ArchiveIcon open={isOverArchiveSection && isDragging} />}
-          exact={false}
-          label={t("Archive")}
-          isActiveDrop={isOverArchiveSection && isDragging}
-          depth={0}
-          expanded={disclosure ? expanded : undefined}
-          onDisclosureClick={handleDisclosureClick}
-          onClick={handleClick}
-        />
-      </div>
-      {expanded === true ? (
-        <Relative>
-          <PaginatedList
-            aria-label={t("Archived collections")}
-            items={collections.archived}
-            loading={<PlaceholderCollections />}
-            renderError={(props) => <StyledError {...props} />}
-            renderItem={(item: Collection) => (
-              <ArchivedCollectionLink
-                key={item.id}
-                depth={1}
-                collection={item}
-              />
-            )}
-          />
-        </Relative>
-      ) : null}
-    </Flex>
+    <div ref={dropToArchiveDocument}>
+      <SidebarLink
+        to={archivePath()}
+        icon={<ArchiveIcon open={isDocumentDropping} />}
+        exact={false}
+        label={t("Archive")}
+        active={documents.active?.isArchived && !documents.active?.isDeleted}
+        isActiveDrop={isDocumentDropping}
+      />
+    </div>
  );
 }

@@ -1,47 +0,0 @@
-import * as React from "react";
-import Collection from "~/models/Collection";
-import useStores from "~/hooks/useStores";
-import CollectionLink from "./CollectionLink";
-import CollectionLinkChildren from "./CollectionLinkChildren";
-import Relative from "./Relative";
-
-type Props = {
-  collection: Collection;
-  depth?: number;
-};
-
-export function ArchivedCollectionLink({ collection, depth }: Props) {
-  const { documents } = useStores();
-
-  const [expanded, setExpanded] = React.useState(false);
-
-  const handleDisclosureClick = React.useCallback((ev) => {
-    ev.preventDefault();
-    ev.stopPropagation();
-    setExpanded((e) => !e);
-  }, []);
-
-  const handleClick = React.useCallback(() => {
-    setExpanded(true);
-  }, []);
-
-  return (
-    <>
-      <CollectionLink
-        depth={depth ? depth : 0}
-        collection={collection}
-        expanded={expanded}
-        activeDocument={documents.active}
-        onDisclosureClick={handleDisclosureClick}
-        onClick={handleClick}
-      />
-      <Relative>
-        <CollectionLinkChildren
-          collection={collection}
-          expanded={expanded}
-          prefetchDocument={documents.prefetchDocument}
-        />
-      </Relative>
-    </>
-  );
-}
@@ -4,10 +4,11 @@ import { PlusIcon } from "outline-icons";
 import * as React from "react";
 import { useDrop } from "react-dnd";
 import { useTranslation } from "react-i18next";
+import { useHistory } from "react-router-dom";
 import { CollectionValidation } from "@shared/validations";
 import Collection from "~/models/Collection";
 import Document from "~/models/Document";
-import ConfirmMoveDialog from "~/components/ConfirmMoveDialog";
+import DocumentReparent from "~/scenes/DocumentReparent";
 import Fade from "~/components/Fade";
 import CollectionIcon from "~/components/Icons/CollectionIcon";
 import NudeButton from "~/components/NudeButton";
@@ -29,8 +30,6 @@ type Props = {
  onDisclosureClick: (ev?: React.MouseEvent<HTMLButtonElement>) => void;
  activeDocument: Document | undefined;
  isDraggingAnyCollection?: boolean;
-  depth?: number;
-  onClick?: () => void;
 };

 const CollectionLink: React.FC<Props> = ({
@@ -38,14 +37,13 @@ const CollectionLink: React.FC<Props> = ({
  expanded,
  onDisclosureClick,
  isDraggingAnyCollection,
-  depth,
-  onClick,
 }: Props) => {
  const { dialogs, documents, collections } = useStores();
  const [menuOpen, handleMenuOpen, handleMenuClose] = useBoolean();
  const [isEditing, setIsEditing] = React.useState(false);
  const can = usePolicy(collection);
  const { t } = useTranslation();
+  const history = useHistory();
  const sidebarContext = useSidebarContext();
  const editableTitleRef = React.useRef<RefHandle>(null);

@@ -54,8 +52,9 @@ const CollectionLink: React.FC<Props> = ({
      await collection.save({
        name,
      });
+      history.replace(collection.path, history.location.state);
    },
-    [collection]
+    [collection, history]
  );

  // Drop to re-parent document
@@ -79,12 +78,20 @@ const CollectionLink: React.FC<Props> = ({

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

-  const handleRename = React.useCallback(() => {
-    editableTitleRef.current?.setIsEditing(true);
-  }, [editableTitleRef]);
-
  return (
    <Relative ref={drop}>
      <DropToImport collectionId={collection.id}>
        <SidebarLink
-          onClick={onClick}
          to={{
            pathname: collection.path,
            state: { sidebarContext },
@@ -146,7 +148,7 @@ const CollectionLink: React.FC<Props> = ({
            />
          }
          exact={false}
-          depth={depth ? depth : 0}
+          depth={0}
          menu={
            !isEditing &&
            !isDraggingAnyCollection && (
@@ -161,7 +163,7 @@ const CollectionLink: React.FC<Props> = ({
                </NudeButton>
                <CollectionMenu
                  collection={collection}
-                  onRename={handleRename}
+                  onRename={() => editableTitleRef.current?.setIsEditing(true)}
                  onOpen={handleMenuOpen}
                  onClose={handleMenuClose}
                />
@@ -2,12 +2,10 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { useDrop } from "react-dnd";
 import { useTranslation } from "react-i18next";
-import { Waypoint } from "react-waypoint";
 import { toast } from "sonner";
 import styled from "styled-components";
 import Collection from "~/models/Collection";
 import Document from "~/models/Document";
-import ConfirmMoveDialog from "~/components/ConfirmMoveDialog";
 import DocumentsLoader from "~/components/DocumentsLoader";
 import { ResizingHeightContainer } from "~/components/ResizingHeightContainer";
 import Text from "~/components/Text";
@@ -35,13 +33,11 @@ function CollectionLinkChildren({
  expanded,
  prefetchDocument,
 }: Props) {
-  const pageSize = 250;
  const can = usePolicy(collection);
  const manualSort = collection.sort.field === "index";
-  const { documents, dialogs, collections } = useStores();
+  const { documents } = useStores();
  const { t } = useTranslation();
  const childDocuments = useCollectionDocuments(collection, documents.active);
-  const [showing, setShowing] = React.useState(pageSize);

  // Drop to reorder document
  const [{ isOverReorder, isDraggingAnyDocument }, dropToReorder] = useDrop({
@@ -59,26 +55,11 @@ function CollectionLinkChildren({
      if (!collection) {
        return;
      }
-
-      const prevCollection = collections.get(item.collectionId);
-
-      if (
-        prevCollection &&
-        prevCollection.permission !== collection.permission
-      ) {
-        dialogs.openModal({
-          title: t("Change permissions?"),
-          content: (
-            <ConfirmMoveDialog item={item} collection={collection} index={0} />
-          ),
-        });
-      } else {
-        void documents.move({
-          documentId: item.id,
-          collectionId: collection.id,
-          index: 0,
-        });
-      }
+      void documents.move({
+        documentId: item.id,
+        collectionId: collection.id,
+        index: 0,
+      });
    },
    collect: (monitor) => ({
      isOverReorder: !!monitor.isOver(),
@@ -86,18 +67,6 @@ function CollectionLinkChildren({
    }),
  });

-  React.useEffect(() => {
-    if (!expanded) {
-      setShowing(pageSize);
-    }
-  }, [expanded]);
-
-  const showMore = React.useCallback(() => {
-    if (childDocuments && childDocuments.length > showing) {
-      setShowing((value) => value + pageSize);
-    }
-  }, [childDocuments, showing]);
-
  return (
    <Folder expanded={expanded}>
      {isDraggingAnyDocument && can.createDocument && manualSort && (
@@ -113,7 +82,7 @@ function CollectionLinkChildren({
            <Loading />
          </ResizingHeightContainer>
        )}
-        {childDocuments?.slice(0, showing).map((node, index) => (
+        {childDocuments?.map((node, index) => (
          <DocumentLink
            key={node.id}
            node={node}
@@ -136,7 +105,6 @@ function CollectionLinkChildren({
            depth={2}
          />
        )}
-        <Waypoint key={showing} onEnter={showMore} fireOnRapidScroll />
      </DocumentsLoader>
    </Folder>
  );
@@ -55,7 +55,7 @@ function Collections() {
          <PaginatedList
            options={params}
            aria-label={t("Collections")}
-            items={collections.allActive}
+            items={collections.orderedData}
            loading={<PlaceholderCollections />}
            heading={
              isDraggingAnyCollection ? (
@@ -84,7 +84,7 @@ function Collections() {
  );
 }

-export const StyledError = styled(Error)`
+const StyledError = styled(Error)`
  font-size: 15px;
  padding: 0 8px;
 `;
@@ -41,6 +41,16 @@ function EditableTitle(
    setIsEditing(true);
  }, []);

+  const handleKeyDown = React.useCallback(
+    (event) => {
+      if (event.key === "Escape") {
+        setIsEditing(false);
+        setValue(originalValue);
+      }
+    },
+    [originalValue]
+  );
+
  const stopPropagation = React.useCallback((event) => {
    event.preventDefault();
    event.stopPropagation();
@@ -53,7 +63,6 @@ function EditableTitle(
  const handleSave = React.useCallback(
    async (ev) => {
      ev.preventDefault();
-      ev.stopPropagation();
      setIsEditing(false);
      const trimmedValue = value.trim();

@@ -76,22 +85,6 @@ function EditableTitle(
    [originalValue, value, onSubmit]
  );

-  const handleKeyDown = React.useCallback(
-    async (ev) => {
-      if (ev.nativeEvent.isComposing) {
-        return;
-      }
-      if (ev.key === "Escape") {
-        setIsEditing(false);
-        setValue(originalValue);
-      }
-      if (ev.key === "Enter") {
-        await handleSave(ev);
-      }
-    },
-    [handleSave, originalValue]
-  );
-
  React.useEffect(() => {
    onEditing?.(isEditing);
  }, [onEditing, isEditing]);
@@ -112,9 +112,8 @@ const NavLink = ({
      !rest.target &&
      !event.altKey &&
      !event.metaKey &&
-      !event.ctrlKey &&
-      !isActive,
-    [rest.target, isActive]
+      !event.ctrlKey,
+    [rest.target]
  );

  const navigateTo = React.useCallback(() => {
@@ -154,13 +153,14 @@ const NavLink = ({
    <Link
      key={isActive ? "active" : "inactive"}
      ref={linkRef}
-      onClick={handleClick}
+      // onMouseDown={handleClick}
      onKeyDown={(event) => {
        if (["Enter", " "].includes(event.key)) {
          navigateTo();
          event.currentTarget?.blur();
        }
      }}
+      onClick={handleClick}
      aria-current={(isActive && ariaCurrent) || undefined}
      className={className}
      style={style}
@@ -59,7 +59,6 @@ const StyledMoreIcon = styled(MoreIcon)`
 `;

 const Container = styled(Flex)<{ $position: "top" | "bottom" }>`
-  overflow: hidden;
  padding-top: ${(props) =>
    props.$position === "top" && Desktop.hasInsetTitlebar() ? 36 : 0}px;
  ${draggableOnDesktop()}
@@ -105,6 +104,7 @@ const Button = styled(Flex)<{
  &:hover,
  &[aria-expanded="true"] {
    color: ${s("sidebarText")};
+    transition: background 100ms ease-in-out;
    background: ${s("sidebarActiveBackground")};
  }

@@ -78,6 +78,7 @@ function SidebarLink(

  const activeStyle = React.useMemo(
    () => ({
+      fontWeight: 600,
      color: theme.text,
      background: theme.sidebarActiveBackground,
      ...style,
@@ -201,10 +202,10 @@ const Link = styled(NavLink)<{
  display: flex;
  position: relative;
  text-overflow: ellipsis;
-  font-weight: 475;
  padding: 6px 16px;
  border-radius: 4px;
  min-height: 32px;
+  transition: background 50ms, color 50ms;
  user-select: none;
  background: ${(props) =>
    props.$isActiveDrop ? props.theme.slateDark : "inherit"};
@@ -48,20 +48,13 @@ function StarredLink({ star }: Props) {

  React.useEffect(() => {
    if (
-      star.documentId === ui.activeDocumentId &&
-      sidebarContext === locationSidebarContext
-    ) {
-      setExpanded(true);
-    } else if (
      star.collectionId === ui.activeCollectionId &&
      sidebarContext === locationSidebarContext
    ) {
      setExpanded(true);
    }
  }, [
-    star.documentId,
    star.collectionId,
-    ui.activeDocumentId,
    ui.activeCollectionId,
    sidebarContext,
    locationSidebarContext,
@@ -2,29 +2,41 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import Badge from "~/components/Badge";
-import { client } from "~/utils/ApiClient";
-import Logger from "~/utils/Logger";
-import { version as currentVersion } from "../../../../package.json";
+import { version } from "../../../../package.json";
 import SidebarLink from "./SidebarLink";

 export default function Version() {
-  const [versionsBehind, setVersionsBehind] = React.useState(-1);
+  const [releasesBehind, setReleasesBehind] = React.useState(-1);
  const { t } = useTranslation();

  React.useEffect(() => {
-    async function loadVersionInfo() {
-      try {
-        // Fetch version info from the server-side proxy
-        const res = await client.post("/installation.info");
-        if (res.data && res.data.versionsBehind >= 0) {
-          setVersionsBehind(res.data.versionsBehind);
+    async function loadReleases() {
+      const res = await fetch(
+        "https://api.github.com/repos/outline/outline/releases"
+      );
+      const releases = await res.json();
+
+      if (Array.isArray(releases)) {
+        const everyNewRelease = releases
+          .map((release) => release.tag_name)
+          .findIndex((tagName) => tagName === `v${version}`);
+
+        const onlyFullNewRelease = releases
+          .filter((release) => !release.prerelease)
+          .map((release) => release.tag_name)
+          .findIndex((tagName) => tagName === `v${version}`);
+
+        const computedReleasesBehind = version.includes("pre")
+          ? everyNewRelease
+          : onlyFullNewRelease;
+
+        if (computedReleasesBehind >= 0) {
+          setReleasesBehind(computedReleasesBehind);
        }
-      } catch (error) {
-        Logger.error("Failed to load version info", error);
      }
    }

-    void loadVersionInfo();
+    void loadReleases();
  }, []);

  return (
@@ -33,16 +45,16 @@ export default function Version() {
      href="https://github.com/outline/outline/releases"
      label={
        <>
-          v{currentVersion}
-          {versionsBehind >= 0 && (
+          v{version}
+          {releasesBehind >= 0 && (
            <>
              <br />
              <LilBadge>
-                {versionsBehind === 0
+                {releasesBehind === 0
                  ? t("Up to date")
                  : t(`{{ releasesBehind }} versions behind`, {
-                      releasesBehind: versionsBehind,
-                      count: versionsBehind,
+                      releasesBehind,
+                      count: releasesBehind,
                    })}
              </LilBadge>
            </>
@@ -12,7 +12,6 @@ import Document from "~/models/Document";
 import GroupMembership from "~/models/GroupMembership";
 import Star from "~/models/Star";
 import UserMembership from "~/models/UserMembership";
-import ConfirmMoveDialog from "~/components/ConfirmMoveDialog";
 import Icon from "~/components/Icon";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";
@@ -149,7 +148,6 @@ export function useDragDocument(
        icon: icon ? <Icon value={icon} color={color} /> : undefined,
        collectionId: document?.collectionId || "",
      } as DragObject),
-    canDrag: () => !!document?.isActive,
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
@@ -174,8 +172,7 @@ export function useDropToReparentDocument(
  setExpanded: () => void,
  parentRef: React.RefObject<HTMLDivElement>
 ) {
-  const { t } = useTranslation();
-  const { documents, collections, dialogs, policies } = useStores();
+  const { documents, policies } = useStores();
  const hasChildDocuments = !!node?.children.length;
  const document = node ? documents.get(node.id) : undefined;
  const pathToNode = React.useMemo(
@@ -195,11 +192,10 @@ export function useDropToReparentDocument(
      }
    };

-    const element = parentRef.current;
-    element?.addEventListener("dragleave", resetHoverExpanding);
+    parentRef.current?.addEventListener("dragleave", resetHoverExpanding);

    return () => {
-      element?.removeEventListener("dragleave", resetHoverExpanding);
+      parentRef.current?.removeEventListener("dragleave", resetHoverExpanding);
    };
  }, [parentRef]);

@@ -213,32 +209,10 @@ export function useDropToReparentDocument(
      if (monitor.didDrop() || !node) {
        return;
      }
-
-      const collection = documents.get(node.id)?.collection;
-      const prevCollection = collections.get(item.collectionId);
-
-      if (
-        collection &&
-        prevCollection &&
-        prevCollection.permission !== collection.permission
-      ) {
-        dialogs.openModal({
-          title: t("Change permissions?"),
-          content: (
-            <ConfirmMoveDialog
-              item={item}
-              collection={collection}
-              parentDocumentId={node.id}
-            />
-          ),
-        });
-      } else {
-        await documents.move({
-          documentId: item.id,
-          parentDocumentId: node.id,
-        });
-      }
-
+      await documents.move({
+        documentId: item.id,
+        parentDocumentId: node.id,
+      });
      setExpanded();
    },
    canDrop: (item, monitor) =>
@@ -246,7 +220,6 @@ export function useDropToReparentDocument(
      !!pathToNode &&
      !pathToNode.includes(monitor.getItem().id) &&
      item.id !== node.id &&
-      !!document?.isActive &&
      policies.abilities(node.id).update &&
      policies.abilities(item.id).move,
    hover: (_item, monitor) => {
@@ -297,9 +270,7 @@ export function useDropToReorderDocument(
      }
 ) {
  const { t } = useTranslation();
-  const { documents, collections, dialogs, policies } = useStores();
-
-  const document = documents.get(node.id);
+  const { documents, policies } = useStores();

  return useDrop<
    DragObject,
@@ -308,23 +279,11 @@ export function useDropToReorderDocument(
  >({
    accept: "document",
    canDrop: (item: DragObject) => {
-      if (
-        item.id === node.id ||
-        !policies.abilities(item.id)?.move ||
-        !document?.isActive
-      ) {
+      if (item.id === node.id) {
        return false;
      }

-      const params = getMoveParams(item);
-      if (params?.collectionId) {
-        return policies.abilities(params.collectionId)?.updateDocument;
-      }
-      if (params?.parentDocumentId) {
-        return policies.abilities(params.parentDocumentId)?.update;
-      }
-
-      return true;
+      return policies.abilities(item.id)?.move;
    },
    drop: async (item) => {
      if (!collection?.isManualSort && item.collectionId === collection?.id) {
@@ -337,28 +296,8 @@ export function useDropToReorderDocument(
      }

      const params = getMoveParams(item);
-
      if (params) {
-        const prevCollection = collections.get(item.collectionId);
-
-        if (
-          collection &&
-          prevCollection &&
-          prevCollection.permission !== collection.permission
-        ) {
-          dialogs.openModal({
-            title: t("Change permissions?"),
-            content: (
-              <ConfirmMoveDialog
-                item={item}
-                collection={collection}
-                {...params}
-              />
-            ),
-          });
-        } else {
-          void documents.move(params);
-        }
+        void documents.move(params);
      }
    },
    collect: (monitor) => ({
@@ -435,44 +374,3 @@ export function useDropToReorderUserMembership(getIndex?: () => string) {
    }),
  });
 }
-
-/**
- * Hook for shared logic that allows dropping documents and collections onto archive section
- */
-export function useDropToArchive() {
-  const accept = ["document", "collection"];
-  const { documents, collections, policies } = useStores();
-  const { t } = useTranslation();
-
-  return useDrop<
-    DragObject,
-    Promise<void>,
-    { isOverArchiveSection: boolean; isDragging: boolean }
-  >({
-    accept,
-    drop: async (item, monitor) => {
-      const type = monitor.getItemType();
-      let model;
-
-      if (type === "collection") {
-        model = collections.get(item.id);
-      } else {
-        model = documents.get(item.id);
-      }
-
-      if (model) {
-        await model.archive();
-        toast.success(
-          type === "collection"
-            ? t("Collection archived")
-            : t("Document archived")
-        );
-      }
-    },
-    canDrop: (item) => policies.abilities(item.id).archive,
-    collect: (monitor) => ({
-      isOverArchiveSection: !!monitor.isOver(),
-      isDragging: monitor.canDrop(),
-    }),
-  });
-}
@@ -31,6 +31,7 @@ const Background = styled.div<{ sticky?: boolean }>`
  margin: 0 -8px;
  padding: 0 8px;
  background: ${s("background")};
+  transition: ${s("backgroundTransition")};
  z-index: 1;
 `;

@@ -120,33 +120,30 @@ function Table({
      <Anchor ref={topRef} />
      <InnerTable {...getTableProps()}>
        <thead>
-          {headerGroups.map((headerGroup) => {
-            const groupProps = headerGroup.getHeaderGroupProps();
-            return (
-              <tr {...groupProps} key={groupProps.key}>
-                {headerGroup.headers.map((column) => (
-                  <Head
-                    {...column.getHeaderProps(column.getSortByToggleProps())}
-                    key={column.id}
+          {headerGroups.map((headerGroup) => (
+            <tr {...headerGroup.getHeaderGroupProps()} key={headerGroup.id}>
+              {headerGroup.headers.map((column) => (
+                <Head
+                  {...column.getHeaderProps(column.getSortByToggleProps())}
+                  key={column.id}
+                >
+                  <SortWrapper
+                    align="center"
+                    $sortable={!column.disableSortBy}
+                    gap={4}
                  >
-                    <SortWrapper
-                      align="center"
-                      $sortable={!column.disableSortBy}
-                      gap={4}
-                    >
-                      {column.render("Header")}
-                      {column.isSorted &&
-                        (column.isSortedDesc ? (
-                          <DescSortIcon />
-                        ) : (
-                          <AscSortIcon />
-                        ))}
-                    </SortWrapper>
-                  </Head>
-                ))}
-              </tr>
-            );
-          })}
+                    {column.render("Header")}
+                    {column.isSorted &&
+                      (column.isSortedDesc ? (
+                        <DescSortIcon />
+                      ) : (
+                        <AscSortIcon />
+                      ))}
+                  </SortWrapper>
+                </Head>
+              ))}
+            </tr>
+          ))}
        </thead>
        <tbody {...getTableBodyProps()}>
          {rows.map((row) => {
@@ -253,11 +250,10 @@ const SortWrapper = styled(Flex)<{ $sortable: boolean }>`
  white-space: nowrap;
  margin: 0 -4px;
  padding: 0 4px;
-  cursor: ${(props) => (props.$sortable ? `var(--pointer)` : "")};

  &:hover {
    background: ${(props) =>
-      props.$sortable ? props.theme.backgroundSecondary : "none"};
+      props.$sortable ? props.theme.secondaryBackground : "none"};
  }
 `;

@@ -310,13 +306,15 @@ const Row = styled.tr`

 const Head = styled.th`
  text-align: left;
-  padding: 6px 6px 2px;
+  padding: 6px 6px 0;
  border-bottom: 1px solid ${s("divider")};
  background: ${s("background")};
+  transition: ${s("backgroundTransition")};
  font-size: 14px;
  color: ${s("textSecondary")};
  font-weight: 500;
  z-index: 1;
+  cursor: var(--pointer) !important;

  :first-child {
    padding-left: 0;
@@ -45,6 +45,7 @@ const Sticky = styled.div`
  margin: 0 -8px;
  padding: 0 8px;
  background: ${s("background")};
+  transition: ${s("backgroundTransition")};
  z-index: 1;
 `;

@@ -16,8 +16,6 @@ type Props = {
  italic?: boolean;
  /** Whether the text should be truncated with an ellipsis */
  ellipsis?: boolean;
-  /** Whether the text should be monospaced */
-  monospace?: boolean;
 };

 /**
@@ -61,8 +59,6 @@ const Text = styled.span<Props>`
    `}

  font-style: ${(props) => (props.italic ? "italic" : "normal")};
-  font-family: ${(props) =>
-    props.monospace ? props.theme.fontFamilyMono : "inherit"};

  white-space: normal;
  user-select: ${(props) => (props.selectable ? "text" : "none")};
@@ -0,0 +1,42 @@
+import * as React from "react";
+import styled from "styled-components";
+import { s } from "@shared/styles";
+
+type Props = {
+  /** The size to render the indicator, defaults to 24px */
+  size?: number;
+};
+
+/**
+ * A component to show an animated typing indicator.
+ */
+export default function Typing({ size = 24 }: Props) {
+  return (
+    <Wrapper height={size} width={size}>
+      <Circle cx={size / 4} cy={size / 2} r="2" />
+      <Circle cx={size / 2} cy={size / 2} r="2" />
+      <Circle cx={size / 1.33333} cy={size / 2} r="2" />
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.svg`
+  fill: ${s("textTertiary")};
+
+  @keyframes blink {
+    50% {
+      fill: transparent;
+    }
+  }
+`;
+
+const Circle = styled.circle`
+  animation: 1s blink infinite;
+
+  &:nth-child(2) {
+    animation-delay: 250ms;
+  }
+  &:nth-child(3) {
+    animation-delay: 500ms;
+  }
+`;
@@ -25,9 +25,8 @@ import User from "~/models/User";
 import UserMembership from "~/models/UserMembership";
 import withStores from "~/components/withStores";
 import {
-  PartialExcept,
+  PartialWithId,
  WebsocketCollectionUpdateIndexEvent,
-  WebsocketCommentReactionEvent,
  WebsocketEntitiesEvent,
  WebsocketEntityDeletedEvent,
 } from "~/types";
@@ -215,20 +214,23 @@ class WebsocketProvider extends React.Component<Props> {

    this.socket.on(
      "documents.update",
-      action((event: PartialExcept<Document, "id" | "title" | "url">) => {
-        documents.add(event);
+      action(
+        (event: PartialWithId<Document> & { title: string; url: string }) => {
+          documents.add(event);

-        if (event.collectionId) {
-          const collection = collections.get(event.collectionId);
-          collection?.updateDocument(event);
+          if (event.collectionId) {
+            const collection = collections.get(event.collectionId);
+            collection?.updateDocument(event);
+          }
        }
-      })
+      )
    );

    this.socket.on(
      "documents.archive",
-      action((event: PartialExcept<Document, "id">) => {
-        documents.addToArchive(event as Document);
+      action((event: PartialWithId<Document>) => {
+        documents.add(event);
+        policies.remove(event.id);

        if (event.collectionId) {
          const collection = collections.get(event.collectionId);
@@ -239,7 +241,7 @@ class WebsocketProvider extends React.Component<Props> {

    this.socket.on(
      "documents.delete",
-      action((event: PartialExcept<Document, "id">) => {
+      action((event: PartialWithId<Document>) => {
        documents.add(event);
        policies.remove(event.id);

@@ -263,7 +265,7 @@ class WebsocketProvider extends React.Component<Props> {

    this.socket.on(
      "documents.add_user",
-      async (event: PartialExcept<UserMembership, "id">) => {
+      async (event: PartialWithId<UserMembership>) => {
        userMemberships.add(event);

        // Any existing child policies are now invalid
@@ -284,7 +286,7 @@ class WebsocketProvider extends React.Component<Props> {

    this.socket.on(
      "documents.remove_user",
-      (event: PartialExcept<UserMembership, "id">) => {
+      (event: PartialWithId<UserMembership>) => {
        userMemberships.remove(event.id);

        // Any existing child policies are now invalid
@@ -306,7 +308,7 @@ class WebsocketProvider extends React.Component<Props> {

    this.socket.on(
      "documents.add_group",
-      (event: PartialExcept<GroupMembership, "id">) => {
+      (event: PartialWithId<GroupMembership>) => {
        groupMemberships.add(event);

        const group = groups.get(event.groupId!);
@@ -328,23 +330,16 @@ class WebsocketProvider extends React.Component<Props> {

    this.socket.on(
      "documents.remove_group",
-      (event: PartialExcept<GroupMembership, "id">) => {
+      (event: PartialWithId<GroupMembership>) => {
        groupMemberships.remove(event.id);
      }
    );

-    this.socket.on("comments.create", (event: PartialExcept<Comment, "id">) => {
+    this.socket.on("comments.create", (event: PartialWithId<Comment>) => {
      comments.add(event);
    });

-    this.socket.on("comments.update", (event: PartialExcept<Comment, "id">) => {
-      const comment = comments.get(event.id);
-
-      // Existing policy becomes invalid when the resolution status has changed and we don't have the latest version.
-      if (comment?.resolvedAt !== event.resolvedAt) {
-        policies.remove(event.id);
-      }
-
+    this.socket.on("comments.update", (event: PartialWithId<Comment>) => {
      comments.add(event);
    });

@@ -352,35 +347,11 @@ class WebsocketProvider extends React.Component<Props> {
      comments.remove(event.modelId);
    });

-    this.socket.on(
-      "comments.add_reaction",
-      (event: WebsocketCommentReactionEvent) => {
-        const comment = comments.get(event.commentId);
-        comment?.updateReaction({
-          type: "add",
-          emoji: event.emoji,
-          user: event.user,
-        });
-      }
-    );
-
-    this.socket.on(
-      "comments.remove_reaction",
-      (event: WebsocketCommentReactionEvent) => {
-        const comment = comments.get(event.commentId);
-        comment?.updateReaction({
-          type: "remove",
-          emoji: event.emoji,
-          user: event.user,
-        });
-      }
-    );
-
-    this.socket.on("groups.create", (event: PartialExcept<Group, "id">) => {
+    this.socket.on("groups.create", (event: PartialWithId<Group>) => {
      groups.add(event);
    });

-    this.socket.on("groups.update", (event: PartialExcept<Group, "id">) => {
+    this.socket.on("groups.update", (event: PartialWithId<Group>) => {
      groups.add(event);
    });

@@ -388,36 +359,24 @@ class WebsocketProvider extends React.Component<Props> {
      groups.remove(event.modelId);
    });

-    this.socket.on(
-      "groups.add_user",
-      (event: PartialExcept<GroupUser, "id">) => {
-        groupUsers.add(event);
-      }
-    );
+    this.socket.on("groups.add_user", (event: PartialWithId<GroupUser>) => {
+      groupUsers.add(event);
+    });

-    this.socket.on(
-      "groups.remove_user",
-      (event: PartialExcept<GroupUser, "id">) => {
-        groupUsers.removeAll({
-          groupId: event.groupId,
-          userId: event.userId,
-        });
-      }
-    );
+    this.socket.on("groups.remove_user", (event: PartialWithId<GroupUser>) => {
+      groupUsers.removeAll({
+        groupId: event.groupId,
+        userId: event.userId,
+      });
+    });

-    this.socket.on(
-      "collections.create",
-      (event: PartialExcept<Collection, "id">) => {
-        collections.add(event);
-      }
-    );
+    this.socket.on("collections.create", (event: PartialWithId<Collection>) => {
+      collections.add(event);
+    });

-    this.socket.on(
-      "collections.update",
-      (event: PartialExcept<Collection, "id">) => {
-        collections.add(event);
-      }
-    );
+    this.socket.on("collections.update", (event: PartialWithId<Collection>) => {
+      collections.add(event);
+    });

    this.socket.on(
      "collections.delete",
@@ -439,49 +398,7 @@ class WebsocketProvider extends React.Component<Props> {
      })
    );

-    this.socket.on(
-      "collections.archive",
-      async (event: PartialExcept<Collection, "id">) => {
-        const collectionId = event.id;
-
-        // Fetch collection to update policies
-        await collections.fetch(collectionId, { force: true });
-
-        documents.unarchivedInCollection(collectionId).forEach(
-          action((doc) => {
-            if (!doc.publishedAt) {
-              // draft is to be detached from collection, not archived
-              doc.collectionId = null;
-            } else {
-              doc.archivedAt = event.archivedAt as string;
-            }
-            policies.remove(doc.id);
-          })
-        );
-      }
-    );
-
-    this.socket.on(
-      "collections.restore",
-      async (event: PartialExcept<Collection, "id">) => {
-        const collectionId = event.id;
-        documents
-          .archivedInCollection(collectionId, {
-            archivedAt: event.archivedAt as string,
-          })
-          .forEach(
-            action((doc) => {
-              doc.archivedAt = null;
-              policies.remove(doc.id);
-            })
-          );
-
-        // Fetch collection to update policies
-        await collections.fetch(collectionId, { force: true });
-      }
-    );
-
-    this.socket.on("teams.update", (event: PartialExcept<Team, "id">) => {
+    this.socket.on("teams.update", (event: PartialWithId<Team>) => {
      if ("sharing" in event && event.sharing !== auth.team?.sharing) {
        documents.all.forEach((document) => {
          policies.remove(document.id);
@@ -493,23 +410,23 @@ class WebsocketProvider extends React.Component<Props> {

    this.socket.on(
      "notifications.create",
-      (event: PartialExcept<Notification, "id">) => {
+      (event: PartialWithId<Notification>) => {
        notifications.add(event);
      }
    );

    this.socket.on(
      "notifications.update",
-      (event: PartialExcept<Notification, "id">) => {
+      (event: PartialWithId<Notification>) => {
        notifications.add(event);
      }
    );

-    this.socket.on("pins.create", (event: PartialExcept<Pin, "id">) => {
+    this.socket.on("pins.create", (event: PartialWithId<Pin>) => {
      pins.add(event);
    });

-    this.socket.on("pins.update", (event: PartialExcept<Pin, "id">) => {
+    this.socket.on("pins.update", (event: PartialWithId<Pin>) => {
      pins.add(event);
    });

@@ -517,11 +434,11 @@ class WebsocketProvider extends React.Component<Props> {
      pins.remove(event.modelId);
    });

-    this.socket.on("stars.create", (event: PartialExcept<Star, "id">) => {
+    this.socket.on("stars.create", (event: PartialWithId<Star>) => {
      stars.add(event);
    });

-    this.socket.on("stars.update", (event: PartialExcept<Star, "id">) => {
+    this.socket.on("stars.update", (event: PartialWithId<Star>) => {
      stars.add(event);
    });

@@ -529,6 +446,13 @@ class WebsocketProvider extends React.Component<Props> {
      stars.remove(event.modelId);
    });

+    this.socket.on(
+      "user.typing",
+      (event: { userId: string; documentId: string; commentId: string }) => {
+        comments.setTyping(event);
+      }
+    );
+
    this.socket.on("collections.add_user", async (event: Membership) => {
      memberships.add(event);
      await collections.fetch(event.collectionId, {
@@ -572,14 +496,14 @@ class WebsocketProvider extends React.Component<Props> {

    this.socket.on(
      "fileOperations.create",
-      (event: PartialExcept<FileOperation, "id">) => {
+      (event: PartialWithId<FileOperation>) => {
        fileOperations.add(event);
      }
    );

    this.socket.on(
      "fileOperations.update",
-      (event: PartialExcept<FileOperation, "id">) => {
+      (event: PartialWithId<FileOperation>) => {
        fileOperations.add(event);

        if (
@@ -596,7 +520,7 @@ class WebsocketProvider extends React.Component<Props> {

    this.socket.on(
      "subscriptions.create",
-      (event: PartialExcept<Subscription, "id">) => {
+      (event: PartialWithId<Subscription>) => {
        subscriptions.add(event);
      }
    );
@@ -608,11 +532,11 @@ class WebsocketProvider extends React.Component<Props> {
      }
    );

-    this.socket.on("users.update", (event: PartialExcept<User, "id">) => {
+    this.socket.on("users.update", (event: PartialWithId<User>) => {
      users.add(event);
    });

-    this.socket.on("users.demote", async (event: PartialExcept<User, "id">) => {
+    this.socket.on("users.demote", async (event: PartialWithId<User>) => {
      if (event.id === auth.user?.id) {
        documents.all.forEach((document) => policies.remove(document.id));
        await collections.fetchAll();
@@ -621,7 +545,7 @@ class WebsocketProvider extends React.Component<Props> {

    this.socket.on(
      "userMemberships.update",
-      async (event: PartialExcept<UserMembership, "id">) => {
+      async (event: PartialWithId<UserMembership>) => {
        userMemberships.add(event);
      }
    );
@@ -1,51 +1,29 @@
 import { Node as ProsemirrorNode } from "prosemirror-model";
 import { EditorView, Decoration } from "prosemirror-view";
-import { FunctionComponent } from "react";
+import * as React from "react";
+import ReactDOM from "react-dom";
+import { ThemeProvider } from "styled-components";
 import Extension from "@shared/editor/lib/Extension";
 import { ComponentProps } from "@shared/editor/types";
 import { Editor } from "~/editor";
-import { NodeViewRenderer } from "./NodeViewRenderer";

-type ComponentViewConstructor = {
-  /** The editor instance. */
-  editor: Editor;
-  /** The extension the view belongs to. */
-  extension: Extension;
-  /** The node that the view is responsible for. */
-  node: ProsemirrorNode;
-  /** The editor view instance. */
-  view: EditorView;
-  /** A function that returns the current position of the node. */
-  getPos: () => number;
-  /** The decorations applied to the node. */
-  decorations: Decoration[];
-};
+type Component = (props: ComponentProps) => React.ReactElement;

 export default class ComponentView {
-  /** The React component to render. */
-  component: FunctionComponent<ComponentProps>;
-  /** The editor instance. */
+  component: Component;
  editor: Editor;
-  /** The extension the view belongs to. */
  extension: Extension;
-  /** The node that the view is responsible for. */
  node: ProsemirrorNode;
-  /** The editor view instance. */
  view: EditorView;
-  /** A function that returns the current position of the node. */
  getPos: () => number;
-  /** The decorations applied to the node. */
  decorations: Decoration[];
-  /** The renderer instance. */
-  renderer: NodeViewRenderer<ComponentProps>;
-  /** Whether the node is selected. */
+
  isSelected = false;
-  /** The DOM element that the node is rendered into. */
  dom: HTMLElement | null;

  // See https://prosemirror.net/docs/ref/#view.NodeView
  constructor(
-    component: FunctionComponent<ComponentProps>,
+    component: Component,
    {
      editor,
      extension,
@@ -53,7 +31,14 @@ export default class ComponentView {
      view,
      getPos,
      decorations,
-    }: ComponentViewConstructor
+    }: {
+      editor: Editor;
+      extension: Extension;
+      node: ProsemirrorNode;
+      view: EditorView;
+      getPos: () => number;
+      decorations: Decoration[];
+    }
  ) {
    this.component = component;
    this.editor = editor;
@@ -67,33 +52,51 @@ export default class ComponentView {
      : document.createElement("div");

    this.dom.classList.add(`component-${node.type.name}`);
-    this.renderer = new NodeViewRenderer(this.dom, this.component, this.props);

-    // Add the renderer to the editor's set of renderers so that it is included in the React tree.
-    this.editor.renderers.add(this.renderer);
+    this.renderElement();
+    window.addEventListener("theme-changed", this.renderElement);
+    window.addEventListener("location-changed", this.renderElement);
  }

+  renderElement = () => {
+    const { theme } = this.editor.props;
+
+    const children = this.component({
+      theme,
+      node: this.node,
+      view: this.view,
+      isSelected: this.isSelected,
+      isEditable: this.view.editable,
+      getPos: this.getPos,
+    });
+
+    ReactDOM.render(
+      <ThemeProvider theme={theme}>{children}</ThemeProvider>,
+      this.dom
+    );
+  };
+
  update(node: ProsemirrorNode) {
    if (node.type !== this.node.type) {
      return false;
    }

    this.node = node;
-    this.renderer.updateProps(this.props);
+    this.renderElement();
    return true;
  }

  selectNode() {
    if (this.view.editable) {
      this.isSelected = true;
-      this.renderer.updateProps(this.props);
+      this.renderElement();
    }
  }

  deselectNode() {
    if (this.view.editable) {
      this.isSelected = false;
-      this.renderer.updateProps(this.props);
+      this.renderElement();
    }
  }

@@ -102,21 +105,16 @@ export default class ComponentView {
  }

  destroy() {
-    this.editor.renderers.delete(this.renderer);
+    window.removeEventListener("theme-changed", this.renderElement);
+    window.removeEventListener("location-changed", this.renderElement);
+
+    if (this.dom) {
+      ReactDOM.unmountComponentAtNode(this.dom);
+    }
    this.dom = null;
  }

  ignoreMutation() {
    return true;
  }
-
-  get props() {
-    return {
-      node: this.node,
-      view: this.view,
-      isSelected: this.isSelected,
-      isEditable: this.view.editable,
-      getPos: this.getPos,
-    } as ComponentProps;
-  }
 }
@@ -29,7 +29,6 @@ const EmojiMenu = (props: Props) => {
        .map((item) => {
          // We snake_case the shortcode for backwards compatability with gemoji to
          // avoid multiple formats being written into documents.
-          // @ts-expect-error emojiMartToGemoji key
          const shortcode = snakeCase(emojiMartToGemoji[item.id] || item.id);
          const emoji = item.value;

@@ -7,7 +7,6 @@ import { isCode } from "@shared/editor/lib/isCode";
 import { findParentNode } from "@shared/editor/queries/findParentNode";
 import { EditorStyleHelper } from "@shared/editor/styles/EditorStyleHelper";
 import { depths, s } from "@shared/styles";
-import { HEADER_HEIGHT } from "~/components/Header";
 import { Portal } from "~/components/Portal";
 import useComponentSize from "~/hooks/useComponentSize";
 import useEventListener from "~/hooks/useEventListener";
@@ -135,62 +134,55 @@ function usePosition({

    // Images are wrapped which impacts positioning - need to get the element
    // specifically tagged as the handle
-    const imageElement = element
-      ? (element as HTMLElement).getElementsByClassName(
-          EditorStyleHelper.imageHandle
-        )[0]
-      : undefined;
-    if (imageElement) {
-      const { left, top, width } = imageElement.getBoundingClientRect();
+    const imageElement = (element as HTMLElement).getElementsByClassName(
+      EditorStyleHelper.imageHandle
+    )[0];
+    const { left, top, width } = imageElement.getBoundingClientRect();

-      return {
-        left: Math.round(left + width / 2 - menuWidth / 2 - offsetParent.left),
-        top: Math.round(top - menuHeight - offsetParent.top),
-        offset: 0,
-        visible: true,
-      };
-    }
-  }
+    return {
+      left: Math.round(left + width / 2 - menuWidth / 2 - offsetParent.left),
+      top: Math.round(top - menuHeight - offsetParent.top),
+      offset: 0,
+      visible: true,
+    };
+  } else {
+    // calculate the horizontal center of the selection
+    const halfSelection =
+      Math.abs(selectionBounds.right - selectionBounds.left) / 2;
+    const centerOfSelection = selectionBounds.left + halfSelection;

-  // calculate the horizontal center of the selection
-  const halfSelection =
-    Math.abs(selectionBounds.right - selectionBounds.left) / 2;
-  const centerOfSelection = selectionBounds.left + halfSelection;
-
-  // position the menu so that it is centered over the selection except in
-  // the cases where it would extend off the edge of the screen. In these
-  // instances leave a margin
-  const margin = 12;
-  const left = Math.min(
-    Math.min(
-      offsetParent.x + offsetParent.width - menuWidth - margin,
-      window.innerWidth - margin
-    ),
-    Math.max(
-      Math.max(offsetParent.x, margin),
-      centerOfSelection - menuWidth / 2
-    )
-  );
-  const top = Math.max(
-    HEADER_HEIGHT,
-    Math.min(
+    // position the menu so that it is centered over the selection except in
+    // the cases where it would extend off the edge of the screen. In these
+    // instances leave a margin
+    const margin = 12;
+    const left = Math.min(
+      Math.min(
+        offsetParent.x + offsetParent.width - menuWidth - margin,
+        window.innerWidth - margin
+      ),
+      Math.max(
+        Math.max(offsetParent.x, margin),
+        centerOfSelection - menuWidth / 2
+      )
+    );
+    const top = Math.min(
      window.innerHeight - menuHeight - margin,
      Math.max(margin, selectionBounds.top - menuHeight)
-    )
-  );
+    );

-  // if the menu has been offset to not extend offscreen then we should adjust
-  // the position of the triangle underneath to correctly point to the center
-  // of the selection still
-  const offset = left - (centerOfSelection - menuWidth / 2);
-  return {
-    left: Math.round(left - offsetParent.left),
-    top: Math.round(top - offsetParent.top),
-    offset: Math.round(offset),
-    maxWidth: Math.min(window.innerWidth - margin * 2, offsetParent.width),
-    blockSelection: codeBlock || isColSelection || isRowSelection,
-    visible: true,
-  };
+    // if the menu has been offset to not extend offscreen then we should adjust
+    // the position of the triangle underneath to correctly point to the center
+    // of the selection still
+    const offset = left - (centerOfSelection - menuWidth / 2);
+    return {
+      left: Math.round(left - offsetParent.left),
+      top: Math.round(top - offsetParent.top),
+      offset: Math.round(offset),
+      maxWidth: Math.min(window.innerWidth - margin * 2, offsetParent.width),
+      blockSelection: codeBlock || isColSelection || isRowSelection,
+      visible: true,
+    };
+  }
 }

 const FloatingToolbar = React.forwardRef(function FloatingToolbar_(
@@ -92,7 +92,7 @@ function MentionMenu({ search, isActive, ...rest }: Props) {
        const user = users.get(item.attrs.modelId);
        toast.message(
          t(
-            "{{ userName }} won't be notified, as they do not have access to this document",
+            "{{ userName }} won't by notified as they do not have access to this document",
            {
              userName: item.attrs.label,
            }
@@ -1,28 +0,0 @@
-import isEqual from "lodash/isEqual";
-import { action, computed, observable } from "mobx";
-import React, { FunctionComponent } from "react";
-import { createPortal } from "react-dom";
-
-export class NodeViewRenderer<T extends object> {
-  @observable public props: T;
-
-  public constructor(
-    public element: HTMLElement,
-    private Component: FunctionComponent,
-    props: T
-  ) {
-    this.props = props;
-  }
-
-  @computed
-  public get content() {
-    return createPortal(<this.Component {...this.props} />, this.element);
-  }
-
-  @action
-  public updateProps(props: T) {
-    if (!isEqual(props, this.props)) {
-      this.props = props;
-    }
-  }
-}
@@ -216,7 +216,8 @@ export default function SelectionToolbar(props: Props) {
  const colIndex = getColumnIndex(state);
  const rowIndex = getRowIndex(state);
  const isTableSelection = colIndex !== undefined && rowIndex !== undefined;
-  const link = getMarkRange(selection.$from, state.schema.marks.link);
+  const link = isMarkActive(state.schema.marks.link)(state);
+  const range = getMarkRange(selection.$from, state.schema.marks.link);
  const isImageSelection =
    selection instanceof NodeSelection && selection.node.type.name === "image";
  const isAttachmentSelection =
@@ -265,8 +266,7 @@ export default function SelectionToolbar(props: Props) {
    return null;
  }

-  const showLinkToolbar =
-    link && link.from === selection.from && link.to === selection.to;
+  const showLinkToolbar = link && range;

  return (
    <FloatingToolbar
@@ -276,12 +276,12 @@ export default function SelectionToolbar(props: Props) {
    >
      {showLinkToolbar ? (
        <LinkEditor
-          key={`${link.from}-${link.to}`}
+          key={`${range.from}-${range.to}`}
          dictionary={dictionary}
          view={view}
-          mark={link.mark}
-          from={link.from}
-          to={link.to}
+          mark={range.mark}
+          from={range.from}
+          to={range.to}
          onClickLink={props.onClickLink}
          onSearchLink={props.onSearchLink}
          onCreateLink={onCreateLink ? handleOnCreateLink : undefined}
@@ -1,4 +1,3 @@
-import deburr from "lodash/deburr";
 import escapeRegExp from "lodash/escapeRegExp";
 import { observable } from "mobx";
 import { Node } from "prosemirror-model";
@@ -92,10 +91,6 @@ export default class FindAndReplaceExtension extends Extension {

  public replace(replace: string): Command {
    return (state, dispatch) => {
-      // Redo the search to ensure we have the latest results, the document may
-      // have changed underneath us since the last search.
-      this.search(state.doc);
-
      const result = this.results[this.currentResultIndex];

      if (!result) {
@@ -110,12 +105,7 @@ export default class FindAndReplaceExtension extends Extension {
  }

  public replaceAll(replace: string): Command {
-    return (state, dispatch) => {
-      // Redo the search to ensure we have the latest results, the document may
-      // have changed underneath us since the last search.
-      this.search(state.doc);
-
-      const tr = state.tr;
+    return ({ tr }, dispatch) => {
      let offset: number | undefined;

      if (!this.results.length) {
@@ -253,29 +243,19 @@ export default class FindAndReplaceExtension extends Extension {
    });

    mergedTextNodes.forEach(({ text = "", pos }) => {
-      try {
-        let m;
-        const search = this.findRegExp;
+      const search = this.findRegExp;
+      let m;

-        // We construct a string with the text stripped of diacritics plus the original text for
-        // search  allowing to search for diacritics-insensitive matches easily.
-        while ((m = search.exec(deburr(text) + text))) {
+      try {
+        while ((m = search.exec(text))) {
          if (m[0] === "") {
            break;
          }

-          // Reconstruct the correct match position
-          const i = m.index >= text.length ? m.index - text.length : m.index;
-          const from = pos + i;
-          const to = from + m[0].length;
-
-          // Check if already exists in results, possible due to duplicated
-          // search string on L257
-          if (this.results.some((r) => r.from === from && r.to === to)) {
-            continue;
-          }
-
-          this.results.push({ from, to });
+          this.results.push({
+            from: pos + m.index,
+            to: pos + m.index + m[0].length,
+          });
        }
      } catch (e) {
        // Invalid RegExp
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Tom Moor	4ac31eec2e	chore: Remove usage of deprecated docker build image	2024-10-16 18:59:59 -04:00
Tom Moor	9c85371f1d	0.80.2-ms-debug	2024-10-16 18:41:49 -04:00
Tom Moor	be62497f2a	Add debug logging	2024-10-16 18:41:21 -04:00