wip

fix: Allow Dropbox to only show when APP_KEY is present
fix: Add correct icon
2026-06-14 03:45:00 +03:00 · 2021-06-09 08:59:27 -07:00 · 2021-06-08 21:47:01 -07:00 · 2021-06-07 00:19:04 -07:00
291 changed files with 4845 additions and 11537 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
@@ -8,7 +8,8 @@

 # –––––––––––––––– REQUIRED ––––––––––––––––

-# Generate a hex-encoded 32-byte random key. You should use `openssl rand -hex 32`
+# Generate a unique 32 character hexadecimal key. The format is important as this
+# value is fed directly into encryption libraries. You should use `openssl rand -hex 32`
 # in your terminal to generate a random value.
 SECRET_KEY=generate_a_new_key

@@ -94,10 +95,6 @@ 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
@@ -132,8 +129,6 @@ SMTP_USERNAME=
 SMTP_PASSWORD=
 SMTP_FROM_EMAIL=
 SMTP_REPLY_EMAIL=
-SMTP_TLS_CIPHERS=
-SMTP_SECURE=true

 # Custom logo that displays on the authentication screen, scaled to height: 60px
 # TEAM_LOGO=https://example.com/images/logo.png
@@ -11,10 +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/lib0/.*
 .*/server/scripts/.*
 *.test.js

@@ -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"]
@@ -96,8 +96,7 @@ For contributing features and fixes you can quickly get an environment running u
    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. Add `http://localhost:3000/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

@@ -135,15 +135,6 @@
      "description": "wikireply@example.com (optional)",
      "required": false
    },
-    "SMTP_SECURE": {
-      "value": "true",
-      "description": "Use a secure SMTP connection (optional)",
-      "required": false
-    },
-    "SMTP_TLS_CIPHERS": {
-      "description": "Override SMTP cipher configuration (optional)",
-      "required": false
-    },
    "GOOGLE_ANALYTICS_ID": {
      "description": "UA-xxxx (optional)",
      "required": false
@@ -1,30 +0,0 @@
-{
-  "testURL": "http://localhost",
-  "verbose": false,
-  "rootDir": "..",
-  "roots": [
-    "<rootDir>/app",
-    "<rootDir>/shared"
-  ],
-  "moduleNameMapper": {
-    "^shared/(.*)$": "<rootDir>/shared/$1",
-    "^.*[.](gif|ttf|eot|svg)$": "<rootDir>/__test__/fileMock.js"
-  },
-  "moduleFileExtensions": [
-    "js",
-    "jsx",
-    "json"
-  ],
-  "moduleDirectories": [
-    "node_modules"
-  ],
-  "modulePaths": [
-    "<rootDir>/app"
-  ],
-  "setupFiles": [
-    "<rootDir>/__mocks__/window.js"
-  ],
-  "setupFilesAfterEnv": [
-    "./app/test/setup.js"
-  ]
-}
@@ -9,9 +9,7 @@ type Props = {

 export default class Analytics extends React.Component<Props> {
  componentDidMount() {
-    if (!env.GOOGLE_ANALYTICS_ID) {
-      return null;
-    }
+    if (!env.GOOGLE_ANALYTICS_ID) return;

    // standard Google Analytics script
    window.ga =
@@ -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) {
@@ -1,7 +1,7 @@
 // @flow
 import * as React from "react";
 import styled from "styled-components";
-import { bounceIn } from "styles/animations";
+import { bounceIn } from "shared/styles/animations";

 type Props = {|
  count: number,
@@ -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;
@@ -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;
@@ -12,15 +12,13 @@ import LoadingIndicator from "components/LoadingIndicator";
 import NudeButton from "components/NudeButton";
 import useDebouncedCallback from "hooks/useDebouncedCallback";
 import useStores from "hooks/useStores";
-import useToasts from "hooks/useToasts";

 type Props = {|
  collection: Collection,
 |};

 function CollectionDescription({ collection }: Props) {
-  const { collections, policies } = useStores();
-  const { showToast } = useToasts();
+  const { collections, ui, policies } = useStores();
  const { t } = useTranslation();
  const [isExpanded, setExpanded] = React.useState(false);
  const [isEditing, setEditing] = React.useState(false);
@@ -55,7 +53,7 @@ function CollectionDescription({ collection }: Props) {
      });
      setDirty(false);
    } catch (err) {
-      showToast(
+      ui.showToast(
        t("Sorry, an error occurred saving the collection", {
          type: "error",
        })
@@ -15,7 +15,6 @@ type Props = {|
  target?: "_blank",
  as?: string | React.ComponentType<*>,
  hide?: () => void,
-  level?: number,
 |};

 const MenuItem = ({
@@ -30,26 +29,15 @@ const MenuItem = ({
  const handleClick = React.useCallback(
    (ev) => {
      if (onClick) {
-        ev.preventDefault();
-        ev.stopPropagation();
        onClick(ev);
      }
-
      if (hide) {
        hide();
      }
    },
-    [onClick, hide]
+    [hide, onClick]
  );

-  // Preventing default mousedown otherwise menu items do not work in Firefox,
-  // which triggers the hideOnClickOutside handler first via mousedown – hiding
-  // and un-rendering the menu contents.
-  const handleMouseDown = React.useCallback((ev) => {
-    ev.preventDefault();
-    ev.stopPropagation();
-  }, []);
-
  return (
    <BaseMenuItem
      onClick={disabled ? undefined : onClick}
@@ -63,7 +51,6 @@ const MenuItem = ({
          $toggleable={selected !== undefined}
          as={onClick ? "button" : as}
          onClick={handleClick}
-          onMouseDown={handleMouseDown}
        >
          {selected !== undefined && (
            <>
@@ -89,7 +76,6 @@ export const MenuAnchor = styled.a`
  margin: 0;
  border: 0;
  padding: 12px;
-  padding-left: ${(props) => 12 + props.level * 10}px;
  width: 100%;
  min-height: 32px;
  background: none;
@@ -115,8 +101,7 @@ export const MenuAnchor = styled.a`
      ? "pointer-events: none;"
      : `

-  &:hover,  
-  &:focus,
+  &:hover,
  &.focus-visible {
    color: ${props.theme.white};
    background: ${props.theme.primary};
@@ -127,6 +112,11 @@ export const MenuAnchor = styled.a`
      fill: ${props.theme.white};
    }
  }
+
+  &:focus {
+    color: ${props.theme.white};
+    background: ${props.theme.primary};
+  }
  `};

  ${breakpoint("tablet")`
@@ -9,11 +9,49 @@ import {
  MenuItem as BaseMenuItem,
 } from "reakit/Menu";
 import styled from "styled-components";
-import Header from "./Header";
 import MenuItem, { MenuAnchor } from "./MenuItem";
 import Separator from "./Separator";
 import ContextMenu from ".";
-import { type MenuItem as TMenuItem } from "types";
+
+type TMenuItem =
+  | {|
+      title: React.Node,
+      to: string,
+      visible?: boolean,
+      selected?: boolean,
+      disabled?: boolean,
+    |}
+  | {|
+      title: React.Node,
+      onClick: (event: SyntheticEvent<>) => void | Promise<void>,
+      visible?: boolean,
+      selected?: boolean,
+      disabled?: boolean,
+    |}
+  | {|
+      title: React.Node,
+      href: string,
+      visible?: boolean,
+      selected?: boolean,
+      disabled?: boolean,
+    |}
+  | {|
+      title: React.Node,
+      visible?: boolean,
+      disabled?: boolean,
+      style?: Object,
+      hover?: boolean,
+      items: TMenuItem[],
+    |}
+  | {|
+      type: "separator",
+      visible?: boolean,
+    |}
+  | {|
+      type: "heading",
+      visible?: boolean,
+      title: React.Node,
+    |};

 type Props = {|
  items: TMenuItem[],
@@ -45,7 +83,7 @@ const Submenu = React.forwardRef(({ templateItems, title, ...rest }, ref) => {
  );
 });

-export function filterTemplateItems(items: TMenuItem[]): TMenuItem[] {
+function Template({ items, ...menu }: Props): React.Node {
  let filtered = items.filter((item) => item.visible !== false);

  // this block literally just trims unneccessary separators
@@ -63,11 +101,7 @@ export function filterTemplateItems(items: TMenuItem[]): TMenuItem[] {
    return [...acc, item];
  }, []);

-  return filtered;
-}
-
-function Template({ items, ...menu }: Props): React.Node {
-  return filterTemplateItems(items).map((item, index) => {
+  return filtered.map((item, index) => {
    if (item.to) {
      return (
        <MenuItem
@@ -90,8 +124,7 @@ function Template({ items, ...menu }: Props): React.Node {
          key={index}
          disabled={item.disabled}
          selected={item.selected}
-          level={item.level}
-          target={item.href.startsWith("#") ? undefined : "_blank"}
+          target="_blank"
          {...menu}
        >
          {item.title}
@@ -130,11 +163,6 @@ function Template({ items, ...menu }: Props): React.Node {
      return <Separator key={index} />;
    }

-    if (item.type === "heading") {
-      return <Header>{item.title}</Header>;
-    }
-
-    console.warn("Unrecognized menu item", item);
    return null;
  });
 }
@@ -4,18 +4,16 @@ import { Portal } from "react-portal";
 import { Menu } from "reakit/Menu";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import usePrevious from "hooks/usePrevious";
 import {
  fadeIn,
-  fadeAndSlideUp,
-  fadeAndSlideDown,
-  mobileContextMenu,
-} from "styles/animations";
+  fadeAndScaleIn,
+  fadeAndSlideIn,
+} from "shared/styles/animations";
+import usePrevious from "hooks/usePrevious";

 type Props = {|
  "aria-label": string,
  visible?: boolean,
-  placement?: string,
  animating?: boolean,
  children: React.Node,
  onOpen?: () => void,
@@ -46,25 +44,13 @@ export default function ContextMenu({
  return (
    <>
      <Menu hideOnClickOutside preventBodyScroll {...rest}>
-        {(props) => {
-          // kind of hacky, but this is an effective way of telling which way
-          // the menu will _actually_ be placed when taking into account screen
-          // positioning.
-          const topAnchor = props.style.top === "0";
-          const rightAnchor = props.placement === "bottom-end";
-
-          return (
-            <Position {...props}>
-              <Background
-                dir="auto"
-                topAnchor={topAnchor}
-                rightAnchor={rightAnchor}
-              >
-                {rest.visible || rest.animating ? children : null}
-              </Background>
-            </Position>
-          );
-        }}
+        {(props) => (
+          <Position {...props}>
+            <Background>
+              {rest.visible || rest.animating ? children : null}
+            </Background>
+          </Position>
+        )}
      </Menu>
      {(rest.visible || rest.animating) && (
        <Portal>
@@ -105,7 +91,7 @@ const Position = styled.div`
 `;

 const Background = styled.div`
-  animation: ${mobileContextMenu} 200ms ease;
+  animation: ${fadeAndSlideIn} 200ms ease;
  transform-origin: 50% 100%;
  max-width: 100%;
  background: ${(props) => props.theme.menuBackground};
@@ -123,10 +109,9 @@ const Background = styled.div`
  }

  ${breakpoint("tablet")`
-    animation: ${(props) =>
-      props.topAnchor ? fadeAndSlideDown : fadeAndSlideUp} 200ms ease;
+    animation: ${fadeAndScaleIn} 200ms ease;
    transform-origin: ${(props) =>
-      props.rightAnchor === "bottom-end" ? "75%" : "25%"} 0;
+      props.left !== undefined ? "25%" : "75%"} 0;
    max-width: 276px;
    background: ${(props) => props.theme.menuBackground};
    box-shadow: ${(props) => props.theme.menuShadow};
@@ -15,7 +15,6 @@ class CopyToClipboard extends React.PureComponent<Props> {
    const elem = React.Children.only(children);
    copy(text, {
      debug: process.env.NODE_ENV !== "production",
-      format: "text/plain",
    });

    if (onCopy) onCopy();
@@ -67,7 +67,6 @@ const DocumentBreadcrumb = ({ document, children, onlyText }: Props) => {
      id: document.collectionId,
      name: t("Deleted Collection"),
      color: "currentColor",
-      url: "deleted-collection",
    };
  }

@@ -90,7 +89,7 @@ const DocumentBreadcrumb = ({ document, children, onlyText }: Props) => {
      output.push({
        icon: <CollectionIcon collection={collection} expanded />,
        title: collection.name,
-        to: collectionUrl(collection.url),
+        to: collectionUrl(collection.id),
      });
    }

@@ -105,7 +104,7 @@ const DocumentBreadcrumb = ({ document, children, onlyText }: Props) => {
  }, [path, category, collection]);

  if (!collections.isLoaded) {
-    return null;
+    return;
  }

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

-function DocumentListItem(props: Props, ref) {
+function DocumentListItem(props: Props) {
  const { t } = useTranslation();
  const { policies } = useStores();
  const currentUser = useCurrentUser();
  const currentTeam = useCurrentTeam();
-  const [menuOpen, handleMenuOpen, handleMenuClose] = useBoolean();
+  const [menuOpen, setMenuOpen] = React.useState(false);
  const {
    document,
    showNestedDocuments,
@@ -66,12 +65,9 @@ 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
-      ref={ref}
-      dir={document.dir}
      $isStarred={document.isStarred}
      $menuOpen={menuOpen}
      to={{
@@ -80,12 +76,8 @@ function DocumentListItem(props: Props, ref) {
      }}
    >
      <Content>
-        <Heading dir={document.dir}>
-          <Title
-            text={document.titleWithDefault}
-            highlight={highlight}
-            dir={document.dir}
-          />
+        <Heading>
+          <Title text={document.titleWithDefault} highlight={highlight} />
          {document.isNew && document.createdBy.id !== currentUser.id && (
            <Badge yellow>{t("New")}</Badge>
          )}
@@ -127,8 +119,7 @@ function DocumentListItem(props: Props, ref) {
        {document.isTemplate &&
          !document.isArchived &&
          !document.isDeleted &&
-          can.createDocument &&
-          canCollection.update && (
+          can.createDocument && (
            <>
              <Button
                as={Link}
@@ -146,8 +137,8 @@ function DocumentListItem(props: Props, ref) {
        <DocumentMenu
          document={document}
          showPin={showPin}
-          onOpen={handleMenuOpen}
-          onClose={handleMenuClose}
+          onOpen={() => setMenuOpen(true)}
+          onClose={() => setMenuOpen(false)}
          modal={false}
        />
      </Actions>
@@ -230,7 +221,6 @@ const DocumentLink = styled(Link)`

 const Heading = styled.h3`
  display: flex;
-  justify-content: ${(props) => (props.rtl ? "flex-end" : "flex-start")};
  align-items: center;
  height: 24px;
  margin-top: 0;
@@ -261,4 +251,4 @@ const ResultContext = styled(Highlight)`
  margin-bottom: 0.25em;
 `;

-export default observer(React.forwardRef(DocumentListItem));
+export default observer(DocumentListItem);
@@ -6,14 +6,11 @@ import { Link } from "react-router-dom";
 import styled from "styled-components";
 import Document from "models/Document";
 import DocumentBreadcrumb from "components/DocumentBreadcrumb";
-import DocumentTasks from "components/DocumentTasks";
 import Flex from "components/Flex";
 import Time from "components/Time";
-import useCurrentUser from "hooks/useCurrentUser";
 import useStores from "hooks/useStores";

 const Container = styled(Flex)`
-  justify-content: ${(props) => (props.rtl ? "flex-end" : "flex-start")};
  color: ${(props) => props.theme.textTertiary};
  font-size: 13px;
  white-space: nowrap;
@@ -52,9 +49,7 @@ function DocumentMeta({
  ...rest
 }: Props) {
  const { t } = useTranslation();
-  const { collections } = useStores();
-  const user = useCurrentUser();
-
+  const { collections, auth } = useStores();
  const {
    modifiedSinceViewed,
    updatedAt,
@@ -65,8 +60,6 @@ function DocumentMeta({
    deletedAt,
    isDraft,
    lastViewedAt,
-    isTasks,
-    isTemplate,
  } = document;

  // Prevent meta information from displaying if updatedBy is not available.
@@ -75,8 +68,6 @@ function DocumentMeta({
    return null;
  }

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

  if (deletedAt) {
@@ -111,16 +102,14 @@ function DocumentMeta({
    );
  } else {
    content = (
-      <Modified highlight={modifiedSinceViewed && !lastUpdatedByCurrentUser}>
+      <Modified highlight={modifiedSinceViewed}>
        {t("updated")} <Time dateTime={updatedAt} addSuffix />
      </Modified>
    );
  }

-  const nestedDocumentsCount = collection
-    ? collection.getDocumentChildren(document.id).length
-    : 0;
-  const canShowProgressBar = isTasks && !isTemplate;
+  const collection = collections.get(document.collectionId);
+  const updatedByMe = auth.user && auth.user.id === updatedBy.id;

  const timeSinceNow = () => {
    if (isDraft || !showLastViewed) {
@@ -141,9 +130,13 @@ 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;
+    <Container align="center" {...rest}>
+      {updatedByMe ? t("You") : updatedBy.name}&nbsp;
      {to ? <Link to={to}>{content}</Link> : content}
      {showCollection && collection && (
        <span>
@@ -155,17 +148,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>
  );
@@ -14,7 +14,6 @@ type Props = {|
  document: Document,
  isDraft: boolean,
  to?: string,
-  rtl?: boolean,
 |};

 function DocumentMetaWithViews({ to, isDraft, document, ...rest }: Props) {
@@ -24,12 +23,6 @@ function DocumentMetaWithViews({ to, isDraft, document, ...rest }: Props) {
  const totalViewers = documentViews.length;
  const onlyYou = totalViewers === 1 && documentViews[0].user.id;

-  React.useEffect(() => {
-    if (!document.isDeleted) {
-      views.fetchPage({ documentId: document.id });
-    }
-  }, [views, document.id, document.isDeleted]);
-
  const popover = usePopoverState({
    gutter: 8,
    placement: "bottom",
@@ -42,7 +35,7 @@ function DocumentMetaWithViews({ to, isDraft, document, ...rest }: Props) {
        <PopoverDisclosure {...popover}>
          {(props) => (
            <>
-              &nbsp;•&nbsp;
+              &nbsp;&middot;&nbsp;
              <a {...props}>
                {t("Viewed by")}{" "}
                {onlyYou
@@ -63,7 +56,6 @@ function DocumentMetaWithViews({ to, isDraft, document, ...rest }: Props) {
 }

 const Meta = styled(DocumentMeta)`
-  justify-content: ${(props) => (props.rtl ? "flex-end" : "flex-start")};
  margin: -12px 0 2em 0;
  font-size: 14px;
  position: relative;
@@ -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;
@@ -1,5 +1,5 @@
 // @flow
-import { formatDistanceToNow } from "date-fns";
+import distanceInWordsToNow from "date-fns/distance_in_words_to_now";
 import { sortBy } from "lodash";
 import { observer } from "mobx-react";
 import * as React from "react";
@@ -19,6 +19,10 @@ function DocumentViews({ document, isOpen }: Props) {
  const { t } = useTranslation();
  const { views, presence } = useStores();

+  React.useEffect(() => {
+    views.fetchPage({ documentId: document.id });
+  }, [views, document.id]);
+
  let documentPresence = presence.get(document.id);
  documentPresence = documentPresence
    ? Array.from(documentPresence.values())
@@ -55,8 +59,8 @@ function DocumentViews({ document, isOpen }: Props) {
                ? t("Currently editing")
                : t("Currently viewing")
              : t("Viewed {{ timeAgo }} ago", {
-                  timeAgo: formatDistanceToNow(
-                    view ? Date.parse(view.lastViewedAt) : new Date()
+                  timeAgo: distanceInWordsToNow(
+                    view ? new Date(view.lastViewedAt) : new Date()
                  ),
                });

@@ -4,13 +4,12 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { withRouter, type RouterHistory } from "react-router-dom";
 import styled, { withTheme } from "styled-components";
-import { light } from "shared/theme";
+import { light } from "shared/styles/theme";
 import UiStore from "stores/UiStore";
 import ErrorBoundary from "components/ErrorBoundary";
 import Tooltip from "components/Tooltip";
 import embeds from "../embeds";
 import useMediaQuery from "hooks/useMediaQuery";
-import useToasts from "hooks/useToasts";
 import { type Theme } from "types";
 import { isModKey } from "utils/keyboard";
 import { uploadFile } from "utils/uploadFile";
@@ -59,9 +58,8 @@ type PropsWithRef = Props & {
 };

 function Editor(props: PropsWithRef) {
-  const { id, shareId, history } = props;
+  const { id, ui, shareId, history } = props;
  const { t } = useTranslation();
-  const { showToast } = useToasts();
  const isPrinting = useMediaQuery("print");

  const onUploadImage = React.useCallback(
@@ -108,9 +106,11 @@ function Editor(props: PropsWithRef) {

  const onShowToast = React.useCallback(
    (message: string) => {
-      showToast(message);
+      if (ui) {
+        ui.showToast(message);
+      }
    },
-    [showToast]
+    [ui]
  );

  const dictionary = React.useMemo(() => {
@@ -148,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"),
@@ -246,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 }) => (
@@ -3,7 +3,6 @@ import * as Sentry from "@sentry/react";
 import { observable } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
-import { withTranslation, type TFunction, Trans } from "react-i18next";
 import styled from "styled-components";
 import Button from "components/Button";
 import CenteredContent from "components/CenteredContent";
@@ -12,11 +11,10 @@ import PageTitle from "components/PageTitle";
 import { githubIssuesUrl } from "../../shared/utils/routeHelpers";
 import env from "env";

-type Props = {|
+type Props = {
  children: React.Node,
  reloadOnChunkMissing?: boolean,
-  t: TFunction,
-|};
+};

@observer
 class ErrorBoundary extends React.Component<Props> {
@@ -57,8 +55,6 @@ class ErrorBoundary extends React.Component<Props> {
  };

  render() {
-    const { t } = this.props;
-
    if (this.error) {
      const error = this.error;
      const isReported = !!env.SENTRY_DSN && env.DEPLOYMENT === "hosted";
@@ -67,21 +63,15 @@ class ErrorBoundary extends React.Component<Props> {
      if (isChunkError) {
        return (
          <CenteredContent>
-            <PageTitle title={t("Module failed to load")} />
-            <h1>
-              <Trans>Loading Failed</Trans>
-            </h1>
+            <PageTitle title="Module failed to load" />
+            <h1>Loading Failed</h1>
            <HelpText>
-              <Trans>
-                Sorry, part of the application failed to load. This may be
-                because it was updated since you opened the tab or because of a
-                failed network request. Please try reloading.
-              </Trans>
+              Sorry, part of the application failed to load. This may be because
+              it was updated since you opened the tab or because of a failed
+              network request. Please try reloading.
            </HelpText>
            <p>
-              <Button onClick={this.handleReload}>
-                <Trans>Reload</Trans>
-              </Button>
+              <Button onClick={this.handleReload}>Reload</Button>
            </p>
          </CenteredContent>
        );
@@ -89,32 +79,23 @@ class ErrorBoundary extends React.Component<Props> {

      return (
        <CenteredContent>
-          <PageTitle title={t("Something Unexpected Happened")} />
-          <h1>
-            <Trans>Something Unexpected Happened</Trans>
-          </h1>
+          <PageTitle title="Something Unexpected Happened" />
+          <h1>Something Unexpected Happened</h1>
          <HelpText>
-            <Trans
-              defaults="Sorry, an unrecoverable error occurred{{notified}}. Please try reloading the page, it may have been a temporary glitch."
-              values={{
-                notified: isReported
-                  ? ` – ${t("our engineers have been notified")}`
-                  : undefined,
-              }}
-            />
+            Sorry, an unrecoverable error occurred
+            {isReported && " – our engineers have been notified"}. Please try
+            reloading the page, it may have been a temporary glitch.
          </HelpText>
          {this.showDetails && <Pre>{error.toString()}</Pre>}
          <p>
-            <Button onClick={this.handleReload}>
-              <Trans>Reload</Trans>
-            </Button>{" "}
+            <Button onClick={this.handleReload}>Reload</Button>{" "}
            {this.showDetails ? (
              <Button onClick={this.handleReportBug} neutral>
-                <Trans>Report a Bug</Trans>…
+                Report a Bug…
              </Button>
            ) : (
              <Button onClick={this.handleShowDetails} neutral>
-                <Trans>Show Detail</Trans>…
+                Show Details…
              </Button>
            )}
          </p>
@@ -133,4 +114,4 @@ const Pre = styled.pre`
  white-space: pre-wrap;
 `;

-export default withTranslation()<ErrorBoundary>(ErrorBoundary);
+export default ErrorBoundary;
@@ -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;
@@ -1,6 +1,6 @@
 // @flow
 import styled from "styled-components";
-import { fadeIn } from "styles/animations";
+import { fadeIn } from "shared/styles/animations";

 const Fade = styled.span`
  animation: ${fadeIn} ${(props) => props.timing || "250ms"} ease-in-out;
@@ -45,7 +45,7 @@ const Container = styled.div`
  align-items: ${({ align }) => align};
  justify-content: ${({ justify }) => justify};
  flex-shrink: ${({ shrink }) => (shrink ? 1 : "initial")};
-  gap: ${({ gap }) => (gap ? `${gap}px` : "initial")};
+  gap: ${({ gap }) => `${gap}px` || "initial"};
  min-height: 0;
  min-width: 0;
 `;
@@ -72,10 +72,6 @@ const Actions = styled(Flex)`
  flex-basis: 0;
  min-width: auto;
  padding-left: 8px;
-
-  ${breakpoint("tablet")`
-    position: unset;
-  `};
 `;

 const Wrapper = styled(Flex)`
@@ -88,12 +84,12 @@ const Wrapper = styled(Flex)`
  transform: translate3d(0, 0, 0);
  backdrop-filter: blur(20px);
  min-height: 56px;
-  justify-content: flex-start;

  @media print {
    display: none;
  }

+  justify-content: flex-start;
  ${breakpoint("tablet")`
    padding: ${(props) => (props.isCompact ? "12px" : `24px 24px 0`)};
    justify-content: "center";
@@ -4,10 +4,10 @@ import { transparentize } from "polished";
 import * as React from "react";
 import { Portal } from "react-portal";
 import styled from "styled-components";
+import { fadeAndSlideIn } from "shared/styles/animations";
 import parseDocumentSlug from "shared/utils/parseDocumentSlug";
 import DocumentsStore from "stores/DocumentsStore";
 import HoverPreviewDocument from "components/HoverPreviewDocument";
-import { fadeAndSlideDown } from "styles/animations";
 import { isInternalUrl } from "utils/urls";

 const DELAY_OPEN = 300;
@@ -136,7 +136,7 @@ function HoverPreview({ node, ...rest }: Props) {
 }

 const Animate = styled.div`
-  animation: ${fadeAndSlideDown} 150ms ease;
+  animation: ${fadeAndSlideIn} 150ms ease;

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

  &:disabled,
  &::placeholder {
@@ -1,58 +1,58 @@
 // @flow
-import { observer } from "mobx-react";
+import { observable } from "mobx";
+import { observer, inject } from "mobx-react";
 import * as React from "react";
-import { Trans } from "react-i18next";
 import styled, { withTheme } from "styled-components";
+import UiStore from "stores/UiStore";
 import Editor from "components/Editor";
 import HelpText from "components/HelpText";
 import { LabelText, Outline } from "components/Input";
-import useStores from "hooks/useStores";

 type Props = {|
  label: string,
  minHeight?: number,
  maxHeight?: number,
  readOnly?: boolean,
+  ui: UiStore,
 |};

-function InputRich({ label, minHeight, maxHeight, ...rest }: Props) {
-  const [focused, setFocused] = React.useState<boolean>(false);
-  const { ui } = useStores();
+@observer
+class InputRich extends React.Component<Props> {
+  @observable editorComponent: React.ComponentType<any>;
+  @observable focused: boolean = false;

-  const handleBlur = React.useCallback(() => {
-    setFocused(false);
-  }, []);
+  handleBlur = () => {
+    this.focused = false;
+  };

-  const handleFocus = React.useCallback(() => {
-    setFocused(true);
-  }, []);
+  handleFocus = () => {
+    this.focused = true;
+  };

-  return (
-    <>
-      <LabelText>{label}</LabelText>
-      <StyledOutline
-        maxHeight={maxHeight}
-        minHeight={minHeight}
-        focused={focused}
-      >
-        <React.Suspense
-          fallback={
-            <HelpText>
-              <Trans>Loading editor</Trans>…
-            </HelpText>
-          }
+  render() {
+    const { label, minHeight, maxHeight, ui, ...rest } = this.props;
+
+    return (
+      <>
+        <LabelText>{label}</LabelText>
+        <StyledOutline
+          maxHeight={maxHeight}
+          minHeight={minHeight}
+          focused={this.focused}
        >
-          <Editor
-            onBlur={handleBlur}
-            onFocus={handleFocus}
-            ui={ui}
-            grow
-            {...rest}
-          />
-        </React.Suspense>
-      </StyledOutline>
-    </>
-  );
+          <React.Suspense fallback={<HelpText>Loading editor…</HelpText>}>
+            <Editor
+              onBlur={this.handleBlur}
+              onFocus={this.handleFocus}
+              ui={ui}
+              grow
+              {...rest}
+            />
+          </React.Suspense>
+        </StyledOutline>
+      </>
+    );
+  }
 }

 const StyledOutline = styled(Outline)`
@@ -67,4 +67,4 @@ const StyledOutline = styled(Outline)`
  }
 `;

-export default observer(withTheme(InputRich));
+export default inject("ui")(withTheme(InputRich));
@@ -16,10 +16,6 @@ const Select = styled.select`
  color: ${(props) => props.theme.text};
  height: 30px;

-  option {
-    background: ${(props) => props.theme.buttonNeutralBackground};
-  }
-
  &:disabled,
  &::placeholder {
    color: ${(props) => props.theme.placeholder};
@@ -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;
@@ -4,19 +4,18 @@ import * as React from "react";
 import styled from "styled-components";
 import Fade from "components/Fade";
 import Flex from "components/Flex";
-import PlaceholderText from "components/PlaceholderText";
+import Mask from "components/Mask";

 type Props = {
  count?: number,
 };

-const ListPlaceHolder = ({ count }: Props) => {
+const Placeholder = ({ count }: Props) => {
  return (
    <Fade>
      {times(count || 2, (index) => (
        <Item key={index} column auto>
-          <PlaceholderText header delay={0.2 * index} />
-          <PlaceholderText delay={0.2 * index} />
+          <Mask />
        </Item>
      ))}
    </Fade>
@@ -24,7 +23,7 @@ const ListPlaceHolder = ({ count }: Props) => {
 };

 const Item = styled(Flex)`
-  padding: 10px 0;
+  padding: 15px 0 16px;
 `;

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

-export default function PlaceholderDocument(props: Object) {
+export default function LoadingPlaceholder(props: Object) {
  return (
    <DelayedMount>
      <Wrapper>
        <Flex column auto {...props}>
-          <PlaceholderText height={34} maxWidth={70} />
-          <PlaceholderText delay={0.2} maxWidth={40} />
+          <Mask height={34} />
          <br />
-          <PlaceholderText delay={0.2} />
-          <PlaceholderText delay={0.4} />
-          <PlaceholderText delay={0.6} />
+          <Mask />
+          <Mask />
+          <Mask />
        </Flex>
      </Wrapper>
    </DelayedMount>
@@ -0,0 +1,6 @@
+// @flow
+import ListPlaceholder from "./ListPlaceholder";
+import LoadingPlaceholder from "./LoadingPlaceholder";
+
+export default LoadingPlaceholder;
+export { ListPlaceholder };
@@ -1,38 +1,20 @@
 // @flow
-import { format as formatDate, formatDistanceToNow } from "date-fns";
-import {
-  enUS,
-  de,
-  faIR,
-  fr,
-  es,
-  it,
-  ja,
-  ko,
-  ptBR,
-  pt,
-  zhCN,
-  zhTW,
-  ru,
-} from "date-fns/locale";
+import distanceInWordsToNow from "date-fns/distance_in_words_to_now";
+import format from "date-fns/format";
 import * as React from "react";
 import Tooltip from "components/Tooltip";
 import useUserLocale from "hooks/useUserLocale";

 const locales = {
-  en_US: enUS,
-  de_DE: de,
-  es_ES: es,
-  fa_IR: faIR,
-  fr_FR: fr,
-  it_IT: it,
-  ja_JP: ja,
-  ko_KR: ko,
-  pt_BR: ptBR,
-  pt_PT: pt,
-  zh_CN: zhCN,
-  zh_TW: zhTW,
-  ru_RU: ru,
+  en: require(`date-fns/locale/en`),
+  de: require(`date-fns/locale/de`),
+  es: require(`date-fns/locale/es`),
+  fr: require(`date-fns/locale/fr`),
+  it: require(`date-fns/locale/it`),
+  ko: require(`date-fns/locale/ko`),
+  pt: require(`date-fns/locale/pt`),
+  zh: require(`date-fns/locale/zh_cn`),
+  ru: require(`date-fns/locale/ru`),
 };

 let callbacks = [];
@@ -57,9 +39,6 @@ type Props = {
  tooltipDelay?: number,
  addSuffix?: boolean,
  shorten?: boolean,
-  relative?: boolean,
-  format?: string,
-  tooltip?: boolean,
 };

 function LocaleTime({
@@ -67,10 +46,7 @@ function LocaleTime({
  children,
  dateTime,
  shorten,
-  format,
-  relative,
  tooltipDelay,
-  tooltip,
 }: Props) {
  const userLocale = useUserLocale();
  const [_, setMinutesMounted] = React.useState(0); // eslint-disable-line no-unused-vars
@@ -88,34 +64,25 @@ function LocaleTime({
    };
  }, []);

-  const locale = userLocale ? locales[userLocale] : undefined;
-  let relativeContent = formatDistanceToNow(Date.parse(dateTime), {
+  let content = distanceInWordsToNow(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 ? relativeContent : tooltipContent;
-
-  if (!tooltip) {
-    return content;
-  }
-
  return (
-    <Tooltip tooltip={tooltipContent} delay={tooltipDelay} placement="bottom">
-      <time dateTime={dateTime}>{content}</time>
+    <Tooltip
+      tooltip={format(dateTime, "MMMM Do, YYYY h:mm a")}
+      delay={tooltipDelay}
+      placement="bottom"
+    >
+      <time dateTime={dateTime}>{children || content}</time>
    </Tooltip>
  );
 }
@@ -2,48 +2,44 @@
 import * as React from "react";
 import styled from "styled-components";
 import { randomInteger } from "shared/random";
+import { pulsate } from "shared/styles/animations";
 import Flex from "components/Flex";
-import { pulsate } from "styles/animations";

 type Props = {|
  header?: boolean,
  height?: number,
  minWidth?: number,
  maxWidth?: number,
-  delay?: number,
 |};

-class PlaceholderText extends React.Component<Props> {
-  width = randomInteger(this.props.minWidth || 75, this.props.maxWidth || 100);
+class Mask extends React.Component<Props> {
+  width: number;

  shouldComponentUpdate() {
    return false;
  }

+  constructor(props: Props) {
+    super();
+    this.width = randomInteger(props.minWidth || 75, props.maxWidth || 100);
+  }
+
  render() {
-    return (
-      <Mask
-        width={this.width}
-        height={this.props.height}
-        delay={this.props.delay}
-      />
-    );
+    return <Redacted width={this.width} height={this.props.height} />;
  }
 }

-const Mask = styled(Flex)`
+const Redacted = styled(Flex)`
  width: ${(props) => (props.header ? props.width / 2 : props.width)}%;
  height: ${(props) =>
    props.height ? props.height : props.header ? 24 : 18}px;
  margin-bottom: 6px;
-  border-radius: 6px;
  background-color: ${(props) => props.theme.divider};
-  animation: ${pulsate} 2s infinite;
-  animation-delay: ${(props) => props.delay || 0}s;
+  animation: ${pulsate} 1.3s infinite;

  &:last-child {
    margin-bottom: 0;
  }
 `;

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

 let openModals = 0;

@@ -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>(
@@ -1,4 +1,5 @@
 // @flow
+import { observer } from "mobx-react";
 import * as React from "react";
 import Document from "models/Document";
 import DocumentListItem from "components/DocumentListItem";
@@ -18,26 +19,24 @@ type Props = {|
  showTemplate?: boolean,
 |};

-const PaginatedDocumentList = React.memo<Props>(function PaginatedDocumentList({
-  empty,
-  heading,
-  documents,
-  fetch,
-  options,
-  ...rest
-}: Props) {
-  return (
-    <PaginatedList
-      items={documents}
-      empty={empty}
-      heading={heading}
-      fetch={fetch}
-      options={options}
-      renderItem={(item) => (
-        <DocumentListItem key={item.id} document={item} {...rest} />
-      )}
-    />
-  );
-});
+@observer
+class PaginatedDocumentList extends React.Component<Props> {
+  render() {
+    const { empty, heading, documents, fetch, options, ...rest } = this.props;
+
+    return (
+      <PaginatedList
+        items={documents}
+        empty={empty}
+        heading={heading}
+        fetch={fetch}
+        options={options}
+        renderItem={(item) => (
+          <DocumentListItem key={item.id} document={item} {...rest} />
+        )}
+      />
+    );
+  }
+}

 export default PaginatedDocumentList;
@@ -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;
@@ -4,12 +4,10 @@ import { isEqual } from "lodash";
 import { observable, action } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
-import { withTranslation, type TFunction } from "react-i18next";
 import { Waypoint } from "react-waypoint";
 import { DEFAULT_PAGINATION_LIMIT } from "stores/BaseStore";
 import DelayedMount from "components/DelayedMount";
-import PlaceholderList from "components/List/Placeholder";
-import { dateToHeading } from "utils/dates";
+import { ListPlaceholder } from "components/LoadingPlaceholder";

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

@observer
@@ -42,24 +38,14 @@ class PaginatedList extends React.Component<Props> {
  }

  componentDidUpdate(prevProps: Props) {
-    if (
-      prevProps.fetch !== this.props.fetch ||
-      !isEqual(prevProps.options, this.props.options)
-    ) {
-      this.reset();
+    if (prevProps.fetch !== this.props.fetch) {
+      this.fetchResults();
+    }
+    if (!isEqual(prevProps.options, this.props.options)) {
      this.fetchResults();
    }
  }

-  reset = () => {
-    this.offset = 0;
-    this.allowLoadMore = true;
-    this.renderCount = DEFAULT_PAGINATION_LIMIT;
-    this.isFetching = false;
-    this.isFetchingMore = false;
-    this.isLoaded = false;
-  };
-
  fetchResults = async () => {
    if (!this.props.fetch) return;

@@ -105,9 +91,8 @@ class PaginatedList extends React.Component<Props> {
  };

  render() {
-    const { items, heading, 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;
@@ -124,37 +109,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);
-
-                // 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} />
@@ -163,7 +118,7 @@ class PaginatedList extends React.Component<Props> {
        )}
        {showLoading && (
          <DelayedMount>
-            <PlaceholderList count={5} />
+            <ListPlaceholder count={5} />
          </DelayedMount>
        )}
      </>
@@ -171,6 +126,4 @@ class PaginatedList extends React.Component<Props> {
  }
 }

-export const Component = PaginatedList;
-
-export default withTranslation()<PaginatedList>(PaginatedList);
+export default PaginatedList;
@@ -1,84 +0,0 @@
-// @flow
-import "../stores";
-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";
-
-describe("PaginatedList", () => {
-  const render = () => null;
-
-  it("with no items renders nothing", () => {
-    const list = shallow(<PaginatedList items={[]} renderItem={render} />);
-    expect(list).toEqual({});
-  });
-
-  it("with no items renders empty prop", () => {
-    const list = shallow(
-      <PaginatedList
-        items={[]}
-        empty={<p>Sorry, no results</p>}
-        renderItem={render}
-      />
-    );
-    expect(list.text()).toEqual("Sorry, no results");
-  });
-
-  it("calls fetch with options + pagination on mount", () => {
-    const fetch = jest.fn();
-    const options = { id: "one" };
-
-    shallow(
-      <PaginatedList
-        items={[]}
-        fetch={fetch}
-        options={options}
-        renderItem={render}
-      />
-    );
-    expect(fetch).toHaveBeenCalledWith({
-      ...options,
-      limit: DEFAULT_PAGINATION_LIMIT,
-      offset: 0,
-    });
-  });
-
-  it("calls fetch when options prop changes", async () => {
-    const fetchedItems = Array(DEFAULT_PAGINATION_LIMIT).fill();
-    const fetch = jest.fn().mockReturnValue(fetchedItems);
-
-    const list = shallow(
-      <PaginatedList
-        items={[]}
-        fetch={fetch}
-        options={{ id: "one" }}
-        renderItem={render}
-      />
-    );
-
-    await runAllPromises();
-
-    expect(fetch).toHaveBeenCalledWith({
-      id: "one",
-      limit: DEFAULT_PAGINATION_LIMIT,
-      offset: 0,
-    });
-
-    fetch.mockReset();
-
-    list.setProps({
-      fetch,
-      items: [],
-      options: { id: "two" },
-    });
-
-    await runAllPromises();
-
-    expect(fetch).toHaveBeenCalledWith({
-      id: "two",
-      limit: DEFAULT_PAGINATION_LIMIT,
-      offset: 0,
-    });
-  });
-});
@@ -2,7 +2,7 @@
 import * as React from "react";
 import { Popover as ReakitPopover } from "reakit/Popover";
 import styled from "styled-components";
-import { fadeAndScaleIn } from "styles/animations";
+import { fadeAndScaleIn } from "shared/styles/animations";

 type Props = {
  children: React.Node,
@@ -1,13 +1,15 @@
 // @flow
 import { observer } from "mobx-react";
 import {
-  EditIcon,
+  ArchiveIcon,
  HomeIcon,
-  PlusIcon,
+  EditIcon,
  SearchIcon,
-  SettingsIcon,
-  ShapesIcon,
  StarredIcon,
+  ShapesIcon,
+  TrashIcon,
+  PlusIcon,
+  SettingsIcon,
 } from "outline-icons";
 import * as React from "react";
 import { DndProvider } from "react-dnd";
@@ -21,22 +23,16 @@ import Flex from "components/Flex";
 import Modal from "components/Modal";
 import Scrollable from "components/Scrollable";
 import Sidebar from "./Sidebar";
-import ArchiveLink from "./components/ArchiveLink";
 import Collections from "./components/Collections";
 import Section from "./components/Section";
 import SidebarLink from "./components/SidebarLink";
 import TeamButton from "./components/TeamButton";
-import TrashLink from "./components/TrashLink";
-import useCurrentTeam from "hooks/useCurrentTeam";
-import useCurrentUser from "hooks/useCurrentUser";
 import useStores from "hooks/useStores";
 import AccountMenu from "menus/AccountMenu";

 function MainSidebar() {
  const { t } = useTranslation();
-  const { policies, documents } = useStores();
-  const team = useCurrentTeam();
-  const user = useCurrentUser();
+  const { policies, auth, documents } = useStores();
  const [inviteModalOpen, setInviteModalOpen] = React.useState(false);
  const [
    createCollectionModalOpen,
@@ -75,6 +71,9 @@ function MainSidebar() {
    dndArea,
  ]);

+  const { user, team } = auth;
+  if (!user || !team) return null;
+
  const can = policies.abilities(team.id);

  return (
@@ -115,6 +114,17 @@ function MainSidebar() {
                exact={false}
                label={t("Starred")}
              />
+              {can.createDocument && (
+                <SidebarLink
+                  to="/templates"
+                  icon={<ShapesIcon color="currentColor" />}
+                  exact={false}
+                  label={t("Templates")}
+                  active={
+                    documents.active ? documents.active.template : undefined
+                  }
+                />
+              )}
              {can.createDocument && (
                <SidebarLink
                  to="/drafts"
@@ -141,25 +151,26 @@ function MainSidebar() {
              />
            </Section>
            <Section>
-              {can.createDocument && (
-                <>
-                  <SidebarLink
-                    to="/templates"
-                    icon={<ShapesIcon color="currentColor" />}
-                    exact={false}
-                    label={t("Templates")}
-                    active={
-                      documents.active
-                        ? documents.active.isTemplate &&
-                          !documents.active.isDeleted &&
-                          !documents.active.isArchived
-                        : undefined
-                    }
-                  />
-                  <ArchiveLink documents={documents} />
-                  <TrashLink documents={documents} />
-                </>
-              )}
+              <SidebarLink
+                to="/archive"
+                icon={<ArchiveIcon color="currentColor" />}
+                exact={false}
+                label={t("Archive")}
+                active={
+                  documents.active
+                    ? documents.active.isArchived && !documents.active.isDeleted
+                    : undefined
+                }
+              />
+              <SidebarLink
+                to="/trash"
+                icon={<TrashIcon color="currentColor" />}
+                exact={false}
+                label={t("Trash")}
+                active={
+                  documents.active ? documents.active.isDeleted : undefined
+                }
+              />
              <SidebarLink
                to="/settings"
                icon={<SettingsIcon color="currentColor" />}
@@ -6,13 +6,13 @@ import { Portal } from "react-portal";
 import { useLocation } from "react-router-dom";
 import styled, { useTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
+import { fadeIn } from "shared/styles/animations";
 import Fade from "components/Fade";
 import Flex from "components/Flex";
 import ResizeBorder from "./components/ResizeBorder";
 import Toggle, { ToggleButton, Positioner } from "./components/Toggle";
 import usePrevious from "hooks/usePrevious";
 import useStores from "hooks/useStores";
-import { fadeIn } from "styles/animations";

 let ANIMATION_MS = 250;
 let isFirstRender = true;
@@ -1,43 +0,0 @@
-// @flow
-import { observer } from "mobx-react";
-import { ArchiveIcon } from "outline-icons";
-import * as React from "react";
-import { useDrop } from "react-dnd";
-import { useTranslation } from "react-i18next";
-import useStores from "../../../hooks/useStores";
-import SidebarLink from "./SidebarLink";
-import useToasts from "hooks/useToasts";
-
-function ArchiveLink({ documents }) {
-  const { policies } = useStores();
-  const { t } = useTranslation();
-  const { showToast } = useToasts();
-
-  const [{ isDocumentDropping }, dropToArchiveDocument] = useDrop({
-    accept: "document",
-    drop: async (item, monitor) => {
-      const document = documents.get(item.id);
-      await document.archive();
-      showToast(t("Document archived"), { type: "success" });
-    },
-    canDrop: (item, monitor) => policies.abilities(item.id).archive,
-    collect: (monitor) => ({
-      isDocumentDropping: monitor.isOver(),
-    }),
-  });
-
-  return (
-    <div ref={dropToArchiveDocument}>
-      <SidebarLink
-        to="/archive"
-        icon={<ArchiveIcon color="currentColor" open={isDocumentDropping} />}
-        exact={false}
-        label={t("Archive")}
-        active={documents.active?.isArchived && !documents.active?.isDeleted}
-        isActiveDrop={isDocumentDropping}
-      />
-    </div>
-  );
-}
-
-export default observer(ArchiveLink);
@@ -12,7 +12,6 @@ import DropCursor from "./DropCursor";
 import DropToImport from "./DropToImport";
 import EditableTitle from "./EditableTitle";
 import SidebarLink from "./SidebarLink";
-import useBoolean from "hooks/useBoolean";
 import useStores from "hooks/useStores";
 import CollectionMenu from "menus/CollectionMenu";
 import CollectionSortMenu from "menus/CollectionSortMenu";
@@ -36,7 +35,7 @@ function CollectionLink({
  isDraggingAnyCollection,
  onChangeDragging,
 }: Props) {
-  const [menuOpen, handleMenuOpen, handleMenuClose] = useBoolean();
+  const [menuOpen, setMenuOpen] = React.useState(false);

  const handleTitleChange = React.useCallback(
    async (name: string) => {
@@ -164,14 +163,14 @@ function CollectionLink({
                  {can.update && (
                    <CollectionSortMenuWithMargin
                      collection={collection}
-                      onOpen={handleMenuOpen}
-                      onClose={handleMenuClose}
+                      onOpen={() => setMenuOpen(true)}
+                      onClose={() => setMenuOpen(false)}
                    />
                  )}
                  <CollectionMenu
                    collection={collection}
-                    onOpen={handleMenuOpen}
-                    onClose={handleMenuClose}
+                    onOpen={() => setMenuOpen(true)}
+                    onClose={() => setMenuOpen(false)}
                  />
                </>
              }
@@ -9,13 +9,11 @@ import Fade from "components/Fade";
 import Flex from "components/Flex";
 import useStores from "../../../hooks/useStores";
 import CollectionLink from "./CollectionLink";
+import CollectionsLoading from "./CollectionsLoading";
 import DropCursor from "./DropCursor";
 import Header from "./Header";
-import PlaceholderCollections from "./PlaceholderCollections";
 import SidebarLink from "./SidebarLink";
 import useCurrentTeam from "hooks/useCurrentTeam";
-import useToasts from "hooks/useToasts";
-
 type Props = {
  onCreateCollection: () => void,
 };
@@ -24,7 +22,6 @@ function Collections({ onCreateCollection }: Props) {
  const [isFetching, setFetching] = React.useState(false);
  const [fetchError, setFetchError] = React.useState();
  const { ui, policies, documents, collections } = useStores();
-  const { showToast } = useToasts();
  const isPreloaded: boolean = !!collections.orderedData.length;
  const { t } = useTranslation();
  const team = useCurrentTeam();
@@ -41,7 +38,7 @@ function Collections({ onCreateCollection }: Props) {
          setFetching(true);
          await collections.fetchPage({ limit: 100 });
        } catch (error) {
-          showToast(
+          ui.showToast(
            t("Collections could not be loaded, please reload the app"),
            {
              type: "error",
@@ -54,7 +51,7 @@ function Collections({ onCreateCollection }: Props) {
      }
    }
    load();
-  }, [collections, isFetching, showToast, fetchError, t]);
+  }, [collections, isFetching, ui, fetchError, t]);

  const [{ isCollectionDropping }, dropToReorderCollection] = useDrop({
    accept: "collection",
@@ -108,7 +105,7 @@ function Collections({ onCreateCollection }: Props) {
    return (
      <Flex column>
        <Header>{t("Collections")}</Header>
-        <PlaceholderCollections />
+        <CollectionsLoading />
      </Flex>
    );
  }
@@ -0,0 +1,21 @@
+// @flow
+import * as React from "react";
+import styled from "styled-components";
+import Mask from "components/Mask";
+
+function CollectionsLoading() {
+  return (
+    <Wrapper>
+      <Mask />
+      <Mask />
+      <Mask />
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div`
+  margin: 4px 16px;
+  width: 75%;
+`;
+
+export default CollectionsLoading;
@@ -12,7 +12,6 @@ import DropCursor from "./DropCursor";
 import DropToImport from "./DropToImport";
 import EditableTitle from "./EditableTitle";
 import SidebarLink from "./SidebarLink";
-import useBoolean from "hooks/useBoolean";
 import useStores from "hooks/useStores";
 import DocumentMenu from "menus/DocumentMenu";
 import { type NavigationNode } from "types";
@@ -28,19 +27,16 @@ type Props = {|
  parentId?: string,
 |};

-function DocumentLink(
-  {
-    node,
-    canUpdate,
-    collection,
-    activeDocument,
-    prefetchDocument,
-    depth,
-    index,
-    parentId,
-  }: Props,
-  ref
-) {
+function DocumentLink({
+  node,
+  canUpdate,
+  collection,
+  activeDocument,
+  prefetchDocument,
+  depth,
+  index,
+  parentId,
+}: Props) {
  const { documents, policies } = useStores();
  const { t } = useTranslation();

@@ -121,7 +117,7 @@ function DocumentLink(
    [documents, document]
  );

-  const [menuOpen, handleMenuOpen, handleMenuClose] = useBoolean();
+  const [menuOpen, setMenuOpen] = React.useState(false);
  const isMoving = documents.movingDocumentId === node.id;
  const manualSort = collection?.sort.field === "index";

@@ -133,11 +129,7 @@ function DocumentLink(
      isDragging: !!monitor.isDragging(),
    }),
    canDrag: (monitor) => {
-      return (
-        policies.abilities(node.id).move ||
-        policies.abilities(node.id).archive ||
-        policies.abilities(node.id).delete
-      );
+      return policies.abilities(node.id).move;
    },
  });

@@ -244,14 +236,13 @@ function DocumentLink(
                depth={depth}
                exact={false}
                showActions={menuOpen}
-                ref={ref}
                menu={
                  document && !isMoving ? (
                    <Fade>
                      <DocumentMenu
                        document={document}
-                        onOpen={handleMenuOpen}
-                        onClose={handleMenuClose}
+                        onOpen={() => setMenuOpen(true)}
+                        onClose={() => setMenuOpen(false)}
                      />
                    </Fade>
                  ) : undefined
@@ -298,6 +289,5 @@ const Disclosure = styled(CollapsedIcon)`
  ${({ expanded }) => !expanded && "transform: rotate(-90deg);"};
 `;

-const ObservedDocumentLink = observer(React.forwardRef(DocumentLink));
-
+const ObservedDocumentLink = observer(DocumentLink);
 export default ObservedDocumentLink;
@@ -7,7 +7,6 @@ import styled, { css } from "styled-components";
 import LoadingIndicator from "components/LoadingIndicator";
 import useImportDocument from "hooks/useImportDocument";
 import useStores from "hooks/useStores";
-import useToasts from "hooks/useToasts";

 type Props = {|
  children: React.Node,
@@ -19,8 +18,7 @@ type Props = {|

 function DropToImport({ disabled, children, collectionId, documentId }: Props) {
  const { t } = useTranslation();
-  const { documents, policies } = useStores();
-  const { showToast } = useToasts();
+  const { ui, documents, policies } = useStores();
  const { handleFiles, isImporting } = useImportDocument(
    collectionId,
    documentId
@@ -29,11 +27,11 @@ function DropToImport({ disabled, children, collectionId, documentId }: Props) {
  const can = policies.abilities(collectionId);

  const handleRejection = React.useCallback(() => {
-    showToast(
+    ui.showToast(
      t("Document not supported – try Markdown, Plain text, HTML, or Word"),
      { type: "error" }
    );
-  }, [t, showToast]);
+  }, [t, ui]);

  if (disabled || !can.update) {
    return children;
@@ -1,7 +1,7 @@
 // @flow
 import * as React from "react";
 import styled from "styled-components";
-import useToasts from "hooks/useToasts";
+import useStores from "hooks/useStores";

 type Props = {|
  onSubmit: (title: string) => Promise<void>,
@@ -13,7 +13,7 @@ function EditableTitle({ title, onSubmit, canUpdate }: Props) {
  const [isEditing, setIsEditing] = React.useState(false);
  const [originalValue, setOriginalValue] = React.useState(title);
  const [value, setValue] = React.useState(title);
-  const { showToast } = useToasts();
+  const { ui } = useStores();

  React.useEffect(() => {
    setValue(title);
@@ -39,40 +39,32 @@ 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;
+        ui.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]
-  );
+    }
+  }, [ui, originalValue, value, onSubmit]);

  return (
    <>
      {isEditing ? (
        <form onSubmit={handleSave}>
          <Input
-            dir="auto"
            type="text"
            value={value}
            onKeyDown={handleKeyDown}
@@ -1,21 +0,0 @@
-// @flow
-import * as React from "react";
-import styled from "styled-components";
-import PlaceholderText from "components/PlaceholderText";
-
-function PlaceholderCollections() {
-  return (
-    <Wrapper>
-      <PlaceholderText />
-      <PlaceholderText delay={0.2} />
-      <PlaceholderText delay={0.4} />
-    </Wrapper>
-  );
-}
-
-const Wrapper = styled.div`
-  margin: 4px 16px;
-  width: 75%;
-`;
-
-export default PlaceholderCollections;
@@ -7,7 +7,7 @@ const ResizeBorder = styled.div`
  bottom: 0;
  right: -6px;
  width: 12px;
-  cursor: col-resize;
+  cursor: ew-resize;
 `;

 export default ResizeBorder;
@@ -1,5 +1,4 @@
 // @flow
-import { transparentize } from "polished";
 import * as React from "react";
 import { withRouter, type RouterHistory, type Match } from "react-router-dom";
 import styled, { withTheme } from "styled-components";
@@ -30,28 +29,25 @@ type Props = {
  depth?: number,
 };

-function SidebarLink(
-  {
-    icon,
-    children,
-    onClick,
-    onMouseEnter,
-    to,
-    label,
-    active,
-    isActiveDrop,
-    menu,
-    showActions,
-    theme,
-    exact,
-    href,
-    depth,
-    history,
-    match,
-    className,
-  }: Props,
-  ref
-) {
+function SidebarLink({
+  icon,
+  children,
+  onClick,
+  onMouseEnter,
+  to,
+  label,
+  active,
+  isActiveDrop,
+  menu,
+  showActions,
+  theme,
+  exact,
+  href,
+  depth,
+  history,
+  match,
+  className,
+}: Props) {
  const style = React.useMemo(() => {
    return {
      paddingLeft: `${(depth || 0) * 16 + 16}px`,
@@ -82,7 +78,6 @@ function SidebarLink(
        as={to ? undefined : href ? "a" : "div"}
        href={href}
        className={className}
-        ref={ref}
      >
        {icon && <IconWrapper>{icon}</IconWrapper>}
        <Label>{label}</Label>
@@ -146,8 +141,7 @@ const Link = styled(NavLink)`

  &:focus {
    color: ${(props) => props.theme.text};
-    background: ${(props) =>
-      transparentize("0.25", props.theme.sidebarItemBackground)};
+    background: ${(props) => props.theme.black05};
  }

  ${breakpoint("tablet")`
@@ -178,9 +172,6 @@ const Label = styled.div`
  width: 100%;
  max-height: 4.8em;
  line-height: 1.6;
-  * {
-    unicode-bidi: plaintext;
-  }
 `;

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

@@ -27,7 +27,7 @@ type Props = {
  policies: PoliciesStore,
  views: ViewsStore,
  auth: AuthStore,
-  toasts: ToastsStore,
+  ui: UiStore,
 };

@observer
@@ -72,7 +72,7 @@ class SocketProvider extends React.Component<Props> {

    const {
      auth,
-      toasts,
+      ui,
      documents,
      collections,
      groups,
@@ -113,7 +113,7 @@ class SocketProvider extends React.Component<Props> {

    this.socket.on("unauthorized", (err) => {
      this.socket.authenticated = false;
-      toasts.showToast(err.message, {
+      ui.showToast(err.message, {
        type: "error",
      });
      throw err;
@@ -250,10 +250,6 @@ class SocketProvider extends React.Component<Props> {
      documents.starredIds.set(event.documentId, false);
    });

-    this.socket.on("documents.permanent_delete", (event) => {
-      documents.remove(event.documentId);
-    });
-
    // received when a user is given access to a collection
    // if the user is us then we go ahead and load the collection from API.
    this.socket.on("collections.add_user", (event) => {
@@ -338,7 +334,7 @@ class SocketProvider extends React.Component<Props> {

 export default inject(
  "auth",
-  "toasts",
+  "ui",
  "documents",
  "collections",
  "groups",
@@ -1,14 +1,14 @@
 // @flow
-import { m } from "framer-motion";
 import * as React from "react";
-import styled, { useTheme } from "styled-components";
-import NavLinkWithChildrenFunc from "components/NavLink";
+import { NavLink } from "react-router-dom";
+import styled, { withTheme } from "styled-components";
+import { type Theme } from "types";

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

-const TabLink = styled(NavLinkWithChildrenFunc)`
+const TabLink = styled(NavLink)`
  position: relative;
  display: inline-flex;
  align-items: center;
@@ -20,47 +20,19 @@ const TabLink = styled(NavLinkWithChildrenFunc)`

  &:hover {
    color: ${(props) => props.theme.textSecondary};
+    border-bottom: 3px solid ${(props) => props.theme.divider};
+    padding-bottom: 5px;
  }
 `;

-const Active = styled(m.div)`
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 3px;
-  width: 100%;
-  border-top-left-radius: 2px;
-  border-top-right-radius: 2px;
-  background: ${(props) => props.theme.textSecondary};
-`;
-
-const transition = {
-  type: "spring",
-  stiffness: 500,
-  damping: 30,
-};
-
-export default function Tab({ children, ...rest }: Props) {
-  const theme = useTheme();
+function Tab({ theme, ...rest }: Props) {
  const activeStyle = {
+    paddingBottom: "5px",
+    borderBottom: `3px solid ${theme.textSecondary}`,
    color: theme.textSecondary,
  };

-  return (
-    <TabLink {...rest} activeStyle={activeStyle}>
-      {(match) => (
-        <>
-          {children}
-          {match && (
-            <Active
-              layoutId="underline"
-              initial={false}
-              transition={transition}
-            />
-          )}
-        </>
-      )}
-    </TabLink>
-  );
+  return <TabLink {...rest} activeStyle={activeStyle} />;
 }
+
+export default withTheme(Tab);
@@ -8,7 +8,7 @@ import styled from "styled-components";
 import Button from "components/Button";
 import Empty from "components/Empty";
 import Flex from "components/Flex";
-import PlaceholderText from "components/PlaceholderText";
+import Mask from "components/Mask";

 export type Props = {|
  data: any[],
@@ -170,7 +170,7 @@ export const Placeholder = ({
        <Row key={row}>
          {new Array(columns).fill().map((_, col) => (
            <Cell key={col}>
-              <PlaceholderText minWidth={25} maxWidth={75} />
+              <Mask minWidth={25} maxWidth={75} />
            </Cell>
          ))}
        </Row>
@@ -1,40 +1,13 @@
 // @flow
-import { AnimateSharedLayout } from "framer-motion";
-import { transparentize } from "polished";
 import * as React from "react";
 import styled from "styled-components";
-import useWindowSize from "hooks/useWindowSize";

 const Nav = styled.nav`
  border-bottom: 1px solid ${(props) => props.theme.divider};
  margin: 12px 0;
  overflow-y: auto;
  white-space: nowrap;
-
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
-  &:after {
-    content: "";
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 50px;
-    height: 100%;
-    pointer-events: none;
-    background: ${(props) =>
-      props.$shadowVisible
-        ? `linear-gradient(
-      90deg,
-      ${transparentize(1, props.theme.background)} 0%,
-      ${props.theme.background} 100%
-    )`
-        : `transparent`};
-  }
+  transition: opacity 250ms ease-out;
 `;

 // When sticky we need extra background coverage around the sides otherwise
@@ -57,36 +30,11 @@ export const Separator = styled.span`
  margin-top: 6px;
 `;

-const Tabs = ({ children }: {| children: React.Node |}) => {
-  const ref = React.useRef<?HTMLDivElement>();
-  const [shadowVisible, setShadow] = React.useState(false);
-  const { width } = useWindowSize();
-
-  const updateShadows = React.useCallback(() => {
-    const c = ref.current;
-    if (!c) return;
-
-    const scrollLeft = c.scrollLeft;
-    const wrapperWidth = c.scrollWidth - c.clientWidth;
-    const fade = !!(wrapperWidth - scrollLeft !== 0);
-
-    if (fade !== shadowVisible) {
-      setShadow(fade);
-    }
-  }, [shadowVisible]);
-
-  React.useEffect(() => {
-    updateShadows();
-  }, [width, updateShadows]);
-
+const Tabs = (props: {}) => {
  return (
-    <AnimateSharedLayout>
-      <Sticky>
-        <Nav ref={ref} onScroll={updateShadows} $shadowVisible={shadowVisible}>
-          {children}
-        </Nav>
-      </Sticky>
-    </AnimateSharedLayout>
+    <Sticky>
+      <Nav {...props}></Nav>
+    </Sticky>
  );
 };

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

 const empty = {};

@@ -1,5 +1,5 @@
 // @flow
-import { formatDistanceToNow } from "date-fns";
+import distanceInWordsToNow from "date-fns/distance_in_words_to_now";
 import * as React from "react";

 const LocaleTime = React.lazy(() =>
@@ -11,12 +11,11 @@ type Props = {
  children?: React.Node,
  tooltipDelay?: number,
  addSuffix?: boolean,
-  format?: string,
  shorten?: boolean,
 };

 function Time(props: Props) {
-  let content = formatDistanceToNow(Date.parse(props.dateTime), {
+  let content = distanceInWordsToNow(props.dateTime, {
    addSuffix: props.addSuffix,
  });

@@ -33,7 +32,7 @@ function Time(props: Props) {
        <time dateTime={props.dateTime}>{props.children || content}</time>
      }
    >
-      <LocaleTime tooltipDelay={250} {...props} />
+      <LocaleTime {...props} />
    </React.Suspense>
  );
 }
@@ -3,7 +3,7 @@ import { CheckboxIcon, InfoIcon, WarningIcon } from "outline-icons";
 import { darken } from "polished";
 import * as React from "react";
 import styled, { css } from "styled-components";
-import { fadeAndScaleIn, pulse } from "styles/animations";
+import { fadeAndScaleIn, pulse } from "shared/styles/animations";
 import type { Toast as TToast } from "types";

 type Props = {
@@ -6,15 +6,15 @@ import Toast from "components/Toast";
 import useStores from "hooks/useStores";

 function Toasts() {
-  const { toasts } = useStores();
+  const { ui } = useStores();

  return (
    <List>
-      {toasts.orderedData.map((toast) => (
+      {ui.orderedToasts.map((toast) => (
        <Toast
          key={toast.id}
          toast={toast}
-          onRequestClose={() => toasts.hideToast(toast.id)}
+          onRequestClose={() => ui.removeToast(toast.id)}
        />
      ))}
    </List>
@@ -0,0 +1,69 @@
+// @flow
+import * as React from "react";
+import styled from "styled-components";
+import env from "env";
+
+const URL_REGEX = new RegExp("^https://www.dropbox.com/sh?/(.*)$");
+
+type Props = {|
+  isSelected: boolean,
+  attrs: {|
+    href: string,
+    matches: string[],
+  |},
+|};
+
+class Dropbox extends React.Component<Props> {
+  static ENABLED = [URL_REGEX];
+
+  container = React.createRef<HTMLAnchorElement>();
+
+  shouldComponentUpdate(nextProps: Props) {
+    return (
+      nextProps.isSelected !== this.props.isSelected ||
+      nextProps.attrs.href !== this.props.attrs.href
+    );
+  }
+
+  componentDidMount() {
+    if (document.getElementById("dropboxjs")) {
+      if (this.container.current) {
+        window.Dropbox.embed(
+          { link: this.props.attrs.href },
+          this.container.current
+        );
+      }
+
+      return;
+    }
+
+    const tag = document.createElement("script");
+    tag.async = false;
+    tag.id = "dropboxjs";
+    tag.setAttribute("data-app-key", env.DROPBOX_APP_KEY);
+    tag.src = "https://www.dropbox.com/static/api/2/dropins.js";
+    document.body?.appendChild(tag);
+  }
+
+  render() {
+    return (
+      <Rounded
+        className={this.props.isSelected ? "ProseMirror-selectednode" : ""}
+      >
+        <a
+          ref={this.container}
+          href={this.props.attrs.href}
+          className="dropbox-embed"
+          data-height="400px"
+        />
+      </Rounded>
+    );
+  }
+}
+
+const Rounded = styled.div`
+  border-radius: 3px;
+  height: 400px;
+`;
+
+export default Dropbox;
@@ -1,39 +0,0 @@
-// @flow
-import * as React from "react";
-import Image from "components/Image";
-import Frame from "./components/Frame";
-
-const URL_REGEX = new RegExp(
-  "^https?://datastudio.google.com/(embed|u/0)/reporting/(.*)/page/(.*)(/edit)?$"
-);
-
-type Props = {|
-  attrs: {|
-    href: string,
-    matches: string[],
-  |},
-|};
-
-export default class GoogleDataStudio extends React.Component<Props> {
-  static ENABLED = [URL_REGEX];
-
-  render() {
-    return (
-      <Frame
-        {...this.props}
-        src={this.props.attrs.href.replace("u/0", "embed").replace("/edit", "")}
-        icon={
-          <Image
-            src="/images/google-datastudio.png"
-            alt="Google Data Studio Icon"
-            width={16}
-            height={16}
-          />
-        }
-        canonicalUrl={this.props.attrs.href}
-        title="Google Data Studio"
-        border
-      />
-    );
-  }
-}
@@ -1,19 +0,0 @@
-/* eslint-disable flowtype/require-valid-file-annotation */
-import GoogleDataStudio from "./GoogleDataStudio";
-
-describe("GoogleDataStudio", () => {
-  const match = GoogleDataStudio.ENABLED[0];
-  test("to be enabled on share link", () => {
-    expect(
-      "https://datastudio.google.com/embed/reporting/aab01789-f3a2-4ff3-9cba-c4c94c4a92e8/page/7zFD".match(
-        match
-      )
-    ).toBeTruthy();
-  });
-
-  test("to not be enabled elsewhere", () => {
-    expect("https://datastudio.google.com/u/0/".match(match)).toBe(null);
-    expect("https://datastudio.google.com".match(match)).toBe(null);
-    expect("https://www.google.com".match(match)).toBe(null);
-  });
-});
@@ -4,7 +4,7 @@ import Image from "components/Image";
 import Frame from "./components/Frame";

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

 type Props = {|
@@ -29,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,11 +14,6 @@ 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", () => {
@@ -17,10 +17,7 @@ export default class Mindmeister extends React.Component<Props> {
  static ENABLED = [URL_REGEX];

  render() {
-    const chartId =
-      this.props.attrs.matches[4] +
-      (this.props.attrs.matches[5] || "") +
-      (this.props.attrs.matches[6] || "");
+    const chartId = this.props.attrs.matches[4] + this.props.attrs.matches[6];

    return (
      <Frame
@@ -11,7 +11,9 @@ import Flex from "components/Flex";
 const Iframe = (props) => <iframe title="Embed" {...props} />;

 const StyledIframe = styled(Iframe)`
-  border-radius: ${(props) => (props.$withBar ? "3px 3px 0 0" : "3px")};
+  border: 1px solid;
+  border-color: ${(props) => props.theme.embedBorder};
+  border-radius: ${(props) => (props.withBar ? "3px 3px 0 0" : "3px")};
  display: block;
 `;

@@ -68,13 +70,13 @@ class Frame extends React.Component<PropsWithRef> {
      <Rounded
        width={width}
        height={height}
-        $withBar={withBar}
+        withBar={withBar}
        className={isSelected ? "ProseMirror-selectednode" : ""}
      >
        {this.isLoaded && (
          <Component
            ref={forwardedRef}
-            $withBar={withBar}
+            withBar={withBar}
            sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
            width={width}
            height={height}
@@ -106,11 +108,10 @@ class Frame extends React.Component<PropsWithRef> {
 }

 const Rounded = styled.div`
-  border: 1px solid ${(props) => props.theme.embedBorder};
-  border-radius: 6px;
+  border-radius: ${(props) => (props.withBar ? "3px 3px 0 0" : "3px")};
  overflow: hidden;
  width: ${(props) => props.width};
-  height: ${(props) => (props.$withBar ? props.height + 28 : props.height)};
+  height: ${(props) => (props.withBar ? props.height + 28 : props.height)};
 `;

 const Open = styled.a`
@@ -131,12 +132,11 @@ const Title = styled.span`
 `;

 const Bar = styled(Flex)`
-  border-top: 1px solid ${(props) => props.theme.embedBorder};
  background: ${(props) => props.theme.secondaryBackground};
  color: ${(props) => props.theme.textSecondary};
  padding: 0 8px;
-  border-bottom-left-radius: 6px;
-  border-bottom-right-radius: 6px;
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
  user-select: none;
 `;

@@ -1,4 +1,5 @@
 // @flow
+import { filter } from "lodash";
 import * as React from "react";
 import styled from "styled-components";
 import Image from "components/Image";
@@ -8,10 +9,10 @@ import Cawemo from "./Cawemo";
 import ClickUp from "./ClickUp";
 import Codepen from "./Codepen";
 import Descript from "./Descript";
+import Dropbox from "./Dropbox";
 import Figma from "./Figma";
 import Framer from "./Framer";
 import Gist from "./Gist";
-import GoogleDataStudio from "./GoogleDataStudio";
 import GoogleDocs from "./GoogleDocs";
 import GoogleDrawings from "./GoogleDrawings";
 import GoogleDrive from "./GoogleDrive";
@@ -30,6 +31,8 @@ import Trello from "./Trello";
 import Typeform from "./Typeform";
 import Vimeo from "./Vimeo";
 import YouTube from "./YouTube";
+import env from "env";
+import { isCustomDomain } from "utils/domains";

 function matcher(Component) {
  return (url: string) => {
@@ -49,204 +52,219 @@ const Img = styled(Image)`
  height: 18px;
 `;

-export default [
-  {
-    title: "Abstract",
-    keywords: "design",
-    icon: () => <Img src="/images/abstract.png" />,
-    component: Abstract,
-    matcher: matcher(Abstract),
-  },
-  {
-    title: "Airtable",
-    keywords: "spreadsheet",
-    icon: () => <Img src="/images/airtable.png" />,
-    component: Airtable,
-    matcher: matcher(Airtable),
-  },
-  {
-    title: "Cawemo",
-    keywords: "bpmn process",
-    defaultHidden: true,
-    icon: () => <Img src="/images/cawemo.png" />,
-    component: Cawemo,
-    matcher: matcher(Cawemo),
-  },
-  {
-    title: "ClickUp",
-    keywords: "project",
-    defaultHidden: true,
-    icon: () => <Img src="/images/clickup.png" />,
-    component: ClickUp,
-    matcher: matcher(ClickUp),
-  },
-  {
-    title: "Codepen",
-    keywords: "code editor",
-    icon: () => <Img src="/images/codepen.png" />,
-    component: Codepen,
-    matcher: matcher(Codepen),
-  },
-  {
-    title: "Descript",
-    keywords: "audio",
-    icon: () => <Img src="/images/descript.png" />,
-    component: Descript,
-    matcher: matcher(Descript),
-  },
-  {
-    title: "Figma",
-    keywords: "design svg vector",
-    icon: () => <Img src="/images/figma.png" />,
-    component: Figma,
-    matcher: matcher(Figma),
-  },
-  {
-    title: "Framer",
-    keywords: "design prototyping",
-    icon: () => <Img src="/images/framer.png" />,
-    component: Framer,
-    matcher: matcher(Framer),
-  },
-  {
-    title: "GitHub Gist",
-    keywords: "code",
-    icon: () => <Img src="/images/github-gist.png" />,
-    component: Gist,
-    matcher: matcher(Gist),
-  },
-  {
-    title: "Google Drawings",
-    keywords: "drawings",
-    icon: () => <Img src="/images/google-drawings.png" />,
-    component: GoogleDrawings,
-    matcher: matcher(GoogleDrawings),
-  },
-  {
-    title: "Google Drive",
-    keywords: "drive",
-    icon: () => <Img src="/images/google-drive.png" />,
-    component: GoogleDrive,
-    matcher: matcher(GoogleDrive),
-  },
-  {
-    title: "Google Docs",
-    icon: () => <Img src="/images/google-docs.png" />,
-    component: GoogleDocs,
-    matcher: matcher(GoogleDocs),
-  },
-  {
-    title: "Google Sheets",
-    keywords: "excel spreadsheet",
-    icon: () => <Img src="/images/google-sheets.png" />,
-    component: GoogleSheets,
-    matcher: matcher(GoogleSheets),
-  },
-  {
-    title: "Google Slides",
-    keywords: "presentation slideshow",
-    icon: () => <Img src="/images/google-slides.png" />,
-    component: GoogleSlides,
-    matcher: matcher(GoogleSlides),
-  },
-  {
-    title: "Google Data Studio",
-    keywords: "business intelligence",
-    icon: () => <Img src="/images/google-datastudio.png" />,
-    component: GoogleDataStudio,
-    matcher: matcher(GoogleDataStudio),
-  },
-  {
-    title: "InVision",
-    keywords: "design prototype",
-    defaultHidden: true,
-    icon: () => <Img src="/images/invision.png" />,
-    component: InVision,
-    matcher: matcher(InVision),
-  },
-  {
-    title: "Loom",
-    keywords: "video screencast",
-    icon: () => <Img src="/images/loom.png" />,
-    component: Loom,
-    matcher: matcher(Loom),
-  },
-  {
-    title: "Lucidchart",
-    keywords: "chart",
-    icon: () => <Img src="/images/lucidchart.png" />,
-    component: Lucidchart,
-    matcher: matcher(Lucidchart),
-  },
-  {
-    title: "Marvel",
-    keywords: "design prototype",
-    icon: () => <Img src="/images/marvel.png" />,
-    component: Marvel,
-    matcher: matcher(Marvel),
-  },
-  {
-    title: "Mindmeister",
-    keywords: "mindmap",
-    icon: () => <Img src="/images/mindmeister.png" />,
-    component: Mindmeister,
-    matcher: matcher(Mindmeister),
-  },
-  {
-    title: "Miro",
-    keywords: "whiteboard",
-    icon: () => <Img src="/images/miro.png" />,
-    component: Miro,
-    matcher: matcher(Miro),
-  },
-  {
-    title: "Mode",
-    keywords: "analytics",
-    defaultHidden: true,
-    icon: () => <Img src="/images/mode-analytics.png" />,
-    component: ModeAnalytics,
-    matcher: matcher(ModeAnalytics),
-  },
-  {
-    title: "Prezi",
-    keywords: "presentation",
-    icon: () => <Img src="/images/prezi.png" />,
-    component: Prezi,
-    matcher: matcher(Prezi),
-  },
-  {
-    title: "Spotify",
-    keywords: "music",
-    icon: () => <Img src="/images/spotify.png" />,
-    component: Spotify,
-    matcher: matcher(Spotify),
-  },
-  {
-    title: "Trello",
-    keywords: "kanban",
-    icon: () => <Img src="/images/trello.png" />,
-    component: Trello,
-    matcher: matcher(Trello),
-  },
-  {
-    title: "Typeform",
-    keywords: "form survey",
-    icon: () => <Img src="/images/typeform.png" />,
-    component: Typeform,
-    matcher: matcher(Typeform),
-  },
-  {
-    title: "Vimeo",
-    keywords: "video",
-    icon: () => <Img src="/images/vimeo.png" />,
-    component: Vimeo,
-    matcher: matcher(Vimeo),
-  },
-  {
-    title: "YouTube",
-    keywords: "google video",
-    icon: () => <Img src="/images/youtube.png" />,
-    component: YouTube,
-    matcher: matcher(YouTube),
-  },
-];
+type EmbedSpec = {
+  title: string,
+  keywords?: string,
+  defaultHidden?: boolean,
+  icon: any,
+  component: React.ComponentType<any>,
+  matcher: any,
+};
+
+export default filter<void | EmbedSpec>(
+  [
+    {
+      title: "Abstract",
+      keywords: "design",
+      icon: () => <Img src="/images/abstract.png" />,
+      component: Abstract,
+      matcher: matcher(Abstract),
+    },
+    {
+      title: "Airtable",
+      keywords: "spreadsheet",
+      icon: () => <Img src="/images/airtable.png" />,
+      component: Airtable,
+      matcher: matcher(Airtable),
+    },
+    {
+      title: "Cawemo",
+      keywords: "bpmn process",
+      defaultHidden: true,
+      icon: () => <Img src="/images/cawemo.png" />,
+      component: Cawemo,
+      matcher: matcher(Cawemo),
+    },
+    {
+      title: "ClickUp",
+      keywords: "project",
+      defaultHidden: true,
+      icon: () => <Img src="/images/clickup.png" />,
+      component: ClickUp,
+      matcher: matcher(ClickUp),
+    },
+    {
+      title: "Codepen",
+      keywords: "code editor",
+      icon: () => <Img src="/images/codepen.png" />,
+      component: Codepen,
+      matcher: matcher(Codepen),
+    },
+    {
+      title: "Descript",
+      keywords: "audio",
+      defaultHidden: true,
+      icon: () => <Img src="/images/descript.png" />,
+      component: Descript,
+      matcher: matcher(Descript),
+    },
+    env.DROPBOX_APP_KEY && !isCustomDomain()
+      ? {
+          title: "Dropbox",
+          keywords: "dropbox file pdf",
+          icon: () => <Img src="/images/dropbox.png" />,
+          component: Dropbox,
+          matcher: matcher(Dropbox),
+        }
+      : undefined,
+    {
+      title: "Figma",
+      keywords: "design svg vector",
+      icon: () => <Img src="/images/figma.png" />,
+      component: Figma,
+      matcher: matcher(Figma),
+    },
+    {
+      title: "Framer",
+      keywords: "design prototyping",
+      icon: () => <Img src="/images/framer.png" />,
+      component: Framer,
+      matcher: matcher(Framer),
+    },
+    {
+      title: "GitHub Gist",
+      keywords: "code",
+      icon: () => <Img src="/images/github-gist.png" />,
+      component: Gist,
+      matcher: matcher(Gist),
+    },
+    {
+      title: "Google Drawings",
+      keywords: "drawings",
+      icon: () => <Img src="/images/google-drawings.png" />,
+      component: GoogleDrawings,
+      matcher: matcher(GoogleDrawings),
+    },
+    {
+      title: "Google Drive",
+      keywords: "drive",
+      icon: () => <Img src="/images/google-drive.png" />,
+      component: GoogleDrive,
+      matcher: matcher(GoogleDrive),
+    },
+    {
+      title: "Google Docs",
+      icon: () => <Img src="/images/google-docs.png" />,
+      component: GoogleDocs,
+      matcher: matcher(GoogleDocs),
+    },
+    {
+      title: "Google Sheets",
+      keywords: "excel spreadsheet",
+      icon: () => <Img src="/images/google-sheets.png" />,
+      component: GoogleSheets,
+      matcher: matcher(GoogleSheets),
+    },
+    {
+      title: "Google Slides",
+      keywords: "presentation slideshow",
+      icon: () => <Img src="/images/google-slides.png" />,
+      component: GoogleSlides,
+      matcher: matcher(GoogleSlides),
+    },
+    {
+      title: "InVision",
+      keywords: "design prototype",
+      defaultHidden: true,
+      icon: () => <Img src="/images/invision.png" />,
+      component: InVision,
+      matcher: matcher(InVision),
+    },
+    {
+      title: "Loom",
+      keywords: "video screencast",
+      icon: () => <Img src="/images/loom.png" />,
+      component: Loom,
+      matcher: matcher(Loom),
+    },
+    {
+      title: "Lucidchart",
+      keywords: "chart",
+      icon: () => <Img src="/images/lucidchart.png" />,
+      component: Lucidchart,
+      matcher: matcher(Lucidchart),
+    },
+    {
+      title: "Marvel",
+      keywords: "design prototype",
+      icon: () => <Img src="/images/marvel.png" />,
+      component: Marvel,
+      matcher: matcher(Marvel),
+    },
+    {
+      title: "Mindmeister",
+      keywords: "mindmap",
+      icon: () => <Img src="/images/mindmeister.png" />,
+      component: Mindmeister,
+      matcher: matcher(Mindmeister),
+    },
+    {
+      title: "Miro",
+      keywords: "whiteboard",
+      icon: () => <Img src="/images/miro.png" />,
+      component: Miro,
+      matcher: matcher(Miro),
+    },
+    {
+      title: "Mode",
+      keywords: "analytics",
+      defaultHidden: true,
+      icon: () => <Img src="/images/mode-analytics.png" />,
+      component: ModeAnalytics,
+      matcher: matcher(ModeAnalytics),
+    },
+    {
+      title: "Prezi",
+      keywords: "presentation",
+      icon: () => <Img src="/images/prezi.png" />,
+      component: Prezi,
+      matcher: matcher(Prezi),
+    },
+    {
+      title: "Spotify",
+      keywords: "music",
+      icon: () => <Img src="/images/spotify.png" />,
+      component: Spotify,
+      matcher: matcher(Spotify),
+    },
+    {
+      title: "Trello",
+      keywords: "kanban",
+      icon: () => <Img src="/images/trello.png" />,
+      component: Trello,
+      matcher: matcher(Trello),
+    },
+    {
+      title: "Typeform",
+      keywords: "form survey",
+      icon: () => <Img src="/images/typeform.png" />,
+      component: Typeform,
+      matcher: matcher(Typeform),
+    },
+    {
+      title: "Vimeo",
+      keywords: "video",
+      icon: () => <Img src="/images/vimeo.png" />,
+      component: Vimeo,
+      matcher: matcher(Vimeo),
+    },
+    {
+      title: "YouTube",
+      keywords: "google video",
+      icon: () => <Img src="/images/youtube.png" />,
+      component: YouTube,
+      matcher: matcher(YouTube),
+    },
+  ],
+  (i: void | EmbedSpec) => !!i
+);
@@ -1,23 +0,0 @@
-// @flow
-import * as React from "react";
-
-type InitialState = boolean | (() => boolean);
-
-/**
- * React hook to manage booleans
- *
- * @param initialState the initial boolean state value
- */
-export default function useBoolean(initialState: InitialState = false) {
-  const [value, setValue] = React.useState(initialState);
-
-  const setTrue = React.useCallback(() => {
-    setValue(true);
-  }, []);
-
-  const setFalse = React.useCallback(() => {
-    setValue(false);
-  }, []);
-
-  return [value, setTrue, setFalse];
-}
@@ -4,7 +4,6 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
 import useStores from "hooks/useStores";
-import useToasts from "hooks/useToasts";

 let importingLock = false;

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

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

-  return auth.user.language;
+  return auth.user.language.split("_")[0];
 }
@@ -1,52 +0,0 @@
-// @flow
-// Based on https://github.com/rehooks/window-scroll-position which is no longer
-// maintained.
-import { throttle } from "lodash";
-import { useState, useEffect } from "react";
-
-let supportsPassive = false;
-try {
-  var opts = Object.defineProperty({}, "passive", {
-    get: function () {
-      supportsPassive = true;
-    },
-  });
-  window.addEventListener("testPassive", null, opts);
-  window.removeEventListener("testPassive", null, opts);
-} catch (e) {}
-
-const getPosition = () => ({
-  x: window.pageXOffset,
-  y: window.pageYOffset,
-});
-
-const defaultOptions = {
-  throttle: 100,
-};
-
-export default function useWindowScrollPosition(options: {
-  throttle: number,
-}): { x: number, y: number } {
-  let opts = Object.assign({}, defaultOptions, options);
-
-  let [position, setPosition] = useState(getPosition());
-
-  useEffect(() => {
-    let handleScroll = throttle(() => {
-      setPosition(getPosition());
-    }, opts.throttle);
-
-    window.addEventListener(
-      "scroll",
-      handleScroll,
-      supportsPassive ? { passive: true } : false
-    );
-
-    return () => {
-      handleScroll.cancel();
-      window.removeEventListener("scroll", handleScroll);
-    };
-  }, [opts.throttle]);
-
-  return position;
-}
@@ -1,6 +1,5 @@
 // @flow
 import "focus-visible";
-import { LazyMotion } from "framer-motion";
 import { createBrowserHistory } from "history";
 import { Provider } from "mobx-react";
 import * as React from "react";
@@ -50,10 +49,6 @@ if ("serviceWorker" in window.navigator) {
  });
 }

-// Make sure to return the specific export containing the feature bundle.
-const loadFeatures = () =>
-  import("./utils/motion.js").then((res) => res.default);
-
 if (element) {
  const App = () => (
    <React.StrictMode>
@@ -61,17 +56,15 @@ if (element) {
        <Analytics>
          <Theme>
            <ErrorBoundary>
-              <LazyMotion features={loadFeatures}>
-                <Router history={history}>
-                  <>
-                    <PageTheme />
-                    <ScrollToTop>
-                      <Routes />
-                    </ScrollToTop>
-                    <Toasts />
-                  </>
-                </Router>
-              </LazyMotion>
+              <Router history={history}>
+                <>
+                  <PageTheme />
+                  <ScrollToTop>
+                    <Routes />
+                  </ScrollToTop>
+                  <Toasts />
+                </>
+              </Router>
            </ErrorBoundary>
          </Theme>
        </Analytics>
@@ -88,7 +81,7 @@ window.addEventListener("load", async () => {
  if (!env.GOOGLE_ANALYTICS_ID || !window.ga) return;

  // https://github.com/googleanalytics/autotrack/issues/137#issuecomment-305890099
-  await import(/* webpackChunkName: "autotrack" */ "autotrack/autotrack.js");
+  await import(/** webpackChunkName: "autotrack" */ "autotrack/autotrack.js");

  window.ga("require", "outboundLinkTracker");
  window.ga("require", "urlChangeTracker");
@@ -19,7 +19,6 @@ import MenuItem, { MenuAnchor } from "components/ContextMenu/MenuItem";
 import Separator from "components/ContextMenu/Separator";
 import Flex from "components/Flex";
 import Guide from "components/Guide";
-import useBoolean from "hooks/useBoolean";
 import usePrevious from "hooks/usePrevious";
 import useStores from "hooks/useStores";

@@ -73,18 +72,15 @@ const AppearanceMenu = React.forwardRef((props, ref) => {

 function AccountMenu(props: Props) {
  const menu = useMenuState({
-    unstable_offset: [8, 0],
    placement: "bottom-start",
    modal: true,
  });
  const { auth, ui } = useStores();
  const previousTheme = usePrevious(ui.theme);
  const { t } = useTranslation();
-  const [
-    keyboardShortcutsOpen,
-    handleKeyboardShortcutsOpen,
-    handleKeyboardShortcutsClose,
-  ] = useBoolean();
+  const [keyboardShortcutsOpen, setKeyboardShortcutsOpen] = React.useState(
+    false
+  );

  React.useEffect(() => {
    if (ui.theme !== previousTheme) {
@@ -96,7 +92,7 @@ function AccountMenu(props: Props) {
    <>
      <Guide
        isOpen={keyboardShortcutsOpen}
-        onRequestClose={handleKeyboardShortcutsClose}
+        onRequestClose={() => setKeyboardShortcutsOpen(false)}
        title={t("Keyboard shortcuts")}
      >
        <KeyboardShortcuts />
@@ -106,7 +102,7 @@ function AccountMenu(props: Props) {
        <MenuItem {...menu} as={Link} to={settings()}>
          {t("Settings")}
        </MenuItem>
-        <MenuItem {...menu} onClick={handleKeyboardShortcutsOpen}>
+        <MenuItem {...menu} onClick={() => setKeyboardShortcutsOpen(true)}>
          {t("Keyboard shortcuts")}
        </MenuItem>
        <MenuItem {...menu} href={developers()} target="_blank">
@@ -12,10 +12,9 @@ import CollectionExport from "scenes/CollectionExport";
 import CollectionPermissions from "scenes/CollectionPermissions";
 import ContextMenu from "components/ContextMenu";
 import OverflowMenuButton from "components/ContextMenu/OverflowMenuButton";
-import Template, { filterTemplateItems } from "components/ContextMenu/Template";
+import Template from "components/ContextMenu/Template";
 import Modal from "components/Modal";
 import useStores from "hooks/useStores";
-import useToasts from "hooks/useToasts";
 import getDataTransferFiles from "utils/getDataTransferFiles";
 import { newDocumentUrl } from "utils/routeHelpers";

@@ -38,8 +37,7 @@ function CollectionMenu({
 }: Props) {
  const menu = useMenuState({ modal, placement });
  const [renderModals, setRenderModals] = React.useState(false);
-  const { documents, policies } = useStores();
-  const { showToast } = useToasts();
+  const { ui, documents, policies } = useStores();
  const { t } = useTranslation();
  const history = useHistory();

@@ -101,63 +99,17 @@ function CollectionMenu({
        });
        history.push(document.url);
      } catch (err) {
-        showToast(err.message, {
+        ui.showToast(err.message, {
          type: "error",
        });

        throw err;
      }
    },
-    [history, showToast, collection.id, documents]
+    [history, ui, collection.id, documents]
  );

  const can = policies.abilities(collection.id);
-  const items = React.useMemo(
-    () =>
-      filterTemplateItems([
-        {
-          title: t("New document"),
-          visible: can.update,
-          onClick: handleNewDocument,
-        },
-        {
-          title: t("Import document"),
-          visible: can.update,
-          onClick: handleImportDocument,
-        },
-        {
-          type: "separator",
-        },
-        {
-          title: `${t("Edit")}…`,
-          visible: can.update,
-          onClick: () => setShowCollectionEdit(true),
-        },
-        {
-          title: `${t("Permissions")}…`,
-          visible: can.update,
-          onClick: () => setShowCollectionPermissions(true),
-        },
-        {
-          title: `${t("Export")}…`,
-          visible: !!(collection && can.export),
-          onClick: () => setShowCollectionExport(true),
-        },
-        {
-          type: "separator",
-        },
-        {
-          title: `${t("Delete")}…`,
-          visible: !!(collection && can.delete),
-          onClick: () => setShowCollectionDelete(true),
-        },
-      ]),
-    [can, collection, handleNewDocument, handleImportDocument, t]
-  );
-
-  if (!items.length) {
-    return null;
-  }

  return (
    <>
@@ -182,7 +134,47 @@ function CollectionMenu({
        onClose={onClose}
        aria-label={t("Collection")}
      >
-        <Template {...menu} items={items} />
+        <Template
+          {...menu}
+          items={[
+            {
+              title: t("New document"),
+              visible: can.update,
+              onClick: handleNewDocument,
+            },
+            {
+              title: t("Import document"),
+              visible: can.update,
+              onClick: handleImportDocument,
+            },
+            {
+              type: "separator",
+            },
+            {
+              title: `${t("Edit")}…`,
+              visible: can.update,
+              onClick: () => setShowCollectionEdit(true),
+            },
+            {
+              title: `${t("Permissions")}…`,
+              visible: can.update,
+              onClick: () => setShowCollectionPermissions(true),
+            },
+            {
+              title: `${t("Export")}…`,
+              visible: !!(collection && can.export),
+              onClick: () => setShowCollectionExport(true),
+            },
+            {
+              type: "separator",
+            },
+            {
+              title: `${t("Delete")}…`,
+              visible: !!(collection && can.delete),
+              onClick: () => setShowCollectionDelete(true),
+            },
+          ]}
+        />
      </ContextMenu>
      {renderModals && (
        <>
@@ -9,7 +9,6 @@ import styled from "styled-components";
 import Document from "models/Document";
 import DocumentDelete from "scenes/DocumentDelete";
 import DocumentMove from "scenes/DocumentMove";
-import DocumentPermanentDelete from "scenes/DocumentPermanentDelete";
 import DocumentTemplatize from "scenes/DocumentTemplatize";
 import CollectionIcon from "components/CollectionIcon";
 import ContextMenu from "components/ContextMenu";
@@ -18,7 +17,6 @@ import Template from "components/ContextMenu/Template";
 import Flex from "components/Flex";
 import Modal from "components/Modal";
 import useStores from "hooks/useStores";
-import useToasts from "hooks/useToasts";
 import getDataTransferFiles from "utils/getDataTransferFiles";
 import {
  documentHistoryUrl,
@@ -52,8 +50,7 @@ function DocumentMenu({
  onOpen,
  onClose,
 }: Props) {
-  const { policies, collections, documents } = useStores();
-  const { showToast } = useToasts();
+  const { policies, collections, ui, documents } = useStores();
  const menu = useMenuState({
    modal,
    unstable_preventOverflow: true,
@@ -64,10 +61,6 @@ function DocumentMenu({
  const { t } = useTranslation();
  const [renderModals, setRenderModals] = React.useState(false);
  const [showDeleteModal, setShowDeleteModal] = React.useState(false);
-  const [
-    showPermanentDeleteModal,
-    setShowPermanentDeleteModal,
-  ] = React.useState(false);
  const [showMoveModal, setShowMoveModal] = React.useState(false);
  const [showTemplateModal, setShowTemplateModal] = React.useState(false);
  const file = React.useRef<?HTMLInputElement>();
@@ -85,33 +78,33 @@ function DocumentMenu({

      // when duplicating, go straight to the duplicated document content
      history.push(duped.url);
-      showToast(t("Document duplicated"), { type: "success" });
+      ui.showToast(t("Document duplicated"), { type: "success" });
    },
-    [t, history, showToast, document]
+    [ui, t, history, document]
  );

  const handleArchive = React.useCallback(
    async (ev: SyntheticEvent<>) => {
      await document.archive();
-      showToast(t("Document archived"), { type: "success" });
+      ui.showToast(t("Document archived"), { type: "success" });
    },
-    [showToast, t, document]
+    [ui, t, document]
  );

  const handleRestore = React.useCallback(
    async (ev: SyntheticEvent<>, options?: { collectionId: string }) => {
      await document.restore(options);
-      showToast(t("Document restored"), { type: "success" });
+      ui.showToast(t("Document restored"), { type: "success" });
    },
-    [showToast, t, document]
+    [ui, t, document]
  );

  const handleUnpublish = React.useCallback(
    async (ev: SyntheticEvent<>) => {
      await document.unpublish();
-      showToast(t("Document unpublished"), { type: "success" });
+      ui.showToast(t("Document unpublished"), { type: "success" });
    },
-    [showToast, t, document]
+    [ui, t, document]
  );

  const handlePrint = React.useCallback((ev: SyntheticEvent<>) => {
@@ -139,27 +132,6 @@ function DocumentMenu({
  const collection = collections.get(document.collectionId);
  const can = policies.abilities(document.id);
  const canViewHistory = can.read && !can.restore;
-  const restoreItems = React.useMemo(
-    () => [
-      ...collections.orderedData.reduce((filtered, collection) => {
-        const can = policies.abilities(collection.id);
-
-        if (can.update) {
-          filtered.push({
-            onClick: (ev) => handleRestore(ev, { collectionId: collection.id }),
-            title: (
-              <Flex align="center">
-                <CollectionIcon collection={collection} />
-                <CollectionName>{collection.name}</CollectionName>
-              </Flex>
-            ),
-          });
-        }
-        return filtered;
-      }, []),
-    ],
-    [collections.orderedData, handleRestore, policies]
-  );

  const stopPropagation = React.useCallback((ev: SyntheticEvent<>) => {
    ev.stopPropagation();
@@ -204,14 +176,14 @@ function DocumentMenu({
        );
        history.push(importedDocument.url);
      } catch (err) {
-        showToast(err.message, {
+        ui.showToast(err.message, {
          type: "error",
        });

        throw err;
      }
    },
-    [history, showToast, collection, documents, document.id]
+    [history, ui, collection, documents, document.id]
  );

  return (
@@ -246,13 +218,17 @@ function DocumentMenu({
          items={[
            {
              title: t("Restore"),
-              visible: (!!collection && can.restore) || can.unarchive,
+              visible: !!can.unarchive,
              onClick: handleRestore,
            },
            {
              title: t("Restore"),
-              visible:
-                !collection && !!can.restore && restoreItems.length !== 0,
+              visible: !!(collection && can.restore),
+              onClick: handleRestore,
+            },
+            {
+              title: t("Restore"),
+              visible: !collection && !!can.restore,
              style: {
                left: -170,
                position: "relative",
@@ -264,7 +240,21 @@ function DocumentMenu({
                  type: "heading",
                  title: t("Choose a collection"),
                },
-                ...restoreItems,
+                ...collections.orderedData.map((collection) => {
+                  const can = policies.abilities(collection.id);
+
+                  return {
+                    title: (
+                      <Flex align="center">
+                        <CollectionIcon collection={collection} />
+                        <CollectionName>{collection.name}</CollectionName>
+                      </Flex>
+                    ),
+                    onClick: (ev) =>
+                      handleRestore(ev, { collectionId: collection.id }),
+                    disabled: !can.update,
+                  };
+                }),
              ],
            },
            {
@@ -342,11 +332,6 @@ function DocumentMenu({
              onClick: () => setShowDeleteModal(true),
              visible: !!can.delete,
            },
-            {
-              title: `${t("Permanently delete")}…`,
-              onClick: () => setShowPermanentDeleteModal(true),
-              visible: can.permanentDelete,
-            },
            {
              title: `${t("Move")}…`,
              onClick: () => setShowMoveModal(true),
@@ -377,60 +362,40 @@ function DocumentMenu({
      </ContextMenu>
      {renderModals && (
        <>
-          {can.move && (
-            <Modal
-              title={t("Move {{ documentName }}", {
-                documentName: document.noun,
-              })}
+          <Modal
+            title={t("Move {{ documentName }}", {
+              documentName: document.noun,
+            })}
+            onRequestClose={() => setShowMoveModal(false)}
+            isOpen={showMoveModal}
+          >
+            <DocumentMove
+              document={document}
              onRequestClose={() => setShowMoveModal(false)}
-              isOpen={showMoveModal}
-            >
-              <DocumentMove
-                document={document}
-                onRequestClose={() => setShowMoveModal(false)}
-              />
-            </Modal>
-          )}
-          {can.delete && (
-            <Modal
-              title={t("Delete {{ documentName }}", {
-                documentName: document.noun,
-              })}
-              onRequestClose={() => setShowDeleteModal(false)}
-              isOpen={showDeleteModal}
-            >
-              <DocumentDelete
-                document={document}
-                onSubmit={() => setShowDeleteModal(false)}
-              />
-            </Modal>
-          )}
-          {can.permanentDelete && (
-            <Modal
-              title={t("Permanently delete {{ documentName }}", {
-                documentName: document.noun,
-              })}
-              onRequestClose={() => setShowPermanentDeleteModal(false)}
-              isOpen={showPermanentDeleteModal}
-            >
-              <DocumentPermanentDelete
-                document={document}
-                onSubmit={() => setShowPermanentDeleteModal(false)}
-              />
-            </Modal>
-          )}
-          {can.update && (
-            <Modal
-              title={t("Create template")}
-              onRequestClose={() => setShowTemplateModal(false)}
-              isOpen={showTemplateModal}
-            >
-              <DocumentTemplatize
-                document={document}
-                onSubmit={() => setShowTemplateModal(false)}
-              />
-            </Modal>
-          )}
+            />
+          </Modal>
+          <Modal
+            title={t("Delete {{ documentName }}", {
+              documentName: document.noun,
+            })}
+            onRequestClose={() => setShowDeleteModal(false)}
+            isOpen={showDeleteModal}
+          >
+            <DocumentDelete
+              document={document}
+              onSubmit={() => setShowDeleteModal(false)}
+            />
+          </Modal>
+          <Modal
+            title={t("Create template")}
+            onRequestClose={() => setShowTemplateModal(false)}
+            isOpen={showTemplateModal}
+          >
+            <DocumentTemplatize
+              document={document}
+              onSubmit={() => setShowTemplateModal(false)}
+            />
+          </Modal>
        </>
      )}
    </>
@@ -21,36 +21,20 @@ function NewDocumentMenu() {
  const { t } = useTranslation();
  const team = useCurrentTeam();
  const { collections, policies } = useStores();
+  const singleCollection = collections.orderedData.length === 1;
  const can = policies.abilities(team.id);

-  const items = React.useMemo(
-    () =>
-      collections.orderedData.reduce((filtered, collection) => {
-        const can = policies.abilities(collection.id);
-
-        if (can.update) {
-          filtered.push({
-            to: newDocumentUrl(collection.id),
-            title: (
-              <Flex align="center">
-                <CollectionIcon collection={collection} />
-                <CollectionName>{collection.name}</CollectionName>
-              </Flex>
-            ),
-          });
-        }
-        return filtered;
-      }, []),
-    [collections.orderedData, policies]
-  );
-
-  if (!can.createDocument || items.length === 0) {
-    return null;
+  if (!can.createDocument) {
+    return;
  }

-  if (items.length === 1) {
+  if (singleCollection) {
    return (
-      <Button as={Link} to={items[0].to} icon={<PlusIcon />}>
+      <Button
+        as={Link}
+        to={newDocumentUrl(collections.orderedData[0].id)}
+        icon={<PlusIcon />}
+      >
        {t("New doc")}
      </Button>
    );
@@ -67,7 +51,19 @@ function NewDocumentMenu() {
      </MenuButton>
      <ContextMenu {...menu} aria-label={t("New document")}>
        <Header>{t("Choose a collection")}</Header>
-        <Template {...menu} items={items} />
+        <Template
+          {...menu}
+          items={collections.orderedData.map((collection) => ({
+            to: newDocumentUrl(collection.id),
+            disabled: !policies.abilities(collection.id).update,
+            title: (
+              <Flex align="center">
+                <CollectionIcon collection={collection} />
+                <CollectionName>{collection.name}</CollectionName>
+              </Flex>
+            ),
+          }))}
+        />
      </ContextMenu>
    </>
  );
@@ -22,28 +22,8 @@ function NewTemplateMenu() {
  const { collections, policies } = useStores();
  const can = policies.abilities(team.id);

-  const items = React.useMemo(
-    () =>
-      collections.orderedData.reduce((filtered, collection) => {
-        const can = policies.abilities(collection.id);
-        if (can.update) {
-          filtered.push({
-            to: newDocumentUrl(collection.id, { template: true }),
-            title: (
-              <Flex align="center">
-                <CollectionIcon collection={collection} />
-                <CollectionName>{collection.name}</CollectionName>
-              </Flex>
-            ),
-          });
-        }
-        return filtered;
-      }, []),
-    [collections.orderedData, policies]
-  );
-
-  if (!can.createDocument || items.length === 0) {
-    return null;
+  if (!can.createDocument) {
+    return;
  }

  return (
@@ -57,7 +37,21 @@ function NewTemplateMenu() {
      </MenuButton>
      <ContextMenu aria-label={t("New template")} {...menu}>
        <Header>{t("Choose a collection")}</Header>
-        <Template {...menu} items={items} />
+        <Template
+          {...menu}
+          items={collections.orderedData.map((collection) => ({
+            to: newDocumentUrl(collection.id, {
+              template: true,
+            }),
+            disabled: !policies.abilities(collection.id).update,
+            title: (
+              <Flex align="center">
+                <CollectionIcon collection={collection} />
+                <CollectionName>{collection.name}</CollectionName>
+              </Flex>
+            ),
+          }))}
+        />
      </ContextMenu>
    </>
  );
@@ -5,22 +5,24 @@ import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
 import { useMenuState } from "reakit/Menu";
 import Document from "models/Document";
+import Revision from "models/Revision";
 import ContextMenu from "components/ContextMenu";
 import MenuItem from "components/ContextMenu/MenuItem";
 import OverflowMenuButton from "components/ContextMenu/OverflowMenuButton";
 import Separator from "components/ContextMenu/Separator";
 import CopyToClipboard from "components/CopyToClipboard";
-import useToasts from "hooks/useToasts";
+import useStores from "hooks/useStores";
 import { documentHistoryUrl } from "utils/routeHelpers";

 type Props = {|
  document: Document,
-  revisionId: string,
+  revision: Revision,
+  iconColor?: string,
  className?: string,
 |};

-function RevisionMenu({ document, revisionId, className }: Props) {
-  const { showToast } = useToasts();
+function RevisionMenu({ document, revision, className, iconColor }: Props) {
+  const { ui } = useStores();
  const menu = useMenuState({ modal: true });
  const { t } = useTranslation();
  const history = useHistory();
@@ -28,27 +30,27 @@ function RevisionMenu({ document, revisionId, className }: Props) {
  const handleRestore = React.useCallback(
    async (ev: SyntheticEvent<>) => {
      ev.preventDefault();
-      await document.restore({ revisionId });
-      showToast(t("Document restored"), { type: "success" });
+      await document.restore({ revisionId: revision.id });
+      ui.showToast(t("Document restored"), { type: "success" });
      history.push(document.url);
    },
-    [history, showToast, t, document, revisionId]
+    [history, ui, t, document, revision]
  );

  const handleCopy = React.useCallback(() => {
-    showToast(t("Link copied"), { type: "info" });
-  }, [showToast, t]);
+    ui.showToast(t("Link copied"), { type: "info" });
+  }, [ui, t]);

  const url = `${window.location.origin}${documentHistoryUrl(
    document,
-    revisionId
+    revision.id
  )}`;

  return (
    <>
      <OverflowMenuButton
        className={className}
-        iconColor="currentColor"
+        iconColor={iconColor}
        aria-label={t("Show menu")}
        {...menu}
      />
@@ -10,7 +10,6 @@ import MenuItem from "components/ContextMenu/MenuItem";
 import OverflowMenuButton from "components/ContextMenu/OverflowMenuButton";
 import CopyToClipboard from "components/CopyToClipboard";
 import useStores from "hooks/useStores";
-import useToasts from "hooks/useToasts";

 type Props = {
  share: Share,
@@ -18,8 +17,7 @@ type Props = {

 function ShareMenu({ share }: Props) {
  const menu = useMenuState({ modal: true });
-  const { shares, policies } = useStores();
-  const { showToast } = useToasts();
+  const { ui, shares, policies } = useStores();
  const { t } = useTranslation();
  const history = useHistory();
  const can = policies.abilities(share.id);
@@ -38,17 +36,17 @@ function ShareMenu({ share }: Props) {

      try {
        await shares.revoke(share);
-        showToast(t("Share link revoked"), { type: "info" });
+        ui.showToast(t("Share link revoked"), { type: "info" });
      } catch (err) {
-        showToast(err.message, { type: "error" });
+        ui.showToast(err.message, { type: "error" });
      }
    },
-    [t, shares, share, showToast]
+    [t, shares, share, ui]
  );

  const handleCopy = React.useCallback(() => {
-    showToast(t("Share link copied"), { type: "info" });
-  }, [t, showToast]);
+    ui.showToast(t("Share link copied"), { type: "info" });
+  }, [t, ui]);

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

 type Props = {|
@@ -20,36 +19,12 @@ function TemplatesMenu({ document }: Props) {
  const menu = useMenuState({ modal: true });
  const { documents } = useStores();
  const { t } = useTranslation();
-  const templates = documents.templates;
+  const templates = documents.templatesInCollection(document.collectionId);

  if (!templates.length) {
    return null;
  }

-  const templatesInCollection = templates.filter(
-    (t) => t.collectionId === document.collectionId
-  );
-  const otherTemplates = templates.filter(
-    (t) => t.collectionId !== document.collectionId
-  );
-
-  const renderTemplate = (template) => (
-    <MenuItem
-      key={template.id}
-      onClick={() => document.updateFromTemplate(template)}
-      {...menu}
-    >
-      <DocumentIcon />
-      <TemplateItem>
-        <strong>{template.titleWithDefault}</strong>
-        <br />
-        <Author>
-          {t("By {{ author }}", { author: template.createdBy.name })}
-        </Author>
-      </TemplateItem>
-    </MenuItem>
-  );
-
  return (
    <>
      <MenuButton {...menu}>
@@ -60,20 +35,26 @@ function TemplatesMenu({ document }: Props) {
        )}
      </MenuButton>
      <ContextMenu {...menu} aria-label={t("Templates")}>
-        {templatesInCollection.map(renderTemplate)}
-        {otherTemplates.length && templatesInCollection.length ? (
-          <Separator />
-        ) : undefined}
-        {otherTemplates.map(renderTemplate)}
+        {templates.map((template) => (
+          <MenuItem
+            key={template.id}
+            onClick={() => document.updateFromTemplate(template)}
+          >
+            <DocumentIcon />
+            <div>
+              <strong>{template.titleWithDefault}</strong>
+              <br />
+              <Author>
+                {t("By {{ author }}", { author: template.createdBy.name })}
+              </Author>
+            </div>
+          </MenuItem>
+        ))}
      </ContextMenu>
    </>
  );
 }

-const TemplateItem = styled.div`
-  text-align: left;
-`;
-
 const Author = styled.div`
  font-size: 13px;
 `;
@@ -24,7 +24,6 @@ export default class Collection extends BaseModel {
  deletedAt: ?string;
  sort: { field: string, direction: "asc" | "desc" };
  url: string;
-  urlId: string;

  @computed
  get isEmpty(): boolean {
@@ -1,7 +1,7 @@
 // @flow
-import { addDays, differenceInDays } from "date-fns";
+import addDays from "date-fns/add_days";
+import differenceInDays from "date-fns/difference_in_days";
 import invariant from "invariant";
-import { floor } from "lodash";
 import { action, computed, observable, set } from "mobx";
 import parseTitle from "shared/utils/parseTitle";
 import unescape from "shared/utils/unescape";
@@ -44,7 +44,6 @@ export default class Document extends BaseModel {
  deletedAt: ?string;
  url: string;
  urlId: string;
-  tasks: { completed: number, total: number };
  revision: number;

  constructor(fields: Object, store: DocumentsStore) {
@@ -60,26 +59,6 @@ export default class Document extends BaseModel {
    return emoji;
  }

-  /**
-   * Best-guess the text direction of the document based on the language the
-   * title is written in. Note: wrapping as a computed getter means that it will
-   * only be called directly when the title changes.
-   */
-  @computed
-  get dir(): "rtl" | "ltr" {
-    const element = document.createElement("p");
-    element.innerHTML = this.title;
-    element.style.visibility = "hidden";
-    element.dir = "auto";
-
-    // element must appear in body for direction to be computed
-    document.body?.appendChild(element);
-
-    const direction = window.getComputedStyle(element).direction;
-    document.body?.removeChild(element);
-    return direction;
-  }
-
  @computed
  get noun(): string {
    return this.template ? "template" : "document";
@@ -153,16 +132,8 @@ export default class Document extends BaseModel {
  }

  @computed
-  get isTasks(): boolean {
-    return !!this.tasks.total;
-  }
-
-  @computed
-  get tasksPercentage(): number {
-    if (!this.isTasks) {
-      return 0;
-    }
-    return floor((this.tasks.completed / this.tasks.total) * 100);
+  get placeholder(): ?string {
+    return this.isTemplate ? "Start your template…" : "Start with a title…";
  }

  @action
@@ -261,27 +232,6 @@ export default class Document extends BaseModel {
    this.injectTemplate = true;
  };

-  @action
-  update = async (options: SaveOptions & { title: string }) => {
-    if (this.isSaving) return this;
-    this.isSaving = true;
-
-    try {
-      if (options.lastRevision) {
-        return await this.store.update({
-          id: this.id,
-          title: this.title,
-          lastRevision: options.lastRevision,
-          ...options,
-        });
-      }
-
-      throw new Error("Attempting to update without a lastRevision");
-    } finally {
-      this.isSaving = false;
-    }
-  };
-
  @action
  save = async (options: SaveOptions = {}) => {
    if (this.isSaving) return this;
@@ -20,6 +20,20 @@ class Event extends BaseModel {
    published: boolean,
    templateId: string,
  };
+
+  get model() {
+    return this.name.split(".")[0];
+  }
+
+  get verb() {
+    return this.name.split(".")[1];
+  }
+
+  get verbPastTense() {
+    const v = this.verb;
+    if (v.endsWith("e")) return `${v}d`;
+    return `${v}ed`;
+  }
 }

 export default Event;
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Tom Moor	84b5978ba1	wip	2021-06-09 08:59:27 -07:00
Tom Moor	33c468d2be	fix: Allow Dropbox to only show when APP_KEY is present fix: Add correct icon	2021-06-08 21:47:01 -07:00
Tom Moor	45f1606fda	wip	2021-06-07 00:19:04 -07:00