Merge branch 'main' of https://github.com/outline/outline into fix/2122

check for collaborativeEditing
2026-06-13 19:35:02 +03:00 · 2021-10-08 09:29:29 +05:30 · 2021-10-07 23:14:42 +05:30 · 2021-10-07 23:13:36 +05:30 · 2021-09-28 08:50:36 +05:30 · 2021-09-28 08:49:48 +05:30
1356 changed files with 70101 additions and 53076 deletions
@@ -1,7 +1,7 @@
 {
  "presets": [
    "@babel/preset-react",
-    "@babel/preset-typescript",
+    "@babel/preset-flow",
    [
      "@babel/preset-env",
      {
@@ -25,17 +25,5 @@
    "@babel/plugin-transform-destructuring",
    "@babel/plugin-transform-regenerator",
    "transform-class-properties"
-  ],
-  "env": {
-    "production": {
-      "plugins": [
-        [
-          "styled-components",
-          {
-            "displayName": false
-          }
-        ]
-      ]
-    }
-  }
+  ]
 }
@@ -41,8 +41,8 @@ jobs:
          name: lint
          command: yarn lint
      - run:
-          name: typescript
-          command: yarn tsc
+          name: flow
+          command: yarn flow check --max-workers 4
      - run:
          name: test
          command: yarn test
@@ -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
@@ -1,3 +1,11 @@
+# 👋 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`
@@ -21,8 +29,8 @@ REDIS_URL=redis://localhost:6479
 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.
+# ALPHA – See [documentation](docs/SERVICES.md) on running the alpha version of
+# the collaboration server.
 COLLABORATION_URL=

 # To support uploading of images for avatars and document attachments an
@@ -86,20 +94,14 @@ OIDC_USERINFO_URI=
 OIDC_USERNAME_CLAIM=preferred_username

 # Display name for OIDC authentication
-OIDC_DISPLAY_NAME=OpenID
+OIDC_DISPLAY_NAME=OpenID Connect

 # Space separated auth scopes.
-OIDC_SCOPES="openid profile email"
+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
@@ -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:react-hooks/recommended",
-    "plugin:prettier/recommended"
+    "react-app",
+    "plugin:import/errors",
+    "plugin:import/warnings",
+    "plugin:flowtype/recommended",
+    "plugin:react-hooks/recommended"
  ],
  "plugins": [
-    "@typescript-eslint",
-    "eslint-plugin-import",
-    "eslint-plugin-node",
-    "eslint-plugin-react",
-    "eslint-plugin-react-hooks",
-    "import"
+    "prettier",
+    "flowtype"
  ],
  "rules": {
    "eqeqeq": 2,
-    "curly": 2,
+    "no-unused-vars": 2,
    "no-mixed-operators": "off",
-    "no-useless-escape": "off",
-    "@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
  }
 }
@@ -0,0 +1,44 @@
+[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/.*
+.*/node_modules/yjs/.*
+.*/node_modules/y-prosemirror/.*
+.*/node_modules/y-protocols/.*
+.*/node_modules/y-indexeddb/.*
+.*/node_modules/lib0/.*
+.*/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
@@ -1,5 +1,5 @@
 # Number of days of inactivity before an issue becomes stale
-daysUntilStale: 120
+daysUntilStale: 90

 # Number of days of inactivity before a stale issue is closed
 daysUntilClose: 14
@@ -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@v1
-      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@v1
-
-    # ℹ️ 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@v1
@@ -8,6 +8,3 @@ stats.json
 .DS_Store
 fakes3/*
 .idea
-*.pem
-*.key
-*.cert
@@ -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,
 }
@@ -1,6 +1,6 @@
 # syntax=docker/dockerfile:1.2
 ARG APP_PATH=/opt/outline
-FROM node:16-alpine AS deps-common
+FROM node:14-alpine AS deps-common

 ARG APP_PATH
 WORKDIR $APP_PATH
@@ -17,18 +17,17 @@ RUN yarn install --production=true --frozen-lockfile && \
  yarn cache clean

 # ---
-FROM node:16-alpine AS builder
+FROM node:14-alpine AS builder

 ARG APP_PATH
 WORKDIR $APP_PATH

 COPY . .
 COPY --from=deps-dev $APP_PATH/node_modules ./node_modules
-ARG CDN_URL
 RUN yarn build

 # ---
-FROM node:16-alpine AS runner
+FROM node:14-alpine AS runner

 ARG APP_PATH
 WORKDIR $APP_PATH
@@ -3,7 +3,7 @@ Business Source License 1.1
 Parameters

 Licensor:             General Outline, Inc.
-Licensed Work:        Outline 0.60.1
+Licensed Work:        Outline 0.59.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:          2025-11-11
+Change Date:          2025-09-07

 Change License:       Apache License, Version 2.0

@@ -1,2 +1,2 @@
-web: yarn start --services=web,websockets,collaboration
+web: yarn start --services=web,websockets
 worker: yarn start --services=worker
@@ -2,16 +2,15 @@
  <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,19 +19,93 @@ 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
+## Self-Hosted Production

-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.
+### Docker

-## Contributing
+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:

@@ -74,9 +147,6 @@ frontend and backend tests directly.
 # 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 +155,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
 ```

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

@@ -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
    },
@@ -43,12 +43,8 @@
      "value": "true",
      "required": true
    },
-    "ALLOWED_DOMAINS": {
-      "description": "Comma separated list of domains to be allowed (optional). If not set, all domains are allowed by default when using Google OAuth to signin. Consider putting {your app name}.herokuapp.com and any domain you are binding on in this list.",
-      "required": false
-    },
    "URL": {
-      "description": "https://{your app name}.herokuapp.com, or the domain you are binding to",
+      "description": "https://{your app name}.herokuapp.com",
      "required": true
    },
    "GOOGLE_CLIENT_ID": {
@@ -59,51 +55,8 @@
      "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",
-      "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",
+    "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
    },
    "SLACK_KEY": {
@@ -202,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
    }
  }
 }
@@ -1,9 +0,0 @@
-{
-  "extends": [
-    "../.eslintrc"
-  ],
-  "env": {
-    "jest": true,
-    "browser": true
-  }
-}
@@ -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"
+  ]
 }
@@ -1,71 +0,0 @@
-import { CollectionIcon, EditIcon, PlusIcon } from "outline-icons";
-import * as React from "react";
-import stores from "~/stores";
-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";
-
-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: <DynamicCollectionIcon 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 rootCollectionActions = [openCollection, createCollection];
@@ -1,32 +0,0 @@
-import { ToolsIcon, TrashIcon } from "outline-icons";
-import * as React from "react";
-import stores from "~/stores";
-import { createAction } from "~/actions";
-import { DebugSection } from "~/actions/sections";
-import env from "~/env";
-import { deleteAllDatabases } from "~/utils/developer";
-
-export const clearIndexedDB = createAction({
-  name: ({ t }) => t("Delete IndexedDB cache"),
-  icon: <TrashIcon />,
-  keywords: "cache clear database",
-  section: DebugSection,
-  perform: async ({ t }) => {
-    await deleteAllDatabases();
-    stores.toasts.showToast(t("IndexedDB cache deleted"));
-  },
-});
-
-export const development = createAction({
-  name: ({ t }) => t("Development"),
-  keywords: "debug",
-  icon: <ToolsIcon />,
-  iconInContextMenu: false,
-  section: DebugSection,
-  visible: ({ event }) =>
-    env.ENVIRONMENT === "development" ||
-    (event instanceof KeyboardEvent && event.altKey),
-  children: [clearIndexedDB],
-});
-
-export const rootDebugActions = [development];
@@ -1,324 +0,0 @@
-import invariant from "invariant";
-import {
-  DownloadIcon,
-  DuplicateIcon,
-  StarredIcon,
-  PrintIcon,
-  UnstarredIcon,
-  DocumentIcon,
-  NewDocumentIcon,
-  ShapesIcon,
-  ImportIcon,
-  PinIcon,
-} from "outline-icons";
-import * as React from "react";
-import getDataTransferFiles from "@shared/utils/getDataTransferFiles";
-import DocumentTemplatize from "~/scenes/DocumentTemplatize";
-import { createAction } from "~/actions";
-import { DocumentSection } from "~/actions/sections";
-import history from "~/utils/history";
-import { homePath, newDocumentPath } 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 }) =>
-    activeCollectionId && history.push(newDocumentPath(activeCollectionId)),
-});
-
-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 pinDocument = createAction({
-  name: ({ t }) => t("Pin to collection"),
-  section: DocumentSection,
-  icon: <PinIcon />,
-  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 />,
-  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 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: Event) => {
-      const files = getDataTransferFiles(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"),
-      content: (
-        <DocumentTemplatize
-          documentId={activeDocumentId}
-          onSubmit={stores.dialogs.closeAllModals}
-        />
-      ),
-    });
-  },
-});
-
-export const rootDocumentActions = [
-  openDocument,
-  createDocument,
-  createTemplate,
-  importDocument,
-  downloadDocument,
-  starDocument,
-  unstarDocument,
-  duplicateDocument,
-  printDocument,
-  pinDocument,
-  pinDocumentToHome,
-];
@@ -1,160 +0,0 @@
-import {
-  HomeIcon,
-  SearchIcon,
-  ArchiveIcon,
-  TrashIcon,
-  EditIcon,
-  OpenIcon,
-  SettingsIcon,
-  ShapesIcon,
-  KeyboardIcon,
-  EmailIcon,
-  LogoutIcon,
-} from "outline-icons";
-import * as React from "react";
-import {
-  developersUrl,
-  changelogUrl,
-  mailToUrl,
-  githubIssuesUrl,
-} from "@shared/utils/urlHelpers";
-import stores from "~/stores";
-import KeyboardShortcuts from "~/scenes/KeyboardShortcuts";
-import { createAction } from "~/actions";
-import { NavigationSection } from "~/actions/sections";
-import history from "~/utils/history";
-import {
-  settingsPath,
-  homePath,
-  searchUrl,
-  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 navigateToSearch = createAction({
-  name: ({ t }) => t("Search"),
-  section: NavigationSection,
-  shortcut: ["/"],
-  icon: <SearchIcon />,
-  perform: () => history.push(searchUrl()),
-  visible: ({ location }) => location.pathname !== searchUrl(),
-});
-
-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,
-  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"],
-  iconInContextMenu: false,
-  icon: <SettingsIcon />,
-  perform: () => history.push(settingsPath()),
-});
-
-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(mailToUrl()),
-});
-
-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,
-  navigateToSearch,
-  navigateToDrafts,
-  navigateToTemplates,
-  navigateToArchive,
-  navigateToTrash,
-  navigateToSettings,
-  openAPIDocumentation,
-  openFeedbackUrl,
-  openBugReportUrl,
-  openChangelog,
-  openKeyboardShortcuts,
-  logout,
-];
@@ -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];
@@ -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];
@@ -1,114 +0,0 @@
-import { flattenDeep } from "lodash";
-import * as React from "react";
-import { $Diff } from "utility-types";
-import { v4 as uuidv4 } from "uuid";
-import {
-  Action,
-  ActionContext,
-  CommandBarAction,
-  MenuItemButton,
-  MenuItemWithChildren,
-} from "~/types";
-
-export function createAction(
-  definition: $Diff<
-    Action,
-    {
-      id?: string;
-    }
-  >
-): Action {
-  return {
-    id: uuidv4(),
-    ...definition,
-  };
-}
-
-export function actionToMenuItem(
-  action: Action,
-  context: ActionContext
-): MenuItemButton | MenuItemWithChildren {
-  function resolve<T>(value: any): T {
-    if (typeof value === "function") {
-      return value(context);
-    }
-
-    return value;
-  }
-
-  const resolvedIcon = resolve<React.ReactElement<any>>(action.icon);
-  const resolvedChildren = resolve<Action[]>(action.children);
-  const visible = action.visible ? action.visible(context) : true;
-  const title = resolve<string>(action.name);
-  const icon =
-    resolvedIcon && action.iconInContextMenu !== false
-      ? React.cloneElement(resolvedIcon, {
-          color: "currentColor",
-        })
-      : undefined;
-
-  if (resolvedChildren) {
-    return {
-      type: "submenu",
-      title,
-      icon,
-      items: resolvedChildren
-        .map((a) => actionToMenuItem(a, context))
-        .filter((a) => !!a),
-      visible,
-    };
-  }
-
-  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[] {
-  function resolve<T>(value: any): T {
-    if (typeof value === "function") {
-      return value(context);
-    }
-
-    return value;
-  }
-
-  if (typeof action.visible === "function" && !action.visible(context)) {
-    return [];
-  }
-
-  const resolvedIcon = resolve<React.ReactElement<any>>(action.icon);
-  const resolvedChildren = resolve<Action[]>(action.children);
-  const resolvedSection = resolve<string>(action.section);
-  const resolvedName = resolve<string>(action.name);
-  const resolvedPlaceholder = resolve<string>(action.placeholder);
-  const 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 && action.perform(context)
-        : undefined,
-    },
-    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
-  ].concat(children.map((child) => ({ ...child, parent: action.id })));
-}
@@ -1,15 +0,0 @@
-import { rootCollectionActions } from "./definitions/collections";
-import { rootDebugActions } from "./definitions/debug";
-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,
-  ...rootDebugActions,
-];
@@ -1,13 +0,0 @@
-import { ActionContext } from "~/types";
-
-export const CollectionSection = ({ t }: ActionContext) => t("Collection");
-
-export const DebugSection = ({ 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");
@@ -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;
@@ -1,30 +1,32 @@
+// @flow
 /* global ga */
 import * as React from "react";
-import env from "~/env";
+import env from "env";

 type Props = {
-  children?: React.ReactNode;
+  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;
@@ -1,3 +1,4 @@
+// @flow
 import * as React from "react";

 export default function Arrow() {
@@ -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) {
@@ -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) {
@@ -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) {
@@ -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;
  }
@@ -1,15 +1,16 @@
+// @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 env from "~/env";
-import useStores from "~/hooks/useStores";
-import { changeLanguage } from "~/utils/language";
+import { isCustomSubdomain } from "shared/utils/domains";
+import LoadingIndicator from "components/LoadingIndicator";
+import useStores from "../hooks/useStores";
+import { changeLanguage } from "../utils/language";
+import env from "env";

 type Props = {
-  children: JSX.Element;
+  children: React.Node,
 };

 const Authenticated = ({ children }: Props) => {
@@ -1,106 +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 {
-  searchUrl,
-  matchDocumentSlug as slug,
-  newDocumentPath,
-  settingsPath,
-} from "~/utils/routeHelpers";
-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 & {
-    children?: React.ReactNode;
-  };
-
-@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(searchUrl());
-    }
-  };
-
-  goToNewDocument = () => {
-    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 ? (
-      <Switch>
-        <Route path={settingsPath()} component={SettingsSidebar} />
-        <Route component={Sidebar} />
-      </Switch>
-    ) : 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));
@@ -1,24 +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;
-  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,6 +29,7 @@ class Avatar extends React.Component<Props> {

  render() {
    const { src, icon, ...rest } = this.props;
+
    return (
      <AvatarWrapper>
        <CircleImg
@@ -59,7 +59,7 @@ const IconWrapper = styled.div`
  height: 20px;
 `;

-const CircleImg = styled.img<{ size: number }>`
+const CircleImg = styled.img`
  display: block;
  width: ${(props) => props.size}px;
  height: ${(props) => props.size}px;
@@ -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);
@@ -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);
@@ -1,6 +1,6 @@
+// @flow
 import Avatar from "./Avatar";
 import AvatarWithPresence from "./AvatarWithPresence";

 export { AvatarWithPresence };
-
 export default Avatar;
@@ -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;
@@ -1,11 +1,11 @@
+// @flow
 import * as React from "react";
 import styled from "styled-components";
-import breakpoint from "styled-components-breakpoint";
-import env from "~/env";
 import OutlineLogo from "./OutlineLogo";
+import env from "env";

 type Props = {
-  href?: string;
+  href?: string,
 };

 function Branding({ href = env.URL }: Props) {
@@ -18,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;
@@ -28,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};
@@ -36,14 +38,6 @@ const Link = styled.a`
  &:hover {
    background: ${(props) => props.theme.sidebarBackground};
  }
-
-  ${breakpoint("tablet")`
-    z-index: ${(props: any) => props.theme.depths.sidebar + 1};
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    padding: 16px;
-  `};
 `;

 export default Branding;
@@ -1,32 +1,35 @@
+// @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;
-  children?: React.ReactNode;
-  highlightFirstItem?: boolean;
-};
+type MenuItem = {|
+  icon?: React.Node,
+  title: React.Node,
+  to?: string,
+|};
+
+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} />,
    });
  }

@@ -39,7 +42,7 @@ function Breadcrumb({ items, highlightFirstItem, children, max = 2 }: Props) {
            <Item
              to={item.to}
              $withIcon={!!item.icon}
-              $highlight={!!highlightFirstItem && index === 0}
+              $highlight={highlightFirstItem && index === 0}
            >
              {item.title}
            </Item>
@@ -59,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;
@@ -1,10 +1,11 @@
+// @flow
 import * as React from "react";
 import styled from "styled-components";
-import { bounceIn } from "~/styles/animations";
+import { bounceIn } from "styles/animations";

-type Props = {
-  count: number;
-};
+type Props = {|
+  count: number,
+|};

 const Bubble = ({ count }: Props) => {
  if (!count) {
@@ -1,15 +1,10 @@
+// @flow
 import { ExpandedIcon } from "outline-icons";
-import { darken, lighten } from "polished";
+import { darken } 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;
-}>`
+const RealButton = styled.button`
  display: ${(props) => (props.fullwidth ? "block" : "inline-block")};
  width: ${(props) => (props.fullwidth ? "100%" : "auto")};
  margin: 0;
@@ -26,13 +21,12 @@ const RealButton = styled.button<{
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
-  appearance: none !important;

  ${(props) =>
    !props.borderOnHover &&
    `
      svg {
-        fill: ${props.iconColor || "currentColor"};
+        fill: ${props.iconColor || props.theme.buttonText};
      }
    `}

@@ -49,7 +43,6 @@ const RealButton = styled.button<{
    cursor: default;
    pointer-events: none;
    color: ${(props) => props.theme.white50};
-    background: ${(props) => lighten(0.2, props.theme.buttonBackground)};

    svg {
      fill: ${(props) => props.theme.white50};
@@ -71,10 +64,10 @@ const RealButton = styled.button<{
      props.borderOnHover
        ? ""
        : `svg {
-      fill: ${props.iconColor || "currentColor"};
+      fill: ${props.iconColor || props.theme.buttonNeutralText};
    }`
    }
-
+    

    &:hover:not(:disabled) {
      background: ${
@@ -89,31 +82,24 @@ const RealButton = styled.button<{

    &:disabled {
      color: ${props.theme.textTertiary};
-      background: none;

      svg {
-        fill: currentColor;
+        fill: ${props.theme.textTertiary};
      }
    }
-  `}
-
-  ${(props) =>
+  `} ${(props) =>
    props.danger &&
    `
      background: ${props.theme.danger};
      color: ${props.theme.white};

-      &:hover:not(:disabled) {
+      &:hover {
        background: ${darken(0.05, props.theme.danger)};
      }
-
-      &:disabled {
-        background: none;
-      }
  `};
 `;

-const Label = styled.span<{ hasIcon?: boolean }>`
+const Label = styled.span`
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
@@ -121,11 +107,7 @@ const Label = styled.span<{ hasIcon?: boolean }>`
  ${(props) => props.hasIcon && "padding-left: 4px;"};
 `;

-export const Inner = styled.span<{
-  disclosure?: boolean;
-  hasIcon?: boolean;
-  hasText?: boolean;
-}>`
+export const Inner = styled.span`
  display: flex;
  padding: 0 8px;
  padding-right: ${(props) => (props.disclosure ? 2 : 8)}px;
@@ -138,41 +120,58 @@ export const Inner = styled.span<{
  ${(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?: string;
-  borderOnHover?: boolean;
-  href?: string;
-  "data-on"?: string;
-  "data-event-category"?: string;
-  "data-event-action"?: string;
-};
+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> | string,
+  to?: string,
+  onClick?: (event: SyntheticEvent<>) => mixed,
+  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;
+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 || "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>
-  );
-};
+    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 React.forwardRef(Button);
+export default Button;
@@ -1,3 +1,4 @@
+// @flow
 import styled from "styled-components";
 import Button, { Inner } from "./Button";

@@ -1,16 +1,15 @@
+// @flow
 import * as React from "react";
 import styled from "styled-components";

 type Props = {
-  onClick?: React.MouseEventHandler<HTMLButtonElement>;
-  children: React.ReactNode;
+  onClick: (ev: SyntheticEvent<>) => void,
+  children: React.Node,
 };

-const ButtonLink = React.forwardRef(
-  (props: Props, ref: React.Ref<HTMLButtonElement>) => {
-    return <Button {...props} ref={ref} />;
-  }
-);
+export default function ButtonLink(props: Props) {
+  return <Button {...props} />;
+}

 const Button = styled.button`
  margin: 0;
@@ -22,5 +21,3 @@ const Button = styled.button`
  text-decoration: none;
  cursor: pointer;
 `;
-
-export default ButtonLink;
@@ -1,19 +1,20 @@
+// @flow
 import * as React from "react";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";

-type Props = {
-  children?: React.ReactNode;
-  withStickyHeader?: boolean;
-};
+type Props = {|
+  children?: React.Node,
+  withStickyHeader?: boolean,
+|};

-const Container = styled.div<{ withStickyHeader?: boolean }>`
+const Container = styled.div`
  width: 100%;
  max-width: 100vw;
  padding: ${(props) => (props.withStickyHeader ? "4px 12px" : "60px 12px")};

  ${breakpoint("tablet")`
-    padding: ${(props: any) => (props.withStickyHeader ? "4px 60px" : "60px")};
+    padding: ${(props) => (props.withStickyHeader ? "4px 60px" : "60px")};
  `};
 `;

@@ -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>
+    </>
+  );
+}
@@ -1,7 +1,8 @@
+// @flow
 import React from "react";
 import styled, { useTheme } from "styled-components";

-const cleanPercentage = (percentage: number) => {
+const cleanPercentage = (percentage) => {
  const tooLow = !Number.isFinite(+percentage) || percentage < 0;
  const tooHigh = percentage > 100;
  return tooLow ? 0 : tooHigh ? 100 : +percentage;
@@ -12,14 +13,13 @@ const Circle = ({
  percentage,
  offset,
 }: {
-  color: string;
-  percentage?: number;
-  offset: number;
+  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;
@@ -39,9 +39,7 @@ const Circle = ({
      strokeDasharray={circumference}
      strokeDashoffset={percentage ? strokePercentage : 0}
      strokeLinecap="round"
-      style={{
-        transition: "stroke-dashoffset 0.6s ease 0s",
-      }}
+      style={{ transition: "stroke-dashoffset 0.6s ease 0s" }}
    ></circle>
  );
 };
@@ -50,8 +48,8 @@ const CircularProgressBar = ({
  percentage,
  size = 16,
 }: {
-  percentage: number;
-  size?: number;
+  percentage: number,
+  size?: number,
 }) => {
  const theme = useTheme();
  percentage = cleanPercentage(percentage);
@@ -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;`};
@@ -0,0 +1,111 @@
+// @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 useCurrentUser from "hooks/useCurrentUser";
+import useStores from "hooks/useStores";
+
+type Props = {|
+  document: Document,
+|};
+
+function Collaborators(props: Props) {
+  const { t } = useTranslation();
+  const user = useCurrentUser();
+  const currentUserId = user?.id;
+  const { users, presence } = useStores();
+  const { document } = 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);
@@ -1,124 +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) => presentIds.includes(user.id)
-      ),
-    [document.collaboratorIds, users.orderedData, presentIds]
-  );
-
-  // load any users we don't yet have in memory
-  React.useEffect(() => {
-    const userIdsToFetch = uniq([
-      ...document.collaboratorIds,
-      ...presentIds,
-    ]).filter((userId) => !users.get(userId));
-
-    if (!isEqual(requestedUserIds, userIdsToFetch)) {
-      setRequestedUserIds(userIdsToFetch);
-    }
-
-    userIdsToFetch
-      .filter((userId) => requestedUserIds.includes(userId))
-      .forEach((userId) => users.fetch(userId));
-  }, [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);
@@ -1,21 +1,22 @@
+// @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 useDebouncedCallback from "~/hooks/useDebouncedCallback";
-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";
+import useToasts from "hooks/useToasts";

-type Props = {
-  collection: Collection;
-};
+type Props = {|
+  collection: Collection,
+|};

 function CollectionDescription({ collection }: Props) {
  const { collections, policies } = useStores();
@@ -39,7 +40,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();
      }

@@ -75,26 +75,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 || ""}
@@ -104,21 +99,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>
@@ -1,35 +1,35 @@
+// @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 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,
+  useLuminance?: boolean,
 };

 function ResolvedCollectionIcon({
  collection,
-  color: inputColor,
  expanded,
  size,
+  useLuminance,
 }: 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
-        ? collection.color
-        : "currentColor"
-      : collection.color);
+    (ui.resolvedTheme === "dark" || useLuminance) &&
+    collection.color !== "currentColor" &&
+    getLuminance(collection.color) <= 0.12
+      ? "currentColor"
+      : collection.color;

  if (collection.icon && collection.icon !== "collection") {
    try {
@@ -1,100 +0,0 @@
-import { useKBar, KBarPositioner, KBarAnimator, KBarSearch } from "kbar";
-import { observer } from "mobx-react";
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-import { Portal } from "react-portal";
-import styled from "styled-components";
-import breakpoint from "styled-components-breakpoint";
-import CommandBarResults from "~/components/CommandBarResults";
-import rootActions from "~/actions/root";
-import useCommandBarActions from "~/hooks/useCommandBarActions";
-import { CommandBarAction } from "~/types";
-
-export const CommandBarOptions = {
-  animations: {
-    enterMs: 250,
-    exitMs: 200,
-  },
-};
-
-function CommandBar() {
-  const { t } = useTranslation();
-  useCommandBarActions(rootActions);
-
-  const { rootAction } = useKBar((state) => ({
-    rootAction: state.currentRootActionId
-      ? ((state.actions[
-          state.currentRootActionId
-        ] as unknown) as CommandBarAction)
-      : undefined,
-  }));
-
-  return (
-    <KBarPortal>
-      <Positioner>
-        <Animator>
-          <SearchInput
-            placeholder={`${
-              rootAction?.placeholder ||
-              rootAction?.name ||
-              t("Type a command or search")
-            }…`}
-          />
-          <CommandBarResults />
-        </Animator>
-      </Positioner>
-    </KBarPortal>
-  );
-}
-
-function KBarPortal({ children }: { children: React.ReactNode }) {
-  const { showing } = useKBar((state) => ({
-    showing: state.visualState !== "hidden",
-  }));
-
-  if (!showing) {
-    return null;
-  }
-
-  return <Portal>{children}</Portal>;
-}
-
-const Positioner = styled(KBarPositioner)`
-  z-index: ${(props) => props.theme.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);
@@ -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);
@@ -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;
-`;
@@ -1,13 +1,14 @@
+// @flow
 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";
+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();
@@ -1,120 +0,0 @@
-import isPrintableKeyEvent from "is-printable-key-event";
-import * as React from "react";
-import styled from "styled-components";
-
-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;
-};
-
-/**
- * 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,
-    forwardedRef: React.RefObject<HTMLSpanElement>
-  ) => {
-    const innerRef = React.useRef<HTMLSpanElement>(null);
-    const ref = forwardedRef || innerRef;
-    const [innerValue, setInnerValue] = React.useState<string>(value);
-    const lastValue = React.useRef("");
-
-    const wrappedEvent = (
-      callback:
-        | React.FocusEventHandler<HTMLSpanElement>
-        | React.FormEventHandler<HTMLSpanElement>
-        | React.KeyboardEventHandler<HTMLSpanElement>
-        | undefined
-    ) => (event: any) => {
-      const text = ref.current?.innerText || "";
-
-      if (maxLength && isPrintableKeyEvent(event) && text.length >= maxLength) {
-        event?.preventDefault();
-        return;
-      }
-
-      if (text !== lastValue.current) {
-        lastValue.current = text;
-        onChange && onChange(text);
-      }
-
-      callback?.(event);
-    };
-
-    React.useLayoutEffect(() => {
-      if (autoFocus) {
-        ref.current?.focus();
-      }
-    }, [autoFocus, ref]);
-
-    React.useEffect(() => {
-      if (value !== ref.current?.innerText) {
-        setInnerValue(value);
-      }
-    }, [value, ref]);
-
-    return (
-      <div className={className} dir={dir} onClick={onClick}>
-        <Content
-          ref={ref}
-          contentEditable={!disabled && !readOnly}
-          onInput={wrappedEvent(onInput)}
-          onBlur={wrappedEvent(onBlur)}
-          onKeyDown={wrappedEvent(onKeyDown)}
-          data-placeholder={placeholder}
-          suppressContentEditableWarning
-          role="textbox"
-          {...rest}
-        >
-          {innerValue}
-        </Content>
-        {children}
-      </div>
-    );
-  }
-);
-
-const Content = styled.span`
-  &: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;
@@ -1,3 +1,4 @@
+// @flow
 import styled from "styled-components";

 const Header = styled.h3`
@@ -1,25 +1,24 @@
+// @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 breakpoint from "styled-components-breakpoint";
-import { hover } from "~/styles";
 import MenuIconWrapper from "../MenuIconWrapper";

-type Props = {
-  onClick?: (arg0: React.SyntheticEvent) => void | Promise<void>;
-  children?: React.ReactNode;
-  selected?: boolean;
-  disabled?: boolean;
-  dangerous?: boolean;
-  to?: string;
-  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,
+  level?: number,
+  icon?: React.Node,
+|};

 const MenuItem = ({
  onClick,
@@ -75,11 +74,7 @@ const MenuItem = ({
              &nbsp;
            </>
          )}
-          {icon && (
-            <MenuIconWrapper>
-              {React.cloneElement(icon, { color: "currentColor" })}
-            </MenuIconWrapper>
-          )}
+          {icon && <MenuIconWrapper>{icon}</MenuIconWrapper>}
          {children}
        </MenuAnchor>
      )}
@@ -93,11 +88,7 @@ const Spacer = styled.svg`
  flex-shrink: 0;
 `;

-export const MenuAnchorCSS = css<{
-  level?: number;
-  disabled?: boolean;
-  dangerous?: boolean;
-}>`
+export const MenuAnchorCSS = css`
  display: flex;
  margin: 0;
  border: 0;
@@ -113,7 +104,6 @@ export const MenuAnchorCSS = css<{
  font-size: 16px;
  cursor: default;
  user-select: none;
-  white-space: nowrap;

  svg:not(:last-child) {
    margin-right: 4px;
@@ -129,11 +119,11 @@ export const MenuAnchorCSS = css<{
      ? "pointer-events: none;"
      : `

-  &:${hover},
+  &:hover,  
  &:focus,
  &.focus-visible {
    color: ${props.theme.white};
-    background: ${props.dangerous ? props.theme.danger : props.theme.primary};
+    background: ${props.theme.primary};
    box-shadow: none;
    cursor: pointer;

@@ -148,7 +138,6 @@ export const MenuAnchorCSS = css<{
    font-size: 14px;
  `};
 `;
-
 export const MenuAnchor = styled.a`
  ${MenuAnchorCSS}
 `;
@@ -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) => (
@@ -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: any) {
+export default function Separator(rest: {}) {
  return (
    <MenuSeparator {...rest}>
      {(props) => <HorizontalRule {...props} />}
@@ -0,0 +1,165 @@
+// @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 Flex from "components/Flex";
+import MenuIconWrapper from "components/MenuIconWrapper";
+import Header from "./Header";
+import MenuItem, { MenuAnchor } from "./MenuItem";
+import Separator from "./Separator";
+import ContextMenu from ".";
+import { type MenuItem as TMenuItem } from "types";
+
+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 {
+  const filteredTemplates = filterTemplateItems(items);
+  const iconIsPresentInAnyMenuItem = filteredTemplates.find(
+    (item) => !item.type && !!item.icon
+  );
+
+  return filteredTemplates.map((item, index) => {
+    if (iconIsPresentInAnyMenuItem && !item.type) {
+      item.icon = item.icon || <MenuIconWrapper />;
+    }
+
+    if (item.to) {
+      return (
+        <MenuItem
+          as={Link}
+          to={item.to}
+          key={index}
+          disabled={item.disabled}
+          selected={item.selected}
+          icon={item.icon}
+          {...menu}
+        >
+          {item.title}
+        </MenuItem>
+      );
+    }
+
+    if (item.href) {
+      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.onClick) {
+      return (
+        <MenuItem
+          as="button"
+          onClick={item.onClick}
+          disabled={item.disabled}
+          selected={item.selected}
+          key={index}
+          icon={item.icon}
+          {...menu}
+        >
+          {item.title}
+        </MenuItem>
+      );
+    }
+
+    if (item.items) {
+      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>;
+    }
+
+    console.warn("Unrecognized menu item", item);
+    return null;
+  });
+}
+
+function Title({ title, icon }) {
+  return (
+    <Flex align="center">
+      {icon && <MenuIconWrapper>{icon}</MenuIconWrapper>}
+      {title}
+    </Flex>
+  );
+}
+
+export default React.memo<Props>(Template);
@@ -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 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 {...props}>
-              {title} <Disclosure color={theme.textTertiary} />
-            </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 unnecessary separators
-  filtered = filtered.reduce((acc, item, index) => {
-    // trim separators from start / end
-    if (item.type === "separator" && index === 0) {
-      return acc;
-    }
-    if (item.type === "separator" && index === filtered.length - 1) {
-      return acc;
-    }
-
-    // trim double separators looking ahead / behind
-    const prev = filtered[index - 1];
-    if (prev && prev.type === "separator" && item.type === "separator") {
-      return acc;
-    }
-
-    // otherwise, continue
-    return [...acc, item];
-  }, []);
-
-  return filtered;
-}
-
-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);
@@ -1,45 +1,31 @@
+// @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 useMenuHeight from "~/hooks/useMenuHeight";
-import usePrevious from "~/hooks/usePrevious";
+import useMenuHeight from "hooks/useMenuHeight";
+import usePrevious from "hooks/usePrevious";
 import {
  fadeIn,
  fadeAndSlideUp,
  fadeAndSlideDown,
  mobileContextMenu,
-} from "~/styles/animations";
+} 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;
-  children: React.ReactNode;
-  unstable_disclosureRef?: React.RefObject<HTMLElement | null>;
-  onOpen?: () => void;
-  onClose?: () => void;
-  hide?: () => void;
-};
+type Props = {|
+  "aria-label": string,
+  visible?: boolean,
+  placement?: string,
+  animating?: boolean,
+  children: React.Node,
+  unstable_disclosureRef?: {
+    current: null | React.ElementRef<"button">,
+  },
+  onOpen?: () => void,
+  onClose?: () => void,
+  hide?: () => void,
+|};

 export default function ContextMenu({
  children,
@@ -49,7 +35,7 @@ export default function ContextMenu({
 }: Props) {
  const previousVisible = usePrevious(rest.visible);
  const maxHeight = useMenuHeight(rest.visible, rest.unstable_disclosureRef);
-  const backgroundRef = React.useRef<HTMLDivElement>(null);
+  const backgroundRef = React.useRef();

  React.useEffect(() => {
    if (rest.visible && !previousVisible) {
@@ -57,7 +43,6 @@ export default function ContextMenu({
        onOpen();
      }
    }
-
    if (!rest.visible && previousVisible) {
      if (onClose) {
        onClose();
@@ -65,11 +50,6 @@ export default function ContextMenu({
    }
  }, [onOpen, onClose, previousVisible, 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 (
@@ -79,8 +59,7 @@ export default function ContextMenu({
          // 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 topAnchor = props.style.top === "0";
          const rightAnchor = props.placement === "bottom-end";

          return (
@@ -90,13 +69,7 @@ export default function ContextMenu({
                topAnchor={topAnchor}
                rightAnchor={rightAnchor}
                ref={backgroundRef}
-                style={
-                  maxHeight && topAnchor
-                    ? {
-                        maxHeight,
-                      }
-                    : undefined
-                }
+                style={maxHeight && topAnchor ? { maxHeight } : undefined}
              >
                {rest.visible || rest.animating ? children : null}
              </Background>
@@ -132,8 +105,6 @@ export const Position = styled.div`
  position: absolute;
  z-index: ${(props) => props.theme.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;
@@ -144,10 +115,7 @@ export const Position = styled.div`
  `};
 `;

-export const Background = styled.div<{
-  topAnchor?: boolean;
-  rightAnchor?: boolean;
-}>`
+export const Background = styled.div`
  animation: ${mobileContextMenu} 200ms ease;
  transform-origin: 50% 100%;
  max-width: 100%;
@@ -155,7 +123,6 @@ export const Background = styled.div<{
  border-radius: 6px;
  padding: 6px 0;
  min-width: 180px;
-  min-height: 44px;
  overflow: hidden;
  overflow-y: auto;
  max-height: 75vh;
@@ -167,11 +134,13 @@ export const Background = styled.div<{
  }

  ${breakpoint("tablet")`
-    animation: ${(props: any) =>
+    animation: ${(props) =>
      props.topAnchor ? fadeAndSlideDown : fadeAndSlideUp} 200ms ease;
-    transform-origin: ${(props: any) => (props.rightAnchor ? "75%" : "25%")} 0;
+    transform-origin: ${(props) => (props.rightAnchor ? "75%" : "25%")} 0;
    max-width: 276px;
-    background: ${(props: any) => props.theme.menuBackground};
-    box-shadow: ${(props: any) => props.theme.menuShadow};
+    background: ${(props) => props.theme.menuBackground};
+    box-shadow: ${(props) => props.theme.menuShadow};
+    border: ${(props) =>
+      props.theme.menuBorder ? `1px solid ${props.theme.menuBorder}` : "none"};
  `};
 `;
@@ -1,25 +1,24 @@
+// @flow
 import copy from "copy-to-clipboard";
 import * as React from "react";

 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: process.env.NODE_ENV !== "production",
      format: "text/plain",
    });
-    if (onCopy) {
-      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 });
  }
 }
@@ -1,103 +0,0 @@
-import { HomeIcon } from "outline-icons";
-import React, { useState } from "react";
-import { useTranslation } from "react-i18next";
-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 = {
-  onSelectCollection: (collection: string) => void;
-  defaultCollectionId: string | null;
-};
-
-const DefaultCollectionInputSelect = ({
-  onSelectCollection,
-  defaultCollectionId,
-}: 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"}
-      label={t("Start view")}
-      options={options}
-      onChange={onSelectCollection}
-      ariaLabel={t("Default collection")}
-      note={t(
-        "This is the screen that team members will first see when they sign in."
-      )}
-      short
-    />
-  );
-};
-
-export default DefaultCollectionInputSelect;
@@ -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) {
@@ -1,35 +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}
-          onRequestClose={() => dialogs.closeModal(id)}
-          title={modal.title}
-        >
-          {modal.content}
-        </Modal>
-      ))}
-    </>
-  );
-}
-
-export default observer(Dialogs);
@@ -1,3 +1,4 @@
+// @flow
 import styled from "styled-components";

 const Divider = styled.hr`
@@ -1,51 +1,58 @@
+// @flow
 import { observer } from "mobx-react";
-import { ArchiveIcon, GoToIcon, ShapesIcon, TrashIcon } from "outline-icons";
+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 { MenuInternalLink, NavigationNode } from "~/types";
-import { collectionUrl } from "~/utils/routeHelpers";
+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.ReactNode;
-  onlyText?: boolean;
-};
+type Props = {|
+  document: Document,
+  children?: React.Node,
+  onlyText: boolean,
+|};

-function useCategory(document: Document): MenuInternalLink | null {
+function useCategory(document) {
  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.isDraft) {
+    return {
+      icon: <EditIcon color="currentColor" />,
+      title: t("Drafts"),
+      to: "/drafts",
+    };
+  }
  if (document.isTemplate) {
    return {
-      type: "route",
      icon: <ShapesIcon color="currentColor" />,
      title: t("Templates"),
      to: "/templates",
    };
  }
-
  return null;
 }

@@ -53,49 +60,50 @@ const DocumentBreadcrumb = ({ document, children, onlyText }: Props) => {
  const { collections } = useStores();
  const { t } = useTranslation();
  const category = useCategory(document);
-  const collection = collections.get(document.collectionId);

-  let collectionNode: MenuInternalLink;
+  let collection = collections.get(document.collectionId || "");

-  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"),
+  if (!collection && document.collectionId) {
+    collection = {
+      id: document.collectionId,
+      name: t("Deleted Collection"),
+      color: "currentColor",
+      url: "deleted-collection",
    };
  }

  const path = React.useMemo(
-    () => collection?.pathToDocument?.(document.id).slice(0, -1) || [],
-    [collection, document]
+    () =>
+      collection && collection.pathToDocument
+        ? collection.pathToDocument(document.id).slice(0, -1)
+        : [],
+    [collection, document.id]
  );

  const items = React.useMemo(() => {
-    const output = [];
+    let output = [];

    if (category) {
      output.push(category);
    }

-    output.push(collectionNode);
-
-    path.forEach((node: NavigationNode) => {
+    if (collection) {
      output.push({
-        type: "route",
-        title: node.title,
-        to: node.url,
+        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, collectionNode]);
+  }, [path, category, collection]);

  if (!collections.isLoaded) {
    return null;
@@ -105,10 +113,10 @@ const DocumentBreadcrumb = ({ document, children, onlyText }: Props) => {
    return (
      <>
        {collection?.name}
-        {path.map((node: NavigationNode) => (
-          <React.Fragment key={node.id}>
+        {path.map((n) => (
+          <React.Fragment key={n.id}>
            <SmallSlash />
-            {node.title}
+            {n.title}
          </React.Fragment>
        ))}
      </>
@@ -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}>
-                  <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);
@@ -1,3 +1,4 @@
+// @flow
 import { observer } from "mobx-react";
 import { CloseIcon } from "outline-icons";
 import * as React from "react";
@@ -5,34 +6,30 @@ 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";
+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[] = [];
+const EMPTY_ARRAY = [];

 function DocumentHistory() {
  const { events, documents } = useStores();
  const { t } = useTranslation();
-  const match = useRouteMatch<{ documentSlug: string }>();
+  const match = useRouteMatch();
  const history = useHistory();
-  const document = documents.getByUrl(match.params.documentSlug);

+  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();
-    }
+    history.push(documentUrl(document));
  };

  const items = React.useMemo(() => {
@@ -42,20 +39,17 @@ function DocumentHistory() {
      eventsInDocument[0].createdAt !== document.updatedAt
    ) {
      eventsInDocument.unshift(
-        new Event(
-          {
-            name: "documents.latest_version",
-            documentId: document.id,
-            createdAt: document.updatedAt,
-            actor: document.updatedBy,
-          },
-          events
-        )
+        new Event({
+          name: "documents.latest_version",
+          documentId: document.id,
+          createdAt: document.updatedAt,
+          actor: document.updatedBy,
+        })
      );
    }

    return eventsInDocument;
-  }, [eventsInDocument, events, document]);
+  }, [eventsInDocument, document]);

  return (
    <Sidebar>
@@ -74,9 +68,7 @@ function DocumentHistory() {
            <PaginatedEventList
              fetch={events.fetchPage}
              events={items}
-              options={{
-                documentId: document.id,
-              }}
+              options={{ documentId: document.id }}
              document={document}
              empty={<Empty>{t("Oh weird, there's nothing here")}</Empty>}
            />
@@ -1,20 +1,22 @@
+// @flow
 import ArrowKeyNavigation from "boundless-arrow-key-navigation";
 import * as React from "react";
-import Document from "~/models/Document";
-import DocumentListItem from "~/components/DocumentListItem";
+import Document from "models/Document";
+import DocumentListItem from "components/DocumentListItem";

-type Props = {
-  documents: Document[];
-  limit?: number;
-  showCollection?: boolean;
-  showPublished?: boolean;
-  showPin?: boolean;
-  showDraft?: boolean;
-  showTemplate?: boolean;
-};
+type Props = {|
+  documents: Document[],
+  limit?: number,
+  showCollection?: boolean,
+  showPublished?: boolean,
+  showPin?: boolean,
+  showDraft?: boolean,
+  showTemplate?: boolean,
+|};

 export default function DocumentList({ limit, documents, ...rest }: Props) {
  const items = limit ? documents.splice(0, limit) : documents;
+
  return (
    <ArrowKeyNavigation
      mode={ArrowKeyNavigation.mode.VERTICAL}
@@ -1,3 +1,4 @@
+// @flow
 import { observer } from "mobx-react";
 import { PlusIcon } from "outline-icons";
 import * as React from "react";
@@ -5,34 +6,34 @@ import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import styled, { css } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import Document from "~/models/Document";
-import Badge from "~/components/Badge";
-import Button from "~/components/Button";
-import DocumentMeta from "~/components/DocumentMeta";
-import EventBoundary from "~/components/EventBoundary";
-import Flex from "~/components/Flex";
-import Highlight from "~/components/Highlight";
-import StarButton, { AnimatedStar } from "~/components/Star";
-import Tooltip from "~/components/Tooltip";
-import useBoolean from "~/hooks/useBoolean";
-import useCurrentTeam from "~/hooks/useCurrentTeam";
-import useCurrentUser from "~/hooks/useCurrentUser";
-import useStores from "~/hooks/useStores";
-import DocumentMenu from "~/menus/DocumentMenu";
-import { hover } from "~/styles";
-import { newDocumentPath } from "~/utils/routeHelpers";
+import Document from "models/Document";
+import Badge from "components/Badge";
+import Button from "components/Button";
+import DocumentMeta from "components/DocumentMeta";
+import EventBoundary from "components/EventBoundary";
+import Flex from "components/Flex";
+import Highlight from "components/Highlight";
+import StarButton, { AnimatedStar } from "components/Star";
+import Tooltip from "components/Tooltip";
+import useBoolean from "hooks/useBoolean";
+import useCurrentTeam from "hooks/useCurrentTeam";
+import useCurrentUser from "hooks/useCurrentUser";
+import useStores from "hooks/useStores";
+import DocumentMenu from "menus/DocumentMenu";
+import { newDocumentUrl } from "utils/routeHelpers";
+
+type Props = {|
+  document: Document,
+  highlight?: ?string,
+  context?: ?string,
+  showNestedDocuments?: boolean,
+  showCollection?: boolean,
+  showPublished?: boolean,
+  showPin?: boolean,
+  showDraft?: boolean,
+  showTemplate?: boolean,
+|};

-type Props = {
-  document: Document;
-  highlight?: string | undefined;
-  context?: string | undefined;
-  showParentDocuments?: boolean;
-  showCollection?: boolean;
-  showPublished?: boolean;
-  showPin?: boolean;
-  showDraft?: boolean;
-  showTemplate?: boolean;
-};
 const SEARCH_RESULT_REGEX = /<b\b[^>]*>(.*?)<\/b>/gi;

 function replaceResultMarks(tag: string) {
@@ -41,19 +42,15 @@ function replaceResultMarks(tag: string) {
  return tag.replace(/<b\b[^>]*>(.*?)<\/b>/gi, "$1");
 }

-function DocumentListItem(
-  props: Props,
-  ref: React.RefObject<HTMLAnchorElement>
-) {
+function DocumentListItem(props: Props, ref) {
  const { t } = useTranslation();
  const { policies } = useStores();
  const currentUser = useCurrentUser();
  const currentTeam = useCurrentTeam();
  const [menuOpen, handleMenuOpen, handleMenuClose] = useBoolean();
-
  const {
    document,
-    showParentDocuments,
+    showNestedDocuments,
    showCollection,
    showPublished,
    showPin,
@@ -62,13 +59,15 @@ function DocumentListItem(
    highlight,
    context,
  } = props;
+
  const queryIsInTitle =
    !!highlight &&
    !!document.title.toLowerCase().includes(highlight.toLowerCase());
-  const canStar =
-    !document.isDraft && !document.isArchived && !document.isTemplate;
+  const canStar = policies.abilities(document.id).star;
  const can = policies.abilities(currentTeam.id);
-  const canCollection = policies.abilities(document.collectionId);
+  const collectionPolicy = document.collectionId
+    ? policies.abilities(document.collectionId)
+    : {};

  return (
    <DocumentLink
@@ -78,9 +77,7 @@ function DocumentListItem(
      $menuOpen={menuOpen}
      to={{
        pathname: document.url,
-        state: {
-          title: document.titleWithDefault,
-        },
+        state: { title: document.titleWithDefault },
      }}
    >
      <Content>
@@ -90,14 +87,9 @@ function DocumentListItem(
            highlight={highlight}
            dir={document.dir}
          />
-          {document.isBadgedNew && document.createdBy.id !== currentUser.id && (
+          {document.isNew && document.createdBy.id !== currentUser.id && (
            <Badge yellow>{t("New")}</Badge>
          )}
-          {canStar && (
-            <StarPositioner>
-              <StarButton document={document} />
-            </StarPositioner>
-          )}
          {document.isDraft && showDraft && (
            <Tooltip
              tooltip={t("Only visible to you")}
@@ -110,6 +102,11 @@ function DocumentListItem(
          {document.isTemplate && showTemplate && (
            <Badge primary>{t("Template")}</Badge>
          )}
+          {canStar && (
+            <StarPositioner>
+              <StarButton document={document} />
+            </StarPositioner>
+          )}
        </Heading>

        {!queryIsInTitle && (
@@ -123,7 +120,7 @@ function DocumentListItem(
          document={document}
          showCollection={showCollection}
          showPublished={showPublished}
-          showParentDocuments={showParentDocuments}
+          showNestedDocuments={showNestedDocuments}
          showLastViewed
        />
      </Content>
@@ -132,11 +129,11 @@ function DocumentListItem(
          !document.isArchived &&
          !document.isDeleted &&
          can.createDocument &&
-          canCollection.update && (
+          collectionPolicy.update && (
            <>
              <Button
                as={Link}
-                to={newDocumentPath(document.collectionId, {
+                to={newDocumentUrl(document.collectionId, {
                  templateId: document.id,
                })}
                icon={<PlusIcon />}
@@ -177,10 +174,7 @@ const Actions = styled(EventBoundary)`
  `};
 `;

-const DocumentLink = styled(Link)<{
-  $isStarred?: boolean;
-  $menuOpen?: boolean;
-}>`
+const DocumentLink = styled(Link)`
  display: flex;
  align-items: center;
  margin: 10px -8px;
@@ -201,7 +195,7 @@ const DocumentLink = styled(Link)<{
    opacity: ${(props) => (props.$isStarred ? "1 !important" : 0)};
  }

-  &:${hover},
+  &:hover,
  &:active,
  &:focus,
  &:focus-within {
@@ -235,7 +229,7 @@ const DocumentLink = styled(Link)<{
    `}
 `;

-const Heading = styled.h3<{ rtl?: boolean }>`
+const Heading = styled.h3`
  display: flex;
  justify-content: ${(props) => (props.rtl ? "flex-end" : "flex-start")};
  align-items: center;
@@ -1,17 +1,18 @@
+// @flow
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
-import Document from "~/models/Document";
-import DocumentBreadcrumb from "~/components/DocumentBreadcrumb";
-import DocumentTasks from "~/components/DocumentTasks";
-import Flex from "~/components/Flex";
-import Time from "~/components/Time";
-import useCurrentUser from "~/hooks/useCurrentUser";
-import useStores from "~/hooks/useStores";
+import Document from "models/Document";
+import DocumentBreadcrumb from "components/DocumentBreadcrumb";
+import DocumentTasks from "components/DocumentTasks";
+import Flex from "components/Flex";
+import Time from "components/Time";
+import useCurrentUser from "hooks/useCurrentUser";
+import useStores from "hooks/useStores";

-const Container = styled(Flex)<{ rtl?: boolean }>`
+const Container = styled(Flex)`
  justify-content: ${(props) => (props.rtl ? "flex-end" : "flex-start")};
  color: ${(props) => props.theme.textTertiary};
  font-size: 13px;
@@ -25,25 +26,26 @@ const Viewed = styled.span`
  overflow: hidden;
 `;

-const Modified = styled.span<{ highlight?: boolean }>`
+const Modified = styled.span`
+  color: ${(props) => props.theme.textTertiary};
  font-weight: ${(props) => (props.highlight ? "600" : "400")};
 `;

-type Props = {
-  showCollection?: boolean;
-  showPublished?: boolean;
-  showLastViewed?: boolean;
-  showParentDocuments?: boolean;
-  document: Document;
-  children?: React.ReactNode;
-  to?: string;
-};
+type Props = {|
+  showCollection?: boolean,
+  showPublished?: boolean,
+  showLastViewed?: boolean,
+  showNestedDocuments?: boolean,
+  document: Document,
+  children: React.Node,
+  to?: string,
+|};

 function DocumentMeta({
  showPublished,
  showCollection,
  showLastViewed,
-  showParentDocuments,
+  showNestedDocuments,
  document,
  children,
  to,
@@ -52,6 +54,7 @@ function DocumentMeta({
  const { t } = useTranslation();
  const { collections } = useStores();
  const user = useCurrentUser();
+
  const {
    modifiedSinceViewed,
    updatedAt,
@@ -72,7 +75,9 @@ function DocumentMeta({
    return null;
  }

-  const collection = collections.get(document.collectionId);
+  const collection = document.collectionId
+    ? collections.get(document.collectionId)
+    : undefined;
  const lastUpdatedByCurrentUser = user.id === updatedBy.id;
  let content;

@@ -123,11 +128,7 @@ function DocumentMeta({
    if (isDraft || !showLastViewed) {
      return null;
    }
-
    if (!lastViewedAt) {
-      if (lastUpdatedByCurrentUser) {
-        return null;
-      }
      return (
        <Viewed>
          •&nbsp;<Modified highlight>{t("Never viewed")}</Modified>
@@ -154,12 +155,10 @@ function DocumentMeta({
          </strong>
        </span>
      )}
-      {showParentDocuments && nestedDocumentsCount > 0 && (
+      {showNestedDocuments && nestedDocumentsCount > 0 && (
        <span>
          &nbsp;• {nestedDocumentsCount}{" "}
-          {t("nested document", {
-            count: nestedDocumentsCount,
-          })}
+          {t("nested document", { count: nestedDocumentsCount })}
        </span>
      )}
      &nbsp;{timeSinceNow()}
@@ -1,20 +1,21 @@
+// @flow
 import { useObserver } 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 Document from "~/models/Document";
-import DocumentMeta from "~/components/DocumentMeta";
-import DocumentViews from "~/components/DocumentViews";
-import Popover from "~/components/Popover";
-import useStores from "~/hooks/useStores";
+import Document from "models/Document";
+import DocumentMeta from "components/DocumentMeta";
+import DocumentViews from "components/DocumentViews";
+import Popover from "components/Popover";
+import useStores from "../hooks/useStores";

-type Props = {
-  document: Document;
-  isDraft: boolean;
-  to?: string;
-  rtl?: boolean;
-};
+type Props = {|
+  document: Document,
+  isDraft: boolean,
+  to?: string,
+  rtl?: boolean,
+|};

 function DocumentMetaWithViews({ to, isDraft, document, ...rest }: Props) {
  const { views } = useStores();
@@ -25,9 +26,7 @@ function DocumentMetaWithViews({ to, isDraft, document, ...rest }: Props) {

  React.useEffect(() => {
    if (!document.isDeleted) {
-      views.fetchPage({
-        documentId: document.id,
-      });
+      views.fetchPage({ documentId: document.id });
    }
  }, [views, document.id, document.isDeleted]);

@@ -63,7 +62,7 @@ function DocumentMetaWithViews({ to, isDraft, document, ...rest }: Props) {
  );
 }

-const Meta = styled(DocumentMeta)<{ rtl?: boolean }>`
+const Meta = styled(DocumentMeta)`
  justify-content: ${(props) => (props.rtl ? "flex-end" : "flex-start")};
  margin: -12px 0 2em 0;
  font-size: 14px;
@@ -1,27 +1,22 @@
+// @flow
 import { DoneIcon } from "outline-icons";
 import * as React from "react";
-import { useTranslation, TFunction } from "react-i18next";
+import { useTranslation } from "react-i18next";
 import styled, { useTheme } from "styled-components";
-import Document from "~/models/Document";
-import CircularProgressBar from "~/components/CircularProgressBar";
-import usePrevious from "~/hooks/usePrevious";
-import { bounceIn } from "~/styles/animations";
+import CircularProgressBar from "components/CircularProgressBar";
+import usePrevious from "../hooks/usePrevious";
+import Document from "../models/Document";
+import { bounceIn } from "styles/animations";

-type Props = {
-  document: Document;
-};
+type Props = {|
+  document: Document,
+|};

-function getMessage(t: TFunction, total: number, completed: number): string {
+function getMessage(t, total, completed) {
  if (completed === 0) {
-    return t(`{{ total }} task`, {
-      total,
-      count: total,
-    });
+    return t(`{{ total }} task`, { total, count: total });
  } else if (completed === total) {
-    return t(`{{ completed }} task done`, {
-      completed,
-      count: completed,
-    });
+    return t(`{{ completed }} task done`, { completed, count: completed });
  } else {
    return t(`{{ completed }} of {{ total }} tasks`, {
      total,
@@ -38,6 +33,7 @@ function DocumentTasks({ document }: Props) {
  const done = completed === total;
  const previousDone = usePrevious(done);
  const message = getMessage(t, total, completed);
+
  return (
    <>
      {completed === total ? (
@@ -54,7 +50,7 @@ function DocumentTasks({ document }: Props) {
  );
 }

-const Done = styled(DoneIcon)<{ $animated: boolean }>`
+const Done = styled(DoneIcon)`
  margin: -1px;
  animation: ${(props) => (props.$animated ? bounceIn : "none")} 600ms;
  transform-origin: center center;
@@ -1,28 +1,31 @@
+// @flow
 import { formatDistanceToNow } from "date-fns";
 import { sortBy } from "lodash";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import Document from "~/models/Document";
-import Avatar from "~/components/Avatar";
-import ListItem from "~/components/List/Item";
-import PaginatedList from "~/components/PaginatedList";
-import useStores from "~/hooks/useStores";
+import Document from "models/Document";
+import Avatar from "components/Avatar";
+import ListItem from "components/List/Item";
+import PaginatedList from "components/PaginatedList";
+import useStores from "hooks/useStores";

-type Props = {
-  document: Document;
-  isOpen?: boolean;
-};
+type Props = {|
+  document: Document,
+  isOpen?: boolean,
+|};

 function DocumentViews({ document, isOpen }: Props) {
  const { t } = useTranslation();
  const { views, presence } = useStores();
-  const documentPresence = presence.get(document.id);
-  const documentPresenceArray = documentPresence
+
+  let documentPresence = presence.get(document.id);
+  documentPresence = documentPresence
    ? Array.from(documentPresence.values())
    : [];
-  const presentIds = documentPresenceArray.map((p) => p.userId);
-  const editingIds = documentPresenceArray
+
+  const presentIds = documentPresence.map((p) => p.userId);
+  const editingIds = documentPresence
    .filter((p) => p.isEditing)
    .map((p) => p.userId);

@@ -32,6 +35,7 @@ function DocumentViews({ document, isOpen }: Props) {
    documentViews,
    (view) => !presentIds.includes(view.user.id)
  );
+
  const users = React.useMemo(() => sortedViews.map((v) => v.user), [
    sortedViews,
  ]);
@@ -45,6 +49,7 @@ function DocumentViews({ document, isOpen }: Props) {
            const view = documentViews.find((v) => v.user.id === item.id);
            const isPresent = presentIds.includes(item.id);
            const isEditing = editingIds.includes(item.id);
+
            const subtitle = isPresent
              ? isEditing
                ? t("Currently editing")
@@ -54,6 +59,7 @@ function DocumentViews({ document, isOpen }: Props) {
                    view ? Date.parse(view.lastViewedAt) : new Date()
                  ),
                });
+
            return (
              <ListItem
                key={item.id}
@@ -61,7 +67,6 @@ function DocumentViews({ document, isOpen }: Props) {
                subtitle={subtitle}
                image={<Avatar key={item.id} src={item.avatarUrl} size={32} />}
                border={false}
-                compact
                small
              />
            );
@@ -0,0 +1,312 @@
+// @flow
+import { lighten } from "polished";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { withRouter, type RouterHistory } from "react-router-dom";
+import { Extension } from "rich-markdown-editor";
+import styled, { withTheme } from "styled-components";
+import embeds from "shared/embeds";
+import { light } from "shared/theme";
+import UiStore from "stores/UiStore";
+import ErrorBoundary from "components/ErrorBoundary";
+import Tooltip from "components/Tooltip";
+import useMediaQuery from "hooks/useMediaQuery";
+import useToasts from "hooks/useToasts";
+import { type Theme } from "types";
+import { isModKey } from "utils/keyboard";
+import { uploadFile } from "utils/uploadFile";
+import { isInternalUrl } from "utils/urls";
+
+const RichMarkdownEditor = React.lazy(() =>
+  import(/* webpackChunkName: "rich-markdown-editor" */ "rich-markdown-editor")
+);
+
+const EMPTY_ARRAY = [];
+
+export type Props = {|
+  id?: string,
+  value?: string,
+  defaultValue?: string,
+  readOnly?: boolean,
+  grow?: boolean,
+  disableEmbeds?: boolean,
+  ui?: UiStore,
+  style?: Object,
+  extensions?: Extension[],
+  shareId?: ?string,
+  autoFocus?: boolean,
+  template?: boolean,
+  placeholder?: string,
+  maxLength?: number,
+  scrollTo?: string,
+  theme?: Theme,
+  handleDOMEvents?: Object,
+  readOnlyWriteCheckboxes?: boolean,
+  onBlur?: (event: SyntheticEvent<>) => any,
+  onFocus?: (event: SyntheticEvent<>) => any,
+  onPublish?: (event: SyntheticEvent<>) => any,
+  onSave?: ({ done?: boolean, autosave?: boolean, publish?: boolean }) => any,
+  onCancel?: () => any,
+  onDoubleClick?: () => any,
+  onChange?: (getValue: () => string) => any,
+  onSearchLink?: (title: string) => any,
+  onHoverLink?: (event: MouseEvent) => any,
+  onCreateLink?: (title: string) => Promise<string>,
+  onImageUploadStart?: () => any,
+  onImageUploadStop?: () => any,
+|};
+
+type PropsWithRef = Props & {
+  forwardedRef: React.Ref<any>,
+  history: RouterHistory,
+};
+
+function Editor(props: PropsWithRef) {
+  const { id, shareId, history } = props;
+  const { t } = useTranslation();
+  const { showToast } = useToasts();
+  const isPrinting = useMediaQuery("print");
+
+  const onUploadImage = React.useCallback(
+    async (file: File) => {
+      const result = await uploadFile(file, { documentId: id });
+      return result.url;
+    },
+    [id]
+  );
+
+  const onClickLink = React.useCallback(
+    (href: string, event: MouseEvent) => {
+      // on page hash
+      if (href[0] === "#") {
+        window.location.href = href;
+        return;
+      }
+
+      if (isInternalUrl(href) && !isModKey(event) && !event.shiftKey) {
+        // relative
+        let navigateTo = href;
+
+        // probably absolute
+        if (href[0] !== "/") {
+          try {
+            const url = new URL(href);
+            navigateTo = url.pathname + url.hash;
+          } catch (err) {
+            navigateTo = href;
+          }
+        }
+
+        if (shareId) {
+          navigateTo = `/share/${shareId}${navigateTo}`;
+        }
+
+        history.push(navigateTo);
+      } else if (href) {
+        window.open(href, "_blank");
+      }
+    },
+    [history, shareId]
+  );
+
+  const onShowToast = React.useCallback(
+    (message: string) => {
+      showToast(message);
+    },
+    [showToast]
+  );
+
+  const dictionary = React.useMemo(() => {
+    return {
+      addColumnAfter: t("Insert column after"),
+      addColumnBefore: t("Insert column before"),
+      addRowAfter: t("Insert row after"),
+      addRowBefore: t("Insert row before"),
+      alignCenter: t("Align center"),
+      alignLeft: t("Align left"),
+      alignRight: t("Align right"),
+      bulletList: t("Bulleted list"),
+      checkboxList: t("Todo list"),
+      codeBlock: t("Code block"),
+      codeCopied: t("Copied to clipboard"),
+      codeInline: t("Code"),
+      createLink: t("Create link"),
+      createLinkError: t("Sorry, an error occurred creating the link"),
+      createNewDoc: t("Create a new doc"),
+      deleteColumn: t("Delete column"),
+      deleteRow: t("Delete row"),
+      deleteTable: t("Delete table"),
+      deleteImage: t("Delete image"),
+      downloadImage: t("Download image"),
+      alignImageLeft: t("Float left"),
+      alignImageRight: t("Float right"),
+      alignImageDefault: t("Center large"),
+      em: t("Italic"),
+      embedInvalidLink: t("Sorry, that link won’t work for this embed type"),
+      findOrCreateDoc: `${t("Find or create a doc")}…`,
+      h1: t("Big heading"),
+      h2: t("Medium heading"),
+      h3: t("Small heading"),
+      heading: t("Heading"),
+      hr: t("Divider"),
+      image: t("Image"),
+      imageUploadError: t("Sorry, an error occurred uploading the image"),
+      imageCaptionPlaceholder: t("Write a caption"),
+      info: t("Info"),
+      infoNotice: t("Info notice"),
+      link: t("Link"),
+      linkCopied: t("Link copied to clipboard"),
+      mark: t("Highlight"),
+      newLineEmpty: `${t("Type '/' to insert")}…`,
+      newLineWithSlash: `${t("Keep typing to filter")}…`,
+      noResults: t("No results"),
+      openLink: t("Open link"),
+      orderedList: t("Ordered list"),
+      pageBreak: t("Page break"),
+      pasteLink: `${t("Paste a link")}…`,
+      pasteLinkWithTitle: (service: string) =>
+        t("Paste a {{service}} link…", { service }),
+      placeholder: t("Placeholder"),
+      quote: t("Quote"),
+      removeLink: t("Remove link"),
+      searchOrPasteLink: `${t("Search or paste a link")}…`,
+      strikethrough: t("Strikethrough"),
+      strong: t("Bold"),
+      subheading: t("Subheading"),
+      table: t("Table"),
+      tip: t("Tip"),
+      tipNotice: t("Tip notice"),
+      warning: t("Warning"),
+      warningNotice: t("Warning notice"),
+    };
+  }, [t]);
+
+  return (
+    <ErrorBoundary reloadOnChunkMissing>
+      <StyledEditor
+        ref={props.forwardedRef}
+        uploadImage={onUploadImage}
+        onClickLink={onClickLink}
+        onShowToast={onShowToast}
+        embeds={props.disableEmbeds ? EMPTY_ARRAY : embeds}
+        tooltip={EditorTooltip}
+        dictionary={dictionary}
+        {...props}
+        theme={isPrinting ? light : props.theme}
+      />
+    </ErrorBoundary>
+  );
+}
+
+const StyledEditor = styled(RichMarkdownEditor)`
+  flex-grow: ${(props) => (props.grow ? 1 : 0)};
+  justify-content: start;
+
+  > div {
+    background: transparent;
+  }
+
+  & * {
+    box-sizing: content-box;
+  }
+
+  .notice-block.tip,
+  .notice-block.warning {
+    font-weight: 500;
+  }
+
+  .heading-anchor {
+    box-sizing: border-box;
+  }
+
+  .heading-name {
+    pointer-events: none;
+    display: block;
+    position: relative;
+    top: -60px;
+    visibility: hidden;
+  }
+
+  .heading-name:first-child {
+    & + h1,
+    & + h2,
+    & + h3,
+    & + h4 {
+      margin-top: 0;
+    }
+  }
+
+  p {
+    a {
+      color: ${(props) => props.theme.text};
+      border-bottom: 1px solid ${(props) => lighten(0.5, props.theme.text)};
+      text-decoration: none !important;
+      font-weight: 500;
+
+      &:hover {
+        border-bottom: 1px solid ${(props) => props.theme.text};
+        text-decoration: none;
+      }
+    }
+  }
+
+  .ProseMirror {
+    .ProseMirror-yjs-cursor {
+      position: relative;
+      margin-left: -1px;
+      margin-right: -1px;
+      border-left: 1px solid black;
+      border-right: 1px solid black;
+      height: 1em;
+      word-break: normal;
+      &:after {
+        content: "";
+        display: block;
+        position: absolute;
+        left: -8px;
+        right: -8px;
+        top: 0;
+        bottom: 0;
+      }
+      > div {
+        opacity: 0;
+        position: absolute;
+        top: -1.8em;
+        font-size: 13px;
+        background-color: rgb(250, 129, 0);
+        font-style: normal;
+        line-height: normal;
+        user-select: none;
+        white-space: nowrap;
+        color: white;
+        padding: 2px 6px;
+        font-weight: 500;
+        border-radius: 4px;
+        pointer-events: none;
+        left: -1px;
+      }
+      &:hover {
+        > div {
+          opacity: 1;
+          transition: opacity 100ms ease-in-out;
+        }
+      }
+    }
+  }
+`;
+
+const EditorTooltip = ({ children, ...props }) => (
+  <Tooltip offset="0, 16" delay={150} {...props}>
+    <Span>{children}</Span>
+  </Tooltip>
+);
+
+const Span = styled.span`
+  outline: none;
+`;
+
+const EditorWithRouterAndTheme = withRouter(withTheme(Editor));
+
+export default React.forwardRef<Props, typeof Editor>((props, ref) => (
+  <EditorWithRouterAndTheme {...props} forwardedRef={ref} />
+));
@@ -1,106 +0,0 @@
-import * as React from "react";
-import { Optional } from "utility-types";
-import embeds from "@shared/editor/embeds";
-import { isInternalUrl } from "@shared/utils/urls";
-import ErrorBoundary from "~/components/ErrorBoundary";
-import { Props as EditorProps } from "~/editor";
-import useDictionary from "~/hooks/useDictionary";
-import useToasts from "~/hooks/useToasts";
-import history from "~/utils/history";
-import { isModKey } from "~/utils/keyboard";
-import { uploadFile } from "~/utils/uploadFile";
-import { isHash } from "~/utils/urls";
-
-const SharedEditor = React.lazy(
-  () =>
-    import(
-      /* webpackChunkName: "shared-editor" */
-      "~/editor"
-    )
-);
-
-export type Props = Optional<
-  EditorProps,
-  "placeholder" | "defaultValue" | "onClickLink" | "embeds" | "dictionary"
-> & {
-  shareId?: string | undefined;
-  embedsDisabled?: boolean;
-  grow?: boolean;
-  onSynced?: () => Promise<void>;
-  onPublish?: (event: React.MouseEvent) => any;
-};
-
-function Editor(props: Props, ref: React.Ref<any>) {
-  const { id, shareId } = props;
-  const { showToast } = useToasts();
-  const dictionary = useDictionary();
-
-  const onUploadImage = React.useCallback(
-    async (file: File) => {
-      const result = await uploadFile(file, {
-        documentId: id,
-      });
-      return result.url;
-    },
-    [id]
-  );
-
-  const onClickLink = React.useCallback(
-    (href: string, event: MouseEvent) => {
-      // on page hash
-      if (isHash(href)) {
-        window.location.href = href;
-        return;
-      }
-
-      if (isInternalUrl(href) && !isModKey(event) && !event.shiftKey) {
-        // relative
-        let navigateTo = href;
-
-        // probably absolute
-        if (href[0] !== "/") {
-          try {
-            const url = new URL(href);
-            navigateTo = url.pathname + url.hash;
-          } catch (err) {
-            navigateTo = href;
-          }
-        }
-
-        if (shareId) {
-          navigateTo = `/share/${shareId}${navigateTo}`;
-        }
-
-        history.push(navigateTo);
-      } else if (href) {
-        window.open(href, "_blank");
-      }
-    },
-    [shareId]
-  );
-
-  const onShowToast = React.useCallback(
-    (message: string) => {
-      showToast(message);
-    },
-    [showToast]
-  );
-
-  return (
-    <ErrorBoundary reloadOnChunkMissing>
-      <SharedEditor
-        ref={ref}
-        uploadImage={onUploadImage}
-        onShowToast={onShowToast}
-        embeds={embeds}
-        dictionary={dictionary}
-        {...props}
-        onClickLink={onClickLink}
-        placeholder={props.placeholder || ""}
-        defaultValue={props.defaultValue || ""}
-      />
-    </ErrorBoundary>
-  );
-}
-
-export default React.forwardRef(Editor);
@@ -1,3 +1,4 @@
+// @flow
 import styled from "styled-components";

 const Empty = styled.p`
@@ -1,30 +1,29 @@
+// @flow
 import * as Sentry from "@sentry/react";
 import { observable } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
-import { withTranslation, Trans, WithTranslation } from "react-i18next";
+import { withTranslation, type TFunction, Trans } from "react-i18next";
 import styled from "styled-components";
-import { githubIssuesUrl } from "@shared/utils/urlHelpers";
-import Button from "~/components/Button";
-import CenteredContent from "~/components/CenteredContent";
-import PageTitle from "~/components/PageTitle";
-import Text from "~/components/Text";
-import env from "~/env";
+import Button from "components/Button";
+import CenteredContent from "components/CenteredContent";
+import HelpText from "components/HelpText";
+import PageTitle from "components/PageTitle";
+import { githubIssuesUrl } from "../../shared/utils/routeHelpers";
+import env from "env";

-type Props = WithTranslation & {
-  children: React.ReactNode;
-  reloadOnChunkMissing?: boolean;
-};
+type Props = {|
+  children: React.Node,
+  reloadOnChunkMissing?: boolean,
+  t: TFunction,
+|};

@observer
 class ErrorBoundary extends React.Component<Props> {
-  @observable
-  error: Error | null | undefined;
+  @observable error: ?Error;
+  @observable showDetails: boolean = false;

-  @observable
-  showDetails = false;
-
-  componentDidCatch(error: Error) {
+  componentDidCatch(error: Error, info: Object) {
    this.error = error;
    console.error(error);

@@ -36,7 +35,7 @@ class ErrorBoundary extends React.Component<Props> {
      // If the editor bundle fails to load then reload the entire window. This
      // can happen if a deploy happens between the user loading the initial JS
      // bundle and the async-loaded editor JS bundle as the hash will change.
-      window.location.reload();
+      window.location.reload(true);
      return;
    }

@@ -46,7 +45,7 @@ class ErrorBoundary extends React.Component<Props> {
  }

  handleReload = () => {
-    window.location.reload();
+    window.location.reload(true);
  };

  handleShowDetails = () => {
@@ -72,15 +71,17 @@ class ErrorBoundary extends React.Component<Props> {
            <h1>
              <Trans>Loading Failed</Trans>
            </h1>
-            <Text type="secondary">
+            <HelpText>
              <Trans>
                Sorry, part of the application failed to load. This may be
                because it was updated since you opened the tab or because of a
                failed network request. Please try reloading.
              </Trans>
-            </Text>
+            </HelpText>
            <p>
-              <Button onClick={this.handleReload}>{t("Reload")}</Button>
+              <Button onClick={this.handleReload}>
+                <Trans>Reload</Trans>
+              </Button>
            </p>
          </CenteredContent>
        );
@@ -92,7 +93,7 @@ class ErrorBoundary extends React.Component<Props> {
          <h1>
            <Trans>Something Unexpected Happened</Trans>
          </h1>
-          <Text type="secondary">
+          <HelpText>
            <Trans
              defaults="Sorry, an unrecoverable error occurred{{notified}}. Please try reloading the page, it may have been a temporary glitch."
              values={{
@@ -101,10 +102,12 @@ class ErrorBoundary extends React.Component<Props> {
                  : undefined,
              }}
            />
-          </Text>
+          </HelpText>
          {this.showDetails && <Pre>{error.toString()}</Pre>}
          <p>
-            <Button onClick={this.handleReload}>{t("Reload")}</Button>{" "}
+            <Button onClick={this.handleReload}>
+              <Trans>Reload</Trans>
+            </Button>{" "}
            {this.showDetails ? (
              <Button onClick={this.handleReportBug} neutral>
                <Trans>Report a Bug</Trans>…
@@ -118,7 +121,6 @@ class ErrorBoundary extends React.Component<Props> {
        </CenteredContent>
      );
    }
-
    return this.props.children;
  }
 }
@@ -131,4 +133,4 @@ const Pre = styled.pre`
  white-space: pre-wrap;
 `;

-export default withTranslation()(ErrorBoundary);
+export default withTranslation()<ErrorBoundary>(ErrorBoundary);
@@ -1,12 +1,14 @@
+// @flow
+
 import * as React from "react";

 type Props = {
-  children: React.ReactNode;
-  className?: string;
+  children: React.Node,
+  className?: string,
 };

 export default function EventBoundary({ children, className }: Props) {
-  const handleClick = React.useCallback((event: React.SyntheticEvent) => {
+  const handleClick = React.useCallback((event: SyntheticEvent<>) => {
    event.preventDefault();
    event.stopPropagation();
  }, []);
@@ -1,3 +1,4 @@
+// @flow
 import {
  TrashIcon,
  ArchiveIcon,
@@ -8,31 +9,24 @@ import {
 } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import { useLocation } from "react-router-dom";
 import styled from "styled-components";
-import Document from "~/models/Document";
-import Event from "~/models/Event";
-import Avatar from "~/components/Avatar";
-import Item, { Actions } from "~/components/List/Item";
-import Time from "~/components/Time";
-import useStores from "~/hooks/useStores";
-import RevisionMenu from "~/menus/RevisionMenu";
-import { documentHistoryUrl } from "~/utils/routeHelpers";
+import Document from "models/Document";
+import Event from "models/Event";
+import Avatar from "components/Avatar";
+import Item, { Actions } from "components/List/Item";
+import Time from "components/Time";
+import RevisionMenu from "menus/RevisionMenu";
+import { documentHistoryUrl } from "utils/routeHelpers";

-type Props = {
-  document: Document;
-  event: Event;
-  latest?: boolean;
-};
+type Props = {|
+  document: Document,
+  event: Event,
+  latest?: boolean,
+|};

 const EventListItem = ({ event, latest, document }: Props) => {
  const { t } = useTranslation();
-  const { policies } = useStores();
-  const location = useLocation();
-  const can = policies.abilities(document.id);
-  const opts = {
-    userName: event.actor.name,
-  };
+  const opts = { userName: event.actor.name };
  const isRevision = event.name === "revisions.create";
  let meta, icon, to;

@@ -51,35 +45,28 @@ const EventListItem = ({ event, latest, document }: Props) => {
        break;
      }
    }
-
    case "documents.archive":
      icon = <ArchiveIcon color="currentColor" size={16} />;
      meta = t("{{userName}} archived", opts);
      break;
-
    case "documents.unarchive":
      meta = t("{{userName}} restored", opts);
      break;
-
    case "documents.delete":
      icon = <TrashIcon color="currentColor" size={16} />;
      meta = t("{{userName}} deleted", opts);
      break;
-
    case "documents.restore":
      meta = t("{{userName}} moved from trash", opts);
      break;
-
    case "documents.publish":
      icon = <PublishIcon color="currentColor" size={16} />;
      meta = t("{{userName}} published", opts);
      break;
-
    case "documents.move":
      icon = <MoveIcon color="currentColor" size={16} />;
      meta = t("{{userName}} moved", opts);
      break;
-
    default:
      console.warn("Unhandled event: ", event.name);
  }
@@ -88,18 +75,16 @@ const EventListItem = ({ event, latest, document }: Props) => {
    return null;
  }

-  const isActive = location.pathname === to;
-
  return (
    <ListItem
      small
      exact
-      to={document.isDeleted ? undefined : to}
+      to={to}
      title={
        <Time
          dateTime={event.createdAt}
-          tooltipDelay={500}
-          format="MMM do, h:mm a"
+          tooltipDelay={250}
+          format="MMMM do, h:mm a"
          relative={false}
          addSuffix
        />
@@ -112,7 +97,7 @@ const EventListItem = ({ event, latest, document }: Props) => {
        </Subtitle>
      }
      actions={
-        isRevision && isActive && event.modelId && can.update ? (
+        isRevision ? (
          <RevisionMenu document={document} revisionId={event.modelId} />
        ) : undefined
      }
@@ -152,8 +137,7 @@ const ListItem = styled(Item)`

  &:nth-child(2)::before {
    height: 50%;
-    top: auto;
-    bottom: -4px;
+    top: 50%;
  }

  &:last-child::before {
@@ -165,9 +149,12 @@ const ListItem = styled(Item)`
  }

  ${Actions} {
-    opacity: 0.5;
+    opacity: 0.25;
+    transition: opacity 100ms ease-in-out;
+  }

-    &:hover {
+  &:hover {
+    ${Actions} {
      opacity: 1;
    }
  }
@@ -1,21 +1,22 @@
+// @flow
 import { observer } from "mobx-react";
 import * as React from "react";
 import styled from "styled-components";
-import User from "~/models/User";
-import Avatar from "~/components/Avatar";
-import Flex from "~/components/Flex";
+import User from "models/User";
+import Avatar from "components/Avatar";
+import Flex from "components/Flex";

-type Props = {
-  users: User[];
-  size?: number;
-  overflow?: number;
-  onClick?: React.MouseEventHandler<HTMLDivElement>;
-  renderAvatar?: (user: User) => React.ReactNode;
-};
+type Props = {|
+  users: User[],
+  size?: number,
+  overflow: number,
+  onClick?: (event: SyntheticEvent<>) => mixed,
+  renderAvatar?: (user: User) => React.Node,
+|};

 function Facepile({
  users,
-  overflow = 0,
+  overflow,
  size = 32,
  renderAvatar = DefaultAvatar,
  ...rest
@@ -46,7 +47,7 @@ const AvatarWrapper = styled.div`
  }
 `;

-const More = styled.div<{ size: number }>`
+const More = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
@@ -1,7 +1,8 @@
+// @flow
 import styled from "styled-components";
-import { fadeIn } from "~/styles/animations";
+import { fadeIn } from "styles/animations";

-const Fade = styled.span<{ timing?: number | string }>`
+const Fade = styled.span`
  animation: ${fadeIn} ${(props) => props.timing || "250ms"} ease-in-out;
 `;

@@ -1,47 +1,51 @@
+// @flow
+import { find } from "lodash";
 import * as React from "react";
 import { useMenuState, MenuButton } from "reakit/Menu";
 import styled from "styled-components";
-import Button, { Inner } from "~/components/Button";
-import ContextMenu from "~/components/ContextMenu";
-import MenuItem from "~/components/ContextMenu/MenuItem";
-import Text from "~/components/Text";
+import Button, { Inner } from "components/Button";
+import ContextMenu from "components/ContextMenu";
+import MenuItem from "components/ContextMenu/MenuItem";
+import HelpText from "components/HelpText";

-type TFilterOption = {
-  key: string;
-  label: string;
-  note?: string;
-};
+type TFilterOption = {|
+  key: string,
+  label: string,
+  note?: string,
+|};

-type Props = {
-  options: TFilterOption[];
-  activeKey: string | null | undefined;
-  defaultLabel?: string;
-  selectedPrefix?: string;
-  className?: string;
-  onSelect: (key: string | null | undefined) => void;
-};
+type Props = {|
+  options: TFilterOption[],
+  activeKey: ?string,
+  defaultLabel?: string,
+  selectedPrefix?: string,
+  className?: string,
+  onSelect: (key: ?string) => void,
+|};

 const FilterOptions = ({
  options,
  activeKey = "",
-  defaultLabel = "Filter options",
+  defaultLabel,
  selectedPrefix = "",
  className,
  onSelect,
 }: Props) => {
-  const menu = useMenuState({
-    modal: true,
-  });
-  const selected =
-    options.find((option) => option.key === activeKey) || options[0];
-
+  const menu = useMenuState({ modal: true });
+  const selected = find(options, { key: activeKey }) || options[0];
  const selectedLabel = selected ? `${selectedPrefix} ${selected.label}` : "";

  return (
    <Wrapper>
      <MenuButton {...menu}>
        {(props) => (
-          <StyledButton {...props} className={className} neutral disclosure>
+          <StyledButton
+            {...props}
+            className={className}
+            neutral
+            disclosure
+            small
+          >
            {activeKey ? selectedLabel : defaultLabel}
          </StyledButton>
        )}
@@ -72,7 +76,7 @@ const FilterOptions = ({
  );
 };

-const Note = styled(Text)`
+const Note = styled(HelpText)`
  margin-top: 2px;
  margin-bottom: 0;
  line-height: 1.2em;
@@ -94,15 +98,13 @@ const StyledButton = styled(Button)`
  box-shadow: none;
  text-transform: none;
  border-color: transparent;
-  height: auto;

  &:hover {
    background: transparent;
  }

  ${Inner} {
-    line-height: 24px;
-    min-height: auto;
+    line-height: 28px;
  }
 `;

@@ -1,3 +1,5 @@
+// @flow
+import * as React from "react";
 import styled from "styled-components";

 type JustifyValues =
@@ -14,14 +16,29 @@ type AlignValues =
  | "flex-start"
  | "flex-end";

-const Flex = styled.div<{
-  auto?: boolean;
-  column?: boolean;
-  align?: AlignValues;
-  justify?: JustifyValues;
-  shrink?: boolean;
-  gap?: number;
-}>`
+type Props = {|
+  column?: ?boolean,
+  shrink?: ?boolean,
+  align?: AlignValues,
+  justify?: JustifyValues,
+  auto?: ?boolean,
+  className?: string,
+  children?: React.Node,
+  role?: string,
+  gap?: number,
+|};
+
+const Flex = React.forwardRef<Props, HTMLDivElement>((props: Props, ref) => {
+  const { children, ...restProps } = props;
+
+  return (
+    <Container ref={ref} {...restProps}>
+      {children}
+    </Container>
+  );
+});
+
+const Container = styled.div`
  display: flex;
  flex: ${({ auto }) => (auto ? "1 1 auto" : "initial")};
  flex-direction: ${({ column }) => (column ? "column" : "row")};
@@ -1,8 +1,9 @@
+// @flow
 import * as React from "react";
 import styled from "styled-components";
-import Empty from "~/components/Empty";
-import Fade from "~/components/Fade";
-import Flex from "~/components/Flex";
+import Empty from "components/Empty";
+import Fade from "components/Fade";
+import Flex from "components/Flex";

 export default function FullscreenLoading() {
  return (
@@ -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 GithubLogo({ size = 34, fill = "#FFF", className }: Props) {
@@ -1,31 +1,31 @@
+// @flow
 import { observable } from "mobx";
-import { observer } from "mobx-react";
+import { observer, inject } from "mobx-react";
 import { GroupIcon } from "outline-icons";
 import * as React from "react";
 import styled from "styled-components";
-import { MAX_AVATAR_DISPLAY } from "@shared/constants";
-import RootStore from "~/stores/RootStore";
-import CollectionGroupMembership from "~/models/CollectionGroupMembership";
-import Group from "~/models/Group";
-import GroupMembers from "~/scenes/GroupMembers";
-import Facepile from "~/components/Facepile";
-import Flex from "~/components/Flex";
-import ListItem from "~/components/List/Item";
-import Modal from "~/components/Modal";
-import withStores from "~/components/withStores";
+import { MAX_AVATAR_DISPLAY } from "shared/constants";
+import GroupMembershipsStore from "stores/GroupMembershipsStore";
+import CollectionGroupMembership from "models/CollectionGroupMembership";
+import Group from "models/Group";
+import GroupMembers from "scenes/GroupMembers";
+import Facepile from "components/Facepile";
+import Flex from "components/Flex";
+import ListItem from "components/List/Item";
+import Modal from "components/Modal";

-type Props = RootStore & {
-  group: Group;
-  membership?: CollectionGroupMembership;
-  showFacepile?: boolean;
-  showAvatar?: boolean;
-  renderActions: (arg0: { openMembersModal: () => void }) => React.ReactNode;
+type Props = {
+  group: Group,
+  groupMemberships: GroupMembershipsStore,
+  membership?: CollectionGroupMembership,
+  showFacepile?: boolean,
+  showAvatar?: boolean,
+  renderActions: ({ openMembersModal: () => void }) => React.Node,
 };

@observer
 class GroupListItem extends React.Component<Props> {
-  @observable
-  membersModalOpen = false;
+  @observable membersModalOpen: boolean = false;

  handleMembersModalOpen = () => {
    this.membersModalOpen = true;
@@ -37,11 +37,14 @@ class GroupListItem extends React.Component<Props> {

  render() {
    const { group, groupMemberships, showFacepile, renderActions } = this.props;
+
    const memberCount = group.memberCount;
+
    const membershipsInGroup = groupMemberships.inGroup(group.id);
    const users = membershipsInGroup
      .slice(0, MAX_AVATAR_DISPLAY)
      .map((gm) => gm.user);
+
    const overflow = memberCount - users.length;

    return (
@@ -61,7 +64,7 @@ class GroupListItem extends React.Component<Props> {
            </>
          }
          actions={
-            <Flex align="center" gap={8}>
+            <Flex align="center">
              {showFacepile && (
                <Facepile
                  onClick={this.handleMembersModalOpen}
@@ -69,6 +72,7 @@ class GroupListItem extends React.Component<Props> {
                  overflow={overflow}
                />
              )}
+              &nbsp;
              {renderActions({
                openMembersModal: this.handleMembersModalOpen,
              })}
@@ -80,7 +84,7 @@ class GroupListItem extends React.Component<Props> {
          onRequestClose={this.handleMembersModalClose}
          isOpen={this.membersModalOpen}
        >
-          <GroupMembers group={group} />
+          <GroupMembers group={group} onSubmit={this.handleMembersModalClose} />
        </Modal>
      </>
    );
@@ -103,4 +107,4 @@ const Title = styled.span`
  }
 `;

-export default withStores(GroupListItem);
+export default inject("groupMemberships")(GroupListItem);
@@ -1,16 +1,17 @@
+// @flow
 import { observer } from "mobx-react";
 import * as React from "react";
 import { Dialog, DialogBackdrop, useDialogState } from "reakit/Dialog";
 import styled from "styled-components";
-import Scrollable from "~/components/Scrollable";
-import usePrevious from "~/hooks/usePrevious";
+import Scrollable from "components/Scrollable";
+import usePrevious from "hooks/usePrevious";

-type Props = {
-  children?: React.ReactNode;
-  isOpen: boolean;
-  title?: string;
-  onRequestClose: () => void;
-};
+type Props = {|
+  children?: React.Node,
+  isOpen: boolean,
+  title?: string,
+  onRequestClose: () => void,
+|};

 const Guide = ({
  children,
@@ -19,16 +20,13 @@ const Guide = ({
  onRequestClose,
  ...rest
 }: Props) => {
-  const dialog = useDialogState({
-    animated: 250,
-  });
+  const dialog = useDialogState({ animated: 250 });
  const wasOpen = usePrevious(isOpen);

  React.useEffect(() => {
    if (!wasOpen && isOpen) {
      dialog.show();
    }
-
    if (wasOpen && !isOpen) {
      dialog.hide();
    }
@@ -0,0 +1,128 @@
+// @flow
+import { throttle } from "lodash";
+import { observer } from "mobx-react";
+import { transparentize } from "polished";
+import * as React from "react";
+import styled from "styled-components";
+import breakpoint from "styled-components-breakpoint";
+import Fade from "components/Fade";
+import Flex from "components/Flex";
+
+type Props = {|
+  breadcrumb?: React.Node,
+  title: React.Node,
+  actions?: React.Node,
+|};
+
+function Header({ breadcrumb, title, actions }: Props) {
+  const [isScrolled, setScrolled] = React.useState(false);
+
+  const handleScroll = React.useCallback(
+    throttle(() => setScrolled(window.scrollY > 75), 50),
+    []
+  );
+
+  React.useEffect(() => {
+    window.addEventListener("scroll", handleScroll);
+
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, [handleScroll]);
+
+  const handleClickTitle = React.useCallback(() => {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+  }, []);
+
+  return (
+    <Wrapper align="center" shrink={false}>
+      {breadcrumb ? <Breadcrumbs>{breadcrumb}</Breadcrumbs> : null}
+      {isScrolled ? (
+        <Title align="center" justify="flex-start" onClick={handleClickTitle}>
+          <Fade>{title}</Fade>
+        </Title>
+      ) : (
+        <div />
+      )}
+      {actions && (
+        <Actions align="center" justify="flex-end">
+          {actions}
+        </Actions>
+      )}
+    </Wrapper>
+  );
+}
+
+const Breadcrumbs = styled("div")`
+  flex-grow: 1;
+  flex-basis: 0;
+  align-items: center;
+  padding-right: 8px;
+
+  /* Don't show breadcrumbs on mobile */
+  display: none;
+  ${breakpoint("tablet")`	
+  display: flex;
+`};
+`;
+
+const Actions = styled(Flex)`
+  flex-grow: 1;
+  flex-basis: 0;
+  min-width: auto;
+  padding-left: 8px;
+
+  ${breakpoint("tablet")`
+    position: unset;
+  `};
+`;
+
+const Wrapper = styled(Flex)`
+  position: sticky;
+  top: 0;
+  z-index: ${(props) => props.theme.depths.header};
+  background: ${(props) => transparentize(0.2, props.theme.background)};
+  padding: 12px;
+  transition: all 100ms ease-out;
+  transform: translate3d(0, 0, 0);
+  backdrop-filter: blur(20px);
+  min-height: 56px;
+  justify-content: flex-start;
+
+  @media print {
+    display: none;
+  }
+
+  ${breakpoint("tablet")`
+    padding: 16px 16px 0;
+    justify-content: "center";
+  `};
+`;
+
+const Title = styled("div")`
+  display: none;
+  font-size: 16px;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  cursor: pointer;
+  min-width: 0;
+
+  ${breakpoint("tablet")`	
+    padding-left: 0;
+    display: block;
+  `};
+
+  svg {
+    vertical-align: bottom;
+  }
+
+  @media (display-mode: standalone) {
+    overflow: hidden;
+    flex-grow: 0 !important;
+  }
+`;
+
+export default observer(Header);
@@ -1,173 +0,0 @@
-import { throttle } from "lodash";
-import { observer } from "mobx-react";
-import { MenuIcon } from "outline-icons";
-import { transparentize } from "polished";
-import * as React from "react";
-import styled from "styled-components";
-import breakpoint from "styled-components-breakpoint";
-import Button from "~/components/Button";
-import Fade from "~/components/Fade";
-import Flex from "~/components/Flex";
-import useMobile from "~/hooks/useMobile";
-import useStores from "~/hooks/useStores";
-import { supportsPassiveListener } from "~/utils/browser";
-
-type Props = {
-  breadcrumb?: React.ReactNode;
-  title: React.ReactNode;
-  actions?: React.ReactNode;
-  hasSidebar?: boolean;
-};
-
-function Header({ breadcrumb, title, actions, hasSidebar }: Props) {
-  const { ui } = useStores();
-  const isMobile = useMobile();
-
-  const hasMobileSidebar = hasSidebar && isMobile;
-
-  const passThrough = !actions && !breadcrumb && !title;
-
-  const [isScrolled, setScrolled] = React.useState(false);
-  const handleScroll = React.useCallback(
-    throttle(() => setScrolled(window.scrollY > 75), 50),
-    []
-  );
-
-  React.useEffect(() => {
-    window.addEventListener(
-      "scroll",
-      handleScroll,
-      supportsPassiveListener ? { passive: true } : false
-    );
-    return () => window.removeEventListener("scroll", handleScroll);
-  }, [handleScroll]);
-
-  const handleClickTitle = React.useCallback(() => {
-    window.scrollTo({
-      top: 0,
-      behavior: "smooth",
-    });
-  }, []);
-
-  return (
-    <Wrapper align="center" shrink={false} $passThrough={passThrough}>
-      {breadcrumb || hasMobileSidebar ? (
-        <Breadcrumbs>
-          {hasMobileSidebar && (
-            <MobileMenuButton
-              onClick={ui.toggleMobileSidebar}
-              icon={<MenuIcon />}
-              iconColor="currentColor"
-              neutral
-            />
-          )}
-          {breadcrumb}
-        </Breadcrumbs>
-      ) : null}
-
-      {isScrolled ? (
-        <Title onClick={handleClickTitle}>
-          <Fade>{title}</Fade>
-        </Title>
-      ) : (
-        <div />
-      )}
-      <Actions align="center" justify="flex-end">
-        {actions}
-      </Actions>
-    </Wrapper>
-  );
-}
-
-const Breadcrumbs = styled("div")`
-  flex-grow: 1;
-  flex-basis: 0;
-  align-items: center;
-  padding-right: 8px;
-  display: flex;
-`;
-
-const Actions = styled(Flex)`
-  flex-grow: 1;
-  flex-basis: 0;
-  min-width: auto;
-  padding-left: 8px;
-
-  ${breakpoint("tablet")`
-    position: unset;
-  `};
-`;
-
-const Wrapper = styled(Flex)<{ $passThrough?: boolean }>`
-  top: 0;
-  z-index: ${(props) => props.theme.depths.header};
-  position: sticky;
-  background: ${(props) => props.theme.background};
-
-  ${(props) =>
-    props.$passThrough
-      ? `
-      background: transparent;
-      pointer-events: none;
-      `
-      : `
-      background: ${transparentize(0.2, props.theme.background)};
-      backdrop-filter: blur(20px);
-      `};
-
-  padding: 12px;
-  transition: all 100ms ease-out;
-  transform: translate3d(0, 0, 0);
-  min-height: 56px;
-  justify-content: flex-start;
-
-  @supports (backdrop-filter: blur(20px)) {
-    backdrop-filter: blur(20px);
-    background: ${(props) => transparentize(0.2, props.theme.background)};
-  }
-
-  @media print {
-    display: none;
-  }
-
-  ${breakpoint("tablet")`
-    padding: 16px;
-    justify-content: center;
-  `};
-`;
-
-const Title = styled("div")`
-  display: none;
-  font-size: 16px;
-  font-weight: 600;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  cursor: pointer;
-  min-width: 0;
-
-  ${breakpoint("tablet")`
-    padding-left: 0;
-    display: block;
-  `};
-
-  svg {
-    vertical-align: bottom;
-  }
-
-  @media (display-mode: standalone) {
-    overflow: hidden;
-    flex-grow: 0 !important;
-  }
-`;
-
-const MobileMenuButton = styled(Button)`
-  margin-right: 8px;
-  pointer-events: auto;
-
-  @media print {
-    display: none;
-  }
-`;
-
-export default observer(Header);
@@ -1,9 +1,9 @@
+// @flow
 import styled from "styled-components";

-const Heading = styled.h1<{ centered?: boolean }>`
+const Heading = styled.h1`
  display: flex;
  align-items: center;
-  user-select: none;
  ${(props) => (props.centered ? "text-align: center;" : "")}

  svg {
@@ -0,0 +1,10 @@
+// @flow
+import styled from "styled-components";
+
+const HelpText = styled.p`
+  margin-top: 0;
+  color: ${(props) => props.theme.textSecondary};
+  font-size: ${(props) => (props.small ? "13px" : "inherit")};
+`;
+
+export default HelpText;
@@ -1,24 +1,24 @@
+// @flow
 import * as React from "react";
 import replace from "string-replace-to-array";
 import styled from "styled-components";

-type Props = React.HTMLAttributes<HTMLSpanElement> & {
-  highlight: (string | null | undefined) | RegExp;
-  processResult?: (tag: string) => string;
-  text: string | undefined;
-  caseSensitive?: boolean;
+type Props = {
+  highlight: ?string | RegExp,
+  processResult?: (tag: string) => string,
+  text: string,
+  caseSensitive?: boolean,
 };

 function Highlight({
  highlight,
  processResult,
  caseSensitive,
-  text = "",
+  text,
  ...rest
 }: Props) {
  let regex;
  let index = 0;
-
  if (highlight instanceof RegExp) {
    regex = highlight;
  } else {
@@ -27,11 +27,10 @@ function Highlight({
      caseSensitive ? "g" : "gi"
    );
  }
-
  return (
    <span {...rest}>
      {highlight
-        ? replace(text, regex, (tag: string) => (
+        ? replace(text, regex, (tag) => (
            <Mark key={index++}>
              {processResult ? processResult(tag) : tag}
            </Mark>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Saumya Pandey	8a1e2eb751	Merge branch 'main' of https://github.com/outline/outline into fix/2122	2021-10-08 09:29:29 +05:30
Saumya Pandey	584377e7de	check for collaborativeEditing	2021-10-07 23:14:42 +05:30
Saumya Pandey	b90ed11c5b	Merge branch 'main' of https://github.com/outline/outline into fix/2122	2021-10-07 23:13:36 +05:30
Saumya Pandey	7fc450729f	Use less than or equal	2021-09-28 08:50:36 +05:30
Saumya Pandey	193b027a52	Even better	2021-09-28 08:49:48 +05:30
Saumya Pandey	26466a7342	Restructure ternary operator	2021-09-28 01:47:18 +05:30
Saumya Pandey	f4f3588039	Merge branch 'main' of https://github.com/outline/outline into fix/2122	2021-09-28 01:15:40 +05:30
Tom Moor	576907fdc1	merge	2021-09-19 13:44:09 -07:00
Tom Moor	f56a75d2ae	Merge branch 'main' into fix/2122	2021-09-19 13:43:34 -07:00
Saumya Pandey	5d2ccb5821	Add animation	2021-09-19 11:37:02 +05:30
Saumya Pandey	2905306c28	Merge branch 'main' of https://github.com/outline/outline into fix/2122	2021-08-30 15:39:57 +05:30
Saumya Pandey	88bc1aae89	Merge branch 'fix/2122' of https://github.com/outline/outline into fix/2122	2021-08-30 15:37:20 +05:30
Saumya Pandey	cd4f76270c	Create useListDocumentPath hook	2021-08-30 15:31:39 +05:30
Saumya Pandey	90d0309b33	Create DocumentPathList to rows computation	2021-08-29 16:27:47 +05:30
Saumya Pandey	30a98df712	Pass selected value as a prop	2021-08-29 15:07:27 +05:30
Saumya Pandey	c40caea4ab	Minor tweaks	2021-08-28 15:31:03 +05:30
Saumya Pandey	c8e16e8de0	Merge branch 'fix/2122' of https://github.com/outline/outline into fix/2122	2021-08-27 03:17:37 +05:30
Saumya Pandey	0558049483	Update app/components/NewDocumentButton.js Co-authored-by: Tom Moor <tom.moor@gmail.com>	2021-08-27 03:17:20 +05:30
Saumya Pandey	e96e293988	Use InputSearch	2021-08-27 03:16:35 +05:30
Saumya Pandey	a628735b2c	Reorder star at the end	2021-08-27 03:01:39 +05:30
Saumya Pandey	b785da6159	Convert to functional component	2021-08-27 02:44:24 +05:30
Saumya Pandey	e5eb134ae6	Use newDocumentUrl helper	2021-08-27 01:44:51 +05:30
Saumya Pandey	8efd31f1d2	Don't show collections that can't be update by user	2021-08-27 01:42:30 +05:30
Saumya Pandey	ac64725964	Add policy check when publishing draft	2021-08-27 01:00:25 +05:30
Saumya Pandey	4fbb5037c5	Authorize for collection publish	2021-08-27 00:25:12 +05:30
Saumya Pandey	78e23026e6	Use hasCollection instead of can.share	2021-08-27 00:16:16 +05:30
Saumya Pandey	21c7d93131	Merge branch 'fix/2122' of https://github.com/outline/outline into fix/2122	2021-08-27 00:11:31 +05:30
Saumya Pandey	f76d72ef0a	Update app/components/DocumentBreadcrumb.js Co-authored-by: Tom Moor <tom.moor@gmail.com>	2021-08-27 00:10:10 +05:30
Saumya Pandey	733490f536	Add return type	2021-08-27 00:01:51 +05:30
Saumya Pandey	faa67a7403	Remove computedCollectionId	2021-08-27 00:01:41 +05:30
Saumya Pandey	900ee7ada0	Update app/menus/DocumentMenu.js Co-authored-by: Tom Moor <tom.moor@gmail.com>	2021-08-26 22:50:27 +05:30
Saumya Pandey	c33515686d	Update app/components/DocumentMeta.js Co-authored-by: Tom Moor <tom.moor@gmail.com>	2021-08-26 22:46:51 +05:30
Saumya Pandey	e619bce571	Update app/components/DocumentListItem.js Co-authored-by: Tom Moor <tom.moor@gmail.com>	2021-08-26 22:42:20 +05:30
Saumya Pandey	c9f0e3a5e6	Update app/components/DocumentListItem.js Co-authored-by: Tom Moor <tom.moor@gmail.com>	2021-08-26 22:41:17 +05:30
Saumya Pandey	e5981d45bf	Highlight the selected path with primary color	2021-08-25 20:03:38 +05:30
Saumya Pandey	eb408b0e82	Rename method	2021-08-25 19:40:18 +05:30
Saumya Pandey	ecdca2b8ec	Extract dialog to it's own component	2021-08-25 19:25:12 +05:30
Saumya Pandey	20429847c1	Ip from request obj	2021-08-25 18:25:44 +05:30
Saumya Pandey	6d174fe6d6	Fix typo and add translation	2021-08-25 18:21:32 +05:30
Saumya Pandey	3065296a19	Move events inside documentUpdater	2021-08-25 18:19:24 +05:30
Saumya Pandey	e0f9f33c81	Remove unnecessary code	2021-08-25 02:32:25 +05:30
Saumya Pandey	2a732fad09	Stop share.create request	2021-08-25 01:01:11 +05:30
Saumya Pandey	be04e2abef	Add space	2021-08-24 23:41:31 +05:30
Saumya Pandey	cec8e375bf	Delete NewDocumentMenu	2021-08-24 23:37:50 +05:30
Saumya Pandey	854e4d6af7	Merge branch 'main' of https://github.com/outline/outline into fix/2122	2021-08-24 23:37:05 +05:30
Saumya Pandey	98e6bf6504	Replace NewDocumentMenu with NewDocumentButton	2021-08-24 23:30:23 +05:30
Saumya Pandey	e5bbd7db1d	Update position	2021-08-24 23:21:05 +05:30
Saumya Pandey	2fe7370252	Add checkbox and publish btn	2021-08-24 18:19:23 +05:30
Saumya Pandey	cbf6aef0eb	Minor tweaks	2021-08-21 01:32:56 +05:30
Saumya Pandey	aa2980a941	Add tests on drafts doc	2021-08-21 01:32:48 +05:30
Saumya Pandey	7ffe2a90a5	Make modal mobile friendly	2021-08-12 03:49:59 +05:30
Saumya Pandey	bbb41a9430	Merge branch 'main' of https://github.com/outline/outline into fix/2122	2021-08-12 03:07:31 +05:30
Saumya Pandey	3cfca47978	Use star and unstar policies	2021-08-12 03:05:24 +05:30
Saumya Pandey	35c6b64077	Update unarchive policy to not assert for collection	2021-08-12 02:55:27 +05:30
Saumya Pandey	0095830000	Update star policy	2021-08-12 02:44:01 +05:30
Saumya Pandey	ab5b3e151a	Don't move archive	2021-08-12 02:35:51 +05:30
Saumya Pandey	65e5030efd	Fix bug in test	2021-08-12 01:20:38 +05:30
Saumya Pandey	e16bfd83ef	Add modal to publish flow	2021-08-11 18:21:16 +05:30
Saumya Pandey	d98ec86307	Create documentUpdater command	2021-08-11 17:06:27 +05:30
Saumya Pandey	3caeb8ba19	Create choose collection modal	2021-08-11 01:16:16 +05:30
Saumya Pandey	ef8be0dd0b	Refactor PathToDocument	2021-08-11 01:16:01 +05:30
Saumya Pandey	44f3ef869a	Use documents.update endpoint	2021-08-10 03:35:37 +05:30
Saumya Pandey	c43157a2fa	Quick filteroptions to choose collection	2021-08-07 01:06:29 +05:30
Saumya Pandey	b7f7af2480	Use computedCollectionId	2021-08-06 23:32:14 +05:30
Saumya Pandey	fd71f82ec9	Create draft without collection	2021-08-06 23:31:49 +05:30
Saumya Pandey	4e29b14426	Updates on server to support drafts with no collection	2021-08-06 23:18:53 +05:30