Use CSS highlights instead of editor decorations when available

* Add Node LTS auto-update script

* fix: Validate LTS version and update CI step name in Node update workflow

Add semver validation for the fetched LTS version to prevent creating
PRs with invalid node versions (e.g. null) if the upstream API changes.
Also update the human-readable step name in ci.yml during major bumps.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

.dockerignore

@@ -1,4 +1,3 @@
-__mocks__
 .git
 .vscode
 .github
@@ -8,11 +7,19 @@ __mocks__
 .eslint*
 .oxlintrc*
 .log
+*.md
 Makefile
 Procfile
 app.json
 crowdin.yml
+lint-staged.config.mjs
 build
 docker-compose.yml
 node_modules
 .yarn
+**/*.test.ts
+**/*.test.tsx
+**/*.test.js
+**/*.test.jsx
+**/__tests__
+**/__mocks__

.env.sample

@@ -1,5 +1,21 @@
 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=
@@ -119,14 +135,18 @@ 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 EITHER Google, Slack,
-# Discord, or Microsoft is required for a working installation or you'll
-# have no sign-in options.
+# Third party signin credentials, at least ONE OF these 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
@@ -203,7 +223,7 @@ RATE_LIMITER_DURATION_WINDOW=60
 # –––––––––––  INTEGRATIONS  –––––––––––
 # ––––––––––––––––––––––––––––––––––––––
 
-# The GitHub integration allows previewing issue and pull request links
+# GitHub integration allows previewing issue and pull request links
 # DOCS: https://docs.getoutline.com/s/hosting/doc/github-GchT3NNxI9
 GITHUB_CLIENT_ID=
 GITHUB_CLIENT_SECRET=
@@ -212,7 +232,12 @@ GITHUB_APP_NAME=
 GITHUB_APP_ID=
 GITHUB_APP_PRIVATE_KEY=
 
-# The Linear integration allows previewing issue links as rich mentions
+# The GitLab integration allows previewing issue and merge request links
+# DOCS: 
+GITLAB_CLIENT_ID=
+GITLAB_CLIENT_SECRET=
+
+# Linear integration allows previewing issue links as rich mentions
 LINEAR_CLIENT_ID=
 LINEAR_CLIENT_SECRET=
 
@@ -223,6 +248,10 @@ SLACK_VERIFICATION_TOKEN=your_token
 SLACK_APP_ID=A0XXXXXXX
 SLACK_MESSAGE_ACTIONS=true
 
+# Figma integration allows previewing design files as rich mentions
+FIGMA_CLIENT_ID=
+FIGMA_CLIENT_SECRET=
+
 # For Dropbox integration, follow these instructions to get the key https://www.dropbox.com/developers/embedder#setup
 # and do not forget to whitelist your domain name in the app settings
 DROPBOX_APP_KEY=

.env.test

@@ -18,6 +18,9 @@ GITHUB_CLIENT_ID=123;
 GITHUB_CLIENT_SECRET=123;
 GITHUB_APP_NAME=outline-test;
 
+GITLAB_CLIENT_ID=123
+GITLAB_CLIENT_SECRET=123
+
 OIDC_CLIENT_ID=client-id
 OIDC_CLIENT_SECRET=client-secret
 OIDC_AUTH_URI=http://localhost/authorize

.github/workflows/ci.yml

@@ -24,17 +24,17 @@ jobs:
       - uses: actions/checkout@v5
       - name: Enable Corepack
         run: corepack enable
-      - name: Use Node.js 22.x
+      - name: Use Node.js 24.x
         uses: actions/setup-node@v5
         with:
-          node-version: 22.x
+          node-version: 24.x
           cache: "yarn"
       - name: Cache node_modules
         id: cache-node-modules
         uses: actions/cache@v4
         with:
           path: node_modules
-          key: ${{ runner.os }}-node-modules-${{ hashFiles('yarn.lock') }}
+          key: ${{ runner.os }}-node-modules-24.x-${{ 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: 22.x
+          node-version: 24.x
           cache: "yarn"
       - name: Restore node_modules
         uses: actions/cache@v4
         with:
           path: node_modules
-          key: ${{ runner.os }}-node-modules-${{ hashFiles('yarn.lock') }}
+          key: ${{ runner.os }}-node-modules-24.x-${{ hashFiles('yarn.lock') }}
       - run: yarn lint --quiet
 
   types:
@@ -66,13 +66,13 @@ jobs:
         run: corepack enable
       - uses: actions/setup-node@v5
         with:
-          node-version: 22.x
+          node-version: 24.x
           cache: "yarn"
       - name: Restore node_modules
         uses: actions/cache@v4
         with:
           path: node_modules
-          key: ${{ runner.os }}-node-modules-${{ hashFiles('yarn.lock') }}
+          key: ${{ runner.os }}-node-modules-24.x-${{ hashFiles('yarn.lock') }}
       - run: yarn tsc
 
   changes:
@@ -114,13 +114,13 @@ jobs:
         run: corepack enable
       - uses: actions/setup-node@v5
         with:
-          node-version: 22.x
+          node-version: 24.x
           cache: "yarn"
       - name: Restore node_modules
         uses: actions/cache@v4
         with:
           path: node_modules
-          key: ${{ runner.os }}-node-modules-${{ hashFiles('yarn.lock') }}
+          key: ${{ runner.os }}-node-modules-24.x-${{ 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: 22.x
+          node-version: 24.x
           cache: "yarn"
       - name: Restore node_modules
         uses: actions/cache@v4
         with:
           path: node_modules
-          key: ${{ runner.os }}-node-modules-${{ hashFiles('yarn.lock') }}
+          key: ${{ runner.os }}-node-modules-24.x-${{ 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' && github.repository == 'outline/outline' }}
+    if: ${{ (needs.changes.outputs.app == 'true' || needs.changes.outputs.config == 'true') && github.repository == 'outline/outline' }}
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v5
@@ -175,13 +175,13 @@ jobs:
         run: corepack enable
       - uses: actions/setup-node@v5
         with:
-          node-version: 22.x
+          node-version: 24.x
           cache: "yarn"
       - name: Restore node_modules
         uses: actions/cache@v4
         with:
           path: node_modules
-          key: ${{ runner.os }}-node-modules-${{ hashFiles('yarn.lock') }}
+          key: ${{ runner.os }}-node-modules-24.x-${{ hashFiles('yarn.lock') }}
       - name: Set environment to production
         run: echo "NODE_ENV=production" >> $GITHUB_ENV
       - run: yarn vite:build

.github/workflows/docker-build-check.yml

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

.github/workflows/docker.yml

@@ -17,11 +17,11 @@ jobs:
         uses: actions/checkout@v5
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
+        uses: docker/setup-buildx-action@v4
 
       - name: Docker base meta
         id: base_meta
-        uses: docker/metadata-action@v5
+        uses: docker/metadata-action@v6
         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@v3
+        uses: docker/login-action@v4
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
 
       - name: Build and push base image
         id: base_build
-        uses: docker/build-push-action@v6
+        uses: docker/build-push-action@v7
         with:
           context: .
           file: Dockerfile.base
@@ -51,7 +51,7 @@ jobs:
 
       - name: Docker meta
         id: meta
-        uses: docker/metadata-action@v5
+        uses: docker/metadata-action@v6
         with:
           images: |
             ${{ env.IMAGE_NAME }}
@@ -61,7 +61,7 @@ jobs:
 
       - name: Build and push
         id: build
-        uses: docker/build-push-action@v6
+        uses: docker/build-push-action@v7
         with:
           context: .
           file: Dockerfile
@@ -96,11 +96,11 @@ jobs:
         uses: actions/checkout@v5
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
+        uses: docker/setup-buildx-action@v4
 
       - name: Docker base meta
         id: base_meta
-        uses: docker/metadata-action@v5
+        uses: docker/metadata-action@v6
         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@v3
+        uses: docker/login-action@v4
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
 
       - name: Build and push base image
         id: base_build
-        uses: docker/build-push-action@v6
+        uses: docker/build-push-action@v7
         with:
           context: .
           file: Dockerfile.base
@@ -130,7 +130,7 @@ jobs:
 
       - name: Docker meta
         id: meta
-        uses: docker/metadata-action@v5
+        uses: docker/metadata-action@v6
         with:
           images: |
             ${{ env.IMAGE_NAME }}
@@ -140,7 +140,7 @@ jobs:
 
       - name: Build and push
         id: build
-        uses: docker/build-push-action@v6
+        uses: docker/build-push-action@v7
         with:
           context: .
           file: Dockerfile
@@ -182,17 +182,17 @@ jobs:
           merge-multiple: true
 
       - name: Login to Docker Hub
-        uses: docker/login-action@v3
+        uses: docker/login-action@v4
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
+        uses: docker/setup-buildx-action@v4
 
       - name: Docker meta
         id: meta
-        uses: docker/metadata-action@v5
+        uses: docker/metadata-action@v6
         with:
           images: ${{ env.IMAGE_NAME }}
           tags: |

.github/workflows/update-node.yml

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

.gitignore

@@ -20,4 +20,5 @@ data/*
 !.yarn/patches
 !.yarn/plugins
 !.yarn/releases
+.yarn/releases
 !.yarn/sdks

.nvmrc

@@ -1 +1 @@
-22
+24

.yarnrc.yml

@@ -1,3 +1,6 @@
 nodeLinker: node-modules
 
 npmMinimalAgeGate: 86400
+
+npmPreapprovedPackages:
+  - outline-icons

AGENTS.md

@@ -70,7 +70,7 @@ yarn install
 ### Exports
 
 - Exported members must appear at the top of the file.
-- Prefer named exports for components & classes.
+- Always use named exports for new components & classes.
 - Document ALL public/exported functions with JSDoc.
 
 ## React Usage

Dockerfile

@@ -6,7 +6,7 @@ ARG APP_PATH
 WORKDIR $APP_PATH
 
 # ---
-FROM node:22.21.0-slim AS runner
+FROM node:24.14.1-slim AS runner
 
 LABEL org.opencontainers.image.source="https://github.com/outline/outline"
 

Dockerfile.base

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

LICENSE

@@ -3,7 +3,7 @@ Business Source License 1.1
 Parameters
 
 Licensor:             General Outline, Inc.
-Licensed Work:        Outline 1.2.0
+Licensed Work:        Outline 1.6.1
                       The Licensed Work is (c) 2026 General Outline, Inc.
 Additional Use Grant: You may make use of the Licensed Work, provided that
                       you may not use the Licensed Work for a Document
@@ -15,7 +15,7 @@ Additional Use Grant: You may make use of the Licensed Work, provided that
                       Licensed Work by creating teams and documents
                       controlled by such third parties.
 
-Change Date:          2030-01-06
+Change Date:          2030-03-18
 
 Change License:       Apache License, Version 2.0
 

README.md

@@ -1,5 +1,9 @@
 <p align="center">
-  <img src="https://user-images.githubusercontent.com/31465/34380645-bd67f474-eb0b-11e7-8d03-0151c1730654.png" height="29" />
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="./public/logos/outline-logo-dark.png" height="29">
+    <source media="(prefers-color-scheme: light)" srcset="./public/logos/outline-logo-light.png" height="29">
+    <img src="./public/logos/outline-logo-light.png" height="29" alt="Outline" />
+  </picture>
 </p>
 <p align="center">
   <i>A fast, collaborative, knowledge base for your team built using React and Node.js.<br/>Try out Outline using our hosted version at <a href="https://www.getoutline.com">www.getoutline.com</a>.</i>
@@ -29,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 – we'd love your help to fix bugs and add features!
+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.
 
-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.
+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.
 
 If you’re looking for ways to get started, here's a list of ways to help us improve Outline:
 

app.json

@@ -21,7 +21,23 @@
     }
   ],
   "scripts": {
-    "postdeploy": "yarn sequelize db:migrate"
+    "postdeploy": "yarn sequelize db:migrate",
+    "pr-predeploy": "yarn sequelize db:migrate"
+  },
+  "environments": {
+    "review": {
+      "scripts": {
+        "postdeploy": "yarn sequelize db:migrate"
+      },
+      "addons": [
+        {
+          "plan": "heroku-redis:mini"
+        },
+        {
+          "plan": "heroku-postgresql:essential-0"
+        }
+      ]
+    }
   },
   "env": {
     "NODE_ENV": {
@@ -43,8 +59,12 @@
       "required": true
     },
     "URL": {
-      "description": "https://{your app name}.herokuapp.com, or the domain you are binding to",
-      "required": true
+      "description": "https://{your app name}.herokuapp.com, or the domain you are binding to. For review apps, this is auto-generated.",
+      "required": false
+    },
+    "HEROKU_APP_NAME": {
+      "description": "Automatically set by Heroku for review apps",
+      "required": false
     },
     "GOOGLE_CLIENT_ID": {
       "description": "See https://developers.google.com/identity/protocols/OAuth2 to create a new Google OAuth client. You must configure at least one of Slack or Google to control login.",

app/actions/definitions/collections.tsx

@@ -1,12 +1,12 @@
 import {
-  AlphabeticalReverseSortIcon,
-  AlphabeticalSortIcon,
+  SortAlphabeticalReverseIcon,
+  SortAlphabeticalIcon,
   ArchiveIcon,
   CollectionIcon,
   EditIcon,
   ExportIcon,
   ImportIcon,
-  ManualSortIcon,
+  SortManualIcon,
   NewDocumentIcon,
   PadlockIcon,
   PlusIcon,
@@ -20,7 +20,7 @@ import {
   UnsubscribeIcon,
 } from "outline-icons";
 import { toast } from "sonner";
-import type Collection from "~/models/Collection";
+import Collection from "~/models/Collection";
 import { CollectionEdit } from "~/components/Collection/CollectionEdit";
 import { CollectionNew } from "~/components/Collection/CollectionNew";
 import CollectionDeleteDialog from "~/components/CollectionDeleteDialog";
@@ -29,8 +29,8 @@ import DynamicCollectionIcon from "~/components/Icons/CollectionIcon";
 import { getHeaderExpandedKey } from "~/components/Sidebar/components/Header";
 import {
   createAction,
-  createActionWithChildren,
   createInternalLinkAction,
+  createActionWithChildren,
 } from "~/actions";
 import { ActiveCollectionSection, CollectionSection } from "~/actions/sections";
 import { setPersistedState } from "~/hooks/usePersistedState";
@@ -96,11 +96,11 @@ export const editCollection = createAction({
   analyticsName: "Edit collection",
   section: ActiveCollectionSection,
   icon: <EditIcon />,
-  visible: ({ activeCollectionId, stores }) =>
-    !!activeCollectionId &&
-    stores.policies.abilities(activeCollectionId).update,
-  perform: ({ t, activeCollectionId, stores }) => {
-    if (!activeCollectionId) {
+  visible: ({ getActivePolicies }) =>
+    getActivePolicies(Collection).some((policy) => policy.abilities.update),
+  perform: ({ t, getActiveModel, stores }) => {
+    const collection = getActiveModel(Collection);
+    if (!collection) {
       return;
     }
 
@@ -109,7 +109,7 @@ export const editCollection = createAction({
       content: (
         <CollectionEdit
           onSubmit={stores.dialogs.closeAllModals}
-          collectionId={activeCollectionId}
+          collectionId={collection.id}
         />
       ),
     });
@@ -122,14 +122,10 @@ export const editCollectionPermissions = createAction({
   analyticsName: "Collection permissions",
   section: ActiveCollectionSection,
   icon: <PadlockIcon />,
-  visible: ({ activeCollectionId, stores }) =>
-    !!activeCollectionId &&
-    stores.policies.abilities(activeCollectionId).update,
-  perform: ({ t, activeCollectionId, stores }) => {
-    if (!activeCollectionId) {
-      return;
-    }
-    const collection = stores.collections.get(activeCollectionId);
+  visible: ({ getActivePolicies }) =>
+    getActivePolicies(Collection).some((policy) => policy.abilities.update),
+  perform: ({ t, getActiveModel, stores }) => {
+    const collection = getActiveModel(Collection);
     if (!collection) {
       return;
     }
@@ -152,15 +148,16 @@ export const importDocument = createAction({
   analyticsName: "Import document",
   section: ActiveCollectionSection,
   icon: <ImportIcon />,
-  visible: ({ activeCollectionId, stores }) => {
-    if (activeCollectionId) {
-      return !!stores.policies.abilities(activeCollectionId).createDocument;
-    }
-
-    return false;
-  },
-  perform: ({ activeCollectionId, stores }) => {
+  visible: ({ getActivePolicies }) =>
+    getActivePolicies(Collection).some(
+      (policy) => policy.abilities.createDocument
+    ),
+  perform: ({ t, getActiveModel, stores }) => {
     const { documents } = stores;
+    const collection = getActiveModel(Collection);
+    if (!collection) {
+      return;
+    }
     const input = document.createElement("input");
     input.type = "file";
     input.accept = documents.importFileTypesString;
@@ -168,19 +165,17 @@ export const importDocument = createAction({
     input.onchange = async (ev) => {
       const files = getEventFiles(ev);
       const file = files[0];
+      const toastId = toast.loading(`${t("Uploading")}…`);
 
       try {
-        const document = await documents.import(
-          file,
-          null,
-          activeCollectionId,
-          {
-            publish: true,
-          }
-        );
-        history.push(document.url);
+        const document = await documents.import(file, null, collection.id, {
+          publish: true,
+        });
+        history.push(document.path);
       } catch (err) {
         toast.error(err.message);
+      } finally {
+        toast.dismiss(toastId);
       }
     };
 
@@ -191,37 +186,36 @@ export const importDocument = createAction({
 export const sortCollection = createActionWithChildren({
   name: ({ t }) => t("Sort in sidebar"),
   section: ActiveCollectionSection,
-  visible: ({ activeCollectionId, stores }) =>
-    !!activeCollectionId &&
-    !!stores.policies.abilities(activeCollectionId).update,
-  icon: ({ activeCollectionId, stores }) => {
-    const collection = stores.collections.get(activeCollectionId);
+  visible: ({ getActivePolicies }) =>
+    getActivePolicies(Collection).some((policy) => policy.abilities.update),
+  icon: ({ getActiveModel }) => {
+    const collection = getActiveModel(Collection);
     const sortAlphabetical = collection?.sort.field === "title";
     const sortDir = collection?.sort.direction;
 
     return sortAlphabetical ? (
       sortDir === "asc" ? (
-        <AlphabeticalSortIcon />
+        <SortAlphabeticalIcon />
       ) : (
-        <AlphabeticalReverseSortIcon />
+        <SortAlphabeticalReverseIcon />
       )
     ) : (
-      <ManualSortIcon />
+      <SortManualIcon />
     );
   },
   children: [
     createAction({
       name: ({ t }) => t("A-Z sort"),
       section: ActiveCollectionSection,
-      selected: ({ activeCollectionId, stores }) => {
-        const collection = stores.collections.get(activeCollectionId);
+      selected: ({ getActiveModel }) => {
+        const collection = getActiveModel(Collection);
         return (
           collection?.sort.field === "title" &&
           collection?.sort.direction === "asc"
         );
       },
-      perform: ({ activeCollectionId, stores }) => {
-        const collection = stores.collections.get(activeCollectionId);
+      perform: ({ getActiveModel }) => {
+        const collection = getActiveModel(Collection);
         return collection?.save({
           sort: {
             field: "title",
@@ -233,15 +227,15 @@ export const sortCollection = createActionWithChildren({
     createAction({
       name: ({ t }) => t("Z-A sort"),
       section: ActiveCollectionSection,
-      selected: ({ activeCollectionId, stores }) => {
-        const collection = stores.collections.get(activeCollectionId);
+      selected: ({ getActiveModel }) => {
+        const collection = getActiveModel(Collection);
         return (
           collection?.sort.field === "title" &&
           collection?.sort.direction === "desc"
         );
       },
-      perform: ({ activeCollectionId, stores }) => {
-        const collection = stores.collections.get(activeCollectionId);
+      perform: ({ getActiveModel }) => {
+        const collection = getActiveModel(Collection);
         return collection?.save({
           sort: {
             field: "title",
@@ -253,12 +247,12 @@ export const sortCollection = createActionWithChildren({
     createAction({
       name: ({ t }) => t("Manual sort"),
       section: ActiveCollectionSection,
-      selected: ({ activeCollectionId, stores }) => {
-        const collection = stores.collections.get(activeCollectionId);
+      selected: ({ getActiveModel }) => {
+        const collection = getActiveModel(Collection);
         return collection?.sort.field !== "title";
       },
-      perform: ({ activeCollectionId, stores }) => {
-        const collection = stores.collections.get(activeCollectionId);
+      perform: ({ getActiveModel }) => {
+        const collection = getActiveModel(Collection);
         return collection?.save({
           sort: {
             field: "index",
@@ -275,22 +269,19 @@ export const searchInCollection = createInternalLinkAction({
   analyticsName: "Search collection",
   section: ActiveCollectionSection,
   icon: <SearchIcon />,
-  visible: ({ activeCollectionId, stores }) => {
-    if (!activeCollectionId) {
-      return false;
-    }
-
-    const collection = stores.collections.get(activeCollectionId);
-
+  visible: ({ getActiveModel, stores }) => {
+    const collection = getActiveModel(Collection);
     if (!collection?.isActive) {
       return false;
     }
 
-    return stores.policies.abilities(activeCollectionId).readDocument;
+    return stores.policies.abilities(collection.id).readDocument;
   },
-  to: ({ activeCollectionId, sidebarContext }) => {
+  to: ({ getActiveModel, sidebarContext }) => {
+    const collection = getActiveModel(Collection);
+
     const [pathname, search] = searchPath({
-      collectionId: activeCollectionId,
+      collectionId: collection?.id,
     }).split("?");
 
     return {
@@ -307,23 +298,22 @@ export const starCollection = createAction({
   section: ActiveCollectionSection,
   icon: <StarredIcon />,
   keywords: "favorite bookmark",
-  visible: ({ activeCollectionId, stores }) => {
-    if (!activeCollectionId) {
+  visible: ({ getActiveModel, stores }) => {
+    const collection = getActiveModel(Collection);
+    if (!collection) {
       return false;
     }
-    const collection = stores.collections.get(activeCollectionId);
+
     return (
-      !collection?.isStarred &&
-      stores.policies.abilities(activeCollectionId).star
+      !collection.isStarred && stores.policies.abilities(collection.id).star
     );
   },
-  perform: async ({ activeCollectionId, stores }) => {
-    if (!activeCollectionId) {
+  perform: async ({ getActiveModel }) => {
+    const collection = getActiveModel(Collection);
+    if (!collection) {
       return;
     }
-
-    const collection = stores.collections.get(activeCollectionId);
-    await collection?.star();
+    await collection.star();
     setPersistedState(getHeaderExpandedKey("starred"), true);
   },
 });
@@ -334,22 +324,18 @@ export const unstarCollection = createAction({
   section: ActiveCollectionSection,
   icon: <UnstarredIcon />,
   keywords: "unfavorite unbookmark",
-  visible: ({ activeCollectionId, stores }) => {
-    if (!activeCollectionId) {
+  visible: ({ getActiveModel, stores }) => {
+    const collection = getActiveModel(Collection);
+    if (!collection) {
       return false;
     }
-    const collection = stores.collections.get(activeCollectionId);
+
     return (
-      !!collection?.isStarred &&
-      stores.policies.abilities(activeCollectionId).unstar
+      !!collection.isStarred && stores.policies.abilities(collection.id).unstar
     );
   },
-  perform: async ({ activeCollectionId, stores }) => {
-    if (!activeCollectionId) {
-      return;
-    }
-
-    const collection = stores.collections.get(activeCollectionId);
+  perform: async ({ getActiveModel }) => {
+    const collection = getActiveModel(Collection);
     await collection?.unstar();
   },
 });
@@ -359,28 +345,25 @@ export const subscribeCollection = createAction({
   analyticsName: "Subscribe to collection",
   section: ActiveCollectionSection,
   icon: <SubscribeIcon />,
-  visible: ({ activeCollectionId, stores }) => {
-    if (!activeCollectionId) {
+  visible: ({ getActiveModel, stores }) => {
+    const collection = getActiveModel(Collection);
+    if (!collection) {
       return false;
     }
 
-    const collection = stores.collections.get(activeCollectionId);
-
     return (
-      !!collection?.isActive &&
-      !collection?.isSubscribed &&
-      stores.policies.abilities(activeCollectionId).subscribe
+      !!collection.isActive &&
+      !collection.isSubscribed &&
+      stores.policies.abilities(collection.id).subscribe
     );
   },
-  perform: async ({ activeCollectionId, stores, t }) => {
-    if (!activeCollectionId) {
+  perform: async ({ getActiveModel, t }) => {
+    const collection = getActiveModel(Collection);
+    if (!collection) {
       return;
     }
 
-    const collection = stores.collections.get(activeCollectionId);
-
-    await collection?.subscribe();
-
+    await collection.subscribe();
     toast.success(t("Subscribed to document notifications"));
   },
 });
@@ -390,28 +373,25 @@ export const unsubscribeCollection = createAction({
   analyticsName: "Unsubscribe from collection",
   section: ActiveCollectionSection,
   icon: <UnsubscribeIcon />,
-  visible: ({ activeCollectionId, stores }) => {
-    if (!activeCollectionId) {
+  visible: ({ getActiveModel, stores }) => {
+    const collection = getActiveModel(Collection);
+    if (!collection) {
       return false;
     }
 
-    const collection = stores.collections.get(activeCollectionId);
-
     return (
-      !!collection?.isActive &&
-      !!collection?.isSubscribed &&
-      stores.policies.abilities(activeCollectionId).unsubscribe
+      !!collection.isActive &&
+      !!collection.isSubscribed &&
+      stores.policies.abilities(collection.id).unsubscribe
     );
   },
-  perform: async ({ activeCollectionId, currentUserId, stores, t }) => {
-    if (!activeCollectionId || !currentUserId) {
+  perform: async ({ getActiveModel, t }) => {
+    const collection = getActiveModel(Collection);
+    if (!collection) {
       return;
     }
 
-    const collection = stores.collections.get(activeCollectionId);
-
-    await collection?.unsubscribe();
-
+    await collection.unsubscribe();
     toast.success(t("Unsubscribed from document notifications"));
   },
 });
@@ -421,23 +401,15 @@ export const archiveCollection = createAction({
   analyticsName: "Archive collection",
   section: ActiveCollectionSection,
   icon: <ArchiveIcon />,
-  visible: ({ activeCollectionId, stores }) => {
-    if (!activeCollectionId) {
-      return false;
-    }
-    return !!stores.policies.abilities(activeCollectionId).archive;
-  },
-  perform: async ({ activeCollectionId, stores, t }) => {
-    const { dialogs, collections } = stores;
-    if (!activeCollectionId) {
-      return;
-    }
-    const collection = collections.get(activeCollectionId);
+  visible: ({ getActivePolicies }) =>
+    getActivePolicies(Collection).some((policy) => policy.abilities.archive),
+  perform: async ({ getActiveModel, stores, t }) => {
+    const collection = getActiveModel(Collection);
     if (!collection) {
       return;
     }
 
-    dialogs.openModal({
+    stores.dialogs.openModal({
       title: t("Archive collection"),
       content: (
         <ConfirmationDialog
@@ -462,17 +434,10 @@ export const restoreCollection = createAction({
   analyticsName: "Restore collection",
   section: CollectionSection,
   icon: <RestoreIcon />,
-  visible: ({ activeCollectionId, stores }) => {
-    if (!activeCollectionId) {
-      return false;
-    }
-    return !!stores.policies.abilities(activeCollectionId).restore;
-  },
-  perform: async ({ activeCollectionId, stores, t }) => {
-    if (!activeCollectionId) {
-      return;
-    }
-    const collection = stores.collections.get(activeCollectionId);
+  visible: ({ getActivePolicies }) =>
+    getActivePolicies(Collection).some((policy) => policy.abilities.restore),
+  perform: async ({ getActiveModel, t }) => {
+    const collection = getActiveModel(Collection);
     if (!collection) {
       return;
     }
@@ -488,18 +453,10 @@ export const deleteCollection = createAction({
   section: ActiveCollectionSection,
   dangerous: true,
   icon: <TrashIcon />,
-  visible: ({ activeCollectionId, stores }) => {
-    if (!activeCollectionId) {
-      return false;
-    }
-    return stores.policies.abilities(activeCollectionId).delete;
-  },
-  perform: ({ activeCollectionId, t, stores }) => {
-    if (!activeCollectionId) {
-      return;
-    }
-
-    const collection = stores.collections.get(activeCollectionId);
+  visible: ({ getActivePolicies }) =>
+    getActivePolicies(Collection).some((policy) => policy.abilities.delete),
+  perform: ({ getActiveModel, t, stores }) => {
+    const collection = getActiveModel(Collection);
     if (!collection) {
       return;
     }
@@ -521,18 +478,10 @@ export const exportCollection = createAction({
   analyticsName: "Export collection",
   section: ActiveCollectionSection,
   icon: <ExportIcon />,
-  visible: ({ currentTeamId, activeCollectionId, stores }) => {
-    if (!currentTeamId || !activeCollectionId) {
-      return false;
-    }
-
-    return !!stores.policies.abilities(activeCollectionId).export;
-  },
-  perform: async ({ activeCollectionId, stores, t }) => {
-    if (!activeCollectionId) {
-      return;
-    }
-    const collection = stores.collections.get(activeCollectionId);
+  visible: ({ getActivePolicies }) =>
+    getActivePolicies(Collection).some((policy) => policy.abilities.export),
+  perform: async ({ getActiveModel, stores, t }) => {
+    const collection = getActiveModel(Collection);
     if (!collection) {
       return;
     }
@@ -555,13 +504,13 @@ export const createDocument = createInternalLinkAction({
   section: ActiveCollectionSection,
   icon: <NewDocumentIcon />,
   keywords: "new create document",
-  visible: ({ activeCollectionId, stores }) =>
-    !!(
-      !!activeCollectionId &&
-      stores.policies.abilities(activeCollectionId).createDocument
+  visible: ({ getActivePolicies }) =>
+    getActivePolicies(Collection).some(
+      (policy) => policy.abilities.createDocument
     ),
-  to: ({ activeCollectionId, sidebarContext }) => {
-    const [pathname, search] = newDocumentPath(activeCollectionId).split("?");
+  to: ({ getActiveModel, sidebarContext }) => {
+    const collection = getActiveModel(Collection);
+    const [pathname, search] = newDocumentPath(collection?.id).split("?");
 
     return {
       pathname,
@@ -577,19 +526,13 @@ export const createTemplate = createInternalLinkAction({
   section: ActiveCollectionSection,
   icon: <ShapesIcon />,
   keywords: "new create template",
-  visible: ({ activeCollectionId, stores }) =>
-    !!(
-      !!activeCollectionId &&
-      stores.policies.abilities(activeCollectionId).createDocument
+  visible: ({ getActivePolicies }) =>
+    getActivePolicies(Collection).some(
+      (policy) => policy.abilities.createTemplate
     ),
-  to: ({ activeCollectionId, sidebarContext }) => {
-    const [pathname, search] = newTemplatePath(activeCollectionId).split("?");
-
-    return {
-      pathname,
-      search,
-      state: { sidebarContext },
-    };
+  to: ({ getActiveModel }) => {
+    const collection = getActiveModel(Collection);
+    return newTemplatePath(collection?.id);
   },
 });
 

app/actions/definitions/documents.tsx

@@ -32,21 +32,23 @@ import {
   CaseSensitiveIcon,
   RestoreIcon,
   EditIcon,
+  EmbedIcon,
+  OpenIcon,
 } from "outline-icons";
 import { toast } from "sonner";
 import Icon from "@shared/components/Icon";
 import type { NavigationNode } from "@shared/types";
 import { ExportContentType, TeamPreference } from "@shared/types";
 import { getEventFiles } from "@shared/utils/files";
+import { Week } from "@shared/utils/time";
 import type UserMembership from "~/models/UserMembership";
 import { client } from "~/utils/ApiClient";
 import DocumentDelete from "~/scenes/DocumentDelete";
-import DocumentMove from "~/scenes/DocumentMove";
 import DocumentPermanentDelete from "~/scenes/DocumentPermanentDelete";
 import DocumentPublish from "~/scenes/DocumentPublish";
 import DeleteDocumentsInTrash from "~/scenes/Trash/components/DeleteDocumentsInTrash";
 import ConfirmationDialog from "~/components/ConfirmationDialog";
-import DocumentCopy from "~/components/DocumentCopy";
+import DocumentCopy from "~/components/DocumentExplorer/DocumentCopy";
 import { DocumentDownload } from "~/components/DocumentDownload";
 import MarkdownIcon from "~/components/Icons/MarkdownIcon";
 import { getHeaderExpandedKey } from "~/components/Sidebar/components/Header";
@@ -69,17 +71,27 @@ import {
   homePath,
   newDocumentPath,
   newNestedDocumentPath,
+  newSiblingDocumentPath,
   searchPath,
   documentPath,
   urlify,
+  desktopify,
   trashPath,
   documentEditPath,
 } from "~/utils/routeHelpers";
 import capitalize from "lodash/capitalize";
 import CollectionIcon from "~/components/Icons/CollectionIcon";
-import type { Action, ActionGroup, ActionSeparator } from "~/types";
+import type {
+  Action,
+  ActionContext,
+  ActionGroup,
+  ActionSeparator,
+} from "~/types";
 import lazyWithRetry from "~/utils/lazyWithRetry";
 import env from "~/env";
+import { isMac, isWindows } from "@shared/utils/browser";
+import isCloudHosted from "~/utils/isCloudHosted";
+import DocumentMove from "~/components/DocumentExplorer/DocumentMove";
 
 const Insights = lazyWithRetry(
   () => import("~/scenes/Document/components/Insights")
@@ -131,18 +143,13 @@ export const editDocument = createInternalLinkAction({
   keywords: "edit",
   icon: <EditIcon />,
   visible: ({ activeDocumentId, stores }) => {
-    const { auth, documents, policies } = stores;
+    const { auth, policies } = stores;
 
-    const document = activeDocumentId
-      ? documents.get(activeDocumentId)
-      : undefined;
     const can = activeDocumentId
       ? policies.abilities(activeDocumentId)
       : undefined;
 
-    return (
-      !!can?.update && !!auth.user?.separateEditMode && !document?.template
-    );
+    return !!can?.update && !!auth.user?.separateEditMode;
   },
   to: ({ activeDocumentId, stores }) => {
     const document = activeDocumentId
@@ -199,59 +206,41 @@ export const createDraftDocument = createInternalLinkAction({
   }),
 });
 
-export const createDocumentFromTemplate = createInternalLinkAction({
-  name: ({ t }) => t("New from template"),
-  analyticsName: "New document",
-  section: DocumentSection,
-  icon: <NewDocumentIcon />,
-  keywords: "create",
-  visible: ({
-    currentTeamId,
-    activeCollectionId,
-    activeDocumentId,
-    stores,
-  }) => {
-    const document = activeDocumentId
-      ? stores.documents.get(activeDocumentId)
-      : undefined;
+/**
+ * Finds the index of a document among its siblings in the collection tree.
+ *
+ * @param stores - the root stores.
+ * @param document - the document to find the index of.
+ * @returns the index of the document among its siblings, or -1 if not found.
+ */
+function findDocumentSiblingIndex(
+  stores: ActionContext["stores"],
+  document: {
+    id: string;
+    collectionId?: string | null;
+    parentDocumentId?: string;
+  }
+): number {
+  if (!document.collectionId) {
+    return -1;
+  }
+  const collection = stores.collections.get(document.collectionId);
+  if (!collection) {
+    return -1;
+  }
 
-    if (
-      !currentTeamId ||
-      !document?.isTemplate ||
-      !!document?.isDraft ||
-      !!document?.isDeleted
-    ) {
-      return false;
-    }
+  const siblings = document.parentDocumentId
+    ? collection.getChildrenForDocument(document.parentDocumentId)
+    : collection.sortedDocuments;
 
-    if (activeCollectionId) {
-      return stores.policies.abilities(activeCollectionId).createDocument;
-    }
-    return stores.policies.abilities(currentTeamId).createDocument;
-  },
-  to: ({ activeDocumentId, activeCollectionId, sidebarContext }) => {
-    if (!activeDocumentId || !activeCollectionId) {
-      return "";
-    }
-
-    const [pathname, search] = newDocumentPath(activeCollectionId, {
-      templateId: activeDocumentId,
-    }).split("?");
-
-    return {
-      pathname,
-      search,
-      state: { sidebarContext },
-    };
-  },
-});
+  return siblings?.findIndex((node) => node.id === document.id) ?? -1;
+}
 
 export const createNestedDocument = createInternalLinkAction({
-  name: ({ t }) => t("New nested document"),
+  name: ({ t }) => t("Nested document"),
   analyticsName: "New document",
   section: ActiveDocumentSection,
-  icon: <NewDocumentIcon />,
-  keywords: "create",
+  keywords: "create nested",
   visible: ({ currentTeamId, activeDocumentId, stores }) =>
     !!currentTeamId &&
     !!activeDocumentId &&
@@ -269,6 +258,100 @@ export const createNestedDocument = createInternalLinkAction({
   },
 });
 
+const createDocumentBefore = createInternalLinkAction({
+  name: ({ t }) => t("Before"),
+  analyticsName: "New document before",
+  section: ActiveDocumentSection,
+  keywords: "create before",
+  visible: ({ currentTeamId, activeDocumentId, stores }) => {
+    if (!currentTeamId || !activeDocumentId) {
+      return false;
+    }
+    const document = stores.documents.get(activeDocumentId);
+    return (
+      !!document?.collectionId &&
+      stores.policies.abilities(currentTeamId).createDocument
+    );
+  },
+  to: ({ activeDocumentId, stores, sidebarContext }) => {
+    const document = activeDocumentId
+      ? stores.documents.get(activeDocumentId)
+      : undefined;
+    if (!document) {
+      return "";
+    }
+
+    const index = findDocumentSiblingIndex(stores, document);
+    const [pathname, search] = newSiblingDocumentPath({
+      collectionId: document.collectionId,
+      parentDocumentId: document.parentDocumentId,
+      index: Math.max(0, index),
+    }).split("?");
+
+    return {
+      pathname,
+      search,
+      state: { sidebarContext },
+    };
+  },
+});
+
+const createDocumentAfter = createInternalLinkAction({
+  name: ({ t }) => t("After"),
+  analyticsName: "New document after",
+  section: ActiveDocumentSection,
+  keywords: "create after",
+  visible: ({ currentTeamId, activeDocumentId, stores }) => {
+    if (!currentTeamId || !activeDocumentId) {
+      return false;
+    }
+    const document = stores.documents.get(activeDocumentId);
+    return (
+      !!document?.collectionId &&
+      stores.policies.abilities(currentTeamId).createDocument
+    );
+  },
+  to: ({ activeDocumentId, stores, sidebarContext }) => {
+    const document = activeDocumentId
+      ? stores.documents.get(activeDocumentId)
+      : undefined;
+    if (!document) {
+      return "";
+    }
+
+    const index = findDocumentSiblingIndex(stores, document);
+    const [pathname, search] = newSiblingDocumentPath({
+      collectionId: document.collectionId,
+      parentDocumentId: document.parentDocumentId,
+      index: index + 1,
+    }).split("?");
+
+    return {
+      pathname,
+      search,
+      state: { sidebarContext },
+    };
+  },
+});
+
+export const createNewDocument = createActionWithChildren({
+  name: ({ t }) => t("New document"),
+  analyticsName: "New document",
+  section: ActiveDocumentSection,
+  icon: <NewDocumentIcon />,
+  keywords: "create",
+  visible: ({ currentTeamId, activeDocumentId, stores }) => {
+    if (!activeDocumentId) {
+      return false;
+    }
+
+    return (
+      !!currentTeamId && stores.policies.abilities(currentTeamId).createDocument
+    );
+  },
+  children: [createDocumentBefore, createDocumentAfter, createNestedDocument],
+});
+
 export const starDocument = createAction({
   name: ({ t }) => t("Star"),
   analyticsName: "Star document",
@@ -345,7 +428,7 @@ export const publishDocument = createAction({
       return;
     }
 
-    if (document?.collectionId || document?.template) {
+    if (document?.collectionId) {
       await document.save(undefined, {
         publish: true,
       });
@@ -494,7 +577,10 @@ export const shareDocument = createAction({
   section: ActiveDocumentSection,
   icon: <PadlockIcon />,
   visible: ({ stores, activeDocumentId }) => {
-    const can = stores.policies.abilities(activeDocumentId!);
+    if (!activeDocumentId) {
+      return false;
+    }
+    const can = stores.policies.abilities(activeDocumentId);
     return can.manageUsers || can.share;
   },
   perform: async ({ activeDocumentId, stores, currentUserId, t }) => {
@@ -549,7 +635,7 @@ export const downloadDocument = createAction({
 });
 
 export const downloadDocumentAsMarkdown = createAction({
-  name: ({ t }) => t("Downloas as Markdown"),
+  name: ({ t }) => t("Download as Markdown"),
   analyticsName: "Download document as Markdown",
   section: ActiveDocumentSection,
   keywords: "md markdown export",
@@ -630,7 +716,7 @@ export const copyDocumentAsMarkdown = createAction({
     if (document) {
       const res = await client.post("/documents.export", {
         id: document.id,
-        signedUrls: 3600 * 24 * 30, // 30 days
+        signedUrls: Week.seconds, // 7 days (AWS S3 max for presigned URLs)
       });
       copy(res.data);
       toast.success(t("Markdown copied to clipboard"));
@@ -869,7 +955,50 @@ export const printDocument = createAction({
   icon: <PrintIcon />,
   visible: ({ activeDocumentId }) => !!(activeDocumentId && window.print),
   perform: () => {
-    queueMicrotask(window.print);
+    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);
   },
 });
 
@@ -890,7 +1019,7 @@ export const importDocument = createAction({
 
     return false;
   },
-  perform: ({ activeDocumentId, activeCollectionId, stores }) => {
+  perform: ({ t, activeDocumentId, activeCollectionId, stores }) => {
     const { documents } = stores;
     const input = document.createElement("input");
     input.type = "file";
@@ -899,6 +1028,7 @@ export const importDocument = createAction({
     input.onchange = async (ev) => {
       const files = getEventFiles(ev);
       const file = files[0];
+      const toastId = toast.loading(`${t("Uploading")}…`);
 
       try {
         const document = await documents.import(
@@ -912,6 +1042,8 @@ export const importDocument = createAction({
         history.push(document.url);
       } catch (err) {
         toast.error(err.message);
+      } finally {
+        toast.dismiss(toastId);
       }
     };
 
@@ -929,12 +1061,12 @@ export const createTemplateFromDocument = createAction({
     const document = activeDocumentId
       ? stores.documents.get(activeDocumentId)
       : undefined;
-    if (document?.isTemplate || !document?.isActive) {
+    if (!document?.isActive) {
       return false;
     }
     return !!(
       !!activeCollectionId &&
-      stores.policies.abilities(activeCollectionId).updateDocument
+      stores.policies.abilities(activeCollectionId).createTemplate
     );
   },
   perform: ({ activeDocumentId, stores, t, event }) => {
@@ -981,46 +1113,8 @@ export const searchDocumentsForQuery = (query: string) =>
     visible: ({ location }) => location.pathname !== searchPath(),
   });
 
-export const moveTemplateToWorkspace = createAction({
-  name: ({ t }) => t("Move to workspace"),
-  analyticsName: "Move template to workspace",
-  section: DocumentSection,
-  icon: <MoveIcon />,
-  iconInContextMenu: false,
-  visible: ({ activeDocumentId, stores }) => {
-    if (!activeDocumentId) {
-      return false;
-    }
-    const document = stores.documents.get(activeDocumentId);
-    if (!document || !document.template || document.isWorkspaceTemplate) {
-      return false;
-    }
-    return !!stores.policies.abilities(activeDocumentId).move;
-  },
-  perform: async ({ activeDocumentId, stores }) => {
-    if (activeDocumentId) {
-      const document = stores.documents.get(activeDocumentId);
-      if (!document) {
-        return;
-      }
-
-      await document.move({
-        collectionId: null,
-      });
-    }
-  },
-});
-
 export const moveDocumentToCollection = createAction({
-  name: ({ activeDocumentId, stores, t }) => {
-    if (!activeDocumentId) {
-      return t("Move");
-    }
-    const document = stores.documents.get(activeDocumentId);
-    return document?.template && document?.collectionId
-      ? t("Move to collection")
-      : t("Move");
-  },
+  name: ({ t }) => t("Move"),
   analyticsName: "Move document",
   section: ActiveDocumentSection,
   icon: <MoveIcon />,
@@ -1058,8 +1152,7 @@ export const moveDocument = createAction({
       return false;
     }
     const document = stores.documents.get(activeDocumentId);
-    // Don't show the button if this is a non-workspace template.
-    if (!document || (document.template && !document.isWorkspaceTemplate)) {
+    if (!document) {
       return false;
     }
     return !!stores.policies.abilities(activeDocumentId).move;
@@ -1067,25 +1160,6 @@ export const moveDocument = createAction({
   perform: moveDocumentToCollection.perform,
 });
 
-export const moveTemplate = createActionWithChildren({
-  name: ({ t }) => t("Move"),
-  analyticsName: "Move document",
-  section: ActiveDocumentSection,
-  icon: <MoveIcon />,
-  visible: ({ activeDocumentId, stores }) => {
-    if (!activeDocumentId) {
-      return false;
-    }
-    const document = stores.documents.get(activeDocumentId);
-    // Don't show the menu if this is not a template (or) a workspace template.
-    if (!document || !document.template || document.isWorkspaceTemplate) {
-      return false;
-    }
-    return !!stores.policies.abilities(activeDocumentId).move;
-  },
-  children: [moveTemplateToWorkspace, moveDocumentToCollection],
-});
-
 export const archiveDocument = createAction({
   name: ({ t }) => `${t("Archive")}…`,
   analyticsName: "Archive document",
@@ -1144,10 +1218,7 @@ export const restoreDocument = createAction({
       : undefined;
     const can = stores.policies.abilities(document.id);
 
-    return (
-      !!(document.isWorkspaceTemplate || collection?.isActive) &&
-      !!(can.restore || can.unarchive)
-    );
+    return !!collection?.isActive && !!(can.restore || can.unarchive);
   },
   perform: async ({ t, stores, activeDocumentId }) => {
     const document = activeDocumentId
@@ -1184,10 +1255,7 @@ export const restoreDocumentToCollection = createActionWithChildren({
       ? stores.collections.get(document.collectionId)
       : undefined;
 
-    return (
-      !(document.isWorkspaceTemplate || collection?.isActive) &&
-      !!(can.restore || can.unarchive)
-    );
+    return !collection?.isActive && !!(can.restore || can.unarchive);
   },
   children: ({ t, activeDocumentId, stores }) => {
     const { collections, documents, policies } = stores;
@@ -1329,7 +1397,7 @@ export const openDocumentComments = createAction({
       return;
     }
 
-    stores.ui.toggleComments();
+    stores.ui.set({ rightSidebar: "comments" });
   },
 });
 
@@ -1364,6 +1432,7 @@ export const openDocumentInsights = createAction({
   name: ({ t }) => t("Insights"),
   analyticsName: "Open document insights",
   section: ActiveDocumentSection,
+  shortcut: [`Meta+Shift+I`],
   icon: <GraphIcon />,
   visible: ({ activeDocumentId, stores }) => {
     const can = stores.policies.abilities(activeDocumentId ?? "");
@@ -1371,12 +1440,7 @@ export const openDocumentInsights = createAction({
       ? stores.documents.get(activeDocumentId)
       : undefined;
 
-    return (
-      !!activeDocumentId &&
-      can.listViews &&
-      !document?.isTemplate &&
-      !document?.isDeleted
-    );
+    return !!activeDocumentId && can.listViews && !document?.isDeleted;
   },
   perform: ({ activeDocumentId, stores, t }) => {
     const document = activeDocumentId
@@ -1455,6 +1519,7 @@ export const rootDocumentActions = [
   archiveDocument,
   createDocument,
   createDraftDocument,
+  createNewDocument,
   createNestedDocument,
   createTemplateFromDocument,
   deleteDocument,
@@ -1476,16 +1541,17 @@ export const rootDocumentActions = [
   searchInDocument,
   duplicateDocument,
   leaveDocument,
-  moveTemplateToWorkspace,
   moveDocumentToCollection,
   openRandomDocument,
   permanentlyDeleteDocument,
   permanentlyDeleteDocumentsInTrash,
+  presentDocument,
   printDocument,
   pinDocumentToCollection,
   pinDocumentToHome,
   openDocumentComments,
   openDocumentHistory,
   openDocumentInsights,
+  openDocumentInDesktop,
   shareDocument,
 ];

app/actions/definitions/templates.tsx

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

app/actions/index.ts

@@ -210,6 +210,7 @@ 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
@@ -229,6 +230,7 @@ export function actionToKBar(
           section,
           keywords: action.keywords,
           shortcut: action.shortcut,
+          subtitle,
           icon,
           priority,
           perform: () => performAction(action, context),
@@ -254,6 +256,7 @@ export function actionToKBar(
           keywords: action.keywords,
           shortcut: action.shortcut,
           icon,
+          subtitle,
           priority,
         },
         ...children.map((child) => ({

app/actions/sections.ts

@@ -15,6 +15,9 @@ 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) => {
@@ -24,6 +27,15 @@ export const ActiveDocumentSection = ({ t, stores }: ActionContext) => {
 
 ActiveDocumentSection.priority = 0.9;
 
+export const TemplateSection = ({ t }: ActionContext) => t("Template");
+
+export const ActiveTemplateSection = ({ t, stores }: ActionContext) => {
+  const activeTemplate = stores.templates.active;
+  return `${t("Template")} · ${activeTemplate?.titleWithDefault}`;
+};
+
+ActiveTemplateSection.priority = 0.9;
+
 export const RecentSection = ({ t }: ActionContext) => t("Recently viewed");
 
 RecentSection.priority = 1;
@@ -49,7 +61,7 @@ export const ShareSection = ({ t }: ActionContext) => t("Share");
 export const TeamSection = ({ t }: ActionContext) => t("Workspace");
 
 export const RecentSearchesSection = ({ t }: ActionContext) =>
-  t("Recent searches");
+  t("Recently viewed");
 
 RecentSearchesSection.priority = -0.1;
 

app/components/Arrow.tsx

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

app/components/AuthenticatedLayout.tsx

@@ -1,17 +1,10 @@
-import { AnimatePresence } from "framer-motion";
 import { observer } from "mobx-react";
 import * as React from "react";
-import {
-  Switch,
-  Route,
-  useLocation,
-  matchPath,
-  Redirect,
-} from "react-router-dom";
-import { TeamPreference } from "@shared/types";
+import { Switch, Route } from "react-router-dom";
 import ErrorSuspended from "~/scenes/Errors/ErrorSuspended";
 import Layout from "~/components/Layout";
 import RegisterKeyDown from "~/components/RegisterKeyDown";
+import { RightSidebarProvider } from "~/components/RightSidebarContext";
 import Sidebar from "~/components/Sidebar";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
 import { usePostLoginPath } from "~/hooks/useLastVisitedPath";
@@ -23,20 +16,13 @@ import {
   searchPath,
   newDocumentPath,
   settingsPath,
-  matchDocumentHistory,
-  matchDocumentSlug as slug,
 } from "~/utils/routeHelpers";
 import { DocumentContextProvider } from "./DocumentContext";
 import Fade from "./Fade";
+import NotificationBadge from "./NotificationBadge";
 import { PortalContext } from "./Portal";
 import CommandBar from "./CommandBar";
 
-const DocumentComments = lazyWithRetry(
-  () => import("~/scenes/Document/components/Comments/Comments")
-);
-const DocumentHistory = lazyWithRetry(
-  () => import("~/scenes/Document/components/History")
-);
 const SettingsSidebar = lazyWithRetry(
   () => import("~/components/Sidebar/Settings")
 );
@@ -47,9 +33,7 @@ type Props = {
 
 const AuthenticatedLayout: React.FC = ({ children }: Props) => {
   const { ui, auth } = useStores();
-  const location = useLocation();
   const layoutRef = React.useRef<HTMLDivElement>(null);
-  const can = usePolicy(ui.activeDocumentId);
   const canCollection = usePolicy(ui.activeCollectionId);
   const team = useCurrentTeam();
   const [spendPostLoginPath] = usePostLoginPath();
@@ -73,15 +57,17 @@ 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>
@@ -91,49 +77,20 @@ const AuthenticatedLayout: React.FC = ({ children }: Props) => {
     </Fade>
   );
 
-  const showHistory =
-    !!matchPath(location.pathname, {
-      path: matchDocumentHistory,
-    }) && can.listRevisions;
-  const showComments =
-    !showHistory &&
-    can.comment &&
-    ui.activeDocumentId &&
-    ui.commentsExpanded &&
-    !!team.getPreference(TeamPreference.Commenting);
-
-  const sidebarRight = (
-    <AnimatePresence
-      initial={false}
-      key={ui.activeDocumentId ? "active" : "inactive"}
-    >
-      {(showHistory || showComments) && (
-        <Route path={`/doc/${slug}`}>
-          <React.Suspense fallback={null}>
-            {showHistory && <DocumentHistory />}
-            {showComments && <DocumentComments />}
-          </React.Suspense>
-        </Route>
-      )}
-    </AnimatePresence>
-  );
-
   return (
     <DocumentContextProvider>
-      <PortalContext.Provider value={layoutRef.current}>
-        <Layout
-          title={team.name}
-          sidebar={sidebar}
-          sidebarRight={sidebarRight}
-          ref={layoutRef}
-        >
-          <RegisterKeyDown trigger="n" handler={goToNewDocument} />
-          <RegisterKeyDown trigger="t" handler={goToSearch} />
-          <RegisterKeyDown trigger="/" handler={goToSearch} />
-          {children}
-          <CommandBar />
-        </Layout>
-      </PortalContext.Provider>
+      <RightSidebarProvider>
+        <PortalContext.Provider value={layoutRef.current}>
+          <Layout title={team.name} sidebar={sidebar} ref={layoutRef}>
+            <RegisterKeyDown trigger="n" handler={goToNewDocument} />
+            <RegisterKeyDown trigger="t" handler={goToSearch} />
+            <RegisterKeyDown trigger="/" handler={goToSearch} />
+            {children}
+            <CommandBar />
+            <NotificationBadge />
+          </Layout>
+        </PortalContext.Provider>
+      </RightSidebarProvider>
     </DocumentContextProvider>
   );
 };

app/components/Avatar/Avatar.tsx

@@ -1,3 +1,4 @@
+import { observer } from "mobx-react";
 import * as React from "react";
 import styled from "styled-components";
 import useBoolean from "~/hooks/useBoolean";
@@ -109,4 +110,4 @@ const Image = styled.img<{ size: number }>`
   height: ${(props) => props.size}px;
 `;
 
-export default Avatar;
+export default observer(Avatar);

app/components/Breadcrumb.tsx

@@ -1,4 +1,5 @@
 import { GoToIcon } from "outline-icons";
+import { observer } from "mobx-react";
 import * as React from "react";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
@@ -54,6 +55,15 @@ 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") {
@@ -67,6 +77,7 @@ function Breadcrumb(
           {item.icon}
           <Item
             to={item.to}
+            onClick={handleClick}
             $withIcon={!!item.icon}
             $highlight={!!highlightFirstItem && index === 0}
           >
@@ -75,7 +86,7 @@ function Breadcrumb(
         </>
       );
     },
-    [actionContext, highlightFirstItem]
+    [actionContext, handleClick, highlightFirstItem]
   );
 
   return (
@@ -121,4 +132,4 @@ const Item = styled(Link)<{ $highlight: boolean; $withIcon: boolean }>`
   }
 `;
 
-export default React.forwardRef<HTMLDivElement, Props>(Breadcrumb);
+export default observer(React.forwardRef<HTMLDivElement, Props>(Breadcrumb));

app/components/Button.tsx

@@ -3,6 +3,8 @@ 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";
@@ -152,6 +154,8 @@ 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;
@@ -176,11 +180,13 @@ 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
@@ -191,6 +197,7 @@ 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}>

app/components/CenteredContent.tsx

@@ -23,12 +23,9 @@ const Container = styled.div<Props>`
 type ContentProps = { $maxWidth?: string };
 
 const Content = styled.div<ContentProps>`
-  max-width: ${(props) => props.$maxWidth ?? "46em"};
+  max-width: ${(props: ContentProps) =>
+    props.$maxWidth ?? EditorStyleHelper.documentWidth};
   margin: 0 auto;
-
-  ${breakpoint("desktopLarge")`
-    max-width: ${(props: ContentProps) => props.$maxWidth ?? EditorStyleHelper.documentWidth};
-  `};
 `;
 
 const CenteredContent: React.FC<Props> = ({

app/components/Collaborators.tsx

@@ -125,8 +125,8 @@ function Collaborators(props: Props) {
 
       return (
         <AvatarWithPresence
-          {...rest}
           key={collaborator.id}
+          {...rest}
           user={collaborator}
           isPresent={isPresent}
           isEditing={isEditing}

app/components/Collapsible.tsx

@@ -0,0 +1,112 @@
+import * as RadixCollapsible from "@radix-ui/react-collapsible";
+import { ExpandedIcon } from "outline-icons";
+import * as React from "react";
+import styled from "styled-components";
+import { s } from "@shared/styles";
+
+interface CollapsibleProps {
+  /** The label displayed on the trigger button. */
+  label: React.ReactNode;
+  /** The content to show/hide inside the collapsible panel. */
+  children: React.ReactNode;
+  /** Whether the collapsible is open by default. */
+  defaultOpen?: boolean;
+  /** Controlled open state. */
+  open?: boolean;
+  /** Callback fired when the open state changes. */
+  onOpenChange?: (open: boolean) => void;
+  /** Additional class name for the root element. */
+  className?: string;
+}
+
+/**
+ * An accessible collapsible section built on Radix UI Collapsible.
+ * Renders a trigger button with a disclosure chevron and animated content panel.
+ *
+ * @param props - component props.
+ * @returns the collapsible component.
+ */
+export function Collapsible({
+  label,
+  children,
+  defaultOpen = false,
+  open,
+  onOpenChange,
+  className,
+}: CollapsibleProps) {
+  return (
+    <RadixCollapsible.Root
+      defaultOpen={defaultOpen}
+      open={open}
+      onOpenChange={onOpenChange}
+      className={className}
+    >
+      <StyledTrigger>
+        <StyledExpandedIcon aria-hidden="true" />
+        {label}
+      </StyledTrigger>
+      <StyledContent>{children}</StyledContent>
+    </RadixCollapsible.Root>
+  );
+}
+
+const StyledExpandedIcon = styled(ExpandedIcon)`
+  flex-shrink: 0;
+  transition: transform 150ms ease-out;
+  margin-left: -4px;
+`;
+
+const StyledTrigger = styled(RadixCollapsible.Trigger)`
+  display: flex;
+  align-items: center;
+  background: none;
+  border: none;
+  padding: 0 0 8px 0;
+  cursor: var(--pointer);
+  color: ${s("textTertiary")};
+  font-size: 14pxte
+
+  &:hover {
+    color: ${s("textSecondary")};
+  }
+
+  &[data-state="closed"] {
+    ${StyledExpandedIcon} {
+      transform: rotate(-90deg);
+    }
+  }
+`;
+
+const StyledContent = styled(RadixCollapsible.Content)`
+  overflow: hidden;
+
+  &[data-state="open"] {
+    animation: slideDown 200ms ease-out;
+  }
+
+  &[data-state="closed"] {
+    animation: slideUp 200ms ease-out;
+  }
+
+  @keyframes slideDown {
+    from {
+      height: 0;
+      opacity: 0;
+    }
+    to {
+      height: var(--radix-collapsible-content-height);
+      opacity: 1;
+    }
+  }
+
+  @keyframes slideUp {
+    from {
+      height: var(--radix-collapsible-content-height);
+      opacity: 1;
+    }
+    to {
+      height: 0;
+      opacity: 0;
+    }
+  }
+`;

app/components/Collection/CollectionForm.tsx

@@ -6,14 +6,16 @@ import { Trans, useTranslation } from "react-i18next";
 import styled from "styled-components";
 import Icon from "@shared/components/Icon";
 import { randomElement } from "@shared/random";
-import type { CollectionPermission } from "@shared/types";
-import { TeamPreference } from "@shared/types";
+import { CollectionPermission, TeamPreference } from "@shared/types";
+import type { Option } from "~/components/InputSelect";
 import { IconLibrary } from "@shared/utils/IconLibrary";
 import { colorPalette } from "@shared/utils/collections";
 import { CollectionValidation } from "@shared/validations";
 import type Collection from "~/models/Collection";
 import Button from "~/components/Button";
+import { Collapsible } from "~/components/Collapsible";
 import Input from "~/components/Input";
+import { InputSelect } from "~/components/InputSelect";
 import { InputSelectPermission } from "~/components/InputSelectPermission";
 import { createLazyComponent } from "~/components/LazyLoad";
 import Switch from "~/components/Switch";
@@ -33,6 +35,7 @@ export interface FormData {
   sharing: boolean;
   permission: CollectionPermission | undefined;
   commenting?: boolean | null;
+  templateManagement: CollectionPermission;
 }
 
 const useIconColor = (collection?: Collection) => {
@@ -67,6 +70,22 @@ 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
@@ -92,6 +111,8 @@ export const CollectionForm = observer(function CollectionForm_({
       sharing: collection?.sharing ?? true,
       permission: collection?.permission,
       commenting: collection?.commenting ?? true,
+      templateManagement:
+        collection?.templateManagement ?? CollectionPermission.Admin,
       color: iconColor,
     },
   });
@@ -134,6 +155,71 @@ 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">
@@ -144,7 +230,7 @@ export const CollectionForm = observer(function CollectionForm_({
       <HStack>
         <Input
           type="text"
-          placeholder={t("Name")}
+          label={t("Name")}
           {...register("name", {
             required: true,
             maxLength: CollectionValidation.maxNameLength,
@@ -189,38 +275,10 @@ export const CollectionForm = observer(function CollectionForm_({
         />
       )}
 
-      {team.sharing && (
-        <Controller
-          control={control}
-          name="sharing"
-          render={({ field }) => (
-            <Switch
-              id="sharing"
-              label={t("Public document sharing")}
-              note={t(
-                "Allow documents within this collection to be shared publicly on the internet."
-              )}
-              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}
-            />
-          )}
-        />
+      {collection ? (
+        options
+      ) : (
+        <Collapsible label={t("Advanced options")}>{options}</Collapsible>
       )}
 
       <HStack justify="flex-end">

app/components/CommandBar/CommandBarItem.tsx

@@ -4,6 +4,7 @@ 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";
@@ -15,6 +16,14 @@ 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>
@@ -56,6 +65,16 @@ 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>

app/components/CommandBar/SharedCommandBar.tsx

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

app/components/CommandBar/SharedSearchActions.tsx

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

app/components/CommandBar/useTemplatesAction.tsx

@@ -11,15 +11,15 @@ import useStores from "~/hooks/useStores";
 import { newDocumentPath } from "~/utils/routeHelpers";
 
 const useTemplatesAction = () => {
-  const { documents } = useStores();
+  const { templates } = useStores();
 
   useEffect(() => {
-    void documents.fetchAllTemplates();
-  }, [documents]);
+    void templates.fetchAll();
+  }, [templates]);
 
   const actions = useMemo(
     () =>
-      documents.templatesAlphabetical.map((template) =>
+      templates.alphabetical.map((template) =>
         createInternalLinkAction({
           name: template.titleWithDefault,
           analyticsName: "New document",
@@ -66,7 +66,7 @@ const useTemplatesAction = () => {
           },
         })
       ),
-    [documents.templatesAlphabetical]
+    [templates.alphabetical]
   );
 
   const newFromTemplate = useMemo(

app/components/ContentEditable.tsx

@@ -128,7 +128,14 @@ const ContentEditable = React.forwardRef(function ContentEditable_(
 
   React.useEffect(() => {
     if (contentRef.current && value !== contentRef.current.textContent) {
-      setInnerValue(value);
+      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);
+      }
     }
   }, [value, contentRef]);
 

app/components/DefaultCollectionInputSelect.tsx

@@ -1,8 +1,15 @@
-import { HomeIcon } from "outline-icons";
+import {
+  CollectionIcon as CollectionIconComponent,
+  HomeIcon,
+  PrivateCollectionIcon,
+} from "outline-icons";
+import { observer } from "mobx-react";
+import { getLuminance } from "polished";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
-import CollectionIcon from "~/components/Icons/CollectionIcon";
+import Icon from "@shared/components/Icon";
+import { colorPalette } from "@shared/utils/collections";
 import type { Option } from "~/components/InputSelect";
 import { InputSelect } from "~/components/InputSelect";
 import useStores from "~/hooks/useStores";
@@ -12,74 +19,112 @@ type DefaultCollectionInputSelectProps = {
   defaultCollectionId: string | null;
 };
 
-const DefaultCollectionInputSelect = ({
-  onSelectCollection,
-  defaultCollectionId,
-}: DefaultCollectionInputSelectProps) => {
-  const { t } = useTranslation();
-  const { collections } = useStores();
-  const [fetching, setFetching] = useState(false);
-  const [fetchError, setFetchError] = useState();
+const DefaultCollectionInputSelect = observer(
+  ({
+    onSelectCollection,
+    defaultCollectionId,
+  }: DefaultCollectionInputSelectProps) => {
+    const { t } = useTranslation();
+    const { collections, ui } = useStores();
+    const [fetching, setFetching] = useState(false);
+    const [fetchError, setFetchError] = useState();
 
-  React.useEffect(() => {
-    async function fetchData() {
-      if (!collections.isLoaded && !fetching && !fetchError) {
-        try {
-          setFetching(true);
-          await collections.fetchPage({
-            limit: 100,
-          });
-        } catch (error) {
-          toast.error(
-            t("Collections could not be loaded, please reload the app")
-          );
-          setFetchError(error);
-        } finally {
-          setFetching(false);
+    React.useEffect(() => {
+      async function fetchData() {
+        if (!collections.isLoaded && !fetching && !fetchError) {
+          try {
+            setFetching(true);
+            await collections.fetchPage({
+              limit: 100,
+            });
+          } catch (error) {
+            toast.error(
+              t("Collections could not be loaded, please reload the app")
+            );
+            setFetchError(error);
+          } finally {
+            setFetching(false);
+          }
         }
       }
-    }
-    void fetchData();
-  }, [fetchError, t, fetching, collections]);
+      void fetchData();
+    }, [fetchError, t, fetching, collections]);
 
-  const options: Option[] = React.useMemo(
-    () =>
-      collections.nonPrivate.reduce(
-        (acc, collection) => [
+    if (fetching) {
+      return null;
+    }
+
+    const isDark = ui.resolvedTheme === "dark";
+
+    // Eagerly resolve collection icon properties within this observer context
+    // to avoid MobX warnings when Radix Select clones elements for the trigger.
+    const options: Option[] = collections.nonPrivate.reduce(
+      (acc, collection) => {
+        const collectionIcon = collection.icon;
+        const rawColor = collection.color ?? colorPalette[0];
+
+        let icon: React.ReactElement;
+        if (!collectionIcon || collectionIcon === "collection") {
+          const color =
+            isDark && rawColor !== "currentColor"
+              ? getLuminance(rawColor) > 0.09
+                ? rawColor
+                : "currentColor"
+              : rawColor;
+          const Component = collection.isPrivate
+            ? PrivateCollectionIcon
+            : CollectionIconComponent;
+          icon = <Component color={color} />;
+        } else {
+          let color = rawColor;
+          if (color !== "currentColor") {
+            if (isDark) {
+              color = getLuminance(color) > 0.09 ? color : "currentColor";
+            } else {
+              color = getLuminance(color) < 0.9 ? color : "currentColor";
+            }
+          }
+          icon = (
+            <Icon
+              value={collectionIcon}
+              color={color}
+              initial={collection.initial}
+              forceColor
+            />
+          );
+        }
+
+        return [
           ...acc,
           {
-            type: "item",
+            type: "item" as const,
             label: collection.name,
             value: collection.id,
-            icon: <CollectionIcon collection={collection} />,
+            icon,
           },
-        ],
-        [
-          {
-            type: "item",
-            label: t("Home"),
-            value: "home",
-            icon: <HomeIcon />,
-          },
-        ] satisfies Option[]
-      ),
-    [collections.nonPrivate, t]
-  );
+        ];
+      },
+      [
+        {
+          type: "item",
+          label: t("Home"),
+          value: "home",
+          icon: <HomeIcon />,
+        },
+      ] satisfies Option[]
+    );
 
-  if (fetching) {
-    return null;
+    return (
+      <InputSelect
+        options={options}
+        value={defaultCollectionId ?? "home"}
+        onChange={onSelectCollection}
+        label={t("Start view")}
+        hideLabel
+        short
+      />
+    );
   }
-
-  return (
-    <InputSelect
-      options={options}
-      value={defaultCollectionId ?? "home"}
-      onChange={onSelectCollection}
-      label={t("Start view")}
-      hideLabel
-      short
-    />
-  );
-};
+);
 
 export default DefaultCollectionInputSelect;

app/components/Divider.ts

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

app/components/DocumentBreadcrumb.tsx

@@ -1,17 +1,22 @@
 import { observer } from "mobx-react";
-import { ArchiveIcon, GoToIcon, ShapesIcon, TrashIcon } from "outline-icons";
+import { ArchiveIcon, GoToIcon, TrashIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 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";
-import { archivePath, settingsPath, trashPath } from "~/utils/routeHelpers";
+import { archivePath, trashPath } from "~/utils/routeHelpers";
 import { createInternalLinkAction } from "~/actions";
 import { ActiveDocumentSection } from "~/actions/sections";
 
@@ -68,14 +73,9 @@ function DocumentBreadcrumb(
         to: archivePath(),
       }),
       createInternalLinkAction({
-        name: t("Templates"),
-        section: ActiveDocumentSection,
-        icon: <ShapesIcon />,
-        visible: document.template,
-        to: settingsPath("templates"),
-      }),
-      createInternalLinkAction({
-        name: collection?.name,
+        name: collection ? (
+          <CollectionName collection={collection} />
+        ) : undefined,
         section: ActiveDocumentSection,
         icon: collection ? (
           <CollectionIcon collection={collection} expanded />
@@ -97,17 +97,14 @@ function DocumentBreadcrumb(
       ...path.map((node) => {
         const title = node.title || t("Untitled");
         return createInternalLinkAction({
-          name: node.icon ? (
-            <>
-              <StyledIcon
-                value={node.icon}
-                color={node.color}
-                initial={node.title.charAt(0).toUpperCase()}
-              />{" "}
-              {title}
-            </>
-          ) : (
-            title
+          name: (
+            <DocumentName
+              documentId={node.id}
+              collection={collection}
+              icon={node.icon}
+              color={node.color}
+              title={title}
+            />
           ),
           section: ActiveDocumentSection,
           to: {
@@ -176,6 +173,75 @@ 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;
 `;

app/components/DocumentExplorer/Components.tsx

@@ -0,0 +1,17 @@
+import styled from "styled-components";
+import Flex from "../Flex";
+
+export const FlexContainer = styled(Flex)`
+  margin-left: -24px;
+  margin-right: -24px;
+  margin-bottom: -24px;
+  outline: none;
+`;
+
+export const Footer = styled(Flex)`
+  height: 64px;
+  border-top: 1px solid ${(props) => props.theme.horizontalRule};
+  padding-left: 24px;
+  padding-right: 24px;
+  flex-shrink: 0;
+`;

app/components/DocumentExplorer/DocumentCopy.tsx

@@ -5,13 +5,13 @@ import { toast } from "sonner";
 import styled from "styled-components";
 import type { NavigationNode } from "@shared/types";
 import type Document from "~/models/Document";
-import { FlexContainer, Footer, StyledText } from "~/scenes/DocumentMove";
 import Button from "~/components/Button";
-import DocumentExplorer from "~/components/DocumentExplorer";
+import Switch from "~/components/Switch";
+import Text from "~/components/Text";
 import useCollectionTrees from "~/hooks/useCollectionTrees";
 import useStores from "~/hooks/useStores";
-import Switch from "./Switch";
-import Text from "./Text";
+import { FlexContainer, Footer } from "./Components";
+import DocumentExplorer from "./DocumentExplorer";
 
 type Props = {
   /** The original document to duplicate */
@@ -37,13 +37,8 @@ function DocumentCopy({ document, onSubmit }: Props) {
         : true
     );
 
-    if (document.isTemplate) {
-      return nodes
-        .filter((node) => node.type === "collection")
-        .map((node) => ({ ...node, children: [] }));
-    }
     return nodes;
-  }, [policies, collectionTrees, document.isTemplate]);
+  }, [policies, collectionTrees]);
 
   const copy = async () => {
     if (!selectedPath) {
@@ -80,34 +75,32 @@ function DocumentCopy({ document, onSubmit }: Props) {
         onSelect={selectPath}
         defaultValue={document.parentDocumentId || document.collectionId || ""}
       />
-      {!document.isTemplate && (
-        <OptionsContainer>
-          {document.collectionId && (
-            <Text size="small">
-              <Switch
-                name="publish"
-                label={t("Publish")}
-                labelPosition="right"
-                checked={publish}
-                onChange={setPublish}
-              />
-            </Text>
-          )}
-          {document.publishedAt && document.childDocuments.length > 0 && (
-            <Text size="small">
-              <Switch
-                name="recursive"
-                label={t("Include nested documents")}
-                labelPosition="right"
-                checked={recursive}
-                onChange={setRecursive}
-              />
-            </Text>
-          )}
-        </OptionsContainer>
-      )}
+      <OptionsContainer>
+        {document.collectionId && (
+          <Text size="small">
+            <Switch
+              name="publish"
+              label={t("Publish")}
+              labelPosition="right"
+              checked={publish}
+              onChange={setPublish}
+            />
+          </Text>
+        )}
+        {document.publishedAt && document.childDocuments.length > 0 && (
+          <Text size="small">
+            <Switch
+              name="recursive"
+              label={t("Include nested documents")}
+              labelPosition="right"
+              checked={recursive}
+              onChange={setRecursive}
+            />
+          </Text>
+        )}
+      </OptionsContainer>
       <Footer justify="space-between" align="center" gap={8}>
-        <StyledText type="secondary">
+        <Text ellipsis type="secondary">
           {selectedPath ? (
             <Trans
               defaults="Copy to <em>{{ location }}</em>"
@@ -117,7 +110,7 @@ function DocumentCopy({ document, onSubmit }: Props) {
           ) : (
             t("Select a location to copy")
           )}
-        </StyledText>
+        </Text>
         <Button disabled={!selectedPath || copying} onClick={copy}>
           {copying ? `${t("Copying")}…` : t("Copy")}
         </Button>

app/components/DocumentExplorer/DocumentExplorer.tsx

@@ -12,15 +12,14 @@ 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";
 import type { NavigationNode } from "@shared/types";
 import { isModKey } from "@shared/utils/keyboard";
 import { ancestors, descendants, flattenTree } from "@shared/utils/tree";
-import DocumentExplorerNode from "~/components/DocumentExplorerNode";
-import DocumentExplorerSearchResult from "~/components/DocumentExplorerSearchResult";
+import DocumentExplorerNode from "./DocumentExplorerNode";
+import DocumentExplorerSearchResult from "./DocumentExplorerSearchResult";
 import Flex from "~/components/Flex";
 import CollectionIcon from "~/components/Icons/CollectionIcon";
 import { Outline } from "~/components/Input";
@@ -38,9 +37,39 @@ type Props = {
   items: NavigationNode[];
   /** Automatically expand to and select item with the given id */
   defaultValue?: string;
+  /** Whether to show child documents */
+  showDocuments?: boolean;
 };
 
-function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
+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,
+  items,
+  defaultValue,
+  showDocuments,
+}: Props) {
   const isMobile = useMobile();
   const { collections, documents } = useStores();
   const { t } = useTranslation();
@@ -59,8 +88,6 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
       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) {
@@ -83,9 +110,6 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
   );
   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"], {
@@ -136,24 +160,18 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
         setTimeout(() => listRef.current?.scrollToItem(index, "center"), 50);
       }
     }
-  }, [defaultValue, selectedNode, nodes]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [defaultValue]);
   const baseDepth = nodes.reduce(
     (min, node) => (node.depth ? Math.min(min, node.depth) : min),
     Infinity
   );
-  const normalizedBaseDepth = baseDepth === Infinity ? 0 : baseDepth;
+  const normalizedBaseDepth =
+    (baseDepth === Infinity ? 0 : baseDepth) + (showDocuments ? 0 : 1);
 
-  const scrollNodeIntoView = React.useCallback(
-    (node: number) => {
-      if (itemRefs[node] && itemRefs[node].current) {
-        scrollIntoView(itemRefs[node].current as HTMLSpanElement, {
-          behavior: "auto",
-          block: "center",
-        });
-      }
-    },
-    [itemRefs]
-  );
+  const scrollNodeIntoView = React.useCallback((node: number) => {
+    listRef.current?.scrollToItem(node, "smart");
+  }, []);
 
   const handleSearch = (ev: React.ChangeEvent<HTMLInputElement>) => {
     setSearchTerm(ev.target.value);
@@ -161,16 +179,16 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
 
   const isExpanded = (node: number) => includes(expandedNodes, nodes[node].id);
 
-  const calculateInitialScrollOffset = (itemCount: number) => {
+  const preserveScrollOffset = (itemCount: number) => {
     if (listRef.current) {
       const { height, itemSize } = listRef.current.props;
       const { scrollOffset } = listRef.current.state as {
         scrollOffset: number;
       };
       const itemsHeight = itemCount * itemSize;
-      return itemsHeight < Number(height) ? 0 : scrollOffset;
+      const offset = itemsHeight < Number(height) ? 0 : scrollOffset;
+      setTimeout(() => listRef.current?.scrollTo(offset), 0);
     }
-    return 0;
   };
 
   const collapse = (node: number) => {
@@ -181,8 +199,7 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
 
     // remove children
     const newNodes = filter(nodes, (n) => !includes(descendantIds, n.id));
-    const scrollOffset = calculateInitialScrollOffset(newNodes.length);
-    setInitialScrollOffset(scrollOffset);
+    preserveScrollOffset(newNodes.length);
   };
 
   const expand = (node: number) => {
@@ -191,8 +208,7 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
     // add children
     const newNodes = nodes.slice();
     newNodes.splice(node + 1, 0, ...descendants(nodes[node], 1));
-    const scrollOffset = calculateInitialScrollOffset(newNodes.length);
-    setInitialScrollOffset(scrollOffset);
+    preserveScrollOffset(newNodes.length);
   };
 
   React.useEffect(() => {
@@ -216,7 +232,8 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
   };
 
   const hasChildren = (node: number) =>
-    nodes[node].children.length > 0 || nodes[node].type === "collection";
+    nodes[node].children.length > 0 ||
+    (showDocuments !== false && nodes[node].type === "collection");
 
   const toggleCollapse = (node: number) => {
     if (!hasChildren(node)) {
@@ -378,31 +395,16 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
     }
   };
 
-  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
         ref={inputSearchRef}
         onChange={handleSearch}
-        placeholder={`${t("Search collections & documents")}…`}
+        placeholder={
+          showDocuments
+            ? `${t("Search collections & documents")}…`
+            : `${t("Search collections")}…`
+        }
         autoFocus
       />
       <ListContainer>
@@ -412,14 +414,12 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
               <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}

app/components/DocumentExplorer/DocumentExplorerNode.tsx

@@ -40,10 +40,8 @@ function DocumentExplorerNode(
   ref: React.RefObject<HTMLSpanElement>
 ) {
   const { t } = useTranslation();
-  const OFFSET = 12;
-  const DISCLOSURE = 20;
-
-  const width = depth ? depth * DISCLOSURE + OFFSET : DISCLOSURE;
+  const DISCLOSURE = 24;
+  const width = (depth + (hasChildren ? 2 : 1)) * DISCLOSURE;
 
   return (
     <Node
@@ -54,6 +52,7 @@ function DocumentExplorerNode(
       style={style}
       onPointerMove={onPointerMove}
       role="option"
+      aria-selected={selected}
     >
       <Spacer width={width}>
         {hasChildren && (
@@ -79,7 +78,7 @@ const Title = styled(Text)`
 const StyledDisclosure = styled(Disclosure)`
   position: relative;
   left: auto;
-  margin-top: 2px;
+  margin: 2px 0;
 `;
 
 const Spacer = styled(Flex)<{ width: number }>`

app/components/DocumentExplorer/DocumentExplorerSearchResult.tsx

@@ -1,10 +1,9 @@
 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 "~/components/DocumentExplorerNode";
+import { Node as SearchResult } from "./DocumentExplorerNode";
 import Flex from "~/components/Flex";
 import Text from "~/components/Text";
 
@@ -32,28 +31,15 @@ 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}
       style={style}
       onPointerMove={onPointerMove}
       role="option"
+      aria-selected={selected}
     >
       {icon}
       <Flex>

app/components/DocumentExplorer/DocumentMove.tsx

@@ -2,16 +2,15 @@ import { observer } from "mobx-react";
 import { useState, useMemo } from "react";
 import { useTranslation, Trans } from "react-i18next";
 import { toast } from "sonner";
-import styled from "styled-components";
-import { ellipsis } from "@shared/styles";
 import type { NavigationNode } from "@shared/types";
+import { descendants, flattenTree } from "@shared/utils/tree";
 import type Document from "~/models/Document";
 import Button from "~/components/Button";
-import DocumentExplorer from "~/components/DocumentExplorer";
-import Flex from "~/components/Flex";
 import Text from "~/components/Text";
 import useCollectionTrees from "~/hooks/useCollectionTrees";
 import useStores from "~/hooks/useStores";
+import { FlexContainer, Footer } from "./Components";
+import DocumentExplorer from "./DocumentExplorer";
 
 type Props = {
   document: Document;
@@ -25,13 +24,23 @@ function DocumentMove({ document }: Props) {
   const [selectedPath, selectPath] = useState<NavigationNode | null>(null);
 
   const items = useMemo(() => {
-    // Recursively filter out the document itself and its existing parent doc, if any.
+    // 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.
     const filterSourceDocument = (node: NavigationNode): NavigationNode => ({
       ...node,
       children: node.children
-        ?.filter(
-          (c) => c.id !== document.id && c.id !== document.parentDocumentId
-        )
+        ?.filter((c) => !excludedIds.has(c.id))
         .map(filterSourceDocument),
     });
 
@@ -44,21 +53,8 @@ function DocumentMove({ document }: Props) {
           : true
       );
 
-    // If the document we're moving is a template, only show collections as
-    // move targets.
-    if (document.isTemplate) {
-      return nodes
-        .filter((node) => node.type === "collection")
-        .map((node) => ({ ...node, children: [] }));
-    }
     return nodes;
-  }, [
-    policies,
-    collectionTrees,
-    document.id,
-    document.parentDocumentId,
-    document.isTemplate,
-  ]);
+  }, [policies, collectionTrees, document.id]);
 
   const move = async () => {
     if (!selectedPath) {
@@ -92,7 +88,7 @@ function DocumentMove({ document }: Props) {
     <FlexContainer column>
       <DocumentExplorer items={items} onSubmit={move} onSelect={selectPath} />
       <Footer justify="space-between" align="center" gap={8}>
-        <StyledText type="secondary">
+        <Text ellipsis type="secondary">
           {selectedPath ? (
             <Trans
               defaults="Move to <em>{{ location }}</em>"
@@ -106,7 +102,7 @@ function DocumentMove({ document }: Props) {
           ) : (
             t("Select a location to move")
           )}
-        </StyledText>
+        </Text>
         <Button disabled={!selectedPath || moving} onClick={move}>
           {moving ? `${t("Moving")}…` : t("Move")}
         </Button>
@@ -115,23 +111,4 @@ function DocumentMove({ document }: Props) {
   );
 }
 
-export const FlexContainer = styled(Flex)`
-  margin-left: -24px;
-  margin-right: -24px;
-  margin-bottom: -24px;
-  outline: none;
-`;
-
-export const Footer = styled(Flex)`
-  height: 64px;
-  border-top: 1px solid ${(props) => props.theme.horizontalRule};
-  padding-left: 24px;
-  padding-right: 24px;
-`;
-
-export const StyledText = styled(Text)`
-  ${ellipsis()}
-  margin-bottom: 0;
-`;
-
 export default observer(DocumentMove);

app/components/DocumentExplorer/TemplateMove.tsx

@@ -0,0 +1,87 @@
+import { observer } from "mobx-react";
+import { useState, useMemo } from "react";
+import { useTranslation, Trans } from "react-i18next";
+import { toast } from "sonner";
+import type { NavigationNode } from "@shared/types";
+import type Template from "~/models/Template";
+import Button from "~/components/Button";
+import Text from "~/components/Text";
+import useCollectionTrees from "~/hooks/useCollectionTrees";
+import useStores from "~/hooks/useStores";
+import { FlexContainer, Footer } from "./Components";
+import DocumentExplorer from "./DocumentExplorer";
+
+type Props = {
+  template: Template;
+};
+
+function TemplateMove({ template }: Props) {
+  const { dialogs, policies } = useStores();
+  const { t } = useTranslation();
+  const collectionTrees = useCollectionTrees();
+  const [selectedPath, selectPath] = useState<NavigationNode | null>(null);
+
+  const items = useMemo(
+    () =>
+      collectionTrees
+        .map((node) => ({ ...node, children: [] }))
+        .filter((node) =>
+          node.collectionId
+            ? policies.get(node.collectionId)?.abilities.createDocument
+            : true
+        ),
+    [policies, collectionTrees]
+  );
+
+  const move = async () => {
+    if (!selectedPath) {
+      toast.message(t("Select a location to move"));
+      return;
+    }
+
+    try {
+      const collectionId = (selectedPath.collectionId ??
+        selectedPath.id) as string;
+      await template.save({ collectionId });
+
+      toast.success(t("Template moved"));
+
+      dialogs.closeAllModals();
+    } catch (_err) {
+      toast.error(t("Couldn’t move the template, try again?"));
+    }
+  };
+
+  return (
+    <FlexContainer column>
+      <DocumentExplorer
+        items={items}
+        onSubmit={move}
+        onSelect={selectPath}
+        showDocuments={false}
+      />
+      <Footer justify="space-between" align="center" gap={8}>
+        <Text ellipsis type="secondary">
+          {selectedPath ? (
+            <Trans
+              defaults="Move to <em>{{ location }}</em>"
+              values={{
+                location: selectedPath.title,
+              }}
+              components={{
+                em: <strong />,
+              }}
+            />
+          ) : (
+            t("Select a location to move")
+          )}
+        </Text>
+        <Button disabled={!selectedPath} onClick={move}>
+          {t("Move")}
+        </Button>
+      </Footer>
+    </FlexContainer>
+  );
+}
+
+export default observer(TemplateMove);

app/components/DocumentExplorer/index.ts

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

app/components/DocumentListItem.tsx

@@ -22,6 +22,7 @@ import StarButton, { AnimatedStar } from "~/components/Star";
 import Tooltip from "~/components/Tooltip";
 import useBoolean from "~/hooks/useBoolean";
 import useCurrentUser from "~/hooks/useCurrentUser";
+import useMobile from "~/hooks/useMobile";
 import { useLocationSidebarContext } from "~/hooks/useLocationSidebarContext";
 import DocumentMenu from "~/menus/DocumentMenu";
 import { documentPath } from "~/utils/routeHelpers";
@@ -39,7 +40,6 @@ type Props = {
   showCollection?: boolean;
   showPublished?: boolean;
   showDraft?: boolean;
-  showTemplate?: boolean;
 };
 
 const SEARCH_RESULT_REGEX = /<b\b[^>]*>(.*?)<\/b>/gi;
@@ -59,6 +59,7 @@ function DocumentListItem(
   const { userMemberships, groupMemberships } = useStores();
   const locationSidebarContext = useLocationSidebarContext();
   const [menuOpen, handleMenuOpen, handleMenuClose] = useBoolean();
+  const isMobile = useMobile();
 
   let itemRef: React.Ref<HTMLAnchorElement> =
     React.useRef<HTMLAnchorElement>(null);
@@ -75,7 +76,6 @@ function DocumentListItem(
     showCollection,
     showPublished,
     showDraft = true,
-    showTemplate,
     highlight,
     context,
     ...rest
@@ -83,7 +83,7 @@ function DocumentListItem(
   const queryIsInTitle =
     !!highlight &&
     !!document.title.toLowerCase().includes(highlight.toLowerCase());
-  const canStar = !document.isArchived && !document.isTemplate;
+  const canStar = !document.isArchived;
 
   const isShared = !!(
     userMemberships.getByDocumentId(document.id) ||
@@ -101,11 +101,10 @@ function DocumentListItem(
   return (
     <ActionContextProvider
       value={{
-        activeDocumentId: document.id,
-        activeCollectionId:
-          !isShared && document.collectionId
-            ? document.collectionId
-            : undefined,
+        activeModels: [
+          document,
+          ...(!isShared && document.collection ? [document.collection] : []),
+        ],
       }}
     >
       <ContextMenu
@@ -121,6 +120,9 @@ function DocumentListItem(
           $menuOpen={menuOpen}
           to={{
             pathname: documentPath(document),
+            search: highlight
+              ? `?q=${encodeURIComponent(highlight)}`
+              : undefined,
             state: {
               title: document.titleWithDefault,
               sidebarContext,
@@ -159,10 +161,7 @@ function DocumentListItem(
                     <Badge>{t("Draft")}</Badge>
                   </Tooltip>
                 )}
-                {canStar && <StarButton document={document} />}
-                {document.isTemplate && showTemplate && (
-                  <Badge primary>{t("Template")}</Badge>
-                )}
+                {canStar && !isMobile && <StarButton document={document} />}
               </Heading>
 
               {!queryIsInTitle && (

app/components/DocumentMeta.tsx

@@ -52,7 +52,6 @@ const DocumentMeta: React.FC<Props> = ({
     isDraft,
     lastViewedAt,
     isTasks,
-    isTemplate,
   } = document;
 
   // Prevent meta information from displaying if updatedBy is not available.
@@ -142,7 +141,7 @@ const DocumentMeta: React.FC<Props> = ({
   const nestedDocumentsCount = collection
     ? collection.getChildrenForDocument(document.id).length
     : 0;
-  const canShowProgressBar = isTasks && !isTemplate;
+  const canShowProgressBar = isTasks;
 
   const timeSinceNow = () => {
     if (isDraft || !showLastViewed) {
@@ -170,7 +169,7 @@ const DocumentMeta: React.FC<Props> = ({
   };
 
   return (
-    <Container align="center" rtl={document.dir === "rtl"} {...rest} dir="ltr">
+    <Container align="center" $rtl={document.dir === "rtl"} {...rest} dir="ltr">
       {to ? (
         <Link to={to} replace={replace}>
           {content}
@@ -219,8 +218,8 @@ const Strong = styled.strong`
   font-weight: 550;
 `;
 
-const Container = styled(Flex)<{ rtl?: boolean }>`
-  justify-content: ${(props) => (props.rtl ? "flex-end" : "flex-start")};
+const Container = styled(Flex)<{ $rtl?: boolean }>`
+  justify-content: ${(props) => (props.$rtl ? "flex-end" : "flex-start")};
   color: ${s("textTertiary")};
   font-size: 13px;
   white-space: nowrap;

app/components/Editor.tsx

@@ -266,7 +266,7 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
       <>
         {paragraphs ? (
           <EditorContainer
-            rtl={props.dir === "rtl"}
+            $rtl={props.dir === "rtl"}
             grow={props.grow}
             style={props.style}
             editorStyle={props.editorStyle}

app/components/FilterOptions.tsx

@@ -26,8 +26,10 @@ type Props = {
   className?: string;
   onSelect: (key: string | null | undefined) => void;
   showFilter?: boolean;
+  showIcons?: boolean;
   fetchQuery?: (options: FetchPageParams) => Promise<PaginatedItem[]>;
   fetchQueryOptions?: Record<string, string>;
+  disclosure?: boolean;
 };
 
 const FilterOptions = ({
@@ -36,8 +38,10 @@ const FilterOptions = ({
   className,
   onSelect,
   showFilter,
+  showIcons = true,
   fetchQuery,
   fetchQueryOptions,
+  disclosure = true,
   ...rest
 }: Props) => {
   const { t } = useTranslation();
@@ -58,7 +62,7 @@ const FilterOptions = ({
       <MenuButton
         key={option.key}
         icon={
-          option.icon ? (
+          option.icon && showIcons ? (
             <MenuIconWrapper aria-hidden>{option.icon}</MenuIconWrapper>
           ) : undefined
         }
@@ -70,7 +74,7 @@ const FilterOptions = ({
         selected={selectedKeys.includes(option.key)}
       />
     ),
-    [onSelect, selectedKeys]
+    [onSelect, showIcons, selectedKeys]
   );
 
   const handleFilter = React.useCallback(
@@ -181,8 +185,8 @@ const FilterOptions = ({
           <StyledButton
             className={className}
             icon={selectedItems[0]?.key && selectedItems[0]?.icon}
+            disclosure={disclosure}
             neutral
-            disclosure
           >
             {selectedItems.length ? selectedLabel : defaultLabel}
           </StyledButton>

app/components/Header.tsx

@@ -88,6 +88,7 @@ function Header(
           <Breadcrumbs ref={setBreadcrumbRef}>
             {hasMobileSidebar && (
               <MobileMenuButton
+                haptic="light"
                 onClick={ui.toggleMobileSidebar}
                 icon={<MenuIcon />}
                 neutral

app/components/HoverPreview/Components.tsx

@@ -43,9 +43,9 @@ export const Info = styled(StyledText).attrs(() => ({
   white-space: nowrap;
 `;
 
-export const Description = styled(StyledText)`
+export const Description = styled(StyledText)<{ $margin?: string }>`
   ${sharedVars}
-  margin-top: 0.5em;
+  margin-top: ${(props) => props.$margin ?? "0.5em"};
   line-height: var(--line-height);
   max-height: calc(var(--line-height) * ${NUMBER_OF_LINES});
   overflow: hidden;
@@ -64,8 +64,6 @@ 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;
 
@@ -75,8 +73,8 @@ export const Label = styled(Text).attrs({ size: "xsmall", weight: "bold" })<{
     left: 8px;
     top: 50%;
     transform: translateY(-50%);
-    width: 6px;
-    height: 6px;
+    width: 8px;
+    height: 8px;
     border-radius: 50%;
     background-color: ${(props) =>
       props.color || props.theme.backgroundSecondary};

app/components/HoverPreview/HoverPreview.tsx

@@ -17,6 +17,7 @@ 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;
@@ -192,6 +193,18 @@ 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}

app/components/HoverPreview/HoverPreviewIssue.tsx

@@ -3,9 +3,11 @@ import { Trans } from "react-i18next";
 import styled from "styled-components";
 import { Backticks } from "@shared/components/Backticks";
 import { IssueStatusIcon } from "@shared/components/IssueStatusIcon";
+import { richExtensions } from "@shared/editor/nodes";
 import type { UnfurlResourceType, UnfurlResponse } from "@shared/types";
 import { IntegrationService } from "@shared/types";
 import { Avatar } from "~/components/Avatar";
+import Editor from "~/components/Editor";
 import Flex from "~/components/Flex";
 import Text from "../Text";
 import Time from "../Time";
@@ -28,9 +30,11 @@ const HoverPreviewIssue = React.forwardRef(function HoverPreviewIssue_(
   const authorName = author.name;
   const urlObj = new URL(url);
   const service =
-    urlObj.hostname === "github.com"
-      ? IntegrationService.GitHub
-      : IntegrationService.Linear;
+    urlObj.hostname === "linear.app"
+      ? IntegrationService.Linear
+      : urlObj.hostname === "github.com"
+        ? IntegrationService.GitHub
+        : IntegrationService.GitLab;
 
   return (
     <Preview as="a" href={url} target="_blank" rel="noopener noreferrer">
@@ -58,9 +62,20 @@ const HoverPreviewIssue = React.forwardRef(function HoverPreviewIssue_(
                   </Trans>
                 </Info>
               </Flex>
-              <Description>{description}</Description>
+              {description && (
+                <Description as="div">
+                  <React.Suspense fallback={<div />}>
+                    <Editor
+                      extensions={richExtensions}
+                      defaultValue={description}
+                      embedsDisabled
+                      readOnly
+                    />
+                  </React.Suspense>
+                </Description>
+              )}
 
-              <Flex wrap>
+              <Flex wrap gap={6} style={{ marginTop: 8 }}>
                 {labels.map((label, index) => (
                   <Label key={index} color={label.color}>
                     {label.name}

app/components/HoverPreview/HoverPreviewProject.tsx

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

app/components/HoverPreview/HoverPreviewPullRequest.tsx

@@ -3,8 +3,10 @@ import { Trans } from "react-i18next";
 import styled from "styled-components";
 import { Backticks } from "@shared/components/Backticks";
 import { PullRequestIcon } from "@shared/components/PullRequestIcon";
+import { richExtensions } from "@shared/editor/nodes";
 import type { UnfurlResourceType, UnfurlResponse } from "@shared/types";
 import { Avatar } from "~/components/Avatar";
+import Editor from "~/components/Editor";
 import Flex from "~/components/Flex";
 import Text from "../Text";
 import Time from "../Time";
@@ -48,7 +50,18 @@ const HoverPreviewPullRequest = React.forwardRef(
                     </Trans>
                   </Info>
                 </Flex>
-                <Description>{description}</Description>
+                {description && (
+                  <Description as="div">
+                    <React.Suspense fallback={<div />}>
+                      <Editor
+                        extensions={richExtensions}
+                        defaultValue={description}
+                        embedsDisabled
+                        readOnly
+                      />
+                    </React.Suspense>
+                  </Description>
+                )}
               </Flex>
             </CardContent>
           </Card>

app/components/IconPicker/components/IconColorPicker.tsx

@@ -1,5 +1,4 @@
 import * as React from "react";
-import debounce from "lodash/debounce";
 import styled from "styled-components";
 import { s } from "@shared/styles";
 import { colorPalette } from "@shared/utils/collections";
@@ -13,37 +12,23 @@ type Props = {
   onSelect: (color: string) => void;
 };
 
-const ColorPicker = ({ activeColor, onSelect }: Props) => {
+const IconColorPicker = ({ activeColor, onSelect }: Props) => {
   const [selectedColor, setSelectedColor] = React.useState(activeColor);
   const isBuiltInColor = colorPalette.includes(selectedColor);
   const color = isBuiltInColor ? undefined : selectedColor;
 
-  const debouncedOnSelect = React.useMemo(
-    () =>
-      debounce((color: string) => {
-        onSelect(color);
-      }, 250),
-    [onSelect]
-  );
-
-  React.useEffect(
-    () => () => {
-      debouncedOnSelect.cancel();
-    },
-    [debouncedOnSelect]
-  );
-
   React.useEffect(() => {
     setSelectedColor(activeColor);
   }, [activeColor]);
 
   const handleSelect = (color: string) => {
     setSelectedColor(color);
-    debouncedOnSelect(color);
+    onSelect(color);
   };
 
   return (
-    <BuiltinColors activeColor={selectedColor} onClick={handleSelect}>
+    <Container justify="space-between" align="center" auto>
+      <PresetColors activeColor={selectedColor} onClick={handleSelect} />
       <Divider />
       <SwatchButton
         color={color}
@@ -51,7 +36,7 @@ const ColorPicker = ({ activeColor, onSelect }: Props) => {
         onChange={handleSelect}
         pickerInModal
       />
-    </BuiltinColors>
+    </Container>
   );
 };
 
@@ -61,18 +46,14 @@ const Divider = styled.div`
   background-color: ${s("inputBorder")};
 `;
 
-const BuiltinColors = ({
+const PresetColors = ({
   activeColor,
   onClick,
-  className,
-  children,
 }: {
   activeColor: string;
   onClick: (color: string) => void;
-  className?: string;
-  children?: React.ReactNode;
 }) => (
-  <Container className={className} justify="space-between" align="center" auto>
+  <>
     {colorPalette.map((color) => (
       <ColorButton
         key={color}
@@ -81,8 +62,7 @@ const BuiltinColors = ({
         onClick={() => onClick(color)}
       />
     ))}
-    {children}
-  </Container>
+  </>
 );
 
 const Container = styled(Flex)`
@@ -91,4 +71,4 @@ const Container = styled(Flex)`
   border-bottom: 1px solid ${s("inputBorder")};
 `;
 
-export default ColorPicker;
+export default IconColorPicker;

app/components/IconPicker/components/IconPanel.tsx

@@ -6,7 +6,7 @@ import { IconLibrary } from "@shared/utils/IconLibrary";
 import Flex from "~/components/Flex";
 import InputSearch from "~/components/InputSearch";
 import { DisplayCategory } from "../utils";
-import ColorPicker from "./ColorPicker";
+import IconColorPicker from "./IconColorPicker";
 import type { DataNode } from "./GridTemplate";
 import GridTemplate from "./GridTemplate";
 import { useIconState } from "../useIconState";
@@ -122,7 +122,7 @@ const IconPanel = ({
           onChange={handleFilter}
         />
       </InputSearchContainer>
-      <ColorPicker
+      <IconColorPicker
         width={panelWidth}
         activeColor={color}
         onSelect={onColorChange}

app/components/Icons/CircleIcon.tsx

@@ -13,17 +13,35 @@ export default function CircleIcon({
   retainColor,
   ...rest
 }: Props) {
+  const isGradient = color === "rainbow";
+  const fillValue = isGradient ? "url(#circleIconGradient)" : color;
+
   return (
     <svg
-      fill={color}
+      fill={fillValue}
       width={size}
       height={size}
       viewBox="0 0 24 24"
       version="1.1"
-      style={retainColor ? { fill: color } : undefined}
+      style={retainColor ? { fill: fillValue } : undefined}
       {...rest}
     >
-      <circle xmlns="http://www.w3.org/2000/svg" cx="12" cy="12" r="8" />
+      {isGradient && (
+        <defs>
+          <linearGradient
+            id="circleIconGradient"
+            x1="0%"
+            y1="0%"
+            x2="100%"
+            y2="100%"
+          >
+            <stop offset="0%" stopColor="#ff5858" />
+            <stop offset="50%" stopColor="#fbcc34" />
+            <stop offset="100%" stopColor="#00c6ff" />
+          </linearGradient>
+        </defs>
+      )}
+      <circle cx="12" cy="12" r="8" />
     </svg>
   );
 }

app/components/Icons/DottedCircleIcon.tsx

@@ -0,0 +1,9 @@
+import styled from "styled-components";
+import CircleIcon from "./CircleIcon";
+
+export const DottedCircleIcon = styled(CircleIcon)`
+  circle {
+    stroke: ${(props) => props.theme.textSecondary};
+    stroke-dasharray: 2, 2;
+  }
+`;

app/components/Input.tsx

@@ -95,7 +95,7 @@ const IconWrapper = styled.span`
 export const Outline = styled(Flex)<{
   margin?: string | number;
   hasError?: boolean;
-  focused?: boolean;
+  $focused?: boolean;
 }>`
   flex: 1;
   margin: ${(props) =>
@@ -106,7 +106,7 @@ export const Outline = styled(Flex)<{
   border-color: ${(props) =>
     props.hasError
       ? props.theme.danger
-      : props.focused
+      : props.$focused
         ? props.theme.inputBorderFocused
         : props.theme.inputBorder};
   border-radius: 4px;
@@ -224,7 +224,7 @@ function Input(
           ) : (
             wrappedLabel
           ))}
-        <Outline focused={focused} margin={margin}>
+        <Outline $focused={focused} margin={margin}>
           {prefix}
           {icon && <IconWrapper>{icon}</IconWrapper>}
           {type === "textarea" ? (

app/components/Layout.tsx

@@ -1,3 +1,4 @@
+import { AnimatePresence } from "framer-motion";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { Helmet } from "react-helmet-async";
@@ -7,6 +8,7 @@ import breakpoint from "styled-components-breakpoint";
 import { s } from "@shared/styles";
 import Flex from "~/components/Flex";
 import { LoadingIndicatorBar } from "~/components/LoadingIndicator";
+import { useRightSidebarContent } from "~/components/RightSidebarContext";
 import SkipNavContent from "~/components/SkipNavContent";
 import SkipNavLink from "~/components/SkipNavLink";
 import env from "~/env";
@@ -19,16 +21,15 @@ type Props = {
   title?: string;
   /** Left sidebar content. */
   sidebar?: React.ReactNode;
-  /** Right sidebar content. */
-  sidebarRight?: React.ReactNode;
 };
 
 const Layout = React.forwardRef(function Layout_(
-  { title, children, sidebar, sidebarRight }: Props,
+  { title, children, sidebar }: Props,
   ref: React.RefObject<HTMLDivElement>
 ) {
   const { ui } = useStores();
   const sidebarCollapsed = !sidebar || ui.sidebarIsClosed;
+  const sidebarRight = useRightSidebarContent();
 
   return (
     <Container column auto ref={ref}>
@@ -61,7 +62,7 @@ const Layout = React.forwardRef(function Layout_(
           {children}
         </Content>
 
-        {sidebarRight}
+        <AnimatePresence initial={false}>{sidebarRight}</AnimatePresence>
       </Container>
     </Container>
   );

app/components/LazyLoad.ts

@@ -9,39 +9,44 @@ 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 component (eg: () => import('./MyComponent'))
- * @param options Optional configuration for retry behavior
- * @returns An object containing the lazy Component and a preload function
+ * @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.
  *
  * @example
  * ```typescript
+ * // Default export
  * const MyComponent = createLazyComponent(() => import('./MyComponent'));
  *
- * function App() {
- *   return (
- *     <Suspense fallback={<div>Loading...</div>}>
- *       <MyComponent.Component />
- *     </Suspense>
- *   );
- * }
- *
- * // Preload when needed:
- * MyComponent.preload();
+ * // Named export
+ * const MyComponent = createLazyComponent(() => import('./MyComponent'), {
+ *   exportName: 'MyComponent',
+ * });
  * ```
  */
 export function createLazyComponent<T extends React.ComponentType<any>>(
-  factory: () => Promise<{ default: T }>,
+  factory: () => Promise<Record<string, T>>,
   options: LazyLoadOptions = {}
 ): LazyComponent<T> {
-  const { retries, interval } = options;
+  const { retries, interval, exportName } = options;
+
+  const wrappedFactory = exportName
+    ? () =>
+        factory().then((m) => ({
+          default: m[exportName],
+        }))
+    : (factory as () => Promise<{ default: T }>);
 
   return {
-    Component: lazyWithRetry(factory, retries, interval),
-    preload: factory,
+    Component: lazyWithRetry(wrappedFactory, retries, interval),
+    preload: wrappedFactory,
   };
 }

app/components/Lightbox.tsx

@@ -97,6 +97,8 @@ type Props = {
   onUpdate: (activeImage: LightboxImage | null) => void;
   /** Callback triggered when Lightbox closes */
   onClose: () => void;
+  /** Whether the editor is read only */
+  readOnly?: boolean;
 };
 
 const ZoomPanPinchContext = createContext({ isImagePanning: false });
@@ -216,7 +218,7 @@ function usePanning() {
   };
 }
 
-function Lightbox({ images, activeImage, onUpdate, onClose }: Props) {
+function Lightbox({ images, activeImage, onUpdate, onClose, readOnly }: Props) {
   const isIdle = useIdle(3 * Second.ms);
   const { t } = useTranslation();
   const imgRef = useRef<HTMLImageElement | null>(null);
@@ -571,8 +573,10 @@ function Lightbox({ images, activeImage, onUpdate, onClose }: Props) {
   };
 
   const svgDataURLToBlob = (dataURL: string) => {
-    // Match the SVG data URL format
-    const match = dataURL.match(/^data:image\/svg\+xml,(.*)$/i);
+    // Match the SVG data URL format (with or without charset)
+    const match = dataURL.match(
+      /^data:image\/svg\+xml(?:;charset=utf-8)?,(.*)$/i
+    );
     if (!match) {
       return;
     }
@@ -769,7 +773,8 @@ function Lightbox({ images, activeImage, onUpdate, onClose }: Props) {
               />
             </Tooltip>
             {activeImage.source === ImageSource.DiagramsNet &&
-              !Desktop.isElectron() && (
+              !Desktop.isElectron() &&
+              !readOnly && (
                 <Tooltip content={t("Edit diagram")} placement="bottom">
                   <ActionButton
                     tabIndex={-1}

app/components/Menu/ContextMenu.tsx

@@ -3,6 +3,7 @@ import { actionToMenuItem } from "~/actions";
 import useActionContext from "~/hooks/useActionContext";
 import useMobile from "~/hooks/useMobile";
 import type { ActionVariant, ActionWithChildren } from "~/types";
+import { preventDefault } from "~/utils/events";
 import { toMenuItems } from "./transformer";
 import { observer } from "mobx-react";
 import { useComputed } from "~/hooks/useComputed";
@@ -61,11 +62,6 @@ export const ContextMenu = observer(
       }
     }, []);
 
-    const handleCloseAutoFocus = React.useCallback(
-      (e: Event) => e.preventDefault(),
-      []
-    );
-
     if (isMobile || !action || menuItems.length === 0) {
       return <>{children}</>;
     }
@@ -80,7 +76,7 @@ export const ContextMenu = observer(
             aria-label={ariaLabel}
             onAnimationStart={disablePointerEvents}
             onAnimationEnd={enablePointerEvents}
-            onCloseAutoFocus={handleCloseAutoFocus}
+            onCloseAutoFocus={preventDefault}
           >
             {content}
           </MenuContent>

app/components/Menu/DropdownMenu.tsx

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

app/components/Menu/transformer.tsx

@@ -27,6 +27,7 @@ export function toMenuItems(items: MenuItem[]) {
       item.type !== "separator" &&
       item.type !== "heading" &&
       item.type !== "group" &&
+      item.type !== "custom" &&
       !!item.icon
   );
 
@@ -84,6 +85,12 @@ export function toMenuItems(items: MenuItem[]) {
           return null;
         }
 
+        const preventCloseHandler = (ev: Event) => {
+          if (item.preventCloseCondition && item.preventCloseCondition()) {
+            ev.preventDefault();
+          }
+        };
+
         return (
           <SubMenu key={`${item.type}-${item.title}-${index}`}>
             <SubMenuTrigger
@@ -91,7 +98,10 @@ export function toMenuItems(items: MenuItem[]) {
               icon={icon}
               disabled={item.disabled}
             />
-            <SubMenuContent ref={parentRef}>
+            <SubMenuContent
+              ref={parentRef}
+              onFocusOutside={preventCloseHandler}
+            >
               <MouseSafeArea parentRef={parentRef} />
               {submenuItems}
             </SubMenuContent>
@@ -118,6 +128,9 @@ export function toMenuItems(items: MenuItem[]) {
       case "separator":
         return <MenuSeparator key={`${item.type}-${index}`} />;
 
+      case "custom":
+        return <div key={`${item.type}-${index}`}>{item.content}</div>;
+
       default:
         return null;
     }
@@ -140,6 +153,7 @@ export function toMobileMenuItems(
       item.type !== "separator" &&
       item.type !== "heading" &&
       item.type !== "group" &&
+      item.type !== "custom" &&
       !!item.icon
   );
 
@@ -249,6 +263,9 @@ export function toMobileMenuItems(
       case "separator":
         return <Components.MenuSeparator key={`${item.type}-${index}`} />;
 
+      case "custom":
+        return <div key={`${item.type}-${index}`}>{item.content}</div>;
+
       default:
         return null;
     }

app/components/Modal.tsx

@@ -16,6 +16,7 @@ import { fadeAndScaleIn, fadeIn } from "~/styles/animations";
 import Desktop from "~/utils/Desktop";
 import ErrorBoundary from "./ErrorBoundary";
 import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
+import Tooltip from "./Tooltip";
 
 type Props = {
   children?: React.ReactNode;
@@ -93,9 +94,11 @@ const Modal: React.FC<Props> = ({
                 </DesktopContent>
                 <Header>
                   {title && <Text size="large">{title}</Text>}
-                  <NudeButton onClick={onRequestClose}>
-                    <CloseIcon />
-                  </NudeButton>
+                  <Tooltip content={t("Close")} shortcut="Esc">
+                    <NudeButton onClick={onRequestClose}>
+                      <CloseIcon />
+                    </NudeButton>
+                  </Tooltip>
                 </Header>
               </Centered>
             </Wrapper>

app/components/Notice.tsx

@@ -39,7 +39,7 @@ const Container = styled(Text)`
   border-radius: 4px;
   position: relative;
   font-size: 14px;
-  margin: 1em 0 0;
+  margin: 1em 0;
 
   svg {
     flex-shrink: 0;

app/components/NotificationBadge.tsx

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

app/components/Notifications/NotificationListItem.tsx

@@ -103,6 +103,7 @@ const StyledLink = styled(Link)`
 const StyledCommentEditor = styled(CommentEditor)`
   font-size: 0.9em;
   margin-top: 4px;
+  pointer-events: none;
 
   ${truncateMultiline(3)}
 `;

app/components/Notifications/Notifications.tsx

@@ -8,7 +8,6 @@ import Notification, { type NotificationFilter } from "~/models/Notification";
 import { markNotificationsAsRead } from "~/actions/definitions/notifications";
 import useStores from "~/hooks/useStores";
 import NotificationMenu from "~/menus/NotificationMenu";
-import Desktop from "~/utils/Desktop";
 import Empty from "../Empty";
 import ErrorBoundary from "../ErrorBoundary";
 import Flex from "../Flex";
@@ -21,6 +20,55 @@ import Tooltip from "../Tooltip";
 import NotificationListItem from "./NotificationListItem";
 import { HStack } from "../primitives/HStack";
 
+/**
+ * Hook that returns filtered notifications in a stable order. The order is
+ * snapshotted on first call (when the popover mounts) so that toggling
+ * read/unread does not cause items to jump positions. Notifications that
+ * arrive after the snapshot are prepended at the top.
+ *
+ * @param active - the current list of active notifications.
+ * @param filter - the selected notification filter category.
+ * @returns filtered notifications in snapshot order.
+ */
+function useStableOrderedNotifications(
+  active: Notification[],
+  filter: NotificationFilter
+) {
+  const orderSnapshotRef = React.useRef<string[] | null>(null);
+
+  return React.useMemo(() => {
+    if (orderSnapshotRef.current === null) {
+      orderSnapshotRef.current = active.map((n) => n.id);
+    }
+
+    const filtered =
+      filter === "all"
+        ? active
+        : active.filter((notification) =>
+            Notification.filterCategories[filter].includes(notification.event)
+          );
+
+    const snapshot = orderSnapshotRef.current;
+    const orderMap = new Map(snapshot.map((id, index) => [id, index]));
+    const inSnapshot: Notification[] = [];
+    const newItems: Notification[] = [];
+
+    for (const notification of filtered) {
+      if (orderMap.has(notification.id)) {
+        inSnapshot.push(notification);
+      } else {
+        newItems.push(notification);
+      }
+    }
+
+    inSnapshot.sort(
+      (a, b) => (orderMap.get(a.id) ?? 0) - (orderMap.get(b.id) ?? 0)
+    );
+
+    return [...newItems, ...inSnapshot];
+  }, [active, filter]);
+}
+
 type Props = {
   /** Callback when the notification panel wants to close. */
   onRequestClose: () => void;
@@ -50,36 +98,12 @@ function Notifications(
     [t]
   );
 
-  const filteredNotifications = React.useMemo(() => {
-    if (filter === "all") {
-      return notifications.active;
-    }
+  const filteredNotifications = useStableOrderedNotifications(
+    notifications.active,
+    filter
+  );
 
-    const eventTypes = Notification.filterCategories[filter];
-    return notifications.active.filter((notification) =>
-      eventTypes.includes(notification.event)
-    );
-  }, [notifications.active, filter]);
-
-  // Update the notification count in the dock icon, if possible.
-  React.useEffect(() => {
-    // Account for old versions of the desktop app that don't have the
-    // setNotificationCount method on the bridge.
-    if (Desktop.bridge && "setNotificationCount" in Desktop.bridge) {
-      void Desktop.bridge.setNotificationCount(
-        notifications.approximateUnreadCount
-      );
-    }
-
-    // PWA badging
-    if ("setAppBadge" in navigator) {
-      if (notifications.approximateUnreadCount) {
-        void navigator.setAppBadge(notifications.approximateUnreadCount);
-      } else {
-        void navigator.clearAppBadge();
-      }
-    }
-  }, [notifications.approximateUnreadCount]);
+  const unreadCount = notifications.approximateUnreadCount;
 
   return (
     <ErrorBoundary>
@@ -105,7 +129,7 @@ function Notifications(
               short
               nude
             />
-            {notifications.approximateUnreadCount > 0 && (
+            {unreadCount > 0 && (
               <Tooltip content={t("Mark all as read")}>
                 <Button
                   action={markNotificationsAsRead}

app/components/PaginatedDocumentList.tsx

@@ -49,7 +49,6 @@ const PaginatedDocumentList = React.memo<Props>(function PaginatedDocumentList({
           showParentDocuments={showParentDocuments}
           showCollection={showCollection}
           showPublished={showPublished}
-          showTemplate={showTemplate}
           showDraft={showDraft}
         />
       )}

app/components/Presentation.tsx

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

app/components/RevisionListItem.tsx

@@ -125,7 +125,7 @@ const RevisionListItem = ({ item, document, ...rest }: Props) => {
   }
 
   return (
-    <ActionContextProvider value={{ activeDocumentId: document.id }}>
+    <ActionContextProvider value={{ activeModels: [document] }}>
       <ContextMenu
         action={contextMenuAction}
         ariaLabel={t("Revision options")}

app/components/RightSidebarContext.tsx

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

app/components/SearchActions.ts

@@ -1,4 +1,5 @@
 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";
@@ -14,7 +15,7 @@ interface CacheEntry {
 // Cache configuration
 const cacheTTL = Minute.ms * 5;
 
-export default function SearchActions() {
+function SearchActions() {
   const { searches, documents } = useStores();
 
   // Cache structure: Map of search queries to timestamp of last search
@@ -58,3 +59,5 @@ export default function SearchActions() {
 
   return null;
 }
+
+export default observer(SearchActions);

app/components/SearchListItem.tsx

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

app/components/SearchPopover.tsx

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

app/components/Sharing/Collection/AccessControlList.tsx

@@ -16,15 +16,15 @@ 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";
-import { Separator } from "../components";
+import { Separator, GroupMembersPopover } from "../components";
 import { ListItem } from "../components/ListItem";
 import { Placeholder } from "../components/Placeholder";
 import { PublicAccess } from "./PublicAccess";
 import Flex from "@shared/components/Flex";
+import ButtonLink from "~/components/ButtonLink";
 
 type Props = {
   /** Collection to which team members are supposed to be invited */
@@ -37,10 +37,12 @@ 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 }: Props) => {
+  ({ collection, share, invitedInSession, visible, loading }: Props) => {
     const { memberships, groupMemberships } = useStores();
     const team = useCurrentTeam();
     const can = usePolicy(collection);
@@ -48,35 +50,13 @@ 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 && (membershipLoading || groupMembershipLoading);
-
-    React.useEffect(() => {
-      void fetchMemberships();
-      void fetchGroupMemberships();
-    }, [fetchMemberships, fetchGroupMemberships]);
+    const showLoading = !hasMemberships && loading;
 
     const containerRef = React.useRef<HTMLDivElement | null>(null);
     const publicAccessRef = React.useRef<HTMLDivElement | null>(null);
@@ -174,9 +154,15 @@ export const AccessControlList = observer(
                         />
                       }
                       title={membership.group.name}
-                      subtitle={t("{{ count }} member", {
-                        count: membership.group.memberCount,
-                      })}
+                      subtitle={
+                        <GroupMembersPopover group={membership.group}>
+                          <StyledButtonLink>
+                            {t("{{ count }} member", {
+                              count: membership.group.memberCount,
+                            })}
+                          </StyledButtonLink>
+                        </GroupMembersPopover>
+                      }
                       actions={
                         <div style={{ marginRight: -8 }}>
                           <InputMemberPermissionSelect
@@ -285,6 +271,13 @@ export const AccessControlList = observer(
   }
 );
 
+const StyledButtonLink = styled(ButtonLink)`
+  color: ${s("textTertiary")};
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
 const Wrapper = styled(Flex)`
   flex-direction: column;
 `;

app/components/Sharing/Collection/SharePopover.tsx

@@ -18,6 +18,7 @@ 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";
@@ -35,11 +36,22 @@ 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 }: Props) {
+function SharePopover({
+  collection,
+  visible,
+  onRequestClose,
+  loading: externalLoading,
+}: 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("");
@@ -94,10 +106,12 @@ function SharePopover({ collection, visible, onRequestClose }: Props) {
 
   React.useEffect(() => {
     if (visible) {
-      void collection.share();
+      if (externalLoading === undefined) {
+        preload();
+      }
       setHasRendered(true);
     }
-  }, [collection, visible]);
+  }, [visible, externalLoading, preload]);
 
   React.useEffect(() => {
     if (prevPendingIds && pendingIds.length > prevPendingIds.length) {
@@ -368,6 +382,7 @@ function SharePopover({ collection, visible, onRequestClose }: Props) {
           share={share}
           invitedInSession={invitedInSession}
           visible={visible}
+          loading={loading}
         />
       </div>
     </Wrapper>

app/components/Sharing/Document/AccessControlList.tsx

@@ -4,7 +4,6 @@ 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";
@@ -43,6 +42,8 @@ type Props = {
   onRequestClose: () => void;
   /** Whether the popover is visible. */
   visible: boolean;
+  /** Whether the share data is currently loading. */
+  loading: boolean;
 };
 
 export const AccessControlList = observer(
@@ -53,13 +54,14 @@ 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 { userMemberships, groupMemberships } = useStores();
+    const { groupMemberships } = useStores();
     const collectionSharingDisabled = document.collection?.sharing === false;
     const team = useCurrentTeam();
     const can = usePolicy(document);
@@ -75,36 +77,10 @@ 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 && (groupMembershipLoading || userMembershipLoading);
-
-    React.useEffect(() => {
-      void fetchUserMemberships();
-      void fetchGroupMemberships();
-    }, [fetchUserMemberships, fetchGroupMemberships]);
+    const showLoading = !hasMemberships && loading;
 
     React.useEffect(() => {
       calcMaxHeight();
@@ -119,7 +95,27 @@ export const AccessControlList = observer(
             maxHeight: maxHeight ? maxHeight - publicAccessHeight : undefined,
           }}
         >
-          {collection && canCollection.readDocument ? (
+          {document.isDraft ? (
+            <>
+              <ListItem
+                image={<Avatar model={document.createdBy} />}
+                title={document.createdBy?.name}
+                actions={
+                  <AccessTooltip content={t("Created the document")}>
+                    {t("Can edit")}
+                  </AccessTooltip>
+                }
+              />
+              {showLoading ? (
+                <Placeholder />
+              ) : (
+                <DocumentMemberList
+                  document={document}
+                  invitedInSession={invitedInSession}
+                />
+              )}
+            </>
+          ) : collection && canCollection.readDocument ? (
             <>
               {collection.permission ? (
                 <ListItem
@@ -162,26 +158,6 @@ export const AccessControlList = observer(
                 />
               )}
             </>
-          ) : document.isDraft ? (
-            <>
-              <ListItem
-                image={<Avatar model={document.createdBy} />}
-                title={document.createdBy?.name}
-                actions={
-                  <AccessTooltip content={t("Created the document")}>
-                    {t("Can edit")}
-                  </AccessTooltip>
-                }
-              />
-              {showLoading ? (
-                <Placeholder />
-              ) : (
-                <DocumentMemberList
-                  document={document}
-                  invitedInSession={invitedInSession}
-                />
-              )}
-            </>
           ) : (
             <>
               {showLoading ? (

app/components/Sharing/Document/DocumentMemberList.tsx

@@ -18,7 +18,9 @@ import type { Permission } from "~/types";
 import { EmptySelectValue } from "~/types";
 import { homePath } from "~/utils/routeHelpers";
 import { ListItem } from "../components/ListItem";
+import { GroupMembersPopover } from "../components";
 import DocumentMemberListItem from "./DocumentMemberListItem";
+import ButtonLink from "~/components/ButtonLink";
 
 type Props = {
   /** Document to which team members are supposed to be invited */
@@ -87,7 +89,11 @@ function DocumentMemberList({ document, invitedInSession }: Props) {
   const members = React.useMemo(
     () =>
       orderBy(
-        document.members,
+        Array.from(
+          new Map(
+            document.members.map((memberUser) => [memberUser.id, memberUser])
+          ).values()
+        ),
         (memberUser) =>
           (invitedInSession.includes(memberUser.id) ? "_" : "") +
           memberUser.name.toLocaleLowerCase(),
@@ -122,12 +128,19 @@ function DocumentMemberList({ document, invitedInSession }: Props) {
 
   return (
     <>
-      {groupMemberships
-        .inDocument(document.id)
+      {Array.from(
+        new Map(
+          groupMemberships
+            .inDocument(document.id)
+            .map((membership) => [membership.group.id, membership])
+        ).values()
+      )
         .sort((a, b) =>
           (
             (invitedInSession.includes(a.group.id) ? "_" : "") + a.group.name
-          ).localeCompare(b.group.name)
+          ).localeCompare(
+            (invitedInSession.includes(b.group.id) ? "_" : "") + b.group.name
+          )
         )
         .map((membership) => {
           const MaybeLink = membership?.source ? StyledLink : React.Fragment;
@@ -153,9 +166,13 @@ function DocumentMemberList({ document, invitedInSession }: Props) {
                     </MaybeLink>
                   </Trans>
                 ) : (
-                  t("{{ count }} member", {
-                    count: membership.group.memberCount,
-                  })
+                  <GroupMembersPopover group={membership.group}>
+                    <StyledButtonLink>
+                      {t("{{ count }} member", {
+                        count: membership.group.memberCount,
+                      })}
+                    </StyledButtonLink>
+                  </GroupMembersPopover>
                 )
               }
               actions={
@@ -206,6 +223,13 @@ function DocumentMemberList({ document, invitedInSession }: Props) {
   );
 }
 
+const StyledButtonLink = styled(ButtonLink)`
+  color: ${s("textTertiary")};
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
 const StyledLink = styled(Link)`
   color: ${s("textTertiary")};
   text-decoration: underline;

app/components/Sharing/Document/PublicAccess.tsx

@@ -144,9 +144,10 @@ function PublicAccess(
     toast.success(t("Public link copied to clipboard"));
   }, [t]);
 
-  const shareUrl = sharedParent?.url
-    ? `${sharedParent.url}${document.url}`
-    : (share?.url ?? "");
+  const shareUrl =
+    sharedParent?.url && !document.isDraft
+      ? `${sharedParent.url}${document.url}`
+      : (share?.url ?? "");
 
   const copyButton = (
     <Tooltip content={t("Copy public link")} placement="top">
@@ -290,7 +291,7 @@ function PublicAccess(
           </>
         )}
 
-        {sharedParent?.published ? (
+        {sharedParent?.published && !document.isDraft ? (
           <ShareLinkInput type="text" disabled defaultValue={shareUrl}>
             {copyButton}
           </ShareLinkInput>

app/components/Sharing/Document/SharePopover.tsx

@@ -18,6 +18,7 @@ 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";
@@ -35,9 +36,16 @@ 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 }: Props) {
+function SharePopover({
+  document,
+  onRequestClose,
+  visible,
+  loading: externalLoading,
+}: Props) {
   const team = useCurrentTeam();
   const { t } = useTranslation();
   const can = usePolicy(document);
@@ -46,6 +54,10 @@ function SharePopover({ document, onRequestClose, visible }: Props) {
   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[]>([]);
@@ -79,13 +91,14 @@ function SharePopover({ document, onRequestClose, visible }: Props) {
     }
   );
 
-  // Fetch sharefocus the link button when the popover is opened
   React.useEffect(() => {
     if (visible) {
-      void document.share();
+      if (externalLoading === undefined) {
+        preload();
+      }
       setHasRendered(true);
     }
-  }, [document, hidePicker, visible]);
+  }, [visible, externalLoading, preload]);
 
   // Hide the picker when the popover is closed
   React.useEffect(() => {
@@ -377,6 +390,7 @@ function SharePopover({ document, onRequestClose, visible }: Props) {
           share={share}
           sharedParent={sharedParent}
           visible={visible}
+          loading={loading}
           onRequestClose={onRequestClose}
         />
       </div>

app/components/Sharing/components/GroupMembersPopover.tsx

@@ -0,0 +1,93 @@
+import { observer } from "mobx-react";
+import * as React from "react";
+import styled from "styled-components";
+import type Group from "~/models/Group";
+import type GroupUser from "~/models/GroupUser";
+import { Avatar, AvatarSize } from "~/components/Avatar";
+import PaginatedList from "~/components/PaginatedList";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "~/components/primitives/Popover";
+import Text from "~/components/Text";
+import useStores from "~/hooks/useStores";
+import { ListItem } from "./ListItem";
+import Flex from "@shared/components/Flex";
+import { useTranslation } from "react-i18next";
+
+type Props = {
+  /** The group to display members for */
+  group: Group;
+  /** The trigger element that opens the popover */
+  children: React.ReactElement;
+};
+
+export const GroupMembersPopover = observer(({ group, children }: Props) => {
+  const { t } = useTranslation();
+  const { groupUsers } = useStores();
+  const [open, setOpen] = React.useState(false);
+
+  const members = React.useMemo(
+    () => groupUsers.inGroup(group.id),
+    [groupUsers.orderedData, group.id]
+  );
+
+  const fetchOptions = React.useMemo(
+    () => ({
+      id: group.id,
+    }),
+    [group.id]
+  );
+
+  const renderItem = React.useCallback(
+    (groupUser: GroupUser) => (
+      <ListItem
+        key={groupUser.id}
+        image={<Avatar model={groupUser.user} size={AvatarSize.Medium} />}
+        title={groupUser.user.name}
+        subtitle={groupUser.user.email}
+      />
+    ),
+    []
+  );
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger>{children}</PopoverTrigger>
+      <PopoverContent
+        align="start"
+        side="right"
+        sideOffset={8}
+        width={320}
+        scrollable
+        shrink
+      >
+        <Container>
+          <Flex style={{ marginBottom: 8 }} column>
+            <Text size="medium" weight="bold">
+              {group.name}
+            </Text>
+            <Text size="small" type="tertiary">
+              {t(`{{ count }} members`, { count: group.memberCount })}
+            </Text>
+          </Flex>
+          {open && (
+            <PaginatedList<GroupUser>
+              items={members}
+              fetch={groupUsers.fetchPage}
+              options={fetchOptions}
+              renderItem={renderItem}
+            />
+          )}
+        </Container>
+      </PopoverContent>
+    </Popover>
+  );
+});
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin: 12px 24px;
+`;

app/components/Sharing/components/Suggestions.tsx

@@ -14,6 +14,7 @@ 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";
@@ -21,6 +22,7 @@ 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 & {
@@ -148,9 +150,18 @@ export const Suggestions = observer(
       if (suggestion instanceof Group) {
         return {
           title: suggestion.name,
-          subtitle: t("{{ count }} member", {
-            count: suggestion.memberCount,
-          }),
+          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>
+          ),
           image: <GroupAvatar group={suggestion} />,
         };
       }
@@ -166,8 +177,9 @@ export const Suggestions = observer(
     }
 
     const isEmpty = suggestions.length === 0;
+    const pendingIdSet = new Set(pendingIds);
     const suggestionsWithPending = suggestions.filter(
-      (u) => !pendingIds.includes(u.id)
+      (u) => !pendingIdSet.has(u.id)
     );
 
     if (users.isFetching && isEmpty && neverRenderedList.current) {
@@ -192,8 +204,8 @@ export const Suggestions = observer(
             ...pending.map((suggestion) => (
               <PendingListItem
                 keyboardNavigation
-                {...getListItemProps(suggestion)}
                 key={suggestion.id}
+                {...getListItemProps(suggestion)}
                 onClick={() => removePendingId(suggestion.id)}
                 onKeyDown={(ev) => {
                   if (ev.key === "Enter") {
@@ -211,12 +223,14 @@ export const Suggestions = observer(
               />
             )),
             pending.length > 0 &&
-              (suggestionsWithPending.length > 0 || isEmpty) && <Separator />,
+              (suggestionsWithPending.length > 0 || isEmpty) && (
+                <Separator key="separator" />
+              ),
             ...suggestionsWithPending.map((suggestion) => (
               <ListItem
                 keyboardNavigation
-                {...getListItemProps(suggestion as User)}
                 key={suggestion.id}
+                {...getListItemProps(suggestion as User)}
                 onClick={() => addPendingId(suggestion.id)}
                 onKeyDown={(ev) => {
                   if (ev.key === "Enter") {
@@ -229,7 +243,9 @@ export const Suggestions = observer(
               />
             )),
             isEmpty && (
-              <Empty style={{ marginTop: 22 }}>{t("No matches")}</Empty>
+              <Empty key="empty" style={{ marginTop: 22 }}>
+                {t("No matches")}
+              </Empty>
             ),
           ]}
         </ArrowKeyNavigation>
@@ -263,6 +279,13 @@ 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;

app/components/Sharing/components/index.tsx

@@ -7,6 +7,8 @@ import Input, { NativeInput } from "~/components/Input";
 import { InfoIcon } from "outline-icons";
 import { Link } from "react-router-dom";
 
+export { GroupMembersPopover } from "./GroupMembersPopover";
+
 // TODO: Temp until Button/NudeButton styles are normalized
 export const Wrapper = styled.div`
   ${NudeButton}:${hover},

app/components/Sidebar/Right.tsx

@@ -8,19 +8,23 @@ import ErrorBoundary from "~/components/ErrorBoundary";
 import Flex from "~/components/Flex";
 import ResizeBorder from "~/components/Sidebar/components/ResizeBorder";
 import useStores from "~/hooks/useStores";
+import useWindowScrollbarWidth from "~/hooks/useWindowScrollbarWidth";
 import { sidebarAppearDuration } from "~/styles/animations";
 
 interface Props extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
   border?: boolean;
+  /** When true, skip the entrance animation and render at full width immediately. */
+  skipInitialAnimation?: boolean;
 }
 
-function Right({ children, border, className }: Props) {
+function Right({ children, border, className, skipInitialAnimation }: Props) {
   const theme = useTheme();
   const { ui } = useStores();
   const [isResizing, setResizing] = React.useState(false);
   const maxWidth = theme.sidebarMaxWidth;
   const minWidth = theme.sidebarMinWidth + 16; // padding
+  const windowScrollbarWidth = useWindowScrollbarWidth();
 
   const handleDrag = React.useCallback(
     (event: MouseEvent) => {
@@ -67,16 +71,20 @@ function Right({ children, border, className }: Props) {
 
   const style = React.useMemo(
     () => ({
-      width: `${ui.sidebarRightWidth}px`,
+      width: windowScrollbarWidth
+        ? `${ui.sidebarRightWidth - windowScrollbarWidth}px`
+        : `${ui.sidebarRightWidth}px`,
     }),
-    [ui.sidebarRightWidth]
+    [ui.sidebarRightWidth, windowScrollbarWidth]
   );
 
   const animationProps = {
-    initial: {
-      width: 0,
-      opacity: 0.9,
-    },
+    initial: skipInitialAnimation
+      ? false
+      : {
+          width: 0,
+          opacity: 0.9,
+        },
     animate: {
       transition: isResizing
         ? { duration: 0 }

app/components/Sidebar/Settings.tsx

@@ -31,7 +31,7 @@ function SettingsSidebar() {
 
   const groupedConfig = groupBy(
     configs.filter((item) =>
-      item.group === "Integrations" && item.pluginId
+      item.group === t("Integrations") && item.pluginId
         ? integrations.findByService(item.pluginId)
         : true
     ),
@@ -76,7 +76,8 @@ function SettingsSidebar() {
                     to={item.path}
                     onClickIntent={item.preload}
                     active={
-                      item.path.startsWith(settingsPath("templates"))
+                      item.path.startsWith(settingsPath("templates")) ||
+                      item.path.startsWith(settingsPath("groups"))
                         ? location.pathname.startsWith(item.path)
                         : undefined
                     }

app/components/Sidebar/Shared.tsx

@@ -1,14 +1,15 @@
+import { useKBar } from "kbar";
 import { observer } from "mobx-react";
-import { SidebarIcon } from "outline-icons";
+import { SearchIcon } from "outline-icons";
+import { useCallback, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
-import { hover } from "@shared/styles";
+import { s } from "@shared/styles";
+import { ProsemirrorHelper } from "@shared/utils/ProsemirrorHelper";
 import { metaDisplay } from "@shared/utils/keyboard";
 import type Share from "~/models/Share";
 import Flex from "~/components/Flex";
 import Scrollable from "~/components/Scrollable";
-import SearchPopover from "~/components/SearchPopover";
-import Tooltip from "~/components/Tooltip";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";
 import history from "~/utils/history";
@@ -21,9 +22,6 @@ import Section from "./components/Section";
 import { SharedCollectionLink } from "./components/SharedCollectionLink";
 import { SharedDocumentLink } from "./components/SharedDocumentLink";
 import SidebarButton from "./components/SidebarButton";
-import ToggleButton from "./components/ToggleButton";
-import { useEffect } from "react";
-import { ProsemirrorHelper } from "@shared/utils/ProsemirrorHelper";
 
 type Props = {
   share: Share;
@@ -34,6 +32,7 @@ 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;
@@ -43,6 +42,10 @@ function SharedSidebar({ share }: Props) {
     ? ProsemirrorHelper.isEmptyData(collection?.data)
     : false;
 
+  const handleOpenSearch = useCallback(() => {
+    query.toggle();
+  }, [query]);
+
   useEffect(() => {
     ui.tocVisible = share.showTOC;
   }, []);
@@ -52,7 +55,7 @@ function SharedSidebar({ share }: Props) {
   }
 
   return (
-    <StyledSidebar $hoverTransition={!teamAvailable} canCollapse={false}>
+    <Sidebar canCollapse={false}>
       {teamAvailable && (
         <SidebarButton
           title={team.name}
@@ -69,14 +72,11 @@ function SharedSidebar({ share }: Props) {
       )}
       <ScrollContainer topShadow flex>
         <TopSection>
-          <SearchWrapper>
-            <StyledSearchPopover shareId={shareId} />
-          </SearchWrapper>
-          {!teamAvailable && (
-            <ToggleWrapper>
-              <ToggleSidebar />
-            </ToggleWrapper>
-          )}
+          <SearchButton onClick={handleOpenSearch}>
+            <SearchIcon size={20} />
+            <SearchLabel>{t("Search")}</SearchLabel>
+            <Shortcut>{metaDisplay}K</Shortcut>
+          </SearchButton>
         </TopSection>
         <Section>
           {share.collectionId ? (
@@ -99,31 +99,10 @@ function SharedSidebar({ share }: Props) {
           )}
         </Section>
       </ScrollContainer>
-    </StyledSidebar>
+    </Sidebar>
   );
 }
 
-const ToggleSidebar = () => {
-  const { t } = useTranslation();
-  const { ui } = useStores();
-
-  return (
-    <Tooltip content={t("Toggle sidebar")} shortcut={`${metaDisplay}+.`}>
-      <ToggleButton
-        position="bottom"
-        image={<SidebarIcon />}
-        aria-label={
-          ui.sidebarCollapsed ? t("Expand sidebar") : t("Collapse sidebar")
-        }
-        onClick={() => {
-          ui.toggleCollapsedSidebar();
-          (document.activeElement as HTMLElement)?.blur();
-        }}
-      />
-    </Tooltip>
-  );
-};
-
 const ScrollContainer = styled(Scrollable)`
   padding-bottom: 16px;
 `;
@@ -133,43 +112,34 @@ const TopSection = styled(Flex)`
   flex-shrink: 0;
 `;
 
-const SearchWrapper = styled.div`
+const SearchButton = styled.button`
+  display: flex;
+  align-items: center;
+  gap: 8px;
   width: 100%;
-`;
-
-const StyledSearchPopover = styled(SearchPopover)`
-  width: 100%;
-  transition: width 100ms ease-out;
+  padding: 6px 12px;
   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 ToggleWrapper = styled.div`
-  position: absolute;
-  right: 0;
-  opacity: 0;
-  transform: translateX(10px);
-  transition:
-    opacity 100ms ease-out,
-    transform 100ms ease-out;
+const SearchLabel = styled.span`
+  flex-grow: 1;
+  text-align: left;
 `;
 
-const StyledSidebar = styled(Sidebar)<{ $hoverTransition: boolean }>`
-  ${({ $hoverTransition }) =>
-    $hoverTransition &&
-    `
-      @media (hover: hover) {
-        &:${hover} {
-        ${StyledSearchPopover} {
-          width: 85%;
-        }
-
-        ${ToggleWrapper} {
-          opacity: 1;
-          transform: translateX(0);
-          }
-        }
-      }
-    `}
+const Shortcut = styled.span`
+  flex-shrink: 0;
+  font-size: 13px;
 `;
 
 export default observer(SharedSidebar);

app/components/Sidebar/Sidebar.tsx

@@ -1,5 +1,6 @@
 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";
@@ -53,6 +54,7 @@ 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);
@@ -224,6 +226,11 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function Sidebar_(
     [width]
   );
 
+  const handleCloseSidebar = () => {
+    trigger("light");
+    ui.toggleMobileSidebar();
+  };
+
   return (
     <TooltipProvider>
       <Container
@@ -275,7 +282,7 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function Sidebar_(
           onDoubleClick={ui.sidebarIsClosed ? undefined : handleReset}
         />
       </Container>
-      {ui.mobileSidebarVisible && <Backdrop onClick={ui.toggleMobileSidebar} />}
+      {ui.mobileSidebarVisible && <Backdrop onClick={handleCloseSidebar} />}
     </TooltipProvider>
   );
 });

app/components/Sidebar/components/CollectionLink.tsx

@@ -15,6 +15,7 @@ import EditableTitle from "~/components/EditableTitle";
 import Fade from "~/components/Fade";
 import CollectionIcon from "~/components/Icons/CollectionIcon";
 import NudeButton from "~/components/NudeButton";
+import Tooltip from "~/components/Tooltip";
 import useBoolean from "~/hooks/useBoolean";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import usePolicy from "~/hooks/usePolicy";
@@ -122,10 +123,11 @@ const CollectionLink: React.FC<Props> = ({
 
   const contextMenuAction = useCollectionMenuAction({
     collectionId: collection.id,
+    onRename: handleRename,
   });
 
   return (
-    <ActionContextProvider value={{ activeCollectionId: collection.id }}>
+    <ActionContextProvider value={{ activeModels: [collection] }}>
       <Relative ref={mergeRefs([parentRef, dropRef])}>
         <DropToImport collectionId={collection.id}>
           <SidebarLink
@@ -141,7 +143,7 @@ const CollectionLink: React.FC<Props> = ({
             icon={
               <CollectionIcon collection={collection} expanded={expanded} />
             }
-            showActions={menuOpen}
+            $showActions={menuOpen}
             isActiveDrop={isOver && canDrop}
             isActive={(
               match,
@@ -157,6 +159,7 @@ const CollectionLink: React.FC<Props> = ({
                 ref={editableTitleRef}
               />
             }
+            ellipsis={!isEditing}
             exact={false}
             depth={depth ? depth : 0}
             menu={
@@ -164,17 +167,18 @@ const CollectionLink: React.FC<Props> = ({
               !isDraggingAnyCollection && (
                 <Fade>
                   {can.createDocument && (
-                    <NudeButton
-                      tooltip={{ content: t("New doc"), delay: 500 }}
-                      aria-label={t("New nested document")}
-                      onClick={(ev) => {
-                        ev.preventDefault();
-                        setIsAddingNewChild();
-                        handleExpand();
-                      }}
-                    >
-                      <PlusIcon />
-                    </NudeButton>
+                    <Tooltip content={t("New doc")} delay={500}>
+                      <NudeButton
+                        aria-label={t("New nested document")}
+                        onClick={(ev) => {
+                          ev.preventDefault();
+                          setIsAddingNewChild();
+                          handleExpand();
+                        }}
+                      >
+                        <PlusIcon />
+                      </NudeButton>
+                    </Tooltip>
                   )}
                   <CollectionMenu
                     collection={collection}
@@ -197,6 +201,7 @@ const CollectionLink: React.FC<Props> = ({
           <SidebarLink
             depth={2}
             isActive={() => true}
+            ellipsis={false}
             label={
               <EditableTitle
                 title=""

app/components/Sidebar/components/DocumentLink.tsx

@@ -40,6 +40,10 @@ import type UserMembership from "~/models/UserMembership";
 import type GroupMembership from "~/models/GroupMembership";
 import { ActionContextProvider } from "~/hooks/useActionContext";
 import { useDocumentMenuAction } from "~/hooks/useDocumentMenuAction";
+import SidebarDisclosureContext, {
+  useSidebarDisclosure,
+  useSidebarDisclosureState,
+} from "./SidebarDisclosureContext";
 
 type Props = {
   node: NavigationNode;
@@ -106,8 +110,7 @@ function InnerDocumentLink(
       membership?.pathToDocument(activeDocument.id);
 
     return !!(
-      pathToDocument?.map((entry) => entry.id).includes(node.id) ||
-      isActiveDocument
+      pathToDocument?.some((entry) => entry.id === node.id) || isActiveDocument
     );
   }, [
     hasChildDocuments,
@@ -120,6 +123,13 @@ function InnerDocumentLink(
 
   const [expanded, setExpanded, setCollapsed] = useBoolean(showChildren);
 
+  // Context-based recursive expand/collapse for descendant DocumentLinks
+  const { event: disclosureEvent, onDisclosureClick } =
+    useSidebarDisclosureState();
+
+  // Subscribe to recursive expand/collapse events from an ancestor
+  useSidebarDisclosure(setExpanded, setCollapsed);
+
   React.useEffect(() => {
     if (showChildren) {
       setExpanded();
@@ -133,13 +143,18 @@ function InnerDocumentLink(
     }
   }, [setCollapsed, expanded, hasChildDocuments]);
 
-  const handleDisclosureClick = React.useCallback(() => {
-    if (expanded) {
-      setCollapsed();
-    } else {
-      setExpanded();
-    }
-  }, [setCollapsed, setExpanded, expanded]);
+  const handleDisclosureClick = React.useCallback(
+    (ev: React.MouseEvent<HTMLElement>) => {
+      const willExpand = !expanded;
+      if (willExpand) {
+        setExpanded();
+      } else {
+        setCollapsed();
+      }
+      onDisclosureClick(willExpand, ev.altKey);
+    },
+    [setCollapsed, setExpanded, expanded, onDisclosureClick]
+  );
 
   const handlePrefetch = React.useCallback(() => {
     void prefetchDocument?.(node.id);
@@ -250,27 +265,30 @@ function InnerDocumentLink(
       };
     });
 
-  const nodeChildren = React.useMemo(() => {
-    const insertDraftDocument =
-      activeDocument?.isDraft &&
-      activeDocument?.isActive &&
-      activeDocument?.parentDocumentId === node.id;
+  const insertDraftChild = !!(
+    activeDocument?.isDraft &&
+    activeDocument?.isActive &&
+    activeDocument?.parentDocumentId === node.id
+  );
 
-    return collection && insertDraftDocument
-      ? sortNavigationNodes(
-          [activeDocument?.asNavigationNode, ...node.children],
-          collection.sort,
-          false
-        )
-      : node.children;
-  }, [
-    activeDocument?.isActive,
-    activeDocument?.isDraft,
-    activeDocument?.parentDocumentId,
-    activeDocument?.asNavigationNode,
-    collection,
-    node,
-  ]);
+  // 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]
+  );
 
   const doc = documents.get(node.id);
   const title = doc?.title || node.title || t("Untitled");
@@ -337,7 +355,10 @@ function InnerDocumentLink(
     ]
   );
 
-  const contextMenuAction = useDocumentMenuAction({ documentId: node.id });
+  const contextMenuAction = useDocumentMenuAction({
+    documentId: node.id,
+    onRename: handleRename,
+  });
 
   const labelElement = React.useMemo(
     () => (
@@ -398,7 +419,7 @@ function InnerDocumentLink(
   return (
     <ActionContextProvider
       value={{
-        activeDocumentId: node.id,
+        activeModels: document ? [document] : [],
       }}
     >
       <Relative ref={parentRef}>
@@ -428,11 +449,12 @@ function InnerDocumentLink(
                 to={toPath}
                 icon={iconElement}
                 label={labelElement}
+                ellipsis={!isEditing}
                 isActive={isActiveCheck}
                 isActiveDrop={isOverReparent && canDropToReparent}
                 depth={depth}
                 exact={false}
-                showActions={menuOpen}
+                $showActions={menuOpen}
                 scrollIntoViewIfNeeded={sidebarContext === "collections"}
                 isDraft={isDraft}
                 ref={ref}
@@ -449,6 +471,7 @@ function InnerDocumentLink(
         <SidebarLink
           isActive={() => true}
           depth={depth + 1}
+          ellipsis={false}
           label={
             <EditableTitle
               title=""
@@ -463,22 +486,24 @@ function InnerDocumentLink(
           }
         />
       )}
-      <Folder expanded={expanded && !isDragging}>
-        {nodeChildren.map((childNode, childIndex) => (
-          <DocumentLink
-            key={childNode.id}
-            collection={collection}
-            membership={membership}
-            node={childNode}
-            activeDocument={activeDocument}
-            prefetchDocument={prefetchDocument}
-            isDraft={childNode.isDraft}
-            depth={depth + 1}
-            index={childIndex}
-            parentId={node.id}
-          />
-        ))}
-      </Folder>
+      <SidebarDisclosureContext.Provider value={disclosureEvent}>
+        <Folder expanded={expanded && !isDragging}>
+          {nodeChildren.map((childNode, childIndex) => (
+            <DocumentLink
+              key={childNode.id}
+              collection={collection}
+              membership={membership}
+              node={childNode}
+              activeDocument={activeDocument}
+              prefetchDocument={prefetchDocument}
+              isDraft={childNode.isDraft}
+              depth={depth + 1}
+              index={childIndex}
+              parentId={node.id}
+            />
+          ))}
+        </Folder>
+      </SidebarDisclosureContext.Provider>
     </ActionContextProvider>
   );
 }

app/components/Sidebar/components/DraggableCollectionLink.tsx

@@ -13,6 +13,9 @@ import useStores from "~/hooks/useStores";
 import type { DragObject } from "../hooks/useDragAndDrop";
 import CollectionLink from "./CollectionLink";
 import DropCursor from "./DropCursor";
+import SidebarDisclosureContext, {
+  useSidebarDisclosureState,
+} from "./SidebarDisclosureContext";
 import Relative from "./Relative";
 import { useSidebarContext } from "./SidebarContext";
 
@@ -36,6 +39,10 @@ function DraggableCollectionLink({
   );
   const belowCollectionIndex = belowCollection ? belowCollection.index : null;
 
+  // Context-based recursive expand/collapse for descendant DocumentLinks
+  const { event: disclosureEvent, onDisclosureClick } =
+    useSidebarDisclosureState();
+
   // Drop to reorder collection
   const [
     { isCollectionDropping, isDraggingAnyCollection },
@@ -91,15 +98,22 @@ function DraggableCollectionLink({
     locationSidebarContext,
   ]);
 
-  const handleDisclosureClick = useCallback((ev) => {
-    ev?.preventDefault();
-    setExpanded((e) => !e);
-  }, []);
+  const handleDisclosureClick = useCallback(
+    (ev) => {
+      ev?.preventDefault();
+      setExpanded((e) => {
+        const willExpand = !e;
+        onDisclosureClick(willExpand, !!ev?.altKey);
+        return willExpand;
+      });
+    },
+    [onDisclosureClick]
+  );
 
   const displayChildDocuments = expanded && !isDragging;
 
   return (
-    <>
+    <SidebarDisclosureContext.Provider value={disclosureEvent}>
       <Draggable
         key={collection.id}
         ref={dragToReorderCollection}
@@ -121,7 +135,7 @@ function DraggableCollectionLink({
           />
         )}
       </Relative>
-    </>
+    </SidebarDisclosureContext.Provider>
   );
 }
 

app/components/Sidebar/components/GroupLink.tsx

@@ -7,6 +7,9 @@ import Folder from "./Folder";
 import Relative from "./Relative";
 import SharedWithMeLink from "./SharedWithMeLink";
 import SidebarContext, { groupSidebarContext } from "./SidebarContext";
+import SidebarDisclosureContext, {
+  useSidebarDisclosureState,
+} from "./SidebarDisclosureContext";
 import SidebarLink from "./SidebarLink";
 
 type Props = {
@@ -21,10 +24,20 @@ const GroupLink: React.FC<Props> = ({ group }) => {
     locationSidebarContext === sidebarContext
   );
 
-  const handleDisclosureClick = React.useCallback((ev) => {
-    ev?.preventDefault();
-    setExpanded((e) => !e);
-  }, []);
+  const { event: disclosureEvent, onDisclosureClick } =
+    useSidebarDisclosureState();
+
+  const handleDisclosureClick = React.useCallback(
+    (ev) => {
+      ev?.preventDefault();
+      setExpanded((e) => {
+        const willExpand = !e;
+        onDisclosureClick(willExpand, !!ev?.altKey);
+        return willExpand;
+      });
+    },
+    [onDisclosureClick]
+  );
 
   React.useEffect(() => {
     if (locationSidebarContext === sidebarContext) {
@@ -42,15 +55,17 @@ const GroupLink: React.FC<Props> = ({ group }) => {
         depth={0}
       />
       <SidebarContext.Provider value={sidebarContext}>
-        <Folder expanded={expanded}>
-          {group.documentMemberships.map((membership) => (
-            <SharedWithMeLink
-              key={membership.id}
-              membership={membership}
-              depth={1}
-            />
-          ))}
-        </Folder>
+        <SidebarDisclosureContext.Provider value={disclosureEvent}>
+          <Folder expanded={expanded}>
+            {group.documentMemberships.map((membership) => (
+              <SharedWithMeLink
+                key={membership.id}
+                membership={membership}
+                depth={1}
+              />
+            ))}
+          </Folder>
+        </SidebarDisclosureContext.Provider>
       </SidebarContext.Provider>
     </Relative>
   );

app/components/Sidebar/components/SharedDocumentLink.tsx

@@ -9,6 +9,10 @@ import type Document from "~/models/Document";
 import useStores from "~/hooks/useStores";
 import { sharedModelPath } from "~/utils/routeHelpers";
 import { descendants } from "@shared/utils/tree";
+import SidebarDisclosureContext, {
+  useSidebarDisclosure,
+  useSidebarDisclosureState,
+} from "./SidebarDisclosureContext";
 import SidebarLink from "./SidebarLink";
 
 type Props = {
@@ -62,6 +66,14 @@ function DocumentLink(
 
   const [expanded, setExpanded] = React.useState(showChildren);
 
+  const { event: disclosureEvent, onDisclosureClick } =
+    useSidebarDisclosureState();
+
+  const handleExpand = React.useCallback(() => setExpanded(true), []);
+  const handleCollapse = React.useCallback(() => setExpanded(false), []);
+
+  useSidebarDisclosure(handleExpand, handleCollapse);
+
   React.useEffect(() => {
     if (showChildren) {
       setExpanded(showChildren);
@@ -72,9 +84,12 @@ function DocumentLink(
     (ev: React.SyntheticEvent) => {
       ev.preventDefault();
       ev.stopPropagation();
-      setExpanded(!expanded);
+      const willExpand = !expanded;
+      setExpanded(willExpand);
+      const altKey = "altKey" in ev && (ev as React.MouseEvent).altKey;
+      onDisclosureClick(willExpand, !!altKey);
     },
-    [expanded]
+    [expanded, onDisclosureClick]
   );
 
   // since we don't have access to the collection sort here, we just put any
@@ -133,22 +148,24 @@ function DocumentLink(
         ref={ref}
         isActive={() => !!isActiveDocument}
       />
-      {expanded &&
-        nodeChildren.map((childNode, index) => (
-          <SharedDocumentLink
-            shareId={shareId}
-            key={childNode.id}
-            collection={collection}
-            node={childNode}
-            activeDocumentId={activeDocumentId}
-            activeDocument={activeDocument}
-            prefetchDocument={prefetchDocument}
-            isDraft={childNode.isDraft}
-            depth={depth + 1}
-            index={index}
-            parentId={node.id}
-          />
-        ))}
+      <SidebarDisclosureContext.Provider value={disclosureEvent}>
+        {expanded &&
+          nodeChildren.map((childNode, index) => (
+            <SharedDocumentLink
+              shareId={shareId}
+              key={childNode.id}
+              collection={collection}
+              node={childNode}
+              activeDocumentId={activeDocumentId}
+              activeDocument={activeDocument}
+              prefetchDocument={prefetchDocument}
+              isDraft={childNode.isDraft}
+              depth={depth + 1}
+              index={index}
+              parentId={node.id}
+            />
+          ))}
+      </SidebarDisclosureContext.Provider>
     </>
   );
 }

app/components/Sidebar/components/SharedWithMeLink.tsx

@@ -22,6 +22,10 @@ import DocumentLink from "./DocumentLink";
 import DropCursor from "./DropCursor";
 import Folder from "./Folder";
 import Relative from "./Relative";
+import SidebarDisclosureContext, {
+  useSidebarDisclosure,
+  useSidebarDisclosureState,
+} from "./SidebarDisclosureContext";
 import { useSidebarContext, type SidebarContextType } from "./SidebarContext";
 import SidebarLink from "./SidebarLink";
 
@@ -48,6 +52,12 @@ function SharedWithMeLink({ membership, depth = 0 }: Props) {
     isActiveDocumentInPath && locationSidebarContext === sidebarContext
   );
 
+  const { event: disclosureEvent, onDisclosureClick } =
+    useSidebarDisclosureState();
+
+  // Subscribe to recursive expand/collapse events from an ancestor (e.g. GroupLink)
+  useSidebarDisclosure(setExpanded, setCollapsed);
+
   React.useEffect(() => {
     if (isActiveDocumentInPath && locationSidebarContext === sidebarContext) {
       setExpanded();
@@ -76,13 +86,15 @@ function SharedWithMeLink({ membership, depth = 0 }: Props) {
     (ev: React.MouseEvent<HTMLButtonElement>) => {
       ev.preventDefault();
       ev.stopPropagation();
-      if (expanded) {
-        setCollapsed();
-      } else {
+      const willExpand = !expanded;
+      if (willExpand) {
         setExpanded();
+      } else {
+        setCollapsed();
       }
+      onDisclosureClick(willExpand, ev.altKey);
     },
-    [expanded, setExpanded, setCollapsed]
+    [expanded, setExpanded, setCollapsed, onDisclosureClick]
   );
 
   const parentRef = React.useRef<HTMLDivElement>(null);
@@ -158,7 +170,7 @@ function SharedWithMeLink({ membership, depth = 0 }: Props) {
                       NotificationEventType.AddUserToDocument
                   ).length > 0
                 }
-                showActions={menuOpen}
+                $showActions={menuOpen}
                 menu={
                   document && !isDragging ? (
                     <Fade>
@@ -174,20 +186,22 @@ function SharedWithMeLink({ membership, depth = 0 }: Props) {
             </div>
           </Draggable>
         </Relative>
-        <Folder expanded={displayChildDocuments}>
-          {childDocuments.map((childNode, index) => (
-            <DocumentLink
-              key={childNode.id}
-              node={childNode}
-              collection={collection}
-              membership={membership}
-              activeDocument={documents.active}
-              isDraft={childNode.isDraft}
-              depth={2}
-              index={index}
-            />
-          ))}
-        </Folder>
+        <SidebarDisclosureContext.Provider value={disclosureEvent}>
+          <Folder expanded={displayChildDocuments}>
+            {childDocuments.map((childNode, index) => (
+              <DocumentLink
+                key={childNode.id}
+                node={childNode}
+                collection={collection}
+                membership={membership}
+                activeDocument={documents.active}
+                isDraft={childNode.isDraft}
+                depth={2}
+                index={index}
+              />
+            ))}
+          </Folder>
+        </SidebarDisclosureContext.Provider>
         {reorderProps.isDragging && (
           <DropCursor
             isActiveDrop={reorderProps.isOverCursor}

app/components/Sidebar/components/SidebarButton.tsx

@@ -1,4 +1,5 @@
 import { MoreIcon } from "outline-icons";
+import { observer } from "mobx-react";
 import * as React from "react";
 import styled from "styled-components";
 import { extraArea, hover, s } from "@shared/styles";
@@ -18,44 +19,46 @@ export type SidebarButtonProps = React.ComponentProps<typeof Button> & {
   children?: React.ReactNode;
 };
 
-const SidebarButton = React.forwardRef<HTMLButtonElement, SidebarButtonProps>(
-  function SidebarButton_(
-    {
-      position = "top",
-      showMoreMenu,
-      image,
-      title,
-      children,
-      onClick,
-      ...rest
-    }: SidebarButtonProps,
-    ref
-  ) {
-    return (
-      <Container
-        justify="space-between"
-        align="center"
-        shrink={false}
-        $position={position}
-      >
-        <Button
-          {...rest}
-          onClick={onClick}
+const SidebarButton = observer(
+  React.forwardRef<HTMLButtonElement, SidebarButtonProps>(
+    function SidebarButton_(
+      {
+        position = "top",
+        showMoreMenu,
+        image,
+        title,
+        children,
+        onClick,
+        ...rest
+      }: SidebarButtonProps,
+      ref
+    ) {
+      return (
+        <Container
+          justify="space-between"
+          align="center"
+          shrink={false}
           $position={position}
-          as="button"
-          ref={ref}
-          role="button"
         >
-          <Content>
-            {image}
-            {title && <Title>{title}</Title>}
-          </Content>
-          {showMoreMenu && <StyledMoreIcon />}
-        </Button>
-        {children}
-      </Container>
-    );
-  }
+          <Button
+            {...rest}
+            onClick={onClick}
+            $position={position}
+            as="button"
+            ref={ref}
+            role="button"
+          >
+            <Content>
+              {image}
+              {title && <Title>{title}</Title>}
+            </Content>
+            {showMoreMenu && <StyledMoreIcon />}
+          </Button>
+          {children}
+        </Container>
+      );
+    }
+  )
 );
 
 const StyledMoreIcon = styled(MoreIcon)`