test: Load policies

perf: Remove inline require call
2026-06-13 19:35:02 +03:00 · 2021-07-30 11:47:42 -04:00 · 2021-07-30 11:31:38 -04:00
429 changed files with 5438 additions and 14781 deletions
@@ -1,12 +1,4 @@
-version: 2.1
-
-executors:
-  docker-publisher:
-    environment:
-      IMAGE_NAME: outlinewiki/outline
-    docker:
-      - image: circleci/buildpack-deps:stretch
-
+version: 2
 jobs:
  build:
    working_directory: ~/outline
@@ -48,88 +40,4 @@ jobs:
          command: yarn test
      - run:
          name: 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: /.*/
+          command: yarn build:webpack
@@ -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,13 +29,9 @@ 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:
@@ -73,42 +69,24 @@ 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=
-
-# Specify which claims to derive user information from
-# Supports any valid JSON path with the JWT payload
-OIDC_USERNAME_CLAIM=preferred_username
-
-# 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

@@ -124,15 +102,15 @@ WEB_CONCURRENCY=1
 # especially large Word documents with embedded imagery
 MAXIMUM_IMPORT_SIZE=5120000

-# You can remove this line if your reverse proxy already logs incoming http
-# requests and this ends up being duplicative
-DEBUG=http
+# 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

 # 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
 #
@@ -140,13 +118,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=
@@ -160,6 +138,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
@@ -11,11 +11,6 @@
 .*/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

@@ -1,3 +1,4 @@
+
 # Architecture

 Outline is composed of a backend and frontend codebase in this monorepo. As both are written in Javascript, they share some code where possible. We utilize the latest ES6 language features, including `async`/`await`, and [Flow](https://flow.org/) typing. Prettier formatting and ESLint are enforced by CI.
@@ -45,9 +46,7 @@ server
 ├── onboarding        - Markdown templates for onboarding documents
 ├── policies          - Authorization logic based on cancan
 ├── presenters        - JSON presenters for database models, the interface between backend -> frontend
-├── queues            - Async queue definitions
-│   └── processors    - Processors perform async jobs, usually working on events from the event bus
-├── services          - Services start distinct portions of the application eg api, worker
+├── services          - Service definitions are triggered for events and perform async jobs
 ├── static            - Static assets
 ├── test              - Test helpers and fixtures, tests themselves are colocated
 └── utils             - Utility methods specific to the backend
@@ -65,4 +64,4 @@ shared
 ├── styles            - Styles, colors and other global aesthetics
 ├── utils             - Shared utility methods
 └── constants         - Shared constants
-```
+```
@@ -1,50 +1,23 @@
-# syntax=docker/dockerfile:1.2
-ARG APP_PATH=/opt/outline
-FROM node:14-alpine AS deps-common
+FROM node:14-alpine
+
+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
+COPY package.json ./
+COPY yarn.lock ./

-# ---
-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
+RUN yarn --pure-lockfile

 COPY . .
-COPY --from=deps-dev $APP_PATH/node_modules ./node_modules
-RUN yarn build

-# ---
-FROM node:14-alpine AS runner
+RUN yarn build && \
+  yarn --production --ignore-scripts --prefer-offline && \
+  rm -rf shared && \
+  rm -rf app

-ARG APP_PATH
-WORKDIR $APP_PATH
 ENV NODE_ENV production
-
-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
+CMD yarn start

 EXPOSE 3000
-CMD ["yarn", "start"]
@@ -3,7 +3,7 @@ Business Source License 1.1
 Parameters

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

-Change Date:          2025-09-07
+Change Date:          2024-04-22

 Change License:       Apache License, Version 2.0

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

 build:
 	docker-compose build --pull outline
@@ -1,2 +1 @@
-web: yarn start --services=web,websockets
-worker: yarn start --services=worker
+web: node ./build/server/index.js
@@ -1,3 +1,5 @@
+
+
 <p align="center">
  <img src="https://user-images.githubusercontent.com/31465/34380645-bd67f474-eb0b-11e7-8d03-0151c1730654.png" height="29" />
 </p>
@@ -28,6 +30,7 @@ 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
@@ -38,20 +41,16 @@ 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
@@ -80,27 +79,29 @@ 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!
@@ -109,22 +110,26 @@ 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](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
+* [Translation](TRANSLATION.md) into other languages
+* Issues with [`good first issue`](https://github.com/outline/outline/labels/good%20first%20issue) label
+* Performance improvements, both on server and frontend
+* Developer happiness and documentation
+* Bugs and other issues listed on GitHub
+

 ## Architecture

 If you're interested in contributing or learning more about the Outline codebase
-please refer to the [architecture document](docs/ARCHITECTURE.md) first for a high level overview of how the application is put together.
+please refer to the [architecture document](ARCHITECTURE.md) first for a high level overview of how the application is put together.
+

 ## Debugging

-In development Outline outputs simple logging to the console, prefixed by categories. In production it outputs JSON logs, these can be easily parsed by your preferred log ingestion pipeline.
+Outline uses [debug](https://www.npmjs.com/package/debug). To enable debugging output, the following categories are available:

-HTTP logging is disabled by default, but can be enabled by setting the `DEBUG=http` environment variable.
+```
+DEBUG=sql,cache,presenters,events,importer,exporter,emails,mailer
+```

 ## Tests

@@ -140,7 +145,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
@@ -35,7 +35,7 @@ const RealButton = styled.button`
    border: 0;
  }

-  &:hover:not(:disabled) {
+  &:hover {
    background: ${(props) => darken(0.05, props.theme.buttonBackground)};
  }

@@ -43,10 +43,6 @@ const RealButton = styled.button`
    cursor: default;
    pointer-events: none;
    color: ${(props) => props.theme.white50};
-
-    svg {
-      fill: ${(props) => props.theme.white50};
-    }
  }

  ${(props) =>
@@ -69,12 +65,8 @@ const RealButton = styled.button`
    }
    

-    &:hover:not(:disabled) {
-      background: ${
-        props.borderOnHover
-          ? props.theme.buttonNeutralBackground
-          : darken(0.05, props.theme.buttonNeutralBackground)
-      };
+    &:hover {
+      background: ${darken(0.05, props.theme.buttonNeutralBackground)};
      box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, ${
        props.theme.buttonNeutralBorder
      } 0 0 0 1px inset;
@@ -82,10 +74,6 @@ const RealButton = styled.button`

    &:disabled {
      color: ${props.theme.textTertiary};
-
-      svg {
-        fill: ${props.theme.textTertiary};
-      }
    }
  `} ${(props) =>
    props.danger &&
@@ -136,11 +124,11 @@ export type Props = {|
  fullwidth?: boolean,
  autoFocus?: boolean,
  style?: Object,
-  as?: React.ComponentType<any> | string,
+  as?: React.ComponentType<any>,
  to?: string,
  onClick?: (event: SyntheticEvent<>) => mixed,
  borderOnHover?: boolean,
-  href?: string,
+
  "data-on"?: string,
  "data-event-category"?: string,
  "data-event-action"?: string,
@@ -12,19 +12,17 @@ import DocumentViews from "components/DocumentViews";
 import Facepile from "components/Facepile";
 import NudeButton from "components/NudeButton";
 import Popover from "components/Popover";
-import useCurrentUser from "hooks/useCurrentUser";
 import useStores from "hooks/useStores";

 type Props = {|
  document: Document,
+  currentUserId: string,
 |};

 function Collaborators(props: Props) {
  const { t } = useTranslation();
-  const user = useCurrentUser();
-  const currentUserId = user?.id;
  const { users, presence } = useStores();
-  const { document } = props;
+  const { document, currentUserId } = props;

  let documentPresence = presence.get(document.id);
  documentPresence = documentPresence
@@ -11,24 +11,18 @@ type Props = {
  collection: Collection,
  expanded?: boolean,
  size?: number,
-  useLuminance?: boolean,
 };

-function ResolvedCollectionIcon({
-  collection,
-  expanded,
-  size,
-  useLuminance,
-}: Props) {
+function ResolvedCollectionIcon({ collection, expanded, size }: Props) {
  const { ui } = useStores();

  // If the chosen icon color is very dark then we invert it in dark mode
  // otherwise it will be impossible to see against the dark background.
  const color =
-    (ui.resolvedTheme === "dark" || useLuminance) &&
-    collection.color !== "currentColor" &&
-    getLuminance(collection.color) <= 0.12
-      ? "currentColor"
+    ui.resolvedTheme === "dark" && collection.color !== "currentColor"
+      ? getLuminance(collection.color) > 0.12
+        ? collection.color
+        : "currentColor"
      : collection.color;

  if (collection.icon && collection.icon !== "collection") {
@@ -1,59 +0,0 @@
-// @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);
@@ -2,9 +2,8 @@
 import { CheckmarkIcon } from "outline-icons";
 import * as React from "react";
 import { MenuItem as BaseMenuItem } from "reakit/Menu";
-import styled, { css } from "styled-components";
+import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import MenuIconWrapper from "../MenuIconWrapper";

 type Props = {|
  onClick?: (SyntheticEvent<>) => void | Promise<void>,
@@ -17,7 +16,6 @@ type Props = {|
  as?: string | React.ComponentType<*>,
  hide?: () => void,
  level?: number,
-  icon?: React.Node,
 |};

 const MenuItem = ({
@@ -27,7 +25,6 @@ const MenuItem = ({
  disabled,
  as,
  hide,
-  icon,
  ...rest
 }: Props) => {
  const handleClick = React.useCallback(
@@ -74,7 +71,6 @@ const MenuItem = ({
              &nbsp;
            </>
          )}
-          {icon && <MenuIconWrapper>{icon}</MenuIconWrapper>}
          {children}
        </MenuAnchor>
      )}
@@ -88,12 +84,12 @@ const Spacer = styled.svg`
  flex-shrink: 0;
 `;

-export const MenuAnchorCSS = css`
+export const MenuAnchor = styled.a`
  display: flex;
  margin: 0;
  border: 0;
  padding: 12px;
-  padding-left: ${(props) => 12 + (props.level || 0) * 10}px;
+  padding-left: ${(props) => 12 + props.level * 10}px;
  width: 100%;
  min-height: 32px;
  background: none;
@@ -134,12 +130,9 @@ export const MenuAnchorCSS = css`
  `};

  ${breakpoint("tablet")`
-    padding: 4px 12px;
-    font-size: 14px;
+    padding: ${(props) => (props.$toggleable ? "4px 12px" : "6px 12px")};
+    font-size: 15px;
  `};
 `;
-export const MenuAnchor = styled.a`
-  ${MenuAnchorCSS}
-`;

 export default MenuItem;
@@ -9,8 +9,6 @@ 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";
@@ -69,16 +67,7 @@ export function filterTemplateItems(items: TMenuItem[]): TMenuItem[] {
 }

 function Template({ items, ...menu }: Props): React.Node {
-  const filteredTemplates = filterTemplateItems(items);
-  const iconIsPresentInAnyMenuItem = filteredTemplates.find(
-    (item) => !item.type && !!item.icon
-  );
-
-  return filteredTemplates.map((item, index) => {
-    if (iconIsPresentInAnyMenuItem && !item.type) {
-      item.icon = item.icon || <MenuIconWrapper />;
-    }
-
+  return filterTemplateItems(items).map((item, index) => {
    if (item.to) {
      return (
        <MenuItem
@@ -87,7 +76,6 @@ function Template({ items, ...menu }: Props): React.Node {
          key={index}
          disabled={item.disabled}
          selected={item.selected}
-          icon={item.icon}
          {...menu}
        >
          {item.title}
@@ -104,7 +92,6 @@ function Template({ items, ...menu }: Props): React.Node {
          selected={item.selected}
          level={item.level}
          target={item.href.startsWith("#") ? undefined : "_blank"}
-          icon={item.icon}
          {...menu}
        >
          {item.title}
@@ -120,7 +107,6 @@ function Template({ items, ...menu }: Props): React.Node {
          disabled={item.disabled}
          selected={item.selected}
          key={index}
-          icon={item.icon}
          {...menu}
        >
          {item.title}
@@ -134,7 +120,7 @@ function Template({ items, ...menu }: Props): React.Node {
          key={index}
          as={Submenu}
          templateItems={item.items}
-          title={<Title title={item.title} icon={item.icon} />}
+          title={item.title}
          {...menu}
        />
      );
@@ -153,13 +139,4 @@ function Template({ items, ...menu }: Props): React.Node {
  });
 }

-function Title({ title, icon }) {
-  return (
-    <Flex align="center">
-      {icon && <MenuIconWrapper>{icon}</MenuIconWrapper>}
-      {title}
-    </Flex>
-  );
-}
-
 export default React.memo<Props>(Template);
@@ -4,7 +4,6 @@ import { Portal } from "react-portal";
 import { Menu } from "reakit/Menu";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import useMenuHeight from "hooks/useMenuHeight";
 import usePrevious from "hooks/usePrevious";
 import {
  fadeIn,
@@ -19,12 +18,8 @@ type Props = {|
  placement?: string,
  animating?: boolean,
  children: React.Node,
-  unstable_disclosureRef?: {
-    current: null | React.ElementRef<"button">,
-  },
  onOpen?: () => void,
  onClose?: () => void,
-  hide?: () => void,
 |};

 export default function ContextMenu({
@@ -34,8 +29,6 @@ export default function ContextMenu({
  ...rest
 }: Props) {
  const previousVisible = usePrevious(rest.visible);
-  const maxHeight = useMenuHeight(rest.visible, rest.unstable_disclosureRef);
-  const backgroundRef = React.useRef();

  React.useEffect(() => {
    if (rest.visible && !previousVisible) {
@@ -50,8 +43,6 @@ export default function ContextMenu({
    }
  }, [onOpen, onClose, previousVisible, rest.visible]);

-  // sets the menu height based on the available space between the disclosure/
-  // trigger and the bottom of the window
  return (
    <>
      <Menu hideOnClickOutside preventBodyScroll {...rest}>
@@ -68,8 +59,6 @@ export default function ContextMenu({
                dir="auto"
                topAnchor={topAnchor}
                rightAnchor={rightAnchor}
-                ref={backgroundRef}
-                style={maxHeight && topAnchor ? { maxHeight } : undefined}
              >
                {rest.visible || rest.animating ? children : null}
              </Background>
@@ -79,14 +68,14 @@ export default function ContextMenu({
      </Menu>
      {(rest.visible || rest.animating) && (
        <Portal>
-          <Backdrop onClick={rest.hide} />
+          <Backdrop />
        </Portal>
      )}
    </>
  );
 }

-export const Backdrop = styled.div`
+const Backdrop = styled.div`
  animation: ${fadeIn} 200ms ease-in-out;
  position: fixed;
  top: 0;
@@ -101,7 +90,7 @@ export const Backdrop = styled.div`
  `};
 `;

-export const Position = styled.div`
+const Position = styled.div`
  position: absolute;
  z-index: ${(props) => props.theme.depths.menu};

@@ -115,7 +104,7 @@ export const Position = styled.div`
  `};
 `;

-export const Background = styled.div`
+const Background = styled.div`
  animation: ${mobileContextMenu} 200ms ease;
  transform-origin: 50% 100%;
  max-width: 100%;
@@ -136,7 +125,8 @@ export const Background = styled.div`
  ${breakpoint("tablet")`
    animation: ${(props) =>
      props.topAnchor ? fadeAndSlideDown : fadeAndSlideUp} 200ms ease;
-    transform-origin: ${(props) => (props.rightAnchor ? "75%" : "25%")} 0;
+    transform-origin: ${(props) =>
+      props.rightAnchor === "bottom-end" ? "75%" : "25%"} 0;
    max-width: 276px;
    background: ${(props) => props.theme.menuBackground};
    box-shadow: ${(props) => props.theme.menuShadow};
@@ -61,9 +61,8 @@ const DocumentBreadcrumb = ({ document, children, onlyText }: Props) => {
  const { t } = useTranslation();
  const category = useCategory(document);

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

  return (
    <DocumentLink
@@ -90,6 +88,11 @@ function DocumentListItem(props: Props, ref) {
          {document.isNew && document.createdBy.id !== currentUser.id && (
            <Badge yellow>{t("New")}</Badge>
          )}
+          {canStar && (
+            <StarPositioner>
+              <StarButton document={document} />
+            </StarPositioner>
+          )}
          {document.isDraft && showDraft && (
            <Tooltip
              tooltip={t("Only visible to you")}
@@ -102,11 +105,6 @@ function DocumentListItem(props: Props, ref) {
          {document.isTemplate && showTemplate && (
            <Badge primary>{t("Template")}</Badge>
          )}
-          {canStar && (
-            <StarPositioner>
-              <StarButton document={document} />
-            </StarPositioner>
-          )}
        </Heading>

        {!queryIsInTitle && (
@@ -128,8 +126,7 @@ function DocumentListItem(props: Props, ref) {
        {document.isTemplate &&
          !document.isArchived &&
          !document.isDeleted &&
-          can.createDocument &&
-          collectionPolicy.update && (
+          can.createDocument && (
            <>
              <Button
                as={Link}
@@ -75,9 +75,7 @@ function DocumentMeta({
    return null;
  }

-  const collection = document.collectionId
-    ? collections.get(document.collectionId)
-    : undefined;
+  const collection = collections.get(document.collectionId);
  const lastUpdatedByCurrentUser = user.id === updatedBy.id;
  let content;

@@ -3,13 +3,12 @@ import { lighten } from "polished";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { withRouter, type RouterHistory } from "react-router-dom";
-import { Extension } from "rich-markdown-editor";
 import styled, { withTheme } from "styled-components";
-import embeds from "shared/embeds";
 import { light } from "shared/theme";
 import UiStore from "stores/UiStore";
 import ErrorBoundary from "components/ErrorBoundary";
 import Tooltip from "components/Tooltip";
+import embeds from "../embeds";
 import useMediaQuery from "hooks/useMediaQuery";
 import useToasts from "hooks/useToasts";
 import { type Theme } from "types";
@@ -31,8 +30,6 @@ export type Props = {|
  grow?: boolean,
  disableEmbeds?: boolean,
  ui?: UiStore,
-  style?: Object,
-  extensions?: Extension[],
  shareId?: ?string,
  autoFocus?: boolean,
  template?: boolean,
@@ -249,50 +246,6 @@ 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 }) => (
@@ -1,163 +0,0 @@
-// @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;
@@ -76,6 +76,11 @@ const FilterOptions = ({
  );
 };

+const LabelWithNote = styled.div`
+  font-weight: 500;
+  text-align: left;
+`;
+
 const Note = styled(HelpText)`
  margin-top: 2px;
  margin-bottom: 0;
@@ -85,15 +90,6 @@ const Note = styled(HelpText)`
  color: ${(props) => props.theme.textTertiary};
 `;

-const LabelWithNote = styled.div`
-  font-weight: 500;
-  text-align: left;
-
-  &:hover ${Note} {
-    color: ${(props) => props.theme.white50};
-  }
-`;
-
 const StyledButton = styled(Button)`
  box-shadow: none;
  text-transform: none;
@@ -39,8 +39,7 @@ const Guide = ({
          <Dialog
            {...dialog}
            aria-label={title}
-            preventBodyScroll
-            hideOnEsc
+            preventBodyScrollhideOnEsc
            hide={onRequestClose}
          >
            {(props) => (
@@ -36,7 +36,7 @@ function Header({ breadcrumb, title, actions }: Props) {
  }, []);

  return (
-    <Wrapper align="center" shrink={false}>
+    <Wrapper align="center" isCompact={isScrolled} shrink={false}>
      {breadcrumb ? <Breadcrumbs>{breadcrumb}</Breadcrumbs> : null}
      {isScrolled ? (
        <Title align="center" justify="flex-start" onClick={handleClickTitle}>
@@ -95,7 +95,7 @@ const Wrapper = styled(Flex)`
  }

  ${breakpoint("tablet")`
-    padding: 16px 16px 0;
+    padding: ${(props) => (props.isCompact ? "12px" : `24px 24px 0`)};
    justify-content: "center";
  `};
 `;
@@ -1,41 +1,28 @@
 // @flow
 import {
-  BookmarkedIcon,
  CollectionIcon,
  CoinsIcon,
  AcademicCapIcon,
  BeakerIcon,
  BuildingBlocksIcon,
-  CameraIcon,
  CloudIcon,
  CodeIcon,
  EditIcon,
-  EmailIcon,
  EyeIcon,
-  GlobeIcon,
-  InfoIcon,
-  ImageIcon,
  LeafIcon,
  LightBulbIcon,
-  MathIcon,
  MoonIcon,
  NotepadIcon,
  PadlockIcon,
  PaletteIcon,
-  PromoteIcon,
  QuestionMarkIcon,
-  SportIcon,
  SunIcon,
-  TargetIcon,
-  ToolsIcon,
  VehicleIcon,
-  WarningIcon,
 } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useMenuState, MenuButton, MenuItem } from "reakit/Menu";
 import styled from "styled-components";
-import breakpoint from "styled-components-breakpoint";
 import ContextMenu from "components/ContextMenu";
 import Flex from "components/Flex";
 import HelpText from "components/HelpText";
@@ -52,10 +39,6 @@ const TwitterPicker = React.lazy(() =>
 );

 export const icons = {
-  bookmark: {
-    component: BookmarkedIcon,
-    keywords: "bookmark",
-  },
  collection: {
    component: CollectionIcon,
    keywords: "collection",
@@ -64,10 +47,6 @@ export const icons = {
    component: CoinsIcon,
    keywords: "coins money finance sales income revenue cash",
  },
-  camera: {
-    component: CameraIcon,
-    keywords: "photo picture",
-  },
  academicCap: {
    component: AcademicCapIcon,
    keywords: "learn teach lesson guide tutorial onboarding training",
@@ -88,26 +67,10 @@ export const icons = {
    component: CodeIcon,
    keywords: "developer api code development engineering programming",
  },
-  email: {
-    component: EmailIcon,
-    keywords: "email at",
-  },
  eye: {
    component: EyeIcon,
    keywords: "eye view",
  },
-  globe: {
-    component: GlobeIcon,
-    keywords: "world translate",
-  },
-  info: {
-    component: InfoIcon,
-    keywords: "info information",
-  },
-  image: {
-    component: ImageIcon,
-    keywords: "image photo picture",
-  },
  leaf: {
    component: LeafIcon,
    keywords: "leaf plant outdoors nature ecosystem climate",
@@ -116,10 +79,6 @@ export const icons = {
    component: LightBulbIcon,
    keywords: "lightbulb idea",
  },
-  math: {
-    component: MathIcon,
-    keywords: "math formula",
-  },
  moon: {
    component: MoonIcon,
    keywords: "night moon dark",
@@ -140,10 +99,6 @@ export const icons = {
    component: EditIcon,
    keywords: "copy writing post blog",
  },
-  promote: {
-    component: PromoteIcon,
-    keywords: "marketing promotion",
-  },
  question: {
    component: QuestionMarkIcon,
    keywords: "question help support faq",
@@ -152,26 +107,10 @@ export const icons = {
    component: SunIcon,
    keywords: "day sun weather",
  },
-  sport: {
-    component: SportIcon,
-    keywords: "sport outdoor racket game",
-  },
-  target: {
-    component: TargetIcon,
-    keywords: "target goal sales",
-  },
-  tools: {
-    component: ToolsIcon,
-    keywords: "tool settings",
-  },
  vehicle: {
    component: VehicleIcon,
    keywords: "truck car travel transport",
  },
-  warning: {
-    component: WarningIcon,
-    keywords: "warning alert error",
-  },
 };

 const colors = [
@@ -189,18 +128,18 @@ const colors = [

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

-function IconPicker({ onOpen, onClose, icon, color, onChange }: Props) {
+function IconPicker({ onOpen, icon, color, onChange }: Props) {
  const { t } = useTranslation();
  const menu = useMenuState({
    modal: true,
    placement: "bottom-end",
  });
+  const Component = icons[icon || "collection"].component;

  return (
    <Wrapper>
@@ -210,22 +149,14 @@ function IconPicker({ onOpen, onClose, icon, color, onChange }: Props) {
      <MenuButton {...menu}>
        {(props) => (
          <Button aria-label={t("Show menu")} {...props}>
-            <Icon
-              as={icons[icon || "collection"].component}
-              color={color}
-              size={30}
-            />
+            <Component color={color} size={30} />
          </Button>
        )}
      </MenuButton>
-      <ContextMenu
-        {...menu}
-        onOpen={onOpen}
-        onClose={onClose}
-        aria-label={t("Choose icon")}
-      >
+      <ContextMenu {...menu} onOpen={onOpen} aria-label={t("Choose icon")}>
        <Icons>
          {Object.keys(icons).map((name) => {
+            const Component = icons[name].component;
            return (
              <MenuItem
                key={name}
@@ -234,7 +165,7 @@ function IconPicker({ onOpen, onClose, icon, color, onChange }: Props) {
              >
                {(props) => (
                  <IconButton style={style} {...props}>
-                    <Icon as={icons[name].component} color={color} size={30} />
+                    <Component color={color} size={30} />
                  </IconButton>
                )}
              </MenuItem>
@@ -256,20 +187,13 @@ function IconPicker({ onOpen, onClose, icon, color, onChange }: Props) {
  );
 }

-const Icon = styled.svg`
-  transition: fill 150ms ease-in-out;
-`;
-
 const Label = styled.label`
  display: block;
 `;

 const Icons = styled.div`
-  padding: 16px 8px 0 16px;
-
-  ${breakpoint("tablet")`
-    width: 276px;
-  `};
+  padding: 15px 9px 9px 15px;
+  width: 276px;
 `;

 const Button = styled(NudeButton)`
@@ -292,11 +216,6 @@ const Loading = styled(HelpText)`
 const ColorPicker = styled(TwitterPicker)`
  box-shadow: none !important;
  background: transparent !important;
-  width: auto !important;
-
-  ${breakpoint("tablet")`
-    width: 276px;
-  `};
 `;

 const Wrapper = styled("div")`
@@ -1,6 +1,6 @@
 // @flow
 import * as React from "react";
-import { cdnPath } from "../../utils/urls";
+import { cdnPath } from "utils/urls";

 type Props = {|
  alt: string,
@@ -40,20 +40,14 @@ class InputSearchPage extends React.Component<Props> {
    }
  }

-  handleKeyDown = (ev: SyntheticKeyboardEvent<HTMLInputElement>) => {
-    if (ev.key === "Enter") {
-      ev.preventDefault();
-      this.props.history.push(
-        searchUrl(ev.currentTarget.value, {
-          collectionId: this.props.collectionId,
-          ref: this.props.source,
-        })
-      );
-    }
-
-    if (this.props.onKeyDown) {
-      this.props.onKeyDown(ev);
-    }
+  handleSearchInput = (ev: SyntheticInputEvent<>) => {
+    ev.preventDefault();
+    this.props.history.push(
+      searchUrl(ev.target.value, {
+        collectionId: this.props.collectionId,
+        ref: this.props.source,
+      })
+    );
  };

  handleFocus = () => {
@@ -65,7 +59,7 @@ class InputSearchPage extends React.Component<Props> {
  };

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

    return (
@@ -73,9 +67,10 @@ class InputSearchPage extends React.Component<Props> {
        ref={(ref) => (this.input = ref)}
        type="search"
        placeholder={placeholder}
+        onInput={this.handleSearchInput}
        value={value}
        onChange={onChange}
-        onKeyDown={this.handleKeyDown}
+        onKeyDown={onKeyDown}
        icon={
          <SearchIcon
            color={this.focused ? theme.inputBorderFocused : theme.inputBorder}
@@ -1,243 +1,29 @@
 // @flow
-import {
-  Select,
-  SelectOption,
-  useSelectState,
-  useSelectPopover,
-  SelectPopover,
-} from "@renderlesskit/react";
-import { CheckmarkIcon } from "outline-icons";
+import { observable } from "mobx";
+import { observer } from "mobx-react";
 import * as React from "react";
 import { VisuallyHidden } from "reakit/VisuallyHidden";
-import scrollIntoView from "smooth-scroll-into-view-if-needed";
-import styled, { css } from "styled-components";
-import Button, { Inner } from "components/Button";
-import { Position, Background, Backdrop } from "./ContextMenu";
-import { MenuAnchorCSS } from "./ContextMenu/MenuItem";
-import { LabelText } from "./Input";
-import useMenuHeight from "hooks/useMenuHeight";
+import styled from "styled-components";
+import { Outline, LabelText } from "./Input";

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

-export type Props = {
-  value?: string,
-  label?: string,
-  nude?: boolean,
-  ariaLabel: string,
-  short?: boolean,
-  disabled?: boolean,
-  className?: string,
-  labelHidden?: boolean,
-  options: Option[],
-  onChange: (string) => Promise<void> | void,
-};
-
-const getOptionFromValue = (options: Option[], value) => {
-  return options.find((option) => option.value === value) || {};
-};
-
-const InputSelect = (props: Props) => {
-  const {
-    value,
-    label,
-    className,
-    labelHidden,
-    options,
-    short,
-    ariaLabel,
-    onChange,
-    disabled,
-    nude,
-  } = props;
-
-  const select = useSelectState({
-    gutter: 0,
-    modal: true,
-    selectedValue: value,
-    animated: 200,
-  });
-
-  const popOver = useSelectPopover({
-    ...select,
-    hideOnClickOutside: true,
-    preventBodyScroll: true,
-    disabled,
-  });
-
-  const previousValue = React.useRef(value);
-  const contentRef = React.useRef();
-  const selectedRef = React.useRef();
-  const buttonRef = React.useRef();
-  const [offset, setOffset] = React.useState(0);
-  const minWidth = buttonRef.current?.offsetWidth || 0;
-
-  const maxHeight = useMenuHeight(
-    select.visible,
-    select.unstable_disclosureRef
-  );
-
-  React.useEffect(() => {
-    if (previousValue.current === select.selectedValue) return;
-
-    previousValue.current = select.selectedValue;
-    async function load() {
-      await onChange(select.selectedValue);
-    }
-    load();
-  }, [onChange, select.selectedValue]);
-
-  const wrappedLabel = <LabelText>{label}</LabelText>;
-
-  const selectedValueIndex = options.findIndex(
-    (option) => option.value === select.selectedValue
-  );
-
-  // Ensure selected option is visible when opening the input
-  React.useEffect(() => {
-    if (!select.animating && selectedRef.current) {
-      scrollIntoView(selectedRef.current, {
-        scrollMode: "if-needed",
-        behavior: "instant",
-        block: "start",
-      });
-    }
-  }, [select.animating]);
-
-  React.useLayoutEffect(() => {
-    if (select.visible) {
-      const offset = Math.round(
-        (selectedRef.current?.getBoundingClientRect().top || 0) -
-          (contentRef.current?.getBoundingClientRect().top || 0)
-      );
-      setOffset(offset);
-    }
-  }, [select.visible]);
-
-  return (
-    <>
-      <Wrapper short={short}>
-        {label &&
-          (labelHidden ? (
-            <VisuallyHidden>{wrappedLabel}</VisuallyHidden>
-          ) : (
-            wrappedLabel
-          ))}
-        <Select
-          {...select}
-          disabled={disabled}
-          aria-label={ariaLabel}
-          ref={buttonRef}
-        >
-          {(props) => (
-            <StyledButton
-              neutral
-              disclosure
-              className={className}
-              nude={nude}
-              {...props}
-            >
-              {getOptionFromValue(options, select.selectedValue).label ||
-                `Select a ${ariaLabel}`}
-            </StyledButton>
-          )}
-        </Select>
-        <SelectPopover {...select} {...popOver}>
-          {(props) => {
-            const topAnchor = props.style.top === "0";
-            const rightAnchor = props.placement === "bottom-end";
-
-            // offset top of select to place selected item under the cursor
-            if (selectedValueIndex !== -1) {
-              props.style.top = `-${offset + 32}px`;
-            }
-
-            return (
-              <Positioner {...props}>
-                <Background
-                  dir="auto"
-                  ref={contentRef}
-                  topAnchor={topAnchor}
-                  rightAnchor={rightAnchor}
-                  style={
-                    maxHeight && topAnchor
-                      ? { maxHeight, minWidth }
-                      : { minWidth }
-                  }
-                >
-                  {select.visible || select.animating
-                    ? options.map((option) => (
-                        <StyledSelectOption
-                          {...select}
-                          value={option.value}
-                          key={option.value}
-                          animating={select.animating}
-                          ref={
-                            select.selectedValue === option.value
-                              ? selectedRef
-                              : undefined
-                          }
-                        >
-                          {select.selectedValue !== undefined && (
-                            <>
-                              {select.selectedValue === option.value ? (
-                                <CheckmarkIcon color="currentColor" />
-                              ) : (
-                                <Spacer />
-                              )}
-                              &nbsp;
-                            </>
-                          )}
-                          {option.label}
-                        </StyledSelectOption>
-                      ))
-                    : null}
-                </Background>
-              </Positioner>
-            );
-          }}
-        </SelectPopover>
-      </Wrapper>
-      {(select.visible || select.animating) && <Backdrop />}
-    </>
-  );
-};
-
-const Spacer = styled.svg`
-  width: 24px;
-  height: 24px;
-  flex-shrink: 0;
-`;
-
-const StyledButton = styled(Button)`
-  font-weight: normal;
-  text-transform: none;
-  margin-bottom: 16px;
-  display: block;
-  width: 100%;
-
-  ${(props) =>
-    props.nude &&
-    css`
-      border-color: transparent;
-      box-shadow: none;
-    `}
-
-  ${Inner} {
-    line-height: 28px;
-    padding-left: 16px;
-    padding-right: 8px;
-    justify-content: space-between;
+  option {
+    background: ${(props) => props.theme.buttonNeutralBackground};
  }
-`;

-export const StyledSelectOption = styled(SelectOption)`
-  ${MenuAnchorCSS}
-
-  ${(props) =>
-    props.animating &&
-    css`
-      pointer-events: none;
-    `}
+  &:disabled,
+  &::placeholder {
+    color: ${(props) => props.theme.placeholder};
+  }
 `;

 const Wrapper = styled.label`
@@ -245,21 +31,63 @@ const Wrapper = styled.label`
  max-width: ${(props) => (props.short ? "350px" : "100%")};
 `;

-const Positioner = styled(Position)`
-  &.focus-visible {
-    ${StyledSelectOption} {
-      &[aria-selected="true"] {
-        color: ${(props) => props.theme.white};
-        background: ${(props) => props.theme.primary};
-        box-shadow: none;
-        cursor: pointer;
+export type Option = { label: string, value: string };

-        svg {
-          fill: ${(props) => props.theme.white};
-        }
-      }
-    }
+export type Props = {
+  value?: string,
+  label?: string,
+  short?: boolean,
+  className?: string,
+  labelHidden?: boolean,
+  options: Option[],
+  onBlur?: () => void,
+  onFocus?: () => void,
+};
+
+@observer
+class InputSelect extends React.Component<Props> {
+  @observable focused: boolean = false;
+
+  handleBlur = () => {
+    this.focused = false;
+  };
+
+  handleFocus = () => {
+    this.focused = true;
+  };
+
+  render() {
+    const {
+      label,
+      className,
+      labelHidden,
+      options,
+      short,
+      ...rest
+    } = this.props;
+
+    const wrappedLabel = <LabelText>{label}</LabelText>;
+
+    return (
+      <Wrapper short={short}>
+        {label &&
+          (labelHidden ? (
+            <VisuallyHidden>{wrappedLabel}</VisuallyHidden>
+          ) : (
+            wrappedLabel
+          ))}
+        <Outline focused={this.focused} className={className}>
+          <Select onBlur={this.handleBlur} onFocus={this.handleFocus} {...rest}>
+            {options.map((option) => (
+              <option value={option.value} key={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </Select>
+        </Outline>
+      </Wrapper>
+    );
  }
-`;
+}

 export default InputSelect;
@@ -4,33 +4,19 @@ import { useTranslation } from "react-i18next";
 import InputSelect, { type Props, type Option } from "./InputSelect";

 export default function InputSelectPermission(
-  props: $Rest<$Exact<Props>, {| options: Array<Option>, ariaLabel: string |}>
+  props: $Rest<Props, { options: Array<Option> }>
 ) {
-  const { value, onChange, ...rest } = props;
  const { t } = useTranslation();

-  const handleChange = React.useCallback(
-    (value) => {
-      if (value === "no_access") {
-        value = "";
-      }
-      onChange(value);
-    },
-    [onChange]
-  );
-
  return (
    <InputSelect
      label={t("Default access")}
      options={[
        { label: t("View and edit"), value: "read_write" },
        { label: t("View only"), value: "read" },
-        { label: t("No access"), value: "no_access" },
+        { label: t("No access"), value: "" },
      ]}
-      ariaLabel={t("Default access")}
-      value={value || "no_access"}
-      onChange={handleChange}
-      {...rest}
+      {...props}
    />
  );
 }
@@ -1,25 +0,0 @@
-// @flow
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-import InputSelect, { type Props, type Option } from "components/InputSelect";
-
-const InputSelectRole = (
-  props: $Rest<$Exact<Props>, {| options: Array<Option>, ariaLabel: string |}>
-) => {
-  const { t } = useTranslation();
-
-  return (
-    <InputSelect
-      label={t("Role")}
-      options={[
-        { label: t("Member"), value: "member" },
-        { label: t("Viewer"), value: "viewer" },
-        { label: t("Admin"), value: "admin" },
-      ]}
-      ariaLabel={t("Role")}
-      {...props}
-    />
-  );
-};
-
-export default InputSelectRole;
@@ -22,6 +22,7 @@ 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";
@@ -37,12 +38,6 @@ import {
  newDocumentUrl,
 } from "utils/routeHelpers";

-const DocumentHistory = React.lazy(() =>
-  import(
-    /* webpackChunkName: "document-history" */ "components/DocumentHistory"
-  )
-);
-
 type Props = {
  documents: DocumentsStore,
  children?: ?React.Node,
@@ -159,14 +154,12 @@ class Layout extends React.Component<Props> {
            {this.props.children}
          </Content>

-          <React.Suspense>
-            <Switch>
-              <Route
-                path={`/doc/${slug}/history/:revisionId?`}
-                component={DocumentHistory}
-              />
-            </Switch>
-          </React.Suspense>
+          <Switch>
+            <Route
+              path={`/doc/${slug}/history/:revisionId?`}
+              component={DocumentHistory}
+            />
+          </Switch>
        </Container>
        <Guide
          isOpen={this.keyboardShortcutsOpen}
@@ -1,64 +1,40 @@
 // @flow
 import * as React from "react";
-import styled, { useTheme } from "styled-components";
+import styled 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, to, ...rest }: Props,
-  ref
-) => {
-  const theme = useTheme();
+const ListItem = ({
+  image,
+  title,
+  subtitle,
+  actions,
+  small,
+  border,
+}: Props) => {
  const compact = !subtitle;

-  const content = (selected) => (
-    <>
-      {image && <Image>{image}</Image>}
-      <Content
-        align={compact ? "center" : undefined}
-        column={!compact}
-        $selected={selected}
-      >
-        <Heading $small={small}>{title}</Heading>
-        {subtitle && (
-          <Subtitle $small={small} $selected={selected}>
-            {subtitle}
-          </Subtitle>
-        )}
-      </Content>
-      {actions && (
-        <Actions $selected={selected} gap={4}>
-          {actions}
-        </Actions>
-      )}
-    </>
-  );
-
  return (
-    <Wrapper
-      ref={ref}
-      $border={border}
-      activeStyle={{ background: theme.primary }}
-      {...rest}
-      as={to ? NavLink : undefined}
-      to={to}
-    >
-      {to ? content : content(false)}
+    <Wrapper compact={compact} $border={border}>
+      {image && <Image>{image}</Image>}
+      <Content align={compact ? "center" : undefined} column={!compact}>
+        <Heading $small={small}>{title}</Heading>
+        {subtitle && <Subtitle $small={small}>{subtitle}</Subtitle>}
+      </Content>
+      {actions && <Actions>{actions}</Actions>}
    </Wrapper>
  );
 };

-const Wrapper = styled.div`
+const Wrapper = styled.li`
  display: flex;
  padding: ${(props) => (props.$border === false ? 0 : "8px 0")};
  margin: ${(props) => (props.$border === false ? "8px 0" : 0)};
@@ -81,35 +57,28 @@ const Image = styled(Flex)`
 `;

 const Heading = styled.p`
-  font-size: ${(props) => (props.$small ? 14 : 16)}px;
+  font-size: ${(props) => (props.$small ? 15 : 16)}px;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
-  line-height: ${(props) => (props.$small ? 1.3 : 1.2)};
+  line-height: 1.2;
  margin: 0;
 `;

-const Content = styled.div`
-  display: flex;
-  flex-direction: column;
+const Content = styled(Flex)`
  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.$selected ? props.theme.white50 : props.theme.textTertiary};
+  color: ${(props) => props.theme.textTertiary};
  margin-top: -2px;
 `;

-export const Actions = styled(Flex)`
+const Actions = styled.div`
  align-self: center;
-  justify-content: center;
-  color: ${(props) =>
-    props.$selected ? props.theme.white : props.theme.textSecondary};
 `;

-export default React.forwardRef<Props, HTMLDivElement>(ListItem);
+export default ListItem;
@@ -1,9 +1,39 @@
 // @flow
-import { format as formatDate, formatDistanceToNow } from "date-fns";
+import { format, formatDistanceToNow } from "date-fns";
+import {
+  enUS,
+  de,
+  faIR,
+  fr,
+  es,
+  it,
+  ja,
+  ko,
+  ptBR,
+  pt,
+  zhCN,
+  zhTW,
+  ru,
+} from "date-fns/locale";
 import * as React from "react";
 import Tooltip from "components/Tooltip";
 import useUserLocale from "hooks/useUserLocale";
-import { dateLocale } from "utils/i18n";
+
+const locales = {
+  en_US: enUS,
+  de_DE: de,
+  es_ES: es,
+  fa_IR: faIR,
+  fr_FR: fr,
+  it_IT: it,
+  ja_JP: ja,
+  ko_KR: ko,
+  pt_BR: ptBR,
+  pt_PT: pt,
+  zh_CN: zhCN,
+  zh_TW: zhTW,
+  ru_RU: ru,
+};

 let callbacks = [];

@@ -27,8 +57,6 @@ type Props = {
  tooltipDelay?: number,
  addSuffix?: boolean,
  shorten?: boolean,
-  relative?: boolean,
-  format?: string,
 };

 function LocaleTime({
@@ -36,8 +64,6 @@ function LocaleTime({
  children,
  dateTime,
  shorten,
-  format,
-  relative,
  tooltipDelay,
 }: Props) {
  const userLocale = useUserLocale();
@@ -56,31 +82,25 @@ function LocaleTime({
    };
  }, []);

-  const locale = dateLocale(userLocale);
-  let relativeContent = formatDistanceToNow(Date.parse(dateTime), {
+  let content = formatDistanceToNow(Date.parse(dateTime), {
    addSuffix,
-    locale,
+    locale: userLocale ? locales[userLocale] : undefined,
  });

  if (shorten) {
-    relativeContent = relativeContent
+    content = content
      .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={tooltipContent} delay={tooltipDelay} placement="bottom">
-      <time dateTime={dateTime}>{content}</time>
+    <Tooltip
+      tooltip={format(Date.parse(dateTime), "MMMM do, yyyy h:mm a")}
+      delay={tooltipDelay}
+      placement="bottom"
+    >
+      <time dateTime={dateTime}>{children || content}</time>
    </Tooltip>
  );
 }
@@ -1,11 +0,0 @@
-// @flow
-import styled from "styled-components";
-
-const MenuIconWrapper = styled.span`
-  width: 24px;
-  height: 24px;
-  margin-right: 6px;
-  margin-left: -4px;
-`;
-
-export default MenuIconWrapper;
@@ -61,8 +61,7 @@ const Modal = ({
          <Dialog
            {...dialog}
            aria-label={title}
-            preventBodyScroll
-            hideOnEsc
+            preventBodyScrollhideOnEsc
            hide={onRequestClose}
          >
            {(props) => (
@@ -1,26 +0,0 @@
-// @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>
-  );
-}
@@ -1,19 +0,0 @@
-// @flow
-import { PlusIcon } from "outline-icons";
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-import { Link } from "react-router-dom";
-import Button from "components/Button";
-import { newDocumentUrl } from "utils/routeHelpers";
-
-const NewDocumentButton = () => {
-  const { t } = useTranslation();
-
-  return (
-    <Button as={Link} to={newDocumentUrl()} icon={<PlusIcon />}>
-      {t("New doc")}
-    </Button>
-  );
-};
-
-export default NewDocumentButton;
@@ -12,7 +12,6 @@ const Button = styled.button`
  padding: 0;
  cursor: pointer;
  user-select: none;
-  color: inherit;
 `;

 export default React.forwardRef<any, typeof Button>(
@@ -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,
@@ -1,53 +0,0 @@
-// @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;
@@ -2,15 +2,12 @@
 import ArrowKeyNavigation from "boundless-arrow-key-navigation";
 import { isEqual } from "lodash";
 import { observable, action } from "mobx";
-import { observer, inject } from "mobx-react";
+import { observer } from "mobx-react";
 import * as React from "react";
-import { withTranslation, type TFunction } from "react-i18next";
 import { Waypoint } from "react-waypoint";
-import AuthStore from "stores/AuthStore";
 import { DEFAULT_PAGINATION_LIMIT } from "stores/BaseStore";
 import DelayedMount from "components/DelayedMount";
 import PlaceholderList from "components/List/Placeholder";
-import { dateToHeading } from "utils/dates";

 type Props = {
  fetch?: (options: ?Object) => Promise<void>,
@@ -18,10 +15,7 @@ type Props = {
  heading?: React.Node,
  empty?: React.Node,
  items: any[],
-  auth: AuthStore,
-  renderItem: (any, index: number) => React.Node,
-  renderHeading?: (name: React.Element<any> | string) => React.Node,
-  t: TFunction,
+  renderItem: (any) => React.Node,
 };

@observer
@@ -107,9 +101,8 @@ class PaginatedList extends React.Component<Props> {
  };

  render() {
-    const { items, heading, auth, empty, renderHeading } = this.props;
+    const { items, heading, empty } = this.props;

-    let previousHeading = "";
    const showLoading =
      this.isFetching && !this.isFetchingMore && !this.isInitiallyLoaded;
    const showEmpty = !items.length && !showLoading;
@@ -126,41 +119,7 @@ class PaginatedList extends React.Component<Props> {
              mode={ArrowKeyNavigation.mode.VERTICAL}
              defaultActiveChildIndex={0}
            >
-              {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;
-              })}
+              {items.slice(0, this.renderCount).map(this.props.renderItem)}
            </ArrowKeyNavigation>
            {this.allowLoadMore && (
              <Waypoint key={this.renderCount} onEnter={this.loadMoreResults} />
@@ -177,6 +136,4 @@ class PaginatedList extends React.Component<Props> {
  }
 }

-export const Component = PaginatedList;
-
-export default withTranslation()<PaginatedList>(inject("auth")(PaginatedList));
+export default PaginatedList;
@@ -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 { Component as PaginatedList } from "./PaginatedList";
+import PaginatedList from "./PaginatedList";

 describe("PaginatedList", () => {
  const render = () => null;
@@ -13,38 +13,43 @@ type Props = {
  result: DocumentPath,
  document?: ?Document,
  collection: ?Collection,
-  selected?: boolean,
-  setSelectedPath?: (DocumentPath) => void,
+  onSuccess?: () => void,
  style?: Object,
  ref?: (?React.ElementRef<"div">) => void,
 };

-const PathToDocument = ({
-  result,
-  collection,
-  document,
-  ref,
-  style,
-  selected,
-  setSelectedPath,
-}: Props) => {
-  if (!result) return <div />;
+@observer
+class PathToDocument extends React.Component<Props> {
+  handleClick = async (ev: SyntheticEvent<>) => {
+    ev.preventDefault();
+    const { document, result, onSuccess } = this.props;
+    if (!document) return;

-  return (
-    <ResultWrapper
-      ref={ref}
-      onClick={() => {
-        setSelectedPath && setSelectedPath(result);
-      }}
-      style={style}
-      role="option"
-      selectable
-      selected={selected}
-    >
-      <Flex>
-        {collection && (
-          <CollectionIcon collection={collection} useLuminance={selected} />
-        )}
+    if (result.type === "document") {
+      await document.move(result.collectionId, result.id);
+    } else {
+      await document.move(result.collectionId, null);
+    }
+
+    if (onSuccess) onSuccess();
+  };
+
+  render() {
+    const { result, collection, document, ref, style } = this.props;
+    const Component = document ? ResultWrapperLink : ResultWrapper;
+
+    if (!result) return <div />;
+
+    return (
+      <Component
+        ref={ref}
+        onClick={this.handleClick}
+        href=""
+        style={style}
+        role="option"
+        selectable
+      >
+        {collection && <CollectionIcon collection={collection} />}
        &nbsp;
        {result.path
          .map((doc) => <Title key={doc.id}>{doc.title}</Title>)
@@ -55,10 +60,10 @@ const PathToDocument = ({
            <StyledGoToIcon /> <Title>{document.title}</Title>
          </DocumentTitle>
        )}
-      </Flex>
-    </ResultWrapper>
-  );
-};
+      </Component>
+    );
+  }
+}

 const DocumentTitle = styled(Flex)``;

@@ -73,19 +78,23 @@ const StyledGoToIcon = styled(GoToIcon)`
 `;

 const ResultWrapper = styled.div`
-  padding: 8px 4px;
  display: flex;
-  align-items: center;
-  justify-content: space-between;
  margin-bottom: 10px;
  user-select: none;
-  background: ${(props) => (props.selected ? props.theme.selected : "")};
-  color: ${(props) => (props.selected ? "white" : props.theme.text)};
+
+  color: ${(props) => props.theme.text};
  cursor: default;
-  border-radius: 4px;
+
+  svg {
+    flex-shrink: 0;
+  }
+`;
+
+const ResultWrapperLink = styled(ResultWrapper.withComponent("a"))`
+  padding: 8px 4px;

  ${DocumentTitle} {
-    display: ${(props) => (props.selected ? "flex" : "none")};
+    display: none;
  }

  svg {
@@ -95,8 +104,7 @@ const ResultWrapper = styled.div`
  &:hover,
  &:active,
  &:focus {
-    background: ${(props) =>
-      props.selected ? "" : props.theme.listItemHoverBackground};
+    background: ${(props) => props.theme.listItemHoverBackground};
    outline: none;

    ${DocumentTitle} {
@@ -105,4 +113,4 @@ const ResultWrapper = styled.div`
  }
 `;

-export default observer(PathToDocument);
+export default PathToDocument;
@@ -6,45 +6,18 @@ 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>
-    );
-  }
-
+export default function PlaceholderDocument(props: Object) {
  return (
-    <DelayedMount delay={delay}>
+    <DelayedMount>
      <Wrapper>
-        <Fade>
-          <Flex column auto>
-            <PlaceholderText height={34} maxWidth={70} />
-            <PlaceholderText delay={0.2} maxWidth={40} />
-            <br />
-
-            {content}
-          </Flex>
-        </Fade>
+        <Flex column auto {...props}>
+          <PlaceholderText height={34} maxWidth={70} />
+          <PlaceholderText delay={0.2} maxWidth={40} />
+          <br />
+          <PlaceholderText delay={0.2} />
+          <PlaceholderText delay={0.4} />
+          <PlaceholderText delay={0.6} />
+        </Flex>
      </Wrapper>
    </DelayedMount>
  );
@@ -2,11 +2,12 @@
 import { observer } from "mobx-react";
 import {
  EditIcon,
-  SearchIcon,
-  ShapesIcon,
  HomeIcon,
  PlusIcon,
+  SearchIcon,
  SettingsIcon,
+  ShapesIcon,
+  StarredIcon,
 } from "outline-icons";
 import * as React from "react";
 import { DndProvider } from "react-dnd";
@@ -24,7 +25,6 @@ import ArchiveLink from "./components/ArchiveLink";
 import Collections from "./components/Collections";
 import Section from "./components/Section";
 import SidebarLink from "./components/SidebarLink";
-import Starred from "./components/Starred";
 import TeamButton from "./components/TeamButton";
 import TrashLink from "./components/TrashLink";
 import useCurrentTeam from "hooks/useCurrentTeam";
@@ -109,6 +109,12 @@ function MainSidebar() {
                label={t("Search")}
                exact={false}
              />
+              <SidebarLink
+                to="/starred"
+                icon={<StarredIcon color="currentColor" />}
+                exact={false}
+                label={t("Starred")}
+              />
              {can.createDocument && (
                <SidebarLink
                  to="/drafts"
@@ -129,7 +135,6 @@ function MainSidebar() {
                />
              )}
            </Section>
-            <Starred />
            <Section auto>
              <Collections
                onCreateCollection={handleCreateCollectionModalOpen}
@@ -144,11 +149,7 @@ function MainSidebar() {
                    exact={false}
                    label={t("Templates")}
                    active={
-                      documents.active
-                        ? documents.active.isTemplate &&
-                          !documents.active.isDeleted &&
-                          !documents.active.isArchived
-                        : undefined
+                      documents.active ? documents.active.template : undefined
                    }
                  />
                  <ArchiveLink documents={documents} />
@@ -11,7 +11,6 @@ import {
  LinkIcon,
  TeamIcon,
  ExpandedIcon,
-  BeakerIcon,
 } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
@@ -96,15 +95,6 @@ function SettingsSidebar() {
                label={t("Security")}
              />
            )}
-            {can.update &&
-              env.COLLABORATION_URL &&
-              env.DEPLOYMENT !== "hosted" && (
-                <SidebarLink
-                  to="/settings/features"
-                  icon={<BeakerIcon color="currentColor" />}
-                  label={t("Features")}
-                />
-              )}
            <SidebarLink
              to="/settings/members"
              icon={<UserIcon color="currentColor" />}
@@ -3,14 +3,10 @@ import fractionalIndex from "fractional-index";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useDrop, useDrag } from "react-dnd";
-import { useTranslation } from "react-i18next";
-import { useLocation } from "react-router-dom";
 import styled from "styled-components";
 import Collection from "models/Collection";
 import Document from "models/Document";
-import DocumentReparent from "scenes/DocumentReparent";
 import CollectionIcon from "components/CollectionIcon";
-import Modal from "components/Modal";
 import DocumentLink from "./DocumentLink";
 import DropCursor from "./DropCursor";
 import DropToImport from "./DropToImport";
@@ -40,15 +36,7 @@ function CollectionLink({
  isDraggingAnyCollection,
  onChangeDragging,
 }: Props) {
-  const { t } = useTranslation();
-  const { search } = useLocation();
  const [menuOpen, handleMenuOpen, handleMenuClose] = useBoolean();
-  const [
-    permissionOpen,
-    handlePermissionOpen,
-    handlePermissionClose,
-  ] = useBoolean();
-  const itemRef = React.useRef();

  const handleTitleChange = React.useCallback(
    async (name: string) => {
@@ -64,17 +52,12 @@ function CollectionLink({
  );

  React.useEffect(() => {
-    // If we're viewing a starred document through the starred menu then don't
-    // touch the expanded / collapsed state of the collections
-    if (search === "?starred") {
-      return;
-    }
    if (isDraggingAnyCollection) {
      setExpanded(false);
    } else {
      setExpanded(collection.id === ui.activeCollectionId);
    }
-  }, [isDraggingAnyCollection, collection.id, ui.activeCollectionId, search]);
+  }, [isDraggingAnyCollection, collection.id, ui.activeCollectionId]);

  const manualSort = collection.sort.field === "index";
  const can = policies.abilities(collection.id);
@@ -84,22 +67,9 @@ function CollectionLink({
  const [{ isOver, canDrop }, drop] = useDrop({
    accept: "document",
    drop: (item, monitor) => {
-      const { id, collectionId } = item;
      if (monitor.didDrop()) return;
      if (!collection) return;
-      if (collection.id === collectionId) return;
-      const prevCollection = collections.get(collectionId);
-
-      if (
-        prevCollection &&
-        prevCollection.permission === null &&
-        prevCollection.permission !== collection.permission
-      ) {
-        itemRef.current = item;
-        handlePermissionOpen();
-      } else {
-        documents.move(id, collection.id);
-      }
+      documents.move(item.id, collection.id);
    },
    canDrop: (item, monitor) => {
      return policies.abilities(collection.id).update;
@@ -189,7 +159,6 @@ function CollectionLink({
                />
              }
              exact={false}
-              depth={0.5}
              menu={
                <>
                  {can.update && (
@@ -229,22 +198,10 @@ function CollectionLink({
            activeDocument={activeDocument}
            prefetchDocument={prefetchDocument}
            canUpdate={canUpdate}
-            depth={2}
+            depth={1.5}
            index={index}
          />
        ))}
-      <Modal
-        title={t("Move document")}
-        onRequestClose={handlePermissionClose}
-        isOpen={permissionOpen}
-      >
-        <DocumentReparent
-          item={itemRef.current}
-          collection={collection}
-          onSubmit={handlePermissionClose}
-          onCancel={handlePermissionClose}
-        />
-      </Modal>
    </>
  );
 }
@@ -1,16 +1,16 @@
 // @flow
 import fractionalIndex from "fractional-index";
 import { observer } from "mobx-react";
-import { PlusIcon, CollapsedIcon } from "outline-icons";
+import { PlusIcon } from "outline-icons";
 import * as React from "react";
 import { useDrop } from "react-dnd";
 import { useTranslation } from "react-i18next";
-import styled from "styled-components";
 import Fade from "components/Fade";
 import Flex from "components/Flex";
 import useStores from "../../../hooks/useStores";
 import CollectionLink from "./CollectionLink";
 import DropCursor from "./DropCursor";
+import Header from "./Header";
 import PlaceholderCollections from "./PlaceholderCollections";
 import SidebarLink from "./SidebarLink";
 import useCurrentTeam from "hooks/useCurrentTeam";
@@ -25,7 +25,6 @@ function Collections({ onCreateCollection }: Props) {
  const [fetchError, setFetchError] = React.useState();
  const { ui, policies, documents, collections } = useStores();
  const { showToast } = useToasts();
-  const [expanded, setExpanded] = React.useState(true);
  const isPreloaded: boolean = !!collections.orderedData.length;
  const { t } = useTranslation();
  const team = useCurrentTeam();
@@ -100,7 +99,6 @@ function Collections({ onCreateCollection }: Props) {
          icon={<PlusIcon color="currentColor" />}
          label={`${t("New collection")}…`}
          exact
-          depth={0.5}
        />
      )}
    </>
@@ -109,11 +107,7 @@ function Collections({ onCreateCollection }: Props) {
  if (!collections.isLoaded || fetchError) {
    return (
      <Flex column>
-        <SidebarLink
-          label={t("Collections")}
-          icon={<Disclosure expanded={expanded} color="currentColor" />}
-          disabled
-        />
+        <Header>{t("Collections")}</Header>
        <PlaceholderCollections />
      </Flex>
    );
@@ -121,19 +115,10 @@ function Collections({ onCreateCollection }: Props) {

  return (
    <Flex column>
-      <SidebarLink
-        onClick={() => setExpanded((prev) => !prev)}
-        label={t("Collections")}
-        icon={<Disclosure expanded={expanded} color="currentColor" />}
-      />
-      {expanded && (isPreloaded ? content : <Fade>{content}</Fade>)}
+      <Header>{t("Collections")}</Header>
+      {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);
@@ -1,13 +0,0 @@
-// @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;
@@ -1,5 +1,6 @@
 // @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";
@@ -7,7 +8,6 @@ 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";
@@ -128,12 +128,7 @@ function DocumentLink(
  // Draggable
  const [{ isDragging }, drag] = useDrag({
    type: "document",
-    item: () => ({
-      ...node,
-      depth,
-      active: isActiveDocument,
-      collectionId: collection?.id || "",
-    }),
+    item: () => ({ ...node, depth, active: isActiveDocument }),
    collect: (monitor) => ({
      isDragging: !!monitor.isDragging(),
    }),
@@ -215,7 +210,7 @@ function DocumentLink(

  return (
    <>
-      <Relative onDragLeave={resetHoverExpanding}>
+      <div style={{ position: "relative" }} onDragLeave={resetHoverExpanding}>
        <Draggable
          key={node.id}
          ref={drag}
@@ -245,14 +240,10 @@ function DocumentLink(
                    />
                  </>
                }
-                isActive={(match, location) =>
-                  match && location.search !== "?starred"
-                }
                isActiveDrop={isOverReparent && canDropToReparent}
                depth={depth}
                exact={false}
                showActions={menuOpen}
-                scrollIntoViewIfNeeded={!document?.isStarred}
                ref={ref}
                menu={
                  document && !isMoving ? (
@@ -272,7 +263,7 @@ function DocumentLink(
        {manualSort && (
          <DropCursor isActiveDrop={isOverReorder} innerRef={dropToReorder} />
        )}
-      </Relative>
+      </div>
      {expanded && !isDragging && (
        <>
          {node.children.map((childNode, index) => (
@@ -294,15 +285,19 @@ function DocumentLink(
  );
 }

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

+const Disclosure = styled(CollapsedIcon)`
+  transition: transform 100ms ease, fill 50ms !important;
+  position: absolute;
+  left: -24px;
+
+  ${({ expanded }) => !expanded && "transform: rotate(-90deg);"};
+`;
+
 const ObservedDocumentLink = observer(React.forwardRef(DocumentLink));

 export default ObservedDocumentLink;
@@ -27,7 +27,7 @@ const Cursor = styled("div")`

  width: 100%;
  height: 14px;
-  ${(props) => (props.from === "collections" ? "top: 25px;" : "bottom: -7px;")}
+  ${(props) => (props.from === "collections" ? "top: 15px;" : "bottom: -7px;")}
  background: transparent;

  ::after {
@@ -5,11 +5,10 @@ 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 12px;
+  margin: 4px 16px;
 `;

 export default Header;
@@ -31,7 +31,6 @@ type Props = {|
  activeClassName?: String,
  activeStyle?: Object,
  className?: string,
-  scrollIntoViewIfNeeded?: boolean,
  exact?: boolean,
  isActive?: any,
  location?: Location,
@@ -53,7 +52,6 @@ const NavLink = ({
  location: locationProp,
  strict,
  style: styleProp,
-  scrollIntoViewIfNeeded,
  to,
  ...rest
 }: Props) => {
@@ -85,13 +83,13 @@ const NavLink = ({
  const style = isActive ? { ...styleProp, ...activeStyle } : styleProp;

  React.useEffect(() => {
-    if (isActive && linkRef.current && scrollIntoViewIfNeeded !== false) {
+    if (isActive && linkRef.current) {
      scrollIntoView(linkRef.current, {
        scrollMode: "if-needed",
        behavior: "instant",
      });
    }
-  }, [linkRef, scrollIntoViewIfNeeded, isActive]);
+  }, [linkRef, isActive]);

  const props = {
    "aria-current": (isActive && ariaCurrent) || null,
@@ -15,7 +15,6 @@ function PlaceholderCollections() {

 const Wrapper = styled.div`
  margin: 4px 16px;
-  margin-left: 40px;
  width: 75%;
 `;

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

@@ -8,7 +8,7 @@ import EventBoundary from "components/EventBoundary";
 import NavLink from "./NavLink";
 import { type Theme } from "types";

-type Props = {|
+type Props = {
  to?: string | Object,
  href?: string | Object,
  innerRef?: (?HTMLElement) => void,
@@ -28,8 +28,7 @@ type Props = {|
  theme: Theme,
  exact?: boolean,
  depth?: number,
-  scrollIntoViewIfNeeded?: boolean,
-|};
+};

 function SidebarLink(
  {
@@ -50,14 +49,12 @@ function SidebarLink(
    history,
    match,
    className,
-    scrollIntoViewIfNeeded,
-    ...rest
  }: Props,
  ref
 ) {
  const style = React.useMemo(() => {
    return {
-      paddingLeft: `${(depth || 0) * 16 + 12}px`,
+      paddingLeft: `${(depth || 0) * 16 + 16}px`,
    };
  }, [depth]);

@@ -76,7 +73,6 @@ function SidebarLink(
    <>
      <Link
        $isActiveDrop={isActiveDrop}
-        scrollIntoViewIfNeeded={scrollIntoViewIfNeeded}
        activeStyle={isActiveDrop ? activeDropStyle : activeStyle}
        style={active ? activeStyle : style}
        onClick={onClick}
@@ -87,7 +83,6 @@ function SidebarLink(
        href={href}
        className={className}
        ref={ref}
-        {...rest}
      >
        {icon && <IconWrapper>{icon}</IconWrapper>}
        <Label>{label}</Label>
@@ -136,7 +131,6 @@ 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) =>
@@ -162,11 +156,13 @@ 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;
+        }
      }
    }

@@ -1,171 +0,0 @@
-// @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);
@@ -1,127 +0,0 @@
-// @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}?starred`}
-          isActive={(match, location) =>
-            match && location.search === "?starred"
-          }
-          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;
@@ -1,5 +1,4 @@
 // @flow
-import { observer } from "mobx-react";
 import { ExpandedIcon } from "outline-icons";
 import * as React from "react";
 import styled from "styled-components";
@@ -85,4 +84,4 @@ const Header = styled.button`
  }
 `;

-export default observer(TeamButton);
+export default TeamButton;
@@ -8,7 +8,6 @@ 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";
@@ -29,7 +28,6 @@ type Props = {
  views: ViewsStore,
  auth: AuthStore,
  toasts: ToastsStore,
-  fileOperations: FileOperationsStore,
 };

@observer
@@ -82,7 +80,6 @@ class SocketProvider extends React.Component<Props> {
      policies,
      presence,
      views,
-      fileOperations,
    } = this.props;
    if (!auth.token) return;

@@ -290,21 +287,6 @@ 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) => {
@@ -363,6 +345,5 @@ export default inject(
  "memberships",
  "presence",
  "policies",
-  "views",
-  "fileOperations"
+  "views"
 )(SocketProvider);
@@ -1,13 +1,25 @@
 // @flow
 import { m } from "framer-motion";
 import * as React from "react";
-import styled, { useTheme } from "styled-components";
-import NavLinkWithChildrenFunc from "components/NavLink";
+import { NavLink, Route } from "react-router-dom";
+import styled, { withTheme } from "styled-components";
+import { type Theme } from "types";

 type Props = {
+  theme: Theme,
  children: React.Node,
 };

+const NavLinkWithChildrenFunc = ({ to, exact = false, children, ...rest }) => (
+  <Route path={to} exact={exact}>
+    {({ match }) => (
+      <NavLink to={to} exact={exact} {...rest}>
+        {children(match)}
+      </NavLink>
+    )}
+  </Route>
+);
+
 const TabLink = styled(NavLinkWithChildrenFunc)`
  position: relative;
  display: inline-flex;
@@ -41,8 +53,7 @@ const transition = {
  damping: 30,
 };

-export default function Tab({ children, ...rest }: Props) {
-  const theme = useTheme();
+function Tab({ theme, children, ...rest }: Props) {
  const activeStyle = {
    color: theme.textSecondary,
  };
@@ -64,3 +75,5 @@ export default function Tab({ children, ...rest }: Props) {
    </TabLink>
  );
 }
+
+export default withTheme(Tab);
@@ -1,5 +1,4 @@
 // @flow
-import { isEqual } from "lodash";
 import { observer } from "mobx-react";
 import { CollapsedIcon } from "outline-icons";
 import * as React from "react";
@@ -25,7 +24,6 @@ export type Props = {|
  onChangePage: (index: number) => void,
  onChangeSort: (sort: ?string, direction: "ASC" | "DESC") => void,
  columns: any,
-  defaultSortDirection: "ASC" | "DESC",
 |};

 function Table({
@@ -41,7 +39,6 @@ function Table({
  topRef,
  onChangeSort,
  onChangePage,
-  defaultSortDirection,
 }: Props) {
  const { t } = useTranslation();
  const {
@@ -65,52 +62,32 @@ function Table({
      autoResetPage: false,
      pageCount: totalPages,
      initialState: {
-        sortBy: [
-          {
-            id: defaultSort,
-            desc: defaultSortDirection === "DESC" ? true : false,
-          },
-        ],
+        sortBy: [{ id: defaultSort, desc: false }],
        pageSize,
        pageIndex: page,
      },
-      stateReducer: (newState, action, prevState) => {
-        if (!isEqual(newState.sortBy, prevState.sortBy)) {
-          return { ...newState, pageIndex: 0 };
-        }
-        return newState;
-      },
    },
    useSortBy,
    usePagination
  );

-  const prevSortBy = React.useRef(sortBy);
+  React.useEffect(() => {
+    onChangePage(pageIndex);
+  }, [pageIndex]);

  React.useEffect(() => {
-    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);
-  };
+    onChangePage(0);
+    onChangeSort(
+      sortBy.length ? sortBy[0].id : undefined,
+      sortBy.length && sortBy[0].desc ? "DESC" : "ASC"
+    );
+  }, [sortBy]);

  const isEmpty = !isLoading && data.length === 0;
  const showPlaceholder = isLoading && data.length === 0;

+  console.log({ canNextPage, pageIndex, totalPages, rows, data });
+
  return (
    <>
      <Anchor ref={topRef} />
@@ -165,12 +142,12 @@ function Table({
        >
          {/* Note: the page > 0 check shouldn't be needed here but is */}
          {canPreviousPage && page > 0 && (
-            <Button onClick={handlePreviousPage} neutral>
+            <Button onClick={previousPage} neutral>
              {t("Previous page")}
            </Button>
          )}
          {canNextPage && (
-            <Button onClick={handleNextPage} neutral>
+            <Button onClick={nextPage} neutral>
              {t("Next page")}
            </Button>
          )}
@@ -232,7 +209,7 @@ const SortWrapper = styled(Flex)`
 `;

 const Cell = styled.td`
-  padding: 6px;
+  padding: 8px 0;
  border-bottom: 1px solid ${(props) => props.theme.divider};
  font-size: 14px;

@@ -249,14 +226,6 @@ 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;
@@ -268,7 +237,7 @@ const Head = styled.th`
  text-align: left;
  position: sticky;
  top: 54px;
-  padding: 6px;
+  padding: 6px 0;
  border-bottom: 1px solid ${(props) => props.theme.divider};
  background: ${(props) => props.theme.background};
  transition: ${(props) => props.theme.backgroundTransition};
@@ -276,14 +245,6 @@ 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);
@@ -11,7 +11,6 @@ type Props = {
  children?: React.Node,
  tooltipDelay?: number,
  addSuffix?: boolean,
-  format?: string,
  shorten?: boolean,
 };

@@ -1,7 +1,7 @@
 // @flow
 import * as React from "react";
+import Image from "components/Image";
 import Frame from "./components/Frame";
-import Image from "./components/Image";

 const URL_REGEX = new RegExp(
  "^https?://datastudio.google.com/(embed|u/0)/reporting/(.*)/page/(.*)(/edit)?$"
@@ -1,7 +1,7 @@
 // @flow
 import * as React from "react";
+import Image from "components/Image";
 import Frame from "./components/Frame";
-import Image from "./components/Image";

 const URL_REGEX = new RegExp("^https?://docs.google.com/document/(.*)$");

@@ -1,7 +1,7 @@
 // @flow
 import * as React from "react";
+import Image from "components/Image";
 import Frame from "./components/Frame";
-import Image from "./components/Image";

 const URL_REGEX = new RegExp(
  "^https://docs.google.com/drawings/d/(.*)/(edit|preview)(.*)$"
@@ -1,9 +1,11 @@
 // @flow
 import * as React from "react";
+import Image from "components/Image";
 import Frame from "./components/Frame";
-import Image from "./components/Image";

-const URL_REGEX = new RegExp("^https?://drive.google.com/file/d/(.*)$");
+const URL_REGEX = new RegExp(
+  "^https?://drive.google.com/file/d/(.*)/(preview|view).?usp=sharing$"
+);

 type Props = {|
  attrs: {|
@@ -27,7 +29,7 @@ export default class GoogleDrive extends React.Component<Props> {
            height={16}
          />
        }
-        title="Google Drive"
+        title="Google Drive Embed"
        canonicalUrl={this.props.attrs.href}
        border
      />
@@ -3,7 +3,6 @@ import GoogleDrive from "./GoogleDrive";

 describe("GoogleDrive", () => {
  const match = GoogleDrive.ENABLED[0];
-
  test("to be enabled on share link", () => {
    expect(
      "https://drive.google.com/file/d/1ohkOgmE8MiNx68u6ynBfYkgjeKu_x3ZK/view?usp=sharing".match(
@@ -15,14 +14,24 @@ describe("GoogleDrive", () => {
        match
      )
    ).toBeTruthy();
-    expect(
-      "https://drive.google.com/file/d/1ohkOgmE8MiNx68u6ynBfYkgjeKu_x3ZK/preview?usp=sharing&resourceKey=BG8k4dEt1p2gisnVdlaSpA".match(
-        match
-      )
-    ).toBeTruthy();
  });

  test("to not be enabled elsewhere", () => {
+    expect(
+      "https://drive.google.com/file/d/1ohkOgmE8MiNx68u6ynBfYkgjeKu_x3ZK/view".match(
+        match
+      )
+    ).toBe(null);
+    expect(
+      "https://drive.google.com/file/d/1ohkOgmE8MiNx68u6ynBfYkgjeKu_x3ZK/preview".match(
+        match
+      )
+    ).toBe(null);
+    expect(
+      "https://drive.google.com/file/d/1ohkOgmE8MiNx68u6ynBfYkgjeKu_x3ZK/view?usp=restricted".match(
+        match
+      )
+    ).toBe(null);
    expect("https://drive.google.com/file".match(match)).toBe(null);
    expect("https://drive.google.com".match(match)).toBe(null);
    expect("https://www.google.com".match(match)).toBe(null);
@@ -1,7 +1,7 @@
 // @flow
 import * as React from "react";
+import Image from "components/Image";
 import Frame from "./components/Frame";
-import Image from "./components/Image";

 const URL_REGEX = new RegExp("^https?://docs.google.com/spreadsheets/d/(.*)$");

@@ -1,7 +1,7 @@
 // @flow
 import * as React from "react";
+import Image from "components/Image";
 import Frame from "./components/Frame";
-import Image from "./components/Image";

 const URL_REGEX = new RegExp("^https?://docs.google.com/presentation/d/(.*)$");

--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Tom Moor	6146843845	test: Load policies	2021-07-30 11:47:42 -04:00
Tom Moor	26c5d5e4fe	perf: Remove inline require call	2021-07-30 11:31:38 -04:00