test

closes #4045

.babelrc

@@ -35,6 +35,14 @@
             "displayName": false
           }
         ]
+      ],
+      "ignore": [
+        "**/*.test.ts"
+      ]
+    },
+    "development": {
+      "ignore": [
+        "**/*.test.ts"
       ]
     }
   }

.circleci/config.yml

@@ -1,51 +1,102 @@
 version: 2.1
 
+defaults: &defaults
+  working_directory: ~/outline
+  docker:
+    - image: cimg/node:14.19
+    - image: cimg/redis:5.0
+    - image: cimg/postgres:14.2
+      environment:
+        POSTGRES_USER: postgres
+        POSTGRES_PASSWORD: password
+        POSTGRES_DB: circle_test
+  resource_class: large
+  environment:
+    NODE_ENV: test
+    SECRET_KEY: F0E5AD933D7F6FD8F4DBB3E038C501C052DC0593C686D21ACB30AE205D2F634B
+    DATABASE_URL_TEST: postgres://postgres:password@localhost:5432/circle_test
+    DATABASE_URL: postgres://postgres:password@localhost:5432/circle_test
+    URL: http://localhost:3000
+    SMTP_FROM_EMAIL: hello@example.com
+    AWS_S3_UPLOAD_BUCKET_URL: https://s3.amazonaws.com
+    AWS_S3_UPLOAD_BUCKET_NAME: outline-circle
+
 executors:
   docker-publisher:
     environment:
       IMAGE_NAME: outlinewiki/outline
+      BASE_IMAGE_NAME: outlinewiki/outline-base
     docker:
       - image: circleci/buildpack-deps:stretch
 
 jobs:
   build:
-    working_directory: ~/outline
-    docker:
-      - image: circleci/node:14
-      - image: circleci/redis:latest
-      - image: circleci/postgres:9.6.5-alpine-ram
-    environment:
-      NODE_ENV: test
-      SECRET_KEY: F0E5AD933D7F6FD8F4DBB3E038C501C052DC0593C686D21ACB30AE205D2F634B
-      DATABASE_URL_TEST: postgres://root@localhost:5432/circle_test
-      DATABASE_URL: postgres://root@localhost:5432/circle_test
-      URL: http://localhost:3000
-      SMTP_FROM_EMAIL: hello@example.com
-      AWS_S3_UPLOAD_BUCKET_URL: https://s3.amazonaws.com
-      AWS_S3_UPLOAD_BUCKET_NAME: outline-circle
+    <<: *defaults
     steps:
       - checkout
       - restore_cache:
           key: dependency-cache-{{ checksum "package.json" }}
       - run:
           name: install-deps
-          command: yarn install --pure-lockfile
+          command: yarn install --frozen-lockfile
       - save_cache:
           key: dependency-cache-{{ checksum "package.json" }}
           paths:
             - ./node_modules
+  lint:
+    <<: *defaults
+    steps:
+      - checkout
+      - restore_cache:
+          key: dependency-cache-{{ checksum "package.json" }}
+      - run:
+          name: lint
+          command: yarn lint
+  types:
+    <<: *defaults
+    steps:
+      - checkout
+      - restore_cache:
+          key: dependency-cache-{{ checksum "package.json" }}
+      - run:
+          name: typescript
+          command: yarn tsc
+  test-app:
+    <<: *defaults
+    steps:
+      - checkout
+      - restore_cache:
+          key: dependency-cache-{{ checksum "package.json" }}
+      - run:
+          name: test
+          command: yarn test:app
+  test-shared:
+    <<: *defaults
+    steps:
+      - checkout
+      - restore_cache:
+          key: dependency-cache-{{ checksum "package.json" }}
+      - run:
+          name: test
+          command: yarn test:shared
+  test-server:
+    <<: *defaults
+    steps:
+      - checkout
+      - restore_cache:
+          key: dependency-cache-{{ checksum "package.json" }}
       - run:
           name: migrate
           command: ./node_modules/.bin/sequelize db:migrate --url $DATABASE_URL_TEST
-      - run:
-          name: lint
-          command: yarn lint
-      - run:
-          name: typescript
-          command: yarn tsc
       - run:
           name: test
-          command: yarn test
+          command: yarn test:server --forceExit
+  bundle-size:
+    <<: *defaults
+    steps:
+      - checkout
+      - restore_cache:
+          key: dependency-cache-{{ checksum "package.json" }}
       - run:
           name: build-webpack
           command: yarn build:webpack
@@ -56,59 +107,63 @@ jobs:
       - setup_remote_docker:
           version: 20.10.6
       - run:
-          name: Build Docker image
-          command: docker build -t $IMAGE_NAME:latest .
-      - run:
-          name: Archive Docker image
-          command: docker save -o image.tar $IMAGE_NAME
-      - persist_to_workspace:
-          root: .
-          paths:
-            - ./image.tar
-  publish-latest:
-    executor: docker-publisher
-    steps:
-      - attach_workspace:
-          at: /tmp/workspace
-      - setup_remote_docker:
-          version: 20.10.6
-      - run:
-          name: Load archived Docker image
-          command: docker load -i /tmp/workspace/image.tar
-      - run:
-          name: Publish Docker Image to Docker Hub
+          name: Install Docker buildx
           command: |
-            echo "$DOCKERHUB_PASS" | docker login -u "$DOCKERHUB_USERNAME" --password-stdin
-            IMAGE_TAG=${CIRCLE_TAG/v/''}
-            docker tag $IMAGE_NAME:latest $IMAGE_NAME:$IMAGE_TAG
-            docker push $IMAGE_NAME:latest
-            docker push $IMAGE_NAME:$IMAGE_TAG
-  publish-tag:
-    executor: docker-publisher
-    steps:
-      - attach_workspace:
-          at: /tmp/workspace
-      - setup_remote_docker:
-          version: 20.10.6
+            mkdir -p ~/.docker/cli-plugins
+            url="https://github.com/docker/buildx/releases/download/v0.8.0/buildx-v0.8.0.linux-amd64"
+            curl -sSL -o ~/.docker/cli-plugins/docker-buildx $url
+            chmod a+x ~/.docker/cli-plugins/docker-buildx
       - run:
-          name: Load archived Docker image
-          command: docker load -i /tmp/workspace/image.tar
+          name: Enable Docker buildx
+          command: export DOCKER_CLI_EXPERIMENTAL=enabled
       - run:
-          name: Publish Docker Image to Docker Hub
+          name: Initialize Docker buildx
           command: |
-            echo "$DOCKERHUB_PASS" | docker login -u "$DOCKERHUB_USERNAME" --password-stdin
-            IMAGE_TAG=${CIRCLE_TAG/v/''}
-            docker tag $IMAGE_NAME:latest $IMAGE_NAME:$IMAGE_TAG
-            docker push $IMAGE_NAME:$IMAGE_TAG
+            docker buildx install
+            docker context create docker-multiarch
+            docker run --rm --privileged multiarch/qemu-user-static --reset -p yes
+            docker buildx create --name docker-multiarch --platform linux/amd64,linux/arm/v6,linux/arm/v7,linux/arm64/v8,linux/ppc64le,linux/s390x docker-multiarch
+            docker buildx inspect --builder docker-multiarch --bootstrap
+            docker buildx use docker-multiarch
+      - run:
+          name: Build base image
+          command: docker build -f Dockerfile.base -t $BASE_IMAGE_NAME:latest --load .
+      - run:
+          name: Login to Docker Hub
+          command: echo "$DOCKERHUB_PASS" | docker login -u "$DOCKERHUB_USERNAME" --password-stdin
+      - run:
+          name: Publish base Docker Image to Docker Hub
+          command: docker push $BASE_IMAGE_NAME:latest
+      - run:
+          name: Build and push Docker image
+          command: docker buildx build -t $IMAGE_NAME:latest -t $IMAGE_NAME:${CIRCLE_TAG/v/''} --platform linux/amd64,linux/arm/v6,linux/arm/v7,linux/arm64/v8,linux/ppc64le,linux/s390x --push .
 
 workflows:
   version: 2
-  build-and-test:
+  all:
     jobs:
-      - build:
-          filters:
-            tags:
-              ignore: /^v.*/
+      - build
+      - lint:
+          requires:
+            - build
+      - test-server:
+          requires:
+            - build
+      - test-shared:
+          requires:
+            - build
+      - test-app:
+          requires:
+            - build
+      - types:
+          requires:
+            - build
+      - bundle-size:
+          requires:
+            - test-app
+            - test-shared
+            - test-server
+
   build-docker:
     jobs:
       - build-image:
@@ -117,19 +172,3 @@ workflows:
               only: /^v.*/
             branches:
               ignore: /.*/
-      - publish-latest:
-          requires:
-            - build-image
-          filters:
-            tags:
-              only: /^v\d+\.\d+\.\d+$/
-            branches:
-              ignore: /.*/
-      - publish-tag:
-          requires:
-            - build-image
-          filters:
-            tags:
-              only: /^v\d+\.\d+\.\d+-.*$/
-            branches:
-              ignore: /.*/

.env.sample

@@ -1,5 +1,7 @@
 # –––––––––––––––– REQUIRED ––––––––––––––––
 
+NODE_ENV=production
+
 # Generate a hex-encoded 32-byte random key. You should use `openssl rand -hex 32`
 # in your terminal to generate a random value.
 SECRET_KEY=generate_a_new_key
@@ -16,7 +18,15 @@ DATABASE_CONNECTION_POOL_MIN=
 DATABASE_CONNECTION_POOL_MAX=
 # Uncomment this to disable SSL for connecting to Postgres
 # PGSSLMODE=disable
+
+# For redis you can either specify an ioredis compatible url like this
 REDIS_URL=redis://localhost:6379
+# or alternatively, if you would like to provide addtional connection options,
+# use a base64 encoded JSON connection option object. Refer to the ioredis documentation
+# for a list of available options.
+# Example: Use Redis Sentinel for high availability
+# {"sentinels":[{"host":"sentinel-0","port":26379},{"host":"sentinel-1","port":26379}],"name":"mymaster"}
+# REDIS_URL=ioredis://eyJzZW50aW5lbHMiOlt7Imhvc3QiOiJzZW50aW5lbC0wIiwicG9ydCI6MjYzNzl9LHsiaG9zdCI6InNlbnRpbmVsLTEiLCJwb3J0IjoyNjM3OX1dLCJuYW1lIjoibXltYXN0ZXIifQ==
 
 # URL should point to the fully qualified, publicly accessible URL. If using a
 # proxy the port in URL and PORT may be different.
@@ -57,8 +67,8 @@ AWS_S3_ACL=private
 #
 # When configuring the Client ID, add a redirect URL under "OAuth & Permissions":
 # https://<URL>/auth/slack.callback
-SLACK_KEY=get_a_key_from_slack
-SLACK_SECRET=get_the_secret_of_above_key
+SLACK_CLIENT_ID=get_a_key_from_slack
+SLACK_CLIENT_SECRET=get_the_secret_of_above_key
 
 # To configure Google auth, you'll need to create an OAuth Client ID at
 # => https://console.cloud.google.com/apis/credentials
@@ -129,10 +139,6 @@ MAXIMUM_IMPORT_SIZE=5120000
 # requests and this ends up being duplicative
 DEBUG=http
 
-# Comma separated list of domains to be allowed to signin to the wiki. If not
-# set, all domains are allowed by default when using Google OAuth to signin
-ALLOWED_DOMAINS=
-
 # For a complete Slack integration with search and posting to channels the
 # following configs are also needed, some more details
 # => https://wiki.generaloutline.com/share/be25efd1-b3ef-4450-b8e5-c4a4fc11e02a
@@ -164,3 +170,10 @@ SMTP_SECURE=true
 # The default interface language. See translate.getoutline.com for a list of
 # available language codes and their rough percentage translated.
 DEFAULT_LANGUAGE=en_US
+
+# Optionally enable rate limiter at application web server
+RATE_LIMITER_ENABLED=true
+
+# Configure default throttling parameters for rate limiter
+RATE_LIMITER_REQUESTS=1000
+RATE_LIMITER_DURATION_WINDOW=60

.eslintrc

@@ -12,22 +12,23 @@
     "plugin:@typescript-eslint/recommended",
     "plugin:import/recommended",
     "plugin:import/typescript",
-    "plugin:react-hooks/recommended",
     "plugin:prettier/recommended"
   ],
   "plugins": [
+    "es",
     "@typescript-eslint",
     "eslint-plugin-import",
     "eslint-plugin-node",
     "eslint-plugin-react",
-    "eslint-plugin-react-hooks",
     "import"
   ],
   "rules": {
     "eqeqeq": 2,
     "curly": 2,
+    "object-shorthand": "error",
     "no-mixed-operators": "off",
     "no-useless-escape": "off",
+    "es/no-regexp-lookbehind-assertions": "error",
     "@typescript-eslint/no-unused-vars": [
       "error",
       {

.github/dependabot.yml

@@ -0,0 +1,11 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+
+version: 2
+updates:
+  - package-ecosystem: "npm" # See documentation for possible values
+    directory: "/" # Location of package manifests
+    schedule:
+      interval: "weekly"

.github/stale.yml

@@ -1,22 +0,0 @@
-# Number of days of inactivity before an issue becomes stale
-daysUntilStale: 120
-
-# Number of days of inactivity before a stale issue is closed
-daysUntilClose: 14
-
-# Issues with these labels will never be considered stale
-exemptLabels:
-  - security
-  - pinned
-
-# Label to use when marking an issue as stale
-staleLabel: stale
-
-# Comment to post when marking an issue as stale. Set to `false` to disable
-markComment: >
-  Hey! The issue has been automatically marked as stale because it has not had
-  recent activity. It will be closed soon if no further activity occurs. Please
-  reply here if you wish for the issue to be kept open.
-
-# Comment to post when closing a stale issue. Set to `false` to disable
-closeComment: false

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

@@ -0,0 +1,56 @@
+# Image Actions will run in the following scenarios:
+# - on Pull Requests containing images (not including forks)
+# - on pushing of images to `main` (for forks)
+# - on demand (https://github.blog/changelog/2020-07-06-github-actions-manual-triggers-with-workflow_dispatch/)
+# - at 11 PM every Sunday in anything gets missed with any of the above scenarios
+# For Pull Requests, the images are added to the PR.
+# For other scenarios, a new PR will be opened if any images are compressed.
+name: Compress images
+on:
+  pull_request:
+    paths:
+      - "**.jpg"
+      - "**.jpeg"
+      - "**.png"
+      - "**.webp"
+  push:
+    branches:
+      - main
+    paths:
+      - "**.jpg"
+      - "**.jpeg"
+      - "**.png"
+      - "**.webp"
+  workflow_dispatch:
+  schedule:
+    - cron: "00 20 * * 0"
+jobs:
+  build:
+    name: calibreapp/image-actions
+    runs-on: ubuntu-latest
+    # Only run on main repo on and PRs that match the main repo.
+    if: |
+      github.repository == 'outline/outline' &&
+      (github.event_name != 'pull_request' ||
+       github.event.pull_request.head.repo.full_name == github.repository)
+    steps:
+      - name: Checkout Branch
+        uses: actions/checkout@v2
+      - name: Compress Images
+        id: calibre
+        uses: calibreapp/image-actions@main
+        with:
+          githubToken: ${{ secrets.GITHUB_TOKEN }}
+          # For non-Pull Requests, run in compressOnly mode and we'll PR after.
+          compressOnly: ${{ github.event_name != 'pull_request' }}
+      - name: Create Pull Request
+        # If it's not a Pull Request then commit any changes as a new PR.
+        if: |
+          github.event_name != 'pull_request' &&
+          steps.calibre.outputs.markdown != ''
+        uses: peter-evans/create-pull-request@v3
+        with:
+          title: "chore: Auto Compress Images"
+          branch-suffix: timestamp
+          commit-message: "chore: Compressed inefficient images automatically"
+          body: ${{ steps.calibre.outputs.markdown }}

.github/workflows/codeql-analysis.yml

@@ -42,7 +42,7 @@ jobs:
 
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL
-      uses: github/codeql-action/init@v1
+      uses: github/codeql-action/init@v2
       with:
         languages: ${{ matrix.language }}
         # If you wish to specify custom queries, you can do so here or in a config file.
@@ -53,7 +53,7 @@ jobs:
     # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
     # If this step fails, then you should remove it and run the build manually (see below)
     - name: Autobuild
-      uses: github/codeql-action/autobuild@v1
+      uses: github/codeql-action/autobuild@v2
 
     # ℹ️ Command-line programs to run using the OS shell.
     # 📚 https://git.io/JvXDl
@@ -67,4 +67,4 @@ jobs:
     #   make release
 
     - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v1
+      uses: github/codeql-action/analyze@v2

.github/workflows/stale.yml

@@ -0,0 +1,29 @@
+name: "Close Stale PRs"
+on:
+  workflow_dispatch:
+  schedule:
+    - cron: "30 1 * * *"
+
+permissions:
+  issues: write
+  pull-requests: write
+
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/stale@v5
+        with:
+          stale-pr-message: "This PR is stale because it has been open 90 days with no activity. Remove stale label or comment or this will be closed in 5 days"
+          stale-issue-message: "This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this will be closed in 5 days"
+          close-pr-message: "Automatically closed due to inactivity"
+          close-issue-message: "Automatically closed due to inactivity"
+          days-before-issue-stale: 120
+          days-before-pr-stale: 60
+          days-before-close: 5
+          operations-per-run: 60
+          stale-issue-label: stale
+          stale-pr-label: stale
+          exempt-issue-labels: "security,pinned"
+      - name: Print outputs
+        run: echo ${{ join(steps.stale.outputs.*, ',') }}

.gitignore

@@ -3,6 +3,7 @@ build
 node_modules/*
 .env
 .log
+.vscode/*
 npm-debug.log
 stats.json
 .DS_Store

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

.jestconfig.json

@@ -0,0 +1,88 @@
+{
+  "projects": [
+    {
+      "displayName": "server",
+      "verbose": false,
+      "roots": [
+        "<rootDir>/server"
+      ],
+      "moduleNameMapper": {
+        "^@server/(.*)$": "<rootDir>/server/$1",
+        "^@shared/(.*)$": "<rootDir>/shared/$1"
+      },
+      "setupFiles": [
+        "<rootDir>/__mocks__/console.js",
+        "<rootDir>/server/test/env.ts"
+      ],
+      "setupFilesAfterEnv": [
+        "<rootDir>/server/test/setup.ts"
+      ],
+      "testEnvironment": "node",
+      "runner": "@getoutline/jest-runner-serial"
+    },
+    {
+      "displayName": "app",
+      "verbose": false,
+      "roots": [
+        "<rootDir>/app"
+      ],
+      "moduleNameMapper": {
+        "^~/(.*)$": "<rootDir>/app/$1",
+        "^@shared/(.*)$": "<rootDir>/shared/$1",
+        "^.*[.](gif|ttf|eot|svg)$": "<rootDir>/__test__/fileMock.js",
+        "^uuid$": "<rootDir>/node_modules/uuid/dist/index.js"
+      },
+      "modulePaths": [
+        "<rootDir>/app"
+      ],
+      "setupFiles": [
+        "<rootDir>/__mocks__/window.js"
+      ],
+      "setupFilesAfterEnv": [
+        "<rootDir>/app/test/setup.ts"
+      ],
+      "testEnvironment": "jsdom",
+      "testEnvironmentOptions": {
+        "url": "http://localhost"
+      }
+    },
+    {
+      "displayName": "shared-node",
+      "verbose": false,
+      "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",
+      "verbose": false,
+      "roots": [
+        "<rootDir>/shared"
+      ],
+      "moduleNameMapper": {
+        "^~/(.*)$": "<rootDir>/app/$1",
+        "^@shared/(.*)$": "<rootDir>/shared/$1",
+        "^.*[.](gif|ttf|eot|svg)$": "<rootDir>/__test__/fileMock.js",
+        "^uuid$": "<rootDir>/node_modules/uuid/dist/index.js"
+      },
+      "setupFiles": [
+        "<rootDir>/__mocks__/window.js"
+      ],
+      "testEnvironment": "jsdom",
+      "testEnvironmentOptions": {
+        "url": "http://localhost"
+      }
+    }
+  ]
+}

Dockerfile

@@ -1,45 +1,22 @@
-# syntax=docker/dockerfile:1.2
 ARG APP_PATH=/opt/outline
-FROM node:16-alpine AS deps-common
-
-ARG APP_PATH
-WORKDIR $APP_PATH
-COPY ./package.json ./yarn.lock ./
-
-# ---
-FROM deps-common AS deps-dev
-RUN yarn install --no-optional --frozen-lockfile && \
-  yarn cache clean
-
-# ---
-FROM deps-common AS deps-prod
-RUN yarn install --production=true --frozen-lockfile && \
-  yarn cache clean
-
-# ---
-FROM node:16-alpine AS builder
+FROM outlinewiki/outline-base as base
 
 ARG APP_PATH
 WORKDIR $APP_PATH
 
-COPY . .
-COPY --from=deps-dev $APP_PATH/node_modules ./node_modules
-ARG CDN_URL
-RUN yarn build
-
 # ---
-FROM node:16-alpine AS runner
+FROM node:16.14.2-alpine3.15 AS runner
 
 ARG APP_PATH
 WORKDIR $APP_PATH
 ENV NODE_ENV production
 
-COPY --from=builder $APP_PATH/build ./build
-COPY --from=builder $APP_PATH/server ./server
-COPY --from=builder $APP_PATH/public ./public
-COPY --from=builder $APP_PATH/.sequelizerc ./.sequelizerc
-COPY --from=deps-prod $APP_PATH/node_modules ./node_modules
-COPY --from=builder $APP_PATH/package.json ./package.json
+COPY --from=base $APP_PATH/build ./build
+COPY --from=base $APP_PATH/server ./server
+COPY --from=base $APP_PATH/public ./public
+COPY --from=base $APP_PATH/.sequelizerc ./.sequelizerc
+COPY --from=base $APP_PATH/node_modules ./node_modules
+COPY --from=base $APP_PATH/package.json ./package.json
 
 RUN addgroup -g 1001 -S nodejs && \
   adduser -S nodejs -u 1001 && \

Dockerfile.base

@@ -0,0 +1,18 @@
+ARG APP_PATH=/opt/outline
+FROM node:16.14.2-alpine3.15 AS deps
+
+ARG APP_PATH
+WORKDIR $APP_PATH
+COPY ./package.json ./yarn.lock ./
+
+RUN yarn install --no-optional --frozen-lockfile --network-timeout 1000000 && \
+  yarn cache clean
+
+COPY . .
+ARG CDN_URL
+RUN yarn build
+
+RUN rm -rf node_modules
+
+RUN yarn install --production=true --frozen-lockfile --network-timeout 1000000 && \
+  yarn cache clean

LICENSE

@@ -3,7 +3,7 @@ Business Source License 1.1
 Parameters
 
 Licensor:             General Outline, Inc.
-Licensed Work:        Outline 0.62.0
+Licensed Work:        Outline 0.64.0
                       The Licensed Work is (c) 2020 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:          2026-03-01
+Change Date:          2026-05-23
 
 Change License:       Apache License, Version 2.0
 

__mocks__/bull.js

@@ -1,17 +0,0 @@
-export default class Queue {
-  name;
-
-  constructor(name) {
-    this.name = name;
-  }
-
-  process = (fn) => {
-    console.log(`Registered function ${this.name}`);
-    this.processFn = fn;
-  };
-
-  add = (data) => {
-    console.log(`Running ${this.name}`);
-    return this.processFn({ data });
-  };
-}

__mocks__/console.js

@@ -1,2 +1 @@
-// Mock for node-uuid
 global.console.warn = () => {};

app.json

@@ -43,10 +43,6 @@
       "value": "true",
       "required": true
     },
-    "ALLOWED_DOMAINS": {
-      "description": "Comma separated list of domains to be allowed (optional). If not set, all domains are allowed by default when using Google OAuth to signin. Consider putting {your app name}.herokuapp.com and any domain you are binding on in this list.",
-      "required": false
-    },
     "URL": {
       "description": "https://{your app name}.herokuapp.com, or the domain you are binding to",
       "required": true
@@ -106,11 +102,11 @@
       "value": "openid profile email",
       "required": false
     },
-    "SLACK_KEY": {
+    "SLACK_CLIENT_ID": {
       "description": "See https://api.slack.com/apps to create a new Slack app. You must configure at least one of Slack or Google to control login.",
       "required": false
     },
-    "SLACK_SECRET": {
+    "SLACK_CLIENT_SECRET": {
       "description": "Your Slack client secret - d2dc414f9953226bad0a356cXXXXYYYY",
       "required": false
     },
@@ -209,4 +205,4 @@
       "required": false
     }
   }
-}
+}

app/.eslintrc

@@ -1,6 +1,10 @@
 {
   "extends": [
-    "../.eslintrc"
+    "../.eslintrc",
+    "plugin:react-hooks/recommended",
+  ],
+  "plugins": [
+    "eslint-plugin-react-hooks",
   ],
   "env": {
     "jest": true,

app/.jestconfig.json

@@ -1,27 +0,0 @@
-{
-  "testURL": "http://localhost",
-  "verbose": false,
-  "rootDir": "..",
-  "roots": [
-    "<rootDir>/app",
-    "<rootDir>/shared"
-  ],
-  "moduleNameMapper": {
-    "^~/(.*)$": "<rootDir>/app/$1",
-    "^@shared/(.*)$": "<rootDir>/shared/$1",
-    "^.*[.](gif|ttf|eot|svg)$": "<rootDir>/__test__/fileMock.js"
-  },
-  "moduleDirectories": [
-    "node_modules"
-  ],
-  "modulePaths": [
-    "<rootDir>/app"
-  ],
-  "setupFiles": [
-    "<rootDir>/__mocks__/window.js"
-  ],
-  "setupFilesAfterEnv": [
-    "./app/test/setup.ts"
-  ],
-  "testEnvironment": "jsdom"
-}

app/actions/definitions/debug.tsx

@@ -1,32 +0,0 @@
-import { ToolsIcon, TrashIcon } from "outline-icons";
-import * as React from "react";
-import stores from "~/stores";
-import { createAction } from "~/actions";
-import { DebugSection } from "~/actions/sections";
-import env from "~/env";
-import { deleteAllDatabases } from "~/utils/developer";
-
-export const clearIndexedDB = createAction({
-  name: ({ t }) => t("Delete IndexedDB cache"),
-  icon: <TrashIcon />,
-  keywords: "cache clear database",
-  section: DebugSection,
-  perform: async ({ t }) => {
-    await deleteAllDatabases();
-    stores.toasts.showToast(t("IndexedDB cache deleted"));
-  },
-});
-
-export const development = createAction({
-  name: ({ t }) => t("Development"),
-  keywords: "debug",
-  icon: <ToolsIcon />,
-  iconInContextMenu: false,
-  section: DebugSection,
-  visible: ({ event }) =>
-    env.ENVIRONMENT === "development" ||
-    (event instanceof KeyboardEvent && event.altKey),
-  children: [clearIndexedDB],
-});
-
-export const rootDebugActions = [development];

app/actions/definitions/developer.tsx

@@ -0,0 +1,50 @@
+import { ToolsIcon, TrashIcon, UserIcon } from "outline-icons";
+import * as React from "react";
+import stores from "~/stores";
+import { createAction } from "~/actions";
+import { DeveloperSection } from "~/actions/sections";
+import env from "~/env";
+import { client } from "~/utils/ApiClient";
+import { deleteAllDatabases } from "~/utils/developer";
+
+export const clearIndexedDB = createAction({
+  name: ({ t }) => t("Delete IndexedDB cache"),
+  icon: <TrashIcon />,
+  keywords: "cache clear database",
+  section: DeveloperSection,
+  perform: async ({ t }) => {
+    await deleteAllDatabases();
+    stores.toasts.showToast(t("IndexedDB cache deleted"));
+  },
+});
+
+export const createTestUsers = createAction({
+  name: "Create test users",
+  icon: <UserIcon />,
+  section: DeveloperSection,
+  visible: () => env.ENVIRONMENT === "development",
+  perform: async () => {
+    const count = 10;
+
+    try {
+      await client.post("/developer.create_test_users", { count });
+      stores.toasts.showToast(`${count} test users created`);
+    } catch (err) {
+      stores.toasts.showToast(err.message, { type: "error" });
+    }
+  },
+});
+
+export const developer = createAction({
+  name: ({ t }) => t("Developer"),
+  keywords: "debug",
+  icon: <ToolsIcon />,
+  iconInContextMenu: false,
+  section: DeveloperSection,
+  visible: ({ event }) =>
+    env.ENVIRONMENT === "development" ||
+    (event instanceof KeyboardEvent && event.altKey),
+  children: [clearIndexedDB, createTestUsers],
+});
+
+export const rootDeveloperActions = [developer];

app/actions/definitions/documents.tsx

@@ -11,10 +11,19 @@ import {
   ImportIcon,
   PinIcon,
   SearchIcon,
+  UnsubscribeIcon,
+  SubscribeIcon,
+  MoveIcon,
+  TrashIcon,
+  CrossIcon,
+  ArchiveIcon,
 } from "outline-icons";
 import * as React from "react";
-import getDataTransferFiles from "@shared/utils/getDataTransferFiles";
-import DocumentTemplatize from "~/scenes/DocumentTemplatize";
+import { getEventFiles } from "@shared/utils/files";
+import DocumentDelete from "~/scenes/DocumentDelete";
+import DocumentMove from "~/scenes/DocumentMove";
+import DocumentPermanentDelete from "~/scenes/DocumentPermanentDelete";
+import DocumentTemplatizeDialog from "~/components/DocumentTemplatizeDialog";
 import { createAction } from "~/actions";
 import { DocumentSection } from "~/actions/sections";
 import history from "~/utils/history";
@@ -108,12 +117,74 @@ export const unstarDocument = createAction({
   },
 });
 
-export const downloadDocument = createAction({
-  name: ({ t, isContextMenu }) =>
-    isContextMenu ? t("Download") : t("Download document"),
+export const subscribeDocument = createAction({
+  name: ({ t }) => t("Subscribe"),
   section: DocumentSection,
+  icon: <SubscribeIcon />,
+  visible: ({ activeDocumentId, stores }) => {
+    if (!activeDocumentId) {
+      return false;
+    }
+
+    const document = stores.documents.get(activeDocumentId);
+
+    return (
+      !document?.isSubscribed &&
+      stores.policies.abilities(activeDocumentId).subscribe
+    );
+  },
+  perform: ({ activeDocumentId, stores, t }) => {
+    if (!activeDocumentId) {
+      return;
+    }
+
+    const document = stores.documents.get(activeDocumentId);
+
+    document?.subscribe();
+
+    stores.toasts.showToast(t("Subscribed to document notifications"), {
+      type: "success",
+    });
+  },
+});
+
+export const unsubscribeDocument = createAction({
+  name: ({ t }) => t("Unsubscribe"),
+  section: DocumentSection,
+  icon: <UnsubscribeIcon />,
+  visible: ({ activeDocumentId, stores }) => {
+    if (!activeDocumentId) {
+      return false;
+    }
+
+    const document = stores.documents.get(activeDocumentId);
+
+    return (
+      !!document?.isSubscribed &&
+      stores.policies.abilities(activeDocumentId).unsubscribe
+    );
+  },
+  perform: ({ activeDocumentId, stores, currentUserId, t }) => {
+    if (!activeDocumentId || !currentUserId) {
+      return;
+    }
+
+    const document = stores.documents.get(activeDocumentId);
+
+    document?.unsubscribe(currentUserId);
+
+    stores.toasts.showToast(t("Unsubscribed from document notifications"), {
+      type: "success",
+    });
+  },
+});
+
+export const downloadDocumentAsHTML = createAction({
+  name: ({ t }) => t("HTML"),
+  section: DocumentSection,
+  keywords: "html export",
   icon: <DownloadIcon />,
-  keywords: "export",
+  iconInContextMenu: false,
   visible: ({ activeDocumentId, stores }) =>
     !!activeDocumentId && stores.policies.abilities(activeDocumentId).download,
   perform: ({ activeDocumentId, stores }) => {
@@ -122,10 +193,37 @@ export const downloadDocument = createAction({
     }
 
     const document = stores.documents.get(activeDocumentId);
-    document?.download();
+    document?.download("text/html");
   },
 });
 
+export const downloadDocumentAsMarkdown = createAction({
+  name: ({ t }) => t("Markdown"),
+  section: DocumentSection,
+  keywords: "md markdown export",
+  icon: <DownloadIcon />,
+  iconInContextMenu: false,
+  visible: ({ activeDocumentId, stores }) =>
+    !!activeDocumentId && stores.policies.abilities(activeDocumentId).download,
+  perform: ({ activeDocumentId, stores }) => {
+    if (!activeDocumentId) {
+      return;
+    }
+
+    const document = stores.documents.get(activeDocumentId);
+    document?.download("text/markdown");
+  },
+});
+
+export const downloadDocument = createAction({
+  name: ({ t, isContextMenu }) =>
+    isContextMenu ? t("Download") : t("Download document"),
+  section: DocumentSection,
+  icon: <DownloadIcon />,
+  keywords: "export",
+  children: [downloadDocumentAsHTML, downloadDocumentAsMarkdown],
+});
+
 export const duplicateDocument = createAction({
   name: ({ t, isContextMenu }) =>
     isContextMenu ? t("Duplicate") : t("Duplicate document"),
@@ -260,8 +358,8 @@ export const importDocument = createAction({
     input.type = "file";
     input.accept = documents.importFileTypes.join(", ");
 
-    input.onchange = async (ev: Event) => {
-      const files = getDataTransferFiles(ev);
+    input.onchange = async (ev) => {
+      const files = getEventFiles(ev);
 
       try {
         const file = files[0];
@@ -296,28 +394,24 @@ export const createTemplate = createAction({
       return false;
     }
     const document = stores.documents.get(activeDocumentId);
-    return (
+    return !!(
       !!activeCollectionId &&
       stores.policies.abilities(activeCollectionId).update &&
-      !document?.isTemplate
+      !document?.isTemplate &&
+      !document?.isDeleted
     );
   },
   perform: ({ activeDocumentId, stores, t, event }) => {
     if (!activeDocumentId) {
       return;
     }
-
     event?.preventDefault();
     event?.stopPropagation();
 
     stores.dialogs.openModal({
       title: t("Create template"),
-      content: (
-        <DocumentTemplatize
-          documentId={activeDocumentId}
-          onSubmit={stores.dialogs.closeAllModals}
-        />
-      ),
+      isCentered: true,
+      content: <DocumentTemplatizeDialog documentId={activeDocumentId} />,
     });
   },
 });
@@ -333,15 +427,146 @@ export const searchDocumentsForQuery = (searchQuery: string) =>
     visible: ({ location }) => location.pathname !== searchPath(),
   });
 
+export const moveDocument = createAction({
+  name: ({ t }) => t("Move"),
+  section: DocumentSection,
+  icon: <MoveIcon />,
+  visible: ({ activeDocumentId, stores }) => {
+    if (!activeDocumentId) {
+      return false;
+    }
+    return !!stores.policies.abilities(activeDocumentId).move;
+  },
+  perform: ({ activeDocumentId, stores, t }) => {
+    if (activeDocumentId) {
+      const document = stores.documents.get(activeDocumentId);
+      if (!document) {
+        return;
+      }
+
+      stores.dialogs.openModal({
+        title: t("Move {{ documentName }}", {
+          documentName: document.noun,
+        }),
+        content: (
+          <DocumentMove
+            document={document}
+            onRequestClose={stores.dialogs.closeAllModals}
+          />
+        ),
+      });
+    }
+  },
+});
+
+export const archiveDocument = createAction({
+  name: ({ t }) => t("Archive"),
+  section: DocumentSection,
+  icon: <ArchiveIcon />,
+  visible: ({ activeDocumentId, stores }) => {
+    if (!activeDocumentId) {
+      return false;
+    }
+    return !!stores.policies.abilities(activeDocumentId).archive;
+  },
+  perform: async ({ activeDocumentId, stores, t }) => {
+    if (activeDocumentId) {
+      const document = stores.documents.get(activeDocumentId);
+      if (!document) {
+        return;
+      }
+
+      await document.archive();
+      stores.toasts.showToast(t("Document archived"), {
+        type: "success",
+      });
+    }
+  },
+});
+
+export const deleteDocument = createAction({
+  name: ({ t }) => t("Delete"),
+  section: DocumentSection,
+  icon: <TrashIcon />,
+  dangerous: true,
+  visible: ({ activeDocumentId, stores }) => {
+    if (!activeDocumentId) {
+      return false;
+    }
+    return !!stores.policies.abilities(activeDocumentId).delete;
+  },
+  perform: ({ activeDocumentId, stores, t }) => {
+    if (activeDocumentId) {
+      const document = stores.documents.get(activeDocumentId);
+      if (!document) {
+        return;
+      }
+
+      stores.dialogs.openModal({
+        title: t("Delete {{ documentName }}", {
+          documentName: document.noun,
+        }),
+        isCentered: true,
+        content: (
+          <DocumentDelete
+            document={document}
+            onSubmit={stores.dialogs.closeAllModals}
+          />
+        ),
+      });
+    }
+  },
+});
+
+export const permanentlyDeleteDocument = createAction({
+  name: ({ t }) => t("Permanently delete"),
+  section: DocumentSection,
+  icon: <CrossIcon />,
+  dangerous: true,
+  visible: ({ activeDocumentId, stores }) => {
+    if (!activeDocumentId) {
+      return false;
+    }
+    return !!stores.policies.abilities(activeDocumentId).permanentDelete;
+  },
+  perform: ({ activeDocumentId, stores, t }) => {
+    if (activeDocumentId) {
+      const document = stores.documents.get(activeDocumentId);
+      if (!document) {
+        return;
+      }
+
+      stores.dialogs.openModal({
+        title: t("Permanently delete {{ documentName }}", {
+          documentName: document.noun,
+        }),
+        isCentered: true,
+        content: (
+          <DocumentPermanentDelete
+            document={document}
+            onSubmit={stores.dialogs.closeAllModals}
+          />
+        ),
+      });
+    }
+  },
+});
+
 export const rootDocumentActions = [
   openDocument,
+  archiveDocument,
   createDocument,
   createTemplate,
+  deleteDocument,
   importDocument,
   downloadDocument,
   starDocument,
   unstarDocument,
+  subscribeDocument,
+  unsubscribeDocument,
   duplicateDocument,
+  moveDocument,
+  permanentlyDeleteDocument,
   printDocument,
   pinDocumentToCollection,
   pinDocumentToHome,

app/actions/definitions/navigation.tsx

@@ -91,6 +91,8 @@ export const navigateToSettings = createAction({
   section: NavigationSection,
   shortcut: ["g", "s"],
   icon: <SettingsIcon />,
+  visible: ({ stores }) =>
+    stores.policies.abilities(stores.auth.team?.id || "").update,
   perform: () => history.push(organizationSettingsPath()),
 });
 

app/actions/definitions/teams.tsx

@@ -0,0 +1,40 @@
+import * as React from "react";
+import styled from "styled-components";
+import { createAction } from "~/actions";
+import { loadSessionsFromCookie } from "~/hooks/useSessions";
+
+export const changeTeam = createAction({
+  name: ({ t }) => t("Switch team"),
+  placeholder: ({ t }) => t("Select a team"),
+  keywords: "change workspace organization",
+  section: "Account",
+  visible: ({ currentTeamId }) => {
+    const sessions = loadSessionsFromCookie();
+    const otherSessions = sessions.filter(
+      (session) => session.teamId !== currentTeamId
+    );
+    return otherSessions.length > 0;
+  },
+  children: ({ currentTeamId }) => {
+    const sessions = loadSessionsFromCookie();
+    const otherSessions = sessions.filter(
+      (session) => session.teamId !== currentTeamId
+    );
+
+    return otherSessions.map((session) => ({
+      id: session.url,
+      name: session.name,
+      section: "Account",
+      icon: <Logo alt={session.name} src={session.logoUrl} />,
+      perform: () => (window.location.href = session.url),
+    }));
+  },
+});
+
+const Logo = styled("img")`
+  border-radius: 2px;
+  width: 24px;
+  height: 24px;
+`;
+
+export const rootTeamActions = [changeTeam];

app/actions/index.ts

@@ -10,6 +10,10 @@ import {
   MenuItemWithChildren,
 } from "~/types";
 
+function resolve<T>(value: any, context: ActionContext): T {
+  return typeof value === "function" ? value(context) : value;
+}
+
 export function createAction(definition: Optional<Action, "id">): Action {
   return {
     ...definition,
@@ -21,18 +25,10 @@ export function actionToMenuItem(
   action: Action,
   context: ActionContext
 ): MenuItemButton | MenuItemWithChildren {
-  function resolve<T>(value: any): T {
-    if (typeof value === "function") {
-      return value(context);
-    }
-
-    return value;
-  }
-
-  const resolvedIcon = resolve<React.ReactElement<any>>(action.icon);
-  const resolvedChildren = resolve<Action[]>(action.children);
+  const resolvedIcon = resolve<React.ReactElement<any>>(action.icon, context);
+  const resolvedChildren = resolve<Action[]>(action.children, context);
   const visible = action.visible ? action.visible(context) : true;
-  const title = resolve<string>(action.name);
+  const title = resolve<string>(action.name, context);
   const icon =
     resolvedIcon && action.iconInContextMenu !== false
       ? React.cloneElement(resolvedIcon, {
@@ -60,6 +56,7 @@ export function actionToMenuItem(
     title,
     icon,
     visible,
+    dangerous: action.dangerous,
     onClick: () => action.perform && action.perform(context),
     selected: action.selected ? action.selected(context) : undefined,
   };
@@ -69,23 +66,15 @@ export function actionToKBar(
   action: Action,
   context: ActionContext
 ): CommandBarAction[] {
-  function resolve<T>(value: any): T {
-    if (typeof value === "function") {
-      return value(context);
-    }
-
-    return value;
-  }
-
   if (typeof action.visible === "function" && !action.visible(context)) {
     return [];
   }
 
-  const resolvedIcon = resolve<React.ReactElement<any>>(action.icon);
-  const resolvedChildren = resolve<Action[]>(action.children);
-  const resolvedSection = resolve<string>(action.section);
-  const resolvedName = resolve<string>(action.name);
-  const resolvedPlaceholder = resolve<string>(action.placeholder);
+  const resolvedIcon = resolve<React.ReactElement<any>>(action.icon, context);
+  const resolvedChildren = resolve<Action[]>(action.children, context);
+  const resolvedSection = resolve<string>(action.section, context);
+  const resolvedName = resolve<string>(action.name, context);
+  const resolvedPlaceholder = resolve<string>(action.placeholder, context);
   const children = resolvedChildren
     ? flattenDeep(resolvedChildren.map((a) => actionToKBar(a, context))).filter(
         (a) => !!a

app/actions/root.ts

@@ -1,8 +1,9 @@
 import { rootCollectionActions } from "./definitions/collections";
-import { rootDebugActions } from "./definitions/debug";
+import { rootDeveloperActions } from "./definitions/developer";
 import { rootDocumentActions } from "./definitions/documents";
 import { rootNavigationActions } from "./definitions/navigation";
 import { rootSettingsActions } from "./definitions/settings";
+import { rootTeamActions } from "./definitions/teams";
 import { rootUserActions } from "./definitions/users";
 
 export default [
@@ -11,5 +12,6 @@ export default [
   ...rootUserActions,
   ...rootNavigationActions,
   ...rootSettingsActions,
-  ...rootDebugActions,
+  ...rootDeveloperActions,
+  ...rootTeamActions,
 ];

app/actions/sections.ts

@@ -2,7 +2,7 @@ import { ActionContext } from "~/types";
 
 export const CollectionSection = ({ t }: ActionContext) => t("Collection");
 
-export const DebugSection = ({ t }: ActionContext) => t("Debug");
+export const DeveloperSection = ({ t }: ActionContext) => t("Debug");
 
 export const DocumentSection = ({ t }: ActionContext) => t("Document");
 

app/components/Authenticated.tsx

@@ -2,9 +2,7 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Redirect } from "react-router-dom";
-import { isCustomSubdomain } from "@shared/utils/domains";
 import LoadingIndicator from "~/components/LoadingIndicator";
-import env from "~/env";
 import useStores from "~/hooks/useStores";
 import { changeLanguage } from "~/utils/language";
 
@@ -25,29 +23,11 @@ const Authenticated = ({ children }: Props) => {
 
   if (auth.authenticated) {
     const { user, team } = auth;
-    const { hostname } = window.location;
 
     if (!team || !user) {
       return <LoadingIndicator />;
     }
 
-    // If we're authenticated but viewing a domain that doesn't match the
-    // current team then kick the user to the teams correct domain.
-    if (team.domain) {
-      if (team.domain !== hostname) {
-        window.location.href = `${team.url}${window.location.pathname}`;
-        return <LoadingIndicator />;
-      }
-    } else if (
-      env.SUBDOMAINS_ENABLED &&
-      team.subdomain &&
-      isCustomSubdomain(hostname) &&
-      !hostname.startsWith(`${team.subdomain}.`)
-    ) {
-      window.location.href = `${team.url}${window.location.pathname}`;
-      return <LoadingIndicator />;
-    }
-
     return children;
   }
 

app/components/AuthenticatedLayout.tsx

@@ -51,7 +51,11 @@ class AuthenticatedLayout extends React.Component<Props> {
     }
   };
 
-  goToNewDocument = () => {
+  goToNewDocument = (event: KeyboardEvent) => {
+    if (event.metaKey || event.altKey) {
+      return;
+    }
+
     const { activeCollectionId } = this.props.ui;
     if (!activeCollectionId) {
       return;

app/components/Branding.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
+import { depths } from "@shared/styles";
 import env from "~/env";
 import OutlineLogo from "./OutlineLogo";
 
@@ -38,7 +39,7 @@ const Link = styled.a`
   }
 
   ${breakpoint("tablet")`
-    z-index: ${(props: any) => props.theme.depths.sidebar + 1};
+    z-index: ${depths.sidebar + 1};
     position: fixed;
     bottom: 0;
     left: 0;

app/components/Breadcrumb.tsx

@@ -37,7 +37,7 @@ function Breadcrumb({
   return (
     <Flex justify="flex-start" align="center">
       {topLevelItems.map((item, index) => (
-        <React.Fragment key={item.to || index}>
+        <React.Fragment key={String(item.to) || index}>
           {item.icon}
           {item.to ? (
             <Item

app/components/Button.tsx

@@ -1,3 +1,4 @@
+import { LocationDescriptor } from "history";
 import { ExpandedIcon } from "outline-icons";
 import { darken, lighten } from "polished";
 import * as React from "react";
@@ -111,7 +112,7 @@ const RealButton = styled.button<{
       }
 
       &:disabled {
-        background: none;
+        background: ${lighten(0.05, props.theme.danger)};
       }
 
       &.focus-visible {
@@ -155,7 +156,7 @@ export type Props<T> = {
   primary?: boolean;
   fullwidth?: boolean;
   as?: T;
-  to?: string;
+  to?: LocationDescriptor;
   borderOnHover?: boolean;
   href?: string;
   "data-on"?: string;

app/components/ButtonLink.tsx

@@ -1,17 +1,6 @@
-import * as React from "react";
 import styled from "styled-components";
 
-type Props = {
-  onClick?: React.MouseEventHandler<HTMLButtonElement>;
-};
-
-const ButtonLink: React.FC<Props> = React.forwardRef(
-  (props: Props, ref: React.Ref<HTMLButtonElement>) => {
-    return <Button {...props} ref={ref} />;
-  }
-);
-
-const Button = styled.button`
+const ButtonLink = styled.button`
   margin: 0;
   padding: 0;
   border: 0;

app/components/CenteredContent.tsx

@@ -6,14 +6,14 @@ type Props = {
   withStickyHeader?: boolean;
 };
 
-const Container = styled.div<{ withStickyHeader?: boolean }>`
+const Container = styled.div<Props>`
   width: 100%;
   max-width: 100vw;
   padding: ${(props) => (props.withStickyHeader ? "4px 12px" : "60px 12px")};
 
   ${breakpoint("tablet")`
-    padding: ${(props: any) =>
-      props.withStickyHeader ? "4px 60px 60px" : "60px"};
+    padding: ${(props: Props) =>
+      props.withStickyHeader ? "4px 44px 60px" : "60px 44px"};
   `};
 `;
 

app/components/Collaborators.tsx

@@ -42,8 +42,9 @@ function Collaborators(props: Props) {
         filter(
           users.orderedData,
           (user) =>
-            presentIds.includes(user.id) ||
-            document.collaboratorIds.includes(user.id)
+            (presentIds.includes(user.id) ||
+              document.collaboratorIds.includes(user.id)) &&
+            !user.isSuspended
         ),
         (user) => presentIds.includes(user.id)
       ),
@@ -52,18 +53,14 @@ function Collaborators(props: Props) {
 
   // load any users we don't yet have in memory
   React.useEffect(() => {
-    const userIdsToFetch = uniq([
-      ...document.collaboratorIds,
-      ...presentIds,
-    ]).filter((userId) => !users.get(userId));
+    const ids = uniq([...document.collaboratorIds, ...presentIds])
+      .filter((userId) => !users.get(userId))
+      .sort();
 
-    if (!isEqual(requestedUserIds, userIdsToFetch)) {
-      setRequestedUserIds(userIdsToFetch);
+    if (!isEqual(requestedUserIds, ids) && ids.length > 0) {
+      setRequestedUserIds(ids);
+      users.fetchPage({ ids, limit: 100 });
     }
-
-    userIdsToFetch
-      .filter((userId) => requestedUserIds.includes(userId))
-      .forEach((userId) => users.fetch(userId));
   }, [document, users, presentIds, document.collaboratorIds, requestedUserIds]);
 
   const popover = usePopoverState({

app/components/CollectionDeleteDialog.tsx

@@ -3,12 +3,10 @@ import * as React from "react";
 import { useTranslation, Trans } from "react-i18next";
 import { useHistory } from "react-router-dom";
 import Collection from "~/models/Collection";
-import Button from "~/components/Button";
-import Flex from "~/components/Flex";
+import ConfirmationDialog from "~/components/ConfirmationDialog";
 import Text from "~/components/Text";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
 import useStores from "~/hooks/useStores";
-import useToasts from "~/hooks/useToasts";
 import { homePath } from "~/utils/routeHelpers";
 
 type Props = {
@@ -16,39 +14,29 @@ type Props = {
   onSubmit: () => void;
 };
 
-function CollectionDelete({ collection, onSubmit }: Props) {
-  const [isDeleting, setIsDeleting] = React.useState(false);
+function CollectionDeleteDialog({ collection, onSubmit }: Props) {
   const team = useCurrentTeam();
-  const { showToast } = useToasts();
   const { ui } = useStores();
   const history = useHistory();
   const { t } = useTranslation();
-  const handleSubmit = React.useCallback(
-    async (ev: React.SyntheticEvent) => {
-      ev.preventDefault();
-      setIsDeleting(true);
 
-      try {
-        const redirect = collection.id === ui.activeCollectionId;
-        await collection.delete();
-        onSubmit();
-        if (redirect) {
-          history.push(homePath());
-        }
-      } catch (err) {
-        showToast(err.message, {
-          type: "error",
-        });
-      } finally {
-        setIsDeleting(false);
-      }
-    },
-    [collection, history, onSubmit, showToast, ui.activeCollectionId]
-  );
+  const handleSubmit = async () => {
+    const redirect = collection.id === ui.activeCollectionId;
+    await collection.delete();
+    onSubmit();
+    if (redirect) {
+      history.push(homePath());
+    }
+  };
 
   return (
-    <Flex column>
-      <form onSubmit={handleSubmit}>
+    <ConfirmationDialog
+      onSubmit={handleSubmit}
+      submitText={t("I’m sure – Delete")}
+      savingText={`${t("Deleting")}…`}
+      danger
+    >
+      <>
         <Text type="secondary">
           <Trans
             defaults="Are you sure about that? Deleting the <em>{{collectionName}}</em> collection is permanent and cannot be restored, however documents within will be moved to the trash."
@@ -73,12 +61,9 @@ function CollectionDelete({ collection, onSubmit }: Props) {
             />
           </Text>
         ) : null}
-        <Button type="submit" disabled={isDeleting} autoFocus danger>
-          {isDeleting ? `${t("Deleting")}…` : t("I’m sure – Delete")}
-        </Button>
-      </form>
-    </Flex>
+      </>
+    </ConfirmationDialog>
   );
 }
 
-export default observer(CollectionDelete);
+export default observer(CollectionDeleteDialog);

app/components/CollectionDescription.tsx

@@ -1,3 +1,4 @@
+import debounce from "lodash/debounce";
 import { observer } from "mobx-react";
 import { transparentize } from "polished";
 import * as React from "react";
@@ -9,7 +10,6 @@ import ButtonLink from "~/components/ButtonLink";
 import Editor from "~/components/Editor";
 import LoadingIndicator from "~/components/LoadingIndicator";
 import NudeButton from "~/components/NudeButton";
-import useDebouncedCallback from "~/hooks/useDebouncedCallback";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
 import useToasts from "~/hooks/useToasts";
@@ -25,7 +25,7 @@ function CollectionDescription({ collection }: Props) {
   const [isExpanded, setExpanded] = React.useState(false);
   const [isEditing, setEditing] = React.useState(false);
   const [isDirty, setDirty] = React.useState(false);
-  const can = usePolicy(collection.id);
+  const can = usePolicy(collection);
 
   const handleStartEditing = React.useCallback(() => {
     setEditing(true);
@@ -49,21 +49,25 @@ function CollectionDescription({ collection }: Props) {
     [isExpanded]
   );
 
-  const handleSave = useDebouncedCallback(async (getValue) => {
-    try {
-      await collection.save({
-        description: getValue(),
-      });
-      setDirty(false);
-    } catch (err) {
-      showToast(
-        t("Sorry, an error occurred saving the collection", {
-          type: "error",
-        })
-      );
-      throw err;
-    }
-  }, 1000);
+  const handleSave = React.useMemo(
+    () =>
+      debounce(async (getValue) => {
+        try {
+          await collection.save({
+            description: getValue(),
+          });
+          setDirty(false);
+        } catch (err) {
+          showToast(
+            t("Sorry, an error occurred saving the collection", {
+              type: "error",
+            })
+          );
+          throw err;
+        }
+      }, 1000),
+    [collection, showToast, t]
+  );
 
   const handleChange = React.useCallback(
     (getValue) => {
@@ -107,7 +111,6 @@ function CollectionDescription({ collection }: Props) {
                 maxLength={1000}
                 embedsDisabled
                 readOnlyWriteCheckboxes
-                grow
               />
             </React.Suspense>
           ) : (

app/components/CollectionIcon.tsx

@@ -5,6 +5,7 @@ import * as React from "react";
 import Collection from "~/models/Collection";
 import { icons } from "~/components/IconPicker";
 import useStores from "~/hooks/useStores";
+import Logger from "~/utils/Logger";
 
 type Props = {
   collection: Collection;
@@ -36,7 +37,9 @@ function ResolvedCollectionIcon({
       const Component = icons[collection.icon].component;
       return <Component color={color} size={size} />;
     } catch (error) {
-      console.warn("Failed to render custom icon " + collection.icon);
+      Logger.warn("Failed to render custom icon", {
+        icon: collection.icon,
+      });
     }
   }
 

app/components/CommandBar.tsx

@@ -6,6 +6,7 @@ import { useTranslation } from "react-i18next";
 import { Portal } from "react-portal";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
+import { depths } from "@shared/styles";
 import CommandBarResults from "~/components/CommandBarResults";
 import SearchActions from "~/components/SearchActions";
 import rootActions from "~/actions/root";
@@ -90,7 +91,7 @@ const Hint = styled(Text)`
 `;
 
 const Positioner = styled(KBarPositioner)`
-  z-index: ${(props) => props.theme.depths.commandBar};
+  z-index: ${depths.commandBar};
 `;
 
 const SearchInput = styled(KBarSearch)`

app/components/ConfirmationDialog.tsx

@@ -0,0 +1,61 @@
+import { observer } from "mobx-react";
+import * as React from "react";
+import Button from "~/components/Button";
+import Flex from "~/components/Flex";
+import Text from "~/components/Text";
+import useStores from "~/hooks/useStores";
+import useToasts from "~/hooks/useToasts";
+
+type Props = {
+  /** Callback when the dialog is submitted */
+  onSubmit: () => Promise<void> | void;
+  /** Text to display on the submit button */
+  submitText?: string;
+  /** Text to display while the form is saving */
+  savingText?: string;
+  /** If true, the submit button will be a dangerous red */
+  danger?: boolean;
+};
+
+const ConfirmationDialog: React.FC<Props> = ({
+  onSubmit,
+  children,
+  submitText,
+  savingText,
+  danger,
+}) => {
+  const [isSaving, setIsSaving] = React.useState(false);
+  const { dialogs } = useStores();
+  const { showToast } = useToasts();
+
+  const handleSubmit = React.useCallback(
+    async (ev: React.SyntheticEvent) => {
+      ev.preventDefault();
+      setIsSaving(true);
+      try {
+        await onSubmit();
+        dialogs.closeAllModals();
+      } catch (err) {
+        showToast(err.message, {
+          type: "error",
+        });
+      } finally {
+        setIsSaving(false);
+      }
+    },
+    [onSubmit, dialogs, showToast]
+  );
+
+  return (
+    <Flex column>
+      <form onSubmit={handleSubmit}>
+        <Text type="secondary">{children}</Text>
+        <Button type="submit" disabled={isSaving} danger={danger} autoFocus>
+          {isSaving ? savingText : submitText}
+        </Button>
+      </form>
+    </Flex>
+  );
+};
+
+export default observer(ConfirmationDialog);

app/components/ContextMenu/MenuItem.tsx

@@ -1,17 +1,17 @@
+import { LocationDescriptor } from "history";
 import { CheckmarkIcon } from "outline-icons";
 import * as React from "react";
 import { MenuItem as BaseMenuItem } from "reakit/Menu";
 import styled, { css } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import { hover } from "~/styles";
 import MenuIconWrapper from "../MenuIconWrapper";
 
 type Props = {
-  onClick?: (arg0: React.SyntheticEvent) => void | Promise<void>;
+  onClick?: (event: React.SyntheticEvent) => void | Promise<void>;
   selected?: boolean;
   disabled?: boolean;
   dangerous?: boolean;
-  to?: string;
+  to?: LocationDescriptor;
   href?: string;
   target?: "_blank";
   as?: string | React.ComponentType<any>;
@@ -132,16 +132,18 @@ export const MenuAnchorCSS = css<MenuAnchorProps>`
       ? "pointer-events: none;"
       : `
 
-  &:${hover},
-  &:focus,
-  &.focus-visible {
-    color: ${props.theme.white};
-    background: ${props.dangerous ? props.theme.danger : props.theme.primary};
-    box-shadow: none;
-    cursor: pointer;
+  @media (hover: hover) {
+    &:hover,
+    &:focus,
+    &.focus-visible {
+      color: ${props.theme.white};
+      background: ${props.dangerous ? props.theme.danger : props.theme.primary};
+      box-shadow: none;
+      cursor: pointer;
 
-    svg {
-      fill: ${props.theme.white};
+      svg {
+        fill: ${props.theme.white};
+      }
     }
   }
   `};

app/components/ContextMenu/Separator.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { MenuSeparator } from "reakit/Menu";
 import styled from "styled-components";
 
-export default function Separator(rest: any) {
+export default function Separator(rest: React.HTMLAttributes<HTMLHRElement>) {
   return (
     <MenuSeparator {...rest}>
       {(props) => <HorizontalRule {...props} />}

app/components/ContextMenu/Template.tsx

@@ -69,29 +69,27 @@ const Submenu = React.forwardRef(
 );
 
 export function filterTemplateItems(items: TMenuItem[]): TMenuItem[] {
-  let filtered = items.filter((item) => item.visible !== false);
-
-  // this block literally just trims unnecessary separators
-  filtered = filtered.reduce((acc, item, index) => {
-    // trim separators from start / end
-    if (item.type === "separator" && index === 0) {
-      return acc;
-    }
-    if (item.type === "separator" && index === filtered.length - 1) {
-      return acc;
-    }
-
-    // trim double separators looking ahead / behind
-    const prev = filtered[index - 1];
-    if (prev && prev.type === "separator" && item.type === "separator") {
-      return acc;
-    }
-
-    // otherwise, continue
-    return [...acc, item];
-  }, []);
-
-  return filtered;
+  return items
+    .filter((item) => item.visible !== false)
+    .reduce((acc, item) => {
+      // trim separator if the previous item was a separator
+      if (
+        item.type === "separator" &&
+        acc[acc.length - 1]?.type === "separator"
+      ) {
+        return acc;
+      }
+      return [...acc, item];
+    }, [] as TMenuItem[])
+    .filter((item, index, arr) => {
+      if (
+        item.type === "separator" &&
+        (index === 0 || index === arr.length - 1)
+      ) {
+        return false;
+      }
+      return true;
+    });
 }
 
 function Template({ items, actions, context, ...menu }: Props) {

app/components/ContextMenu/index.tsx

@@ -1,9 +1,12 @@
+import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Portal } from "react-portal";
 import { Menu } from "reakit/Menu";
-import styled from "styled-components";
+import styled, { DefaultTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
+import { depths } from "@shared/styles";
+import Scrollable from "~/components/Scrollable";
 import useMenuContext from "~/hooks/useMenuContext";
 import useMenuHeight from "~/hooks/useMenuHeight";
 import usePrevious from "~/hooks/usePrevious";
@@ -90,6 +93,19 @@ const ContextMenu: React.FC<Props> = ({
     t,
   ]);
 
+  // We must manually manage scroll lock for iOS support so that the scrollable
+  // element can be passed into body-scroll-lock. See:
+  // https://github.com/ariakit/ariakit/issues/469
+  React.useEffect(() => {
+    const scrollElement = backgroundRef.current;
+    if (rest.visible && scrollElement) {
+      disableBodyScroll(scrollElement);
+    }
+    return () => {
+      scrollElement && enableBodyScroll(scrollElement);
+    };
+  }, [rest.visible]);
+
   // Perf win – don't render anything until the menu has been opened
   if (!rest.visible && !previousVisible) {
     return null;
@@ -99,7 +115,7 @@ const ContextMenu: React.FC<Props> = ({
   // trigger and the bottom of the window
   return (
     <>
-      <Menu hideOnClickOutside preventBodyScroll {...rest}>
+      <Menu hideOnClickOutside preventBodyScroll={false} {...rest}>
         {(props) => {
           // kind of hacky, but this is an effective way of telling which way
           // the menu will _actually_ be placed when taking into account screen
@@ -115,6 +131,7 @@ const ContextMenu: React.FC<Props> = ({
                 topAnchor={topAnchor}
                 rightAnchor={rightAnchor}
                 ref={backgroundRef}
+                hiddenScrollbars
                 style={
                   maxHeight && topAnchor
                     ? {
@@ -148,7 +165,7 @@ export const Backdrop = styled.div`
   right: 0;
   bottom: 0;
   background: ${(props) => props.theme.backdrop};
-  z-index: ${(props) => props.theme.depths.menu - 1};
+  z-index: ${depths.menu - 1};
 
   ${breakpoint("tablet")`
     display: none;
@@ -157,10 +174,12 @@ export const Backdrop = styled.div`
 
 export const Position = styled.div`
   position: absolute;
-  z-index: ${(props) => props.theme.depths.menu};
+  z-index: ${depths.menu};
 
-  // overrides make mobile-first coding style challenging
-  // so we explicitly define mobile breakpoint here
+  /*
+   * overrides make mobile-first coding style challenging
+   * so we explicitly define mobile breakpoint here
+   */
   ${breakpoint("mobile", "tablet")`
     position: fixed !important;
     transform: none !important;
@@ -171,10 +190,13 @@ export const Position = styled.div`
   `};
 `;
 
-export const Background = styled.div<{
+type BackgroundProps = {
   topAnchor?: boolean;
   rightAnchor?: boolean;
-}>`
+  theme: DefaultTheme;
+};
+
+export const Background = styled(Scrollable)<BackgroundProps>`
   animation: ${mobileContextMenu} 200ms ease;
   transform-origin: 50% 100%;
   max-width: 100%;
@@ -183,8 +205,6 @@ export const Background = styled.div<{
   padding: 6px 0;
   min-width: 180px;
   min-height: 44px;
-  overflow: hidden;
-  overflow-y: auto;
   max-height: 75vh;
   pointer-events: all;
   font-weight: normal;
@@ -194,11 +214,12 @@ export const Background = styled.div<{
   }
 
   ${breakpoint("tablet")`
-    animation: ${(props: any) =>
+    animation: ${(props: BackgroundProps) =>
       props.topAnchor ? fadeAndSlideDown : fadeAndSlideUp} 200ms ease;
-    transform-origin: ${(props: any) => (props.rightAnchor ? "75%" : "25%")} 0;
+    transform-origin: ${(props: BackgroundProps) =>
+      props.rightAnchor ? "75%" : "25%"} 0;
     max-width: 276px;
-    background: ${(props: any) => props.theme.menuBackground};
-    box-shadow: ${(props: any) => props.theme.menuShadow};
+    background: ${(props: BackgroundProps) => props.theme.menuBackground};
+    box-shadow: ${(props: BackgroundProps) => props.theme.menuShadow};
   `};
 `;

app/components/CopyToClipboard.ts

@@ -1,11 +1,12 @@
 import copy from "copy-to-clipboard";
 import * as React from "react";
+import env from "~/env";
 
 type Props = {
   text: string;
   children?: React.ReactElement;
   onClick?: React.MouseEventHandler<HTMLButtonElement>;
-  onCopy: () => void;
+  onCopy?: () => void;
 };
 
 class CopyToClipboard extends React.PureComponent<Props> {
@@ -14,12 +15,11 @@ class CopyToClipboard extends React.PureComponent<Props> {
     const elem = React.Children.only(children);
 
     copy(text, {
-      debug: process.env.NODE_ENV !== "production",
+      debug: env.ENVIRONMENT !== "production",
       format: "text/plain",
     });
-    if (onCopy) {
-      onCopy();
-    }
+
+    onCopy?.();
 
     if (elem && elem.props && typeof elem.props.onClick === "function") {
       elem.props.onClick(ev);

app/components/DocumentListItem.tsx

@@ -49,8 +49,8 @@ function DocumentListItem(
   ref: React.RefObject<HTMLAnchorElement>
 ) {
   const { t } = useTranslation();
-  const currentUser = useCurrentUser();
-  const currentTeam = useCurrentTeam();
+  const user = useCurrentUser();
+  const team = useCurrentTeam();
   const [menuOpen, handleMenuOpen, handleMenuClose] = useBoolean();
 
   const {
@@ -70,7 +70,7 @@ function DocumentListItem(
     !!document.title.toLowerCase().includes(highlight.toLowerCase());
   const canStar =
     !document.isDraft && !document.isArchived && !document.isTemplate;
-  const can = usePolicy(currentTeam.id);
+  const can = usePolicy(team);
   const canCollection = usePolicy(document.collectionId);
 
   return (
@@ -96,7 +96,7 @@ function DocumentListItem(
             highlight={highlight}
             dir={document.dir}
           />
-          {document.isBadgedNew && document.createdBy.id !== currentUser.id && (
+          {document.isBadgedNew && document.createdBy.id !== user.id && (
             <Badge yellow>{t("New")}</Badge>
           )}
           {canStar && (

app/components/DocumentMeta.tsx

@@ -1,3 +1,4 @@
+import { LocationDescriptor } from "history";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
@@ -35,7 +36,7 @@ type Props = {
   showLastViewed?: boolean;
   showParentDocuments?: boolean;
   document: Document;
-  to?: string;
+  to?: LocationDescriptor;
 };
 
 const DocumentMeta: React.FC<Props> = ({
@@ -73,42 +74,61 @@ const DocumentMeta: React.FC<Props> = ({
 
   const collection = collections.get(document.collectionId);
   const lastUpdatedByCurrentUser = user.id === updatedBy.id;
+  const userName = updatedBy.name;
   let content;
 
   if (deletedAt) {
     content = (
       <span>
-        {t("deleted")} <Time dateTime={deletedAt} addSuffix />
+        {lastUpdatedByCurrentUser
+          ? t("You deleted")
+          : t("{{ userName }} deleted", { userName })}{" "}
+        <Time dateTime={deletedAt} addSuffix />
       </span>
     );
   } else if (archivedAt) {
     content = (
       <span>
-        {t("archived")} <Time dateTime={archivedAt} addSuffix />
+        {lastUpdatedByCurrentUser
+          ? t("You archived")
+          : t("{{ userName }} archived", { userName })}{" "}
+        <Time dateTime={archivedAt} addSuffix />
       </span>
     );
   } else if (createdAt === updatedAt) {
     content = (
       <span>
-        {t("created")} <Time dateTime={updatedAt} addSuffix />
+        {lastUpdatedByCurrentUser
+          ? t("You created")
+          : t("{{ userName }} created", { userName })}{" "}
+        <Time dateTime={updatedAt} addSuffix />
       </span>
     );
   } else if (publishedAt && (publishedAt === updatedAt || showPublished)) {
     content = (
       <span>
-        {t("published")} <Time dateTime={publishedAt} addSuffix />
+        {lastUpdatedByCurrentUser
+          ? t("You published")
+          : t("{{ userName }} published", { userName })}{" "}
+        <Time dateTime={publishedAt} addSuffix />
       </span>
     );
   } else if (isDraft) {
     content = (
       <span>
-        {t("saved")} <Time dateTime={updatedAt} addSuffix />
+        {lastUpdatedByCurrentUser
+          ? t("You saved")
+          : t("{{ userName }} saved", { userName })}{" "}
+        <Time dateTime={updatedAt} addSuffix />
       </span>
     );
   } else {
     content = (
       <Modified highlight={modifiedSinceViewed && !lastUpdatedByCurrentUser}>
-        {t("updated")} <Time dateTime={updatedAt} addSuffix />
+        {lastUpdatedByCurrentUser
+          ? t("You updated")
+          : t("{{ userName }} updated", { userName })}{" "}
+        <Time dateTime={updatedAt} addSuffix />
       </Modified>
     );
   }
@@ -143,7 +163,6 @@ const DocumentMeta: React.FC<Props> = ({
 
   return (
     <Container align="center" rtl={document.dir === "rtl"} {...rest} dir="ltr">
-      {lastUpdatedByCurrentUser ? t("You") : updatedBy.name}&nbsp;
       {to ? <Link to={to}>{content}</Link> : content}
       {showCollection && collection && (
         <span>

app/components/DocumentMetaWithViews.tsx

@@ -1,4 +1,5 @@
-import { useObserver } from "mobx-react";
+import { LocationDescriptor } from "history";
+import { observer, useObserver } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { usePopoverState, PopoverDisclosure } from "reakit/Popover";
@@ -12,7 +13,7 @@ import useStores from "~/hooks/useStores";
 type Props = {
   document: Document;
   isDraft: boolean;
-  to?: string;
+  to?: LocationDescriptor;
   rtl?: boolean;
 };
 
@@ -83,4 +84,4 @@ const Meta = styled(DocumentMeta)<{ rtl?: boolean }>`
   }
 `;
 
-export default DocumentMetaWithViews;
+export default observer(DocumentMetaWithViews);

app/components/DocumentTasks.tsx

@@ -1,3 +1,4 @@
+import { observer } from "mobx-react";
 import { DoneIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation, TFunction } from "react-i18next";
@@ -60,4 +61,4 @@ const Done = styled(DoneIcon)<{ $animated: boolean }>`
   transform-origin: center center;
 `;
 
-export default DocumentTasks;
+export default observer(DocumentTasks);

app/components/DocumentTemplatizeDialog.tsx

@@ -0,0 +1,52 @@
+import invariant from "invariant";
+import { observer } from "mobx-react";
+import * as React from "react";
+import { useTranslation, Trans } from "react-i18next";
+import { useHistory } from "react-router-dom";
+import ConfirmationDialog from "~/components/ConfirmationDialog";
+import useStores from "~/hooks/useStores";
+import useToasts from "~/hooks/useToasts";
+import { documentUrl } from "~/utils/routeHelpers";
+
+type Props = {
+  documentId: string;
+};
+
+function DocumentTemplatizeDialog({ documentId }: Props) {
+  const history = useHistory();
+  const { showToast } = useToasts();
+  const { t } = useTranslation();
+  const { documents } = useStores();
+  const document = documents.get(documentId);
+  invariant(document, "Document must exist");
+
+  const handleSubmit = React.useCallback(async () => {
+    const template = await document?.templatize();
+    if (template) {
+      history.push(documentUrl(template));
+      showToast(t("Template created, go ahead and customize it"), {
+        type: "info",
+      });
+    }
+  }, [document, showToast, history, t]);
+
+  return (
+    <ConfirmationDialog
+      onSubmit={handleSubmit}
+      submitText={t("Create template")}
+      savingText={`${t("Creating")}…`}
+    >
+      <Trans
+        defaults="Creating a template from <em>{{titleWithDefault}}</em> is a non-destructive action – we'll make a copy of the document and turn it into a template that can be used as a starting point for new documents."
+        values={{
+          titleWithDefault: document.titleWithDefault,
+        }}
+        components={{
+          em: <strong />,
+        }}
+      />
+    </ConfirmationDialog>
+  );
+}
+
+export default observer(DocumentTemplatizeDialog);

app/components/DocumentViews.tsx

@@ -4,6 +4,7 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import Document from "~/models/Document";
+import User from "~/models/User";
 import Avatar from "~/components/Avatar";
 import ListItem from "~/components/List/Item";
 import PaginatedList from "~/components/PaginatedList";
@@ -42,7 +43,7 @@ function DocumentViews({ document, isOpen }: Props) {
         <PaginatedList
           aria-label={t("Viewers")}
           items={users}
-          renderItem={(item) => {
+          renderItem={(item: User) => {
             const view = documentViews.find((v) => v.user.id === item.id);
             const isPresent = presentIds.includes(item.id);
             const isEditing = editingIds.includes(item.id);

app/components/Editor.tsx

@@ -1,15 +1,32 @@
+import { formatDistanceToNow } from "date-fns";
+import { deburr, sortBy } from "lodash";
+import { observer } from "mobx-react";
+import { DOMParser as ProsemirrorDOMParser } from "prosemirror-model";
+import { TextSelection } from "prosemirror-state";
 import * as React from "react";
+import { mergeRefs } from "react-merge-refs";
 import { Optional } from "utility-types";
-import embeds from "@shared/editor/embeds";
+import insertFiles from "@shared/editor/commands/insertFiles";
+import { Heading } from "@shared/editor/lib/getHeadings";
+import { getDataTransferFiles } from "@shared/utils/files";
+import parseDocumentSlug from "@shared/utils/parseDocumentSlug";
 import { isInternalUrl } from "@shared/utils/urls";
+import { AttachmentValidation } from "@shared/validations";
+import Document from "~/models/Document";
+import ClickablePadding from "~/components/ClickablePadding";
 import ErrorBoundary from "~/components/ErrorBoundary";
+import HoverPreview from "~/components/HoverPreview";
 import type { Props as EditorProps, Editor as SharedEditor } from "~/editor";
 import useDictionary from "~/hooks/useDictionary";
+import useEmbeds from "~/hooks/useEmbeds";
+import useStores from "~/hooks/useStores";
 import useToasts from "~/hooks/useToasts";
+import { NotFoundError } from "~/utils/errors";
 import { uploadFile } from "~/utils/files";
 import history from "~/utils/history";
 import { isModKey } from "~/utils/keyboard";
 import { isHash } from "~/utils/urls";
+import DocumentBreadcrumb from "./DocumentBreadcrumb";
 
 const LazyLoadedEditor = React.lazy(
   () =>
@@ -32,14 +49,83 @@ export type Props = Optional<
   shareId?: string | undefined;
   embedsDisabled?: boolean;
   grow?: boolean;
+  onHeadingsChange?: (headings: Heading[]) => void;
   onSynced?: () => Promise<void>;
   onPublish?: (event: React.MouseEvent) => any;
 };
 
-function Editor(props: Props, ref: React.Ref<SharedEditor>) {
-  const { id, shareId } = props;
+function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
+  const { id, shareId, onChange, onHeadingsChange } = props;
+  const { documents } = useStores();
   const { showToast } = useToasts();
   const dictionary = useDictionary();
+  const embeds = useEmbeds(!shareId);
+  const [
+    activeLinkEvent,
+    setActiveLinkEvent,
+  ] = React.useState<MouseEvent | null>(null);
+  const previousHeadings = React.useRef<Heading[] | null>(null);
+
+  const handleLinkActive = React.useCallback((event: MouseEvent) => {
+    setActiveLinkEvent(event);
+    return false;
+  }, []);
+
+  const handleLinkInactive = React.useCallback(() => {
+    setActiveLinkEvent(null);
+  }, []);
+
+  const handleSearchLink = React.useCallback(
+    async (term: string) => {
+      if (isInternalUrl(term)) {
+        // search for exact internal document
+        const slug = parseDocumentSlug(term);
+        if (!slug) {
+          return [];
+        }
+
+        try {
+          const document = await documents.fetch(slug);
+          const time = formatDistanceToNow(Date.parse(document.updatedAt), {
+            addSuffix: true,
+          });
+
+          return [
+            {
+              title: document.title,
+              subtitle: `Updated ${time}`,
+              url: document.url,
+            },
+          ];
+        } catch (error) {
+          // NotFoundError could not find document for slug
+          if (!(error instanceof NotFoundError)) {
+            throw error;
+          }
+        }
+      }
+
+      // default search for anything that doesn't look like a URL
+      const results = await documents.searchTitles(term);
+
+      return sortBy(
+        results.map((document: Document) => {
+          return {
+            title: document.title,
+            subtitle: <DocumentBreadcrumb document={document} onlyText />,
+            url: document.url,
+          };
+        }),
+        (document) =>
+          deburr(document.title)
+            .toLowerCase()
+            .startsWith(deburr(term).toLowerCase())
+            ? -1
+            : 1
+      );
+    },
+    [documents]
+  );
 
   const onUploadFile = React.useCallback(
     async (file: File) => {
@@ -85,21 +171,145 @@ function Editor(props: Props, ref: React.Ref<SharedEditor>) {
     [shareId]
   );
 
+  const focusAtEnd = React.useCallback(() => {
+    ref?.current?.focusAtEnd();
+  }, [ref]);
+
+  const handleDrop = React.useCallback(
+    (event: React.DragEvent<HTMLDivElement>) => {
+      event.preventDefault();
+      event.stopPropagation();
+      const files = getDataTransferFiles(event);
+
+      const view = ref?.current?.view;
+      if (!view) {
+        return;
+      }
+
+      // Find a valid position at the end of the document to insert our content
+      const pos = TextSelection.near(
+        view.state.doc.resolve(view.state.doc.nodeSize - 2)
+      ).from;
+
+      // If there are no files in the drop event attempt to parse the html
+      // as a fragment and insert it at the end of the document
+      if (files.length === 0) {
+        const text =
+          event.dataTransfer.getData("text/html") ||
+          event.dataTransfer.getData("text/plain");
+
+        const dom = new DOMParser().parseFromString(text, "text/html");
+
+        view.dispatch(
+          view.state.tr.insert(
+            pos,
+            ProsemirrorDOMParser.fromSchema(view.state.schema).parse(dom)
+          )
+        );
+
+        return;
+      }
+
+      // Insert all files as attachments if any of the files are not images.
+      const isAttachment = files.some(
+        (file) => !AttachmentValidation.imageContentTypes.includes(file.type)
+      );
+
+      insertFiles(view, event, pos, files, {
+        uploadFile: onUploadFile,
+        onFileUploadStart: props.onFileUploadStart,
+        onFileUploadStop: props.onFileUploadStop,
+        onShowToast: showToast,
+        dictionary,
+        isAttachment,
+      });
+    },
+    [
+      ref,
+      props.onFileUploadStart,
+      props.onFileUploadStop,
+      dictionary,
+      onUploadFile,
+      showToast,
+    ]
+  );
+
+  // see: https://stackoverflow.com/a/50233827/192065
+  const handleDragOver = React.useCallback(
+    (event: React.DragEvent<HTMLDivElement>) => {
+      event.stopPropagation();
+      event.preventDefault();
+    },
+    []
+  );
+
+  // Calculate if headings have changed and trigger callback if so
+  const updateHeadings = React.useCallback(() => {
+    if (onHeadingsChange) {
+      const headings = ref?.current?.getHeadings();
+      if (
+        headings &&
+        headings.map((h) => h.level + h.title).join("") !==
+          previousHeadings.current?.map((h) => h.level + h.title).join("")
+      ) {
+        previousHeadings.current = headings;
+        onHeadingsChange(headings);
+      }
+    }
+  }, [ref, onHeadingsChange]);
+
+  const handleChange = React.useCallback(
+    (event) => {
+      onChange?.(event);
+      updateHeadings();
+    },
+    [onChange, updateHeadings]
+  );
+
+  const handleRefChanged = React.useCallback(
+    (node: SharedEditor | null) => {
+      if (node && !previousHeadings.current) {
+        updateHeadings();
+      }
+    },
+    [updateHeadings]
+  );
+
   return (
     <ErrorBoundary reloadOnChunkMissing>
-      <LazyLoadedEditor
-        ref={ref}
-        uploadFile={onUploadFile}
-        onShowToast={showToast}
-        embeds={embeds}
-        dictionary={dictionary}
-        {...props}
-        onClickLink={onClickLink}
-        placeholder={props.placeholder || ""}
-        defaultValue={props.defaultValue || ""}
-      />
+      <>
+        <LazyLoadedEditor
+          ref={mergeRefs([ref, handleRefChanged])}
+          uploadFile={onUploadFile}
+          onShowToast={showToast}
+          embeds={embeds}
+          dictionary={dictionary}
+          {...props}
+          onHoverLink={handleLinkActive}
+          onClickLink={onClickLink}
+          onSearchLink={handleSearchLink}
+          onChange={handleChange}
+          placeholder={props.placeholder || ""}
+          defaultValue={props.defaultValue || ""}
+        />
+        {props.grow && !props.readOnly && (
+          <ClickablePadding
+            onClick={focusAtEnd}
+            onDrop={handleDrop}
+            onDragOver={handleDragOver}
+            grow
+          />
+        )}
+        {activeLinkEvent && !shareId && (
+          <HoverPreview
+            node={activeLinkEvent.target as HTMLAnchorElement}
+            event={activeLinkEvent}
+            onClose={handleLinkInactive}
+          />
+        )}
+      </>
     </ErrorBoundary>
   );
 }
 
-export default React.forwardRef(Editor);
+export default observer(React.forwardRef(Editor));

app/components/Empty.ts

@@ -2,6 +2,7 @@ import styled from "styled-components";
 
 const Empty = styled.p`
   color: ${(props) => props.theme.textTertiary};
+  user-select: none;
 `;
 
 export default Empty;

app/components/ErrorBoundary.tsx

@@ -1,4 +1,3 @@
-import * as Sentry from "@sentry/react";
 import { observable } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
@@ -10,7 +9,8 @@ import CenteredContent from "~/components/CenteredContent";
 import PageTitle from "~/components/PageTitle";
 import Text from "~/components/Text";
 import env from "~/env";
-import isHosted from "~/utils/isHosted";
+import Logger from "~/utils/Logger";
+import isCloudHosted from "~/utils/isCloudHosted";
 
 type Props = WithTranslation & {
   reloadOnChunkMissing?: boolean;
@@ -26,7 +26,6 @@ class ErrorBoundary extends React.Component<Props> {
 
   componentDidCatch(error: Error) {
     this.error = error;
-    console.error(error);
 
     if (
       this.props.reloadOnChunkMissing &&
@@ -40,9 +39,7 @@ class ErrorBoundary extends React.Component<Props> {
       return;
     }
 
-    if (env.SENTRY_DSN) {
-      Sentry.captureException(error);
-    }
+    Logger.error("ErrorBoundary", error);
   }
 
   handleReload = () => {
@@ -62,7 +59,7 @@ class ErrorBoundary extends React.Component<Props> {
 
     if (this.error) {
       const error = this.error;
-      const isReported = !!env.SENTRY_DSN && isHosted;
+      const isReported = !!env.SENTRY_DSN && isCloudHosted;
       const isChunkError = this.error.message.match(/chunk/);
 
       if (isChunkError) {

app/components/EventListItem.tsx

@@ -5,6 +5,7 @@ import {
   PublishIcon,
   MoveIcon,
   CheckboxIcon,
+  UnpublishIcon,
 } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
@@ -32,7 +33,7 @@ type Props = {
 const EventListItem = ({ event, latest, document, ...rest }: Props) => {
   const { t } = useTranslation();
   const location = useLocation();
-  const can = usePolicy(document.id);
+  const can = usePolicy(document);
   const opts = {
     userName: event.actor.name,
   };
@@ -85,6 +86,11 @@ const EventListItem = ({ event, latest, document, ...rest }: Props) => {
       meta = t("{{userName}} published", opts);
       break;
 
+    case "documents.unpublish":
+      icon = <UnpublishIcon color="currentColor" size={16} />;
+      meta = t("{{userName}} unpublished", opts);
+      break;
+
     case "documents.move":
       icon = <MoveIcon color="currentColor" size={16} />;
       meta = t("{{userName}} moved", opts);
@@ -113,7 +119,10 @@ const EventListItem = ({ event, latest, document, ...rest }: Props) => {
         <Time
           dateTime={event.createdAt}
           tooltipDelay={500}
-          format="MMM do, h:mm a"
+          format={{
+            en_US: "MMM do, h:mm a",
+            fr_FR: "'Le 'd MMMM 'à' H:mm",
+          }}
           relative={false}
           addSuffix
           onClick={handleTimeClick}

app/components/Flex.tsx

@@ -11,11 +11,19 @@ const Flex = styled.div<{
   align?: AlignValues;
   justify?: JustifyValues;
   shrink?: boolean;
+  reverse?: boolean;
   gap?: number;
 }>`
   display: flex;
   flex: ${({ auto }) => (auto ? "1 1 auto" : "initial")};
-  flex-direction: ${({ column }) => (column ? "column" : "row")};
+  flex-direction: ${({ column, reverse }) =>
+    reverse
+      ? column
+        ? "column-reverse"
+        : "row-reverse"
+      : column
+      ? "column"
+      : "row"};
   align-items: ${({ align }) => align};
   justify-content: ${({ justify }) => justify};
   flex-shrink: ${({ shrink }) => (shrink ? 1 : "initial")};

app/components/GroupListItem.tsx

@@ -19,7 +19,7 @@ type Props = RootStore & {
   membership?: CollectionGroupMembership;
   showFacepile?: boolean;
   showAvatar?: boolean;
-  renderActions: (arg0: { openMembersModal: () => void }) => React.ReactNode;
+  renderActions: (params: { openMembersModal: () => void }) => React.ReactNode;
 };
 
 @observer

app/components/Guide.tsx

@@ -1,7 +1,7 @@
-import { observer } from "mobx-react";
 import * as React from "react";
 import { Dialog, DialogBackdrop, useDialogState } from "reakit/Dialog";
 import styled from "styled-components";
+import { depths } from "@shared/styles";
 import Scrollable from "~/components/Scrollable";
 import usePrevious from "~/hooks/usePrevious";
 
@@ -72,7 +72,7 @@ const Backdrop = styled.div`
   right: 0;
   bottom: 0;
   background-color: ${(props) => props.theme.backdrop} !important;
-  z-index: ${(props) => props.theme.depths.modalOverlay};
+  z-index: ${depths.modalOverlay};
   transition: opacity 200ms ease-in-out;
   opacity: 0;
 
@@ -87,7 +87,7 @@ const Scene = styled.div`
   right: 0;
   bottom: 0;
   margin: 12px;
-  z-index: ${(props) => props.theme.depths.modal};
+  z-index: ${depths.modal};
   display: flex;
   justify-content: center;
   align-items: flex-start;
@@ -111,4 +111,4 @@ const Content = styled(Scrollable)`
   padding: 16px;
 `;
 
-export default observer(Guide);
+export default Guide;

app/components/Header.tsx

@@ -5,9 +5,11 @@ import { transparentize } from "polished";
 import * as React from "react";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
+import { depths } from "@shared/styles";
 import Button from "~/components/Button";
 import Fade from "~/components/Fade";
 import Flex from "~/components/Flex";
+import useEventListener from "~/hooks/useEventListener";
 import useMobile from "~/hooks/useMobile";
 import useStores from "~/hooks/useStores";
 import { supportsPassiveListener } from "~/utils/browser";
@@ -28,19 +30,17 @@ function Header({ breadcrumb, title, actions, hasSidebar }: Props) {
   const passThrough = !actions && !breadcrumb && !title;
 
   const [isScrolled, setScrolled] = React.useState(false);
-  const handleScroll = React.useCallback(
-    throttle(() => setScrolled(window.scrollY > 75), 50),
+  const handleScroll = React.useMemo(
+    () => throttle(() => setScrolled(window.scrollY > 75), 50),
     []
   );
 
-  React.useEffect(() => {
-    window.addEventListener(
-      "scroll",
-      handleScroll,
-      supportsPassiveListener ? { passive: true } : false
-    );
-    return () => window.removeEventListener("scroll", handleScroll);
-  }, [handleScroll]);
+  useEventListener(
+    "scroll",
+    handleScroll,
+    window,
+    supportsPassiveListener ? { passive: true } : { capture: false }
+  );
 
   const handleClickTitle = React.useCallback(() => {
     window.scrollTo({
@@ -100,7 +100,7 @@ const Actions = styled(Flex)`
 
 const Wrapper = styled(Flex)<{ $passThrough?: boolean }>`
   top: 0;
-  z-index: ${(props) => props.theme.depths.header};
+  z-index: ${depths.header};
   position: sticky;
   background: ${(props) => props.theme.background};
 

app/components/Highlight.tsx

@@ -1,3 +1,4 @@
+import { escapeRegExp } from "lodash";
 import * as React from "react";
 import replace from "string-replace-to-array";
 import styled from "styled-components";
@@ -23,7 +24,7 @@ function Highlight({
     regex = highlight;
   } else {
     regex = new RegExp(
-      (highlight || "").replace(/[-\\^$*+?.()|[\]{}]/g, "\\$&"),
+      escapeRegExp(highlight || ""),
       caseSensitive ? "g" : "gi"
     );
   }
@@ -41,10 +42,10 @@ function Highlight({
   );
 }
 
-const Mark = styled.mark`
+export const Mark = styled.mark`
   background: ${(props) => props.theme.searchHighlight};
   border-radius: 2px;
-  padding: 0 4px;
+  padding: 0 2px;
 `;
 
 export default Highlight;

app/components/HoverPreview.tsx

@@ -2,9 +2,11 @@ import { transparentize } from "polished";
 import * as React from "react";
 import { Portal } from "react-portal";
 import styled from "styled-components";
+import { depths } from "@shared/styles";
 import parseDocumentSlug from "@shared/utils/parseDocumentSlug";
-import { isInternalUrl } from "@shared/utils/urls";
+import { isExternalUrl } from "@shared/utils/urls";
 import HoverPreviewDocument from "~/components/HoverPreviewDocument";
+import useMobile from "~/hooks/useMobile";
 import useStores from "~/hooks/useStores";
 import { fadeAndSlideDown } from "~/styles/animations";
 
@@ -123,8 +125,13 @@ function HoverPreviewInternal({ node, onClose }: Props) {
 }
 
 function HoverPreview({ node, ...rest }: Props) {
+  const isMobile = useMobile();
+  if (isMobile) {
+    return null;
+  }
+
   // previews only work for internal doc links for now
-  if (!isInternalUrl(node.href)) {
+  if (isExternalUrl(node.href)) {
     return null;
   }
 
@@ -150,7 +157,7 @@ const Margin = styled.div`
 
 const CardContent = styled.div`
   overflow: hidden;
-  max-height: 350px;
+  max-height: 20em;
   user-select: none;
 `;
 
@@ -195,7 +202,7 @@ const Card = styled.div`
 const Position = styled.div<{ fixed?: boolean; top?: number; left?: number }>`
   margin-top: 10px;
   position: ${({ fixed }) => (fixed ? "fixed" : "absolute")};
-  z-index: ${(props) => props.theme.depths.hoverPreview};
+  z-index: ${depths.hoverPreview};
   display: flex;
   max-height: 75%;
 

app/components/IconPicker.tsx

@@ -40,6 +40,7 @@ import { useTranslation } from "react-i18next";
 import { useMenuState, MenuButton, MenuItem } from "reakit/Menu";
 import styled, { useTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
+import { colorPalette } from "@shared/utils/collections";
 import ContextMenu from "~/components/ContextMenu";
 import Flex from "~/components/Flex";
 import { LabelText } from "~/components/Input";
@@ -200,18 +201,7 @@ export const icons = {
     keywords: "warning alert error",
   },
 };
-const colors = [
-  "#4E5C6E",
-  "#0366d6",
-  "#9E5CF7",
-  "#FF825C",
-  "#FF5C80",
-  "#FFBE0B",
-  "#42DED1",
-  "#00D084",
-  "#FF4DFA",
-  "#2F362F",
-];
+
 type Props = {
   onOpen?: () => void;
   onClose?: () => void;
@@ -272,7 +262,7 @@ function IconPicker({ onOpen, onClose, icon, color, onChange }: Props) {
             <ColorPicker
               color={color}
               onChange={(color) => onChange(color.hex, icon)}
-              colors={colors}
+              colors={colorPalette}
               triangle="hide"
               styles={{
                 default: {

app/components/Input.tsx

@@ -38,6 +38,13 @@ const RealInput = styled.input<{ hasIcon?: boolean }>`
     color: ${(props) => props.theme.placeholder};
   }
 
+  &:-webkit-autofill,
+  &:-webkit-autofill:hover,
+  &:-webkit-autofill:focus {
+    -webkit-box-shadow: 0 0 0px 1000px ${(props) => props.theme.background}
+      inset;
+  }
+
   &::-webkit-search-cancel-button {
     -webkit-appearance: none;
   }
@@ -97,36 +104,24 @@ export const LabelText = styled.div`
   display: inline-block;
 `;
 
-export type Props = React.HTMLAttributes<HTMLInputElement> & {
+export type Props = React.InputHTMLAttributes<
+  HTMLInputElement | HTMLTextAreaElement
+> & {
   type?: "text" | "email" | "checkbox" | "search" | "textarea";
-  value?: string;
-  label?: string;
-  className?: string;
   labelHidden?: boolean;
+  label?: string;
   flex?: boolean;
   short?: boolean;
   margin?: string | number;
   icon?: React.ReactNode;
-  name?: string;
-  minLength?: number;
-  maxLength?: number;
-  autoFocus?: boolean;
-  autoComplete?: boolean | string;
-  readOnly?: boolean;
-  required?: boolean;
-  disabled?: boolean;
-  placeholder?: string;
-  onChange?: (
-    ev: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-  ) => unknown;
-  onKeyDown?: (ev: React.KeyboardEvent<HTMLInputElement>) => unknown;
+  innerRef?: React.Ref<any>;
   onFocus?: (ev: React.SyntheticEvent) => unknown;
   onBlur?: (ev: React.SyntheticEvent) => unknown;
 };
 
 @observer
 class Input extends React.Component<Props> {
-  input = React.createRef<HTMLInputElement | HTMLTextAreaElement>();
+  input = this.props.innerRef;
 
   @observable
   focused = false;
@@ -147,10 +142,6 @@ class Input extends React.Component<Props> {
     }
   };
 
-  focus() {
-    this.input.current?.focus();
-  }
-
   render() {
     const {
       type = "text",
@@ -166,8 +157,6 @@ class Input extends React.Component<Props> {
       ...rest
     } = this.props;
 
-    const InputComponent: React.ComponentType =
-      type === "textarea" ? RealTextarea : RealInput;
     const wrappedLabel = <LabelText>{label}</LabelText>;
 
     return (
@@ -181,15 +170,24 @@ class Input extends React.Component<Props> {
             ))}
           <Outline focused={this.focused} margin={margin}>
             {icon && <IconWrapper>{icon}</IconWrapper>}
-            <InputComponent
-              // @ts-expect-error no idea why this is not working
-              ref={this.input}
-              onBlur={this.handleBlur}
-              onFocus={this.handleFocus}
-              hasIcon={!!icon}
-              type={type === "textarea" ? undefined : type}
-              {...rest}
-            />
+            {type === "textarea" ? (
+              <RealTextarea
+                ref={this.props.innerRef}
+                onBlur={this.props.onBlur}
+                onFocus={this.handleFocus}
+                hasIcon={!!icon}
+                {...rest}
+              />
+            ) : (
+              <RealInput
+                ref={this.props.innerRef}
+                onBlur={this.props.onBlur}
+                onFocus={this.handleFocus}
+                hasIcon={!!icon}
+                type={type}
+                {...rest}
+              />
+            )}
           </Outline>
         </label>
       </Wrapper>
@@ -197,4 +195,10 @@ class Input extends React.Component<Props> {
   }
 }
 
+export const ReactHookWrappedInput = React.forwardRef(
+  (props: Omit<Props, "innerRef">, ref: React.Ref<any>) => {
+    return <Input {...{ ...props, innerRef: ref }} />;
+  }
+);
+
 export default Input;

app/components/InputSearch.tsx

@@ -2,7 +2,7 @@ import { SearchIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useTheme } from "styled-components";
-import Input, { Props as InputProps } from "./Input";
+import Input, { Props as InputProps } from "~/components/Input";
 
 type Props = InputProps & {
   placeholder?: string;
@@ -11,7 +11,10 @@ type Props = InputProps & {
   onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => unknown;
 };
 
-export default function InputSearch(props: Props) {
+function InputSearch(
+  props: Props,
+  ref: React.RefObject<HTMLInputElement | HTMLTextAreaElement>
+) {
   const { t } = useTranslation();
   const theme = useTheme();
   const [isFocused, setIsFocused] = React.useState(false);
@@ -39,7 +42,10 @@ export default function InputSearch(props: Props) {
       onBlur={handleBlur}
       margin={0}
       labelHidden
+      innerRef={ref}
       {...rest}
     />
   );
 }
+
+export default React.forwardRef(InputSearch);

app/components/InputSearchPage.tsx

@@ -8,7 +8,7 @@ import useBoolean from "~/hooks/useBoolean";
 import useKeyDown from "~/hooks/useKeyDown";
 import { isModKey } from "~/utils/keyboard";
 import { searchPath } from "~/utils/routeHelpers";
-import Input from "./Input";
+import Input, { Outline } from "./Input";
 
 type Props = {
   source: string;
@@ -30,7 +30,7 @@ function InputSearchPage({
   collectionId,
   source,
 }: Props) {
-  const inputRef = React.useRef<Input>(null);
+  const inputRef = React.useRef<HTMLInputElement>(null);
   const theme = useTheme();
   const history = useHistory();
   const { t } = useTranslation();
@@ -67,7 +67,7 @@ function InputSearchPage({
 
   return (
     <InputMaxWidth
-      ref={inputRef}
+      innerRef={inputRef}
       type="search"
       placeholder={placeholder || `${t("Search")}…`}
       value={value}
@@ -89,6 +89,10 @@ function InputSearchPage({
 
 const InputMaxWidth = styled(Input)`
   max-width: 30vw;
+
+  ${Outline} {
+    border-radius: 16px;
+  }
 `;
 
 export default observer(InputSearchPage);

app/components/InputSelectPermission.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { $Diff } from "utility-types";
+import { CollectionPermission } from "@shared/types";
 import InputSelect, { Props, Option } from "./InputSelect";
 
 export default function InputSelectPermission(
@@ -31,11 +32,11 @@ export default function InputSelectPermission(
       options={[
         {
           label: t("View and edit"),
-          value: "read_write",
+          value: CollectionPermission.ReadWrite,
         },
         {
           label: t("View only"),
-          value: "read",
+          value: CollectionPermission.Read,
         },
         {
           label: t("No access"),

app/components/LanguagePrompt.tsx

@@ -10,7 +10,7 @@ import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";
 import { detectLanguage } from "~/utils/language";
 
-function Icon(props: any) {
+function Icon({ className }: { className?: string }) {
   return (
     <svg
       width="32"
@@ -18,7 +18,7 @@ function Icon(props: any) {
       viewBox="0 0 32 32"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      className={className}
     >
       <path
         fill-rule="evenodd"

app/components/Layout.tsx

@@ -1,7 +1,7 @@
 import { observer } from "mobx-react";
 import * as React from "react";
 import { Helmet } from "react-helmet";
-import styled from "styled-components";
+import styled, { DefaultTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import Flex from "~/components/Flex";
 import { LoadingIndicatorBar } from "~/components/LoadingIndicator";
@@ -74,11 +74,14 @@ const Container = styled(Flex)`
   min-height: 100%;
 `;
 
-const Content = styled(Flex)<{
+type ContentProps = {
   $isResizing?: boolean;
   $sidebarCollapsed?: boolean;
   $hasSidebar?: boolean;
-}>`
+  theme: DefaultTheme;
+};
+
+const Content = styled(Flex)<ContentProps>`
   margin: 0;
   transition: ${(props) =>
     props.$isResizing ? "none" : `margin-left 100ms ease-out`};
@@ -92,7 +95,7 @@ const Content = styled(Flex)<{
   `}
 
   ${breakpoint("tablet")`
-    ${(props: any) =>
+    ${(props: ContentProps) =>
       props.$hasSidebar &&
       props.$sidebarCollapsed &&
       `margin-left: ${props.theme.sidebarCollapsedWidth}px;`}

app/components/LazyPolyfills.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { loadPolyfills } from "~/utils/polyfills";
+
+/**
+ * Asyncronously load required polyfills. Should wrap the React tree.
+ */
+export const LazyPolyfill: React.FC = ({ children }) => {
+  const [isLoaded, setIsLoaded] = React.useState(false);
+
+  React.useEffect(() => {
+    loadPolyfills().then(() => {
+      setIsLoaded(true);
+    });
+  }, []);
+
+  if (!isLoaded) {
+    return null;
+  }
+
+  return <>{children}</>;
+};
+
+export default LazyPolyfill;

app/components/List/Error.tsx

@@ -0,0 +1,53 @@
+import { DisconnectedIcon, WarningIcon } from "outline-icons";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import styled from "styled-components";
+import Empty from "~/components/Empty";
+import useEventListener from "~/hooks/useEventListener";
+import { OfflineError } from "~/utils/errors";
+import ButtonLink from "../ButtonLink";
+import Flex from "../Flex";
+
+type Props = {
+  error: Error;
+  retry: () => void;
+};
+
+export default function LoadingError({ error, retry, ...rest }: Props) {
+  const { t } = useTranslation();
+  useEventListener("online", retry);
+
+  const message =
+    error instanceof OfflineError ? (
+      <>
+        <DisconnectedIcon color="currentColor" /> {t("You’re offline.")}
+      </>
+    ) : (
+      <>
+        <WarningIcon color="currentColor" /> {t("Sorry, an error occurred.")}
+      </>
+    );
+
+  return (
+    <Content {...rest}>
+      <Flex align="center" gap={4}>
+        {message}{" "}
+        <ButtonLink onClick={() => retry()}>{t("Click to retry")}…</ButtonLink>
+      </Flex>
+    </Content>
+  );
+}
+
+const Content = styled(Empty)`
+  padding: 8px 0;
+  white-space: nowrap;
+
+  ${ButtonLink} {
+    color: ${(props) => props.theme.textTertiary};
+
+    &:hover {
+      color: ${(props) => props.theme.textSecondary};
+      text-decoration: underline;
+    }
+  }
+`;

app/components/List/Item.tsx

@@ -69,7 +69,11 @@ const ListItem = (
   );
 };
 
-const Wrapper = styled.a<{ $small?: boolean; $border?: boolean; to?: string }>`
+const Wrapper = styled.a<{
+  $small?: boolean;
+  $border?: boolean;
+  to?: string;
+}>`
   display: flex;
   padding: ${(props) => (props.$border === false ? 0 : "8px 0")};
   margin: ${(props) =>
@@ -92,6 +96,7 @@ const Image = styled(Flex)`
   user-select: none;
   flex-shrink: 0;
   align-self: center;
+  color: ${(props) => props.theme.text};
 `;
 
 const Heading = styled.p<{ $small?: boolean }>`

app/components/List/Placeholder.tsx

@@ -3,19 +3,24 @@ import * as React from "react";
 import styled from "styled-components";
 import Fade from "~/components/Fade";
 import Flex from "~/components/Flex";
-import PlaceholderText from "~/components/PlaceholderText";
+import PlaceholderText, {
+  Props as PlaceholderTextProps,
+} from "~/components/PlaceholderText";
 
 type Props = {
   count?: number;
+  className?: string;
+  header?: PlaceholderTextProps;
+  body?: PlaceholderTextProps;
 };
 
-const ListPlaceHolder = ({ count }: Props) => {
+const ListPlaceHolder = ({ count, className, header, body }: Props) => {
   return (
     <Fade>
       {times(count || 2, (index) => (
-        <Item key={index} column auto>
-          <PlaceholderText header delay={0.2 * index} />
-          <PlaceholderText delay={0.2 * index} />
+        <Item key={index} className={className} column auto>
+          <PlaceholderText {...header} header delay={0.2 * index} />
+          <PlaceholderText {...body} delay={0.2 * index} />
         </Item>
       ))}
     </Fade>

app/components/LoadingIndicator/LoadingIndicatorBar.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import styled, { keyframes } from "styled-components";
+import { depths } from "@shared/styles";
 
 const LoadingIndicatorBar = () => {
   return (
@@ -17,7 +18,7 @@ const loadingFrame = keyframes`
 const Container = styled.div`
   position: fixed;
   top: 0;
-  z-index: ${(props) => props.theme.depths.loadingIndicatorBar};
+  z-index: ${depths.loadingIndicatorBar};
   width: 100%;
   animation: ${loadingFrame} 4s ease-in-out infinite;
   animation-delay: 250ms;

app/components/LocaleTime.tsx

@@ -2,7 +2,7 @@ import { format as formatDate, formatDistanceToNow } from "date-fns";
 import * as React from "react";
 import Tooltip from "~/components/Tooltip";
 import useUserLocale from "~/hooks/useUserLocale";
-import { dateLocale } from "~/utils/i18n";
+import { dateLocale, locales } from "~/utils/i18n";
 
 let callbacks: (() => void)[] = [];
 
@@ -26,7 +26,7 @@ type Props = {
   addSuffix?: boolean;
   shorten?: boolean;
   relative?: boolean;
-  format?: string;
+  format?: Partial<Record<keyof typeof locales, string>>;
 };
 
 const LocaleTime: React.FC<Props> = ({
@@ -38,7 +38,13 @@ const LocaleTime: React.FC<Props> = ({
   relative,
   tooltipDelay,
 }) => {
-  const userLocale = useUserLocale();
+  const userLocale: string = useUserLocale() || "";
+  const dateFormatLong = {
+    en_US: "MMMM do, yyyy h:mm a",
+    fr_FR: "'Le 'd MMMM yyyy 'à' H:mm",
+  };
+  const formatLocaleLong = dateFormatLong[userLocale] ?? "MMMM do, yyyy h:mm a";
+  const formatLocale = format?.[userLocale] ?? formatLocaleLong;
   const [_, setMinutesMounted] = React.useState(0); // eslint-disable-line @typescript-eslint/no-unused-vars
   const callback = React.useRef<() => void>();
 
@@ -66,17 +72,13 @@ const LocaleTime: React.FC<Props> = ({
       .replace("minute", "min");
   }
 
-  const tooltipContent = formatDate(
-    Date.parse(dateTime),
-    "MMMM do, yyyy h:mm a",
-    {
-      locale,
-    }
-  );
+  const tooltipContent = formatDate(Date.parse(dateTime), formatLocaleLong, {
+    locale,
+  });
   const content =
     relative !== false
       ? relativeContent
-      : formatDate(Date.parse(dateTime), format || "MMMM do, yyyy h:mm a", {
+      : formatDate(Date.parse(dateTime), formatLocale, {
           locale,
         });
 

app/components/Modal.tsx

@@ -4,8 +4,9 @@ import { transparentize } from "polished";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Dialog, DialogBackdrop, useDialogState } from "reakit/Dialog";
-import styled from "styled-components";
+import styled, { DefaultTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
+import { depths } from "@shared/styles";
 import Flex from "~/components/Flex";
 import NudeButton from "~/components/NudeButton";
 import Scrollable from "~/components/Scrollable";
@@ -66,6 +67,7 @@ const Modal: React.FC<Props> = ({
         <Backdrop $isCentered={isCentered} {...props}>
           <Dialog
             {...dialog}
+            aria-label={typeof title === "string" ? title : undefined}
             preventBodyScroll
             hideOnEsc
             hideOnClickOutside={!!isCentered}
@@ -74,18 +76,24 @@ const Modal: React.FC<Props> = ({
             {(props) =>
               isCentered && !isMobile ? (
                 <Small {...props}>
-                  <Centered onClick={(ev) => ev.stopPropagation()} column>
+                  <Centered
+                    onClick={(ev) => ev.stopPropagation()}
+                    column
+                    reverse
+                  >
+                    <SmallContent shadow>{children}</SmallContent>
                     <Header>
                       {title && (
                         <Text as="span" size="large">
                           {title}
                         </Text>
                       )}
-                      <NudeButton onClick={onRequestClose}>
-                        <CloseIcon color="currentColor" />
-                      </NudeButton>
+                      <Text as="span" size="large">
+                        <NudeButton onClick={onRequestClose}>
+                          <CloseIcon color="currentColor" />
+                        </NudeButton>
+                      </Text>
                     </Header>
-                    <SmallContent shadow>{children}</SmallContent>
                   </Centered>
                 </Small>
               ) : (
@@ -133,7 +141,7 @@ const Backdrop = styled(Flex)<{ $isCentered?: boolean }>`
     props.$isCentered
       ? props.theme.modalBackdrop
       : transparentize(0.25, props.theme.background)} !important;
-  z-index: ${(props) => props.theme.depths.modalOverlay};
+  z-index: ${depths.modalOverlay};
   transition: opacity 50ms ease-in-out;
   opacity: 0;
 
@@ -142,7 +150,12 @@ const Backdrop = styled(Flex)<{ $isCentered?: boolean }>`
   }
 `;
 
-const Fullscreen = styled.div<{ $nested: boolean }>`
+type FullscreenProps = {
+  $nested: boolean;
+  theme: DefaultTheme;
+};
+
+const Fullscreen = styled.div<FullscreenProps>`
   animation: ${fadeAndScaleIn} 250ms ease;
 
   position: absolute;
@@ -150,7 +163,7 @@ const Fullscreen = styled.div<{ $nested: boolean }>`
   left: 0;
   right: 0;
   bottom: 0;
-  z-index: ${(props) => props.theme.depths.modal};
+  z-index: ${depths.modal};
   display: flex;
   justify-content: center;
   align-items: flex-start;
@@ -159,7 +172,7 @@ const Fullscreen = styled.div<{ $nested: boolean }>`
   outline: none;
 
   ${breakpoint("tablet")`
-  ${(props: any) =>
+  ${(props: FullscreenProps) =>
     props.$nested &&
     `
       box-shadow: 0 -2px 10px ${props.theme.shadow};
@@ -240,7 +253,7 @@ const Small = styled.div`
   margin: auto auto;
   min-width: 350px;
   max-width: 30vw;
-  z-index: ${(props) => props.theme.depths.modal};
+  z-index: ${depths.modal};
   display: flex;
   justify-content: center;
   align-items: flex-start;
@@ -255,6 +268,11 @@ const Small = styled.div`
     &[aria-expanded="true"] {
       background: ${(props) => props.theme.sidebarControlHoverBackground};
     }
+    vertical-align: middle;
+  }
+
+  ${Header} {
+    align-items: start;
   }
 `;
 

app/components/NavLink.tsx

@@ -1,8 +1,15 @@
 import * as React from "react";
-import { NavLink, Route } from "react-router-dom";
+import { match, NavLink, Route } from "react-router-dom";
 
 type Props = React.ComponentProps<typeof NavLink> & {
-  children?: (match: any) => React.ReactNode;
+  children?: (
+    match:
+      | match<{
+          [x: string]: string | undefined;
+        }>
+      | boolean
+      | null
+  ) => React.ReactNode;
   exact?: boolean;
   activeStyle?: React.CSSProperties;
   to: string;
@@ -14,9 +21,11 @@ function NavLinkWithChildrenFunc(
 ) {
   return (
     <Route path={to} exact={exact}>
-      {({ match }) => (
+      {({ match, location }) => (
         <NavLink {...rest} to={to} exact={exact} ref={ref}>
-          {children ? children(match) : null}
+          {children
+            ? children(rest.isActive ? rest.isActive(match, location) : match)
+            : null}
         </NavLink>
       )}
     </Route>

app/components/PaginatedDocumentList.tsx

@@ -2,11 +2,12 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import Document from "~/models/Document";
 import DocumentListItem from "~/components/DocumentListItem";
+import Error from "~/components/List/Error";
 import PaginatedList from "~/components/PaginatedList";
 
 type Props = {
   documents: Document[];
-  fetch: (options: any) => Promise<void>;
+  fetch: (options: any) => Promise<Document[] | undefined>;
   options?: Record<string, any>;
   heading?: React.ReactNode;
   empty?: React.ReactNode;
@@ -40,7 +41,8 @@ const PaginatedDocumentList = React.memo<Props>(function PaginatedDocumentList({
       heading={heading}
       fetch={fetch}
       options={options}
-      renderItem={(item, _index, compositeProps) => (
+      renderError={(props) => <Error {...props} />}
+      renderItem={(item: Document, _index, compositeProps) => (
         <DocumentListItem
           key={item.id}
           document={item}

app/components/PaginatedEventList.tsx

@@ -8,7 +8,7 @@ import EventListItem from "./EventListItem";
 type Props = {
   events: Event[];
   document: Document;
-  fetch: (options: Record<string, any> | null | undefined) => Promise<void>;
+  fetch: (options: Record<string, any> | undefined) => Promise<Event[]>;
   options?: Record<string, any>;
   heading?: React.ReactNode;
   empty?: React.ReactNode;
@@ -29,7 +29,7 @@ const PaginatedEventList = React.memo<Props>(function PaginatedEventList({
       heading={heading}
       fetch={fetch}
       options={options}
-      renderItem={(item, index, compositeProps) => {
+      renderItem={(item: Event, index, compositeProps) => {
         return (
           <EventListItem
             key={item.id}

app/components/PaginatedList.tsx

@@ -13,27 +13,39 @@ import PlaceholderList from "~/components/List/Placeholder";
 import withStores from "~/components/withStores";
 import { dateToHeading } from "~/utils/dates";
 
-type Props = WithTranslation &
+export interface PaginatedItem {
+  id: string;
+  createdAt?: string;
+  updatedAt?: string;
+}
+
+type Props<T> = WithTranslation &
   RootStore & {
-    fetch?: (options: Record<string, any> | null | undefined) => Promise<any>;
+    fetch?: (
+      options: Record<string, any> | undefined
+    ) => Promise<T[] | undefined> | undefined;
     options?: Record<string, any>;
     heading?: React.ReactNode;
     empty?: React.ReactNode;
-    items: any[];
+    loading?: React.ReactElement;
+    items?: T[];
     renderItem: (
-      item: any,
+      item: T,
       index: number,
-      composite: CompositeStateReturn
+      compositeProps: CompositeStateReturn
     ) => React.ReactNode;
+    renderError?: (options: {
+      error: Error;
+      retry: () => void;
+    }) => React.ReactNode;
     renderHeading?: (name: React.ReactElement<any> | string) => React.ReactNode;
+    onEscape?: (ev: React.KeyboardEvent<HTMLDivElement>) => void;
   };
 
 @observer
-class PaginatedList extends React.Component<Props> {
-  isInitiallyLoaded = this.props.items.length > 0;
-
+class PaginatedList<T extends PaginatedItem> extends React.Component<Props<T>> {
   @observable
-  isLoaded = false;
+  error?: Error;
 
   @observable
   isFetchingMore = false;
@@ -41,6 +53,9 @@ class PaginatedList extends React.Component<Props> {
   @observable
   isFetching = false;
 
+  @observable
+  fetchCounter = 0;
+
   @observable
   renderCount: number = DEFAULT_PAGINATION_LIMIT;
 
@@ -54,7 +69,7 @@ class PaginatedList extends React.Component<Props> {
     this.fetchResults();
   }
 
-  componentDidUpdate(prevProps: Props) {
+  componentDidUpdate(prevProps: Props<T>) {
     if (
       prevProps.fetch !== this.props.fetch ||
       !isEqual(prevProps.options, this.props.options)
@@ -70,31 +85,41 @@ class PaginatedList extends React.Component<Props> {
     this.renderCount = DEFAULT_PAGINATION_LIMIT;
     this.isFetching = false;
     this.isFetchingMore = false;
-    this.isLoaded = false;
   };
 
+  @action
   fetchResults = async () => {
     if (!this.props.fetch) {
       return;
     }
     this.isFetching = true;
+    const counter = ++this.fetchCounter;
     const limit = DEFAULT_PAGINATION_LIMIT;
-    const results = await this.props.fetch({
-      limit,
-      offset: this.offset,
-      ...this.props.options,
-    });
+    this.error = undefined;
 
-    if (results && (results.length === 0 || results.length < limit)) {
-      this.allowLoadMore = false;
-    } else {
-      this.offset += limit;
+    try {
+      const results = await this.props.fetch({
+        limit,
+        offset: this.offset,
+        ...this.props.options,
+      });
+
+      if (results && (results.length === 0 || results.length < limit)) {
+        this.allowLoadMore = false;
+      } else {
+        this.offset += limit;
+      }
+
+      this.renderCount += limit;
+    } catch (err) {
+      this.error = err;
+    } finally {
+      // only the most recent fetch should end the loading state
+      if (counter >= this.fetchCounter) {
+        this.isFetching = false;
+        this.isFetchingMore = false;
+      }
     }
-
-    this.renderCount += limit;
-    this.isLoaded = true;
-    this.isFetching = false;
-    this.isFetchingMore = false;
   };
 
   @action
@@ -105,9 +130,9 @@ class PaginatedList extends React.Component<Props> {
     }
     // If there are already cached results that we haven't yet rendered because
     // of lazy rendering then show another page.
-    const leftToRender = this.props.items.length - this.renderCount;
+    const leftToRender = (this.props.items?.length ?? 0) - this.renderCount;
 
-    if (leftToRender > 1) {
+    if (leftToRender > 0) {
       this.renderCount += DEFAULT_PAGINATION_LIMIT;
     }
 
@@ -120,70 +145,86 @@ class PaginatedList extends React.Component<Props> {
   };
 
   render() {
-    const { items, heading, auth, empty, renderHeading } = this.props;
-    let previousHeading = "";
+    const {
+      items = [],
+      heading,
+      auth,
+      empty = null,
+      renderHeading,
+      renderError,
+      onEscape,
+    } = this.props;
+
     const showLoading =
-      this.isFetching && !this.isFetchingMore && !this.isInitiallyLoaded;
-    const showEmpty = !items.length && !showLoading;
-    const showList =
-      (this.isLoaded || this.isInitiallyLoaded) && !showLoading && !showEmpty;
-    return (
-      <>
-        {showEmpty && empty}
-        {showList && (
-          <>
-            {heading}
-            <ArrowKeyNavigation aria-label={this.props["aria-label"]}>
-              {(composite: CompositeStateReturn) =>
-                items.slice(0, this.renderCount).map((item, index) => {
-                  const children = this.props.renderItem(
-                    item,
-                    index,
-                    composite
-                  );
+      this.isFetching &&
+      !this.isFetchingMore &&
+      (!items?.length || this.fetchCounter === 0);
 
-                  // If there is no renderHeading method passed then no date
-                  // headings are rendered
-                  if (!renderHeading) {
-                    return children;
-                  }
-
-                  // Our models have standard date fields, updatedAt > createdAt.
-                  // Get what a heading would look like for this item
-                  const currentDate =
-                    item.updatedAt || item.createdAt || previousHeading;
-                  const currentHeading = dateToHeading(
-                    currentDate,
-                    this.props.t,
-                    auth.user?.language
-                  );
-
-                  // If the heading is different to any previous heading then we
-                  // should render it, otherwise the item can go under the previous
-                  // heading
-                  if (!previousHeading || currentHeading !== previousHeading) {
-                    previousHeading = currentHeading;
-                    return (
-                      <React.Fragment key={item.id}>
-                        {renderHeading(currentHeading)}
-                        {children}
-                      </React.Fragment>
-                    );
-                  }
-
-                  return children;
-                })
-              }
-            </ArrowKeyNavigation>
-            {this.allowLoadMore && (
-              <Waypoint key={this.renderCount} onEnter={this.loadMoreResults} />
-            )}
-          </>
-        )}
-        {showLoading && (
+    if (showLoading) {
+      return (
+        this.props.loading || (
           <DelayedMount>
             <PlaceholderList count={5} />
           </DelayedMount>
+        )
+      );
+    }
+
+    if (items?.length === 0) {
+      if (this.error && renderError) {
+        return renderError({ error: this.error, retry: this.fetchResults });
+      }
+
+      return empty;
+    }
+
+    return (
+      <>
+        {heading}
+        <ArrowKeyNavigation
+          aria-label={this.props["aria-label"]}
+          onEscape={onEscape}
+        >
+          {(composite: CompositeStateReturn) => {
+            let previousHeading = "";
+            return items.slice(0, this.renderCount).map((item, index) => {
+              const children = this.props.renderItem(item, index, composite);
+
+              // If there is no renderHeading method passed then no date
+              // headings are rendered
+              if (!renderHeading) {
+                return children;
+              }
+
+              // Our models have standard date fields, updatedAt > createdAt.
+              // Get what a heading would look like for this item
+              const currentDate =
+                item.updatedAt || item.createdAt || previousHeading;
+              const currentHeading = dateToHeading(
+                currentDate,
+                this.props.t,
+                auth.user?.language
+              );
+
+              // If the heading is different to any previous heading then we
+              // should render it, otherwise the item can go under the previous
+              // heading
+              if (!previousHeading || currentHeading !== previousHeading) {
+                previousHeading = currentHeading;
+                return (
+                  <React.Fragment key={item.id}>
+                    {renderHeading(currentHeading)}
+                    {children}
+                  </React.Fragment>
+                );
+              }
+
+              return children;
+            });
+          }}
+        </ArrowKeyNavigation>
+        {this.allowLoadMore && (
+          <Waypoint key={this.renderCount} onEnter={this.loadMoreResults} />
         )}
       </>
     );

app/components/PathToDocument.tsx

@@ -14,7 +14,7 @@ type Props = {
   collection: Collection | null | undefined;
   onSuccess?: () => void;
   style?: React.CSSProperties;
-  ref?: (arg0: React.ElementRef<"div"> | null | undefined) => void;
+  ref?: (element: React.ElementRef<"div"> | null | undefined) => void;
 };
 
 @observer

app/components/PlaceholderText.tsx

@@ -4,7 +4,7 @@ import { randomInteger } from "@shared/random";
 import Flex from "~/components/Flex";
 import { pulsate } from "~/styles/animations";
 
-type Props = {
+export type Props = {
   header?: boolean;
   height?: number;
   minWidth?: number;

app/components/Popover.tsx

@@ -1,40 +1,50 @@
 import * as React from "react";
 import { Dialog } from "reakit/Dialog";
-import { Popover as ReakitPopover } from "reakit/Popover";
+import { Popover as ReakitPopover, PopoverProps } from "reakit/Popover";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
+import { depths } from "@shared/styles";
 import useMobile from "~/hooks/useMobile";
 import { fadeAndScaleIn } from "~/styles/animations";
 
-type Props = {
-  tabIndex?: number;
+type Props = PopoverProps & {
+  children: React.ReactNode;
   width?: number;
+  shrink?: boolean;
+  tabIndex?: number;
 };
 
-const Popover: React.FC<Props> = ({ children, width = 380, ...rest }) => {
+const Popover: React.FC<Props> = ({
+  children,
+  shrink,
+  width = 380,
+  ...rest
+}) => {
   const isMobile = useMobile();
 
   if (isMobile) {
     return (
       <Dialog {...rest} modal>
-        <Contents>{children}</Contents>
+        <Contents $shrink={shrink}>{children}</Contents>
       </Dialog>
     );
   }
 
   return (
     <ReakitPopover {...rest}>
-      <Contents $width={width}>{children}</Contents>
+      <Contents $shrink={shrink} $width={width}>
+        {children}
+      </Contents>
     </ReakitPopover>
   );
 };
 
-const Contents = styled.div<{ $width?: number }>`
+const Contents = styled.div<{ $shrink?: boolean; $width?: number }>`
   animation: ${fadeAndScaleIn} 200ms ease;
   transform-origin: 75% 0;
   background: ${(props) => props.theme.menuBackground};
   border-radius: 6px;
-  padding: 12px 24px;
+  padding: ${(props) => (props.$shrink ? "6px 0" : "12px 24px")};
   max-height: 50vh;
   overflow-y: scroll;
   box-shadow: ${(props) => props.theme.menuShadow};
@@ -42,7 +52,7 @@ const Contents = styled.div<{ $width?: number }>`
 
   ${breakpoint("mobile", "tablet")`
     position: fixed;
-    z-index: ${(props: any) => props.theme.depths.menu};
+    z-index: ${depths.menu};
 
     // 50 is a magic number that positions us nicely under the top bar
     top: 50px;

app/components/Scrollable.tsx

@@ -3,16 +3,17 @@ import * as React from "react";
 import styled from "styled-components";
 import useWindowSize from "~/hooks/useWindowSize";
 
-type Props = {
+type Props = React.HTMLAttributes<HTMLDivElement> & {
   shadow?: boolean;
   topShadow?: boolean;
   bottomShadow?: boolean;
+  hiddenScrollbars?: boolean;
   flex?: boolean;
   children: React.ReactNode;
 };
 
 function Scrollable(
-  { shadow, topShadow, bottomShadow, flex, ...rest }: Props,
+  { shadow, topShadow, bottomShadow, hiddenScrollbars, flex, ...rest }: Props,
   ref: React.RefObject<HTMLDivElement>
 ) {
   const fallbackRef = React.useRef<HTMLDivElement>();
@@ -55,6 +56,7 @@ function Scrollable(
       ref={ref || fallbackRef}
       onScroll={updateShadows}
       $flex={flex}
+      $hiddenScrollbars={hiddenScrollbars}
       $topShadowVisible={topShadowVisible}
       $bottomShadowVisible={bottomShadowVisible}
       {...rest}
@@ -66,6 +68,7 @@ const Wrapper = styled.div<{
   $flex?: boolean;
   $topShadowVisible?: boolean;
   $bottomShadowVisible?: boolean;
+  $hiddenScrollbars?: boolean;
 }>`
   display: ${(props) => (props.$flex ? "flex" : "block")};
   flex-direction: column;
@@ -90,6 +93,17 @@ const Wrapper = styled.div<{
     return "none";
   }};
   transition: all 100ms ease-in-out;
+
+  ${(props) =>
+    props.$hiddenScrollbars &&
+    `
+    -ms-overflow-style: none;
+    overflow: -moz-scrollbars-none;
+    scrollbar-width: none;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  `}
 `;
 
 export default observer(React.forwardRef(Scrollable));

app/components/SearchListItem.tsx

@@ -0,0 +1,148 @@
+import { observer } from "mobx-react";
+import * as React from "react";
+import { Link } from "react-router-dom";
+import { CompositeItem } from "reakit/Composite";
+import styled, { css } from "styled-components";
+import breakpoint from "styled-components-breakpoint";
+import Document from "~/models/Document";
+import Highlight, { Mark } from "~/components/Highlight";
+import { hover } from "~/styles";
+
+type Props = {
+  document: Document;
+  highlight: string;
+  context: string | undefined;
+  showParentDocuments?: boolean;
+  showCollection?: boolean;
+  showPublished?: boolean;
+  shareId?: string;
+  onClick?: React.MouseEventHandler<HTMLAnchorElement>;
+};
+const SEARCH_RESULT_REGEX = /<b\b[^>]*>(.*?)<\/b>/gi;
+
+function replaceResultMarks(tag: string) {
+  // don't use SEARCH_RESULT_REGEX here as it causes
+  // an infinite loop to trigger a regex inside it's own callback
+  return tag.replace(/<b\b[^>]*>(.*?)<\/b>/gi, "$1");
+}
+
+function DocumentListItem(
+  props: Props,
+  ref: React.RefObject<HTMLAnchorElement>
+) {
+  const { document, highlight, context, shareId, ...rest } = props;
+
+  return (
+    <CompositeItem
+      as={DocumentLink}
+      ref={ref}
+      dir={document.dir}
+      to={{
+        pathname: shareId ? `/share/${shareId}${document.url}` : document.url,
+        state: {
+          title: document.titleWithDefault,
+        },
+      }}
+      {...rest}
+    >
+      <Content>
+        <Heading dir={document.dir}>
+          <Title
+            text={document.titleWithDefault}
+            highlight={highlight}
+            dir={document.dir}
+          />
+        </Heading>
+
+        {
+          <ResultContext
+            text={context}
+            highlight={highlight ? SEARCH_RESULT_REGEX : undefined}
+            processResult={replaceResultMarks}
+          />
+        }
+      </Content>
+    </CompositeItem>
+  );
+}
+
+const Content = styled.div`
+  flex-grow: 1;
+  flex-shrink: 1;
+  min-width: 0;
+`;
+
+const DocumentLink = styled(Link)<{
+  $isStarred?: boolean;
+  $menuOpen?: boolean;
+}>`
+  display: flex;
+  align-items: center;
+  padding: 6px 12px;
+  max-height: 50vh;
+
+  &:not(:last-child) {
+    margin-bottom: 4px;
+  }
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  ${breakpoint("tablet")`
+    width: auto;
+  `};
+
+  &:${hover},
+  &:active,
+  &:focus,
+  &:focus-within {
+    background: ${(props) => props.theme.listItemHoverBackground};
+  }
+
+  ${(props) =>
+    props.$menuOpen &&
+    css`
+      background: ${(props) => props.theme.listItemHoverBackground};
+    `}
+`;
+
+const Heading = styled.h4<{ rtl?: boolean }>`
+  display: flex;
+  justify-content: ${(props) => (props.rtl ? "flex-end" : "flex-start")};
+  align-items: center;
+  height: 18px;
+  margin-top: 0;
+  margin-bottom: 0.25em;
+  overflow: hidden;
+  white-space: nowrap;
+  color: ${(props) => props.theme.text};
+`;
+
+const Title = styled(Highlight)`
+  max-width: 90%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  ${Mark} {
+    padding: 0;
+  }
+`;
+
+const ResultContext = styled(Highlight)`
+  display: block;
+  color: ${(props) => props.theme.textTertiary};
+  font-size: 14px;
+  margin-top: -0.25em;
+  margin-bottom: 0.25em;
+
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  ${Mark} {
+    padding: 0;
+  }
+`;
+
+export default observer(React.forwardRef(DocumentListItem));

app/components/SearchPopover.tsx

@@ -0,0 +1,227 @@
+import { debounce } from "lodash";
+import { observer } from "mobx-react";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { usePopoverState, PopoverDisclosure } from "reakit/Popover";
+import styled from "styled-components";
+import { depths } from "@shared/styles";
+import Empty from "~/components/Empty";
+import { Outline } from "~/components/Input";
+import InputSearch from "~/components/InputSearch";
+import Placeholder from "~/components/List/Placeholder";
+import PaginatedList, { PaginatedItem } from "~/components/PaginatedList";
+import Popover from "~/components/Popover";
+import { id as bodyContentId } from "~/components/SkipNavContent";
+import useKeyDown from "~/hooks/useKeyDown";
+import useStores from "~/hooks/useStores";
+import { SearchResult } from "~/types";
+import SearchListItem from "./SearchListItem";
+
+type Props = { shareId: string };
+
+function SearchPopover({ shareId }: Props) {
+  const { t } = useTranslation();
+  const { documents } = useStores();
+  const focusRef = React.useRef<HTMLElement | null>(null);
+
+  const popover = usePopoverState({
+    placement: "bottom-start",
+    unstable_offset: [-24, 0],
+    modal: true,
+  });
+
+  const [query, setQuery] = React.useState("");
+  const searchResults = documents.searchResults(query);
+
+  const [cachedQuery, setCachedQuery] = React.useState(query);
+  const [cachedSearchResults, setCachedSearchResults] = React.useState<
+    PaginatedItem[] | undefined
+  >(searchResults);
+
+  React.useEffect(() => {
+    if (searchResults) {
+      setCachedQuery(query);
+      setCachedSearchResults(searchResults);
+      popover.show();
+    }
+  }, [searchResults, query, popover.show]);
+
+  const performSearch = React.useCallback(
+    async ({ query, ...options }) => {
+      if (query?.length > 0) {
+        return await documents.search(query, { shareId, ...options });
+      }
+      return undefined;
+    },
+    [documents, shareId]
+  );
+
+  const handleSearchInputChange = React.useMemo(
+    () =>
+      debounce(async (event: React.ChangeEvent<HTMLInputElement>) => {
+        const { value } = event.target;
+        setQuery(value.trim());
+
+        // covers edge case: user manually dismisses popover then
+        // quickly edits input resulting in no change in query
+        // the useEffect that normally shows the popover will miss it
+        if (value === cachedQuery) {
+          popover.show();
+        }
+
+        if (!value.length) {
+          popover.hide();
+        }
+      }, 300),
+    [popover, cachedQuery]
+  );
+
+  const searchInputRef = popover.unstable_referenceRef as React.RefObject<
+    HTMLInputElement
+  >;
+
+  const firstSearchItem = React.useRef<HTMLAnchorElement>(null);
+
+  const handleEscapeList = React.useCallback(
+    () => searchInputRef?.current?.focus(),
+    [searchInputRef]
+  );
+
+  const handleSearchInputFocus = React.useCallback(() => {
+    focusRef.current = searchInputRef.current;
+  }, []);
+
+  const handleKeyDown = React.useCallback(
+    (ev: React.KeyboardEvent<HTMLInputElement>) => {
+      if (ev.key === "Enter") {
+        if (searchResults) {
+          popover.show();
+        }
+      }
+
+      if (ev.key === "ArrowDown" && !ev.shiftKey) {
+        if (ev.currentTarget.value.length) {
+          if (
+            ev.currentTarget.value.length === ev.currentTarget.selectionStart
+          ) {
+            popover.show();
+          }
+          firstSearchItem.current?.focus();
+        }
+      }
+
+      if (ev.key === "ArrowUp") {
+        if (popover.visible) {
+          popover.hide();
+          if (!ev.shiftKey) {
+            ev.preventDefault();
+          }
+        }
+
+        if (ev.currentTarget.value) {
+          if (ev.currentTarget.selectionEnd === 0) {
+            ev.currentTarget.selectionStart = 0;
+            ev.currentTarget.selectionEnd = ev.currentTarget.value.length;
+            ev.preventDefault();
+          }
+        }
+      }
+
+      if (ev.key === "Escape") {
+        if (popover.visible) {
+          popover.hide();
+          ev.preventDefault();
+        }
+      }
+    },
+    [popover, searchResults]
+  );
+
+  const handleSearchItemClick = React.useCallback(() => {
+    popover.hide();
+    if (searchInputRef.current) {
+      searchInputRef.current.value = "";
+      focusRef.current = document.getElementById(bodyContentId);
+    }
+  }, [popover.hide]);
+
+  useKeyDown("/", (ev) => {
+    if (
+      searchInputRef.current &&
+      searchInputRef.current !== document.activeElement
+    ) {
+      searchInputRef.current.focus();
+      ev.preventDefault();
+    }
+  });
+
+  return (
+    <>
+      <PopoverDisclosure {...popover}>
+        {(props) => {
+          // props assumes the disclosure is a button, but we want a type-ahead
+          // so we take the aria props, and ref and ignore the event handlers
+          return (
+            <StyledInputSearch
+              aria-controls={props["aria-controls"]}
+              aria-expanded={props["aria-expanded"]}
+              aria-haspopup={props["aria-haspopup"]}
+              ref={props.ref}
+              onChange={handleSearchInputChange}
+              onFocus={handleSearchInputFocus}
+              onKeyDown={handleKeyDown}
+            />
+          );
+        }}
+      </PopoverDisclosure>
+      <Popover
+        {...popover}
+        aria-label={t("Results")}
+        unstable_autoFocusOnShow={false}
+        unstable_finalFocusRef={focusRef}
+        style={{ zIndex: depths.sidebar + 1 }}
+        shrink
+      >
+        <PaginatedList
+          options={{ query, snippetMinWords: 10, snippetMaxWords: 11 }}
+          items={cachedSearchResults}
+          fetch={performSearch}
+          onEscape={handleEscapeList}
+          empty={
+            <NoResults>{t("No results for {{query}}", { query })}</NoResults>
+          }
+          loading={<PlaceholderList count={3} header={{ height: 20 }} />}
+          renderItem={(item: SearchResult, index, compositeProps) => (
+            <SearchListItem
+              key={item.document.id}
+              shareId={shareId}
+              ref={index === 0 ? firstSearchItem : undefined}
+              document={item.document}
+              context={item.context}
+              highlight={cachedQuery}
+              onClick={handleSearchItemClick}
+              {...compositeProps}
+            />
+          )}
+        />
+      </Popover>
+    </>
+  );
+}
+
+const NoResults = styled(Empty)`
+  padding: 0 12px;
+  margin: 6px 0;
+`;
+
+const PlaceholderList = styled(Placeholder)`
+  padding: 6px 12px;
+`;
+
+const StyledInputSearch = styled(InputSearch)`
+  ${Outline} {
+    border-radius: 16px;
+  }
+`;
+
+export default observer(SearchPopover);

app/components/Sidebar/App.tsx

@@ -10,6 +10,7 @@ import Scrollable from "~/components/Scrollable";
 import Text from "~/components/Text";
 import { inviteUser } from "~/actions/definitions/users";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
+import useCurrentUser from "~/hooks/useCurrentUser";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
 import OrganizationMenu from "~/menus/OrganizationMenu";
@@ -34,12 +35,15 @@ function AppSidebar() {
   const { t } = useTranslation();
   const { documents } = useStores();
   const team = useCurrentTeam();
-  const can = usePolicy(team.id);
+  const user = useCurrentUser();
+  const can = usePolicy(team);
 
   React.useEffect(() => {
-    documents.fetchDrafts();
-    documents.fetchTemplates();
-  }, [documents]);
+    if (!user.isViewer) {
+      documents.fetchDrafts();
+      documents.fetchTemplates();
+    }
+  }, [documents, user.isViewer]);
 
   const [dndArea, setDndArea] = React.useState();
   const handleSidebarRef = React.useCallback((node) => setDndArea(node), []);

app/components/Sidebar/Settings.tsx

@@ -8,7 +8,7 @@ import styled from "styled-components";
 import Flex from "~/components/Flex";
 import Scrollable from "~/components/Scrollable";
 import useAuthorizedSettingsConfig from "~/hooks/useAuthorizedSettingsConfig";
-import isHosted from "~/utils/isHosted";
+import isCloudHosted from "~/utils/isCloudHosted";
 import Sidebar from "./Sidebar";
 import Header from "./components/Header";
 import Section from "./components/Section";
@@ -39,20 +39,21 @@ function SettingsSidebar() {
         <Scrollable shadow>
           {Object.keys(groupedConfig).map((header) => (
             <Section key={header}>
-              <Header>{header}</Header>
-              {groupedConfig[header].map((item) => (
-                <SidebarLink
-                  key={item.path}
-                  to={item.path}
-                  icon={<item.icon color="currentColor" />}
-                  label={item.name}
-                />
-              ))}
+              <Header title={header}>
+                {groupedConfig[header].map((item) => (
+                  <SidebarLink
+                    key={item.path}
+                    to={item.path}
+                    icon={<item.icon color="currentColor" />}
+                    label={item.name}
+                  />
+                ))}
+              </Header>
             </Section>
           ))}
-          {!isHosted && (
+          {!isCloudHosted && (
             <Section>
-              <Header>{t("Installation")}</Header>
+              <Header title={t("Installation")} />
               <Version />
             </Section>
           )}

app/components/Sidebar/Shared.tsx

@@ -2,6 +2,7 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import styled from "styled-components";
 import Scrollable from "~/components/Scrollable";
+import SearchPopover from "~/components/SearchPopover";
 import useStores from "~/hooks/useStores";
 import { NavigationNode } from "~/types";
 import Sidebar from "./Sidebar";
@@ -19,6 +20,9 @@ function SharedSidebar({ rootNode, shareId }: Props) {
   return (
     <Sidebar>
       <ScrollContainer flex>
+        <TopSection>
+          <SearchPopover shareId={shareId} />
+        </TopSection>
         <Section>
           <DocumentLink
             index={0}
@@ -38,4 +42,12 @@ const ScrollContainer = styled(Scrollable)`
   padding-bottom: 16px;
 `;
 
+const TopSection = styled(Section)`
+  // this weird looking && increases the specificity of the style rule
+  && {
+    margin-top: 16px;
+    margin-bottom: 16px;
+  }
+`;
+
 export default observer(SharedSidebar);

app/components/Sidebar/Sidebar.tsx

@@ -5,6 +5,7 @@ import { Portal } from "react-portal";
 import { useLocation } from "react-router-dom";
 import styled, { useTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
+import { depths } from "@shared/styles";
 import Flex from "~/components/Flex";
 import useMenuContext from "~/hooks/useMenuContext";
 import usePrevious from "~/hooks/usePrevious";
@@ -64,8 +65,7 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(
     const handleStopDrag = React.useCallback(() => {
       setResizing(false);
 
-      if (document.activeElement) {
-        // @ts-expect-error ts-migrate(2339) FIXME: Property 'blur' does not exist on type 'Element'.
+      if (document.activeElement instanceof HTMLElement) {
         document.activeElement.blur();
       }
 
@@ -224,16 +224,18 @@ const Backdrop = styled.a`
   bottom: 0;
   right: 0;
   cursor: default;
-  z-index: ${(props) => props.theme.depths.sidebar - 1};
+  z-index: ${depths.sidebar - 1};
   background: ${(props) => props.theme.backdrop};
 `;
 
-const Container = styled(Flex)<{
+type ContainerProps = {
   $mobileSidebarVisible: boolean;
   $isAnimating: boolean;
   $isSmallerThanMinimum: boolean;
   $collapsed: boolean;
-}>`
+};
+
+const Container = styled(Flex)<ContainerProps>`
   position: fixed;
   top: 0;
   bottom: 0;
@@ -241,12 +243,12 @@ const Container = styled(Flex)<{
   background: ${(props) => props.theme.sidebarBackground};
   transition: box-shadow 100ms ease-in-out, transform 100ms ease-out,
     ${(props) => props.theme.backgroundTransition}
-      ${(props: any) =>
+      ${(props: ContainerProps) =>
         props.$isAnimating ? `,width ${ANIMATION_MS}ms ease-out` : ""};
   transform: translateX(
     ${(props) => (props.$mobileSidebarVisible ? 0 : "-100%")}
   );
-  z-index: ${(props) => props.theme.depths.sidebar};
+  z-index: ${depths.sidebar};
   max-width: 70%;
   min-width: 280px;
 
@@ -262,13 +264,13 @@ const Container = styled(Flex)<{
   ${breakpoint("tablet")`
     margin: 0;
     min-width: 0;
-    transform: translateX(${(props: any) =>
+    transform: translateX(${(props: ContainerProps) =>
       props.$collapsed ? "calc(-100% + 16px)" : 0});
 
     &:hover,
     &:focus-within {
       transform: none;
-      box-shadow: ${(props: any) =>
+      box-shadow: ${(props: ContainerProps) =>
         props.$collapsed
           ? "rgba(0, 0, 0, 0.2) 1px 0 4px"
           : props.$isSmallerThanMinimum
@@ -285,7 +287,7 @@ const Container = styled(Flex)<{
     }
 
     &:not(:hover):not(:focus-within) > div {
-      opacity: ${(props: any) => (props.$collapsed ? "0" : "1")};
+      opacity: ${(props: ContainerProps) => (props.$collapsed ? "0" : "1")};
       transition: opacity 100ms ease-in-out;
     }
   `};

app/components/Sidebar/components/CollectionLink.tsx

@@ -44,7 +44,7 @@ const CollectionLink: React.FC<Props> = ({
   const { dialogs, documents, collections } = useStores();
   const [menuOpen, handleMenuOpen, handleMenuClose] = useBoolean();
   const [isEditing, setIsEditing] = React.useState(false);
-  const canUpdate = usePolicy(collection.id).update;
+  const canUpdate = usePolicy(collection).update;
   const { t } = useTranslation();
   const history = useHistory();
   const inStarredSection = useStarredContext();
@@ -54,7 +54,7 @@ const CollectionLink: React.FC<Props> = ({
       await collection.save({
         name,
       });
-      history.push(collection.url);
+      history.replace(collection.url, history.location.state);
     },
     [collection, history]
   );

app/components/Sidebar/components/CollectionLinkChildren.tsx

@@ -25,7 +25,7 @@ function CollectionLinkChildren({
   expanded,
   prefetchDocument,
 }: Props) {
-  const can = usePolicy(collection.id);
+  const can = usePolicy(collection);
   const { showToast } = useToasts();
   const manualSort = collection.sort.field === "index";
   const { documents } = useStores();
@@ -37,7 +37,7 @@ function CollectionLinkChildren({
   const [{ isOverReorder, isDraggingAnyDocument }, dropToReorder] = useDrop({
     accept: "document",
     drop: (item: DragObject) => {
-      if (!manualSort) {
+      if (!manualSort && item.collectionId === collection?.id) {
         showToast(
           t(
             "You can't reorder documents in an alphabetically sorted collection"

app/components/Sidebar/components/Collections.tsx

@@ -3,12 +3,13 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { useDrop } from "react-dnd";
 import { useTranslation } from "react-i18next";
+import styled from "styled-components";
 import Collection from "~/models/Collection";
-import Fade from "~/components/Fade";
 import Flex from "~/components/Flex";
+import Error from "~/components/List/Error";
+import PaginatedList from "~/components/PaginatedList";
 import { createCollection } from "~/actions/definitions/collections";
 import useStores from "~/hooks/useStores";
-import useToasts from "~/hooks/useToasts";
 import DraggableCollectionLink from "./DraggableCollectionLink";
 import DropCursor from "./DropCursor";
 import Header from "./Header";
@@ -18,40 +19,10 @@ import SidebarAction from "./SidebarAction";
 import { DragObject } from "./SidebarLink";
 
 function Collections() {
-  const [isFetching, setFetching] = React.useState(false);
-  const [fetchError, setFetchError] = React.useState();
   const { documents, collections } = useStores();
-  const { showToast } = useToasts();
-  const [expanded, setExpanded] = React.useState(true);
-  const isPreloaded = !!collections.orderedData.length;
   const { t } = useTranslation();
   const orderedCollections = collections.orderedData;
 
-  React.useEffect(() => {
-    async function load() {
-      if (!collections.isLoaded && !isFetching && !fetchError) {
-        try {
-          setFetching(true);
-          await collections.fetchPage({
-            limit: 100,
-          });
-        } catch (error) {
-          showToast(
-            t("Collections could not be loaded, please reload the app"),
-            {
-              type: "error",
-            }
-          );
-          setFetchError(error);
-        } finally {
-          setFetching(false);
-        }
-      }
-    }
-
-    load();
-  }, [collections, isFetching, showToast, fetchError, t]);
-
   const [
     { isCollectionDropping, isDraggingAnyCollection },
     dropToReorderCollection,
@@ -72,47 +43,46 @@ function Collections() {
     }),
   });
 
-  const content = (
-    <>
-      {isDraggingAnyCollection && (
-        <DropCursor
-          isActiveDrop={isCollectionDropping}
-          innerRef={dropToReorderCollection}
-          position="top"
-        />
-      )}
-      {orderedCollections.map((collection: Collection, index: number) => (
-        <DraggableCollectionLink
-          key={collection.id}
-          collection={collection}
-          activeDocument={documents.active}
-          prefetchDocument={documents.prefetchDocument}
-          belowCollection={orderedCollections[index + 1]}
-        />
-      ))}
-      <SidebarAction action={createCollection} depth={0} />
-    </>
-  );
-
-  if (!collections.isLoaded || fetchError) {
-    return (
-      <Flex column>
-        <Header>{t("Collections")}</Header>
-        <PlaceholderCollections />
-      </Flex>
-    );
-  }
-
   return (
     <Flex column>
-      <Header onClick={() => setExpanded((prev) => !prev)} expanded={expanded}>
-        {t("Collections")}
+      <Header id="collections" title={t("Collections")}>
+        <Relative>
+          <PaginatedList
+            aria-label={t("Collections")}
+            items={collections.orderedData}
+            fetch={collections.fetchPage}
+            options={{ limit: 100 }}
+            loading={<PlaceholderCollections />}
+            heading={
+              isDraggingAnyCollection ? (
+                <DropCursor
+                  isActiveDrop={isCollectionDropping}
+                  innerRef={dropToReorderCollection}
+                  position="top"
+                />
+              ) : undefined
+            }
+            renderError={(props) => <StyledError {...props} />}
+            renderItem={(item: Collection, index) => (
+              <DraggableCollectionLink
+                key={item.id}
+                collection={item}
+                activeDocument={documents.active}
+                prefetchDocument={documents.prefetchDocument}
+                belowCollection={orderedCollections[index + 1]}
+              />
+            )}
+          />
+          <SidebarAction action={createCollection} depth={0} />
+        </Relative>
       </Header>
-      {expanded && (
-        <Relative>{isPreloaded ? content : <Fade>{content}</Fade>}</Relative>
-      )}
     </Flex>
   );
 }
 
+const StyledError = styled(Error)`
+  font-size: 15px;
+  padding: 0 8px;
+`;
+
 export default observer(Collections);

app/components/Sidebar/components/DocumentLink.tsx

@@ -6,8 +6,8 @@ import { useDrag, useDrop } from "react-dnd";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
-import { MAX_TITLE_LENGTH } from "@shared/constants";
 import { sortNavigationNodes } from "@shared/utils/collections";
+import { DocumentValidation } from "@shared/validations";
 import Collection from "~/models/Collection";
 import Document from "~/models/Document";
 import Fade from "~/components/Fade";
@@ -148,7 +148,7 @@ function InnerDocumentLink(
       collectionId: collection?.id || "",
     }),
     collect: (monitor) => ({
-      isDragging: !!monitor.isDragging(),
+      isDragging: monitor.isDragging(),
     }),
     canDrag: () => {
       return (
@@ -213,7 +213,7 @@ function InnerDocumentLink(
       }
     },
     collect: (monitor) => ({
-      isOverReparent: !!monitor.isOver({
+      isOverReparent: monitor.isOver({
         shallow: true,
       }),
       canDropToReparent: monitor.canDrop(),
@@ -252,25 +252,24 @@ function InnerDocumentLink(
       documents.move(item.id, collection.id, parentId, index + 1);
     },
     collect: (monitor) => ({
-      isOverReorder: !!monitor.isOver(),
-      isDraggingAnyDocument: !!monitor.canDrop(),
+      isOverReorder: monitor.isOver(),
+      isDraggingAnyDocument: monitor.canDrop(),
     }),
   });
 
   const nodeChildren = React.useMemo(() => {
-    if (
-      collection &&
+    const insertDraftDocument =
       activeDocument?.isDraft &&
       activeDocument?.isActive &&
-      activeDocument?.parentDocumentId === node.id
-    ) {
-      return sortNavigationNodes(
-        [activeDocument?.asNavigationNode, ...node.children],
-        collection.sort
-      );
-    }
+      activeDocument?.parentDocumentId === node.id;
 
-    return node.children;
+    return collection && insertDraftDocument
+      ? sortNavigationNodes(
+          [activeDocument?.asNavigationNode, ...node.children],
+          collection.sort,
+          false
+        )
+      : node.children;
   }, [
     activeDocument?.isActive,
     activeDocument?.isDraft,
@@ -320,7 +319,7 @@ function InnerDocumentLink(
                     onSubmit={handleTitleChange}
                     onEditing={handleTitleEditing}
                     canUpdate={canUpdate}
-                    maxLength={MAX_TITLE_LENGTH}
+                    maxLength={DocumentValidation.maxTitleLength}
                   />
                 }
                 isActive={(match, location: Location<{ starred?: boolean }>) =>

app/components/Sidebar/components/DraggableCollectionLink.tsx

@@ -13,7 +13,6 @@ import CollectionLinkChildren from "./CollectionLinkChildren";
 import DropCursor from "./DropCursor";
 import Relative from "./Relative";
 import { DragObject } from "./SidebarLink";
-import { useStarredContext } from "./StarredContext";
 
 type Props = {
   collection: Collection;
@@ -37,12 +36,10 @@ function DraggableCollectionLink({
 }: Props) {
   const locationStateStarred = useLocationStateStarred();
   const { ui, collections } = useStores();
-  const inStarredSection = useStarredContext();
   const [expanded, setExpanded] = React.useState(
-    collection.id === ui.activeCollectionId &&
-      locationStateStarred === inStarredSection
+    collection.id === ui.activeCollectionId && !locationStateStarred
   );
-  const can = usePolicy(collection.id);
+  const can = usePolicy(collection);
   const belowCollectionIndex = belowCollection ? belowCollection.index : null;
 
   // Drop to reorder collection
@@ -88,18 +85,10 @@ function DraggableCollectionLink({
   // If the current collection is active and relevant to the sidebar section we
   // are in then expand it automatically
   React.useEffect(() => {
-    if (
-      collection.id === ui.activeCollectionId &&
-      locationStateStarred === inStarredSection
-    ) {
+    if (collection.id === ui.activeCollectionId && !locationStateStarred) {
       setExpanded(true);
     }
-  }, [
-    collection.id,
-    ui.activeCollectionId,
-    locationStateStarred,
-    inStarredSection,
-  ]);
+  }, [collection.id, ui.activeCollectionId, locationStateStarred]);
 
   const handleDisclosureClick = React.useCallback((ev) => {
     ev.preventDefault();

app/components/Sidebar/components/Header.tsx

@@ -1,25 +1,65 @@
 import { CollapsedIcon } from "outline-icons";
 import * as React from "react";
-import styled from "styled-components";
+import styled, { keyframes } from "styled-components";
+import usePersistedState from "~/hooks/usePersistedState";
 
 type Props = {
-  onClick?: React.MouseEventHandler;
-  expanded?: boolean;
+  /** Unique header id – if passed the header will become toggleable */
+  id?: string;
+  title: React.ReactNode;
 };
 
-export const Header: React.FC<Props> = ({ onClick, expanded, children }) => {
+/**
+ * Toggleable sidebar header
+ */
+export const Header: React.FC<Props> = ({ id, title, children }) => {
+  const [firstRender, setFirstRender] = React.useState(true);
+  const [expanded, setExpanded] = usePersistedState(
+    `sidebar-header-${id}`,
+    true
+  );
+
+  React.useEffect(() => {
+    if (!expanded) {
+      setFirstRender(false);
+    }
+  }, [expanded]);
+
+  const handleClick = React.useCallback(() => {
+    setExpanded(!expanded);
+  }, [expanded, setExpanded]);
+
   return (
-    <H3>
-      <Button onClick={onClick} disabled={!onClick}>
-        {children}
-        {onClick && (
-          <Disclosure expanded={expanded} color="currentColor" size={20} />
-        )}
-      </Button>
-    </H3>
+    <>
+      <H3>
+        <Button onClick={handleClick} disabled={!id}>
+          {title}
+          {id && (
+            <Disclosure expanded={expanded} color="currentColor" size={20} />
+          )}
+        </Button>
+      </H3>
+      {expanded && (firstRender ? children : <Fade>{children}</Fade>)}
+    </>
   );
 };
 
+export const fadeAndSlideDown = keyframes`
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0px);
+  }
+`;
+
+const Fade = styled.span`
+  animation: ${fadeAndSlideDown} 100ms ease-in-out;
+`;
+
 const Button = styled.button`
   display: inline-flex;
   align-items: center;

app/components/Sidebar/components/NavLink.tsx

@@ -2,7 +2,7 @@
 // This file is pulled almost 100% from react-router with the addition of one
 // thing, automatic scroll to the active link. It's worth the copy paste because
 // it avoids recalculating the link match again.
-import { Location, createLocation } from "history";
+import { Location, createLocation, LocationDescriptor } from "history";
 import * as React from "react";
 import {
   __RouterContext as RouterContext,
@@ -13,12 +13,12 @@ import { Link } from "react-router-dom";
 import scrollIntoView from "smooth-scroll-into-view-if-needed";
 
 const resolveToLocation = (
-  to: string | Record<string, any>,
+  to: LocationDescriptor | ((location: Location) => LocationDescriptor),
   currentLocation: Location
 ) => (typeof to === "function" ? to(currentLocation) : to);
 
 const normalizeToLocation = (
-  to: string | Record<string, any>,
+  to: LocationDescriptor,
   currentLocation: Location
 ) => {
   return typeof to === "string"
@@ -30,17 +30,15 @@ const joinClassnames = (...classnames: (string | undefined)[]) => {
   return classnames.filter((i) => i).join(" ");
 };
 
-export type Props = React.HTMLAttributes<HTMLAnchorElement> & {
+export type Props = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
   activeClassName?: string;
   activeStyle?: React.CSSProperties;
-  className?: string;
   scrollIntoViewIfNeeded?: boolean;
   exact?: boolean;
   isActive?: (match: match | null, location: Location) => boolean;
   location?: Location;
   strict?: boolean;
-  style?: React.CSSProperties;
-  to: string | Record<string, any>;
+  to: LocationDescriptor;
 };
 
 /**

app/components/Sidebar/components/ResizeBorder.ts

@@ -4,9 +4,24 @@ const ResizeBorder = styled.div`
   position: absolute;
   top: 0;
   bottom: 0;
-  right: -6px;
-  width: 12px;
+  right: -1px;
+  width: 2px;
   cursor: col-resize;
+
+  &:hover {
+    transition-delay: 500ms;
+    transition: background 250ms ease-in-out;
+    background: ${(props) => props.theme.sidebarActiveBackground};
+  }
+
+  &:after {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: -4px;
+    width: 10px;
+  }
 `;
 
 export default ResizeBorder;

app/components/Sidebar/components/SidebarLink.tsx

@@ -1,3 +1,4 @@
+import { LocationDescriptor } from "history";
 import * as React from "react";
 import styled, { useTheme, css } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
@@ -14,9 +15,8 @@ export type DragObject = NavigationNode & {
 };
 
 type Props = Omit<NavLinkProps, "to"> & {
-  to?: string | Record<string, any>;
-  href?: string | Record<string, any>;
-  innerRef?: (arg0: HTMLElement | null | undefined) => void;
+  to?: LocationDescriptor;
+  innerRef?: (ref: HTMLElement | null | undefined) => void;
   onClick?: React.MouseEventHandler<HTMLAnchorElement>;
   onMouseEnter?: React.MouseEventHandler<HTMLAnchorElement>;
   onDisclosureClick?: React.MouseEventHandler<HTMLButtonElement>;
@@ -24,6 +24,7 @@ type Props = Omit<NavLinkProps, "to"> & {
   label?: React.ReactNode;
   menu?: React.ReactNode;
   showActions?: boolean;
+  disabled?: boolean;
   active?: boolean;
   /* If set, a disclosure will be rendered to the left of any icon */
   expanded?: boolean;
@@ -55,6 +56,7 @@ function SidebarLink(
     className,
     expanded,
     onDisclosureClick,
+    disabled,
     ...rest
   }: Props,
   ref: React.RefObject<HTMLAnchorElement>
@@ -82,6 +84,7 @@ function SidebarLink(
       <Link
         $isActiveDrop={isActiveDrop}
         $isDraft={isDraft}
+        $disabled={disabled}
         activeStyle={isActiveDrop ? activeDropStyle : activeStyle}
         style={active ? activeStyle : style}
         onClick={onClick}
@@ -158,7 +161,11 @@ const Actions = styled(EventBoundary)<{ showActions?: boolean }>`
   }
 `;
 
-const Link = styled(NavLink)<{ $isActiveDrop?: boolean; $isDraft?: boolean }>`
+const Link = styled(NavLink)<{
+  $isActiveDrop?: boolean;
+  $isDraft?: boolean;
+  $disabled?: boolean;
+}>`
   display: flex;
   position: relative;
   text-overflow: ellipsis;
@@ -174,6 +181,13 @@ const Link = styled(NavLink)<{ $isActiveDrop?: boolean; $isDraft?: boolean }>`
   cursor: pointer;
   overflow: hidden;
 
+  ${(props) =>
+    props.$disabled &&
+    css`
+      pointer-events: none;
+      opacity: 0.75;
+    `}
+
   ${(props) =>
     props.$isDraft &&
     css`