More email styling

.babelrc

@@ -1,7 +1,7 @@
 {
   "presets": [
     "@babel/preset-react",
-    "@babel/preset-typescript",
+    "@babel/preset-flow",
     [
       "@babel/preset-env",
       {
@@ -25,25 +25,5 @@
     "@babel/plugin-transform-destructuring",
     "@babel/plugin-transform-regenerator",
     "transform-class-properties"
-  ],
-  "env": {
-    "production": {
-      "plugins": [
-        [
-          "styled-components",
-          {
-            "displayName": false
-          }
-        ]
-      ],
-      "ignore": [
-        "**/*.test.ts"
-      ]
-    },
-    "development": {
-      "ignore": [
-        "**/*.test.ts"
-      ]
-    }
-  }
+  ]
 }

.circleci/config.yml

@@ -1,161 +1,43 @@
-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
-
+version: 2
 jobs:
   build:
-    <<: *defaults
+    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
     steps:
       - checkout
       - restore_cache:
           key: dependency-cache-{{ checksum "package.json" }}
       - run:
           name: install-deps
-          command: yarn install --frozen-lockfile
+          command: yarn install --pure-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-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: flow
+          command: yarn flow check --max-workers 4
       - run:
           name: test
-          command: yarn test:server
-  bundle-size:
-    <<: *defaults
-    steps:
-      - checkout
-      - restore_cache:
-          key: dependency-cache-{{ checksum "package.json" }}
+          command: yarn test
       - run:
           name: build-webpack
-          command: yarn build:webpack
-  build-image:
-    executor: docker-publisher
-    steps:
-      - checkout
-      - setup_remote_docker:
-          version: 20.10.6
-      - run:
-          name: Install Docker buildx
-          command: |
-            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: Enable Docker buildx
-          command: export DOCKER_CLI_EXPERIMENTAL=enabled
-      - run:
-          name: Initialize Docker buildx
-          command: |
-            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
-  all:
-    jobs:
-      - build
-      - lint:
-          requires:
-            - build
-      - test-server:
-          requires:
-            - build
-      - test-app:
-          requires:
-            - build
-      - types:
-          requires:
-            - build
-      - bundle-size:
-          requires:
-            - test-app
-            - test-server
-
-  build-docker:
-    jobs:
-      - build-image:
-          filters:
-            tags:
-              only: /^v.*/
-            branches:
-              ignore: /.*/
+          command: yarn build:webpack

.dockerignore

@@ -6,12 +6,14 @@ __mocks__
 .DS_Store
 .env*
 .eslint*
+.flowconfig
 .log
 Makefile
 Procfile
 app.json
-crowdin.yml
 build
 docker-compose.yml
 fakes3
+flow-typed
 node_modules
+setupJest.js

.env.sample

@@ -1,43 +1,37 @@
+# 👋 Welcome, we're glad you're setting up an installation of Outline. Copy this 
+# file to .env or set the variables in your local environment manually. For 
+# development with docker this should mostly work out  of the box other than 
+# setting the Slack keys and the SECRET_KEY.
+
+
+
+
 # –––––––––––––––– REQUIRED ––––––––––––––––
 
 # 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
 
-# Generate a unique random key. The format is not important but you could still use
+# Generate a unique random key. The format is not important but you could still use 
 # `openssl rand -hex 32` in your terminal to produce this.
 UTILS_SECRET=generate_a_new_key
 
 # For production point these at your databases, in development the default
 # should work out of the box.
-DATABASE_URL=postgres://user:pass@localhost:5432/outline
-DATABASE_URL_TEST=postgres://user:pass@localhost:5432/outline-test
-DATABASE_CONNECTION_POOL_MIN=
-DATABASE_CONNECTION_POOL_MAX=
+DATABASE_URL=postgres://user:pass@localhost:5532/outline
+DATABASE_URL_TEST=postgres://user:pass@localhost:5532/outline-test
 # 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==
+REDIS_URL=redis://localhost:6479
 
 # URL should point to the fully qualified, publicly accessible URL. If using a
 # proxy the port in URL and PORT may be different.
 URL=http://localhost:3000
 PORT=3000
 
-# See [documentation](docs/SERVICES.md) on running a separate collaboration
-# server, for normal operation this does not need to be set.
-COLLABORATION_URL=
-
 # To support uploading of images for avatars and document attachments an
 # s3-compatible storage must be provided. AWS S3 is recommended for redundency
-# however if you want to keep all file storage local an alternative such as
+# however if you want to keep all file storage local an alternative such as 
 # minio (https://github.com/minio/minio) can be used.
 
 # A more detailed guide on setting up S3 is available here:
@@ -46,7 +40,6 @@ COLLABORATION_URL=
 AWS_ACCESS_KEY_ID=get_a_key_from_aws
 AWS_SECRET_ACCESS_KEY=get_the_secret_of_above_key
 AWS_REGION=xx-xxxx-x
-AWS_S3_ACCELERATE_URL=
 AWS_S3_UPLOAD_BUCKET_URL=http://s3:4569
 AWS_S3_UPLOAD_BUCKET_NAME=bucket_name_here
 AWS_S3_UPLOAD_MAX_SIZE=26214400
@@ -65,8 +58,8 @@ AWS_S3_ACL=private
 #
 # When configuring the Client ID, add a redirect URL under "OAuth & Permissions":
 # https://<URL>/auth/slack.callback
-SLACK_CLIENT_ID=get_a_key_from_slack
-SLACK_CLIENT_SECRET=get_the_secret_of_above_key
+SLACK_KEY=get_a_key_from_slack
+SLACK_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
@@ -76,48 +69,24 @@ SLACK_CLIENT_SECRET=get_the_secret_of_above_key
 GOOGLE_CLIENT_ID=
 GOOGLE_CLIENT_SECRET=
 
-# To configure Microsoft/Azure auth, you'll need to create an OAuth Client. See
+# To configure Microsoft/Azure auth, you'll need to create an OAuth Client. See 
 # the guide for details on setting up your Azure App:
 # => https://wiki.generaloutline.com/share/dfa77e56-d4d2-4b51-8ff8-84ea6608faa4
-AZURE_CLIENT_ID=
+AZURE_CLIENT_ID= 
 AZURE_CLIENT_SECRET=
 AZURE_RESOURCE_APP_ID=
 
-# To configure generic OIDC auth, you'll need some kind of identity provider.
-# See documentation for whichever IdP you use to acquire the following info:
-# Redirect URI is https://<URL>/auth/oidc.callback
-OIDC_CLIENT_ID=
-OIDC_CLIENT_SECRET=
-OIDC_AUTH_URI=
-OIDC_TOKEN_URI=
-OIDC_USERINFO_URI=
-
-# Specify which claims to derive user information from
-# Supports any valid JSON path with the JWT payload
-OIDC_USERNAME_CLAIM=preferred_username
-
-# Display name for OIDC authentication
-OIDC_DISPLAY_NAME=OpenID
-
-# Space separated auth scopes.
-OIDC_SCOPES=openid profile email
 
 
 # –––––––––––––––– OPTIONAL ––––––––––––––––
 
-# Base64 encoded private key and certificate for HTTPS termination. This is only
-# required if you do not use an external reverse proxy. See documentation:
-# https://wiki.generaloutline.com/share/1c922644-40d8-41fe-98f9-df2b67239d45
-SSL_KEY=
-SSL_CERT=
-
 # If using a Cloudfront/Cloudflare distribution or similar it can be set below.
-# This will cause paths to javascript, stylesheets, and images to be updated to
-# the hostname defined in CDN_URL. In your CDN configuration the origin server
+# This will cause paths to javascript, stylesheets, and images to be updated to  
+# the hostname defined in CDN_URL. In your CDN configuration the origin server 
 # should be set to the same as URL.
 CDN_URL=
 
-# Auto-redirect to https in production. The default is true but you may set to
+# Auto-redirect to https in production. The default is true but you may set to 
 # false if you can be sure that SSL is terminated at an external loadbalancer.
 FORCE_HTTPS=true
 
@@ -125,19 +94,19 @@ FORCE_HTTPS=true
 # the maintainers
 ENABLE_UPDATES=true
 
-# How many processes should be spawned. As a reasonable rule divide your servers
-# available memory by 512 for a rough estimate
-WEB_CONCURRENCY=1
-
 # Override the maxium size of document imports, could be required if you have
 # especially large Word documents with embedded imagery
 MAXIMUM_IMPORT_SIZE=5120000
 
-# You can remove this line if your reverse proxy already logs incoming http
-# requests and this ends up being duplicative
-DEBUG=http
+# You may enable or disable debugging categories to increase the noisiness of
+# logs. The default is a good balance
+DEBUG=cache,presenters,events,emails,mailer,utils,http,server,services
 
-# For a complete Slack integration with search and posting to channels the
+# 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
 #
@@ -145,13 +114,13 @@ SLACK_VERIFICATION_TOKEN=your_token
 SLACK_APP_ID=A0XXXXXXX
 SLACK_MESSAGE_ACTIONS=true
 
-# Optionally enable google analytics to track pageviews in the knowledge base
+# Optionally enable google analytics to track pageviews in the knowledge base 
 GOOGLE_ANALYTICS_ID=
 
 # Optionally enable Sentry (sentry.io) to track errors and performance
 SENTRY_DSN=
 
-# To support sending outgoing transactional emails such as "document updated" or
+# To support sending outgoing transactional emails such as "document updated" or 
 # "you've been invited" you'll need to provide authentication for an SMTP server
 SMTP_HOST=
 SMTP_PORT=
@@ -165,6 +134,6 @@ SMTP_SECURE=true
 # Custom logo that displays on the authentication screen, scaled to height: 60px
 # TEAM_LOGO=https://example.com/images/logo.png
 
-# The default interface language. See translate.getoutline.com for a list of
+# The default interface language. See translate.getoutline.com for a list of 
 # available language codes and their rough percentage translated.
 DEFAULT_LANGUAGE=en_US

.eslintrc

@@ -1,46 +1,20 @@
 {
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "sourceType": "module",
-    "extraFileExtensions": [".json"],
-    "ecmaFeatures": {
-      "jsx": true
-    }
-  },
+  "parser": "babel-eslint",
   "extends": [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:import/recommended",
-    "plugin:import/typescript",
-    "plugin:prettier/recommended"
+    "react-app",
+    "plugin:import/errors",
+    "plugin:import/warnings",
+    "plugin:flowtype/recommended",
+    "plugin:react-hooks/recommended"
   ],
   "plugins": [
-    "es",
-    "@typescript-eslint",
-    "eslint-plugin-import",
-    "eslint-plugin-node",
-    "eslint-plugin-react",
-    "import"
+    "prettier",
+    "flowtype"
   ],
   "rules": {
     "eqeqeq": 2,
-    "curly": 2,
+    "no-unused-vars": 2,
     "no-mixed-operators": "off",
-    "no-useless-escape": "off",
-    "es/no-regexp-lookbehind-assertions": "error",
-    "@typescript-eslint/no-unused-vars": [
-      "error",
-      {
-        "argsIgnorePattern": "^_",
-        "args": "after-used",
-        "ignoreRestSiblings": true
-      }
-    ],
-    "padding-line-between-statements": ["error", { "blankLine": "always", "prev": "*", "next": "export" }],
-    "lines-between-class-members": ["error", "always", { "exceptAfterSingleLine": true }],
-    "import/no-named-as-default": "off",
-    "import/no-named-as-default-member": "off",
-    "import/newline-after-import": 2,
     "import/order": [
       "error",
       {
@@ -49,48 +23,53 @@
         },
         "pathGroups": [
           {
-            "pattern": "@shared/**",
+            "pattern": "shared/**",
             "group": "external",
             "position": "after"
           },
           {
-            "pattern": "@server/**",
+            "pattern": "stores",
             "group": "external",
             "position": "after"
           },
           {
-            "pattern": "~/stores",
+            "pattern": "stores/**",
             "group": "external",
             "position": "after"
           },
           {
-            "pattern": "~/stores/**",
+            "pattern": "models/**",
             "group": "external",
             "position": "after"
           },
           {
-            "pattern": "~/models/**",
+            "pattern": "scenes/**",
             "group": "external",
             "position": "after"
           },
           {
-            "pattern": "~/scenes/**",
-            "group": "external",
-            "position": "after"
-          },
-          {
-            "pattern": "~/components/**",
-            "group": "external",
-            "position": "after"
-          },
-          {
-            "pattern": "~/**",
+            "pattern": "components/**",
             "group": "external",
             "position": "after"
           }
         ]
       }
     ],
+    "flowtype/require-valid-file-annotation": [
+      2,
+      "always",
+      {
+        "annotationStyle": "line"
+      }
+    ],
+    "flowtype/space-after-type-colon": [
+      2,
+      "always"
+    ],
+    "flowtype/space-before-type-colon": [
+      2,
+      "never"
+    ],
     "prettier/prettier": [
       "error",
       {
@@ -105,11 +84,22 @@
       "pragma": "React",
       "version": "detect"
     },
-    "import/parsers": {
-      "@typescript-eslint/parser": [".ts", ".tsx"]
-    },
     "import/resolver": {
-      "typescript": {}
+      "node": {
+        "paths": [
+          "app",
+          "."
+        ]
+      }
+    },
+    "flowtype": {
+      "onlyFilesWithFlowAnnotation": false
     }
+  },
+  "env": {
+    "jest": true
+  },
+  "globals": {
+    "EDITOR_VERSION": true
   }
 }

.flowconfig

@@ -0,0 +1,39 @@
+[include]
+.*/app/.*
+.*/server/.*
+.*/shared/.*
+
+[ignore]
+.*/node_modules/tiny-cookie/flow/.*
+.*/node_modules/styled-components/.*
+.*/node_modules/polished/.*
+.*/node_modules/mobx/.*.flow
+.*/node_modules/react-side-effect/.*
+.*/node_modules/fbjs/.*
+.*/node_modules/config-chain/.*
+.*/server/scripts/.*
+*.test.js
+
+[libs]
+
+[options]
+emoji=true
+sharedmemory.heap_size=3221225472
+
+module.system.node.resolve_dirname=node_modules
+module.system.node.resolve_dirname=app
+
+module.name_mapper='^\(.*\)\.md$' -> 'empty/object'
+module.name_mapper='^shared\/\(.*\)$' -> '<PROJECT_ROOT>/shared/\1'
+
+module.file_ext=.js
+module.file_ext=.md
+module.file_ext=.json
+
+esproposal.decorators=ignore
+esproposal.class_static_fields=enable
+esproposal.class_instance_fields=enable
+esproposal.optional_chaining=enable
+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue

.github/dependabot.yml

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

@@ -0,0 +1,22 @@
+# Number of days of inactivity before an issue becomes stale
+daysUntilStale: 90
+
+# 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

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

@@ -1,70 +0,0 @@
-# For most projects, this workflow file will not need changing; you simply need
-# to commit it to your repository.
-#
-# You may wish to alter this file to override the set of languages analyzed,
-# or to provide custom queries or build logic.
-#
-# ******** NOTE ********
-# We have attempted to detect the languages in your repository. Please check
-# the `language` matrix defined below to confirm you have the correct set of
-# supported CodeQL languages.
-#
-name: "CodeQL"
-
-on:
-  push:
-    branches: [ main ]
-  pull_request:
-    # The branches below must be a subset of the branches above
-    branches: [ main ]
-  schedule:
-    - cron: '28 15 * * 2'
-
-jobs:
-  analyze:
-    name: Analyze
-    runs-on: ubuntu-latest
-    permissions:
-      actions: read
-      contents: read
-      security-events: write
-
-    strategy:
-      fail-fast: false
-      matrix:
-        language: [ 'javascript' ]
-        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
-        # Learn more about CodeQL language support at https://git.io/codeql-language-support
-
-    steps:
-    - name: Checkout repository
-      uses: actions/checkout@v2
-
-    # Initializes the CodeQL tools for scanning.
-    - name: Initialize CodeQL
-      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.
-        # By default, queries listed here will override any specified in a config file.
-        # Prefix the list here with "+" to use these queries and those in the config file.
-        # queries: ./path/to/local/query, your-org/your-repo/queries@main
-
-    # 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@v2
-
-    # ℹ️ Command-line programs to run using the OS shell.
-    # 📚 https://git.io/JvXDl
-
-    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
-    #    and modify them (or add more) to build your code if your project
-    #    uses a compiled language
-
-    #- run: |
-    #   make bootstrap
-    #   make release
-
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v2

.github/workflows/stale.yml

@@ -1,29 +0,0 @@
-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,12 +3,8 @@ build
 node_modules/*
 .env
 .log
-.vscode/*
 npm-debug.log
 stats.json
 .DS_Store
 fakes3/*
 .idea
-*.pem
-*.key
-*.cert

.husky/pre-commit

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

.vscode/settings.json

@@ -1,7 +1,7 @@
 {
-  "javascript.validate.enable": true,
-  "javascript.format.enable": true,
-  "typescript.validate.enable": true,
-  "typescript.format.enable": true,
+  "javascript.validate.enable": false,
+  "javascript.format.enable": false,
+  "typescript.validate.enable": false,
+  "typescript.format.enable": false,
   "editor.formatOnSave": true,
 }

ARCHITECTURE.md

@@ -1,23 +1,25 @@
+
 # Architecture
 
-Outline is composed of a backend and frontend codebase in this monorepo. As both are written in TypeScript, they share some code where possible. We utilize the latest ES6 language features, including `async`/`await`, and types. Prettier formatting and ESLint are enforced by CI.
+Outline is composed of a backend and frontend codebase in this monorepo. As both are written in Javascript, they share some code where possible. We utilize the latest ES6 language features, including `async`/`await`, and [Flow](https://flow.org/) typing. Prettier formatting and ESLint are enforced by CI.
 
 ## Frontend
 
 Outline's frontend is a React application compiled with [Webpack](https://webpack.js.org/). It uses [MobX](https://mobx.js.org/) for state management and [Styled Components](https://www.styled-components.com/) for component styles. Unless global, state logic and styles are always co-located with React components together with their subcomponents to make the component tree easier to manage.
 
+> Important Note: The Outline editor is built on [Prosemirror](https://github.com/prosemirror) and managed in a separate open source repository to encourage re-use: [rich-markdown-editor](https://github.com/outline/rich-markdown-editor).
+
 ```
 app
 ├── components  - React components reusable across scenes
 ├── embeds      - Embed definitions that represent rich interactive embeds in the editor
 ├── hooks       - Reusable React hooks
-├── actions     - Reusable actions such as navigating, opening, creating entities
 ├── menus       - Context menus, often appear in multiple places in the UI
 ├── models      - State models using MobX observables
 ├── routes      - Route definitions, note that chunks are async loaded with suspense
 ├── scenes      - A scene represents a full-page view that contains several components
 ├── stores      - Collections of models and associated fetch logic
-├── types       - TypeScript types
+├── types       - Flow types
 └── utils       - Utility methods specific to the frontend
 ```
 
@@ -37,17 +39,14 @@ server
 ├── commands          - We are gradually moving to the command pattern for new write logic
 ├── config            - Database configuration
 ├── emails            - Transactional email templates
-│   └── templates     - Classes that define each possible email template
+│   └── components    - Shared React components for email templates
 ├── middlewares       - Koa middlewares
 ├── migrations        - Database migrations
 ├── models            - Sequelize models
 ├── onboarding        - Markdown templates for onboarding documents
 ├── policies          - Authorization logic based on cancan
 ├── presenters        - JSON presenters for database models, the interface between backend -> frontend
-├── queues            - Async queue definitions
-│   └── processors    - Processors perform jobs on events from the event bus
-│   └── tasks         - Tasks are arbitrary async jobs not from the event bus
-├── services          - Services start distinct portions of the application eg api, worker
+├── services          - Service definitions are triggered for events and perform async jobs
 ├── static            - Static assets
 ├── test              - Test helpers and fixtures, tests themselves are colocated
 └── utils             - Utility methods specific to the backend
@@ -60,10 +59,9 @@ small utilities.
 
 ```
 shared
-├── editor            - The text editor, based on Prosemirror
 ├── i18n              - Internationalization confiuration
 │   └── locales       - Language specific translation files
 ├── styles            - Styles, colors and other global aesthetics
 ├── utils             - Shared utility methods
 └── constants         - Shared constants
-```
+```

Dockerfile

@@ -1,28 +1,23 @@
-ARG APP_PATH=/opt/outline
-FROM outlinewiki/outline-base as base
+FROM node:14-alpine
+
+ENV APP_PATH /opt/outline
+RUN mkdir -p $APP_PATH
 
-ARG APP_PATH
 WORKDIR $APP_PATH
 
-# ---
-FROM node:16.14.2-alpine3.15 AS runner
+COPY package.json ./
+COPY yarn.lock ./
+
+RUN yarn --pure-lockfile
+
+COPY . .
+
+RUN yarn build && \
+  yarn --production --ignore-scripts --prefer-offline && \
+  rm -rf shared && \
+  rm -rf app
 
-ARG APP_PATH
-WORKDIR $APP_PATH
 ENV NODE_ENV production
-
-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 && \
-  chown -R nodejs:nodejs $APP_PATH/build
-
-USER nodejs
+CMD yarn start
 
 EXPOSE 3000
-CMD ["yarn", "start"]

Dockerfile.base

@@ -1,18 +0,0 @@
-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.64.0
+Licensed Work:        Outline 0.55.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-05-23
+Change Date:          2024-04-22
 
 Change License:       Apache License, Version 2.0
 

Makefile

@@ -2,7 +2,7 @@ up:
 	docker-compose up -d redis postgres s3
 	yarn install --pure-lockfile
 	yarn sequelize db:migrate
-	yarn dev:watch
+	yarn dev
 
 build:
 	docker-compose build --pull outline

Procfile

@@ -1,2 +1 @@
-web: yarn start --services=web,websockets,collaboration
-worker: yarn start --services=worker
+web: node ./build/server/index.js

README.md

@@ -1,17 +1,18 @@
+
+
 <p align="center">
   <img src="https://user-images.githubusercontent.com/31465/34380645-bd67f474-eb0b-11e7-8d03-0151c1730654.png" height="29" />
 </p>
 <p align="center">
-  <i>A fast, collaborative, knowledge base for your team built using React and Node.js.<br/>Try out Outline using our hosted version at <a href="https://www.getoutline.com">www.getoutline.com</a>.</i>
+  <i>An open, extensible, wiki for your team built using React and Node.js.<br/>Try out Outline using our hosted version at <a href="https://www.getoutline.com">www.getoutline.com</a>.</i>
   <br/>
   <img width="1640" alt="screenshot" src="https://user-images.githubusercontent.com/380914/110356468-26374600-7fef-11eb-9f6a-f2cc2c8c6590.png">
 </p>
 <p align="center">
   <a href="https://circleci.com/gh/outline/outline" rel="nofollow"><img src="https://circleci.com/gh/outline/outline.svg?style=shield&amp;circle-token=c0c4c2f39990e277385d5c1ae96169c409eb887a"></a>
-  <a href="http://www.typescriptlang.org" rel="nofollow"><img src="https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg" alt="TypeScript"></a>
-  <a href="https://github.com/prettier/prettier"><img src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat" alt="Prettier"></a>
-  <a href="https://github.com/styled-components/styled-components"><img src="https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg" alt="Styled Components"></a>
-  <a href="https://translate.getoutline.com/project/outline" alt="Localized"><img src="https://badges.crowdin.net/outline/localized.svg"></a>
+  <a href="https://github.com/prettier/prettier"><img src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat"></a>
+  <a href="https://github.com/styled-components/styled-components"><img src="https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg"></a>
+  <a href="https://translate.getoutline.com/project/outline"><img src="https://badges.crowdin.net/outline/localized.svg"></a>
 </p>
 
 This is the source code that runs [**Outline**](https://www.getoutline.com) and all the associated services. If you want to use Outline then you don't need to run this code, we offer a hosted version of the app at [getoutline.com](https://www.getoutline.com).
@@ -20,38 +21,115 @@ If you'd like to run your own copy of Outline or contribute to development then
 
 # Installation
 
-Please see the [documentation](https://app.getoutline.com/share/770a97da-13e5-401e-9f8a-37949c19f97e/) for running your own copy of Outline in a production configuration.
+Outline requires the following dependencies:
 
-If you have questions or improvements for the docs please create a thread in [GitHub discussions](https://github.com/outline/outline/discussions).
+- [Node.js](https://nodejs.org/) >= 12
+- [Yarn](https://yarnpkg.com)
+- [Postgres](https://www.postgresql.org/download/) >=9.5
+- [Redis](https://redis.io/) >= 4
+- AWS S3 bucket or compatible API for file storage
+- Slack or Google developer application for authentication
 
-# Development
 
-There is a short guide for [setting up a development environment](https://app.getoutline.com/share/770a97da-13e5-401e-9f8a-37949c19f97e/doc/local-development-5hEhFRXow7) if you wish to contribute changes, fixes, and improvements to Outline.
+## Self-Hosted Production
 
-## Contributing
+### Docker
+
+For a manual self-hosted production installation these are the recommended steps:
+
+1. First setup Redis and Postgres servers, this is outside the scope of the guide.
+1. Download the latest official Docker image, new releases are available around the middle of every month:
+
+   `docker pull outlinewiki/outline`
+1. Using the [.env.sample](.env.sample) as a reference, set the required variables in your production environment. You can export the environment variables directly, or create a `.env` file and pass it to the docker image like so:
+
+   `docker run --env-file=.env outlinewiki/outline`
+1. Setup the database with `yarn db:migrate`. Production assumes an SSL connection to the database by default, if
+Postgres is on the same machine and is not SSL you can migrate with `yarn db:migrate --env=production-ssl-disabled`, for example:
+
+   `docker run --rm outlinewiki/outline yarn db:migrate`
+1. Start the container:
+
+   `docker run outlinewiki/outline`
+1. Visit http://you_server_ip:3000 and you should be able to see Outline page
+
+   > Port number can be changed using the `PORT` environment variable
+
+1. (Optional) You can add an `nginx` or other reverse proxy to serve your instance of Outline for a clean URL without the port number, support SSL, etc.
+
+### Terraform
+
+Alternatively a community member maintains a script to deploy Outline on Google Cloud Platform with [Terraform & Ansible](https://github.com/rjsgn/outline-terraform-ansible).
+
+### Upgrading
+
+#### Docker
+
+If you're running Outline with Docker you'll need to run migrations within the docker container after updating the image. The command will be something like:
+
+```shell
+docker run --rm outlinewiki/outline:latest yarn db:migrate
+```
+
+#### Git
+
+If you're running Outline by cloning this repository, run the following command to upgrade:
+
+```shell
+yarn run upgrade
+```
+
+
+## Local Development
+
+For contributing features and fixes you can quickly get an environment running using Docker by following these steps:
+
+1. Install these dependencies if you don't already have them
+    1. [Docker for Desktop](https://www.docker.com)
+    1. [Node.js](https://nodejs.org/) (v12 LTS preferred)
+    1. [Yarn](https://yarnpkg.com)
+1. Clone this repo
+1. Register a Slack app at https://api.slack.com/apps
+1. Copy the file `.env.sample` to `.env`
+1. Fill out the following fields:
+    1. `SECRET_KEY` (follow instructions in the comments at the top of `.env`)
+    1. `SLACK_KEY` (this is called "Client ID" in Slack admin)
+    1. `SLACK_SECRET` (this is called "Client Secret" in Slack admin)
+1. Configure your Slack app's Oauth & Permissions settings 
+    1. Slack recently prevented the use of `http` protocol for localhost. For local development, you can use a tool like [ngrok](https://ngrok.com) or a package like `mkcert`. ([How to use HTTPS for local development](https://web.dev/how-to-use-local-https/))
+    1. Add `https://my_ngrok_address/auth/slack.callback` as an Oauth redirect URL
+    1. Ensure that the bot token scope contains at least `users:read`
+1. Run `make up`. This will download dependencies, build and launch a development version of Outline
+
+
+# Contributing
 
 Outline is built and maintained by a small team – we'd love your help to fix bugs and add features!
 
-Before submitting a pull request _please_ discuss with the core team by creating or commenting in an issue on [GitHub](https://www.github.com/outline/outline/issues) – we'd also love to hear from you in the [discussions](https://www.github.com/outline/outline/discussions). This way we can ensure that an approach is agreed on before code is written. This will result in a much higher liklihood of your code being accepted.
+Before submitting a pull request please let the core team know by creating or commenting in an issue on [GitHub](https://www.github.com/outline/outline/issues), and we'd also love to hear from you in the [Discussions](https://www.github.com/outline/outline/discussions). This way we can ensure that an approach is agreed on before code is written. This will result in a much higher liklihood of code being accepted.
 
 If you’re looking for ways to get started, here's a list of ways to help us improve Outline:
 
-- [Translation](docs/TRANSLATION.md) into other languages
-- Issues with [`good first issue`](https://github.com/outline/outline/labels/good%20first%20issue) label
-- Performance improvements, both on server and frontend
-- Developer happiness and documentation
-- Bugs and other issues listed on GitHub
+* [Translation](TRANSLATION.md) into other languages
+* Issues with [`good first issue`](https://github.com/outline/outline/labels/good%20first%20issue) label
+* Performance improvements, both on server and frontend
+* Developer happiness and documentation
+* Bugs and other issues listed on GitHub
+
 
 ## Architecture
 
 If you're interested in contributing or learning more about the Outline codebase
-please refer to the [architecture document](docs/ARCHITECTURE.md) first for a high level overview of how the application is put together.
+please refer to the [architecture document](ARCHITECTURE.md) first for a high level overview of how the application is put together.
+
 
 ## Debugging
 
-In development Outline outputs simple logging to the console, prefixed by categories. In production it outputs JSON logs, these can be easily parsed by your preferred log ingestion pipeline.
+Outline uses [debug](https://www.npmjs.com/package/debug). To enable debugging output, the following categories are available:
 
-HTTP logging is disabled by default, but can be enabled by setting the `DEBUG=http` environment variable.
+```
+DEBUG=sql,cache,presenters,events,importer,exporter,emails,mailer
+```
 
 ## Tests
 
@@ -67,16 +145,13 @@ make test
 make watch
 ```
 
-Once the test database is created with `make test` you may individually run
+Once the test database is created with  `make test` you may individually run
 frontend and backend tests directly.
 
 ```shell
 # To run backend tests
 yarn test:server
 
-# To run a specific backend test
-yarn test:server myTestFile
-
 # To run frontend tests
 yarn test:app
 ```
@@ -85,14 +160,14 @@ yarn test:app
 
 Sequelize is used to create and run migrations, for example:
 
-```shell
+```
 yarn sequelize migration:generate --name my-migration
 yarn sequelize db:migrate
 ```
 
 Or to run migrations on test database:
 
-```shell
+```
 yarn sequelize db:migrate --env test
 ```
 

SECURITY.md

@@ -4,7 +4,7 @@
 
 The Outline team takes security bugs seriously. We appreciate your efforts to responsibly disclose your findings, and will make every effort to acknowledge your contributions.
 
-If you discover a security vulnerability in outline, please disclose it via [our huntr page](https://huntr.dev/repos/${owner}/${repo}/). Bounty eligibility, CVE assignment, response times and past reports are all there.
+To report a security issue, email [hello@getoutline.com](mailto:hello@getoutline.com) and include the word "SECURITY" in the subject line.
 
 The Outline team will send a response indicating the next steps in handling your report. After the initial reply to your report you will be kept informed of the progress towards a fix and full announcement.
 

__mocks__/bull.js

@@ -1,3 +1,4 @@
+/* eslint-disable flowtype/require-valid-file-annotation */
 export default class Queue {
   name;
 

__mocks__/window.js

@@ -1,2 +1 @@
-window.matchMedia = (data) => data;
-window.env = {};
+window.matchMedia = data => data;

app.json

@@ -35,7 +35,7 @@
       "required": true
     },
     "SECRET_KEY": {
-      "description": "A 32-character secret key, generate with openssl rand -hex 32",
+      "description": "A secret key",
       "generator": "secret",
       "required": true
     },
@@ -44,7 +44,7 @@
       "required": true
     },
     "URL": {
-      "description": "https://{your app name}.herokuapp.com, or the domain you are binding to",
+      "description": "https://{your app name}.herokuapp.com",
       "required": true
     },
     "GOOGLE_CLIENT_ID": {
@@ -55,58 +55,15 @@
       "description": "",
       "required": false
     },
-    "AZURE_CLIENT_ID": {
-      "description": "To configure Microsoft/Azure auth, you'll need to create an OAuth Client. See the guide for details on setting up your Azure App: https://wiki.generaloutline.com/share/dfa77e56-d4d2-4b51-8ff8-84ea6608faa4",
+    "ALLOWED_DOMAINS": {
+      "description": "Comma separated list of domains to be allowed (optional). If not set, all Google apps domains are allowed by default",
       "required": false
     },
-    "AZURE_CLIENT_SECRET": {
-      "description": "",
-      "required": false
-    },
-    "AZURE_RESOURCE_APP_ID": {
-      "description": "",
-      "required": false
-    },
-    "OIDC_CLIENT_ID": {
-      "description": "To configure generic OIDC auth, you'll need some kind of identity provider. See documentation for whichever IdP you use to acquire the following info; Redirect URI is https://<URL>/auth/oidc.callback",
-      "required": false
-    },
-    "OIDC_CLIENT_SECRET": {
-      "description": "",
-      "required": false
-    },
-    "OIDC_AUTH_URI": {
-      "description": "",
-      "required": false
-    },
-    "OIDC_TOKEN_URI": {
-      "description": "",
-      "required": false
-    },
-    "OIDC_USERINFO_URI": {
-      "description": "",
-      "required": false
-    },
-    "OIDC_USERNAME_CLAIM": {
-      "description": "Specify which claims to derive user information from. Supports any valid JSON path with the JWT payload",
-      "value": "preferred_username",
-      "required": false
-    },
-    "OIDC_DISPLAY_NAME": {
-      "description": "Display name for OIDC authentication",
-      "value": "OpenID",
-      "required": false
-    },
-    "OIDC_SCOPES": {
-      "description": "Space separated auth scopes.",
-      "value": "openid profile email",
-      "required": false
-    },
-    "SLACK_CLIENT_ID": {
+    "SLACK_KEY": {
       "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_CLIENT_SECRET": {
+    "SLACK_SECRET": {
       "description": "Your Slack client secret - d2dc414f9953226bad0a356cXXXXYYYY",
       "required": false
     },
@@ -198,11 +155,6 @@
     "TEAM_LOGO": {
       "description": "A logo that will be displayed on the signed out home page",
       "required": false
-    },
-    "DEFAULT_LANGUAGE": {
-      "value": "en_US",
-      "description": "The default interface language. See translate.getoutline.com for a list of available language codes and their rough percentage translated.",
-      "required": false
     }
   }
-}
+}

app/.eslintrc

@@ -1,13 +0,0 @@
-{
-  "extends": [
-    "../.eslintrc",
-    "plugin:react-hooks/recommended",
-  ],
-  "plugins": [
-    "eslint-plugin-react-hooks",
-  ],
-  "env": {
-    "jest": true,
-    "browser": true
-  }
-}

app/.jestconfig.json

@@ -7,10 +7,14 @@
     "<rootDir>/shared"
   ],
   "moduleNameMapper": {
-    "^~/(.*)$": "<rootDir>/app/$1",
-    "^@shared/(.*)$": "<rootDir>/shared/$1",
+    "^shared/(.*)$": "<rootDir>/shared/$1",
     "^.*[.](gif|ttf|eot|svg)$": "<rootDir>/__test__/fileMock.js"
   },
+  "moduleFileExtensions": [
+    "js",
+    "jsx",
+    "json"
+  ],
   "moduleDirectories": [
     "node_modules"
   ],
@@ -21,7 +25,6 @@
     "<rootDir>/__mocks__/window.js"
   ],
   "setupFilesAfterEnv": [
-    "./app/test/setup.ts"
-  ],
-  "testEnvironment": "jsdom"
+    "./app/test/setup.js"
+  ]
 }

app/actions/definitions/collections.tsx

@@ -1,137 +0,0 @@
-import {
-  CollectionIcon,
-  EditIcon,
-  PlusIcon,
-  StarredIcon,
-  UnstarredIcon,
-} from "outline-icons";
-import * as React from "react";
-import stores from "~/stores";
-import Collection from "~/models/Collection";
-import CollectionEdit from "~/scenes/CollectionEdit";
-import CollectionNew from "~/scenes/CollectionNew";
-import DynamicCollectionIcon from "~/components/CollectionIcon";
-import { createAction } from "~/actions";
-import { CollectionSection } from "~/actions/sections";
-import history from "~/utils/history";
-
-const ColorCollectionIcon = ({ collection }: { collection: Collection }) => {
-  return <DynamicCollectionIcon collection={collection} />;
-};
-
-export const openCollection = createAction({
-  name: ({ t }) => t("Open collection"),
-  section: CollectionSection,
-  shortcut: ["o", "c"],
-  icon: <CollectionIcon />,
-  children: ({ stores }) => {
-    const collections = stores.collections.orderedData;
-    return collections.map((collection) => ({
-      // Note: using url which includes the slug rather than id here to bust
-      // cache if the collection is renamed
-      id: collection.url,
-      name: collection.name,
-      icon: <ColorCollectionIcon collection={collection} />,
-      section: CollectionSection,
-      perform: () => history.push(collection.url),
-    }));
-  },
-});
-
-export const createCollection = createAction({
-  name: ({ t }) => t("New collection"),
-  section: CollectionSection,
-  icon: <PlusIcon />,
-  keywords: "create",
-  visible: ({ stores }) =>
-    stores.policies.abilities(stores.auth.team?.id || "").createCollection,
-  perform: ({ t, event }) => {
-    event?.preventDefault();
-    event?.stopPropagation();
-    stores.dialogs.openModal({
-      title: t("Create a collection"),
-      content: <CollectionNew onSubmit={stores.dialogs.closeAllModals} />,
-    });
-  },
-});
-
-export const editCollection = createAction({
-  name: ({ t }) => t("Edit collection"),
-  section: CollectionSection,
-  icon: <EditIcon />,
-  visible: ({ stores, activeCollectionId }) =>
-    !!activeCollectionId &&
-    stores.policies.abilities(activeCollectionId).update,
-  perform: ({ t, activeCollectionId }) => {
-    if (!activeCollectionId) {
-      return;
-    }
-
-    stores.dialogs.openModal({
-      title: t("Edit collection"),
-      content: (
-        <CollectionEdit
-          onSubmit={stores.dialogs.closeAllModals}
-          collectionId={activeCollectionId}
-        />
-      ),
-    });
-  },
-});
-
-export const starCollection = createAction({
-  name: ({ t }) => t("Star"),
-  section: CollectionSection,
-  icon: <StarredIcon />,
-  keywords: "favorite bookmark",
-  visible: ({ activeCollectionId, stores }) => {
-    if (!activeCollectionId) {
-      return false;
-    }
-    const collection = stores.collections.get(activeCollectionId);
-    return (
-      !collection?.isStarred &&
-      stores.policies.abilities(activeCollectionId).star
-    );
-  },
-  perform: ({ activeCollectionId, stores }) => {
-    if (!activeCollectionId) {
-      return;
-    }
-
-    const collection = stores.collections.get(activeCollectionId);
-    collection?.star();
-  },
-});
-
-export const unstarCollection = createAction({
-  name: ({ t }) => t("Unstar"),
-  section: CollectionSection,
-  icon: <UnstarredIcon />,
-  keywords: "unfavorite unbookmark",
-  visible: ({ activeCollectionId, stores }) => {
-    if (!activeCollectionId) {
-      return false;
-    }
-    const collection = stores.collections.get(activeCollectionId);
-    return (
-      !!collection?.isStarred &&
-      stores.policies.abilities(activeCollectionId).unstar
-    );
-  },
-  perform: ({ activeCollectionId, stores }) => {
-    if (!activeCollectionId) {
-      return;
-    }
-
-    const collection = stores.collections.get(activeCollectionId);
-    collection?.unstar();
-  },
-});
-
-export const rootCollectionActions = [
-  openCollection,
-  createCollection,
-  starCollection,
-  unstarCollection,
-];

app/actions/definitions/developer.tsx

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

@@ -1,343 +0,0 @@
-import invariant from "invariant";
-import {
-  DownloadIcon,
-  DuplicateIcon,
-  StarredIcon,
-  PrintIcon,
-  UnstarredIcon,
-  DocumentIcon,
-  NewDocumentIcon,
-  ShapesIcon,
-  ImportIcon,
-  PinIcon,
-  SearchIcon,
-} from "outline-icons";
-import * as React from "react";
-import { getEventFiles } from "@shared/utils/files";
-import DocumentTemplatizeDialog from "~/components/DocumentTemplatizeDialog";
-import { createAction } from "~/actions";
-import { DocumentSection } from "~/actions/sections";
-import history from "~/utils/history";
-import { homePath, newDocumentPath, searchPath } from "~/utils/routeHelpers";
-
-export const openDocument = createAction({
-  name: ({ t }) => t("Open document"),
-  section: DocumentSection,
-  shortcut: ["o", "d"],
-  keywords: "go to",
-  icon: <DocumentIcon />,
-  children: ({ stores }) => {
-    const paths = stores.collections.pathsToDocuments;
-
-    return paths
-      .filter((path) => path.type === "document")
-      .map((path) => ({
-        // Note: using url which includes the slug rather than id here to bust
-        // cache if the document is renamed
-        id: path.url,
-        name: path.title,
-        icon: () =>
-          stores.documents.get(path.id)?.isStarred ? <StarredIcon /> : null,
-        section: DocumentSection,
-        perform: () => history.push(path.url),
-      }));
-  },
-});
-
-export const createDocument = createAction({
-  name: ({ t }) => t("New document"),
-  section: DocumentSection,
-  icon: <NewDocumentIcon />,
-  keywords: "create",
-  visible: ({ activeCollectionId, stores }) =>
-    !!activeCollectionId &&
-    stores.policies.abilities(activeCollectionId).update,
-  perform: ({ activeCollectionId, inStarredSection }) =>
-    activeCollectionId &&
-    history.push(newDocumentPath(activeCollectionId), {
-      starred: inStarredSection,
-    }),
-});
-
-export const starDocument = createAction({
-  name: ({ t }) => t("Star"),
-  section: DocumentSection,
-  icon: <StarredIcon />,
-  keywords: "favorite bookmark",
-  visible: ({ activeDocumentId, stores }) => {
-    if (!activeDocumentId) {
-      return false;
-    }
-    const document = stores.documents.get(activeDocumentId);
-    return (
-      !document?.isStarred && stores.policies.abilities(activeDocumentId).star
-    );
-  },
-  perform: ({ activeDocumentId, stores }) => {
-    if (!activeDocumentId) {
-      return;
-    }
-
-    const document = stores.documents.get(activeDocumentId);
-    document?.star();
-  },
-});
-
-export const unstarDocument = createAction({
-  name: ({ t }) => t("Unstar"),
-  section: DocumentSection,
-  icon: <UnstarredIcon />,
-  keywords: "unfavorite unbookmark",
-  visible: ({ activeDocumentId, stores }) => {
-    if (!activeDocumentId) {
-      return false;
-    }
-    const document = stores.documents.get(activeDocumentId);
-    return (
-      !!document?.isStarred &&
-      stores.policies.abilities(activeDocumentId).unstar
-    );
-  },
-  perform: ({ activeDocumentId, stores }) => {
-    if (!activeDocumentId) {
-      return;
-    }
-
-    const document = stores.documents.get(activeDocumentId);
-    document?.unstar();
-  },
-});
-
-export const downloadDocument = createAction({
-  name: ({ t, isContextMenu }) =>
-    isContextMenu ? t("Download") : t("Download document"),
-  section: DocumentSection,
-  icon: <DownloadIcon />,
-  keywords: "export",
-  visible: ({ activeDocumentId, stores }) =>
-    !!activeDocumentId && stores.policies.abilities(activeDocumentId).download,
-  perform: ({ activeDocumentId, stores }) => {
-    if (!activeDocumentId) {
-      return;
-    }
-
-    const document = stores.documents.get(activeDocumentId);
-    document?.download();
-  },
-});
-
-export const duplicateDocument = createAction({
-  name: ({ t, isContextMenu }) =>
-    isContextMenu ? t("Duplicate") : t("Duplicate document"),
-  section: DocumentSection,
-  icon: <DuplicateIcon />,
-  keywords: "copy",
-  visible: ({ activeDocumentId, stores }) =>
-    !!activeDocumentId && stores.policies.abilities(activeDocumentId).update,
-  perform: async ({ activeDocumentId, t, stores }) => {
-    if (!activeDocumentId) {
-      return;
-    }
-
-    const document = stores.documents.get(activeDocumentId);
-    invariant(document, "Document must exist");
-    const duped = await document.duplicate();
-    // when duplicating, go straight to the duplicated document content
-    history.push(duped.url);
-    stores.toasts.showToast(t("Document duplicated"), {
-      type: "success",
-    });
-  },
-});
-
-/**
- * Pin a document to a collection. Pinned documents will be displayed at the top
- * of the collection for all collection members to see.
- */
-export const pinDocumentToCollection = createAction({
-  name: ({ t }) => t("Pin to collection"),
-  section: DocumentSection,
-  icon: <PinIcon />,
-  iconInContextMenu: false,
-  visible: ({ activeCollectionId, activeDocumentId, stores }) => {
-    if (!activeDocumentId || !activeCollectionId) {
-      return false;
-    }
-
-    const document = stores.documents.get(activeDocumentId);
-    return (
-      !!stores.policies.abilities(activeDocumentId).pin && !document?.pinned
-    );
-  },
-  perform: async ({ activeDocumentId, activeCollectionId, t, stores }) => {
-    if (!activeDocumentId || !activeCollectionId) {
-      return;
-    }
-
-    const document = stores.documents.get(activeDocumentId);
-    await document?.pin(document.collectionId);
-
-    const collection = stores.collections.get(activeCollectionId);
-
-    if (!collection || !location.pathname.startsWith(collection?.url)) {
-      stores.toasts.showToast(t("Pinned to collection"));
-    }
-  },
-});
-
-/**
- * Pin a document to team home. Pinned documents will be displayed at the top
- * of the home screen for all team members to see.
- */
-export const pinDocumentToHome = createAction({
-  name: ({ t }) => t("Pin to home"),
-  section: DocumentSection,
-  icon: <PinIcon />,
-  iconInContextMenu: false,
-  visible: ({ activeDocumentId, currentTeamId, stores }) => {
-    if (!currentTeamId || !activeDocumentId) {
-      return false;
-    }
-
-    const document = stores.documents.get(activeDocumentId);
-
-    return (
-      !!stores.policies.abilities(activeDocumentId).pinToHome &&
-      !document?.pinnedToHome
-    );
-  },
-  perform: async ({ activeDocumentId, location, t, stores }) => {
-    if (!activeDocumentId) {
-      return;
-    }
-    const document = stores.documents.get(activeDocumentId);
-
-    await document?.pin();
-
-    if (location.pathname !== homePath()) {
-      stores.toasts.showToast(t("Pinned to team home"));
-    }
-  },
-});
-
-export const pinDocument = createAction({
-  name: ({ t }) => t("Pin"),
-  section: DocumentSection,
-  icon: <PinIcon />,
-  children: [pinDocumentToCollection, pinDocumentToHome],
-});
-
-export const printDocument = createAction({
-  name: ({ t, isContextMenu }) =>
-    isContextMenu ? t("Print") : t("Print document"),
-  section: DocumentSection,
-  icon: <PrintIcon />,
-  visible: ({ activeDocumentId }) => !!activeDocumentId,
-  perform: async () => {
-    window.print();
-  },
-});
-
-export const importDocument = createAction({
-  name: ({ t }) => t("Import document"),
-  section: DocumentSection,
-  icon: <ImportIcon />,
-  keywords: "upload",
-  visible: ({ activeCollectionId, activeDocumentId, stores }) => {
-    if (activeDocumentId) {
-      return !!stores.policies.abilities(activeDocumentId).createChildDocument;
-    }
-
-    if (activeCollectionId) {
-      return !!stores.policies.abilities(activeCollectionId).update;
-    }
-
-    return false;
-  },
-  perform: ({ activeCollectionId, activeDocumentId, stores }) => {
-    const { documents, toasts } = stores;
-    const input = document.createElement("input");
-    input.type = "file";
-    input.accept = documents.importFileTypes.join(", ");
-
-    input.onchange = async (ev) => {
-      const files = getEventFiles(ev);
-
-      try {
-        const file = files[0];
-        const document = await documents.import(
-          file,
-          activeDocumentId,
-          activeCollectionId,
-          {
-            publish: true,
-          }
-        );
-        history.push(document.url);
-      } catch (err) {
-        toasts.showToast(err.message, {
-          type: "error",
-        });
-        throw err;
-      }
-    };
-
-    input.click();
-  },
-});
-
-export const createTemplate = createAction({
-  name: ({ t }) => t("Templatize"),
-  section: DocumentSection,
-  icon: <ShapesIcon />,
-  keywords: "new create template",
-  visible: ({ activeCollectionId, activeDocumentId, stores }) => {
-    if (!activeDocumentId) {
-      return false;
-    }
-    const document = stores.documents.get(activeDocumentId);
-    return (
-      !!activeCollectionId &&
-      stores.policies.abilities(activeCollectionId).update &&
-      !document?.isTemplate
-    );
-  },
-  perform: ({ activeDocumentId, stores, t, event }) => {
-    if (!activeDocumentId) {
-      return;
-    }
-    event?.preventDefault();
-    event?.stopPropagation();
-
-    stores.dialogs.openModal({
-      title: t("Create template"),
-      isCentered: true,
-      content: <DocumentTemplatizeDialog documentId={activeDocumentId} />,
-    });
-  },
-});
-
-export const searchDocumentsForQuery = (searchQuery: string) =>
-  createAction({
-    id: "search",
-    section: DocumentSection,
-    name: ({ t }) =>
-      t(`Search documents for "{{searchQuery}}"`, { searchQuery }),
-    icon: <SearchIcon />,
-    perform: () => history.push(searchPath(searchQuery)),
-    visible: ({ location }) => location.pathname !== searchPath(),
-  });
-
-export const rootDocumentActions = [
-  openDocument,
-  createDocument,
-  createTemplate,
-  importDocument,
-  downloadDocument,
-  starDocument,
-  unstarDocument,
-  duplicateDocument,
-  printDocument,
-  pinDocumentToCollection,
-  pinDocumentToHome,
-];

app/actions/definitions/navigation.tsx

@@ -1,170 +0,0 @@
-import {
-  HomeIcon,
-  SearchIcon,
-  ArchiveIcon,
-  TrashIcon,
-  EditIcon,
-  OpenIcon,
-  SettingsIcon,
-  ShapesIcon,
-  KeyboardIcon,
-  EmailIcon,
-  LogoutIcon,
-  ProfileIcon,
-} from "outline-icons";
-import * as React from "react";
-import {
-  developersUrl,
-  changelogUrl,
-  feedbackUrl,
-  githubIssuesUrl,
-} from "@shared/utils/urlHelpers";
-import stores from "~/stores";
-import SearchQuery from "~/models/SearchQuery";
-import KeyboardShortcuts from "~/scenes/KeyboardShortcuts";
-import { createAction } from "~/actions";
-import { NavigationSection, RecentSearchesSection } from "~/actions/sections";
-import history from "~/utils/history";
-import {
-  organizationSettingsPath,
-  profileSettingsPath,
-  homePath,
-  searchPath,
-  draftsPath,
-  templatesPath,
-  archivePath,
-  trashPath,
-} from "~/utils/routeHelpers";
-
-export const navigateToHome = createAction({
-  name: ({ t }) => t("Home"),
-  section: NavigationSection,
-  shortcut: ["d"],
-  icon: <HomeIcon />,
-  perform: () => history.push(homePath()),
-  visible: ({ location }) => location.pathname !== homePath(),
-});
-
-export const navigateToRecentSearchQuery = (searchQuery: SearchQuery) =>
-  createAction({
-    section: RecentSearchesSection,
-    name: searchQuery.query,
-    icon: <SearchIcon />,
-    perform: () => history.push(searchPath(searchQuery.query)),
-  });
-
-export const navigateToDrafts = createAction({
-  name: ({ t }) => t("Drafts"),
-  section: NavigationSection,
-  icon: <EditIcon />,
-  perform: () => history.push(draftsPath()),
-  visible: ({ location }) => location.pathname !== draftsPath(),
-});
-
-export const navigateToTemplates = createAction({
-  name: ({ t }) => t("Templates"),
-  section: NavigationSection,
-  icon: <ShapesIcon />,
-  perform: () => history.push(templatesPath()),
-  visible: ({ location }) => location.pathname !== templatesPath(),
-});
-
-export const navigateToArchive = createAction({
-  name: ({ t }) => t("Archive"),
-  section: NavigationSection,
-  shortcut: ["g", "a"],
-  icon: <ArchiveIcon />,
-  perform: () => history.push(archivePath()),
-  visible: ({ location }) => location.pathname !== archivePath(),
-});
-
-export const navigateToTrash = createAction({
-  name: ({ t }) => t("Trash"),
-  section: NavigationSection,
-  icon: <TrashIcon />,
-  perform: () => history.push(trashPath()),
-  visible: ({ location }) => location.pathname !== trashPath(),
-});
-
-export const navigateToSettings = createAction({
-  name: ({ t }) => t("Settings"),
-  section: NavigationSection,
-  shortcut: ["g", "s"],
-  icon: <SettingsIcon />,
-  visible: ({ stores }) =>
-    stores.policies.abilities(stores.auth.team?.id || "").update,
-  perform: () => history.push(organizationSettingsPath()),
-});
-
-export const navigateToProfileSettings = createAction({
-  name: ({ t }) => t("Profile"),
-  section: NavigationSection,
-  iconInContextMenu: false,
-  icon: <ProfileIcon />,
-  perform: () => history.push(profileSettingsPath()),
-});
-
-export const openAPIDocumentation = createAction({
-  name: ({ t }) => t("API documentation"),
-  section: NavigationSection,
-  iconInContextMenu: false,
-  icon: <OpenIcon />,
-  perform: () => window.open(developersUrl()),
-});
-
-export const openFeedbackUrl = createAction({
-  name: ({ t }) => t("Send us feedback"),
-  section: NavigationSection,
-  iconInContextMenu: false,
-  icon: <EmailIcon />,
-  perform: () => window.open(feedbackUrl()),
-});
-
-export const openBugReportUrl = createAction({
-  name: ({ t }) => t("Report a bug"),
-  section: NavigationSection,
-  perform: () => window.open(githubIssuesUrl()),
-});
-
-export const openChangelog = createAction({
-  name: ({ t }) => t("Changelog"),
-  section: NavigationSection,
-  iconInContextMenu: false,
-  icon: <OpenIcon />,
-  perform: () => window.open(changelogUrl()),
-});
-
-export const openKeyboardShortcuts = createAction({
-  name: ({ t }) => t("Keyboard shortcuts"),
-  section: NavigationSection,
-  shortcut: ["?"],
-  iconInContextMenu: false,
-  icon: <KeyboardIcon />,
-  perform: ({ t }) => {
-    stores.dialogs.openGuide({
-      title: t("Keyboard shortcuts"),
-      content: <KeyboardShortcuts />,
-    });
-  },
-});
-
-export const logout = createAction({
-  name: ({ t }) => t("Log out"),
-  section: NavigationSection,
-  icon: <LogoutIcon />,
-  perform: () => stores.auth.logout(),
-});
-
-export const rootNavigationActions = [
-  navigateToHome,
-  navigateToDrafts,
-  navigateToTemplates,
-  navigateToArchive,
-  navigateToTrash,
-  openAPIDocumentation,
-  openFeedbackUrl,
-  openBugReportUrl,
-  openChangelog,
-  openKeyboardShortcuts,
-  logout,
-];

app/actions/definitions/settings.tsx

@@ -1,49 +0,0 @@
-import { SunIcon, MoonIcon, BrowserIcon } from "outline-icons";
-import * as React from "react";
-import stores from "~/stores";
-import { Theme } from "~/stores/UiStore";
-import { createAction } from "~/actions";
-import { SettingsSection } from "~/actions/sections";
-
-export const changeToDarkTheme = createAction({
-  name: ({ t }) => t("Dark"),
-  icon: <MoonIcon />,
-  iconInContextMenu: false,
-  keywords: "theme dark night",
-  section: SettingsSection,
-  selected: () => stores.ui.theme === "dark",
-  perform: () => stores.ui.setTheme(Theme.Dark),
-});
-
-export const changeToLightTheme = createAction({
-  name: ({ t }) => t("Light"),
-  icon: <SunIcon />,
-  iconInContextMenu: false,
-  keywords: "theme light day",
-  section: SettingsSection,
-  selected: () => stores.ui.theme === "light",
-  perform: () => stores.ui.setTheme(Theme.Light),
-});
-
-export const changeToSystemTheme = createAction({
-  name: ({ t }) => t("System"),
-  icon: <BrowserIcon />,
-  iconInContextMenu: false,
-  keywords: "theme system default",
-  section: SettingsSection,
-  selected: () => stores.ui.theme === "system",
-  perform: () => stores.ui.setTheme(Theme.System),
-});
-
-export const changeTheme = createAction({
-  name: ({ t, isContextMenu }) =>
-    isContextMenu ? t("Appearance") : t("Change theme"),
-  placeholder: ({ t }) => t("Change theme to"),
-  icon: () =>
-    stores.ui.resolvedTheme === "light" ? <SunIcon /> : <MoonIcon />,
-  keywords: "appearance display",
-  section: SettingsSection,
-  children: [changeToLightTheme, changeToDarkTheme, changeToSystemTheme],
-});
-
-export const rootSettingsActions = [changeTheme];

app/actions/definitions/users.tsx

@@ -1,23 +0,0 @@
-import { PlusIcon } from "outline-icons";
-import * as React from "react";
-import stores from "~/stores";
-import Invite from "~/scenes/Invite";
-import { createAction } from "~/actions";
-import { UserSection } from "~/actions/sections";
-
-export const inviteUser = createAction({
-  name: ({ t }) => `${t("Invite people")}…`,
-  icon: <PlusIcon />,
-  keywords: "team member user",
-  section: UserSection,
-  visible: ({ stores }) =>
-    stores.policies.abilities(stores.auth.team?.id || "").inviteUser,
-  perform: ({ t }) => {
-    stores.dialogs.openModal({
-      title: t("Invite people"),
-      content: <Invite onSubmit={stores.dialogs.closeAllModals} />,
-    });
-  },
-});
-
-export const rootUserActions = [inviteUser];

app/actions/index.ts

@@ -1,96 +0,0 @@
-import { flattenDeep } from "lodash";
-import * as React from "react";
-import { Optional } from "utility-types";
-import { v4 as uuidv4 } from "uuid";
-import {
-  Action,
-  ActionContext,
-  CommandBarAction,
-  MenuItemButton,
-  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,
-    id: uuidv4(),
-  };
-}
-
-export function actionToMenuItem(
-  action: Action,
-  context: ActionContext
-): MenuItemButton | MenuItemWithChildren {
-  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, context);
-  const icon =
-    resolvedIcon && action.iconInContextMenu !== false
-      ? React.cloneElement(resolvedIcon, {
-          color: "currentColor",
-        })
-      : undefined;
-
-  if (resolvedChildren) {
-    const items = resolvedChildren
-      .map((a) => actionToMenuItem(a, context))
-      .filter(Boolean)
-      .filter((a) => a.visible);
-
-    return {
-      type: "submenu",
-      title,
-      icon,
-      items,
-      visible: visible && items.length > 0,
-    };
-  }
-
-  return {
-    type: "button",
-    title,
-    icon,
-    visible,
-    onClick: () => action.perform && action.perform(context),
-    selected: action.selected ? action.selected(context) : undefined,
-  };
-}
-
-export function actionToKBar(
-  action: Action,
-  context: ActionContext
-): CommandBarAction[] {
-  if (typeof action.visible === "function" && !action.visible(context)) {
-    return [];
-  }
-
-  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
-      )
-    : [];
-
-  return [
-    {
-      id: action.id,
-      name: resolvedName,
-      section: resolvedSection,
-      placeholder: resolvedPlaceholder,
-      keywords: action.keywords ?? "",
-      shortcut: action.shortcut || [],
-      icon: resolvedIcon,
-      perform: action.perform ? () => action?.perform?.(context) : undefined,
-    },
-    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
-  ].concat(children.map((child) => ({ ...child, parent: action.id })));
-}

app/actions/root.ts

@@ -1,15 +0,0 @@
-import { rootCollectionActions } from "./definitions/collections";
-import { rootDeveloperActions } from "./definitions/developer";
-import { rootDocumentActions } from "./definitions/documents";
-import { rootNavigationActions } from "./definitions/navigation";
-import { rootSettingsActions } from "./definitions/settings";
-import { rootUserActions } from "./definitions/users";
-
-export default [
-  ...rootCollectionActions,
-  ...rootDocumentActions,
-  ...rootUserActions,
-  ...rootNavigationActions,
-  ...rootSettingsActions,
-  ...rootDeveloperActions,
-];

app/actions/sections.ts

@@ -1,16 +0,0 @@
-import { ActionContext } from "~/types";
-
-export const CollectionSection = ({ t }: ActionContext) => t("Collection");
-
-export const DeveloperSection = ({ t }: ActionContext) => t("Debug");
-
-export const DocumentSection = ({ t }: ActionContext) => t("Document");
-
-export const SettingsSection = ({ t }: ActionContext) => t("Settings");
-
-export const NavigationSection = ({ t }: ActionContext) => t("Navigation");
-
-export const UserSection = ({ t }: ActionContext) => t("People");
-
-export const RecentSearchesSection = ({ t }: ActionContext) =>
-  t("Recent searches");

app/components/ActionButton.tsx

@@ -1,73 +0,0 @@
-import * as React from "react";
-import Tooltip, { Props as TooltipProps } from "~/components/Tooltip";
-import { Action, ActionContext } from "~/types";
-
-export type Props = {
-  /** Show the button in a disabled state */
-  disabled?: boolean;
-  /** Hide the button entirely if action is not applicable */
-  hideOnActionDisabled?: boolean;
-  /** Action to use on button */
-  action?: Action;
-  /** Context of action, must be provided with action */
-  context?: ActionContext;
-  /** If tooltip props are provided the button will be wrapped in a tooltip */
-  tooltip?: Omit<TooltipProps, "children">;
-};
-
-/**
- * Button that can be used to trigger an action definition.
- */
-const ActionButton = React.forwardRef(
-  (
-    {
-      action,
-      context,
-      tooltip,
-      hideOnActionDisabled,
-      ...rest
-    }: Props & React.HTMLAttributes<HTMLButtonElement>,
-    ref: React.Ref<HTMLButtonElement>
-  ) => {
-    const disabled = rest.disabled;
-
-    if (!context || !action) {
-      return <button {...rest} ref={ref} />;
-    }
-
-    if (action?.visible && !action.visible(context) && hideOnActionDisabled) {
-      return null;
-    }
-
-    const label =
-      typeof action.name === "function" ? action.name(context) : action.name;
-
-    const button = (
-      <button
-        {...rest}
-        aria-label={label}
-        disabled={disabled}
-        ref={ref}
-        onClick={
-          action?.perform && context
-            ? (ev) => {
-                ev.preventDefault();
-                ev.stopPropagation();
-                action.perform?.(context);
-              }
-            : rest.onClick
-        }
-      >
-        {rest.children ?? label}
-      </button>
-    );
-
-    if (tooltip) {
-      return <Tooltip {...tooltip}>{button}</Tooltip>;
-    }
-
-    return button;
-  }
-);
-
-export default ActionButton;

app/components/Actions.js

@@ -1,6 +1,7 @@
+// @flow
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import Flex from "~/components/Flex";
+import Flex from "components/Flex";
 
 export const Action = styled(Flex)`
   justify-content: center;

app/components/Analytics.js

@@ -1,26 +1,32 @@
+// @flow
 /* global ga */
 import * as React from "react";
-import env from "~/env";
+import env from "env";
 
-export default class Analytics extends React.Component {
+type Props = {
+  children?: React.Node,
+};
+
+export default class Analytics extends React.Component<Props> {
   componentDidMount() {
     if (!env.GOOGLE_ANALYTICS_ID) {
-      return;
+      return null;
     }
 
     // standard Google Analytics script
     window.ga =
       window.ga ||
-      function (...args) {
-        (ga.q = ga.q || []).push(args);
+      function () {
+        // $FlowIssue
+        (ga.q = ga.q || []).push(arguments);
       };
 
+    // $FlowIssue
     ga.l = +new Date();
     ga("create", env.GOOGLE_ANALYTICS_ID, "auto");
-    ga("set", {
-      dimension1: "true",
-    });
+    ga("set", { dimension1: "true" });
     ga("send", "pageview");
+
     const script = document.createElement("script");
     script.src = "https://www.google-analytics.com/analytics.js";
     script.async = true;

app/components/Arrow.js

@@ -1,3 +1,4 @@
+// @flow
 import * as React from "react";
 
 export default function Arrow() {

app/components/ArrowKeyNavigation.tsx

@@ -1,51 +0,0 @@
-import { observer } from "mobx-react";
-import * as React from "react";
-import {
-  useCompositeState,
-  Composite,
-  CompositeStateReturn,
-} from "reakit/Composite";
-
-type Props = {
-  children: (composite: CompositeStateReturn) => React.ReactNode;
-  onEscape?: (ev: React.KeyboardEvent<HTMLDivElement>) => void;
-};
-
-function ArrowKeyNavigation(
-  { children, onEscape, ...rest }: Props,
-  ref: React.RefObject<HTMLDivElement>
-) {
-  const composite = useCompositeState();
-
-  const handleKeyDown = React.useCallback(
-    (ev) => {
-      if (onEscape) {
-        if (ev.key === "Escape") {
-          onEscape(ev);
-        }
-
-        if (
-          ev.key === "ArrowUp" &&
-          composite.currentId === composite.items[0].id
-        ) {
-          onEscape(ev);
-        }
-      }
-    },
-    [composite.currentId, composite.items, onEscape]
-  );
-
-  return (
-    <Composite
-      {...rest}
-      {...composite}
-      onKeyDown={handleKeyDown}
-      role="menu"
-      ref={ref}
-    >
-      {children(composite)}
-    </Composite>
-  );
-}
-
-export default observer(React.forwardRef(ArrowKeyNavigation));

app/components/AuthLogo/GoogleLogo.js

@@ -1,9 +1,10 @@
+// @flow
 import * as React from "react";
 
 type Props = {
-  size?: number;
-  fill?: string;
-  className?: string;
+  size?: number,
+  fill?: string,
+  className?: string,
 };
 
 function GoogleLogo({ size = 34, fill = "#FFF", className }: Props) {

app/components/AuthLogo/MicrosoftLogo.js

@@ -1,9 +1,10 @@
+// @flow
 import * as React from "react";
 
 type Props = {
-  size?: number;
-  fill?: string;
-  className?: string;
+  size?: number,
+  fill?: string,
+  className?: string,
 };
 
 function MicrosoftLogo({ size = 34, fill = "#FFF", className }: Props) {

app/components/AuthLogo/SlackLogo.js

@@ -1,9 +1,10 @@
+// @flow
 import * as React from "react";
 
 type Props = {
-  size?: number;
-  fill?: string;
-  className?: string;
+  size?: number,
+  fill?: string,
+  className?: string,
 };
 
 function SlackLogo({ size = 34, fill = "#FFF", className }: Props) {

app/components/AuthLogo/index.js

@@ -1,13 +1,14 @@
+// @flow
 import * as React from "react";
 import styled from "styled-components";
 import GoogleLogo from "./GoogleLogo";
 import MicrosoftLogo from "./MicrosoftLogo";
 import SlackLogo from "./SlackLogo";
 
-type Props = {
-  providerName: string;
-  size?: number;
-};
+type Props = {|
+  providerName: string,
+  size?: number,
+|};
 
 function AuthLogo({ providerName, size = 16 }: Props) {
   switch (providerName) {
@@ -17,21 +18,18 @@ function AuthLogo({ providerName, size = 16 }: Props) {
           <SlackLogo size={size} />
         </Logo>
       );
-
     case "google":
       return (
         <Logo>
           <GoogleLogo size={size} />
         </Logo>
       );
-
     case "azure":
       return (
         <Logo>
           <MicrosoftLogo size={size} />
         </Logo>
       );
-
     default:
       return null;
   }

app/components/Authenticated.js

@@ -0,0 +1,62 @@
+// @flow
+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 useStores from "../hooks/useStores";
+import env from "env";
+
+type Props = {
+  children: React.Node,
+};
+
+const Authenticated = ({ children }: Props) => {
+  const { auth } = useStores();
+  const { i18n } = useTranslation();
+  const language = auth.user && auth.user.language;
+
+  // Watching for language changes here as this is the earliest point we have
+  // the user available and means we can start loading translations faster
+  React.useEffect(() => {
+    if (language && i18n.language !== language) {
+      // Languages are stored in en_US format in the database, however the
+      // frontend translation framework (i18next) expects en-US
+      i18n.changeLanguage(language.replace("_", "-"));
+    }
+  }, [i18n, language]);
+
+  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;
+  }
+
+  auth.logout(true);
+  return <Redirect to="/" />;
+};
+
+export default observer(Authenticated);

app/components/Authenticated.tsx

@@ -1,38 +0,0 @@
-import { observer } from "mobx-react";
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-import { Redirect } from "react-router-dom";
-import LoadingIndicator from "~/components/LoadingIndicator";
-import useStores from "~/hooks/useStores";
-import { changeLanguage } from "~/utils/language";
-
-type Props = {
-  children: JSX.Element;
-};
-
-const Authenticated = ({ children }: Props) => {
-  const { auth } = useStores();
-  const { i18n } = useTranslation();
-  const language = auth.user?.language;
-
-  // Watching for language changes here as this is the earliest point we have
-  // the user available and means we can start loading translations faster
-  React.useEffect(() => {
-    changeLanguage(language, i18n);
-  }, [i18n, language]);
-
-  if (auth.authenticated) {
-    const { user, team } = auth;
-
-    if (!team || !user) {
-      return <LoadingIndicator />;
-    }
-
-    return children;
-  }
-
-  auth.logout(true);
-  return <Redirect to="/" />;
-};
-
-export default observer(Authenticated);

app/components/AuthenticatedLayout.tsx

@@ -1,110 +0,0 @@
-import { observable } from "mobx";
-import { observer } from "mobx-react";
-import * as React from "react";
-import { withTranslation, WithTranslation } from "react-i18next";
-import { Switch, Route } from "react-router-dom";
-import RootStore from "~/stores/RootStore";
-import ErrorSuspended from "~/scenes/ErrorSuspended";
-import Layout from "~/components/Layout";
-import RegisterKeyDown from "~/components/RegisterKeyDown";
-import Sidebar from "~/components/Sidebar";
-import SettingsSidebar from "~/components/Sidebar/Settings";
-import history from "~/utils/history";
-import {
-  searchPath,
-  matchDocumentSlug as slug,
-  newDocumentPath,
-  settingsPath,
-} from "~/utils/routeHelpers";
-import Fade from "./Fade";
-import withStores from "./withStores";
-
-const DocumentHistory = React.lazy(
-  () =>
-    import(
-      /* webpackChunkName: "document-history" */
-      "~/components/DocumentHistory"
-    )
-);
-const CommandBar = React.lazy(
-  () =>
-    import(
-      /* webpackChunkName: "command-bar" */
-      "~/components/CommandBar"
-    )
-);
-
-type Props = WithTranslation & RootStore;
-
-@observer
-class AuthenticatedLayout extends React.Component<Props> {
-  scrollable: HTMLDivElement | null | undefined;
-
-  @observable
-  keyboardShortcutsOpen = false;
-
-  goToSearch = (ev: KeyboardEvent) => {
-    if (!ev.metaKey && !ev.ctrlKey) {
-      ev.preventDefault();
-      ev.stopPropagation();
-      history.push(searchPath());
-    }
-  };
-
-  goToNewDocument = (event: KeyboardEvent) => {
-    if (event.metaKey || event.altKey) {
-      return;
-    }
-
-    const { activeCollectionId } = this.props.ui;
-    if (!activeCollectionId) {
-      return;
-    }
-    const can = this.props.policies.abilities(activeCollectionId);
-    if (!can.update) {
-      return;
-    }
-    history.push(newDocumentPath(activeCollectionId));
-  };
-
-  render() {
-    const { auth } = this.props;
-    const { user, team } = auth;
-    const showSidebar = auth.authenticated && user && team;
-    if (auth.isSuspended) {
-      return <ErrorSuspended />;
-    }
-
-    const sidebar = showSidebar ? (
-      <Fade>
-        <Switch>
-          <Route path={settingsPath()} component={SettingsSidebar} />
-          <Route component={Sidebar} />
-        </Switch>
-      </Fade>
-    ) : undefined;
-
-    const rightRail = (
-      <React.Suspense fallback={null}>
-        <Switch>
-          <Route
-            path={`/doc/${slug}/history/:revisionId?`}
-            component={DocumentHistory}
-          />
-        </Switch>
-      </React.Suspense>
-    );
-
-    return (
-      <Layout title={team?.name} sidebar={sidebar} rightRail={rightRail}>
-        <RegisterKeyDown trigger="n" handler={this.goToNewDocument} />
-        <RegisterKeyDown trigger="t" handler={this.goToSearch} />
-        <RegisterKeyDown trigger="/" handler={this.goToSearch} />
-        {this.props.children}
-        <CommandBar />
-      </Layout>
-    );
-  }
-}
-
-export default withTranslation()(withStores(AuthenticatedLayout));

app/components/Avatar/Avatar.js

@@ -1,25 +1,23 @@
+// @flow
 import { observable } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
 import styled from "styled-components";
-import User from "~/models/User";
+import User from "models/User";
 import placeholder from "./placeholder.png";
 
-type Props = {
-  src: string;
-  size: number;
-  icon?: React.ReactNode;
-  user?: User;
-  alt?: string;
-  showBorder?: boolean;
-  onClick?: React.MouseEventHandler<HTMLImageElement>;
-  className?: string;
-};
+type Props = {|
+  src: string,
+  size: number,
+  icon?: React.Node,
+  user?: User,
+  onClick?: () => void,
+  className?: string,
+|};
 
 @observer
 class Avatar extends React.Component<Props> {
-  @observable
-  error: boolean;
+  @observable error: boolean;
 
   static defaultProps = {
     size: 24,
@@ -30,13 +28,13 @@ class Avatar extends React.Component<Props> {
   };
 
   render() {
-    const { src, icon, showBorder, ...rest } = this.props;
+    const { src, icon, ...rest } = this.props;
+
     return (
       <AvatarWrapper>
         <CircleImg
           onError={this.handleError}
           src={this.error ? placeholder : src}
-          $showBorder={showBorder}
           {...rest}
         />
         {icon && <IconWrapper>{icon}</IconWrapper>}
@@ -61,14 +59,12 @@ const IconWrapper = styled.div`
   height: 20px;
 `;
 
-const CircleImg = styled.img<{ size: number; $showBorder?: boolean }>`
+const CircleImg = styled.img`
   display: block;
   width: ${(props) => props.size}px;
   height: ${(props) => props.size}px;
   border-radius: 50%;
-  border: 2px solid
-    ${(props) =>
-      props.$showBorder === false ? "transparent" : props.theme.background};
+  border: 2px solid ${(props) => props.theme.background};
   flex-shrink: 0;
 `;
 

app/components/Avatar/AvatarWithPresence.js

@@ -0,0 +1,91 @@
+// @flow
+import { observable } from "mobx";
+import { observer } from "mobx-react";
+import { EditIcon } from "outline-icons";
+import * as React from "react";
+import { withTranslation, type TFunction } from "react-i18next";
+import styled from "styled-components";
+import User from "models/User";
+import UserProfile from "scenes/UserProfile";
+import Avatar from "components/Avatar";
+import Tooltip from "components/Tooltip";
+
+type Props = {
+  user: User,
+  isPresent: boolean,
+  isEditing: boolean,
+  isCurrentUser: boolean,
+  profileOnClick: boolean,
+  t: TFunction,
+};
+
+@observer
+class AvatarWithPresence extends React.Component<Props> {
+  @observable isOpen: boolean = false;
+
+  handleOpenProfile = () => {
+    this.isOpen = true;
+  };
+
+  handleCloseProfile = () => {
+    this.isOpen = false;
+  };
+
+  render() {
+    const { user, isPresent, isEditing, isCurrentUser, t } = this.props;
+
+    const action = isPresent
+      ? isEditing
+        ? t("currently editing")
+        : t("currently viewing")
+      : t("previously edited");
+
+    return (
+      <>
+        <Tooltip
+          tooltip={
+            <Centered>
+              <strong>{user.name}</strong> {isCurrentUser && `(${t("You")})`}
+              {action && (
+                <>
+                  <br />
+                  {action}
+                </>
+              )}
+            </Centered>
+          }
+          placement="bottom"
+        >
+          <AvatarWrapper isPresent={isPresent}>
+            <Avatar
+              src={user.avatarUrl}
+              onClick={
+                this.props.profileOnClick === false
+                  ? undefined
+                  : this.handleOpenProfile
+              }
+              size={32}
+              icon={isEditing ? <EditIcon size={16} color="#FFF" /> : undefined}
+            />
+          </AvatarWrapper>
+        </Tooltip>
+        <UserProfile
+          user={user}
+          isOpen={this.isOpen}
+          onRequestClose={this.handleCloseProfile}
+        />
+      </>
+    );
+  }
+}
+
+const Centered = styled.div`
+  text-align: center;
+`;
+
+const AvatarWrapper = styled.div`
+  opacity: ${(props) => (props.isPresent ? 1 : 0.5)};
+  transition: opacity 250ms ease-in-out;
+`;
+
+export default withTranslation()<AvatarWithPresence>(AvatarWithPresence);

app/components/Avatar/AvatarWithPresence.tsx

@@ -1,141 +0,0 @@
-import { observable } from "mobx";
-import { observer } from "mobx-react";
-import * as React from "react";
-import { WithTranslation, withTranslation } from "react-i18next";
-import styled, { css } from "styled-components";
-import User from "~/models/User";
-import UserProfile from "~/scenes/UserProfile";
-import Avatar from "~/components/Avatar";
-import Tooltip from "~/components/Tooltip";
-
-type Props = WithTranslation & {
-  user: User;
-  isPresent: boolean;
-  isEditing: boolean;
-  isObserving: boolean;
-  isCurrentUser: boolean;
-  profileOnClick: boolean;
-  onClick?: React.MouseEventHandler<HTMLImageElement>;
-};
-
-@observer
-class AvatarWithPresence extends React.Component<Props> {
-  @observable
-  isOpen = false;
-
-  handleOpenProfile = () => {
-    this.isOpen = true;
-  };
-
-  handleCloseProfile = () => {
-    this.isOpen = false;
-  };
-
-  render() {
-    const {
-      onClick,
-      user,
-      isPresent,
-      isEditing,
-      isObserving,
-      isCurrentUser,
-      t,
-    } = this.props;
-    const status = isPresent
-      ? isEditing
-        ? t("currently editing")
-        : t("currently viewing")
-      : t("previously edited");
-
-    return (
-      <>
-        <Tooltip
-          tooltip={
-            <Centered>
-              <strong>{user.name}</strong> {isCurrentUser && `(${t("You")})`}
-              {status && (
-                <>
-                  <br />
-                  {status}
-                </>
-              )}
-            </Centered>
-          }
-          placement="bottom"
-        >
-          <AvatarWrapper
-            $isPresent={isPresent}
-            $isObserving={isObserving}
-            $color={user.color}
-          >
-            <Avatar
-              src={user.avatarUrl}
-              onClick={
-                this.props.profileOnClick === false
-                  ? onClick
-                  : this.handleOpenProfile
-              }
-              size={32}
-            />
-          </AvatarWrapper>
-        </Tooltip>
-        {this.props.profileOnClick && (
-          <UserProfile
-            user={user}
-            isOpen={this.isOpen}
-            onRequestClose={this.handleCloseProfile}
-          />
-        )}
-      </>
-    );
-  }
-}
-
-const Centered = styled.div`
-  text-align: center;
-`;
-
-const AvatarWrapper = styled.div<{
-  $isPresent: boolean;
-  $isObserving: boolean;
-  $color: string;
-}>`
-  opacity: ${(props) => (props.$isPresent ? 1 : 0.5)};
-  transition: opacity 250ms ease-in-out;
-  border-radius: 50%;
-  position: relative;
-
-  &:after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    border-radius: 50%;
-    transition: border-color 100ms ease-in-out;
-    border: 2px solid transparent;
-    pointer-events: none;
-
-    ${(props) =>
-      props.$isObserving &&
-      css`
-        border: 2px solid ${props.$color};
-        box-shadow: inset 0 0 0 2px ${props.theme.background};
-
-        &:hover {
-          top: -1px;
-          left: -1px;
-          right: -1px;
-          bottom: -1px;
-        }
-      `}
-  }
-
-  &:hover:after {
-    border: 2px solid ${(props) => props.$color};
-    box-shadow: inset 0 0 0 2px ${(props) => props.theme.background};
-  }
-`;
-
-export default withTranslation()(AvatarWithPresence);

app/components/Avatar/index.js

@@ -1,6 +1,6 @@
+// @flow
 import Avatar from "./Avatar";
 import AvatarWithPresence from "./AvatarWithPresence";
 
 export { AvatarWithPresence };
-
 export default Avatar;

app/components/Badge.js

@@ -1,7 +1,7 @@
-import { transparentize } from "polished";
+// @flow
 import styled from "styled-components";
 
-const Badge = styled.span<{ yellow?: boolean; primary?: boolean }>`
+const Badge = styled.span`
   margin-left: 10px;
   padding: 1px 5px 2px;
   background-color: ${({ yellow, primary, theme }) =>
@@ -10,10 +10,8 @@ const Badge = styled.span<{ yellow?: boolean; primary?: boolean }>`
     primary ? theme.white : yellow ? theme.almostBlack : theme.textTertiary};
   border: 1px solid
     ${({ primary, yellow, theme }) =>
-      primary || yellow
-        ? "transparent"
-        : transparentize(0.4, theme.textTertiary)};
-  border-radius: 10px;
+      primary || yellow ? "transparent" : theme.textTertiary};
+  border-radius: 8px;
   font-size: 12px;
   font-weight: 500;
   user-select: none;

app/components/Branding.js

@@ -1,12 +1,11 @@
+// @flow
 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";
+import env from "env";
 
 type Props = {
-  href?: string;
+  href?: string,
 };
 
 function Branding({ href = env.URL }: Props) {
@@ -19,8 +18,9 @@ function Branding({ href = env.URL }: Props) {
 }
 
 const Link = styled.a`
-  justify-content: center;
-  padding-bottom: 16px;
+  position: fixed;
+  bottom: 0;
+  left: 0;
 
   font-weight: 600;
   font-size: 14px;
@@ -29,6 +29,7 @@ const Link = styled.a`
   color: ${(props) => props.theme.text};
   display: flex;
   align-items: center;
+  padding: 16px;
 
   svg {
     fill: ${(props) => props.theme.text};
@@ -37,14 +38,6 @@ const Link = styled.a`
   &:hover {
     background: ${(props) => props.theme.sidebarBackground};
   }
-
-  ${breakpoint("tablet")`
-    z-index: ${depths.sidebar + 1};
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    padding: 16px;
-  `};
 `;
 
 export default Branding;

app/components/Breadcrumb.js

@@ -1,49 +1,48 @@
+// @flow
 import { GoToIcon } from "outline-icons";
 import * as React from "react";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
-import Flex from "~/components/Flex";
-import BreadcrumbMenu from "~/menus/BreadcrumbMenu";
-import { MenuInternalLink } from "~/types";
+import Flex from "components/Flex";
+import BreadcrumbMenu from "menus/BreadcrumbMenu";
 
-type Props = {
-  items: MenuInternalLink[];
-  max?: number;
-  highlightFirstItem?: boolean;
-};
+type MenuItem = {|
+  icon?: React.Node,
+  title: React.Node,
+  to?: string,
+|};
 
-function Breadcrumb({
-  items,
-  highlightFirstItem,
-  children,
-  max = 2,
-}: React.PropsWithChildren<Props>) {
+type Props = {|
+  items: MenuItem[],
+  max?: number,
+  children?: React.Node,
+  highlightFirstItem?: boolean,
+|};
+
+function Breadcrumb({ items, highlightFirstItem, children, max = 2 }: Props) {
   const totalItems = items.length;
-  const topLevelItems: MenuInternalLink[] = [...items];
+  let topLevelItems: MenuItem[] = [...items];
   let overflowItems;
 
   // chop middle breadcrumbs and present a "..." menu instead
   if (totalItems > max) {
     const halfMax = Math.floor(max / 2);
     overflowItems = topLevelItems.splice(halfMax, totalItems - max);
-
     topLevelItems.splice(halfMax, 0, {
-      to: "",
-      type: "route",
-      title: <BreadcrumbMenu items={overflowItems as MenuInternalLink[]} />,
+      title: <BreadcrumbMenu items={overflowItems} />,
     });
   }
 
   return (
     <Flex justify="flex-start" align="center">
       {topLevelItems.map((item, index) => (
-        <React.Fragment key={String(item.to) || index}>
+        <React.Fragment key={item.to || index}>
           {item.icon}
           {item.to ? (
             <Item
               to={item.to}
               $withIcon={!!item.icon}
-              $highlight={!!highlightFirstItem && index === 0}
+              $highlight={highlightFirstItem && index === 0}
             >
               {item.title}
             </Item>
@@ -63,7 +62,7 @@ const Slash = styled(GoToIcon)`
   fill: ${(props) => props.theme.divider};
 `;
 
-const Item = styled(Link)<{ $highlight: boolean; $withIcon: boolean }>`
+const Item = styled(Link)`
   display: flex;
   flex-shrink: 1;
   min-width: 0;

app/components/Bubble.js

@@ -0,0 +1,39 @@
+// @flow
+import * as React from "react";
+import styled from "styled-components";
+import { bounceIn } from "shared/styles/animations";
+
+type Props = {|
+  count: number,
+|};
+
+const Bubble = ({ count }: Props) => {
+  if (!count) {
+    return null;
+  }
+
+  return <Count>{count}</Count>;
+};
+
+const Count = styled.div`
+  animation: ${bounceIn} 600ms;
+  transform-origin: center center;
+  color: ${(props) => props.theme.white};
+  background: ${(props) => props.theme.slateDark};
+  display: inline-block;
+  font-feature-settings: "tnum";
+  font-weight: 600;
+  font-size: 9px;
+  white-space: nowrap;
+  vertical-align: baseline;
+  min-width: 16px;
+  min-height: 16px;
+  line-height: 16px;
+  border-radius: 8px;
+  text-align: center;
+  padding: 0 4px;
+  margin-left: 8px;
+  user-select: none;
+`;
+
+export default Bubble;

app/components/Button.js

@@ -0,0 +1,165 @@
+// @flow
+import { ExpandedIcon } from "outline-icons";
+import { darken } from "polished";
+import * as React from "react";
+import styled from "styled-components";
+
+const RealButton = styled.button`
+  display: ${(props) => (props.fullwidth ? "block" : "inline-block")};
+  width: ${(props) => (props.fullwidth ? "100%" : "auto")};
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: ${(props) => props.theme.buttonBackground};
+  color: ${(props) => props.theme.buttonText};
+  box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 500;
+  height: 32px;
+  text-decoration: none;
+  flex-shrink: 0;
+  cursor: pointer;
+  user-select: none;
+
+  ${(props) =>
+    !props.borderOnHover &&
+    `
+      svg {
+        fill: ${props.iconColor || props.theme.buttonText};
+      }
+    `}
+
+  &::-moz-focus-inner {
+    padding: 0;
+    border: 0;
+  }
+
+  &:hover {
+    background: ${(props) => darken(0.05, props.theme.buttonBackground)};
+  }
+
+  &:disabled {
+    cursor: default;
+    pointer-events: none;
+    color: ${(props) => props.theme.white50};
+  }
+
+  ${(props) =>
+    props.$neutral &&
+    `
+    background: ${props.theme.buttonNeutralBackground};
+    color: ${props.theme.buttonNeutralText};
+    box-shadow: ${
+      props.borderOnHover
+        ? "none"
+        : `rgba(0, 0, 0, 0.07) 0px 1px 2px, ${props.theme.buttonNeutralBorder} 0 0 0 1px inset`
+    };
+
+    ${
+      props.borderOnHover
+        ? ""
+        : `svg {
+      fill: ${props.iconColor || props.theme.buttonNeutralText};
+    }`
+    }
+    
+
+    &:hover {
+      background: ${darken(0.05, props.theme.buttonNeutralBackground)};
+      box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, ${
+        props.theme.buttonNeutralBorder
+      } 0 0 0 1px inset;
+    }
+
+    &:disabled {
+      color: ${props.theme.textTertiary};
+    }
+  `} ${(props) =>
+    props.danger &&
+    `
+      background: ${props.theme.danger};
+      color: ${props.theme.white};
+
+      &:hover {
+        background: ${darken(0.05, props.theme.danger)};
+      }
+  `};
+`;
+
+const Label = styled.span`
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+
+  ${(props) => props.hasIcon && "padding-left: 4px;"};
+`;
+
+export const Inner = styled.span`
+  display: flex;
+  padding: 0 8px;
+  padding-right: ${(props) => (props.disclosure ? 2 : 8)}px;
+  line-height: ${(props) => (props.hasIcon ? 24 : 32)}px;
+  justify-content: center;
+  align-items: center;
+  min-height: 32px;
+
+  ${(props) => props.hasIcon && props.hasText && "padding-left: 4px;"};
+  ${(props) => props.hasIcon && !props.hasText && "padding: 0 4px;"};
+`;
+
+export type Props = {|
+  type?: "button" | "submit",
+  value?: string,
+  icon?: React.Node,
+  iconColor?: string,
+  className?: string,
+  children?: React.Node,
+  innerRef?: React.ElementRef<any>,
+  disclosure?: boolean,
+  neutral?: boolean,
+  danger?: boolean,
+  primary?: boolean,
+  disabled?: boolean,
+  fullwidth?: boolean,
+  autoFocus?: boolean,
+  style?: Object,
+  as?: React.ComponentType<any>,
+  to?: string,
+  onClick?: (event: SyntheticEvent<>) => mixed,
+  borderOnHover?: boolean,
+
+  "data-on"?: string,
+  "data-event-category"?: string,
+  "data-event-action"?: string,
+|};
+
+const Button = React.forwardRef<Props, HTMLButtonElement>(
+  (
+    {
+      type = "text",
+      icon,
+      children,
+      value,
+      disclosure,
+      neutral,
+      ...rest
+    }: Props,
+    innerRef
+  ) => {
+    const hasText = children !== undefined || value !== undefined;
+    const hasIcon = icon !== undefined;
+
+    return (
+      <RealButton type={type} ref={innerRef} $neutral={neutral} {...rest}>
+        <Inner hasIcon={hasIcon} hasText={hasText} disclosure={disclosure}>
+          {hasIcon && icon}
+          {hasText && <Label hasIcon={hasIcon}>{children || value}</Label>}
+          {disclosure && <ExpandedIcon />}
+        </Inner>
+      </RealButton>
+    );
+  }
+);
+
+export default Button;

app/components/Button.tsx

@@ -1,186 +0,0 @@
-import { LocationDescriptor } from "history";
-import { ExpandedIcon } from "outline-icons";
-import { darken, lighten } from "polished";
-import * as React from "react";
-import styled from "styled-components";
-
-const RealButton = styled.button<{
-  fullwidth?: boolean;
-  borderOnHover?: boolean;
-  $neutral?: boolean;
-  danger?: boolean;
-  iconColor?: string;
-}>`
-  display: ${(props) => (props.fullwidth ? "block" : "inline-block")};
-  width: ${(props) => (props.fullwidth ? "100%" : "auto")};
-  margin: 0;
-  padding: 0;
-  border: 0;
-  background: ${(props) => props.theme.buttonBackground};
-  color: ${(props) => props.theme.buttonText};
-  box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px;
-  border-radius: 4px;
-  font-size: 14px;
-  font-weight: 500;
-  height: 32px;
-  text-decoration: none;
-  flex-shrink: 0;
-  cursor: pointer;
-  user-select: none;
-  appearance: none !important;
-
-  ${(props) =>
-    !props.borderOnHover &&
-    `
-      svg {
-        fill: ${props.iconColor || "currentColor"};
-      }
-    `}
-
-  &::-moz-focus-inner {
-    padding: 0;
-    border: 0;
-  }
-
-  &:hover:not(:disabled),
-  &[aria-expanded="true"] {
-    background: ${(props) => darken(0.05, props.theme.buttonBackground)};
-  }
-
-  &:disabled {
-    cursor: default;
-    pointer-events: none;
-    color: ${(props) => props.theme.white50};
-    background: ${(props) => lighten(0.2, props.theme.buttonBackground)};
-
-    svg {
-      fill: ${(props) => props.theme.white50};
-    }
-  }
-
-  ${(props) =>
-    props.$neutral &&
-    `
-    background: ${props.theme.buttonNeutralBackground};
-    color: ${props.theme.buttonNeutralText};
-    box-shadow: ${
-      props.borderOnHover
-        ? "none"
-        : `rgba(0, 0, 0, 0.07) 0px 1px 2px, ${props.theme.buttonNeutralBorder} 0 0 0 1px inset`
-    };
-
-    ${
-      props.borderOnHover
-        ? ""
-        : `svg {
-      fill: ${props.iconColor || "currentColor"};
-    }`
-    }
-
-
-    &:hover:not(:disabled),
-    &[aria-expanded="true"] {
-      background: ${
-        props.borderOnHover
-          ? props.theme.buttonNeutralBackground
-          : darken(0.05, props.theme.buttonNeutralBackground)
-      };
-      box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, ${
-        props.theme.buttonNeutralBorder
-      } 0 0 0 1px inset;
-    }
-
-    &:disabled {
-      color: ${props.theme.textTertiary};
-      background: none;
-
-      svg {
-        fill: currentColor;
-      }
-    }
-  `}
-
-  ${(props) =>
-    props.danger &&
-    `
-      background: ${props.theme.danger};
-      color: ${props.theme.white};
-
-      &:hover:not(:disabled),
-      &[aria-expanded="true"] {
-        background: ${darken(0.05, props.theme.danger)};
-      }
-
-      &:disabled {
-        background: ${lighten(0.05, props.theme.danger)};
-      }
-
-      &.focus-visible {
-        outline-color: ${darken(0.2, props.theme.danger)} !important;
-      }
-  `};
-`;
-
-const Label = styled.span<{ hasIcon?: boolean }>`
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-
-  ${(props) => props.hasIcon && "padding-left: 4px;"};
-`;
-
-export const Inner = styled.span<{
-  disclosure?: boolean;
-  hasIcon?: boolean;
-  hasText?: boolean;
-}>`
-  display: flex;
-  padding: 0 8px;
-  padding-right: ${(props) => (props.disclosure ? 2 : 8)}px;
-  line-height: ${(props) => (props.hasIcon ? 24 : 32)}px;
-  justify-content: center;
-  align-items: center;
-  min-height: 32px;
-
-  ${(props) => props.hasIcon && props.hasText && "padding-left: 4px;"};
-  ${(props) => props.hasIcon && !props.hasText && "padding: 0 4px;"};
-`;
-
-export type Props<T> = {
-  icon?: React.ReactNode;
-  iconColor?: string;
-  children?: React.ReactNode;
-  disclosure?: boolean;
-  neutral?: boolean;
-  danger?: boolean;
-  primary?: boolean;
-  fullwidth?: boolean;
-  as?: T;
-  to?: LocationDescriptor;
-  borderOnHover?: boolean;
-  href?: string;
-  "data-on"?: string;
-  "data-event-category"?: string;
-  "data-event-action"?: string;
-};
-
-const Button = <T extends React.ElementType = "button">(
-  props: Props<T> & React.ComponentPropsWithoutRef<T>,
-  ref: React.Ref<HTMLButtonElement>
-) => {
-  const { type, icon, children, value, disclosure, neutral, ...rest } = props;
-  const hasText = children !== undefined || value !== undefined;
-  const hasIcon = icon !== undefined;
-
-  return (
-    <RealButton type={type || "button"} ref={ref} $neutral={neutral} {...rest}>
-      <Inner hasIcon={hasIcon} hasText={hasText} disclosure={disclosure}>
-        {hasIcon && icon}
-        {hasText && <Label hasIcon={hasIcon}>{children || value}</Label>}
-        {disclosure && <ExpandedIcon color="currentColor" />}
-      </Inner>
-    </RealButton>
-  );
-};
-
-export default React.forwardRef(Button);

app/components/ButtonLarge.js

@@ -1,3 +1,4 @@
+// @flow
 import styled from "styled-components";
 import Button, { Inner } from "./Button";
 

app/components/ButtonLink.js

@@ -0,0 +1,23 @@
+// @flow
+import * as React from "react";
+import styled from "styled-components";
+
+type Props = {
+  onClick: (ev: SyntheticEvent<>) => void,
+  children: React.Node,
+};
+
+export default function ButtonLink(props: Props) {
+  return <Button {...props} />;
+}
+
+const Button = styled.button`
+  margin: 0;
+  padding: 0;
+  border: 0;
+  color: ${(props) => props.theme.link};
+  line-height: inherit;
+  background: none;
+  text-decoration: none;
+  cursor: pointer;
+`;

app/components/ButtonLink.tsx

@@ -1,14 +0,0 @@
-import styled from "styled-components";
-
-const ButtonLink = styled.button`
-  margin: 0;
-  padding: 0;
-  border: 0;
-  color: ${(props) => props.theme.link};
-  line-height: inherit;
-  background: none;
-  text-decoration: none;
-  cursor: pointer;
-`;
-
-export default ButtonLink;

app/components/CenteredContent.js

@@ -1,19 +1,20 @@
+// @flow
 import * as React from "react";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 
-type Props = {
-  withStickyHeader?: boolean;
-};
+type Props = {|
+  children?: React.Node,
+  withStickyHeader?: boolean,
+|};
 
-const Container = styled.div<Props>`
+const Container = styled.div`
   width: 100%;
   max-width: 100vw;
   padding: ${(props) => (props.withStickyHeader ? "4px 12px" : "60px 12px")};
 
   ${breakpoint("tablet")`
-    padding: ${(props: Props) =>
-      props.withStickyHeader ? "4px 44px 60px" : "60px 44px"};
+    padding: ${(props) => (props.withStickyHeader ? "4px 60px" : "60px")};
   `};
 `;
 
@@ -26,7 +27,7 @@ const Content = styled.div`
   `};
 `;
 
-const CenteredContent: React.FC<Props> = ({ children, ...rest }) => {
+const CenteredContent = ({ children, ...rest }: Props) => {
   return (
     <Container {...rest}>
       <Content>{children}</Content>

app/components/Checkbox.js

@@ -0,0 +1,65 @@
+// @flow
+import * as React from "react";
+import { VisuallyHidden } from "reakit/VisuallyHidden";
+import styled from "styled-components";
+import HelpText from "components/HelpText";
+
+export type Props = {|
+  checked?: boolean,
+  label?: React.Node,
+  labelHidden?: boolean,
+  className?: string,
+  name?: string,
+  disabled?: boolean,
+  onChange: (event: SyntheticInputEvent<HTMLInputElement>) => mixed,
+  note?: string,
+  short?: boolean,
+  small?: boolean,
+|};
+
+const LabelText = styled.span`
+  font-weight: 500;
+  margin-left: ${(props) => (props.small ? "6px" : "10px")};
+  ${(props) => (props.small ? `color: ${props.theme.textSecondary}` : "")};
+`;
+
+const Wrapper = styled.div`
+  padding-bottom: 8px;
+  ${(props) => (props.small ? "font-size: 14px" : "")};
+  width: 100%;
+`;
+
+const Label = styled.label`
+  display: flex;
+  align-items: center;
+  user-select: none;
+`;
+
+export default function Checkbox({
+  label,
+  labelHidden,
+  note,
+  className,
+  small,
+  short,
+  ...rest
+}: Props) {
+  const wrappedLabel = <LabelText small={small}>{label}</LabelText>;
+
+  return (
+    <>
+      <Wrapper small={small}>
+        <Label>
+          <input type="checkbox" {...rest} />
+          {label &&
+            (labelHidden ? (
+              <VisuallyHidden>{wrappedLabel}</VisuallyHidden>
+            ) : (
+              wrappedLabel
+            ))}
+        </Label>
+        {note && <HelpText small>{note}</HelpText>}
+      </Wrapper>
+    </>
+  );
+}

app/components/CircularProgressBar.tsx

@@ -1,80 +0,0 @@
-import React from "react";
-import styled, { useTheme } from "styled-components";
-
-const cleanPercentage = (percentage: number) => {
-  const tooLow = !Number.isFinite(+percentage) || percentage < 0;
-  const tooHigh = percentage > 100;
-  return tooLow ? 0 : tooHigh ? 100 : +percentage;
-};
-
-const Circle = ({
-  color,
-  percentage,
-  offset,
-}: {
-  color: string;
-  percentage?: number;
-  offset: number;
-}) => {
-  const radius = offset * 0.7;
-  const circumference = 2 * Math.PI * radius;
-  let strokePercentage;
-
-  if (percentage) {
-    // because the circle is so small, anything greater than 85% appears like 100%
-    percentage = percentage > 85 && percentage < 100 ? 85 : percentage;
-    strokePercentage = percentage
-      ? ((100 - percentage) * circumference) / 100
-      : 0;
-  }
-
-  return (
-    <circle
-      r={radius}
-      cx={offset}
-      cy={offset}
-      fill="none"
-      stroke={strokePercentage !== circumference ? color : ""}
-      strokeWidth={2.5}
-      strokeDasharray={circumference}
-      strokeDashoffset={percentage ? strokePercentage : 0}
-      strokeLinecap="round"
-      style={{
-        transition: "stroke-dashoffset 0.6s ease 0s",
-      }}
-    ></circle>
-  );
-};
-
-const CircularProgressBar = ({
-  percentage,
-  size = 16,
-}: {
-  percentage: number;
-  size?: number;
-}) => {
-  const theme = useTheme();
-  percentage = cleanPercentage(percentage);
-  const offset = Math.floor(size / 2);
-
-  return (
-    <SVG width={size} height={size}>
-      <g transform={`rotate(-90 ${offset} ${offset})`}>
-        <Circle color={theme.progressBarBackground} offset={offset} />
-        {percentage > 0 && (
-          <Circle
-            color={theme.primary}
-            percentage={percentage}
-            offset={offset}
-          />
-        )}
-      </g>
-    </SVG>
-  );
-};
-
-const SVG = styled.svg`
-  flex-shrink: 0;
-`;
-
-export default CircularProgressBar;

app/components/ClickablePadding.js

@@ -1,6 +1,7 @@
+// @flow
 import styled from "styled-components";
 
-const ClickablePadding = styled.div<{ grow?: boolean }>`
+const ClickablePadding = styled.div`
   min-height: 10em;
   cursor: ${({ onClick }) => (onClick ? "text" : "default")};
   ${({ grow }) => grow && `flex-grow: 100;`};

app/components/Collaborators.js

@@ -0,0 +1,109 @@
+// @flow
+import { sortBy, filter, uniq } 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 breakpoint from "styled-components-breakpoint";
+import Document from "models/Document";
+import { AvatarWithPresence } from "components/Avatar";
+import DocumentViews from "components/DocumentViews";
+import Facepile from "components/Facepile";
+import NudeButton from "components/NudeButton";
+import Popover from "components/Popover";
+import useStores from "hooks/useStores";
+
+type Props = {|
+  document: Document,
+  currentUserId: string,
+|};
+
+function Collaborators(props: Props) {
+  const { t } = useTranslation();
+  const { users, presence } = useStores();
+  const { document, currentUserId } = props;
+
+  let documentPresence = presence.get(document.id);
+  documentPresence = documentPresence
+    ? Array.from(documentPresence.values())
+    : [];
+
+  const presentIds = documentPresence.map((p) => p.userId);
+  const editingIds = documentPresence
+    .filter((p) => p.isEditing)
+    .map((p) => p.userId);
+
+  // ensure currently present via websocket are always ordered first
+  const collaborators = React.useMemo(
+    () =>
+      sortBy(
+        filter(
+          users.orderedData,
+          (user) =>
+            presentIds.includes(user.id) ||
+            document.collaboratorIds.includes(user.id)
+        ),
+        (user) => presentIds.includes(user.id)
+      ),
+    [document.collaboratorIds, users.orderedData, presentIds]
+  );
+
+  // load any users we don't know about
+  React.useEffect(() => {
+    if (users.isFetching) {
+      return;
+    }
+
+    uniq([...document.collaboratorIds, ...presentIds]).forEach((userId) => {
+      if (!users.get(userId)) {
+        return users.fetch(userId);
+      }
+    });
+  }, [document, users, presentIds, document.collaboratorIds]);
+
+  const popover = usePopoverState({
+    gutter: 0,
+    placement: "bottom-end",
+  });
+
+  return (
+    <>
+      <PopoverDisclosure {...popover}>
+        {(props) => (
+          <NudeButton width={collaborators.length * 32} height={32} {...props}>
+            <FacepileHiddenOnMobile
+              users={collaborators}
+              renderAvatar={(user) => {
+                const isPresent = presentIds.includes(user.id);
+                const isEditing = editingIds.includes(user.id);
+
+                return (
+                  <AvatarWithPresence
+                    key={user.id}
+                    user={user}
+                    isPresent={isPresent}
+                    isEditing={isEditing}
+                    isCurrentUser={currentUserId === user.id}
+                    profileOnClick={false}
+                  />
+                );
+              }}
+            />
+          </NudeButton>
+        )}
+      </PopoverDisclosure>
+      <Popover {...popover} width={300} aria-label={t("Viewers")} tabIndex={0}>
+        <DocumentViews document={document} isOpen={popover.visible} />
+      </Popover>
+    </>
+  );
+}
+
+const FacepileHiddenOnMobile = styled(Facepile)`
+  ${breakpoint("mobile", "tablet")`
+    display: none;
+  `};
+`;
+
+export default observer(Collaborators);

app/components/Collaborators.tsx

@@ -1,121 +0,0 @@
-import { sortBy, filter, uniq, isEqual } from "lodash";
-import { observer } from "mobx-react";
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-import { usePopoverState, PopoverDisclosure } from "reakit/Popover";
-import Document from "~/models/Document";
-import { AvatarWithPresence } from "~/components/Avatar";
-import DocumentViews from "~/components/DocumentViews";
-import Facepile from "~/components/Facepile";
-import NudeButton from "~/components/NudeButton";
-import Popover from "~/components/Popover";
-import useCurrentTeam from "~/hooks/useCurrentTeam";
-import useCurrentUser from "~/hooks/useCurrentUser";
-import useStores from "~/hooks/useStores";
-
-type Props = {
-  document: Document;
-};
-
-function Collaborators(props: Props) {
-  const { t } = useTranslation();
-  const user = useCurrentUser();
-  const team = useCurrentTeam();
-  const currentUserId = user?.id;
-  const [requestedUserIds, setRequestedUserIds] = React.useState<string[]>([]);
-  const { users, presence, ui } = useStores();
-  const { document } = props;
-  const documentPresence = presence.get(document.id);
-  const documentPresenceArray = documentPresence
-    ? Array.from(documentPresence.values())
-    : [];
-
-  const presentIds = documentPresenceArray.map((p) => p.userId);
-  const editingIds = documentPresenceArray
-    .filter((p) => p.isEditing)
-    .map((p) => p.userId);
-
-  // ensure currently present via websocket are always ordered first
-  const collaborators = React.useMemo(
-    () =>
-      sortBy(
-        filter(
-          users.orderedData,
-          (user) =>
-            (presentIds.includes(user.id) ||
-              document.collaboratorIds.includes(user.id)) &&
-            !user.isSuspended
-        ),
-        (user) => presentIds.includes(user.id)
-      ),
-    [document.collaboratorIds, users.orderedData, presentIds]
-  );
-
-  // load any users we don't yet have in memory
-  React.useEffect(() => {
-    const ids = uniq([...document.collaboratorIds, ...presentIds])
-      .filter((userId) => !users.get(userId))
-      .sort();
-
-    if (!isEqual(requestedUserIds, ids) && ids.length > 0) {
-      setRequestedUserIds(ids);
-      users.fetchPage({ ids, limit: 100 });
-    }
-  }, [document, users, presentIds, document.collaboratorIds, requestedUserIds]);
-
-  const popover = usePopoverState({
-    gutter: 0,
-    placement: "bottom-end",
-  });
-
-  return (
-    <>
-      <PopoverDisclosure {...popover}>
-        {(props) => (
-          <NudeButton width={collaborators.length * 32} height={32} {...props}>
-            <Facepile
-              users={collaborators}
-              renderAvatar={(collaborator) => {
-                const isPresent = presentIds.includes(collaborator.id);
-                const isEditing = editingIds.includes(collaborator.id);
-                const isObserving = ui.observingUserId === collaborator.id;
-                const isObservable =
-                  team.collaborativeEditing && collaborator.id !== user.id;
-
-                return (
-                  <AvatarWithPresence
-                    key={collaborator.id}
-                    user={collaborator}
-                    isPresent={isPresent}
-                    isEditing={isEditing}
-                    isObserving={isObserving}
-                    isCurrentUser={currentUserId === collaborator.id}
-                    profileOnClick={false}
-                    onClick={
-                      isObservable
-                        ? (ev) => {
-                            if (isPresent) {
-                              ev.preventDefault();
-                              ev.stopPropagation();
-                              ui.setObservingUser(
-                                isObserving ? undefined : collaborator.id
-                              );
-                            }
-                          }
-                        : undefined
-                    }
-                  />
-                );
-              }}
-            />
-          </NudeButton>
-        )}
-      </PopoverDisclosure>
-      <Popover {...popover} width={300} aria-label={t("Viewers")} tabIndex={0}>
-        <DocumentViews document={document} isOpen={popover.visible} />
-      </Popover>
-    </>
-  );
-}
-
-export default observer(Collaborators);

app/components/CollectionDeleteDialog.tsx

@@ -1,69 +0,0 @@
-import { observer } from "mobx-react";
-import * as React from "react";
-import { useTranslation, Trans } from "react-i18next";
-import { useHistory } from "react-router-dom";
-import Collection from "~/models/Collection";
-import ConfirmationDialog from "~/components/ConfirmationDialog";
-import Text from "~/components/Text";
-import useCurrentTeam from "~/hooks/useCurrentTeam";
-import useStores from "~/hooks/useStores";
-import { homePath } from "~/utils/routeHelpers";
-
-type Props = {
-  collection: Collection;
-  onSubmit: () => void;
-};
-
-function CollectionDeleteDialog({ collection, onSubmit }: Props) {
-  const team = useCurrentTeam();
-  const { ui } = useStores();
-  const history = useHistory();
-  const { t } = useTranslation();
-
-  const handleSubmit = async () => {
-    const redirect = collection.id === ui.activeCollectionId;
-    await collection.delete();
-    onSubmit();
-    if (redirect) {
-      history.push(homePath());
-    }
-  };
-
-  return (
-    <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."
-            values={{
-              collectionName: collection.name,
-            }}
-            components={{
-              em: <strong />,
-            }}
-          />
-        </Text>
-        {team.defaultCollectionId === collection.id ? (
-          <Text type="secondary">
-            <Trans
-              defaults="Also, <em>{{collectionName}}</em> is being used as the start view – deleting it will reset the start view to the Home page."
-              values={{
-                collectionName: collection.name,
-              }}
-              components={{
-                em: <strong />,
-              }}
-            />
-          </Text>
-        ) : null}
-      </>
-    </ConfirmationDialog>
-  );
-}
-
-export default observer(CollectionDeleteDialog);

app/components/CollectionDescription.js

@@ -1,31 +1,29 @@
-import debounce from "lodash/debounce";
+// @flow
 import { observer } from "mobx-react";
 import { transparentize } from "polished";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
-import Collection from "~/models/Collection";
-import Arrow from "~/components/Arrow";
-import ButtonLink from "~/components/ButtonLink";
-import Editor from "~/components/Editor";
-import LoadingIndicator from "~/components/LoadingIndicator";
-import NudeButton from "~/components/NudeButton";
-import usePolicy from "~/hooks/usePolicy";
-import useStores from "~/hooks/useStores";
-import useToasts from "~/hooks/useToasts";
+import Collection from "models/Collection";
+import Arrow from "components/Arrow";
+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 useStores from "hooks/useStores";
 
-type Props = {
-  collection: Collection;
-};
+type Props = {|
+  collection: Collection,
+|};
 
 function CollectionDescription({ collection }: Props) {
-  const { collections } = useStores();
-  const { showToast } = useToasts();
+  const { collections, ui, policies } = useStores();
   const { t } = useTranslation();
   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 = policies.abilities(collection.id);
 
   const handleStartEditing = React.useCallback(() => {
     setEditing(true);
@@ -40,7 +38,6 @@ function CollectionDescription({ collection }: Props) {
       event.preventDefault();
 
       if (isExpanded && document.activeElement) {
-        // @ts-expect-error ts-migrate(2339) FIXME: Property 'blur' does not exist on type 'Element'.
         document.activeElement.blur();
       }
 
@@ -49,25 +46,21 @@ function CollectionDescription({ collection }: Props) {
     [isExpanded]
   );
 
-  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 handleSave = useDebouncedCallback(async (getValue) => {
+    try {
+      await collection.save({
+        description: getValue(),
+      });
+      setDirty(false);
+    } catch (err) {
+      ui.showToast(
+        t("Sorry, an error occurred saving the collection", {
+          type: "error",
+        })
+      );
+      throw err;
+    }
+  }, 1000);
 
   const handleChange = React.useCallback(
     (getValue) => {
@@ -80,26 +73,21 @@ function CollectionDescription({ collection }: Props) {
   React.useEffect(() => {
     setEditing(false);
   }, [collection.id]);
+
   const placeholder = `${t("Add a description")}…`;
   const key = isEditing || isDirty ? "draft" : collection.updatedAt;
 
   return (
     <MaxHeight data-editing={isEditing} data-expanded={isExpanded}>
-      <Input data-editing={isEditing} data-expanded={isExpanded}>
+      <Input
+        $isEditable={can.update}
+        data-editing={isEditing}
+        data-expanded={isExpanded}
+      >
         <span onClick={can.update ? handleStartEditing : undefined}>
           {collections.isSaving && <LoadingIndicator />}
           {collection.hasDescription || isEditing || isDirty ? (
-            <React.Suspense
-              fallback={
-                <Placeholder
-                  onClick={() => {
-                    //
-                  }}
-                >
-                  Loading…
-                </Placeholder>
-              }
-            >
+            <React.Suspense fallback={<Placeholder>Loading…</Placeholder>}>
               <Editor
                 key={key}
                 defaultValue={collection.description || ""}
@@ -109,20 +97,13 @@ function CollectionDescription({ collection }: Props) {
                 autoFocus={isEditing}
                 onBlur={handleStopEditing}
                 maxLength={1000}
-                embedsDisabled
+                disableEmbeds
                 readOnlyWriteCheckboxes
+                grow
               />
             </React.Suspense>
           ) : (
-            can.update && (
-              <Placeholder
-                onClick={() => {
-                  //
-                }}
-              >
-                {placeholder}
-              </Placeholder>
-            )
+            can.update && <Placeholder>{placeholder}</Placeholder>
           )}
         </span>
       </Input>

app/components/CollectionIcon.js

@@ -1,45 +1,36 @@
+// @flow
 import { observer } from "mobx-react";
 import { CollectionIcon } from "outline-icons";
 import { getLuminance } from "polished";
 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";
+import Collection from "models/Collection";
+import { icons } from "components/IconPicker";
+import useStores from "hooks/useStores";
 
 type Props = {
-  collection: Collection;
-  expanded?: boolean;
-  size?: number;
-  color?: string;
+  collection: Collection,
+  expanded?: boolean,
+  size?: number,
 };
 
-function ResolvedCollectionIcon({
-  collection,
-  color: inputColor,
-  expanded,
-  size,
-}: Props) {
+function ResolvedCollectionIcon({ collection, expanded, size }: Props) {
   const { ui } = useStores();
 
   // If the chosen icon color is very dark then we invert it in dark mode
   // otherwise it will be impossible to see against the dark background.
   const color =
-    inputColor ||
-    (ui.resolvedTheme === "dark" && collection.color !== "currentColor"
-      ? getLuminance(collection.color) > 0.09
+    ui.resolvedTheme === "dark" && collection.color !== "currentColor"
+      ? getLuminance(collection.color) > 0.12
         ? collection.color
         : "currentColor"
-      : collection.color);
+      : collection.color;
 
   if (collection.icon && collection.icon !== "collection") {
     try {
       const Component = icons[collection.icon].component;
       return <Component color={color} size={size} />;
     } catch (error) {
-      Logger.warn("Failed to render custom icon", {
-        icon: collection.icon,
-      });
+      console.warn("Failed to render custom icon " + collection.icon);
     }
   }
 

app/components/CommandBar.tsx

@@ -1,131 +0,0 @@
-import { useKBar, KBarPositioner, KBarAnimator, KBarSearch } from "kbar";
-import { observer } from "mobx-react";
-import { QuestionMarkIcon } from "outline-icons";
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-import { Portal } from "react-portal";
-import styled from "styled-components";
-import breakpoint from "styled-components-breakpoint";
-import { depths } from "@shared/styles";
-import CommandBarResults from "~/components/CommandBarResults";
-import SearchActions from "~/components/SearchActions";
-import rootActions from "~/actions/root";
-import useCommandBarActions from "~/hooks/useCommandBarActions";
-import useSettingsActions from "~/hooks/useSettingsAction";
-import useStores from "~/hooks/useStores";
-import { CommandBarAction } from "~/types";
-import { metaDisplay } from "~/utils/keyboard";
-import Text from "./Text";
-
-function CommandBar() {
-  const { t } = useTranslation();
-  const { ui } = useStores();
-  const settingsActions = useSettingsActions();
-  const commandBarActions = React.useMemo(
-    () => [...rootActions, settingsActions],
-    [settingsActions]
-  );
-
-  useCommandBarActions(commandBarActions);
-
-  const { rootAction } = useKBar((state) => ({
-    rootAction: state.currentRootActionId
-      ? ((state.actions[
-          state.currentRootActionId
-        ] as unknown) as CommandBarAction)
-      : undefined,
-  }));
-
-  return (
-    <>
-      <SearchActions />
-      <KBarPortal>
-        <Positioner>
-          <Animator>
-            <SearchInput
-              placeholder={`${
-                rootAction?.placeholder ||
-                rootAction?.name ||
-                t("Type a command or search")
-              }…`}
-            />
-            <CommandBarResults />
-            {ui.commandBarOpenedFromSidebar && (
-              <Hint size="small" type="tertiary">
-                <QuestionMarkIcon size={18} color="currentColor" />
-                {t(
-                  "Open search from anywhere with the {{ shortcut }} shortcut",
-                  {
-                    shortcut: `${metaDisplay} + k`,
-                  }
-                )}
-              </Hint>
-            )}
-          </Animator>
-        </Positioner>
-      </KBarPortal>
-    </>
-  );
-}
-
-const KBarPortal: React.FC = ({ children }) => {
-  const { showing } = useKBar((state) => ({
-    showing: state.visualState !== "hidden",
-  }));
-
-  if (!showing) {
-    return null;
-  }
-
-  return <Portal>{children}</Portal>;
-};
-
-const Hint = styled(Text)`
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  border-top: 1px solid ${(props) => props.theme.background};
-  margin: 1px 0 0;
-  padding: 6px 16px;
-  width: 100%;
-`;
-
-const Positioner = styled(KBarPositioner)`
-  z-index: ${depths.commandBar};
-`;
-
-const SearchInput = styled(KBarSearch)`
-  padding: 16px 20px;
-  width: 100%;
-  outline: none;
-  border: none;
-  background: ${(props) => props.theme.menuBackground};
-  color: ${(props) => props.theme.text};
-
-  &:disabled,
-  &::placeholder {
-    color: ${(props) => props.theme.placeholder};
-  }
-`;
-
-const Animator = styled(KBarAnimator)`
-  max-width: 600px;
-  max-height: 75vh;
-  width: 90vw;
-  background: ${(props) => props.theme.menuBackground};
-  color: ${(props) => props.theme.text};
-  border-radius: 8px;
-  overflow: hidden;
-  box-shadow: rgb(0 0 0 / 40%) 0px 16px 60px;
-  transition: max-width 0.2s ease-in-out;
-
-  ${breakpoint("desktopLarge")`
-    max-width: 740px;
-  `};
-
-  @media print {
-    display: none;
-  }
-`;
-
-export default observer(CommandBar);

app/components/CommandBarItem.tsx

@@ -1,122 +0,0 @@
-import { ActionImpl } from "kbar";
-import { ArrowIcon, BackIcon } from "outline-icons";
-import * as React from "react";
-import styled, { css, useTheme } from "styled-components";
-import Flex from "~/components/Flex";
-import Key from "~/components/Key";
-
-type Props = {
-  action: ActionImpl;
-  active: boolean;
-  currentRootActionId: string | null | undefined;
-};
-
-function CommandBarItem(
-  { action, active, currentRootActionId }: Props,
-  ref: React.RefObject<HTMLDivElement>
-) {
-  const theme = useTheme();
-  const ancestors = React.useMemo(() => {
-    if (!currentRootActionId) {
-      return action.ancestors;
-    }
-    const index = action.ancestors.findIndex(
-      (ancestor) => ancestor.id === currentRootActionId
-    );
-
-    // +1 removes the currentRootAction; e.g. if we are on the "Set theme"
-    // parent action, the UI should not display "Set theme… > Dark" but rather
-    // just "Dark"
-    return action.ancestors.slice(index + 1);
-  }, [action.ancestors, currentRootActionId]);
-
-  return (
-    <Item active={active} ref={ref}>
-      <Content align="center" gap={8}>
-        <Icon>
-          {action.icon ? (
-            // @ts-expect-error no icon on ActionImpl
-            React.cloneElement(action.icon, {
-              size: 22,
-              color: "currentColor",
-            })
-          ) : (
-            <ArrowIcon color="currentColor" />
-          )}
-        </Icon>
-
-        {ancestors.map((ancestor) => (
-          <React.Fragment key={ancestor.id}>
-            <Ancestor>{ancestor.name}</Ancestor>
-            <ForwardIcon color={theme.textSecondary} size={22} />
-          </React.Fragment>
-        ))}
-        {action.name}
-        {action.children?.length ? "…" : ""}
-      </Content>
-      {action.shortcut?.length ? (
-        <div
-          style={{
-            display: "grid",
-            gridAutoFlow: "column",
-            gap: "4px",
-          }}
-        >
-          {action.shortcut.map((sc: string) => (
-            <Key key={sc}>{sc}</Key>
-          ))}
-        </div>
-      ) : null}
-    </Item>
-  );
-}
-
-const Icon = styled(Flex)`
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  color: ${(props) => props.theme.textSecondary};
-  flex-shrink: 0;
-`;
-
-const Ancestor = styled.span`
-  color: ${(props) => props.theme.textSecondary};
-`;
-
-const Content = styled(Flex)`
-  overflow: hidden;
-  text-overflow: ellipsis;
-  flex-shrink: 1;
-`;
-
-const Item = styled.div<{ active?: boolean }>`
-  font-size: 15px;
-  padding: 10px 16px;
-  background: ${(props) =>
-    props.active ? props.theme.menuItemSelected : "none"};
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  cursor: pointer;
-
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  min-width: 0;
-
-  ${(props) =>
-    props.active &&
-    css`
-      ${Icon} {
-        color: ${props.theme.text};
-      }
-    `}
-`;
-
-const ForwardIcon = styled(BackIcon)`
-  transform: rotate(180deg);
-  flex-shrink: 0;
-`;
-
-export default React.forwardRef<HTMLDivElement, Props>(CommandBarItem);

app/components/CommandBarResults.tsx

@@ -1,35 +0,0 @@
-import { useMatches, KBarResults } from "kbar";
-import * as React from "react";
-import styled from "styled-components";
-import CommandBarItem from "~/components/CommandBarItem";
-
-export default function CommandBarResults() {
-  const { results, rootActionId } = useMatches();
-
-  return (
-    <KBarResults
-      items={results}
-      maxHeight={400}
-      onRender={({ item, active }) =>
-        typeof item === "string" ? (
-          <Header>{item}</Header>
-        ) : (
-          <CommandBarItem
-            action={item}
-            active={active}
-            currentRootActionId={rootActionId}
-          />
-        )
-      }
-    />
-  );
-}
-
-const Header = styled.h3`
-  font-size: 13px;
-  letter-spacing: 0.04em;
-  margin: 0;
-  padding: 16px 0 4px 20px;
-  color: ${(props) => props.theme.textTertiary};
-  height: 36px;
-`;

app/components/ConfirmationDialog.tsx

@@ -1,61 +0,0 @@
-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/ConnectionStatus.tsx

@@ -1,58 +0,0 @@
-import { observer } from "mobx-react";
-import { DisconnectedIcon } from "outline-icons";
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-import styled, { useTheme } from "styled-components";
-import breakpoint from "styled-components-breakpoint";
-import Fade from "~/components/Fade";
-import NudeButton from "~/components/NudeButton";
-import Tooltip from "~/components/Tooltip";
-import useStores from "~/hooks/useStores";
-
-function ConnectionStatus() {
-  const { ui } = useStores();
-  const theme = useTheme();
-  const { t } = useTranslation();
-
-  return ui.multiplayerStatus === "connecting" ||
-    ui.multiplayerStatus === "disconnected" ? (
-    <Tooltip
-      tooltip={
-        <Centered>
-          <strong>{t("Server connection lost")}</strong>
-          <br />
-          {t("Edits you make will sync once you’re online")}
-        </Centered>
-      }
-      placement="bottom"
-    >
-      <Button>
-        <Fade>
-          <DisconnectedIcon color={theme.sidebarText} />
-        </Fade>
-      </Button>
-    </Tooltip>
-  ) : null;
-}
-
-const Button = styled(NudeButton)`
-  display: none;
-  position: fixed;
-  bottom: 0;
-  right: 32px;
-  margin: 24px;
-
-  ${breakpoint("tablet")`
-    display: block;
-  `};
-
-  @media print {
-    display: none;
-  }
-`;
-
-const Centered = styled.div`
-  text-align: center;
-`;
-
-export default observer(ConnectionStatus);

app/components/ContentEditable.tsx

@@ -1,191 +0,0 @@
-import isPrintableKeyEvent from "is-printable-key-event";
-import * as React from "react";
-import styled from "styled-components";
-import useOnScreen from "~/hooks/useOnScreen";
-
-type Props = Omit<React.HTMLAttributes<HTMLSpanElement>, "ref" | "onChange"> & {
-  disabled?: boolean;
-  readOnly?: boolean;
-  onClick?: React.MouseEventHandler<HTMLDivElement>;
-  onChange?: (text: string) => void;
-  onBlur?: React.FocusEventHandler<HTMLSpanElement> | undefined;
-  onInput?: React.FormEventHandler<HTMLSpanElement> | undefined;
-  onKeyDown?: React.KeyboardEventHandler<HTMLSpanElement> | undefined;
-  placeholder?: string;
-  maxLength?: number;
-  autoFocus?: boolean;
-  children?: React.ReactNode;
-  value: string;
-};
-
-export type RefHandle = {
-  focus: () => void;
-  focusAtStart: () => void;
-  focusAtEnd: () => void;
-  getComputedDirection: () => string;
-};
-
-/**
- * Defines a content editable component with the same interface as a native
- * HTMLInputElement (or, as close as we can get).
- */
-const ContentEditable = React.forwardRef(
-  (
-    {
-      disabled,
-      onChange,
-      onInput,
-      onBlur,
-      onKeyDown,
-      value,
-      children,
-      className,
-      maxLength,
-      autoFocus,
-      placeholder,
-      readOnly,
-      dir,
-      onClick,
-      ...rest
-    }: Props,
-    ref: React.RefObject<RefHandle>
-  ) => {
-    const contentRef = React.useRef<HTMLSpanElement>(null);
-    const [innerValue, setInnerValue] = React.useState<string>(value);
-    const lastValue = React.useRef("");
-
-    React.useImperativeHandle(ref, () => ({
-      focus: () => {
-        contentRef.current?.focus();
-      },
-      focusAtStart: () => {
-        if (contentRef.current) {
-          contentRef.current.focus();
-          placeCaret(contentRef.current, true);
-        }
-      },
-      focusAtEnd: () => {
-        if (contentRef.current) {
-          contentRef.current.focus();
-          placeCaret(contentRef.current, false);
-        }
-      },
-      getComputedDirection: () => {
-        if (contentRef.current) {
-          return window.getComputedStyle(contentRef.current).direction;
-        }
-        return "ltr";
-      },
-    }));
-
-    const wrappedEvent = (
-      callback:
-        | React.FocusEventHandler<HTMLSpanElement>
-        | React.FormEventHandler<HTMLSpanElement>
-        | React.KeyboardEventHandler<HTMLSpanElement>
-        | undefined
-    ) => (event: any) => {
-      const text = contentRef.current?.innerText || "";
-
-      if (maxLength && isPrintableKeyEvent(event) && text.length >= maxLength) {
-        event?.preventDefault();
-        return;
-      }
-
-      if (text !== lastValue.current) {
-        lastValue.current = text;
-        onChange && onChange(text);
-      }
-
-      callback?.(event);
-    };
-
-    // This is to account for being within a React.Suspense boundary, in this
-    // case the component may be rendered with display: none. React 18 may solve
-    // this in the future by delaying useEffect hooks:
-    // https://github.com/facebook/react/issues/14536#issuecomment-861980492
-    const isVisible = useOnScreen(contentRef);
-
-    React.useEffect(() => {
-      if (autoFocus && isVisible && !disabled && !readOnly) {
-        contentRef.current?.focus();
-      }
-    }, [autoFocus, disabled, isVisible, readOnly, contentRef]);
-
-    React.useEffect(() => {
-      if (value !== contentRef.current?.innerText) {
-        setInnerValue(value);
-      }
-    }, [value, contentRef]);
-
-    // Ensure only plain text can be pasted into title when pasting from another
-    // rich text editor
-    const handlePaste = React.useCallback(
-      (event: React.ClipboardEvent<HTMLSpanElement>) => {
-        event.preventDefault();
-        const text = event.clipboardData.getData("text/plain");
-        window.document.execCommand("insertText", false, text);
-      },
-      []
-    );
-
-    return (
-      <div className={className} dir={dir} onClick={onClick}>
-        <Content
-          ref={contentRef}
-          contentEditable={!disabled && !readOnly}
-          onInput={wrappedEvent(onInput)}
-          onBlur={wrappedEvent(onBlur)}
-          onKeyDown={wrappedEvent(onKeyDown)}
-          onPaste={handlePaste}
-          data-placeholder={placeholder}
-          suppressContentEditableWarning
-          role="textbox"
-          {...rest}
-        >
-          {innerValue}
-        </Content>
-        {children}
-      </div>
-    );
-  }
-);
-
-function placeCaret(element: HTMLElement, atStart: boolean) {
-  if (
-    typeof window.getSelection !== "undefined" &&
-    typeof document.createRange !== "undefined"
-  ) {
-    const range = document.createRange();
-    range.selectNodeContents(element);
-    range.collapse(atStart);
-    const sel = window.getSelection();
-    sel?.removeAllRanges();
-    sel?.addRange(range);
-  }
-}
-
-const Content = styled.span`
-  background: ${(props) => props.theme.background};
-  transition: ${(props) => props.theme.backgroundTransition};
-  color: ${(props) => props.theme.text};
-  -webkit-text-fill-color: ${(props) => props.theme.text};
-  outline: none;
-  resize: none;
-  cursor: text;
-
-  &:empty {
-    display: inline-block;
-  }
-
-  &:empty::before {
-    display: inline-block;
-    color: ${(props) => props.theme.placeholder};
-    -webkit-text-fill-color: ${(props) => props.theme.placeholder};
-    content: attr(data-placeholder);
-    pointer-events: none;
-    height: 0;
-  }
-`;
-
-export default ContentEditable;

app/components/ContextMenu/Header.js

@@ -1,3 +1,4 @@
+// @flow
 import styled from "styled-components";
 
 const Header = styled.h3`

app/components/ContextMenu/MenuItem.js

@@ -1,35 +1,31 @@
-import { LocationDescriptor } from "history";
+// @flow
 import { CheckmarkIcon } from "outline-icons";
 import * as React from "react";
 import { MenuItem as BaseMenuItem } from "reakit/Menu";
-import styled, { css } from "styled-components";
+import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import MenuIconWrapper from "../MenuIconWrapper";
 
-type Props = {
-  onClick?: (event: React.SyntheticEvent) => void | Promise<void>;
-  selected?: boolean;
-  disabled?: boolean;
-  dangerous?: boolean;
-  to?: LocationDescriptor;
-  href?: string;
-  target?: "_blank";
-  as?: string | React.ComponentType<any>;
-  hide?: () => void;
-  level?: number;
-  icon?: React.ReactElement;
-};
+type Props = {|
+  onClick?: (SyntheticEvent<>) => void | Promise<void>,
+  children?: React.Node,
+  selected?: boolean,
+  disabled?: boolean,
+  to?: string,
+  href?: string,
+  target?: "_blank",
+  as?: string | React.ComponentType<*>,
+  hide?: () => void,
+|};
 
-const MenuItem: React.FC<Props> = ({
+const MenuItem = ({
   onClick,
   children,
   selected,
   disabled,
   as,
   hide,
-  icon,
   ...rest
-}) => {
+}: Props) => {
   const handleClick = React.useCallback(
     (ev) => {
       if (onClick) {
@@ -74,11 +70,6 @@ const MenuItem: React.FC<Props> = ({
               &nbsp;
             </>
           )}
-          {icon && (
-            <MenuIconWrapper>
-              {React.cloneElement(icon, { color: "currentColor" })}
-            </MenuIconWrapper>
-          )}
           {children}
         </MenuAnchor>
       )}
@@ -92,19 +83,11 @@ const Spacer = styled.svg`
   flex-shrink: 0;
 `;
 
-type MenuAnchorProps = {
-  level?: number;
-  disabled?: boolean;
-  dangerous?: boolean;
-  disclosure?: boolean;
-};
-
-export const MenuAnchorCSS = css<MenuAnchorProps>`
+export const MenuAnchor = styled.a`
   display: flex;
   margin: 0;
   border: 0;
   padding: 12px;
-  padding-left: ${(props) => 12 + (props.level || 0) * 10}px;
   width: 100%;
   min-height: 32px;
   background: none;
@@ -115,8 +98,6 @@ export const MenuAnchorCSS = css<MenuAnchorProps>`
   font-size: 16px;
   cursor: default;
   user-select: none;
-  white-space: nowrap;
-  position: relative;
 
   svg:not(:last-child) {
     margin-right: 4px;
@@ -132,32 +113,24 @@ export const MenuAnchorCSS = css<MenuAnchorProps>`
       ? "pointer-events: none;"
       : `
 
-  @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;
+  &:hover,  
+  &:focus,
+  &.focus-visible {
+    color: ${props.theme.white};
+    background: ${props.theme.primary};
+    box-shadow: none;
+    cursor: pointer;
 
-      svg {
-        fill: ${props.theme.white};
-      }
+    svg {
+      fill: ${props.theme.white};
     }
   }
   `};
 
   ${breakpoint("tablet")`
-    padding: 4px 12px;
-    padding-right: ${(props: MenuAnchorProps) =>
-      props.disclosure ? 32 : 12}px;
-    font-size: 14px;
+    padding: ${(props) => (props.$toggleable ? "4px 12px" : "6px 12px")};
+    font-size: 15px;
   `};
 `;
 
-export const MenuAnchor = styled.a`
-  ${MenuAnchorCSS}
-`;
-
 export default MenuItem;

app/components/ContextMenu/MouseSafeArea.tsx

@@ -1,66 +0,0 @@
-import * as React from "react";
-import { useMousePosition } from "~/hooks/useMousePosition";
-
-type Positions = {
-  /* Sub-menu x */
-  x: number;
-  /* Sub-menu y */
-  y: number;
-  /* Sub-menu height */
-  h: number;
-  /* Sub-menu width */
-  w: number;
-  /* Mouse x */
-  mouseX: number;
-  /* Mouse y */
-  mouseY: number;
-};
-
-/**
- * Component to cover the area between the mouse cursor and the sub-menu, to
- * allow moving cursor to lower parts of sub-menu without the sub-menu
- * disappearing.
- */
-export default function MouseSafeArea(props: {
-  parentRef: React.RefObject<HTMLElement | null>;
-}) {
-  const { x = 0, y = 0, height: h = 0, width: w = 0 } =
-    props.parentRef.current?.getBoundingClientRect() || {};
-  const [mouseX, mouseY] = useMousePosition();
-  const positions = { x, y, h, w, mouseX, mouseY };
-
-  return (
-    <div
-      style={{
-        position: "absolute",
-        top: 0,
-        // backgroundColor: "rgba(255,0,0,0.1)", // Uncomment to debug
-        right: getRight(positions),
-        left: getLeft(positions),
-        height: h,
-        width: getWidth(positions),
-        clipPath: getClipPath(positions),
-      }}
-    />
-  );
-}
-
-const getLeft = ({ x, mouseX }: Positions) =>
-  mouseX > x ? undefined : -Math.max(x - mouseX, 10) + "px";
-
-const getRight = ({ x, w, mouseX }: Positions) =>
-  mouseX > x ? -Math.max(mouseX - (x + w), 10) + "px" : undefined;
-
-const getWidth = ({ x, w, mouseX }: Positions) =>
-  mouseX > x
-    ? Math.max(mouseX - (x + w), 10) + "px"
-    : Math.max(x - mouseX, 10) + "px";
-
-const getClipPath = ({ x, y, h, mouseX, mouseY }: Positions) =>
-  mouseX > x
-    ? `polygon(0% 0%, 0% 100%, 100% ${(100 * (mouseY - y)) / h - 10}%, 100% ${
-        (100 * (mouseY - y)) / h + 5
-      }%)`
-    : `polygon(100% 0%, 0% ${(100 * (mouseY - y)) / h - 10}%, 0% ${
-        (100 * (mouseY - y)) / h + 5
-      }%, 100% 100%)`;

app/components/ContextMenu/OverflowMenuButton.js

@@ -1,18 +1,14 @@
+// @flow
 import { MoreIcon } from "outline-icons";
 import * as React from "react";
 import { MenuButton } from "reakit/Menu";
-import NudeButton from "~/components/NudeButton";
-
-type Props = React.ComponentProps<typeof MenuButton> & {
-  className?: string;
-  iconColor?: string;
-};
+import NudeButton from "components/NudeButton";
 
 export default function OverflowMenuButton({
   iconColor,
   className,
   ...rest
-}: Props) {
+}: any) {
   return (
     <MenuButton {...rest}>
       {(props) => (

app/components/ContextMenu/Separator.js

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

app/components/ContextMenu/Template.js

@@ -0,0 +1,174 @@
+// @flow
+import { ExpandedIcon } from "outline-icons";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import {
+  useMenuState,
+  MenuButton,
+  MenuItem as BaseMenuItem,
+} from "reakit/Menu";
+import styled from "styled-components";
+import MenuItem, { MenuAnchor } from "./MenuItem";
+import Separator from "./Separator";
+import ContextMenu from ".";
+
+type TMenuItem =
+  | {|
+      title: React.Node,
+      to: string,
+      visible?: boolean,
+      selected?: boolean,
+      disabled?: boolean,
+    |}
+  | {|
+      title: React.Node,
+      onClick: (event: SyntheticEvent<>) => void | Promise<void>,
+      visible?: boolean,
+      selected?: boolean,
+      disabled?: boolean,
+    |}
+  | {|
+      title: React.Node,
+      href: string,
+      visible?: boolean,
+      selected?: boolean,
+      disabled?: boolean,
+    |}
+  | {|
+      title: React.Node,
+      visible?: boolean,
+      disabled?: boolean,
+      style?: Object,
+      hover?: boolean,
+      items: TMenuItem[],
+    |}
+  | {|
+      type: "separator",
+      visible?: boolean,
+    |}
+  | {|
+      type: "heading",
+      visible?: boolean,
+      title: React.Node,
+    |};
+
+type Props = {|
+  items: TMenuItem[],
+|};
+
+const Disclosure = styled(ExpandedIcon)`
+  transform: rotate(270deg);
+  position: absolute;
+  right: 8px;
+`;
+
+const Submenu = React.forwardRef(({ templateItems, title, ...rest }, ref) => {
+  const { t } = useTranslation();
+  const menu = useMenuState({ modal: true });
+
+  return (
+    <>
+      <MenuButton ref={ref} {...menu} {...rest}>
+        {(props) => (
+          <MenuAnchor {...props}>
+            {title} <Disclosure color="currentColor" />
+          </MenuAnchor>
+        )}
+      </MenuButton>
+      <ContextMenu {...menu} aria-label={t("Submenu")}>
+        <Template {...menu} items={templateItems} />
+      </ContextMenu>
+    </>
+  );
+});
+
+export function filterTemplateItems(items: TMenuItem[]): TMenuItem[] {
+  let filtered = items.filter((item) => item.visible !== false);
+
+  // this block literally just trims unneccessary 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;
+}
+
+function Template({ items, ...menu }: Props): React.Node {
+  return filterTemplateItems(items).map((item, index) => {
+    if (item.to) {
+      return (
+        <MenuItem
+          as={Link}
+          to={item.to}
+          key={index}
+          disabled={item.disabled}
+          selected={item.selected}
+          {...menu}
+        >
+          {item.title}
+        </MenuItem>
+      );
+    }
+
+    if (item.href) {
+      return (
+        <MenuItem
+          href={item.href}
+          key={index}
+          disabled={item.disabled}
+          selected={item.selected}
+          target="_blank"
+          {...menu}
+        >
+          {item.title}
+        </MenuItem>
+      );
+    }
+
+    if (item.onClick) {
+      return (
+        <MenuItem
+          as="button"
+          onClick={item.onClick}
+          disabled={item.disabled}
+          selected={item.selected}
+          key={index}
+          {...menu}
+        >
+          {item.title}
+        </MenuItem>
+      );
+    }
+
+    if (item.items) {
+      return (
+        <BaseMenuItem
+          key={index}
+          as={Submenu}
+          templateItems={item.items}
+          title={item.title}
+          {...menu}
+        />
+      );
+    }
+
+    if (item.type === "separator") {
+      return <Separator key={index} />;
+    }
+
+    return null;
+  });
+}
+
+export default React.memo<Props>(Template);

app/components/ContextMenu/Template.tsx

@@ -1,218 +0,0 @@
-import { ExpandedIcon } from "outline-icons";
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-import { Link } from "react-router-dom";
-import {
-  useMenuState,
-  MenuButton,
-  MenuItem as BaseMenuItem,
-} from "reakit/Menu";
-import styled, { useTheme } from "styled-components";
-import Flex from "~/components/Flex";
-import MenuIconWrapper from "~/components/MenuIconWrapper";
-import { actionToMenuItem } from "~/actions";
-import useActionContext from "~/hooks/useActionContext";
-import {
-  Action,
-  ActionContext,
-  MenuSeparator,
-  MenuHeading,
-  MenuItem as TMenuItem,
-} from "~/types";
-import Header from "./Header";
-import MenuItem, { MenuAnchor } from "./MenuItem";
-import MouseSafeArea from "./MouseSafeArea";
-import Separator from "./Separator";
-import ContextMenu from ".";
-
-type Props = {
-  actions?: (Action | MenuSeparator | MenuHeading)[];
-  context?: Partial<ActionContext>;
-  items?: TMenuItem[];
-};
-
-const Disclosure = styled(ExpandedIcon)`
-  transform: rotate(270deg);
-  position: absolute;
-  right: 8px;
-`;
-
-const Submenu = React.forwardRef(
-  (
-    {
-      templateItems,
-      title,
-      ...rest
-    }: { templateItems: TMenuItem[]; title: React.ReactNode },
-    ref: React.LegacyRef<HTMLButtonElement>
-  ) => {
-    const { t } = useTranslation();
-    const theme = useTheme();
-    const menu = useMenuState();
-
-    return (
-      <>
-        <MenuButton ref={ref} {...menu} {...rest}>
-          {(props) => (
-            <MenuAnchor disclosure {...props}>
-              {title} <Disclosure color={theme.textTertiary} />
-            </MenuAnchor>
-          )}
-        </MenuButton>
-        <ContextMenu {...menu} aria-label={t("Submenu")}>
-          <MouseSafeArea parentRef={menu.unstable_popoverRef} />
-          <Template {...menu} items={templateItems} />
-        </ContextMenu>
-      </>
-    );
-  }
-);
-
-export function filterTemplateItems(items: TMenuItem[]): TMenuItem[] {
-  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) {
-  const ctx = useActionContext({
-    isContextMenu: true,
-  });
-
-  const templateItems = actions
-    ? actions.map((item) =>
-        item.type === "separator" || item.type === "heading"
-          ? item
-          : actionToMenuItem(item, ctx)
-      )
-    : items || [];
-
-  const filteredTemplates = filterTemplateItems(templateItems);
-
-  const iconIsPresentInAnyMenuItem = filteredTemplates.find(
-    (item) =>
-      item.type !== "separator" && item.type !== "heading" && !!item.icon
-  );
-
-  return (
-    <>
-      {filteredTemplates.map((item, index) => {
-        if (
-          iconIsPresentInAnyMenuItem &&
-          item.type !== "separator" &&
-          item.type !== "heading"
-        ) {
-          item.icon = item.icon || <MenuIconWrapper />;
-        }
-
-        if (item.type === "route") {
-          return (
-            <MenuItem
-              as={Link}
-              to={item.to}
-              key={index}
-              disabled={item.disabled}
-              selected={item.selected}
-              icon={item.icon}
-              {...menu}
-            >
-              {item.title}
-            </MenuItem>
-          );
-        }
-
-        if (item.type === "link") {
-          return (
-            <MenuItem
-              href={item.href}
-              key={index}
-              disabled={item.disabled}
-              selected={item.selected}
-              level={item.level}
-              target={item.href.startsWith("#") ? undefined : "_blank"}
-              icon={item.icon}
-              {...menu}
-            >
-              {item.title}
-            </MenuItem>
-          );
-        }
-
-        if (item.type === "button") {
-          return (
-            <MenuItem
-              as="button"
-              onClick={item.onClick}
-              disabled={item.disabled}
-              selected={item.selected}
-              dangerous={item.dangerous}
-              key={index}
-              icon={item.icon}
-              {...menu}
-            >
-              {item.title}
-            </MenuItem>
-          );
-        }
-
-        if (item.type === "submenu") {
-          return (
-            <BaseMenuItem
-              key={index}
-              as={Submenu}
-              templateItems={item.items}
-              title={<Title title={item.title} icon={item.icon} />}
-              {...menu}
-            />
-          );
-        }
-
-        if (item.type === "separator") {
-          return <Separator key={index} />;
-        }
-
-        if (item.type === "heading") {
-          return <Header>{item.title}</Header>;
-        }
-
-        const _exhaustiveCheck: never = item;
-        return _exhaustiveCheck;
-      })}
-    </>
-  );
-}
-
-function Title({
-  title,
-  icon,
-}: {
-  title: React.ReactNode;
-  icon?: React.ReactNode;
-}) {
-  return (
-    <Flex align="center">
-      {icon && <MenuIconWrapper>{icon}</MenuIconWrapper>}
-      {title}
-    </Flex>
-  );
-}
-
-export default React.memo<Props>(Template);

app/components/ContextMenu/index.js

@@ -0,0 +1,121 @@
+// @flow
+import * as React from "react";
+import { Portal } from "react-portal";
+import { Menu } from "reakit/Menu";
+import styled from "styled-components";
+import breakpoint from "styled-components-breakpoint";
+import {
+  fadeIn,
+  fadeAndScaleIn,
+  fadeAndSlideIn,
+} from "shared/styles/animations";
+import usePrevious from "hooks/usePrevious";
+
+type Props = {|
+  "aria-label": string,
+  visible?: boolean,
+  animating?: boolean,
+  children: React.Node,
+  onOpen?: () => void,
+  onClose?: () => void,
+|};
+
+export default function ContextMenu({
+  children,
+  onOpen,
+  onClose,
+  ...rest
+}: Props) {
+  const previousVisible = usePrevious(rest.visible);
+
+  React.useEffect(() => {
+    if (rest.visible && !previousVisible) {
+      if (onOpen) {
+        onOpen();
+      }
+    }
+    if (!rest.visible && previousVisible) {
+      if (onClose) {
+        onClose();
+      }
+    }
+  }, [onOpen, onClose, previousVisible, rest.visible]);
+
+  return (
+    <>
+      <Menu hideOnClickOutside preventBodyScroll {...rest}>
+        {(props) => (
+          <Position {...props}>
+            <Background dir="auto">
+              {rest.visible || rest.animating ? children : null}
+            </Background>
+          </Position>
+        )}
+      </Menu>
+      {(rest.visible || rest.animating) && (
+        <Portal>
+          <Backdrop />
+        </Portal>
+      )}
+    </>
+  );
+}
+
+const Backdrop = styled.div`
+  animation: ${fadeIn} 200ms ease-in-out;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: ${(props) => props.theme.backdrop};
+  z-index: ${(props) => props.theme.depths.menu - 1};
+
+  ${breakpoint("tablet")`
+    display: none;
+  `};
+`;
+
+const Position = styled.div`
+  position: absolute;
+  z-index: ${(props) => props.theme.depths.menu};
+
+  ${breakpoint("mobile", "tablet")`
+    position: fixed !important;
+    transform: none !important;
+    top: auto !important;
+    right: 8px !important;
+    bottom: 16px !important;
+    left: 8px !important;
+  `};
+`;
+
+const Background = styled.div`
+  animation: ${fadeAndSlideIn} 200ms ease;
+  transform-origin: 50% 100%;
+  max-width: 100%;
+  background: ${(props) => props.theme.menuBackground};
+  border-radius: 6px;
+  padding: 6px 0;
+  min-width: 180px;
+  overflow: hidden;
+  overflow-y: auto;
+  max-height: 75vh;
+  pointer-events: all;
+  font-weight: normal;
+
+  @media print {
+    display: none;
+  }
+
+  ${breakpoint("tablet")`
+    animation: ${fadeAndScaleIn} 200ms ease;
+    transform-origin: ${(props) =>
+      props.left !== undefined ? "25%" : "75%"} 0;
+    max-width: 276px;
+    background: ${(props) => props.theme.menuBackground};
+    box-shadow: ${(props) => props.theme.menuShadow};
+    border: ${(props) =>
+      props.theme.menuBorder ? `1px solid ${props.theme.menuBorder}` : "none"};
+  `};
+`;

app/components/ContextMenu/index.tsx

@@ -1,225 +0,0 @@
-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, { 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";
-import useStores from "~/hooks/useStores";
-import useUnmount from "~/hooks/useUnmount";
-import {
-  fadeIn,
-  fadeAndSlideUp,
-  fadeAndSlideDown,
-  mobileContextMenu,
-} from "~/styles/animations";
-
-export type Placement =
-  | "auto-start"
-  | "auto"
-  | "auto-end"
-  | "top-start"
-  | "top"
-  | "top-end"
-  | "right-start"
-  | "right"
-  | "right-end"
-  | "bottom-end"
-  | "bottom"
-  | "bottom-start"
-  | "left-end"
-  | "left"
-  | "left-start";
-
-type Props = {
-  "aria-label": string;
-  visible?: boolean;
-  placement?: Placement;
-  animating?: boolean;
-  unstable_disclosureRef?: React.RefObject<HTMLElement | null>;
-  onOpen?: () => void;
-  onClose?: () => void;
-  hide?: () => void;
-};
-
-const ContextMenu: React.FC<Props> = ({
-  children,
-  onOpen,
-  onClose,
-  ...rest
-}) => {
-  const previousVisible = usePrevious(rest.visible);
-  const maxHeight = useMenuHeight(rest.visible, rest.unstable_disclosureRef);
-  const backgroundRef = React.useRef<HTMLDivElement>(null);
-  const { ui } = useStores();
-  const { t } = useTranslation();
-  const { setIsMenuOpen } = useMenuContext();
-
-  useUnmount(() => {
-    setIsMenuOpen(false);
-  });
-
-  React.useEffect(() => {
-    if (rest.visible && !previousVisible) {
-      if (onOpen) {
-        onOpen();
-      }
-      if (rest["aria-label"] !== t("Submenu")) {
-        setIsMenuOpen(true);
-      }
-    }
-
-    if (!rest.visible && previousVisible) {
-      if (onClose) {
-        onClose();
-      }
-      if (rest["aria-label"] !== t("Submenu")) {
-        setIsMenuOpen(false);
-      }
-    }
-  }, [
-    onOpen,
-    onClose,
-    previousVisible,
-    rest.visible,
-    ui.sidebarCollapsed,
-    setIsMenuOpen,
-    rest,
-    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;
-  }
-
-  // sets the menu height based on the available space between the disclosure/
-  // trigger and the bottom of the window
-  return (
-    <>
-      <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
-          // positioning.
-          const topAnchor = props.style?.top === "0";
-          // @ts-expect-error ts-migrate(2339) FIXME: Property 'placement' does not exist on type 'Extra... Remove this comment to see the full error message
-          const rightAnchor = props.placement === "bottom-end";
-
-          return (
-            <Position {...props}>
-              <Background
-                dir="auto"
-                topAnchor={topAnchor}
-                rightAnchor={rightAnchor}
-                ref={backgroundRef}
-                hiddenScrollbars
-                style={
-                  maxHeight && topAnchor
-                    ? {
-                        maxHeight,
-                      }
-                    : undefined
-                }
-              >
-                {rest.visible || rest.animating ? children : null}
-              </Background>
-            </Position>
-          );
-        }}
-      </Menu>
-      {(rest.visible || rest.animating) && (
-        <Portal>
-          <Backdrop onClick={rest.hide} />
-        </Portal>
-      )}
-    </>
-  );
-};
-
-export default ContextMenu;
-
-export const Backdrop = styled.div`
-  animation: ${fadeIn} 200ms ease-in-out;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: ${(props) => props.theme.backdrop};
-  z-index: ${depths.menu - 1};
-
-  ${breakpoint("tablet")`
-    display: none;
-  `};
-`;
-
-export const Position = styled.div`
-  position: absolute;
-  z-index: ${depths.menu};
-
-  /*
-   * overrides make mobile-first coding style challenging
-   * so we explicitly define mobile breakpoint here
-   */
-  ${breakpoint("mobile", "tablet")`
-    position: fixed !important;
-    transform: none !important;
-    top: auto !important;
-    right: 8px !important;
-    bottom: 16px !important;
-    left: 8px !important;
-  `};
-`;
-
-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%;
-  background: ${(props) => props.theme.menuBackground};
-  border-radius: 6px;
-  padding: 6px 0;
-  min-width: 180px;
-  min-height: 44px;
-  max-height: 75vh;
-  pointer-events: all;
-  font-weight: normal;
-
-  @media print {
-    display: none;
-  }
-
-  ${breakpoint("tablet")`
-    animation: ${(props: BackgroundProps) =>
-      props.topAnchor ? fadeAndSlideDown : fadeAndSlideUp} 200ms ease;
-    transform-origin: ${(props: BackgroundProps) =>
-      props.rightAnchor ? "75%" : "25%"} 0;
-    max-width: 276px;
-    background: ${(props: BackgroundProps) => props.theme.menuBackground};
-    box-shadow: ${(props: BackgroundProps) => props.theme.menuShadow};
-  `};
-`;

app/components/CopyToClipboard.js

@@ -1,25 +1,24 @@
+// @flow
 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;
+  text: string,
+  children?: React.Node,
+  onClick?: () => void,
+  onCopy: () => void,
 };
 
 class CopyToClipboard extends React.PureComponent<Props> {
-  onClick = (ev: React.SyntheticEvent) => {
+  onClick = (ev: SyntheticEvent<>) => {
     const { text, onCopy, children } = this.props;
     const elem = React.Children.only(children);
-
     copy(text, {
-      debug: env.ENVIRONMENT !== "production",
+      debug: process.env.NODE_ENV !== "production",
       format: "text/plain",
     });
 
-    onCopy?.();
+    if (onCopy) onCopy();
 
     if (elem && elem.props && typeof elem.props.onClick === "function") {
       elem.props.onClick(ev);
@@ -27,12 +26,8 @@ class CopyToClipboard extends React.PureComponent<Props> {
   };
 
   render() {
-    const { text, onCopy, children, ...rest } = this.props;
+    const { text: _text, onCopy: _onCopy, children, ...rest } = this.props;
     const elem = React.Children.only(children);
-    if (!elem) {
-      return null;
-    }
-
     return React.cloneElement(elem, { ...rest, onClick: this.onClick });
   }
 }

app/components/DefaultCollectionInputSelect.tsx

@@ -1,104 +0,0 @@
-import { HomeIcon } from "outline-icons";
-import React, { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { Optional } from "utility-types";
-import CollectionIcon from "~/components/CollectionIcon";
-import Flex from "~/components/Flex";
-import InputSelect from "~/components/InputSelect";
-import { IconWrapper } from "~/components/Sidebar/components/SidebarLink";
-import useStores from "~/hooks/useStores";
-import useToasts from "~/hooks/useToasts";
-
-type DefaultCollectionInputSelectProps = Optional<
-  React.ComponentProps<typeof InputSelect>
-> & {
-  onSelectCollection: (collection: string) => void;
-  defaultCollectionId: string | null;
-};
-
-const DefaultCollectionInputSelect = ({
-  onSelectCollection,
-  defaultCollectionId,
-  ...rest
-}: DefaultCollectionInputSelectProps) => {
-  const { t } = useTranslation();
-  const { collections } = useStores();
-  const [fetching, setFetching] = useState(false);
-  const [fetchError, setFetchError] = useState();
-  const { showToast } = useToasts();
-
-  React.useEffect(() => {
-    async function load() {
-      if (!collections.isLoaded && !fetching && !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();
-  }, [showToast, fetchError, t, fetching, collections]);
-
-  const options = React.useMemo(
-    () =>
-      collections.publicCollections.reduce(
-        (acc, collection) => [
-          ...acc,
-          {
-            label: (
-              <Flex align="center">
-                <IconWrapper>
-                  <CollectionIcon collection={collection} />
-                </IconWrapper>
-                {collection.name}
-              </Flex>
-            ),
-            value: collection.id,
-          },
-        ],
-        [
-          {
-            label: (
-              <Flex align="center">
-                <IconWrapper>
-                  <HomeIcon color="currentColor" />
-                </IconWrapper>
-                {t("Home")}
-              </Flex>
-            ),
-            value: "home",
-          },
-        ]
-      ),
-    [collections.publicCollections, t]
-  );
-
-  if (fetching) {
-    return null;
-  }
-
-  return (
-    <InputSelect
-      value={defaultCollectionId ?? "home"}
-      options={options}
-      onChange={onSelectCollection}
-      ariaLabel={t("Default collection")}
-      short
-      {...rest}
-    />
-  );
-};
-
-export default DefaultCollectionInputSelect;

app/components/DelayedMount.js

@@ -1,8 +1,9 @@
+// @flow
 import * as React from "react";
 
 type Props = {
-  delay?: number;
-  children: JSX.Element;
+  delay?: number,
+  children: React.Node,
 };
 
 export default function DelayedMount({ delay = 250, children }: Props) {

app/components/Dialogs.tsx

@@ -1,36 +0,0 @@
-import { observer } from "mobx-react-lite";
-import * as React from "react";
-import Guide from "~/components/Guide";
-import Modal from "~/components/Modal";
-import useStores from "~/hooks/useStores";
-
-function Dialogs() {
-  const { dialogs } = useStores();
-  const { guide, modalStack } = dialogs;
-  return (
-    <>
-      {guide ? (
-        <Guide
-          isOpen={guide.isOpen}
-          onRequestClose={dialogs.closeGuide}
-          title={guide.title}
-        >
-          {guide.content}
-        </Guide>
-      ) : undefined}
-      {[...modalStack].map(([id, modal]) => (
-        <Modal
-          key={id}
-          isOpen={modal.isOpen}
-          isCentered={modal.isCentered}
-          onRequestClose={() => dialogs.closeModal(id)}
-          title={modal.title}
-        >
-          {modal.content}
-        </Modal>
-      ))}
-    </>
-  );
-}
-
-export default observer(Dialogs);

app/components/Divider.js

@@ -1,3 +1,4 @@
+// @flow
 import styled from "styled-components";
 
 const Divider = styled.hr`

app/components/DocumentBreadcrumb.js

@@ -0,0 +1,138 @@
+// @flow
+import { observer } from "mobx-react";
+import {
+  ArchiveIcon,
+  EditIcon,
+  GoToIcon,
+  ShapesIcon,
+  TrashIcon,
+} from "outline-icons";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import styled from "styled-components";
+import Document from "models/Document";
+import Breadcrumb from "components/Breadcrumb";
+import CollectionIcon from "components/CollectionIcon";
+import useStores from "hooks/useStores";
+import { collectionUrl } from "utils/routeHelpers";
+
+type Props = {|
+  document: Document,
+  children?: React.Node,
+  onlyText: boolean,
+|};
+
+function useCategory(document) {
+  const { t } = useTranslation();
+
+  if (document.isDeleted) {
+    return {
+      icon: <TrashIcon color="currentColor" />,
+      title: t("Trash"),
+      to: "/trash",
+    };
+  }
+  if (document.isArchived) {
+    return {
+      icon: <ArchiveIcon color="currentColor" />,
+      title: t("Archive"),
+      to: "/archive",
+    };
+  }
+  if (document.isDraft) {
+    return {
+      icon: <EditIcon color="currentColor" />,
+      title: t("Drafts"),
+      to: "/drafts",
+    };
+  }
+  if (document.isTemplate) {
+    return {
+      icon: <ShapesIcon color="currentColor" />,
+      title: t("Templates"),
+      to: "/templates",
+    };
+  }
+  return null;
+}
+
+const DocumentBreadcrumb = ({ document, children, onlyText }: Props) => {
+  const { collections } = useStores();
+  const { t } = useTranslation();
+  const category = useCategory(document);
+
+  let collection = collections.get(document.collectionId);
+  if (!collection) {
+    collection = {
+      id: document.collectionId,
+      name: t("Deleted Collection"),
+      color: "currentColor",
+      url: "deleted-collection",
+    };
+  }
+
+  const path = React.useMemo(
+    () =>
+      collection && collection.pathToDocument
+        ? collection.pathToDocument(document.id).slice(0, -1)
+        : [],
+    [collection, document.id]
+  );
+
+  const items = React.useMemo(() => {
+    let output = [];
+
+    if (category) {
+      output.push(category);
+    }
+
+    if (collection) {
+      output.push({
+        icon: <CollectionIcon collection={collection} expanded />,
+        title: collection.name,
+        to: collectionUrl(collection.url),
+      });
+    }
+
+    path.forEach((p) => {
+      output.push({
+        title: p.title,
+        to: p.url,
+      });
+    });
+
+    return output;
+  }, [path, category, collection]);
+
+  if (!collections.isLoaded) {
+    return null;
+  }
+
+  if (onlyText === true) {
+    return (
+      <>
+        {collection.name}
+        {path.map((n) => (
+          <React.Fragment key={n.id}>
+            <SmallSlash />
+            {n.title}
+          </React.Fragment>
+        ))}
+      </>
+    );
+  }
+
+  return <Breadcrumb items={items} children={children} highlightFirstItem />;
+};
+
+const SmallSlash = styled(GoToIcon)`
+  width: 12px;
+  height: 12px;
+  vertical-align: middle;
+  flex-shrink: 0;
+
+  fill: ${(props) => props.theme.slate};
+  opacity: 0.5;
+`;
+
+export default observer(DocumentBreadcrumb);

app/components/DocumentBreadcrumb.tsx

@@ -1,134 +0,0 @@
-import { observer } from "mobx-react";
-import { ArchiveIcon, GoToIcon, ShapesIcon, TrashIcon } from "outline-icons";
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-import styled from "styled-components";
-import Document from "~/models/Document";
-import Breadcrumb from "~/components/Breadcrumb";
-import CollectionIcon from "~/components/CollectionIcon";
-import useStores from "~/hooks/useStores";
-import { MenuInternalLink, NavigationNode } from "~/types";
-import { collectionUrl } from "~/utils/routeHelpers";
-
-type Props = {
-  document: Document;
-  onlyText?: boolean;
-};
-
-function useCategory(document: Document): MenuInternalLink | null {
-  const { t } = useTranslation();
-
-  if (document.isDeleted) {
-    return {
-      type: "route",
-      icon: <TrashIcon color="currentColor" />,
-      title: t("Trash"),
-      to: "/trash",
-    };
-  }
-
-  if (document.isArchived) {
-    return {
-      type: "route",
-      icon: <ArchiveIcon color="currentColor" />,
-      title: t("Archive"),
-      to: "/archive",
-    };
-  }
-
-  if (document.isTemplate) {
-    return {
-      type: "route",
-      icon: <ShapesIcon color="currentColor" />,
-      title: t("Templates"),
-      to: "/templates",
-    };
-  }
-
-  return null;
-}
-
-const DocumentBreadcrumb: React.FC<Props> = ({
-  document,
-  children,
-  onlyText,
-}) => {
-  const { collections } = useStores();
-  const { t } = useTranslation();
-  const category = useCategory(document);
-  const collection = collections.get(document.collectionId);
-
-  let collectionNode: MenuInternalLink;
-
-  if (collection) {
-    collectionNode = {
-      type: "route",
-      title: collection.name,
-      icon: <CollectionIcon collection={collection} expanded />,
-      to: collectionUrl(collection.url),
-    };
-  } else {
-    collectionNode = {
-      type: "route",
-      title: t("Deleted Collection"),
-      icon: undefined,
-      to: collectionUrl("deleted-collection"),
-    };
-  }
-
-  const path = React.useMemo(
-    () => collection?.pathToDocument?.(document.id).slice(0, -1) || [],
-    [collection, document]
-  );
-
-  const items = React.useMemo(() => {
-    const output = [];
-
-    if (category) {
-      output.push(category);
-    }
-
-    output.push(collectionNode);
-
-    path.forEach((node: NavigationNode) => {
-      output.push({
-        type: "route",
-        title: node.title,
-        to: node.url,
-      });
-    });
-    return output;
-  }, [path, category, collectionNode]);
-
-  if (!collections.isLoaded) {
-    return null;
-  }
-
-  if (onlyText === true) {
-    return (
-      <>
-        {collection?.name}
-        {path.map((node: NavigationNode) => (
-          <React.Fragment key={node.id}>
-            <SmallSlash />
-            {node.title}
-          </React.Fragment>
-        ))}
-      </>
-    );
-  }
-
-  return <Breadcrumb items={items} children={children} highlightFirstItem />;
-};
-
-const SmallSlash = styled(GoToIcon)`
-  width: 12px;
-  height: 12px;
-  vertical-align: middle;
-  flex-shrink: 0;
-
-  fill: ${(props) => props.theme.slate};
-  opacity: 0.5;
-`;
-
-export default observer(DocumentBreadcrumb);

app/components/DocumentCard.tsx

@@ -1,267 +0,0 @@
-import { useSortable } from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
-import { m } from "framer-motion";
-import { observer } from "mobx-react";
-import { CloseIcon, DocumentIcon, ClockIcon } from "outline-icons";
-import { getLuminance, transparentize } from "polished";
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-import { Link } from "react-router-dom";
-import styled, { css } from "styled-components";
-import Document from "~/models/Document";
-import Pin from "~/models/Pin";
-import Flex from "~/components/Flex";
-import NudeButton from "~/components/NudeButton";
-import Time from "~/components/Time";
-import useStores from "~/hooks/useStores";
-import CollectionIcon from "./CollectionIcon";
-import Text from "./Text";
-import Tooltip from "./Tooltip";
-
-type Props = {
-  /** The pin record */
-  pin: Pin | undefined;
-  /** The document related to the pin */
-  document: Document;
-  /** Whether the user has permission to delete or reorder the pin */
-  canUpdatePin?: boolean;
-  /** Whether this pin can be reordered by dragging */
-  isDraggable?: boolean;
-};
-
-function DocumentCard(props: Props) {
-  const { t } = useTranslation();
-  const { collections } = useStores();
-  const { document, pin, canUpdatePin, isDraggable } = props;
-  const collection = collections.get(document.collectionId);
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-    isDragging,
-  } = useSortable({ id: props.document.id });
-
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-  };
-
-  const handleUnpin = React.useCallback(() => {
-    pin?.delete();
-  }, [pin]);
-
-  return (
-    <Reorderable
-      ref={setNodeRef}
-      style={style}
-      $isDragging={isDragging}
-      {...attributes}
-    >
-      <AnimatePresence
-        initial={{ opacity: 0, scale: 0.95 }}
-        animate={{
-          opacity: 1,
-          scale: 1,
-          transition: {
-            type: "spring",
-            bounce: 0.6,
-          },
-        }}
-        exit={{ opacity: 0, scale: 0.95 }}
-      >
-        <DocumentLink
-          dir={document.dir}
-          style={{
-            background:
-              collection?.color && getLuminance(collection.color) < 0.6
-                ? collection.color
-                : undefined,
-          }}
-          $isDragging={isDragging}
-          to={{
-            pathname: document.url,
-            state: {
-              title: document.titleWithDefault,
-            },
-          }}
-        >
-          <Content justify="space-between" column>
-            {collection?.icon &&
-            collection?.icon !== "collection" &&
-            !pin?.collectionId ? (
-              <CollectionIcon collection={collection} color="white" />
-            ) : (
-              <DocumentIcon color="white" />
-            )}
-            <div>
-              <Heading dir={document.dir}>{document.titleWithDefault}</Heading>
-              <DocumentMeta size="xsmall">
-                <ClockIcon color="currentColor" size={18} />{" "}
-                <Time dateTime={document.updatedAt} addSuffix shorten />
-              </DocumentMeta>
-            </div>
-          </Content>
-        </DocumentLink>
-        {canUpdatePin && (
-          <Actions dir={document.dir} gap={4}>
-            {!isDragging && pin && (
-              <Tooltip tooltip={t("Unpin")}>
-                <PinButton onClick={handleUnpin} aria-label={t("Unpin")}>
-                  <CloseIcon color="currentColor" />
-                </PinButton>
-              </Tooltip>
-            )}
-            {isDraggable && (
-              <DragHandle $isDragging={isDragging} {...listeners}>
-                :::
-              </DragHandle>
-            )}
-          </Actions>
-        )}
-      </AnimatePresence>
-    </Reorderable>
-  );
-}
-
-const PinButton = styled(NudeButton)`
-  color: ${(props) => props.theme.white75};
-
-  &:hover,
-  &:active {
-    color: ${(props) => props.theme.white};
-  }
-`;
-
-const Actions = styled(Flex)`
-  position: absolute;
-  top: 12px;
-  right: ${(props) => (props.dir === "rtl" ? "auto" : "12px")};
-  left: ${(props) => (props.dir === "rtl" ? "12px" : "auto")};
-  opacity: 0;
-  transition: opacity 100ms ease-in-out;
-
-  // move actions above content
-  z-index: 2;
-`;
-
-const DragHandle = styled.div<{ $isDragging: boolean }>`
-  cursor: ${(props) => (props.$isDragging ? "grabbing" : "grab")};
-  padding: 0 4px;
-  font-weight: bold;
-  color: ${(props) => props.theme.white75};
-  line-height: 1.35;
-
-  &:hover,
-  &:active {
-    color: ${(props) => props.theme.white};
-  }
-`;
-
-const AnimatePresence = m.div;
-
-const Reorderable = styled.div<{ $isDragging: boolean }>`
-  position: relative;
-  user-select: none;
-  border-radius: 8px;
-
-  // move above other cards when dragging
-  z-index: ${(props) => (props.$isDragging ? 1 : "inherit")};
-  transform: scale(${(props) => (props.$isDragging ? "1.025" : "1")});
-  box-shadow: ${(props) =>
-    props.$isDragging ? "0 0 20px rgba(0,0,0,0.3);" : "0 0 0 rgba(0,0,0,0)"};
-
-  &:hover ${Actions} {
-    opacity: 1;
-  }
-`;
-
-const Content = styled(Flex)`
-  min-width: 0;
-  height: 100%;
-
-  // move content above ::after
-  position: relative;
-  z-index: 1;
-`;
-
-const DocumentMeta = styled(Text)`
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  color: ${(props) => transparentize(0.25, props.theme.white)};
-  margin: 0;
-`;
-
-const DocumentLink = styled(Link)<{
-  $menuOpen?: boolean;
-  $isDragging?: boolean;
-}>`
-  position: relative;
-  display: block;
-  padding: 12px;
-  border-radius: 8px;
-  height: 160px;
-  background: ${(props) => props.theme.slate};
-  color: ${(props) => props.theme.white};
-  transition: transform 50ms ease-in-out;
-
-  &:after {
-    content: "";
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: linear-gradient(transparent, rgba(0, 0, 0, 0.1));
-    border-radius: 8px;
-    pointer-events: none;
-  }
-
-  ${Actions} {
-    opacity: 0;
-  }
-
-  &:hover,
-  &:active,
-  &:focus,
-  &:focus-within {
-    ${Actions} {
-      opacity: 1;
-    }
-
-    ${(props) =>
-      !props.$isDragging &&
-      css`
-        &:after {
-          background: rgba(0, 0, 0, 0.1);
-        }
-      `}
-  }
-
-  ${(props) =>
-    props.$menuOpen &&
-    css`
-      background: ${(props) => props.theme.listItemHoverBackground};
-
-      ${Actions} {
-        opacity: 1;
-      }
-    `}
-`;
-
-const Heading = styled.h3`
-  margin-top: 0;
-  margin-bottom: 0.35em;
-  line-height: 22px;
-  max-height: 66px; // 3*line-height
-  overflow: hidden;
-
-  color: ${(props) => props.theme.white};
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
-    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
-`;
-
-export default observer(DocumentCard);

app/components/DocumentHistory.tsx

@@ -1,133 +0,0 @@
-import { observer } from "mobx-react";
-import { CloseIcon } from "outline-icons";
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-import { useHistory, useRouteMatch } from "react-router-dom";
-import styled from "styled-components";
-import breakpoint from "styled-components-breakpoint";
-import Event from "~/models/Event";
-import Button from "~/components/Button";
-import Empty from "~/components/Empty";
-import Flex from "~/components/Flex";
-import PaginatedEventList from "~/components/PaginatedEventList";
-import Scrollable from "~/components/Scrollable";
-import useStores from "~/hooks/useStores";
-import { documentUrl } from "~/utils/routeHelpers";
-
-const EMPTY_ARRAY: Event[] = [];
-
-function DocumentHistory() {
-  const { events, documents } = useStores();
-  const { t } = useTranslation();
-  const match = useRouteMatch<{ documentSlug: string }>();
-  const history = useHistory();
-  const document = documents.getByUrl(match.params.documentSlug);
-
-  const eventsInDocument = document
-    ? events.inDocument(document.id)
-    : EMPTY_ARRAY;
-
-  const onCloseHistory = () => {
-    if (document) {
-      history.push(documentUrl(document));
-    } else {
-      history.goBack();
-    }
-  };
-
-  const items = React.useMemo(() => {
-    if (
-      eventsInDocument[0] &&
-      document &&
-      eventsInDocument[0].createdAt !== document.updatedAt
-    ) {
-      eventsInDocument.unshift(
-        new Event(
-          {
-            name: "documents.latest_version",
-            documentId: document.id,
-            createdAt: document.updatedAt,
-            actor: document.updatedBy,
-          },
-          events
-        )
-      );
-    }
-
-    return eventsInDocument;
-  }, [eventsInDocument, events, document]);
-
-  return (
-    <Sidebar>
-      {document ? (
-        <Position column>
-          <Header>
-            <Title>{t("History")}</Title>
-            <Button
-              icon={<CloseIcon />}
-              onClick={onCloseHistory}
-              borderOnHover
-              neutral
-            />
-          </Header>
-          <Scrollable topShadow>
-            <PaginatedEventList
-              aria-label={t("History")}
-              fetch={events.fetchPage}
-              events={items}
-              options={{
-                documentId: document.id,
-              }}
-              document={document}
-              empty={<Empty>{t("Oh weird, there's nothing here")}</Empty>}
-            />
-          </Scrollable>
-        </Position>
-      ) : null}
-    </Sidebar>
-  );
-}
-
-const Position = styled(Flex)`
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  width: ${(props) => props.theme.sidebarWidth}px;
-`;
-
-const Sidebar = styled(Flex)`
-  display: none;
-  position: relative;
-  flex-shrink: 0;
-  background: ${(props) => props.theme.background};
-  width: ${(props) => props.theme.sidebarWidth}px;
-  border-left: 1px solid ${(props) => props.theme.divider};
-  z-index: 1;
-
-  ${breakpoint("tablet")`
-    display: flex;
-  `};
-`;
-
-const Title = styled(Flex)`
-  font-size: 16px;
-  font-weight: 600;
-  text-align: center;
-  align-items: center;
-  justify-content: flex-start;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  width: 0;
-  flex-grow: 1;
-`;
-
-const Header = styled(Flex)`
-  align-items: center;
-  position: relative;
-  padding: 12px;
-  color: ${(props) => props.theme.text};
-  flex-shrink: 0;
-`;
-
-export default observer(DocumentHistory);

app/components/DocumentHistory/DocumentHistory.js

@@ -0,0 +1,199 @@
+// @flow
+import ArrowKeyNavigation from "boundless-arrow-key-navigation";
+import { action, observable } from "mobx";
+import { inject, observer } from "mobx-react";
+import { CloseIcon } from "outline-icons";
+import * as React from "react";
+import { type Match, Redirect, type RouterHistory } from "react-router-dom";
+import { Waypoint } from "react-waypoint";
+import styled from "styled-components";
+
+import breakpoint from "styled-components-breakpoint";
+import { DEFAULT_PAGINATION_LIMIT } from "stores/BaseStore";
+import DocumentsStore from "stores/DocumentsStore";
+import RevisionsStore from "stores/RevisionsStore";
+
+import Button from "components/Button";
+import Flex from "components/Flex";
+import { ListPlaceholder } from "components/LoadingPlaceholder";
+import Revision from "./components/Revision";
+import { documentHistoryUrl, documentUrl } from "utils/routeHelpers";
+
+type Props = {
+  match: Match,
+  documents: DocumentsStore,
+  revisions: RevisionsStore,
+  history: RouterHistory,
+};
+
+@observer
+class DocumentHistory extends React.Component<Props> {
+  @observable isLoaded: boolean = false;
+  @observable isFetching: boolean = false;
+  @observable offset: number = 0;
+  @observable allowLoadMore: boolean = true;
+  @observable redirectTo: ?string;
+
+  async componentDidMount() {
+    await this.loadMoreResults();
+    this.selectFirstRevision();
+  }
+
+  fetchResults = async () => {
+    this.isFetching = true;
+
+    const limit = DEFAULT_PAGINATION_LIMIT;
+    const results = await this.props.revisions.fetchPage({
+      limit,
+      offset: this.offset,
+      documentId: this.props.match.params.documentSlug,
+    });
+
+    if (
+      results &&
+      (results.length === 0 || results.length < DEFAULT_PAGINATION_LIMIT)
+    ) {
+      this.allowLoadMore = false;
+    } else {
+      this.offset += DEFAULT_PAGINATION_LIMIT;
+    }
+
+    this.isLoaded = true;
+    this.isFetching = false;
+  };
+
+  selectFirstRevision = () => {
+    if (this.revisions.length) {
+      const document = this.props.documents.getByUrl(
+        this.props.match.params.documentSlug
+      );
+      if (!document) return;
+
+      this.props.history.replace(
+        documentHistoryUrl(document, this.revisions[0].id)
+      );
+    }
+  };
+
+  @action
+  loadMoreResults = async () => {
+    // Don't paginate if there aren't more results or we’re in the middle of fetching
+    if (!this.allowLoadMore || this.isFetching) return;
+    await this.fetchResults();
+  };
+
+  get revisions() {
+    const document = this.props.documents.getByUrl(
+      this.props.match.params.documentSlug
+    );
+    if (!document) return [];
+    return this.props.revisions.getDocumentRevisions(document.id);
+  }
+
+  onCloseHistory = () => {
+    const document = this.props.documents.getByUrl(
+      this.props.match.params.documentSlug
+    );
+
+    this.redirectTo = documentUrl(document);
+  };
+
+  render() {
+    const document = this.props.documents.getByUrl(
+      this.props.match.params.documentSlug
+    );
+    const showLoading = (!this.isLoaded && this.isFetching) || !document;
+
+    if (this.redirectTo) return <Redirect to={this.redirectTo} push />;
+
+    return (
+      <Sidebar>
+        <Wrapper column>
+          <Header>
+            <Title>History</Title>
+            <Button
+              icon={<CloseIcon />}
+              onClick={this.onCloseHistory}
+              borderOnHover
+              neutral
+            />
+          </Header>
+          {showLoading ? (
+            <Loading>
+              <ListPlaceholder count={5} />
+            </Loading>
+          ) : (
+            <ArrowKeyNavigation
+              mode={ArrowKeyNavigation.mode.VERTICAL}
+              defaultActiveChildIndex={0}
+            >
+              {this.revisions.map((revision, index) => (
+                <Revision
+                  key={revision.id}
+                  revision={revision}
+                  document={document}
+                  showMenu={index !== 0}
+                  selected={this.props.match.params.revisionId === revision.id}
+                />
+              ))}
+            </ArrowKeyNavigation>
+          )}
+          {this.allowLoadMore && (
+            <Waypoint key={this.offset} onEnter={this.loadMoreResults} />
+          )}
+        </Wrapper>
+      </Sidebar>
+    );
+  }
+}
+
+const Loading = styled.div`
+  margin: 0 16px;
+`;
+
+const Wrapper = styled(Flex)`
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 1;
+  min-width: ${(props) => props.theme.sidebarWidth}px;
+  height: 100%;
+  overflow-y: auto;
+  overscroll-behavior: none;
+`;
+
+const Sidebar = styled(Flex)`
+  display: none;
+  background: ${(props) => props.theme.background};
+  min-width: ${(props) => props.theme.sidebarWidth}px;
+  border-left: 1px solid ${(props) => props.theme.divider};
+  z-index: 1;
+
+  ${breakpoint("tablet")`
+    display: flex;
+  `};
+`;
+
+const Title = styled(Flex)`
+  font-size: 16px;
+  font-weight: 600;
+  text-align: center;
+  align-items: center;
+  justify-content: flex-start;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  width: 0;
+  flex-grow: 1;
+`;
+
+const Header = styled(Flex)`
+  align-items: center;
+  position: relative;
+  padding: 12px;
+  border-bottom: 1px solid ${(props) => props.theme.divider};
+  color: ${(props) => props.theme.text};
+  flex-shrink: 0;
+`;
+
+export default inject("documents", "revisions")(DocumentHistory);

app/components/DocumentHistory/components/Revision.js

@@ -0,0 +1,87 @@
+// @flow
+import { format } from "date-fns";
+import * as React from "react";
+import { NavLink } from "react-router-dom";
+import styled, { withTheme } from "styled-components";
+
+import Document from "models/Document";
+import Revision from "models/Revision";
+import Avatar from "components/Avatar";
+import Flex from "components/Flex";
+import Time from "components/Time";
+import RevisionMenu from "menus/RevisionMenu";
+import { type Theme } from "types";
+
+import { documentHistoryUrl } from "utils/routeHelpers";
+
+type Props = {
+  theme: Theme,
+  showMenu: boolean,
+  selected: boolean,
+  document: Document,
+  revision: Revision,
+};
+
+class RevisionListItem extends React.Component<Props> {
+  render() {
+    const { revision, document, showMenu, selected, theme } = this.props;
+
+    return (
+      <StyledNavLink
+        to={documentHistoryUrl(document, revision.id)}
+        activeStyle={{ background: theme.primary, color: theme.white }}
+      >
+        <Author>
+          <StyledAvatar src={revision.createdBy.avatarUrl} />{" "}
+          {revision.createdBy.name}
+        </Author>
+        <Meta>
+          <Time dateTime={revision.createdAt} tooltipDelay={250}>
+            {format(Date.parse(revision.createdAt), "MMMM do, yyyy h:mm a")}
+          </Time>
+        </Meta>
+        {showMenu && (
+          <StyledRevisionMenu
+            document={document}
+            revision={revision}
+            iconColor={selected ? theme.white : theme.textTertiary}
+          />
+        )}
+      </StyledNavLink>
+    );
+  }
+}
+
+const StyledAvatar = styled(Avatar)`
+  border-color: transparent;
+  margin-right: 4px;
+`;
+
+const StyledRevisionMenu = styled(RevisionMenu)`
+  position: absolute;
+  right: 16px;
+  top: 20px;
+`;
+
+const StyledNavLink = styled(NavLink)`
+  color: ${(props) => props.theme.text};
+  display: block;
+  padding: 8px 16px;
+  font-size: 15px;
+  position: relative;
+`;
+
+const Author = styled(Flex)`
+  font-weight: 500;
+  padding: 0;
+  margin: 0;
+`;
+
+const Meta = styled.p`
+  font-size: 14px;
+  opacity: 0.75;
+  margin: 0 0 2px;
+  padding: 0;
+`;
+
+export default withTheme(RevisionListItem);

app/components/DocumentHistory/index.js

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