wip

fix: Add correct icon

.babelrc

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

.circleci/config.yml

@@ -1,12 +1,4 @@
-version: 2.1
-
-executors:
-  docker-publisher:
-    environment:
-      IMAGE_NAME: outlinewiki/outline
-    docker:
-      - image: circleci/buildpack-deps:stretch
-
+version: 2
 jobs:
   build:
     working_directory: ~/outline
@@ -41,95 +33,11 @@ jobs:
           name: lint
           command: yarn lint
       - run:
-          name: typescript
-          command: yarn tsc
+          name: flow
+          command: yarn flow check --max-workers 4
       - run:
           name: test
           command: yarn test
       - run:
           name: 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: /.*/
+          command: yarn build:webpack

.dockerignore

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

.env.sample

@@ -1,10 +1,19 @@
+# 👋 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`
+# Generate a unique 32 character hexadecimal key. The format is important as this
+# value is fed directly into encryption libraries. 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
 
@@ -21,13 +30,9 @@ REDIS_URL=redis://localhost:6479
 URL=http://localhost:3000
 PORT=3000
 
-# See [documentation](docs/SERVICES.md) on running a separate collaboration
-# server, for normal operation this does not need to be set.
-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:
@@ -65,48 +70,24 @@ 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
 
@@ -114,23 +95,19 @@ FORCE_HTTPS=true
 # the maintainers
 ENABLE_UPDATES=true
 
-# How many processes should be spawned. As a reasonable rule divide your servers
-# available memory by 512 for a rough estimate
-WEB_CONCURRENCY=1
-
 # Override the maxium size of document imports, could be required if you have
 # especially large Word documents with embedded imagery
 MAXIMUM_IMPORT_SIZE=5120000
 
-# You can remove this line if your reverse proxy already logs incoming http
-# requests and this ends up being duplicative
-DEBUG=http
+# You may enable or disable debugging categories to increase the noisiness of
+# logs. The default is a good balance
+DEBUG=cache,presenters,events,emails,mailer,utils,http,server,services
 
 # 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
 #
@@ -138,13 +115,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=
@@ -152,12 +129,10 @@ SMTP_USERNAME=
 SMTP_PASSWORD=
 SMTP_FROM_EMAIL=
 SMTP_REPLY_EMAIL=
-SMTP_TLS_CIPHERS=
-SMTP_SECURE=true
 
 # Custom logo that displays on the authentication screen, scaled to height: 60px
 # TEAM_LOGO=https://example.com/images/logo.png
 
-# The default interface language. See translate.getoutline.com for a list of
+# The default interface language. See translate.getoutline.com for a list of 
 # available language codes and their rough percentage translated.
 DEFAULT_LANGUAGE=en_US

.eslintrc

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

.flowconfig

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

.github/stale.yml

@@ -1,5 +1,5 @@
 # Number of days of inactivity before an issue becomes stale
-daysUntilStale: 120
+daysUntilStale: 90
 
 # Number of days of inactivity before a stale issue is closed
 daysUntilClose: 14

.github/workflows/codeql-analysis.yml

@@ -1,70 +0,0 @@
-# For most projects, this workflow file will not need changing; you simply need
-# to commit it to your repository.
-#
-# You may wish to alter this file to override the set of languages analyzed,
-# or to provide custom queries or build logic.
-#
-# ******** NOTE ********
-# We have attempted to detect the languages in your repository. Please check
-# the `language` matrix defined below to confirm you have the correct set of
-# supported CodeQL languages.
-#
-name: "CodeQL"
-
-on:
-  push:
-    branches: [ main ]
-  pull_request:
-    # The branches below must be a subset of the branches above
-    branches: [ main ]
-  schedule:
-    - cron: '28 15 * * 2'
-
-jobs:
-  analyze:
-    name: Analyze
-    runs-on: ubuntu-latest
-    permissions:
-      actions: read
-      contents: read
-      security-events: write
-
-    strategy:
-      fail-fast: false
-      matrix:
-        language: [ 'javascript' ]
-        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
-        # Learn more about CodeQL language support at https://git.io/codeql-language-support
-
-    steps:
-    - name: Checkout repository
-      uses: actions/checkout@v2
-
-    # Initializes the CodeQL tools for scanning.
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@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

.gitignore

@@ -8,6 +8,3 @@ stats.json
 .DS_Store
 fakes3/*
 .idea
-*.pem
-*.key
-*.cert

.vscode/settings.json

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

ARCHITECTURE.md

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

Dockerfile

@@ -1,51 +1,23 @@
-# syntax=docker/dockerfile:1.2
-ARG APP_PATH=/opt/outline
-FROM node:16-alpine AS deps-common
+FROM node:14-alpine
+
+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
+COPY package.json ./
+COPY yarn.lock ./
 
-# ---
-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
+RUN yarn --pure-lockfile
 
 COPY . .
-COPY --from=deps-dev $APP_PATH/node_modules ./node_modules
-ARG CDN_URL
-RUN yarn build
 
-# ---
-FROM node:16-alpine AS runner
+RUN yarn build && \
+  yarn --production --ignore-scripts --prefer-offline && \
+  rm -rf shared && \
+  rm -rf app
 
-ARG APP_PATH
-WORKDIR $APP_PATH
 ENV NODE_ENV production
-
-COPY --from=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
+CMD yarn start
 
 EXPOSE 3000
-CMD ["yarn", "start"]

LICENSE

@@ -3,7 +3,7 @@ Business Source License 1.1
 Parameters
 
 Licensor:             General Outline, Inc.
-Licensed Work:        Outline 0.60.1
+Licensed Work:        Outline 0.55.0
                       The Licensed Work is (c) 2020 General Outline, Inc.
 Additional Use Grant: You may make use of the Licensed Work, provided that
                       you may not use the Licensed Work for a Document
@@ -15,7 +15,7 @@ Additional Use Grant: You may make use of the Licensed Work, provided that
                       Licensed Work by creating teams and documents
                       controlled by such third parties.
 
-Change Date:          2025-11-11
+Change Date:          2024-04-22
 
 Change License:       Apache License, Version 2.0
 

Makefile

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

Procfile

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

README.md

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

__mocks__/bull.js

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

app.json

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

app/.eslintrc

@@ -1,9 +0,0 @@
-{
-  "extends": [
-    "../.eslintrc"
-  ],
-  "env": {
-    "jest": true,
-    "browser": true
-  }
-}

app/.jestconfig.json

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

app/actions/definitions/collections.tsx

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

app/actions/definitions/debug.tsx

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

app/actions/definitions/documents.tsx

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

app/actions/definitions/navigation.tsx

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

app/actions/definitions/settings.tsx

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

app/actions/definitions/users.tsx

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

app/actions/index.ts

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

app/actions/root.ts

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

app/actions/sections.ts

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

app/components/Actions.js

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

app/components/Analytics.js

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

app/components/Arrow.js

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

app/components/AuthLogo/GoogleLogo.js

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

app/components/AuthLogo/MicrosoftLogo.js

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

app/components/AuthLogo/SlackLogo.js

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

app/components/AuthLogo/index.js

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

app/components/Authenticated.js

@@ -1,15 +1,15 @@
+// @flow
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Redirect } from "react-router-dom";
-import { isCustomSubdomain } from "@shared/utils/domains";
-import LoadingIndicator from "~/components/LoadingIndicator";
-import env from "~/env";
-import useStores from "~/hooks/useStores";
-import { changeLanguage } from "~/utils/language";
+import { isCustomSubdomain } from "shared/utils/domains";
+import LoadingIndicator from "components/LoadingIndicator";
+import useStores from "../hooks/useStores";
+import env from "env";
 
 type Props = {
-  children: JSX.Element;
+  children: React.Node,
 };
 
 const Authenticated = ({ children }: Props) => {
@@ -20,7 +20,11 @@ const Authenticated = ({ children }: Props) => {
   // Watching for language changes here as this is the earliest point we have
   // the user available and means we can start loading translations faster
   React.useEffect(() => {
-    changeLanguage(language, i18n);
+    if (language && i18n.language !== language) {
+      // Languages are stored in en_US format in the database, however the
+      // frontend translation framework (i18next) expects en-US
+      i18n.changeLanguage(language.replace("_", "-"));
+    }
   }, [i18n, language]);
 
   if (auth.authenticated) {

app/components/AuthenticatedLayout.tsx

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

app/components/Avatar/Avatar.js

@@ -1,24 +1,23 @@
+// @flow
 import { observable } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
 import styled from "styled-components";
-import User from "~/models/User";
+import User from "models/User";
 import placeholder from "./placeholder.png";
 
-type Props = {
-  src: string;
-  size: number;
-  icon?: React.ReactNode;
-  user?: User;
-  alt?: string;
-  onClick?: React.MouseEventHandler<HTMLImageElement>;
-  className?: string;
-};
+type Props = {|
+  src: string,
+  size: number,
+  icon?: React.Node,
+  user?: User,
+  onClick?: () => void,
+  className?: string,
+|};
 
 @observer
 class Avatar extends React.Component<Props> {
-  @observable
-  error: boolean;
+  @observable error: boolean;
 
   static defaultProps = {
     size: 24,
@@ -30,6 +29,7 @@ class Avatar extends React.Component<Props> {
 
   render() {
     const { src, icon, ...rest } = this.props;
+
     return (
       <AvatarWrapper>
         <CircleImg
@@ -59,7 +59,7 @@ const IconWrapper = styled.div`
   height: 20px;
 `;
 
-const CircleImg = styled.img<{ size: number }>`
+const CircleImg = styled.img`
   display: block;
   width: ${(props) => props.size}px;
   height: ${(props) => props.size}px;

app/components/Avatar/AvatarWithPresence.js

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

app/components/Avatar/AvatarWithPresence.tsx

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

app/components/Avatar/index.js

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

app/components/Badge.js

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

app/components/Branding.js

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

app/components/Breadcrumb.js

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

app/components/Bubble.js

@@ -1,10 +1,11 @@
+// @flow
 import * as React from "react";
 import styled from "styled-components";
-import { bounceIn } from "~/styles/animations";
+import { bounceIn } from "shared/styles/animations";
 
-type Props = {
-  count: number;
-};
+type Props = {|
+  count: number,
+|};
 
 const Bubble = ({ count }: Props) => {
   if (!count) {

app/components/Button.js

@@ -1,15 +1,10 @@
+// @flow
 import { ExpandedIcon } from "outline-icons";
-import { darken, lighten } from "polished";
+import { darken } from "polished";
 import * as React from "react";
 import styled from "styled-components";
 
-const RealButton = styled.button<{
-  fullwidth?: boolean;
-  borderOnHover?: boolean;
-  $neutral?: boolean;
-  danger?: boolean;
-  iconColor?: string;
-}>`
+const RealButton = styled.button`
   display: ${(props) => (props.fullwidth ? "block" : "inline-block")};
   width: ${(props) => (props.fullwidth ? "100%" : "auto")};
   margin: 0;
@@ -26,13 +21,12 @@ const RealButton = styled.button<{
   flex-shrink: 0;
   cursor: pointer;
   user-select: none;
-  appearance: none !important;
 
   ${(props) =>
     !props.borderOnHover &&
     `
       svg {
-        fill: ${props.iconColor || "currentColor"};
+        fill: ${props.iconColor || props.theme.buttonText};
       }
     `}
 
@@ -41,7 +35,7 @@ const RealButton = styled.button<{
     border: 0;
   }
 
-  &:hover:not(:disabled) {
+  &:hover {
     background: ${(props) => darken(0.05, props.theme.buttonBackground)};
   }
 
@@ -49,11 +43,6 @@ const RealButton = styled.button<{
     cursor: default;
     pointer-events: none;
     color: ${(props) => props.theme.white50};
-    background: ${(props) => lighten(0.2, props.theme.buttonBackground)};
-
-    svg {
-      fill: ${(props) => props.theme.white50};
-    }
   }
 
   ${(props) =>
@@ -71,17 +60,13 @@ const RealButton = styled.button<{
       props.borderOnHover
         ? ""
         : `svg {
-      fill: ${props.iconColor || "currentColor"};
+      fill: ${props.iconColor || props.theme.buttonNeutralText};
     }`
     }
+    
 
-
-    &:hover:not(:disabled) {
-      background: ${
-        props.borderOnHover
-          ? props.theme.buttonNeutralBackground
-          : darken(0.05, props.theme.buttonNeutralBackground)
-      };
+    &: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;
@@ -89,31 +74,20 @@ const RealButton = styled.button<{
 
     &:disabled {
       color: ${props.theme.textTertiary};
-      background: none;
-
-      svg {
-        fill: currentColor;
-      }
     }
-  `}
-
-  ${(props) =>
+  `} ${(props) =>
     props.danger &&
     `
       background: ${props.theme.danger};
       color: ${props.theme.white};
 
-      &:hover:not(:disabled) {
+      &:hover {
         background: ${darken(0.05, props.theme.danger)};
       }
-
-      &:disabled {
-        background: none;
-      }
   `};
 `;
 
-const Label = styled.span<{ hasIcon?: boolean }>`
+const Label = styled.span`
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -121,11 +95,7 @@ const Label = styled.span<{ hasIcon?: boolean }>`
   ${(props) => props.hasIcon && "padding-left: 4px;"};
 `;
 
-export const Inner = styled.span<{
-  disclosure?: boolean;
-  hasIcon?: boolean;
-  hasText?: boolean;
-}>`
+export const Inner = styled.span`
   display: flex;
   padding: 0 8px;
   padding-right: ${(props) => (props.disclosure ? 2 : 8)}px;
@@ -138,41 +108,58 @@ export const Inner = styled.span<{
   ${(props) => props.hasIcon && !props.hasText && "padding: 0 4px;"};
 `;
 
-export type Props<T> = {
-  icon?: React.ReactNode;
-  iconColor?: string;
-  children?: React.ReactNode;
-  disclosure?: boolean;
-  neutral?: boolean;
-  danger?: boolean;
-  primary?: boolean;
-  fullwidth?: boolean;
-  as?: T;
-  to?: string;
-  borderOnHover?: boolean;
-  href?: string;
-  "data-on"?: string;
-  "data-event-category"?: string;
-  "data-event-action"?: string;
-};
+export type Props = {|
+  type?: "button" | "submit",
+  value?: string,
+  icon?: React.Node,
+  iconColor?: string,
+  className?: string,
+  children?: React.Node,
+  innerRef?: React.ElementRef<any>,
+  disclosure?: boolean,
+  neutral?: boolean,
+  danger?: boolean,
+  primary?: boolean,
+  disabled?: boolean,
+  fullwidth?: boolean,
+  autoFocus?: boolean,
+  style?: Object,
+  as?: React.ComponentType<any>,
+  to?: string,
+  onClick?: (event: SyntheticEvent<>) => mixed,
+  borderOnHover?: boolean,
 
-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;
+  "data-on"?: string,
+  "data-event-category"?: string,
+  "data-event-action"?: string,
+|};
 
-  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>
-  );
-};
+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;
 
-export default React.forwardRef(Button);
+    return (
+      <RealButton type={type} ref={innerRef} $neutral={neutral} {...rest}>
+        <Inner hasIcon={hasIcon} hasText={hasText} disclosure={disclosure}>
+          {hasIcon && icon}
+          {hasText && <Label hasIcon={hasIcon}>{children || value}</Label>}
+          {disclosure && <ExpandedIcon />}
+        </Inner>
+      </RealButton>
+    );
+  }
+);
+
+export default Button;

app/components/ButtonLarge.js

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

app/components/ButtonLink.js

@@ -1,16 +1,15 @@
+// @flow
 import * as React from "react";
 import styled from "styled-components";
 
 type Props = {
-  onClick?: React.MouseEventHandler<HTMLButtonElement>;
-  children: React.ReactNode;
+  onClick: (ev: SyntheticEvent<>) => void,
+  children: React.Node,
 };
 
-const ButtonLink = React.forwardRef(
-  (props: Props, ref: React.Ref<HTMLButtonElement>) => {
-    return <Button {...props} ref={ref} />;
-  }
-);
+export default function ButtonLink(props: Props) {
+  return <Button {...props} />;
+}
 
 const Button = styled.button`
   margin: 0;
@@ -22,5 +21,3 @@ const Button = styled.button`
   text-decoration: none;
   cursor: pointer;
 `;
-
-export default ButtonLink;

app/components/CenteredContent.js

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

app/components/Checkbox.js

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

app/components/CircularProgressBar.tsx

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

app/components/ClickablePadding.js

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

app/components/Collaborators.js

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

app/components/Collaborators.tsx

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

app/components/CollectionDescription.js

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

app/components/CollectionIcon.js

@@ -1,35 +1,29 @@
+// @flow
 import { observer } from "mobx-react";
 import { CollectionIcon } from "outline-icons";
 import { getLuminance } from "polished";
 import * as React from "react";
-import Collection from "~/models/Collection";
-import { icons } from "~/components/IconPicker";
-import useStores from "~/hooks/useStores";
+import Collection from "models/Collection";
+import { icons } from "components/IconPicker";
+import useStores from "hooks/useStores";
 
 type Props = {
-  collection: Collection;
-  expanded?: boolean;
-  size?: number;
-  color?: string;
+  collection: Collection,
+  expanded?: boolean,
+  size?: number,
 };
 
-function ResolvedCollectionIcon({
-  collection,
-  color: inputColor,
-  expanded,
-  size,
-}: Props) {
+function ResolvedCollectionIcon({ collection, expanded, size }: Props) {
   const { ui } = useStores();
 
   // If the chosen icon color is very dark then we invert it in dark mode
   // otherwise it will be impossible to see against the dark background.
   const color =
-    inputColor ||
-    (ui.resolvedTheme === "dark" && collection.color !== "currentColor"
-      ? getLuminance(collection.color) > 0.09
+    ui.resolvedTheme === "dark" && collection.color !== "currentColor"
+      ? getLuminance(collection.color) > 0.12
         ? collection.color
         : "currentColor"
-      : collection.color);
+      : collection.color;
 
   if (collection.icon && collection.icon !== "collection") {
     try {

app/components/CommandBar.tsx

@@ -1,100 +0,0 @@
-import { useKBar, KBarPositioner, KBarAnimator, KBarSearch } from "kbar";
-import { observer } from "mobx-react";
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-import { Portal } from "react-portal";
-import styled from "styled-components";
-import breakpoint from "styled-components-breakpoint";
-import CommandBarResults from "~/components/CommandBarResults";
-import rootActions from "~/actions/root";
-import useCommandBarActions from "~/hooks/useCommandBarActions";
-import { CommandBarAction } from "~/types";
-
-export const CommandBarOptions = {
-  animations: {
-    enterMs: 250,
-    exitMs: 200,
-  },
-};
-
-function CommandBar() {
-  const { t } = useTranslation();
-  useCommandBarActions(rootActions);
-
-  const { rootAction } = useKBar((state) => ({
-    rootAction: state.currentRootActionId
-      ? ((state.actions[
-          state.currentRootActionId
-        ] as unknown) as CommandBarAction)
-      : undefined,
-  }));
-
-  return (
-    <KBarPortal>
-      <Positioner>
-        <Animator>
-          <SearchInput
-            placeholder={`${
-              rootAction?.placeholder ||
-              rootAction?.name ||
-              t("Type a command or search")
-            }…`}
-          />
-          <CommandBarResults />
-        </Animator>
-      </Positioner>
-    </KBarPortal>
-  );
-}
-
-function KBarPortal({ children }: { children: React.ReactNode }) {
-  const { showing } = useKBar((state) => ({
-    showing: state.visualState !== "hidden",
-  }));
-
-  if (!showing) {
-    return null;
-  }
-
-  return <Portal>{children}</Portal>;
-}
-
-const Positioner = styled(KBarPositioner)`
-  z-index: ${(props) => props.theme.depths.commandBar};
-`;
-
-const SearchInput = styled(KBarSearch)`
-  padding: 16px 20px;
-  width: 100%;
-  outline: none;
-  border: none;
-  background: ${(props) => props.theme.menuBackground};
-  color: ${(props) => props.theme.text};
-
-  &:disabled,
-  &::placeholder {
-    color: ${(props) => props.theme.placeholder};
-  }
-`;
-
-const Animator = styled(KBarAnimator)`
-  max-width: 600px;
-  max-height: 75vh;
-  width: 90vw;
-  background: ${(props) => props.theme.menuBackground};
-  color: ${(props) => props.theme.text};
-  border-radius: 8px;
-  overflow: hidden;
-  box-shadow: rgb(0 0 0 / 40%) 0px 16px 60px;
-  transition: max-width 0.2s ease-in-out;
-
-  ${breakpoint("desktopLarge")`
-    max-width: 740px;
-  `};
-
-  @media print {
-    display: none;
-  }
-`;
-
-export default observer(CommandBar);

app/components/CommandBarItem.tsx

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

app/components/CommandBarResults.tsx

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

app/components/ConnectionStatus.tsx

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

app/components/ContentEditable.tsx

@@ -1,120 +0,0 @@
-import isPrintableKeyEvent from "is-printable-key-event";
-import * as React from "react";
-import styled from "styled-components";
-
-type Props = Omit<React.HTMLAttributes<HTMLSpanElement>, "ref" | "onChange"> & {
-  disabled?: boolean;
-  readOnly?: boolean;
-  onClick?: React.MouseEventHandler<HTMLDivElement>;
-  onChange?: (text: string) => void;
-  onBlur?: React.FocusEventHandler<HTMLSpanElement> | undefined;
-  onInput?: React.FormEventHandler<HTMLSpanElement> | undefined;
-  onKeyDown?: React.KeyboardEventHandler<HTMLSpanElement> | undefined;
-  placeholder?: string;
-  maxLength?: number;
-  autoFocus?: boolean;
-  children?: React.ReactNode;
-  value: string;
-};
-
-/**
- * Defines a content editable component with the same interface as a native
- * HTMLInputElement (or, as close as we can get).
- */
-const ContentEditable = React.forwardRef(
-  (
-    {
-      disabled,
-      onChange,
-      onInput,
-      onBlur,
-      onKeyDown,
-      value,
-      children,
-      className,
-      maxLength,
-      autoFocus,
-      placeholder,
-      readOnly,
-      dir,
-      onClick,
-      ...rest
-    }: Props,
-    forwardedRef: React.RefObject<HTMLSpanElement>
-  ) => {
-    const innerRef = React.useRef<HTMLSpanElement>(null);
-    const ref = forwardedRef || innerRef;
-    const [innerValue, setInnerValue] = React.useState<string>(value);
-    const lastValue = React.useRef("");
-
-    const wrappedEvent = (
-      callback:
-        | React.FocusEventHandler<HTMLSpanElement>
-        | React.FormEventHandler<HTMLSpanElement>
-        | React.KeyboardEventHandler<HTMLSpanElement>
-        | undefined
-    ) => (event: any) => {
-      const text = ref.current?.innerText || "";
-
-      if (maxLength && isPrintableKeyEvent(event) && text.length >= maxLength) {
-        event?.preventDefault();
-        return;
-      }
-
-      if (text !== lastValue.current) {
-        lastValue.current = text;
-        onChange && onChange(text);
-      }
-
-      callback?.(event);
-    };
-
-    React.useLayoutEffect(() => {
-      if (autoFocus) {
-        ref.current?.focus();
-      }
-    }, [autoFocus, ref]);
-
-    React.useEffect(() => {
-      if (value !== ref.current?.innerText) {
-        setInnerValue(value);
-      }
-    }, [value, ref]);
-
-    return (
-      <div className={className} dir={dir} onClick={onClick}>
-        <Content
-          ref={ref}
-          contentEditable={!disabled && !readOnly}
-          onInput={wrappedEvent(onInput)}
-          onBlur={wrappedEvent(onBlur)}
-          onKeyDown={wrappedEvent(onKeyDown)}
-          data-placeholder={placeholder}
-          suppressContentEditableWarning
-          role="textbox"
-          {...rest}
-        >
-          {innerValue}
-        </Content>
-        {children}
-      </div>
-    );
-  }
-);
-
-const Content = styled.span`
-  &:empty {
-    display: inline-block;
-  }
-
-  &:empty::before {
-    display: inline-block;
-    color: ${(props) => props.theme.placeholder};
-    -webkit-text-fill-color: ${(props) => props.theme.placeholder};
-    content: attr(data-placeholder);
-    pointer-events: none;
-    height: 0;
-  }
-`;
-
-export default ContentEditable;

app/components/ContextMenu/Header.js

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

app/components/ContextMenu/MenuItem.js

@@ -1,25 +1,21 @@
+// @flow
 import { CheckmarkIcon } from "outline-icons";
 import * as React from "react";
 import { MenuItem as BaseMenuItem } from "reakit/Menu";
-import styled, { css } from "styled-components";
+import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import { hover } from "~/styles";
-import MenuIconWrapper from "../MenuIconWrapper";
 
-type Props = {
-  onClick?: (arg0: React.SyntheticEvent) => void | Promise<void>;
-  children?: React.ReactNode;
-  selected?: boolean;
-  disabled?: boolean;
-  dangerous?: boolean;
-  to?: string;
-  href?: string;
-  target?: "_blank";
-  as?: string | React.ComponentType<any>;
-  hide?: () => void;
-  level?: number;
-  icon?: React.ReactElement;
-};
+type Props = {|
+  onClick?: (SyntheticEvent<>) => void | Promise<void>,
+  children?: React.Node,
+  selected?: boolean,
+  disabled?: boolean,
+  to?: string,
+  href?: string,
+  target?: "_blank",
+  as?: string | React.ComponentType<*>,
+  hide?: () => void,
+|};
 
 const MenuItem = ({
   onClick,
@@ -28,32 +24,20 @@ const MenuItem = ({
   disabled,
   as,
   hide,
-  icon,
   ...rest
 }: Props) => {
   const handleClick = React.useCallback(
     (ev) => {
       if (onClick) {
-        ev.preventDefault();
-        ev.stopPropagation();
         onClick(ev);
       }
-
       if (hide) {
         hide();
       }
     },
-    [onClick, hide]
+    [hide, onClick]
   );
 
-  // Preventing default mousedown otherwise menu items do not work in Firefox,
-  // which triggers the hideOnClickOutside handler first via mousedown – hiding
-  // and un-rendering the menu contents.
-  const handleMouseDown = React.useCallback((ev) => {
-    ev.preventDefault();
-    ev.stopPropagation();
-  }, []);
-
   return (
     <BaseMenuItem
       onClick={disabled ? undefined : onClick}
@@ -67,7 +51,6 @@ const MenuItem = ({
           $toggleable={selected !== undefined}
           as={onClick ? "button" : as}
           onClick={handleClick}
-          onMouseDown={handleMouseDown}
         >
           {selected !== undefined && (
             <>
@@ -75,11 +58,6 @@ const MenuItem = ({
               &nbsp;
             </>
           )}
-          {icon && (
-            <MenuIconWrapper>
-              {React.cloneElement(icon, { color: "currentColor" })}
-            </MenuIconWrapper>
-          )}
           {children}
         </MenuAnchor>
       )}
@@ -93,16 +71,11 @@ const Spacer = styled.svg`
   flex-shrink: 0;
 `;
 
-export const MenuAnchorCSS = css<{
-  level?: number;
-  disabled?: boolean;
-  dangerous?: boolean;
-}>`
+export const MenuAnchor = styled.a`
   display: flex;
   margin: 0;
   border: 0;
   padding: 12px;
-  padding-left: ${(props) => 12 + (props.level || 0) * 10}px;
   width: 100%;
   min-height: 32px;
   background: none;
@@ -113,7 +86,6 @@ export const MenuAnchorCSS = css<{
   font-size: 16px;
   cursor: default;
   user-select: none;
-  white-space: nowrap;
 
   svg:not(:last-child) {
     margin-right: 4px;
@@ -129,11 +101,10 @@ export const MenuAnchorCSS = css<{
       ? "pointer-events: none;"
       : `
 
-  &:${hover},
-  &:focus,
+  &:hover,
   &.focus-visible {
     color: ${props.theme.white};
-    background: ${props.dangerous ? props.theme.danger : props.theme.primary};
+    background: ${props.theme.primary};
     box-shadow: none;
     cursor: pointer;
 
@@ -141,16 +112,17 @@ export const MenuAnchorCSS = css<{
       fill: ${props.theme.white};
     }
   }
+
+  &:focus {
+    color: ${props.theme.white};
+    background: ${props.theme.primary};
+  }
   `};
 
   ${breakpoint("tablet")`
-    padding: 4px 12px;
-    font-size: 14px;
+    padding: ${(props) => (props.$toggleable ? "4px 12px" : "6px 12px")};
+    font-size: 15px;
   `};
 `;
 
-export const MenuAnchor = styled.a`
-  ${MenuAnchorCSS}
-`;
-
 export default MenuItem;

app/components/ContextMenu/OverflowMenuButton.js

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

app/components/ContextMenu/Separator.js

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

app/components/ContextMenu/Template.js

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

app/components/ContextMenu/Template.tsx

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

app/components/ContextMenu/index.js

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

app/components/ContextMenu/index.tsx

@@ -1,177 +0,0 @@
-import * as React from "react";
-import { Portal } from "react-portal";
-import { Menu } from "reakit/Menu";
-import styled from "styled-components";
-import breakpoint from "styled-components-breakpoint";
-import useMenuHeight from "~/hooks/useMenuHeight";
-import usePrevious from "~/hooks/usePrevious";
-import {
-  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;
-  children: React.ReactNode;
-  unstable_disclosureRef?: React.RefObject<HTMLElement | null>;
-  onOpen?: () => void;
-  onClose?: () => void;
-  hide?: () => void;
-};
-
-export default function ContextMenu({
-  children,
-  onOpen,
-  onClose,
-  ...rest
-}: Props) {
-  const previousVisible = usePrevious(rest.visible);
-  const maxHeight = useMenuHeight(rest.visible, rest.unstable_disclosureRef);
-  const backgroundRef = React.useRef<HTMLDivElement>(null);
-
-  React.useEffect(() => {
-    if (rest.visible && !previousVisible) {
-      if (onOpen) {
-        onOpen();
-      }
-    }
-
-    if (!rest.visible && previousVisible) {
-      if (onClose) {
-        onClose();
-      }
-    }
-  }, [onOpen, onClose, previousVisible, rest.visible]);
-
-  // Perf win – don't render anything until the menu has been opened
-  if (!rest.visible && !previousVisible) {
-    return null;
-  }
-
-  // sets the menu height based on the available space between the disclosure/
-  // trigger and the bottom of the window
-  return (
-    <>
-      <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 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};
-  `};
-`;

app/components/CopyToClipboard.js

@@ -1,25 +1,23 @@
+// @flow
 import copy from "copy-to-clipboard";
 import * as React from "react";
 
 type Props = {
-  text: string;
-  children?: React.ReactElement;
-  onClick?: React.MouseEventHandler<HTMLButtonElement>;
-  onCopy: () => void;
+  text: string,
+  children?: React.Node,
+  onClick?: () => void,
+  onCopy: () => void,
 };
 
 class CopyToClipboard extends React.PureComponent<Props> {
-  onClick = (ev: React.SyntheticEvent) => {
+  onClick = (ev: SyntheticEvent<>) => {
     const { text, onCopy, children } = this.props;
     const elem = React.Children.only(children);
-
     copy(text, {
       debug: process.env.NODE_ENV !== "production",
-      format: "text/plain",
     });
-    if (onCopy) {
-      onCopy();
-    }
+
+    if (onCopy) onCopy();
 
     if (elem && elem.props && typeof elem.props.onClick === "function") {
       elem.props.onClick(ev);
@@ -27,12 +25,8 @@ class CopyToClipboard extends React.PureComponent<Props> {
   };
 
   render() {
-    const { text, onCopy, children, ...rest } = this.props;
+    const { text: _text, onCopy: _onCopy, children, ...rest } = this.props;
     const elem = React.Children.only(children);
-    if (!elem) {
-      return null;
-    }
-
     return React.cloneElement(elem, { ...rest, onClick: this.onClick });
   }
 }

app/components/DefaultCollectionInputSelect.tsx

@@ -1,103 +0,0 @@
-import { HomeIcon } from "outline-icons";
-import React, { useState } from "react";
-import { useTranslation } from "react-i18next";
-import CollectionIcon from "~/components/CollectionIcon";
-import Flex from "~/components/Flex";
-import InputSelect from "~/components/InputSelect";
-import { IconWrapper } from "~/components/Sidebar/components/SidebarLink";
-import useStores from "~/hooks/useStores";
-import useToasts from "~/hooks/useToasts";
-
-type DefaultCollectionInputSelectProps = {
-  onSelectCollection: (collection: string) => void;
-  defaultCollectionId: string | null;
-};
-
-const DefaultCollectionInputSelect = ({
-  onSelectCollection,
-  defaultCollectionId,
-}: DefaultCollectionInputSelectProps) => {
-  const { t } = useTranslation();
-  const { collections } = useStores();
-  const [fetching, setFetching] = useState(false);
-  const [fetchError, setFetchError] = useState();
-  const { showToast } = useToasts();
-
-  React.useEffect(() => {
-    async function load() {
-      if (!collections.isLoaded && !fetching && !fetchError) {
-        try {
-          setFetching(true);
-          await collections.fetchPage({
-            limit: 100,
-          });
-        } catch (error) {
-          showToast(
-            t("Collections could not be loaded, please reload the app"),
-            {
-              type: "error",
-            }
-          );
-          setFetchError(error);
-        } finally {
-          setFetching(false);
-        }
-      }
-    }
-    load();
-  }, [showToast, fetchError, t, fetching, collections]);
-
-  const options = React.useMemo(
-    () =>
-      collections.publicCollections.reduce(
-        (acc, collection) => [
-          ...acc,
-          {
-            label: (
-              <Flex align="center">
-                <IconWrapper>
-                  <CollectionIcon collection={collection} />
-                </IconWrapper>
-                {collection.name}
-              </Flex>
-            ),
-            value: collection.id,
-          },
-        ],
-        [
-          {
-            label: (
-              <Flex align="center">
-                <IconWrapper>
-                  <HomeIcon color="currentColor" />
-                </IconWrapper>
-                {t("Home")}
-              </Flex>
-            ),
-            value: "home",
-          },
-        ]
-      ),
-    [collections.publicCollections, t]
-  );
-
-  if (fetching) {
-    return null;
-  }
-
-  return (
-    <InputSelect
-      value={defaultCollectionId ?? "home"}
-      label={t("Start view")}
-      options={options}
-      onChange={onSelectCollection}
-      ariaLabel={t("Default collection")}
-      note={t(
-        "This is the screen that team members will first see when they sign in."
-      )}
-      short
-    />
-  );
-};
-
-export default DefaultCollectionInputSelect;

app/components/DelayedMount.js

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

app/components/Dialogs.tsx

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

app/components/Divider.js

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

app/components/DocumentBreadcrumb.js

@@ -0,0 +1,137 @@
+// @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",
+    };
+  }
+
+  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.id),
+      });
+    }
+
+    path.forEach((p) => {
+      output.push({
+        title: p.title,
+        to: p.url,
+      });
+    });
+
+    return output;
+  }, [path, category, collection]);
+
+  if (!collections.isLoaded) {
+    return;
+  }
+
+  if (onlyText === true) {
+    return (
+      <>
+        {collection.name}
+        {path.map((n) => (
+          <React.Fragment key={n.id}>
+            <SmallSlash />
+            {n.title}
+          </React.Fragment>
+        ))}
+      </>
+    );
+  }
+
+  return <Breadcrumb items={items} children={children} highlightFirstItem />;
+};
+
+const SmallSlash = styled(GoToIcon)`
+  width: 12px;
+  height: 12px;
+  vertical-align: middle;
+  flex-shrink: 0;
+
+  fill: ${(props) => props.theme.slate};
+  opacity: 0.5;
+`;
+
+export default observer(DocumentBreadcrumb);

app/components/DocumentBreadcrumb.tsx

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

app/components/DocumentCard.tsx

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

app/components/DocumentHistory.tsx

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

app/components/DocumentHistory/DocumentHistory.js

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

app/components/DocumentHistory/components/Revision.js

@@ -0,0 +1,87 @@
+// @flow
+import format from "date-fns/format";
+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(revision.createdAt, "MMMM Do, YYYY h:mm a")}
+          </Time>
+        </Meta>
+        {showMenu && (
+          <StyledRevisionMenu
+            document={document}
+            revision={revision}
+            iconColor={selected ? theme.white : theme.textTertiary}
+          />
+        )}
+      </StyledNavLink>
+    );
+  }
+}
+
+const StyledAvatar = styled(Avatar)`
+  border-color: transparent;
+  margin-right: 4px;
+`;
+
+const StyledRevisionMenu = styled(RevisionMenu)`
+  position: absolute;
+  right: 16px;
+  top: 20px;
+`;
+
+const StyledNavLink = styled(NavLink)`
+  color: ${(props) => props.theme.text};
+  display: block;
+  padding: 8px 16px;
+  font-size: 15px;
+  position: relative;
+`;
+
+const Author = styled(Flex)`
+  font-weight: 500;
+  padding: 0;
+  margin: 0;
+`;
+
+const Meta = styled.p`
+  font-size: 14px;
+  opacity: 0.75;
+  margin: 0 0 2px;
+  padding: 0;
+`;
+
+export default withTheme(RevisionListItem);

app/components/DocumentHistory/index.js

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

app/components/DocumentList.js

@@ -1,20 +1,22 @@
+// @flow
 import ArrowKeyNavigation from "boundless-arrow-key-navigation";
 import * as React from "react";
-import Document from "~/models/Document";
-import DocumentListItem from "~/components/DocumentListItem";
+import Document from "models/Document";
+import DocumentListItem from "components/DocumentListItem";
 
-type Props = {
-  documents: Document[];
-  limit?: number;
-  showCollection?: boolean;
-  showPublished?: boolean;
-  showPin?: boolean;
-  showDraft?: boolean;
-  showTemplate?: boolean;
-};
+type Props = {|
+  documents: Document[],
+  limit?: number,
+  showCollection?: boolean,
+  showPublished?: boolean,
+  showPin?: boolean,
+  showDraft?: boolean,
+  showTemplate?: boolean,
+|};
 
 export default function DocumentList({ limit, documents, ...rest }: Props) {
   const items = limit ? documents.splice(0, limit) : documents;
+
   return (
     <ArrowKeyNavigation
       mode={ArrowKeyNavigation.mode.VERTICAL}

app/components/DocumentListItem.js

@@ -1,3 +1,4 @@
+// @flow
 import { observer } from "mobx-react";
 import { PlusIcon } from "outline-icons";
 import * as React from "react";
@@ -5,34 +6,33 @@ import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import styled, { css } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import Document from "~/models/Document";
-import Badge from "~/components/Badge";
-import Button from "~/components/Button";
-import DocumentMeta from "~/components/DocumentMeta";
-import EventBoundary from "~/components/EventBoundary";
-import Flex from "~/components/Flex";
-import Highlight from "~/components/Highlight";
-import StarButton, { AnimatedStar } from "~/components/Star";
-import Tooltip from "~/components/Tooltip";
-import useBoolean from "~/hooks/useBoolean";
-import useCurrentTeam from "~/hooks/useCurrentTeam";
-import useCurrentUser from "~/hooks/useCurrentUser";
-import useStores from "~/hooks/useStores";
-import DocumentMenu from "~/menus/DocumentMenu";
-import { hover } from "~/styles";
-import { newDocumentPath } from "~/utils/routeHelpers";
+import Document from "models/Document";
+import Badge from "components/Badge";
+import Button from "components/Button";
+import DocumentMeta from "components/DocumentMeta";
+import EventBoundary from "components/EventBoundary";
+import Flex from "components/Flex";
+import Highlight from "components/Highlight";
+import StarButton, { AnimatedStar } from "components/Star";
+import Tooltip from "components/Tooltip";
+import useCurrentTeam from "hooks/useCurrentTeam";
+import useCurrentUser from "hooks/useCurrentUser";
+import useStores from "hooks/useStores";
+import DocumentMenu from "menus/DocumentMenu";
+import { newDocumentUrl } from "utils/routeHelpers";
+
+type Props = {|
+  document: Document,
+  highlight?: ?string,
+  context?: ?string,
+  showNestedDocuments?: boolean,
+  showCollection?: boolean,
+  showPublished?: boolean,
+  showPin?: boolean,
+  showDraft?: boolean,
+  showTemplate?: boolean,
+|};
 
-type Props = {
-  document: Document;
-  highlight?: string | undefined;
-  context?: string | undefined;
-  showParentDocuments?: boolean;
-  showCollection?: boolean;
-  showPublished?: boolean;
-  showPin?: boolean;
-  showDraft?: boolean;
-  showTemplate?: boolean;
-};
 const SEARCH_RESULT_REGEX = /<b\b[^>]*>(.*?)<\/b>/gi;
 
 function replaceResultMarks(tag: string) {
@@ -41,19 +41,15 @@ function replaceResultMarks(tag: string) {
   return tag.replace(/<b\b[^>]*>(.*?)<\/b>/gi, "$1");
 }
 
-function DocumentListItem(
-  props: Props,
-  ref: React.RefObject<HTMLAnchorElement>
-) {
+function DocumentListItem(props: Props) {
   const { t } = useTranslation();
   const { policies } = useStores();
   const currentUser = useCurrentUser();
   const currentTeam = useCurrentTeam();
-  const [menuOpen, handleMenuOpen, handleMenuClose] = useBoolean();
-
+  const [menuOpen, setMenuOpen] = React.useState(false);
   const {
     document,
-    showParentDocuments,
+    showNestedDocuments,
     showCollection,
     showPublished,
     showPin,
@@ -62,35 +58,27 @@ function DocumentListItem(
     highlight,
     context,
   } = 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 canCollection = policies.abilities(document.collectionId);
 
   return (
     <DocumentLink
-      ref={ref}
-      dir={document.dir}
       $isStarred={document.isStarred}
       $menuOpen={menuOpen}
       to={{
         pathname: document.url,
-        state: {
-          title: document.titleWithDefault,
-        },
+        state: { title: document.titleWithDefault },
       }}
     >
       <Content>
-        <Heading dir={document.dir}>
-          <Title
-            text={document.titleWithDefault}
-            highlight={highlight}
-            dir={document.dir}
-          />
-          {document.isBadgedNew && document.createdBy.id !== currentUser.id && (
+        <Heading>
+          <Title text={document.titleWithDefault} highlight={highlight} />
+          {document.isNew && document.createdBy.id !== currentUser.id && (
             <Badge yellow>{t("New")}</Badge>
           )}
           {canStar && (
@@ -123,7 +111,7 @@ function DocumentListItem(
           document={document}
           showCollection={showCollection}
           showPublished={showPublished}
-          showParentDocuments={showParentDocuments}
+          showNestedDocuments={showNestedDocuments}
           showLastViewed
         />
       </Content>
@@ -131,12 +119,11 @@ function DocumentListItem(
         {document.isTemplate &&
           !document.isArchived &&
           !document.isDeleted &&
-          can.createDocument &&
-          canCollection.update && (
+          can.createDocument && (
             <>
               <Button
                 as={Link}
-                to={newDocumentPath(document.collectionId, {
+                to={newDocumentUrl(document.collectionId, {
                   templateId: document.id,
                 })}
                 icon={<PlusIcon />}
@@ -150,8 +137,8 @@ function DocumentListItem(
         <DocumentMenu
           document={document}
           showPin={showPin}
-          onOpen={handleMenuOpen}
-          onClose={handleMenuClose}
+          onOpen={() => setMenuOpen(true)}
+          onClose={() => setMenuOpen(false)}
           modal={false}
         />
       </Actions>
@@ -177,10 +164,7 @@ const Actions = styled(EventBoundary)`
   `};
 `;
 
-const DocumentLink = styled(Link)<{
-  $isStarred?: boolean;
-  $menuOpen?: boolean;
-}>`
+const DocumentLink = styled(Link)`
   display: flex;
   align-items: center;
   margin: 10px -8px;
@@ -201,7 +185,7 @@ const DocumentLink = styled(Link)<{
     opacity: ${(props) => (props.$isStarred ? "1 !important" : 0)};
   }
 
-  &:${hover},
+  &:hover,
   &:active,
   &:focus,
   &:focus-within {
@@ -235,9 +219,8 @@ const DocumentLink = styled(Link)<{
     `}
 `;
 
-const Heading = styled.h3<{ rtl?: boolean }>`
+const Heading = styled.h3`
   display: flex;
-  justify-content: ${(props) => (props.rtl ? "flex-end" : "flex-start")};
   align-items: center;
   height: 24px;
   margin-top: 0;
@@ -268,4 +251,4 @@ const ResultContext = styled(Highlight)`
   margin-bottom: 0.25em;
 `;
 
-export default observer(React.forwardRef(DocumentListItem));
+export default observer(DocumentListItem);

app/components/DocumentMeta.js

@@ -1,18 +1,16 @@
+// @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 Flex from "components/Flex";
+import Time from "components/Time";
+import useStores from "hooks/useStores";
 
-const Container = styled(Flex)<{ rtl?: boolean }>`
-  justify-content: ${(props) => (props.rtl ? "flex-end" : "flex-start")};
+const Container = styled(Flex)`
   color: ${(props) => props.theme.textTertiary};
   font-size: 13px;
   white-space: nowrap;
@@ -25,33 +23,33 @@ const Viewed = styled.span`
   overflow: hidden;
 `;
 
-const Modified = styled.span<{ highlight?: boolean }>`
+const Modified = styled.span`
+  color: ${(props) => props.theme.textTertiary};
   font-weight: ${(props) => (props.highlight ? "600" : "400")};
 `;
 
-type Props = {
-  showCollection?: boolean;
-  showPublished?: boolean;
-  showLastViewed?: boolean;
-  showParentDocuments?: boolean;
-  document: Document;
-  children?: React.ReactNode;
-  to?: string;
-};
+type Props = {|
+  showCollection?: boolean,
+  showPublished?: boolean,
+  showLastViewed?: boolean,
+  showNestedDocuments?: boolean,
+  document: Document,
+  children: React.Node,
+  to?: string,
+|};
 
 function DocumentMeta({
   showPublished,
   showCollection,
   showLastViewed,
-  showParentDocuments,
+  showNestedDocuments,
   document,
   children,
   to,
   ...rest
 }: Props) {
   const { t } = useTranslation();
-  const { collections } = useStores();
-  const user = useCurrentUser();
+  const { collections, auth } = useStores();
   const {
     modifiedSinceViewed,
     updatedAt,
@@ -62,8 +60,6 @@ function DocumentMeta({
     deletedAt,
     isDraft,
     lastViewedAt,
-    isTasks,
-    isTemplate,
   } = document;
 
   // Prevent meta information from displaying if updatedBy is not available.
@@ -72,8 +68,6 @@ function DocumentMeta({
     return null;
   }
 
-  const collection = collections.get(document.collectionId);
-  const lastUpdatedByCurrentUser = user.id === updatedBy.id;
   let content;
 
   if (deletedAt) {
@@ -108,26 +102,20 @@ function DocumentMeta({
     );
   } else {
     content = (
-      <Modified highlight={modifiedSinceViewed && !lastUpdatedByCurrentUser}>
+      <Modified highlight={modifiedSinceViewed}>
         {t("updated")} <Time dateTime={updatedAt} addSuffix />
       </Modified>
     );
   }
 
-  const nestedDocumentsCount = collection
-    ? collection.getDocumentChildren(document.id).length
-    : 0;
-  const canShowProgressBar = isTasks && !isTemplate;
+  const collection = collections.get(document.collectionId);
+  const updatedByMe = auth.user && auth.user.id === updatedBy.id;
 
   const timeSinceNow = () => {
     if (isDraft || !showLastViewed) {
       return null;
     }
-
     if (!lastViewedAt) {
-      if (lastUpdatedByCurrentUser) {
-        return null;
-      }
       return (
         <Viewed>
           •&nbsp;<Modified highlight>{t("Never viewed")}</Modified>
@@ -142,9 +130,13 @@ function DocumentMeta({
     );
   };
 
+  const nestedDocumentsCount = collection
+    ? collection.getDocumentChildren(document.id).length
+    : 0;
+
   return (
-    <Container align="center" rtl={document.dir === "rtl"} {...rest} dir="ltr">
-      {lastUpdatedByCurrentUser ? t("You") : updatedBy.name}&nbsp;
+    <Container align="center" {...rest}>
+      {updatedByMe ? t("You") : updatedBy.name}&nbsp;
       {to ? <Link to={to}>{content}</Link> : content}
       {showCollection && collection && (
         <span>
@@ -154,21 +146,13 @@ function DocumentMeta({
           </strong>
         </span>
       )}
-      {showParentDocuments && nestedDocumentsCount > 0 && (
+      {showNestedDocuments && nestedDocumentsCount > 0 && (
         <span>
-          &nbsp;• {nestedDocumentsCount}{" "}
-          {t("nested document", {
-            count: nestedDocumentsCount,
-          })}
+          &nbsp;&middot; {nestedDocumentsCount}{" "}
+          {t("nested document", { count: nestedDocumentsCount })}
         </span>
       )}
       &nbsp;{timeSinceNow()}
-      {canShowProgressBar && (
-        <>
-          &nbsp;•&nbsp;
-          <DocumentTasks document={document} />
-        </>
-      )}
       {children}
     </Container>
   );

app/components/DocumentMetaWithViews.js

@@ -1,20 +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,
+|};
 
 function DocumentMetaWithViews({ to, isDraft, document, ...rest }: Props) {
   const { views } = useStores();
@@ -23,14 +23,6 @@ function DocumentMetaWithViews({ to, isDraft, document, ...rest }: Props) {
   const totalViewers = documentViews.length;
   const onlyYou = totalViewers === 1 && documentViews[0].user.id;
 
-  React.useEffect(() => {
-    if (!document.isDeleted) {
-      views.fetchPage({
-        documentId: document.id,
-      });
-    }
-  }, [views, document.id, document.isDeleted]);
-
   const popover = usePopoverState({
     gutter: 8,
     placement: "bottom",
@@ -43,7 +35,7 @@ function DocumentMetaWithViews({ to, isDraft, document, ...rest }: Props) {
         <PopoverDisclosure {...popover}>
           {(props) => (
             <>
-              &nbsp;•&nbsp;
+              &nbsp;&middot;&nbsp;
               <a {...props}>
                 {t("Viewed by")}{" "}
                 {onlyYou
@@ -63,8 +55,7 @@ function DocumentMetaWithViews({ to, isDraft, document, ...rest }: Props) {
   );
 }
 
-const Meta = styled(DocumentMeta)<{ rtl?: boolean }>`
-  justify-content: ${(props) => (props.rtl ? "flex-end" : "flex-start")};
+const Meta = styled(DocumentMeta)`
   margin: -12px 0 2em 0;
   font-size: 14px;
   position: relative;

app/components/DocumentTasks.tsx

@@ -1,63 +0,0 @@
-import { DoneIcon } from "outline-icons";
-import * as React from "react";
-import { useTranslation, TFunction } from "react-i18next";
-import styled, { useTheme } from "styled-components";
-import Document from "~/models/Document";
-import CircularProgressBar from "~/components/CircularProgressBar";
-import usePrevious from "~/hooks/usePrevious";
-import { bounceIn } from "~/styles/animations";
-
-type Props = {
-  document: Document;
-};
-
-function getMessage(t: TFunction, total: number, completed: number): string {
-  if (completed === 0) {
-    return t(`{{ total }} task`, {
-      total,
-      count: total,
-    });
-  } else if (completed === total) {
-    return t(`{{ completed }} task done`, {
-      completed,
-      count: completed,
-    });
-  } else {
-    return t(`{{ completed }} of {{ total }} tasks`, {
-      total,
-      completed,
-    });
-  }
-}
-
-function DocumentTasks({ document }: Props) {
-  const { tasks, tasksPercentage } = document;
-  const { t } = useTranslation();
-  const theme = useTheme();
-  const { completed, total } = tasks;
-  const done = completed === total;
-  const previousDone = usePrevious(done);
-  const message = getMessage(t, total, completed);
-  return (
-    <>
-      {completed === total ? (
-        <Done
-          color={theme.primary}
-          size={20}
-          $animated={done && previousDone === false}
-        />
-      ) : (
-        <CircularProgressBar percentage={tasksPercentage} />
-      )}
-      &nbsp;{message}
-    </>
-  );
-}
-
-const Done = styled(DoneIcon)<{ $animated: boolean }>`
-  margin: -1px;
-  animation: ${(props) => (props.$animated ? bounceIn : "none")} 600ms;
-  transform-origin: center center;
-`;
-
-export default DocumentTasks;

app/components/DocumentViews.js

@@ -1,28 +1,35 @@
-import { formatDistanceToNow } from "date-fns";
+// @flow
+import distanceInWordsToNow from "date-fns/distance_in_words_to_now";
 import { sortBy } from "lodash";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import Document from "~/models/Document";
-import Avatar from "~/components/Avatar";
-import ListItem from "~/components/List/Item";
-import PaginatedList from "~/components/PaginatedList";
-import useStores from "~/hooks/useStores";
+import Document from "models/Document";
+import Avatar from "components/Avatar";
+import ListItem from "components/List/Item";
+import PaginatedList from "components/PaginatedList";
+import useStores from "hooks/useStores";
 
-type Props = {
-  document: Document;
-  isOpen?: boolean;
-};
+type Props = {|
+  document: Document,
+  isOpen?: boolean,
+|};
 
 function DocumentViews({ document, isOpen }: Props) {
   const { t } = useTranslation();
   const { views, presence } = useStores();
-  const documentPresence = presence.get(document.id);
-  const documentPresenceArray = documentPresence
+
+  React.useEffect(() => {
+    views.fetchPage({ documentId: document.id });
+  }, [views, document.id]);
+
+  let documentPresence = presence.get(document.id);
+  documentPresence = documentPresence
     ? Array.from(documentPresence.values())
     : [];
-  const presentIds = documentPresenceArray.map((p) => p.userId);
-  const editingIds = documentPresenceArray
+
+  const presentIds = documentPresence.map((p) => p.userId);
+  const editingIds = documentPresence
     .filter((p) => p.isEditing)
     .map((p) => p.userId);
 
@@ -32,6 +39,7 @@ function DocumentViews({ document, isOpen }: Props) {
     documentViews,
     (view) => !presentIds.includes(view.user.id)
   );
+
   const users = React.useMemo(() => sortedViews.map((v) => v.user), [
     sortedViews,
   ]);
@@ -45,15 +53,17 @@ function DocumentViews({ document, isOpen }: Props) {
             const view = documentViews.find((v) => v.user.id === item.id);
             const isPresent = presentIds.includes(item.id);
             const isEditing = editingIds.includes(item.id);
+
             const subtitle = isPresent
               ? isEditing
                 ? t("Currently editing")
                 : t("Currently viewing")
               : t("Viewed {{ timeAgo }} ago", {
-                  timeAgo: formatDistanceToNow(
-                    view ? Date.parse(view.lastViewedAt) : new Date()
+                  timeAgo: distanceInWordsToNow(
+                    view ? new Date(view.lastViewedAt) : new Date()
                   ),
                 });
+
             return (
               <ListItem
                 key={item.id}
@@ -61,7 +71,6 @@ function DocumentViews({ document, isOpen }: Props) {
                 subtitle={subtitle}
                 image={<Avatar key={item.id} src={item.avatarUrl} size={32} />}
                 border={false}
-                compact
                 small
               />
             );

app/components/Editor.js

@@ -0,0 +1,264 @@
+// @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/styles/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 { 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, ui, shareId, history } = props;
+  const { t } = useTranslation();
+  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) => {
+      if (ui) {
+        ui.showToast(message);
+      }
+    },
+    [ui]
+  );
+
+  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"),
+      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} />
+));

app/components/Editor.tsx

@@ -1,106 +0,0 @@
-import * as React from "react";
-import { Optional } from "utility-types";
-import embeds from "@shared/editor/embeds";
-import { isInternalUrl } from "@shared/utils/urls";
-import ErrorBoundary from "~/components/ErrorBoundary";
-import { Props as EditorProps } from "~/editor";
-import useDictionary from "~/hooks/useDictionary";
-import useToasts from "~/hooks/useToasts";
-import history from "~/utils/history";
-import { isModKey } from "~/utils/keyboard";
-import { uploadFile } from "~/utils/uploadFile";
-import { isHash } from "~/utils/urls";
-
-const SharedEditor = React.lazy(
-  () =>
-    import(
-      /* webpackChunkName: "shared-editor" */
-      "~/editor"
-    )
-);
-
-export type Props = Optional<
-  EditorProps,
-  "placeholder" | "defaultValue" | "onClickLink" | "embeds" | "dictionary"
-> & {
-  shareId?: string | undefined;
-  embedsDisabled?: boolean;
-  grow?: boolean;
-  onSynced?: () => Promise<void>;
-  onPublish?: (event: React.MouseEvent) => any;
-};
-
-function Editor(props: Props, ref: React.Ref<any>) {
-  const { id, shareId } = props;
-  const { showToast } = useToasts();
-  const dictionary = useDictionary();
-
-  const onUploadImage = React.useCallback(
-    async (file: File) => {
-      const result = await uploadFile(file, {
-        documentId: id,
-      });
-      return result.url;
-    },
-    [id]
-  );
-
-  const onClickLink = React.useCallback(
-    (href: string, event: MouseEvent) => {
-      // on page hash
-      if (isHash(href)) {
-        window.location.href = href;
-        return;
-      }
-
-      if (isInternalUrl(href) && !isModKey(event) && !event.shiftKey) {
-        // relative
-        let navigateTo = href;
-
-        // probably absolute
-        if (href[0] !== "/") {
-          try {
-            const url = new URL(href);
-            navigateTo = url.pathname + url.hash;
-          } catch (err) {
-            navigateTo = href;
-          }
-        }
-
-        if (shareId) {
-          navigateTo = `/share/${shareId}${navigateTo}`;
-        }
-
-        history.push(navigateTo);
-      } else if (href) {
-        window.open(href, "_blank");
-      }
-    },
-    [shareId]
-  );
-
-  const onShowToast = React.useCallback(
-    (message: string) => {
-      showToast(message);
-    },
-    [showToast]
-  );
-
-  return (
-    <ErrorBoundary reloadOnChunkMissing>
-      <SharedEditor
-        ref={ref}
-        uploadImage={onUploadImage}
-        onShowToast={onShowToast}
-        embeds={embeds}
-        dictionary={dictionary}
-        {...props}
-        onClickLink={onClickLink}
-        placeholder={props.placeholder || ""}
-        defaultValue={props.defaultValue || ""}
-      />
-    </ErrorBoundary>
-  );
-}
-
-export default React.forwardRef(Editor);

app/components/Empty.js

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

app/components/ErrorBoundary.js

@@ -0,0 +1,117 @@
+// @flow
+import * as Sentry from "@sentry/react";
+import { observable } from "mobx";
+import { observer } from "mobx-react";
+import * as React from "react";
+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";
+
+type Props = {
+  children: React.Node,
+  reloadOnChunkMissing?: boolean,
+};
+
+@observer
+class ErrorBoundary extends React.Component<Props> {
+  @observable error: ?Error;
+  @observable showDetails: boolean = false;
+
+  componentDidCatch(error: Error, info: Object) {
+    this.error = error;
+    console.error(error);
+
+    if (
+      this.props.reloadOnChunkMissing &&
+      error.message &&
+      error.message.match(/chunk/)
+    ) {
+      // 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);
+      return;
+    }
+
+    if (env.SENTRY_DSN) {
+      Sentry.captureException(error);
+    }
+  }
+
+  handleReload = () => {
+    window.location.reload(true);
+  };
+
+  handleShowDetails = () => {
+    this.showDetails = true;
+  };
+
+  handleReportBug = () => {
+    window.open(githubIssuesUrl());
+  };
+
+  render() {
+    if (this.error) {
+      const error = this.error;
+      const isReported = !!env.SENTRY_DSN && env.DEPLOYMENT === "hosted";
+      const isChunkError = this.error.message.match(/chunk/);
+
+      if (isChunkError) {
+        return (
+          <CenteredContent>
+            <PageTitle title="Module failed to load" />
+            <h1>Loading Failed</h1>
+            <HelpText>
+              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.
+            </HelpText>
+            <p>
+              <Button onClick={this.handleReload}>Reload</Button>
+            </p>
+          </CenteredContent>
+        );
+      }
+
+      return (
+        <CenteredContent>
+          <PageTitle title="Something Unexpected Happened" />
+          <h1>Something Unexpected Happened</h1>
+          <HelpText>
+            Sorry, an unrecoverable error occurred
+            {isReported && " – our engineers have been notified"}. Please try
+            reloading the page, it may have been a temporary glitch.
+          </HelpText>
+          {this.showDetails && <Pre>{error.toString()}</Pre>}
+          <p>
+            <Button onClick={this.handleReload}>Reload</Button>{" "}
+            {this.showDetails ? (
+              <Button onClick={this.handleReportBug} neutral>
+                Report a Bug…
+              </Button>
+            ) : (
+              <Button onClick={this.handleShowDetails} neutral>
+                Show Details…
+              </Button>
+            )}
+          </p>
+        </CenteredContent>
+      );
+    }
+    return this.props.children;
+  }
+}
+
+const Pre = styled.pre`
+  background: ${(props) => props.theme.secondaryBackground};
+  padding: 16px;
+  border-radius: 4px;
+  font-size: 12px;
+  white-space: pre-wrap;
+`;
+
+export default ErrorBoundary;

app/components/ErrorBoundary.tsx

@@ -1,134 +0,0 @@
-import * as Sentry from "@sentry/react";
-import { observable } from "mobx";
-import { observer } from "mobx-react";
-import * as React from "react";
-import { withTranslation, Trans, WithTranslation } from "react-i18next";
-import styled from "styled-components";
-import { githubIssuesUrl } from "@shared/utils/urlHelpers";
-import Button from "~/components/Button";
-import CenteredContent from "~/components/CenteredContent";
-import PageTitle from "~/components/PageTitle";
-import Text from "~/components/Text";
-import env from "~/env";
-
-type Props = WithTranslation & {
-  children: React.ReactNode;
-  reloadOnChunkMissing?: boolean;
-};
-
-@observer
-class ErrorBoundary extends React.Component<Props> {
-  @observable
-  error: Error | null | undefined;
-
-  @observable
-  showDetails = false;
-
-  componentDidCatch(error: Error) {
-    this.error = error;
-    console.error(error);
-
-    if (
-      this.props.reloadOnChunkMissing &&
-      error.message &&
-      error.message.match(/chunk/)
-    ) {
-      // 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();
-      return;
-    }
-
-    if (env.SENTRY_DSN) {
-      Sentry.captureException(error);
-    }
-  }
-
-  handleReload = () => {
-    window.location.reload();
-  };
-
-  handleShowDetails = () => {
-    this.showDetails = true;
-  };
-
-  handleReportBug = () => {
-    window.open(githubIssuesUrl());
-  };
-
-  render() {
-    const { t } = this.props;
-
-    if (this.error) {
-      const error = this.error;
-      const isReported = !!env.SENTRY_DSN && env.DEPLOYMENT === "hosted";
-      const isChunkError = this.error.message.match(/chunk/);
-
-      if (isChunkError) {
-        return (
-          <CenteredContent>
-            <PageTitle title={t("Module failed to load")} />
-            <h1>
-              <Trans>Loading Failed</Trans>
-            </h1>
-            <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>
-            </Text>
-            <p>
-              <Button onClick={this.handleReload}>{t("Reload")}</Button>
-            </p>
-          </CenteredContent>
-        );
-      }
-
-      return (
-        <CenteredContent>
-          <PageTitle title={t("Something Unexpected Happened")} />
-          <h1>
-            <Trans>Something Unexpected Happened</Trans>
-          </h1>
-          <Text type="secondary">
-            <Trans
-              defaults="Sorry, an unrecoverable error occurred{{notified}}. Please try reloading the page, it may have been a temporary glitch."
-              values={{
-                notified: isReported
-                  ? ` – ${t("our engineers have been notified")}`
-                  : undefined,
-              }}
-            />
-          </Text>
-          {this.showDetails && <Pre>{error.toString()}</Pre>}
-          <p>
-            <Button onClick={this.handleReload}>{t("Reload")}</Button>{" "}
-            {this.showDetails ? (
-              <Button onClick={this.handleReportBug} neutral>
-                <Trans>Report a Bug</Trans>…
-              </Button>
-            ) : (
-              <Button onClick={this.handleShowDetails} neutral>
-                <Trans>Show Detail</Trans>…
-              </Button>
-            )}
-          </p>
-        </CenteredContent>
-      );
-    }
-
-    return this.props.children;
-  }
-}
-
-const Pre = styled.pre`
-  background: ${(props) => props.theme.secondaryBackground};
-  padding: 16px;
-  border-radius: 4px;
-  font-size: 12px;
-  white-space: pre-wrap;
-`;
-
-export default withTranslation()(ErrorBoundary);

app/components/EventBoundary.js

@@ -1,12 +1,14 @@
+// @flow
+
 import * as React from "react";
 
 type Props = {
-  children: React.ReactNode;
-  className?: string;
+  children: React.Node,
+  className?: string,
 };
 
 export default function EventBoundary({ children, className }: Props) {
-  const handleClick = React.useCallback((event: React.SyntheticEvent) => {
+  const handleClick = React.useCallback((event: SyntheticEvent<>) => {
     event.preventDefault();
     event.stopPropagation();
   }, []);

app/components/EventListItem.tsx

@@ -1,176 +0,0 @@
-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 styled from "styled-components";
-import Document from "~/models/Document";
-import Event from "~/models/Event";
-import Avatar from "~/components/Avatar";
-import Item, { Actions } from "~/components/List/Item";
-import Time from "~/components/Time";
-import useStores from "~/hooks/useStores";
-import RevisionMenu from "~/menus/RevisionMenu";
-import { documentHistoryUrl } from "~/utils/routeHelpers";
-
-type Props = {
-  document: Document;
-  event: Event;
-  latest?: boolean;
-};
-
-const EventListItem = ({ event, latest, document }: Props) => {
-  const { t } = useTranslation();
-  const { policies } = useStores();
-  const location = useLocation();
-  const can = policies.abilities(document.id);
-  const opts = {
-    userName: event.actor.name,
-  };
-  const isRevision = event.name === "revisions.create";
-  let meta, icon, to;
-
-  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;
-
-  return (
-    <ListItem
-      small
-      exact
-      to={document.isDeleted ? undefined : to}
-      title={
-        <Time
-          dateTime={event.createdAt}
-          tooltipDelay={500}
-          format="MMM do, h:mm a"
-          relative={false}
-          addSuffix
-        />
-      }
-      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
-      }
-    />
-  );
-};
-
-const Subtitle = styled.span`
-  svg {
-    margin: -3px;
-    margin-right: 2px;
-  }
-`;
-
-const ListItem = styled(Item)`
-  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;
-    }
-  }
-`;
-
-export default EventListItem;

app/components/Facepile.js

@@ -1,21 +1,22 @@
+// @flow
 import { observer } from "mobx-react";
 import * as React from "react";
 import styled from "styled-components";
-import User from "~/models/User";
-import Avatar from "~/components/Avatar";
-import Flex from "~/components/Flex";
+import User from "models/User";
+import Avatar from "components/Avatar";
+import Flex from "components/Flex";
 
-type Props = {
-  users: User[];
-  size?: number;
-  overflow?: number;
-  onClick?: React.MouseEventHandler<HTMLDivElement>;
-  renderAvatar?: (user: User) => React.ReactNode;
-};
+type Props = {|
+  users: User[],
+  size?: number,
+  overflow: number,
+  onClick?: (event: SyntheticEvent<>) => mixed,
+  renderAvatar?: (user: User) => React.Node,
+|};
 
 function Facepile({
   users,
-  overflow = 0,
+  overflow,
   size = 32,
   renderAvatar = DefaultAvatar,
   ...rest
@@ -46,7 +47,7 @@ const AvatarWrapper = styled.div`
   }
 `;
 
-const More = styled.div<{ size: number }>`
+const More = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;

app/components/Fade.js

@@ -1,7 +1,8 @@
+// @flow
 import styled from "styled-components";
-import { fadeIn } from "~/styles/animations";
+import { fadeIn } from "shared/styles/animations";
 
-const Fade = styled.span<{ timing?: number | string }>`
+const Fade = styled.span`
   animation: ${fadeIn} ${(props) => props.timing || "250ms"} ease-in-out;
 `;