fix: Heroku post-deploy overwrites default locale file

fix: Migrations should account for old rows
feat: Add ability to star collection (#3327 )
2026-06-13 11:25:03 +03:00 · 2022-04-04 18:23:34 -07:00 · 2022-04-03 20:16:09 -07:00 · 2022-04-03 18:51:01 -07:00 · 2022-04-03 17:07:55 -07:00 · 2022-04-03 16:48:40 -07:00
1451 changed files with 67972 additions and 72652 deletions
@@ -1,7 +1,7 @@
 {
  "presets": [
    "@babel/preset-react",
-    "@babel/preset-flow",
+    "@babel/preset-typescript",
    [
      "@babel/preset-env",
      {
@@ -25,5 +25,17 @@
    "@babel/plugin-transform-destructuring",
    "@babel/plugin-transform-regenerator",
    "transform-class-properties"
-  ]
+  ],
+  "env": {
+    "production": {
+      "plugins": [
+        [
+          "styled-components",
+          {
+            "displayName": false
+          }
+        ]
+      ]
+    }
+  }
 }
@@ -1,4 +1,12 @@
-version: 2
+version: 2.1
+
+executors:
+  docker-publisher:
+    environment:
+      IMAGE_NAME: outlinewiki/outline
+    docker:
+      - image: circleci/buildpack-deps:stretch
+
 jobs:
  build:
    working_directory: ~/outline
@@ -33,11 +41,95 @@ jobs:
          name: lint
          command: yarn lint
      - run:
-          name: flow
-          command: yarn flow check --max-workers 4
+          name: typescript
+          command: yarn tsc
      - run:
          name: test
          command: yarn test
      - run:
          name: build-webpack
-          command: yarn build:webpack
+          command: yarn build:webpack
+  build-image:
+    executor: docker-publisher
+    steps:
+      - checkout
+      - setup_remote_docker:
+          version: 20.10.6
+      - run:
+          name: Build Docker image
+          command: docker build -t $IMAGE_NAME:latest .
+      - run:
+          name: Archive Docker image
+          command: docker save -o image.tar $IMAGE_NAME
+      - persist_to_workspace:
+          root: .
+          paths:
+            - ./image.tar
+  publish-latest:
+    executor: docker-publisher
+    steps:
+      - attach_workspace:
+          at: /tmp/workspace
+      - setup_remote_docker:
+          version: 20.10.6
+      - run:
+          name: Load archived Docker image
+          command: docker load -i /tmp/workspace/image.tar
+      - run:
+          name: Publish Docker Image to Docker Hub
+          command: |
+            echo "$DOCKERHUB_PASS" | docker login -u "$DOCKERHUB_USERNAME" --password-stdin
+            IMAGE_TAG=${CIRCLE_TAG/v/''}
+            docker tag $IMAGE_NAME:latest $IMAGE_NAME:$IMAGE_TAG
+            docker push $IMAGE_NAME:latest
+            docker push $IMAGE_NAME:$IMAGE_TAG
+  publish-tag:
+    executor: docker-publisher
+    steps:
+      - attach_workspace:
+          at: /tmp/workspace
+      - setup_remote_docker:
+          version: 20.10.6
+      - run:
+          name: Load archived Docker image
+          command: docker load -i /tmp/workspace/image.tar
+      - run:
+          name: Publish Docker Image to Docker Hub
+          command: |
+            echo "$DOCKERHUB_PASS" | docker login -u "$DOCKERHUB_USERNAME" --password-stdin
+            IMAGE_TAG=${CIRCLE_TAG/v/''}
+            docker tag $IMAGE_NAME:latest $IMAGE_NAME:$IMAGE_TAG
+            docker push $IMAGE_NAME:$IMAGE_TAG
+
+workflows:
+  version: 2
+  build-and-test:
+    jobs:
+      - build:
+          filters:
+            tags:
+              ignore: /^v.*/
+  build-docker:
+    jobs:
+      - build-image:
+          filters:
+            tags:
+              only: /^v.*/
+            branches:
+              ignore: /.*/
+      - publish-latest:
+          requires:
+            - build-image
+          filters:
+            tags:
+              only: /^v\d+\.\d+\.\d+$/
+            branches:
+              ignore: /.*/
+      - publish-tag:
+          requires:
+            - build-image
+          filters:
+            tags:
+              only: /^v\d+\.\d+\.\d+-.*$/
+            branches:
+              ignore: /.*/
@@ -6,14 +6,12 @@ __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,37 +1,35 @@
-# 👋 Welcome, we're glad you're setting up an installation of Outline. Copy this 
-# file to .env or set the variables in your local environment manually. For 
-# development with docker this should mostly work out  of the box other than 
-# setting the Slack keys and the SECRET_KEY.
-
-
-
-
 # –––––––––––––––– REQUIRED ––––––––––––––––

 # Generate a hex-encoded 32-byte random key. You should use `openssl rand -hex 32`
 # in your terminal to generate a random value.
 SECRET_KEY=generate_a_new_key

-# Generate a unique random key. The format is not important but you could still use 
+# Generate a unique random key. The format is not important but you could still use
 # `openssl rand -hex 32` in your terminal to produce this.
 UTILS_SECRET=generate_a_new_key

 # For production point these at your databases, in development the default
 # should work out of the box.
-DATABASE_URL=postgres://user:pass@localhost:5532/outline
-DATABASE_URL_TEST=postgres://user:pass@localhost:5532/outline-test
+DATABASE_URL=postgres://user:pass@localhost:5432/outline
+DATABASE_URL_TEST=postgres://user:pass@localhost:5432/outline-test
+DATABASE_CONNECTION_POOL_MIN=
+DATABASE_CONNECTION_POOL_MAX=
 # Uncomment this to disable SSL for connecting to Postgres
 # PGSSLMODE=disable
-REDIS_URL=redis://localhost:6479
+REDIS_URL=redis://localhost:6379

 # URL should point to the fully qualified, publicly accessible URL. If using a
 # proxy the port in URL and PORT may be different.
 URL=http://localhost:3000
 PORT=3000

+# See [documentation](docs/SERVICES.md) on running a separate collaboration
+# server, for normal operation this does not need to be set.
+COLLABORATION_URL=
+
 # To support uploading of images for avatars and document attachments an
 # s3-compatible storage must be provided. AWS S3 is recommended for redundency
-# however if you want to keep all file storage local an alternative such as 
+# however if you want to keep all file storage local an alternative such as
 # minio (https://github.com/minio/minio) can be used.

 # A more detailed guide on setting up S3 is available here:
@@ -40,6 +38,7 @@ PORT=3000
 AWS_ACCESS_KEY_ID=get_a_key_from_aws
 AWS_SECRET_ACCESS_KEY=get_the_secret_of_above_key
 AWS_REGION=xx-xxxx-x
+AWS_S3_ACCELERATE_URL=
 AWS_S3_UPLOAD_BUCKET_URL=http://s3:4569
 AWS_S3_UPLOAD_BUCKET_NAME=bucket_name_here
 AWS_S3_UPLOAD_MAX_SIZE=26214400
@@ -69,24 +68,48 @@ SLACK_SECRET=get_the_secret_of_above_key
 GOOGLE_CLIENT_ID=
 GOOGLE_CLIENT_SECRET=

-# To configure Microsoft/Azure auth, you'll need to create an OAuth Client. See 
+# To configure Microsoft/Azure auth, you'll need to create an OAuth Client. See
 # the guide for details on setting up your Azure App:
 # => https://wiki.generaloutline.com/share/dfa77e56-d4d2-4b51-8ff8-84ea6608faa4
-AZURE_CLIENT_ID= 
+AZURE_CLIENT_ID=
 AZURE_CLIENT_SECRET=
 AZURE_RESOURCE_APP_ID=

+# To configure generic OIDC auth, you'll need some kind of identity provider.
+# See documentation for whichever IdP you use to acquire the following info:
+# Redirect URI is https://<URL>/auth/oidc.callback
+OIDC_CLIENT_ID=
+OIDC_CLIENT_SECRET=
+OIDC_AUTH_URI=
+OIDC_TOKEN_URI=
+OIDC_USERINFO_URI=
+
+# Specify which claims to derive user information from
+# Supports any valid JSON path with the JWT payload
+OIDC_USERNAME_CLAIM=preferred_username
+
+# Display name for OIDC authentication
+OIDC_DISPLAY_NAME=OpenID
+
+# Space separated auth scopes.
+OIDC_SCOPES=openid profile email


 # –––––––––––––––– OPTIONAL ––––––––––––––––

+# Base64 encoded private key and certificate for HTTPS termination. This is only
+# required if you do not use an external reverse proxy. See documentation:
+# https://wiki.generaloutline.com/share/1c922644-40d8-41fe-98f9-df2b67239d45
+SSL_KEY=
+SSL_CERT=
+
 # If using a Cloudfront/Cloudflare distribution or similar it can be set below.
-# This will cause paths to javascript, stylesheets, and images to be updated to  
-# the hostname defined in CDN_URL. In your CDN configuration the origin server 
+# This will cause paths to javascript, stylesheets, and images to be updated to
+# the hostname defined in CDN_URL. In your CDN configuration the origin server
 # should be set to the same as URL.
 CDN_URL=

-# Auto-redirect to https in production. The default is true but you may set to 
+# Auto-redirect to https in production. The default is true but you may set to
 # false if you can be sure that SSL is terminated at an external loadbalancer.
 FORCE_HTTPS=true

@@ -102,15 +125,15 @@ WEB_CONCURRENCY=1
 # especially large Word documents with embedded imagery
 MAXIMUM_IMPORT_SIZE=5120000

-# You may enable or disable debugging categories to increase the noisiness of
-# logs. The default is a good balance
-DEBUG=cache,presenters,events,emails,mailer,utils,http,server,services
+# You can remove this line if your reverse proxy already logs incoming http
+# requests and this ends up being duplicative
+DEBUG=http

 # Comma separated list of domains to be allowed to signin to the wiki. If not
 # set, all domains are allowed by default when using Google OAuth to signin
 ALLOWED_DOMAINS=

-# For a complete Slack integration with search and posting to channels the 
+# For a complete Slack integration with search and posting to channels the
 # following configs are also needed, some more details
 # => https://wiki.generaloutline.com/share/be25efd1-b3ef-4450-b8e5-c4a4fc11e02a
 #
@@ -118,13 +141,13 @@ SLACK_VERIFICATION_TOKEN=your_token
 SLACK_APP_ID=A0XXXXXXX
 SLACK_MESSAGE_ACTIONS=true

-# Optionally enable google analytics to track pageviews in the knowledge base 
+# Optionally enable google analytics to track pageviews in the knowledge base
 GOOGLE_ANALYTICS_ID=

 # Optionally enable Sentry (sentry.io) to track errors and performance
 SENTRY_DSN=

-# To support sending outgoing transactional emails such as "document updated" or 
+# To support sending outgoing transactional emails such as "document updated" or
 # "you've been invited" you'll need to provide authentication for an SMTP server
 SMTP_HOST=
 SMTP_PORT=
@@ -138,6 +161,6 @@ SMTP_SECURE=true
 # Custom logo that displays on the authentication screen, scaled to height: 60px
 # TEAM_LOGO=https://example.com/images/logo.png

-# The default interface language. See translate.getoutline.com for a list of 
+# The default interface language. See translate.getoutline.com for a list of
 # available language codes and their rough percentage translated.
 DEFAULT_LANGUAGE=en_US
@@ -1,20 +1,46 @@
 {
-  "parser": "babel-eslint",
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "sourceType": "module",
+    "extraFileExtensions": [".json"],
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
  "extends": [
-    "react-app",
-    "plugin:import/errors",
-    "plugin:import/warnings",
-    "plugin:flowtype/recommended",
-    "plugin:react-hooks/recommended"
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:import/recommended",
+    "plugin:import/typescript",
+    "plugin:react-hooks/recommended",
+    "plugin:prettier/recommended"
  ],
  "plugins": [
-    "prettier",
-    "flowtype"
+    "@typescript-eslint",
+    "eslint-plugin-import",
+    "eslint-plugin-node",
+    "eslint-plugin-react",
+    "eslint-plugin-react-hooks",
+    "import"
  ],
  "rules": {
    "eqeqeq": 2,
-    "no-unused-vars": 2,
+    "curly": 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",
      {
@@ -23,53 +49,48 @@
        },
        "pathGroups": [
          {
-            "pattern": "shared/**",
+            "pattern": "@shared/**",
            "group": "external",
            "position": "after"
          },
          {
-            "pattern": "stores",
+            "pattern": "@server/**",
            "group": "external",
            "position": "after"
          },
          {
-            "pattern": "stores/**",
+            "pattern": "~/stores",
            "group": "external",
            "position": "after"
          },
          {
-            "pattern": "models/**",
+            "pattern": "~/stores/**",
            "group": "external",
            "position": "after"
          },
          {
-            "pattern": "scenes/**",
+            "pattern": "~/models/**",
            "group": "external",
            "position": "after"
          },
          {
-            "pattern": "components/**",
+            "pattern": "~/scenes/**",
+            "group": "external",
+            "position": "after"
+          },
+          {
+            "pattern": "~/components/**",
+            "group": "external",
+            "position": "after"
+          },
+          {
+            "pattern": "~/**",
            "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",
      {
@@ -84,22 +105,11 @@
      "pragma": "React",
      "version": "detect"
    },
-    "import/resolver": {
-      "node": {
-        "paths": [
-          "app",
-          "."
-        ]
-      }
+    "import/parsers": {
+      "@typescript-eslint/parser": [".ts", ".tsx"]
    },
-    "flowtype": {
-      "onlyFilesWithFlowAnnotation": false
+    "import/resolver": {
+      "typescript": {}
    }
-  },
-  "env": {
-    "jest": true
-  },
-  "globals": {
-    "EDITOR_VERSION": true
  }
 }
@@ -1,39 +0,0 @@
-[include]
-.*/app/.*
-.*/server/.*
-.*/shared/.*
-
-[ignore]
-.*/node_modules/tiny-cookie/flow/.*
-.*/node_modules/styled-components/.*
-.*/node_modules/polished/.*
-.*/node_modules/mobx/.*.flow
-.*/node_modules/react-side-effect/.*
-.*/node_modules/fbjs/.*
-.*/node_modules/config-chain/.*
-.*/server/scripts/.*
-*.test.js
-
-[libs]
-
-[options]
-emoji=true
-sharedmemory.heap_size=3221225472
-
-module.system.node.resolve_dirname=node_modules
-module.system.node.resolve_dirname=app
-
-module.name_mapper='^\(.*\)\.md$' -> 'empty/object'
-module.name_mapper='^shared\/\(.*\)$' -> '<PROJECT_ROOT>/shared/\1'
-
-module.file_ext=.js
-module.file_ext=.md
-module.file_ext=.json
-
-esproposal.decorators=ignore
-esproposal.class_static_fields=enable
-esproposal.class_instance_fields=enable
-esproposal.optional_chaining=enable
-
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue
@@ -1,5 +1,5 @@
 # Number of days of inactivity before an issue becomes stale
-daysUntilStale: 90
+daysUntilStale: 120

 # Number of days of inactivity before a stale issue is closed
 daysUntilClose: 14
@@ -0,0 +1,70 @@
+# 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,3 +8,6 @@ stats.json
 .DS_Store
 fakes3/*
 .idea
+*.pem
+*.key
+*.cert
@@ -1,7 +1,7 @@
 {
-  "javascript.validate.enable": false,
-  "javascript.format.enable": false,
-  "typescript.validate.enable": false,
-  "typescript.format.enable": false,
+  "javascript.validate.enable": true,
+  "javascript.format.enable": true,
+  "typescript.validate.enable": true,
+  "typescript.format.enable": true,
  "editor.formatOnSave": true,
 }
@@ -1,23 +1,51 @@
-FROM node:14-alpine
+# syntax=docker/dockerfile:1.2
+ARG APP_PATH=/opt/outline
+FROM node:16-alpine AS deps-common

-ENV APP_PATH /opt/outline
-RUN mkdir -p $APP_PATH
+ARG APP_PATH
+WORKDIR $APP_PATH
+COPY ./package.json ./yarn.lock ./

+# ---
+FROM deps-common AS deps-dev
+RUN yarn install --no-optional --frozen-lockfile && \
+  yarn cache clean
+
+# ---
+FROM deps-common AS deps-prod
+RUN yarn install --production=true --frozen-lockfile && \
+  yarn cache clean
+
+# ---
+FROM node:16-alpine AS builder
+
+ARG APP_PATH
 WORKDIR $APP_PATH

-COPY package.json ./
-COPY yarn.lock ./
-
-RUN yarn --pure-lockfile
-
 COPY . .
+COPY --from=deps-dev $APP_PATH/node_modules ./node_modules
+ARG CDN_URL
+RUN yarn build

-RUN yarn build && \
-  yarn --production --ignore-scripts --prefer-offline && \
-  rm -rf shared && \
-  rm -rf app
+# ---
+FROM node:16-alpine AS runner

+ARG APP_PATH
+WORKDIR $APP_PATH
 ENV NODE_ENV production
-CMD yarn start
+
+COPY --from=builder $APP_PATH/build ./build
+COPY --from=builder $APP_PATH/server ./server
+COPY --from=builder $APP_PATH/public ./public
+COPY --from=builder $APP_PATH/.sequelizerc ./.sequelizerc
+COPY --from=deps-prod $APP_PATH/node_modules ./node_modules
+COPY --from=builder $APP_PATH/package.json ./package.json
+
+RUN addgroup -g 1001 -S nodejs && \
+  adduser -S nodejs -u 1001 && \
+  chown -R nodejs:nodejs $APP_PATH/build
+
+USER nodejs

 EXPOSE 3000
+CMD ["yarn", "start"]
@@ -3,7 +3,7 @@ Business Source License 1.1
 Parameters

 Licensor:             General Outline, Inc.
-Licensed Work:        Outline 0.55.0
+Licensed Work:        Outline 0.62.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:          2024-04-22
+Change Date:          2026-03-01

 Change License:       Apache License, Version 2.0

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

 build:
 	docker-compose build --pull outline
@@ -1 +1,2 @@
-web: node ./build/server/index.js
+web: yarn start --services=web,websockets,collaboration
+worker: yarn start --services=worker
@@ -1,18 +1,17 @@
-
-
 <p align="center">
  <img src="https://user-images.githubusercontent.com/31465/34380645-bd67f474-eb0b-11e7-8d03-0151c1730654.png" height="29" />
 </p>
 <p align="center">
-  <i>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>
+  <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>
  <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="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>
+  <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>
 </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).
@@ -21,115 +20,38 @@ If you'd like to run your own copy of Outline or contribute to development then

 # Installation

-Outline requires the following dependencies:
+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.

- [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
+If you have questions or improvements for the docs please create a thread in [GitHub discussions](https://github.com/outline/outline/discussions).

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

 If you’re looking for ways to get started, here's a list of ways to help us improve Outline:

-* [Translation](TRANSLATION.md) into other languages
-* Issues with [`good first issue`](https://github.com/outline/outline/labels/good%20first%20issue) label
-* Performance improvements, both on server and frontend
-* Developer happiness and documentation
-* Bugs and other issues listed on GitHub
-
+- [Translation](docs/TRANSLATION.md) into other languages
+- Issues with [`good first issue`](https://github.com/outline/outline/labels/good%20first%20issue) label
+- Performance improvements, both on server and frontend
+- Developer happiness and documentation
+- Bugs and other issues listed on GitHub

 ## Architecture

 If you're interested in contributing or learning more about the Outline codebase
-please refer to the [architecture document](ARCHITECTURE.md) first for a high level overview of how the application is put together.
-
+please refer to the [architecture document](docs/ARCHITECTURE.md) first for a high level overview of how the application is put together.

 ## Debugging

-Outline uses [debug](https://www.npmjs.com/package/debug). To enable debugging output, the following categories are available:
+In development Outline outputs simple logging to the console, prefixed by categories. In production it outputs JSON logs, these can be easily parsed by your preferred log ingestion pipeline.

-```
-DEBUG=sql,cache,presenters,events,importer,exporter,emails,mailer
-```
+HTTP logging is disabled by default, but can be enabled by setting the `DEBUG=http` environment variable.

 ## Tests

@@ -145,13 +67,16 @@ make test
 make watch
 ```

-Once the test database is created with  `make test` you may individually run
+Once the test database is created with `make test` you may individually run
 frontend and backend tests directly.

 ```shell
 # To run backend tests
 yarn test:server

+# To run a specific backend test
+yarn test:server myTestFile
+
 # To run frontend tests
 yarn test:app
 ```
@@ -160,14 +85,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,4 +1,3 @@
-/* eslint-disable flowtype/require-valid-file-annotation */
 export default class Queue {
  name;

@@ -1 +1,2 @@
-window.matchMedia = data => data;
+window.matchMedia = (data) => data;
+window.env = {};
@@ -35,7 +35,7 @@
      "required": true
    },
    "SECRET_KEY": {
-      "description": "A secret key",
+      "description": "A 32-character secret key, generate with openssl rand -hex 32",
      "generator": "secret",
      "required": true
    },
@@ -43,8 +43,12 @@
      "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",
+      "description": "https://{your app name}.herokuapp.com, or the domain you are binding to",
      "required": true
    },
    "GOOGLE_CLIENT_ID": {
@@ -55,8 +59,51 @@
      "description": "",
      "required": false
    },
-    "ALLOWED_DOMAINS": {
-      "description": "Comma separated list of domains to be allowed (optional). If not set, all Google apps domains are allowed by default",
+    "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",
      "required": false
    },
    "SLACK_KEY": {
@@ -155,6 +202,11 @@
    "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
    }
  }
 }
@@ -0,0 +1,9 @@
+{
+  "extends": [
+    "../.eslintrc"
+  ],
+  "env": {
+    "jest": true,
+    "browser": true
+  }
+}
@@ -7,14 +7,10 @@
    "<rootDir>/shared"
  ],
  "moduleNameMapper": {
-    "^shared/(.*)$": "<rootDir>/shared/$1",
+    "^~/(.*)$": "<rootDir>/app/$1",
+    "^@shared/(.*)$": "<rootDir>/shared/$1",
    "^.*[.](gif|ttf|eot|svg)$": "<rootDir>/__test__/fileMock.js"
  },
-  "moduleFileExtensions": [
-    "js",
-    "jsx",
-    "json"
-  ],
  "moduleDirectories": [
    "node_modules"
  ],
@@ -25,6 +21,7 @@
    "<rootDir>/__mocks__/window.js"
  ],
  "setupFilesAfterEnv": [
-    "./app/test/setup.js"
-  ]
+    "./app/test/setup.ts"
+  ],
+  "testEnvironment": "jsdom"
 }
@@ -0,0 +1,137 @@
+import {
+  CollectionIcon,
+  EditIcon,
+  PlusIcon,
+  StarredIcon,
+  UnstarredIcon,
+} from "outline-icons";
+import * as React from "react";
+import stores from "~/stores";
+import Collection from "~/models/Collection";
+import CollectionEdit from "~/scenes/CollectionEdit";
+import CollectionNew from "~/scenes/CollectionNew";
+import DynamicCollectionIcon from "~/components/CollectionIcon";
+import { createAction } from "~/actions";
+import { CollectionSection } from "~/actions/sections";
+import history from "~/utils/history";
+
+const ColorCollectionIcon = ({ collection }: { collection: Collection }) => {
+  return <DynamicCollectionIcon collection={collection} />;
+};
+
+export const openCollection = createAction({
+  name: ({ t }) => t("Open collection"),
+  section: CollectionSection,
+  shortcut: ["o", "c"],
+  icon: <CollectionIcon />,
+  children: ({ stores }) => {
+    const collections = stores.collections.orderedData;
+    return collections.map((collection) => ({
+      // Note: using url which includes the slug rather than id here to bust
+      // cache if the collection is renamed
+      id: collection.url,
+      name: collection.name,
+      icon: <ColorCollectionIcon collection={collection} />,
+      section: CollectionSection,
+      perform: () => history.push(collection.url),
+    }));
+  },
+});
+
+export const createCollection = createAction({
+  name: ({ t }) => t("New collection"),
+  section: CollectionSection,
+  icon: <PlusIcon />,
+  keywords: "create",
+  visible: ({ stores }) =>
+    stores.policies.abilities(stores.auth.team?.id || "").createCollection,
+  perform: ({ t, event }) => {
+    event?.preventDefault();
+    event?.stopPropagation();
+    stores.dialogs.openModal({
+      title: t("Create a collection"),
+      content: <CollectionNew onSubmit={stores.dialogs.closeAllModals} />,
+    });
+  },
+});
+
+export const editCollection = createAction({
+  name: ({ t }) => t("Edit collection"),
+  section: CollectionSection,
+  icon: <EditIcon />,
+  visible: ({ stores, activeCollectionId }) =>
+    !!activeCollectionId &&
+    stores.policies.abilities(activeCollectionId).update,
+  perform: ({ t, activeCollectionId }) => {
+    if (!activeCollectionId) {
+      return;
+    }
+
+    stores.dialogs.openModal({
+      title: t("Edit collection"),
+      content: (
+        <CollectionEdit
+          onSubmit={stores.dialogs.closeAllModals}
+          collectionId={activeCollectionId}
+        />
+      ),
+    });
+  },
+});
+
+export const starCollection = createAction({
+  name: ({ t }) => t("Star"),
+  section: CollectionSection,
+  icon: <StarredIcon />,
+  keywords: "favorite bookmark",
+  visible: ({ activeCollectionId, stores }) => {
+    if (!activeCollectionId) {
+      return false;
+    }
+    const collection = stores.collections.get(activeCollectionId);
+    return (
+      !collection?.isStarred &&
+      stores.policies.abilities(activeCollectionId).star
+    );
+  },
+  perform: ({ activeCollectionId, stores }) => {
+    if (!activeCollectionId) {
+      return;
+    }
+
+    const collection = stores.collections.get(activeCollectionId);
+    collection?.star();
+  },
+});
+
+export const unstarCollection = createAction({
+  name: ({ t }) => t("Unstar"),
+  section: CollectionSection,
+  icon: <UnstarredIcon />,
+  keywords: "unfavorite unbookmark",
+  visible: ({ activeCollectionId, stores }) => {
+    if (!activeCollectionId) {
+      return false;
+    }
+    const collection = stores.collections.get(activeCollectionId);
+    return (
+      !!collection?.isStarred &&
+      stores.policies.abilities(activeCollectionId).unstar
+    );
+  },
+  perform: ({ activeCollectionId, stores }) => {
+    if (!activeCollectionId) {
+      return;
+    }
+
+    const collection = stores.collections.get(activeCollectionId);
+    collection?.unstar();
+  },
+});
+
+export const rootCollectionActions = [
+  openCollection,
+  createCollection,
+  starCollection,
+  unstarCollection,
+];
@@ -0,0 +1,32 @@
+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];
@@ -0,0 +1,348 @@
+import invariant from "invariant";
+import {
+  DownloadIcon,
+  DuplicateIcon,
+  StarredIcon,
+  PrintIcon,
+  UnstarredIcon,
+  DocumentIcon,
+  NewDocumentIcon,
+  ShapesIcon,
+  ImportIcon,
+  PinIcon,
+  SearchIcon,
+} from "outline-icons";
+import * as React from "react";
+import 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, searchPath } from "~/utils/routeHelpers";
+
+export const openDocument = createAction({
+  name: ({ t }) => t("Open document"),
+  section: DocumentSection,
+  shortcut: ["o", "d"],
+  keywords: "go to",
+  icon: <DocumentIcon />,
+  children: ({ stores }) => {
+    const paths = stores.collections.pathsToDocuments;
+
+    return paths
+      .filter((path) => path.type === "document")
+      .map((path) => ({
+        // Note: using url which includes the slug rather than id here to bust
+        // cache if the document is renamed
+        id: path.url,
+        name: path.title,
+        icon: () =>
+          stores.documents.get(path.id)?.isStarred ? <StarredIcon /> : null,
+        section: DocumentSection,
+        perform: () => history.push(path.url),
+      }));
+  },
+});
+
+export const createDocument = createAction({
+  name: ({ t }) => t("New document"),
+  section: DocumentSection,
+  icon: <NewDocumentIcon />,
+  keywords: "create",
+  visible: ({ activeCollectionId, stores }) =>
+    !!activeCollectionId &&
+    stores.policies.abilities(activeCollectionId).update,
+  perform: ({ activeCollectionId, inStarredSection }) =>
+    activeCollectionId &&
+    history.push(newDocumentPath(activeCollectionId), {
+      starred: inStarredSection,
+    }),
+});
+
+export const starDocument = createAction({
+  name: ({ t }) => t("Star"),
+  section: DocumentSection,
+  icon: <StarredIcon />,
+  keywords: "favorite bookmark",
+  visible: ({ activeDocumentId, stores }) => {
+    if (!activeDocumentId) {
+      return false;
+    }
+    const document = stores.documents.get(activeDocumentId);
+    return (
+      !document?.isStarred && stores.policies.abilities(activeDocumentId).star
+    );
+  },
+  perform: ({ activeDocumentId, stores }) => {
+    if (!activeDocumentId) {
+      return;
+    }
+
+    const document = stores.documents.get(activeDocumentId);
+    document?.star();
+  },
+});
+
+export const unstarDocument = createAction({
+  name: ({ t }) => t("Unstar"),
+  section: DocumentSection,
+  icon: <UnstarredIcon />,
+  keywords: "unfavorite unbookmark",
+  visible: ({ activeDocumentId, stores }) => {
+    if (!activeDocumentId) {
+      return false;
+    }
+    const document = stores.documents.get(activeDocumentId);
+    return (
+      !!document?.isStarred &&
+      stores.policies.abilities(activeDocumentId).unstar
+    );
+  },
+  perform: ({ activeDocumentId, stores }) => {
+    if (!activeDocumentId) {
+      return;
+    }
+
+    const document = stores.documents.get(activeDocumentId);
+    document?.unstar();
+  },
+});
+
+export const downloadDocument = createAction({
+  name: ({ t, isContextMenu }) =>
+    isContextMenu ? t("Download") : t("Download document"),
+  section: DocumentSection,
+  icon: <DownloadIcon />,
+  keywords: "export",
+  visible: ({ activeDocumentId, stores }) =>
+    !!activeDocumentId && stores.policies.abilities(activeDocumentId).download,
+  perform: ({ activeDocumentId, stores }) => {
+    if (!activeDocumentId) {
+      return;
+    }
+
+    const document = stores.documents.get(activeDocumentId);
+    document?.download();
+  },
+});
+
+export const duplicateDocument = createAction({
+  name: ({ t, isContextMenu }) =>
+    isContextMenu ? t("Duplicate") : t("Duplicate document"),
+  section: DocumentSection,
+  icon: <DuplicateIcon />,
+  keywords: "copy",
+  visible: ({ activeDocumentId, stores }) =>
+    !!activeDocumentId && stores.policies.abilities(activeDocumentId).update,
+  perform: async ({ activeDocumentId, t, stores }) => {
+    if (!activeDocumentId) {
+      return;
+    }
+
+    const document = stores.documents.get(activeDocumentId);
+    invariant(document, "Document must exist");
+    const duped = await document.duplicate();
+    // when duplicating, go straight to the duplicated document content
+    history.push(duped.url);
+    stores.toasts.showToast(t("Document duplicated"), {
+      type: "success",
+    });
+  },
+});
+
+/**
+ * Pin a document to a collection. Pinned documents will be displayed at the top
+ * of the collection for all collection members to see.
+ */
+export const pinDocumentToCollection = createAction({
+  name: ({ t }) => t("Pin to collection"),
+  section: DocumentSection,
+  icon: <PinIcon />,
+  iconInContextMenu: false,
+  visible: ({ activeCollectionId, activeDocumentId, stores }) => {
+    if (!activeDocumentId || !activeCollectionId) {
+      return false;
+    }
+
+    const document = stores.documents.get(activeDocumentId);
+    return (
+      !!stores.policies.abilities(activeDocumentId).pin && !document?.pinned
+    );
+  },
+  perform: async ({ activeDocumentId, activeCollectionId, t, stores }) => {
+    if (!activeDocumentId || !activeCollectionId) {
+      return;
+    }
+
+    const document = stores.documents.get(activeDocumentId);
+    await document?.pin(document.collectionId);
+
+    const collection = stores.collections.get(activeCollectionId);
+
+    if (!collection || !location.pathname.startsWith(collection?.url)) {
+      stores.toasts.showToast(t("Pinned to collection"));
+    }
+  },
+});
+
+/**
+ * Pin a document to team home. Pinned documents will be displayed at the top
+ * of the home screen for all team members to see.
+ */
+export const pinDocumentToHome = createAction({
+  name: ({ t }) => t("Pin to home"),
+  section: DocumentSection,
+  icon: <PinIcon />,
+  iconInContextMenu: false,
+  visible: ({ activeDocumentId, currentTeamId, stores }) => {
+    if (!currentTeamId || !activeDocumentId) {
+      return false;
+    }
+
+    const document = stores.documents.get(activeDocumentId);
+
+    return (
+      !!stores.policies.abilities(activeDocumentId).pinToHome &&
+      !document?.pinnedToHome
+    );
+  },
+  perform: async ({ activeDocumentId, location, t, stores }) => {
+    if (!activeDocumentId) {
+      return;
+    }
+    const document = stores.documents.get(activeDocumentId);
+
+    await document?.pin();
+
+    if (location.pathname !== homePath()) {
+      stores.toasts.showToast(t("Pinned to team home"));
+    }
+  },
+});
+
+export const pinDocument = createAction({
+  name: ({ t }) => t("Pin"),
+  section: DocumentSection,
+  icon: <PinIcon />,
+  children: [pinDocumentToCollection, pinDocumentToHome],
+});
+
+export const printDocument = createAction({
+  name: ({ t, isContextMenu }) =>
+    isContextMenu ? t("Print") : t("Print document"),
+  section: DocumentSection,
+  icon: <PrintIcon />,
+  visible: ({ activeDocumentId }) => !!activeDocumentId,
+  perform: async () => {
+    window.print();
+  },
+});
+
+export const importDocument = createAction({
+  name: ({ t }) => t("Import document"),
+  section: DocumentSection,
+  icon: <ImportIcon />,
+  keywords: "upload",
+  visible: ({ activeCollectionId, activeDocumentId, stores }) => {
+    if (activeDocumentId) {
+      return !!stores.policies.abilities(activeDocumentId).createChildDocument;
+    }
+
+    if (activeCollectionId) {
+      return !!stores.policies.abilities(activeCollectionId).update;
+    }
+
+    return false;
+  },
+  perform: ({ activeCollectionId, activeDocumentId, stores }) => {
+    const { documents, toasts } = stores;
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = documents.importFileTypes.join(", ");
+
+    input.onchange = async (ev: 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 searchDocumentsForQuery = (searchQuery: string) =>
+  createAction({
+    id: "search",
+    section: DocumentSection,
+    name: ({ t }) =>
+      t(`Search documents for "{{searchQuery}}"`, { searchQuery }),
+    icon: <SearchIcon />,
+    perform: () => history.push(searchPath(searchQuery)),
+    visible: ({ location }) => location.pathname !== searchPath(),
+  });
+
+export const rootDocumentActions = [
+  openDocument,
+  createDocument,
+  createTemplate,
+  importDocument,
+  downloadDocument,
+  starDocument,
+  unstarDocument,
+  duplicateDocument,
+  printDocument,
+  pinDocumentToCollection,
+  pinDocumentToHome,
+];
@@ -0,0 +1,168 @@
+import {
+  HomeIcon,
+  SearchIcon,
+  ArchiveIcon,
+  TrashIcon,
+  EditIcon,
+  OpenIcon,
+  SettingsIcon,
+  ShapesIcon,
+  KeyboardIcon,
+  EmailIcon,
+  LogoutIcon,
+  ProfileIcon,
+} from "outline-icons";
+import * as React from "react";
+import {
+  developersUrl,
+  changelogUrl,
+  feedbackUrl,
+  githubIssuesUrl,
+} from "@shared/utils/urlHelpers";
+import stores from "~/stores";
+import SearchQuery from "~/models/SearchQuery";
+import KeyboardShortcuts from "~/scenes/KeyboardShortcuts";
+import { createAction } from "~/actions";
+import { NavigationSection, RecentSearchesSection } from "~/actions/sections";
+import history from "~/utils/history";
+import {
+  organizationSettingsPath,
+  profileSettingsPath,
+  homePath,
+  searchPath,
+  draftsPath,
+  templatesPath,
+  archivePath,
+  trashPath,
+} from "~/utils/routeHelpers";
+
+export const navigateToHome = createAction({
+  name: ({ t }) => t("Home"),
+  section: NavigationSection,
+  shortcut: ["d"],
+  icon: <HomeIcon />,
+  perform: () => history.push(homePath()),
+  visible: ({ location }) => location.pathname !== homePath(),
+});
+
+export const navigateToRecentSearchQuery = (searchQuery: SearchQuery) =>
+  createAction({
+    section: RecentSearchesSection,
+    name: searchQuery.query,
+    icon: <SearchIcon />,
+    perform: () => history.push(searchPath(searchQuery.query)),
+  });
+
+export const navigateToDrafts = createAction({
+  name: ({ t }) => t("Drafts"),
+  section: NavigationSection,
+  icon: <EditIcon />,
+  perform: () => history.push(draftsPath()),
+  visible: ({ location }) => location.pathname !== draftsPath(),
+});
+
+export const navigateToTemplates = createAction({
+  name: ({ t }) => t("Templates"),
+  section: NavigationSection,
+  icon: <ShapesIcon />,
+  perform: () => history.push(templatesPath()),
+  visible: ({ location }) => location.pathname !== templatesPath(),
+});
+
+export const navigateToArchive = createAction({
+  name: ({ t }) => t("Archive"),
+  section: NavigationSection,
+  shortcut: ["g", "a"],
+  icon: <ArchiveIcon />,
+  perform: () => history.push(archivePath()),
+  visible: ({ location }) => location.pathname !== archivePath(),
+});
+
+export const navigateToTrash = createAction({
+  name: ({ t }) => t("Trash"),
+  section: NavigationSection,
+  icon: <TrashIcon />,
+  perform: () => history.push(trashPath()),
+  visible: ({ location }) => location.pathname !== trashPath(),
+});
+
+export const navigateToSettings = createAction({
+  name: ({ t }) => t("Settings"),
+  section: NavigationSection,
+  shortcut: ["g", "s"],
+  icon: <SettingsIcon />,
+  perform: () => history.push(organizationSettingsPath()),
+});
+
+export const navigateToProfileSettings = createAction({
+  name: ({ t }) => t("Profile"),
+  section: NavigationSection,
+  iconInContextMenu: false,
+  icon: <ProfileIcon />,
+  perform: () => history.push(profileSettingsPath()),
+});
+
+export const openAPIDocumentation = createAction({
+  name: ({ t }) => t("API documentation"),
+  section: NavigationSection,
+  iconInContextMenu: false,
+  icon: <OpenIcon />,
+  perform: () => window.open(developersUrl()),
+});
+
+export const openFeedbackUrl = createAction({
+  name: ({ t }) => t("Send us feedback"),
+  section: NavigationSection,
+  iconInContextMenu: false,
+  icon: <EmailIcon />,
+  perform: () => window.open(feedbackUrl()),
+});
+
+export const openBugReportUrl = createAction({
+  name: ({ t }) => t("Report a bug"),
+  section: NavigationSection,
+  perform: () => window.open(githubIssuesUrl()),
+});
+
+export const openChangelog = createAction({
+  name: ({ t }) => t("Changelog"),
+  section: NavigationSection,
+  iconInContextMenu: false,
+  icon: <OpenIcon />,
+  perform: () => window.open(changelogUrl()),
+});
+
+export const openKeyboardShortcuts = createAction({
+  name: ({ t }) => t("Keyboard shortcuts"),
+  section: NavigationSection,
+  shortcut: ["?"],
+  iconInContextMenu: false,
+  icon: <KeyboardIcon />,
+  perform: ({ t }) => {
+    stores.dialogs.openGuide({
+      title: t("Keyboard shortcuts"),
+      content: <KeyboardShortcuts />,
+    });
+  },
+});
+
+export const logout = createAction({
+  name: ({ t }) => t("Log out"),
+  section: NavigationSection,
+  icon: <LogoutIcon />,
+  perform: () => stores.auth.logout(),
+});
+
+export const rootNavigationActions = [
+  navigateToHome,
+  navigateToDrafts,
+  navigateToTemplates,
+  navigateToArchive,
+  navigateToTrash,
+  openAPIDocumentation,
+  openFeedbackUrl,
+  openBugReportUrl,
+  openChangelog,
+  openKeyboardShortcuts,
+  logout,
+];
@@ -0,0 +1,49 @@
+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];
@@ -0,0 +1,23 @@
+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];
@@ -0,0 +1,108 @@
+import { flattenDeep } from "lodash";
+import * as React from "react";
+import { Optional } from "utility-types";
+import { v4 as uuidv4 } from "uuid";
+import {
+  Action,
+  ActionContext,
+  CommandBarAction,
+  MenuItemButton,
+  MenuItemWithChildren,
+} from "~/types";
+
+export function createAction(definition: Optional<Action, "id">): Action {
+  return {
+    ...definition,
+    id: uuidv4(),
+  };
+}
+
+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) {
+    const items = resolvedChildren
+      .map((a) => actionToMenuItem(a, context))
+      .filter(Boolean)
+      .filter((a) => a.visible);
+
+    return {
+      type: "submenu",
+      title,
+      icon,
+      items,
+      visible: visible && items.length > 0,
+    };
+  }
+
+  return {
+    type: "button",
+    title,
+    icon,
+    visible,
+    onClick: () => action.perform && action.perform(context),
+    selected: action.selected ? action.selected(context) : undefined,
+  };
+}
+
+export function actionToKBar(
+  action: Action,
+  context: ActionContext
+): CommandBarAction[] {
+  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?.(context) : undefined,
+    },
+    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
+  ].concat(children.map((child) => ({ ...child, parent: action.id })));
+}
@@ -0,0 +1,15 @@
+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,
+];
@@ -0,0 +1,16 @@
+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");
+
+export const RecentSearchesSection = ({ t }: ActionContext) =>
+  t("Recent searches");
@@ -0,0 +1,73 @@
+import * as React from "react";
+import Tooltip, { Props as TooltipProps } from "~/components/Tooltip";
+import { Action, ActionContext } from "~/types";
+
+export type Props = {
+  /** Show the button in a disabled state */
+  disabled?: boolean;
+  /** Hide the button entirely if action is not applicable */
+  hideOnActionDisabled?: boolean;
+  /** Action to use on button */
+  action?: Action;
+  /** Context of action, must be provided with action */
+  context?: ActionContext;
+  /** If tooltip props are provided the button will be wrapped in a tooltip */
+  tooltip?: Omit<TooltipProps, "children">;
+};
+
+/**
+ * Button that can be used to trigger an action definition.
+ */
+const ActionButton = React.forwardRef(
+  (
+    {
+      action,
+      context,
+      tooltip,
+      hideOnActionDisabled,
+      ...rest
+    }: Props & React.HTMLAttributes<HTMLButtonElement>,
+    ref: React.Ref<HTMLButtonElement>
+  ) => {
+    const disabled = rest.disabled;
+
+    if (!context || !action) {
+      return <button {...rest} ref={ref} />;
+    }
+
+    if (action?.visible && !action.visible(context) && hideOnActionDisabled) {
+      return null;
+    }
+
+    const label =
+      typeof action.name === "function" ? action.name(context) : action.name;
+
+    const button = (
+      <button
+        {...rest}
+        aria-label={label}
+        disabled={disabled}
+        ref={ref}
+        onClick={
+          action?.perform && context
+            ? (ev) => {
+                ev.preventDefault();
+                ev.stopPropagation();
+                action.perform?.(context);
+              }
+            : rest.onClick
+        }
+      >
+        {rest.children ?? label}
+      </button>
+    );
+
+    if (tooltip) {
+      return <Tooltip {...tooltip}>{button}</Tooltip>;
+    }
+
+    return button;
+  }
+);
+
+export default ActionButton;
@@ -1,7 +1,6 @@
-// @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,32 +1,26 @@
-// @flow
 /* global ga */
 import * as React from "react";
-import env from "env";
+import env from "~/env";

-type Props = {
-  children?: React.Node,
-};
-
-export default class Analytics extends React.Component<Props> {
+export default class Analytics extends React.Component {
  componentDidMount() {
    if (!env.GOOGLE_ANALYTICS_ID) {
-      return null;
+      return;
    }

    // standard Google Analytics script
    window.ga =
      window.ga ||
-      function () {
-        // $FlowIssue
-        (ga.q = ga.q || []).push(arguments);
+      function (...args) {
+        (ga.q = ga.q || []).push(args);
      };

-    // $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,4 +1,3 @@
-// @flow
 import * as React from "react";

 export default function Arrow() {
@@ -0,0 +1,51 @@
+import { observer } from "mobx-react";
+import * as React from "react";
+import {
+  useCompositeState,
+  Composite,
+  CompositeStateReturn,
+} from "reakit/Composite";
+
+type Props = {
+  children: (composite: CompositeStateReturn) => React.ReactNode;
+  onEscape?: (ev: React.KeyboardEvent<HTMLDivElement>) => void;
+};
+
+function ArrowKeyNavigation(
+  { children, onEscape, ...rest }: Props,
+  ref: React.RefObject<HTMLDivElement>
+) {
+  const composite = useCompositeState();
+
+  const handleKeyDown = React.useCallback(
+    (ev) => {
+      if (onEscape) {
+        if (ev.key === "Escape") {
+          onEscape(ev);
+        }
+
+        if (
+          ev.key === "ArrowUp" &&
+          composite.currentId === composite.items[0].id
+        ) {
+          onEscape(ev);
+        }
+      }
+    },
+    [composite.currentId, composite.items, onEscape]
+  );
+
+  return (
+    <Composite
+      {...rest}
+      {...composite}
+      onKeyDown={handleKeyDown}
+      role="menu"
+      ref={ref}
+    >
+      {children(composite)}
+    </Composite>
+  );
+}
+
+export default observer(React.forwardRef(ArrowKeyNavigation));
@@ -1,10 +1,9 @@
-// @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,10 +1,9 @@
-// @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,10 +1,9 @@
-// @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,14 +1,13 @@
-// @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) {
@@ -18,18 +17,21 @@ 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,22 +1,21 @@
-// @flow
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Redirect } from "react-router-dom";
-import { isCustomSubdomain } from "shared/utils/domains";
-import LoadingIndicator from "components/LoadingIndicator";
-import useStores from "../hooks/useStores";
-import { changeLanguage } from "../utils/language";
-import env from "env";
+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";

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

 const Authenticated = ({ children }: Props) => {
  const { auth } = useStores();
  const { i18n } = useTranslation();
-  const language = auth.user && auth.user.language;
+  const language = auth.user?.language;

  // Watching for language changes here as this is the earliest point we have
  // the user available and means we can start loading translations faster
@@ -0,0 +1,106 @@
+import { observable } from "mobx";
+import { observer } from "mobx-react";
+import * as React from "react";
+import { withTranslation, WithTranslation } from "react-i18next";
+import { Switch, Route } from "react-router-dom";
+import RootStore from "~/stores/RootStore";
+import ErrorSuspended from "~/scenes/ErrorSuspended";
+import Layout from "~/components/Layout";
+import RegisterKeyDown from "~/components/RegisterKeyDown";
+import Sidebar from "~/components/Sidebar";
+import SettingsSidebar from "~/components/Sidebar/Settings";
+import history from "~/utils/history";
+import {
+  searchPath,
+  matchDocumentSlug as slug,
+  newDocumentPath,
+  settingsPath,
+} from "~/utils/routeHelpers";
+import Fade from "./Fade";
+import withStores from "./withStores";
+
+const DocumentHistory = React.lazy(
+  () =>
+    import(
+      /* webpackChunkName: "document-history" */
+      "~/components/DocumentHistory"
+    )
+);
+const CommandBar = React.lazy(
+  () =>
+    import(
+      /* webpackChunkName: "command-bar" */
+      "~/components/CommandBar"
+    )
+);
+
+type Props = WithTranslation & RootStore;
+
+@observer
+class AuthenticatedLayout extends React.Component<Props> {
+  scrollable: HTMLDivElement | null | undefined;
+
+  @observable
+  keyboardShortcutsOpen = false;
+
+  goToSearch = (ev: KeyboardEvent) => {
+    if (!ev.metaKey && !ev.ctrlKey) {
+      ev.preventDefault();
+      ev.stopPropagation();
+      history.push(searchPath());
+    }
+  };
+
+  goToNewDocument = () => {
+    const { activeCollectionId } = this.props.ui;
+    if (!activeCollectionId) {
+      return;
+    }
+    const can = this.props.policies.abilities(activeCollectionId);
+    if (!can.update) {
+      return;
+    }
+    history.push(newDocumentPath(activeCollectionId));
+  };
+
+  render() {
+    const { auth } = this.props;
+    const { user, team } = auth;
+    const showSidebar = auth.authenticated && user && team;
+    if (auth.isSuspended) {
+      return <ErrorSuspended />;
+    }
+
+    const sidebar = showSidebar ? (
+      <Fade>
+        <Switch>
+          <Route path={settingsPath()} component={SettingsSidebar} />
+          <Route component={Sidebar} />
+        </Switch>
+      </Fade>
+    ) : undefined;
+
+    const rightRail = (
+      <React.Suspense fallback={null}>
+        <Switch>
+          <Route
+            path={`/doc/${slug}/history/:revisionId?`}
+            component={DocumentHistory}
+          />
+        </Switch>
+      </React.Suspense>
+    );
+
+    return (
+      <Layout title={team?.name} sidebar={sidebar} rightRail={rightRail}>
+        <RegisterKeyDown trigger="n" handler={this.goToNewDocument} />
+        <RegisterKeyDown trigger="t" handler={this.goToSearch} />
+        <RegisterKeyDown trigger="/" handler={this.goToSearch} />
+        {this.props.children}
+        <CommandBar />
+      </Layout>
+    );
+  }
+}
+
+export default withTranslation()(withStores(AuthenticatedLayout));
@@ -1,23 +1,25 @@
-// @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.Node,
-  user?: User,
-  onClick?: () => void,
-  className?: string,
-|};
+type Props = {
+  src: string;
+  size: number;
+  icon?: React.ReactNode;
+  user?: User;
+  alt?: string;
+  showBorder?: boolean;
+  onClick?: React.MouseEventHandler<HTMLImageElement>;
+  className?: string;
+};

@observer
 class Avatar extends React.Component<Props> {
-  @observable error: boolean;
+  @observable
+  error: boolean;

  static defaultProps = {
    size: 24,
@@ -28,13 +30,13 @@ class Avatar extends React.Component<Props> {
  };

  render() {
-    const { src, icon, ...rest } = this.props;
-
+    const { src, icon, showBorder, ...rest } = this.props;
    return (
      <AvatarWrapper>
        <CircleImg
          onError={this.handleError}
          src={this.error ? placeholder : src}
+          $showBorder={showBorder}
          {...rest}
        />
        {icon && <IconWrapper>{icon}</IconWrapper>}
@@ -59,12 +61,14 @@ const IconWrapper = styled.div`
  height: 20px;
 `;

-const CircleImg = styled.img`
+const CircleImg = styled.img<{ size: number; $showBorder?: boolean }>`
  display: block;
  width: ${(props) => props.size}px;
  height: ${(props) => props.size}px;
  border-radius: 50%;
-  border: 2px solid ${(props) => props.theme.background};
+  border: 2px solid
+    ${(props) =>
+      props.$showBorder === false ? "transparent" : props.theme.background};
  flex-shrink: 0;
 `;

@@ -1,91 +0,0 @@
-// @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);
@@ -0,0 +1,141 @@
+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 @@
-// @flow
+import { transparentize } from "polished";
 import styled from "styled-components";

-const Badge = styled.span`
+const Badge = styled.span<{ yellow?: boolean; primary?: boolean }>`
  margin-left: 10px;
  padding: 1px 5px 2px;
  background-color: ${({ yellow, primary, theme }) =>
@@ -10,8 +10,10 @@ const Badge = styled.span`
    primary ? theme.white : yellow ? theme.almostBlack : theme.textTertiary};
  border: 1px solid
    ${({ primary, yellow, theme }) =>
-      primary || yellow ? "transparent" : theme.textTertiary};
-  border-radius: 8px;
+      primary || yellow
+        ? "transparent"
+        : transparentize(0.4, theme.textTertiary)};
+  border-radius: 10px;
  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,9 +18,8 @@ function Branding({ href = env.URL }: Props) {
 }

 const Link = styled.a`
-  position: fixed;
-  bottom: 0;
-  left: 0;
+  justify-content: center;
+  padding-bottom: 16px;

  font-weight: 600;
  font-size: 14px;
@@ -29,7 +28,6 @@ const Link = styled.a`
  color: ${(props) => props.theme.text};
  display: flex;
  align-items: center;
-  padding: 16px;

  svg {
    fill: ${(props) => props.theme.text};
@@ -38,6 +36,14 @@ 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,35 +1,36 @@
-// @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 Flex from "~/components/Flex";
+import BreadcrumbMenu from "~/menus/BreadcrumbMenu";
+import { MenuInternalLink } from "~/types";

-type MenuItem = {|
-  icon?: React.Node,
-  title: React.Node,
-  to?: string,
-|};
+type Props = {
+  items: MenuInternalLink[];
+  max?: number;
+  highlightFirstItem?: boolean;
+};

-type Props = {|
-  items: MenuItem[],
-  max?: number,
-  children?: React.Node,
-  highlightFirstItem?: boolean,
-|};
-
-function Breadcrumb({ items, highlightFirstItem, children, max = 2 }: Props) {
+function Breadcrumb({
+  items,
+  highlightFirstItem,
+  children,
+  max = 2,
+}: React.PropsWithChildren<Props>) {
  const totalItems = items.length;
-  let topLevelItems: MenuItem[] = [...items];
+  const topLevelItems: MenuInternalLink[] = [...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, {
-      title: <BreadcrumbMenu items={overflowItems} />,
+      to: "",
+      type: "route",
+      title: <BreadcrumbMenu items={overflowItems as MenuInternalLink[]} />,
    });
  }

@@ -42,7 +43,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>
@@ -62,7 +63,7 @@ const Slash = styled(GoToIcon)`
  fill: ${(props) => props.theme.divider};
 `;

-const Item = styled(Link)`
+const Item = styled(Link)<{ $highlight: boolean; $withIcon: boolean }>`
  display: flex;
  flex-shrink: 1;
  min-width: 0;
@@ -1,39 +0,0 @@
-// @flow
-import * as React from "react";
-import styled from "styled-components";
-import { bounceIn } from "styles/animations";
-
-type Props = {|
-  count: number,
-|};
-
-const Bubble = ({ count }: Props) => {
-  if (!count) {
-    return null;
-  }
-
-  return <Count>{count}</Count>;
-};
-
-const Count = styled.div`
-  animation: ${bounceIn} 600ms;
-  transform-origin: center center;
-  color: ${(props) => props.theme.white};
-  background: ${(props) => props.theme.slateDark};
-  display: inline-block;
-  font-feature-settings: "tnum";
-  font-weight: 600;
-  font-size: 9px;
-  white-space: nowrap;
-  vertical-align: baseline;
-  min-width: 16px;
-  min-height: 16px;
-  line-height: 16px;
-  border-radius: 8px;
-  text-align: center;
-  padding: 0 4px;
-  margin-left: 8px;
-  user-select: none;
-`;
-
-export default Bubble;
@@ -1,165 +0,0 @@
-// @flow
-import { ExpandedIcon } from "outline-icons";
-import { darken } from "polished";
-import * as React from "react";
-import styled from "styled-components";
-
-const RealButton = styled.button`
-  display: ${(props) => (props.fullwidth ? "block" : "inline-block")};
-  width: ${(props) => (props.fullwidth ? "100%" : "auto")};
-  margin: 0;
-  padding: 0;
-  border: 0;
-  background: ${(props) => props.theme.buttonBackground};
-  color: ${(props) => props.theme.buttonText};
-  box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px;
-  border-radius: 4px;
-  font-size: 14px;
-  font-weight: 500;
-  height: 32px;
-  text-decoration: none;
-  flex-shrink: 0;
-  cursor: pointer;
-  user-select: none;
-
-  ${(props) =>
-    !props.borderOnHover &&
-    `
-      svg {
-        fill: ${props.iconColor || props.theme.buttonText};
-      }
-    `}
-
-  &::-moz-focus-inner {
-    padding: 0;
-    border: 0;
-  }
-
-  &:hover {
-    background: ${(props) => darken(0.05, props.theme.buttonBackground)};
-  }
-
-  &:disabled {
-    cursor: default;
-    pointer-events: none;
-    color: ${(props) => props.theme.white50};
-  }
-
-  ${(props) =>
-    props.$neutral &&
-    `
-    background: ${props.theme.buttonNeutralBackground};
-    color: ${props.theme.buttonNeutralText};
-    box-shadow: ${
-      props.borderOnHover
-        ? "none"
-        : `rgba(0, 0, 0, 0.07) 0px 1px 2px, ${props.theme.buttonNeutralBorder} 0 0 0 1px inset`
-    };
-
-    ${
-      props.borderOnHover
-        ? ""
-        : `svg {
-      fill: ${props.iconColor || props.theme.buttonNeutralText};
-    }`
-    }
-    
-
-    &:hover {
-      background: ${darken(0.05, props.theme.buttonNeutralBackground)};
-      box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, ${
-        props.theme.buttonNeutralBorder
-      } 0 0 0 1px inset;
-    }
-
-    &:disabled {
-      color: ${props.theme.textTertiary};
-    }
-  `} ${(props) =>
-    props.danger &&
-    `
-      background: ${props.theme.danger};
-      color: ${props.theme.white};
-
-      &:hover {
-        background: ${darken(0.05, props.theme.danger)};
-      }
-  `};
-`;
-
-const Label = styled.span`
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-
-  ${(props) => props.hasIcon && "padding-left: 4px;"};
-`;
-
-export const Inner = styled.span`
-  display: flex;
-  padding: 0 8px;
-  padding-right: ${(props) => (props.disclosure ? 2 : 8)}px;
-  line-height: ${(props) => (props.hasIcon ? 24 : 32)}px;
-  justify-content: center;
-  align-items: center;
-  min-height: 32px;
-
-  ${(props) => props.hasIcon && props.hasText && "padding-left: 4px;"};
-  ${(props) => props.hasIcon && !props.hasText && "padding: 0 4px;"};
-`;
-
-export type Props = {|
-  type?: "button" | "submit",
-  value?: string,
-  icon?: React.Node,
-  iconColor?: string,
-  className?: string,
-  children?: React.Node,
-  innerRef?: React.ElementRef<any>,
-  disclosure?: boolean,
-  neutral?: boolean,
-  danger?: boolean,
-  primary?: boolean,
-  disabled?: boolean,
-  fullwidth?: boolean,
-  autoFocus?: boolean,
-  style?: Object,
-  as?: React.ComponentType<any>,
-  to?: string,
-  onClick?: (event: SyntheticEvent<>) => mixed,
-  borderOnHover?: boolean,
-
-  "data-on"?: string,
-  "data-event-category"?: string,
-  "data-event-action"?: string,
-|};
-
-const Button = React.forwardRef<Props, HTMLButtonElement>(
-  (
-    {
-      type = "text",
-      icon,
-      children,
-      value,
-      disclosure,
-      neutral,
-      ...rest
-    }: Props,
-    innerRef
-  ) => {
-    const hasText = children !== undefined || value !== undefined;
-    const hasIcon = icon !== undefined;
-
-    return (
-      <RealButton type={type} ref={innerRef} $neutral={neutral} {...rest}>
-        <Inner hasIcon={hasIcon} hasText={hasText} disclosure={disclosure}>
-          {hasIcon && icon}
-          {hasText && <Label hasIcon={hasIcon}>{children || value}</Label>}
-          {disclosure && <ExpandedIcon />}
-        </Inner>
-      </RealButton>
-    );
-  }
-);
-
-export default Button;
@@ -0,0 +1,185 @@
+import { ExpandedIcon } from "outline-icons";
+import { darken, lighten } from "polished";
+import * as React from "react";
+import styled from "styled-components";
+
+const RealButton = styled.button<{
+  fullwidth?: boolean;
+  borderOnHover?: boolean;
+  $neutral?: boolean;
+  danger?: boolean;
+  iconColor?: string;
+}>`
+  display: ${(props) => (props.fullwidth ? "block" : "inline-block")};
+  width: ${(props) => (props.fullwidth ? "100%" : "auto")};
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: ${(props) => props.theme.buttonBackground};
+  color: ${(props) => props.theme.buttonText};
+  box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 500;
+  height: 32px;
+  text-decoration: none;
+  flex-shrink: 0;
+  cursor: pointer;
+  user-select: none;
+  appearance: none !important;
+
+  ${(props) =>
+    !props.borderOnHover &&
+    `
+      svg {
+        fill: ${props.iconColor || "currentColor"};
+      }
+    `}
+
+  &::-moz-focus-inner {
+    padding: 0;
+    border: 0;
+  }
+
+  &:hover:not(:disabled),
+  &[aria-expanded="true"] {
+    background: ${(props) => darken(0.05, props.theme.buttonBackground)};
+  }
+
+  &:disabled {
+    cursor: default;
+    pointer-events: none;
+    color: ${(props) => props.theme.white50};
+    background: ${(props) => lighten(0.2, props.theme.buttonBackground)};
+
+    svg {
+      fill: ${(props) => props.theme.white50};
+    }
+  }
+
+  ${(props) =>
+    props.$neutral &&
+    `
+    background: ${props.theme.buttonNeutralBackground};
+    color: ${props.theme.buttonNeutralText};
+    box-shadow: ${
+      props.borderOnHover
+        ? "none"
+        : `rgba(0, 0, 0, 0.07) 0px 1px 2px, ${props.theme.buttonNeutralBorder} 0 0 0 1px inset`
+    };
+
+    ${
+      props.borderOnHover
+        ? ""
+        : `svg {
+      fill: ${props.iconColor || "currentColor"};
+    }`
+    }
+
+
+    &:hover:not(:disabled),
+    &[aria-expanded="true"] {
+      background: ${
+        props.borderOnHover
+          ? props.theme.buttonNeutralBackground
+          : darken(0.05, props.theme.buttonNeutralBackground)
+      };
+      box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, ${
+        props.theme.buttonNeutralBorder
+      } 0 0 0 1px inset;
+    }
+
+    &:disabled {
+      color: ${props.theme.textTertiary};
+      background: none;
+
+      svg {
+        fill: currentColor;
+      }
+    }
+  `}
+
+  ${(props) =>
+    props.danger &&
+    `
+      background: ${props.theme.danger};
+      color: ${props.theme.white};
+
+      &:hover:not(:disabled),
+      &[aria-expanded="true"] {
+        background: ${darken(0.05, props.theme.danger)};
+      }
+
+      &:disabled {
+        background: none;
+      }
+
+      &.focus-visible {
+        outline-color: ${darken(0.2, props.theme.danger)} !important;
+      }
+  `};
+`;
+
+const Label = styled.span<{ hasIcon?: boolean }>`
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+
+  ${(props) => props.hasIcon && "padding-left: 4px;"};
+`;
+
+export const Inner = styled.span<{
+  disclosure?: boolean;
+  hasIcon?: boolean;
+  hasText?: boolean;
+}>`
+  display: flex;
+  padding: 0 8px;
+  padding-right: ${(props) => (props.disclosure ? 2 : 8)}px;
+  line-height: ${(props) => (props.hasIcon ? 24 : 32)}px;
+  justify-content: center;
+  align-items: center;
+  min-height: 32px;
+
+  ${(props) => props.hasIcon && props.hasText && "padding-left: 4px;"};
+  ${(props) => props.hasIcon && !props.hasText && "padding: 0 4px;"};
+`;
+
+export type Props<T> = {
+  icon?: React.ReactNode;
+  iconColor?: string;
+  children?: React.ReactNode;
+  disclosure?: boolean;
+  neutral?: boolean;
+  danger?: boolean;
+  primary?: boolean;
+  fullwidth?: boolean;
+  as?: T;
+  to?: string;
+  borderOnHover?: boolean;
+  href?: string;
+  "data-on"?: string;
+  "data-event-category"?: string;
+  "data-event-action"?: string;
+};
+
+const Button = <T extends React.ElementType = "button">(
+  props: Props<T> & React.ComponentPropsWithoutRef<T>,
+  ref: React.Ref<HTMLButtonElement>
+) => {
+  const { type, icon, children, value, disclosure, neutral, ...rest } = props;
+  const hasText = children !== undefined || value !== undefined;
+  const hasIcon = icon !== undefined;
+
+  return (
+    <RealButton type={type || "button"} ref={ref} $neutral={neutral} {...rest}>
+      <Inner hasIcon={hasIcon} hasText={hasText} disclosure={disclosure}>
+        {hasIcon && icon}
+        {hasText && <Label hasIcon={hasIcon}>{children || value}</Label>}
+        {disclosure && <ExpandedIcon color="currentColor" />}
+      </Inner>
+    </RealButton>
+  );
+};
+
+export default React.forwardRef(Button);
@@ -1,4 +1,3 @@
-// @flow
 import styled from "styled-components";
 import Button, { Inner } from "./Button";

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

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

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

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

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

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

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

@@ -27,7 +26,7 @@ const Content = styled.div`
  `};
 `;

-const CenteredContent = ({ children, ...rest }: Props) => {
+const CenteredContent: React.FC<Props> = ({ children, ...rest }) => {
  return (
    <Container {...rest}>
      <Content>{children}</Content>
@@ -1,65 +0,0 @@
-// @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,8 +1,7 @@
-// @flow
 import React from "react";
 import styled, { useTheme } from "styled-components";

-const cleanPercentage = (percentage) => {
+const cleanPercentage = (percentage: number) => {
  const tooLow = !Number.isFinite(+percentage) || percentage < 0;
  const tooHigh = percentage > 100;
  return tooLow ? 0 : tooHigh ? 100 : +percentage;
@@ -13,13 +12,14 @@ 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,7 +39,9 @@ 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>
  );
 };
@@ -48,8 +50,8 @@ const CircularProgressBar = ({
  percentage,
  size = 16,
 }: {
-  percentage: number,
-  size?: number,
+  percentage: number;
+  size?: number;
 }) => {
  const theme = useTheme();
  percentage = cleanPercentage(percentage);
@@ -1,7 +1,6 @@
-// @flow
 import styled from "styled-components";

-const ClickablePadding = styled.div`
+const ClickablePadding = styled.div<{ grow?: boolean }>`
  min-height: 10em;
  cursor: ${({ onClick }) => (onClick ? "text" : "default")};
  ${({ grow }) => grow && `flex-grow: 100;`};
@@ -1,109 +0,0 @@
-// @flow
-import { sortBy, filter, uniq } from "lodash";
-import { observer } from "mobx-react";
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-import { usePopoverState, PopoverDisclosure } from "reakit/Popover";
-import styled from "styled-components";
-import breakpoint from "styled-components-breakpoint";
-import Document from "models/Document";
-import { AvatarWithPresence } from "components/Avatar";
-import DocumentViews from "components/DocumentViews";
-import Facepile from "components/Facepile";
-import NudeButton from "components/NudeButton";
-import Popover from "components/Popover";
-import useStores from "hooks/useStores";
-
-type Props = {|
-  document: Document,
-  currentUserId: string,
-|};
-
-function Collaborators(props: Props) {
-  const { t } = useTranslation();
-  const { users, presence } = useStores();
-  const { document, currentUserId } = props;
-
-  let documentPresence = presence.get(document.id);
-  documentPresence = documentPresence
-    ? Array.from(documentPresence.values())
-    : [];
-
-  const presentIds = documentPresence.map((p) => p.userId);
-  const editingIds = documentPresence
-    .filter((p) => p.isEditing)
-    .map((p) => p.userId);
-
-  // ensure currently present via websocket are always ordered first
-  const collaborators = React.useMemo(
-    () =>
-      sortBy(
-        filter(
-          users.orderedData,
-          (user) =>
-            presentIds.includes(user.id) ||
-            document.collaboratorIds.includes(user.id)
-        ),
-        (user) => presentIds.includes(user.id)
-      ),
-    [document.collaboratorIds, users.orderedData, presentIds]
-  );
-
-  // load any users we don't know about
-  React.useEffect(() => {
-    if (users.isFetching) {
-      return;
-    }
-
-    uniq([...document.collaboratorIds, ...presentIds]).forEach((userId) => {
-      if (!users.get(userId)) {
-        return users.fetch(userId);
-      }
-    });
-  }, [document, users, presentIds, document.collaboratorIds]);
-
-  const popover = usePopoverState({
-    gutter: 0,
-    placement: "bottom-end",
-  });
-
-  return (
-    <>
-      <PopoverDisclosure {...popover}>
-        {(props) => (
-          <NudeButton width={collaborators.length * 32} height={32} {...props}>
-            <FacepileHiddenOnMobile
-              users={collaborators}
-              renderAvatar={(user) => {
-                const isPresent = presentIds.includes(user.id);
-                const isEditing = editingIds.includes(user.id);
-
-                return (
-                  <AvatarWithPresence
-                    key={user.id}
-                    user={user}
-                    isPresent={isPresent}
-                    isEditing={isEditing}
-                    isCurrentUser={currentUserId === user.id}
-                    profileOnClick={false}
-                  />
-                );
-              }}
-            />
-          </NudeButton>
-        )}
-      </PopoverDisclosure>
-      <Popover {...popover} width={300} aria-label={t("Viewers")} tabIndex={0}>
-        <DocumentViews document={document} isOpen={popover.visible} />
-      </Popover>
-    </>
-  );
-}
-
-const FacepileHiddenOnMobile = styled(Facepile)`
-  ${breakpoint("mobile", "tablet")`
-    display: none;
-  `};
-`;
-
-export default observer(Collaborators);
@@ -0,0 +1,124 @@
+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,31 +1,31 @@
-// @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 usePolicy from "~/hooks/usePolicy";
+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();
+  const { collections } = useStores();
  const { showToast } = useToasts();
  const { t } = useTranslation();
  const [isExpanded, setExpanded] = React.useState(false);
  const [isEditing, setEditing] = React.useState(false);
  const [isDirty, setDirty] = React.useState(false);
-  const can = policies.abilities(collection.id);
+  const can = usePolicy(collection.id);

  const handleStartEditing = React.useCallback(() => {
    setEditing(true);
@@ -40,6 +40,7 @@ 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,21 +76,26 @@ 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
-        $isEditable={can.update}
-        data-editing={isEditing}
-        data-expanded={isExpanded}
-      >
+      <Input data-editing={isEditing} data-expanded={isExpanded}>
        <span onClick={can.update ? handleStartEditing : undefined}>
          {collections.isSaving && <LoadingIndicator />}
          {collection.hasDescription || isEditing || isDirty ? (
-            <React.Suspense fallback={<Placeholder>Loading…</Placeholder>}>
+            <React.Suspense
+              fallback={
+                <Placeholder
+                  onClick={() => {
+                    //
+                  }}
+                >
+                  Loading…
+                </Placeholder>
+              }
+            >
              <Editor
                key={key}
                defaultValue={collection.description || ""}
@@ -99,13 +105,21 @@ function CollectionDescription({ collection }: Props) {
                autoFocus={isEditing}
                onBlur={handleStopEditing}
                maxLength={1000}
-                disableEmbeds
+                embedsDisabled
                readOnlyWriteCheckboxes
                grow
              />
            </React.Suspense>
          ) : (
-            can.update && <Placeholder>{placeholder}</Placeholder>
+            can.update && (
+              <Placeholder
+                onClick={() => {
+                  //
+                }}
+              >
+                {placeholder}
+              </Placeholder>
+            )
          )}
        </span>
      </Input>
@@ -1,29 +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,
+  collection: Collection;
+  expanded?: boolean;
+  size?: number;
+  color?: string;
 };

-function ResolvedCollectionIcon({ collection, expanded, size }: Props) {
+function ResolvedCollectionIcon({
+  collection,
+  color: inputColor,
+  expanded,
+  size,
+}: Props) {
  const { ui } = useStores();

  // If the chosen icon color is very dark then we invert it in dark mode
  // otherwise it will be impossible to see against the dark background.
  const color =
-    ui.resolvedTheme === "dark" && collection.color !== "currentColor"
-      ? getLuminance(collection.color) > 0.12
+    inputColor ||
+    (ui.resolvedTheme === "dark" && collection.color !== "currentColor"
+      ? getLuminance(collection.color) > 0.09
        ? collection.color
        : "currentColor"
-      : collection.color;
+      : collection.color);

  if (collection.icon && collection.icon !== "collection") {
    try {
@@ -0,0 +1,130 @@
+import { useKBar, KBarPositioner, KBarAnimator, KBarSearch } from "kbar";
+import { observer } from "mobx-react";
+import { QuestionMarkIcon } from "outline-icons";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { Portal } from "react-portal";
+import styled from "styled-components";
+import breakpoint from "styled-components-breakpoint";
+import CommandBarResults from "~/components/CommandBarResults";
+import SearchActions from "~/components/SearchActions";
+import rootActions from "~/actions/root";
+import useCommandBarActions from "~/hooks/useCommandBarActions";
+import useSettingsActions from "~/hooks/useSettingsAction";
+import useStores from "~/hooks/useStores";
+import { CommandBarAction } from "~/types";
+import { metaDisplay } from "~/utils/keyboard";
+import Text from "./Text";
+
+function CommandBar() {
+  const { t } = useTranslation();
+  const { ui } = useStores();
+  const settingsActions = useSettingsActions();
+  const commandBarActions = React.useMemo(
+    () => [...rootActions, settingsActions],
+    [settingsActions]
+  );
+
+  useCommandBarActions(commandBarActions);
+
+  const { rootAction } = useKBar((state) => ({
+    rootAction: state.currentRootActionId
+      ? ((state.actions[
+          state.currentRootActionId
+        ] as unknown) as CommandBarAction)
+      : undefined,
+  }));
+
+  return (
+    <>
+      <SearchActions />
+      <KBarPortal>
+        <Positioner>
+          <Animator>
+            <SearchInput
+              placeholder={`${
+                rootAction?.placeholder ||
+                rootAction?.name ||
+                t("Type a command or search")
+              }…`}
+            />
+            <CommandBarResults />
+            {ui.commandBarOpenedFromSidebar && (
+              <Hint size="small" type="tertiary">
+                <QuestionMarkIcon size={18} color="currentColor" />
+                {t(
+                  "Open search from anywhere with the {{ shortcut }} shortcut",
+                  {
+                    shortcut: `${metaDisplay} + k`,
+                  }
+                )}
+              </Hint>
+            )}
+          </Animator>
+        </Positioner>
+      </KBarPortal>
+    </>
+  );
+}
+
+const KBarPortal: React.FC = ({ children }) => {
+  const { showing } = useKBar((state) => ({
+    showing: state.visualState !== "hidden",
+  }));
+
+  if (!showing) {
+    return null;
+  }
+
+  return <Portal>{children}</Portal>;
+};
+
+const Hint = styled(Text)`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  border-top: 1px solid ${(props) => props.theme.background};
+  margin: 1px 0 0;
+  padding: 6px 16px;
+  width: 100%;
+`;
+
+const Positioner = styled(KBarPositioner)`
+  z-index: ${(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);
@@ -0,0 +1,122 @@
+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);
@@ -0,0 +1,35 @@
+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;
+`;
@@ -0,0 +1,58 @@
+import { observer } from "mobx-react";
+import { DisconnectedIcon } from "outline-icons";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import styled, { useTheme } from "styled-components";
+import breakpoint from "styled-components-breakpoint";
+import Fade from "~/components/Fade";
+import NudeButton from "~/components/NudeButton";
+import Tooltip from "~/components/Tooltip";
+import useStores from "~/hooks/useStores";
+
+function ConnectionStatus() {
+  const { ui } = useStores();
+  const theme = useTheme();
+  const { t } = useTranslation();
+
+  return ui.multiplayerStatus === "connecting" ||
+    ui.multiplayerStatus === "disconnected" ? (
+    <Tooltip
+      tooltip={
+        <Centered>
+          <strong>{t("Server connection lost")}</strong>
+          <br />
+          {t("Edits you make will sync once you’re online")}
+        </Centered>
+      }
+      placement="bottom"
+    >
+      <Button>
+        <Fade>
+          <DisconnectedIcon color={theme.sidebarText} />
+        </Fade>
+      </Button>
+    </Tooltip>
+  ) : null;
+}
+
+const Button = styled(NudeButton)`
+  display: none;
+  position: fixed;
+  bottom: 0;
+  right: 32px;
+  margin: 24px;
+
+  ${breakpoint("tablet")`
+    display: block;
+  `};
+
+  @media print {
+    display: none;
+  }
+`;
+
+const Centered = styled.div`
+  text-align: center;
+`;
+
+export default observer(ConnectionStatus);
@@ -0,0 +1,191 @@
+import isPrintableKeyEvent from "is-printable-key-event";
+import * as React from "react";
+import styled from "styled-components";
+import useOnScreen from "~/hooks/useOnScreen";
+
+type Props = Omit<React.HTMLAttributes<HTMLSpanElement>, "ref" | "onChange"> & {
+  disabled?: boolean;
+  readOnly?: boolean;
+  onClick?: React.MouseEventHandler<HTMLDivElement>;
+  onChange?: (text: string) => void;
+  onBlur?: React.FocusEventHandler<HTMLSpanElement> | undefined;
+  onInput?: React.FormEventHandler<HTMLSpanElement> | undefined;
+  onKeyDown?: React.KeyboardEventHandler<HTMLSpanElement> | undefined;
+  placeholder?: string;
+  maxLength?: number;
+  autoFocus?: boolean;
+  children?: React.ReactNode;
+  value: string;
+};
+
+export type RefHandle = {
+  focus: () => void;
+  focusAtStart: () => void;
+  focusAtEnd: () => void;
+  getComputedDirection: () => string;
+};
+
+/**
+ * Defines a content editable component with the same interface as a native
+ * HTMLInputElement (or, as close as we can get).
+ */
+const ContentEditable = React.forwardRef(
+  (
+    {
+      disabled,
+      onChange,
+      onInput,
+      onBlur,
+      onKeyDown,
+      value,
+      children,
+      className,
+      maxLength,
+      autoFocus,
+      placeholder,
+      readOnly,
+      dir,
+      onClick,
+      ...rest
+    }: Props,
+    ref: React.RefObject<RefHandle>
+  ) => {
+    const contentRef = React.useRef<HTMLSpanElement>(null);
+    const [innerValue, setInnerValue] = React.useState<string>(value);
+    const lastValue = React.useRef("");
+
+    React.useImperativeHandle(ref, () => ({
+      focus: () => {
+        contentRef.current?.focus();
+      },
+      focusAtStart: () => {
+        if (contentRef.current) {
+          contentRef.current.focus();
+          placeCaret(contentRef.current, true);
+        }
+      },
+      focusAtEnd: () => {
+        if (contentRef.current) {
+          contentRef.current.focus();
+          placeCaret(contentRef.current, false);
+        }
+      },
+      getComputedDirection: () => {
+        if (contentRef.current) {
+          return window.getComputedStyle(contentRef.current).direction;
+        }
+        return "ltr";
+      },
+    }));
+
+    const wrappedEvent = (
+      callback:
+        | React.FocusEventHandler<HTMLSpanElement>
+        | React.FormEventHandler<HTMLSpanElement>
+        | React.KeyboardEventHandler<HTMLSpanElement>
+        | undefined
+    ) => (event: any) => {
+      const text = contentRef.current?.innerText || "";
+
+      if (maxLength && isPrintableKeyEvent(event) && text.length >= maxLength) {
+        event?.preventDefault();
+        return;
+      }
+
+      if (text !== lastValue.current) {
+        lastValue.current = text;
+        onChange && onChange(text);
+      }
+
+      callback?.(event);
+    };
+
+    // This is to account for being within a React.Suspense boundary, in this
+    // case the component may be rendered with display: none. React 18 may solve
+    // this in the future by delaying useEffect hooks:
+    // https://github.com/facebook/react/issues/14536#issuecomment-861980492
+    const isVisible = useOnScreen(contentRef);
+
+    React.useEffect(() => {
+      if (autoFocus && isVisible && !disabled && !readOnly) {
+        contentRef.current?.focus();
+      }
+    }, [autoFocus, disabled, isVisible, readOnly, contentRef]);
+
+    React.useEffect(() => {
+      if (value !== contentRef.current?.innerText) {
+        setInnerValue(value);
+      }
+    }, [value, contentRef]);
+
+    // Ensure only plain text can be pasted into title when pasting from another
+    // rich text editor
+    const handlePaste = React.useCallback(
+      (event: React.ClipboardEvent<HTMLSpanElement>) => {
+        event.preventDefault();
+        const text = event.clipboardData.getData("text/plain");
+        window.document.execCommand("insertText", false, text);
+      },
+      []
+    );
+
+    return (
+      <div className={className} dir={dir} onClick={onClick}>
+        <Content
+          ref={contentRef}
+          contentEditable={!disabled && !readOnly}
+          onInput={wrappedEvent(onInput)}
+          onBlur={wrappedEvent(onBlur)}
+          onKeyDown={wrappedEvent(onKeyDown)}
+          onPaste={handlePaste}
+          data-placeholder={placeholder}
+          suppressContentEditableWarning
+          role="textbox"
+          {...rest}
+        >
+          {innerValue}
+        </Content>
+        {children}
+      </div>
+    );
+  }
+);
+
+function placeCaret(element: HTMLElement, atStart: boolean) {
+  if (
+    typeof window.getSelection !== "undefined" &&
+    typeof document.createRange !== "undefined"
+  ) {
+    const range = document.createRange();
+    range.selectNodeContents(element);
+    range.collapse(atStart);
+    const sel = window.getSelection();
+    sel?.removeAllRanges();
+    sel?.addRange(range);
+  }
+}
+
+const Content = styled.span`
+  background: ${(props) => props.theme.background};
+  transition: ${(props) => props.theme.backgroundTransition};
+  color: ${(props) => props.theme.text};
+  -webkit-text-fill-color: ${(props) => props.theme.text};
+  outline: none;
+  resize: none;
+  cursor: text;
+
+  &:empty {
+    display: inline-block;
+  }
+
+  &:empty::before {
+    display: inline-block;
+    color: ${(props) => props.theme.placeholder};
+    -webkit-text-fill-color: ${(props) => props.theme.placeholder};
+    content: attr(data-placeholder);
+    pointer-events: none;
+    height: 0;
+  }
+`;
+
+export default ContentEditable;
@@ -1,4 +1,3 @@
-// @flow
 import styled from "styled-components";

 const Header = styled.h3`
@@ -1,32 +1,35 @@
-// @flow
 import { CheckmarkIcon } from "outline-icons";
 import * as React from "react";
 import { MenuItem as BaseMenuItem } from "reakit/Menu";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
+import { hover } from "~/styles";
+import MenuIconWrapper from "../MenuIconWrapper";

-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,
-|};
+type Props = {
+  onClick?: (arg0: React.SyntheticEvent) => void | Promise<void>;
+  selected?: boolean;
+  disabled?: boolean;
+  dangerous?: boolean;
+  to?: string;
+  href?: string;
+  target?: "_blank";
+  as?: string | React.ComponentType<any>;
+  hide?: () => void;
+  level?: number;
+  icon?: React.ReactElement;
+};

-const MenuItem = ({
+const MenuItem: React.FC<Props> = ({
  onClick,
  children,
  selected,
  disabled,
  as,
  hide,
+  icon,
  ...rest
-}: Props) => {
+}) => {
  const handleClick = React.useCallback(
    (ev) => {
      if (onClick) {
@@ -71,6 +74,11 @@ const MenuItem = ({
              &nbsp;
            </>
          )}
+          {icon && (
+            <MenuIconWrapper>
+              {React.cloneElement(icon, { color: "currentColor" })}
+            </MenuIconWrapper>
+          )}
          {children}
        </MenuAnchor>
      )}
@@ -84,12 +92,19 @@ const Spacer = styled.svg`
  flex-shrink: 0;
 `;

-export const MenuAnchor = styled.a`
+type MenuAnchorProps = {
+  level?: number;
+  disabled?: boolean;
+  dangerous?: boolean;
+  disclosure?: boolean;
+};
+
+export const MenuAnchorCSS = css<MenuAnchorProps>`
  display: flex;
  margin: 0;
  border: 0;
  padding: 12px;
-  padding-left: ${(props) => 12 + props.level * 10}px;
+  padding-left: ${(props) => 12 + (props.level || 0) * 10}px;
  width: 100%;
  min-height: 32px;
  background: none;
@@ -100,6 +115,8 @@ export const MenuAnchor = styled.a`
  font-size: 16px;
  cursor: default;
  user-select: none;
+  white-space: nowrap;
+  position: relative;

  svg:not(:last-child) {
    margin-right: 4px;
@@ -115,11 +132,11 @@ export const MenuAnchor = styled.a`
      ? "pointer-events: none;"
      : `

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

@@ -130,9 +147,15 @@ export const MenuAnchor = styled.a`
  `};

  ${breakpoint("tablet")`
-    padding: ${(props) => (props.$toggleable ? "4px 12px" : "6px 12px")};
-    font-size: 15px;
+    padding: 4px 12px;
+    padding-right: ${(props: MenuAnchorProps) =>
+      props.disclosure ? 32 : 12}px;
+    font-size: 14px;
  `};
 `;

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

 export default function OverflowMenuButton({
  iconColor,
  className,
  ...rest
-}: any) {
+}: Props) {
  return (
    <MenuButton {...rest}>
      {(props) => (
@@ -1,9 +1,8 @@
-// @flow
 import * as React from "react";
 import { MenuSeparator } from "reakit/Menu";
 import styled from "styled-components";

-export default function Separator(rest: {}) {
+export default function Separator(rest: any) {
  return (
    <MenuSeparator {...rest}>
      {(props) => <HorizontalRule {...props} />}
@@ -1,142 +0,0 @@
-// @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 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 {
-  return filterTemplateItems(items).map((item, index) => {
-    if (item.to) {
-      return (
-        <MenuItem
-          as={Link}
-          to={item.to}
-          key={index}
-          disabled={item.disabled}
-          selected={item.selected}
-          {...menu}
-        >
-          {item.title}
-        </MenuItem>
-      );
-    }
-
-    if (item.href) {
-      return (
-        <MenuItem
-          href={item.href}
-          key={index}
-          disabled={item.disabled}
-          selected={item.selected}
-          level={item.level}
-          target={item.href.startsWith("#") ? undefined : "_blank"}
-          {...menu}
-        >
-          {item.title}
-        </MenuItem>
-      );
-    }
-
-    if (item.onClick) {
-      return (
-        <MenuItem
-          as="button"
-          onClick={item.onClick}
-          disabled={item.disabled}
-          selected={item.selected}
-          key={index}
-          {...menu}
-        >
-          {item.title}
-        </MenuItem>
-      );
-    }
-
-    if (item.items) {
-      return (
-        <BaseMenuItem
-          key={index}
-          as={Submenu}
-          templateItems={item.items}
-          title={item.title}
-          {...menu}
-        />
-      );
-    }
-
-    if (item.type === "separator") {
-      return <Separator key={index} />;
-    }
-
-    if (item.type === "heading") {
-      return <Header>{item.title}</Header>;
-    }
-
-    console.warn("Unrecognized menu item", item);
-    return null;
-  });
-}
-
-export default React.memo<Props>(Template);
@@ -0,0 +1,220 @@
+import { ExpandedIcon } from "outline-icons";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import {
+  useMenuState,
+  MenuButton,
+  MenuItem as BaseMenuItem,
+} from "reakit/Menu";
+import styled, { useTheme } from "styled-components";
+import Flex from "~/components/Flex";
+import MenuIconWrapper from "~/components/MenuIconWrapper";
+import { actionToMenuItem } from "~/actions";
+import useActionContext from "~/hooks/useActionContext";
+import {
+  Action,
+  ActionContext,
+  MenuSeparator,
+  MenuHeading,
+  MenuItem as TMenuItem,
+} from "~/types";
+import Header from "./Header";
+import MenuItem, { MenuAnchor } from "./MenuItem";
+import MouseSafeArea from "./MouseSafeArea";
+import Separator from "./Separator";
+import ContextMenu from ".";
+
+type Props = {
+  actions?: (Action | MenuSeparator | MenuHeading)[];
+  context?: Partial<ActionContext>;
+  items?: TMenuItem[];
+};
+
+const Disclosure = styled(ExpandedIcon)`
+  transform: rotate(270deg);
+  position: absolute;
+  right: 8px;
+`;
+
+const Submenu = React.forwardRef(
+  (
+    {
+      templateItems,
+      title,
+      ...rest
+    }: { templateItems: TMenuItem[]; title: React.ReactNode },
+    ref: React.LegacyRef<HTMLButtonElement>
+  ) => {
+    const { t } = useTranslation();
+    const theme = useTheme();
+    const menu = useMenuState();
+
+    return (
+      <>
+        <MenuButton ref={ref} {...menu} {...rest}>
+          {(props) => (
+            <MenuAnchor disclosure {...props}>
+              {title} <Disclosure color={theme.textTertiary} />
+            </MenuAnchor>
+          )}
+        </MenuButton>
+        <ContextMenu {...menu} aria-label={t("Submenu")}>
+          <MouseSafeArea parentRef={menu.unstable_popoverRef} />
+          <Template {...menu} items={templateItems} />
+        </ContextMenu>
+      </>
+    );
+  }
+);
+
+export function filterTemplateItems(items: TMenuItem[]): TMenuItem[] {
+  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,136 +0,0 @@
-// @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 usePrevious from "hooks/usePrevious";
-import {
-  fadeIn,
-  fadeAndSlideUp,
-  fadeAndSlideDown,
-  mobileContextMenu,
-} from "styles/animations";
-
-type Props = {|
-  "aria-label": string,
-  visible?: boolean,
-  placement?: string,
-  animating?: boolean,
-  children: React.Node,
-  onOpen?: () => void,
-  onClose?: () => void,
-|};
-
-export default function ContextMenu({
-  children,
-  onOpen,
-  onClose,
-  ...rest
-}: Props) {
-  const previousVisible = usePrevious(rest.visible);
-
-  React.useEffect(() => {
-    if (rest.visible && !previousVisible) {
-      if (onOpen) {
-        onOpen();
-      }
-    }
-    if (!rest.visible && previousVisible) {
-      if (onClose) {
-        onClose();
-      }
-    }
-  }, [onOpen, onClose, previousVisible, rest.visible]);
-
-  return (
-    <>
-      <Menu hideOnClickOutside preventBodyScroll {...rest}>
-        {(props) => {
-          // 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";
-          const rightAnchor = props.placement === "bottom-end";
-
-          return (
-            <Position {...props}>
-              <Background
-                dir="auto"
-                topAnchor={topAnchor}
-                rightAnchor={rightAnchor}
-              >
-                {rest.visible || rest.animating ? children : null}
-              </Background>
-            </Position>
-          );
-        }}
-      </Menu>
-      {(rest.visible || rest.animating) && (
-        <Portal>
-          <Backdrop />
-        </Portal>
-      )}
-    </>
-  );
-}
-
-const Backdrop = styled.div`
-  animation: ${fadeIn} 200ms ease-in-out;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: ${(props) => props.theme.backdrop};
-  z-index: ${(props) => props.theme.depths.menu - 1};
-
-  ${breakpoint("tablet")`
-    display: none;
-  `};
-`;
-
-const Position = styled.div`
-  position: absolute;
-  z-index: ${(props) => props.theme.depths.menu};
-
-  ${breakpoint("mobile", "tablet")`
-    position: fixed !important;
-    transform: none !important;
-    top: auto !important;
-    right: 8px !important;
-    bottom: 16px !important;
-    left: 8px !important;
-  `};
-`;
-
-const Background = styled.div`
-  animation: ${mobileContextMenu} 200ms ease;
-  transform-origin: 50% 100%;
-  max-width: 100%;
-  background: ${(props) => props.theme.menuBackground};
-  border-radius: 6px;
-  padding: 6px 0;
-  min-width: 180px;
-  overflow: hidden;
-  overflow-y: auto;
-  max-height: 75vh;
-  pointer-events: all;
-  font-weight: normal;
-
-  @media print {
-    display: none;
-  }
-
-  ${breakpoint("tablet")`
-    animation: ${(props) =>
-      props.topAnchor ? fadeAndSlideDown : fadeAndSlideUp} 200ms ease;
-    transform-origin: ${(props) =>
-      props.rightAnchor === "bottom-end" ? "75%" : "25%"} 0;
-    max-width: 276px;
-    background: ${(props) => props.theme.menuBackground};
-    box-shadow: ${(props) => props.theme.menuShadow};
-    border: ${(props) =>
-      props.theme.menuBorder ? `1px solid ${props.theme.menuBorder}` : "none"};
-  `};
-`;
@@ -0,0 +1,204 @@
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { Portal } from "react-portal";
+import { Menu } from "reakit/Menu";
+import styled from "styled-components";
+import breakpoint from "styled-components-breakpoint";
+import useMenuContext from "~/hooks/useMenuContext";
+import useMenuHeight from "~/hooks/useMenuHeight";
+import usePrevious from "~/hooks/usePrevious";
+import useStores from "~/hooks/useStores";
+import useUnmount from "~/hooks/useUnmount";
+import {
+  fadeIn,
+  fadeAndSlideUp,
+  fadeAndSlideDown,
+  mobileContextMenu,
+} from "~/styles/animations";
+
+export type Placement =
+  | "auto-start"
+  | "auto"
+  | "auto-end"
+  | "top-start"
+  | "top"
+  | "top-end"
+  | "right-start"
+  | "right"
+  | "right-end"
+  | "bottom-end"
+  | "bottom"
+  | "bottom-start"
+  | "left-end"
+  | "left"
+  | "left-start";
+
+type Props = {
+  "aria-label": string;
+  visible?: boolean;
+  placement?: Placement;
+  animating?: boolean;
+  unstable_disclosureRef?: React.RefObject<HTMLElement | null>;
+  onOpen?: () => void;
+  onClose?: () => void;
+  hide?: () => void;
+};
+
+const ContextMenu: React.FC<Props> = ({
+  children,
+  onOpen,
+  onClose,
+  ...rest
+}) => {
+  const previousVisible = usePrevious(rest.visible);
+  const maxHeight = useMenuHeight(rest.visible, rest.unstable_disclosureRef);
+  const backgroundRef = React.useRef<HTMLDivElement>(null);
+  const { ui } = useStores();
+  const { t } = useTranslation();
+  const { setIsMenuOpen } = useMenuContext();
+
+  useUnmount(() => {
+    setIsMenuOpen(false);
+  });
+
+  React.useEffect(() => {
+    if (rest.visible && !previousVisible) {
+      if (onOpen) {
+        onOpen();
+      }
+      if (rest["aria-label"] !== t("Submenu")) {
+        setIsMenuOpen(true);
+      }
+    }
+
+    if (!rest.visible && previousVisible) {
+      if (onClose) {
+        onClose();
+      }
+      if (rest["aria-label"] !== t("Submenu")) {
+        setIsMenuOpen(false);
+      }
+    }
+  }, [
+    onOpen,
+    onClose,
+    previousVisible,
+    rest.visible,
+    ui.sidebarCollapsed,
+    setIsMenuOpen,
+    rest,
+    t,
+  ]);
+
+  // Perf win – don't render anything until the menu has been opened
+  if (!rest.visible && !previousVisible) {
+    return null;
+  }
+
+  // sets the menu height based on the available space between the disclosure/
+  // trigger and the bottom of the window
+  return (
+    <>
+      <Menu hideOnClickOutside preventBodyScroll {...rest}>
+        {(props) => {
+          // kind of hacky, but this is an effective way of telling which way
+          // the menu will _actually_ be placed when taking into account screen
+          // positioning.
+          const topAnchor = props.style?.top === "0";
+          // @ts-expect-error ts-migrate(2339) FIXME: Property 'placement' does not exist on type 'Extra... Remove this comment to see the full error message
+          const rightAnchor = props.placement === "bottom-end";
+
+          return (
+            <Position {...props}>
+              <Background
+                dir="auto"
+                topAnchor={topAnchor}
+                rightAnchor={rightAnchor}
+                ref={backgroundRef}
+                style={
+                  maxHeight && topAnchor
+                    ? {
+                        maxHeight,
+                      }
+                    : undefined
+                }
+              >
+                {rest.visible || rest.animating ? children : null}
+              </Background>
+            </Position>
+          );
+        }}
+      </Menu>
+      {(rest.visible || rest.animating) && (
+        <Portal>
+          <Backdrop onClick={rest.hide} />
+        </Portal>
+      )}
+    </>
+  );
+};
+
+export default ContextMenu;
+
+export const Backdrop = styled.div`
+  animation: ${fadeIn} 200ms ease-in-out;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: ${(props) => props.theme.backdrop};
+  z-index: ${(props) => props.theme.depths.menu - 1};
+
+  ${breakpoint("tablet")`
+    display: none;
+  `};
+`;
+
+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;
+    top: auto !important;
+    right: 8px !important;
+    bottom: 16px !important;
+    left: 8px !important;
+  `};
+`;
+
+export const Background = styled.div<{
+  topAnchor?: boolean;
+  rightAnchor?: boolean;
+}>`
+  animation: ${mobileContextMenu} 200ms ease;
+  transform-origin: 50% 100%;
+  max-width: 100%;
+  background: ${(props) => props.theme.menuBackground};
+  border-radius: 6px;
+  padding: 6px 0;
+  min-width: 180px;
+  min-height: 44px;
+  overflow: hidden;
+  overflow-y: auto;
+  max-height: 75vh;
+  pointer-events: all;
+  font-weight: normal;
+
+  @media print {
+    display: none;
+  }
+
+  ${breakpoint("tablet")`
+    animation: ${(props: any) =>
+      props.topAnchor ? fadeAndSlideDown : fadeAndSlideUp} 200ms ease;
+    transform-origin: ${(props: any) => (props.rightAnchor ? "75%" : "25%")} 0;
+    max-width: 276px;
+    background: ${(props: any) => props.theme.menuBackground};
+    box-shadow: ${(props: any) => props.theme.menuShadow};
+  `};
+`;
@@ -1,24 +1,25 @@
-// @flow
 import copy from "copy-to-clipboard";
 import * as React from "react";

 type Props = {
-  text: string,
-  children?: React.Node,
-  onClick?: () => void,
-  onCopy: () => void,
+  text: string;
+  children?: React.ReactElement;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  onCopy: () => void;
 };

 class CopyToClipboard extends React.PureComponent<Props> {
-  onClick = (ev: SyntheticEvent<>) => {
+  onClick = (ev: React.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);
@@ -26,8 +27,12 @@ class CopyToClipboard extends React.PureComponent<Props> {
  };

  render() {
-    const { text: _text, onCopy: _onCopy, children, ...rest } = this.props;
+    const { text, onCopy, children, ...rest } = this.props;
    const elem = React.Children.only(children);
+    if (!elem) {
+      return null;
+    }
+
    return React.cloneElement(elem, { ...rest, onClick: this.onClick });
  }
 }
@@ -0,0 +1,104 @@
+import { HomeIcon } from "outline-icons";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Optional } from "utility-types";
+import CollectionIcon from "~/components/CollectionIcon";
+import Flex from "~/components/Flex";
+import InputSelect from "~/components/InputSelect";
+import { IconWrapper } from "~/components/Sidebar/components/SidebarLink";
+import useStores from "~/hooks/useStores";
+import useToasts from "~/hooks/useToasts";
+
+type DefaultCollectionInputSelectProps = Optional<
+  React.ComponentProps<typeof InputSelect>
+> & {
+  onSelectCollection: (collection: string) => void;
+  defaultCollectionId: string | null;
+};
+
+const DefaultCollectionInputSelect = ({
+  onSelectCollection,
+  defaultCollectionId,
+  ...rest
+}: DefaultCollectionInputSelectProps) => {
+  const { t } = useTranslation();
+  const { collections } = useStores();
+  const [fetching, setFetching] = useState(false);
+  const [fetchError, setFetchError] = useState();
+  const { showToast } = useToasts();
+
+  React.useEffect(() => {
+    async function load() {
+      if (!collections.isLoaded && !fetching && !fetchError) {
+        try {
+          setFetching(true);
+          await collections.fetchPage({
+            limit: 100,
+          });
+        } catch (error) {
+          showToast(
+            t("Collections could not be loaded, please reload the app"),
+            {
+              type: "error",
+            }
+          );
+          setFetchError(error);
+        } finally {
+          setFetching(false);
+        }
+      }
+    }
+    load();
+  }, [showToast, fetchError, t, fetching, collections]);
+
+  const options = React.useMemo(
+    () =>
+      collections.publicCollections.reduce(
+        (acc, collection) => [
+          ...acc,
+          {
+            label: (
+              <Flex align="center">
+                <IconWrapper>
+                  <CollectionIcon collection={collection} />
+                </IconWrapper>
+                {collection.name}
+              </Flex>
+            ),
+            value: collection.id,
+          },
+        ],
+        [
+          {
+            label: (
+              <Flex align="center">
+                <IconWrapper>
+                  <HomeIcon color="currentColor" />
+                </IconWrapper>
+                {t("Home")}
+              </Flex>
+            ),
+            value: "home",
+          },
+        ]
+      ),
+    [collections.publicCollections, t]
+  );
+
+  if (fetching) {
+    return null;
+  }
+
+  return (
+    <InputSelect
+      value={defaultCollectionId ?? "home"}
+      options={options}
+      onChange={onSelectCollection}
+      ariaLabel={t("Default collection")}
+      short
+      {...rest}
+    />
+  );
+};
+
+export default DefaultCollectionInputSelect;
@@ -1,9 +1,8 @@
-// @flow
 import * as React from "react";

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

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

 const Divider = styled.hr`
@@ -1,138 +0,0 @@
-// @flow
-import { observer } from "mobx-react";
-import {
-  ArchiveIcon,
-  EditIcon,
-  GoToIcon,
-  ShapesIcon,
-  TrashIcon,
-} from "outline-icons";
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-import styled from "styled-components";
-import Document from "models/Document";
-import Breadcrumb from "components/Breadcrumb";
-import CollectionIcon from "components/CollectionIcon";
-import useStores from "hooks/useStores";
-import { collectionUrl } from "utils/routeHelpers";
-
-type Props = {|
-  document: Document,
-  children?: React.Node,
-  onlyText: boolean,
-|};
-
-function useCategory(document) {
-  const { t } = useTranslation();
-
-  if (document.isDeleted) {
-    return {
-      icon: <TrashIcon color="currentColor" />,
-      title: t("Trash"),
-      to: "/trash",
-    };
-  }
-  if (document.isArchived) {
-    return {
-      icon: <ArchiveIcon color="currentColor" />,
-      title: t("Archive"),
-      to: "/archive",
-    };
-  }
-  if (document.isDraft) {
-    return {
-      icon: <EditIcon color="currentColor" />,
-      title: t("Drafts"),
-      to: "/drafts",
-    };
-  }
-  if (document.isTemplate) {
-    return {
-      icon: <ShapesIcon color="currentColor" />,
-      title: t("Templates"),
-      to: "/templates",
-    };
-  }
-  return null;
-}
-
-const DocumentBreadcrumb = ({ document, children, onlyText }: Props) => {
-  const { collections } = useStores();
-  const { t } = useTranslation();
-  const category = useCategory(document);
-
-  let collection = collections.get(document.collectionId);
-  if (!collection) {
-    collection = {
-      id: document.collectionId,
-      name: t("Deleted Collection"),
-      color: "currentColor",
-      url: "deleted-collection",
-    };
-  }
-
-  const path = React.useMemo(
-    () =>
-      collection && collection.pathToDocument
-        ? collection.pathToDocument(document.id).slice(0, -1)
-        : [],
-    [collection, document.id]
-  );
-
-  const items = React.useMemo(() => {
-    let output = [];
-
-    if (category) {
-      output.push(category);
-    }
-
-    if (collection) {
-      output.push({
-        icon: <CollectionIcon collection={collection} expanded />,
-        title: collection.name,
-        to: collectionUrl(collection.url),
-      });
-    }
-
-    path.forEach((p) => {
-      output.push({
-        title: p.title,
-        to: p.url,
-      });
-    });
-
-    return output;
-  }, [path, category, collection]);
-
-  if (!collections.isLoaded) {
-    return null;
-  }
-
-  if (onlyText === true) {
-    return (
-      <>
-        {collection.name}
-        {path.map((n) => (
-          <React.Fragment key={n.id}>
-            <SmallSlash />
-            {n.title}
-          </React.Fragment>
-        ))}
-      </>
-    );
-  }
-
-  return <Breadcrumb items={items} children={children} highlightFirstItem />;
-};
-
-const SmallSlash = styled(GoToIcon)`
-  width: 12px;
-  height: 12px;
-  vertical-align: middle;
-  flex-shrink: 0;
-
-  fill: ${(props) => props.theme.slate};
-  opacity: 0.5;
-`;
-
-export default observer(DocumentBreadcrumb);
@@ -0,0 +1,134 @@
+import { observer } from "mobx-react";
+import { ArchiveIcon, GoToIcon, ShapesIcon, TrashIcon } from "outline-icons";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import styled from "styled-components";
+import Document from "~/models/Document";
+import Breadcrumb from "~/components/Breadcrumb";
+import CollectionIcon from "~/components/CollectionIcon";
+import useStores from "~/hooks/useStores";
+import { MenuInternalLink, NavigationNode } from "~/types";
+import { collectionUrl } from "~/utils/routeHelpers";
+
+type Props = {
+  document: Document;
+  onlyText?: boolean;
+};
+
+function useCategory(document: Document): MenuInternalLink | null {
+  const { t } = useTranslation();
+
+  if (document.isDeleted) {
+    return {
+      type: "route",
+      icon: <TrashIcon color="currentColor" />,
+      title: t("Trash"),
+      to: "/trash",
+    };
+  }
+
+  if (document.isArchived) {
+    return {
+      type: "route",
+      icon: <ArchiveIcon color="currentColor" />,
+      title: t("Archive"),
+      to: "/archive",
+    };
+  }
+
+  if (document.isTemplate) {
+    return {
+      type: "route",
+      icon: <ShapesIcon color="currentColor" />,
+      title: t("Templates"),
+      to: "/templates",
+    };
+  }
+
+  return null;
+}
+
+const DocumentBreadcrumb: React.FC<Props> = ({
+  document,
+  children,
+  onlyText,
+}) => {
+  const { collections } = useStores();
+  const { t } = useTranslation();
+  const category = useCategory(document);
+  const collection = collections.get(document.collectionId);
+
+  let collectionNode: MenuInternalLink;
+
+  if (collection) {
+    collectionNode = {
+      type: "route",
+      title: collection.name,
+      icon: <CollectionIcon collection={collection} expanded />,
+      to: collectionUrl(collection.url),
+    };
+  } else {
+    collectionNode = {
+      type: "route",
+      title: t("Deleted Collection"),
+      icon: undefined,
+      to: collectionUrl("deleted-collection"),
+    };
+  }
+
+  const path = React.useMemo(
+    () => collection?.pathToDocument?.(document.id).slice(0, -1) || [],
+    [collection, document]
+  );
+
+  const items = React.useMemo(() => {
+    const output = [];
+
+    if (category) {
+      output.push(category);
+    }
+
+    output.push(collectionNode);
+
+    path.forEach((node: NavigationNode) => {
+      output.push({
+        type: "route",
+        title: node.title,
+        to: node.url,
+      });
+    });
+    return output;
+  }, [path, category, collectionNode]);
+
+  if (!collections.isLoaded) {
+    return null;
+  }
+
+  if (onlyText === true) {
+    return (
+      <>
+        {collection?.name}
+        {path.map((node: NavigationNode) => (
+          <React.Fragment key={node.id}>
+            <SmallSlash />
+            {node.title}
+          </React.Fragment>
+        ))}
+      </>
+    );
+  }
+
+  return <Breadcrumb items={items} children={children} highlightFirstItem />;
+};
+
+const SmallSlash = styled(GoToIcon)`
+  width: 12px;
+  height: 12px;
+  vertical-align: middle;
+  flex-shrink: 0;
+
+  fill: ${(props) => props.theme.slate};
+  opacity: 0.5;
+`;
+
+export default observer(DocumentBreadcrumb);
@@ -0,0 +1,267 @@
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { m } from "framer-motion";
+import { observer } from "mobx-react";
+import { CloseIcon, DocumentIcon, ClockIcon } from "outline-icons";
+import { getLuminance, transparentize } from "polished";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import styled, { css } from "styled-components";
+import Document from "~/models/Document";
+import Pin from "~/models/Pin";
+import Flex from "~/components/Flex";
+import NudeButton from "~/components/NudeButton";
+import Time from "~/components/Time";
+import useStores from "~/hooks/useStores";
+import CollectionIcon from "./CollectionIcon";
+import Text from "./Text";
+import Tooltip from "./Tooltip";
+
+type Props = {
+  /** The pin record */
+  pin: Pin | undefined;
+  /** The document related to the pin */
+  document: Document;
+  /** Whether the user has permission to delete or reorder the pin */
+  canUpdatePin?: boolean;
+  /** Whether this pin can be reordered by dragging */
+  isDraggable?: boolean;
+};
+
+function DocumentCard(props: Props) {
+  const { t } = useTranslation();
+  const { collections } = useStores();
+  const { document, pin, canUpdatePin, isDraggable } = props;
+  const collection = collections.get(document.collectionId);
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: props.document.id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
+  const handleUnpin = React.useCallback(() => {
+    pin?.delete();
+  }, [pin]);
+
+  return (
+    <Reorderable
+      ref={setNodeRef}
+      style={style}
+      $isDragging={isDragging}
+      {...attributes}
+    >
+      <AnimatePresence
+        initial={{ opacity: 0, scale: 0.95 }}
+        animate={{
+          opacity: 1,
+          scale: 1,
+          transition: {
+            type: "spring",
+            bounce: 0.6,
+          },
+        }}
+        exit={{ opacity: 0, scale: 0.95 }}
+      >
+        <DocumentLink
+          dir={document.dir}
+          style={{
+            background:
+              collection?.color && getLuminance(collection.color) < 0.6
+                ? collection.color
+                : undefined,
+          }}
+          $isDragging={isDragging}
+          to={{
+            pathname: document.url,
+            state: {
+              title: document.titleWithDefault,
+            },
+          }}
+        >
+          <Content justify="space-between" column>
+            {collection?.icon &&
+            collection?.icon !== "collection" &&
+            !pin?.collectionId ? (
+              <CollectionIcon collection={collection} color="white" />
+            ) : (
+              <DocumentIcon color="white" />
+            )}
+            <div>
+              <Heading dir={document.dir}>{document.titleWithDefault}</Heading>
+              <DocumentMeta size="xsmall">
+                <ClockIcon color="currentColor" size={18} />{" "}
+                <Time dateTime={document.updatedAt} addSuffix shorten />
+              </DocumentMeta>
+            </div>
+          </Content>
+        </DocumentLink>
+        {canUpdatePin && (
+          <Actions dir={document.dir} gap={4}>
+            {!isDragging && pin && (
+              <Tooltip tooltip={t("Unpin")}>
+                <PinButton onClick={handleUnpin} aria-label={t("Unpin")}>
+                  <CloseIcon color="currentColor" />
+                </PinButton>
+              </Tooltip>
+            )}
+            {isDraggable && (
+              <DragHandle $isDragging={isDragging} {...listeners}>
+                :::
+              </DragHandle>
+            )}
+          </Actions>
+        )}
+      </AnimatePresence>
+    </Reorderable>
+  );
+}
+
+const PinButton = styled(NudeButton)`
+  color: ${(props) => props.theme.white75};
+
+  &:hover,
+  &:active {
+    color: ${(props) => props.theme.white};
+  }
+`;
+
+const Actions = styled(Flex)`
+  position: absolute;
+  top: 12px;
+  right: ${(props) => (props.dir === "rtl" ? "auto" : "12px")};
+  left: ${(props) => (props.dir === "rtl" ? "12px" : "auto")};
+  opacity: 0;
+  transition: opacity 100ms ease-in-out;
+
+  // move actions above content
+  z-index: 2;
+`;
+
+const DragHandle = styled.div<{ $isDragging: boolean }>`
+  cursor: ${(props) => (props.$isDragging ? "grabbing" : "grab")};
+  padding: 0 4px;
+  font-weight: bold;
+  color: ${(props) => props.theme.white75};
+  line-height: 1.35;
+
+  &:hover,
+  &:active {
+    color: ${(props) => props.theme.white};
+  }
+`;
+
+const AnimatePresence = m.div;
+
+const Reorderable = styled.div<{ $isDragging: boolean }>`
+  position: relative;
+  user-select: none;
+  border-radius: 8px;
+
+  // move above other cards when dragging
+  z-index: ${(props) => (props.$isDragging ? 1 : "inherit")};
+  transform: scale(${(props) => (props.$isDragging ? "1.025" : "1")});
+  box-shadow: ${(props) =>
+    props.$isDragging ? "0 0 20px rgba(0,0,0,0.3);" : "0 0 0 rgba(0,0,0,0)"};
+
+  &:hover ${Actions} {
+    opacity: 1;
+  }
+`;
+
+const Content = styled(Flex)`
+  min-width: 0;
+  height: 100%;
+
+  // move content above ::after
+  position: relative;
+  z-index: 1;
+`;
+
+const DocumentMeta = styled(Text)`
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  color: ${(props) => transparentize(0.25, props.theme.white)};
+  margin: 0;
+`;
+
+const DocumentLink = styled(Link)<{
+  $menuOpen?: boolean;
+  $isDragging?: boolean;
+}>`
+  position: relative;
+  display: block;
+  padding: 12px;
+  border-radius: 8px;
+  height: 160px;
+  background: ${(props) => props.theme.slate};
+  color: ${(props) => props.theme.white};
+  transition: transform 50ms ease-in-out;
+
+  &:after {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(transparent, rgba(0, 0, 0, 0.1));
+    border-radius: 8px;
+    pointer-events: none;
+  }
+
+  ${Actions} {
+    opacity: 0;
+  }
+
+  &:hover,
+  &:active,
+  &:focus,
+  &:focus-within {
+    ${Actions} {
+      opacity: 1;
+    }
+
+    ${(props) =>
+      !props.$isDragging &&
+      css`
+        &:after {
+          background: rgba(0, 0, 0, 0.1);
+        }
+      `}
+  }
+
+  ${(props) =>
+    props.$menuOpen &&
+    css`
+      background: ${(props) => props.theme.listItemHoverBackground};
+
+      ${Actions} {
+        opacity: 1;
+      }
+    `}
+`;
+
+const Heading = styled.h3`
+  margin-top: 0;
+  margin-bottom: 0.35em;
+  line-height: 22px;
+  max-height: 66px; // 3*line-height
+  overflow: hidden;
+
+  color: ${(props) => props.theme.white};
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+`;
+
+export default observer(DocumentCard);
@@ -0,0 +1,133 @@
+import { observer } from "mobx-react";
+import { CloseIcon } from "outline-icons";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { useHistory, useRouteMatch } from "react-router-dom";
+import styled from "styled-components";
+import breakpoint from "styled-components-breakpoint";
+import Event from "~/models/Event";
+import Button from "~/components/Button";
+import Empty from "~/components/Empty";
+import Flex from "~/components/Flex";
+import PaginatedEventList from "~/components/PaginatedEventList";
+import Scrollable from "~/components/Scrollable";
+import useStores from "~/hooks/useStores";
+import { documentUrl } from "~/utils/routeHelpers";
+
+const EMPTY_ARRAY: Event[] = [];
+
+function DocumentHistory() {
+  const { events, documents } = useStores();
+  const { t } = useTranslation();
+  const match = useRouteMatch<{ documentSlug: string }>();
+  const history = useHistory();
+  const document = documents.getByUrl(match.params.documentSlug);
+
+  const eventsInDocument = document
+    ? events.inDocument(document.id)
+    : EMPTY_ARRAY;
+
+  const onCloseHistory = () => {
+    if (document) {
+      history.push(documentUrl(document));
+    } else {
+      history.goBack();
+    }
+  };
+
+  const items = React.useMemo(() => {
+    if (
+      eventsInDocument[0] &&
+      document &&
+      eventsInDocument[0].createdAt !== document.updatedAt
+    ) {
+      eventsInDocument.unshift(
+        new Event(
+          {
+            name: "documents.latest_version",
+            documentId: document.id,
+            createdAt: document.updatedAt,
+            actor: document.updatedBy,
+          },
+          events
+        )
+      );
+    }
+
+    return eventsInDocument;
+  }, [eventsInDocument, events, document]);
+
+  return (
+    <Sidebar>
+      {document ? (
+        <Position column>
+          <Header>
+            <Title>{t("History")}</Title>
+            <Button
+              icon={<CloseIcon />}
+              onClick={onCloseHistory}
+              borderOnHover
+              neutral
+            />
+          </Header>
+          <Scrollable topShadow>
+            <PaginatedEventList
+              aria-label={t("History")}
+              fetch={events.fetchPage}
+              events={items}
+              options={{
+                documentId: document.id,
+              }}
+              document={document}
+              empty={<Empty>{t("Oh weird, there's nothing here")}</Empty>}
+            />
+          </Scrollable>
+        </Position>
+      ) : null}
+    </Sidebar>
+  );
+}
+
+const Position = styled(Flex)`
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  width: ${(props) => props.theme.sidebarWidth}px;
+`;
+
+const Sidebar = styled(Flex)`
+  display: none;
+  position: relative;
+  flex-shrink: 0;
+  background: ${(props) => props.theme.background};
+  width: ${(props) => props.theme.sidebarWidth}px;
+  border-left: 1px solid ${(props) => props.theme.divider};
+  z-index: 1;
+
+  ${breakpoint("tablet")`
+    display: flex;
+  `};
+`;
+
+const Title = styled(Flex)`
+  font-size: 16px;
+  font-weight: 600;
+  text-align: center;
+  align-items: center;
+  justify-content: flex-start;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  width: 0;
+  flex-grow: 1;
+`;
+
+const Header = styled(Flex)`
+  align-items: center;
+  position: relative;
+  padding: 12px;
+  color: ${(props) => props.theme.text};
+  flex-shrink: 0;
+`;
+
+export default observer(DocumentHistory);
@@ -1,199 +0,0 @@
-// @flow
-import ArrowKeyNavigation from "boundless-arrow-key-navigation";
-import { action, observable } from "mobx";
-import { inject, observer } from "mobx-react";
-import { CloseIcon } from "outline-icons";
-import * as React from "react";
-import { type Match, Redirect, type RouterHistory } from "react-router-dom";
-import { Waypoint } from "react-waypoint";
-import styled from "styled-components";
-
-import breakpoint from "styled-components-breakpoint";
-import { DEFAULT_PAGINATION_LIMIT } from "stores/BaseStore";
-import DocumentsStore from "stores/DocumentsStore";
-import RevisionsStore from "stores/RevisionsStore";
-
-import Button from "components/Button";
-import Flex from "components/Flex";
-import PlaceholderList from "components/List/Placeholder";
-import Revision from "./components/Revision";
-import { documentHistoryUrl, documentUrl } from "utils/routeHelpers";
-
-type Props = {
-  match: Match,
-  documents: DocumentsStore,
-  revisions: RevisionsStore,
-  history: RouterHistory,
-};
-
-@observer
-class DocumentHistory extends React.Component<Props> {
-  @observable isLoaded: boolean = false;
-  @observable isFetching: boolean = false;
-  @observable offset: number = 0;
-  @observable allowLoadMore: boolean = true;
-  @observable redirectTo: ?string;
-
-  async componentDidMount() {
-    await this.loadMoreResults();
-    this.selectFirstRevision();
-  }
-
-  fetchResults = async () => {
-    this.isFetching = true;
-
-    const limit = DEFAULT_PAGINATION_LIMIT;
-    const results = await this.props.revisions.fetchPage({
-      limit,
-      offset: this.offset,
-      documentId: this.props.match.params.documentSlug,
-    });
-
-    if (
-      results &&
-      (results.length === 0 || results.length < DEFAULT_PAGINATION_LIMIT)
-    ) {
-      this.allowLoadMore = false;
-    } else {
-      this.offset += DEFAULT_PAGINATION_LIMIT;
-    }
-
-    this.isLoaded = true;
-    this.isFetching = false;
-  };
-
-  selectFirstRevision = () => {
-    if (this.revisions.length) {
-      const document = this.props.documents.getByUrl(
-        this.props.match.params.documentSlug
-      );
-      if (!document) return;
-
-      this.props.history.replace(
-        documentHistoryUrl(document, this.revisions[0].id)
-      );
-    }
-  };
-
-  @action
-  loadMoreResults = async () => {
-    // Don't paginate if there aren't more results or we’re in the middle of fetching
-    if (!this.allowLoadMore || this.isFetching) return;
-    await this.fetchResults();
-  };
-
-  get revisions() {
-    const document = this.props.documents.getByUrl(
-      this.props.match.params.documentSlug
-    );
-    if (!document) return [];
-    return this.props.revisions.getDocumentRevisions(document.id);
-  }
-
-  onCloseHistory = () => {
-    const document = this.props.documents.getByUrl(
-      this.props.match.params.documentSlug
-    );
-
-    this.redirectTo = documentUrl(document);
-  };
-
-  render() {
-    const document = this.props.documents.getByUrl(
-      this.props.match.params.documentSlug
-    );
-    const showLoading = (!this.isLoaded && this.isFetching) || !document;
-
-    if (this.redirectTo) return <Redirect to={this.redirectTo} push />;
-
-    return (
-      <Sidebar>
-        <Wrapper column>
-          <Header>
-            <Title>History</Title>
-            <Button
-              icon={<CloseIcon />}
-              onClick={this.onCloseHistory}
-              borderOnHover
-              neutral
-            />
-          </Header>
-          {showLoading ? (
-            <Loading>
-              <PlaceholderList count={5} />
-            </Loading>
-          ) : (
-            <ArrowKeyNavigation
-              mode={ArrowKeyNavigation.mode.VERTICAL}
-              defaultActiveChildIndex={0}
-            >
-              {this.revisions.map((revision, index) => (
-                <Revision
-                  key={revision.id}
-                  revision={revision}
-                  document={document}
-                  showMenu={index !== 0}
-                  selected={this.props.match.params.revisionId === revision.id}
-                />
-              ))}
-            </ArrowKeyNavigation>
-          )}
-          {this.allowLoadMore && (
-            <Waypoint key={this.offset} onEnter={this.loadMoreResults} />
-          )}
-        </Wrapper>
-      </Sidebar>
-    );
-  }
-}
-
-const Loading = styled.div`
-  margin: 0 16px;
-`;
-
-const Wrapper = styled(Flex)`
-  position: fixed;
-  top: 0;
-  right: 0;
-  z-index: 1;
-  min-width: ${(props) => props.theme.sidebarWidth}px;
-  height: 100%;
-  overflow-y: auto;
-  overscroll-behavior: none;
-`;
-
-const Sidebar = styled(Flex)`
-  display: none;
-  background: ${(props) => props.theme.background};
-  min-width: ${(props) => props.theme.sidebarWidth}px;
-  border-left: 1px solid ${(props) => props.theme.divider};
-  z-index: 1;
-
-  ${breakpoint("tablet")`
-    display: flex;
-  `};
-`;
-
-const Title = styled(Flex)`
-  font-size: 16px;
-  font-weight: 600;
-  text-align: center;
-  align-items: center;
-  justify-content: flex-start;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  width: 0;
-  flex-grow: 1;
-`;
-
-const Header = styled(Flex)`
-  align-items: center;
-  position: relative;
-  padding: 12px;
-  border-bottom: 1px solid ${(props) => props.theme.divider};
-  color: ${(props) => props.theme.text};
-  flex-shrink: 0;
-`;
-
-export default inject("documents", "revisions")(DocumentHistory);
@@ -1,87 +0,0 @@
-// @flow
-import { format } from "date-fns";
-import * as React from "react";
-import { NavLink } from "react-router-dom";
-import styled, { withTheme } from "styled-components";
-
-import Document from "models/Document";
-import Revision from "models/Revision";
-import Avatar from "components/Avatar";
-import Flex from "components/Flex";
-import Time from "components/Time";
-import RevisionMenu from "menus/RevisionMenu";
-import { type Theme } from "types";
-
-import { documentHistoryUrl } from "utils/routeHelpers";
-
-type Props = {
-  theme: Theme,
-  showMenu: boolean,
-  selected: boolean,
-  document: Document,
-  revision: Revision,
-};
-
-class RevisionListItem extends React.Component<Props> {
-  render() {
-    const { revision, document, showMenu, selected, theme } = this.props;
-
-    return (
-      <StyledNavLink
-        to={documentHistoryUrl(document, revision.id)}
-        activeStyle={{ background: theme.primary, color: theme.white }}
-      >
-        <Author>
-          <StyledAvatar src={revision.createdBy.avatarUrl} />{" "}
-          {revision.createdBy.name}
-        </Author>
-        <Meta>
-          <Time dateTime={revision.createdAt} tooltipDelay={250}>
-            {format(Date.parse(revision.createdAt), "MMMM do, yyyy h:mm a")}
-          </Time>
-        </Meta>
-        {showMenu && (
-          <StyledRevisionMenu
-            document={document}
-            revision={revision}
-            iconColor={selected ? theme.white : theme.textTertiary}
-          />
-        )}
-      </StyledNavLink>
-    );
-  }
-}
-
-const StyledAvatar = styled(Avatar)`
-  border-color: transparent;
-  margin-right: 4px;
-`;
-
-const StyledRevisionMenu = styled(RevisionMenu)`
-  position: absolute;
-  right: 16px;
-  top: 20px;
-`;
-
-const StyledNavLink = styled(NavLink)`
-  color: ${(props) => props.theme.text};
-  display: block;
-  padding: 8px 16px;
-  font-size: 15px;
-  position: relative;
-`;
-
-const Author = styled(Flex)`
-  font-weight: 500;
-  padding: 0;
-  margin: 0;
-`;
-
-const Meta = styled.p`
-  font-size: 14px;
-  opacity: 0.75;
-  margin: 0 0 2px;
-  padding: 0;
-`;
-
-export default withTheme(RevisionListItem);
@@ -1,3 +0,0 @@
-// @flow
-import DocumentHistory from "./DocumentHistory";
-export default DocumentHistory;
@@ -1,30 +0,0 @@
-// @flow
-import ArrowKeyNavigation from "boundless-arrow-key-navigation";
-import * as React from "react";
-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,
-|};
-
-export default function DocumentList({ limit, documents, ...rest }: Props) {
-  const items = limit ? documents.splice(0, limit) : documents;
-
-  return (
-    <ArrowKeyNavigation
-      mode={ArrowKeyNavigation.mode.VERTICAL}
-      defaultActiveChildIndex={0}
-    >
-      {items.map((document) => (
-        <DocumentListItem key={document.id} document={document} {...rest} />
-      ))}
-    </ArrowKeyNavigation>
-  );
-}
@@ -1,38 +1,40 @@
-// @flow
 import { observer } from "mobx-react";
 import { PlusIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
+import { CompositeStateReturn, CompositeItem } from "reakit/Composite";
 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 { newDocumentUrl } 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 NudeButton from "~/components/NudeButton";
+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 usePolicy from "~/hooks/usePolicy";
+import DocumentMenu from "~/menus/DocumentMenu";
+import { hover } from "~/styles";
+import { newDocumentPath } 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;
+} & CompositeStateReturn;

 const SEARCH_RESULT_REGEX = /<b\b[^>]*>(.*?)<\/b>/gi;

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

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

  return (
-    <DocumentLink
+    <CompositeItem
+      as={DocumentLink}
      ref={ref}
      dir={document.dir}
+      role="menuitem"
      $isStarred={document.isStarred}
      $menuOpen={menuOpen}
      to={{
        pathname: document.url,
-        state: { title: document.titleWithDefault },
+        state: {
+          title: document.titleWithDefault,
+        },
      }}
+      {...rest}
    >
      <Content>
        <Heading dir={document.dir}>
@@ -85,7 +96,7 @@ function DocumentListItem(props: Props, ref) {
            highlight={highlight}
            dir={document.dir}
          />
-          {document.isNew && document.createdBy.id !== currentUser.id && (
+          {document.isBadgedNew && document.createdBy.id !== currentUser.id && (
            <Badge yellow>{t("New")}</Badge>
          )}
          {canStar && (
@@ -118,7 +129,7 @@ function DocumentListItem(props: Props, ref) {
          document={document}
          showCollection={showCollection}
          showPublished={showPublished}
-          showNestedDocuments={showNestedDocuments}
+          showParentDocuments={showParentDocuments}
          showLastViewed
        />
      </Content>
@@ -126,11 +137,12 @@ function DocumentListItem(props: Props, ref) {
        {document.isTemplate &&
          !document.isArchived &&
          !document.isDeleted &&
-          can.createDocument && (
+          can.createDocument &&
+          canCollection.update && (
            <>
              <Button
                as={Link}
-                to={newDocumentUrl(document.collectionId, {
+                to={newDocumentPath(document.collectionId, {
                  templateId: document.id,
                })}
                icon={<PlusIcon />}
@@ -149,7 +161,7 @@ function DocumentListItem(props: Props, ref) {
          modal={false}
        />
      </Actions>
-    </DocumentLink>
+    </CompositeItem>
  );
 }

@@ -166,12 +178,22 @@ const Actions = styled(EventBoundary)`
  flex-shrink: 0;
  flex-grow: 0;

+  ${NudeButton} {
+    &:hover,
+    &[aria-expanded="true"] {
+      background: ${(props) => props.theme.sidebarControlHoverBackground};
+    }
+  }
+
  ${breakpoint("tablet")`
    display: flex;
  `};
 `;

-const DocumentLink = styled(Link)`
+const DocumentLink = styled(Link)<{
+  $isStarred?: boolean;
+  $menuOpen?: boolean;
+}>`
  display: flex;
  align-items: center;
  margin: 10px -8px;
@@ -180,6 +202,10 @@ const DocumentLink = styled(Link)`
  max-height: 50vh;
  width: calc(100vw - 8px);

+  &:focus-visible {
+    outline: none;
+  }
+
  ${breakpoint("tablet")`
    width: auto;
  `};
@@ -192,7 +218,7 @@ const DocumentLink = styled(Link)`
    opacity: ${(props) => (props.$isStarred ? "1 !important" : 0)};
  }

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

-const Heading = styled.h3`
+const Heading = styled.h3<{ rtl?: boolean }>`
  display: flex;
  justify-content: ${(props) => (props.rtl ? "flex-end" : "flex-start")};
  align-items: center;
@@ -1,18 +1,17 @@
-// @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)`
+const Container = styled(Flex)<{ rtl?: boolean }>`
  justify-content: ${(props) => (props.rtl ? "flex-end" : "flex-start")};
  color: ${(props) => props.theme.textTertiary};
  font-size: 13px;
@@ -26,35 +25,32 @@ const Viewed = styled.span`
  overflow: hidden;
 `;

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

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

-function DocumentMeta({
+const DocumentMeta: React.FC<Props> = ({
  showPublished,
  showCollection,
  showLastViewed,
-  showNestedDocuments,
+  showParentDocuments,
  document,
  children,
  to,
  ...rest
-}: Props) {
+}) => {
  const { t } = useTranslation();
  const { collections } = useStores();
  const user = useCurrentUser();
-
  const {
    modifiedSinceViewed,
    updatedAt,
@@ -126,7 +122,11 @@ function DocumentMeta({
    if (isDraft || !showLastViewed) {
      return null;
    }
+
    if (!lastViewedAt) {
+      if (lastUpdatedByCurrentUser) {
+        return null;
+      }
      return (
        <Viewed>
          •&nbsp;<Modified highlight>{t("Never viewed")}</Modified>
@@ -153,10 +153,12 @@ function DocumentMeta({
          </strong>
        </span>
      )}
-      {showNestedDocuments && nestedDocumentsCount > 0 && (
+      {showParentDocuments && nestedDocumentsCount > 0 && (
        <span>
          &nbsp;• {nestedDocumentsCount}{" "}
-          {t("nested document", { count: nestedDocumentsCount })}
+          {t("nested document", {
+            count: nestedDocumentsCount,
+          })}
        </span>
      )}
      &nbsp;{timeSinceNow()}
@@ -169,6 +171,6 @@ function DocumentMeta({
      {children}
    </Container>
  );
-}
+};

 export default observer(DocumentMeta);
@@ -1,21 +1,20 @@
-// @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();
@@ -26,7 +25,9 @@ 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]);

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

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

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

-function getMessage(t, total, completed) {
+function getMessage(t: TFunction, total: number, completed: number): string {
  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,
@@ -33,7 +38,6 @@ function DocumentTasks({ document }: Props) {
  const done = completed === total;
  const previousDone = usePrevious(done);
  const message = getMessage(t, total, completed);
-
  return (
    <>
      {completed === total ? (
@@ -50,7 +54,7 @@ function DocumentTasks({ document }: Props) {
  );
 }

-const Done = styled(DoneIcon)`
+const Done = styled(DoneIcon)<{ $animated: boolean }>`
  margin: -1px;
  animation: ${(props) => (props.$animated ? bounceIn : "none")} 600ms;
  transform-origin: center center;
@@ -1,31 +1,28 @@
-// @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();
-
-  let documentPresence = presence.get(document.id);
-  documentPresence = documentPresence
+  const documentPresence = presence.get(document.id);
+  const documentPresenceArray = documentPresence
    ? Array.from(documentPresence.values())
    : [];
-
-  const presentIds = documentPresence.map((p) => p.userId);
-  const editingIds = documentPresence
+  const presentIds = documentPresenceArray.map((p) => p.userId);
+  const editingIds = documentPresenceArray
    .filter((p) => p.isEditing)
    .map((p) => p.userId);

@@ -35,7 +32,6 @@ function DocumentViews({ document, isOpen }: Props) {
    documentViews,
    (view) => !presentIds.includes(view.user.id)
  );
-
  const users = React.useMemo(() => sortedViews.map((v) => v.user), [
    sortedViews,
  ]);
@@ -44,12 +40,12 @@ function DocumentViews({ document, isOpen }: Props) {
    <>
      {isOpen && (
        <PaginatedList
+          aria-label={t("Viewers")}
          items={users}
          renderItem={(item) => {
            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")
@@ -59,7 +55,6 @@ function DocumentViews({ document, isOpen }: Props) {
                    view ? Date.parse(view.lastViewedAt) : new Date()
                  ),
                });
-
            return (
              <ListItem
                key={item.id}
@@ -1,265 +0,0 @@
-// @flow
-import { lighten } from "polished";
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-import { withRouter, type RouterHistory } from "react-router-dom";
-import styled, { withTheme } from "styled-components";
-import { light } from "shared/theme";
-import UiStore from "stores/UiStore";
-import ErrorBoundary from "components/ErrorBoundary";
-import Tooltip from "components/Tooltip";
-import embeds from "../embeds";
-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,
-  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;
-      }
-    }
-  }
-`;
-
-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} />
-));
@@ -0,0 +1,105 @@
+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 type { Props as EditorProps, Editor as SharedEditor } from "~/editor";
+import useDictionary from "~/hooks/useDictionary";
+import useToasts from "~/hooks/useToasts";
+import { uploadFile } from "~/utils/files";
+import history from "~/utils/history";
+import { isModKey } from "~/utils/keyboard";
+import { isHash } from "~/utils/urls";
+
+const LazyLoadedEditor = React.lazy(
+  () =>
+    import(
+      /* webpackChunkName: "shared-editor" */
+      "~/editor"
+    )
+);
+
+export type Props = Optional<
+  EditorProps,
+  | "placeholder"
+  | "defaultValue"
+  | "onClickLink"
+  | "embeds"
+  | "dictionary"
+  | "onShowToast"
+  | "extensions"
+> & {
+  shareId?: string | undefined;
+  embedsDisabled?: boolean;
+  grow?: boolean;
+  onSynced?: () => Promise<void>;
+  onPublish?: (event: React.MouseEvent) => any;
+};
+
+function Editor(props: Props, ref: React.Ref<SharedEditor>) {
+  const { id, shareId } = props;
+  const { showToast } = useToasts();
+  const dictionary = useDictionary();
+
+  const onUploadFile = 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]
+  );
+
+  return (
+    <ErrorBoundary reloadOnChunkMissing>
+      <LazyLoadedEditor
+        ref={ref}
+        uploadFile={onUploadFile}
+        onShowToast={showToast}
+        embeds={embeds}
+        dictionary={dictionary}
+        {...props}
+        onClickLink={onClickLink}
+        placeholder={props.placeholder || ""}
+        defaultValue={props.defaultValue || ""}
+      />
+    </ErrorBoundary>
+  );
+}
+
+export default React.forwardRef(Editor);
@@ -0,0 +1,32 @@
+import * as React from "react";
+import styled from "styled-components";
+
+type Props = {
+  /* The emoji to render */
+  emoji: string;
+  /* The size of the emoji, 24px is default to match standard icons */
+  size?: number;
+};
+
+/**
+ * EmojiIcon is a component that renders an emoji in the size of a standard icon
+ * in a way that can be used wherever an Icon would be.
+ */
+export default function EmojiIcon({ size = 24, emoji, ...rest }: Props) {
+  return (
+    <Span $size={size} {...rest}>
+      {emoji}
+    </Span>
+  );
+}
+
+const Span = styled.span<{ $size: number }>`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  width: ${(props) => props.$size}px;
+  height: ${(props) => props.$size}px;
+  text-indent: -0.15em;
+  font-size: 14px;
+`;
@@ -1,4 +1,3 @@
-// @flow
 import styled from "styled-components";

 const Empty = styled.p`
@@ -1,29 +1,30 @@
-// @flow
 import * as Sentry from "@sentry/react";
 import { observable } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
-import { withTranslation, type TFunction, Trans } from "react-i18next";
+import { withTranslation, Trans, WithTranslation } from "react-i18next";
 import styled from "styled-components";
-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";
+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 isHosted from "~/utils/isHosted";

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

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

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

@@ -35,7 +36,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(true);
+      window.location.reload();
      return;
    }

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

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

  handleShowDetails = () => {
@@ -61,7 +62,7 @@ class ErrorBoundary extends React.Component<Props> {

    if (this.error) {
      const error = this.error;
-      const isReported = !!env.SENTRY_DSN && env.DEPLOYMENT === "hosted";
+      const isReported = !!env.SENTRY_DSN && isHosted;
      const isChunkError = this.error.message.match(/chunk/);

      if (isChunkError) {
@@ -71,17 +72,15 @@ class ErrorBoundary extends React.Component<Props> {
            <h1>
              <Trans>Loading Failed</Trans>
            </h1>
-            <HelpText>
+            <Text type="secondary">
              <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>
-            </HelpText>
+            </Text>
            <p>
-              <Button onClick={this.handleReload}>
-                <Trans>Reload</Trans>
-              </Button>
+              <Button onClick={this.handleReload}>{t("Reload")}</Button>
            </p>
          </CenteredContent>
        );
@@ -93,7 +92,7 @@ class ErrorBoundary extends React.Component<Props> {
          <h1>
            <Trans>Something Unexpected Happened</Trans>
          </h1>
-          <HelpText>
+          <Text type="secondary">
            <Trans
              defaults="Sorry, an unrecoverable error occurred{{notified}}. Please try reloading the page, it may have been a temporary glitch."
              values={{
@@ -102,12 +101,10 @@ class ErrorBoundary extends React.Component<Props> {
                  : undefined,
              }}
            />
-          </HelpText>
+          </Text>
          {this.showDetails && <Pre>{error.toString()}</Pre>}
          <p>
-            <Button onClick={this.handleReload}>
-              <Trans>Reload</Trans>
-            </Button>{" "}
+            <Button onClick={this.handleReload}>{t("Reload")}</Button>{" "}
            {this.showDetails ? (
              <Button onClick={this.handleReportBug} neutral>
                <Trans>Report a Bug</Trans>…
@@ -121,6 +118,7 @@ class ErrorBoundary extends React.Component<Props> {
        </CenteredContent>
      );
    }
+
    return this.props.children;
  }
 }
@@ -133,4 +131,4 @@ const Pre = styled.pre`
  white-space: pre-wrap;
 `;

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

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

-export default function EventBoundary({ children, className }: Props) {
-  const handleClick = React.useCallback((event: SyntheticEvent<>) => {
+const EventBoundary: React.FC<Props> = ({ children, className }) => {
+  const handleClick = React.useCallback((event: React.SyntheticEvent) => {
    event.preventDefault();
    event.stopPropagation();
  }, []);
@@ -18,4 +15,6 @@ export default function EventBoundary({ children, className }: Props) {
      {children}
    </span>
  );
-}
+};
+
+export default EventBoundary;
@@ -0,0 +1,211 @@
+import {
+  TrashIcon,
+  ArchiveIcon,
+  EditIcon,
+  PublishIcon,
+  MoveIcon,
+  CheckboxIcon,
+} from "outline-icons";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { useLocation } from "react-router-dom";
+import { CompositeStateReturn } from "reakit/Composite";
+import styled, { css } from "styled-components";
+import Document from "~/models/Document";
+import Event from "~/models/Event";
+import Avatar from "~/components/Avatar";
+import CompositeItem, {
+  Props as ItemProps,
+} from "~/components/List/CompositeItem";
+import Item, { Actions } from "~/components/List/Item";
+import Time from "~/components/Time";
+import usePolicy from "~/hooks/usePolicy";
+import RevisionMenu from "~/menus/RevisionMenu";
+import { documentHistoryUrl } from "~/utils/routeHelpers";
+
+type Props = {
+  document: Document;
+  event: Event;
+  latest?: boolean;
+} & CompositeStateReturn;
+
+const EventListItem = ({ event, latest, document, ...rest }: Props) => {
+  const { t } = useTranslation();
+  const location = useLocation();
+  const can = usePolicy(document.id);
+  const opts = {
+    userName: event.actor.name,
+  };
+  const isRevision = event.name === "revisions.create";
+  let meta, icon, to;
+
+  const ref = React.useRef<HTMLAnchorElement>(null);
+  // the time component tends to steal focus when clicked
+  // ...so forward the focus back to the parent item
+  const handleTimeClick = React.useCallback(() => {
+    ref.current?.focus();
+  }, [ref]);
+
+  switch (event.name) {
+    case "revisions.create":
+    case "documents.latest_version": {
+      if (latest) {
+        icon = <CheckboxIcon color="currentColor" size={16} checked />;
+        meta = t("Latest version");
+        to = documentHistoryUrl(document);
+        break;
+      } else {
+        icon = <EditIcon color="currentColor" size={16} />;
+        meta = t("{{userName}} edited", opts);
+        to = documentHistoryUrl(document, event.modelId || "");
+        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);
+  }
+
+  if (!meta) {
+    return null;
+  }
+
+  const isActive = location.pathname === to;
+
+  if (document.isDeleted) {
+    to = undefined;
+  }
+
+  return (
+    <BaseItem
+      small
+      exact
+      to={to}
+      title={
+        <Time
+          dateTime={event.createdAt}
+          tooltipDelay={500}
+          format="MMM do, h:mm a"
+          relative={false}
+          addSuffix
+          onClick={handleTimeClick}
+        />
+      }
+      image={<Avatar src={event.actor?.avatarUrl} size={32} />}
+      subtitle={
+        <Subtitle>
+          {icon}
+          {meta}
+        </Subtitle>
+      }
+      actions={
+        isRevision && isActive && event.modelId && can.update ? (
+          <RevisionMenu document={document} revisionId={event.modelId} />
+        ) : undefined
+      }
+      ref={ref}
+      {...rest}
+    />
+  );
+};
+
+const BaseItem = React.forwardRef(
+  ({ to, ...rest }: ItemProps, ref?: React.Ref<HTMLAnchorElement>) => {
+    if (to) {
+      return <CompositeListItem to={to} ref={ref} {...rest} />;
+    }
+
+    return <ListItem ref={ref} {...rest} />;
+  }
+);
+
+const Subtitle = styled.span`
+  svg {
+    margin: -3px;
+    margin-right: 2px;
+  }
+`;
+
+const ItemStyle = css`
+  border: 0;
+  position: relative;
+  margin: 8px;
+  padding: 8px;
+  border-radius: 8px;
+
+  img {
+    border-color: transparent;
+  }
+
+  &::before {
+    content: "";
+    display: block;
+    position: absolute;
+    top: -4px;
+    left: 23px;
+    width: 2px;
+    height: calc(100% + 8px);
+    background: ${(props) => props.theme.textSecondary};
+    opacity: 0.25;
+  }
+
+  &:nth-child(2)::before {
+    height: 50%;
+    top: auto;
+    bottom: -4px;
+  }
+
+  &:last-child::before {
+    height: 50%;
+  }
+
+  &:first-child:last-child::before {
+    display: none;
+  }
+
+  ${Actions} {
+    opacity: 0.5;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+`;
+
+const ListItem = styled(Item)`
+  ${ItemStyle}
+`;
+
+const CompositeListItem = styled(CompositeItem)`
+  ${ItemStyle}
+`;
+
+export default EventListItem;
@@ -1,22 +1,21 @@
-// @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?: (event: SyntheticEvent<>) => mixed,
-  renderAvatar?: (user: User) => React.Node,
-|};
+type Props = {
+  users: User[];
+  size?: number;
+  overflow?: number;
+  onClick?: React.MouseEventHandler<HTMLDivElement>;
+  renderAvatar?: (user: User) => React.ReactNode;
+};

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

-const More = styled.div`
+const More = styled.div<{ size: number }>`
  display: flex;
  flex-direction: column;
  align-items: center;
--- a/Show More
+++ b/Show More