refactor

fix: SocketPresence account for socket changing
check connection on page visibility change
2026-06-13 19:35:02 +03:00 · 2020-08-20 19:05:48 -07:00 · 2020-08-20 00:06:51 -07:00 · 2020-08-19 22:51:18 -07:00
407 changed files with 8751 additions and 20995 deletions
@@ -3,7 +3,7 @@ jobs:
  build:
    working_directory: ~/outline
    docker:
-      - image: circleci/node:14
+      - image: circleci/node:12
      - image: circleci/redis:latest
      - image: circleci/postgres:9.6.5-alpine-ram
    environment:
@@ -39,5 +39,5 @@ jobs:
          name: test
          command: yarn test
      - run:
-          name: build-webpack
-          command: yarn build:webpack
+          name: build
+          command: yarn build
@@ -1,19 +0,0 @@
-__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
@@ -1,111 +1,55 @@
-# 👋 Welcome, we're glad you're setting up an installation of Outline. Copy this 
-# file to .env or set the variables in your local environment manually. For 
-# development with docker this should mostly work out  of the box other than 
-# setting the Slack keys and the SECRET_KEY.
-
-
-
-
-# –––––––––––––––– REQUIRED ––––––––––––––––
-
-# Generate a unique random key, you can use `openssl rand -hex 32` in terminal
-# DO NOT LEAVE UNSET
+# 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
 SECRET_KEY=generate_a_new_key
-
-# Generate a unique random key, you can use `openssl rand -hex 32` in terminal
-# DO NOT LEAVE UNSET
 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
 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
 PORT=3000

-# Third party signin credentials, at least one of EITHER Google OR Slack is
-# required for a working installation or you'll have no sign-in options.
+# enforce (auto redirect to) https in production, (optional) default is true.
+# set to false if  your SSL is terminated at a loadbalancer, for example
+FORCE_HTTPS=true

-# 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
+ENABLE_UPDATES=true
+DEBUG=cache,presenters,events
+
+# Third party signin credentials (at least one is required)
 SLACK_KEY=get_a_key_from_slack
 SLACK_SECRET=get_the_secret_of_above_key

-# To configure Google auth, you'll need to create an OAuth Client ID at
-# => https://console.cloud.google.com/apis/credentials
-#
-# When configuring the Client ID, add an Authorized redirect URI:
-# https://<URL>/auth/google.callback
 GOOGLE_CLIENT_ID=
 GOOGLE_CLIENT_SECRET=

-
-
-
-# –––––––––––––––– 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
-
-# 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,multiplayer,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
+# Comma separated list of domains to be allowed (optional)
+# If not set, all Google apps domains are allowed by default
 GOOGLE_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
+# Third party credentials (optional)
+SLACK_VERIFICATION_TOKEN=PLxk6OlXXXXXVj3YYYY
 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 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.
-
-# A more detailed guide on setting up S3 is available here:
-# => https://wiki.generaloutline.com/share/125de1cc-9ff6-424b-8415-0d58c809a40f
-#
+# AWS credentials (optional in development)
 AWS_ACCESS_KEY_ID=get_a_key_from_aws
 AWS_SECRET_ACCESS_KEY=get_the_secret_of_above_key
 AWS_REGION=xx-xxxx-x
 AWS_S3_UPLOAD_BUCKET_URL=http://s3:4569
 AWS_S3_UPLOAD_BUCKET_NAME=bucket_name_here
 AWS_S3_UPLOAD_MAX_SIZE=26214400
-AWS_S3_FORCE_PATH_STYLE=true
+# uploaded s3 objects permission level, default is private
+# set to "public-read" to allow public access
 AWS_S3_ACL=private

-# 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
+# Emails configuration (optional)
 SMTP_HOST=
 SMTP_PORT=
 SMTP_USERNAME=
@@ -115,7 +59,3 @@ SMTP_REPLY_EMAIL=

 # 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
@@ -4,8 +4,7 @@
    "react-app",
    "plugin:import/errors",
    "plugin:import/warnings",
-    "plugin:flowtype/recommended",
-    "plugin:react-hooks/recommended"
+    "plugin:flowtype/recommended"
  ],
  "plugins": [
    "prettier",
@@ -18,7 +18,6 @@

 [options]
 emoji=true
-sharedmemory.heap_size=3221225472

 module.system.node.resolve_dirname=node_modules
 module.system.node.resolve_dirname=app
@@ -33,7 +32,6 @@ module.file_ext=.json
 esproposal.decorators=ignore
 esproposal.class_static_fields=enable
 esproposal.class_instance_fields=enable
-esproposal.optional_chaining=enable

 suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe
 suppress_comment=\\(.\\|\n\\)*\\$FlowIssue
@@ -1,10 +0,0 @@
-# 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
@@ -1,5 +1,4 @@
 dist
-build
 node_modules/*
 server/scripts
 .env
@@ -8,4 +7,3 @@ npm-debug.log
 stats.json
 .DS_Store
 fakes3/*
-.idea
@@ -1,7 +1,6 @@
 {
  "javascript.validate.enable": false,
-  "javascript.format.enable": false,
  "typescript.validate.enable": false,
-  "typescript.format.enable": false,
  "editor.formatOnSave": true,
+  "typescript.format.enable": false
 }
@@ -1,66 +0,0 @@
-
-# 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              - OAuth routes for Slack and Google, plus email authentication routes
-├── 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
-```
@@ -1,23 +1,17 @@
-FROM node:14-alpine
+FROM node:12-alpine

+ENV PATH /opt/outline/node_modules/.bin:/opt/node_modules/.bin:$PATH
+ENV NODE_PATH /opt/outline/node_modules:/opt/node_modules
 ENV APP_PATH /opt/outline
 RUN mkdir -p $APP_PATH

 WORKDIR $APP_PATH
+COPY . $APP_PATH

-COPY package.json ./
-COPY yarn.lock ./
+RUN yarn install --pure-lockfile
+RUN yarn build
+RUN cp -r /opt/outline/node_modules /opt/node_modules

-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
@@ -3,7 +3,7 @@ Business Source License 1.1
 Parameters

 Licensor:             General Outline, Inc.
-Licensed Work:        Outline 0.51.0
+Licensed Work:        Outline 0.46.0
                      The Licensed Work is (c) 2020 General Outline, Inc.
 Additional Use Grant: You may make use of the Licensed Work, provided that
                      you may not use the Licensed Work for a Document
@@ -15,7 +15,7 @@ Additional Use Grant: You may make use of the Licensed Work, provided that
                      Licensed Work by creating teams and documents
                      controlled by such third parties.

-Change Date:          2023-12-13
+Change Date:          2023-08-12

 Change License:       Apache License, Version 2.0

@@ -9,16 +9,10 @@ build:

 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:
@@ -1 +1 @@
-web: node ./build/server/index.js
+web: node index.js
@@ -12,77 +12,26 @@
  <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:

- [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
+- Node.js >= 12
+- Postgres >=9.5
+- Redis >= 4
+- AWS S3 storage bucket for media and other attachments
 - Slack or Google developer application for authentication


-## Self-Hosted Production
+### Development

-### 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 sequelize: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 sequelize:migrate --env=production-ssl-disabled`, for example:
-
-   `docker run --rm outlinewiki/outline yarn sequelize: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 sequelize: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:
+In development 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)
@@ -101,28 +50,35 @@ For contributing features and fixes you can quickly get an environment running u
 1. Run `make up`. This will download dependencies, build and launch a development version of Outline


-# Contributing
+### Production

-Outline is built and maintained by a small team – we'd love your help to fix bugs and add features!
+For a self-hosted production installation there is more flexibility, but these are the suggested steps:

-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.
+1. Clone this repo and install dependencies with `yarn` or `npm install`

-If you’re looking for ways to get started, here's a list of ways to help us improve Outline:
+   > Requires [Node.js](https://nodejs.org/) and [yarn](https://yarnpkg.com) installed

-* [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
+1. Build the web app with `yarn build:webpack` or `npm run build:webpack`
+1. Using the `.env.sample` as a reference, set the required variables in your production environment. The following are required as a minimum:
+    1. `SECRET_KEY` (follow instructions in the comments at the top of `.env`)
+    1. `SLACK_KEY` (this is called "Client ID" in Slack admin)
+    1. `SLACK_SECRET` (this is called "Client Secret" in Slack admin)
+    1. `DATABASE_URL` (run your own local copy of Postgres, or use a cloud service)
+    1. `REDIS_URL`  (run your own local copy of Redis, or use a cloud service)
+    1. `URL` (the public facing URL of your installation)
+    1. `AWS_` (all of the keys beginning with AWS)
+1. Migrate database schema with `yarn sequelize:migrate` or `npm run sequelize:migrate `
+1. Start the service with any daemon tools you prefer. Take PM2 for example, `NODE_ENV=production pm2 start index.js --name outline `
+1. Visit http://you_server_ip:3000 and you should be able to see Outline page
+
+   > Port number can be changed in the `.env` file
+
+1. (Optional) You can add an `nginx` reverse proxy to serve your instance of Outline for a clean URL without the port number, support SSL, etc.


-## Architecture
+## Development

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

 Outline uses [debug](https://www.npmjs.com/package/debug). To enable debugging output, the following categories are available:

@@ -130,31 +86,6 @@ Outline uses [debug](https://www.npmjs.com/package/debug). To enable debugging o
 DEBUG=sql,cache,presenters,events,logistics,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

 Sequelize is used to create and run migrations, for example:
@@ -170,6 +101,67 @@ 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 the latest language features, including `async`/`await`, and [Flow](https://flow.org/) typing. Prettier and ESLint are enforced by CI.
+
+### Frontend
+
+Outline's frontend is a React application compiled with [Webpack](https://webpack.js.org/). It uses [Mobx](https://mobx.js.org/) for state management and [Styled Components](https://www.styled-components.com/) for component styles. Unless global, state logic and styles are always co-located with React components together with their subcomponents to make the component tree easier to manage.
+
+The editor itself is built on [Prosemirror](https://github.com/prosemirror) and hosted in a separate repository to encourage reuse: [rich-markdown-editor](https://github.com/outline/rich-markdown-editor)
+
+- `app/` - Frontend React application
+- `app/scenes` - Full page views
+- `app/components` - Reusable React components
+- `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/commands` - Domain logic, currently being refactored from /models
+- `server/emails`  - React rendered email templates
+- `server/models` - Database models
+- `server/policies` - Authorization logic
+- `server/presenters` - API responses for database models
+- `server/test` - Test helps and support
+- `server/utils` - Utility methods
+- `shared` - Code shared between frontend and backend applications
+
+## Tests
+
+We aim to have sufficient test coverage for critical parts of the application and aren't aiming for 100% unit test coverage. All API endpoints and anything authentication related should be thoroughly tested.
+
+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 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 the [Discussions](https://www.github.com/outline/outline/discussions). This way we can ensure that an approach is agreed on before code is written and will hopefully help to get your contributions integrated faster!
+
+If you’re looking for ways to get started, here's a list of ways to help us improve Outline:
+
+* 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
+
 ## License

-Outline is [BSL 1.1 licensed](LICENSE).
+Outline is [BSL 1.1 licensed](https://github.com/outline/outline/blob/master/LICENSE).
@@ -1,34 +0,0 @@
-# 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.
@@ -1,18 +0,0 @@
-/* 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 });
-  };
-}
@@ -92,11 +92,6 @@
      "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",
@@ -11,6 +11,11 @@ export const Action = styled(Flex)`
  font-size: 15px;
  flex-shrink: 0;

+  a {
+    color: ${(props) => props.theme.text};
+    height: 24px;
+  }
+
  &:empty {
    display: none;
  }
@@ -1,32 +1,18 @@
 // @flow
-import { observer } from "mobx-react";
+import { observer, inject } 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 AuthStore from "stores/AuthStore";
 import LoadingIndicator from "components/LoadingIndicator";
-import useStores from "../hooks/useStores";
 import env from "env";

 type Props = {
-  children: React.Node,
+  auth: AuthStore,
+  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]);
-
+const Authenticated = observer(({ auth, children }: Props) => {
  if (auth.authenticated) {
    const { user, team } = auth;
    const { hostname } = window.location;
@@ -35,14 +21,9 @@ const Authenticated = ({ children }: Props) => {
      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 (
+    // If we're authenticated but viewing a subdomain that doesn't match the
+    // currently authenticated team then kick the user to the teams subdomain.
+    if (
      env.SUBDOMAINS_ENABLED &&
      team.subdomain &&
      isCustomSubdomain(hostname) &&
@@ -57,6 +38,6 @@ const Authenticated = ({ children }: Props) => {

  auth.logout(true);
  return <Redirect to="/" />;
-};
+});

-export default observer(Authenticated);
+export default inject("auth")(Authenticated);
@@ -3,17 +3,13 @@ import { observable } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
 import styled from "styled-components";
-import User from "models/User";
 import placeholder from "./placeholder.png";

-type Props = {|
+type Props = {
  src: string,
  size: number,
  icon?: React.Node,
-  user?: User,
-  onClick?: () => void,
-  className?: string,
-|};
+};

@observer
 class Avatar extends React.Component<Props> {
@@ -4,7 +4,6 @@ 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";
@@ -17,7 +16,6 @@ type Props = {
  isEditing: boolean,
  isCurrentUser: boolean,
  lastViewedAt: string,
-  t: TFunction,
 };

@observer
@@ -39,25 +37,20 @@ class AvatarWithPresence extends React.Component<Props> {
      isPresent,
      isEditing,
      isCurrentUser,
-      t,
    } = this.props;

-    const action = isPresent
-      ? isEditing
-        ? t("currently editing")
-        : t("currently viewing")
-      : t("viewed {{ timeAgo }} ago", {
-          timeAgo: distanceInWordsToNow(new Date(lastViewedAt)),
-        });
-
    return (
      <>
        <Tooltip
          tooltip={
            <Centered>
-              <strong>{user.name}</strong> {isCurrentUser && `(${t("You")})`}
+              <strong>{user.name}</strong> {isCurrentUser && "(You)"}
              <br />
-              {action}
+              {isPresent
+                ? isEditing
+                  ? "currently editing"
+                  : "currently viewing"
+                : `viewed ${distanceInWordsToNow(new Date(lastViewedAt))} ago`}
            </Centered>
          }
          placement="bottom"
@@ -90,4 +83,4 @@ const AvatarWrapper = styled.div`
  transition: opacity 250ms ease-in-out;
 `;

-export default withTranslation()<AvatarWithPresence>(AvatarWithPresence);
+export default AvatarWithPresence;
@@ -4,10 +4,9 @@ import styled from "styled-components";
 const Badge = styled.span`
  margin-left: 10px;
  padding: 2px 6px 3px;
-  background-color: ${({ yellow, primary, theme }) =>
-    yellow ? theme.yellow : primary ? theme.primary : theme.textTertiary};
-  color: ${({ primary, yellow, theme }) =>
-    primary ? theme.white : yellow ? theme.almostBlack : theme.background};
+  background-color: ${({ primary, theme }) =>
+    primary ? theme.primary : theme.textTertiary};
+  color: ${({ primary, theme }) => (primary ? theme.white : theme.background)};
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
@@ -1,105 +1,35 @@
 // @flow
-import { observer } from "mobx-react";
+import { observer, inject } from "mobx-react";
 import {
-  ArchiveIcon,
-  EditIcon,
-  GoToIcon,
  PadlockIcon,
+  GoToIcon,
+  MoreIcon,
  ShapesIcon,
-  TrashIcon,
+  EditIcon,
 } from "outline-icons";
 import * as React from "react";
-import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
+
+import CollectionsStore from "stores/CollectionsStore";
 import Document from "models/Document";
 import CollectionIcon from "components/CollectionIcon";
 import Flex from "components/Flex";
-import useStores from "hooks/useStores";
-import BreadcrumbMenu from "menus/BreadcrumbMenu";
+import BreadcrumbMenu from "./BreadcrumbMenu";
 import { collectionUrl } from "utils/routeHelpers";

-type Props = {|
+type Props = {
  document: Document,
-  children?: React.Node,
+  collections: CollectionsStore,
  onlyText: boolean,
-|};
+};

-function Icon({ document }) {
-  const { t } = useTranslation();
+const Breadcrumb = observer(({ document, collections, onlyText }: Props) => {
+  const collection = collections.get(document.collectionId);
+  if (!collection) return <div />;

-  if (document.isDeleted) {
-    return (
-      <>
-        <CategoryName to="/trash">
-          <TrashIcon color="currentColor" />
-          &nbsp;
-          <span>{t("Trash")}</span>
-        </CategoryName>
-        <Slash />
-      </>
-    );
-  }
-  if (document.isArchived) {
-    return (
-      <>
-        <CategoryName to="/archive">
-          <ArchiveIcon color="currentColor" />
-          &nbsp;
-          <span>{t("Archive")}</span>
-        </CategoryName>
-        <Slash />
-      </>
-    );
-  }
-  if (document.isDraft) {
-    return (
-      <>
-        <CategoryName to="/drafts">
-          <EditIcon color="currentColor" />
-          &nbsp;
-          <span>{t("Drafts")}</span>
-        </CategoryName>
-        <Slash />
-      </>
-    );
-  }
-  if (document.isTemplate) {
-    return (
-      <>
-        <CategoryName to="/templates">
-          <ShapesIcon color="currentColor" />
-          &nbsp;
-          <span>{t("Templates")}</span>
-        </CategoryName>
-        <Slash />
-      </>
-    );
-  }
-  return null;
-}
-
-const Breadcrumb = ({ document, children, onlyText }: Props) => {
-  const { collections } = useStores();
-  const { t } = useTranslation();
-
-  if (!collections.isLoaded) {
-    return <Wrapper />;
-  }
-
-  let collection = collections.get(document.collectionId);
-  if (!collection) {
-    collection = {
-      id: document.collectionId,
-      name: t("Deleted Collection"),
-      color: "currentColor",
-    };
-  }
-
-  const path = collection.pathToDocument
-    ? collection.pathToDocument(document.id).slice(0, -1)
-    : [];
+  const path = collection.pathToDocument(document).slice(0, -1);

  if (onlyText === true) {
    return (
@@ -120,13 +50,34 @@ const Breadcrumb = ({ document, children, onlyText }: Props) => {
    );
  }

+  const isTemplate = document.isTemplate;
+  const isDraft = !document.publishedAt && !isTemplate;
  const isNestedDocument = path.length > 1;
  const lastPath = path.length ? path[path.length - 1] : undefined;
  const menuPath = isNestedDocument ? path.slice(0, -1) : [];

  return (
    <Wrapper justify="flex-start" align="center">
-      <Icon document={document} />
+      {isTemplate && (
+        <>
+          <CollectionName to="/templates">
+            <ShapesIcon color="currentColor" />
+            &nbsp;
+            <span>Templates</span>
+          </CollectionName>
+          <Slash />
+        </>
+      )}
+      {isDraft && (
+        <>
+          <CollectionName to="/drafts">
+            <EditIcon color="currentColor" />
+            &nbsp;
+            <span>Drafts</span>
+          </CollectionName>
+          <Slash />
+        </>
+      )}
      <CollectionName to={collectionUrl(collection.id)}>
        <CollectionIcon collection={collection} expanded />
        &nbsp;
@@ -134,7 +85,7 @@ const Breadcrumb = ({ document, children, onlyText }: Props) => {
      </CollectionName>
      {isNestedDocument && (
        <>
-          <Slash /> <BreadcrumbMenu path={menuPath} />
+          <Slash /> <BreadcrumbMenu label={<Overflow />} path={menuPath} />
        </>
      )}
      {lastPath && (
@@ -145,15 +96,9 @@ const Breadcrumb = ({ document, children, onlyText }: Props) => {
          </Crumb>
        </>
      )}
-      {children}
    </Wrapper>
  );
-};
-
-export const Slash = styled(GoToIcon)`
-  flex-shrink: 0;
-  fill: ${(props) => props.theme.divider};
-`;
+});

 const Wrapper = styled(Flex)`
  display: none;
@@ -175,6 +120,22 @@ const SmallSlash = styled(GoToIcon)`
  opacity: 0.25;
 `;

+export const Slash = styled(GoToIcon)`
+  flex-shrink: 0;
+  fill: ${(props) => props.theme.divider};
+`;
+
+const Overflow = styled(MoreIcon)`
+  flex-shrink: 0;
+  opacity: 0.25;
+  transition: opacity 100ms ease-in-out;
+
+  &:hover,
+  &:active {
+    opacity: 1;
+  }
+`;
+
 const Crumb = styled(Link)`
  color: ${(props) => props.theme.text};
  font-size: 15px;
@@ -190,21 +151,12 @@ const Crumb = styled(Link)`

 const CollectionName = styled(Link)`
  display: flex;
-  flex-shrink: 1;
+  flex-shrink: 0;
  color: ${(props) => props.theme.text};
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
-  min-width: 0;
-
-  svg {
-    flex-shrink: 0;
-  }
 `;

-const CategoryName = styled(CollectionName)`
-  flex-shrink: 0;
-`;
-
-export default observer(Breadcrumb);
+export default inject("collections")(Breadcrumb);
@@ -0,0 +1,25 @@
+// @flow
+import * as React from "react";
+import { Link } from "react-router-dom";
+import { DropdownMenu, DropdownMenuItem } from "components/DropdownMenu";
+
+type Props = {
+  label: React.Node,
+  path: Array<any>,
+};
+
+export default class BreadcrumbMenu extends React.Component<Props> {
+  render() {
+    const { path } = this.props;
+
+    return (
+      <DropdownMenu label={this.props.label} position="center">
+        {path.map((item) => (
+          <DropdownMenuItem as={Link} to={item.url} key={item.id}>
+            {item.title}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenu>
+    );
+  }
+}
@@ -1,6 +1,6 @@
 // @flow
 import { ExpandedIcon } from "outline-icons";
-import { darken } from "polished";
+import { darken, lighten } from "polished";
 import * as React from "react";
 import styled from "styled-components";

@@ -19,16 +19,13 @@ const RealButton = styled.button`
  height: 32px;
  text-decoration: none;
  flex-shrink: 0;
+  outline: none;
  cursor: pointer;
  user-select: none;

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

  &::-moz-focus-inner {
    padding: 0;
@@ -39,6 +36,13 @@ const RealButton = styled.button`
    background: ${(props) => darken(0.05, props.theme.buttonBackground)};
  }

+  &:focus {
+    transition-duration: 0.05s;
+    box-shadow: ${(props) => lighten(0.4, props.theme.buttonBackground)} 0px 0px
+      0px 3px;
+    outline: none;
+  }
+
  &:disabled {
    cursor: default;
    pointer-events: none;
@@ -46,30 +50,31 @@ const RealButton = styled.button`
  }

  ${(props) =>
-    props.$neutral &&
+    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 ? "none" : "rgba(0, 0, 0, 0.07) 0px 1px 2px"
+    };
+    border: 1px solid ${
+      props.borderOnHover ? "transparent" : props.theme.buttonNeutralBorder
    };

-    ${
-      props.borderOnHover
-        ? ""
-        : `svg {
+    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;
+      border: 1px solid ${props.theme.buttonNeutralBorder};
+    }
+
+    &:focus {
+      transition-duration: 0.05s;
+      border: 1px solid ${lighten(0.4, props.theme.buttonBackground)};
+      box-shadow: ${lighten(0.4, props.theme.buttonBackground)} 0px 0px
+        0px 2px;
    }

    &:disabled {
@@ -81,9 +86,15 @@ const RealButton = styled.button`
      background: ${props.theme.danger};
      color: ${props.theme.white};

-      &:hover {
-        background: ${darken(0.05, props.theme.danger)};
-      }
+    &:hover {
+      background: ${darken(0.05, props.theme.danger)};
+    }
+
+    &:focus {
+      transition-duration: 0.05s;
+      box-shadow: ${lighten(0.4, props.theme.danger)} 0px 0px
+        0px 3px;
+    }
  `};
 `;

@@ -102,14 +113,14 @@ export const Inner = styled.span`
  line-height: ${(props) => (props.hasIcon ? 24 : 32)}px;
  justify-content: center;
  align-items: center;
-  min-height: 32px;
+  min-height: 30px;

  ${(props) => props.hasIcon && props.hasText && "padding-left: 4px;"};
  ${(props) => props.hasIcon && !props.hasText && "padding: 0 4px;"};
 `;

-export type Props = {|
-  type?: "button" | "submit",
+export type Props = {
+  type?: string,
  value?: string,
  icon?: React.Node,
  iconColor?: string,
@@ -117,22 +128,9 @@ export type Props = {|
  children?: React.Node,
  innerRef?: React.ElementRef<any>,
  disclosure?: boolean,
-  neutral?: boolean,
-  danger?: boolean,
-  primary?: boolean,
-  disabled?: boolean,
  fullwidth?: boolean,
-  autoFocus?: boolean,
-  style?: Object,
-  as?: React.ComponentType<any>,
-  to?: string,
-  onClick?: (event: SyntheticEvent<>) => mixed,
  borderOnHover?: boolean,
-
-  "data-on"?: string,
-  "data-event-category"?: string,
-  "data-event-action"?: string,
-|};
+};

 function Button({
  type = "text",
@@ -141,14 +139,13 @@ function Button({
  value,
  disclosure,
  innerRef,
-  neutral,
  ...rest
 }: Props) {
  const hasText = children !== undefined || value !== undefined;
  const hasIcon = icon !== undefined;

  return (
-    <RealButton type={type} ref={innerRef} $neutral={neutral} {...rest}>
+    <RealButton type={type} ref={innerRef} {...rest}>
      <Inner hasIcon={hasIcon} hasText={hasText} disclosure={disclosure}>
        {hasIcon && icon}
        {hasText && <Label hasIcon={hasIcon}>{children || value}</Label>}
@@ -1,23 +0,0 @@
-// @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;
-`;
@@ -1,21 +1,18 @@
 // @flow
 import * as React from "react";
-import { VisuallyHidden } from "reakit/VisuallyHidden";
 import styled from "styled-components";
 import HelpText from "components/HelpText";
+import VisuallyHidden from "components/VisuallyHidden";

-export type Props = {|
+export type Props = {
  checked?: boolean,
  label?: string,
  labelHidden?: boolean,
  className?: string,
-  name?: string,
-  disabled?: boolean,
-  onChange: (event: SyntheticInputEvent<HTMLInputElement>) => mixed,
  note?: string,
  short?: boolean,
  small?: boolean,
-|};
+};

 const LabelText = styled.span`
  font-weight: 500;
@@ -20,9 +20,7 @@ type Props = {
@observer
 class Collaborators extends React.Component<Props> {
  componentDidMount() {
-    if (!this.props.document.isDeleted) {
-      this.props.views.fetchPage({ documentId: this.props.document.id });
-    }
+    this.props.views.fetchPage({ documentId: this.props.document.id });
  }

  render() {
@@ -18,7 +18,7 @@ function ResolvedCollectionIcon({ collection, expanded, size, ui }: Props) {
  // If the chosen icon color is very dark then we invert it in dark mode
  // otherwise it will be impossible to see against the dark background.
  const color =
-    ui.resolvedTheme === "dark" && collection.color !== "currentColor"
+    ui.resolvedTheme === "dark"
      ? getLuminance(collection.color) > 0.12
        ? collection.color
        : "currentColor"
@@ -1,13 +0,0 @@
-// @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;
@@ -1,21 +0,0 @@
-// @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>
-  );
-}
@@ -1,16 +0,0 @@
-// @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;
-`;
@@ -1,169 +0,0 @@
-// @flow
-import { ExpandedIcon } from "outline-icons";
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-import { Link } from "react-router-dom";
-import {
-  useMenuState,
-  MenuButton,
-  MenuItem as BaseMenuItem,
-} from "reakit/Menu";
-import styled from "styled-components";
-import MenuItem, { MenuAnchor } from "./MenuItem";
-import Separator from "./Separator";
-import ContextMenu from ".";
-
-type TMenuItem =
-  | {|
-      title: React.Node,
-      to: string,
-      visible?: boolean,
-      selected?: boolean,
-      disabled?: boolean,
-    |}
-  | {|
-      title: React.Node,
-      onClick: (event: SyntheticEvent<>) => void | Promise<void>,
-      visible?: boolean,
-      selected?: boolean,
-      disabled?: boolean,
-    |}
-  | {|
-      title: React.Node,
-      href: string,
-      visible?: boolean,
-      selected?: boolean,
-      disabled?: boolean,
-    |}
-  | {|
-      title: React.Node,
-      visible?: boolean,
-      disabled?: boolean,
-      style?: Object,
-      hover?: boolean,
-      items: TMenuItem[],
-    |}
-  | {|
-      type: "separator",
-      visible?: boolean,
-    |}
-  | {|
-      type: "heading",
-      visible?: boolean,
-      title: React.Node,
-    |};
-
-type Props = {|
-  items: TMenuItem[],
-|};
-
-const Disclosure = styled(ExpandedIcon)`
-  transform: rotate(270deg);
-  justify-self: flex-end;
-`;
-
-const Submenu = React.forwardRef(({ templateItems, title, ...rest }, ref) => {
-  const { t } = useTranslation();
-  const menu = useMenuState({ modal: true });
-
-  return (
-    <>
-      <MenuButton ref={ref} {...menu} {...rest}>
-        {(props) => (
-          <MenuAnchor {...props}>
-            {title} <Disclosure color="currentColor" />
-          </MenuAnchor>
-        )}
-      </MenuButton>
-      <ContextMenu {...menu} aria-label={t("Submenu")}>
-        <Template {...menu} items={templateItems} />
-      </ContextMenu>
-    </>
-  );
-});
-
-function Template({ items, ...menu }: Props): React.Node {
-  let filtered = items.filter((item) => item.visible !== false);
-
-  // this block literally just trims unneccessary separators
-  filtered = filtered.reduce((acc, item, index) => {
-    // trim separators from start / end
-    if (item.type === "separator" && index === 0) return acc;
-    if (item.type === "separator" && index === filtered.length - 1) return acc;
-
-    // trim double separators looking ahead / behind
-    const prev = filtered[index - 1];
-    if (prev && prev.type === "separator" && item.type === "separator")
-      return acc;
-
-    // otherwise, continue
-    return [...acc, item];
-  }, []);
-
-  return filtered.map((item, index) => {
-    if (item.to) {
-      return (
-        <MenuItem
-          as={Link}
-          to={item.to}
-          key={index}
-          disabled={item.disabled}
-          selected={item.selected}
-          {...menu}
-        >
-          {item.title}
-        </MenuItem>
-      );
-    }
-
-    if (item.href) {
-      return (
-        <MenuItem
-          href={item.href}
-          key={index}
-          disabled={item.disabled}
-          selected={item.selected}
-          target="_blank"
-          {...menu}
-        >
-          {item.title}
-        </MenuItem>
-      );
-    }
-
-    if (item.onClick) {
-      return (
-        <MenuItem
-          as="button"
-          onClick={item.onClick}
-          disabled={item.disabled}
-          selected={item.selected}
-          key={index}
-          {...menu}
-        >
-          {item.title}
-        </MenuItem>
-      );
-    }
-
-    if (item.items) {
-      return (
-        <BaseMenuItem
-          key={index}
-          as={Submenu}
-          templateItems={item.items}
-          title={item.title}
-          {...menu}
-        />
-      );
-    }
-
-    if (item.type === "separator") {
-      return <Separator key={index} />;
-    }
-
-    return null;
-  });
-}
-
-export default React.memo<Props>(Template);
@@ -1,77 +0,0 @@
-// @flow
-import { rgba } from "polished";
-import * as React from "react";
-import { Menu } from "reakit/Menu";
-import styled from "styled-components";
-import { fadeAndScaleIn } from "shared/styles/animations";
-import usePrevious from "hooks/usePrevious";
-
-type Props = {|
-  "aria-label": string,
-  visible?: boolean,
-  animating?: boolean,
-  children: React.Node,
-  onOpen?: () => void,
-  onClose?: () => void,
-|};
-
-export default function ContextMenu({
-  children,
-  onOpen,
-  onClose,
-  ...rest
-}: Props) {
-  const previousVisible = usePrevious(rest.visible);
-
-  React.useEffect(() => {
-    if (rest.visible && !previousVisible) {
-      if (onOpen) {
-        onOpen();
-      }
-    }
-    if (!rest.visible && previousVisible) {
-      if (onClose) {
-        onClose();
-      }
-    }
-  }, [onOpen, onClose, previousVisible, rest.visible]);
-
-  return (
-    <Menu {...rest}>
-      {(props) => (
-        <Position {...props}>
-          <Background>
-            {rest.visible || rest.animating ? children : null}
-          </Background>
-        </Position>
-      )}
-    </Menu>
-  );
-}
-
-const Position = styled.div`
-  position: absolute;
-  z-index: ${(props) => props.theme.depths.menu};
-`;
-
-const Background = styled.div`
-  animation: ${fadeAndScaleIn} 200ms ease;
-  transform-origin: ${(props) => (props.left !== undefined ? "25%" : "75%")} 0;
-  background: ${(props) => rgba(props.theme.menuBackground, 0.95)};
-  border: ${(props) =>
-    props.theme.menuBorder ? `1px solid ${props.theme.menuBorder}` : "none"};
-  border-radius: 2px;
-  padding: 0.5em 0;
-  min-width: 180px;
-  overflow: hidden;
-  overflow-y: auto;
-  max-height: 75vh;
-  max-width: 276px;
-  box-shadow: ${(props) => props.theme.menuShadow};
-  pointer-events: all;
-  font-weight: normal;
-
-  @media print {
-    display: none;
-  }
-`;
@@ -14,7 +14,7 @@ export default function DelayedMount({ delay = 250, children }: Props) {
    return () => {
      clearTimeout(timeout);
    };
-  }, [delay]);
+  }, []);

  if (!isShowing) {
    return null;
@@ -1,23 +1,20 @@
 // @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 { observable, action } from "mobx";
+import { observer, inject } from "mobx-react";
 import * as React from "react";
-import { type Match, Redirect, type RouterHistory } from "react-router-dom";
+import { type RouterHistory, type Match } 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";
+import { documentHistoryUrl } from "utils/routeHelpers";

 type Props = {
  match: Match,
@@ -32,7 +29,6 @@ class DocumentHistory extends React.Component<Props> {
  @observable isFetching: boolean = false;
  @observable offset: number = 0;
  @observable allowLoadMore: boolean = true;
-  @observable redirectTo: ?string;

  async componentDidMount() {
    await this.loadMoreResults();
@@ -90,34 +86,15 @@ class DocumentHistory extends React.Component<Props> {
    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} />
@@ -156,44 +133,17 @@ const Wrapper = styled(Flex)`
  top: 0;
  right: 0;
  z-index: 1;
-  min-width: ${(props) => props.theme.sidebarWidth}px;
+  min-width: ${(props) => props.theme.sidebarWidth};
  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;
+  min-width: ${(props) => props.theme.sidebarWidth};
  border-left: 1px solid ${(props) => props.theme.divider};
  z-index: 1;
-
-  ${breakpoint("tablet")`
-    display: flex;
-  `};
-`;
-
-const Title = styled(Flex)`
-  font-size: 16px;
-  font-weight: 600;
-  text-align: center;
-  align-items: center;
-  justify-content: flex-start;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  width: 0;
-  flex-grow: 1;
-`;
-
-const Header = styled(Flex)`
-  align-items: center;
-  position: relative;
-  padding: 12px;
-  border-bottom: 1px solid ${(props) => props.theme.divider};
-  color: ${(props) => props.theme.text};
-  flex-shrink: 0;
 `;

 export default inject("documents", "revisions")(DocumentHistory);
@@ -1,5 +1,6 @@
 // @flow
 import format from "date-fns/format";
+import { MoreIcon } from "outline-icons";
 import * as React from "react";
 import { NavLink } from "react-router-dom";
 import styled, { withTheme } from "styled-components";
@@ -10,12 +11,11 @@ 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,
+  theme: Object,
  showMenu: boolean,
  selected: boolean,
  document: Document,
@@ -36,7 +36,7 @@ class RevisionListItem extends React.Component<Props> {
          {revision.createdBy.name}
        </Author>
        <Meta>
-          <Time dateTime={revision.createdAt} tooltipDelay={250}>
+          <Time dateTime={revision.createdAt}>
            {format(revision.createdAt, "MMMM Do, YYYY h:mm a")}
          </Time>
        </Meta>
@@ -44,7 +44,9 @@ class RevisionListItem extends React.Component<Props> {
          <StyledRevisionMenu
            document={document}
            revision={revision}
-            iconColor={selected ? theme.white : theme.textTertiary}
+            label={
+              <MoreIcon color={selected ? theme.white : theme.textTertiary} />
+            }
          />
        )}
      </StyledNavLink>
@@ -2,17 +2,12 @@
 import ArrowKeyNavigation from "boundless-arrow-key-navigation";
 import * as React from "react";
 import Document from "models/Document";
-import DocumentListItem from "components/DocumentListItem";
+import DocumentPreview from "components/DocumentPreview";

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

 const Container = styled(Flex)`
  color: ${(props) => props.theme.textTertiary};
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
-  min-width: 0;
 `;

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

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

 function DocumentMeta({
+  auth,
+  collections,
  showPublished,
  showCollection,
-  showLastViewed,
-  showNestedDocuments,
  document,
  children,
  to,
  ...rest
 }: Props) {
-  const { t } = useTranslation();
-  const { collections, auth } = useStores();
  const {
    modifiedSinceViewed,
    updatedAt,
@@ -54,7 +52,6 @@ function DocumentMeta({
    archivedAt,
    deletedAt,
    isDraft,
-    lastViewedAt,
  } = document;

  // Prevent meta information from displaying if updatedBy is not available.
@@ -68,37 +65,37 @@ function DocumentMeta({
  if (deletedAt) {
    content = (
      <span>
-        {t("deleted")} <Time dateTime={deletedAt} addSuffix />
+        deleted <Time dateTime={deletedAt} /> ago
      </span>
    );
  } else if (archivedAt) {
    content = (
      <span>
-        {t("archived")} <Time dateTime={archivedAt} addSuffix />
+        archived <Time dateTime={archivedAt} /> ago
      </span>
    );
  } else if (createdAt === updatedAt) {
    content = (
      <span>
-        {t("created")} <Time dateTime={updatedAt} addSuffix />
+        created <Time dateTime={updatedAt} /> ago
      </span>
    );
  } else if (publishedAt && (publishedAt === updatedAt || showPublished)) {
    content = (
      <span>
-        {t("published")} <Time dateTime={publishedAt} addSuffix />
+        published <Time dateTime={publishedAt} /> ago
      </span>
    );
  } else if (isDraft) {
    content = (
      <span>
-        {t("saved")} <Time dateTime={updatedAt} addSuffix />
+        saved <Time dateTime={updatedAt} /> ago
      </span>
    );
  } else {
    content = (
      <Modified highlight={modifiedSinceViewed}>
-        {t("updated")} <Time dateTime={updatedAt} addSuffix />
+        updated <Time dateTime={updatedAt} /> ago
      </Modified>
    );
  }
@@ -106,51 +103,21 @@ function DocumentMeta({
  const collection = collections.get(document.collectionId);
  const updatedByMe = auth.user && auth.user.id === updatedBy.id;

-  const timeSinceNow = () => {
-    if (isDraft || !showLastViewed) {
-      return null;
-    }
-    if (!lastViewedAt) {
-      return (
-        <>
-          •&nbsp;<Modified highlight>{t("Never viewed")}</Modified>
-        </>
-      );
-    }
-
-    return (
-      <span>
-        •&nbsp;{t("Viewed")} <Time dateTime={lastViewedAt} addSuffix shorten />
-      </span>
-    );
-  };
-
-  const nestedDocumentsCount = collection
-    ? collection.getDocumentChildren(document.id).length
-    : 0;
-
  return (
    <Container align="center" {...rest}>
-      {updatedByMe ? t("You") : updatedBy.name}&nbsp;
+      {updatedByMe ? "You" : updatedBy.name}&nbsp;
      {to ? <Link to={to}>{content}</Link> : content}
      {showCollection && collection && (
        <span>
-          &nbsp;{t("in")}&nbsp;
+          &nbsp;in&nbsp;
          <strong>
            <Breadcrumb document={document} onlyText />
          </strong>
        </span>
      )}
-      {showNestedDocuments && nestedDocumentsCount > 0 && (
-        <span>
-          &nbsp;&middot; {nestedDocumentsCount}{" "}
-          {t("nested document", { count: nestedDocumentsCount })}
-        </span>
-      )}
-      &nbsp;{timeSinceNow()}
      {children}
    </Container>
  );
 }

-export default observer(DocumentMeta);
+export default inject("collections", "auth")(observer(DocumentMeta));
@@ -1,31 +1,27 @@
 // @flow
-import { useObserver } from "mobx-react";
+import { inject } from "mobx-react";
 import * as React from "react";
 import styled from "styled-components";
+import ViewsStore from "stores/ViewsStore";
 import Document from "models/Document";
 import DocumentMeta from "components/DocumentMeta";
-import useStores from "../hooks/useStores";

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

-function DocumentMetaWithViews({ to, isDraft, document }: Props) {
-  const { views } = useStores();
-  const documentViews = useObserver(() => views.inDocument(document.id));
-  const totalViewers = documentViews.length;
-  const onlyYou = totalViewers === 1 && documentViews[0].user.id;
+function DocumentMetaWithViews({ views, to, isDraft, document }: Props) {
+  const totalViews = views.countForDocument(document.id);

  return (
    <Meta document={document} to={to}>
-      {totalViewers && !isDraft ? (
+      {totalViews && !isDraft ? (
        <>
-          &nbsp;&middot; Viewed by{" "}
-          {onlyYou
-            ? "only you"
-            : `${totalViewers} ${totalViewers === 1 ? "person" : "people"}`}
+          &nbsp;&middot; Viewed{" "}
+          {totalViews === 1 ? "once" : `${totalViews} times`}
        </>
      ) : null}
    </Meta>
@@ -35,8 +31,6 @@ function DocumentMetaWithViews({ to, isDraft, document }: Props) {
 const Meta = styled(DocumentMeta)`
  margin: -12px 0 2em 0;
  font-size: 14px;
-  position: relative;
-  z-index: 1;

  a {
    color: inherit;
@@ -51,4 +45,4 @@ const Meta = styled(DocumentMeta)`
  }
 `;

-export default DocumentMetaWithViews;
+export default inject("views")(DocumentMetaWithViews);
@@ -0,0 +1,232 @@
+// @flow
+import { observer } from "mobx-react";
+import { StarredIcon, PlusIcon } from "outline-icons";
+import * as React from "react";
+import { Link, withRouter, type RouterHistory } from "react-router-dom";
+import styled, { withTheme } from "styled-components";
+import Document from "models/Document";
+import Badge from "components/Badge";
+import Button from "components/Button";
+import DocumentMeta from "components/DocumentMeta";
+import Flex from "components/Flex";
+import Highlight from "components/Highlight";
+import Tooltip from "components/Tooltip";
+import DocumentMenu from "menus/DocumentMenu";
+import { newDocumentUrl } from "utils/routeHelpers";
+
+type Props = {
+  history: RouterHistory,
+  document: Document,
+  highlight?: ?string,
+  context?: ?string,
+  showCollection?: boolean,
+  showPublished?: boolean,
+  showPin?: boolean,
+  showDraft?: boolean,
+  showTemplate?: boolean,
+};
+
+const SEARCH_RESULT_REGEX = /<b\b[^>]*>(.*?)<\/b>/gi;
+
+@observer
+class DocumentPreview extends React.Component<Props> {
+  handleStar = (ev: SyntheticEvent<>) => {
+    ev.preventDefault();
+    ev.stopPropagation();
+    this.props.document.star();
+  };
+
+  handleUnstar = (ev: SyntheticEvent<>) => {
+    ev.preventDefault();
+    ev.stopPropagation();
+    this.props.document.unstar();
+  };
+
+  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");
+  };
+
+  handleNewFromTemplate = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    const { document } = this.props;
+
+    this.props.history.push(
+      newDocumentUrl(document.collectionId, {
+        templateId: document.id,
+      })
+    );
+  };
+
+  render() {
+    const {
+      document,
+      showCollection,
+      showPublished,
+      showPin,
+      showDraft = true,
+      showTemplate,
+      highlight,
+      context,
+    } = this.props;
+
+    const queryIsInTitle =
+      !!highlight &&
+      !!document.title.toLowerCase().includes(highlight.toLowerCase());
+
+    return (
+      <DocumentLink
+        to={{
+          pathname: document.url,
+          state: { title: document.titleWithDefault },
+        }}
+      >
+        <Heading>
+          <Title text={document.titleWithDefault} highlight={highlight} />
+          {!document.isDraft &&
+            !document.isArchived &&
+            !document.isTemplate && (
+              <Actions>
+                {document.isStarred ? (
+                  <StyledStar onClick={this.handleUnstar} solid />
+                ) : (
+                  <StyledStar onClick={this.handleStar} />
+                )}
+              </Actions>
+            )}
+          {document.isDraft && showDraft && (
+            <Tooltip tooltip="Only visible to you" delay={500} placement="top">
+              <Badge>Draft</Badge>
+            </Tooltip>
+          )}
+          {document.isTemplate && showTemplate && (
+            <Badge primary>Template</Badge>
+          )}
+          <SecondaryActions>
+            {document.isTemplate &&
+              !document.isArchived &&
+              !document.isDeleted && (
+                <Button
+                  onClick={this.handleNewFromTemplate}
+                  icon={<PlusIcon />}
+                  neutral
+                >
+                  New doc
+                </Button>
+              )}
+            &nbsp;
+            <DocumentMenu document={document} showPin={showPin} />
+          </SecondaryActions>
+        </Heading>
+
+        {!queryIsInTitle && (
+          <ResultContext
+            text={context}
+            highlight={highlight ? SEARCH_RESULT_REGEX : undefined}
+            processResult={this.replaceResultMarks}
+          />
+        )}
+        <DocumentMeta
+          document={document}
+          showCollection={showCollection}
+          showPublished={showPublished}
+        />
+      </DocumentLink>
+    );
+  }
+}
+
+const StyledStar = withTheme(styled(({ solid, theme, ...props }) => (
+  <StarredIcon color={theme.text} {...props} />
+))`
+  flex-shrink: 0;
+  opacity: ${(props) => (props.solid ? "1 !important" : 0)};
+  transition: all 100ms ease-in-out;
+
+  &:hover {
+    transform: scale(1.1);
+  }
+  &:active {
+    transform: scale(0.95);
+  }
+`);
+
+const SecondaryActions = styled(Flex)`
+  align-items: center;
+  position: absolute;
+  right: 16px;
+  top: 50%;
+  transform: translateY(-50%);
+`;
+
+const DocumentLink = styled(Link)`
+  display: block;
+  margin: 10px -8px;
+  padding: 6px 8px;
+  border-radius: 8px;
+  max-height: 50vh;
+  min-width: 100%;
+  max-width: calc(100vw - 40px);
+  overflow: hidden;
+  position: relative;
+
+  ${SecondaryActions} {
+    opacity: 0;
+  }
+
+  &:hover,
+  &:active,
+  &:focus {
+    background: ${(props) => props.theme.listItemHoverBackground};
+    outline: none;
+
+    ${SecondaryActions} {
+      opacity: 1;
+    }
+
+    ${StyledStar} {
+      opacity: 0.5;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+`;
+
+const Heading = styled.h3`
+  display: flex;
+  align-items: center;
+  height: 24px;
+  margin-top: 0;
+  margin-bottom: 0.25em;
+  overflow: hidden;
+  white-space: nowrap;
+  color: ${(props) => props.theme.text};
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+`;
+
+const Actions = 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 withRouter(DocumentPreview);
@@ -0,0 +1,3 @@
+// @flow
+import DocumentPreview from "./DocumentPreview";
+export default DocumentPreview;
@@ -5,10 +5,10 @@ import { observer, inject } from "mobx-react";
 import * as React from "react";
 import Dropzone from "react-dropzone";
 import { withRouter, type RouterHistory, type Match } from "react-router-dom";
-import styled, { css } from "styled-components";
+import { createGlobalStyle } from "styled-components";
 import DocumentsStore from "stores/DocumentsStore";
-import UiStore from "stores/UiStore";
 import LoadingIndicator from "components/LoadingIndicator";
+import importFile from "utils/importFile";

 const EMPTY_OBJECT = {};
 let importingLock = false;
@@ -17,7 +17,8 @@ type Props = {
  children: React.Node,
  collectionId: string,
  documentId?: string,
-  ui: UiStore,
+  activeClassName?: string,
+  rejectClassName?: string,
  documents: DocumentsStore,
  disabled: boolean,
  location: Object,
@@ -26,6 +27,18 @@ type Props = {
  staticContext: Object,
 };

+export const GlobalStyles = createGlobalStyle`
+  .activeDropZone {
+    border-radius: 4px;
+    background: ${(props) => props.theme.slateDark};
+    svg { fill: ${(props) => props.theme.white}; }
+  }
+
+  .activeDropZone a {
+    color: ${(props) => props.theme.white} !important;
+  }
+`;
+
@observer
 class DropToImport extends React.Component<Props> {
  @observable isImporting: boolean = false;
@@ -48,21 +61,17 @@ class DropToImport extends React.Component<Props> {
      }

      for (const file of files) {
-        const doc = await this.props.documents.import(
+        const doc = await importFile({
+          documents: this.props.documents,
          file,
          documentId,
          collectionId,
-          { publish: true }
-        );
+        });

        if (redirect) {
          this.props.history.push(doc.url);
        }
      }
-    } catch (err) {
-      this.props.ui.showToast(`Could not import file. ${err.message}`, {
-        type: "error",
-      });
    } finally {
      this.isImporting = false;
      importingLock = false;
@@ -70,54 +79,35 @@ class DropToImport extends React.Component<Props> {
  };

  render() {
-    const { documents } = this.props;
+    const {
+      documentId,
+      collectionId,
+      documents,
+      disabled,
+      location,
+      match,
+      history,
+      staticContext,
+      ...rest
+    } = this.props;

    if (this.props.disabled) return this.props.children;

    return (
      <Dropzone
-        accept={documents.importFileTypes.join(", ")}
+        accept="text/markdown, text/plain"
        onDropAccepted={this.onDropAccepted}
        style={EMPTY_OBJECT}
-        noClick
+        disableClick
+        disablePreview
        multiple
+        {...rest}
      >
-        {({
-          getRootProps,
-          getInputProps,
-          isDragActive,
-          isDragAccept,
-          isDragReject,
-        }) => (
-          <DropzoneContainer
-            {...getRootProps()}
-            {...{ isDragActive }}
-            tabIndex="-1"
-          >
-            <input {...getInputProps()} />
-            {this.isImporting && <LoadingIndicator />}
-            {this.props.children}
-          </DropzoneContainer>
-        )}
+        {this.isImporting && <LoadingIndicator />}
+        {this.props.children}
      </Dropzone>
    );
  }
 }

-const DropzoneContainer = styled("div")`
-  border-radius: 4px;
-
-  ${({ isDragActive, theme }) =>
-    isDragActive &&
-    css`
-      background: ${theme.slateDark};
-      a {
-        color: ${theme.white} !important;
-      }
-      svg {
-        fill: ${theme.white};
-      }
-    `}
-`;
-
-export default inject("documents", "ui")(withRouter(DropToImport));
+export default inject("documents")(withRouter(DropToImport));
@@ -0,0 +1,286 @@
+// @flow
+import invariant from "invariant";
+import { observable } from "mobx";
+import { observer } from "mobx-react";
+import { MoreIcon } from "outline-icons";
+import { rgba } from "polished";
+import * as React from "react";
+import { PortalWithState } from "react-portal";
+import styled from "styled-components";
+import { fadeAndScaleIn } from "shared/styles/animations";
+import Flex from "components/Flex";
+import NudeButton from "components/NudeButton";
+
+let previousClosePortal;
+let counter = 0;
+
+type Children =
+  | React.Node
+  | ((options: { closePortal: () => void }) => React.Node);
+
+type Props = {
+  label?: React.Node,
+  onOpen?: () => void,
+  onClose?: () => void,
+  children?: Children,
+  className?: string,
+  hover?: boolean,
+  style?: Object,
+  position?: "left" | "right" | "center",
+};
+
+@observer
+class DropdownMenu extends React.Component<Props> {
+  id: string = `menu${counter++}`;
+  closeTimeout: TimeoutID;
+
+  @observable top: ?number;
+  @observable bottom: ?number;
+  @observable right: ?number;
+  @observable left: ?number;
+  @observable position: "left" | "right" | "center";
+  @observable fixed: ?boolean;
+  @observable bodyRect: ClientRect;
+  @observable labelRect: ClientRect;
+  @observable dropdownRef: { current: null | HTMLElement } = React.createRef();
+  @observable menuRef: { current: null | HTMLElement } = React.createRef();
+
+  handleOpen = (
+    openPortal: (SyntheticEvent<>) => void,
+    closePortal: () => void
+  ) => {
+    return (ev: SyntheticMouseEvent<HTMLElement>) => {
+      ev.preventDefault();
+      const currentTarget = ev.currentTarget;
+      invariant(document.body, "why you not here");
+
+      if (currentTarget instanceof HTMLDivElement) {
+        this.bodyRect = document.body.getBoundingClientRect();
+        this.labelRect = currentTarget.getBoundingClientRect();
+        this.top = this.labelRect.bottom - this.bodyRect.top;
+        this.bottom = undefined;
+        this.position = this.props.position || "left";
+
+        if (currentTarget.parentElement) {
+          const triggerParentStyle = getComputedStyle(
+            currentTarget.parentElement
+          );
+
+          if (triggerParentStyle.position === "static") {
+            this.fixed = true;
+            this.top = this.labelRect.bottom;
+          }
+        }
+
+        this.initPosition();
+
+        // attempt to keep only one flyout menu open at once
+        if (previousClosePortal && !this.props.hover) {
+          previousClosePortal();
+        }
+        previousClosePortal = closePortal;
+        openPortal(ev);
+      }
+    };
+  };
+
+  initPosition() {
+    if (this.position === "left") {
+      this.right =
+        this.bodyRect.width - this.labelRect.left - this.labelRect.width;
+    } else if (this.position === "center") {
+      this.left = this.labelRect.left + this.labelRect.width / 2;
+    } else {
+      this.left = this.labelRect.left;
+    }
+  }
+
+  onOpen = () => {
+    if (typeof this.props.onOpen === "function") {
+      this.props.onOpen();
+    }
+    this.fitOnTheScreen();
+  };
+
+  fitOnTheScreen() {
+    if (!this.dropdownRef || !this.dropdownRef.current) return;
+    const el = this.dropdownRef.current;
+
+    const sticksOutPastBottomEdge =
+      el.clientHeight + this.top > window.innerHeight;
+    if (sticksOutPastBottomEdge) {
+      this.top = undefined;
+      this.bottom = this.fixed ? 0 : -1 * window.pageYOffset;
+    } else {
+      this.bottom = undefined;
+    }
+
+    if (this.position === "left" || this.position === "right") {
+      const totalWidth =
+        Math.sign(this.position === "left" ? -1 : 1) * el.offsetLeft +
+        el.scrollWidth;
+      const isVisible = totalWidth < window.innerWidth;
+
+      if (!isVisible) {
+        if (this.position === "right") {
+          this.position = "left";
+          this.left = undefined;
+        } else if (this.position === "left") {
+          this.position = "right";
+          this.right = undefined;
+        }
+      }
+    }
+
+    this.initPosition();
+    this.forceUpdate();
+  }
+
+  closeAfterTimeout = (closePortal: () => void) => () => {
+    if (this.closeTimeout) {
+      clearTimeout(this.closeTimeout);
+    }
+    this.closeTimeout = setTimeout(closePortal, 500);
+  };
+
+  clearCloseTimeout = () => {
+    if (this.closeTimeout) {
+      clearTimeout(this.closeTimeout);
+    }
+  };
+
+  render() {
+    const { className, hover, label, children } = this.props;
+
+    return (
+      <div className={className}>
+        <PortalWithState
+          onOpen={this.onOpen}
+          onClose={this.props.onClose}
+          closeOnOutsideClick
+          closeOnEsc
+        >
+          {({ closePortal, openPortal, isOpen, portal }) => (
+            <>
+              <Label
+                onMouseMove={hover ? this.clearCloseTimeout : undefined}
+                onMouseOut={
+                  hover ? this.closeAfterTimeout(closePortal) : undefined
+                }
+                onMouseEnter={
+                  hover ? this.handleOpen(openPortal, closePortal) : undefined
+                }
+                onClick={
+                  hover ? undefined : this.handleOpen(openPortal, closePortal)
+                }
+              >
+                {label || (
+                  <NudeButton
+                    id={`${this.id}button`}
+                    aria-haspopup="true"
+                    aria-expanded={isOpen ? "true" : "false"}
+                    aria-controls={this.id}
+                  >
+                    <MoreIcon />
+                  </NudeButton>
+                )}
+              </Label>
+              {portal(
+                <Position
+                  ref={this.dropdownRef}
+                  position={this.position}
+                  fixed={this.fixed}
+                  top={this.top}
+                  bottom={this.bottom}
+                  left={this.left}
+                  right={this.right}
+                >
+                  <Menu
+                    ref={this.menuRef}
+                    onMouseMove={hover ? this.clearCloseTimeout : undefined}
+                    onMouseOut={
+                      hover ? this.closeAfterTimeout(closePortal) : undefined
+                    }
+                    onClick={
+                      typeof children === "function"
+                        ? undefined
+                        : (ev) => {
+                            ev.stopPropagation();
+                            closePortal();
+                          }
+                    }
+                    style={this.props.style}
+                    id={this.id}
+                    aria-labelledby={`${this.id}button`}
+                    role="menu"
+                  >
+                    {typeof children === "function"
+                      ? children({ closePortal })
+                      : children}
+                  </Menu>
+                </Position>
+              )}
+            </>
+          )}
+        </PortalWithState>
+      </div>
+    );
+  }
+}
+
+const Label = styled(Flex).attrs({
+  justify: "center",
+  align: "center",
+})`
+  z-index: ${(props) => props.theme.depths.menu};
+  cursor: pointer;
+`;
+
+const Position = styled.div`
+  position: ${({ fixed }) => (fixed ? "fixed" : "absolute")};
+  display: flex;
+  ${({ left }) => (left !== undefined ? `left: ${left}px` : "")};
+  ${({ right }) => (right !== undefined ? `right: ${right}px` : "")};
+  ${({ top }) => (top !== undefined ? `top: ${top}px` : "")};
+  ${({ bottom }) => (bottom !== undefined ? `bottom: ${bottom}px` : "")};
+  max-height: 75%;
+  z-index: ${(props) => props.theme.depths.menu};
+  transform: ${(props) =>
+    props.position === "center" ? "translateX(-50%)" : "initial"};
+  pointer-events: none;
+`;
+
+const Menu = styled.div`
+  animation: ${fadeAndScaleIn} 200ms ease;
+  transform-origin: ${(props) => (props.left !== undefined ? "25%" : "75%")} 0;
+  backdrop-filter: blur(10px);
+  background: ${(props) => rgba(props.theme.menuBackground, 0.8)};
+  border: ${(props) =>
+    props.theme.menuBorder ? `1px solid ${props.theme.menuBorder}` : "none"};
+  border-radius: 2px;
+  padding: 0.5em 0;
+  min-width: 180px;
+  overflow: hidden;
+  overflow-y: auto;
+  box-shadow: ${(props) => props.theme.menuShadow};
+  pointer-events: all;
+
+  hr {
+    margin: 0.5em 12px;
+  }
+
+  @media print {
+    display: none;
+  }
+`;
+
+export 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 DropdownMenu;
@@ -1,62 +1,50 @@
 // @flow
 import { CheckmarkIcon } from "outline-icons";
 import * as React from "react";
-import { MenuItem as BaseMenuItem } from "reakit/Menu";
 import styled from "styled-components";

-type Props = {|
+type Props = {
  onClick?: (SyntheticEvent<>) => void | Promise<void>,
  children?: React.Node,
  selected?: boolean,
  disabled?: boolean,
-  to?: string,
-  href?: string,
-  target?: "_blank",
-  as?: string | React.ComponentType<*>,
-|};
+};

-const MenuItem = ({
+const DropdownMenuItem = ({
  onClick,
  children,
  selected,
  disabled,
-  as,
  ...rest
 }: Props) => {
  return (
-    <BaseMenuItem
+    <MenuItem
      onClick={disabled ? undefined : onClick}
      disabled={disabled}
+      role="menuitem"
+      tabIndex="-1"
      {...rest}
    >
-      {(props) => (
-        <MenuAnchor as={onClick ? "button" : as} {...props}>
-          {selected !== undefined && (
-            <>
-              {selected ? <CheckmarkIcon /> : <Spacer />}
-              &nbsp;
-            </>
-          )}
-          {children}
-        </MenuAnchor>
+      {selected !== undefined && (
+        <>
+          <CheckmarkIcon
+            color={selected === false ? "transparent" : undefined}
+          />
+          &nbsp;
+        </>
      )}
-    </BaseMenuItem>
+      {children}
+    </MenuItem>
  );
 };

-const Spacer = styled.div`
-  width: 24px;
-  height: 24px;
-`;
-
-export const MenuAnchor = styled.a`
+const MenuItem = styled.a`
  display: flex;
  margin: 0;
-  border: 0;
  padding: 6px 12px;
  width: 100%;
  min-height: 32px;
-  background: none;
+
  color: ${(props) =>
    props.disabled ? props.theme.textTertiary : props.theme.textSecondary};
  justify-content: left;
@@ -70,7 +58,6 @@ export const MenuAnchor = styled.a`
  }

  svg {
-    flex-shrink: 0;
    opacity: ${(props) => (props.disabled ? ".5" : 1)};
  }

@@ -79,8 +66,7 @@ export const MenuAnchor = styled.a`
      ? "pointer-events: none;"
      : `

-  &:hover,
-  &.focus-visible {
+  &:hover {
    color: ${props.theme.white};
    background: ${props.theme.primary};
    box-shadow: none;
@@ -94,8 +80,9 @@ export const MenuAnchor = styled.a`
  &:focus {
    color: ${props.theme.white};
    background: ${props.theme.primary};
+    outline: none;
  }
  `};
 `;

-export default MenuItem;
+export default DropdownMenuItem;
@@ -0,0 +1,3 @@
+// @flow
+export { default as DropdownMenu, Header } from "./DropdownMenu";
+export { default as DropdownMenuItem } from "./DropdownMenuItem";
@@ -1,175 +1,87 @@
 // @flow
 import { lighten } from "polished";
 import * as React from "react";
-import { useTranslation } from "react-i18next";
 import { withRouter, type RouterHistory } from "react-router-dom";
 import styled, { withTheme } from "styled-components";
 import UiStore from "stores/UiStore";
 import ErrorBoundary from "components/ErrorBoundary";
 import Tooltip from "components/Tooltip";
 import embeds from "../embeds";
-import { isModKey } from "utils/keyboard";
+import isInternalUrl from "utils/isInternalUrl";
 import { uploadFile } from "utils/uploadFile";
-import { isInternalUrl } from "utils/urls";

 const RichMarkdownEditor = React.lazy(() => import("rich-markdown-editor"));

 const EMPTY_ARRAY = [];

-export type Props = {|
+type Props = {
  id?: string,
-  value?: string,
  defaultValue?: string,
  readOnly?: boolean,
  grow?: boolean,
  disableEmbeds?: boolean,
  ui?: UiStore,
-  autoFocus?: boolean,
-  template?: boolean,
-  placeholder?: string,
-  scrollTo?: string,
-  readOnlyWriteCheckboxes?: boolean,
-  onBlur?: (event: SyntheticEvent<>) => any,
-  onFocus?: (event: SyntheticEvent<>) => any,
-  onPublish?: (event: SyntheticEvent<>) => any,
-  onSave?: ({ done?: boolean, autosave?: boolean, publish?: boolean }) => any,
-  onCancel?: () => any,
-  onChange?: (getValue: () => string) => any,
-  onSearchLink?: (title: string) => any,
-  onHoverLink?: (event: MouseEvent) => any,
-  onCreateLink?: (title: string) => Promise<string>,
-  onImageUploadStart?: () => any,
-  onImageUploadStop?: () => any,
-|};
+};

 type PropsWithRef = Props & {
  forwardedRef: React.Ref<any>,
  history: RouterHistory,
 };

-function Editor(props: PropsWithRef) {
-  const { id, ui, history } = props;
-  const { t } = useTranslation();
+class Editor extends React.Component<PropsWithRef> {
+  onUploadImage = async (file: File) => {
+    const result = await uploadFile(file, { documentId: this.props.id });
+    return result.url;
+  };

-  const onUploadImage = React.useCallback(
-    async (file: File) => {
-      const result = await uploadFile(file, { documentId: id });
-      return result.url;
-    },
-    [id]
-  );
+  onClickLink = (href: string) => {
+    // on page hash
+    if (href[0] === "#") {
+      window.location.href = href;
+      return;
+    }

-  const onClickLink = React.useCallback(
-    (href: string, event: MouseEvent) => {
-      // on page hash
-      if (href[0] === "#") {
-        window.location.href = href;
-        return;
-      }
+    if (isInternalUrl(href)) {
+      // relative
+      let navigateTo = href;

-      if (isInternalUrl(href) && !isModKey(event) && !event.shiftKey) {
-        // relative
-        let navigateTo = href;
-
-        // probably absolute
-        if (href[0] !== "/") {
-          try {
-            const url = new URL(href);
-            navigateTo = url.pathname + url.hash;
-          } catch (err) {
-            navigateTo = href;
-          }
+      // probably absolute
+      if (href[0] !== "/") {
+        try {
+          const url = new URL(href);
+          navigateTo = url.pathname + url.hash;
+        } catch (err) {
+          navigateTo = href;
        }
-
-        history.push(navigateTo);
-      } else if (href) {
-        window.open(href, "_blank");
      }
-    },
-    [history]
-  );

-  const onShowToast = React.useCallback(
-    (message: string) => {
-      if (ui) {
-        ui.showToast(message);
-      }
-    },
-    [ui]
-  );
+      this.props.history.push(navigateTo);
+    } else {
+      window.open(href, "_blank");
+    }
+  };

-  const dictionary = React.useMemo(() => {
-    return {
-      addColumnAfter: t("Insert column after"),
-      addColumnBefore: t("Insert column before"),
-      addRowAfter: t("Insert row after"),
-      addRowBefore: t("Insert row before"),
-      alignCenter: t("Align center"),
-      alignLeft: t("Align left"),
-      alignRight: t("Align right"),
-      bulletList: t("Bulleted list"),
-      checkboxList: t("Todo list"),
-      codeBlock: t("Code block"),
-      codeCopied: t("Copied to clipboard"),
-      codeInline: t("Code"),
-      createLink: t("Create link"),
-      createLinkError: t("Sorry, an error occurred creating the link"),
-      createNewDoc: t("Create a new doc"),
-      deleteColumn: t("Delete column"),
-      deleteRow: t("Delete row"),
-      deleteTable: t("Delete table"),
-      em: t("Italic"),
-      embedInvalidLink: t("Sorry, that link won’t work for this embed type"),
-      findOrCreateDoc: `${t("Find or create a doc")}…`,
-      h1: t("Big heading"),
-      h2: t("Medium heading"),
-      h3: t("Small heading"),
-      heading: t("Heading"),
-      hr: t("Divider"),
-      image: t("Image"),
-      imageUploadError: t("Sorry, an error occurred uploading the image"),
-      info: t("Info"),
-      infoNotice: t("Info notice"),
-      link: t("Link"),
-      linkCopied: t("Link copied to clipboard"),
-      mark: t("Highlight"),
-      newLineEmpty: `${t("Type '/' to insert")}…`,
-      newLineWithSlash: `${t("Keep typing to filter")}…`,
-      noResults: t("No results"),
-      openLink: t("Open link"),
-      orderedList: t("Ordered list"),
-      pasteLink: `${t("Paste a link")}…`,
-      pasteLinkWithTitle: (service: string) =>
-        t("Paste a {{service}} link…", { service }),
-      placeholder: t("Placeholder"),
-      quote: t("Quote"),
-      removeLink: t("Remove link"),
-      searchOrPasteLink: `${t("Search or paste a link")}…`,
-      strikethrough: t("Strikethrough"),
-      strong: t("Bold"),
-      subheading: t("Subheading"),
-      table: t("Table"),
-      tip: t("Tip"),
-      tipNotice: t("Tip notice"),
-      warning: t("Warning"),
-      warningNotice: t("Warning notice"),
-    };
-  }, [t]);
+  onShowToast = (message: string) => {
+    if (this.props.ui) {
+      this.props.ui.showToast(message);
+    }
+  };

-  return (
-    <ErrorBoundary reloadOnChunkMissing>
-      <StyledEditor
-        ref={props.forwardedRef}
-        uploadImage={onUploadImage}
-        onClickLink={onClickLink}
-        onShowToast={onShowToast}
-        embeds={props.disableEmbeds ? EMPTY_ARRAY : embeds}
-        tooltip={EditorTooltip}
-        dictionary={dictionary}
-        {...props}
-      />
-    </ErrorBoundary>
-  );
+  render() {
+    return (
+      <ErrorBoundary reloadOnChunkMissing>
+        <StyledEditor
+          ref={this.props.forwardedRef}
+          uploadImage={this.onUploadImage}
+          onClickLink={this.onClickLink}
+          onShowToast={this.onShowToast}
+          embeds={this.props.disableEmbeds ? EMPTY_ARRAY : embeds}
+          tooltip={EditorTooltip}
+          {...this.props}
+        />
+      </ErrorBoundary>
+    );
+  }
 }

 const StyledEditor = styled(RichMarkdownEditor)`
@@ -180,36 +92,11 @@ const StyledEditor = styled(RichMarkdownEditor)`
    transition: ${(props) => props.theme.backgroundTransition};
  }

-  & * {
-    box-sizing: content-box;
-  }
-
  .notice-block.tip,
  .notice-block.warning {
    font-weight: 500;
  }

-  .heading-anchor {
-    box-sizing: border-box;
-  }
-
-  .heading-name {
-    pointer-events: none;
-    display: block;
-    position: relative;
-    top: -60px;
-    visibility: hidden;
-  }
-
-  .heading-name:first-child {
-    & + h1,
-    & + h2,
-    & + h3,
-    & + h4 {
-      margin-top: 0;
-    }
-  }
-
  p {
    a {
      color: ${(props) => props.theme.text};
@@ -1,5 +1,4 @@
 // @flow
-import * as Sentry from "@sentry/react";
 import { observable } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
@@ -37,8 +36,8 @@ class ErrorBoundary extends React.Component<Props> {
      return;
    }

-    if (env.SENTRY_DSN) {
-      Sentry.captureException(error);
+    if (window.Sentry) {
+      window.Sentry.captureException(error);
    }
  }

@@ -56,26 +55,7 @@ class ErrorBoundary extends React.Component<Props> {

  render() {
    if (this.error) {
-      const error = this.error;
-      const isReported = !!env.SENTRY_DSN && env.DEPLOYMENT === "hosted";
-      const isChunkError = this.error.message.match(/chunk/);
-
-      if (isChunkError) {
-        return (
-          <CenteredContent>
-            <PageTitle title="Module failed to load" />
-            <h1>Loading Failed</h1>
-            <HelpText>
-              Sorry, part of the application failed to load. This may be because
-              it was updated since you opened the tab or because of a failed
-              network request. Please try reloading.
-            </HelpText>
-            <p>
-              <Button onClick={this.handleReload}>Reload</Button>
-            </p>
-          </CenteredContent>
-        );
-      }
+      const isReported = !!window.Sentry && env.DEPLOYMENT === "hosted";

      return (
        <CenteredContent>
@@ -86,7 +66,7 @@ class ErrorBoundary extends React.Component<Props> {
            {isReported && " – our engineers have been notified"}. Please try
            reloading the page, it may have been a temporary glitch.
          </HelpText>
-          {this.showDetails && <Pre>{error.toString()}</Pre>}
+          {this.showDetails && <Pre>{this.error.toString()}</Pre>}
          <p>
            <Button onClick={this.handleReload}>Reload</Button>{" "}
            {this.showDetails ? (
@@ -1,21 +0,0 @@
-// @flow
-
-import * as React from "react";
-
-type Props = {
-  children: React.Node,
-  className?: string,
-};
-
-export default function EventBoundary({ children, className }: Props) {
-  const handleClick = React.useCallback((event: SyntheticEvent<>) => {
-    event.preventDefault();
-    event.stopPropagation();
-  }, []);
-
-  return (
-    <span onClick={handleClick} className={className}>
-      {children}
-    </span>
-  );
-}
@@ -7,11 +7,8 @@ const Heading = styled.h1`
  ${(props) => (props.centered ? "text-align: center;" : "")}

  svg {
-    margin-top: 4px;
    margin-left: -6px;
    margin-right: 2px;
-    align-self: flex-start;
-    flex-shrink: 0;
  }
 `;

@@ -18,7 +18,6 @@ function Highlight({
  ...rest
 }: Props) {
  let regex;
-  let index = 0;
  if (highlight instanceof RegExp) {
    regex = highlight;
  } else {
@@ -30,10 +29,8 @@ function Highlight({
  return (
    <span {...rest}>
      {highlight
-        ? replace(text, regex, (tag) => (
-            <Mark key={index++}>
-              {processResult ? processResult(tag) : tag}
-            </Mark>
+        ? replace(text, regex, (tag, index) => (
+            <Mark key={index}>{processResult ? processResult(tag) : tag}</Mark>
          ))
        : text}
    </span>
@@ -41,7 +38,7 @@ function Highlight({
 }

 const Mark = styled.mark`
-  background: ${(props) => props.theme.searchHighlight};
+  background: ${(props) => props.theme.yellow};
  border-radius: 2px;
  padding: 0 4px;
 `;
@@ -5,10 +5,10 @@ import * as React from "react";
 import { Portal } from "react-portal";
 import styled from "styled-components";
 import { fadeAndSlideIn } from "shared/styles/animations";
-import parseDocumentSlug from "shared/utils/parseDocumentSlug";
+import { parseDocumentSlugFromUrl } from "shared/utils/parseDocumentSlug";
 import DocumentsStore from "stores/DocumentsStore";
 import HoverPreviewDocument from "components/HoverPreviewDocument";
-import { isInternalUrl } from "utils/urls";
+import isInternalUrl from "utils/isInternalUrl";

 const DELAY_OPEN = 300;
 const DELAY_CLOSE = 300;
@@ -20,8 +20,13 @@ type Props = {
  onClose: () => void,
 };

-function HoverPreviewInternal({ node, documents, onClose, event }: Props) {
-  const slug = parseDocumentSlug(node.href);
+function HoverPreview({ node, documents, onClose, event }: Props) {
+  // previews only work for internal doc links for now
+  if (!isInternalUrl(node.href)) {
+    return null;
+  }
+
+  const slug = parseDocumentSlugFromUrl(node.href);

  const [isVisible, setVisible] = React.useState(false);
  const timerClose = React.useRef();
@@ -126,15 +131,6 @@ function HoverPreviewInternal({ node, documents, onClose, event }: Props) {
  );
 }

-function HoverPreview({ node, ...rest }: Props) {
-  // previews only work for internal doc links for now
-  if (!isInternalUrl(node.href)) {
-    return null;
-  }
-
-  return <HoverPreviewInternal {...rest} node={node} />;
-}
-
 const Animate = styled.div`
  animation: ${fadeAndSlideIn} 150ms ease;

@@ -215,7 +211,6 @@ const Pointer = styled.div`
  height: 22px;
  position: absolute;
  transform: translateX(-50%);
-  pointer-events: none;

  &:before,
  &:after {
@@ -1,21 +1,21 @@
 // @flow
-import { observer } from "mobx-react";
+import { inject, observer } from "mobx-react";
 import * as React from "react";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
-import parseDocumentSlug from "shared/utils/parseDocumentSlug";
+import { parseDocumentSlugFromUrl } from "shared/utils/parseDocumentSlug";
+import DocumentsStore from "stores/DocumentsStore";
 import DocumentMetaWithViews from "components/DocumentMetaWithViews";
 import Editor from "components/Editor";
-import useStores from "hooks/useStores";

 type Props = {
  url: string,
+  documents: DocumentsStore,
  children: (React.Node) => React.Node,
 };

-function HoverPreviewDocument({ url, children }: Props) {
-  const { documents } = useStores();
-  const slug = parseDocumentSlug(url);
+function HoverPreviewDocument({ url, documents, children }: Props) {
+  const slug = parseDocumentSlugFromUrl(url);

  documents.prefetchDocument(slug, {
    prefetch: true,
@@ -50,4 +50,4 @@ const Heading = styled.h2`
  color: ${(props) => props.theme.text};
 `;

-export default observer(HoverPreviewDocument);
+export default inject("documents")(observer(HoverPreviewDocument));
@@ -1,4 +1,6 @@
 // @flow
+import { observable } from "mobx";
+import { observer } from "mobx-react";
 import {
  CollectionIcon,
  CoinsIcon,
@@ -20,17 +22,13 @@ import {
  VehicleIcon,
 } from "outline-icons";
 import * as React from "react";
-import { useTranslation } from "react-i18next";
-import { useMenuState, MenuButton, MenuItem } from "reakit/Menu";
 import styled from "styled-components";
-import ContextMenu from "components/ContextMenu";
+import { DropdownMenu } from "components/DropdownMenu";
 import Flex from "components/Flex";
 import HelpText from "components/HelpText";
 import { LabelText } from "components/Input";
 import NudeButton from "components/NudeButton";

-const style = { width: 30, height: 30 };
-
 const TwitterPicker = React.lazy(() =>
  import("react-color/lib/components/twitter/Twitter")
 );
@@ -123,77 +121,105 @@ const colors = [
  "#2F362F",
 ];

-type Props = {|
+type Props = {
  onOpen?: () => void,
  onChange: (color: string, icon: string) => void,
  icon: string,
  color: string,
-|};
+};

-function IconPicker({ onOpen, icon, color, onChange }: Props) {
-  const { t } = useTranslation();
-  const menu = useMenuState({
-    modal: true,
-    placement: "bottom-end",
-  });
-  const Component = icons[icon || "collection"].component;
-
-  return (
-    <Wrapper>
-      <Label>
-        <LabelText>{t("Icon")}</LabelText>
-      </Label>
-      <MenuButton {...menu}>
-        {(props) => (
-          <Button aria-label={t("Show menu")} {...props}>
-            <Component color={color} size={30} />
-          </Button>
-        )}
-      </MenuButton>
-      <ContextMenu {...menu} onOpen={onOpen} aria-label={t("Choose icon")}>
-        <Icons>
-          {Object.keys(icons).map((name) => {
-            const Component = icons[name].component;
-            return (
-              <MenuItem
-                key={name}
-                onClick={() => onChange(color, name)}
-                {...menu}
-              >
-                {(props) => (
-                  <IconButton style={style} {...props}>
-                    <Component color={color} size={30} />
-                  </IconButton>
-                )}
-              </MenuItem>
-            );
-          })}
-        </Icons>
-        <Flex>
-          <React.Suspense fallback={<Loading>{t("Loading")}…</Loading>}>
-            <ColorPicker
-              color={color}
-              onChange={(color) => onChange(color.hex, icon)}
-              colors={colors}
-              triangle="hide"
-            />
-          </React.Suspense>
-        </Flex>
-      </ContextMenu>
-    </Wrapper>
-  );
+function preventEventBubble(event) {
+  event.stopPropagation();
 }

-const Label = styled.label`
-  display: block;
-`;
+@observer
+class IconPicker extends React.Component<Props> {
+  @observable isOpen: boolean = false;
+  node: ?HTMLElement;
+
+  componentDidMount() {
+    window.addEventListener("click", this.handleClickOutside);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener("click", this.handleClickOutside);
+  }
+
+  handleClose = () => {
+    this.isOpen = false;
+  };
+
+  handleOpen = () => {
+    this.isOpen = true;
+
+    if (this.props.onOpen) {
+      this.props.onOpen();
+    }
+  };
+
+  handleClickOutside = (ev: SyntheticMouseEvent<>) => {
+    // $FlowFixMe
+    if (ev.target && this.node && this.node.contains(ev.target)) {
+      return;
+    }
+
+    this.handleClose();
+  };
+
+  render() {
+    const Component = icons[this.props.icon || "collection"].component;
+
+    return (
+      <Wrapper ref={(ref) => (this.node = ref)}>
+        <label>
+          <LabelText>Icon</LabelText>
+        </label>
+        <DropdownMenu
+          onOpen={this.handleOpen}
+          label={
+            <LabelButton>
+              <Component role="button" color={this.props.color} size={30} />
+            </LabelButton>
+          }
+        >
+          <Icons onClick={preventEventBubble}>
+            {Object.keys(icons).map((name) => {
+              const Component = icons[name].component;
+              return (
+                <IconButton
+                  key={name}
+                  onClick={() => this.props.onChange(this.props.color, name)}
+                  style={{ width: 30, height: 30 }}
+                >
+                  <Component color={this.props.color} size={30} />
+                </IconButton>
+              );
+            })}
+          </Icons>
+          <Flex onClick={preventEventBubble}>
+            <React.Suspense fallback={<Loading>Loading…</Loading>}>
+              <ColorPicker
+                color={this.props.color}
+                onChange={(color) =>
+                  this.props.onChange(color.hex, this.props.icon)
+                }
+                colors={colors}
+                triangle="hide"
+              />
+            </React.Suspense>
+          </Flex>
+        </DropdownMenu>
+      </Wrapper>
+    );
+  }
+}

 const Icons = styled.div`
  padding: 15px 9px 9px 15px;
  width: 276px;
 `;

-const Button = styled(NudeButton)`
+const LabelButton = styled(NudeButton)`
  border: 1px solid ${(props) => props.theme.inputBorder};
  width: 32px;
  height: 32px;
@@ -1,15 +0,0 @@
-// @flow
-import * as React from "react";
-import { cdnPath } from "utils/urls";
-
-type Props = {|
-  alt: string,
-  src: string,
-  title?: string,
-  width?: number,
-  height?: number,
-|};
-
-export default function Image({ src, alt, ...rest }: Props) {
-  return <img src={cdnPath(src)} alt={alt} {...rest} />;
-}
@@ -2,9 +2,9 @@
 import { observable } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
-import { VisuallyHidden } from "reakit/VisuallyHidden";
 import styled from "styled-components";
 import Flex from "components/Flex";
+import VisuallyHidden from "components/VisuallyHidden";

 const RealTextarea = styled.textarea`
  border: 0;
@@ -33,6 +33,10 @@ const RealInput = styled.input`
  &::placeholder {
    color: ${(props) => props.theme.placeholder};
  }
+
+  &::-webkit-search-cancel-button {
+    -webkit-appearance: searchfield-cancel-button;
+  }
 `;

 const Wrapper = styled.div`
@@ -75,8 +79,8 @@ export const LabelText = styled.div`
  display: inline-block;
 `;

-export type Props = {|
-  type?: "text" | "email" | "checkbox" | "search",
+export type Props = {
+  type?: string,
  value?: string,
  label?: string,
  className?: string,
@@ -85,18 +89,9 @@ export type Props = {|
  short?: boolean,
  margin?: string | number,
  icon?: React.Node,
-  name?: string,
-  minLength?: number,
-  maxLength?: number,
-  autoFocus?: boolean,
-  autoComplete?: boolean | string,
-  readOnly?: boolean,
-  required?: boolean,
-  placeholder?: string,
-  onChange?: (ev: SyntheticInputEvent<HTMLInputElement>) => mixed,
  onFocus?: (ev: SyntheticEvent<>) => void,
  onBlur?: (ev: SyntheticEvent<>) => void,
-|};
+};

@observer
 class Input extends React.Component<Props> {
@@ -8,13 +8,13 @@ import Editor from "components/Editor";
 import HelpText from "components/HelpText";
 import { LabelText, Outline } from "components/Input";

-type Props = {|
+type Props = {
  label: string,
  minHeight?: number,
  maxHeight?: number,
  readOnly?: boolean,
  ui: UiStore,
-|};
+};

@observer
 class InputRich extends React.Component<Props> {
@@ -3,24 +3,17 @@ import { observable } from "mobx";
 import { observer } from "mobx-react";
 import { SearchIcon } from "outline-icons";
 import * as React from "react";
-import { withTranslation, type TFunction } from "react-i18next";
 import keydown from "react-keydown";
 import { withRouter, type RouterHistory } from "react-router-dom";
 import styled, { withTheme } from "styled-components";
 import Input from "./Input";
-import { type Theme } from "types";
-import { meta } from "utils/keyboard";
 import { searchUrl } from "utils/routeHelpers";

 type Props = {
  history: RouterHistory,
-  theme: Theme,
-  source: string,
+  theme: Object,
  placeholder?: string,
-  label?: string,
-  labelHidden?: boolean,
  collectionId?: string,
-  t: TFunction,
 };

@observer
@@ -28,8 +21,8 @@ class InputSearch extends React.Component<Props> {
  input: ?Input;
  @observable focused: boolean = false;

-  @keydown(`${meta}+f`)
-  focus(ev: SyntheticEvent<>) {
+  @keydown("meta+f")
+  focus(ev) {
    ev.preventDefault();

    if (this.input) {
@@ -37,13 +30,10 @@ class InputSearch extends React.Component<Props> {
    }
  }

-  handleSearchInput = (ev: SyntheticInputEvent<>) => {
+  handleSearchInput = (ev) => {
    ev.preventDefault();
    this.props.history.push(
-      searchUrl(ev.target.value, {
-        collectionId: this.props.collectionId,
-        ref: this.props.source,
-      })
+      searchUrl(ev.target.value, this.props.collectionId)
    );
  };

@@ -56,8 +46,7 @@ class InputSearch extends React.Component<Props> {
  };

  render() {
-    const { t } = this.props;
-    const { theme, placeholder = `${t("Search")}…` } = this.props;
+    const { theme, placeholder = "Search…" } = this.props;

    return (
      <InputMaxWidth
@@ -70,8 +59,6 @@ class InputSearch extends React.Component<Props> {
            color={this.focused ? theme.inputBorderFocused : theme.inputBorder}
          />
        }
-        label={this.props.label}
-        labelHidden={this.props.labelHidden}
        onFocus={this.handleFocus}
        onBlur={this.handleBlur}
        margin={0}
@@ -84,6 +71,4 @@ const InputMaxWidth = styled(Input)`
  max-width: 30vw;
 `;

-export default withTranslation()<InputSearch>(
-  withTheme(withRouter(InputSearch))
-);
+export default withTheme(withRouter(InputSearch));
@@ -2,19 +2,17 @@
 import { observable } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
-import { VisuallyHidden } from "reakit/VisuallyHidden";
 import styled from "styled-components";
+import VisuallyHidden from "components/VisuallyHidden";
 import { Outline, LabelText } from "./Input";

 const Select = styled.select`
  border: 0;
  flex: 1;
-  padding: 4px 0;
-  margin: 0 12px;
+  padding: 8px 12px;
  outline: none;
  background: none;
  color: ${(props) => props.theme.text};
-  height: 30px;

  &:disabled,
  &::placeholder {
@@ -22,22 +20,14 @@ const Select = styled.select`
  }
 `;

-const Wrapper = styled.label`
-  display: block;
-  max-width: ${(props) => (props.short ? "350px" : "100%")};
-`;
-
 type Option = { label: string, value: string };

 export type Props = {
  value?: string,
  label?: string,
-  short?: boolean,
  className?: string,
  labelHidden?: boolean,
  options: Option[],
-  onBlur?: () => void,
-  onFocus?: () => void,
 };

@observer
@@ -53,19 +43,12 @@ class InputSelect extends React.Component<Props> {
  };

  render() {
-    const {
-      label,
-      className,
-      labelHidden,
-      options,
-      short,
-      ...rest
-    } = this.props;
+    const { label, className, labelHidden, options, ...rest } = this.props;

    const wrappedLabel = <LabelText>{label}</LabelText>;

    return (
-      <Wrapper short={short}>
+      <label>
        {label &&
          (labelHidden ? (
            <VisuallyHidden>{wrappedLabel}</VisuallyHidden>
@@ -81,7 +64,7 @@ class InputSelect extends React.Component<Props> {
            ))}
          </Select>
        </Outline>
-      </Wrapper>
+      </label>
    );
  }
 }
@@ -4,10 +4,10 @@ import * as React from "react";
 import styled from "styled-components";
 import Flex from "components/Flex";

-type Props = {|
+type Props = {
  label: React.Node | string,
  children: React.Node,
-|};
+};

 const Labeled = ({ label, children, ...props }: Props) => (
  <Flex column {...props}>
@@ -1,101 +0,0 @@
-// @flow
-import { find } from "lodash";
-import * as React from "react";
-import { Trans, useTranslation } from "react-i18next";
-import styled from "styled-components";
-import { languages, languageOptions } from "shared/i18n";
-import ButtonLink from "components/ButtonLink";
-import Flex from "components/Flex";
-import NoticeTip from "components/NoticeTip";
-import useCurrentUser from "hooks/useCurrentUser";
-import useStores from "hooks/useStores";
-import { detectLanguage } from "utils/language";
-
-function Icon(props) {
-  return (
-    <svg
-      width="32"
-      height="32"
-      viewBox="0 0 32 32"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M21 18H16L14 16V6C14 4.89543 14.8954 4 16 4H28C29.1046 4 30 4.89543 30 6V16C30 17.1046 29.1046 18 28 18H27L25.4142 19.5858C24.6332 20.3668 23.3668 20.3668 22.5858 19.5858L21 18ZM16 15.1716V6H28V16H27H26.1716L25.5858 16.5858L24 18.1716L22.4142 16.5858L21.8284 16H21H16.8284L16 15.1716Z"
-        fill="#2B2F35"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M16 13H4C2.89543 13 2 13.8954 2 15V25C2 26.1046 2.89543 27 4 27H5L6.58579 28.5858C7.36684 29.3668 8.63316 29.3668 9.41421 28.5858L11 27H16C17.1046 27 18 26.1046 18 25V15C18 13.8954 17.1046 13 16 13ZM9 17L6 16.9681C6 16.9681 5 17.016 5 18C5 18.984 6 19 6 19H8.5H10C10 19 9.57627 20.1885 8.38983 21.0831C7.20339 21.9777 5.7197 23 5.7197 23C5.7197 23 4.99153 23.6054 5.5 24.5C6.00847 25.3946 7 24.8403 7 24.8403L9.74576 22.8722L11.9492 24.6614C11.9492 24.6614 12.6271 25.3771 13.3051 24.4825C13.9831 23.5879 13.3051 23.0512 13.3051 23.0512L11.1017 21.262C11.1017 21.262 11.5 21 12 20L12.5 19H14C14 19 15 19.0319 15 18C15 16.9681 14 16.9681 14 16.9681L11 17V16C11 16 11.0169 15 10 15C8.98305 15 9 16 9 16V17Z"
-        fill="#2B2F35"
-      />
-      <path
-        d="M23.6672 12.5221L23.5526 12.1816H23.1934H20.8818H20.5215L20.4075 12.5235L20.082 13.5H19.2196L21.2292 8.10156H21.8774L21.5587 9.06116L20.7633 11.4562L20.5449 12.1138H21.2378H22.8374H23.5327L23.3114 11.4546L22.5072 9.05959L22.1855 8.10156H22.768L24.7887 13.5H23.9964L23.6672 12.5221Z"
-        fill="#2B2F35"
-        stroke="#2B2F35"
-      />
-    </svg>
-  );
-}
-
-export default function LanguagePrompt() {
-  const { auth, ui } = useStores();
-  const { t } = useTranslation();
-  const user = useCurrentUser();
-  const language = detectLanguage();
-
-  if (language === "en_US" || language === user.language) {
-    return null;
-  }
-
-  if (!languages.includes(language)) {
-    return null;
-  }
-
-  const option = find(languageOptions, (o) => o.value === language);
-  const optionLabel = option ? option.label : "";
-
-  return (
-    <NoticeTip>
-      <Flex align="center">
-        <LanguageIcon />
-        <span>
-          <Trans>
-            Outline is available in your language {{ optionLabel }}, would you
-            like to change?
-          </Trans>
-          <br />
-          <Link
-            onClick={() => {
-              auth.updateUser({
-                language,
-              });
-              ui.setLanguagePromptDismissed();
-            }}
-          >
-            {t("Change Language")}
-          </Link>{" "}
-          &middot;{" "}
-          <Link onClick={ui.setLanguagePromptDismissed}>{t("Dismiss")}</Link>
-        </span>
-      </Flex>
-    </NoticeTip>
-  );
-}
-
-const Link = styled(ButtonLink)`
-  color: ${(props) => props.theme.almostBlack};
-  font-weight: 500;
-
-  &:hover {
-    text-decoration: underline;
-  }
-`;
-
-const LanguageIcon = styled(Icon)`
-  margin-right: 12px;
-`;
@@ -1,10 +1,8 @@
 // @flow
 import { observable } from "mobx";
 import { observer, inject } from "mobx-react";
-import { MenuIcon } from "outline-icons";
 import * as React from "react";
 import { Helmet } from "react-helmet";
-import { withTranslation, type TFunction } from "react-i18next";
 import keydown from "react-keydown";
 import { Switch, Route, Redirect } from "react-router-dom";
 import styled, { withTheme } from "styled-components";
@@ -15,17 +13,14 @@ import UiStore from "stores/UiStore";
 import ErrorSuspended from "scenes/ErrorSuspended";
 import KeyboardShortcuts from "scenes/KeyboardShortcuts";
 import Analytics from "components/Analytics";
-import Button from "components/Button";
 import DocumentHistory from "components/DocumentHistory";
+import { GlobalStyles } from "components/DropToImport";
 import Flex from "components/Flex";
+
 import { LoadingIndicatorBar } from "components/LoadingIndicator";
 import Modal from "components/Modal";
 import Sidebar from "components/Sidebar";
 import SettingsSidebar from "components/Sidebar/Settings";
-import SkipNavContent from "components/SkipNavContent";
-import SkipNavLink from "components/SkipNavLink";
-import { type Theme } from "types";
-import { meta } from "utils/keyboard";
 import {
  homeUrl,
  searchUrl,
@@ -40,9 +35,7 @@ type Props = {
  auth: AuthStore,
  ui: UiStore,
  notifications?: React.Node,
-  theme: Theme,
-  i18n: Object,
-  t: TFunction,
+  theme: Object,
 };

@observer
@@ -51,31 +44,26 @@ class Layout extends React.Component<Props> {
  @observable redirectTo: ?string;
  @observable keyboardShortcutsOpen: boolean = false;

-  constructor(props: Props) {
-    super();
-    this.updateBackground(props);
+  componentWillMount() {
+    this.updateBackground();
  }

  componentDidUpdate() {
-    this.updateBackground(this.props);
+    this.updateBackground();

    if (this.redirectTo) {
      this.redirectTo = undefined;
    }
  }

-  updateBackground(props: Props) {
+  updateBackground() {
    // ensure the wider page color always matches the theme
-    window.document.body.style.background = props.theme.background;
-  }
-
-  @keydown(`${meta}+.`)
-  handleToggleSidebar() {
-    this.props.ui.toggleCollapsedSidebar();
+    window.document.body.style.background = this.props.theme.background;
  }

  @keydown("shift+/")
  handleOpenKeyboardShortcuts() {
+    if (this.props.ui.editMode) return;
    this.keyboardShortcutsOpen = true;
  }

@@ -83,8 +71,9 @@ class Layout extends React.Component<Props> {
    this.keyboardShortcutsOpen = false;
  };

-  @keydown(["t", "/", `${meta}+k`])
-  goToSearch(ev: SyntheticEvent<>) {
+  @keydown(["t", "/", "meta+k"])
+  goToSearch(ev) {
+    if (this.props.ui.editMode) return;
    ev.preventDefault();
    ev.stopPropagation();
    this.redirectTo = searchUrl();
@@ -92,14 +81,14 @@ class Layout extends React.Component<Props> {

  @keydown("d")
  goToDashboard() {
+    if (this.props.ui.editMode) return;
    this.redirectTo = homeUrl();
  }

  render() {
-    const { auth, t, ui } = this.props;
+    const { auth, ui } = this.props;
    const { user, team } = auth;
    const showSidebar = auth.authenticated && user && team;
-    const sidebarCollapsed = ui.isEditing || ui.sidebarCollapsed;

    if (auth.isSuspended) return <ErrorSuspended />;
    if (this.redirectTo) return <Redirect to={this.redirectTo} push />;
@@ -113,19 +102,11 @@ class Layout extends React.Component<Props> {
            content="width=device-width, initial-scale=1.0"
          />
        </Helmet>
-        <SkipNavLink />
        <Analytics />

        {this.props.ui.progressBarVisible && <LoadingIndicatorBar />}
        {this.props.notifications}

-        <MobileMenuButton
-          onClick={ui.toggleMobileSidebar}
-          icon={<MenuIcon />}
-          iconColor="currentColor"
-          neutral
-        />
-
        <Container auto>
          {showSidebar && (
            <Switch>
@@ -134,18 +115,7 @@ class Layout extends React.Component<Props> {
            </Switch>
          )}

-          <SkipNavContent />
-          <Content
-            auto
-            justify="center"
-            $isResizing={ui.sidebarIsResizing}
-            $sidebarCollapsed={sidebarCollapsed}
-            style={
-              sidebarCollapsed
-                ? undefined
-                : { marginLeft: `${ui.sidebarWidth}px` }
-            }
-          >
+          <Content auto justify="center" editMode={ui.editMode}>
            {this.props.children}
          </Content>

@@ -159,10 +129,11 @@ class Layout extends React.Component<Props> {
        <Modal
          isOpen={this.keyboardShortcutsOpen}
          onRequestClose={this.handleCloseKeyboardShortcuts}
-          title={t("Keyboard shortcuts")}
+          title="Keyboard shortcuts"
        >
          <KeyboardShortcuts />
        </Modal>
+        <GlobalStyles />
      </Container>
    );
  }
@@ -176,41 +147,17 @@ const Container = styled(Flex)`
  min-height: 100%;
 `;

-const MobileMenuButton = styled(Button)`
-  position: fixed;
-  top: 12px;
-  left: 12px;
-  z-index: ${(props) => props.theme.depths.sidebar - 1};
-
-  ${breakpoint("tablet")`
-    display: none;
-  `};
-
-  @media print {
-    display: none;
-  }
-`;
-
 const Content = styled(Flex)`
  margin: 0;
-  transition: ${(props) =>
-    props.$isResizing ? "none" : `margin-left 100ms ease-out`};
+  transition: margin-left 100ms ease-out;

  @media print {
    margin: 0;
  }

-  ${breakpoint("mobile", "tablet")`
-    margin-left: 0 !important;
-  `}
-
  ${breakpoint("tablet")`
-    ${(props) =>
-      props.$sidebarCollapsed &&
-      `margin-left: ${props.theme.sidebarCollapsedWidth}px;`}
+    margin-left: ${(props) => (props.editMode ? 0 : props.theme.sidebarWidth)};
  `};
 `;

-export default withTranslation()<Layout>(
-  inject("auth", "ui", "documents")(withTheme(Layout))
-);
+export default inject("auth", "ui", "documents")(withTheme(Layout));
@@ -1,89 +0,0 @@
-// @flow
-import distanceInWordsToNow from "date-fns/distance_in_words_to_now";
-import format from "date-fns/format";
-import * as React from "react";
-import Tooltip from "components/Tooltip";
-import useUserLocale from "hooks/useUserLocale";
-
-const locales = {
-  en: require(`date-fns/locale/en`),
-  de: require(`date-fns/locale/de`),
-  es: require(`date-fns/locale/es`),
-  fr: require(`date-fns/locale/fr`),
-  it: require(`date-fns/locale/it`),
-  ko: require(`date-fns/locale/ko`),
-  pt: require(`date-fns/locale/pt`),
-  zh: require(`date-fns/locale/zh_cn`),
-};
-
-let callbacks = [];
-
-// This is a shared timer that fires every minute, used for
-// updating all Time components across the page all at once.
-setInterval(() => {
-  callbacks.forEach((cb) => cb());
-}, 1000 * 60);
-
-function eachMinute(fn) {
-  callbacks.push(fn);
-
-  return () => {
-    callbacks = callbacks.filter((cb) => cb !== fn);
-  };
-}
-
-type Props = {
-  dateTime: string,
-  children?: React.Node,
-  tooltipDelay?: number,
-  addSuffix?: boolean,
-  shorten?: boolean,
-};
-
-function LocaleTime({
-  addSuffix,
-  children,
-  dateTime,
-  shorten,
-  tooltipDelay,
-}: Props) {
-  const userLocale = useUserLocale();
-  const [_, setMinutesMounted] = React.useState(0); // eslint-disable-line no-unused-vars
-  const callback = React.useRef();
-
-  React.useEffect(() => {
-    callback.current = eachMinute(() => {
-      setMinutesMounted((state) => ++state);
-    });
-
-    return () => {
-      if (callback.current) {
-        callback.current();
-      }
-    };
-  }, []);
-
-  let content = distanceInWordsToNow(dateTime, {
-    addSuffix,
-    locale: userLocale ? locales[userLocale] : undefined,
-  });
-
-  if (shorten) {
-    content = content
-      .replace("about", "")
-      .replace("less than a minute ago", "just now")
-      .replace("minute", "min");
-  }
-
-  return (
-    <Tooltip
-      tooltip={format(dateTime, "MMMM Do, YYYY h:mm a")}
-      delay={tooltipDelay}
-      placement="bottom"
-    >
-      <time dateTime={dateTime}>{children || content}</time>
-    </Tooltip>
-  );
-}
-
-export default LocaleTime;
@@ -5,10 +5,10 @@ import { randomInteger } from "shared/random";
 import { pulsate } from "shared/styles/animations";
 import Flex from "components/Flex";

-type Props = {|
+type Props = {
  header?: boolean,
  height?: number,
-|};
+};

 class Mask extends React.Component<Props> {
  width: number;
@@ -17,13 +17,12 @@ class Mask extends React.Component<Props> {
    return false;
  }

-  constructor() {
-    super();
+  componentWillMount() {
    this.width = randomInteger(75, 100);
  }

  render() {
-    return <Redacted width={this.width} />;
+    return <Redacted width={this.width} {...this.props} />;
  }
 }

@@ -9,16 +9,15 @@ import breakpoint from "styled-components-breakpoint";
 import { fadeAndScaleIn } from "shared/styles/animations";
 import Flex from "components/Flex";
 import NudeButton from "components/NudeButton";
-import Scrollable from "components/Scrollable";

 ReactModal.setAppElement("#root");

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

 const GlobalStyles = createGlobalStyle`
  .ReactModal__Overlay {
@@ -28,8 +27,7 @@ const GlobalStyles = createGlobalStyle`
  }

  ${breakpoint("tablet")`
-    .ReactModalPortal + .ReactModalPortal,
-    .ReactModalPortal + [data-react-modal-body-trap] + .ReactModalPortal {
+    .ReactModalPortal + .ReactModalPortal {
      .ReactModal__Overlay {
        margin-left: 12px;
        box-shadow: 0 -2px 10px ${(props) => props.theme.shadow};
@@ -38,15 +36,13 @@ const GlobalStyles = createGlobalStyle`
      }
    }

-    .ReactModalPortal + .ReactModalPortal + .ReactModalPortal,
-    .ReactModalPortal + .ReactModalPortal + [data-react-modal-body-trap] + .ReactModalPortal {
+    .ReactModalPortal + .ReactModalPortal + .ReactModalPortal {
      .ReactModal__Overlay {
        margin-left: 24px;
      }
    }

-    .ReactModalPortal + .ReactModalPortal + .ReactModalPortal + .ReactModalPortal,
-    .ReactModalPortal + .ReactModalPortal + .ReactModalPortal + [data-react-modal-body-trap] + .ReactModalPortal {
+    .ReactModalPortal + .ReactModalPortal + .ReactModalPortal + .ReactModalPortal {
      .ReactModal__Overlay {
        margin-left: 36px;
      }
@@ -76,11 +72,10 @@ const Modal = ({
        isOpen={isOpen}
        {...rest}
      >
-        <Content>
-          <Centered onClick={(ev) => ev.stopPropagation()} column>
-            {title && <h1>{title}</h1>}
-            {children}
-          </Centered>
+        <Content onClick={(ev) => ev.stopPropagation()} column>
+          {title && <h1>{title}</h1>}
+
+          {children}
        </Content>
        <Back onClick={onRequestClose}>
          <BackIcon size={32} color="currentColor" />
@@ -94,20 +89,10 @@ const Modal = ({
  );
 };

-const Content = styled(Scrollable)`
-  width: 100%;
-  padding: 8vh 2rem 2rem;
-
-  ${breakpoint("tablet")`
-    padding-top: 13vh;
-  `};
-`;
-
-const Centered = styled(Flex)`
+const Content = styled(Flex)`
  width: 640px;
  max-width: 100%;
  position: relative;
-  margin: 0 auto;
 `;

 const StyledModal = styled(ReactModal)`
@@ -122,9 +107,16 @@ const StyledModal = styled(ReactModal)`
  display: flex;
  justify-content: center;
  align-items: flex-start;
+  overflow-x: hidden;
+  overflow-y: auto;
  background: ${(props) => props.theme.background};
  transition: ${(props) => props.theme.backgroundTransition};
+  padding: 8vh 2rem 2rem;
  outline: none;
+
+  ${breakpoint("tablet")`
+    padding-top: 13vh;
+  `};
 `;

 const Text = styled.span`
@@ -155,7 +147,7 @@ const Close = styled(NudeButton)`
 `;

 const Back = styled(NudeButton)`
-  position: absolute;
+  position: fixed;
  display: none;
  align-items: center;
  top: 2rem;
@@ -1,22 +0,0 @@
-// @flow
-import styled from "styled-components";
-
-const Notice = styled.p`
-  background: ${(props) => props.theme.brand.marine};
-  color: ${(props) => props.theme.almostBlack};
-  padding: 10px 12px;
-  margin-top: 24px;
-  border-radius: 4px;
-  position: relative;
-
-  a {
-    color: ${(props) => props.theme.almostBlack};
-    font-weight: 500;
-  }
-
-  a:hover {
-    text-decoration: underline;
-  }
-`;
-
-export default Notice;
@@ -1,19 +1,25 @@
 // @flow
+import { lighten } from "polished";
 import * as React from "react";
 import styled from "styled-components";

 const Button = styled.button`
-  width: ${(props) => props.size}px;
-  height: ${(props) => props.size}px;
+  width: 24px;
+  height: 24px;
  background: none;
  border-radius: 4px;
  line-height: 0;
  border: 0;
  padding: 0;
-  cursor: pointer;
-  user-select: none;
+
+  &:focus {
+    transition-duration: 0.05s;
+    box-shadow: ${(props) => lighten(0.4, props.theme.buttonBackground)} 0px 0px
+      0px 3px;
+    outline: none;
+  }
 `;

-export default React.forwardRef<any, typeof Button>(
-  ({ size = 24, ...props }, ref) => <Button size={size} {...props} ref={ref} />
-);
+export default React.forwardRef<any, typeof Button>((props, ref) => (
+  <Button {...props} ref={ref} />
+));
@@ -1,17 +1,16 @@
 // @flow
-import { observer } from "mobx-react";
+import { observer, inject } from "mobx-react";
 import * as React from "react";
 import { Helmet } from "react-helmet";
-import useStores from "hooks/useStores";
-import { cdnPath } from "utils/urls";
+import AuthStore from "stores/AuthStore";

-type Props = {|
+type Props = {
  title: string,
  favicon?: string,
-|};
+  auth: AuthStore,
+};

-const PageTitle = ({ title, favicon }: Props) => {
-  const { auth } = useStores();
+const PageTitle = observer(({ auth, title, favicon }: Props) => {
  const { team } = auth;

  return (
@@ -22,12 +21,12 @@ const PageTitle = ({ title, favicon }: Props) => {
      <link
        rel="shortcut icon"
        type="image/png"
-        href={favicon || cdnPath("/favicon-32.png")}
+        href={favicon || "/favicon-32.png"}
        sizes="32x32"
      />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    </Helmet>
  );
-};
+});

-export default observer(PageTitle);
+export default inject("auth")(PageTitle);
@@ -2,22 +2,16 @@
 import { observer } from "mobx-react";
 import * as React from "react";
 import Document from "models/Document";
-import DocumentListItem from "components/DocumentListItem";
+import DocumentPreview from "components/DocumentPreview";
 import PaginatedList from "components/PaginatedList";

-type Props = {|
+type Props = {
  documents: Document[],
  fetch: (options: ?Object) => Promise<void>,
  options?: Object,
  heading?: React.Node,
  empty?: React.Node,
-  showNestedDocuments?: boolean,
-  showCollection?: boolean,
-  showPublished?: boolean,
-  showPin?: boolean,
-  showDraft?: boolean,
-  showTemplate?: boolean,
-|};
+};

@observer
 class PaginatedDocumentList extends React.Component<Props> {
@@ -32,7 +26,7 @@ class PaginatedDocumentList extends React.Component<Props> {
        fetch={fetch}
        options={options}
        renderItem={(item) => (
-          <DocumentListItem key={item.id} document={item} {...rest} />
+          <DocumentPreview key={item.id} document={item} {...rest} />
        )}
      />
    );
@@ -1,6 +1,5 @@
 // @flow
 import ArrowKeyNavigation from "boundless-arrow-key-navigation";
-import { isEqual } from "lodash";
 import { observable, action } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
@@ -41,9 +40,6 @@ class PaginatedList extends React.Component<Props> {
    if (prevProps.fetch !== this.props.fetch) {
      this.fetchResults();
    }
-    if (!isEqual(prevProps.options, this.props.options)) {
-      this.fetchResults();
-    }
  }

  fetchResults = async () => {
@@ -14,7 +14,6 @@ type Props = {
  document?: ?Document,
  collection: ?Collection,
  onSuccess?: () => void,
-  style?: Object,
  ref?: (?React.ElementRef<"div">) => void,
 };

@@ -35,38 +34,28 @@ class PathToDocument extends React.Component<Props> {
  };

  render() {
-    const { result, collection, document, ref, style } = this.props;
+    const { result, collection, document, ref } = this.props;
    const Component = document ? ResultWrapperLink : ResultWrapper;

    if (!result) return <div />;

    return (
-      <Component
-        ref={ref}
-        onClick={this.handleClick}
-        href=""
-        style={style}
-        role="option"
-        selectable
-      >
+      <Component ref={ref} onClick={this.handleClick} href="" selectable>
        {collection && <CollectionIcon collection={collection} />}
-        &nbsp;
        {result.path
          .map((doc) => <Title key={doc.id}>{doc.title}</Title>)
          .reduce((prev, curr) => [prev, <StyledGoToIcon />, curr])}
        {document && (
-          <DocumentTitle>
+          <Flex>
            {" "}
            <StyledGoToIcon /> <Title>{document.title}</Title>
-          </DocumentTitle>
+          </Flex>
        )}
      </Component>
    );
  }
 }

-const DocumentTitle = styled(Flex)``;
-
 const Title = styled.span`
  white-space: nowrap;
  overflow: hidden;
@@ -74,42 +63,29 @@ const Title = styled.span`
 `;

 const StyledGoToIcon = styled(GoToIcon)`
-  fill: ${(props) => props.theme.divider};
+  opacity: 0.25;
 `;

 const ResultWrapper = styled.div`
  display: flex;
  margin-bottom: 10px;
+  margin-left: -4px;
  user-select: none;

  color: ${(props) => props.theme.text};
  cursor: default;
-
-  svg {
-    flex-shrink: 0;
-  }
 `;

 const ResultWrapperLink = styled(ResultWrapper.withComponent("a"))`
+  margin: 0 -8px;
  padding: 8px 4px;
-
-  ${DocumentTitle} {
-    display: none;
-  }
-
-  svg {
-    flex-shrink: 0;
-  }
+  border-radius: 8px;

  &:hover,
  &:active,
  &:focus {
    background: ${(props) => props.theme.listItemHoverBackground};
    outline: none;
-
-    ${DocumentTitle} {
-      display: flex;
-    }
  }
 `;

@@ -0,0 +1,66 @@
+// @flow
+import BoundlessPopover from "boundless-popover";
+import * as React from "react";
+import styled, { keyframes } from "styled-components";
+
+const fadeIn = keyframes`
+  from {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 1;
+  }
+`;
+
+const StyledPopover = styled(BoundlessPopover)`
+  animation: ${fadeIn} 150ms ease-in-out;
+  display: flex;
+  flex-direction: column;
+
+  line-height: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: ${(props) => props.theme.depths.popover};
+
+  svg {
+    height: 16px;
+    width: 16px;
+    position: absolute;
+
+    polygon:first-child {
+      fill: rgba(0, 0, 0, 0.075);
+    }
+    polygon {
+      fill: #fff;
+    }
+  }
+`;
+
+const Dialog = styled.div`
+  outline: none;
+  background: #fff;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 8px 16px rgba(0, 0, 0, 0.1),
+    0 2px 4px rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+  line-height: 1.5;
+  padding: 16px;
+  margin-top: 14px;
+  min-width: 200px;
+  min-height: 150px;
+`;
+
+export const Preset = BoundlessPopover.preset;
+
+export default function Popover(props: Object) {
+  return (
+    <StyledPopover
+      dialogComponent={Dialog}
+      closeOnOutsideScroll
+      closeOnOutsideFocus
+      closeOnEscKey
+      {...props}
+    />
+  );
+}
@@ -1,12 +0,0 @@
-// @flow
-import * as Sentry from "@sentry/react";
-import { Route } from "react-router-dom";
-import env from "env";
-
-let Component = Route;
-
-if (env.SENTRY_DSN) {
-  Component = Sentry.withSentryRouting(Route);
-}
-
-export default Component;
@@ -1,52 +1,28 @@
 // @flow
+import { observable } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
 import styled from "styled-components";
-import useWindowSize from "hooks/useWindowSize";

-type Props = {|
+type Props = {
  shadow?: boolean,
-  topShadow?: boolean,
-  bottomShadow?: boolean,
-|};
+};

-function Scrollable({ shadow, topShadow, bottomShadow, ...rest }: Props) {
-  const ref = React.useRef<?HTMLDivElement>();
-  const [topShadowVisible, setTopShadow] = React.useState(false);
-  const [bottomShadowVisible, setBottomShadow] = React.useState(false);
-  const { height } = useWindowSize();
+@observer
+class Scrollable extends React.Component<Props> {
+  @observable shadow: boolean = false;

-  const updateShadows = React.useCallback(() => {
-    const c = ref.current;
-    if (!c) return;
+  handleScroll = (ev: SyntheticMouseEvent<HTMLDivElement>) => {
+    this.shadow = !!(this.props.shadow && ev.currentTarget.scrollTop > 0);
+  };

-    const scrollTop = c.scrollTop;
-    const tsv = !!((shadow || topShadow) && scrollTop > 0);
-    if (tsv !== topShadowVisible) {
-      setTopShadow(tsv);
-    }
+  render() {
+    const { shadow, ...rest } = this.props;

-    const wrapperHeight = c.scrollHeight - c.clientHeight;
-    const bsv = !!((shadow || bottomShadow) && wrapperHeight - scrollTop !== 0);
-
-    if (bsv !== bottomShadowVisible) {
-      setBottomShadow(bsv);
-    }
-  }, [shadow, topShadow, bottomShadow, topShadowVisible, bottomShadowVisible]);
-
-  React.useEffect(() => {
-    updateShadows();
-  }, [height, updateShadows]);
-
-  return (
-    <Wrapper
-      ref={ref}
-      onScroll={updateShadows}
-      $topShadowVisible={topShadowVisible}
-      $bottomShadowVisible={bottomShadowVisible}
-      {...rest}
-    />
-  );
+    return (
+      <Wrapper onScroll={this.handleScroll} shadow={this.shadow} {...rest} />
+    );
+  }
 }

 const Wrapper = styled.div`
@@ -55,20 +31,9 @@ const Wrapper = styled.div`
  overflow-x: hidden;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
-  box-shadow: ${(props) => {
-    if (props.$topShadowVisible && props.$bottomShadowVisible) {
-      return "0 1px inset rgba(0,0,0,.1), 0 -1px inset rgba(0,0,0,.1)";
-    }
-    if (props.$topShadowVisible) {
-      return "0 1px inset rgba(0,0,0,.1)";
-    }
-    if (props.$bottomShadowVisible) {
-      return "0 -1px inset rgba(0,0,0,.1)";
-    }
-
-    return "none";
-  }};
-  transition: all 100ms ease-in-out;
+  box-shadow: ${(props) =>
+    props.shadow ? "0 1px inset rgba(0,0,0,.1)" : "none"};
+  transition: all 250ms ease-in-out;
 `;

-export default observer(Scrollable);
+export default Scrollable;
@@ -1,5 +1,6 @@
 // @flow
-import { observer } from "mobx-react";
+import { observable } from "mobx";
+import { observer, inject } from "mobx-react";
 import {
  ArchiveIcon,
  HomeIcon,
@@ -9,193 +10,191 @@ import {
  ShapesIcon,
  TrashIcon,
  PlusIcon,
-  SettingsIcon,
 } from "outline-icons";
 import * as React from "react";
-import { useTranslation } from "react-i18next";
 import styled from "styled-components";
+
+import AuthStore from "stores/AuthStore";
+import DocumentsStore from "stores/DocumentsStore";
+import PoliciesStore from "stores/PoliciesStore";
 import CollectionNew from "scenes/CollectionNew";
 import Invite from "scenes/Invite";
-import Bubble from "components/Bubble";
 import Flex from "components/Flex";
 import Modal from "components/Modal";
 import Scrollable from "components/Scrollable";
 import Sidebar from "./Sidebar";
+import Bubble from "./components/Bubble";
 import Collections from "./components/Collections";
 import HeaderBlock from "./components/HeaderBlock";
 import Section from "./components/Section";
 import SidebarLink from "./components/SidebarLink";
-import useStores from "hooks/useStores";
 import AccountMenu from "menus/AccountMenu";

-function MainSidebar() {
-  const { t } = useTranslation();
-  const { policies, auth, documents } = useStores();
-  const [inviteModalOpen, setInviteModalOpen] = React.useState(false);
-  const [
-    createCollectionModalOpen,
-    setCreateCollectionModalOpen,
-  ] = React.useState(false);
+type Props = {
+  auth: AuthStore,
+  documents: DocumentsStore,
+  policies: PoliciesStore,
+};

-  React.useEffect(() => {
-    documents.fetchDrafts();
-    documents.fetchTemplates();
-  }, [documents]);
+@observer
+class MainSidebar extends React.Component<Props> {
+  @observable inviteModalOpen = false;
+  @observable createCollectionModalOpen = false;

-  const handleCreateCollectionModalOpen = React.useCallback(
-    (ev: SyntheticEvent<>) => {
-      ev.preventDefault();
-      setCreateCollectionModalOpen(true);
-    },
-    []
-  );
+  componentDidMount() {
+    this.props.documents.fetchDrafts();
+    this.props.documents.fetchTemplates();
+  }

-  const handleCreateCollectionModalClose = React.useCallback(() => {
-    setCreateCollectionModalOpen(false);
-  }, []);
-
-  const handleInviteModalOpen = React.useCallback((ev: SyntheticEvent<>) => {
+  handleCreateCollectionModalOpen = (ev: SyntheticEvent<>) => {
    ev.preventDefault();
-    setInviteModalOpen(true);
-  }, []);
+    this.createCollectionModalOpen = true;
+  };

-  const handleInviteModalClose = React.useCallback(() => {
-    setInviteModalOpen(false);
-  }, []);
+  handleCreateCollectionModalClose = (ev: SyntheticEvent<>) => {
+    this.createCollectionModalOpen = false;
+  };

-  const { user, team } = auth;
-  if (!user || !team) return null;
+  handleInviteModalOpen = (ev: SyntheticEvent<>) => {
+    ev.preventDefault();
+    this.inviteModalOpen = true;
+  };

-  const can = policies.abilities(team.id);
+  handleInviteModalClose = () => {
+    this.inviteModalOpen = false;
+  };

-  return (
-    <Sidebar>
-      <AccountMenu>
-        {(props) => (
-          <HeaderBlock
-            {...props}
-            subheading={user.name}
-            teamName={team.name}
-            logoUrl={team.avatarUrl}
-            showDisclosure
-          />
-        )}
-      </AccountMenu>
-      <Flex auto column>
-        <Scrollable shadow>
-          <Section>
-            <SidebarLink
-              to="/home"
-              icon={<HomeIcon color="currentColor" />}
-              exact={false}
-              label={t("Home")}
+  render() {
+    const { auth, documents, policies } = this.props;
+    const { user, team } = auth;
+    if (!user || !team) return null;
+
+    const draftDocumentsCount = documents.drafts.length;
+    const can = policies.abilities(team.id);
+
+    return (
+      <Sidebar>
+        <AccountMenu
+          label={
+            <HeaderBlock
+              subheading={user.name}
+              teamName={team.name}
+              logoUrl={team.avatarUrl}
+              showDisclosure
            />
-            <SidebarLink
-              to={{
-                pathname: "/search",
-                state: { fromMenu: true },
-              }}
-              icon={<SearchIcon color="currentColor" />}
-              label={t("Search")}
-              exact={false}
-            />
-            <SidebarLink
-              to="/starred"
-              icon={<StarredIcon color="currentColor" />}
-              exact={false}
-              label={t("Starred")}
-            />
-            <SidebarLink
-              to="/templates"
-              icon={<ShapesIcon color="currentColor" />}
-              exact={false}
-              label={t("Templates")}
-              active={documents.active ? documents.active.template : undefined}
-            />
-            <SidebarLink
-              to="/drafts"
-              icon={<EditIcon color="currentColor" />}
-              label={
-                <Drafts align="center">
-                  {t("Drafts")}
-                  <Bubble count={documents.totalDrafts} />
-                </Drafts>
-              }
-              active={
-                documents.active
-                  ? !documents.active.publishedAt &&
-                    !documents.active.isDeleted &&
-                    !documents.active.isTemplate
-                  : undefined
-              }
-            />
-          </Section>
-          <Section>
-            <Collections onCreateCollection={handleCreateCollectionModalOpen} />
-          </Section>
-        </Scrollable>
-        <Secondary>
-          <Section>
-            <SidebarLink
-              to="/archive"
-              icon={<ArchiveIcon color="currentColor" />}
-              exact={false}
-              label={t("Archive")}
-              active={
-                documents.active
-                  ? documents.active.isArchived && !documents.active.isDeleted
-                  : undefined
-              }
-            />
-            <SidebarLink
-              to="/trash"
-              icon={<TrashIcon color="currentColor" />}
-              exact={false}
-              label={t("Trash")}
-              active={documents.active ? documents.active.isDeleted : undefined}
-            />
-            <SidebarLink
-              to="/settings"
-              icon={<SettingsIcon color="currentColor" />}
-              exact={false}
-              label={t("Settings")}
-            />
-            {can.invite && (
+          }
+        />
+        <Flex auto column>
+          <Scrollable shadow>
+            <Section>
              <SidebarLink
-                to="/settings/people"
-                onClick={handleInviteModalOpen}
-                icon={<PlusIcon color="currentColor" />}
-                label={`${t("Invite people")}…`}
+                to="/home"
+                icon={<HomeIcon color="currentColor" />}
+                exact={false}
+                label="Home"
              />
-            )}
-          </Section>
-        </Secondary>
-      </Flex>
-      <Modal
-        title={t("Invite people")}
-        onRequestClose={handleInviteModalClose}
-        isOpen={inviteModalOpen}
-      >
-        <Invite onSubmit={handleInviteModalClose} />
-      </Modal>
-      <Modal
-        title={t("Create a collection")}
-        onRequestClose={handleCreateCollectionModalClose}
-        isOpen={createCollectionModalOpen}
-      >
-        <CollectionNew onSubmit={handleCreateCollectionModalClose} />
-      </Modal>
-    </Sidebar>
-  );
+              <SidebarLink
+                to={{
+                  pathname: "/search",
+                  state: { fromMenu: true },
+                }}
+                icon={<SearchIcon color="currentColor" />}
+                label="Search"
+                exact={false}
+              />
+              <SidebarLink
+                to="/starred"
+                icon={<StarredIcon color="currentColor" />}
+                exact={false}
+                label="Starred"
+              />
+              <SidebarLink
+                to="/templates"
+                icon={<ShapesIcon color="currentColor" />}
+                exact={false}
+                label="Templates"
+                active={
+                  documents.active ? documents.active.template : undefined
+                }
+              />
+              <SidebarLink
+                to="/drafts"
+                icon={<EditIcon color="currentColor" />}
+                label={
+                  <Drafts align="center">
+                    Drafts
+                    {draftDocumentsCount > 0 && (
+                      <Bubble count={draftDocumentsCount} />
+                    )}
+                  </Drafts>
+                }
+                active={
+                  documents.active
+                    ? !documents.active.publishedAt &&
+                      !documents.active.isDeleted &&
+                      !documents.active.isTemplate
+                    : undefined
+                }
+              />
+            </Section>
+            <Section>
+              <Collections
+                onCreateCollection={this.handleCreateCollectionModalOpen}
+              />
+            </Section>
+            <Section>
+              <SidebarLink
+                to="/archive"
+                icon={<ArchiveIcon color="currentColor" />}
+                exact={false}
+                label="Archive"
+                active={
+                  documents.active
+                    ? documents.active.isArchived && !documents.active.isDeleted
+                    : undefined
+                }
+              />
+              <SidebarLink
+                to="/trash"
+                icon={<TrashIcon color="currentColor" />}
+                exact={false}
+                label="Trash"
+                active={
+                  documents.active ? documents.active.isDeleted : undefined
+                }
+              />
+              {can.invite && (
+                <SidebarLink
+                  to="/settings/people"
+                  onClick={this.handleInviteModalOpen}
+                  icon={<PlusIcon color="currentColor" />}
+                  label="Invite people…"
+                />
+              )}
+            </Section>
+          </Scrollable>
+        </Flex>
+        <Modal
+          title="Invite people"
+          onRequestClose={this.handleInviteModalClose}
+          isOpen={this.inviteModalOpen}
+        >
+          <Invite onSubmit={this.handleInviteModalClose} />
+        </Modal>
+        <Modal
+          title="Create a collection"
+          onRequestClose={this.handleCreateCollectionModalClose}
+          isOpen={this.createCollectionModalOpen}
+        >
+          <CollectionNew onSubmit={this.handleCreateCollectionModalClose} />
+        </Modal>
+      </Sidebar>
+    );
+  }
 }

-const Secondary = styled.div`
-  overflow-x: hidden;
-  flex-shrink: 0;
-`;
-
 const Drafts = styled(Flex)`
  height: 24px;
 `;

-export default observer(MainSidebar);
+export default inject("documents", "policies", "auth")(MainSidebar);
@@ -1,5 +1,5 @@
 // @flow
-import { observer } from "mobx-react";
+import { observer, inject } from "mobx-react";
 import {
  DocumentIcon,
  EmailIcon,
@@ -10,12 +10,14 @@ import {
  GroupIcon,
  LinkIcon,
  TeamIcon,
+  BulletedListIcon,
  ExpandedIcon,
 } from "outline-icons";
 import * as React from "react";
-import { useTranslation } from "react-i18next";
-import { useHistory } from "react-router-dom";
+import type { RouterHistory } from "react-router-dom";
 import styled from "styled-components";
+import AuthStore from "stores/AuthStore";
+import PoliciesStore from "stores/PoliciesStore";
 import Flex from "components/Flex";
 import Scrollable from "components/Scrollable";

@@ -28,123 +30,133 @@ import Version from "./components/Version";
 import SlackIcon from "./icons/Slack";
 import ZapierIcon from "./icons/Zapier";
 import env from "env";
-import useCurrentTeam from "hooks/useCurrentTeam";
-import useStores from "hooks/useStores";

-const isHosted = env.DEPLOYMENT === "hosted";
+type Props = {
+  history: RouterHistory,
+  policies: PoliciesStore,
+  auth: AuthStore,
+};

-function SettingsSidebar() {
-  const { t } = useTranslation();
-  const history = useHistory();
-  const team = useCurrentTeam();
-  const { policies } = useStores();
-  const can = policies.abilities(team.id);
+@observer
+class SettingsSidebar extends React.Component<Props> {
+  returnToDashboard = () => {
+    this.props.history.push("/home");
+  };

-  const returnToDashboard = React.useCallback(() => {
-    history.push("/home");
-  }, [history]);
+  render() {
+    const { policies, auth } = this.props;
+    const { team } = auth;
+    if (!team) return null;

-  return (
-    <Sidebar>
-      <HeaderBlock
-        subheading={
-          <ReturnToApp align="center">
-            <BackIcon color="currentColor" /> {t("Return to App")}
-          </ReturnToApp>
-        }
-        teamName={team.name}
-        logoUrl={team.avatarUrl}
-        onClick={returnToDashboard}
-      />
+    const can = policies.abilities(team.id);

-      <Flex auto column>
-        <Scrollable topShadow>
-          <Section>
-            <Header>{t("Account")}</Header>
-            <SidebarLink
-              to="/settings"
-              icon={<ProfileIcon color="currentColor" />}
-              label={t("Profile")}
-            />
-            <SidebarLink
-              to="/settings/notifications"
-              icon={<EmailIcon color="currentColor" />}
-              label={t("Notifications")}
-            />
-            <SidebarLink
-              to="/settings/tokens"
-              icon={<CodeIcon color="currentColor" />}
-              label={t("API Tokens")}
-            />
-          </Section>
-          <Section>
-            <Header>{t("Team")}</Header>
-            {can.update && (
-              <SidebarLink
-                to="/settings/details"
-                icon={<TeamIcon color="currentColor" />}
-                label={t("Details")}
-              />
-            )}
-            {can.update && (
-              <SidebarLink
-                to="/settings/security"
-                icon={<PadlockIcon color="currentColor" />}
-                label={t("Security")}
-              />
-            )}
-            <SidebarLink
-              to="/settings/people"
-              icon={<UserIcon color="currentColor" />}
-              exact={false}
-              label={t("People")}
-            />
-            <SidebarLink
-              to="/settings/groups"
-              icon={<GroupIcon color="currentColor" />}
-              exact={false}
-              label={t("Groups")}
-            />
-            <SidebarLink
-              to="/settings/shares"
-              icon={<LinkIcon color="currentColor" />}
-              label={t("Share Links")}
-            />
-            {can.export && (
-              <SidebarLink
-                to="/settings/export"
-                icon={<DocumentIcon color="currentColor" />}
-                label={t("Export Data")}
-              />
-            )}
-          </Section>
-          {can.update && (
+    return (
+      <Sidebar>
+        <HeaderBlock
+          subheading={
+            <ReturnToApp align="center">
+              <BackIcon color="currentColor" /> Return to App
+            </ReturnToApp>
+          }
+          teamName={team.name}
+          logoUrl={team.avatarUrl}
+          onClick={this.returnToDashboard}
+        />
+
+        <Flex auto column>
+          <Scrollable shadow>
            <Section>
-              <Header>{t("Integrations")}</Header>
+              <Header>Account</Header>
              <SidebarLink
-                to="/settings/integrations/slack"
-                icon={<SlackIcon color="currentColor" />}
-                label="Slack"
+                to="/settings"
+                icon={<ProfileIcon color="currentColor" />}
+                label="Profile"
              />
-              {isHosted && (
+              <SidebarLink
+                to="/settings/notifications"
+                icon={<EmailIcon color="currentColor" />}
+                label="Notifications"
+              />
+              <SidebarLink
+                to="/settings/tokens"
+                icon={<CodeIcon color="currentColor" />}
+                label="API Tokens"
+              />
+            </Section>
+            <Section>
+              <Header>Team</Header>
+              {can.update && (
+                <SidebarLink
+                  to="/settings/details"
+                  icon={<TeamIcon color="currentColor" />}
+                  label="Details"
+                />
+              )}
+              {can.update && (
+                <SidebarLink
+                  to="/settings/security"
+                  icon={<PadlockIcon color="currentColor" />}
+                  label="Security"
+                />
+              )}
+              <SidebarLink
+                to="/settings/people"
+                icon={<UserIcon color="currentColor" />}
+                exact={false}
+                label="People"
+              />
+              <SidebarLink
+                to="/settings/groups"
+                icon={<GroupIcon color="currentColor" />}
+                exact={false}
+                label="Groups"
+              />
+              <SidebarLink
+                to="/settings/shares"
+                icon={<LinkIcon color="currentColor" />}
+                label="Share Links"
+              />
+              {can.auditLog && (
+                <SidebarLink
+                  to="/settings/events"
+                  icon={<BulletedListIcon color="currentColor" />}
+                  label="Audit Log"
+                />
+              )}
+              {can.export && (
+                <SidebarLink
+                  to="/settings/export"
+                  icon={<DocumentIcon color="currentColor" />}
+                  label="Export Data"
+                />
+              )}
+            </Section>
+            {can.update && (
+              <Section>
+                <Header>Integrations</Header>
+                <SidebarLink
+                  to="/settings/integrations/slack"
+                  icon={<SlackIcon color="currentColor" />}
+                  label="Slack"
+                />
                <SidebarLink
                  to="/settings/integrations/zapier"
                  icon={<ZapierIcon color="currentColor" />}
                  label="Zapier"
                />
-              )}
-            </Section>
-          )}
-          {can.update && !isHosted && (
-            <Section>
-              <Header>{t("Installation")}</Header>
-              <Version />
-            </Section>
-          )}
-        </Scrollable>
-      </Flex>
-    </Sidebar>
-  );
+              </Section>
+            )}
+            {can.update && env.DEPLOYMENT !== "hosted" && (
+              <Section>
+                <Header>Installation</Header>
+                <Version />
+              </Section>
+            )}
+          </Scrollable>
+        </Flex>
+      </Sidebar>
+    );
+  }
 }

 const BackIcon = styled(ExpandedIcon)`
@@ -156,4 +168,4 @@ const ReturnToApp = styled(Flex)`
  height: 16px;
 `;

-export default observer(SettingsSidebar);
+export default inject("auth", "policies")(SettingsSidebar);
@@ -1,274 +1,120 @@
 // @flow
-import { observer } from "mobx-react";
+import { observer, inject } from "mobx-react";
+import { CloseIcon, MenuIcon } from "outline-icons";
 import * as React from "react";
-import { useTranslation } from "react-i18next";
-import { Portal } from "react-portal";
-import { useLocation } from "react-router-dom";
-import styled, { useTheme } from "styled-components";
+import { withRouter } from "react-router-dom";
+import type { Location } from "react-router-dom";
+import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
+import UiStore from "stores/UiStore";
 import Fade from "components/Fade";
 import Flex from "components/Flex";
-import ResizeBorder from "./components/ResizeBorder";
-import Toggle, { ToggleButton, Positioner } from "./components/Toggle";
-import usePrevious from "hooks/usePrevious";
-import useStores from "hooks/useStores";

 let firstRender = true;
-let ANIMATION_MS = 250;

 type Props = {
  children: React.Node,
+  location: Location,
+  ui: UiStore,
 };

-function Sidebar({ children }: Props) {
-  const [isCollapsing, setCollapsing] = React.useState(false);
-  const theme = useTheme();
-  const { t } = useTranslation();
-  const { ui } = useStores();
-  const location = useLocation();
-  const previousLocation = usePrevious(location);
-
-  const width = ui.sidebarWidth;
-  const collapsed = ui.isEditing || ui.sidebarCollapsed;
-  const maxWidth = theme.sidebarMaxWidth;
-  const minWidth = theme.sidebarMinWidth + 16; // padding
-  const setWidth = ui.setSidebarWidth;
-
-  const [offset, setOffset] = React.useState(0);
-  const [isAnimating, setAnimating] = React.useState(false);
-  const [isResizing, setResizing] = React.useState(false);
-  const isSmallerThanMinimum = width < minWidth;
-
-  const handleDrag = React.useCallback(
-    (event: MouseEvent) => {
-      // suppresses text selection
-      event.preventDefault();
-
-      // this is simple because the sidebar is always against the left edge
-      const width = Math.min(event.pageX - offset, maxWidth);
-      const isSmallerThanCollapsePoint = width < minWidth / 2;
-
-      if (isSmallerThanCollapsePoint) {
-        setWidth(theme.sidebarCollapsedWidth);
-      } else {
-        setWidth(width);
-      }
-    },
-    [theme, offset, minWidth, maxWidth, setWidth]
-  );
-
-  const handleStopDrag = React.useCallback(
-    (event: MouseEvent) => {
-      setResizing(false);
-
-      if (document.activeElement) {
-        document.activeElement.blur();
-      }
-
-      if (isSmallerThanMinimum) {
-        const isSmallerThanCollapsePoint = width < minWidth / 2;
-
-        if (isSmallerThanCollapsePoint) {
-          setAnimating(false);
-          setCollapsing(true);
-          ui.collapseSidebar();
-        } else {
-          setWidth(minWidth);
-          setAnimating(true);
-        }
-      } else {
-        setWidth(width);
-      }
-    },
-    [ui, isSmallerThanMinimum, minWidth, width, setWidth]
-  );
-
-  const handleMouseDown = React.useCallback(
-    (event: MouseEvent) => {
-      setOffset(event.pageX - width);
-      setResizing(true);
-      setAnimating(false);
-    },
-    [width]
-  );
-
-  React.useEffect(() => {
-    if (isAnimating) {
-      setTimeout(() => setAnimating(false), ANIMATION_MS);
+@observer
+class Sidebar extends React.Component<Props> {
+  componentWillReceiveProps = (nextProps: Props) => {
+    if (this.props.location !== nextProps.location) {
+      this.props.ui.hideMobileSidebar();
    }
-  }, [isAnimating]);
+  };

-  React.useEffect(() => {
-    if (isCollapsing) {
-      setTimeout(() => {
-        setWidth(minWidth);
-        setCollapsing(false);
-      }, ANIMATION_MS);
-    }
-  }, [setWidth, minWidth, isCollapsing]);
+  toggleSidebar = () => {
+    this.props.ui.toggleMobileSidebar();
+  };

-  React.useEffect(() => {
-    if (isResizing) {
-      document.addEventListener("mousemove", handleDrag);
-      document.addEventListener("mouseup", handleStopDrag);
-    }
-
-    return () => {
-      document.removeEventListener("mousemove", handleDrag);
-      document.removeEventListener("mouseup", handleStopDrag);
-    };
-  }, [isResizing, handleDrag, handleStopDrag]);
-
-  const handleReset = React.useCallback(() => {
-    ui.setSidebarWidth(theme.sidebarWidth);
-  }, [ui, theme.sidebarWidth]);
-
-  React.useEffect(() => {
-    ui.setSidebarResizing(isResizing);
-  }, [ui, isResizing]);
-
-  React.useEffect(() => {
-    if (location !== previousLocation) {
-      ui.hideMobileSidebar();
-    }
-  }, [ui, location, previousLocation]);
-
-  const style = React.useMemo(
-    () => ({
-      width: `${width}px`,
-    }),
-    [width]
-  );
-
-  const toggleStyle = React.useMemo(
-    () => ({
-      right: "auto",
-      marginLeft: `${collapsed ? theme.sidebarCollapsedWidth : width}px`,
-    }),
-    [width, theme.sidebarCollapsedWidth, collapsed]
-  );
-
-  const content = (
-    <>
+  render() {
+    const { children, ui } = this.props;
+    const content = (
      <Container
-        style={style}
-        $sidebarWidth={ui.sidebarWidth}
-        $isCollapsing={isCollapsing}
-        $isAnimating={isAnimating}
-        $isSmallerThanMinimum={isSmallerThanMinimum}
-        $mobileSidebarVisible={ui.mobileSidebarVisible}
-        $collapsed={collapsed}
+        editMode={ui.editMode}
+        mobileSidebarVisible={ui.mobileSidebarVisible}
        column
      >
-        {ui.mobileSidebarVisible && (
-          <Portal>
-            <Fade>
-              <Background onClick={ui.toggleMobileSidebar} />
-            </Fade>
-          </Portal>
-        )}
-        {children}
-        <ResizeBorder
-          onMouseDown={handleMouseDown}
-          onDoubleClick={ui.sidebarCollapsed ? undefined : handleReset}
-          $isResizing={isResizing}
-        />
-        {ui.sidebarCollapsed && !ui.isEditing && (
-          <Toggle
-            onClick={ui.toggleCollapsedSidebar}
-            direction={"right"}
-            aria-label={t("Expand")}
-          />
-        )}
-      </Container>
-      {!ui.isEditing && (
        <Toggle
-          style={toggleStyle}
-          onClick={ui.toggleCollapsedSidebar}
-          direction={ui.sidebarCollapsed ? "right" : "left"}
-          aria-label={ui.sidebarCollapsed ? t("Expand") : t("Collapse")}
-        />
-      )}
-    </>
-  );
+          onClick={this.toggleSidebar}
+          mobileSidebarVisible={ui.mobileSidebarVisible}
+        >
+          {ui.mobileSidebarVisible ? (
+            <CloseIcon size={32} />
+          ) : (
+            <MenuIcon size={32} />
+          )}
+        </Toggle>
+        {children}
+      </Container>
+    );

-  // Fade in the sidebar on first render after page load
-  if (firstRender) {
-    firstRender = false;
-    return <Fade>{content}</Fade>;
+    // Fade in the sidebar on first render after page load
+    if (firstRender) {
+      firstRender = false;
+      return <Fade>{content}</Fade>;
+    }
+
+    return content;
  }
-
-  return content;
 }

-const Background = styled.a`
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  cursor: default;
-  z-index: ${(props) => props.theme.depths.sidebar - 1};
-  background: rgba(0, 0, 0, 0.5);
-`;
-
 const Container = styled(Flex)`
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  background: ${(props) => props.theme.sidebarBackground};
-  transition: box-shadow 100ms ease-in-out, transform 100ms ease-out,
-    ${(props) => props.theme.backgroundTransition}
-      ${(props) =>
-        props.$isAnimating ? `,width ${ANIMATION_MS}ms ease-out` : ""};
-  transform: translateX(
-    ${(props) => (props.$mobileSidebarVisible ? 0 : "-100%")}
-  );
+  transition: left 100ms ease-out,
+    ${(props) => props.theme.backgroundTransition};
+  margin-left: ${(props) => (props.mobileSidebarVisible ? 0 : "-100%")};
  z-index: ${(props) => props.theme.depths.sidebar};
-  max-width: 70%;
-  min-width: 280px;
-
-  ${Positioner} {
-    display: none;
-  }

  @media print {
    display: none;
-    transform: none;
+    left: 0;
+  }
+
+  &:before,
+  &:after {
+    content: "";
+    background: ${(props) => props.theme.sidebarBackground};
+    position: absolute;
+    top: -50vh;
+    left: 0;
+    width: 100%;
+    height: 50vh;
+  }
+
+  &:after {
+    top: auto;
+    bottom: -50vh;
  }

  ${breakpoint("tablet")`
+    left: ${(props) => (props.editMode ? `-${props.theme.sidebarWidth}` : 0)};
+    width: ${(props) => props.theme.sidebarWidth};
    margin: 0;
    z-index: 3;
-    min-width: 0;
-    transform: translateX(${(props) =>
-      props.$collapsed ? "calc(-100% + 16px)" : 0});
-
-    &:hover,
-    &:focus-within {
-      transform: none;
-      box-shadow: ${(props) =>
-        props.$collapsed
-          ? "rgba(0, 0, 0, 0.2) 1px 0 4px"
-          : props.$isSmallerThanMinimum
-          ? "rgba(0, 0, 0, 0.1) inset -1px 0 2px"
-          : "none"};
-
-      ${Positioner} {
-        display: block;
-      }
-
-      ${ToggleButton} {
-        opacity: 1;
-      }
-    }
-
-    &:not(:hover):not(:focus-within) > div {
-      opacity: ${(props) => (props.$collapsed ? "0" : "1")};
-      transition: opacity 100ms ease-in-out;
-    }
  `};
 `;

-export default observer(Sidebar);
+const Toggle = styled.a`
+  display: flex;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  left: ${(props) => (props.mobileSidebarVisible ? "auto" : 0)};
+  right: ${(props) => (props.mobileSidebarVisible ? 0 : "auto")};
+  z-index: 1;
+  margin: 12px;
+
+  ${breakpoint("tablet")`
+    display: none;
+  `};
+`;
+
+export default withRouter(inject("ui")(Sidebar));
@@ -3,15 +3,11 @@ import * as React from "react";
 import styled from "styled-components";
 import { bounceIn } from "shared/styles/animations";

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

 const Bubble = ({ count }: Props) => {
-  if (!count) {
-    return null;
-  }
-
  return <Count>{count}</Count>;
 };

@@ -1,147 +1,82 @@
 // @flow
+import { observable } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
-import { useDrop } from "react-dnd";
-import styled from "styled-components";
+import DocumentsStore from "stores/DocumentsStore";
 import UiStore from "stores/UiStore";
 import Collection from "models/Collection";
 import Document from "models/Document";
 import CollectionIcon from "components/CollectionIcon";
 import DropToImport from "components/DropToImport";
+import Flex from "components/Flex";
 import DocumentLink from "./DocumentLink";
-import DropCursor from "./DropCursor";
-import EditableTitle from "./EditableTitle";
 import SidebarLink from "./SidebarLink";
-import useStores from "hooks/useStores";
 import CollectionMenu from "menus/CollectionMenu";
-import CollectionSortMenu from "menus/CollectionSortMenu";

-type Props = {|
+type Props = {
  collection: Collection,
  ui: UiStore,
-  canUpdate: boolean,
+  documents: DocumentsStore,
  activeDocument: ?Document,
  prefetchDocument: (id: string) => Promise<void>,
-|};
+};

-function CollectionLink({
-  collection,
-  activeDocument,
-  prefetchDocument,
-  canUpdate,
-  ui,
-}: Props) {
-  const [menuOpen, setMenuOpen] = React.useState(false);
+@observer
+class CollectionLink extends React.Component<Props> {
+  @observable menuOpen = false;

-  const handleTitleChange = React.useCallback(
-    async (name: string) => {
-      await collection.save({ name });
-    },
-    [collection]
-  );
+  render() {
+    const {
+      collection,
+      documents,
+      activeDocument,
+      prefetchDocument,
+      ui,
+    } = this.props;
+    const expanded = collection.id === ui.activeCollectionId;

-  const { documents, policies } = useStores();
-  const expanded = collection.id === ui.activeCollectionId;
-  const manualSort = collection.sort.field === "index";
-  const can = policies.abilities(collection.id);
-
-  // Drop to re-parent
-  const [{ isOver, canDrop }, drop] = useDrop({
-    accept: "document",
-    drop: (item, monitor) => {
-      if (monitor.didDrop()) return;
-      if (!collection) return;
-      documents.move(item.id, collection.id);
-    },
-    canDrop: (item, monitor) => {
-      return policies.abilities(collection.id).update;
-    },
-    collect: (monitor) => ({
-      isOver: !!monitor.isOver({ shallow: true }),
-      canDrop: monitor.canDrop(),
-    }),
-  });
-
-  // Drop to reorder
-  const [{ isOverReorder }, dropToReorder] = useDrop({
-    accept: "document",
-    drop: async (item, monitor) => {
-      if (!collection) return;
-      documents.move(item.id, collection.id, undefined, 0);
-    },
-    collect: (monitor) => ({
-      isOverReorder: !!monitor.isOver(),
-    }),
-  });
-
-  return (
-    <>
-      <div ref={drop} style={{ position: "relative" }}>
-        <DropToImport key={collection.id} collectionId={collection.id}>
-          <SidebarLinkWithPadding
-            key={collection.id}
-            to={collection.url}
-            icon={
-              <CollectionIcon collection={collection} expanded={expanded} />
-            }
-            iconColor={collection.color}
-            expanded={expanded}
-            showActions={menuOpen || expanded}
-            isActiveDrop={isOver && canDrop}
-            label={
-              <EditableTitle
-                title={collection.name}
-                onSubmit={handleTitleChange}
-                canUpdate={canUpdate}
+    return (
+      <DropToImport
+        key={collection.id}
+        collectionId={collection.id}
+        activeClassName="activeDropZone"
+      >
+        <SidebarLink
+          key={collection.id}
+          to={collection.url}
+          icon={<CollectionIcon collection={collection} expanded={expanded} />}
+          iconColor={collection.color}
+          expanded={expanded}
+          hideDisclosure
+          menuOpen={this.menuOpen}
+          label={collection.name}
+          exact={false}
+          menu={
+            <CollectionMenu
+              position="right"
+              collection={collection}
+              onOpen={() => (this.menuOpen = true)}
+              onClose={() => (this.menuOpen = false)}
+            />
+          }
+        >
+          <Flex column>
+            {collection.documents.map((node) => (
+              <DocumentLink
+                key={node.id}
+                node={node}
+                documents={documents}
+                collection={collection}
+                activeDocument={activeDocument}
+                prefetchDocument={prefetchDocument}
+                depth={1.5}
              />
-            }
-            exact={false}
-            menu={
-              <>
-                {can.update && (
-                  <CollectionSortMenuWithMargin
-                    collection={collection}
-                    onOpen={() => setMenuOpen(true)}
-                    onClose={() => setMenuOpen(false)}
-                  />
-                )}
-                <CollectionMenu
-                  collection={collection}
-                  onOpen={() => setMenuOpen(true)}
-                  onClose={() => setMenuOpen(false)}
-                />
-              </>
-            }
-          />
-        </DropToImport>
-        {expanded && manualSort && (
-          <DropCursor isActiveDrop={isOverReorder} innerRef={dropToReorder} />
-        )}
-      </div>
-
-      {expanded &&
-        collection.documents.map((node, index) => (
-          <DocumentLink
-            key={node.id}
-            node={node}
-            collection={collection}
-            activeDocument={activeDocument}
-            prefetchDocument={prefetchDocument}
-            canUpdate={canUpdate}
-            depth={1.5}
-            index={index}
-          />
-        ))}
-    </>
-  );
+            ))}
+          </Flex>
+        </SidebarLink>
+      </DropToImport>
+    );
+  }
 }

-const SidebarLinkWithPadding = styled(SidebarLink)`
-  padding-right: 60px;
-`;
-
-const CollectionSortMenuWithMargin = styled(CollectionSortMenu)`
-  margin-right: 4px;
-`;
-
-export default observer(CollectionLink);
+export default CollectionLink;
@@ -2,7 +2,6 @@
 import { observer, inject } from "mobx-react";
 import { PlusIcon } from "outline-icons";
 import * as React from "react";
-import { withTranslation, type TFunction } from "react-i18next";
 import keydown from "react-keydown";
 import { withRouter, type RouterHistory } from "react-router-dom";

@@ -25,7 +24,6 @@ type Props = {
  documents: DocumentsStore,
  onCreateCollection: () => void,
  ui: UiStore,
-  t: TFunction,
 };

@observer
@@ -42,6 +40,8 @@ class Collections extends React.Component<Props> {

  @keydown("n")
  goToNewDocument() {
+    if (this.props.ui.editMode) return;
+
    const { activeCollectionId } = this.props.ui;
    if (!activeCollectionId) return;

@@ -52,17 +52,17 @@ class Collections extends React.Component<Props> {
  }

  render() {
-    const { collections, ui, policies, documents, t } = this.props;
+    const { collections, ui, documents } = this.props;

    const content = (
      <>
        {collections.orderedData.map((collection) => (
          <CollectionLink
            key={collection.id}
+            documents={documents}
            collection={collection}
            activeDocument={documents.active}
            prefetchDocument={documents.prefetchDocument}
-            canUpdate={policies.abilities(collection.id).update}
            ui={ui}
          />
        ))}
@@ -70,7 +70,7 @@ class Collections extends React.Component<Props> {
          to="/collections"
          onClick={this.props.onCreateCollection}
          icon={<PlusIcon color="currentColor" />}
-          label={`${t("New collection")}…`}
+          label="New collection…"
          exact
        />
      </>
@@ -78,7 +78,7 @@ class Collections extends React.Component<Props> {

    return (
      <Flex column>
-        <Header>{t("Collections")}</Header>
+        <Header>Collections</Header>
        {collections.isLoaded ? (
          this.isPreloaded ? (
            content
@@ -93,6 +93,9 @@ class Collections extends React.Component<Props> {
  }
 }

-export default withTranslation()<Collections>(
-  inject("collections", "ui", "documents", "policies")(withRouter(Collections))
-);
+export default inject(
+  "collections",
+  "ui",
+  "documents",
+  "policies"
+)(withRouter(Collections));
@@ -1,291 +1,140 @@
 // @flow
+import { observable } from "mobx";
 import { observer } from "mobx-react";
-import { CollapsedIcon } from "outline-icons";
 import * as React from "react";
-import { useDrag, useDrop } from "react-dnd";
-import { useTranslation } from "react-i18next";
 import styled from "styled-components";
+import DocumentsStore from "stores/DocumentsStore";
 import Collection from "models/Collection";
 import Document from "models/Document";
 import DropToImport from "components/DropToImport";
 import Fade from "components/Fade";
-import DropCursor from "./DropCursor";
-import EditableTitle from "./EditableTitle";
+import Flex from "components/Flex";
 import SidebarLink from "./SidebarLink";
-import useStores from "hooks/useStores";
 import DocumentMenu from "menus/DocumentMenu";
 import { type NavigationNode } from "types";

-type Props = {|
+type Props = {
  node: NavigationNode,
-  canUpdate: boolean,
+  documents: DocumentsStore,
  collection?: Collection,
  activeDocument: ?Document,
+  activeDocumentRef?: (?HTMLElement) => void,
  prefetchDocument: (documentId: string) => Promise<void>,
  depth: number,
-  index: number,
-  parentId?: string,
-|};
+};

-function DocumentLink({
-  node,
-  canUpdate,
-  collection,
-  activeDocument,
-  prefetchDocument,
-  depth,
-  index,
-  parentId,
-}: Props) {
-  const { documents, policies } = useStores();
-  const { t } = useTranslation();
+@observer
+class DocumentLink extends React.Component<Props> {
+  @observable menuOpen = false;

-  const isActiveDocument = activeDocument && activeDocument.id === node.id;
-  const hasChildDocuments = !!node.children.length;
-
-  const document = documents.get(node.id);
-  const { fetchChildDocuments } = documents;
-
-  React.useEffect(() => {
-    if (isActiveDocument && hasChildDocuments) {
-      fetchChildDocuments(node.id);
+  componentDidMount() {
+    if (this.isActiveDocument() && this.hasChildDocuments()) {
+      this.props.documents.fetchChildDocuments(this.props.node.id);
    }
-  }, [fetchChildDocuments, node, hasChildDocuments, isActiveDocument]);
+  }

-  const pathToNode = React.useMemo(
-    () =>
-      collection && collection.pathToDocument(node.id).map((entry) => entry.id),
-    [collection, node]
-  );
+  componentDidUpdate(prevProps: Props) {
+    if (prevProps.activeDocument !== this.props.activeDocument) {
+      if (this.isActiveDocument() && this.hasChildDocuments()) {
+        this.props.documents.fetchChildDocuments(this.props.node.id);
+      }
+    }
+  }

-  const showChildren = React.useMemo(() => {
-    return !!(
-      hasChildDocuments &&
+  handleMouseEnter = (ev: SyntheticEvent<>) => {
+    const { node, prefetchDocument } = this.props;
+
+    ev.stopPropagation();
+    ev.preventDefault();
+    prefetchDocument(node.id);
+  };
+
+  isActiveDocument = () => {
+    return (
+      this.props.activeDocument &&
+      this.props.activeDocument.id === this.props.node.id
+    );
+  };
+
+  hasChildDocuments = () => {
+    return !!this.props.node.children.length;
+  };
+
+  render() {
+    const {
+      node,
+      documents,
+      collection,
+      activeDocument,
+      activeDocumentRef,
+      prefetchDocument,
+      depth,
+    } = this.props;
+
+    const showChildren = !!(
      activeDocument &&
      collection &&
      (collection
-        .pathToDocument(activeDocument.id)
+        .pathToDocument(activeDocument)
        .map((entry) => entry.id)
        .includes(node.id) ||
-        isActiveDocument)
+        this.isActiveDocument())
    );
-  }, [hasChildDocuments, activeDocument, isActiveDocument, node, collection]);
+    const document = documents.get(node.id);

-  const [expanded, setExpanded] = React.useState(showChildren);
-
-  React.useEffect(() => {
-    if (showChildren) {
-      setExpanded(showChildren);
-    }
-  }, [showChildren]);
-
-  // when the last child document is removed,
-  // also close the local folder state to closed
-  React.useEffect(() => {
-    if (expanded && !hasChildDocuments) {
-      setExpanded(false);
-    }
-  }, [expanded, hasChildDocuments]);
-
-  const handleDisclosureClick = React.useCallback(
-    (ev: SyntheticEvent<>) => {
-      ev.preventDefault();
-      ev.stopPropagation();
-      setExpanded(!expanded);
-    },
-    [expanded]
-  );
-
-  const handleMouseEnter = React.useCallback(
-    (ev: SyntheticEvent<>) => {
-      prefetchDocument(node.id);
-    },
-    [prefetchDocument, node]
-  );
-
-  const handleTitleChange = React.useCallback(
-    async (title: string) => {
-      if (!document) return;
-
-      await documents.update({
-        id: document.id,
-        lastRevision: document.revision,
-        text: document.text,
-        title,
-      });
-    },
-    [documents, document]
-  );
-
-  const [menuOpen, setMenuOpen] = React.useState(false);
-  const isMoving = documents.movingDocumentId === node.id;
-  const manualSort = collection?.sort.field === "index";
-
-  // Draggable
-  const [{ isDragging }, drag] = useDrag({
-    item: { type: "document", ...node, depth, active: isActiveDocument },
-    collect: (monitor) => ({
-      isDragging: !!monitor.isDragging(),
-    }),
-    canDrag: (monitor) => {
-      return policies.abilities(node.id).move;
-    },
-  });
-
-  const hoverExpanding = React.useRef(null);
-
-  // We set a timeout when the user first starts hovering over the document link,
-  // to trigger expansion of children. Clear this timeout when they stop hovering.
-  const resetHoverExpanding = React.useCallback(() => {
-    if (hoverExpanding.current) {
-      clearTimeout(hoverExpanding.current);
-      hoverExpanding.current = null;
-    }
-  }, []);
-
-  // Drop to re-parent
-  const [{ isOverReparent, canDropToReparent }, dropToReparent] = useDrop({
-    accept: "document",
-    drop: async (item, monitor) => {
-      if (monitor.didDrop()) return;
-      if (!collection) return;
-      documents.move(item.id, collection.id, node.id);
-    },
-
-    canDrop: (item, monitor) =>
-      pathToNode && !pathToNode.includes(monitor.getItem().id),
-
-    hover: (item, monitor) => {
-      // Enables expansion of document children when hovering over the document
-      // for more than half a second.
-      if (
-        hasChildDocuments &&
-        monitor.canDrop() &&
-        monitor.isOver({ shallow: true })
-      ) {
-        if (!hoverExpanding.current) {
-          hoverExpanding.current = setTimeout(() => {
-            hoverExpanding.current = null;
-            if (monitor.isOver({ shallow: true })) {
-              setExpanded(true);
+    return (
+      <Flex
+        column
+        key={node.id}
+        ref={this.isActiveDocument() ? activeDocumentRef : undefined}
+        onMouseEnter={this.handleMouseEnter}
+      >
+        <DropToImport documentId={node.id} activeClassName="activeDropZone">
+          <SidebarLink
+            to={{
+              pathname: node.url,
+              state: { title: node.title },
+            }}
+            expanded={showChildren ? true : undefined}
+            label={node.title || "Untitled"}
+            depth={depth}
+            exact={false}
+            menuOpen={this.menuOpen}
+            menu={
+              document ? (
+                <Fade>
+                  <DocumentMenu
+                    position="right"
+                    document={document}
+                    onOpen={() => (this.menuOpen = true)}
+                    onClose={() => (this.menuOpen = false)}
+                  />
+                </Fade>
+              ) : undefined
            }
-          }, 500);
-        }
-      }
-    },
-
-    collect: (monitor) => ({
-      isOverReparent: !!monitor.isOver({ shallow: true }),
-      canDropToReparent: monitor.canDrop(),
-    }),
-  });
-
-  // Drop to reorder
-  const [{ isOverReorder }, dropToReorder] = useDrop({
-    accept: "document",
-    drop: async (item, monitor) => {
-      if (!collection) return;
-      if (item.id === node.id) return;
-
-      if (expanded) {
-        documents.move(item.id, collection.id, node.id, 0);
-        return;
-      }
-
-      documents.move(item.id, collection.id, parentId, index + 1);
-    },
-    collect: (monitor) => ({
-      isOverReorder: !!monitor.isOver(),
-    }),
-  });
-
-  return (
-    <>
-      <div style={{ position: "relative" }} onDragLeave={resetHoverExpanding}>
-        <Draggable
-          key={node.id}
-          ref={drag}
-          $isDragging={isDragging}
-          $isMoving={isMoving}
-        >
-          <div ref={dropToReparent}>
-            <DropToImport documentId={node.id} activeClassName="activeDropZone">
-              <SidebarLink
-                onMouseEnter={handleMouseEnter}
-                to={{
-                  pathname: node.url,
-                  state: { title: node.title },
-                }}
-                label={
-                  <>
-                    {hasChildDocuments && (
-                      <Disclosure
-                        expanded={expanded && !isDragging}
-                        onClick={handleDisclosureClick}
-                      />
-                    )}
-                    <EditableTitle
-                      title={node.title || t("Untitled")}
-                      onSubmit={handleTitleChange}
-                      canUpdate={canUpdate}
-                    />
-                  </>
-                }
-                isActiveDrop={isOverReparent && canDropToReparent}
-                depth={depth}
-                exact={false}
-                showActions={menuOpen}
-                menu={
-                  document && !isMoving ? (
-                    <Fade>
-                      <DocumentMenu
-                        document={document}
-                        onOpen={() => setMenuOpen(true)}
-                        onClose={() => setMenuOpen(false)}
-                      />
-                    </Fade>
-                  ) : undefined
-                }
-              />
-            </DropToImport>
-          </div>
-        </Draggable>
-        {manualSort && (
-          <DropCursor isActiveDrop={isOverReorder} innerRef={dropToReorder} />
-        )}
-      </div>
-      {expanded && !isDragging && (
-        <>
-          {node.children.map((childNode, index) => (
-            <ObservedDocumentLink
-              key={childNode.id}
-              collection={collection}
-              node={childNode}
-              activeDocument={activeDocument}
-              prefetchDocument={prefetchDocument}
-              depth={depth + 1}
-              canUpdate={canUpdate}
-              index={index}
-              parentId={node.id}
-            />
-          ))}
-        </>
-      )}
-    </>
-  );
+          >
+            {this.hasChildDocuments() && (
+              <DocumentChildren column>
+                {node.children.map((childNode) => (
+                  <DocumentLink
+                    key={childNode.id}
+                    collection={collection}
+                    node={childNode}
+                    documents={documents}
+                    activeDocument={activeDocument}
+                    prefetchDocument={prefetchDocument}
+                    depth={depth + 1}
+                  />
+                ))}
+              </DocumentChildren>
+            )}
+          </SidebarLink>
+        </DropToImport>
+      </Flex>
+    );
+  }
 }

-const Draggable = styled("div")`
-  opacity: ${(props) => (props.$isDragging || props.$isMoving ? 0.5 : 1)};
-  pointer-events: ${(props) => (props.$isMoving ? "none" : "all")};
-`;
+const DocumentChildren = styled(Flex)``;

-const Disclosure = styled(CollapsedIcon)`
-  position: absolute;
-  left: -24px;
-
-  ${({ expanded }) => !expanded && "transform: rotate(-90deg);"};
-`;
-
-const ObservedDocumentLink = observer(DocumentLink);
-export default ObservedDocumentLink;
+export default DocumentLink;
@@ -1,42 +0,0 @@
-// @flow
-import * as React from "react";
-import styled, { withTheme } from "styled-components";
-import { type Theme } from "types";
-
-function DropCursor({
-  isActiveDrop,
-  innerRef,
-  theme,
-}: {
-  isActiveDrop: boolean,
-  innerRef: React.Ref<any>,
-  theme: Theme,
-}) {
-  return <Cursor isOver={isActiveDrop} ref={innerRef} />;
-}
-
-// transparent hover zone with a thin visible band vertically centered
-const Cursor = styled("div")`
-  opacity: ${(props) => (props.isOver ? 1 : 0)};
-  transition: opacity 150ms;
-
-  position: absolute;
-  z-index: 1;
-
-  width: 100%;
-  height: 14px;
-  bottom: -7px;
-  background: transparent;
-
-  ::after {
-    background: ${(props) => props.theme.slateDark};
-    position: absolute;
-    top: 6px;
-    content: "";
-    height: 2px;
-    border-radius: 2px;
-    width: 100%;
-  }
-`;
-
-export default withTheme(DropCursor);
@@ -1,101 +0,0 @@
-// @flow
-import * as React from "react";
-import styled from "styled-components";
-import useStores from "hooks/useStores";
-
-type Props = {|
-  onSubmit: (title: string) => Promise<void>,
-  title: string,
-  canUpdate: boolean,
-|};
-
-function EditableTitle({ title, onSubmit, canUpdate }: Props) {
-  const [isEditing, setIsEditing] = React.useState(false);
-  const [originalValue, setOriginalValue] = React.useState(title);
-  const [value, setValue] = React.useState(title);
-  const { ui } = useStores();
-
-  React.useEffect(() => {
-    setValue(title);
-  }, [title]);
-
-  const handleChange = React.useCallback((event) => {
-    setValue(event.target.value);
-  }, []);
-
-  const handleDoubleClick = React.useCallback((event) => {
-    event.preventDefault();
-    event.stopPropagation();
-    setIsEditing(true);
-  }, []);
-
-  const handleKeyDown = React.useCallback(
-    (event) => {
-      if (event.key === "Escape") {
-        setIsEditing(false);
-        setValue(originalValue);
-      }
-    },
-    [originalValue]
-  );
-
-  const handleSave = React.useCallback(async () => {
-    setIsEditing(false);
-
-    if (value === originalValue) {
-      return;
-    }
-
-    if (document) {
-      try {
-        await onSubmit(value);
-        setOriginalValue(value);
-      } catch (error) {
-        setValue(originalValue);
-        ui.showToast(error.message, {
-          type: "error",
-        });
-        throw error;
-      }
-    }
-  }, [ui, originalValue, value, onSubmit]);
-
-  return (
-    <>
-      {isEditing ? (
-        <form onSubmit={handleSave}>
-          <Input
-            type="text"
-            value={value}
-            onKeyDown={handleKeyDown}
-            onChange={handleChange}
-            onBlur={handleSave}
-            autoFocus
-          />
-        </form>
-      ) : (
-        <span onDoubleClick={canUpdate ? handleDoubleClick : undefined}>
-          {value}
-        </span>
-      )}
-    </>
-  );
-}
-
-const Input = styled.input`
-  margin-left: -4px;
-  color: ${(props) => props.theme.sidebarText};
-  background: ${(props) => props.theme.background};
-  width: calc(100% - 10px);
-  border-radius: 3px;
-  border: 1px solid ${(props) => props.theme.inputBorderFocused};
-  padding: 5px 6px;
-  margin: -4px;
-  height: 32px;
-
-  &:focus {
-    outline-color: ${(props) => props.theme.primary};
-  }
-`;
-
-export default EditableTitle;
@@ -5,35 +5,33 @@ import styled from "styled-components";
 import Flex from "components/Flex";
 import TeamLogo from "components/TeamLogo";

-type Props = {|
+type Props = {
  teamName: string,
  subheading: React.Node,
  showDisclosure?: boolean,
-  onClick: (event: SyntheticEvent<>) => void,
  logoUrl: string,
-|};
+};

-const HeaderBlock = React.forwardRef<Props, any>(
-  ({ showDisclosure, teamName, subheading, logoUrl, ...rest }: Props, ref) => (
-    <Wrapper>
-      <Header justify="flex-start" align="center" ref={ref} {...rest}>
-        <TeamLogo
-          alt={`${teamName} logo`}
-          src={logoUrl}
-          width={38}
-          height={38}
-        />
-        <Flex align="flex-start" column>
-          <TeamName showDisclosure>
-            {teamName}{" "}
-            {showDisclosure && <StyledExpandedIcon color="currentColor" />}
-          </TeamName>
-          <Subheading>{subheading}</Subheading>
-        </Flex>
-      </Header>
-    </Wrapper>
-  )
-);
+function HeaderBlock({
+  showDisclosure,
+  teamName,
+  subheading,
+  logoUrl,
+  ...rest
+}: Props) {
+  return (
+    <Header justify="flex-start" align="center" {...rest}>
+      <TeamLogo alt={`${teamName} logo`} src={logoUrl} />
+      <Flex align="flex-start" column>
+        <TeamName showDisclosure>
+          {teamName}{" "}
+          {showDisclosure && <StyledExpandedIcon color="currentColor" />}
+        </TeamName>
+        <Subheading>{subheading}</Subheading>
+      </Flex>
+    </Header>
+  );
+}

 const StyledExpandedIcon = styled(ExpandedIcon)`
  position: absolute;
@@ -46,7 +44,6 @@ const Subheading = styled.div`
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 500;
-  white-space: nowrap;
  color: ${(props) => props.theme.sidebarText};
 `;

@@ -56,24 +53,14 @@ const TeamName = styled.div`
  padding-right: 24px;
  font-weight: 600;
  color: ${(props) => props.theme.text};
-  white-space: nowrap;
  text-decoration: none;
  font-size: 16px;
 `;

-const Wrapper = styled.div`
+const Header = styled(Flex)`
  flex-shrink: 0;
-  overflow: hidden;
-`;
-
-const Header = styled.button`
-  display: flex;
-  align-items: center;
-  padding: 20px 24px;
-  background: none;
-  line-height: inherit;
-  border: 0;
-  margin: 0;
+  padding: 16px 24px;
+  position: relative;
  cursor: pointer;
  width: 100%;

@@ -1,105 +0,0 @@
-// @flow
-// ref: https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/NavLink.js
-
-// This file is pulled almost 100% from react-router with the addition of one
-// thing, automatic scroll to the active link. It's worth the copy paste because
-// it avoids recalculating the link match again.
-import { createLocation } from "history";
-import * as React from "react";
-import {
-  __RouterContext as RouterContext,
-  matchPath,
-  type Location,
-} from "react-router";
-import { Link } from "react-router-dom";
-import scrollIntoView from "smooth-scroll-into-view-if-needed";
-
-const resolveToLocation = (to, currentLocation) =>
-  typeof to === "function" ? to(currentLocation) : to;
-
-const normalizeToLocation = (to, currentLocation) => {
-  return typeof to === "string"
-    ? createLocation(to, null, null, currentLocation)
-    : to;
-};
-
-const joinClassnames = (...classnames) => {
-  return classnames.filter((i) => i).join(" ");
-};
-
-type Props = {|
-  activeClassName?: String,
-  activeStyle?: Object,
-  className?: string,
-  exact?: boolean,
-  isActive?: any,
-  location?: Location,
-  strict?: boolean,
-  style?: Object,
-  to: string,
-|};
-
-/**
- * A <Link> wrapper that knows if it's "active" or not.
- */
-const NavLink = ({
-  "aria-current": ariaCurrent = "page",
-  activeClassName = "active",
-  activeStyle,
-  className: classNameProp,
-  exact,
-  isActive: isActiveProp,
-  location: locationProp,
-  strict,
-  style: styleProp,
-  to,
-  ...rest
-}: Props) => {
-  const linkRef = React.useRef();
-  const context = React.useContext(RouterContext);
-  const currentLocation = locationProp || context.location;
-  const toLocation = normalizeToLocation(
-    resolveToLocation(to, currentLocation),
-    currentLocation
-  );
-  const { pathname: path } = toLocation;
-  // Regex taken from: https://github.com/pillarjs/path-to-regexp/blob/master/index.js#L202
-  const escapedPath = path && path.replace(/([.+*?=^!:${}()[\]|/\\])/g, "\\$1");
-
-  const match = escapedPath
-    ? matchPath(currentLocation.pathname, {
-        path: escapedPath,
-        exact,
-        strict,
-      })
-    : null;
-  const isActive = !!(isActiveProp
-    ? isActiveProp(match, currentLocation)
-    : match);
-
-  const className = isActive
-    ? joinClassnames(classNameProp, activeClassName)
-    : classNameProp;
-  const style = isActive ? { ...styleProp, ...activeStyle } : styleProp;
-
-  React.useEffect(() => {
-    if (isActive && linkRef.current) {
-      scrollIntoView(linkRef.current, {
-        scrollMode: "if-needed",
-        behavior: "instant",
-      });
-    }
-  }, [linkRef, isActive]);
-
-  const props = {
-    "aria-current": (isActive && ariaCurrent) || null,
-    className,
-    style,
-    to: toLocation,
-    ...rest,
-  };
-
-  return <Link ref={linkRef} {...props} />;
-};
-
-export default NavLink;
@@ -1,13 +0,0 @@
-// @flow
-import styled from "styled-components";
-
-const ResizeBorder = styled.div`
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: -6px;
-  width: 12px;
-  cursor: ew-resize;
-`;
-
-export default ResizeBorder;
@@ -5,9 +5,7 @@ import Flex from "components/Flex";
 const Section = styled(Flex)`
  position: relative;
  flex-direction: column;
-  margin: 20px 8px;
-  min-width: ${(props) => props.theme.sidebarMinWidth}px;
-  flex-shrink: 0;
+  margin: 24px 8px;
 `;

 export default Section;
@@ -1,88 +1,103 @@
 // @flow
+import { observable, action } from "mobx";
+import { observer } from "mobx-react";
+import { CollapsedIcon } from "outline-icons";
 import * as React from "react";
-import { withRouter, type RouterHistory, type Match } from "react-router-dom";
+import { withRouter, NavLink } from "react-router-dom";
 import styled, { withTheme } from "styled-components";
-import breakpoint from "styled-components-breakpoint";
-import EventBoundary from "components/EventBoundary";
-import NavLink from "./NavLink";
-import { type Theme } from "types";
+import Flex from "components/Flex";

 type Props = {
  to?: string | Object,
  href?: string | Object,
-  innerRef?: (?HTMLElement) => void,
  onClick?: (SyntheticEvent<>) => void,
-  onMouseEnter?: (SyntheticEvent<>) => void,
-  className?: string,
  children?: React.Node,
  icon?: React.Node,
+  expanded?: boolean,
  label?: React.Node,
  menu?: React.Node,
-  showActions?: boolean,
+  menuOpen?: boolean,
+  hideDisclosure?: boolean,
  iconColor?: string,
  active?: boolean,
-  isActiveDrop?: boolean,
-  history: RouterHistory,
-  match: Match,
-  theme: Theme,
+  theme: Object,
  exact?: boolean,
  depth?: number,
 };

-function SidebarLink({
-  icon,
-  children,
-  onClick,
-  onMouseEnter,
-  to,
-  label,
-  active,
-  isActiveDrop,
-  menu,
-  showActions,
-  theme,
-  exact,
-  href,
-  depth,
-  history,
-  match,
-  className,
-}: Props) {
-  const style = React.useMemo(() => {
-    return {
-      paddingLeft: `${(depth || 0) * 16 + 16}px`,
+@observer
+class SidebarLink extends React.Component<Props> {
+  @observable expanded: ?boolean = this.props.expanded;
+
+  style = {
+    paddingLeft: `${(this.props.depth || 0) * 16 + 16}px`,
+  };
+
+  componentWillReceiveProps(nextProps: Props) {
+    if (nextProps.expanded !== undefined) {
+      this.expanded = nextProps.expanded;
+    }
+  }
+
+  @action
+  handleClick = (ev: SyntheticEvent<>) => {
+    ev.preventDefault();
+    ev.stopPropagation();
+
+    this.expanded = !this.expanded;
+  };
+
+  @action
+  handleExpand = () => {
+    this.expanded = true;
+  };
+
+  render() {
+    const {
+      icon,
+      children,
+      onClick,
+      to,
+      label,
+      active,
+      menu,
+      menuOpen,
+      hideDisclosure,
+      exact,
+      href,
+    } = this.props;
+    const showDisclosure = !!children && !hideDisclosure;
+    const activeStyle = {
+      color: this.props.theme.text,
+      background: this.props.theme.sidebarItemBackground,
+      fontWeight: 600,
+      ...this.style,
    };
-  }, [depth]);

-  const activeStyle = {
-    fontWeight: 600,
-    color: theme.text,
-    background: theme.sidebarItemBackground,
-    ...style,
-  };
-
-  const activeDropStyle = {
-    fontWeight: 600,
-  };
-
-  return (
-    <Link
-      $isActiveDrop={isActiveDrop}
-      activeStyle={isActiveDrop ? activeDropStyle : activeStyle}
-      style={active ? activeStyle : style}
-      onClick={onClick}
-      onMouseEnter={onMouseEnter}
-      exact={exact !== false}
-      to={to}
-      as={to ? undefined : href ? "a" : "div"}
-      href={href}
-      className={className}
-    >
-      {icon && <IconWrapper>{icon}</IconWrapper>}
-      <Label>{label}</Label>
-      {menu && <Actions showActions={showActions}>{menu}</Actions>}
-    </Link>
-  );
+    return (
+      <Wrapper column>
+        <StyledNavLink
+          activeStyle={activeStyle}
+          style={active ? activeStyle : this.style}
+          onClick={onClick}
+          exact={exact !== false}
+          to={to}
+          as={to ? undefined : href ? "a" : "div"}
+          href={href}
+        >
+          {icon && <IconWrapper>{icon}</IconWrapper>}
+          <Label onClick={this.handleExpand}>
+            {showDisclosure && (
+              <Disclosure expanded={this.expanded} onClick={this.handleClick} />
+            )}
+            {label}
+          </Label>
+          {menu && <Action menuOpen={menuOpen}>{menu}</Action>}
+        </StyledNavLink>
+        {this.expanded && children}
+      </Wrapper>
+    );
+  }
 }

 // accounts for whitespace around icon
@@ -90,75 +105,56 @@ const IconWrapper = styled.span`
  margin-left: -4px;
  margin-right: 4px;
  height: 24px;
-  overflow: hidden;
-  flex-shrink: 0;
 `;

-const Actions = styled(EventBoundary)`
-  display: ${(props) => (props.showActions ? "inline-flex" : "none")};
+const Action = styled.span`
+  display: ${(props) => (props.menuOpen ? "inline" : "none")};
  position: absolute;
  top: 4px;
  right: 4px;
  color: ${(props) => props.theme.textTertiary};
-  transition: opacity 50ms;

  svg {
-    color: ${(props) => props.theme.textSecondary};
-    fill: currentColor;
-    opacity: 0.5;
+    opacity: 0.75;
  }

  &:hover {
    svg {
-      opacity: 0.75;
+      opacity: 1;
    }
  }
 `;

-const Link = styled(NavLink)`
+const StyledNavLink = styled(NavLink)`
  display: flex;
  position: relative;
+  overflow: hidden;
  text-overflow: ellipsis;
-  padding: 6px 16px;
+  padding: 4px 16px;
  border-radius: 4px;
-  transition: background 50ms, color 50ms;
-  background: ${(props) =>
-    props.$isActiveDrop ? props.theme.slateDark : "inherit"};
-  color: ${(props) =>
-    props.$isActiveDrop ? props.theme.white : props.theme.sidebarText};
+  color: ${(props) => props.theme.sidebarText};
  font-size: 15px;
  cursor: pointer;
-  overflow: hidden;
-
-  svg {
-    ${(props) => (props.$isActiveDrop ? `fill: ${props.theme.white};` : "")}
-    transition: fill 50ms;
-  }

  &:hover {
-    color: ${(props) =>
-      props.$isActiveDrop ? props.theme.white : props.theme.text};
+    color: ${(props) => props.theme.text};
  }

  &:focus {
    color: ${(props) => props.theme.text};
    background: ${(props) => props.theme.black05};
+    outline: none;
  }

-  &:hover,
-  &:active {
-    > ${Actions} {
-      display: inline-flex;
-
-      svg {
-        opacity: 0.75;
-      }
+  &:hover {
+    > ${Action} {
+      display: inline;
    }
  }
+`;

-  ${breakpoint("tablet")`
-    padding: 4px 16px;
-  `}
+const Wrapper = styled(Flex)`
+  position: relative;
 `;

 const Label = styled.div`
@@ -168,4 +164,11 @@ const Label = styled.div`
  line-height: 1.6;
 `;

+const Disclosure = styled(CollapsedIcon)`
+  position: absolute;
+  left: -24px;
+
+  ${({ expanded }) => !expanded && "transform: rotate(-90deg);"};
+`;
+
 export default withRouter(withTheme(SidebarLink));
@@ -1,75 +0,0 @@
-// @flow
-import * as React from "react";
-import styled from "styled-components";
-import breakpoint from "styled-components-breakpoint";
-
-type Props = {
-  direction: "left" | "right",
-  style?: Object,
-  onClick?: () => any,
-};
-
-const Toggle = React.forwardRef<Props, HTMLButtonElement>(
-  ({ direction = "left", onClick, style }: Props, ref) => {
-    return (
-      <Positioner style={style}>
-        <ToggleButton ref={ref} $direction={direction} onClick={onClick}>
-          <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>
-        </ToggleButton>
-      </Positioner>
-    );
-  }
-);
-
-export const ToggleButton = styled.button`
-  opacity: 0;
-  background: none;
-  transition: opacity 100ms ease-in-out;
-  transform: translateY(-50%)
-    scaleX(${(props) => (props.$direction === "left" ? 1 : -1)});
-  position: absolute;
-  top: 50vh;
-  padding: 8px;
-  border: 0;
-  pointer-events: none;
-  color: ${(props) => props.theme.divider};
-
-  &:active {
-    color: ${(props) => props.theme.sidebarText};
-  }
-
-  ${breakpoint("tablet")`
-    pointer-events: all;
-    cursor: pointer;
-  `}
-`;
-
-export const Positioner = styled.div`
-  z-index: 2;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: -30px;
-  width: 30px;
-
-  &:hover ${ToggleButton}, &:focus-within ${ToggleButton} {
-    opacity: 1;
-  }
-`;
-
-export default Toggle;
@@ -1,8 +0,0 @@
-// @flow
-import * as React from "react";
-
-export const id = "skip-nav";
-
-export default function SkipNavContent() {
-  return <div id={id} />;
-}
@@ -1,34 +0,0 @@
-// @flow
-import * as React from "react";
-import styled from "styled-components";
-import { id } from "components/SkipNavContent";
-
-export default function SkipNavLink() {
-  return <Anchor href={`#${id}`}>Skip navigation</Anchor>;
-}
-
-const Anchor = styled.a`
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  width: 1px;
-  margin: -1px;
-  padding: 0;
-  overflow: hidden;
-  position: absolute;
-  z-index: 1;
-
-  &:focus {
-    padding: 1rem;
-    position: fixed;
-    top: 12px;
-    left: 12px;
-    background: ${(props) => props.theme.background};
-    color: ${(props) => props.theme.text};
-    outline-color: ${(props) => props.theme.primary};
-    z-index: ${(props) => props.theme.depths.popover};
-    width: auto;
-    height: auto;
-    clip: auto;
-  }
-`;
@@ -110,9 +110,7 @@ class SocketProvider extends React.Component<Props> {

    this.socket.on("unauthorized", (err) => {
      this.socket.authenticated = false;
-      ui.showToast(err.message, {
-        type: "error",
-      });
+      ui.showToast(err.message);
      throw err;
    });

@@ -127,8 +125,6 @@ class SocketProvider extends React.Component<Props> {
            if (document) {
              document.deletedAt = documentDescriptor.updatedAt;
            }
-            policies.remove(documentId);
-
            continue;
          }

@@ -176,21 +172,7 @@ class SocketProvider extends React.Component<Props> {
          const collection = collections.get(collectionId) || {};

          if (event.event === "collections.delete") {
-            const collection = collections.get(collectionId);
-            if (collection) {
-              collection.deletedAt = collectionDescriptor.updatedAt;
-            }
-
-            const deletedDocuments = documents.inCollection(collectionId);
-            deletedDocuments.forEach((doc) => {
-              doc.deletedAt = collectionDescriptor.updatedAt;
-              policies.remove(doc.id);
-            });
-
            documents.removeCollectionDocuments(collectionId);
-            memberships.removeCollectionMemberships(collectionId);
-            collections.remove(collectionId);
-            policies.remove(collectionId);
            continue;
          }

@@ -205,10 +187,9 @@ class SocketProvider extends React.Component<Props> {
            await collections.fetch(collectionId, { force: true });
          } catch (err) {
            if (err.statusCode === 404 || err.statusCode === 403) {
+              collections.remove(collectionId);
              documents.removeCollectionDocuments(collectionId);
              memberships.removeCollectionMemberships(collectionId);
-              collections.remove(collectionId);
-              policies.remove(collectionId);
              return;
            }
          }
@@ -1,66 +0,0 @@
-// @flow
-import { StarredIcon, UnstarredIcon } from "outline-icons";
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-import styled from "styled-components";
-import Document from "models/Document";
-import NudeButton from "./NudeButton";
-
-type Props = {|
-  document: Document,
-  size?: number,
-|};
-
-function Star({ size, document, ...rest }: Props) {
-  const { t } = useTranslation();
-  const handleClick = React.useCallback(
-    (ev: SyntheticEvent<>) => {
-      ev.preventDefault();
-      ev.stopPropagation();
-
-      if (document.isStarred) {
-        document.unstar();
-      } else {
-        document.star();
-      }
-    },
-    [document]
-  );
-
-  if (!document) {
-    return null;
-  }
-
-  return (
-    <Button
-      onClick={handleClick}
-      size={size}
-      aria-label={document.isStarred ? t("Unstar") : t("Star")}
-      {...rest}
-    >
-      {document.isStarred ? (
-        <AnimatedStar size={size} color="currentColor" />
-      ) : (
-        <AnimatedStar size={size} color="currentColor" as={UnstarredIcon} />
-      )}
-    </Button>
-  );
-}
-
-const Button = styled(NudeButton)`
-  color: ${(props) => props.theme.text};
-`;
-
-export const AnimatedStar = styled(StarredIcon)`
-  flex-shrink: 0;
-  transition: all 100ms ease-in-out;
-
-  &:hover {
-    transform: scale(1.1);
-  }
-  &:active {
-    transform: scale(0.95);
-  }
-`;
-
-export default Star;
@@ -11,11 +11,12 @@ const H3 = styled.h3`
  margin-top: 22px;
  margin-bottom: 12px;
  line-height: 1;
-  position: relative;
 `;

 const Underline = styled("span")`
-  margin-top: -1px;
+  position: relative;
+  top: 1px;
+
  display: inline-block;
  font-weight: 500;
  font-size: 14px;
@@ -3,33 +3,24 @@ import * as React from "react";
 import styled from "styled-components";
 import { LabelText } from "components/Input";

-type Props = {|
+type Props = {
  width?: number,
  height?: number,
  label?: string,
-  checked?: boolean,
-  disabled?: boolean,
-  onChange: (event: SyntheticInputEvent<HTMLInputElement>) => mixed,
  id?: string,
-|};
+};

-function Switch({ width = 38, height = 20, label, disabled, ...props }: Props) {
+function Switch({ width = 38, height = 20, label, ...props }: Props) {
  const component = (
    <Wrapper width={width} height={height}>
-      <HiddenInput
-        type="checkbox"
-        width={width}
-        height={height}
-        disabled={disabled}
-        {...props}
-      />
+      <HiddenInput type="checkbox" width={width} height={height} {...props} />
      <Slider width={width} height={height} />
    </Wrapper>
  );

  if (label) {
    return (
-      <Label disabled={disabled} htmlFor={props.id}>
+      <Label htmlFor={props.id}>
        {component}
        <LabelText>{label}</LabelText>
      </Label>
@@ -42,8 +33,6 @@ function Switch({ width = 38, height = 20, label, disabled, ...props }: Props) {
 const Label = styled.label`
  display: flex;
  align-items: center;
-
-  ${(props) => (props.disabled ? `opacity: 0.75;` : "")}
 `;

 const Wrapper = styled.label`
@@ -87,11 +76,6 @@ const HiddenInput = styled.input`
  height: 0;
  visibility: hidden;

-  &:disabled + ${Slider} {
-    opacity: 0.75;
-    cursor: default;
-  }
-
  &:checked + ${Slider} {
    background-color: ${(props) => props.theme.primary};
  }
@@ -1,17 +1,18 @@
 // @flow
+import { lighten } from "polished";
 import * as React from "react";
 import { NavLink } from "react-router-dom";
 import styled, { withTheme } from "styled-components";
-import { type Theme } from "types";

 type Props = {
-  theme: Theme,
+  theme: Object,
 };

 const StyledNavLink = styled(NavLink)`
  position: relative;
-  display: inline-flex;
-  align-items: center;
+  bottom: -1px;
+
+  display: inline-block;
  font-weight: 500;
  font-size: 14px;
  color: ${(props) => props.theme.textTertiary};
@@ -23,6 +24,13 @@ const StyledNavLink = styled(NavLink)`
    border-bottom: 3px solid ${(props) => props.theme.divider};
    padding-bottom: 5px;
  }
+
+  &:focus {
+    outline: none;
+    border-bottom: 3px solid
+      ${(props) => lighten(0.4, props.theme.buttonBackground)};
+    padding-bottom: 5px;
+  }
 `;

 function Tab({ theme, ...rest }: Props) {
@@ -8,7 +8,6 @@ const Tabs = styled.nav`
  margin-bottom: 12px;
  overflow-y: auto;
  white-space: nowrap;
-  transition: opacity 250ms ease-out;
 `;

 export const Separator = styled.span`
@@ -2,15 +2,11 @@
 import styled from "styled-components";

 const TeamLogo = styled.img`
-  width: ${(props) =>
-    props.width ? `${props.width}px` : props.size || "auto"};
-  height: ${(props) =>
-    props.height ? `${props.height}px` : props.size || "38px"};
+  width: auto;
+  height: 38px;
  border-radius: 4px;
  background: ${(props) => props.theme.background};
  border: 1px solid ${(props) => props.theme.divider};
-  overflow: hidden;
-  flex-shrink: 0;
 `;

 export default TeamLogo;
@@ -1,38 +1,55 @@
 // @flow
 import distanceInWordsToNow from "date-fns/distance_in_words_to_now";
+import format from "date-fns/format";
 import * as React from "react";
+import Tooltip from "components/Tooltip";

-const LocaleTime = React.lazy(() => import("components/LocaleTime"));
+let callbacks = [];
+
+// This is a shared timer that fires every minute, used for
+// updating all Time components across the page all at once.
+setInterval(() => {
+  callbacks.forEach((cb) => cb());
+}, 1000 * 60);
+
+function eachMinute(fn) {
+  callbacks.push(fn);
+
+  return () => {
+    callbacks = callbacks.filter((cb) => cb !== fn);
+  };
+}

 type Props = {
  dateTime: string,
  children?: React.Node,
-  tooltipDelay?: number,
-  addSuffix?: boolean,
-  shorten?: boolean,
 };

-function Time(props: Props) {
-  let content = distanceInWordsToNow(props.dateTime, {
-    addSuffix: props.addSuffix,
-  });
+class Time extends React.Component<Props> {
+  removeEachMinuteCallback: () => void;

-  if (props.shorten) {
-    content = content
-      .replace("about", "")
-      .replace("less than a minute ago", "just now")
-      .replace("minute", "min");
+  componentDidMount() {
+    this.removeEachMinuteCallback = eachMinute(() => {
+      this.forceUpdate();
+    });
  }

-  return (
-    <React.Suspense
-      fallback={
-        <time dateTime={props.dateTime}>{props.children || content}</time>
-      }
-    >
-      <LocaleTime {...props} />
-    </React.Suspense>
-  );
+  componentWillUnmount() {
+    this.removeEachMinuteCallback();
+  }
+
+  render() {
+    return (
+      <Tooltip
+        tooltip={format(this.props.dateTime, "MMMM Do, YYYY h:mm a")}
+        placement="bottom"
+      >
+        <time dateTime={this.props.dateTime}>
+          {this.props.children || distanceInWordsToNow(this.props.dateTime)}
+        </time>
+      </Tooltip>
+    );
+  }
 }

 export default Time;
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Tom Moor	2aaad03270	refactor	2020-08-20 19:05:48 -07:00
Tom Moor	9252683260	fix: SocketPresence account for socket changing	2020-08-20 00:06:51 -07:00
Tom Moor	f5748eb5e7	check connection on page visibility change	2020-08-19 22:51:18 -07:00