More email styling

https://github.com/outline/outline/pull/2283\#discussion_r665301770

.babelrc

@@ -6,7 +6,7 @@
       "@babel/preset-env",
       {
         "corejs": {
-          "version": "2",
+          "version": "3",
           "proposals": true
         },
         "useBuiltIns": "usage"

.env.sample

@@ -8,18 +8,20 @@
 
 # –––––––––––––––– REQUIRED ––––––––––––––––
 
-# Generate a unique random key, you can use `openssl rand -hex 32` in terminal
-# DO NOT LEAVE UNSET
+# Generate a hex-encoded 32-byte random key. You should use `openssl rand -hex 32`
+# in your terminal to generate a random value.
 SECRET_KEY=generate_a_new_key
 
-# Generate a unique random key, you can use `openssl rand -hex 32` in terminal
-# DO NOT LEAVE UNSET
+# Generate a unique random key. The format is not important but you could still use 
+# `openssl rand -hex 32` in your terminal to produce this.
 UTILS_SECRET=generate_a_new_key
 
 # For production point these at your databases, in development the default
 # should work out of the box.
 DATABASE_URL=postgres://user:pass@localhost:5532/outline
 DATABASE_URL_TEST=postgres://user:pass@localhost:5532/outline-test
+# Uncomment this to disable SSL for connecting to Postgres
+# PGSSLMODE=disable
 REDIS_URL=redis://localhost:6479
 
 # URL should point to the fully qualified, publicly accessible URL. If using a
@@ -27,8 +29,29 @@ REDIS_URL=redis://localhost:6479
 URL=http://localhost:3000
 PORT=3000
 
-# Third party signin credentials, at least one of EITHER Google OR Slack is
-# required for a working installation or you'll have no sign-in options.
+# To support uploading of images for avatars and document attachments an
+# s3-compatible storage must be provided. AWS S3 is recommended for redundency
+# however if you want to keep all file storage local an alternative such as 
+# minio (https://github.com/minio/minio) can be used.
+
+# A more detailed guide on setting up S3 is available here:
+# => https://wiki.generaloutline.com/share/125de1cc-9ff6-424b-8415-0d58c809a40f
+#
+AWS_ACCESS_KEY_ID=get_a_key_from_aws
+AWS_SECRET_ACCESS_KEY=get_the_secret_of_above_key
+AWS_REGION=xx-xxxx-x
+AWS_S3_UPLOAD_BUCKET_URL=http://s3:4569
+AWS_S3_UPLOAD_BUCKET_NAME=bucket_name_here
+AWS_S3_UPLOAD_MAX_SIZE=26214400
+AWS_S3_FORCE_PATH_STYLE=true
+AWS_S3_ACL=private
+
+
+# –––––––––––––– AUTHENTICATION ––––––––––––––
+
+# Third party signin credentials, at least ONE OF EITHER Google, Slack,
+# or Microsoft is required for a working installation or you'll have no sign-in
+# options.
 
 # To configure Slack auth, you'll need to create an Application at
 # => https://api.slack.com/apps
@@ -46,6 +69,12 @@ SLACK_SECRET=get_the_secret_of_above_key
 GOOGLE_CLIENT_ID=
 GOOGLE_CLIENT_SECRET=
 
+# To configure Microsoft/Azure auth, you'll need to create an OAuth Client. See 
+# the guide for details on setting up your Azure App:
+# => https://wiki.generaloutline.com/share/dfa77e56-d4d2-4b51-8ff8-84ea6608faa4
+AZURE_CLIENT_ID= 
+AZURE_CLIENT_SECRET=
+AZURE_RESOURCE_APP_ID=
 
 
 
@@ -65,13 +94,17 @@ FORCE_HTTPS=true
 # the maintainers
 ENABLE_UPDATES=true
 
+# Override the maxium size of document imports, could be required if you have
+# especially large Word documents with embedded imagery
+MAXIMUM_IMPORT_SIZE=5120000
+
 # You may enable or disable debugging categories to increase the noisiness of
 # logs. The default is a good balance
-DEBUG=cache,presenters,events,emails,mailer,utils,multiplayer,server,services
+DEBUG=cache,presenters,events,emails,mailer,utils,http,server,services
 
 # Comma separated list of domains to be allowed to signin to the wiki. If not
 # set, all domains are allowed by default when using Google OAuth to signin
-GOOGLE_ALLOWED_DOMAINS=
+ALLOWED_DOMAINS=
 
 # For a complete Slack integration with search and posting to channels the 
 # following configs are also needed, some more details
@@ -87,23 +120,6 @@ GOOGLE_ANALYTICS_ID=
 # Optionally enable Sentry (sentry.io) to track errors and performance
 SENTRY_DSN=
 
-# To support uploading of images for avatars and document attachments an
-# s3-compatible storage must be provided. AWS S3 is recommended for redundency
-# however if you want to keep all file storage local an alternative such as 
-# minio (https://github.com/minio/minio) can be used.
-
-# A more detailed guide on setting up S3 is available here:
-# => https://wiki.generaloutline.com/share/125de1cc-9ff6-424b-8415-0d58c809a40f
-#
-AWS_ACCESS_KEY_ID=get_a_key_from_aws
-AWS_SECRET_ACCESS_KEY=get_the_secret_of_above_key
-AWS_REGION=xx-xxxx-x
-AWS_S3_UPLOAD_BUCKET_URL=http://s3:4569
-AWS_S3_UPLOAD_BUCKET_NAME=bucket_name_here
-AWS_S3_UPLOAD_MAX_SIZE=26214400
-AWS_S3_FORCE_PATH_STYLE=true
-AWS_S3_ACL=private
-
 # To support sending outgoing transactional emails such as "document updated" or 
 # "you've been invited" you'll need to provide authentication for an SMTP server
 SMTP_HOST=
@@ -112,10 +128,12 @@ 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
 
 # The default interface language. See translate.getoutline.com for a list of 
 # available language codes and their rough percentage translated.
-DEFAULT_LANGUAGE=en_US
+DEFAULT_LANGUAGE=en_US

.github/FUNDING.yml

@@ -0,0 +1,3 @@
+# These are supported funding model platforms
+
+github: [outline]

.github/stale.yml

@@ -1,12 +1,13 @@
 # Number of days of inactivity before an issue becomes stale
-daysUntilStale: 60
+daysUntilStale: 90
 
 # Number of days of inactivity before a stale issue is closed
-daysUntilClose: 7
+daysUntilClose: 14
 
 # Issues with these labels will never be considered stale
 exemptLabels:
   - security
+  - pinned
 
 # Label to use when marking an issue as stale
 staleLabel: stale

.gitignore

@@ -1,7 +1,6 @@
 dist
 build
 node_modules/*
-server/scripts
 .env
 .log
 npm-debug.log

ARCHITECTURE.md

@@ -34,7 +34,8 @@ Interested in more documentation on the API routes? Check out the [API documenta
 server
 ├── api               - All API routes are contained within here
 │   └── middlewares   - Koa middlewares specific to the API
-├── auth              - OAuth routes for Slack and Google, plus email authentication routes
+├── auth              - Authentication logic
+│   └── providers     - Authentication providers export passport.js strategies and config
 ├── commands          - We are gradually moving to the command pattern for new write logic
 ├── config            - Database configuration
 ├── emails            - Transactional email templates

LICENSE

@@ -3,7 +3,7 @@ Business Source License 1.1
 Parameters
 
 Licensor:             General Outline, Inc.
-Licensed Work:        Outline 0.51.0
+Licensed Work:        Outline 0.55.0
                       The Licensed Work is (c) 2020 General Outline, Inc.
 Additional Use Grant: You may make use of the Licensed Work, provided that
                       you may not use the Licensed Work for a Document
@@ -15,7 +15,7 @@ Additional Use Grant: You may make use of the Licensed Work, provided that
                       Licensed Work by creating teams and documents
                       controlled by such third parties.
 
-Change Date:          2023-12-13
+Change Date:          2024-04-22
 
 Change License:       Apache License, Version 2.0
 

README.md

@@ -6,7 +6,7 @@
 <p align="center">
   <i>An open, extensible, wiki for your team built using React and Node.js.<br/>Try out Outline using our hosted version at <a href="https://www.getoutline.com">www.getoutline.com</a>.</i>
   <br/>
-  <img src="https://www.getoutline.com/images/screenshot@2x.png" alt="Outline" width="800" />
+  <img width="1640" alt="screenshot" src="https://user-images.githubusercontent.com/380914/110356468-26374600-7fef-11eb-9f6a-f2cc2c8c6590.png">
 </p>
 <p align="center">
   <a href="https://circleci.com/gh/outline/outline" rel="nofollow"><img src="https://circleci.com/gh/outline/outline.svg?style=shield&amp;circle-token=c0c4c2f39990e277385d5c1ae96169c409eb887a"></a>
@@ -44,10 +44,10 @@ For a manual self-hosted production installation these are the recommended steps
 1. Using the [.env.sample](.env.sample) as a reference, set the required variables in your production environment. You can export the environment variables directly, or create a `.env` file and pass it to the docker image like so:
 
    `docker run --env-file=.env outlinewiki/outline`
-1. Setup the database with `yarn sequelize:migrate`. Production assumes an SSL connection to the database by default, if
-Postgres is on the same machine and is not SSL you can migrate with `yarn sequelize:migrate --env=production-ssl-disabled`, for example:
+1. Setup the database with `yarn db:migrate`. Production assumes an SSL connection to the database by default, if
+Postgres is on the same machine and is not SSL you can migrate with `yarn db:migrate --env=production-ssl-disabled`, for example:
 
-   `docker run --rm outlinewiki/outline yarn sequelize:migrate`
+   `docker run --rm outlinewiki/outline yarn db:migrate`
 1. Start the container:
 
    `docker run outlinewiki/outline`
@@ -68,7 +68,7 @@ Alternatively a community member maintains a script to deploy Outline on Google
 If you're running Outline with Docker you'll need to run migrations within the docker container after updating the image. The command will be something like:
 
 ```shell
-docker run --rm outlinewiki/outline:latest yarn sequelize:migrate
+docker run --rm outlinewiki/outline:latest yarn db:migrate
 ```
 
 #### Git
@@ -85,9 +85,9 @@ yarn run upgrade
 For contributing features and fixes you can quickly get an environment running using Docker by following these steps:
 
 1. Install these dependencies if you don't already have them
-  1. [Docker for Desktop](https://www.docker.com)
-  1. [Node.js](https://nodejs.org/) (v12 LTS preferred)
-  1. [Yarn](https://yarnpkg.com)
+    1. [Docker for Desktop](https://www.docker.com)
+    1. [Node.js](https://nodejs.org/) (v12 LTS preferred)
+    1. [Yarn](https://yarnpkg.com)
 1. Clone this repo
 1. Register a Slack app at https://api.slack.com/apps
 1. Copy the file `.env.sample` to `.env`
@@ -96,7 +96,8 @@ 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. Add `http://localhost:3000/auth/slack.callback` as an Oauth redirect URL
+    1. Slack recently prevented the use of `http` protocol for localhost. For local development, you can use a tool like [ngrok](https://ngrok.com) or a package like `mkcert`. ([How to use HTTPS for local development](https://web.dev/how-to-use-local-https/))
+    1. Add `https://my_ngrok_address/auth/slack.callback` as an Oauth redirect URL
     1. Ensure that the bot token scope contains at least `users:read`
 1. Run `make up`. This will download dependencies, build and launch a development version of Outline
 
@@ -127,7 +128,7 @@ please refer to the [architecture document](ARCHITECTURE.md) first for a high le
 Outline uses [debug](https://www.npmjs.com/package/debug). To enable debugging output, the following categories are available:
 
 ```
-DEBUG=sql,cache,presenters,events,logistics,emails,mailer
+DEBUG=sql,cache,presenters,events,importer,exporter,emails,mailer
 ```
 
 ## Tests

app.json

@@ -30,6 +30,10 @@
     "postdeploy": "yarn sequelize db:migrate"
   },
   "env": {
+    "NODE_ENV": {
+      "value": "production",
+      "required": true
+    },
     "SECRET_KEY": {
       "description": "A secret key",
       "generator": "secret",
@@ -51,7 +55,7 @@
       "description": "",
       "required": false
     },
-    "GOOGLE_ALLOWED_DOMAINS": {
+    "ALLOWED_DOMAINS": {
       "description": "Comma separated list of domains to be allowed (optional). If not set, all Google apps domains are allowed by default",
       "required": false
     },
@@ -131,6 +135,15 @@
       "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

app/.jestconfig.json

@@ -0,0 +1,30 @@
+{
+  "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"
+  ]
+}

app/components/Actions.js

@@ -33,7 +33,7 @@ const Actions = styled(Flex)`
   background: ${(props) => props.theme.background};
   transition: ${(props) => props.theme.backgroundTransition};
   padding: 12px;
-  -webkit-backdrop-filter: blur(20px);
+  backdrop-filter: blur(20px);
 
   @media print {
     display: none;

app/components/Analytics.js

@@ -9,7 +9,9 @@ type Props = {
 
 export default class Analytics extends React.Component<Props> {
   componentDidMount() {
-    if (!env.GOOGLE_ANALYTICS_ID) return;
+    if (!env.GOOGLE_ANALYTICS_ID) {
+      return null;
+    }
 
     // standard Google Analytics script
     window.ga =
@@ -29,6 +31,11 @@ export default class Analytics extends React.Component<Props> {
     script.src = "https://www.google-analytics.com/analytics.js";
     script.async = true;
 
+    // Track PWA install event
+    window.addEventListener("appinstalled", () => {
+      ga("send", "event", "pwa", "install");
+    });
+
     if (document.body) {
       document.body.appendChild(script);
     }

app/components/AuthLogo/MicrosoftLogo.js

@@ -0,0 +1,44 @@
+// @flow
+import * as React from "react";
+
+type Props = {
+  size?: number,
+  fill?: string,
+  className?: string,
+};
+
+function MicrosoftLogo({ size = 34, fill = "#FFF", className }: Props) {
+  return (
+    <svg
+      fill={fill}
+      width={size}
+      height={size}
+      viewBox="0 0 34 34"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M18.0002 1H33.9998C33.9998 5.8172 34.0007 10.6344 33.9988 15.4516C28.6666 15.4508 23.3334 15.4516 18.0012 15.4516C17.9993 10.6344 18.0002 5.8172 18.0002 1Z"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M18.0009 17.5173C23.3333 17.5155 28.6667 17.5164 34 17.5164V33H18C18.0009 27.8388 17.9991 22.6776 18.0009 17.5173V17.5173Z"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0 1H16L15.9988 15.4516H0V1Z"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0 17.5161C5.3332 17.5179 10.6664 17.5155 15.9996 17.5179C16.0005 22.6789 15.9996 27.839 15.9996 33H0V17.5161Z"
+      />
+    </svg>
+  );
+}
+
+export default MicrosoftLogo;

app/components/AuthLogo/index.js

@@ -0,0 +1,46 @@
+// @flow
+import * as React from "react";
+import styled from "styled-components";
+import GoogleLogo from "./GoogleLogo";
+import MicrosoftLogo from "./MicrosoftLogo";
+import SlackLogo from "./SlackLogo";
+
+type Props = {|
+  providerName: string,
+  size?: number,
+|};
+
+function AuthLogo({ providerName, size = 16 }: Props) {
+  switch (providerName) {
+    case "slack":
+      return (
+        <Logo>
+          <SlackLogo size={size} />
+        </Logo>
+      );
+    case "google":
+      return (
+        <Logo>
+          <GoogleLogo size={size} />
+        </Logo>
+      );
+    case "azure":
+      return (
+        <Logo>
+          <MicrosoftLogo size={size} />
+        </Logo>
+      );
+    default:
+      return null;
+  }
+}
+
+const Logo = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+`;
+
+export default AuthLogo;

app/components/Avatar/AvatarWithPresence.js

@@ -1,5 +1,4 @@
 // @flow
-import distanceInWordsToNow from "date-fns/distance_in_words_to_now";
 import { observable } from "mobx";
 import { observer } from "mobx-react";
 import { EditIcon } from "outline-icons";
@@ -16,7 +15,7 @@ type Props = {
   isPresent: boolean,
   isEditing: boolean,
   isCurrentUser: boolean,
-  lastViewedAt: string,
+  profileOnClick: boolean,
   t: TFunction,
 };
 
@@ -33,22 +32,13 @@ class AvatarWithPresence extends React.Component<Props> {
   };
 
   render() {
-    const {
-      user,
-      lastViewedAt,
-      isPresent,
-      isEditing,
-      isCurrentUser,
-      t,
-    } = this.props;
+    const { user, isPresent, isEditing, isCurrentUser, t } = this.props;
 
     const action = isPresent
       ? isEditing
         ? t("currently editing")
         : t("currently viewing")
-      : t("viewed {{ timeAgo }} ago", {
-          timeAgo: distanceInWordsToNow(new Date(lastViewedAt)),
-        });
+      : t("previously edited");
 
     return (
       <>
@@ -56,8 +46,12 @@ class AvatarWithPresence extends React.Component<Props> {
           tooltip={
             <Centered>
               <strong>{user.name}</strong> {isCurrentUser && `(${t("You")})`}
-              <br />
-              {action}
+              {action && (
+                <>
+                  <br />
+                  {action}
+                </>
+              )}
             </Centered>
           }
           placement="bottom"
@@ -65,7 +59,11 @@ class AvatarWithPresence extends React.Component<Props> {
           <AvatarWrapper isPresent={isPresent}>
             <Avatar
               src={user.avatarUrl}
-              onClick={this.handleOpenProfile}
+              onClick={
+                this.props.profileOnClick === false
+                  ? undefined
+                  : this.handleOpenProfile
+              }
               size={32}
               icon={isEditing ? <EditIcon size={16} color="#FFF" /> : undefined}
             />

app/components/Badge.js

@@ -3,15 +3,17 @@ import styled from "styled-components";
 
 const Badge = styled.span`
   margin-left: 10px;
-  padding: 2px 6px 3px;
+  padding: 1px 5px 2px;
   background-color: ${({ yellow, primary, theme }) =>
-    yellow ? theme.yellow : primary ? theme.primary : theme.textTertiary};
+    yellow ? theme.yellow : primary ? theme.primary : "transparent"};
   color: ${({ primary, yellow, theme }) =>
-    primary ? theme.white : yellow ? theme.almostBlack : theme.background};
-  border-radius: 4px;
-  font-size: 11px;
+    primary ? theme.white : yellow ? theme.almostBlack : theme.textTertiary};
+  border: 1px solid
+    ${({ primary, yellow, theme }) =>
+      primary || yellow ? "transparent" : theme.textTertiary};
+  border-radius: 8px;
+  font-size: 12px;
   font-weight: 500;
-  text-transform: uppercase;
   user-select: none;
 `;
 

app/components/Breadcrumb.js

@@ -1,210 +1,87 @@
 // @flow
-import { observer } from "mobx-react";
-import {
-  ArchiveIcon,
-  EditIcon,
-  GoToIcon,
-  PadlockIcon,
-  ShapesIcon,
-  TrashIcon,
-} from "outline-icons";
+import { GoToIcon } from "outline-icons";
 import * as React from "react";
-import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
-import breakpoint from "styled-components-breakpoint";
-import Document from "models/Document";
-import CollectionIcon from "components/CollectionIcon";
 import Flex from "components/Flex";
-import useStores from "hooks/useStores";
 import BreadcrumbMenu from "menus/BreadcrumbMenu";
-import { collectionUrl } from "utils/routeHelpers";
 
-type Props = {|
-  document: Document,
-  children?: React.Node,
-  onlyText: boolean,
+type MenuItem = {|
+  icon?: React.Node,
+  title: React.Node,
+  to?: string,
 |};
 
-function Icon({ document }) {
-  const { t } = useTranslation();
+type Props = {|
+  items: MenuItem[],
+  max?: number,
+  children?: React.Node,
+  highlightFirstItem?: boolean,
+|};
 
-  if (document.isDeleted) {
-    return (
-      <>
-        <CategoryName to="/trash">
-          <TrashIcon color="currentColor" />
-          &nbsp;
-          <span>{t("Trash")}</span>
-        </CategoryName>
-        <Slash />
-      </>
-    );
-  }
-  if (document.isArchived) {
-    return (
-      <>
-        <CategoryName to="/archive">
-          <ArchiveIcon color="currentColor" />
-          &nbsp;
-          <span>{t("Archive")}</span>
-        </CategoryName>
-        <Slash />
-      </>
-    );
-  }
-  if (document.isDraft) {
-    return (
-      <>
-        <CategoryName to="/drafts">
-          <EditIcon color="currentColor" />
-          &nbsp;
-          <span>{t("Drafts")}</span>
-        </CategoryName>
-        <Slash />
-      </>
-    );
-  }
-  if (document.isTemplate) {
-    return (
-      <>
-        <CategoryName to="/templates">
-          <ShapesIcon color="currentColor" />
-          &nbsp;
-          <span>{t("Templates")}</span>
-        </CategoryName>
-        <Slash />
-      </>
-    );
-  }
-  return null;
-}
+function Breadcrumb({ items, highlightFirstItem, children, max = 2 }: Props) {
+  const totalItems = items.length;
+  let topLevelItems: MenuItem[] = [...items];
+  let overflowItems;
 
-const Breadcrumb = ({ document, children, onlyText }: Props) => {
-  const { collections } = useStores();
-  const { t } = useTranslation();
-
-  if (!collections.isLoaded) {
-    return <Wrapper />;
+  // chop middle breadcrumbs and present a "..." menu instead
+  if (totalItems > max) {
+    const halfMax = Math.floor(max / 2);
+    overflowItems = topLevelItems.splice(halfMax, totalItems - max);
+    topLevelItems.splice(halfMax, 0, {
+      title: <BreadcrumbMenu items={overflowItems} />,
+    });
   }
 
-  let collection = collections.get(document.collectionId);
-  if (!collection) {
-    collection = {
-      id: document.collectionId,
-      name: t("Deleted Collection"),
-      color: "currentColor",
-    };
-  }
-
-  const path = collection.pathToDocument
-    ? collection.pathToDocument(document.id).slice(0, -1)
-    : [];
-
-  if (onlyText === true) {
-    return (
-      <>
-        {collection.private && (
-          <>
-            <SmallPadlockIcon color="currentColor" size={16} />{" "}
-          </>
-        )}
-        {collection.name}
-        {path.map((n) => (
-          <React.Fragment key={n.id}>
-            <SmallSlash />
-            {n.title}
-          </React.Fragment>
-        ))}
-      </>
-    );
-  }
-
-  const isNestedDocument = path.length > 1;
-  const lastPath = path.length ? path[path.length - 1] : undefined;
-  const menuPath = isNestedDocument ? path.slice(0, -1) : [];
-
   return (
-    <Wrapper justify="flex-start" align="center">
-      <Icon document={document} />
-      <CollectionName to={collectionUrl(collection.id)}>
-        <CollectionIcon collection={collection} expanded />
-        &nbsp;
-        <span>{collection.name}</span>
-      </CollectionName>
-      {isNestedDocument && (
-        <>
-          <Slash /> <BreadcrumbMenu path={menuPath} />
-        </>
-      )}
-      {lastPath && (
-        <>
-          <Slash />{" "}
-          <Crumb to={lastPath.url} title={lastPath.title}>
-            {lastPath.title}
-          </Crumb>
-        </>
-      )}
+    <Flex justify="flex-start" align="center">
+      {topLevelItems.map((item, index) => (
+        <React.Fragment key={item.to || index}>
+          {item.icon}
+          {item.to ? (
+            <Item
+              to={item.to}
+              $withIcon={!!item.icon}
+              $highlight={highlightFirstItem && index === 0}
+            >
+              {item.title}
+            </Item>
+          ) : (
+            item.title
+          )}
+          {index !== topLevelItems.length - 1 || !!children ? <Slash /> : null}
+        </React.Fragment>
+      ))}
       {children}
-    </Wrapper>
+    </Flex>
   );
-};
+}
 
-export const Slash = styled(GoToIcon)`
+const Slash = styled(GoToIcon)`
   flex-shrink: 0;
   fill: ${(props) => props.theme.divider};
 `;
 
-const Wrapper = styled(Flex)`
-  display: none;
-
-  ${breakpoint("tablet")`	
-    display: flex;
-  `};
-`;
-
-const SmallPadlockIcon = styled(PadlockIcon)`
-  display: inline-block;
-  vertical-align: sub;
-`;
-
-const SmallSlash = styled(GoToIcon)`
-  width: 15px;
-  height: 10px;
-  flex-shrink: 0;
-  opacity: 0.25;
-`;
-
-const Crumb = styled(Link)`
+const Item = styled(Link)`
+  display: flex;
+  flex-shrink: 1;
+  min-width: 0;
   color: ${(props) => props.theme.text};
   font-size: 15px;
   height: 24px;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
+  font-weight: ${(props) => (props.$highlight ? "500" : "inherit")};
+  margin-left: ${(props) => (props.$withIcon ? "4px" : "0")};
+
+  svg {
+    flex-shrink: 0;
+  }
 
   &:hover {
     text-decoration: underline;
   }
 `;
 
-const CollectionName = styled(Link)`
-  display: flex;
-  flex-shrink: 1;
-  color: ${(props) => props.theme.text};
-  font-size: 15px;
-  font-weight: 500;
-  white-space: nowrap;
-  overflow: hidden;
-  min-width: 0;
-
-  svg {
-    flex-shrink: 0;
-  }
-`;
-
-const CategoryName = styled(CollectionName)`
-  flex-shrink: 0;
-`;
-
-export default observer(Breadcrumb);
+export default Breadcrumb;

app/components/Button.js

@@ -134,30 +134,32 @@ export type Props = {|
   "data-event-action"?: string,
 |};
 
-function Button({
-  type = "text",
-  icon,
-  children,
-  value,
-  disclosure,
-  innerRef,
-  neutral,
-  ...rest
-}: Props) {
-  const hasText = children !== undefined || value !== undefined;
-  const hasIcon = icon !== undefined;
+const Button = React.forwardRef<Props, HTMLButtonElement>(
+  (
+    {
+      type = "text",
+      icon,
+      children,
+      value,
+      disclosure,
+      neutral,
+      ...rest
+    }: Props,
+    innerRef
+  ) => {
+    const hasText = children !== undefined || value !== undefined;
+    const hasIcon = icon !== undefined;
 
-  return (
-    <RealButton type={type} ref={innerRef} $neutral={neutral} {...rest}>
-      <Inner hasIcon={hasIcon} hasText={hasText} disclosure={disclosure}>
-        {hasIcon && icon}
-        {hasText && <Label hasIcon={hasIcon}>{children || value}</Label>}
-        {disclosure && <ExpandedIcon />}
-      </Inner>
-    </RealButton>
-  );
-}
+    return (
+      <RealButton type={type} ref={innerRef} $neutral={neutral} {...rest}>
+        <Inner hasIcon={hasIcon} hasText={hasText} disclosure={disclosure}>
+          {hasIcon && icon}
+          {hasText && <Label hasIcon={hasIcon}>{children || value}</Label>}
+          {disclosure && <ExpandedIcon />}
+        </Inner>
+      </RealButton>
+    );
+  }
+);
 
-export default React.forwardRef<Props, typeof Button>((props, ref) => (
-  <Button {...props} innerRef={ref} />
-));
+export default Button;

app/components/CenteredContent.js

@@ -21,6 +21,10 @@ const Container = styled.div`
 const Content = styled.div`
   max-width: 46em;
   margin: 0 auto;
+
+  ${breakpoint("desktopLarge")`
+    max-width: 52em;
+  `};
 `;
 
 const CenteredContent = ({ children, ...rest }: Props) => {

app/components/Checkbox.js

@@ -6,7 +6,7 @@ import HelpText from "components/HelpText";
 
 export type Props = {|
   checked?: boolean,
-  label?: string,
+  label?: React.Node,
   labelHidden?: boolean,
   className?: string,
   name?: string,
@@ -26,6 +26,7 @@ const LabelText = styled.span`
 const Wrapper = styled.div`
   padding-bottom: 8px;
   ${(props) => (props.small ? "font-size: 14px" : "")};
+  width: 100%;
 `;
 
 const Label = styled.label`

app/components/Collaborators.js

@@ -1,79 +1,103 @@
 // @flow
-import { sortBy, keyBy } from "lodash";
-import { observer, inject } from "mobx-react";
+import { sortBy, filter, uniq } from "lodash";
+import { observer } from "mobx-react";
 import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { usePopoverState, PopoverDisclosure } from "reakit/Popover";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import { MAX_AVATAR_DISPLAY } from "shared/constants";
-import DocumentPresenceStore from "stores/DocumentPresenceStore";
-import ViewsStore from "stores/ViewsStore";
 import Document from "models/Document";
 import { AvatarWithPresence } from "components/Avatar";
+import DocumentViews from "components/DocumentViews";
 import Facepile from "components/Facepile";
+import NudeButton from "components/NudeButton";
+import Popover from "components/Popover";
+import useStores from "hooks/useStores";
 
-type Props = {
-  views: ViewsStore,
-  presence: DocumentPresenceStore,
+type Props = {|
   document: Document,
   currentUserId: string,
-};
+|};
 
-@observer
-class Collaborators extends React.Component<Props> {
-  componentDidMount() {
-    if (!this.props.document.isDeleted) {
-      this.props.views.fetchPage({ documentId: this.props.document.id });
+function Collaborators(props: Props) {
+  const { t } = useTranslation();
+  const { users, presence } = useStores();
+  const { document, currentUserId } = props;
+
+  let documentPresence = presence.get(document.id);
+  documentPresence = documentPresence
+    ? Array.from(documentPresence.values())
+    : [];
+
+  const presentIds = documentPresence.map((p) => p.userId);
+  const editingIds = documentPresence
+    .filter((p) => p.isEditing)
+    .map((p) => p.userId);
+
+  // ensure currently present via websocket are always ordered first
+  const collaborators = React.useMemo(
+    () =>
+      sortBy(
+        filter(
+          users.orderedData,
+          (user) =>
+            presentIds.includes(user.id) ||
+            document.collaboratorIds.includes(user.id)
+        ),
+        (user) => presentIds.includes(user.id)
+      ),
+    [document.collaboratorIds, users.orderedData, presentIds]
+  );
+
+  // load any users we don't know about
+  React.useEffect(() => {
+    if (users.isFetching) {
+      return;
     }
-  }
 
-  render() {
-    const { document, presence, views, currentUserId } = this.props;
-    let documentPresence = presence.get(document.id);
-    documentPresence = documentPresence
-      ? Array.from(documentPresence.values())
-      : [];
-
-    const documentViews = views.inDocument(document.id);
-
-    const presentIds = documentPresence.map((p) => p.userId);
-    const editingIds = documentPresence
-      .filter((p) => p.isEditing)
-      .map((p) => p.userId);
-
-    // ensure currently present via websocket are always ordered first
-    const mostRecentViewers = sortBy(
-      documentViews.slice(0, MAX_AVATAR_DISPLAY),
-      (view) => {
-        return presentIds.includes(view.user.id);
+    uniq([...document.collaboratorIds, ...presentIds]).forEach((userId) => {
+      if (!users.get(userId)) {
+        return users.fetch(userId);
       }
-    );
+    });
+  }, [document, users, presentIds, document.collaboratorIds]);
 
-    const viewersKeyedByUserId = keyBy(mostRecentViewers, (v) => v.user.id);
-    const overflow = documentViews.length - mostRecentViewers.length;
+  const popover = usePopoverState({
+    gutter: 0,
+    placement: "bottom-end",
+  });
 
-    return (
-      <FacepileHiddenOnMobile
-        users={mostRecentViewers.map((v) => v.user)}
-        overflow={overflow}
-        renderAvatar={(user) => {
-          const isPresent = presentIds.includes(user.id);
-          const isEditing = editingIds.includes(user.id);
-          const { lastViewedAt } = viewersKeyedByUserId[user.id];
+  return (
+    <>
+      <PopoverDisclosure {...popover}>
+        {(props) => (
+          <NudeButton width={collaborators.length * 32} height={32} {...props}>
+            <FacepileHiddenOnMobile
+              users={collaborators}
+              renderAvatar={(user) => {
+                const isPresent = presentIds.includes(user.id);
+                const isEditing = editingIds.includes(user.id);
 
-          return (
-            <AvatarWithPresence
-              key={user.id}
-              user={user}
-              lastViewedAt={lastViewedAt}
-              isPresent={isPresent}
-              isEditing={isEditing}
-              isCurrentUser={currentUserId === user.id}
+                return (
+                  <AvatarWithPresence
+                    key={user.id}
+                    user={user}
+                    isPresent={isPresent}
+                    isEditing={isEditing}
+                    isCurrentUser={currentUserId === user.id}
+                    profileOnClick={false}
+                  />
+                );
+              }}
             />
-          );
-        }}
-      />
-    );
-  }
+          </NudeButton>
+        )}
+      </PopoverDisclosure>
+      <Popover {...popover} width={300} aria-label={t("Viewers")} tabIndex={0}>
+        <DocumentViews document={document} isOpen={popover.visible} />
+      </Popover>
+    </>
+  );
 }
 
 const FacepileHiddenOnMobile = styled(Facepile)`
@@ -82,4 +106,4 @@ const FacepileHiddenOnMobile = styled(Facepile)`
   `};
 `;
 
-export default inject("views", "presence")(Collaborators);
+export default observer(Collaborators);

app/components/CollectionDescription.js

@@ -89,9 +89,8 @@ function CollectionDescription({ collection }: Props) {
           {collection.hasDescription || isEditing || isDirty ? (
             <React.Suspense fallback={<Placeholder>Loading…</Placeholder>}>
               <Editor
-                id={collection.id}
                 key={key}
-                defaultValue={collection.description}
+                defaultValue={collection.description || ""}
                 onChange={handleChange}
                 placeholder={placeholder}
                 readOnly={!isEditing}
@@ -151,7 +150,7 @@ const MaxHeight = styled.div`
   position: relative;
   max-height: 25vh;
   overflow: hidden;
-  margin: -8px;
+  margin: -12px -8px -8px;
   padding: 8px;
 
   &[data-editing="true"],

app/components/CollectionIcon.js

@@ -1,20 +1,21 @@
 // @flow
-import { inject, observer } from "mobx-react";
-import { PrivateCollectionIcon, CollectionIcon } from "outline-icons";
+import { observer } from "mobx-react";
+import { CollectionIcon } from "outline-icons";
 import { getLuminance } from "polished";
 import * as React from "react";
-import UiStore from "stores/UiStore";
 import Collection from "models/Collection";
 import { icons } from "components/IconPicker";
+import useStores from "hooks/useStores";
 
 type Props = {
   collection: Collection,
   expanded?: boolean,
   size?: number,
-  ui: UiStore,
 };
 
-function ResolvedCollectionIcon({ collection, expanded, size, ui }: Props) {
+function ResolvedCollectionIcon({ collection, expanded, size }: Props) {
+  const { ui } = useStores();
+
   // If the chosen icon color is very dark then we invert it in dark mode
   // otherwise it will be impossible to see against the dark background.
   const color =
@@ -33,13 +34,7 @@ function ResolvedCollectionIcon({ collection, expanded, size, ui }: Props) {
     }
   }
 
-  if (collection.private) {
-    return (
-      <PrivateCollectionIcon color={color} expanded={expanded} size={size} />
-    );
-  }
-
   return <CollectionIcon color={color} expanded={expanded} size={size} />;
 }
 
-export default inject("ui")(observer(ResolvedCollectionIcon));
+export default observer(ResolvedCollectionIcon);

app/components/ContextMenu/MenuItem.js

@@ -3,6 +3,7 @@ import { CheckmarkIcon } from "outline-icons";
 import * as React from "react";
 import { MenuItem as BaseMenuItem } from "reakit/Menu";
 import styled from "styled-components";
+import breakpoint from "styled-components-breakpoint";
 
 type Props = {|
   onClick?: (SyntheticEvent<>) => void | Promise<void>,
@@ -13,6 +14,7 @@ type Props = {|
   href?: string,
   target?: "_blank",
   as?: string | React.ComponentType<*>,
+  hide?: () => void,
 |};
 
 const MenuItem = ({
@@ -21,19 +23,50 @@ const MenuItem = ({
   selected,
   disabled,
   as,
+  hide,
   ...rest
 }: Props) => {
+  const handleClick = React.useCallback(
+    (ev) => {
+      if (onClick) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        onClick(ev);
+      }
+
+      if (hide) {
+        hide();
+      }
+    },
+    [onClick, hide]
+  );
+
+  // Preventing default mousedown otherwise menu items do not work in Firefox,
+  // which triggers the hideOnClickOutside handler first via mousedown – hiding
+  // and un-rendering the menu contents.
+  const handleMouseDown = React.useCallback((ev) => {
+    ev.preventDefault();
+    ev.stopPropagation();
+  }, []);
+
   return (
     <BaseMenuItem
       onClick={disabled ? undefined : onClick}
       disabled={disabled}
+      hide={hide}
       {...rest}
     >
       {(props) => (
-        <MenuAnchor as={onClick ? "button" : as} {...props}>
+        <MenuAnchor
+          {...props}
+          $toggleable={selected !== undefined}
+          as={onClick ? "button" : as}
+          onClick={handleClick}
+          onMouseDown={handleMouseDown}
+        >
           {selected !== undefined && (
             <>
-              {selected ? <CheckmarkIcon /> : <Spacer />}
+              {selected ? <CheckmarkIcon color="currentColor" /> : <Spacer />}
               &nbsp;
             </>
           )}
@@ -44,16 +77,17 @@ const MenuItem = ({
   );
 };
 
-const Spacer = styled.div`
+const Spacer = styled.svg`
   width: 24px;
   height: 24px;
+  flex-shrink: 0;
 `;
 
 export const MenuAnchor = styled.a`
   display: flex;
   margin: 0;
   border: 0;
-  padding: 6px 12px;
+  padding: 12px;
   width: 100%;
   min-height: 32px;
   background: none;
@@ -61,12 +95,12 @@ export const MenuAnchor = styled.a`
     props.disabled ? props.theme.textTertiary : props.theme.textSecondary};
   justify-content: left;
   align-items: center;
-  font-size: 15px;
+  font-size: 16px;
   cursor: default;
   user-select: none;
 
   svg:not(:last-child) {
-    margin-right: 8px;
+    margin-right: 4px;
   }
 
   svg {
@@ -79,7 +113,8 @@ export const MenuAnchor = styled.a`
       ? "pointer-events: none;"
       : `
 
-  &:hover,
+  &:hover,  
+  &:focus,
   &.focus-visible {
     color: ${props.theme.white};
     background: ${props.theme.primary};
@@ -90,11 +125,11 @@ export const MenuAnchor = styled.a`
       fill: ${props.theme.white};
     }
   }
+  `};
 
-  &:focus {
-    color: ${props.theme.white};
-    background: ${props.theme.primary};
-  }
+  ${breakpoint("tablet")`
+    padding: ${(props) => (props.$toggleable ? "4px 12px" : "6px 12px")};
+    font-size: 15px;
   `};
 `;
 

app/components/ContextMenu/Template.js

@@ -59,7 +59,8 @@ type Props = {|
 
 const Disclosure = styled(ExpandedIcon)`
   transform: rotate(270deg);
-  justify-self: flex-end;
+  position: absolute;
+  right: 8px;
 `;
 
 const Submenu = React.forwardRef(({ templateItems, title, ...rest }, ref) => {
@@ -82,7 +83,7 @@ const Submenu = React.forwardRef(({ templateItems, title, ...rest }, ref) => {
   );
 });
 
-function Template({ items, ...menu }: Props): React.Node {
+export function filterTemplateItems(items: TMenuItem[]): TMenuItem[] {
   let filtered = items.filter((item) => item.visible !== false);
 
   // this block literally just trims unneccessary separators
@@ -100,7 +101,11 @@ function Template({ items, ...menu }: Props): React.Node {
     return [...acc, item];
   }, []);
 
-  return filtered.map((item, index) => {
+  return filtered;
+}
+
+function Template({ items, ...menu }: Props): React.Node {
+  return filterTemplateItems(items).map((item, index) => {
     if (item.to) {
       return (
         <MenuItem

app/components/ContextMenu/index.js

@@ -1,9 +1,14 @@
 // @flow
-import { rgba } from "polished";
 import * as React from "react";
+import { Portal } from "react-portal";
 import { Menu } from "reakit/Menu";
 import styled from "styled-components";
-import { fadeAndScaleIn } from "shared/styles/animations";
+import breakpoint from "styled-components-breakpoint";
+import {
+  fadeIn,
+  fadeAndScaleIn,
+  fadeAndSlideIn,
+} from "shared/styles/animations";
 import usePrevious from "hooks/usePrevious";
 
 type Props = {|
@@ -37,41 +42,80 @@ export default function ContextMenu({
   }, [onOpen, onClose, previousVisible, rest.visible]);
 
   return (
-    <Menu {...rest}>
-      {(props) => (
-        <Position {...props}>
-          <Background>
-            {rest.visible || rest.animating ? children : null}
-          </Background>
-        </Position>
+    <>
+      <Menu hideOnClickOutside preventBodyScroll {...rest}>
+        {(props) => (
+          <Position {...props}>
+            <Background dir="auto">
+              {rest.visible || rest.animating ? children : null}
+            </Background>
+          </Position>
+        )}
+      </Menu>
+      {(rest.visible || rest.animating) && (
+        <Portal>
+          <Backdrop />
+        </Portal>
       )}
-    </Menu>
+    </>
   );
 }
 
+const Backdrop = styled.div`
+  animation: ${fadeIn} 200ms ease-in-out;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: ${(props) => props.theme.backdrop};
+  z-index: ${(props) => props.theme.depths.menu - 1};
+
+  ${breakpoint("tablet")`
+    display: none;
+  `};
+`;
+
 const Position = styled.div`
   position: absolute;
   z-index: ${(props) => props.theme.depths.menu};
+
+  ${breakpoint("mobile", "tablet")`
+    position: fixed !important;
+    transform: none !important;
+    top: auto !important;
+    right: 8px !important;
+    bottom: 16px !important;
+    left: 8px !important;
+  `};
 `;
 
 const Background = styled.div`
-  animation: ${fadeAndScaleIn} 200ms ease;
-  transform-origin: ${(props) => (props.left !== undefined ? "25%" : "75%")} 0;
-  background: ${(props) => rgba(props.theme.menuBackground, 0.95)};
-  border: ${(props) =>
-    props.theme.menuBorder ? `1px solid ${props.theme.menuBorder}` : "none"};
-  border-radius: 2px;
-  padding: 0.5em 0;
+  animation: ${fadeAndSlideIn} 200ms ease;
+  transform-origin: 50% 100%;
+  max-width: 100%;
+  background: ${(props) => props.theme.menuBackground};
+  border-radius: 6px;
+  padding: 6px 0;
   min-width: 180px;
   overflow: hidden;
   overflow-y: auto;
   max-height: 75vh;
-  max-width: 276px;
-  box-shadow: ${(props) => props.theme.menuShadow};
   pointer-events: all;
   font-weight: normal;
 
   @media print {
     display: none;
   }
+
+  ${breakpoint("tablet")`
+    animation: ${fadeAndScaleIn} 200ms ease;
+    transform-origin: ${(props) =>
+      props.left !== undefined ? "25%" : "75%"} 0;
+    max-width: 276px;
+    background: ${(props) => props.theme.menuBackground};
+    box-shadow: ${(props) => props.theme.menuShadow};
+    border: ${(props) =>
+      props.theme.menuBorder ? `1px solid ${props.theme.menuBorder}` : "none"};
+  `};
 `;

app/components/CopyToClipboard.js

@@ -15,6 +15,7 @@ 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();

app/components/Divider.js

@@ -0,0 +1,11 @@
+// @flow
+import styled from "styled-components";
+
+const Divider = styled.hr`
+  border: 0;
+  border-bottom: 1px solid ${(props) => props.theme.divider};
+  margin: 0;
+  padding: 0;
+`;
+
+export default Divider;

app/components/DocumentBreadcrumb.js

@@ -0,0 +1,138 @@
+// @flow
+import { observer } from "mobx-react";
+import {
+  ArchiveIcon,
+  EditIcon,
+  GoToIcon,
+  ShapesIcon,
+  TrashIcon,
+} from "outline-icons";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import styled from "styled-components";
+import Document from "models/Document";
+import Breadcrumb from "components/Breadcrumb";
+import CollectionIcon from "components/CollectionIcon";
+import useStores from "hooks/useStores";
+import { collectionUrl } from "utils/routeHelpers";
+
+type Props = {|
+  document: Document,
+  children?: React.Node,
+  onlyText: boolean,
+|};
+
+function useCategory(document) {
+  const { t } = useTranslation();
+
+  if (document.isDeleted) {
+    return {
+      icon: <TrashIcon color="currentColor" />,
+      title: t("Trash"),
+      to: "/trash",
+    };
+  }
+  if (document.isArchived) {
+    return {
+      icon: <ArchiveIcon color="currentColor" />,
+      title: t("Archive"),
+      to: "/archive",
+    };
+  }
+  if (document.isDraft) {
+    return {
+      icon: <EditIcon color="currentColor" />,
+      title: t("Drafts"),
+      to: "/drafts",
+    };
+  }
+  if (document.isTemplate) {
+    return {
+      icon: <ShapesIcon color="currentColor" />,
+      title: t("Templates"),
+      to: "/templates",
+    };
+  }
+  return null;
+}
+
+const DocumentBreadcrumb = ({ document, children, onlyText }: Props) => {
+  const { collections } = useStores();
+  const { t } = useTranslation();
+  const category = useCategory(document);
+
+  let collection = collections.get(document.collectionId);
+  if (!collection) {
+    collection = {
+      id: document.collectionId,
+      name: t("Deleted Collection"),
+      color: "currentColor",
+      url: "deleted-collection",
+    };
+  }
+
+  const path = React.useMemo(
+    () =>
+      collection && collection.pathToDocument
+        ? collection.pathToDocument(document.id).slice(0, -1)
+        : [],
+    [collection, document.id]
+  );
+
+  const items = React.useMemo(() => {
+    let output = [];
+
+    if (category) {
+      output.push(category);
+    }
+
+    if (collection) {
+      output.push({
+        icon: <CollectionIcon collection={collection} expanded />,
+        title: collection.name,
+        to: collectionUrl(collection.url),
+      });
+    }
+
+    path.forEach((p) => {
+      output.push({
+        title: p.title,
+        to: p.url,
+      });
+    });
+
+    return output;
+  }, [path, category, collection]);
+
+  if (!collections.isLoaded) {
+    return null;
+  }
+
+  if (onlyText === true) {
+    return (
+      <>
+        {collection.name}
+        {path.map((n) => (
+          <React.Fragment key={n.id}>
+            <SmallSlash />
+            {n.title}
+          </React.Fragment>
+        ))}
+      </>
+    );
+  }
+
+  return <Breadcrumb items={items} children={children} highlightFirstItem />;
+};
+
+const SmallSlash = styled(GoToIcon)`
+  width: 12px;
+  height: 12px;
+  vertical-align: middle;
+  flex-shrink: 0;
+
+  fill: ${(props) => props.theme.slate};
+  opacity: 0.5;
+`;
+
+export default observer(DocumentBreadcrumb);

app/components/DocumentHistory/components/Revision.js

@@ -1,5 +1,5 @@
 // @flow
-import format from "date-fns/format";
+import { format } from "date-fns";
 import * as React from "react";
 import { NavLink } from "react-router-dom";
 import styled, { withTheme } from "styled-components";
@@ -37,7 +37,7 @@ class RevisionListItem extends React.Component<Props> {
         </Author>
         <Meta>
           <Time dateTime={revision.createdAt} tooltipDelay={250}>
-            {format(revision.createdAt, "MMMM Do, YYYY h:mm a")}
+            {format(Date.parse(revision.createdAt), "MMMM do, yyyy h:mm a")}
           </Time>
         </Meta>
         {showMenu && (

app/components/DocumentListItem.js

@@ -15,7 +15,9 @@ import Flex from "components/Flex";
 import Highlight from "components/Highlight";
 import StarButton, { AnimatedStar } from "components/Star";
 import Tooltip from "components/Tooltip";
+import useCurrentTeam from "hooks/useCurrentTeam";
 import useCurrentUser from "hooks/useCurrentUser";
+import useStores from "hooks/useStores";
 import DocumentMenu from "menus/DocumentMenu";
 import { newDocumentUrl } from "utils/routeHelpers";
 
@@ -39,9 +41,11 @@ function replaceResultMarks(tag: string) {
   return tag.replace(/<b\b[^>]*>(.*?)<\/b>/gi, "$1");
 }
 
-function DocumentListItem(props: Props) {
+function DocumentListItem(props: Props, ref) {
   const { t } = useTranslation();
+  const { policies } = useStores();
   const currentUser = useCurrentUser();
+  const currentTeam = useCurrentTeam();
   const [menuOpen, setMenuOpen] = React.useState(false);
   const {
     document,
@@ -60,9 +64,12 @@ function DocumentListItem(props: Props) {
     !!document.title.toLowerCase().includes(highlight.toLowerCase());
   const canStar =
     !document.isDraft && !document.isArchived && !document.isTemplate;
+  const can = policies.abilities(currentTeam.id);
 
   return (
     <DocumentLink
+      ref={ref}
+      dir={document.dir}
       $isStarred={document.isStarred}
       $menuOpen={menuOpen}
       to={{
@@ -71,8 +78,12 @@ function DocumentListItem(props: Props) {
       }}
     >
       <Content>
-        <Heading>
-          <Title text={document.titleWithDefault} highlight={highlight} />
+        <Heading dir={document.dir}>
+          <Title
+            text={document.titleWithDefault}
+            highlight={highlight}
+            dir={document.dir}
+          />
           {document.isNew && document.createdBy.id !== currentUser.id && (
             <Badge yellow>{t("New")}</Badge>
           )}
@@ -111,21 +122,24 @@ function DocumentListItem(props: Props) {
         />
       </Content>
       <Actions>
-        {document.isTemplate && !document.isArchived && !document.isDeleted && (
-          <>
-            <Button
-              as={Link}
-              to={newDocumentUrl(document.collectionId, {
-                templateId: document.id,
-              })}
-              icon={<PlusIcon />}
-              neutral
-            >
-              {t("New doc")}
-            </Button>
-            &nbsp;
-          </>
-        )}
+        {document.isTemplate &&
+          !document.isArchived &&
+          !document.isDeleted &&
+          can.createDocument && (
+            <>
+              <Button
+                as={Link}
+                to={newDocumentUrl(document.collectionId, {
+                  templateId: document.id,
+                })}
+                icon={<PlusIcon />}
+                neutral
+              >
+                {t("New doc")}
+              </Button>
+              &nbsp;
+            </>
+          )}
         <DocumentMenu
           document={document}
           showPin={showPin}
@@ -213,6 +227,7 @@ 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;
@@ -243,4 +258,4 @@ const ResultContext = styled(Highlight)`
   margin-bottom: 0.25em;
 `;
 
-export default observer(DocumentListItem);
+export default observer(React.forwardRef(DocumentListItem));

app/components/DocumentMeta.js

@@ -5,12 +5,13 @@ import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
 import Document from "models/Document";
-import Breadcrumb from "components/Breadcrumb";
+import DocumentBreadcrumb from "components/DocumentBreadcrumb";
 import Flex from "components/Flex";
 import Time from "components/Time";
 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;
@@ -18,6 +19,11 @@ const Container = styled(Flex)`
   min-width: 0;
 `;
 
+const Viewed = styled.span`
+  text-overflow: ellipsis;
+  overflow: hidden;
+`;
+
 const Modified = styled.span`
   color: ${(props) => props.theme.textTertiary};
   font-weight: ${(props) => (props.highlight ? "600" : "400")};
@@ -112,16 +118,16 @@ function DocumentMeta({
     }
     if (!lastViewedAt) {
       return (
-        <>
+        <Viewed>
           •&nbsp;<Modified highlight>{t("Never viewed")}</Modified>
-        </>
+        </Viewed>
       );
     }
 
     return (
-      <span>
+      <Viewed>
         •&nbsp;{t("Viewed")} <Time dateTime={lastViewedAt} addSuffix shorten />
-      </span>
+      </Viewed>
     );
   };
 
@@ -130,14 +136,14 @@ function DocumentMeta({
     : 0;
 
   return (
-    <Container align="center" {...rest}>
+    <Container align="center" rtl={document.dir === "rtl"} {...rest} dir="ltr">
       {updatedByMe ? t("You") : updatedBy.name}&nbsp;
       {to ? <Link to={to}>{content}</Link> : content}
       {showCollection && collection && (
         <span>
           &nbsp;{t("in")}&nbsp;
           <strong>
-            <Breadcrumb document={document} onlyText />
+            <DocumentBreadcrumb document={document} onlyText />
           </strong>
         </span>
       )}

app/components/DocumentMetaWithViews.js

@@ -1,38 +1,69 @@
 // @flow
 import { useObserver } from "mobx-react";
 import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { usePopoverState, PopoverDisclosure } from "reakit/Popover";
 import styled from "styled-components";
 import Document from "models/Document";
 import DocumentMeta from "components/DocumentMeta";
+import DocumentViews from "components/DocumentViews";
+import Popover from "components/Popover";
 import useStores from "../hooks/useStores";
 
 type Props = {|
   document: Document,
   isDraft: boolean,
   to?: string,
+  rtl?: boolean,
 |};
 
-function DocumentMetaWithViews({ to, isDraft, document }: Props) {
+function DocumentMetaWithViews({ to, isDraft, document, ...rest }: Props) {
   const { views } = useStores();
+  const { t } = useTranslation();
   const documentViews = useObserver(() => views.inDocument(document.id));
   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",
+    modal: true,
+  });
+
   return (
-    <Meta document={document} to={to}>
+    <Meta document={document} to={to} {...rest}>
       {totalViewers && !isDraft ? (
-        <>
-          &nbsp;&middot; Viewed by{" "}
-          {onlyYou
-            ? "only you"
-            : `${totalViewers} ${totalViewers === 1 ? "person" : "people"}`}
-        </>
+        <PopoverDisclosure {...popover}>
+          {(props) => (
+            <>
+              &nbsp;&middot;&nbsp;
+              <a {...props}>
+                {t("Viewed by")}{" "}
+                {onlyYou
+                  ? t("only you")
+                  : `${totalViewers} ${
+                      totalViewers === 1 ? t("person") : t("people")
+                    }`}
+              </a>
+            </>
+          )}
+        </PopoverDisclosure>
       ) : null}
+      <Popover {...popover} width={300} aria-label={t("Viewers")} tabIndex={0}>
+        <DocumentViews document={document} isOpen={popover.visible} />
+      </Popover>
     </Meta>
   );
 }
 
 const Meta = styled(DocumentMeta)`
+  justify-content: ${(props) => (props.rtl ? "flex-end" : "flex-start")};
   margin: -12px 0 2em 0;
   font-size: 14px;
   position: relative;

app/components/DocumentViews.js

@@ -0,0 +1,80 @@
+// @flow
+import { formatDistanceToNow } from "date-fns";
+import { sortBy } from "lodash";
+import { observer } from "mobx-react";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import Document from "models/Document";
+import Avatar from "components/Avatar";
+import ListItem from "components/List/Item";
+import PaginatedList from "components/PaginatedList";
+import useStores from "hooks/useStores";
+
+type Props = {|
+  document: Document,
+  isOpen?: boolean,
+|};
+
+function DocumentViews({ document, isOpen }: Props) {
+  const { t } = useTranslation();
+  const { views, presence } = useStores();
+
+  let documentPresence = presence.get(document.id);
+  documentPresence = documentPresence
+    ? Array.from(documentPresence.values())
+    : [];
+
+  const presentIds = documentPresence.map((p) => p.userId);
+  const editingIds = documentPresence
+    .filter((p) => p.isEditing)
+    .map((p) => p.userId);
+
+  // ensure currently present via websocket are always ordered first
+  const documentViews = views.inDocument(document.id);
+  const sortedViews = sortBy(
+    documentViews,
+    (view) => !presentIds.includes(view.user.id)
+  );
+
+  const users = React.useMemo(() => sortedViews.map((v) => v.user), [
+    sortedViews,
+  ]);
+
+  return (
+    <>
+      {isOpen && (
+        <PaginatedList
+          items={users}
+          renderItem={(item) => {
+            const view = documentViews.find((v) => v.user.id === item.id);
+            const isPresent = presentIds.includes(item.id);
+            const isEditing = editingIds.includes(item.id);
+
+            const subtitle = isPresent
+              ? isEditing
+                ? t("Currently editing")
+                : t("Currently viewing")
+              : t("Viewed {{ timeAgo }} ago", {
+                  timeAgo: formatDistanceToNow(
+                    view ? Date.parse(view.lastViewedAt) : new Date()
+                  ),
+                });
+
+            return (
+              <ListItem
+                key={item.id}
+                title={item.name}
+                subtitle={subtitle}
+                image={<Avatar key={item.id} src={item.avatarUrl} size={32} />}
+                border={false}
+                small
+              />
+            );
+          }}
+        />
+      )}
+    </>
+  );
+}
+
+export default observer(DocumentViews);

app/components/DropToImport.js

@@ -1,123 +0,0 @@
-// @flow
-import invariant from "invariant";
-import { observable } from "mobx";
-import { observer, inject } from "mobx-react";
-import * as React from "react";
-import Dropzone from "react-dropzone";
-import { withRouter, type RouterHistory, type Match } from "react-router-dom";
-import styled, { css } from "styled-components";
-import DocumentsStore from "stores/DocumentsStore";
-import UiStore from "stores/UiStore";
-import LoadingIndicator from "components/LoadingIndicator";
-
-const EMPTY_OBJECT = {};
-let importingLock = false;
-
-type Props = {
-  children: React.Node,
-  collectionId: string,
-  documentId?: string,
-  ui: UiStore,
-  documents: DocumentsStore,
-  disabled: boolean,
-  location: Object,
-  match: Match,
-  history: RouterHistory,
-  staticContext: Object,
-};
-
-@observer
-class DropToImport extends React.Component<Props> {
-  @observable isImporting: boolean = false;
-
-  onDropAccepted = async (files = []) => {
-    if (importingLock) return;
-
-    this.isImporting = true;
-    importingLock = true;
-
-    try {
-      let collectionId = this.props.collectionId;
-      const documentId = this.props.documentId;
-      const redirect = files.length === 1;
-
-      if (documentId && !collectionId) {
-        const document = await this.props.documents.fetch(documentId);
-        invariant(document, "Document not available");
-        collectionId = document.collectionId;
-      }
-
-      for (const file of files) {
-        const doc = await this.props.documents.import(
-          file,
-          documentId,
-          collectionId,
-          { publish: true }
-        );
-
-        if (redirect) {
-          this.props.history.push(doc.url);
-        }
-      }
-    } catch (err) {
-      this.props.ui.showToast(`Could not import file. ${err.message}`, {
-        type: "error",
-      });
-    } finally {
-      this.isImporting = false;
-      importingLock = false;
-    }
-  };
-
-  render() {
-    const { documents } = this.props;
-
-    if (this.props.disabled) return this.props.children;
-
-    return (
-      <Dropzone
-        accept={documents.importFileTypes.join(", ")}
-        onDropAccepted={this.onDropAccepted}
-        style={EMPTY_OBJECT}
-        noClick
-        multiple
-      >
-        {({
-          getRootProps,
-          getInputProps,
-          isDragActive,
-          isDragAccept,
-          isDragReject,
-        }) => (
-          <DropzoneContainer
-            {...getRootProps()}
-            {...{ isDragActive }}
-            tabIndex="-1"
-          >
-            <input {...getInputProps()} />
-            {this.isImporting && <LoadingIndicator />}
-            {this.props.children}
-          </DropzoneContainer>
-        )}
-      </Dropzone>
-    );
-  }
-}
-
-const DropzoneContainer = styled("div")`
-  border-radius: 4px;
-
-  ${({ isDragActive, theme }) =>
-    isDragActive &&
-    css`
-      background: ${theme.slateDark};
-      a {
-        color: ${theme.white} !important;
-      }
-      svg {
-        fill: ${theme.white};
-      }
-    `}
-`;
-
-export default inject("documents", "ui")(withRouter(DropToImport));

app/components/Editor.js

@@ -4,15 +4,20 @@ 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/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 { type Theme } from "types";
 import { isModKey } from "utils/keyboard";
 import { uploadFile } from "utils/uploadFile";
 import { isInternalUrl } from "utils/urls";
 
-const RichMarkdownEditor = React.lazy(() => import("rich-markdown-editor"));
+const RichMarkdownEditor = React.lazy(() =>
+  import(/* webpackChunkName: "rich-markdown-editor" */ "rich-markdown-editor")
+);
 
 const EMPTY_ARRAY = [];
 
@@ -24,11 +29,13 @@ export type Props = {|
   grow?: boolean,
   disableEmbeds?: boolean,
   ui?: UiStore,
+  shareId?: ?string,
   autoFocus?: boolean,
   template?: boolean,
   placeholder?: string,
   maxLength?: number,
   scrollTo?: string,
+  theme?: Theme,
   handleDOMEvents?: Object,
   readOnlyWriteCheckboxes?: boolean,
   onBlur?: (event: SyntheticEvent<>) => any,
@@ -51,8 +58,9 @@ type PropsWithRef = Props & {
 };
 
 function Editor(props: PropsWithRef) {
-  const { id, ui, history } = props;
+  const { id, ui, shareId, history } = props;
   const { t } = useTranslation();
+  const isPrinting = useMediaQuery("print");
 
   const onUploadImage = React.useCallback(
     async (file: File) => {
@@ -84,12 +92,16 @@ function Editor(props: PropsWithRef) {
           }
         }
 
+        if (shareId) {
+          navigateTo = `/share/${shareId}${navigateTo}`;
+        }
+
         history.push(navigateTo);
       } else if (href) {
         window.open(href, "_blank");
       }
     },
-    [history]
+    [history, shareId]
   );
 
   const onShowToast = React.useCallback(
@@ -121,6 +133,11 @@ function Editor(props: PropsWithRef) {
       deleteColumn: t("Delete column"),
       deleteRow: t("Delete row"),
       deleteTable: t("Delete table"),
+      deleteImage: t("Delete image"),
+      downloadImage: t("Download image"),
+      alignImageLeft: t("Float left"),
+      alignImageRight: t("Float right"),
+      alignImageDefault: t("Center large"),
       em: t("Italic"),
       embedInvalidLink: t("Sorry, that link won’t work for this embed type"),
       findOrCreateDoc: `${t("Find or create a doc")}…`,
@@ -141,6 +158,7 @@ function Editor(props: PropsWithRef) {
       noResults: t("No results"),
       openLink: t("Open link"),
       orderedList: t("Ordered list"),
+      pageBreak: t("Page break"),
       pasteLink: `${t("Paste a link")}…`,
       pasteLinkWithTitle: (service: string) =>
         t("Paste a {{service}} link…", { service }),
@@ -170,6 +188,7 @@ function Editor(props: PropsWithRef) {
         tooltip={EditorTooltip}
         dictionary={dictionary}
         {...props}
+        theme={isPrinting ? light : props.theme}
       />
     </ErrorBoundary>
   );

app/components/ErrorBoundary.js

@@ -107,7 +107,7 @@ class ErrorBoundary extends React.Component<Props> {
 }
 
 const Pre = styled.pre`
-  background: ${(props) => props.theme.smoke};
+  background: ${(props) => props.theme.secondaryBackground};
   padding: 16px;
   border-radius: 4px;
   font-size: 12px;

app/components/Facepile.js

@@ -1,45 +1,41 @@
 // @flow
-import { observer, inject } from "mobx-react";
+import { observer } from "mobx-react";
 import * as React from "react";
-import styled, { withTheme } from "styled-components";
+import styled from "styled-components";
 import User from "models/User";
 import Avatar from "components/Avatar";
 import Flex from "components/Flex";
 
-type Props = {
+type Props = {|
   users: User[],
   size?: number,
   overflow: number,
-  renderAvatar: (user: User) => React.Node,
-};
+  onClick?: (event: SyntheticEvent<>) => mixed,
+  renderAvatar?: (user: User) => React.Node,
+|};
 
-@observer
-class Facepile extends React.Component<Props> {
-  render() {
-    const {
-      users,
-      overflow,
-      size = 32,
-      renderAvatar = renderDefaultAvatar,
-      ...rest
-    } = this.props;
-
-    return (
-      <Avatars {...rest}>
-        {overflow > 0 && (
-          <More size={size}>
-            <span>+{overflow}</span>
-          </More>
-        )}
-        {users.map((user) => (
-          <AvatarWrapper key={user.id}>{renderAvatar(user)}</AvatarWrapper>
-        ))}
-      </Avatars>
-    );
-  }
+function Facepile({
+  users,
+  overflow,
+  size = 32,
+  renderAvatar = DefaultAvatar,
+  ...rest
+}: Props) {
+  return (
+    <Avatars {...rest}>
+      {overflow > 0 && (
+        <More size={size}>
+          <span>+{overflow}</span>
+        </More>
+      )}
+      {users.map((user) => (
+        <AvatarWrapper key={user.id}>{renderAvatar(user)}</AvatarWrapper>
+      ))}
+    </Avatars>
+  );
 }
 
-function renderDefaultAvatar(user: User) {
+function DefaultAvatar(user: User) {
   return <Avatar user={user} src={user.avatarUrl} size={32} />;
 }
 
@@ -73,4 +69,4 @@ const Avatars = styled(Flex)`
   cursor: pointer;
 `;
 
-export default inject("views", "presence")(withTheme(Facepile));
+export default observer(Facepile);

app/components/FilterOptions.js

@@ -5,7 +5,8 @@ import { useMenuState, MenuButton } from "reakit/Menu";
 import styled from "styled-components";
 import Button, { Inner } from "components/Button";
 import ContextMenu from "components/ContextMenu";
-import FilterOption from "./FilterOption";
+import MenuItem from "components/ContextMenu/MenuItem";
+import HelpText from "components/HelpText";
 
 type TFilterOption = {|
   key: string,
@@ -30,12 +31,12 @@ const FilterOptions = ({
   className,
   onSelect,
 }: Props) => {
-  const menu = useMenuState();
+  const menu = useMenuState({ modal: true });
   const selected = find(options, { key: activeKey }) || options[0];
   const selectedLabel = selected ? `${selectedPrefix} ${selected.label}` : "";
 
   return (
-    <SearchFilter>
+    <Wrapper>
       <MenuButton {...menu}>
         {(props) => (
           <StyledButton
@@ -50,30 +51,49 @@ const FilterOptions = ({
         )}
       </MenuButton>
       <ContextMenu aria-label={defaultLabel} {...menu}>
-        <List>
-          {options.map((option) => (
-            <FilterOption
-              key={option.key}
-              onSelect={() => {
-                onSelect(option.key);
-                menu.hide();
-              }}
-              active={option.key === activeKey}
-              {...option}
-              {...menu}
-            />
-          ))}
-        </List>
+        {options.map((option) => (
+          <MenuItem
+            key={option.key}
+            onClick={() => {
+              onSelect(option.key);
+              menu.hide();
+            }}
+            selected={option.key === activeKey}
+            {...menu}
+          >
+            {option.note ? (
+              <LabelWithNote>
+                {option.label}
+                <Note>{option.note}</Note>
+              </LabelWithNote>
+            ) : (
+              option.label
+            )}
+          </MenuItem>
+        ))}
       </ContextMenu>
-    </SearchFilter>
+    </Wrapper>
   );
 };
 
+const LabelWithNote = styled.div`
+  font-weight: 500;
+  text-align: left;
+`;
+
+const Note = styled(HelpText)`
+  margin-top: 2px;
+  margin-bottom: 0;
+  line-height: 1.2em;
+  font-size: 14px;
+  font-weight: 400;
+  color: ${(props) => props.theme.textTertiary};
+`;
+
 const StyledButton = styled(Button)`
   box-shadow: none;
   text-transform: none;
   border-color: transparent;
-  height: 28px;
 
   &:hover {
     background: transparent;
@@ -84,14 +104,8 @@ const StyledButton = styled(Button)`
   }
 `;
 
-const SearchFilter = styled.div`
+const Wrapper = styled.div`
   margin-right: 8px;
 `;
 
-const List = styled("ol")`
-  list-style: none;
-  margin: 0;
-  padding: 0 8px;
-`;
-
 export default FilterOptions;

app/components/Flex.js

@@ -16,7 +16,7 @@ type AlignValues =
   | "flex-start"
   | "flex-end";
 
-type Props = {
+type Props = {|
   column?: ?boolean,
   shrink?: ?boolean,
   align?: AlignValues,
@@ -24,12 +24,19 @@ type Props = {
   auto?: ?boolean,
   className?: string,
   children?: React.Node,
-};
+  role?: string,
+  gap?: number,
+|};
 
-const Flex = (props: Props) => {
+const Flex = React.forwardRef<Props, HTMLDivElement>((props: Props, ref) => {
   const { children, ...restProps } = props;
-  return <Container {...restProps}>{children}</Container>;
-};
+
+  return (
+    <Container ref={ref} {...restProps}>
+      {children}
+    </Container>
+  );
+});
 
 const Container = styled.div`
   display: flex;
@@ -38,6 +45,7 @@ const Container = styled.div`
   align-items: ${({ align }) => align};
   justify-content: ${({ justify }) => justify};
   flex-shrink: ${({ shrink }) => (shrink ? 1 : "initial")};
+  gap: ${({ gap }) => `${gap}px` || "initial"};
   min-height: 0;
   min-width: 0;
 `;

app/components/GroupListItem.js

@@ -1,6 +1,7 @@
 // @flow
 import { observable } from "mobx";
 import { observer, inject } from "mobx-react";
+import { GroupIcon } from "outline-icons";
 import * as React from "react";
 import styled from "styled-components";
 import { MAX_AVATAR_DISPLAY } from "shared/constants";
@@ -17,7 +18,8 @@ type Props = {
   group: Group,
   groupMemberships: GroupMembershipsStore,
   membership?: CollectionGroupMembership,
-  showFacepile: boolean,
+  showFacepile?: boolean,
+  showAvatar?: boolean,
   renderActions: ({ openMembersModal: () => void }) => React.Node,
 };
 
@@ -48,6 +50,11 @@ class GroupListItem extends React.Component<Props> {
     return (
       <>
         <ListItem
+          image={
+            <Image>
+              <GroupIcon size={24} />
+            </Image>
+          }
           title={
             <Title onClick={this.handleMembersModalOpen}>{group.name}</Title>
           }
@@ -84,6 +91,15 @@ class GroupListItem extends React.Component<Props> {
   }
 }
 
+const Image = styled(Flex)`
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background: ${(props) => props.theme.secondaryBackground};
+  border-radius: 32px;
+`;
+
 const Title = styled.span`
   &:hover {
     text-decoration: underline;

app/components/Guide.js

@@ -0,0 +1,112 @@
+// @flow
+import { observer } from "mobx-react";
+import * as React from "react";
+import { Dialog, DialogBackdrop, useDialogState } from "reakit/Dialog";
+import styled from "styled-components";
+import Scrollable from "components/Scrollable";
+import usePrevious from "hooks/usePrevious";
+
+type Props = {|
+  children?: React.Node,
+  isOpen: boolean,
+  title?: string,
+  onRequestClose: () => void,
+|};
+
+const Guide = ({
+  children,
+  isOpen,
+  title = "Untitled",
+  onRequestClose,
+  ...rest
+}: Props) => {
+  const dialog = useDialogState({ animated: 250 });
+  const wasOpen = usePrevious(isOpen);
+
+  React.useEffect(() => {
+    if (!wasOpen && isOpen) {
+      dialog.show();
+    }
+    if (wasOpen && !isOpen) {
+      dialog.hide();
+    }
+  }, [dialog, wasOpen, isOpen]);
+
+  return (
+    <DialogBackdrop {...dialog}>
+      {(props) => (
+        <Backdrop {...props}>
+          <Dialog
+            {...dialog}
+            aria-label={title}
+            preventBodyScrollhideOnEsc
+            hide={onRequestClose}
+          >
+            {(props) => (
+              <Scene {...props} {...rest}>
+                <Content>
+                  {title && <Header>{title}</Header>}
+                  {children}
+                </Content>
+              </Scene>
+            )}
+          </Dialog>
+        </Backdrop>
+      )}
+    </DialogBackdrop>
+  );
+};
+
+const Header = styled.h1`
+  font-size: 18px;
+  margin-top: 0;
+  margin-bottom: 1em;
+`;
+
+const Backdrop = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: ${(props) => props.theme.backdrop} !important;
+  z-index: ${(props) => props.theme.depths.modalOverlay};
+  transition: opacity 200ms ease-in-out;
+  opacity: 0;
+
+  &[data-enter] {
+    opacity: 1;
+  }
+`;
+
+const Scene = styled.div`
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  margin: 12px;
+  z-index: ${(props) => props.theme.depths.modal};
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  width: 350px;
+  background: ${(props) => props.theme.background};
+  transition: ${(props) => props.theme.backgroundTransition};
+  border-radius: 8px;
+  outline: none;
+  opacity: 0;
+  transform: translateX(16px);
+  transition: transform 250ms ease, opacity 250ms ease;
+
+  &[data-enter] {
+    opacity: 1;
+    transform: translateX(0px);
+  }
+`;
+
+const Content = styled(Scrollable)`
+  width: 100%;
+  padding: 16px;
+`;
+
+export default observer(Guide);

app/components/Header.js

@@ -36,69 +36,89 @@ function Header({ breadcrumb, title, actions }: Props) {
   }, []);
 
   return (
-    <Wrapper
-      align="center"
-      justify="space-between"
-      isCompact={isScrolled}
-      shrink={false}
-    >
-      {breadcrumb}
+    <Wrapper align="center" isCompact={isScrolled} shrink={false}>
+      {breadcrumb ? <Breadcrumbs>{breadcrumb}</Breadcrumbs> : null}
       {isScrolled ? (
-        <Title
-          align="center"
-          justify={breadcrumb ? "center" : "flex-start"}
-          onClick={handleClickTitle}
-        >
-          <Fade>
-            <Flex align="center">{title}</Flex>
-          </Fade>
+        <Title align="center" justify="flex-start" onClick={handleClickTitle}>
+          <Fade>{title}</Fade>
         </Title>
       ) : (
         <div />
       )}
-      {actions && <Actions>{actions}</Actions>}
+      {actions && (
+        <Actions align="center" justify="flex-end">
+          {actions}
+        </Actions>
+      )}
     </Wrapper>
   );
 }
 
+const Breadcrumbs = styled("div")`
+  flex-grow: 1;
+  flex-basis: 0;
+  align-items: center;
+  padding-right: 8px;
+
+  /* Don't show breadcrumbs on mobile */
+  display: none;
+  ${breakpoint("tablet")`	
+  display: flex;
+`};
+`;
+
+const Actions = styled(Flex)`
+  flex-grow: 1;
+  flex-basis: 0;
+  min-width: auto;
+  padding-left: 8px;
+`;
+
 const Wrapper = styled(Flex)`
   position: sticky;
   top: 0;
-  right: 0;
-  left: 0;
-  z-index: 2;
+  z-index: ${(props) => props.theme.depths.header};
   background: ${(props) => transparentize(0.2, props.theme.background)};
   padding: 12px;
   transition: all 100ms ease-out;
   transform: translate3d(0, 0, 0);
   backdrop-filter: blur(20px);
+  min-height: 56px;
 
   @media print {
     display: none;
   }
 
+  justify-content: flex-start;
   ${breakpoint("tablet")`
     padding: ${(props) => (props.isCompact ? "12px" : `24px 24px 0`)};
+    justify-content: "center";
   `};
 `;
 
-const Title = styled(Flex)`
+const Title = styled("div")`
+  display: none;
   font-size: 16px;
   font-weight: 600;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
   cursor: pointer;
-  width: 0;
+  min-width: 0;
 
   ${breakpoint("tablet")`	
-    flex-grow: 1;
+    padding-left: 0;
+    display: block;
   `};
-`;
 
-const Actions = styled(Flex)`
-  align-self: flex-end;
-  height: 32px;
+  svg {
+    vertical-align: bottom;
+  }
+
+  @media (display-mode: standalone) {
+    overflow: hidden;
+    flex-grow: 0 !important;
+  }
 `;
 
 export default observer(Header);

app/components/HoverPreview.js

@@ -201,6 +201,7 @@ const Card = styled.div`
 const Position = styled.div`
   margin-top: 10px;
   position: ${({ fixed }) => (fixed ? "fixed" : "absolute")};
+  z-index: ${(props) => props.theme.depths.hoverPreview};
   display: flex;
   max-height: 75%;
 

app/components/IconPicker.js

@@ -32,7 +32,10 @@ import NudeButton from "components/NudeButton";
 const style = { width: 30, height: 30 };
 
 const TwitterPicker = React.lazy(() =>
-  import("react-color/lib/components/twitter/Twitter")
+  import(
+    /* webpackChunkName: "twitter-picker" */
+    "react-color/lib/components/twitter/Twitter"
+  )
 );
 
 export const icons = {

app/components/Input.js

@@ -35,6 +35,10 @@ const RealInput = styled.input`
     color: ${(props) => props.theme.placeholder};
   }
 
+  &::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+  }
+
   ${breakpoint("mobile", "tablet")`
     font-size: 16px;
   `};
@@ -42,6 +46,7 @@ const RealInput = styled.input`
 
 const Wrapper = styled.div`
   flex: ${(props) => (props.flex ? "1" : "0")};
+  width: ${(props) => (props.short ? "49%" : "auto")};
   max-width: ${(props) => (props.short ? "350px" : "100%")};
   min-height: ${({ minHeight }) => (minHeight ? `${minHeight}px` : "0")};
   max-height: ${({ maxHeight }) => (maxHeight ? `${maxHeight}px` : "initial")};
@@ -55,7 +60,6 @@ const IconWrapper = styled.span`
 `;
 
 export const Outline = styled(Flex)`
-  display: flex;
   flex: 1;
   margin: ${(props) =>
     props.margin !== undefined ? props.margin : "0 0 16px"};
@@ -64,7 +68,7 @@ export const Outline = styled(Flex)`
   border-style: solid;
   border-color: ${(props) =>
     props.hasError
-      ? "red"
+      ? props.theme.danger
       : props.focused
       ? props.theme.inputBorderFocused
       : props.theme.inputBorder};
@@ -81,7 +85,7 @@ export const LabelText = styled.div`
 `;
 
 export type Props = {|
-  type?: "text" | "email" | "checkbox" | "search",
+  type?: "text" | "email" | "checkbox" | "search" | "textarea",
   value?: string,
   label?: string,
   className?: string,
@@ -97,10 +101,14 @@ export type Props = {|
   autoComplete?: boolean | string,
   readOnly?: boolean,
   required?: boolean,
+  disabled?: boolean,
   placeholder?: string,
-  onChange?: (ev: SyntheticInputEvent<HTMLInputElement>) => mixed,
-  onFocus?: (ev: SyntheticEvent<>) => void,
-  onBlur?: (ev: SyntheticEvent<>) => void,
+  onChange?: (
+    ev: SyntheticInputEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => mixed,
+  onKeyDown?: (ev: SyntheticKeyboardEvent<HTMLInputElement>) => mixed,
+  onFocus?: (ev: SyntheticEvent<>) => mixed,
+  onBlur?: (ev: SyntheticEvent<>) => mixed,
 |};
 
 @observer

app/components/InputLarge.js

@@ -3,10 +3,12 @@ import styled from "styled-components";
 import Input from "./Input";
 
 const InputLarge = styled(Input)`
-  height: 40px;
+  height: 38px;
+  flex-grow: 1;
+  margin-right: 8px;
 
   input {
-    height: 40px;
+    height: 38px;
   }
 `;
 

app/components/InputSearch.js

@@ -1,89 +1,48 @@
 // @flow
-import { observable } from "mobx";
-import { observer } from "mobx-react";
 import { SearchIcon } from "outline-icons";
 import * as React from "react";
-import { withTranslation, type TFunction } from "react-i18next";
-import keydown from "react-keydown";
-import { withRouter, type RouterHistory } from "react-router-dom";
-import styled, { withTheme } from "styled-components";
-import Input from "./Input";
-import { type Theme } from "types";
-import { meta } from "utils/keyboard";
-import { searchUrl } from "utils/routeHelpers";
+import { useTranslation } from "react-i18next";
+import { useTheme } from "styled-components";
+import Input, { type Props as InputProps } from "./Input";
 
-type Props = {
-  history: RouterHistory,
-  theme: Theme,
-  source: string,
+type Props = {|
+  ...InputProps,
   placeholder?: string,
-  label?: string,
-  labelHidden?: boolean,
-  collectionId?: string,
-  t: TFunction,
-};
+  value?: string,
+  onChange: (event: SyntheticInputEvent<>) => mixed,
+  onKeyDown?: (event: SyntheticKeyboardEvent<HTMLInputElement>) => mixed,
+|};
 
-@observer
-class InputSearch extends React.Component<Props> {
-  input: ?Input;
-  @observable focused: boolean = false;
+export default function InputSearch(props: Props) {
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const [isFocused, setIsFocused] = React.useState(false);
 
-  @keydown(`${meta}+f`)
-  focus(ev: SyntheticEvent<>) {
-    ev.preventDefault();
+  const handleFocus = React.useCallback(() => {
+    setIsFocused(true);
+  }, []);
 
-    if (this.input) {
-      this.input.focus();
-    }
-  }
+  const handleBlur = React.useCallback(() => {
+    setIsFocused(false);
+  }, []);
 
-  handleSearchInput = (ev: SyntheticInputEvent<>) => {
-    ev.preventDefault();
-    this.props.history.push(
-      searchUrl(ev.target.value, {
-        collectionId: this.props.collectionId,
-        ref: this.props.source,
-      })
-    );
-  };
+  const { placeholder = `${t("Search")}…`, onKeyDown, ...rest } = props;
 
-  handleFocus = () => {
-    this.focused = true;
-  };
-
-  handleBlur = () => {
-    this.focused = false;
-  };
-
-  render() {
-    const { t } = this.props;
-    const { theme, placeholder = `${t("Search")}…` } = this.props;
-
-    return (
-      <InputMaxWidth
-        ref={(ref) => (this.input = ref)}
-        type="search"
-        placeholder={placeholder}
-        onInput={this.handleSearchInput}
-        icon={
-          <SearchIcon
-            color={this.focused ? theme.inputBorderFocused : theme.inputBorder}
-          />
-        }
-        label={this.props.label}
-        labelHidden={this.props.labelHidden}
-        onFocus={this.handleFocus}
-        onBlur={this.handleBlur}
-        margin={0}
-      />
-    );
-  }
+  return (
+    <Input
+      type="search"
+      placeholder={placeholder}
+      icon={
+        <SearchIcon
+          color={isFocused ? theme.inputBorderFocused : theme.inputBorder}
+        />
+      }
+      onKeyDown={onKeyDown}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      margin={0}
+      labelHidden
+      {...rest}
+    />
+  );
 }
-
-const InputMaxWidth = styled(Input)`
-  max-width: 30vw;
-`;
-
-export default withTranslation()<InputSearch>(
-  withTheme(withRouter(InputSearch))
-);

app/components/InputSearchPage.js

@@ -0,0 +1,95 @@
+// @flow
+import { observable } from "mobx";
+import { observer } from "mobx-react";
+import { SearchIcon } from "outline-icons";
+import * as React from "react";
+import { withTranslation, type TFunction } from "react-i18next";
+import keydown from "react-keydown";
+import { withRouter, type RouterHistory } from "react-router-dom";
+import styled, { withTheme } from "styled-components";
+import Input from "./Input";
+import { type Theme } from "types";
+import { meta } from "utils/keyboard";
+import { searchUrl } from "utils/routeHelpers";
+
+type Props = {
+  history: RouterHistory,
+  theme: Theme,
+  source: string,
+  placeholder?: string,
+  label?: string,
+  labelHidden?: boolean,
+  collectionId?: string,
+  value: string,
+  onChange: (event: SyntheticInputEvent<>) => mixed,
+  onKeyDown: (event: SyntheticKeyboardEvent<HTMLInputElement>) => mixed,
+  t: TFunction,
+};
+
+@observer
+class InputSearchPage extends React.Component<Props> {
+  input: ?Input;
+  @observable focused: boolean = false;
+
+  @keydown(`${meta}+f`)
+  focus(ev: SyntheticEvent<>) {
+    ev.preventDefault();
+
+    if (this.input) {
+      this.input.focus();
+    }
+  }
+
+  handleSearchInput = (ev: SyntheticInputEvent<>) => {
+    ev.preventDefault();
+    this.props.history.push(
+      searchUrl(ev.target.value, {
+        collectionId: this.props.collectionId,
+        ref: this.props.source,
+      })
+    );
+  };
+
+  handleFocus = () => {
+    this.focused = true;
+  };
+
+  handleBlur = () => {
+    this.focused = false;
+  };
+
+  render() {
+    const { t, value, onChange, onKeyDown } = this.props;
+    const { theme, placeholder = `${t("Search")}…` } = this.props;
+
+    return (
+      <InputMaxWidth
+        ref={(ref) => (this.input = ref)}
+        type="search"
+        placeholder={placeholder}
+        onInput={this.handleSearchInput}
+        value={value}
+        onChange={onChange}
+        onKeyDown={onKeyDown}
+        icon={
+          <SearchIcon
+            color={this.focused ? theme.inputBorderFocused : theme.inputBorder}
+          />
+        }
+        label={this.props.label}
+        onFocus={this.handleFocus}
+        onBlur={this.handleBlur}
+        margin={0}
+        labelHidden
+      />
+    );
+  }
+}
+
+const InputMaxWidth = styled(Input)`
+  max-width: 30vw;
+`;
+
+export default withTranslation()<InputSearchPage>(
+  withTheme(withRouter(InputSearchPage))
+);

app/components/InputSelect.js

@@ -16,6 +16,10 @@ const Select = styled.select`
   color: ${(props) => props.theme.text};
   height: 30px;
 
+  option {
+    background: ${(props) => props.theme.buttonNeutralBackground};
+  }
+
   &:disabled,
   &::placeholder {
     color: ${(props) => props.theme.placeholder};
@@ -27,7 +31,7 @@ const Wrapper = styled.label`
   max-width: ${(props) => (props.short ? "350px" : "100%")};
 `;
 
-type Option = { label: string, value: string };
+export type Option = { label: string, value: string };
 
 export type Props = {
   value?: string,

app/components/InputSelectPermission.js

@@ -0,0 +1,22 @@
+// @flow
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import InputSelect, { type Props, type Option } from "./InputSelect";
+
+export default function InputSelectPermission(
+  props: $Rest<Props, { options: Array<Option> }>
+) {
+  const { t } = useTranslation();
+
+  return (
+    <InputSelect
+      label={t("Default access")}
+      options={[
+        { label: t("View and edit"), value: "read_write" },
+        { label: t("View only"), value: "read" },
+        { label: t("No access"), value: "" },
+      ]}
+      {...props}
+    />
+  );
+}

app/components/Labeled.js

@@ -17,12 +17,10 @@ const Labeled = ({ label, children, ...props }: Props) => (
 );
 
 export const Label = styled(Flex)`
-  margin-bottom: 8px;
-  font-size: 13px;
   font-weight: 500;
-  text-transform: uppercase;
-  color: ${(props) => props.theme.textTertiary};
-  letter-spacing: 0.04em;
+  padding-bottom: 4px;
+  display: inline-block;
+  color: ${(props) => props.theme.text};
 `;
 
 export default observer(Labeled);

app/components/Layout.js

@@ -6,20 +6,26 @@ import * as React from "react";
 import { Helmet } from "react-helmet";
 import { withTranslation, type TFunction } from "react-i18next";
 import keydown from "react-keydown";
-import { Switch, Route, Redirect } from "react-router-dom";
+import {
+  Switch,
+  Route,
+  Redirect,
+  withRouter,
+  type RouterHistory,
+} from "react-router-dom";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import AuthStore from "stores/AuthStore";
 import DocumentsStore from "stores/DocumentsStore";
+import PoliciesStore from "stores/PoliciesStore";
 import UiStore from "stores/UiStore";
 import ErrorSuspended from "scenes/ErrorSuspended";
 import KeyboardShortcuts from "scenes/KeyboardShortcuts";
-import Analytics from "components/Analytics";
 import Button from "components/Button";
 import DocumentHistory from "components/DocumentHistory";
 import Flex from "components/Flex";
+import Guide from "components/Guide";
 import { LoadingIndicatorBar } from "components/LoadingIndicator";
-import Modal from "components/Modal";
 import Sidebar from "components/Sidebar";
 import SettingsSidebar from "components/Sidebar/Settings";
 import SkipNavContent from "components/SkipNavContent";
@@ -29,6 +35,7 @@ import {
   homeUrl,
   searchUrl,
   matchDocumentSlug as slug,
+  newDocumentUrl,
 } from "utils/routeHelpers";
 
 type Props = {
@@ -38,6 +45,8 @@ type Props = {
   title?: ?React.Node,
   auth: AuthStore,
   ui: UiStore,
+  history: RouterHistory,
+  policies: PoliciesStore,
   notifications?: React.Node,
   i18n: Object,
   t: TFunction,
@@ -81,6 +90,17 @@ class Layout extends React.Component<Props> {
     this.redirectTo = homeUrl();
   }
 
+  @keydown("n")
+  goToNewDocument() {
+    const { activeCollectionId } = this.props.ui;
+    if (!activeCollectionId) return;
+
+    const can = this.props.policies.abilities(activeCollectionId);
+    if (!can.update) return;
+
+    this.props.history.push(newDocumentUrl(activeCollectionId));
+  }
+
   render() {
     const { auth, t, ui } = this.props;
     const { user, team } = auth;
@@ -100,7 +120,6 @@ class Layout extends React.Component<Props> {
           />
         </Helmet>
         <SkipNavLink />
-        <Analytics />
 
         {this.props.ui.progressBarVisible && <LoadingIndicatorBar />}
         {this.props.notifications}
@@ -142,13 +161,13 @@ class Layout extends React.Component<Props> {
             />
           </Switch>
         </Container>
-        <Modal
+        <Guide
           isOpen={this.keyboardShortcutsOpen}
           onRequestClose={this.handleCloseKeyboardShortcuts}
           title={t("Keyboard shortcuts")}
         >
           <KeyboardShortcuts />
-        </Modal>
+        </Guide>
       </Container>
     );
   }
@@ -183,7 +202,7 @@ const Content = styled(Flex)`
     props.$isResizing ? "none" : `margin-left 100ms ease-out`};
 
   @media print {
-    margin: 0;
+    margin: 0 !important;
   }
 
   ${breakpoint("mobile", "tablet")`
@@ -198,5 +217,5 @@ const Content = styled(Flex)`
 `;
 
 export default withTranslation()<Layout>(
-  inject("auth", "ui", "documents")(Layout)
+  inject("auth", "ui", "documents", "policies")(withRouter(Layout))
 );

app/components/List/Item.js

@@ -8,17 +8,26 @@ type Props = {
   title: React.Node,
   subtitle?: React.Node,
   actions?: React.Node,
+  border?: boolean,
+  small?: boolean,
 };
 
-const ListItem = ({ image, title, subtitle, actions }: Props) => {
+const ListItem = ({
+  image,
+  title,
+  subtitle,
+  actions,
+  small,
+  border,
+}: Props) => {
   const compact = !subtitle;
 
   return (
-    <Wrapper compact={compact}>
+    <Wrapper compact={compact} $border={border}>
       {image && <Image>{image}</Image>}
       <Content align={compact ? "center" : undefined} column={!compact}>
-        <Heading>{title}</Heading>
-        {subtitle && <Subtitle>{subtitle}</Subtitle>}
+        <Heading $small={small}>{title}</Heading>
+        {subtitle && <Subtitle $small={small}>{subtitle}</Subtitle>}
       </Content>
       {actions && <Actions>{actions}</Actions>}
     </Wrapper>
@@ -27,9 +36,11 @@ const ListItem = ({ image, title, subtitle, actions }: Props) => {
 
 const Wrapper = styled.li`
   display: flex;
-  padding: ${(props) => (props.compact ? "8px" : "12px")} 0;
-  margin: 0;
-  border-bottom: 1px solid ${(props) => props.theme.divider};
+  padding: ${(props) => (props.$border === false ? 0 : "8px 0")};
+  margin: ${(props) => (props.$border === false ? "8px 0" : 0)};
+  border-bottom: 1px solid
+    ${(props) =>
+      props.$border === false ? "transparent" : props.theme.divider};
 
   &:last-child {
     border-bottom: 0;
@@ -38,16 +49,19 @@ const Wrapper = styled.li`
 
 const Image = styled(Flex)`
   padding: 0 8px 0 0;
-  max-height: 40px;
+  max-height: 32px;
   align-items: center;
   user-select: none;
   flex-shrink: 0;
-  align-self: flex-start;
+  align-self: center;
 `;
 
 const Heading = styled.p`
-  font-size: 16px;
+  font-size: ${(props) => (props.$small ? 15 : 16)}px;
   font-weight: 500;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
   line-height: 1.2;
   margin: 0;
 `;
@@ -58,8 +72,9 @@ const Content = styled(Flex)`
 
 const Subtitle = styled.p`
   margin: 0;
-  font-size: 14px;
-  color: ${(props) => props.theme.slate};
+  font-size: ${(props) => (props.$small ? 13 : 14)}px;
+  color: ${(props) => props.theme.textTertiary};
+  margin-top: -2px;
 `;
 
 const Actions = styled.div`

app/components/LocaleTime.js

@@ -1,19 +1,34 @@
 // @flow
-import distanceInWordsToNow from "date-fns/distance_in_words_to_now";
-import format from "date-fns/format";
+import { format, formatDistanceToNow } from "date-fns";
+import {
+  enUS,
+  de,
+  fr,
+  es,
+  it,
+  ko,
+  ptBR,
+  pt,
+  zhCN,
+  zhTW,
+  ru,
+} from "date-fns/locale";
 import * as React from "react";
 import Tooltip from "components/Tooltip";
 import useUserLocale from "hooks/useUserLocale";
 
 const locales = {
-  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`),
+  en_US: enUS,
+  de_DE: de,
+  es_ES: es,
+  fr_FR: fr,
+  it_IT: it,
+  ko_KR: ko,
+  pt_BR: ptBR,
+  pt_PT: pt,
+  zh_CN: zhCN,
+  zh_TW: zhTW,
+  ru_RU: ru,
 };
 
 let callbacks = [];
@@ -63,7 +78,7 @@ function LocaleTime({
     };
   }, []);
 
-  let content = distanceInWordsToNow(dateTime, {
+  let content = formatDistanceToNow(Date.parse(dateTime), {
     addSuffix,
     locale: userLocale ? locales[userLocale] : undefined,
   });
@@ -77,7 +92,7 @@ function LocaleTime({
 
   return (
     <Tooltip
-      tooltip={format(dateTime, "MMMM Do, YYYY h:mm a")}
+      tooltip={format(Date.parse(dateTime), "MMMM do, yyyy h:mm a")}
       delay={tooltipDelay}
       placement="bottom"
     >

app/components/Mask.js

@@ -8,6 +8,8 @@ import Flex from "components/Flex";
 type Props = {|
   header?: boolean,
   height?: number,
+  minWidth?: number,
+  maxWidth?: number,
 |};
 
 class Mask extends React.Component<Props> {
@@ -17,13 +19,13 @@ class Mask extends React.Component<Props> {
     return false;
   }
 
-  constructor() {
+  constructor(props: Props) {
     super();
-    this.width = randomInteger(75, 100);
+    this.width = randomInteger(props.minWidth || 75, props.maxWidth || 100);
   }
 
   render() {
-    return <Redacted width={this.width} />;
+    return <Redacted width={this.width} height={this.props.height} />;
   }
 }
 

app/components/Modal.js

@@ -3,15 +3,18 @@ import { observer } from "mobx-react";
 import { CloseIcon, BackIcon } from "outline-icons";
 import { transparentize } from "polished";
 import * as React from "react";
-import ReactModal from "react-modal";
-import styled, { createGlobalStyle } from "styled-components";
+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";
 
-ReactModal.setAppElement("#root");
+let openModals = 0;
 
 type Props = {|
   children?: React.Node,
@@ -20,44 +23,6 @@ type Props = {|
   onRequestClose: () => void,
 |};
 
-const GlobalStyles = createGlobalStyle`
-  .ReactModal__Overlay {
-    background-color: ${(props) =>
-      transparentize(0.25, props.theme.background)} !important;
-    z-index: ${(props) => props.theme.depths.modalOverlay};
-  }
-
-  ${breakpoint("tablet")`
-    .ReactModalPortal + .ReactModalPortal,
-    .ReactModalPortal + [data-react-modal-body-trap] + .ReactModalPortal {
-      .ReactModal__Overlay {
-        margin-left: 12px;
-        box-shadow: 0 -2px 10px ${(props) => props.theme.shadow};
-        border-radius: 8px 0 0 8px;
-        overflow: hidden;
-      }
-    }
-
-    .ReactModalPortal + .ReactModalPortal + .ReactModalPortal,
-    .ReactModalPortal + .ReactModalPortal + [data-react-modal-body-trap] + .ReactModalPortal {
-      .ReactModal__Overlay {
-        margin-left: 24px;
-      }
-    }
-
-    .ReactModalPortal + .ReactModalPortal + .ReactModalPortal + .ReactModalPortal,
-    .ReactModalPortal + .ReactModalPortal + .ReactModalPortal + [data-react-modal-body-trap] + .ReactModalPortal {
-      .ReactModal__Overlay {
-        margin-left: 36px;
-      }
-    }
-  `};
-
-  .ReactModal__Body--open {
-    overflow: hidden;
-  }
-`;
-
 const Modal = ({
   children,
   isOpen,
@@ -65,35 +30,112 @@ const Modal = ({
   onRequestClose,
   ...rest
 }: Props) => {
+  const dialog = useDialogState({ animated: 250 });
+  const [depth, setDepth] = React.useState(0);
+  const wasOpen = usePrevious(isOpen);
+  const { t } = useTranslation();
+
+  React.useEffect(() => {
+    if (!wasOpen && isOpen) {
+      setDepth(openModals++);
+      dialog.show();
+    }
+    if (wasOpen && !isOpen) {
+      setDepth(openModals--);
+      dialog.hide();
+    }
+  }, [dialog, wasOpen, isOpen]);
+
+  useUnmount(() => {
+    if (isOpen) {
+      openModals--;
+    }
+  });
+
   if (!isOpen) return null;
 
   return (
-    <>
-      <GlobalStyles />
-      <StyledModal
-        contentLabel={title}
-        onRequestClose={onRequestClose}
-        isOpen={isOpen}
-        {...rest}
-      >
-        <Content>
-          <Centered onClick={(ev) => ev.stopPropagation()} column>
-            {title && <h1>{title}</h1>}
-            {children}
-          </Centered>
-        </Content>
-        <Back onClick={onRequestClose}>
-          <BackIcon size={32} color="currentColor" />
-          <Text>Back</Text>
-        </Back>
-        <Close onClick={onRequestClose}>
-          <CloseIcon size={32} color="currentColor" />
-        </Close>
-      </StyledModal>
-    </>
+    <DialogBackdrop {...dialog}>
+      {(props) => (
+        <Backdrop {...props}>
+          <Dialog
+            {...dialog}
+            aria-label={title}
+            preventBodyScrollhideOnEsc
+            hide={onRequestClose}
+          >
+            {(props) => (
+              <Scene
+                $nested={!!depth}
+                style={{ marginLeft: `${depth * 12}px` }}
+                {...props}
+              >
+                <Content>
+                  <Centered onClick={(ev) => ev.stopPropagation()} column>
+                    {title && <h1>{title}</h1>}
+                    {children}
+                  </Centered>
+                </Content>
+                <Back onClick={onRequestClose}>
+                  <BackIcon size={32} color="currentColor" />
+                  <Text>{t("Back")}</Text>
+                </Back>
+                <Close onClick={onRequestClose}>
+                  <CloseIcon size={32} color="currentColor" />
+                </Close>
+              </Scene>
+            )}
+          </Dialog>
+        </Backdrop>
+      )}
+    </DialogBackdrop>
   );
 };
 
+const Backdrop = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: ${(props) =>
+    transparentize(0.25, props.theme.background)} !important;
+  z-index: ${(props) => props.theme.depths.modalOverlay};
+  transition: opacity 50ms ease-in-out;
+  opacity: 0;
+
+  &[data-enter] {
+    opacity: 1;
+  }
+`;
+
+const Scene = styled.div`
+  animation: ${fadeAndScaleIn} 250ms ease;
+
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: ${(props) => props.theme.depths.modal};
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  background: ${(props) => props.theme.background};
+  transition: ${(props) => props.theme.backgroundTransition};
+  outline: none;
+
+  ${breakpoint("tablet")`
+  ${(props) =>
+    props.$nested &&
+    `
+      box-shadow: 0 -2px 10px ${props.theme.shadow};
+      border-radius: 8px 0 0 8px;
+      overflow: hidden;
+  `}
+`}
+`;
+
 const Content = styled(Scrollable)`
   width: 100%;
   padding: 8vh 2rem 2rem;
@@ -110,23 +152,6 @@ const Centered = styled(Flex)`
   margin: 0 auto;
 `;
 
-const StyledModal = styled(ReactModal)`
-  animation: ${fadeAndScaleIn} 250ms ease;
-
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  z-index: ${(props) => props.theme.depths.modal};
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-  background: ${(props) => props.theme.background};
-  transition: ${(props) => props.theme.backgroundTransition};
-  outline: none;
-`;
-
 const Text = styled.span`
   font-size: 16px;
   font-weight: 500;

app/components/NoticeAlert.js

@@ -11,7 +11,7 @@ export default function AlertNotice({ children }: { children: React.Node }) {
         viewBox="0 0 16 16"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
-        style={{ position: "relative", top: "2px" }}
+        style={{ position: "relative", top: "2px", marginRight: "4px" }}
       >
         <path
           d="M15.6676 11.5372L10.0155 1.14735C9.10744 -0.381434 6.89378 -0.383465 5.98447 1.14735L0.332715 11.5372C-0.595598 13.0994 0.528309 15.0776 2.34778 15.0776H13.652C15.47 15.0776 16.5959 13.101 15.6676 11.5372ZM8 13.2026C7.48319 13.2026 7.0625 12.7819 7.0625 12.2651C7.0625 11.7483 7.48319 11.3276 8 11.3276C8.51681 11.3276 8.9375 11.7483 8.9375 12.2651C8.9375 12.7819 8.51681 13.2026 8 13.2026ZM8.9375 9.45257C8.9375 9.96938 8.51681 10.3901 8 10.3901C7.48319 10.3901 7.0625 9.96938 7.0625 9.45257V4.76507C7.0625 4.24826 7.48319 3.82757 8 3.82757C8.51681 3.82757 8.9375 4.24826 8.9375 4.76507V9.45257Z"

app/components/NudeButton.js

@@ -3,8 +3,8 @@ import * as React from "react";
 import styled from "styled-components";
 
 const Button = styled.button`
-  width: ${(props) => props.size}px;
-  height: ${(props) => props.size}px;
+  width: ${(props) => props.width || props.size}px;
+  height: ${(props) => props.height || props.size}px;
   background: none;
   border-radius: 4px;
   line-height: 0;

app/components/PageTheme.js

@@ -19,15 +19,10 @@ export default function PageTheme() {
       themeElement.setAttribute("content", theme.background);
     }
 
-    // status bar color for iOS PWA
-    const statusElement = document.querySelector(
-      'meta[name="apple-mobile-web-app-status-bar-style"]'
-    );
-    if (statusElement) {
-      statusElement.setAttribute(
-        "content",
-        ui.resolvedTheme === "dark" ? "black-translucent" : "default"
-      );
+    // user-agent controls and scrollbars
+    const csElement = document.querySelector('meta[name="color-scheme"]');
+    if (csElement) {
+      csElement.setAttribute("content", ui.resolvedTheme);
     }
   }, [theme, ui.resolvedTheme]);
 

app/components/PageTitle.js

@@ -19,12 +19,16 @@ const PageTitle = ({ title, favicon }: Props) => {
       <title>
         {team && team.name ? `${title} - ${team.name}` : `${title} - Outline`}
       </title>
-      <link
-        rel="shortcut icon"
-        type="image/png"
-        href={favicon || cdnPath("/favicon-32.png")}
-        sizes="32x32"
-      />
+      {favicon ? (
+        <link rel="shortcut icon" href={favicon} />
+      ) : (
+        <link
+          rel="shortcut icon"
+          type="image/png"
+          href={cdnPath("/favicon-32.png")}
+          sizes="32x32"
+        />
+      )}
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     </Helmet>
   );

app/components/PaginatedList.js

@@ -38,14 +38,24 @@ class PaginatedList extends React.Component<Props> {
   }
 
   componentDidUpdate(prevProps: Props) {
-    if (prevProps.fetch !== this.props.fetch) {
-      this.fetchResults();
-    }
-    if (!isEqual(prevProps.options, this.props.options)) {
+    if (
+      prevProps.fetch !== this.props.fetch ||
+      !isEqual(prevProps.options, this.props.options)
+    ) {
+      this.reset();
       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;
 

app/components/PaginatedList.test.js

@@ -0,0 +1,84 @@
+// @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 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,
+    });
+  });
+});

app/components/Popover.js

@@ -0,0 +1,34 @@
+// @flow
+import * as React from "react";
+import { Popover as ReakitPopover } from "reakit/Popover";
+import styled from "styled-components";
+import { fadeAndScaleIn } from "shared/styles/animations";
+
+type Props = {
+  children: React.Node,
+  width?: number,
+};
+
+function Popover({ children, width = 380, ...rest }: Props) {
+  return (
+    <ReakitPopover {...rest}>
+      <Contents width={width}>{children}</Contents>
+    </ReakitPopover>
+  );
+}
+
+const Contents = styled.div`
+  animation: ${fadeAndScaleIn} 200ms ease;
+  transform-origin: 75% 0;
+  background: ${(props) => props.theme.menuBackground};
+  border-radius: 6px;
+  padding: 12px 24px;
+  max-height: 50vh;
+  overflow-y: scroll;
+  width: ${(props) => props.width}px;
+  box-shadow: ${(props) => props.theme.menuShadow};
+  border: ${(props) =>
+    props.theme.menuBorder ? `1px solid ${props.theme.menuBorder}` : "none"};
+`;
+
+export default Popover;

app/components/Scene.js

@@ -12,6 +12,7 @@ type Props = {|
   children: React.Node,
   breadcrumb?: React.Node,
   actions?: React.Node,
+  centered?: boolean,
 |};
 
 function Scene({
@@ -21,6 +22,7 @@ function Scene({
   actions,
   breadcrumb,
   children,
+  centered,
 }: Props) {
   return (
     <FillWidth>
@@ -38,7 +40,11 @@ function Scene({
         actions={actions}
         breadcrumb={breadcrumb}
       />
-      <CenteredContent withStickyHeader>{children}</CenteredContent>
+      {centered !== false ? (
+        <CenteredContent withStickyHeader>{children}</CenteredContent>
+      ) : (
+        children
+      )}
     </FillWidth>
   );
 }

app/components/Scrollable.js

@@ -8,9 +8,10 @@ type Props = {|
   shadow?: boolean,
   topShadow?: boolean,
   bottomShadow?: boolean,
+  flex?: boolean,
 |};
 
-function Scrollable({ shadow, topShadow, bottomShadow, ...rest }: Props) {
+function Scrollable({ shadow, topShadow, bottomShadow, flex, ...rest }: Props) {
   const ref = React.useRef<?HTMLDivElement>();
   const [topShadowVisible, setTopShadow] = React.useState(false);
   const [bottomShadowVisible, setBottomShadow] = React.useState(false);
@@ -42,6 +43,7 @@ function Scrollable({ shadow, topShadow, bottomShadow, ...rest }: Props) {
     <Wrapper
       ref={ref}
       onScroll={updateShadows}
+      $flex={flex}
       $topShadowVisible={topShadowVisible}
       $bottomShadowVisible={bottomShadowVisible}
       {...rest}
@@ -50,6 +52,8 @@ function Scrollable({ shadow, topShadow, bottomShadow, ...rest }: Props) {
 }
 
 const Wrapper = styled.div`
+  display: ${(props) => (props.$flex ? "flex" : "block")};
+  flex-direction: column;
   height: 100%;
   overflow-y: auto;
   overflow-x: hidden;

app/components/Sidebar/Main.js

@@ -12,6 +12,8 @@ import {
   SettingsIcon,
 } from "outline-icons";
 import * as React from "react";
+import { DndProvider } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import CollectionNew from "scenes/CollectionNew";
@@ -63,137 +65,150 @@ function MainSidebar() {
     setInviteModalOpen(false);
   }, []);
 
+  const [dndArea, setDndArea] = React.useState();
+  const handleSidebarRef = React.useCallback((node) => setDndArea(node), []);
+  const html5Options = React.useMemo(() => ({ rootElement: dndArea }), [
+    dndArea,
+  ]);
+
   const { user, team } = auth;
   if (!user || !team) return null;
 
   const can = policies.abilities(team.id);
 
   return (
-    <Sidebar>
-      <AccountMenu>
-        {(props) => (
-          <TeamButton
-            {...props}
-            subheading={user.name}
-            teamName={team.name}
-            logoUrl={team.avatarUrl}
-            showDisclosure
-          />
-        )}
-      </AccountMenu>
-      <Flex auto column>
-        <Scrollable shadow>
-          <Section>
-            <SidebarLink
-              to="/home"
-              icon={<HomeIcon color="currentColor" />}
-              exact={false}
-              label={t("Home")}
-            />
-            <SidebarLink
-              to={{
-                pathname: "/search",
-                state: { fromMenu: true },
-              }}
-              icon={<SearchIcon color="currentColor" />}
-              label={t("Search")}
-              exact={false}
-            />
-            <SidebarLink
-              to="/starred"
-              icon={<StarredIcon color="currentColor" />}
-              exact={false}
-              label={t("Starred")}
-            />
-            <SidebarLink
-              to="/templates"
-              icon={<ShapesIcon color="currentColor" />}
-              exact={false}
-              label={t("Templates")}
-              active={documents.active ? documents.active.template : undefined}
-            />
-            <SidebarLink
-              to="/drafts"
-              icon={<EditIcon color="currentColor" />}
-              label={
-                <Drafts align="center">
-                  {t("Drafts")}
-                  <Bubble count={documents.totalDrafts} />
-                </Drafts>
-              }
-              active={
-                documents.active
-                  ? !documents.active.publishedAt &&
-                    !documents.active.isDeleted &&
-                    !documents.active.isTemplate
-                  : undefined
-              }
-            />
-          </Section>
-          <Section>
-            <Collections onCreateCollection={handleCreateCollectionModalOpen} />
-          </Section>
-        </Scrollable>
-        <Secondary>
-          <Section>
-            <SidebarLink
-              to="/archive"
-              icon={<ArchiveIcon color="currentColor" />}
-              exact={false}
-              label={t("Archive")}
-              active={
-                documents.active
-                  ? documents.active.isArchived && !documents.active.isDeleted
-                  : undefined
-              }
-            />
-            <SidebarLink
-              to="/trash"
-              icon={<TrashIcon color="currentColor" />}
-              exact={false}
-              label={t("Trash")}
-              active={documents.active ? documents.active.isDeleted : undefined}
-            />
-            <SidebarLink
-              to="/settings"
-              icon={<SettingsIcon color="currentColor" />}
-              exact={false}
-              label={t("Settings")}
-            />
-            {can.invite && (
-              <SidebarLink
-                to="/settings/people"
-                onClick={handleInviteModalOpen}
-                icon={<PlusIcon color="currentColor" />}
-                label={`${t("Invite people")}…`}
+    <Sidebar ref={handleSidebarRef}>
+      {dndArea && (
+        <DndProvider backend={HTML5Backend} options={html5Options}>
+          <AccountMenu>
+            {(props) => (
+              <TeamButton
+                {...props}
+                subheading={user.name}
+                teamName={team.name}
+                logoUrl={team.avatarUrl}
+                showDisclosure
               />
             )}
-          </Section>
-        </Secondary>
-      </Flex>
-      <Modal
-        title={t("Invite people")}
-        onRequestClose={handleInviteModalClose}
-        isOpen={inviteModalOpen}
-      >
-        <Invite onSubmit={handleInviteModalClose} />
-      </Modal>
-      <Modal
-        title={t("Create a collection")}
-        onRequestClose={handleCreateCollectionModalClose}
-        isOpen={createCollectionModalOpen}
-      >
-        <CollectionNew onSubmit={handleCreateCollectionModalClose} />
-      </Modal>
+          </AccountMenu>
+          <Scrollable flex topShadow>
+            <Section>
+              <SidebarLink
+                to="/home"
+                icon={<HomeIcon color="currentColor" />}
+                exact={false}
+                label={t("Home")}
+              />
+              <SidebarLink
+                to={{
+                  pathname: "/search",
+                  state: { fromMenu: true },
+                }}
+                icon={<SearchIcon color="currentColor" />}
+                label={t("Search")}
+                exact={false}
+              />
+              <SidebarLink
+                to="/starred"
+                icon={<StarredIcon color="currentColor" />}
+                exact={false}
+                label={t("Starred")}
+              />
+              {can.createDocument && (
+                <SidebarLink
+                  to="/templates"
+                  icon={<ShapesIcon color="currentColor" />}
+                  exact={false}
+                  label={t("Templates")}
+                  active={
+                    documents.active ? documents.active.template : undefined
+                  }
+                />
+              )}
+              {can.createDocument && (
+                <SidebarLink
+                  to="/drafts"
+                  icon={<EditIcon color="currentColor" />}
+                  label={
+                    <Drafts align="center">
+                      {t("Drafts")}
+                      <Bubble count={documents.totalDrafts} />
+                    </Drafts>
+                  }
+                  active={
+                    documents.active
+                      ? !documents.active.publishedAt &&
+                        !documents.active.isDeleted &&
+                        !documents.active.isTemplate
+                      : undefined
+                  }
+                />
+              )}
+            </Section>
+            <Section auto>
+              <Collections
+                onCreateCollection={handleCreateCollectionModalOpen}
+              />
+            </Section>
+            <Section>
+              <SidebarLink
+                to="/archive"
+                icon={<ArchiveIcon color="currentColor" />}
+                exact={false}
+                label={t("Archive")}
+                active={
+                  documents.active
+                    ? documents.active.isArchived && !documents.active.isDeleted
+                    : undefined
+                }
+              />
+              <SidebarLink
+                to="/trash"
+                icon={<TrashIcon color="currentColor" />}
+                exact={false}
+                label={t("Trash")}
+                active={
+                  documents.active ? documents.active.isDeleted : undefined
+                }
+              />
+              <SidebarLink
+                to="/settings"
+                icon={<SettingsIcon color="currentColor" />}
+                exact={false}
+                label={t("Settings")}
+              />
+              {can.inviteUser && (
+                <SidebarLink
+                  to="/settings/members"
+                  onClick={handleInviteModalOpen}
+                  icon={<PlusIcon color="currentColor" />}
+                  label={`${t("Invite people")}…`}
+                />
+              )}
+            </Section>
+          </Scrollable>
+          {can.inviteUser && (
+            <Modal
+              title={t("Invite people")}
+              onRequestClose={handleInviteModalClose}
+              isOpen={inviteModalOpen}
+            >
+              <Invite onSubmit={handleInviteModalClose} />
+            </Modal>
+          )}
+          <Modal
+            title={t("Create a collection")}
+            onRequestClose={handleCreateCollectionModalClose}
+            isOpen={createCollectionModalOpen}
+          >
+            <CollectionNew onSubmit={handleCreateCollectionModalClose} />
+          </Modal>
+        </DndProvider>
+      )}
     </Sidebar>
   );
 }
 
-const Secondary = styled.div`
-  overflow-x: hidden;
-  flex-shrink: 0;
-`;
-
 const Drafts = styled(Flex)`
   height: 24px;
 `;

app/components/Sidebar/Settings.js

@@ -19,14 +19,14 @@ import styled from "styled-components";
 import Flex from "components/Flex";
 import Scrollable from "components/Scrollable";
 
+import SlackIcon from "components/SlackIcon";
+import ZapierIcon from "components/ZapierIcon";
 import Sidebar from "./Sidebar";
 import Header from "./components/Header";
 import Section from "./components/Section";
 import SidebarLink from "./components/SidebarLink";
 import TeamButton from "./components/TeamButton";
 import Version from "./components/Version";
-import SlackIcon from "./icons/Slack";
-import ZapierIcon from "./icons/Zapier";
 import env from "env";
 import useCurrentTeam from "hooks/useCurrentTeam";
 import useStores from "hooks/useStores";
@@ -71,11 +71,13 @@ function SettingsSidebar() {
               icon={<EmailIcon color="currentColor" />}
               label={t("Notifications")}
             />
-            <SidebarLink
-              to="/settings/tokens"
-              icon={<CodeIcon color="currentColor" />}
-              label={t("API Tokens")}
-            />
+            {can.createApiKey && (
+              <SidebarLink
+                to="/settings/tokens"
+                icon={<CodeIcon color="currentColor" />}
+                label={t("API Tokens")}
+              />
+            )}
           </Section>
           <Section>
             <Header>{t("Team")}</Header>
@@ -94,10 +96,10 @@ function SettingsSidebar() {
               />
             )}
             <SidebarLink
-              to="/settings/people"
+              to="/settings/members"
               icon={<UserIcon color="currentColor" />}
               exact={false}
-              label={t("People")}
+              label={t("Members")}
             />
             <SidebarLink
               to="/settings/groups"
@@ -112,9 +114,9 @@ function SettingsSidebar() {
             />
             {can.export && (
               <SidebarLink
-                to="/settings/export"
+                to="/settings/import-export"
                 icon={<DocumentIcon color="currentColor" />}
-                label={t("Export Data")}
+                label={`${t("Import")} / ${t("Export")}`}
               />
             )}
           </Section>

app/components/Sidebar/Sidebar.js

@@ -6,6 +6,7 @@ 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";
@@ -13,158 +14,148 @@ import Toggle, { ToggleButton, Positioner } from "./components/Toggle";
 import usePrevious from "hooks/usePrevious";
 import useStores from "hooks/useStores";
 
-let firstRender = true;
 let ANIMATION_MS = 250;
+let isFirstRender = true;
 
-type Props = {
+type Props = {|
   children: React.Node,
-};
+|};
 
-function Sidebar({ children }: Props) {
-  const [isCollapsing, setCollapsing] = React.useState(false);
-  const theme = useTheme();
-  const { t } = useTranslation();
-  const { ui } = useStores();
-  const location = useLocation();
-  const previousLocation = usePrevious(location);
+const Sidebar = React.forwardRef<Props, HTMLButtonElement>(
+  ({ children }: Props, ref) => {
+    const [isCollapsing, setCollapsing] = React.useState(false);
+    const theme = useTheme();
+    const { t } = useTranslation();
+    const { ui } = useStores();
+    const location = useLocation();
+    const previousLocation = usePrevious(location);
 
-  const width = ui.sidebarWidth;
-  const collapsed = ui.isEditing || ui.sidebarCollapsed;
-  const maxWidth = theme.sidebarMaxWidth;
-  const minWidth = theme.sidebarMinWidth + 16; // padding
-  const setWidth = ui.setSidebarWidth;
+    const width = ui.sidebarWidth;
+    const collapsed = ui.isEditing || ui.sidebarCollapsed;
+    const maxWidth = theme.sidebarMaxWidth;
+    const minWidth = theme.sidebarMinWidth + 16; // padding
+    const setWidth = ui.setSidebarWidth;
 
-  const [offset, setOffset] = React.useState(0);
-  const [isAnimating, setAnimating] = React.useState(false);
-  const [isResizing, setResizing] = React.useState(false);
-  const isSmallerThanMinimum = width < minWidth;
+    const [offset, setOffset] = React.useState(0);
+    const [isAnimating, setAnimating] = React.useState(false);
+    const [isResizing, setResizing] = React.useState(false);
+    const isSmallerThanMinimum = width < minWidth;
 
-  const handleDrag = React.useCallback(
-    (event: MouseEvent) => {
-      // suppresses text selection
-      event.preventDefault();
+    const handleDrag = React.useCallback(
+      (event: MouseEvent) => {
+        // suppresses text selection
+        event.preventDefault();
 
-      // this is simple because the sidebar is always against the left edge
-      const width = Math.min(event.pageX - offset, maxWidth);
-      const isSmallerThanCollapsePoint = width < minWidth / 2;
-
-      if (isSmallerThanCollapsePoint) {
-        setWidth(theme.sidebarCollapsedWidth);
-      } else {
-        setWidth(width);
-      }
-    },
-    [theme, offset, minWidth, maxWidth, setWidth]
-  );
-
-  const handleStopDrag = React.useCallback(
-    (event: MouseEvent) => {
-      setResizing(false);
-
-      if (document.activeElement) {
-        document.activeElement.blur();
-      }
-
-      if (isSmallerThanMinimum) {
+        // this is simple because the sidebar is always against the left edge
+        const width = Math.min(event.pageX - offset, maxWidth);
         const isSmallerThanCollapsePoint = width < minWidth / 2;
 
         if (isSmallerThanCollapsePoint) {
-          setAnimating(false);
-          setCollapsing(true);
-          ui.collapseSidebar();
+          setWidth(theme.sidebarCollapsedWidth);
         } else {
-          setWidth(minWidth);
-          setAnimating(true);
+          setWidth(width);
         }
-      } else {
-        setWidth(width);
+      },
+      [theme, offset, minWidth, maxWidth, setWidth]
+    );
+
+    const handleStopDrag = React.useCallback(
+      (event: MouseEvent) => {
+        setResizing(false);
+
+        if (document.activeElement) {
+          document.activeElement.blur();
+        }
+
+        if (isSmallerThanMinimum) {
+          const isSmallerThanCollapsePoint = width < minWidth / 2;
+
+          if (isSmallerThanCollapsePoint) {
+            setAnimating(false);
+            setCollapsing(true);
+            ui.collapseSidebar();
+          } else {
+            setWidth(minWidth);
+            setAnimating(true);
+          }
+        } else {
+          setWidth(width);
+        }
+      },
+      [ui, isSmallerThanMinimum, minWidth, width, setWidth]
+    );
+
+    const handleMouseDown = React.useCallback(
+      (event: MouseEvent) => {
+        setOffset(event.pageX - width);
+        setResizing(true);
+        setAnimating(false);
+      },
+      [width]
+    );
+
+    React.useEffect(() => {
+      if (isAnimating) {
+        setTimeout(() => setAnimating(false), ANIMATION_MS);
       }
-    },
-    [ui, isSmallerThanMinimum, minWidth, width, setWidth]
-  );
+    }, [isAnimating]);
 
-  const handleMouseDown = React.useCallback(
-    (event: MouseEvent) => {
-      setOffset(event.pageX - width);
-      setResizing(true);
-      setAnimating(false);
-    },
-    [width]
-  );
+    React.useEffect(() => {
+      if (isCollapsing) {
+        setTimeout(() => {
+          setWidth(minWidth);
+          setCollapsing(false);
+        }, ANIMATION_MS);
+      }
+    }, [setWidth, minWidth, isCollapsing]);
 
-  React.useEffect(() => {
-    if (isAnimating) {
-      setTimeout(() => setAnimating(false), ANIMATION_MS);
-    }
-  }, [isAnimating]);
+    React.useEffect(() => {
+      if (isResizing) {
+        document.addEventListener("mousemove", handleDrag);
+        document.addEventListener("mouseup", handleStopDrag);
+      }
 
-  React.useEffect(() => {
-    if (isCollapsing) {
-      setTimeout(() => {
-        setWidth(minWidth);
-        setCollapsing(false);
-      }, ANIMATION_MS);
-    }
-  }, [setWidth, minWidth, isCollapsing]);
+      return () => {
+        document.removeEventListener("mousemove", handleDrag);
+        document.removeEventListener("mouseup", handleStopDrag);
+      };
+    }, [isResizing, handleDrag, handleStopDrag]);
 
-  React.useEffect(() => {
-    if (isResizing) {
-      document.addEventListener("mousemove", handleDrag);
-      document.addEventListener("mouseup", handleStopDrag);
-    }
+    const handleReset = React.useCallback(() => {
+      ui.setSidebarWidth(theme.sidebarWidth);
+    }, [ui, theme.sidebarWidth]);
 
-    return () => {
-      document.removeEventListener("mousemove", handleDrag);
-      document.removeEventListener("mouseup", handleStopDrag);
-    };
-  }, [isResizing, handleDrag, handleStopDrag]);
+    React.useEffect(() => {
+      ui.setSidebarResizing(isResizing);
+    }, [ui, isResizing]);
 
-  const handleReset = React.useCallback(() => {
-    ui.setSidebarWidth(theme.sidebarWidth);
-  }, [ui, theme.sidebarWidth]);
+    React.useEffect(() => {
+      if (location !== previousLocation) {
+        isFirstRender = false;
+        ui.hideMobileSidebar();
+      }
+    }, [ui, location, previousLocation]);
 
-  React.useEffect(() => {
-    ui.setSidebarResizing(isResizing);
-  }, [ui, isResizing]);
+    const style = React.useMemo(
+      () => ({
+        width: `${width}px`,
+      }),
+      [width]
+    );
 
-  React.useEffect(() => {
-    if (location !== previousLocation) {
-      ui.hideMobileSidebar();
-    }
-  }, [ui, location, previousLocation]);
+    const toggleStyle = React.useMemo(
+      () => ({
+        right: "auto",
+        marginLeft: `${collapsed ? theme.sidebarCollapsedWidth : width}px`,
+      }),
+      [width, theme.sidebarCollapsedWidth, collapsed]
+    );
 
-  const style = React.useMemo(
-    () => ({
-      width: `${width}px`,
-    }),
-    [width]
-  );
-
-  const toggleStyle = React.useMemo(
-    () => ({
-      right: "auto",
-      marginLeft: `${collapsed ? theme.sidebarCollapsedWidth : width}px`,
-    }),
-    [width, theme.sidebarCollapsedWidth, collapsed]
-  );
-
-  const content = (
-    <>
-      <Container
-        style={style}
-        $sidebarWidth={ui.sidebarWidth}
-        $isCollapsing={isCollapsing}
-        $isAnimating={isAnimating}
-        $isSmallerThanMinimum={isSmallerThanMinimum}
-        $mobileSidebarVisible={ui.mobileSidebarVisible}
-        $collapsed={collapsed}
-        column
-      >
+    const content = (
+      <>
         {ui.mobileSidebarVisible && (
           <Portal>
-            <Fade>
-              <Background onClick={ui.toggleMobileSidebar} />
-            </Fade>
+            <Backdrop onClick={ui.toggleMobileSidebar} />
           </Portal>
         )}
         {children}
@@ -180,28 +171,39 @@ function Sidebar({ children }: Props) {
             aria-label={t("Expand")}
           />
         )}
-      </Container>
-      {!ui.isEditing && (
-        <Toggle
-          style={toggleStyle}
-          onClick={ui.toggleCollapsedSidebar}
-          direction={ui.sidebarCollapsed ? "right" : "left"}
-          aria-label={ui.sidebarCollapsed ? t("Expand") : t("Collapse")}
-        />
-      )}
-    </>
-  );
+      </>
+    );
 
-  // Fade in the sidebar on first render after page load
-  if (firstRender) {
-    firstRender = false;
-    return <Fade>{content}</Fade>;
+    return (
+      <>
+        <Container
+          ref={ref}
+          style={style}
+          $sidebarWidth={ui.sidebarWidth}
+          $isCollapsing={isCollapsing}
+          $isAnimating={isAnimating}
+          $isSmallerThanMinimum={isSmallerThanMinimum}
+          $mobileSidebarVisible={ui.mobileSidebarVisible}
+          $collapsed={collapsed}
+          column
+        >
+          {isFirstRender ? <Fade>{content}</Fade> : content}
+        </Container>
+        {!ui.isEditing && (
+          <Toggle
+            style={toggleStyle}
+            onClick={ui.toggleCollapsedSidebar}
+            direction={ui.sidebarCollapsed ? "right" : "left"}
+            aria-label={ui.sidebarCollapsed ? t("Expand") : t("Collapse")}
+          />
+        )}
+      </>
+    );
   }
+);
 
-  return content;
-}
-
-const Background = styled.a`
+const Backdrop = styled.a`
+  animation: ${fadeIn} 250ms ease-in-out;
   position: fixed;
   top: 0;
   left: 0;
@@ -209,7 +211,7 @@ const Background = styled.a`
   right: 0;
   cursor: default;
   z-index: ${(props) => props.theme.depths.sidebar - 1};
-  background: rgba(0, 0, 0, 0.5);
+  background: ${(props) => props.theme.backdrop};
 `;
 
 const Container = styled(Flex)`
@@ -240,7 +242,6 @@ const Container = styled(Flex)`
 
   ${breakpoint("tablet")`
     margin: 0;
-    z-index: 3;
     min-width: 0;
     transform: translateX(${(props) =>
       props.$collapsed ? "calc(-100% + 16px)" : 0});

app/components/Sidebar/components/CollectionLink.js

@@ -1,15 +1,15 @@
 // @flow
+import fractionalIndex from "fractional-index";
 import { observer } from "mobx-react";
 import * as React from "react";
-import { useDrop } from "react-dnd";
+import { useDrop, useDrag } from "react-dnd";
 import styled from "styled-components";
-import UiStore from "stores/UiStore";
 import Collection from "models/Collection";
 import Document from "models/Document";
 import CollectionIcon from "components/CollectionIcon";
-import DropToImport from "components/DropToImport";
 import DocumentLink from "./DocumentLink";
 import DropCursor from "./DropCursor";
+import DropToImport from "./DropToImport";
 import EditableTitle from "./EditableTitle";
 import SidebarLink from "./SidebarLink";
 import useStores from "hooks/useStores";
@@ -18,10 +18,12 @@ import CollectionSortMenu from "menus/CollectionSortMenu";
 
 type Props = {|
   collection: Collection,
-  ui: UiStore,
   canUpdate: boolean,
   activeDocument: ?Document,
   prefetchDocument: (id: string) => Promise<void>,
+  belowCollection: Collection | void,
+  isDraggingAnyCollection: boolean,
+  onChangeDragging: (dragging: boolean) => void,
 |};
 
 function CollectionLink({
@@ -29,7 +31,9 @@ function CollectionLink({
   activeDocument,
   prefetchDocument,
   canUpdate,
-  ui,
+  belowCollection,
+  isDraggingAnyCollection,
+  onChangeDragging,
 }: Props) {
   const [menuOpen, setMenuOpen] = React.useState(false);
 
@@ -40,10 +44,23 @@ function CollectionLink({
     [collection]
   );
 
-  const { documents, policies } = useStores();
-  const expanded = collection.id === ui.activeCollectionId;
+  const { ui, documents, policies, collections } = useStores();
+
+  const [expanded, setExpanded] = React.useState(
+    collection.id === ui.activeCollectionId
+  );
+
+  React.useEffect(() => {
+    if (isDraggingAnyCollection) {
+      setExpanded(false);
+    } else {
+      setExpanded(collection.id === ui.activeCollectionId);
+    }
+  }, [isDraggingAnyCollection, collection.id, ui.activeCollectionId]);
+
   const manualSort = collection.sort.field === "index";
   const can = policies.abilities(collection.id);
+  const belowCollectionIndex = belowCollection ? belowCollection.index : null;
 
   // Drop to re-parent
   const [{ isOver, canDrop }, drop] = useDrop({
@@ -74,49 +91,101 @@ function CollectionLink({
     }),
   });
 
+  // Drop to reorder Collection
+  const [{ isCollectionDropping }, dropToReorderCollection] = useDrop({
+    accept: "collection",
+    drop: async (item, monitor) => {
+      collections.move(
+        item.id,
+        fractionalIndex(collection.index, belowCollectionIndex)
+      );
+    },
+    canDrop: (item, monitor) => {
+      return (
+        collection.id !== item.id &&
+        (!belowCollection || item.id !== belowCollection.id)
+      );
+    },
+    collect: (monitor) => ({
+      isCollectionDropping: monitor.isOver(),
+    }),
+  });
+
+  // Drag to reorder Collection
+  const [{ isCollectionDragging }, dragToReorderCollection] = useDrag({
+    type: "collection",
+    item: () => {
+      onChangeDragging(true);
+      return {
+        id: collection.id,
+      };
+    },
+    collect: (monitor) => ({
+      isCollectionDragging: monitor.isDragging(),
+    }),
+    canDrag: (monitor) => {
+      return can.move;
+    },
+    end: (monitor) => {
+      onChangeDragging(false);
+    },
+  });
+
   return (
     <>
       <div ref={drop} style={{ position: "relative" }}>
-        <DropToImport key={collection.id} collectionId={collection.id}>
-          <SidebarLinkWithPadding
-            key={collection.id}
-            to={collection.url}
-            icon={
-              <CollectionIcon collection={collection} expanded={expanded} />
-            }
-            iconColor={collection.color}
-            expanded={expanded}
-            showActions={menuOpen || expanded}
-            isActiveDrop={isOver && canDrop}
-            label={
-              <EditableTitle
-                title={collection.name}
-                onSubmit={handleTitleChange}
-                canUpdate={canUpdate}
-              />
-            }
-            exact={false}
-            menu={
-              <>
-                {can.update && (
-                  <CollectionSortMenuWithMargin
+        <Draggable
+          key={collection.id}
+          ref={dragToReorderCollection}
+          $isDragging={isCollectionDragging}
+          $isMoving={isCollectionDragging}
+        >
+          <DropToImport collectionId={collection.id}>
+            <SidebarLinkWithPadding
+              to={collection.url}
+              icon={
+                <CollectionIcon collection={collection} expanded={expanded} />
+              }
+              iconColor={collection.color}
+              expanded={expanded}
+              showActions={menuOpen || expanded}
+              isActiveDrop={isOver && canDrop}
+              label={
+                <EditableTitle
+                  title={collection.name}
+                  onSubmit={handleTitleChange}
+                  canUpdate={canUpdate}
+                />
+              }
+              exact={false}
+              menu={
+                <>
+                  {can.update && (
+                    <CollectionSortMenuWithMargin
+                      collection={collection}
+                      onOpen={() => setMenuOpen(true)}
+                      onClose={() => setMenuOpen(false)}
+                    />
+                  )}
+                  <CollectionMenu
                     collection={collection}
                     onOpen={() => setMenuOpen(true)}
                     onClose={() => setMenuOpen(false)}
                   />
-                )}
-                <CollectionMenu
-                  collection={collection}
-                  onOpen={() => setMenuOpen(true)}
-                  onClose={() => setMenuOpen(false)}
-                />
-              </>
-            }
-          />
-        </DropToImport>
+                </>
+              }
+            />
+          </DropToImport>
+        </Draggable>
         {expanded && manualSort && (
           <DropCursor isActiveDrop={isOverReorder} innerRef={dropToReorder} />
         )}
+        {isDraggingAnyCollection && (
+          <DropCursor
+            isActiveDrop={isCollectionDropping}
+            innerRef={dropToReorderCollection}
+          />
+        )}
       </div>
 
       {expanded &&
@@ -136,6 +205,11 @@ function CollectionLink({
   );
 }
 
+const Draggable = styled("div")`
+  opacity: ${(props) => (props.$isDragging || props.$isMoving ? 0.5 : 1)};
+  pointer-events: ${(props) => (props.$isMoving ? "none" : "auto")};
+`;
+
 const SidebarLinkWithPadding = styled(SidebarLink)`
   padding-right: 60px;
 `;

app/components/Sidebar/components/Collections.js

@@ -1,98 +1,121 @@
 // @flow
-import { observer, inject } from "mobx-react";
+import fractionalIndex from "fractional-index";
+import { observer } from "mobx-react";
 import { PlusIcon } from "outline-icons";
 import * as React from "react";
-import { withTranslation, type TFunction } from "react-i18next";
-import keydown from "react-keydown";
-import { withRouter, type RouterHistory } from "react-router-dom";
-
-import CollectionsStore from "stores/CollectionsStore";
-import DocumentsStore from "stores/DocumentsStore";
-import PoliciesStore from "stores/PoliciesStore";
-import UiStore from "stores/UiStore";
+import { useDrop } from "react-dnd";
+import { useTranslation } from "react-i18next";
 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 SidebarLink from "./SidebarLink";
-import { newDocumentUrl } from "utils/routeHelpers";
-
+import useCurrentTeam from "hooks/useCurrentTeam";
 type Props = {
-  history: RouterHistory,
-  policies: PoliciesStore,
-  collections: CollectionsStore,
-  documents: DocumentsStore,
   onCreateCollection: () => void,
-  ui: UiStore,
-  t: TFunction,
 };
 
-@observer
-class Collections extends React.Component<Props> {
-  isPreloaded: boolean = !!this.props.collections.orderedData.length;
+function Collections({ onCreateCollection }: Props) {
+  const [isFetching, setFetching] = React.useState(false);
+  const [fetchError, setFetchError] = React.useState();
+  const { ui, policies, documents, collections } = useStores();
+  const isPreloaded: boolean = !!collections.orderedData.length;
+  const { t } = useTranslation();
+  const team = useCurrentTeam();
+  const orderedCollections = collections.orderedData;
+  const can = policies.abilities(team.id);
+  const [isDraggingAnyCollection, setIsDraggingAnyCollection] = React.useState(
+    false
+  );
 
-  componentDidMount() {
-    const { collections } = this.props;
-
-    if (!collections.isFetching && !collections.isLoaded) {
-      collections.fetchPage({ limit: 100 });
+  React.useEffect(() => {
+    async function load() {
+      if (!collections.isLoaded && !isFetching && !fetchError) {
+        try {
+          setFetching(true);
+          await collections.fetchPage({ limit: 100 });
+        } catch (error) {
+          ui.showToast(
+            t("Collections could not be loaded, please reload the app"),
+            {
+              type: "error",
+            }
+          );
+          setFetchError(error);
+        } finally {
+          setFetching(false);
+        }
+      }
     }
-  }
+    load();
+  }, [collections, isFetching, ui, fetchError, t]);
 
-  @keydown("n")
-  goToNewDocument() {
-    const { activeCollectionId } = this.props.ui;
-    if (!activeCollectionId) return;
+  const [{ isCollectionDropping }, dropToReorderCollection] = useDrop({
+    accept: "collection",
+    drop: async (item, monitor) => {
+      collections.move(
+        item.id,
+        fractionalIndex(null, orderedCollections[0].index)
+      );
+    },
+    canDrop: (item, monitor) => {
+      return item.id !== orderedCollections[0].id;
+    },
+    collect: (monitor) => ({
+      isCollectionDropping: monitor.isOver(),
+    }),
+  });
 
-    const can = this.props.policies.abilities(activeCollectionId);
-    if (!can.update) return;
-
-    this.props.history.push(newDocumentUrl(activeCollectionId));
-  }
-
-  render() {
-    const { collections, ui, policies, documents, t } = this.props;
-
-    const content = (
-      <>
-        {collections.orderedData.map((collection) => (
-          <CollectionLink
-            key={collection.id}
-            collection={collection}
-            activeDocument={documents.active}
-            prefetchDocument={documents.prefetchDocument}
-            canUpdate={policies.abilities(collection.id).update}
-            ui={ui}
-          />
-        ))}
+  const content = (
+    <>
+      <DropCursor
+        isActiveDrop={isCollectionDropping}
+        innerRef={dropToReorderCollection}
+        from="collections"
+      />
+      {orderedCollections.map((collection, index) => (
+        <CollectionLink
+          key={collection.id}
+          collection={collection}
+          activeDocument={documents.active}
+          prefetchDocument={documents.prefetchDocument}
+          canUpdate={policies.abilities(collection.id).update}
+          ui={ui}
+          isDraggingAnyCollection={isDraggingAnyCollection}
+          onChangeDragging={setIsDraggingAnyCollection}
+          belowCollection={orderedCollections[index + 1]}
+        />
+      ))}
+      {can.createCollection && (
         <SidebarLink
           to="/collections"
-          onClick={this.props.onCreateCollection}
+          onClick={onCreateCollection}
           icon={<PlusIcon color="currentColor" />}
           label={`${t("New collection")}…`}
           exact
         />
-      </>
-    );
+      )}
+    </>
+  );
 
+  if (!collections.isLoaded || fetchError) {
     return (
       <Flex column>
         <Header>{t("Collections")}</Header>
-        {collections.isLoaded ? (
-          this.isPreloaded ? (
-            content
-          ) : (
-            <Fade>{content}</Fade>
-          )
-        ) : (
-          <CollectionsLoading />
-        )}
+        <CollectionsLoading />
       </Flex>
     );
   }
+
+  return (
+    <Flex column>
+      <Header>{t("Collections")}</Header>
+      {isPreloaded ? content : <Fade>{content}</Fade>}
+    </Flex>
+  );
 }
 
-export default withTranslation()<Collections>(
-  inject("collections", "ui", "documents", "policies")(withRouter(Collections))
-);
+export default observer(Collections);

app/components/Sidebar/components/DocumentLink.js

@@ -7,9 +7,9 @@ import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import Collection from "models/Collection";
 import Document from "models/Document";
-import DropToImport from "components/DropToImport";
 import Fade from "components/Fade";
 import DropCursor from "./DropCursor";
+import DropToImport from "./DropToImport";
 import EditableTitle from "./EditableTitle";
 import SidebarLink from "./SidebarLink";
 import useStores from "hooks/useStores";
@@ -27,16 +27,19 @@ type Props = {|
   parentId?: string,
 |};
 
-function DocumentLink({
-  node,
-  canUpdate,
-  collection,
-  activeDocument,
-  prefetchDocument,
-  depth,
-  index,
-  parentId,
-}: Props) {
+function DocumentLink(
+  {
+    node,
+    canUpdate,
+    collection,
+    activeDocument,
+    prefetchDocument,
+    depth,
+    index,
+    parentId,
+  }: Props,
+  ref
+) {
   const { documents, policies } = useStores();
   const { t } = useTranslation();
 
@@ -123,7 +126,8 @@ function DocumentLink({
 
   // Draggable
   const [{ isDragging }, drag] = useDrag({
-    item: { type: "document", ...node, depth, active: isActiveDocument },
+    type: "document",
+    item: () => ({ ...node, depth, active: isActiveDocument }),
     collect: (monitor) => ({
       isDragging: !!monitor.isDragging(),
     }),
@@ -146,7 +150,7 @@ function DocumentLink({
   // Drop to re-parent
   const [{ isOverReparent, canDropToReparent }, dropToReparent] = useDrop({
     accept: "document",
-    drop: async (item, monitor) => {
+    drop: (item, monitor) => {
       if (monitor.didDrop()) return;
       if (!collection) return;
       documents.move(item.id, collection.id, node.id);
@@ -183,7 +187,7 @@ function DocumentLink({
   // Drop to reorder
   const [{ isOverReorder }, dropToReorder] = useDrop({
     accept: "document",
-    drop: async (item, monitor) => {
+    drop: (item, monitor) => {
       if (!collection) return;
       if (item.id === node.id) return;
 
@@ -235,6 +239,7 @@ function DocumentLink({
                 depth={depth}
                 exact={false}
                 showActions={menuOpen}
+                ref={ref}
                 menu={
                   document && !isMoving ? (
                     <Fade>
@@ -281,11 +286,13 @@ const Draggable = styled("div")`
 `;
 
 const Disclosure = styled(CollapsedIcon)`
+  transition: transform 100ms ease, fill 50ms !important;
   position: absolute;
   left: -24px;
 
   ${({ expanded }) => !expanded && "transform: rotate(-90deg);"};
 `;
 
-const ObservedDocumentLink = observer(DocumentLink);
+const ObservedDocumentLink = observer(React.forwardRef(DocumentLink));
+
 export default ObservedDocumentLink;

app/components/Sidebar/components/DropCursor.js

@@ -7,12 +7,14 @@ function DropCursor({
   isActiveDrop,
   innerRef,
   theme,
+  from,
 }: {
   isActiveDrop: boolean,
   innerRef: React.Ref<any>,
   theme: Theme,
+  from: string,
 }) {
-  return <Cursor isOver={isActiveDrop} ref={innerRef} />;
+  return <Cursor isOver={isActiveDrop} ref={innerRef} from={from} />;
 }
 
 // transparent hover zone with a thin visible band vertically centered
@@ -25,7 +27,7 @@ const Cursor = styled("div")`
 
   width: 100%;
   height: 14px;
-  bottom: -7px;
+  ${(props) => (props.from === "collections" ? "top: 15px;" : "bottom: -7px;")}
   background: transparent;
 
   ::after {

app/components/Sidebar/components/DropToImport.js

@@ -0,0 +1,85 @@
+// @flow
+import { observer } from "mobx-react";
+import * as React from "react";
+import Dropzone from "react-dropzone";
+import { useTranslation } from "react-i18next";
+import styled, { css } from "styled-components";
+import LoadingIndicator from "components/LoadingIndicator";
+import useImportDocument from "hooks/useImportDocument";
+import useStores from "hooks/useStores";
+
+type Props = {|
+  children: React.Node,
+  collectionId: string,
+  documentId?: string,
+  disabled: boolean,
+  staticContext: Object,
+|};
+
+function DropToImport({ disabled, children, collectionId, documentId }: Props) {
+  const { t } = useTranslation();
+  const { ui, documents, policies } = useStores();
+  const { handleFiles, isImporting } = useImportDocument(
+    collectionId,
+    documentId
+  );
+
+  const can = policies.abilities(collectionId);
+
+  const handleRejection = React.useCallback(() => {
+    ui.showToast(
+      t("Document not supported – try Markdown, Plain text, HTML, or Word"),
+      { type: "error" }
+    );
+  }, [t, ui]);
+
+  if (disabled || !can.update) {
+    return children;
+  }
+
+  return (
+    <Dropzone
+      accept={documents.importFileTypes.join(", ")}
+      onDropAccepted={handleFiles}
+      onDropRejected={handleRejection}
+      noClick
+      multiple
+    >
+      {({
+        getRootProps,
+        getInputProps,
+        isDragActive,
+        isDragAccept,
+        isDragReject,
+      }) => (
+        <DropzoneContainer
+          {...getRootProps()}
+          {...{ isDragActive }}
+          tabIndex="-1"
+        >
+          <input {...getInputProps()} />
+          {isImporting && <LoadingIndicator />}
+          {children}
+        </DropzoneContainer>
+      )}
+    </Dropzone>
+  );
+}
+
+const DropzoneContainer = styled.div`
+  border-radius: 4px;
+
+  ${({ isDragActive, theme }) =>
+    isDragActive &&
+    css`
+      background: ${theme.slateDark};
+      a {
+        color: ${theme.white} !important;
+      }
+      svg {
+        fill: ${theme.white};
+      }
+    `}
+`;
+
+export default observer(DropToImport);

app/components/Sidebar/components/EditableTitle.js

@@ -65,6 +65,7 @@ function EditableTitle({ title, onSubmit, canUpdate }: Props) {
       {isEditing ? (
         <form onSubmit={handleSave}>
           <Input
+            dir="auto"
             type="text"
             value={value}
             onKeyDown={handleKeyDown}

app/components/Sidebar/components/ResizeBorder.js

@@ -7,7 +7,7 @@ const ResizeBorder = styled.div`
   bottom: 0;
   right: -6px;
   width: 12px;
-  cursor: ew-resize;
+  cursor: col-resize;
 `;
 
 export default ResizeBorder;

app/components/Sidebar/components/Section.js

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

app/components/Sidebar/components/SidebarLink.js

@@ -1,4 +1,5 @@
 // @flow
+import { transparentize } from "polished";
 import * as React from "react";
 import { withRouter, type RouterHistory, type Match } from "react-router-dom";
 import styled, { withTheme } from "styled-components";
@@ -29,25 +30,28 @@ type Props = {
   depth?: number,
 };
 
-function SidebarLink({
-  icon,
-  children,
-  onClick,
-  onMouseEnter,
-  to,
-  label,
-  active,
-  isActiveDrop,
-  menu,
-  showActions,
-  theme,
-  exact,
-  href,
-  depth,
-  history,
-  match,
-  className,
-}: Props) {
+function SidebarLink(
+  {
+    icon,
+    children,
+    onClick,
+    onMouseEnter,
+    to,
+    label,
+    active,
+    isActiveDrop,
+    menu,
+    showActions,
+    theme,
+    exact,
+    href,
+    depth,
+    history,
+    match,
+    className,
+  }: Props,
+  ref
+) {
   const style = React.useMemo(() => {
     return {
       paddingLeft: `${(depth || 0) * 16 + 16}px`,
@@ -66,22 +70,25 @@ function SidebarLink({
   };
 
   return (
-    <Link
-      $isActiveDrop={isActiveDrop}
-      activeStyle={isActiveDrop ? activeDropStyle : activeStyle}
-      style={active ? activeStyle : style}
-      onClick={onClick}
-      onMouseEnter={onMouseEnter}
-      exact={exact !== false}
-      to={to}
-      as={to ? undefined : href ? "a" : "div"}
-      href={href}
-      className={className}
-    >
-      {icon && <IconWrapper>{icon}</IconWrapper>}
-      <Label>{label}</Label>
+    <>
+      <Link
+        $isActiveDrop={isActiveDrop}
+        activeStyle={isActiveDrop ? activeDropStyle : activeStyle}
+        style={active ? activeStyle : style}
+        onClick={onClick}
+        onMouseEnter={onMouseEnter}
+        exact={exact !== false}
+        to={to}
+        as={to ? undefined : href ? "a" : "div"}
+        href={href}
+        className={className}
+        ref={ref}
+      >
+        {icon && <IconWrapper>{icon}</IconWrapper>}
+        <Label>{label}</Label>
+      </Link>
       {menu && <Actions showActions={showActions}>{menu}</Actions>}
-    </Link>
+    </>
   );
 }
 
@@ -109,6 +116,8 @@ const Actions = styled(EventBoundary)`
   }
 
   &:hover {
+    display: inline-flex;
+
     svg {
       opacity: 0.75;
     }
@@ -126,7 +135,7 @@ const Link = styled(NavLink)`
     props.$isActiveDrop ? props.theme.slateDark : "inherit"};
   color: ${(props) =>
     props.$isActiveDrop ? props.theme.white : props.theme.sidebarText};
-  font-size: 15px;
+  font-size: 16px;
   cursor: pointer;
   overflow: hidden;
 
@@ -135,30 +144,33 @@ const Link = styled(NavLink)`
     transition: fill 50ms;
   }
 
-  &:hover {
-    color: ${(props) =>
-      props.$isActiveDrop ? props.theme.white : props.theme.text};
-  }
-
   &:focus {
     color: ${(props) => props.theme.text};
-    background: ${(props) => props.theme.black05};
-  }
-
-  &:hover,
-  &:active {
-    > ${Actions} {
-      display: inline-flex;
-
-      svg {
-        opacity: 0.75;
-      }
-    }
+    background: ${(props) =>
+      transparentize("0.25", props.theme.sidebarItemBackground)};
   }
 
   ${breakpoint("tablet")`
-    padding: 4px 16px;
+    padding: 4px 32px 4px 16px;
+    font-size: 15px;
   `}
+
+  @media (hover: hover) {
+    &:hover + ${Actions},
+    &:active + ${Actions} {
+        display: inline-flex;
+
+        svg {
+          opacity: 0.75;
+        }
+      }
+    }
+
+    &:hover {
+      color: ${(props) =>
+        props.$isActiveDrop ? props.theme.white : props.theme.text};
+    }
+  }
 `;
 
 const Label = styled.div`
@@ -166,6 +178,9 @@ const Label = styled.div`
   width: 100%;
   max-height: 4.8em;
   line-height: 1.6;
+  * {
+    unicode-bidi: plaintext;
+  }
 `;
 
-export default withRouter(withTheme(SidebarLink));
+export default withRouter(withTheme(React.forwardRef(SidebarLink)));

app/components/Sidebar/components/TeamButton.js

@@ -68,18 +68,19 @@ const Wrapper = styled.div`
 const Header = styled.button`
   display: flex;
   align-items: center;
-  padding: 20px 24px;
   background: none;
   line-height: inherit;
   border: 0;
-  margin: 0;
+  padding: 8px;
+  margin: 8px;
+  border-radius: 4px;
   cursor: pointer;
-  width: 100%;
+  width: calc(100% - 16px);
 
   &:active,
   &:hover {
     transition: background 100ms ease-in-out;
-    background: rgba(0, 0, 0, 0.05);
+    background: ${(props) => props.theme.sidebarItemBackground};
   }
 `;
 

app/components/Sidebar/components/Toggle.js

@@ -28,7 +28,7 @@ export const ToggleButton = styled.button`
   transition: opacity 100ms ease-in-out;
   transform: translateY(-50%)
     scaleX(${(props) => (props.$direction === "left" ? 1 : -1)});
-  position: absolute;
+  position: fixed;
   top: 50vh;
   padding: 8px;
   border: 0;

app/components/SocketProvider.js

@@ -101,7 +101,10 @@ class SocketProvider extends React.Component<Props> {
     // on reconnection, reset the transports option, as the Websocket
     // connection may have failed (caused by proxy, firewall, browser, ...)
     this.socket.on("reconnect_attempt", () => {
-      this.socket.io.opts.transports = ["polling", "websocket"];
+      this.socket.io.opts.transports =
+        auth.team && auth.team.domain
+          ? ["websocket"]
+          : ["websocket", "polling"];
     });
 
     this.socket.on("authenticated", () => {
@@ -141,9 +144,10 @@ class SocketProvider extends React.Component<Props> {
 
           // otherwise, grab the latest version of the document
           try {
-            document = await documents.fetch(documentId, {
+            const response = await documents.fetch(documentId, {
               force: true,
             });
+            document = response.document;
           } catch (err) {
             if (err.statusCode === 404 || err.statusCode === 403) {
               documents.remove(documentId);
@@ -246,6 +250,10 @@ 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) => {
@@ -272,6 +280,13 @@ class SocketProvider extends React.Component<Props> {
       }
     });
 
+    this.socket.on("collections.update_index", (event) => {
+      const collection = collections.get(event.collectionId);
+      if (collection) {
+        collection.updateIndex(event.index);
+      }
+    });
+
     // received a message from the API server that we should request
     // to join a specific room. Forward that to the ws server.
     this.socket.on("join", (event) => {

app/components/Star.js

@@ -61,6 +61,10 @@ export const AnimatedStar = styled(StarredIcon)`
   &:active {
     transform: scale(0.95);
   }
+
+  @media print {
+    display: none;
+  }
 `;
 
 export default Star;

app/components/Subheading.js

@@ -4,6 +4,7 @@ import styled from "styled-components";
 
 type Props = {|
   children: React.Node,
+  sticky?: boolean,
 |};
 
 const H3 = styled.h3`
@@ -26,9 +27,9 @@ const Underline = styled.div`
 
 // When sticky we need extra background coverage around the sides otherwise
 // items that scroll past can "stick out" the sides of the heading
-const Sticky = styled.div`
-  position: sticky;
-  top: 54px;
+const Background = styled.div`
+  position: ${(props) => (props.sticky ? "sticky" : "relative")};
+  ${(props) => (props.sticky ? "top: 54px;" : "")}
   margin: 0 -8px;
   padding: 0 8px;
   background: ${(props) => props.theme.background};
@@ -36,13 +37,13 @@ const Sticky = styled.div`
   z-index: 1;
 `;
 
-const Subheading = ({ children, ...rest }: Props) => {
+const Subheading = ({ children, sticky, ...rest }: Props) => {
   return (
-    <Sticky>
+    <Background sticky={sticky}>
       <H3 {...rest}>
         <Underline>{children}</Underline>
       </H3>
-    </Sticky>
+    </Background>
   );
 };
 

app/components/Table.js

@@ -0,0 +1,250 @@
+// @flow
+import { observer } from "mobx-react";
+import { CollapsedIcon } from "outline-icons";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { useTable, useSortBy, usePagination } from "react-table";
+import styled from "styled-components";
+import Button from "components/Button";
+import Empty from "components/Empty";
+import Flex from "components/Flex";
+import Mask from "components/Mask";
+
+export type Props = {|
+  data: any[],
+  offset?: number,
+  isLoading: boolean,
+  empty?: React.Node,
+  currentPage?: number,
+  page: number,
+  pageSize?: number,
+  totalPages?: number,
+  defaultSort?: string,
+  topRef?: React.Ref<any>,
+  onChangePage: (index: number) => void,
+  onChangeSort: (sort: ?string, direction: "ASC" | "DESC") => void,
+  columns: any,
+|};
+
+function Table({
+  data,
+  offset,
+  isLoading,
+  totalPages,
+  empty,
+  columns,
+  page,
+  pageSize = 50,
+  defaultSort = "name",
+  topRef,
+  onChangeSort,
+  onChangePage,
+}: Props) {
+  const { t } = useTranslation();
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    rows,
+    prepareRow,
+    canNextPage,
+    nextPage,
+    canPreviousPage,
+    previousPage,
+    state: { pageIndex, sortBy },
+  } = useTable(
+    {
+      columns,
+      data,
+      manualPagination: true,
+      manualSortBy: true,
+      autoResetSortBy: false,
+      autoResetPage: false,
+      pageCount: totalPages,
+      initialState: {
+        sortBy: [{ id: defaultSort, desc: false }],
+        pageSize,
+        pageIndex: page,
+      },
+    },
+    useSortBy,
+    usePagination
+  );
+
+  React.useEffect(() => {
+    onChangePage(pageIndex);
+  }, [pageIndex]);
+
+  React.useEffect(() => {
+    onChangePage(0);
+    onChangeSort(
+      sortBy.length ? sortBy[0].id : undefined,
+      sortBy.length && sortBy[0].desc ? "DESC" : "ASC"
+    );
+  }, [sortBy]);
+
+  const isEmpty = !isLoading && data.length === 0;
+  const showPlaceholder = isLoading && data.length === 0;
+
+  console.log({ canNextPage, pageIndex, totalPages, rows, data });
+
+  return (
+    <>
+      <Anchor ref={topRef} />
+      <InnerTable {...getTableProps()}>
+        <thead>
+          {headerGroups.map((headerGroup) => (
+            <tr {...headerGroup.getHeaderGroupProps()}>
+              {headerGroup.headers.map((column) => (
+                <Head {...column.getHeaderProps(column.getSortByToggleProps())}>
+                  <SortWrapper align="center" gap={4}>
+                    {column.render("Header")}
+                    {column.isSorted &&
+                      (column.isSortedDesc ? (
+                        <DescSortIcon />
+                      ) : (
+                        <AscSortIcon />
+                      ))}
+                  </SortWrapper>
+                </Head>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <tbody {...getTableBodyProps()}>
+          {rows.map((row) => {
+            prepareRow(row);
+            return (
+              <Row {...row.getRowProps()}>
+                {row.cells.map((cell) => (
+                  <Cell
+                    {...cell.getCellProps([
+                      {
+                        className: cell.column.className,
+                      },
+                    ])}
+                  >
+                    {cell.render("Cell")}
+                  </Cell>
+                ))}
+              </Row>
+            );
+          })}
+        </tbody>
+        {showPlaceholder && <Placeholder columns={columns.length} />}
+      </InnerTable>
+      {isEmpty ? (
+        empty || <Empty>{t("No results")}</Empty>
+      ) : (
+        <Pagination
+          justify={canPreviousPage ? "space-between" : "flex-end"}
+          gap={8}
+        >
+          {/* Note: the page > 0 check shouldn't be needed here but is */}
+          {canPreviousPage && page > 0 && (
+            <Button onClick={previousPage} neutral>
+              {t("Previous page")}
+            </Button>
+          )}
+          {canNextPage && (
+            <Button onClick={nextPage} neutral>
+              {t("Next page")}
+            </Button>
+          )}
+        </Pagination>
+      )}
+    </>
+  );
+}
+
+export const Placeholder = ({
+  columns,
+  rows = 3,
+}: {
+  columns: number,
+  rows?: number,
+}) => {
+  return (
+    <tbody>
+      {new Array(rows).fill().map((_, row) => (
+        <Row key={row}>
+          {new Array(columns).fill().map((_, col) => (
+            <Cell key={col}>
+              <Mask minWidth={25} maxWidth={75} />
+            </Cell>
+          ))}
+        </Row>
+      ))}
+    </tbody>
+  );
+};
+
+const Anchor = styled.div`
+  top: -32px;
+  position: relative;
+`;
+
+const Pagination = styled(Flex)`
+  margin: 0 0 32px;
+`;
+
+const DescSortIcon = styled(CollapsedIcon)`
+  &:hover {
+    fill: ${(props) => props.theme.text};
+  }
+`;
+
+const AscSortIcon = styled(DescSortIcon)`
+  transform: rotate(180deg);
+`;
+
+const InnerTable = styled.table`
+  border-collapse: collapse;
+  margin: 16px 0;
+  width: 100%;
+`;
+
+const SortWrapper = styled(Flex)`
+  height: 24px;
+`;
+
+const Cell = styled.td`
+  padding: 8px 0;
+  border-bottom: 1px solid ${(props) => props.theme.divider};
+  font-size: 14px;
+
+  &:first-child {
+    font-size: 15px;
+    font-weight: 500;
+  }
+
+  &.actions,
+  &.right-aligned {
+    text-align: right;
+    vertical-align: bottom;
+  }
+`;
+
+const Row = styled.tr`
+  &:last-child {
+    ${Cell} {
+      border-bottom: 0;
+    }
+  }
+`;
+
+const Head = styled.th`
+  text-align: left;
+  position: sticky;
+  top: 54px;
+  padding: 6px 0;
+  border-bottom: 1px solid ${(props) => props.theme.divider};
+  background: ${(props) => props.theme.background};
+  transition: ${(props) => props.theme.backgroundTransition};
+  font-size: 14px;
+  color: ${(props) => props.theme.textSecondary};
+  font-weight: 500;
+  z-index: 1;
+`;
+
+export default observer(Table);

app/components/Theme.js

@@ -1,25 +1,34 @@
 // @flow
-import { inject, observer } from "mobx-react";
+import { observer } from "mobx-react";
 import * as React from "react";
 import { ThemeProvider } from "styled-components";
 import GlobalStyles from "shared/styles/globals";
-import { dark, light } from "shared/styles/theme";
-import UiStore from "stores/UiStore";
+import { dark, light, lightMobile, darkMobile } from "shared/styles/theme";
+import useMediaQuery from "hooks/useMediaQuery";
+import useStores from "hooks/useStores";
 
-type Props = {
-  ui: UiStore,
+const empty = {};
+
+type Props = {|
   children: React.Node,
-};
+|};
+
+function Theme({ children }: Props) {
+  const { ui } = useStores();
+  const theme = ui.resolvedTheme === "dark" ? dark : light;
+  const mobileTheme = ui.resolvedTheme === "dark" ? darkMobile : lightMobile;
+  const isMobile = useMediaQuery(`(max-width: ${theme.breakpoints.tablet}px)`);
 
-function Theme({ children, ui }: Props) {
   return (
-    <ThemeProvider theme={ui.resolvedTheme === "dark" ? dark : light}>
-      <>
-        <GlobalStyles />
-        {children}
-      </>
+    <ThemeProvider theme={theme}>
+      <ThemeProvider theme={isMobile ? mobileTheme : empty}>
+        <>
+          <GlobalStyles />
+          {children}
+        </>
+      </ThemeProvider>
     </ThemeProvider>
   );
 }
 
-export default inject("ui")(observer(Theme));
+export default observer(Theme);

app/components/Time.js

@@ -1,8 +1,10 @@
 // @flow
-import distanceInWordsToNow from "date-fns/distance_in_words_to_now";
+import { formatDistanceToNow } from "date-fns";
 import * as React from "react";
 
-const LocaleTime = React.lazy(() => import("components/LocaleTime"));
+const LocaleTime = React.lazy(() =>
+  import(/* webpackChunkName: "locale-time" */ "components/LocaleTime")
+);
 
 type Props = {
   dateTime: string,
@@ -13,7 +15,7 @@ type Props = {
 };
 
 function Time(props: Props) {
-  let content = distanceInWordsToNow(props.dateTime, {
+  let content = formatDistanceToNow(Date.parse(props.dateTime), {
     addSuffix: props.addSuffix,
   });
 

app/embeds/Cawemo.js

@@ -0,0 +1,31 @@
+// @flow
+import * as React from "react";
+import Frame from "./components/Frame";
+
+const URL_REGEX = new RegExp("https?://cawemo.com/(?:share|embed)/(.*)$");
+
+type Props = {|
+  attrs: {|
+    href: string,
+    matches: string[],
+  |},
+|};
+
+export default class Cawemo extends React.Component<Props> {
+  static ENABLED = [URL_REGEX];
+
+  render() {
+    const { matches } = this.props.attrs;
+    const shareId = matches[1];
+
+    return (
+      <Frame
+        {...this.props}
+        src={`https://cawemo.com/embed/${shareId}`}
+        title={"Cawemo Embed"}
+        border
+        allowfullscreen
+      />
+    );
+  }
+}

app/embeds/Cawemo.test.js

@@ -0,0 +1,22 @@
+/* eslint-disable flowtype/require-valid-file-annotation */
+import Cawemo from "./Cawemo";
+
+describe("Cawemo", () => {
+  const match = Cawemo.ENABLED[0];
+  test("to be enabled on embed link", () => {
+    expect(
+      "https://cawemo.com/embed/a82e9f22-e283-4253-8d11".match(match)
+    ).toBeTruthy();
+  });
+
+  test("to be enabled on share link", () => {
+    expect(
+      "https://cawemo.com/embed/a82e9f22-e283-4253-8d11".match(match)
+    ).toBeTruthy();
+  });
+
+  test("to not be enabled elsewhere", () => {
+    expect("https://cawemo.com/".match(match)).toBe(null);
+    expect("https://cawemo.com/diagrams".match(match)).toBe(null);
+  });
+});

app/embeds/Descript.js

@@ -0,0 +1,28 @@
+// @flow
+import * as React from "react";
+import Frame from "./components/Frame";
+
+type Props = {|
+  attrs: {|
+    href: string,
+    matches: string[],
+  |},
+|};
+
+export default class Descript extends React.Component<Props> {
+  static ENABLED = [new RegExp("https?://share.descript.com/view/(\\w+)$")];
+
+  render() {
+    const { matches } = this.props.attrs;
+    const shareId = matches[1];
+
+    return (
+      <Frame
+        {...this.props}
+        src={`https://share.descript.com/embed/${shareId}`}
+        title={`Descript (${shareId})`}
+        width="400px"
+      />
+    );
+  }
+}

app/embeds/Gist.js

@@ -15,13 +15,23 @@ type Props = {|
 
 class Gist extends React.Component<Props> {
   static ENABLED = [URL_REGEX];
+  ref = React.createRef<HTMLIFrameElement>();
 
   get id() {
     const gistUrl = new URL(this.props.attrs.href);
     return gistUrl.pathname.split("/")[2];
   }
 
-  updateIframeContent = (iframe: ?HTMLIFrameElement) => {
+  componentDidMount() {
+    this.updateIframeContent();
+  }
+
+  componentDidUpdate() {
+    this.updateIframeContent();
+  }
+
+  updateIframeContent = () => {
+    const iframe = this.ref.current;
     if (!iframe) return;
     const id = this.id;
 
@@ -39,6 +49,8 @@ class Gist extends React.Component<Props> {
       "<style>*{ font-size:12px; } body { margin: 0; } .gist .blob-wrapper.data { max-height:150px; overflow:auto; }</style>";
     const iframeHtml = `<html><head><base target="_parent">${styles}</head><body>${gistScript}</body></html>`;
 
+    if (!doc) return;
+
     doc.open();
     doc.writeln(iframeHtml);
     doc.close();
@@ -50,13 +62,14 @@ class Gist extends React.Component<Props> {
     return (
       <iframe
         className={this.props.isSelected ? "ProseMirror-selectednode" : ""}
-        ref={this.updateIframeContent}
+        ref={this.ref}
         type="text/html"
         frameBorder="0"
         width="100%"
         height="200px"
         id={`gist-${id}`}
         title={`Github Gist (${id})`}
+        onLoad={this.updateIframeContent}
       />
     );
   }

app/embeds/GoogleSheets.js

@@ -12,7 +12,7 @@ type Props = {|
   |},
 |};
 
-export default class GoogleSlides extends React.Component<Props> {
+export default class GoogleSheets extends React.Component<Props> {
   static ENABLED = [URL_REGEX];
 
   render() {

app/embeds/Lucidchart.js

@@ -1,22 +1,22 @@
 // @flow
 import * as React from "react";
 import Frame from "./components/Frame";
-
-const URL_REGEX = /^https?:\/\/(www\.|app\.)?lucidchart.com\/documents\/(embeddedchart|view)\/([0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12})(?:\/.*)?$/;
-
 type Props = {|
   attrs: {|
     href: string,
-    matches: string[],
+    matches: Object,
   |},
 |};
 
 export default class Lucidchart extends React.Component<Props> {
-  static ENABLED = [URL_REGEX];
+  static ENABLED = [
+    /^https?:\/\/(www\.|app\.)?lucidchart.com\/documents\/(embeddedchart|view)\/(?<chartId>[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12})(?:\/.*)?$/,
+    /^https?:\/\/(www\.|app\.)?lucid.app\/lucidchart\/(?<chartId>[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12})\/(embeddedchart|view)(?:\/.*)?$/,
+  ];
 
   render() {
     const { matches } = this.props.attrs;
-    const chartId = matches[3];
+    const { chartId } = matches.groups;
 
     return (
       <Frame

app/embeds/Mindmeister.js

@@ -17,7 +17,10 @@ export default class Mindmeister extends React.Component<Props> {
   static ENABLED = [URL_REGEX];
 
   render() {
-    const chartId = this.props.attrs.matches[4] + this.props.attrs.matches[6];
+    const chartId =
+      this.props.attrs.matches[4] +
+      (this.props.attrs.matches[5] || "") +
+      (this.props.attrs.matches[6] || "");
 
     return (
       <Frame

app/embeds/components/Frame.js

@@ -11,9 +11,7 @@ import Flex from "components/Flex";
 const Iframe = (props) => <iframe title="Embed" {...props} />;
 
 const StyledIframe = styled(Iframe)`
-  border: 1px solid;
-  border-color: ${(props) => props.theme.embedBorder};
-  border-radius: ${(props) => (props.withBar ? "3px 3px 0 0" : "3px")};
+  border-radius: ${(props) => (props.$withBar ? "3px 3px 0 0" : "3px")};
   display: block;
 `;
 
@@ -70,13 +68,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}
@@ -108,10 +106,11 @@ class Frame extends React.Component<PropsWithRef> {
 }
 
 const Rounded = styled.div`
-  border-radius: ${(props) => (props.withBar ? "3px 3px 0 0" : "3px")};
+  border: 1px solid ${(props) => props.theme.embedBorder};
+  border-radius: 6px;
   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`
@@ -132,11 +131,12 @@ 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: 3px;
-  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 6px;
+  border-bottom-right-radius: 6px;
   user-select: none;
 `;
 

app/embeds/index.js

@@ -4,8 +4,10 @@ import styled from "styled-components";
 import Image from "components/Image";
 import Abstract from "./Abstract";
 import Airtable from "./Airtable";
+import Cawemo from "./Cawemo";
 import ClickUp from "./ClickUp";
 import Codepen from "./Codepen";
+import Descript from "./Descript";
 import Figma from "./Figma";
 import Framer from "./Framer";
 import Gist from "./Gist";
@@ -61,9 +63,18 @@ export default [
     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),
@@ -75,6 +86,13 @@ export default [
     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",
@@ -133,6 +151,7 @@ export default [
   {
     title: "InVision",
     keywords: "design prototype",
+    defaultHidden: true,
     icon: () => <Img src="/images/invision.png" />,
     component: InVision,
     matcher: matcher(InVision),
@@ -175,6 +194,7 @@ export default [
   {
     title: "Mode",
     keywords: "analytics",
+    defaultHidden: true,
     icon: () => <Img src="/images/mode-analytics.png" />,
     component: ModeAnalytics,
     matcher: matcher(ModeAnalytics),

app/hooks/useImportDocument.js

@@ -0,0 +1,69 @@
+// @flow
+import invariant from "invariant";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { useHistory } from "react-router-dom";
+import useStores from "hooks/useStores";
+
+let importingLock = false;
+
+export default function useImportDocument(
+  collectionId: string,
+  documentId?: string
+): {| handleFiles: (files: File[]) => Promise<void>, isImporting: boolean |} {
+  const { documents, ui } = useStores();
+  const [isImporting, setImporting] = React.useState(false);
+  const { t } = useTranslation();
+  const history = useHistory();
+
+  const handleFiles = React.useCallback(
+    async (files = []) => {
+      if (importingLock) {
+        return;
+      }
+
+      // Because this is the onChange handler it's possible for the change to be
+      // from previously selecting a file to not selecting a file – aka empty
+      if (!files.length) {
+        return;
+      }
+
+      setImporting(true);
+      importingLock = true;
+
+      try {
+        let cId = collectionId;
+        const redirect = files.length === 1;
+
+        if (documentId && !collectionId) {
+          const { document } = await documents.fetch(documentId);
+          invariant(document, "Document not available");
+          cId = document.collectionId;
+        }
+
+        for (const file of files) {
+          const doc = await documents.import(file, documentId, cId, {
+            publish: true,
+          });
+
+          if (redirect) {
+            history.push(doc.url);
+          }
+        }
+      } catch (err) {
+        ui.showToast(`${t("Could not import file")}. ${err.message}`, {
+          type: "error",
+        });
+      } finally {
+        setImporting(false);
+        importingLock = false;
+      }
+    },
+    [t, ui, documents, history, collectionId, documentId]
+  );
+
+  return {
+    handleFiles,
+    isImporting,
+  };
+}