Check for access token validity in auth.info

Enable google offline access
2026-06-14 03:45:00 +03:00 · 2021-07-24 18:44:41 +05:30 · 2021-07-24 18:44:22 +05:30
364 changed files with 3917 additions and 10783 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,38 +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=
-
-# 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

@@ -112,23 +94,19 @@ FORCE_HTTPS=true
 # the maintainers
 ENABLE_UPDATES=true

-# How many processes should be spawned. As a reasonable rule divide your servers
-# available memory by 512 for a rough estimate
-WEB_CONCURRENCY=1
-
 # Override the maxium size of document imports, could be required if you have
 # especially large Word documents with embedded imagery
 MAXIMUM_IMPORT_SIZE=5120000

 # You may enable or disable debugging categories to increase the noisiness of
 # logs. The default is a good balance
-DEBUG=cache,presenters,events,emails,mailer,utils,http,server,processors
+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
 #
@@ -136,13 +114,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=
@@ -156,6 +134,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"]
@@ -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,16 +110,18 @@ 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

@@ -142,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
@@ -6,7 +6,6 @@ import { Redirect } from "react-router-dom";
 import { isCustomSubdomain } from "shared/utils/domains";
 import LoadingIndicator from "components/LoadingIndicator";
 import useStores from "../hooks/useStores";
-import { changeLanguage } from "../utils/language";
 import env from "env";

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

  if (auth.authenticated) {
@@ -66,11 +66,7 @@ const RealButton = styled.button`
    

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

 type Props = {|
  onClick?: (SyntheticEvent<>) => void | Promise<void>,
@@ -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>
      )}
@@ -134,8 +130,8 @@ export const MenuAnchor = styled.a`
  `};

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

@@ -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,15 +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.icon
-  );
-
-  return filteredTemplates.map((item, index) => {
-    if (iconIsPresentInAnyMenuItem)
-      item.icon = item.icon ? item.icon : <MenuIconWrapper />;
-
+  return filterTemplateItems(items).map((item, index) => {
    if (item.to) {
      return (
        <MenuItem
@@ -86,7 +76,6 @@ function Template({ items, ...menu }: Props): React.Node {
          key={index}
          disabled={item.disabled}
          selected={item.selected}
-          icon={item.icon}
          {...menu}
        >
          {item.title}
@@ -103,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}
@@ -119,7 +107,6 @@ function Template({ items, ...menu }: Props): React.Node {
          disabled={item.disabled}
          selected={item.selected}
          key={index}
-          icon={item.icon}
          {...menu}
        >
          {item.title}
@@ -133,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}
        />
      );
@@ -152,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);
@@ -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;
@@ -66,7 +66,6 @@ function DocumentListItem(props: Props, ref) {
  const canStar =
    !document.isDraft && !document.isArchived && !document.isTemplate;
  const can = policies.abilities(currentTeam.id);
-  const canCollection = policies.abilities(document.collectionId);

  return (
    <DocumentLink
@@ -127,8 +126,7 @@ function DocumentListItem(props: Props, ref) {
        {document.isTemplate &&
          !document.isArchived &&
          !document.isDeleted &&
-          can.createDocument &&
-          canCollection.update && (
+          can.createDocument && (
            <>
              <Button
                as={Link}
@@ -6,7 +6,6 @@ import { Link } from "react-router-dom";
 import styled from "styled-components";
 import Document from "models/Document";
 import DocumentBreadcrumb from "components/DocumentBreadcrumb";
-import DocumentTasks from "components/DocumentTasks";
 import Flex from "components/Flex";
 import Time from "components/Time";
 import useCurrentUser from "hooks/useCurrentUser";
@@ -65,8 +64,6 @@ function DocumentMeta({
    deletedAt,
    isDraft,
    lastViewedAt,
-    isTasks,
-    isTemplate,
  } = document;

  // Prevent meta information from displaying if updatedBy is not available.
@@ -117,11 +114,6 @@ function DocumentMeta({
    );
  }

-  const nestedDocumentsCount = collection
-    ? collection.getDocumentChildren(document.id).length
-    : 0;
-  const canShowProgressBar = isTasks && !isTemplate;
-
  const timeSinceNow = () => {
    if (isDraft || !showLastViewed) {
      return null;
@@ -141,6 +133,10 @@ function DocumentMeta({
    );
  };

+  const nestedDocumentsCount = collection
+    ? collection.getDocumentChildren(document.id).length
+    : 0;
+
  return (
    <Container align="center" rtl={document.dir === "rtl"} {...rest} dir="ltr">
      {lastUpdatedByCurrentUser ? t("You") : updatedBy.name}&nbsp;
@@ -155,17 +151,11 @@ function DocumentMeta({
      )}
      {showNestedDocuments && nestedDocumentsCount > 0 && (
        <span>
-          &nbsp;• {nestedDocumentsCount}{" "}
+          &nbsp;&middot; {nestedDocumentsCount}{" "}
          {t("nested document", { count: nestedDocumentsCount })}
        </span>
      )}
      &nbsp;{timeSinceNow()}
-      {canShowProgressBar && (
-        <>
-          &nbsp;•&nbsp;
-          <DocumentTasks document={document} />
-        </>
-      )}
      {children}
    </Container>
  );
@@ -42,7 +42,7 @@ function DocumentMetaWithViews({ to, isDraft, document, ...rest }: Props) {
        <PopoverDisclosure {...popover}>
          {(props) => (
            <>
-              &nbsp;•&nbsp;
+              &nbsp;&middot;&nbsp;
              <a {...props}>
                {t("Viewed by")}{" "}
                {onlyYou
@@ -1,59 +0,0 @@
-// @flow
-import { DoneIcon } from "outline-icons";
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-import styled, { useTheme } from "styled-components";
-import CircularProgressBar from "components/CircularProgressBar";
-import usePrevious from "../hooks/usePrevious";
-import Document from "../models/Document";
-import { bounceIn } from "styles/animations";
-
-type Props = {|
-  document: Document,
-|};
-
-function getMessage(t, total, completed) {
-  if (completed === 0) {
-    return t(`{{ total }} task`, { total, count: total });
-  } else if (completed === total) {
-    return t(`{{ completed }} task done`, { completed, count: completed });
-  } else {
-    return t(`{{ completed }} of {{ total }} tasks`, {
-      total,
-      completed,
-    });
-  }
-}
-
-function DocumentTasks({ document }: Props) {
-  const { tasks, tasksPercentage } = document;
-  const { t } = useTranslation();
-  const theme = useTheme();
-  const { completed, total } = tasks;
-  const done = completed === total;
-  const previousDone = usePrevious(done);
-  const message = getMessage(t, total, completed);
-
-  return (
-    <>
-      {completed === total ? (
-        <Done
-          color={theme.primary}
-          size={20}
-          $animated={done && previousDone === false}
-        />
-      ) : (
-        <CircularProgressBar percentage={tasksPercentage} />
-      )}
-      &nbsp;{message}
-    </>
-  );
-}
-
-const Done = styled(DoneIcon)`
-  margin: -1px;
-  animation: ${(props) => (props.$animated ? bounceIn : "none")} 600ms;
-  transform-origin: center center;
-`;
-
-export default DocumentTasks;
@@ -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,
@@ -151,7 +148,6 @@ function Editor(props: PropsWithRef) {
      hr: t("Divider"),
      image: t("Image"),
      imageUploadError: t("Sorry, an error occurred uploading the image"),
-      imageCaptionPlaceholder: t("Write a caption"),
      info: t("Info"),
      infoNotice: t("Info notice"),
      link: t("Link"),
@@ -249,50 +245,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;
@@ -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,6 +1,5 @@
 // @flow
 import {
-  BookmarkedIcon,
  CollectionIcon,
  CoinsIcon,
  AcademicCapIcon,
@@ -9,12 +8,9 @@ import {
  CloudIcon,
  CodeIcon,
  EditIcon,
-  EmailIcon,
  EyeIcon,
-  ImageIcon,
  LeafIcon,
  LightBulbIcon,
-  MathIcon,
  MoonIcon,
  NotepadIcon,
  PadlockIcon,
@@ -22,7 +18,6 @@ import {
  QuestionMarkIcon,
  SunIcon,
  VehicleIcon,
-  WarningIcon,
 } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
@@ -44,10 +39,6 @@ const TwitterPicker = React.lazy(() =>
 );

 export const icons = {
-  bookmark: {
-    component: BookmarkedIcon,
-    keywords: "bookmark",
-  },
  collection: {
    component: CollectionIcon,
    keywords: "collection",
@@ -76,18 +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",
  },
-  image: {
-    component: ImageIcon,
-    keywords: "image photo picture",
-  },
  leaf: {
    component: LeafIcon,
    keywords: "leaf plant outdoors nature ecosystem climate",
@@ -96,10 +79,6 @@ export const icons = {
    component: LightBulbIcon,
    keywords: "lightbulb idea",
  },
-  math: {
-    component: MathIcon,
-    keywords: "math formula",
-  },
  moon: {
    component: MoonIcon,
    keywords: "night moon dark",
@@ -132,10 +111,6 @@ export const icons = {
    component: VehicleIcon,
    keywords: "truck car travel transport",
  },
-  warning: {
-    component: WarningIcon,
-    keywords: "danger",
-  },
 };

 const colors = [
@@ -217,7 +192,7 @@ const Label = styled.label`
 `;

 const Icons = styled.div`
-  padding: 16px 8px 0 16px;
+  padding: 15px 9px 9px 15px;
  width: 276px;
 `;

@@ -1,6 +1,6 @@
 // @flow
 import * as React from "react";
-import { cdnPath } from "../../utils/urls";
+import { cdnPath } from "utils/urls";

 type Props = {|
  alt: string,
@@ -4,7 +4,6 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { VisuallyHidden } from "reakit/VisuallyHidden";
 import styled from "styled-components";
-import breakpoint from "styled-components-breakpoint";
 import { Outline, LabelText } from "./Input";

 const Select = styled.select`
@@ -16,7 +15,6 @@ const Select = styled.select`
  background: none;
  color: ${(props) => props.theme.text};
  height: 30px;
-  font-size: 14px;

  option {
    background: ${(props) => props.theme.buttonNeutralBackground};
@@ -26,10 +24,6 @@ const Select = styled.select`
  &::placeholder {
    color: ${(props) => props.theme.placeholder};
  }
-
-  ${breakpoint("mobile", "tablet")`
-    font-size: 16px;
-  `};
 `;

 const Wrapper = styled.label`
@@ -1,22 +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<Props, { options: Array<Option> }>) => {
-  const { t } = useTranslation();
-
-  return (
-    <InputSelect
-      label={t("Role")}
-      options={[
-        { label: t("Member"), value: "member" },
-        { label: t("Viewer"), value: "viewer" },
-        { label: t("Admin"), value: "admin" },
-      ]}
-      {...props}
-    />
-  );
-};
-
-export default InputSelectRole;
@@ -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,62 +1,41 @@
 // @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}>{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;
-  user-select: none;
  padding: ${(props) => (props.$border === false ? 0 : "8px 0")};
  margin: ${(props) => (props.$border === false ? "8px 0" : 0)};
  border-bottom: 1px solid
@@ -78,36 +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;
-  margin-right: 4px;
-  color: ${(props) =>
-    props.$selected ? props.theme.white : props.theme.textSecondary};
 `;

-export default React.forwardRef<Props, HTMLDivElement>(ListItem);
+export default ListItem;
@@ -11,14 +11,16 @@ const LoadingIndicatorBar = () => {
 };

 const loadingFrame = keyframes`
-  from { margin-left: -100%; }
-  to { margin-left: 100%; }
+  from {margin-left: -100%; z-index:100;}
+  to {margin-left: 100%; }
 `;

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

 export default LoadingIndicatorBar;
@@ -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;
@@ -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>
-  );
-}
@@ -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;
@@ -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} />
@@ -159,7 +159,6 @@ function CollectionLink({
                />
              }
              exact={false}
-              depth={0.5}
              menu={
                <>
                  {can.update && (
@@ -199,7 +198,7 @@ function CollectionLink({
            activeDocument={activeDocument}
            prefetchDocument={prefetchDocument}
            canUpdate={canUpdate}
-            depth={2}
+            depth={1.5}
            index={index}
          />
        ))}
@@ -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";
@@ -210,7 +210,7 @@ function DocumentLink(

  return (
    <>
-      <Relative onDragLeave={resetHoverExpanding}>
+      <div style={{ position: "relative" }} onDragLeave={resetHoverExpanding}>
        <Draggable
          key={node.id}
          ref={drag}
@@ -244,7 +244,6 @@ function DocumentLink(
                depth={depth}
                exact={false}
                showActions={menuOpen}
-                scrollIntoViewIfNeeded={!document?.isStarred}
                ref={ref}
                menu={
                  document && !isMoving ? (
@@ -264,7 +263,7 @@ function DocumentLink(
        {manualSort && (
          <DropCursor isActiveDrop={isOverReorder} innerRef={dropToReorder} />
        )}
-      </Relative>
+      </div>
      {expanded && !isDragging && (
        <>
          {node.children.map((childNode, index) => (
@@ -286,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 {
@@ -14,7 +14,6 @@ function EditableTitle({ title, onSubmit, canUpdate }: Props) {
  const [originalValue, setOriginalValue] = React.useState(title);
  const [value, setValue] = React.useState(title);
  const { showToast } = useToasts();
-
  React.useEffect(() => {
    setValue(title);
  }, [title]);
@@ -39,33 +38,26 @@ function EditableTitle({ title, onSubmit, canUpdate }: Props) {
    [originalValue]
  );

-  const handleSave = React.useCallback(
-    async (ev) => {
-      ev.preventDefault();
+  const handleSave = React.useCallback(async () => {
+    setIsEditing(false);

-      setIsEditing(false);
+    if (value === originalValue) {
+      return;
+    }

-      const trimmedValue = value.trim();
-      if (trimmedValue === originalValue || trimmedValue.length === 0) {
+    if (document) {
+      try {
+        await onSubmit(value);
+        setOriginalValue(value);
+      } catch (error) {
        setValue(originalValue);
-        return;
+        showToast(error.message, {
+          type: "error",
+        });
+        throw error;
      }
-
-      if (document) {
-        try {
-          await onSubmit(trimmedValue);
-          setOriginalValue(trimmedValue);
-        } catch (error) {
-          setValue(originalValue);
-          showToast(error.message, {
-            type: "error",
-          });
-          throw error;
-        }
-      }
-    },
-    [originalValue, showToast, value, onSubmit]
-  );
+    }
+  }, [originalValue, showToast, value, onSubmit]);

  return (
    <>
@@ -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;

@@ -28,7 +28,6 @@ type Props = {
  theme: Theme,
  exact?: boolean,
  depth?: number,
-  scrollIntoViewIfNeeded?: boolean,
 };

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

@@ -75,7 +73,6 @@ function SidebarLink(
    <>
      <Link
        $isActiveDrop={isActiveDrop}
-        scrollIntoViewIfNeeded={scrollIntoViewIfNeeded}
        activeStyle={isActiveDrop ? activeDropStyle : activeStyle}
        style={active ? activeStyle : style}
        onClick={onClick}
@@ -134,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) =>
@@ -160,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,124 +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}
-          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} {...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,
 };

@@ -33,7 +32,7 @@ function Time(props: Props) {
        <time dateTime={props.dateTime}>{props.children || content}</time>
      }
    >
-      <LocaleTime tooltipDelay={250} {...props} />
+      <LocaleTime {...props} />
    </React.Suspense>
  );
 }
@@ -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
Saumya Pandey	988f9d5ec1	Check for access token validity in auth.info	2021-07-24 18:44:41 +05:30
Saumya Pandey	50029772fe	Enable google offline access	2021-07-24 18:44:22 +05:30