More email styling

https://github.com/outline/outline/pull/2283\#discussion_r665301770

.babelrc

@@ -1,18 +1,29 @@
 {
-  "presets": ["react", "env"],
+  "presets": [
+    "@babel/preset-react",
+    "@babel/preset-flow",
+    [
+      "@babel/preset-env",
+      {
+        "corejs": {
+          "version": "3",
+          "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

@@ -1,40 +1,139 @@
-# Copy this file to .env, remove this comment and change the keys. For development
-# with docker this should mostly work out of the box other than setting the Slack
-# keys (for auth) and the SECRET_KEY.
-#
-# Please use `openssl rand -hex 32` to create SECRET_KEY
+# 👋 Welcome, we're glad you're setting up an installation of Outline. Copy this 
+# file to .env or set the variables in your local environment manually. For 
+# development with docker this should mostly work out  of the box other than 
+# setting the Slack keys and the SECRET_KEY.
 
-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
+
+
+
+# –––––––––––––––– REQUIRED ––––––––––––––––
+
+# Generate a hex-encoded 32-byte random key. You should use `openssl rand -hex 32`
+# in your terminal to generate a random value.
+SECRET_KEY=generate_a_new_key
+
+# Generate a unique random key. The format is not important but you could still use 
+# `openssl rand -hex 32` in your terminal to produce this.
+UTILS_SECRET=generate_a_new_key
+
+# For production point these at your databases, in development the default
+# should work out of the box.
+DATABASE_URL=postgres://user:pass@localhost:5532/outline
+DATABASE_URL_TEST=postgres://user:pass@localhost:5532/outline-test
+# Uncomment this to disable SSL for connecting to Postgres
+# PGSSLMODE=disable
+REDIS_URL=redis://localhost:6479
+
+# URL should point to the fully qualified, publicly accessible URL. If using a
+# proxy the port in URL and PORT may be different.
 URL=http://localhost:3000
-DEPLOYMENT=self
-ENABLE_UPDATES=true
-DEBUG=sql,cache,presenters,events
+PORT=3000
 
-# Third party credentials (required)
-SLACK_KEY=71315967491.XXXXXXXXXX
-SLACK_SECRET=d2dc414f9953226bad0a356cXXXXYYYY
+# To support uploading of images for avatars and document attachments an
+# s3-compatible storage must be provided. AWS S3 is recommended for redundency
+# however if you want to keep all file storage local an alternative such as 
+# minio (https://github.com/minio/minio) can be used.
 
-# Third party credentials (optional)
-SLACK_VERIFICATION_TOKEN=PLxk6OlXXXXXVj3YYYY
-SLACK_APP_ID=A0XXXXXXX
-GOOGLE_ANALYTICS_ID=
-BUGSNAG_KEY=
-
-# AWS credentials (optional in dev)
-AWS_ACCESS_KEY_ID=notcheckedindev
-AWS_SECRET_ACCESS_KEY=notcheckedindev
+# A more detailed guide on setting up S3 is available here:
+# => https://wiki.generaloutline.com/share/125de1cc-9ff6-424b-8415-0d58c809a40f
+#
+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
+AWS_S3_ACL=private
 
-# Emails configuration (optional)
+
+# –––––––––––––– AUTHENTICATION ––––––––––––––
+
+# Third party signin credentials, at least ONE OF EITHER Google, Slack,
+# or Microsoft is required for a working installation or you'll have no sign-in
+# options.
+
+# To configure Slack auth, you'll need to create an Application at
+# => https://api.slack.com/apps
+#
+# When configuring the Client ID, add a redirect URL under "OAuth & Permissions":
+# https://<URL>/auth/slack.callback
+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://<URL>/auth/google.callback
+GOOGLE_CLIENT_ID=
+GOOGLE_CLIENT_SECRET=
+
+# To configure Microsoft/Azure auth, you'll need to create an OAuth Client. See 
+# the guide for details on setting up your Azure App:
+# => https://wiki.generaloutline.com/share/dfa77e56-d4d2-4b51-8ff8-84ea6608faa4
+AZURE_CLIENT_ID= 
+AZURE_CLIENT_SECRET=
+AZURE_RESOURCE_APP_ID=
+
+
+
+# –––––––––––––––– OPTIONAL ––––––––––––––––
+
+# If using a Cloudfront/Cloudflare distribution or similar it can be set below.
+# This will cause paths to javascript, stylesheets, and images to be updated to  
+# the hostname defined in CDN_URL. In your CDN configuration the origin server 
+# should be set to the same as URL.
+CDN_URL=
+
+# Auto-redirect to https in production. The default is true but you may set to 
+# false if you can be sure that SSL is terminated at an external loadbalancer.
+FORCE_HTTPS=true
+
+# Have the installation check for updates by sending anonymized statistics to
+# the maintainers
+ENABLE_UPDATES=true
+
+# Override the maxium size of document imports, could be required if you have
+# especially large Word documents with embedded imagery
+MAXIMUM_IMPORT_SIZE=5120000
+
+# You may enable or disable debugging categories to increase the noisiness of
+# logs. The default is a good balance
+DEBUG=cache,presenters,events,emails,mailer,utils,http,server,services
+
+# Comma separated list of domains to be allowed to signin to the wiki. If not
+# set, all domains are allowed by default when using Google OAuth to signin
+ALLOWED_DOMAINS=
+
+# For a complete Slack integration with search and posting to channels the 
+# following configs are also needed, some more details
+# => https://wiki.generaloutline.com/share/be25efd1-b3ef-4450-b8e5-c4a4fc11e02a
+#
+SLACK_VERIFICATION_TOKEN=your_token
+SLACK_APP_ID=A0XXXXXXX
+SLACK_MESSAGE_ACTIONS=true
+
+# Optionally enable google analytics to track pageviews in the knowledge base 
+GOOGLE_ANALYTICS_ID=
+
+# Optionally enable Sentry (sentry.io) to track errors and performance
+SENTRY_DSN=
+
+# To support sending outgoing transactional emails such as "document updated" or 
+# "you've been invited" you'll need to provide authentication for an SMTP server
 SMTP_HOST=
 SMTP_PORT=
 SMTP_USERNAME=
 SMTP_PASSWORD=
 SMTP_FROM_EMAIL=
 SMTP_REPLY_EMAIL=
+SMTP_TLS_CIPHERS=
+SMTP_SECURE=true
+
+# Custom logo that displays on the authentication screen, scaled to height: 60px
+# TEAM_LOGO=https://example.com/images/logo.png
+
+# The default interface language. See translate.getoutline.com for a list of 
+# available language codes and their rough 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,38 +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/@tommoor/slate-edit-code/example/.*
-.*/node_modules/@tommoor/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
-unsafe.enable_getters_and_setters=true
+esproposal.optional_chaining=enable
 
 suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe
 suppress_comment=\\(.\\|\n\\)*\\$FlowIssue

.githooks/pre-commit/flow.sh

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

.github/FUNDING.yml

@@ -0,0 +1,3 @@
+# These are supported funding model platforms
+
+github: [outline]

.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

.github/stale.yml

@@ -1,12 +1,13 @@
 # Number of days of inactivity before an issue becomes stale
-daysUntilStale: 60
+daysUntilStale: 90
 
 # Number of days of inactivity before a stale issue is closed
-daysUntilClose: 7
+daysUntilClose: 14
 
 # Issues with these labels will never be considered stale
 exemptLabels:
   - security
+  - pinned
 
 # Label to use when marking an issue as stale
 staleLabel: stale

.gitignore

@@ -1,7 +1,10 @@
 dist
+build
 node_modules/*
 .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,
+}

ARCHITECTURE.md

@@ -0,0 +1,67 @@
+
+# Architecture
+
+Outline is composed of a backend and frontend codebase in this monorepo. As both are written in Javascript, they share some code where possible. We utilize the latest ES6 language features, including `async`/`await`, and [Flow](https://flow.org/) typing. Prettier formatting and ESLint are enforced by CI.
+
+## Frontend
+
+Outline's frontend is a React application compiled with [Webpack](https://webpack.js.org/). It uses [MobX](https://mobx.js.org/) for state management and [Styled Components](https://www.styled-components.com/) for component styles. Unless global, state logic and styles are always co-located with React components together with their subcomponents to make the component tree easier to manage.
+
+> Important Note: The Outline editor is built on [Prosemirror](https://github.com/prosemirror) and managed in a separate open source repository to encourage re-use: [rich-markdown-editor](https://github.com/outline/rich-markdown-editor).
+
+```
+app
+├── components  - React components reusable across scenes
+├── embeds      - Embed definitions that represent rich interactive embeds in the editor
+├── hooks       - Reusable React hooks
+├── menus       - Context menus, often appear in multiple places in the UI
+├── models      - State models using MobX observables
+├── routes      - Route definitions, note that chunks are async loaded with suspense
+├── scenes      - A scene represents a full-page view that contains several components
+├── stores      - Collections of models and associated fetch logic
+├── types       - Flow types
+└── utils       - Utility methods specific to the frontend
+```
+
+## Backend
+
+The API server is driven by [Koa](http://koajs.com/), it uses [Sequelize](http://docs.sequelizejs.com/) as the ORM and Redis with [Bull](https://github.com/OptimalBits/bull) for queues and async event management. Authorization logic
+is contained in [cancan](https://www.npmjs.com/package/cancan) policies under the "policies" directory.
+
+Interested in more documentation on the API routes? Check out the [API documentation](https://getoutline.com/developers).
+
+```
+server
+├── api               - All API routes are contained within here
+│   └── middlewares   - Koa middlewares specific to the API
+├── auth              - Authentication logic
+│   └── providers     - Authentication providers export passport.js strategies and config
+├── commands          - We are gradually moving to the command pattern for new write logic
+├── config            - Database configuration
+├── emails            - Transactional email templates
+│   └── components    - Shared React components for email templates
+├── middlewares       - Koa middlewares
+├── migrations        - Database migrations
+├── models            - Sequelize models
+├── onboarding        - Markdown templates for onboarding documents
+├── policies          - Authorization logic based on cancan
+├── presenters        - JSON presenters for database models, the interface between backend -> frontend
+├── services          - Service definitions are triggered for events and perform async jobs
+├── static            - Static assets
+├── test              - Test helpers and fixtures, tests themselves are colocated
+└── utils             - Utility methods specific to the backend
+```
+
+## Shared
+
+Where logic is shared between the client and server it is placed in this directory. This is generally
+small utilities.
+
+```
+shared
+├── i18n              - Internationalization confiuration
+│   └── locales       - Language specific translation files
+├── styles            - Styles, colors and other global aesthetics
+├── utils             - Shared utility methods
+└── constants         - Shared constants
+```

CHANGELOG.md

@@ -1,64 +0,0 @@
-## Jan 28th 2018
-
-- Fixed keyboard shortcuts on Windows
-- Fixed slack slash command and improved results formatting in Slack
-- Fixed headings now have stable anchors for external linking
-- Fixed several JS issues in the editor
-- Improved toolbar behavior for link editing
-
----
-
-## Jan 23rd 2018
-
-- Added 'about' page
-- Added dynamic prefetching of scripts for improved performance
-- Added more meta tags
-- Added new onboarding document
-
----
-
-## Jan 15th 2018
-
-- Fixed loading placeholders styling
-- Added members view to settings pages
-- Dynamic loading of editor JS for first load performance
-- Added event bus for future integrations
-- Improved handling of malformed links
-
----
-
-## Jan 6th, 2018
-
-- Improved the floating toolbar behavior in the editor
-- Added blockquote button to formatting toolbar
-- Fixed saving a new document no longer redirects to read-only mode
-- Fixed an exception when visiting a document without being signed in
-- Fixed a problem with invalid urls causing errors
-
----
-
-## Dec 18th, 2017
-
-- We now support automatic unfurling of Outline links posted to Slack
-- Added privacy policy for the hosted version at getoutline.com
-- Added ability to update profile picture in the settings
-
----
-
-## Dec 11th, 2017
-
-- Added ability to develop locally in Docker. This is now the preferred way to work on Outline.
-- Various improvements and fixes to search
-
----
-
-## Nov 28th, 2017
-
-- Added the changelog you’re looking at!
-- Fixed some issues with collection homepage
-
----
-
-## Nov 23rd, 2017
-
-- Initial open source release.

Dockerfile

@@ -1,10 +1,23 @@
-FROM node:latest
+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.55.0
+                      The Licensed Work is (c) 2020 General Outline, Inc.
+Additional Use Grant: You may make use of the Licensed Work, provided that
+                      you may not use the Licensed Work for a Document
+                      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:          2024-04-22
 
-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,28 @@
 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 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
 	docker-compose rm -f
 
-.PHONY: up build destroy # let's go to reserve rules names
+.PHONY: up build destroy test watch # let's go to reserve rules names

Procfile

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

README.md

@@ -1,45 +1,159 @@
+
+
 <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" height="500">
+  <img width="1640" alt="screenshot" src="https://user-images.githubusercontent.com/380914/110356468-26374600-7fef-11eb-9f6a-f2cc2c8c6590.png">
 </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).
 
 If you'd like to run your own copy of Outline or contribute to development then this is the place for you.
 
-## Installation
+# Installation
 
 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
 
-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.
+## Self-Hosted Production
+
+### Docker
+
+For a manual self-hosted production installation these are the recommended steps:
+
+1. First setup Redis and Postgres servers, this is outside the scope of the guide.
+1. Download the latest official Docker image, new releases are available around the middle of every month:
+
+   `docker pull outlinewiki/outline`
+1. Using the [.env.sample](.env.sample) as a reference, set the required variables in your production environment. You can export the environment variables directly, or create a `.env` file and pass it to the docker image like so:
+
+   `docker run --env-file=.env outlinewiki/outline`
+1. Setup the database with `yarn db:migrate`. Production assumes an SSL connection to the database by default, if
+Postgres is on the same machine and is not SSL you can migrate with `yarn db:migrate --env=production-ssl-disabled`, for example:
+
+   `docker run --rm outlinewiki/outline yarn db:migrate`
+1. Start the container:
+
+   `docker run outlinewiki/outline`
+1. Visit http://you_server_ip:3000 and you should be able to see Outline page
+
+   > Port number can be changed using the `PORT` environment variable
+
+1. (Optional) You can add an `nginx` or other reverse proxy to serve your instance of Outline for a clean URL without the port number, support SSL, etc.
+
+### Terraform
+
+Alternatively a community member maintains a script to deploy Outline on Google Cloud Platform with [Terraform & Ansible](https://github.com/rjsgn/outline-terraform-ansible).
+
+### Upgrading
+
+#### Docker
+
+If you're running Outline with Docker you'll need to run migrations within the docker container after updating the image. The command will be something like:
+
+```shell
+docker run --rm outlinewiki/outline:latest yarn db:migrate
+```
+
+#### Git
+
+If you're running Outline by cloning this repository, run the following command to upgrade:
+
+```shell
+yarn run upgrade
+```
+
+
+## Local Development
+
+For contributing features and fixes you can quickly get an environment running using Docker by following these steps:
+
+1. Install these dependencies if you don't already have them
+    1. [Docker for Desktop](https://www.docker.com)
+    1. [Node.js](https://nodejs.org/) (v12 LTS preferred)
+    1. [Yarn](https://yarnpkg.com)
+1. Clone this repo
 1. Register a Slack app at https://api.slack.com/apps
-1. Copy the file `.env.sample` to `.env` 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. Slack recently prevented the use of `http` protocol for localhost. For local development, you can use a tool like [ngrok](https://ngrok.com) or a package like `mkcert`. ([How to use HTTPS for local development](https://web.dev/how-to-use-local-https/))
+    1. Add `https://my_ngrok_address/auth/slack.callback` as an Oauth redirect URL
+    1. Ensure that the bot token scope contains at least `users:read`
+1. Run `make up`. This will download dependencies, build and launch a development version of Outline
 
-## Development
 
-### Server
+# Contributing
 
-To enable debugging statements, set the following env vars:
+Outline is built and maintained by a small team – we'd love your help to fix bugs and add features!
+
+Before submitting a pull request please let the core team know by creating or commenting in an issue on [GitHub](https://www.github.com/outline/outline/issues), and we'd also love to hear from you in the [Discussions](https://www.github.com/outline/outline/discussions). This way we can ensure that an approach is agreed on before code is written. This will result in a much higher liklihood of code being accepted.
+
+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
+
+
+## Architecture
+
+If you're interested in contributing or learning more about the Outline codebase
+please refer to the [architecture document](ARCHITECTURE.md) first for a high level overview of how the application is put together.
+
+
+## Debugging
+
+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,importer,exporter,emails,mailer
+```
+
+## 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.
+
+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
+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
+
+# To run frontend tests
+yarn test:app
 ```
 
 ## Migrations
@@ -47,7 +161,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
 ```
 
@@ -57,64 +171,6 @@ Or to run migrations on test database:
 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.
-
-### 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 is driven by [Slate](https://github.com/ianstormtaylor/slate) with several plugins.
-
-- `app/` - Frontend React application
-- `app/scenes` - Full page views
-- `app/components` - Reusable React components
-- `app/components/Editor` - Text editor and its plugins
-- `app/stores` - Global state stores
-- `app/models` - State models
-- `app/types` - Flow types for non-models
-
-### Backend
-
-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/emails`  - React rendered email templates
-- `server/models` - Database models (Sequelize)
-- `server/pages` - Server-side rendered public pages (React)
-- `server/presenters` - API responses for database models
-- `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.
-
-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
-
-# To run backend tests
-yarn test:server
-
-# To run frontend tests
-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!
-
-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!
-
-If you're looking for ways to get started, here's a list of ways to help us improve Outline:
-
-* Issues with [`good first task`](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](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,160 @@
+{
+  "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": {
+    "NODE_ENV": {
+      "value": "production",
+      "required": true
+    },
+    "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
+    },
+    "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
+    },
+    "SMTP_SECURE": {
+      "value": "true",
+      "description": "Use a secure SMTP connection (optional)",
+      "required": false
+    },
+    "SMTP_TLS_CIPHERS": {
+      "description": "Override SMTP cipher configuration (optional)",
+      "required": false
+    },
+    "GOOGLE_ANALYTICS_ID": {
+      "description": "UA-xxxx (optional)",
+      "required": false
+    },
+    "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/.jestconfig.json

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

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;
+  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,38 +0,0 @@
-// @flow
-import 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.Element<*>,
-  type?: 'info' | 'success' | 'warning' | 'danger' | 'offline',
-};
-
-@observer
-class Alert extends React.Component {
-  props: 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,47 @@
+// @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 null;
+    }
+
+    // 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;
+
+    // Track PWA install event
+    window.addEventListener("appinstalled", () => {
+      ga("send", "event", "pwa", "install");
+    });
+
+    if (document.body) {
+      document.body.appendChild(script);
+    }
+  }
+
+  render() {
+    return this.props.children || null;
+  }
+}

app/components/Arrow.js

@@ -0,0 +1,23 @@
+// @flow
+import * as React from "react";
+
+export default function Arrow() {
+  return (
+    <svg
+      width="13"
+      height="30"
+      viewBox="0 0 13 30"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill="currentColor"
+        d="M7.40242 1.48635C8.23085 0.0650039 10.0656 -0.421985 11.5005 0.39863C12.9354 1.21924 13.427 3.03671 12.5986 4.45806L5.59858 16.4681C4.77015 17.8894 2.93538 18.3764 1.5005 17.5558C0.065623 16.7352 -0.426002 14.9177 0.402425 13.4964L7.40242 1.48635Z"
+      />
+      <path
+        fill="currentColor"
+        d="M12.5986 25.5419C13.427 26.9633 12.9354 28.7808 11.5005 29.6014C10.0656 30.422 8.23087 29.935 7.40244 28.5136L0.402438 16.5036C-0.425989 15.0823 0.0656365 13.2648 1.50051 12.4442C2.93539 11.6236 4.77016 12.1106 5.59859 13.5319L12.5986 25.5419Z"
+      />
+    </svg>
+  );
+}

app/components/Auth.js

@@ -1,57 +0,0 @@
-// @flow
-import React from 'react';
-import { Provider } from 'mobx-react';
-import stores from 'stores';
-import SettingsStore from 'stores/SettingsStore';
-import DocumentsStore from 'stores/DocumentsStore';
-import CollectionsStore from 'stores/CollectionsStore';
-import CacheStore from 'stores/CacheStore';
-
-type Props = {
-  children?: React.Element<any>,
-};
-
-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 = {
-        settings: new SettingsStore(),
-        documents: new DocumentsStore({
-          ui: stores.ui,
-          cache,
-        }),
-        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/AuthLogo/GoogleLogo.js

@@ -0,0 +1,27 @@
+// @flow
+import * as React from "react";
+
+type Props = {
+  size?: number,
+  fill?: string,
+  className?: string,
+};
+
+function GoogleLogo({ size = 34, fill = "#FFF", className }: Props) {
+  return (
+    <svg
+      fill={fill}
+      width={size}
+      height={size}
+      viewBox="0 0 34 34"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g>
+        <path d="M32.6162791,13.9090909 L16.8837209,13.9090909 L16.8837209,20.4772727 L25.9395349,20.4772727 C25.0953488,24.65 21.5651163,27.0454545 16.8837209,27.0454545 C11.3581395,27.0454545 6.90697674,22.5636364 6.90697674,17 C6.90697674,11.4363636 11.3581395,6.95454545 16.8837209,6.95454545 C19.2627907,6.95454545 21.4116279,7.80454545 23.1,9.19545455 L28.0116279,4.25 C25.0186047,1.62272727 21.1813953,0 16.8837209,0 C7.52093023,0 0,7.57272727 0,17 C0,26.4272727 7.52093023,34 16.8837209,34 C25.3255814,34 33,27.8181818 33,17 C33,15.9954545 32.8465116,14.9136364 32.6162791,13.9090909 Z" />
+      </g>
+    </svg>
+  );
+}
+
+export default GoogleLogo;

app/components/AuthLogo/MicrosoftLogo.js

@@ -0,0 +1,44 @@
+// @flow
+import * as React from "react";
+
+type Props = {
+  size?: number,
+  fill?: string,
+  className?: string,
+};
+
+function MicrosoftLogo({ size = 34, fill = "#FFF", className }: Props) {
+  return (
+    <svg
+      fill={fill}
+      width={size}
+      height={size}
+      viewBox="0 0 34 34"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M18.0002 1H33.9998C33.9998 5.8172 34.0007 10.6344 33.9988 15.4516C28.6666 15.4508 23.3334 15.4516 18.0012 15.4516C17.9993 10.6344 18.0002 5.8172 18.0002 1Z"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M18.0009 17.5173C23.3333 17.5155 28.6667 17.5164 34 17.5164V33H18C18.0009 27.8388 17.9991 22.6776 18.0009 17.5173V17.5173Z"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0 1H16L15.9988 15.4516H0V1Z"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0 17.5161C5.3332 17.5179 10.6664 17.5155 15.9996 17.5179C16.0005 22.6789 15.9996 27.839 15.9996 33H0V17.5161Z"
+      />
+    </svg>
+  );
+}
+
+export default MicrosoftLogo;

app/components/AuthLogo/SlackLogo.js

@@ -0,0 +1,42 @@
+// @flow
+import * as React from "react";
+
+type Props = {
+  size?: number,
+  fill?: string,
+  className?: string,
+};
+
+function SlackLogo({ size = 34, fill = "#FFF", className }: Props) {
+  return (
+    <svg
+      fill={fill}
+      width={size}
+      height={size}
+      viewBox="0 0 34 34"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g stroke="none" strokeWidth="1" fillRule="evenodd">
+        <g transform="translate(0.000000, 17.822581)">
+          <path d="M7.23870968,3.61935484 C7.23870968,5.56612903 5.6483871,7.15645161 3.7016129,7.15645161 C1.75483871,7.15645161 0.164516129,5.56612903 0.164516129,3.61935484 C0.164516129,1.67258065 1.75483871,0.0822580645 3.7016129,0.0822580645 L7.23870968,0.0822580645 L7.23870968,3.61935484 Z" />
+          <path d="M9.02096774,3.61935484 C9.02096774,1.67258065 10.6112903,0.0822580645 12.5580645,0.0822580645 C14.5048387,0.0822580645 16.0951613,1.67258065 16.0951613,3.61935484 L16.0951613,12.4758065 C16.0951613,14.4225806 14.5048387,16.0129032 12.5580645,16.0129032 C10.6112903,16.0129032 9.02096774,14.4225806 9.02096774,12.4758065 C9.02096774,12.4758065 9.02096774,3.61935484 9.02096774,3.61935484 Z" />
+        </g>
+        <g>
+          <path d="M12.5580645,7.23870968 C10.6112903,7.23870968 9.02096774,5.6483871 9.02096774,3.7016129 C9.02096774,1.75483871 10.6112903,0.164516129 12.5580645,0.164516129 C14.5048387,0.164516129 16.0951613,1.75483871 16.0951613,3.7016129 L16.0951613,7.23870968 L12.5580645,7.23870968 Z" />
+          <path d="M12.5580645,9.02096774 C14.5048387,9.02096774 16.0951613,10.6112903 16.0951613,12.5580645 C16.0951613,14.5048387 14.5048387,16.0951613 12.5580645,16.0951613 L3.7016129,16.0951613 C1.75483871,16.0951613 0.164516129,14.5048387 0.164516129,12.5580645 C0.164516129,10.6112903 1.75483871,9.02096774 3.7016129,9.02096774 C3.7016129,9.02096774 12.5580645,9.02096774 12.5580645,9.02096774 Z" />
+        </g>
+        <g transform="translate(17.822581, 0.000000)">
+          <path d="M8.93870968,12.5580645 C8.93870968,10.6112903 10.5290323,9.02096774 12.4758065,9.02096774 C14.4225806,9.02096774 16.0129032,10.6112903 16.0129032,12.5580645 C16.0129032,14.5048387 14.4225806,16.0951613 12.4758065,16.0951613 L8.93870968,16.0951613 L8.93870968,12.5580645 Z" />
+          <path d="M7.15645161,12.5580645 C7.15645161,14.5048387 5.56612903,16.0951613 3.61935484,16.0951613 C1.67258065,16.0951613 0.0822580645,14.5048387 0.0822580645,12.5580645 L0.0822580645,3.7016129 C0.0822580645,1.75483871 1.67258065,0.164516129 3.61935484,0.164516129 C5.56612903,0.164516129 7.15645161,1.75483871 7.15645161,3.7016129 L7.15645161,12.5580645 Z" />
+        </g>
+        <g transform="translate(17.822581, 17.822581)">
+          <path d="M3.61935484,8.93870968 C5.56612903,8.93870968 7.15645161,10.5290323 7.15645161,12.4758065 C7.15645161,14.4225806 5.56612903,16.0129032 3.61935484,16.0129032 C1.67258065,16.0129032 0.0822580645,14.4225806 0.0822580645,12.4758065 L0.0822580645,8.93870968 L3.61935484,8.93870968 Z" />
+          <path d="M3.61935484,7.15645161 C1.67258065,7.15645161 0.0822580645,5.56612903 0.0822580645,3.61935484 C0.0822580645,1.67258065 1.67258065,0.0822580645 3.61935484,0.0822580645 L12.4758065,0.0822580645 C14.4225806,0.0822580645 16.0129032,1.67258065 16.0129032,3.61935484 C16.0129032,5.56612903 14.4225806,7.15645161 12.4758065,7.15645161 L3.61935484,7.15645161 Z" />
+        </g>
+      </g>
+    </svg>
+  );
+}
+
+export default SlackLogo;

app/components/AuthLogo/index.js

@@ -0,0 +1,46 @@
+// @flow
+import * as React from "react";
+import styled from "styled-components";
+import GoogleLogo from "./GoogleLogo";
+import MicrosoftLogo from "./MicrosoftLogo";
+import SlackLogo from "./SlackLogo";
+
+type Props = {|
+  providerName: string,
+  size?: number,
+|};
+
+function AuthLogo({ providerName, size = 16 }: Props) {
+  switch (providerName) {
+    case "slack":
+      return (
+        <Logo>
+          <SlackLogo size={size} />
+        </Logo>
+      );
+    case "google":
+      return (
+        <Logo>
+          <GoogleLogo size={size} />
+        </Logo>
+      );
+    case "azure":
+      return (
+        <Logo>
+          <MicrosoftLogo size={size} />
+        </Logo>
+      );
+    default:
+      return null;
+  }
+}
+
+const Logo = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+`;
+
+export default AuthLogo;

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

app/components/Avatar/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,20 @@
+// @flow
+import styled from "styled-components";
+
+const Badge = styled.span`
+  margin-left: 10px;
+  padding: 1px 5px 2px;
+  background-color: ${({ yellow, primary, theme }) =>
+    yellow ? theme.yellow : primary ? theme.primary : "transparent"};
+  color: ${({ primary, yellow, theme }) =>
+    primary ? theme.white : yellow ? theme.almostBlack : theme.textTertiary};
+  border: 1px solid
+    ${({ primary, yellow, theme }) =>
+      primary || yellow ? "transparent" : theme.textTertiary};
+  border-radius: 8px;
+  font-size: 12px;
+  font-weight: 500;
+  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,87 @@
+// @flow
+import { GoToIcon } from "outline-icons";
+import * as React from "react";
+import { Link } from "react-router-dom";
+import styled from "styled-components";
+import Flex from "components/Flex";
+import BreadcrumbMenu from "menus/BreadcrumbMenu";
+
+type MenuItem = {|
+  icon?: React.Node,
+  title: React.Node,
+  to?: string,
+|};
+
+type Props = {|
+  items: MenuItem[],
+  max?: number,
+  children?: React.Node,
+  highlightFirstItem?: boolean,
+|};
+
+function Breadcrumb({ items, highlightFirstItem, children, max = 2 }: Props) {
+  const totalItems = items.length;
+  let topLevelItems: MenuItem[] = [...items];
+  let overflowItems;
+
+  // chop middle breadcrumbs and present a "..." menu instead
+  if (totalItems > max) {
+    const halfMax = Math.floor(max / 2);
+    overflowItems = topLevelItems.splice(halfMax, totalItems - max);
+    topLevelItems.splice(halfMax, 0, {
+      title: <BreadcrumbMenu items={overflowItems} />,
+    });
+  }
+
+  return (
+    <Flex justify="flex-start" align="center">
+      {topLevelItems.map((item, index) => (
+        <React.Fragment key={item.to || index}>
+          {item.icon}
+          {item.to ? (
+            <Item
+              to={item.to}
+              $withIcon={!!item.icon}
+              $highlight={highlightFirstItem && index === 0}
+            >
+              {item.title}
+            </Item>
+          ) : (
+            item.title
+          )}
+          {index !== topLevelItems.length - 1 || !!children ? <Slash /> : null}
+        </React.Fragment>
+      ))}
+      {children}
+    </Flex>
+  );
+}
+
+const Slash = styled(GoToIcon)`
+  flex-shrink: 0;
+  fill: ${(props) => props.theme.divider};
+`;
+
+const Item = styled(Link)`
+  display: flex;
+  flex-shrink: 1;
+  min-width: 0;
+  color: ${(props) => props.theme.text};
+  font-size: 15px;
+  height: 24px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  font-weight: ${(props) => (props.$highlight ? "500" : "inherit")};
+  margin-left: ${(props) => (props.$withIcon ? "4px" : "0")};
+
+  svg {
+    flex-shrink: 0;
+  }
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export default Breadcrumb;

app/components/Bubble.js

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

app/components/Button.js

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

app/components/Button/Button.js

@@ -1,114 +0,0 @@
-// @flow
-import React from 'react';
-import styled from 'styled-components';
-import { color } from 'shared/styles/constants';
-import { darken, lighten } 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.text};
-    background: ${lighten(0.08, color.slateLight)};
-
-    &:hover {
-      background: ${color.slateLight};
-    }
-  `} ${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$Element<any>,
-  className?: string,
-  children?: React$Element<any>,
-};
-
-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

@@ -0,0 +1,38 @@
+// @flow
+import * as React from "react";
+import styled from "styled-components";
+import breakpoint from "styled-components-breakpoint";
+
+type Props = {|
+  children?: React.Node,
+  withStickyHeader?: boolean,
+|};
+
+const Container = styled.div`
+  width: 100%;
+  max-width: 100vw;
+  padding: ${(props) => (props.withStickyHeader ? "4px 12px" : "60px 12px")};
+
+  ${breakpoint("tablet")`
+    padding: ${(props) => (props.withStickyHeader ? "4px 60px" : "60px")};
+  `};
+`;
+
+const Content = styled.div`
+  max-width: 46em;
+  margin: 0 auto;
+
+  ${breakpoint("desktopLarge")`
+    max-width: 52em;
+  `};
+`;
+
+const CenteredContent = ({ children, ...rest }: Props) => {
+  return (
+    <Container {...rest}>
+      <Content>{children}</Content>
+    </Container>
+  );
+};
+
+export default CenteredContent;

app/components/CenteredContent/CenteredContent.js

@@ -1,32 +0,0 @@
-// @flow
-import React from 'react';
-import styled from 'styled-components';
-import breakpoint from 'styled-components-breakpoint';
-
-type Props = {
-  children?: React.Element<any>,
-};
-
-const Container = styled.div`
-  width: 100%;
-  padding: 60px 20px;
-
-  ${breakpoint('tablet')`
-    padding: 60px;
-  `};
-`;
-
-const Content = styled.div`
-  max-width: 46em;
-  margin: 0 auto;
-`;
-
-const CenteredContent = ({ children, ...rest }: Props) => {
-  return (
-    <Container {...rest}>
-      <Content>{children}</Content>
-    </Container>
-  );
-};
-
-export default CenteredContent;

app/components/CenteredContent/index.js

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

app/components/Checkbox.js

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

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

app/components/Collaborators/Collaborators.js

@@ -1,61 +0,0 @@
-// @flow
-import React from 'react';
-import moment from 'moment';
-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 ${moment(createdAt).fromNow()}`;
-  } else {
-    tooltip = `${updatedBy.name} modified ${moment(updatedAt).fromNow()}`;
-  }
-
-  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/CollectionDescription.js

@@ -0,0 +1,211 @@
+// @flow
+import { observer } from "mobx-react";
+import { transparentize } from "polished";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import styled from "styled-components";
+import Collection from "models/Collection";
+import Arrow from "components/Arrow";
+import ButtonLink from "components/ButtonLink";
+import Editor from "components/Editor";
+import LoadingIndicator from "components/LoadingIndicator";
+import NudeButton from "components/NudeButton";
+import useDebouncedCallback from "hooks/useDebouncedCallback";
+import useStores from "hooks/useStores";
+
+type Props = {|
+  collection: Collection,
+|};
+
+function CollectionDescription({ collection }: Props) {
+  const { collections, ui, policies } = useStores();
+  const { t } = useTranslation();
+  const [isExpanded, setExpanded] = React.useState(false);
+  const [isEditing, setEditing] = React.useState(false);
+  const [isDirty, setDirty] = React.useState(false);
+  const can = policies.abilities(collection.id);
+
+  const handleStartEditing = React.useCallback(() => {
+    setEditing(true);
+  }, []);
+
+  const handleStopEditing = React.useCallback(() => {
+    setEditing(false);
+  }, []);
+
+  const handleClickDisclosure = React.useCallback(
+    (event) => {
+      event.preventDefault();
+
+      if (isExpanded && document.activeElement) {
+        document.activeElement.blur();
+      }
+
+      setExpanded(!isExpanded);
+    },
+    [isExpanded]
+  );
+
+  const handleSave = useDebouncedCallback(async (getValue) => {
+    try {
+      await collection.save({
+        description: getValue(),
+      });
+      setDirty(false);
+    } catch (err) {
+      ui.showToast(
+        t("Sorry, an error occurred saving the collection", {
+          type: "error",
+        })
+      );
+      throw err;
+    }
+  }, 1000);
+
+  const handleChange = React.useCallback(
+    (getValue) => {
+      setDirty(true);
+      handleSave(getValue);
+    },
+    [handleSave]
+  );
+
+  React.useEffect(() => {
+    setEditing(false);
+  }, [collection.id]);
+
+  const placeholder = `${t("Add a description")}…`;
+  const key = isEditing || isDirty ? "draft" : collection.updatedAt;
+
+  return (
+    <MaxHeight data-editing={isEditing} data-expanded={isExpanded}>
+      <Input
+        $isEditable={can.update}
+        data-editing={isEditing}
+        data-expanded={isExpanded}
+      >
+        <span onClick={can.update ? handleStartEditing : undefined}>
+          {collections.isSaving && <LoadingIndicator />}
+          {collection.hasDescription || isEditing || isDirty ? (
+            <React.Suspense fallback={<Placeholder>Loading…</Placeholder>}>
+              <Editor
+                key={key}
+                defaultValue={collection.description || ""}
+                onChange={handleChange}
+                placeholder={placeholder}
+                readOnly={!isEditing}
+                autoFocus={isEditing}
+                onBlur={handleStopEditing}
+                maxLength={1000}
+                disableEmbeds
+                readOnlyWriteCheckboxes
+                grow
+              />
+            </React.Suspense>
+          ) : (
+            can.update && <Placeholder>{placeholder}</Placeholder>
+          )}
+        </span>
+      </Input>
+      {!isEditing && (
+        <Disclosure
+          onClick={handleClickDisclosure}
+          aria-label={isExpanded ? t("Collapse") : t("Expand")}
+          size={30}
+        >
+          <Arrow />
+        </Disclosure>
+      )}
+    </MaxHeight>
+  );
+}
+
+const Disclosure = styled(NudeButton)`
+  opacity: 0;
+  color: ${(props) => props.theme.divider};
+  position: absolute;
+  top: calc(25vh - 50px);
+  left: 50%;
+  z-index: 1;
+  transform: rotate(-90deg) translateX(-50%);
+  transition: opacity 100ms ease-in-out;
+
+  &:focus,
+  &:hover {
+    opacity: 1;
+  }
+
+  &:active {
+    color: ${(props) => props.theme.sidebarText};
+  }
+`;
+
+const Placeholder = styled(ButtonLink)`
+  color: ${(props) => props.theme.placeholder};
+  cursor: text;
+  min-height: 27px;
+`;
+
+const MaxHeight = styled.div`
+  position: relative;
+  max-height: 25vh;
+  overflow: hidden;
+  margin: -12px -8px -8px;
+  padding: 8px;
+
+  &[data-editing="true"],
+  &[data-expanded="true"] {
+    max-height: initial;
+    overflow: initial;
+
+    ${Disclosure} {
+      top: initial;
+      bottom: 0;
+      transform: rotate(90deg) translateX(-50%);
+    }
+  }
+
+  &:hover ${Disclosure} {
+    opacity: 1;
+  }
+`;
+
+const Input = styled.div`
+  margin: -8px;
+  padding: 8px;
+  border-radius: 8px;
+  transition: ${(props) => props.theme.backgroundTransition};
+
+  &:after {
+    content: "";
+    position: absolute;
+    top: calc(25vh - 50px);
+    left: 0;
+    right: 0;
+    height: 50px;
+    pointer-events: none;
+    background: linear-gradient(
+      180deg,
+      ${(props) => transparentize(1, props.theme.background)} 0%,
+      ${(props) => props.theme.background} 100%
+    );
+  }
+
+  &[data-editing="true"],
+  &[data-expanded="true"] {
+    &:after {
+      background: transparent;
+    }
+  }
+
+  &[data-editing="true"] {
+    background: ${(props) => props.theme.secondaryBackground};
+  }
+
+  .block-menu-trigger,
+  .heading-anchor {
+    display: none !important;
+  }
+`;
+
+export default observer(CollectionDescription);

app/components/CollectionIcon.js

@@ -0,0 +1,40 @@
+// @flow
+import { observer } from "mobx-react";
+import { CollectionIcon } from "outline-icons";
+import { getLuminance } from "polished";
+import * as React from "react";
+import Collection from "models/Collection";
+import { icons } from "components/IconPicker";
+import useStores from "hooks/useStores";
+
+type Props = {
+  collection: Collection,
+  expanded?: boolean,
+  size?: number,
+};
+
+function ResolvedCollectionIcon({ collection, expanded, size }: Props) {
+  const { ui } = useStores();
+
+  // If the chosen icon color is very dark then we invert it in dark mode
+  // otherwise it will be impossible to see against the dark background.
+  const color =
+    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);
+    }
+  }
+
+  return <CollectionIcon color={color} expanded={expanded} size={size} />;
+}
+
+export default observer(ResolvedCollectionIcon);

app/components/ColorPicker/ColorPicker.js

@@ -1,192 +0,0 @@
-// @flow
-import 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: 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,136 @@
+// @flow
+import { CheckmarkIcon } from "outline-icons";
+import * as React from "react";
+import { MenuItem as BaseMenuItem } from "reakit/Menu";
+import styled from "styled-components";
+import breakpoint from "styled-components-breakpoint";
+
+type Props = {|
+  onClick?: (SyntheticEvent<>) => void | Promise<void>,
+  children?: React.Node,
+  selected?: boolean,
+  disabled?: boolean,
+  to?: string,
+  href?: string,
+  target?: "_blank",
+  as?: string | React.ComponentType<*>,
+  hide?: () => void,
+|};
+
+const MenuItem = ({
+  onClick,
+  children,
+  selected,
+  disabled,
+  as,
+  hide,
+  ...rest
+}: Props) => {
+  const handleClick = React.useCallback(
+    (ev) => {
+      if (onClick) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        onClick(ev);
+      }
+
+      if (hide) {
+        hide();
+      }
+    },
+    [onClick, hide]
+  );
+
+  // Preventing default mousedown otherwise menu items do not work in Firefox,
+  // which triggers the hideOnClickOutside handler first via mousedown – hiding
+  // and un-rendering the menu contents.
+  const handleMouseDown = React.useCallback((ev) => {
+    ev.preventDefault();
+    ev.stopPropagation();
+  }, []);
+
+  return (
+    <BaseMenuItem
+      onClick={disabled ? undefined : onClick}
+      disabled={disabled}
+      hide={hide}
+      {...rest}
+    >
+      {(props) => (
+        <MenuAnchor
+          {...props}
+          $toggleable={selected !== undefined}
+          as={onClick ? "button" : as}
+          onClick={handleClick}
+          onMouseDown={handleMouseDown}
+        >
+          {selected !== undefined && (
+            <>
+              {selected ? <CheckmarkIcon color="currentColor" /> : <Spacer />}
+              &nbsp;
+            </>
+          )}
+          {children}
+        </MenuAnchor>
+      )}
+    </BaseMenuItem>
+  );
+};
+
+const Spacer = styled.svg`
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+`;
+
+export const MenuAnchor = styled.a`
+  display: flex;
+  margin: 0;
+  border: 0;
+  padding: 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: 16px;
+  cursor: default;
+  user-select: none;
+
+  svg:not(:last-child) {
+    margin-right: 4px;
+  }
+
+  svg {
+    flex-shrink: 0;
+    opacity: ${(props) => (props.disabled ? ".5" : 1)};
+  }
+
+  ${(props) =>
+    props.disabled
+      ? "pointer-events: none;"
+      : `
+
+  &:hover,  
+  &:focus,
+  &.focus-visible {
+    color: ${props.theme.white};
+    background: ${props.theme.primary};
+    box-shadow: none;
+    cursor: pointer;
+
+    svg {
+      fill: ${props.theme.white};
+    }
+  }
+  `};
+
+  ${breakpoint("tablet")`
+    padding: ${(props) => (props.$toggleable ? "4px 12px" : "6px 12px")};
+    font-size: 15px;
+  `};
+`;
+
+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,174 @@
+// @flow
+import { ExpandedIcon } from "outline-icons";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import {
+  useMenuState,
+  MenuButton,
+  MenuItem as BaseMenuItem,
+} from "reakit/Menu";
+import styled from "styled-components";
+import MenuItem, { MenuAnchor } from "./MenuItem";
+import Separator from "./Separator";
+import ContextMenu from ".";
+
+type TMenuItem =
+  | {|
+      title: React.Node,
+      to: string,
+      visible?: boolean,
+      selected?: boolean,
+      disabled?: boolean,
+    |}
+  | {|
+      title: React.Node,
+      onClick: (event: SyntheticEvent<>) => void | Promise<void>,
+      visible?: boolean,
+      selected?: boolean,
+      disabled?: boolean,
+    |}
+  | {|
+      title: React.Node,
+      href: string,
+      visible?: boolean,
+      selected?: boolean,
+      disabled?: boolean,
+    |}
+  | {|
+      title: React.Node,
+      visible?: boolean,
+      disabled?: boolean,
+      style?: Object,
+      hover?: boolean,
+      items: TMenuItem[],
+    |}
+  | {|
+      type: "separator",
+      visible?: boolean,
+    |}
+  | {|
+      type: "heading",
+      visible?: boolean,
+      title: React.Node,
+    |};
+
+type Props = {|
+  items: TMenuItem[],
+|};
+
+const Disclosure = styled(ExpandedIcon)`
+  transform: rotate(270deg);
+  position: absolute;
+  right: 8px;
+`;
+
+const Submenu = React.forwardRef(({ templateItems, title, ...rest }, ref) => {
+  const { t } = useTranslation();
+  const menu = useMenuState({ modal: true });
+
+  return (
+    <>
+      <MenuButton ref={ref} {...menu} {...rest}>
+        {(props) => (
+          <MenuAnchor {...props}>
+            {title} <Disclosure color="currentColor" />
+          </MenuAnchor>
+        )}
+      </MenuButton>
+      <ContextMenu {...menu} aria-label={t("Submenu")}>
+        <Template {...menu} items={templateItems} />
+      </ContextMenu>
+    </>
+  );
+});
+
+export function filterTemplateItems(items: TMenuItem[]): TMenuItem[] {
+  let filtered = items.filter((item) => item.visible !== false);
+
+  // this block literally just trims unneccessary separators
+  filtered = filtered.reduce((acc, item, index) => {
+    // trim separators from start / end
+    if (item.type === "separator" && index === 0) return acc;
+    if (item.type === "separator" && index === filtered.length - 1) return acc;
+
+    // trim double separators looking ahead / behind
+    const prev = filtered[index - 1];
+    if (prev && prev.type === "separator" && item.type === "separator")
+      return acc;
+
+    // otherwise, continue
+    return [...acc, item];
+  }, []);
+
+  return filtered;
+}
+
+function Template({ items, ...menu }: Props): React.Node {
+  return filterTemplateItems(items).map((item, index) => {
+    if (item.to) {
+      return (
+        <MenuItem
+          as={Link}
+          to={item.to}
+          key={index}
+          disabled={item.disabled}
+          selected={item.selected}
+          {...menu}
+        >
+          {item.title}
+        </MenuItem>
+      );
+    }
+
+    if (item.href) {
+      return (
+        <MenuItem
+          href={item.href}
+          key={index}
+          disabled={item.disabled}
+          selected={item.selected}
+          target="_blank"
+          {...menu}
+        >
+          {item.title}
+        </MenuItem>
+      );
+    }
+
+    if (item.onClick) {
+      return (
+        <MenuItem
+          as="button"
+          onClick={item.onClick}
+          disabled={item.disabled}
+          selected={item.selected}
+          key={index}
+          {...menu}
+        >
+          {item.title}
+        </MenuItem>
+      );
+    }
+
+    if (item.items) {
+      return (
+        <BaseMenuItem
+          key={index}
+          as={Submenu}
+          templateItems={item.items}
+          title={item.title}
+          {...menu}
+        />
+      );
+    }
+
+    if (item.type === "separator") {
+      return <Separator key={index} />;
+    }
+
+    return null;
+  });
+}
+
+export default React.memo<Props>(Template);

app/components/ContextMenu/index.js

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

app/components/CopyToClipboard.js

@@ -1,27 +1,26 @@
 // @flow
-import React, { PureComponent } 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.Element<any>,
+  children?: React.Node,
   onClick?: () => void,
   onCopy: () => void,
 };
 
-class CopyToClipboard extends PureComponent {
-  props: Props;
-
-  onClick = (ev: SyntheticEvent) => {
+class CopyToClipboard extends React.PureComponent<Props> {
+  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",
+      format: "text/plain",
     });
 
     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.js

@@ -0,0 +1,11 @@
+// @flow
+import styled from "styled-components";
+
+const Divider = styled.hr`
+  border: 0;
+  border-bottom: 1px solid ${(props) => props.theme.divider};
+  margin: 0;
+  padding: 0;
+`;
+
+export default Divider;

app/components/Divider/Divider.js

@@ -1,21 +0,0 @@
-// @flow
-import 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/DocumentBreadcrumb.js

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

app/components/DocumentHistory/DocumentHistory.js

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

app/components/DocumentHistory/components/Revision.js

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

app/components/DocumentHistory/index.js

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

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,34 +0,0 @@
-// @flow
-import React from 'react';
-import Document from 'models/Document';
-import DocumentPreview from 'components/DocumentPreview';
-import ArrowKeyNavigation from 'boundless-arrow-key-navigation';
-
-class DocumentList extends React.Component {
-  props: {
-    documents: Document[],
-    showCollection?: boolean,
-  };
-
-  render() {
-    const { documents, showCollection } = this.props;
-
-    return (
-      <ArrowKeyNavigation
-        mode={ArrowKeyNavigation.mode.VERTICAL}
-        defaultActiveChildIndex={0}
-      >
-        {documents &&
-          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,261 @@
+// @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 useCurrentTeam from "hooks/useCurrentTeam";
+import useCurrentUser from "hooks/useCurrentUser";
+import useStores from "hooks/useStores";
+import DocumentMenu from "menus/DocumentMenu";
+import { newDocumentUrl } from "utils/routeHelpers";
+
+type Props = {|
+  document: Document,
+  highlight?: ?string,
+  context?: ?string,
+  showNestedDocuments?: boolean,
+  showCollection?: boolean,
+  showPublished?: boolean,
+  showPin?: boolean,
+  showDraft?: boolean,
+  showTemplate?: boolean,
+|};
+
+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, ref) {
+  const { t } = useTranslation();
+  const { policies } = useStores();
+  const currentUser = useCurrentUser();
+  const currentTeam = useCurrentTeam();
+  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;
+  const can = policies.abilities(currentTeam.id);
+
+  return (
+    <DocumentLink
+      ref={ref}
+      dir={document.dir}
+      $isStarred={document.isStarred}
+      $menuOpen={menuOpen}
+      to={{
+        pathname: document.url,
+        state: { title: document.titleWithDefault },
+      }}
+    >
+      <Content>
+        <Heading dir={document.dir}>
+          <Title
+            text={document.titleWithDefault}
+            highlight={highlight}
+            dir={document.dir}
+          />
+          {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 &&
+          can.createDocument && (
+            <>
+              <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;
+  width: calc(100vw - 8px);
+
+  ${breakpoint("tablet")`
+    width: auto;
+  `};
+
+  ${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;
+  justify-content: ${(props) => (props.rtl ? "flex-end" : "flex-start")};
+  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(React.forwardRef(DocumentListItem));

app/components/DocumentMeta.js

@@ -0,0 +1,162 @@
+// @flow
+import { observer } from "mobx-react";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import styled from "styled-components";
+import Document from "models/Document";
+import DocumentBreadcrumb from "components/DocumentBreadcrumb";
+import Flex from "components/Flex";
+import Time from "components/Time";
+import useStores from "hooks/useStores";
+
+const Container = styled(Flex)`
+  justify-content: ${(props) => (props.rtl ? "flex-end" : "flex-start")};
+  color: ${(props) => props.theme.textTertiary};
+  font-size: 13px;
+  white-space: nowrap;
+  overflow: hidden;
+  min-width: 0;
+`;
+
+const Viewed = styled.span`
+  text-overflow: ellipsis;
+  overflow: hidden;
+`;
+
+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 (
+        <Viewed>
+          •&nbsp;<Modified highlight>{t("Never viewed")}</Modified>
+        </Viewed>
+      );
+    }
+
+    return (
+      <Viewed>
+        •&nbsp;{t("Viewed")} <Time dateTime={lastViewedAt} addSuffix shorten />
+      </Viewed>
+    );
+  };
+
+  const nestedDocumentsCount = collection
+    ? collection.getDocumentChildren(document.id).length
+    : 0;
+
+  return (
+    <Container align="center" rtl={document.dir === "rtl"} {...rest} dir="ltr">
+      {updatedByMe ? t("You") : updatedBy.name}&nbsp;
+      {to ? <Link to={to}>{content}</Link> : content}
+      {showCollection && collection && (
+        <span>
+          &nbsp;{t("in")}&nbsp;
+          <strong>
+            <DocumentBreadcrumb 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,85 @@
+// @flow
+import { useObserver } from "mobx-react";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { usePopoverState, PopoverDisclosure } from "reakit/Popover";
+import styled from "styled-components";
+import Document from "models/Document";
+import DocumentMeta from "components/DocumentMeta";
+import DocumentViews from "components/DocumentViews";
+import Popover from "components/Popover";
+import useStores from "../hooks/useStores";
+
+type Props = {|
+  document: Document,
+  isDraft: boolean,
+  to?: string,
+  rtl?: boolean,
+|};
+
+function DocumentMetaWithViews({ to, isDraft, document, ...rest }: Props) {
+  const { views } = useStores();
+  const { t } = useTranslation();
+  const documentViews = useObserver(() => views.inDocument(document.id));
+  const totalViewers = documentViews.length;
+  const onlyYou = totalViewers === 1 && documentViews[0].user.id;
+
+  React.useEffect(() => {
+    if (!document.isDeleted) {
+      views.fetchPage({ documentId: document.id });
+    }
+  }, [views, document.id, document.isDeleted]);
+
+  const popover = usePopoverState({
+    gutter: 8,
+    placement: "bottom",
+    modal: true,
+  });
+
+  return (
+    <Meta document={document} to={to} {...rest}>
+      {totalViewers && !isDraft ? (
+        <PopoverDisclosure {...popover}>
+          {(props) => (
+            <>
+              &nbsp;&middot;&nbsp;
+              <a {...props}>
+                {t("Viewed by")}{" "}
+                {onlyYou
+                  ? t("only you")
+                  : `${totalViewers} ${
+                      totalViewers === 1 ? t("person") : t("people")
+                    }`}
+              </a>
+            </>
+          )}
+        </PopoverDisclosure>
+      ) : null}
+      <Popover {...popover} width={300} aria-label={t("Viewers")} tabIndex={0}>
+        <DocumentViews document={document} isOpen={popover.visible} />
+      </Popover>
+    </Meta>
+  );
+}
+
+const Meta = styled(DocumentMeta)`
+  justify-content: ${(props) => (props.rtl ? "flex-end" : "flex-start")};
+  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,120 +0,0 @@
-// @flow
-import React, { Component } 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 Highlight from 'components/Highlight';
-import StarredIcon from 'components/Icon/StarredIcon';
-import PublishingInfo from './components/PublishingInfo';
-
-type Props = {
-  document: Document,
-  highlight?: ?string,
-  showCollection?: boolean,
-  innerRef?: Function,
-};
-
-const StyledStar = styled(({ solid, ...props }) => (
-  <StarredIcon color={solid ? color.black : color.text} {...props} />
-))`
-  position: absolute;
-  opacity: ${props => (props.solid ? '1 !important' : 0)};
-  transition: all 100ms ease-in-out;
-  margin-left: 2px;
-
-  &:hover {
-    transform: scale(1.1);
-  }
-  &:active {
-    transform: scale(0.95);
-  }
-`;
-
-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;
-
-  &:hover,
-  &:active,
-  &:focus {
-    background: ${color.smokeLight};
-    border: 2px solid ${color.smoke};
-    outline: none;
-
-    ${StyledStar} {
-      opacity: 0.5;
-
-      &:hover {
-        opacity: 1;
-      }
-    }
-  }
-
-  &:focus {
-    border: 2px solid ${color.slateDark};
-  }
-
-  h3 {
-    margin-top: 0;
-    margin-bottom: 0.25em;
-  }
-`;
-
-@observer
-class DocumentPreview extends Component {
-  props: 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={document.url} innerRef={innerRef} {...rest}>
-        <h3>
-          <Highlight text={document.title} highlight={highlight} />
-          {document.publishedAt &&
-            (document.starred ? (
-              <span onClick={this.unstar}>
-                <StyledStar solid />
-              </span>
-            ) : (
-              <span onClick={this.star}>
-                <StyledStar />
-              </span>
-            ))}
-        </h3>
-        <PublishingInfo
-          document={document}
-          collection={showCollection ? document.collection : undefined}
-        />
-      </DocumentLink>
-    );
-  }
-}
-
-export default DocumentPreview;

app/components/DocumentPreview/components/PublishingInfo.js

@@ -1,68 +0,0 @@
-// @flow
-import React, { Component } from 'react';
-import moment from 'moment';
-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')};
-`;
-
-class PublishingInfo extends Component {
-  props: {
-    collection?: Collection,
-    document: Document,
-    views?: number,
-  };
-
-  render() {
-    const { collection, document } = this.props;
-    const {
-      modifiedSinceViewed,
-      createdAt,
-      updatedAt,
-      createdBy,
-      updatedBy,
-      publishedAt,
-    } = document;
-
-    const timeAgo = moment(createdAt).fromNow();
-
-    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.js

@@ -0,0 +1,80 @@
+// @flow
+import { formatDistanceToNow } from "date-fns";
+import { sortBy } from "lodash";
+import { observer } from "mobx-react";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import Document from "models/Document";
+import Avatar from "components/Avatar";
+import ListItem from "components/List/Item";
+import PaginatedList from "components/PaginatedList";
+import useStores from "hooks/useStores";
+
+type Props = {|
+  document: Document,
+  isOpen?: boolean,
+|};
+
+function DocumentViews({ document, isOpen }: Props) {
+  const { t } = useTranslation();
+  const { views, presence } = useStores();
+
+  let documentPresence = presence.get(document.id);
+  documentPresence = documentPresence
+    ? Array.from(documentPresence.values())
+    : [];
+
+  const presentIds = documentPresence.map((p) => p.userId);
+  const editingIds = documentPresence
+    .filter((p) => p.isEditing)
+    .map((p) => p.userId);
+
+  // ensure currently present via websocket are always ordered first
+  const documentViews = views.inDocument(document.id);
+  const sortedViews = sortBy(
+    documentViews,
+    (view) => !presentIds.includes(view.user.id)
+  );
+
+  const users = React.useMemo(() => sortedViews.map((v) => v.user), [
+    sortedViews,
+  ]);
+
+  return (
+    <>
+      {isOpen && (
+        <PaginatedList
+          items={users}
+          renderItem={(item) => {
+            const view = documentViews.find((v) => v.user.id === item.id);
+            const isPresent = presentIds.includes(item.id);
+            const isEditing = editingIds.includes(item.id);
+
+            const subtitle = isPresent
+              ? isEditing
+                ? t("Currently editing")
+                : t("Currently viewing")
+              : t("Viewed {{ timeAgo }} ago", {
+                  timeAgo: formatDistanceToNow(
+                    view ? Date.parse(view.lastViewedAt) : new Date()
+                  ),
+                });
+
+            return (
+              <ListItem
+                key={item.id}
+                title={item.name}
+                subtitle={subtitle}
+                image={<Avatar key={item.id} src={item.avatarUrl} size={32} />}
+                border={false}
+                small
+              />
+            );
+          }}
+        />
+      )}
+    </>
+  );
+}
+
+export default observer(DocumentViews);

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,72 +0,0 @@
-// @flow
-import React, { Component } 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 Component {
-  @observable opened: boolean = false;
-  anchor: HTMLElement;
-  store: DocumentViewersStore;
-  props: Props;
-
-  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,54 +0,0 @@
-// @flow
-import React, { Component } 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 Component {
-  props: 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/DropToImport.js

@@ -1,105 +0,0 @@
-// @flow
-import React, { Component } 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$Element<any>,
-  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 Component {
-  @observable isImporting: boolean = false;
-  props: Props;
-
-  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,103 +0,0 @@
-// @flow
-import React, { Component } 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.Element<*>,
-  onOpen?: () => void,
-  onClose?: () => void,
-  children?: React.Element<*>,
-  style?: Object,
-};
-
-@observer
-class DropdownMenu extends Component {
-  props: Props;
-  @observable top: number;
-  @observable right: number;
-
-  handleOpen = (openPortal: SyntheticEvent => void) => {
-    return (ev: SyntheticMouseEvent) => {
-      ev.preventDefault();
-      ev.stopPropagation();
-      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() {
-    return (
-      <div>
-        <PortalWithState
-          onOpen={this.props.onOpen}
-          onClose={this.props.onClose}
-          closeOnEsc
-          closeOnOutsideClick
-        >
-          {({ closePortal, openPortal, portal }) => [
-            <Label onClick={this.handleOpen(openPortal)} key="label">
-              {this.props.label}
-            </Label>,
-            portal(
-              <Menu
-                key="menu"
-                onClick={closePortal}
-                style={this.props.style}
-                top={this.top}
-                right={this.right}
-              >
-                {this.props.children}
-              </Menu>
-            ),
-          ]}
-        </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 React from 'react';
-import styled from 'styled-components';
-import { color } from 'shared/styles/constants';
-
-type Props = {
-  onClick?: SyntheticEvent => void,
-  children?: React.Element<any>,
-};
-
-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;