Bump RME

closes #1916

.env.sample

@@ -1,31 +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
 
-# Must point to the publicly accessible URL for the installation
+# 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
 
-# Optional. If using a Cloudfront distribution or similar the origin server
-# should be set to the same as URL.
-CDN_URL=
+# Third party signin credentials, at least one of EITHER Google OR Slack is
+# required for a working installation or you'll have no sign-in options.
 
-# enforce (auto redirect to) https in production, (optional) default is true.
-# set to false if your SSL is terminated at a loadbalancer, for example
-FORCE_HTTPS=true
-
-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
 
@@ -33,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
+
+
+
+# –––––––––––––––– 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
 GOOGLE_ALLOWED_DOMAINS=
 
-# Third party credentials (optional)
-SLACK_VERIFICATION_TOKEN=PLxk6OlXXXXXVj3YYYY
+# 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
@@ -56,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=
@@ -71,6 +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
 
-# See translate.getoutline.com for a list of available language codes and their
-# percentage translated.
+# The default interface language. See translate.getoutline.com for a list of 
+# available language codes and their rough percentage translated.
 DEFAULT_LANGUAGE=en_US

ARCHITECTURE.md

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

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 src="https://www.getoutline.com/images/screenshot@2x.png" alt="Outline" width="800" />
 </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,33 +31,58 @@ 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 sequelize:migrate`. Production assumes an SSL connection to the database by default, if
+Postgres is on the same machine and is not SSL you can migrate with `yarn sequelize:migrate --env=production-ssl-disabled`, for example:
+
+   `docker run --rm outlinewiki/outline yarn sequelize:migrate`
+1. Start the container:
+
+   `docker run outlinewiki/outline`
 1. Visit http://you_server_ip:3000 and you should be able to see Outline page
 
    > Port number can be changed using the `PORT` environment variable
 
-1. (Optional) You can add an `nginx` 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 sequelize: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)
@@ -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 run 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",
@@ -144,4 +148,4 @@
       "required": false
     }
   }
-}
+}

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/Breadcrumb.js

@@ -20,10 +20,11 @@ import useStores from "hooks/useStores";
 import BreadcrumbMenu from "menus/BreadcrumbMenu";
 import { collectionUrl } from "utils/routeHelpers";
 
-type Props = {
+type Props = {|
   document: Document,
+  children?: React.Node,
   onlyText: boolean,
-};
+|};
 
 function Icon({ document }) {
   const { t } = useTranslation();
@@ -79,10 +80,14 @@ 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 <Wrapper />;
+  }
+
   let collection = collections.get(document.collectionId);
   if (!collection) {
     collection = {
@@ -140,6 +145,7 @@ const Breadcrumb = ({ document, onlyText }: Props) => {
           </Crumb>
         </>
       )}
+      {children}
     </Wrapper>
   );
 };

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/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/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: -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/DocumentListItem.js

@@ -163,8 +163,11 @@ const DocumentLink = styled(Link)`
   padding: 6px 8px;
   border-radius: 8px;
   max-height: 50vh;
-  min-width: 100%;
-  max-width: calc(100vw - 40px);
+  width: calc(100vw - 8px);
+
+  ${breakpoint("tablet")`
+    width: auto;
+  `};
 
   ${Actions} {
     opacity: 0;

app/components/Editor.js

@@ -27,13 +27,16 @@ export type Props = {|
   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,
@@ -177,7 +180,7 @@ const StyledEditor = styled(RichMarkdownEditor)`
   justify-content: start;
 
   > div {
-    transition: ${(props) => props.theme.backgroundTransition};
+    background: transparent;
   }
 
   & * {

app/components/Header.js

@@ -0,0 +1,109 @@
+// @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"
+      justify="space-between"
+      isCompact={isScrolled}
+      shrink={false}
+    >
+      {breadcrumb}
+      {isScrolled ? (
+        <Title
+          align="center"
+          justify={breadcrumb ? "center" : "flex-start"}
+          onClick={handleClickTitle}
+        >
+          <Fade>
+            <Flex align="center">{title}</Flex>
+          </Fade>
+        </Title>
+      ) : (
+        <div />
+      )}
+      {actions && <Actions>{actions}</Actions>}
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled(Flex)`
+  position: sticky;
+  top: 0;
+  right: 0;
+  left: 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);
+
+  @media print {
+    display: none;
+  }
+
+  ${breakpoint("tablet")`
+    padding: ${(props) => (props.isCompact ? "12px" : `24px 24px 0`)};
+  `};
+`;
+
+const Title = styled(Flex)`
+  font-size: 16px;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  cursor: pointer;
+  width: 0;
+
+  ${breakpoint("tablet")`	
+    flex-grow: 1;
+  `};
+
+  @media (display-mode: standalone) {
+    overflow: hidden;
+    flex-grow: 0 !important;
+  }
+`;
+
+const Actions = styled(Flex)`
+  align-self: flex-end;
+  height: 32px;
+`;
+
+export default observer(Header);

app/components/Input.js

@@ -4,6 +4,7 @@ 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";
 
 const RealTextarea = styled.textarea`
@@ -33,6 +34,10 @@ const RealInput = styled.input`
   &::placeholder {
     color: ${(props) => props.theme.placeholder};
   }
+
+  ${breakpoint("mobile", "tablet")`
+    font-size: 16px;
+  `};
 `;
 
 const Wrapper = styled.div`

app/components/Layout.js

@@ -7,7 +7,7 @@ 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 styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import AuthStore from "stores/AuthStore";
 import DocumentsStore from "stores/DocumentsStore";
@@ -24,7 +24,6 @@ import Sidebar from "components/Sidebar";
 import SettingsSidebar from "components/Sidebar/Settings";
 import SkipNavContent from "components/SkipNavContent";
 import SkipNavLink from "components/SkipNavLink";
-import { type Theme } from "types";
 import { meta } from "utils/keyboard";
 import {
   homeUrl,
@@ -40,7 +39,6 @@ type Props = {
   auth: AuthStore,
   ui: UiStore,
   notifications?: React.Node,
-  theme: Theme,
   i18n: Object,
   t: TFunction,
 };
@@ -51,24 +49,12 @@ 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}+.`)
   handleToggleSidebar() {
     this.props.ui.toggleCollapsedSidebar();
@@ -76,7 +62,6 @@ class Layout extends React.Component<Props> {
 
   @keydown("shift+/")
   handleOpenKeyboardShortcuts() {
-    if (this.props.ui.editMode) return;
     this.keyboardShortcutsOpen = true;
   }
 
@@ -86,7 +71,6 @@ class Layout extends React.Component<Props> {
 
   @keydown(["t", "/", `${meta}+k`])
   goToSearch(ev: SyntheticEvent<>) {
-    if (this.props.ui.editMode) return;
     ev.preventDefault();
     ev.stopPropagation();
     this.redirectTo = searchUrl();
@@ -94,7 +78,6 @@ class Layout extends React.Component<Props> {
 
   @keydown("d")
   goToDashboard() {
-    if (this.props.ui.editMode) return;
     this.redirectTo = homeUrl();
   }
 
@@ -102,7 +85,7 @@ class Layout extends React.Component<Props> {
     const { auth, t, ui } = this.props;
     const { user, team } = auth;
     const showSidebar = auth.authenticated && user && team;
-    const sidebarCollapsed = ui.editMode || ui.sidebarCollapsed;
+    const sidebarCollapsed = ui.isEditing || ui.sidebarCollapsed;
 
     if (auth.isSuspended) return <ErrorSuspended />;
     if (this.redirectTo) return <Redirect to={this.redirectTo} push />;
@@ -215,5 +198,5 @@ const Content = styled(Flex)`
 `;
 
 export default withTranslation()<Layout>(
-  inject("auth", "ui", "documents")(withTheme(Layout))
+  inject("auth", "ui", "documents")(Layout)
 );

app/components/LocaleTime.js

@@ -14,6 +14,7 @@ const locales = {
   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 = [];

app/components/Modal.js

@@ -3,6 +3,7 @@ import { observer } from "mobx-react";
 import { CloseIcon, BackIcon } from "outline-icons";
 import { transparentize } from "polished";
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 import ReactModal from "react-modal";
 import styled, { createGlobalStyle } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
@@ -65,6 +66,7 @@ const Modal = ({
   onRequestClose,
   ...rest
 }: Props) => {
+  const { t } = useTranslation();
   if (!isOpen) return null;
 
   return (
@@ -84,7 +86,7 @@ const Modal = ({
         </Content>
         <Back onClick={onRequestClose}>
           <BackIcon size={32} color="currentColor" />
-          <Text>Back</Text>
+          <Text>{t("Back")}</Text>
         </Back>
         <Close onClick={onRequestClose}>
           <CloseIcon size={32} color="currentColor" />

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/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/Scene.js

@@ -0,0 +1,50 @@
+// @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,
+|};
+
+function Scene({
+  title,
+  icon,
+  textTitle,
+  actions,
+  breadcrumb,
+  children,
+}: Props) {
+  return (
+    <FillWidth>
+      <PageTitle title={textTitle || title} />
+      <Header
+        title={
+          icon ? (
+            <>
+              {icon}&nbsp;{title}
+            </>
+          ) : (
+            title
+          )
+        }
+        actions={actions}
+        breadcrumb={breadcrumb}
+      />
+      <CenteredContent withStickyHeader>{children}</CenteredContent>
+    </FillWidth>
+  );
+}
+
+const FillWidth = styled.div`
+  width: 100%;
+`;
+
+export default Scene;

app/components/Sidebar/Main.js

@@ -16,15 +16,15 @@ import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 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";
 
@@ -72,7 +72,7 @@ function MainSidebar() {
     <Sidebar>
       <AccountMenu>
         {(props) => (
-          <HeaderBlock
+          <TeamButton
             {...props}
             subheading={user.name}
             teamName={team.name}
@@ -118,9 +118,7 @@ function MainSidebar() {
               label={
                 <Drafts align="center">
                   {t("Drafts")}
-                  {documents.totalDrafts > 0 && (
-                    <Bubble count={documents.totalDrafts} />
-                  )}
+                  <Bubble count={documents.totalDrafts} />
                 </Drafts>
               }
               active={
@@ -173,13 +171,15 @@ function MainSidebar() {
           </Section>
         </Secondary>
       </Flex>
-      <Modal
-        title={t("Invite people")}
-        onRequestClose={handleInviteModalClose}
-        isOpen={inviteModalOpen}
-      >
-        <Invite onSubmit={handleInviteModalClose} />
-      </Modal>
+      {can.invite && (
+        <Modal
+          title={t("Invite people")}
+          onRequestClose={handleInviteModalClose}
+          isOpen={inviteModalOpen}
+        >
+          <Invite onSubmit={handleInviteModalClose} />
+        </Modal>
+      )}
       <Modal
         title={t("Create a collection")}
         onRequestClose={handleCreateCollectionModalClose}

app/components/Sidebar/Settings.js

@@ -21,9 +21,9 @@ 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";
@@ -46,7 +46,7 @@ function SettingsSidebar() {
 
   return (
     <Sidebar>
-      <HeaderBlock
+      <TeamButton
         subheading={
           <ReturnToApp align="center">
             <BackIcon color="currentColor" /> {t("Return to App")}
@@ -112,9 +112,9 @@ function SettingsSidebar() {
             />
             {can.export && (
               <SidebarLink
-                to="/settings/export"
+                to="/settings/import-export"
                 icon={<DocumentIcon color="currentColor" />}
-                label={t("Export Data")}
+                label={`${t("Import")} / ${t("Export")}`}
               />
             )}
           </Section>

app/components/Sidebar/Sidebar.js

@@ -3,29 +3,37 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Portal } from "react-portal";
-import { withRouter } from "react-router-dom";
-import type { Location } from "react-router-dom";
+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 as CollapseButton,
-} from "./components/CollapseToggle";
 import ResizeBorder from "./components/ResizeBorder";
-import ResizeHandle from "./components/ResizeHandle";
+import Toggle, { ToggleButton, Positioner } from "./components/Toggle";
 import usePrevious from "hooks/usePrevious";
 import useStores from "hooks/useStores";
 
 let firstRender = true;
-let BOUNCE_ANIMATION_MS = 250;
+let ANIMATION_MS = 250;
 
 type Props = {
   children: React.Node,
-  location: Location,
 };
 
-const useResize = ({ width, minWidth, maxWidth, setWidth }) => {
+function Sidebar({ children }: Props) {
+  const [isCollapsing, setCollapsing] = React.useState(false);
+  const theme = useTheme();
+  const { t } = useTranslation();
+  const { ui } = useStores();
+  const location = useLocation();
+  const previousLocation = usePrevious(location);
+
+  const width = ui.sidebarWidth;
+  const collapsed = ui.isEditing || ui.sidebarCollapsed;
+  const maxWidth = theme.sidebarMaxWidth;
+  const minWidth = theme.sidebarMinWidth + 16; // padding
+  const setWidth = ui.setSidebarWidth;
+
   const [offset, setOffset] = React.useState(0);
   const [isAnimating, setAnimating] = React.useState(false);
   const [isResizing, setResizing] = React.useState(false);
@@ -38,24 +46,45 @@ const useResize = ({ width, minWidth, maxWidth, setWidth }) => {
 
       // this is simple because the sidebar is always against the left edge
       const width = Math.min(event.pageX - offset, maxWidth);
-      setWidth(width);
+      const isSmallerThanCollapsePoint = width < minWidth / 2;
+
+      if (isSmallerThanCollapsePoint) {
+        setWidth(theme.sidebarCollapsedWidth);
+      } else {
+        setWidth(width);
+      }
     },
-    [offset, maxWidth, setWidth]
+    [theme, offset, minWidth, maxWidth, setWidth]
   );
 
-  const handleStopDrag = React.useCallback(() => {
-    setResizing(false);
+  const handleStopDrag = React.useCallback(
+    (event: MouseEvent) => {
+      setResizing(false);
 
-    if (isSmallerThanMinimum) {
-      setWidth(minWidth);
-      setAnimating(true);
-    } else {
-      setWidth(width);
-    }
-  }, [isSmallerThanMinimum, minWidth, width, setWidth]);
+      if (document.activeElement) {
+        document.activeElement.blur();
+      }
 
-  const handleStartDrag = React.useCallback(
-    (event) => {
+      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);
@@ -65,10 +94,19 @@ const useResize = ({ width, minWidth, maxWidth, setWidth }) => {
 
   React.useEffect(() => {
     if (isAnimating) {
-      setTimeout(() => setAnimating(false), BOUNCE_ANIMATION_MS);
+      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);
@@ -81,32 +119,6 @@ const useResize = ({ width, minWidth, maxWidth, setWidth }) => {
     };
   }, [isResizing, handleDrag, handleStopDrag]);
 
-  return { isAnimating, isSmallerThanMinimum, isResizing, handleStartDrag };
-};
-
-function Sidebar({ location, children }: Props) {
-  const theme = useTheme();
-  const { t } = useTranslation();
-  const { ui } = useStores();
-  const previousLocation = usePrevious(location);
-
-  const width = ui.sidebarWidth;
-  const maxWidth = theme.sidebarMaxWidth;
-  const minWidth = theme.sidebarMinWidth + 16; // padding
-  const collapsed = ui.editMode || ui.sidebarCollapsed;
-
-  const {
-    isAnimating,
-    isSmallerThanMinimum,
-    isResizing,
-    handleStartDrag,
-  } = useResize({
-    width,
-    minWidth,
-    maxWidth,
-    setWidth: ui.setSidebarWidth,
-  });
-
   const handleReset = React.useCallback(() => {
     ui.setSidebarWidth(theme.sidebarWidth);
   }, [ui, theme.sidebarWidth]);
@@ -124,49 +136,60 @@ function Sidebar({ location, children }: Props) {
   const style = React.useMemo(
     () => ({
       width: `${width}px`,
-      left:
-        collapsed && !ui.mobileSidebarVisible
-          ? `${-width + theme.sidebarCollapsedWidth}px`
-          : 0,
     }),
-    [width, collapsed, theme.sidebarCollapsedWidth, ui.mobileSidebarVisible]
+    [width]
+  );
+
+  const toggleStyle = React.useMemo(
+    () => ({
+      right: "auto",
+      marginLeft: `${collapsed ? theme.sidebarCollapsedWidth : width}px`,
+    }),
+    [width, theme.sidebarCollapsedWidth, collapsed]
   );
 
   const content = (
-    <Container
-      style={style}
-      $sidebarWidth={ui.sidebarWidth}
-      $isAnimating={isAnimating}
-      $isSmallerThanMinimum={isSmallerThanMinimum}
-      $mobileSidebarVisible={ui.mobileSidebarVisible}
-      $collapsed={collapsed}
-      column
-    >
-      {!isResizing && (
-        <CollapseToggle
-          collapsed={ui.sidebarCollapsed}
+    <>
+      <Container
+        style={style}
+        $sidebarWidth={ui.sidebarWidth}
+        $isCollapsing={isCollapsing}
+        $isAnimating={isAnimating}
+        $isSmallerThanMinimum={isSmallerThanMinimum}
+        $mobileSidebarVisible={ui.mobileSidebarVisible}
+        $collapsed={collapsed}
+        column
+      >
+        {ui.mobileSidebarVisible && (
+          <Portal>
+            <Fade>
+              <Background onClick={ui.toggleMobileSidebar} />
+            </Fade>
+          </Portal>
+        )}
+        {children}
+        <ResizeBorder
+          onMouseDown={handleMouseDown}
+          onDoubleClick={ui.sidebarCollapsed ? undefined : handleReset}
+          $isResizing={isResizing}
+        />
+        {ui.sidebarCollapsed && !ui.isEditing && (
+          <Toggle
+            onClick={ui.toggleCollapsedSidebar}
+            direction={"right"}
+            aria-label={t("Expand")}
+          />
+        )}
+      </Container>
+      {!ui.isEditing && (
+        <Toggle
+          style={toggleStyle}
           onClick={ui.toggleCollapsedSidebar}
+          direction={ui.sidebarCollapsed ? "right" : "left"}
+          aria-label={ui.sidebarCollapsed ? t("Expand") : t("Collapse")}
         />
       )}
-      {ui.mobileSidebarVisible && (
-        <Portal>
-          <Fade>
-            <Background onClick={ui.toggleMobileSidebar} />
-          </Fade>
-        </Portal>
-      )}
-
-      {children}
-      {!ui.sidebarCollapsed && (
-        <ResizeBorder
-          onMouseDown={handleStartDrag}
-          onDoubleClick={handleReset}
-          $isResizing={isResizing}
-        >
-          <ResizeHandle aria-label={t("Resize sidebar")} />
-        </ResizeBorder>
-      )}
-    </Container>
+    </>
   );
 
   // Fade in the sidebar on first render after page load
@@ -195,29 +218,36 @@ const Container = styled(Flex)`
   bottom: 0;
   width: 100%;
   background: ${(props) => props.theme.sidebarBackground};
-  transition: box-shadow, 100ms, ease-in-out, margin-left 100ms ease-out,
-    left 100ms ease-out,
+  transition: box-shadow 100ms ease-in-out, transform 100ms ease-out,
     ${(props) => props.theme.backgroundTransition}
       ${(props) =>
-        props.$isAnimating ? `,width ${BOUNCE_ANIMATION_MS}ms ease-out` : ""};
-  margin-left: ${(props) => (props.$mobileSidebarVisible ? 0 : "-100%")};
+        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;
+    transform: none;
   }
 
   ${breakpoint("tablet")`
     margin: 0;
     z-index: 3;
     min-width: 0;
+    transform: translateX(${(props) =>
+      props.$collapsed ? "calc(-100% + 16px)" : 0});
 
     &:hover,
     &:focus-within {
-      left: 0 !important;
+      transform: none;
       box-shadow: ${(props) =>
         props.$collapsed
           ? "rgba(0, 0, 0, 0.2) 1px 0 4px"
@@ -225,11 +255,11 @@ const Container = styled(Flex)`
           ? "rgba(0, 0, 0, 0.1) inset -1px 0 2px"
           : "none"};
 
-      & ${CollapseButton} {
-        opacity: .75;
+      ${Positioner} {
+        display: block;
       }
 
-      & ${CollapseButton}:hover {
+      ${ToggleButton} {
         opacity: 1;
       }
     }
@@ -241,4 +271,4 @@ const Container = styled(Flex)`
   `};
 `;
 
-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?: (event: SyntheticEvent<>) => 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} tabIndex="-1" 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: transparent;
-  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/Collections.js

@@ -42,8 +42,6 @@ class Collections extends React.Component<Props> {
 
   @keydown("n")
   goToNewDocument() {
-    if (this.props.ui.editMode) return;
-
     const { activeCollectionId } = this.props.ui;
     if (!activeCollectionId) return;
 

app/components/Sidebar/components/ResizeBorder.js

@@ -1,6 +1,5 @@
 // @flow
 import styled from "styled-components";
-import ResizeHandle from "./ResizeHandle";
 
 const ResizeBorder = styled.div`
   position: absolute;
@@ -9,20 +8,6 @@ const ResizeBorder = styled.div`
   right: -6px;
   width: 12px;
   cursor: ew-resize;
-
-  ${(props) =>
-    props.$isResizing &&
-    `
-  ${ResizeHandle} {
-    opacity: 1;
-  }
-  `}
-
-  &:hover {
-    ${ResizeHandle} {
-      opacity: 1;
-    }
-  }
 `;
 
 export default ResizeBorder;

app/components/Sidebar/components/ResizeHandle.js

@@ -1,39 +0,0 @@
-// @flow
-import styled from "styled-components";
-import breakpoint from "styled-components-breakpoint";
-
-const ResizeHandle = styled.button`
-  opacity: 0;
-  transition: opacity 100ms ease-in-out;
-  transform: translateY(-50%);
-  position: absolute;
-  top: 50%;
-  height: 40px;
-  right: -10px;
-  width: 8px;
-  padding: 0;
-  border: 0;
-  background: ${(props) => props.theme.sidebarBackground};
-  border-radius: 8px;
-  pointer-events: none;
-
-  &:after {
-    content: "";
-    position: absolute;
-    top: -24px;
-    bottom: -24px;
-    left: -12px;
-    right: -12px;
-  }
-
-  &:active {
-    background: ${(props) => props.theme.sidebarText};
-  }
-
-  ${breakpoint("tablet")`
-    pointer-events: all;
-    cursor: ew-resize;
-  `}
-`;
-
-export default ResizeHandle;

app/components/Sidebar/components/TeamButton.js

@@ -13,7 +13,7 @@ type Props = {|
   logoUrl: string,
 |};
 
-const HeaderBlock = React.forwardRef<Props, any>(
+const TeamButton = React.forwardRef<Props, any>(
   ({ showDisclosure, teamName, subheading, logoUrl, ...rest }: Props, ref) => (
     <Wrapper>
       <Header justify="flex-start" align="center" ref={ref} {...rest}>
@@ -25,8 +25,7 @@ const HeaderBlock = React.forwardRef<Props, any>(
         />
         <Flex align="flex-start" column>
           <TeamName showDisclosure>
-            {teamName}{" "}
-            {showDisclosure && <StyledExpandedIcon color="currentColor" />}
+            {teamName} {showDisclosure && <Disclosure color="currentColor" />}
           </TeamName>
           <Subheading>{subheading}</Subheading>
         </Flex>
@@ -35,7 +34,7 @@ const HeaderBlock = React.forwardRef<Props, any>(
   )
 );
 
-const StyledExpandedIcon = styled(ExpandedIcon)`
+const Disclosure = styled(ExpandedIcon)`
   position: absolute;
   right: 0;
   top: 0;
@@ -84,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: absolute;
+  top: 50vh;
+  padding: 8px;
+  border: 0;
+  pointer-events: none;
+  color: ${(props) => props.theme.divider};
+
+  &:active {
+    color: ${(props) => props.theme.sidebarText};
+  }
+
+  ${breakpoint("tablet")`
+    pointer-events: all;
+    cursor: pointer;
+  `}
+`;
+
+export const Positioner = styled.div`
+  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/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

@@ -13,17 +13,23 @@ type Props = {|
   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>
@@ -36,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`
@@ -79,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;

app/components/Toasts.js

@@ -2,7 +2,7 @@
 import { observer } from "mobx-react";
 import * as React from "react";
 import styled from "styled-components";
-import Toast from "./components/Toast";
+import Toast from "components/Toast";
 import useStores from "hooks/useStores";
 
 function Toasts() {

app/components/Toasts/index.js

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

app/embeds/Cawemo.js

@@ -0,0 +1,31 @@
+// @flow
+import * as React from "react";
+import Frame from "./components/Frame";
+
+const URL_REGEX = new RegExp("https?://cawemo.com/(?:share|embed)/(.*)$");
+
+type Props = {|
+  attrs: {|
+    href: string,
+    matches: string[],
+  |},
+|};
+
+export default class Cawemo extends React.Component<Props> {
+  static ENABLED = [URL_REGEX];
+
+  render() {
+    const { matches } = this.props.attrs;
+    const shareId = matches[1];
+
+    return (
+      <Frame
+        {...this.props}
+        src={`https://cawemo.com/embed/${shareId}`}
+        title={"Cawemo Embed"}
+        border
+        allowfullscreen
+      />
+    );
+  }
+}

app/embeds/Cawemo.test.js

@@ -0,0 +1,22 @@
+/* eslint-disable flowtype/require-valid-file-annotation */
+import Cawemo from "./Cawemo";
+
+describe("Cawemo", () => {
+  const match = Cawemo.ENABLED[0];
+  test("to be enabled on embed link", () => {
+    expect(
+      "https://cawemo.com/embed/a82e9f22-e283-4253-8d11".match(match)
+    ).toBeTruthy();
+  });
+
+  test("to be enabled on share link", () => {
+    expect(
+      "https://cawemo.com/embed/a82e9f22-e283-4253-8d11".match(match)
+    ).toBeTruthy();
+  });
+
+  test("to not be enabled elsewhere", () => {
+    expect("https://cawemo.com/".match(match)).toBe(null);
+    expect("https://cawemo.com/diagrams".match(match)).toBe(null);
+  });
+});

app/embeds/index.js

@@ -4,6 +4,7 @@ import styled from "styled-components";
 import Image from "components/Image";
 import Abstract from "./Abstract";
 import Airtable from "./Airtable";
+import Cawemo from "./Cawemo";
 import ClickUp from "./ClickUp";
 import Codepen from "./Codepen";
 import Figma from "./Figma";
@@ -61,6 +62,13 @@ export default [
     component: Airtable,
     matcher: matcher(Airtable),
   },
+  {
+    title: "Cawemo",
+    keywords: "bpmn process",
+    icon: () => <Img src="/images/cawemo.png" />,
+    component: Cawemo,
+    matcher: matcher(Cawemo),
+  },
   {
     title: "ClickUp",
     keywords: "project",

app/hooks/useDebouncedCallback.js

@@ -0,0 +1,31 @@
+// @flow
+import * as React from "react";
+
+export default function useDebouncedCallback(
+  callback: (any) => mixed,
+  wait: number
+) {
+  // track args & timeout handle between calls
+  const argsRef = React.useRef();
+  const timeout = React.useRef();
+
+  function cleanup() {
+    if (timeout.current) {
+      clearTimeout(timeout.current);
+    }
+  }
+
+  // make sure our timeout gets cleared if consuming component gets unmounted
+  React.useEffect(() => cleanup, []);
+
+  return function (...args: any) {
+    argsRef.current = args;
+    cleanup();
+
+    timeout.current = setTimeout(() => {
+      if (argsRef.current) {
+        callback(...argsRef.current);
+      }
+    }, wait);
+  };
+}

app/index.js

@@ -10,6 +10,7 @@ import { Router } from "react-router-dom";
 import { initI18n } from "shared/i18n";
 import stores from "stores";
 import ErrorBoundary from "components/ErrorBoundary";
+import PageTheme from "components/PageTheme";
 import ScrollToTop from "components/ScrollToTop";
 import Theme from "components/Theme";
 import Toasts from "components/Toasts";
@@ -19,13 +20,28 @@ import { initSentry } from "utils/sentry";
 
 initI18n();
 
-const element = document.getElementById("root");
+const element = window.document.getElementById("root");
 const history = createBrowserHistory();
 
 if (env.SENTRY_DSN) {
   initSentry(history);
 }
 
+if ("serviceWorker" in window.navigator) {
+  window.addEventListener("load", () => {
+    window.navigator.serviceWorker
+      .register("/static/service-worker.js", {
+        scope: "/",
+      })
+      .then((registration) => {
+        console.log("SW registered: ", registration);
+      })
+      .catch((registrationError) => {
+        console.log("SW registration failed: ", registrationError);
+      });
+  });
+}
+
 if (element) {
   render(
     <Provider {...stores}>
@@ -34,6 +50,7 @@ if (element) {
           <DndProvider backend={HTML5Backend}>
             <Router history={history}>
               <>
+                <PageTheme />
                 <ScrollToTop>
                   <Routes />
                 </ScrollToTop>

app/menus/CollectionMenu.js

@@ -64,6 +64,10 @@ function CollectionMenu({
     [history, collection.id]
   );
 
+  const stopPropagation = React.useCallback((ev: SyntheticEvent<>) => {
+    ev.stopPropagation();
+  }, []);
+
   const handleImportDocument = React.useCallback(
     (ev: SyntheticEvent<>) => {
       ev.preventDefault();
@@ -83,20 +87,19 @@ function CollectionMenu({
 
       try {
         const file = files[0];
-        const document = await documents.import(
-          file,
-          null,
-          this.props.collection.id,
-          { publish: true }
-        );
+        const document = await documents.import(file, null, collection.id, {
+          publish: true,
+        });
         history.push(document.url);
       } catch (err) {
         ui.showToast(err.message, {
           type: "error",
         });
+
+        throw err;
       }
     },
-    [history, ui, documents]
+    [history, ui, collection.id, documents]
   );
 
   const can = policies.abilities(collection.id);
@@ -108,7 +111,7 @@ function CollectionMenu({
           type="file"
           ref={file}
           onChange={handleFilePicked}
-          onClick={(ev) => ev.stopPropagation()}
+          onClick={stopPropagation}
           accept={documents.importFileTypes.join(", ")}
           tabIndex="-1"
         />
@@ -146,7 +149,7 @@ function CollectionMenu({
               onClick: () => setShowCollectionEdit(true),
             },
             {
-              title: `${t("Permissions")}…`,
+              title: `${t("Members")}…`,
               visible: can.update,
               onClick: () => setShowCollectionMembers(true),
             },
@@ -172,7 +175,7 @@ function CollectionMenu({
       {renderModals && (
         <>
           <Modal
-            title={t("Collection permissions")}
+            title={t("Collection members")}
             onRequestClose={() => setShowCollectionMembers(false)}
             isOpen={showCollectionMembers}
           >

app/menus/DocumentMenu.js

@@ -15,6 +15,7 @@ import OverflowMenuButton from "components/ContextMenu/OverflowMenuButton";
 import Template from "components/ContextMenu/Template";
 import Flex from "components/Flex";
 import Modal from "components/Modal";
+import useCurrentTeam from "hooks/useCurrentTeam";
 import useStores from "hooks/useStores";
 import {
   documentHistoryUrl,
@@ -49,7 +50,8 @@ function DocumentMenu({
   onOpen,
   onClose,
 }: Props) {
-  const { policies, collections, auth, ui } = useStores();
+  const team = useCurrentTeam();
+  const { policies, collections, ui } = useStores();
   const menu = useMenuState({ modal });
   const history = useHistory();
   const { t } = useTranslation();
@@ -130,10 +132,10 @@ function DocumentMenu({
     [document]
   );
 
-  const can = policies.abilities(document.id);
-  const canShareDocuments = !!(can.share && auth.team && auth.team.sharing);
-  const canViewHistory = can.read && !can.restore;
   const collection = collections.get(document.collectionId);
+  const can = policies.abilities(document.id);
+  const canShareDocuments = !!(can.share && team.sharing);
+  const canViewHistory = can.read && !can.restore;
 
   return (
     <>

app/models/Collection.js

@@ -16,6 +16,7 @@ export default class Collection extends BaseModel {
   icon: string;
   color: string;
   private: boolean;
+  sharing: boolean;
   documents: NavigationNode[];
   createdAt: ?string;
   updatedAt: ?string;
@@ -112,6 +113,7 @@ export default class Collection extends BaseModel {
       "name",
       "color",
       "description",
+      "sharing",
       "icon",
       "private",
       "sort",

app/routes/authenticated.js

@@ -3,11 +3,11 @@ import * as React from "react";
 import { Switch, Redirect, type Match } from "react-router-dom";
 import Archive from "scenes/Archive";
 import Collection from "scenes/Collection";
-import Dashboard from "scenes/Dashboard";
 import KeyedDocument from "scenes/Document/KeyedDocument";
 import DocumentNew from "scenes/DocumentNew";
 import Drafts from "scenes/Drafts";
 import Error404 from "scenes/Error404";
+import Home from "scenes/Home";
 import Search from "scenes/Search";
 import Starred from "scenes/Starred";
 import Templates from "scenes/Templates";
@@ -37,8 +37,8 @@ export default function AuthenticatedRoutes() {
       <Layout>
         <Switch>
           <Redirect from="/dashboard" to="/home" />
-          <Route path="/home/:tab" component={Dashboard} />
-          <Route path="/home" component={Dashboard} />
+          <Route path="/home/:tab" component={Home} />
+          <Route path="/home" component={Home} />
           <Route exact path="/starred" component={Starred} />
           <Route exact path="/starred/:sort" component={Starred} />
           <Route exact path="/templates" component={Templates} />

app/routes/settings.js

@@ -3,8 +3,8 @@ import * as React from "react";
 import { Switch } from "react-router-dom";
 import Settings from "scenes/Settings";
 import Details from "scenes/Settings/Details";
-import Export from "scenes/Settings/Export";
 import Groups from "scenes/Settings/Groups";
+import ImportExport from "scenes/Settings/ImportExport";
 import Notifications from "scenes/Settings/Notifications";
 import People from "scenes/Settings/People";
 import Security from "scenes/Settings/Security";
@@ -28,7 +28,7 @@ export default function SettingsRoutes() {
       <Route exact path="/settings/notifications" component={Notifications} />
       <Route exact path="/settings/integrations/slack" component={Slack} />
       <Route exact path="/settings/integrations/zapier" component={Zapier} />
-      <Route exact path="/settings/export" component={Export} />
+      <Route exact path="/settings/import-export" component={ImportExport} />
     </Switch>
   );
 }

app/scenes/Archive.js

@@ -20,13 +20,13 @@ function Archive(props: Props) {
   const { documents } = props;
 
   return (
-    <CenteredContent column auto>
+    <CenteredContent>
       <PageTitle title={t("Archive")} />
       <Heading>{t("Archive")}</Heading>
       <PaginatedDocumentList
         documents={documents.archived}
         fetch={documents.fetchArchived}
-        heading={<Subheading>{t("Documents")}</Subheading>}
+        heading={<Subheading sticky>{t("Documents")}</Subheading>}
         empty={
           <Empty>{t("The document archive is empty at the moment.")}</Empty>
         }

app/scenes/Collection.js

@@ -1,28 +1,26 @@
 // @flow
 import { observable } from "mobx";
 import { observer, inject } from "mobx-react";
-
 import { NewDocumentIcon, PlusIcon, PinIcon, MoreIcon } from "outline-icons";
 import * as React from "react";
 import { withTranslation, Trans, type TFunction } from "react-i18next";
 import { Redirect, Link, Switch, Route, type Match } from "react-router-dom";
-import styled, { withTheme } from "styled-components";
+import styled from "styled-components";
 
 import CollectionsStore from "stores/CollectionsStore";
 import DocumentsStore from "stores/DocumentsStore";
 import PoliciesStore from "stores/PoliciesStore";
 import UiStore from "stores/UiStore";
 import Collection from "models/Collection";
-
 import CollectionEdit from "scenes/CollectionEdit";
 import CollectionMembers from "scenes/CollectionMembers";
 import Search from "scenes/Search";
-import Actions, { Action, Separator } from "components/Actions";
+import { Action, Separator } from "components/Actions";
 import Button from "components/Button";
 import CenteredContent from "components/CenteredContent";
+import CollectionDescription from "components/CollectionDescription";
 import CollectionIcon from "components/CollectionIcon";
 import DocumentList from "components/DocumentList";
-import Editor from "components/Editor";
 import Flex from "components/Flex";
 import Heading from "components/Heading";
 import HelpText from "components/HelpText";
@@ -30,14 +28,13 @@ import InputSearch from "components/InputSearch";
 import { ListPlaceholder } from "components/LoadingPlaceholder";
 import Mask from "components/Mask";
 import Modal from "components/Modal";
-import PageTitle from "components/PageTitle";
 import PaginatedDocumentList from "components/PaginatedDocumentList";
+import Scene from "components/Scene";
 import Subheading from "components/Subheading";
 import Tab from "components/Tab";
 import Tabs from "components/Tabs";
 import Tooltip from "components/Tooltip";
 import CollectionMenu from "menus/CollectionMenu";
-import { type Theme } from "types";
 import { AuthorizationError } from "utils/errors";
 import { newDocumentUrl, collectionUrl } from "utils/routeHelpers";
 
@@ -47,7 +44,6 @@ type Props = {
   collections: CollectionsStore,
   policies: PoliciesStore,
   match: Match,
-  theme: Theme,
   t: TFunction,
 };
 
@@ -57,7 +53,6 @@ class CollectionScene extends React.Component<Props> {
   @observable isFetching: boolean = true;
   @observable permissionsModalOpen: boolean = false;
   @observable editModalOpen: boolean = false;
-  @observable redirectTo: ?string;
 
   componentDidMount() {
     const { id } = this.props.match.params;
@@ -108,14 +103,6 @@ class CollectionScene extends React.Component<Props> {
     }
   };
 
-  onNewDocument = (ev: SyntheticEvent<>) => {
-    ev.preventDefault();
-
-    if (this.collection) {
-      this.redirectTo = newDocumentUrl(this.collection.id);
-    }
-  };
-
   onPermissions = (ev: SyntheticEvent<>) => {
     ev.preventDefault();
     this.permissionsModalOpen = true;
@@ -138,7 +125,7 @@ class CollectionScene extends React.Component<Props> {
     const can = policies.abilities(match.params.id || "");
 
     return (
-      <Actions align="center" justify="flex-end">
+      <>
         {can.update && (
           <>
             <Action>
@@ -157,7 +144,12 @@ class CollectionScene extends React.Component<Props> {
                 delay={500}
                 placement="bottom"
               >
-                <Button onClick={this.onNewDocument} icon={<PlusIcon />}>
+                <Button
+                  as={Link}
+                  to={this.collection ? newDocumentUrl(this.collection.id) : ""}
+                  disabled={!this.collection}
+                  icon={<PlusIcon />}
+                >
                   {t("New doc")}
                 </Button>
               </Tooltip>
@@ -181,14 +173,13 @@ class CollectionScene extends React.Component<Props> {
             )}
           />
         </Action>
-      </Actions>
+      </>
     );
   }
 
   render() {
-    const { documents, theme, t } = this.props;
+    const { documents, t } = this.props;
 
-    if (this.redirectTo) return <Redirect to={this.redirectTo} push />;
     if (!this.isFetching && !this.collection) return <Search notFound />;
 
     const pinnedDocuments = this.collection
@@ -197,181 +188,171 @@ class CollectionScene extends React.Component<Props> {
     const collection = this.collection;
     const collectionName = collection ? collection.name : "";
     const hasPinnedDocuments = !!pinnedDocuments.length;
-    const hasDescription = collection ? collection.hasDescription : false;
 
-    return (
-      <CenteredContent>
-        {collection ? (
+    return collection ? (
+      <Scene
+        textTitle={collection.name}
+        title={
           <>
-            <PageTitle title={collection.name} />
-            {collection.isEmpty ? (
-              <Centered column>
-                <HelpText>
-                  <Trans
-                    defaults="<em>{{ collectionName }}</em> doesn’t contain any
-                    documents yet."
-                    values={{ collectionName }}
-                    components={{ em: <strong /> }}
-                  />
-                  <br />
-                  <Trans>Get started by creating a new one!</Trans>
-                </HelpText>
-                <Wrapper>
-                  <Link to={newDocumentUrl(collection.id)}>
-                    <Button icon={<NewDocumentIcon color={theme.buttonText} />}>
-                      {t("Create a document")}
-                    </Button>
-                  </Link>
-                  &nbsp;&nbsp;
-                  {collection.private && (
-                    <Button onClick={this.onPermissions} neutral>
-                      {t("Manage members")}…
-                    </Button>
-                  )}
-                </Wrapper>
-                <Modal
-                  title={t("Collection permissions")}
-                  onRequestClose={this.handlePermissionsModalClose}
-                  isOpen={this.permissionsModalOpen}
-                >
-                  <CollectionMembers
-                    collection={this.collection}
-                    onSubmit={this.handlePermissionsModalClose}
-                    onEdit={this.handleEditModalOpen}
-                  />
-                </Modal>
-                <Modal
-                  title={t("Edit collection")}
-                  onRequestClose={this.handleEditModalClose}
-                  isOpen={this.editModalOpen}
-                >
-                  <CollectionEdit
-                    collection={this.collection}
-                    onSubmit={this.handleEditModalClose}
-                  />
-                </Modal>
-              </Centered>
-            ) : (
-              <>
-                <Heading>
-                  <CollectionIcon collection={collection} size={40} expanded />{" "}
-                  {collection.name}
-                </Heading>
-
-                {hasDescription && (
-                  <React.Suspense fallback={<p>Loading…</p>}>
-                    <Editor
-                      id={collection.id}
-                      key={collection.description}
-                      defaultValue={collection.description}
-                      readOnly
-                    />
-                  </React.Suspense>
-                )}
-
-                {hasPinnedDocuments && (
-                  <>
-                    <Subheading>
-                      <TinyPinIcon size={18} /> {t("Pinned")}
-                    </Subheading>
-                    <DocumentList documents={pinnedDocuments} showPin />
-                  </>
-                )}
-
-                <Tabs>
-                  <Tab to={collectionUrl(collection.id)} exact>
-                    {t("Documents")}
-                  </Tab>
-                  <Tab to={collectionUrl(collection.id, "updated")} exact>
-                    {t("Recently updated")}
-                  </Tab>
-                  <Tab to={collectionUrl(collection.id, "published")} exact>
-                    {t("Recently published")}
-                  </Tab>
-                  <Tab to={collectionUrl(collection.id, "old")} exact>
-                    {t("Least recently updated")}
-                  </Tab>
-                  <Tab to={collectionUrl(collection.id, "alphabetical")} exact>
-                    {t("A–Z")}
-                  </Tab>
-                </Tabs>
-                <Switch>
-                  <Route path={collectionUrl(collection.id, "alphabetical")}>
-                    <PaginatedDocumentList
-                      key="alphabetical"
-                      documents={documents.alphabeticalInCollection(
-                        collection.id
-                      )}
-                      fetch={documents.fetchAlphabetical}
-                      options={{ collectionId: collection.id }}
-                      showPin
-                    />
-                  </Route>
-                  <Route path={collectionUrl(collection.id, "old")}>
-                    <PaginatedDocumentList
-                      key="old"
-                      documents={documents.leastRecentlyUpdatedInCollection(
-                        collection.id
-                      )}
-                      fetch={documents.fetchLeastRecentlyUpdated}
-                      options={{ collectionId: collection.id }}
-                      showPin
-                    />
-                  </Route>
-                  <Route path={collectionUrl(collection.id, "recent")}>
-                    <Redirect to={collectionUrl(collection.id, "published")} />
-                  </Route>
-                  <Route path={collectionUrl(collection.id, "published")}>
-                    <PaginatedDocumentList
-                      key="published"
-                      documents={documents.recentlyPublishedInCollection(
-                        collection.id
-                      )}
-                      fetch={documents.fetchRecentlyPublished}
-                      options={{ collectionId: collection.id }}
-                      showPublished
-                      showPin
-                    />
-                  </Route>
-                  <Route path={collectionUrl(collection.id, "updated")}>
-                    <PaginatedDocumentList
-                      key="updated"
-                      documents={documents.recentlyUpdatedInCollection(
-                        collection.id
-                      )}
-                      fetch={documents.fetchRecentlyUpdated}
-                      options={{ collectionId: collection.id }}
-                      showPin
-                    />
-                  </Route>
-                  <Route path={collectionUrl(collection.id)} exact>
-                    <PaginatedDocumentList
-                      documents={documents.rootInCollection(collection.id)}
-                      fetch={documents.fetchPage}
-                      options={{
-                        collectionId: collection.id,
-                        parentDocumentId: null,
-                        sort: collection.sort.field,
-                        direction: "ASC",
-                      }}
-                      showNestedDocuments
-                      showPin
-                    />
-                  </Route>
-                </Switch>
-              </>
-            )}
-
-            {this.renderActions()}
+            <CollectionIcon collection={collection} expanded />
+            &nbsp;
+            {collection.name}
           </>
+        }
+        actions={this.renderActions()}
+      >
+        {collection.isEmpty ? (
+          <Centered column>
+            <HelpText>
+              <Trans
+                defaults="<em>{{ collectionName }}</em> doesn’t contain any
+                    documents yet."
+                values={{ collectionName }}
+                components={{ em: <strong /> }}
+              />
+              <br />
+              <Trans>Get started by creating a new one!</Trans>
+            </HelpText>
+            <Empty>
+              <Link to={newDocumentUrl(collection.id)}>
+                <Button icon={<NewDocumentIcon color="currentColor" />}>
+                  {t("Create a document")}
+                </Button>
+              </Link>
+              &nbsp;&nbsp;
+              {collection.private && (
+                <Button onClick={this.onPermissions} neutral>
+                  {t("Manage members")}…
+                </Button>
+              )}
+            </Empty>
+            <Modal
+              title={t("Collection members")}
+              onRequestClose={this.handlePermissionsModalClose}
+              isOpen={this.permissionsModalOpen}
+            >
+              <CollectionMembers
+                collection={this.collection}
+                onSubmit={this.handlePermissionsModalClose}
+                onEdit={this.handleEditModalOpen}
+              />
+            </Modal>
+            <Modal
+              title={t("Edit collection")}
+              onRequestClose={this.handleEditModalClose}
+              isOpen={this.editModalOpen}
+            >
+              <CollectionEdit
+                collection={this.collection}
+                onSubmit={this.handleEditModalClose}
+              />
+            </Modal>
+          </Centered>
         ) : (
           <>
             <Heading>
-              <Mask height={35} />
+              <CollectionIcon collection={collection} size={40} expanded />{" "}
+              {collection.name}
             </Heading>
-            <ListPlaceholder count={5} />
+            <CollectionDescription collection={collection} />
+
+            {hasPinnedDocuments && (
+              <>
+                <Subheading sticky>
+                  <TinyPinIcon size={18} /> {t("Pinned")}
+                </Subheading>
+                <DocumentList documents={pinnedDocuments} showPin />
+              </>
+            )}
+
+            <Tabs>
+              <Tab to={collectionUrl(collection.id)} exact>
+                {t("Documents")}
+              </Tab>
+              <Tab to={collectionUrl(collection.id, "updated")} exact>
+                {t("Recently updated")}
+              </Tab>
+              <Tab to={collectionUrl(collection.id, "published")} exact>
+                {t("Recently published")}
+              </Tab>
+              <Tab to={collectionUrl(collection.id, "old")} exact>
+                {t("Least recently updated")}
+              </Tab>
+              <Tab to={collectionUrl(collection.id, "alphabetical")} exact>
+                {t("A–Z")}
+              </Tab>
+            </Tabs>
+            <Switch>
+              <Route path={collectionUrl(collection.id, "alphabetical")}>
+                <PaginatedDocumentList
+                  key="alphabetical"
+                  documents={documents.alphabeticalInCollection(collection.id)}
+                  fetch={documents.fetchAlphabetical}
+                  options={{ collectionId: collection.id }}
+                  showPin
+                />
+              </Route>
+              <Route path={collectionUrl(collection.id, "old")}>
+                <PaginatedDocumentList
+                  key="old"
+                  documents={documents.leastRecentlyUpdatedInCollection(
+                    collection.id
+                  )}
+                  fetch={documents.fetchLeastRecentlyUpdated}
+                  options={{ collectionId: collection.id }}
+                  showPin
+                />
+              </Route>
+              <Route path={collectionUrl(collection.id, "recent")}>
+                <Redirect to={collectionUrl(collection.id, "published")} />
+              </Route>
+              <Route path={collectionUrl(collection.id, "published")}>
+                <PaginatedDocumentList
+                  key="published"
+                  documents={documents.recentlyPublishedInCollection(
+                    collection.id
+                  )}
+                  fetch={documents.fetchRecentlyPublished}
+                  options={{ collectionId: collection.id }}
+                  showPublished
+                  showPin
+                />
+              </Route>
+              <Route path={collectionUrl(collection.id, "updated")}>
+                <PaginatedDocumentList
+                  key="updated"
+                  documents={documents.recentlyUpdatedInCollection(
+                    collection.id
+                  )}
+                  fetch={documents.fetchRecentlyUpdated}
+                  options={{ collectionId: collection.id }}
+                  showPin
+                />
+              </Route>
+              <Route path={collectionUrl(collection.id)} exact>
+                <PaginatedDocumentList
+                  documents={documents.rootInCollection(collection.id)}
+                  fetch={documents.fetchPage}
+                  options={{
+                    collectionId: collection.id,
+                    parentDocumentId: null,
+                    sort: collection.sort.field,
+                    direction: "ASC",
+                  }}
+                  showNestedDocuments
+                  showPin
+                />
+              </Route>
+            </Switch>
           </>
         )}
+      </Scene>
+    ) : (
+      <CenteredContent>
+        <Heading>
+          <Mask height={35} />
+        </Heading>
+        <ListPlaceholder count={5} />
       </CenteredContent>
     );
   }
@@ -390,16 +371,11 @@ const TinyPinIcon = styled(PinIcon)`
   opacity: 0.8;
 `;
 
-const Wrapper = styled(Flex)`
+const Empty = styled(Flex)`
   justify-content: center;
   margin: 10px 0;
 `;
 
 export default withTranslation()<CollectionScene>(
-  inject(
-    "collections",
-    "policies",
-    "documents",
-    "ui"
-  )(withTheme(CollectionScene))
+  inject("collections", "policies", "documents", "ui")(CollectionScene)
 );

app/scenes/CollectionEdit.js

@@ -3,6 +3,7 @@ import { observable } from "mobx";
 import { inject, observer } from "mobx-react";
 import * as React from "react";
 import { withTranslation, Trans, type TFunction } from "react-i18next";
+import AuthStore from "stores/AuthStore";
 import UiStore from "stores/UiStore";
 import Collection from "models/Collection";
 import Button from "components/Button";
@@ -10,13 +11,13 @@ import Flex from "components/Flex";
 import HelpText from "components/HelpText";
 import IconPicker from "components/IconPicker";
 import Input from "components/Input";
-import InputRich from "components/InputRich";
 import InputSelect from "components/InputSelect";
 import Switch from "components/Switch";
 
 type Props = {
   collection: Collection,
   ui: UiStore,
+  auth: AuthStore,
   onSubmit: () => void,
   t: TFunction,
 };
@@ -24,7 +25,7 @@ type Props = {
 @observer
 class CollectionEdit extends React.Component<Props> {
   @observable name: string = this.props.collection.name;
-  @observable description: string = this.props.collection.description;
+  @observable sharing: boolean = this.props.collection.sharing;
   @observable icon: string = this.props.collection.icon;
   @observable color: string = this.props.collection.color || "#4E5C6E";
   @observable private: boolean = this.props.collection.private;
@@ -40,10 +41,10 @@ class CollectionEdit extends React.Component<Props> {
     try {
       await this.props.collection.save({
         name: this.name,
-        description: this.description,
         icon: this.icon,
         color: this.color,
         private: this.private,
+        sharing: this.sharing,
         sort: this.sort,
       });
       this.props.onSubmit();
@@ -65,10 +66,6 @@ class CollectionEdit extends React.Component<Props> {
     }
   };
 
-  handleDescriptionChange = (getValue: () => string) => {
-    this.description = getValue();
-  };
-
   handleNameChange = (ev: SyntheticInputEvent<*>) => {
     this.name = ev.target.value;
   };
@@ -82,8 +79,13 @@ class CollectionEdit extends React.Component<Props> {
     this.private = ev.target.checked;
   };
 
+  handleSharingChange = (ev: SyntheticInputEvent<*>) => {
+    this.sharing = ev.target.checked;
+  };
+
   render() {
-    const { t } = this.props;
+    const { auth, t } = this.props;
+    const teamSharingEnabled = !!auth.team && auth.team.sharing;
 
     return (
       <Flex column>
@@ -111,15 +113,6 @@ class CollectionEdit extends React.Component<Props> {
               icon={this.icon}
             />
           </Flex>
-          <InputRich
-            id={this.props.collection.id}
-            label={t("Description")}
-            onChange={this.handleDescriptionChange}
-            defaultValue={this.description || ""}
-            placeholder={t("More details about this collection…")}
-            minHeight={68}
-            maxHeight={200}
-          />
           <InputSelect
             label={t("Sort in sidebar")}
             options={[
@@ -140,6 +133,25 @@ class CollectionEdit extends React.Component<Props> {
               A private collection will only be visible to invited team members.
             </Trans>
           </HelpText>
+          <Switch
+            id="sharing"
+            label={t("Public document sharing")}
+            onChange={this.handleSharingChange}
+            checked={this.sharing && teamSharingEnabled}
+            disabled={!teamSharingEnabled}
+          />
+          <HelpText>
+            {teamSharingEnabled ? (
+              <Trans>
+                When enabled, documents can be shared publicly on the internet.
+              </Trans>
+            ) : (
+              <Trans>
+                Public sharing is currently disabled in the team security
+                settings.
+              </Trans>
+            )}
+          </HelpText>
           <Button
             type="submit"
             disabled={this.isSaving || !this.props.collection.name}
@@ -152,4 +164,6 @@ class CollectionEdit extends React.Component<Props> {
   }
 }
 
-export default withTranslation()<CollectionEdit>(inject("ui")(CollectionEdit));
+export default withTranslation()<CollectionEdit>(
+  inject("ui", "auth")(CollectionEdit)
+);

app/scenes/CollectionNew.js

@@ -3,8 +3,9 @@ import { intersection } from "lodash";
 import { observable } from "mobx";
 import { inject, observer } from "mobx-react";
 import * as React from "react";
-import { withTranslation, type TFunction } from "react-i18next";
+import { withTranslation, type TFunction, Trans } from "react-i18next";
 import { withRouter, type RouterHistory } from "react-router-dom";
+import AuthStore from "stores/AuthStore";
 import CollectionsStore from "stores/CollectionsStore";
 import UiStore from "stores/UiStore";
 import Collection from "models/Collection";
@@ -13,11 +14,11 @@ import Flex from "components/Flex";
 import HelpText from "components/HelpText";
 import IconPicker, { icons } from "components/IconPicker";
 import Input from "components/Input";
-import InputRich from "components/InputRich";
 import Switch from "components/Switch";
 
 type Props = {
   history: RouterHistory,
+  auth: AuthStore,
   ui: UiStore,
   collections: CollectionsStore,
   onSubmit: () => void,
@@ -27,9 +28,9 @@ type Props = {
 @observer
 class CollectionNew extends React.Component<Props> {
   @observable name: string = "";
-  @observable description: string = "";
   @observable icon: string = "";
   @observable color: string = "#4E5C6E";
+  @observable sharing: boolean = true;
   @observable private: boolean = false;
   @observable isSaving: boolean;
   hasOpenedIconPicker: boolean = false;
@@ -40,7 +41,7 @@ class CollectionNew extends React.Component<Props> {
     const collection = new Collection(
       {
         name: this.name,
-        description: this.description,
+        sharing: this.sharing,
         icon: this.icon,
         color: this.color,
         private: this.private,
@@ -59,7 +60,7 @@ class CollectionNew extends React.Component<Props> {
     }
   };
 
-  handleNameChange = (ev: SyntheticInputEvent<*>) => {
+  handleNameChange = (ev: SyntheticInputEvent<HTMLInputElement>) => {
     this.name = ev.target.value;
 
     // If the user hasn't picked an icon yet, go ahead and suggest one based on
@@ -86,12 +87,12 @@ class CollectionNew extends React.Component<Props> {
     this.hasOpenedIconPicker = true;
   };
 
-  handleDescriptionChange = (getValue: () => string) => {
-    this.description = getValue();
+  handlePrivateChange = (ev: SyntheticInputEvent<HTMLInputElement>) => {
+    this.private = ev.target.checked;
   };
 
-  handlePrivateChange = (ev: SyntheticInputEvent<*>) => {
-    this.private = ev.target.checked;
+  handleSharingChange = (ev: SyntheticInputEvent<HTMLInputElement>) => {
+    this.sharing = ev.target.checked;
   };
 
   handleChange = (color: string, icon: string) => {
@@ -100,14 +101,17 @@ class CollectionNew extends React.Component<Props> {
   };
 
   render() {
-    const { t } = this.props;
+    const { t, auth } = this.props;
+    const teamSharingEnabled = !!auth.team && auth.team.sharing;
 
     return (
       <form onSubmit={this.handleSubmit}>
         <HelpText>
-          {t(
-            "Collections are for grouping your knowledge base. They work best when organized around a topic or internal team — Product or Engineering for example."
-          )}
+          <Trans>
+            Collections are for grouping your documents. They work best when
+            organized around a topic or internal team — Product or Engineering
+            for example.
+          </Trans>
         </HelpText>
         <Flex>
           <Input
@@ -127,14 +131,6 @@ class CollectionNew extends React.Component<Props> {
             icon={this.icon}
           />
         </Flex>
-        <InputRich
-          label={t("Description")}
-          onChange={this.handleDescriptionChange}
-          defaultValue={this.description || ""}
-          placeholder={t("More details about this collection…")}
-          minHeight={68}
-          maxHeight={200}
-        />
         <Switch
           id="private"
           label={t("Private collection")}
@@ -142,10 +138,25 @@ class CollectionNew extends React.Component<Props> {
           checked={this.private}
         />
         <HelpText>
-          {t(
-            "A private collection will only be visible to invited team members."
-          )}
+          <Trans>
+            A private collection will only be visible to invited team members.
+          </Trans>
         </HelpText>
+        {teamSharingEnabled && (
+          <>
+            <Switch
+              id="sharing"
+              label={t("Public document sharing")}
+              onChange={this.handleSharingChange}
+              checked={this.sharing}
+            />
+            <HelpText>
+              <Trans>
+                When enabled, documents can be shared publicly on the internet.
+              </Trans>
+            </HelpText>
+          </>
+        )}
 
         <Button type="submit" disabled={this.isSaving || !this.name}>
           {this.isSaving ? `${t("Creating")}…` : t("Create")}
@@ -156,5 +167,5 @@ class CollectionNew extends React.Component<Props> {
 }
 
 export default withTranslation()<CollectionNew>(
-  inject("collections", "ui")(withRouter(CollectionNew))
+  inject("collections", "ui", "auth")(withRouter(CollectionNew))
 );

app/scenes/Document/components/DataLoader.js

@@ -7,7 +7,6 @@ import { observer, inject } from "mobx-react";
 import * as React from "react";
 import type { RouterHistory, Match } from "react-router-dom";
 import { withRouter } from "react-router-dom";
-import { withTheme } from "styled-components";
 import parseDocumentSlug from "shared/utils/parseDocumentSlug";
 import DocumentsStore from "stores/DocumentsStore";
 import PoliciesStore from "stores/PoliciesStore";
@@ -22,7 +21,7 @@ import DocumentComponent from "./Document";
 import HideSidebar from "./HideSidebar";
 import Loading from "./Loading";
 import SocketPresence from "./SocketPresence";
-import { type LocationWithState, type Theme } from "types";
+import { type LocationWithState } from "types";
 import { NotFoundError, OfflineError } from "utils/errors";
 import { matchDocumentEdit, updateDocumentUrl } from "utils/routeHelpers";
 import { isInternalUrl } from "utils/urls";
@@ -35,7 +34,6 @@ type Props = {|
   policies: PoliciesStore,
   revisions: RevisionsStore,
   ui: UiStore,
-  theme: Theme,
   history: RouterHistory,
 |};
 
@@ -49,7 +47,6 @@ class DataLoader extends React.Component<Props> {
     const { documents, match } = this.props;
     this.document = documents.getByUrl(match.params.documentSlug);
     this.loadDocument();
-    this.updateBackground();
   }
 
   componentDidUpdate(prevProps: Props) {
@@ -74,13 +71,6 @@ class DataLoader extends React.Component<Props> {
     ) {
       this.loadRevision();
     }
-    this.updateBackground();
-  }
-
-  updateBackground() {
-    // ensure the wider page color always matches the theme. This is to
-    // account for share links which don't sit in the wider Layout component
-    window.document.body.style.background = this.props.theme.background;
   }
 
   get isEditing() {
@@ -266,5 +256,5 @@ export default withRouter(
     "revisions",
     "policies",
     "shares"
-  )(withTheme(DataLoader))
+  )(DataLoader)
 );

app/scenes/Document/components/Document.js

@@ -480,7 +480,7 @@ const ReferencesWrapper = styled("div")`
 const MaxWidth = styled(Flex)`
   ${(props) =>
     props.archived && `* { color: ${props.theme.textSecondary} !important; } `};
-  padding: 0 16px;
+  padding: 0 12px;
   max-width: 100vw;
   width: 100%;
 

app/scenes/Document/components/Header.js

@@ -1,7 +1,5 @@
 // @flow
-import { throttle } from "lodash";
-import { observable } from "mobx";
-import { observer, inject } from "mobx-react";
+import { observer } from "mobx-react";
 import {
   TableOfContentsIcon,
   EditIcon,
@@ -9,18 +7,11 @@ import {
   PlusIcon,
   MoreIcon,
 } from "outline-icons";
-import { transparentize, darken } from "polished";
 import * as React from "react";
-import { withTranslation, Trans, type TFunction } from "react-i18next";
+import { Trans, useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
-import breakpoint from "styled-components-breakpoint";
-import AuthStore from "stores/AuthStore";
-import PoliciesStore from "stores/PoliciesStore";
-import SharesStore from "stores/SharesStore";
-import UiStore from "stores/UiStore";
 import Document from "models/Document";
-
 import DocumentShare from "scenes/DocumentShare";
 import { Action, Separator } from "components/Actions";
 import Badge from "components/Badge";
@@ -28,20 +19,17 @@ import Breadcrumb, { Slash } from "components/Breadcrumb";
 import Button from "components/Button";
 import Collaborators from "components/Collaborators";
 import Fade from "components/Fade";
-import Flex from "components/Flex";
+import Header from "components/Header";
 import Modal from "components/Modal";
 import Tooltip from "components/Tooltip";
+import useStores from "hooks/useStores";
 import DocumentMenu from "menus/DocumentMenu";
 import NewChildDocumentMenu from "menus/NewChildDocumentMenu";
 import TemplatesMenu from "menus/TemplatesMenu";
 import { metaDisplay } from "utils/keyboard";
 import { newDocumentUrl, editDocumentUrl } from "utils/routeHelpers";
 
-type Props = {
-  auth: AuthStore,
-  ui: UiStore,
-  shares: SharesStore,
-  policies: PoliciesStore,
+type Props = {|
   document: Document,
   isDraft: boolean,
   isEditing: boolean,
@@ -56,363 +44,263 @@ type Props = {
     publish?: boolean,
     autosave?: boolean,
   }) => void,
-  t: TFunction,
-};
+|};
 
-@observer
-class Header extends React.Component<Props> {
-  @observable isScrolled = false;
-  @observable showShareModal = false;
+function DocumentHeader({
+  document,
+  isEditing,
+  isDraft,
+  isPublishing,
+  isRevision,
+  isSaving,
+  savingIsDisabled,
+  publishingIsDisabled,
+  onSave,
+}: Props) {
+  const { t } = useTranslation();
+  const { auth, ui, shares, policies } = useStores();
+  const [showShareModal, setShowShareModal] = React.useState(false);
 
-  componentDidMount() {
-    window.addEventListener("scroll", this.handleScroll);
-  }
+  const handleSave = React.useCallback(() => {
+    onSave({ done: true });
+  }, [onSave]);
 
-  componentWillUnmount() {
-    window.removeEventListener("scroll", this.handleScroll);
-  }
+  const handlePublish = React.useCallback(() => {
+    onSave({ done: true, publish: true });
+  }, [onSave]);
 
-  updateIsScrolled = () => {
-    this.isScrolled = window.scrollY > 75;
-  };
+  const handleShareLink = React.useCallback(
+    async (ev: SyntheticEvent<>) => {
+      await document.share();
 
-  handleScroll = throttle(this.updateIsScrolled, 50);
+      setShowShareModal(true);
+    },
+    [document]
+  );
 
-  handleSave = () => {
-    this.props.onSave({ done: true });
-  };
+  const handleCloseShareModal = React.useCallback(() => {
+    setShowShareModal(false);
+  }, []);
 
-  handlePublish = () => {
-    this.props.onSave({ done: true, publish: true });
-  };
+  const share = shares.getByDocumentId(document.id);
+  const isPubliclyShared = share && share.published;
+  const isNew = document.isNew;
+  const isTemplate = document.isTemplate;
+  const can = policies.abilities(document.id);
+  const canShareDocument = auth.team && auth.team.sharing && can.share;
+  const canToggleEmbeds = auth.team && auth.team.documentEmbeds;
+  const canEdit = can.update && !isEditing;
 
-  handleShareLink = async (ev: SyntheticEvent<>) => {
-    const { document } = this.props;
-    await document.share();
-
-    this.showShareModal = true;
-  };
-
-  handleCloseShareModal = () => {
-    this.showShareModal = false;
-  };
-
-  handleClickTitle = () => {
-    window.scrollTo({
-      top: 0,
-      behavior: "smooth",
-    });
-  };
-
-  render() {
-    const {
-      shares,
-      document,
-      policies,
-      isEditing,
-      isDraft,
-      isPublishing,
-      isRevision,
-      isSaving,
-      savingIsDisabled,
-      publishingIsDisabled,
-      ui,
-      auth,
-      t,
-    } = this.props;
-
-    const share = shares.getByDocumentId(document.id);
-    const isPubliclyShared = share && share.published;
-    const isNew = document.isNew;
-    const isTemplate = document.isTemplate;
-    const can = policies.abilities(document.id);
-    const canShareDocuments = auth.team && auth.team.sharing && can.share;
-    const canToggleEmbeds = auth.team && auth.team.documentEmbeds;
-    const canEdit = can.update && !isEditing;
-
-    return (
-      <Actions
-        align="center"
-        justify="space-between"
-        readOnly={!isEditing}
-        isCompact={this.isScrolled}
-        shrink={false}
+  return (
+    <>
+      <Modal
+        isOpen={showShareModal}
+        onRequestClose={handleCloseShareModal}
+        title={t("Share document")}
       >
-        <Modal
-          isOpen={this.showShareModal}
-          onRequestClose={this.handleCloseShareModal}
-          title={t("Share document")}
-        >
-          <DocumentShare
-            document={document}
-            onSubmit={this.handleCloseShareModal}
-          />
-        </Modal>
-        <BreadcrumbAndContents align="center" justify="flex-start">
-          <Breadcrumb document={document} />
-          {!isEditing && (
-            <>
-              <Slash />
-              <Tooltip
-                tooltip={
-                  ui.tocVisible ? t("Hide contents") : t("Show contents")
-                }
-                shortcut={`ctrl+${metaDisplay}+h`}
-                delay={250}
-                placement="bottom"
-              >
-                <Button
-                  onClick={
-                    ui.tocVisible
-                      ? ui.hideTableOfContents
-                      : ui.showTableOfContents
+        <DocumentShare document={document} onSubmit={handleCloseShareModal} />
+      </Modal>
+      <Header
+        breadcrumb={
+          <Breadcrumb document={document}>
+            {!isEditing && (
+              <>
+                <Slash />
+                <Tooltip
+                  tooltip={
+                    ui.tocVisible ? t("Hide contents") : t("Show contents")
                   }
-                  icon={<TableOfContentsIcon />}
-                  iconColor="currentColor"
-                  borderOnHover
-                  neutral
-                />
-              </Tooltip>
-            </>
-          )}
-        </BreadcrumbAndContents>
-        {this.isScrolled && (
-          <Title onClick={this.handleClickTitle}>
-            <Fade>
-              {document.title}{" "}
-              {document.isArchived && <Badge>{t("Archived")}</Badge>}
-            </Fade>
-          </Title>
-        )}
-        <Wrapper align="center" justify="flex-end">
-          {isSaving && !isPublishing && (
-            <Action>
-              <Status>{t("Saving")}…</Status>
-            </Action>
-          )}
-          &nbsp;
-          <Fade>
-            <Collaborators
-              document={document}
-              currentUserId={auth.user ? auth.user.id : undefined}
-            />
-          </Fade>
-          {isEditing && !isTemplate && isNew && (
-            <Action>
-              <TemplatesMenu document={document} />
-            </Action>
-          )}
-          {!isEditing && canShareDocuments && (
-            <Action>
-              <Tooltip
-                tooltip={
-                  isPubliclyShared ? (
-                    <Trans>
-                      Anyone with the link <br />
-                      can view this document
-                    </Trans>
-                  ) : (
-                    ""
-                  )
-                }
-                delay={500}
-                placement="bottom"
-              >
-                <Button
-                  icon={isPubliclyShared ? <GlobeIcon /> : undefined}
-                  onClick={this.handleShareLink}
-                  neutral
+                  shortcut={`ctrl+${metaDisplay}+h`}
+                  delay={250}
+                  placement="bottom"
                 >
-                  {t("Share")}
-                </Button>
-              </Tooltip>
-            </Action>
-          )}
-          {isEditing && (
-            <>
+                  <Button
+                    onClick={
+                      ui.tocVisible
+                        ? ui.hideTableOfContents
+                        : ui.showTableOfContents
+                    }
+                    icon={<TableOfContentsIcon />}
+                    iconColor="currentColor"
+                    borderOnHover
+                    neutral
+                  />
+                </Tooltip>
+              </>
+            )}
+          </Breadcrumb>
+        }
+        title={
+          <>
+            {document.title}{" "}
+            {document.isArchived && <Badge>{t("Archived")}</Badge>}
+          </>
+        }
+        actions={
+          <>
+            {isSaving && !isPublishing && (
+              <Action>
+                <Status>{t("Saving")}…</Status>
+              </Action>
+            )}
+            &nbsp;
+            <Fade>
+              <Collaborators
+                document={document}
+                currentUserId={auth.user ? auth.user.id : undefined}
+              />
+            </Fade>
+            {isEditing && !isTemplate && isNew && (
+              <Action>
+                <TemplatesMenu document={document} />
+              </Action>
+            )}
+            {!isEditing && canShareDocument && (
               <Action>
                 <Tooltip
-                  tooltip={t("Save")}
-                  shortcut={`${metaDisplay}+enter`}
+                  tooltip={
+                    isPubliclyShared ? (
+                      <Trans>
+                        Anyone with the link <br />
+                        can view this document
+                      </Trans>
+                    ) : (
+                      ""
+                    )
+                  }
                   delay={500}
                   placement="bottom"
                 >
                   <Button
-                    onClick={this.handleSave}
-                    disabled={savingIsDisabled}
-                    neutral={isDraft}
+                    icon={isPubliclyShared ? <GlobeIcon /> : undefined}
+                    onClick={handleShareLink}
+                    neutral
                   >
-                    {isDraft ? t("Save Draft") : t("Done Editing")}
+                    {t("Share")}
                   </Button>
                 </Tooltip>
               </Action>
-            </>
-          )}
-          {canEdit && (
-            <Action>
-              <Tooltip
-                tooltip={t("Edit {{noun}}", { noun: document.noun })}
-                shortcut="e"
-                delay={500}
-                placement="bottom"
-              >
-                <Button
-                  as={Link}
-                  icon={<EditIcon />}
-                  to={editDocumentUrl(this.props.document)}
-                  neutral
-                >
-                  {t("Edit")}
-                </Button>
-              </Tooltip>
-            </Action>
-          )}
-          {canEdit && can.createChildDocument && (
-            <Action>
-              <NewChildDocumentMenu
-                document={document}
-                label={(props) => (
+            )}
+            {isEditing && (
+              <>
+                <Action>
                   <Tooltip
-                    tooltip={t("New document")}
-                    shortcut="n"
+                    tooltip={t("Save")}
+                    shortcut={`${metaDisplay}+enter`}
                     delay={500}
                     placement="bottom"
                   >
-                    <Button icon={<PlusIcon />} {...props} neutral>
-                      {t("New doc")}
+                    <Button
+                      onClick={handleSave}
+                      disabled={savingIsDisabled}
+                      neutral={isDraft}
+                    >
+                      {isDraft ? t("Save Draft") : t("Done Editing")}
                     </Button>
                   </Tooltip>
-                )}
-              />
-            </Action>
-          )}
-          {canEdit && isTemplate && !isDraft && !isRevision && (
-            <Action>
-              <Button
-                icon={<PlusIcon />}
-                as={Link}
-                to={newDocumentUrl(document.collectionId, {
-                  templateId: document.id,
-                })}
-                primary
-              >
-                {t("New from template")}
-              </Button>
-            </Action>
-          )}
-          {can.update && isDraft && !isRevision && (
-            <Action>
-              <Tooltip
-                tooltip={t("Publish")}
-                shortcut={`${metaDisplay}+shift+p`}
-                delay={500}
-                placement="bottom"
-              >
-                <Button
-                  onClick={this.handlePublish}
-                  disabled={publishingIsDisabled}
-                >
-                  {isPublishing ? `${t("Publishing")}…` : t("Publish")}
-                </Button>
-              </Tooltip>
-            </Action>
-          )}
-          {!isEditing && (
-            <>
-              <Separator />
+                </Action>
+              </>
+            )}
+            {canEdit && (
               <Action>
-                <DocumentMenu
+                <Tooltip
+                  tooltip={t("Edit {{noun}}", { noun: document.noun })}
+                  shortcut="e"
+                  delay={500}
+                  placement="bottom"
+                >
+                  <Button
+                    as={Link}
+                    icon={<EditIcon />}
+                    to={editDocumentUrl(document)}
+                    neutral
+                  >
+                    {t("Edit")}
+                  </Button>
+                </Tooltip>
+              </Action>
+            )}
+            {canEdit && can.createChildDocument && (
+              <Action>
+                <NewChildDocumentMenu
                   document={document}
-                  isRevision={isRevision}
                   label={(props) => (
-                    <Button
-                      icon={<MoreIcon />}
-                      iconColor="currentColor"
-                      {...props}
-                      borderOnHover
-                      neutral
-                    />
+                    <Tooltip
+                      tooltip={t("New document")}
+                      shortcut="n"
+                      delay={500}
+                      placement="bottom"
+                    >
+                      <Button icon={<PlusIcon />} {...props} neutral>
+                        {t("New doc")}
+                      </Button>
+                    </Tooltip>
                   )}
-                  showToggleEmbeds={canToggleEmbeds}
-                  showPrint
                 />
               </Action>
-            </>
-          )}
-        </Wrapper>
-      </Actions>
-    );
-  }
+            )}
+            {canEdit && isTemplate && !isDraft && !isRevision && (
+              <Action>
+                <Button
+                  icon={<PlusIcon />}
+                  as={Link}
+                  to={newDocumentUrl(document.collectionId, {
+                    templateId: document.id,
+                  })}
+                  primary
+                >
+                  {t("New from template")}
+                </Button>
+              </Action>
+            )}
+            {can.update && isDraft && !isRevision && (
+              <Action>
+                <Tooltip
+                  tooltip={t("Publish")}
+                  shortcut={`${metaDisplay}+shift+p`}
+                  delay={500}
+                  placement="bottom"
+                >
+                  <Button
+                    onClick={handlePublish}
+                    disabled={publishingIsDisabled}
+                  >
+                    {isPublishing ? `${t("Publishing")}…` : t("Publish")}
+                  </Button>
+                </Tooltip>
+              </Action>
+            )}
+            {!isEditing && (
+              <>
+                <Separator />
+                <Action>
+                  <DocumentMenu
+                    document={document}
+                    isRevision={isRevision}
+                    label={(props) => (
+                      <Button
+                        icon={<MoreIcon />}
+                        iconColor="currentColor"
+                        {...props}
+                        borderOnHover
+                        neutral
+                      />
+                    )}
+                    showToggleEmbeds={canToggleEmbeds}
+                    showPrint
+                  />
+                </Action>
+              </>
+            )}
+          </>
+        }
+      />
+    </>
+  );
 }
 
 const Status = styled.div`
   color: ${(props) => props.theme.slate};
 `;
 
-const BreadcrumbAndContents = styled(Flex)`
-  display: none;
-
-  ${breakpoint("tablet")`	
-    display: flex;
-    width: 33.3%;
-  `};
-`;
-
-const Wrapper = styled(Flex)`
-  width: 100%;
-  align-self: flex-end;
-  height: 32px;
-
-  ${breakpoint("tablet")`	
-    width: 33.3%;
-  `};
-`;
-
-const Actions = styled(Flex)`
-  position: sticky;
-  top: 0;
-  right: 0;
-  left: 0;
-  z-index: 2;
-  background: ${(props) => transparentize(0.2, props.theme.background)};
-  box-shadow: 0 1px 0
-    ${(props) =>
-      props.isCompact
-        ? darken(0.05, props.theme.sidebarBackground)
-        : "transparent"};
-  padding: 12px;
-  transition: all 100ms ease-out;
-  transform: translate3d(0, 0, 0);
-  backdrop-filter: blur(20px);
-
-  @media print {
-    display: none;
-  }
-
-  ${breakpoint("tablet")`
-    padding: ${(props) => (props.isCompact ? "12px" : `24px 24px 0`)};
-  `};
-`;
-
-const Title = styled.div`
-  font-size: 16px;
-  font-weight: 600;
-  text-align: center;
-  align-items: center;
-  justify-content: center;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  cursor: pointer;
-  display: none;
-  width: 0;
-
-  ${breakpoint("tablet")`	
-    display: flex;
-    flex-grow: 1;
-  `};
-`;
-
-export default withTranslation()<Header>(
-  inject("auth", "ui", "policies", "shares")(Header)
-);
+export default observer(DocumentHeader);

app/scenes/Drafts.js

@@ -1,6 +1,7 @@
 // @flow
 import { observable } from "mobx";
 import { inject, observer } from "mobx-react";
+import { EditIcon } from "outline-icons";
 import queryString from "query-string";
 import * as React from "react";
 import { withTranslation, type TFunction } from "react-i18next";
@@ -9,15 +10,13 @@ import styled from "styled-components";
 import DocumentsStore from "stores/DocumentsStore";
 import CollectionFilter from "scenes/Search/components/CollectionFilter";
 import DateFilter from "scenes/Search/components/DateFilter";
-
-import Actions, { Action } from "components/Actions";
-import CenteredContent from "components/CenteredContent";
+import { Action } from "components/Actions";
 import Empty from "components/Empty";
 import Flex from "components/Flex";
 import Heading from "components/Heading";
 import InputSearch from "components/InputSearch";
-import PageTitle from "components/PageTitle";
 import PaginatedDocumentList from "components/PaginatedDocumentList";
+import Scene from "components/Scene";
 import Subheading from "components/Subheading";
 import NewDocumentMenu from "menus/NewDocumentMenu";
 import { type LocationWithState } from "types";
@@ -78,10 +77,26 @@ class Drafts extends React.Component<Props> {
     };
 
     return (
-      <CenteredContent column auto>
-        <PageTitle title={t("Drafts")} />
+      <Scene
+        icon={<EditIcon color="currentColor" />}
+        title={t("Drafts")}
+        actions={
+          <>
+            <Action>
+              <InputSearch
+                source="drafts"
+                label={t("Search documents")}
+                labelHidden
+              />
+            </Action>
+            <Action>
+              <NewDocumentMenu />
+            </Action>
+          </>
+        }
+      >
         <Heading>{t("Drafts")}</Heading>
-        <Subheading>
+        <Subheading sticky>
           {t("Documents")}
           <Filters>
             <CollectionFilter
@@ -110,20 +125,7 @@ class Drafts extends React.Component<Props> {
           options={options}
           showCollection
         />
-
-        <Actions align="center" justify="flex-end">
-          <Action>
-            <InputSearch
-              source="drafts"
-              label={t("Search documents")}
-              labelHidden
-            />
-          </Action>
-          <Action>
-            <NewDocumentMenu />
-          </Action>
-        </Actions>
-      </CenteredContent>
+      </Scene>
     );
   }
 }

app/scenes/Home.js

@@ -1,21 +1,21 @@
 // @flow
 import { observer } from "mobx-react";
+import { HomeIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Switch, Route } from "react-router-dom";
-
-import Actions, { Action } from "components/Actions";
-import CenteredContent from "components/CenteredContent";
+import { Action } from "components/Actions";
+import Heading from "components/Heading";
 import InputSearch from "components/InputSearch";
 import LanguagePrompt from "components/LanguagePrompt";
-import PageTitle from "components/PageTitle";
+import Scene from "components/Scene";
 import Tab from "components/Tab";
 import Tabs from "components/Tabs";
 import PaginatedDocumentList from "../components/PaginatedDocumentList";
 import useStores from "../hooks/useStores";
 import NewDocumentMenu from "menus/NewDocumentMenu";
 
-function Dashboard() {
+function Home() {
   const { documents, ui, auth } = useStores();
   const { t } = useTranslation();
 
@@ -23,10 +23,26 @@ function Dashboard() {
   const user = auth.user.id;
 
   return (
-    <CenteredContent>
-      <PageTitle title={t("Home")} />
+    <Scene
+      icon={<HomeIcon color="currentColor" />}
+      title={t("Home")}
+      actions={
+        <>
+          <Action>
+            <InputSearch
+              source="dashboard"
+              label={t("Search documents")}
+              labelHidden
+            />
+          </Action>
+          <Action>
+            <NewDocumentMenu />
+          </Action>
+        </>
+      }
+    >
       {!ui.languagePromptDismissed && <LanguagePrompt />}
-      <h1>{t("Home")}</h1>
+      <Heading>{t("Home")}</Heading>
       <Tabs>
         <Tab to="/home" exact>
           {t("Recently updated")}
@@ -62,20 +78,8 @@ function Dashboard() {
           />
         </Route>
       </Switch>
-      <Actions align="center" justify="flex-end">
-        <Action>
-          <InputSearch
-            source="dashboard"
-            label={t("Search documents")}
-            labelHidden
-          />
-        </Action>
-        <Action>
-          <NewDocumentMenu />
-        </Action>
-      </Actions>
-    </CenteredContent>
+    </Scene>
   );
 }
 
-export default observer(Dashboard);
+export default observer(Home);

app/scenes/Search/Search.js

@@ -37,6 +37,7 @@ import NewDocumentMenu from "menus/NewDocumentMenu";
 import { type LocationWithState } from "types";
 import { metaDisplay } from "utils/keyboard";
 import { newDocumentUrl, searchUrl } from "utils/routeHelpers";
+import { decodeURIComponentSafe } from "utils/urls";
 
 type Props = {
   history: RouterHistory,
@@ -55,7 +56,7 @@ class Search extends React.Component<Props> {
   lastParams: Object;
 
   @observable
-  query: string = decodeURIComponent(this.props.match.params.term || "");
+  query: string = decodeURIComponentSafe(this.props.match.params.term || "");
   @observable params: URLSearchParams = new URLSearchParams();
   @observable offset: number = 0;
   @observable allowLoadMore: boolean = true;
@@ -116,7 +117,7 @@ class Search extends React.Component<Props> {
   };
 
   handleTermChange = () => {
-    const query = decodeURIComponent(this.props.match.params.term || "");
+    const query = decodeURIComponentSafe(this.props.match.params.term || "");
     this.query = query ? query : "";
     this.offset = 0;
     this.allowLoadMore = true;

app/scenes/Search/components/CollectionFilter.js

@@ -1,39 +1,44 @@
 // @flow
-import { observer, inject } from "mobx-react";
+import { observer } from "mobx-react";
 import * as React from "react";
-import CollectionsStore from "stores/CollectionsStore";
+import { useTranslation } from "react-i18next";
 import FilterOptions from "./FilterOptions";
+import useStores from "hooks/useStores";
 
-const defaultOption = {
-  key: "",
-  label: "Any collection",
-};
-
-type Props = {
-  collections: CollectionsStore,
+type Props = {|
   collectionId: ?string,
   onSelect: (key: ?string) => void,
-};
+|};
 
-@observer
-class CollectionFilter extends React.Component<Props> {
-  render() {
-    const { onSelect, collectionId, collections } = this.props;
+function CollectionFilter(props: Props) {
+  const { t } = useTranslation();
+  const { collections } = useStores();
+  const { onSelect, collectionId } = props;
+
+  const options = React.useMemo(() => {
     const collectionOptions = collections.orderedData.map((user) => ({
       key: user.id,
       label: user.name,
     }));
 
-    return (
-      <FilterOptions
-        options={[defaultOption, ...collectionOptions]}
-        activeKey={collectionId}
-        onSelect={onSelect}
-        defaultLabel="Any collection"
-        selectedPrefix="Collection:"
-      />
-    );
-  }
+    return [
+      {
+        key: "",
+        label: t("Any collection"),
+      },
+      ...collectionOptions,
+    ];
+  }, [collections.orderedData, t]);
+
+  return (
+    <FilterOptions
+      options={options}
+      activeKey={collectionId}
+      onSelect={onSelect}
+      defaultLabel={t("Any collection")}
+      selectedPrefix={`${t("Collection")}:`}
+    />
+  );
 }
 
-export default inject("collections")(CollectionFilter);
+export default observer(CollectionFilter);

app/scenes/Search/components/DateFilter.js

@@ -1,27 +1,33 @@
 // @flow
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 import FilterOptions from "./FilterOptions";
 
-const options = [
-  { key: "", label: "Any time" },
-  { key: "day", label: "Past day" },
-  { key: "week", label: "Past week" },
-  { key: "month", label: "Past month" },
-  { key: "year", label: "Past year" },
-];
-
-type Props = {
+type Props = {|
   dateFilter: ?string,
   onSelect: (key: ?string) => void,
-};
+|};
 
 const DateFilter = ({ dateFilter, onSelect }: Props) => {
+  const { t } = useTranslation();
+
+  const options = React.useMemo(
+    () => [
+      { key: "", label: t("Any time") },
+      { key: "day", label: t("Past day") },
+      { key: "week", label: t("Past week") },
+      { key: "month", label: t("Past month") },
+      { key: "year", label: t("Past year") },
+    ],
+    [t]
+  );
+
   return (
     <FilterOptions
       options={options}
       activeKey={dateFilter}
       onSelect={onSelect}
-      defaultLabel="Any time"
+      defaultLabel={t("Any time")}
     />
   );
 };

app/scenes/Search/components/FilterOption.js

@@ -34,7 +34,9 @@ const FilterOption = ({ label, note, onSelect, active, ...rest }: Props) => {
 };
 
 const Description = styled(HelpText)`
+  margin-top: 2px;
   margin-bottom: 0;
+  line-height: 1.2em;
 `;
 
 const Checkmark = styled(CheckmarkIcon)`

app/scenes/Search/components/StatusFilter.js

@@ -1,32 +1,38 @@
 // @flow
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 import FilterOptions from "./FilterOptions";
 
-const options = [
-  {
-    key: "",
-    label: "Active documents",
-    note: "Documents in collections you are able to access",
-  },
-  {
-    key: "true",
-    label: "All documents",
-    note: "Include documents that are in the archive",
-  },
-];
-
-type Props = {
-  includeArchived: boolean,
+type Props = {|
+  includeArchived?: boolean,
   onSelect: (key: ?string) => void,
-};
+|};
 
 const StatusFilter = ({ includeArchived, onSelect }: Props) => {
+  const { t } = useTranslation();
+
+  const options = React.useMemo(
+    () => [
+      {
+        key: "",
+        label: t("Active documents"),
+        note: t("Documents in collections you are able to access"),
+      },
+      {
+        key: "true",
+        label: t("All documents"),
+        note: t("Include documents that are in the archive"),
+      },
+    ],
+    [t]
+  );
+
   return (
     <FilterOptions
       options={options}
       activeKey={includeArchived ? "true" : undefined}
       onSelect={onSelect}
-      defaultLabel="Active documents"
+      defaultLabel={t("Active documents")}
     />
   );
 };

app/scenes/Search/components/UserFilter.js

@@ -1,43 +1,48 @@
 // @flow
-import { observer, inject } from "mobx-react";
+import { observer } from "mobx-react";
 import * as React from "react";
-import UsersStore from "stores/UsersStore";
+import { useTranslation } from "react-i18next";
 import FilterOptions from "./FilterOptions";
+import useStores from "hooks/useStores";
 
-const defaultOption = {
-  key: "",
-  label: "Any author",
-};
-
-type Props = {
-  users: UsersStore,
+type Props = {|
   userId: ?string,
   onSelect: (key: ?string) => void,
-};
+|};
 
-@observer
-class UserFilter extends React.Component<Props> {
-  componentDidMount() {
-    this.props.users.fetchPage({ limit: 100 });
-  }
+function UserFilter(props: Props) {
+  const { onSelect, userId } = props;
+  const { t } = useTranslation();
+  const { users } = useStores();
 
-  render() {
-    const { onSelect, userId, users } = this.props;
+  React.useEffect(() => {
+    users.fetchPage({ limit: 100 });
+  }, [users]);
+
+  const options = React.useMemo(() => {
     const userOptions = users.all.map((user) => ({
       key: user.id,
       label: user.name,
     }));
 
-    return (
-      <FilterOptions
-        options={[defaultOption, ...userOptions]}
-        activeKey={userId}
-        onSelect={onSelect}
-        defaultLabel="Any author"
-        selectedPrefix="Author:"
-      />
-    );
-  }
+    return [
+      {
+        key: "",
+        label: t("Any author"),
+      },
+      ...userOptions,
+    ];
+  }, [users.all, t]);
+
+  return (
+    <FilterOptions
+      options={options}
+      activeKey={userId}
+      onSelect={onSelect}
+      defaultLabel={t("Any author")}
+      selectedPrefix={`${t("Author")}:`}
+    />
+  );
 }
 
-export default inject("users")(UserFilter);
+export default observer(UserFilter);

app/scenes/Settings/ImportExport.js

@@ -0,0 +1,223 @@
+// @flow
+import invariant from "invariant";
+import { observer } from "mobx-react";
+import { CollectionIcon } from "outline-icons";
+import * as React from "react";
+import { useTranslation, Trans } from "react-i18next";
+import { VisuallyHidden } from "reakit/VisuallyHidden";
+import styled from "styled-components";
+import { parseOutlineExport } from "shared/utils/zip";
+import Button from "components/Button";
+import CenteredContent from "components/CenteredContent";
+import HelpText from "components/HelpText";
+import Notice from "components/Notice";
+import PageTitle from "components/PageTitle";
+import useCurrentUser from "hooks/useCurrentUser";
+import useStores from "hooks/useStores";
+import getDataTransferFiles from "utils/getDataTransferFiles";
+import { uploadFile } from "utils/uploadFile";
+
+function ImportExport() {
+  const { t } = useTranslation();
+  const user = useCurrentUser();
+  const fileRef = React.useRef();
+  const { ui, collections } = useStores();
+  const { showToast } = ui;
+  const [isLoading, setLoading] = React.useState(false);
+  const [isImporting, setImporting] = React.useState(false);
+  const [isImported, setImported] = React.useState(false);
+  const [isExporting, setExporting] = React.useState(false);
+  const [file, setFile] = React.useState();
+  const [importDetails, setImportDetails] = React.useState();
+
+  const handleImport = React.useCallback(
+    async (ev) => {
+      setImported(undefined);
+      setImporting(true);
+
+      try {
+        invariant(file, "File must exist to upload");
+        const attachment = await uploadFile(file, {
+          name: file.name,
+        });
+        await collections.import(attachment.id);
+        showToast(t("Import started"));
+        setImported(true);
+      } catch (err) {
+        showToast(err.message);
+      } finally {
+        if (fileRef.current) {
+          fileRef.current.value = "";
+        }
+        setImporting(false);
+        setFile(undefined);
+        setImportDetails(undefined);
+      }
+    },
+    [t, file, collections, showToast]
+  );
+
+  const handleFilePicked = React.useCallback(async (ev) => {
+    ev.preventDefault();
+
+    const files = getDataTransferFiles(ev);
+    const file = files[0];
+    setFile(file);
+
+    try {
+      setImportDetails(await parseOutlineExport(file));
+    } catch (err) {
+      setImportDetails([]);
+    }
+  }, []);
+
+  const handlePickFile = React.useCallback(
+    (ev) => {
+      ev.preventDefault();
+
+      if (fileRef.current) {
+        fileRef.current.click();
+      }
+    },
+    [fileRef]
+  );
+
+  const handleExport = React.useCallback(
+    async (ev: SyntheticEvent<>) => {
+      ev.preventDefault();
+      setLoading(true);
+
+      try {
+        await collections.export();
+        setExporting(true);
+        showToast(t("Export in progress…"));
+      } finally {
+        setLoading(false);
+      }
+    },
+    [t, collections, showToast]
+  );
+
+  const hasCollections = importDetails
+    ? !!importDetails.filter((detail) => detail.type === "collection").length
+    : false;
+  const hasDocuments = importDetails
+    ? !!importDetails.filter((detail) => detail.type === "document").length
+    : false;
+  const isImportable = hasCollections && hasDocuments;
+
+  return (
+    <CenteredContent>
+      <PageTitle title={`${t("Import")} / ${t("Export")}`} />
+      <h1>{t("Import")}</h1>
+      <HelpText>
+        <Trans>
+          It is possible to import a zip file of folders and Markdown files
+          previously exported from an Outline instance. Support will soon be
+          added for importing from other services.
+        </Trans>
+      </HelpText>
+      <VisuallyHidden>
+        <input
+          type="file"
+          ref={fileRef}
+          onChange={handleFilePicked}
+          accept="application/zip"
+        />
+      </VisuallyHidden>
+      {isImported && (
+        <Notice>
+          <Trans>
+            Your file has been uploaded and the import is currently being
+            processed, you can safely leave this page while it completes.
+          </Trans>
+        </Notice>
+      )}
+      {file && !isImportable && (
+        <ImportPreview>
+          <Trans
+            defaults="Sorry, the file <em>{{ fileName }}</em> is missing valid collections or documents."
+            values={{ fileName: file.name }}
+            components={{ em: <strong /> }}
+          />
+        </ImportPreview>
+      )}
+      {file && importDetails && isImportable ? (
+        <>
+          <ImportPreview as="div">
+            <Trans
+              defaults="<em>{{ fileName }}</em> looks good, the following collections and their documents will be imported:"
+              values={{ fileName: file.name }}
+              components={{ em: <strong /> }}
+            />
+            <List>
+              {importDetails
+                .filter((detail) => detail.type === "collection")
+                .map((detail) => (
+                  <ImportPreviewItem key={detail.path}>
+                    <CollectionIcon />
+                    <CollectionName>{detail.name}</CollectionName>
+                  </ImportPreviewItem>
+                ))}
+            </List>
+          </ImportPreview>
+          <Button
+            type="submit"
+            onClick={handleImport}
+            disabled={isImporting}
+            primary
+          >
+            {isImporting ? `${t("Uploading")}…` : t("Confirm & Import")}
+          </Button>
+        </>
+      ) : (
+        <Button type="submit" onClick={handlePickFile} primary>
+          {t("Choose File")}…
+        </Button>
+      )}
+
+      <h1>{t("Export")}</h1>
+      <HelpText>
+        <Trans
+          defaults="A full export might take some time, consider exporting a single document or collection if possible. We’ll put together a zip of all your documents in Markdown format and email it to <em>{{ userEmail }}</em>."
+          values={{ userEmail: user.email }}
+          components={{ em: <strong /> }}
+        />
+      </HelpText>
+      <Button
+        type="submit"
+        onClick={handleExport}
+        disabled={isLoading || isExporting}
+        primary
+      >
+        {isExporting
+          ? t("Export Requested")
+          : isLoading
+          ? `${t("Requesting Export")}…`
+          : t("Export Data")}
+      </Button>
+    </CenteredContent>
+  );
+}
+
+const List = styled.ul`
+  padding: 0;
+  margin: 8px 0 0;
+`;
+
+const ImportPreview = styled(Notice)`
+  margin-bottom: 16px;
+`;
+
+const ImportPreviewItem = styled.li`
+  display: flex;
+  align-items: center;
+  list-style: none;
+`;
+
+const CollectionName = styled.span`
+  font-weight: 500;
+  margin-left: 4px;
+`;
+
+export default observer(ImportExport);

app/scenes/Settings/People.js

@@ -4,12 +4,13 @@ import { observable } from "mobx";
 import { observer, inject } from "mobx-react";
 import { PlusIcon } from "outline-icons";
 import * as React from "react";
+import { withTranslation, type TFunction, Trans } from "react-i18next";
 import { type Match } from "react-router-dom";
-
 import AuthStore from "stores/AuthStore";
 import PoliciesStore from "stores/PoliciesStore";
 import UsersStore from "stores/UsersStore";
 import Invite from "scenes/Invite";
+import Bubble from "components/Bubble";
 import Button from "components/Button";
 import CenteredContent from "components/CenteredContent";
 import Empty from "components/Empty";
@@ -27,12 +28,20 @@ type Props = {
   users: UsersStore,
   policies: PoliciesStore,
   match: Match,
+  t: TFunction,
 };
 
 @observer
 class People extends React.Component<Props> {
   @observable inviteModalOpen: boolean = false;
 
+  componentDidMount() {
+    const { team } = this.props.auth;
+    if (team) {
+      this.props.users.fetchCounts(team.id);
+    }
+  }
+
   handleInviteModalOpen = () => {
     this.inviteModalOpen = true;
   };
@@ -46,7 +55,7 @@ class People extends React.Component<Props> {
   };
 
   render() {
-    const { auth, policies, match } = this.props;
+    const { auth, policies, match, t } = this.props;
     const { filter } = match.params;
     const currentUser = auth.user;
     const team = auth.team;
@@ -65,56 +74,60 @@ class People extends React.Component<Props> {
     }
 
     const can = policies.abilities(team.id);
+    const { counts } = this.props.users;
 
     return (
       <CenteredContent>
-        <PageTitle title="People" />
-        <h1>People</h1>
+        <PageTitle title={t("People")} />
+        <h1>{t("People")}</h1>
         <HelpText>
-          Everyone that has signed into Outline appears here. It’s possible that
-          there are other users who have access through {team.signinMethods} but
-          haven’t signed in yet.
+          <Trans>
+            Everyone that has signed into Outline appears here. It’s possible
+            that there are other users who have access through{" "}
+            {team.signinMethods} but haven’t signed in yet.
+          </Trans>
         </HelpText>
-        <Button
-          type="button"
-          data-on="click"
-          data-event-category="invite"
-          data-event-action="peoplePage"
-          onClick={this.handleInviteModalOpen}
-          icon={<PlusIcon />}
-          neutral
-        >
-          Invite people…
-        </Button>
+        {can.invite && (
+          <Button
+            type="button"
+            data-on="click"
+            data-event-category="invite"
+            data-event-action="peoplePage"
+            onClick={this.handleInviteModalOpen}
+            icon={<PlusIcon />}
+            neutral
+          >
+            {t("Invite people")}…
+          </Button>
+        )}
 
         <Tabs>
           <Tab to="/settings/people" exact>
-            Active
+            {t("Active")} <Bubble count={counts.active} />
           </Tab>
           <Tab to="/settings/people/admins" exact>
-            Admins
+            {t("Admins")} <Bubble count={counts.admins} />
           </Tab>
           {can.update && (
             <Tab to="/settings/people/suspended" exact>
-              Suspended
+              {t("Suspended")} <Bubble count={counts.suspended} />
             </Tab>
           )}
           <Tab to="/settings/people/all" exact>
-            Everyone
+            {t("Everyone")} <Bubble count={counts.all - counts.invited} />
           </Tab>
-
           {can.invite && (
             <>
               <Separator />
               <Tab to="/settings/people/invited" exact>
-                Invited
+                {t("Invited")} <Bubble count={counts.invited} />
               </Tab>
             </>
           )}
         </Tabs>
         <PaginatedList
           items={users}
-          empty={<Empty>No people to see here.</Empty>}
+          empty={<Empty>{t("No people to see here.")}</Empty>}
           fetch={this.fetchPage}
           renderItem={(item) => (
             <UserListItem
@@ -124,17 +137,22 @@ class People extends React.Component<Props> {
             />
           )}
         />
-
-        <Modal
-          title="Invite people"
-          onRequestClose={this.handleInviteModalClose}
-          isOpen={this.inviteModalOpen}
-        >
-          <Invite onSubmit={this.handleInviteModalClose} />
-        </Modal>
+        {can.invite && (
+          <Modal
+            title={t("Invite people")}
+            onRequestClose={this.handleInviteModalClose}
+            isOpen={this.inviteModalOpen}
+          >
+            <Invite onSubmit={this.handleInviteModalClose} />
+          </Modal>
+        )}
       </CenteredContent>
     );
   }
 }
 
-export default inject("auth", "users", "policies")(People);
+export default inject(
+  "auth",
+  "users",
+  "policies"
+)(withTranslation()<People>(People));

app/scenes/Starred.js

@@ -1,15 +1,15 @@
 // @flow
 import { observer } from "mobx-react";
+import { StarredIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { type Match } from "react-router-dom";
-import Actions, { Action } from "components/Actions";
-import CenteredContent from "components/CenteredContent";
+import { Action } from "components/Actions";
 import Empty from "components/Empty";
 import Heading from "components/Heading";
 import InputSearch from "components/InputSearch";
-import PageTitle from "components/PageTitle";
 import PaginatedDocumentList from "components/PaginatedDocumentList";
+import Scene from "components/Scene";
 import Tab from "components/Tab";
 import Tabs from "components/Tabs";
 import useStores from "hooks/useStores";
@@ -26,8 +26,24 @@ function Starred(props: Props) {
   const { sort } = props.match.params;
 
   return (
-    <CenteredContent column auto>
-      <PageTitle title={t("Starred")} />
+    <Scene
+      icon={<StarredIcon color="currentColor" />}
+      title={t("Starred")}
+      actions={
+        <>
+          <Action>
+            <InputSearch
+              source="starred"
+              label={t("Search documents")}
+              labelHidden
+            />
+          </Action>
+          <Action>
+            <NewDocumentMenu />
+          </Action>
+        </>
+      }
+    >
       <Heading>{t("Starred")}</Heading>
       <PaginatedDocumentList
         heading={
@@ -45,20 +61,7 @@ function Starred(props: Props) {
         documents={sort === "alphabetical" ? starredAlphabetical : starred}
         showCollection
       />
-
-      <Actions align="center" justify="flex-end">
-        <Action>
-          <InputSearch
-            source="starred"
-            label={t("Search documents")}
-            labelHidden
-          />
-        </Action>
-        <Action>
-          <NewDocumentMenu />
-        </Action>
-      </Actions>
-    </CenteredContent>
+    </Scene>
   );
 }
 

app/scenes/Templates.js

@@ -1,15 +1,14 @@
 // @flow
 import { observer } from "mobx-react";
+import { TemplateIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { type Match } from "react-router-dom";
-
-import Actions, { Action } from "components/Actions";
-import CenteredContent from "components/CenteredContent";
+import { Action } from "components/Actions";
 import Empty from "components/Empty";
 import Heading from "components/Heading";
-import PageTitle from "components/PageTitle";
 import PaginatedDocumentList from "components/PaginatedDocumentList";
+import Scene from "components/Scene";
 import Tab from "components/Tab";
 import Tabs from "components/Tabs";
 import useStores from "hooks/useStores";
@@ -26,8 +25,15 @@ function Templates(props: Props) {
   const { sort } = props.match.params;
 
   return (
-    <CenteredContent column auto>
-      <PageTitle title={t("Templates")} />
+    <Scene
+      icon={<TemplateIcon color="currentColor" />}
+      title={t("Templates")}
+      actions={
+        <Action>
+          <NewTemplateMenu />
+        </Action>
+      }
+    >
       <Heading>{t("Templates")}</Heading>
       <PaginatedDocumentList
         heading={
@@ -52,13 +58,7 @@ function Templates(props: Props) {
         showCollection
         showDraft
       />
-
-      <Actions align="center" justify="flex-end">
-        <Action>
-          <NewTemplateMenu />
-        </Action>
-      </Actions>
-    </CenteredContent>
+    </Scene>
   );
 }
 

app/scenes/Trash.js

@@ -1,13 +1,12 @@
 // @flow
 import { observer } from "mobx-react";
+import { TrashIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-
-import CenteredContent from "components/CenteredContent";
 import Empty from "components/Empty";
 import Heading from "components/Heading";
-import PageTitle from "components/PageTitle";
 import PaginatedDocumentList from "components/PaginatedDocumentList";
+import Scene from "components/Scene";
 import Subheading from "components/Subheading";
 import useStores from "hooks/useStores";
 
@@ -16,18 +15,17 @@ function Trash() {
   const { documents } = useStores();
 
   return (
-    <CenteredContent column auto>
-      <PageTitle title={t("Trash")} />
+    <Scene icon={<TrashIcon color="currentColor" />} title={t("Trash")}>
       <Heading>{t("Trash")}</Heading>
       <PaginatedDocumentList
         documents={documents.deleted}
         fetch={documents.fetchDeleted}
-        heading={<Subheading>{t("Documents")}</Subheading>}
+        heading={<Subheading sticky>{t("Documents")}</Subheading>}
         empty={<Empty>{t("Trash is empty at the moment.")}</Empty>}
         showCollection
         showTemplate
       />
-    </CenteredContent>
+    </Scene>
   );
 }
 

app/scenes/UserProfile.js

@@ -55,9 +55,9 @@ function UserProfile(props: Props) {
             time: distanceInWordsToNow(new Date(user.createdAt)),
           })}
           {user.isAdmin && (
-            <StyledBadge admin={user.isAdmin}>{t("Admin")}</StyledBadge>
+            <StyledBadge primary={user.isAdmin}>{t("Admin")}</StyledBadge>
           )}
-          {user.isSuspended && <Badge>{t("Suspended")}</Badge>}
+          {user.isSuspended && <StyledBadge>{t("Suspended")}</StyledBadge>}
           {isCurrentUser && (
             <Edit>
               <Button

app/stores/BaseStore.js

@@ -7,7 +7,7 @@ import BaseModel from "../models/BaseModel";
 import type { PaginationParams } from "types";
 import { client } from "utils/ApiClient";
 
-type Action = "list" | "info" | "create" | "update" | "delete";
+type Action = "list" | "info" | "create" | "update" | "delete" | "count";
 
 function modelNameFromClassName(string) {
   return string.charAt(0).toLowerCase() + string.slice(1);
@@ -24,7 +24,7 @@ export default class BaseStore<T: BaseModel> {
   model: Class<T>;
   modelName: string;
   rootStore: RootStore;
-  actions: Action[] = ["list", "info", "create", "update", "delete"];
+  actions: Action[] = ["list", "info", "create", "update", "delete", "count"];
 
   constructor(rootStore: RootStore, model: Class<T>) {
     this.rootStore = rootStore;

app/stores/CollectionsStore.js

@@ -1,7 +1,6 @@
 // @flow
 import { concat, filter, last } from "lodash";
-import { computed } from "mobx";
-
+import { computed, action } from "mobx";
 import naturalSort from "shared/utils/naturalSort";
 import Collection from "models/Collection";
 import BaseStore from "./BaseStore";
@@ -88,6 +87,32 @@ export default class CollectionsStore extends BaseStore<Collection> {
     });
   }
 
+  @action
+  import = async (attachmentId: string) => {
+    await client.post("/collections.import", {
+      type: "outline",
+      attachmentId,
+    });
+  };
+
+  async update(params: Object): Promise<Collection> {
+    const result = await super.update(params);
+
+    // If we're changing sharing permissions on the collection then we need to
+    // remove all locally cached policies for documents in the collection as they
+    // are now invalid
+    if (params.sharing !== undefined) {
+      const collection = this.get(params.id);
+      if (collection) {
+        collection.documentIds.forEach((id) => {
+          this.rootStore.policies.remove(id);
+        });
+      }
+    }
+
+    return result;
+  }
+
   getPathForDocument(documentId: string): ?DocumentPath {
     return this.pathsToDocuments.find((path) => path.id === documentId);
   }
@@ -97,12 +122,12 @@ export default class CollectionsStore extends BaseStore<Collection> {
     if (path) return path.title;
   }
 
-  delete(collection: Collection) {
-    super.delete(collection);
+  delete = async (collection: Collection) => {
+    await super.delete(collection);
 
     this.rootStore.documents.fetchRecentlyUpdated();
     this.rootStore.documents.fetchRecentlyViewed();
-  }
+  };
 
   export = () => {
     return client.post("/collections.export_all");

app/stores/DocumentsStore.js

@@ -22,6 +22,7 @@ export default class DocumentsStore extends BaseStore<Document> {
   @observable movingDocumentId: ?string;
 
   importFileTypes: string[] = [
+    ".md",
     "text/markdown",
     "text/plain",
     "text/html",

app/stores/UiStore.js

@@ -21,7 +21,7 @@ class UiStore {
   @observable activeDocumentId: ?string;
   @observable activeCollectionId: ?string;
   @observable progressBarVisible: boolean = false;
-  @observable editMode: boolean = false;
+  @observable isEditing: boolean = false;
   @observable tocVisible: boolean = false;
   @observable mobileSidebarVisible: boolean = false;
   @observable sidebarWidth: number;
@@ -151,12 +151,12 @@ class UiStore {
 
   @action
   enableEditMode = () => {
-    this.editMode = true;
+    this.isEditing = true;
   };
 
   @action
   disableEditMode = () => {
-    this.editMode = false;
+    this.isEditing = false;
   };
 
   @action

app/stores/UsersStore.js

@@ -1,13 +1,21 @@
 // @flow
 import invariant from "invariant";
 import { filter, orderBy } from "lodash";
-import { computed, action, runInAction } from "mobx";
+import { observable, computed, action, runInAction } from "mobx";
 import User from "models/User";
 import BaseStore from "./BaseStore";
 import RootStore from "./RootStore";
 import { client } from "utils/ApiClient";
 
 export default class UsersStore extends BaseStore<User> {
+  @observable counts: {
+    active: number,
+    admins: number,
+    all: number,
+    invited: number,
+    suspended: number,
+  } = {};
+
   constructor(rootStore: RootStore) {
     super(rootStore, User);
   }
@@ -52,21 +60,25 @@ export default class UsersStore extends BaseStore<User> {
 
   @action
   promote = (user: User) => {
+    this.counts.admins += 1;
     return this.actionOnUser("promote", user);
   };
 
   @action
   demote = (user: User) => {
+    this.counts.admins -= 1;
     return this.actionOnUser("demote", user);
   };
 
   @action
   suspend = (user: User) => {
+    this.counts.suspended += 1;
     return this.actionOnUser("suspend", user);
   };
 
   @action
   activate = (user: User) => {
+    this.counts.suspended -= 1;
     return this.actionOnUser("activate", user);
   };
 
@@ -76,10 +88,39 @@ export default class UsersStore extends BaseStore<User> {
     invariant(res && res.data, "Data should be available");
     runInAction(`invite`, () => {
       res.data.users.forEach(this.add);
+      this.counts.invited += res.data.sent.length;
+      this.counts.all += res.data.sent.length;
     });
     return res.data;
   };
 
+  @action
+  fetchCounts = async (teamId: string): Promise<*> => {
+    const res = await client.post(`/users.count`, { teamId });
+    invariant(res && res.data, "Data should be available");
+
+    this.counts = res.data.counts;
+    return res.data;
+  };
+
+  @action
+  async delete(user: User, options: Object = {}) {
+    super.delete(user, options);
+    if (!user.isSuspended && user.lastActiveAt) {
+      this.counts.active -= 1;
+    }
+    if (user.isInvited) {
+      this.counts.invited -= 1;
+    }
+    if (user.isAdmin) {
+      this.counts.admins -= 1;
+    }
+    if (user.isSuspended) {
+      this.counts.suspended -= 1;
+    }
+    this.counts.all -= 1;
+  }
+
   notInCollection = (collectionId: string, query: string = "") => {
     const memberships = filter(
       this.rootStore.memberships.orderedData,

app/utils/ApiClient.js

@@ -1,6 +1,7 @@
 // @flow
 import invariant from "invariant";
 import { map, trim } from "lodash";
+import { getCookie } from "tiny-cookie";
 import stores from "stores";
 import download from "./download";
 import {
@@ -18,6 +19,11 @@ type Options = {
   baseUrl?: string,
 };
 
+// authorization cookie set by a Cloudflare Access proxy
+const CF_AUTHORIZATION = getCookie("CF_Authorization");
+// if the cookie is set, we must pass it with all ApiClient requests
+const CREDENTIALS = CF_AUTHORIZATION ? "same-origin" : "omit";
+
 class ApiClient {
   baseUrl: string;
   userAgent: string;
@@ -91,7 +97,7 @@ class ApiClient {
         body,
         headers,
         redirect: "follow",
-        credentials: "omit",
+        credentials: CREDENTIALS,
         cache: "no-cache",
       });
     } catch (err) {

app/utils/routeHelpers.js

@@ -74,7 +74,7 @@ export function searchUrl(
   let route = "/search";
 
   if (query) {
-    route += `/${encodeURIComponent(query)}`;
+    route += `/${encodeURIComponent(query.replace("%", "%25"))}`;
   }
 
   search = search ? `?${search}` : "";

app/utils/sentry.js

@@ -7,6 +7,8 @@ import env from "env";
 export function initSentry(history: RouterHistory) {
   Sentry.init({
     dsn: env.SENTRY_DSN,
+    environment: env.ENVIRONMENT,
+    release: env.RELEASE,
     integrations: [
       new Integrations.BrowserTracing({
         routingInstrumentation: Sentry.reactRouterV5Instrumentation(history),
@@ -14,6 +16,7 @@ export function initSentry(history: RouterHistory) {
     ],
     tracesSampleRate: process.env.NODE_ENV === "production" ? 0.1 : 1,
     ignoreErrors: [
+      "ResizeObserver loop completed with undelivered notifications",
       "ResizeObserver loop limit exceeded",
       "AuthorizationError",
       "BadRequestError",

app/utils/uploadFile.js

@@ -39,11 +39,13 @@ export const uploadFile = async (
     formData.append("file", file);
   }
 
-  await fetch(data.uploadUrl, {
+  const uploadResponse = await fetch(data.uploadUrl, {
     method: "post",
     body: formData,
   });
 
+  invariant(uploadResponse.ok, "Upload failed, try again?");
+
   return attachment;
 };
 

app/utils/urls.js

@@ -28,3 +28,9 @@ export function cdnPath(path: string): string {
 export function imagePath(path: string): string {
   return cdnPath(`/images/${path}`);
 }
+
+export function decodeURIComponentSafe(text: string) {
+  return text
+    ? decodeURIComponent(text.replace(/%(?![0-9][0-9a-fA-F]+)/g, "%25"))
+    : text;
+}

app/utils/urls.test.js

@@ -0,0 +1,14 @@
+// @flow
+import { decodeURIComponentSafe } from "./urls";
+
+describe("decodeURIComponentSafe", () => {
+  test("to handle % symbols", () => {
+    expect(decodeURIComponentSafe("%")).toBe("%");
+    expect(decodeURIComponentSafe("%25")).toBe("%");
+  });
+
+  test("to correctly account for encoded symbols", () => {
+    expect(decodeURIComponentSafe("%7D")).toBe("}");
+    expect(decodeURIComponentSafe("%2F")).toBe("/");
+  });
+});

flow-typed/npm/boundless-popover_vx.x.x.js

@@ -1,58 +0,0 @@
-// flow-typed signature: 81720de1e8cfea1529815ce45326fdff
-// flow-typed version: <<STUB>>/boundless-popover_v^1.0.4/flow_v0.104.0
-
-/**
- * This is an autogenerated libdef stub for:
- *
- *   'boundless-popover'
- *
- * Fill this stub out by replacing all the `any` types.
- *
- * Once filled out, we encourage you to share your work with the
- * community by sending a pull request to:
- * https://github.com/flowtype/flow-typed
- */
-
-declare module 'boundless-popover' {
-  declare module.exports: any;
-}
-
-/**
- * We include stubs for each file inside this npm package in case you need to
- * require those files directly. Feel free to delete any files that aren't
- * needed.
- */
-declare module 'boundless-popover/build' {
-  declare module.exports: any;
-}
-
-declare module 'boundless-popover/demo' {
-  declare module.exports: any;
-}
-
-declare module 'boundless-popover/index.spec' {
-  declare module.exports: any;
-}
-
-// Filename aliases
-declare module 'boundless-popover/build/index' {
-  declare module.exports: $Exports<'boundless-popover/build'>;
-}
-declare module 'boundless-popover/build/index.js' {
-  declare module.exports: $Exports<'boundless-popover/build'>;
-}
-declare module 'boundless-popover/demo/index' {
-  declare module.exports: $Exports<'boundless-popover/demo'>;
-}
-declare module 'boundless-popover/demo/index.js' {
-  declare module.exports: $Exports<'boundless-popover/demo'>;
-}
-declare module 'boundless-popover/index' {
-  declare module.exports: $Exports<'boundless-popover'>;
-}
-declare module 'boundless-popover/index.js' {
-  declare module.exports: $Exports<'boundless-popover'>;
-}
-declare module 'boundless-popover/index.spec.js' {
-  declare module.exports: $Exports<'boundless-popover/index.spec'>;
-}

package.json

@@ -67,9 +67,9 @@
     "@babel/preset-flow": "^7.10.4",
     "@babel/preset-react": "^7.10.4",
     "@rehooks/window-scroll-position": "^1.0.1",
-    "@sentry/node": "^5.23.0",
-    "@sentry/react": "^6.0.1",
-    "@sentry/tracing": "^6.0.1",
+    "@sentry/node": "^6.1.0",
+    "@sentry/react": "^6.1.0",
+    "@sentry/tracing": "^6.1.0",
     "@tippy.js/react": "^2.2.2",
     "@tommoor/remove-markdown": "0.3.1",
     "autotrack": "^2.4.1",
@@ -78,13 +78,13 @@
     "babel-plugin-styled-components": "^1.11.1",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "boundless-arrow-key-navigation": "^1.0.4",
-    "boundless-popover": "^1.0.4",
     "bull": "^3.5.2",
     "cancan": "3.1.0",
     "compressorjs": "^1.0.7",
     "copy-to-clipboard": "^3.0.6",
     "core-js": "2",
     "date-fns": "1.29.0",
+    "dd-trace": "^0.30.6",
     "debug": "^4.1.1",
     "dotenv": "^4.0.0",
     "emoji-regex": "^6.5.1",
@@ -127,7 +127,7 @@
     "mobx-react": "^6.2.5",
     "natural-sort": "^1.0.0",
     "nodemailer": "^4.4.0",
-    "outline-icons": "^1.24.0",
+    "outline-icons": "^1.25.1-1",
     "oy-vey": "^0.10.0",
     "pg": "^8.5.1",
     "pg-hstore": "^2.3.3",
@@ -154,7 +154,7 @@
     "react-waypoint": "^9.0.2",
     "react-window": "^1.8.6",
     "reakit": "^1.3.4",
-    "rich-markdown-editor": "^11.1.6",
+    "rich-markdown-editor": "^11.4.0-0",
     "semver": "^7.3.2",
     "sequelize": "^6.3.4",
     "sequelize-cli": "^6.2.0",
@@ -183,6 +183,7 @@
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.2.2",
     "babel-loader": "^8.1.0",
+    "babel-plugin-transform-inline-environment-variables": "^0.4.3",
     "eslint": "^7.6.0",
     "eslint-config-react-app": "3.0.6",
     "eslint-plugin-flowtype": "^5.2.0",
@@ -205,11 +206,13 @@
     "url-loader": "^0.6.2",
     "webpack": "4.44.1",
     "webpack-cli": "^3.3.12",
-    "webpack-manifest-plugin": "^3.0.0"
+    "webpack-manifest-plugin": "^3.0.0",
+    "webpack-pwa-manifest": "^4.3.0",
+    "workbox-webpack-plugin": "^6.1.0"
   },
   "resolutions": {
     "dot-prop": "^5.2.0",
     "js-yaml": "^3.13.1"
   },
-  "version": "0.52.0"
-}
+  "version": "0.53.1"
+}

public/manifest.json

@@ -1,20 +0,0 @@
-{
-  "short_name": "Outline",
-  "name": "Outline",
-  "icons": [
-    {
-      "src": "/icon-192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "/icon-512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": "/home?source=pwa",
-  "background_color": "#FFFFFF",
-  "display": "standalone",
-  "theme_color": "#FFFFFF"
-}

server/.babelrc

@@ -17,6 +17,15 @@
     ]
   ],
   "plugins": [
-    "transform-class-properties"
+    "transform-class-properties",
+    [
+      "transform-inline-environment-variables",
+      {
+        "include": [
+          "SOURCE_COMMIT",
+          "SOURCE_VERSION"
+        ]
+      }
+    ]
   ]
 }

server/api/__snapshots__/collections.test.js.snap

@@ -61,6 +61,15 @@ Object {
 }
 `;
 
+exports[`#collections.import should require authentication 1`] = `
+Object {
+  "error": "authentication_required",
+  "message": "Authentication required",
+  "ok": false,
+  "status": 401,
+}
+`;
+
 exports[`#collections.info should require authentication 1`] = `
 Object {
   "error": "authentication_required",

server/api/attachments.js

@@ -38,7 +38,7 @@ router.post("attachments.create", auth(), async (ctx) => {
   const key = `${bucket}/${user.id}/${s3Key}/${name}`;
   const credential = makeCredential();
   const longDate = format(new Date(), "YYYYMMDDTHHmmss\\Z");
-  const policy = makePolicy(credential, longDate, acl);
+  const policy = makePolicy(credential, longDate, acl, contentType);
   const endpoint = publicS3Endpoint();
   const url = `${endpoint}/${key}`;
 
@@ -85,6 +85,7 @@ router.post("attachments.create", auth(), async (ctx) => {
         documentId,
         contentType,
         name,
+        id: attachment.id,
         url: attachment.redirectUrl,
         size,
       },
@@ -138,6 +139,7 @@ router.post("attachments.redirect", auth(), async (ctx) => {
     if (attachment.documentId) {
       const document = await Document.findByPk(attachment.documentId, {
         userId: user.id,
+        paranoid: false,
       });
       authorize(user, "read", document);
     }

server/api/attachments.test.js

@@ -153,6 +153,31 @@ describe("#attachments.redirect", () => {
     expect(res.status).toEqual(302);
   });
 
+  it("should return a redirect for an attachment belonging to a trashed document user has access to", async () => {
+    const user = await buildUser();
+    const collection = await buildCollection({
+      teamId: user.teamId,
+      userId: user.id,
+    });
+    const document = await buildDocument({
+      teamId: user.teamId,
+      userId: user.id,
+      collectionId: collection.id,
+      deletedAt: new Date(),
+    });
+    const attachment = await buildAttachment({
+      documentId: document.id,
+      teamId: user.teamId,
+      userId: user.id,
+    });
+    const res = await server.post("/api/attachments.redirect", {
+      body: { token: user.getJwtToken(), id: attachment.id },
+      redirect: "manual",
+    });
+
+    expect(res.status).toEqual(302);
+  });
+
   it("should always return a redirect for a public attachment", async () => {
     const user = await buildUser();
     const collection = await buildCollection({

server/api/collections.js

@@ -2,7 +2,7 @@
 import fs from "fs";
 import Router from "koa-router";
 import { ValidationError } from "../errors";
-import { exportCollections } from "../logistics";
+import { exportCollections } from "../exporter";
 import auth from "../middlewares/authentication";
 import {
   Collection,
@@ -12,6 +12,7 @@ import {
   Event,
   User,
   Group,
+  Attachment,
 } from "../models";
 import policy from "../policies";
 import {
@@ -34,6 +35,7 @@ router.post("collections.create", auth(), async (ctx) => {
     name,
     color,
     description,
+    sharing,
     icon,
     sort = Collection.DEFAULT_SORT,
   } = ctx.body;
@@ -55,6 +57,7 @@ router.post("collections.create", auth(), async (ctx) => {
     teamId: user.teamId,
     createdById: user.id,
     private: isPrivate,
+    sharing,
     sort,
   });
 
@@ -96,6 +99,31 @@ router.post("collections.info", auth(), async (ctx) => {
   };
 });
 
+router.post("collections.import", auth(), async (ctx) => {
+  const { type, attachmentId } = ctx.body;
+  ctx.assertIn(type, ["outline"], "type must be one of 'outline'");
+  ctx.assertUuid(attachmentId, "attachmentId is required");
+
+  const user = ctx.state.user;
+  authorize(user, "import", Collection);
+
+  const attachment = await Attachment.findByPk(attachmentId);
+  authorize(user, "read", attachment);
+
+  await Event.create({
+    name: "collections.import",
+    modelId: attachmentId,
+    teamId: user.teamId,
+    actorId: user.id,
+    data: { type },
+    ip: ctx.request.ip,
+  });
+
+  ctx.body = {
+    success: true,
+  };
+});
+
 router.post("collections.add_group", auth(), async (ctx) => {
   const { id, groupId, permission = "read_write" } = ctx.body;
   ctx.assertUuid(id, "id is required");
@@ -452,7 +480,7 @@ router.post("collections.export_all", auth(), async (ctx) => {
 });
 
 router.post("collections.update", auth(), async (ctx) => {
-  let { id, name, description, icon, color, sort } = ctx.body;
+  let { id, name, description, icon, color, sort, sharing } = ctx.body;
   const isPrivate = ctx.body.private;
 
   if (color) {
@@ -498,6 +526,9 @@ router.post("collections.update", auth(), async (ctx) => {
   if (isPrivate !== undefined) {
     collection.private = isPrivate;
   }
+  if (sharing !== undefined) {
+    collection.sharing = sharing;
+  }
   if (sort !== undefined) {
     collection.sort = sort;
   }

server/api/collections.test.js

@@ -9,6 +9,7 @@ import {
   buildDocument,
 } from "../test/factories";
 import { flushdb, seed } from "../test/support";
+
 const server = new TestServer(app.callback());
 
 beforeEach(() => flushdb());
@@ -109,6 +110,26 @@ describe("#collections.list", () => {
   });
 });
 
+describe("#collections.import", () => {
+  it("should error if no attachmentId is passed", async () => {
+    const user = await buildUser();
+    const res = await server.post("/api/collections.import", {
+      body: {
+        token: user.getJwtToken(),
+      },
+    });
+    expect(res.status).toEqual(400);
+  });
+
+  it("should require authentication", async () => {
+    const res = await server.post("/api/collections.import");
+    const body = await res.json();
+
+    expect(res.status).toEqual(401);
+    expect(body).toMatchSnapshot();
+  });
+});
+
 describe("#collections.export", () => {
   it("should now allow export of private collection not a member", async () => {
     const { user } = await seed();
@@ -876,6 +897,18 @@ describe("#collections.create", () => {
     expect(body.policies[0].abilities.export).toBeTruthy();
   });
 
+  it("should allow setting sharing to false", async () => {
+    const { user } = await seed();
+    const res = await server.post("/api/collections.create", {
+      body: { token: user.getJwtToken(), name: "Test", sharing: false },
+    });
+    const body = await res.json();
+
+    expect(res.status).toEqual(200);
+    expect(body.data.id).toBeTruthy();
+    expect(body.data.sharing).toBe(false);
+  });
+
   it("should return correct policies with private collection", async () => {
     const { user } = await seed();
     const res = await server.post("/api/collections.create", {

server/api/documents.js

@@ -2,6 +2,7 @@
 import Router from "koa-router";
 import Sequelize from "sequelize";
 import { subtractDate } from "../../shared/utils/date";
+import documentCreator from "../commands/documentCreator";
 import documentImporter from "../commands/documentImporter";
 import documentMover from "../commands/documentMover";
 import {
@@ -488,6 +489,11 @@ async function loadDocument({ id, shareId, user }) {
       authorize(user, "read", document);
     }
 
+    const collection = await Collection.findByPk(document.collectionId);
+    if (!collection.sharing) {
+      throw new AuthorizationError();
+    }
+
     const team = await Team.findByPk(document.teamId);
     if (!team.sharing) {
       throw new AuthorizationError();
@@ -860,30 +866,6 @@ router.post("documents.unstar", auth(), async (ctx) => {
   };
 });
 
-router.post("documents.create", auth(), createDocumentFromContext);
-router.post("documents.import", auth(), async (ctx) => {
-  if (!ctx.is("multipart/form-data")) {
-    throw new InvalidRequestError("Request type must be multipart/form-data");
-  }
-
-  const file: any = Object.values(ctx.request.files)[0];
-  ctx.assertPresent(file, "file is required");
-
-  const user = ctx.state.user;
-  authorize(user, "create", Document);
-
-  const { text, title } = await documentImporter({
-    user,
-    file,
-    ip: ctx.request.ip,
-  });
-
-  ctx.body.text = text;
-  ctx.body.title = title;
-
-  await createDocumentFromContext(ctx);
-});
-
 router.post("documents.templatize", auth(), async (ctx) => {
   const { id } = ctx.body;
   ctx.assertPresent(id, "id is required");
@@ -1165,8 +1147,73 @@ router.post("documents.unpublish", auth(), async (ctx) => {
   };
 });
 
-// TODO: update to actual `ctx` type
-export async function createDocumentFromContext(ctx: any) {
+router.post("documents.import", auth(), async (ctx) => {
+  const { publish, collectionId, parentDocumentId, index } = ctx.body;
+
+  if (!ctx.is("multipart/form-data")) {
+    throw new InvalidRequestError("Request type must be multipart/form-data");
+  }
+
+  const file: any = Object.values(ctx.request.files)[0];
+  ctx.assertPresent(file, "file is required");
+
+  ctx.assertUuid(collectionId, "collectionId must be an uuid");
+  if (parentDocumentId) {
+    ctx.assertUuid(parentDocumentId, "parentDocumentId must be an uuid");
+  }
+
+  if (index) ctx.assertPositiveInteger(index, "index must be an integer (>=0)");
+
+  const user = ctx.state.user;
+  authorize(user, "create", Document);
+
+  const collection = await Collection.scope({
+    method: ["withMembership", user.id],
+  }).findOne({
+    where: {
+      id: collectionId,
+      teamId: user.teamId,
+    },
+  });
+  authorize(user, "publish", collection);
+
+  let parentDocument;
+  if (parentDocumentId) {
+    parentDocument = await Document.findOne({
+      where: {
+        id: parentDocumentId,
+        collectionId: collection.id,
+      },
+    });
+    authorize(user, "read", parentDocument, { collection });
+  }
+
+  const { text, title } = await documentImporter({
+    user,
+    file,
+    ip: ctx.request.ip,
+  });
+
+  const document = await documentCreator({
+    source: "import",
+    title,
+    text,
+    publish,
+    collectionId,
+    parentDocumentId,
+    index,
+    user,
+    ip: ctx.request.ip,
+  });
+  document.collection = collection;
+
+  return (ctx.body = {
+    data: await presentDocument(document),
+    policies: presentPolicies(user, [document]),
+  });
+});
+
+router.post("documents.create", auth(), async (ctx) => {
   const {
     title = "",
     text = "",
@@ -1216,56 +1263,25 @@ export async function createDocumentFromContext(ctx: any) {
     authorize(user, "read", templateDocument);
   }
 
-  let document = await Document.create({
+  const document = await documentCreator({
+    title,
+    text,
+    publish,
+    collectionId,
     parentDocumentId,
-    editorVersion,
-    collectionId: collection.id,
-    teamId: user.teamId,
-    userId: user.id,
-    lastModifiedById: user.id,
-    createdById: user.id,
+    templateDocument,
     template,
-    templateId: templateDocument ? templateDocument.id : undefined,
-    title: templateDocument ? templateDocument.title : title,
-    text: templateDocument ? templateDocument.text : text,
-  });
-
-  await Event.create({
-    name: "documents.create",
-    documentId: document.id,
-    collectionId: document.collectionId,
-    teamId: document.teamId,
-    actorId: user.id,
-    data: { title: document.title, templateId },
+    index,
+    user,
+    editorVersion,
     ip: ctx.request.ip,
   });
-
-  if (publish) {
-    await document.publish(user.id);
-
-    await Event.create({
-      name: "documents.publish",
-      documentId: document.id,
-      collectionId: document.collectionId,
-      teamId: document.teamId,
-      actorId: user.id,
-      data: { title: document.title },
-      ip: ctx.request.ip,
-    });
-  }
-
-  // reload to get all of the data needed to present (user, collection etc)
-  // we need to specify publishedAt to bypass default scope that only returns
-  // published documents
-  document = await Document.findOne({
-    where: { id: document.id, publishedAt: document.publishedAt },
-  });
   document.collection = collection;
 
   return (ctx.body = {
     data: await presentDocument(document),
     policies: presentPolicies(user, [document]),
   });
-}
+});
 
 export default router;

server/api/documents.test.js

@@ -112,6 +112,23 @@ describe("#documents.info", () => {
     expect(res.status).toEqual(403);
   });
 
+  it("should not return document from shareId if sharing is disabled for collection", async () => {
+    const { document, collection, user } = await seed();
+    const share = await buildShare({
+      documentId: document.id,
+      teamId: document.teamId,
+      userId: user.id,
+    });
+
+    collection.sharing = false;
+    await collection.save();
+
+    const res = await server.post("/api/documents.info", {
+      body: { shareId: share.id },
+    });
+    expect(res.status).toEqual(403);
+  });
+
   it("should not return document from revoked shareId", async () => {
     const { document, user } = await seed();
     const share = await buildShare({
@@ -1612,6 +1629,14 @@ describe("#documents.import", () => {
     });
     expect(res.status).toEqual(400);
   });
+
+  it("should require authentication", async () => {
+    const { document } = await seed();
+    const res = await server.post("/api/documents.import", {
+      body: { id: document.id },
+    });
+    expect(res.status).toEqual(401);
+  });
 });
 
 describe("#documents.create", () => {
@@ -1631,6 +1656,7 @@ describe("#documents.create", () => {
     expect(res.status).toEqual(200);
     expect(newDocument.parentDocumentId).toBe(null);
     expect(newDocument.collectionId).toBe(collection.id);
+    expect(body.policies[0].abilities.update).toEqual(true);
   });
 
   it("should not allow very long titles", async () => {
@@ -1663,6 +1689,7 @@ describe("#documents.create", () => {
 
     expect(res.status).toEqual(200);
     expect(body.data.title).toBe("new document");
+    expect(body.policies[0].abilities.update).toEqual(true);
   });
 
   it("should error with invalid parentDocument", async () => {
@@ -1697,6 +1724,7 @@ describe("#documents.create", () => {
 
     expect(res.status).toEqual(200);
     expect(body.data.title).toBe("new document");
+    expect(body.policies[0].abilities.update).toEqual(true);
   });
 });
 

server/api/events.js

@@ -2,7 +2,7 @@
 import Router from "koa-router";
 import Sequelize from "sequelize";
 import auth from "../middlewares/authentication";
-import { Event, Team, User } from "../models";
+import { Event, Team, User, Collection } from "../models";
 import policy from "../policies";
 import { presentEvent } from "../presenters";
 import pagination from "./middlewares/pagination";
@@ -12,30 +12,62 @@ const { authorize } = policy;
 const router = new Router();
 
 router.post("events.list", auth(), pagination(), async (ctx) => {
-  let { sort = "createdAt", direction, auditLog = false } = ctx.body;
-  if (direction !== "ASC") direction = "DESC";
-
   const user = ctx.state.user;
-  const collectionIds = await user.collectionIds({ paranoid: false });
+  let {
+    sort = "createdAt",
+    actorId,
+    collectionId,
+    direction,
+    name,
+    auditLog = false,
+  } = ctx.body;
+  if (direction !== "ASC") direction = "DESC";
 
   let where = {
     name: Event.ACTIVITY_EVENTS,
     teamId: user.teamId,
-    [Op.or]: [
-      { collectionId: collectionIds },
-      {
-        collectionId: {
-          [Op.eq]: null,
-        },
-      },
-    ],
   };
 
+  if (actorId) {
+    ctx.assertUuid(actorId, "actorId must be a UUID");
+    where = {
+      ...where,
+      actorId,
+    };
+  }
+
+  if (collectionId) {
+    ctx.assertUuid(collectionId, "collection must be a UUID");
+
+    where = { ...where, collectionId };
+    const collection = await Collection.scope({
+      method: ["withMembership", user.id],
+    }).findByPk(collectionId);
+    authorize(user, "read", collection);
+  } else {
+    const collectionIds = await user.collectionIds({ paranoid: false });
+    where = {
+      ...where,
+      [Op.or]: [
+        { collectionId: collectionIds },
+        {
+          collectionId: {
+            [Op.eq]: null,
+          },
+        },
+      ],
+    };
+  }
+
   if (auditLog) {
     authorize(user, "auditLog", Team);
     where.name = Event.AUDIT_EVENTS;
   }
 
+  if (name && where.name.includes(name)) {
+    where.name = name;
+  }
+
   const events = await Event.findAll({
     where,
     order: [[sort, direction]],

server/api/events.test.js

@@ -13,7 +13,7 @@ describe("#events.list", () => {
   it("should only return activity events", async () => {
     const { user, admin, document, collection } = await seed();
 
-    // private event
+    // audit event
     await buildEvent({
       name: "users.promote",
       teamId: user.teamId,
@@ -29,6 +29,7 @@ describe("#events.list", () => {
       teamId: user.teamId,
       actorId: admin.id,
     });
+
     const res = await server.post("/api/events.list", {
       body: { token: user.getJwtToken() },
     });
@@ -39,6 +40,100 @@ describe("#events.list", () => {
     expect(body.data[0].id).toEqual(event.id);
   });
 
+  it("should return audit events", async () => {
+    const { user, admin, document, collection } = await seed();
+
+    // audit event
+    const auditEvent = await buildEvent({
+      name: "users.promote",
+      teamId: user.teamId,
+      actorId: admin.id,
+      userId: user.id,
+    });
+
+    // event viewable in activity stream
+    const event = await buildEvent({
+      name: "documents.publish",
+      collectionId: collection.id,
+      documentId: document.id,
+      teamId: user.teamId,
+      actorId: admin.id,
+    });
+
+    const res = await server.post("/api/events.list", {
+      body: { token: admin.getJwtToken(), auditLog: true },
+    });
+    const body = await res.json();
+
+    expect(res.status).toEqual(200);
+    expect(body.data.length).toEqual(2);
+    expect(body.data[0].id).toEqual(event.id);
+    expect(body.data[1].id).toEqual(auditEvent.id);
+  });
+
+  it("should allow filtering by actorId", async () => {
+    const { user, admin, document, collection } = await seed();
+
+    // audit event
+    const auditEvent = await buildEvent({
+      name: "users.promote",
+      teamId: user.teamId,
+      actorId: admin.id,
+      userId: user.id,
+    });
+
+    // event viewable in activity stream
+    await buildEvent({
+      name: "documents.publish",
+      collectionId: collection.id,
+      documentId: document.id,
+      teamId: user.teamId,
+      actorId: user.id,
+    });
+
+    const res = await server.post("/api/events.list", {
+      body: { token: admin.getJwtToken(), auditLog: true, actorId: admin.id },
+    });
+    const body = await res.json();
+
+    expect(res.status).toEqual(200);
+    expect(body.data.length).toEqual(1);
+    expect(body.data[0].id).toEqual(auditEvent.id);
+  });
+
+  it("should allow filtering by event name", async () => {
+    const { user, admin, document, collection } = await seed();
+
+    // audit event
+    await buildEvent({
+      name: "users.promote",
+      teamId: user.teamId,
+      actorId: admin.id,
+      userId: user.id,
+    });
+
+    // event viewable in activity stream
+    const event = await buildEvent({
+      name: "documents.publish",
+      collectionId: collection.id,
+      documentId: document.id,
+      teamId: user.teamId,
+      actorId: user.id,
+    });
+
+    const res = await server.post("/api/events.list", {
+      body: {
+        token: user.getJwtToken(),
+        name: "documents.publish",
+      },
+    });
+    const body = await res.json();
+
+    expect(res.status).toEqual(200);
+    expect(body.data.length).toEqual(1);
+    expect(body.data[0].id).toEqual(event.id);
+  });
+
   it("should return events with deleted actors", async () => {
     const { user, admin, document, collection } = await seed();
 
@@ -64,6 +159,15 @@ describe("#events.list", () => {
     expect(body.data[0].id).toEqual(event.id);
   });
 
+  it("should require authorization for audit events", async () => {
+    const { user } = await seed();
+    const res = await server.post("/api/events.list", {
+      body: { token: user.getJwtToken(), auditLog: true },
+    });
+
+    expect(res.status).toEqual(403);
+  });
+
   it("should require authentication", async () => {
     const res = await server.post("/api/events.list");
     const body = await res.json();

server/api/shares.test.js

@@ -202,7 +202,7 @@ describe("#shares.create", () => {
     expect(body.data.id).toBe(share.id);
   });
 
-  it("should not allow creating a share record if disabled", async () => {
+  it("should not allow creating a share record if team sharing disabled", async () => {
     const { user, document, team } = await seed();
     await team.update({ sharing: false });
     const res = await server.post("/api/shares.create", {
@@ -211,6 +211,15 @@ describe("#shares.create", () => {
     expect(res.status).toEqual(403);
   });
 
+  it("should not allow creating a share record if collection sharing disabled", async () => {
+    const { user, collection, document } = await seed();
+    await collection.update({ sharing: false });
+    const res = await server.post("/api/shares.create", {
+      body: { token: user.getJwtToken(), documentId: document.id },
+    });
+    expect(res.status).toEqual(403);
+  });
+
   it("should require authentication", async () => {
     const { document } = await seed();
     const res = await server.post("/api/shares.create", {

server/api/users.js

@@ -55,6 +55,17 @@ router.post("users.list", auth(), pagination(), async (ctx) => {
   };
 });
 
+router.post("users.count", auth(), async (ctx) => {
+  const { user } = ctx.state;
+  const counts = await User.getCounts(user.teamId);
+
+  ctx.body = {
+    data: {
+      counts,
+    },
+  };
+});
+
 router.post("users.info", auth(), async (ctx) => {
   ctx.body = {
     data: presentUser(ctx.state.user),
@@ -184,8 +195,9 @@ router.post("users.invite", auth(), async (ctx) => {
   const { invites } = ctx.body;
   ctx.assertPresent(invites, "invites is required");
 
-  const user = ctx.state.user;
-  authorize(user, "invite", User);
+  const { user } = ctx.state;
+  const team = await Team.findByPk(user.teamId);
+  authorize(user, "invite", team);
 
   const response = await userInviter({ user, invites, ip: ctx.request.ip });