minor fixes

fix mobile menu closing functionality
2026-06-14 03:45:00 +03:00 · 2026-02-26 22:48:29 +01:00 · 2026-02-26 18:16:59 +01:00 · 2026-02-24 18:50:02 +01:00 · 2026-02-24 14:10:41 +01:00 · 2026-02-23 22:52:21 +01:00
494 changed files with 7547 additions and 19082 deletions
@@ -1,21 +1,5 @@
 NODE_ENV=production

-# –––––––––––––––––––––––––––––––––––––––––
-# –––––––––––  FILE-BASED SECRETS  ––––––––
-# –––––––––––––––––––––––––––––––––––––––––
-#
-# Any environment variable can be loaded from a file by appending _FILE to the
-# variable name and setting the value to the path of the file. This is useful
-# for Docker secrets and other file-based secret management systems.
-#
-# For example, instead of:
-#   SECRET_KEY=your_secret_key
-# You can use:
-#   SECRET_KEY_FILE=/run/secrets/outline_secret_key
-#
-# The file contents will be trimmed of leading/trailing whitespace. If both the
-# variable and the _FILE variant are set, the direct variable takes precedence.
-
 # This URL should point to the fully qualified, publicly accessible, URL. If using a
 # proxy this will be the proxy's URL.
 URL=
@@ -135,18 +119,14 @@ 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  ––––––––––
 # ––––––––––––––––––––––––––––––––––––––

-# Third party signin credentials, at least ONE OF these is required for a 
-# working installation or you'll have no sign-in options.
+# Third party signin credentials, at least ONE OF EITHER Google, Slack,
+# Discord, or Microsoft is required for a working installation or you'll
+# have no sign-in options.

 # Slack sign-in provider
 # DOCS: https://docs.getoutline.com/s/hosting/doc/slack-sgMujR8J9J
@@ -24,17 +24,17 @@ jobs:
      - uses: actions/checkout@v5
      - name: Enable Corepack
        run: corepack enable
-      - name: Use Node.js 24.x
+      - name: Use Node.js 22.x
        uses: actions/setup-node@v5
        with:
-          node-version: 24.x
+          node-version: 22.x
          cache: "yarn"
      - name: Cache node_modules
        id: cache-node-modules
        uses: actions/cache@v4
        with:
          path: node_modules
-          key: ${{ runner.os }}-node-modules-24.x-${{ hashFiles('yarn.lock') }}
+          key: ${{ runner.os }}-node-modules-${{ hashFiles('yarn.lock') }}
      - name: Install dependencies
        if: steps.cache-node-modules.outputs.cache-hit != 'true'
        run: yarn install --immutable
@@ -48,13 +48,13 @@ jobs:
        run: corepack enable
      - uses: actions/setup-node@v5
        with:
-          node-version: 24.x
+          node-version: 22.x
          cache: "yarn"
      - name: Restore node_modules
        uses: actions/cache@v4
        with:
          path: node_modules
-          key: ${{ runner.os }}-node-modules-24.x-${{ hashFiles('yarn.lock') }}
+          key: ${{ runner.os }}-node-modules-${{ hashFiles('yarn.lock') }}
      - run: yarn lint --quiet

  types:
@@ -66,13 +66,13 @@ jobs:
        run: corepack enable
      - uses: actions/setup-node@v5
        with:
-          node-version: 24.x
+          node-version: 22.x
          cache: "yarn"
      - name: Restore node_modules
        uses: actions/cache@v4
        with:
          path: node_modules
-          key: ${{ runner.os }}-node-modules-24.x-${{ hashFiles('yarn.lock') }}
+          key: ${{ runner.os }}-node-modules-${{ hashFiles('yarn.lock') }}
      - run: yarn tsc

  changes:
@@ -114,13 +114,13 @@ jobs:
        run: corepack enable
      - uses: actions/setup-node@v5
        with:
-          node-version: 24.x
+          node-version: 22.x
          cache: "yarn"
      - name: Restore node_modules
        uses: actions/cache@v4
        with:
          path: node_modules
-          key: ${{ runner.os }}-node-modules-24.x-${{ hashFiles('yarn.lock') }}
+          key: ${{ runner.os }}-node-modules-${{ hashFiles('yarn.lock') }}
      - run: yarn test:${{ matrix.test-group }}

  test-server:
@@ -152,13 +152,13 @@ jobs:
        run: corepack enable
      - uses: actions/setup-node@v5
        with:
-          node-version: 24.x
+          node-version: 22.x
          cache: "yarn"
      - name: Restore node_modules
        uses: actions/cache@v4
        with:
          path: node_modules
-          key: ${{ runner.os }}-node-modules-24.x-${{ hashFiles('yarn.lock') }}
+          key: ${{ runner.os }}-node-modules-${{ hashFiles('yarn.lock') }}
      - run: yarn sequelize db:migrate
      - name: Run server tests
        run: |
@@ -167,7 +167,7 @@ jobs:

  bundle-size:
    needs: [setup, types, changes]
-    if: ${{ (needs.changes.outputs.app == 'true' || needs.changes.outputs.config == 'true') && github.repository == 'outline/outline' }}
+    if: ${{ needs.changes.outputs.app == 'true' && github.repository == 'outline/outline' }}
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v5
@@ -175,13 +175,13 @@ jobs:
        run: corepack enable
      - uses: actions/setup-node@v5
        with:
-          node-version: 24.x
+          node-version: 22.x
          cache: "yarn"
      - name: Restore node_modules
        uses: actions/cache@v4
        with:
          path: node_modules
-          key: ${{ runner.os }}-node-modules-24.x-${{ hashFiles('yarn.lock') }}
+          key: ${{ runner.os }}-node-modules-${{ hashFiles('yarn.lock') }}
      - name: Set environment to production
        run: echo "NODE_ENV=production" >> $GITHUB_ENV
      - run: yarn vite:build
@@ -1,43 +0,0 @@
-name: Docker Build Check
-
-on:
-  push:
-    paths:
-      - "Dockerfile"
-      - "Dockerfile.base"
-  pull_request:
-    paths:
-      - "Dockerfile"
-      - "Dockerfile.base"
-
-env:
-  BASE_IMAGE_NAME: outline-base
-
-jobs:
-  build:
-    runs-on: ubicloud-standard-8
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v5
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-        with:
-          driver: docker
-
-      - name: Build base image
-        uses: docker/build-push-action@v6
-        with:
-          context: .
-          file: Dockerfile.base
-          tags: ${{ env.BASE_IMAGE_NAME }}:latest
-          push: false
-
-      - name: Build main image
-        uses: docker/build-push-action@v6
-        with:
-          context: .
-          file: Dockerfile
-          push: false
-          build-args: |
-            BASE_IMAGE=${{ env.BASE_IMAGE_NAME }}:latest
@@ -17,11 +17,11 @@ jobs:
        uses: actions/checkout@v5

      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v4
+        uses: docker/setup-buildx-action@v3

      - name: Docker base meta
        id: base_meta
-        uses: docker/metadata-action@v6
+        uses: docker/metadata-action@v5
        with:
          images: |
            ${{ env.BASE_IMAGE_NAME }}
@@ -30,14 +30,14 @@ jobs:
            type=semver,pattern={{major}}.{{minor}}

      - name: Login to Docker Hub
-        uses: docker/login-action@v4
+        uses: docker/login-action@v3
        with:
          username: ${{ secrets.DOCKERHUB_USERNAME }}
          password: ${{ secrets.DOCKERHUB_TOKEN }}

      - name: Build and push base image
        id: base_build
-        uses: docker/build-push-action@v7
+        uses: docker/build-push-action@v6
        with:
          context: .
          file: Dockerfile.base
@@ -51,7 +51,7 @@ jobs:

      - name: Docker meta
        id: meta
-        uses: docker/metadata-action@v6
+        uses: docker/metadata-action@v5
        with:
          images: |
            ${{ env.IMAGE_NAME }}
@@ -61,7 +61,7 @@ jobs:

      - name: Build and push
        id: build
-        uses: docker/build-push-action@v7
+        uses: docker/build-push-action@v6
        with:
          context: .
          file: Dockerfile
@@ -96,11 +96,11 @@ jobs:
        uses: actions/checkout@v5

      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v4
+        uses: docker/setup-buildx-action@v3

      - name: Docker base meta
        id: base_meta
-        uses: docker/metadata-action@v6
+        uses: docker/metadata-action@v5
        with:
          images: |
            ${{ env.BASE_IMAGE_NAME }}
@@ -109,14 +109,14 @@ jobs:
            type=semver,pattern={{major}}.{{minor}}

      - name: Login to Docker Hub
-        uses: docker/login-action@v4
+        uses: docker/login-action@v3
        with:
          username: ${{ secrets.DOCKERHUB_USERNAME }}
          password: ${{ secrets.DOCKERHUB_TOKEN }}

      - name: Build and push base image
        id: base_build
-        uses: docker/build-push-action@v7
+        uses: docker/build-push-action@v6
        with:
          context: .
          file: Dockerfile.base
@@ -130,7 +130,7 @@ jobs:

      - name: Docker meta
        id: meta
-        uses: docker/metadata-action@v6
+        uses: docker/metadata-action@v5
        with:
          images: |
            ${{ env.IMAGE_NAME }}
@@ -140,7 +140,7 @@ jobs:

      - name: Build and push
        id: build
-        uses: docker/build-push-action@v7
+        uses: docker/build-push-action@v6
        with:
          context: .
          file: Dockerfile
@@ -182,17 +182,17 @@ jobs:
          merge-multiple: true

      - name: Login to Docker Hub
-        uses: docker/login-action@v4
+        uses: docker/login-action@v3
        with:
          username: ${{ secrets.DOCKERHUB_USERNAME }}
          password: ${{ secrets.DOCKERHUB_TOKEN }}

      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v4
+        uses: docker/setup-buildx-action@v3

      - name: Docker meta
        id: meta
-        uses: docker/metadata-action@v6
+        uses: docker/metadata-action@v5
        with:
          images: ${{ env.IMAGE_NAME }}
          tags: |
@@ -1,94 +0,0 @@
-name: Update Node.js LTS
-
-on:
-  schedule:
-    # Run every Monday at 9:00 UTC
-    - cron: "0 9 * * 1"
-  workflow_dispatch:
-
-permissions:
-  contents: write
-  pull-requests: write
-
-jobs:
-  update-node:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v5
-
-      - name: Check for Node.js LTS update
-        id: check
-        run: |
-          # Get current Node version from Dockerfile
-          CURRENT_VERSION=$(grep -oP 'FROM node:\K[0-9]+\.[0-9]+\.[0-9]+' Dockerfile.base)
-          echo "current=$CURRENT_VERSION" >> "$GITHUB_OUTPUT"
-          echo "Current Node.js version: $CURRENT_VERSION"
-
-          # Fetch the latest LTS release (any major version) from nodejs.org
-          LATEST_VERSION=$(curl -s https://nodejs.org/dist/index.json | \
-            jq -r '[.[] | select(.lts != false)][0].version' | \
-            sed 's/^v//')
-
-          if ! [[ "$LATEST_VERSION" =~ ^[0-9]+\.[0-9]+\.[0-9]+$ ]]; then
-            echo "::error::Failed to fetch a valid LTS version (got '$LATEST_VERSION')"
-            exit 1
-          fi
-
-          echo "latest=$LATEST_VERSION" >> "$GITHUB_OUTPUT"
-          echo "Latest Node.js LTS version: $LATEST_VERSION"
-
-          if [ "$CURRENT_VERSION" = "$LATEST_VERSION" ]; then
-            echo "updated=false" >> "$GITHUB_OUTPUT"
-            echo "Already up to date."
-          else
-            echo "updated=true" >> "$GITHUB_OUTPUT"
-            echo "Update available: $CURRENT_VERSION -> $LATEST_VERSION"
-          fi
-
-      - name: Update Node.js version references
-        if: steps.check.outputs.updated == 'true'
-        env:
-          CURRENT: ${{ steps.check.outputs.current }}
-          LATEST: ${{ steps.check.outputs.latest }}
-        run: |
-          CURRENT_MAJOR=$(echo "$CURRENT" | cut -d. -f1)
-          LATEST_MAJOR=$(echo "$LATEST" | cut -d. -f1)
-
-          # Update Dockerfiles
-          sed -i "s/node:${CURRENT}-slim/node:${LATEST}-slim/g" Dockerfile
-          sed -i "s/node:${CURRENT} /node:${LATEST} /g" Dockerfile.base
-
-          # Update references that depend on major version
-          if [ "$CURRENT_MAJOR" != "$LATEST_MAJOR" ]; then
-            # .nvmrc
-            echo "$LATEST_MAJOR" > .nvmrc
-
-            # CI workflow: step name, node-version, and cache keys
-            sed -i "s/Use Node.js ${CURRENT_MAJOR}.x/Use Node.js ${LATEST_MAJOR}.x/g" .github/workflows/ci.yml
-            sed -i "s/node-version: ${CURRENT_MAJOR}.x/node-version: ${LATEST_MAJOR}.x/g" .github/workflows/ci.yml
-            # Update cache keys: replace node-modules-[optional old version] with new version
-            sed -i -E "s/node-modules-([0-9]+\.x-)?/node-modules-${LATEST_MAJOR}.x-/g" .github/workflows/ci.yml
-
-            # package.json engines field: append new major version
-            sed -i "s/\"node\": \"\(.*\)\"/\"node\": \"\1 || ${LATEST_MAJOR}\"/" package.json
-          fi
-
-          echo "Updated Node.js from $CURRENT to $LATEST"
-
-      - name: Create pull request
-        if: steps.check.outputs.updated == 'true'
-        uses: peter-evans/create-pull-request@v7
-        with:
-          commit-message: "fix: Update Node.js to ${{ steps.check.outputs.latest }}"
-          title: "fix: Update Node.js to ${{ steps.check.outputs.latest }}"
-          body: |
-            Automated update of Node.js in Docker images.
-
-            - **Previous version:** ${{ steps.check.outputs.current }}
-            - **New version:** ${{ steps.check.outputs.latest }}
-
-            [Release notes](https://nodejs.org/en/blog/release/v${{ steps.check.outputs.latest }})
-          branch: automated/update-node-lts
-          delete-branch: true
-          labels: dependencies
@@ -1 +1 @@
-24
+22
@@ -1,6 +1,3 @@
 nodeLinker: node-modules

 npmMinimalAgeGate: 86400
-
-npmPreapprovedPackages:
-  - outline-icons
@@ -70,7 +70,7 @@ yarn install
 ### Exports

 - Exported members must appear at the top of the file.
- Always use named exports for new components & classes.
+- Prefer named exports for components & classes.
 - Document ALL public/exported functions with JSDoc.

 ## React Usage
@@ -6,7 +6,7 @@ ARG APP_PATH
 WORKDIR $APP_PATH

 # ---
-FROM node:24.14.1-slim AS runner
+FROM node:22.21.0-slim AS runner

 LABEL org.opencontainers.image.source="https://github.com/outline/outline"

@@ -1,5 +1,5 @@
 ARG APP_PATH=/opt/outline
-FROM node:24.14.1 AS deps
+FROM node:22.21.0 AS deps

 ARG APP_PATH
 WORKDIR $APP_PATH
@@ -3,7 +3,7 @@ Business Source License 1.1
 Parameters

 Licensor:             General Outline, Inc.
-Licensed Work:        Outline 1.6.1
+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-03-18
+Change Date:          2030-02-15

 Change License:       Apache License, Version 2.0

@@ -33,9 +33,9 @@ There is a short guide for [setting up a development environment](https://docs.g

 ## Contributing

-Outline is built and maintained by a small team – your help finding and fixing bugs is appreciated, though AI assisted PR's from new contributors are discouraged and unlikely to be merged.
+Outline is built and maintained by a small team – we'd love your help to fix bugs and add features!

-Before submitting a pull request _you must_ discuss with the core team by creating or commenting in an issue on [GitHub](https://www.github.com/outline/outline/issues) – we'd also love to hear from you in the [discussions](https://www.github.com/outline/outline/discussions). This way we can ensure that an approach is agreed on before code is written and that you have read these instructions. This will result in a much higher likelihood of your code being accepted.
+Before submitting a pull request _please_ discuss with the core team by creating or commenting in an issue on [GitHub](https://www.github.com/outline/outline/issues) – we'd also love to hear from you in the [discussions](https://www.github.com/outline/outline/discussions). This way we can ensure that an approach is agreed on before code is written. This will result in a much higher likelihood of your code being accepted.

 If you’re looking for ways to get started, here's a list of ways to help us improve Outline:

@@ -528,7 +528,7 @@ export const createTemplate = createInternalLinkAction({
  keywords: "new create template",
  visible: ({ getActivePolicies }) =>
    getActivePolicies(Collection).some(
-      (policy) => policy.abilities.createTemplate
+      (policy) => policy.abilities.createDocument
    ),
  to: ({ getActiveModel }) => {
    const collection = getActiveModel(Collection);
@@ -32,8 +32,6 @@ import {
  CaseSensitiveIcon,
  RestoreIcon,
  EditIcon,
-  EmbedIcon,
-  OpenIcon,
 } from "outline-icons";
 import { toast } from "sonner";
 import Icon from "@shared/components/Icon";
@@ -75,7 +73,6 @@ import {
  searchPath,
  documentPath,
  urlify,
-  desktopify,
  trashPath,
  documentEditPath,
 } from "~/utils/routeHelpers";
@@ -89,8 +86,6 @@ import type {
 } from "~/types";
 import lazyWithRetry from "~/utils/lazyWithRetry";
 import env from "~/env";
-import { isMac, isWindows } from "@shared/utils/browser";
-import isCloudHosted from "~/utils/isCloudHosted";
 import DocumentMove from "~/components/DocumentExplorer/DocumentMove";

 const Insights = lazyWithRetry(
@@ -206,6 +201,48 @@ 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;
+
+    if (!currentTeamId || !!document?.isDraft || !!document?.isDeleted) {
+      return false;
+    }
+
+    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 },
+    };
+  },
+});
+
 /**
 * Finds the index of a document among its siblings in the collection tree.
 *
@@ -340,15 +377,8 @@ export const createNewDocument = createActionWithChildren({
  section: ActiveDocumentSection,
  icon: <NewDocumentIcon />,
  keywords: "create",
-  visible: ({ currentTeamId, activeDocumentId, stores }) => {
-    if (!activeDocumentId) {
-      return false;
-    }
-
-    return (
-      !!currentTeamId && stores.policies.abilities(currentTeamId).createDocument
-    );
-  },
+  visible: ({ currentTeamId, stores }) =>
+    !!currentTeamId && stores.policies.abilities(currentTeamId).createDocument,
  children: [createDocumentBefore, createDocumentAfter, createNestedDocument],
 });

@@ -577,10 +607,7 @@ export const shareDocument = createAction({
  section: ActiveDocumentSection,
  icon: <PadlockIcon />,
  visible: ({ stores, activeDocumentId }) => {
-    if (!activeDocumentId) {
-      return false;
-    }
-    const can = stores.policies.abilities(activeDocumentId);
+    const can = stores.policies.abilities(activeDocumentId!);
    return can.manageUsers || can.share;
  },
  perform: async ({ activeDocumentId, stores, currentUserId, t }) => {
@@ -955,50 +982,7 @@ export const printDocument = createAction({
  icon: <PrintIcon />,
  visible: ({ activeDocumentId }) => !!(activeDocumentId && window.print),
  perform: () => {
-    setTimeout(window.print, 0);
-  },
-});
-
-export const openDocumentInDesktop = createAction({
-  name: ({ t }) => t("Open in desktop app"),
-  analyticsName: "Open in desktop",
-  section: ActiveDocumentSection,
-  icon: <OpenIcon />,
-  visible: ({ activeDocumentId, stores }) => {
-    if (!activeDocumentId) {
-      return false;
-    }
-    const document = stores.documents.get(activeDocumentId);
-    return (
-      isCloudHosted && (isMac || isWindows) && !!document && !document.isDeleted
-    );
-  },
-  perform: ({ activeDocumentId, stores }) => {
-    const document = activeDocumentId
-      ? stores.documents.get(activeDocumentId)
-      : undefined;
-    if (document) {
-      window.location.href = desktopify(documentPath(document));
-    }
-  },
-});
-
-export const presentDocument = createAction({
-  name: ({ t, isMenu }) => (isMenu ? t("Present") : t("Present document")),
-  analyticsName: "Present document",
-  section: ActiveDocumentSection,
-  icon: <EmbedIcon />,
-  shortcut: ["Meta+Alt+p"],
-  visible: ({ activeDocumentId }) => !!activeDocumentId,
-  perform: ({ activeDocumentId, stores }) => {
-    const document = activeDocumentId
-      ? stores.documents.get(activeDocumentId)
-      : undefined;
-    if (!document) {
-      return;
-    }
-
-    stores.ui.setPresentingDocument(document);
+    queueMicrotask(window.print);
  },
 });

@@ -1066,7 +1050,7 @@ export const createTemplateFromDocument = createAction({
    }
    return !!(
      !!activeCollectionId &&
-      stores.policies.abilities(activeCollectionId).createTemplate
+      stores.policies.abilities(activeCollectionId).updateDocument
    );
  },
  perform: ({ activeDocumentId, stores, t, event }) => {
@@ -1397,7 +1381,7 @@ export const openDocumentComments = createAction({
      return;
    }

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

@@ -1545,13 +1529,11 @@ export const rootDocumentActions = [
  openRandomDocument,
  permanentlyDeleteDocument,
  permanentlyDeleteDocumentsInTrash,
-  presentDocument,
  printDocument,
  pinDocumentToCollection,
  pinDocumentToHome,
  openDocumentComments,
  openDocumentHistory,
  openDocumentInsights,
-  openDocumentInDesktop,
  shareDocument,
 ];
@@ -18,13 +18,7 @@ import {
  createActionWithChildren,
  createInternalLinkAction,
 } from "~/actions";
-import history from "~/utils/history";
-import {
-  newDocumentPath,
-  newTemplatePath,
-  settingsPath,
-  urlify,
-} from "~/utils/routeHelpers";
+import { newDocumentPath, newTemplatePath, urlify } from "~/utils/routeHelpers";
 import { ActiveTemplateSection, TemplateSection } from "../sections";
 import Template from "~/models/Template";
 import { AvatarSize } from "~/components/Avatar";
@@ -63,7 +57,6 @@ export const deleteTemplate = createAction({
        <ConfirmationDialog
          onSubmit={async () => {
            await template.delete();
-            history.push(settingsPath("templates"));
            toast.success(t("Template deleted"));
          }}
          savingText={`${t("Deleting")}…`}
@@ -224,7 +217,7 @@ export const printTemplate = createAction({
  icon: <PrintIcon />,
  visible: ({ getActiveModel }) => !!getActiveModel(Template) && !!window.print,
  perform: () => {
-    setTimeout(window.print, 0);
+    queueMicrotask(window.print);
  },
 });

@@ -210,7 +210,6 @@ export function actionToKBar(
  const name = resolve<string>(action.name, context);
  const icon = resolve<React.ReactElement>(action.icon, context);
  const section = resolve<string>(action.section, context);
-  const subtitle = resolve<string>(action.description, context);

  const sectionPriority =
    typeof action.section !== "string" && "priority" in action.section
@@ -230,7 +229,6 @@ export function actionToKBar(
          section,
          keywords: action.keywords,
          shortcut: action.shortcut,
-          subtitle,
          icon,
          priority,
          perform: () => performAction(action, context),
@@ -256,7 +254,6 @@ export function actionToKBar(
          keywords: action.keywords,
          shortcut: action.shortcut,
          icon,
-          subtitle,
          priority,
        },
        ...children.map((child) => ({
@@ -15,9 +15,6 @@ export const DeveloperSection = ({ t }: ActionContext) => t("Debug");

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

-export const SearchResultsSection = ({ t }: ActionContext) =>
-  t("Search results");
-
 export const DocumentsSection = ({ t }: ActionContext) => t("Documents");

 export const ActiveDocumentSection = ({ t, stores }: ActionContext) => {
@@ -61,7 +58,7 @@ export const ShareSection = ({ t }: ActionContext) => t("Share");
 export const TeamSection = ({ t }: ActionContext) => t("Workspace");

 export const RecentSearchesSection = ({ t }: ActionContext) =>
-  t("Recently viewed");
+  t("Recent searches");

 RecentSearchesSection.priority = -0.1;

@@ -0,0 +1,14 @@
+export default function Arrow() {
+  return (
+    <svg
+      width="13"
+      height="30"
+      viewBox="0 0 13 30"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M7.40242 1.48635C8.23085 0.0650039 10.0656 -0.421985 11.5005 0.39863C12.9354 1.21924 13.427 3.03671 12.5986 4.45806L5.59858 16.4681C4.77015 17.8894 2.93538 18.3764 1.5005 17.5558C0.065623 16.7352 -0.426002 14.9177 0.402425 13.4964L7.40242 1.48635Z" />
+      <path d="M12.5986 25.5419C13.427 26.9633 12.9354 28.7808 11.5005 29.6014C10.0656 30.422 8.23087 29.935 7.40244 28.5136L0.402438 16.5036C-0.425989 15.0823 0.0656365 13.2648 1.50051 12.4442C2.93539 11.6236 4.77016 12.1106 5.59859 13.5319L12.5986 25.5419Z" />
+    </svg>
+  );
+}
@@ -1,10 +1,17 @@
+import { AnimatePresence } from "framer-motion";
 import { observer } from "mobx-react";
 import * as React from "react";
-import { Switch, Route } from "react-router-dom";
+import {
+  Switch,
+  Route,
+  useLocation,
+  matchPath,
+  Redirect,
+} from "react-router-dom";
+import { TeamPreference } from "@shared/types";
 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";
@@ -16,6 +23,8 @@ import {
  searchPath,
  newDocumentPath,
  settingsPath,
+  matchDocumentHistory,
+  matchDocumentSlug as slug,
 } from "~/utils/routeHelpers";
 import { DocumentContextProvider } from "./DocumentContext";
 import Fade from "./Fade";
@@ -23,6 +32,12 @@ 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")
 );
@@ -33,7 +48,9 @@ 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();
@@ -57,17 +74,15 @@ const AuthenticatedLayout: React.FC = ({ children }: Props) => {
    history.push(newDocumentPath(activeCollectionId));
  };

-  React.useEffect(() => {
-    const postLoginPath = spendPostLoginPath();
-    if (postLoginPath) {
-      history.replace(postLoginPath);
-    }
-  }, [spendPostLoginPath]);
-
  if (auth.isSuspended) {
    return <ErrorSuspended />;
  }

+  const postLoginPath = spendPostLoginPath();
+  if (postLoginPath) {
+    return <Redirect to={postLoginPath} />;
+  }
+
  const sidebar = (
    <Fade>
      <Switch>
@@ -77,20 +92,50 @@ 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>
-      <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>
+      <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 />
+          <NotificationBadge />
+        </Layout>
+      </PortalContext.Provider>
    </DocumentContextProvider>
  );
 };
@@ -55,15 +55,6 @@ function Breadcrumb(
    });
  }

-  const handleClick = React.useCallback(
-    (event: React.MouseEvent<HTMLAnchorElement>) => {
-      if (event.currentTarget.querySelector('[data-state="open"]')) {
-        event.preventDefault();
-      }
-    },
-    []
-  );
-
  const toBreadcrumb = React.useCallback(
    (action: TopLevelAction, index: number) => {
      if (action.type === "menu") {
@@ -77,7 +68,6 @@ function Breadcrumb(
          {item.icon}
          <Item
            to={item.to}
-            onClick={handleClick}
            $withIcon={!!item.icon}
            $highlight={!!highlightFirstItem && index === 0}
          >
@@ -86,7 +76,7 @@ function Breadcrumb(
        </>
      );
    },
-    [actionContext, handleClick, highlightFirstItem]
+    [actionContext, highlightFirstItem]
  );

  return (
@@ -3,8 +3,6 @@ import { DisclosureIcon } from "outline-icons";
 import { darken, lighten, transparentize } from "polished";
 import * as React from "react";
 import styled from "styled-components";
-import type { HapticInput } from "web-haptics";
-import { useWebHaptics } from "web-haptics/react";
 import { s } from "@shared/styles";
 import type { Props as ActionButtonProps } from "~/components/ActionButton";
 import ActionButton from "~/components/ActionButton";
@@ -154,8 +152,6 @@ export type Props<T> = ActionButtonProps & {
  fullwidth?: boolean;
  as?: T;
  to?: LocationDescriptor;
-  /** Haptic feedback to trigger on click. Pass a preset name or custom pattern. */
-  haptic?: HapticInput;
  borderOnHover?: boolean;
  hideIcon?: boolean;
  href?: string;
@@ -180,13 +176,11 @@ const Button = <T extends React.ElementType = "button">(
    hideIcon,
    fullwidth,
    danger,
-    haptic,
    ...rest
  } = props;
  const hasText = !!children || value !== undefined;
  const ic = hideIcon ? undefined : (action?.icon ?? icon);
  const hasIcon = ic !== undefined;
-  const { trigger } = useWebHaptics();

  return (
    <RealButton
@@ -197,7 +191,6 @@ const Button = <T extends React.ElementType = "button">(
      $danger={danger}
      $fullwidth={fullwidth}
      $borderOnHover={borderOnHover}
-      onClickCapture={haptic ? () => void trigger(haptic) : undefined}
      {...rest}
    >
      <Inner hasIcon={hasIcon} hasText={hasText} disclosure={disclosure}>
@@ -23,9 +23,12 @@ const Container = styled.div<Props>`
 type ContentProps = { $maxWidth?: string };

 const Content = styled.div<ContentProps>`
-  max-width: ${(props: ContentProps) =>
-    props.$maxWidth ?? EditorStyleHelper.documentWidth};
+  max-width: ${(props) => props.$maxWidth ?? "46em"};
  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
-          key={collaborator.id}
          {...rest}
+          key={collaborator.id}
          user={collaborator}
          isPresent={isPresent}
          isEditing={isEditing}
@@ -6,8 +6,8 @@ import { Trans, useTranslation } from "react-i18next";
 import styled from "styled-components";
 import Icon from "@shared/components/Icon";
 import { randomElement } from "@shared/random";
-import { CollectionPermission, TeamPreference } from "@shared/types";
-import type { Option } from "~/components/InputSelect";
+import type { CollectionPermission } from "@shared/types";
+import { TeamPreference } from "@shared/types";
 import { IconLibrary } from "@shared/utils/IconLibrary";
 import { colorPalette } from "@shared/utils/collections";
 import { CollectionValidation } from "@shared/validations";
@@ -15,7 +15,6 @@ import type Collection from "~/models/Collection";
 import Button from "~/components/Button";
 import { Collapsible } from "~/components/Collapsible";
 import Input from "~/components/Input";
-import { InputSelect } from "~/components/InputSelect";
 import { InputSelectPermission } from "~/components/InputSelectPermission";
 import { createLazyComponent } from "~/components/LazyLoad";
 import Switch from "~/components/Switch";
@@ -35,7 +34,6 @@ export interface FormData {
  sharing: boolean;
  permission: CollectionPermission | undefined;
  commenting?: boolean | null;
-  templateManagement: CollectionPermission;
 }

 const useIconColor = (collection?: Collection) => {
@@ -70,22 +68,6 @@ export const CollectionForm = observer(function CollectionForm_({

  const [hasOpenedIconPicker, setHasOpenedIconPicker] = useBoolean(false);

-  const templateManagementOptions = useMemo<Option[]>(
-    () => [
-      {
-        type: "item",
-        label: t("Managers"),
-        value: CollectionPermission.Admin,
-      },
-      {
-        type: "item",
-        label: t("Members"),
-        value: CollectionPermission.ReadWrite,
-      },
-    ],
-    [t]
-  );
-
  const iconColor = useIconColor(collection);
  const fallbackIcon = (
    <Icon
@@ -111,8 +93,6 @@ export const CollectionForm = observer(function CollectionForm_({
      sharing: collection?.sharing ?? true,
      permission: collection?.permission,
      commenting: collection?.commenting ?? true,
-      templateManagement:
-        collection?.templateManagement ?? CollectionPermission.Admin,
      color: iconColor,
    },
  });
@@ -155,71 +135,6 @@ export const CollectionForm = observer(function CollectionForm_({

  const initial = values.name.charAt(0).toUpperCase();

-  const options = (
-    <>
-      <Controller
-        control={control}
-        name="templateManagement"
-        render={({ field }) => (
-          <>
-            <InputSelect
-              value={field.value}
-              onChange={(value: string) => {
-                field.onChange(value as CollectionPermission);
-              }}
-              options={templateManagementOptions}
-              label={t("Manage templates")}
-            />
-            <Text
-              type="secondary"
-              size="small"
-              as="p"
-              style={{ paddingTop: 4 }}
-            >
-              {t(
-                "Choose who can create and edit templates in this collection."
-              )}
-            </Text>
-          </>
-        )}
-      />
-
-      {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}
-            />
-          )}
-        />
-      )}
-
-      {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}
-            />
-          )}
-        />
-      )}
-    </>
-  );
-
  return (
    <form onSubmit={formHandleSubmit(handleSubmit)}>
      <Text as="p">
@@ -275,10 +190,44 @@ export const CollectionForm = observer(function CollectionForm_({
        />
      )}

-      {collection ? (
-        options
-      ) : (
-        <Collapsible label={t("Advanced options")}>{options}</Collapsible>
+      {(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}
+                />
+              )}
+            />
+          )}
+
+          {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">
@@ -4,7 +4,6 @@ import * as React from "react";
 import styled, { css, useTheme } from "styled-components";
 import { s, ellipsis } from "@shared/styles";
 import { normalizeKeyDisplay } from "@shared/utils/keyboard";
-import Highlight from "~/components/Highlight";
 import Flex from "~/components/Flex";
 import Key from "~/components/Key";
 import Text from "~/components/Text";
@@ -16,14 +15,6 @@ type Props = {
  currentRootActionId: string | null | undefined;
 };

-const SEARCH_RESULT_REGEX = /<b\b[^>]*>(.*?)<\/b>/gi;
-
-function replaceResultMarks(tag: string) {
-  // don't use SEARCH_RESULT_REGEX here as it causes
-  // an infinite loop to trigger a regex inside it's own callback
-  return tag.replace(/<b\b[^>]*>(.*?)<\/b>/gi, "$1");
-}
-
 function CommandBarItem(
  { action, active, currentRootActionId }: Props,
  ref: React.RefObject<HTMLDivElement>
@@ -65,16 +56,6 @@ function CommandBarItem(
        ))}
        {action.name}
        {action.children?.length ? "…" : ""}
-        {action.subtitle && (
-          <Text type="secondary" ellipsis>
-            &nbsp;&nbsp;
-            <Highlight
-              text={action.subtitle}
-              highlight={SEARCH_RESULT_REGEX}
-              processResult={replaceResultMarks}
-            />
-          </Text>
-        )}
      </Content>
      {action.shortcut?.length ? (
        <Shortcut>
@@ -1,94 +0,0 @@
-import { useKBar, KBarPositioner, KBarAnimator, KBarSearch } from "kbar";
-import { observer } from "mobx-react";
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-import { Portal } from "react-portal";
-import styled from "styled-components";
-import breakpoint from "styled-components-breakpoint";
-import { depths, s } from "@shared/styles";
-import CommandBarResults from "./CommandBarResults";
-import SharedSearchActions from "./SharedSearchActions";
-
-/**
- * A simplified command bar for public shares that only provides search.
- */
-function SharedCommandBar() {
-  const { t } = useTranslation();
-
-  return (
-    <>
-      <SharedSearchActions />
-      <KBarPortal>
-        <Positioner>
-          <Animator>
-            <SearchInput defaultPlaceholder={`${t("Search")}…`} />
-            <CommandBarResults />
-          </Animator>
-        </Positioner>
-      </KBarPortal>
-    </>
-  );
-}
-
-type Props = {
-  children?: React.ReactNode;
-};
-
-const KBarPortal: React.FC = ({ children }: Props) => {
-  const { showing } = useKBar((state) => ({
-    showing: state.visualState !== "hidden",
-  }));
-
-  if (!showing) {
-    return null;
-  }
-
-  return <Portal>{children}</Portal>;
-};
-
-const Positioner = styled(KBarPositioner)`
-  z-index: ${depths.commandBar};
-`;
-
-const SearchInput = styled(KBarSearch)`
-  position: relative;
-  padding: 16px 12px;
-  margin: 0 8px;
-  width: calc(100% - 16px);
-  outline: none;
-  border: none;
-  background: ${s("menuBackground")};
-  color: ${s("text")};
-
-  &:not(:last-child) {
-    border-bottom: 1px solid ${s("inputBorder")};
-  }
-
-  &:disabled,
-  &::placeholder {
-    color: ${s("placeholder")};
-    opacity: 1;
-  }
-`;
-
-const Animator = styled(KBarAnimator)`
-  max-width: 600px;
-  max-height: 75vh;
-  width: 90vw;
-  background: ${s("menuBackground")};
-  color: ${s("text")};
-  border-radius: 8px;
-  overflow: hidden;
-  box-shadow: rgb(0 0 0 / 40%) 0px 16px 60px;
-  transition: max-width 0.2s ease-in-out;
-
-  ${breakpoint("desktopLarge")`
-    max-width: 740px;
-  `};
-
-  @media print {
-    display: none;
-  }
-`;
-
-export default observer(SharedCommandBar);
@@ -1,187 +0,0 @@
-import { useKBar } from "kbar";
-import escapeRegExp from "lodash/escapeRegExp";
-import { observer } from "mobx-react";
-import { DocumentIcon } from "outline-icons";
-import * as React from "react";
-import Icon from "@shared/components/Icon";
-import useShare from "@shared/hooks/useShare";
-import { Minute } from "@shared/utils/time";
-import { createAction } from "~/actions";
-import {
-  RecentSearchesSection,
-  SearchResultsSection,
-} from "~/actions/sections";
-import useCommandBarActions from "~/hooks/useCommandBarActions";
-import useStores from "~/hooks/useStores";
-import type Document from "~/models/Document";
-import history from "~/utils/history";
-import { sharedModelPath } from "~/utils/routeHelpers";
-import type { SearchResult } from "~/types";
-
-interface CacheEntry {
-  timestamp: number;
-  results: SearchResult[];
-}
-
-const cacheTTL = Minute.ms * 5;
-const maxRecentDocs = 5;
-
-/**
- * Strip server-generated `<b>` highlight tags from context and re-apply them
- * using the current search query. This prevents stale highlights when the
- * displayed results are from a previous (in-flight) query.
- *
- * @param context the server-generated context string with `<b>` tags.
- * @param query the current search query to highlight.
- * @returns the context string with highlights matching the current query.
- */
-function rehighlightContext(
-  context: string | undefined,
-  query: string
-): string | undefined {
-  if (!context) {
-    return context;
-  }
-
-  const plain = context.replace(/<b\b[^>]*>(.*?)<\/b>/gi, "$1");
-  const trimmed = query.trim();
-
-  if (!trimmed) {
-    return plain;
-  }
-
-  const terms = trimmed.split(/\s+/).filter(Boolean);
-  const patterns = [escapeRegExp(trimmed)];
-
-  if (terms.length > 1) {
-    patterns.push(...terms.map((t) => `\\b${escapeRegExp(t)}\\b`));
-  }
-
-  const regex = new RegExp(patterns.join("|"), "gi");
-  return plain.replace(regex, "<b>$&</b>");
-}
-
-/**
- * Registers search result actions in the command bar scoped to a public share.
- */
-function SharedSearchActions() {
-  const { documents } = useStores();
-  const { shareId } = useShare();
-  const searchCache = React.useRef<Map<string, CacheEntry>>(new Map());
-  const [results, setResults] = React.useState<SearchResult[]>([]);
-  const recentDocsRef = React.useRef<Document[]>([]);
-  const [recentDocs, setRecentDocs] = React.useState<Document[]>([]);
-
-  const { searchQuery } = useKBar((state) => ({
-    searchQuery: state.searchQuery,
-  }));
-
-  const searchQueryRef = React.useRef(searchQuery);
-  searchQueryRef.current = searchQuery;
-
-  React.useEffect(() => {
-    if (!searchQuery || !shareId) {
-      setResults([]);
-      return;
-    }
-
-    const now = Date.now();
-    const cachedEntry = searchCache.current.get(searchQuery);
-    const isExpired = cachedEntry
-      ? now - cachedEntry.timestamp > cacheTTL
-      : true;
-
-    if (cachedEntry && !isExpired) {
-      setResults(cachedEntry.results);
-      return;
-    }
-
-    const currentQuery = searchQuery;
-    void documents.search({ query: searchQuery, shareId }).then((res) => {
-      searchCache.current.set(currentQuery, { timestamp: now, results: res });
-      if (searchQueryRef.current === currentQuery) {
-        setResults(res);
-      }
-    });
-  }, [documents, searchQuery, shareId]);
-
-  const addRecentDoc = React.useCallback((doc: Document) => {
-    const prev = recentDocsRef.current;
-    const filtered = prev.filter((d) => d.id !== doc.id);
-    const next = [doc, ...filtered].slice(0, maxRecentDocs);
-    recentDocsRef.current = next;
-    setRecentDocs(next);
-  }, []);
-
-  const documentIcon = React.useCallback(
-    (doc: Document) =>
-      doc.icon ? (
-        <Icon
-          value={doc.icon}
-          initial={doc.initial}
-          color={doc.color ?? undefined}
-        />
-      ) : (
-        <DocumentIcon />
-      ),
-    []
-  );
-
-  const actions = React.useMemo(
-    () =>
-      results.map((result) =>
-        createAction({
-          id: `shared-search-${result.document.id}`,
-          name: result.document.titleWithDefault,
-          description: rehighlightContext(result.context, searchQuery),
-          keywords: searchQuery,
-          analyticsName: "Open shared search result",
-          section: SearchResultsSection,
-          icon: documentIcon(result.document),
-          perform: () => {
-            if (shareId) {
-              const currentQuery = searchQueryRef.current;
-              addRecentDoc(result.document);
-              history.push({
-                pathname: sharedModelPath(shareId, result.document.url),
-                search: currentQuery
-                  ? `?q=${encodeURIComponent(currentQuery)}`
-                  : undefined,
-              });
-            }
-          },
-        })
-      ),
-    [results, shareId, searchQuery, addRecentDoc, documentIcon]
-  );
-
-  const recentDocActions = React.useMemo(
-    () =>
-      recentDocs.map((doc) =>
-        createAction({
-          id: `shared-recent-doc-${doc.id}`,
-          name: doc.titleWithDefault,
-          analyticsName: "Open recent shared document",
-          section: RecentSearchesSection,
-          icon: documentIcon(doc),
-          perform: () => {
-            if (shareId) {
-              history.push(sharedModelPath(shareId, doc.url));
-            }
-          },
-        })
-      ),
-    [recentDocs, shareId, documentIcon]
-  );
-
-  useCommandBarActions(searchQuery ? actions : recentDocActions, [
-    searchQuery
-      ? actions.map((a) => a.id).join("")
-      : recentDocActions.map((a) => a.id).join(""),
-    searchQuery,
-  ]);
-
-  return null;
-}
-
-export default observer(SharedSearchActions);
@@ -128,14 +128,7 @@ const ContentEditable = React.forwardRef(function ContentEditable_(

  React.useEffect(() => {
    if (contentRef.current && value !== contentRef.current.textContent) {
-      if (document.activeElement === contentRef.current) {
-        // Don't reset content while the user is actively editing. Update
-        // lastValue so that the next input or blur event will push the
-        // current DOM text back to the model via onChange.
-        lastValue.current = value;
-      } else {
-        setInnerValue(value);
-      }
+      setInnerValue(value);
    }
  }, [value, contentRef]);

@@ -0,0 +1,11 @@
+import styled from "styled-components";
+import { s } from "@shared/styles";
+
+const Divider = styled.hr`
+  border: 0;
+  border-bottom: 1px solid ${s("divider")};
+  margin: 0;
+  padding: 0;
+`;
+
+export default Divider;
@@ -5,14 +5,9 @@ import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import Icon from "@shared/components/Icon";
 import type { NavigationNode } from "@shared/types";
-import type Collection from "~/models/Collection";
 import type Document from "~/models/Document";
 import Breadcrumb from "~/components/Breadcrumb";
 import CollectionIcon from "~/components/Icons/CollectionIcon";
-import { ContextMenu } from "~/components/Menu/ContextMenu";
-import { ActionContextProvider } from "~/hooks/useActionContext";
-import { useCollectionMenuAction } from "~/hooks/useCollectionMenuAction";
-import { useDocumentMenuAction } from "~/hooks/useDocumentMenuAction";
 import { useLocationSidebarContext } from "~/hooks/useLocationSidebarContext";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
@@ -73,9 +68,7 @@ function DocumentBreadcrumb(
        to: archivePath(),
      }),
      createInternalLinkAction({
-        name: collection ? (
-          <CollectionName collection={collection} />
-        ) : undefined,
+        name: collection?.name,
        section: ActiveDocumentSection,
        icon: collection ? (
          <CollectionIcon collection={collection} expanded />
@@ -97,14 +90,17 @@ function DocumentBreadcrumb(
      ...path.map((node) => {
        const title = node.title || t("Untitled");
        return createInternalLinkAction({
-          name: (
-            <DocumentName
-              documentId={node.id}
-              collection={collection}
-              icon={node.icon}
-              color={node.color}
-              title={title}
-            />
+          name: node.icon ? (
+            <>
+              <StyledIcon
+                value={node.icon}
+                color={node.color}
+                initial={node.title.charAt(0).toUpperCase()}
+              />{" "}
+              {title}
+            </>
+          ) : (
+            title
          ),
          section: ActiveDocumentSection,
          to: {
@@ -173,75 +169,6 @@ function DocumentBreadcrumb(
  );
 }

-/** Renders a collection name wrapped in a context menu. */
-const CollectionName = observer(function CollectionName_({
-  collection,
-}: {
-  collection: Collection;
-}) {
-  const { t } = useTranslation();
-  const menuAction = useCollectionMenuAction({
-    collectionId: collection.id,
-  });
-
-  return (
-    <ActionContextProvider value={{ activeModels: [collection] }}>
-      <ContextMenu action={menuAction} ariaLabel={t("Collection options")}>
-        <span>{collection.name}</span>
-      </ContextMenu>
-    </ActionContextProvider>
-  );
-});
-
-/** Renders a document name wrapped in a context menu. */
-const DocumentName = observer(function DocumentName_({
-  documentId,
-  collection,
-  icon,
-  color,
-  title,
-}: {
-  documentId: string;
-  collection: Collection | undefined;
-  icon: string | undefined;
-  color: string | undefined;
-  title: string;
-}) {
-  const { t } = useTranslation();
-  const { documents } = useStores();
-  const doc = documents.get(documentId);
-  const menuAction = useDocumentMenuAction({ documentId });
-
-  const content = icon ? (
-    <>
-      <StyledIcon
-        value={icon}
-        color={color}
-        initial={title.charAt(0).toUpperCase()}
-      />{" "}
-      {title}
-    </>
-  ) : (
-    title
-  );
-
-  if (!doc) {
-    return <>{content}</>;
-  }
-
-  return (
-    <ActionContextProvider
-      value={{
-        activeModels: [doc, ...(collection ? [collection] : [])],
-      }}
-    >
-      <ContextMenu action={menuAction} ariaLabel={t("Document options")}>
-        <span>{content}</span>
-      </ContextMenu>
-    </ActionContextProvider>
-  );
-});
-
 const StyledIcon = styled(Icon)`
  margin-right: 2px;
 `;
@@ -12,6 +12,7 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import AutoSizer from "react-virtualized-auto-sizer";
 import { FixedSizeList as List } from "react-window";
+import scrollIntoView from "scroll-into-view-if-needed";
 import styled, { useTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import Icon from "@shared/components/Icon";
@@ -41,28 +42,6 @@ type Props = {
  showDocuments?: boolean;
 };

-const VERTICAL_PADDING = 6;
-const HORIZONTAL_PADDING = 24;
-
-const innerElementType = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(function innerElementType(
-  { style, ...rest }: React.HTMLAttributes<HTMLDivElement>,
-  ref
-) {
-  return (
-    <div
-      ref={ref}
-      style={{
-        ...style,
-        height: `${parseFloat(style?.height + "") + VERTICAL_PADDING * 2}px`,
-      }}
-      {...rest}
-    />
-  );
-});
-
 function DocumentExplorer({
  onSubmit,
  onSelect,
@@ -88,6 +67,8 @@ function DocumentExplorer({
      return node || null;
    }
  );
+  const [initialScrollOffset, setInitialScrollOffset] =
+    React.useState<number>(0);
  const [activeNode, setActiveNode] = React.useState<number>(0);
  const [expandedNodes, setExpandedNodes] = React.useState<string[]>(() => {
    if (defaultValue) {
@@ -110,6 +91,9 @@ function DocumentExplorer({
  );
  const listRef = React.useRef<List<NavigationNode[]>>(null);

+  const VERTICAL_PADDING = 6;
+  const HORIZONTAL_PADDING = 24;
+
  const searchIndex = React.useMemo(
    () =>
      new FuzzySearch(flatten(items.map(flattenTree)), ["title"], {
@@ -160,8 +144,7 @@ function DocumentExplorer({
        setTimeout(() => listRef.current?.scrollToItem(index, "center"), 50);
      }
    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [defaultValue]);
+  }, [defaultValue, selectedNode, nodes]);
  const baseDepth = nodes.reduce(
    (min, node) => (node.depth ? Math.min(min, node.depth) : min),
    Infinity
@@ -169,9 +152,17 @@ function DocumentExplorer({
  const normalizedBaseDepth =
    (baseDepth === Infinity ? 0 : baseDepth) + (showDocuments ? 0 : 1);

-  const scrollNodeIntoView = React.useCallback((node: number) => {
-    listRef.current?.scrollToItem(node, "smart");
-  }, []);
+  const scrollNodeIntoView = React.useCallback(
+    (node: number) => {
+      if (itemRefs[node] && itemRefs[node].current) {
+        scrollIntoView(itemRefs[node].current as HTMLSpanElement, {
+          behavior: "auto",
+          block: "center",
+        });
+      }
+    },
+    [itemRefs]
+  );

  const handleSearch = (ev: React.ChangeEvent<HTMLInputElement>) => {
    setSearchTerm(ev.target.value);
@@ -179,16 +170,16 @@ function DocumentExplorer({

  const isExpanded = (node: number) => includes(expandedNodes, nodes[node].id);

-  const preserveScrollOffset = (itemCount: number) => {
+  const calculateInitialScrollOffset = (itemCount: number) => {
    if (listRef.current) {
      const { height, itemSize } = listRef.current.props;
      const { scrollOffset } = listRef.current.state as {
        scrollOffset: number;
      };
      const itemsHeight = itemCount * itemSize;
-      const offset = itemsHeight < Number(height) ? 0 : scrollOffset;
-      setTimeout(() => listRef.current?.scrollTo(offset), 0);
+      return itemsHeight < Number(height) ? 0 : scrollOffset;
    }
+    return 0;
  };

  const collapse = (node: number) => {
@@ -199,7 +190,8 @@ function DocumentExplorer({

    // remove children
    const newNodes = filter(nodes, (n) => !includes(descendantIds, n.id));
-    preserveScrollOffset(newNodes.length);
+    const scrollOffset = calculateInitialScrollOffset(newNodes.length);
+    setInitialScrollOffset(scrollOffset);
  };

  const expand = (node: number) => {
@@ -208,7 +200,8 @@ function DocumentExplorer({
    // add children
    const newNodes = nodes.slice();
    newNodes.splice(node + 1, 0, ...descendants(nodes[node], 1));
-    preserveScrollOffset(newNodes.length);
+    const scrollOffset = calculateInitialScrollOffset(newNodes.length);
+    setInitialScrollOffset(scrollOffset);
  };

  React.useEffect(() => {
@@ -232,8 +225,7 @@ function DocumentExplorer({
  };

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

  const toggleCollapse = (node: number) => {
    if (!hasChildren(node)) {
@@ -395,6 +387,25 @@ function DocumentExplorer({
    }
  };

+  const innerElementType = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+  >(function innerElementType(
+    { style, ...rest }: React.HTMLAttributes<HTMLDivElement>,
+    ref
+  ) {
+    return (
+      <div
+        ref={ref}
+        style={{
+          ...style,
+          height: `${parseFloat(style?.height + "") + VERTICAL_PADDING * 2}px`,
+        }}
+        {...rest}
+      />
+    );
+  });
+
  return (
    <Container tabIndex={-1} onKeyDown={handleKeyDown}>
      <ListSearch
@@ -414,12 +425,14 @@ function DocumentExplorer({
              <Flex role="listbox" column>
                <List
                  ref={listRef}
+                  key={nodes.length}
                  width={width}
                  height={height}
                  itemData={nodes}
                  itemCount={nodes.length}
                  itemSize={isMobile ? 48 : 32}
                  innerElementType={innerElementType}
+                  initialScrollOffset={initialScrollOffset}
                  itemKey={(index, results) => results[index].id}
                >
                  {ListItem}
@@ -40,8 +40,10 @@ function DocumentExplorerNode(
  ref: React.RefObject<HTMLSpanElement>
 ) {
  const { t } = useTranslation();
-  const DISCLOSURE = 24;
-  const width = (depth + (hasChildren ? 2 : 1)) * DISCLOSURE;
+  const OFFSET = 12;
+  const DISCLOSURE = 20;
+
+  const width = depth ? depth * DISCLOSURE + OFFSET : DISCLOSURE;

  return (
    <Node
@@ -78,7 +80,7 @@ const Title = styled(Text)`
 const StyledDisclosure = styled(Disclosure)`
  position: relative;
  left: auto;
-  margin: 2px 0;
+  margin-top: 2px;
 `;

 const Spacer = styled(Flex)<{ width: number }>`
@@ -1,6 +1,7 @@
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
+import scrollIntoView from "scroll-into-view-if-needed";
 import styled from "styled-components";
 import { ellipsis } from "@shared/styles";
 import { Node as SearchResult } from "./DocumentExplorerNode";
@@ -31,8 +32,22 @@ function DocumentExplorerSearchResult({
 }: Props) {
  const { t } = useTranslation();

+  const ref = React.useCallback(
+    (node: HTMLSpanElement | null) => {
+      if (active && node) {
+        scrollIntoView(node, {
+          scrollMode: "if-needed",
+          behavior: "auto",
+          block: "nearest",
+        });
+      }
+    },
+    [active]
+  );
+
  return (
    <SearchResult
+      ref={ref}
      selected={selected}
      active={active}
      onClick={onClick}
@@ -3,7 +3,6 @@ import { useState, useMemo } from "react";
 import { useTranslation, Trans } from "react-i18next";
 import { toast } from "sonner";
 import type { NavigationNode } from "@shared/types";
-import { descendants, flattenTree } from "@shared/utils/tree";
 import type Document from "~/models/Document";
 import Button from "~/components/Button";
 import Text from "~/components/Text";
@@ -24,23 +23,13 @@ function DocumentMove({ document }: Props) {
  const [selectedPath, selectPath] = useState<NavigationNode | null>(null);

  const items = useMemo(() => {
-    // Collect the IDs of the document itself and all of its descendants so they
-    // can be excluded from the move targets (moving to self or a descendant
-    // would create a cycle; moving to the exact same location is a no-op).
-    const allNodes = collectionTrees.flatMap(flattenTree);
-    const sourceNode = allNodes.find((node) => node.id === document.id);
-    const excludedIds = new Set<string>([document.id]);
-    if (sourceNode) {
-      descendants(sourceNode).forEach((n) => excludedIds.add(n.id));
-    }
-
-    // Recursively filter out the document itself and its descendants.
-    // The document's current parent is intentionally kept so that siblings
-    // remain visible as valid move targets.
+    // Recursively filter out the document itself and its existing parent doc, if any.
    const filterSourceDocument = (node: NavigationNode): NavigationNode => ({
      ...node,
      children: node.children
-        ?.filter((c) => !excludedIds.has(c.id))
+        ?.filter(
+          (c) => c.id !== document.id && c.id !== document.parentDocumentId
+        )
        .map(filterSourceDocument),
    });

@@ -54,7 +43,7 @@ function DocumentMove({ document }: Props) {
      );

    return nodes;
-  }, [policies, collectionTrees, document.id]);
+  }, [policies, collectionTrees, document.id, document.parentDocumentId]);

  const move = async () => {
    if (!selectedPath) {
@@ -22,7 +22,6 @@ 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";
@@ -59,7 +58,6 @@ 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);
@@ -161,7 +159,7 @@ function DocumentListItem(
                    <Badge>{t("Draft")}</Badge>
                  </Tooltip>
                )}
-                {canStar && !isMobile && <StarButton document={document} />}
+                {canStar && <StarButton document={document} />}
              </Heading>

              {!queryIsInTitle && (
@@ -88,7 +88,6 @@ function Header(
          <Breadcrumbs ref={setBreadcrumbRef}>
            {hasMobileSidebar && (
              <MobileMenuButton
-                haptic="light"
                onClick={ui.toggleMobileSidebar}
                icon={<MenuIcon />}
                neutral
@@ -43,9 +43,9 @@ export const Info = styled(StyledText).attrs(() => ({
  white-space: nowrap;
 `;

-export const Description = styled(StyledText)<{ $margin?: string }>`
+export const Description = styled(StyledText)`
  ${sharedVars}
-  margin-top: ${(props) => props.$margin ?? "0.5em"};
+  margin-top: 0.5em;
  line-height: var(--line-height);
  max-height: calc(var(--line-height) * ${NUMBER_OF_LINES});
  overflow: hidden;
@@ -64,6 +64,8 @@ export const Label = styled(Text).attrs({ size: "xsmall", weight: "bold" })<{
  width: fit-content;
  border-radius: 2em;
  padding: 1px 8px 1px 20px;
+  margin-right: 0.5em;
+  margin-top: 0.5em;
  position: relative;
  flex-shrink: 0;

@@ -73,8 +75,8 @@ export const Label = styled(Text).attrs({ size: "xsmall", weight: "bold" })<{
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
-    width: 8px;
-    height: 8px;
+    width: 6px;
+    height: 6px;
    border-radius: 50%;
    background-color: ${(props) =>
      props.color || props.theme.backgroundSecondary};
@@ -17,7 +17,6 @@ import HoverPreviewGroup from "./HoverPreviewGroup";
 import HoverPreviewIssue from "./HoverPreviewIssue";
 import HoverPreviewLink from "./HoverPreviewLink";
 import HoverPreviewMention from "./HoverPreviewMention";
-import HoverPreviewProject from "./HoverPreviewProject";
 import HoverPreviewPullRequest from "./HoverPreviewPullRequest";

 const DELAY_CLOSE = 500;
@@ -193,18 +192,6 @@ const HoverPreviewDesktop = observer(
                  createdAt={data.createdAt}
                  state={data.state}
                />
-              ) : data.type === UnfurlResourceType.Project ? (
-                <HoverPreviewProject
-                  ref={cardRef}
-                  url={data.url}
-                  name={data.name}
-                  color={data.color}
-                  lead={data.lead}
-                  labels={data.labels}
-                  description={data.description}
-                  state={data.state}
-                  targetDate={data.targetDate}
-                />
              ) : (
                <HoverPreviewLink
                  ref={cardRef}
@@ -75,7 +75,7 @@ const HoverPreviewIssue = React.forwardRef(function HoverPreviewIssue_(
                </Description>
              )}

-              <Flex wrap gap={6} style={{ marginTop: 8 }}>
+              <Flex wrap>
                {labels.map((label, index) => (
                  <Label key={index} color={label.color}>
                    {label.name}
@@ -1,148 +0,0 @@
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-import styled from "styled-components";
-import { s } from "@shared/styles";
-import { Backticks } from "@shared/components/Backticks";
-import Squircle from "@shared/components/Squircle";
-import Editor from "~/components/Editor";
-import type { UnfurlResourceType, UnfurlResponse } from "@shared/types";
-import { Avatar, AvatarSize } from "~/components/Avatar";
-import Flex from "~/components/Flex";
-import Text from "../Text";
-import Time from "../Time";
-import {
-  Preview,
-  Title,
-  Card,
-  CardContent,
-  Label,
-  Description,
-} from "./Components";
-import { richExtensions } from "@shared/editor/nodes";
-
-type Props = Pick<
-  UnfurlResponse[UnfurlResourceType.Project],
-  | "url"
-  | "name"
-  | "color"
-  | "lead"
-  | "labels"
-  | "state"
-  | "targetDate"
-  | "description"
->;
-
-const HoverPreviewProject = React.forwardRef(function HoverPreviewProject_(
-  { url, name, color, lead, labels, state, description, targetDate }: Props,
-  ref: React.Ref<HTMLDivElement>
-) {
-  const { t } = useTranslation();
-
-  return (
-    <Preview as="a" href={url} target="_blank" rel="noopener noreferrer">
-      <Flex column ref={ref}>
-        <Card fadeOut={false}>
-          <CardContent>
-            <Flex gap={4} column>
-              <Title>
-                <StyledSquircle color={color} size={16} />
-                <span>
-                  <Backticks content={name} />
-                </span>
-              </Title>
-              {description && (
-                <Description as="div" $margin="0">
-                  <React.Suspense fallback={<div />}>
-                    <Editor
-                      extensions={richExtensions}
-                      defaultValue={description}
-                      embedsDisabled
-                      readOnly
-                    />
-                  </React.Suspense>
-                </Description>
-              )}
-              <Text
-                type="tertiary"
-                size="small"
-                style={{ textTransform: "capitalize" }}
-              >
-                {state.name}
-              </Text>
-
-              {(lead || targetDate) && (
-                <>
-                  <Divider />
-
-                  {lead && (
-                    <MetadataRow>
-                      <MetadataLabel>{t("Lead")}</MetadataLabel>
-                      <Flex align="center" gap={6}>
-                        <Avatar src={lead.avatarUrl} size={AvatarSize.Toast} />
-                        <Text size="small">{lead.name}</Text>
-                      </Flex>
-                    </MetadataRow>
-                  )}
-
-                  {targetDate && (
-                    <MetadataRow>
-                      <MetadataLabel>{t("Target date")}</MetadataLabel>
-                      <Text size="small">
-                        <Time dateTime={targetDate} addSuffix />
-                      </Text>
-                    </MetadataRow>
-                  )}
-                </>
-              )}
-
-              {labels.length > 0 && (
-                <>
-                  <Divider />
-                  <MetadataRow>
-                    <MetadataLabel>{t("Labels")}</MetadataLabel>
-                    <Flex wrap gap={6}>
-                      {labels.map((label, index) => (
-                        <Label key={index} color={label.color}>
-                          {label.name}
-                        </Label>
-                      ))}
-                    </Flex>
-                  </MetadataRow>
-                </>
-              )}
-            </Flex>
-          </CardContent>
-        </Card>
-      </Flex>
-    </Preview>
-  );
-});
-
-const StyledSquircle = styled(Squircle)`
-  flex-shrink: 0;
-  margin-top: 4px;
-`;
-
-const Divider = styled.div`
-  height: 1px;
-  background: ${s("divider")};
-  margin: 4px 0;
-`;
-
-const MetadataRow = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  min-height: 28px;
-`;
-
-const MetadataLabel = styled(Text).attrs({
-  type: "tertiary",
-  size: "small",
-})`
-  flex-shrink: 0;
-  min-width: 80px;
-`;
-
-export default HoverPreviewProject;
@@ -1,4 +1,3 @@
-import { AnimatePresence } from "framer-motion";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { Helmet } from "react-helmet-async";
@@ -8,7 +7,6 @@ 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";
@@ -21,15 +19,16 @@ 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 }: Props,
+  { title, children, sidebar, sidebarRight }: Props,
  ref: React.RefObject<HTMLDivElement>
 ) {
  const { ui } = useStores();
  const sidebarCollapsed = !sidebar || ui.sidebarIsClosed;
-  const sidebarRight = useRightSidebarContent();

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

-        <AnimatePresence initial={false}>{sidebarRight}</AnimatePresence>
+        {sidebarRight}
      </Container>
    </Container>
  );
@@ -9,44 +9,39 @@ export interface LazyComponent<T extends React.ComponentType<any>> {
 interface LazyLoadOptions {
  retries?: number;
  interval?: number;
-  /** If provided, picks this named export from the module instead of `default`. */
-  exportName?: string;
 }

 /**
 * Creates a lazy-loaded component with preloading capability and automatic retries on failure.
- * Supports both default and named exports.
 *
- * @param factory A function that returns a promise of a module.
- * @param options Optional configuration for retry behavior and export name.
- * @returns An object containing the lazy Component and a preload function.
+ * @param factory A function that returns a promise of a component (eg: () => import('./MyComponent'))
+ * @param options Optional configuration for retry behavior
+ * @returns An object containing the lazy Component and a preload function
 *
 * @example
 * ```typescript
- * // Default export
 * const MyComponent = createLazyComponent(() => import('./MyComponent'));
 *
- * // Named export
- * const MyComponent = createLazyComponent(() => import('./MyComponent'), {
- *   exportName: 'MyComponent',
- * });
+ * function App() {
+ *   return (
+ *     <Suspense fallback={<div>Loading...</div>}>
+ *       <MyComponent.Component />
+ *     </Suspense>
+ *   );
+ * }
+ *
+ * // Preload when needed:
+ * MyComponent.preload();
 * ```
 */
 export function createLazyComponent<T extends React.ComponentType<any>>(
-  factory: () => Promise<Record<string, T>>,
+  factory: () => Promise<{ default: T }>,
  options: LazyLoadOptions = {}
 ): LazyComponent<T> {
-  const { retries, interval, exportName } = options;
-
-  const wrappedFactory = exportName
-    ? () =>
-        factory().then((m) => ({
-          default: m[exportName],
-        }))
-    : (factory as () => Promise<{ default: T }>);
+  const { retries, interval } = options;

  return {
-    Component: lazyWithRetry(wrappedFactory, retries, interval),
-    preload: wrappedFactory,
+    Component: lazyWithRetry(factory, retries, interval),
+    preload: factory,
  };
 }
@@ -3,7 +3,6 @@ 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";
@@ -62,6 +61,11 @@ export const ContextMenu = observer(
      }
    }, []);

+    const handleCloseAutoFocus = React.useCallback(
+      (e: Event) => e.preventDefault(),
+      []
+    );
+
    if (isMobile || !action || menuItems.length === 0) {
      return <>{children}</>;
    }
@@ -76,7 +80,7 @@ export const ContextMenu = observer(
            aria-label={ariaLabel}
            onAnimationStart={disablePointerEvents}
            onAnimationEnd={enablePointerEvents}
-            onCloseAutoFocus={preventDefault}
+            onCloseAutoFocus={handleCloseAutoFocus}
          >
            {content}
          </MenuContent>
@@ -13,7 +13,6 @@ 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,
@@ -99,6 +98,11 @@ export const DropdownMenu = observer(
        }
      }, []);

+      const handleCloseAutoFocus = React.useCallback(
+        (e: Event) => e.preventDefault(),
+        []
+      );
+
      if (isMobile) {
        return (
          <MobileDropdown
@@ -125,7 +129,7 @@ export const DropdownMenu = observer(
              aria-label={ariaLabel}
              onAnimationStart={disablePointerEvents}
              onAnimationEnd={enablePointerEvents}
-              onCloseAutoFocus={preventDefault}
+              onCloseAutoFocus={handleCloseAutoFocus}
            >
              {content}
              {append}
@@ -42,6 +42,7 @@ export function toMenuItems(items: MenuItem[]) {
      case "button":
        return (
          <MenuButton
+            id={item.id}
            key={`${item.type}-${item.title}-${index}`}
            label={item.title as string}
            icon={icon}
@@ -94,11 +95,13 @@ export function toMenuItems(items: MenuItem[]) {
        return (
          <SubMenu key={`${item.type}-${item.title}-${index}`}>
            <SubMenuTrigger
+              id={item.id}
              label={item.title as string}
              icon={icon}
              disabled={item.disabled}
            />
            <SubMenuContent
+              id={item.id}
              ref={parentRef}
              onFocusOutside={preventCloseHandler}
            >
@@ -103,7 +103,6 @@ const StyledLink = styled(Link)`
 const StyledCommentEditor = styled(CommentEditor)`
  font-size: 0.9em;
  margin-top: 4px;
-  pointer-events: none;

  ${truncateMultiline(3)}
 `;
@@ -20,55 +20,6 @@ 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;
@@ -98,10 +49,16 @@ function Notifications(
    [t]
  );

-  const filteredNotifications = useStableOrderedNotifications(
-    notifications.active,
-    filter
-  );
+  const filteredNotifications = React.useMemo(() => {
+    if (filter === "all") {
+      return notifications.active;
+    }
+
+    const eventTypes = Notification.filterCategories[filter];
+    return notifications.active.filter((notification) =>
+      eventTypes.includes(notification.event)
+    );
+  }, [notifications.active, filter]);

  const unreadCount = notifications.approximateUnreadCount;

@@ -1,32 +0,0 @@
-import { observer } from "mobx-react";
-import { Suspense } from "react";
-import useStores from "~/hooks/useStores";
-import lazyWithRetry from "~/utils/lazyWithRetry";
-
-const PresentationMode = lazyWithRetry(
-  () => import("~/scenes/Document/components/PresentationMode")
-);
-
-function Presentation() {
-  const { ui } = useStores();
-
-  if (!ui.presentationData) {
-    return null;
-  }
-
-  return (
-    <Suspense fallback={null}>
-      <PresentationMode
-        title={ui.presentationData.title}
-        icon={ui.presentationData.icon}
-        iconColor={ui.presentationData.color}
-        data={ui.presentationData.data}
-        onClose={() => {
-          ui.setPresentingDocument(null);
-        }}
-      />
-    </Suspense>
-  );
-}
-
-export default observer(Presentation);
@@ -1,57 +0,0 @@
-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);
@@ -1,5 +1,4 @@
 import { useKBar } from "kbar";
-import { observer } from "mobx-react";
 import { useEffect, useRef } from "react";
 import { Minute } from "@shared/utils/time";
 import { searchDocumentsForQuery } from "~/actions/definitions/documents";
@@ -15,7 +14,7 @@ interface CacheEntry {
 // Cache configuration
 const cacheTTL = Minute.ms * 5;

-function SearchActions() {
+export default function SearchActions() {
  const { searches, documents } = useStores();

  // Cache structure: Map of search queries to timestamp of last search
@@ -59,5 +58,3 @@ function SearchActions() {

  return null;
 }
-
-export default observer(SearchActions);
@@ -0,0 +1,167 @@
+import {
+  useFocusEffect,
+  useRovingTabIndex,
+} from "@getoutline/react-roving-tabindex";
+import { observer } from "mobx-react";
+import * as React from "react";
+import { Link } from "react-router-dom";
+import styled, { css } from "styled-components";
+import breakpoint from "styled-components-breakpoint";
+import { s, hover, ellipsis } from "@shared/styles";
+import type Document from "~/models/Document";
+import Highlight, { Mark } from "~/components/Highlight";
+import { sharedModelPath } from "~/utils/routeHelpers";
+
+type Props = {
+  document: Document;
+  highlight: string;
+  context: string | undefined;
+  showParentDocuments?: boolean;
+  showCollection?: boolean;
+  showPublished?: boolean;
+  shareId?: string;
+  onClick?: React.MouseEventHandler<HTMLAnchorElement>;
+};
+const SEARCH_RESULT_REGEX = /<b\b[^>]*>(.*?)<\/b>/gi;
+
+function replaceResultMarks(tag: string) {
+  // don't use SEARCH_RESULT_REGEX here as it causes
+  // an infinite loop to trigger a regex inside it's own callback
+  return tag.replace(/<b\b[^>]*>(.*?)<\/b>/gi, "$1");
+}
+
+function DocumentListItem(
+  props: Props,
+  ref: React.RefObject<HTMLAnchorElement>
+) {
+  const { document, highlight, context, shareId, ...rest } = props;
+
+  let itemRef: React.Ref<HTMLAnchorElement> =
+    React.useRef<HTMLAnchorElement>(null);
+  if (ref) {
+    itemRef = ref;
+  }
+
+  const { focused, ...rovingTabIndex } = useRovingTabIndex(itemRef, false);
+  useFocusEffect(focused, itemRef);
+
+  return (
+    <DocumentLink
+      ref={itemRef}
+      dir={document.dir}
+      to={{
+        pathname: shareId
+          ? sharedModelPath(shareId, document.url)
+          : document.url,
+        search: highlight ? `?q=${encodeURIComponent(highlight)}` : undefined,
+        state: {
+          title: document.titleWithDefault,
+        },
+      }}
+      {...rest}
+      {...rovingTabIndex}
+      onClick={(ev) => {
+        if (rest.onClick) {
+          rest.onClick(ev);
+        }
+        rovingTabIndex.onClick(ev);
+      }}
+    >
+      <Content>
+        <Heading dir={document.dir}>
+          <Title
+            text={document.titleWithDefault}
+            highlight={highlight}
+            dir={document.dir}
+          />
+        </Heading>
+
+        {
+          <ResultContext
+            text={context}
+            highlight={highlight ? SEARCH_RESULT_REGEX : undefined}
+            processResult={replaceResultMarks}
+          />
+        }
+      </Content>
+    </DocumentLink>
+  );
+}
+
+const Content = styled.div`
+  flex-grow: 1;
+  flex-shrink: 1;
+  min-width: 0;
+`;
+
+const DocumentLink = styled(Link)<{
+  $isStarred?: boolean;
+  $menuOpen?: boolean;
+}>`
+  display: flex;
+  align-items: center;
+  padding: 6px 12px;
+  max-height: 50vh;
+  cursor: var(--pointer);
+
+  &:not(:last-child) {
+    margin-bottom: 4px;
+  }
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  ${breakpoint("tablet")`
+    width: auto;
+  `};
+
+  &:${hover},
+  &:active,
+  &:focus,
+  &:focus-within {
+    background: ${s("listItemHoverBackground")};
+  }
+
+  ${(props) =>
+    props.$menuOpen &&
+    css`
+      background: ${s("listItemHoverBackground")};
+    `}
+`;
+
+const Heading = styled.h4<{ rtl?: boolean }>`
+  display: flex;
+  justify-content: ${(props) => (props.rtl ? "flex-end" : "flex-start")};
+  align-items: center;
+  height: 22px;
+  margin-top: 0;
+  margin-bottom: 0.25em;
+  overflow: hidden;
+  white-space: nowrap;
+  color: ${s("text")};
+`;
+
+const Title = styled(Highlight)`
+  max-width: 90%;
+  ${ellipsis()}
+
+  ${Mark} {
+    padding: 0;
+  }
+`;
+
+const ResultContext = styled(Highlight)`
+  display: block;
+  color: ${s("textTertiary")};
+  font-size: 14px;
+  margin-top: -0.25em;
+  margin-bottom: 0;
+  ${ellipsis()}
+
+  ${Mark} {
+    padding: 0;
+  }
+`;
+
+export default observer(React.forwardRef(DocumentListItem));
@@ -0,0 +1,246 @@
+import debounce from "lodash/debounce";
+import { observer } from "mobx-react";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import styled from "styled-components";
+import Empty from "~/components/Empty";
+import { Outline } from "~/components/Input";
+import InputSearch from "~/components/InputSearch";
+import Placeholder from "~/components/List/Placeholder";
+import PaginatedList from "~/components/PaginatedList";
+import {
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+} from "~/components/primitives/Popover";
+import { id as bodyContentId } from "~/components/SkipNavContent";
+import useKeyDown from "~/hooks/useKeyDown";
+import useStores from "~/hooks/useStores";
+import type { SearchResult } from "~/types";
+import SearchListItem from "./SearchListItem";
+
+interface Props extends React.HTMLAttributes<HTMLInputElement> {
+  shareId: string;
+  className?: string;
+}
+
+function SearchPopover({ shareId, className }: Props) {
+  const { t } = useTranslation();
+  const { documents } = useStores();
+  const focusRef = React.useRef<HTMLElement | null>(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);
+
+  React.useEffect(() => {
+    if (searchResults) {
+      setCachedQuery(query);
+      setCachedSearchResults(searchResults);
+      setOpen(true);
+    }
+  }, [searchResults, query]);
+
+  // Clear search results when the query changes to prevent stale results
+  React.useEffect(() => {
+    setSearchResults(undefined);
+  }, [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;
+      }
+      return undefined;
+    },
+    [documents, shareId]
+  );
+
+  const handleSearchInputChange = React.useMemo(
+    () =>
+      debounce(async (event: React.ChangeEvent<HTMLInputElement>) => {
+        const { value } = event.target;
+        const trimmedValue = value.trim();
+        setQuery(trimmedValue);
+        setOpen(!!trimmedValue);
+      }, 300),
+    [cachedQuery]
+  );
+
+  const searchInputRef = React.useRef<HTMLInputElement>(null);
+  const firstSearchItem = React.useRef<HTMLAnchorElement>(null);
+
+  const handleEscapeList = React.useCallback(
+    () => searchInputRef?.current?.focus(),
+    [searchInputRef]
+  );
+
+  const handleSearchInputFocus = React.useCallback(() => {
+    focusRef.current = searchInputRef.current;
+  }, [searchInputRef]);
+
+  const handleKeyDown = React.useCallback(
+    (ev: React.KeyboardEvent<HTMLInputElement>) => {
+      if (ev.nativeEvent.isComposing) {
+        return;
+      }
+
+      if (ev.key === "Enter") {
+        if (searchResults) {
+          setOpen(true);
+        }
+      }
+
+      if (ev.key === "ArrowDown" && !ev.shiftKey) {
+        if (ev.currentTarget.value.length) {
+          const atEnd =
+            ev.currentTarget.value.length === ev.currentTarget.selectionStart;
+
+          if (atEnd) {
+            setOpen(true);
+          }
+
+          if (open || atEnd) {
+            ev.preventDefault();
+            firstSearchItem.current?.focus();
+          }
+        }
+      }
+
+      if (ev.key === "ArrowUp") {
+        if (open) {
+          setOpen(false);
+          if (!ev.shiftKey) {
+            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);
+          ev.preventDefault();
+        }
+      }
+    },
+    [open, searchResults]
+  );
+
+  const handleSearchItemClick = React.useCallback(() => {
+    setOpen(false);
+    if (searchInputRef.current) {
+      searchInputRef.current.value = "";
+      focusRef.current = document.getElementById(bodyContentId);
+    }
+  }, [searchInputRef]);
+
+  useKeyDown("/", (ev) => {
+    if (
+      searchInputRef.current &&
+      searchInputRef.current !== document.activeElement
+    ) {
+      searchInputRef.current.focus();
+      ev.preventDefault();
+    }
+  });
+
+  return (
+    <Popover open={open} onOpenChange={setOpen} modal={true}>
+      <PopoverAnchor>
+        <StyledInputSearch
+          role="combobox"
+          aria-controls="search-results"
+          aria-expanded={open}
+          aria-haspopup="listbox"
+          ref={searchInputRef}
+          onChange={handleSearchInputChange}
+          onFocus={handleSearchInputFocus}
+          onKeyDown={handleKeyDown}
+          className={className}
+          label={t("Search")}
+          labelHidden
+        />
+      </PopoverAnchor>
+      <PopoverContent
+        id="search-results"
+        aria-label={t("Results")}
+        side="bottom"
+        align="start"
+        shrink
+        onEscapeKeyDown={handleEscapeList}
+        onOpenAutoFocus={(e) => e.preventDefault()}
+        onInteractOutside={(event) => {
+          const target = event.target as Element | null;
+          if (target === searchInputRef.current) {
+            event.preventDefault();
+          }
+        }}
+      >
+        <PaginatedList<SearchResult>
+          role="listbox"
+          options={{ query, snippetMinWords: 10, snippetMaxWords: 11 }}
+          items={cachedSearchResults}
+          fetch={performSearch}
+          onEscape={handleEscapeList}
+          empty={
+            <NoResults>{t("No results for {{query}}", { query })}</NoResults>
+          }
+          loading={<PlaceholderList count={3} header={{ height: 20 }} />}
+          renderItem={(item, index) => (
+            <SearchListItem
+              key={item.document.id}
+              shareId={shareId}
+              ref={index === 0 ? firstSearchItem : undefined}
+              document={item.document}
+              context={item.context}
+              highlight={cachedQuery}
+              onClick={handleSearchItemClick}
+            />
+          )}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+const NoResults = styled(Empty)`
+  padding: 0 12px;
+  margin: 6px 0;
+`;
+
+const PlaceholderList = styled(Placeholder)`
+  padding: 6px 12px;
+`;
+
+const StyledInputSearch = styled(InputSearch)`
+  ${Outline} {
+    border-radius: 16px;
+  }
+`;
+
+export default observer(SearchPopover);
@@ -16,6 +16,7 @@ import Scrollable from "~/components/Scrollable";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
 import useMaxHeight from "~/hooks/useMaxHeight";
 import usePolicy from "~/hooks/usePolicy";
+import useRequest from "~/hooks/useRequest";
 import useStores from "~/hooks/useStores";
 import type { Permission } from "~/types";
 import { EmptySelectValue } from "~/types";
@@ -37,12 +38,10 @@ type Props = {
  invitedInSession: string[];
  /** Whether the popover is visible. */
  visible: boolean;
-  /** Whether the share data is currently loading. */
-  loading: boolean;
 };

 export const AccessControlList = observer(
-  ({ collection, share, invitedInSession, visible, loading }: Props) => {
+  ({ collection, share, invitedInSession, visible }: Props) => {
    const { memberships, groupMemberships } = useStores();
    const team = useCurrentTeam();
    const can = usePolicy(collection);
@@ -50,13 +49,35 @@ export const AccessControlList = observer(
    const theme = useTheme();
    const collectionId = collection.id;

+    const { request: fetchMemberships, loading: membershipLoading } =
+      useRequest(
+        React.useCallback(
+          () => memberships.fetchAll({ id: collectionId }),
+          [memberships, collectionId]
+        )
+      );
+
+    const { request: fetchGroupMemberships, loading: groupMembershipLoading } =
+      useRequest(
+        React.useCallback(
+          () => groupMemberships.fetchAll({ collectionId }),
+          [groupMemberships, collectionId]
+        )
+      );
+
    const groupMembershipsInCollection =
      groupMemberships.inCollection(collectionId);
    const membershipsInCollection = memberships.inCollection(collectionId);
    const hasMemberships =
      groupMembershipsInCollection.length > 0 ||
      membershipsInCollection.length > 0;
-    const showLoading = !hasMemberships && loading;
+    const showLoading =
+      !hasMemberships && (membershipLoading || groupMembershipLoading);
+
+    React.useEffect(() => {
+      void fetchMemberships();
+      void fetchGroupMemberships();
+    }, [fetchMemberships, fetchGroupMemberships]);

    const containerRef = React.useRef<HTMLDivElement | null>(null);
    const publicAccessRef = React.useRef<HTMLDivElement | null>(null);
@@ -18,7 +18,6 @@ import useCurrentTeam from "~/hooks/useCurrentTeam";
 import useKeyDown from "~/hooks/useKeyDown";
 import usePolicy from "~/hooks/usePolicy";
 import usePrevious from "~/hooks/usePrevious";
-import useShareDataLoader from "~/hooks/useShareDataLoader";
 import useStores from "~/hooks/useStores";
 import type { Permission } from "~/types";
 import { collectionPath, urlify } from "~/utils/routeHelpers";
@@ -36,22 +35,11 @@ type Props = {
  onRequestClose: () => void;
  /** Whether the popover is visible. */
  visible: boolean;
-  /** Whether the share data is currently loading, managed externally. */
-  loading?: boolean;
 };

-function SharePopover({
-  collection,
-  visible,
-  onRequestClose,
-  loading: externalLoading,
-}: Props) {
+function SharePopover({ collection, visible, onRequestClose }: Props) {
  const team = useCurrentTeam();
  const { groupMemberships, users, groups, memberships, shares } = useStores();
-  const { preload, loading: internalLoading } = useShareDataLoader({
-    collection,
-  });
-  const loading = externalLoading ?? internalLoading;
  const { t } = useTranslation();
  const can = usePolicy(collection);
  const [query, setQuery] = React.useState("");
@@ -106,12 +94,10 @@ function SharePopover({

  React.useEffect(() => {
    if (visible) {
-      if (externalLoading === undefined) {
-        preload();
-      }
+      void collection.share();
      setHasRendered(true);
    }
-  }, [visible, externalLoading, preload]);
+  }, [collection, visible]);

  React.useEffect(() => {
    if (prevPendingIds && pendingIds.length > prevPendingIds.length) {
@@ -382,7 +368,6 @@ function SharePopover({
          share={share}
          invitedInSession={invitedInSession}
          visible={visible}
-          loading={loading}
        />
      </div>
    </Wrapper>
@@ -4,6 +4,7 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled, { useTheme } from "styled-components";
 import Squircle from "@shared/components/Squircle";
+import { Pagination } from "@shared/constants";
 import { s } from "@shared/styles";
 import { CollectionPermission, IconType } from "@shared/types";
 import { determineIconType } from "@shared/utils/icon";
@@ -42,8 +43,6 @@ type Props = {
  onRequestClose: () => void;
  /** Whether the popover is visible. */
  visible: boolean;
-  /** Whether the share data is currently loading. */
-  loading: boolean;
 };

 export const AccessControlList = observer(
@@ -54,14 +53,13 @@ export const AccessControlList = observer(
    sharedParent,
    onRequestClose,
    visible,
-    loading,
  }: Props) => {
    const { t } = useTranslation();
    const theme = useTheme();
    const collection = document.collection;
    const usersInCollection = useUsersInCollection(collection);
    const user = useCurrentUser();
-    const { groupMemberships } = useStores();
+    const { userMemberships, groupMemberships } = useStores();
    const collectionSharingDisabled = document.collection?.sharing === false;
    const team = useCurrentTeam();
    const can = usePolicy(document);
@@ -77,10 +75,36 @@ export const AccessControlList = observer(
      margin: 24,
    });

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

    React.useEffect(() => {
      calcMaxHeight();
@@ -89,11 +89,7 @@ function DocumentMemberList({ document, invitedInSession }: Props) {
  const members = React.useMemo(
    () =>
      orderBy(
-        Array.from(
-          new Map(
-            document.members.map((memberUser) => [memberUser.id, memberUser])
-          ).values()
-        ),
+        document.members,
        (memberUser) =>
          (invitedInSession.includes(memberUser.id) ? "_" : "") +
          memberUser.name.toLocaleLowerCase(),
@@ -128,19 +124,12 @@ function DocumentMemberList({ document, invitedInSession }: Props) {

  return (
    <>
-      {Array.from(
-        new Map(
-          groupMemberships
-            .inDocument(document.id)
-            .map((membership) => [membership.group.id, membership])
-        ).values()
-      )
+      {groupMemberships
+        .inDocument(document.id)
        .sort((a, b) =>
          (
            (invitedInSession.includes(a.group.id) ? "_" : "") + a.group.name
-          ).localeCompare(
-            (invitedInSession.includes(b.group.id) ? "_" : "") + b.group.name
-          )
+          ).localeCompare(b.group.name)
        )
        .map((membership) => {
          const MaybeLink = membership?.source ? StyledLink : React.Fragment;
@@ -18,7 +18,6 @@ import useCurrentTeam from "~/hooks/useCurrentTeam";
 import useKeyDown from "~/hooks/useKeyDown";
 import usePolicy from "~/hooks/usePolicy";
 import usePrevious from "~/hooks/usePrevious";
-import useShareDataLoader from "~/hooks/useShareDataLoader";
 import useStores from "~/hooks/useStores";
 import type { Permission } from "~/types";
 import { documentPath, urlify } from "~/utils/routeHelpers";
@@ -36,16 +35,9 @@ type Props = {
  onRequestClose: () => void;
  /** Whether the popover is visible. */
  visible: boolean;
-  /** Whether the share data is currently loading, managed externally. */
-  loading?: boolean;
 };

-function SharePopover({
-  document,
-  onRequestClose,
-  visible,
-  loading: externalLoading,
-}: Props) {
+function SharePopover({ document, onRequestClose, visible }: Props) {
  const team = useCurrentTeam();
  const { t } = useTranslation();
  const can = usePolicy(document);
@@ -54,10 +46,6 @@ function SharePopover({
  const sharedParent = shares.getByDocumentParents(document);
  const [hasRendered, setHasRendered] = React.useState(visible);
  const { users, userMemberships, groups, groupMemberships } = useStores();
-  const { preload, loading: internalLoading } = useShareDataLoader({
-    document,
-  });
-  const loading = externalLoading ?? internalLoading;
  const [query, setQuery] = React.useState("");
  const [picker, showPicker, hidePicker] = useBoolean();
  const [invitedInSession, setInvitedInSession] = React.useState<string[]>([]);
@@ -91,14 +79,13 @@ function SharePopover({
    }
  );

+  // Fetch sharefocus the link button when the popover is opened
  React.useEffect(() => {
    if (visible) {
-      if (externalLoading === undefined) {
-        preload();
-      }
+      void document.share();
      setHasRendered(true);
    }
-  }, [visible, externalLoading, preload]);
+  }, [document, hidePicker, visible]);

  // Hide the picker when the popover is closed
  React.useEffect(() => {
@@ -390,7 +377,6 @@ function SharePopover({
          share={share}
          sharedParent={sharedParent}
          visible={visible}
-          loading={loading}
          onRequestClose={onRequestClose}
        />
      </div>
@@ -14,7 +14,6 @@ import type User from "~/models/User";
 import ArrowKeyNavigation from "~/components/ArrowKeyNavigation";
 import type { IAvatar } from "~/components/Avatar";
 import { Avatar, GroupAvatar, AvatarSize } from "~/components/Avatar";
-import ButtonLink from "~/components/ButtonLink";
 import Empty from "~/components/Empty";
 import Placeholder from "~/components/List/Placeholder";
 import Scrollable from "~/components/Scrollable";
@@ -22,7 +21,6 @@ import useCurrentUser from "~/hooks/useCurrentUser";
 import useMaxHeight from "~/hooks/useMaxHeight";
 import useStores from "~/hooks/useStores";
 import useThrottledCallback from "~/hooks/useThrottledCallback";
-import { GroupMembersPopover } from "./GroupMembersPopover";
 import { InviteIcon, ListItem } from "./ListItem";

 type Suggestion = IAvatar & {
@@ -150,18 +148,9 @@ export const Suggestions = observer(
      if (suggestion instanceof Group) {
        return {
          title: suggestion.name,
-          subtitle: (
-            // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
-            <span onClick={(ev) => ev.stopPropagation()}>
-              <GroupMembersPopover group={suggestion}>
-                <StyledButtonLink>
-                  {t("{{ count }} member", {
-                    count: suggestion.memberCount,
-                  })}
-                </StyledButtonLink>
-              </GroupMembersPopover>
-            </span>
-          ),
+          subtitle: t("{{ count }} member", {
+            count: suggestion.memberCount,
+          }),
          image: <GroupAvatar group={suggestion} />,
        };
      }
@@ -204,8 +193,8 @@ export const Suggestions = observer(
            ...pending.map((suggestion) => (
              <PendingListItem
                keyboardNavigation
-                key={suggestion.id}
                {...getListItemProps(suggestion)}
+                key={suggestion.id}
                onClick={() => removePendingId(suggestion.id)}
                onKeyDown={(ev) => {
                  if (ev.key === "Enter") {
@@ -229,8 +218,8 @@ export const Suggestions = observer(
            ...suggestionsWithPending.map((suggestion) => (
              <ListItem
                keyboardNavigation
-                key={suggestion.id}
                {...getListItemProps(suggestion as User)}
+                key={suggestion.id}
                onClick={() => addPendingId(suggestion.id)}
                onKeyDown={(ev) => {
                  if (ev.key === "Enter") {
@@ -279,13 +268,6 @@ const Separator = styled.div`
  margin: 12px 0;
 `;

-const StyledButtonLink = styled(ButtonLink)`
-  color: ${s("textTertiary")};
-  &:hover {
-    text-decoration: underline;
-  }
-`;
-
 const ScrollableContainer = styled(Scrollable)`
  padding: 12px 24px;
  margin: -12px -24px;
@@ -8,23 +8,19 @@ 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, skipInitialAnimation }: Props) {
+function Right({ children, border, className }: 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) => {
@@ -71,20 +67,16 @@ function Right({ children, border, className, skipInitialAnimation }: Props) {

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

  const animationProps = {
-    initial: skipInitialAnimation
-      ? false
-      : {
-          width: 0,
-          opacity: 0.9,
-        },
+    initial: {
+      width: 0,
+      opacity: 0.9,
+    },
    animate: {
      transition: isResizing
        ? { duration: 0 }
@@ -31,7 +31,7 @@ function SettingsSidebar() {

  const groupedConfig = groupBy(
    configs.filter((item) =>
-      item.group === t("Integrations") && item.pluginId
+      item.group === "Integrations" && item.pluginId
        ? integrations.findByService(item.pluginId)
        : true
    ),
@@ -76,8 +76,7 @@ function SettingsSidebar() {
                    to={item.path}
                    onClickIntent={item.preload}
                    active={
-                      item.path.startsWith(settingsPath("templates")) ||
-                      item.path.startsWith(settingsPath("groups"))
+                      item.path.startsWith(settingsPath("templates"))
                        ? location.pathname.startsWith(item.path)
                        : undefined
                    }
@@ -1,15 +1,11 @@
-import { useKBar } from "kbar";
 import { observer } from "mobx-react";
-import { SearchIcon } from "outline-icons";
-import { useCallback, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
-import { s } from "@shared/styles";
-import { ProsemirrorHelper } from "@shared/utils/ProsemirrorHelper";
-import { metaDisplay } from "@shared/utils/keyboard";
+import { hover } from "@shared/styles";
 import type Share from "~/models/Share";
 import Flex from "~/components/Flex";
 import Scrollable from "~/components/Scrollable";
+import SearchPopover from "~/components/SearchPopover";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";
 import history from "~/utils/history";
@@ -22,6 +18,8 @@ import Section from "./components/Section";
 import { SharedCollectionLink } from "./components/SharedCollectionLink";
 import { SharedDocumentLink } from "./components/SharedDocumentLink";
 import SidebarButton from "./components/SidebarButton";
+import { useEffect } from "react";
+import { ProsemirrorHelper } from "@shared/utils/ProsemirrorHelper";

 type Props = {
  share: Share;
@@ -32,7 +30,6 @@ function SharedSidebar({ share }: Props) {
  const user = useCurrentUser({ rejectOnEmpty: false });
  const { ui, documents, collections } = useStores();
  const { t } = useTranslation();
-  const { query } = useKBar();

  const teamAvailable = !!team?.name;
  const rootNode = share.tree;
@@ -42,10 +39,6 @@ function SharedSidebar({ share }: Props) {
    ? ProsemirrorHelper.isEmptyData(collection?.data)
    : false;

-  const handleOpenSearch = useCallback(() => {
-    query.toggle();
-  }, [query]);
-
  useEffect(() => {
    ui.tocVisible = share.showTOC;
  }, []);
@@ -55,7 +48,7 @@ function SharedSidebar({ share }: Props) {
  }

  return (
-    <Sidebar canCollapse={false}>
+    <StyledSidebar $hoverTransition={!teamAvailable} canCollapse={false}>
      {teamAvailable && (
        <SidebarButton
          title={team.name}
@@ -72,11 +65,9 @@ function SharedSidebar({ share }: Props) {
      )}
      <ScrollContainer topShadow flex>
        <TopSection>
-          <SearchButton onClick={handleOpenSearch}>
-            <SearchIcon size={20} />
-            <SearchLabel>{t("Search")}</SearchLabel>
-            <Shortcut>{metaDisplay}K</Shortcut>
-          </SearchButton>
+          <SearchWrapper>
+            <StyledSearchPopover shareId={shareId} />
+          </SearchWrapper>
        </TopSection>
        <Section>
          {share.collectionId ? (
@@ -99,7 +90,7 @@ function SharedSidebar({ share }: Props) {
          )}
        </Section>
      </ScrollContainer>
-    </Sidebar>
+    </StyledSidebar>
  );
 }

@@ -112,34 +103,43 @@ const TopSection = styled(Flex)`
  flex-shrink: 0;
 `;

-const SearchButton = styled.button`
-  display: flex;
-  align-items: center;
-  gap: 8px;
+const SearchWrapper = styled.div`
  width: 100%;
-  padding: 6px 12px;
+`;
+
+const StyledSearchPopover = styled(SearchPopover)`
+  width: 100%;
+  transition: width 100ms ease-out;
  margin: 8px 0;
-  border: 1px solid ${s("inputBorder")};
-  border-radius: 16px;
-  background: ${s("background")};
-  color: ${s("textTertiary")};
-  cursor: var(--pointer);
-  font-size: 14px;
-
-  &:hover {
-    border-color: ${s("inputBorderFocused")};
-    color: ${s("textSecondary")};
-  }
 `;

-const SearchLabel = styled.span`
-  flex-grow: 1;
-  text-align: left;
+const ToggleWrapper = styled.div`
+  position: absolute;
+  right: 0;
+  opacity: 0;
+  transform: translateX(10px);
+  transition:
+    opacity 100ms ease-out,
+    transform 100ms ease-out;
 `;

-const Shortcut = styled.span`
-  flex-shrink: 0;
-  font-size: 13px;
+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);
@@ -1,6 +1,5 @@
 import { observer } from "mobx-react";
 import * as React from "react";
-import { useWebHaptics } from "web-haptics/react";
 import { useLocation } from "react-router-dom";
 import styled, { css, useTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
@@ -54,7 +53,6 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function Sidebar_(
  const collapsed = ui.sidebarIsClosed && canCollapse;
  const maxWidth = theme.sidebarMaxWidth;
  const minWidth = theme.sidebarMinWidth + 16; // padding
-  const { trigger } = useWebHaptics();

  const [offset, setOffset] = React.useState(0);
  const [isHovering, setHovering] = React.useState(false);
@@ -226,11 +224,6 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function Sidebar_(
    [width]
  );

-  const handleCloseSidebar = () => {
-    trigger("light");
-    ui.toggleMobileSidebar();
-  };
-
  return (
    <TooltipProvider>
      <Container
@@ -282,7 +275,7 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function Sidebar_(
          onDoubleClick={ui.sidebarIsClosed ? undefined : handleReset}
        />
      </Container>
-      {ui.mobileSidebarVisible && <Backdrop onClick={handleCloseSidebar} />}
+      {ui.mobileSidebarVisible && <Backdrop onClick={ui.toggleMobileSidebar} />}
    </TooltipProvider>
  );
 });
@@ -265,30 +265,27 @@ function InnerDocumentLink(
      };
    });

-  const insertDraftChild = !!(
-    activeDocument?.isDraft &&
-    activeDocument?.isActive &&
-    activeDocument?.parentDocumentId === node.id
-  );
+  const nodeChildren = React.useMemo(() => {
+    const insertDraftDocument =
+      activeDocument?.isDraft &&
+      activeDocument?.isActive &&
+      activeDocument?.parentDocumentId === node.id;

-  // Only subscribe to asNavigationNode when this node is the parent of an
-  // active draft. This avoids every DocumentLink observer re-rendering on
-  // every title keystroke.
-  const draftNavNode = insertDraftChild
-    ? activeDocument?.asNavigationNode
-    : undefined;
-
-  const nodeChildren = React.useMemo(
-    () =>
-      collection && draftNavNode
-        ? sortNavigationNodes(
-            [draftNavNode, ...node.children],
-            collection.sort,
-            false
-          )
-        : node.children,
-    [draftNavNode, collection, node]
-  );
+    return collection && insertDraftDocument
+      ? sortNavigationNodes(
+          [activeDocument?.asNavigationNode, ...node.children],
+          collection.sort,
+          false
+        )
+      : node.children;
+  }, [
+    activeDocument?.isActive,
+    activeDocument?.isDraft,
+    activeDocument?.parentDocumentId,
+    activeDocument?.asNavigationNode,
+    collection,
+    node,
+  ]);

  const doc = documents.get(node.id);
  const title = doc?.title || node.title || t("Untitled");
@@ -152,7 +152,7 @@ function SidebarLink(
      $isActiveDrop={isActiveDrop}
      $isDraft={isDraft}
      $disabled={disabled}
-      style={active ? activeStyle : style}
+      style={style}
      activeStyle={isActiveDrop ? activeDropStyle : activeStyle}
      onClick={handleClick}
      onActiveClick={handleDisclosureClick}
@@ -7,32 +7,38 @@ export default function useCollectionDocuments(
  collection: Collection | undefined,
  activeDocument: Document | undefined
 ) {
-  const insertDraftDocument = !!(
-    activeDocument &&
-    activeDocument.isActive &&
-    activeDocument.isDraft &&
-    activeDocument.collectionId === collection?.id &&
-    !activeDocument.parentDocumentId
+  const insertDraftDocument = useMemo(
+    () =>
+      activeDocument &&
+      activeDocument.isActive &&
+      activeDocument.isDraft &&
+      activeDocument.collectionId === collection?.id &&
+      !activeDocument.parentDocumentId,
+    [
+      activeDocument?.isActive,
+      activeDocument?.isDraft,
+      activeDocument?.collectionId,
+      activeDocument?.parentDocumentId,
+      collection?.id,
+    ]
  );

-  // Only subscribe to asNavigationNode when we actually need to insert a draft
-  // into the sorted list. This avoids every CollectionLinkChildren observer
-  // re-rendering on every title keystroke.
-  const draftNavNode = insertDraftDocument
-    ? activeDocument?.asNavigationNode
-    : undefined;
-
  return useMemo(() => {
    if (!collection?.sortedDocuments) {
      return undefined;
    }

-    return draftNavNode
+    return insertDraftDocument && activeDocument
      ? sortNavigationNodes(
-          [draftNavNode, ...collection.sortedDocuments],
+          [activeDocument.asNavigationNode, ...collection.sortedDocuments],
          collection.sort,
          false
        )
      : collection.sortedDocuments;
-  }, [draftNavNode, collection?.sortedDocuments, collection?.sort]);
+  }, [
+    insertDraftDocument,
+    activeDocument?.asNavigationNode,
+    collection?.sortedDocuments,
+    collection?.sort,
+  ]);
 }
@@ -28,7 +28,6 @@ interface Props extends Omit<
  disabled?: boolean;
  /** Callback when the switch state changes */
  onChange?: (checked: boolean) => void;
-  inForm?: boolean;
 }

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

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

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

@@ -95,13 +95,6 @@ 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();
@@ -119,7 +112,6 @@ const Tab: React.FC<Props> = (props: Props) => {
            layoutId="underline"
            initial={false}
            transition={transition}
-            transformTemplate={horizontalOnly}
          />
        )}
      </TabButton>
@@ -148,7 +140,6 @@ const Tab: React.FC<Props> = (props: Props) => {
                layoutId="underline"
                initial={false}
                transition={transition}
-                transformTemplate={horizontalOnly}
              />
            )}
        </>
@@ -1,4 +1,4 @@
-import { LayoutGroup } from "framer-motion";
+import { AnimateSharedLayout } 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 (
-    <LayoutGroup>
+    <AnimateSharedLayout>
      <Sticky>
        <Nav ref={ref} onScroll={updateShadows} $shadowVisible={shadowVisible}>
          {children}
        </Nav>
      </Sticky>
-    </LayoutGroup>
+    </AnimateSharedLayout>
  );
 };

@@ -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,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} />;
+});
@@ -0,0 +1,22 @@
+import * as React from "react";
+import styled from "styled-components";
+import Flex from "~/components/Flex";
+
+const Label = ({ icon, value }: { icon: React.ReactNode; value: string }) => (
+  <Flex align="center" gap={4}>
+    <IconWrapper>{icon}</IconWrapper>
+    {value}
+  </Flex>
+);
+
+const IconWrapper = styled.span`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 24px;
+  width: 24px;
+  overflow: hidden;
+  flex-shrink: 0;
+`;
+
+export default Label;
@@ -49,7 +49,7 @@ const SelectLocation = ({ defaultCollectionId, onSelect }: Props) => {
      collections.orderedData.reduce<Option[]>((memo, collection) => {
        const canCollection = policies.abilities(collection.id);

-        if (canCollection.createTemplate) {
+        if (canCollection.createDocument) {
          memo.push({
            type: "item",
            label: collection.name,
@@ -1,28 +1,11 @@
 import { observer } from "mobx-react";
-import * as React from "react";
-import { Toaster, useSonner } from "sonner";
+import { Toaster } from "sonner";
 import styled, { useTheme } from "styled-components";
-import { useWebHaptics } from "web-haptics/react";
 import useStores from "~/hooks/useStores";

 function Toasts() {
  const { ui } = useStores();
  const theme = useTheme();
-  const { toasts } = useSonner();
-  const { trigger } = useWebHaptics();
-  const prevCountRef = React.useRef(toasts.length);
-
-  React.useEffect(() => {
-    if (toasts.length > prevCountRef.current) {
-      const latest = toasts[toasts.length - 1];
-      if (latest.type === "error") {
-        void trigger("error");
-      } else if (latest.type === "success") {
-        void trigger("success");
-      }
-    }
-    prevCountRef.current = toasts.length;
-  }, [toasts, trigger]);

  return (
    <StyledToaster
@@ -2,7 +2,7 @@ import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { transparentize } from "polished";
 import * as React from "react";
 import styled, { keyframes } from "styled-components";
-import { s, depths } from "@shared/styles";
+import { s } from "@shared/styles";
 import useMobile from "~/hooks/useMobile";
 import { useTooltipContext } from "./TooltipContext";

@@ -267,7 +267,7 @@ const StyledContent = styled(TooltipPrimitive.Content)`
  white-space: normal;
  outline: 0;
  padding: 5px 9px;
-  z-index: ${depths.tooltip};
+  z-index: 9999;
  max-width: calc(100vw - 10px);

  /* Animation */
@@ -23,24 +23,29 @@ const DrawerHandle = DrawerPrimitive.Handle;
 /** Drawer's content - renders the overlay and the actual content. */
 const DrawerContent = React.forwardRef<
  React.ElementRef<typeof DrawerPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content> & {
+    $hidden?: boolean;
+  }
 >((props, ref) => {
-  const { children, ...rest } = props;
+  const { children, $hidden, ...rest } = props;
  const [measureRef, bounds] = useMeasure();

  return (
    <DrawerPrimitive.Portal>
-      <DrawerPrimitive.Overlay asChild>
-        <Overlay />
-      </DrawerPrimitive.Overlay>
+      {!$hidden && (
+        <DrawerPrimitive.Overlay asChild>
+          <Overlay />
+        </DrawerPrimitive.Overlay>
+      )}
      <DrawerPrimitive.Content ref={ref} asChild>
        <StyledContent
+          $hidden={$hidden}
          animate={{
            height: bounds.height,
            transition: { bounce: 0, duration: 0.2 },
          }}
        >
-          <StyledInnerContent column ref={measureRef} {...rest}>
+          <StyledInnerContent ref={measureRef} {...rest}>
            {children}
          </StyledInnerContent>
        </StyledContent>
@@ -58,9 +63,9 @@ const DrawerTitle = React.forwardRef<
  const { hidden, children, ...rest } = props;

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

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

-const StyledText = styled(Text)`
-  flex-shrink: 0;
-`;
-
 /** Styled components. */
-const StyledContent = styled(m.div)`
+const StyledContent = styled(m.div)<{ $hidden?: boolean }>`
  z-index: ${depths.menu};
  position: fixed;
  left: 0;
@@ -94,9 +95,11 @@ const StyledContent = styled(m.div)`
  border-radius: 6px;

  background: ${s("menuBackground")};
+
+  ${({ $hidden }) => $hidden && "display: none;"}
 `;

-const StyledInnerContent = styled(Flex)`
+const StyledInnerContent = styled.div`
  padding: 6px;
  height: 100%;
 `;
@@ -1,11 +1,38 @@
-import { createContext, useContext, useMemo } from "react";
+import type { RefObject } from "react";
+import {
+  createContext,
+  useContext,
+  useMemo,
+  useState,
+  useRef,
+  useCallback,
+} from "react";

-type MenuVariant = "dropdown" | "context";
+type MenuVariant = "dropdown" | "context" | "inline";

-const MenuContext = createContext<{
+type MenuContextType = {
  variant: MenuVariant;
-}>({
+  activeSubmenu: string | null;
+  setActiveSubmenu: (id: string | null) => void;
+  submenuTriggerRefs: Record<string, RefObject<HTMLDivElement>>;
+  addSubmenuTriggerRef: (id: string, ref: RefObject<HTMLDivElement>) => void;
+  submenuContentRefs: Record<string, RefObject<HTMLDivElement | null>>;
+  addSubmenuContentRef: (
+    id: string,
+    ref: RefObject<HTMLDivElement | null>
+  ) => void;
+  mainMenuRef: React.RefObject<HTMLDivElement>;
+};
+
+const MenuContext = createContext<MenuContextType>({
  variant: "dropdown",
+  activeSubmenu: null,
+  setActiveSubmenu: () => {},
+  submenuTriggerRefs: {},
+  addSubmenuTriggerRef: () => {},
+  submenuContentRefs: {},
+  addSubmenuContentRef: () => {},
+  mainMenuRef: { current: null },
 });

 export function MenuProvider({
@@ -15,7 +42,54 @@ export function MenuProvider({
  variant: MenuVariant;
  children: React.ReactNode;
 }) {
-  const ctx = useMemo(() => ({ variant }), [variant]);
+  const [activeSubmenu, setActiveSubmenu] = useState<string | null>(null);
+  const [submenuTriggerRefs, setSubmenuTriggerRefs] = useState<
+    Record<string, RefObject<HTMLDivElement>>
+  >({});
+  const [submenuContentRefs, setSubmenuContentRefs] = useState<
+    Record<string, RefObject<HTMLDivElement | null>>
+  >({});
+  const mainMenuRef = useRef<HTMLDivElement>(null);
+  const addSubmenuTriggerRef = useCallback(
+    (key: string, ref: RefObject<HTMLDivElement>) => {
+      setSubmenuTriggerRefs((prevRefs) => ({
+        ...prevRefs,
+        [key]: ref,
+      }));
+    },
+    [setSubmenuTriggerRefs]
+  );
+  const addSubmenuContentRef = useCallback(
+    (key: string, ref: RefObject<HTMLDivElement | null>) => {
+      setSubmenuContentRefs((prevRefs) => ({
+        ...prevRefs,
+        [key]: ref,
+      }));
+    },
+    [setSubmenuContentRefs]
+  );
+
+  const ctx = useMemo(
+    () => ({
+      variant,
+      activeSubmenu,
+      setActiveSubmenu,
+      submenuTriggerRefs,
+      addSubmenuTriggerRef,
+      submenuContentRefs,
+      addSubmenuContentRef,
+      mainMenuRef,
+    }),
+    [
+      variant,
+      activeSubmenu,
+      mainMenuRef,
+      submenuTriggerRefs,
+      addSubmenuTriggerRef,
+      submenuContentRefs,
+      addSubmenuContentRef,
+    ]
+  );

  return <MenuContext.Provider value={ctx}>{children}</MenuContext.Provider>;
 }
@@ -3,18 +3,31 @@ import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import * as Components from "../components/Menu";
 import type { LocationDescriptor } from "history";
 import * as React from "react";
+import styled from "styled-components";
 import Tooltip from "~/components/Tooltip";
 import { CheckmarkIcon } from "outline-icons";
 import { useMenuContext } from "./MenuContext";
+import useMobile from "~/hooks/useMobile";
+import { Drawer, DrawerContent } from "../Drawer";
+import Scrollable from "~/components/Scrollable";
+import { Portal as ReactPortal } from "~/components/Portal";
+import useOnClickOutside from "~/hooks/useOnClickOutside";
+import { MenuType } from "@shared/editor/types";
+import { collapseSelection } from "@shared/editor/commands/collapseSelection";
+import { useEditor } from "~/editor/components/EditorContext";
+import type { EditorView } from "prosemirror-view";

 type MenuProps = React.ComponentPropsWithoutRef<
  typeof DropdownMenuPrimitive.Root
 > &
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Root>;
-
 const Menu = ({ children, ...rest }: MenuProps) => {
  const { variant } = useMenuContext();

+  if (variant === MenuType.inline) {
+    return <>{children}</>;
+  }
+
  const Root =
    variant === "dropdown"
      ? DropdownMenuPrimitive.Root
@@ -31,6 +44,10 @@ type SubMenuProps = React.ComponentPropsWithoutRef<
 const SubMenu = ({ children, ...rest }: SubMenuProps) => {
  const { variant } = useMenuContext();

+  if (variant === MenuType.inline) {
+    return <div>{children}</div>;
+  }
+
  const Sub =
    variant === "dropdown"
      ? DropdownMenuPrimitive.Sub
@@ -68,16 +85,77 @@ MenuTrigger.displayName = "MenuTrigger";
 type ContentProps = React.ComponentPropsWithoutRef<
  typeof DropdownMenuPrimitive.Content
 > &
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>;
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content> & {
+    pos?: {
+      top: number;
+      left: number;
+    };
+  };

 const MenuContent = React.forwardRef<
  | React.ElementRef<typeof DropdownMenuPrimitive.Content>
-  | React.ElementRef<typeof ContextMenuPrimitive.Content>,
+  | React.ElementRef<typeof ContextMenuPrimitive.Content>
+  | HTMLDivElement,
  ContentProps
 >((props, ref) => {
-  const { variant } = useMenuContext();
+  const { variant, mainMenuRef, activeSubmenu } = useMenuContext();
+  const isMobile = useMobile();
+  const { view } = useEditor();
+
  const { children, ...rest } = props;

+  if (variant === MenuType.inline) {
+    const contentProps = {
+      maxHeightVar: "--radix-dropdown-menu-content-available-height",
+      transformOriginVar: "--radix-dropdown-menu-content-transform-origin",
+    };
+    const { pos } = props;
+
+    return isMobile ? (
+      <Drawer
+        open={true}
+        modal={false}
+        onOpenChange={(open) => {
+          if (!open) {
+            closeMenu(view);
+          }
+        }}
+      >
+        <DrawerContent $hidden={!!activeSubmenu} {...rest}>
+          <StyledScrollable hiddenScrollbars>{children}</StyledScrollable>
+        </DrawerContent>
+      </Drawer>
+    ) : (
+      <ReactPortal>
+        <InlineMenuContentWrapper
+          ref={(node) => {
+            // Set the main menu ref for submenu positioning
+            if (mainMenuRef) {
+              (
+                mainMenuRef as React.MutableRefObject<HTMLElement | null>
+              ).current = node;
+            }
+            if (typeof ref === "function") {
+              ref(node);
+            } else if (ref) {
+              (ref as React.MutableRefObject<HTMLDivElement | null>).current =
+                node;
+            }
+          }}
+          {...contentProps}
+          {...rest}
+          hiddenScrollbars
+          style={{
+            top: pos?.top,
+            left: pos?.left,
+          }}
+        >
+          {children}
+        </InlineMenuContentWrapper>
+      </ReactPortal>
+    );
+  }
+
  const Portal =
    variant === "dropdown"
      ? DropdownMenuPrimitive.Portal
@@ -120,11 +198,45 @@ type SubMenuTriggerProps = BaseItemProps &

 const SubMenuTrigger = React.forwardRef<
  | React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>
-  | React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
+  | React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>
+  | HTMLDivElement,
  SubMenuTriggerProps
 >((props, ref) => {
-  const { variant } = useMenuContext();
-  const { label, icon, disabled, ...rest } = props;
+  const { variant, setActiveSubmenu, addSubmenuTriggerRef } = useMenuContext();
+  const { label, icon, disabled, id, ...rest } = props;
+  const triggerRef = React.useRef<HTMLDivElement>(null);
+  const isMobile = useMobile();
+
+  React.useEffect(() => {
+    if (id && triggerRef.current) {
+      addSubmenuTriggerRef(id, triggerRef);
+    }
+  }, [triggerRef, id, addSubmenuTriggerRef]);
+
+  if (variant === MenuType.inline) {
+    return (
+      <Components.MenuSubTrigger
+        ref={triggerRef}
+        disabled={disabled}
+        onClick={() => {
+          if (!disabled && id && isMobile) {
+            setActiveSubmenu(id);
+          }
+        }}
+        onMouseEnter={() => {
+          if (!disabled && id && !isMobile) {
+            setActiveSubmenu(id);
+          }
+        }}
+      >
+        {icon}
+        <Components.MenuLabel style={{ marginRight: 20 }}>
+          {label}
+        </Components.MenuLabel>
+        <Components.MenuDisclosure />
+      </Components.MenuSubTrigger>
+    );
+  }

  const Trigger =
    variant === "dropdown"
@@ -143,6 +255,12 @@ const SubMenuTrigger = React.forwardRef<
 });
 SubMenuTrigger.displayName = "SubMenuTrigger";

+const MARGIN_RIGHT_FOR_UX = 20; // Margin for better UX
+const NESTED_OFFSET_LEFT = 95; // Offset for nested submenu when it renders on the left
+const TOP_OFFSET_LEFT = 75; // Offset for top submenu when it renders on the left
+const NESTED_OFFSET_RIGHT = 75; //  Offset for nested submenu when it renders on the right
+const TOP_OFFSET_RIGHT = 65; // Offset for top submenu when it renders on the right
+
 type SubMenuContentProps = React.ComponentPropsWithoutRef<
  typeof DropdownMenuPrimitive.SubContent
 > &
@@ -150,11 +268,166 @@ type SubMenuContentProps = React.ComponentPropsWithoutRef<

 const SubMenuContent = React.forwardRef<
  | React.ElementRef<typeof DropdownMenuPrimitive.SubContent>
-  | React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
+  | React.ElementRef<typeof ContextMenuPrimitive.SubContent>
+  | HTMLDivElement,
  SubMenuContentProps
 >((props, ref) => {
-  const { variant } = useMenuContext();
-  const { children, ...rest } = props;
+  const submenuRef = React.useRef<HTMLDivElement | null>(null);
+  const {
+    variant,
+    activeSubmenu,
+    submenuTriggerRefs,
+    submenuContentRefs,
+    addSubmenuContentRef,
+    mainMenuRef,
+    setActiveSubmenu,
+  } = useMenuContext();
+  const { children, id, ...rest } = props;
+  const [position, setPosition] = React.useState({ top: 0, left: 0 });
+  const isMobile = useMobile();
+
+  React.useEffect(() => {
+    if (id) {
+      addSubmenuContentRef(id, submenuRef);
+    }
+  }, [id, addSubmenuContentRef]);
+
+  const handleClickOutside = React.useCallback(
+    (event: MouseEvent | TouchEvent) => {
+      const isInsideDescendant =
+        id &&
+        Object.entries(submenuContentRefs).some(
+          ([refId, contentRef]) =>
+            refId !== id &&
+            refId.startsWith(id + "-") &&
+            contentRef.current?.contains(event.target as Node)
+        );
+      if (isInsideDescendant) {
+        return;
+      }
+
+      // Walk up the id hierarchy to find the deepest ancestor submenu containing the click.
+      let targetSubmenu: string | null = null;
+      if (id) {
+        const parts = id.split("-");
+        for (let len = parts.length - 1; len >= 2; len--) {
+          const ancestorId = parts.slice(0, len).join("-");
+          const ancestorRef = submenuContentRefs[ancestorId];
+          if (ancestorRef?.current?.contains(event.target as Node)) {
+            targetSubmenu = ancestorId;
+            break;
+          }
+        }
+      }
+
+      setActiveSubmenu(targetSubmenu);
+    },
+    [id, submenuContentRefs, setActiveSubmenu]
+  );
+
+  // the submenu drawer handles its own click outside logic
+  useOnClickOutside(submenuRef, isMobile ? undefined : handleClickOutside);
+
+  React.useEffect(() => {
+    const trigger = submenuTriggerRefs[id ?? ""];
+
+    if (trigger?.current) {
+      const triggerRect = trigger.current.getBoundingClientRect();
+      const parentId = id ? getParentSubmenuId(id) : null;
+      const anchorRect = (
+        parentId ? submenuContentRefs[parentId]?.current : mainMenuRef.current
+      )?.getBoundingClientRect();
+      const subMenuRect = submenuRef.current?.getBoundingClientRect();
+      const viewportWidth = window.innerWidth;
+
+      const spaceOnRight = viewportWidth - triggerRect.right;
+      const anchorWidth = anchorRect?.width;
+      const submenuWidth = subMenuRect?.width;
+
+      const offsetLeft = parentId ? NESTED_OFFSET_LEFT : TOP_OFFSET_LEFT;
+      const offsetRight = parentId ? NESTED_OFFSET_RIGHT : TOP_OFFSET_RIGHT;
+
+      let left = triggerRect.left - offsetLeft;
+
+      // Check if there's enough space on the right
+      if (
+        submenuWidth &&
+        anchorWidth &&
+        spaceOnRight < submenuWidth + MARGIN_RIGHT_FOR_UX
+      ) {
+        left = triggerRect.left - submenuWidth - anchorWidth - offsetRight;
+      }
+
+      setPosition({
+        top: triggerRect.top,
+        left,
+      });
+    }
+  }, [
+    variant,
+    activeSubmenu,
+    submenuTriggerRefs,
+    mainMenuRef,
+    id,
+    submenuContentRefs,
+  ]);
+
+  if (variant === MenuType.inline) {
+    const isVisible =
+      activeSubmenu === id ||
+      (id !== undefined && activeSubmenu?.startsWith(id + "-"));
+    if (!isVisible) {
+      return null;
+    }
+
+    const contentProps = {
+      maxHeightVar: "--inline-menu-max-height",
+      transformOriginVar: "--inline-menu-transform-origin",
+    };
+
+    if (isMobile) {
+      if (activeSubmenu !== id) {
+        return <>{children}</>;
+      }
+
+      return (
+        <SubMenuDrawer
+          setActiveSubmenu={setActiveSubmenu}
+          submenuRef={submenuRef}
+          forwardedRef={ref}
+          {...rest}
+        >
+          {children}
+        </SubMenuDrawer>
+      );
+    }
+
+    return (
+      <ReactPortal>
+        <InlineMenuContentWrapper
+          ref={(node) => {
+            submenuRef.current = node;
+            if (typeof ref === "function") {
+              ref(node);
+            } else if (ref) {
+              (ref as React.MutableRefObject<HTMLDivElement | null>).current =
+                node;
+            }
+          }}
+          {...contentProps}
+          {...rest}
+          hiddenScrollbars
+          style={{
+            top: position.top,
+            left: position.left,
+            zIndex: 1001,
+          }}
+        >
+          {children}
+        </InlineMenuContentWrapper>
+      </ReactPortal>
+    );
+  }

  const Portal =
    variant === "dropdown"
@@ -203,7 +476,8 @@ type MenuGroupProps = {

 const MenuGroup = React.forwardRef<
  | React.ElementRef<typeof DropdownMenuPrimitive.Group>
-  | React.ElementRef<typeof ContextMenuPrimitive.Group>,
+  | React.ElementRef<typeof ContextMenuPrimitive.Group>
+  | HTMLDivElement,
  MenuGroupProps
 >((props, ref) => {
  const { variant } = useMenuContext();
@@ -224,6 +498,7 @@ const MenuGroup = React.forwardRef<
 MenuGroup.displayName = "MenuGroup";

 type BaseItemProps = {
+  id?: string;
  label: string;
  icon?: React.ReactElement;
  disabled?: boolean;
@@ -248,7 +523,9 @@ const MenuButton = React.forwardRef<
  | React.ElementRef<typeof ContextMenuPrimitive.Item>,
  MenuButtonProps
 >((props, ref) => {
-  const { variant } = useMenuContext();
+  const { variant, activeSubmenu, setActiveSubmenu } = useMenuContext();
+  const { view } = useEditor();
+  const [active, setActive] = React.useState(false);
  const {
    label,
    icon,
@@ -260,28 +537,63 @@ const MenuButton = React.forwardRef<
    ...rest
  } = props;

+  const buttonContent = (
+    <>
+      {icon}
+      <Components.MenuLabel>{label}</Components.MenuLabel>
+      {selected !== undefined && (
+        <Components.SelectedIconWrapper aria-hidden>
+          {selected ? <CheckmarkIcon size={18} /> : null}
+        </Components.SelectedIconWrapper>
+      )}
+    </>
+  );
+
  const Item =
    variant === "dropdown"
      ? DropdownMenuPrimitive.Item
      : ContextMenuPrimitive.Item;

-  const button = (
-    <Item ref={ref} disabled={disabled} {...rest} asChild>
+  const handleMouseEnter = React.useCallback(() => {
+    setActive(true);
+    if (props.id) {
+      // Close any nested submenu that is deeper than this button's parent level.
+      const parentId = getParentSubmenuId(props.id);
+      if (activeSubmenu && activeSubmenu !== parentId) {
+        setActiveSubmenu(parentId);
+      }
+    } else if (activeSubmenu) {
+      setActiveSubmenu(null);
+    }
+  }, [setActive, props.id, activeSubmenu, setActiveSubmenu]);
+
+  const button =
+    variant === MenuType.inline ? (
      <Components.MenuButton
+        ref={ref as React.Ref<HTMLButtonElement>}
        disabled={disabled}
        $dangerous={dangerous}
-        onClick={onClick}
+        $active={active}
+        onClick={(e) => {
+          onClick(e);
+          closeMenu(view);
+        }}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={() => setActive(false)}
      >
-        {icon}
-        <Components.MenuLabel>{label}</Components.MenuLabel>
-        {selected !== undefined && (
-          <Components.SelectedIconWrapper aria-hidden>
-            {selected ? <CheckmarkIcon size={18} /> : null}
-          </Components.SelectedIconWrapper>
-        )}
+        {buttonContent}
      </Components.MenuButton>
-    </Item>
-  );
+    ) : (
+      <Item ref={ref} disabled={disabled} {...rest} asChild>
+        <Components.MenuButton
+          disabled={disabled}
+          $dangerous={dangerous}
+          onClick={onClick}
+        >
+          {buttonContent}
+        </Components.MenuButton>
+      </Item>
+    );

  return tooltip ? (
    <Tooltip content={tooltip} placement="bottom">
@@ -375,11 +687,16 @@ type MenuSeparatorProps = React.ComponentPropsWithoutRef<

 const MenuSeparator = React.forwardRef<
  | React.ElementRef<typeof DropdownMenuPrimitive.Separator>
-  | React.ElementRef<typeof ContextMenuPrimitive.Separator>,
+  | React.ElementRef<typeof ContextMenuPrimitive.Separator>
+  | HTMLDivElement,
  MenuSeparatorProps
 >((props, ref) => {
  const { variant } = useMenuContext();

+  if (variant === MenuType.inline) {
+    return <Components.MenuSeparator ref={ref as React.Ref<HTMLHRElement>} />;
+  }
+
  const Separator =
    variant === "dropdown"
      ? DropdownMenuPrimitive.Separator
@@ -419,6 +736,82 @@ const MenuLabel = React.forwardRef<
 });
 MenuLabel.displayName = "MenuLabel";

+const DRAWER_ANIMATION_DURATION_MS = 300;
+
+type SubMenuDrawerProps = React.HTMLAttributes<HTMLDivElement> & {
+  setActiveSubmenu: (id: string | null) => void;
+  submenuRef: React.MutableRefObject<HTMLDivElement | null>;
+  forwardedRef: React.ForwardedRef<HTMLDivElement>;
+  children: React.ReactNode;
+};
+
+const SubMenuDrawer = ({
+  setActiveSubmenu,
+  submenuRef,
+  forwardedRef,
+  children,
+  ...rest
+}: SubMenuDrawerProps) => {
+  const [isOpen, setIsOpen] = React.useState(true);
+  const { view } = useEditor();
+
+  const handleOpenChange = React.useCallback(
+    (open: boolean) => {
+      if (!open) {
+        setIsOpen(false);
+        // Let slide-down animation play out before tearing down the tree.
+        setTimeout(() => {
+          setActiveSubmenu(null);
+          closeMenu(view);
+        }, DRAWER_ANIMATION_DURATION_MS);
+      }
+    },
+    [setActiveSubmenu, view]
+  );
+
+  useOnClickOutside(submenuRef, () => handleOpenChange(false));
+
+  return (
+    <Drawer open={isOpen} modal={false} onOpenChange={handleOpenChange}>
+      <DrawerContent
+        ref={(node) => {
+          submenuRef.current = node;
+          if (typeof forwardedRef === "function") {
+            forwardedRef(node);
+          } else if (forwardedRef) {
+            (
+              forwardedRef as React.MutableRefObject<HTMLDivElement | null>
+            ).current = node;
+          }
+        }}
+        {...rest}
+      >
+        <StyledScrollable hiddenScrollbars>{children}</StyledScrollable>
+      </DrawerContent>
+    </Drawer>
+  );
+};
+
+const getParentSubmenuId = (id: string): string | null => {
+  const parts = id.split("-");
+  return parts.length > 2 ? parts.slice(0, -1).join("-") : null;
+};
+
+const closeMenu = (view: EditorView) => {
+  collapseSelection()(view.state, view.dispatch);
+};
+
+const InlineMenuContentWrapper = styled(Components.MenuContent)`
+  position: absolute;
+  height: fit-content;
+  z-index: 1000;
+`;
+
+// Styled scrollable for mobile drawer content
+const StyledScrollable = styled(Scrollable)`
+  max-height: 75vh;
+`;
+
 export {
  Menu,
  MenuTrigger,
@@ -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);
+    animation: ${fadeAndScaleIn} 150ms cubic-bezier(0.08, 0.82, 0.17, 1); // ease-out-circ
  }
 `;

@@ -67,7 +67,6 @@ 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};
@@ -108,6 +107,25 @@ export const MenuExternalLink = styled.a`

 export const MenuSubTrigger = styled.div<BaseMenuItemProps>`
  ${BaseMenuItemCSS}
+
+  ${(props) =>
+    !props.disabled &&
+    `
+      &:hover {
+        color: ${props.theme.accentText};
+        background: ${props.$dangerous ? props.theme.danger : props.theme.accent};
+        outline-color: ${
+          props.$dangerous ? props.theme.danger : props.theme.accent
+        };
+        box-shadow: none;
+        cursor: var(--pointer);
+  
+        svg:not([data-fixed-color]) {
+          color: ${props.theme.accentText};
+          fill: ${props.theme.accentText};
+        }
+      }
+    `}
 `;

 export const MenuSeparator = styled.hr`
@@ -1,126 +1,17 @@
-import { DocumentIcon, ShapesIcon } from "outline-icons";
-import cloneDeep from "lodash/cloneDeep";
-import { observer } from "mobx-react";
-import { useCallback, useMemo } from "react";
-import { useTranslation } from "react-i18next";
-import Icon from "@shared/components/Icon";
-import type { MenuItem } from "@shared/editor/types";
-import { ProsemirrorHelper } from "@shared/utils/ProsemirrorHelper";
-import { TextHelper } from "@shared/utils/TextHelper";
-import useCurrentUser from "~/hooks/useCurrentUser";
+import { useCallback } from "react";
 import useDictionary from "~/hooks/useDictionary";
-import useStores from "~/hooks/useStores";
 import getMenuItems from "../menus/block";
 import { useEditor } from "./EditorContext";
 import type { Props as SuggestionsMenuProps } from "./SuggestionsMenu";
 import SuggestionsMenu from "./SuggestionsMenu";
 import SuggestionsMenuItem from "./SuggestionsMenuItem";

-/**
- * Hook that returns a template menu item with children for inserting template
- * content into the editor, or undefined if no templates are available.
- */
-function useTemplateMenuItem(): MenuItem | undefined {
-  const { t } = useTranslation();
-  const user = useCurrentUser({ rejectOnEmpty: false });
-  const { documents, templates: templatesStore } = useStores();
-  const editor = useEditor();
-  const documentId = editor.props.id;
-  const document = documentId ? documents.get(documentId) : undefined;
-  const collectionId = document?.collectionId;
-
-  return useMemo(() => {
-    if (!user) {
-      return undefined;
-    }
-
-    const allTemplates = templatesStore.orderedData.filter(
-      (template) => template.isActive
-    );
-    const hasTemplates = allTemplates.some(
-      (template) =>
-        template.isWorkspaceTemplate || template.collectionId === collectionId
-    );
-
-    if (!hasTemplates) {
-      return undefined;
-    }
-
-    const toMenuItem = (template: (typeof allTemplates)[0]): MenuItem => ({
-      name: "noop",
-      title: TextHelper.replaceTemplateVariables(
-        template.titleWithDefault,
-        user
-      ),
-      icon: template.icon ? (
-        <Icon
-          value={template.icon}
-          initial={template.initial}
-          color={template.color ?? undefined}
-        />
-      ) : (
-        <DocumentIcon />
-      ),
-      keywords: template.titleWithDefault,
-      onClick: () => {
-        const data = cloneDeep(template.data);
-        ProsemirrorHelper.replaceTemplateVariables(data, user);
-        editor.insertContent(data);
-      },
-    });
-
-    const children = (): MenuItem[] => {
-      const collectionTemplates = allTemplates.filter(
-        (template) =>
-          !template.isWorkspaceTemplate &&
-          template.collectionId === collectionId
-      );
-      const workspaceTemplates = allTemplates.filter(
-        (tmpl) => tmpl.isWorkspaceTemplate
-      );
-
-      const items: MenuItem[] = collectionTemplates.map(toMenuItem);
-
-      if (collectionTemplates.length && workspaceTemplates.length) {
-        items.push({ name: "separator" });
-      }
-
-      if (workspaceTemplates.length) {
-        for (const template of workspaceTemplates) {
-          items.push(toMenuItem(template));
-        }
-      }
-
-      return items;
-    };
-
-    return {
-      name: "noop",
-      title: t("Templates"),
-      icon: <ShapesIcon />,
-      keywords: "template",
-      children,
-    } satisfies MenuItem;
-  }, [user, templatesStore.orderedData, collectionId, editor, t]);
-}
-
 type Props = Omit<SuggestionsMenuProps, "renderMenuItem" | "items"> &
  Required<Pick<SuggestionsMenuProps, "embeds">>;

 function BlockMenu(props: Props) {
  const dictionary = useDictionary();
  const { elementRef } = useEditor();
-  const templateMenuItem = useTemplateMenuItem();
-
-  const items = useMemo(() => {
-    const baseItems = getMenuItems(dictionary, elementRef);
-
-    if (!templateMenuItem) {
-      return baseItems;
-    }
-
-    return [...baseItems, { name: "separator" } as MenuItem, templateMenuItem];
-  }, [dictionary, elementRef, templateMenuItem]);

  const renderMenuItem = useCallback(
    (item, _index, options) => (
@@ -129,7 +20,6 @@ function BlockMenu(props: Props) {
        icon={item.icon}
        title={item.title}
        shortcut={item.shortcut}
-        disclosure={options.disclosure}
      />
    ),
    []
@@ -141,9 +31,9 @@ function BlockMenu(props: Props) {
      filterable
      trigger="/"
      renderMenuItem={renderMenuItem}
-      items={items}
+      items={getMenuItems(dictionary, elementRef)}
    />
  );
 }

-export default observer(BlockMenu);
+export default BlockMenu;
@@ -39,6 +39,7 @@ 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);
@@ -36,14 +36,16 @@ const defaultPosition = {
  visible: false,
 };

-function usePosition({
+export function usePosition({
  menuRef,
  active,
  align = "center",
+  inline = false,
 }: {
  menuRef: React.RefObject<HTMLDivElement>;
  active?: boolean;
  align?: Props["align"];
+  inline?: boolean;
 }) {
  const { view } = useEditor();
  const { selection } = view.state;
@@ -90,19 +92,12 @@ function usePosition({
      } as DOMRect);

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

-  if (
-    (codeBlock || noticeBlock) &&
-    (view.state.selection.empty || isCodeNodeSelection)
-  ) {
+  if ((codeBlock || noticeBlock) && view.state.selection.empty) {
    const position = codeBlock
      ? codeBlock.pos
      : noticeBlock
@@ -127,13 +122,14 @@ function usePosition({
    selection instanceof ColumnSelection && selection.isColSelection();
  const isRowSelection =
    selection instanceof RowSelection && selection.isRowSelection();
+  let colWidth = 0;

  if (isTableSelected(view.state)) {
    const rect = selectedRect(view.state);
    const table = view.domAtPos(rect.tableStart);
    const bounds = (table.node as HTMLElement).getBoundingClientRect();
-    selectionBounds.top = bounds.top - 16;
-    selectionBounds.left = bounds.left - 10;
+    selectionBounds.top = bounds.top - (inline ? 160 : 16);
+    selectionBounds.left = bounds.left;
    selectionBounds.right = bounds.left - 10;
  } else if (isColSelection) {
    const rect = selectedRect(view.state);
@@ -143,6 +139,7 @@ function usePosition({
    );
    if (element instanceof HTMLElement) {
      const bounds = element.getBoundingClientRect();
+      colWidth = bounds.width;
      selectionBounds.top = bounds.top - 16;
      selectionBounds.left = bounds.left;
      selectionBounds.right = bounds.right;
@@ -155,8 +152,8 @@ function usePosition({
    );
    if (element instanceof HTMLElement) {
      const bounds = element.getBoundingClientRect();
-      selectionBounds.top = bounds.top;
-      selectionBounds.left = bounds.left - 10;
+      selectionBounds.top = bounds.top + (inline ? 55 : 0);
+      selectionBounds.left = bounds.left - (inline ? 410 : 10);
      selectionBounds.right = bounds.left - 10;
    }
  }
@@ -205,11 +202,13 @@ function usePosition({
    ),
    Math.max(
      Math.max(offsetParent.x, margin),
-      align === "center"
-        ? centerOfSelection - menuWidth / 2
-        : align === "start"
-          ? selectionBounds.left
-          : selectionBounds.right
+      isColSelection && colWidth < 300
+        ? selectionBounds.right + margin
+        : align === "center"
+          ? centerOfSelection - menuWidth / 2
+          : align === "start"
+            ? selectionBounds.left
+            : selectionBounds.right
    )
  );
  const top = Math.max(
@@ -0,0 +1,110 @@
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { Portal } from "~/components/Portal";
+import { Menu } from "~/components/primitives/Menu";
+import type { MenuItem } from "@shared/editor/types";
+import { MenuContent } from "~/components/primitives/Menu";
+import { toMenuItems } from "~/components/Menu/transformer";
+import EventBoundary from "@shared/components/EventBoundary";
+import { MenuProvider } from "~/components/primitives/Menu/MenuContext";
+import { mapMenuItems } from "./ToolbarMenu";
+import { useEditor } from "./EditorContext";
+import { useTranslation } from "react-i18next";
+import { usePosition } from "./FloatingToolbar";
+import useMobile from "~/hooks/useMobile";
+
+type Props = {
+  items: MenuItem[];
+  containerRef?: React.MutableRefObject<HTMLDivElement | null>;
+};
+
+/*
+ * Renders an inline menu in the floating toolbar, which does not require a trigger.
+ */
+const InlineMenu: React.FC<Props> = ({ items, containerRef }) => {
+  const { t } = useTranslation();
+  const { commands, view } = useEditor();
+  const fallbackRef = useRef<HTMLDivElement | null>(null);
+  const menuRef = containerRef || fallbackRef;
+  const isMobile = useMobile();
+  const [pos, setPos] = useState({ top: 0, left: 0 });
+
+  const position = usePosition({
+    menuRef,
+    active: true,
+    inline: true,
+  });
+
+  useEffect(() => {
+    const viewportWidth = window.innerWidth;
+    const menuRect = menuRef.current?.getBoundingClientRect();
+
+    let left = position.left;
+    if (menuRef.current && menuRect) {
+      const spaceOnRight = viewportWidth - left;
+      if (spaceOnRight < menuRect.right) {
+        left = left - spaceOnRight; // double the space on the right
+      }
+    }
+
+    setPos((prevPos) => {
+      if (prevPos.top !== position.top || prevPos.left !== left) {
+        return {
+          top: position.top,
+          left,
+        };
+      }
+      return prevPos;
+    });
+  }, [menuRef, position]);
+
+  const handleCloseAutoFocus = useCallback((ev: Event) => {
+    ev.stopImmediatePropagation();
+  }, []);
+
+  const mappedItems = useMemo(
+    () =>
+      items.map((item) => {
+        const children =
+          typeof item.children === "function" ? item.children() : item.children;
+
+        return {
+          ...item,
+          children: children
+            ? mapMenuItems(children, commands, view.state)
+            : [],
+        };
+      }),
+    [items, commands, view.state]
+  );
+
+  const content = (
+    <MenuProvider variant="inline">
+      <Menu>
+        <MenuContent
+          pos={pos}
+          align="end"
+          aria-label={t("Options")}
+          onCloseAutoFocus={handleCloseAutoFocus}
+        >
+          <EventBoundary>
+            {mappedItems.map((item) => (
+              <React.Fragment key={item.id}>
+                {toMenuItems(item.children || [])}
+              </React.Fragment>
+            ))}
+          </EventBoundary>
+        </MenuContent>
+      </Menu>
+    </MenuProvider>
+  );
+
+  return isMobile ? content : <Portal>{content}</Portal>;
+};
+
+export default InlineMenu;
@@ -1,12 +1,7 @@
 import { isEmail } from "class-validator";
 import { observer } from "mobx-react";
 import { v4 as uuidv4 } from "uuid";
-import {
-  DocumentIcon,
-  PlusIcon,
-  NewDocumentIcon,
-  CollectionIcon,
-} from "outline-icons";
+import { DocumentIcon, PlusIcon, CollectionIcon } from "outline-icons";
 import { useState, useCallback, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router-dom";
@@ -87,171 +82,154 @@ function MentionMenu({ search, isActive, ...rest }: Props) {
  // 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) =>
-            ({
-              name: "mention",
-              icon: (
-                <Flex
-                  align="center"
-                  justify="center"
-                  style={{ width: 24, height: 24 }}
-                >
-                  <Avatar
-                    model={user}
-                    alt={t("Profile picture")}
-                    size={AvatarSize.Small}
-                  />
-                </Flex>
-              ),
-              title: user.name,
-              section: UserSection,
+  const items: MentionItem[] =
+    actorId && !loading
+      ? users
+          .findByQuery(search, { maxResults: maxResultsInSection })
+          .map(
+            (user) =>
+              ({
+                name: "mention",
+                icon: (
+                  <Flex
+                    align="center"
+                    justify="center"
+                    style={{ width: 24, height: 24 }}
+                  >
+                    <Avatar
+                      model={user}
+                      alt={t("Profile picture")}
+                      size={AvatarSize.Small}
+                    />
+                  </Flex>
+                ),
+                title: user.name,
+                section: UserSection,
+                appendSpace: true,
+                attrs: {
+                  id: uuidv4(),
+                  type: MentionType.User,
+                  modelId: user.id,
+                  actorId,
+                  label: user.name,
+                },
+              }) as MentionItem
+          )
+          .concat(
+            groups
+              .findByQuery(search, { maxResults: maxResultsInSection })
+              .map((group) => ({
+                name: "mention",
+                icon: (
+                  <Flex
+                    align="center"
+                    justify="center"
+                    style={{ width: 24, height: 24, marginRight: 4 }}
+                  >
+                    <GroupAvatar group={group} size={AvatarSize.Small} />
+                  </Flex>
+                ),
+                title: group.name,
+                subtitle: t("{{ count }} members", {
+                  count: group.memberCount,
+                }),
+                section: GroupSection,
+                appendSpace: true,
+                attrs: {
+                  id: uuidv4(),
+                  type: MentionType.Group,
+                  modelId: group.id,
+                  actorId,
+                  label: group.name,
+                },
+              }))
+          )
+          .concat(
+            documents
+              .findByQuery(search, { maxResults: maxResultsInSection })
+              .map(
+                (doc) =>
+                  ({
+                    name: "mention",
+                    icon: doc.icon ? (
+                      <Icon
+                        value={doc.icon}
+                        initial={doc.initial}
+                        color={doc.color ?? undefined}
+                      />
+                    ) : (
+                      <DocumentIcon />
+                    ),
+                    title: doc.title,
+                    subtitle: doc.collectionId ? (
+                      <DocumentBreadcrumb
+                        document={doc}
+                        onlyText
+                        reverse
+                        maxDepth={2}
+                      />
+                    ) : undefined,
+                    section: DocumentsSection,
+                    appendSpace: true,
+                    attrs: {
+                      id: uuidv4(),
+                      type: MentionType.Document,
+                      modelId: doc.id,
+                      actorId,
+                      label: doc.title,
+                    },
+                  }) as MentionItem
+              )
+          )
+          .concat(
+            collections
+              .findByQuery(search, { maxResults: maxResultsInSection })
+              .map(
+                (collection) =>
+                  ({
+                    name: "mention",
+                    icon: collection.icon ? (
+                      <Icon
+                        value={collection.icon}
+                        initial={collection.initial}
+                        color={collection.color ?? undefined}
+                      />
+                    ) : (
+                      <CollectionIcon />
+                    ),
+                    title: collection.name,
+                    section: CollectionsSection,
+                    appendSpace: true,
+                    attrs: {
+                      id: uuidv4(),
+                      type: MentionType.Collection,
+                      modelId: collection.id,
+                      actorId,
+                      label: collection.name,
+                    },
+                  }) as MentionItem
+              )
+          )
+          .concat([
+            {
+              name: "link",
+              icon: <PlusIcon />,
+              title: search?.trim(),
+              section: DocumentsSection,
+              subtitle: t("Create a new doc"),
+              visible: !!search && !isEmail(search),
+              priority: -1,
              appendSpace: true,
              attrs: {
                id: uuidv4(),
-                type: MentionType.User,
-                modelId: user.id,
+                type: MentionType.Document,
+                modelId: uuidv4(),
                actorId,
-                label: user.name,
+                label: search,
              },
-            }) as MentionItem
-        )
-        .concat(
-          groups
-            .findByQuery(search, { maxResults: maxResultsInSection })
-            .map((group) => ({
-              name: "mention",
-              icon: (
-                <Flex
-                  align="center"
-                  justify="center"
-                  style={{ width: 24, height: 24, marginRight: 4 }}
-                >
-                  <GroupAvatar group={group} size={AvatarSize.Small} />
-                </Flex>
-              ),
-              title: group.name,
-              subtitle: t("{{ count }} members", {
-                count: group.memberCount,
-              }),
-              section: GroupSection,
-              appendSpace: true,
-              attrs: {
-                id: uuidv4(),
-                type: MentionType.Group,
-                modelId: group.id,
-                actorId,
-                label: group.name,
-              },
-            }))
-        )
-        .concat(
-          documents
-            .findByQuery(search, { maxResults: maxResultsInSection })
-            .map(
-              (doc) =>
-                ({
-                  name: "mention",
-                  icon: doc.icon ? (
-                    <Icon
-                      value={doc.icon}
-                      initial={doc.initial}
-                      color={doc.color ?? undefined}
-                    />
-                  ) : (
-                    <DocumentIcon />
-                  ),
-                  title: doc.title,
-                  subtitle: doc.collectionId ? (
-                    <DocumentBreadcrumb
-                      document={doc}
-                      onlyText
-                      reverse
-                      maxDepth={2}
-                    />
-                  ) : undefined,
-                  section: DocumentsSection,
-                  appendSpace: true,
-                  attrs: {
-                    id: uuidv4(),
-                    type: MentionType.Document,
-                    modelId: doc.id,
-                    actorId,
-                    label: doc.title,
-                  },
-                }) as MentionItem
-            )
-        )
-        .concat(
-          collections
-            .findByQuery(search, { maxResults: maxResultsInSection })
-            .map(
-              (collection) =>
-                ({
-                  name: "mention",
-                  icon: collection.icon ? (
-                    <Icon
-                      value={collection.icon}
-                      initial={collection.initial}
-                      color={collection.color ?? undefined}
-                    />
-                  ) : (
-                    <CollectionIcon />
-                  ),
-                  title: collection.name,
-                  section: CollectionsSection,
-                  appendSpace: true,
-                  attrs: {
-                    id: uuidv4(),
-                    type: MentionType.Collection,
-                    modelId: collection.id,
-                    actorId,
-                    label: collection.name,
-                  },
-                }) as MentionItem
-            )
-        )
-        .concat([
-          {
-            name: "link",
-            icon: <PlusIcon />,
-            title: search?.trim(),
-            section: DocumentsSection,
-            subtitle: t("Create a new doc"),
-            visible: !!search && !isEmail(search),
-            priority: -1,
-            appendSpace: true,
-            attrs: {
-              id: uuidv4(),
-              type: MentionType.Document,
-              modelId: uuidv4(),
-              actorId,
-              label: search,
-            },
-          } as MentionItem,
-          {
-            name: "link",
-            icon: <NewDocumentIcon />,
-            title: search?.trim(),
-            section: DocumentsSection,
-            subtitle: t("Create a nested doc"),
-            visible: !!search && !isEmail(search) && !!documentId,
-            priority: -2,
-            appendSpace: true,
-            attrs: {
-              id: uuidv4(),
-              type: MentionType.Document,
-              modelId: uuidv4(),
-              actorId,
-              label: search,
-              nested: true,
-            },
-          } as MentionItem,
-        ])
-    : [];
+            } as MentionItem,
+          ])
+      : [];

  const handleSelect = useCallback(
    async (item: MentionItem) => {
@@ -6,7 +6,7 @@ import { useTranslation } from "react-i18next";
 import type { EmbedDescriptor } from "@shared/editor/embeds";
 import type { MenuItem } from "@shared/editor/types";
 import { MentionType } from "@shared/types";
-import { isInternalUrl, isUrl } from "@shared/utils/urls";
+import { isUrl } from "@shared/utils/urls";
 import type Integration from "~/models/Integration";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";
@@ -67,15 +67,11 @@ function useItems({

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

  // Check embeddability for single URL
  useEffect(() => {
-    if (!singleUrl || !embed || isInternal) {
+    if (!singleUrl || !embed) {
      setEmbedCheck({ loading: false });
      return;
    }
@@ -102,7 +98,7 @@ function useItems({
    return () => {
      cancelled = true;
    };
-  }, [singleUrl, embed, isInternal]);
+  }, [singleUrl, embed]);

  // single item is pasted.
  if (typeof pastedText === "string") {
@@ -144,10 +140,8 @@ function useItems({
        name: "embed",
        title: t("Embed"),
        subtitle:
-          embedCheck.embeddable === false || isInternal
-            ? t("Not supported")
-            : undefined,
-        disabled: isInternal || embedCheck.loading || !embedCheck.embeddable,
+          embedCheck.embeddable === false ? t("Not supported") : undefined,
+        disabled: embedCheck.loading || !embedCheck.embeddable,
        icon: embed?.icon,
        keywords: embed?.keywords,
      },
@@ -15,7 +15,7 @@ import {
  getRowIndex,
  isTableSelected,
 } from "@shared/editor/queries/table";
-import type { MenuItem } from "@shared/editor/types";
+import { MenuType, type MenuItem } from "@shared/editor/types";
 import useBoolean from "~/hooks/useBoolean";
 import useDictionary from "~/hooks/useDictionary";
 import useEventListener from "~/hooks/useEventListener";
@@ -40,6 +40,9 @@ import FloatingToolbar from "./FloatingToolbar";
 import LinkEditor from "./LinkEditor";
 import ToolbarMenu from "./ToolbarMenu";
 import { isModKey } from "@shared/utils/keyboard";
+import InlineMenu from "./InlineMenu";
+import styled from "styled-components";
+import { depths } from "@shared/styles";

 type Props = {
  /** Whether the text direction is right-to-left */
@@ -240,10 +243,7 @@ export function SelectionToolbar(props: Props) {
  let items: MenuItem[] = [];
  let align: "center" | "start" | "end" = "center";

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

+  const isInline = items[0].type === MenuType.inline;
+
  // Some extensions may be disabled, remove corresponding items
  items = items.filter((item) => {
    if (item.name === "separator") {
@@ -318,6 +320,14 @@ export function SelectionToolbar(props: Props) {
    setActiveToolbar(null);
  };

+  if (isInline && items.length) {
+    return (
+      <InlineMenuWrapper ref={menuRef}>
+        <InlineMenu items={items} containerRef={menuRef} />
+      </InlineMenuWrapper>
+    );
+  }
+
  return (
    <FloatingToolbar
      align={align}
@@ -362,3 +372,20 @@ export function SelectionToolbar(props: Props) {
    </FloatingToolbar>
  );
 }
+
+const InlineMenuWrapper = styled.div`
+  position: absolute;
+  z-index: ${depths.editorToolbar};
+  line-height: 0;
+  box-sizing: border-box;
+  pointer-events: none;
+  white-space: nowrap;
+
+  * {
+    box-sizing: border-box;
+  }
+
+  @media print {
+    display: none;
+  }
+`;
@@ -6,26 +6,21 @@ import { TextSelection } from "prosemirror-state";
 import * as React from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { toast } from "sonner";
-import styled, { keyframes } from "styled-components";
+import styled 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 { s } from "@shared/styles";
+import { depths, 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";
@@ -34,6 +29,38 @@ 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;
@@ -53,7 +80,6 @@ export type Props<T extends MenuItem = MenuItem> = {
    index: number,
    options: {
      selected: boolean;
-      disclosure?: boolean;
      onClick: (event: React.SyntheticEvent) => void;
    }
  ) => React.ReactNode;
@@ -66,70 +92,25 @@ 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) {
-      // Save the selection position when the menu opens and as the user types.
-      // On mobile, the editor may lose focus/selection when tapping on menu
-      // items, so we restore it. The position must stay current as the search
-      // text grows, otherwise the deletion range calculated in handleClearSearch
-      // will be wrong.
+      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(() => {
        const { from, to } = view.state.selection;
        selectionRef.current = { from, to };
@@ -138,23 +119,83 @@ function SuggestionsMenu<T extends MenuItem>(props: Props<T>) {
      selectionRef.current = null;
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.isActive, props.search]);
-
-  React.useEffect(() => {
-    setSubmenu(null);
-
-    if (!props.isActive) {
-      return;
-    }
-
-    setSelectedIndex(0);
-    setInsertItem(undefined);
  }, [props.isActive]);

-  React.useEffect(() => {
-    setSelectedIndex(0);
-    setSubmenu(null);
-  }, [props.search]);
+  const calculatePosition = React.useCallback(
+    (props: Props) => {
+      if (!props.isActive) {
+        return defaultPosition;
+      }
+
+      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,
+          };
+        }
+
+        // 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),
+        };
+      };
+
+      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]
+  );

  const handleClearSearch = React.useCallback(() => {
    const { state, dispatch } = view;
@@ -185,6 +226,26 @@ 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;
@@ -213,9 +274,7 @@ function SuggestionsMenu<T extends MenuItem>(props: Props<T>) {
        typeof item.attrs === "function" ? item.attrs(view.state) : item.attrs;

      if (item.name === "noop") {
-        if ("onClick" in item) {
-          item.onClick?.();
-        }
+        // Do nothing
      } else if (command) {
        command(attrs);
      } else {
@@ -245,13 +304,10 @@ function SuggestionsMenu<T extends MenuItem>(props: Props<T>) {
            ...item,
            name: "mention",
          });
-          void editorProps.onCreateLink?.(
-            {
-              title: item.attrs.label,
-              id: item.attrs.modelId,
-            },
-            !!item.attrs.nested
-          );
+          void editorProps.onCreateLink?.({
+            title: item.attrs.label,
+            id: item.attrs.modelId,
+          });
          return;
        case "image":
          return triggerFilePick(
@@ -405,7 +461,7 @@ function SuggestionsMenu<T extends MenuItem>(props: Props<T>) {
    const embedItems: EmbedDescriptor[] = [];

    for (const embed of embeds) {
-      if (embed.title && embed.visible !== false && !embed.disabled) {
+      if (embed.title && embed.visible !== false) {
        embedItems.push(
          new EmbedDescriptor({
            ...embed,
@@ -425,47 +481,11 @@ 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;
      }
@@ -494,7 +514,11 @@ function SuggestionsMenu<T extends MenuItem>(props: Props<T>) {
        return item;
      }

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

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

-  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;
-      }
-
-      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 handleMouseDown = (event: MouseEvent) => {
+      if (
+        !menuRef.current ||
+        menuRef.current.contains(event.target as Element)
+      ) {
+        return;
+      }
+
+      props.onClose();
+    };
+
    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.isComposing) {
        return;
@@ -559,109 +561,18 @@ 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) {
-          const children = resolveChildren(
-            "children" in item ? item.children : undefined
-          );
-          if (children?.length) {
-            openSubmenu(selectedIndex);
-          } else {
-            handleClickItem(item);
-          }
+          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) ||
@@ -725,25 +636,18 @@ 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,
-    insertItem,
-    openSubmenu,
-    props,
-    selectedIndex,
-    submenu,
-  ]);
+  }, [close, filtered, handleClickItem, props, selectedIndex]);

  const { isActive, uploadFile } = props;
  const items = filtered;
@@ -760,7 +664,7 @@ function SuggestionsMenu<T extends MenuItem>(props: Props<T>) {
  const fileInput = uploadFile && (
    <VisuallyHidden.Root>
      <label>
-        <Trans>Upload file</Trans>
+        <Trans>Import document</Trans>
        <input
          type="file"
          ref={inputRef}
@@ -771,23 +675,6 @@ 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;

@@ -806,10 +693,6 @@ 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) &&
@@ -825,22 +708,6 @@ 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 = () => {
@@ -855,37 +722,23 @@ function SuggestionsMenu<T extends MenuItem>(props: Props<T>) {
          const handleOnClick = (ev: React.MouseEvent) => {
            ev.preventDefault();
            ev.stopPropagation();
-            if (hasChildren) {
-              openSubmenu(index);
-            } else {
-              handleClickItem(item);
-            }
+            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>
@@ -939,146 +792,37 @@ function SuggestionsMenu<T extends MenuItem>(props: Props<T>) {
  }

  return (
-    <>
-      <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>
-          )}
-        </BouncyPopoverContent>
-      </Popover>
-      {fileInput}
-      {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
-                    );
+    <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
                  }
-                  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>
-      )}
-    </>
+                  onKeyDown={handleLinkInputKeydown}
+                  onPaste={handleLinkInputPaste}
+                  autoFocus
+                />
+              </LinkInputWrapper>
+            ) : (
+              <List>{renderItems()}</List>
+            )}
+            {fileInput}
+          </>
+        )}
+      </Wrapper>
+    </Portal>
  );
 }

-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;
 `;
@@ -1095,13 +839,6 @@ 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`
@@ -1123,4 +860,61 @@ 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,7 +5,6 @@ import styled from "styled-components";
 import { usePortalContext } from "~/components/Portal";
 import {
  MenuButton,
-  MenuDisclosure,
  MenuIconWrapper,
  MenuLabel,
 } from "~/components/primitives/components/Menu";
@@ -27,8 +26,6 @@ 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({
@@ -40,7 +37,6 @@ function SuggestionsMenuItem({
  subtitle,
  shortcut,
  icon,
-  disclosure,
 }: Props) {
  const portal = usePortalContext();
  const ref = React.useCallback(
@@ -79,7 +75,6 @@ function SuggestionsMenuItem({
        )}
        {shortcut && <Shortcut $active={selected}>{shortcut}</Shortcut>}
      </MenuLabel>
-      {disclosure && <MenuDisclosure />}
    </MenuButton>
  );
 }
@@ -48,67 +48,10 @@ function ToolbarDropdown(props: ToolbarDropdownProps) {
      return [];
    }

-    const handleClick = (menuItem: MenuItem) => () => {
-      if (!menuItem.name) {
-        return;
-      }
-
-      if (commands[menuItem.name]) {
-        commands[menuItem.name](
-          typeof menuItem.attrs === "function"
-            ? menuItem.attrs(state)
-            : menuItem.attrs
-        );
-      } else if (menuItem.onClick) {
-        menuItem.onClick();
-      }
-    };
-
-    const resolveChildren = (
-      children: MenuItem[] | (() => MenuItem[]) | undefined
-    ): MenuItem[] | undefined =>
-      typeof children === "function" ? children() : children;
-
-    const mapChildren = (children: MenuItem[]): TMenuItem[] =>
-      children.map((child) => {
-        if (child.name === "separator") {
-          return { type: "separator", visible: child.visible };
-        }
-        if ("content" in child) {
-          return {
-            type: "custom",
-            visible: child.visible,
-            content: child.content,
-          };
-        }
-        const resolvedChildren = resolveChildren(child.children);
-        if (resolvedChildren) {
-          const childWithPreventClose = resolvedChildren.find(
-            (c) => "preventCloseCondition" in c
-          );
-          return {
-            type: "submenu",
-            title: child.label,
-            icon: child.icon,
-            visible: child.visible,
-            preventCloseCondition: childWithPreventClose?.preventCloseCondition,
-            items: mapChildren(resolvedChildren),
-          };
-        }
-        return {
-          type: "button",
-          title: child.label,
-          icon: child.icon,
-          dangerous: child.dangerous,
-          visible: child.visible,
-          selected:
-            child.active !== undefined ? child.active(state) : undefined,
-          onClick: handleClick(child),
-        };
-      });
-
    const resolvedItemChildren = resolveChildren(item.children);
-    return resolvedItemChildren ? mapChildren(resolvedItemChildren) : [];
+    return resolvedItemChildren
+      ? mapMenuItems(resolvedItemChildren, commands, state)
+      : [];
  }, [isOpen, commands]);

  const handleCloseAutoFocus = useCallback((ev: Event) => {
@@ -220,6 +163,78 @@ function ToolbarMenu(props: Props) {
  );
 }

+const resolveChildren = (
+  children: MenuItem[] | (() => MenuItem[]) | undefined
+): MenuItem[] | undefined =>
+  typeof children === "function" ? children() : children;
+
+export const mapMenuItems = (
+  children: MenuItem[],
+  commands: Record<string, Function>,
+  state: any,
+  parentId = "0"
+): TMenuItem[] => {
+  const handleClick = (menuItem: MenuItem) => () => {
+    if (!menuItem.name) {
+      return;
+    }
+
+    if (commands[menuItem.name]) {
+      commands[menuItem.name](
+        typeof menuItem.attrs === "function"
+          ? menuItem.attrs(state)
+          : menuItem.attrs
+      );
+    } else if (menuItem.onClick) {
+      menuItem.onClick();
+    }
+  };
+
+  return children.map((child, idx) => {
+    const id = `${parentId}-${idx}`;
+
+    if (child.name === "separator") {
+      return { id, type: "separator", visible: child.visible };
+    }
+
+    if ("content" in child) {
+      return {
+        id,
+        type: "custom",
+        visible: child.visible,
+        content: child.content,
+      };
+    }
+
+    const resolvedChildren = resolveChildren(child.children);
+    if (resolvedChildren) {
+      const childWithPreventClose = resolvedChildren.find(
+        (c) => "preventCloseCondition" in c
+      );
+      return {
+        id,
+        type: "submenu",
+        title: child.label || child.tooltip,
+        icon: child.icon,
+        visible: child.visible,
+        preventCloseCondition: childWithPreventClose?.preventCloseCondition,
+        items: mapMenuItems(resolvedChildren, commands, state, id),
+      };
+    }
+
+    return {
+      id,
+      type: "button",
+      title: child.label,
+      icon: child.icon,
+      dangerous: child.dangerous,
+      visible: child.visible,
+      selected: child.active !== undefined ? child.active(state) : undefined,
+      onClick: handleClick(child),
+    };
+  });
+};
+
 const FlexibleWrapper = styled.div`
  color: ${s("textSecondary")};
  overflow: hidden;
@@ -55,10 +55,12 @@ export default class BlockMenuExtension extends Suggestion {
                Decoration.widget(
                  parent.pos,
                  () => {
-                    button.onclick = action(() => {
-                      this.state.query = "";
-                      this.state.open = true;
-                    });
+                    button.addEventListener(
+                      "click",
+                      action(() => {
+                        this.state.open = true;
+                      })
+                    );
                    return button;
                  },
                  {
@@ -12,10 +12,6 @@ export default class ClipboardTextSerializer extends Extension {
    return "clipboardTextSerializer";
  }

-  get allowInReadOnly() {
-    return true;
-  }
-
  get plugins() {
    const mdSerializer = this.editor.extensions.serializer();

@@ -14,8 +14,6 @@ import { ancestors } from "@shared/editor/utils";
 import FindAndReplace from "../components/FindAndReplace";

 const pluginKey = new PluginKey("find-and-replace");
-const supportsHighlightAPI =
-  typeof CSS !== "undefined" && CSS.highlights !== undefined;

 export default class FindAndReplaceExtension extends Extension {
  public get name() {
@@ -24,34 +22,13 @@ export default class FindAndReplaceExtension extends Extension {

  public get defaultOptions() {
    return {
+      resultClassName: "find-result",
+      resultCurrentClassName: "current-result",
      caseSensitive: false,
      regexEnabled: false,
    };
  }

-  keys(): Record<string, Command> {
-    return {
-      Escape: (state, dispatch) => {
-        if (!this.searchTerm) {
-          return false;
-        }
-
-        const params = new URLSearchParams(window.location.search);
-        if (params.has("q")) {
-          params.delete("q");
-          const search = params.toString();
-          window.history.replaceState(
-            window.history.state,
-            "",
-            window.location.pathname + (search ? `?${search}` : "")
-          );
-        }
-
-        return this.clear()(state, dispatch);
-      },
-    };
-  }
-
  public commands() {
    return {
      /**
@@ -105,6 +82,20 @@ export default class FindAndReplaceExtension extends Extension {
    };
  }

+  private get decorations() {
+    return this.results.map((deco, index) => {
+      const decorationType =
+        deco.type === "node" ? Decoration.node : Decoration.inline;
+      return decorationType(deco.from, deco.to, {
+        class:
+          this.options.resultClassName +
+          (this.currentResultIndex === index
+            ? ` ${this.options.resultCurrentClassName}`
+            : ""),
+      });
+    });
+  }
+
  public replace(replace: string): Command {
    return (state, dispatch) => {
      // Redo the search to ensure we have the latest results, the document may
@@ -218,25 +209,14 @@ export default class FindAndReplaceExtension extends Extension {
  }

  private scrollToCurrentMatch() {
-    if (supportsHighlightAPI) {
-      if (this.currentHighlightRange) {
-        const node = this.currentHighlightRange.startContainer;
-        const element = node instanceof HTMLElement ? node : node.parentElement;
-        if (element) {
-          scrollIntoView(element, {
-            scrollMode: "if-needed",
-            block: "center",
-          });
-        }
-      }
-    } else {
-      const element = window.document.querySelector(".current-result");
-      if (element) {
-        scrollIntoView(element, {
-          scrollMode: "if-needed",
-          block: "center",
-        });
-      }
+    const element = window.document.querySelector(
+      `.${this.options.resultCurrentClassName}`
+    );
+    if (element) {
+      scrollIntoView(element, {
+        scrollMode: "if-needed",
+        block: "center",
+      });
    }
  }

@@ -404,83 +384,13 @@ export default class FindAndReplaceExtension extends Extension {
    });
  }

-  /**
-   * Build ProseMirror decorations from search results (fallback for browsers
-   * without CSS Custom Highlight API support).
-   */
-  private get decorations() {
-    return this.results.map((deco, index) => {
-      const decorationType =
-        deco.type === "node" ? Decoration.node : Decoration.inline;
-      return decorationType(deco.from, deco.to, {
-        class:
-          "find-result" +
-          (this.currentResultIndex === index ? " current-result" : ""),
-      });
-    });
-  }
-
-  /**
-   * Create a DecorationSet from the current search results.
-   */
-  private createDecorationSet(doc: Node) {
+  private createDeco(doc: Node) {
    this.search(doc);
-    return this.decorations.length
+    return this.decorations
      ? DecorationSet.create(doc, this.decorations)
      : DecorationSet.empty;
  }

-  /**
-   * Update CSS Custom Highlight API highlights based on current search results.
-   */
-  private updateHighlights() {
-    const view = this.editor?.view;
-    if (!view || !this.results.length || !this.searchTerm) {
-      CSS.highlights.delete("search-results");
-      CSS.highlights.delete("search-results-current");
-      this.currentHighlightRange = undefined;
-      return;
-    }
-
-    const allRanges: StaticRange[] = [];
-    const currentRanges: StaticRange[] = [];
-    this.currentHighlightRange = undefined;
-
-    for (let i = 0; i < this.results.length; i++) {
-      const result = this.results[i];
-      try {
-        const from = view.domAtPos(result.from);
-        const to = view.domAtPos(result.to);
-        const range = new StaticRange({
-          startContainer: from.node,
-          startOffset: from.offset,
-          endContainer: to.node,
-          endOffset: to.offset,
-        });
-        allRanges.push(range);
-
-        if (i === this.currentResultIndex) {
-          currentRanges.push(range);
-          this.currentHighlightRange = range;
-        }
-      } catch {
-        // Position may not be in the visible DOM (e.g. inside folded toggle)
-      }
-    }
-
-    CSS.highlights.set("search-results", new Highlight(...allRanges));
-    if (currentRanges.length) {
-      CSS.highlights.set(
-        "search-results-current",
-        new Highlight(...currentRanges)
-      );
-    } else {
-      CSS.highlights.delete("search-results-current");
-    }
-  }
-
-  private currentHighlightRange?: StaticRange;
-
  get allowInReadOnly() {
    return true;
  }
@@ -490,85 +400,35 @@ export default class FindAndReplaceExtension extends Extension {
  }

  get plugins() {
-    if (supportsHighlightAPI) {
-      return [this.highlightAPIPlugin];
-    }
-    return [this.decorationPlugin];
-  }
+    return [
+      new Plugin({
+        key: pluginKey,
+        state: {
+          init: () => DecorationSet.empty,
+          apply: (tr, decorationSet) => {
+            const action = tr.getMeta(pluginKey);

-  /** Plugin using the CSS Custom Highlight API (no DOM modifications). */
-  private get highlightAPIPlugin() {
-    return new Plugin({
-      key: pluginKey,
-      state: {
-        init: () => 0,
-        apply: (tr, generation) => {
-          const action = tr.getMeta(pluginKey);
-
-          if (action) {
-            if (action.open) {
-              this.open = true;
+            if (action) {
+              if (action.open) {
+                this.open = true;
+              }
+              return this.createDeco(tr.doc);
            }
-            this.search(tr.doc);
-            return generation + 1;
-          }

-          if (tr.docChanged && this.searchTerm) {
-            this.search(tr.doc);
-            return generation + 1;
-          }
-
-          return generation;
-        },
-      },
-      view: () => {
-        let lastGeneration = 0;
-        return {
-          update: (view) => {
-            const generation = pluginKey.getState(view.state) as number;
-            if (generation !== lastGeneration) {
-              lastGeneration = generation;
-              this.updateHighlights();
+            if (tr.docChanged) {
+              return decorationSet.map(tr.mapping, tr.doc);
            }
+
+            return decorationSet;
          },
-          destroy: () => {
-            CSS.highlights?.delete("search-results");
-            CSS.highlights?.delete("search-results-current");
+        },
+        props: {
+          decorations(state) {
+            return this.getState(state);
          },
-        };
-      },
-    });
-  }
-
-  /** Fallback plugin using ProseMirror decorations. */
-  private get decorationPlugin() {
-    return new Plugin({
-      key: pluginKey,
-      state: {
-        init: () => DecorationSet.empty,
-        apply: (tr, decorationSet) => {
-          const action = tr.getMeta(pluginKey);
-
-          if (action) {
-            if (action.open) {
-              this.open = true;
-            }
-            return this.createDecorationSet(tr.doc);
-          }
-
-          if (tr.docChanged) {
-            return decorationSet.map(tr.mapping, tr.doc);
-          }
-
-          return decorationSet;
        },
-      },
-      props: {
-        decorations(state) {
-          return this.getState(state);
-        },
-      },
-    });
+      }),
+    ];
  }

  public widget = ({ readOnly }: WidgetProps) => (
@@ -33,10 +33,6 @@ export default class HoverPreviews extends Extension {
    return "hover-previews";
  }

-  get allowInReadOnly() {
-    return true;
-  }
-
  get plugins() {
    const isHoverTarget = (target: Element | null, view: EditorView) =>
      target instanceof HTMLElement &&
@@ -25,10 +25,6 @@ export default class Multiplayer extends Extension {
    return "multiplayer";
  }

-  get allowInReadOnly() {
-    return true;
-  }
-
  get plugins() {
    const { user, provider, document: doc } = this.options;
    const type = doc.get("default", Y.XmlFragment);
@@ -45,8 +45,9 @@ export default class SelectionToolbarExtension extends Extension {
    }

    if (
-      isNodeActive(schema.nodes.code_block)(state) ||
-      isNodeActive(schema.nodes.code_fence)(state)
+      (isNodeActive(schema.nodes.code_block)(state) ||
+        isNodeActive(schema.nodes.code_fence)(state)) &&
+      selection.from > 0
    ) {
      return selection;
    }
@@ -19,7 +19,7 @@ export default class Suggestion extends Extension {
    super(options);

    this.openRegex = new RegExp(
-      `(?:^|\\s|\\(|[\\p{Script=Han}\\p{Script=Hiragana}\\p{Script=Katakana}\\p{Script=Hangul}])${escapeRegExp(
+      `(?:^|\\s|\\()${escapeRegExp(
        this.options.trigger
      )}(${`[\\p{L}\/\\p{M}\\d${
        this.options.allowSpaces ? "\\s{1}" : ""
@@ -133,10 +133,7 @@ export type Props = {
  /** Callback when file upload progress changes */
  onFileUploadProgress?: (id: string, fractionComplete: number) => void;
  /** Callback when a link is created, should return url to created document */
-  onCreateLink?: (
-    params: Properties<Document>,
-    nested?: boolean
-  ) => Promise<string>;
+  onCreateLink?: (params: Properties<Document>) => Promise<string>;
  /** Callback when user clicks on any link in the document */
  onClickLink: (
    href: string,
@@ -253,25 +250,17 @@ export class Editor extends React.PureComponent<
      this.view.updateState(newState);
    }

-    // When transitioning from readOnly to editable, reinitialize to create
-    // editing extensions, keymaps, input rules, and commands that were skipped.
-    if (prevProps.readOnly && !this.props.readOnly) {
-      const docJSON = this.view.state.doc.toJSON();
-      this.view.destroy();
-      this.init();
-      const newState = this.createState(docJSON);
-      this.view.updateState(newState);
-    } else if (!prevProps.readOnly && this.props.readOnly) {
-      // pass readOnly changes through to underlying editor instance
+    // pass readOnly changes through to underlying editor instance
+    if (prevProps.readOnly !== this.props.readOnly) {
      this.view.update({
        ...this.view.props,
-        editable: () => false,
+        editable: () => !this.props.readOnly,
      });

      // NodeView will not automatically render when editable changes so we must trigger an update
      // manually, see: https://discuss.prosemirror.net/t/re-render-custom-nodeview-when-view-editable-changes/6441
      Array.from(this.renderers).forEach((view) =>
-        view.setProp("isEditable", false)
+        view.setProp("isEditable", !this.props.readOnly)
      );
    }

@@ -312,24 +301,15 @@ export class Editor extends React.PureComponent<
    this.nodes = this.createNodes();
    this.marks = this.createMarks();
    this.schema = this.createSchema();
+    this.widgets = this.createWidgets();
    this.plugins = this.createPlugins();
    this.rulePlugins = this.createRulePlugins();
+    this.keymaps = this.createKeymaps();
    this.serializer = this.createSerializer();
    this.parser = this.createParser();
+    this.pasteParser = this.createPasteParser();
+    this.inputRules = this.createInputRules();
    this.nodeViews = this.createNodeViews();
-
-    this.widgets = this.createWidgets();
-
-    if (this.props.readOnly) {
-      this.keymaps = [];
-      this.inputRules = [];
-      this.pasteParser = this.parser;
-    } else {
-      this.keymaps = this.createKeymaps();
-      this.inputRules = this.createInputRules();
-      this.pasteParser = this.createPasteParser();
-    }
-
    this.view = this.createView();
    this.commands = this.createCommands();
  }
@@ -431,20 +411,12 @@ export class Editor extends React.PureComponent<
  private createState(value?: string | ProsemirrorData | ProsemirrorNode) {
    const doc = this.createDocument(value || this.props.defaultValue);

-    if (this.props.readOnly) {
-      return EditorState.create({
-        schema: this.schema,
-        doc,
-        plugins: [...this.plugins, anchorPlugin()],
-      });
-    }
-
    return EditorState.create({
      schema: this.schema,
      doc,
      plugins: [
-        ...this.plugins,
        ...this.keymaps,
+        ...this.plugins,
        anchorPlugin(),
        dropCursor({
          color: this.props.theme.cursor,
@@ -648,25 +620,12 @@ export class Editor extends React.PureComponent<
    window?.getSelection()?.removeAllRanges();
  };

-  /**
-   * Insert content into the editor, replacing the block at the current selection.
-   *
-   * @param content The prosemirror data to insert.
-   */
-  public insertContent = (content: ProsemirrorData) => {
-    const doc = ProsemirrorNode.fromJSON(this.schema, content);
-    const { $from } = this.view.state.selection;
-    const start = $from.before($from.depth);
-    const end = $from.after($from.depth);
-    this.view.dispatch(this.view.state.tr.replaceWith(start, end, doc.content));
-  };
-
  /**
   * Insert files at the current selection.
-   *
-   * @param event The source event.
-   * @param files The files to insert.
-   * @returns True if the files were inserted.
+   * =
+   * @param event The source event
+   * @param files The files to insert
+   * @returns True if the files were inserted
   */
  public insertFiles = (
    event: React.ChangeEvent<HTMLInputElement>,
@@ -733,14 +692,19 @@ 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;
      }

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

    dispatch(tr);
@@ -772,8 +739,13 @@ 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
      );
@@ -786,6 +758,7 @@ export class Editor extends React.PureComponent<
          ...attrs,
        });
        tr.removeMark(from, to, mark).addMark(from, to, newMark);
+        markUpdated = true;
        return;
      }

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

    dispatch(tr);
@@ -935,16 +911,12 @@ const EditorContainer = styled(Styles)<{
    css`
      span#comment-${props.focusedCommentId} {
        background: ${transparentize(0.5, props.theme.brand.marine)};
-        text-decoration: underline 2px ${props.theme.commentMarkBackground};
-
-        * {
-          background: transparent !important;
-        }
+        border-bottom: 2px solid ${props.theme.commentMarkBackground};
      }
      a#comment-${props.focusedCommentId}
        ~ span.component-image
        div.image-wrapper {
-        outline: ${props.theme.commentedImageOutlineDark} solid 2px;
+        outline: ${props.theme.commentMarkBackground} solid 2px;
      }
    `}

@@ -1,4 +1,4 @@
-import { TrashIcon, DownloadIcon, ReplaceIcon, PDFIcon } from "outline-icons";
+import { TrashIcon, DownloadIcon, ReplaceIcon } from "outline-icons";
 import type { EditorState } from "prosemirror-state";
 import type { MenuItem } from "@shared/editor/types";
 import type { Dictionary } from "~/hooks/useDictionary";
@@ -17,9 +17,6 @@ export default function attachmentMenuItems(
  const isAttachmentWithPreview = isNodeActive(schema.nodes.attachment, {
    preview: true,
  });
-  const isPdfAttachment = isNodeActive(schema.nodes.attachment, {
-    contentType: "application/pdf",
-  });

  return [
    {
@@ -32,13 +29,6 @@ export default function attachmentMenuItems(
      tooltip: dictionary.deleteAttachment,
      icon: <TrashIcon />,
    },
-    {
-      name: "toggleAttachmentPreview",
-      tooltip: dictionary.previewAttachment,
-      icon: <PDFIcon />,
-      active: isAttachmentWithPreview,
-      visible: isPdfAttachment(state),
-    },
    {
      name: "separator",
    },
@@ -126,7 +126,6 @@ export default function blockMenuItems(
        accept: "application/pdf",
        width: 300,
        height: 424,
-        preview: true,
      },
    },
    {
@@ -165,12 +164,6 @@ export default function blockMenuItems(
      icon: <MathIcon />,
      keywords: "math katex latex",
    },
-    {
-      name: "container_toggle",
-      title: dictionary.toggleBlock,
-      icon: <CollapseIcon />,
-      keywords: "toggle collapsible collapse fold",
-    },
    {
      name: "hr",
      title: dictionary.hr,
@@ -250,6 +243,12 @@ export default function blockMenuItems(
      icon: <Img src="/images/diagrams.png" alt="Diagrams.net Diagram" />,
      keywords: "diagram flowchart draw.io",
    },
+    {
+      name: "container_toggle",
+      title: dictionary.toggleBlock,
+      icon: <CollapseIcon />,
+      keywords: "toggle collapsible collapse fold",
+    },
  ];

  // Filter out diagrams.net in desktop app
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Salihu	6f06eda36b	minor fixes	2026-02-26 22:48:29 +01:00
Salihu	2dcfe4be0c	minor fixes	2026-02-26 18:16:59 +01:00
Salihu	8b56b47eb0	fix mobile menu closing functionality	2026-02-24 18:50:02 +01:00
Salihu	b20f70da42	add comment	2026-02-24 14:10:41 +01:00
Salihu	315992d55b	some changes	2026-02-23 22:52:21 +01:00
Salihu	8427778c46	nested submenu	2026-02-22 22:16:36 +01:00
Salihu	fd4dab23f2	nested submenu	2026-02-22 22:13:37 +01:00
Salihu	edcdb6f8c0	minor fix	2026-02-22 16:19:56 +01:00
Salihu	41a5097240	revert unnecessary lint changes	2026-02-22 15:53:58 +01:00
Salihu	bc248dc190	Merge remote-tracking branch 'upstream/main' into feat/inline-menu	2026-02-22 15:28:07 +01:00
Salihu	f3eec09125	Merge remote-tracking branch 'upstream/main' into feat/inline-menu	2026-02-22 00:38:25 +01:00
Salihu	afb849ac98	improve menu positioning	2026-02-21 21:58:13 +01:00
Salihu	9b67d55f76	add submenu	2026-02-20 16:33:15 +01:00
Salihu	b792945d01	table mens should be inline menus	2026-02-13 21:54:19 +01:00
Salihu	7c8ba7d2c1	render inline menu just outside the table	2026-02-10 15:49:48 +01:00
Salihu	54a90b05a8	separate inline menu from floating toolbar	2026-02-10 00:43:46 +01:00
Salihu	3e38164366	minor fixes	2026-01-07 17:41:57 +01:00
Salihu	f28ce8f0cd	inline menu	2026-01-06 23:26:59 +01:00