New Crowdin updates (#1876)

* fix: New Russian translations from Crowdin [ci skip]

* fix: New Russian translations from Crowdin [ci skip]

* fix: New Korean translations from Crowdin [ci skip]

* fix: New Korean translations from Crowdin [ci skip]

.babelrc

@@ -1,18 +1,29 @@
 {
-  "presets": ["react", "env"],
+  "presets": [
+    "@babel/preset-react",
+    "@babel/preset-flow",
+    [
+      "@babel/preset-env",
+      {
+        "corejs": {
+          "version": "2",
+          "proposals": true
+        },
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
   "plugins": [
     "lodash",
     "styled-components",
-    "transform-decorators-legacy",
-    "transform-es2015-destructuring",
-    "transform-object-rest-spread",
-    "transform-regenerator",
-    "transform-class-properties",
-    "syntax-dynamic-import"
-  ],
-  "env": {
-    "development": {
-      "presets": ["react-hmre"]
-    }
-  }
-}
+    [
+      "@babel/plugin-proposal-decorators",
+      {
+        "legacy": true
+      }
+    ],
+    "@babel/plugin-transform-destructuring",
+    "@babel/plugin-transform-regenerator",
+    "transform-class-properties"
+  ]
+}

.circleci/config.yml

@@ -0,0 +1,43 @@
+version: 2
+jobs:
+  build:
+    working_directory: ~/outline
+    docker:
+      - image: circleci/node:14
+      - image: circleci/redis:latest
+      - image: circleci/postgres:9.6.5-alpine-ram
+    environment:
+      NODE_ENV: test
+      SECRET_KEY: F0E5AD933D7F6FD8F4DBB3E038C501C052DC0593C686D21ACB30AE205D2F634B
+      DATABASE_URL_TEST: postgres://root@localhost:5432/circle_test
+      DATABASE_URL: postgres://root@localhost:5432/circle_test
+      URL: http://localhost:3000
+      SMTP_FROM_EMAIL: hello@example.com
+      AWS_S3_UPLOAD_BUCKET_URL: https://s3.amazonaws.com
+      AWS_S3_UPLOAD_BUCKET_NAME: outline-circle
+    steps:
+      - checkout
+      - restore_cache:
+          key: dependency-cache-{{ checksum "package.json" }}
+      - run:
+          name: install-deps
+          command: yarn install --pure-lockfile
+      - save_cache:
+          key: dependency-cache-{{ checksum "package.json" }}
+          paths:
+            - ./node_modules
+      - run:
+          name: migrate
+          command: ./node_modules/.bin/sequelize db:migrate --url $DATABASE_URL_TEST
+      - run:
+          name: lint
+          command: yarn lint
+      - run:
+          name: flow
+          command: yarn flow check --max-workers 4
+      - run:
+          name: test
+          command: yarn test
+      - run:
+          name: build-webpack
+          command: yarn build:webpack

.circleci/run-build-locally.sh

@@ -0,0 +1,7 @@
+#!/usr/bin/env bash
+curl --user ${CIRCLE_TOKEN}: \
+    --request POST \
+    --form revision=<ENTER COMMIT SHA HERE>\
+    --form config=@config.yml \
+    --form notify=false \
+        https://circleci.com/api/v1.1/project/github/outline/outline/tree/master

.dockerignore

@@ -0,0 +1,19 @@
+__mocks__
+.git
+.vscode
+.github
+.circleci
+.DS_Store
+.env*
+.eslint*
+.flowconfig
+.log
+Makefile
+Procfile
+app.json
+build
+docker-compose.yml
+fakes3
+flow-typed
+node_modules
+setupJest.js

.env.sample

@@ -3,33 +3,62 @@
 # keys (for auth) and the SECRET_KEY.
 #
 # Please use `openssl rand -hex 32` to create SECRET_KEY
+SECRET_KEY=generate_a_new_key
+UTILS_SECRET=generate_a_new_key
 
-DATABASE_URL=postgres://user:pass@postgres:5432/outline
-DATABASE_URL_TEST=postgres://user:pass@postgres:5432/outline-test
-SECRET_KEY=F0E5AD933D7F6FD8F4DBB3E038C501C052DC0593C686D21ACB30AE205D2F634B
-PORT=3000
-REDIS_URL=redis://redis:6379
+DATABASE_URL=postgres://user:pass@localhost:5532/outline
+DATABASE_URL_TEST=postgres://user:pass@localhost:5532/outline-test
+REDIS_URL=redis://localhost:6479
+
+# Must point to the publicly accessible URL for the installation
 URL=http://localhost:3000
-DEPLOYMENT=self
-ENABLE_UPDATES=true
-DEBUG=sql,cache,presenters,events
+PORT=3000
 
-# Third party credentials (required)
-SLACK_KEY=71315967491.XXXXXXXXXX
-SLACK_SECRET=d2dc414f9953226bad0a356cXXXXYYYY
+# Optional. If using a Cloudfront distribution or similar the origin server
+# should be set to the same as URL.
+CDN_URL=
+
+# enforce (auto redirect to) https in production, (optional) default is true.
+# set to false if your SSL is terminated at a loadbalancer, for example
+FORCE_HTTPS=true
+
+ENABLE_UPDATES=true
+DEBUG=cache,presenters,events,emails,mailer,utils,multiplayer,server,services
+
+# Third party signin credentials (at least one is required)
+SLACK_KEY=get_a_key_from_slack
+SLACK_SECRET=get_the_secret_of_above_key
+
+# To configure Google auth, you'll need to create an OAuth Client ID at
+# => https://console.cloud.google.com/apis/credentials
+#
+# When configuring the Client ID, add an Authorized redirect URI:
+# https://<your Outline URL>/auth/google.callback
+GOOGLE_CLIENT_ID=
+GOOGLE_CLIENT_SECRET=
+
+# Comma separated list of domains to be allowed (optional)
+# If not set, all Google apps domains are allowed by default
+GOOGLE_ALLOWED_DOMAINS=
 
 # Third party credentials (optional)
 SLACK_VERIFICATION_TOKEN=PLxk6OlXXXXXVj3YYYY
 SLACK_APP_ID=A0XXXXXXX
+SLACK_MESSAGE_ACTIONS=true
 GOOGLE_ANALYTICS_ID=
-BUGSNAG_KEY=
+SENTRY_DSN=
 
-# AWS credentials (optional in dev)
-AWS_ACCESS_KEY_ID=notcheckedindev
-AWS_SECRET_ACCESS_KEY=notcheckedindev
+# AWS credentials (optional in development)
+AWS_ACCESS_KEY_ID=get_a_key_from_aws
+AWS_SECRET_ACCESS_KEY=get_the_secret_of_above_key
+AWS_REGION=xx-xxxx-x
 AWS_S3_UPLOAD_BUCKET_URL=http://s3:4569
-AWS_S3_UPLOAD_BUCKET_NAME=outline-dev
+AWS_S3_UPLOAD_BUCKET_NAME=bucket_name_here
 AWS_S3_UPLOAD_MAX_SIZE=26214400
+AWS_S3_FORCE_PATH_STYLE=true
+# uploaded s3 objects permission level, default is private
+# set to "public-read" to allow public access
+AWS_S3_ACL=private
 
 # Emails configuration (optional)
 SMTP_HOST=
@@ -38,3 +67,10 @@ SMTP_USERNAME=
 SMTP_PASSWORD=
 SMTP_FROM_EMAIL=
 SMTP_REPLY_EMAIL=
+
+# Custom logo that displays on the authentication screen, scaled to height: 60px
+# TEAM_LOGO=https://example.com/images/logo.png
+
+# See translate.getoutline.com for a list of available language codes and their
+# percentage translated.
+DEFAULT_LANGUAGE=en_US

.eslintrc

@@ -4,25 +4,57 @@
     "react-app",
     "plugin:import/errors",
     "plugin:import/warnings",
-    "plugin:flowtype/recommended"
+    "plugin:flowtype/recommended",
+    "plugin:react-hooks/recommended"
+  ],
+  "plugins": [
+    "prettier",
+    "flowtype"
   ],
-  "plugins": ["prettier", "flowtype"],
   "rules": {
     "eqeqeq": 2,
     "no-unused-vars": 2,
-    // // Bring back after we remove CSS Modules 100%
-    // "import/order": "warn",
-    // Prettier automatically uses the least amount of parens possible, so this
-    // does more harm than good.
     "no-mixed-operators": "off",
-    // Temporary fix for a failing import lint
-    "import/no-unresolved": [
+    "import/order": [
       "error",
       {
-        "ignore": ["slate-drop-or-paste-images"]
+        "alphabetize": {
+          "order": "asc"
+        },
+        "pathGroups": [
+          {
+            "pattern": "shared/**",
+            "group": "external",
+            "position": "after"
+          },
+          {
+            "pattern": "stores",
+            "group": "external",
+            "position": "after"
+          },
+          {
+            "pattern": "stores/**",
+            "group": "external",
+            "position": "after"
+          },
+          {
+            "pattern": "models/**",
+            "group": "external",
+            "position": "after"
+          },
+          {
+            "pattern": "scenes/**",
+            "group": "external",
+            "position": "after"
+          },
+          {
+            "pattern": "components/**",
+            "group": "external",
+            "position": "after"
+          }
+        ]
       }
     ],
-    // Flow
     "flowtype/require-valid-file-annotation": [
       2,
       "always",
@@ -30,22 +62,34 @@
         "annotationStyle": "line"
       }
     ],
-    "flowtype/space-after-type-colon": [2, "always"],
-    "flowtype/space-before-type-colon": [2, "never"],
-    // Enforce that code is formatted with prettier.
+    "flowtype/space-after-type-colon": [
+      2,
+      "always"
+    ],
+    "flowtype/space-before-type-colon": [
+      2,
+      "never"
+    ],
     "prettier/prettier": [
       "error",
       {
         "printWidth": 80,
-        "trailingComma": "es5",
-        "singleQuote": true
+        "trailingComma": "es5"
       }
     ]
   },
   "settings": {
+    "react": {
+      "createClass": "createReactClass",
+      "pragma": "React",
+      "version": "detect"
+    },
     "import/resolver": {
       "node": {
-        "paths": ["app", "."]
+        "paths": [
+          "app",
+          "."
+        ]
       }
     },
     "flowtype": {
@@ -56,12 +100,6 @@
     "jest": true
   },
   "globals": {
-    "__DEV__": true,
-    "SLACK_KEY": true,
-    "DEPLOYMENT": true,
-    "BASE_URL": true,
-    "BUGSNAG_KEY": true,
-    "afterAll": true,
-    "Bugsnag": true
+    "EDITOR_VERSION": true
   }
-}
+}

.flowconfig

@@ -4,37 +4,36 @@
 .*/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/slate-edit-code/example/.*
-.*/node_modules/slate-edit-code/lib/.*
-.*/node_modules/slate-edit-list/.*
-.*/node_modules/slate-prism/.*
 .*/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='^\(.*\)\.s?css$' -> 'empty/object'
 module.name_mapper='^\(.*\)\.md$' -> 'empty/object'
 module.name_mapper='^shared\/\(.*\)$' -> '<PROJECT_ROOT>/shared/\1'
 
 module.file_ext=.js
-module.file_ext=.scss
 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

.githooks/pre-commit/flow.sh

@@ -1 +0,0 @@
-yarn lint:flow

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,37 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: bug
+assignees: ''
+
+---
+
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots or videos to help explain your problem.
+
+**Outline (please complete the following information):**
+- Install: [getoutline.com or self hosted]
+- Version: [commit sha if self hosted]
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Mobile (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,8 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Feature request
+    url: https://github.com/outline/outline/discussions/new
+    about: Request a feature to be added to the project
+  - name: Self hosting questions
+    url: https://github.com/outline/outline/discussions/new
+    about: Ask questions and discuss running Outline with community members

.github/auto_assign.yml

@@ -0,0 +1,10 @@
+# Set to true to add reviewers to pull requests
+addReviewers: true
+
+# A list of reviewers to be added to pull requests (GitHub user name)
+reviewers: 
+  - tommoor
+
+# A list of keywords to be skipped the process that add reviewers if pull requests include it 
+skipKeywords:
+  - wip

.gitignore

@@ -1,7 +1,11 @@
 dist
+build
 node_modules/*
+server/scripts
 .env
+.log
 npm-debug.log
 stats.json
 .DS_Store
 fakes3/*
+.idea

.vscode/settings.json

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

Dockerfile

@@ -1,10 +1,23 @@
-FROM node:8.11
+FROM node:14-alpine
 
 ENV APP_PATH /opt/outline
 RUN mkdir -p $APP_PATH
 
 WORKDIR $APP_PATH
-COPY . $APP_PATH
-RUN yarn
-RUN cp -r /opt/outline/node_modules /opt/node_modules
 
+COPY package.json ./
+COPY yarn.lock ./
+
+RUN yarn --pure-lockfile
+
+COPY . .
+
+RUN yarn build && \
+  yarn --production --ignore-scripts --prefer-offline && \
+  rm -rf shared && \
+  rm -rf app
+
+ENV NODE_ENV production
+CMD yarn start
+
+EXPOSE 3000

LICENSE

@@ -1,19 +1,103 @@
-Copyright (c) 2017 Outline (https://www.getoutline.com/) and individual contributors.
-All rights reserved.
+Business Source License 1.1
 
-Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+Parameters
 
-    1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+Licensor:             General Outline, Inc.
+Licensed Work:        Outline 0.51.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
+                      Service.
 
-    2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the
-       documentation and/or other materials provided with the distribution.
+                      A “Document Service” is a commercial offering that
+                      allows third parties (other than your employees and
+                      contractors) to access the functionality of the
+                      Licensed Work by creating teams and documents
+                      controlled by such third parties.
 
-    3. Neither the name of the Outline nor the names of its contributors may be used to endorse or promote products derived from this software 
-       without specific prior written permission.
+Change Date:          2023-12-13
 
-THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
-THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR
-CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
-PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
-WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF
-ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+Change License:       Apache License, Version 2.0
+
+For information about alternative licensing arrangements for the Software,
+please visit: https://www.getoutline.com
+
+Notice
+
+The Business Source License (this document, or the “License”) is not an Open
+Source license. However, the Licensed Work will eventually be made available
+under an Open Source License, as stated in this License.
+
+License text copyright (c) 2017 MariaDB Corporation Ab, All Rights Reserved.
+“Business Source License” is a trademark of MariaDB Corporation Ab.
+
+-----------------------------------------------------------------------------
+
+Business Source License 1.1
+
+Terms
+
+The Licensor hereby grants you the right to copy, modify, create derivative
+works, redistribute, and make non-production use of the Licensed Work. The
+Licensor may make an Additional Use Grant, above, permitting limited
+production use.
+
+Effective on the Change Date, or the fourth anniversary of the first publicly
+available distribution of a specific version of the Licensed Work under this
+License, whichever comes first, the Licensor hereby grants you rights under
+the terms of the Change License, and the rights granted in the paragraph
+above terminate.
+
+If your use of the Licensed Work does not comply with the requirements
+currently in effect as described in this License, you must purchase a
+commercial license from the Licensor, its affiliated entities, or authorized
+resellers, or you must refrain from using the Licensed Work.
+
+All copies of the original and modified Licensed Work, and derivative works
+of the Licensed Work, are subject to this License. This License applies
+separately for each version of the Licensed Work and the Change Date may vary
+for each version of the Licensed Work released by Licensor.
+
+You must conspicuously display this License on each original or modified copy
+of the Licensed Work. If you receive the Licensed Work in original or
+modified form from a third party, the terms and conditions set forth in this
+License apply to your use of that work.
+
+Any use of the Licensed Work in violation of this License will automatically
+terminate your rights under this License for the current and all other
+versions of the Licensed Work.
+
+This License does not grant you any right in any trademark or logo of
+Licensor or its affiliates (provided that you may use a trademark or logo of
+Licensor as expressly required by this License).
+
+TO THE EXTENT PERMITTED BY APPLICABLE LAW, THE LICENSED WORK IS PROVIDED ON
+AN “AS IS” BASIS. LICENSOR HEREBY DISCLAIMS ALL WARRANTIES AND CONDITIONS,
+EXPRESS OR IMPLIED, INCLUDING (WITHOUT LIMITATION) WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, NON-INFRINGEMENT, AND
+TITLE.
+
+MariaDB hereby grants you permission to use this License’s text to license
+your works, and to refer to it using the trademark “Business Source License”,
+as long as you comply with the Covenants of Licensor below.
+
+Covenants of Licensor
+
+In consideration of the right to use this License’s text and the “Business
+Source License” name and trademark, Licensor covenants to MariaDB, and to all
+other recipients of the licensed work to be provided by Licensor:
+
+1. To specify as the Change License the GPL Version 2.0 or any later version,
+   or a license that is compatible with GPL Version 2.0 or a later version,
+   where “compatible” means that software provided under the Change License can
+   be included in a program with software provided under GPL Version 2.0 or a
+   later version. Licensor may specify additional Change Licenses without
+   limitation.
+
+2. To either: (a) specify an additional grant of rights to use that does not
+   impose any additional restriction on the right granted in this License, as
+   the Additional Use Grant; or (b) insert the text “None”.
+
+3. To specify a Change Date.
+
+4. Not to modify this License in any other way.

Makefile

@@ -1,16 +1,25 @@
 up:
 	docker-compose up -d redis postgres s3
-	docker-compose run --rm outline bash -c "yarn && yarn sequelize db:migrate"
-	docker-compose up outline
+	yarn install --pure-lockfile
+	yarn sequelize db:migrate
+	yarn dev
 
 build:
 	docker-compose build --pull outline
 
 test:
-	docker-compose run --rm outline yarn test
+	docker-compose up -d redis postgres s3
+	yarn sequelize db:drop --env=test
+	yarn sequelize db:create --env=test
+	yarn sequelize db:migrate --env=test
+	yarn test
 
 watch:
-	docker-compose run --rm outline yarn test:watch
+	docker-compose up -d redis postgres s3
+	yarn sequelize db:drop --env=test
+	yarn sequelize db:create --env=test
+	yarn sequelize db:migrate --env=test
+	yarn test:watch
 
 destroy:
 	docker-compose stop

Procfile

@@ -1 +1 @@
-web: node index.js
+web: node ./build/server/index.js

README.md

@@ -1,15 +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>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 src="https://user-images.githubusercontent.com/31465/34456332-51e41eb0-ed9c-11e7-9fa9-20e7fa946494.jpg" alt="Outline" width="800" />
+  <img src="https://user-images.githubusercontent.com/380914/78513257-153ae080-775f-11ea-9b49-1e1939451a3e.png" alt="Outline" width="800" />
 </p>
 <p align="center">
-  <img src="https://circleci.com/gh/outline/outline.svg?style=shield&amp;circle-token=c0c4c2f39990e277385d5c1ae96169c409eb887a" alt="" data-canonical-src="" style="max-width:100%;">
-  <a href="https://spectrum.chat/outline" rel="nofollow"><img src="https://withspectrum.github.io/badge/badge.svg" alt="Join the community on Spectrum"/></a>
+  <a href="https://circleci.com/gh/outline/outline" rel="nofollow"><img src="https://circleci.com/gh/outline/outline.svg?style=shield&amp;circle-token=c0c4c2f39990e277385d5c1ae96169c409eb887a"></a>
   <a href="https://github.com/prettier/prettier"><img src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat"></a>
+  <a href="https://github.com/styled-components/styled-components"><img src="https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg"></a>
+  <a href="https://translate.getoutline.com/project/outline"><img src="https://badges.crowdin.net/outline/localized.svg"></a>
 </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,26 +23,81 @@ If you'd like to run your own copy of Outline or contribute to development then
 
 Outline requires the following dependencies:
 
-- Postgres >=9.5
-- Redis
-- Slack developer application
+- [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
+
+
+### Production
+
+For a manual self-hosted production installation these are the suggested steps:
+
+1. Clone this repo and install dependencies with `yarn install`
+1. Build the source code with `yarn build`
+1. Using the `.env.sample` as a reference, set the required variables in your production environment. The following are required as a minimum:
+    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. `DATABASE_URL` (run your own local copy of Postgres, or use a cloud service)
+    1. `REDIS_URL`  (run your own local copy of Redis, or use a cloud service)
+    1. `URL` (the public facing URL of your installation)
+    1. `AWS_` (all of the keys beginning with AWS)
+1. Migrate database schema with `yarn sequelize:migrate`. Production assumes an SSL connection, if
+Postgres is on the same machine and is not SSL you can migrate with `yarn sequelize:migrate --env=production-ssl-disabled`.
+1. Start the service with any daemon tools you prefer. Take PM2 for example, `NODE_ENV=production pm2 start ./build/server/index.js --name 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` reverse proxy to serve your instance of Outline for a clean URL without the port number, support SSL, etc.
+
+
+### Development
 
 In development you can quickly get an environment running using Docker by following these steps:
 
-1. Install [Docker for Desktop](https://www.docker.com) if you don't already have it.
+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` and fill out the Slack keys, everything
-   else should work well for development.
-1. Run `make up`. This will download dependencies, build and launch a development version of Outline.
+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
+
+### Upgrade
+
+#### 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:
+```
+docker run --rm outlinewiki/outline:latest yarn sequelize:migrate
+```
+#### Yarn
+
+If you're running Outline by cloning this repository, run the following command to upgrade:
+```
+yarn run upgrade
+```
 
 ## Development
 
 ### Server
 
-To enable debugging statements, set the following env vars:
+Outline uses [debug](https://www.npmjs.com/package/debug). To enable debugging output, the following categories are available:
 
 ```
-DEBUG=sql,cache,presenters,events
+DEBUG=sql,cache,presenters,events,logistics,emails,mailer
 ```
 
 ## Migrations
@@ -47,7 +105,7 @@ DEBUG=sql,cache,presenters,events
 Sequelize is used to create and run migrations, for example:
 
 ```
-yarn sequelize migration:create
+yarn sequelize migration:generate --name my-migration
 yarn sequelize db:migrate
 ```
 
@@ -59,13 +117,13 @@ yarn sequelize db:migrate --env test
 
 ## Structure
 
-Outline is composed of separate backend and frontend application which are both driven by the same Node process. As both are written in Javascript, they share some code but are mostly separate. We utilize latest language features, including `async`/`await`, and [Flow](https://flow.org/) typing. Prettier and ESLint are ran as pre-commit hooks.
+Outline is composed of separate backend and frontend application which are both driven by the same Node process. As both are written in Javascript, they share some code but are mostly separate. We utilize the latest language features, including `async`/`await`, and [Flow](https://flow.org/) typing. Prettier 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.
 
-The editor itself is built ontop of [Slate](https://github.com/ianstormtaylor/slate) and hosted in a separate repository to encourage reuse: [rich-markdown-editor](https://github.com/outline/rich-markdown-editor)
+The editor itself is built on [Prosemirror](https://github.com/prosemirror) and hosted in a separate repository to encourage reuse: [rich-markdown-editor](https://github.com/outline/rich-markdown-editor)
 
 - `app/` - Frontend React application
 - `app/scenes` - Full page views
@@ -79,22 +137,33 @@ The editor itself is built ontop of [Slate](https://github.com/ianstormtaylor/sl
 Backend is driven by [Koa](http://koajs.com/) (API, web server), [Sequelize](http://docs.sequelizejs.com/) (database) and React for public pages and emails.
 
 - `server/api` - API endpoints
+- `server/commands` - Domain logic, currently being refactored from /models
 - `server/emails`  - React rendered email templates
-- `server/models` - Database models (Sequelize)
-- `server/pages` - Server-side rendered public pages (React)
+- `server/models` - Database models
+- `server/policies` - Authorization logic
 - `server/presenters` - API responses for database models
+- `server/test` - Test helps and support
+- `server/utils` - Utility methods
 - `shared` - Code shared between frontend and backend applications
 
 ## Tests
 
-We aim to have sufficient test coverage for critical parts of the application and aren't aiming for 100% unit test coverage. All API endpoints and anything authentication related should be thoroughly tested, and it's generally good to add tests for backend features and code.
+We aim to have sufficient test coverage for critical parts of the application and aren't aiming for 100% unit test coverage. All API endpoints and anything authentication related should be thoroughly tested.
 
 To add new tests, write your tests with [Jest](https://facebook.github.io/jest/) and add a file with `.test.js` extension next to the tested code.
 
 ```shell
 # To run all tests
-yarn test
+make test
 
+# To run backend tests in watch mode
+make watch
+```
+
+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
 
@@ -104,18 +173,18 @@ yarn test:app
 
 ## Contributing
 
-Outline is still built and maintained by a small team – we'd love your help to fix bugs and add features!
+Outline is built and maintained by a small team – we'd love your help to fix bugs and add features!
 
-However, before working on 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 our [Spectrum community](https://spectrum.chat/outline). This way we can ensure that an approach is agreed on before code is written and will hopefully help to get your contributions integrated faster!
+However, before working on 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 and will hopefully help to get your contributions integrated faster!
 
 If you’re looking for ways to get started, here's a list of ways to help us improve Outline:
 
+* [Translation](TRANSLATION.md) into other languages
 * Issues with [`good first issue`](https://github.com/outline/outline/labels/good%20first%20issue) label
 * Performance improvements, both on server and frontend
 * Developer happiness and documentation
 * Bugs and other issues listed on GitHub
-* Helping others on Spectrum
 
 ## License
 
-Outline is [BSD licensed](/blob/master/LICENSE).
+Outline is [BSL 1.1 licensed](https://github.com/outline/outline/blob/master/LICENSE).

SECURITY.md

@@ -0,0 +1,11 @@
+# Security Policy
+
+## Reporting a Vulnerability
+
+The Outline team takes security bugs seriously. We appreciate your efforts to responsibly disclose your findings, and will make every effort to acknowledge your contributions.
+
+To report a security issue, email [hello@getoutline.com](mailto:hello@getoutline.com) and include the word "SECURITY" in the subject line.
+
+The Outline team will send a response indicating the next steps in handling your report. After the initial reply to your report you will be kept informed of the progress towards a fix and full announcement.
+
+Report security bugs in third-party dependencies to the person or team maintaining the module. You can also report a vulnerability through the [Node Security Project](https://nodesecurity.io/report).

TRANSLATION.md

@@ -0,0 +1,34 @@
+# Translation
+
+Outline is localized through community contributions. The text in Outline's user interface is in American English by default, we're very thankful for all help that the community provides bringing the app to different languages. 
+
+## Externalizing strings
+
+Before a string can be translated, it must be externalized. This is the process where English strings in the source code are wrapped in a function that retrieves the translated string for the user’s language.
+
+For externalization we use [react-i18next](https://react.i18next.com/), this provides the hooks [useTranslation](https://react.i18next.com/latest/usetranslation-hook) and the [Trans](https://react.i18next.com/latest/trans-component) component for wrapping English text.
+
+PR's are accepted for wrapping English strings in the codebase that were not previously externalized.
+
+## Translating strings
+
+To manage the translation process we use [CrowdIn](https://translate.getoutline.com/), it keeps track of which strings in which languages still need translating, synchronizes with the codebase automatically, and provides a great editor interface.
+
+You'll need to create a free account to use CrowdIn. Once you have joined, you can provide translations by following these steps:
+
+1. Select the language for which you want to contribute (or vote for) a translation (below the language you can see the progress of the translation)
+![CrowdIn UI](https://i.imgur.com/AkbDY60.png)
+
+2. Please choose the translation.json file from your desired language
+
+3. Once a file is selected, all the strings associated with the version are displayed on the left side. To display the untranslated strings first, select the filter icon next to the search bar and select “All, Untranslated First”.The red square next to an English string shows that a string has not been translated yet. To provide a translation, select a string on the left side, provide a translation in the target language in the text box in the right side (singular and plural) and press the save button. As soon as a translation has been provided by another user (green square next to string), you can also vote on a translation provided by another user. The translation with the most votes is used unless a different translation has been approved by a proof reader. ![Editor UI](https://i.imgur.com/pldZCRs.png)
+
+## Proofreading
+
+Once a translation has been provided, a proof reader can approve the translation and mark it for use in Outline.
+
+If you are interested in becoming a proof reader, please contact one of the project managers in the Outline CrowdIn project or contact [@tommoor](https://github.com/tommoor). Similarly, if your language is not listed in the list of CrowdIn languages, please contact our project managers or [send us an email](https://www.getoutline.com/contact) so we can add your language.
+
+## Release
+
+Updated translations are automatically PR'd against the codebase by a bot and will be merged regularly so that new translations appear in the next release of Outline.

__mocks__/bull.js

@@ -0,0 +1,18 @@
+/* eslint-disable flowtype/require-valid-file-annotation */
+export default class Queue {
+  name;
+
+  constructor(name) {
+    this.name = name;
+  }
+
+  process = (fn) => {
+    console.log(`Registered function ${this.name}`);
+    this.processFn = fn;
+  };
+
+  add = (data) => {
+    console.log(`Running ${this.name}`);
+    return this.processFn({ data });
+  };
+}

__mocks__/styleMock.js

@@ -1,2 +0,0 @@
-import idObj from 'identity-obj-proxy';
-export default idObj;

app.json

@@ -0,0 +1,147 @@
+{
+  "name": "Outline",
+  "description": "Open source wiki and knowledge base for growing teams",
+  "website": "https://www.getoutline.com/",
+  "repository": "https://github.com/outline/outline",
+  "keywords": [
+    "wiki",
+    "team",
+    "node",
+    "markdown",
+    "slack"
+  ],
+  "success_url": "/",
+  "formation": {
+    "web": {
+      "quantity": 1,
+      "size": "Hobby"
+    }
+  },
+  "image": "heroku/node",
+  "addons": [
+    {
+      "plan": "heroku-redis"
+    },
+    {
+      "plan": "heroku-postgresql"
+    }
+  ],
+  "scripts": {
+    "postdeploy": "yarn sequelize db:migrate"
+  },
+  "env": {
+    "SECRET_KEY": {
+      "description": "A secret key",
+      "generator": "secret",
+      "required": true
+    },
+    "ENABLE_UPDATES": {
+      "value": "true",
+      "required": true
+    },
+    "URL": {
+      "description": "https://{your app name}.herokuapp.com",
+      "required": true
+    },
+    "GOOGLE_CLIENT_ID": {
+      "description": "See https://developers.google.com/identity/protocols/OAuth2 to create a new Google OAuth client. You must configure at least one of Slack or Google to control login.",
+      "required": false
+    },
+    "GOOGLE_CLIENT_SECRET": {
+      "description": "",
+      "required": false
+    },
+    "GOOGLE_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": {
+      "description": "See https://api.slack.com/apps to create a new Slack app. You must configure at least one of Slack or Google to control login.",
+      "required": false
+    },
+    "SLACK_SECRET": {
+      "description": "Your Slack client secret - d2dc414f9953226bad0a356cXXXXYYYY",
+      "required": false
+    },
+    "SLACK_VERIFICATION_TOKEN": {
+      "description": "Your Slack verification token - PLxk6OlXXXXXVj3YYYY",
+      "required": false
+    },
+    "SLACK_APP_ID": {
+      "description": "A0XXXXXXXXX",
+      "required": false
+    },
+    "AWS_ACCESS_KEY_ID": {
+      "description": "Needed to save file uploads. Optional for development / testing",
+      "required": false
+    },
+    "AWS_SECRET_ACCESS_KEY": {
+      "description": "",
+      "required": false
+    },
+    "AWS_S3_UPLOAD_BUCKET_NAME": {
+      "description": "yourbucket.example.com",
+      "required": false
+    },
+    "AWS_S3_UPLOAD_BUCKET_URL": {
+      "description": "Live web link to your bucket. For CNAMEs, https://yourbucket.example.com",
+      "required": false
+    },
+    "AWS_S3_UPLOAD_MAX_SIZE": {
+      "description": "Maximum file upload size in bytes",
+      "value": "26214400",
+      "required": false
+    },
+    "AWS_S3_FORCE_PATH_STYLE": {
+      "description": "Use path-style URL's for connecting to S3 instead of subdomain. This is useful for S3-compatible storage.",
+      "value": "true",
+      "required": false
+    },
+    "AWS_REGION": {
+      "value": "us-east-1",
+      "description": "Region in which the above S3 bucket exists",
+      "required": false
+    },
+    "AWS_S3_ACL": {
+      "value": "private",
+      "description": "S3 canned ACL for document attachments",
+      "required": false
+    },
+    "SMTP_HOST": {
+      "description": "smtp.example.com (optional)",
+      "required": false
+    },
+    "SMTP_PORT": {
+      "description": "1234 (optional)",
+      "required": false
+    },
+    "SMTP_USERNAME": {
+      "description": "me@example.com (optional)",
+      "required": false
+    },
+    "SMTP_PASSWORD": {
+      "description": "(optional)",
+      "required": false
+    },
+    "SMTP_FROM_EMAIL": {
+      "description": "wiki@example.com (optional)",
+      "required": false
+    },
+    "SMTP_REPLY_EMAIL": {
+      "description": "wikireply@example.com (optional)",
+      "required": false
+    },
+    "GOOGLE_ANALYTICS_ID": {
+      "description": "UA-xxxx (optional)",
+      "required": false
+    },
+    "SENTRY_DSN": {
+      "description": "An API key for Sentry if you wish to collect error reporting (optional)",
+      "required": false
+    },
+    "TEAM_LOGO": {
+      "description": "A logo that will be displayed on the signed out home page",
+      "required": false
+    }
+  }
+}

app/components/Actions.js

@@ -0,0 +1,48 @@
+// @flow
+import styled from "styled-components";
+import breakpoint from "styled-components-breakpoint";
+import Flex from "components/Flex";
+
+export const Action = styled(Flex)`
+  justify-content: center;
+  align-items: center;
+  padding: 0 0 0 12px;
+  height: 32px;
+  font-size: 15px;
+  flex-shrink: 0;
+
+  &:empty {
+    display: none;
+  }
+`;
+
+export const Separator = styled.div`
+  flex-shrink: 0;
+  margin-left: 12px;
+  width: 1px;
+  height: 28px;
+  background: ${(props) => props.theme.divider};
+`;
+
+const Actions = styled(Flex)`
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  border-radius: 3px;
+  background: ${(props) => props.theme.background};
+  transition: ${(props) => props.theme.backgroundTransition};
+  padding: 12px;
+  -webkit-backdrop-filter: blur(20px);
+
+  @media print {
+    display: none;
+  }
+
+  ${breakpoint("tablet")`
+    left: auto;
+    padding: 24px;
+  `};
+`;
+
+export default Actions;

app/components/Actions/Actions.js

@@ -1,45 +0,0 @@
-// @flow
-import styled from 'styled-components';
-import breakpoint from 'styled-components-breakpoint';
-import Flex from 'shared/components/Flex';
-import { layout, color } from 'shared/styles/constants';
-
-export const Action = styled(Flex)`
-  justify-content: center;
-  align-items: center;
-  padding: 0 0 0 12px;
-
-  a {
-    color: ${color.text};
-    height: 24px;
-  }
-`;
-
-export const Separator = styled.div`
-  margin-left: 12px;
-  width: 1px;
-  height: 20px;
-  background: ${color.slateLight};
-`;
-
-const Actions = styled(Flex)`
-  position: fixed;
-  top: 0;
-  right: 0;
-  left: 0;
-  border-radius: 3px;
-  background: rgba(255, 255, 255, 0.9);
-  padding: 16px;
-  -webkit-backdrop-filter: blur(20px);
-
-  @media print {
-    display: none;
-  }
-
-  ${breakpoint('tablet')`
-    left: auto;
-    padding: ${layout.vpadding} ${layout.hpadding} 8px 8px;
-  `};
-`;
-
-export default Actions;

app/components/Actions/index.js

@@ -1,4 +0,0 @@
-// @flow
-import Actions from './Actions';
-export { Action, Separator } from './Actions';
-export default Actions;

app/components/Alert/Alert.js

@@ -1,37 +0,0 @@
-// @flow
-import * as React from 'react';
-import { observer } from 'mobx-react';
-import Flex from 'shared/components/Flex';
-import styled from 'styled-components';
-import { color } from 'shared/styles/constants';
-
-type Props = {
-  children: React.Node,
-  type?: 'info' | 'success' | 'warning' | 'danger' | 'offline',
-};
-
-@observer
-class Alert extends React.Component<Props> {
-  defaultProps = {
-    type: 'info',
-  };
-
-  render() {
-    return (
-      <Container align="center" justify="center" type={this.props.type}>
-        {this.props.children}
-      </Container>
-    );
-  }
-}
-
-const Container = styled(Flex)`
-  height: $headerHeight;
-  color: #ffffff;
-  font-size: 14px;
-  line-height: 1;
-
-  background-color: ${({ type }) => color[type]};
-`;
-
-export default Alert;

app/components/Alert/index.js

@@ -1,3 +0,0 @@
-// @flow
-import Alert from './Alert';
-export default Alert;

app/components/Analytics.js

@@ -0,0 +1,40 @@
+// @flow
+/* global ga */
+import * as React from "react";
+import env from "env";
+
+type Props = {
+  children?: React.Node,
+};
+
+export default class Analytics extends React.Component<Props> {
+  componentDidMount() {
+    if (!env.GOOGLE_ANALYTICS_ID) return;
+
+    // standard Google Analytics script
+    window.ga =
+      window.ga ||
+      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("send", "pageview");
+
+    const script = document.createElement("script");
+    script.src = "https://www.google-analytics.com/analytics.js";
+    script.async = true;
+
+    if (document.body) {
+      document.body.appendChild(script);
+    }
+  }
+
+  render() {
+    return this.props.children || null;
+  }
+}

app/components/Auth.js

@@ -1,56 +0,0 @@
-// @flow
-import * as React from 'react';
-import { Provider } from 'mobx-react';
-import stores from 'stores';
-import ApiKeysStore from 'stores/ApiKeysStore';
-import UsersStore from 'stores/UsersStore';
-import CollectionsStore from 'stores/CollectionsStore';
-import IntegrationsStore from 'stores/IntegrationsStore';
-import CacheStore from 'stores/CacheStore';
-
-type Props = {
-  children?: React.Node,
-};
-
-let authenticatedStores;
-
-const Auth = ({ children }: Props) => {
-  if (stores.auth.authenticated && stores.auth.team && stores.auth.user) {
-    // Only initialize stores once. Kept in global scope because otherwise they
-    // will get overridden on route change
-    if (!authenticatedStores) {
-      // Stores for authenticated user
-      const { user, team } = stores.auth;
-      const cache = new CacheStore(user.id);
-      authenticatedStores = {
-        integrations: new IntegrationsStore(),
-        apiKeys: new ApiKeysStore(),
-        users: new UsersStore(),
-        collections: new CollectionsStore({
-          ui: stores.ui,
-          teamId: team.id,
-          cache,
-        }),
-      };
-
-      if (window.Bugsnag) {
-        Bugsnag.user = {
-          id: user.id,
-          name: user.name,
-          teamId: team.id,
-          team: team.name,
-        };
-      }
-
-      stores.auth.fetch();
-      authenticatedStores.collections.fetchPage({ limit: 100 });
-    }
-
-    return <Provider {...authenticatedStores}>{children}</Provider>;
-  }
-
-  stores.auth.logout();
-  return null;
-};
-
-export default Auth;

app/components/Authenticated.js

@@ -0,0 +1,62 @@
+// @flow
+import { observer } from "mobx-react";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { Redirect } from "react-router-dom";
+import { isCustomSubdomain } from "shared/utils/domains";
+import LoadingIndicator from "components/LoadingIndicator";
+import useStores from "../hooks/useStores";
+import env from "env";
+
+type Props = {
+  children: React.Node,
+};
+
+const Authenticated = ({ children }: Props) => {
+  const { auth } = useStores();
+  const { i18n } = useTranslation();
+  const language = auth.user && auth.user.language;
+
+  // Watching for language changes here as this is the earliest point we have
+  // the user available and means we can start loading translations faster
+  React.useEffect(() => {
+    if (language && i18n.language !== language) {
+      // Languages are stored in en_US format in the database, however the
+      // frontend translation framework (i18next) expects en-US
+      i18n.changeLanguage(language.replace("_", "-"));
+    }
+  }, [i18n, language]);
+
+  if (auth.authenticated) {
+    const { user, team } = auth;
+    const { hostname } = window.location;
+
+    if (!team || !user) {
+      return <LoadingIndicator />;
+    }
+
+    // If we're authenticated but viewing a domain that doesn't match the
+    // current team then kick the user to the teams correct domain.
+    if (team.domain) {
+      if (team.domain !== hostname) {
+        window.location.href = `${team.url}${window.location.pathname}`;
+        return <LoadingIndicator />;
+      }
+    } else if (
+      env.SUBDOMAINS_ENABLED &&
+      team.subdomain &&
+      isCustomSubdomain(hostname) &&
+      !hostname.startsWith(`${team.subdomain}.`)
+    ) {
+      window.location.href = `${team.url}${window.location.pathname}`;
+      return <LoadingIndicator />;
+    }
+
+    return children;
+  }
+
+  auth.logout(true);
+  return <Redirect to="/" />;
+};
+
+export default observer(Authenticated);

app/components/Avatar/Avatar.js

@@ -1,15 +1,19 @@
 // @flow
-import * as React from 'react';
-import styled from 'styled-components';
-import { observable } from 'mobx';
-import { observer } from 'mobx-react';
-import { color } from 'shared/styles/constants';
-import placeholder from './placeholder.png';
+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 placeholder from "./placeholder.png";
 
-type Props = {
+type Props = {|
   src: string,
   size: number,
-};
+  icon?: React.Node,
+  user?: User,
+  onClick?: () => void,
+  className?: string,
+|};
 
 @observer
 class Avatar extends React.Component<Props> {
@@ -24,21 +28,43 @@ class Avatar extends React.Component<Props> {
   };
 
   render() {
+    const { src, icon, ...rest } = this.props;
+
     return (
-      <CircleImg
-        size={this.props.size}
-        onError={this.handleError}
-        src={this.error ? placeholder : this.props.src}
-      />
+      <AvatarWrapper>
+        <CircleImg
+          onError={this.handleError}
+          src={this.error ? placeholder : src}
+          {...rest}
+        />
+        {icon && <IconWrapper>{icon}</IconWrapper>}
+      </AvatarWrapper>
     );
   }
 }
 
+const AvatarWrapper = styled.div`
+  position: relative;
+`;
+
+const IconWrapper = styled.div`
+  display: flex;
+  position: absolute;
+  bottom: -2px;
+  right: -2px;
+  background: ${(props) => props.theme.primary};
+  border: 2px solid ${(props) => props.theme.background};
+  border-radius: 100%;
+  width: 20px;
+  height: 20px;
+`;
+
 const CircleImg = styled.img`
-  width: ${props => props.size}px;
-  height: ${props => props.size}px;
+  display: block;
+  width: ${(props) => props.size}px;
+  height: ${(props) => props.size}px;
   border-radius: 50%;
-  border: 2px solid ${color.white};
+  border: 2px solid ${(props) => props.theme.background};
   flex-shrink: 0;
 `;
 

app/components/Avatar/AvatarWithPresence.js

@@ -0,0 +1,93 @@
+// @flow
+import distanceInWordsToNow from "date-fns/distance_in_words_to_now";
+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,
+  lastViewedAt: string,
+  t: TFunction,
+};
+
+@observer
+class AvatarWithPresence extends React.Component<Props> {
+  @observable isOpen: boolean = false;
+
+  handleOpenProfile = () => {
+    this.isOpen = true;
+  };
+
+  handleCloseProfile = () => {
+    this.isOpen = false;
+  };
+
+  render() {
+    const {
+      user,
+      lastViewedAt,
+      isPresent,
+      isEditing,
+      isCurrentUser,
+      t,
+    } = this.props;
+
+    const action = isPresent
+      ? isEditing
+        ? t("currently editing")
+        : t("currently viewing")
+      : t("viewed {{ timeAgo }} ago", {
+          timeAgo: distanceInWordsToNow(new Date(lastViewedAt)),
+        });
+
+    return (
+      <>
+        <Tooltip
+          tooltip={
+            <Centered>
+              <strong>{user.name}</strong> {isCurrentUser && `(${t("You")})`}
+              <br />
+              {action}
+            </Centered>
+          }
+          placement="bottom"
+        >
+          <AvatarWrapper isPresent={isPresent}>
+            <Avatar
+              src={user.avatarUrl}
+              onClick={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/index.js

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

app/components/Badge.js

@@ -0,0 +1,18 @@
+// @flow
+import styled from "styled-components";
+
+const Badge = styled.span`
+  margin-left: 10px;
+  padding: 2px 6px 3px;
+  background-color: ${({ yellow, primary, theme }) =>
+    yellow ? theme.yellow : primary ? theme.primary : theme.textTertiary};
+  color: ${({ primary, yellow, theme }) =>
+    primary ? theme.white : yellow ? theme.almostBlack : theme.background};
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 500;
+  text-transform: uppercase;
+  user-select: none;
+`;
+
+export default Badge;

app/components/Branding.js

@@ -0,0 +1,43 @@
+// @flow
+import * as React from "react";
+import styled from "styled-components";
+import OutlineLogo from "./OutlineLogo";
+import env from "env";
+
+type Props = {
+  href?: string,
+};
+
+function Branding({ href = env.URL }: Props) {
+  return (
+    <Link href={href}>
+      <OutlineLogo size={16} />
+      &nbsp;Outline
+    </Link>
+  );
+}
+
+const Link = styled.a`
+  position: fixed;
+  bottom: 0;
+  left: 0;
+
+  font-weight: 600;
+  font-size: 14px;
+  text-decoration: none;
+  border-top-right-radius: 2px;
+  color: ${(props) => props.theme.text};
+  display: flex;
+  align-items: center;
+  padding: 16px;
+
+  svg {
+    fill: ${(props) => props.theme.text};
+  }
+
+  &:hover {
+    background: ${(props) => props.theme.sidebarBackground};
+  }
+`;
+
+export default Branding;

app/components/Breadcrumb.js

@@ -0,0 +1,204 @@
+// @flow
+import { observer } from "mobx-react";
+import {
+  ArchiveIcon,
+  EditIcon,
+  GoToIcon,
+  PadlockIcon,
+  ShapesIcon,
+  TrashIcon,
+} from "outline-icons";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import styled from "styled-components";
+import breakpoint from "styled-components-breakpoint";
+import Document from "models/Document";
+import CollectionIcon from "components/CollectionIcon";
+import Flex from "components/Flex";
+import useStores from "hooks/useStores";
+import BreadcrumbMenu from "menus/BreadcrumbMenu";
+import { collectionUrl } from "utils/routeHelpers";
+
+type Props = {
+  document: Document,
+  onlyText: boolean,
+};
+
+function Icon({ document }) {
+  const { t } = useTranslation();
+
+  if (document.isDeleted) {
+    return (
+      <>
+        <CategoryName to="/trash">
+          <TrashIcon color="currentColor" />
+          &nbsp;
+          <span>{t("Trash")}</span>
+        </CategoryName>
+        <Slash />
+      </>
+    );
+  }
+  if (document.isArchived) {
+    return (
+      <>
+        <CategoryName to="/archive">
+          <ArchiveIcon color="currentColor" />
+          &nbsp;
+          <span>{t("Archive")}</span>
+        </CategoryName>
+        <Slash />
+      </>
+    );
+  }
+  if (document.isDraft) {
+    return (
+      <>
+        <CategoryName to="/drafts">
+          <EditIcon color="currentColor" />
+          &nbsp;
+          <span>{t("Drafts")}</span>
+        </CategoryName>
+        <Slash />
+      </>
+    );
+  }
+  if (document.isTemplate) {
+    return (
+      <>
+        <CategoryName to="/templates">
+          <ShapesIcon color="currentColor" />
+          &nbsp;
+          <span>{t("Templates")}</span>
+        </CategoryName>
+        <Slash />
+      </>
+    );
+  }
+  return null;
+}
+
+const Breadcrumb = ({ document, onlyText }: Props) => {
+  const { collections } = useStores();
+  const { t } = useTranslation();
+
+  let collection = collections.get(document.collectionId);
+  if (!collection) {
+    collection = {
+      id: document.collectionId,
+      name: t("Deleted Collection"),
+      color: "currentColor",
+    };
+  }
+
+  const path = collection.pathToDocument
+    ? collection.pathToDocument(document.id).slice(0, -1)
+    : [];
+
+  if (onlyText === true) {
+    return (
+      <>
+        {collection.private && (
+          <>
+            <SmallPadlockIcon color="currentColor" size={16} />{" "}
+          </>
+        )}
+        {collection.name}
+        {path.map((n) => (
+          <React.Fragment key={n.id}>
+            <SmallSlash />
+            {n.title}
+          </React.Fragment>
+        ))}
+      </>
+    );
+  }
+
+  const isNestedDocument = path.length > 1;
+  const lastPath = path.length ? path[path.length - 1] : undefined;
+  const menuPath = isNestedDocument ? path.slice(0, -1) : [];
+
+  return (
+    <Wrapper justify="flex-start" align="center">
+      <Icon document={document} />
+      <CollectionName to={collectionUrl(collection.id)}>
+        <CollectionIcon collection={collection} expanded />
+        &nbsp;
+        <span>{collection.name}</span>
+      </CollectionName>
+      {isNestedDocument && (
+        <>
+          <Slash /> <BreadcrumbMenu path={menuPath} />
+        </>
+      )}
+      {lastPath && (
+        <>
+          <Slash />{" "}
+          <Crumb to={lastPath.url} title={lastPath.title}>
+            {lastPath.title}
+          </Crumb>
+        </>
+      )}
+    </Wrapper>
+  );
+};
+
+export const Slash = styled(GoToIcon)`
+  flex-shrink: 0;
+  fill: ${(props) => props.theme.divider};
+`;
+
+const Wrapper = styled(Flex)`
+  display: none;
+
+  ${breakpoint("tablet")`	
+    display: flex;
+  `};
+`;
+
+const SmallPadlockIcon = styled(PadlockIcon)`
+  display: inline-block;
+  vertical-align: sub;
+`;
+
+const SmallSlash = styled(GoToIcon)`
+  width: 15px;
+  height: 10px;
+  flex-shrink: 0;
+  opacity: 0.25;
+`;
+
+const Crumb = styled(Link)`
+  color: ${(props) => props.theme.text};
+  font-size: 15px;
+  height: 24px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+const CollectionName = styled(Link)`
+  display: flex;
+  flex-shrink: 1;
+  color: ${(props) => props.theme.text};
+  font-size: 15px;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  min-width: 0;
+
+  svg {
+    flex-shrink: 0;
+  }
+`;
+
+const CategoryName = styled(CollectionName)`
+  flex-shrink: 0;
+`;
+
+export default observer(Breadcrumb);

app/components/Button.js

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

app/components/Button/Button.js

@@ -1,117 +0,0 @@
-// @flow
-import * as React from 'react';
-import styled from 'styled-components';
-import { color } from 'shared/styles/constants';
-import { darken } from 'polished';
-
-const RealButton = styled.button`
-  display: inline-block;
-  margin: 0;
-  padding: 0;
-  border: 0;
-  background: ${color.primary};
-  color: ${color.white};
-  border-radius: 4px;
-  font-size: 15px;
-  height: 36px;
-  text-decoration: none;
-  flex-shrink: 0;
-  outline: none;
-  cursor: pointer;
-
-  &::-moz-focus-inner {
-    padding: 0;
-    border: 0;
-  }
-  &:hover {
-    background: ${darken(0.05, color.primary)};
-  }
-
-  svg {
-    position: relative;
-    top: 0.05em;
-  }
-
-  &:disabled {
-    opacity: 0.8;
-    cursor: default;
-  }
-
-  ${props =>
-    props.light &&
-    `
-    color: ${color.slate};
-    background: transparent;
-    border: 1px solid ${color.slate};
-
-    &:hover {
-      background: transparent;
-      color: ${color.slateDark};
-      border: 1px solid ${color.slateDark};
-    }
-  `} ${props =>
-      props.neutral &&
-      `
-    background: ${color.slate};
-
-    &:hover {
-      background: ${darken(0.05, color.slate)};
-    }
-  `} ${props =>
-      props.danger &&
-      `
-    background: ${color.danger};
-
-    &:hover {
-      background: ${darken(0.05, color.danger)};
-    }
-  `};
-`;
-
-const Label = styled.span`
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-
-  ${props => props.hasIcon && 'padding-left: 2px;'};
-`;
-
-const Inner = styled.span`
-  padding: 0 12px;
-  display: flex;
-  line-height: 28px;
-  justify-content: center;
-  align-items: center;
-
-  ${props =>
-    props.hasIcon &&
-    (props.small ? 'padding-left: 6px;' : 'padding-left: 10px;')};
-`;
-
-export type Props = {
-  type?: string,
-  value?: string,
-  icon?: React.Node,
-  className?: string,
-  children?: React.Node,
-};
-
-export default function Button({
-  type = 'text',
-  icon,
-  children,
-  value,
-  ...rest
-}: Props) {
-  const hasText = children !== undefined || value !== undefined;
-  const hasIcon = icon !== undefined;
-
-  return (
-    <RealButton {...rest}>
-      <Inner hasIcon={hasIcon}>
-        {hasIcon && icon}
-        {hasText && <Label hasIcon={hasIcon}>{children || value}</Label>}
-      </Inner>
-    </RealButton>
-  );
-}

app/components/Button/index.js

@@ -1,3 +0,0 @@
-// @flow
-import Button from './Button';
-export default Button;

app/components/ButtonLarge.js

@@ -0,0 +1,13 @@
+// @flow
+import styled from "styled-components";
+import Button, { Inner } from "./Button";
+
+const ButtonLarge = styled(Button)`
+  height: 40px;
+
+  ${Inner} {
+    padding: 4px 16px;
+  }
+`;
+
+export default ButtonLarge;

app/components/ButtonLink.js

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

app/components/CenteredContent.js

@@ -1,7 +1,7 @@
 // @flow
-import * as React from 'react';
-import styled from 'styled-components';
-import breakpoint from 'styled-components-breakpoint';
+import * as React from "react";
+import styled from "styled-components";
+import breakpoint from "styled-components-breakpoint";
 
 type Props = {
   children?: React.Node,
@@ -9,9 +9,10 @@ type Props = {
 
 const Container = styled.div`
   width: 100%;
+  max-width: 100vw;
   padding: 60px 20px;
 
-  ${breakpoint('tablet')`
+  ${breakpoint("tablet")`
     padding: 60px;
   `};
 `;

app/components/CenteredContent/index.js

@@ -1,3 +0,0 @@
-// @flow
-import CenteredContent from './CenteredContent';
-export default CenteredContent;

app/components/Checkbox.js

@@ -0,0 +1,64 @@
+// @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?: string,
+  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" : "")};
+`;
+
+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/ClickablePadding.js

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

app/components/Collaborators.js

@@ -0,0 +1,78 @@
+// @flow
+import { sortBy, keyBy } from "lodash";
+import { observer, inject } from "mobx-react";
+import * as React from "react";
+import { MAX_AVATAR_DISPLAY } from "shared/constants";
+
+import DocumentPresenceStore from "stores/DocumentPresenceStore";
+import ViewsStore from "stores/ViewsStore";
+import Document from "models/Document";
+import { AvatarWithPresence } from "components/Avatar";
+import Facepile from "components/Facepile";
+
+type Props = {
+  views: ViewsStore,
+  presence: DocumentPresenceStore,
+  document: Document,
+  currentUserId: string,
+};
+
+@observer
+class Collaborators extends React.Component<Props> {
+  componentDidMount() {
+    if (!this.props.document.isDeleted) {
+      this.props.views.fetchPage({ documentId: this.props.document.id });
+    }
+  }
+
+  render() {
+    const { document, presence, views, currentUserId } = this.props;
+    let documentPresence = presence.get(document.id);
+    documentPresence = documentPresence
+      ? Array.from(documentPresence.values())
+      : [];
+
+    const documentViews = views.inDocument(document.id);
+
+    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 mostRecentViewers = sortBy(
+      documentViews.slice(0, MAX_AVATAR_DISPLAY),
+      (view) => {
+        return presentIds.includes(view.user.id);
+      }
+    );
+
+    const viewersKeyedByUserId = keyBy(mostRecentViewers, (v) => v.user.id);
+    const overflow = documentViews.length - mostRecentViewers.length;
+
+    return (
+      <Facepile
+        users={mostRecentViewers.map((v) => v.user)}
+        overflow={overflow}
+        renderAvatar={(user) => {
+          const isPresent = presentIds.includes(user.id);
+          const isEditing = editingIds.includes(user.id);
+          const { lastViewedAt } = viewersKeyedByUserId[user.id];
+
+          return (
+            <AvatarWithPresence
+              key={user.id}
+              user={user}
+              lastViewedAt={lastViewedAt}
+              isPresent={isPresent}
+              isEditing={isEditing}
+              isCurrentUser={currentUserId === user.id}
+            />
+          );
+        }}
+      />
+    );
+  }
+}
+
+export default inject("views", "presence")(Collaborators);

app/components/Collaborators/Collaborators.js

@@ -1,65 +0,0 @@
-// @flow
-import * as React from 'react';
-import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
-import styled from 'styled-components';
-import Flex from 'shared/components/Flex';
-import Avatar from 'components/Avatar';
-import Tooltip from 'components/Tooltip';
-import Document from 'models/Document';
-
-type Props = { document: Document };
-
-const Collaborators = ({ document }: Props) => {
-  const {
-    createdAt,
-    updatedAt,
-    createdBy,
-    updatedBy,
-    collaborators,
-  } = document;
-  let tooltip;
-
-  if (createdAt === updatedAt) {
-    tooltip = `${createdBy.name} published ${distanceInWordsToNow(
-      new Date(createdAt)
-    )} ago`;
-  } else {
-    tooltip = `${updatedBy.name} modified ${distanceInWordsToNow(
-      new Date(updatedAt)
-    )} ago`;
-  }
-
-  return (
-    <Avatars>
-      <StyledTooltip tooltip={tooltip} placement="bottom">
-        {collaborators.map(user => (
-          <AvatarWrapper key={user.id}>
-            <Avatar src={user.avatarUrl} />
-          </AvatarWrapper>
-        ))}
-      </StyledTooltip>
-    </Avatars>
-  );
-};
-
-const StyledTooltip = styled(Tooltip)`
-  display: flex;
-  flex-direction: row-reverse;
-`;
-
-const AvatarWrapper = styled.div`
-  width: 24px;
-  height: 24px;
-  margin-right: -10px;
-
-  &:first-child {
-    margin-right: 0;
-  }
-`;
-
-const Avatars = styled(Flex)`
-  align-items: center;
-  flex-direction: row-reverse;
-`;
-
-export default Collaborators;

app/components/Collaborators/index.js

@@ -1,3 +0,0 @@
-// @flow
-import Collaborators from './Collaborators';
-export default Collaborators;

app/components/CollectionIcon.js

@@ -0,0 +1,45 @@
+// @flow
+import { inject, observer } from "mobx-react";
+import { PrivateCollectionIcon, CollectionIcon } from "outline-icons";
+import { getLuminance } from "polished";
+import * as React from "react";
+import UiStore from "stores/UiStore";
+import Collection from "models/Collection";
+import { icons } from "components/IconPicker";
+
+type Props = {
+  collection: Collection,
+  expanded?: boolean,
+  size?: number,
+  ui: UiStore,
+};
+
+function ResolvedCollectionIcon({ collection, expanded, size, ui }: Props) {
+  // If the chosen icon color is very dark then we invert it in dark mode
+  // otherwise it will be impossible to see against the dark background.
+  const color =
+    ui.resolvedTheme === "dark" && collection.color !== "currentColor"
+      ? getLuminance(collection.color) > 0.12
+        ? collection.color
+        : "currentColor"
+      : collection.color;
+
+  if (collection.icon && collection.icon !== "collection") {
+    try {
+      const Component = icons[collection.icon].component;
+      return <Component color={color} size={size} />;
+    } catch (error) {
+      console.warn("Failed to render custom icon " + collection.icon);
+    }
+  }
+
+  if (collection.private) {
+    return (
+      <PrivateCollectionIcon color={color} expanded={expanded} size={size} />
+    );
+  }
+
+  return <CollectionIcon color={color} expanded={expanded} size={size} />;
+}
+
+export default inject("ui")(observer(ResolvedCollectionIcon));

app/components/ColorPicker/ColorPicker.js

@@ -1,190 +0,0 @@
-// @flow
-import * as React from 'react';
-import { observable, computed, action } from 'mobx';
-import { observer } from 'mobx-react';
-import styled from 'styled-components';
-import Flex from 'shared/components/Flex';
-import { LabelText, Outline } from 'components/Input';
-import { color, fonts, fontWeight } from 'shared/styles/constants';
-import { validateColorHex } from 'shared/utils/color';
-
-const colors = [
-  '#4E5C6E',
-  '#19B7FF',
-  '#7F6BFF',
-  '#FC7419',
-  '#FC2D2D',
-  '#FFE100',
-  '#14CF9F',
-  '#EE84F0',
-  '#2F362F',
-];
-
-type Props = {
-  onSelect: (color: string) => void,
-  value?: string,
-};
-
-@observer
-class ColorPicker extends React.Component<Props> {
-  @observable selectedColor: string = colors[0];
-  @observable customColorValue: string = '';
-  @observable customColorSelected: boolean;
-
-  componentWillMount() {
-    const { value } = this.props;
-    if (value && colors.includes(value)) {
-      this.selectedColor = value;
-    } else if (value) {
-      this.customColorSelected = true;
-      this.customColorValue = value.replace('#', '');
-    }
-  }
-
-  componentDidMount() {
-    this.fireCallback();
-  }
-
-  fireCallback = () => {
-    this.props.onSelect(
-      this.customColorSelected ? this.customColor : this.selectedColor
-    );
-  };
-
-  @computed
-  get customColor(): string {
-    return this.customColorValue &&
-      validateColorHex(`#${this.customColorValue}`)
-      ? `#${this.customColorValue}`
-      : colors[0];
-  }
-
-  @action
-  setColor = (color: string) => {
-    this.selectedColor = color;
-    this.customColorSelected = false;
-    this.fireCallback();
-  };
-
-  @action
-  focusOnCustomColor = (event: SyntheticEvent<*>) => {
-    this.selectedColor = '';
-    this.customColorSelected = true;
-    this.fireCallback();
-  };
-
-  @action
-  setCustomColor = (event: SyntheticEvent<*>) => {
-    let target = event.target;
-    if (target instanceof HTMLInputElement) {
-      const color = target.value;
-      this.customColorValue = color.replace('#', '');
-      this.fireCallback();
-    }
-  };
-
-  render() {
-    return (
-      <Flex column>
-        <LabelText>Color</LabelText>
-        <StyledOutline justify="space-between">
-          <Flex>
-            {colors.map(color => (
-              <Swatch
-                key={color}
-                color={color}
-                active={
-                  color === this.selectedColor && !this.customColorSelected
-                }
-                onClick={() => this.setColor(color)}
-              />
-            ))}
-          </Flex>
-          <Flex justify="flex-end">
-            <strong>Custom color:</strong>
-            <HexHash>#</HexHash>
-            <CustomColorInput
-              placeholder="FFFFFF"
-              onFocus={this.focusOnCustomColor}
-              onChange={this.setCustomColor}
-              value={this.customColorValue}
-              maxLength={6}
-            />
-            <Swatch
-              color={this.customColor}
-              active={this.customColorSelected}
-            />
-          </Flex>
-        </StyledOutline>
-      </Flex>
-    );
-  }
-}
-
-type SwatchProps = {
-  onClick?: () => void,
-  color?: string,
-  active?: boolean,
-};
-
-const Swatch = ({ onClick, ...props }: SwatchProps) => (
-  <SwatchOutset onClick={onClick} {...props}>
-    <SwatchInset {...props} />
-  </SwatchOutset>
-);
-
-const SwatchOutset = styled(Flex)`
-  width: 24px;
-  height: 24px;
-  margin-right: 5px;
-  border: 2px solid ${({ active, color }) => (active ? color : 'transparent')};
-  border-radius: 2px;
-  background: ${({ color }) => color};
-  ${({ onClick }) => onClick && `cursor: pointer;`} &:last-child {
-    margin-right: 0;
-  }
-`;
-
-const SwatchInset = styled(Flex)`
-  width: 20px;
-  height: 20px;
-  border: 1px solid ${({ active, color }) => (active ? 'white' : 'transparent')};
-  border-radius: 2px;
-  background: ${({ color }) => color};
-`;
-
-const StyledOutline = styled(Outline)`
-  padding: 5px;
-  flex-wrap: wrap;
-
-  strong {
-    font-weight: 500;
-  }
-`;
-
-const HexHash = styled.div`
-  margin-left: 12px;
-  padding-bottom: 0;
-  font-weight: ${fontWeight.medium};
-  user-select: none;
-`;
-
-const CustomColorInput = styled.input`
-  border: 0;
-  flex: 1;
-  width: 65px;
-  margin-right: 12px;
-  padding-bottom: 0;
-  outline: none;
-  background: none;
-  font-family: ${fonts.monospace};
-  font-weight: ${fontWeight.medium};
-
-  &::placeholder {
-    color: ${color.slate};
-    font-family: ${fonts.monospace};
-    font-weight: ${fontWeight.medium};
-  }
-`;
-
-export default ColorPicker;

app/components/ColorPicker/index.js

@@ -1,3 +0,0 @@
-// @flow
-import ColorPicker from './ColorPicker';
-export default ColorPicker;

app/components/ContextMenu/Header.js

@@ -0,0 +1,13 @@
+// @flow
+import styled from "styled-components";
+
+const Header = styled.h3`
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  color: ${(props) => props.theme.sidebarText};
+  letter-spacing: 0.04em;
+  margin: 1em 12px 0.5em;
+`;
+
+export default Header;

app/components/ContextMenu/MenuItem.js

@@ -0,0 +1,101 @@
+// @flow
+import { CheckmarkIcon } from "outline-icons";
+import * as React from "react";
+import { MenuItem as BaseMenuItem } from "reakit/Menu";
+import styled from "styled-components";
+
+type Props = {|
+  onClick?: (SyntheticEvent<>) => void | Promise<void>,
+  children?: React.Node,
+  selected?: boolean,
+  disabled?: boolean,
+  to?: string,
+  href?: string,
+  target?: "_blank",
+  as?: string | React.ComponentType<*>,
+|};
+
+const MenuItem = ({
+  onClick,
+  children,
+  selected,
+  disabled,
+  as,
+  ...rest
+}: Props) => {
+  return (
+    <BaseMenuItem
+      onClick={disabled ? undefined : onClick}
+      disabled={disabled}
+      {...rest}
+    >
+      {(props) => (
+        <MenuAnchor as={onClick ? "button" : as} {...props}>
+          {selected !== undefined && (
+            <>
+              {selected ? <CheckmarkIcon /> : <Spacer />}
+              &nbsp;
+            </>
+          )}
+          {children}
+        </MenuAnchor>
+      )}
+    </BaseMenuItem>
+  );
+};
+
+const Spacer = styled.div`
+  width: 24px;
+  height: 24px;
+`;
+
+export const MenuAnchor = styled.a`
+  display: flex;
+  margin: 0;
+  border: 0;
+  padding: 6px 12px;
+  width: 100%;
+  min-height: 32px;
+  background: none;
+  color: ${(props) =>
+    props.disabled ? props.theme.textTertiary : props.theme.textSecondary};
+  justify-content: left;
+  align-items: center;
+  font-size: 15px;
+  cursor: default;
+  user-select: none;
+
+  svg:not(:last-child) {
+    margin-right: 8px;
+  }
+
+  svg {
+    flex-shrink: 0;
+    opacity: ${(props) => (props.disabled ? ".5" : 1)};
+  }
+
+  ${(props) =>
+    props.disabled
+      ? "pointer-events: none;"
+      : `
+
+  &:hover,
+  &.focus-visible {
+    color: ${props.theme.white};
+    background: ${props.theme.primary};
+    box-shadow: none;
+    cursor: pointer;
+
+    svg {
+      fill: ${props.theme.white};
+    }
+  }
+
+  &:focus {
+    color: ${props.theme.white};
+    background: ${props.theme.primary};
+  }
+  `};
+`;
+
+export default MenuItem;

app/components/ContextMenu/OverflowMenuButton.js

@@ -0,0 +1,21 @@
+// @flow
+import { MoreIcon } from "outline-icons";
+import * as React from "react";
+import { MenuButton } from "reakit/Menu";
+import NudeButton from "components/NudeButton";
+
+export default function OverflowMenuButton({
+  iconColor,
+  className,
+  ...rest
+}: any) {
+  return (
+    <MenuButton {...rest}>
+      {(props) => (
+        <NudeButton className={className} {...props}>
+          <MoreIcon color={iconColor} />
+        </NudeButton>
+      )}
+    </MenuButton>
+  );
+}

app/components/ContextMenu/Separator.js

@@ -0,0 +1,16 @@
+// @flow
+import * as React from "react";
+import { MenuSeparator } from "reakit/Menu";
+import styled from "styled-components";
+
+export default function Separator(rest: {}) {
+  return (
+    <MenuSeparator {...rest}>
+      {(props) => <HorizontalRule {...props} />}
+    </MenuSeparator>
+  );
+}
+
+const HorizontalRule = styled.hr`
+  margin: 0.5em 12px;
+`;

app/components/ContextMenu/Template.js

@@ -0,0 +1,169 @@
+// @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);
+  justify-self: flex-end;
+`;
+
+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/index.js

@@ -0,0 +1,77 @@
+// @flow
+import { rgba } from "polished";
+import * as React from "react";
+import { Menu } from "reakit/Menu";
+import styled from "styled-components";
+import { fadeAndScaleIn } 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 {...rest}>
+      {(props) => (
+        <Position {...props}>
+          <Background>
+            {rest.visible || rest.animating ? children : null}
+          </Background>
+        </Position>
+      )}
+    </Menu>
+  );
+}
+
+const Position = styled.div`
+  position: absolute;
+  z-index: ${(props) => props.theme.depths.menu};
+`;
+
+const Background = styled.div`
+  animation: ${fadeAndScaleIn} 200ms ease;
+  transform-origin: ${(props) => (props.left !== undefined ? "25%" : "75%")} 0;
+  background: ${(props) => rgba(props.theme.menuBackground, 0.95)};
+  border: ${(props) =>
+    props.theme.menuBorder ? `1px solid ${props.theme.menuBorder}` : "none"};
+  border-radius: 2px;
+  padding: 0.5em 0;
+  min-width: 180px;
+  overflow: hidden;
+  overflow-y: auto;
+  max-height: 75vh;
+  max-width: 276px;
+  box-shadow: ${(props) => props.theme.menuShadow};
+  pointer-events: all;
+  font-weight: normal;
+
+  @media print {
+    display: none;
+  }
+`;

app/components/CopyToClipboard.js

@@ -1,25 +1,25 @@
 // @flow
-import * as React from 'react';
-import copy from 'copy-to-clipboard';
+import copy from "copy-to-clipboard";
+import * as React from "react";
 
 type Props = {
   text: string,
   children?: React.Node,
-  onClick?: () => *,
-  onCopy: () => *,
+  onClick?: () => void,
+  onCopy: () => void,
 };
 
 class CopyToClipboard extends React.PureComponent<Props> {
-  onClick = (ev: SyntheticEvent<*>) => {
+  onClick = (ev: SyntheticEvent<>) => {
     const { text, onCopy, children } = this.props;
     const elem = React.Children.only(children);
     copy(text, {
-      debug: !!__DEV__,
+      debug: process.env.NODE_ENV !== "production",
     });
 
     if (onCopy) onCopy();
 
-    if (elem && elem.props && typeof elem.props.onClick === 'function') {
+    if (elem && elem.props && typeof elem.props.onClick === "function") {
       elem.props.onClick(ev);
     }
   };

app/components/CopyToClipboard/index.js

@@ -1,3 +0,0 @@
-// @flow
-import CopyToClipboard from './CopyToClipboard';
-export default CopyToClipboard;

app/components/DelayedMount.js

@@ -0,0 +1,24 @@
+// @flow
+import * as React from "react";
+
+type Props = {
+  delay?: number,
+  children: React.Node,
+};
+
+export default function DelayedMount({ delay = 250, children }: Props) {
+  const [isShowing, setShowing] = React.useState(false);
+
+  React.useEffect(() => {
+    const timeout = setTimeout(() => setShowing(true), delay);
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [delay]);
+
+  if (!isShowing) {
+    return null;
+  }
+
+  return children;
+}

app/components/Divider/Divider.js

@@ -1,21 +0,0 @@
-// @flow
-import * as React from 'react';
-import styled from 'styled-components';
-import Flex from 'shared/components/Flex';
-
-const Divider = () => {
-  return (
-    <Flex auto justify="center">
-      <Content />
-    </Flex>
-  );
-};
-
-const Content = styled.span`
-  display: flex;
-  width: 50%;
-  margin: 20px 0;
-  border-bottom: 1px solid #eee;
-`;
-
-export default Divider;

app/components/Divider/index.js

@@ -1,3 +0,0 @@
-// @flow
-import Divider from './Divider';
-export default Divider;

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

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

app/components/DocumentList/DocumentList.js

@@ -1,37 +0,0 @@
-// @flow
-import * as React from 'react';
-import Document from 'models/Document';
-import DocumentPreview from 'components/DocumentPreview';
-import ArrowKeyNavigation from 'boundless-arrow-key-navigation';
-
-type Props = {
-  documents: Document[],
-  showCollection?: boolean,
-  limit?: number,
-};
-
-class DocumentList extends React.Component<Props> {
-  render() {
-    const { limit, showCollection } = this.props;
-    const documents = limit
-      ? this.props.documents.splice(0, limit)
-      : this.props.documents;
-
-    return (
-      <ArrowKeyNavigation
-        mode={ArrowKeyNavigation.mode.VERTICAL}
-        defaultActiveChildIndex={0}
-      >
-        {documents.map(document => (
-          <DocumentPreview
-            key={document.id}
-            document={document}
-            showCollection={showCollection}
-          />
-        ))}
-      </ArrowKeyNavigation>
-    );
-  }
-}
-
-export default DocumentList;

app/components/DocumentList/index.js

@@ -1,3 +0,0 @@
-// @flow
-import DocumentList from './DocumentList';
-export default DocumentList;

app/components/DocumentListItem.js

@@ -0,0 +1,243 @@
+// @flow
+import { observer } from "mobx-react";
+import { PlusIcon } from "outline-icons";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import 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 useCurrentUser from "hooks/useCurrentUser";
+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,
+|};
+
+const SEARCH_RESULT_REGEX = /<b\b[^>]*>(.*?)<\/b>/gi;
+
+function replaceResultMarks(tag: string) {
+  // don't use SEARCH_RESULT_REGEX here as it causes
+  // an infinite loop to trigger a regex inside it's own callback
+  return tag.replace(/<b\b[^>]*>(.*?)<\/b>/gi, "$1");
+}
+
+function DocumentListItem(props: Props) {
+  const { t } = useTranslation();
+  const currentUser = useCurrentUser();
+  const [menuOpen, setMenuOpen] = React.useState(false);
+  const {
+    document,
+    showNestedDocuments,
+    showCollection,
+    showPublished,
+    showPin,
+    showDraft = true,
+    showTemplate,
+    highlight,
+    context,
+  } = props;
+
+  const queryIsInTitle =
+    !!highlight &&
+    !!document.title.toLowerCase().includes(highlight.toLowerCase());
+  const canStar =
+    !document.isDraft && !document.isArchived && !document.isTemplate;
+
+  return (
+    <DocumentLink
+      $isStarred={document.isStarred}
+      $menuOpen={menuOpen}
+      to={{
+        pathname: document.url,
+        state: { title: document.titleWithDefault },
+      }}
+    >
+      <Content>
+        <Heading>
+          <Title text={document.titleWithDefault} highlight={highlight} />
+          {document.isNew && document.createdBy.id !== currentUser.id && (
+            <Badge yellow>{t("New")}</Badge>
+          )}
+          {canStar && (
+            <StarPositioner>
+              <StarButton document={document} />
+            </StarPositioner>
+          )}
+          {document.isDraft && showDraft && (
+            <Tooltip
+              tooltip={t("Only visible to you")}
+              delay={500}
+              placement="top"
+            >
+              <Badge>{t("Draft")}</Badge>
+            </Tooltip>
+          )}
+          {document.isTemplate && showTemplate && (
+            <Badge primary>{t("Template")}</Badge>
+          )}
+        </Heading>
+
+        {!queryIsInTitle && (
+          <ResultContext
+            text={context}
+            highlight={highlight ? SEARCH_RESULT_REGEX : undefined}
+            processResult={replaceResultMarks}
+          />
+        )}
+        <DocumentMeta
+          document={document}
+          showCollection={showCollection}
+          showPublished={showPublished}
+          showNestedDocuments={showNestedDocuments}
+          showLastViewed
+        />
+      </Content>
+      <Actions>
+        {document.isTemplate && !document.isArchived && !document.isDeleted && (
+          <>
+            <Button
+              as={Link}
+              to={newDocumentUrl(document.collectionId, {
+                templateId: document.id,
+              })}
+              icon={<PlusIcon />}
+              neutral
+            >
+              {t("New doc")}
+            </Button>
+            &nbsp;
+          </>
+        )}
+        <DocumentMenu
+          document={document}
+          showPin={showPin}
+          onOpen={() => setMenuOpen(true)}
+          onClose={() => setMenuOpen(false)}
+          modal={false}
+        />
+      </Actions>
+    </DocumentLink>
+  );
+}
+
+const Content = styled.div`
+  flex-grow: 1;
+  flex-shrink: 1;
+  min-width: 0;
+`;
+
+const Actions = styled(EventBoundary)`
+  display: none;
+  align-items: center;
+  margin: 8px;
+  flex-shrink: 0;
+  flex-grow: 0;
+
+  ${breakpoint("tablet")`
+    display: flex;
+  `};
+`;
+
+const DocumentLink = styled(Link)`
+  display: flex;
+  align-items: center;
+  margin: 10px -8px;
+  padding: 6px 8px;
+  border-radius: 8px;
+  max-height: 50vh;
+  min-width: 100%;
+  max-width: calc(100vw - 40px);
+
+  ${Actions} {
+    opacity: 0;
+  }
+
+  ${AnimatedStar} {
+    opacity: ${(props) => (props.$isStarred ? "1 !important" : 0)};
+  }
+
+  &:hover,
+  &:active,
+  &:focus,
+  &:focus-within {
+    background: ${(props) => props.theme.listItemHoverBackground};
+
+    ${Actions} {
+      opacity: 1;
+    }
+
+    ${AnimatedStar} {
+      opacity: 0.5;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+
+  ${(props) =>
+    props.$menuOpen &&
+    css`
+      background: ${(props) => props.theme.listItemHoverBackground};
+
+      ${Actions} {
+        opacity: 1;
+      }
+
+      ${AnimatedStar} {
+        opacity: 0.5;
+      }
+    `}
+`;
+
+const Heading = styled.h3`
+  display: flex;
+  align-items: center;
+  height: 24px;
+  margin-top: 0;
+  margin-bottom: 0.25em;
+  overflow: hidden;
+  white-space: nowrap;
+  color: ${(props) => props.theme.text};
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+`;
+
+const StarPositioner = styled(Flex)`
+  margin-left: 4px;
+  align-items: center;
+`;
+
+const Title = styled(Highlight)`
+  max-width: 90%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+const ResultContext = styled(Highlight)`
+  display: block;
+  color: ${(props) => props.theme.textTertiary};
+  font-size: 14px;
+  margin-top: -0.25em;
+  margin-bottom: 0.25em;
+`;
+
+export default observer(DocumentListItem);

app/components/DocumentMeta.js

@@ -0,0 +1,156 @@
+// @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 Breadcrumb from "components/Breadcrumb";
+import Flex from "components/Flex";
+import Time from "components/Time";
+import useStores from "hooks/useStores";
+
+const Container = styled(Flex)`
+  color: ${(props) => props.theme.textTertiary};
+  font-size: 13px;
+  white-space: nowrap;
+  overflow: hidden;
+  min-width: 0;
+`;
+
+const Modified = styled.span`
+  color: ${(props) => props.theme.textTertiary};
+  font-weight: ${(props) => (props.highlight ? "600" : "400")};
+`;
+
+type Props = {|
+  showCollection?: boolean,
+  showPublished?: boolean,
+  showLastViewed?: boolean,
+  showNestedDocuments?: boolean,
+  document: Document,
+  children: React.Node,
+  to?: string,
+|};
+
+function DocumentMeta({
+  showPublished,
+  showCollection,
+  showLastViewed,
+  showNestedDocuments,
+  document,
+  children,
+  to,
+  ...rest
+}: Props) {
+  const { t } = useTranslation();
+  const { collections, auth } = useStores();
+  const {
+    modifiedSinceViewed,
+    updatedAt,
+    updatedBy,
+    createdAt,
+    publishedAt,
+    archivedAt,
+    deletedAt,
+    isDraft,
+    lastViewedAt,
+  } = document;
+
+  // Prevent meta information from displaying if updatedBy is not available.
+  // Currently the situation where this is true is rendering share links.
+  if (!updatedBy) {
+    return null;
+  }
+
+  let content;
+
+  if (deletedAt) {
+    content = (
+      <span>
+        {t("deleted")} <Time dateTime={deletedAt} addSuffix />
+      </span>
+    );
+  } else if (archivedAt) {
+    content = (
+      <span>
+        {t("archived")} <Time dateTime={archivedAt} addSuffix />
+      </span>
+    );
+  } else if (createdAt === updatedAt) {
+    content = (
+      <span>
+        {t("created")} <Time dateTime={updatedAt} addSuffix />
+      </span>
+    );
+  } else if (publishedAt && (publishedAt === updatedAt || showPublished)) {
+    content = (
+      <span>
+        {t("published")} <Time dateTime={publishedAt} addSuffix />
+      </span>
+    );
+  } else if (isDraft) {
+    content = (
+      <span>
+        {t("saved")} <Time dateTime={updatedAt} addSuffix />
+      </span>
+    );
+  } else {
+    content = (
+      <Modified highlight={modifiedSinceViewed}>
+        {t("updated")} <Time dateTime={updatedAt} addSuffix />
+      </Modified>
+    );
+  }
+
+  const collection = collections.get(document.collectionId);
+  const updatedByMe = auth.user && auth.user.id === updatedBy.id;
+
+  const timeSinceNow = () => {
+    if (isDraft || !showLastViewed) {
+      return null;
+    }
+    if (!lastViewedAt) {
+      return (
+        <>
+          •&nbsp;<Modified highlight>{t("Never viewed")}</Modified>
+        </>
+      );
+    }
+
+    return (
+      <span>
+        •&nbsp;{t("Viewed")} <Time dateTime={lastViewedAt} addSuffix shorten />
+      </span>
+    );
+  };
+
+  const nestedDocumentsCount = collection
+    ? collection.getDocumentChildren(document.id).length
+    : 0;
+
+  return (
+    <Container align="center" {...rest}>
+      {updatedByMe ? t("You") : updatedBy.name}&nbsp;
+      {to ? <Link to={to}>{content}</Link> : content}
+      {showCollection && collection && (
+        <span>
+          &nbsp;{t("in")}&nbsp;
+          <strong>
+            <Breadcrumb document={document} onlyText />
+          </strong>
+        </span>
+      )}
+      {showNestedDocuments && nestedDocumentsCount > 0 && (
+        <span>
+          &nbsp;&middot; {nestedDocumentsCount}{" "}
+          {t("nested document", { count: nestedDocumentsCount })}
+        </span>
+      )}
+      &nbsp;{timeSinceNow()}
+      {children}
+    </Container>
+  );
+}
+
+export default observer(DocumentMeta);

app/components/DocumentMetaWithViews.js

@@ -0,0 +1,54 @@
+// @flow
+import { useObserver } from "mobx-react";
+import * as React from "react";
+import styled from "styled-components";
+import Document from "models/Document";
+import DocumentMeta from "components/DocumentMeta";
+import useStores from "../hooks/useStores";
+
+type Props = {|
+  document: Document,
+  isDraft: boolean,
+  to?: string,
+|};
+
+function DocumentMetaWithViews({ to, isDraft, document }: Props) {
+  const { views } = useStores();
+  const documentViews = useObserver(() => views.inDocument(document.id));
+  const totalViewers = documentViews.length;
+  const onlyYou = totalViewers === 1 && documentViews[0].user.id;
+
+  return (
+    <Meta document={document} to={to}>
+      {totalViewers && !isDraft ? (
+        <>
+          &nbsp;&middot; Viewed by{" "}
+          {onlyYou
+            ? "only you"
+            : `${totalViewers} ${totalViewers === 1 ? "person" : "people"}`}
+        </>
+      ) : null}
+    </Meta>
+  );
+}
+
+const Meta = styled(DocumentMeta)`
+  margin: -12px 0 2em 0;
+  font-size: 14px;
+  position: relative;
+  z-index: 1;
+
+  a {
+    color: inherit;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  @media print {
+    display: none;
+  }
+`;
+
+export default DocumentMetaWithViews;

app/components/DocumentPreview/DocumentPreview.js

@@ -1,145 +0,0 @@
-// @flow
-import * as React from 'react';
-import { observer } from 'mobx-react';
-import { Link } from 'react-router-dom';
-import Document from 'models/Document';
-import styled from 'styled-components';
-import { color } from 'shared/styles/constants';
-import Flex from 'shared/components/Flex';
-import Highlight from 'components/Highlight';
-import { StarredIcon } from 'outline-icons';
-import PublishingInfo from './components/PublishingInfo';
-import DocumentMenu from 'menus/DocumentMenu';
-
-type Props = {
-  document: Document,
-  highlight?: ?string,
-  showCollection?: boolean,
-  innerRef?: Function,
-};
-
-const StyledStar = styled(({ solid, ...props }) => (
-  <StarredIcon color={solid ? color.black : color.text} {...props} />
-))`
-  opacity: ${props => (props.solid ? '1 !important' : 0)};
-  transition: all 100ms ease-in-out;
-
-  &:hover {
-    transform: scale(1.1);
-  }
-  &:active {
-    transform: scale(0.95);
-  }
-`;
-
-const StyledDocumentMenu = styled(DocumentMenu)`
-  position: absolute;
-  right: 16px;
-  top: 50%;
-  transform: translateY(-50%);
-`;
-
-const DocumentLink = styled(Link)`
-  display: block;
-  margin: 0 -16px;
-  padding: 10px 16px;
-  border-radius: 8px;
-  border: 2px solid transparent;
-  max-height: 50vh;
-  min-width: 100%;
-  overflow: hidden;
-  position: relative;
-
-  ${StyledDocumentMenu} {
-    opacity: 0;
-  }
-
-  &:hover,
-  &:active,
-  &:focus {
-    background: ${color.smokeLight};
-    border: 2px solid ${color.smoke};
-    outline: none;
-
-    ${StyledStar}, ${StyledDocumentMenu} {
-      opacity: 0.5;
-
-      &:hover {
-        opacity: 1;
-      }
-    }
-  }
-
-  &:focus {
-    border: 2px solid ${color.slateDark};
-  }
-`;
-
-const Heading = styled.h3`
-  display: flex;
-  align-items: center;
-  height: 24px;
-  margin-top: 0;
-  margin-bottom: 0.25em;
-`;
-
-const Actions = styled(Flex)`
-  margin-left: 4px;
-  align-items: center;
-`;
-
-@observer
-class DocumentPreview extends React.Component<Props> {
-  star = (ev: SyntheticEvent<*>) => {
-    ev.preventDefault();
-    ev.stopPropagation();
-    this.props.document.star();
-  };
-
-  unstar = (ev: SyntheticEvent<*>) => {
-    ev.preventDefault();
-    ev.stopPropagation();
-    this.props.document.unstar();
-  };
-
-  render() {
-    const {
-      document,
-      showCollection,
-      innerRef,
-      highlight,
-      ...rest
-    } = this.props;
-
-    return (
-      <DocumentLink
-        to={{
-          pathname: document.url,
-          state: { title: document.title },
-        }}
-        innerRef={innerRef}
-        {...rest}
-      >
-        <Heading>
-          <Highlight text={document.title} highlight={highlight} />
-          {document.publishedAt && (
-            <Actions>
-              {document.starred ? (
-                <StyledStar onClick={this.unstar} solid />
-              ) : (
-                <StyledStar onClick={this.star} />
-              )}
-            </Actions>
-          )}
-          <StyledDocumentMenu document={document} />
-        </Heading>
-        <PublishingInfo
-          document={document}
-          collection={showCollection ? document.collection : undefined}
-        />
-      </DocumentLink>
-    );
-  }
-}
-
-export default DocumentPreview;

app/components/DocumentPreview/components/PublishingInfo.js

@@ -1,68 +0,0 @@
-// @flow
-import * as React from 'react';
-import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
-import styled from 'styled-components';
-import { color } from 'shared/styles/constants';
-import Collection from 'models/Collection';
-import Document from 'models/Document';
-import Flex from 'shared/components/Flex';
-
-const Container = styled(Flex)`
-  color: ${color.slate};
-  font-size: 13px;
-`;
-
-const Modified = styled.span`
-  color: ${props => (props.highlight ? color.slateDark : color.slate)};
-  font-weight: ${props => (props.highlight ? '600' : '400')};
-`;
-
-type Props = {
-  collection?: Collection,
-  document: Document,
-  views?: number,
-};
-
-class PublishingInfo extends React.Component<Props> {
-  render() {
-    const { collection, document } = this.props;
-    const {
-      modifiedSinceViewed,
-      createdAt,
-      updatedAt,
-      createdBy,
-      updatedBy,
-      publishedAt,
-    } = document;
-
-    const timeAgo = `${distanceInWordsToNow(new Date(createdAt))} ago`;
-
-    return (
-      <Container align="center">
-        {publishedAt === updatedAt ? (
-          <span>
-            {createdBy.name} published {timeAgo}
-          </span>
-        ) : (
-          <React.Fragment>
-            {updatedBy.name}
-            {publishedAt ? (
-              <Modified highlight={modifiedSinceViewed}>
-                &nbsp;modified {timeAgo}
-              </Modified>
-            ) : (
-              <span>&nbsp;saved {timeAgo}</span>
-            )}
-          </React.Fragment>
-        )}
-        {collection && (
-          <span>
-            &nbsp;in <strong>{collection.name}</strong>
-          </span>
-        )}
-      </Container>
-    );
-  }
-}
-
-export default PublishingInfo;

app/components/DocumentPreview/index.js

@@ -1,3 +0,0 @@
-// @flow
-import DocumentPreview from './DocumentPreview';
-export default DocumentPreview;

app/components/DocumentViews/DocumentViewersStore.js

@@ -1,42 +0,0 @@
-// @flow
-import { observable, action } from 'mobx';
-import invariant from 'invariant';
-import { client } from 'utils/ApiClient';
-import type { User } from 'types';
-
-type View = {
-  user: User,
-  count: number,
-};
-
-class DocumentViewersStore {
-  documentId: string;
-  @observable viewers: Array<View>;
-  @observable isFetching: boolean;
-
-  @action
-  fetchViewers = async () => {
-    this.isFetching = true;
-
-    try {
-      const res = await client.post(
-        '/views.list',
-        {
-          id: this.documentId,
-        },
-        { cache: true }
-      );
-      invariant(res && res.data, 'Data should be available');
-      this.viewers = res.data.users;
-    } catch (e) {
-      console.error('Something went wrong');
-    }
-    this.isFetching = false;
-  };
-
-  constructor(documentId: string) {
-    this.documentId = documentId;
-  }
-}
-
-export default DocumentViewersStore;

app/components/DocumentViews/DocumentViews.js

@@ -1,71 +0,0 @@
-// @flow
-import * as React from 'react';
-import { observable } from 'mobx';
-import { observer } from 'mobx-react';
-import Popover from 'components/Popover';
-import styled from 'styled-components';
-import DocumentViewers from './components/DocumentViewers';
-import DocumentViewersStore from './DocumentViewersStore';
-import Flex from 'shared/components/Flex';
-
-const Container = styled(Flex)`
-  font-size: 13px;
-  user-select: none;
-
-  a {
-    color: #ccc;
-
-    &:hover {
-      color: #aaa;
-    }
-  }
-`;
-
-type Props = {
-  documentId: string,
-  count: number,
-};
-
-@observer
-class DocumentViews extends React.Component<Props> {
-  @observable opened: boolean = false;
-  anchor: ?HTMLElement;
-  store: DocumentViewersStore;
-
-  constructor(props: Props) {
-    super(props);
-    this.store = new DocumentViewersStore(props.documentId);
-  }
-
-  openPopover = () => {
-    this.opened = true;
-  };
-
-  closePopover = () => {
-    this.opened = false;
-  };
-
-  setRef = (ref: ?HTMLElement) => {
-    this.anchor = ref;
-  };
-
-  render() {
-    return (
-      <Container align="center">
-        <a ref={this.setRef} onClick={this.openPopover}>
-          Viewed {this.props.count} {this.props.count === 1 ? 'time' : 'times'}
-        </a>
-        {this.opened && (
-          <Popover anchor={this.anchor} onClose={this.closePopover}>
-            <DocumentViewers
-              onMount={this.store.fetchViewers}
-              viewers={this.store.viewers}
-            />
-          </Popover>
-        )}
-      </Container>
-    );
-  }
-}
-
-export default DocumentViews;

app/components/DocumentViews/components/DocumentViewers/DocumentViewers.js

@@ -1,52 +0,0 @@
-// @flow
-import * as React from 'react';
-import Flex from 'shared/components/Flex';
-import styled from 'styled-components';
-import map from 'lodash/map';
-import Avatar from 'components/Avatar';
-import Scrollable from 'components/Scrollable';
-
-type Props = {
-  viewers: Array<Object>,
-  onMount: Function,
-};
-
-const List = styled.ul`
-  list-style: none;
-  font-size: 13px;
-  margin: -4px 0;
-  padding: 0;
-
-  li {
-    padding: 4px 0;
-  }
-`;
-
-const UserName = styled.span`
-  padding-left: 8px;
-`;
-
-class DocumentViewers extends React.Component<Props> {
-  componentDidMount() {
-    this.props.onMount();
-  }
-
-  render() {
-    return (
-      <Scrollable>
-        <List>
-          {map(this.props.viewers, view => (
-            <li key={view.user.id}>
-              <Flex align="center">
-                <Avatar src={view.user.avatarUrl} />{' '}
-                <UserName>{view.user.name}</UserName>
-              </Flex>
-            </li>
-          ))}
-        </List>
-      </Scrollable>
-    );
-  }
-}
-
-export default DocumentViewers;

app/components/DocumentViews/components/DocumentViewers/index.js

@@ -1,3 +0,0 @@
-// @flow
-import DocumentViewers from './DocumentViewers';
-export default DocumentViewers;

app/components/DocumentViews/index.js

@@ -1,3 +0,0 @@
-// @flow
-import DocumentViews from './DocumentViews';
-export default DocumentViews;

app/components/DropToImport.js

@@ -0,0 +1,123 @@
+// @flow
+import invariant from "invariant";
+import { observable } from "mobx";
+import { observer, inject } from "mobx-react";
+import * as React from "react";
+import Dropzone from "react-dropzone";
+import { withRouter, type RouterHistory, type Match } from "react-router-dom";
+import styled, { css } from "styled-components";
+import DocumentsStore from "stores/DocumentsStore";
+import UiStore from "stores/UiStore";
+import LoadingIndicator from "components/LoadingIndicator";
+
+const EMPTY_OBJECT = {};
+let importingLock = false;
+
+type Props = {
+  children: React.Node,
+  collectionId: string,
+  documentId?: string,
+  ui: UiStore,
+  documents: DocumentsStore,
+  disabled: boolean,
+  location: Object,
+  match: Match,
+  history: RouterHistory,
+  staticContext: Object,
+};
+
+@observer
+class DropToImport extends React.Component<Props> {
+  @observable isImporting: boolean = false;
+
+  onDropAccepted = async (files = []) => {
+    if (importingLock) return;
+
+    this.isImporting = true;
+    importingLock = true;
+
+    try {
+      let collectionId = this.props.collectionId;
+      const documentId = this.props.documentId;
+      const redirect = files.length === 1;
+
+      if (documentId && !collectionId) {
+        const document = await this.props.documents.fetch(documentId);
+        invariant(document, "Document not available");
+        collectionId = document.collectionId;
+      }
+
+      for (const file of files) {
+        const doc = await this.props.documents.import(
+          file,
+          documentId,
+          collectionId,
+          { publish: true }
+        );
+
+        if (redirect) {
+          this.props.history.push(doc.url);
+        }
+      }
+    } catch (err) {
+      this.props.ui.showToast(`Could not import file. ${err.message}`, {
+        type: "error",
+      });
+    } finally {
+      this.isImporting = false;
+      importingLock = false;
+    }
+  };
+
+  render() {
+    const { documents } = this.props;
+
+    if (this.props.disabled) return this.props.children;
+
+    return (
+      <Dropzone
+        accept={documents.importFileTypes.join(", ")}
+        onDropAccepted={this.onDropAccepted}
+        style={EMPTY_OBJECT}
+        noClick
+        multiple
+      >
+        {({
+          getRootProps,
+          getInputProps,
+          isDragActive,
+          isDragAccept,
+          isDragReject,
+        }) => (
+          <DropzoneContainer
+            {...getRootProps()}
+            {...{ isDragActive }}
+            tabIndex="-1"
+          >
+            <input {...getInputProps()} />
+            {this.isImporting && <LoadingIndicator />}
+            {this.props.children}
+          </DropzoneContainer>
+        )}
+      </Dropzone>
+    );
+  }
+}
+
+const DropzoneContainer = styled("div")`
+  border-radius: 4px;
+
+  ${({ isDragActive, theme }) =>
+    isDragActive &&
+    css`
+      background: ${theme.slateDark};
+      a {
+        color: ${theme.white} !important;
+      }
+      svg {
+        fill: ${theme.white};
+      }
+    `}
+`;
+
+export default inject("documents", "ui")(withRouter(DropToImport));

app/components/DropToImport/DropToImport.js

@@ -1,104 +0,0 @@
-// @flow
-import * as React from 'react';
-import { observable } from 'mobx';
-import { observer, inject } from 'mobx-react';
-import { injectGlobal } from 'styled-components';
-import { color } from 'shared/styles/constants';
-import importFile from 'utils/importFile';
-import invariant from 'invariant';
-import _ from 'lodash';
-import Dropzone from 'react-dropzone';
-import DocumentsStore from 'stores/DocumentsStore';
-import LoadingIndicator from 'components/LoadingIndicator';
-
-type Props = {
-  children?: React.Node,
-  collectionId: string,
-  documentId?: string,
-  activeClassName?: string,
-  rejectClassName?: string,
-  documents: DocumentsStore,
-  disabled: boolean,
-  history: Object,
-};
-
-// eslint-disable-next-line
-injectGlobal`
-  .activeDropZone {
-    background: ${color.slateDark};
-    svg { fill: ${color.white}; }
-  }
-
-  .activeDropZone a {
-    color: ${color.white} !important;
-  }
-`;
-
-@observer
-class DropToImport extends React.Component<Props> {
-  @observable isImporting: boolean = false;
-
-  onDropAccepted = async (files = []) => {
-    this.isImporting = true;
-
-    try {
-      let collectionId = this.props.collectionId;
-      const documentId = this.props.documentId;
-      const redirect = files.length === 1;
-
-      if (documentId && !collectionId) {
-        const document = await this.props.documents.fetch(documentId);
-        invariant(document, 'Document not available');
-        collectionId = document.collection.id;
-      }
-
-      for (const file of files) {
-        const doc = await importFile({
-          documents: this.props.documents,
-          file,
-          documentId,
-          collectionId,
-        });
-
-        if (redirect) {
-          this.props.history.push(doc.url);
-        }
-      }
-    } catch (err) {
-      // TODO: show error alert.
-    } finally {
-      this.isImporting = false;
-    }
-  };
-
-  render() {
-    const props = _.omit(
-      this.props,
-      'history',
-      'documentId',
-      'collectionId',
-      'documents',
-      'disabled',
-      'menuOpen'
-    );
-
-    if (this.props.disabled) return this.props.children;
-
-    return (
-      <Dropzone
-        accept="text/markdown, text/plain"
-        onDropAccepted={this.onDropAccepted}
-        style={{}}
-        disableClick
-        disablePreview
-        multiple
-        {...props}
-      >
-        {this.isImporting && <LoadingIndicator />}
-        {this.props.children}
-      </Dropzone>
-    );
-  }
-}
-
-export default inject('documents')(DropToImport);

app/components/DropToImport/index.js

@@ -1,3 +0,0 @@
-// @flow
-import DropToImport from './DropToImport';
-export default DropToImport;

app/components/DropdownMenu/DropdownMenu.js

@@ -1,106 +0,0 @@
-// @flow
-import * as React from 'react';
-import invariant from 'invariant';
-import { observable } from 'mobx';
-import { observer } from 'mobx-react';
-import styled from 'styled-components';
-import { PortalWithState } from 'react-portal';
-import Flex from 'shared/components/Flex';
-import { color } from 'shared/styles/constants';
-import { fadeAndScaleIn } from 'shared/styles/animations';
-
-type Props = {
-  label: React.Node,
-  onOpen?: () => void,
-  onClose?: () => void,
-  children?: React.Node,
-  className?: string,
-  style?: Object,
-};
-
-@observer
-class DropdownMenu extends React.Component<Props> {
-  @observable top: number;
-  @observable right: number;
-
-  handleOpen = (openPortal: (SyntheticEvent<*>) => *) => {
-    return (ev: SyntheticMouseEvent<*>) => {
-      ev.preventDefault();
-      const currentTarget = ev.currentTarget;
-      invariant(document.body, 'why you not here');
-
-      if (currentTarget instanceof HTMLDivElement) {
-        const bodyRect = document.body.getBoundingClientRect();
-        const targetRect = currentTarget.getBoundingClientRect();
-        this.top = targetRect.bottom - bodyRect.top;
-        this.right = bodyRect.width - targetRect.left - targetRect.width;
-        openPortal(ev);
-      }
-    };
-  };
-
-  render() {
-    const { className, label, children } = this.props;
-
-    return (
-      <div className={className}>
-        <PortalWithState
-          onOpen={this.props.onOpen}
-          onClose={this.props.onClose}
-          closeOnOutsideClick
-          closeOnEsc
-        >
-          {({ closePortal, openPortal, portal }) => (
-            <React.Fragment>
-              <Label onClick={this.handleOpen(openPortal)}>{label}</Label>
-              {portal(
-                <Menu
-                  onClick={ev => {
-                    ev.stopPropagation();
-                    closePortal();
-                  }}
-                  style={this.props.style}
-                  top={this.top}
-                  right={this.right}
-                >
-                  {children}
-                </Menu>
-              )}
-            </React.Fragment>
-          )}
-        </PortalWithState>
-      </div>
-    );
-  }
-}
-
-const Label = styled(Flex).attrs({
-  justify: 'center',
-  align: 'center',
-})`
-  z-index: 1000;
-  cursor: pointer;
-`;
-
-const Menu = styled.div`
-  animation: ${fadeAndScaleIn} 200ms ease;
-  transform-origin: 75% 0;
-
-  position: absolute;
-  right: ${({ right }) => right}px;
-  top: ${({ top }) => top}px;
-  z-index: 1000;
-  border: ${color.slateLight};
-  background: ${color.white};
-  border-radius: 2px;
-  min-width: 160px;
-  overflow: hidden;
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 8px rgba(0, 0, 0, 0.08),
-    0 2px 4px rgba(0, 0, 0, 0.08);
-
-  @media print {
-    display: none;
-  }
-`;
-
-export default DropdownMenu;

app/components/DropdownMenu/DropdownMenuItem.js

@@ -1,45 +0,0 @@
-// @flow
-import * as React from 'react';
-import styled from 'styled-components';
-import { color } from 'shared/styles/constants';
-
-type Props = {
-  onClick?: (SyntheticEvent<*>) => *,
-  children?: React.Node,
-};
-
-const DropdownMenuItem = ({ onClick, children, ...rest }: Props) => {
-  return (
-    <MenuItem onClick={onClick} {...rest}>
-      {children}
-    </MenuItem>
-  );
-};
-
-const MenuItem = styled.a`
-  display: flex;
-  margin: 0;
-  padding: 5px 10px;
-  height: 32px;
-
-  color: ${color.slateDark};
-  justify-content: left;
-  align-items: center;
-  cursor: pointer;
-  font-size: 15px;
-
-  svg {
-    margin-right: 8px;
-  }
-
-  &:hover {
-    color: ${color.white};
-    background: ${color.primary};
-
-    svg {
-      fill: ${color.white};
-    }
-  }
-`;
-
-export default DropdownMenuItem;

app/components/DropdownMenu/index.js

@@ -1,3 +0,0 @@
-// @flow
-export { default as DropdownMenu } from './DropdownMenu';
-export { default as DropdownMenuItem } from './DropdownMenuItem';

app/components/Editor.js

@@ -0,0 +1,242 @@
+// @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 UiStore from "stores/UiStore";
+import ErrorBoundary from "components/ErrorBoundary";
+import Tooltip from "components/Tooltip";
+import embeds from "../embeds";
+import { isModKey } from "utils/keyboard";
+import { uploadFile } from "utils/uploadFile";
+import { isInternalUrl } from "utils/urls";
+
+const RichMarkdownEditor = React.lazy(() => import("rich-markdown-editor"));
+
+const EMPTY_ARRAY = [];
+
+export type Props = {|
+  id?: string,
+  value?: string,
+  defaultValue?: string,
+  readOnly?: boolean,
+  grow?: boolean,
+  disableEmbeds?: boolean,
+  ui?: UiStore,
+  autoFocus?: boolean,
+  template?: boolean,
+  placeholder?: string,
+  scrollTo?: string,
+  readOnlyWriteCheckboxes?: boolean,
+  onBlur?: (event: SyntheticEvent<>) => any,
+  onFocus?: (event: SyntheticEvent<>) => any,
+  onPublish?: (event: SyntheticEvent<>) => any,
+  onSave?: ({ done?: boolean, autosave?: boolean, publish?: boolean }) => any,
+  onCancel?: () => 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, history } = props;
+  const { t } = useTranslation();
+
+  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;
+          }
+        }
+
+        history.push(navigateTo);
+      } else if (href) {
+        window.open(href, "_blank");
+      }
+    },
+    [history]
+  );
+
+  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"),
+      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"),
+      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}
+      />
+    </ErrorBoundary>
+  );
+}
+
+const StyledEditor = styled(RichMarkdownEditor)`
+  flex-grow: ${(props) => (props.grow ? 1 : 0)};
+  justify-content: start;
+
+  > div {
+    transition: ${(props) => props.theme.backgroundTransition};
+  }
+
+  & * {
+    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/Empty.js

@@ -0,0 +1,8 @@
+// @flow
+import styled from "styled-components";
+
+const Empty = styled.p`
+  color: ${(props) => props.theme.textTertiary};
+`;
+
+export default Empty;

app/components/Empty/Empty.js

@@ -1,21 +0,0 @@
-// @flow
-import * as React from 'react';
-import styled from 'styled-components';
-import { color } from 'shared/styles/constants';
-
-type Props = {
-  children: string,
-};
-
-const Empty = (props: Props) => {
-  const { children, ...rest } = props;
-  return <Container {...rest}>{children}</Container>;
-};
-
-const Container = styled.div`
-  display: flex;
-  color: ${color.slate};
-  text-align: center;
-`;
-
-export default Empty;

app/components/Empty/index.js

@@ -1,3 +0,0 @@
-// @flow
-import Empty from './Empty';
-export default Empty;

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.smoke};
+  padding: 16px;
+  border-radius: 4px;
+  font-size: 12px;
+  white-space: pre-wrap;
+`;
+
+export default ErrorBoundary;

app/components/ErrorBoundary/ErrorBoundary.js

@@ -1,52 +0,0 @@
-// @flow
-import * as React from 'react';
-import { observer } from 'mobx-react';
-import { observable } from 'mobx';
-import CenteredContent from 'components/CenteredContent';
-import PageTitle from 'components/PageTitle';
-
-type Props = {
-  children?: ?React.Node,
-};
-
-@observer
-class ErrorBoundary extends React.Component<Props> {
-  @observable error: boolean = false;
-
-  componentDidCatch(error: Error, info: Object) {
-    this.error = true;
-
-    // Error handler is often blocked by the browser
-    if (window.Bugsnag) {
-      Bugsnag.notifyException(error, { react: info });
-    }
-  }
-
-  handleReload = () => {
-    window.location.reload();
-  };
-
-  render() {
-    if (this.error) {
-      return (
-        <CenteredContent>
-          <PageTitle title="Something went wrong" />
-          <h1>
-            <span role="img" aria-label="Space ship">
-              🛸
-            </span>{' '}
-            Something unexpected happened
-          </h1>
-          <p>
-            An unrecoverable error occurred{window.Bugsnag ||
-              (true && ' and our engineers have been notified')}. Please try{' '}
-            <a onClick={this.handleReload}>reloading</a>.
-          </p>
-        </CenteredContent>
-      );
-    }
-    return this.props.children;
-  }
-}
-
-export default ErrorBoundary;

app/components/ErrorBoundary/index.js

@@ -1,3 +0,0 @@
-// @flow
-import ErrorBoundary from './ErrorBoundary';
-export default ErrorBoundary;

app/components/EventBoundary.js

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

app/components/Facepile.js

@@ -0,0 +1,76 @@
+// @flow
+import { observer, inject } from "mobx-react";
+import * as React from "react";
+import styled, { withTheme } from "styled-components";
+import User from "models/User";
+import Avatar from "components/Avatar";
+import Flex from "components/Flex";
+
+type Props = {
+  users: User[],
+  size?: number,
+  overflow: number,
+  renderAvatar: (user: User) => React.Node,
+};
+
+@observer
+class Facepile extends React.Component<Props> {
+  render() {
+    const {
+      users,
+      overflow,
+      size = 32,
+      renderAvatar = renderDefaultAvatar,
+      ...rest
+    } = this.props;
+
+    return (
+      <Avatars {...rest}>
+        {overflow > 0 && (
+          <More size={size}>
+            <span>+{overflow}</span>
+          </More>
+        )}
+        {users.map((user) => (
+          <AvatarWrapper key={user.id}>{renderAvatar(user)}</AvatarWrapper>
+        ))}
+      </Avatars>
+    );
+  }
+}
+
+function renderDefaultAvatar(user: User) {
+  return <Avatar user={user} src={user.avatarUrl} size={32} />;
+}
+
+const AvatarWrapper = styled.div`
+  margin-right: -8px;
+
+  &:first-child {
+    margin-right: 0;
+  }
+`;
+
+const More = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-width: ${(props) => props.size}px;
+  height: ${(props) => props.size}px;
+  border-radius: 100%;
+  background: ${(props) => props.theme.slate};
+  color: ${(props) => props.theme.text};
+  border: 2px solid ${(props) => props.theme.background};
+  text-align: center;
+  font-size: 11px;
+  font-weight: 600;
+`;
+
+const Avatars = styled(Flex)`
+  align-items: center;
+  flex-direction: row-reverse;
+  cursor: pointer;
+`;
+
+export default inject("views", "presence")(withTheme(Facepile));

app/components/Fade.js

@@ -0,0 +1,9 @@
+// @flow
+import styled from "styled-components";
+import { fadeIn } from "shared/styles/animations";
+
+const Fade = styled.span`
+  animation: ${fadeIn} ${(props) => props.timing || "250ms"} ease-in-out;
+`;
+
+export default Fade;

app/components/Fade/Fade.js

@@ -1,9 +0,0 @@
-// @flow
-import styled from 'styled-components';
-import { fadeIn } from 'shared/styles/animations';
-
-const Fade = styled.span`
-  animation: ${fadeIn} ${props => props.timing || '250ms'} ease-in-out;
-`;
-
-export default Fade;

app/components/Fade/index.js

@@ -1,3 +0,0 @@
-// @flow
-import Fade from './Fade';
-export default Fade;

app/components/Flex.js

@@ -1,23 +1,24 @@
 // @flow
-import * as React from 'react';
-import styled from 'styled-components';
+import * as React from "react";
+import styled from "styled-components";
 
 type JustifyValues =
-  | 'center'
-  | 'space-around'
-  | 'space-between'
-  | 'flex-start'
-  | 'flex-end';
+  | "center"
+  | "space-around"
+  | "space-between"
+  | "flex-start"
+  | "flex-end";
 
 type AlignValues =
-  | 'stretch'
-  | 'center'
-  | 'baseline'
-  | 'flex-start'
-  | 'flex-end';
+  | "stretch"
+  | "center"
+  | "baseline"
+  | "flex-start"
+  | "flex-end";
 
 type Props = {
   column?: ?boolean,
+  shrink?: ?boolean,
   align?: AlignValues,
   justify?: JustifyValues,
   auto?: ?boolean,
@@ -32,10 +33,13 @@ const Flex = (props: Props) => {
 
 const Container = styled.div`
   display: flex;
-  flex: ${({ auto }) => (auto ? '1 1 auto' : 'initial')};
-  flex-direction: ${({ column }) => (column ? 'column' : 'row')};
+  flex: ${({ auto }) => (auto ? "1 1 auto" : "initial")};
+  flex-direction: ${({ column }) => (column ? "column" : "row")};
   align-items: ${({ align }) => align};
   justify-content: ${({ justify }) => justify};
+  flex-shrink: ${({ shrink }) => (shrink ? 1 : "initial")};
+  min-height: 0;
+  min-width: 0;
 `;
 
 export default Flex;

app/components/FullscreenLoading.js

@@ -0,0 +1,24 @@
+// @flow
+import * as React from "react";
+import styled from "styled-components";
+import Empty from "components/Empty";
+import Fade from "components/Fade";
+import Flex from "components/Flex";
+
+export default function FullscreenLoading() {
+  return (
+    <Fade timing={500}>
+      <Centered>
+        <Empty>Loading…</Empty>
+      </Centered>
+    </Fade>
+  );
+}
+
+const Centered = styled(Flex)`
+  text-align: center;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+`;