fix: Nested list behavior (#12678)

* fix: preserve nesting when toggling to/from checklist in nested lists

Converting a list to or from a checklist previously cleared all nodes and
re-wrapped them, which flattened any nested list structure. Convert the
list nodes in place instead, recursively mapping list and item types so
nesting is preserved.

https://claude.ai/code/session_01BGH191WyuL9SgQyjfJ3YsD

* feat: convert plain list to checklist when typing checkbox marker

Typing "[ ] " at the start of an existing bullet or ordered list item now
converts the whole list to a checklist, preserving nested list structure,
reusing the in-place list conversion utility.

https://claude.ai/code/session_01BGH191WyuL9SgQyjfJ3YsD

* fix: place cursor at start of item after checklist conversion

After converting a list to a checklist via the checkbox marker input rule,
position the selection at the start of the converted item so the user can
continue typing immediately.

https://claude.ai/code/session_01BGH191WyuL9SgQyjfJ3YsD

* fix: remove vertical margin from checklist nested in a list

A checklist nested inside any list (bullet, ordered, or another checklist)
no longer carries the 1em vertical margin of a top-level checklist. Since
both list_item and checkbox_item render as li elements, target any
checklist-wrapper inside an li rather than only those inside another wrapper.

https://claude.ai/code/session_01BGH191WyuL9SgQyjfJ3YsD

* fix: only highlight the closest list in the formatting toolbar

When the selection sits inside a nested list, the toolbar previously marked
both the inner list and any ancestor list of a different type as active,
because each list button walked the full ancestor chain. Highlight only the
list closest to the selection.

https://claude.ai/code/session_01BGH191WyuL9SgQyjfJ3YsD

* fix: consider node selections on lists in isListActive

When a list node is the target of a NodeSelection, findParentNode resolves
to its parent list rather than the selected node. Check the selected node
directly so the toolbar reflects the selected list.

https://claude.ai/code/session_01BGH191WyuL9SgQyjfJ3YsD

---------

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

.babelrc

@@ -24,7 +24,18 @@
         "include": ["SOURCE_COMMIT", "SOURCE_VERSION"]
       }
     ],
-    "tsconfig-paths-module-resolver"
+    [
+      "module-resolver",
+      {
+        "root": ["./"],
+        "alias": {
+          "@server": "./server",
+          "@shared": "./shared",
+          "~": "./app",
+          "plugins": "./plugins"
+        }
+      }
+    ]
   ],
   "env": {
     "production": {

.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,23 @@ 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=
+
+# Whether to trust the X-Forwarded-* headers (e.g. X-Forwarded-For,
+# X-Forwarded-Proto) set by an upstream proxy. Set to false if not
+# running behind a proxy in production.
+# PROXY_HEADERS_TRUSTED=true
+
 
 # ––––––––––––––––––––––––––––––––––––––
 # ––––––––––  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
@@ -198,6 +223,12 @@ RATE_LIMITER_ENABLED=true
 RATE_LIMITER_REQUESTS=1000
 RATE_LIMITER_DURATION_WINDOW=60
 
+# Multiplier applied to the hardcoded per-endpoint API rate limits. Use values
+# greater than 1 to make the limits more lenient (e.g. 2 doubles the allowed
+# requests), or less than 1 to make them stricter. Effective limits are rounded
+# to the nearest integer with a minimum of 1. Defaults to 1.
+RATE_LIMITER_MULTIPLIER=1
+
 
 # ––––––––––––––––––––––––––––––––––––––
 # –––––––––––  INTEGRATIONS  –––––––––––
@@ -212,6 +243,11 @@ GITHUB_APP_NAME=
 GITHUB_APP_ID=
 GITHUB_APP_PRIVATE_KEY=
 
+# The GitLab integration allows previewing issue and merge request links
+# DOCS: 
+GITLAB_CLIENT_ID=
+GITLAB_CLIENT_SECRET=
+
 # Linear integration allows previewing issue links as rich mentions
 LINEAR_CLIENT_ID=
 LINEAR_CLIENT_SECRET=

.env.test

@@ -17,6 +17,11 @@ SLACK_VERIFICATION_TOKEN=test-token-123
 GITHUB_CLIENT_ID=123;
 GITHUB_CLIENT_SECRET=123;
 GITHUB_APP_NAME=outline-test;
+GITHUB_APP_ID=123
+GITHUB_APP_PRIVATE_KEY="-----BEGIN RSA PRIVATE KEY-----\nMIIEpAIBAAKCAQEA\n-----END RSA PRIVATE KEY-----"
+
+GITLAB_CLIENT_ID=123
+GITLAB_CLIENT_SECRET=123
 
 OIDC_CLIENT_ID=client-id
 OIDC_CLIENT_SECRET=client-secret
@@ -26,6 +31,15 @@ OIDC_USERINFO_URI=http://localhost/userinfo
 
 IFRAMELY_API_KEY=123
 
+NOTION_CLIENT_ID=123
+NOTION_CLIENT_SECRET=123
+
+LINEAR_CLIENT_ID=123
+LINEAR_CLIENT_SECRET=123
+
+FIGMA_CLIENT_ID=123
+FIGMA_CLIENT_SECRET=123
+
 RATE_LIMITER_ENABLED=false
 
 FILE_STORAGE=local

.github/actions/install/action.yml

@@ -0,0 +1,16 @@
+name: Install
+description: Set up Node.js, Corepack, and install dependencies with yarn cache
+runs:
+  using: composite
+  steps:
+    - name: Enable Corepack
+      shell: bash
+      run: corepack enable
+    - name: Use Node.js 24.x
+      uses: actions/setup-node@v5
+      with:
+        node-version: 24.x
+        cache: "yarn"
+    - name: Install dependencies
+      shell: bash
+      run: yarn install --immutable

.github/workflows/auto-close-prs.yml

@@ -31,6 +31,12 @@ jobs:
 
               if (prAge < TWO_WEEKS) continue;
 
+              const hasSkipLabel = pr.labels.some(label =>
+                label.name === 'pinned'
+              );
+
+              if (hasSkipLabel) continue;
+
               const comments = await github.rest.issues.listComments({
                 owner: context.repo.owner,
                 repo: context.repo.repo,

.github/workflows/calibreapp-image-actions.yml

@@ -43,7 +43,7 @@ jobs:
         uses: actions/checkout@v5
       - name: Compress Images
         id: calibre
-        uses: calibreapp/image-actions@main
+        uses: calibreapp/image-actions@3d5873ac3e7bf1a38b24d9778d8dc639d5706d8b  # main
         with:
           githubToken: ${{ secrets.GITHUB_TOKEN }}
           # For non-Pull Requests, run in compressOnly mode and we'll PR after.
@@ -54,7 +54,7 @@ jobs:
         if: |
           github.event_name != 'pull_request' &&
           steps.calibre.outputs.markdown != ''
-        uses: peter-evans/create-pull-request@v3
+        uses: peter-evans/create-pull-request@18f7dc018cc2cd597073088f7c7591b9d1c02672  # v3
         with:
           title: "chore: Auto Compress Images"
           branch-suffix: timestamp

.github/workflows/ci.yml

@@ -18,78 +18,23 @@ env:
   SMTP_USERNAME: localhost
 
 jobs:
-  setup:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v5
-      - name: Enable Corepack
-        run: corepack enable
-      - name: Use Node.js 22.x
-        uses: actions/setup-node@v5
-        with:
-          node-version: 22.x
-          cache: "yarn"
-      - name: Cache node_modules
-        id: cache-node-modules
-        uses: actions/cache@v4
-        with:
-          path: node_modules
-          key: ${{ runner.os }}-node-modules-${{ hashFiles('yarn.lock') }}
-      - name: Install dependencies
-        if: steps.cache-node-modules.outputs.cache-hit != 'true'
-        run: yarn install --immutable
-
-  lint:
-    needs: setup
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v5
-      - name: Enable Corepack
-        run: corepack enable
-      - uses: actions/setup-node@v5
-        with:
-          node-version: 22.x
-          cache: "yarn"
-      - name: Restore node_modules
-        uses: actions/cache@v4
-        with:
-          path: node_modules
-          key: ${{ runner.os }}-node-modules-${{ hashFiles('yarn.lock') }}
-      - run: yarn lint --quiet
-
-  types:
-    needs: setup
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v5
-      - name: Enable Corepack
-        run: corepack enable
-      - uses: actions/setup-node@v5
-        with:
-          node-version: 22.x
-          cache: "yarn"
-      - name: Restore node_modules
-        uses: actions/cache@v4
-        with:
-          path: node_modules
-          key: ${{ runner.os }}-node-modules-${{ hashFiles('yarn.lock') }}
-      - run: yarn tsc
-
   changes:
     runs-on: ubuntu-latest
     outputs:
       config: ${{ steps.filter.outputs.config }}
       server: ${{ steps.filter.outputs.server }}
       app: ${{ steps.filter.outputs.app }}
+      deps: ${{ steps.filter.outputs.deps }}
     steps:
       - uses: actions/checkout@v5
-      - uses: dorny/paths-filter@v2
+      - uses: dorny/paths-filter@4512585405083f25c027a35db413c2b3b9006d50  # v2
         id: filter
         with:
           filters: |
             config:
               - '.github/**'
               - 'vite.config.ts'
+              - 'vitest.config.ts'
             server:
               - 'server/**'
               - 'shared/**'
@@ -100,9 +45,36 @@ jobs:
               - 'shared/**'
               - 'package.json'
               - 'yarn.lock'
+            deps:
+              - 'package.json'
+              - 'yarn.lock'
+              - '.yarnrc.yml'
+
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v5
+      - uses: ./.github/actions/install
+      - run: yarn lint --quiet
+
+  types:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v5
+      - uses: ./.github/actions/install
+      - run: yarn tsc
+
+  audit:
+    needs: changes
+    if: ${{ needs.changes.outputs.deps == 'true' }}
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v5
+      - uses: ./.github/actions/install
+      - run: yarn npm audit --severity high --recursive --environment production
 
   test:
-    needs: [setup, changes]
+    needs: changes
     if: ${{ needs.changes.outputs.app == 'true' || needs.changes.outputs.config == 'true' }}
     runs-on: ubuntu-latest
     strategy:
@@ -110,21 +82,11 @@ jobs:
         test-group: [app, shared]
     steps:
       - uses: actions/checkout@v5
-      - name: Enable Corepack
-        run: corepack enable
-      - uses: actions/setup-node@v5
-        with:
-          node-version: 22.x
-          cache: "yarn"
-      - name: Restore node_modules
-        uses: actions/cache@v4
-        with:
-          path: node_modules
-          key: ${{ runner.os }}-node-modules-${{ hashFiles('yarn.lock') }}
+      - uses: ./.github/actions/install
       - run: yarn test:${{ matrix.test-group }}
 
   test-server:
-    needs: [setup, changes]
+    needs: changes
     if: ${{ needs.changes.outputs.server == 'true' || needs.changes.outputs.config == 'true' }}
     runs-on: ubuntu-latest
     services:
@@ -148,45 +110,23 @@ jobs:
 
     steps:
       - uses: actions/checkout@v5
-      - name: Enable Corepack
-        run: corepack enable
-      - uses: actions/setup-node@v5
-        with:
-          node-version: 22.x
-          cache: "yarn"
-      - name: Restore node_modules
-        uses: actions/cache@v4
-        with:
-          path: node_modules
-          key: ${{ runner.os }}-node-modules-${{ hashFiles('yarn.lock') }}
+      - uses: ./.github/actions/install
       - run: yarn sequelize db:migrate
       - name: Run server tests
-        run: |
-          TESTFILES=$(find . -name "*.test.ts" -path "*/server/*" | sort | awk "NR % 4 == (${{ matrix.shard }} - 1)")
-          yarn test --maxWorkers=2 $TESTFILES
+        run: yarn test:server --maxWorkers=2 --shard=${{ matrix.shard }}/4
 
   bundle-size:
-    needs: [setup, types, changes]
-    if: ${{ needs.changes.outputs.app == 'true' && github.repository == 'outline/outline' }}
+    needs: changes
+    if: ${{ (needs.changes.outputs.app == 'true' || needs.changes.outputs.config == 'true') && github.repository == 'outline/outline' }}
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v5
-      - name: Enable Corepack
-        run: corepack enable
-      - uses: actions/setup-node@v5
-        with:
-          node-version: 22.x
-          cache: "yarn"
-      - name: Restore node_modules
-        uses: actions/cache@v4
-        with:
-          path: node_modules
-          key: ${{ runner.os }}-node-modules-${{ hashFiles('yarn.lock') }}
+      - uses: ./.github/actions/install
       - name: Set environment to production
         run: echo "NODE_ENV=production" >> $GITHUB_ENV
       - run: yarn vite:build
       - name: Send bundle stats to RelativeCI
-        uses: relative-ci/agent-action@v2
+        uses: relative-ci/agent-action@38328454d6a23942175eba485fca4fbb807b1f03  # v2
         with:
           key: ${{ secrets.RELATIVE_CI_KEY }}
           token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/docker.yml

@@ -1,9 +1,10 @@
-name: Docker
+name: Publish build
 
 on:
   push:
     tags:
       - "v*"
+  workflow_dispatch:
 
 env:
   IMAGE_NAME: outlinewiki/outline
@@ -11,17 +12,17 @@ env:
 
 jobs:
   build-arm:
-    runs-on: ubicloud-standard-8-arm
+    runs-on: blacksmith-8vcpu-ubuntu-2404-arm
     steps:
       - name: Checkout
         uses: actions/checkout@v5
 
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
+      - name: Setup Blacksmith Builder
+        uses: useblacksmith/setup-docker-builder@ab5c1da94f53f5cd75c1038092aa276dddfccbba  # v1
 
       - 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 +31,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: useblacksmith/build-push-action@fb9e3e6a9299c78462bfadd0d93352c316adc9b8  # v2
         with:
           context: .
           file: Dockerfile.base
@@ -45,13 +46,11 @@ jobs:
           tags: ${{ env.BASE_IMAGE_NAME }}
           outputs: type=image,push-by-digest=true,name-canonical=true,push=true
           platforms: linux/arm64
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
           pull: false
 
       - name: Docker meta
         id: meta
-        uses: docker/metadata-action@v5
+        uses: docker/metadata-action@v6
         with:
           images: |
             ${{ env.IMAGE_NAME }}
@@ -61,7 +60,7 @@ jobs:
 
       - name: Build and push
         id: build
-        uses: docker/build-push-action@v6
+        uses: useblacksmith/build-push-action@fb9e3e6a9299c78462bfadd0d93352c316adc9b8  # v2
         with:
           context: .
           file: Dockerfile
@@ -69,8 +68,6 @@ jobs:
           tags: ${{ env.IMAGE_NAME }}
           outputs: type=image,push-by-digest=true,name-canonical=true,push=true
           platforms: linux/arm64
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
           pull: false
           build-args: |
             BASE_IMAGE=${{ env.BASE_IMAGE_NAME }}@${{ steps.base_build.outputs.digest }}
@@ -90,17 +87,17 @@ jobs:
           retention-days: 1
 
   build-amd:
-    runs-on: ubicloud-standard-8
+    runs-on: blacksmith-8vcpu-ubuntu-2404
     steps:
       - name: Checkout
         uses: actions/checkout@v5
 
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
+      - name: Setup Blacksmith Builder
+        uses: useblacksmith/setup-docker-builder@ab5c1da94f53f5cd75c1038092aa276dddfccbba  # v1
 
       - 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 +106,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: useblacksmith/build-push-action@fb9e3e6a9299c78462bfadd0d93352c316adc9b8  # v2
         with:
           context: .
           file: Dockerfile.base
@@ -124,13 +121,11 @@ jobs:
           tags: ${{ env.BASE_IMAGE_NAME }}
           outputs: type=image,push-by-digest=true,name-canonical=true,push=true
           platforms: linux/amd64
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
           pull: false
 
       - name: Docker meta
         id: meta
-        uses: docker/metadata-action@v5
+        uses: docker/metadata-action@v6
         with:
           images: |
             ${{ env.IMAGE_NAME }}
@@ -140,7 +135,7 @@ jobs:
 
       - name: Build and push
         id: build
-        uses: docker/build-push-action@v6
+        uses: useblacksmith/build-push-action@fb9e3e6a9299c78462bfadd0d93352c316adc9b8  # v2
         with:
           context: .
           file: Dockerfile
@@ -148,8 +143,6 @@ jobs:
           tags: ${{ env.IMAGE_NAME }}
           outputs: type=image,push-by-digest=true,name-canonical=true,push=true
           platforms: linux/amd64
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
           pull: false
           build-args: |
             BASE_IMAGE=${{ env.BASE_IMAGE_NAME }}@${{ steps.base_build.outputs.digest }}
@@ -169,10 +162,11 @@ jobs:
           retention-days: 1
 
   merge:
-    runs-on: ubicloud-standard-8
+    runs-on: blacksmith-8vcpu-ubuntu-2404
     needs:
       - build-amd
       - build-arm
+    environment: dockerhub
     steps:
       - name: Download digests
         uses: actions/download-artifact@v4
@@ -182,17 +176,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
+      - name: Setup Blacksmith Builder
+        uses: useblacksmith/setup-docker-builder@ab5c1da94f53f5cd75c1038092aa276dddfccbba  # v1
 
       - 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@22a9089034f40e5a961c8808d113e2c98fb63676  # 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

@@ -14,10 +14,12 @@ data/*
 *.pem
 *.key
 *.cert
+.history
 
 # Yarn Berry
 .yarn/*
 !.yarn/patches
 !.yarn/plugins
 !.yarn/releases
+.yarn/releases
 !.yarn/sdks

.jestconfig.json

@@ -1,63 +0,0 @@
-{
-  "workerIdleMemoryLimit": "0.75",
-  "maxWorkers": "50%",
-  "transformIgnorePatterns": ["node_modules/(?!(franc|trigram-utils)/)"],
-  "projects": [
-    {
-      "displayName": "server",
-      "roots": ["<rootDir>/server", "<rootDir>/plugins"],
-      "moduleNameMapper": {
-        "^@server/(.*)$": "<rootDir>/server/$1",
-        "^@shared/(.*)$": "<rootDir>/shared/$1"
-      },
-      "setupFiles": [
-        "<rootDir>/__mocks__/console.js",
-        "<rootDir>/server/test/setupMocks.js"
-      ],
-      "setupFilesAfterEnv": ["<rootDir>/server/test/setup.ts"],
-      "globalTeardown": "<rootDir>/server/test/globalTeardown.js",
-      "testEnvironment": "node"
-    },
-    {
-      "displayName": "app",
-      "roots": ["<rootDir>/app"],
-      "moduleNameMapper": {
-        "^~/(.*)$": "<rootDir>/app/$1",
-        "^@shared/(.*)$": "<rootDir>/shared/$1",
-        "^.*[.](gif|ttf|eot|svg)$": "<rootDir>/__test__/fileMock.js"
-      },
-      "modulePaths": ["<rootDir>/app"],
-      "setupFiles": ["<rootDir>/__mocks__/window.js"],
-      "setupFilesAfterEnv": ["<rootDir>/app/test/setup.ts"],
-      "testEnvironment": "jsdom",
-      "testEnvironmentOptions": {
-        "url": "http://localhost"
-      }
-    },
-    {
-      "displayName": "shared-node",
-      "roots": ["<rootDir>/shared"],
-      "moduleNameMapper": {
-        "^@server/(.*)$": "<rootDir>/server/$1",
-        "^@shared/(.*)$": "<rootDir>/shared/$1"
-      },
-      "setupFiles": ["<rootDir>/__mocks__/console.js"],
-      "setupFilesAfterEnv": ["<rootDir>/shared/test/setup.ts"],
-      "testEnvironment": "node"
-    },
-    {
-      "displayName": "shared-jsdom",
-      "roots": ["<rootDir>/shared"],
-      "moduleNameMapper": {
-        "^~/(.*)$": "<rootDir>/app/$1",
-        "^@shared/(.*)$": "<rootDir>/shared/$1",
-        "^.*[.](gif|ttf|eot|svg)$": "<rootDir>/__test__/fileMock.js"
-      },
-      "setupFiles": ["<rootDir>/__mocks__/window.js"],
-      "testEnvironment": "jsdom",
-      "testEnvironmentOptions": {
-        "url": "http://localhost"
-      }
-    }
-  ]
-}

.nvmrc

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

.oxlintrc.json

@@ -31,7 +31,7 @@
     "no-empty-pattern": "error",
     "no-empty-static-block": "error",
     "no-ex-assign": "error",
-    "no-explicit-any": "warn",
+    "no-explicit-any": "error",
     "no-extra-boolean-cast": "error",
     "no-fallthrough": "error",
     "no-func-assign": "error",
@@ -73,9 +73,30 @@
         "eqeqeq": "error",
         "curly": "error",
         "no-console": "error",
+        "no-restricted-imports": [
+          "error",
+          {
+            "paths": [
+              {
+                "name": "prosemirror-tables",
+                "importNames": [
+                  "addRowBefore",
+                  "addRowAfter",
+                  "addColumnBefore",
+                  "addColumnAfter"
+                ],
+                "message": "Use the wrappers from shared/editor/commands/table instead, which respect the target index and place the cursor in the inserted cell."
+              }
+            ]
+          }
+        ],
+        "no-unused-expressions": "error",
         "arrow-body-style": ["error", "as-needed"],
-        "no-useless-escape": "off",
         "react/react-in-jsx-scope": "off",
+        "typescript/await-thenable": "error",
+        "typescript/no-duplicate-type-constituents": "error",
+        "typescript/no-meaningless-void-operator": "error",
+        "typescript/require-array-sort-compare": "error",
         "react/self-closing-comp": [
           "error",
           {
@@ -87,6 +108,9 @@
         "import/no-named-as-default": "off",
         "import/no-named-as-default-member": "off",
         "typescript/consistent-type-imports": "error",
+        "typescript/restrict-template-expressions": "error",
+        "typescript/no-floating-promises": "error",
+        "typescript/no-useless-default-assignment": "error",
         "no-unused-vars": [
           "error",
           {

.yarnrc.yml

@@ -1,3 +1,14 @@
 nodeLinker: node-modules
 
-npmMinimalAgeGate: 86400
+enableScripts: false
+
+npmMinimalAgeGate: 4320
+
+npmPreapprovedPackages:
+  - outline-icons
+
+# Build-time advisories that don't affect runtime request handling.
+# Re-evaluate when bumping the relevant dev/build dep.
+npmAuditIgnoreAdvisories:
+  - "1113517" # GHSA-mw96-cpmx-2vgc rollup <2.80.0 path traversal (workbox-build, build-time)
+  - "1113686" # GHSA-5c6j-r48x-rmvq serialize-javascript RCE (@rollup/plugin-terser, build-time)

AGENTS.md

@@ -9,7 +9,7 @@ There is a web client which is fully responsive and works on mobile devices.
 - **`shared/`** - Shared TypeScript types, utilities, and editor components
 - **`plugins/`** - Plugin system for extending functionality
 - **`public/`** - Static assets served directly
-- **Various config files** - TypeScript, Vite, Jest, Prettier, Oxlint configurations
+- **Various config files** - TypeScript, Vite, Vitest, Prettier, Oxlint configurations
 
 Refer to /docs/ARCHITECTURE.md for detailed architecture documentation.
 
@@ -46,6 +46,18 @@ You're an expert in the following areas:
 yarn install
 ```
 
+- When adding a `resolutions` entry to address a security advisory in a transitive dependency, target only the specific vulnerable descriptors using the `name@npm:<range>` syntax rather than overriding the package globally. Inspect `yarn.lock` to find the exact ranges requested by upstream packages and add one entry per vulnerable range, e.g.:
+
+```json
+"resolutions": {
+  "qs@npm:^6.5.2": "^6.14.2",
+  "qs@npm:^6.11.0": "^6.14.2",
+  "qs@npm:^6.14.0": "^6.14.2"
+}
+```
+
+This keeps overrides scoped to the affected dependents and avoids forcing unrelated consumers onto an incompatible version.
+
 ## TypeScript Usage
 
 - Use strict mode.
@@ -70,7 +82,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
@@ -140,7 +152,7 @@ yarn sequelize migration:create --name=add-field-to-table
 
 ## Testing
 
-- Run tests with Jest:
+- Run tests with Vitest:
 
 ```bash
 # Run a specific test file (preferred)
@@ -188,6 +200,7 @@ yarn test:shared   # All shared code tests
 ## Security
 
 - Sanitize all user input.
+- Always use `sanitizeUrl()` when setting `href` or `src` from user-controlled data in ProseMirror `toDOM` methods, regardless of whether it is imported via an alias or a relative path. Unlike React components, `toDOM` writes raw DOM and does not sanitize attribute values.
 - Use CSRF protection.
 - Use rateLimiter middleware for sensitive endpoints.
 - Follow OWASP guidelines.

Dockerfile

@@ -6,7 +6,7 @@ ARG APP_PATH
 WORKDIR $APP_PATH
 
 # ---
-FROM node:22.21.0-slim AS runner
+FROM node:24.16.0-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.16.0 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.4.0
+Licensed Work:        Outline 1.8.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-27
+Change Date:          2030-06-06
 
 Change License:       Apache License, Version 2.0
 

README.md

@@ -27,23 +27,23 @@ Please see the [documentation](https://docs.getoutline.com/s/hosting/) for runni
 
 If you have questions or improvements for the docs please create a thread in [GitHub discussions](https://github.com/outline/outline/discussions).
 
-# Development
+# Contributing
 
-There is a short guide for [setting up a development environment](https://docs.getoutline.com/s/hosting/doc/local-development-5hEhFRXow7) if you wish to contribute changes, fixes, and improvements to Outline.
+> **Note:** Please do not submit AI-generated pull requests. We receive a high volume of mass, low-quality PRs generated by AI tools like Claude, ChatGPT, and Copilot from contributors who are unfamiliar with the codebase. These PRs are almost never mergeable and waste maintainer time reviewing them. If you’d like to contribute, please take the time to understand the codebase and write your changes thoughtfully.
 
-## Contributing
+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.
 
-Outline is built and maintained by a small team – we'd love your help to fix bugs and add features!
-
-Before submitting a pull request _please_ discuss with the core team by creating or commenting in an issue on [GitHub](https://www.github.com/outline/outline/issues) – we'd also love to hear from you in the [discussions](https://www.github.com/outline/outline/discussions). This way we can ensure that an approach is agreed on before code is written. This will result in a much higher likelihood of your code being accepted.
-
-If you’re looking for ways to get started, here's a list of ways to help us improve Outline:
+If you’re looking for ways to get started, here’s a list of ways to help us improve Outline:
 
 - [Translation](docs/TRANSLATION.md) into other languages
 - Issues with [`good first issue`](https://github.com/outline/outline/labels/good%20first%20issue) label
 - Performance improvements, both on server and frontend
 - Developer happiness and documentation
-- Bugs and other issues listed on GitHub
+- Bugs, quality fixes, and other issues listed on GitHub
+
+# Development
+
+There is a short guide for [setting up a development environment](https://docs.getoutline.com/s/hosting/doc/local-development-5hEhFRXow7) if you wish to contribute changes, fixes, and improvements to Outline.
 
 ## Architecture
 
@@ -61,7 +61,7 @@ can be enabled for all categories by setting `DEBUG=*` or for specific categorie
 
 We aim to have sufficient test coverage for critical parts of the application and aren't aiming for 100% unit test coverage. All API endpoints and anything authentication related should be thoroughly tested.
 
-To add new tests, write your tests with [Jest](https://facebook.github.io/jest/) and add a file with `.test.ts` extension next to the tested code.
+To add new tests, write your tests with [Vitest](https://vitest.dev/) and add a file with `.test.ts` extension next to the tested code.
 
 ```shell
 # To run all tests
@@ -72,7 +72,7 @@ make watch
 ```
 
 Once the test database is created with `make test` you may individually run
-frontend and backend tests directly with jest:
+frontend and backend tests directly with vitest:
 
 ```shell
 # To run backend tests

app/.oxlintrc.json

@@ -1,5 +1,6 @@
 {
   "extends": ["../.oxlintrc.json"],
+  "ignorePatterns": ["**/*.d.ts"],
   "plugins": ["oxc", "eslint", "typescript", "react"],
   "overrides": [
     {

app/actions/definitions/apiKeys.tsx

@@ -1,5 +1,8 @@
-import { PlusIcon, TrashIcon } from "outline-icons";
+import copy from "copy-to-clipboard";
+import { CopyIcon, PlusIcon, TrashIcon } from "outline-icons";
+import { toast } from "sonner";
 import stores from "~/stores";
+import env from "~/env";
 import type ApiKey from "~/models/ApiKey";
 import ApiKeyNew from "~/scenes/ApiKeyNew";
 import ApiKeyRevokeDialog from "~/scenes/Settings/components/ApiKeyRevokeDialog";
@@ -25,6 +28,22 @@ export const createApiKey = createAction({
   },
 });
 
+export const copyApiKeyFactory = ({ apiKey }: { apiKey: ApiKey }) =>
+  createAction({
+    name: ({ t }) => t("Copy"),
+    analyticsName: "Copy API key",
+    section: SettingsSection,
+    icon: <CopyIcon />,
+    visible: () => !!apiKey.value,
+    perform: ({ t }) => {
+      copy(apiKey.value, {
+        debug: env.ENVIRONMENT !== "production",
+        format: "text/plain",
+      });
+      toast.success(t("API key copied"));
+    },
+  });
+
 export const revokeApiKeyFactory = ({ apiKey }: { apiKey: ApiKey }) =>
   createAction({
     name: ({ t, isMenu }) =>

app/actions/definitions/collections.tsx

@@ -29,8 +29,8 @@ import DynamicCollectionIcon from "~/components/Icons/CollectionIcon";
 import { getHeaderExpandedKey } from "~/components/Sidebar/components/Header";
 import {
   createAction,
-  createActionWithChildren,
   createInternalLinkAction,
+  createActionWithChildren,
 } from "~/actions";
 import { ActiveCollectionSection, CollectionSection } from "~/actions/sections";
 import { setPersistedState } from "~/hooks/usePersistedState";
@@ -152,7 +152,7 @@ export const importDocument = createAction({
     getActivePolicies(Collection).some(
       (policy) => policy.abilities.createDocument
     ),
-  perform: ({ getActiveModel, stores }) => {
+  perform: ({ t, getActiveModel, stores }) => {
     const { documents } = stores;
     const collection = getActiveModel(Collection);
     if (!collection) {
@@ -165,6 +165,7 @@ export const importDocument = createAction({
     input.onchange = async (ev) => {
       const files = getEventFiles(ev);
       const file = files[0];
+      const toastId = toast.loading(`${t("Uploading")}…`);
 
       try {
         const document = await documents.import(file, null, collection.id, {
@@ -173,6 +174,8 @@ export const importDocument = createAction({
         history.push(document.path);
       } catch (err) {
         toast.error(err.message);
+      } finally {
+        toast.dismiss(toastId);
       }
     };
 
@@ -525,17 +528,11 @@ export const createTemplate = createInternalLinkAction({
   keywords: "new create template",
   visible: ({ getActivePolicies }) =>
     getActivePolicies(Collection).some(
-      (policy) => policy.abilities.createDocument
+      (policy) => policy.abilities.createTemplate
     ),
-  to: ({ getActiveModel, sidebarContext }) => {
+  to: ({ getActiveModel }) => {
     const collection = getActiveModel(Collection);
-    const [pathname, search] = newTemplatePath(collection?.id).split("?");
-
-    return {
-      pathname,
-      search,
-      state: { sidebarContext },
-    };
+    return newTemplatePath(collection?.id);
   },
 });
 

app/actions/definitions/documents.tsx

@@ -1,6 +1,6 @@
 import copy from "copy-to-clipboard";
 import invariant from "invariant";
-import uniqBy from "lodash/uniqBy";
+import { capitalize, uniqBy } from "es-toolkit/compat";
 import {
   DownloadIcon,
   DuplicateIcon,
@@ -32,22 +32,25 @@ 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 { isMobile } from "@shared/utils/browser";
 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 { ProsemirrorHelper } from "~/models/helpers/ProsemirrorHelper";
 import DocumentPermanentDelete from "~/scenes/DocumentPermanentDelete";
 import DocumentPublish from "~/scenes/DocumentPublish";
 import DeleteDocumentsInTrash from "~/scenes/Trash/components/DeleteDocumentsInTrash";
 import ConfirmationDialog from "~/components/ConfirmationDialog";
-import DocumentCopy from "~/components/DocumentCopy";
+import DocumentCopy from "~/components/DocumentExplorer/DocumentCopy";
 import { DocumentDownload } from "~/components/DocumentDownload";
 import MarkdownIcon from "~/components/Icons/MarkdownIcon";
 import { getHeaderExpandedKey } from "~/components/Sidebar/components/Header";
@@ -70,17 +73,27 @@ import {
   homePath,
   newDocumentPath,
   newNestedDocumentPath,
+  newSiblingDocumentPath,
   searchPath,
   documentPath,
   urlify,
+  desktopify,
   trashPath,
   documentEditPath,
 } from "~/utils/routeHelpers";
-import capitalize from "lodash/capitalize";
+import { documentBreadcrumbText } from "~/components/DocumentBreadcrumb";
 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")
@@ -96,19 +109,21 @@ export const openDocument = createActionWithChildren({
   shortcut: ["o", "d"],
   keywords: "go to",
   icon: <DocumentIcon />,
-  children: ({ stores }) => {
+  children: ({ stores, t }) => {
     const nodes = stores.collections.navigationNodes.reduce(
       (acc, node) => [...acc, ...node.children],
       [] as NavigationNode[]
     );
     const documents = stores.documents.orderedData;
 
-    return uniqBy([...documents, ...nodes], "id").map((item) =>
-      createInternalLinkAction({
+    return uniqBy([...documents, ...nodes], "id").map((item) => {
+      const document = stores.documents.get(item.id);
+      return createInternalLinkAction({
         // Note: using url which includes the slug rather than id here to bust
         // cache if the document is renamed
         id: item.url,
         name: item.title,
+        description: document ? documentBreadcrumbText(document, t) : undefined,
         icon: item.icon ? (
           <Icon
             value={item.icon}
@@ -116,12 +131,12 @@ export const openDocument = createActionWithChildren({
             color={item.color ?? undefined}
           />
         ) : (
-          <DocumentIcon />
+          <DocumentIcon outline={item.isDraft} />
         ),
         section: DocumentSection,
         to: item.url,
-      })
-    );
+      });
+    });
   },
 });
 
@@ -132,18 +147,13 @@ export const editDocument = createInternalLinkAction({
   keywords: "edit",
   icon: <EditIcon />,
   visible: ({ activeDocumentId, stores }) => {
-    const { auth, documents, policies } = stores;
+    const { auth, policies } = stores;
 
-    const document = activeDocumentId
-      ? documents.get(activeDocumentId)
-      : undefined;
     const can = activeDocumentId
       ? policies.abilities(activeDocumentId)
       : undefined;
 
-    return (
-      !!can?.update && !!auth.user?.separateEditMode && !document?.template
-    );
+    return !!can?.update && !!auth.user?.separateEditMode;
   },
   to: ({ activeDocumentId, stores }) => {
     const document = activeDocumentId
@@ -200,59 +210,61 @@ 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 "";
-    }
+  return siblings?.findIndex((node) => node.id === document.id) ?? -1;
+}
 
-    const [pathname, search] = newDocumentPath(activeCollectionId, {
-      templateId: activeDocumentId,
-    }).split("?");
-
-    return {
-      pathname,
-      search,
-      state: { sidebarContext },
-    };
-  },
-});
+/**
+ * Determines whether the user can create a sibling of the given document.
+ * A sibling shares the document's parent, so this mirrors the backend's
+ * create authorization: create permission on the parent document, or on the
+ * collection when the document is at the root.
+ *
+ * @param stores - the root stores.
+ * @param document - the document to create a sibling of.
+ * @returns true if the user can create a sibling.
+ */
+function canCreateSiblingDocument(
+  stores: ActionContext["stores"],
+  document: { collectionId?: string | null; parentDocumentId?: string }
+): boolean {
+  return document.parentDocumentId
+    ? stores.policies.abilities(document.parentDocumentId).createChildDocument
+    : !!document.collectionId &&
+        stores.policies.abilities(document.collectionId).createDocument;
+}
 
 export const createNestedDocument = createInternalLinkAction({
-  name: ({ t }) => t("New nested document"),
+  name: ({ t }) => t("Nested document"),
   analyticsName: "New document",
   section: ActiveDocumentSection,
-  icon: <NewDocumentIcon />,
-  keywords: "create",
+  keywords: "create nested",
   visible: ({ currentTeamId, activeDocumentId, stores }) =>
     !!currentTeamId &&
     !!activeDocumentId &&
@@ -270,6 +282,151 @@ 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);
+    if (!document?.collectionId) {
+      return false;
+    }
+    const collection = stores.collections.get(document.collectionId);
+    if (collection?.sort.field === "title") {
+      return false;
+    }
+    return canCreateSiblingDocument(stores, document);
+  },
+  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);
+    if (!document?.collectionId) {
+      return false;
+    }
+    const collection = stores.collections.get(document.collectionId);
+    if (collection?.sort.field === "title") {
+      return false;
+    }
+    return canCreateSiblingDocument(stores, document);
+  },
+  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 },
+    };
+  },
+});
+
+function isAlphabeticallySorted(
+  stores: ActionContext["stores"],
+  activeDocumentId: string
+): boolean {
+  const document = stores.documents.get(activeDocumentId);
+  if (!document?.collectionId) {
+    return false;
+  }
+  const collection = stores.collections.get(document.collectionId);
+  return collection?.sort.field === "title";
+}
+
+export const createNewDocument = createActionWithChildren({
+  name: ({ t }) => t("New document"),
+  analyticsName: "New document",
+  section: ActiveDocumentSection,
+  icon: <NewDocumentIcon />,
+  keywords: "create",
+  visible: ({ currentTeamId, activeDocumentId, stores }) => {
+    if (!activeDocumentId || !currentTeamId) {
+      return false;
+    }
+    if (!stores.policies.abilities(currentTeamId).createDocument) {
+      return false;
+    }
+    return !isAlphabeticallySorted(stores, activeDocumentId);
+  },
+  children: [createDocumentBefore, createDocumentAfter, createNestedDocument],
+});
+
+export const createNewDocumentInAlphabeticalCollection =
+  createInternalLinkAction({
+    name: ({ t }) => t("New document"),
+    analyticsName: "New document",
+    section: ActiveDocumentSection,
+    icon: <NewDocumentIcon />,
+    keywords: "create",
+    visible: ({ currentTeamId, activeDocumentId, stores }) => {
+      if (!activeDocumentId || !currentTeamId) {
+        return false;
+      }
+      if (!stores.policies.abilities(currentTeamId).createDocument) {
+        return false;
+      }
+      if (!stores.policies.abilities(activeDocumentId).createChildDocument) {
+        return false;
+      }
+      return isAlphabeticallySorted(stores, activeDocumentId);
+    },
+    to: ({ activeDocumentId, sidebarContext }) => {
+      const [pathname, search] =
+        newNestedDocumentPath(activeDocumentId).split("?");
+
+      return {
+        pathname,
+        search,
+        state: { sidebarContext },
+      };
+    },
+  });
+
 export const starDocument = createAction({
   name: ({ t }) => t("Star"),
   analyticsName: "Star document",
@@ -346,7 +503,7 @@ export const publishDocument = createAction({
       return;
     }
 
-    if (document?.collectionId || document?.template) {
+    if (document?.collectionId) {
       await document.save(undefined, {
         publish: true,
       });
@@ -495,7 +652,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 }) => {
@@ -652,8 +812,6 @@ export const copyDocumentAsPlainText = createAction({
       ? stores.documents.get(activeDocumentId)
       : undefined;
     if (document) {
-      const { ProsemirrorHelper } =
-        await import("~/models/helpers/ProsemirrorHelper");
       copy(ProsemirrorHelper.toPlainText(document));
       toast.success(t("Text copied to clipboard"));
     }
@@ -870,7 +1028,59 @@ 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 &&
+      !isMobile()
+    );
+  },
+  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: ["Control+Alt+KeyP"],
+  visible: ({ activeDocumentId }) => !!activeDocumentId && !isMobile(),
+  perform: ({ activeDocumentId, stores }) => {
+    if (stores.ui.presentationData) {
+      stores.ui.setPresentingDocument(null);
+      return;
+    }
+
+    const document = activeDocumentId
+      ? stores.documents.get(activeDocumentId)
+      : undefined;
+    if (!document) {
+      return;
+    }
+
+    stores.ui.setPresentingDocument(document);
   },
 });
 
@@ -891,7 +1101,7 @@ export const importDocument = createAction({
 
     return false;
   },
-  perform: ({ activeDocumentId, activeCollectionId, stores }) => {
+  perform: ({ t, activeDocumentId, activeCollectionId, stores }) => {
     const { documents } = stores;
     const input = document.createElement("input");
     input.type = "file";
@@ -900,6 +1110,7 @@ export const importDocument = createAction({
     input.onchange = async (ev) => {
       const files = getEventFiles(ev);
       const file = files[0];
+      const toastId = toast.loading(`${t("Uploading")}…`);
 
       try {
         const document = await documents.import(
@@ -913,6 +1124,8 @@ export const importDocument = createAction({
         history.push(document.url);
       } catch (err) {
         toast.error(err.message);
+      } finally {
+        toast.dismiss(toastId);
       }
     };
 
@@ -930,12 +1143,12 @@ export const createTemplateFromDocument = createAction({
     const document = activeDocumentId
       ? stores.documents.get(activeDocumentId)
       : undefined;
-    if (document?.isTemplate || !document?.isActive) {
+    if (!document?.isActive) {
       return false;
     }
     return !!(
       !!activeCollectionId &&
-      stores.policies.abilities(activeCollectionId).updateDocument
+      stores.policies.abilities(activeCollectionId).createTemplate
     );
   },
   perform: ({ activeDocumentId, stores, t, event }) => {
@@ -982,46 +1195,8 @@ export const searchDocumentsForQuery = (query: string) =>
     visible: ({ location }) => location.pathname !== searchPath(),
   });
 
-export const moveTemplateToWorkspace = createAction({
-  name: ({ t }) => t("Move to workspace"),
-  analyticsName: "Move template to workspace",
-  section: DocumentSection,
-  icon: <MoveIcon />,
-  iconInContextMenu: false,
-  visible: ({ activeDocumentId, stores }) => {
-    if (!activeDocumentId) {
-      return false;
-    }
-    const document = stores.documents.get(activeDocumentId);
-    if (!document || !document.template || document.isWorkspaceTemplate) {
-      return false;
-    }
-    return !!stores.policies.abilities(activeDocumentId).move;
-  },
-  perform: async ({ activeDocumentId, stores }) => {
-    if (activeDocumentId) {
-      const document = stores.documents.get(activeDocumentId);
-      if (!document) {
-        return;
-      }
-
-      await document.move({
-        collectionId: null,
-      });
-    }
-  },
-});
-
 export const moveDocumentToCollection = createAction({
-  name: ({ activeDocumentId, stores, t }) => {
-    if (!activeDocumentId) {
-      return t("Move");
-    }
-    const document = stores.documents.get(activeDocumentId);
-    return document?.template && document?.collectionId
-      ? t("Move to collection")
-      : t("Move");
-  },
+  name: ({ t }) => t("Move"),
   analyticsName: "Move document",
   section: ActiveDocumentSection,
   icon: <MoveIcon />,
@@ -1059,8 +1234,7 @@ export const moveDocument = createAction({
       return false;
     }
     const document = stores.documents.get(activeDocumentId);
-    // Don't show the button if this is a non-workspace template.
-    if (!document || (document.template && !document.isWorkspaceTemplate)) {
+    if (!document) {
       return false;
     }
     return !!stores.policies.abilities(activeDocumentId).move;
@@ -1068,25 +1242,6 @@ export const moveDocument = createAction({
   perform: moveDocumentToCollection.perform,
 });
 
-export const moveTemplate = createActionWithChildren({
-  name: ({ t }) => t("Move"),
-  analyticsName: "Move document",
-  section: ActiveDocumentSection,
-  icon: <MoveIcon />,
-  visible: ({ activeDocumentId, stores }) => {
-    if (!activeDocumentId) {
-      return false;
-    }
-    const document = stores.documents.get(activeDocumentId);
-    // Don't show the menu if this is not a template (or) a workspace template.
-    if (!document || !document.template || document.isWorkspaceTemplate) {
-      return false;
-    }
-    return !!stores.policies.abilities(activeDocumentId).move;
-  },
-  children: [moveTemplateToWorkspace, moveDocumentToCollection],
-});
-
 export const archiveDocument = createAction({
   name: ({ t }) => `${t("Archive")}…`,
   analyticsName: "Archive document",
@@ -1145,10 +1300,7 @@ export const restoreDocument = createAction({
       : undefined;
     const can = stores.policies.abilities(document.id);
 
-    return (
-      !!(document.isWorkspaceTemplate || collection?.isActive) &&
-      !!(can.restore || can.unarchive)
-    );
+    return !!collection?.isActive && !!(can.restore || can.unarchive);
   },
   perform: async ({ t, stores, activeDocumentId }) => {
     const document = activeDocumentId
@@ -1185,10 +1337,7 @@ export const restoreDocumentToCollection = createActionWithChildren({
       ? stores.collections.get(document.collectionId)
       : undefined;
 
-    return (
-      !(document.isWorkspaceTemplate || collection?.isActive) &&
-      !!(can.restore || can.unarchive)
-    );
+    return !collection?.isActive && !!(can.restore || can.unarchive);
   },
   children: ({ t, activeDocumentId, stores }) => {
     const { collections, documents, policies } = stores;
@@ -1330,7 +1479,7 @@ export const openDocumentComments = createAction({
       return;
     }
 
-    stores.ui.toggleComments();
+    stores.ui.set({ rightSidebar: "comments" });
   },
 });
 
@@ -1365,6 +1514,7 @@ export const openDocumentInsights = createAction({
   name: ({ t }) => t("Insights"),
   analyticsName: "Open document insights",
   section: ActiveDocumentSection,
+  shortcut: [`Meta+Shift+I`],
   icon: <GraphIcon />,
   visible: ({ activeDocumentId, stores }) => {
     const can = stores.policies.abilities(activeDocumentId ?? "");
@@ -1372,12 +1522,7 @@ export const openDocumentInsights = createAction({
       ? stores.documents.get(activeDocumentId)
       : undefined;
 
-    return (
-      !!activeDocumentId &&
-      can.listViews &&
-      !document?.isTemplate &&
-      !document?.isDeleted
-    );
+    return !!activeDocumentId && can.listViews && !document?.isDeleted;
   },
   perform: ({ activeDocumentId, stores, t }) => {
     const document = activeDocumentId
@@ -1456,6 +1601,8 @@ export const rootDocumentActions = [
   archiveDocument,
   createDocument,
   createDraftDocument,
+  createNewDocument,
+  createNewDocumentInAlphabeticalCollection,
   createNestedDocument,
   createTemplateFromDocument,
   deleteDocument,
@@ -1477,16 +1624,17 @@ export const rootDocumentActions = [
   searchInDocument,
   duplicateDocument,
   leaveDocument,
-  moveTemplateToWorkspace,
   moveDocumentToCollection,
   openRandomDocument,
   permanentlyDeleteDocument,
   permanentlyDeleteDocumentsInTrash,
+  presentDocument,
   printDocument,
   pinDocumentToCollection,
   pinDocumentToHome,
   openDocumentComments,
   openDocumentHistory,
   openDocumentInsights,
+  openDocumentInDesktop,
   shareDocument,
 ];

app/actions/definitions/emojis.tsx

@@ -2,7 +2,7 @@ import { PlusIcon } from "outline-icons";
 import { createAction } from "~/actions";
 import { TeamSection } from "../sections";
 import stores from "~/stores";
-import { EmojiCreateDialog } from "~/components/EmojiCreateDialog";
+import { EmojiCreateDialog } from "~/components/EmojiDialog/EmojiCreateDialog";
 
 export const createEmoji = createAction({
   name: ({ t }) => `${t("New emoji")}…`,

app/actions/definitions/navigation.tsx

@@ -241,7 +241,10 @@ export const logout = createAction({
   section: NavigationSection,
   icon: <LogoutIcon />,
   perform: async () => {
-    await stores.auth.logout({ userInitiated: true });
+    await stores.auth.logout({
+      userInitiated: true,
+      clearCache: true,
+    });
   },
 });
 

app/actions/definitions/revisions.tsx

@@ -3,6 +3,7 @@ import { LinkIcon, RestoreIcon, TrashIcon, DownloadIcon } from "outline-icons";
 import { matchPath } from "react-router-dom";
 import { toast } from "sonner";
 import { ExportContentType } from "@shared/types";
+import Revision from "~/models/Revision";
 import stores from "~/stores";
 import { createAction, createActionWithChildren } from "~/actions";
 import { RevisionSection } from "~/actions/sections";
@@ -21,7 +22,7 @@ export const restoreRevision = createAction({
   section: RevisionSection,
   visible: ({ activeDocumentId }) =>
     !!activeDocumentId && stores.policies.abilities(activeDocumentId).update,
-  perform: async ({ event, location, activeDocumentId }) => {
+  perform: async ({ event, location, activeDocumentId, getActiveModel }) => {
     event?.preventDefault();
     if (!activeDocumentId) {
       return;
@@ -30,7 +31,10 @@ export const restoreRevision = createAction({
     const match = matchPath<{ revisionId: string }>(location.pathname, {
       path: matchDocumentHistory,
     });
-    const revisionId = match?.params.revisionId;
+    const revisionId = getActiveModel(Revision)?.id ?? match?.params.revisionId;
+    if (!revisionId) {
+      return;
+    }
 
     const document = stores.documents.get(activeDocumentId);
     if (!document) {

app/actions/definitions/templates.tsx

@@ -0,0 +1,230 @@
+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 { ProsemirrorHelper } from "~/models/helpers/ProsemirrorHelper";
+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) {
+      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

@@ -17,8 +17,12 @@ import Analytics from "~/utils/Analytics";
 import history from "~/utils/history";
 import type { Action as KbarAction } from "kbar";
 
-export function resolve<T>(value: any, context: ActionContext): T {
-  return typeof value === "function" ? value(context) : value;
+export function resolve<T>(value: unknown, context: ActionContext): T {
+  return (
+    typeof value === "function"
+      ? (value as (context: ActionContext) => T)(context)
+      : value
+  ) as T;
 }
 
 export const ActionSeparator: TActionSeparator = {
@@ -132,6 +136,7 @@ export function actionToMenuItem(
             tooltip: resolve<React.ReactChild>(action.tooltip, context),
             selected: resolve<boolean>(action.selected, context),
             dangerous: action.dangerous,
+            shortcut: action.shortcut,
             onClick: () => performAction(action, context),
           };
 
@@ -143,6 +148,7 @@ export function actionToMenuItem(
             icon,
             visible,
             disabled,
+            shortcut: action.shortcut,
             to,
           };
         }
@@ -154,6 +160,7 @@ export function actionToMenuItem(
             icon,
             visible,
             disabled,
+            shortcut: action.shortcut,
             href: action.target
               ? { url: action.url, target: action.target }
               : action.url,
@@ -210,6 +217,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 +237,7 @@ export function actionToKBar(
           section,
           keywords: action.keywords,
           shortcut: action.shortcut,
+          subtitle,
           icon,
           priority,
           perform: () => performAction(action, context),
@@ -254,6 +263,7 @@ export function actionToKBar(
           keywords: action.keywords,
           shortcut: action.shortcut,
           icon,
+          subtitle,
           priority,
         },
         ...children.map((child) => ({

app/actions/sections.ts

@@ -13,8 +13,15 @@ ActiveCollectionSection.priority = 0.8;
 
 export const DeveloperSection = ({ t }: ActionContext) => t("Debug");
 
+export const DateSection = ({ t }: ActionContext) => t("Date");
+
+DateSection.priority = 1;
+
 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 +31,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 +65,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/ActionButton.tsx

@@ -1,4 +1,5 @@
 /* oxlint-disable react/prop-types */
+import { observer } from "mobx-react";
 import * as React from "react";
 import type { Props as TooltipProps } from "~/components/Tooltip";
 import Tooltip from "~/components/Tooltip";
@@ -85,4 +86,4 @@ const ActionButton = React.forwardRef<HTMLButtonElement, Props>(
   }
 );
 
-export default ActionButton;
+export default observer(ActionButton);

app/components/Analytics.tsx

@@ -1,6 +1,6 @@
 /* oxlint-disable prefer-rest-params */
 /* global ga */
-import escape from "lodash/escape";
+import { escape } from "es-toolkit/compat";
 import * as React from "react";
 import type { PublicEnv } from "@shared/types";
 import { IntegrationService } from "@shared/types";

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/Authenticated.tsx

@@ -1,5 +1,5 @@
 import { observer } from "mobx-react";
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { Redirect } from "react-router-dom";
 import useCurrentUser from "~/hooks/useCurrentUser";
@@ -16,6 +16,7 @@ const Authenticated = ({ children }: Props) => {
   const { i18n } = useTranslation();
   const user = useCurrentUser({ rejectOnEmpty: false });
   const language = user?.language;
+  const hasLoggedOut = useRef(false);
 
   // Watching for language changes here as this is the earliest point we might have the user
   // available and means we can start loading translations faster
@@ -23,20 +24,36 @@ const Authenticated = ({ children }: Props) => {
     void changeLanguage(language, i18n);
   }, [i18n, language]);
 
+  const shouldLogout = !auth.authenticated && !auth.isFetching;
+
+  // Passive logout when we land here without an authenticated session – note we
+  // intentionally do not revoke the server-side token, as that would clobber
+  // the session in any other tab that may have already re-authenticated.
+  useEffect(() => {
+    if (shouldLogout && !hasLoggedOut.current) {
+      hasLoggedOut.current = true;
+      void auth.logout({
+        savePath: true,
+        clearCache: false,
+        revokeToken: false,
+      });
+    }
+  }, [shouldLogout, auth]);
+
+  useEffect(() => {
+    if (auth.logoutRedirectUri) {
+      window.location.href = auth.logoutRedirectUri;
+    }
+  }, [auth.logoutRedirectUri]);
+
   if (auth.authenticated) {
     return children;
   }
 
-  if (auth.isFetching) {
+  if (auth.isFetching || auth.logoutRedirectUri) {
     return <LoadingIndicator />;
   }
 
-  void auth.logout({ savePath: true });
-
-  if (auth.logoutRedirectUri) {
-    window.location.href = auth.logoutRedirectUri;
-    return null;
-  }
   return <Redirect to="/" />;
 };
 

app/components/AuthenticatedLayout.tsx

@@ -1,42 +1,34 @@
-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 { DndProvider } from "react-dnd";
+import { useLocation } from "react-router-dom";
+import { EditorAwareHTML5Backend } from "~/components/EditorAwareHTML5Backend";
 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 useKeyDown from "~/hooks/useKeyDown";
 import { usePostLoginPath } from "~/hooks/useLastVisitedPath";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
+import Logger from "~/utils/Logger";
 import history from "~/utils/history";
+import { isModKey } from "@shared/utils/keyboard";
 import lazyWithRetry from "~/utils/lazyWithRetry";
 import {
   searchPath,
   newDocumentPath,
   settingsPath,
-  matchDocumentHistory,
-  matchDocumentSlug as slug,
+  homePath,
 } 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")
 );
@@ -49,11 +41,16 @@ 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();
 
+  useKeyDown(".", (event) => {
+    if (isModKey(event)) {
+      ui.toggleCollapsedSidebar();
+    }
+  });
+
   const goToSearch = (ev: KeyboardEvent) => {
     if (!ev.metaKey && !ev.ctrlKey) {
       ev.preventDefault();
@@ -73,67 +70,54 @@ const AuthenticatedLayout: React.FC = ({ children }: Props) => {
     history.push(newDocumentPath(activeCollectionId));
   };
 
+  React.useEffect(() => {
+    const postLoginPath = spendPostLoginPath();
+    if (postLoginPath) {
+      try {
+        history.replace(postLoginPath);
+      } catch (err) {
+        Logger.warn("Failed to navigate to post login path, falling back", {
+          path: postLoginPath,
+          error: err,
+        });
+        history.replace(homePath());
+      }
+    }
+  }, [spendPostLoginPath]);
+
   if (auth.isSuspended) {
     return <ErrorSuspended />;
   }
 
-  const postLoginPath = spendPostLoginPath();
-  if (postLoginPath) {
-    return <Redirect to={postLoginPath} />;
-  }
+  const isSettings = location.pathname.startsWith(settingsPath());
 
   const sidebar = (
     <Fade>
-      <Switch>
-        <Route path={settingsPath()} component={SettingsSidebar} />
-        <Route component={Sidebar} />
-      </Switch>
+      <React.Suspense fallback={null}>
+        {isSettings && <SettingsSidebar />}
+      </React.Suspense>
+      <div style={isSettings ? { display: "none" } : undefined}>
+        <Sidebar />
+      </div>
     </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}>
+          <DndProvider backend={EditorAwareHTML5Backend}>
+            <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>
+          </DndProvider>
+        </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 (
@@ -102,23 +113,20 @@ const Item = styled(Link)<{ $highlight: boolean; $withIcon: boolean }>`
   ${ellipsis()}
   ${undraggableOnDesktop()}
 
-  display: flex;
   flex-shrink: 1;
   min-width: 0;
   cursor: var(--pointer);
   color: ${s("text")};
   font-size: 15px;
   height: 24px;
+  line-height: 24px;
   font-weight: ${(props) => (props.$highlight ? "500" : "inherit")};
-  margin-left: ${(props) => (props.$withIcon ? "4px" : "0")};
-
-  svg {
-    flex-shrink: 0;
-  }
+  margin-inline-start: ${(props) => (props.$withIcon ? "4px" : "0")};
+  max-width: 460px;
 
   &:hover {
     text-decoration: underline;
   }
 `;
 
-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";
@@ -123,7 +125,7 @@ const Label = styled.span<{ hasIcon?: boolean }>`
   white-space: nowrap;
   text-overflow: ellipsis;
 
-  ${(props) => props.hasIcon && "padding-left: 4px;"};
+  ${(props) => props.hasIcon && "padding-inline-start: 4px;"};
 `;
 
 export const Inner = styled.span<{
@@ -133,13 +135,13 @@ export const Inner = styled.span<{
 }>`
   display: flex;
   padding: 0 8px;
-  padding-right: ${(props) => (props.disclosure ? 2 : 8)}px;
+  padding-inline-end: ${(props) => (props.disclosure ? 2 : 8)}px;
   line-height: ${(props) => (props.hasIcon ? 24 : 32)}px;
   justify-content: center;
   align-items: center;
   min-height: 32px;
 
-  ${(props) => props.hasIcon && props.hasText && "padding-left: 4px;"};
+  ${(props) => props.hasIcon && props.hasText && "padding-inline-start: 4px;"};
   ${(props) => props.hasIcon && !props.hasText && "padding: 0 4px;"};
 `;
 
@@ -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/CircularProgressBar.tsx

@@ -22,9 +22,7 @@ const Circle = ({
   if (percentage) {
     // because the circle is so small, anything greater than 85% appears like 100%
     percentage = percentage > 85 && percentage < 100 ? 85 : percentage;
-    strokePercentage = percentage
-      ? ((100 - percentage) * circumference) / 100
-      : 0;
+    strokePercentage = ((100 - percentage) * circumference) / 100;
   }
 
   return (

app/components/Collaborators.tsx

@@ -1,7 +1,4 @@
-import filter from "lodash/filter";
-import isEqual from "lodash/isEqual";
-import orderBy from "lodash/orderBy";
-import uniq from "lodash/uniq";
+import { filter, isEqual, orderBy, uniq } from "es-toolkit/compat";
 import { observer } from "mobx-react";
 import { useState, useMemo, useEffect, useCallback } from "react";
 import { useTranslation } from "react-i18next";
@@ -82,10 +79,10 @@ function Collaborators(props: Props) {
   // Memoize ids to avoid unnecessary effect executions
   const missingUserIds = useMemo(
     () =>
-      uniq([...document.collaboratorIds, ...Array.from(presentIds)])
+      uniq([...collaboratorIdsSet, ...presentIds])
         .filter((userId) => !users.get(userId))
         .sort(),
-    [document.collaboratorIds, presentIds, users]
+    [collaboratorIdsSet, presentIds, users]
   );
 
   useEffect(() => {
@@ -125,8 +122,8 @@ function Collaborators(props: Props) {
 
       return (
         <AvatarWithPresence
-          {...rest}
           key={collaborator.id}
+          {...rest}
           user={collaborator}
           isPresent={isPresent}
           isEditing={isEditing}
@@ -146,7 +143,14 @@ function Collaborators(props: Props) {
         />
       );
     },
-    [presentIds, editingIds, observingUserId, currentUserId, handleAvatarClick]
+    [
+      presentIds,
+      editingIds,
+      observingUserId,
+      currentUserId,
+      handleAvatarClick,
+      t,
+    ]
   );
 
   if (!document.insightsEnabled) {

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: 14px;
+
+  &: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

@@ -1,4 +1,4 @@
-import uniq from "lodash/uniq";
+import { uniq } from "es-toolkit/compat";
 import { observer } from "mobx-react";
 import { useMemo, useEffect, useCallback, Suspense } from "react";
 import { Controller, useForm } from "react-hook-form";
@@ -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";
@@ -23,17 +25,19 @@ import useCurrentTeam from "~/hooks/useCurrentTeam";
 import useStores from "~/hooks/useStores";
 import { EmptySelectValue } from "~/types";
 import { HStack } from "../primitives/HStack";
+import { useDialogContext } from "~/components/DialogContext";
 
 const IconPicker = createLazyComponent(() => import("~/components/IconPicker"));
 
-export interface FormData {
+export type FormData = {
   name: string;
   icon: string;
   color: string | null;
   sharing: boolean;
   permission: CollectionPermission | undefined;
   commenting?: boolean | null;
-}
+  templateManagement: CollectionPermission;
+};
 
 const useIconColor = (collection?: Collection) => {
   const { collections } = useStores();
@@ -64,9 +68,26 @@ export const CollectionForm = observer(function CollectionForm_({
 }) {
   const team = useCurrentTeam();
   const { t } = useTranslation();
+  const dialog = useDialogContext();
 
   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 +113,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 +157,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 +232,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 +277,15 @@ 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")}
+          onOpenChange={() => dialog.setAnimating(true)}
+        >
+          {options}
+        </Collapsible>
       )}
 
       <HStack justify="flex-end">

app/components/CommandBar/CommandBarItem.tsx

@@ -3,7 +3,8 @@ import { ArrowIcon, BackIcon } from "outline-icons";
 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 { normalizeKeyDisplay, shortcutSeparator } 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,14 +16,22 @@ 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>
 ) {
   const theme = useTheme();
   const ancestors = React.useMemo(() => {
-    if (!currentRootActionId) {
-      return action.ancestors;
+    if (!currentRootActionId || !action.ancestors) {
+      return action.ancestors ?? [];
     }
     const index = action.ancestors.findIndex(
       (ancestor) => ancestor.id === currentRootActionId
@@ -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>
@@ -71,9 +90,12 @@ function CommandBarItem(
               ) : (
                 ""
               )}
-              {sc.split("+").map((key) => (
-                <Key key={key}>{normalizeKeyDisplay(key)}</Key>
-              ))}
+              {sc.split("+").flatMap((key, i, arr) => {
+                const el = <Key key={key}>{normalizeKeyDisplay(key)}</Key>;
+                return i < arr.length - 1 && shortcutSeparator
+                  ? [el, shortcutSeparator]
+                  : [el];
+              })}
             </React.Fragment>
           ))}
         </Shortcut>

app/components/CommandBar/CommandBarResults.tsx

@@ -43,7 +43,8 @@ const Container = styled.div`
 const Header = styled(Text).attrs({ as: "h3" })`
   letter-spacing: 0.03em;
   margin: 0;
-  padding: 16px 0 4px 20px;
+  padding-block: 16px 4px;
+  padding-inline: 20px 0;
   height: 36px;
   cursor: default;
 `;

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 "es-toolkit/compat";
+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/useRecentDocumentActions.tsx

@@ -1,13 +1,16 @@
 import { DocumentIcon } from "outline-icons";
 import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
 import Icon from "@shared/components/Icon";
 import { createInternalLinkAction } from "~/actions";
 import { RecentSection } from "~/actions/sections";
+import { documentBreadcrumbText } from "~/components/DocumentBreadcrumb";
 import useStores from "~/hooks/useStores";
 import { documentPath } from "~/utils/routeHelpers";
 
 const useRecentDocumentActions = (count = 6) => {
   const { documents, ui } = useStores();
+  const { t } = useTranslation();
 
   return useMemo(
     () =>
@@ -19,6 +22,7 @@ const useRecentDocumentActions = (count = 6) => {
             name: item.titleWithDefault,
             analyticsName: "Recently viewed document",
             section: RecentSection,
+            description: documentBreadcrumbText(item, t),
             icon: item.icon ? (
               <Icon
                 value={item.icon}
@@ -26,12 +30,12 @@ const useRecentDocumentActions = (count = 6) => {
                 color={item.color ?? undefined}
               />
             ) : (
-              <DocumentIcon />
+              <DocumentIcon outline={item.isDraft} />
             ),
             to: documentPath(item),
           })
         ),
-    [count, ui.activeDocumentId, documents.recentlyViewed]
+    [count, ui.activeDocumentId, documents.recentlyViewed, t]
   );
 };
 

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

@@ -87,22 +87,23 @@ const ContentEditable = React.forwardRef(function ContentEditable_(
   }));
 
   const wrappedEvent =
-    (
-      callback:
-        | React.FocusEventHandler<HTMLSpanElement>
-        | React.FormEventHandler<HTMLSpanElement>
-        | React.KeyboardEventHandler<HTMLSpanElement>
-        | undefined
+    <E extends React.SyntheticEvent<HTMLSpanElement>>(
+      callback: ((event: E) => void) | undefined
     ) =>
-    (event: any) => {
+    (event: E) => {
       if (readOnly) {
         return;
       }
 
       const text = event.currentTarget.textContent || "";
 
-      if (maxLength && isPrintableKeyEvent(event) && text.length >= maxLength) {
-        event?.preventDefault();
+      if (
+        maxLength &&
+        event.nativeEvent instanceof KeyboardEvent &&
+        isPrintableKeyEvent(event.nativeEvent) &&
+        text.length >= maxLength
+      ) {
+        event.preventDefault();
         return;
       }
 
@@ -128,7 +129,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")}
+        labelHidden
+        short
+      />
+    );
   }
-
-  return (
-    <InputSelect
-      options={options}
-      value={defaultCollectionId ?? "home"}
-      onChange={onSelectCollection}
-      label={t("Start view")}
-      hideLabel
-      short
-    />
-  );
-};
+);
 
 export default DefaultCollectionInputSelect;

app/components/DesktopEventHandler.tsx

@@ -15,7 +15,7 @@ export default function DesktopEventHandler() {
   const hasDisabledUpdateMessage = useRef(false);
 
   useEffect(() => {
-    Desktop.bridge?.redirect((path: string, replace = false) => {
+    Desktop.bridge?.redirect((path: string, replace: boolean) => {
       if (replace) {
         history.replace(path);
       } else {

app/components/DialogContext.tsx

@@ -0,0 +1,32 @@
+import { createContext, useContext, useMemo, useState } from "react";
+
+export type DialogContext = {
+  animating: boolean;
+  setAnimating: (isAnimating: boolean) => void;
+};
+
+/**
+ * Context for the dialogs (Guide/Modal) being rendered.
+ * This helps control the dialog's behavior from within any nested component.
+ */
+const DialogContext = createContext<DialogContext>({
+  animating: false,
+  setAnimating: () => {},
+});
+
+export function DialogProvider({ children }: { children: React.ReactNode }) {
+  const [animating, setAnimating] = useState(false);
+  const ctx = useMemo<DialogContext>(
+    () => ({
+      animating,
+      setAnimating,
+    }),
+    [animating]
+  );
+
+  return (
+    <DialogContext.Provider value={ctx}>{children}</DialogContext.Provider>
+  );
+}
+
+export const useDialogContext = () => useContext(DialogContext);

app/components/Dialogs.tsx

@@ -2,6 +2,7 @@ import { observer } from "mobx-react";
 import { Suspense } from "react";
 import useStores from "~/hooks/useStores";
 import lazyWithRetry from "~/utils/lazyWithRetry";
+import { DialogProvider } from "./DialogContext";
 
 const Guide = lazyWithRetry(() => import("~/components/Guide"));
 const Modal = lazyWithRetry(() => import("~/components/Modal"));
@@ -12,33 +13,35 @@ function Dialogs() {
   const modals = [...modalStack];
 
   return (
-    <Suspense fallback={null}>
-      {guide ? (
-        <Guide
-          isOpen={guide.isOpen}
-          onRequestClose={dialogs.closeGuide}
-          title={guide.title}
-        >
-          {guide.content}
-        </Guide>
-      ) : undefined}
-      {modals.map(([id, modal]) => (
-        <Modal
-          key={id}
-          isOpen={modal.isOpen}
-          onRequestClose={() => {
-            modal.onClose?.();
-            dialogs.closeModal(id);
-          }}
-          title={modal.title}
-          style={modal.style}
-          width={modal.width}
-          height={modal.height}
-        >
-          {modal.content}
-        </Modal>
-      ))}
-    </Suspense>
+    <DialogProvider>
+      <Suspense fallback={null}>
+        {guide ? (
+          <Guide
+            isOpen={guide.isOpen}
+            onRequestClose={dialogs.closeGuide}
+            title={guide.title}
+          >
+            {guide.content}
+          </Guide>
+        ) : undefined}
+        {modals.map(([id, modal]) => (
+          <Modal
+            key={id}
+            isOpen={modal.isOpen}
+            onRequestClose={() => {
+              modal.onClose?.();
+              dialogs.closeModal(id);
+            }}
+            title={modal.title}
+            style={modal.style}
+            width={modal.width}
+            height={modal.height}
+          >
+            {modal.content}
+          </Modal>
+        ))}
+      </Suspense>
+    </DialogProvider>
   );
 }
 

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,20 +1,75 @@
+import type { TFunction } from "i18next";
 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";
 
+/**
+ * Returns the breadcrumb parts leading up to a document, separating the
+ * (possibly deleted) collection label from ancestor document titles. The
+ * document itself is not included.
+ *
+ * @param document - the document to compute the breadcrumb for.
+ * @param t - translation function for fallback titles.
+ * @returns the collection label and ancestor titles.
+ */
+export function documentBreadcrumbParts(
+  document: Document,
+  t: TFunction
+): { collection: string | undefined; ancestors: string[] } {
+  let collectionLabel: string | undefined;
+  if (document.isCollectionDeleted) {
+    collectionLabel = t("Deleted Collection");
+  } else if (document.collection?.name) {
+    collectionLabel = document.collection.name;
+  }
+
+  return {
+    collection: collectionLabel,
+    ancestors: document.pathTo
+      .slice(0, -1)
+      .map((node) => node.title || t("Untitled")),
+  };
+}
+
+/**
+ * Returns the breadcrumb path leading up to a document as a plain text
+ * string. Includes the collection name (or "Deleted Collection" fallback)
+ * and any ancestor document titles, slash-separated.
+ *
+ * @param document - the document to compute the breadcrumb for.
+ * @param t - translation function for fallback titles.
+ * @returns the breadcrumb as a slash-separated string, or undefined if the
+ * document has no resolvable parent context.
+ */
+export function documentBreadcrumbText(
+  document: Document,
+  t: TFunction
+): string | undefined {
+  const parts = documentBreadcrumbParts(document, t);
+  const segments = [
+    ...(parts.collection ? [parts.collection] : []),
+    ...parts.ancestors,
+  ];
+  return segments.length ? segments.join(" / ") : undefined;
+}
+
 type Props = {
   children?: React.ReactNode;
   document: Document;
@@ -68,14 +123,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,18 +147,20 @@ 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}
+              title={title}
+            />
           ),
+          icon: node.icon ? (
+            <Icon
+              value={node.icon}
+              color={node.color}
+              initial={title.charAt(0).toUpperCase()}
+            />
+          ) : undefined,
           section: ActiveDocumentSection,
           to: {
             pathname: node.url,
@@ -145,22 +197,25 @@ function DocumentBreadcrumb(
       return <></>;
     }
 
-    const slicedPath = reverse
-      ? path.slice(depth && -depth)
-      : path.slice(0, depth);
+    const { collection: collectionLabel, ancestors: ancestorLabels } =
+      documentBreadcrumbParts(document, t);
+
+    const slicedAncestors = reverse
+      ? ancestorLabels.slice(depth && -depth)
+      : ancestorLabels.slice(0, depth);
 
     const showCollection =
-      collection &&
-      (!reverse || depth === undefined || slicedPath.length < depth);
+      !!collectionLabel &&
+      (!reverse || depth === undefined || slicedAncestors.length < depth);
 
     return (
       <>
-        {showCollection && collection.name}
-        {slicedPath.map((node: NavigationNode, index: number) => (
-          <React.Fragment key={node.id}>
+        {showCollection && collectionLabel}
+        {slicedAncestors.map((label, index) => (
+          <React.Fragment key={index}>
             {showCollection && <SmallSlash />}
-            {node.title || t("Untitled")}
-            {!showCollection && index !== slicedPath.length - 1 && (
+            {label}
+            {!showCollection && index !== slicedAncestors.length - 1 && (
               <SmallSlash />
             )}
           </React.Fragment>
@@ -176,9 +231,57 @@ function DocumentBreadcrumb(
   );
 }
 
-const StyledIcon = styled(Icon)`
-  margin-right: 2px;
-`;
+/** 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,
+  title,
+}: {
+  documentId: string;
+  collection: Collection | undefined;
+  title: string;
+}) {
+  const { t } = useTranslation();
+  const { documents } = useStores();
+  const doc = documents.get(documentId);
+  const menuAction = useDocumentMenuAction({ documentId });
+
+  if (!doc) {
+    return <>{title}</>;
+  }
+
+  return (
+    <ActionContextProvider
+      value={{
+        activeModels: [doc, ...(collection ? [collection] : [])],
+      }}
+    >
+      <ContextMenu action={menuAction} ariaLabel={t("Document options")}>
+        <span>{title}</span>
+      </ContextMenu>
+    </ActionContextProvider>
+  );
+});
 
 const SmallSlash = styled(GoToIcon)`
   width: 12px;

app/components/DocumentCard.tsx

@@ -110,7 +110,7 @@ function DocumentCard(props: Props) {
           dir={document.dir}
           $isDragging={isDragging}
           to={{
-            pathname: document.url,
+            pathname: document.path,
             state: {
               title: document.titleWithDefault,
             },

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,16 +37,11 @@ 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) {
+  const copy = async (path = selectedPath) => {
+    if (!path) {
       toast.message(t("Select a location to copy"));
       return;
     }
@@ -57,10 +52,8 @@ function DocumentCopy({ document, onSubmit }: Props) {
         publish,
         recursive,
         title: document.title,
-        collectionId: selectedPath.collectionId,
-        ...(selectedPath.type === "document"
-          ? { parentDocumentId: selectedPath.id }
-          : {}),
+        collectionId: path.collectionId,
+        ...(path.type === "document" ? { parentDocumentId: path.id } : {}),
       });
 
       toast.success(t("Document copied"));
@@ -80,34 +73,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,8 +108,8 @@ function DocumentCopy({ document, onSubmit }: Props) {
           ) : (
             t("Select a location to copy")
           )}
-        </StyledText>
-        <Button disabled={!selectedPath || copying} onClick={copy}>
+        </Text>
+        <Button disabled={!selectedPath || copying} onClick={() => copy()}>
           {copying ? `${t("Copying")}…` : t("Copy")}
         </Button>
       </Footer>

app/components/DocumentExplorer/DocumentExplorer.tsx

@@ -1,29 +1,29 @@
 import FuzzySearch from "fuzzy-search";
-import concat from "lodash/concat";
-import difference from "lodash/difference";
-import fill from "lodash/fill";
-import filter from "lodash/filter";
-import flatten from "lodash/flatten";
-import includes from "lodash/includes";
-import map from "lodash/map";
+import {
+  concat,
+  difference,
+  fill,
+  filter,
+  flatten,
+  includes,
+  map,
+} from "es-toolkit/compat";
 import { observer } from "mobx-react";
 import { StarredIcon, DocumentIcon } from "outline-icons";
 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";
 import InputSearch from "~/components/InputSearch";
 import Text from "~/components/Text";
 import useMobile from "~/hooks/useMobile";
@@ -31,16 +31,46 @@ import useStores from "~/hooks/useStores";
 
 type Props = {
   /** Action taken upon submission of selected item, could be publish, move etc. */
-  onSubmit: () => void;
+  onSubmit: (item: NavigationNode | null) => void;
   /** A side-effect of item selection */
   onSelect: (item: NavigationNode | null) => void;
   /** Items to be shown in explorer */
   items: NavigationNode[];
   /** Automatically expand to and select item with the given id */
   defaultValue?: string;
+  /** 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 +89,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 +111,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 +161,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 +180,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 +200,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 +209,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 +233,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)) {
@@ -237,6 +255,13 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
     }
   };
 
+  const submitNode = (node: number) => {
+    const selectedNode = nodes[node];
+
+    selectNode(selectedNode);
+    onSubmit(selectedNode);
+  };
+
   const ListItem = observer(
     ({
       index,
@@ -293,7 +318,8 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
             width: `calc(${style.width} - ${HORIZONTAL_PADDING * 2}px)`,
           }}
           onPointerMove={() => setActiveNode(index)}
-          onClick={() => toggleSelect(index)}
+          onClick={() => selectNode(nodes[index])}
+          onDoubleClick={() => submitNode(index)}
           icon={renderedIcon}
           title={title}
           path={path}
@@ -307,7 +333,8 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
             width: `calc(${style.width} - ${HORIZONTAL_PADDING * 2}px)`,
           }}
           onPointerMove={() => setActiveNode(index)}
-          onClick={() => toggleSelect(index)}
+          onClick={() => selectNode(nodes[index])}
+          onDoubleClick={() => submitNode(index)}
           onDisclosureClick={(ev) => {
             ev.stopPropagation();
             toggleCollapse(index);
@@ -369,7 +396,7 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
       }
       case "Enter": {
         if (isModKey(ev)) {
-          onSubmit();
+          onSubmit(selectedNode);
         } else {
           toggleSelect(activeNode);
         }
@@ -378,31 +405,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 +424,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}
@@ -447,10 +457,7 @@ const FlexContainer = styled(Flex)`
   justify-content: center;
 `;
 
-const ListSearch = styled(InputSearch)`
-  ${Outline} {
-    border-radius: 16px;
-  }
+const ListSearch = styled(InputSearch).attrs({ round: true })`
   margin-bottom: 4px;
   padding-left: 24px;
   padding-right: 24px;

app/components/DocumentExplorer/DocumentExplorerNode.tsx

@@ -9,18 +9,30 @@ import Disclosure from "~/components/Sidebar/components/Disclosure";
 import Text from "~/components/Text";
 
 type Props = {
+  /** Whether this node is the chosen destination (committed pick via click or Enter). */
   selected: boolean;
+  /** Whether this node is currently highlighted by pointer hover or keyboard navigation. */
   active: boolean;
+  /** Inline style passed in by the virtualized list for absolute positioning. */
   style: React.CSSProperties;
+  /** Whether this node's children are currently revealed in the tree. */
   expanded: boolean;
+  /** Icon rendered before the title (document icon, emoji, or star). */
   icon?: React.ReactNode;
+  /** Display title for the node. */
   title: string;
+  /** Zero-based nesting depth, used to indent the node. */
   depth: number;
+  /** Whether this node has descendants and should render a disclosure chevron. */
   hasChildren: boolean;
-
+  /** Fired when the disclosure chevron is clicked to expand or collapse the node. */
   onDisclosureClick: (ev: React.MouseEvent) => void;
+  /** Fired on pointer movement over the node; used to update the active highlight. */
   onPointerMove: (ev: React.MouseEvent) => void;
+  /** Fired when the node is clicked to select it. */
   onClick: (ev: React.MouseEvent) => void;
+  /** Fired when the node is double-clicked to submit the current selection. */
+  onDoubleClick: (ev: React.MouseEvent) => void;
 };
 
 function DocumentExplorerNode(
@@ -36,14 +48,13 @@ function DocumentExplorerNode(
     onDisclosureClick,
     onPointerMove,
     onClick,
+    onDoubleClick,
   }: Props,
   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 + 2) * DISCLOSURE;
 
   return (
     <Node
@@ -51,9 +62,11 @@ function DocumentExplorerNode(
       selected={selected}
       active={active}
       onClick={onClick}
+      onDoubleClick={onDoubleClick}
       style={style}
       onPointerMove={onPointerMove}
       role="option"
+      aria-selected={selected}
     >
       <Spacer width={width}>
         {hasChildren && (
@@ -79,7 +92,11 @@ const Title = styled(Text)`
 const StyledDisclosure = styled(Disclosure)`
   position: relative;
   left: auto;
-  margin-top: 2px;
+  margin: 2px 0;
+
+  &&[aria-expanded="true"]:not(:hover) {
+    background: none;
+  }
 `;
 
 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";
 
@@ -18,6 +17,7 @@ type Props = {
 
   onPointerMove: (ev: React.MouseEvent) => void;
   onClick: (ev: React.MouseEvent) => void;
+  onDoubleClick: (ev: React.MouseEvent) => void;
 };
 
 function DocumentExplorerSearchResult({
@@ -29,31 +29,20 @@ function DocumentExplorerSearchResult({
   path,
   onPointerMove,
   onClick,
+  onDoubleClick,
 }: 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}
+      onDoubleClick={onDoubleClick}
       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,33 +53,20 @@ 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) {
+  const move = async (path = selectedPath) => {
+    if (!path) {
       toast.message(t("Select a location to move"));
       return;
     }
 
     try {
       setMoving(true);
-      const { type, id: parentDocumentId } = selectedPath;
+      const { type, id: parentDocumentId } = path;
 
-      const collectionId = selectedPath.collectionId as string;
+      const collectionId = path.collectionId as string;
 
       if (type === "document") {
         await document.move({ collectionId, parentDocumentId });
@@ -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,8 +102,8 @@ function DocumentMove({ document }: Props) {
           ) : (
             t("Select a location to move")
           )}
-        </StyledText>
-        <Button disabled={!selectedPath || moving} onClick={move}>
+        </Text>
+        <Button disabled={!selectedPath || moving} onClick={() => move()}>
           {moving ? `${t("Moving")}…` : t("Move")}
         </Button>
       </Footer>
@@ -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,86 @@
+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 (path = selectedPath) => {
+    if (!path) {
+      toast.message(t("Select a location to move"));
+      return;
+    }
+
+    try {
+      const collectionId = (path.collectionId ?? path.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

@@ -5,6 +5,7 @@ import {
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
+import { mergeRefs } from "react-merge-refs";
 import { Link } from "react-router-dom";
 import { DocumentIcon } from "outline-icons";
 import styled, { css, useTheme } from "styled-components";
@@ -22,10 +23,12 @@ 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";
 import { determineSidebarContext } from "./Sidebar/components/SidebarContext";
+import { useDragDocument } from "./Sidebar/hooks/useDragAndDrop";
 import { ActionContextProvider } from "~/hooks/useActionContext";
 import { useDocumentMenuAction } from "~/hooks/useDocumentMenuAction";
 import { ContextMenu } from "./Menu/ContextMenu";
@@ -39,7 +42,6 @@ type Props = {
   showCollection?: boolean;
   showPublished?: boolean;
   showDraft?: boolean;
-  showTemplate?: boolean;
 };
 
 const SEARCH_RESULT_REGEX = /<b\b[^>]*>(.*?)<\/b>/gi;
@@ -59,6 +61,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 +78,6 @@ function DocumentListItem(
     showCollection,
     showPublished,
     showDraft = true,
-    showTemplate,
     highlight,
     context,
     ...rest
@@ -83,7 +85,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) ||
@@ -98,14 +100,30 @@ function DocumentListItem(
 
   const contextMenuAction = useDocumentMenuAction({ documentId: document.id });
 
+  const [{ isDragging }, draggableRef] = useDragDocument(
+    document.asNavigationNode,
+    0,
+    document,
+    false,
+    false
+  );
+
+  const mergedRef = React.useMemo(
+    () =>
+      mergeRefs<HTMLAnchorElement>([
+        itemRef,
+        draggableRef,
+      ] as React.Ref<HTMLAnchorElement>[]),
+    [itemRef, draggableRef]
+  );
+
   return (
     <ActionContextProvider
       value={{
-        activeDocumentId: document.id,
-        activeCollectionId:
-          !isShared && document.collectionId
-            ? document.collectionId
-            : undefined,
+        activeModels: [
+          document,
+          ...(!isShared && document.collection ? [document.collection] : []),
+        ],
       }}
     >
       <ContextMenu
@@ -115,9 +133,10 @@ function DocumentListItem(
         onClose={handleMenuClose}
       >
         <DocumentLink
-          ref={itemRef}
+          ref={mergedRef}
           dir={document.dir}
           $isStarred={document.isStarred}
+          $isDragging={isDragging}
           $menuOpen={menuOpen}
           to={{
             pathname: documentPath(document),
@@ -162,10 +181,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 && (
@@ -231,6 +247,7 @@ const Actions = styled(EventBoundary)`
 
 const DocumentLink = styled(Link)<{
   $isStarred?: boolean;
+  $isDragging?: boolean;
   $menuOpen?: boolean;
 }>`
   display: flex;
@@ -241,6 +258,8 @@ const DocumentLink = styled(Link)<{
   max-height: 50vh;
   width: calc(100vw - 8px);
   cursor: var(--pointer);
+  transition: opacity 250ms ease;
+  opacity: ${(props) => (props.$isDragging ? 0.1 : 1)};
 
   &:focus-visible {
     outline: none;

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/DocumentViews.tsx

@@ -1,5 +1,4 @@
-import compact from "lodash/compact";
-import sortBy from "lodash/sortBy";
+import { compact, sortBy } from "es-toolkit/compat";
 import { observer } from "mobx-react";
 import { useMemo, useCallback } from "react";
 import { useTranslation } from "react-i18next";

app/components/Editor.tsx

@@ -1,8 +1,9 @@
-import difference from "lodash/difference";
+import { difference } from "es-toolkit/compat";
 import { observer } from "mobx-react";
 import { DOMParser as ProsemirrorDOMParser } from "prosemirror-model";
 import { TextSelection } from "prosemirror-state";
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 import { mergeRefs } from "react-merge-refs";
 import type { Optional } from "utility-types";
@@ -16,7 +17,6 @@ import ClickablePadding from "~/components/ClickablePadding";
 import ErrorBoundary from "~/components/ErrorBoundary";
 import type { Props as EditorProps, Editor as SharedEditor } from "~/editor";
 import useCurrentUser from "~/hooks/useCurrentUser";
-import useDictionary from "~/hooks/useDictionary";
 import useEditorClickHandlers from "~/hooks/useEditorClickHandlers";
 import useEmbeds from "~/hooks/useEmbeds";
 import useStores from "~/hooks/useStores";
@@ -28,12 +28,7 @@ const LazyLoadedEditor = lazyWithRetry(() => import("~/editor"));
 
 export type Props = Optional<
   EditorProps,
-  | "placeholder"
-  | "defaultValue"
-  | "onClickLink"
-  | "embeds"
-  | "dictionary"
-  | "extensions"
+  "placeholder" | "defaultValue" | "onClickLink" | "embeds" | "extensions"
 > & {
   embedsDisabled?: boolean;
   onSynced?: () => Promise<void>;
@@ -52,7 +47,7 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
   } = props;
   const { comments } = useStores();
   const { shareId } = useShare();
-  const dictionary = useDictionary();
+  const { t } = useTranslation();
   const embeds = useEmbeds(!shareId);
   const localRef = React.useRef<SharedEditor>();
   const preferences = useCurrentUser({ rejectOnEmpty: false })?.preferences;
@@ -95,11 +90,11 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
   const handleFileUploadStart = React.useCallback(() => {
     uploadState.current.timeoutId = setTimeout(() => {
       uploadState.current.toastId = toast.loading(
-        dictionary.uploadingWithProgress(0)
+        t("Uploading… {{ progress }}%", { progress: 0 })
       );
     }, 2000);
     onFileUploadStart?.();
-  }, [onFileUploadStart, dictionary.uploadingWithProgress]);
+  }, [onFileUploadStart, t]);
 
   const handleFileUploadProgress = React.useCallback(
     (fileId: string, fractionComplete: number) => {
@@ -113,12 +108,12 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
 
       // Update toast if visible
       if (uploadState.current.toastId) {
-        toast.loading(dictionary.uploadingWithProgress(percent), {
+        toast.loading(t("Uploading… {{ progress }}%", { progress: percent }), {
           id: uploadState.current.toastId,
         });
       }
     },
-    [dictionary.uploadingWithProgress]
+    [t]
   );
 
   const handleFileUploadStop = React.useCallback(() => {
@@ -183,7 +178,6 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
         onFileUploadStart: handleFileUploadStart,
         onFileUploadStop: handleFileUploadStop,
         onFileUploadProgress: handleFileUploadProgress,
-        dictionary,
         isAttachment,
       });
     },
@@ -192,7 +186,6 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
       handleFileUploadStart,
       handleFileUploadStop,
       handleFileUploadProgress,
-      dictionary,
       handleUploadFile,
     ]
   );
@@ -211,6 +204,7 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
       const commentMarks = localRef.current.getComments();
       const commentIds = comments.orderedData.map((c) => c.id);
       const commentMarkIds = commentMarks?.map((c) => c.id);
+      const focus = previousCommentIds.current !== undefined;
       const newCommentIds = difference(
         commentMarkIds,
         previousCommentIds.current ?? [],
@@ -220,7 +214,7 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
       newCommentIds.forEach((commentId) => {
         const mark = commentMarks.find((c) => c.id === commentId);
         if (mark) {
-          onCreateCommentMark(mark.id, mark.userId);
+          onCreateCommentMark(mark.id, mark.userId, { focus });
         }
       });
 
@@ -266,7 +260,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}
@@ -288,7 +282,6 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
             uploadFile={handleUploadFile}
             embeds={embeds}
             userPreferences={preferences}
-            dictionary={dictionary}
             {...props}
             onClickLink={handleClickLink}
             onChange={handleChange}

app/components/EditorAwareHTML5Backend.ts

@@ -0,0 +1,63 @@
+import type { BackendFactory } from "dnd-core";
+import { HTML5Backend } from "react-dnd-html5-backend";
+
+/**
+ * react-dnd's HTML5 backend installs global capture-phase listeners on `window`
+ * that call `preventDefault()` on drops whose dataTransfer resembles a native
+ * item – including a dragged `<img>`, which is how ProseMirror serializes an
+ * image drag.
+ *
+ * These handlers run before ProseMirror's, and they live on `window`, so a
+ * propagation-based guard can't stop react-dnd without also starving the editor
+ * of the event. Instead we wrap the backend and make its top-level capture
+ * handlers no-op for events that occur within the editor surface.
+ */
+const captureHandlerNames = [
+  "handleTopDragStartCapture",
+  "handleTopDragEnterCapture",
+  "handleTopDragOverCapture",
+  "handleTopDragLeaveCapture",
+  "handleTopDropCapture",
+  "handleTopDragEndCapture",
+] as const;
+
+const isWithinEditor = (target: EventTarget | null): boolean =>
+  target instanceof Element && Boolean(target.closest(".ProseMirror"));
+
+/**
+ * An HTML5 drag-and-drop backend that ignores drag events originating within the
+ * rich text editor so that ProseMirror can handle them itself.
+ *
+ * @param manager The drag-and-drop manager.
+ * @param context The global context.
+ * @param options Backend options.
+ * @returns The wrapped HTML5 backend instance.
+ */
+export const EditorAwareHTML5Backend: BackendFactory = (
+  manager,
+  context,
+  options
+) => {
+  const backend = HTML5Backend(manager, context, options);
+
+  // The capture handlers are private instance fields on the backend, so reach
+  // for them through an index signature view of the instance.
+  const handlers = backend as unknown as Record<
+    string,
+    (event: DragEvent) => void
+  >;
+
+  for (const name of captureHandlerNames) {
+    const original = handlers[name];
+    if (typeof original === "function") {
+      handlers[name] = (event: DragEvent) => {
+        if (isWithinEditor(event.target)) {
+          return;
+        }
+        original.call(backend, event);
+      };
+    }
+  }
+
+  return backend;
+};

app/components/EmojiCreateDialog.tsx

@@ -1,233 +0,0 @@
-import * as React from "react";
-import { useDropzone } from "react-dropzone";
-import { useTranslation } from "react-i18next";
-import { toast } from "sonner";
-import styled from "styled-components";
-import { s } from "@shared/styles";
-import { AttachmentPreset } from "@shared/types";
-import { getDataTransferFiles } from "@shared/utils/files";
-import ConfirmationDialog from "~/components/ConfirmationDialog";
-import Input, { LabelText } from "~/components/Input";
-import Text from "~/components/Text";
-import useStores from "~/hooks/useStores";
-import { uploadFile } from "~/utils/files";
-import { compressImage } from "~/utils/compressImage";
-import { generateEmojiNameFromFilename } from "~/utils/emoji";
-import { AttachmentValidation, EmojiValidation } from "@shared/validations";
-import { bytesToHumanReadable } from "@shared/utils/files";
-import { VStack } from "./primitives/VStack";
-
-type Props = {
-  onSubmit: () => void;
-};
-
-export function EmojiCreateDialog({ onSubmit }: Props) {
-  const { t } = useTranslation();
-  const { emojis } = useStores();
-  const [name, setName] = React.useState("");
-  const [file, setFile] = React.useState<File | null>(null);
-  const [isUploading, setIsUploading] = React.useState(false);
-
-  const handleFileSelection = React.useCallback(
-    (file: File) => {
-      const isValidType = AttachmentValidation.emojiContentTypes.includes(
-        file.type
-      );
-
-      if (!isValidType) {
-        toast.error(
-          t("File type not supported. Please use PNG, JPG, GIF, or WebP.")
-        );
-        return;
-      }
-
-      // Validate file size
-      if (file.size > AttachmentValidation.emojiMaxFileSize) {
-        toast.error(
-          t("File size too large. Maximum size is {{ size }}.", {
-            size: bytesToHumanReadable(AttachmentValidation.emojiMaxFileSize),
-          })
-        );
-        return;
-      }
-
-      setFile(file);
-
-      // Auto-populate name field if it's empty
-      setName((currentName) => {
-        if (!currentName.trim()) {
-          const generatedName = generateEmojiNameFromFilename(file.name);
-          return generatedName || currentName;
-        }
-        return currentName;
-      });
-    },
-    [t]
-  );
-
-  const onDrop = React.useCallback(
-    (acceptedFiles: File[]) => {
-      if (acceptedFiles.length > 0) {
-        handleFileSelection(acceptedFiles[0]);
-      }
-    },
-    [handleFileSelection]
-  );
-
-  // Handle paste events
-  React.useEffect(() => {
-    const handlePaste = (event: ClipboardEvent) => {
-      const files = getDataTransferFiles(event);
-      if (files.length > 0) {
-        event.preventDefault();
-        handleFileSelection(files[0]);
-      }
-    };
-
-    document.addEventListener("paste", handlePaste);
-    return () => document.removeEventListener("paste", handlePaste);
-  }, [handleFileSelection]);
-
-  const { getRootProps, getInputProps, isDragActive } = useDropzone({
-    onDropAccepted: onDrop,
-    accept: AttachmentValidation.emojiContentTypes,
-    maxSize: AttachmentValidation.emojiMaxFileSize,
-    maxFiles: 1,
-  });
-
-  const handleSubmit = async () => {
-    if (!name.trim()) {
-      toast.error(t("Please enter a name for the emoji"));
-      return;
-    }
-
-    if (!file) {
-      toast.error(t("Please select an image file"));
-      return;
-    }
-
-    setIsUploading(true);
-    try {
-      // Skip compression for GIFs to preserve animation
-      const fileToUpload =
-        file.type === "image/gif"
-          ? file
-          : await compressImage(file, {
-              maxHeight: 64,
-              maxWidth: 64,
-            });
-
-      const attachment = await uploadFile(fileToUpload, {
-        name: file.name,
-        preset: AttachmentPreset.Emoji,
-      });
-
-      await emojis.create({
-        name: name.trim(),
-        attachmentId: attachment.id,
-      });
-
-      toast.success(t("Emoji created successfully"));
-      onSubmit();
-    } finally {
-      setIsUploading(false);
-    }
-  };
-
-  const handleNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const { value } = event.target;
-    setName(value);
-  };
-
-  const isValidName = EmojiValidation.allowedNameCharacters.test(name);
-  const isValid = name.trim().length > 0 && file && isValidName;
-
-  return (
-    <ConfirmationDialog
-      onSubmit={handleSubmit}
-      disabled={!isValid || isUploading}
-      savingText={isUploading ? `${t("Uploading")}…` : undefined}
-      submitText={t("Add emoji")}
-    >
-      <Text as="p" type="secondary">
-        {t(
-          "Square images with transparent backgrounds work best. If your image is too large, we’ll try to resize it for you."
-        )}
-      </Text>
-
-      <LabelText as="label">{t("Upload an image")}</LabelText>
-      <DropZone {...getRootProps()}>
-        <input {...getInputProps()} />
-        <VStack>
-          {file ? (
-            <>
-              <PreviewImage src={URL.createObjectURL(file)} alt="Preview" />
-              <Text size="medium">{file.name}</Text>
-              <Text size="medium" type="secondary">
-                {t("Click or drag to replace")}
-              </Text>
-            </>
-          ) : (
-            <>
-              <Text size="medium">
-                {isDragActive
-                  ? t("Drop the image here")
-                  : t("Click, drop, or paste an image here")}
-              </Text>
-              <Text size="medium" type="secondary">
-                {t("PNG, JPG, GIF, or WebP up to {{ size }}", {
-                  size: bytesToHumanReadable(
-                    AttachmentValidation.emojiMaxFileSize
-                  ),
-                })}
-              </Text>
-            </>
-          )}
-        </VStack>
-      </DropZone>
-
-      <Input
-        label={t("Choose a name")}
-        value={name}
-        onChange={handleNameChange}
-        placeholder="my_custom_emoji"
-        autoFocus
-        required
-        error={
-          !isValidName
-            ? t(
-                "name can only contain lowercase letters, numbers, and underscores."
-              )
-            : undefined
-        }
-      />
-
-      {name.trim() && isValidName && (
-        <Text type="secondary" style={{ marginTop: "8px" }}>
-          {t("This emoji will be available as")} <code>:{name}:</code>
-        </Text>
-      )}
-    </ConfirmationDialog>
-  );
-}
-
-const DropZone = styled.div`
-  border: 2px dashed ${s("inputBorder")};
-  border-radius: 8px;
-  padding: 24px;
-  text-align: center;
-  cursor: var(--pointer);
-  transition: border-color 0.2s;
-  margin-bottom: 1em;
-
-  &:hover {
-    border-color: ${s("inputBorderFocused")};
-  }
-`;
-
-const PreviewImage = styled.img`
-  width: 64px;
-  height: 64px;
-  object-fit: contain;
-  border-radius: 4px;
-`;

app/components/EmojiDialog/Components.tsx

@@ -0,0 +1,161 @@
+import * as React from "react";
+import { useDropzone } from "react-dropzone";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import styled from "styled-components";
+import { s } from "@shared/styles";
+import { getDataTransferFiles } from "@shared/utils/files";
+import { bytesToHumanReadable } from "@shared/utils/files";
+import { AttachmentValidation } from "@shared/validations";
+import Text from "~/components/Text";
+import { VStack } from "~/components/primitives/VStack";
+
+interface UseEmojiFileUploadOptions {
+  /** Optional callback fired after a valid file is selected. */
+  onFileSelected?: (file: File) => void;
+}
+
+/**
+ * Hook that manages emoji image file selection with validation, drag-and-drop,
+ * and paste support.
+ */
+export function useEmojiFileUpload(options?: UseEmojiFileUploadOptions) {
+  const { t } = useTranslation();
+  const [file, setFile] = React.useState<File | null>(null);
+
+  const handleFileSelection = React.useCallback(
+    (selected: File) => {
+      const isValidType = AttachmentValidation.emojiContentTypes.includes(
+        selected.type
+      );
+
+      if (!isValidType) {
+        toast.error(
+          t("File type not supported. Please use PNG, JPG, GIF, or WebP.")
+        );
+        return;
+      }
+
+      if (selected.size > AttachmentValidation.emojiMaxFileSize) {
+        toast.error(
+          t("File size too large. Maximum size is {{ size }}.", {
+            size: bytesToHumanReadable(AttachmentValidation.emojiMaxFileSize),
+          })
+        );
+        return;
+      }
+
+      setFile(selected);
+      options?.onFileSelected?.(selected);
+    },
+    [t, options]
+  );
+
+  const handleDrop = React.useCallback(
+    (acceptedFiles: File[]) => {
+      if (acceptedFiles.length > 0) {
+        handleFileSelection(acceptedFiles[0]);
+      }
+    },
+    [handleFileSelection]
+  );
+
+  React.useEffect(() => {
+    const handlePaste = (event: ClipboardEvent) => {
+      const files = getDataTransferFiles(event);
+      if (files.length > 0) {
+        event.preventDefault();
+        handleFileSelection(files[0]);
+      }
+    };
+
+    document.addEventListener("paste", handlePaste);
+    return () => document.removeEventListener("paste", handlePaste);
+  }, [handleFileSelection]);
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDropAccepted: handleDrop,
+    accept: AttachmentValidation.emojiContentTypes,
+    maxSize: AttachmentValidation.emojiMaxFileSize,
+    maxFiles: 1,
+  });
+
+  return { file, getRootProps, getInputProps, isDragActive };
+}
+
+interface EmojiImageDropZoneProps {
+  /** The currently selected file, if any. */
+  file: File | null;
+  /** Dropzone root props. */
+  getRootProps: ReturnType<typeof useDropzone>["getRootProps"];
+  /** Dropzone input props. */
+  getInputProps: ReturnType<typeof useDropzone>["getInputProps"];
+  /** Whether a drag is currently active. */
+  isDragActive: boolean;
+}
+
+/**
+ * Shared drop zone component for emoji image upload, showing either a file
+ * preview or placeholder text.
+ */
+export function EmojiImageDropZone({
+  file,
+  getRootProps,
+  getInputProps,
+  isDragActive,
+}: EmojiImageDropZoneProps) {
+  const { t } = useTranslation();
+
+  return (
+    <DropZone {...getRootProps()}>
+      <input {...getInputProps()} />
+      <VStack>
+        {file ? (
+          <>
+            <PreviewImage src={URL.createObjectURL(file)} alt="Preview" />
+            <Text size="medium">{file.name}</Text>
+            <Text size="medium" type="secondary">
+              {t("Click or drag to replace")}
+            </Text>
+          </>
+        ) : (
+          <>
+            <Text size="small">
+              {isDragActive
+                ? t("Drop the image here")
+                : t("Click, drop, or paste an image here")}
+            </Text>
+            <Text size="small" type="secondary">
+              {t("PNG, JPG, GIF, or WebP up to {{ size }}", {
+                size: bytesToHumanReadable(
+                  AttachmentValidation.emojiMaxFileSize
+                ),
+              })}
+            </Text>
+          </>
+        )}
+      </VStack>
+    </DropZone>
+  );
+}
+
+const DropZone = styled.div`
+  border: 2px dashed ${s("inputBorder")};
+  border-radius: 8px;
+  padding: 24px;
+  text-align: center;
+  cursor: var(--pointer);
+  transition: border-color 0.2s;
+  margin-bottom: 1em;
+
+  &:hover {
+    border-color: ${s("inputBorderFocused")};
+  }
+`;
+
+const PreviewImage = styled.img`
+  width: 64px;
+  height: 64px;
+  object-fit: contain;
+  border-radius: 4px;
+`;

app/components/EmojiDialog/EmojiCreateDialog.tsx

@@ -0,0 +1,132 @@
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import { AttachmentPreset } from "@shared/types";
+import { EmojiValidation } from "@shared/validations";
+import ConfirmationDialog from "~/components/ConfirmationDialog";
+import Input, { LabelText } from "~/components/Input";
+import Text from "~/components/Text";
+import useStores from "~/hooks/useStores";
+import { uploadFile } from "~/utils/files";
+import { compressImage } from "~/utils/compressImage";
+import { generateEmojiNameFromFilename } from "~/utils/emoji";
+import { useEmojiFileUpload, EmojiImageDropZone } from "./Components";
+
+interface Props {
+  /** Callback invoked after successful creation. */
+  onSubmit: () => void;
+}
+
+/**
+ * Dialog for creating a new custom emoji with image upload and name input.
+ */
+export function EmojiCreateDialog({ onSubmit }: Props) {
+  const { t } = useTranslation();
+  const { emojis } = useStores();
+  const [name, setName] = React.useState("");
+  const [isUploading, setIsUploading] = React.useState(false);
+
+  const handleFileSelected = React.useCallback((selected: File) => {
+    setName((currentName) => {
+      if (!currentName.trim()) {
+        const generatedName = generateEmojiNameFromFilename(selected.name);
+        return generatedName || currentName;
+      }
+      return currentName;
+    });
+  }, []);
+
+  const { file, getRootProps, getInputProps, isDragActive } =
+    useEmojiFileUpload({ onFileSelected: handleFileSelected });
+
+  const handleSubmit = async () => {
+    if (!name.trim()) {
+      toast.error(t("Please enter a name for the emoji"));
+      return;
+    }
+
+    if (!file) {
+      toast.error(t("Please select an image file"));
+      return;
+    }
+
+    setIsUploading(true);
+    try {
+      const fileToUpload =
+        file.type === "image/gif"
+          ? file
+          : await compressImage(file, {
+              maxHeight: 64,
+              maxWidth: 64,
+            });
+
+      const attachment = await uploadFile(fileToUpload, {
+        name: file.name,
+        preset: AttachmentPreset.Emoji,
+      });
+
+      await emojis.create({
+        name: name.trim(),
+        attachmentId: attachment.id,
+      });
+
+      toast.success(t("Emoji created successfully"));
+      onSubmit();
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
+  const handleNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { value } = event.target;
+    setName(value);
+  };
+
+  const isValidName = EmojiValidation.allowedNameCharacters.test(name);
+  const isValid = name.trim().length > 0 && file && isValidName;
+
+  return (
+    <ConfirmationDialog
+      onSubmit={handleSubmit}
+      disabled={!isValid || isUploading}
+      savingText={isUploading ? `${t("Uploading")}…` : undefined}
+      submitText={t("Add emoji")}
+    >
+      <Text as="p" type="secondary">
+        {t(
+          "Square images with transparent backgrounds work best. If your image is too large, we'll try to resize it for you."
+        )}
+      </Text>
+
+      <LabelText as="label">{t("Upload an image")}</LabelText>
+      <EmojiImageDropZone
+        file={file}
+        getRootProps={getRootProps}
+        getInputProps={getInputProps}
+        isDragActive={isDragActive}
+      />
+
+      <Input
+        label={t("Choose a name")}
+        value={name}
+        onChange={handleNameChange}
+        placeholder="my_custom_emoji"
+        autoFocus
+        required
+        error={
+          !isValidName
+            ? t(
+                "name can only contain lowercase letters, numbers, and underscores."
+              )
+            : undefined
+        }
+      />
+
+      {name.trim() && isValidName && (
+        <Text type="secondary" style={{ marginTop: "8px" }}>
+          {t("This emoji will be available as")} <code>:{name}:</code>
+        </Text>
+      )}
+    </ConfirmationDialog>
+  );
+}

app/components/EmojiDialog/EmojiReplaceDialog.tsx

@@ -0,0 +1,86 @@
+import * as React from "react";
+import { Trans, useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import { AttachmentPreset } from "@shared/types";
+import ConfirmationDialog from "~/components/ConfirmationDialog";
+import Text from "~/components/Text";
+import type Emoji from "~/models/Emoji";
+import useStores from "~/hooks/useStores";
+import { uploadFile } from "~/utils/files";
+import { compressImage } from "~/utils/compressImage";
+import { useEmojiFileUpload, EmojiImageDropZone } from "./Components";
+
+interface Props {
+  /** The emoji whose image is being replaced. */
+  emoji: Emoji;
+  /** Callback invoked after a successful replacement. */
+  onSubmit: () => void;
+}
+
+/**
+ * Dialog for replacing the image of an existing custom emoji.
+ */
+export function EmojiReplaceDialog({ emoji, onSubmit }: Props) {
+  const { t } = useTranslation();
+  const { emojis } = useStores();
+  const [isUploading, setIsUploading] = React.useState(false);
+  const { file, getRootProps, getInputProps, isDragActive } =
+    useEmojiFileUpload();
+
+  const handleSubmit = async () => {
+    if (!file) {
+      toast.error(t("Please select an image file"));
+      return;
+    }
+
+    setIsUploading(true);
+    try {
+      const fileToUpload =
+        file.type === "image/gif"
+          ? file
+          : await compressImage(file, {
+              maxHeight: 64,
+              maxWidth: 64,
+            });
+
+      const attachment = await uploadFile(fileToUpload, {
+        name: file.name,
+        preset: AttachmentPreset.Emoji,
+      });
+
+      await emojis.update({
+        id: emoji.id,
+        attachmentId: attachment.id,
+      });
+
+      toast.success(t("Emoji replaced"));
+      onSubmit();
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
+  return (
+    <ConfirmationDialog
+      onSubmit={handleSubmit}
+      disabled={!file || isUploading}
+      savingText={isUploading ? `${t("Uploading")}…` : undefined}
+      submitText={t("Save")}
+    >
+      <Text as="p" type="secondary">
+        <Trans
+          defaults="Upload a new image to replace the current one for <em>{{emojiName}}</em>. All existing uses of this emoji will be updated automatically."
+          values={{ emojiName: `:${emoji.name}:` }}
+          components={{ em: <code /> }}
+        />
+      </Text>
+
+      <EmojiImageDropZone
+        file={file}
+        getRootProps={getRootProps}
+        getInputProps={getInputProps}
+        isDragActive={isDragActive}
+      />
+    </ConfirmationDialog>
+  );
+}

app/components/ErrorBoundary.tsx

@@ -1,8 +1,8 @@
 import { observable } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
-import type { WithTranslation } from "react-i18next";
-import { withTranslation, Trans } from "react-i18next";
+import type { TFunction } from "i18next";
+import { Trans, useTranslation } from "react-i18next";
 import styled from "styled-components";
 import { s } from "@shared/styles";
 import { UrlHelper } from "@shared/utils/UrlHelper";
@@ -18,20 +18,26 @@ import Storage from "@shared/utils/Storage";
 import { deleteAllDatabases } from "~/utils/developer";
 import Flex from "./Flex";
 
-type Props = WithTranslation & {
+interface OwnProps {
   /** Whether to reload the page if a chunk fails to load. */
   reloadOnChunkMissing?: boolean;
   /** Whether to show a title heading. */
   showTitle?: boolean;
   /** The wrapping component to use. */
   component?: React.ComponentType | string;
+  /** Children rendered when no error is present. */
+  children?: React.ReactNode;
+}
+
+type Props = OwnProps & {
+  t: TFunction;
 };
 
 const ERROR_TRACKING_KEY = "error-boundary-tracking";
 const ERROR_TRACKING_WINDOW_MS = 5 * 60 * 1000; // 5 minutes
 
 @observer
-class ErrorBoundary extends React.Component<Props> {
+class ErrorBoundaryClass extends React.Component<Props> {
   @observable
   error: Error | null | undefined;
 
@@ -223,4 +229,9 @@ const Pre = styled.pre`
   white-space: pre-wrap;
 `;
 
-export default withTranslation()(ErrorBoundary);
+function ErrorBoundary(props: OwnProps) {
+  const { t } = useTranslation();
+  return <ErrorBoundaryClass t={t} {...props} />;
+}
+
+export default ErrorBoundary;

app/components/Fade.tsx

@@ -18,7 +18,7 @@ type Props = {
 };
 
 /**
- * Wraps children in a <Fade> if loading is true on mount.
+ * Wraps children in a <Fade> if animate is true on mount.
  */
 export const ConditionalFade = ({ animate, children }: Props) => {
   const [isAnimated] = useState(animate);

app/components/FilterOptions.tsx

@@ -1,16 +1,26 @@
-import deburr from "lodash/deburr";
+import { deburr } from "es-toolkit/compat";
+import { CheckmarkIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import { s } from "@shared/styles";
 import type { FetchPageParams } from "~/stores/base/Store";
 import Button, { Inner } from "~/components/Button";
+import Scrollable from "~/components/Scrollable";
 import Text from "~/components/Text";
+import useMobile from "~/hooks/useMobile";
 import Input, { NativeInput, Outline } from "./Input";
 import type { PaginatedItem } from "./PaginatedList";
 import PaginatedList from "./PaginatedList";
+import {
+  Drawer,
+  DrawerContent,
+  DrawerTitle,
+  DrawerTrigger,
+} from "./primitives/Drawer";
 import { MenuProvider } from "./primitives/Menu/MenuContext";
 import { Menu, MenuContent, MenuTrigger, MenuButton } from "./primitives/Menu";
+import * as MenuComponents from "./primitives/components/Menu";
 import { MenuIconWrapper } from "./primitives/components/Menu";
 
 interface TFilterOption extends PaginatedItem {
@@ -34,7 +44,7 @@ type Props = {
 
 const FilterOptions = ({
   options,
-  selectedKeys = [],
+  selectedKeys,
   className,
   onSelect,
   showFilter,
@@ -45,6 +55,7 @@ const FilterOptions = ({
   ...rest
 }: Props) => {
   const { t } = useTranslation();
+  const isMobile = useMobile();
   const searchInputRef = React.useRef<HTMLInputElement>(null);
   const listRef = React.useRef<HTMLDivElement | null>(null);
   const [open, setOpen] = React.useState(false);
@@ -58,23 +69,45 @@ const FilterOptions = ({
     : "";
 
   const renderItem = React.useCallback(
-    (option) => (
-      <MenuButton
-        key={option.key}
-        icon={
-          option.icon && showIcons ? (
-            <MenuIconWrapper aria-hidden>{option.icon}</MenuIconWrapper>
-          ) : undefined
-        }
-        label={option.label}
-        onClick={() => {
-          onSelect(option.key);
-          setOpen(false);
-        }}
-        selected={selectedKeys.includes(option.key)}
-      />
-    ),
-    [onSelect, showIcons, selectedKeys]
+    (option) => {
+      const handleClick = () => {
+        onSelect(option.key);
+        setOpen(false);
+      };
+
+      const icon =
+        option.icon && showIcons ? (
+          <MenuIconWrapper aria-hidden>{option.icon}</MenuIconWrapper>
+        ) : undefined;
+
+      // On mobile the options render inside a Drawer (bottom sheet) rather than
+      // a Radix dropdown menu, so use the raw menu components directly instead
+      // of the dropdown-bound MenuButton which expects a menu root context.
+      if (isMobile) {
+        return (
+          <MenuComponents.MenuButton key={option.key} onClick={handleClick}>
+            {icon}
+            <MenuComponents.MenuLabel>{option.label}</MenuComponents.MenuLabel>
+            <MenuComponents.SelectedIconWrapper aria-hidden>
+              {selectedKeys.includes(option.key) ? (
+                <CheckmarkIcon size={18} />
+              ) : null}
+            </MenuComponents.SelectedIconWrapper>
+          </MenuComponents.MenuButton>
+        );
+      }
+
+      return (
+        <MenuButton
+          key={option.key}
+          icon={icon}
+          label={option.label}
+          onClick={handleClick}
+          selected={selectedKeys.includes(option.key)}
+        />
+      );
+    },
+    [onSelect, showIcons, selectedKeys, isMobile]
   );
 
   const handleFilter = React.useCallback(
@@ -169,39 +202,73 @@ const FilterOptions = ({
 
   React.useEffect(() => {
     if (open) {
-      searchInputRef.current?.focus();
+      // Avoid auto-focusing on mobile as it immediately pops the on-screen
+      // keyboard over the drawer.
+      if (!isMobile) {
+        searchInputRef.current?.focus();
+      }
     } else {
       setQuery("");
     }
-  }, [open]);
+  }, [open, isMobile]);
 
   const showFilterInput = showFilter || options.length > 10;
   const defaultLabel = rest.defaultLabel || t("Filter options");
 
+  const trigger = (
+    <StyledButton
+      className={className}
+      icon={selectedItems[0]?.key && selectedItems[0]?.icon}
+      disclosure={disclosure}
+      neutral
+    >
+      {selectedItems.length ? selectedLabel : defaultLabel}
+    </StyledButton>
+  );
+
+  const list = (
+    <PaginatedList<TFilterOption>
+      listRef={listRef}
+      options={{ query, ...fetchQueryOptions }}
+      items={filteredOptions}
+      fetch={fetchQuery}
+      renderItem={renderItem}
+      onEscape={handleEscapeFromList}
+      heading={showFilterInput && !isMobile ? <Spacer /> : undefined}
+      empty={<Empty />}
+    />
+  );
+
+  // On mobile render the options inside a Drawer (bottom sheet) to match the
+  // popover style used by context menus across the app.
+  if (isMobile) {
+    return (
+      <Drawer open={open} onOpenChange={setOpen}>
+        <DrawerTrigger asChild>{trigger}</DrawerTrigger>
+        <DrawerContent aria-label={defaultLabel} aria-describedby={undefined}>
+          <DrawerTitle>{defaultLabel}</DrawerTitle>
+          {showFilterInput && (
+            <MobileSearchInput
+              ref={searchInputRef}
+              value={query}
+              onChange={handleFilter}
+              onKeyDown={handleKeyDown}
+              placeholder={`${t("Filter")}…`}
+              margin={0}
+            />
+          )}
+          <StyledScrollable hiddenScrollbars>{list}</StyledScrollable>
+        </DrawerContent>
+      </Drawer>
+    );
+  }
+
   return (
     <MenuProvider variant="dropdown">
       <Menu open={open} onOpenChange={setOpen}>
-        <MenuTrigger>
-          <StyledButton
-            className={className}
-            icon={selectedItems[0]?.key && selectedItems[0]?.icon}
-            disclosure={disclosure}
-            neutral
-          >
-            {selectedItems.length ? selectedLabel : defaultLabel}
-          </StyledButton>
-        </MenuTrigger>
+        <MenuTrigger>{trigger}</MenuTrigger>
         <MenuContent aria-label={defaultLabel} align="start">
-          <PaginatedList<TFilterOption>
-            listRef={listRef}
-            options={{ query, ...fetchQueryOptions }}
-            items={filteredOptions}
-            fetch={fetchQuery}
-            renderItem={renderItem}
-            onEscape={handleEscapeFromList}
-            heading={showFilterInput ? <Spacer /> : undefined}
-            empty={<Empty />}
-          />
+          {list}
           {showFilterInput && (
             <SearchInput
               ref={searchInputRef}
@@ -260,6 +327,22 @@ const SearchInput = styled(Input)`
   }
 `;
 
+const MobileSearchInput = styled(Input)`
+  /* "none" keeps an auto basis so the input retains its natural height; a
+     flexible/0% basis would collapse it and overlap the list below. */
+  flex: none;
+  margin: 0 6px 6px;
+
+  ${NativeInput} {
+    /* 16px avoids iOS zooming the viewport when the input is focused. */
+    font-size: 16px;
+  }
+`;
+
+const StyledScrollable = styled(Scrollable)`
+  max-height: 75vh;
+`;
+
 export const StyledButton = styled(Button)`
   box-shadow: none;
   text-transform: none;

app/components/Header.tsx

@@ -1,4 +1,4 @@
-import throttle from "lodash/throttle";
+import { throttle } from "es-toolkit/compat";
 import { observer } from "mobx-react";
 import { MenuIcon } from "outline-icons";
 import { transparentize } from "polished";
@@ -88,6 +88,7 @@ function Header(
           <Breadcrumbs ref={setBreadcrumbRef}>
             {hasMobileSidebar && (
               <MobileMenuButton
+                haptic="light"
                 onClick={ui.toggleMobileSidebar}
                 icon={<MenuIcon />}
                 neutral
@@ -115,17 +116,23 @@ function Header(
 const Breadcrumbs = styled("div")`
   flex-grow: 1;
   flex-basis: 0;
+  min-width: 0;
   align-items: center;
-  padding-right: 8px;
+  padding-inline: 0 8px;
   display: flex;
+
+  ${breakpoint("tablet")`
+    min-width: auto;
+  `};
 `;
 
 const Actions = styled(Flex)`
   flex-grow: 1;
   flex-basis: 0;
   min-width: auto;
-  padding-left: 8px;
+  padding-inline: 8px 0;
   gap: 12px;
+  margin-inline-start: 8px;
 
   ${breakpoint("tablet")`
     position: unset;

app/components/Heading.ts

@@ -1,11 +1,16 @@
 import styled from "styled-components";
+import breakpoint from "styled-components-breakpoint";
 
 const Heading = styled.h1<{ as?: string; centered?: boolean }>`
   display: flex;
   align-items: center;
   user-select: none;
-  ${(props) => (props.as ? "" : "margin-top: 6vh; font-weight: 600;")}
+  ${(props) => (props.as ? "" : "margin-top: 3vh; font-weight: 600;")}
   ${(props) => (props.centered ? "text-align: center;" : "")}
+
+  ${breakpoint("tablet")`
+    ${(props: { as?: string }) => (props.as ? "" : "margin-top: 6vh;")}
+  `};
 `;
 
 export default Heading;

app/components/Highlight.tsx

@@ -1,4 +1,4 @@
-import escapeRegExp from "lodash/escapeRegExp";
+import { escapeRegExp } from "es-toolkit/compat";
 import * as React from "react";
 import replace from "string-replace-to-array";
 import styled from "styled-components";

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};
@@ -90,6 +88,7 @@ export const CardContent = styled.div`
 
 // &:after — gradient mask for overflow text
 export const Card = styled.div<{ fadeOut?: boolean; $borderRadius?: string }>`
+  ${sharedVars}
   backdrop-filter: blur(10px);
   background: ${s("menuBackground")};
   padding: 16px;
@@ -114,7 +113,6 @@ export const Card = styled.div<{ fadeOut?: boolean; $borderRadius?: string }>`
   ${(props) =>
     props.fadeOut !== false
       ? `&:after {
-          ${sharedVars}
           content: "";
           display: block;
           position: absolute;

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/HoverPreviewDocument.tsx

@@ -26,7 +26,7 @@ const HoverPreviewDocument = React.forwardRef(function HoverPreviewDocument_(
           <ErrorBoundary showTitle={false} reloadOnChunkMissing={false}>
             <Flex column gap={2}>
               <Title>{title}</Title>
-              <Info>{lastActivityByViewer}</Info>
+              {lastActivityByViewer && <Info>{lastActivityByViewer}</Info>}
               <Description as="div">
                 <React.Suspense fallback={<div />}>
                   <Editor

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/EmojiPanel.tsx

@@ -1,4 +1,4 @@
-import concat from "lodash/concat";
+import { concat } from "es-toolkit/compat";
 import { PlusIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
@@ -6,7 +6,7 @@ import type { EmojiSkinTone } from "@shared/types";
 import { EmojiCategory, IconType } from "@shared/types";
 import { getEmojis, getEmojisWithCategory, search } from "@shared/utils/emoji";
 import Flex from "~/components/Flex";
-import { EmojiCreateDialog } from "~/components/EmojiCreateDialog";
+import { EmojiCreateDialog } from "~/components/EmojiDialog/EmojiCreateDialog";
 import { DisplayCategory } from "../utils";
 import type { DataNode, EmojiNode } from "./GridTemplate";
 import GridTemplate from "./GridTemplate";

app/components/IconPicker/components/GridTemplate.tsx

@@ -1,20 +1,25 @@
-import chunk from "lodash/chunk";
-import compact from "lodash/compact";
+import { chunk, compact } from "es-toolkit/compat";
 import * as React from "react";
 import styled from "styled-components";
 import { IconType } from "@shared/types";
 import { IconLibrary } from "@shared/utils/IconLibrary";
 import { Emoji } from "~/components/Emoji";
 import Text from "~/components/Text";
+import useMobile from "~/hooks/useMobile";
 import { TRANSLATED_CATEGORIES } from "../utils";
 import Grid from "./Grid";
 import { IconButton } from "./IconButton";
 import { CustomEmoji } from "@shared/components/CustomEmoji";
 
 /**
- * icon/emoji size is 24px; and we add 4px padding on all sides,
+ * Desktop: 24px icon/emoji + 4px padding on all sides = 32px button.
+ * Mobile: 32px icon/emoji + 4px padding on all sides = 40px button, so
+ * roughly 8 emojis fit across a typical phone screen.
  */
-const BUTTON_SIZE = 32;
+const BUTTON_SIZE_DESKTOP = 32;
+const BUTTON_SIZE_MOBILE = 40;
+const ICON_SIZE_DESKTOP = 24;
+const ICON_SIZE_MOBILE = 32;
 
 type OutlineNode = {
   type: IconType.SVG;
@@ -53,8 +58,11 @@ const GridTemplate = (
   { width, height, data, empty, onIconSelect }: Props,
   ref: React.Ref<HTMLDivElement>
 ) => {
+  const isMobile = useMobile();
+  const buttonSize = isMobile ? BUTTON_SIZE_MOBILE : BUTTON_SIZE_DESKTOP;
+  const iconSize = isMobile ? ICON_SIZE_MOBILE : ICON_SIZE_DESKTOP;
   // 24px padding for the Grid Container
-  const itemsPerRow = Math.floor((width - 24) / BUTTON_SIZE);
+  const itemsPerRow = Math.max(1, Math.floor((width - 24) / buttonSize));
 
   const gridItems = compact(
     data.flatMap((node) => {
@@ -84,7 +92,11 @@ const GridTemplate = (
               onClick={() => onIconSelect({ id: item.name, value: item.name })}
               style={{ "--delay": `${item.delay}ms` } as React.CSSProperties}
             >
-              <Icon as={IconLibrary.getComponent(item.name)} color={item.color}>
+              <Icon
+                as={IconLibrary.getComponent(item.name)}
+                color={item.color}
+                size={iconSize}
+              >
                 {item.initial}
               </Icon>
             </IconButton>
@@ -96,7 +108,11 @@ const GridTemplate = (
             key={item.id}
             onClick={() => onIconSelect({ id: item.id, value: item.value })}
           >
-            <Emoji width={24} height={24}>
+            <Emoji
+              width={iconSize}
+              height={iconSize}
+              size={isMobile ? iconSize : undefined}
+            >
               {item.type === IconType.Custom ? (
                 <CustomEmoji value={item.value} title={item.name} />
               ) : (
@@ -119,7 +135,7 @@ const GridTemplate = (
       height={height}
       data={gridItems}
       columns={itemsPerRow}
-      itemWidth={BUTTON_SIZE}
+      itemWidth={buttonSize}
     />
   );
 };

app/components/IconPicker/components/IconButton.tsx

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { s, hover } from "@shared/styles";
+import { breakpoints, s, hover } from "@shared/styles";
 import NudeButton from "~/components/NudeButton";
 
 export const IconButton = styled(NudeButton)<{ delay?: number }>`
@@ -10,4 +10,9 @@ export const IconButton = styled(NudeButton)<{ delay?: number }>`
   &: ${hover} {
     background: ${s("listItemHoverBackground")};
   }
+
+  @media (max-width: ${breakpoints.tablet - 1}px) {
+    width: 40px;
+    height: 40px;
+  }
 `;

app/components/IconPicker/index.tsx

@@ -79,7 +79,9 @@ const IconPicker = ({
 
   const [activeTab, setActiveTab] = React.useState<TabName>(defaultTab);
 
-  const popoverWidth = isMobile ? windowWidth : POPOVER_WIDTH;
+  // The Drawer's inner content has 6px padding on each side; subtract it
+  // so the panel doesn't overflow horizontally and itemsPerRow is correct.
+  const popoverWidth = isMobile ? windowWidth - 12 : POPOVER_WIDTH;
 
   const handleTabChange = React.useCallback((value: string) => {
     setActiveTab(value as TabName);
@@ -105,7 +107,6 @@ const IconPicker = ({
 
   const handleIconChange = React.useCallback(
     (ic: string) => {
-      setOpen(false);
       const icType = determineIconType(ic);
       const finalColor = icType === IconType.SVG ? chosenColor : null;
       onChange(ic, finalColor);

app/components/Input.tsx

@@ -6,11 +6,15 @@ import breakpoint from "styled-components-breakpoint";
 import { s, ellipsis } from "@shared/styles";
 import Flex from "~/components/Flex";
 import Text from "~/components/Text";
+import Fade from "~/components/Fade";
 import { undraggableOnDesktop } from "~/styles";
 
 export const NativeTextarea = styled.textarea<{
   hasIcon?: boolean;
   hasPrefix?: boolean;
+  $autoSize?: boolean;
+  $minHeight?: string;
+  $maxHeight?: string;
 }>`
   border: 0;
   flex: 1;
@@ -20,6 +24,10 @@ export const NativeTextarea = styled.textarea<{
   background: none;
   color: ${s("text")};
 
+  ${(props) => props.$autoSize && `field-sizing: content;`}
+  ${(props) => props.$minHeight && `min-height: ${props.$minHeight};`}
+  ${(props) => props.$maxHeight && `max-height: ${props.$maxHeight};`}
+
   &:disabled,
   &::placeholder {
     color: ${s("placeholder")};
@@ -87,7 +95,7 @@ export const Wrapper = styled.div<{
 
 const IconWrapper = styled.span`
   position: relative;
-  left: 4px;
+  inset-inline-start: 4px;
   width: 24px;
   height: 24px;
 `;
@@ -95,8 +103,10 @@ const IconWrapper = styled.span`
 export const Outline = styled(Flex)<{
   margin?: string | number;
   hasError?: boolean;
-  focused?: boolean;
+  $focused?: boolean;
+  $round?: boolean;
 }>`
+  position: relative;
   flex: 1;
   margin: ${(props) =>
     props.margin !== undefined ? props.margin : "0 0 16px"};
@@ -106,10 +116,10 @@ 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;
+  border-radius: ${(props) => (props.$round ? "16px" : "4px")};
   font-weight: normal;
   align-items: center;
   overflow: hidden;
@@ -119,6 +129,24 @@ export const Outline = styled(Flex)<{
   user-select: none;
 `;
 
+const CharacterCount = styled.span<{ $warning?: boolean }>`
+  position: absolute;
+  top: 0;
+  inset-inline-end: 0;
+  font-size: 11px;
+  line-height: 1;
+  padding: 2px 4px;
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+  border-end-start-radius: 2px;
+  background: ${(props) =>
+    props.$warning ? props.theme.warning : props.theme.inputBorder};
+  color: ${(props) =>
+    props.$warning ? props.theme.white : props.theme.textTertiary};
+  pointer-events: none;
+`;
+
 export const LabelText = styled.div`
   font-weight: 500;
   padding-bottom: 4px;
@@ -141,6 +169,18 @@ export interface Props extends Omit<
   prefix?: React.ReactNode;
   /** Optional icon that appears inside the input before the textarea */
   icon?: React.ReactNode;
+  /** Show a character count near the maxLength limit. Always shown for textareas, opt-in for other types. */
+  showCharacterCount?: boolean;
+  /** An optional soft limit below maxLength. When the value exceeds this, the character count is shown in a warning color. */
+  warningLimit?: number;
+  /** For textareas, grow the height to fit content. Use with `maxHeight` to cap the growth. */
+  autoSize?: boolean;
+  /** Minimum height of the textarea as a CSS length value (e.g. "3lh", "80px"). */
+  minHeight?: string;
+  /** Maximum height of the textarea as a CSS length value (e.g. "20lh", "400px"). */
+  maxHeight?: string;
+  /** Whether to use a round border-radius (16px) instead of the default (4px). */
+  round?: boolean;
   /** Like autoFocus, but also select any text in the input */
   autoSelect?: boolean;
   /** Callback is triggered with the CMD+Enter keyboard combo */
@@ -157,6 +197,21 @@ function Input(
 ) {
   const internalRef = React.useRef<HTMLInputElement | HTMLTextAreaElement>();
   const [focused, setFocused] = React.useState(false);
+  const [charCount, setCharCount] = React.useState(() => {
+    if (typeof props.value === "string") {
+      return props.value.length;
+    }
+    if (typeof props.defaultValue === "string") {
+      return props.defaultValue.length;
+    }
+    return 0;
+  });
+
+  React.useEffect(() => {
+    if (typeof props.value === "string") {
+      setCharCount(props.value.length);
+    }
+  }, [props.value]);
 
   const handleBlur = (ev: React.SyntheticEvent) => {
     setFocused(false);
@@ -174,6 +229,15 @@ function Input(
     }
   };
 
+  const handleChange = (
+    ev: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    setCharCount(ev.target.value.length);
+    if (props.onChange) {
+      props.onChange(ev);
+    }
+  };
+
   const handleKeyDown = (
     ev: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>
   ) => {
@@ -205,14 +269,31 @@ function Input(
     short,
     flex,
     prefix,
+    round,
     labelHidden,
+    maxLength,
+    showCharacterCount,
+    warningLimit,
+    autoSize,
+    minHeight,
+    maxHeight,
     onFocus,
     onBlur,
+    onChange,
     onRequestSubmit,
     children,
     ...rest
   } = props;
 
+  const showCharCount =
+    (type === "textarea" || showCharacterCount) &&
+    maxLength !== undefined &&
+    (charCount >= maxLength * 0.9 ||
+      (warningLimit !== undefined && charCount >= warningLimit));
+
+  const overWarningLimit =
+    warningLimit !== undefined && charCount > warningLimit;
+
   const wrappedLabel = <LabelText>{label}</LabelText>;
 
   return (
@@ -224,7 +305,7 @@ function Input(
           ) : (
             wrappedLabel
           ))}
-        <Outline focused={focused} margin={margin}>
+        <Outline $focused={focused} $round={round} margin={margin}>
           {prefix}
           {icon && <IconWrapper>{icon}</IconWrapper>}
           {type === "textarea" ? (
@@ -237,9 +318,14 @@ function Input(
               onFocus={handleFocus}
               hasIcon={!!icon}
               hasPrefix={!!prefix}
+              $autoSize={autoSize}
+              $minHeight={minHeight}
+              $maxHeight={maxHeight}
               {...rest}
-              // set it after "rest" to override "onKeyDown" from prop.
+              // set it after "rest" to override props from spread.
+              maxLength={maxLength}
               onKeyDown={handleKeyDown}
+              onChange={handleChange}
             />
           ) : (
             <NativeInput
@@ -253,10 +339,19 @@ function Input(
               hasPrefix={!!prefix}
               type={type}
               {...rest}
-              // set it after "rest" to override "onKeyDown" from prop.
+              // set it after "rest" to override "onKeyDown" and "onChange" from prop.
+              maxLength={maxLength}
               onKeyDown={handleKeyDown}
+              onChange={handleChange}
             />
           )}
+          {showCharCount && (
+            <Fade>
+              <CharacterCount $warning={overWarningLimit}>
+                {charCount}/{maxLength}
+              </CharacterCount>
+            </Fade>
+          )}
           {children}
         </Outline>
       </label>

app/components/InputColor.tsx

@@ -36,7 +36,7 @@ const PositionedSwatchButton = styled(SwatchButton)`
   border: 1px solid ${(props) => props.theme.inputBorder};
   position: absolute;
   bottom: 21px;
-  right: 6px;
+  inset-inline-end: 6px;
 `;
 
 export default InputColor;

app/components/InputMemberPermissionSelect.tsx

@@ -39,7 +39,7 @@ export default function InputMemberPermissionSelect(
       value={value || EmptySelectValue}
       onChange={onChange}
       label={t("Permissions")}
-      hideLabel
+      labelHidden
       nude
       {...rest}
     />

app/components/InputSearchPage.tsx

@@ -4,11 +4,18 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
 import styled, { useTheme } from "styled-components";
-import { isModKey } from "@shared/utils/keyboard";
+import breakpoint from "styled-components-breakpoint";
+import { s } from "@shared/styles";
+import {
+  isModKey,
+  metaDisplay,
+  shortcutSeparator,
+} from "@shared/utils/keyboard";
 import useBoolean from "~/hooks/useBoolean";
 import useKeyDown from "~/hooks/useKeyDown";
+import useMobile from "~/hooks/useMobile";
 import { searchPath } from "~/utils/routeHelpers";
-import Input, { Outline } from "./Input";
+import Input from "./Input";
 
 type Props = {
   /** A string representing where the search started, for tracking. */
@@ -42,6 +49,7 @@ function InputSearchPage({
   const theme = useTheme();
   const history = useHistory();
   const { t } = useTranslation();
+  const isMobile = useMobile();
   const [isFocused, setFocused, setUnfocused] = useBoolean(false);
 
   useKeyDown("f", (ev: KeyboardEvent) => {
@@ -97,16 +105,35 @@ function InputSearchPage({
       onBlur={setUnfocused}
       margin={0}
       labelHidden
-    />
+    >
+      {!isMobile && (
+        <Shortcut $visible={!isFocused && !value && !collectionId}>
+          {metaDisplay}
+          {shortcutSeparator}K
+        </Shortcut>
+      )}
+    </InputMaxWidth>
   );
 }
 
-const InputMaxWidth = styled(Input)`
-  max-width: 30vw;
+const InputMaxWidth = styled(Input).attrs({ round: true })`
+  max-width: min(calc(30vw + 20px), 100%);
 
-  ${Outline} {
-    border-radius: 16px;
-  }
+  /* On mobile the input grows to fill the header, so add a gap before the
+   * adjacent action button (e.g. "New doc"). */
+  ${breakpoint("mobile", "tablet")`
+    margin-inline-end: 8px;
+  `}
+`;
+
+const Shortcut = styled.span<{ $visible: boolean }>`
+  flex-shrink: 0;
+  font-size: 13px;
+  color: ${s("textTertiary")};
+  padding-inline: 0 10px;
+  pointer-events: none;
+  opacity: ${(props) => (props.$visible ? 1 : 0)};
+  transition: opacity 100ms ease-in-out;
 `;
 
 export default observer(InputSearchPage);

app/components/InputSelect.tsx

@@ -21,6 +21,7 @@ import {
   InputSelectContent,
   InputSelectItem,
   InputSelectSeparator,
+  InputSelectHeading,
   InputSelectTrigger,
   type TriggerButtonProps,
 } from "./primitives/InputSelect";
@@ -35,6 +36,13 @@ type Separator = {
   type: "separator";
 };
 
+type Heading = {
+  /* Denotes a non-selectable heading rendered above a group of options. */
+  type: "heading";
+  /* Text shown as the heading label. */
+  label: string;
+};
+
 export type Item = {
   /* Denotes a selectable option in the menu. */
   type: "item";
@@ -48,7 +56,7 @@ export type Item = {
   icon?: React.ReactElement;
 };
 
-export type Option = Item | Separator;
+export type Option = Item | Separator | Heading;
 
 type Props = Omit<React.HTMLAttributes<HTMLButtonElement>, "onChange"> & {
   /* Options to display in the select menu. */
@@ -60,13 +68,15 @@ type Props = Omit<React.HTMLAttributes<HTMLButtonElement>, "onChange"> & {
   /* Label for the select menu. */
   label: string;
   /* When true, label is hidden in an accessible manner. */
-  hideLabel?: boolean;
+  labelHidden?: boolean;
   /* When true, menu is disabled. */
   disabled?: boolean;
   /* When true, width of the menu trigger is restricted. Otherwise, takes up the full width of parent. */
   short?: boolean;
   /** Display a tooltip with the descriptive help text about the select menu. */
   help?: string;
+  /** Render function to override the selected value shown in the trigger. Receives the currently selected option, or undefined when none is selected. */
+  displayValue?: (selectedOption: Item | undefined) => React.ReactNode;
 } & TriggerButtonProps;
 
 export const InputSelect = React.forwardRef<HTMLButtonElement, Props>(
@@ -76,9 +86,10 @@ export const InputSelect = React.forwardRef<HTMLButtonElement, Props>(
       value,
       onChange,
       label,
-      hideLabel,
+      labelHidden,
       short,
       help,
+      displayValue,
       ...triggerProps
     } = props;
 
@@ -95,12 +106,34 @@ export const InputSelect = React.forwardRef<HTMLButtonElement, Props>(
       (opt) => opt.type === "item" && !!opt.icon
     );
 
+    const selectedOption = React.useMemo(
+      () =>
+        localValue
+          ? (options.find(
+              (opt) => opt.type === "item" && opt.value === localValue
+            ) as Item | undefined)
+          : undefined,
+      [localValue, options]
+    );
+
+    const resolvedDisplayValue = displayValue
+      ? displayValue(selectedOption)
+      : undefined;
+
     const renderOption = React.useCallback(
       (option: Option, idx: number) => {
         if (option.type === "separator") {
           return <InputSelectSeparator key={`separator-${idx}`} />;
         }
 
+        if (option.type === "heading") {
+          return (
+            <InputSelectHeading key={`heading-${option.label}`}>
+              {option.label}
+            </InputSelectHeading>
+          );
+        }
+
         return (
           <InputSelectItem key={option.value} value={option.value}>
             <Option option={option} optionsHaveIcon={optionsHaveIcon} />
@@ -143,13 +176,14 @@ export const InputSelect = React.forwardRef<HTMLButtonElement, Props>(
           onChange={onValueChange}
           placeholder={placeholder}
           optionsHaveIcon={optionsHaveIcon}
+          resolvedDisplayValue={resolvedDisplayValue}
         />
       );
     }
 
     return (
       <Wrapper short={short}>
-        <Label text={label} hidden={hideLabel ?? false} help={help} />
+        <Label text={label} hidden={labelHidden ?? false} help={help} />
         <InputSelectRoot
           open={open}
           onOpenChange={setOpen}
@@ -159,6 +193,7 @@ export const InputSelect = React.forwardRef<HTMLButtonElement, Props>(
           <InputSelectTrigger
             ref={ref}
             placeholder={placeholder}
+            displayValue={resolvedDisplayValue}
             {...triggerProps}
           />
           <InputSelectContent
@@ -179,6 +214,7 @@ InputSelect.displayName = "InputSelect";
 type MobileSelectProps = Props & {
   placeholder: string;
   optionsHaveIcon: boolean;
+  resolvedDisplayValue?: React.ReactNode;
 };
 
 const MobileSelect = React.forwardRef<HTMLButtonElement, MobileSelectProps>(
@@ -188,11 +224,13 @@ const MobileSelect = React.forwardRef<HTMLButtonElement, MobileSelectProps>(
       value,
       onChange,
       label,
-      hideLabel,
+      labelHidden,
       disabled,
       short,
       placeholder,
       optionsHaveIcon,
+      displayValue: _displayValue,
+      resolvedDisplayValue,
       ...triggerProps
     } = props;
 
@@ -222,6 +260,14 @@ const MobileSelect = React.forwardRef<HTMLButtonElement, MobileSelectProps>(
           return <InputSelectSeparator key={`separator-${idx}`} />;
         }
 
+        if (option.type === "heading") {
+          return (
+            <InputSelectHeading key={`heading-${option.label}`}>
+              {option.label}
+            </InputSelectHeading>
+          );
+        }
+
         const isSelected = option === selectedOption;
 
         return (
@@ -252,7 +298,7 @@ const MobileSelect = React.forwardRef<HTMLButtonElement, MobileSelectProps>(
 
     return (
       <Wrapper>
-        <Label text={label} hidden={hideLabel ?? false} />
+        <Label text={label} hidden={labelHidden ?? false} />
         <Drawer open={open} onOpenChange={setOpen}>
           <DrawerTrigger asChild>
             <SelectButton
@@ -262,7 +308,9 @@ const MobileSelect = React.forwardRef<HTMLButtonElement, MobileSelectProps>(
               disclosure
               data-placeholder={selectedOption ? false : ""}
             >
-              {selectedOption ? (
+              {resolvedDisplayValue !== undefined ? (
+                resolvedDisplayValue
+              ) : selectedOption ? (
                 <Option
                   option={selectedOption as Item}
                   optionsHaveIcon={optionsHaveIcon}
@@ -365,8 +413,8 @@ const IconWrapper = styled.span`
   align-items: center;
   width: 24px;
   height: 24px;
-  margin-left: -4px;
-  margin-right: 4px;
+  margin-inline-start: -4px;
+  margin-inline-end: 4px;
   overflow: hidden;
   flex-shrink: 0;
 `;

app/components/InputSelectPermission.tsx

@@ -11,7 +11,7 @@ type Props = {
   shrink?: boolean;
 } & Pick<
   React.ComponentProps<typeof InputSelect>,
-  "value" | "onChange" | "disabled" | "hideLabel" | "nude" | "help"
+  "value" | "onChange" | "disabled" | "labelHidden" | "nude" | "help"
 >;
 
 export const InputSelectPermission = React.forwardRef<HTMLButtonElement, Props>(

app/components/LanguagePrompt.tsx

@@ -1,5 +1,5 @@
 import { m } from "framer-motion";
-import find from "lodash/find";
+import { find } from "es-toolkit/compat";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import { languages, languageOptions } from "@shared/i18n";

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}>
@@ -47,6 +48,7 @@ const Layout = React.forwardRef(function Layout_(
         <Content
           auto
           justify="center"
+          role="main"
           $isResizing={ui.sidebarIsResizing}
           $sidebarCollapsed={sidebarCollapsed}
           $hasSidebar={!!sidebar}
@@ -54,14 +56,14 @@ const Layout = React.forwardRef(function Layout_(
             sidebarCollapsed
               ? undefined
               : {
-                  marginLeft: `${ui.sidebarWidth}px`,
+                  marginInlineStart: `${ui.sidebarWidth}px`,
                 }
           }
         >
           {children}
         </Content>
 
-        {sidebarRight}
+        <AnimatePresence initial={false}>{sidebarRight}</AnimatePresence>
       </Container>
     </Container>
   );
@@ -84,21 +86,21 @@ type ContentProps = {
 const Content = styled(Flex)<ContentProps>`
   margin: 0;
   transition: ${(props) =>
-    props.$isResizing ? "none" : `margin-left 100ms ease-out`};
+    props.$isResizing ? "none" : `margin-inline-start 100ms ease-out`};
 
   @media print {
     margin: 0 !important;
   }
 
   ${breakpoint("mobile", "tablet")`
-    margin-left: 0 !important;
+    margin-inline-start: 0 !important;
   `}
 
   ${breakpoint("tablet")`
     ${(props: ContentProps) =>
       props.$hasSidebar &&
       props.$sidebarCollapsed &&
-      `margin-left: ${props.theme.sidebarCollapsedWidth}px;`}
+      `margin-inline-start: ${props.theme.sidebarCollapsedWidth}px;`}
   `};
 `;
 

app/components/LazyLoad.ts

@@ -1,6 +1,7 @@
 import * as React from "react";
 import lazyWithRetry from "~/utils/lazyWithRetry";
 
+// oxlint-disable no-explicit-any -- ComponentType<any> is the standard React pattern for generic component constraints
 export interface LazyComponent<T extends React.ComponentType<any>> {
   Component: React.LazyExoticComponent<T>;
   preload: () => Promise<{ default: T }>;
@@ -9,39 +10,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

@@ -2,7 +2,12 @@ import { observer } from "mobx-react";
 import * as Dialog from "@radix-ui/react-dialog";
 import type { Keyframes } from "styled-components";
 import styled, { css, keyframes } from "styled-components";
-import type { ComponentProps, HTMLAttributes, ReactNode } from "react";
+import type {
+  ComponentProps,
+  HTMLAttributes,
+  ReactNode,
+  SyntheticEvent,
+} from "react";
 import {
   createContext,
   forwardRef,
@@ -18,6 +23,7 @@ import { Error as ImageError } from "@shared/editor/components/Image";
 import {
   BackIcon,
   CloseIcon,
+  CommentIcon,
   CrossIcon,
   DownloadIcon,
   LinkIcon,
@@ -40,7 +46,7 @@ import CopyToClipboard from "./CopyToClipboard";
 import { Separator } from "./Actions";
 import useSwipe from "~/hooks/useSwipe";
 import { toast } from "sonner";
-import { findIndex } from "lodash";
+import { findIndex } from "es-toolkit/compat";
 import type { LightboxImage } from "@shared/editor/lib/Lightbox";
 import type { ReactZoomPanPinchRef } from "react-zoom-pan-pinch";
 import {
@@ -55,6 +61,9 @@ import { NodeSelection } from "prosemirror-state";
 import { ImageSource } from "@shared/editor/lib/FileHelper";
 import Desktop from "~/utils/Desktop";
 import { HStack } from "./primitives/HStack";
+import { useDocumentContext } from "./DocumentContext";
+import LightboxComments from "~/scenes/Document/components/Comments/LightboxComments";
+import { PortalContext } from "./Portal";
 
 export enum LightboxStatus {
   READY_TO_OPEN,
@@ -88,6 +97,15 @@ type Animation = {
 
 const ANIMATION_DURATION = 0.3 * Second.ms;
 
+/**
+ * Stops a React synthetic event from propagating to ancestor handlers, including
+ * Radix Dialog's outside-interaction detection and the editor's own click
+ * handlers, so the comments sidebar can manage its own focus.
+ */
+const stopPropagation = (event: SyntheticEvent) => {
+  event.stopPropagation();
+};
+
 type Props = {
   /** List of allowed images */
   images: LightboxImage[];
@@ -225,6 +243,11 @@ function Lightbox({ images, activeImage, onUpdate, onClose, readOnly }: Props) {
   const overlayRef = useRef<HTMLDivElement | null>(null);
   const contentRef = useRef<HTMLDivElement | null>(null);
   const [status, setStatus] = useState<Status>({ lightbox: null, image: null });
+  const [commentsOpen, setCommentsOpen] = useState(false);
+  const [commentsRendered, setCommentsRendered] = useState(false);
+  const [commentsVisible, setCommentsVisible] = useState(false);
+  const [commentsPortalEl, setCommentsPortalEl] =
+    useState<HTMLDivElement | null>(null);
   const animation = useRef<Animation | null>(null);
   const finalImage = useRef<{
     center: { x: number; y: number };
@@ -233,6 +256,10 @@ function Lightbox({ images, activeImage, onUpdate, onClose, readOnly }: Props) {
   } | null>(null);
   const zoomPanPinchRef = useRef<ReactZoomPanPinchRef>(null);
   const editor = useEditor();
+  const { document: contextDocument } = useDocumentContext();
+  const activeNode = editor?.view?.state?.doc?.nodeAt(activeImage.pos);
+  const canShowComments =
+    !!contextDocument && activeNode?.type.name === "image";
 
   const currentImageIndex = findIndex(
     images,
@@ -312,6 +339,19 @@ function Lightbox({ images, activeImage, onUpdate, onClose, readOnly }: Props) {
     }
   }, [status.lightbox]);
 
+  useEffect(() => {
+    if (commentsOpen) {
+      setCommentsRendered(true);
+      const frame = window.requestAnimationFrame(() =>
+        setCommentsVisible(true)
+      );
+      return () => window.cancelAnimationFrame(frame);
+    }
+    setCommentsVisible(false);
+    const timer = window.setTimeout(() => setCommentsRendered(false), 200);
+    return () => window.clearTimeout(timer);
+  }, [commentsOpen]);
+
   useEffect(() => {
     if (status.image === ImageStatus.MIN_ZOOM) {
       // It was observed that focus went to `body` as the zoom out button was disabled
@@ -441,6 +481,10 @@ function Lightbox({ images, activeImage, onUpdate, onClose, readOnly }: Props) {
         status.image === ImageStatus.MAX_ZOOM
       )
     ) {
+      // Refresh the cached natural image position to account for any layout
+      // changes (e.g., the comments sidebar opening) since the image loaded.
+      rememberImagePosition();
+
       // in lightbox
       const lightboxImgDOMRect = imgRef.current.getBoundingClientRect();
       const {
@@ -632,17 +676,30 @@ function Lightbox({ images, activeImage, onUpdate, onClose, readOnly }: Props) {
   }, [activeImage, status.lightbox]);
 
   const handleKeyDown = (ev: React.KeyboardEvent<HTMLDivElement>) => {
-    ev.preventDefault();
+    // Don't intercept keys while typing into an input, textarea, or editor.
+    const target = ev.target as HTMLElement | null;
+    if (
+      target &&
+      target !== ev.currentTarget &&
+      (target.tagName === "INPUT" ||
+        target.tagName === "TEXTAREA" ||
+        target.isContentEditable)
+    ) {
+      return;
+    }
     switch (ev.key) {
       case "ArrowLeft": {
+        ev.preventDefault();
         prev();
         break;
       }
       case "ArrowRight": {
+        ev.preventDefault();
         next();
         break;
       }
       case "Escape": {
+        ev.preventDefault();
         close();
         break;
       }
@@ -698,14 +755,21 @@ function Lightbox({ images, activeImage, onUpdate, onClose, readOnly }: Props) {
           onAnimationStart={handleFadeStart}
           onAnimationEnd={handleFadeEnd}
         />
-        <StyledContent onKeyDown={handleKeyDown} ref={contentRef}>
+        <StyledContent
+          onKeyDown={handleKeyDown}
+          ref={contentRef}
+          $commentsOpen={canShowComments && commentsOpen}
+        >
           <VisuallyHidden.Root>
             <Dialog.Title>{t("Lightbox")}</Dialog.Title>
             <Dialog.Description>
               {t("View, navigate, or download images in the document")}
             </Dialog.Description>
           </VisuallyHidden.Root>
-          <Actions animation={animation.current}>
+          <Actions
+            animation={animation.current}
+            $commentsOpen={canShowComments && commentsOpen}
+          >
             <Tooltip content={t("Zoom in")} placement="bottom">
               <ActionButton
                 tabIndex={-1}
@@ -788,7 +852,22 @@ function Lightbox({ images, activeImage, onUpdate, onClose, readOnly }: Props) {
                   />
                 </Tooltip>
               )}
-            <Separator />
+            {canShowComments && (
+              <Tooltip content={t("Comments")} placement="bottom">
+                <ActionButton
+                  tabIndex={-1}
+                  onClick={() => setCommentsOpen((open) => !open)}
+                  aria-label={t("Comments")}
+                  aria-pressed={commentsOpen}
+                  size={32}
+                  icon={<CommentIcon />}
+                  borderOnHover
+                  neutral
+                />
+              </Tooltip>
+            )}
+          </Actions>
+          <CloseAction animation={animation.current}>
             <Dialog.Close asChild>
               <Tooltip content={t("Close")} shortcut="Esc" placement="bottom">
                 <ActionButton
@@ -802,7 +881,7 @@ function Lightbox({ images, activeImage, onUpdate, onClose, readOnly }: Props) {
                 />
               </Tooltip>
             </Dialog.Close>
-          </Actions>
+          </CloseAction>
           {currentImageIndex > 0 &&
             !(
               status.image === ImageStatus.ZOOMED ||
@@ -878,12 +957,36 @@ function Lightbox({ images, activeImage, onUpdate, onClose, readOnly }: Props) {
               status.image === ImageStatus.ZOOMED ||
               status.image === ImageStatus.MAX_ZOOM
             ) && (
-              <Nav dir="right" $hidden={isIdle} animation={animation.current}>
+              <Nav
+                dir="right"
+                $hidden={isIdle}
+                animation={animation.current}
+                $commentsOpen={canShowComments && commentsOpen}
+              >
                 <NavButton onClick={next} size={32} aria-label={t("Next")}>
                   <NextIcon size={32} />
                 </NavButton>
               </Nav>
             )}
+          {canShowComments && commentsRendered && contextDocument && (
+            <CommentsSidebar
+              ref={setCommentsPortalEl}
+              animation={animation.current}
+              $open={commentsVisible}
+              onPointerDown={stopPropagation}
+              onPointerUp={stopPropagation}
+              onMouseDown={stopPropagation}
+              onMouseUp={stopPropagation}
+              onClick={stopPropagation}
+            >
+              <PortalContext.Provider value={commentsPortalEl}>
+                <LightboxComments
+                  document={contextDocument}
+                  pos={activeImage.pos}
+                />
+              </PortalContext.Provider>
+            </CommentsSidebar>
+          )}
         </StyledContent>
       </Dialog.Portal>
     </Dialog.Root>
@@ -1090,7 +1193,7 @@ const StyledImg = styled.img<{
           : ""}
 `;
 
-const StyledContent = styled(Dialog.Content)`
+const StyledContent = styled(Dialog.Content)<{ $commentsOpen: boolean }>`
   position: fixed;
   inset: 0;
   z-index: ${depths.modal};
@@ -1098,6 +1201,8 @@ const StyledContent = styled(Dialog.Content)`
   justify-content: center;
   align-items: center;
   outline: none;
+  padding-inline-end: ${(props) => (props.$commentsOpen ? "360px" : "0")};
+  transition: padding-inline-end 200ms ease-out;
 `;
 
 const ActionButton = styled(Button)`
@@ -1106,15 +1211,45 @@ const ActionButton = styled(Button)`
 
 const Actions = styled(HStack)<{
   animation: Animation | null;
+  $commentsOpen: boolean;
 }>`
   position: absolute;
   top: 0;
-  right: 0;
+  right: ${(props) => (props.$commentsOpen ? "360px" : "44px")};
   margin: 16px 12px;
   z-index: ${depths.modal};
   background: ${(props) => transparentize(0.2, props.theme.background)};
   backdrop-filter: blur(4px);
   border-radius: 6px;
+  transition: right 200ms ease-out;
+
+  ${(props) =>
+    props.animation === null
+      ? css`
+          opacity: 0;
+        `
+      : props.animation.fadeIn
+        ? css`
+            animation: ${props.animation.fadeIn.apply()}
+              ${props.animation.fadeIn.duration}ms;
+          `
+        : props.animation.fadeOut
+          ? css`
+              animation: ${props.animation.fadeOut.apply()}
+                ${props.animation.fadeOut.duration}ms;
+            `
+          : ""}
+`;
+
+const CloseAction = styled.div<{ animation: Animation | null }>`
+  position: fixed;
+  top: 0;
+  right: 0;
+  margin: 16px 12px;
+  z-index: ${depths.modal + 1};
+  background: ${(props) => transparentize(0.2, props.theme.background)};
+  backdrop-filter: blur(4px);
+  border-radius: 6px;
 
   ${(props) =>
     props.animation === null
@@ -1138,10 +1273,16 @@ const Nav = styled.div<{
   $hidden: boolean;
   dir: "left" | "right";
   animation: Animation | null;
+  $commentsOpen?: boolean;
 }>`
   position: absolute;
-  ${(props) => (props.dir === "left" ? "left: 0;" : "right: 0;")}
-  transition: opacity 500ms ease-in-out;
+  ${(props) =>
+    props.dir === "left"
+      ? "left: 0;"
+      : `right: ${props.$commentsOpen ? "360px" : "0"};`}
+  transition:
+    opacity 500ms ease-in-out,
+    right 200ms ease-out;
   z-index: ${depths.modal};
   ${(props) => props.$hidden && "opacity: 0;"}
   ${(props) =>
@@ -1183,6 +1324,27 @@ const StyledError = styled(ImageError)<{
           : ""}
 `;
 
+const CommentsSidebar = styled.div<{
+  animation: Animation | null;
+  $open: boolean;
+}>`
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: ${depths.modal};
+  display: flex;
+  transform: translateX(${(props) => (props.$open ? "0" : "100%")});
+  transition: transform 200ms ease-out;
+  ${(props) =>
+    props.animation?.fadeOut
+      ? css`
+          animation: ${props.animation.fadeOut.apply()}
+            ${props.animation.fadeOut.duration}ms;
+        `
+      : ""}
+`;
+
 const NavButton = styled(NudeButton)`
   margin: 16px;
   opacity: 0.75;