ci: pin third-party GitHub Actions to commit SHAs (#12662)

Pins all 12 third-party action references currently on mutable tags
to the commit each tag resolves to, across 4 workflow files, keeping
a # tag comment. Ref-only, no behavior change.

.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": {

.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  –––––––––––

.env.test

@@ -17,6 +17,8 @@ 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
@@ -29,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]
+    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,6 +14,7 @@ data/*
 *.pem
 *.key
 *.cert
+.history
 
 # Yarn Berry
 .yarn/*

.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.5.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-02-15
+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

@@ -528,7 +528,7 @@ export const createTemplate = createInternalLinkAction({
   keywords: "new create template",
   visible: ({ getActivePolicies }) =>
     getActivePolicies(Collection).some(
-      (policy) => policy.abilities.createDocument
+      (policy) => policy.abilities.createTemplate
     ),
   to: ({ getActiveModel }) => {
     const collection = getActiveModel(Collection);

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,16 +32,20 @@ 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 { ProsemirrorHelper } from "~/models/helpers/ProsemirrorHelper";
 import DocumentPermanentDelete from "~/scenes/DocumentPermanentDelete";
 import DocumentPublish from "~/scenes/DocumentPublish";
 import DeleteDocumentsInTrash from "~/scenes/Trash/components/DeleteDocumentsInTrash";
@@ -73,10 +77,11 @@ import {
   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,
@@ -86,6 +91,8 @@ import type {
 } from "~/types";
 import lazyWithRetry from "~/utils/lazyWithRetry";
 import env from "~/env";
+import { isMac, isWindows } from "@shared/utils/browser";
+import isCloudHosted from "~/utils/isCloudHosted";
 import DocumentMove from "~/components/DocumentExplorer/DocumentMove";
 
 const Insights = lazyWithRetry(
@@ -102,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}
@@ -122,12 +131,12 @@ export const openDocument = createActionWithChildren({
             color={item.color ?? undefined}
           />
         ) : (
-          <DocumentIcon />
+          <DocumentIcon outline={item.isDraft} />
         ),
         section: DocumentSection,
         to: item.url,
-      })
-    );
+      });
+    });
   },
 });
 
@@ -201,48 +210,6 @@ export const createDraftDocument = createInternalLinkAction({
   }),
 });
 
-export const createDocumentFromTemplate = createInternalLinkAction({
-  name: ({ t }) => t("New from template"),
-  analyticsName: "New document",
-  section: DocumentSection,
-  icon: <NewDocumentIcon />,
-  keywords: "create",
-  visible: ({
-    currentTeamId,
-    activeCollectionId,
-    activeDocumentId,
-    stores,
-  }) => {
-    const document = activeDocumentId
-      ? stores.documents.get(activeDocumentId)
-      : undefined;
-
-    if (!currentTeamId || !!document?.isDraft || !!document?.isDeleted) {
-      return false;
-    }
-
-    if (activeCollectionId) {
-      return stores.policies.abilities(activeCollectionId).createDocument;
-    }
-    return stores.policies.abilities(currentTeamId).createDocument;
-  },
-  to: ({ activeDocumentId, activeCollectionId, sidebarContext }) => {
-    if (!activeDocumentId || !activeCollectionId) {
-      return "";
-    }
-
-    const [pathname, search] = newDocumentPath(activeCollectionId, {
-      templateId: activeDocumentId,
-    }).split("?");
-
-    return {
-      pathname,
-      search,
-      state: { sidebarContext },
-    };
-  },
-});
-
 /**
  * Finds the index of a document among its siblings in the collection tree.
  *
@@ -273,6 +240,26 @@ function findDocumentSiblingIndex(
   return siblings?.findIndex((node) => node.id === document.id) ?? -1;
 }
 
+/**
+ * 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("Nested document"),
   analyticsName: "New document",
@@ -305,10 +292,14 @@ const createDocumentBefore = createInternalLinkAction({
       return false;
     }
     const document = stores.documents.get(activeDocumentId);
-    return (
-      !!document?.collectionId &&
-      stores.policies.abilities(currentTeamId).createDocument
-    );
+    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
@@ -343,10 +334,14 @@ const createDocumentAfter = createInternalLinkAction({
       return false;
     }
     const document = stores.documents.get(activeDocumentId);
-    return (
-      !!document?.collectionId &&
-      stores.policies.abilities(currentTeamId).createDocument
-    );
+    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
@@ -371,17 +366,67 @@ const createDocumentAfter = createInternalLinkAction({
   },
 });
 
+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, stores }) =>
-    !!currentTeamId && stores.policies.abilities(currentTeamId).createDocument,
+  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",
@@ -607,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 }) => {
@@ -764,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"));
     }
@@ -982,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);
   },
 });
 
@@ -1050,7 +1148,7 @@ export const createTemplateFromDocument = createAction({
     }
     return !!(
       !!activeCollectionId &&
-      stores.policies.abilities(activeCollectionId).updateDocument
+      stores.policies.abilities(activeCollectionId).createTemplate
     );
   },
   perform: ({ activeDocumentId, stores, t, event }) => {
@@ -1381,7 +1479,7 @@ export const openDocumentComments = createAction({
       return;
     }
 
-    stores.ui.toggleComments();
+    stores.ui.set({ rightSidebar: "comments" });
   },
 });
 
@@ -1504,6 +1602,7 @@ export const rootDocumentActions = [
   createDocument,
   createDraftDocument,
   createNewDocument,
+  createNewDocumentInAlphabeticalCollection,
   createNestedDocument,
   createTemplateFromDocument,
   deleteDocument,
@@ -1529,11 +1628,13 @@ export const rootDocumentActions = [
   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

@@ -25,6 +25,7 @@ import {
   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";
@@ -200,8 +201,6 @@ export const copyTemplateAsPlainText = createAction({
   perform: async ({ getActiveModel, t }) => {
     const template = getActiveModel(Template);
     if (template) {
-      const { ProsemirrorHelper } =
-        await import("~/models/helpers/ProsemirrorHelper");
       copy(ProsemirrorHelper.toPlainText(template));
       toast.success(t("Text copied to clipboard"));
     }
@@ -224,7 +223,7 @@ export const printTemplate = createAction({
   icon: <PrintIcon />,
   visible: ({ getActiveModel }) => !!getActiveModel(Template) && !!window.print,
   perform: () => {
-    queueMicrotask(window.print);
+    setTimeout(window.print, 0);
   },
 });
 

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) => {
@@ -58,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,30 +1,27 @@
-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";
@@ -32,12 +29,6 @@ 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")
 );
@@ -50,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();
@@ -74,68 +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 />
-          <NotificationBadge />
-        </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/Breadcrumb.tsx

@@ -55,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") {
@@ -68,6 +77,7 @@ function Breadcrumb(
           {item.icon}
           <Item
             to={item.to}
+            onClick={handleClick}
             $withIcon={!!item.icon}
             $highlight={!!highlightFirstItem && index === 0}
           >
@@ -76,7 +86,7 @@ function Breadcrumb(
         </>
       );
     },
-    [actionContext, highlightFirstItem]
+    [actionContext, handleClick, highlightFirstItem]
   );
 
   return (
@@ -103,19 +113,16 @@ 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;

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

@@ -64,7 +64,7 @@ const StyledTrigger = styled(RadixCollapsible.Trigger)`
   padding: 0 0 8px 0;
   cursor: var(--pointer);
   color: ${s("textTertiary")};
-  font-size: 14pxte
+  font-size: 14px;
 
   &:hover {
     color: ${s("textSecondary")};

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,8 +6,8 @@ import { Trans, useTranslation } from "react-i18next";
 import styled from "styled-components";
 import Icon from "@shared/components/Icon";
 import { randomElement } from "@shared/random";
-import 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";
@@ -15,6 +15,7 @@ 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";
@@ -24,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();
@@ -65,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
@@ -93,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,
     },
   });
@@ -135,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">
@@ -190,43 +277,14 @@ export const CollectionForm = observer(function CollectionForm_({
         />
       )}
 
-      {(team.sharing || team.getPreference(TeamPreference.Commenting)) && (
-        <Collapsible label={t("Advanced options")}>
-          {team.sharing && (
-            <Controller
-              control={control}
-              name="sharing"
-              render={({ field }) => (
-                <Switch
-                  id="sharing"
-                  label={t("Public document sharing")}
-                  note={t(
-                    "Allow documents within this collection to be shared publicly on the internet."
-                  )}
-                  checked={field.value}
-                  onChange={field.onChange}
-                />
-              )}
-            />
-          )}
-
-          {team.getPreference(TeamPreference.Commenting) && (
-            <Controller
-              control={control}
-              name="commenting"
-              render={({ field }) => (
-                <Switch
-                  id="commenting"
-                  label={t("Commenting")}
-                  note={t(
-                    "Allow commenting on documents within this collection."
-                  )}
-                  checked={!!field.value}
-                  onChange={field.onChange}
-                />
-              )}
-            />
-          )}
+      {collection ? (
+        options
+      ) : (
+        <Collapsible
+          label={t("Advanced options")}
+          onOpenChange={() => dialog.setAnimating(true)}
+        >
+          {options}
         </Collapsible>
       )}
 

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/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

@@ -120,7 +120,7 @@ const DefaultCollectionInputSelect = observer(
         value={defaultCollectionId ?? "home"}
         onChange={onSelectCollection}
         label={t("Start view")}
-        hideLabel
+        labelHidden
         short
       />
     );

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,13 +1,18 @@
+import type { TFunction } from "i18next";
 import { observer } from "mobx-react";
 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";
@@ -15,6 +20,56 @@ 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,7 +123,9 @@ function DocumentBreadcrumb(
         to: archivePath(),
       }),
       createInternalLinkAction({
-        name: collection?.name,
+        name: collection ? (
+          <CollectionName collection={collection} />
+        ) : undefined,
         section: ActiveDocumentSection,
         icon: collection ? (
           <CollectionIcon collection={collection} expanded />
@@ -90,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,
@@ -138,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>
@@ -169,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/DocumentCopy.tsx

@@ -40,8 +40,8 @@ function DocumentCopy({ document, onSubmit }: Props) {
     return nodes;
   }, [policies, collectionTrees]);
 
-  const copy = async () => {
-    if (!selectedPath) {
+  const copy = async (path = selectedPath) => {
+    if (!path) {
       toast.message(t("Select a location to copy"));
       return;
     }
@@ -52,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"));
@@ -111,7 +109,7 @@ function DocumentCopy({ document, onSubmit }: Props) {
             t("Select a location to copy")
           )}
         </Text>
-        <Button disabled={!selectedPath || copying} onClick={copy}>
+        <Button disabled={!selectedPath || copying} onClick={() => copy()}>
           {copying ? `${t("Copying")}…` : t("Copy")}
         </Button>
       </Footer>

app/components/DocumentExplorer/DocumentExplorer.tsx

@@ -1,18 +1,19 @@
 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";
@@ -23,7 +24,6 @@ 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,7 +31,7 @@ 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 */
@@ -42,6 +42,28 @@ type Props = {
   showDocuments?: boolean;
 };
 
+const VERTICAL_PADDING = 6;
+const HORIZONTAL_PADDING = 24;
+
+const innerElementType = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(function innerElementType(
+  { style, ...rest }: React.HTMLAttributes<HTMLDivElement>,
+  ref
+) {
+  return (
+    <div
+      ref={ref}
+      style={{
+        ...style,
+        height: `${parseFloat(style?.height + "") + VERTICAL_PADDING * 2}px`,
+      }}
+      {...rest}
+    />
+  );
+});
+
 function DocumentExplorer({
   onSubmit,
   onSelect,
@@ -67,8 +89,6 @@ function DocumentExplorer({
       return node || null;
     }
   );
-  const [initialScrollOffset, setInitialScrollOffset] =
-    React.useState<number>(0);
   const [activeNode, setActiveNode] = React.useState<number>(0);
   const [expandedNodes, setExpandedNodes] = React.useState<string[]>(() => {
     if (defaultValue) {
@@ -91,9 +111,6 @@ function DocumentExplorer({
   );
   const listRef = React.useRef<List<NavigationNode[]>>(null);
 
-  const VERTICAL_PADDING = 6;
-  const HORIZONTAL_PADDING = 24;
-
   const searchIndex = React.useMemo(
     () =>
       new FuzzySearch(flatten(items.map(flattenTree)), ["title"], {
@@ -144,7 +161,8 @@ function DocumentExplorer({
         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
@@ -152,17 +170,9 @@ function DocumentExplorer({
   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);
@@ -170,16 +180,16 @@ function DocumentExplorer({
 
   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) => {
@@ -190,8 +200,7 @@ function DocumentExplorer({
 
     // 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) => {
@@ -200,8 +209,7 @@ function DocumentExplorer({
     // 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(() => {
@@ -225,7 +233,8 @@ function DocumentExplorer({
   };
 
   const hasChildren = (node: number) =>
-    nodes[node].children.length > 0 || showDocuments !== false;
+    nodes[node].children.length > 0 ||
+    (showDocuments !== false && nodes[node].type === "collection");
 
   const toggleCollapse = (node: number) => {
     if (!hasChildren(node)) {
@@ -246,6 +255,13 @@ function DocumentExplorer({
     }
   };
 
+  const submitNode = (node: number) => {
+    const selectedNode = nodes[node];
+
+    selectNode(selectedNode);
+    onSubmit(selectedNode);
+  };
+
   const ListItem = observer(
     ({
       index,
@@ -302,7 +318,8 @@ function DocumentExplorer({
             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}
@@ -316,7 +333,8 @@ function DocumentExplorer({
             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);
@@ -378,7 +396,7 @@ function DocumentExplorer({
       }
       case "Enter": {
         if (isModKey(ev)) {
-          onSubmit();
+          onSubmit(selectedNode);
         } else {
           toggleSelect(activeNode);
         }
@@ -387,25 +405,6 @@ function DocumentExplorer({
     }
   };
 
-  const innerElementType = React.forwardRef<
-    HTMLDivElement,
-    React.HTMLAttributes<HTMLDivElement>
-  >(function innerElementType(
-    { style, ...rest }: React.HTMLAttributes<HTMLDivElement>,
-    ref
-  ) {
-    return (
-      <div
-        ref={ref}
-        style={{
-          ...style,
-          height: `${parseFloat(style?.height + "") + VERTICAL_PADDING * 2}px`,
-        }}
-        {...rest}
-      />
-    );
-  });
-
   return (
     <Container tabIndex={-1} onKeyDown={handleKeyDown}>
       <ListSearch
@@ -425,14 +424,12 @@ function DocumentExplorer({
               <Flex role="listbox" column>
                 <List
                   ref={listRef}
-                  key={nodes.length}
                   width={width}
                   height={height}
                   itemData={nodes}
                   itemCount={nodes.length}
                   itemSize={isMobile ? 48 : 32}
                   innerElementType={innerElementType}
-                  initialScrollOffset={initialScrollOffset}
                   itemKey={(index, results) => results[index].id}
                 >
                   {ListItem}
@@ -460,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,6 +62,7 @@ function DocumentExplorerNode(
       selected={selected}
       active={active}
       onClick={onClick}
+      onDoubleClick={onDoubleClick}
       style={style}
       onPointerMove={onPointerMove}
       role="option"
@@ -80,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,7 +1,6 @@
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import scrollIntoView from "scroll-into-view-if-needed";
 import styled from "styled-components";
 import { ellipsis } from "@shared/styles";
 import { Node as SearchResult } from "./DocumentExplorerNode";
@@ -18,6 +17,7 @@ type Props = {
 
   onPointerMove: (ev: React.MouseEvent) => void;
   onClick: (ev: React.MouseEvent) => void;
+  onDoubleClick: (ev: React.MouseEvent) => void;
 };
 
 function DocumentExplorerSearchResult({
@@ -29,28 +29,16 @@ 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"

app/components/DocumentExplorer/DocumentMove.tsx

@@ -3,6 +3,7 @@ import { useState, useMemo } from "react";
 import { useTranslation, Trans } from "react-i18next";
 import { toast } from "sonner";
 import type { NavigationNode } from "@shared/types";
+import { descendants, flattenTree } from "@shared/utils/tree";
 import type Document from "~/models/Document";
 import Button from "~/components/Button";
 import Text from "~/components/Text";
@@ -23,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),
     });
 
@@ -43,19 +54,19 @@ function DocumentMove({ document }: Props) {
       );
 
     return nodes;
-  }, [policies, collectionTrees, document.id, document.parentDocumentId]);
+  }, [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 +103,7 @@ function DocumentMove({ document }: Props) {
             t("Select a location to move")
           )}
         </Text>
-        <Button disabled={!selectedPath || moving} onClick={move}>
+        <Button disabled={!selectedPath || moving} onClick={() => move()}>
           {moving ? `${t("Moving")}…` : t("Move")}
         </Button>
       </Footer>

app/components/DocumentExplorer/TemplateMove.tsx

@@ -33,15 +33,14 @@ function TemplateMove({ template }: Props) {
     [policies, collectionTrees]
   );
 
-  const move = async () => {
-    if (!selectedPath) {
+  const move = async (path = selectedPath) => {
+    if (!path) {
       toast.message(t("Select a location to move"));
       return;
     }
 
     try {
-      const collectionId = (selectedPath.collectionId ??
-        selectedPath.id) as string;
+      const collectionId = (path.collectionId ?? path.id) as string;
       await template.save({ collectionId });
 
       toast.success(t("Template moved"));
@@ -76,7 +75,7 @@ function TemplateMove({ template }: Props) {
             t("Select a location to move")
           )}
         </Text>
-        <Button disabled={!selectedPath} onClick={move}>
+        <Button disabled={!selectedPath} onClick={() => move()}>
           {t("Move")}
         </Button>
       </Footer>

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";
@@ -58,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);
@@ -96,6 +100,23 @@ 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={{
@@ -112,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),
@@ -159,7 +181,7 @@ function DocumentListItem(
                     <Badge>{t("Draft")}</Badge>
                   </Tooltip>
                 )}
-                {canStar && <StarButton document={document} />}
+                {canStar && !isMobile && <StarButton document={document} />}
               </Heading>
 
               {!queryIsInTitle && (
@@ -225,6 +247,7 @@ const Actions = styled(EventBoundary)`
 
 const DocumentLink = styled(Link)<{
   $isStarred?: boolean;
+  $isDragging?: boolean;
   $menuOpen?: boolean;
 }>`
   display: flex;
@@ -235,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/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 });
         }
       });
 
@@ -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

@@ -75,7 +75,7 @@ const HoverPreviewIssue = React.forwardRef(function HoverPreviewIssue_(
                 </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/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;
 `;
@@ -96,7 +104,9 @@ export const Outline = styled(Flex)<{
   margin?: string | number;
   hasError?: boolean;
   $focused?: boolean;
+  $round?: boolean;
 }>`
+  position: relative;
   flex: 1;
   margin: ${(props) =>
     props.margin !== undefined ? props.margin : "0 0 16px"};
@@ -109,7 +119,7 @@ export const Outline = styled(Flex)<{
       : 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;

app/components/List/Item.tsx

@@ -203,7 +203,7 @@ const Wrapper = styled.a<{
 `;
 
 const Image = styled(Flex)`
-  padding: 0 8px 0 0;
+  padding-inline-end: 8px;
   max-height: 32px;
   align-items: center;
   user-select: none;

app/components/List/Placeholder.tsx

@@ -1,4 +1,4 @@
-import times from "lodash/times";
+import { times } from "es-toolkit/compat";
 import styled from "styled-components";
 import Fade from "~/components/Fade";
 import Flex from "~/components/Flex";

app/components/Menu/ContextMenu.tsx

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

app/components/Menu/DropdownMenu.tsx

@@ -13,6 +13,7 @@ import { MenuProvider } from "~/components/primitives/Menu/MenuContext";
 import { actionToMenuItem } from "~/actions";
 import useActionContext from "~/hooks/useActionContext";
 import useMobile from "~/hooks/useMobile";
+import { preventDefault } from "~/utils/events";
 import type {
   ActionVariant,
   ActionWithChildren,
@@ -32,6 +33,12 @@ type Props = {
   align?: "start" | "end";
   /** ARIA label for the menu */
   ariaLabel: string;
+  /**
+   * Whether the menu should lock page scroll and trap focus while open.
+   * Defaults to true. Set to false to avoid the scrollbar-removal layout
+   * shift when the menu lives inside a scrollable container.
+   */
+  modal?: boolean;
   /** Additional component to display at the bottom of the top-level menu */
   append?: React.ReactNode;
   /** Callback when menu is opened */
@@ -49,6 +56,7 @@ export const DropdownMenu = observer(
         children,
         align = "start",
         ariaLabel,
+        modal = true,
         append,
         onOpen,
         onClose,
@@ -98,11 +106,6 @@ export const DropdownMenu = observer(
         }
       }, []);
 
-      const handleCloseAutoFocus = React.useCallback(
-        (e: Event) => e.preventDefault(),
-        []
-      );
-
       if (isMobile) {
         return (
           <MobileDropdown
@@ -120,7 +123,7 @@ export const DropdownMenu = observer(
 
       return (
         <MenuProvider variant="dropdown">
-          <Menu open={open} onOpenChange={handleOpenChange}>
+          <Menu open={open} onOpenChange={handleOpenChange} modal={modal}>
             <MenuTrigger ref={ref} aria-label={ariaLabel} {...rest}>
               {children}
             </MenuTrigger>
@@ -129,7 +132,7 @@ export const DropdownMenu = observer(
               aria-label={ariaLabel}
               onAnimationStart={disablePointerEvents}
               onAnimationEnd={enablePointerEvents}
-              onCloseAutoFocus={handleCloseAutoFocus}
+              onCloseAutoFocus={preventDefault}
             >
               {content}
               {append}

app/components/Menu/transformer.tsx

@@ -42,13 +42,14 @@ export function toMenuItems(items: MenuItem[]) {
       case "button":
         return (
           <MenuButton
-            key={`${item.type}-${item.title}-${index}`}
+            key={`${item.type}-${index}`}
             label={item.title as string}
             icon={icon}
             disabled={item.disabled}
             tooltip={item.tooltip}
             selected={item.selected}
             dangerous={item.dangerous}
+            shortcut={item.shortcut}
             onClick={item.onClick}
           />
         );
@@ -56,10 +57,11 @@ export function toMenuItems(items: MenuItem[]) {
       case "route":
         return (
           <MenuInternalLink
-            key={`${item.type}-${item.title}-${index}`}
+            key={`${item.type}-${index}`}
             label={item.title as string}
             icon={icon}
             disabled={item.disabled}
+            shortcut={item.shortcut}
             to={item.to}
           />
         );
@@ -67,10 +69,11 @@ export function toMenuItems(items: MenuItem[]) {
       case "link":
         return (
           <MenuExternalLink
-            key={`${item.type}-${item.title}-${index}`}
+            key={`${item.type}-${index}`}
             label={item.title as string}
             icon={icon}
             disabled={item.disabled}
+            shortcut={item.shortcut}
             href={typeof item.href === "string" ? item.href : item.href.url}
             target={
               typeof item.href === "string" ? undefined : item.href.target
@@ -92,7 +95,7 @@ export function toMenuItems(items: MenuItem[]) {
         };
 
         return (
-          <SubMenu key={`${item.type}-${item.title}-${index}`}>
+          <SubMenu key={`${item.type}-${index}`}>
             <SubMenuTrigger
               label={item.title as string}
               icon={icon}
@@ -118,7 +121,7 @@ export function toMenuItems(items: MenuItem[]) {
 
         return (
           <MenuGroup
-            key={`${item.type}-${item.title}-${index}`}
+            key={`${item.type}-${index}`}
             label={item.title as string}
             items={groupItems}
           />
@@ -168,7 +171,7 @@ export function toMobileMenuItems(
       case "button":
         return (
           <Components.MenuButton
-            key={`${item.type}-${item.title}-${index}`}
+            key={`${item.type}-${index}`}
             disabled={item.disabled}
             $dangerous={item.dangerous}
             onClick={(e) => {
@@ -189,7 +192,7 @@ export function toMobileMenuItems(
       case "route":
         return (
           <Components.MenuInternalLink
-            key={`${item.type}-${item.title}-${index}`}
+            key={`${item.type}-${index}`}
             to={item.to}
             disabled={item.disabled}
             onClick={closeMenu}
@@ -202,7 +205,7 @@ export function toMobileMenuItems(
       case "link":
         return (
           <Components.MenuExternalLink
-            key={`${item.type}-${item.title}-${index}`}
+            key={`${item.type}-${index}`}
             href={typeof item.href === "string" ? item.href : item.href.url}
             target={
               typeof item.href === "string" ? undefined : item.href.target
@@ -228,7 +231,7 @@ export function toMobileMenuItems(
 
         return (
           <Components.MenuButton
-            key={`${item.type}-${item.title}-${index}`}
+            key={`${item.type}-${index}`}
             disabled={item.disabled}
             onClick={() => {
               openSubmenu(item.title as string);
@@ -253,7 +256,7 @@ export function toMobileMenuItems(
         }
 
         return (
-          <div key={`${item.type}-${item.title}-${index}`}>
+          <div key={`${item.type}-${index}`}>
             <Components.MenuHeader>{item.title}</Components.MenuHeader>
             {groupItems}
           </div>

app/components/Modal.tsx

@@ -15,8 +15,8 @@ import usePrevious from "~/hooks/usePrevious";
 import { fadeAndScaleIn, fadeIn } from "~/styles/animations";
 import Desktop from "~/utils/Desktop";
 import ErrorBoundary from "./ErrorBoundary";
-import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
 import Tooltip from "./Tooltip";
+import { useDialogContext } from "~/components/DialogContext";
 
 type Props = {
   children?: React.ReactNode;
@@ -31,7 +31,7 @@ type Props = {
 const Modal: React.FC<Props> = ({
   children,
   isOpen,
-  title = "Untitled",
+  title,
   style,
   width,
   height,
@@ -40,42 +40,43 @@ const Modal: React.FC<Props> = ({
   const wasOpen = usePrevious(isOpen);
   const isMobile = useMobile();
   const { t } = useTranslation();
+  const resolvedTitle = title ?? t("Untitled");
+  const dialog = useDialogContext();
+
+  const onClose = React.useCallback(() => {
+    dialog.setAnimating(false); // Reset
+    onRequestClose();
+  }, [dialog, onRequestClose]);
 
   if (!isOpen && !wasOpen) {
     return null;
   }
 
   return (
-    <Dialog.Root
-      open={isOpen}
-      onOpenChange={(open) => !open && onRequestClose()}
-    >
+    <Dialog.Root open={isOpen} onOpenChange={(open) => !open && onClose()}>
       <Dialog.Portal>
         <StyledOverlay />
-        <Dialog.Title asChild>
-          <VisuallyHidden.Root>{title}</VisuallyHidden.Root>
-        </Dialog.Title>
         <StyledContent
-          onEscapeKeyDown={onRequestClose}
-          onPointerDownOutside={onRequestClose}
+          onEscapeKeyDown={onClose}
+          onPointerDownOutside={onClose}
           aria-describedby={undefined}
         >
           {isMobile ? (
             <Mobile>
               <MobileContent>
                 <Centered onClick={(ev) => ev.stopPropagation()} column>
-                  {title && (
+                  <Dialog.Title asChild>
                     <Text size="xlarge" weight="bold">
-                      {title}
+                      {resolvedTitle}
                     </Text>
-                  )}
+                  </Dialog.Title>
                   <ErrorBoundary>{children}</ErrorBoundary>
                 </Centered>
               </MobileContent>
-              <Close onClick={onRequestClose}>
+              <Close onClick={onClose}>
                 <CloseIcon size={32} />
               </Close>
-              <Back onClick={onRequestClose}>
+              <Back onClick={onClose}>
                 <BackIcon size={32} />
                 <Text>{t("Back")} </Text>
               </Back>
@@ -89,13 +90,20 @@ const Modal: React.FC<Props> = ({
                 column
                 reverse
               >
-                <DesktopContent style={style} topShadow>
+                <DesktopContent
+                  style={style}
+                  topShadow
+                  overflow={dialog.animating ? "hidden" : undefined}
+                  onAnimationEnd={() => dialog.setAnimating(false)}
+                >
                   <ErrorBoundary component="div">{children}</ErrorBoundary>
                 </DesktopContent>
                 <Header>
-                  {title && <Text size="large">{title}</Text>}
+                  <Dialog.Title asChild>
+                    <Text size="large">{resolvedTitle}</Text>
+                  </Dialog.Title>
                   <Tooltip content={t("Close")} shortcut="Esc">
-                    <NudeButton onClick={onRequestClose}>
+                    <NudeButton onClick={onClose}>
                       <CloseIcon />
                     </NudeButton>
                   </Tooltip>

app/components/Notifications/AccessRequestActions.tsx

@@ -0,0 +1,121 @@
+import { observer } from "mobx-react";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import styled from "styled-components";
+import { DocumentPermission } from "@shared/types";
+import type Notification from "~/models/Notification";
+import { client } from "~/utils/ApiClient";
+import Button from "../Button";
+import Flex from "../Flex";
+import { SplitButton } from "../primitives/SplitButton";
+
+type Props = {
+  notification: Notification;
+};
+
+function AccessRequestActions({ notification }: Props) {
+  const { t } = useTranslation();
+  const [processing, setProcessing] = React.useState(false);
+  const [selectedPermission, setSelectedPermission] =
+    React.useState<DocumentPermission>(DocumentPermission.Read);
+
+  const permissionOptions = React.useMemo(
+    () => [
+      {
+        label: t("View only"),
+        value: DocumentPermission.Read,
+        description: t("Can view the document"),
+      },
+      {
+        label: t("Can edit"),
+        value: DocumentPermission.ReadWrite,
+        description: t("Can view and edit the document"),
+      },
+      {
+        label: t("Manage"),
+        value: DocumentPermission.Admin,
+        description: t("Full access including sharing"),
+      },
+    ],
+    [t]
+  );
+
+  const selectedLabel = permissionOptions.find(
+    (o) => o.value === selectedPermission
+  )?.label;
+
+  const handleApprove = React.useCallback(async () => {
+    if (!notification.actor || processing) {
+      return;
+    }
+
+    setProcessing(true);
+    try {
+      await client.post("/accessRequests.approve", {
+        id: notification.accessRequestId,
+        permission: selectedPermission,
+      });
+      notification.accessRequestStatus = "approved";
+      toast.success(
+        t(`Permissions for {{ userName }} updated`, {
+          userName: notification.actor?.name,
+        })
+      );
+      void notification.markAsRead();
+    } catch {
+      toast.error(t("Failed to approve access request"));
+    } finally {
+      setProcessing(false);
+    }
+  }, [notification, processing, selectedPermission, t]);
+
+  const handleDismiss = React.useCallback(async () => {
+    if (processing) {
+      return;
+    }
+
+    setProcessing(true);
+    try {
+      await client.post("/accessRequests.dismiss", {
+        id: notification.accessRequestId,
+      });
+      notification.accessRequestStatus = "dismissed";
+      toast.success(t("Access request dismissed"));
+      void notification.markAsRead();
+    } catch {
+      toast.error(t("Failed to dismiss access request"));
+    } finally {
+      setProcessing(false);
+    }
+  }, [notification, processing, t]);
+
+  const handleContainerClick = React.useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+
+  return (
+    <Container gap={8} align="center" onClick={handleContainerClick}>
+      <Button onClick={handleDismiss} disabled={processing} neutral>
+        {t("Dismiss")}
+      </Button>
+      <SplitButton
+        options={permissionOptions}
+        selectedValue={selectedPermission}
+        onSelect={(value) => setSelectedPermission(value as DocumentPermission)}
+        onClick={handleApprove}
+        disabled={processing}
+      >
+        {t("Approve")} · {selectedLabel}
+      </SplitButton>
+    </Container>
+  );
+}
+
+const Container = styled(Flex)`
+  margin-top: 8px;
+  flex-wrap: wrap;
+`;
+
+export default observer(AccessRequestActions);