Use theme background colour in InputSelect

* chore: Show all configuration errors at once
fix: Remove requirement for deprecated Slack key
fix: Add requirement for UTILS_SECRET

* chore: Add funding/sponsorship message

.env.sample

@@ -1,26 +1,40 @@
-# Copy this file to .env, remove this comment and change the keys. For development
-# with docker this should mostly work out of the box other than setting the Slack
-# keys (for auth) and the SECRET_KEY.
-#
-# Please use `openssl rand -hex 32` to create SECRET_KEY
+# 👋 Welcome, we're glad you're setting up an installation of Outline. Copy this 
+# file to .env or set the variables in your local environment manually. For 
+# development with docker this should mostly work out  of the box other than 
+# setting the Slack keys and the SECRET_KEY.
+
+
+
+
+# –––––––––––––––– REQUIRED ––––––––––––––––
+
+# Generate a unique random key, you can use `openssl rand -hex 32` in terminal
+# DO NOT LEAVE UNSET
 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
 
-# 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
+# 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.
 
-ENABLE_UPDATES=true
-DEBUG=cache,presenters,events,emails,mailer,utils,multiplayer,server,services
-
-# Third party signin credentials (at least one is required)
+# To configure Slack auth, you'll need to create an Application at
+# => https://api.slack.com/apps
+#
+# When configuring the Client ID, add a redirect URL under "OAuth & Permissions":
+# https://<URL>/auth/slack.callback
 SLACK_KEY=get_a_key_from_slack
 SLACK_SECRET=get_the_secret_of_above_key
 
@@ -28,22 +42,59 @@ SLACK_SECRET=get_the_secret_of_above_key
 # => https://console.cloud.google.com/apis/credentials
 #
 # When configuring the Client ID, add an Authorized redirect URI:
-# https://<your Outline URL>/auth/google.callback
+# https://<URL>/auth/google.callback
 GOOGLE_CLIENT_ID=
 GOOGLE_CLIENT_SECRET=
 
-# Comma separated list of domains to be allowed (optional)
-# If not set, all Google apps domains are allowed by default
-GOOGLE_ALLOWED_DOMAINS=
 
-# Third party credentials (optional)
-SLACK_VERIFICATION_TOKEN=PLxk6OlXXXXXVj3YYYY
+
+
+# –––––––––––––––– 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
+ALLOWED_DOMAINS=
+
+# For a complete Slack integration with search and posting to channels the 
+# following configs are also needed, some more details
+# => https://wiki.generaloutline.com/share/be25efd1-b3ef-4450-b8e5-c4a4fc11e02a
+#
+SLACK_VERIFICATION_TOKEN=your_token
 SLACK_APP_ID=A0XXXXXXX
 SLACK_MESSAGE_ACTIONS=true
+
+# Optionally enable google analytics to track pageviews in the knowledge base 
 GOOGLE_ANALYTICS_ID=
+
+# Optionally enable Sentry (sentry.io) to track errors and performance
 SENTRY_DSN=
 
-# AWS credentials (optional in development)
+# 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_ACCESS_KEY_ID=get_a_key_from_aws
 AWS_SECRET_ACCESS_KEY=get_the_secret_of_above_key
 AWS_REGION=xx-xxxx-x
@@ -51,11 +102,10 @@ 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
 
-# Emails configuration (optional)
+# To support sending outgoing transactional emails such as "document updated" or 
+# "you've been invited" you'll need to provide authentication for an SMTP server
 SMTP_HOST=
 SMTP_PORT=
 SMTP_USERNAME=
@@ -66,4 +116,6 @@ 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

.flowconfig

@@ -18,6 +18,7 @@
 
 [options]
 emoji=true
+sharedmemory.heap_size=3221225472
 
 module.system.node.resolve_dirname=node_modules
 module.system.node.resolve_dirname=app
@@ -32,6 +33,7 @@ module.file_ext=.json
 esproposal.decorators=ignore
 esproposal.class_static_fields=enable
 esproposal.class_instance_fields=enable
+esproposal.optional_chaining=enable
 
 suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe
 suppress_comment=\\(.\\|\n\\)*\\$FlowIssue

.github/FUNDING.yml

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

.gitignore

@@ -1,7 +1,6 @@
 dist
 build
 node_modules/*
-server/scripts
 .env
 .log
 npm-debug.log

.vscode/settings.json

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

ARCHITECTURE.md

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

README.md

@@ -6,7 +6,7 @@
 <p align="center">
   <i>An open, extensible, wiki for your team built using React and Node.js.<br/>Try out Outline using our hosted version at <a href="https://www.getoutline.com">www.getoutline.com</a>.</i>
   <br/>
-  <img src="https://user-images.githubusercontent.com/380914/78513257-153ae080-775f-11ea-9b49-1e1939451a3e.png" alt="Outline" width="800" />
+  <img width="1640" alt="screenshot" src="https://user-images.githubusercontent.com/380914/110356468-26374600-7fef-11eb-9f6a-f2cc2c8c6590.png">
 </p>
 <p align="center">
   <a href="https://circleci.com/gh/outline/outline" rel="nofollow"><img src="https://circleci.com/gh/outline/outline.svg?style=shield&amp;circle-token=c0c4c2f39990e277385d5c1ae96169c409eb887a"></a>
@@ -19,7 +19,7 @@ This is the source code that runs [**Outline**](https://www.getoutline.com) and
 
 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:
 
@@ -31,38 +31,63 @@ Outline requires the following dependencies:
 - Slack or Google developer application for authentication
 
 
-### Production
+## Self-Hosted Production
 
-For a manual self-hosted production installation these are the suggested steps:
+### Docker
 
-1. Clone this repo and install dependencies with `yarn install`
-1. Build the source code with `yarn build`
-1. Using the `.env.sample` as a reference, set the required variables in your production environment. The following are required as a minimum:
-    1. `SECRET_KEY` (follow instructions in the comments at the top of `.env`)
-    1. `SLACK_KEY` (this is called "Client ID" in Slack admin)
-    1. `SLACK_SECRET` (this is called "Client Secret" in Slack admin)
-    1. `DATABASE_URL` (run your own local copy of Postgres, or use a cloud service)
-    1. `REDIS_URL`  (run your own local copy of Redis, or use a cloud service)
-    1. `URL` (the public facing URL of your installation)
-    1. `AWS_` (all of the keys beginning with AWS)
-1. Migrate database schema with `yarn sequelize:migrate`. Production assumes an SSL connection, if
-Postgres is on the same machine and is not SSL you can migrate with `yarn sequelize:migrate --env=production-ssl-disabled`.
-1. Start the service with any daemon tools you prefer. Take PM2 for example, `NODE_ENV=production pm2 start ./build/server/index.js --name outline `
+For a manual self-hosted production installation these are the recommended steps:
+
+1. First setup Redis and Postgres servers, this is outside the scope of the guide.
+1. Download the latest official Docker image, new releases are available around the middle of every month:
+
+   `docker pull outlinewiki/outline`
+1. Using the [.env.sample](.env.sample) as a reference, set the required variables in your production environment. You can export the environment variables directly, or create a `.env` file and pass it to the docker image like so:
+
+   `docker run --env-file=.env outlinewiki/outline`
+1. Setup the database with `yarn db:migrate`. Production assumes an SSL connection to the database by default, if
+Postgres is on the same machine and is not SSL you can migrate with `yarn db:migrate --env=production-ssl-disabled`, for example:
+
+   `docker run --rm outlinewiki/outline yarn db:migrate`
+1. Start the container:
+
+   `docker run outlinewiki/outline`
 1. Visit http://you_server_ip:3000 and you should be able to see Outline page
 
    > Port number can be changed using the `PORT` environment variable
 
-1. (Optional) You can add an `nginx` reverse proxy to serve your instance of Outline for a clean URL without the port number, support SSL, etc.
+1. (Optional) You can add an `nginx` or other reverse proxy to serve your instance of Outline for a clean URL without the port number, support SSL, etc.
+
+### Terraform
+
+Alternatively a community member maintains a script to deploy Outline on Google Cloud Platform with [Terraform & Ansible](https://github.com/rjsgn/outline-terraform-ansible).
+
+### Upgrading
+
+#### Docker
+
+If you're running Outline with Docker you'll need to run migrations within the docker container after updating the image. The command will be something like:
+
+```shell
+docker run --rm outlinewiki/outline:latest yarn db:migrate
+```
+
+#### Git
+
+If you're running Outline by cloning this repository, run the following command to upgrade:
+
+```shell
+yarn run upgrade
+```
 
 
-### Development
+## Local Development
 
-In development you can quickly get an environment running using Docker by following these steps:
+For contributing features and fixes you can quickly get an environment running using Docker by following these steps:
 
 1. Install these dependencies if you don't already have them
-  1. [Docker for Desktop](https://www.docker.com)
-  1. [Node.js](https://nodejs.org/) (v12 LTS preferred)
-  1. [Yarn](https://yarnpkg.com)
+    1. [Docker for Desktop](https://www.docker.com)
+    1. [Node.js](https://nodejs.org/) (v12 LTS preferred)
+    1. [Yarn](https://yarnpkg.com)
 1. Clone this repo
 1. Register a Slack app at https://api.slack.com/apps
 1. Copy the file `.env.sample` to `.env`
@@ -75,77 +100,36 @@ In development you can quickly get an environment running using Docker by follow
     1. Ensure that the bot token scope contains at least `users:read`
 1. Run `make up`. This will download dependencies, build and launch a development version of Outline
 
-### Upgrade
 
-#### Docker
+# Contributing
 
-If you're running Outline with Docker you'll need to run migrations within the docker container after updating the image. The command will be something like:
-```
-docker run --rm outlinewiki/outline:latest yarn sequelize:migrate
-```
-#### Yarn
+Outline is built and maintained by a small team – we'd love your help to fix bugs and add features!
 
-If you're running Outline by cloning this repository, run the following command to upgrade:
-```
-yarn upgrade
-```
+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.
 
-## Development
+If you’re looking for ways to get started, here's a list of ways to help us improve Outline:
 
-### Server
+* [Translation](TRANSLATION.md) into other languages
+* Issues with [`good first issue`](https://github.com/outline/outline/labels/good%20first%20issue) label
+* Performance improvements, both on server and frontend
+* Developer happiness and documentation
+* Bugs and other issues listed on GitHub
+
+
+## Architecture
+
+If you're interested in contributing or learning more about the Outline codebase
+please refer to the [architecture document](ARCHITECTURE.md) first for a high level overview of how the application is put together.
+
+
+## Debugging
 
 Outline uses [debug](https://www.npmjs.com/package/debug). To enable debugging output, the following categories are available:
 
 ```
-DEBUG=sql,cache,presenters,events,logistics,emails,mailer
+DEBUG=sql,cache,presenters,events,importer,exporter,emails,mailer
 ```
 
-## Migrations
-
-Sequelize is used to create and run migrations, for example:
-
-```
-yarn sequelize migration:generate --name my-migration
-yarn sequelize db:migrate
-```
-
-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.
@@ -171,20 +155,21 @@ yarn test:server
 yarn test:app
 ```
 
-## Contributing
+## Migrations
 
-Outline is built and maintained by a small team – we'd love your help to fix bugs and add features!
+Sequelize is used to create and run migrations, for example:
 
-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!
+```
+yarn sequelize migration:generate --name my-migration
+yarn sequelize db:migrate
+```
 
-If you’re looking for ways to get started, here's a list of ways to help us improve Outline:
+Or to run migrations on test database:
 
-* [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
+```
+yarn sequelize db:migrate --env test
+```
 
 ## License
 
-Outline is [BSL 1.1 licensed](https://github.com/outline/outline/blob/master/LICENSE).
+Outline is [BSL 1.1 licensed](LICENSE).

app.json

@@ -30,6 +30,10 @@
     "postdeploy": "yarn sequelize db:migrate"
   },
   "env": {
+    "NODE_ENV": {
+      "value": "production",
+      "required": true
+    },
     "SECRET_KEY": {
       "description": "A secret key",
       "generator": "secret",
@@ -51,7 +55,7 @@
       "description": "",
       "required": false
     },
-    "GOOGLE_ALLOWED_DOMAINS": {
+    "ALLOWED_DOMAINS": {
       "description": "Comma separated list of domains to be allowed (optional). If not set, all Google apps domains are allowed by default",
       "required": false
     },

app/components/Actions.js

@@ -11,11 +11,6 @@ export const Action = styled(Flex)`
   font-size: 15px;
   flex-shrink: 0;
 
-  a {
-    color: ${(props) => props.theme.text};
-    height: 24px;
-  }
-
   &:empty {
     display: none;
   }

app/components/Analytics.js

@@ -29,6 +29,11 @@ export default class Analytics extends React.Component<Props> {
     script.src = "https://www.google-analytics.com/analytics.js";
     script.async = true;
 
+    // Track PWA install event
+    window.addEventListener("appinstalled", () => {
+      ga("send", "event", "pwa", "install");
+    });
+
     if (document.body) {
       document.body.appendChild(script);
     }

app/components/Arrow.js

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

app/components/AuthLogo/index.js

@@ -0,0 +1,19 @@
+// @flow
+import * as React from "react";
+import SlackLogo from "../SlackLogo";
+import GoogleLogo from "./GoogleLogo";
+
+type Props = {|
+  providerName: string,
+|};
+
+export default function AuthLogo({ providerName }: Props) {
+  switch (providerName) {
+    case "slack":
+      return <SlackLogo size={16} />;
+    case "google":
+      return <GoogleLogo size={16} />;
+    default:
+      return null;
+  }
+}

app/components/Authenticated.js

@@ -20,8 +20,10 @@ const Authenticated = ({ children }: Props) => {
   // Watching for language changes here as this is the earliest point we have
   // the user available and means we can start loading translations faster
   React.useEffect(() => {
-    if (i18n.language !== language) {
-      i18n.changeLanguage(language);
+    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]);
 

app/components/Avatar/Avatar.js

@@ -3,13 +3,17 @@ 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> {

app/components/Badge.js

@@ -3,15 +3,17 @@ import styled from "styled-components";
 
 const Badge = styled.span`
   margin-left: 10px;
-  padding: 2px 6px 3px;
+  padding: 1px 5px 2px;
   background-color: ${({ yellow, primary, theme }) =>
-    yellow ? theme.yellow : primary ? theme.primary : theme.textTertiary};
+    yellow ? theme.yellow : primary ? theme.primary : "transparent"};
   color: ${({ primary, yellow, theme }) =>
-    primary ? theme.white : yellow ? theme.almostBlack : theme.background};
-  border-radius: 4px;
-  font-size: 11px;
+    primary ? theme.white : yellow ? theme.almostBlack : theme.textTertiary};
+  border: 1px solid
+    ${({ primary, yellow, theme }) =>
+      primary || yellow ? "transparent" : theme.textTertiary};
+  border-radius: 8px;
+  font-size: 12px;
   font-weight: 500;
-  text-transform: uppercase;
   user-select: none;
 `;
 

app/components/Breadcrumb.js

@@ -4,8 +4,6 @@ import {
   ArchiveIcon,
   EditIcon,
   GoToIcon,
-  MoreIcon,
-  PadlockIcon,
   ShapesIcon,
   TrashIcon,
 } from "outline-icons";
@@ -13,21 +11,18 @@ 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 BreadcrumbMenu from "./BreadcrumbMenu";
 import useStores from "hooks/useStores";
+import BreadcrumbMenu from "menus/BreadcrumbMenu";
 import { collectionUrl } from "utils/routeHelpers";
 
-type Props = {
+type Props = {|
   document: Document,
-  collections: CollectionsStore,
+  children?: React.Node,
   onlyText: boolean,
-};
+|};
 
 function Icon({ document }) {
   const { t } = useTranslation();
@@ -35,11 +30,11 @@ function Icon({ document }) {
   if (document.isDeleted) {
     return (
       <>
-        <CollectionName to="/trash">
+        <CategoryName to="/trash">
           <TrashIcon color="currentColor" />
           &nbsp;
           <span>{t("Trash")}</span>
-        </CollectionName>
+        </CategoryName>
         <Slash />
       </>
     );
@@ -47,11 +42,11 @@ function Icon({ document }) {
   if (document.isArchived) {
     return (
       <>
-        <CollectionName to="/archive">
+        <CategoryName to="/archive">
           <ArchiveIcon color="currentColor" />
           &nbsp;
           <span>{t("Archive")}</span>
-        </CollectionName>
+        </CategoryName>
         <Slash />
       </>
     );
@@ -59,11 +54,11 @@ function Icon({ document }) {
   if (document.isDraft) {
     return (
       <>
-        <CollectionName to="/drafts">
+        <CategoryName to="/drafts">
           <EditIcon color="currentColor" />
           &nbsp;
           <span>{t("Drafts")}</span>
-        </CollectionName>
+        </CategoryName>
         <Slash />
       </>
     );
@@ -71,11 +66,11 @@ function Icon({ document }) {
   if (document.isTemplate) {
     return (
       <>
-        <CollectionName to="/templates">
+        <CategoryName to="/templates">
           <ShapesIcon color="currentColor" />
           &nbsp;
           <span>{t("Templates")}</span>
-        </CollectionName>
+        </CategoryName>
         <Slash />
       </>
     );
@@ -83,14 +78,16 @@ function Icon({ document }) {
   return null;
 }
 
-const Breadcrumb = ({ document, onlyText }: Props) => {
+const Breadcrumb = ({ document, children, onlyText }: Props) => {
   const { collections } = useStores();
   const { t } = useTranslation();
 
+  if (!collections.isLoaded) {
+    return;
+  }
+
   let collection = collections.get(document.collectionId);
   if (!collection) {
-    if (!document.deletedAt) return <div />;
-
     collection = {
       id: document.collectionId,
       name: t("Deleted Collection"),
@@ -105,11 +102,6 @@ const Breadcrumb = ({ document, onlyText }: Props) => {
   if (onlyText === true) {
     return (
       <>
-        {collection.private && (
-          <>
-            <SmallPadlockIcon color="currentColor" size={16} />{" "}
-          </>
-        )}
         {collection.name}
         {path.map((n) => (
           <React.Fragment key={n.id}>
@@ -126,7 +118,7 @@ const Breadcrumb = ({ document, onlyText }: Props) => {
   const menuPath = isNestedDocument ? path.slice(0, -1) : [];
 
   return (
-    <Wrapper justify="flex-start" align="center">
+    <Flex justify="flex-start" align="center">
       <Icon document={document} />
       <CollectionName to={collectionUrl(collection.id)}>
         <CollectionIcon collection={collection} expanded />
@@ -135,7 +127,7 @@ const Breadcrumb = ({ document, onlyText }: Props) => {
       </CollectionName>
       {isNestedDocument && (
         <>
-          <Slash /> <BreadcrumbMenu label={<Overflow />} path={menuPath} />
+          <Slash /> <BreadcrumbMenu path={menuPath} />
         </>
       )}
       {lastPath && (
@@ -146,44 +138,24 @@ const Breadcrumb = ({ document, onlyText }: Props) => {
           </Crumb>
         </>
       )}
-    </Wrapper>
+      {children}
+    </Flex>
   );
 };
 
-const Wrapper = styled(Flex)`
-  display: none;
-
-  ${breakpoint("tablet")`	
-    display: flex;
-  `};
-`;
-
-const SmallPadlockIcon = styled(PadlockIcon)`
-  display: inline-block;
-  vertical-align: sub;
-`;
-
-const SmallSlash = styled(GoToIcon)`
-  width: 15px;
-  height: 10px;
-  flex-shrink: 0;
-  opacity: 0.25;
-`;
-
 export const Slash = styled(GoToIcon)`
   flex-shrink: 0;
   fill: ${(props) => props.theme.divider};
 `;
 
-const Overflow = styled(MoreIcon)`
+const SmallSlash = styled(GoToIcon)`
+  width: 12px;
+  height: 12px;
+  vertical-align: middle;
   flex-shrink: 0;
-  transition: opacity 100ms ease-in-out;
-  fill: ${(props) => props.theme.divider};
 
-  &:active,
-  &:hover {
-    fill: ${(props) => props.theme.text};
-  }
+  fill: ${(props) => props.theme.slate};
+  opacity: 0.5;
 `;
 
 const Crumb = styled(Link)`
@@ -201,12 +173,21 @@ const Crumb = styled(Link)`
 
 const CollectionName = styled(Link)`
   display: flex;
-  flex-shrink: 0;
+  flex-shrink: 1;
   color: ${(props) => props.theme.text};
   font-size: 15px;
   font-weight: 500;
   white-space: nowrap;
   overflow: hidden;
+  min-width: 0;
+
+  svg {
+    flex-shrink: 0;
+  }
+`;
+
+const CategoryName = styled(CollectionName)`
+  flex-shrink: 0;
 `;
 
 export default observer(Breadcrumb);

app/components/BreadcrumbMenu.js

@@ -1,22 +0,0 @@
-// @flow
-import * as React from "react";
-import { DropdownMenu } from "components/DropdownMenu";
-import DropdownMenuItems from "components/DropdownMenu/DropdownMenuItems";
-
-type Props = {
-  label: React.Node,
-  path: Array<any>,
-};
-
-export default function BreadcrumbMenu({ label, path }: Props) {
-  return (
-    <DropdownMenu label={label} position="center">
-      <DropdownMenuItems
-        items={path.map((item) => ({
-          title: item.title,
-          to: item.url,
-        }))}
-      />
-    </DropdownMenu>
-  );
-}

app/components/Bubble.js

@@ -3,11 +3,15 @@ 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>;
 };
 

app/components/Button.js

@@ -22,9 +22,13 @@ const RealButton = styled.button`
   cursor: pointer;
   user-select: none;
 
-  svg {
-    fill: ${(props) => props.iconColor || props.theme.buttonText};
-  }
+  ${(props) =>
+    !props.borderOnHover &&
+    `
+      svg {
+        fill: ${props.iconColor || props.theme.buttonText};
+      }
+    `}
 
   &::-moz-focus-inner {
     padding: 0;
@@ -42,24 +46,30 @@ 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"
-    };
-    border: 1px solid ${
-      props.borderOnHover ? "transparent" : props.theme.buttonNeutralBorder
+      props.borderOnHover
+        ? "none"
+        : `rgba(0, 0, 0, 0.07) 0px 1px 2px, ${props.theme.buttonNeutralBorder} 0 0 0 1px inset`
     };
 
-    svg {
+    ${
+      props.borderOnHover
+        ? ""
+        : `svg {
       fill: ${props.iconColor || props.theme.buttonNeutralText};
+    }`
     }
+    
 
     &:hover {
       background: ${darken(0.05, props.theme.buttonNeutralBackground)};
-      border: 1px solid ${props.theme.buttonNeutralBorder};
+      box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, ${
+        props.theme.buttonNeutralBorder
+      } 0 0 0 1px inset;
     }
 
     &:disabled {
@@ -71,9 +81,9 @@ 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)};
+      }
   `};
 `;
 
@@ -92,14 +102,14 @@ export const Inner = styled.span`
   line-height: ${(props) => (props.hasIcon ? 24 : 32)}px;
   justify-content: center;
   align-items: center;
-  min-height: 30px;
+  min-height: 32px;
 
   ${(props) => props.hasIcon && props.hasText && "padding-left: 4px;"};
   ${(props) => props.hasIcon && !props.hasText && "padding: 0 4px;"};
 `;
 
-export type Props = {
-  type?: string,
+export type Props = {|
+  type?: "button" | "submit",
   value?: string,
   icon?: React.Node,
   iconColor?: string,
@@ -107,9 +117,22 @@ 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",
@@ -118,13 +141,14 @@ function Button({
   value,
   disclosure,
   innerRef,
+  neutral,
   ...rest
 }: Props) {
   const hasText = children !== undefined || value !== undefined;
   const hasIcon = icon !== undefined;
 
   return (
-    <RealButton type={type} ref={innerRef} {...rest}>
+    <RealButton type={type} ref={innerRef} $neutral={neutral} {...rest}>
       <Inner hasIcon={hasIcon} hasText={hasText} disclosure={disclosure}>
         {hasIcon && icon}
         {hasText && <Label hasIcon={hasIcon}>{children || value}</Label>}

app/components/ButtonLink.js

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

app/components/CenteredContent.js

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

app/components/Checkbox.js

@@ -1,18 +1,21 @@
 // @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,
+  label?: React.Node,
   labelHidden?: boolean,
   className?: string,
+  name?: string,
+  disabled?: boolean,
+  onChange: (event: SyntheticInputEvent<HTMLInputElement>) => mixed,
   note?: string,
   short?: boolean,
   small?: boolean,
-};
+|};
 
 const LabelText = styled.span`
   font-weight: 500;
@@ -23,6 +26,7 @@ const LabelText = styled.span`
 const Wrapper = styled.div`
   padding-bottom: 8px;
   ${(props) => (props.small ? "font-size: 14px" : "")};
+  width: 100%;
 `;
 
 const Label = styled.label`

app/components/Collaborators.js

@@ -2,8 +2,9 @@
 import { sortBy, keyBy } from "lodash";
 import { observer, inject } from "mobx-react";
 import * as React from "react";
+import styled from "styled-components";
+import breakpoint from "styled-components-breakpoint";
 import { MAX_AVATAR_DISPLAY } from "shared/constants";
-
 import DocumentPresenceStore from "stores/DocumentPresenceStore";
 import ViewsStore from "stores/ViewsStore";
 import Document from "models/Document";
@@ -51,7 +52,7 @@ class Collaborators extends React.Component<Props> {
     const overflow = documentViews.length - mostRecentViewers.length;
 
     return (
-      <Facepile
+      <FacepileHiddenOnMobile
         users={mostRecentViewers.map((v) => v.user)}
         overflow={overflow}
         renderAvatar={(user) => {
@@ -75,4 +76,10 @@ class Collaborators extends React.Component<Props> {
   }
 }
 
+const FacepileHiddenOnMobile = styled(Facepile)`
+  ${breakpoint("mobile", "tablet")`
+    display: none;
+  `};
+`;
+
 export default inject("views", "presence")(Collaborators);

app/components/CollectionDescription.js

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

app/components/CollectionIcon.js

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

app/components/ContextMenu/Header.js

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

app/components/ContextMenu/MenuItem.js

@@ -1,50 +1,81 @@
 // @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<*>,
+  hide?: () => void,
+|};
 
-const DropdownMenuItem = ({
+const MenuItem = ({
   onClick,
   children,
   selected,
   disabled,
+  as,
+  hide,
   ...rest
 }: Props) => {
+  const handleClick = React.useCallback(
+    (ev) => {
+      if (onClick) {
+        onClick(ev);
+      }
+      if (hide) {
+        hide();
+      }
+    },
+    [hide, onClick]
+  );
+
   return (
-    <MenuItem
+    <BaseMenuItem
       onClick={disabled ? undefined : onClick}
       disabled={disabled}
-      role="menuitem"
-      tabIndex="-1"
+      hide={hide}
       {...rest}
     >
-      {selected !== undefined && (
-        <>
-          <CheckmarkIcon
-            color={selected === false ? "transparent" : undefined}
-          />
-          &nbsp;
-        </>
+      {(props) => (
+        <MenuAnchor
+          {...props}
+          as={onClick ? "button" : as}
+          onClick={handleClick}
+        >
+          {selected !== undefined && (
+            <>
+              {selected ? <CheckmarkIcon /> : <Spacer />}
+              &nbsp;
+            </>
+          )}
+          {children}
+        </MenuAnchor>
       )}
-      {children}
-    </MenuItem>
+    </BaseMenuItem>
   );
 };
 
-const MenuItem = styled.a`
+const Spacer = styled.div`
+  width: 24px;
+  height: 24px;
+`;
+
+export const MenuAnchor = styled.a`
   display: flex;
   margin: 0;
+  border: 0;
   padding: 6px 12px;
   width: 100%;
   min-height: 32px;
-
+  background: none;
   color: ${(props) =>
     props.disabled ? props.theme.textTertiary : props.theme.textSecondary};
   justify-content: left;
@@ -54,10 +85,11 @@ const MenuItem = styled.a`
   user-select: none;
 
   svg:not(:last-child) {
-    margin-right: 8px;
+    margin-right: 4px;
   }
 
   svg {
+    flex-shrink: 0;
     opacity: ${(props) => (props.disabled ? ".5" : 1)};
   }
 
@@ -66,7 +98,8 @@ const MenuItem = styled.a`
       ? "pointer-events: none;"
       : `
 
-  &:hover {
+  &:hover,
+  &.focus-visible {
     color: ${props.theme.white};
     background: ${props.theme.primary};
     box-shadow: none;
@@ -84,4 +117,4 @@ const MenuItem = styled.a`
   `};
 `;
 
-export default DropdownMenuItem;
+export default MenuItem;

app/components/ContextMenu/OverflowMenuButton.js

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

app/components/ContextMenu/Separator.js

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

app/components/ContextMenu/Template.js

@@ -1,26 +1,38 @@
 // @flow
+import { ExpandedIcon } from "outline-icons";
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
-import DropdownMenu from "./DropdownMenu";
-import DropdownMenuItem from "./DropdownMenuItem";
+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 MenuItem =
+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,
     |}
   | {|
@@ -29,7 +41,7 @@ type MenuItem =
       disabled?: boolean,
       style?: Object,
       hover?: boolean,
-      items: MenuItem[],
+      items: TMenuItem[],
     |}
   | {|
       type: "separator",
@@ -42,10 +54,36 @@ type MenuItem =
     |};
 
 type Props = {|
-  items: MenuItem[],
+  items: TMenuItem[],
 |};
 
-export default function DropdownMenuItems({ items }: Props): React.Node {
+const Disclosure = styled(ExpandedIcon)`
+  transform: rotate(270deg);
+  position: absolute;
+  right: 8px;
+`;
+
+const Submenu = React.forwardRef(({ templateItems, title, ...rest }, ref) => {
+  const { t } = useTranslation();
+  const menu = useMenuState({ modal: true });
+
+  return (
+    <>
+      <MenuButton ref={ref} {...menu} {...rest}>
+        {(props) => (
+          <MenuAnchor {...props}>
+            {title} <Disclosure color="currentColor" />
+          </MenuAnchor>
+        )}
+      </MenuButton>
+      <ContextMenu {...menu} aria-label={t("Submenu")}>
+        <Template {...menu} items={templateItems} />
+      </ContextMenu>
+    </>
+  );
+});
+
+function Template({ items, ...menu }: Props): React.Node {
   let filtered = items.filter((item) => item.visible !== false);
 
   // this block literally just trims unneccessary separators
@@ -66,63 +104,67 @@ export default function DropdownMenuItems({ items }: Props): React.Node {
   return filtered.map((item, index) => {
     if (item.to) {
       return (
-        <DropdownMenuItem
+        <MenuItem
           as={Link}
           to={item.to}
           key={index}
           disabled={item.disabled}
+          selected={item.selected}
+          {...menu}
         >
           {item.title}
-        </DropdownMenuItem>
+        </MenuItem>
       );
     }
 
     if (item.href) {
       return (
-        <DropdownMenuItem
+        <MenuItem
           href={item.href}
           key={index}
           disabled={item.disabled}
+          selected={item.selected}
           target="_blank"
+          {...menu}
         >
           {item.title}
-        </DropdownMenuItem>
+        </MenuItem>
       );
     }
 
     if (item.onClick) {
       return (
-        <DropdownMenuItem
+        <MenuItem
+          as="button"
           onClick={item.onClick}
           disabled={item.disabled}
+          selected={item.selected}
           key={index}
+          {...menu}
         >
           {item.title}
-        </DropdownMenuItem>
+        </MenuItem>
       );
     }
 
     if (item.items) {
       return (
-        <DropdownMenu
-          style={item.style}
-          label={
-            <DropdownMenuItem disabled={item.disabled}>
-              {item.title}
-            </DropdownMenuItem>
-          }
-          hover={item.hover}
+        <BaseMenuItem
           key={index}
-        >
-          <DropdownMenuItems items={item.items} />
-        </DropdownMenu>
+          as={Submenu}
+          templateItems={item.items}
+          title={item.title}
+          {...menu}
+        />
       );
     }
 
     if (item.type === "separator") {
-      return <hr key={index} />;
+      return <Separator key={index} />;
     }
 
     return null;
   });
 }
+
+export default React.memo<Props>(Template);

app/components/ContextMenu/index.js

@@ -0,0 +1,77 @@
+// @flow
+import { rgba } from "polished";
+import * as React from "react";
+import { Menu } from "reakit/Menu";
+import styled from "styled-components";
+import { fadeAndScaleIn } from "shared/styles/animations";
+import usePrevious from "hooks/usePrevious";
+
+type Props = {|
+  "aria-label": string,
+  visible?: boolean,
+  animating?: boolean,
+  children: React.Node,
+  onOpen?: () => void,
+  onClose?: () => void,
+|};
+
+export default function ContextMenu({
+  children,
+  onOpen,
+  onClose,
+  ...rest
+}: Props) {
+  const previousVisible = usePrevious(rest.visible);
+
+  React.useEffect(() => {
+    if (rest.visible && !previousVisible) {
+      if (onOpen) {
+        onOpen();
+      }
+    }
+    if (!rest.visible && previousVisible) {
+      if (onClose) {
+        onClose();
+      }
+    }
+  }, [onOpen, onClose, previousVisible, rest.visible]);
+
+  return (
+    <Menu hideOnClickOutside preventBodyScroll {...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: 6px;
+  padding: 6px 0;
+  min-width: 180px;
+  overflow: hidden;
+  overflow-y: auto;
+  max-height: 75vh;
+  max-width: 276px;
+  box-shadow: ${(props) => props.theme.menuShadow};
+  pointer-events: all;
+  font-weight: normal;
+
+  @media print {
+    display: none;
+  }
+`;

app/components/Divider.js

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

app/components/DocumentHistory/DocumentHistory.js

@@ -156,7 +156,7 @@ const Wrapper = styled(Flex)`
   top: 0;
   right: 0;
   z-index: 1;
-  min-width: ${(props) => props.theme.sidebarWidth};
+  min-width: ${(props) => props.theme.sidebarWidth}px;
   height: 100%;
   overflow-y: auto;
   overscroll-behavior: none;
@@ -165,7 +165,7 @@ const Wrapper = styled(Flex)`
 const Sidebar = styled(Flex)`
   display: none;
   background: ${(props) => props.theme.background};
-  min-width: ${(props) => props.theme.sidebarWidth};
+  min-width: ${(props) => props.theme.sidebarWidth}px;
   border-left: 1px solid ${(props) => props.theme.divider};
   z-index: 1;
 

app/components/DocumentHistory/components/Revision.js

@@ -1,6 +1,5 @@
 // @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";
@@ -45,9 +44,7 @@ class RevisionListItem extends React.Component<Props> {
           <StyledRevisionMenu
             document={document}
             revision={revision}
-            label={
-              <MoreIcon color={selected ? theme.white : theme.textTertiary} />
-            }
+            iconColor={selected ? theme.white : theme.textTertiary}
           />
         )}
       </StyledNavLink>

app/components/DocumentList.js

@@ -2,12 +2,17 @@
 import ArrowKeyNavigation from "boundless-arrow-key-navigation";
 import * as React from "react";
 import Document from "models/Document";
-import DocumentPreview from "components/DocumentPreview";
+import DocumentListItem from "components/DocumentListItem";
 
-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;
@@ -18,7 +23,7 @@ export default function DocumentList({ limit, documents, ...rest }: Props) {
       defaultActiveChildIndex={0}
     >
       {items.map((document) => (
-        <DocumentPreview key={document.id} document={document} {...rest} />
+        <DocumentListItem key={document.id} document={document} {...rest} />
       ))}
     </ArrowKeyNavigation>
   );

app/components/DocumentListItem.js

@@ -0,0 +1,246 @@
+// @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;
+  width: calc(100vw - 8px);
+
+  ${breakpoint("tablet")`
+    width: auto;
+  `};
+
+  ${Actions} {
+    opacity: 0;
+  }
+
+  ${AnimatedStar} {
+    opacity: ${(props) => (props.$isStarred ? "1 !important" : 0)};
+  }
+
+  &:hover,
+  &:active,
+  &:focus,
+  &:focus-within {
+    background: ${(props) => props.theme.listItemHoverBackground};
+
+    ${Actions} {
+      opacity: 1;
+    }
+
+    ${AnimatedStar} {
+      opacity: 0.5;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+
+  ${(props) =>
+    props.$menuOpen &&
+    css`
+      background: ${(props) => props.theme.listItemHoverBackground};
+
+      ${Actions} {
+        opacity: 1;
+      }
+
+      ${AnimatedStar} {
+        opacity: 0.5;
+      }
+    `}
+`;
+
+const Heading = styled.h3`
+  display: flex;
+  align-items: center;
+  height: 24px;
+  margin-top: 0;
+  margin-bottom: 0.25em;
+  overflow: hidden;
+  white-space: nowrap;
+  color: ${(props) => props.theme.text};
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+`;
+
+const StarPositioner = styled(Flex)`
+  margin-left: 4px;
+  align-items: center;
+`;
+
+const Title = styled(Highlight)`
+  max-width: 90%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+const ResultContext = styled(Highlight)`
+  display: block;
+  color: ${(props) => props.theme.textTertiary};
+  font-size: 14px;
+  margin-top: -0.25em;
+  margin-bottom: 0.25em;
+`;
+
+export default observer(DocumentListItem);

app/components/DocumentMeta.js

@@ -15,6 +15,12 @@ const Container = styled(Flex)`
   font-size: 13px;
   white-space: nowrap;
   overflow: hidden;
+  min-width: 0;
+`;
+
+const Viewed = styled.span`
+  text-overflow: ellipsis;
+  overflow: hidden;
 `;
 
 const Modified = styled.span`
@@ -22,19 +28,21 @@ const Modified = styled.span`
   font-weight: ${(props) => (props.highlight ? "600" : "400")};
 `;
 
-type Props = {
+type Props = {|
   showCollection?: boolean,
   showPublished?: boolean,
   showLastViewed?: boolean,
+  showNestedDocuments?: boolean,
   document: Document,
   children: React.Node,
   to?: string,
-};
+|};
 
 function DocumentMeta({
   showPublished,
   showCollection,
   showLastViewed,
+  showNestedDocuments,
   document,
   children,
   to,
@@ -109,19 +117,23 @@ function DocumentMeta({
     }
     if (!lastViewedAt) {
       return (
-        <>
+        <Viewed>
           •&nbsp;<Modified highlight>{t("Never viewed")}</Modified>
-        </>
+        </Viewed>
       );
     }
 
     return (
-      <span>
+      <Viewed>
         •&nbsp;{t("Viewed")} <Time dateTime={lastViewedAt} addSuffix shorten />
-      </span>
+      </Viewed>
     );
   };
 
+  const nestedDocumentsCount = collection
+    ? collection.getDocumentChildren(document.id).length
+    : 0;
+
   return (
     <Container align="center" {...rest}>
       {updatedByMe ? t("You") : updatedBy.name}&nbsp;
@@ -134,6 +146,12 @@ function DocumentMeta({
           </strong>
         </span>
       )}
+      {showNestedDocuments && nestedDocumentsCount > 0 && (
+        <span>
+          &nbsp;&middot; {nestedDocumentsCount}{" "}
+          {t("nested document", { count: nestedDocumentsCount })}
+        </span>
+      )}
       &nbsp;{timeSinceNow()}
       {children}
     </Container>

app/components/DocumentMetaWithViews.js

@@ -35,6 +35,8 @@ 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;

app/components/DocumentPreview/DocumentPreview.js

@@ -1,247 +0,0 @@
-// @flow
-import { observable } from "mobx";
-import { observer } from "mobx-react";
-import { StarredIcon, PlusIcon } from "outline-icons";
-import * as React from "react";
-import { withTranslation, type TFunction } from "react-i18next";
-import { Link, Redirect } 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 EventBoundary from "components/EventBoundary";
-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 = {
-  document: Document,
-  highlight?: ?string,
-  context?: ?string,
-  showCollection?: boolean,
-  showPublished?: boolean,
-  showPin?: boolean,
-  showDraft?: boolean,
-  showTemplate?: boolean,
-  t: TFunction,
-};
-
-const SEARCH_RESULT_REGEX = /<b\b[^>]*>(.*?)<\/b>/gi;
-
-@observer
-class DocumentPreview extends React.Component<Props> {
-  @observable redirectTo: ?string;
-
-  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: SyntheticEvent<>) => {
-    event.preventDefault();
-    event.stopPropagation();
-
-    const { document } = this.props;
-
-    this.redirectTo = newDocumentUrl(document.collectionId, {
-      templateId: document.id,
-    });
-  };
-
-  render() {
-    const {
-      document,
-      showCollection,
-      showPublished,
-      showPin,
-      showDraft = true,
-      showTemplate,
-      highlight,
-      context,
-      t,
-    } = this.props;
-
-    if (this.redirectTo) {
-      return <Redirect to={this.redirectTo} push />;
-    }
-
-    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.isNew && <Badge yellow>{t("New")}</Badge>}
-          {!document.isDraft &&
-            !document.isArchived &&
-            !document.isTemplate && (
-              <Actions>
-                {document.isStarred ? (
-                  <StyledStar onClick={this.handleUnstar} solid />
-                ) : (
-                  <StyledStar onClick={this.handleStar} />
-                )}
-              </Actions>
-            )}
-          {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>
-          )}
-          <SecondaryActions>
-            {document.isTemplate &&
-              !document.isArchived &&
-              !document.isDeleted && (
-                <Button
-                  onClick={this.handleNewFromTemplate}
-                  icon={<PlusIcon />}
-                  neutral
-                >
-                  {t("New doc")}
-                </Button>
-              )}
-            &nbsp;
-            <EventBoundary>
-              <DocumentMenu document={document} showPin={showPin} />
-            </EventBoundary>
-          </SecondaryActions>
-        </Heading>
-
-        {!queryIsInTitle && (
-          <ResultContext
-            text={context}
-            highlight={highlight ? SEARCH_RESULT_REGEX : undefined}
-            processResult={this.replaceResultMarks}
-          />
-        )}
-        <DocumentMeta
-          document={document}
-          showCollection={showCollection}
-          showPublished={showPublished}
-          showLastViewed
-        />
-      </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};
-
-    ${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 withTranslation()<DocumentPreview>(DocumentPreview);

app/components/DocumentPreview/index.js

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

app/components/DropToImport.js

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

app/components/DropdownMenu/DropdownMenu.js

@@ -1,289 +0,0 @@
-// @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 { withTranslation, type TFunction } from "react-i18next";
-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",
-  t: TFunction,
-|};
-
-@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, t } = 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-label={t("More options")}
-                    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 withTranslation()<DropdownMenu>(DropdownMenu);

app/components/DropdownMenu/index.js

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

app/components/Editor.js

@@ -8,21 +8,42 @@ import UiStore from "stores/UiStore";
 import ErrorBoundary from "components/ErrorBoundary";
 import Tooltip from "components/Tooltip";
 import embeds from "../embeds";
-import isInternalUrl from "utils/isInternalUrl";
+import { isModKey } from "utils/keyboard";
 import { uploadFile } from "utils/uploadFile";
+import { isInternalUrl } from "utils/urls";
 
 const RichMarkdownEditor = React.lazy(() => import("rich-markdown-editor"));
 
 const EMPTY_ARRAY = [];
 
-type Props = {
+export type Props = {|
   id?: string,
+  value?: string,
   defaultValue?: string,
   readOnly?: boolean,
   grow?: boolean,
   disableEmbeds?: boolean,
   ui?: UiStore,
-};
+  autoFocus?: boolean,
+  template?: boolean,
+  placeholder?: string,
+  maxLength?: number,
+  scrollTo?: string,
+  handleDOMEvents?: Object,
+  readOnlyWriteCheckboxes?: boolean,
+  onBlur?: (event: SyntheticEvent<>) => any,
+  onFocus?: (event: SyntheticEvent<>) => any,
+  onPublish?: (event: SyntheticEvent<>) => any,
+  onSave?: ({ done?: boolean, autosave?: boolean, publish?: boolean }) => any,
+  onCancel?: () => any,
+  onDoubleClick?: () => any,
+  onChange?: (getValue: () => string) => any,
+  onSearchLink?: (title: string) => any,
+  onHoverLink?: (event: MouseEvent) => any,
+  onCreateLink?: (title: string) => Promise<string>,
+  onImageUploadStart?: () => any,
+  onImageUploadStop?: () => any,
+|};
 
 type PropsWithRef = Props & {
   forwardedRef: React.Ref<any>,
@@ -49,7 +70,7 @@ function Editor(props: PropsWithRef) {
         return;
       }
 
-      if (isInternalUrl(href) && !event.metaKey && !event.shiftKey) {
+      if (isInternalUrl(href) && !isModKey(event) && !event.shiftKey) {
         // relative
         let navigateTo = href;
 
@@ -159,7 +180,7 @@ const StyledEditor = styled(RichMarkdownEditor)`
   justify-content: start;
 
   > div {
-    transition: ${(props) => props.theme.backgroundTransition};
+    background: transparent;
   }
 
   & * {
@@ -171,17 +192,16 @@ const StyledEditor = styled(RichMarkdownEditor)`
     font-weight: 500;
   }
 
-  .heading-name {
-    pointer-events: none;
+  .heading-anchor {
+    box-sizing: border-box;
   }
 
-  /* pseudo element allows us to add spacing for fixed header */
-  /* ref: https://stackoverflow.com/a/28824157 */
-  .heading-name::before {
-    content: "";
-    display: ${(props) => (props.readOnly ? "block" : "none")};
-    height: 72px;
-    margin: -72px 0 0;
+  .heading-name {
+    pointer-events: none;
+    display: block;
+    position: relative;
+    top: -60px;
+    visibility: hidden;
   }
 
   .heading-name:first-child {

app/components/ErrorBoundary.js

@@ -1,4 +1,5 @@
 // @flow
+import * as Sentry from "@sentry/react";
 import { observable } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
@@ -36,8 +37,8 @@ class ErrorBoundary extends React.Component<Props> {
       return;
     }
 
-    if (window.Sentry) {
-      window.Sentry.captureException(error);
+    if (env.SENTRY_DSN) {
+      Sentry.captureException(error);
     }
   }
 
@@ -56,7 +57,7 @@ class ErrorBoundary extends React.Component<Props> {
   render() {
     if (this.error) {
       const error = this.error;
-      const isReported = !!window.Sentry && env.DEPLOYMENT === "hosted";
+      const isReported = !!env.SENTRY_DSN && env.DEPLOYMENT === "hosted";
       const isChunkError = this.error.message.match(/chunk/);
 
       if (isChunkError) {
@@ -106,7 +107,7 @@ class ErrorBoundary extends React.Component<Props> {
 }
 
 const Pre = styled.pre`
-  background: ${(props) => props.theme.smoke};
+  background: ${(props) => props.theme.secondaryBackground};
   padding: 16px;
   border-radius: 4px;
   font-size: 12px;

app/components/EventBoundary.js

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

app/components/Flex.js

@@ -16,7 +16,7 @@ type AlignValues =
   | "flex-start"
   | "flex-end";
 
-type Props = {
+type Props = {|
   column?: ?boolean,
   shrink?: ?boolean,
   align?: AlignValues,
@@ -24,12 +24,18 @@ type Props = {
   auto?: ?boolean,
   className?: string,
   children?: React.Node,
-};
+  role?: string,
+|};
 
-const Flex = (props: Props) => {
+const Flex = React.forwardRef<Props, HTMLDivElement>((props: Props, ref) => {
   const { children, ...restProps } = props;
-  return <Container {...restProps}>{children}</Container>;
-};
+
+  return (
+    <Container ref={ref} {...restProps}>
+      {children}
+    </Container>
+  );
+});
 
 const Container = styled.div`
   display: flex;

app/components/GroupListItem.js

@@ -1,6 +1,7 @@
 // @flow
 import { observable } from "mobx";
 import { observer, inject } from "mobx-react";
+import { GroupIcon } from "outline-icons";
 import * as React from "react";
 import styled from "styled-components";
 import { MAX_AVATAR_DISPLAY } from "shared/constants";
@@ -17,7 +18,8 @@ type Props = {
   group: Group,
   groupMemberships: GroupMembershipsStore,
   membership?: CollectionGroupMembership,
-  showFacepile: boolean,
+  showFacepile?: boolean,
+  showAvatar?: boolean,
   renderActions: ({ openMembersModal: () => void }) => React.Node,
 };
 
@@ -48,6 +50,11 @@ class GroupListItem extends React.Component<Props> {
     return (
       <>
         <ListItem
+          image={
+            <Image>
+              <GroupIcon size={24} />
+            </Image>
+          }
           title={
             <Title onClick={this.handleMembersModalOpen}>{group.name}</Title>
           }
@@ -84,6 +91,15 @@ class GroupListItem extends React.Component<Props> {
   }
 }
 
+const Image = styled(Flex)`
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background: ${(props) => props.theme.secondaryBackground};
+  border-radius: 32px;
+`;
+
 const Title = styled.span`
   &:hover {
     text-decoration: underline;

app/components/Header.js

@@ -0,0 +1,126 @@
+// @flow
+import { throttle } from "lodash";
+import { observer } from "mobx-react";
+import { transparentize } from "polished";
+import * as React from "react";
+import styled from "styled-components";
+import breakpoint from "styled-components-breakpoint";
+import Fade from "components/Fade";
+import Flex from "components/Flex";
+
+type Props = {|
+  breadcrumb?: React.Node,
+  title: React.Node,
+  actions?: React.Node,
+|};
+
+function Header({ breadcrumb, title, actions }: Props) {
+  const [isScrolled, setScrolled] = React.useState(false);
+
+  const handleScroll = React.useCallback(
+    throttle(() => setScrolled(window.scrollY > 75), 50),
+    []
+  );
+
+  React.useEffect(() => {
+    window.addEventListener("scroll", handleScroll);
+
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, [handleScroll]);
+
+  const handleClickTitle = React.useCallback(() => {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+  }, []);
+
+  return (
+    <Wrapper align="center" isCompact={isScrolled} shrink={false}>
+      {breadcrumb ? <Breadcrumbs>{breadcrumb}</Breadcrumbs> : null}
+      {isScrolled ? (
+        <Title align="center" justify="flex-start" onClick={handleClickTitle}>
+          <Fade>{title}</Fade>
+        </Title>
+      ) : (
+        <div />
+      )}
+      {actions && (
+        <Actions align="center" justify="flex-end">
+          {actions}
+        </Actions>
+      )}
+    </Wrapper>
+  );
+}
+
+const Breadcrumbs = styled("div")`
+  flex-grow: 1;
+  flex-basis: 0;
+  align-items: center;
+  padding-right: 8px;
+
+  /* Don't show breadcrumbs on mobile */
+  display: none;
+  ${breakpoint("tablet")`	
+  display: flex;
+`};
+`;
+
+const Actions = styled(Flex)`
+  flex-grow: 1;
+  flex-basis: 0;
+  min-width: auto;
+  padding-left: 8px;
+`;
+
+const Wrapper = styled(Flex)`
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: ${(props) => transparentize(0.2, props.theme.background)};
+  padding: 12px;
+  transition: all 100ms ease-out;
+  transform: translate3d(0, 0, 0);
+  backdrop-filter: blur(20px);
+  min-height: 56px;
+
+  @media print {
+    display: none;
+  }
+
+  justify-content: flex-start;
+  ${breakpoint("tablet")`
+    padding: ${(props) => (props.isCompact ? "12px" : `24px 24px 0`)};
+    justify-content: "center";
+  `};
+`;
+
+const Title = styled("div")`
+  font-size: 16px;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  cursor: pointer;
+  min-width: 0;
+
+  /* on mobile, there's always a floating menu button in the top left 
+    add some padding here to offset
+  */
+  padding-left: 40px;
+  ${breakpoint("tablet")`	
+    padding-left: 0;
+  `};
+
+  svg {
+    vertical-align: bottom;
+  }
+
+  @media (display-mode: standalone) {
+    overflow: hidden;
+    flex-grow: 0 !important;
+  }
+`;
+
+export default observer(Header);

app/components/Heading.js

@@ -7,8 +7,11 @@ 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;
   }
 `;
 

app/components/HoverPreview.js

@@ -8,7 +8,7 @@ import { fadeAndSlideIn } from "shared/styles/animations";
 import parseDocumentSlug from "shared/utils/parseDocumentSlug";
 import DocumentsStore from "stores/DocumentsStore";
 import HoverPreviewDocument from "components/HoverPreviewDocument";
-import isInternalUrl from "utils/isInternalUrl";
+import { isInternalUrl } from "utils/urls";
 
 const DELAY_OPEN = 300;
 const DELAY_CLOSE = 300;

app/components/IconPicker.js

@@ -1,6 +1,4 @@
 // @flow
-import { observable } from "mobx";
-import { observer } from "mobx-react";
 import {
   CollectionIcon,
   CoinsIcon,
@@ -22,14 +20,17 @@ import {
   VehicleIcon,
 } from "outline-icons";
 import * as React from "react";
-import { withTranslation, type TFunction } from "react-i18next";
+import { useTranslation } from "react-i18next";
+import { useMenuState, MenuButton, MenuItem } from "reakit/Menu";
 import styled from "styled-components";
-import { DropdownMenu } from "components/DropdownMenu";
+import ContextMenu from "components/ContextMenu";
 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")
 );
@@ -122,107 +123,77 @@ const colors = [
   "#2F362F",
 ];
 
-type Props = {
+type Props = {|
   onOpen?: () => void,
   onChange: (color: string, icon: string) => void,
   icon: string,
   color: string,
-  t: TFunction,
-};
+|};
 
-function preventEventBubble(event) {
-  event.stopPropagation();
+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>
+  );
 }
 
-@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 { t } = this.props;
-    const Component = icons[this.props.icon || "collection"].component;
-
-    return (
-      <Wrapper ref={(ref) => (this.node = ref)}>
-        <label>
-          <LabelText>{t("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>{t("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 Label = styled.label`
+  display: block;
+`;
 
 const Icons = styled.div`
   padding: 15px 9px 9px 15px;
   width: 276px;
 `;
 
-const LabelButton = styled(NudeButton)`
+const Button = styled(NudeButton)`
   border: 1px solid ${(props) => props.theme.inputBorder};
   width: 32px;
   height: 32px;
@@ -249,4 +220,4 @@ const Wrapper = styled("div")`
   position: relative;
 `;
 
-export default withTranslation()<IconPicker>(IconPicker);
+export default IconPicker;

app/components/Image.js

@@ -0,0 +1,15 @@
+// @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} />;
+}

app/components/Input.js

@@ -2,9 +2,10 @@
 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 breakpoint from "styled-components-breakpoint";
 import Flex from "components/Flex";
-import VisuallyHidden from "components/VisuallyHidden";
 
 const RealTextarea = styled.textarea`
   border: 0;
@@ -33,10 +34,15 @@ const RealInput = styled.input`
   &::placeholder {
     color: ${(props) => props.theme.placeholder};
   }
+
+  ${breakpoint("mobile", "tablet")`
+    font-size: 16px;
+  `};
 `;
 
 const Wrapper = styled.div`
   flex: ${(props) => (props.flex ? "1" : "0")};
+  width: ${(props) => (props.short ? "49%" : "auto")};
   max-width: ${(props) => (props.short ? "350px" : "100%")};
   min-height: ${({ minHeight }) => (minHeight ? `${minHeight}px` : "0")};
   max-height: ${({ maxHeight }) => (maxHeight ? `${maxHeight}px` : "initial")};
@@ -50,7 +56,6 @@ const IconWrapper = styled.span`
 `;
 
 export const Outline = styled(Flex)`
-  display: flex;
   flex: 1;
   margin: ${(props) =>
     props.margin !== undefined ? props.margin : "0 0 16px"};
@@ -59,7 +64,7 @@ export const Outline = styled(Flex)`
   border-style: solid;
   border-color: ${(props) =>
     props.hasError
-      ? "red"
+      ? props.theme.danger
       : props.focused
       ? props.theme.inputBorderFocused
       : props.theme.inputBorder};
@@ -75,8 +80,8 @@ export const LabelText = styled.div`
   display: inline-block;
 `;
 
-export type Props = {
-  type?: string,
+export type Props = {|
+  type?: "text" | "email" | "checkbox" | "search" | "textarea",
   value?: string,
   label?: string,
   className?: string,
@@ -85,9 +90,21 @@ 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,
+  disabled?: boolean,
+  placeholder?: string,
+  onChange?: (
+    ev: SyntheticInputEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => mixed,
   onFocus?: (ev: SyntheticEvent<>) => void,
   onBlur?: (ev: SyntheticEvent<>) => void,
-};
+|};
 
 @observer
 class Input extends React.Component<Props> {

app/components/InputLarge.js

@@ -3,10 +3,12 @@ import styled from "styled-components";
 import Input from "./Input";
 
 const InputLarge = styled(Input)`
-  height: 40px;
+  height: 38px;
+  flex-grow: 1;
+  margin-right: 8px;
 
   input {
-    height: 40px;
+    height: 38px;
   }
 `;
 

app/components/InputRich.js

@@ -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> {

app/components/InputSearch.js

@@ -9,6 +9,7 @@ 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 = {
@@ -16,6 +17,8 @@ type Props = {
   theme: Theme,
   source: string,
   placeholder?: string,
+  label?: string,
+  labelHidden?: boolean,
   collectionId?: string,
   t: TFunction,
 };
@@ -25,7 +28,7 @@ class InputSearch extends React.Component<Props> {
   input: ?Input;
   @observable focused: boolean = false;
 
-  @keydown("meta+f")
+  @keydown(`${meta}+f`)
   focus(ev: SyntheticEvent<>) {
     ev.preventDefault();
 
@@ -67,6 +70,8 @@ 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}

app/components/InputSelect.js

@@ -2,17 +2,19 @@
 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: 8px 12px;
+  padding: 4px 0;
+  margin: 0 12px;
   outline: none;
-  background: none;
+  background: ${(props) => props.theme.background};
   color: ${(props) => props.theme.text};
+  height: 30px;
 
   &:disabled,
   &::placeholder {
@@ -25,7 +27,7 @@ const Wrapper = styled.label`
   max-width: ${(props) => (props.short ? "350px" : "100%")};
 `;
 
-type Option = { label: string, value: string };
+export type Option = { label: string, value: string };
 
 export type Props = {
   value?: string,
@@ -34,6 +36,8 @@ export type Props = {
   className?: string,
   labelHidden?: boolean,
   options: Option[],
+  onBlur?: () => void,
+  onFocus?: () => void,
 };
 
 @observer

app/components/InputSelectPermission.js

@@ -0,0 +1,22 @@
+// @flow
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import InputSelect, { type Props, type Option } from "./InputSelect";
+
+export default function InputSelectPermission(
+  props: $Rest<Props, { options: Array<Option> }>
+) {
+  const { t } = useTranslation();
+
+  return (
+    <InputSelect
+      label={t("Default access")}
+      options={[
+        { label: t("View and edit"), value: "read_write" },
+        { label: t("View only"), value: "read" },
+        { label: t("No access"), value: "" },
+      ]}
+      {...props}
+    />
+  );
+}

app/components/Labeled.js

@@ -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}>
@@ -17,12 +17,10 @@ const Labeled = ({ label, children, ...props }: Props) => (
 );
 
 export const Label = styled(Flex)`
-  margin-bottom: 8px;
-  font-size: 13px;
   font-weight: 500;
-  text-transform: uppercase;
-  color: ${(props) => props.theme.textTertiary};
-  letter-spacing: 0.04em;
+  padding-bottom: 4px;
+  display: inline-block;
+  color: ${(props) => props.theme.text};
 `;
 
 export default observer(Labeled);

app/components/LanguagePrompt.js

@@ -4,6 +4,7 @@ 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";
@@ -68,7 +69,7 @@ export default function LanguagePrompt() {
             like to change?
           </Trans>
           <br />
-          <a
+          <Link
             onClick={() => {
               auth.updateUser({
                 language,
@@ -77,14 +78,24 @@ export default function LanguagePrompt() {
             }}
           >
             {t("Change Language")}
-          </a>{" "}
-          &middot; <a onClick={ui.setLanguagePromptDismissed}>{t("Dismiss")}</a>
+          </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;
 `;

app/components/Layout.js

@@ -1,31 +1,41 @@
 // @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";
+import {
+  Switch,
+  Route,
+  Redirect,
+  withRouter,
+  type RouterHistory,
+} from "react-router-dom";
+import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import AuthStore from "stores/AuthStore";
 import DocumentsStore from "stores/DocumentsStore";
+import PoliciesStore from "stores/PoliciesStore";
 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 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 { type Theme } from "types";
+import SkipNavContent from "components/SkipNavContent";
+import SkipNavLink from "components/SkipNavLink";
+import { meta } from "utils/keyboard";
 import {
   homeUrl,
   searchUrl,
   matchDocumentSlug as slug,
+  newDocumentUrl,
 } from "utils/routeHelpers";
 
 type Props = {
@@ -35,8 +45,9 @@ type Props = {
   title?: ?React.Node,
   auth: AuthStore,
   ui: UiStore,
+  history: RouterHistory,
+  policies: PoliciesStore,
   notifications?: React.Node,
-  theme: Theme,
   i18n: Object,
   t: TFunction,
 };
@@ -47,32 +58,19 @@ class Layout extends React.Component<Props> {
   @observable redirectTo: ?string;
   @observable keyboardShortcutsOpen: boolean = false;
 
-  constructor(props: Props) {
-    super();
-    this.updateBackground(props);
-  }
-
   componentDidUpdate() {
-    this.updateBackground(this.props);
-
     if (this.redirectTo) {
       this.redirectTo = undefined;
     }
   }
 
-  updateBackground(props: Props) {
-    // ensure the wider page color always matches the theme
-    window.document.body.style.background = props.theme.background;
-  }
-
-  @keydown("meta+.")
+  @keydown(`${meta}+.`)
   handleToggleSidebar() {
     this.props.ui.toggleCollapsedSidebar();
   }
 
   @keydown("shift+/")
   handleOpenKeyboardShortcuts() {
-    if (this.props.ui.editMode) return;
     this.keyboardShortcutsOpen = true;
   }
 
@@ -80,9 +78,8 @@ class Layout extends React.Component<Props> {
     this.keyboardShortcutsOpen = false;
   };
 
-  @keydown(["t", "/", "meta+k"])
+  @keydown(["t", "/", `${meta}+k`])
   goToSearch(ev: SyntheticEvent<>) {
-    if (this.props.ui.editMode) return;
     ev.preventDefault();
     ev.stopPropagation();
     this.redirectTo = searchUrl();
@@ -90,14 +87,25 @@ class Layout extends React.Component<Props> {
 
   @keydown("d")
   goToDashboard() {
-    if (this.props.ui.editMode) return;
     this.redirectTo = homeUrl();
   }
 
+  @keydown("n")
+  goToNewDocument() {
+    const { activeCollectionId } = this.props.ui;
+    if (!activeCollectionId) return;
+
+    const can = this.props.policies.abilities(activeCollectionId);
+    if (!can.update) return;
+
+    this.props.history.push(newDocumentUrl(activeCollectionId));
+  }
+
   render() {
     const { auth, t, 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 />;
@@ -111,11 +119,18 @@ class Layout extends React.Component<Props> {
             content="width=device-width, initial-scale=1.0"
           />
         </Helmet>
-        <Analytics />
+        <SkipNavLink />
 
         {this.props.ui.progressBarVisible && <LoadingIndicatorBar />}
         {this.props.notifications}
 
+        <MobileMenuButton
+          onClick={ui.toggleMobileSidebar}
+          icon={<MenuIcon />}
+          iconColor="currentColor"
+          neutral
+        />
+
         <Container auto>
           {showSidebar && (
             <Switch>
@@ -124,10 +139,17 @@ class Layout extends React.Component<Props> {
             </Switch>
           )}
 
+          <SkipNavContent />
           <Content
             auto
             justify="center"
-            sidebarCollapsed={ui.editMode || ui.sidebarCollapsed}
+            $isResizing={ui.sidebarIsResizing}
+            $sidebarCollapsed={sidebarCollapsed}
+            style={
+              sidebarCollapsed
+                ? undefined
+                : { marginLeft: `${ui.sidebarWidth}px` }
+            }
           >
             {this.props.children}
           </Content>
@@ -159,22 +181,41 @@ 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: margin-left 100ms ease-out;
+  transition: ${(props) =>
+    props.$isResizing ? "none" : `margin-left 100ms ease-out`};
 
   @media print {
     margin: 0;
   }
 
+  ${breakpoint("mobile", "tablet")`
+    margin-left: 0 !important;
+  `}
+
   ${breakpoint("tablet")`
-    margin-left: ${(props) =>
-      props.sidebarCollapsed
-        ? props.theme.sidebarCollapsedWidth
-        : props.theme.sidebarWidth};
+    ${(props) =>
+      props.$sidebarCollapsed &&
+      `margin-left: ${props.theme.sidebarCollapsedWidth}px;`}
   `};
 `;
 
 export default withTranslation()<Layout>(
-  inject("auth", "ui", "documents")(withTheme(Layout))
+  inject("auth", "ui", "documents", "policies")(withRouter(Layout))
 );

app/components/List/Item.js

@@ -27,7 +27,7 @@ const ListItem = ({ image, title, subtitle, actions }: Props) => {
 
 const Wrapper = styled.li`
   display: flex;
-  padding: ${(props) => (props.compact ? "8px" : "12px")} 0;
+  padding: 10px 0;
   margin: 0;
   border-bottom: 1px solid ${(props) => props.theme.divider};
 
@@ -38,17 +38,17 @@ const Wrapper = styled.li`
 
 const Image = styled(Flex)`
   padding: 0 8px 0 0;
-  max-height: 40px;
+  max-height: 32px;
   align-items: center;
   user-select: none;
   flex-shrink: 0;
-  align-self: flex-start;
+  align-self: center;
 `;
 
 const Heading = styled.p`
   font-size: 16px;
   font-weight: 500;
-  line-height: 1.2;
+  line-height: 1.1;
   margin: 0;
 `;
 

app/components/LocaleTime.js

@@ -0,0 +1,90 @@
+// @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`),
+  ru: require(`date-fns/locale/ru`),
+};
+
+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;

app/components/Mask.js

@@ -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;
@@ -23,7 +23,7 @@ class Mask extends React.Component<Props> {
   }
 
   render() {
-    return <Redacted width={this.width} {...this.props} />;
+    return <Redacted width={this.width} height={this.props.height} />;
   }
 }
 

app/components/Modal.js

@@ -3,60 +3,25 @@ import { observer } from "mobx-react";
 import { CloseIcon, BackIcon } from "outline-icons";
 import { transparentize } from "polished";
 import * as React from "react";
-import ReactModal from "react-modal";
-import styled, { createGlobalStyle } from "styled-components";
+import { useTranslation } from "react-i18next";
+import { Dialog, DialogBackdrop, useDialogState } from "reakit/Dialog";
+import styled from "styled-components";
 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";
+import usePrevious from "hooks/usePrevious";
+import useUnmount from "hooks/useUnmount";
 
-ReactModal.setAppElement("#root");
+let openModals = 0;
 
-type Props = {
+type Props = {|
   children?: React.Node,
   isOpen: boolean,
   title?: string,
   onRequestClose: () => void,
-};
-
-const GlobalStyles = createGlobalStyle`
-  .ReactModal__Overlay {
-    background-color: ${(props) =>
-      transparentize(0.25, props.theme.background)} !important;
-    z-index: ${(props) => props.theme.depths.modalOverlay};
-  }
-
-  ${breakpoint("tablet")`
-    .ReactModalPortal + .ReactModalPortal,
-    .ReactModalPortal + [data-react-modal-body-trap] + .ReactModalPortal {
-      .ReactModal__Overlay {
-        margin-left: 12px;
-        box-shadow: 0 -2px 10px ${(props) => props.theme.shadow};
-        border-radius: 8px 0 0 8px;
-        overflow: hidden;
-      }
-    }
-
-    .ReactModalPortal + .ReactModalPortal + .ReactModalPortal,
-    .ReactModalPortal + .ReactModalPortal + [data-react-modal-body-trap] + .ReactModalPortal {
-      .ReactModal__Overlay {
-        margin-left: 24px;
-      }
-    }
-
-    .ReactModalPortal + .ReactModalPortal + .ReactModalPortal + .ReactModalPortal,
-    .ReactModalPortal + .ReactModalPortal + .ReactModalPortal + [data-react-modal-body-trap] + .ReactModalPortal {
-      .ReactModal__Overlay {
-        margin-left: 36px;
-      }
-    }
-  `};
-
-  .ReactModal__Body--open {
-    overflow: hidden;
-  }
-`;
+|};
 
 const Modal = ({
   children,
@@ -65,35 +30,112 @@ const Modal = ({
   onRequestClose,
   ...rest
 }: Props) => {
+  const dialog = useDialogState({ animated: 250 });
+  const [depth, setDepth] = React.useState(0);
+  const wasOpen = usePrevious(isOpen);
+  const { t } = useTranslation();
+
+  React.useEffect(() => {
+    if (!wasOpen && isOpen) {
+      setDepth(openModals++);
+      dialog.show();
+    }
+    if (wasOpen && !isOpen) {
+      setDepth(openModals--);
+      dialog.hide();
+    }
+  }, [dialog, wasOpen, isOpen]);
+
+  useUnmount(() => {
+    if (isOpen) {
+      openModals--;
+    }
+  });
+
   if (!isOpen) return null;
 
   return (
-    <>
-      <GlobalStyles />
-      <StyledModal
-        contentLabel={title}
-        onRequestClose={onRequestClose}
-        isOpen={isOpen}
-        {...rest}
-      >
-        <Content>
-          <Centered onClick={(ev) => ev.stopPropagation()} column>
-            {title && <h1>{title}</h1>}
-            {children}
-          </Centered>
-        </Content>
-        <Back onClick={onRequestClose}>
-          <BackIcon size={32} color="currentColor" />
-          <Text>Back</Text>
-        </Back>
-        <Close onClick={onRequestClose}>
-          <CloseIcon size={32} color="currentColor" />
-        </Close>
-      </StyledModal>
-    </>
+    <DialogBackdrop {...dialog}>
+      {(props) => (
+        <Backdrop {...props}>
+          <Dialog
+            {...dialog}
+            aria-label={title}
+            preventBodyScrollhideOnEsc
+            hide={onRequestClose}
+          >
+            {(props) => (
+              <Scene
+                $nested={!!depth}
+                style={{ marginLeft: `${depth * 12}px` }}
+                {...props}
+              >
+                <Content>
+                  <Centered onClick={(ev) => ev.stopPropagation()} column>
+                    {title && <h1>{title}</h1>}
+                    {children}
+                  </Centered>
+                </Content>
+                <Back onClick={onRequestClose}>
+                  <BackIcon size={32} color="currentColor" />
+                  <Text>{t("Back")}</Text>
+                </Back>
+                <Close onClick={onRequestClose}>
+                  <CloseIcon size={32} color="currentColor" />
+                </Close>
+              </Scene>
+            )}
+          </Dialog>
+        </Backdrop>
+      )}
+    </DialogBackdrop>
   );
 };
 
+const Backdrop = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: ${(props) =>
+    transparentize(0.25, props.theme.background)} !important;
+  z-index: ${(props) => props.theme.depths.modalOverlay};
+  transition: opacity 50ms ease-in-out;
+  opacity: 0;
+
+  &[data-enter] {
+    opacity: 1;
+  }
+`;
+
+const Scene = styled.div`
+  animation: ${fadeAndScaleIn} 250ms ease;
+
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: ${(props) => props.theme.depths.modal};
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  background: ${(props) => props.theme.background};
+  transition: ${(props) => props.theme.backgroundTransition};
+  outline: none;
+
+  ${breakpoint("tablet")`
+  ${(props) =>
+    props.$nested &&
+    `
+      box-shadow: 0 -2px 10px ${props.theme.shadow};
+      border-radius: 8px 0 0 8px;
+      overflow: hidden;
+  `}
+`}
+`;
+
 const Content = styled(Scrollable)`
   width: 100%;
   padding: 8vh 2rem 2rem;
@@ -110,23 +152,6 @@ const Centered = styled(Flex)`
   margin: 0 auto;
 `;
 
-const StyledModal = styled(ReactModal)`
-  animation: ${fadeAndScaleIn} 250ms ease;
-
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  z-index: ${(props) => props.theme.depths.modal};
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-  background: ${(props) => props.theme.background};
-  transition: ${(props) => props.theme.backgroundTransition};
-  outline: none;
-`;
-
 const Text = styled.span`
   font-size: 16px;
   font-weight: 500;

app/components/NoticeAlert.js

@@ -11,7 +11,7 @@ export default function AlertNotice({ children }: { children: React.Node }) {
         viewBox="0 0 16 16"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
-        style={{ position: "relative", top: "2px" }}
+        style={{ position: "relative", top: "2px", marginRight: "4px" }}
       >
         <path
           d="M15.6676 11.5372L10.0155 1.14735C9.10744 -0.381434 6.89378 -0.383465 5.98447 1.14735L0.332715 11.5372C-0.595598 13.0994 0.528309 15.0776 2.34778 15.0776H13.652C15.47 15.0776 16.5959 13.101 15.6676 11.5372ZM8 13.2026C7.48319 13.2026 7.0625 12.7819 7.0625 12.2651C7.0625 11.7483 7.48319 11.3276 8 11.3276C8.51681 11.3276 8.9375 11.7483 8.9375 12.2651C8.9375 12.7819 8.51681 13.2026 8 13.2026ZM8.9375 9.45257C8.9375 9.96938 8.51681 10.3901 8 10.3901C7.48319 10.3901 7.0625 9.96938 7.0625 9.45257V4.76507C7.0625 4.24826 7.48319 3.82757 8 3.82757C8.51681 3.82757 8.9375 4.24826 8.9375 4.76507V9.45257Z"

app/components/NudeButton.js

@@ -3,15 +3,17 @@ import * as React from "react";
 import styled from "styled-components";
 
 const Button = styled.button`
-  width: 24px;
-  height: 24px;
+  width: ${(props) => props.size}px;
+  height: ${(props) => props.size}px;
   background: none;
   border-radius: 4px;
   line-height: 0;
   border: 0;
   padding: 0;
+  cursor: pointer;
+  user-select: none;
 `;
 
-export default React.forwardRef<any, typeof Button>((props, ref) => (
-  <Button {...props} ref={ref} />
-));
+export default React.forwardRef<any, typeof Button>(
+  ({ size = 24, ...props }, ref) => <Button size={size} {...props} ref={ref} />
+);

app/components/PageTheme.js

@@ -0,0 +1,41 @@
+// @flow
+import * as React from "react";
+import { useTheme } from "styled-components";
+import useStores from "hooks/useStores";
+
+export default function PageTheme() {
+  const { ui } = useStores();
+  const theme = useTheme();
+
+  React.useEffect(() => {
+    // wider page background beyond the React root
+    if (document.body) {
+      document.body.style.background = theme.background;
+    }
+
+    // theme-color adjusts the title bar color for desktop PWA
+    const themeElement = document.querySelector('meta[name="theme-color"]');
+    if (themeElement) {
+      themeElement.setAttribute("content", theme.background);
+    }
+
+    // status bar color for iOS PWA
+    const statusElement = document.querySelector(
+      'meta[name="apple-mobile-web-app-status-bar-style"]'
+    );
+    if (statusElement) {
+      statusElement.setAttribute(
+        "content",
+        ui.resolvedTheme === "dark" ? "black-translucent" : "default"
+      );
+    }
+
+    // user-agent controls and scrollbars
+    const csElement = document.querySelector('meta[name="color-scheme"]');
+    if (csElement) {
+      csElement.setAttribute("content", ui.resolvedTheme);
+    }
+  }, [theme, ui.resolvedTheme]);
+
+  return null;
+}

app/components/PageTitle.js

@@ -1,16 +1,17 @@
 // @flow
-import { observer, inject } from "mobx-react";
+import { observer } from "mobx-react";
 import * as React from "react";
 import { Helmet } from "react-helmet";
-import AuthStore from "stores/AuthStore";
+import useStores from "hooks/useStores";
+import { cdnPath } from "utils/urls";
 
-type Props = {
+type Props = {|
   title: string,
   favicon?: string,
-  auth: AuthStore,
-};
+|};
 
-const PageTitle = observer(({ auth, title, favicon }: Props) => {
+const PageTitle = ({ title, favicon }: Props) => {
+  const { auth } = useStores();
   const { team } = auth;
 
   return (
@@ -21,12 +22,12 @@ const PageTitle = observer(({ auth, title, favicon }: Props) => {
       <link
         rel="shortcut icon"
         type="image/png"
-        href={favicon || "/favicon-32.png"}
+        href={favicon || cdnPath("/favicon-32.png")}
         sizes="32x32"
       />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     </Helmet>
   );
-});
+};
 
-export default inject("auth")(PageTitle);
+export default observer(PageTitle);

app/components/PaginatedDocumentList.js

@@ -2,16 +2,22 @@
 import { observer } from "mobx-react";
 import * as React from "react";
 import Document from "models/Document";
-import DocumentPreview from "components/DocumentPreview";
+import DocumentListItem from "components/DocumentListItem";
 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> {
@@ -26,7 +32,7 @@ class PaginatedDocumentList extends React.Component<Props> {
         fetch={fetch}
         options={options}
         renderItem={(item) => (
-          <DocumentPreview key={item.id} document={item} {...rest} />
+          <DocumentListItem key={item.id} document={item} {...rest} />
         )}
       />
     );

app/components/Popover.js

@@ -1,66 +0,0 @@
-// @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}
-    />
-  );
-}

app/components/ProfiledRoute.js

@@ -0,0 +1,12 @@
+// @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;

app/components/Scene.js

@@ -0,0 +1,56 @@
+// @flow
+import * as React from "react";
+import styled from "styled-components";
+import CenteredContent from "components/CenteredContent";
+import Header from "components/Header";
+import PageTitle from "components/PageTitle";
+
+type Props = {|
+  icon?: React.Node,
+  title: React.Node,
+  textTitle?: string,
+  children: React.Node,
+  breadcrumb?: React.Node,
+  actions?: React.Node,
+  centered?: boolean,
+|};
+
+function Scene({
+  title,
+  icon,
+  textTitle,
+  actions,
+  breadcrumb,
+  children,
+  centered,
+}: Props) {
+  return (
+    <FillWidth>
+      <PageTitle title={textTitle || title} />
+      <Header
+        title={
+          icon ? (
+            <>
+              {icon}&nbsp;{title}
+            </>
+          ) : (
+            title
+          )
+        }
+        actions={actions}
+        breadcrumb={breadcrumb}
+      />
+      {centered !== false ? (
+        <CenteredContent withStickyHeader>{children}</CenteredContent>
+      ) : (
+        children
+      )}
+    </FillWidth>
+  );
+}
+
+const FillWidth = styled.div`
+  width: 100%;
+`;
+
+export default Scene;

app/components/Scrollable.js

@@ -1,39 +1,78 @@
 // @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,
+  flex?: boolean,
+|};
 
-@observer
-class Scrollable extends React.Component<Props> {
-  @observable shadow: boolean = false;
+function Scrollable({ shadow, topShadow, bottomShadow, flex, ...rest }: Props) {
+  const ref = React.useRef<?HTMLDivElement>();
+  const [topShadowVisible, setTopShadow] = React.useState(false);
+  const [bottomShadowVisible, setBottomShadow] = React.useState(false);
+  const { height } = useWindowSize();
 
-  handleScroll = (ev: SyntheticMouseEvent<HTMLDivElement>) => {
-    this.shadow = !!(this.props.shadow && ev.currentTarget.scrollTop > 0);
-  };
+  const updateShadows = React.useCallback(() => {
+    const c = ref.current;
+    if (!c) return;
 
-  render() {
-    const { shadow, ...rest } = this.props;
+    const scrollTop = c.scrollTop;
+    const tsv = !!((shadow || topShadow) && scrollTop > 0);
+    if (tsv !== topShadowVisible) {
+      setTopShadow(tsv);
+    }
 
-    return (
-      <Wrapper onScroll={this.handleScroll} shadow={this.shadow} {...rest} />
-    );
-  }
+    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}
+      $flex={flex}
+      $topShadowVisible={topShadowVisible}
+      $bottomShadowVisible={bottomShadowVisible}
+      {...rest}
+    />
+  );
 }
 
 const Wrapper = styled.div`
+  display: ${(props) => (props.$flex ? "flex" : "block")};
+  flex-direction: column;
   height: 100%;
   overflow-y: auto;
   overflow-x: hidden;
   overscroll-behavior: none;
   -webkit-overflow-scrolling: touch;
-  box-shadow: ${(props) =>
-    props.shadow ? "0 1px inset rgba(0,0,0,.1)" : "none"};
-  transition: all 250ms ease-in-out;
+  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;
 `;
 
-export default Scrollable;
+export default observer(Scrollable);

app/components/Sidebar/Main.js

@@ -1,6 +1,5 @@
 // @flow
-import { observable } from "mobx";
-import { observer, inject } from "mobx-react";
+import { observer } from "mobx-react";
 import {
   ArchiveIcon,
   HomeIcon,
@@ -10,83 +9,89 @@ import {
   ShapesIcon,
   TrashIcon,
   PlusIcon,
+  SettingsIcon,
 } from "outline-icons";
 import * as React from "react";
-import { withTranslation, type TFunction } from "react-i18next";
+import { DndProvider } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
+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 TeamButton from "./components/TeamButton";
+import useStores from "hooks/useStores";
 import AccountMenu from "menus/AccountMenu";
 
-type Props = {
-  auth: AuthStore,
-  documents: DocumentsStore,
-  policies: PoliciesStore,
-  t: TFunction,
-};
+function MainSidebar() {
+  const { t } = useTranslation();
+  const { policies, auth, documents } = useStores();
+  const [inviteModalOpen, setInviteModalOpen] = React.useState(false);
+  const [
+    createCollectionModalOpen,
+    setCreateCollectionModalOpen,
+  ] = React.useState(false);
 
-@observer
-class MainSidebar extends React.Component<Props> {
-  @observable inviteModalOpen = false;
-  @observable createCollectionModalOpen = false;
+  React.useEffect(() => {
+    documents.fetchDrafts();
+    documents.fetchTemplates();
+  }, [documents]);
 
-  componentDidMount() {
-    this.props.documents.fetchDrafts();
-    this.props.documents.fetchTemplates();
-  }
+  const handleCreateCollectionModalOpen = React.useCallback(
+    (ev: SyntheticEvent<>) => {
+      ev.preventDefault();
+      setCreateCollectionModalOpen(true);
+    },
+    []
+  );
 
-  handleCreateCollectionModalOpen = (ev: SyntheticEvent<>) => {
+  const handleCreateCollectionModalClose = React.useCallback(() => {
+    setCreateCollectionModalOpen(false);
+  }, []);
+
+  const handleInviteModalOpen = React.useCallback((ev: SyntheticEvent<>) => {
     ev.preventDefault();
-    this.createCollectionModalOpen = true;
-  };
+    setInviteModalOpen(true);
+  }, []);
 
-  handleCreateCollectionModalClose = (ev: SyntheticEvent<>) => {
-    this.createCollectionModalOpen = false;
-  };
+  const handleInviteModalClose = React.useCallback(() => {
+    setInviteModalOpen(false);
+  }, []);
 
-  handleInviteModalOpen = (ev: SyntheticEvent<>) => {
-    ev.preventDefault();
-    this.inviteModalOpen = true;
-  };
+  const [dndArea, setDndArea] = React.useState();
+  const handleSidebarRef = React.useCallback((node) => setDndArea(node), []);
+  const html5Options = React.useMemo(() => ({ rootElement: dndArea }), [
+    dndArea,
+  ]);
 
-  handleInviteModalClose = () => {
-    this.inviteModalOpen = false;
-  };
+  const { user, team } = auth;
+  if (!user || !team) return null;
 
-  render() {
-    const { auth, documents, policies, t } = this.props;
-    const { user, team } = auth;
-    if (!user || !team) return null;
+  const can = policies.abilities(team.id);
 
-    const can = policies.abilities(team.id);
-
-    return (
-      <Sidebar>
-        <AccountMenu
-          label={
-            <HeaderBlock
-              subheading={user.name}
-              teamName={team.name}
-              logoUrl={team.avatarUrl}
-              showDisclosure
-            />
-          }
-        />
-        <Flex auto column>
-          <Scrollable shadow>
+  return (
+    <Sidebar ref={handleSidebarRef}>
+      {dndArea && (
+        <DndProvider backend={HTML5Backend} options={html5Options}>
+          <AccountMenu>
+            {(props) => (
+              <TeamButton
+                {...props}
+                subheading={user.name}
+                teamName={team.name}
+                logoUrl={team.avatarUrl}
+                showDisclosure
+              />
+            )}
+          </AccountMenu>
+          <Scrollable flex topShadow>
             <Section>
               <SidebarLink
                 to="/home"
@@ -124,9 +129,7 @@ class MainSidebar extends React.Component<Props> {
                 label={
                   <Drafts align="center">
                     {t("Drafts")}
-                    {documents.totalDrafts > 0 && (
-                      <Bubble count={documents.totalDrafts} />
-                    )}
+                    <Bubble count={documents.totalDrafts} />
                   </Drafts>
                 }
                 active={
@@ -138,9 +141,9 @@ class MainSidebar extends React.Component<Props> {
                 }
               />
             </Section>
-            <Section>
+            <Section auto>
               <Collections
-                onCreateCollection={this.handleCreateCollectionModalOpen}
+                onCreateCollection={handleCreateCollectionModalOpen}
               />
             </Section>
             <Section>
@@ -164,40 +167,46 @@ class MainSidebar extends React.Component<Props> {
                   documents.active ? documents.active.isDeleted : undefined
                 }
               />
-              {can.invite && (
+              <SidebarLink
+                to="/settings"
+                icon={<SettingsIcon color="currentColor" />}
+                exact={false}
+                label={t("Settings")}
+              />
+              {can.inviteUser && (
                 <SidebarLink
                   to="/settings/people"
-                  onClick={this.handleInviteModalOpen}
+                  onClick={handleInviteModalOpen}
                   icon={<PlusIcon color="currentColor" />}
-                  label={t("Invite people…")}
+                  label={`${t("Invite people")}…`}
                 />
               )}
             </Section>
           </Scrollable>
-        </Flex>
-        <Modal
-          title={t("Invite people")}
-          onRequestClose={this.handleInviteModalClose}
-          isOpen={this.inviteModalOpen}
-        >
-          <Invite onSubmit={this.handleInviteModalClose} />
-        </Modal>
-        <Modal
-          title={t("Create a collection")}
-          onRequestClose={this.handleCreateCollectionModalClose}
-          isOpen={this.createCollectionModalOpen}
-        >
-          <CollectionNew onSubmit={this.handleCreateCollectionModalClose} />
-        </Modal>
-      </Sidebar>
-    );
-  }
+          {can.inviteUser && (
+            <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>
+        </DndProvider>
+      )}
+    </Sidebar>
+  );
 }
 
 const Drafts = styled(Flex)`
   height: 24px;
 `;
 
-export default withTranslation()<MainSidebar>(
-  inject("documents", "policies", "auth")(MainSidebar)
-);
+export default observer(MainSidebar);

app/components/Sidebar/Settings.js

@@ -1,5 +1,5 @@
 // @flow
-import { observer, inject } from "mobx-react";
+import { observer } from "mobx-react";
 import {
   DocumentIcon,
   EmailIcon,
@@ -13,148 +13,138 @@ import {
   ExpandedIcon,
 } from "outline-icons";
 import * as React from "react";
-import { withTranslation, type TFunction } from "react-i18next";
-import type { RouterHistory } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { useHistory } 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";
 
 import Sidebar from "./Sidebar";
 import Header from "./components/Header";
-import HeaderBlock from "./components/HeaderBlock";
 import Section from "./components/Section";
 import SidebarLink from "./components/SidebarLink";
+import TeamButton from "./components/TeamButton";
 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,
-  t: TFunction,
-};
+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, t, auth } = this.props;
-    const { team } = auth;
-    if (!team) return null;
+  return (
+    <Sidebar>
+      <TeamButton
+        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);
-
-    return (
-      <Sidebar>
-        <HeaderBlock
-          subheading={
-            <ReturnToApp align="center">
-              <BackIcon color="currentColor" /> {t("Return to App")}
-            </ReturnToApp>
-          }
-          teamName={team.name}
-          logoUrl={team.avatarUrl}
-          onClick={this.returnToDashboard}
-        />
-
-        <Flex auto column>
-          <Scrollable shadow>
-            <Section>
-              <Header>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>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>
+      <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 && (
-              <Section>
-                <Header>{t("Integrations")}</Header>
+              <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/import-export"
+                icon={<DocumentIcon color="currentColor" />}
+                label={`${t("Import")} / ${t("Export")}`}
+              />
+            )}
+          </Section>
+          {can.update && (
+            <Section>
+              <Header>{t("Integrations")}</Header>
+              <SidebarLink
+                to="/settings/integrations/slack"
+                icon={<SlackIcon color="currentColor" />}
+                label="Slack"
+              />
+              {isHosted && (
                 <SidebarLink
-                  to="/settings/integrations/slack"
-                  icon={<SlackIcon color="currentColor" />}
-                  label="Slack"
+                  to="/settings/integrations/zapier"
+                  icon={<ZapierIcon color="currentColor" />}
+                  label="Zapier"
                 />
-                {isHosted && (
-                  <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 && !isHosted && (
+            <Section>
+              <Header>{t("Installation")}</Header>
+              <Version />
+            </Section>
+          )}
+        </Scrollable>
+      </Flex>
+    </Sidebar>
+  );
 }
 
 const BackIcon = styled(ExpandedIcon)`
@@ -166,6 +156,4 @@ const ReturnToApp = styled(Flex)`
   height: 16px;
 `;
 
-export default withTranslation()<SettingsSidebar>(
-  inject("auth", "policies")(SettingsSidebar)
-);
+export default observer(SettingsSidebar);

app/components/Sidebar/Sidebar.js

@@ -1,66 +1,218 @@
 // @flow
 import { observer } from "mobx-react";
-import { CloseIcon, MenuIcon } from "outline-icons";
 import * as React from "react";
-import { withRouter } from "react-router-dom";
-import type { Location } from "react-router-dom";
-import styled from "styled-components";
+import { useTranslation } from "react-i18next";
+import { Portal } from "react-portal";
+import { useLocation } from "react-router-dom";
+import styled, { useTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import Fade from "components/Fade";
 import Flex from "components/Flex";
-import CollapseToggle, { Button } from "./components/CollapseToggle";
+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;
+let isFirstRender = true;
 
-type Props = {
+type Props = {|
   children: React.Node,
-  location: Location,
-};
+|};
 
-function Sidebar({ location, children }: Props) {
-  const { ui } = useStores();
-  const previousLocation = usePrevious(location);
+const Sidebar = React.forwardRef<Props, HTMLButtonElement>(
+  ({ children }: Props, ref) => {
+    const [isCollapsing, setCollapsing] = React.useState(false);
+    const theme = useTheme();
+    const { t } = useTranslation();
+    const { ui } = useStores();
+    const location = useLocation();
+    const previousLocation = usePrevious(location);
 
-  React.useEffect(() => {
-    if (location !== previousLocation) {
-      ui.hideMobileSidebar();
-    }
-  }, [ui, location, previousLocation]);
+    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 content = (
-    <Container
-      mobileSidebarVisible={ui.mobileSidebarVisible}
-      collapsed={ui.editMode || ui.sidebarCollapsed}
-      column
-    >
-      <CollapseToggle
-        collapsed={ui.sidebarCollapsed}
-        onClick={ui.toggleCollapsedSidebar}
-      />
-      <Toggle
-        onClick={ui.toggleMobileSidebar}
-        mobileSidebarVisible={ui.mobileSidebarVisible}
-      >
-        {ui.mobileSidebarVisible ? (
-          <CloseIcon size={32} />
-        ) : (
-          <MenuIcon size={32} />
+    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);
+      }
+    }, [isAnimating]);
+
+    React.useEffect(() => {
+      if (isCollapsing) {
+        setTimeout(() => {
+          setWidth(minWidth);
+          setCollapsing(false);
+        }, ANIMATION_MS);
+      }
+    }, [setWidth, minWidth, isCollapsing]);
+
+    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) {
+        isFirstRender = false;
+        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 = (
+      <>
+        {ui.mobileSidebarVisible && (
+          <Portal>
+            <Fade>
+              <Background onClick={ui.toggleMobileSidebar} />
+            </Fade>
+          </Portal>
         )}
-      </Toggle>
-      {children}
-    </Container>
-  );
+        {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")}
+          />
+        )}
+      </>
+    );
 
-  // Fade in the sidebar on first render after page load
-  if (firstRender) {
-    firstRender = false;
-    return <Fade>{content}</Fade>;
+    return (
+      <>
+        <Container
+          ref={ref}
+          style={style}
+          $sidebarWidth={ui.sidebarWidth}
+          $isCollapsing={isCollapsing}
+          $isAnimating={isAnimating}
+          $isSmallerThanMinimum={isSmallerThanMinimum}
+          $mobileSidebarVisible={ui.mobileSidebarVisible}
+          $collapsed={collapsed}
+          column
+        >
+          {isFirstRender ? <Fade>{content}</Fade> : content}
+        </Container>
+        {!ui.isEditing && (
+          <Toggle
+            style={toggleStyle}
+            onClick={ui.toggleCollapsedSidebar}
+            direction={ui.sidebarCollapsed ? "right" : "left"}
+            aria-label={ui.sidebarCollapsed ? t("Expand") : t("Collapse")}
+          />
+        )}
+      </>
+    );
   }
+);
 
-  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;
@@ -68,76 +220,57 @@ const Container = styled(Flex)`
   bottom: 0;
   width: 100%;
   background: ${(props) => props.theme.sidebarBackground};
-  transition: box-shadow, 100ms, ease-in-out, left 100ms ease-out,
-    ${(props) => props.theme.backgroundTransition};
-  margin-left: ${(props) => (props.mobileSidebarVisible ? 0 : "-100%")};
+  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%")}
+  );
   z-index: ${(props) => props.theme.depths.sidebar};
+  max-width: 70%;
+  min-width: 280px;
+
+  ${Positioner} {
+    display: none;
+  }
 
   @media print {
     display: 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;
+    transform: none;
   }
 
   ${breakpoint("tablet")`
-    left: ${(props) =>
-      props.collapsed
-        ? `calc(-${props.theme.sidebarWidth} + ${props.theme.sidebarCollapsedWidth})`
-        : 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 {
-      left: 0;
+      transform: none;
       box-shadow: ${(props) =>
-        props.collapsed ? "rgba(0, 0, 0, 0.2) 1px 0 4px" : "none"};
+        props.$collapsed
+          ? "rgba(0, 0, 0, 0.2) 1px 0 4px"
+          : props.$isSmallerThanMinimum
+          ? "rgba(0, 0, 0, 0.1) inset -1px 0 2px"
+          : "none"};
 
-      & ${Button} {
-        opacity: .75;
+      ${Positioner} {
+        display: block;
       }
 
-      & ${Button}:hover {
+      ${ToggleButton} {
         opacity: 1;
       }
     }
 
     &:not(:hover):not(:focus-within) > div {
-      opacity: ${(props) => (props.collapsed ? "0" : "1")};
+      opacity: ${(props) => (props.$collapsed ? "0" : "1")};
       transition: opacity 100ms ease-in-out;
     }
   `};
 `;
 
-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(observer(Sidebar));
+export default observer(Sidebar);

app/components/Sidebar/components/CollapseToggle.js

@@ -1,59 +0,0 @@
-// @flow
-import { NextIcon, BackIcon } from "outline-icons";
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-import styled from "styled-components";
-import Tooltip from "components/Tooltip";
-import { meta } from "utils/keyboard";
-
-type Props = {|
-  collapsed: boolean,
-  onClick?: () => void,
-|};
-
-function CollapseToggle({ collapsed, ...rest }: Props) {
-  const { t } = useTranslation();
-
-  return (
-    <Tooltip
-      tooltip={collapsed ? t("Expand") : t("Collapse")}
-      shortcut={`${meta}+.`}
-      delay={500}
-      placement="bottom"
-    >
-      <Button {...rest} aria-hidden>
-        {collapsed ? (
-          <NextIcon color="currentColor" />
-        ) : (
-          <BackIcon color="currentColor" />
-        )}
-      </Button>
-    </Tooltip>
-  );
-}
-
-export const Button = styled.button`
-  display: block;
-  position: absolute;
-  top: 28px;
-  right: 8px;
-  border: 0;
-  width: 24px;
-  height: 24px;
-  z-index: 1;
-  font-weight: 600;
-  color: ${(props) => props.theme.sidebarText};
-  background: ${(props) => props.theme.sidebarItemBackground};
-  transition: opacity 100ms ease-in-out;
-  border-radius: 4px;
-  opacity: 0;
-  cursor: pointer;
-  padding: 0;
-
-  &:hover {
-    color: ${(props) => props.theme.white};
-    background: ${(props) => props.theme.primary};
-  }
-`;
-
-export default CollapseToggle;

app/components/Sidebar/components/CollectionLink.js

@@ -1,24 +1,29 @@
 // @flow
+import fractionalIndex from "fractional-index";
 import { observer } from "mobx-react";
 import * as React from "react";
-import { useDrop } from "react-dnd";
-import UiStore from "stores/UiStore";
+import { useDrop, useDrag } from "react-dnd";
+import styled from "styled-components";
 import Collection from "models/Collection";
 import Document from "models/Document";
 import CollectionIcon from "components/CollectionIcon";
-import DropToImport from "components/DropToImport";
 import DocumentLink from "./DocumentLink";
+import DropCursor from "./DropCursor";
+import DropToImport from "./DropToImport";
 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 = {|
   collection: Collection,
-  ui: UiStore,
   canUpdate: boolean,
   activeDocument: ?Document,
   prefetchDocument: (id: string) => Promise<void>,
+  belowCollection: Collection | void,
+  isDraggingAnyCollection: boolean,
+  onChangeDragging: (dragging: boolean) => void,
 |};
 
 function CollectionLink({
@@ -26,7 +31,9 @@ function CollectionLink({
   activeDocument,
   prefetchDocument,
   canUpdate,
-  ui,
+  belowCollection,
+  isDraggingAnyCollection,
+  onChangeDragging,
 }: Props) {
   const [menuOpen, setMenuOpen] = React.useState(false);
 
@@ -37,13 +44,29 @@ function CollectionLink({
     [collection]
   );
 
-  const { documents, policies } = useStores();
-  const expanded = collection.id === ui.activeCollectionId;
+  const { ui, documents, policies, collections } = useStores();
 
-  // Droppable
+  const [expanded, setExpanded] = React.useState(
+    collection.id === ui.activeCollectionId
+  );
+
+  React.useEffect(() => {
+    if (isDraggingAnyCollection) {
+      setExpanded(false);
+    } else {
+      setExpanded(collection.id === ui.activeCollectionId);
+    }
+  }, [isDraggingAnyCollection, collection.id, ui.activeCollectionId]);
+
+  const manualSort = collection.sort.field === "index";
+  const can = policies.abilities(collection.id);
+  const belowCollectionIndex = belowCollection ? belowCollection.index : null;
+
+  // 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);
     },
@@ -51,47 +74,122 @@ function CollectionLink({
       return policies.abilities(collection.id).update;
     },
     collect: (monitor) => ({
-      isOver: !!monitor.isOver(),
+      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(),
+    }),
+  });
+
+  // Drop to reorder Collection
+  const [{ isCollectionDropping }, dropToReorderCollection] = useDrop({
+    accept: "collection",
+    drop: async (item, monitor) => {
+      collections.move(
+        item.id,
+        fractionalIndex(collection.index, belowCollectionIndex)
+      );
+    },
+    canDrop: (item, monitor) => {
+      return (
+        collection.id !== item.id &&
+        (!belowCollection || item.id !== belowCollection.id)
+      );
+    },
+    collect: (monitor) => ({
+      isCollectionDropping: monitor.isOver(),
+    }),
+  });
+
+  // Drag to reorder Collection
+  const [{ isCollectionDragging }, dragToReorderCollection] = useDrag({
+    type: "collection",
+    item: () => {
+      onChangeDragging(true);
+      return {
+        id: collection.id,
+      };
+    },
+    collect: (monitor) => ({
+      isCollectionDragging: monitor.isDragging(),
+    }),
+    canDrag: (monitor) => {
+      return can.move;
+    },
+    end: (monitor) => {
+      onChangeDragging(false);
+    },
+  });
+
   return (
     <>
-      <div ref={drop}>
-        <DropToImport key={collection.id} collectionId={collection.id}>
-          <SidebarLink
-            key={collection.id}
-            to={collection.url}
-            icon={
-              <CollectionIcon collection={collection} expanded={expanded} />
-            }
-            iconColor={collection.color}
-            expanded={expanded}
-            menuOpen={menuOpen}
-            isActiveDrop={isOver && canDrop}
-            label={
-              <EditableTitle
-                title={collection.name}
-                onSubmit={handleTitleChange}
-                canUpdate={canUpdate}
-              />
-            }
-            exact={false}
-            menu={
-              <CollectionMenu
-                position="right"
-                collection={collection}
-                onOpen={() => setMenuOpen(true)}
-                onClose={() => setMenuOpen(false)}
-              />
-            }
-          ></SidebarLink>
-        </DropToImport>
+      <div ref={drop} style={{ position: "relative" }}>
+        <Draggable
+          key={collection.id}
+          ref={dragToReorderCollection}
+          $isDragging={isCollectionDragging}
+          $isMoving={isCollectionDragging}
+        >
+          <DropToImport collectionId={collection.id}>
+            <SidebarLinkWithPadding
+              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}
+                />
+              }
+              exact={false}
+              menu={
+                <>
+                  {can.update && (
+                    <CollectionSortMenuWithMargin
+                      collection={collection}
+                      onOpen={() => setMenuOpen(true)}
+                      onClose={() => setMenuOpen(false)}
+                    />
+                  )}
+                  <CollectionMenu
+                    collection={collection}
+                    onOpen={() => setMenuOpen(true)}
+                    onClose={() => setMenuOpen(false)}
+                  />
+                </>
+              }
+            />
+          </DropToImport>
+        </Draggable>
+        {expanded && manualSort && (
+          <DropCursor isActiveDrop={isOverReorder} innerRef={dropToReorder} />
+        )}
+        {isDraggingAnyCollection && (
+          <DropCursor
+            isActiveDrop={isCollectionDropping}
+            innerRef={dropToReorderCollection}
+          />
+        )}
       </div>
 
       {expanded &&
-        collection.documents.map((node) => (
+        collection.documents.map((node, index) => (
           <DocumentLink
             key={node.id}
             node={node}
@@ -100,10 +198,24 @@ function CollectionLink({
             prefetchDocument={prefetchDocument}
             canUpdate={canUpdate}
             depth={1.5}
+            index={index}
           />
         ))}
     </>
   );
 }
 
+const Draggable = styled("div")`
+  opacity: ${(props) => (props.$isDragging || props.$isMoving ? 0.5 : 1)};
+  pointer-events: ${(props) => (props.$isMoving ? "none" : "auto")};
+`;
+
+const SidebarLinkWithPadding = styled(SidebarLink)`
+  padding-right: 60px;
+`;
+
+const CollectionSortMenuWithMargin = styled(CollectionSortMenu)`
+  margin-right: 4px;
+`;
+
 export default observer(CollectionLink);

app/components/Sidebar/components/Collections.js

@@ -1,100 +1,107 @@
 // @flow
-import { observer, inject } from "mobx-react";
+import fractionalIndex from "fractional-index";
+import { observer } 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";
-
-import CollectionsStore from "stores/CollectionsStore";
-import DocumentsStore from "stores/DocumentsStore";
-import PoliciesStore from "stores/PoliciesStore";
-import UiStore from "stores/UiStore";
+import { useDrop } from "react-dnd";
+import { useTranslation } from "react-i18next";
 import Fade from "components/Fade";
 import Flex from "components/Flex";
+import useStores from "../../../hooks/useStores";
 import CollectionLink from "./CollectionLink";
 import CollectionsLoading from "./CollectionsLoading";
+import DropCursor from "./DropCursor";
 import Header from "./Header";
 import SidebarLink from "./SidebarLink";
-import { newDocumentUrl } from "utils/routeHelpers";
-
 type Props = {
-  history: RouterHistory,
-  policies: PoliciesStore,
-  collections: CollectionsStore,
-  documents: DocumentsStore,
   onCreateCollection: () => void,
-  ui: UiStore,
-  t: TFunction,
 };
 
-@observer
-class Collections extends React.Component<Props> {
-  isPreloaded: boolean = !!this.props.collections.orderedData.length;
+function Collections({ onCreateCollection }: Props) {
+  const [isFetching, setFetching] = React.useState(false);
+  const { ui, policies, documents, collections } = useStores();
+  const isPreloaded: boolean = !!collections.orderedData.length;
+  const { t } = useTranslation();
+  const orderedCollections = collections.orderedData;
+  const [isDraggingAnyCollection, setIsDraggingAnyCollection] = React.useState(
+    false
+  );
 
-  componentDidMount() {
-    const { collections } = this.props;
-
-    if (!collections.isFetching && !collections.isLoaded) {
-      collections.fetchPage({ limit: 100 });
+  React.useEffect(() => {
+    async function load() {
+      if (!collections.isLoaded && !isFetching) {
+        try {
+          setFetching(true);
+          await collections.fetchPage({ limit: 100 });
+        } finally {
+          setFetching(false);
+        }
+      }
     }
-  }
+    load();
+  }, [collections, isFetching]);
 
-  @keydown("n")
-  goToNewDocument() {
-    if (this.props.ui.editMode) return;
+  const [{ isCollectionDropping }, dropToReorderCollection] = useDrop({
+    accept: "collection",
+    drop: async (item, monitor) => {
+      collections.move(
+        item.id,
+        fractionalIndex(null, orderedCollections[0].index)
+      );
+    },
+    canDrop: (item, monitor) => {
+      return item.id !== orderedCollections[0].id;
+    },
+    collect: (monitor) => ({
+      isCollectionDropping: monitor.isOver(),
+    }),
+  });
 
-    const { activeCollectionId } = this.props.ui;
-    if (!activeCollectionId) return;
-
-    const can = this.props.policies.abilities(activeCollectionId);
-    if (!can.update) return;
-
-    this.props.history.push(newDocumentUrl(activeCollectionId));
-  }
-
-  render() {
-    const { collections, ui, policies, documents, t } = this.props;
-
-    const content = (
-      <>
-        {collections.orderedData.map((collection) => (
-          <CollectionLink
-            key={collection.id}
-            collection={collection}
-            activeDocument={documents.active}
-            prefetchDocument={documents.prefetchDocument}
-            canUpdate={policies.abilities(collection.id).update}
-            ui={ui}
-          />
-        ))}
-        <SidebarLink
-          to="/collections"
-          onClick={this.props.onCreateCollection}
-          icon={<PlusIcon color="currentColor" />}
-          label={`${t("New collection")}…`}
-          exact
+  const content = (
+    <>
+      <DropCursor
+        isActiveDrop={isCollectionDropping}
+        innerRef={dropToReorderCollection}
+        from="collections"
+      />
+      {orderedCollections.map((collection, index) => (
+        <CollectionLink
+          key={collection.id}
+          collection={collection}
+          activeDocument={documents.active}
+          prefetchDocument={documents.prefetchDocument}
+          canUpdate={policies.abilities(collection.id).update}
+          ui={ui}
+          isDraggingAnyCollection={isDraggingAnyCollection}
+          onChangeDragging={setIsDraggingAnyCollection}
+          belowCollection={orderedCollections[index + 1]}
         />
-      </>
-    );
+      ))}
+      <SidebarLink
+        to="/collections"
+        onClick={onCreateCollection}
+        icon={<PlusIcon color="currentColor" />}
+        label={`${t("New collection")}…`}
+        exact
+      />
+    </>
+  );
 
+  if (!collections.isLoaded) {
     return (
       <Flex column>
         <Header>{t("Collections")}</Header>
-        {collections.isLoaded ? (
-          this.isPreloaded ? (
-            content
-          ) : (
-            <Fade>{content}</Fade>
-          )
-        ) : (
-          <CollectionsLoading />
-        )}
+        <CollectionsLoading />
       </Flex>
     );
   }
+
+  return (
+    <Flex column>
+      <Header>{t("Collections")}</Header>
+      {isPreloaded ? content : <Fade>{content}</Fade>}
+    </Flex>
+  );
 }
 
-export default withTranslation()<Collections>(
-  inject("collections", "ui", "documents", "policies")(withRouter(Collections))
-);
+export default observer(Collections);

app/components/Sidebar/components/DocumentLink.js

@@ -7,8 +7,9 @@ import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 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 DropToImport from "./DropToImport";
 import EditableTitle from "./EditableTitle";
 import SidebarLink from "./SidebarLink";
 import useStores from "hooks/useStores";
@@ -20,19 +21,21 @@ type Props = {|
   canUpdate: boolean,
   collection?: Collection,
   activeDocument: ?Document,
-  activeDocumentRef?: (?HTMLElement) => void,
   prefetchDocument: (documentId: string) => Promise<void>,
   depth: number,
+  index: number,
+  parentId?: string,
 |};
 
 function DocumentLink({
   node,
+  canUpdate,
   collection,
   activeDocument,
-  activeDocumentRef,
   prefetchDocument,
   depth,
-  canUpdate,
+  index,
+  parentId,
 }: Props) {
   const { documents, policies } = useStores();
   const { t } = useTranslation();
@@ -76,6 +79,14 @@ function DocumentLink({
     }
   }, [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();
@@ -108,10 +119,12 @@ function DocumentLink({
 
   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 },
+    type: "document",
+    item: () => ({ ...node, depth, active: isActiveDocument }),
     collect: (monitor) => ({
       isDragging: !!monitor.isDragging(),
     }),
@@ -120,77 +133,131 @@ function DocumentLink({
     },
   });
 
-  // Droppable
-  const [{ isOver, canDrop }, drop] = useDrop({
+  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) => {
+    drop: (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);
+            }
+          }, 500);
+        }
+      }
+    },
+
     collect: (monitor) => ({
-      isOver: !!monitor.isOver(),
-      canDrop: monitor.canDrop(),
+      isOverReparent: !!monitor.isOver({ shallow: true }),
+      canDropToReparent: monitor.canDrop(),
+    }),
+  });
+
+  // Drop to reorder
+  const [{ isOverReorder }, dropToReorder] = useDrop({
+    accept: "document",
+    drop: (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 (
     <>
-      <Draggable
-        key={node.id}
-        ref={drag}
-        $isDragging={isDragging}
-        $isMoving={isMoving}
-      >
-        <div ref={drop}>
-          <DropToImport documentId={node.id} activeClassName="activeDropZone">
-            <SidebarLink
-              innerRef={isActiveDocument ? activeDocumentRef : undefined}
-              onMouseEnter={handleMouseEnter}
-              to={{
-                pathname: node.url,
-                state: { title: node.title },
-              }}
-              label={
-                <>
-                  {hasChildDocuments && (
-                    <Disclosure
-                      expanded={expanded && !isDragging}
-                      onClick={handleDisclosureClick}
+      <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}
                     />
-                  )}
-                  <EditableTitle
-                    title={node.title || t("Untitled")}
-                    onSubmit={handleTitleChange}
-                    canUpdate={canUpdate}
-                  />
-                </>
-              }
-              isActiveDrop={isOver && canDrop}
-              depth={depth}
-              exact={false}
-              menuOpen={menuOpen}
-              menu={
-                document && !isMoving ? (
-                  <Fade>
-                    <DocumentMenu
-                      position="right"
-                      document={document}
-                      onOpen={() => setMenuOpen(true)}
-                      onClose={() => setMenuOpen(false)}
-                    />
-                  </Fade>
-                ) : undefined
-              }
-            />
-          </DropToImport>
-        </div>
-      </Draggable>
-
+                  </>
+                }
+                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) => (
+          {node.children.map((childNode, index) => (
             <ObservedDocumentLink
               key={childNode.id}
               collection={collection}
@@ -199,6 +266,8 @@ function DocumentLink({
               prefetchDocument={prefetchDocument}
               depth={depth + 1}
               canUpdate={canUpdate}
+              index={index}
+              parentId={node.id}
             />
           ))}
         </>

app/components/Sidebar/components/DropCursor.js

@@ -0,0 +1,44 @@
+// @flow
+import * as React from "react";
+import styled, { withTheme } from "styled-components";
+import { type Theme } from "types";
+
+function DropCursor({
+  isActiveDrop,
+  innerRef,
+  theme,
+  from,
+}: {
+  isActiveDrop: boolean,
+  innerRef: React.Ref<any>,
+  theme: Theme,
+  from: string,
+}) {
+  return <Cursor isOver={isActiveDrop} ref={innerRef} from={from} />;
+}
+
+// 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;
+  ${(props) => (props.from === "collections" ? "top: 15px;" : "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);

app/components/Sidebar/components/DropToImport.js

@@ -0,0 +1,83 @@
+// @flow
+import { observer } from "mobx-react";
+import * as React from "react";
+import Dropzone from "react-dropzone";
+import { useTranslation } from "react-i18next";
+import styled, { css } from "styled-components";
+import LoadingIndicator from "components/LoadingIndicator";
+import useImportDocument from "hooks/useImportDocument";
+import useStores from "hooks/useStores";
+
+type Props = {|
+  children: React.Node,
+  collectionId: string,
+  documentId?: string,
+  disabled: boolean,
+  staticContext: Object,
+|};
+
+function DropToImport({ disabled, children, collectionId, documentId }: Props) {
+  const { t } = useTranslation();
+  const { ui, documents } = useStores();
+  const { handleFiles, isImporting } = useImportDocument(
+    collectionId,
+    documentId
+  );
+
+  const handleRejection = React.useCallback(() => {
+    ui.showToast(
+      t("Document not supported – try Markdown, Plain text, HTML, or Word"),
+      { type: "error" }
+    );
+  }, [t, ui]);
+
+  if (disabled) {
+    return children;
+  }
+
+  return (
+    <Dropzone
+      accept={documents.importFileTypes.join(", ")}
+      onDropAccepted={handleFiles}
+      onDropRejected={handleRejection}
+      noClick
+      multiple
+    >
+      {({
+        getRootProps,
+        getInputProps,
+        isDragActive,
+        isDragAccept,
+        isDragReject,
+      }) => (
+        <DropzoneContainer
+          {...getRootProps()}
+          {...{ isDragActive }}
+          tabIndex="-1"
+        >
+          <input {...getInputProps()} />
+          {isImporting && <LoadingIndicator />}
+          {children}
+        </DropzoneContainer>
+      )}
+    </Dropzone>
+  );
+}
+
+const DropzoneContainer = styled.div`
+  border-radius: 4px;
+
+  ${({ isDragActive, theme }) =>
+    isDragActive &&
+    css`
+      background: ${theme.slateDark};
+      a {
+        color: ${theme.white} !important;
+      }
+      svg {
+        fill: ${theme.white};
+      }
+    `}
+`;
+
+export default observer(DropToImport);

app/components/Sidebar/components/EditableTitle.js

@@ -52,7 +52,9 @@ function EditableTitle({ title, onSubmit, canUpdate }: Props) {
         setOriginalValue(value);
       } catch (error) {
         setValue(originalValue);
-        ui.showToast(error.message);
+        ui.showToast(error.message, {
+          type: "error",
+        });
         throw error;
       }
     }

app/components/Sidebar/components/NavLink.js

@@ -0,0 +1,105 @@
+// @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;

app/components/Sidebar/components/ResizeBorder.js

@@ -0,0 +1,13 @@
+// @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;

app/components/Sidebar/components/Section.js

@@ -5,7 +5,13 @@ import Flex from "components/Flex";
 const Section = styled(Flex)`
   position: relative;
   flex-direction: column;
-  margin: 24px 8px;
+  margin: 0 8px 20px;
+  min-width: ${(props) => props.theme.sidebarMinWidth}px;
+  flex-shrink: 0;
+
+  &:first-child {
+    margin-top: 20px;
+  }
 `;
 
 export default Section;

app/components/Sidebar/components/SidebarLink.js

@@ -1,7 +1,10 @@
 // @flow
 import * as React from "react";
-import { withRouter, NavLink } from "react-router-dom";
+import { withRouter, type RouterHistory, type Match } 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";
 
 type Props = {
@@ -10,14 +13,17 @@ type Props = {
   innerRef?: (?HTMLElement) => void,
   onClick?: (SyntheticEvent<>) => void,
   onMouseEnter?: (SyntheticEvent<>) => void,
+  className?: string,
   children?: React.Node,
   icon?: React.Node,
   label?: React.Node,
   menu?: React.Node,
-  menuOpen?: boolean,
+  showActions?: boolean,
   iconColor?: string,
   active?: boolean,
   isActiveDrop?: boolean,
+  history: RouterHistory,
+  match: Match,
   theme: Theme,
   exact?: boolean,
   depth?: number,
@@ -33,13 +39,14 @@ function SidebarLink({
   active,
   isActiveDrop,
   menu,
-  menuOpen,
+  showActions,
   theme,
   exact,
   href,
-  innerRef,
   depth,
-  ...rest
+  history,
+  match,
+  className,
 }: Props) {
   const style = React.useMemo(() => {
     return {
@@ -48,16 +55,20 @@ function SidebarLink({
   }, [depth]);
 
   const activeStyle = {
-    color: theme.text,
     fontWeight: 600,
+    color: theme.text,
     background: theme.sidebarItemBackground,
     ...style,
   };
 
+  const activeDropStyle = {
+    fontWeight: 600,
+  };
+
   return (
-    <StyledNavLink
+    <Link
       $isActiveDrop={isActiveDrop}
-      activeStyle={isActiveDrop ? undefined : activeStyle}
+      activeStyle={isActiveDrop ? activeDropStyle : activeStyle}
       style={active ? activeStyle : style}
       onClick={onClick}
       onMouseEnter={onMouseEnter}
@@ -65,12 +76,12 @@ function SidebarLink({
       to={to}
       as={to ? undefined : href ? "a" : "div"}
       href={href}
-      ref={innerRef}
+      className={className}
     >
       {icon && <IconWrapper>{icon}</IconWrapper>}
       <Label>{label}</Label>
-      {menu && <Action menuOpen={menuOpen}>{menu}</Action>}
-    </StyledNavLink>
+      {menu && <Actions showActions={showActions}>{menu}</Actions>}
+    </Link>
   );
 }
 
@@ -79,42 +90,49 @@ const IconWrapper = styled.span`
   margin-left: -4px;
   margin-right: 4px;
   height: 24px;
+  overflow: hidden;
+  flex-shrink: 0;
 `;
 
-const Action = styled.span`
-  display: ${(props) => (props.menuOpen ? "inline" : "none")};
+const Actions = styled(EventBoundary)`
+  display: ${(props) => (props.showActions ? "inline-flex" : "none")};
   position: absolute;
   top: 4px;
   right: 4px;
   color: ${(props) => props.theme.textTertiary};
+  transition: opacity 50ms;
 
   svg {
-    opacity: 0.75;
+    color: ${(props) => props.theme.textSecondary};
+    fill: currentColor;
+    opacity: 0.5;
   }
 
   &:hover {
     svg {
-      opacity: 1;
+      opacity: 0.75;
     }
   }
 `;
 
-const StyledNavLink = styled(NavLink)`
+const Link = styled(NavLink)`
   display: flex;
   position: relative;
-  overflow: hidden;
   text-overflow: ellipsis;
-  padding: 4px 16px;
+  padding: 6px 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};
   font-size: 15px;
   cursor: pointer;
+  overflow: hidden;
 
   svg {
     ${(props) => (props.$isActiveDrop ? `fill: ${props.theme.white};` : "")}
+    transition: fill 50ms;
   }
 
   &:hover {
@@ -127,11 +145,20 @@ const StyledNavLink = styled(NavLink)`
     background: ${(props) => props.theme.black05};
   }
 
-  &:hover {
-    > ${Action} {
-      display: inline;
+  &:hover,
+  &:active {
+    > ${Actions} {
+      display: inline-flex;
+
+      svg {
+        opacity: 0.75;
+      }
     }
   }
+
+  ${breakpoint("tablet")`
+    padding: 4px 16px;
+  `}
 `;
 
 const Label = styled.div`

app/components/Sidebar/components/TeamButton.js

@@ -5,35 +5,36 @@ 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,
-};
+|};
 
-function HeaderBlock({
-  showDisclosure,
-  teamName,
-  subheading,
-  logoUrl,
-  ...rest
-}: Props) {
-  return (
-    <Header justify="flex-start" align="center" {...rest}>
-      <TeamLogo alt={`${teamName} logo`} src={logoUrl} size="38px" />
-      <Flex align="flex-start" column>
-        <TeamName showDisclosure>
-          {teamName}{" "}
-          {showDisclosure && <StyledExpandedIcon color="currentColor" />}
-        </TeamName>
-        <Subheading>{subheading}</Subheading>
-      </Flex>
-    </Header>
-  );
-}
+const TeamButton = 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 && <Disclosure color="currentColor" />}
+          </TeamName>
+          <Subheading>{subheading}</Subheading>
+        </Flex>
+      </Header>
+    </Wrapper>
+  )
+);
 
-const StyledExpandedIcon = styled(ExpandedIcon)`
+const Disclosure = styled(ExpandedIcon)`
   position: absolute;
   right: 0;
   top: 0;
@@ -44,6 +45,7 @@ const Subheading = styled.div`
   font-size: 11px;
   text-transform: uppercase;
   font-weight: 500;
+  white-space: nowrap;
   color: ${(props) => props.theme.sidebarText};
 `;
 
@@ -53,16 +55,20 @@ 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`
+  flex-shrink: 0;
+  overflow: hidden;
+`;
+
 const Header = styled.button`
   display: flex;
   align-items: center;
-  flex-shrink: 0;
   padding: 20px 24px;
-  position: relative;
   background: none;
   line-height: inherit;
   border: 0;
@@ -77,4 +83,4 @@ const Header = styled.button`
   }
 `;
 
-export default HeaderBlock;
+export default TeamButton;

app/components/Sidebar/components/Toggle.js

@@ -0,0 +1,66 @@
+// @flow
+import * as React from "react";
+import styled from "styled-components";
+import breakpoint from "styled-components-breakpoint";
+import Arrow from "components/Arrow";
+
+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}>
+          <Arrow />
+        </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: fixed;
+  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`
+  display: none;
+  z-index: 2;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: -30px;
+  width: 30px;
+
+  &:hover ${ToggleButton}, &:focus-within ${ToggleButton} {
+    opacity: 1;
+  }
+
+  ${breakpoint("tablet")`
+    display: block;
+  `}
+`;
+
+export default Toggle;

app/components/SkipNavContent.js

@@ -0,0 +1,8 @@
+// @flow
+import * as React from "react";
+
+export const id = "skip-nav";
+
+export default function SkipNavContent() {
+  return <div id={id} />;
+}

app/components/SkipNavLink.js

@@ -0,0 +1,34 @@
+// @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;
+  }
+`;

app/components/SocketProvider.js

@@ -110,7 +110,9 @@ class SocketProvider extends React.Component<Props> {
 
     this.socket.on("unauthorized", (err) => {
       this.socket.authenticated = false;
-      ui.showToast(err.message);
+      ui.showToast(err.message, {
+        type: "error",
+      });
       throw err;
     });
 
@@ -270,6 +272,13 @@ class SocketProvider extends React.Component<Props> {
       }
     });
 
+    this.socket.on("collections.update_index", (event) => {
+      const collection = collections.get(event.collectionId);
+      if (collection) {
+        collection.updateIndex(event.index);
+      }
+    });
+
     // received a message from the API server that we should request
     // to join a specific room. Forward that to the ws server.
     this.socket.on("join", (event) => {

app/components/Star.js

@@ -0,0 +1,66 @@
+// @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;

app/components/Subheading.js

@@ -2,19 +2,18 @@
 import * as React from "react";
 import styled from "styled-components";
 
-type Props = {
+type Props = {|
   children: React.Node,
-};
+  sticky?: boolean,
+|};
 
 const H3 = styled.h3`
   border-bottom: 1px solid ${(props) => props.theme.divider};
-  margin-top: 22px;
-  margin-bottom: 12px;
+  margin: 12px 0;
   line-height: 1;
-  position: relative;
 `;
 
-const Underline = styled("span")`
+const Underline = styled.div`
   margin-top: -1px;
   display: inline-block;
   font-weight: 500;
@@ -22,14 +21,29 @@ const Underline = styled("span")`
   line-height: 1.5;
   color: ${(props) => props.theme.textSecondary};
   border-bottom: 3px solid ${(props) => props.theme.textSecondary};
-  padding-bottom: 5px;
+  padding-top: 6px;
+  padding-bottom: 4px;
 `;
 
-const Subheading = ({ children, ...rest }: Props) => {
+// When sticky we need extra background coverage around the sides otherwise
+// items that scroll past can "stick out" the sides of the heading
+const Background = styled.div`
+  position: ${(props) => (props.sticky ? "sticky" : "relative")};
+  ${(props) => (props.sticky ? "top: 54px;" : "")}
+  margin: 0 -8px;
+  padding: 0 8px;
+  background: ${(props) => props.theme.background};
+  transition: ${(props) => props.theme.backgroundTransition};
+  z-index: 1;
+`;
+
+const Subheading = ({ children, sticky, ...rest }: Props) => {
   return (
-    <H3 {...rest}>
-      <Underline>{children}</Underline>
-    </H3>
+    <Background sticky={sticky}>
+      <H3 {...rest}>
+        <Underline>{children}</Underline>
+      </H3>
+    </Background>
   );
 };
 

app/components/Switch.js

@@ -3,24 +3,33 @@ 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, ...props }: Props) {
+function Switch({ width = 38, height = 20, label, disabled, ...props }: Props) {
   const component = (
     <Wrapper width={width} height={height}>
-      <HiddenInput type="checkbox" width={width} height={height} {...props} />
+      <HiddenInput
+        type="checkbox"
+        width={width}
+        height={height}
+        disabled={disabled}
+        {...props}
+      />
       <Slider width={width} height={height} />
     </Wrapper>
   );
 
   if (label) {
     return (
-      <Label htmlFor={props.id}>
+      <Label disabled={disabled} htmlFor={props.id}>
         {component}
         <LabelText>{label}</LabelText>
       </Label>
@@ -33,6 +42,8 @@ function Switch({ width = 38, height = 20, label, ...props }: Props) {
 const Label = styled.label`
   display: flex;
   align-items: center;
+
+  ${(props) => (props.disabled ? `opacity: 0.75;` : "")}
 `;
 
 const Wrapper = styled.label`
@@ -76,6 +87,11 @@ const HiddenInput = styled.input`
   height: 0;
   visibility: hidden;
 
+  &:disabled + ${Slider} {
+    opacity: 0.75;
+    cursor: default;
+  }
+
   &:checked + ${Slider} {
     background-color: ${(props) => props.theme.primary};
   }

app/components/Tab.js

@@ -8,15 +8,15 @@ type Props = {
   theme: Theme,
 };
 
-const StyledNavLink = styled(NavLink)`
+const TabLink = styled(NavLink)`
   position: relative;
-
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
   font-weight: 500;
   font-size: 14px;
   color: ${(props) => props.theme.textTertiary};
   margin-right: 24px;
-  padding-bottom: 8px;
+  padding: 6px 0;
 
   &:hover {
     color: ${(props) => props.theme.textSecondary};
@@ -32,7 +32,7 @@ function Tab({ theme, ...rest }: Props) {
     color: theme.textSecondary,
   };
 
-  return <StyledNavLink {...rest} activeStyle={activeStyle} />;
+  return <TabLink {...rest} activeStyle={activeStyle} />;
 }
 
 export default withTheme(Tab);

app/components/Tabs.js

@@ -1,13 +1,25 @@
 // @flow
+import * as React from "react";
 import styled from "styled-components";
 
-const Tabs = styled.nav`
-  position: relative;
+const Nav = styled.nav`
   border-bottom: 1px solid ${(props) => props.theme.divider};
-  margin-top: 22px;
-  margin-bottom: 12px;
+  margin: 12px 0;
   overflow-y: auto;
   white-space: nowrap;
+  transition: opacity 250ms ease-out;
+`;
+
+// When sticky we need extra background coverage around the sides otherwise
+// items that scroll past can "stick out" the sides of the heading
+const Sticky = styled.div`
+  position: sticky;
+  top: 54px;
+  margin: 0 -8px;
+  padding: 0 8px;
+  background: ${(props) => props.theme.background};
+  transition: ${(props) => props.theme.backgroundTransition};
+  z-index: 1;
 `;
 
 export const Separator = styled.span`
@@ -18,4 +30,12 @@ export const Separator = styled.span`
   margin-top: 6px;
 `;
 
+const Tabs = (props: {}) => {
+  return (
+    <Sticky>
+      <Nav {...props}></Nav>
+    </Sticky>
+  );
+};
+
 export default Tabs;