lint

perf: Introduce max task timeout on queue
fix: INSERT into subscriptions deadlocked transactions (#11667 )
2026-06-13 19:35:02 +03:00 · 2026-03-05 20:28:10 -05:00 · 2026-03-05 20:23:53 -05:00 · 2026-03-05 18:53:13 -05:00 · 2026-03-05 17:45:19 -05:00 · 2026-03-05 17:45:05 -05:00
504 changed files with 22431 additions and 6244 deletions
@@ -1,4 +1,3 @@
-__mocks__
 .git
 .vscode
 .github
@@ -8,11 +7,19 @@ __mocks__
 .eslint*
 .oxlintrc*
 .log
+*.md
 Makefile
 Procfile
 app.json
 crowdin.yml
+lint-staged.config.mjs
 build
 docker-compose.yml
 node_modules
 .yarn
+**/*.test.ts
+**/*.test.tsx
+**/*.test.js
+**/*.test.jsx
+**/__tests__
+**/__mocks__
@@ -119,6 +119,11 @@ SSL_CERT=
 # false if you can be sure that SSL is terminated at an external loadbalancer.
 FORCE_HTTPS=true

+# When behind a reverse proxy, the header to use for the client IP.
+# The default value is "X-Forwarded-For", common values are "X-Real-IP"
+# and "X-Client-IP".
+# PROXY_IP_HEADER=
+

 # ––––––––––––––––––––––––––––––––––––––
 # ––––––––––  AUTHENTICATION  ––––––––––
@@ -212,6 +217,11 @@ GITHUB_APP_NAME=
 GITHUB_APP_ID=
 GITHUB_APP_PRIVATE_KEY=

+# The GitLab integration allows previewing issue and merge request links
+# DOCS: 
+GITLAB_CLIENT_ID=
+GITLAB_CLIENT_SECRET=
+
 # Linear integration allows previewing issue links as rich mentions
 LINEAR_CLIENT_ID=
 LINEAR_CLIENT_SECRET=
@@ -18,6 +18,9 @@ GITHUB_CLIENT_ID=123;
 GITHUB_CLIENT_SECRET=123;
 GITHUB_APP_NAME=outline-test;

+GITLAB_CLIENT_ID=123
+GITLAB_CLIENT_SECRET=123
+
 OIDC_CLIENT_ID=client-id
 OIDC_CLIENT_SECRET=client-secret
 OIDC_AUTH_URI=http://localhost/authorize
@@ -167,7 +167,7 @@ jobs:

  bundle-size:
    needs: [setup, types, changes]
-    if: ${{ needs.changes.outputs.app == 'true' && github.repository == 'outline/outline' }}
+    if: ${{ (needs.changes.outputs.app == 'true' || needs.changes.outputs.config == 'true') && github.repository == 'outline/outline' }}
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v5
@@ -20,4 +20,5 @@ data/*
 !.yarn/patches
 !.yarn/plugins
 !.yarn/releases
+.yarn/releases
 !.yarn/sdks
@@ -3,7 +3,7 @@ Business Source License 1.1
 Parameters

 Licensor:             General Outline, Inc.
-Licensed Work:        Outline 1.4.0
+Licensed Work:        Outline 1.5.0
                      The Licensed Work is (c) 2026 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:          2030-01-27
+Change Date:          2030-02-15

 Change License:       Apache License, Version 2.0

@@ -29,8 +29,8 @@ import DynamicCollectionIcon from "~/components/Icons/CollectionIcon";
 import { getHeaderExpandedKey } from "~/components/Sidebar/components/Header";
 import {
  createAction,
-  createActionWithChildren,
  createInternalLinkAction,
+  createActionWithChildren,
 } from "~/actions";
 import { ActiveCollectionSection, CollectionSection } from "~/actions/sections";
 import { setPersistedState } from "~/hooks/usePersistedState";
@@ -152,7 +152,7 @@ export const importDocument = createAction({
    getActivePolicies(Collection).some(
      (policy) => policy.abilities.createDocument
    ),
-  perform: ({ getActiveModel, stores }) => {
+  perform: ({ t, getActiveModel, stores }) => {
    const { documents } = stores;
    const collection = getActiveModel(Collection);
    if (!collection) {
@@ -165,6 +165,7 @@ export const importDocument = createAction({
    input.onchange = async (ev) => {
      const files = getEventFiles(ev);
      const file = files[0];
+      const toastId = toast.loading(`${t("Uploading")}…`);

      try {
        const document = await documents.import(file, null, collection.id, {
@@ -173,6 +174,8 @@ export const importDocument = createAction({
        history.push(document.path);
      } catch (err) {
        toast.error(err.message);
+      } finally {
+        toast.dismiss(toastId);
      }
    };

@@ -525,17 +528,11 @@ export const createTemplate = createInternalLinkAction({
  keywords: "new create template",
  visible: ({ getActivePolicies }) =>
    getActivePolicies(Collection).some(
-      (policy) => policy.abilities.createDocument
+      (policy) => policy.abilities.createTemplate
    ),
-  to: ({ getActiveModel, sidebarContext }) => {
+  to: ({ getActiveModel }) => {
    const collection = getActiveModel(Collection);
-    const [pathname, search] = newTemplatePath(collection?.id).split("?");
-
-    return {
-      pathname,
-      search,
-      state: { sidebarContext },
-    };
+    return newTemplatePath(collection?.id);
  },
 });

@@ -42,12 +42,11 @@ import { Week } from "@shared/utils/time";
 import type UserMembership from "~/models/UserMembership";
 import { client } from "~/utils/ApiClient";
 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 DocumentCopy from "~/components/DocumentExplorer/DocumentCopy";
 import { DocumentDownload } from "~/components/DocumentDownload";
 import MarkdownIcon from "~/components/Icons/MarkdownIcon";
 import { getHeaderExpandedKey } from "~/components/Sidebar/components/Header";
@@ -70,6 +69,7 @@ import {
  homePath,
  newDocumentPath,
  newNestedDocumentPath,
+  newSiblingDocumentPath,
  searchPath,
  documentPath,
  urlify,
@@ -78,9 +78,15 @@ import {
 } from "~/utils/routeHelpers";
 import capitalize from "lodash/capitalize";
 import CollectionIcon from "~/components/Icons/CollectionIcon";
-import type { Action, ActionGroup, ActionSeparator } from "~/types";
+import type {
+  Action,
+  ActionContext,
+  ActionGroup,
+  ActionSeparator,
+} from "~/types";
 import lazyWithRetry from "~/utils/lazyWithRetry";
 import env from "~/env";
+import DocumentMove from "~/components/DocumentExplorer/DocumentMove";

 const Insights = lazyWithRetry(
  () => import("~/scenes/Document/components/Insights")
@@ -132,18 +138,13 @@ export const editDocument = createInternalLinkAction({
  keywords: "edit",
  icon: <EditIcon />,
  visible: ({ activeDocumentId, stores }) => {
-    const { auth, documents, policies } = stores;
+    const { auth, policies } = stores;

-    const document = activeDocumentId
-      ? documents.get(activeDocumentId)
-      : undefined;
    const can = activeDocumentId
      ? policies.abilities(activeDocumentId)
      : undefined;

-    return (
-      !!can?.update && !!auth.user?.separateEditMode && !document?.template
-    );
+    return !!can?.update && !!auth.user?.separateEditMode;
  },
  to: ({ activeDocumentId, stores }) => {
    const document = activeDocumentId
@@ -200,59 +201,41 @@ export const createDraftDocument = createInternalLinkAction({
  }),
 });

-export const createDocumentFromTemplate = createInternalLinkAction({
-  name: ({ t }) => t("New from template"),
-  analyticsName: "New document",
-  section: DocumentSection,
-  icon: <NewDocumentIcon />,
-  keywords: "create",
-  visible: ({
-    currentTeamId,
-    activeCollectionId,
-    activeDocumentId,
-    stores,
-  }) => {
-    const document = activeDocumentId
-      ? stores.documents.get(activeDocumentId)
-      : undefined;
+/**
+ * Finds the index of a document among its siblings in the collection tree.
+ *
+ * @param stores - the root stores.
+ * @param document - the document to find the index of.
+ * @returns the index of the document among its siblings, or -1 if not found.
+ */
+function findDocumentSiblingIndex(
+  stores: ActionContext["stores"],
+  document: {
+    id: string;
+    collectionId?: string | null;
+    parentDocumentId?: string;
+  }
+): number {
+  if (!document.collectionId) {
+    return -1;
+  }
+  const collection = stores.collections.get(document.collectionId);
+  if (!collection) {
+    return -1;
+  }

-    if (
-      !currentTeamId ||
-      !document?.isTemplate ||
-      !!document?.isDraft ||
-      !!document?.isDeleted
-    ) {
-      return false;
-    }
+  const siblings = document.parentDocumentId
+    ? collection.getChildrenForDocument(document.parentDocumentId)
+    : collection.sortedDocuments;

-    if (activeCollectionId) {
-      return stores.policies.abilities(activeCollectionId).createDocument;
-    }
-    return stores.policies.abilities(currentTeamId).createDocument;
-  },
-  to: ({ activeDocumentId, activeCollectionId, sidebarContext }) => {
-    if (!activeDocumentId || !activeCollectionId) {
-      return "";
-    }
-
-    const [pathname, search] = newDocumentPath(activeCollectionId, {
-      templateId: activeDocumentId,
-    }).split("?");
-
-    return {
-      pathname,
-      search,
-      state: { sidebarContext },
-    };
-  },
-});
+  return siblings?.findIndex((node) => node.id === document.id) ?? -1;
+}

 export const createNestedDocument = createInternalLinkAction({
-  name: ({ t }) => t("New nested document"),
+  name: ({ t }) => t("Nested document"),
  analyticsName: "New document",
  section: ActiveDocumentSection,
-  icon: <NewDocumentIcon />,
-  keywords: "create",
+  keywords: "create nested",
  visible: ({ currentTeamId, activeDocumentId, stores }) =>
    !!currentTeamId &&
    !!activeDocumentId &&
@@ -270,6 +253,93 @@ export const createNestedDocument = createInternalLinkAction({
  },
 });

+const createDocumentBefore = createInternalLinkAction({
+  name: ({ t }) => t("Before"),
+  analyticsName: "New document before",
+  section: ActiveDocumentSection,
+  keywords: "create before",
+  visible: ({ currentTeamId, activeDocumentId, stores }) => {
+    if (!currentTeamId || !activeDocumentId) {
+      return false;
+    }
+    const document = stores.documents.get(activeDocumentId);
+    return (
+      !!document?.collectionId &&
+      stores.policies.abilities(currentTeamId).createDocument
+    );
+  },
+  to: ({ activeDocumentId, stores, sidebarContext }) => {
+    const document = activeDocumentId
+      ? stores.documents.get(activeDocumentId)
+      : undefined;
+    if (!document) {
+      return "";
+    }
+
+    const index = findDocumentSiblingIndex(stores, document);
+    const [pathname, search] = newSiblingDocumentPath({
+      collectionId: document.collectionId,
+      parentDocumentId: document.parentDocumentId,
+      index: Math.max(0, index),
+    }).split("?");
+
+    return {
+      pathname,
+      search,
+      state: { sidebarContext },
+    };
+  },
+});
+
+const createDocumentAfter = createInternalLinkAction({
+  name: ({ t }) => t("After"),
+  analyticsName: "New document after",
+  section: ActiveDocumentSection,
+  keywords: "create after",
+  visible: ({ currentTeamId, activeDocumentId, stores }) => {
+    if (!currentTeamId || !activeDocumentId) {
+      return false;
+    }
+    const document = stores.documents.get(activeDocumentId);
+    return (
+      !!document?.collectionId &&
+      stores.policies.abilities(currentTeamId).createDocument
+    );
+  },
+  to: ({ activeDocumentId, stores, sidebarContext }) => {
+    const document = activeDocumentId
+      ? stores.documents.get(activeDocumentId)
+      : undefined;
+    if (!document) {
+      return "";
+    }
+
+    const index = findDocumentSiblingIndex(stores, document);
+    const [pathname, search] = newSiblingDocumentPath({
+      collectionId: document.collectionId,
+      parentDocumentId: document.parentDocumentId,
+      index: index + 1,
+    }).split("?");
+
+    return {
+      pathname,
+      search,
+      state: { sidebarContext },
+    };
+  },
+});
+
+export const createNewDocument = createActionWithChildren({
+  name: ({ t }) => t("New document"),
+  analyticsName: "New document",
+  section: ActiveDocumentSection,
+  icon: <NewDocumentIcon />,
+  keywords: "create",
+  visible: ({ currentTeamId, stores }) =>
+    !!currentTeamId && stores.policies.abilities(currentTeamId).createDocument,
+  children: [createDocumentBefore, createDocumentAfter, createNestedDocument],
+});
+
 export const starDocument = createAction({
  name: ({ t }) => t("Star"),
  analyticsName: "Star document",
@@ -346,7 +416,7 @@ export const publishDocument = createAction({
      return;
    }

-    if (document?.collectionId || document?.template) {
+    if (document?.collectionId) {
      await document.save(undefined, {
        publish: true,
      });
@@ -870,7 +940,7 @@ export const printDocument = createAction({
  icon: <PrintIcon />,
  visible: ({ activeDocumentId }) => !!(activeDocumentId && window.print),
  perform: () => {
-    queueMicrotask(window.print);
+    setTimeout(window.print, 0);
  },
 });

@@ -891,7 +961,7 @@ export const importDocument = createAction({

    return false;
  },
-  perform: ({ activeDocumentId, activeCollectionId, stores }) => {
+  perform: ({ t, activeDocumentId, activeCollectionId, stores }) => {
    const { documents } = stores;
    const input = document.createElement("input");
    input.type = "file";
@@ -900,6 +970,7 @@ export const importDocument = createAction({
    input.onchange = async (ev) => {
      const files = getEventFiles(ev);
      const file = files[0];
+      const toastId = toast.loading(`${t("Uploading")}…`);

      try {
        const document = await documents.import(
@@ -913,6 +984,8 @@ export const importDocument = createAction({
        history.push(document.url);
      } catch (err) {
        toast.error(err.message);
+      } finally {
+        toast.dismiss(toastId);
      }
    };

@@ -930,12 +1003,12 @@ export const createTemplateFromDocument = createAction({
    const document = activeDocumentId
      ? stores.documents.get(activeDocumentId)
      : undefined;
-    if (document?.isTemplate || !document?.isActive) {
+    if (!document?.isActive) {
      return false;
    }
    return !!(
      !!activeCollectionId &&
-      stores.policies.abilities(activeCollectionId).updateDocument
+      stores.policies.abilities(activeCollectionId).createTemplate
    );
  },
  perform: ({ activeDocumentId, stores, t, event }) => {
@@ -982,46 +1055,8 @@ export const searchDocumentsForQuery = (query: string) =>
    visible: ({ location }) => location.pathname !== searchPath(),
  });

-export const moveTemplateToWorkspace = createAction({
-  name: ({ t }) => t("Move to workspace"),
-  analyticsName: "Move template to workspace",
-  section: DocumentSection,
-  icon: <MoveIcon />,
-  iconInContextMenu: false,
-  visible: ({ activeDocumentId, stores }) => {
-    if (!activeDocumentId) {
-      return false;
-    }
-    const document = stores.documents.get(activeDocumentId);
-    if (!document || !document.template || document.isWorkspaceTemplate) {
-      return false;
-    }
-    return !!stores.policies.abilities(activeDocumentId).move;
-  },
-  perform: async ({ activeDocumentId, stores }) => {
-    if (activeDocumentId) {
-      const document = stores.documents.get(activeDocumentId);
-      if (!document) {
-        return;
-      }
-
-      await document.move({
-        collectionId: null,
-      });
-    }
-  },
-});
-
 export const moveDocumentToCollection = createAction({
-  name: ({ activeDocumentId, stores, t }) => {
-    if (!activeDocumentId) {
-      return t("Move");
-    }
-    const document = stores.documents.get(activeDocumentId);
-    return document?.template && document?.collectionId
-      ? t("Move to collection")
-      : t("Move");
-  },
+  name: ({ t }) => t("Move"),
  analyticsName: "Move document",
  section: ActiveDocumentSection,
  icon: <MoveIcon />,
@@ -1059,8 +1094,7 @@ export const moveDocument = createAction({
      return false;
    }
    const document = stores.documents.get(activeDocumentId);
-    // Don't show the button if this is a non-workspace template.
-    if (!document || (document.template && !document.isWorkspaceTemplate)) {
+    if (!document) {
      return false;
    }
    return !!stores.policies.abilities(activeDocumentId).move;
@@ -1068,25 +1102,6 @@ export const moveDocument = createAction({
  perform: moveDocumentToCollection.perform,
 });

-export const moveTemplate = createActionWithChildren({
-  name: ({ t }) => t("Move"),
-  analyticsName: "Move document",
-  section: ActiveDocumentSection,
-  icon: <MoveIcon />,
-  visible: ({ activeDocumentId, stores }) => {
-    if (!activeDocumentId) {
-      return false;
-    }
-    const document = stores.documents.get(activeDocumentId);
-    // Don't show the menu if this is not a template (or) a workspace template.
-    if (!document || !document.template || document.isWorkspaceTemplate) {
-      return false;
-    }
-    return !!stores.policies.abilities(activeDocumentId).move;
-  },
-  children: [moveTemplateToWorkspace, moveDocumentToCollection],
-});
-
 export const archiveDocument = createAction({
  name: ({ t }) => `${t("Archive")}…`,
  analyticsName: "Archive document",
@@ -1145,10 +1160,7 @@ export const restoreDocument = createAction({
      : undefined;
    const can = stores.policies.abilities(document.id);

-    return (
-      !!(document.isWorkspaceTemplate || collection?.isActive) &&
-      !!(can.restore || can.unarchive)
-    );
+    return !!collection?.isActive && !!(can.restore || can.unarchive);
  },
  perform: async ({ t, stores, activeDocumentId }) => {
    const document = activeDocumentId
@@ -1185,10 +1197,7 @@ export const restoreDocumentToCollection = createActionWithChildren({
      ? stores.collections.get(document.collectionId)
      : undefined;

-    return (
-      !(document.isWorkspaceTemplate || collection?.isActive) &&
-      !!(can.restore || can.unarchive)
-    );
+    return !collection?.isActive && !!(can.restore || can.unarchive);
  },
  children: ({ t, activeDocumentId, stores }) => {
    const { collections, documents, policies } = stores;
@@ -1330,7 +1339,7 @@ export const openDocumentComments = createAction({
      return;
    }

-    stores.ui.toggleComments();
+    stores.ui.set({ rightSidebar: "comments" });
  },
 });

@@ -1365,6 +1374,7 @@ export const openDocumentInsights = createAction({
  name: ({ t }) => t("Insights"),
  analyticsName: "Open document insights",
  section: ActiveDocumentSection,
+  shortcut: [`Meta+Shift+I`],
  icon: <GraphIcon />,
  visible: ({ activeDocumentId, stores }) => {
    const can = stores.policies.abilities(activeDocumentId ?? "");
@@ -1372,12 +1382,7 @@ export const openDocumentInsights = createAction({
      ? stores.documents.get(activeDocumentId)
      : undefined;

-    return (
-      !!activeDocumentId &&
-      can.listViews &&
-      !document?.isTemplate &&
-      !document?.isDeleted
-    );
+    return !!activeDocumentId && can.listViews && !document?.isDeleted;
  },
  perform: ({ activeDocumentId, stores, t }) => {
    const document = activeDocumentId
@@ -1456,6 +1461,7 @@ export const rootDocumentActions = [
  archiveDocument,
  createDocument,
  createDraftDocument,
+  createNewDocument,
  createNestedDocument,
  createTemplateFromDocument,
  deleteDocument,
@@ -1477,7 +1483,6 @@ export const rootDocumentActions = [
  searchInDocument,
  duplicateDocument,
  leaveDocument,
-  moveTemplateToWorkspace,
  moveDocumentToCollection,
  openRandomDocument,
  permanentlyDeleteDocument,
@@ -0,0 +1,231 @@
+import copy from "copy-to-clipboard";
+import {
+  CaseSensitiveIcon,
+  CollectionIcon,
+  CopyIcon,
+  MoveIcon,
+  NewDocumentIcon,
+  PlusIcon,
+  PrintIcon,
+  TrashIcon,
+} from "outline-icons";
+import { Trans } from "react-i18next";
+import { toast } from "sonner";
+import ConfirmationDialog from "~/components/ConfirmationDialog";
+import TemplateMove from "~/components/DocumentExplorer/TemplateMove";
+import {
+  createAction,
+  createActionWithChildren,
+  createInternalLinkAction,
+} from "~/actions";
+import history from "~/utils/history";
+import {
+  newDocumentPath,
+  newTemplatePath,
+  settingsPath,
+  urlify,
+} from "~/utils/routeHelpers";
+import { ActiveTemplateSection, TemplateSection } from "../sections";
+import Template from "~/models/Template";
+import { AvatarSize } from "~/components/Avatar";
+import TeamLogo from "~/components/TeamLogo";
+
+export const createTemplate = createInternalLinkAction({
+  name: ({ t }) => t("New template"),
+  analyticsName: "New template",
+  section: TemplateSection,
+  icon: <PlusIcon />,
+  keywords: "new create template",
+  visible: ({ currentTeamId, stores }) =>
+    !!stores.policies.abilities(currentTeamId!).createTemplate,
+  to: newTemplatePath(),
+});
+
+export const deleteTemplate = createAction({
+  name: ({ t }) => `${t("Delete")}…`,
+  analyticsName: "Delete template",
+  section: ActiveTemplateSection,
+  icon: <TrashIcon />,
+  dangerous: true,
+  visible: ({ getActivePolicies }) =>
+    getActivePolicies(Template).some((policy) => policy.abilities.delete),
+  perform: ({ getActiveModel, stores, t }) => {
+    const template = getActiveModel(Template);
+    if (!template) {
+      return;
+    }
+
+    stores.dialogs.openModal({
+      title: t("Delete {{ documentName }}", {
+        documentName: t("template"),
+      }),
+      content: (
+        <ConfirmationDialog
+          onSubmit={async () => {
+            await template.delete();
+            history.push(settingsPath("templates"));
+            toast.success(t("Template deleted"));
+          }}
+          savingText={`${t("Deleting")}…`}
+          danger
+        >
+          <Trans
+            defaults="Are you sure about that? Deleting the <em>{{ templateName }}</em> template is permanent."
+            values={{
+              templateName: template.titleWithDefault,
+            }}
+            components={{
+              em: <strong />,
+            }}
+          />
+        </ConfirmationDialog>
+      ),
+    });
+  },
+});
+
+export const moveTemplateToWorkspace = createAction({
+  name: ({ t }) => t("Move to workspace"),
+  analyticsName: "Move template to workspace",
+  section: ActiveTemplateSection,
+  icon: ({ stores }) => {
+    const { team } = stores.auth;
+    return <TeamLogo model={team} size={AvatarSize.Small} />;
+  },
+  visible: ({ getActiveModel }) => {
+    const template = getActiveModel(Template);
+    return !!template?.collectionId;
+  },
+  perform: async ({ getActiveModel, stores, t }) => {
+    const template = getActiveModel(Template);
+    if (!template) {
+      return;
+    }
+
+    try {
+      await template.save({ collectionId: null });
+      toast.success(t("Template moved"));
+      stores.dialogs.closeAllModals();
+    } catch (_err) {
+      toast.error(t("Couldn't move the template, try again?"));
+    }
+  },
+});
+
+export const moveTemplateToCollection = createAction({
+  name: ({ t }) => t("Move to collection"),
+  analyticsName: "Move template to collection",
+  section: ActiveTemplateSection,
+  icon: <CollectionIcon />,
+  perform: ({ getActiveModel, stores, t }) => {
+    const template = getActiveModel(Template);
+    if (!template) {
+      return;
+    }
+
+    stores.dialogs.openModal({
+      title: t("Move template"),
+      content: <TemplateMove template={template} />,
+    });
+  },
+});
+
+export const moveTemplate = createActionWithChildren({
+  name: ({ t }) => t("Move"),
+  analyticsName: "Move template",
+  section: ActiveTemplateSection,
+  icon: <MoveIcon />,
+  visible: ({ getActivePolicies }) =>
+    getActivePolicies(Template).some((policy) => policy.abilities.move),
+  children: [moveTemplateToWorkspace, moveTemplateToCollection],
+});
+
+export const createDocumentFromTemplate = createInternalLinkAction({
+  name: ({ t }) => t("New document"),
+  analyticsName: "New document from template",
+  section: ActiveTemplateSection,
+  icon: <NewDocumentIcon />,
+  keywords: "create",
+  visible: ({ currentTeamId, getActiveModel, stores }) => {
+    const template = getActiveModel(Template);
+    if (!template || !currentTeamId) {
+      return false;
+    }
+
+    if (template.collectionId) {
+      return !!stores.policies.abilities(template.collectionId).createDocument;
+    }
+    return !!stores.policies.abilities(currentTeamId).createDocument;
+  },
+  to: ({ getActiveModel, activeCollectionId, sidebarContext }) => {
+    const template = getActiveModel(Template);
+    if (!template) {
+      return "";
+    }
+    const collectionId = template?.collectionId ?? activeCollectionId;
+
+    const [pathname, search] = newDocumentPath(collectionId, {
+      templateId: template.id,
+    }).split("?");
+
+    return {
+      pathname,
+      search,
+      state: { sidebarContext },
+    };
+  },
+});
+
+export const copyTemplateLink = createAction({
+  name: ({ t }) => t("Copy link"),
+  analyticsName: "Copy template link",
+  section: ActiveTemplateSection,
+  icon: <CopyIcon />,
+  iconInContextMenu: false,
+  perform: ({ getActiveModel, t }) => {
+    const template = getActiveModel(Template);
+    if (template) {
+      copy(urlify(template.path));
+      toast.success(t("Link copied to clipboard"));
+    }
+  },
+});
+
+export const copyTemplateAsPlainText = createAction({
+  name: ({ t }) => t("Copy as text"),
+  analyticsName: "Copy template as text",
+  section: ActiveTemplateSection,
+  icon: <CaseSensitiveIcon />,
+  iconInContextMenu: false,
+  perform: async ({ getActiveModel, t }) => {
+    const template = getActiveModel(Template);
+    if (template) {
+      const { ProsemirrorHelper } =
+        await import("~/models/helpers/ProsemirrorHelper");
+      copy(ProsemirrorHelper.toPlainText(template));
+      toast.success(t("Text copied to clipboard"));
+    }
+  },
+});
+
+export const copyTemplate = createActionWithChildren({
+  name: ({ t }) => t("Copy"),
+  analyticsName: "Copy template",
+  section: ActiveTemplateSection,
+  icon: <CopyIcon />,
+  keywords: "clipboard",
+  children: [copyTemplateLink, copyTemplateAsPlainText],
+});
+
+export const printTemplate = createAction({
+  name: ({ t, isMenu }) => (isMenu ? t("Print") : t("Print template")),
+  analyticsName: "Print template",
+  section: ActiveTemplateSection,
+  icon: <PrintIcon />,
+  visible: ({ getActiveModel }) => !!getActiveModel(Template) && !!window.print,
+  perform: () => {
+    setTimeout(window.print, 0);
+  },
+});
+
+export const rootTemplateActions = [moveTemplate, createDocumentFromTemplate];
@@ -24,6 +24,15 @@ export const ActiveDocumentSection = ({ t, stores }: ActionContext) => {

 ActiveDocumentSection.priority = 0.9;

+export const TemplateSection = ({ t }: ActionContext) => t("Template");
+
+export const ActiveTemplateSection = ({ t, stores }: ActionContext) => {
+  const activeTemplate = stores.templates.active;
+  return `${t("Template")} · ${activeTemplate?.titleWithDefault}`;
+};
+
+ActiveTemplateSection.priority = 0.9;
+
 export const RecentSection = ({ t }: ActionContext) => t("Recently viewed");

 RecentSection.priority = 1;
@@ -1,17 +1,10 @@
-import { AnimatePresence } from "framer-motion";
 import { observer } from "mobx-react";
 import * as React from "react";
-import {
-  Switch,
-  Route,
-  useLocation,
-  matchPath,
-  Redirect,
-} from "react-router-dom";
-import { TeamPreference } from "@shared/types";
+import { Switch, Route, Redirect } from "react-router-dom";
 import ErrorSuspended from "~/scenes/Errors/ErrorSuspended";
 import Layout from "~/components/Layout";
 import RegisterKeyDown from "~/components/RegisterKeyDown";
+import { RightSidebarProvider } from "~/components/RightSidebarContext";
 import Sidebar from "~/components/Sidebar";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
 import { usePostLoginPath } from "~/hooks/useLastVisitedPath";
@@ -23,20 +16,13 @@ import {
  searchPath,
  newDocumentPath,
  settingsPath,
-  matchDocumentHistory,
-  matchDocumentSlug as slug,
 } from "~/utils/routeHelpers";
 import { DocumentContextProvider } from "./DocumentContext";
 import Fade from "./Fade";
+import NotificationBadge from "./NotificationBadge";
 import { PortalContext } from "./Portal";
 import CommandBar from "./CommandBar";

-const DocumentComments = lazyWithRetry(
-  () => import("~/scenes/Document/components/Comments/Comments")
-);
-const DocumentHistory = lazyWithRetry(
-  () => import("~/scenes/Document/components/History")
-);
 const SettingsSidebar = lazyWithRetry(
  () => import("~/components/Sidebar/Settings")
 );
@@ -47,9 +33,7 @@ type Props = {

 const AuthenticatedLayout: React.FC = ({ children }: Props) => {
  const { ui, auth } = useStores();
-  const location = useLocation();
  const layoutRef = React.useRef<HTMLDivElement>(null);
-  const can = usePolicy(ui.activeDocumentId);
  const canCollection = usePolicy(ui.activeCollectionId);
  const team = useCurrentTeam();
  const [spendPostLoginPath] = usePostLoginPath();
@@ -91,49 +75,20 @@ const AuthenticatedLayout: React.FC = ({ children }: Props) => {
    </Fade>
  );

-  const showHistory =
-    !!matchPath(location.pathname, {
-      path: matchDocumentHistory,
-    }) && can.listRevisions;
-  const showComments =
-    !showHistory &&
-    can.comment &&
-    ui.activeDocumentId &&
-    ui.commentsExpanded &&
-    !!team.getPreference(TeamPreference.Commenting);
-
-  const sidebarRight = (
-    <AnimatePresence
-      initial={false}
-      key={ui.activeDocumentId ? "active" : "inactive"}
-    >
-      {(showHistory || showComments) && (
-        <Route path={`/doc/${slug}`}>
-          <React.Suspense fallback={null}>
-            {showHistory && <DocumentHistory />}
-            {showComments && <DocumentComments />}
-          </React.Suspense>
-        </Route>
-      )}
-    </AnimatePresence>
-  );
-
  return (
    <DocumentContextProvider>
-      <PortalContext.Provider value={layoutRef.current}>
-        <Layout
-          title={team.name}
-          sidebar={sidebar}
-          sidebarRight={sidebarRight}
-          ref={layoutRef}
-        >
-          <RegisterKeyDown trigger="n" handler={goToNewDocument} />
-          <RegisterKeyDown trigger="t" handler={goToSearch} />
-          <RegisterKeyDown trigger="/" handler={goToSearch} />
-          {children}
-          <CommandBar />
-        </Layout>
-      </PortalContext.Provider>
+      <RightSidebarProvider>
+        <PortalContext.Provider value={layoutRef.current}>
+          <Layout title={team.name} sidebar={sidebar} ref={layoutRef}>
+            <RegisterKeyDown trigger="n" handler={goToNewDocument} />
+            <RegisterKeyDown trigger="t" handler={goToSearch} />
+            <RegisterKeyDown trigger="/" handler={goToSearch} />
+            {children}
+            <CommandBar />
+            <NotificationBadge />
+          </Layout>
+        </PortalContext.Provider>
+      </RightSidebarProvider>
    </DocumentContextProvider>
  );
 };
@@ -1,3 +1,4 @@
+import { observer } from "mobx-react";
 import * as React from "react";
 import styled from "styled-components";
 import useBoolean from "~/hooks/useBoolean";
@@ -109,4 +110,4 @@ const Image = styled.img<{ size: number }>`
  height: ${(props) => props.size}px;
 `;

-export default Avatar;
+export default observer(Avatar);
@@ -1,4 +1,5 @@
 import { GoToIcon } from "outline-icons";
+import { observer } from "mobx-react";
 import * as React from "react";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
@@ -121,4 +122,4 @@ const Item = styled(Link)<{ $highlight: boolean; $withIcon: boolean }>`
  }
 `;

-export default React.forwardRef<HTMLDivElement, Props>(Breadcrumb);
+export default observer(React.forwardRef<HTMLDivElement, Props>(Breadcrumb));
@@ -23,12 +23,9 @@ const Container = styled.div<Props>`
 type ContentProps = { $maxWidth?: string };

 const Content = styled.div<ContentProps>`
-  max-width: ${(props) => props.$maxWidth ?? "46em"};
+  max-width: ${(props: ContentProps) =>
+    props.$maxWidth ?? EditorStyleHelper.documentWidth};
  margin: 0 auto;
-
-  ${breakpoint("desktopLarge")`
-    max-width: ${(props: ContentProps) => props.$maxWidth ?? EditorStyleHelper.documentWidth};
-  `};
 `;

 const CenteredContent: React.FC<Props> = ({
@@ -125,8 +125,8 @@ function Collaborators(props: Props) {

      return (
        <AvatarWithPresence
-          {...rest}
          key={collaborator.id}
+          {...rest}
          user={collaborator}
          isPresent={isPresent}
          isEditing={isEditing}
@@ -0,0 +1,112 @@
+import * as RadixCollapsible from "@radix-ui/react-collapsible";
+import { ExpandedIcon } from "outline-icons";
+import * as React from "react";
+import styled from "styled-components";
+import { s } from "@shared/styles";
+
+interface CollapsibleProps {
+  /** The label displayed on the trigger button. */
+  label: React.ReactNode;
+  /** The content to show/hide inside the collapsible panel. */
+  children: React.ReactNode;
+  /** Whether the collapsible is open by default. */
+  defaultOpen?: boolean;
+  /** Controlled open state. */
+  open?: boolean;
+  /** Callback fired when the open state changes. */
+  onOpenChange?: (open: boolean) => void;
+  /** Additional class name for the root element. */
+  className?: string;
+}
+
+/**
+ * An accessible collapsible section built on Radix UI Collapsible.
+ * Renders a trigger button with a disclosure chevron and animated content panel.
+ *
+ * @param props - component props.
+ * @returns the collapsible component.
+ */
+export function Collapsible({
+  label,
+  children,
+  defaultOpen = false,
+  open,
+  onOpenChange,
+  className,
+}: CollapsibleProps) {
+  return (
+    <RadixCollapsible.Root
+      defaultOpen={defaultOpen}
+      open={open}
+      onOpenChange={onOpenChange}
+      className={className}
+    >
+      <StyledTrigger>
+        <StyledExpandedIcon aria-hidden="true" />
+        {label}
+      </StyledTrigger>
+      <StyledContent>{children}</StyledContent>
+    </RadixCollapsible.Root>
+  );
+}
+
+const StyledExpandedIcon = styled(ExpandedIcon)`
+  flex-shrink: 0;
+  transition: transform 150ms ease-out;
+  margin-left: -4px;
+`;
+
+const StyledTrigger = styled(RadixCollapsible.Trigger)`
+  display: flex;
+  align-items: center;
+  background: none;
+  border: none;
+  padding: 0 0 8px 0;
+  cursor: var(--pointer);
+  color: ${s("textTertiary")};
+  font-size: 14pxte
+
+  &:hover {
+    color: ${s("textSecondary")};
+  }
+
+  &[data-state="closed"] {
+    ${StyledExpandedIcon} {
+      transform: rotate(-90deg);
+    }
+  }
+`;
+
+const StyledContent = styled(RadixCollapsible.Content)`
+  overflow: hidden;
+
+  &[data-state="open"] {
+    animation: slideDown 200ms ease-out;
+  }
+
+  &[data-state="closed"] {
+    animation: slideUp 200ms ease-out;
+  }
+
+  @keyframes slideDown {
+    from {
+      height: 0;
+      opacity: 0;
+    }
+    to {
+      height: var(--radix-collapsible-content-height);
+      opacity: 1;
+    }
+  }
+
+  @keyframes slideUp {
+    from {
+      height: var(--radix-collapsible-content-height);
+      opacity: 1;
+    }
+    to {
+      height: 0;
+      opacity: 0;
+    }
+  }
+`;
@@ -13,6 +13,7 @@ import { colorPalette } from "@shared/utils/collections";
 import { CollectionValidation } from "@shared/validations";
 import type Collection from "~/models/Collection";
 import Button from "~/components/Button";
+import { Collapsible } from "~/components/Collapsible";
 import Input from "~/components/Input";
 import { InputSelectPermission } from "~/components/InputSelectPermission";
 import { createLazyComponent } from "~/components/LazyLoad";
@@ -144,7 +145,7 @@ export const CollectionForm = observer(function CollectionForm_({
      <HStack>
        <Input
          type="text"
-          placeholder={t("Name")}
+          label={t("Name")}
          {...register("name", {
            required: true,
            maxLength: CollectionValidation.maxNameLength,
@@ -189,38 +190,44 @@ export const CollectionForm = observer(function CollectionForm_({
        />
      )}

-      {team.sharing && (
-        <Controller
-          control={control}
-          name="sharing"
-          render={({ field }) => (
-            <Switch
-              id="sharing"
-              label={t("Public document sharing")}
-              note={t(
-                "Allow documents within this collection to be shared publicly on the internet."
+      {(team.sharing || team.getPreference(TeamPreference.Commenting)) && (
+        <Collapsible label={t("Advanced options")}>
+          {team.sharing && (
+            <Controller
+              control={control}
+              name="sharing"
+              render={({ field }) => (
+                <Switch
+                  id="sharing"
+                  label={t("Public document sharing")}
+                  note={t(
+                    "Allow documents within this collection to be shared publicly on the internet."
+                  )}
+                  checked={field.value}
+                  onChange={field.onChange}
+                />
              )}
-              checked={field.value}
-              onChange={field.onChange}
            />
          )}
-        />
-      )}

-      {team.getPreference(TeamPreference.Commenting) && (
-        <Controller
-          control={control}
-          name="commenting"
-          render={({ field }) => (
-            <Switch
-              id="commenting"
-              label={t("Commenting")}
-              note={t("Allow commenting on documents within this collection.")}
-              checked={!!field.value}
-              onChange={field.onChange}
+          {team.getPreference(TeamPreference.Commenting) && (
+            <Controller
+              control={control}
+              name="commenting"
+              render={({ field }) => (
+                <Switch
+                  id="commenting"
+                  label={t("Commenting")}
+                  note={t(
+                    "Allow commenting on documents within this collection."
+                  )}
+                  checked={!!field.value}
+                  onChange={field.onChange}
+                />
+              )}
            />
          )}
-        />
+        </Collapsible>
      )}

      <HStack justify="flex-end">
@@ -11,15 +11,15 @@ import useStores from "~/hooks/useStores";
 import { newDocumentPath } from "~/utils/routeHelpers";

 const useTemplatesAction = () => {
-  const { documents } = useStores();
+  const { templates } = useStores();

  useEffect(() => {
-    void documents.fetchAllTemplates();
-  }, [documents]);
+    void templates.fetchAll();
+  }, [templates]);

  const actions = useMemo(
    () =>
-      documents.templatesAlphabetical.map((template) =>
+      templates.alphabetical.map((template) =>
        createInternalLinkAction({
          name: template.titleWithDefault,
          analyticsName: "New document",
@@ -66,7 +66,7 @@ const useTemplatesAction = () => {
          },
        })
      ),
-    [documents.templatesAlphabetical]
+    [templates.alphabetical]
  );

  const newFromTemplate = useMemo(
@@ -1,8 +1,15 @@
-import { HomeIcon } from "outline-icons";
+import {
+  CollectionIcon as CollectionIconComponent,
+  HomeIcon,
+  PrivateCollectionIcon,
+} from "outline-icons";
+import { observer } from "mobx-react";
+import { getLuminance } from "polished";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
-import CollectionIcon from "~/components/Icons/CollectionIcon";
+import Icon from "@shared/components/Icon";
+import { colorPalette } from "@shared/utils/collections";
 import type { Option } from "~/components/InputSelect";
 import { InputSelect } from "~/components/InputSelect";
 import useStores from "~/hooks/useStores";
@@ -12,74 +19,112 @@ type DefaultCollectionInputSelectProps = {
  defaultCollectionId: string | null;
 };

-const DefaultCollectionInputSelect = ({
-  onSelectCollection,
-  defaultCollectionId,
-}: DefaultCollectionInputSelectProps) => {
-  const { t } = useTranslation();
-  const { collections } = useStores();
-  const [fetching, setFetching] = useState(false);
-  const [fetchError, setFetchError] = useState();
+const DefaultCollectionInputSelect = observer(
+  ({
+    onSelectCollection,
+    defaultCollectionId,
+  }: DefaultCollectionInputSelectProps) => {
+    const { t } = useTranslation();
+    const { collections, ui } = useStores();
+    const [fetching, setFetching] = useState(false);
+    const [fetchError, setFetchError] = useState();

-  React.useEffect(() => {
-    async function fetchData() {
-      if (!collections.isLoaded && !fetching && !fetchError) {
-        try {
-          setFetching(true);
-          await collections.fetchPage({
-            limit: 100,
-          });
-        } catch (error) {
-          toast.error(
-            t("Collections could not be loaded, please reload the app")
-          );
-          setFetchError(error);
-        } finally {
-          setFetching(false);
+    React.useEffect(() => {
+      async function fetchData() {
+        if (!collections.isLoaded && !fetching && !fetchError) {
+          try {
+            setFetching(true);
+            await collections.fetchPage({
+              limit: 100,
+            });
+          } catch (error) {
+            toast.error(
+              t("Collections could not be loaded, please reload the app")
+            );
+            setFetchError(error);
+          } finally {
+            setFetching(false);
+          }
        }
      }
-    }
-    void fetchData();
-  }, [fetchError, t, fetching, collections]);
+      void fetchData();
+    }, [fetchError, t, fetching, collections]);

-  const options: Option[] = React.useMemo(
-    () =>
-      collections.nonPrivate.reduce(
-        (acc, collection) => [
+    if (fetching) {
+      return null;
+    }
+
+    const isDark = ui.resolvedTheme === "dark";
+
+    // Eagerly resolve collection icon properties within this observer context
+    // to avoid MobX warnings when Radix Select clones elements for the trigger.
+    const options: Option[] = collections.nonPrivate.reduce(
+      (acc, collection) => {
+        const collectionIcon = collection.icon;
+        const rawColor = collection.color ?? colorPalette[0];
+
+        let icon: React.ReactElement;
+        if (!collectionIcon || collectionIcon === "collection") {
+          const color =
+            isDark && rawColor !== "currentColor"
+              ? getLuminance(rawColor) > 0.09
+                ? rawColor
+                : "currentColor"
+              : rawColor;
+          const Component = collection.isPrivate
+            ? PrivateCollectionIcon
+            : CollectionIconComponent;
+          icon = <Component color={color} />;
+        } else {
+          let color = rawColor;
+          if (color !== "currentColor") {
+            if (isDark) {
+              color = getLuminance(color) > 0.09 ? color : "currentColor";
+            } else {
+              color = getLuminance(color) < 0.9 ? color : "currentColor";
+            }
+          }
+          icon = (
+            <Icon
+              value={collectionIcon}
+              color={color}
+              initial={collection.initial}
+              forceColor
+            />
+          );
+        }
+
+        return [
          ...acc,
          {
-            type: "item",
+            type: "item" as const,
            label: collection.name,
            value: collection.id,
-            icon: <CollectionIcon collection={collection} />,
+            icon,
          },
-        ],
-        [
-          {
-            type: "item",
-            label: t("Home"),
-            value: "home",
-            icon: <HomeIcon />,
-          },
-        ] satisfies Option[]
-      ),
-    [collections.nonPrivate, t]
-  );
+        ];
+      },
+      [
+        {
+          type: "item",
+          label: t("Home"),
+          value: "home",
+          icon: <HomeIcon />,
+        },
+      ] satisfies Option[]
+    );

-  if (fetching) {
-    return null;
+    return (
+      <InputSelect
+        options={options}
+        value={defaultCollectionId ?? "home"}
+        onChange={onSelectCollection}
+        label={t("Start view")}
+        hideLabel
+        short
+      />
+    );
  }
-
-  return (
-    <InputSelect
-      options={options}
-      value={defaultCollectionId ?? "home"}
-      onChange={onSelectCollection}
-      label={t("Start view")}
-      hideLabel
-      short
-    />
-  );
-};
+);

 export default DefaultCollectionInputSelect;
@@ -1,5 +1,5 @@
 import { observer } from "mobx-react";
-import { ArchiveIcon, GoToIcon, ShapesIcon, TrashIcon } from "outline-icons";
+import { ArchiveIcon, GoToIcon, TrashIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
@@ -11,7 +11,7 @@ import CollectionIcon from "~/components/Icons/CollectionIcon";
 import { useLocationSidebarContext } from "~/hooks/useLocationSidebarContext";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
-import { archivePath, settingsPath, trashPath } from "~/utils/routeHelpers";
+import { archivePath, trashPath } from "~/utils/routeHelpers";
 import { createInternalLinkAction } from "~/actions";
 import { ActiveDocumentSection } from "~/actions/sections";

@@ -67,13 +67,6 @@ function DocumentBreadcrumb(
        visible: document.isArchived,
        to: archivePath(),
      }),
-      createInternalLinkAction({
-        name: t("Templates"),
-        section: ActiveDocumentSection,
-        icon: <ShapesIcon />,
-        visible: document.template,
-        to: settingsPath("templates"),
-      }),
      createInternalLinkAction({
        name: collection?.name,
        section: ActiveDocumentSection,
@@ -0,0 +1,17 @@
+import styled from "styled-components";
+import Flex from "../Flex";
+
+export const FlexContainer = styled(Flex)`
+  margin-left: -24px;
+  margin-right: -24px;
+  margin-bottom: -24px;
+  outline: none;
+`;
+
+export const Footer = styled(Flex)`
+  height: 64px;
+  border-top: 1px solid ${(props) => props.theme.horizontalRule};
+  padding-left: 24px;
+  padding-right: 24px;
+  flex-shrink: 0;
+`;
@@ -5,13 +5,13 @@ import { toast } from "sonner";
 import styled from "styled-components";
 import type { NavigationNode } from "@shared/types";
 import type Document from "~/models/Document";
-import { FlexContainer, Footer, StyledText } from "~/scenes/DocumentMove";
 import Button from "~/components/Button";
-import DocumentExplorer from "~/components/DocumentExplorer";
+import Switch from "~/components/Switch";
+import Text from "~/components/Text";
 import useCollectionTrees from "~/hooks/useCollectionTrees";
 import useStores from "~/hooks/useStores";
-import Switch from "./Switch";
-import Text from "./Text";
+import { FlexContainer, Footer } from "./Components";
+import DocumentExplorer from "./DocumentExplorer";

 type Props = {
  /** The original document to duplicate */
@@ -37,13 +37,8 @@ function DocumentCopy({ document, onSubmit }: Props) {
        : true
    );

-    if (document.isTemplate) {
-      return nodes
-        .filter((node) => node.type === "collection")
-        .map((node) => ({ ...node, children: [] }));
-    }
    return nodes;
-  }, [policies, collectionTrees, document.isTemplate]);
+  }, [policies, collectionTrees]);

  const copy = async () => {
    if (!selectedPath) {
@@ -80,34 +75,32 @@ function DocumentCopy({ document, onSubmit }: Props) {
        onSelect={selectPath}
        defaultValue={document.parentDocumentId || document.collectionId || ""}
      />
-      {!document.isTemplate && (
-        <OptionsContainer>
-          {document.collectionId && (
-            <Text size="small">
-              <Switch
-                name="publish"
-                label={t("Publish")}
-                labelPosition="right"
-                checked={publish}
-                onChange={setPublish}
-              />
-            </Text>
-          )}
-          {document.publishedAt && document.childDocuments.length > 0 && (
-            <Text size="small">
-              <Switch
-                name="recursive"
-                label={t("Include nested documents")}
-                labelPosition="right"
-                checked={recursive}
-                onChange={setRecursive}
-              />
-            </Text>
-          )}
-        </OptionsContainer>
-      )}
+      <OptionsContainer>
+        {document.collectionId && (
+          <Text size="small">
+            <Switch
+              name="publish"
+              label={t("Publish")}
+              labelPosition="right"
+              checked={publish}
+              onChange={setPublish}
+            />
+          </Text>
+        )}
+        {document.publishedAt && document.childDocuments.length > 0 && (
+          <Text size="small">
+            <Switch
+              name="recursive"
+              label={t("Include nested documents")}
+              labelPosition="right"
+              checked={recursive}
+              onChange={setRecursive}
+            />
+          </Text>
+        )}
+      </OptionsContainer>
      <Footer justify="space-between" align="center" gap={8}>
-        <StyledText type="secondary">
+        <Text ellipsis type="secondary">
          {selectedPath ? (
            <Trans
              defaults="Copy to <em>{{ location }}</em>"
@@ -117,7 +110,7 @@ function DocumentCopy({ document, onSubmit }: Props) {
          ) : (
            t("Select a location to copy")
          )}
-        </StyledText>
+        </Text>
        <Button disabled={!selectedPath || copying} onClick={copy}>
          {copying ? `${t("Copying")}…` : t("Copy")}
        </Button>
@@ -19,8 +19,8 @@ import Icon from "@shared/components/Icon";
 import type { NavigationNode } from "@shared/types";
 import { isModKey } from "@shared/utils/keyboard";
 import { ancestors, descendants, flattenTree } from "@shared/utils/tree";
-import DocumentExplorerNode from "~/components/DocumentExplorerNode";
-import DocumentExplorerSearchResult from "~/components/DocumentExplorerSearchResult";
+import DocumentExplorerNode from "./DocumentExplorerNode";
+import DocumentExplorerSearchResult from "./DocumentExplorerSearchResult";
 import Flex from "~/components/Flex";
 import CollectionIcon from "~/components/Icons/CollectionIcon";
 import { Outline } from "~/components/Input";
@@ -38,9 +38,17 @@ type Props = {
  items: NavigationNode[];
  /** Automatically expand to and select item with the given id */
  defaultValue?: string;
+  /** Whether to show child documents */
+  showDocuments?: boolean;
 };

-function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
+function DocumentExplorer({
+  onSubmit,
+  onSelect,
+  items,
+  defaultValue,
+  showDocuments,
+}: Props) {
  const isMobile = useMobile();
  const { collections, documents } = useStores();
  const { t } = useTranslation();
@@ -141,7 +149,8 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
    (min, node) => (node.depth ? Math.min(min, node.depth) : min),
    Infinity
  );
-  const normalizedBaseDepth = baseDepth === Infinity ? 0 : baseDepth;
+  const normalizedBaseDepth =
+    (baseDepth === Infinity ? 0 : baseDepth) + (showDocuments ? 0 : 1);

  const scrollNodeIntoView = React.useCallback(
    (node: number) => {
@@ -216,7 +225,7 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
  };

  const hasChildren = (node: number) =>
-    nodes[node].children.length > 0 || nodes[node].type === "collection";
+    nodes[node].children.length > 0 || showDocuments !== false;

  const toggleCollapse = (node: number) => {
    if (!hasChildren(node)) {
@@ -402,7 +411,11 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
      <ListSearch
        ref={inputSearchRef}
        onChange={handleSearch}
-        placeholder={`${t("Search collections & documents")}…`}
+        placeholder={
+          showDocuments
+            ? `${t("Search collections & documents")}…`
+            : `${t("Search collections")}…`
+        }
        autoFocus
      />
      <ListContainer>
@@ -54,6 +54,7 @@ function DocumentExplorerNode(
      style={style}
      onPointerMove={onPointerMove}
      role="option"
+      aria-selected={selected}
    >
      <Spacer width={width}>
        {hasChildren && (
@@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next";
 import scrollIntoView from "scroll-into-view-if-needed";
 import styled from "styled-components";
 import { ellipsis } from "@shared/styles";
-import { Node as SearchResult } from "~/components/DocumentExplorerNode";
+import { Node as SearchResult } from "./DocumentExplorerNode";
 import Flex from "~/components/Flex";
 import Text from "~/components/Text";

@@ -54,6 +54,7 @@ function DocumentExplorerSearchResult({
      style={style}
      onPointerMove={onPointerMove}
      role="option"
+      aria-selected={selected}
    >
      {icon}
      <Flex>
@@ -2,16 +2,14 @@ import { observer } from "mobx-react";
 import { useState, useMemo } from "react";
 import { useTranslation, Trans } from "react-i18next";
 import { toast } from "sonner";
-import styled from "styled-components";
-import { ellipsis } from "@shared/styles";
 import type { NavigationNode } from "@shared/types";
 import type Document from "~/models/Document";
 import Button from "~/components/Button";
-import DocumentExplorer from "~/components/DocumentExplorer";
-import Flex from "~/components/Flex";
 import Text from "~/components/Text";
 import useCollectionTrees from "~/hooks/useCollectionTrees";
 import useStores from "~/hooks/useStores";
+import { FlexContainer, Footer } from "./Components";
+import DocumentExplorer from "./DocumentExplorer";

 type Props = {
  document: Document;
@@ -44,21 +42,8 @@ function DocumentMove({ document }: Props) {
          : true
      );

-    // If the document we're moving is a template, only show collections as
-    // move targets.
-    if (document.isTemplate) {
-      return nodes
-        .filter((node) => node.type === "collection")
-        .map((node) => ({ ...node, children: [] }));
-    }
    return nodes;
-  }, [
-    policies,
-    collectionTrees,
-    document.id,
-    document.parentDocumentId,
-    document.isTemplate,
-  ]);
+  }, [policies, collectionTrees, document.id, document.parentDocumentId]);

  const move = async () => {
    if (!selectedPath) {
@@ -92,7 +77,7 @@ function DocumentMove({ document }: Props) {
    <FlexContainer column>
      <DocumentExplorer items={items} onSubmit={move} onSelect={selectPath} />
      <Footer justify="space-between" align="center" gap={8}>
-        <StyledText type="secondary">
+        <Text ellipsis type="secondary">
          {selectedPath ? (
            <Trans
              defaults="Move to <em>{{ location }}</em>"
@@ -106,7 +91,7 @@ function DocumentMove({ document }: Props) {
          ) : (
            t("Select a location to move")
          )}
-        </StyledText>
+        </Text>
        <Button disabled={!selectedPath || moving} onClick={move}>
          {moving ? `${t("Moving")}…` : t("Move")}
        </Button>
@@ -115,23 +100,4 @@ function DocumentMove({ document }: Props) {
  );
 }

-export const FlexContainer = styled(Flex)`
-  margin-left: -24px;
-  margin-right: -24px;
-  margin-bottom: -24px;
-  outline: none;
-`;
-
-export const Footer = styled(Flex)`
-  height: 64px;
-  border-top: 1px solid ${(props) => props.theme.horizontalRule};
-  padding-left: 24px;
-  padding-right: 24px;
-`;
-
-export const StyledText = styled(Text)`
-  ${ellipsis()}
-  margin-bottom: 0;
-`;
-
 export default observer(DocumentMove);
@@ -0,0 +1,87 @@
+import { observer } from "mobx-react";
+import { useState, useMemo } from "react";
+import { useTranslation, Trans } from "react-i18next";
+import { toast } from "sonner";
+import type { NavigationNode } from "@shared/types";
+import type Template from "~/models/Template";
+import Button from "~/components/Button";
+import Text from "~/components/Text";
+import useCollectionTrees from "~/hooks/useCollectionTrees";
+import useStores from "~/hooks/useStores";
+import { FlexContainer, Footer } from "./Components";
+import DocumentExplorer from "./DocumentExplorer";
+
+type Props = {
+  template: Template;
+};
+
+function TemplateMove({ template }: Props) {
+  const { dialogs, policies } = useStores();
+  const { t } = useTranslation();
+  const collectionTrees = useCollectionTrees();
+  const [selectedPath, selectPath] = useState<NavigationNode | null>(null);
+
+  const items = useMemo(
+    () =>
+      collectionTrees
+        .map((node) => ({ ...node, children: [] }))
+        .filter((node) =>
+          node.collectionId
+            ? policies.get(node.collectionId)?.abilities.createDocument
+            : true
+        ),
+    [policies, collectionTrees]
+  );
+
+  const move = async () => {
+    if (!selectedPath) {
+      toast.message(t("Select a location to move"));
+      return;
+    }
+
+    try {
+      const collectionId = (selectedPath.collectionId ??
+        selectedPath.id) as string;
+      await template.save({ collectionId });
+
+      toast.success(t("Template moved"));
+
+      dialogs.closeAllModals();
+    } catch (_err) {
+      toast.error(t("Couldn’t move the template, try again?"));
+    }
+  };
+
+  return (
+    <FlexContainer column>
+      <DocumentExplorer
+        items={items}
+        onSubmit={move}
+        onSelect={selectPath}
+        showDocuments={false}
+      />
+      <Footer justify="space-between" align="center" gap={8}>
+        <Text ellipsis type="secondary">
+          {selectedPath ? (
+            <Trans
+              defaults="Move to <em>{{ location }}</em>"
+              values={{
+                location: selectedPath.title,
+              }}
+              components={{
+                em: <strong />,
+              }}
+            />
+          ) : (
+            t("Select a location to move")
+          )}
+        </Text>
+        <Button disabled={!selectedPath} onClick={move}>
+          {t("Move")}
+        </Button>
+      </Footer>
+    </FlexContainer>
+  );
+}
+
+export default observer(TemplateMove);
@@ -0,0 +1,3 @@
+import DocumentExplorer from "./DocumentExplorer";
+
+export default DocumentExplorer;
@@ -22,6 +22,7 @@ import StarButton, { AnimatedStar } from "~/components/Star";
 import Tooltip from "~/components/Tooltip";
 import useBoolean from "~/hooks/useBoolean";
 import useCurrentUser from "~/hooks/useCurrentUser";
+import useMobile from "~/hooks/useMobile";
 import { useLocationSidebarContext } from "~/hooks/useLocationSidebarContext";
 import DocumentMenu from "~/menus/DocumentMenu";
 import { documentPath } from "~/utils/routeHelpers";
@@ -39,7 +40,6 @@ type Props = {
  showCollection?: boolean;
  showPublished?: boolean;
  showDraft?: boolean;
-  showTemplate?: boolean;
 };

 const SEARCH_RESULT_REGEX = /<b\b[^>]*>(.*?)<\/b>/gi;
@@ -59,6 +59,7 @@ function DocumentListItem(
  const { userMemberships, groupMemberships } = useStores();
  const locationSidebarContext = useLocationSidebarContext();
  const [menuOpen, handleMenuOpen, handleMenuClose] = useBoolean();
+  const isMobile = useMobile();

  let itemRef: React.Ref<HTMLAnchorElement> =
    React.useRef<HTMLAnchorElement>(null);
@@ -75,7 +76,6 @@ function DocumentListItem(
    showCollection,
    showPublished,
    showDraft = true,
-    showTemplate,
    highlight,
    context,
    ...rest
@@ -83,7 +83,7 @@ function DocumentListItem(
  const queryIsInTitle =
    !!highlight &&
    !!document.title.toLowerCase().includes(highlight.toLowerCase());
-  const canStar = !document.isArchived && !document.isTemplate;
+  const canStar = !document.isArchived;

  const isShared = !!(
    userMemberships.getByDocumentId(document.id) ||
@@ -101,11 +101,10 @@ function DocumentListItem(
  return (
    <ActionContextProvider
      value={{
-        activeDocumentId: document.id,
-        activeCollectionId:
-          !isShared && document.collectionId
-            ? document.collectionId
-            : undefined,
+        activeModels: [
+          document,
+          ...(!isShared && document.collection ? [document.collection] : []),
+        ],
      }}
    >
      <ContextMenu
@@ -162,10 +161,7 @@ function DocumentListItem(
                    <Badge>{t("Draft")}</Badge>
                  </Tooltip>
                )}
-                {canStar && <StarButton document={document} />}
-                {document.isTemplate && showTemplate && (
-                  <Badge primary>{t("Template")}</Badge>
-                )}
+                {canStar && !isMobile && <StarButton document={document} />}
              </Heading>

              {!queryIsInTitle && (
@@ -52,7 +52,6 @@ const DocumentMeta: React.FC<Props> = ({
    isDraft,
    lastViewedAt,
    isTasks,
-    isTemplate,
  } = document;

  // Prevent meta information from displaying if updatedBy is not available.
@@ -142,7 +141,7 @@ const DocumentMeta: React.FC<Props> = ({
  const nestedDocumentsCount = collection
    ? collection.getChildrenForDocument(document.id).length
    : 0;
-  const canShowProgressBar = isTasks && !isTemplate;
+  const canShowProgressBar = isTasks;

  const timeSinceNow = () => {
    if (isDraft || !showLastViewed) {
@@ -170,7 +169,7 @@ const DocumentMeta: React.FC<Props> = ({
  };

  return (
-    <Container align="center" rtl={document.dir === "rtl"} {...rest} dir="ltr">
+    <Container align="center" $rtl={document.dir === "rtl"} {...rest} dir="ltr">
      {to ? (
        <Link to={to} replace={replace}>
          {content}
@@ -219,8 +218,8 @@ const Strong = styled.strong`
  font-weight: 550;
 `;

-const Container = styled(Flex)<{ rtl?: boolean }>`
-  justify-content: ${(props) => (props.rtl ? "flex-end" : "flex-start")};
+const Container = styled(Flex)<{ $rtl?: boolean }>`
+  justify-content: ${(props) => (props.$rtl ? "flex-end" : "flex-start")};
  color: ${s("textTertiary")};
  font-size: 13px;
  white-space: nowrap;
@@ -266,7 +266,7 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
      <>
        {paragraphs ? (
          <EditorContainer
-            rtl={props.dir === "rtl"}
+            $rtl={props.dir === "rtl"}
            grow={props.grow}
            style={props.style}
            editorStyle={props.editorStyle}
@@ -3,9 +3,11 @@ import { Trans } from "react-i18next";
 import styled from "styled-components";
 import { Backticks } from "@shared/components/Backticks";
 import { IssueStatusIcon } from "@shared/components/IssueStatusIcon";
+import { richExtensions } from "@shared/editor/nodes";
 import type { UnfurlResourceType, UnfurlResponse } from "@shared/types";
 import { IntegrationService } from "@shared/types";
 import { Avatar } from "~/components/Avatar";
+import Editor from "~/components/Editor";
 import Flex from "~/components/Flex";
 import Text from "../Text";
 import Time from "../Time";
@@ -28,9 +30,11 @@ const HoverPreviewIssue = React.forwardRef(function HoverPreviewIssue_(
  const authorName = author.name;
  const urlObj = new URL(url);
  const service =
-    urlObj.hostname === "github.com"
-      ? IntegrationService.GitHub
-      : IntegrationService.Linear;
+    urlObj.hostname === "linear.app"
+      ? IntegrationService.Linear
+      : urlObj.hostname === "github.com"
+        ? IntegrationService.GitHub
+        : IntegrationService.GitLab;

  return (
    <Preview as="a" href={url} target="_blank" rel="noopener noreferrer">
@@ -58,7 +62,18 @@ const HoverPreviewIssue = React.forwardRef(function HoverPreviewIssue_(
                  </Trans>
                </Info>
              </Flex>
-              <Description>{description}</Description>
+              {description && (
+                <Description as="div">
+                  <React.Suspense fallback={<div />}>
+                    <Editor
+                      extensions={richExtensions}
+                      defaultValue={description}
+                      embedsDisabled
+                      readOnly
+                    />
+                  </React.Suspense>
+                </Description>
+              )}

              <Flex wrap>
                {labels.map((label, index) => (
@@ -3,8 +3,10 @@ import { Trans } from "react-i18next";
 import styled from "styled-components";
 import { Backticks } from "@shared/components/Backticks";
 import { PullRequestIcon } from "@shared/components/PullRequestIcon";
+import { richExtensions } from "@shared/editor/nodes";
 import type { UnfurlResourceType, UnfurlResponse } from "@shared/types";
 import { Avatar } from "~/components/Avatar";
+import Editor from "~/components/Editor";
 import Flex from "~/components/Flex";
 import Text from "../Text";
 import Time from "../Time";
@@ -48,7 +50,18 @@ const HoverPreviewPullRequest = React.forwardRef(
                    </Trans>
                  </Info>
                </Flex>
-                <Description>{description}</Description>
+                {description && (
+                  <Description as="div">
+                    <React.Suspense fallback={<div />}>
+                      <Editor
+                        extensions={richExtensions}
+                        defaultValue={description}
+                        embedsDisabled
+                        readOnly
+                      />
+                    </React.Suspense>
+                  </Description>
+                )}
              </Flex>
            </CardContent>
          </Card>
@@ -95,7 +95,7 @@ const IconWrapper = styled.span`
 export const Outline = styled(Flex)<{
  margin?: string | number;
  hasError?: boolean;
-  focused?: boolean;
+  $focused?: boolean;
 }>`
  flex: 1;
  margin: ${(props) =>
@@ -106,7 +106,7 @@ export const Outline = styled(Flex)<{
  border-color: ${(props) =>
    props.hasError
      ? props.theme.danger
-      : props.focused
+      : props.$focused
        ? props.theme.inputBorderFocused
        : props.theme.inputBorder};
  border-radius: 4px;
@@ -224,7 +224,7 @@ function Input(
          ) : (
            wrappedLabel
          ))}
-        <Outline focused={focused} margin={margin}>
+        <Outline $focused={focused} margin={margin}>
          {prefix}
          {icon && <IconWrapper>{icon}</IconWrapper>}
          {type === "textarea" ? (
@@ -1,3 +1,4 @@
+import { AnimatePresence } from "framer-motion";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { Helmet } from "react-helmet-async";
@@ -7,6 +8,7 @@ import breakpoint from "styled-components-breakpoint";
 import { s } from "@shared/styles";
 import Flex from "~/components/Flex";
 import { LoadingIndicatorBar } from "~/components/LoadingIndicator";
+import { useRightSidebarContent } from "~/components/RightSidebarContext";
 import SkipNavContent from "~/components/SkipNavContent";
 import SkipNavLink from "~/components/SkipNavLink";
 import env from "~/env";
@@ -19,16 +21,15 @@ type Props = {
  title?: string;
  /** Left sidebar content. */
  sidebar?: React.ReactNode;
-  /** Right sidebar content. */
-  sidebarRight?: React.ReactNode;
 };

 const Layout = React.forwardRef(function Layout_(
-  { title, children, sidebar, sidebarRight }: Props,
+  { title, children, sidebar }: Props,
  ref: React.RefObject<HTMLDivElement>
 ) {
  const { ui } = useStores();
  const sidebarCollapsed = !sidebar || ui.sidebarIsClosed;
+  const sidebarRight = useRightSidebarContent();

  return (
    <Container column auto ref={ref}>
@@ -61,7 +62,7 @@ const Layout = React.forwardRef(function Layout_(
          {children}
        </Content>

-        {sidebarRight}
+        <AnimatePresence initial={false}>{sidebarRight}</AnimatePresence>
      </Container>
    </Container>
  );
@@ -3,6 +3,7 @@ import { actionToMenuItem } from "~/actions";
 import useActionContext from "~/hooks/useActionContext";
 import useMobile from "~/hooks/useMobile";
 import type { ActionVariant, ActionWithChildren } from "~/types";
+import { preventDefault } from "~/utils/events";
 import { toMenuItems } from "./transformer";
 import { observer } from "mobx-react";
 import { useComputed } from "~/hooks/useComputed";
@@ -61,11 +62,6 @@ export const ContextMenu = observer(
      }
    }, []);

-    const handleCloseAutoFocus = React.useCallback(
-      (e: Event) => e.preventDefault(),
-      []
-    );
-
    if (isMobile || !action || menuItems.length === 0) {
      return <>{children}</>;
    }
@@ -80,7 +76,7 @@ export const ContextMenu = observer(
            aria-label={ariaLabel}
            onAnimationStart={disablePointerEvents}
            onAnimationEnd={enablePointerEvents}
-            onCloseAutoFocus={handleCloseAutoFocus}
+            onCloseAutoFocus={preventDefault}
          >
            {content}
          </MenuContent>
@@ -13,6 +13,7 @@ import { MenuProvider } from "~/components/primitives/Menu/MenuContext";
 import { actionToMenuItem } from "~/actions";
 import useActionContext from "~/hooks/useActionContext";
 import useMobile from "~/hooks/useMobile";
+import { preventDefault } from "~/utils/events";
 import type {
  ActionVariant,
  ActionWithChildren,
@@ -98,11 +99,6 @@ export const DropdownMenu = observer(
        }
      }, []);

-      const handleCloseAutoFocus = React.useCallback(
-        (e: Event) => e.preventDefault(),
-        []
-      );
-
      if (isMobile) {
        return (
          <MobileDropdown
@@ -129,7 +125,7 @@ export const DropdownMenu = observer(
              aria-label={ariaLabel}
              onAnimationStart={disablePointerEvents}
              onAnimationEnd={enablePointerEvents}
-              onCloseAutoFocus={handleCloseAutoFocus}
+              onCloseAutoFocus={preventDefault}
            >
              {content}
              {append}
@@ -16,6 +16,7 @@ import { fadeAndScaleIn, fadeIn } from "~/styles/animations";
 import Desktop from "~/utils/Desktop";
 import ErrorBoundary from "./ErrorBoundary";
 import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
+import Tooltip from "./Tooltip";

 type Props = {
  children?: React.ReactNode;
@@ -93,9 +94,11 @@ const Modal: React.FC<Props> = ({
                </DesktopContent>
                <Header>
                  {title && <Text size="large">{title}</Text>}
-                  <NudeButton onClick={onRequestClose}>
-                    <CloseIcon />
-                  </NudeButton>
+                  <Tooltip content={t("Close")} shortcut="Esc">
+                    <NudeButton onClick={onRequestClose}>
+                      <CloseIcon />
+                    </NudeButton>
+                  </Tooltip>
                </Header>
              </Centered>
            </Wrapper>
@@ -39,7 +39,7 @@ const Container = styled(Text)`
  border-radius: 4px;
  position: relative;
  font-size: 14px;
-  margin: 1em 0 0;
+  margin: 1em 0;

  svg {
    flex-shrink: 0;
@@ -0,0 +1,47 @@
+import { observer } from "mobx-react";
+import * as React from "react";
+import { NotificationBadgeType, UserPreference } from "@shared/types";
+import useCurrentUser from "~/hooks/useCurrentUser";
+import useStores from "~/hooks/useStores";
+import Desktop from "~/utils/Desktop";
+
+/**
+ * Component that keeps the app icon notification badge in sync with unread
+ * notification count. Renders nothing visible — mount near the app root so it
+ * stays alive as long as the user is authenticated.
+ */
+function NotificationBadge() {
+  const { notifications } = useStores();
+  const user = useCurrentUser();
+
+  const badgeType = user.getPreference(UserPreference.NotificationBadge);
+  const unreadCount = notifications.approximateUnreadCount;
+
+  React.useEffect(() => {
+    // Desktop app badge
+    if (Desktop.bridge && "setNotificationCount" in Desktop.bridge) {
+      if (badgeType === NotificationBadgeType.Disabled || unreadCount === 0) {
+        void Desktop.bridge.setNotificationCount(0);
+      } else if (badgeType === NotificationBadgeType.Count) {
+        void Desktop.bridge.setNotificationCount(unreadCount);
+      } else {
+        void Desktop.bridge.setNotificationCount("・");
+      }
+    }
+
+    // PWA badge
+    if ("setAppBadge" in navigator) {
+      if (unreadCount > 0 && badgeType !== NotificationBadgeType.Disabled) {
+        void navigator.setAppBadge(
+          badgeType === NotificationBadgeType.Count ? unreadCount : undefined
+        );
+      } else {
+        void navigator.clearAppBadge();
+      }
+    }
+  }, [unreadCount, badgeType]);
+
+  return null;
+}
+
+export default observer(NotificationBadge);
@@ -103,6 +103,7 @@ const StyledLink = styled(Link)`
 const StyledCommentEditor = styled(CommentEditor)`
  font-size: 0.9em;
  margin-top: 4px;
+  pointer-events: none;

  ${truncateMultiline(3)}
 `;
@@ -8,7 +8,6 @@ import Notification, { type NotificationFilter } from "~/models/Notification";
 import { markNotificationsAsRead } from "~/actions/definitions/notifications";
 import useStores from "~/hooks/useStores";
 import NotificationMenu from "~/menus/NotificationMenu";
-import Desktop from "~/utils/Desktop";
 import Empty from "../Empty";
 import ErrorBoundary from "../ErrorBoundary";
 import Flex from "../Flex";
@@ -21,6 +20,55 @@ import Tooltip from "../Tooltip";
 import NotificationListItem from "./NotificationListItem";
 import { HStack } from "../primitives/HStack";

+/**
+ * Hook that returns filtered notifications in a stable order. The order is
+ * snapshotted on first call (when the popover mounts) so that toggling
+ * read/unread does not cause items to jump positions. Notifications that
+ * arrive after the snapshot are prepended at the top.
+ *
+ * @param active - the current list of active notifications.
+ * @param filter - the selected notification filter category.
+ * @returns filtered notifications in snapshot order.
+ */
+function useStableOrderedNotifications(
+  active: Notification[],
+  filter: NotificationFilter
+) {
+  const orderSnapshotRef = React.useRef<string[] | null>(null);
+
+  return React.useMemo(() => {
+    if (orderSnapshotRef.current === null) {
+      orderSnapshotRef.current = active.map((n) => n.id);
+    }
+
+    const filtered =
+      filter === "all"
+        ? active
+        : active.filter((notification) =>
+            Notification.filterCategories[filter].includes(notification.event)
+          );
+
+    const snapshot = orderSnapshotRef.current;
+    const orderMap = new Map(snapshot.map((id, index) => [id, index]));
+    const inSnapshot: Notification[] = [];
+    const newItems: Notification[] = [];
+
+    for (const notification of filtered) {
+      if (orderMap.has(notification.id)) {
+        inSnapshot.push(notification);
+      } else {
+        newItems.push(notification);
+      }
+    }
+
+    inSnapshot.sort(
+      (a, b) => (orderMap.get(a.id) ?? 0) - (orderMap.get(b.id) ?? 0)
+    );
+
+    return [...newItems, ...inSnapshot];
+  }, [active, filter]);
+}
+
 type Props = {
  /** Callback when the notification panel wants to close. */
  onRequestClose: () => void;
@@ -50,36 +98,12 @@ function Notifications(
    [t]
  );

-  const filteredNotifications = React.useMemo(() => {
-    if (filter === "all") {
-      return notifications.active;
-    }
+  const filteredNotifications = useStableOrderedNotifications(
+    notifications.active,
+    filter
+  );

-    const eventTypes = Notification.filterCategories[filter];
-    return notifications.active.filter((notification) =>
-      eventTypes.includes(notification.event)
-    );
-  }, [notifications.active, filter]);
-
-  // Update the notification count in the dock icon, if possible.
-  React.useEffect(() => {
-    // Account for old versions of the desktop app that don't have the
-    // setNotificationCount method on the bridge.
-    if (Desktop.bridge && "setNotificationCount" in Desktop.bridge) {
-      void Desktop.bridge.setNotificationCount(
-        notifications.approximateUnreadCount
-      );
-    }
-
-    // PWA badging
-    if ("setAppBadge" in navigator) {
-      if (notifications.approximateUnreadCount) {
-        void navigator.setAppBadge(notifications.approximateUnreadCount);
-      } else {
-        void navigator.clearAppBadge();
-      }
-    }
-  }, [notifications.approximateUnreadCount]);
+  const unreadCount = notifications.approximateUnreadCount;

  return (
    <ErrorBoundary>
@@ -105,7 +129,7 @@ function Notifications(
              short
              nude
            />
-            {notifications.approximateUnreadCount > 0 && (
+            {unreadCount > 0 && (
              <Tooltip content={t("Mark all as read")}>
                <Button
                  action={markNotificationsAsRead}
@@ -49,7 +49,6 @@ const PaginatedDocumentList = React.memo<Props>(function PaginatedDocumentList({
          showParentDocuments={showParentDocuments}
          showCollection={showCollection}
          showPublished={showPublished}
-          showTemplate={showTemplate}
          showDraft={showDraft}
        />
      )}
@@ -125,7 +125,7 @@ const RevisionListItem = ({ item, document, ...rest }: Props) => {
  }

  return (
-    <ActionContextProvider value={{ activeDocumentId: document.id }}>
+    <ActionContextProvider value={{ activeModels: [document] }}>
      <ContextMenu
        action={contextMenuAction}
        ariaLabel={t("Revision options")}
@@ -0,0 +1,57 @@
+import * as React from "react";
+
+type SetSidebarFn = (content: React.ReactNode) => void;
+
+const RightSidebarSetterContext = React.createContext<SetSidebarFn | null>(
+  null
+);
+const RightSidebarContentContext = React.createContext<React.ReactNode>(null);
+
+/**
+ * Provider that holds right sidebar content state. Wrap at the layout level
+ * so that scenes can set sidebar content via the setter hook.
+ */
+export function RightSidebarProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [content, setContent] = React.useState<React.ReactNode>(null);
+
+  return (
+    <RightSidebarSetterContext.Provider value={setContent}>
+      <RightSidebarContentContext.Provider value={content}>
+        {children}
+      </RightSidebarContentContext.Provider>
+    </RightSidebarSetterContext.Provider>
+  );
+}
+
+/**
+ * Returns a stable setter function to set the right sidebar content.
+ * Used by scenes (e.g. Document) to populate the sidebar.
+ */
+export function useSetRightSidebar(): SetSidebarFn {
+  const setter = React.useContext(RightSidebarSetterContext);
+  if (!setter) {
+    throw new Error(
+      "useSetRightSidebar must be used within a RightSidebarProvider"
+    );
+  }
+  return setter;
+}
+
+/**
+ * Returns the current right sidebar content. Used by Layout to render
+ * the sidebar.
+ */
+export function useRightSidebarContent(): React.ReactNode {
+  return React.useContext(RightSidebarContentContext);
+}
+
+/**
+ * Context indicating whether the Right sidebar wrapper is already rendered
+ * by an ancestor. When true, SidebarLayout skips rendering its own Right
+ * wrapper to avoid duplicate animated containers.
+ */
+export const RightSidebarWrappedContext = React.createContext(false);
@@ -16,6 +16,7 @@ import {
 import { id as bodyContentId } from "~/components/SkipNavContent";
 import useKeyDown from "~/hooks/useKeyDown";
 import useStores from "~/hooks/useStores";
+import { preventDefault } from "~/utils/events";
 import type { SearchResult } from "~/types";
 import SearchListItem from "./SearchListItem";

@@ -28,73 +29,112 @@ function SearchPopover({ shareId, className }: Props) {
  const { t } = useTranslation();
  const { documents } = useStores();
  const focusRef = React.useRef<HTMLElement | null>(null);
+  const searchInputRef = React.useRef<HTMLInputElement>(null);
+  const firstSearchItem = React.useRef<HTMLAnchorElement>(null);

  const [open, setOpen] = React.useState(false);
  const [query, setQuery] = React.useState("");
-
  const [searchResults, setSearchResults] = React.useState<
    SearchResult[] | undefined
  >();
-  const [cachedQuery, setCachedQuery] = React.useState(query);
-  const [cachedSearchResults, setCachedSearchResults] = React.useState<
-    SearchResult[] | undefined
-  >(searchResults);

+  // Cache search results by query string to avoid redundant API calls
+  const cacheRef = React.useRef(new Map<string, SearchResult[]>());
+  const queryRef = React.useRef(query);
+  queryRef.current = query;
+
+  // When the query changes, restore cached results (including empty) or keep
+  // previous results visible until new results arrive to avoid layout shift
  React.useEffect(() => {
-    if (searchResults) {
-      setCachedQuery(query);
-      setCachedSearchResults(searchResults);
-      setOpen(true);
+    if (!query) {
+      setSearchResults(undefined);
+      return;
    }
-  }, [searchResults, query]);

-  // Clear search results when the query changes to prevent stale results
-  React.useEffect(() => {
-    setSearchResults(undefined);
+    const cached = cacheRef.current.get(query);
+    if (cached !== undefined) {
+      setSearchResults(cached);
+      if (cached.length) {
+        setOpen(true);
+      }
+    }
  }, [query]);

  const performSearch = React.useCallback(
-    async ({ query: searchQuery, ...options }) => {
-      if (searchQuery?.length > 0) {
-        const response = await documents.search({
-          query: searchQuery,
-          shareId,
-          ...options,
-        });
-
-        if (response.length) {
-          setSearchResults((state) => [...(state ?? []), ...response]);
-        }
-
-        return response;
+    async ({
+      query: searchQuery,
+      offset = 0,
+      ...options
+    }: Record<string, any>) => {
+      if (!searchQuery?.length) {
+        return undefined;
      }
-      return undefined;
+
+      // Return cached results for first-page lookups
+      if (offset === 0 && cacheRef.current.has(searchQuery)) {
+        return cacheRef.current.get(searchQuery)!;
+      }
+
+      // Force offset to 0 for new queries — PaginatedList's reset() sets
+      // offset via setState but fetchResults still uses the stale value
+      // from its closure
+      if (!cacheRef.current.has(searchQuery)) {
+        offset = 0;
+      }
+
+      const response = await documents.search({
+        query: searchQuery,
+        shareId,
+        offset,
+        ...options,
+      });
+
+      // Build complete result set in cache: replace for new queries, append
+      // for pagination of an existing query
+      const existing = cacheRef.current.get(searchQuery);
+      cacheRef.current.set(
+        searchQuery,
+        existing ? [...existing, ...response] : response
+      );
+
+      // Only update state if this query is still current to prevent stale
+      // results from overwriting newer results after a race condition
+      if (queryRef.current === searchQuery) {
+        setSearchResults(cacheRef.current.get(searchQuery)!);
+        setOpen(true);
+      }
+
+      return response;
    },
    [documents, shareId]
  );

-  const handleSearchInputChange = React.useMemo(
+  const debouncedSetQuery = React.useMemo(
    () =>
-      debounce(async (event: React.ChangeEvent<HTMLInputElement>) => {
-        const { value } = event.target;
-        const trimmedValue = value.trim();
-        setQuery(trimmedValue);
-        setOpen(!!trimmedValue);
-      }, 300),
-    [cachedQuery]
+      debounce((value: string) => {
+        setQuery(value);
+        setOpen(!!value);
+      }, 250),
+    []
  );

-  const searchInputRef = React.useRef<HTMLInputElement>(null);
-  const firstSearchItem = React.useRef<HTMLAnchorElement>(null);
+  const handleSearchInputChange = React.useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      debouncedSetQuery(event.target.value.trim());
+    },
+    [debouncedSetQuery]
+  );
+
+  React.useEffect(() => () => debouncedSetQuery.cancel(), [debouncedSetQuery]);

  const handleEscapeList = React.useCallback(
-    () => searchInputRef?.current?.focus(),
-    [searchInputRef]
+    () => searchInputRef.current?.focus(),
+    []
  );

  const handleSearchInputFocus = React.useCallback(() => {
    focusRef.current = searchInputRef.current;
-  }, [searchInputRef]);
+  }, []);

  const handleKeyDown = React.useCallback(
    (ev: React.KeyboardEvent<HTMLInputElement>) => {
@@ -106,6 +146,7 @@ function SearchPopover({ shareId, className }: Props) {
        if (searchResults) {
          setOpen(true);
        }
+        return;
      }

      if (ev.key === "ArrowDown" && !ev.shiftKey) {
@@ -116,12 +157,12 @@ function SearchPopover({ shareId, className }: Props) {
          if (atEnd) {
            setOpen(true);
          }
-
          if (open || atEnd) {
            ev.preventDefault();
            firstSearchItem.current?.focus();
          }
        }
+        return;
      }

      if (ev.key === "ArrowUp") {
@@ -131,21 +172,17 @@ function SearchPopover({ shareId, className }: Props) {
            ev.preventDefault();
          }
        }
-
-        if (ev.currentTarget.value) {
-          if (ev.currentTarget.selectionEnd === 0) {
-            ev.currentTarget.selectionStart = 0;
-            ev.currentTarget.selectionEnd = ev.currentTarget.value.length;
-            ev.preventDefault();
-          }
-        }
-      }
-
-      if (ev.key === "Escape") {
-        if (open) {
-          setOpen(false);
+        if (ev.currentTarget.value && ev.currentTarget.selectionEnd === 0) {
+          ev.currentTarget.selectionStart = 0;
+          ev.currentTarget.selectionEnd = ev.currentTarget.value.length;
          ev.preventDefault();
        }
+        return;
+      }
+
+      if (ev.key === "Escape" && open) {
+        setOpen(false);
+        ev.preventDefault();
      }
    },
    [open, searchResults]
@@ -153,11 +190,12 @@ function SearchPopover({ shareId, className }: Props) {

  const handleSearchItemClick = React.useCallback(() => {
    setOpen(false);
+    setQuery("");
    if (searchInputRef.current) {
      searchInputRef.current.value = "";
      focusRef.current = document.getElementById(bodyContentId);
    }
-  }, [searchInputRef]);
+  }, []);

  useKeyDown("/", (ev) => {
    if (
@@ -193,7 +231,7 @@ function SearchPopover({ shareId, className }: Props) {
        align="start"
        shrink
        onEscapeKeyDown={handleEscapeList}
-        onOpenAutoFocus={(e) => e.preventDefault()}
+        onOpenAutoFocus={preventDefault}
        onInteractOutside={(event) => {
          const target = event.target as Element | null;
          if (target === searchInputRef.current) {
@@ -203,8 +241,13 @@ function SearchPopover({ shareId, className }: Props) {
      >
        <PaginatedList<SearchResult>
          role="listbox"
-          options={{ query, snippetMinWords: 10, snippetMaxWords: 11 }}
-          items={cachedSearchResults}
+          options={{
+            query,
+            snippetMinWords: 10,
+            snippetMaxWords: 11,
+            limit: 10,
+          }}
+          items={searchResults}
          fetch={performSearch}
          onEscape={handleEscapeList}
          empty={
@@ -218,7 +261,7 @@ function SearchPopover({ shareId, className }: Props) {
              ref={index === 0 ? firstSearchItem : undefined}
              document={item.document}
              context={item.context}
-              highlight={cachedQuery}
+              highlight={query}
              onClick={handleSearchItemClick}
            />
          )}
@@ -89,7 +89,11 @@ function DocumentMemberList({ document, invitedInSession }: Props) {
  const members = React.useMemo(
    () =>
      orderBy(
-        document.members,
+        Array.from(
+          new Map(
+            document.members.map((memberUser) => [memberUser.id, memberUser])
+          ).values()
+        ),
        (memberUser) =>
          (invitedInSession.includes(memberUser.id) ? "_" : "") +
          memberUser.name.toLocaleLowerCase(),
@@ -124,12 +128,19 @@ function DocumentMemberList({ document, invitedInSession }: Props) {

  return (
    <>
-      {groupMemberships
-        .inDocument(document.id)
+      {Array.from(
+        new Map(
+          groupMemberships
+            .inDocument(document.id)
+            .map((membership) => [membership.group.id, membership])
+        ).values()
+      )
        .sort((a, b) =>
          (
            (invitedInSession.includes(a.group.id) ? "_" : "") + a.group.name
-          ).localeCompare(b.group.name)
+          ).localeCompare(
+            (invitedInSession.includes(b.group.id) ? "_" : "") + b.group.name
+          )
        )
        .map((membership) => {
          const MaybeLink = membership?.source ? StyledLink : React.Fragment;
@@ -193,8 +193,8 @@ export const Suggestions = observer(
            ...pending.map((suggestion) => (
              <PendingListItem
                keyboardNavigation
-                {...getListItemProps(suggestion)}
                key={suggestion.id}
+                {...getListItemProps(suggestion)}
                onClick={() => removePendingId(suggestion.id)}
                onKeyDown={(ev) => {
                  if (ev.key === "Enter") {
@@ -212,12 +212,14 @@ export const Suggestions = observer(
              />
            )),
            pending.length > 0 &&
-              (suggestionsWithPending.length > 0 || isEmpty) && <Separator />,
+              (suggestionsWithPending.length > 0 || isEmpty) && (
+                <Separator key="separator" />
+              ),
            ...suggestionsWithPending.map((suggestion) => (
              <ListItem
                keyboardNavigation
-                {...getListItemProps(suggestion as User)}
                key={suggestion.id}
+                {...getListItemProps(suggestion as User)}
                onClick={() => addPendingId(suggestion.id)}
                onKeyDown={(ev) => {
                  if (ev.key === "Enter") {
@@ -230,7 +232,9 @@ export const Suggestions = observer(
              />
            )),
            isEmpty && (
-              <Empty style={{ marginTop: 22 }}>{t("No matches")}</Empty>
+              <Empty key="empty" style={{ marginTop: 22 }}>
+                {t("No matches")}
+              </Empty>
            ),
          ]}
        </ArrowKeyNavigation>
@@ -8,19 +8,23 @@ import ErrorBoundary from "~/components/ErrorBoundary";
 import Flex from "~/components/Flex";
 import ResizeBorder from "~/components/Sidebar/components/ResizeBorder";
 import useStores from "~/hooks/useStores";
+import useWindowScrollbarWidth from "~/hooks/useWindowScrollbarWidth";
 import { sidebarAppearDuration } from "~/styles/animations";

 interface Props extends React.HTMLAttributes<HTMLDivElement> {
  children: React.ReactNode;
  border?: boolean;
+  /** When true, skip the entrance animation and render at full width immediately. */
+  skipInitialAnimation?: boolean;
 }

-function Right({ children, border, className }: Props) {
+function Right({ children, border, className, skipInitialAnimation }: Props) {
  const theme = useTheme();
  const { ui } = useStores();
  const [isResizing, setResizing] = React.useState(false);
  const maxWidth = theme.sidebarMaxWidth;
  const minWidth = theme.sidebarMinWidth + 16; // padding
+  const windowScrollbarWidth = useWindowScrollbarWidth();

  const handleDrag = React.useCallback(
    (event: MouseEvent) => {
@@ -67,16 +71,20 @@ function Right({ children, border, className }: Props) {

  const style = React.useMemo(
    () => ({
-      width: `${ui.sidebarRightWidth}px`,
+      width: windowScrollbarWidth
+        ? `${ui.sidebarRightWidth - windowScrollbarWidth}px`
+        : `${ui.sidebarRightWidth}px`,
    }),
-    [ui.sidebarRightWidth]
+    [ui.sidebarRightWidth, windowScrollbarWidth]
  );

  const animationProps = {
-    initial: {
-      width: 0,
-      opacity: 0.9,
-    },
+    initial: skipInitialAnimation
+      ? false
+      : {
+          width: 0,
+          opacity: 0.9,
+        },
    animate: {
      transition: isResizing
        ? { duration: 0 }
@@ -1,7 +1,6 @@
 import { observer } from "mobx-react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
-import { hover } from "@shared/styles";
 import type Share from "~/models/Share";
 import Flex from "~/components/Flex";
 import Scrollable from "~/components/Scrollable";
@@ -48,7 +47,7 @@ function SharedSidebar({ share }: Props) {
  }

  return (
-    <StyledSidebar $hoverTransition={!teamAvailable} canCollapse={false}>
+    <Sidebar canCollapse={false}>
      {teamAvailable && (
        <SidebarButton
          title={team.name}
@@ -90,7 +89,7 @@ function SharedSidebar({ share }: Props) {
          )}
        </Section>
      </ScrollContainer>
-    </StyledSidebar>
+    </Sidebar>
  );
 }

@@ -113,33 +112,4 @@ const StyledSearchPopover = styled(SearchPopover)`
  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 &&
-    `
-      @media (hover: hover) {
-        &:${hover} {
-        ${StyledSearchPopover} {
-          width: 85%;
-        }
-
-        ${ToggleWrapper} {
-          opacity: 1;
-          transform: translateX(0);
-          }
-        }
-      }
-    `}
-`;
-
 export default observer(SharedSidebar);
@@ -15,6 +15,7 @@ import EditableTitle from "~/components/EditableTitle";
 import Fade from "~/components/Fade";
 import CollectionIcon from "~/components/Icons/CollectionIcon";
 import NudeButton from "~/components/NudeButton";
+import Tooltip from "~/components/Tooltip";
 import useBoolean from "~/hooks/useBoolean";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import usePolicy from "~/hooks/usePolicy";
@@ -122,10 +123,11 @@ const CollectionLink: React.FC<Props> = ({

  const contextMenuAction = useCollectionMenuAction({
    collectionId: collection.id,
+    onRename: handleRename,
  });

  return (
-    <ActionContextProvider value={{ activeCollectionId: collection.id }}>
+    <ActionContextProvider value={{ activeModels: [collection] }}>
      <Relative ref={mergeRefs([parentRef, dropRef])}>
        <DropToImport collectionId={collection.id}>
          <SidebarLink
@@ -141,7 +143,7 @@ const CollectionLink: React.FC<Props> = ({
            icon={
              <CollectionIcon collection={collection} expanded={expanded} />
            }
-            showActions={menuOpen}
+            $showActions={menuOpen}
            isActiveDrop={isOver && canDrop}
            isActive={(
              match,
@@ -165,17 +167,18 @@ const CollectionLink: React.FC<Props> = ({
              !isDraggingAnyCollection && (
                <Fade>
                  {can.createDocument && (
-                    <NudeButton
-                      tooltip={{ content: t("New doc"), delay: 500 }}
-                      aria-label={t("New nested document")}
-                      onClick={(ev) => {
-                        ev.preventDefault();
-                        setIsAddingNewChild();
-                        handleExpand();
-                      }}
-                    >
-                      <PlusIcon />
-                    </NudeButton>
+                    <Tooltip content={t("New doc")} delay={500}>
+                      <NudeButton
+                        aria-label={t("New nested document")}
+                        onClick={(ev) => {
+                          ev.preventDefault();
+                          setIsAddingNewChild();
+                          handleExpand();
+                        }}
+                      >
+                        <PlusIcon />
+                      </NudeButton>
+                    </Tooltip>
                  )}
                  <CollectionMenu
                    collection={collection}
@@ -40,6 +40,10 @@ import type UserMembership from "~/models/UserMembership";
 import type GroupMembership from "~/models/GroupMembership";
 import { ActionContextProvider } from "~/hooks/useActionContext";
 import { useDocumentMenuAction } from "~/hooks/useDocumentMenuAction";
+import SidebarDisclosureContext, {
+  useSidebarDisclosure,
+  useSidebarDisclosureState,
+} from "./SidebarDisclosureContext";

 type Props = {
  node: NavigationNode;
@@ -119,6 +123,13 @@ function InnerDocumentLink(

  const [expanded, setExpanded, setCollapsed] = useBoolean(showChildren);

+  // Context-based recursive expand/collapse for descendant DocumentLinks
+  const { event: disclosureEvent, onDisclosureClick } =
+    useSidebarDisclosureState();
+
+  // Subscribe to recursive expand/collapse events from an ancestor
+  useSidebarDisclosure(setExpanded, setCollapsed);
+
  React.useEffect(() => {
    if (showChildren) {
      setExpanded();
@@ -132,13 +143,18 @@ function InnerDocumentLink(
    }
  }, [setCollapsed, expanded, hasChildDocuments]);

-  const handleDisclosureClick = React.useCallback(() => {
-    if (expanded) {
-      setCollapsed();
-    } else {
-      setExpanded();
-    }
-  }, [setCollapsed, setExpanded, expanded]);
+  const handleDisclosureClick = React.useCallback(
+    (ev: React.MouseEvent<HTMLElement>) => {
+      const willExpand = !expanded;
+      if (willExpand) {
+        setExpanded();
+      } else {
+        setCollapsed();
+      }
+      onDisclosureClick(willExpand, ev.altKey);
+    },
+    [setCollapsed, setExpanded, expanded, onDisclosureClick]
+  );

  const handlePrefetch = React.useCallback(() => {
    void prefetchDocument?.(node.id);
@@ -336,7 +352,10 @@ function InnerDocumentLink(
    ]
  );

-  const contextMenuAction = useDocumentMenuAction({ documentId: node.id });
+  const contextMenuAction = useDocumentMenuAction({
+    documentId: node.id,
+    onRename: handleRename,
+  });

  const labelElement = React.useMemo(
    () => (
@@ -397,7 +416,7 @@ function InnerDocumentLink(
  return (
    <ActionContextProvider
      value={{
-        activeDocumentId: node.id,
+        activeModels: document ? [document] : [],
      }}
    >
      <Relative ref={parentRef}>
@@ -432,7 +451,7 @@ function InnerDocumentLink(
                isActiveDrop={isOverReparent && canDropToReparent}
                depth={depth}
                exact={false}
-                showActions={menuOpen}
+                $showActions={menuOpen}
                scrollIntoViewIfNeeded={sidebarContext === "collections"}
                isDraft={isDraft}
                ref={ref}
@@ -464,22 +483,24 @@ function InnerDocumentLink(
          }
        />
      )}
-      <Folder expanded={expanded && !isDragging}>
-        {nodeChildren.map((childNode, childIndex) => (
-          <DocumentLink
-            key={childNode.id}
-            collection={collection}
-            membership={membership}
-            node={childNode}
-            activeDocument={activeDocument}
-            prefetchDocument={prefetchDocument}
-            isDraft={childNode.isDraft}
-            depth={depth + 1}
-            index={childIndex}
-            parentId={node.id}
-          />
-        ))}
-      </Folder>
+      <SidebarDisclosureContext.Provider value={disclosureEvent}>
+        <Folder expanded={expanded && !isDragging}>
+          {nodeChildren.map((childNode, childIndex) => (
+            <DocumentLink
+              key={childNode.id}
+              collection={collection}
+              membership={membership}
+              node={childNode}
+              activeDocument={activeDocument}
+              prefetchDocument={prefetchDocument}
+              isDraft={childNode.isDraft}
+              depth={depth + 1}
+              index={childIndex}
+              parentId={node.id}
+            />
+          ))}
+        </Folder>
+      </SidebarDisclosureContext.Provider>
    </ActionContextProvider>
  );
 }
@@ -13,6 +13,9 @@ import useStores from "~/hooks/useStores";
 import type { DragObject } from "../hooks/useDragAndDrop";
 import CollectionLink from "./CollectionLink";
 import DropCursor from "./DropCursor";
+import SidebarDisclosureContext, {
+  useSidebarDisclosureState,
+} from "./SidebarDisclosureContext";
 import Relative from "./Relative";
 import { useSidebarContext } from "./SidebarContext";

@@ -36,6 +39,10 @@ function DraggableCollectionLink({
  );
  const belowCollectionIndex = belowCollection ? belowCollection.index : null;

+  // Context-based recursive expand/collapse for descendant DocumentLinks
+  const { event: disclosureEvent, onDisclosureClick } =
+    useSidebarDisclosureState();
+
  // Drop to reorder collection
  const [
    { isCollectionDropping, isDraggingAnyCollection },
@@ -91,15 +98,22 @@ function DraggableCollectionLink({
    locationSidebarContext,
  ]);

-  const handleDisclosureClick = useCallback((ev) => {
-    ev?.preventDefault();
-    setExpanded((e) => !e);
-  }, []);
+  const handleDisclosureClick = useCallback(
+    (ev) => {
+      ev?.preventDefault();
+      setExpanded((e) => {
+        const willExpand = !e;
+        onDisclosureClick(willExpand, !!ev?.altKey);
+        return willExpand;
+      });
+    },
+    [onDisclosureClick]
+  );

  const displayChildDocuments = expanded && !isDragging;

  return (
-    <>
+    <SidebarDisclosureContext.Provider value={disclosureEvent}>
      <Draggable
        key={collection.id}
        ref={dragToReorderCollection}
@@ -121,7 +135,7 @@ function DraggableCollectionLink({
          />
        )}
      </Relative>
-    </>
+    </SidebarDisclosureContext.Provider>
  );
 }

@@ -7,6 +7,9 @@ import Folder from "./Folder";
 import Relative from "./Relative";
 import SharedWithMeLink from "./SharedWithMeLink";
 import SidebarContext, { groupSidebarContext } from "./SidebarContext";
+import SidebarDisclosureContext, {
+  useSidebarDisclosureState,
+} from "./SidebarDisclosureContext";
 import SidebarLink from "./SidebarLink";

 type Props = {
@@ -21,10 +24,20 @@ const GroupLink: React.FC<Props> = ({ group }) => {
    locationSidebarContext === sidebarContext
  );

-  const handleDisclosureClick = React.useCallback((ev) => {
-    ev?.preventDefault();
-    setExpanded((e) => !e);
-  }, []);
+  const { event: disclosureEvent, onDisclosureClick } =
+    useSidebarDisclosureState();
+
+  const handleDisclosureClick = React.useCallback(
+    (ev) => {
+      ev?.preventDefault();
+      setExpanded((e) => {
+        const willExpand = !e;
+        onDisclosureClick(willExpand, !!ev?.altKey);
+        return willExpand;
+      });
+    },
+    [onDisclosureClick]
+  );

  React.useEffect(() => {
    if (locationSidebarContext === sidebarContext) {
@@ -42,15 +55,17 @@ const GroupLink: React.FC<Props> = ({ group }) => {
        depth={0}
      />
      <SidebarContext.Provider value={sidebarContext}>
-        <Folder expanded={expanded}>
-          {group.documentMemberships.map((membership) => (
-            <SharedWithMeLink
-              key={membership.id}
-              membership={membership}
-              depth={1}
-            />
-          ))}
-        </Folder>
+        <SidebarDisclosureContext.Provider value={disclosureEvent}>
+          <Folder expanded={expanded}>
+            {group.documentMemberships.map((membership) => (
+              <SharedWithMeLink
+                key={membership.id}
+                membership={membership}
+                depth={1}
+              />
+            ))}
+          </Folder>
+        </SidebarDisclosureContext.Provider>
      </SidebarContext.Provider>
    </Relative>
  );
@@ -9,6 +9,10 @@ import type Document from "~/models/Document";
 import useStores from "~/hooks/useStores";
 import { sharedModelPath } from "~/utils/routeHelpers";
 import { descendants } from "@shared/utils/tree";
+import SidebarDisclosureContext, {
+  useSidebarDisclosure,
+  useSidebarDisclosureState,
+} from "./SidebarDisclosureContext";
 import SidebarLink from "./SidebarLink";

 type Props = {
@@ -62,6 +66,14 @@ function DocumentLink(

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

+  const { event: disclosureEvent, onDisclosureClick } =
+    useSidebarDisclosureState();
+
+  const handleExpand = React.useCallback(() => setExpanded(true), []);
+  const handleCollapse = React.useCallback(() => setExpanded(false), []);
+
+  useSidebarDisclosure(handleExpand, handleCollapse);
+
  React.useEffect(() => {
    if (showChildren) {
      setExpanded(showChildren);
@@ -72,9 +84,12 @@ function DocumentLink(
    (ev: React.SyntheticEvent) => {
      ev.preventDefault();
      ev.stopPropagation();
-      setExpanded(!expanded);
+      const willExpand = !expanded;
+      setExpanded(willExpand);
+      const altKey = "altKey" in ev && (ev as React.MouseEvent).altKey;
+      onDisclosureClick(willExpand, !!altKey);
    },
-    [expanded]
+    [expanded, onDisclosureClick]
  );

  // since we don't have access to the collection sort here, we just put any
@@ -133,22 +148,24 @@ function DocumentLink(
        ref={ref}
        isActive={() => !!isActiveDocument}
      />
-      {expanded &&
-        nodeChildren.map((childNode, index) => (
-          <SharedDocumentLink
-            shareId={shareId}
-            key={childNode.id}
-            collection={collection}
-            node={childNode}
-            activeDocumentId={activeDocumentId}
-            activeDocument={activeDocument}
-            prefetchDocument={prefetchDocument}
-            isDraft={childNode.isDraft}
-            depth={depth + 1}
-            index={index}
-            parentId={node.id}
-          />
-        ))}
+      <SidebarDisclosureContext.Provider value={disclosureEvent}>
+        {expanded &&
+          nodeChildren.map((childNode, index) => (
+            <SharedDocumentLink
+              shareId={shareId}
+              key={childNode.id}
+              collection={collection}
+              node={childNode}
+              activeDocumentId={activeDocumentId}
+              activeDocument={activeDocument}
+              prefetchDocument={prefetchDocument}
+              isDraft={childNode.isDraft}
+              depth={depth + 1}
+              index={index}
+              parentId={node.id}
+            />
+          ))}
+      </SidebarDisclosureContext.Provider>
    </>
  );
 }
@@ -22,6 +22,10 @@ import DocumentLink from "./DocumentLink";
 import DropCursor from "./DropCursor";
 import Folder from "./Folder";
 import Relative from "./Relative";
+import SidebarDisclosureContext, {
+  useSidebarDisclosure,
+  useSidebarDisclosureState,
+} from "./SidebarDisclosureContext";
 import { useSidebarContext, type SidebarContextType } from "./SidebarContext";
 import SidebarLink from "./SidebarLink";

@@ -48,6 +52,12 @@ function SharedWithMeLink({ membership, depth = 0 }: Props) {
    isActiveDocumentInPath && locationSidebarContext === sidebarContext
  );

+  const { event: disclosureEvent, onDisclosureClick } =
+    useSidebarDisclosureState();
+
+  // Subscribe to recursive expand/collapse events from an ancestor (e.g. GroupLink)
+  useSidebarDisclosure(setExpanded, setCollapsed);
+
  React.useEffect(() => {
    if (isActiveDocumentInPath && locationSidebarContext === sidebarContext) {
      setExpanded();
@@ -76,13 +86,15 @@ function SharedWithMeLink({ membership, depth = 0 }: Props) {
    (ev: React.MouseEvent<HTMLButtonElement>) => {
      ev.preventDefault();
      ev.stopPropagation();
-      if (expanded) {
-        setCollapsed();
-      } else {
+      const willExpand = !expanded;
+      if (willExpand) {
        setExpanded();
+      } else {
+        setCollapsed();
      }
+      onDisclosureClick(willExpand, ev.altKey);
    },
-    [expanded, setExpanded, setCollapsed]
+    [expanded, setExpanded, setCollapsed, onDisclosureClick]
  );

  const parentRef = React.useRef<HTMLDivElement>(null);
@@ -158,7 +170,7 @@ function SharedWithMeLink({ membership, depth = 0 }: Props) {
                      NotificationEventType.AddUserToDocument
                  ).length > 0
                }
-                showActions={menuOpen}
+                $showActions={menuOpen}
                menu={
                  document && !isDragging ? (
                    <Fade>
@@ -174,20 +186,22 @@ function SharedWithMeLink({ membership, depth = 0 }: Props) {
            </div>
          </Draggable>
        </Relative>
-        <Folder expanded={displayChildDocuments}>
-          {childDocuments.map((childNode, index) => (
-            <DocumentLink
-              key={childNode.id}
-              node={childNode}
-              collection={collection}
-              membership={membership}
-              activeDocument={documents.active}
-              isDraft={childNode.isDraft}
-              depth={2}
-              index={index}
-            />
-          ))}
-        </Folder>
+        <SidebarDisclosureContext.Provider value={disclosureEvent}>
+          <Folder expanded={displayChildDocuments}>
+            {childDocuments.map((childNode, index) => (
+              <DocumentLink
+                key={childNode.id}
+                node={childNode}
+                collection={collection}
+                membership={membership}
+                activeDocument={documents.active}
+                isDraft={childNode.isDraft}
+                depth={2}
+                index={index}
+              />
+            ))}
+          </Folder>
+        </SidebarDisclosureContext.Provider>
        {reorderProps.isDragging && (
          <DropCursor
            isActiveDrop={reorderProps.isOverCursor}
@@ -1,4 +1,5 @@
 import { MoreIcon } from "outline-icons";
+import { observer } from "mobx-react";
 import * as React from "react";
 import styled from "styled-components";
 import { extraArea, hover, s } from "@shared/styles";
@@ -18,44 +19,46 @@ export type SidebarButtonProps = React.ComponentProps<typeof Button> & {
  children?: React.ReactNode;
 };

-const SidebarButton = React.forwardRef<HTMLButtonElement, SidebarButtonProps>(
-  function SidebarButton_(
-    {
-      position = "top",
-      showMoreMenu,
-      image,
-      title,
-      children,
-      onClick,
-      ...rest
-    }: SidebarButtonProps,
-    ref
-  ) {
-    return (
-      <Container
-        justify="space-between"
-        align="center"
-        shrink={false}
-        $position={position}
-      >
-        <Button
-          {...rest}
-          onClick={onClick}
+const SidebarButton = observer(
+  React.forwardRef<HTMLButtonElement, SidebarButtonProps>(
+    function SidebarButton_(
+      {
+        position = "top",
+        showMoreMenu,
+        image,
+        title,
+        children,
+        onClick,
+        ...rest
+      }: SidebarButtonProps,
+      ref
+    ) {
+      return (
+        <Container
+          justify="space-between"
+          align="center"
+          shrink={false}
          $position={position}
-          as="button"
-          ref={ref}
-          role="button"
        >
-          <Content>
-            {image}
-            {title && <Title>{title}</Title>}
-          </Content>
-          {showMoreMenu && <StyledMoreIcon />}
-        </Button>
-        {children}
-      </Container>
-    );
-  }
+          <Button
+            {...rest}
+            onClick={onClick}
+            $position={position}
+            as="button"
+            ref={ref}
+            role="button"
+          >
+            <Content>
+              {image}
+              {title && <Title>{title}</Title>}
+            </Content>
+            {showMoreMenu && <StyledMoreIcon />}
+          </Button>
+          {children}
+        </Container>
+      );
+    }
+  )
 );

 const StyledMoreIcon = styled(MoreIcon)`
@@ -0,0 +1,127 @@
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+  useCallback,
+} from "react";
+
+/**
+ * Represents a recursive expand/collapse event broadcast through context.
+ */
+export interface SidebarDisclosureEvent {
+  /** Whether descendants should expand or collapse. */
+  action: "expand" | "collapse";
+  /**
+   * Monotonically increasing counter used to detect new events.
+   * Each increment represents a distinct user interaction.
+   */
+  generation: number;
+}
+
+/**
+ * Context for broadcasting recursive expand/collapse events from a parent
+ * (e.g. a collection or document disclosure toggle with alt-click) to all
+ * descendant DocumentLinks in the sidebar tree.
+ *
+ * The nearest provider determines the scope — only descendants within that
+ * provider react to the event. Each DocumentLink should both consume and
+ * provide this context so that alt-click at any level only affects its subtree.
+ */
+const SidebarDisclosureContext = createContext<SidebarDisclosureEvent | null>(
+  null
+);
+
+/**
+ * Hook that subscribes to recursive expand/collapse events from an ancestor
+ * provider. When a new event is detected, the appropriate callback is invoked.
+ *
+ * Newly mounted components will also react to the current event, which enables
+ * cascading: expanding a parent reveals children, which mount and see the
+ * expand event, then expand themselves to reveal grandchildren, and so on.
+ *
+ * @param onExpand - called when a recursive expand event is received.
+ * @param onCollapse - called when a recursive collapse event is received.
+ */
+export function useSidebarDisclosure(
+  onExpand: () => void,
+  onCollapse: () => void
+): void {
+  const event = useContext(SidebarDisclosureContext);
+  const lastHandledGeneration = useRef(-1);
+
+  useEffect(() => {
+    if (!event || event.generation === lastHandledGeneration.current) {
+      return;
+    }
+    lastHandledGeneration.current = event.generation;
+
+    if (event.action === "expand") {
+      onExpand();
+    } else {
+      onCollapse();
+    }
+  }, [event, onExpand, onCollapse]);
+}
+
+/**
+ * Hook for the producing side of the disclosure context. Returns the current
+ * event value (to pass to a Provider) and a single callback to handle
+ * alt-click expand/collapse broadcasts.
+ *
+ * This hook also reads the parent context and automatically forwards any
+ * incoming disclosure events so that the cascade propagates through the
+ * entire tree — even when intermediate nodes each create their own provider.
+ *
+ * @returns object with `event` to spread onto the Provider's value and
+ *   `onDisclosureClick` to call from disclosure click handlers.
+ */
+export function useSidebarDisclosureState() {
+  const parentEvent = useContext(SidebarDisclosureContext);
+  const [event, setEvent] = useState<SidebarDisclosureEvent | null>(null);
+  const lastForwardedParentGeneration = useRef(-1);
+
+  // Forward parent disclosure events into our own provider value so that
+  // grandchildren (and beyond) see the event even though each level creates
+  // its own independent provider.
+  useEffect(() => {
+    if (
+      !parentEvent ||
+      parentEvent.generation === lastForwardedParentGeneration.current
+    ) {
+      return;
+    }
+    lastForwardedParentGeneration.current = parentEvent.generation;
+    setEvent((prev) => ({
+      action: parentEvent.action,
+      generation: (prev?.generation ?? 0) + 1,
+    }));
+  }, [parentEvent]);
+
+  /**
+   * Call from a disclosure click handler after toggling expand/collapse state.
+   * When alt is held, broadcasts a recursive expand or collapse event to all
+   * descendants. Otherwise, clears any stale event.
+   *
+   * @param willExpand - whether the node is expanding or collapsing.
+   * @param altKey - whether the alt/option key was held during the click.
+   */
+  const onDisclosureClick = useCallback(
+    (willExpand: boolean, altKey: boolean) => {
+      if (altKey) {
+        setEvent((prev) => ({
+          action: willExpand ? "expand" : "collapse",
+          generation: (prev?.generation ?? 0) + 1,
+        }));
+      } else {
+        setEvent(null);
+      }
+    },
+    []
+  );
+
+  return { event, onDisclosureClick };
+}
+
+export default SidebarDisclosureContext;
@@ -40,7 +40,7 @@ type Props = Omit<NavLinkProps, "to"> & {
  /** Whether to show an unread badge indicator */
  unreadBadge?: boolean;
  /** Whether to show action buttons on hover */
-  showActions?: boolean;
+  $showActions?: boolean;
  /** Whether the link is disabled and non-interactive */
  disabled?: boolean;
  /** Whether the link is currently active */
@@ -81,7 +81,7 @@ function SidebarLink(
    isActiveDrop,
    isDraft,
    menu,
-    showActions,
+    $showActions,
    exact,
    href,
    depth,
@@ -183,7 +183,7 @@ function SidebarLink(
          {unreadBadge && <UnreadBadge style={unreadStyle} />}
        </Content>
      </ContextMenu>
-      {menu && <Actions showActions={showActions}>{menu}</Actions>}
+      {menu && <Actions $showActions={$showActions}>{menu}</Actions>}
    </Link>
  );
 }
@@ -205,9 +205,9 @@ const Content = styled.span`
  min-width: 0;
 `;

-const Actions = styled(EventBoundary)<{ showActions?: boolean }>`
+const Actions = styled(EventBoundary)<{ $showActions?: boolean }>`
  display: inline-flex;
-  visibility: ${(props) => (props.showActions ? "visible" : "hidden")};
+  visibility: ${(props) => (props.$showActions ? "visible" : "hidden")};
  position: absolute;
  top: 3px;
  right: 4px;
@@ -19,6 +19,9 @@ import {
 import { useSidebarLabelAndIcon } from "../hooks/useSidebarLabelAndIcon";
 import CollectionLink from "./CollectionLink";
 import DocumentLink from "./DocumentLink";
+import SidebarDisclosureContext, {
+  useSidebarDisclosureState,
+} from "./SidebarDisclosureContext";
 import DropCursor from "./DropCursor";
 import Folder from "./Folder";
 import Relative from "./Relative";
@@ -100,7 +103,7 @@ const StarredDocumentLink = observer(function StarredDocumentLink({
  return (
    <ActionContextProvider
      value={{
-        activeDocumentId: document.id,
+        activeModels: [document],
      }}
    >
      <Draggable key={star.id} ref={draggableRef} $isDragging={isDragging}>
@@ -121,7 +124,7 @@ const StarredDocumentLink = observer(function StarredDocumentLink({
          ) => !!match && location.state?.sidebarContext === sidebarContext}
          label={label}
          exact={false}
-          showActions={menuOpen}
+          $showActions={menuOpen}
          menu={
            document && !isDragging ? (
              <Fade>
@@ -204,6 +207,9 @@ function StarredLink({ star }: Props) {
      sidebarContext === locationSidebarContext
  );

+  const { event: disclosureEvent, onDisclosureClick } =
+    useSidebarDisclosureState();
+
  React.useEffect(() => {
    if (
      star.documentId === ui.activeDocumentId &&
@@ -235,9 +241,13 @@ function StarredLink({ star }: Props) {
    (ev?: React.MouseEvent<HTMLElement>) => {
      ev?.preventDefault();
      ev?.stopPropagation();
-      setExpanded((prevExpanded) => !prevExpanded);
+      setExpanded((prevExpanded) => {
+        const willExpand = !prevExpanded;
+        onDisclosureClick(willExpand, !!ev?.altKey);
+        return willExpand;
+      });
    },
-    []
+    [onDisclosureClick]
  );

  const handlePrefetch = React.useCallback(() => {
@@ -284,39 +294,43 @@ function StarredLink({ star }: Props) {

  if (documentId) {
    return (
-      <StarredDocumentLink
-        star={star}
-        documentId={documentId}
-        expanded={expanded}
-        sidebarContext={sidebarContext}
-        isDragging={isDragging}
-        handleDisclosureClick={handleDisclosureClick}
-        handlePrefetch={handlePrefetch}
-        icon={icon}
-        label={label}
-        menuOpen={menuOpen}
-        handleMenuOpen={handleMenuOpen}
-        handleMenuClose={handleMenuClose}
-        draggableRef={draggableRef}
-        cursor={cursor}
-      />
+      <SidebarDisclosureContext.Provider value={disclosureEvent}>
+        <StarredDocumentLink
+          star={star}
+          documentId={documentId}
+          expanded={expanded}
+          sidebarContext={sidebarContext}
+          isDragging={isDragging}
+          handleDisclosureClick={handleDisclosureClick}
+          handlePrefetch={handlePrefetch}
+          icon={icon}
+          label={label}
+          menuOpen={menuOpen}
+          handleMenuOpen={handleMenuOpen}
+          handleMenuClose={handleMenuClose}
+          draggableRef={draggableRef}
+          cursor={cursor}
+        />
+      </SidebarDisclosureContext.Provider>
    );
  }

  if (collection) {
    return (
-      <StarredCollectionLink
-        star={star}
-        collection={collection}
-        expanded={expanded}
-        sidebarContext={sidebarContext}
-        isDragging={isDragging}
-        handleDisclosureClick={handleDisclosureClick}
-        draggableRef={draggableRef}
-        cursor={cursor}
-        displayChildDocuments={displayChildDocuments}
-        reorderStarProps={reorderStarProps}
-      />
+      <SidebarDisclosureContext.Provider value={disclosureEvent}>
+        <StarredCollectionLink
+          star={star}
+          collection={collection}
+          expanded={expanded}
+          sidebarContext={sidebarContext}
+          isDragging={isDragging}
+          handleDisclosureClick={handleDisclosureClick}
+          draggableRef={draggableRef}
+          cursor={cursor}
+          displayChildDocuments={displayChildDocuments}
+          reorderStarProps={reorderStarProps}
+        />
+      </SidebarDisclosureContext.Provider>
    );
  }

@@ -37,8 +37,9 @@ function Star({ size, document, collection, color, ...rest }: Props) {
  return (
    <ActionContextProvider
      value={{
-        activeDocumentId: document?.id,
-        activeCollectionId: collection?.id,
+        activeModels: [document, collection].filter(
+          (m): m is Document | Collection => !!m
+        ),
      }}
    >
      <NudeButton
@@ -28,6 +28,7 @@ interface Props extends Omit<
  disabled?: boolean;
  /** Callback when the switch state changes */
  onChange?: (checked: boolean) => void;
+  inForm?: boolean;
 }

 function Switch(
@@ -35,6 +36,7 @@ function Switch(
    width = 32,
    height = 18,
    labelPosition = "left",
+    inForm = true,
    label,
    disabled,
    className,
@@ -71,7 +73,7 @@ function Switch(

  if (label) {
    return (
-      <Wrapper>
+      <Wrapper $inForm={inForm}>
        <Label
          disabled={disabled}
          htmlFor={props.id}
@@ -100,8 +102,8 @@ function Switch(
  return component;
 }

-const Wrapper = styled.div`
-  padding-bottom: 8px;
+const Wrapper = styled.div<{ $inForm?: boolean }>`
+  padding-bottom: ${(props) => (props.$inForm ? 8 : 0)}px;
  ${undraggableOnDesktop()}
 `;

@@ -95,6 +95,13 @@ const transition = {
  damping: 30,
 };

+/** Restrict shared layout animation to the X axis only. */
+const horizontalOnly = (transform: Record<string, string>, generated: string) =>
+  generated.replace(
+    /translate3d\(([^,]+),\s*[^,]+,\s*([^)]+)\)/,
+    "translate3d($1, 0px, $2)"
+  );
+
 const Tab: React.FC<Props> = (props: Props) => {
  const { children, exact, exactQueryString } = props;
  const theme = useTheme();
@@ -112,6 +119,7 @@ const Tab: React.FC<Props> = (props: Props) => {
            layoutId="underline"
            initial={false}
            transition={transition}
+            transformTemplate={horizontalOnly}
          />
        )}
      </TabButton>
@@ -140,6 +148,7 @@ const Tab: React.FC<Props> = (props: Props) => {
                layoutId="underline"
                initial={false}
                transition={transition}
+                transformTemplate={horizontalOnly}
              />
            )}
        </>
@@ -26,6 +26,7 @@ import Flex from "~/components/Flex";
 import NudeButton from "~/components/NudeButton";
 import PlaceholderText from "~/components/PlaceholderText";
 import usePrevious from "~/hooks/usePrevious";
+import { transparentize } from "polished";

 const HEADER_HEIGHT = 40;

@@ -59,6 +60,7 @@ export type Props<TData> = {
  };
  rowHeight: number;
  stickyOffset?: number;
+  decorateRow?: (item: TData, rowElement: React.ReactNode) => React.ReactNode;
 };

 function Table<TData>({
@@ -70,6 +72,7 @@ function Table<TData>({
  page,
  rowHeight,
  stickyOffset = 0,
+  decorateRow,
 }: Props<TData>) {
  const { t } = useTranslation();
  const virtualContainerRef = React.useRef<HTMLDivElement>(null);
@@ -206,7 +209,7 @@ function Table<TData>({
        >
          {rowVirtualizer.getVirtualItems().map((virtualRow) => {
            const row = rows[virtualRow.index] as TRow<TData>;
-            return (
+            const baseRow = (
              <TR
                role="row"
                key={row.id}
@@ -231,6 +234,14 @@ function Table<TData>({
                ))}
              </TR>
            );
+
+            return decorateRow ? (
+              <React.Fragment key={row.id}>
+                {decorateRow(row.original, baseRow)}
+              </React.Fragment>
+            ) : (
+              baseRow
+            );
          })}
        </TBody>
        {showPlaceholder && (
@@ -326,7 +337,8 @@ const THead = styled.div<{ $topPos: number }>`
  color: ${s("textSecondary")};
  font-weight: 500;

-  border-bottom: 1px solid ${s("divider")};
+  border-bottom: 1px solid
+    ${(props) => transparentize(0.3, props.theme.divider)};
  background: ${s("background")};
 `;

@@ -340,12 +352,17 @@ const TR = styled.div<{ $columns: string }>`
  display: grid;
  grid-template-columns: ${({ $columns }) => `${$columns}`};
  align-items: center;
-  border-bottom: 1px solid ${s("divider")};
+  border-bottom: 1px solid
+    ${(props) => transparentize(0.3, props.theme.divider)};
  overflow: hidden;

  &:last-child {
    border-bottom: 0;
  }
+
+  &:hover ${NudeButton}[aria-haspopup="menu"] {
+    opacity: 1;
+  }
 `;

 const TH = styled.span`
@@ -391,11 +408,17 @@ const TD = styled.span`

  ${NudeButton}[aria-haspopup="menu"] {
    vertical-align: middle;
+    opacity: 0;
+    transition: opacity 100ms ease-in-out;

    &:hover,
    &[aria-expanded="true"] {
      background: ${s("sidebarControlHoverBackground")};
    }
+
+    &[aria-expanded="true"] {
+      opacity: 1;
+    }
  }
 `;

@@ -1,4 +1,4 @@
-import { AnimateSharedLayout } from "framer-motion";
+import { LayoutGroup } from "framer-motion";
 import { transparentize } from "polished";
 import * as React from "react";
 import styled from "styled-components";
@@ -84,13 +84,13 @@ const Tabs: React.FC = ({ children }: Props) => {
  }, [width, updateShadows]);

  return (
-    <AnimateSharedLayout>
+    <LayoutGroup>
      <Sticky>
        <Nav ref={ref} onScroll={updateShadows} $shadowVisible={shadowVisible}>
          {children}
        </Nav>
      </Sticky>
-    </AnimateSharedLayout>
+    </LayoutGroup>
  );
 };

@@ -0,0 +1,30 @@
+import { observer } from "mobx-react";
+import { useCallback } from "react";
+import { toast } from "sonner";
+import { TemplateForm } from "./TemplateForm";
+import type Template from "~/models/Template";
+
+type Props = {
+  template: Template;
+  onSubmit: () => void;
+};
+
+export const TemplateEdit = observer(function TemplateEdit_({
+  template,
+  onSubmit,
+}: Props) {
+  const handleSubmit = useCallback(async () => {
+    try {
+      await template?.save();
+      onSubmit?.();
+    } catch (error) {
+      toast.error(error.message);
+    }
+  }, [template, onSubmit]);
+
+  if (!template) {
+    return null;
+  }
+
+  return <TemplateForm template={template} handleSubmit={handleSubmit} />;
+});
@@ -0,0 +1,103 @@
+import { observer } from "mobx-react";
+import { InputIcon, ShapesIcon } from "outline-icons";
+import React, { useRef } from "react";
+import { Trans, useTranslation } from "react-i18next";
+import styled from "styled-components";
+import type { ProsemirrorData } from "@shared/types";
+import type Template from "~/models/Template";
+import Editor from "~/scenes/Document/components/Editor";
+import { DocumentContextProvider } from "~/components/DocumentContext";
+import LoadingIndicator from "~/components/LoadingIndicator";
+import Notice from "~/components/Notice";
+import useBoolean from "~/hooks/useBoolean";
+import usePolicy from "~/hooks/usePolicy";
+import useStores from "~/hooks/useStores";
+
+export const TemplateForm = observer(function TemplateForm_({
+  handleSubmit,
+  template,
+}: {
+  handleSubmit: (template: Template) => void;
+  template: Template;
+}) {
+  const { dialogs } = useStores();
+  const { t } = useTranslation();
+  const can = usePolicy(template);
+  const dataRef = useRef(template.data);
+  const ref = useRef(null);
+  const [isUploading, handleStartUpload, handleStopUpload] = useBoolean();
+  const readOnly = !can.update && !template.isNew;
+
+  const handleChangeTitle = (title: string) => {
+    template.title = title;
+  };
+
+  const handleChangeIcon = (icon: string, color: string) => {
+    template.icon = icon;
+    template.color = color;
+  };
+
+  const handleChange = (value: (asString: boolean) => ProsemirrorData) => {
+    dataRef.current = value(false);
+    template.data = dataRef.current;
+  };
+
+  const handleSave = (options: { autosave?: boolean }) => {
+    if (options.autosave) {
+      return;
+    }
+    handleSubmit(template);
+  };
+
+  const handleCancel = () => {
+    dialogs.closeAllModals();
+  };
+
+  if (!template) {
+    return null;
+  }
+
+  return (
+    <DocumentContextProvider>
+      <React.Suspense fallback={null}>
+        {isUploading && <LoadingIndicator />}
+        <Notice
+          icon={<ShapesIcon />}
+          description={
+            <Trans>
+              Highlight some text and use the <PlaceholderIcon /> control to add
+              placeholders that can be filled out when creating new documents
+            </Trans>
+          }
+        >
+          {t("You’re editing a template")}
+        </Notice>
+        <Editor
+          id={template.id}
+          ref={ref}
+          isDraft={false}
+          document={template}
+          value={readOnly ? template.data : undefined}
+          defaultValue={template.data}
+          onFileUploadStart={handleStartUpload}
+          onFileUploadStop={handleStopUpload}
+          onChangeTitle={handleChangeTitle}
+          onChangeIcon={handleChangeIcon}
+          onSave={handleSave}
+          onCancel={handleCancel}
+          onChange={handleChange}
+          readOnly={readOnly}
+          canUpdate={can.update}
+          autoFocus={template.createdAt === template.updatedAt}
+          template
+        />
+      </React.Suspense>
+    </DocumentContextProvider>
+  );
+});
+
+const PlaceholderIcon = styled(InputIcon)`
+  position: relative;
+  top: 6px;
+  margin-top: -6px;
+`;
@@ -0,0 +1,36 @@
+import { observer } from "mobx-react";
+import { useCallback, useState } from "react";
+import { toast } from "sonner";
+import Template from "~/models/Template";
+import useStores from "~/hooks/useStores";
+import { TemplateForm } from "./TemplateForm";
+
+type Props = {
+  collectionId?: string | null;
+  onSubmit?: () => void;
+};
+
+export const TemplateNew = observer(function TemplateNew_({
+  collectionId,
+  onSubmit,
+}: Props) {
+  const { templates } = useStores();
+  const [template] = useState(
+    new Template({ title: "", collectionId }, templates)
+  );
+
+  const handleSubmit = useCallback(async () => {
+    try {
+      await template.save();
+      onSubmit?.();
+    } catch (error) {
+      toast.error(error.message);
+    }
+  }, [template, onSubmit]);
+
+  if (!template) {
+    return null;
+  }
+
+  return <TemplateForm template={template} handleSubmit={handleSubmit} />;
+});
@@ -49,7 +49,7 @@ const SelectLocation = ({ defaultCollectionId, onSelect }: Props) => {
      collections.orderedData.reduce<Option[]>((memo, collection) => {
        const canCollection = policies.abilities(collection.id);

-        if (canCollection.createDocument) {
+        if (canCollection.createTemplate) {
          memo.push({
            type: "item",
            label: collection.name,
@@ -8,7 +8,6 @@ import ConfirmationDialog from "~/components/ConfirmationDialog";
 import Flex from "~/components/Flex";
 import Switch from "~/components/Switch";
 import useStores from "~/hooks/useStores";
-import { documentPath } from "~/utils/routeHelpers";
 import SelectLocation from "./SelectLocation";

 type Props = {
@@ -18,7 +17,7 @@ type Props = {
 function DocumentTemplatizeDialog({ documentId }: Props) {
  const history = useHistory();
  const { t } = useTranslation();
-  const { documents } = useStores();
+  const { documents, templates } = useStores();
  const document = documents.get(documentId);
  invariant(document, "Document must exist");

@@ -28,15 +27,17 @@ function DocumentTemplatizeDialog({ documentId }: Props) {
  );

  const handleSubmit = React.useCallback(async () => {
-    const template = await document?.templatize({
+    const template = await templates.templatize({
+      id: documentId,
      collectionId,
      publish,
    });
+
    if (template) {
-      history.push(documentPath(template));
+      history.push(template.path);
      toast.success(t("Template created, go ahead and customize it"));
    }
-  }, [t, document, history, collectionId, publish]);
+  }, [t, templates, documentId, history, collectionId, publish]);

  return (
    <ConfirmationDialog
@@ -40,7 +40,7 @@ const DrawerContent = React.forwardRef<
            transition: { bounce: 0, duration: 0.2 },
          }}
        >
-          <StyledInnerContent ref={measureRef} {...rest}>
+          <StyledInnerContent column ref={measureRef} {...rest}>
            {children}
          </StyledInnerContent>
        </StyledContent>
@@ -58,9 +58,9 @@ const DrawerTitle = React.forwardRef<
  const { hidden, children, ...rest } = props;

  const title = (
-    <Text size="medium" weight="bold" as={TitleWrapper} justify="center">
+    <StyledText size="medium" weight="bold" as={TitleWrapper} justify="center">
      {children}
-    </Text>
+    </StyledText>
  );

  return (
@@ -75,6 +75,10 @@ const DrawerTitle = React.forwardRef<
 });
 DrawerTitle.displayName = DrawerPrimitive.Title.displayName;

+const StyledText = styled(Text)`
+  flex-shrink: 0;
+`;
+
 /** Styled components. */
 const StyledContent = styled(m.div)`
  z-index: ${depths.menu};
@@ -92,7 +96,7 @@ const StyledContent = styled(m.div)`
  background: ${s("menuBackground")};
 `;

-const StyledInnerContent = styled.div`
+const StyledInnerContent = styled(Flex)`
  padding: 6px;
  height: 100%;
 `;
@@ -129,7 +129,7 @@ const StyledContent = styled(PopoverPrimitive.Content)<StyledContentProps>`
    		`}

  &[data-state="open"] {
-    animation: ${fadeAndScaleIn} 150ms cubic-bezier(0.08, 0.82, 0.17, 1); // ease-out-circ
+    animation: ${fadeAndScaleIn} 150ms cubic-bezier(0.08, 0.82, 0.17, 1);
  }
 `;

@@ -67,6 +67,7 @@ const BaseMenuItemCSS = css<BaseMenuItemProps>`
    !props.disabled &&
    `
      &[data-highlighted],
+      &[data-state="open"],
      &:focus-visible {
        color: ${props.theme.accentText};
        background: ${props.$dangerous ? props.theme.danger : props.theme.accent};
@@ -20,6 +20,7 @@ function BlockMenu(props: Props) {
        icon={item.icon}
        title={item.title}
        shortcut={item.shortcut}
+        disclosure={options.disclosure}
      />
    ),
    []
@@ -1,4 +1,5 @@
 import capitalize from "lodash/capitalize";
+import { observer } from "mobx-react";
 import { useCallback, useMemo, useEffect } from "react";
 import { emojiMartToGemoji, snakeCase } from "@shared/editor/lib/emoji";
 import { search as emojiSearch } from "@shared/utils/emoji";
@@ -38,7 +39,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 id = emojiMartToGemoji[item.id] || item.id;
          const type = determineIconType(id);
          const value = type === IconType.Custom ? id : snakeCase(id);
@@ -76,4 +76,4 @@ const EmojiMenu = (props: Props) => {
  );
 };

-export default EmojiMenu;
+export default observer(EmojiMenu);
@@ -375,6 +375,10 @@ export default function FindAndReplace({
        minWidth={420}
        scrollable={false}
        onPointerDownOutside={() => setLocalOpen(false)}
+        onFocusOutside={(event) => {
+          event.preventDefault();
+          inputRef.current?.focus();
+        }}
        style={{ marginRight: 16, marginTop: 60 }}
      >
        <Content column>
@@ -90,12 +90,19 @@ function usePosition({
      } as DOMRect);

  // position at the top right of code blocks
-  const codeBlock = findParentNode(isCode)(view.state.selection);
+  const isCodeNodeSelection =
+    selection instanceof NodeSelection && isCode(selection.node);
+  const codeBlock = isCodeNodeSelection
+    ? { pos: selection.from, node: selection.node }
+    : findParentNode(isCode)(view.state.selection);
  const noticeBlock = findParentNode(
    (node) => node.type.name === "container_notice"
  )(view.state.selection);

-  if ((codeBlock || noticeBlock) && view.state.selection.empty) {
+  if (
+    (codeBlock || noticeBlock) &&
+    (view.state.selection.empty || isCodeNodeSelection)
+  ) {
    const position = codeBlock
      ? codeBlock.pos
      : noticeBlock
@@ -33,6 +33,7 @@ type Props = {
  mark?: Mark;
  dictionary: Dictionary;
  view: EditorView;
+  autoFocus?: boolean;
  onLinkAdd: () => void;
  onLinkUpdate: () => void;
  onLinkRemove: () => void;
@@ -45,6 +46,7 @@ const LinkEditor: React.FC<Props> = ({
  mark,
  dictionary,
  view,
+  autoFocus,
  onLinkAdd,
  onLinkUpdate,
  onLinkRemove,
@@ -209,7 +211,7 @@ const LinkEditor: React.FC<Props> = ({
          onKeyDown={handleKeyDown}
          onChange={handleSearch}
          onFocus={handleSearch}
-          autoFocus={getHref() === ""}
+          autoFocus={autoFocus}
          readOnly={!view.editable}
        />
        {actions.map((action, index) => {
@@ -44,7 +44,6 @@ type Props = Omit<

 function MentionMenu({ search, isActive, ...rest }: Props) {
  const [loaded, setLoaded] = useState(false);
-  const [items, setItems] = useState<MentionItem[]>([]);
  const { t } = useTranslation();
  const { auth, documents, users, collections, groups } = useStores();
  const actorId = auth.currentUserId;
@@ -76,7 +75,15 @@ function MentionMenu({ search, isActive, ...rest }: Props) {

  useEffect(() => {
    if (actorId && !loading) {
-      const items: MentionItem[] = users
+      setLoaded(true);
+    }
+  }, [actorId, loading]);
+
+  // Computed in the render body so MobX observer can track store access
+  // (e.g. searchSuppressed). Previously this lived inside a useEffect which
+  // runs outside the reactive context and triggered MobX warnings.
+  const items: MentionItem[] = actorId
+    ? users
        .findByQuery(search, { maxResults: maxResultsInSection })
        .map(
          (user) =>
@@ -122,7 +129,9 @@ function MentionMenu({ search, isActive, ...rest }: Props) {
                </Flex>
              ),
              title: group.name,
-              subtitle: t("{{ count }} members", { count: group.memberCount }),
+              subtitle: t("{{ count }} members", {
+                count: group.memberCount,
+              }),
              section: GroupSection,
              appendSpace: true,
              attrs: {
@@ -218,22 +227,8 @@ function MentionMenu({ search, isActive, ...rest }: Props) {
              label: search,
            },
          } as MentionItem,
-        ]);
-
-      setItems(items);
-      setLoaded(true);
-    }
-  }, [
-    t,
-    actorId,
-    loading,
-    search,
-    users,
-    documents,
-    maxResultsInSection,
-    groups,
-    collections,
-  ]);
+        ])
+    : [];

  const handleSelect = useCallback(
    async (item: MentionItem) => {
@@ -67,7 +67,10 @@ function useItems({

  const singleUrl =
    typeof pastedText === "string" && isUrl(pastedText) ? pastedText : null;
-  const embed = singleUrl ? getMatchingEmbed(embeds, singleUrl)?.embed : null;
+  const matchedEmbed = singleUrl
+    ? getMatchingEmbed(embeds, singleUrl)?.embed
+    : null;
+  const embed = matchedEmbed?.disabled ? null : matchedEmbed;

  // Check embeddability for single URL
  useEffect(() => {
@@ -87,25 +87,29 @@ export function SelectionToolbar(props: Props) {
  const isMobile = useMobile();
  const isActive = props.isActive || isMobile;
  const { state } = view;
+  const [autoFocusLinkInput, setAutoFocusLinkInput] = React.useState(false);
  const isDragging = useIsDragging(state);
  const { selection } = state;
  const [activeToolbar, setActiveToolbar] = React.useState<Toolbar | null>(
    null
  );

-  React.useEffect(() => {
-    const { selection } = state;
-    const linkMark =
-      selection instanceof NodeSelection
-        ? getMarkRangeNodeSelection(selection, state.schema.marks.link)
-        : getMarkRange(selection.$from, state.schema.marks.link);
+  const linkMark =
+    selection instanceof NodeSelection
+      ? getMarkRangeNodeSelection(selection, state.schema.marks.link)
+      : getMarkRange(selection.$from, state.schema.marks.link);

-    const isEmbedSelection =
-      selection instanceof NodeSelection &&
-      selection.node.type.name === "embed";
+  const isEmbedSelection =
+    selection instanceof NodeSelection && selection.node.type.name === "embed";

-    const isCodeSelection = isInCode(state, { onlyBlock: true });
-    const isNoticeSelection = isInNotice(state);
+  const isCodeSelection = isInCode(state, { onlyBlock: true });
+  const isNoticeSelection = isInNotice(state);
+
+  React.useLayoutEffect(() => {
+    if (!isActive) {
+      setActiveToolbar(null);
+      return;
+    }

    if (isEmbedSelection && !readOnly) {
      setActiveToolbar(Toolbar.Media);
@@ -124,22 +128,37 @@ export function SelectionToolbar(props: Props) {
    } else if (selection.empty) {
      setActiveToolbar(null);
    }
-  }, [readOnly, selection]);
+  }, [
+    readOnly,
+    isActive,
+    selection,
+    linkMark,
+    isEmbedSelection,
+    isCodeSelection,
+    isNoticeSelection,
+  ]);
+
+  React.useLayoutEffect(() => {
+    if (autoFocusLinkInput && activeToolbar !== Toolbar.Link) {
+      setAutoFocusLinkInput(false);
+    }
+  }, [activeToolbar]);

  // Refocus the editor when the link toolbar closes to prevent focus loss
  const prevActiveToolbar = React.useRef(activeToolbar);
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
    if (
      prevActiveToolbar.current === Toolbar.Link &&
      activeToolbar !== Toolbar.Link &&
-      !readOnly
+      !readOnly &&
+      isActive
    ) {
      view.focus();
    }
    prevActiveToolbar.current = activeToolbar;
-  }, [activeToolbar, readOnly, view]);
+  }, [activeToolbar, readOnly, isActive, view]);

-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
    const handleClickOutside = (ev: MouseEvent): void => {
      if (
        ev.target instanceof HTMLElement &&
@@ -193,11 +212,10 @@ export function SelectionToolbar(props: Props) {
      ) {
        ev.preventDefault();
        ev.stopPropagation();
-        if (activeToolbar === Toolbar.Link) {
-          setActiveToolbar(Toolbar.Menu);
-        } else if (activeToolbar === Toolbar.Menu) {
-          setActiveToolbar(Toolbar.Link);
-        }
+        setAutoFocusLinkInput(true);
+        setActiveToolbar(
+          activeToolbar === Toolbar.Link ? Toolbar.Menu : Toolbar.Link
+        );
      }
    },
    view.dom,
@@ -218,17 +236,14 @@ export function SelectionToolbar(props: Props) {
  const isAttachmentSelection =
    selection instanceof NodeSelection &&
    selection.node.type.name === "attachment";
-  const isCodeSelection = isInCode(state, { onlyBlock: true });
-  const isNoticeSelection = isInNotice(state);
-  const link =
-    selection instanceof NodeSelection
-      ? getMarkRangeNodeSelection(selection, state.schema.marks.link)
-      : getMarkRange(selection.$from, state.schema.marks.link);

  let items: MenuItem[] = [];
  let align: "center" | "start" | "end" = "center";

-  if (isCodeSelection && selection.empty) {
+  if (
+    isCodeSelection &&
+    (selection.empty || selection instanceof NodeSelection)
+  ) {
    items = getCodeMenuItems(state, readOnly, dictionary);
    align = "end";
  } else if (isTableSelected(state)) {
@@ -289,6 +304,7 @@ export function SelectionToolbar(props: Props) {

    if (item.name === "linkOnImage" || item.name === "addLink") {
      item.onClick = () => {
+        setAutoFocusLinkInput(true);
        setActiveToolbar(Toolbar.Link);
      };
    }
@@ -315,10 +331,11 @@ export function SelectionToolbar(props: Props) {
    >
      {activeToolbar === Toolbar.Link ? (
        <LinkEditor
-          key={`${selection.from}-${selection.to}`}
+          key={`link-${selection.anchor}`}
          dictionary={dictionary}
+          autoFocus={autoFocusLinkInput}
          view={view}
-          mark={link ? link.mark : undefined}
+          mark={linkMark ? linkMark.mark : undefined}
          onLinkAdd={() => setActiveToolbar(null)}
          onLinkUpdate={() => setActiveToolbar(null)}
          onLinkRemove={() => setActiveToolbar(null)}
@@ -328,7 +345,7 @@ export function SelectionToolbar(props: Props) {
        />
      ) : activeToolbar === Toolbar.Media ? (
        <MediaLinkEditor
-          key={`embed-${selection.from}`}
+          key={`embed-${selection.anchor}`}
          node={
            "node" in selection ? (selection as NodeSelection).node : undefined
          }
@@ -6,21 +6,26 @@ import { TextSelection } from "prosemirror-state";
 import * as React from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { toast } from "sonner";
-import styled from "styled-components";
+import styled, { keyframes } from "styled-components";
 import insertFiles from "@shared/editor/commands/insertFiles";
 import { EmbedDescriptor } from "@shared/editor/embeds";
 import filterExcessSeparators from "@shared/editor/lib/filterExcessSeparators";
 import { findParentNode } from "@shared/editor/queries/findParentNode";
 import type { MenuItem } from "@shared/editor/types";
-import { depths, s } from "@shared/styles";
+import { s } from "@shared/styles";
 import { getEventFiles } from "@shared/utils/files";
 import { AttachmentValidation } from "@shared/validations";
-import { Portal } from "~/components/Portal";
 import {
  Drawer,
  DrawerContent,
  DrawerTitle,
 } from "~/components/primitives/Drawer";
+import {
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+} from "~/components/primitives/Popover";
+import { MouseSafeArea } from "~/components/MouseSafeArea";
 import Scrollable from "~/components/Scrollable";
 import useDictionary from "~/hooks/useDictionary";
 import useMobile from "~/hooks/useMobile";
@@ -29,38 +34,6 @@ import { useEditor } from "./EditorContext";
 import Input from "./Input";
 import { MenuHeader } from "~/components/primitives/components/Menu";

-type TopAnchor = {
-  top: number;
-  bottom: undefined;
-};
-
-type BottomAnchor = {
-  top: undefined;
-  bottom: number;
-};
-
-type LeftAnchor = {
-  left: number;
-  right: undefined;
-};
-
-type RightAnchor = {
-  left: undefined;
-  right: number;
-};
-
-type Position = ((TopAnchor | BottomAnchor) & (LeftAnchor | RightAnchor)) & {
-  isAbove: boolean;
-};
-
-const defaultPosition: Position = {
-  top: 0,
-  bottom: undefined,
-  left: -10000,
-  right: undefined,
-  isAbove: false,
-};
-
 export type Props<T extends MenuItem = MenuItem> = {
  rtl: boolean;
  isActive: boolean;
@@ -80,6 +53,7 @@ export type Props<T extends MenuItem = MenuItem> = {
    index: number,
    options: {
      selected: boolean;
+      disclosure?: boolean;
      onClick: (event: React.SyntheticEvent) => void;
    }
  ) => React.ReactNode;
@@ -92,23 +66,65 @@ function SuggestionsMenu<T extends MenuItem>(props: Props<T>) {
  const dictionary = useDictionary();
  const { t } = useTranslation();
  const isMobile = useMobile();
-  const hasActivated = React.useRef(false);
  const pointerRef = React.useRef<{ clientX: number; clientY: number }>({
    clientX: 0,
    clientY: 0,
  });
-  const menuRef = React.useRef<HTMLDivElement>(null);
  const inputRef = React.useRef<HTMLInputElement>(null);
  const selectionRef = React.useRef<{ from: number; to: number } | null>(null);
-  const [position, setPosition] = React.useState<Position>(defaultPosition);
  const [insertItem, setInsertItem] = React.useState<
    MenuItem | EmbedDescriptor
  >();
  const [selectedIndex, setSelectedIndex] = React.useState(0);
+  const [submenu, setSubmenu] = React.useState<{
+    index: number;
+    items: MenuItem[];
+    selectedIndex: number;
+  } | null>(null);
+  const itemRefs = React.useRef<Map<number, HTMLElement>>(new Map());
+  const submenuContentRef = React.useRef<HTMLDivElement>(null);
+  const hoverTimerRef = React.useRef<ReturnType<typeof setTimeout>>();
+
+  // Stores the caret bounding rect, snapshotted when the menu opens
+  const caretRectRef = React.useRef(new DOMRect());
+
+  // Stable virtual element for Radix PopoverAnchor – never replaced so the
+  // popper does not trigger unnecessary anchor-change cycles.
+  const caretRef = React.useRef({
+    getBoundingClientRect: () => caretRectRef.current,
+  });
+
+  // Compute and store the caret rect during render so it is available before
+  // the Radix popper effect runs for the first time.
+  const caretRect = React.useMemo(() => {
+    if (!props.isActive) {
+      return new DOMRect();
+    }
+
+    try {
+      const { selection } = view.state;
+      const fromPos = view.coordsAtPos(selection.from);
+      const toPos = view.coordsAtPos(selection.to, -1);
+      const top = Math.min(fromPos.top, toPos.top);
+      const bottom = Math.max(fromPos.bottom, toPos.bottom);
+      const left = Math.min(fromPos.left, toPos.left);
+      const right = Math.max(fromPos.right, toPos.right);
+      return new DOMRect(left, top, right - left, bottom - top);
+    } catch (err) {
+      Logger.warn("Unable to calculate caret position", err);
+      return new DOMRect();
+    }
+  }, [props.isActive, view]);
+
+  caretRectRef.current = caretRect;
+
+  const resolveChildren = (
+    children: MenuItem["children"]
+  ): MenuItem[] | undefined =>
+    typeof children === "function" ? children() : children;

  React.useEffect(() => {
    if (props.isActive) {
-      hasActivated.current = true;
      // Save the selection position when the menu opens. On mobile, the editor
      // may lose focus/selection when tapping on menu items, so we restore it.
      requestAnimationFrame(() => {
@@ -121,81 +137,21 @@ function SuggestionsMenu<T extends MenuItem>(props: Props<T>) {
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [props.isActive]);

-  const calculatePosition = React.useCallback(
-    (props: Props) => {
-      if (!props.isActive) {
-        return defaultPosition;
-      }
+  React.useEffect(() => {
+    setSubmenu(null);

-      const caretPosition = () => {
-        let fromPos;
-        let toPos;
-        try {
-          fromPos = view.coordsAtPos(selection.from);
-          toPos = view.coordsAtPos(selection.to, -1);
-        } catch (err) {
-          Logger.warn("Unable to calculate caret position", err);
-          return {
-            top: 0,
-            bottom: 0,
-            left: 0,
-            right: 0,
-          };
-        }
+    if (!props.isActive) {
+      return;
+    }

-        // ensure that start < end for the menu to be positioned correctly
-        return {
-          top: Math.min(fromPos.top, toPos.top),
-          bottom: Math.max(fromPos.bottom, toPos.bottom),
-          left: Math.min(fromPos.left, toPos.left),
-          right: Math.max(fromPos.right, toPos.right),
-        };
-      };
+    setSelectedIndex(0);
+    setInsertItem(undefined);
+  }, [props.isActive]);

-      const { selection } = view.state;
-      const ref = menuRef.current;
-      const offsetWidth = ref ? ref.offsetWidth : 0;
-      const offsetHeight = ref ? ref.offsetHeight : 0;
-      const { top, bottom, right, left } = caretPosition();
-      const margin = 12;
-
-      const offsetParent = ref?.offsetParent
-        ? ref.offsetParent.getBoundingClientRect()
-        : ({
-            width: 0,
-            height: 0,
-            top: 0,
-            left: 0,
-          } as DOMRect);
-
-      let leftPos = Math.min(
-        left - offsetParent.left,
-        window.innerWidth - offsetParent.left - offsetWidth - margin
-      );
-      if (props.rtl) {
-        leftPos = right - offsetWidth;
-      }
-
-      if (top - offsetHeight > margin) {
-        return {
-          left: leftPos,
-          top: undefined,
-          bottom: offsetParent.bottom - top,
-          right: undefined,
-          isAbove: false,
-        };
-      } else {
-        return {
-          left: leftPos,
-          top: bottom - offsetParent.top,
-          bottom: undefined,
-          right: undefined,
-          isAbove: true,
-        };
-      }
-    },
-    [view]
-  );
+  React.useEffect(() => {
+    setSelectedIndex(0);
+    setSubmenu(null);
+  }, [props.search]);

  const handleClearSearch = React.useCallback(() => {
    const { state, dispatch } = view;
@@ -226,26 +182,6 @@ function SuggestionsMenu<T extends MenuItem>(props: Props<T>) {
    );
  }, [props.search, props.trigger, view]);

-  React.useEffect(() => {
-    if (!props.isActive) {
-      return;
-    }
-
-    // reset scroll position to top when opening menu as the contents are
-    // hidden, not unrendered
-    if (menuRef.current) {
-      menuRef.current.scroll({ top: 0 });
-    }
-
-    setPosition(calculatePosition(props));
-    setSelectedIndex(0);
-    setInsertItem(undefined);
-  }, [calculatePosition, props.isActive]);
-
-  React.useEffect(() => {
-    setSelectedIndex(0);
-  }, [props.search]);
-
  const restoreSelection = React.useCallback(() => {
    if (!isMobile) {
      return;
@@ -461,7 +397,7 @@ function SuggestionsMenu<T extends MenuItem>(props: Props<T>) {
    const embedItems: EmbedDescriptor[] = [];

    for (const embed of embeds) {
-      if (embed.title && embed.visible !== false) {
+      if (embed.title && embed.visible !== false && !embed.disabled) {
        embedItems.push(
          new EmbedDescriptor({
            ...embed,
@@ -481,11 +417,47 @@ function SuggestionsMenu<T extends MenuItem>(props: Props<T>) {
    }

    const searchInput = search.toLowerCase();
+
+    const matchesSearch = (item: MenuItem | EmbedDescriptor) =>
+      (item.name || "").toLocaleLowerCase().includes(searchInput) ||
+      (item.title || "").toLocaleLowerCase().includes(searchInput) ||
+      (item.keywords || "").toLocaleLowerCase().includes(searchInput);
+
+    // When searching, flatten matching children into the top-level list so
+    // they are directly navigable with the keyboard. If all children match,
+    // exclude the parent item since it would be redundant.
+    const fullyFlattenedParents = new Set<MenuItem | EmbedDescriptor>();
+    if (search && filterable) {
+      const flattened: (EmbedDescriptor | MenuItem)[] = [];
+      for (const item of items) {
+        if ("children" in item && item.children) {
+          const children = resolveChildren(item.children);
+          if (children) {
+            const matching = children.filter(matchesSearch);
+            if (matching.length > 0) {
+              for (const child of matching) {
+                const { children: _, ...flat } = child;
+                flattened.push(flat);
+              }
+              if (matching.length === children.length) {
+                fullyFlattenedParents.add(item);
+              }
+            }
+          }
+        }
+      }
+      items = items.concat(flattened);
+    }
+
    const filtered = items.filter((item) => {
      if (item.name === "separator") {
        return true;
      }

+      if (fullyFlattenedParents.has(item)) {
+        return false;
+      }
+
      if (item.visible === false) {
        return false;
      }
@@ -514,11 +486,7 @@ function SuggestionsMenu<T extends MenuItem>(props: Props<T>) {
        return item;
      }

-      return (
-        (item.name || "").toLocaleLowerCase().includes(searchInput) ||
-        (item.title || "").toLocaleLowerCase().includes(searchInput) ||
-        (item.keywords || "").toLocaleLowerCase().includes(searchInput)
-      );
+      return matchesSearch(item);
    });

    return filterExcessSeparators(
@@ -541,18 +509,40 @@ function SuggestionsMenu<T extends MenuItem>(props: Props<T>) {
    );
  }, [commands, props]);

-  React.useEffect(() => {
-    const handleMouseDown = (event: MouseEvent) => {
-      if (
-        !menuRef.current ||
-        menuRef.current.contains(event.target as Element)
-      ) {
+  const openSubmenu = React.useCallback(
+    (index: number) => {
+      const item = filtered[index];
+      if (!item) {
+        return;
+      }
+      const children = resolveChildren(
+        "children" in item ? item.children : undefined
+      );
+      if (!children?.length) {
        return;
      }

-      props.onClose();
-    };
+      const normalized = filterExcessSeparators(
+        children.filter((child) => child.visible !== false)
+      );
+      const firstSelectable = normalized.findIndex(
+        (child) =>
+          child.name !== "separator" && !("disabled" in child && child.disabled)
+      );
+      if (firstSelectable === -1) {
+        return;
+      }

+      setSubmenu({
+        index,
+        items: normalized,
+        selectedIndex: firstSelectable,
+      });
+    },
+    [filtered]
+  );
+
+  React.useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.isComposing) {
        return;
@@ -561,18 +551,109 @@ function SuggestionsMenu<T extends MenuItem>(props: Props<T>) {
        return;
      }

+      // Let the link input's own handlers manage navigation keys
+      if (insertItem) {
+        return;
+      }
+
+      // --- Submenu open: route keys into it ---
+      if (submenu) {
+        if (event.key === "ArrowDown" || (event.ctrlKey && event.key === "n")) {
+          event.preventDefault();
+          event.stopPropagation();
+          const total = submenu.items.length - 1;
+          let next = submenu.selectedIndex + 1;
+          while (next <= total) {
+            const child = submenu.items[next];
+            if (
+              child?.name !== "separator" &&
+              !("disabled" in child && child.disabled)
+            ) {
+              break;
+            }
+            next++;
+          }
+          if (next <= total) {
+            setSubmenu((s) => (s ? { ...s, selectedIndex: next } : s));
+          }
+          return;
+        }
+
+        if (event.key === "ArrowUp" || (event.ctrlKey && event.key === "p")) {
+          event.preventDefault();
+          event.stopPropagation();
+          let prev = submenu.selectedIndex - 1;
+          while (prev >= 0) {
+            const child = submenu.items[prev];
+            if (
+              child?.name !== "separator" &&
+              !("disabled" in child && child.disabled)
+            ) {
+              break;
+            }
+            prev--;
+          }
+          if (prev >= 0) {
+            setSubmenu((s) => (s ? { ...s, selectedIndex: prev } : s));
+          }
+          return;
+        }
+
+        if (event.key === "ArrowLeft" || event.key === "Escape") {
+          event.preventDefault();
+          event.stopPropagation();
+          setSubmenu(null);
+          return;
+        }
+
+        if (event.key === "Enter") {
+          event.preventDefault();
+          event.stopPropagation();
+          const child = submenu.items[submenu.selectedIndex];
+          if (child) {
+            handleClickItem(child);
+            setSubmenu(null);
+          }
+          return;
+        }
+        return;
+      }
+
+      // --- Normal (no submenu) ---
      if (event.key === "Enter") {
        event.preventDefault();

        const item = filtered[selectedIndex];

        if (item) {
-          handleClickItem(item);
+          const children = resolveChildren(
+            "children" in item ? item.children : undefined
+          );
+          if (children?.length) {
+            openSubmenu(selectedIndex);
+          } else {
+            handleClickItem(item);
+          }
        } else {
          props.onClose(true);
        }
      }

+      if (event.key === "ArrowRight") {
+        const item = filtered[selectedIndex];
+        if (item) {
+          const children = resolveChildren(
+            "children" in item ? item.children : undefined
+          );
+          if (children?.length) {
+            event.preventDefault();
+            event.stopPropagation();
+            openSubmenu(selectedIndex);
+            return;
+          }
+        }
+      }
+
      if (
        event.key === "ArrowUp" ||
        (event.key === "Tab" && event.shiftKey) ||
@@ -636,18 +717,16 @@ function SuggestionsMenu<T extends MenuItem>(props: Props<T>) {
      }
    };

-    window.addEventListener("mousedown", handleMouseDown);
    window.addEventListener("keydown", handleKeyDown, {
      capture: true,
    });

    return () => {
-      window.removeEventListener("mousedown", handleMouseDown);
      window.removeEventListener("keydown", handleKeyDown, {
        capture: true,
      });
    };
-  }, [close, filtered, handleClickItem, props, selectedIndex]);
+  }, [close, filtered, handleClickItem, insertItem, openSubmenu, props, selectedIndex, submenu]);

  const { isActive, uploadFile } = props;
  const items = filtered;
@@ -675,6 +754,23 @@ function SuggestionsMenu<T extends MenuItem>(props: Props<T>) {
    </VisuallyHidden.Root>
  );

+  // Close submenu when parent selection moves away from the trigger
+  React.useEffect(() => {
+    if (submenu && submenu.index !== selectedIndex) {
+      setSubmenu(null);
+    }
+  }, [selectedIndex, submenu]);
+
+  // Cleanup hover timer on unmount
+  React.useEffect(
+    () => () => {
+      if (hoverTimerRef.current) {
+        clearTimeout(hoverTimerRef.current);
+      }
+    },
+    []
+  );
+
  const renderItems = () => {
    let prevHeading: string | undefined;

@@ -693,6 +789,10 @@ function SuggestionsMenu<T extends MenuItem>(props: Props<T>) {
            return null;
          }

+          const hasChildren = !!(
+            "children" in item && resolveChildren(item.children)?.length
+          );
+
          const handlePointerMove = (ev: React.PointerEvent) => {
            if (
              !("disabled" in item && item.disabled) &&
@@ -708,6 +808,22 @@ function SuggestionsMenu<T extends MenuItem>(props: Props<T>) {
              clientX: ev.clientX,
              clientY: ev.clientY,
            };
+
+            // Hover to open submenu with delay
+            if (hasChildren) {
+              if (hoverTimerRef.current) {
+                clearTimeout(hoverTimerRef.current);
+              }
+              hoverTimerRef.current = setTimeout(() => {
+                openSubmenu(index);
+              }, 150);
+            } else {
+              // Close submenu when hovering a regular item
+              if (hoverTimerRef.current) {
+                clearTimeout(hoverTimerRef.current);
+              }
+              setSubmenu(null);
+            }
          };

          const handlePointerDown = () => {
@@ -722,23 +838,37 @@ function SuggestionsMenu<T extends MenuItem>(props: Props<T>) {
          const handleOnClick = (ev: React.MouseEvent) => {
            ev.preventDefault();
            ev.stopPropagation();
-            handleClickItem(item);
+            if (hasChildren) {
+              openSubmenu(index);
+            } else {
+              handleClickItem(item);
+            }
          };

          const currentHeading =
            "section" in item ? item.section?.({ t }) : undefined;

+          const itemRef = (node: HTMLElement | null) => {
+            if (node) {
+              itemRefs.current.set(index, node);
+            } else {
+              itemRefs.current.delete(index);
+            }
+          };
+
          const response = (
            <React.Fragment key={`${index}-${item.name}`}>
              {currentHeading !== prevHeading && (
                <MenuHeader key={currentHeading}>{currentHeading}</MenuHeader>
              )}
              <ListItem
+                ref={itemRef}
                onPointerMove={handlePointerMove}
                onPointerDown={handlePointerDown}
              >
                {props.renderMenuItem(item as any, index, {
                  selected: index === selectedIndex,
+                  disclosure: hasChildren,
                  onClick: handleOnClick,
                })}
              </ListItem>
@@ -792,37 +922,152 @@ function SuggestionsMenu<T extends MenuItem>(props: Props<T>) {
  }

  return (
-    <Portal>
-      <Wrapper active={isActive} ref={menuRef} hiddenScrollbars {...position}>
-        {(isActive || hasActivated.current) && (
-          <>
-            {insertItem ? (
-              <LinkInputWrapper>
-                <LinkInput
-                  type="text"
-                  placeholder={
-                    "placeholder" in insertItem && !!insertItem.placeholder
-                      ? insertItem.placeholder
-                      : insertItem.title
-                        ? dictionary.pasteLinkWithTitle(insertItem.title)
-                        : dictionary.pasteLink
+    <>
+      <Popover open={isActive} onOpenChange={handleOpenChange} modal={false}>
+        <PopoverAnchor virtualRef={caretRef} />
+        <BouncyPopoverContent
+          side="bottom"
+          align="start"
+          width={280}
+          shrink
+          style={{
+            padding: 0,
+            maxHeight:
+              "min(324px, var(--radix-popover-content-available-height))",
+          }}
+          onOpenAutoFocus={(e) => e.preventDefault()}
+          onCloseAutoFocus={(e) => e.preventDefault()}
+          onEscapeKeyDown={(e) => e.preventDefault()}
+          onInteractOutside={(e) => {
+            if (
+              submenuContentRef.current?.contains(
+                e.target as Node
+              )
+            ) {
+              e.preventDefault();
+            }
+          }}
+        >
+          {insertItem ? (
+            <LinkInputWrapper>
+              <LinkInput
+                type="text"
+                placeholder={
+                  "placeholder" in insertItem && !!insertItem.placeholder
+                    ? insertItem.placeholder
+                    : insertItem.title
+                      ? dictionary.pasteLinkWithTitle(insertItem.title)
+                      : dictionary.pasteLink
+                }
+                onKeyDown={handleLinkInputKeydown}
+                onPaste={handleLinkInputPaste}
+                autoFocus
+              />
+            </LinkInputWrapper>
+          ) : (
+            <List>{renderItems()}</List>
+          )}
+          {fileInput}
+        </BouncyPopoverContent>
+      </Popover>
+      {submenu && itemRefs.current.get(submenu.index) && (
+        <Popover open modal={false}>
+          <PopoverAnchor
+            virtualRef={{
+              current: {
+                getBoundingClientRect: () =>
+                  itemRefs.current
+                    .get(submenu.index)!
+                    .getBoundingClientRect(),
+              },
+            }}
+          />
+          <SubmenuPopoverContent
+            ref={submenuContentRef}
+            side="right"
+            align="start"
+            sideOffset={0}
+            width={220}
+            shrink
+            style={{ padding: 0 }}
+            onOpenAutoFocus={(e) => e.preventDefault()}
+            onCloseAutoFocus={(e) => e.preventDefault()}
+            onPointerLeave={() => setSubmenu(null)}
+          >
+            <MouseSafeArea parentRef={submenuContentRef} />
+            <List>
+              {submenu.items.map((child, childIndex) => {
+                if (child.name === "separator") {
+                  return (
+                    <ListItem key={childIndex}>
+                      <hr />
+                    </ListItem>
+                  );
+                }
+                if (!child.title) {
+                  return null;
+                }
+
+                const handleChildPointerMove = (ev: React.PointerEvent) => {
+                  if (
+                    submenu.selectedIndex !== childIndex &&
+                    (pointerRef.current.clientX !== ev.clientX ||
+                      pointerRef.current.clientY !== ev.clientY)
+                  ) {
+                    setSubmenu((s) =>
+                      s ? { ...s, selectedIndex: childIndex } : s
+                    );
                  }
-                  onKeyDown={handleLinkInputKeydown}
-                  onPaste={handleLinkInputPaste}
-                  autoFocus
-                />
-              </LinkInputWrapper>
-            ) : (
-              <List>{renderItems()}</List>
-            )}
-            {fileInput}
-          </>
-        )}
-      </Wrapper>
-    </Portal>
+                  pointerRef.current = {
+                    clientX: ev.clientX,
+                    clientY: ev.clientY,
+                  };
+                };
+
+                const handleChildClick = (ev: React.MouseEvent) => {
+                  ev.preventDefault();
+                  ev.stopPropagation();
+                  handleClickItem(child);
+                  setSubmenu(null);
+                };
+
+                return (
+                  <ListItem
+                    key={`sub-${childIndex}-${child.name}`}
+                    onPointerMove={handleChildPointerMove}
+                  >
+                    {props.renderMenuItem(child as any, childIndex, {
+                      selected: childIndex === submenu.selectedIndex,
+                      onClick: handleChildClick,
+                    })}
+                  </ListItem>
+                );
+              })}
+            </List>
+          </SubmenuPopoverContent>
+        </Popover>
+      )}
+    </>
  );
 }

+const bouncyFadeIn = keyframes`
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+`;
+
+const BouncyPopoverContent = styled(PopoverContent)`
+  &[data-state="open"] {
+    animation: ${bouncyFadeIn} 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  }
+`;
+
+const SubmenuPopoverContent = styled(PopoverContent)`
+  max-height: min(324px, var(--radix-popover-content-available-height));
+`;
+
 const LinkInputWrapper = styled.div`
  margin: 8px;
 `;
@@ -839,6 +1084,13 @@ const List = styled.ol`
  height: 100%;
  padding: 6px;
  margin: 0;
+  white-space: nowrap;
+
+  hr {
+    border: 0;
+    height: 0;
+    border-top: 1px solid ${s("divider")};
+  }
 `;

 const ListItem = styled.li`
@@ -860,61 +1112,4 @@ const MobileScrollable = styled(Scrollable)`
  max-height: 75vh;
 `;

-export const Wrapper = styled(Scrollable)<{
-  active: boolean;
-  top?: number;
-  bottom?: number;
-  left?: number;
-  isAbove: boolean;
-}>`
-  color: ${s("textSecondary")};
-  font-family: ${s("fontFamily")};
-  position: absolute;
-  z-index: ${depths.editorToolbar};
-  ${(props) => props.top !== undefined && `top: ${props.top}px`};
-  ${(props) => props.bottom !== undefined && `bottom: ${props.bottom}px`};
-  left: ${(props) => props.left}px;
-  background: ${s("menuBackground")};
-  border-radius: 6px;
-  box-shadow:
-    rgba(0, 0, 0, 0.05) 0px 0px 0px 1px,
-    rgba(0, 0, 0, 0.08) 0px 4px 8px,
-    rgba(0, 0, 0, 0.08) 0px 2px 4px;
-  opacity: 0;
-  transform: scale(0.95);
-  transition:
-    opacity 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275),
-    transform 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
-  transition-delay: 150ms;
-  line-height: 0;
-  box-sizing: border-box;
-  pointer-events: none;
-  white-space: nowrap;
-  width: 280px;
-  height: auto;
-  max-height: 324px;
-
-  * {
-    box-sizing: border-box;
-  }
-
-  hr {
-    border: 0;
-    height: 0;
-    border-top: 1px solid ${s("divider")};
-  }
-
-  ${({ active, isAbove }) =>
-    active &&
-    `
-    transform: translateY(${isAbove ? "6px" : "-6px"}) scale(1);
-    pointer-events: all;
-    opacity: 1;
-  `};
-
-  @media print {
-    display: none;
-  }
-`;
-
 export default SuggestionsMenu;
@@ -5,6 +5,7 @@ import styled from "styled-components";
 import { usePortalContext } from "~/components/Portal";
 import {
  MenuButton,
+  MenuDisclosure,
  MenuIconWrapper,
  MenuLabel,
 } from "~/components/primitives/components/Menu";
@@ -26,6 +27,8 @@ export type Props = {
  subtitle?: React.ReactNode;
  /** A string representing the keyboard shortcut for the item */
  shortcut?: string;
+  /** Whether to show a disclosure arrow indicating a submenu */
+  disclosure?: boolean;
 };

 function SuggestionsMenuItem({
@@ -37,6 +40,7 @@ function SuggestionsMenuItem({
  subtitle,
  shortcut,
  icon,
+  disclosure,
 }: Props) {
  const portal = usePortalContext();
  const ref = React.useCallback(
@@ -75,6 +79,7 @@ function SuggestionsMenuItem({
        )}
        {shortcut && <Shortcut $active={selected}>{shortcut}</Shortcut>}
      </MenuLabel>
+      {disclosure && <MenuDisclosure />}
    </MenuButton>
  );
 }
@@ -55,12 +55,10 @@ export default class BlockMenuExtension extends Suggestion {
                Decoration.widget(
                  parent.pos,
                  () => {
-                    button.addEventListener(
-                      "click",
-                      action(() => {
-                        this.state.open = true;
-                      })
-                    );
+                    button.onclick = action(() => {
+                      this.state.query = "";
+                      this.state.open = true;
+                    });
                    return button;
                  },
                  {
@@ -102,6 +102,10 @@ export default class FindAndReplaceExtension extends Extension {
      // have changed underneath us since the last search.
      this.search(state.doc);

+      if (this.currentResultIndex >= this.results.length) {
+        return false;
+      }
+
      const result = this.results[this.currentResultIndex];

      if (!result) {
@@ -220,6 +224,10 @@ export default class FindAndReplaceExtension extends Extension {
   * Expand any folded toggle blocks that contain the current match.
   */
  private expandFoldedTogglesForCurrentMatch() {
+    if (this.currentResultIndex >= this.results.length) {
+      return;
+    }
+
    const result = this.results[this.currentResultIndex];
    if (!result) {
      return;
@@ -272,7 +280,7 @@ export default class FindAndReplaceExtension extends Extension {
  private rebaseNextResult(replace: string, index: number, lastOffset = 0) {
    const nextIndex = index + 1;

-    if (!this.results[nextIndex]) {
+    if (nextIndex >= this.results.length) {
      return undefined;
    }

@@ -45,9 +45,8 @@ export default class SelectionToolbarExtension extends Extension {
    }

    if (
-      (isNodeActive(schema.nodes.code_block)(state) ||
-        isNodeActive(schema.nodes.code_fence)(state)) &&
-      selection.from > 0
+      isNodeActive(schema.nodes.code_block)(state) ||
+      isNodeActive(schema.nodes.code_fence)(state)
    ) {
      return selection;
    }
@@ -78,6 +78,11 @@ export type Props = {
  focusedCommentId?: string;
  /** If the editor should not allow editing */
  readOnly?: boolean;
+  /**
+   * Whether we are rendering a cached version of the document while multiplayer loads.
+   * This is used to disable some editor functionality
+   */
+  cacheOnly?: boolean;
  /** If the editor should still allow editing checkboxes when it is readOnly */
  canUpdate?: boolean;
  /** If the editor should still allow commenting when it is readOnly */
@@ -687,19 +692,14 @@ export class Editor extends React.PureComponent<
  public removeComment = (commentId: string) => {
    const { state, dispatch } = this.view;
    const tr = state.tr;
-    let markRemoved = false;

    state.doc.descendants((node, pos) => {
-      if (markRemoved) {
-        return false;
-      }
      const mark = node.marks.find(
        (m) => m.type === state.schema.marks.comment && m.attrs.id === commentId
      );

      if (mark) {
        tr.removeMark(pos, pos + node.nodeSize, mark);
-        markRemoved = true;
        return;
      }

@@ -713,10 +713,7 @@ export class Editor extends React.PureComponent<
          marks: updatedMarks,
        };
        tr.setNodeMarkup(pos, undefined, attrs);
-        markRemoved = true;
      }
-
-      return;
    });

    dispatch(tr);
@@ -734,13 +731,8 @@ export class Editor extends React.PureComponent<
  ) => {
    const { state, dispatch } = this.view;
    const tr = state.tr;
-    let markUpdated = false;

    state.doc.descendants((node, pos) => {
-      if (markUpdated) {
-        return false;
-      }
-
      const mark = node.marks.find(
        (m) => m.type === state.schema.marks.comment && m.attrs.id === commentId
      );
@@ -753,7 +745,6 @@ export class Editor extends React.PureComponent<
          ...attrs,
        });
        tr.removeMark(from, to, mark).addMark(from, to, newMark);
-        markUpdated = true;
        return;
      }

@@ -769,10 +760,7 @@ export class Editor extends React.PureComponent<
          marks: updatedMarks,
        };
        tr.setNodeMarkup(pos, undefined, newAttrs);
-        markUpdated = true;
      }
-
-      return;
    });

    dispatch(tr);
@@ -854,7 +842,7 @@ export class Editor extends React.PureComponent<
            column
          >
            <EditorContainer
-              rtl={isRTL}
+              $rtl={isRTL}
              grow={grow}
              readOnly={readOnly}
              readOnlyWriteCheckboxes={canUpdate}
@@ -867,6 +855,7 @@ export class Editor extends React.PureComponent<
            />

            {this.widgets &&
+              !this.props.cacheOnly &&
              Object.values(this.widgets).map((Widget, index) => (
                <Widget
                  key={String(index)}
@@ -887,7 +876,7 @@ export class Editor extends React.PureComponent<
              images={this.getLightboxImages()}
              activeImage={this.state.activeLightboxImage}
              onUpdate={this.updateActiveLightboxImage}
-              onClose={this.view.focus}
+              onClose={this.view.focus.bind(this.view)}
            />
          )}
        </EditorContext.Provider>
@@ -905,7 +894,11 @@ const EditorContainer = styled(Styles)<{
    css`
      span#comment-${props.focusedCommentId} {
        background: ${transparentize(0.5, props.theme.brand.marine)};
-        border-bottom: 2px solid ${props.theme.commentMarkBackground};
+        text-decoration: underline 2px ${props.theme.commentMarkBackground};
+
+        * {
+          background: transparent !important;
+        }
      }
      a#comment-${props.focusedCommentId}
        ~ span.component-image
@@ -1,5 +1,6 @@
-import { CopyIcon, EditIcon, ExpandedIcon } from "outline-icons";
+import { CopyIcon, EditIcon, ExpandedIcon, TextWrapIcon } from "outline-icons";
 import type { Node as ProseMirrorNode } from "prosemirror-model";
+import { NodeSelection } from "prosemirror-state";
 import type { EditorState } from "prosemirror-state";
 import {
  pluginKey as mermaidPluginKey,
@@ -19,7 +20,10 @@ export default function codeMenuItems(
  readOnly: boolean | undefined,
  dictionary: Dictionary
 ): MenuItem[] {
-  const node = state.selection.$from.node();
+  const node =
+    state.selection instanceof NodeSelection
+      ? state.selection.node
+      : state.selection.$from.node();

  const frequentLanguages = getFrequentCodeLanguages();

@@ -44,6 +48,9 @@ export default function codeMenuItems(
        ]
      : remainingLangMenuItems;

+  const isEditingMermaid = !!(mermaidPluginKey.getState(state) as MermaidState)
+    ?.editingId;
+
  return [
    {
      name: "copyToClipboard",
@@ -60,10 +67,17 @@ export default function codeMenuItems(
      name: "edit_mermaid",
      icon: <EditIcon />,
      tooltip: dictionary.editDiagram,
-      visible:
-        !(mermaidPluginKey.getState(state) as MermaidState)?.editingId &&
-        isMermaid(node) &&
-        !readOnly,
+      visible: isMermaid(node) && !isEditingMermaid && !readOnly,
+    },
+    {
+      name: "separator",
+    },
+    {
+      name: "toggleCodeBlockWrap",
+      icon: <TextWrapIcon />,
+      tooltip: dictionary.wrapText,
+      active: () => node.attrs.wrap,
+      visible: !readOnly && (!isMermaid(node) || isEditingMermaid),
    },
    {
      name: "separator",
@@ -10,7 +10,11 @@ if (!window.env) {
  );
 }

-const env: Record<string, any> = {
+const env: Record<string, any> & {
+  isDevelopment: boolean;
+  isTest: boolean;
+  isProduction: boolean;
+} = {
  ...window.env,
  isDevelopment: window.env.ENVIRONMENT === "development",
  isTest: window.env.ENVIRONMENT === "test",
@@ -7,14 +7,25 @@ import useStores from "~/hooks/useStores";
 import type Model from "~/models/base/Model";
 import type Policy from "~/models/Policy";
 import type { ActionContext as ActionContextType } from "~/types";
+import type { SidebarContextType } from "~/components/Sidebar/components/SidebarContext";

 export const ActionContext = createContext<ActionContextType | undefined>(
  undefined
 );

+interface ActionContextProviderValue {
+  /** Models to add to the active models context for this subtree. */
+  activeModels?: Model[];
+  isMenu?: boolean;
+  isCommandBar?: boolean;
+  isButton?: boolean;
+  sidebarContext?: SidebarContextType;
+  event?: Event;
+}
+
 type ActionContextProviderProps = {
  children: ReactNode;
-  value?: Partial<ActionContextType>;
+  value?: ActionContextProviderValue;
 };

 /**
@@ -23,15 +34,15 @@ type ActionContextProviderProps = {
 *
 * @example
 * ```tsx
- * // Override context for a command bar
- * <ActionContextProvider value={{ isCommandBar: true }}>
- *   <CommandBar />
+ * // Override active models for a collection menu
+ * <ActionContextProvider value={{ activeModels: [collection] }}>
+ *   <CollectionMenu />
 * </ActionContextProvider>
 *
 * // Nested overrides
- * <ActionContextProvider value={{ activeCollectionId: "collection-1" }}>
+ * <ActionContextProvider value={{ activeModels: [collection] }}>
 *   <CollectionView />
- *   <ActionContextProvider value={{ activeDocumentId: "doc-1" }}>
+ *   <ActionContextProvider value={{ activeModels: [document] }}>
 *     <DocumentView />
 *   </ActionContextProvider>
 * </ActionContextProvider>
@@ -45,6 +56,7 @@ export const ActionContextProvider = observer(function ActionContextProvider_({
  const stores = useStores();
  const { t } = useTranslation();
  const location = useLocation();
+  const { activeModels: valueModels, ...overrides } = value;

  // Create the base context if we don't have a parent context
  const baseContext: ActionContextType = parentContext ?? {
@@ -56,7 +68,6 @@ export const ActionContextProvider = observer(function ActionContextProvider_({
    activeCollectionId: stores.ui.activeCollectionId ?? undefined,
    activeDocumentId: stores.ui.activeDocumentId ?? undefined,

-    // New API
    getActiveModels: <T extends Model>(
      modelClass: new (...args: any[]) => T
    ): T[] => stores.ui.getActiveModels<T>(modelClass),
@@ -74,7 +85,7 @@ export const ActionContextProvider = observer(function ActionContextProvider_({
        .filter((policy): policy is Policy => policy !== undefined),

    isModelActive: (model: Model): boolean => stores.ui.isModelActive(model),
-    activeModels: stores.ui.activeModels,
+    activeModels: new Set(stores.ui.activeModels.values()),

    currentUserId: stores.auth.user?.id,
    currentTeamId: stores.auth.team?.id,
@@ -83,10 +94,58 @@ export const ActionContextProvider = observer(function ActionContextProvider_({
    t,
  };

-  // Merge the parent context with the provided overrides
+  // Override model accessors when models are provided in value
+  const getActiveModels =
+    valueModels && valueModels.length > 0
+      ? <T extends Model>(modelClass: new (...args: any[]) => T): T[] => {
+          const matching = valueModels.filter(
+            (model): model is T => model instanceof modelClass
+          );
+          return matching.length > 0
+            ? matching
+            : baseContext.getActiveModels(modelClass);
+        }
+      : baseContext.getActiveModels;
+
+  const getActiveModel = <T extends Model>(
+    modelClass: new (...args: any[]) => T
+  ): T | undefined => getActiveModels(modelClass)[0];
+
+  const getActivePolicies = <T extends Model>(
+    modelClass: new (...args: any[]) => T
+  ): Policy[] =>
+    getActiveModels(modelClass)
+      .map((node) => stores.policies.get(node.id))
+      .filter((policy): policy is Policy => policy !== undefined);
+
+  const allActiveModels =
+    valueModels && valueModels.length > 0
+      ? new Set([...baseContext.activeModels, ...valueModels])
+      : baseContext.activeModels;
+
+  const isModelActive = (model: Model): boolean => allActiveModels.has(model);
+
+  // Derive legacy IDs from value models, falling back to base context
+  const activeCollectionId =
+    valueModels?.find(
+      (m) => (m.constructor as typeof Model).modelName === "Collection"
+    )?.id ?? baseContext.activeCollectionId;
+
+  const activeDocumentId =
+    valueModels?.find(
+      (m) => (m.constructor as typeof Model).modelName === "Document"
+    )?.id ?? baseContext.activeDocumentId;
+
  const contextValue: ActionContextType = {
    ...baseContext,
-    ...value,
+    ...overrides,
+    activeCollectionId,
+    activeDocumentId,
+    getActiveModels,
+    getActiveModel,
+    getActivePolicies,
+    isModelActive,
+    activeModels: allActiveModels,
  };

  return (
@@ -26,6 +26,9 @@ export default function useDictionary() {
      alignFullWidth: t("Full width"),
      bulletList: t("Bulleted list"),
      checkboxList: t("Todo list"),
+      showCompleted: (count: number) =>
+        t("Show {{ count }} completed", { count }),
+      hideCompleted: t("Hide completed"),
      codeBlock: t("Code block"),
      codeCopied: t("Copied to clipboard"),
      codeInline: t("Code"),
@@ -120,6 +123,7 @@ export default function useDictionary() {
      uploadImage: t("Upload an image"),
      formattingControls: t("Formatting controls"),
      distributeColumns: t("Distribute columns"),
+      wrapText: t("Wrap text"),
    }),
    [t]
  );
@@ -11,7 +11,7 @@ import {
  unstarDocument,
  editDocument,
  shareDocument,
-  createNestedDocument,
+  createNewDocument,
  importDocument,
  createTemplateFromDocument,
  duplicateDocument,
@@ -19,10 +19,8 @@ import {
  unpublishDocument,
  archiveDocument,
  moveDocument,
-  moveTemplate,
  applyTemplateFactory,
  pinDocument,
-  createDocumentFromTemplate,
  openDocumentComments,
  openDocumentHistory,
  openDocumentInsights,
@@ -36,7 +34,7 @@ import {
 } from "~/actions/definitions/documents";
 import { ActiveDocumentSection } from "~/actions/sections";
 import useMobile from "./useMobile";
-import type Document from "~/models/Document";
+import type Template from "~/models/Template";
 import usePolicy from "./usePolicy";
 import useCurrentUser from "./useCurrentUser";
 import { useTemplateMenuActions } from "./useTemplateMenuActions";
@@ -50,7 +48,7 @@ type Props = {
  /** Invoked when the "Rename" menu item is clicked */
  onRename?: () => void;
  /** Callback when a template is selected to apply its content to the document */
-  onSelectTemplate?: (template: Document) => void;
+  onSelectTemplate?: (template: Template) => void;
 };

 export function useDocumentMenuAction({
@@ -94,18 +92,16 @@ export function useDocumentMenuAction({
        perform: () => requestAnimationFrame(() => onRename?.()),
      }),
      shareDocument,
-      createNestedDocument,
-      importDocument,
      createTemplateFromDocument,
      duplicateDocument,
      publishDocument,
      unpublishDocument,
      archiveDocument,
      moveDocument,
-      moveTemplate,
      applyTemplateFactory({ actions: templateMenuActions }),
+      importDocument,
+      createNewDocument,
      pinDocument,
-      createDocumentFromTemplate,
      ActionSeparator,
      openDocumentComments,
      openDocumentHistory,
@@ -1,9 +1,10 @@
 import find from "lodash/find";
 import { useEffect, useMemo } from "react";
 import embeds from "@shared/editor/embeds";
-import { IntegrationType } from "@shared/types";
+import { IntegrationType, TeamPreference } from "@shared/types";
 import type Integration from "~/models/Integration";
 import Logger from "~/utils/Logger";
+import useCurrentTeam from "./useCurrentTeam";
 import useStores from "./useStores";

 /**
@@ -14,6 +15,7 @@ import useStores from "./useStores";
 */
 export default function useEmbeds(loadIfMissing = false) {
  const { integrations } = useStores();
+  const team = useCurrentTeam({ rejectOnEmpty: false });

  useEffect(() => {
    async function fetchEmbedIntegrations() {
@@ -31,6 +33,9 @@ export default function useEmbeds(loadIfMissing = false) {
    }
  }, [integrations, loadIfMissing]);

+  const disabledEmbeds =
+    (team?.getPreference(TeamPreference.DisabledEmbeds) as string[]) || [];
+
  return useMemo(
    () =>
      embeds.map((e) => {
@@ -42,8 +47,11 @@ export default function useEmbeds(loadIfMissing = false) {
          e.settings = integration.settings;
        }

+        e.disabled = disabledEmbeds.includes(e.id);
+
        return e;
      }),
-    [integrations.orderedData]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [integrations.orderedData, team?.preferences]
  );
 }
@@ -0,0 +1,91 @@
+import * as React from "react";
+import { TrashIcon } from "outline-icons";
+import { Trans, useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import type Emoji from "~/models/Emoji";
+import ConfirmationDialog from "~/components/ConfirmationDialog";
+import usePolicy from "~/hooks/usePolicy";
+import useStores from "~/hooks/useStores";
+import { createAction } from "~/actions";
+import { EmojiSecion } from "~/actions/sections";
+import { useMenuAction } from "~/hooks/useMenuAction";
+
+/**
+ * Hook that constructs the action menu for emoji management operations.
+ * 
+ * @param targetEmoji - the emoji to build actions for, or null to skip.
+ * @returns action with children for use in menus, or undefined if emoji is null.
+ */
+export function useEmojiMenuActions(targetEmoji: Emoji | null) {
+  const { t } = useTranslation();
+  const { dialogs } = useStores();
+  const can = usePolicy(targetEmoji ?? ({} as Emoji));
+
+  const openDeleteDialog = React.useCallback(() => {
+    if (!targetEmoji) {
+      return;
+    }
+    dialogs.openModal({
+      title: t("Delete Emoji"),
+      content: (
+        <DeleteEmojiDialog emoji={targetEmoji} onSubmit={dialogs.closeAllModals} />
+      ),
+    });
+  }, [t, targetEmoji, dialogs]);
+
+  const actionList = React.useMemo(
+    () =>
+      !targetEmoji || !can.delete
+        ? []
+        : [
+            createAction({
+              name: `${t("Delete")}…`,
+              icon: <TrashIcon />,
+              section: EmojiSecion,
+              visible: true,
+              dangerous: true,
+              perform: openDeleteDialog,
+            }),
+          ],
+    [t, targetEmoji, can.delete, openDeleteDialog]
+  );
+
+  return useMenuAction(actionList);
+}
+
+const DeleteEmojiDialog = ({
+  emoji,
+  onSubmit,
+}: {
+  emoji: Emoji;
+  onSubmit: () => void;
+}) => {
+  const { t } = useTranslation();
+
+  const handleSubmit = async () => {
+    if (emoji) {
+      await emoji.delete();
+      onSubmit();
+      toast.success(t("Emoji deleted"));
+    }
+  };
+
+  return (
+    <ConfirmationDialog
+      onSubmit={handleSubmit}
+      submitText={t("I'm sure – Delete")}
+      savingText={`${t("Deleting")}…`}
+      danger
+    >
+      <Trans
+        defaults="Are you sure you want to delete the <em>{{emojiName}}</em> emoji? You will no longer be able to use it in your documents or collections."
+        values={{
+          emojiName: emoji.name,
+        }}
+        components={{
+          em: <strong />,
+        }}
+      />
+    </ConfirmationDialog>
+  );
+};
@@ -0,0 +1,115 @@
+import * as React from "react";
+import { EditIcon, GroupIcon, TrashIcon } from "outline-icons";
+import { useTranslation } from "react-i18next";
+import type Group from "~/models/Group";
+import {
+  DeleteGroupDialog,
+  EditGroupDialog,
+  ViewGroupMembersDialog,
+} from "~/scenes/Settings/components/GroupDialogs";
+import usePolicy from "~/hooks/usePolicy";
+import useStores from "~/hooks/useStores";
+import {
+  ActionSeparator,
+  createAction,
+  createExternalLinkAction,
+} from "~/actions";
+import { GroupSection } from "~/actions/sections";
+import { useMenuAction } from "~/hooks/useMenuAction";
+
+/**
+ * Hook that constructs the action menu for group management operations.
+ * 
+ * @param targetGroup - the group to build actions for, or null to skip.
+ * @returns action with children for use in menus, or undefined if group is null.
+ */
+export function useGroupMenuActions(targetGroup: Group | null) {
+  const { t } = useTranslation();
+  const { dialogs } = useStores();
+  const can = usePolicy(targetGroup ?? ({} as Group));
+
+  const openMembersDialog = React.useCallback(() => {
+    if (!targetGroup) {
+      return;
+    }
+    dialogs.openModal({
+      title: t("Group members"),
+      content: <ViewGroupMembersDialog group={targetGroup} />,
+    });
+  }, [t, targetGroup, dialogs]);
+
+  const openEditDialog = React.useCallback(() => {
+    if (!targetGroup) {
+      return;
+    }
+    dialogs.openModal({
+      title: t("Edit group"),
+      content: (
+        <EditGroupDialog group={targetGroup} onSubmit={dialogs.closeAllModals} />
+      ),
+    });
+  }, [t, targetGroup, dialogs]);
+
+  const openDeleteDialog = React.useCallback(() => {
+    if (!targetGroup) {
+      return;
+    }
+    dialogs.openModal({
+      title: t("Delete group"),
+      content: (
+        <DeleteGroupDialog group={targetGroup} onSubmit={dialogs.closeAllModals} />
+      ),
+    });
+  }, [t, targetGroup, dialogs]);
+
+  const actionList = React.useMemo(
+    () =>
+      !targetGroup
+        ? []
+        : [
+            createAction({
+              name: `${t("Members")}…`,
+              icon: <GroupIcon />,
+              section: GroupSection,
+              visible: !!(targetGroup && can.read),
+              perform: openMembersDialog,
+            }),
+            ActionSeparator,
+            createAction({
+              name: `${t("Edit")}…`,
+              icon: <EditIcon />,
+              section: GroupSection,
+              visible: !!(targetGroup && can.update),
+              perform: openEditDialog,
+            }),
+            createAction({
+              name: `${t("Delete")}…`,
+              icon: <TrashIcon />,
+              section: GroupSection,
+              visible: !!(targetGroup && can.delete),
+              dangerous: true,
+              perform: openDeleteDialog,
+            }),
+            ActionSeparator,
+            createExternalLinkAction({
+              name: targetGroup.externalId ?? "",
+              section: GroupSection,
+              visible: !!targetGroup.externalId,
+              disabled: true,
+              url: "",
+            }),
+          ],
+    [
+      t,
+      targetGroup,
+      can.read,
+      can.update,
+      can.delete,
+      openMembersDialog,
+      openEditDialog,
+      openDeleteDialog,
+    ]
+  );
+
+  return useMenuAction(actionList);
+}
@@ -45,6 +45,8 @@ export default function useImportDocument(
        }

        for (const file of files) {
+          const toastId = toast.loading(`${t("Uploading")}…`);
+
          try {
            const doc = await documents.import(file, documentId, cId, {
              publish: true,
@@ -55,6 +57,8 @@ export default function useImportDocument(
            }
          } catch (err) {
            toast.error(err.message);
+          } finally {
+            toast.dismiss(toastId);
          }
        }
      } catch (err) {
@@ -63,9 +63,14 @@ window.addEventListener("keydown", (event) => {
    return;
  }

+  // Track whether defaultPrevented was already set by an external handler (e.g.
+  // Radix UI's DismissableLayer) so we only break on preventDefault calls made
+  // by our own callbacks.
+  const wasDefaultPrevented = event.defaultPrevented;
+
  // reverse so that the last registered callbacks get executed first
-  for (const registered of callbacks.reverse()) {
-    if (event.defaultPrevented === true) {
+  for (const registered of [...callbacks].reverse()) {
+    if (!wasDefaultPrevented && event.defaultPrevented) {
      break;
    }

@@ -1,6 +1,6 @@
-import { useCallback } from "react";
+import { useCallback, useRef } from "react";
 import { getCookie, removeCookie, setCookie } from "tiny-cookie";
-import usePersistedState from "~/hooks/usePersistedState";
+import usePersistedState, { setPersistedState } from "~/hooks/usePersistedState";
 import Logger from "~/utils/Logger";
 import history from "~/utils/history";
 import { isAllowedLoginRedirect } from "~/utils/urls";
@@ -30,6 +30,23 @@ export function useLastVisitedPath(): [string, (path: string) => void] {
  return [lastVisitedPath, setPathAsLastVisitedPath] as const;
 }

+/**
+ * Hook that automatically tracks the current path as the last visited path.
+ * This uses a ref to track the previous path and updates localStorage directly
+ * without using useEffect to avoid React Doctor warnings.
+ *
+ * @param currentPath The current path to track.
+ */
+export function useTrackLastVisitedPath(currentPath: string): void {
+  const prevPathRef = useRef<string>();
+  
+  // Update localStorage directly if path has changed
+  if (prevPathRef.current !== currentPath && isAllowedLoginRedirect(currentPath)) {
+    prevPathRef.current = currentPath;
+    setPersistedState("lastVisitedPath", currentPath);
+  }
+}
+
 /**
 * Sets the path that the user visited before being asked to login.
 *
@@ -92,6 +92,14 @@ export default function usePaginatedRequest<T = unknown>(
    setData(undefined);
    setPage(0);
    setOffset(0);
+    setPaginatedReq(
+      () => () =>
+        requestFn({
+          ...params,
+          offset: 0,
+          limit: fetchLimit,
+        })
+    );
  }, [requestFn]);

  return { data, next, loading, error, page, offset, end };
@@ -1,4 +1,3 @@
-import type { Icon } from "outline-icons";
 import {
  EmailIcon,
  ProfileIcon,
@@ -9,7 +8,7 @@ import {
  GlobeIcon,
  ShieldIcon,
  TeamIcon,
-  BeakerIcon,
+  SparklesIcon,
  SettingsIcon,
  ExportIcon,
  ImportIcon,
@@ -17,9 +16,8 @@ import {
  PlusIcon,
  InternetIcon,
  SmileyIcon,
-  BuildingBlocksIcon,
+  BrowserIcon,
 } from "outline-icons";
-import type { ComponentProps } from "react";
 import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { integrationSettingsPath } from "@shared/utils/routeHelpers";
@@ -34,7 +32,7 @@ import useStores from "./useStores";

 const ApiKeys = lazy(() => import("~/scenes/Settings/ApiKeys"));
 const Applications = lazy(() => import("~/scenes/Settings/Applications"));
-const APIAndApps = lazy(() => import("~/scenes/Settings/APIAndApps"));
+const APIAndAccess = lazy(() => import("~/scenes/Settings/APIAndAccess"));
 const Authentication = lazy(() => import("~/scenes/Settings/Authentication"));
 const Details = lazy(() => import("~/scenes/Settings/Details"));
 const Export = lazy(() => import("~/scenes/Settings/Export"));
@@ -50,11 +48,16 @@ const Security = lazy(() => import("~/scenes/Settings/Security"));
 const Shares = lazy(() => import("~/scenes/Settings/Shares"));
 const Templates = lazy(() => import("~/scenes/Settings/Templates"));
 const CustomEmojis = lazy(() => import("~/scenes/Settings/CustomEmojis"));
+const Embeds = lazy(() => import("~/scenes/Settings/Embeds"));

 export type ConfigItem = {
  name: string;
  path: string;
-  icon: React.FC<ComponentProps<typeof Icon>>;
+  icon: React.FC<{
+    size?: number;
+    fill?: string;
+    monochrome?: boolean;
+  }>;
  component: React.ComponentType;
  description?: string;
  preload?: () => void;
@@ -105,13 +108,13 @@ const useSettingsConfig = () => {
        icon: EmailIcon,
      },
      {
-        name: t("API & Apps"),
-        path: settingsPath("api-and-apps"),
-        component: APIAndApps.Component,
-        preload: APIAndApps.preload,
+        name: t("API & Access"),
+        path: settingsPath("api-and-access"),
+        component: APIAndAccess.Component,
+        preload: APIAndAccess.preload,
        enabled: true,
        group: t("Account"),
-        icon: BuildingBlocksIcon,
+        icon: PadlockIcon,
      },
      // Workspace
      {
@@ -142,13 +145,13 @@ const useSettingsConfig = () => {
        icon: ShieldIcon,
      },
      {
-        name: t("Features"),
+        name: t("AI"),
        path: settingsPath("features"),
        component: Features.Component,
        preload: Features.preload,
        enabled: can.update,
        group: t("Workspace"),
-        icon: BeakerIcon,
+        icon: SparklesIcon,
      },
      {
        name: t("Members"),
@@ -173,7 +176,7 @@ const useSettingsConfig = () => {
        path: settingsPath("templates"),
        component: Templates.Component,
        preload: Templates.preload,
-        enabled: can.createTemplate,
+        enabled: can.readTemplate,
        group: t("Workspace"),
        icon: ShapesIcon,
      },
@@ -232,6 +235,18 @@ const useSettingsConfig = () => {
        icon: ExportIcon,
      },
      // Integrations
+      {
+        name: t("Embeds"),
+        path: integrationSettingsPath("embeds"),
+        component: Embeds.Component,
+        preload: Embeds.preload,
+        description: t(
+          "Configure which embed providers are available in the editor."
+        ),
+        enabled: can.update,
+        group: t("Integrations"),
+        icon: BrowserIcon,
+      },
      {
        name: `${t("Install")}…`,
        path: settingsPath("integrations"),
--- a/Show More
+++ b/Show More