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
 
@@ -94,19 +112,23 @@ FORCE_HTTPS=true
 # the maintainers
 ENABLE_UPDATES=true
 
+# How many processes should be spawned. As a reasonable rule divide your servers
+# available memory by 512 for a rough estimate
+WEB_CONCURRENCY=1
+
 # Override the maxium size of document imports, could be required if you have
 # especially large Word documents with embedded imagery
 MAXIMUM_IMPORT_SIZE=5120000
 
 # You may enable or disable debugging categories to increase the noisiness of
 # logs. The default is a good balance
-DEBUG=cache,presenters,events,emails,mailer,utils,http,server,services
+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
 #
@@ -114,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=
@@ -134,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/Authenticated.js

@@ -6,6 +6,7 @@ import { Redirect } from "react-router-dom";
 import { isCustomSubdomain } from "shared/utils/domains";
 import LoadingIndicator from "components/LoadingIndicator";
 import useStores from "../hooks/useStores";
+import { changeLanguage } from "../utils/language";
 import env from "env";
 
 type Props = {
@@ -20,11 +21,7 @@ const Authenticated = ({ children }: Props) => {
   // Watching for language changes here as this is the earliest point we have
   // the user available and means we can start loading translations faster
   React.useEffect(() => {
-    if (language && i18n.language !== language) {
-      // Languages are stored in en_US format in the database, however the
-      // frontend translation framework (i18next) expects en-US
-      i18n.changeLanguage(language.replace("_", "-"));
-    }
+    changeLanguage(language, i18n);
   }, [i18n, language]);
 
   if (auth.authenticated) {

app/components/Bubble.js

@@ -1,7 +1,7 @@
 // @flow
 import * as React from "react";
 import styled from "styled-components";
-import { bounceIn } from "shared/styles/animations";
+import { bounceIn } from "styles/animations";
 
 type Props = {|
   count: number,

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

@@ -0,0 +1,78 @@
+// @flow
+import React from "react";
+import styled, { useTheme } from "styled-components";
+
+const cleanPercentage = (percentage) => {
+  const tooLow = !Number.isFinite(+percentage) || percentage < 0;
+  const tooHigh = percentage > 100;
+  return tooLow ? 0 : tooHigh ? 100 : +percentage;
+};
+
+const Circle = ({
+  color,
+  percentage,
+  offset,
+}: {
+  color: string,
+  percentage?: number,
+  offset: number,
+}) => {
+  const radius = offset * 0.7;
+  const circumference = 2 * Math.PI * radius;
+  let strokePercentage;
+  if (percentage) {
+    // because the circle is so small, anything greater than 85% appears like 100%
+    percentage = percentage > 85 && percentage < 100 ? 85 : percentage;
+    strokePercentage = percentage
+      ? ((100 - percentage) * circumference) / 100
+      : 0;
+  }
+
+  return (
+    <circle
+      r={radius}
+      cx={offset}
+      cy={offset}
+      fill="none"
+      stroke={strokePercentage !== circumference ? color : ""}
+      strokeWidth={2.5}
+      strokeDasharray={circumference}
+      strokeDashoffset={percentage ? strokePercentage : 0}
+      strokeLinecap="round"
+      style={{ transition: "stroke-dashoffset 0.6s ease 0s" }}
+    ></circle>
+  );
+};
+
+const CircularProgressBar = ({
+  percentage,
+  size = 16,
+}: {
+  percentage: number,
+  size?: number,
+}) => {
+  const theme = useTheme();
+  percentage = cleanPercentage(percentage);
+  const offset = Math.floor(size / 2);
+
+  return (
+    <SVG width={size} height={size}>
+      <g transform={`rotate(-90 ${offset} ${offset})`}>
+        <Circle color={theme.progressBarBackground} offset={offset} />
+        {percentage > 0 && (
+          <Circle
+            color={theme.primary}
+            percentage={percentage}
+            offset={offset}
+          />
+        )}
+      </g>
+    </SVG>
+  );
+};
+
+const SVG = styled.svg`
+  flex-shrink: 0;
+`;
+
+export default CircularProgressBar;

app/components/CollectionDescription.js

@@ -12,13 +12,15 @@ import LoadingIndicator from "components/LoadingIndicator";
 import NudeButton from "components/NudeButton";
 import useDebouncedCallback from "hooks/useDebouncedCallback";
 import useStores from "hooks/useStores";
+import useToasts from "hooks/useToasts";
 
 type Props = {|
   collection: Collection,
 |};
 
 function CollectionDescription({ collection }: Props) {
-  const { collections, ui, policies } = useStores();
+  const { collections, policies } = useStores();
+  const { showToast } = useToasts();
   const { t } = useTranslation();
   const [isExpanded, setExpanded] = React.useState(false);
   const [isEditing, setEditing] = React.useState(false);
@@ -53,7 +55,7 @@ function CollectionDescription({ collection }: Props) {
       });
       setDirty(false);
     } catch (err) {
-      ui.showToast(
+      showToast(
         t("Sorry, an error occurred saving the collection", {
           type: "error",
         })

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>,
@@ -15,6 +16,8 @@ type Props = {|
   target?: "_blank",
   as?: string | React.ComponentType<*>,
   hide?: () => void,
+  level?: number,
+  icon?: React.Node,
 |};
 
 const MenuItem = ({
@@ -24,22 +27,32 @@ const MenuItem = ({
   disabled,
   as,
   hide,
+  icon,
   ...rest
 }: Props) => {
-  // We bind to mousedown instead of onClick here as otherwise menu items do not
-  // work in Firefox which triggers the hideOnClickOutside handler first via
-  // mousedown.
-  const handleMouseDown = React.useCallback(
+  const handleClick = React.useCallback(
     (ev) => {
       if (onClick) {
         ev.preventDefault();
         ev.stopPropagation();
         onClick(ev);
       }
+
+      if (hide) {
+        hide();
+      }
     },
-    [onClick]
+    [onClick, hide]
   );
 
+  // Preventing default mousedown otherwise menu items do not work in Firefox,
+  // which triggers the hideOnClickOutside handler first via mousedown – hiding
+  // and un-rendering the menu contents.
+  const handleMouseDown = React.useCallback((ev) => {
+    ev.preventDefault();
+    ev.stopPropagation();
+  }, []);
+
   return (
     <BaseMenuItem
       onClick={disabled ? undefined : onClick}
@@ -52,8 +65,8 @@ const MenuItem = ({
           {...props}
           $toggleable={selected !== undefined}
           as={onClick ? "button" : as}
+          onClick={handleClick}
           onMouseDown={handleMouseDown}
-          onClick={hide}
         >
           {selected !== undefined && (
             <>
@@ -61,6 +74,7 @@ const MenuItem = ({
               &nbsp;
             </>
           )}
+          {icon && <MenuIconWrapper>{icon}</MenuIconWrapper>}
           {children}
         </MenuAnchor>
       )}
@@ -79,6 +93,7 @@ export const MenuAnchor = styled.a`
   margin: 0;
   border: 0;
   padding: 12px;
+  padding-left: ${(props) => 12 + props.level * 10}px;
   width: 100%;
   min-height: 32px;
   background: none;
@@ -119,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,49 +9,13 @@ 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";
 import ContextMenu from ".";
-
-type TMenuItem =
-  | {|
-      title: React.Node,
-      to: string,
-      visible?: boolean,
-      selected?: boolean,
-      disabled?: boolean,
-    |}
-  | {|
-      title: React.Node,
-      onClick: (event: SyntheticEvent<>) => void | Promise<void>,
-      visible?: boolean,
-      selected?: boolean,
-      disabled?: boolean,
-    |}
-  | {|
-      title: React.Node,
-      href: string,
-      visible?: boolean,
-      selected?: boolean,
-      disabled?: boolean,
-    |}
-  | {|
-      title: React.Node,
-      visible?: boolean,
-      disabled?: boolean,
-      style?: Object,
-      hover?: boolean,
-      items: TMenuItem[],
-    |}
-  | {|
-      type: "separator",
-      visible?: boolean,
-    |}
-  | {|
-      type: "heading",
-      visible?: boolean,
-      title: React.Node,
-    |};
+import { type MenuItem as TMenuItem } from "types";
 
 type Props = {|
   items: TMenuItem[],
@@ -83,7 +47,7 @@ const Submenu = React.forwardRef(({ templateItems, title, ...rest }, ref) => {
   );
 });
 
-function Template({ items, ...menu }: Props): React.Node {
+export function filterTemplateItems(items: TMenuItem[]): TMenuItem[] {
   let filtered = items.filter((item) => item.visible !== false);
 
   // this block literally just trims unneccessary separators
@@ -101,7 +65,19 @@ function Template({ items, ...menu }: Props): React.Node {
     return [...acc, item];
   }, []);
 
-  return filtered.map((item, index) => {
+  return filtered;
+}
+
+function Template({ items, ...menu }: Props): React.Node {
+  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
@@ -110,6 +86,7 @@ function Template({ items, ...menu }: Props): React.Node {
           key={index}
           disabled={item.disabled}
           selected={item.selected}
+          icon={item.icon}
           {...menu}
         >
           {item.title}
@@ -124,7 +101,9 @@ function Template({ items, ...menu }: Props): React.Node {
           key={index}
           disabled={item.disabled}
           selected={item.selected}
-          target="_blank"
+          level={item.level}
+          target={item.href.startsWith("#") ? undefined : "_blank"}
+          icon={item.icon}
           {...menu}
         >
           {item.title}
@@ -140,6 +119,7 @@ function Template({ items, ...menu }: Props): React.Node {
           disabled={item.disabled}
           selected={item.selected}
           key={index}
+          icon={item.icon}
           {...menu}
         >
           {item.title}
@@ -153,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}
         />
       );
@@ -163,8 +143,22 @@ function Template({ items, ...menu }: Props): React.Node {
       return <Separator key={index} />;
     }
 
+    if (item.type === "heading") {
+      return <Header>{item.title}</Header>;
+    }
+
+    console.warn("Unrecognized menu item", item);
     return null;
   });
 }
 
+function Title({ title, icon }) {
+  return (
+    <Flex align="center">
+      {icon && <MenuIconWrapper>{icon}</MenuIconWrapper>}
+      {title}
+    </Flex>
+  );
+}
+
 export default React.memo<Props>(Template);

app/components/ContextMenu/index.js

@@ -4,16 +4,18 @@ import { Portal } from "react-portal";
 import { Menu } from "reakit/Menu";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
+import usePrevious from "hooks/usePrevious";
 import {
   fadeIn,
-  fadeAndScaleIn,
-  fadeAndSlideIn,
-} from "shared/styles/animations";
-import usePrevious from "hooks/usePrevious";
+  fadeAndSlideUp,
+  fadeAndSlideDown,
+  mobileContextMenu,
+} from "styles/animations";
 
 type Props = {|
   "aria-label": string,
   visible?: boolean,
+  placement?: string,
   animating?: boolean,
   children: React.Node,
   onOpen?: () => void,
@@ -44,13 +46,25 @@ export default function ContextMenu({
   return (
     <>
       <Menu hideOnClickOutside preventBodyScroll {...rest}>
-        {(props) => (
-          <Position {...props}>
-            <Background dir="auto">
-              {rest.visible || rest.animating ? children : null}
-            </Background>
-          </Position>
-        )}
+        {(props) => {
+          // kind of hacky, but this is an effective way of telling which way
+          // the menu will _actually_ be placed when taking into account screen
+          // positioning.
+          const topAnchor = props.style.top === "0";
+          const rightAnchor = props.placement === "bottom-end";
+
+          return (
+            <Position {...props}>
+              <Background
+                dir="auto"
+                topAnchor={topAnchor}
+                rightAnchor={rightAnchor}
+              >
+                {rest.visible || rest.animating ? children : null}
+              </Background>
+            </Position>
+          );
+        }}
       </Menu>
       {(rest.visible || rest.animating) && (
         <Portal>
@@ -91,7 +105,7 @@ const Position = styled.div`
 `;
 
 const Background = styled.div`
-  animation: ${fadeAndSlideIn} 200ms ease;
+  animation: ${mobileContextMenu} 200ms ease;
   transform-origin: 50% 100%;
   max-width: 100%;
   background: ${(props) => props.theme.menuBackground};
@@ -109,9 +123,10 @@ const Background = styled.div`
   }
 
   ${breakpoint("tablet")`
-    animation: ${fadeAndScaleIn} 200ms ease;
+    animation: ${(props) =>
+      props.topAnchor ? fadeAndSlideDown : fadeAndSlideUp} 200ms ease;
     transform-origin: ${(props) =>
-      props.left !== undefined ? "25%" : "75%"} 0;
+      props.rightAnchor === "bottom-end" ? "75%" : "25%"} 0;
     max-width: 276px;
     background: ${(props) => props.theme.menuBackground};
     box-shadow: ${(props) => props.theme.menuShadow};

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

app/components/DocumentHistory/components/Revision.js

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

@@ -15,6 +15,7 @@ import Flex from "components/Flex";
 import Highlight from "components/Highlight";
 import StarButton, { AnimatedStar } from "components/Star";
 import Tooltip from "components/Tooltip";
+import useBoolean from "hooks/useBoolean";
 import useCurrentTeam from "hooks/useCurrentTeam";
 import useCurrentUser from "hooks/useCurrentUser";
 import useStores from "hooks/useStores";
@@ -46,7 +47,7 @@ function DocumentListItem(props: Props, ref) {
   const { policies } = useStores();
   const currentUser = useCurrentUser();
   const currentTeam = useCurrentTeam();
-  const [menuOpen, setMenuOpen] = React.useState(false);
+  const [menuOpen, handleMenuOpen, handleMenuClose] = useBoolean();
   const {
     document,
     showNestedDocuments,
@@ -65,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
@@ -125,7 +127,8 @@ function DocumentListItem(props: Props, ref) {
         {document.isTemplate &&
           !document.isArchived &&
           !document.isDeleted &&
-          can.createDocument && (
+          can.createDocument &&
+          canCollection.update && (
             <>
               <Button
                 as={Link}
@@ -143,8 +146,8 @@ function DocumentListItem(props: Props, ref) {
         <DocumentMenu
           document={document}
           showPin={showPin}
-          onOpen={() => setMenuOpen(true)}
-          onClose={() => setMenuOpen(false)}
+          onOpen={handleMenuOpen}
+          onClose={handleMenuClose}
           modal={false}
         />
       </Actions>

app/components/DocumentMeta.js

@@ -6,8 +6,10 @@ import { Link } from "react-router-dom";
 import styled from "styled-components";
 import Document from "models/Document";
 import DocumentBreadcrumb from "components/DocumentBreadcrumb";
+import DocumentTasks from "components/DocumentTasks";
 import Flex from "components/Flex";
 import Time from "components/Time";
+import useCurrentUser from "hooks/useCurrentUser";
 import useStores from "hooks/useStores";
 
 const Container = styled(Flex)`
@@ -50,7 +52,9 @@ function DocumentMeta({
   ...rest
 }: Props) {
   const { t } = useTranslation();
-  const { collections, auth } = useStores();
+  const { collections } = useStores();
+  const user = useCurrentUser();
+
   const {
     modifiedSinceViewed,
     updatedAt,
@@ -61,6 +65,8 @@ function DocumentMeta({
     deletedAt,
     isDraft,
     lastViewedAt,
+    isTasks,
+    isTemplate,
   } = document;
 
   // Prevent meta information from displaying if updatedBy is not available.
@@ -69,6 +75,8 @@ function DocumentMeta({
     return null;
   }
 
+  const collection = collections.get(document.collectionId);
+  const lastUpdatedByCurrentUser = user.id === updatedBy.id;
   let content;
 
   if (deletedAt) {
@@ -103,14 +111,16 @@ function DocumentMeta({
     );
   } else {
     content = (
-      <Modified highlight={modifiedSinceViewed}>
+      <Modified highlight={modifiedSinceViewed && !lastUpdatedByCurrentUser}>
         {t("updated")} <Time dateTime={updatedAt} addSuffix />
       </Modified>
     );
   }
 
-  const collection = collections.get(document.collectionId);
-  const updatedByMe = auth.user && auth.user.id === updatedBy.id;
+  const nestedDocumentsCount = collection
+    ? collection.getDocumentChildren(document.id).length
+    : 0;
+  const canShowProgressBar = isTasks && !isTemplate;
 
   const timeSinceNow = () => {
     if (isDraft || !showLastViewed) {
@@ -131,13 +141,9 @@ function DocumentMeta({
     );
   };
 
-  const nestedDocumentsCount = collection
-    ? collection.getDocumentChildren(document.id).length
-    : 0;
-
   return (
     <Container align="center" rtl={document.dir === "rtl"} {...rest} dir="ltr">
-      {updatedByMe ? t("You") : updatedBy.name}&nbsp;
+      {lastUpdatedByCurrentUser ? t("You") : updatedBy.name}&nbsp;
       {to ? <Link to={to}>{content}</Link> : content}
       {showCollection && collection && (
         <span>
@@ -149,11 +155,17 @@ function DocumentMeta({
       )}
       {showNestedDocuments && nestedDocumentsCount > 0 && (
         <span>
-          &nbsp;&middot; {nestedDocumentsCount}{" "}
+          &nbsp;• {nestedDocumentsCount}{" "}
           {t("nested document", { count: nestedDocumentsCount })}
         </span>
       )}
       &nbsp;{timeSinceNow()}
+      {canShowProgressBar && (
+        <>
+          &nbsp;•&nbsp;
+          <DocumentTasks document={document} />
+        </>
+      )}
       {children}
     </Container>
   );

app/components/DocumentMetaWithViews.js

@@ -42,7 +42,7 @@ function DocumentMetaWithViews({ to, isDraft, document, ...rest }: Props) {
         <PopoverDisclosure {...popover}>
           {(props) => (
             <>
-              &nbsp;&middot;&nbsp;
+              &nbsp;•&nbsp;
               <a {...props}>
                 {t("Viewed by")}{" "}
                 {onlyYou

app/components/DocumentTasks.js

@@ -0,0 +1,59 @@
+// @flow
+import { DoneIcon } from "outline-icons";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import styled, { useTheme } from "styled-components";
+import CircularProgressBar from "components/CircularProgressBar";
+import usePrevious from "../hooks/usePrevious";
+import Document from "../models/Document";
+import { bounceIn } from "styles/animations";
+
+type Props = {|
+  document: Document,
+|};
+
+function getMessage(t, total, completed) {
+  if (completed === 0) {
+    return t(`{{ total }} task`, { total, count: total });
+  } else if (completed === total) {
+    return t(`{{ completed }} task done`, { completed, count: completed });
+  } else {
+    return t(`{{ completed }} of {{ total }} tasks`, {
+      total,
+      completed,
+    });
+  }
+}
+
+function DocumentTasks({ document }: Props) {
+  const { tasks, tasksPercentage } = document;
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const { completed, total } = tasks;
+  const done = completed === total;
+  const previousDone = usePrevious(done);
+  const message = getMessage(t, total, completed);
+
+  return (
+    <>
+      {completed === total ? (
+        <Done
+          color={theme.primary}
+          size={20}
+          $animated={done && previousDone === false}
+        />
+      ) : (
+        <CircularProgressBar percentage={tasksPercentage} />
+      )}
+      &nbsp;{message}
+    </>
+  );
+}
+
+const Done = styled(DoneIcon)`
+  margin: -1px;
+  animation: ${(props) => (props.$animated ? bounceIn : "none")} 600ms;
+  transform-origin: center center;
+`;
+
+export default DocumentTasks;

app/components/Editor.js

@@ -3,13 +3,15 @@ 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 { light } from "shared/styles/theme";
+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";
 import { isModKey } from "utils/keyboard";
 import { uploadFile } from "utils/uploadFile";
@@ -29,6 +31,8 @@ export type Props = {|
   grow?: boolean,
   disableEmbeds?: boolean,
   ui?: UiStore,
+  style?: Object,
+  extensions?: Extension[],
   shareId?: ?string,
   autoFocus?: boolean,
   template?: boolean,
@@ -58,8 +62,9 @@ type PropsWithRef = Props & {
 };
 
 function Editor(props: PropsWithRef) {
-  const { id, ui, shareId, history } = props;
+  const { id, shareId, history } = props;
   const { t } = useTranslation();
+  const { showToast } = useToasts();
   const isPrinting = useMediaQuery("print");
 
   const onUploadImage = React.useCallback(
@@ -106,11 +111,9 @@ function Editor(props: PropsWithRef) {
 
   const onShowToast = React.useCallback(
     (message: string) => {
-      if (ui) {
-        ui.showToast(message);
-      }
+      showToast(message);
     },
-    [ui]
+    [showToast]
   );
 
   const dictionary = React.useMemo(() => {
@@ -148,6 +151,7 @@ function Editor(props: PropsWithRef) {
       hr: t("Divider"),
       image: t("Image"),
       imageUploadError: t("Sorry, an error occurred uploading the image"),
+      imageCaptionPlaceholder: t("Write a caption"),
       info: t("Info"),
       infoNotice: t("Info notice"),
       link: t("Link"),
@@ -245,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/ErrorBoundary.js

@@ -3,6 +3,7 @@ import * as Sentry from "@sentry/react";
 import { observable } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
+import { withTranslation, type TFunction, Trans } from "react-i18next";
 import styled from "styled-components";
 import Button from "components/Button";
 import CenteredContent from "components/CenteredContent";
@@ -11,10 +12,11 @@ import PageTitle from "components/PageTitle";
 import { githubIssuesUrl } from "../../shared/utils/routeHelpers";
 import env from "env";
 
-type Props = {
+type Props = {|
   children: React.Node,
   reloadOnChunkMissing?: boolean,
-};
+  t: TFunction,
+|};
 
 @observer
 class ErrorBoundary extends React.Component<Props> {
@@ -55,6 +57,8 @@ class ErrorBoundary extends React.Component<Props> {
   };
 
   render() {
+    const { t } = this.props;
+
     if (this.error) {
       const error = this.error;
       const isReported = !!env.SENTRY_DSN && env.DEPLOYMENT === "hosted";
@@ -63,15 +67,21 @@ class ErrorBoundary extends React.Component<Props> {
       if (isChunkError) {
         return (
           <CenteredContent>
-            <PageTitle title="Module failed to load" />
-            <h1>Loading Failed</h1>
+            <PageTitle title={t("Module failed to load")} />
+            <h1>
+              <Trans>Loading Failed</Trans>
+            </h1>
             <HelpText>
-              Sorry, part of the application failed to load. This may be because
-              it was updated since you opened the tab or because of a failed
-              network request. Please try reloading.
+              <Trans>
+                Sorry, part of the application failed to load. This may be
+                because it was updated since you opened the tab or because of a
+                failed network request. Please try reloading.
+              </Trans>
             </HelpText>
             <p>
-              <Button onClick={this.handleReload}>Reload</Button>
+              <Button onClick={this.handleReload}>
+                <Trans>Reload</Trans>
+              </Button>
             </p>
           </CenteredContent>
         );
@@ -79,23 +89,32 @@ class ErrorBoundary extends React.Component<Props> {
 
       return (
         <CenteredContent>
-          <PageTitle title="Something Unexpected Happened" />
-          <h1>Something Unexpected Happened</h1>
+          <PageTitle title={t("Something Unexpected Happened")} />
+          <h1>
+            <Trans>Something Unexpected Happened</Trans>
+          </h1>
           <HelpText>
-            Sorry, an unrecoverable error occurred
-            {isReported && " – our engineers have been notified"}. Please try
-            reloading the page, it may have been a temporary glitch.
+            <Trans
+              defaults="Sorry, an unrecoverable error occurred{{notified}}. Please try reloading the page, it may have been a temporary glitch."
+              values={{
+                notified: isReported
+                  ? ` – ${t("our engineers have been notified")}`
+                  : undefined,
+              }}
+            />
           </HelpText>
           {this.showDetails && <Pre>{error.toString()}</Pre>}
           <p>
-            <Button onClick={this.handleReload}>Reload</Button>{" "}
+            <Button onClick={this.handleReload}>
+              <Trans>Reload</Trans>
+            </Button>{" "}
             {this.showDetails ? (
               <Button onClick={this.handleReportBug} neutral>
-                Report a Bug…
+                <Trans>Report a Bug</Trans>…
               </Button>
             ) : (
               <Button onClick={this.handleShowDetails} neutral>
-                Show Details…
+                <Trans>Show Detail</Trans>…
               </Button>
             )}
           </p>
@@ -114,4 +133,4 @@ const Pre = styled.pre`
   white-space: pre-wrap;
 `;
 
-export default ErrorBoundary;
+export default withTranslation()<ErrorBoundary>(ErrorBoundary);

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

@@ -1,6 +1,6 @@
 // @flow
 import styled from "styled-components";
-import { fadeIn } from "shared/styles/animations";
+import { fadeIn } from "styles/animations";
 
 const Fade = styled.span`
   animation: ${fadeIn} ${(props) => props.timing || "250ms"} ease-in-out;

app/components/Flex.js

@@ -45,7 +45,7 @@ const Container = styled.div`
   align-items: ${({ align }) => align};
   justify-content: ${({ justify }) => justify};
   flex-shrink: ${({ shrink }) => (shrink ? 1 : "initial")};
-  gap: ${({ gap }) => `${gap}px` || "initial"};
+  gap: ${({ gap }) => (gap ? `${gap}px` : "initial")};
   min-height: 0;
   min-width: 0;
 `;

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}>
@@ -72,6 +72,10 @@ const Actions = styled(Flex)`
   flex-basis: 0;
   min-width: auto;
   padding-left: 8px;
+
+  ${breakpoint("tablet")`
+    position: unset;
+  `};
 `;
 
 const Wrapper = styled(Flex)`
@@ -84,14 +88,14 @@ const Wrapper = styled(Flex)`
   transform: translate3d(0, 0, 0);
   backdrop-filter: blur(20px);
   min-height: 56px;
+  justify-content: flex-start;
 
   @media print {
     display: none;
   }
 
-  justify-content: flex-start;
   ${breakpoint("tablet")`
-    padding: ${(props) => (props.isCompact ? "12px" : `24px 24px 0`)};
+    padding: 16px 16px 0;
     justify-content: "center";
   `};
 `;

app/components/HoverPreview.js

@@ -4,10 +4,10 @@ import { transparentize } from "polished";
 import * as React from "react";
 import { Portal } from "react-portal";
 import styled from "styled-components";
-import { fadeAndSlideIn } from "shared/styles/animations";
 import parseDocumentSlug from "shared/utils/parseDocumentSlug";
 import DocumentsStore from "stores/DocumentsStore";
 import HoverPreviewDocument from "components/HoverPreviewDocument";
+import { fadeAndSlideDown } from "styles/animations";
 import { isInternalUrl } from "utils/urls";
 
 const DELAY_OPEN = 300;
@@ -136,7 +136,7 @@ function HoverPreview({ node, ...rest }: Props) {
 }
 
 const Animate = styled.div`
-  animation: ${fadeAndSlideIn} 150ms ease;
+  animation: ${fadeAndSlideDown} 150ms ease;
 
   @media print {
     display: none;

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

@@ -29,6 +29,10 @@ const RealInput = styled.input`
   background: none;
   color: ${(props) => props.theme.text};
   height: 30px;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 
   &:disabled,
   &::placeholder {

app/components/InputRich.js

@@ -1,58 +1,58 @@
 // @flow
-import { observable } from "mobx";
-import { observer, inject } from "mobx-react";
+import { observer } from "mobx-react";
 import * as React from "react";
+import { Trans } from "react-i18next";
 import styled, { withTheme } from "styled-components";
-import UiStore from "stores/UiStore";
 import Editor from "components/Editor";
 import HelpText from "components/HelpText";
 import { LabelText, Outline } from "components/Input";
+import useStores from "hooks/useStores";
 
 type Props = {|
   label: string,
   minHeight?: number,
   maxHeight?: number,
   readOnly?: boolean,
-  ui: UiStore,
 |};
 
-@observer
-class InputRich extends React.Component<Props> {
-  @observable editorComponent: React.ComponentType<any>;
-  @observable focused: boolean = false;
+function InputRich({ label, minHeight, maxHeight, ...rest }: Props) {
+  const [focused, setFocused] = React.useState<boolean>(false);
+  const { ui } = useStores();
 
-  handleBlur = () => {
-    this.focused = false;
-  };
+  const handleBlur = React.useCallback(() => {
+    setFocused(false);
+  }, []);
 
-  handleFocus = () => {
-    this.focused = true;
-  };
+  const handleFocus = React.useCallback(() => {
+    setFocused(true);
+  }, []);
 
-  render() {
-    const { label, minHeight, maxHeight, ui, ...rest } = this.props;
-
-    return (
-      <>
-        <LabelText>{label}</LabelText>
-        <StyledOutline
-          maxHeight={maxHeight}
-          minHeight={minHeight}
-          focused={this.focused}
+  return (
+    <>
+      <LabelText>{label}</LabelText>
+      <StyledOutline
+        maxHeight={maxHeight}
+        minHeight={minHeight}
+        focused={focused}
+      >
+        <React.Suspense
+          fallback={
+            <HelpText>
+              <Trans>Loading editor</Trans>…
+            </HelpText>
+          }
         >
-          <React.Suspense fallback={<HelpText>Loading editor…</HelpText>}>
-            <Editor
-              onBlur={this.handleBlur}
-              onFocus={this.handleFocus}
-              ui={ui}
-              grow
-              {...rest}
-            />
-          </React.Suspense>
-        </StyledOutline>
-      </>
-    );
-  }
+          <Editor
+            onBlur={handleBlur}
+            onFocus={handleFocus}
+            ui={ui}
+            grow
+            {...rest}
+          />
+        </React.Suspense>
+      </StyledOutline>
+    </>
+  );
 }
 
 const StyledOutline = styled(Outline)`
@@ -67,4 +67,4 @@ const StyledOutline = styled(Outline)`
   }
 `;
 
-export default inject("ui")(withTheme(InputRich));
+export default observer(withTheme(InputRich));

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/List/Placeholder.js

@@ -4,18 +4,19 @@ import * as React from "react";
 import styled from "styled-components";
 import Fade from "components/Fade";
 import Flex from "components/Flex";
-import Mask from "components/Mask";
+import PlaceholderText from "components/PlaceholderText";
 
 type Props = {
   count?: number,
 };
 
-const Placeholder = ({ count }: Props) => {
+const ListPlaceHolder = ({ count }: Props) => {
   return (
     <Fade>
       {times(count || 2, (index) => (
         <Item key={index} column auto>
-          <Mask />
+          <PlaceholderText header delay={0.2 * index} />
+          <PlaceholderText delay={0.2 * index} />
         </Item>
       ))}
     </Fade>
@@ -23,7 +24,7 @@ const Placeholder = ({ count }: Props) => {
 };
 
 const Item = styled(Flex)`
-  padding: 15px 0 16px;
+  padding: 10px 0;
 `;
 
-export default Placeholder;
+export default ListPlaceHolder;

app/components/LoadingIndicator/LoadingIndicatorBar.js

@@ -11,16 +11,14 @@ const LoadingIndicatorBar = () => {
 };
 
 const loadingFrame = keyframes`
-  from {margin-left: -100%; z-index:100;}
-  to {margin-left: 100%; }
+  from { margin-left: -100%; }
+  to { margin-left: 100%; }
 `;
 
 const Container = styled.div`
   position: fixed;
   top: 0;
   z-index: ${(props) => props.theme.depths.loadingIndicatorBar};
-
-  background-color: #03a9f4;
   width: 100%;
   animation: ${loadingFrame} 4s ease-in-out infinite;
   animation-delay: 250ms;
@@ -30,7 +28,7 @@ const Container = styled.div`
 const Loader = styled.div`
   width: 100%;
   height: 2px;
-  background-color: #03a9f4;
+  background-color: ${(props) => props.theme.primary};
 `;
 
 export default LoadingIndicatorBar;

app/components/LoadingPlaceholder/ListPlaceholder.js

@@ -1,30 +0,0 @@
-// @flow
-import { times } from "lodash";
-import * as React from "react";
-import styled from "styled-components";
-import Fade from "components/Fade";
-import Flex from "components/Flex";
-import Mask from "components/Mask";
-
-type Props = {
-  count?: number,
-};
-
-const ListPlaceHolder = ({ count }: Props) => {
-  return (
-    <Fade>
-      {times(count || 2, (index) => (
-        <Item key={index} column auto>
-          <Mask header />
-          <Mask />
-        </Item>
-      ))}
-    </Fade>
-  );
-};
-
-const Item = styled(Flex)`
-  padding: 10px 0;
-`;
-
-export default ListPlaceHolder;

app/components/LoadingPlaceholder/LoadingPlaceholder.js

@@ -1,28 +0,0 @@
-// @flow
-import * as React from "react";
-import styled from "styled-components";
-import DelayedMount from "components/DelayedMount";
-import Fade from "components/Fade";
-import Flex from "components/Flex";
-import Mask from "components/Mask";
-
-export default function LoadingPlaceholder(props: Object) {
-  return (
-    <DelayedMount>
-      <Wrapper>
-        <Flex column auto {...props}>
-          <Mask height={34} />
-          <br />
-          <Mask />
-          <Mask />
-          <Mask />
-        </Flex>
-      </Wrapper>
-    </DelayedMount>
-  );
-}
-
-const Wrapper = styled(Fade)`
-  display: block;
-  margin: 40px 0;
-`;

app/components/LoadingPlaceholder/index.js

@@ -1,6 +0,0 @@
-// @flow
-import ListPlaceholder from "./ListPlaceholder";
-import LoadingPlaceholder from "./LoadingPlaceholder";
-
-export default LoadingPlaceholder;
-export { ListPlaceholder };

app/components/LocaleTime.js

@@ -1,35 +1,9 @@
 // @flow
-import { format, formatDistanceToNow } from "date-fns";
-import {
-  enUS,
-  de,
-  fr,
-  es,
-  it,
-  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,
-  fr_FR: fr,
-  it_IT: it,
-  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 = [];
 
@@ -53,6 +27,8 @@ type Props = {
   tooltipDelay?: number,
   addSuffix?: boolean,
   shorten?: boolean,
+  relative?: boolean,
+  format?: string,
 };
 
 function LocaleTime({
@@ -60,6 +36,8 @@ function LocaleTime({
   children,
   dateTime,
   shorten,
+  format,
+  relative,
   tooltipDelay,
 }: Props) {
   const userLocale = useUserLocale();
@@ -78,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/Modal.js

@@ -7,12 +7,12 @@ import { useTranslation } from "react-i18next";
 import { Dialog, DialogBackdrop, useDialogState } from "reakit/Dialog";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import { fadeAndScaleIn } from "shared/styles/animations";
 import Flex from "components/Flex";
 import NudeButton from "components/NudeButton";
 import Scrollable from "components/Scrollable";
 import usePrevious from "hooks/usePrevious";
 import useUnmount from "hooks/useUnmount";
+import { fadeAndScaleIn } from "styles/animations";
 
 let openModals = 0;
 

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

@@ -1,5 +1,4 @@
 // @flow
-import { observer } from "mobx-react";
 import * as React from "react";
 import Document from "models/Document";
 import DocumentListItem from "components/DocumentListItem";
@@ -19,24 +18,26 @@ type Props = {|
   showTemplate?: boolean,
 |};
 
-@observer
-class PaginatedDocumentList extends React.Component<Props> {
-  render() {
-    const { empty, heading, documents, fetch, options, ...rest } = this.props;
-
-    return (
-      <PaginatedList
-        items={documents}
-        empty={empty}
-        heading={heading}
-        fetch={fetch}
-        options={options}
-        renderItem={(item) => (
-          <DocumentListItem key={item.id} document={item} {...rest} />
-        )}
-      />
-    );
-  }
-}
+const PaginatedDocumentList = React.memo<Props>(function PaginatedDocumentList({
+  empty,
+  heading,
+  documents,
+  fetch,
+  options,
+  ...rest
+}: Props) {
+  return (
+    <PaginatedList
+      items={documents}
+      empty={empty}
+      heading={heading}
+      fetch={fetch}
+      options={options}
+      renderItem={(item) => (
+        <DocumentListItem key={item.id} document={item} {...rest} />
+      )}
+    />
+  );
+});
 
 export default PaginatedDocumentList;

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 { ListPlaceholder } from "components/LoadingPlaceholder";
+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} />
@@ -128,7 +169,7 @@ class PaginatedList extends React.Component<Props> {
         )}
         {showLoading && (
           <DelayedMount>
-            <ListPlaceholder count={5} />
+            <PlaceholderList count={5} />
           </DelayedMount>
         )}
       </>
@@ -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

@@ -0,0 +1,56 @@
+// @flow
+import * as React from "react";
+import styled from "styled-components";
+import DelayedMount from "components/DelayedMount";
+import Fade from "components/Fade";
+import Flex from "components/Flex";
+import PlaceholderText from "components/PlaceholderText";
+
+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 delay={delay}>
+      <Wrapper>
+        <Fade>
+          <Flex column auto>
+            <PlaceholderText height={34} maxWidth={70} />
+            <PlaceholderText delay={0.2} maxWidth={40} />
+            <br />
+
+            {content}
+          </Flex>
+        </Fade>
+      </Wrapper>
+    </DelayedMount>
+  );
+}
+
+const Wrapper = styled(Fade)`
+  display: block;
+  margin: 40px 0;
+`;

app/components/PlaceholderText.js

@@ -2,44 +2,48 @@
 import * as React from "react";
 import styled from "styled-components";
 import { randomInteger } from "shared/random";
-import { pulsate } from "shared/styles/animations";
 import Flex from "components/Flex";
+import { pulsate } from "styles/animations";
 
 type Props = {|
   header?: boolean,
   height?: number,
   minWidth?: number,
   maxWidth?: number,
+  delay?: number,
 |};
 
-class Mask extends React.Component<Props> {
-  width: number;
+class PlaceholderText extends React.Component<Props> {
+  width = randomInteger(this.props.minWidth || 75, this.props.maxWidth || 100);
 
   shouldComponentUpdate() {
     return false;
   }
 
-  constructor(props: Props) {
-    super();
-    this.width = randomInteger(props.minWidth || 75, props.maxWidth || 100);
-  }
-
   render() {
-    return <Redacted width={this.width} height={this.props.height} />;
+    return (
+      <Mask
+        width={this.width}
+        height={this.props.height}
+        delay={this.props.delay}
+      />
+    );
   }
 }
 
-const Redacted = styled(Flex)`
+const Mask = styled(Flex)`
   width: ${(props) => (props.header ? props.width / 2 : props.width)}%;
   height: ${(props) =>
     props.height ? props.height : props.header ? 24 : 18}px;
   margin-bottom: 6px;
+  border-radius: 6px;
   background-color: ${(props) => props.theme.divider};
-  animation: ${pulsate} 1.3s infinite;
+  animation: ${pulsate} 2s infinite;
+  animation-delay: ${(props) => props.delay || 0}s;
 
   &:last-child {
     margin-bottom: 0;
   }
 `;
 
-export default Mask;
+export default PlaceholderText;

app/components/Popover.js

@@ -2,7 +2,7 @@
 import * as React from "react";
 import { Popover as ReakitPopover } from "reakit/Popover";
 import styled from "styled-components";
-import { fadeAndScaleIn } from "shared/styles/animations";
+import { fadeAndScaleIn } from "styles/animations";
 
 type Props = {
   children: React.Node,

app/components/Sidebar/Main.js

@@ -1,13 +1,10 @@
 // @flow
 import { observer } from "mobx-react";
 import {
-  ArchiveIcon,
-  HomeIcon,
   EditIcon,
   SearchIcon,
-  StarredIcon,
   ShapesIcon,
-  TrashIcon,
+  HomeIcon,
   PlusIcon,
   SettingsIcon,
 } from "outline-icons";
@@ -23,16 +20,23 @@ import Flex from "components/Flex";
 import Modal from "components/Modal";
 import Scrollable from "components/Scrollable";
 import Sidebar from "./Sidebar";
+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";
+import useCurrentUser from "hooks/useCurrentUser";
 import useStores from "hooks/useStores";
 import AccountMenu from "menus/AccountMenu";
 
 function MainSidebar() {
   const { t } = useTranslation();
-  const { policies, auth, documents } = useStores();
+  const { policies, documents } = useStores();
+  const team = useCurrentTeam();
+  const user = useCurrentUser();
   const [inviteModalOpen, setInviteModalOpen] = React.useState(false);
   const [
     createCollectionModalOpen,
@@ -71,9 +75,6 @@ function MainSidebar() {
     dndArea,
   ]);
 
-  const { user, team } = auth;
-  if (!user || !team) return null;
-
   const can = policies.abilities(team.id);
 
   return (
@@ -108,23 +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="/templates"
-                  icon={<ShapesIcon color="currentColor" />}
-                  exact={false}
-                  label={t("Templates")}
-                  active={
-                    documents.active ? documents.active.template : undefined
-                  }
-                />
-              )}
               {can.createDocument && (
                 <SidebarLink
                   to="/drafts"
@@ -145,32 +129,32 @@ function MainSidebar() {
                 />
               )}
             </Section>
+            <Starred />
             <Section auto>
               <Collections
                 onCreateCollection={handleCreateCollectionModalOpen}
               />
             </Section>
             <Section>
-              <SidebarLink
-                to="/archive"
-                icon={<ArchiveIcon color="currentColor" />}
-                exact={false}
-                label={t("Archive")}
-                active={
-                  documents.active
-                    ? documents.active.isArchived && !documents.active.isDeleted
-                    : undefined
-                }
-              />
-              <SidebarLink
-                to="/trash"
-                icon={<TrashIcon color="currentColor" />}
-                exact={false}
-                label={t("Trash")}
-                active={
-                  documents.active ? documents.active.isDeleted : undefined
-                }
-              />
+              {can.createDocument && (
+                <>
+                  <SidebarLink
+                    to="/templates"
+                    icon={<ShapesIcon color="currentColor" />}
+                    exact={false}
+                    label={t("Templates")}
+                    active={
+                      documents.active
+                        ? documents.active.isTemplate &&
+                          !documents.active.isDeleted &&
+                          !documents.active.isArchived
+                        : undefined
+                    }
+                  />
+                  <ArchiveLink documents={documents} />
+                  <TrashLink documents={documents} />
+                </>
+              )}
               <SidebarLink
                 to="/settings"
                 icon={<SettingsIcon color="currentColor" />}

app/components/Sidebar/Sidebar.js

@@ -6,13 +6,13 @@ import { Portal } from "react-portal";
 import { useLocation } from "react-router-dom";
 import styled, { useTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import { fadeIn } from "shared/styles/animations";
 import Fade from "components/Fade";
 import Flex from "components/Flex";
 import ResizeBorder from "./components/ResizeBorder";
 import Toggle, { ToggleButton, Positioner } from "./components/Toggle";
 import usePrevious from "hooks/usePrevious";
 import useStores from "hooks/useStores";
+import { fadeIn } from "styles/animations";
 
 let ANIMATION_MS = 250;
 let isFirstRender = true;

app/components/Sidebar/components/ArchiveLink.js

@@ -0,0 +1,43 @@
+// @flow
+import { observer } from "mobx-react";
+import { ArchiveIcon } from "outline-icons";
+import * as React from "react";
+import { useDrop } from "react-dnd";
+import { useTranslation } from "react-i18next";
+import useStores from "../../../hooks/useStores";
+import SidebarLink from "./SidebarLink";
+import useToasts from "hooks/useToasts";
+
+function ArchiveLink({ documents }) {
+  const { policies } = useStores();
+  const { t } = useTranslation();
+  const { showToast } = useToasts();
+
+  const [{ isDocumentDropping }, dropToArchiveDocument] = useDrop({
+    accept: "document",
+    drop: async (item, monitor) => {
+      const document = documents.get(item.id);
+      await document.archive();
+      showToast(t("Document archived"), { type: "success" });
+    },
+    canDrop: (item, monitor) => policies.abilities(item.id).archive,
+    collect: (monitor) => ({
+      isDocumentDropping: monitor.isOver(),
+    }),
+  });
+
+  return (
+    <div ref={dropToArchiveDocument}>
+      <SidebarLink
+        to="/archive"
+        icon={<ArchiveIcon color="currentColor" open={isDocumentDropping} />}
+        exact={false}
+        label={t("Archive")}
+        active={documents.active?.isArchived && !documents.active?.isDeleted}
+        isActiveDrop={isDocumentDropping}
+      />
+    </div>
+  );
+}
+
+export default observer(ArchiveLink);

app/components/Sidebar/components/CollectionLink.js

@@ -12,6 +12,7 @@ import DropCursor from "./DropCursor";
 import DropToImport from "./DropToImport";
 import EditableTitle from "./EditableTitle";
 import SidebarLink from "./SidebarLink";
+import useBoolean from "hooks/useBoolean";
 import useStores from "hooks/useStores";
 import CollectionMenu from "menus/CollectionMenu";
 import CollectionSortMenu from "menus/CollectionSortMenu";
@@ -35,7 +36,7 @@ function CollectionLink({
   isDraggingAnyCollection,
   onChangeDragging,
 }: Props) {
-  const [menuOpen, setMenuOpen] = React.useState(false);
+  const [menuOpen, handleMenuOpen, handleMenuClose] = useBoolean();
 
   const handleTitleChange = React.useCallback(
     async (name: string) => {
@@ -158,19 +159,20 @@ function CollectionLink({
                 />
               }
               exact={false}
+              depth={0.5}
               menu={
                 <>
                   {can.update && (
                     <CollectionSortMenuWithMargin
                       collection={collection}
-                      onOpen={() => setMenuOpen(true)}
-                      onClose={() => setMenuOpen(false)}
+                      onOpen={handleMenuOpen}
+                      onClose={handleMenuClose}
                     />
                   )}
                   <CollectionMenu
                     collection={collection}
-                    onOpen={() => setMenuOpen(true)}
-                    onClose={() => setMenuOpen(false)}
+                    onOpen={handleMenuOpen}
+                    onClose={handleMenuClose}
                   />
                 </>
               }
@@ -197,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,19 +1,21 @@
 // @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 CollectionsLoading from "./CollectionsLoading";
 import DropCursor from "./DropCursor";
-import Header from "./Header";
+import PlaceholderCollections from "./PlaceholderCollections";
 import SidebarLink from "./SidebarLink";
 import useCurrentTeam from "hooks/useCurrentTeam";
+import useToasts from "hooks/useToasts";
+
 type Props = {
   onCreateCollection: () => void,
 };
@@ -22,6 +24,8 @@ function Collections({ onCreateCollection }: Props) {
   const [isFetching, setFetching] = React.useState(false);
   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();
@@ -38,7 +42,7 @@ function Collections({ onCreateCollection }: Props) {
           setFetching(true);
           await collections.fetchPage({ limit: 100 });
         } catch (error) {
-          ui.showToast(
+          showToast(
             t("Collections could not be loaded, please reload the app"),
             {
               type: "error",
@@ -51,7 +55,7 @@ function Collections({ onCreateCollection }: Props) {
       }
     }
     load();
-  }, [collections, isFetching, ui, fetchError, t]);
+  }, [collections, isFetching, showToast, fetchError, t]);
 
   const [{ isCollectionDropping }, dropToReorderCollection] = useDrop({
     accept: "collection",
@@ -96,6 +100,7 @@ function Collections({ onCreateCollection }: Props) {
           icon={<PlusIcon color="currentColor" />}
           label={`${t("New collection")}…`}
           exact
+          depth={0.5}
         />
       )}
     </>
@@ -104,18 +109,31 @@ function Collections({ onCreateCollection }: Props) {
   if (!collections.isLoaded || fetchError) {
     return (
       <Flex column>
-        <Header>{t("Collections")}</Header>
-        <CollectionsLoading />
+        <SidebarLink
+          label={t("Collections")}
+          icon={<Disclosure expanded={expanded} color="currentColor" />}
+          disabled
+        />
+        <PlaceholderCollections />
       </Flex>
     );
   }
 
   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/CollectionsLoading.js

@@ -1,21 +0,0 @@
-// @flow
-import * as React from "react";
-import styled from "styled-components";
-import Mask from "components/Mask";
-
-function CollectionsLoading() {
-  return (
-    <Wrapper>
-      <Mask />
-      <Mask />
-      <Mask />
-    </Wrapper>
-  );
-}
-
-const Wrapper = styled.div`
-  margin: 4px 16px;
-  width: 75%;
-`;
-
-export default CollectionsLoading;

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,10 +7,12 @@ 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";
 import SidebarLink from "./SidebarLink";
+import useBoolean from "hooks/useBoolean";
 import useStores from "hooks/useStores";
 import DocumentMenu from "menus/DocumentMenu";
 import { type NavigationNode } from "types";
@@ -120,7 +121,7 @@ function DocumentLink(
     [documents, document]
   );
 
-  const [menuOpen, setMenuOpen] = React.useState(false);
+  const [menuOpen, handleMenuOpen, handleMenuClose] = useBoolean();
   const isMoving = documents.movingDocumentId === node.id;
   const manualSort = collection?.sort.field === "index";
 
@@ -132,7 +133,11 @@ function DocumentLink(
       isDragging: !!monitor.isDragging(),
     }),
     canDrag: (monitor) => {
-      return policies.abilities(node.id).move;
+      return (
+        policies.abilities(node.id).move ||
+        policies.abilities(node.id).archive ||
+        policies.abilities(node.id).delete
+      );
     },
   });
 
@@ -205,7 +210,7 @@ function DocumentLink(
 
   return (
     <>
-      <div style={{ position: "relative" }} onDragLeave={resetHoverExpanding}>
+      <Relative onDragLeave={resetHoverExpanding}>
         <Draggable
           key={node.id}
           ref={drag}
@@ -239,14 +244,15 @@ function DocumentLink(
                 depth={depth}
                 exact={false}
                 showActions={menuOpen}
+                scrollIntoViewIfNeeded={!document?.isStarred}
                 ref={ref}
                 menu={
                   document && !isMoving ? (
                     <Fade>
                       <DocumentMenu
                         document={document}
-                        onOpen={() => setMenuOpen(true)}
-                        onClose={() => setMenuOpen(false)}
+                        onOpen={handleMenuOpen}
+                        onClose={handleMenuClose}
                       />
                     </Fade>
                   ) : undefined
@@ -258,7 +264,7 @@ function DocumentLink(
         {manualSort && (
           <DropCursor isActiveDrop={isOverReorder} innerRef={dropToReorder} />
         )}
-      </div>
+      </Relative>
       {expanded && !isDragging && (
         <>
           {node.children.map((childNode, index) => (
@@ -280,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/DropToImport.js

@@ -7,6 +7,7 @@ import styled, { css } from "styled-components";
 import LoadingIndicator from "components/LoadingIndicator";
 import useImportDocument from "hooks/useImportDocument";
 import useStores from "hooks/useStores";
+import useToasts from "hooks/useToasts";
 
 type Props = {|
   children: React.Node,
@@ -18,7 +19,8 @@ type Props = {|
 
 function DropToImport({ disabled, children, collectionId, documentId }: Props) {
   const { t } = useTranslation();
-  const { ui, documents, policies } = useStores();
+  const { documents, policies } = useStores();
+  const { showToast } = useToasts();
   const { handleFiles, isImporting } = useImportDocument(
     collectionId,
     documentId
@@ -27,11 +29,11 @@ function DropToImport({ disabled, children, collectionId, documentId }: Props) {
   const can = policies.abilities(collectionId);
 
   const handleRejection = React.useCallback(() => {
-    ui.showToast(
+    showToast(
       t("Document not supported – try Markdown, Plain text, HTML, or Word"),
       { type: "error" }
     );
-  }, [t, ui]);
+  }, [t, showToast]);
 
   if (disabled || !can.update) {
     return children;

app/components/Sidebar/components/EditableTitle.js

@@ -1,7 +1,7 @@
 // @flow
 import * as React from "react";
 import styled from "styled-components";
-import useStores from "hooks/useStores";
+import useToasts from "hooks/useToasts";
 
 type Props = {|
   onSubmit: (title: string) => Promise<void>,
@@ -13,7 +13,7 @@ function EditableTitle({ title, onSubmit, canUpdate }: Props) {
   const [isEditing, setIsEditing] = React.useState(false);
   const [originalValue, setOriginalValue] = React.useState(title);
   const [value, setValue] = React.useState(title);
-  const { ui } = useStores();
+  const { showToast } = useToasts();
 
   React.useEffect(() => {
     setValue(title);
@@ -39,32 +39,40 @@ function EditableTitle({ title, onSubmit, canUpdate }: Props) {
     [originalValue]
   );
 
-  const handleSave = React.useCallback(async () => {
-    setIsEditing(false);
+  const handleSave = React.useCallback(
+    async (ev) => {
+      ev.preventDefault();
 
-    if (value === originalValue) {
-      return;
-    }
+      setIsEditing(false);
 
-    if (document) {
-      try {
-        await onSubmit(value);
-        setOriginalValue(value);
-      } catch (error) {
+      const trimmedValue = value.trim();
+      if (trimmedValue === originalValue || trimmedValue.length === 0) {
         setValue(originalValue);
-        ui.showToast(error.message, {
-          type: "error",
-        });
-        throw error;
+        return;
       }
-    }
-  }, [ui, originalValue, value, onSubmit]);
+
+      if (document) {
+        try {
+          await onSubmit(trimmedValue);
+          setOriginalValue(trimmedValue);
+        } catch (error) {
+          setValue(originalValue);
+          showToast(error.message, {
+            type: "error",
+          });
+          throw error;
+        }
+      }
+    },
+    [originalValue, showToast, value, onSubmit]
+  );
 
   return (
     <>
       {isEditing ? (
         <form onSubmit={handleSave}>
           <Input
+            dir="auto"
             type="text"
             value={value}
             onKeyDown={handleKeyDown}

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

@@ -0,0 +1,22 @@
+// @flow
+import * as React from "react";
+import styled from "styled-components";
+import PlaceholderText from "components/PlaceholderText";
+
+function PlaceholderCollections() {
+  return (
+    <Wrapper>
+      <PlaceholderText />
+      <PlaceholderText delay={0.2} />
+      <PlaceholderText delay={0.4} />
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div`
+  margin: 4px 16px;
+  margin-left: 40px;
+  width: 75%;
+`;
+
+export default PlaceholderCollections;

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

@@ -1,4 +1,5 @@
 // @flow
+import { transparentize } from "polished";
 import * as React from "react";
 import { withRouter, type RouterHistory, type Match } from "react-router-dom";
 import styled, { withTheme } from "styled-components";
@@ -27,6 +28,7 @@ type Props = {
   theme: Theme,
   exact?: boolean,
   depth?: number,
+  scrollIntoViewIfNeeded?: boolean,
 };
 
 function SidebarLink(
@@ -48,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]);
 
@@ -72,6 +75,7 @@ function SidebarLink(
     <>
       <Link
         $isActiveDrop={isActiveDrop}
+        scrollIntoViewIfNeeded={scrollIntoViewIfNeeded}
         activeStyle={isActiveDrop ? activeDropStyle : activeStyle}
         style={active ? activeStyle : style}
         onClick={onClick}
@@ -84,7 +88,7 @@ function SidebarLink(
         ref={ref}
       >
         {icon && <IconWrapper>{icon}</IconWrapper>}
-        <Label dir="auto">{label}</Label>
+        <Label>{label}</Label>
       </Link>
       {menu && <Actions showActions={showActions}>{menu}</Actions>}
     </>
@@ -130,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) =>
@@ -145,7 +150,8 @@ const Link = styled(NavLink)`
 
   &:focus {
     color: ${(props) => props.theme.text};
-    background: ${(props) => props.theme.black05};
+    background: ${(props) =>
+      transparentize("0.25", props.theme.sidebarItemBackground)};
   }
 
   ${breakpoint("tablet")`
@@ -154,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;
       }
     }
 
@@ -176,6 +180,9 @@ const Label = styled.div`
   width: 100%;
   max-height: 4.8em;
   line-height: 1.6;
+  * {
+    unicode-bidi: plaintext;
+  }
 `;
 
 export default withRouter(withTheme(React.forwardRef(SidebarLink)));

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/Sidebar/components/TrashLink.js

@@ -0,0 +1,62 @@
+// @flow
+import { observer } from "mobx-react";
+import { TrashIcon } from "outline-icons";
+import * as React from "react";
+import { useState } from "react";
+import { useDrop } from "react-dnd";
+import { useTranslation } from "react-i18next";
+import DocumentDelete from "scenes/DocumentDelete";
+import Modal from "components/Modal";
+import useStores from "../../../hooks/useStores";
+import SidebarLink from "./SidebarLink";
+
+function TrashLink({ documents }) {
+  const { policies } = useStores();
+  const { t } = useTranslation();
+  const [document, setDocument] = useState();
+
+  const [{ isDocumentDropping }, dropToTrashDocument] = useDrop({
+    accept: "document",
+    drop: (item, monitor) => {
+      const doc = documents.get(item.id);
+      // without setTimeout it was not working in firefox v89.0.2-ubuntu
+      // on dropping mouseup is considered as clicking outside the modal, and it immediately closes
+      setTimeout(() => setDocument(doc), 1);
+    },
+    canDrop: (item, monitor) => policies.abilities(item.id).delete,
+    collect: (monitor) => ({
+      isDocumentDropping: monitor.isOver(),
+    }),
+  });
+
+  return (
+    <>
+      <div ref={dropToTrashDocument}>
+        <SidebarLink
+          to="/trash"
+          icon={<TrashIcon color="currentColor" open={isDocumentDropping} />}
+          exact={false}
+          label={t("Trash")}
+          active={documents.active?.isDeleted}
+          isActiveDrop={isDocumentDropping}
+        />
+      </div>
+      {document && (
+        <Modal
+          title={t("Delete {{ documentName }}", {
+            documentName: document.noun,
+          })}
+          onRequestClose={() => setDocument(undefined)}
+          isOpen
+        >
+          <DocumentDelete
+            document={document}
+            onSubmit={() => setDocument(undefined)}
+          />
+        </Modal>
+      )}
+    </>
+  );
+}
+
+export default observer(TrashLink);

app/components/SocketProvider.js

@@ -8,10 +8,11 @@ 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";
-import UiStore from "stores/UiStore";
+import ToastsStore from "stores/ToastsStore";
 import ViewsStore from "stores/ViewsStore";
 import { getVisibilityListener, getPageVisible } from "utils/pageVisibility";
 
@@ -27,7 +28,8 @@ type Props = {
   policies: PoliciesStore,
   views: ViewsStore,
   auth: AuthStore,
-  ui: UiStore,
+  toasts: ToastsStore,
+  fileOperations: FileOperationsStore,
 };
 
 @observer
@@ -72,7 +74,7 @@ class SocketProvider extends React.Component<Props> {
 
     const {
       auth,
-      ui,
+      toasts,
       documents,
       collections,
       groups,
@@ -80,6 +82,7 @@ class SocketProvider extends React.Component<Props> {
       policies,
       presence,
       views,
+      fileOperations,
     } = this.props;
     if (!auth.token) return;
 
@@ -113,7 +116,7 @@ class SocketProvider extends React.Component<Props> {
 
     this.socket.on("unauthorized", (err) => {
       this.socket.authenticated = false;
-      ui.showToast(err.message, {
+      toasts.showToast(err.message, {
         type: "error",
       });
       throw err;
@@ -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) => {
@@ -338,12 +356,13 @@ class SocketProvider extends React.Component<Props> {
 
 export default inject(
   "auth",
-  "ui",
+  "toasts",
   "documents",
   "collections",
   "groups",
   "memberships",
   "presence",
   "policies",
-  "views"
+  "views",
+  "fileOperations"
 )(SocketProvider);

app/components/Tab.js

@@ -1,14 +1,14 @@
 // @flow
+import { m } from "framer-motion";
 import * as React from "react";
-import { NavLink } 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 TabLink = styled(NavLink)`
+const TabLink = styled(NavLinkWithChildrenFunc)`
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -20,19 +20,47 @@ const TabLink = styled(NavLink)`
 
   &:hover {
     color: ${(props) => props.theme.textSecondary};
-    border-bottom: 3px solid ${(props) => props.theme.divider};
-    padding-bottom: 5px;
   }
 `;
 
-function Tab({ theme, ...rest }: Props) {
+const Active = styled(m.div)`
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  width: 100%;
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px;
+  background: ${(props) => props.theme.textSecondary};
+`;
+
+const transition = {
+  type: "spring",
+  stiffness: 500,
+  damping: 30,
+};
+
+export default function Tab({ children, ...rest }: Props) {
+  const theme = useTheme();
   const activeStyle = {
-    paddingBottom: "5px",
-    borderBottom: `3px solid ${theme.textSecondary}`,
     color: theme.textSecondary,
   };
 
-  return <TabLink {...rest} activeStyle={activeStyle} />;
+  return (
+    <TabLink {...rest} activeStyle={activeStyle}>
+      {(match) => (
+        <>
+          {children}
+          {match && (
+            <Active
+              layoutId="underline"
+              initial={false}
+              transition={transition}
+            />
+          )}
+        </>
+      )}
+    </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";
@@ -8,7 +9,7 @@ import styled from "styled-components";
 import Button from "components/Button";
 import Empty from "components/Empty";
 import Flex from "components/Flex";
-import Mask from "components/Mask";
+import PlaceholderText from "components/PlaceholderText";
 
 export type Props = {|
   data: any[],
@@ -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>
           )}
@@ -170,7 +193,7 @@ export const Placeholder = ({
         <Row key={row}>
           {new Array(columns).fill().map((_, col) => (
             <Cell key={col}>
-              <Mask minWidth={25} maxWidth={75} />
+              <PlaceholderText minWidth={25} maxWidth={75} />
             </Cell>
           ))}
         </Row>
@@ -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/Tabs.js

@@ -1,13 +1,40 @@
 // @flow
+import { AnimateSharedLayout } from "framer-motion";
+import { transparentize } from "polished";
 import * as React from "react";
 import styled from "styled-components";
+import useWindowSize from "hooks/useWindowSize";
 
 const Nav = styled.nav`
   border-bottom: 1px solid ${(props) => props.theme.divider};
   margin: 12px 0;
   overflow-y: auto;
   white-space: nowrap;
-  transition: opacity 250ms ease-out;
+
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  &:after {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 50px;
+    height: 100%;
+    pointer-events: none;
+    background: ${(props) =>
+      props.$shadowVisible
+        ? `linear-gradient(
+      90deg,
+      ${transparentize(1, props.theme.background)} 0%,
+      ${props.theme.background} 100%
+    )`
+        : `transparent`};
+  }
 `;
 
 // When sticky we need extra background coverage around the sides otherwise
@@ -30,11 +57,36 @@ export const Separator = styled.span`
   margin-top: 6px;
 `;
 
-const Tabs = (props: {}) => {
+const Tabs = ({ children }: {| children: React.Node |}) => {
+  const ref = React.useRef<?HTMLDivElement>();
+  const [shadowVisible, setShadow] = React.useState(false);
+  const { width } = useWindowSize();
+
+  const updateShadows = React.useCallback(() => {
+    const c = ref.current;
+    if (!c) return;
+
+    const scrollLeft = c.scrollLeft;
+    const wrapperWidth = c.scrollWidth - c.clientWidth;
+    const fade = !!(wrapperWidth - scrollLeft !== 0);
+
+    if (fade !== shadowVisible) {
+      setShadow(fade);
+    }
+  }, [shadowVisible]);
+
+  React.useEffect(() => {
+    updateShadows();
+  }, [width, updateShadows]);
+
   return (
-    <Sticky>
-      <Nav {...props}></Nav>
-    </Sticky>
+    <AnimateSharedLayout>
+      <Sticky>
+        <Nav ref={ref} onScroll={updateShadows} $shadowVisible={shadowVisible}>
+          {children}
+        </Nav>
+      </Sticky>
+    </AnimateSharedLayout>
   );
 };
 

app/components/Theme.js

@@ -2,10 +2,10 @@
 import { observer } from "mobx-react";
 import * as React from "react";
 import { ThemeProvider } from "styled-components";
-import GlobalStyles from "shared/styles/globals";
-import { dark, light, lightMobile, darkMobile } from "shared/styles/theme";
+import { dark, light, lightMobile, darkMobile } from "shared/theme";
 import useMediaQuery from "hooks/useMediaQuery";
 import useStores from "hooks/useStores";
+import GlobalStyles from "styles/globals";
 
 const empty = {};
 

app/components/Time.js

@@ -11,6 +11,7 @@ type Props = {
   children?: React.Node,
   tooltipDelay?: number,
   addSuffix?: boolean,
+  format?: string,
   shorten?: boolean,
 };
 
@@ -32,7 +33,7 @@ function Time(props: Props) {
         <time dateTime={props.dateTime}>{props.children || content}</time>
       }
     >
-      <LocaleTime {...props} />
+      <LocaleTime tooltipDelay={250} {...props} />
     </React.Suspense>
   );
 }

app/components/Toast.js

@@ -3,7 +3,7 @@ import { CheckboxIcon, InfoIcon, WarningIcon } from "outline-icons";
 import { darken } from "polished";
 import * as React from "react";
 import styled, { css } from "styled-components";
-import { fadeAndScaleIn, pulse } from "shared/styles/animations";
+import { fadeAndScaleIn, pulse } from "styles/animations";
 import type { Toast as TToast } from "types";
 
 type Props = {

app/components/Toasts.js

@@ -6,15 +6,15 @@ import Toast from "components/Toast";
 import useStores from "hooks/useStores";
 
 function Toasts() {
-  const { ui } = useStores();
+  const { toasts } = useStores();
 
   return (
     <List>
-      {ui.orderedToasts.map((toast) => (
+      {toasts.orderedData.map((toast) => (
         <Toast
           key={toast.id}
           toast={toast}
-          onRequestClose={() => ui.removeToast(toast.id)}
+          onRequestClose={() => toasts.hideToast(toast.id)}
         />
       ))}
     </List>

app/hooks/useBoolean.js

@@ -0,0 +1,23 @@
+// @flow
+import * as React from "react";
+
+type InitialState = boolean | (() => boolean);
+
+/**
+ * React hook to manage booleans
+ *
+ * @param initialState the initial boolean state value
+ */
+export default function useBoolean(initialState: InitialState = false) {
+  const [value, setValue] = React.useState(initialState);
+
+  const setTrue = React.useCallback(() => {
+    setValue(true);
+  }, []);
+
+  const setFalse = React.useCallback(() => {
+    setValue(false);
+  }, []);
+
+  return [value, setTrue, setFalse];
+}

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

@@ -4,6 +4,7 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
 import useStores from "hooks/useStores";
+import useToasts from "hooks/useToasts";
 
 let importingLock = false;
 
@@ -11,7 +12,8 @@ export default function useImportDocument(
   collectionId: string,
   documentId?: string
 ): {| handleFiles: (files: File[]) => Promise<void>, isImporting: boolean |} {
-  const { documents, ui } = useStores();
+  const { documents } = useStores();
+  const { showToast } = useToasts();
   const [isImporting, setImporting] = React.useState(false);
   const { t } = useTranslation();
   const history = useHistory();
@@ -51,7 +53,7 @@ export default function useImportDocument(
           }
         }
       } catch (err) {
-        ui.showToast(`${t("Could not import file")}. ${err.message}`, {
+        showToast(`${t("Could not import file")}. ${err.message}`, {
           type: "error",
         });
       } finally {
@@ -59,7 +61,7 @@ export default function useImportDocument(
         importingLock = false;
       }
     },
-    [t, ui, documents, history, collectionId, documentId]
+    [t, documents, history, showToast, collectionId, documentId]
   );
 
   return {

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/hooks/useToasts.js

@@ -0,0 +1,8 @@
+// @flow
+import useStores from "./useStores";
+
+export default function useToasts() {
+  const { toasts } = useStores();
+
+  return { showToast: toasts.showToast, hideToast: toasts.hideToast };
+}

app/index.js

@@ -1,5 +1,6 @@
 // @flow
 import "focus-visible";
+import { LazyMotion } from "framer-motion";
 import { createBrowserHistory } from "history";
 import { Provider } from "mobx-react";
 import * as React from "react";
@@ -49,6 +50,10 @@ if ("serviceWorker" in window.navigator) {
   });
 }
 
+// Make sure to return the specific export containing the feature bundle.
+const loadFeatures = () =>
+  import("./utils/motion.js").then((res) => res.default);
+
 if (element) {
   const App = () => (
     <React.StrictMode>
@@ -56,15 +61,17 @@ if (element) {
         <Analytics>
           <Theme>
             <ErrorBoundary>
-              <Router history={history}>
-                <>
-                  <PageTheme />
-                  <ScrollToTop>
-                    <Routes />
-                  </ScrollToTop>
-                  <Toasts />
-                </>
-              </Router>
+              <LazyMotion features={loadFeatures}>
+                <Router history={history}>
+                  <>
+                    <PageTheme />
+                    <ScrollToTop>
+                      <Routes />
+                    </ScrollToTop>
+                    <Toasts />
+                  </>
+                </Router>
+              </LazyMotion>
             </ErrorBoundary>
           </Theme>
         </Analytics>

app/menus/AccountMenu.js

@@ -1,136 +1,195 @@
 // @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 [keyboardShortcutsOpen, setKeyboardShortcutsOpen] = React.useState(
-    false
-  );
+  const [includeAlt, setIncludeAlt] = React.useState(false);
+  const [
+    keyboardShortcutsOpen,
+    handleKeyboardShortcutsOpen,
+    handleKeyboardShortcutsClose,
+  ] = 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 (
     <>
       <Guide
         isOpen={keyboardShortcutsOpen}
-        onRequestClose={() => setKeyboardShortcutsOpen(false)}
+        onRequestClose={handleKeyboardShortcutsClose}
         title={t("Keyboard shortcuts")}
       >
         <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={() => setKeyboardShortcutsOpen(true)}>
-          {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";
@@ -14,7 +22,9 @@ import ContextMenu from "components/ContextMenu";
 import OverflowMenuButton from "components/ContextMenu/OverflowMenuButton";
 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";
 import { newDocumentUrl } from "utils/routeHelpers";
 
@@ -37,7 +47,9 @@ function CollectionMenu({
 }: Props) {
   const menu = useMenuState({ modal, placement });
   const [renderModals, setRenderModals] = React.useState(false);
-  const { ui, documents, policies } = useStores();
+  const team = useCurrentTeam();
+  const { documents, policies } = useStores();
+  const { showToast } = useToasts();
   const { t } = useTranslation();
   const history = useHistory();
 
@@ -99,17 +111,78 @@ function CollectionMenu({
         });
         history.push(document.url);
       } catch (err) {
-        ui.showToast(err.message, {
+        showToast(err.message, {
           type: "error",
         });
 
         throw err;
       }
     },
-    [history, ui, collection.id, documents]
+    [history, showToast, collection.id, documents]
   );
 
   const can = policies.abilities(collection.id);
+  const canUserInTeam = policies.abilities(team.id);
+
+  const items = React.useMemo(
+    () => [
+      {
+        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) {
+    return null;
+  }
 
   return (
     <>
@@ -134,47 +207,7 @@ function CollectionMenu({
         onClose={onClose}
         aria-label={t("Collection")}
       >
-        <Template
-          {...menu}
-          items={[
-            {
-              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),
-            },
-          ]}
-        />
+        <Template {...menu} items={items} />
       </ContextMenu>
       {renderModals && (
         <>

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";
@@ -18,6 +38,7 @@ import Template from "components/ContextMenu/Template";
 import Flex from "components/Flex";
 import Modal from "components/Modal";
 import useStores from "hooks/useStores";
+import useToasts from "hooks/useToasts";
 import getDataTransferFiles from "utils/getDataTransferFiles";
 import {
   documentHistoryUrl,
@@ -51,7 +72,8 @@ function DocumentMenu({
   onOpen,
   onClose,
 }: Props) {
-  const { policies, collections, ui, documents } = useStores();
+  const { policies, collections, documents } = useStores();
+  const { showToast } = useToasts();
   const menu = useMenuState({
     modal,
     unstable_preventOverflow: true,
@@ -83,38 +105,42 @@ function DocumentMenu({
 
       // when duplicating, go straight to the duplicated document content
       history.push(duped.url);
-      ui.showToast(t("Document duplicated"), { type: "success" });
+      showToast(t("Document duplicated"), { type: "success" });
     },
-    [ui, t, history, document]
+    [t, history, showToast, document]
   );
 
   const handleArchive = React.useCallback(
     async (ev: SyntheticEvent<>) => {
       await document.archive();
-      ui.showToast(t("Document archived"), { type: "success" });
+      showToast(t("Document archived"), { type: "success" });
     },
-    [ui, t, document]
+    [showToast, t, document]
   );
 
   const handleRestore = React.useCallback(
     async (ev: SyntheticEvent<>, options?: { collectionId: string }) => {
       await document.restore(options);
-      ui.showToast(t("Document restored"), { type: "success" });
+      showToast(t("Document restored"), { type: "success" });
     },
-    [ui, t, document]
+    [showToast, t, document]
   );
 
   const handleUnpublish = React.useCallback(
     async (ev: SyntheticEvent<>) => {
       await document.unpublish();
-      ui.showToast(t("Document unpublished"), { type: "success" });
+      showToast(t("Document unpublished"), { type: "success" });
     },
-    [ui, t, document]
+    [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<>) => {
@@ -137,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();
@@ -181,14 +228,14 @@ function DocumentMenu({
         );
         history.push(importedDocument.url);
       } catch (err) {
-        ui.showToast(err.message, {
+        showToast(err.message, {
           type: "error",
         });
 
         throw err;
       }
     },
-    [history, ui, collection, documents, document.id]
+    [history, showToast, collection, documents, document.id]
   );
 
   return (
@@ -225,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",
@@ -351,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 useStores from "hooks/useStores";
+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) {
-  const { ui } = useStores();
+function RevisionMenu({ document, revisionId, className }: Props) {
+  const { showToast } = useToasts();
+  const team = useCurrentTeam();
   const menu = useMenuState({ modal: true });
   const { t } = useTranslation();
   const history = useHistory();
@@ -30,37 +32,49 @@ function RevisionMenu({ document, revision, className, iconColor }: Props) {
   const handleRestore = React.useCallback(
     async (ev: SyntheticEvent<>) => {
       ev.preventDefault();
-      await document.restore({ revisionId: revision.id });
-      ui.showToast(t("Document restored"), { type: "success" });
+      await document.restore({ revisionId });
+      showToast(t("Document restored"), { type: "success" });
       history.push(document.url);
     },
-    [history, ui, t, document, revision]
+    [history, showToast, t, document, revisionId]
   );
 
   const handleCopy = React.useCallback(() => {
-    ui.showToast(t("Link copied"), { type: "info" });
-  }, [ui, t]);
+    showToast(t("Link copied"), { type: "info" });
+  }, [showToast, t]);
 
   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/ShareMenu.js

@@ -10,6 +10,7 @@ import MenuItem from "components/ContextMenu/MenuItem";
 import OverflowMenuButton from "components/ContextMenu/OverflowMenuButton";
 import CopyToClipboard from "components/CopyToClipboard";
 import useStores from "hooks/useStores";
+import useToasts from "hooks/useToasts";
 
 type Props = {
   share: Share,
@@ -17,7 +18,8 @@ type Props = {
 
 function ShareMenu({ share }: Props) {
   const menu = useMenuState({ modal: true });
-  const { ui, shares, policies } = useStores();
+  const { shares, policies } = useStores();
+  const { showToast } = useToasts();
   const { t } = useTranslation();
   const history = useHistory();
   const can = policies.abilities(share.id);
@@ -36,17 +38,17 @@ function ShareMenu({ share }: Props) {
 
       try {
         await shares.revoke(share);
-        ui.showToast(t("Share link revoked"), { type: "info" });
+        showToast(t("Share link revoked"), { type: "info" });
       } catch (err) {
-        ui.showToast(err.message, { type: "error" });
+        showToast(err.message, { type: "error" });
       }
     },
-    [t, shares, share, ui]
+    [t, shares, share, showToast]
   );
 
   const handleCopy = React.useCallback(() => {
-    ui.showToast(t("Share link copied"), { type: "info" });
-  }, [t, ui]);
+    showToast(t("Share link copied"), { type: "info" });
+  }, [t, showToast]);
 
   return (
     <>

app/menus/TableOfContentsMenu.js

@@ -0,0 +1,76 @@
+// @flow
+import { observer } from "mobx-react";
+import { TableOfContentsIcon } from "outline-icons";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { MenuButton, useMenuState } from "reakit/Menu";
+import Button from "components/Button";
+import ContextMenu from "components/ContextMenu";
+import Template from "components/ContextMenu/Template";
+import { type MenuItem } from "types";
+
+type Props = {|
+  headings: { title: string, level: number, id: string }[],
+|};
+
+function TableOfContentsMenu({ headings }: Props) {
+  const menu = useMenuState({
+    modal: true,
+    unstable_preventOverflow: true,
+    unstable_fixed: true,
+    unstable_flip: true,
+  });
+
+  const { t } = useTranslation();
+
+  const minHeading = headings.reduce(
+    (memo, heading) => (heading.level < memo ? heading.level : memo),
+    Infinity
+  );
+
+  const items: MenuItem[] = React.useMemo(() => {
+    let i = [
+      {
+        type: "heading",
+        visible: true,
+        title: t("Contents"),
+      },
+      ...headings.map((heading) => ({
+        href: `#${heading.id}`,
+        title: t(heading.title),
+        level: heading.level - minHeading,
+      })),
+    ];
+
+    if (i.length === 1) {
+      i.push({
+        href: "#",
+        title: t("Headings you add to the document will appear here"),
+        disabled: true,
+      });
+    }
+
+    return i;
+  }, [t, headings, minHeading]);
+
+  return (
+    <>
+      <MenuButton {...menu}>
+        {(props) => (
+          <Button
+            {...props}
+            icon={<TableOfContentsIcon />}
+            iconColor="currentColor"
+            borderOnHover
+            neutral
+          />
+        )}
+      </MenuButton>
+      <ContextMenu {...menu} aria-label={t("Table of contents")}>
+        <Template {...menu} items={items} />
+      </ContextMenu>
+    </>
+  );
+}
+
+export default observer(TableOfContentsMenu);

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,17 +37,17 @@ function TemplatesMenu({ document }: Props) {
   const renderTemplate = (template) => (
     <MenuItem
       key={template.id}
-      onClick={() => document.updateFromTemplate(template)}
+      onClick={() => onSelectTemplate(template)}
+      icon={<DocumentIcon />}
       {...menu}
     >
-      <DocumentIcon />
-      <div>
+      <TemplateItem>
         <strong>{template.titleWithDefault}</strong>
         <br />
         <Author>
           {t("By {{ author }}", { author: template.createdBy.name })}
         </Author>
-      </div>
+      </TemplateItem>
     </MenuItem>
   );
 
@@ -70,9 +71,12 @@ function TemplatesMenu({ document }: Props) {
   );
 }
 
-const Author = styled.div`
-  font-size: 13px;
+const TemplateItem = styled.div`
   text-align: left;
 `;
 
+const Author = styled.div`
+  font-size: 13px;
+`;
+
 export default observer(TemplatesMenu);

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",