fix: Embed frame alignment

fix: Image improvements
fix: Image upload race condition

.circleci/config.yml

@@ -1,4 +1,12 @@
-version: 2
+version: 2.1
+
+executors:
+  docker-publisher:
+    environment:
+      IMAGE_NAME: outlinewiki/outline
+    docker:
+      - image: circleci/buildpack-deps:stretch
+
 jobs:
   build:
     working_directory: ~/outline
@@ -40,4 +48,88 @@ jobs:
           command: yarn test
       - run:
           name: build-webpack
-          command: yarn build:webpack
+          command: yarn build:webpack
+  build-image:
+    executor: docker-publisher
+    steps:
+      - checkout
+      - setup_remote_docker:
+          version: 20.10.6
+      - run:
+          name: Build Docker image
+          command: docker build -t $IMAGE_NAME:latest .
+      - run:
+          name: Archive Docker image
+          command: docker save -o image.tar $IMAGE_NAME
+      - persist_to_workspace:
+          root: .
+          paths:
+            - ./image.tar
+  publish-latest:
+    executor: docker-publisher
+    steps:
+      - attach_workspace:
+          at: /tmp/workspace
+      - setup_remote_docker:
+          version: 20.10.6
+      - run:
+          name: Load archived Docker image
+          command: docker load -i /tmp/workspace/image.tar
+      - run:
+          name: Publish Docker Image to Docker Hub
+          command: |
+            echo "$DOCKERHUB_PASS" | docker login -u "$DOCKERHUB_USERNAME" --password-stdin
+            IMAGE_TAG=${CIRCLE_TAG/v/''}
+            docker tag $IMAGE_NAME:latest $IMAGE_NAME:$IMAGE_TAG
+            docker push $IMAGE_NAME:latest
+            docker push $IMAGE_NAME:$IMAGE_TAG
+  publish-tag:
+    executor: docker-publisher
+    steps:
+      - attach_workspace:
+          at: /tmp/workspace
+      - setup_remote_docker:
+          version: 20.10.6
+      - run:
+          name: Load archived Docker image
+          command: docker load -i /tmp/workspace/image.tar
+      - run:
+          name: Publish Docker Image to Docker Hub
+          command: |
+            echo "$DOCKERHUB_PASS" | docker login -u "$DOCKERHUB_USERNAME" --password-stdin
+            IMAGE_TAG=${CIRCLE_TAG/v/''}
+            docker tag $IMAGE_NAME:latest $IMAGE_NAME:$IMAGE_TAG
+            docker push $IMAGE_NAME:$IMAGE_TAG
+
+workflows:
+  version: 2
+  build-and-test:
+    jobs:
+      - build:
+          filters:
+            tags:
+              ignore: /^v.*/
+  build-docker:
+    jobs:
+      - build-image:
+          filters:
+            tags:
+              only: /^v.*/
+            branches:
+              ignore: /.*/
+      - publish-latest:
+          requires:
+            - build-image
+          filters:
+            tags:
+              only: /^v\d+\.\d+\.\d+$/
+            branches:
+              ignore: /.*/
+      - publish-tag:
+          requires:
+            - build-image
+          filters:
+            tags:
+              only: /^v\d+\.\d+\.\d+-.*$/
+            branches:
+              ignore: /.*/

.env.sample

@@ -1,6 +1,6 @@
-# 👋 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 
+# 👋 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.
 
 
@@ -12,7 +12,7 @@
 # in your terminal to generate a random value.
 SECRET_KEY=generate_a_new_key
 
-# Generate a unique random key. The format is not important but you could still use 
+# Generate a unique random key. The format is not important but you could still use
 # `openssl rand -hex 32` in your terminal to produce this.
 UTILS_SECRET=generate_a_new_key
 
@@ -29,9 +29,13 @@ REDIS_URL=redis://localhost:6479
 URL=http://localhost:3000
 PORT=3000
 
+# ALPHA – See [documentation](docs/SERVICES.md) on running the alpha version of
+# the collaboration server.
+COLLABORATION_URL=
+
 # 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 
+# 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:
@@ -69,24 +73,38 @@ SLACK_SECRET=get_the_secret_of_above_key
 GOOGLE_CLIENT_ID=
 GOOGLE_CLIENT_SECRET=
 
-# To configure Microsoft/Azure auth, you'll need to create an OAuth Client. See 
+# To configure Microsoft/Azure auth, you'll need to create an OAuth Client. See
 # the guide for details on setting up your Azure App:
 # => https://wiki.generaloutline.com/share/dfa77e56-d4d2-4b51-8ff8-84ea6608faa4
-AZURE_CLIENT_ID= 
+AZURE_CLIENT_ID=
 AZURE_CLIENT_SECRET=
 AZURE_RESOURCE_APP_ID=
 
+# To configure generic OIDC auth, you'll need some kind of identity provider.
+# See documentation for whichever IdP you use to acquire the following info:
+# Redirect URI is https://<URL>/auth/oidc.callback
+OIDC_CLIENT_ID=
+OIDC_CLIENT_SECRET=
+OIDC_AUTH_URI=
+OIDC_TOKEN_URI=
+OIDC_USERINFO_URI=
+
+# Display name for OIDC authentication
+OIDC_DISPLAY_NAME=OpenID Connect
+
+# Space separated auth scopes.
+OIDC_SCOPES=openid profile email
 
 
 # –––––––––––––––– 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 
+# 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 
+# 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
 
@@ -104,13 +122,13 @@ MAXIMUM_IMPORT_SIZE=5120000
 
 # You may enable or disable debugging categories to increase the noisiness of
 # logs. The default is a good balance
-DEBUG=cache,presenters,events,emails,mailer,utils,http,server,services
+DEBUG=cache,presenters,events,emails,mailer,utils,http,server,processors
 
 # Comma separated list of domains to be allowed to signin to the wiki. If not
 # set, all domains are allowed by default when using Google OAuth to signin
 ALLOWED_DOMAINS=
 
-# For a complete Slack integration with search and posting to channels the 
+# 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
 #
@@ -118,13 +136,13 @@ SLACK_VERIFICATION_TOKEN=your_token
 SLACK_APP_ID=A0XXXXXXX
 SLACK_MESSAGE_ACTIONS=true
 
-# Optionally enable google analytics to track pageviews in the knowledge base 
+# Optionally enable google analytics to track pageviews in the knowledge base
 GOOGLE_ANALYTICS_ID=
 
 # Optionally enable Sentry (sentry.io) to track errors and performance
 SENTRY_DSN=
 
-# To support sending outgoing transactional emails such as "document updated" or 
+# 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=
@@ -138,6 +156,6 @@ SMTP_SECURE=true
 # Custom logo that displays on the authentication screen, scaled to height: 60px
 # TEAM_LOGO=https://example.com/images/logo.png
 
-# The default interface language. See translate.getoutline.com for a list of 
+# The default interface language. See translate.getoutline.com for a list of
 # available language codes and their rough percentage translated.
 DEFAULT_LANGUAGE=en_US

.flowconfig

@@ -11,6 +11,11 @@
 .*/node_modules/react-side-effect/.*
 .*/node_modules/fbjs/.*
 .*/node_modules/config-chain/.*
+.*/node_modules/yjs/.*
+.*/node_modules/y-prosemirror/.*
+.*/node_modules/y-protocols/.*
+.*/node_modules/y-indexeddb/.*
+.*/node_modules/lib0/.*
 .*/server/scripts/.*
 *.test.js
 

Dockerfile

@@ -1,23 +1,50 @@
-FROM node:14-alpine
+# syntax=docker/dockerfile:1.2
+ARG APP_PATH=/opt/outline
+FROM node:14-alpine AS deps-common
 
-ENV APP_PATH /opt/outline
-RUN mkdir -p $APP_PATH
+ARG APP_PATH
+WORKDIR $APP_PATH
+COPY ./package.json ./yarn.lock ./
 
+# ---
+FROM deps-common AS deps-dev
+RUN yarn install --no-optional --frozen-lockfile && \
+  yarn cache clean
+
+# ---
+FROM deps-common AS deps-prod
+RUN yarn install --production=true --frozen-lockfile && \
+  yarn cache clean
+
+# ---
+FROM node:14-alpine AS builder
+
+ARG APP_PATH
 WORKDIR $APP_PATH
 
-COPY package.json ./
-COPY yarn.lock ./
-
-RUN yarn --pure-lockfile
-
 COPY . .
+COPY --from=deps-dev $APP_PATH/node_modules ./node_modules
+RUN yarn build
 
-RUN yarn build && \
-  yarn --production --ignore-scripts --prefer-offline && \
-  rm -rf shared && \
-  rm -rf app
+# ---
+FROM node:14-alpine AS runner
 
+ARG APP_PATH
+WORKDIR $APP_PATH
 ENV NODE_ENV production
-CMD yarn start
+
+COPY --from=builder $APP_PATH/build ./build
+COPY --from=builder $APP_PATH/server ./server
+COPY --from=builder $APP_PATH/public ./public
+COPY --from=builder $APP_PATH/.sequelizerc ./.sequelizerc
+COPY --from=deps-prod $APP_PATH/node_modules ./node_modules
+COPY --from=builder $APP_PATH/package.json ./package.json
+
+RUN addgroup -g 1001 -S nodejs && \
+  adduser -S nodejs -u 1001 && \
+  chown -R nodejs:nodejs $APP_PATH/build
+
+USER nodejs
 
 EXPOSE 3000
+CMD ["yarn", "start"]

Makefile

@@ -2,7 +2,7 @@ up:
 	docker-compose up -d redis postgres s3
 	yarn install --pure-lockfile
 	yarn sequelize db:migrate
-	yarn dev
+	yarn dev:watch
 
 build:
 	docker-compose build --pull outline

Procfile

@@ -1 +1,2 @@
-web: node ./build/server/index.js
+web: yarn start --services=web,websockets
+worker: yarn start --services=worker

README.md

@@ -1,5 +1,3 @@
-
-
 <p align="center">
   <img src="https://user-images.githubusercontent.com/31465/34380645-bd67f474-eb0b-11e7-8d03-0151c1730654.png" height="29" />
 </p>
@@ -30,7 +28,6 @@ Outline requires the following dependencies:
 - AWS S3 bucket or compatible API for file storage
 - Slack or Google developer application for authentication
 
-
 ## Self-Hosted Production
 
 ### Docker
@@ -41,16 +38,20 @@ For a manual self-hosted production installation these are the recommended steps
 1. Download the latest official Docker image, new releases are available around the middle of every month:
 
    `docker pull outlinewiki/outline`
+
 1. Using the [.env.sample](.env.sample) as a reference, set the required variables in your production environment. You can export the environment variables directly, or create a `.env` file and pass it to the docker image like so:
 
    `docker run --env-file=.env outlinewiki/outline`
+
 1. Setup the database with `yarn db:migrate`. Production assumes an SSL connection to the database by default, if
-Postgres is on the same machine and is not SSL you can migrate with `yarn db:migrate --env=production-ssl-disabled`, for example:
+   Postgres is on the same machine and is not SSL you can migrate with `yarn db:migrate --env=production-ssl-disabled`, for example:
 
    `docker run --rm outlinewiki/outline yarn db:migrate`
+
 1. Start the container:
 
    `docker run outlinewiki/outline`
+
 1. Visit http://you_server_ip:3000 and you should be able to see Outline page
 
    > Port number can be changed using the `PORT` environment variable
@@ -79,29 +80,27 @@ If you're running Outline by cloning this repository, run the following command
 yarn run upgrade
 ```
 
-
 ## Local Development
 
 For contributing features and fixes you can quickly get an environment running using Docker by following these steps:
 
 1. Install these dependencies if you don't already have them
-    1. [Docker for Desktop](https://www.docker.com)
-    1. [Node.js](https://nodejs.org/) (v12 LTS preferred)
-    1. [Yarn](https://yarnpkg.com)
+   1. [Docker for Desktop](https://www.docker.com)
+   1. [Node.js](https://nodejs.org/) (v12 LTS preferred)
+   1. [Yarn](https://yarnpkg.com)
 1. Clone this repo
 1. Register a Slack app at https://api.slack.com/apps
 1. Copy the file `.env.sample` to `.env`
 1. Fill out the following fields:
-    1. `SECRET_KEY` (follow instructions in the comments at the top of `.env`)
-    1. `SLACK_KEY` (this is called "Client ID" in Slack admin)
-    1. `SLACK_SECRET` (this is called "Client Secret" in Slack admin)
-1. Configure your Slack app's Oauth & Permissions settings 
-    1. Slack recently prevented the use of `http` protocol for localhost. For local development, you can use a tool like [ngrok](https://ngrok.com) or a package like `mkcert`. ([How to use HTTPS for local development](https://web.dev/how-to-use-local-https/))
-    1. Add `https://my_ngrok_address/auth/slack.callback` as an Oauth redirect URL
-    1. Ensure that the bot token scope contains at least `users:read`
+   1. `SECRET_KEY` (follow instructions in the comments at the top of `.env`)
+   1. `SLACK_KEY` (this is called "Client ID" in Slack admin)
+   1. `SLACK_SECRET` (this is called "Client Secret" in Slack admin)
+1. Configure your Slack app's Oauth & Permissions settings
+   1. Slack recently prevented the use of `http` protocol for localhost. For local development, you can use a tool like [ngrok](https://ngrok.com) or a package like `mkcert`. ([How to use HTTPS for local development](https://web.dev/how-to-use-local-https/))
+   1. Add `https://my_ngrok_address/auth/slack.callback` as an Oauth redirect URL
+   1. Ensure that the bot token scope contains at least `users:read`
 1. Run `make up`. This will download dependencies, build and launch a development version of Outline
 
-
 # Contributing
 
 Outline is built and maintained by a small team – we'd love your help to fix bugs and add features!
@@ -110,18 +109,16 @@ Before submitting a pull request please let the core team know by creating or co
 
 If you’re looking for ways to get started, here's a list of ways to help us improve Outline:
 
-* [Translation](TRANSLATION.md) into other languages
-* Issues with [`good first issue`](https://github.com/outline/outline/labels/good%20first%20issue) label
-* Performance improvements, both on server and frontend
-* Developer happiness and documentation
-* Bugs and other issues listed on GitHub
-
+- [Translation](docs/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.
-
+please refer to the [architecture document](docs/ARCHITECTURE.md) first for a high level overview of how the application is put together.
 
 ## Debugging
 
@@ -145,7 +142,7 @@ make test
 make watch
 ```
 
-Once the test database is created with  `make test` you may individually run
+Once the test database is created with `make test` you may individually run
 frontend and backend tests directly.
 
 ```shell

app/components/Button.js

@@ -66,7 +66,11 @@ const RealButton = styled.button`
     
 
     &:hover {
-      background: ${darken(0.05, props.theme.buttonNeutralBackground)};
+      background: ${
+        props.borderOnHover
+          ? props.theme.buttonNeutralBackground
+          : darken(0.05, props.theme.buttonNeutralBackground)
+      };
       box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, ${
         props.theme.buttonNeutralBorder
       } 0 0 0 1px inset;
@@ -124,11 +128,11 @@ export type Props = {|
   fullwidth?: boolean,
   autoFocus?: boolean,
   style?: Object,
-  as?: React.ComponentType<any>,
+  as?: React.ComponentType<any> | string,
   to?: string,
   onClick?: (event: SyntheticEvent<>) => mixed,
   borderOnHover?: boolean,
-
+  href?: string,
   "data-on"?: string,
   "data-event-category"?: string,
   "data-event-action"?: string,

app/components/ConnectionStatus.js

@@ -0,0 +1,59 @@
+// @flow
+import { observer } from "mobx-react";
+import { DisconnectedIcon } from "outline-icons";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import styled, { useTheme } from "styled-components";
+import breakpoint from "styled-components-breakpoint";
+import Fade from "components/Fade";
+import NudeButton from "components/NudeButton";
+import Tooltip from "components/Tooltip";
+import useStores from "hooks/useStores";
+
+function ConnectionStatus() {
+  const { ui } = useStores();
+  const theme = useTheme();
+  const { t } = useTranslation();
+
+  return ui.multiplayerStatus === "connecting" ||
+    ui.multiplayerStatus === "disconnected" ? (
+    <Tooltip
+      tooltip={
+        <Centered>
+          <strong>{t("Server connection lost")}</strong>
+          <br />
+          {t("Edits you make will sync once you’re online")}
+        </Centered>
+      }
+      placement="bottom"
+    >
+      <Button>
+        <Fade>
+          <DisconnectedIcon color={theme.sidebarText} />
+        </Fade>
+      </Button>
+    </Tooltip>
+  ) : null;
+}
+
+const Button = styled(NudeButton)`
+  display: none;
+  position: fixed;
+  bottom: 0;
+  right: 32px;
+  margin: 24px;
+
+  ${breakpoint("tablet")`
+    display: block;
+  `};
+
+  @media print {
+    display: none;
+  }
+`;
+
+const Centered = styled.div`
+  text-align: center;
+`;
+
+export default observer(ConnectionStatus);

app/components/ContextMenu/MenuItem.js

@@ -4,6 +4,7 @@ import * as React from "react";
 import { MenuItem as BaseMenuItem } from "reakit/Menu";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
+import MenuIconWrapper from "../MenuIconWrapper";
 
 type Props = {|
   onClick?: (SyntheticEvent<>) => void | Promise<void>,
@@ -16,6 +17,7 @@ type Props = {|
   as?: string | React.ComponentType<*>,
   hide?: () => void,
   level?: number,
+  icon?: React.Node,
 |};
 
 const MenuItem = ({
@@ -25,6 +27,7 @@ const MenuItem = ({
   disabled,
   as,
   hide,
+  icon,
   ...rest
 }: Props) => {
   const handleClick = React.useCallback(
@@ -71,6 +74,7 @@ const MenuItem = ({
               &nbsp;
             </>
           )}
+          {icon && <MenuIconWrapper>{icon}</MenuIconWrapper>}
           {children}
         </MenuAnchor>
       )}
@@ -130,8 +134,8 @@ export const MenuAnchor = styled.a`
   `};
 
   ${breakpoint("tablet")`
-    padding: ${(props) => (props.$toggleable ? "4px 12px" : "6px 12px")};
-    font-size: 15px;
+    padding: 4px 12px;
+    font-size: 14px;
   `};
 `;
 

app/components/ContextMenu/Template.js

@@ -9,6 +9,8 @@ import {
   MenuItem as BaseMenuItem,
 } from "reakit/Menu";
 import styled from "styled-components";
+import Flex from "components/Flex";
+import MenuIconWrapper from "components/MenuIconWrapper";
 import Header from "./Header";
 import MenuItem, { MenuAnchor } from "./MenuItem";
 import Separator from "./Separator";
@@ -67,7 +69,15 @@ export function filterTemplateItems(items: TMenuItem[]): TMenuItem[] {
 }
 
 function Template({ items, ...menu }: Props): React.Node {
-  return filterTemplateItems(items).map((item, index) => {
+  const filteredTemplates = filterTemplateItems(items);
+  const iconIsPresentInAnyMenuItem = filteredTemplates.find(
+    (item) => !!item.icon
+  );
+
+  return filteredTemplates.map((item, index) => {
+    if (iconIsPresentInAnyMenuItem)
+      item.icon = item.icon ? item.icon : <MenuIconWrapper />;
+
     if (item.to) {
       return (
         <MenuItem
@@ -76,6 +86,7 @@ function Template({ items, ...menu }: Props): React.Node {
           key={index}
           disabled={item.disabled}
           selected={item.selected}
+          icon={item.icon}
           {...menu}
         >
           {item.title}
@@ -92,6 +103,7 @@ function Template({ items, ...menu }: Props): React.Node {
           selected={item.selected}
           level={item.level}
           target={item.href.startsWith("#") ? undefined : "_blank"}
+          icon={item.icon}
           {...menu}
         >
           {item.title}
@@ -107,6 +119,7 @@ function Template({ items, ...menu }: Props): React.Node {
           disabled={item.disabled}
           selected={item.selected}
           key={index}
+          icon={item.icon}
           {...menu}
         >
           {item.title}
@@ -120,7 +133,7 @@ function Template({ items, ...menu }: Props): React.Node {
           key={index}
           as={Submenu}
           templateItems={item.items}
-          title={item.title}
+          title={<Title title={item.title} icon={item.icon} />}
           {...menu}
         />
       );
@@ -139,4 +152,13 @@ function Template({ items, ...menu }: Props): React.Node {
   });
 }
 
+function Title({ title, icon }) {
+  return (
+    <Flex align="center">
+      {icon && <MenuIconWrapper>{icon}</MenuIconWrapper>}
+      {title}
+    </Flex>
+  );
+}
+
 export default React.memo<Props>(Template);

app/components/DocumentHistory.js

@@ -0,0 +1,124 @@
+// @flow
+import { observer } from "mobx-react";
+import { CloseIcon } from "outline-icons";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { useHistory, useRouteMatch } from "react-router-dom";
+import styled from "styled-components";
+import breakpoint from "styled-components-breakpoint";
+import Event from "models/Event";
+import Button from "components/Button";
+import Empty from "components/Empty";
+import Flex from "components/Flex";
+import PaginatedEventList from "components/PaginatedEventList";
+import Scrollable from "components/Scrollable";
+import useStores from "hooks/useStores";
+import { documentUrl } from "utils/routeHelpers";
+
+const EMPTY_ARRAY = [];
+
+function DocumentHistory() {
+  const { events, documents } = useStores();
+  const { t } = useTranslation();
+  const match = useRouteMatch();
+  const history = useHistory();
+
+  const document = documents.getByUrl(match.params.documentSlug);
+  const eventsInDocument = document
+    ? events.inDocument(document.id)
+    : EMPTY_ARRAY;
+
+  const onCloseHistory = () => {
+    history.push(documentUrl(document));
+  };
+
+  const items = React.useMemo(() => {
+    if (
+      eventsInDocument[0] &&
+      document &&
+      eventsInDocument[0].createdAt !== document.updatedAt
+    ) {
+      eventsInDocument.unshift(
+        new Event({
+          name: "documents.latest_version",
+          documentId: document.id,
+          createdAt: document.updatedAt,
+          actor: document.updatedBy,
+        })
+      );
+    }
+
+    return eventsInDocument;
+  }, [eventsInDocument, document]);
+
+  return (
+    <Sidebar>
+      {document ? (
+        <Position column>
+          <Header>
+            <Title>{t("History")}</Title>
+            <Button
+              icon={<CloseIcon />}
+              onClick={onCloseHistory}
+              borderOnHover
+              neutral
+            />
+          </Header>
+          <Scrollable topShadow>
+            <PaginatedEventList
+              fetch={events.fetchPage}
+              events={items}
+              options={{ documentId: document.id }}
+              document={document}
+              empty={<Empty>{t("Oh weird, there's nothing here")}</Empty>}
+            />
+          </Scrollable>
+        </Position>
+      ) : null}
+    </Sidebar>
+  );
+}
+
+const Position = styled(Flex)`
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  width: ${(props) => props.theme.sidebarWidth}px;
+`;
+
+const Sidebar = styled(Flex)`
+  display: none;
+  position: relative;
+  flex-shrink: 0;
+  background: ${(props) => props.theme.background};
+  width: ${(props) => props.theme.sidebarWidth}px;
+  border-left: 1px solid ${(props) => props.theme.divider};
+  z-index: 1;
+
+  ${breakpoint("tablet")`
+    display: flex;
+  `};
+`;
+
+const Title = styled(Flex)`
+  font-size: 16px;
+  font-weight: 600;
+  text-align: center;
+  align-items: center;
+  justify-content: flex-start;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  width: 0;
+  flex-grow: 1;
+`;
+
+const Header = styled(Flex)`
+  align-items: center;
+  position: relative;
+  padding: 12px;
+  color: ${(props) => props.theme.text};
+  flex-shrink: 0;
+`;
+
+export default observer(DocumentHistory);

app/components/DocumentHistory/DocumentHistory.js

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

app/components/DocumentHistory/components/Revision.js

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

app/components/DocumentHistory/index.js

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

app/components/DocumentListItem.js

@@ -66,6 +66,7 @@ function DocumentListItem(props: Props, ref) {
   const canStar =
     !document.isDraft && !document.isArchived && !document.isTemplate;
   const can = policies.abilities(currentTeam.id);
+  const canCollection = policies.abilities(document.collectionId);
 
   return (
     <DocumentLink
@@ -126,7 +127,8 @@ function DocumentListItem(props: Props, ref) {
         {document.isTemplate &&
           !document.isArchived &&
           !document.isDeleted &&
-          can.createDocument && (
+          can.createDocument &&
+          canCollection.update && (
             <>
               <Button
                 as={Link}

app/components/Editor.js

@@ -3,12 +3,13 @@ import { lighten } from "polished";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { withRouter, type RouterHistory } from "react-router-dom";
+import { Extension } from "rich-markdown-editor";
 import styled, { withTheme } from "styled-components";
+import embeds from "shared/embeds";
 import { light } from "shared/theme";
 import UiStore from "stores/UiStore";
 import ErrorBoundary from "components/ErrorBoundary";
 import Tooltip from "components/Tooltip";
-import embeds from "../embeds";
 import useMediaQuery from "hooks/useMediaQuery";
 import useToasts from "hooks/useToasts";
 import { type Theme } from "types";
@@ -30,6 +31,8 @@ export type Props = {|
   grow?: boolean,
   disableEmbeds?: boolean,
   ui?: UiStore,
+  style?: Object,
+  extensions?: Extension[],
   shareId?: ?string,
   autoFocus?: boolean,
   template?: boolean,
@@ -246,6 +249,50 @@ const StyledEditor = styled(RichMarkdownEditor)`
       }
     }
   }
+
+  .ProseMirror {
+    .ProseMirror-yjs-cursor {
+      position: relative;
+      margin-left: -1px;
+      margin-right: -1px;
+      border-left: 1px solid black;
+      border-right: 1px solid black;
+      height: 1em;
+      word-break: normal;
+      &:after {
+        content: "";
+        display: block;
+        position: absolute;
+        left: -8px;
+        right: -8px;
+        top: 0;
+        bottom: 0;
+      }
+      > div {
+        opacity: 0;
+        position: absolute;
+        top: -1.8em;
+        font-size: 13px;
+        background-color: rgb(250, 129, 0);
+        font-style: normal;
+        line-height: normal;
+        user-select: none;
+        white-space: nowrap;
+        color: white;
+        padding: 2px 6px;
+        font-weight: 500;
+        border-radius: 4px;
+        pointer-events: none;
+        left: -1px;
+      }
+      &:hover {
+        > div {
+          opacity: 1;
+          transition: opacity 100ms ease-in-out;
+        }
+      }
+    }
+  }
 `;
 
 const EditorTooltip = ({ children, ...props }) => (

app/components/EventListItem.js

@@ -0,0 +1,163 @@
+// @flow
+import {
+  TrashIcon,
+  ArchiveIcon,
+  EditIcon,
+  PublishIcon,
+  MoveIcon,
+  CheckboxIcon,
+} from "outline-icons";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import styled from "styled-components";
+import Document from "models/Document";
+import Event from "models/Event";
+import Avatar from "components/Avatar";
+import Item, { Actions } from "components/List/Item";
+import Time from "components/Time";
+import RevisionMenu from "menus/RevisionMenu";
+import { documentHistoryUrl } from "utils/routeHelpers";
+
+type Props = {|
+  document: Document,
+  event: Event,
+  latest?: boolean,
+|};
+
+const EventListItem = ({ event, latest, document }: Props) => {
+  const { t } = useTranslation();
+  const opts = { userName: event.actor.name };
+  const isRevision = event.name === "revisions.create";
+  let meta, icon, to;
+
+  switch (event.name) {
+    case "revisions.create":
+    case "documents.latest_version": {
+      if (latest) {
+        icon = <CheckboxIcon color="currentColor" size={16} checked />;
+        meta = t("Latest version");
+        to = documentHistoryUrl(document);
+        break;
+      } else {
+        icon = <EditIcon color="currentColor" size={16} />;
+        meta = t("{{userName}} edited", opts);
+        to = documentHistoryUrl(document, event.modelId || "");
+        break;
+      }
+    }
+    case "documents.archive":
+      icon = <ArchiveIcon color="currentColor" size={16} />;
+      meta = t("{{userName}} archived", opts);
+      break;
+    case "documents.unarchive":
+      meta = t("{{userName}} restored", opts);
+      break;
+    case "documents.delete":
+      icon = <TrashIcon color="currentColor" size={16} />;
+      meta = t("{{userName}} deleted", opts);
+      break;
+    case "documents.restore":
+      meta = t("{{userName}} moved from trash", opts);
+      break;
+    case "documents.publish":
+      icon = <PublishIcon color="currentColor" size={16} />;
+      meta = t("{{userName}} published", opts);
+      break;
+    case "documents.move":
+      icon = <MoveIcon color="currentColor" size={16} />;
+      meta = t("{{userName}} moved", opts);
+      break;
+    default:
+      console.warn("Unhandled event: ", event.name);
+  }
+
+  if (!meta) {
+    return null;
+  }
+
+  return (
+    <ListItem
+      small
+      exact
+      to={to}
+      title={
+        <Time
+          dateTime={event.createdAt}
+          tooltipDelay={250}
+          format="MMMM do, h:mm a"
+          relative={false}
+          addSuffix
+        />
+      }
+      image={<Avatar src={event.actor?.avatarUrl} size={32} />}
+      subtitle={
+        <Subtitle>
+          {icon}
+          {meta}
+        </Subtitle>
+      }
+      actions={
+        isRevision ? (
+          <RevisionMenu document={document} revisionId={event.modelId} />
+        ) : undefined
+      }
+    />
+  );
+};
+
+const Subtitle = styled.span`
+  svg {
+    margin: -3px;
+    margin-right: 2px;
+  }
+`;
+
+const ListItem = styled(Item)`
+  border: 0;
+  position: relative;
+  margin: 8px;
+  padding: 8px;
+  border-radius: 8px;
+
+  img {
+    border-color: transparent;
+  }
+
+  &::before {
+    content: "";
+    display: block;
+    position: absolute;
+    top: -4px;
+    left: 23px;
+    width: 2px;
+    height: calc(100% + 8px);
+    background: ${(props) => props.theme.textSecondary};
+    opacity: 0.25;
+  }
+
+  &:nth-child(2)::before {
+    height: 50%;
+    top: 50%;
+  }
+
+  &:last-child::before {
+    height: 50%;
+  }
+
+  &:first-child:last-child::before {
+    display: none;
+  }
+
+  ${Actions} {
+    opacity: 0.25;
+    transition: opacity 100ms ease-in-out;
+  }
+
+  &:hover {
+    ${Actions} {
+      opacity: 1;
+    }
+  }
+`;
+
+export default EventListItem;

app/components/Header.js

@@ -36,7 +36,7 @@ function Header({ breadcrumb, title, actions }: Props) {
   }, []);
 
   return (
-    <Wrapper align="center" isCompact={isScrolled} shrink={false}>
+    <Wrapper align="center" shrink={false}>
       {breadcrumb ? <Breadcrumbs>{breadcrumb}</Breadcrumbs> : null}
       {isScrolled ? (
         <Title align="center" justify="flex-start" onClick={handleClickTitle}>
@@ -95,7 +95,7 @@ const Wrapper = styled(Flex)`
   }
 
   ${breakpoint("tablet")`
-    padding: ${(props) => (props.isCompact ? "12px" : `24px 24px 0`)};
+    padding: 16px 16px 0;
     justify-content: "center";
   `};
 `;

app/components/IconPicker.js

@@ -1,5 +1,6 @@
 // @flow
 import {
+  BookmarkedIcon,
   CollectionIcon,
   CoinsIcon,
   AcademicCapIcon,
@@ -8,9 +9,12 @@ import {
   CloudIcon,
   CodeIcon,
   EditIcon,
+  EmailIcon,
   EyeIcon,
+  ImageIcon,
   LeafIcon,
   LightBulbIcon,
+  MathIcon,
   MoonIcon,
   NotepadIcon,
   PadlockIcon,
@@ -18,6 +22,7 @@ import {
   QuestionMarkIcon,
   SunIcon,
   VehicleIcon,
+  WarningIcon,
 } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
@@ -39,6 +44,10 @@ const TwitterPicker = React.lazy(() =>
 );
 
 export const icons = {
+  bookmark: {
+    component: BookmarkedIcon,
+    keywords: "bookmark",
+  },
   collection: {
     component: CollectionIcon,
     keywords: "collection",
@@ -67,10 +76,18 @@ export const icons = {
     component: CodeIcon,
     keywords: "developer api code development engineering programming",
   },
+  email: {
+    component: EmailIcon,
+    keywords: "email at",
+  },
   eye: {
     component: EyeIcon,
     keywords: "eye view",
   },
+  image: {
+    component: ImageIcon,
+    keywords: "image photo picture",
+  },
   leaf: {
     component: LeafIcon,
     keywords: "leaf plant outdoors nature ecosystem climate",
@@ -79,6 +96,10 @@ export const icons = {
     component: LightBulbIcon,
     keywords: "lightbulb idea",
   },
+  math: {
+    component: MathIcon,
+    keywords: "math formula",
+  },
   moon: {
     component: MoonIcon,
     keywords: "night moon dark",
@@ -111,6 +132,10 @@ export const icons = {
     component: VehicleIcon,
     keywords: "truck car travel transport",
   },
+  warning: {
+    component: WarningIcon,
+    keywords: "danger",
+  },
 };
 
 const colors = [
@@ -192,7 +217,7 @@ const Label = styled.label`
 `;
 
 const Icons = styled.div`
-  padding: 15px 9px 9px 15px;
+  padding: 16px 8px 0 16px;
   width: 276px;
 `;
 

app/components/InputSelect.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 { Outline, LabelText } from "./Input";
 
 const Select = styled.select`
@@ -15,6 +16,7 @@ const Select = styled.select`
   background: none;
   color: ${(props) => props.theme.text};
   height: 30px;
+  font-size: 14px;
 
   option {
     background: ${(props) => props.theme.buttonNeutralBackground};
@@ -24,6 +26,10 @@ const Select = styled.select`
   &::placeholder {
     color: ${(props) => props.theme.placeholder};
   }
+
+  ${breakpoint("mobile", "tablet")`
+    font-size: 16px;
+  `};
 `;
 
 const Wrapper = styled.label`

app/components/InputSelectRole.js

@@ -0,0 +1,22 @@
+// @flow
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import InputSelect, { type Props, type Option } from "components/InputSelect";
+
+const InputSelectRole = (props: $Rest<Props, { options: Array<Option> }>) => {
+  const { t } = useTranslation();
+
+  return (
+    <InputSelect
+      label={t("Role")}
+      options={[
+        { label: t("Member"), value: "member" },
+        { label: t("Viewer"), value: "viewer" },
+        { label: t("Admin"), value: "admin" },
+      ]}
+      {...props}
+    />
+  );
+};
+
+export default InputSelectRole;

app/components/Layout.js

@@ -22,7 +22,6 @@ import UiStore from "stores/UiStore";
 import ErrorSuspended from "scenes/ErrorSuspended";
 import KeyboardShortcuts from "scenes/KeyboardShortcuts";
 import Button from "components/Button";
-import DocumentHistory from "components/DocumentHistory";
 import Flex from "components/Flex";
 import Guide from "components/Guide";
 import { LoadingIndicatorBar } from "components/LoadingIndicator";
@@ -38,6 +37,12 @@ import {
   newDocumentUrl,
 } from "utils/routeHelpers";
 
+const DocumentHistory = React.lazy(() =>
+  import(
+    /* webpackChunkName: "document-history" */ "components/DocumentHistory"
+  )
+);
+
 type Props = {
   documents: DocumentsStore,
   children?: ?React.Node,
@@ -154,12 +159,14 @@ class Layout extends React.Component<Props> {
             {this.props.children}
           </Content>
 
-          <Switch>
-            <Route
-              path={`/doc/${slug}/history/:revisionId?`}
-              component={DocumentHistory}
-            />
-          </Switch>
+          <React.Suspense>
+            <Switch>
+              <Route
+                path={`/doc/${slug}/history/:revisionId?`}
+                component={DocumentHistory}
+              />
+            </Switch>
+          </React.Suspense>
         </Container>
         <Guide
           isOpen={this.keyboardShortcutsOpen}

app/components/List/Item.js

@@ -1,41 +1,62 @@
 // @flow
 import * as React from "react";
-import styled from "styled-components";
+import styled, { useTheme } from "styled-components";
 import Flex from "components/Flex";
+import NavLink from "components/NavLink";
 
-type Props = {
+type Props = {|
   image?: React.Node,
+  to?: string,
   title: React.Node,
   subtitle?: React.Node,
   actions?: React.Node,
   border?: boolean,
   small?: boolean,
-};
+|};
 
-const ListItem = ({
-  image,
-  title,
-  subtitle,
-  actions,
-  small,
-  border,
-}: Props) => {
+const ListItem = (
+  { image, title, subtitle, actions, small, border, to, ...rest }: Props,
+  ref
+) => {
+  const theme = useTheme();
   const compact = !subtitle;
 
-  return (
-    <Wrapper compact={compact} $border={border}>
+  const content = (selected) => (
+    <>
       {image && <Image>{image}</Image>}
-      <Content align={compact ? "center" : undefined} column={!compact}>
+      <Content
+        align={compact ? "center" : undefined}
+        column={!compact}
+        $selected={selected}
+      >
         <Heading $small={small}>{title}</Heading>
-        {subtitle && <Subtitle $small={small}>{subtitle}</Subtitle>}
+        {subtitle && (
+          <Subtitle $small={small} $selected={selected}>
+            {subtitle}
+          </Subtitle>
+        )}
       </Content>
-      {actions && <Actions>{actions}</Actions>}
+      {actions && <Actions $selected={selected}>{actions}</Actions>}
+    </>
+  );
+
+  return (
+    <Wrapper
+      ref={ref}
+      $border={border}
+      activeStyle={{ background: theme.primary }}
+      {...rest}
+      as={to ? NavLink : undefined}
+      to={to}
+    >
+      {to ? content : content(false)}
     </Wrapper>
   );
 };
 
-const Wrapper = styled.li`
+const Wrapper = styled.div`
   display: flex;
+  user-select: none;
   padding: ${(props) => (props.$border === false ? 0 : "8px 0")};
   margin: ${(props) => (props.$border === false ? "8px 0" : 0)};
   border-bottom: 1px solid
@@ -57,28 +78,36 @@ const Image = styled(Flex)`
 `;
 
 const Heading = styled.p`
-  font-size: ${(props) => (props.$small ? 15 : 16)}px;
+  font-size: ${(props) => (props.$small ? 14 : 16)}px;
   font-weight: 500;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
-  line-height: 1.2;
+  line-height: ${(props) => (props.$small ? 1.3 : 1.2)};
   margin: 0;
 `;
 
-const Content = styled(Flex)`
+const Content = styled.div`
+  display: flex;
+  flex-direction: column;
   flex-grow: 1;
+  color: ${(props) => (props.$selected ? props.theme.white : props.theme.text)};
 `;
 
 const Subtitle = styled.p`
   margin: 0;
   font-size: ${(props) => (props.$small ? 13 : 14)}px;
-  color: ${(props) => props.theme.textTertiary};
+  color: ${(props) =>
+    props.$selected ? props.theme.white50 : props.theme.textTertiary};
   margin-top: -2px;
 `;
 
-const Actions = styled.div`
+export const Actions = styled(Flex)`
   align-self: center;
+  justify-content: center;
+  margin-right: 4px;
+  color: ${(props) =>
+    props.$selected ? props.theme.white : props.theme.textSecondary};
 `;
 
-export default ListItem;
+export default React.forwardRef<Props, HTMLDivElement>(ListItem);

app/components/LocaleTime.js

@@ -1,39 +1,9 @@
 // @flow
-import { format, formatDistanceToNow } from "date-fns";
-import {
-  enUS,
-  de,
-  faIR,
-  fr,
-  es,
-  it,
-  ja,
-  ko,
-  ptBR,
-  pt,
-  zhCN,
-  zhTW,
-  ru,
-} from "date-fns/locale";
+import { format as formatDate, formatDistanceToNow } from "date-fns";
 import * as React from "react";
 import Tooltip from "components/Tooltip";
 import useUserLocale from "hooks/useUserLocale";
-
-const locales = {
-  en_US: enUS,
-  de_DE: de,
-  es_ES: es,
-  fa_IR: faIR,
-  fr_FR: fr,
-  it_IT: it,
-  ja_JP: ja,
-  ko_KR: ko,
-  pt_BR: ptBR,
-  pt_PT: pt,
-  zh_CN: zhCN,
-  zh_TW: zhTW,
-  ru_RU: ru,
-};
+import { dateLocale } from "utils/i18n";
 
 let callbacks = [];
 
@@ -57,6 +27,8 @@ type Props = {
   tooltipDelay?: number,
   addSuffix?: boolean,
   shorten?: boolean,
+  relative?: boolean,
+  format?: string,
 };
 
 function LocaleTime({
@@ -64,6 +36,8 @@ function LocaleTime({
   children,
   dateTime,
   shorten,
+  format,
+  relative,
   tooltipDelay,
 }: Props) {
   const userLocale = useUserLocale();
@@ -82,25 +56,31 @@ function LocaleTime({
     };
   }, []);
 
-  let content = formatDistanceToNow(Date.parse(dateTime), {
+  const locale = dateLocale(userLocale);
+  let relativeContent = formatDistanceToNow(Date.parse(dateTime), {
     addSuffix,
-    locale: userLocale ? locales[userLocale] : undefined,
+    locale,
   });
 
   if (shorten) {
-    content = content
+    relativeContent = relativeContent
       .replace("about", "")
       .replace("less than a minute ago", "just now")
       .replace("minute", "min");
   }
 
+  const tooltipContent = formatDate(
+    Date.parse(dateTime),
+    format || "MMMM do, yyyy h:mm a",
+    { locale }
+  );
+
+  const content =
+    children || relative !== false ? relativeContent : tooltipContent;
+
   return (
-    <Tooltip
-      tooltip={format(Date.parse(dateTime), "MMMM do, yyyy h:mm a")}
-      delay={tooltipDelay}
-      placement="bottom"
-    >
-      <time dateTime={dateTime}>{children || content}</time>
+    <Tooltip tooltip={tooltipContent} delay={tooltipDelay} placement="bottom">
+      <time dateTime={dateTime}>{content}</time>
     </Tooltip>
   );
 }

app/components/MenuIconWrapper.js

@@ -0,0 +1,11 @@
+// @flow
+import styled from "styled-components";
+
+const MenuIconWrapper = styled.span`
+  width: 24px;
+  height: 24px;
+  margin-right: 6px;
+  margin-left: -4px;
+`;
+
+export default MenuIconWrapper;

app/components/NavLink.js

@@ -0,0 +1,26 @@
+// @flow
+import * as React from "react";
+import { NavLink, Route, type Match } from "react-router-dom";
+
+type Props = {
+  children?: (match: Match) => React.Node,
+  exact?: boolean,
+  to: string,
+};
+
+export default function NavLinkWithChildrenFunc({
+  to,
+  exact = false,
+  children,
+  ...rest
+}: Props) {
+  return (
+    <Route path={to} exact={exact}>
+      {({ match }) => (
+        <NavLink {...rest} to={to} exact={exact}>
+          {children ? children(match) : null}
+        </NavLink>
+      )}
+    </Route>
+  );
+}

app/components/NudeButton.js

@@ -12,6 +12,7 @@ const Button = styled.button`
   padding: 0;
   cursor: pointer;
   user-select: none;
+  color: inherit;
 `;
 
 export default React.forwardRef<any, typeof Button>(

app/components/PageTitle.js

@@ -2,8 +2,8 @@
 import { observer } from "mobx-react";
 import * as React from "react";
 import { Helmet } from "react-helmet";
+import { cdnPath } from "../../shared/utils/urls";
 import useStores from "hooks/useStores";
-import { cdnPath } from "utils/urls";
 
 type Props = {|
   title: string,

app/components/PaginatedEventList.js

@@ -0,0 +1,53 @@
+// @flow
+import * as React from "react";
+import styled from "styled-components";
+import Document from "models/Document";
+import Event from "models/Event";
+import PaginatedList from "components/PaginatedList";
+import EventListItem from "./EventListItem";
+
+type Props = {|
+  events: Event[],
+  document: Document,
+  fetch: (options: ?Object) => Promise<void>,
+  options?: Object,
+  heading?: React.Node,
+  empty?: React.Node,
+|};
+
+const PaginatedEventList = React.memo<Props>(function PaginatedEventList({
+  empty,
+  heading,
+  events,
+  fetch,
+  options,
+  document,
+  ...rest
+}: Props) {
+  return (
+    <PaginatedList
+      items={events}
+      empty={empty}
+      heading={heading}
+      fetch={fetch}
+      options={options}
+      renderItem={(item, index) => (
+        <EventListItem
+          key={item.id}
+          event={item}
+          document={document}
+          latest={index === 0}
+          {...rest}
+        />
+      )}
+      renderHeading={(name) => <Heading>{name}</Heading>}
+    />
+  );
+});
+
+const Heading = styled("h3")`
+  font-size: 14px;
+  padding: 0 12px;
+`;
+
+export default PaginatedEventList;

app/components/PaginatedList.js

@@ -2,12 +2,15 @@
 import ArrowKeyNavigation from "boundless-arrow-key-navigation";
 import { isEqual } from "lodash";
 import { observable, action } from "mobx";
-import { observer } from "mobx-react";
+import { observer, inject } from "mobx-react";
 import * as React from "react";
+import { withTranslation, type TFunction } from "react-i18next";
 import { Waypoint } from "react-waypoint";
+import AuthStore from "stores/AuthStore";
 import { DEFAULT_PAGINATION_LIMIT } from "stores/BaseStore";
 import DelayedMount from "components/DelayedMount";
 import PlaceholderList from "components/List/Placeholder";
+import { dateToHeading } from "utils/dates";
 
 type Props = {
   fetch?: (options: ?Object) => Promise<void>,
@@ -15,7 +18,10 @@ type Props = {
   heading?: React.Node,
   empty?: React.Node,
   items: any[],
-  renderItem: (any) => React.Node,
+  auth: AuthStore,
+  renderItem: (any, index: number) => React.Node,
+  renderHeading?: (name: React.Element<any> | string) => React.Node,
+  t: TFunction,
 };
 
 @observer
@@ -101,8 +107,9 @@ class PaginatedList extends React.Component<Props> {
   };
 
   render() {
-    const { items, heading, empty } = this.props;
+    const { items, heading, auth, empty, renderHeading } = this.props;
 
+    let previousHeading = "";
     const showLoading =
       this.isFetching && !this.isFetchingMore && !this.isInitiallyLoaded;
     const showEmpty = !items.length && !showLoading;
@@ -119,7 +126,41 @@ class PaginatedList extends React.Component<Props> {
               mode={ArrowKeyNavigation.mode.VERTICAL}
               defaultActiveChildIndex={0}
             >
-              {items.slice(0, this.renderCount).map(this.props.renderItem)}
+              {items.slice(0, this.renderCount).map((item, index) => {
+                const children = this.props.renderItem(item, index);
+
+                // If there is no renderHeading method passed then no date
+                // headings are rendered
+                if (!renderHeading) {
+                  return children;
+                }
+
+                // Our models have standard date fields, updatedAt > createdAt.
+                // Get what a heading would look like for this item
+                const currentDate =
+                  item.updatedAt || item.createdAt || previousHeading;
+                const currentHeading = dateToHeading(
+                  currentDate,
+                  this.props.t,
+                  auth.user?.language
+                );
+
+                // If the heading is different to any previous heading then we
+                // should render it, otherwise the item can go under the previous
+                // heading
+                if (!previousHeading || currentHeading !== previousHeading) {
+                  previousHeading = currentHeading;
+
+                  return (
+                    <React.Fragment key={item.id}>
+                      {renderHeading(currentHeading)}
+                      {children}
+                    </React.Fragment>
+                  );
+                }
+
+                return children;
+              })}
             </ArrowKeyNavigation>
             {this.allowLoadMore && (
               <Waypoint key={this.renderCount} onEnter={this.loadMoreResults} />
@@ -136,4 +177,6 @@ class PaginatedList extends React.Component<Props> {
   }
 }
 
-export default PaginatedList;
+export const Component = PaginatedList;
+
+export default withTranslation()<PaginatedList>(inject("auth")(PaginatedList));

app/components/PaginatedList.test.js

@@ -4,7 +4,7 @@ import { shallow } from "enzyme";
 import * as React from "react";
 import { DEFAULT_PAGINATION_LIMIT } from "stores/BaseStore";
 import { runAllPromises } from "../test/support";
-import PaginatedList from "./PaginatedList";
+import { Component as PaginatedList } from "./PaginatedList";
 
 describe("PaginatedList", () => {
   const render = () => null;

app/components/PlaceholderDocument.js

@@ -6,18 +6,45 @@ import Fade from "components/Fade";
 import Flex from "components/Flex";
 import PlaceholderText from "components/PlaceholderText";
 
-export default function PlaceholderDocument(props: Object) {
+export default function PlaceholderDocument({
+  includeTitle,
+  delay,
+}: {
+  includeTitle?: boolean,
+  delay?: number,
+}) {
+  const content = (
+    <>
+      <PlaceholderText delay={0.2} />
+      <PlaceholderText delay={0.4} />
+      <PlaceholderText delay={0.6} />
+    </>
+  );
+
+  if (includeTitle === false) {
+    return (
+      <DelayedMount delay={delay}>
+        <Fade>
+          <Flex column auto>
+            {content}
+          </Flex>
+        </Fade>
+      </DelayedMount>
+    );
+  }
+
   return (
-    <DelayedMount>
+    <DelayedMount delay={delay}>
       <Wrapper>
-        <Flex column auto {...props}>
-          <PlaceholderText height={34} maxWidth={70} />
-          <PlaceholderText delay={0.2} maxWidth={40} />
-          <br />
-          <PlaceholderText delay={0.2} />
-          <PlaceholderText delay={0.4} />
-          <PlaceholderText delay={0.6} />
-        </Flex>
+        <Fade>
+          <Flex column auto>
+            <PlaceholderText height={34} maxWidth={70} />
+            <PlaceholderText delay={0.2} maxWidth={40} />
+            <br />
+
+            {content}
+          </Flex>
+        </Fade>
       </Wrapper>
     </DelayedMount>
   );

app/components/Sidebar/Main.js

@@ -2,12 +2,11 @@
 import { observer } from "mobx-react";
 import {
   EditIcon,
+  SearchIcon,
+  ShapesIcon,
   HomeIcon,
   PlusIcon,
-  SearchIcon,
   SettingsIcon,
-  ShapesIcon,
-  StarredIcon,
 } from "outline-icons";
 import * as React from "react";
 import { DndProvider } from "react-dnd";
@@ -25,6 +24,7 @@ import ArchiveLink from "./components/ArchiveLink";
 import Collections from "./components/Collections";
 import Section from "./components/Section";
 import SidebarLink from "./components/SidebarLink";
+import Starred from "./components/Starred";
 import TeamButton from "./components/TeamButton";
 import TrashLink from "./components/TrashLink";
 import useCurrentTeam from "hooks/useCurrentTeam";
@@ -109,12 +109,6 @@ function MainSidebar() {
                 label={t("Search")}
                 exact={false}
               />
-              <SidebarLink
-                to="/starred"
-                icon={<StarredIcon color="currentColor" />}
-                exact={false}
-                label={t("Starred")}
-              />
               {can.createDocument && (
                 <SidebarLink
                   to="/drafts"
@@ -135,6 +129,7 @@ function MainSidebar() {
                 />
               )}
             </Section>
+            <Starred />
             <Section auto>
               <Collections
                 onCreateCollection={handleCreateCollectionModalOpen}
@@ -149,7 +144,11 @@ function MainSidebar() {
                     exact={false}
                     label={t("Templates")}
                     active={
-                      documents.active ? documents.active.template : undefined
+                      documents.active
+                        ? documents.active.isTemplate &&
+                          !documents.active.isDeleted &&
+                          !documents.active.isArchived
+                        : undefined
                     }
                   />
                   <ArchiveLink documents={documents} />

app/components/Sidebar/components/CollectionLink.js

@@ -159,6 +159,7 @@ function CollectionLink({
                 />
               }
               exact={false}
+              depth={0.5}
               menu={
                 <>
                   {can.update && (
@@ -198,7 +199,7 @@ function CollectionLink({
             activeDocument={activeDocument}
             prefetchDocument={prefetchDocument}
             canUpdate={canUpdate}
-            depth={1.5}
+            depth={2}
             index={index}
           />
         ))}

app/components/Sidebar/components/Collections.js

@@ -1,16 +1,16 @@
 // @flow
 import fractionalIndex from "fractional-index";
 import { observer } from "mobx-react";
-import { PlusIcon } from "outline-icons";
+import { PlusIcon, CollapsedIcon } from "outline-icons";
 import * as React from "react";
 import { useDrop } from "react-dnd";
 import { useTranslation } from "react-i18next";
+import styled from "styled-components";
 import Fade from "components/Fade";
 import Flex from "components/Flex";
 import useStores from "../../../hooks/useStores";
 import CollectionLink from "./CollectionLink";
 import DropCursor from "./DropCursor";
-import Header from "./Header";
 import PlaceholderCollections from "./PlaceholderCollections";
 import SidebarLink from "./SidebarLink";
 import useCurrentTeam from "hooks/useCurrentTeam";
@@ -25,6 +25,7 @@ function Collections({ onCreateCollection }: Props) {
   const [fetchError, setFetchError] = React.useState();
   const { ui, policies, documents, collections } = useStores();
   const { showToast } = useToasts();
+  const [expanded, setExpanded] = React.useState(true);
   const isPreloaded: boolean = !!collections.orderedData.length;
   const { t } = useTranslation();
   const team = useCurrentTeam();
@@ -99,6 +100,7 @@ function Collections({ onCreateCollection }: Props) {
           icon={<PlusIcon color="currentColor" />}
           label={`${t("New collection")}…`}
           exact
+          depth={0.5}
         />
       )}
     </>
@@ -107,7 +109,11 @@ function Collections({ onCreateCollection }: Props) {
   if (!collections.isLoaded || fetchError) {
     return (
       <Flex column>
-        <Header>{t("Collections")}</Header>
+        <SidebarLink
+          label={t("Collections")}
+          icon={<Disclosure expanded={expanded} color="currentColor" />}
+          disabled
+        />
         <PlaceholderCollections />
       </Flex>
     );
@@ -115,10 +121,19 @@ function Collections({ onCreateCollection }: Props) {
 
   return (
     <Flex column>
-      <Header>{t("Collections")}</Header>
-      {isPreloaded ? content : <Fade>{content}</Fade>}
+      <SidebarLink
+        onClick={() => setExpanded((prev) => !prev)}
+        label={t("Collections")}
+        icon={<Disclosure expanded={expanded} color="currentColor" />}
+      />
+      {expanded && (isPreloaded ? content : <Fade>{content}</Fade>)}
     </Flex>
   );
 }
 
+const Disclosure = styled(CollapsedIcon)`
+  transition: transform 100ms ease, fill 50ms !important;
+  ${({ expanded }) => !expanded && "transform: rotate(-90deg);"};
+`;
+
 export default observer(Collections);

app/components/Sidebar/components/Disclosure.js

@@ -0,0 +1,13 @@
+// @flow
+import { CollapsedIcon } from "outline-icons";
+import styled from "styled-components";
+
+const Disclosure = styled(CollapsedIcon)`
+  transition: transform 100ms ease, fill 50ms !important;
+  position: absolute;
+  left: -24px;
+
+  ${({ expanded }) => !expanded && "transform: rotate(-90deg);"};
+`;
+
+export default Disclosure;

app/components/Sidebar/components/DocumentLink.js

@@ -1,6 +1,5 @@
 // @flow
 import { observer } from "mobx-react";
-import { CollapsedIcon } from "outline-icons";
 import * as React from "react";
 import { useDrag, useDrop } from "react-dnd";
 import { useTranslation } from "react-i18next";
@@ -8,6 +7,7 @@ import styled from "styled-components";
 import Collection from "models/Collection";
 import Document from "models/Document";
 import Fade from "components/Fade";
+import Disclosure from "./Disclosure";
 import DropCursor from "./DropCursor";
 import DropToImport from "./DropToImport";
 import EditableTitle from "./EditableTitle";
@@ -210,7 +210,7 @@ function DocumentLink(
 
   return (
     <>
-      <div style={{ position: "relative" }} onDragLeave={resetHoverExpanding}>
+      <Relative onDragLeave={resetHoverExpanding}>
         <Draggable
           key={node.id}
           ref={drag}
@@ -244,6 +244,7 @@ function DocumentLink(
                 depth={depth}
                 exact={false}
                 showActions={menuOpen}
+                scrollIntoViewIfNeeded={!document?.isStarred}
                 ref={ref}
                 menu={
                   document && !isMoving ? (
@@ -263,7 +264,7 @@ function DocumentLink(
         {manualSort && (
           <DropCursor isActiveDrop={isOverReorder} innerRef={dropToReorder} />
         )}
-      </div>
+      </Relative>
       {expanded && !isDragging && (
         <>
           {node.children.map((childNode, index) => (
@@ -285,17 +286,13 @@ function DocumentLink(
   );
 }
 
-const Draggable = styled("div")`
-  opacity: ${(props) => (props.$isDragging || props.$isMoving ? 0.5 : 1)};
-  pointer-events: ${(props) => (props.$isMoving ? "none" : "all")};
+const Relative = styled.div`
+  position: relative;
 `;
 
-const Disclosure = styled(CollapsedIcon)`
-  transition: transform 100ms ease, fill 50ms !important;
-  position: absolute;
-  left: -24px;
-
-  ${({ expanded }) => !expanded && "transform: rotate(-90deg);"};
+const Draggable = styled.div`
+  opacity: ${(props) => (props.$isDragging || props.$isMoving ? 0.5 : 1)};
+  pointer-events: ${(props) => (props.$isMoving ? "none" : "all")};
 `;
 
 const ObservedDocumentLink = observer(React.forwardRef(DocumentLink));

app/components/Sidebar/components/DropCursor.js

@@ -27,7 +27,7 @@ const Cursor = styled("div")`
 
   width: 100%;
   height: 14px;
-  ${(props) => (props.from === "collections" ? "top: 15px;" : "bottom: -7px;")}
+  ${(props) => (props.from === "collections" ? "top: 25px;" : "bottom: -7px;")}
   background: transparent;
 
   ::after {

app/components/Sidebar/components/Header.js

@@ -5,10 +5,11 @@ import Flex from "components/Flex";
 const Header = styled(Flex)`
   font-size: 11px;
   font-weight: 600;
+  user-select: none;
   text-transform: uppercase;
   color: ${(props) => props.theme.sidebarText};
   letter-spacing: 0.04em;
-  margin: 4px 16px;
+  margin: 4px 12px;
 `;
 
 export default Header;

app/components/Sidebar/components/NavLink.js

@@ -31,6 +31,7 @@ type Props = {|
   activeClassName?: String,
   activeStyle?: Object,
   className?: string,
+  scrollIntoViewIfNeeded?: boolean,
   exact?: boolean,
   isActive?: any,
   location?: Location,
@@ -52,6 +53,7 @@ const NavLink = ({
   location: locationProp,
   strict,
   style: styleProp,
+  scrollIntoViewIfNeeded,
   to,
   ...rest
 }: Props) => {
@@ -83,13 +85,13 @@ const NavLink = ({
   const style = isActive ? { ...styleProp, ...activeStyle } : styleProp;
 
   React.useEffect(() => {
-    if (isActive && linkRef.current) {
+    if (isActive && linkRef.current && scrollIntoViewIfNeeded !== false) {
       scrollIntoView(linkRef.current, {
         scrollMode: "if-needed",
         behavior: "instant",
       });
     }
-  }, [linkRef, isActive]);
+  }, [linkRef, scrollIntoViewIfNeeded, isActive]);
 
   const props = {
     "aria-current": (isActive && ariaCurrent) || null,

app/components/Sidebar/components/PlaceholderCollections.js

@@ -15,6 +15,7 @@ function PlaceholderCollections() {
 
 const Wrapper = styled.div`
   margin: 4px 16px;
+  margin-left: 40px;
   width: 75%;
 `;
 

app/components/Sidebar/components/Section.js

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

app/components/Sidebar/components/SidebarLink.js

@@ -28,6 +28,7 @@ type Props = {
   theme: Theme,
   exact?: boolean,
   depth?: number,
+  scrollIntoViewIfNeeded?: boolean,
 };
 
 function SidebarLink(
@@ -49,12 +50,13 @@ function SidebarLink(
     history,
     match,
     className,
+    scrollIntoViewIfNeeded,
   }: Props,
   ref
 ) {
   const style = React.useMemo(() => {
     return {
-      paddingLeft: `${(depth || 0) * 16 + 16}px`,
+      paddingLeft: `${(depth || 0) * 16 + 12}px`,
     };
   }, [depth]);
 
@@ -73,6 +75,7 @@ function SidebarLink(
     <>
       <Link
         $isActiveDrop={isActiveDrop}
+        scrollIntoViewIfNeeded={scrollIntoViewIfNeeded}
         activeStyle={isActiveDrop ? activeDropStyle : activeStyle}
         style={active ? activeStyle : style}
         onClick={onClick}
@@ -131,6 +134,7 @@ const Link = styled(NavLink)`
   padding: 6px 16px;
   border-radius: 4px;
   transition: background 50ms, color 50ms;
+  user-select: none;
   background: ${(props) =>
     props.$isActiveDrop ? props.theme.slateDark : "inherit"};
   color: ${(props) =>
@@ -156,13 +160,11 @@ const Link = styled(NavLink)`
   `}
 
   @media (hover: hover) {
-    &:hover + ${Actions},
-    &:active + ${Actions} {
-        display: inline-flex;
+    &:hover + ${Actions}, &:active + ${Actions} {
+      display: inline-flex;
 
-        svg {
-          opacity: 0.75;
-        }
+      svg {
+        opacity: 0.75;
       }
     }
 

app/components/Sidebar/components/Starred.js

@@ -0,0 +1,171 @@
+// @flow
+import { observer } from "mobx-react";
+import { CollapsedIcon } from "outline-icons";
+import * as React from "react";
+import { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import styled from "styled-components";
+import Flex from "components/Flex";
+import PlaceholderCollections from "./PlaceholderCollections";
+import Section from "./Section";
+import SidebarLink from "./SidebarLink";
+import StarredLink from "./StarredLink";
+import useStores from "hooks/useStores";
+import useToasts from "hooks/useToasts";
+
+const STARRED_PAGINATION_LIMIT = 10;
+const STARRED = "STARRED";
+
+function Starred() {
+  const [isFetching, setIsFetching] = React.useState(false);
+  const [fetchError, setFetchError] = React.useState();
+  const [expanded, setExpanded] = React.useState(true);
+  const [show, setShow] = React.useState("Nothing");
+  const [offset, setOffset] = React.useState(0);
+  const [upperBound, setUpperBound] = React.useState(STARRED_PAGINATION_LIMIT);
+  const { showToast } = useToasts();
+  const { documents } = useStores();
+  const { t } = useTranslation();
+  const { fetchStarred, starred } = documents;
+
+  const fetchResults = React.useCallback(async () => {
+    try {
+      setIsFetching(true);
+      await fetchStarred({
+        limit: STARRED_PAGINATION_LIMIT,
+        offset,
+      });
+    } catch (error) {
+      showToast(t("Starred documents could not be loaded"), {
+        type: "error",
+      });
+      setFetchError(error);
+    } finally {
+      setIsFetching(false);
+    }
+  }, [fetchStarred, offset, showToast, t]);
+
+  useEffect(() => {
+    let stateInLocal;
+
+    try {
+      stateInLocal = localStorage.getItem(STARRED);
+    } catch (_) {
+      // no-op Safari private mode
+    }
+
+    if (!stateInLocal) {
+      localStorage.setItem(STARRED, expanded ? "true" : "false");
+    } else {
+      setExpanded(stateInLocal === "true");
+    }
+  }, [expanded]);
+
+  useEffect(() => {
+    setOffset(starred.length);
+    if (starred.length <= STARRED_PAGINATION_LIMIT) {
+      setShow("Nothing");
+    } else if (starred.length >= upperBound) {
+      setShow("More");
+    } else if (starred.length < upperBound) {
+      setShow("Less");
+    }
+  }, [starred, upperBound]);
+
+  useEffect(() => {
+    if (offset === 0) {
+      fetchResults();
+    }
+  }, [fetchResults, offset]);
+
+  const handleShowMore = React.useCallback(
+    async (ev) => {
+      setUpperBound(
+        (previousUpperBound) => previousUpperBound + STARRED_PAGINATION_LIMIT
+      );
+      await fetchResults();
+    },
+    [fetchResults]
+  );
+
+  const handleShowLess = React.useCallback((ev) => {
+    setUpperBound(STARRED_PAGINATION_LIMIT);
+    setShow("More");
+  }, []);
+
+  const handleExpandClick = React.useCallback(
+    (ev) => {
+      ev.preventDefault();
+      ev.stopPropagation();
+
+      try {
+        localStorage.setItem(STARRED, !expanded ? "true" : "false");
+      } catch (_) {
+        // no-op Safari private mode
+      }
+      setExpanded((prev) => !prev);
+    },
+    [expanded]
+  );
+
+  const content = starred.slice(0, upperBound).map((document, index) => {
+    return (
+      <StarredLink
+        key={document.id}
+        documentId={document.id}
+        collectionId={document.collectionId}
+        to={document.url}
+        title={document.title}
+        url={document.url}
+        depth={2}
+      />
+    );
+  });
+
+  if (!starred.length) {
+    return null;
+  }
+
+  return (
+    <Section>
+      <Flex column>
+        <SidebarLink
+          onClick={handleExpandClick}
+          label={t("Starred")}
+          icon={<Disclosure expanded={expanded} color="currentColor" />}
+        />
+        {expanded && (
+          <>
+            {content}
+            {show === "More" && !isFetching && (
+              <SidebarLink
+                onClick={handleShowMore}
+                label={`${t("Show more")}…`}
+                depth={2}
+              />
+            )}
+            {show === "Less" && !isFetching && (
+              <SidebarLink
+                onClick={handleShowLess}
+                label={`${t("Show less")}…`}
+                depth={2}
+              />
+            )}
+            {(isFetching || fetchError) && (
+              <Flex column>
+                <PlaceholderCollections />
+              </Flex>
+            )}
+          </>
+        )}
+      </Flex>
+    </Section>
+  );
+}
+
+const Disclosure = styled(CollapsedIcon)`
+  transition: transform 100ms ease, fill 50ms !important;
+  ${({ expanded }) => !expanded && "transform: rotate(-90deg);"};
+`;
+
+export default observer(Starred);

app/components/Sidebar/components/StarredLink.js

@@ -0,0 +1,124 @@
+// @flow
+import { observer } from "mobx-react";
+import * as React from "react";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import styled from "styled-components";
+import Fade from "components/Fade";
+import useStores from "../../../hooks/useStores";
+import Disclosure from "./Disclosure";
+import EditableTitle from "./EditableTitle";
+import SidebarLink from "./SidebarLink";
+import useBoolean from "hooks/useBoolean";
+import DocumentMenu from "menus/DocumentMenu";
+
+type Props = {|
+  depth: number,
+  title: string,
+  to: string,
+  documentId: string,
+  collectionId: string,
+|};
+
+function StarredLink({ depth, title, to, documentId, collectionId }: Props) {
+  const { t } = useTranslation();
+  const { collections, documents, policies } = useStores();
+  const collection = collections.get(collectionId);
+  const document = documents.get(documentId);
+  const [expanded, setExpanded] = useState(false);
+  const [menuOpen, handleMenuOpen, handleMenuClose] = useBoolean();
+  const canUpdate = policies.abilities(documentId).update;
+
+  const childDocuments = collection
+    ? collection.getDocumentChildren(documentId)
+    : [];
+
+  const hasChildDocuments = childDocuments.length > 0;
+
+  useEffect(() => {
+    async function load() {
+      if (!document) {
+        await documents.fetch(documentId);
+      }
+    }
+    load();
+  }, [collection, collectionId, collections, document, documentId, documents]);
+
+  const handleDisclosureClick = React.useCallback((ev: SyntheticEvent<>) => {
+    ev.preventDefault();
+    ev.stopPropagation();
+    setExpanded((prevExpanded) => !prevExpanded);
+  }, []);
+
+  const handleTitleChange = React.useCallback(
+    async (title: string) => {
+      if (!document) return;
+
+      await documents.update({
+        id: document.id,
+        lastRevision: document.revision,
+        text: document.text,
+        title,
+      });
+    },
+    [documents, document]
+  );
+
+  return (
+    <>
+      <Relative>
+        <SidebarLink
+          depth={depth}
+          to={to}
+          label={
+            <>
+              {hasChildDocuments && (
+                <Disclosure
+                  expanded={expanded}
+                  onClick={handleDisclosureClick}
+                />
+              )}
+              <EditableTitle
+                title={title || t("Untitled")}
+                onSubmit={handleTitleChange}
+                canUpdate={canUpdate}
+              />
+            </>
+          }
+          exact={false}
+          showActions={menuOpen}
+          menu={
+            document ? (
+              <Fade>
+                <DocumentMenu
+                  document={document}
+                  onOpen={handleMenuOpen}
+                  onClose={handleMenuClose}
+                />
+              </Fade>
+            ) : undefined
+          }
+        />
+      </Relative>
+      {expanded &&
+        childDocuments.map((childDocument) => (
+          <ObserveredStarredLink
+            key={childDocument.id}
+            depth={depth + 1}
+            title={childDocument.title}
+            to={childDocument.url}
+            documentId={childDocument.id}
+            collectionId={collectionId}
+          />
+        ))}
+    </>
+  );
+}
+
+const Relative = styled.div`
+  position: relative;
+`;
+
+const ObserveredStarredLink = observer(StarredLink);
+
+export default ObserveredStarredLink;

app/components/Sidebar/components/TeamButton.js

@@ -1,4 +1,5 @@
 // @flow
+import { observer } from "mobx-react";
 import { ExpandedIcon } from "outline-icons";
 import * as React from "react";
 import styled from "styled-components";
@@ -84,4 +85,4 @@ const Header = styled.button`
   }
 `;
 
-export default TeamButton;
+export default observer(TeamButton);

app/components/SocketProvider.js

@@ -8,6 +8,7 @@ import AuthStore from "stores/AuthStore";
 import CollectionsStore from "stores/CollectionsStore";
 import DocumentPresenceStore from "stores/DocumentPresenceStore";
 import DocumentsStore from "stores/DocumentsStore";
+import FileOperationsStore from "stores/FileOperationsStore";
 import GroupsStore from "stores/GroupsStore";
 import MembershipsStore from "stores/MembershipsStore";
 import PoliciesStore from "stores/PoliciesStore";
@@ -28,6 +29,7 @@ type Props = {
   views: ViewsStore,
   auth: AuthStore,
   toasts: ToastsStore,
+  fileOperations: FileOperationsStore,
 };
 
 @observer
@@ -80,6 +82,7 @@ class SocketProvider extends React.Component<Props> {
       policies,
       presence,
       views,
+      fileOperations,
     } = this.props;
     if (!auth.token) return;
 
@@ -287,6 +290,21 @@ class SocketProvider extends React.Component<Props> {
       }
     });
 
+    this.socket.on("fileOperations.update", async (event) => {
+      const user = auth.user;
+      let collection = null;
+
+      if (event.collectionId)
+        collection = await collections.fetch(event.collectionId);
+      if (user) {
+        fileOperations.add({
+          ...event,
+          user,
+          collection,
+        });
+      }
+    });
+
     // received a message from the API server that we should request
     // to join a specific room. Forward that to the ws server.
     this.socket.on("join", (event) => {
@@ -345,5 +363,6 @@ export default inject(
   "memberships",
   "presence",
   "policies",
-  "views"
+  "views",
+  "fileOperations"
 )(SocketProvider);

app/components/Tab.js

@@ -1,25 +1,13 @@
 // @flow
 import { m } from "framer-motion";
 import * as React from "react";
-import { NavLink, Route } from "react-router-dom";
-import styled, { withTheme } from "styled-components";
-import { type Theme } from "types";
+import styled, { useTheme } from "styled-components";
+import NavLinkWithChildrenFunc from "components/NavLink";
 
 type Props = {
-  theme: Theme,
   children: React.Node,
 };
 
-const NavLinkWithChildrenFunc = ({ to, exact = false, children, ...rest }) => (
-  <Route path={to} exact={exact}>
-    {({ match }) => (
-      <NavLink to={to} exact={exact} {...rest}>
-        {children(match)}
-      </NavLink>
-    )}
-  </Route>
-);
-
 const TabLink = styled(NavLinkWithChildrenFunc)`
   position: relative;
   display: inline-flex;
@@ -53,7 +41,8 @@ const transition = {
   damping: 30,
 };
 
-function Tab({ theme, children, ...rest }: Props) {
+export default function Tab({ children, ...rest }: Props) {
+  const theme = useTheme();
   const activeStyle = {
     color: theme.textSecondary,
   };
@@ -75,5 +64,3 @@ function Tab({ theme, children, ...rest }: Props) {
     </TabLink>
   );
 }
-
-export default withTheme(Tab);

app/components/Table.js

@@ -1,4 +1,5 @@
 // @flow
+import { isEqual } from "lodash";
 import { observer } from "mobx-react";
 import { CollapsedIcon } from "outline-icons";
 import * as React from "react";
@@ -24,6 +25,7 @@ export type Props = {|
   onChangePage: (index: number) => void,
   onChangeSort: (sort: ?string, direction: "ASC" | "DESC") => void,
   columns: any,
+  defaultSortDirection: "ASC" | "DESC",
 |};
 
 function Table({
@@ -39,6 +41,7 @@ function Table({
   topRef,
   onChangeSort,
   onChangePage,
+  defaultSortDirection,
 }: Props) {
   const { t } = useTranslation();
   const {
@@ -62,32 +65,52 @@ function Table({
       autoResetPage: false,
       pageCount: totalPages,
       initialState: {
-        sortBy: [{ id: defaultSort, desc: false }],
+        sortBy: [
+          {
+            id: defaultSort,
+            desc: defaultSortDirection === "DESC" ? true : false,
+          },
+        ],
         pageSize,
         pageIndex: page,
       },
+      stateReducer: (newState, action, prevState) => {
+        if (!isEqual(newState.sortBy, prevState.sortBy)) {
+          return { ...newState, pageIndex: 0 };
+        }
+        return newState;
+      },
     },
     useSortBy,
     usePagination
   );
 
-  React.useEffect(() => {
-    onChangePage(pageIndex);
-  }, [pageIndex]);
+  const prevSortBy = React.useRef(sortBy);
 
   React.useEffect(() => {
-    onChangePage(0);
-    onChangeSort(
-      sortBy.length ? sortBy[0].id : undefined,
-      sortBy.length && sortBy[0].desc ? "DESC" : "ASC"
-    );
-  }, [sortBy]);
+    if (!isEqual(sortBy, prevSortBy.current)) {
+      prevSortBy.current = sortBy;
+      onChangePage(0);
+      onChangeSort(
+        sortBy.length ? sortBy[0].id : undefined,
+        !sortBy.length ? defaultSortDirection : sortBy[0].desc ? "DESC" : "ASC"
+      );
+    }
+  }, [defaultSortDirection, onChangePage, onChangeSort, sortBy]);
+
+  const handleNextPage = () => {
+    nextPage();
+    onChangePage(pageIndex + 1);
+  };
+
+  const handlePreviousPage = () => {
+    previousPage();
+    onChangePage(pageIndex - 1);
+  };
 
   const isEmpty = !isLoading && data.length === 0;
   const showPlaceholder = isLoading && data.length === 0;
 
-  console.log({ canNextPage, pageIndex, totalPages, rows, data });
-
   return (
     <>
       <Anchor ref={topRef} />
@@ -142,12 +165,12 @@ function Table({
         >
           {/* Note: the page > 0 check shouldn't be needed here but is */}
           {canPreviousPage && page > 0 && (
-            <Button onClick={previousPage} neutral>
+            <Button onClick={handlePreviousPage} neutral>
               {t("Previous page")}
             </Button>
           )}
           {canNextPage && (
-            <Button onClick={nextPage} neutral>
+            <Button onClick={handleNextPage} neutral>
               {t("Next page")}
             </Button>
           )}
@@ -209,7 +232,7 @@ const SortWrapper = styled(Flex)`
 `;
 
 const Cell = styled.td`
-  padding: 8px 0;
+  padding: 6px;
   border-bottom: 1px solid ${(props) => props.theme.divider};
   font-size: 14px;
 
@@ -226,6 +249,14 @@ const Cell = styled.td`
 `;
 
 const Row = styled.tr`
+  ${Cell} {
+    &:first-child {
+      padding-left: 0;
+    }
+    &:last-child {
+      padding-right: 0;
+    }
+  }
   &:last-child {
     ${Cell} {
       border-bottom: 0;
@@ -237,7 +268,7 @@ const Head = styled.th`
   text-align: left;
   position: sticky;
   top: 54px;
-  padding: 6px 0;
+  padding: 6px;
   border-bottom: 1px solid ${(props) => props.theme.divider};
   background: ${(props) => props.theme.background};
   transition: ${(props) => props.theme.backgroundTransition};
@@ -245,6 +276,14 @@ const Head = styled.th`
   color: ${(props) => props.theme.textSecondary};
   font-weight: 500;
   z-index: 1;
+
+  :first-child {
+    padding-left: 0;
+  }
+
+  :last-child {
+    padding-right: 0;
+  }
 `;
 
 export default observer(Table);

app/components/Time.js

@@ -11,6 +11,7 @@ type Props = {
   children?: React.Node,
   tooltipDelay?: number,
   addSuffix?: boolean,
+  format?: string,
   shorten?: boolean,
 };
 

app/hooks/useCurrentToken.js

@@ -0,0 +1,9 @@
+// @flow
+import invariant from "invariant";
+import useStores from "./useStores";
+
+export default function useCurrentToken() {
+  const { auth } = useStores();
+  invariant(auth.token, "token is required");
+  return auth.token;
+}

app/hooks/useSessions.js

@@ -0,0 +1,29 @@
+// @flow
+import * as React from "react";
+import { getCookie } from "tiny-cookie";
+
+type Session = {|
+  url: string,
+  logoUrl: string,
+  name: string,
+  teamId: string,
+|};
+
+function loadSessionsFromCookie(): Session[] {
+  const sessions = JSON.parse(getCookie("sessions") || "{}");
+
+  return Object.keys(sessions).map((teamId) => ({
+    teamId,
+    ...sessions[teamId],
+  }));
+}
+
+export default function useSessions() {
+  const [sessions, setSessions] = React.useState(loadSessionsFromCookie);
+
+  const reload = React.useCallback(() => {
+    setSessions(loadSessionsFromCookie());
+  }, []);
+
+  return [sessions, reload];
+}

app/menus/AccountMenu.js

@@ -1,85 +1,48 @@
 // @flow
 import { observer } from "mobx-react";
-import { SunIcon, MoonIcon } from "outline-icons";
+import { MoonIcon, SunIcon, TrashIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import { Link } from "react-router-dom";
-import { useMenuState, MenuButton } from "reakit/Menu";
+import { MenuButton, useMenuState } from "reakit/Menu";
 import styled from "styled-components";
 import {
-  developers,
   changelog,
+  developers,
   githubIssuesUrl,
   mailToUrl,
   settings,
 } from "shared/utils/routeHelpers";
 import KeyboardShortcuts from "scenes/KeyboardShortcuts";
 import ContextMenu from "components/ContextMenu";
-import MenuItem, { MenuAnchor } from "components/ContextMenu/MenuItem";
-import Separator from "components/ContextMenu/Separator";
-import Flex from "components/Flex";
+import Template from "components/ContextMenu/Template";
 import Guide from "components/Guide";
+import env from "env";
 import useBoolean from "hooks/useBoolean";
+import useCurrentTeam from "hooks/useCurrentTeam";
 import usePrevious from "hooks/usePrevious";
+import useSessions from "hooks/useSessions";
 import useStores from "hooks/useStores";
+import useToasts from "hooks/useToasts";
+import { deleteAllDatabases } from "utils/developer";
 
 type Props = {|
   children: (props: any) => React.Node,
 |};
 
-const AppearanceMenu = React.forwardRef((props, ref) => {
-  const { ui } = useStores();
-  const { t } = useTranslation();
-  const menu = useMenuState();
-
-  return (
-    <>
-      <MenuButton ref={ref} {...menu} {...props} onClick={menu.show}>
-        {(props) => (
-          <MenuAnchor {...props}>
-            <ChangeTheme justify="space-between">
-              {t("Appearance")}
-              {ui.resolvedTheme === "light" ? <SunIcon /> : <MoonIcon />}
-            </ChangeTheme>
-          </MenuAnchor>
-        )}
-      </MenuButton>
-      <ContextMenu {...menu} aria-label={t("Appearance")}>
-        <MenuItem
-          {...menu}
-          onClick={() => ui.setTheme("system")}
-          selected={ui.theme === "system"}
-        >
-          {t("System")}
-        </MenuItem>
-        <MenuItem
-          {...menu}
-          onClick={() => ui.setTheme("light")}
-          selected={ui.theme === "light"}
-        >
-          {t("Light")}
-        </MenuItem>
-        <MenuItem
-          {...menu}
-          onClick={() => ui.setTheme("dark")}
-          selected={ui.theme === "dark"}
-        >
-          {t("Dark")}
-        </MenuItem>
-      </ContextMenu>
-    </>
-  );
-});
-
 function AccountMenu(props: Props) {
+  const [sessions] = useSessions();
   const menu = useMenuState({
     unstable_offset: [8, 0],
     placement: "bottom-start",
     modal: true,
   });
+  const { showToast } = useToasts();
   const { auth, ui } = useStores();
-  const previousTheme = usePrevious(ui.theme);
+  const { theme, resolvedTheme } = ui;
+  const team = useCurrentTeam();
+  const previousTheme = usePrevious(theme);
   const { t } = useTranslation();
+  const [includeAlt, setIncludeAlt] = React.useState(false);
   const [
     keyboardShortcutsOpen,
     handleKeyboardShortcutsOpen,
@@ -87,10 +50,122 @@ function AccountMenu(props: Props) {
   ] = useBoolean();
 
   React.useEffect(() => {
-    if (ui.theme !== previousTheme) {
+    if (theme !== previousTheme) {
       menu.hide();
     }
-  }, [menu, ui.theme, previousTheme]);
+  }, [menu, theme, previousTheme]);
+
+  const handleDeleteAllDatabases = React.useCallback(async () => {
+    await deleteAllDatabases();
+    showToast("IndexedDB cache deleted");
+    menu.hide();
+  }, [showToast, menu]);
+
+  const handleOpenMenu = React.useCallback((event) => {
+    setIncludeAlt(event.altKey);
+  }, []);
+
+  const items = React.useMemo(() => {
+    const otherSessions = sessions.filter(
+      (session) => session.teamId !== team.id && session.url !== team.url
+    );
+
+    return [
+      {
+        title: t("Settings"),
+        to: settings(),
+      },
+      {
+        title: t("Keyboard shortcuts"),
+        onClick: handleKeyboardShortcutsOpen,
+      },
+      {
+        title: t("API documentation"),
+        href: developers(),
+      },
+      {
+        type: "separator",
+      },
+      {
+        title: t("Changelog"),
+        href: changelog(),
+      },
+      {
+        title: t("Send us feedback"),
+        href: mailToUrl(),
+      },
+      {
+        title: t("Report a bug"),
+        href: githubIssuesUrl(),
+      },
+      ...(includeAlt || env.ENVIRONMENT === "development"
+        ? [
+            {
+              title: t("Development"),
+              items: [
+                {
+                  title: "Delete IndexedDB cache",
+                  icon: <TrashIcon />,
+                  onClick: handleDeleteAllDatabases,
+                },
+              ],
+            },
+          ]
+        : []),
+      {
+        title: t("Appearance"),
+        icon: resolvedTheme === "light" ? <SunIcon /> : <MoonIcon />,
+        items: [
+          {
+            title: t("System"),
+            onClick: () => ui.setTheme("system"),
+            selected: theme === "system",
+          },
+          {
+            title: t("Light"),
+            onClick: () => ui.setTheme("light"),
+            selected: theme === "light",
+          },
+          {
+            title: t("Dark"),
+            onClick: () => ui.setTheme("dark"),
+            selected: theme === "dark",
+          },
+        ],
+      },
+      {
+        type: "separator",
+      },
+      ...(otherSessions.length
+        ? [
+            {
+              title: t("Switch team"),
+              items: otherSessions.map((session) => ({
+                title: session.name,
+                icon: <Logo alt={session.name} src={session.logoUrl} />,
+                href: session.url,
+              })),
+            },
+          ]
+        : []),
+      {
+        title: t("Log out"),
+        onClick: auth.logout,
+      },
+    ];
+  }, [
+    auth.logout,
+    team.id,
+    team.url,
+    sessions,
+    handleKeyboardShortcutsOpen,
+    handleDeleteAllDatabases,
+    resolvedTheme,
+    includeAlt,
+    theme,
+    t,
+    ui,
+  ]);
 
   return (
     <>
@@ -101,40 +176,20 @@ function AccountMenu(props: Props) {
       >
         <KeyboardShortcuts />
       </Guide>
-      <MenuButton {...menu}>{props.children}</MenuButton>
+      <MenuButton {...menu} onClick={handleOpenMenu}>
+        {props.children}
+      </MenuButton>
       <ContextMenu {...menu} aria-label={t("Account")}>
-        <MenuItem {...menu} as={Link} to={settings()}>
-          {t("Settings")}
-        </MenuItem>
-        <MenuItem {...menu} onClick={handleKeyboardShortcutsOpen}>
-          {t("Keyboard shortcuts")}
-        </MenuItem>
-        <MenuItem {...menu} href={developers()} target="_blank">
-          {t("API documentation")}
-        </MenuItem>
-        <Separator {...menu} />
-        <MenuItem {...menu} href={changelog()} target="_blank">
-          {t("Changelog")}
-        </MenuItem>
-        <MenuItem {...menu} href={mailToUrl()} target="_blank">
-          {t("Send us feedback")}
-        </MenuItem>
-        <MenuItem {...menu} href={githubIssuesUrl()} target="_blank">
-          {t("Report a bug")}
-        </MenuItem>
-        <Separator {...menu} />
-        <MenuItem {...menu} as={AppearanceMenu} />
-        <Separator {...menu} />
-        <MenuItem {...menu} onClick={auth.logout}>
-          {t("Log out")}
-        </MenuItem>
+        <Template {...menu} items={items} />
       </ContextMenu>
     </>
   );
 }
 
-const ChangeTheme = styled(Flex)`
-  width: 100%;
+const Logo = styled("img")`
+  border-radius: 2px;
+  width: 24px;
+  height: 24px;
 `;
 
 export default observer(AccountMenu);

app/menus/CollectionMenu.js

@@ -1,5 +1,13 @@
 // @flow
 import { observer } from "mobx-react";
+import {
+  NewDocumentIcon,
+  EditIcon,
+  TrashIcon,
+  ImportIcon,
+  ExportIcon,
+  PadlockIcon,
+} from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
@@ -12,8 +20,9 @@ import CollectionExport from "scenes/CollectionExport";
 import CollectionPermissions from "scenes/CollectionPermissions";
 import ContextMenu from "components/ContextMenu";
 import OverflowMenuButton from "components/ContextMenu/OverflowMenuButton";
-import Template, { filterTemplateItems } from "components/ContextMenu/Template";
+import Template from "components/ContextMenu/Template";
 import Modal from "components/Modal";
+import useCurrentTeam from "hooks/useCurrentTeam";
 import useStores from "hooks/useStores";
 import useToasts from "hooks/useToasts";
 import getDataTransferFiles from "utils/getDataTransferFiles";
@@ -38,6 +47,7 @@ function CollectionMenu({
 }: Props) {
   const menu = useMenuState({ modal, placement });
   const [renderModals, setRenderModals] = React.useState(false);
+  const team = useCurrentTeam();
   const { documents, policies } = useStores();
   const { showToast } = useToasts();
   const { t } = useTranslation();
@@ -112,47 +122,62 @@ function CollectionMenu({
   );
 
   const can = policies.abilities(collection.id);
+  const canUserInTeam = policies.abilities(team.id);
+
   const items = React.useMemo(
-    () =>
-      filterTemplateItems([
-        {
-          title: t("New document"),
-          visible: can.update,
-          onClick: handleNewDocument,
-        },
-        {
-          title: t("Import document"),
-          visible: can.update,
-          onClick: handleImportDocument,
-        },
-        {
-          type: "separator",
-        },
-        {
-          title: `${t("Edit")}…`,
-          visible: can.update,
-          onClick: () => setShowCollectionEdit(true),
-        },
-        {
-          title: `${t("Permissions")}…`,
-          visible: can.update,
-          onClick: () => setShowCollectionPermissions(true),
-        },
-        {
-          title: `${t("Export")}…`,
-          visible: !!(collection && can.export),
-          onClick: () => setShowCollectionExport(true),
-        },
-        {
-          type: "separator",
-        },
-        {
-          title: `${t("Delete")}…`,
-          visible: !!(collection && can.delete),
-          onClick: () => setShowCollectionDelete(true),
-        },
-      ]),
-    [can, collection, handleNewDocument, handleImportDocument, t]
+    () => [
+      {
+        title: t("New document"),
+        visible: can.update,
+        onClick: handleNewDocument,
+        icon: <NewDocumentIcon />,
+      },
+      {
+        title: t("Import document"),
+        visible: can.update,
+        onClick: handleImportDocument,
+        icon: <ImportIcon />,
+      },
+      {
+        type: "separator",
+      },
+      {
+        title: `${t("Edit")}…`,
+        visible: can.update,
+        onClick: () => setShowCollectionEdit(true),
+        icon: <EditIcon />,
+      },
+      {
+        title: `${t("Permissions")}…`,
+        visible: can.update,
+        onClick: () => setShowCollectionPermissions(true),
+        icon: <PadlockIcon />,
+      },
+      {
+        title: `${t("Export")}…`,
+        visible: !!(collection && canUserInTeam.export),
+        onClick: () => setShowCollectionExport(true),
+        icon: <ExportIcon />,
+      },
+      {
+        type: "separator",
+      },
+      {
+        title: `${t("Delete")}…`,
+        visible: !!(collection && can.delete),
+        onClick: () => setShowCollectionDelete(true),
+        icon: <TrashIcon />,
+      },
+    ],
+    [
+      t,
+      can.update,
+      can.delete,
+      handleNewDocument,
+      handleImportDocument,
+      collection,
+      canUserInTeam.export,
+    ]
   );
 
   if (!items.length) {

app/menus/DocumentMenu.js

@@ -1,5 +1,25 @@
 // @flow
 import { observer } from "mobx-react";
+import {
+  EditIcon,
+  PinIcon,
+  StarredIcon,
+  UnstarredIcon,
+  DuplicateIcon,
+  ArchiveIcon,
+  TrashIcon,
+  MoveIcon,
+  HistoryIcon,
+  UnpublishIcon,
+  ShapesIcon,
+  PrintIcon,
+  ImportIcon,
+  NewDocumentIcon,
+  DownloadIcon,
+  BuildingBlocksIcon,
+  RestoreIcon,
+  CrossIcon,
+} from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
@@ -114,9 +134,13 @@ function DocumentMenu({
     [showToast, t, document]
   );
 
-  const handlePrint = React.useCallback((ev: SyntheticEvent<>) => {
-    window.print();
-  }, []);
+  const handlePrint = React.useCallback(
+    (ev: SyntheticEvent<>) => {
+      menu.hide();
+      window.print();
+    },
+    [menu]
+  );
 
   const handleStar = React.useCallback(
     (ev: SyntheticEvent<>) => {
@@ -139,6 +163,27 @@ function DocumentMenu({
   const collection = collections.get(document.collectionId);
   const can = policies.abilities(document.id);
   const canViewHistory = can.read && !can.restore;
+  const restoreItems = React.useMemo(
+    () => [
+      ...collections.orderedData.reduce((filtered, collection) => {
+        const can = policies.abilities(collection.id);
+
+        if (can.update) {
+          filtered.push({
+            onClick: (ev) => handleRestore(ev, { collectionId: collection.id }),
+            title: (
+              <Flex align="center">
+                <CollectionIcon collection={collection} />
+                <CollectionName>{collection.name}</CollectionName>
+              </Flex>
+            ),
+          });
+        }
+        return filtered;
+      }, []),
+    ],
+    [collections.orderedData, handleRestore, policies]
+  );
 
   const stopPropagation = React.useCallback((ev: SyntheticEvent<>) => {
     ev.stopPropagation();
@@ -227,122 +272,127 @@ function DocumentMenu({
               title: t("Restore"),
               visible: (!!collection && can.restore) || can.unarchive,
               onClick: handleRestore,
+              icon: <RestoreIcon />,
             },
             {
               title: t("Restore"),
-              visible: !collection && !!can.restore,
+              visible:
+                !collection && !!can.restore && restoreItems.length !== 0,
               style: {
                 left: -170,
                 position: "relative",
                 top: -40,
               },
+              icon: <RestoreIcon />,
               hover: true,
               items: [
                 {
                   type: "heading",
                   title: t("Choose a collection"),
                 },
-                ...collections.orderedData.map((collection) => {
-                  const can = policies.abilities(collection.id);
-
-                  return {
-                    title: (
-                      <Flex align="center">
-                        <CollectionIcon collection={collection} />
-                        <CollectionName>{collection.name}</CollectionName>
-                      </Flex>
-                    ),
-                    onClick: (ev) =>
-                      handleRestore(ev, { collectionId: collection.id }),
-                    disabled: !can.update,
-                  };
-                }),
+                ...restoreItems,
               ],
             },
             {
               title: t("Unpin"),
               onClick: document.unpin,
               visible: !!(showPin && document.pinned && can.unpin),
+              icon: <PinIcon />,
             },
             {
               title: t("Pin to collection"),
               onClick: document.pin,
               visible: !!(showPin && !document.pinned && can.pin),
+              icon: <PinIcon />,
             },
             {
               title: t("Unstar"),
               onClick: handleUnstar,
               visible: document.isStarred && !!can.unstar,
+              icon: <UnstarredIcon />,
             },
             {
               title: t("Star"),
               onClick: handleStar,
               visible: !document.isStarred && !!can.star,
-            },
-            {
-              title: t("Enable embeds"),
-              onClick: document.enableEmbeds,
-              visible: !!showToggleEmbeds && document.embedsDisabled,
-            },
-            {
-              title: t("Disable embeds"),
-              onClick: document.disableEmbeds,
-              visible: !!showToggleEmbeds && !document.embedsDisabled,
+              icon: <StarredIcon />,
             },
             {
               type: "separator",
             },
+            {
+              title: t("Edit"),
+              to: editDocumentUrl(document),
+              visible: !!can.update,
+              icon: <EditIcon />,
+            },
             {
               title: t("New nested document"),
               to: newDocumentUrl(document.collectionId, {
                 parentDocumentId: document.id,
               }),
               visible: !!can.createChildDocument,
+              icon: <NewDocumentIcon />,
             },
             {
               title: t("Import document"),
               visible: can.createChildDocument,
               onClick: handleImportDocument,
+              icon: <ImportIcon />,
             },
             {
               title: `${t("Create template")}…`,
               onClick: () => setShowTemplateModal(true),
               visible: !!can.update && !document.isTemplate,
-            },
-            {
-              title: t("Edit"),
-              to: editDocumentUrl(document),
-              visible: !!can.update,
+              icon: <ShapesIcon />,
             },
             {
               title: t("Duplicate"),
               onClick: handleDuplicate,
               visible: !!can.update,
+              icon: <DuplicateIcon />,
             },
             {
               title: t("Unpublish"),
               onClick: handleUnpublish,
               visible: !!can.unpublish,
+              icon: <UnpublishIcon />,
             },
             {
               title: t("Archive"),
               onClick: handleArchive,
               visible: !!can.archive,
+              icon: <ArchiveIcon />,
             },
             {
               title: `${t("Delete")}…`,
               onClick: () => setShowDeleteModal(true),
               visible: !!can.delete,
+              icon: <TrashIcon />,
             },
             {
               title: `${t("Permanently delete")}…`,
               onClick: () => setShowPermanentDeleteModal(true),
               visible: can.permanentDelete,
+              icon: <CrossIcon />,
             },
             {
               title: `${t("Move")}…`,
               onClick: () => setShowMoveModal(true),
               visible: !!can.move,
+              icon: <MoveIcon />,
+            },
+            {
+              title: t("Enable embeds"),
+              onClick: document.enableEmbeds,
+              visible: !!showToggleEmbeds && document.embedsDisabled,
+              icon: <BuildingBlocksIcon />,
+            },
+            {
+              title: t("Disable embeds"),
+              onClick: document.disableEmbeds,
+              visible: !!showToggleEmbeds && !document.embedsDisabled,
+              icon: <BuildingBlocksIcon />,
             },
             {
               type: "separator",
@@ -353,16 +403,19 @@ function DocumentMenu({
                 ? documentUrl(document)
                 : documentHistoryUrl(document),
               visible: canViewHistory,
+              icon: <HistoryIcon />,
             },
             {
               title: t("Download"),
               onClick: document.download,
               visible: !!can.download,
+              icon: <DownloadIcon />,
             },
             {
               title: t("Print"),
               onClick: handlePrint,
               visible: !!showPrint,
+              icon: <PrintIcon />,
             },
           ]}
         />

app/menus/NewDocumentMenu.js

@@ -11,7 +11,6 @@ import CollectionIcon from "components/CollectionIcon";
 import ContextMenu from "components/ContextMenu";
 import Header from "components/ContextMenu/Header";
 import Template from "components/ContextMenu/Template";
-import Flex from "components/Flex";
 import useCurrentTeam from "hooks/useCurrentTeam";
 import useStores from "hooks/useStores";
 import { newDocumentUrl } from "utils/routeHelpers";
@@ -21,20 +20,32 @@ function NewDocumentMenu() {
   const { t } = useTranslation();
   const team = useCurrentTeam();
   const { collections, policies } = useStores();
-  const singleCollection = collections.orderedData.length === 1;
   const can = policies.abilities(team.id);
 
-  if (!can.createDocument) {
+  const items = React.useMemo(
+    () =>
+      collections.orderedData.reduce((filtered, collection) => {
+        const can = policies.abilities(collection.id);
+
+        if (can.update) {
+          filtered.push({
+            to: newDocumentUrl(collection.id),
+            title: <CollectionName>{collection.name}</CollectionName>,
+            icon: <CollectionIcon collection={collection} />,
+          });
+        }
+        return filtered;
+      }, []),
+    [collections.orderedData, policies]
+  );
+
+  if (!can.createDocument || items.length === 0) {
     return null;
   }
 
-  if (singleCollection) {
+  if (items.length === 1) {
     return (
-      <Button
-        as={Link}
-        to={newDocumentUrl(collections.orderedData[0].id)}
-        icon={<PlusIcon />}
-      >
+      <Button as={Link} to={items[0].to} icon={<PlusIcon />}>
         {t("New doc")}
       </Button>
     );
@@ -51,19 +62,7 @@ function NewDocumentMenu() {
       </MenuButton>
       <ContextMenu {...menu} aria-label={t("New document")}>
         <Header>{t("Choose a collection")}</Header>
-        <Template
-          {...menu}
-          items={collections.orderedData.map((collection) => ({
-            to: newDocumentUrl(collection.id),
-            disabled: !policies.abilities(collection.id).update,
-            title: (
-              <Flex align="center">
-                <CollectionIcon collection={collection} />
-                <CollectionName>{collection.name}</CollectionName>
-              </Flex>
-            ),
-          }))}
-        />
+        <Template {...menu} items={items} />
       </ContextMenu>
     </>
   );

app/menus/NewTemplateMenu.js

@@ -3,14 +3,13 @@ import { observer } from "mobx-react";
 import { PlusIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import { useMenuState, MenuButton } from "reakit/Menu";
+import { MenuButton, useMenuState } from "reakit/Menu";
 import styled from "styled-components";
 import Button from "components/Button";
 import CollectionIcon from "components/CollectionIcon";
 import ContextMenu from "components/ContextMenu";
 import Header from "components/ContextMenu/Header";
 import Template from "components/ContextMenu/Template";
-import Flex from "components/Flex";
 import useCurrentTeam from "hooks/useCurrentTeam";
 import useStores from "hooks/useStores";
 import { newDocumentUrl } from "utils/routeHelpers";
@@ -22,7 +21,23 @@ function NewTemplateMenu() {
   const { collections, policies } = useStores();
   const can = policies.abilities(team.id);
 
-  if (!can.createDocument) {
+  const items = React.useMemo(
+    () =>
+      collections.orderedData.reduce((filtered, collection) => {
+        const can = policies.abilities(collection.id);
+        if (can.update) {
+          filtered.push({
+            to: newDocumentUrl(collection.id, { template: true }),
+            title: <CollectionName>{collection.name}</CollectionName>,
+            icon: <CollectionIcon collection={collection} />,
+          });
+        }
+        return filtered;
+      }, []),
+    [collections.orderedData, policies]
+  );
+
+  if (!can.createDocument || items.length === 0) {
     return null;
   }
 
@@ -37,21 +52,7 @@ function NewTemplateMenu() {
       </MenuButton>
       <ContextMenu aria-label={t("New template")} {...menu}>
         <Header>{t("Choose a collection")}</Header>
-        <Template
-          {...menu}
-          items={collections.orderedData.map((collection) => ({
-            to: newDocumentUrl(collection.id, {
-              template: true,
-            }),
-            disabled: !policies.abilities(collection.id).update,
-            title: (
-              <Flex align="center">
-                <CollectionIcon collection={collection} />
-                <CollectionName>{collection.name}</CollectionName>
-              </Flex>
-            ),
-          }))}
-        />
+        <Template {...menu} items={items} />
       </ContextMenu>
     </>
   );

app/menus/RevisionMenu.js

@@ -1,28 +1,30 @@
 // @flow
 import { observer } from "mobx-react";
+import { RestoreIcon, LinkIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
 import { useMenuState } from "reakit/Menu";
 import Document from "models/Document";
-import Revision from "models/Revision";
 import ContextMenu from "components/ContextMenu";
 import MenuItem from "components/ContextMenu/MenuItem";
 import OverflowMenuButton from "components/ContextMenu/OverflowMenuButton";
 import Separator from "components/ContextMenu/Separator";
 import CopyToClipboard from "components/CopyToClipboard";
+import MenuIconWrapper from "components/MenuIconWrapper";
+import useCurrentTeam from "hooks/useCurrentTeam";
 import useToasts from "hooks/useToasts";
 import { documentHistoryUrl } from "utils/routeHelpers";
 
 type Props = {|
   document: Document,
-  revision: Revision,
-  iconColor?: string,
+  revisionId: string,
   className?: string,
 |};
 
-function RevisionMenu({ document, revision, className, iconColor }: Props) {
+function RevisionMenu({ document, revisionId, className }: Props) {
   const { showToast } = useToasts();
+  const team = useCurrentTeam();
   const menu = useMenuState({ modal: true });
   const { t } = useTranslation();
   const history = useHistory();
@@ -30,11 +32,11 @@ function RevisionMenu({ document, revision, className, iconColor }: Props) {
   const handleRestore = React.useCallback(
     async (ev: SyntheticEvent<>) => {
       ev.preventDefault();
-      await document.restore({ revisionId: revision.id });
+      await document.restore({ revisionId });
       showToast(t("Document restored"), { type: "success" });
       history.push(document.url);
     },
-    [history, showToast, t, document, revision]
+    [history, showToast, t, document, revisionId]
   );
 
   const handleCopy = React.useCallback(() => {
@@ -43,24 +45,36 @@ function RevisionMenu({ document, revision, className, iconColor }: Props) {
 
   const url = `${window.location.origin}${documentHistoryUrl(
     document,
-    revision.id
+    revisionId
   )}`;
 
   return (
     <>
       <OverflowMenuButton
         className={className}
-        iconColor={iconColor}
+        iconColor="currentColor"
         aria-label={t("Show menu")}
         {...menu}
       />
       <ContextMenu {...menu} aria-label={t("Revision options")}>
-        <MenuItem {...menu} onClick={handleRestore}>
+        <MenuItem
+          {...menu}
+          onClick={handleRestore}
+          disabled={team.collaborativeEditing}
+        >
+          <MenuIconWrapper>
+            <RestoreIcon />
+          </MenuIconWrapper>
           {t("Restore version")}
         </MenuItem>
         <Separator />
         <CopyToClipboard text={url} onCopy={handleCopy}>
-          <MenuItem {...menu}>{t("Copy link")}</MenuItem>
+          <MenuItem {...menu}>
+            <MenuIconWrapper>
+              <LinkIcon />
+            </MenuIconWrapper>
+            {t("Copy link")}
+          </MenuItem>
         </CopyToClipboard>
       </ContextMenu>
     </>

app/menus/TemplatesMenu.js

@@ -14,9 +14,10 @@ import useStores from "hooks/useStores";
 
 type Props = {|
   document: Document,
+  onSelectTemplate: (template: Document) => void,
 |};
 
-function TemplatesMenu({ document }: Props) {
+function TemplatesMenu({ onSelectTemplate, document }: Props) {
   const menu = useMenuState({ modal: true });
   const { documents } = useStores();
   const { t } = useTranslation();
@@ -36,10 +37,10 @@ function TemplatesMenu({ document }: Props) {
   const renderTemplate = (template) => (
     <MenuItem
       key={template.id}
-      onClick={() => document.updateFromTemplate(template)}
+      onClick={() => onSelectTemplate(template)}
+      icon={<DocumentIcon />}
       {...menu}
     >
-      <DocumentIcon />
       <TemplateItem>
         <strong>{template.titleWithDefault}</strong>
         <br />

app/menus/UserMenu.js

@@ -49,7 +49,7 @@ function UserMenu({ user }: Props) {
       ) {
         return;
       }
-      users.demote(user, "Member");
+      users.demote(user, "member");
     },
     [users, user, t]
   );
@@ -69,7 +69,7 @@ function UserMenu({ user }: Props) {
       ) {
         return;
       }
-      users.demote(user, "Viewer");
+      users.demote(user, "viewer");
     },
     [users, user, t]
   );
@@ -119,21 +119,21 @@ function UserMenu({ user }: Props) {
                 userName: user.name,
               }),
               onClick: handleMember,
-              visible: can.demote && user.rank !== "Member",
+              visible: can.demote && user.role !== "member",
             },
             {
               title: t("Make {{ userName }} a viewer", {
                 userName: user.name,
               }),
               onClick: handleViewer,
-              visible: can.demote && user.rank !== "Viewer",
+              visible: can.demote && user.role !== "viewer",
             },
             {
               title: t("Make {{ userName }} an admin…", {
                 userName: user.name,
               }),
               onClick: handlePromote,
-              visible: can.promote && user.rank !== "Admin",
+              visible: can.promote && user.role !== "admin",
             },
             {
               type: "separator",

app/models/Collection.js

@@ -124,10 +124,6 @@ export default class Collection extends BaseModel {
   };
 
   export = () => {
-    return client.get(
-      "/collections.export",
-      { id: this.id },
-      { download: true }
-    );
+    return client.get("/collections.export", { id: this.id });
   };
 }

app/models/Document.js

@@ -10,17 +10,16 @@ import BaseModel from "models/BaseModel";
 import User from "models/User";
 import View from "./View";
 
-type SaveOptions = {
+type SaveOptions = {|
   publish?: boolean,
   done?: boolean,
   autosave?: boolean,
   lastRevision?: number,
-};
+|};
 
 export default class Document extends BaseModel {
   @observable isSaving: boolean = false;
   @observable embedsDisabled: boolean = false;
-  @observable injectTemplate: boolean = false;
   @observable lastViewedAt: ?string;
   store: DocumentsStore;
 
@@ -254,15 +253,28 @@ export default class Document extends BaseModel {
   };
 
   @action
-  updateFromTemplate = async (template: Document) => {
-    this.templateId = template.id;
-    this.title = template.title;
-    this.text = template.text;
-    this.injectTemplate = true;
+  update = async (options: {| ...SaveOptions, title: string |}) => {
+    if (this.isSaving) return this;
+    this.isSaving = true;
+
+    try {
+      if (options.lastRevision) {
+        return await this.store.update({
+          id: this.id,
+          title: this.title,
+          lastRevision: options.lastRevision,
+          ...options,
+        });
+      }
+
+      throw new Error("Attempting to update without a lastRevision");
+    } finally {
+      this.isSaving = false;
+    }
   };
 
   @action
-  save = async (options: SaveOptions = {}) => {
+  save = async (options: ?SaveOptions) => {
     if (this.isSaving) return this;
 
     const isCreating = !this.id;
@@ -275,22 +287,22 @@ export default class Document extends BaseModel {
           collectionId: this.collectionId,
           title: this.title,
           text: this.text,
-          publish: options.publish,
-          done: options.done,
-          autosave: options.autosave,
+          publish: options?.publish,
+          done: options?.done,
+          autosave: options?.autosave,
         });
       }
 
-      if (options.lastRevision) {
+      if (options?.lastRevision) {
         return await this.store.update({
           id: this.id,
           title: this.title,
           text: this.text,
           templateId: this.templateId,
-          lastRevision: options.lastRevision,
-          publish: options.publish,
-          done: options.done,
-          autosave: options.autosave,
+          lastRevision: options?.lastRevision,
+          publish: options?.publish,
+          done: options?.done,
+          autosave: options?.autosave,
         });
       }
 

app/models/Event.js

@@ -20,20 +20,6 @@ class Event extends BaseModel {
     published: boolean,
     templateId: string,
   };
-
-  get model() {
-    return this.name.split(".")[0];
-  }
-
-  get verb() {
-    return this.name.split(".")[1];
-  }
-
-  get verbPastTense() {
-    const v = this.verb;
-    if (v.endsWith("e")) return `${v}d`;
-    return `${v}ed`;
-  }
 }
 
 export default Event;

app/models/FileOperation.js

@@ -0,0 +1,27 @@
+// @flow
+import { computed } from "mobx";
+import BaseModal from "./BaseModel";
+import Collection from "./Collection";
+import User from "./User";
+
+class FileOperation extends BaseModal {
+  id: string;
+  state: string;
+  collection: ?Collection;
+  size: number;
+  type: string;
+  user: User;
+  createdAt: string;
+
+  @computed
+  get sizeInMB(): string {
+    const inKB = this.size / 1024;
+    if (inKB < 1024) {
+      return inKB.toFixed(2) + "KB";
+    }
+
+    return (inKB / 1024).toFixed(2) + "MB";
+  }
+}
+
+export default FileOperation;

app/models/Team.js

@@ -7,6 +7,7 @@ class Team extends BaseModel {
   name: string;
   avatarUrl: string;
   sharing: boolean;
+  collaborativeEditing: boolean;
   documentEmbeds: boolean;
   guestSignin: boolean;
   subdomain: ?string;

app/models/User.js

@@ -1,6 +1,6 @@
 // @flow
 import { computed } from "mobx";
-import type { Rank } from "shared/types";
+import type { Role } from "shared/types";
 import BaseModel from "./BaseModel";
 
 class User extends BaseModel {
@@ -8,6 +8,7 @@ class User extends BaseModel {
   id: string;
   name: string;
   email: string;
+  color: string;
   isAdmin: boolean;
   isViewer: boolean;
   lastActiveAt: string;
@@ -21,13 +22,13 @@ class User extends BaseModel {
   }
 
   @computed
-  get rank(): Rank {
+  get role(): Role {
     if (this.isAdmin) {
-      return "Admin";
+      return "admin";
     } else if (this.isViewer) {
-      return "Viewer";
+      return "viewer";
     } else {
-      return "Member";
+      return "member";
     }
   }
 }

app/multiplayer/MultiplayerExtension.js

@@ -0,0 +1,57 @@
+// @flow
+import { keymap } from "prosemirror-keymap";
+import { Extension } from "rich-markdown-editor";
+import {
+  ySyncPlugin,
+  yCursorPlugin,
+  yUndoPlugin,
+  undo,
+  redo,
+} from "y-prosemirror";
+import * as Y from "yjs";
+
+export default class MultiplayerExtension extends Extension {
+  get name() {
+    return "multiplayer";
+  }
+
+  get plugins() {
+    const { user, provider, document: doc } = this.options;
+    const type = doc.get("default", Y.XmlFragment);
+
+    const assignUser = (tr) => {
+      const clientIds = Array.from(doc.store.clients.keys());
+
+      if (
+        tr.local &&
+        tr.changed.size > 0 &&
+        !clientIds.includes(doc.clientID)
+      ) {
+        const permanentUserData = new Y.PermanentUserData(doc);
+        permanentUserData.setUserMapping(doc, doc.clientID, user.id);
+        doc.off("afterTransaction", assignUser);
+      }
+    };
+
+    // only once we have authenticated successfully do we initalize awareness.
+    // we could send this earlier, but getting authenticated faster is more important
+    provider.on("authenticated", () => {
+      provider.awareness.setLocalStateField("user", user);
+    });
+
+    // only once an actual change has been made do we add the userId <> clientId
+    // mapping, this avoids stored mappings for clients that never made a change
+    doc.on("afterTransaction", assignUser);
+
+    return [
+      ySyncPlugin(type),
+      yCursorPlugin(provider.awareness),
+      yUndoPlugin(),
+      keymap({
+        "Mod-z": undo,
+        "Mod-y": redo,
+        "Mod-Shift-z": redo,
+      }),
+    ];
+  }
+}

app/routes/authenticated.js

@@ -8,7 +8,6 @@ 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";
 import Trash from "scenes/Trash";
 
@@ -22,10 +21,8 @@ import { matchDocumentSlug as slug } from "utils/routeHelpers";
 const SettingsRoutes = React.lazy(() =>
   import(/* webpackChunkName: "settings" */ "./settings")
 );
-const KeyedDocument = React.lazy(() =>
-  import(
-    /* webpackChunkName: "keyed-document" */ "scenes/Document/KeyedDocument"
-  )
+const Document = React.lazy(() =>
+  import(/* webpackChunkName: "document" */ "scenes/Document")
 );
 const NotFound = () => <Search notFound />;
 const RedirectDocument = ({ match }: { match: Match }) => (
@@ -51,13 +48,12 @@ export default function AuthenticatedRoutes() {
             <Redirect from="/dashboard" to="/home" />
             <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} />
             <Route exact path="/templates/:sort" component={Templates} />
             <Route exact path="/drafts" component={Drafts} />
             <Route exact path="/archive" component={Archive} />
             <Route exact path="/trash" component={Trash} />
+            <Redirect exact from="/starred" to="/home" />
             <Redirect exact from="/collections/*" to="/collection/*" />
             <Route exact path="/collection/:id/new" component={DocumentNew} />
             <Route exact path="/collection/:id/:tab" component={Collection} />
@@ -66,10 +62,10 @@ export default function AuthenticatedRoutes() {
             <Route
               exact
               path={`/doc/${slug}/history/:revisionId?`}
-              component={KeyedDocument}
+              component={Document}
             />
-            <Route exact path={`/doc/${slug}/edit`} component={KeyedDocument} />
-            <Route path={`/doc/${slug}`} component={KeyedDocument} />
+            <Route exact path={`/doc/${slug}/edit`} component={Document} />
+            <Route path={`/doc/${slug}`} component={Document} />
             <Route exact path="/search" component={Search} />
             <Route exact path="/search/:term" component={Search} />
             <Route path="/404" component={Error404} />

app/routes/index.js

@@ -12,10 +12,8 @@ const Authenticated = React.lazy(() =>
 const AuthenticatedRoutes = React.lazy(() =>
   import(/* webpackChunkName: "authenticated-routes" */ "./authenticated")
 );
-const KeyedDocument = React.lazy(() =>
-  import(
-    /* webpackChunkName: "keyed-document" */ "scenes/Document/KeyedDocument"
-  )
+const SharedDocument = React.lazy(() =>
+  import(/* webpackChunkName: "shared-document" */ "scenes/Document/Shared")
 );
 const Login = React.lazy(() =>
   import(/* webpackChunkName: "login" */ "scenes/Login")
@@ -37,11 +35,11 @@ export default function Routes() {
         <Route exact path="/" component={Login} />
         <Route exact path="/create" component={Login} />
         <Route exact path="/logout" component={Logout} />
-        <Route exact path="/share/:shareId" component={KeyedDocument} />
+        <Route exact path="/share/:shareId" component={SharedDocument} />
         <Route
           exact
           path={`/share/:shareId/doc/${slug}`}
-          component={KeyedDocument}
+          component={SharedDocument}
         />
         <Authenticated>
           <AuthenticatedRoutes />

app/scenes/CollectionEdit.js

@@ -1,10 +1,8 @@
 // @flow
-import { observable } from "mobx";
-import { inject, observer } from "mobx-react";
+import { observer } from "mobx-react";
 import * as React from "react";
-import { withTranslation, Trans, type TFunction } from "react-i18next";
-import AuthStore from "stores/AuthStore";
-import ToastsStore from "stores/ToastsStore";
+import { useState } from "react";
+import { Trans, useTranslation } from "react-i18next";
 import Collection from "models/Collection";
 import Button from "components/Button";
 import Flex from "components/Flex";
@@ -12,141 +10,104 @@ import HelpText from "components/HelpText";
 import IconPicker from "components/IconPicker";
 import Input from "components/Input";
 import InputSelect from "components/InputSelect";
-import Switch from "components/Switch";
+import useToasts from "hooks/useToasts";
 
 type Props = {
   collection: Collection,
-  toasts: ToastsStore,
-  auth: AuthStore,
   onSubmit: () => void,
-  t: TFunction,
 };
 
-@observer
-class CollectionEdit extends React.Component<Props> {
-  @observable name: string = this.props.collection.name;
-  @observable sharing: boolean = this.props.collection.sharing;
-  @observable icon: string = this.props.collection.icon;
-  @observable color: string = this.props.collection.color || "#4E5C6E";
-  @observable sort: { field: string, direction: "asc" | "desc" } = this.props
-    .collection.sort;
-  @observable isSaving: boolean;
+const CollectionEdit = ({ collection, onSubmit }: Props) => {
+  const [name, setName] = useState(collection.name);
+  const [icon, setIcon] = useState(collection.icon);
+  const [color, setColor] = useState(collection.color || "#4E5C6E");
+  const [sort, setSort] = useState<{
+    field: string,
+    direction: "asc" | "desc",
+  }>(collection.sort);
+  const [isSaving, setIsSaving] = useState();
+  const { showToast } = useToasts();
+  const { t } = useTranslation();
 
-  handleSubmit = async (ev: SyntheticEvent<*>) => {
-    ev.preventDefault();
-    this.isSaving = true;
-    const { t } = this.props;
+  const handleSubmit = React.useCallback(
+    async (ev: SyntheticEvent<*>) => {
+      ev.preventDefault();
+      setIsSaving(true);
 
-    try {
-      await this.props.collection.save({
-        name: this.name,
-        icon: this.icon,
-        color: this.color,
-        sharing: this.sharing,
-        sort: this.sort,
-      });
-      this.props.onSubmit();
-      this.props.toasts.showToast(t("The collection was updated"), {
-        type: "success",
-      });
-    } catch (err) {
-      this.props.toasts.showToast(err.message, { type: "error" });
-    } finally {
-      this.isSaving = false;
-    }
-  };
+      try {
+        await collection.save({
+          name,
+          icon,
+          color,
+          sort,
+        });
+        onSubmit();
+        showToast(t("The collection was updated"), {
+          type: "success",
+        });
+      } catch (err) {
+        showToast(err.message, { type: "error" });
+      } finally {
+        setIsSaving(false);
+      }
+    },
+    [collection, color, icon, name, onSubmit, showToast, sort, t]
+  );
 
-  handleSortChange = (ev: SyntheticInputEvent<HTMLSelectElement>) => {
+  const handleSortChange = (ev: SyntheticInputEvent<HTMLSelectElement>) => {
     const [field, direction] = ev.target.value.split(".");
 
     if (direction === "asc" || direction === "desc") {
-      this.sort = { field, direction };
+      setSort({ field, direction });
     }
   };
 
-  handleNameChange = (ev: SyntheticInputEvent<*>) => {
-    this.name = ev.target.value;
+  const handleNameChange = (ev: SyntheticInputEvent<*>) => {
+    setName(ev.target.value.trim());
   };
 
-  handleChange = (color: string, icon: string) => {
-    this.color = color;
-    this.icon = icon;
+  const handleChange = (color: string, icon: string) => {
+    setColor(color);
+    setIcon(icon);
   };
 
-  handleSharingChange = (ev: SyntheticInputEvent<*>) => {
-    this.sharing = ev.target.checked;
-  };
-
-  render() {
-    const { auth, t } = this.props;
-    const teamSharingEnabled = !!auth.team && auth.team.sharing;
-
-    return (
-      <Flex column>
-        <form onSubmit={this.handleSubmit}>
-          <HelpText>
-            <Trans>
-              You can edit the name and other details at any time, however doing
-              so often might confuse your team mates.
-            </Trans>
-          </HelpText>
-          <Flex>
-            <Input
-              type="text"
-              label={t("Name")}
-              onChange={this.handleNameChange}
-              value={this.name}
-              required
-              autoFocus
-              flex
-            />
-            &nbsp;
-            <IconPicker
-              onChange={this.handleChange}
-              color={this.color}
-              icon={this.icon}
-            />
-          </Flex>
-          <InputSelect
-            label={t("Sort in sidebar")}
-            options={[
-              { label: t("Alphabetical"), value: "title.asc" },
-              { label: t("Manual sort"), value: "index.asc" },
-            ]}
-            value={`${this.sort.field}.${this.sort.direction}`}
-            onChange={this.handleSortChange}
+  return (
+    <Flex column>
+      <form onSubmit={handleSubmit}>
+        <HelpText>
+          <Trans>
+            You can edit the name and other details at any time, however doing
+            so often might confuse your team mates.
+          </Trans>
+        </HelpText>
+        <Flex>
+          <Input
+            type="text"
+            label={t("Name")}
+            onChange={handleNameChange}
+            value={name}
+            required
+            autoFocus
+            flex
           />
-          <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}
-          >
-            {this.isSaving ? `${t("Saving")}…` : t("Save")}
-          </Button>
-        </form>
-      </Flex>
-    );
-  }
-}
+          &nbsp;
+          <IconPicker onChange={handleChange} color={color} icon={icon} />
+        </Flex>
+        <InputSelect
+          label={t("Sort in sidebar")}
+          options={[
+            { label: t("Alphabetical"), value: "title.asc" },
+            { label: t("Manual sort"), value: "index.asc" },
+          ]}
+          value={`${sort.field}.${sort.direction}`}
+          onChange={handleSortChange}
+        />
+        <Button type="submit" disabled={isSaving || !collection.name}>
+          {isSaving ? `${t("Saving")}…` : t("Save")}
+        </Button>
+      </form>
+    </Flex>
+  );
+};
 
-export default withTranslation()<CollectionEdit>(
-  inject("toasts", "auth")(CollectionEdit)
-);
+export default observer(CollectionEdit);

app/scenes/CollectionExport.js

@@ -6,7 +6,7 @@ import Collection from "models/Collection";
 import Button from "components/Button";
 import Flex from "components/Flex";
 import HelpText from "components/HelpText";
-
+import useToasts from "hooks/useToasts";
 type Props = {
   collection: Collection,
   onSubmit: () => void,
@@ -15,6 +15,7 @@ type Props = {
 function CollectionExport({ collection, onSubmit }: Props) {
   const [isLoading, setIsLoading] = React.useState();
   const { t } = useTranslation();
+  const { showToast } = useToasts();
 
   const handleSubmit = React.useCallback(
     async (ev: SyntheticEvent<>) => {
@@ -23,9 +24,12 @@ function CollectionExport({ collection, onSubmit }: Props) {
       setIsLoading(true);
       await collection.export();
       setIsLoading(false);
+      showToast(
+        t("Export started, you will receive an email when it’s complete.")
+      );
       onSubmit();
     },
-    [collection, onSubmit]
+    [collection, onSubmit, showToast, t]
   );
 
   return (
@@ -33,7 +37,7 @@ function CollectionExport({ collection, onSubmit }: Props) {
       <form onSubmit={handleSubmit}>
         <HelpText>
           <Trans
-            defaults="Exporting the collection <em>{{collectionName}}</em> may take a few seconds. Your documents will be downloaded as a zip of folders with files in Markdown format."
+            defaults="Exporting the collection <em>{{collectionName}}</em> may take a few seconds. Your documents will be a zip of folders with files in Markdown format. Please visit the Export section on settings to get the zip."
             values={{ collectionName: collection.name }}
             components={{ em: <strong /> }}
           />

app/scenes/CollectionPermissions/index.js

@@ -13,6 +13,7 @@ import InputSelectPermission from "components/InputSelectPermission";
 import Labeled from "components/Labeled";
 import Modal from "components/Modal";
 import PaginatedList from "components/PaginatedList";
+import Switch from "components/Switch";
 import AddGroupsToCollection from "./AddGroupsToCollection";
 import AddPeopleToCollection from "./AddPeopleToCollection";
 import CollectionGroupMemberListItem from "./components/CollectionGroupMemberListItem";
@@ -34,6 +35,7 @@ function CollectionPermissions({ collection }: Props) {
     collectionGroupMemberships,
     users,
     groups,
+    auth,
   } = useStores();
   const { showToast } = useToasts();
   const [
@@ -153,10 +155,28 @@ function CollectionPermissions({ collection }: Props) {
     collection.id,
   ]);
 
+  const handleSharingChange = React.useCallback(
+    async (ev: SyntheticInputEvent<*>) => {
+      try {
+        await collection.save({ sharing: ev.target.checked });
+        showToast(t("Public document sharing permissions were updated"), {
+          type: "success",
+        });
+      } catch (err) {
+        showToast(t("Could not update public document sharing"), {
+          type: "error",
+        });
+      }
+    },
+    [collection, showToast, t]
+  );
+
   const collectionName = collection.name;
   const collectionGroups = groups.inCollection(collection.id);
   const collectionUsers = users.inCollection(collection.id);
   const isEmpty = !collectionGroups.length && !collectionUsers.length;
+  const sharing = collection.sharing;
+  const teamSharingEnabled = !!auth.team && auth.team.sharing;
 
   return (
     <Flex column>
@@ -189,6 +209,24 @@ function CollectionPermissions({ collection }: Props) {
           />
         )}
       </PermissionExplainer>
+      <Switch
+        id="sharing"
+        label={t("Public document sharing")}
+        onChange={handleSharingChange}
+        checked={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>
       <Labeled label={t("Additional access")}>
         <Actions>
           <Button

app/scenes/Document/KeyedDocument.js

@@ -1,25 +0,0 @@
-// @flow
-import { inject } from "mobx-react";
-import * as React from "react";
-import DataLoader from "./components/DataLoader";
-
-class KeyedDocument extends React.Component<*> {
-  componentWillUnmount() {
-    this.props.ui.clearActiveDocument();
-  }
-
-  render() {
-    const { documentSlug, revisionId } = this.props.match.params;
-
-    // the urlId portion of the url does not include the slugified title
-    // we only want to force a re-mount of the document component when the
-    // document changes, not when the title does so only this portion is used
-    // for the key.
-    const urlParts = documentSlug ? documentSlug.split("-") : [];
-    const urlId = urlParts.length ? urlParts[urlParts.length - 1] : undefined;
-
-    return <DataLoader key={[urlId, revisionId].join("/")} {...this.props} />;
-  }
-}
-
-export default inject("ui")(KeyedDocument);

app/scenes/Document/Shared.js

@@ -0,0 +1,64 @@
+// @flow
+import * as React from "react";
+import { type Match } from "react-router-dom";
+import { useTheme } from "styled-components";
+import Error404 from "scenes/Error404";
+import ErrorOffline from "scenes/ErrorOffline";
+import useStores from "../../hooks/useStores";
+import Document from "./components/Document";
+import Loading from "./components/Loading";
+import { type LocationWithState } from "types";
+import { OfflineError } from "utils/errors";
+
+const EMPTY_OBJECT = {};
+
+type Props = {|
+  match: Match,
+  location: LocationWithState,
+|};
+
+export default function SharedDocumentScene(props: Props) {
+  const theme = useTheme();
+  const [response, setResponse] = React.useState();
+  const [error, setError] = React.useState<?Error>();
+  const { documents } = useStores();
+  const { shareId, documentSlug } = props.match.params;
+
+  // ensure the wider page color always matches the theme
+  React.useEffect(() => {
+    window.document.body.style.background = theme.background;
+  }, [theme]);
+
+  React.useEffect(() => {
+    async function fetchData() {
+      try {
+        const response = await documents.fetch(documentSlug, {
+          shareId,
+        });
+        setResponse(response);
+      } catch (err) {
+        setError(err);
+      }
+    }
+    fetchData();
+  }, [documents, documentSlug, shareId]);
+
+  if (error) {
+    return error instanceof OfflineError ? <ErrorOffline /> : <Error404 />;
+  }
+
+  if (!response) {
+    return <Loading location={props.location} />;
+  }
+
+  return (
+    <Document
+      abilities={EMPTY_OBJECT}
+      document={response.document}
+      sharedTree={response.sharedTree}
+      location={props.location}
+      shareId={shareId}
+      readOnly
+    />
+  );
+}

app/scenes/Document/components/DataLoader.js

@@ -18,16 +18,15 @@ import Document from "models/Document";
 import Revision from "models/Revision";
 import Error404 from "scenes/Error404";
 import ErrorOffline from "scenes/ErrorOffline";
-import DocumentComponent from "./Document";
 import HideSidebar from "./HideSidebar";
 import Loading from "./Loading";
-import SocketPresence from "./SocketPresence";
 import { type LocationWithState, type NavigationNode } from "types";
 import { NotFoundError, OfflineError } from "utils/errors";
 import { matchDocumentEdit, updateDocumentUrl } from "utils/routeHelpers";
 import { isInternalUrl } from "utils/urls";
 type Props = {|
   match: Match,
+  auth: AuthStore,
   location: LocationWithState,
   shares: SharesStore,
   documents: DocumentsStore,
@@ -36,6 +35,7 @@ type Props = {|
   auth: AuthStore,
   ui: UiStore,
   history: RouterHistory,
+  children: (any) => React.Node,
 |};
 
 const sharedTreeCache = {};
@@ -223,7 +223,7 @@ class DataLoader extends React.Component<Props> {
   };
 
   render() {
-    const { location, policies, ui } = this.props;
+    const { location, policies, auth, ui } = this.props;
 
     if (this.error) {
       return this.error instanceof OfflineError ? (
@@ -233,10 +233,11 @@ class DataLoader extends React.Component<Props> {
       );
     }
 
+    const team = auth.team;
     const document = this.document;
     const revision = this.revision;
 
-    if (!document) {
+    if (!document || !team) {
       return (
         <>
           <Loading location={location} />
@@ -247,20 +248,28 @@ class DataLoader extends React.Component<Props> {
 
     const abilities = policies.abilities(document.id);
 
+    // We do not want to remount the document when changing from view->edit
+    // on the multiplayer flag as the doc is guaranteed to be upto date.
+    const key = team.collaborativeEditing
+      ? ""
+      : this.isEditing
+      ? "editing"
+      : "read-only";
+
     return (
-      <SocketPresence documentId={document.id} isEditing={this.isEditing}>
+      <React.Fragment key={key}>
         {this.isEditing && <HideSidebar ui={ui} />}
-        <DocumentComponent
-          document={document}
-          revision={revision}
-          abilities={abilities}
-          location={location}
-          readOnly={!this.isEditing || !abilities.update || document.isArchived}
-          onSearchLink={this.onSearchLink}
-          onCreateLink={this.onCreateLink}
-          sharedTree={this.sharedTree}
-        />
-      </SocketPresence>
+        {this.props.children({
+          document,
+          revision,
+          abilities,
+          isEditing: this.isEditing,
+          readOnly: !this.isEditing || !abilities.update || document.isArchived,
+          onSearchLink: this.onSearchLink,
+          onCreateLink: this.onCreateLink,
+          sharedTree: this.sharedTree,
+        })}
+      </React.Fragment>
     );
   }
 }

app/scenes/Document/components/Document.js

@@ -1,8 +1,9 @@
 // @flow
 import { debounce } from "lodash";
-import { observable } from "mobx";
+import { action, observable } from "mobx";
 import { observer, inject } from "mobx-react";
 import { InputIcon } from "outline-icons";
+import { AllSelection } from "prosemirror-state";
 import * as React from "react";
 import { type TFunction, Trans, withTranslation } from "react-i18next";
 import keydown from "react-keydown";
@@ -18,6 +19,7 @@ import Document from "models/Document";
 import Revision from "models/Revision";
 import DocumentMove from "scenes/DocumentMove";
 import Branding from "components/Branding";
+import ConnectionStatus from "components/ConnectionStatus";
 import ErrorBoundary from "components/ErrorBoundary";
 import Flex from "components/Flex";
 import LoadingIndicator from "components/LoadingIndicator";
@@ -113,15 +115,31 @@ class DocumentScene extends React.Component<Props> {
         );
       }
     }
-
-    if (document.injectTemplate) {
-      document.injectTemplate = false;
-      this.title = document.title;
-      this.isDirty = true;
-      this.updateIsDirty();
-    }
   }
 
+  onSelectTemplate = (template: Document) => {
+    this.title = template.title;
+    this.isDirty = true;
+
+    const editorRef = this.editor.current;
+    if (!editorRef) {
+      return;
+    }
+
+    const { view, parser } = editorRef;
+    view.dispatch(
+      view.state.tr
+        .setSelection(new AllSelection(view.state.doc))
+        .replaceSelectionWith(parser.parse(template.text))
+    );
+
+    this.props.document.templateId = template.id;
+    this.props.document.title = template.title;
+    this.props.document.text = template.text;
+
+    this.updateIsDirty();
+  };
+
   @keydown("m")
   goToMove(ev) {
     if (!this.props.readOnly) return;
@@ -197,7 +215,7 @@ class DocumentScene extends React.Component<Props> {
       autosave?: boolean,
     } = {}
   ) => {
-    const { document } = this.props;
+    const { document, auth } = this.props;
 
     // prevent saves when we are already saving
     if (document.isSaving) return;
@@ -219,18 +237,29 @@ class DocumentScene extends React.Component<Props> {
 
     document.title = title;
     document.text = text;
+    document.tasks = getTasks(document.text);
 
     let isNew = !document.id;
     this.isSaving = true;
     this.isPublishing = !!options.publish;
 
-    document.tasks = getTasks(document.text);
-
     try {
-      const savedDocument = await document.save({
-        ...options,
-        lastRevision: this.lastRevision,
-      });
+      let savedDocument = document;
+      if (auth.team?.collaborativeEditing) {
+        // update does not send "text" field to the API, this is a workaround
+        // while the multiplayer editor is toggleable. Once it's finalized
+        // this can be cleaned up to single code path
+        savedDocument = await document.update({
+          ...options,
+          lastRevision: this.lastRevision,
+        });
+      } else {
+        savedDocument = await document.save({
+          ...options,
+          lastRevision: this.lastRevision,
+        });
+      }
+
       this.isDirty = false;
       this.lastRevision = savedDocument.revision;
 
@@ -275,8 +304,21 @@ class DocumentScene extends React.Component<Props> {
   };
 
   onChange = (getEditorText) => {
+    const { document, auth } = this.props;
+
     this.getEditorText = getEditorText;
 
+    // If the multiplayer editor is enabled then we still want to keep the local
+    // text value in sync as it is used as a cache.
+    if (auth.team?.collaborativeEditing) {
+      action(() => {
+        document.text = this.getEditorText();
+        document.tasks = getTasks(document.text);
+      })();
+
+      return;
+    }
+
     // document change while read only is presumed to be a checkbox edit,
     // in that case we don't delay in saving for a better user experience.
     if (this.props.readOnly) {
@@ -314,7 +356,6 @@ class DocumentScene extends React.Component<Props> {
     const isShare = !!shareId;
 
     const value = revision ? revision.text : document.text;
-    const injectTemplate = document.injectTemplate;
     const disableEmbeds =
       (team && team.documentEmbeds === false) || document.embedsDisabled;
 
@@ -323,6 +364,12 @@ class DocumentScene extends React.Component<Props> {
       : [];
     const showContents = ui.tocVisible && readOnly;
 
+    const collaborativeEditing =
+      team?.collaborativeEditing &&
+      !document.isArchived &&
+      !document.isDeleted &&
+      !revision;
+
     return (
       <ErrorBoundary>
         <Background
@@ -332,7 +379,7 @@ class DocumentScene extends React.Component<Props> {
           auto
         >
           <Route
-            path={`${match.url}/move`}
+            path={`${document.url}/move`}
             component={() => (
               <Modal
                 title={`Move ${document.noun}`}
@@ -356,7 +403,11 @@ class DocumentScene extends React.Component<Props> {
             {!readOnly && (
               <>
                 <Prompt
-                  when={this.isDirty && !this.isUploading}
+                  when={
+                    this.isDirty &&
+                    !this.isUploading &&
+                    !team?.collaborativeEditing
+                  }
                   message={t(
                     `You have unsaved changes.\nAre you sure you want to discard them?`
                   )}
@@ -383,6 +434,7 @@ class DocumentScene extends React.Component<Props> {
               savingIsDisabled={document.isSaving || this.isEmpty}
               sharedTree={this.props.sharedTree}
               goBack={this.goBack}
+              onSelectTemplate={this.onSelectTemplate}
               onSave={this.onSave}
               headings={headings}
             />
@@ -443,11 +495,12 @@ class DocumentScene extends React.Component<Props> {
                   {showContents && <Contents headings={headings} />}
                   <Editor
                     id={document.id}
+                    key={disableEmbeds ? "disabled" : "enabled"}
                     innerRef={this.editor}
+                    multiplayer={collaborativeEditing}
                     shareId={shareId}
                     isDraft={document.isDraft}
                     template={document.isTemplate}
-                    key={[injectTemplate, disableEmbeds].join("-")}
                     title={revision ? revision.title : this.title}
                     document={document}
                     value={readOnly ? value : undefined}
@@ -492,7 +545,12 @@ class DocumentScene extends React.Component<Props> {
         {isShare && !isCustomDomain() && (
           <Branding href="//www.getoutline.com?ref=sharelink" />
         )}
-        {!isShare && <KeyboardShortcutsButton />}
+        {!isShare && (
+          <>
+            <KeyboardShortcutsButton />
+            <ConnectionStatus />
+          </>
+        )}
       </ErrorBoundary>
     );
   }

app/scenes/Document/components/Editor.js

@@ -17,6 +17,7 @@ import Editor, { type Props as EditorProps } from "components/Editor";
 import Flex from "components/Flex";
 import HoverPreview from "components/HoverPreview";
 import Star, { AnimatedStar } from "components/Star";
+import MultiplayerEditor from "./MultiplayerEditor";
 import { isModKey } from "utils/keyboard";
 import { documentHistoryUrl } from "utils/routeHelpers";
 
@@ -27,6 +28,7 @@ type Props = {|
   document: Document,
   isDraft: boolean,
   shareId: ?string,
+  multiplayer?: boolean,
   onSave: ({ done?: boolean, autosave?: boolean, publish?: boolean }) => any,
   innerRef: { current: any },
   children: React.Node,
@@ -107,10 +109,12 @@ class DocumentEditor extends React.Component<Props> {
       innerRef,
       children,
       policies,
+      multiplayer,
       t,
       ...rest
     } = this.props;
 
+    const EditorComponent = multiplayer ? MultiplayerEditor : Editor;
     const can = policies.abilities(document.id);
     const { emoji } = parseTitle(title);
     const startsWithEmojiAndSpace = !!(emoji && title.startsWith(`${emoji} `));
@@ -162,7 +166,7 @@ class DocumentEditor extends React.Component<Props> {
             }
           />
         )}
-        <Editor
+        <EditorComponent
           ref={innerRef}
           autoFocus={!!title && !this.props.defaultValue}
           placeholder={t("…the rest is up to you")}

app/scenes/Document/components/Header.js

@@ -41,6 +41,7 @@ type Props = {|
   isPublishing: boolean,
   publishingIsDisabled: boolean,
   savingIsDisabled: boolean,
+  onSelectTemplate: (template: Document) => void,
   onDiscard: () => void,
   onSave: ({
     done?: boolean,
@@ -61,6 +62,7 @@ function DocumentHeader({
   savingIsDisabled,
   publishingIsDisabled,
   sharedTree,
+  onSelectTemplate,
   onSave,
   headings,
 }: Props) {
@@ -79,7 +81,6 @@ function DocumentHeader({
   const isNew = document.isNewDocument;
   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;
 
@@ -168,10 +169,13 @@ function DocumentHeader({
             />
             {isEditing && !isTemplate && isNew && (
               <Action>
-                <TemplatesMenu document={document} />
+                <TemplatesMenu
+                  document={document}
+                  onSelectTemplate={onSelectTemplate}
+                />
               </Action>
             )}
-            {!isEditing && canShareDocument && (!isMobile || !isTemplate) && (
+            {!isEditing && (!isMobile || !isTemplate) && (
               <Action>
                 <ShareButton document={document} />
               </Action>

app/scenes/Document/components/KeyboardShortcutsButton.js

@@ -27,12 +27,7 @@ function KeyboardShortcutsButton() {
       >
         <KeyboardShortcuts />
       </Guide>
-      <Tooltip
-        tooltip={t("Keyboard shortcuts")}
-        shortcut="?"
-        placement="left"
-        delay={500}
-      >
+      <Tooltip tooltip={t("Keyboard shortcuts")} shortcut="?" delay={500}>
         <Button onClick={handleOpenKeyboardShortcuts}>
           <KeyboardIcon />
         </Button>

app/scenes/Document/components/MultiplayerEditor.js

@@ -0,0 +1,144 @@
+// @flow
+import { HocuspocusProvider } from "@hocuspocus/provider";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { useHistory } from "react-router";
+import { IndexeddbPersistence } from "y-indexeddb";
+import * as Y from "yjs";
+import Editor, { type Props as EditorProps } from "components/Editor";
+import PlaceholderDocument from "components/PlaceholderDocument";
+import env from "env";
+import useCurrentToken from "hooks/useCurrentToken";
+import useCurrentUser from "hooks/useCurrentUser";
+import useStores from "hooks/useStores";
+import useToasts from "hooks/useToasts";
+import useUnmount from "hooks/useUnmount";
+import MultiplayerExtension from "multiplayer/MultiplayerExtension";
+import { homeUrl } from "utils/routeHelpers";
+
+type Props = {|
+  ...EditorProps,
+  id: string,
+|};
+
+function MultiplayerEditor(props: Props, ref: any) {
+  const documentId = props.id;
+  const history = useHistory();
+  const { t } = useTranslation();
+  const currentUser = useCurrentUser();
+  const { presence, ui } = useStores();
+  const token = useCurrentToken();
+  const [localProvider, setLocalProvider] = React.useState();
+  const [remoteProvider, setRemoteProvider] = React.useState();
+  const [isLocalSynced, setLocalSynced] = React.useState(false);
+  const [isRemoteSynced, setRemoteSynced] = React.useState(false);
+  const [ydoc] = React.useState(() => new Y.Doc());
+  const { showToast } = useToasts();
+
+  // Provider initialization must be within useLayoutEffect rather than useState
+  // or useMemo as both of these are ran twice in React StrictMode resulting in
+  // an orphaned websocket connection.
+  // see: https://github.com/facebook/react/issues/20090#issuecomment-715926549
+  React.useLayoutEffect(() => {
+    const debug = env.ENVIRONMENT === "development";
+    const name = `document.${documentId}`;
+
+    const localProvider = new IndexeddbPersistence(name, ydoc);
+    const provider = new HocuspocusProvider({
+      url: `${env.COLLABORATION_URL}/collaboration`,
+      debug,
+      name,
+      document: ydoc,
+      token,
+      maxReconnectTimeout: 10000,
+    });
+
+    provider.on("authenticationFailed", () => {
+      showToast(
+        t(
+          "Sorry, it looks like you don’t have permission to access the document"
+        )
+      );
+
+      history.replace(homeUrl());
+    });
+
+    provider.on("awarenessChange", ({ states }) => {
+      states.forEach(({ user }) => {
+        if (user) {
+          // could know if the user is editing here using `state.cursor` but it
+          // feels distracting in the UI, once multiplayer is on for everyone we
+          // can stop diffentiating
+          presence.touch(documentId, user.id, false);
+        }
+      });
+    });
+
+    localProvider.on("synced", () => setLocalSynced(true));
+    provider.on("synced", () => setRemoteSynced(true));
+
+    if (debug) {
+      provider.on("status", (ev) => console.log("status", ev.status));
+      provider.on("message", (ev) => console.log("incoming", ev.message));
+      provider.on("outgoingMessage", (ev) =>
+        console.log("outgoing", ev.message)
+      );
+      localProvider.on("synced", (ev) => console.log("local synced"));
+    }
+
+    provider.on("status", (ev) => ui.setMultiplayerStatus(ev.status));
+
+    setRemoteProvider(provider);
+    setLocalProvider(localProvider);
+  }, [history, showToast, t, documentId, ui, presence, token, ydoc]);
+
+  const user = React.useMemo(() => {
+    return {
+      id: currentUser.id,
+      name: currentUser.name,
+      color: currentUser.color,
+    };
+  }, [currentUser.id, currentUser.color, currentUser.name]);
+
+  const extensions = React.useMemo(() => {
+    if (!remoteProvider) {
+      return [];
+    }
+
+    return [
+      new MultiplayerExtension({
+        user,
+        provider: remoteProvider,
+        document: ydoc,
+      }),
+    ];
+  }, [remoteProvider, user, ydoc]);
+
+  useUnmount(() => {
+    remoteProvider?.destroy();
+    localProvider?.destroy();
+    ui.setMultiplayerStatus(undefined);
+  });
+
+  if (!extensions.length) {
+    return null;
+  }
+
+  if (isLocalSynced && !isRemoteSynced && !ydoc.get("default")._start) {
+    return <PlaceholderDocument includeTitle={false} delay={500} />;
+  }
+
+  return (
+    <Editor
+      {...props}
+      value={undefined}
+      defaultValue={undefined}
+      extensions={extensions}
+      ref={ref}
+    />
+  );
+}
+
+export default React.forwardRef<any, typeof MultiplayerEditor>(
+  MultiplayerEditor
+);

app/scenes/Document/components/ShareButton.js

@@ -61,6 +61,7 @@ function ShareButton({ document }: Props) {
           share={share}
           sharedParent={sharedParent}
           onSubmit={popover.hide}
+          visible={popover.visible}
         />
       </Popover>
     </>

app/scenes/Document/components/SharePopover.js

@@ -23,22 +23,34 @@ type Props = {|
   share: Share,
   sharedParent: ?Share,
   onSubmit: () => void,
+  visible: boolean,
 |};
 
-function SharePopover({ document, share, sharedParent, onSubmit }: Props) {
+function SharePopover({
+  document,
+  share,
+  sharedParent,
+  onSubmit,
+  visible,
+}: Props) {
   const { t } = useTranslation();
-  const { policies, shares } = useStores();
+  const { policies, shares, auth } = useStores();
   const { showToast } = useToasts();
   const [isCopied, setIsCopied] = React.useState(false);
   const timeout = React.useRef<?TimeoutID>();
   const can = policies.abilities(share ? share.id : "");
-  const canPublish = can.update && !document.isTemplate;
+  const documentAbilities = policies.abilities(document.id);
+  const canPublish =
+    can.update &&
+    !document.isTemplate &&
+    auth.team?.sharing &&
+    documentAbilities.share;
   const isPubliclyShared = (share && share.published) || sharedParent;
 
   React.useEffect(() => {
-    document.share();
+    if (visible) document.share();
     return () => clearTimeout(timeout.current);
-  }, [document]);
+  }, [document, visible]);
 
   const handlePublishedChange = React.useCallback(
     async (event) => {
@@ -102,7 +114,7 @@ function SharePopover({ document, share, sharedParent, onSubmit }: Props) {
         </Notice>
       )}
 
-      {canPublish && (
+      {canPublish ? (
         <SwitchWrapper>
           <Switch
             id="published"
@@ -132,8 +144,11 @@ function SharePopover({ document, share, sharedParent, onSubmit }: Props) {
             </SwitchText>
           </SwitchLabel>
         </SwitchWrapper>
+      ) : (
+        <HelpText>{t("Only team members with permission can view")}</HelpText>
       )}
-      {share && share.published && (
+
+      {canPublish && share?.published && (
         <SwitchWrapper>
           <Switch
             id="includeChildDocuments"

app/scenes/Document/index.js

@@ -1,3 +1,61 @@
 // @flow
+import * as React from "react";
+import { type Match } from "react-router-dom";
 import DataLoader from "./components/DataLoader";
-export default DataLoader;
+import Document from "./components/Document";
+import SocketPresence from "./components/SocketPresence";
+import useCurrentTeam from "hooks/useCurrentTeam";
+import useCurrentUser from "hooks/useCurrentUser";
+import useStores from "hooks/useStores";
+import { type LocationWithState } from "types";
+
+type Props = {|
+  location: LocationWithState,
+  match: Match,
+|};
+
+export default function DocumentScene(props: Props) {
+  const { ui } = useStores();
+  const team = useCurrentTeam();
+  const user = useCurrentUser();
+
+  React.useEffect(() => {
+    return () => ui.clearActiveDocument();
+  }, [ui]);
+
+  const { documentSlug, revisionId } = props.match.params;
+
+  // the urlId portion of the url does not include the slugified title
+  // we only want to force a re-mount of the document component when the
+  // document changes, not when the title does so only this portion is used
+  // for the key.
+  const urlParts = documentSlug ? documentSlug.split("-") : [];
+  const urlId = urlParts.length ? urlParts[urlParts.length - 1] : undefined;
+  const key = [urlId, revisionId].join("/");
+  const isMultiplayer = team.collaborativeEditing;
+
+  return (
+    <DataLoader key={key} match={props.match}>
+      {({ document, isEditing, ...rest }) => {
+        const isActive =
+          !document.isArchived && !document.isDeleted && !revisionId;
+
+        // TODO: Remove once multiplayer is 100% rollout, SocketPresence will
+        // no longer be required
+        if (isActive && !isMultiplayer) {
+          return (
+            <SocketPresence
+              documentId={document.id}
+              userId={user.id}
+              isEditing={isEditing}
+            >
+              <Document document={document} match={props.match} {...rest} />
+            </SocketPresence>
+          );
+        }
+
+        return <Document document={document} match={props.match} {...rest} />;
+      }}
+    </DataLoader>
+  );
+}

app/scenes/Home.js

@@ -64,7 +64,7 @@ function Home() {
             documents={documents.createdByUser(user)}
             fetch={documents.fetchOwned}
             options={{ user }}
-            empty={<Empty>{t("Weird, this shouldn’t ever be empty")}</Empty>}
+            empty={<Empty>{t("You haven’t created any documents yet")}</Empty>}
             showCollection
           />
         </Route>

app/scenes/Invite.js

@@ -5,11 +5,13 @@ import * as React from "react";
 import { useTranslation, Trans } from "react-i18next";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
+import type { Role } from "shared/types";
 import Button from "components/Button";
 import CopyToClipboard from "components/CopyToClipboard";
 import Flex from "components/Flex";
 import HelpText from "components/HelpText";
 import Input from "components/Input";
+import InputSelectRole from "components/InputSelectRole";
 import NudeButton from "components/NudeButton";
 import Tooltip from "components/Tooltip";
 import useCurrentTeam from "hooks/useCurrentTeam";
@@ -26,15 +28,16 @@ type Props = {|
 type InviteRequest = {
   email: string,
   name: string,
+  role: Role,
 };
 
 function Invite({ onSubmit }: Props) {
   const [isSaving, setIsSaving] = React.useState();
   const [linkCopied, setLinkCopied] = React.useState<boolean>(false);
   const [invites, setInvites] = React.useState<InviteRequest[]>([
-    { email: "", name: "" },
-    { email: "", name: "" },
-    { email: "", name: "" },
+    { email: "", name: "", role: "member" },
+    { email: "", name: "", role: "member" },
+    { email: "", name: "", role: "member" },
   ]);
 
   const { users, policies } = useStores();
@@ -84,7 +87,7 @@ function Invite({ onSubmit }: Props) {
 
     setInvites((prevInvites) => {
       const newInvites = [...prevInvites];
-      newInvites.push({ email: "", name: "" });
+      newInvites.push({ email: "", name: "", role: "member" });
       return newInvites;
     });
   }, [showToast, invites, t]);
@@ -109,6 +112,14 @@ function Invite({ onSubmit }: Props) {
     });
   }, [showToast, t]);
 
+  const handleRoleChange = React.useCallback((ev, index) => {
+    setInvites((prevInvites) => {
+      const newInvites = [...prevInvites];
+      newInvites[index]["role"] = ev.target.value;
+      return newInvites;
+    });
+  }, []);
+
   return (
     <form onSubmit={handleSubmit}>
       {team.guestSignin ? (
@@ -160,7 +171,7 @@ function Invite({ onSubmit }: Props) {
         </CopyBlock>
       )}
       {invites.map((invite, index) => (
-        <Flex key={index}>
+        <Flex key={index} gap={8}>
           <Input
             type="email"
             name="email"
@@ -173,7 +184,6 @@ function Invite({ onSubmit }: Props) {
             autoFocus={index === 0}
             flex
           />
-          &nbsp;&nbsp;
           <Input
             type="text"
             name="name"
@@ -182,7 +192,12 @@ function Invite({ onSubmit }: Props) {
             onChange={(ev) => handleChange(ev, index)}
             value={invite.name}
             required={!!invite.email}
-            flex
+          />
+          <InputSelectRole
+            onChange={(ev) => handleRoleChange(ev, index)}
+            value={invite.role}
+            labelHidden={index !== 0}
+            short
           />
           {index !== 0 && (
             <Remove>

app/scenes/Login/Notices.js

@@ -28,6 +28,11 @@ export default function Notices() {
           an allowed team domain.
         </NoticeAlert>
       )}
+      {notice === "malformed_user_info" && (
+        <NoticeAlert>
+          We could not read the user info supplied by your identity provider.
+        </NoticeAlert>
+      )}
       {notice === "email-auth-required" && (
         <NoticeAlert>
           Your account uses email sign-in, please sign-in with email to

app/scenes/Search/Search.js

@@ -268,6 +268,7 @@ class Search extends React.Component<Props> {
     const showShortcutTip =
       !this.pinToTop && location.state && location.state.fromMenu;
     const can = policies.abilities(auth.team?.id ? auth.team.id : "");
+    const canCollection = policies.abilities(this.collectionId || "");
 
     return (
       <Container auto>
@@ -335,7 +336,9 @@ class Search extends React.Component<Props> {
                   {can.createDocument && <Trans>Create a new document?</Trans>}
                 </HelpText>
                 <Wrapper>
-                  {this.collectionId && can.createDocument ? (
+                  {this.collectionId &&
+                  can.createDocument &&
+                  canCollection.update ? (
                     <Button
                       onClick={this.handleNewDoc}
                       icon={<PlusIcon />}

app/scenes/Settings/ImportExport.js

@@ -11,7 +11,10 @@ import Button from "components/Button";
 import Heading from "components/Heading";
 import HelpText from "components/HelpText";
 import Notice from "components/Notice";
+import PaginatedList from "components/PaginatedList";
 import Scene from "components/Scene";
+import Subheading from "components/Subheading";
+import FileOperationListItem from "./components/FileOperationListItem";
 import useCurrentUser from "hooks/useCurrentUser";
 import useStores from "hooks/useStores";
 import useToasts from "hooks/useToasts";
@@ -22,7 +25,7 @@ function ImportExport() {
   const { t } = useTranslation();
   const user = useCurrentUser();
   const fileRef = React.useRef();
-  const { collections } = useStores();
+  const { fileOperations, collections } = useStores();
   const { showToast } = useToasts();
   const [isLoading, setLoading] = React.useState(false);
   const [isImporting, setImporting] = React.useState(false);
@@ -178,11 +181,10 @@ function ImportExport() {
           {t("Choose File")}…
         </Button>
       )}
-
       <Heading>{t("Export")}</Heading>
       <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>."
+          defaults="A full export might take some time, consider exporting a single document or collection. The exported data is a zip of your documents in Markdown format. You may leave this page once the export has started – we will email a link to <em>{{ userEmail }}</em> when it’s complete."
           values={{ userEmail: user.email }}
           components={{ em: <strong /> }}
         />
@@ -199,6 +201,24 @@ function ImportExport() {
           ? `${t("Requesting Export")}…`
           : t("Export Data")}
       </Button>
+      <br />
+      <br />
+      <PaginatedList
+        items={fileOperations.orderedDataExports}
+        fetch={fileOperations.fetchPage}
+        options={{ type: "export" }}
+        heading={
+          <Subheading>
+            <Trans>Recent exports</Trans>
+          </Subheading>
+        }
+        renderItem={(item) => (
+          <FileOperationListItem
+            key={item.id + item.state}
+            fileOperation={item}
+          />
+        )}
+      />
     </Scene>
   );
 }

app/scenes/Settings/People.js

@@ -226,6 +226,7 @@ function People(props) {
         onChangePage={handleChangePage}
         page={page}
         totalPages={totalPages}
+        defaultSortDirection="ASC"
       />
       {can.inviteUser && (
         <Modal

app/scenes/Settings/Security.js

@@ -18,38 +18,29 @@ function Security() {
   const team = useCurrentTeam();
   const { t } = useTranslation();
   const { showToast } = useToasts();
-  const [sharing, setSharing] = useState(team.documentEmbeds);
-  const [documentEmbeds, setDocumentEmbeds] = useState(team.guestSignin);
-  const [guestSignin, setGuestSignin] = useState(team.sharing);
+  const [data, setData] = useState({
+    sharing: team.sharing,
+    documentEmbeds: team.documentEmbeds,
+    guestSignin: team.guestSignin,
+  });
 
-  const showSuccessMessage = debounce(() => {
-    showToast(t("Settings saved"), { type: "success" });
-  }, 500);
+  const showSuccessMessage = React.useCallback(
+    debounce(() => {
+      showToast(t("Settings saved"), { type: "success" });
+    }, 250),
+    [t, showToast]
+  );
 
   const handleChange = React.useCallback(
     async (ev: SyntheticInputEvent<*>) => {
-      switch (ev.target.name) {
-        case "sharing":
-          setSharing(ev.target.checked);
-          break;
-        case "documentEmbeds":
-          setDocumentEmbeds(ev.target.checked);
-          break;
-        case "guestSignin":
-          setGuestSignin(ev.target.checked);
-          break;
-        default:
-      }
+      const newData = { ...data, [ev.target.name]: ev.target.checked };
+      setData(newData);
 
-      await auth.updateTeam({
-        sharing,
-        documentEmbeds,
-        guestSignin,
-      });
+      await auth.updateTeam(newData);
 
       showSuccessMessage();
     },
-    [auth, sharing, documentEmbeds, guestSignin, showSuccessMessage]
+    [auth, data, showSuccessMessage]
   );
 
   return (
@@ -67,14 +58,14 @@ function Security() {
       <Checkbox
         label={t("Allow email authentication")}
         name="guestSignin"
-        checked={guestSignin}
+        checked={data.guestSignin}
         onChange={handleChange}
         note={t("When enabled, users can sign-in using their email address")}
       />
       <Checkbox
         label={t("Public document sharing")}
         name="sharing"
-        checked={sharing}
+        checked={data.sharing}
         onChange={handleChange}
         note={t(
           "When enabled, documents can be shared publicly on the internet by any team member"
@@ -83,7 +74,7 @@ function Security() {
       <Checkbox
         label={t("Rich service embeds")}
         name="documentEmbeds"
-        checked={documentEmbeds}
+        checked={data.documentEmbeds}
         onChange={handleChange}
         note={t(
           "Links to supported services are shown as rich embeds within your documents"

app/scenes/Settings/components/FileOperationListItem.js

@@ -0,0 +1,61 @@
+// @flow
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import FileOperation from "models/FileOperation";
+import Button from "components/Button";
+import ListItem from "components/List/Item";
+import Time from "components/Time";
+
+type Props = {|
+  fileOperation: FileOperation,
+|};
+
+const FileOperationListItem = ({ fileOperation }: Props) => {
+  const { t } = useTranslation();
+
+  const stateMapping = {
+    creating: t("Processing"),
+    expired: t("Expired"),
+    uploading: t("Processing"),
+    error: t("Error"),
+  };
+
+  return (
+    <ListItem
+      title={
+        fileOperation.collection
+          ? fileOperation.collection.name
+          : t("All collections")
+      }
+      subtitle={
+        <>
+          {fileOperation.state !== "complete" && (
+            <>{stateMapping[fileOperation.state]}&nbsp;•&nbsp;</>
+          )}
+          {t(`{{userName}} requested`, {
+            userName:
+              fileOperation.id === fileOperation.user.id
+                ? t("You")
+                : fileOperation.user.name,
+          })}
+          &nbsp;
+          <Time dateTime={fileOperation.createdAt} addSuffix shorten />
+          &nbsp;•&nbsp;{fileOperation.sizeInMB}
+        </>
+      }
+      actions={
+        fileOperation.state === "complete" ? (
+          <Button
+            as="a"
+            href={`/api/fileOperations.redirect?id=${fileOperation.id}`}
+            neutral
+          >
+            {t("Download")}
+          </Button>
+        ) : undefined
+      }
+    />
+  );
+};
+
+export default FileOperationListItem;

app/scenes/Starred.js

@@ -1,64 +0,0 @@
-// @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 { Action } from "components/Actions";
-import Empty from "components/Empty";
-import Heading from "components/Heading";
-import InputSearchPage from "components/InputSearchPage";
-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";
-import NewDocumentMenu from "menus/NewDocumentMenu";
-
-type Props = {
-  match: Match,
-};
-
-function Starred(props: Props) {
-  const { documents } = useStores();
-  const { t } = useTranslation();
-  const { fetchStarred, starred, starredAlphabetical } = documents;
-  const { sort } = props.match.params;
-
-  return (
-    <Scene
-      icon={<StarredIcon color="currentColor" />}
-      title={t("Starred")}
-      actions={
-        <>
-          <Action>
-            <InputSearchPage source="starred" label={t("Search documents")} />
-          </Action>
-          <Action>
-            <NewDocumentMenu />
-          </Action>
-        </>
-      }
-    >
-      <Heading>{t("Starred")}</Heading>
-      <PaginatedDocumentList
-        heading={
-          <Tabs>
-            <Tab to="/starred" exact>
-              {t("Recently updated")}
-            </Tab>
-            <Tab to="/starred/alphabetical" exact>
-              {t("Alphabetical")}
-            </Tab>
-          </Tabs>
-        }
-        empty={<Empty>{t("You’ve not starred any documents yet.")}</Empty>}
-        fetch={fetchStarred}
-        documents={sort === "alphabetical" ? starredAlphabetical : starred}
-        showCollection
-      />
-    </Scene>
-  );
-}
-
-export default observer(Starred);

app/scenes/Templates.js

@@ -1,6 +1,6 @@
 // @flow
 import { observer } from "mobx-react";
-import { TemplateIcon } from "outline-icons";
+import { ShapesIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { type Match } from "react-router-dom";
@@ -29,7 +29,7 @@ function Templates(props: Props) {
 
   return (
     <Scene
-      icon={<TemplateIcon color="currentColor" />}
+      icon={<ShapesIcon color="currentColor" />}
       title={t("Templates")}
       actions={
         <Action>

app/stores/DocumentsStore.js

@@ -603,7 +603,7 @@ export default class DocumentsStore extends BaseStore<Document> {
   async update(params: {
     id: string,
     title: string,
-    text: string,
+    text?: string,
     lastRevision: number,
   }) {
     const document = await super.update(params);

app/stores/EventsStore.js

@@ -0,0 +1,23 @@
+// @flow
+import { sortBy, filter } from "lodash";
+import { computed } from "mobx";
+import Event from "models/Event";
+import BaseStore from "./BaseStore";
+import RootStore from "./RootStore";
+
+export default class EventsStore extends BaseStore<Event> {
+  actions = ["list"];
+
+  constructor(rootStore: RootStore) {
+    super(rootStore, Event);
+  }
+
+  @computed
+  get orderedData(): Event[] {
+    return sortBy(Array.from(this.data.values()), "createdAt").reverse();
+  }
+
+  inDocument(documentId: string): Event[] {
+    return filter(this.orderedData, (event) => event.documentId === documentId);
+  }
+}

app/stores/FileOperationsStore.js

@@ -0,0 +1,27 @@
+// @flow
+import { orderBy } from "lodash";
+import { computed } from "mobx";
+import FileOperation from "models/FileOperation";
+import BaseStore from "./BaseStore";
+import RootStore from "./RootStore";
+
+export default class FileOperationsStore extends BaseStore<FileOperation> {
+  actions = ["list", "info"];
+
+  constructor(rootStore: RootStore) {
+    super(rootStore, FileOperation);
+  }
+
+  @computed
+  get exports(): FileOperation[] {
+    return Array.from(this.data.values()).reduce(
+      (acc, fileOp) => (fileOp.type === "export" ? [...acc, fileOp] : acc),
+      []
+    );
+  }
+
+  @computed
+  get orderedDataExports(): FileOperation[] {
+    return orderBy(this.exports, "createdAt", "desc");
+  }
+}

app/stores/RootStore.js

@@ -5,6 +5,8 @@ import CollectionGroupMembershipsStore from "./CollectionGroupMembershipsStore";
 import CollectionsStore from "./CollectionsStore";
 import DocumentPresenceStore from "./DocumentPresenceStore";
 import DocumentsStore from "./DocumentsStore";
+import EventsStore from "./EventsStore";
+import FileOperationsStore from "./FileOperationsStore";
 import GroupMembershipsStore from "./GroupMembershipsStore";
 import GroupsStore from "./GroupsStore";
 import IntegrationsStore from "./IntegrationsStore";
@@ -24,6 +26,7 @@ export default class RootStore {
   collections: CollectionsStore;
   collectionGroupMemberships: CollectionGroupMembershipsStore;
   documents: DocumentsStore;
+  events: EventsStore;
   groups: GroupsStore;
   groupMemberships: GroupMembershipsStore;
   integrations: IntegrationsStore;
@@ -37,6 +40,7 @@ export default class RootStore {
   users: UsersStore;
   views: ViewsStore;
   toasts: ToastsStore;
+  fileOperations: FileOperationsStore;
 
   constructor() {
     // PoliciesStore must be initialized before AuthStore
@@ -46,6 +50,7 @@ export default class RootStore {
     this.collections = new CollectionsStore(this);
     this.collectionGroupMemberships = new CollectionGroupMembershipsStore(this);
     this.documents = new DocumentsStore(this);
+    this.events = new EventsStore(this);
     this.groups = new GroupsStore(this);
     this.groupMemberships = new GroupMembershipsStore(this);
     this.integrations = new IntegrationsStore(this);
@@ -57,6 +62,7 @@ export default class RootStore {
     this.ui = new UiStore();
     this.users = new UsersStore(this);
     this.views = new ViewsStore(this);
+    this.fileOperations = new FileOperationsStore(this);
     this.toasts = new ToastsStore();
   }
 
@@ -66,6 +72,7 @@ export default class RootStore {
     this.collections.clear();
     this.collectionGroupMemberships.clear();
     this.documents.clear();
+    this.events.clear();
     this.groups.clear();
     this.groupMemberships.clear();
     this.integrations.clear();
@@ -75,6 +82,7 @@ export default class RootStore {
     this.policies.clear();
     this.revisions.clear();
     this.shares.clear();
+    this.fileOperations.clear();
     // this.ui omitted to keep ui settings between sessions
     this.users.clear();
     this.views.clear();

app/stores/UiStore.js

@@ -6,6 +6,8 @@ import Document from "models/Document";
 
 const UI_STORE = "UI_STORE";
 
+type Status = "connecting" | "connected" | "disconnected" | void;
+
 class UiStore {
   // has the user seen the prompt to change the UI language and actioned it
   @observable languagePromptDismissed: boolean;
@@ -24,6 +26,7 @@ class UiStore {
   @observable sidebarWidth: number;
   @observable sidebarCollapsed: boolean = false;
   @observable sidebarIsResizing: boolean = false;
+  @observable multiplayerStatus: Status;
 
   constructor() {
     // Rehydrate
@@ -93,6 +96,11 @@ class UiStore {
     }
   };
 
+  @action
+  setMultiplayerStatus = (status: Status): void => {
+    this.multiplayerStatus = status;
+  };
+
   @action
   setSidebarResizing = (sidebarIsResizing: boolean): void => {
     this.sidebarIsResizing = sidebarIsResizing;

app/stores/UsersStore.js

@@ -2,7 +2,7 @@
 import invariant from "invariant";
 import { filter, orderBy } from "lodash";
 import { observable, computed, action, runInAction } from "mobx";
-import type { Rank } from "shared/types";
+import type { Role } from "shared/types";
 import User from "models/User";
 import BaseStore from "./BaseStore";
 import RootStore from "./RootStore";
@@ -68,20 +68,20 @@ export default class UsersStore extends BaseStore<User> {
   @action
   promote = async (user: User) => {
     try {
-      this.updateCounts("Admin", user.rank);
+      this.updateCounts("admin", user.role);
       await this.actionOnUser("promote", user);
     } catch {
-      this.updateCounts(user.rank, "Admin");
+      this.updateCounts(user.role, "admin");
     }
   };
 
   @action
-  demote = async (user: User, to: Rank) => {
+  demote = async (user: User, to: Role) => {
     try {
-      this.updateCounts(to, user.rank);
+      this.updateCounts(to, user.role);
       await this.actionOnUser("demote", user, to);
     } catch {
-      this.updateCounts(user.rank, to);
+      this.updateCounts(user.role, to);
     }
   };
 
@@ -110,7 +110,7 @@ export default class UsersStore extends BaseStore<User> {
   };
 
   @action
-  invite = async (invites: { email: string, name: string }[]) => {
+  invite = async (invites: { email: string, name: string, role: Role }[]) => {
     const res = await client.post(`/users.invite`, { invites });
     invariant(res && res.data, "Data should be available");
     runInAction(`invite`, () => {
@@ -152,24 +152,24 @@ export default class UsersStore extends BaseStore<User> {
   }
 
   @action
-  updateCounts = (to: Rank, from: Rank) => {
-    if (to === "Admin") {
+  updateCounts = (to: Role, from: Role) => {
+    if (to === "admin") {
       this.counts.admins += 1;
-      if (from === "Viewer") {
+      if (from === "viewer") {
         this.counts.viewers -= 1;
       }
     }
-    if (to === "Viewer") {
+    if (to === "viewer") {
       this.counts.viewers += 1;
-      if (from === "Admin") {
+      if (from === "admin") {
         this.counts.admins -= 1;
       }
     }
-    if (to === "Member") {
-      if (from === "Viewer") {
+    if (to === "member") {
+      if (from === "viewer") {
         this.counts.viewers -= 1;
       }
-      if (from === "Admin") {
+      if (from === "admin") {
         this.counts.admins -= 1;
       }
     }
@@ -233,7 +233,7 @@ export default class UsersStore extends BaseStore<User> {
     return queriedUsers(users, query);
   };
 
-  actionOnUser = async (action: string, user: User, to?: Rank) => {
+  actionOnUser = async (action: string, user: User, to?: Role) => {
     const res = await client.post(`/users.${action}`, {
       id: user.id,
       to,